diff --git a/sites/dev/components/help-us.mjs b/sites/dev/components/help-us.mjs
index 058c4f527e6..f87d944af4b 100644
--- a/sites/dev/components/help-us.mjs
+++ b/sites/dev/components/help-us.mjs
@@ -1,4 +1,4 @@
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 
 export const HelpUs = ({ slug = '/' }) => (
   <details className="mt-4">
diff --git a/sites/dev/pages/404.mjs b/sites/dev/pages/404.mjs
index 250e45b92b4..4422a0703ad 100644
--- a/sites/dev/pages/404.mjs
+++ b/sites/dev/pages/404.mjs
@@ -4,7 +4,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Head from 'next/head'
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { Robot } from 'shared/components/robot/index.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { PageLink } from 'shared/components/page-link.mjs'
 import { BaseLayout, BaseLayoutLeft, BaseLayoutWide } from 'shared/components/base-layout.mjs'
 import { NavLinks, MainSections } from 'shared/components/navigation/sitenav.mjs'
diff --git a/sites/dev/pages/about.mjs b/sites/dev/pages/about.mjs
index 6574a4edd1b..ece0fd635ff 100644
--- a/sites/dev/pages/about.mjs
+++ b/sites/dev/pages/about.mjs
@@ -4,7 +4,7 @@ import { freeSewingConfig } from 'shared/config/freesewing.config.mjs'
 // Components
 import Head from 'next/head'
 import { PageWrapper } from 'shared/components/wrappers/page.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { WebLink } from 'shared/components/web-link.mjs'
 import { NavLinks, Breadcrumbs, MainSections } from 'shared/components/navigation/sitenav.mjs'
 import { FreeSewingIcon } from 'shared/components/icons.mjs'
diff --git a/sites/dev/pages/search.mjs b/sites/dev/pages/search.mjs
index 4448a4baaff..50fc8b6d9aa 100644
--- a/sites/dev/pages/search.mjs
+++ b/sites/dev/pages/search.mjs
@@ -3,7 +3,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { Search } from 'site/components/search.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { PageLink } from 'shared/components/page-link.mjs'
 import { NavLinks, Breadcrumbs, MainSections } from 'shared/components/navigation/sitenav.mjs'
 import {
diff --git a/sites/org/components/crowdin/suggest-language.mjs b/sites/org/components/crowdin/suggest-language.mjs
index 95179f3ab7f..daeb2c699e2 100644
--- a/sites/org/components/crowdin/suggest-language.mjs
+++ b/sites/org/components/crowdin/suggest-language.mjs
@@ -7,7 +7,7 @@ import { useToast } from 'shared/hooks/use-toast.mjs'
 import { useState, useContext } from 'react'
 // Components
 import { ChoiceButton } from 'shared/components/choice-button.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { WebLink } from 'shared/components/web-link.mjs'
 
 export const ns = ['translation', 'locales']
diff --git a/sites/org/components/crowdin/translator-invite.mjs b/sites/org/components/crowdin/translator-invite.mjs
index 1e20a0a11fc..cd23fd14041 100644
--- a/sites/org/components/crowdin/translator-invite.mjs
+++ b/sites/org/components/crowdin/translator-invite.mjs
@@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next'
 // Components
 import { ChoiceButton } from 'shared/components/choice-button.mjs'
 import { I18nIcon } from 'shared/components/icons.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { WebLink } from 'shared/components/web-link.mjs'
 
 export const ns = ['translation', 'locales']
diff --git a/sites/org/pages/confirm/signup-aea/[...confirmation].mjs b/sites/org/pages/confirm/signup-aea/[...confirmation].mjs
index c04b5dbd033..1cf1f55b97f 100644
--- a/sites/org/pages/confirm/signup-aea/[...confirmation].mjs
+++ b/sites/org/pages/confirm/signup-aea/[...confirmation].mjs
@@ -11,7 +11,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout, ns as layoutNs } from 'site/components/layouts/bare.mjs'
 import { WelcomeWrapper } from 'shared/components/wrappers/welcome.mjs'
 import { Spinner } from 'shared/components/spinner.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 
 // Translation namespaces used on this page
 const ns = Array.from(new Set([...pageNs, ...layoutNs, 'confirm', 'locales', 'themes']))
diff --git a/sites/org/pages/confirm/signup/[...confirmation].mjs b/sites/org/pages/confirm/signup/[...confirmation].mjs
index eafe96e85e1..e0eb752a4bb 100644
--- a/sites/org/pages/confirm/signup/[...confirmation].mjs
+++ b/sites/org/pages/confirm/signup/[...confirmation].mjs
@@ -14,7 +14,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout, ns as layoutNs } from 'site/components/layouts/bare.mjs'
 import { WelcomeWrapper } from 'shared/components/wrappers/welcome.mjs'
 import { Spinner } from 'shared/components/spinner.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import {
   GdprProfileDetails,
   GdprMeasurementsDetails,
