diff --git a/build/tsconfig.docs.json b/build/tsconfig.docs.json
index 0b396f19cb..02c308fb00 100644
--- a/build/tsconfig.docs.json
+++ b/build/tsconfig.docs.json
@@ -1,8 +1,7 @@
 {
   "extends": "./tsconfig.common.json",
   "compilerOptions": {
-    "module": "esnext",
-    "allowSyntheticDefaultImports": true
+    "module": "esnext"
   },
   "include": [
     "../src",
diff --git a/docs/src/examples/components/Accordion/Types/AccordionExample.shorthand.tsx b/docs/src/examples/components/Accordion/Types/AccordionExample.shorthand.tsx
index b52e3f131c..8b2f487a26 100644
--- a/docs/src/examples/components/Accordion/Types/AccordionExample.shorthand.tsx
+++ b/docs/src/examples/components/Accordion/Types/AccordionExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Accordion } from '@stardust-ui/react'
 
 const panels = [
diff --git a/docs/src/examples/components/Accordion/Types/AccordionExclusiveExample.shorthand.tsx b/docs/src/examples/components/Accordion/Types/AccordionExclusiveExample.shorthand.tsx
index bbde045206..fbceef2eb1 100644
--- a/docs/src/examples/components/Accordion/Types/AccordionExclusiveExample.shorthand.tsx
+++ b/docs/src/examples/components/Accordion/Types/AccordionExclusiveExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Accordion } from '@stardust-ui/react'
 
 const panels = [
diff --git a/docs/src/examples/components/Accordion/Types/index.tsx b/docs/src/examples/components/Accordion/Types/index.tsx
index eac3da28b8..2f197ca1c1 100644
--- a/docs/src/examples/components/Accordion/Types/index.tsx
+++ b/docs/src/examples/components/Accordion/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Accordion/Variations/AccordionExampleList.shorthand.tsx b/docs/src/examples/components/Accordion/Variations/AccordionExampleList.shorthand.tsx
index b3f4d3a1e4..f4e22d12b5 100644
--- a/docs/src/examples/components/Accordion/Variations/AccordionExampleList.shorthand.tsx
+++ b/docs/src/examples/components/Accordion/Variations/AccordionExampleList.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Accordion, Button } from '@stardust-ui/react'
 
 class AccordionExampleList extends React.Component {
diff --git a/docs/src/examples/components/Accordion/Variations/index.tsx b/docs/src/examples/components/Accordion/Variations/index.tsx
index 7e90184459..c3a46449a3 100644
--- a/docs/src/examples/components/Accordion/Variations/index.tsx
+++ b/docs/src/examples/components/Accordion/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Accordion/index.tsx b/docs/src/examples/components/Accordion/index.tsx
index a452332fa4..30bace947a 100644
--- a/docs/src/examples/components/Accordion/index.tsx
+++ b/docs/src/examples/components/Accordion/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
diff --git a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
index 92c440c528..7180e8f537 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Icon, Button, Animation, Provider } from '@stardust-ui/react'
 
 const spinner = {
diff --git a/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx b/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx
index 00d7887d2c..f27f9ecc2b 100644
--- a/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx
+++ b/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Attachment } from '@stardust-ui/react'
 
 class AttachmentActionExampleShorthand extends React.Component {
diff --git a/docs/src/examples/components/Attachment/Slots/AttachmentDescriptionExample.shorthand.tsx b/docs/src/examples/components/Attachment/Slots/AttachmentDescriptionExample.shorthand.tsx
index e61a87400a..cbf18197a8 100644
--- a/docs/src/examples/components/Attachment/Slots/AttachmentDescriptionExample.shorthand.tsx
+++ b/docs/src/examples/components/Attachment/Slots/AttachmentDescriptionExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Attachment } from '@stardust-ui/react'
 
 const AttachmentDescriptionExampleShorthand = () => (
diff --git a/docs/src/examples/components/Attachment/Slots/AttachmentHeaderExample.shorthand.tsx b/docs/src/examples/components/Attachment/Slots/AttachmentHeaderExample.shorthand.tsx
index 5f5967b4af..60e6f107a7 100644
--- a/docs/src/examples/components/Attachment/Slots/AttachmentHeaderExample.shorthand.tsx
+++ b/docs/src/examples/components/Attachment/Slots/AttachmentHeaderExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Attachment } from '@stardust-ui/react'
 
 const AttachmentHeaderExampleShorthand = () => <Attachment header="Strategy.docx" />
diff --git a/docs/src/examples/components/Attachment/Slots/AttachmentIconExample.shorthand.tsx b/docs/src/examples/components/Attachment/Slots/AttachmentIconExample.shorthand.tsx
index 0fa3c0b621..151c07a622 100644
--- a/docs/src/examples/components/Attachment/Slots/AttachmentIconExample.shorthand.tsx
+++ b/docs/src/examples/components/Attachment/Slots/AttachmentIconExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Attachment } from '@stardust-ui/react'
 
 const AttachmentIconExampleShorthand = () => (
diff --git a/docs/src/examples/components/Attachment/Types/AttachmentExample.shorthand.tsx b/docs/src/examples/components/Attachment/Types/AttachmentExample.shorthand.tsx
index cb840efa3c..b67e7ac11b 100644
--- a/docs/src/examples/components/Attachment/Types/AttachmentExample.shorthand.tsx
+++ b/docs/src/examples/components/Attachment/Types/AttachmentExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Attachment } from '@stardust-ui/react'
 
 const AttachmentExampleShorthand = () => <Attachment header="Document.docx" />
