{`import ActionMenu from '@pluralsight/ps-design-system-actionmenu/react.js'
-import { BelowLeft } from '@pluralsight/ps-design-system-position/react.js'
+import { BelowLeft } from '@pluralsight/ps-design-system-position'
import Button from '@pluralsight/ps-design-system-button'
function InAppExample() {
diff --git a/packages/site/pages/components/carousel.js b/packages/site/pages/components/carousel.js
index 52ab65db4d..94d991f438 100644
--- a/packages/site/pages/components/carousel.js
+++ b/packages/site/pages/components/carousel.js
@@ -2,7 +2,7 @@ import React from 'react'
import ActionMenu from '@pluralsight/ps-design-system-actionmenu/react.js'
import Avatar from '@pluralsight/ps-design-system-avatar'
-import { BelowRight } from '@pluralsight/ps-design-system-position/react.js'
+import { BelowRight } from '@pluralsight/ps-design-system-position'
import Card from '@pluralsight/ps-design-system-card/react.js'
import Carousel from '@pluralsight/ps-design-system-carousel/react.js'
import Icon from '@pluralsight/ps-design-system-icon/react.js'
diff --git a/packages/site/pages/components/position-portal-example.js b/packages/site/pages/components/position-portal-example.js
index 8b12de6cd5..5cdd497ca4 100644
--- a/packages/site/pages/components/position-portal-example.js
+++ b/packages/site/pages/components/position-portal-example.js
@@ -1,4 +1,4 @@
-import { Above } from '@pluralsight/ps-design-system-position/react.js'
+import { Above } from '@pluralsight/ps-design-system-position'
import core from '@pluralsight/ps-design-system-core'
import Button from '@pluralsight/ps-design-system-button'
import React from 'react'
diff --git a/packages/site/pages/components/position-positions-example.js b/packages/site/pages/components/position-positions-example.js
index 4a4bfa5046..fee44a3d0c 100644
--- a/packages/site/pages/components/position-positions-example.js
+++ b/packages/site/pages/components/position-positions-example.js
@@ -4,10 +4,27 @@ import core from '@pluralsight/ps-design-system-core'
import Button from '@pluralsight/ps-design-system-button'
import Tooltip from '@pluralsight/ps-design-system-tooltip/react.js'
-import * as components from '@pluralsight/ps-design-system-position/react.js'
+import {
+ Above,
+ AboveLeft,
+ AboveRight,
+ BelowLeft,
+ BelowRight,
+ RightOf,
+ LeftOf
+} from '@pluralsight/ps-design-system-position'
import { Head } from '../../src/ui/index.js'
+const components = [
+ Above,
+ AboveLeft,
+ AboveRight,
+ BelowLeft,
+ BelowRight,
+ RightOf,
+ LeftOf
+]
export default function PositionExample(props) {
return (
diff --git a/packages/site/pages/components/position.js b/packages/site/pages/components/position.js
index 936d650204..a5f95e241a 100644
--- a/packages/site/pages/components/position.js
+++ b/packages/site/pages/components/position.js
@@ -6,8 +6,7 @@ import * as Text from '@pluralsight/ps-design-system-text/react.js'
import Theme from '@pluralsight/ps-design-system-theme/react.js'
import Tooltip from '@pluralsight/ps-design-system-tooltip/react.js'
-import * as fns from '@pluralsight/ps-design-system-position/js.js'
-import * as components from '@pluralsight/ps-design-system-position/react.js'
+import { rightOf, Below } from '@pluralsight/ps-design-system-position'
import {
Chrome,
@@ -20,9 +19,6 @@ import {
SectionHeading
} from '../../src/ui/index.js'
-const { rightOf } = fns
-const { Below } = components
-
export default _ => (
@@ -45,7 +41,7 @@ export default _ => (
Below,
LeftOf,
RightOf
-} from '@pluralsight/ps-design-system-position/react'`}
+} from '@pluralsight/ps-design-system-position'`}
Use the JavaScript function to get the positioning style desired.