diff --git a/development/generate-icon-names.js b/development/generate-icon-names.js
index 60637ae86..a89887de7 100644
--- a/development/generate-icon-names.js
+++ b/development/generate-icon-names.js
@@ -4,7 +4,7 @@
  * Reads all the icon svg files in app/images/icons
  * and returns an object of icon name key value pairs
  * stored in the environment variable ICON_NAMES
- * Used with the Icon component in ./ui/component-library/icon
+ * Used with the Icon component in ./ui/components/component-library/icon/icon.js
  */
 const fs = require('fs');
 const path = require('path');
diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx
index e1e69d19c..76d630f88 100644
--- a/ui/components/component-library/button-base/README.mdx
+++ b/ui/components/component-library/button-base/README.mdx
@@ -37,7 +37,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase size={SIZES.AUTO} />
 <ButtonBase size={SIZES.SM} />
@@ -55,7 +55,7 @@ Use boolean `block` prop to quickly enable a full width block button
 
 ```jsx
 import { DISPLAY } from '../../../helpers/constants/design-system';
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase>Default Button</ButtonBase>
 <ButtonBase block>Block Button</ButtonBase>
@@ -77,7 +77,7 @@ Button `as` options:
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 
 <ButtonBase as="button">Button Element</ButtonBase>
@@ -95,7 +95,7 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase href="/metamask">Anchor Element</ButtonBase>;
 ```
@@ -109,7 +109,7 @@ Use the boolean `disabled` prop to disable button
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase disabled>Disabled Button</ButtonBase>;
 ```
@@ -123,21 +123,21 @@ Use the boolean `loading` prop to set loading spinner
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 
 <ButtonBase loading>Loading Button</ButtonBase>;
 ```
 
 ### Icon
 
-Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
+Use the `icon` prop and the `ICON_NAMES` object from `./ui/components/component-library` to select icon.
 
 <Canvas>
   <Story id="ui-components-component-library-button-base-button-base-stories-js--icon" />
 </Canvas>
 
 ```jsx
-import { ButtonBase } from '../ui/component-library';
+import { ButtonBase } from '../../ui/components/component-library';
 import { ICON_NAMES } from '../icon';
 
 <ButtonBase icon={ICON_NAMES.ADD_SQUARE_FILLED}>Button</ButtonBase>;
diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js
index 85801bb83..426b65a31 100644
--- a/ui/components/component-library/button-base/button-base.js
+++ b/ui/components/component-library/button-base/button-base.js
@@ -133,10 +133,6 @@ ButtonBase.propTypes = {
    * Possible values could be 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
    */
   size: PropTypes.oneOf(Object.values(BUTTON_BASE_SIZES)),
-  /**
-   * Addition style properties to apply to the button.
-   */
-  style: PropTypes.object,
   /**
    * ButtonBase accepts all the props from Box
    */
diff --git a/ui/components/component-library/button-link/README.mdx b/ui/components/component-library/button-link/README.mdx
index 2c33d5dad..0d51dc036 100644
--- a/ui/components/component-library/button-link/README.mdx
+++ b/ui/components/component-library/button-link/README.mdx
@@ -35,7 +35,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink size={SIZES.AUTO} />
 <ButtonLink size={SIZES.SM} />
@@ -52,7 +52,7 @@ Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
 </Canvas>
 
 ```jsx
-import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink>Normal</ButtonLink>
 <ButtonLink danger>Danger</ButtonLink>
@@ -67,7 +67,7 @@ When an `href` is passed the tag element will switch to an `anchor`(`a`) tag.
 </Canvas>
 
 ```jsx
-import { ButtonLink } from '../ui/component-library/button/button-link/button-link';
+import { ButtonLink } from '../../ui/components/component-library';
 
 <ButtonLink href="/">Href Example</ButtonLink>;
 ```
diff --git a/ui/components/component-library/button-primary/README.mdx b/ui/components/component-library/button-primary/README.mdx
index 372339ea9..48f883d8f 100644
--- a/ui/components/component-library/button-primary/README.mdx
+++ b/ui/components/component-library/button-primary/README.mdx
@@ -34,7 +34,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonPrimary } from '../ui/component-library/button/button-primary/button-primary';
+import { ButtonPrimary } from '../../ui/components/component-library';
 
 <ButtonPrimary size={SIZES.SM} />
 <ButtonPrimary size={SIZES.MD} />