diff --git a/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx b/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx
index f0980483ca..75ae4db11d 100644
--- a/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx
+++ b/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Attachment } from '@stardust-ui/react'
 
 const AttachmentProgressExampleShorthand = () => (
diff --git a/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx b/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx
index 701bd51945..43f78db42a 100644
--- a/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx
+++ b/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Attachment } from '@stardust-ui/react'
 
 class AttachmentActionableExampleShorthand extends React.Component {
diff --git a/docs/src/examples/components/Avatar/Types/AvatarExample.shorthand.tsx b/docs/src/examples/components/Avatar/Types/AvatarExample.shorthand.tsx
index 75f837cd83..48b1612603 100644
--- a/docs/src/examples/components/Avatar/Types/AvatarExample.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Types/AvatarExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const AvatarExampleShorthand = () => (
diff --git a/docs/src/examples/components/Avatar/Types/index.tsx b/docs/src/examples/components/Avatar/Types/index.tsx
index a460694908..5c6e1fb574 100644
--- a/docs/src/examples/components/Avatar/Types/index.tsx
+++ b/docs/src/examples/components/Avatar/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
index 6cf03f6f1a..5ae6eaf637 100644
--- a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const status = { color: 'green', icon: 'check', title: 'Available' }
diff --git a/docs/src/examples/components/Avatar/Usage/index.tsx b/docs/src/examples/components/Avatar/Usage/index.tsx
index f36e0513fc..4fce4a8bfc 100644
--- a/docs/src/examples/components/Avatar/Usage/index.tsx
+++ b/docs/src/examples/components/Avatar/Usage/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx
index a32c329ae4..19b14abdbb 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const status = { color: 'green', icon: 'check', title: 'Available' }
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx
index f564defd41..f9da55f38b 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const getInitials = name => name.split(' ').map(word => `${word[0]}.`)
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleImage.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleImage.shorthand.tsx
index 4e9a9c2391..2c5a4302be 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleImage.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleImage.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const AvatarExampleImageShorthand = () => <Avatar image="public/images/avatar/small/matt.jpg" />
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
index 071c5b92b6..d0ba6ea13e 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar, Icon } from '@stardust-ui/react'
 
 const AvatarExampleImageCustomizationShorthand = () => (
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleLabel.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleLabel.shorthand.tsx
index bd59b97721..da339d512c 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleLabel.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleLabel.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const AvatarExampleLabelShorthand = () => (
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx
index 234b31fe92..895a5263ac 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const AvatarExampleNameShorthand = () => (
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
index 3825048d92..8df115054d 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
@@ -1,5 +1,5 @@
-import _ from 'lodash'
-import React from 'react'
+import * as _ from 'lodash'
+import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const statusProps = { icon: 'check', color: 'green', title: 'Available' }
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
index 0d2d497615..ddcfd58262 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const AvatarExampleStatusShorthand = () => (
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
index a28b0c081b..dde21675b5 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar, Grid, Status, Text } from '@stardust-ui/react'
 
 const defaultAvatar = (
diff --git a/docs/src/examples/components/Avatar/Variations/index.tsx b/docs/src/examples/components/Avatar/Variations/index.tsx
index 3b94baa8af..519f2f0359 100644
--- a/docs/src/examples/components/Avatar/Variations/index.tsx
+++ b/docs/src/examples/components/Avatar/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Avatar/index.tsx b/docs/src/examples/components/Avatar/index.tsx
index 184521ade5..7c234c2806 100644
--- a/docs/src/examples/components/Avatar/index.tsx
+++ b/docs/src/examples/components/Avatar/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 import Usage from './Usage'
diff --git a/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx b/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
index 1816b2b699..ad0b114d0f 100644
--- a/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonGroupCircularExampleShorthand = () => (
diff --git a/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx b/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx
index 317f79388c..034c5aac13 100644
--- a/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonGroupExampleShorthand = () => (
diff --git a/docs/src/examples/components/Button/Groups/index.tsx b/docs/src/examples/components/Button/Groups/index.tsx
index a7710de27b..169c0af173 100644
--- a/docs/src/examples/components/Button/Groups/index.tsx
+++ b/docs/src/examples/components/Button/Groups/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx b/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
index ca60a1ecdf..f31b59cae5 100644
--- a/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
+++ b/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleDisabled = () => (
diff --git a/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx b/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
index 182d0c7c39..672c64a71b 100644
--- a/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
+++ b/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Icon, Text } from '@stardust-ui/react'
 
 const ButtonExampleDisabled = () => (
diff --git a/docs/src/examples/components/Button/States/index.tsx b/docs/src/examples/components/Button/States/index.tsx
index a505470c8b..38d4a4289b 100644
--- a/docs/src/examples/components/Button/States/index.tsx
+++ b/docs/src/examples/components/Button/States/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
index 04e23fffb8..4a3d9e0c35 100644
--- a/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExample = () => (
diff --git a/docs/src/examples/components/Button/Types/ButtonExample.tsx b/docs/src/examples/components/Button/Types/ButtonExample.tsx
index a76f79e67f..b80197ec43 100644
--- a/docs/src/examples/components/Button/Types/ButtonExample.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExample = () => (
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx
index 22fc2e32bd..824857c272 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleContentAndIcon = () => (
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx
index 389026b5cc..d6cf43676b 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Icon, Text } from '@stardust-ui/react'
 
 const ButtonExampleContentAndIcon = () => (
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx
index d7583281bc..48ce7a8789 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleEmphasis = () => (
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.tsx b/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.tsx
index 2d8a977d9f..4d7654cdd8 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleEmphasis.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleEmphasis = () => (
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx
index 9595a2f47b..920d7c7669 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleIcon = () => <Button icon="book" primary />
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx
index 45053ada32..913bbbe008 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Icon } from '@stardust-ui/react'
 
 const ButtonExampleIcon = () => (
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx
index 6d70645017..fb84701b01 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleIconOnly = () => <Button icon="book" iconOnly primary />
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx
index eb1e5cdcac..4936c82455 100644
--- a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Icon } from '@stardust-ui/react'
 
 const ButtonExampleIconOnly = () => (
diff --git a/docs/src/examples/components/Button/Types/index.tsx b/docs/src/examples/components/Button/Types/index.tsx
index 7e263af0f0..e16b6fae3f 100644
--- a/docs/src/examples/components/Button/Types/index.tsx
+++ b/docs/src/examples/components/Button/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx
index 49175bddd1..6e26adb057 100644
--- a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Provider } from '@stardust-ui/react'
 
 const ButtonUsageExampleShorthand = () => (
diff --git a/docs/src/examples/components/Button/Usage/index.tsx b/docs/src/examples/components/Button/Usage/index.tsx
index 73cb8987fc..d639a4600b 100644
--- a/docs/src/examples/components/Button/Usage/index.tsx
+++ b/docs/src/examples/components/Button/Usage/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
index 17207451ab..c9c019b8d5 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleCircular = () => (
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
index 1b0da5d5a1..8a9fa85269 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Icon } from '@stardust-ui/react'
 
 const ButtonExampleCircular = () => (
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx
index 835f4bb1a5..710c9f458e 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleEmphasisCircular = () => (
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx
index 8d72d2da3e..a63febf751 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Icon } from '@stardust-ui/react'
 
 const ButtonExampleEmphasisCircular = () => (
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleFluid.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleFluid.shorthand.tsx
index 762d2e82de..7d904008d7 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleFluid.shorthand.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleFluid.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleFluid = () => <Button fluid content="Fits to Container" />
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleFluid.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleFluid.tsx
index 08ec3839d1..03791c6e70 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleFluid.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleFluid.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleFluid = () => <Button fluid>Fits to Container</Button>
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx
index 309f66706c..031fe3c15b 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button } from '@stardust-ui/react'
 
 const ButtonExampleTextShorthand = () => (
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx
index 04bb679907..e8ba222477 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Icon, Text } from '@stardust-ui/react'
 
 const ButtonExampleText = () => (
diff --git a/docs/src/examples/components/Button/Variations/index.tsx b/docs/src/examples/components/Button/Variations/index.tsx
index 9c8c734248..1a638977b3 100644
--- a/docs/src/examples/components/Button/Variations/index.tsx
+++ b/docs/src/examples/components/Button/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Button/index.tsx b/docs/src/examples/components/Button/index.tsx
index 2d1e6245f7..e25775a4ce 100644
--- a/docs/src/examples/components/Button/index.tsx
+++ b/docs/src/examples/components/Button/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 import States from './States'
diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
index 68a0a1f64d..158c9f42fd 100644
--- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar, Chat, Divider } from '@stardust-ui/react'
 
 const janeAvatar = {
diff --git a/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx
index 0adac90c0f..055d85d6a4 100644
--- a/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExampleGutterPosition.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar, Chat } from '@stardust-ui/react'
 
 const [janeAvatar, johnAvatar] = [
diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
index f3ad53609c..63630850f6 100644
--- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Avatar, Chat, Provider } from '@stardust-ui/react'
 
 const janeAvatar = {
diff --git a/docs/src/examples/components/Chat/Types/index.tsx b/docs/src/examples/components/Chat/Types/index.tsx
index f855b2a3be..40f114ec3b 100644
--- a/docs/src/examples/components/Chat/Types/index.tsx
+++ b/docs/src/examples/components/Chat/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Chat/index.tsx b/docs/src/examples/components/Chat/index.tsx
index 0b24f2fae9..3d75cc851a 100644
--- a/docs/src/examples/components/Chat/index.tsx
+++ b/docs/src/examples/components/Chat/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 
 const ChatExamples = () => (
diff --git a/docs/src/examples/components/Divider/Types/DividerExample.shorthand.tsx b/docs/src/examples/components/Divider/Types/DividerExample.shorthand.tsx
index 448212dbf9..632a7254ab 100644
--- a/docs/src/examples/components/Divider/Types/DividerExample.shorthand.tsx
+++ b/docs/src/examples/components/Divider/Types/DividerExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Divider } from '@stardust-ui/react'
 
 const DividerExampleShorthand = () => <Divider />
diff --git a/docs/src/examples/components/Divider/Types/DividerExampleContent.shorthand.tsx b/docs/src/examples/components/Divider/Types/DividerExampleContent.shorthand.tsx
index 6bf0c76588..91b2992c61 100644
--- a/docs/src/examples/components/Divider/Types/DividerExampleContent.shorthand.tsx
+++ b/docs/src/examples/components/Divider/Types/DividerExampleContent.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Divider } from '@stardust-ui/react'
 
 const DividerExampleContent = () => <Divider content="Some text" />
diff --git a/docs/src/examples/components/Divider/Types/DividerExampleContent.tsx b/docs/src/examples/components/Divider/Types/DividerExampleContent.tsx
index f5d5074ee0..795d95ebfc 100644
--- a/docs/src/examples/components/Divider/Types/DividerExampleContent.tsx
+++ b/docs/src/examples/components/Divider/Types/DividerExampleContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Divider } from '@stardust-ui/react'
 
 const DividerExampleContent = () => <Divider>Some text</Divider>
diff --git a/docs/src/examples/components/Divider/Types/index.tsx b/docs/src/examples/components/Divider/Types/index.tsx
index 9118a8ba02..7e0484cbf7 100644
--- a/docs/src/examples/components/Divider/Types/index.tsx
+++ b/docs/src/examples/components/Divider/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Divider/Variations/DividerExampleColor.shorthand.tsx b/docs/src/examples/components/Divider/Variations/DividerExampleColor.shorthand.tsx
index 5be8010eb9..a7801d7322 100644
--- a/docs/src/examples/components/Divider/Variations/DividerExampleColor.shorthand.tsx
+++ b/docs/src/examples/components/Divider/Variations/DividerExampleColor.shorthand.tsx
@@ -1,5 +1,5 @@
-import _ from 'lodash'
-import React from 'react'
+import * as _ from 'lodash'
+import * as React from 'react'
 import { Divider, ProviderConsumer } from '@stardust-ui/react'
 
 const DividerExampleColor = () => (
diff --git a/docs/src/examples/components/Divider/Variations/DividerExampleFitted.shorthand.tsx b/docs/src/examples/components/Divider/Variations/DividerExampleFitted.shorthand.tsx
index da6001b9c0..0821868964 100644
--- a/docs/src/examples/components/Divider/Variations/DividerExampleFitted.shorthand.tsx
+++ b/docs/src/examples/components/Divider/Variations/DividerExampleFitted.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Divider } from '@stardust-ui/react'
 
 const DividerExampleFittedShorthand = () => (
diff --git a/docs/src/examples/components/Divider/Variations/DividerExampleImportant.shorthand.tsx b/docs/src/examples/components/Divider/Variations/DividerExampleImportant.shorthand.tsx
index a1d888dda3..ab7783129e 100644
--- a/docs/src/examples/components/Divider/Variations/DividerExampleImportant.shorthand.tsx
+++ b/docs/src/examples/components/Divider/Variations/DividerExampleImportant.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Divider } from '@stardust-ui/react'
 
 const DividerExampleImportantShorthand = () => <Divider important content="This is important" />
diff --git a/docs/src/examples/components/Divider/Variations/DividerExampleImportant.tsx b/docs/src/examples/components/Divider/Variations/DividerExampleImportant.tsx
index 2bec1f63cb..f689ffbef8 100644
--- a/docs/src/examples/components/Divider/Variations/DividerExampleImportant.tsx
+++ b/docs/src/examples/components/Divider/Variations/DividerExampleImportant.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Divider } from '@stardust-ui/react'
 
 const DividerExampleImportant = () => <Divider important>This is important</Divider>
diff --git a/docs/src/examples/components/Divider/Variations/DividerExampleSize.shorthand.tsx b/docs/src/examples/components/Divider/Variations/DividerExampleSize.shorthand.tsx
index 4dafd3f733..8b304a39f4 100644
--- a/docs/src/examples/components/Divider/Variations/DividerExampleSize.shorthand.tsx
+++ b/docs/src/examples/components/Divider/Variations/DividerExampleSize.shorthand.tsx
@@ -1,5 +1,5 @@
-import _ from 'lodash'
-import React from 'react'
+import * as _ from 'lodash'
+import * as React from 'react'
 import { Divider } from '@stardust-ui/react'
 
 const DividerExampleSize = () =>
diff --git a/docs/src/examples/components/Divider/Variations/DividerExampleSize.tsx b/docs/src/examples/components/Divider/Variations/DividerExampleSize.tsx
index 8f42ed50b4..4e6da59a25 100644
--- a/docs/src/examples/components/Divider/Variations/DividerExampleSize.tsx
+++ b/docs/src/examples/components/Divider/Variations/DividerExampleSize.tsx
@@ -1,5 +1,5 @@
-import _ from 'lodash'
-import React from 'react'
+import * as _ from 'lodash'
+import * as React from 'react'
 import { Divider } from '@stardust-ui/react'
 
 const DividerExampleSize = () =>
diff --git a/docs/src/examples/components/Divider/Variations/index.tsx b/docs/src/examples/components/Divider/Variations/index.tsx
index 43151f0cdc..a6b9cea630 100644
--- a/docs/src/examples/components/Divider/Variations/index.tsx
+++ b/docs/src/examples/components/Divider/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Divider/index.tsx b/docs/src/examples/components/Divider/index.tsx
index 6552db145b..b68320b11b 100644
--- a/docs/src/examples/components/Divider/index.tsx
+++ b/docs/src/examples/components/Divider/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
diff --git a/docs/src/examples/components/Dropdown/Variations/index.tsx b/docs/src/examples/components/Dropdown/Variations/index.tsx
index aea2c81640..cd3ff955f8 100644
--- a/docs/src/examples/components/Dropdown/Variations/index.tsx
+++ b/docs/src/examples/components/Dropdown/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Form/Types/FormExample.shorthand.tsx b/docs/src/examples/components/Form/Types/FormExample.shorthand.tsx
index cccfd2b50d..cb31bb3c33 100644
--- a/docs/src/examples/components/Form/Types/FormExample.shorthand.tsx
+++ b/docs/src/examples/components/Form/Types/FormExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Form, Button } from '@stardust-ui/react'
 
 const fields = [
diff --git a/docs/src/examples/components/Form/Types/FormExample.tsx b/docs/src/examples/components/Form/Types/FormExample.tsx
index 49ed51ea79..f28f85f0c5 100644
--- a/docs/src/examples/components/Form/Types/FormExample.tsx
+++ b/docs/src/examples/components/Form/Types/FormExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Form, Button } from '@stardust-ui/react'
 
 const FormExample = () => (
diff --git a/docs/src/examples/components/Form/Types/FormExampleInline.shorthand.tsx b/docs/src/examples/components/Form/Types/FormExampleInline.shorthand.tsx
index f1001bbcdd..9aefb05416 100644
--- a/docs/src/examples/components/Form/Types/FormExampleInline.shorthand.tsx
+++ b/docs/src/examples/components/Form/Types/FormExampleInline.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Form, Button } from '@stardust-ui/react'
 
 const fields = [
diff --git a/docs/src/examples/components/Form/Types/FormExampleInline.tsx b/docs/src/examples/components/Form/Types/FormExampleInline.tsx
index 42e8582ffd..95417efe83 100644
--- a/docs/src/examples/components/Form/Types/FormExampleInline.tsx
+++ b/docs/src/examples/components/Form/Types/FormExampleInline.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Form, Button } from '@stardust-ui/react'
 
 const FormExample = () => (
diff --git a/docs/src/examples/components/Form/Types/index.tsx b/docs/src/examples/components/Form/Types/index.tsx
index c6ac2f803d..1d932fc241 100644
--- a/docs/src/examples/components/Form/Types/index.tsx
+++ b/docs/src/examples/components/Form/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Form/index.tsx b/docs/src/examples/components/Form/index.tsx
index 1f7aa90671..7af4364ec2 100644
--- a/docs/src/examples/components/Form/index.tsx
+++ b/docs/src/examples/components/Form/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 
 const FormExamples = () => (
diff --git a/docs/src/examples/components/Grid/Types/GridExample.shorthand.tsx b/docs/src/examples/components/Grid/Types/GridExample.shorthand.tsx
index 7d4cf01420..a2d5af5e16 100644
--- a/docs/src/examples/components/Grid/Types/GridExample.shorthand.tsx
+++ b/docs/src/examples/components/Grid/Types/GridExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Image } from '@stardust-ui/react'
 
 const images = [
diff --git a/docs/src/examples/components/Grid/Types/GridExample.tsx b/docs/src/examples/components/Grid/Types/GridExample.tsx
index d23826da8b..05975d3b5f 100644
--- a/docs/src/examples/components/Grid/Types/GridExample.tsx
+++ b/docs/src/examples/components/Grid/Types/GridExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Image } from '@stardust-ui/react'
 
 const images = [
diff --git a/docs/src/examples/components/Grid/Types/index.tsx b/docs/src/examples/components/Grid/Types/index.tsx
index 9ceb5d7280..1c484cdb53 100644
--- a/docs/src/examples/components/Grid/Types/index.tsx
+++ b/docs/src/examples/components/Grid/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Grid/Variations/GridExampleColumns.shorthand.tsx b/docs/src/examples/components/Grid/Variations/GridExampleColumns.shorthand.tsx
index d3c1712f81..e0a957f694 100644
--- a/docs/src/examples/components/Grid/Variations/GridExampleColumns.shorthand.tsx
+++ b/docs/src/examples/components/Grid/Variations/GridExampleColumns.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Image } from '@stardust-ui/react'
 
 const images = [
diff --git a/docs/src/examples/components/Grid/Variations/GridExampleColumns.tsx b/docs/src/examples/components/Grid/Variations/GridExampleColumns.tsx
index 213317f9d6..d20a10b50c 100644
--- a/docs/src/examples/components/Grid/Variations/GridExampleColumns.tsx
+++ b/docs/src/examples/components/Grid/Variations/GridExampleColumns.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Image } from '@stardust-ui/react'
 
 const images = [
diff --git a/docs/src/examples/components/Grid/Variations/GridExampleColumnsAndRows.shorthand.tsx b/docs/src/examples/components/Grid/Variations/GridExampleColumnsAndRows.shorthand.tsx
index d1711f124c..19a1cb902d 100644
--- a/docs/src/examples/components/Grid/Variations/GridExampleColumnsAndRows.shorthand.tsx
+++ b/docs/src/examples/components/Grid/Variations/GridExampleColumnsAndRows.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Image } from '@stardust-ui/react'
 
 const images = [
diff --git a/docs/src/examples/components/Grid/Variations/GridExampleColumnsAndRows.tsx b/docs/src/examples/components/Grid/Variations/GridExampleColumnsAndRows.tsx
index deb3a988e7..c805037e4b 100644
--- a/docs/src/examples/components/Grid/Variations/GridExampleColumnsAndRows.tsx
+++ b/docs/src/examples/components/Grid/Variations/GridExampleColumnsAndRows.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Image } from '@stardust-ui/react'
 
 const images = [
diff --git a/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.shorthand.tsx b/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.shorthand.tsx
index 36d7f11398..0486c4f462 100644
--- a/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.shorthand.tsx
+++ b/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.shorthand.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Image, Button, gridBehavior } from '@stardust-ui/react'
-import _ from 'lodash'
+import * as _ from 'lodash'
 
 const imageNames = [
   'ade',
diff --git a/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.tsx b/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.tsx
index 58979fa171..a86e6ca22c 100644
--- a/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.tsx
+++ b/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Image, Button, gridBehavior } from '@stardust-ui/react'
-import _ from 'lodash'
+import * as _ from 'lodash'
 
 const imageNames = [
   'ade',
diff --git a/docs/src/examples/components/Grid/Variations/GridExampleRows.shorthand.tsx b/docs/src/examples/components/Grid/Variations/GridExampleRows.shorthand.tsx
index 38d46a7ae8..4afc08a243 100644
--- a/docs/src/examples/components/Grid/Variations/GridExampleRows.shorthand.tsx
+++ b/docs/src/examples/components/Grid/Variations/GridExampleRows.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Image } from '@stardust-ui/react'
 
 const images = [
diff --git a/docs/src/examples/components/Grid/Variations/GridExampleRows.tsx b/docs/src/examples/components/Grid/Variations/GridExampleRows.tsx
index c7b23e021b..7941c26135 100644
--- a/docs/src/examples/components/Grid/Variations/GridExampleRows.tsx
+++ b/docs/src/examples/components/Grid/Variations/GridExampleRows.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Image } from '@stardust-ui/react'
 
 const images = [
diff --git a/docs/src/examples/components/Grid/Variations/index.tsx b/docs/src/examples/components/Grid/Variations/index.tsx
index cc7f38ad1b..ece598b95e 100644
--- a/docs/src/examples/components/Grid/Variations/index.tsx
+++ b/docs/src/examples/components/Grid/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Grid/index.tsx b/docs/src/examples/components/Grid/index.tsx
index 4e3ab39c4d..6f87054edc 100644
--- a/docs/src/examples/components/Grid/index.tsx
+++ b/docs/src/examples/components/Grid/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
diff --git a/docs/src/examples/components/Header/Types/HeaderExample.shorthand.tsx b/docs/src/examples/components/Header/Types/HeaderExample.shorthand.tsx
index a40146fa15..bb6d66b534 100644
--- a/docs/src/examples/components/Header/Types/HeaderExample.shorthand.tsx
+++ b/docs/src/examples/components/Header/Types/HeaderExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Header } from '@stardust-ui/react'
 
 const HeadersExampleShorthand = () => (
diff --git a/docs/src/examples/components/Header/Types/HeaderExample.tsx b/docs/src/examples/components/Header/Types/HeaderExample.tsx
index 928373d3a8..ea3dd34780 100644
--- a/docs/src/examples/components/Header/Types/HeaderExample.tsx
+++ b/docs/src/examples/components/Header/Types/HeaderExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Header } from '@stardust-ui/react'
 
 const HeaderExample = () => (
diff --git a/docs/src/examples/components/Header/Types/index.tsx b/docs/src/examples/components/Header/Types/index.tsx
index 55e3b576f2..ddd4e3701d 100644
--- a/docs/src/examples/components/Header/Types/index.tsx
+++ b/docs/src/examples/components/Header/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx
index 0ddbdd56f3..944b0743e0 100644
--- a/docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx
+++ b/docs/src/examples/components/Header/Variations/HeaderExampleColor.shorthand.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import _ from 'lodash'
+import * as React from 'react'
+import * as _ from 'lodash'
 import { Header, ProviderConsumer } from '@stardust-ui/react'
 
 const HeaderExampleColor = () => (
diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx
index 9bd112cd00..b708a66d63 100644
--- a/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx
+++ b/docs/src/examples/components/Header/Variations/HeaderExampleColor.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import _ from 'lodash'
+import * as React from 'react'
+import * as _ from 'lodash'
 import { Header, ProviderConsumer } from '@stardust-ui/react'
 
 const HeaderExampleColor = () => (
diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleDescription.shorthand.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleDescription.shorthand.tsx
index 2796ec59c2..0f80905d8f 100644
--- a/docs/src/examples/components/Header/Variations/HeaderExampleDescription.shorthand.tsx
+++ b/docs/src/examples/components/Header/Variations/HeaderExampleDescription.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Header } from '@stardust-ui/react'
 
 const HeaderExampleDescriptionShorthand = () => (
diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleDescription.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleDescription.tsx
index 66bc642f14..b12fdd1a6f 100644
--- a/docs/src/examples/components/Header/Variations/HeaderExampleDescription.tsx
+++ b/docs/src/examples/components/Header/Variations/HeaderExampleDescription.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Header } from '@stardust-ui/react'
 
 const HeaderExampleDescription = () => (
diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleDescriptionCustomization.shorthand.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleDescriptionCustomization.shorthand.tsx
index c05d60371c..4a9e87b52d 100644
--- a/docs/src/examples/components/Header/Variations/HeaderExampleDescriptionCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Header/Variations/HeaderExampleDescriptionCustomization.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Header } from '@stardust-ui/react'
 
 const HeaderExampleDescriptionCustomizationShorthand = () => (
diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleDescriptionCustomization.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleDescriptionCustomization.tsx
index 678c921b49..01eca58829 100644
--- a/docs/src/examples/components/Header/Variations/HeaderExampleDescriptionCustomization.tsx
+++ b/docs/src/examples/components/Header/Variations/HeaderExampleDescriptionCustomization.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Header } from '@stardust-ui/react'
 
 const HeaderExampleDescriptionCustomization = () => (
diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleTextAlign.shorthand.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleTextAlign.shorthand.tsx
index 4894feefcb..0e4cf18d9f 100644
--- a/docs/src/examples/components/Header/Variations/HeaderExampleTextAlign.shorthand.tsx
+++ b/docs/src/examples/components/Header/Variations/HeaderExampleTextAlign.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Header } from '@stardust-ui/react'
 
 const HeaderExampleTextAlign = () => (
diff --git a/docs/src/examples/components/Header/Variations/HeaderExampleTextAlign.tsx b/docs/src/examples/components/Header/Variations/HeaderExampleTextAlign.tsx
index 342df344b5..2bfa65906f 100644
--- a/docs/src/examples/components/Header/Variations/HeaderExampleTextAlign.tsx
+++ b/docs/src/examples/components/Header/Variations/HeaderExampleTextAlign.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Header } from '@stardust-ui/react'
 
 const HeaderExampleTextAlign = () => (
diff --git a/docs/src/examples/components/Header/Variations/index.tsx b/docs/src/examples/components/Header/Variations/index.tsx
index 346dfbbfc2..c45eeb3688 100644
--- a/docs/src/examples/components/Header/Variations/index.tsx
+++ b/docs/src/examples/components/Header/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Header/index.tsx b/docs/src/examples/components/Header/index.tsx
index 43acebeebd..1f7006b427 100644
--- a/docs/src/examples/components/Header/index.tsx
+++ b/docs/src/examples/components/Header/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
diff --git a/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx b/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx
index 0200e07f74..9a9bbbe989 100644
--- a/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx
+++ b/docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Icon } from '@stardust-ui/react'
 
 const IconExampleDisabled = () => (
diff --git a/docs/src/examples/components/Icon/States/index.tsx b/docs/src/examples/components/Icon/States/index.tsx
index 9b7c5c4d87..a390816fcc 100644
--- a/docs/src/examples/components/Icon/States/index.tsx
+++ b/docs/src/examples/components/Icon/States/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx b/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx
index 2c4ed1d805..2f6bedb853 100644
--- a/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Icon } from '@stardust-ui/react'
 
 const IconExample = () => (
diff --git a/docs/src/examples/components/Icon/Types/index.tsx b/docs/src/examples/components/Icon/Types/index.tsx
index 8990179ab7..9c5b0f5570 100644
--- a/docs/src/examples/components/Icon/Types/index.tsx
+++ b/docs/src/examples/components/Icon/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx
index ba2593febd..f5d65111f7 100644
--- a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Divider, Header, Icon, Provider } from '@stardust-ui/react'
 
 const cellStyles = {
diff --git a/docs/src/examples/components/Icon/Usage/index.tsx b/docs/src/examples/components/Icon/Usage/index.tsx
index 33eff7d26e..edce4e6461 100644
--- a/docs/src/examples/components/Icon/Usage/index.tsx
+++ b/docs/src/examples/components/Icon/Usage/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
index 72dd8046c5..efe2eeaf47 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Icon } from '@stardust-ui/react'
 
 const IconExampleBordered = () => (
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
index 063920ca11..41facfdb3e 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Icon } from '@stardust-ui/react'
 
 const IconExampleCircular = () => (
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx
index d775268943..f23e0cf846 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Icon, Grid, Text } from '@stardust-ui/react'
 
 const IconExampleColor = () => (
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx
index 7d02a4ca25..91b0a1a6f5 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Icon } from '@stardust-ui/react'
 
 const IconExampleSize = () => (
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx
index 9fa6236987..8bbe2fcb9b 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Icon, Label } from '@stardust-ui/react'
 
 const IconExampleSpace = () => (
diff --git a/docs/src/examples/components/Icon/Variations/index.tsx b/docs/src/examples/components/Icon/Variations/index.tsx
index 19a0ada666..31544ab2ba 100644
--- a/docs/src/examples/components/Icon/Variations/index.tsx
+++ b/docs/src/examples/components/Icon/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Icon/index.tsx b/docs/src/examples/components/Icon/index.tsx
index 514be0fcf1..665d06f38f 100644
--- a/docs/src/examples/components/Icon/index.tsx
+++ b/docs/src/examples/components/Icon/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 import States from './States'
diff --git a/docs/src/examples/components/Image/Types/ImageExample.tsx b/docs/src/examples/components/Image/Types/ImageExample.tsx
index 373dde31da..ae0338dd79 100644
--- a/docs/src/examples/components/Image/Types/ImageExample.tsx
+++ b/docs/src/examples/components/Image/Types/ImageExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Image } from '@stardust-ui/react'
 
 const ImageExample = () => <Image src="public/images/wireframe/square-image.png" />
diff --git a/docs/src/examples/components/Image/Types/ImageExampleAvatar.tsx b/docs/src/examples/components/Image/Types/ImageExampleAvatar.tsx
index 3786ff8116..395bf80ed8 100644
--- a/docs/src/examples/components/Image/Types/ImageExampleAvatar.tsx
+++ b/docs/src/examples/components/Image/Types/ImageExampleAvatar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Image } from '@stardust-ui/react'
 
 const ImageExampleAvatar = () => (
diff --git a/docs/src/examples/components/Image/Types/index.tsx b/docs/src/examples/components/Image/Types/index.tsx
index 944629f1a1..78c5e14576 100644
--- a/docs/src/examples/components/Image/Types/index.tsx
+++ b/docs/src/examples/components/Image/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Image/Variations/ImageExampleCircular.tsx b/docs/src/examples/components/Image/Variations/ImageExampleCircular.tsx
index 78edf0656e..6f61fd3a1d 100644
--- a/docs/src/examples/components/Image/Variations/ImageExampleCircular.tsx
+++ b/docs/src/examples/components/Image/Variations/ImageExampleCircular.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Image } from '@stardust-ui/react'
 
 const ImageExampleCircular = () => <Image circular src="public/images/avatar/small/matt.jpg" />
diff --git a/docs/src/examples/components/Image/Variations/ImageExampleFluid.tsx b/docs/src/examples/components/Image/Variations/ImageExampleFluid.tsx
index 931b2220b8..96d752072c 100644
--- a/docs/src/examples/components/Image/Variations/ImageExampleFluid.tsx
+++ b/docs/src/examples/components/Image/Variations/ImageExampleFluid.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Image, Layout } from '@stardust-ui/react'
 
 const ImageExampleFluent = () => (
diff --git a/docs/src/examples/components/Image/Variations/index.tsx b/docs/src/examples/components/Image/Variations/index.tsx
index c199322f6d..d4ef2417e0 100644
--- a/docs/src/examples/components/Image/Variations/index.tsx
+++ b/docs/src/examples/components/Image/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Image/index.tsx b/docs/src/examples/components/Image/index.tsx
index 69e82e614e..6ac50a81d3 100644
--- a/docs/src/examples/components/Image/index.tsx
+++ b/docs/src/examples/components/Image/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
diff --git a/docs/src/examples/components/Input/Types/InputExample.shorthand.tsx b/docs/src/examples/components/Input/Types/InputExample.shorthand.tsx
index 9b812e77ee..4466ddc5b2 100644
--- a/docs/src/examples/components/Input/Types/InputExample.shorthand.tsx
+++ b/docs/src/examples/components/Input/Types/InputExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Input } from '@stardust-ui/react'
 
 const InputExample = () => <Input placeholder="Search..." />
diff --git a/docs/src/examples/components/Input/Types/index.tsx b/docs/src/examples/components/Input/Types/index.tsx
index 79e1b1b433..fad241b8a1 100644
--- a/docs/src/examples/components/Input/Types/index.tsx
+++ b/docs/src/examples/components/Input/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Input/Variations/InputExampleClearable.shorthand.tsx b/docs/src/examples/components/Input/Variations/InputExampleClearable.shorthand.tsx
index ee6267fadf..09202edf92 100644
--- a/docs/src/examples/components/Input/Variations/InputExampleClearable.shorthand.tsx
+++ b/docs/src/examples/components/Input/Variations/InputExampleClearable.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Input } from '@stardust-ui/react'
 
 const InputExampleClearable = () => <Input clearable placeholder="Search..." />
diff --git a/docs/src/examples/components/Input/Variations/InputExampleFluid.shorthand.tsx b/docs/src/examples/components/Input/Variations/InputExampleFluid.shorthand.tsx
index daee65cd4c..c2a3ef554a 100644
--- a/docs/src/examples/components/Input/Variations/InputExampleFluid.shorthand.tsx
+++ b/docs/src/examples/components/Input/Variations/InputExampleFluid.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Input } from '@stardust-ui/react'
 
 const InputExampleFluid = () => <Input fluid icon="search" placeholder="Search..." />
diff --git a/docs/src/examples/components/Input/Variations/InputExampleIcon.shorthand.tsx b/docs/src/examples/components/Input/Variations/InputExampleIcon.shorthand.tsx
index a929a4a0ef..06f53d7b2e 100644
--- a/docs/src/examples/components/Input/Variations/InputExampleIcon.shorthand.tsx
+++ b/docs/src/examples/components/Input/Variations/InputExampleIcon.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Input } from '@stardust-ui/react'
 
 const InputExampleIcon = () => <Input icon="search" placeholder="Search..." />
diff --git a/docs/src/examples/components/Input/Variations/InputExampleIconClearable.shorthand.tsx b/docs/src/examples/components/Input/Variations/InputExampleIconClearable.shorthand.tsx
index 3cf8b29de8..788793aacb 100644
--- a/docs/src/examples/components/Input/Variations/InputExampleIconClearable.shorthand.tsx
+++ b/docs/src/examples/components/Input/Variations/InputExampleIconClearable.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Input } from '@stardust-ui/react'
 
 const InputExampleIconClearableShorthand = () => (
diff --git a/docs/src/examples/components/Input/Variations/InputExampleIconPosition.shorthand.tsx b/docs/src/examples/components/Input/Variations/InputExampleIconPosition.shorthand.tsx
index cd469ec22b..8586d64a50 100644
--- a/docs/src/examples/components/Input/Variations/InputExampleIconPosition.shorthand.tsx
+++ b/docs/src/examples/components/Input/Variations/InputExampleIconPosition.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Input } from '@stardust-ui/react'
 
 const InputExampleIconPosition = () => (
diff --git a/docs/src/examples/components/Input/Variations/InputExampleInline.shorthand.tsx b/docs/src/examples/components/Input/Variations/InputExampleInline.shorthand.tsx
index 68cbda4605..508644c312 100644
--- a/docs/src/examples/components/Input/Variations/InputExampleInline.shorthand.tsx
+++ b/docs/src/examples/components/Input/Variations/InputExampleInline.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Input } from '@stardust-ui/react'
 
 const InputExampleInline = () => (
diff --git a/docs/src/examples/components/Input/Variations/InputExampleInlineIconClearable.shorthand.tsx b/docs/src/examples/components/Input/Variations/InputExampleInlineIconClearable.shorthand.tsx
index 55e7e29704..c72e7f373e 100644
--- a/docs/src/examples/components/Input/Variations/InputExampleInlineIconClearable.shorthand.tsx
+++ b/docs/src/examples/components/Input/Variations/InputExampleInlineIconClearable.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Input } from '@stardust-ui/react'
 
 const InputExampleInline = () => (
diff --git a/docs/src/examples/components/Input/Variations/InputExampleInputSlot.shorthand.tsx b/docs/src/examples/components/Input/Variations/InputExampleInputSlot.shorthand.tsx
index fb461ab694..f577d038f3 100644
--- a/docs/src/examples/components/Input/Variations/InputExampleInputSlot.shorthand.tsx
+++ b/docs/src/examples/components/Input/Variations/InputExampleInputSlot.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Input, Text } from '@stardust-ui/react'
 
 const inputStyles = { color: 'blue', background: 'yellow' }
diff --git a/docs/src/examples/components/Input/Variations/InputExampleTargeting.shorthand.tsx b/docs/src/examples/components/Input/Variations/InputExampleTargeting.shorthand.tsx
index 798b1dca3f..4d6dc11f7c 100644
--- a/docs/src/examples/components/Input/Variations/InputExampleTargeting.shorthand.tsx
+++ b/docs/src/examples/components/Input/Variations/InputExampleTargeting.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Input, Text } from '@stardust-ui/react'
 
 // This object contains properties that will be applied to the input
diff --git a/docs/src/examples/components/Input/Variations/InputExampleWrapperSlot.shorthand.tsx b/docs/src/examples/components/Input/Variations/InputExampleWrapperSlot.shorthand.tsx
index 51d8551e72..56705c27f4 100644
--- a/docs/src/examples/components/Input/Variations/InputExampleWrapperSlot.shorthand.tsx
+++ b/docs/src/examples/components/Input/Variations/InputExampleWrapperSlot.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Grid, Input, Text } from '@stardust-ui/react'
 
 const InputExampleWrapperSlot = () => (
diff --git a/docs/src/examples/components/Input/Variations/index.tsx b/docs/src/examples/components/Input/Variations/index.tsx
index 9d4109f87d..5133a17c37 100644
--- a/docs/src/examples/components/Input/Variations/index.tsx
+++ b/docs/src/examples/components/Input/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Input/index.tsx b/docs/src/examples/components/Input/index.tsx
index 71f4bdf8f5..809fce5d78 100644
--- a/docs/src/examples/components/Input/index.tsx
+++ b/docs/src/examples/components/Input/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
diff --git a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContent.shorthand.tsx b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContent.shorthand.tsx
index e5d09f15ff..96f3b29626 100644
--- a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContent.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContent.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ItemLayout } from '@stardust-ui/react'
 
 const ItemLayoutExampleContent = () => (
diff --git a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContentMedia.shorthand.tsx b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContentMedia.shorthand.tsx
index 5621f64b60..5f67c5ef90 100644
--- a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContentMedia.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleContentMedia.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ItemLayout } from '@stardust-ui/react'
 
 const ItemLayoutExampleContentMediaShorthand = () => (
diff --git a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleEndMedia.shorthand.tsx b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleEndMedia.shorthand.tsx
index 2f1e199fef..0521285d9a 100644
--- a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleEndMedia.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleEndMedia.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ItemLayout } from '@stardust-ui/react'
 
 const ellipsis = <span>&hellip;</span>
diff --git a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeader.shorthand.tsx b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeader.shorthand.tsx
index 196b8a06ea..822ddb9958 100644
--- a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeader.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeader.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ItemLayout } from '@stardust-ui/react'
 
 const ItemLayoutExampleHeader = () => <ItemLayout header="Irving Kuhic" />
diff --git a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderContent.shorthand.tsx b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderContent.shorthand.tsx
index 344ecfa696..f92be3420f 100644
--- a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderContent.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderContent.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ItemLayout } from '@stardust-ui/react'
 
 const ItemLayoutExampleHeaderContentShorthand = () => (
diff --git a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderMedia.shorthand.tsx b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderMedia.shorthand.tsx
index d31694c9f5..be22f8faad 100644
--- a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderMedia.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleHeaderMedia.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ItemLayout } from '@stardust-ui/react'
 
 const ItemLayoutExampleHeaderMediaShorthand = () => (
diff --git a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleMedia.shorthand.tsx b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleMedia.shorthand.tsx
index 17a7acef90..19ec06a42f 100644
--- a/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleMedia.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Content/ItemLayoutExampleMedia.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ItemLayout, Image } from '@stardust-ui/react'
 
 const ItemLayoutExampleMediaShorthand = () => (
diff --git a/docs/src/examples/components/ItemLayout/Content/index.tsx b/docs/src/examples/components/ItemLayout/Content/index.tsx
index a065888d54..b30a8c62e7 100644
--- a/docs/src/examples/components/ItemLayout/Content/index.tsx
+++ b/docs/src/examples/components/ItemLayout/Content/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.knobs.tsx b/docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.knobs.tsx
index e542e50ac9..fb920e3292 100644
--- a/docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.knobs.tsx
+++ b/docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.knobs.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import Knobs from 'docs/src/components/Knobs/Knobs'
 
diff --git a/docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.shorthand.tsx b/docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.shorthand.tsx
index 68a8c3c005..915b908b34 100644
--- a/docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ItemLayout, Image } from '@stardust-ui/react'
 
 const ellipsis = <span>&hellip;</span>
diff --git a/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.knobs.tsx b/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.knobs.tsx
index 7fc967d664..08c7ae7389 100644
--- a/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.knobs.tsx
+++ b/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.knobs.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import Knobs from 'docs/src/components/Knobs/Knobs'
 
 const ItemLayoutExampleSelectionKnobs: any = props => {
diff --git a/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx b/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx
index 71b31dda18..f6213511ec 100644
--- a/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Types/ItemLayoutExampleSelection.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ItemLayout, Image } from '@stardust-ui/react'
 
 const selection = knobs => (knobs === undefined ? true : knobs.selection)
diff --git a/docs/src/examples/components/ItemLayout/Types/index.tsx b/docs/src/examples/components/ItemLayout/Types/index.tsx
index 9567b55a1c..b8b3f1a780 100644
--- a/docs/src/examples/components/ItemLayout/Types/index.tsx
+++ b/docs/src/examples/components/ItemLayout/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.knobs.tsx b/docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.knobs.tsx
index 5c9eb45cbd..329a4baff8 100644
--- a/docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.knobs.tsx
+++ b/docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.knobs.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import Knobs from 'docs/src/components/Knobs/Knobs'
 
 const ItemLayoutExampleKnobs: any = props => {
diff --git a/docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.shorthand.tsx b/docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.shorthand.tsx
index f0acd77316..50c0ff7d36 100644
--- a/docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.shorthand.tsx
+++ b/docs/src/examples/components/ItemLayout/Variations/ItemLayoutExampleTruncate.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ItemLayout, Image } from '@stardust-ui/react'
 
 const ellipsis = <span>&hellip;</span>
diff --git a/docs/src/examples/components/ItemLayout/Variations/index.tsx b/docs/src/examples/components/ItemLayout/Variations/index.tsx
index ef8327f6b5..b12846b0f0 100644
--- a/docs/src/examples/components/ItemLayout/Variations/index.tsx
+++ b/docs/src/examples/components/ItemLayout/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/ItemLayout/index.tsx b/docs/src/examples/components/ItemLayout/index.tsx
index b832e7e5eb..b146959cb1 100644
--- a/docs/src/examples/components/ItemLayout/index.tsx
+++ b/docs/src/examples/components/ItemLayout/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Content from './Content'
 import Variations from './Variations'
diff --git a/docs/src/examples/components/Label/Content/LabelExample.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExample.shorthand.tsx
index b09a01baa1..0e22dd3903 100644
--- a/docs/src/examples/components/Label/Content/LabelExample.shorthand.tsx
+++ b/docs/src/examples/components/Label/Content/LabelExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Label } from '@stardust-ui/react'
 
 const LabelExampleShorthand = () => <Label content="You have 23 emails" />
diff --git a/docs/src/examples/components/Label/Content/LabelExample.tsx b/docs/src/examples/components/Label/Content/LabelExample.tsx
index 2d1fd3fcdd..20996ba277 100644
--- a/docs/src/examples/components/Label/Content/LabelExample.tsx
+++ b/docs/src/examples/components/Label/Content/LabelExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Label } from '@stardust-ui/react'
 
 const LabelExample = () => <Label>You have 23 emails</Label>
diff --git a/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx
index a818f06a31..38370a40bd 100644
--- a/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Label } from '@stardust-ui/react'
 
 class LabelExampleContentCustomizationShorthand extends React.Component {
diff --git a/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx
index 71071a9432..f5712319d9 100644
--- a/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx
+++ b/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Label } from '@stardust-ui/react'
 
 const LabelExampleIconShorthand = () => <Label content="Label with icon" icon="close" />
diff --git a/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx
index 7d7dcf0513..e251550790 100644
--- a/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx
+++ b/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Label } from '@stardust-ui/react'
 
 const LabelExampleIconPositionShorthand = () => (
diff --git a/docs/src/examples/components/Label/Content/LabelExampleImage.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleImage.shorthand.tsx
index eb82161e09..acbb5affdb 100644
--- a/docs/src/examples/components/Label/Content/LabelExampleImage.shorthand.tsx
+++ b/docs/src/examples/components/Label/Content/LabelExampleImage.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Label } from '@stardust-ui/react'
 
 const LabelExampleImageShorthand = () => (
diff --git a/docs/src/examples/components/Label/Content/LabelExampleImagePosition.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleImagePosition.shorthand.tsx
index 14c7993747..503f969cab 100644
--- a/docs/src/examples/components/Label/Content/LabelExampleImagePosition.shorthand.tsx
+++ b/docs/src/examples/components/Label/Content/LabelExampleImagePosition.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Label } from '@stardust-ui/react'
 
 const LabelExampleImageShorthand = () => (
diff --git a/docs/src/examples/components/Label/Content/index.tsx b/docs/src/examples/components/Label/Content/index.tsx
index 64cafbca7e..94a98109eb 100644
--- a/docs/src/examples/components/Label/Content/index.tsx
+++ b/docs/src/examples/components/Label/Content/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleCircular.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleCircular.shorthand.tsx
index f43571c4ae..96cd8545db 100644
--- a/docs/src/examples/components/Label/Variations/LabelExampleCircular.shorthand.tsx
+++ b/docs/src/examples/components/Label/Variations/LabelExampleCircular.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Label } from '@stardust-ui/react'
 
 const LabelExampleCircularShorthand = () => <Label circular content="Circular label" />