diff --git a/sites/org/pages/index.mjs b/sites/org/pages/index.mjs
index be5e7bf5db1..24f1bc83ec1 100644
--- a/sites/org/pages/index.mjs
+++ b/sites/org/pages/index.mjs
@@ -4,7 +4,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Head from 'next/head'
 // Components
 import { PageWrapper } from 'shared/components/wrappers/page.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { PageLink } from 'shared/components/page-link.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 
diff --git a/sites/org/pages/profile.mjs b/sites/org/pages/profile.mjs
index a391639e181..e03d8998343 100644
--- a/sites/org/pages/profile.mjs
+++ b/sites/org/pages/profile.mjs
@@ -6,7 +6,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { PageLink } from 'shared/components/page-link.mjs'
 import { BackToAccountButton } from 'shared/components/account/shared.mjs'
 
diff --git a/sites/org/pages/translation/index.mjs b/sites/org/pages/translation/index.mjs
index d93e6127cb7..8c3733e2b25 100644
--- a/sites/org/pages/translation/index.mjs
+++ b/sites/org/pages/translation/index.mjs
@@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next'
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { TranslationStatus } from 'site/components/crowdin/status.mjs'
 import { Translators } from 'site/components/crowdin/translators.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import Link from 'next/link'
 
 // Translation namespaces used on this page
diff --git a/sites/org/pages/typography.mjs b/sites/org/pages/typography.mjs
index 2b4d0b7d13d..bca77743756 100644
--- a/sites/org/pages/typography.mjs
+++ b/sites/org/pages/typography.mjs
@@ -2,7 +2,7 @@
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { Collapse } from 'shared/components/collapse.mjs'
 
 // Translation namespaces used on this page
diff --git a/sites/shared/components/account/apikeys.mjs b/sites/shared/components/account/apikeys.mjs
index 4440df3d12b..ede42c930ad 100644
--- a/sites/shared/components/account/apikeys.mjs
+++ b/sites/shared/components/account/apikeys.mjs
@@ -13,7 +13,7 @@ import { useToast } from 'shared/hooks/use-toast.mjs'
 import { useRouter } from 'next/router'
 // Components
 import { BackToAccountButton, Choice } from './shared.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { WebLink } from 'shared/components/web-link.mjs'
 import { CopyIcon } from 'shared/components/icons.mjs'
 import { Collapse, useCollapseButton } from 'shared/components/collapse.mjs'
diff --git a/sites/shared/components/account/bio.mjs b/sites/shared/components/account/bio.mjs
index 9ec11e25031..60cd5e7f639 100644
--- a/sites/shared/components/account/bio.mjs
+++ b/sites/shared/components/account/bio.mjs
@@ -10,7 +10,7 @@ import { LoadingContext } from 'shared/context/loading-context.mjs'
 // Components
 import Markdown from 'react-markdown'
 import { Icons, welcomeSteps, BackToAccountButton } from './shared.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { SaveSettingsButton } from 'shared/components/buttons/save-settings-button.mjs'
 import { ContinueButton } from 'shared/components/buttons/continue-button.mjs'
 
