From f38d41c743ffc1237db513a7fe1522decd230476 Mon Sep 17 00:00:00 2001
From: Jeffrey Cherewaty <jeffrey@frontside.io>
Date: Mon, 3 Sep 2018 18:48:02 -0500
Subject: [PATCH] Update import examples in docs

---
 MIGRATIONPATHS.md              |  8 ++---
 docs/UIModuleLayout.md         |  4 +--
 lib/Accordion/readme.md        |  4 +--
 lib/AppIcon/readme.md          |  4 +--
 lib/AutoSuggest/readme.md      |  2 +-
 lib/Button/readme.md           |  2 +-
 lib/DateRangeWrapper/readme.md | 22 ++++++-------
 lib/Datepicker/readme.md       |  2 +-
 lib/Dropdown/readme.md         |  9 +++---
 lib/EmptyMessage/readme.md     |  2 +-
 lib/Headline/readme.md         |  2 +-
 lib/HotKeys/readme.md          |  6 ++--
 lib/Icon/readme.md             |  6 ++--
 lib/IconButton/readme.md       |  2 +-
 lib/InfoPopover/readme.md      |  2 +-
 lib/KeyValue/readme.md         |  2 +-
 lib/Layer/readme.md            | 18 +++++------
 lib/Layout/readme.md           |  6 ++--
 lib/LayoutGrid/readme.md       |  2 +-
 lib/List/readme.md             |  2 +-
 lib/MenuItem/readme.md         |  3 +-
 lib/Modal/readme.md            |  3 +-
 lib/ModalFooter/readme.md      |  3 +-
 lib/MultiSelection/readme.md   | 56 +++++++++++++++++-----------------
 lib/NavList/readme.md          |  4 +--
 lib/Pane/readme.md             |  3 +-
 lib/Paneset/readme.md          |  3 +-
 lib/Popover/readme.md          |  2 +-
 lib/RadioButton/readme.md      |  2 +-
 lib/ReduxFormField/readme.md   |  2 --
 lib/SRStatus/readme.md         |  2 +-
 lib/SearchField/readme.md      |  4 +--
 lib/SegmentedControl/readme.md |  2 +-
 lib/Select/readme.md           |  2 +-
 lib/Selection/readme.md        |  5 ++-
 lib/Timepicker/readme.md       |  2 +-
 36 files changed, 96 insertions(+), 109 deletions(-)

diff --git a/MIGRATIONPATHS.md b/MIGRATIONPATHS.md
index 763db13e5..06e262097 100644
--- a/MIGRATIONPATHS.md
+++ b/MIGRATIONPATHS.md
@@ -1,12 +1,12 @@
 # Stripes-Components Migration Paths
 ## 3.x to 4.x
-Upcoming release.  
+Upcoming release.
 
 ### Some Components and utilities have moved
 We've provided console warnings for these items. If you've used these in your module with a `stripes-components` path, you'll simply have to update your import path:
 
 Component/Util | New path
 -- | --
-`<AddressList>`, `<AddressEditList>`, `<EditableList>`, `<Settings>`  | `import { ... } from '@folio/stripes-smart-components'`
-`<Pluggable>`  | `@folio/stripes-core/lib/Pluggable`
-`makeQueryFunction()` | `import { makeQueryFunction } from '@folio/stripes-smart-components'`
+`<AddressList>`, `<AddressEditList>`, `<EditableList>`, `<Settings>`  | `import { ... } from '@folio/stripes/smart-components'`
+`<Pluggable>`  | `@folio/stripes/core`
+`makeQueryFunction()` | `import { makeQueryFunction } from '@folio/stripes/smart-components'`
diff --git a/docs/UIModuleLayout.md b/docs/UIModuleLayout.md
index 85f77387a..5330e0787 100644
--- a/docs/UIModuleLayout.md
+++ b/docs/UIModuleLayout.md
@@ -18,9 +18,7 @@ A `<Row>` is a container that spans the width of its parent element. It nests on
 
 ```
 import React from 'react';
-import Paneset from '@folio/stripes-components/lib/Paneset';
-import Pane from '@folio/stripes-components/lib/Pane';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
+import { Col, Pane, Paneset, Row } from '@folio/stripes/components';
 
 class LayoutExample extends React.Component {
   render() {
diff --git a/lib/Accordion/readme.md b/lib/Accordion/readme.md
index f4d5e60a2..740c35f57 100644
--- a/lib/Accordion/readme.md
+++ b/lib/Accordion/readme.md
@@ -5,7 +5,7 @@ Make parts of the UI collapsible using this component.
 ## Basic Usage
 
 ```
-import { AccordionSet, Accordion } from '@folio/stripes-components/lib/Accordion';
+import { AccordionSet, Accordion } from '@folio/stripes/components';
 
 ...
 <AccordionSet>
@@ -42,7 +42,7 @@ Keyboard support comes packaged with use of the `<AccordionSet>`. The keys are a
 Accordions can, of course, be controlled by state or local resource. Simply include an object with a list of keys for each accordion's `id` set to a boolean value that will be passed through to the corresponding accordion's `open` prop. This object should be passed to the `<AccordionSet>`'s `accordionStatus` prop. An `onToggle` handler will also need to be provided for proper state interaction. Passed to the `<AccordionSet>`'s `onToggle` prop, it will receive both the label and id of the target accordion, either of which could be used for additional interactions as needed.
 
 ```
-import { AccordionSet, Accordion } from '@folio/stripes-components/lib/Accordion';
+import { AccordionSet, Accordion } from '@folio/stripes/components';
 
 ... // state or manifest/local resource.
 
diff --git a/lib/AppIcon/readme.md b/lib/AppIcon/readme.md
index e9f3a1494..42946a490 100644
--- a/lib/AppIcon/readme.md
+++ b/lib/AppIcon/readme.md
@@ -7,7 +7,7 @@ AppIcon supports different ways of loading icons.
 
 ***1. Use context (recommended)***
 ```js