diff --git a/docs/src/examples/components/Label/Variations/index.tsx b/docs/src/examples/components/Label/Variations/index.tsx
index 9ce0989539..28aa3f55bd 100644
--- a/docs/src/examples/components/Label/Variations/index.tsx
+++ b/docs/src/examples/components/Label/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Label/index.tsx b/docs/src/examples/components/Label/index.tsx
index 83d4865f48..242a85fca9 100644
--- a/docs/src/examples/components/Label/index.tsx
+++ b/docs/src/examples/components/Label/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Content from './Content'
 import Variations from './Variations'
 
diff --git a/docs/src/examples/components/Layout/Types/LayoutExample.tsx b/docs/src/examples/components/Layout/Types/LayoutExample.tsx
index 7b45396227..31bcf22497 100644
--- a/docs/src/examples/components/Layout/Types/LayoutExample.tsx
+++ b/docs/src/examples/components/Layout/Types/LayoutExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Layout } from '@stardust-ui/react'
 
 const LayoutExample = () => (
diff --git a/docs/src/examples/components/Layout/Types/LayoutExampleVertical.tsx b/docs/src/examples/components/Layout/Types/LayoutExampleVertical.tsx
index 8089742e93..36850adc92 100644
--- a/docs/src/examples/components/Layout/Types/LayoutExampleVertical.tsx
+++ b/docs/src/examples/components/Layout/Types/LayoutExampleVertical.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Layout } from '@stardust-ui/react'
 
 const LayoutExampleVertical = () => (
diff --git a/docs/src/examples/components/Layout/Types/index.tsx b/docs/src/examples/components/Layout/Types/index.tsx
index cababa40e4..03090ced19 100644
--- a/docs/src/examples/components/Layout/Types/index.tsx
+++ b/docs/src/examples/components/Layout/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Layout/Variations/LayoutExample.tsx b/docs/src/examples/components/Layout/Variations/LayoutExample.tsx
index 7b45396227..31bcf22497 100644
--- a/docs/src/examples/components/Layout/Variations/LayoutExample.tsx
+++ b/docs/src/examples/components/Layout/Variations/LayoutExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Layout } from '@stardust-ui/react'
 
 const LayoutExample = () => (
diff --git a/docs/src/examples/components/Layout/Variations/LayoutExampleDisappearing.tsx b/docs/src/examples/components/Layout/Variations/LayoutExampleDisappearing.tsx
index d8d6d5bd4f..6d69ac9a1c 100644
--- a/docs/src/examples/components/Layout/Variations/LayoutExampleDisappearing.tsx
+++ b/docs/src/examples/components/Layout/Variations/LayoutExampleDisappearing.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Layout } from '@stardust-ui/react'
 
 const LayoutExampleDisappearing = () => (
diff --git a/docs/src/examples/components/Layout/Variations/LayoutExampleGap.knobs.tsx b/docs/src/examples/components/Layout/Variations/LayoutExampleGap.knobs.tsx
index 97b423d8bf..dd447c5b34 100644
--- a/docs/src/examples/components/Layout/Variations/LayoutExampleGap.knobs.tsx
+++ b/docs/src/examples/components/Layout/Variations/LayoutExampleGap.knobs.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 
 import Knobs from 'docs/src/components/Knobs/Knobs'
 
diff --git a/docs/src/examples/components/Layout/Variations/LayoutExampleGap.tsx b/docs/src/examples/components/Layout/Variations/LayoutExampleGap.tsx
index 88e6cdb25c..f570f0ddb1 100644
--- a/docs/src/examples/components/Layout/Variations/LayoutExampleGap.tsx
+++ b/docs/src/examples/components/Layout/Variations/LayoutExampleGap.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Layout } from '@stardust-ui/react'
 
 const LayoutExampleGap = ({ knobs }) => (
diff --git a/docs/src/examples/components/Layout/Variations/LayoutExampleReducing.tsx b/docs/src/examples/components/Layout/Variations/LayoutExampleReducing.tsx
index 43d121b6aa..ad1150578c 100644
--- a/docs/src/examples/components/Layout/Variations/LayoutExampleReducing.tsx
+++ b/docs/src/examples/components/Layout/Variations/LayoutExampleReducing.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Layout } from '@stardust-ui/react'
 
 const LayoutExampleReducing = () => (
diff --git a/docs/src/examples/components/Layout/Variations/index.tsx b/docs/src/examples/components/Layout/Variations/index.tsx
index 7bade7742f..ecb865b7d2 100644
--- a/docs/src/examples/components/Layout/Variations/index.tsx
+++ b/docs/src/examples/components/Layout/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Layout/index.tsx b/docs/src/examples/components/Layout/index.tsx
index 82e725a7e4..19cef61c86 100644
--- a/docs/src/examples/components/Layout/index.tsx
+++ b/docs/src/examples/components/Layout/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
diff --git a/docs/src/examples/components/List/Content/ListExampleContent.shorthand.tsx b/docs/src/examples/components/List/Content/ListExampleContent.shorthand.tsx
index 734795dcad..eadfa828dd 100644
--- a/docs/src/examples/components/List/Content/ListExampleContent.shorthand.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleContent.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/List/Content/ListExampleContent.tsx b/docs/src/examples/components/List/Content/ListExampleContent.tsx
index 080e993e1f..582de7e6a9 100644
--- a/docs/src/examples/components/List/Content/ListExampleContent.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const ListExample = () => (
diff --git a/docs/src/examples/components/List/Content/ListExampleContentMedia.shorthand.tsx b/docs/src/examples/components/List/Content/ListExampleContentMedia.shorthand.tsx
index 0e45aeb087..678572199f 100644
--- a/docs/src/examples/components/List/Content/ListExampleContentMedia.shorthand.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleContentMedia.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx b/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx
index fe621ba75f..57e9d4e79c 100644
--- a/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleContentMedia.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const ListExample = () => (
diff --git a/docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx b/docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx
index 6915275332..2727634f9e 100644
--- a/docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const ellipsis = <span>&hellip;</span>
diff --git a/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx b/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
index 3b99d18770..c9170434d7 100644
--- a/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const ellipsis = <span>&hellip;</span>
diff --git a/docs/src/examples/components/List/Content/ListExampleHeader.shorthand.tsx b/docs/src/examples/components/List/Content/ListExampleHeader.shorthand.tsx
index e9fff531d9..b271669ab7 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeader.shorthand.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeader.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/List/Content/ListExampleHeader.tsx b/docs/src/examples/components/List/Content/ListExampleHeader.tsx
index 75efdd6438..153ea18210 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeader.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const ListExample = () => (
diff --git a/docs/src/examples/components/List/Content/ListExampleHeaderContent.shorthand.tsx b/docs/src/examples/components/List/Content/ListExampleHeaderContent.shorthand.tsx
index cc3a3fe2ea..529bf4b900 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeaderContent.shorthand.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeaderContent.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx b/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx
index d87969f047..14fc0c0e91 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeaderContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const ListExample = () => (
diff --git a/docs/src/examples/components/List/Content/ListExampleHeaderMedia.shorthand.tsx b/docs/src/examples/components/List/Content/ListExampleHeaderMedia.shorthand.tsx
index a270324a29..31230e112d 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeaderMedia.shorthand.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeaderMedia.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx b/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx
index 63481ec142..ba61546084 100644
--- a/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleHeaderMedia.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List } from '@stardust-ui/react'
 
 const ListExample = () => (
diff --git a/docs/src/examples/components/List/Content/ListExampleMedia.shorthand.tsx b/docs/src/examples/components/List/Content/ListExampleMedia.shorthand.tsx
index 11774bde8a..51aaa9e155 100644
--- a/docs/src/examples/components/List/Content/ListExampleMedia.shorthand.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleMedia.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List, Image } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/List/Content/ListExampleMedia.tsx b/docs/src/examples/components/List/Content/ListExampleMedia.tsx
index 8a9acff4d6..61f2d0d620 100644
--- a/docs/src/examples/components/List/Content/ListExampleMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleMedia.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List, Image } from '@stardust-ui/react'
 
 const ListExampleMedia = () => (
diff --git a/docs/src/examples/components/List/Content/index.tsx b/docs/src/examples/components/List/Content/index.tsx
index f91498aa82..f765153970 100644
--- a/docs/src/examples/components/List/Content/index.tsx
+++ b/docs/src/examples/components/List/Content/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/List/Types/ListExample.knobs.tsx b/docs/src/examples/components/List/Types/ListExample.knobs.tsx
index fff0fa1def..4f54842959 100644
--- a/docs/src/examples/components/List/Types/ListExample.knobs.tsx
+++ b/docs/src/examples/components/List/Types/ListExample.knobs.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import Knobs from 'docs/src/components/Knobs/Knobs'
 
 const ListExampleKnobs: any = props => {
diff --git a/docs/src/examples/components/List/Types/ListExample.shorthand.tsx b/docs/src/examples/components/List/Types/ListExample.shorthand.tsx
index 10f591fff3..bb3e376555 100644
--- a/docs/src/examples/components/List/Types/ListExample.shorthand.tsx
+++ b/docs/src/examples/components/List/Types/ListExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List, Image } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/List/Types/ListExample.tsx b/docs/src/examples/components/List/Types/ListExample.tsx
index 250ab8ef2a..4190be53c2 100644
--- a/docs/src/examples/components/List/Types/ListExample.tsx
+++ b/docs/src/examples/components/List/Types/ListExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List, Image } from '@stardust-ui/react'
 
 const ListExampleSelectable = ({ knobs }) => (
diff --git a/docs/src/examples/components/List/Types/ListExampleSelectable.shorthand.tsx b/docs/src/examples/components/List/Types/ListExampleSelectable.shorthand.tsx
index 49a526710e..804378dfa8 100644
--- a/docs/src/examples/components/List/Types/ListExampleSelectable.shorthand.tsx
+++ b/docs/src/examples/components/List/Types/ListExampleSelectable.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List, Image } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/List/Types/ListExampleSelectable.tsx b/docs/src/examples/components/List/Types/ListExampleSelectable.tsx
index 55029d1256..d4cb6ce83c 100644
--- a/docs/src/examples/components/List/Types/ListExampleSelectable.tsx
+++ b/docs/src/examples/components/List/Types/ListExampleSelectable.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List, Image } from '@stardust-ui/react'
 
 const ListExampleSelectable = () => (
diff --git a/docs/src/examples/components/List/Variations/ListExampleTruncate.knobs.tsx b/docs/src/examples/components/List/Variations/ListExampleTruncate.knobs.tsx
index acacd25ee9..785541b03c 100644
--- a/docs/src/examples/components/List/Variations/ListExampleTruncate.knobs.tsx
+++ b/docs/src/examples/components/List/Variations/ListExampleTruncate.knobs.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import * as React from 'react'
 import Knobs from 'docs/src/components/Knobs/Knobs'
 
 const ListExampleKnobs: any = props => {
diff --git a/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx b/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx
index 53ef0761ce..d7ec5288f3 100644
--- a/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx
+++ b/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List, Image } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx b/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx
index ffa3d8095c..7525c426c1 100644
--- a/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx
+++ b/docs/src/examples/components/List/Variations/ListExampleTruncate.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { List, Image } from '@stardust-ui/react'
 
 const ListExample = ({ knobs }) => (
diff --git a/docs/src/examples/components/List/Variations/index.tsx b/docs/src/examples/components/List/Variations/index.tsx
index 0aaed2aca1..6015d3abbe 100644
--- a/docs/src/examples/components/List/Variations/index.tsx
+++ b/docs/src/examples/components/List/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/List/index.tsx b/docs/src/examples/components/List/index.tsx
index b84ada0d3f..a6ac21d459 100644
--- a/docs/src/examples/components/List/index.tsx
+++ b/docs/src/examples/components/List/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Content from './Content'
 import Variations from './Variations'
diff --git a/docs/src/examples/components/Menu/Types/MenuExample.shorthand.tsx b/docs/src/examples/components/Menu/Types/MenuExample.shorthand.tsx
index 763ee17692..9e5b4550b0 100644
--- a/docs/src/examples/components/Menu/Types/MenuExample.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Types/MenuExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Types/MenuExamplePrimary.shorthand.tsx b/docs/src/examples/components/Menu/Types/MenuExamplePrimary.shorthand.tsx
index 34c8b7aa32..4115417db8 100644
--- a/docs/src/examples/components/Menu/Types/MenuExamplePrimary.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Types/MenuExamplePrimary.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Types/MenuExampleVertical.shorthand.tsx b/docs/src/examples/components/Menu/Types/MenuExampleVertical.shorthand.tsx
index be228e15d8..9d3bfd1eb6 100644
--- a/docs/src/examples/components/Menu/Types/MenuExampleVertical.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Types/MenuExampleVertical.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Types/index.tsx b/docs/src/examples/components/Menu/Types/index.tsx
index 8ce62a8f8d..632620ebd3 100644
--- a/docs/src/examples/components/Menu/Types/index.tsx
+++ b/docs/src/examples/components/Menu/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleIconOnly.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleIconOnly.shorthand.tsx
index 80dcc4cfa6..98a0918005 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleIconOnly.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleIconOnly.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimary.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimary.shorthand.tsx
index 328fb82560..f061c078ef 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimary.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimary.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimaryInverted.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimaryInverted.shorthand.tsx
index 733f7a7b52..79df9ddee8 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimaryInverted.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimaryInverted.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyVertical.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyVertical.shorthand.tsx
index 280e8e2d10..2bd76ff308 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyVertical.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyVertical.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyVerticalPrimary.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyVerticalPrimary.shorthand.tsx
index d588174434..32a2c81c11 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyVerticalPrimary.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyVerticalPrimary.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePills.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePills.shorthand.tsx
index 0246c4fc8b..2f5a4b6619 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExamplePills.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExamplePills.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimary.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimary.shorthand.tsx
index d1b8e31b5f..bbe3ee9cf9 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimary.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimary.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimaryVertical.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimaryVertical.shorthand.tsx
index 1dbfe80bc7..01753dcd9c 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimaryVertical.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimaryVertical.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePillsVertical.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePillsVertical.shorthand.tsx
index a51f5278e5..3977b0e9ea 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExamplePillsVertical.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExamplePillsVertical.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePointing.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePointing.shorthand.tsx
index e7a90c495c..ba9a0227e2 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExamplePointing.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExamplePointing.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePointingPrimary.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePointingPrimary.shorthand.tsx
index 3de856b237..3017d7f235 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExamplePointingPrimary.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExamplePointingPrimary.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePointingStart.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePointingStart.shorthand.tsx
index a24680cea7..d67fb352bc 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExamplePointingStart.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExamplePointingStart.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePointingStartPrimary.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePointingStartPrimary.shorthand.tsx
index 95b2b789e7..56ab9dfd38 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExamplePointingStartPrimary.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExamplePointingStartPrimary.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleTabList.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleTabList.shorthand.tsx
index 99c6b61339..30617b767f 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleTabList.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleTabList.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu, tabBehavior, tabListBehavior } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleToolbar.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleToolbar.shorthand.tsx
index 668a266e0a..746ea86e4b 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleToolbar.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleToolbar.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu, toolbarBehavior, toolbarButtonBehavior } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleUnderlined.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleUnderlined.shorthand.tsx
index ab510e767a..89cc82321b 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleUnderlined.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleUnderlined.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleUnderlinedPrimary.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleUnderlinedPrimary.shorthand.tsx
index 7cd8303c0e..5474fe0741 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleUnderlinedPrimary.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleUnderlinedPrimary.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleVerticalFluid.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleVerticalFluid.shorthand.tsx
index aa186e4f22..5b5c021f67 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleVerticalFluid.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleVerticalFluid.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand.tsx
index a9bf96ca97..1ef312f098 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointingEnd.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointingEnd.shorthand.tsx
index 090b26e170..4d5c3dda53 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointingEnd.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointingEnd.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleWithIcons.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleWithIcons.shorthand.tsx
index e74f9afec2..c000365448 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleWithIcons.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleWithIcons.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleWithIconsVertical.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleWithIconsVertical.shorthand.tsx
index 5cc6967396..a3f505f24a 100644
--- a/docs/src/examples/components/Menu/Variations/MenuExampleWithIconsVertical.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Variations/MenuExampleWithIconsVertical.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
diff --git a/docs/src/examples/components/Menu/Variations/index.tsx b/docs/src/examples/components/Menu/Variations/index.tsx
index 0078e858af..32d2f205fe 100644
--- a/docs/src/examples/components/Menu/Variations/index.tsx
+++ b/docs/src/examples/components/Menu/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Menu/index.tsx b/docs/src/examples/components/Menu/index.tsx
index f6fed55060..4537494cf6 100644
--- a/docs/src/examples/components/Menu/index.tsx
+++ b/docs/src/examples/components/Menu/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
diff --git a/docs/src/examples/components/Popup/Types/PopupContentWrapperExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupContentWrapperExample.shorthand.tsx
index d561d0bf1f..e6a29204c7 100644
--- a/docs/src/examples/components/Popup/Types/PopupContentWrapperExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupContentWrapperExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Popup } from '@stardust-ui/react'
 
 const PopupContentWrapperExample = () => {
diff --git a/docs/src/examples/components/Popup/Types/PopupContentWrapperExample.tsx b/docs/src/examples/components/Popup/Types/PopupContentWrapperExample.tsx
index cc82192aa2..1abaccff03 100644
--- a/docs/src/examples/components/Popup/Types/PopupContentWrapperExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupContentWrapperExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Popup } from '@stardust-ui/react'
 
 const PopupContentWrapperExample = () => {
diff --git a/docs/src/examples/components/Popup/Types/PopupControlledExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupControlledExample.shorthand.tsx
index f05eac9b93..198daebfac 100644
--- a/docs/src/examples/components/Popup/Types/PopupControlledExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupControlledExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Input, Popup } from '@stardust-ui/react'
 
 class PopupControlledExample extends React.Component<any, any> {
diff --git a/docs/src/examples/components/Popup/Types/PopupControlledExample.tsx b/docs/src/examples/components/Popup/Types/PopupControlledExample.tsx
index bacca4ea6d..5634fff601 100644
--- a/docs/src/examples/components/Popup/Types/PopupControlledExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupControlledExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Input, Popup } from '@stardust-ui/react'
 
 class PopupControlledExample extends React.Component<any, any> {
diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
index d1e7896b9a..5492c62740 100644
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Popup, Button, Divider, Text, Grid } from '@stardust-ui/react'
 import { findDOMNode } from 'react-dom'
 
diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
index 016716a048..a849c2ded8 100644
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Popup, Button, Divider, Text, Grid } from '@stardust-ui/react'
 import { findDOMNode } from 'react-dom'
 