@@ -50,7 +50,7 @@ Use the `danger` boolean prop to change the `ButtonPrimary` to danger color.
 </Canvas>
 
 ```jsx
-import { ButtonPrimary } from '../ui/component-library/button/button-primary/button-primary';
+import { ButtonPrimary } from '../../ui/components/component-library';
 
 <ButtonPrimary>Normal</ButtonPrimary>
 <ButtonPrimary danger>Danger</ButtonPrimary>
diff --git a/ui/components/component-library/button-secondary/README.mdx b/ui/components/component-library/button-secondary/README.mdx
index fe363f4a3..04eff904c 100644
--- a/ui/components/component-library/button-secondary/README.mdx
+++ b/ui/components/component-library/button-secondary/README.mdx
@@ -34,7 +34,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonSecondary } from '../ui/component-library/button/button-secondary/button-secondary';
+import { ButtonSecondary } from '../../ui/components/component-library';
 
 <ButtonSecondary size={SIZES.SM} />
 <ButtonSecondary size={SIZES.MD} />
@@ -50,7 +50,7 @@ Use the `danger` boolean prop to change the `ButtonSecondary` to danger color.
 </Canvas>
 
 ```jsx
-import { ButtonSecondary } from '../ui/component-library/button/button-secondary/button-secondary';
+import { ButtonSecondary } from '../../ui/components/component-library';
 
 <ButtonSecondary>Normal</ButtonSecondary>
 <ButtonSecondary danger>Danger</ButtonSecondary>
diff --git a/ui/components/component-library/component-library-components.scss b/ui/components/component-library/component-library-components.scss
index d2f77190d..898d3945d 100644
--- a/ui/components/component-library/component-library-components.scss
+++ b/ui/components/component-library/component-library-components.scss
@@ -1,21 +1,28 @@
-/** Please import your files in alphabetical order **/
+/**
+* Please import your styles in order of atomicity.
+* The most atomic styles should be imported first.
+* This will help improve specificity and reduce the chance of
+* unintended overrides.
+**/
+// Atoms
+@import 'text/text';
+@import 'icon/icon';
+@import 'label/label';
+@import 'tag/tag';
+@import 'base-avatar/base-avatar';
 @import 'avatar-account/avatar-account';
 @import 'avatar-favicon/avatar-favicon';
 @import 'avatar-network/avatar-network';
 @import 'avatar-token/avatar-token';
 @import 'avatar-with-badge/avatar-with-badge';
-@import 'base-avatar/base-avatar';
 @import 'button-base/button-base';
 @import 'button-icon/button-icon';
 @import 'button-link/button-link';
 @import 'button-primary/button-primary';
 @import 'button-secondary/button-secondary';
-@import 'icon/icon';
-@import 'label/label';
+// Molecules
 @import 'picker-network/picker-network';
-@import 'tag/tag';
 @import 'tag-url/tag-url';
-@import 'text/text';
 @import 'text-field/text-field';
 @import 'text-field-base/text-field-base';
 @import 'text-field-search/text-field-search';
diff --git a/ui/components/component-library/help-text/README.mdx b/ui/components/component-library/help-text/README.mdx
index b7dcf5b10..03c2cf50a 100644
--- a/ui/components/component-library/help-text/README.mdx
+++ b/ui/components/component-library/help-text/README.mdx
@@ -26,8 +26,8 @@ The `children` of the `HelpText` can be plain text or react nodes.
 
 ```jsx
 import { SIZES, COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library/icon';
-import { HelpText } from '../../ui/component-library/help-text';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { HelpText } from '../../ui/components/component-library';
 
 <HelpText>Plain text</HelpText>
 <HelpText>
@@ -50,7 +50,7 @@ Use the `error` prop to show the `HelpText` in error state.
 </Canvas>
 
 ```jsx
-import { HelpText } from '../../ui/component-library/help-text';
+import { HelpText } from '../../ui/components/component-library';
 
 <HelpText error>This HelpText in error state</HelpText>;
 ```
@@ -65,7 +65,7 @@ It may be useful to change the color of the `HelpText`. Use the `color` prop and
 
 ```jsx
 import { COLORS } from '../../../helpers/constants/design-system';
-import { HelpText } from '../../ui/component-library/help-text';
+import { HelpText } from '../../ui/components/component-library';
 
 <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
   <HelpText color={COLORS.TEXT_DEFAULT}>
diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx
index 950e2d07b..d18913802 100644
--- a/ui/components/component-library/icon/README.mdx
+++ b/ui/components/component-library/icon/README.mdx
@@ -23,7 +23,7 @@ Use the `name` prop and the `ICON_NAMES` object to change the icon.
 Use the [IconSearch](/ui-components-component-library-icon-icon-stories-js--name) story to find the icon you want to use.
 
 ```jsx
-import { Icon, ICON_NAMES } from '../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} />
 <Icon name={ICON_NAMES.BANK_FILLED} />
@@ -55,7 +55,7 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XXS} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XS} />
@@ -79,7 +79,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
 
 ```jsx
 import { COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../ui/component-library';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.INHERIT} />
 <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ICON_DEFAULT} />
diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js
new file mode 100644
index 000000000..6927e2334
--- /dev/null
+++ b/ui/components/component-library/index.js
@@ -0,0 +1,25 @@
+export { AvatarAccount } from './avatar-account';
+export { AvatarFavicon } from './avatar-favicon';
+export { AvatarNetwork } from './avatar-network';
+export { AvatarToken } from './avatar-token';
+export { AvatarWithBadge } from './avatar-with-badge';
+export { BaseAvatar } from './base-avatar';
+export { Button } from './button';
+export { ButtonBase } from './button-base';
+export { ButtonIcon } from './button-icon';
+export { ButtonLink } from './button-link';
+export { ButtonPrimary } from './button-primary';
+export { ButtonSecondary } from './button-secondary';
+export { HelpText } from './help-text';
+export { Icon, ICON_NAMES } from './icon';
+export { Label } from './label';
+export { PickerNetwork } from './picker-network';
+export { Tag } from './tag';
+export { TagUrl } from './tag-url';
+export { Text } from './text';
+export { TextField } from './text-field';
+export {
+  TextFieldBase,
+  TEXT_FIELD_BASE_SIZES,
+  TEXT_FIELD_BASE_TYPES,
+} from './text-field-base';
diff --git a/ui/components/component-library/label/README.mdx b/ui/components/component-library/label/README.mdx
index 66868610f..5f83c96d5 100644
--- a/ui/components/component-library/label/README.mdx
+++ b/ui/components/component-library/label/README.mdx
@@ -26,9 +26,9 @@ The `children` of the label can be text or a react node.
 
 ```jsx
 import { DISPLAY, ALIGN_ITEMS, FLEX_DIRECTION, SIZES, COLORS } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library/icon';
-import { Label } from '../../ui/component-library/label';
-import { TextFieldBase } from '../../ui/component-library/text-field-base'
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
+import { Label } from '../../ui/components/component-library';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <Label>Plain text</Label>
 <Label display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START}>
@@ -59,8 +59,8 @@ Use the `htmlFor` prop to allow the `Label` to focus on an input with the same i
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
-import { Label } from '../../ui/component-library/label';
+import { TextFieldBase } from '../../ui/components/component-library';
+import { Label } from '../../ui/components/component-library';
 
 <Label htmlFor="add-network">Add network</Label>
 <TextFieldBase  id="add-network" placeholder="Enter network name" />
@@ -75,7 +75,7 @@ Use the `required` prop to add a required red asterisk next to the `children` of
 </Canvas>
 
 ```jsx
-import { Label } from '../../ui/component-library/label';
+import { Label } from '../../ui/components/component-library';
 
 <Label required>Label</Label>;
 ```
@@ -89,7 +89,7 @@ Use the `disabled` prop to set the `Label` in disabled state
 </Canvas>
 
 ```jsx