-  import AppIcon from '@folio/stripes-components/lib/AppIcon';
+  import { AppIcon } from '@folio/stripes/components';
 
   // Note: Make sure that the AppIcon has "stripes" in context as it relies on stripes.metadata.
   <AppIcon app="users" size="small" />
@@ -29,7 +29,7 @@ AppIcon supports different ways of loading icons.
 
 ***3. Pass src and alt as props***
 ```js
-  <AppIcon 
+  <AppIcon
     src="/static/some-icon.png"
     alt="My Icon"
   />
diff --git a/lib/AutoSuggest/readme.md b/lib/AutoSuggest/readme.md
index e91d581f8..f3afb4e65 100644
--- a/lib/AutoSuggest/readme.md
+++ b/lib/AutoSuggest/readme.md
@@ -3,7 +3,7 @@ Displays a dropdown with a list of suggestions based on the entered string in th
 
 ## Usage
 ```
-import AutoSuggest from '../../lib/AutoSuggest';
+import { AutoSuggest } from '@folio/stripes/components';
 
 // later in your JSX....
 <AutoSuggest items={items} />
diff --git a/lib/Button/readme.md b/lib/Button/readme.md
index 2b19c5043..0c4574d2e 100644
--- a/lib/Button/readme.md
+++ b/lib/Button/readme.md
@@ -5,7 +5,7 @@ The classic button, in different styles and sizes
 ## Basic Usage
 
 ```
-import { Button } from '@folio/stripes-components/lib/Button';
+import { Button } from '@folio/stripes/components';
 
 ...
 <Button>
diff --git a/lib/DateRangeWrapper/readme.md b/lib/DateRangeWrapper/readme.md
index 99bc784ed..db3b02492 100644
--- a/lib/DateRangeWrapper/readme.md
+++ b/lib/DateRangeWrapper/readme.md
@@ -6,7 +6,7 @@ Primitive for setting up two Datepickers to assemble a date range structure. Dat
 While it can certainly be used with vanilla Datepickers, a common use-case of FOLIO forms will be redux-form.
 Used with Redux-form, we need to apply a custom value getter. Here's what that code looks like.
 ```