diff --git a/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx
index 46456fcefe..67b5e8bf9f 100644
--- a/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Popup } from '@stardust-ui/react'
 
 const PopupExample = () => <Popup trigger={<Button icon="expand" />} content="Hello from popup!" />
diff --git a/docs/src/examples/components/Popup/Types/PopupExample.tsx b/docs/src/examples/components/Popup/Types/PopupExample.tsx
index 5175aeb4d2..5e5c9b7ff4 100644
--- a/docs/src/examples/components/Popup/Types/PopupExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Popup } from '@stardust-ui/react'
 
 const PopupExample = () => (
diff --git a/docs/src/examples/components/Popup/Types/PopupFocusTrapExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupFocusTrapExample.shorthand.tsx
index 7222927a42..7567e8ade2 100644
--- a/docs/src/examples/components/Popup/Types/PopupFocusTrapExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupFocusTrapExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Input, Header, Popup, popupFocusTrapBehavior } from '@stardust-ui/react'
 
 const PopupFocusTrapExample = () => (
diff --git a/docs/src/examples/components/Popup/Types/index.tsx b/docs/src/examples/components/Popup/Types/index.tsx
index 67e06eb488..06310be153 100644
--- a/docs/src/examples/components/Popup/Types/index.tsx
+++ b/docs/src/examples/components/Popup/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
diff --git a/docs/src/examples/components/Popup/Variations/PopupExampleOffset.shorthand.tsx b/docs/src/examples/components/Popup/Variations/PopupExampleOffset.shorthand.tsx
index d0901e6e01..1c940a2676 100644
--- a/docs/src/examples/components/Popup/Variations/PopupExampleOffset.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExampleOffset.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Grid, Popup } from '@stardust-ui/react'
 
 const renderButton = rotateArrowUp => (
diff --git a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
index d3d4e44603..29c10911e8 100644
--- a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Grid, Popup } from '@stardust-ui/react'
 
 const PopupWithButton = props => {
diff --git a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
index 64de34d011..bbce0f5ee8 100644
--- a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Grid, Popup } from '@stardust-ui/react'
 
 const PopupArrowExample = props => {
diff --git a/docs/src/examples/components/Popup/Variations/index.tsx b/docs/src/examples/components/Popup/Variations/index.tsx
index 1ba1f32107..43dadfa109 100644
--- a/docs/src/examples/components/Popup/Variations/index.tsx
+++ b/docs/src/examples/components/Popup/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
diff --git a/docs/src/examples/components/Popup/index.tsx b/docs/src/examples/components/Popup/index.tsx
index 37e5e811f9..2e513a3171 100644
--- a/docs/src/examples/components/Popup/index.tsx
+++ b/docs/src/examples/components/Popup/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
 
diff --git a/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx b/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx
index fa47e224a9..1ccc934388 100644
--- a/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
 
 class PortalExamplePortal extends React.Component {
diff --git a/docs/src/examples/components/Portal/Types/PortalExample.tsx b/docs/src/examples/components/Portal/Types/PortalExample.tsx
index cc642bb397..4ce741da1f 100644
--- a/docs/src/examples/components/Portal/Types/PortalExample.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExample.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
 
 class PortalExamplePortal extends React.Component {
diff --git a/docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx b/docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx
index e4b40bc9e4..5adfd9d14c 100644
--- a/docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExampleControlled.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
 
 class PortalExampleControlled extends React.Component {
diff --git a/docs/src/examples/components/Portal/Types/PortalExampleControlled.tsx b/docs/src/examples/components/Portal/Types/PortalExampleControlled.tsx
index 5bebb6ae2a..fab04f74ed 100644
--- a/docs/src/examples/components/Portal/Types/PortalExampleControlled.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExampleControlled.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Divider, Header, Label, Portal } from '@stardust-ui/react'
 
 class PortalExampleControlled extends React.Component {
diff --git a/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx b/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx
index cc3482d16c..f4b1503f2d 100644
--- a/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Header, Portal } from '@stardust-ui/react'
 
 class PortalExampleFocusTrapped extends React.Component {
diff --git a/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.tsx b/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.tsx
index b05754d672..4d022f0b27 100644
--- a/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.tsx
+++ b/docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Button, Header, Portal } from '@stardust-ui/react'
 
 class PortalExamplePortal extends React.Component {
diff --git a/docs/src/examples/components/Portal/Types/index.tsx b/docs/src/examples/components/Portal/Types/index.tsx
index 943e6e8f73..97fd8d93be 100644
--- a/docs/src/examples/components/Portal/Types/index.tsx
+++ b/docs/src/examples/components/Portal/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
diff --git a/docs/src/examples/components/Portal/index.tsx b/docs/src/examples/components/Portal/index.tsx
index c3921d2e06..48d92c87ab 100644
--- a/docs/src/examples/components/Portal/index.tsx
+++ b/docs/src/examples/components/Portal/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Types from './Types'
 
 const PortalExamples = () => (
diff --git a/docs/src/examples/components/Provider/Types/ProviderExample.shorthand.tsx b/docs/src/examples/components/Provider/Types/ProviderExample.shorthand.tsx
index a09d4ab1ae..ba99eda4c1 100644
--- a/docs/src/examples/components/Provider/Types/ProviderExample.shorthand.tsx
+++ b/docs/src/examples/components/Provider/Types/ProviderExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Provider } from '@stardust-ui/react'
 
 const theme = { siteVariables: { brand: 'cornflowerblue' } }
diff --git a/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExample.shorthand.tsx b/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExample.shorthand.tsx
index 1f4cb4ee3c..e9f8947491 100644
--- a/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExample.shorthand.tsx
+++ b/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { RadioGroup } from '@stardust-ui/react'
 
 const handleChange = () => {
diff --git a/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExampleChecked.shorthand.tsx b/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExampleChecked.shorthand.tsx
index d00e09bb50..ebedf07ccc 100644
--- a/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExampleChecked.shorthand.tsx
+++ b/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExampleChecked.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { RadioGroup } from '@stardust-ui/react'
 
 const RadioGroupItemExampleCheckedShorthand = () => (
diff --git a/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExampleDisabled.shorthand.tsx b/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExampleDisabled.shorthand.tsx
index 135f9d4621..e40c59aa16 100644
--- a/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExampleDisabled.shorthand.tsx
+++ b/docs/src/examples/components/RadioGroup/Item/RadioGroupItemExampleDisabled.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { RadioGroup } from '@stardust-ui/react'
 
 const RadioGroupItemExampleDisabledShorthand = () => (
diff --git a/docs/src/examples/components/RadioGroup/Item/index.tsx b/docs/src/examples/components/RadioGroup/Item/index.tsx
index f2ee737f61..8c8e515038 100644
--- a/docs/src/examples/components/RadioGroup/Item/index.tsx
+++ b/docs/src/examples/components/RadioGroup/Item/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 import Segment from 'src/components/Segment/Segment'
diff --git a/docs/src/examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand.tsx b/docs/src/examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand.tsx
index 29132a0237..b2dd408a52 100644
--- a/docs/src/examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand.tsx
+++ b/docs/src/examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Divider, RadioGroup } from '@stardust-ui/react'
 
 class RadioGroupColorPickerExample extends React.Component {
diff --git a/docs/src/examples/components/RadioGroup/Types/RadioGroupExample.shorthand.tsx b/docs/src/examples/components/RadioGroup/Types/RadioGroupExample.shorthand.tsx
index 8bf469347c..9513f38c8d 100644
--- a/docs/src/examples/components/RadioGroup/Types/RadioGroupExample.shorthand.tsx
+++ b/docs/src/examples/components/RadioGroup/Types/RadioGroupExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Divider, RadioGroup, Input, Text } from '@stardust-ui/react'
 
 class RadioGroupVerticalExample extends React.Component {
diff --git a/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx b/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx
index 7ed24ff27d..f10664ec4c 100644
--- a/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx
+++ b/docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { Divider, RadioGroup, Input, Text } from '@stardust-ui/react'
 
 class RadioGroupVerticalExample extends React.Component {
diff --git a/docs/src/examples/components/RadioGroup/Types/index.tsx b/docs/src/examples/components/RadioGroup/Types/index.tsx
index d3e459642a..85e593db91 100644
--- a/docs/src/examples/components/RadioGroup/Types/index.tsx
+++ b/docs/src/examples/components/RadioGroup/Types/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 import Segment from 'src/components/Segment/Segment'
diff --git a/docs/src/examples/components/Segment/Variations/index.tsx b/docs/src/examples/components/Segment/Variations/index.tsx
index a3c71784fc..e1c24e5602 100644
--- a/docs/src/examples/components/Segment/Variations/index.tsx
+++ b/docs/src/examples/components/Segment/Variations/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
diff --git a/docs/src/examples/components/Slot/index.tsx b/docs/src/examples/components/Slot/index.tsx
index d8cf2be34c..f4b9ceaef4 100644
--- a/docs/src/examples/components/Slot/index.tsx
+++ b/docs/src/examples/components/Slot/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 export default () => (
   <div>
diff --git a/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx b/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx
index 7997c1b1e0..57b905f5aa 100644
--- a/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx
+++ b/docs/src/examples/components/Text/Variations/TextExampleColor.shorthand.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import _ from 'lodash'
+import * as React from 'react'
+import * as _ from 'lodash'
 import { Text, ProviderConsumer } from '@stardust-ui/react'
 
 const TextExampleColor = () => (
diff --git a/docs/src/examples/components/Text/Variations/TextExampleColor.tsx b/docs/src/examples/components/Text/Variations/TextExampleColor.tsx
index 79b78d5ae2..a0bd4ecd99 100644
--- a/docs/src/examples/components/Text/Variations/TextExampleColor.tsx
+++ b/docs/src/examples/components/Text/Variations/TextExampleColor.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import _ from 'lodash'
+import * as React from 'react'
+import * as _ from 'lodash'
 import { Text, ProviderConsumer } from '@stardust-ui/react'
 
 const TextExampleColor = () => (