diff --git a/sites/shared/components/account/consent.mjs b/sites/shared/components/account/consent.mjs
index ce3b54b4eb7..9bafb63c8d4 100644
--- a/sites/shared/components/account/consent.mjs
+++ b/sites/shared/components/account/consent.mjs
@@ -9,7 +9,7 @@ import { useToast } from 'shared/hooks/use-toast.mjs'
 import { LoadingContext } from 'shared/context/loading-context.mjs'
 // Components
 import Link from 'next/link'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { BackToAccountButton } from './shared.mjs'
 import { SaveSettingsButton } from 'shared/components/buttons/save-settings-button.mjs'
 import {
diff --git a/sites/shared/components/account/email.mjs b/sites/shared/components/account/email.mjs
index 04d1b4cdddd..854c05f3792 100644
--- a/sites/shared/components/account/email.mjs
+++ b/sites/shared/components/account/email.mjs
@@ -11,7 +11,7 @@ import { LoadingContext } from 'shared/context/loading-context.mjs'
 import { validateEmail, validateTld } from 'shared/utils.mjs'
 // Components
 import { BackToAccountButton } from './shared.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 
 export const ns = ['account', 'toast']
 
diff --git a/sites/shared/components/account/mfa.mjs b/sites/shared/components/account/mfa.mjs
index a72b4fb0b54..9ec0527c92a 100644
--- a/sites/shared/components/account/mfa.mjs
+++ b/sites/shared/components/account/mfa.mjs
@@ -9,7 +9,7 @@ import { useToast } from 'shared/hooks/use-toast.mjs'
 import { LoadingContext } from 'shared/context/loading-context.mjs'
 // Components
 import { BackToAccountButton } from './shared.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { Bullet } from 'shared/components/bullet.mjs'
 
 export const ns = ['account']
diff --git a/sites/shared/components/account/password.mjs b/sites/shared/components/account/password.mjs
index ae30ee615db..749affa4da0 100644
--- a/sites/shared/components/account/password.mjs
+++ b/sites/shared/components/account/password.mjs
@@ -11,7 +11,7 @@ import { LoadingContext } from 'shared/context/loading-context.mjs'
 import Link from 'next/link'
 import { BackToAccountButton } from './shared.mjs'
 import { SaveSettingsButton } from 'shared/components/buttons/save-settings-button.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { RightIcon } from 'shared/components/icons.mjs'
 
 export const ns = ['account', 'toast']
diff --git a/sites/shared/components/control/tip.mjs b/sites/shared/components/control/tip.mjs
index 8dce1f9fe1f..21c19f3f6b8 100644
--- a/sites/shared/components/control/tip.mjs
+++ b/sites/shared/components/control/tip.mjs
@@ -1,4 +1,4 @@
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { PageLink } from 'shared/components/page-link.mjs'
 import { useTranslation } from 'next-i18next'
 import { RightIcon } from 'shared/components/icons.mjs'
diff --git a/sites/shared/components/error/view.mjs b/sites/shared/components/error/view.mjs
index 763eadcd1cf..4ec1e397b90 100644
--- a/sites/shared/components/error/view.mjs
+++ b/sites/shared/components/error/view.mjs
@@ -1,7 +1,7 @@
 import { useTranslation } from 'next-i18next'
 import { useState } from 'react'
 import { Robot } from 'shared/components/robot/index.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 
 export const ErrorView = ({ children, inspectChildren }) => {
   const { t } = useTranslation(['errors'])
diff --git a/sites/shared/components/errors/404.mjs b/sites/shared/components/errors/404.mjs
index 75bf47be7d4..81ca3a181c1 100644
--- a/sites/shared/components/errors/404.mjs
+++ b/sites/shared/components/errors/404.mjs
@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 import { ModalContext } from 'shared/context/modal-context.mjs'
 import { Robot } from 'shared/components/robot/index.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { MegaphoneIcon } from 'shared/components/icons.mjs'
 import { useTranslation } from 'next-i18next'
 import { ModalProblemReport } from 'shared/components/modal/problem-report.mjs'
diff --git a/sites/shared/components/mdx/figure.mjs b/sites/shared/components/mdx/figure.mjs
index 8b02a1c91af..2fc36df0da7 100644
--- a/sites/shared/components/mdx/figure.mjs
+++ b/sites/shared/components/mdx/figure.mjs
@@ -1,4 +1,4 @@
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { Lightbox } from 'shared/components/lightbox.mjs'
 import { ImageWrapper } from 'shared/components/wrappers/img.mjs'
 
diff --git a/sites/shared/components/mdx/index.mjs b/sites/shared/components/mdx/index.mjs
index 598fc464775..99e458489b8 100644
--- a/sites/shared/components/mdx/index.mjs
+++ b/sites/shared/components/mdx/index.mjs
@@ -1,4 +1,4 @@
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { Highlight } from './highlight.mjs'
 import { YouTube } from './youtube.mjs'
 //import { Figure } from './figure.mjs'
diff --git a/sites/shared/components/pattern/manage.mjs b/sites/shared/components/pattern/manage.mjs
index f3ce25a8041..b2c55e1d964 100644
--- a/sites/shared/components/pattern/manage.mjs
+++ b/sites/shared/components/pattern/manage.mjs
@@ -25,7 +25,7 @@ import { capitalize } from 'shared/utils.mjs'
 import Link from 'next/link'
 import Timeago from 'react-timeago'
 import { PageLink } from 'shared/components/page-link.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { EditRow } from 'shared/components/account/patterns.mjs'
 
 export const ns = [...ns404, 'toast']
diff --git a/sites/shared/components/pattern/preview.mjs b/sites/shared/components/pattern/preview.mjs
index d92808785be..8ac8600de42 100644
--- a/sites/shared/components/pattern/preview.mjs
+++ b/sites/shared/components/pattern/preview.mjs
@@ -1,5 +1,5 @@
 import { useDesign } from 'shared/hooks/use-design.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { themePlugin } from '@freesewing/plugin-theme'
 
 export const PatternPreview = ({ design, settings }) => {
diff --git a/sites/shared/components/sets/set-picker.mjs b/sites/shared/components/sets/set-picker.mjs
index c44e16aa60f..7c8abe6bcb2 100644
--- a/sites/shared/components/sets/set-picker.mjs
+++ b/sites/shared/components/sets/set-picker.mjs
@@ -10,7 +10,7 @@ import { useAccount } from 'shared/hooks/use-account.mjs'
 import { useBackend } from 'shared/hooks/use-backend.mjs'
 // Components
 import { SetCandidate, ns as setNs } from 'shared/components/sets/set-candidate.mjs'
-import { PopoutWrapper } from 'shared/components/wrappers/popout.mjs'
+import { PopoutWrapper } from 'shared/components/wrappers/popout/index.mjs'
 import { Tag } from 'shared/components/tag.mjs'
 import { FilterIcon } from 'shared/components/icons.mjs'
 
diff --git a/sites/shared/components/v3-wip.mjs b/sites/shared/components/v3-wip.mjs
index 77326501508..65b44726421 100644
--- a/sites/shared/components/v3-wip.mjs
+++ b/sites/shared/components/v3-wip.mjs
@@ -1,4 +1,4 @@
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 
 export const V3Wip = () => (
   <Popout fixme>
diff --git a/sites/shared/components/workbench/views/exporting/index.mjs b/sites/shared/components/workbench/views/exporting/index.mjs
index 828cc71553b..113d09b9cf3 100644
--- a/sites/shared/components/workbench/views/exporting/index.mjs
+++ b/sites/shared/components/workbench/views/exporting/index.mjs
@@ -1,6 +1,6 @@
 import { useState, useContext } from 'react'
 import { useTranslation } from 'next-i18next'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { WebLink } from 'shared/components/web-link.mjs'
 import { LoadingContext } from 'shared/context/loading-context.mjs'
 import { useToast } from 'shared/hooks/use-toast.mjs'
diff --git a/sites/shared/components/workbench/views/measies/index.mjs b/sites/shared/components/workbench/views/measies/index.mjs
index e4fee2201a6..46e96de5ae5 100644
--- a/sites/shared/components/workbench/views/measies/index.mjs
+++ b/sites/shared/components/workbench/views/measies/index.mjs
@@ -2,7 +2,7 @@ import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 import { SetPicker, ns as setsNs } from 'shared/components/sets/set-picker.mjs'
 import { Tabs, Tab } from 'shared/components/mdx/tabs.mjs'
 import { MeasiesEditor } from './editor.mjs'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 import { Collapse } from 'shared/components/collapse.mjs'
 import { designMeasurements } from 'shared/utils.mjs'
 import { useTranslation } from 'next-i18next'
diff --git a/sites/shared/components/wrappers/chart.mjs b/sites/shared/components/wrappers/chart.mjs
index 0701c1ac389..aef2d3768b6 100644
--- a/sites/shared/components/wrappers/chart.mjs
+++ b/sites/shared/components/wrappers/chart.mjs
@@ -1,6 +1,6 @@
 import * as echarts from 'echarts'
 import ReactECharts from 'echarts-for-react'
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 
 echarts.registerTheme('light', {
   backgroundColor: 'transparent',
diff --git a/sites/shared/components/wrappers/popout.mjs b/sites/shared/components/wrappers/popout.mjs
index c5e7a5d9589..4fb1a2e010a 100644
--- a/sites/shared/components/wrappers/popout.mjs
+++ b/sites/shared/components/wrappers/popout.mjs
@@ -1,4 +1,4 @@
-import { Popout } from 'shared/components/popout.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
 
 export const PopoutWrapper = (props) => (
   <div className="w-full lg:max-w-lg xl:mx-8">