-  import { DateRangeWrapper, Datepicker } from '@folio/stripes-components'
+  import { DateRangeWrapper, Datepicker } from '@folio/stripes/components'
 
     // with redux-form, best value comes in the 2nd param...
     const getter = (e, value) => {
@@ -56,17 +56,17 @@ Used with Redux-form, we need to apply a custom value getter. Here's what that c
 ## Common Props
 Name | type | description | default | required
 --- | --- | --- | --- | ---
-`children` | function | should be set up to accept render props passed in from the wrapper |  | 
-`initialStartDate` | string | used to initialize the wrapper's internal state. Should be the same as your starting date field's initial value prop. | | 
-`initialEndDate` | string | used to initialize the wrapper's internal state. Should be the same as your ending date field's initial value prop. | | 
+`children` | function | should be set up to accept render props passed in from the wrapper |  |
+`initialStartDate` | string | used to initialize the wrapper's internal state. Should be the same as your starting date field's initial value prop. | |
+`initialEndDate` | string | used to initialize the wrapper's internal state. Should be the same as your ending date field's initial value prop. | |
 
 ## Behavior override props
 Name | type | description | default | required
 --- | --- | --- | --- | ---
-`endValueGetter` | function(<...any>) | Used in the internal onChange handler to get a date value from the 'end' Datepicker. | `(value) => value` | 
-`startValueGetter` | function(param <...any>) | Similar to `endValueGetter`. Applied to the start date field. | `(value) => value` | 
-`endExcluder` | function(day <any>) | Used to substitute default excluder logic. Internally, `<DateRangeWrapper>` uses `moment.isBefore()` to exclude dates that come before its internal `startDate` so these will not be available in the picker. | | 
-`startExcluder` | function(day <any>) | Similar to `startExcluder`. Uses `moment.isAfter()` for its test. | | 
+`endValueGetter` | function(<...any>) | Used in the internal onChange handler to get a date value from the 'end' Datepicker. | `(value) => value` |
+`startValueGetter` | function(param <...any>) | Similar to `endValueGetter`. Applied to the start date field. | `(value) => value` |
+`endExcluder` | function(day <any>) | Used to substitute default excluder logic. Internally, `<DateRangeWrapper>` uses `moment.isBefore()` to exclude dates that come before its internal `startDate` so these will not be available in the picker. | |
+`startExcluder` | function(day <any>) | Similar to `startExcluder`. Uses `moment.isAfter()` for its test. | |
 
 ## Child function
 
@@ -81,9 +81,9 @@ The child function allows for its returned JSX to be of any shape to suite the r
 Prop-getter functions return an object of bundled props that can be easily applied to a component via spread attributes. For example: `<Component {...propGetter()}>`. `<DateRangeWrapper>`'s prop-getters accept a `props` object. The keys of that object are composed in with the internally supplied props/handlers. If you pass an `onChange` handler to the prop-getter function, it will be called **before** the `<DateRangeWrapper>`'s internal onChange handler.
 
 ### Render-props for the child function
-Name | type | description 
---- | --- | --- 
-`endDateExclude` | function(day) | function for determining whether a day rendered by the calendar should be excluded or not. If the function returns `true`, the day will be excluded from picking (un-clickable, with appropriate styles assigned). This uses a default function, but can be overridden by using the `endExcluder` prop 
+Name | type | description
+--- | --- | ---
+`endDateExclude` | function(day) | function for determining whether a day rendered by the calendar should be excluded or not. If the function returns `true`, the day will be excluded from picking (un-clickable, with appropriate styles assigned). This uses a default function, but can be overridden by using the `endExcluder` prop
 `startDateExclude` | function(day) | similar to `endDateExclude`, but applied to the start date DatePicker.
 `getEndInputProps` | function(props: <object>) | Prop-getter function. Applies the Wrapper's internal 'onChange' handler, as well as any `onChange` handler passed by the application via the `props` argument.
 `getStartInputProps` | function(props: <object>) | Prop-getter function Similar to `getEndInputProps`.
diff --git a/lib/Datepicker/readme.md b/lib/Datepicker/readme.md
index 13792e7da..a98fe1105 100644
--- a/lib/Datepicker/readme.md
+++ b/lib/Datepicker/readme.md
@@ -2,7 +2,7 @@
 ### Usage
 
 ```js
-import Datepicker from '@folio/stripes-components/lib/Datepicker';
+import { Datepicker } from '@folio/stripes/components';
 //..
 <Datepicker />
 //or pass as component within a form...
diff --git a/lib/Dropdown/readme.md b/lib/Dropdown/readme.md
index 5cdc0d4e8..0ca4d5817 100644
--- a/lib/Dropdown/readme.md
+++ b/lib/Dropdown/readme.md
@@ -8,7 +8,7 @@ Dropdown makes use of [react-tether](https://github.com/souporserious/react-teth
 This basic version sets up a dropdown with it's open/closed status controlled by state. Note that the `onToggle` handler is passed to both the `<Dropdown>` component and the `<DropdownMenu>` component. `<DropdownMenu>` sets up listeners so that the `onToggle` function will be called if the user clicks anywhere outside of the menu in the DOM.
 
 ```
-import { Dropdown } from '@folio/stripes-components/lib/Dropdown';
+import { Dropdown } from '@folio/stripes/components';
 
 //...
 
@@ -83,8 +83,7 @@ If the module is unable to keep track of the `<Dropdown>`'s open/closed status w
 Note :Adding `<MenuItem itemMeta={{metaData:'data' }}>` for the children in the `<DropdownMenu>` will have an ability to close the dropdown on clicking the menuItems element and be able to pass in any meta data specific to the items.
 
 ```
-import {UncontrolledDropdown} from '@folio/stripes-components/lib/Dropdown';
-import MenuItem from '@folio/stripes-components/lib/MenuItem';
+import { MenuItem, UncontrolledDropdown } from '@folio/stripes/components';
 
   <UncontrolledDropdown
       id="uniqueid"
@@ -135,11 +134,11 @@ Replace imports and make sure to update following props
 
 1) Change
 ```
-import {Dropdown} from 'react-bootstrap';
+import { Dropdown } from 'react-bootstrap';
 ```
 To
 ```
-import {Dropdown} from '@folio/stripes-components/lib/Dropdown';
+import { Dropdown } from '@folio/stripes/components';
 
 ```
 
diff --git a/lib/EmptyMessage/readme.md b/lib/EmptyMessage/readme.md
index 8b5de0ce4..2811f5edf 100644
--- a/lib/EmptyMessage/readme.md
+++ b/lib/EmptyMessage/readme.md
@@ -3,7 +3,7 @@ A uniform way of rendering an empty state - e.g. no results found in a list.
 
 ## Basic Usage
 ```
-  import EmptyMessage from '@folio/stripes-components/lib/EmptyMessage';
+  import { EmptyMessage } from '@folio/stripes/components';
 
   <EmptyMessage>Sorry - no results were found</EmptyMessage>
 ```
diff --git a/lib/Headline/readme.md b/lib/Headline/readme.md
index 845d6a22f..1c3384cfe 100644
--- a/lib/Headline/readme.md
+++ b/lib/Headline/readme.md
@@ -3,7 +3,7 @@ Renders headlines in different sizes and with different tags, margins and styles
 
 ### Basic Usage
 ```
-  import Headline from '@folio/stripes-components/lib/Headline';
+  import { Headline } from '@folio/stripes/components';
 
   <Headline size="large" margin="medium" tag="h3">
     My headline
diff --git a/lib/HotKeys/readme.md b/lib/HotKeys/readme.md
index c179dc390..d9612f8c1 100644
--- a/lib/HotKeys/readme.md
+++ b/lib/HotKeys/readme.md
@@ -6,7 +6,7 @@
 
 
 ```js
-import { HotKeys } from '@folio/stripes-components/lib/HotKeys';
+import { HotKeys } from '@folio/stripes/components';
 //..
 const keys = {
   'delete' : ['delete','backspace'],
@@ -27,14 +27,14 @@ const handlers = {
 Components can be wrapped to give them the necessary props/functionality to respond to keyboard shortcuts.
 
 ```js
-import { HotKeysHOC } from '@folio/stripes-components/lib/HotKeys';
+import { HotKeys } from '@folio/stripes/components';
 
 class MyComponent extends React.Component {
   // typical component internals... constructor(), render(), etc.
 }
 
 // wrap component with HOC...
-export default HotKeysHOC(MyComponent);
+export default HotKeys(MyComponent);
 ```
 You can then use the component as normal, supplying appropriate `keyMap` and `handlers` props.
 
diff --git a/lib/Icon/readme.md b/lib/Icon/readme.md
index edfbd3a32..911bd626e 100644
--- a/lib/Icon/readme.md
+++ b/lib/Icon/readme.md
@@ -3,7 +3,7 @@ Component for rendering a variety of FOLIO icons.
 
 ## Basic Usage
 ```js
-import { Icon } from '@folio/stripes-components/lib/Icon';
+import { Icon } from '@folio/stripes/components';
 
 <Icon
   icon="bookmark"
@@ -13,7 +13,7 @@ import { Icon } from '@folio/stripes-components/lib/Icon';
 
 // With a label:
 
-<Icon 
+<Icon
   icon="trashBin"
   iconPosition="end"
 >
@@ -27,7 +27,7 @@ Name | type | description | default |
 icon | string | Sets icon to be rendered. See icon list for possible options | default
 size | string | Sets the icon size (small, medium, large) | medium
 title | string | Text that appears in a browser-native tooltip when icon is hovered |
-iconRootClass | string | Applies a custom css class to the component's internal div. This is useful for applying custom hover interaction. | 
+iconRootClass | string | Applies a custom css class to the component's internal div. This is useful for applying custom hover interaction. |
 iconClassName | string | Applies a custom css class name directly to icon | stripes__icon
 children | node, string | Adds content next to the icon. Useful for adding a label to an icon. | undefined
 iconPosition | string | Sets the the position of the icon. Can be set to "start" and "end". Note: This is only relevant when the "children"-prop is utilized. | start
diff --git a/lib/IconButton/readme.md b/lib/IconButton/readme.md
index d06e9594a..7afc9b2cd 100644
--- a/lib/IconButton/readme.md
+++ b/lib/IconButton/readme.md
@@ -4,7 +4,7 @@ Renders a square button with a centered icon.
 
 ## Basic Usage
 ```
-  import IconButton from '@folio/stripes-components/lib/IconButton';
+  import { IconButton } from '@folio/stripes/components';
 
   <IconButton
     icon="comment"
diff --git a/lib/InfoPopover/readme.md b/lib/InfoPopover/readme.md
index 2ed856873..362ba4c4f 100644
--- a/lib/InfoPopover/readme.md
+++ b/lib/InfoPopover/readme.md
@@ -3,7 +3,7 @@ Display a small information icon which can be toggled by clicking on it.
 
 ## Basic Usage
 ```
-  import InfoPopover from '@folio/stripes-components/lib/InfoPopover';
+  import { InfoPopover } from '@folio/stripes/components';
 
   <InfoPopover
     content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
diff --git a/lib/KeyValue/readme.md b/lib/KeyValue/readme.md
index 645b80d90..8556d574d 100644
--- a/lib/KeyValue/readme.md
+++ b/lib/KeyValue/readme.md
@@ -5,7 +5,7 @@ Display key value with a label. Often used in combination with a grid to display
 ## Basic Usage
 
 ```
-import KeyValue from '@folio/stripes-components/lib/KeyValue';
+import { KeyValue } from '@folio/stripes/components';
 
 <KeyValue
   label="Some label"
diff --git a/lib/Layer/readme.md b/lib/Layer/readme.md
index e6483b4e5..7a67f311f 100644
--- a/lib/Layer/readme.md
+++ b/lib/Layer/readme.md
@@ -1,9 +1,9 @@
 # Layer
-Creates a new layer of `<Pane>`s or other UI components for your module. Renders its content via a [React Portal](https://reactjs.org/docs/portals.html). 
+Creates a new layer of `<Pane>`s or other UI components for your module. Renders its content via a [React Portal](https://reactjs.org/docs/portals.html).
 
 ### Usage
 ```js
-import { Layer, Paneset } from '@folio/stripes-components';
+import { Layer, Paneset } from '@folio/stripes/components';
 
 // boolean to control the rendering of the layer...
 let showLayer = true;
@@ -21,13 +21,13 @@ let showLayer = true;
 ### Props
 Name | type | description | default | required
 --- | --- | --- | --- | ---
-`autoFocus` | bool | If no layer content is focused via other focus-management methods, the `<Layer>`'s container will be focused. | `true` | 
+`autoFocus` | bool | If no layer content is focused via other focus-management methods, the `<Layer>`'s container will be focused. | `true` |
 `isOpen` | bool | Control rendering of the layer's child components within a div with role "dialog" (A full-module modal). | | required
 `container` | node | DOM element or component where the rendered elements should reside. Appends content to the root of the ascendant `Paneset` by default. | |
-`contentLabel` | string | applied as the `aria-label` attribute on the `<Layer>`'s containing div. Warns if not applied. | | 
-`afterClose` | func | Callback for after the `<Layer>` has closed. Handle focus management for accessible code here! | `()=>{}` | 
-`afterOpen` | func | Callback for after the `<Layer>` has opened. | `()=>{}` | 
-`enforceFocus` | bool | Whether or not the modal should trap focus within itself (best for accessibility) | `true` | 
+`contentLabel` | string | applied as the `aria-label` attribute on the `<Layer>`'s containing div. Warns if not applied. | |
+`afterClose` | func | Callback for after the `<Layer>` has closed. Handle focus management for accessible code here! | `()=>{}` |
+`afterOpen` | func | Callback for after the `<Layer>` has opened. | `()=>{}` |
+`enforceFocus` | bool | Whether or not the modal should trap focus within itself (best for accessibility) | `true` |
 
 ### A11y practices
 The `<Layer>` is very similar to a modal dialog and focus management should be accounted for accordingly. When opened, focus will move to the rendered content div (unless a child element has already assumed focus via `autoFocus` or some other means.) Focus should be managed appropriately by the application when the `<Layer>` is closed. The `afterClose` prop can be used for this.
@@ -41,7 +41,7 @@ focusAfter() {
 <Paneset>
   // Base Paneset contents ...
   <Button buttonRef={this.layerToggle} onClick={this.toggleLayer}>Toggle Layer</Button>
-  <Layer 
+  <Layer
     isOpen={showLayer}
     afterClose={this.focusAfter}
     contentLabel="demonstration layer"
@@ -49,4 +49,4 @@ focusAfter() {
     {/* Layer contents */}
   </Layer>
 </Paneset>
-```
\ No newline at end of file
+```
diff --git a/lib/Layout/readme.md b/lib/Layout/readme.md
index 2b2edbd61..405b81bee 100644
--- a/lib/Layout/readme.md
+++ b/lib/Layout/readme.md
@@ -6,15 +6,15 @@ Helper component that allows for easily accessing a set of helper CSS classes. U
 ### JSX
 Apply any of the available class names to the `className` prop. Any additional custom class names will be combined with any matching helper classes. You can modify the root element by passing a string or a component to the "element"-prop.
 ```js
-  import Layout from '@folio/stripes-components/lib/Layout';
+  import { Layout } from '@folio/stripes/components';
 
   <Layout className="display-flex flex-align-items-start">
     <Layout element="span" className="padding-start-gutter">
       1st column
-    </Layout>  
+    </Layout>
     <Layout element="span" className=`padding-end-gutter ${css.myCustomClass}`>
       2nd column
-    </Layout>  
+    </Layout>
   </Layout>
 ```
 
diff --git a/lib/LayoutGrid/readme.md b/lib/LayoutGrid/readme.md
index 107a294e1..a17f0b767 100644
--- a/lib/LayoutGrid/readme.md
+++ b/lib/LayoutGrid/readme.md
@@ -34,6 +34,6 @@ import { Row, Col } from 'react-bootstrap';
 ```
 To
 ```
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
+import { Row, Col } from '@folio/stripes/components';
 
 ```
diff --git a/lib/List/readme.md b/lib/List/readme.md
index 223c86054..7d99c5df6 100644
--- a/lib/List/readme.md
+++ b/lib/List/readme.md
@@ -7,7 +7,7 @@ Displays a list with an array of items or children
 The items-prop is your array of times and the itemFormatter is a function that determines how to format each item.
 
 ```
-  import List from '@folio/stripes-components/lib/List';
+  import { List } from '@folio/stripes/components';
 
   const items = ['Apples', 'Bananas', 'Strawberries', 'Oranges'];
   const itemFormatter = (item) => (<li>{item}</li>);
diff --git a/lib/MenuItem/readme.md b/lib/MenuItem/readme.md
index b07366c55..fbd18dfc8 100644
--- a/lib/MenuItem/readme.md
+++ b/lib/MenuItem/readme.md
@@ -7,8 +7,7 @@ Example use case is when using UncontrolledDropdown.
 This basic usage is for UncontrolledDropdown sets up a dropdown closed status when selected  any items inside the DropdownMenu
 
 ```js
-import {UncontrolledDropdown} from '@folio/stripes-components/lib/Dropdown';
-import MenuItem from '@folio/stripes-components/lib/MenuItem';
+import { MenuItem, UncontrolledDropdown } from '@folio/stripes/components';
 
   <UncontrolledDropdown
       id="uniqueid"
diff --git a/lib/Modal/readme.md b/lib/Modal/readme.md
index c3d99c5e0..697c02770 100644
--- a/lib/Modal/readme.md
+++ b/lib/Modal/readme.md
@@ -3,8 +3,7 @@ Basic component for rendering a modal pop-up.
 ### Usage
 
 ```js
-import Modal from '@folio/stripes-components/lib/Modal';
-import Button from '@folio/stripes-components/lib/Button';
+import { Button, Modal } from '@folio/stripes/components';
 
 // Add a footer to the modal (optional)
 const footer = (
diff --git a/lib/ModalFooter/readme.md b/lib/ModalFooter/readme.md
index a0900a97f..e4a23dcca 100644
--- a/lib/ModalFooter/readme.md
+++ b/lib/ModalFooter/readme.md
@@ -3,8 +3,7 @@ The default modal footer for the Modal-component.
 
 ### Usage
 ```js
-import Modal from '@folio/stripes-components/lib/Modal';
-import ModalFooter from '@folio/stripes-components/lib/ModalFooter';
+import { Modal, ModalFooter } from '@folio/stripes/components';
 
 const footer = (
   <ModalFooter
diff --git a/lib/MultiSelection/readme.md b/lib/MultiSelection/readme.md
index 20419b6cb..e0ed8e468 100644
--- a/lib/MultiSelection/readme.md
+++ b/lib/MultiSelection/readme.md
@@ -4,7 +4,7 @@
 
 ## Basic Usage
 ```
-import { MultiSelection } from '@folio/stripes-components';
+import { MultiSelection } from '@folio/stripes/components';
 
 const optionList = [
   { value: 'test0', label: 'Option 0' },
@@ -14,7 +14,7 @@ const optionList = [
 ];
 
 /* ... later in JSX */
-<MultiSelection 
+<MultiSelection
     label="my multiselect"
     id="my-multiselect"
     dataOptions={optionList}
@@ -24,36 +24,36 @@ const optionList = [
 ## Common Props
 Name | type | description | default | required
 --- | --- | --- | --- | ---
-`actions` | array of objects | array of non-selectable actions that would be present in the list - for example, an 'add tag' functionality where a user can add their entered filter word to the list of available values. See the **actions** section below | [] | 
-`asyncFiltering` | bool | if true, it's up to the surrounding app to apply a filter handler and pass its resulting list through to the `dataOptions` prop. | false | 
-`backspaceDeletes` | bool | if true, the user can press the backspace key when the option filter is empty to remove the last selected item in the value list | true | 
-`dataOptions` | array of objects | An array that represents possible objects. Default props are set up to treat objects with the shape of `{value<any>, label:<string>}`. | | 
-`emptyMessage` | string | feedback message for user when options list is empty (they've entered an option filter with no results,) | 'No matching items found!' | 
-`filter` | func | a custom filter function. If you're not using `asyncFiltering` It should return an object with the shape of `{renderedItems:<array>}` This object can include additional properties that can be used for conditional rendering of `action`s. | the default filter is via reg-ex on the items' `label` field | 
-`formatter` | func | Render function that accepts an object with keys for the option and the current filter string. The function is called to display values in the options dropdown and in the selected values list. A default `formatter` is provided. | [DefaultOptionFormatter](../Selection/DefaultOptionFormatter.md) | 
+`actions` | array of objects | array of non-selectable actions that would be present in the list - for example, an 'add tag' functionality where a user can add their entered filter word to the list of available values. See the **actions** section below | [] |
+`asyncFiltering` | bool | if true, it's up to the surrounding app to apply a filter handler and pass its resulting list through to the `dataOptions` prop. | false |
+`backspaceDeletes` | bool | if true, the user can press the backspace key when the option filter is empty to remove the last selected item in the value list | true |
+`dataOptions` | array of objects | An array that represents possible objects. Default props are set up to treat objects with the shape of `{value<any>, label:<string>}`. | |
+`emptyMessage` | string | feedback message for user when options list is empty (they've entered an option filter with no results,) | 'No matching items found!' |
+`filter` | func | a custom filter function. If you're not using `asyncFiltering` It should return an object with the shape of `{renderedItems:<array>}` This object can include additional properties that can be used for conditional rendering of `action`s. | the default filter is via reg-ex on the items' `label` field |
+`formatter` | func | Render function that accepts an object with keys for the option and the current filter string. The function is called to display values in the options dropdown and in the selected values list. A default `formatter` is provided. | [DefaultOptionFormatter](../Selection/DefaultOptionFormatter.md) |
 `id` | string | Sets the `id` attribute for the control. Other interior id's are generated using this string as a prefix. | |
-`itemToString` | <string>func | Function used to return a single string representation of its value. For example, option objects with a shape of `{label:<string>, value:<object>}` would use `item => (item ? item.label : '')` for their toString function. This is used to generate strings so that values can accurately be announced for screen readers. | `item => (item ? item.label : '')` | 
-`label` | string | Used as the form label for the field. Appropriate label/field relationship for accessibility is automatically set up by the component. | | 
-`maxHeight` | number | The maximum height of the options menu in pixels. This does not include the heigh of any validation messages that may also appear with the menu. | `168` | 
-`onBlur` | func | Blur event handler for when the user blurs the filter field | | 
-`onChange` | func | Change event handler for when internal state changes. `selectedItems` is passed as parameter to function. | | 
-`onRemove` | func | Event handler specifically called when an item is removed from the selection. The removed item is passed to the handler. | | 
-`placeholder` | string | Rendered as a placeholder for the control when no value is present. | | 
-`renderToOverlay` | bool | For use in situations where the dropdown may be cut off due to a containing dom element's `overflow: hidden/auto` css attribute. | false | 
-`tether` | object | Override settings for the tether when `renderToOverlay` is used. | default tether object provided. | 
-`value` | array | Array of selected objects. | | 
+`itemToString` | <string>func | Function used to return a single string representation of its value. For example, option objects with a shape of `{label:<string>, value:<object>}` would use `item => (item ? item.label : '')` for their toString function. This is used to generate strings so that values can accurately be announced for screen readers. | `item => (item ? item.label : '')` |
+`label` | string | Used as the form label for the field. Appropriate label/field relationship for accessibility is automatically set up by the component. | |
+`maxHeight` | number | The maximum height of the options menu in pixels. This does not include the heigh of any validation messages that may also appear with the menu. | `168` |
+`onBlur` | func | Blur event handler for when the user blurs the filter field | |
+`onChange` | func | Change event handler for when internal state changes. `selectedItems` is passed as parameter to function. | |
+`onRemove` | func | Event handler specifically called when an item is removed from the selection. The removed item is passed to the handler. | |
+`placeholder` | string | Rendered as a placeholder for the control when no value is present. | |
+`renderToOverlay` | bool | For use in situations where the dropdown may be cut off due to a containing dom element's `overflow: hidden/auto` css attribute. | false |
+`tether` | object | Override settings for the tether when `renderToOverlay` is used. | default tether object provided. |
+`value` | array | Array of selected objects. | |
 
 ## Validation props
 These are props that could be applicable if setting up your own validation system. These would probably best be handled within `onChange` and `onBlur` event handlers.
 
 Name | type | description | default | required
 --- | --- | --- | --- | ---
-`dirty` | bool | Apply a specific style when the value has changed. | false | 
-`error` | string | Text to display as inline validation feedback for the user. A truthy value here will also apply validation styling to the control. | | 
-`isValid` | bool | Whether or not field is valid. When true, specific styles are applied. | | 
-`touched` | bool | Prop that controls application of validation styles. Redux-form applies this prop automatically. This defaults to false. | false | 
+`dirty` | bool | Apply a specific style when the value has changed. | false |
+`error` | string | Text to display as inline validation feedback for the user. A truthy value here will also apply validation styling to the control. | |
+`isValid` | bool | Whether or not field is valid. When true, specific styles are applied. | |
+`touched` | bool | Prop that controls application of validation styles. Redux-form applies this prop automatically. This defaults to false. | false |
 `validationEnabled` | bool | Controls whether or not validation styles are rendered. | false |
-`warning` | string | Text to display as inline validation feedback for the user. A truthy value here will also apply validation styling to the control. | | 
+`warning` | string | Text to display as inline validation feedback for the user. A truthy value here will also apply validation styling to the control. | |
 
 ## Shape of dataOptions
 The shape of the items in your dataOptions array may require you to pass additional props. The default props are set up to handle dataOptions with `label` and `value` keys. If your options do not have label and value keys, here are some other props to be sure you're setting:
@@ -74,7 +74,7 @@ filterItems = (filterOptions = (filterText, list) => {
   const filterRegExp = new RegExp(`^${filterText}`, 'i');
   const renderedItems = filterText ? list.filter(item => item.search(filterRegExp) !== -1) : list;
   return { renderedItems };
-}; 
+};
 
 <MultiSelect
   itemToString={this.toString}
@@ -83,9 +83,9 @@ filterItems = (filterOptions = (filterText, list) => {
 />
 ```
 ## Formatting with `<OptionSegment>`
-We provide an `<OptionSegent>` component for use in formatters to enable nice features like the bolding of filter values in results - so a filter of 'in' will display resulting options like '**in**put', '**in**dustry','**in**novation'. 
+We provide an `<OptionSegent>` component for use in formatters to enable nice features like the bolding of filter values in results - so a filter of 'in' will display resulting options like '**in**put', '**in**dustry','**in**novation'.
 ```
-import { OptionSegment } from '@folio/stripes-components';
+import { OptionSegment } from '@folio/stripes/components';
 
 formatter= ({option, searchTerm}) => <OptionSegment searchTerm={searchTerm} >{option}</OptionSegment>;
 
@@ -101,7 +101,7 @@ addTag = ({ renderedItems, exactMatch, filterText }) => {
 renderAddTag = ({ filterValue, exactMatch }) => {
     if (exactMatch) {
       return null;
-    } else { 
+    } else {
       return <div>Add tag for &quot;{`${filterValue}`}&quot;</div>;
     }
 }
diff --git a/lib/NavList/readme.md b/lib/NavList/readme.md
index 327808b24..84a11940b 100644
--- a/lib/NavList/readme.md
+++ b/lib/NavList/readme.md
@@ -8,9 +8,7 @@ NavList uses `<NavListSection>` to add one or more sections to your navigation.
 You can use the `<NavListItem>` component to add links/buttons to your NavListSection. By using the "to"-prop it will render a react-router `<Link>`-component, using the "href"-prop will render a regular <a> and the "onClick"-prop will render a button. The component will accept any valid props that these HTML elements accepts.
 
 ```
-  import NavList from '@folio/stripes-components/lib/NavList';
-  import NavListSection from '@folio/stripes-components/lib/NavListSection';
-  import NavListItem from '@folio/stripes-components/lib/NavListItem';
+  import { NavList, NavListItem, NavListSection } from '@folio/stripes/components';
   import Link from 'react-router-dom/Link';
 
   <NavList>
diff --git a/lib/Pane/readme.md b/lib/Pane/readme.md
index 8e9163695..0a9b7ee67 100644
--- a/lib/Pane/readme.md
+++ b/lib/Pane/readme.md
@@ -5,8 +5,7 @@ Primary staple of layout for FOLIO modules.
 ### Sizing
 A Pane requires a `defaultWidth` prop to tell its parent `<Paneset>` how it should be sized. The following example has a first pane with a static width of 20% and a second pane with dynamic width (supplied `"fill"` for its `defaultWidth`) that will occupy the remaining width of the paneset.
 ```js
-import Paneset from '@folio/stripes-components/lib/Paneset';
-import Pane from '@folio/stripes-components/lib/Pane';
+import { Pane, Paneset } from '@folio/stripes/components';
 
 <Paneset>
     <Pane defaultWidth="20%" paneTitle="Filters">
diff --git a/lib/Paneset/readme.md b/lib/Paneset/readme.md
index 82d338b7d..061606c4f 100644
--- a/lib/Paneset/readme.md
+++ b/lib/Paneset/readme.md
@@ -3,8 +3,7 @@ Container/Manager for for `<Pane>` components and a pillar of layout for FOLIO m
 ### Usage
 
 ```js
-import Paneset from '@folio/stripes-components/lib/Paneset';
-import Pane from '@folio/stripes-components/lib/Pane';
+import { Pane, Paneset } from '@folio/stripes/components';
 //..
 <Paneset>
     <Pane defaultWidth="33%">
diff --git a/lib/Popover/readme.md b/lib/Popover/readme.md
index 5f4a4958c..9a55bf6a4 100644
--- a/lib/Popover/readme.md
+++ b/lib/Popover/readme.md
@@ -6,7 +6,7 @@ Component to render a small pop-up "tip" once a trigger element is clicked. Clic
 
 Similar to `<Dropdown>`, `<Popover>` requires at least two children - their roles are defined by setting their `data-role` attributes to `target` or `popover`.
 ```
-import Popover from '@folio/stripes-components/lib/Popover';
+import { Popover } from '@folio/stripes/components';
 <Popover>
   <Button data-role="target">Test Popover</Button>
   <p data-role="popover">Lorem ipsum delor sit amet...</p>
diff --git a/lib/RadioButton/readme.md b/lib/RadioButton/readme.md
index 154b88b1c..6b23a3f56 100644
--- a/lib/RadioButton/readme.md
+++ b/lib/RadioButton/readme.md
@@ -40,7 +40,7 @@ warning | string | | | false
 
 ## Use with Redux Form
 ```
-import { RadioButton } from '@folio/stripes-components';
+import { RadioButton } from '@folio/stripes/components';
 
 ...
 
diff --git a/lib/ReduxFormField/readme.md b/lib/ReduxFormField/readme.md
index 5ea054742..aac9fcfa2 100644
--- a/lib/ReduxFormField/readme.md
+++ b/lib/ReduxFormField/readme.md
@@ -13,8 +13,6 @@ When doing this:
 ## Usage
 To normalize the `input` and `meta` props injected by Redux Form:
 ```jsx
-import reduxFormField from '@folio/stripes-components/lib/ReduxFormField';
-
 function ExampleComponent({ value, onChange, warning, error }) => (
   <div>{warning}</div>
 );
diff --git a/lib/SRStatus/readme.md b/lib/SRStatus/readme.md
index 7daf491ce..a2309146f 100644
--- a/lib/SRStatus/readme.md
+++ b/lib/SRStatus/readme.md
@@ -7,7 +7,7 @@ This component is ideal for when React's frequent updates/re-renders do not suit
 SRStatus works via a method call against a ref to an instance of it.
 
 ```
-import SRStatus from '@folio/stripes-components/lib/SRStatus';
+import { SRStatus } from '@folio/stripes/components';
 
 // in constructor
 this.srsRef = null;
diff --git a/lib/SearchField/readme.md b/lib/SearchField/readme.md
index b16b8c0b9..232175867 100644
--- a/lib/SearchField/readme.md
+++ b/lib/SearchField/readme.md
@@ -5,7 +5,7 @@ Universal search field component.
 ## Basic Usage
 
 ```
-  import SearchField from '@folio/stripes-components/lib/SearchField';
+  import { SearchField } from '@folio/stripes/components';
 
   <SearchField
     onChange={...}
@@ -19,7 +19,7 @@ Universal search field component.
 The component supports adding an array of searchable indexes which adds a select field to the component.
 
 ```
-  import SearchField from '@folio/lib/SearchField';
+  import SearchField from '@folio/stripes/components';
 
   const searchableIndexes = [
     { label: 'ID', value: 'id' },
diff --git a/lib/SegmentedControl/readme.md b/lib/SegmentedControl/readme.md
index b2d3dd0f9..f08fc8637 100644
--- a/lib/SegmentedControl/readme.md
+++ b/lib/SegmentedControl/readme.md
@@ -4,7 +4,7 @@ Creates a split button set that can be used for filters, tabs, and other subnavi
 ## Usage
 `<SegmentedControl>` will accept one or more `<Button>` components as children. **Each child button should have its own unique `id` prop.**
 ```
-import SegmentedControl from '@folio/stripes-components/lib/SegmentedControl';
+import { SegmentedControl } from '@folio/stripes/components';
 // ...
 /* define a handler for activation.
 * It should accept an object containing an 'id' key.
diff --git a/lib/Select/readme.md b/lib/Select/readme.md
index 245da3d41..c7e6c4ef3 100644
--- a/lib/Select/readme.md
+++ b/lib/Select/readme.md
@@ -42,7 +42,7 @@ In Short, `<Field>` requires a `name` and a `component` prop. The `name` is the
 See the [redux-form website](https://redux-form.com/7.2.0/) for more information.
 
 ```
-import Select from '@folio/stripes-components/lib/Select';
+import { Select } from '@folio/stripes/components';
 
 ...
 
diff --git a/lib/Selection/readme.md b/lib/Selection/readme.md
index be160b97a..e4340ec9f 100644
--- a/lib/Selection/readme.md
+++ b/lib/Selection/readme.md
@@ -2,7 +2,7 @@
 Select-style dropdown box with a filterable options list.
 ## Usage
 ```
-import Selection from '@folio/stripes-components/lib/Selection';
+import { Selection } from '@folio/stripes/components';
 
 // the dataOptions prop takes an array of objects with 'label' and 'value' keys
 const countriesOptions = [
@@ -29,8 +29,7 @@ const countriesOptions = [
 The `formatter` prop can be used to pass through a functional component that will be used to render the content of each of the options in the list as well as the selected value. The `<OptionSegment>` component allows control over the search highlighting of the string. The formatter should be prepared to accept an option (item from `dataOptions`) and the entered `searchTerm`. If no term is entered, `''` is passed. In this contrived example, both value and option strings are rendered in each option.
 
 ```
-import Selection from '@folio/stripes-components/lib/Selection';
-import { OptionSegment } from '@folio/stripes-components/lib/Selection';
+import { Selection, OptionSegment } from '@folio/stripes/components';
 
 const options = [
   { value: '', label: 'None' },
diff --git a/lib/Timepicker/readme.md b/lib/Timepicker/readme.md
index ae85279a5..10f4e7278 100644
--- a/lib/Timepicker/readme.md
+++ b/lib/Timepicker/readme.md
@@ -2,7 +2,7 @@
 Form element for selecting a time.
 ## Usage
 ```
-import Timepicker from '@folio/stripes-components/lib/Timepicker';
+import { Timepicker } from '@folio/stripes/components';
 
 // later in your JSX....
 <Timepicker />