-import { Label } from '../../ui/component-library/label';
+import { Label } from '../../ui/components/component-library';
 
 <Label disabled>Label</Label>;
 ```
diff --git a/ui/components/component-library/text-field-base/README.mdx b/ui/components/component-library/text-field-base/README.mdx
index c7ce2c173..271ac5657 100644
--- a/ui/components/component-library/text-field-base/README.mdx
+++ b/ui/components/component-library/text-field-base/README.mdx
@@ -35,7 +35,7 @@ Defaults to `md`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 import { SIZES } from '../../../helpers/constants/design-system';
 
 <TextFieldBase size={SIZES.SM} />
@@ -60,7 +60,7 @@ Defaults to `text`.
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase type="text" /> // (Default)
 <TextFieldBase type="number" />
@@ -76,7 +76,7 @@ Use the `truncate` prop to truncate the text of the the `TextFieldBase`. Default
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase truncate />; // truncate is set to `true` by default
 <TextFieldBase truncate={false} />;
@@ -92,9 +92,9 @@ Use the `leftAccessory` and `rightAccessory` props to add components such as ico
 
 ```jsx
 import { COLORS, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../ui/component-library/icons';
+import { Icon, ICON_NAMES } from '../../ui/components/component-library';
 
-import { TextFieldBase } from '../../ui/component-library/text-field';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase
   placeholder="Search"
@@ -156,7 +156,7 @@ Use the `inputRef` prop to access the ref of the `<input />` html element of `Te
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 const inputRef = useRef(null);
 const [value, setValue] = useState('');
@@ -252,7 +252,7 @@ Use the `autoComplete` prop to set the autocomplete html attribute. It allows th
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase type="password" autoComplete />;
 ```
@@ -266,7 +266,7 @@ Use the `autoFocus` prop to focus the `TextFieldBase` during the first mount
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase autoFocus />;
 ```
@@ -280,7 +280,7 @@ Use the `defaultValue` prop to set the default value of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase defaultValue="default value" />;
 ```
@@ -294,7 +294,7 @@ Use the `disabled` prop to set the disabled state of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase disabled />;
 ```
@@ -308,7 +308,7 @@ Use the `error` prop to set the error state of the `TextFieldBase`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase error />;
 ```
@@ -322,7 +322,7 @@ Use the `maxLength` prop to set the maximum allowed input characters for the `Te
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase maxLength={10} />;
 ```
@@ -336,7 +336,7 @@ Use the `readOnly` prop to set the `TextFieldBase` to read only. When `readOnly`
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 <TextFieldBase readOnly />;
 ```
@@ -350,7 +350,7 @@ Use the `required` prop to set the `TextFieldBase` to required. Currently there
 </Canvas>
 
 ```jsx
-import { TextFieldBase } from '../../ui/component-library/text-field-base';
+import { TextFieldBase } from '../../ui/components/component-library';
 
 // Currently no visual difference
 <TextFieldBase required />;
diff --git a/ui/components/component-library/text-field/README.mdx b/ui/components/component-library/text-field/README.mdx
index 617111a7b..52a00f9f7 100644
--- a/ui/components/component-library/text-field/README.mdx
+++ b/ui/components/component-library/text-field/README.mdx
@@ -29,7 +29,7 @@ The clear button uses [ButtonIcon](/docs/ui-components-component-library-button-
 </Canvas>
 
 ```jsx
-import { TextField } from '../../ui/component-library/text-field';
+import { TextField } from '../../ui/components/component-library';
 
 const [value, setValue] = useState('show clear');
 
@@ -66,7 +66,7 @@ import {
   BORDER_RADIUS,
 } from '../../../helpers/constants/design-system';
 
-import { TextField } from '../../ui/component-library/text-field';
+import { TextField } from '../../ui/components/component-library';
 
 const [value, setValue] = useState('show clear');
 
diff --git a/ui/components/component-library/text/README.mdx b/ui/components/component-library/text/README.mdx
index 4f3650ebf..c06c2364f 100644
--- a/ui/components/component-library/text/README.mdx
+++ b/ui/components/component-library/text/README.mdx
@@ -25,7 +25,7 @@ Use the `variant` prop and the `TEXT` object from `./ui/helpers/constants/design
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { TEXT } from '../../../helpers/constants/design-system';
 
 <Text variant={TEXT.DISPLAY_MD}>display-md</Text>
@@ -47,7 +47,7 @@ Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { COLORS } from '../../../helpers/constants/design-system';
 
 <Text color={COLORS.TEXT_DEFAULT}>
@@ -104,7 +104,7 @@ Use the `fontWeight` prop and the `FONT_WEIGHT` object from `./ui/helpers/consta
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { FONT_WEIGHT } from '../../../helpers/constants/design-system';
 
 <Text fontWeight={FONT_WEIGHT.NORMAL}>
@@ -130,7 +130,7 @@ Use the `fontStyle` prop and the `FONT_STYLE` object from `./ui/helpers/constant
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { FONT_STYLE } from '../../../helpers/constants/design-system';
 
 <Text fontStyle={FONT_STYLE.NORMAL}>
@@ -150,7 +150,7 @@ Use the `textTransform` prop and the `TEXT_TRANSFORM` object from `./ui/helpers/
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { TEXT_TRANSFORM } from '../../../helpers/constants/design-system';
 
 <Text textAlign={TEXT_TRANSFORM.UPPERCASE}>
@@ -173,7 +173,7 @@ Use the `textAlign` prop and the `TEXT_ALIGN` object from `./ui/helpers/constant
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
 
 <Text textAlign={TEXT_ALIGN.LEFT}>
@@ -202,7 +202,7 @@ Use the `overflowWrap` prop and the `OVERFLOW_WRAP` object from `./ui/helpers/co
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 import { OVERFLOW_WRAP } from '../../../helpers/constants/design-system';
 
 <div
@@ -230,7 +230,7 @@ Use the boolean `ellipsis` prop to change the if the `Text` component to have an
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 
 <div
   style={{
@@ -253,7 +253,7 @@ Use the `as` prop to change the root html element of the `Text` component
 </Canvas>
 
 ```jsx
-import { Text } from '../../ui/component-library/text';
+import { Text } from '../../ui/components/component-library';
 
 <Text as="dd">dd</Text>
 <Text as="div">div</Text>