From 8820efa80ba35efd0cf2889b600153286a02dacd Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 14 Jun 2023 08:35:05 +0200
Subject: [PATCH] AdminX Design System component structure cleanup

refs. https://github.com/TryGhost/Team/issues/3432
---
 ghost/admin-x-settings/.storybook/preview.tsx      |  3 ++-
 .../src/admin-x-ds/global/PageHeader.tsx           |  0
 .../{ => chrome}/DesktopChromeHeader.stories.tsx   |  8 ++++----
 .../global/{ => chrome}/DesktopChromeHeader.tsx    |  0
 .../global/{ => chrome}/MobileChrome.stories.tsx   |  0
 .../global/{ => chrome}/MobileChrome.tsx           |  0
 .../global/{ => form}/Checkbox.stories.tsx         |  2 +-
 .../src/admin-x-ds/global/{ => form}/Checkbox.tsx  |  8 ++++----
 .../global/{ => form}/FileUpload.stories.tsx       |  2 +-
 .../admin-x-ds/global/{ => form}/FileUpload.tsx    |  0
 .../global/{ => form}/ImageUpload.stories.tsx      |  2 +-
 .../admin-x-ds/global/{ => form}/ImageUpload.tsx   |  2 +-
 .../global/{ => form}/MultiSelect.stories.tsx      |  2 +-
 .../admin-x-ds/global/{ => form}/MultiSelect.tsx   |  4 ++--
 .../admin-x-ds/global/{ => form}/Radio.stories.tsx |  2 +-
 .../src/admin-x-ds/global/{ => form}/Radio.tsx     |  8 ++++----
 .../global/{ => form}/Select.stories.tsx           |  2 +-
 .../src/admin-x-ds/global/{ => form}/Select.tsx    |  4 ++--
 .../global/{ => form}/TextArea.stories.tsx         |  2 +-
 .../src/admin-x-ds/global/{ => form}/TextArea.tsx  |  4 ++--
 .../global/{ => form}/TextField.stories.tsx        |  2 +-
 .../src/admin-x-ds/global/{ => form}/TextField.tsx |  4 ++--
 .../global/{ => form}/Toggle.stories.tsx           |  2 +-
 .../src/admin-x-ds/global/{ => form}/Toggle.tsx    |  2 +-
 .../global/{ => form}/URLSelect.stories.tsx        |  2 +-
 .../src/admin-x-ds/global/{ => form}/URLSelect.tsx |  0
 .../{ => modal}/ConfirmationModal.stories.tsx      |  0
 .../global/{ => modal}/ConfirmationModal.tsx       |  0
 .../{ => modal}/ConfirmationModalContainer.tsx     |  2 +-
 .../global/{ => modal}/Modal.stories.tsx           |  0
 .../src/admin-x-ds/global/{ => modal}/Modal.tsx    |  8 ++++----
 .../global/{ => modal}/ModalContainer.tsx          |  2 +-
 .../global/{ => modal}/PreviewModal.stories.tsx    |  4 ++--
 .../admin-x-ds/global/{ => modal}/PreviewModal.tsx | 14 +++++++-------
 .../global/{ => modal}/PreviewModalContainer.tsx   |  2 +-
 .../settings/SettingGroupContent.stories.tsx       |  4 ++--
 .../settings/email/DefaultRecipients.tsx           |  4 ++--
 .../src/components/settings/email/Mailgun.tsx      |  4 ++--
 .../src/components/settings/general/Facebook.tsx   |  6 +++---
 .../settings/general/InviteUserModal.tsx           |  6 +++---
 .../src/components/settings/general/LockSite.tsx   |  4 ++--
 .../src/components/settings/general/Metadata.tsx   |  2 +-
 .../settings/general/PublicationLanguage.tsx       |  2 +-
 .../components/settings/general/SocialAccounts.tsx |  2 +-
 .../src/components/settings/general/TimeZone.tsx   |  2 +-
 .../settings/general/TitleAndDescription.tsx       |  4 ++--
 .../src/components/settings/general/Twitter.tsx    |  6 +++---
 .../settings/general/UserDetailModal.tsx           | 12 ++++++------
 .../src/components/settings/membership/Access.tsx  |  4 ++--
 .../components/settings/membership/Analytics.tsx   |  2 +-
 .../src/components/settings/site/DesignModal.tsx   |  4 ++--
 .../src/components/settings/site/ThemeModal.tsx    |  8 ++++----
 .../site/designAndBranding/BrandSettings.tsx       |  4 ++--
 .../site/designAndBranding/ThemeSettings.tsx       |  8 ++++----
 54 files changed, 94 insertions(+), 93 deletions(-)
 create mode 100644 ghost/admin-x-settings/src/admin-x-ds/global/PageHeader.tsx
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => chrome}/DesktopChromeHeader.stories.tsx (90%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => chrome}/DesktopChromeHeader.tsx (100%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => chrome}/MobileChrome.stories.tsx (100%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => chrome}/MobileChrome.tsx (100%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/Checkbox.stories.tsx (95%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/Checkbox.tsx (94%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/FileUpload.stories.tsx (95%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/FileUpload.tsx (100%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/ImageUpload.stories.tsx (97%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/ImageUpload.tsx (99%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/MultiSelect.stories.tsx (97%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/MultiSelect.tsx (98%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/Radio.stories.tsx (97%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/Radio.tsx (95%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/Select.stories.tsx (97%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/Select.tsx (98%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/TextArea.stories.tsx (97%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/TextArea.tsx (96%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/TextField.stories.tsx (97%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/TextField.tsx (96%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/Toggle.stories.tsx (97%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/Toggle.tsx (98%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/URLSelect.stories.tsx (93%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => form}/URLSelect.tsx (100%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => modal}/ConfirmationModal.stories.tsx (100%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => modal}/ConfirmationModal.tsx (100%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => modal}/ConfirmationModalContainer.tsx (93%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => modal}/Modal.stories.tsx (100%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => modal}/Modal.tsx (96%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => modal}/ModalContainer.tsx (95%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => modal}/PreviewModal.stories.tsx (97%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => modal}/PreviewModal.tsx (94%)
 rename ghost/admin-x-settings/src/admin-x-ds/global/{ => modal}/PreviewModalContainer.tsx (92%)

diff --git a/ghost/admin-x-settings/.storybook/preview.tsx b/ghost/admin-x-settings/.storybook/preview.tsx
index 5369ddc369..e3e26685c8 100644
--- a/ghost/admin-x-settings/.storybook/preview.tsx
+++ b/ghost/admin-x-settings/.storybook/preview.tsx
@@ -14,7 +14,8 @@ const preview: Preview = {
 		},
 		options: {
 			storySort: {
-				order: ['Global', 'Settings', 'Experimental'],
+				mathod: 'alphabetical',
+				order: ['Global', ['Chrome', 'Form', 'Modal', 'List', '*'], 'Settings', ['Setting Section', 'Setting Group', '*'], 'Experimental'],
 			},
 		},
 	},
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/PageHeader.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/PageHeader.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/DesktopChromeHeader.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChromeHeader.stories.tsx
similarity index 90%
rename from ghost/admin-x-settings/src/admin-x-ds/global/DesktopChromeHeader.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChromeHeader.stories.tsx
index 708d6d8867..ce9fd80de7 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/DesktopChromeHeader.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChromeHeader.stories.tsx
@@ -1,10 +1,10 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
-import Button from './Button';
-import ButtonGroup from './ButtonGroup';
+import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
 import DesktopChromeHeader from './DesktopChromeHeader';
-import URLSelect from './URLSelect';
-import {SelectOption} from './Select';
+import URLSelect from '../form/URLSelect';
+import {SelectOption} from '../form/Select';
 
 const meta = {
     title: 'Global / Chrome / Desktop Header',
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/DesktopChromeHeader.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChromeHeader.tsx
similarity index 100%
rename from ghost/admin-x-settings/src/admin-x-ds/global/DesktopChromeHeader.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChromeHeader.tsx
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/chrome/MobileChrome.stories.tsx
similarity index 100%
rename from ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/chrome/MobileChrome.stories.tsx
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/chrome/MobileChrome.tsx
similarity index 100%
rename from ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/chrome/MobileChrome.tsx
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Checkbox.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/Checkbox.stories.tsx
similarity index 95%
rename from ghost/admin-x-settings/src/admin-x-ds/global/Checkbox.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/Checkbox.stories.tsx
index 28d6616803..f7f3e43caa 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Checkbox.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/Checkbox.stories.tsx
@@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import Checkbox from './Checkbox';
 
 const meta = {
-    title: 'Global / Checkbox',
+    title: 'Global / Form / Checkbox',
     component: Checkbox,
     tags: ['autodocs'],
     decorators: [(_story: any) => (<div style={{maxWidth: '400px'}}>{_story()}</div>)],
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Checkbox.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/Checkbox.tsx
similarity index 94%
rename from ghost/admin-x-settings/src/admin-x-ds/global/Checkbox.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/Checkbox.tsx
index 5924f17485..bdc6beefdc 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Checkbox.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/Checkbox.tsx
@@ -1,7 +1,7 @@
-import Heading from './Heading';
-import Hint from './Hint';
+import Heading from '../Heading';
+import Hint from '../Hint';
 import React, {useEffect, useState} from 'react';
-import Separator from './Separator';
+import Separator from '../Separator';
 
 interface CheckboxProps {
     id: string;
@@ -33,7 +33,7 @@ const Checkbox: React.FC<CheckboxProps> = ({id, title, label, value, onChange, e
             <div className={`flex flex-col gap-1 ${separator && 'pb-2'}`}>
                 {title && <Heading grey={true} level={6}>{title}</Heading>}
                 <label className={`flex cursor-pointer items-start ${title && '-mb-1 mt-1'}`} htmlFor={id}>
-                    <input 
+                    <input
                         checked={isChecked}
                         className="relative float-left mt-[3px] h-4 w-4 appearance-none border-2 border-solid border-grey-300 outline-none checked:border-green checked:bg-green checked:after:absolute checked:after:-mt-px checked:after:ml-[3px] checked:after:block checked:after:h-[11px] checked:after:w-[6px] checked:after:rotate-45 checked:after:border-[2px] checked:after:border-l-0 checked:after:border-t-0 checked:after:border-solid checked:after:border-white checked:after:bg-transparent checked:after:content-[''] hover:cursor-pointer focus:shadow-none focus:transition-[border-color_0.2s] dark:border-grey-600 dark:checked:border-green dark:checked:bg-green"
                         id={id}
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/FileUpload.stories.tsx
similarity index 95%
rename from ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/FileUpload.stories.tsx
index 15b4fe2501..c9081f96c6 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/FileUpload.stories.tsx
@@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import FileUpload from './FileUpload';
 
 const meta = {
-    title: 'Global / File Upload',
+    title: 'Global / Form / File Upload',
     component: FileUpload,
     tags: ['autodocs']
 } satisfies Meta<typeof FileUpload>;
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/FileUpload.tsx
similarity index 100%
rename from ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/FileUpload.tsx
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.stories.tsx
similarity index 97%
rename from ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.stories.tsx
index d9adf9e722..6e1f7c32e4 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.stories.tsx
@@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import ImageUpload from './ImageUpload';
 
 const meta = {
-    title: 'Global / Image upload',
+    title: 'Global / Form / Image upload',
     component: ImageUpload,
     tags: ['autodocs'],
     decorators: [(_story: any) => (<div style={{maxWidth: '600px'}}>{_story()}</div>)]
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx
similarity index 99%
rename from ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx
index 7bf7ae5ead..f258364370 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx
@@ -1,5 +1,5 @@
 import FileUpload from './FileUpload';
-import Icon from './Icon';
+import Icon from '../Icon';
 import React from 'react';
 import clsx from 'clsx';
 
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/MultiSelect.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/MultiSelect.stories.tsx
similarity index 97%
rename from ghost/admin-x-settings/src/admin-x-ds/global/MultiSelect.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/MultiSelect.stories.tsx
index c943c81d80..86807da549 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/MultiSelect.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/MultiSelect.stories.tsx
@@ -4,7 +4,7 @@ import MultiSelect, {MultiSelectOption} from './MultiSelect';
 import {MultiValue} from 'react-select';
 
 const meta = {
-    title: 'Global / Select / Multiselect',
+    title: 'Global / Form / Multiselect',
     component: MultiSelect,
     tags: ['autodocs']
 } satisfies Meta<typeof MultiSelect>;
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/MultiSelect.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/MultiSelect.tsx
similarity index 98%
rename from ghost/admin-x-settings/src/admin-x-ds/global/MultiSelect.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/MultiSelect.tsx
index f2ca0605bd..5be139d20e 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/MultiSelect.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/MultiSelect.tsx
@@ -1,5 +1,5 @@
-import Heading from './Heading';
-import Hint from './Hint';
+import Heading from '../Heading';
+import Hint from '../Hint';
 import React from 'react';
 import {GroupBase, MultiValue, OptionsOrGroups, default as ReactSelect, components} from 'react-select';
 
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Radio.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/Radio.stories.tsx
similarity index 97%
rename from ghost/admin-x-settings/src/admin-x-ds/global/Radio.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/Radio.stories.tsx
index 1177bda363..332ce0131f 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Radio.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/Radio.stories.tsx
@@ -4,7 +4,7 @@ import Radio from './Radio';
 import {RadioOption} from './Radio';
 
 const meta = {
-    title: 'Global / Radio',
+    title: 'Global / Form / Radio',
     component: Radio,
     tags: ['autodocs'],
     decorators: [(_story: any) => (<div style={{maxWidth: '400px'}}>{_story()}</div>)],
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Radio.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/Radio.tsx
similarity index 95%
rename from ghost/admin-x-settings/src/admin-x-ds/global/Radio.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/Radio.tsx
index 0d5a32e6e8..c28eaf0dc6 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Radio.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/Radio.tsx
@@ -1,7 +1,7 @@
-import Heading from './Heading';
-import Hint from './Hint';
+import Heading from '../Heading';
+import Hint from '../Hint';
 import React, {useEffect, useState} from 'react';
-import Separator from './Separator';
+import Separator from '../Separator';
 
 export interface RadioOption {
     value: string;
@@ -41,7 +41,7 @@ const Radio: React.FC<RadioProps> = ({id, title, options, onSelect, error, hint,
                 {title && <Heading level={6}>{title}</Heading>}
                 {options.map(option => (
                     <label key={option.value} className={`flex cursor-pointer items-start ${title && '-mb-1 mt-1'}`} htmlFor={option.value}>
-                        <input 
+                        <input
                             checked={selectedOption === option.value}
                             className="relative float-left mt-[3px] h-4 w-4 min-w-[16px] appearance-none rounded-full border-2 border-solid border-grey-300 after:absolute after:z-[1] after:block after:h-3 after:w-3 after:rounded-full after:content-[''] checked:border-green checked:after:absolute checked:after:left-1/2 checked:after:top-1/2 checked:after:h-[0.625rem] checked:after:w-[0.625rem] checked:after:rounded-full checked:after:border-green checked:after:bg-green checked:after:content-[''] checked:after:[transform:translate(-50%,-50%)] hover:cursor-pointer focus:shadow-none focus:outline-none focus:ring-0 checked:focus:border-green dark:border-grey-600 dark:checked:border-green dark:checked:after:border-green dark:checked:after:bg-green dark:checked:focus:border-green"
                             id={option.value}
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Select.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/Select.stories.tsx
similarity index 97%
rename from ghost/admin-x-settings/src/admin-x-ds/global/Select.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/Select.stories.tsx
index 5c9b6d0da5..3abbbd4f50 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Select.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/Select.stories.tsx
@@ -4,7 +4,7 @@ import Select from './Select';
 import {SelectOption} from './Select';
 
 const meta = {
-    title: 'Global / Select / Simple select',
+    title: 'Global / Simple select',
     component: Select,
     tags: ['autodocs'],
     decorators: [(_story: any) => (<div style={{maxWidth: '400px'}}>{_story()}</div>)],
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Select.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/Select.tsx
similarity index 98%
rename from ghost/admin-x-settings/src/admin-x-ds/global/Select.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/Select.tsx
index 5d88a6fb41..7614610a80 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Select.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/Select.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useId, useState} from 'react';
 
-import Heading from './Heading';
-import Hint from './Hint';
+import Heading from '../Heading';
+import Hint from '../Hint';
 import clsx from 'clsx';
 
 export interface SelectOption {
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/TextArea.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/TextArea.stories.tsx
similarity index 97%
rename from ghost/admin-x-settings/src/admin-x-ds/global/TextArea.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/TextArea.stories.tsx
index fa9d108828..7fe516a519 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/TextArea.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/TextArea.stories.tsx
@@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import TextArea from './TextArea';
 
 const meta = {
-    title: 'Global / Textarea',
+    title: 'Global / Form / Textarea',
     component: TextArea,
     tags: ['autodocs'],
     decorators: [(_story: any) => (<div style={{maxWidth: '400px'}}>{_story()}</div>)],
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/TextArea.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/TextArea.tsx
similarity index 96%
rename from ghost/admin-x-settings/src/admin-x-ds/global/TextArea.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/TextArea.tsx
index 60bb439a30..e7a721f76c 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/TextArea.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/TextArea.tsx
@@ -1,7 +1,7 @@
 import React, {useId} from 'react';
 
-import Heading from './Heading';
-import Hint from './Hint';
+import Heading from '../Heading';
+import Hint from '../Hint';
 
 type ResizeOptions = 'both' | 'vertical' | 'horizontal' | 'none';
 
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/TextField.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/TextField.stories.tsx
similarity index 97%
rename from ghost/admin-x-settings/src/admin-x-ds/global/TextField.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/TextField.stories.tsx
index 5d2309ba4e..5fffc33909 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/TextField.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/TextField.stories.tsx
@@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import TextField from './TextField';
 
 const meta = {
-    title: 'Global / Textfield',
+    title: 'Global / Form / Textfield',
     component: TextField,
     tags: ['autodocs'],
     decorators: [(_story: any) => (<div style={{maxWidth: '400px'}}>{_story()}</div>)],
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
similarity index 96%
rename from ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
index 4a0199daf5..464e14611f 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/TextField.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/TextField.tsx
@@ -1,5 +1,5 @@
-import Heading from './Heading';
-import Hint from './Hint';
+import Heading from '../Heading';
+import Hint from '../Hint';
 import React, {useId} from 'react';
 import clsx from 'clsx';
 
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Toggle.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/Toggle.stories.tsx
similarity index 97%
rename from ghost/admin-x-settings/src/admin-x-ds/global/Toggle.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/Toggle.stories.tsx
index 95683a8200..1435218e5f 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Toggle.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/Toggle.stories.tsx
@@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import Toggle from './Toggle';
 
 const meta = {
-    title: 'Global / Toggle',
+    title: 'Global / Form / Toggle',
     component: Toggle,
     tags: ['autodocs'],
     decorators: [(_story: any) => (<div style={{maxWidth: '400px'}}>{_story()}</div>)]
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Toggle.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/Toggle.tsx
similarity index 98%
rename from ghost/admin-x-settings/src/admin-x-ds/global/Toggle.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/Toggle.tsx
index 43a4c79d53..f7801afffc 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Toggle.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/Toggle.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Separator from './Separator';
+import Separator from '../Separator';
 
 type ToggleSizes = 'sm' | 'md' | 'lg';
 type ToggleDirections = 'ltr' | 'rtl';
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/URLSelect.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/URLSelect.stories.tsx
similarity index 93%
rename from ghost/admin-x-settings/src/admin-x-ds/global/URLSelect.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/URLSelect.stories.tsx
index 6264176469..83fedcab08 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/URLSelect.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/form/URLSelect.stories.tsx
@@ -4,7 +4,7 @@ import URLSelect from './URLSelect';
 import {SelectOption} from './Select';
 
 const meta = {
-    title: 'Global / Select / URL Select',
+    title: 'Global / Form / URL Select',
     component: URLSelect,
     tags: ['autodocs']
 } satisfies Meta<typeof URLSelect>;
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/URLSelect.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/form/URLSelect.tsx
similarity index 100%
rename from ghost/admin-x-settings/src/admin-x-ds/global/URLSelect.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/form/URLSelect.tsx
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/ConfirmationModal.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModal.stories.tsx
similarity index 100%
rename from ghost/admin-x-settings/src/admin-x-ds/global/ConfirmationModal.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModal.stories.tsx
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/ConfirmationModal.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModal.tsx
similarity index 100%
rename from ghost/admin-x-settings/src/admin-x-ds/global/ConfirmationModal.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModal.tsx
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/ConfirmationModalContainer.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModalContainer.tsx
similarity index 93%
rename from ghost/admin-x-settings/src/admin-x-ds/global/ConfirmationModalContainer.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModalContainer.tsx
index 346aa42c2f..bb5536dde9 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/ConfirmationModalContainer.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModalContainer.tsx
@@ -1,4 +1,4 @@
-import Button from './Button';
+import Button from '../Button';
 import ConfirmationModal, {ConfirmationModalProps} from './ConfirmationModal';
 import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Modal.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/modal/Modal.stories.tsx
similarity index 100%
rename from ghost/admin-x-settings/src/admin-x-ds/global/Modal.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/modal/Modal.stories.tsx
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx
similarity index 96%
rename from ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx
index aeea27bc86..652e17071c 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx
@@ -1,8 +1,8 @@
-import Button, {IButton} from './Button';
-import ButtonGroup from './ButtonGroup';
-import Heading from './Heading';
+import Button, {IButton} from '../Button';
+import ButtonGroup from '../ButtonGroup';
+import Heading from '../Heading';
 import React from 'react';
-import StickyFooter from './StickyFooter';
+import StickyFooter from '../StickyFooter';
 import clsx from 'clsx';
 import {useModal} from '@ebay/nice-modal-react';
 
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/ModalContainer.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/modal/ModalContainer.tsx
similarity index 95%
rename from ghost/admin-x-settings/src/admin-x-ds/global/ModalContainer.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/modal/ModalContainer.tsx
index 7240395879..cb1f87c99e 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/ModalContainer.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/modal/ModalContainer.tsx
@@ -1,7 +1,7 @@
 import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
 
-import Button from './Button';
+import Button from '../Button';
 import Modal, {ModalProps} from './Modal';
 
 const ModalContainer: React.FC<ModalProps> = ({children, onCancel, ...props}) => {
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.stories.tsx
similarity index 97%
rename from ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.stories.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.stories.tsx
index f1184a8ab3..99e31c9e57 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.stories.tsx
@@ -1,10 +1,10 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
-import Heading from './Heading';
+import Heading from '../Heading';
 import NiceModal from '@ebay/nice-modal-react';
 import PreviewModal from './PreviewModal';
 import PreviewModalContainer from './PreviewModalContainer';
-import {Tab} from './TabView';
+import {Tab} from '../TabView';
 
 const meta = {
     title: 'Global / Modal / Preview Modal',
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
similarity index 94%
rename from ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
index ccacdac3f2..84114cb511 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
@@ -1,13 +1,13 @@
-import ButtonGroup from './ButtonGroup';
-import DesktopChromeHeader from './DesktopChromeHeader';
-import Heading from './Heading';
-import MobileChrome from './MobileChrome';
+import ButtonGroup from '../ButtonGroup';
+import DesktopChromeHeader from '../chrome/DesktopChromeHeader';
+import Heading from '../Heading';
+import MobileChrome from '../chrome/MobileChrome';
 import Modal, {ModalSize} from './Modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
-import Select, {SelectOption} from './Select';
-import TabView, {Tab} from './TabView';
-import {IButton} from './Button';
+import Select, {SelectOption} from '../form/Select';
+import TabView, {Tab} from '../TabView';
+import {IButton} from '../Button';
 
 export interface PreviewModalProps {
     testId?: string;
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModalContainer.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/modal/PreviewModalContainer.tsx
similarity index 92%
rename from ghost/admin-x-settings/src/admin-x-ds/global/PreviewModalContainer.tsx
rename to ghost/admin-x-settings/src/admin-x-ds/global/modal/PreviewModalContainer.tsx
index 9be1e0c7c0..287e0b4cbe 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModalContainer.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/modal/PreviewModalContainer.tsx
@@ -1,4 +1,4 @@
-import Button from './Button';
+import Button from '../Button';
 import NiceModal from '@ebay/nice-modal-react';
 import PreviewModal, {PreviewModalProps} from './PreviewModal';
 import React from 'react';
diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.stories.tsx
index e52eef9406..2bc8cd9d25 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupContent.stories.tsx
@@ -3,8 +3,8 @@ import type {Meta, StoryObj} from '@storybook/react';
 import SettingGroupContent from './SettingGroupContent';
 
 import * as SettingValueStories from './SettingValue.stories';
-import * as TextFieldStories from '../global/TextField.stories';
-import TextField from '../global/TextField';
+import * as TextFieldStories from '../global/form/TextField.stories';
+import TextField from '../global/form/TextField';
 
 const meta = {
     title: 'Settings / Setting Group / Content',
diff --git a/ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx b/ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx
index e2b7a26254..60bfe34ad9 100644
--- a/ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx
+++ b/ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx
@@ -1,6 +1,6 @@
-import MultiSelect, {MultiSelectOption} from '../../../admin-x-ds/global/MultiSelect';
+import MultiSelect, {MultiSelectOption} from '../../../admin-x-ds/global/form/MultiSelect';
 import React, {useContext, useEffect, useState} from 'react';
-import Select from '../../../admin-x-ds/global/Select';
+import Select from '../../../admin-x-ds/global/form/Select';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import useSettingGroup from '../../../hooks/useSettingGroup';
diff --git a/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx b/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
index e33414a7ae..397f7cbf43 100644
--- a/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
+++ b/ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx
@@ -1,10 +1,10 @@
 import IconLabel from '../../../admin-x-ds/global/IconLabel';
 import Link from '../../../admin-x-ds/global/Link';
 import React from 'react';
-import Select from '../../../admin-x-ds/global/Select';
+import Select from '../../../admin-x-ds/global/form/Select';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import TextField from '../../../admin-x-ds/global/TextField';
+import TextField from '../../../admin-x-ds/global/form/TextField';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {getSettingValues} from '../../../utils/helpers';
 
diff --git a/ghost/admin-x-settings/src/components/settings/general/Facebook.tsx b/ghost/admin-x-settings/src/components/settings/general/Facebook.tsx
index b73c003d2f..984d68c9cd 100644
--- a/ghost/admin-x-settings/src/components/settings/general/Facebook.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/Facebook.tsx
@@ -1,9 +1,9 @@
-import ImageUpload from '../../../admin-x-ds/global/ImageUpload';
+import ImageUpload from '../../../admin-x-ds/global/form/ImageUpload';
 import React, {useContext} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import TextArea from '../../../admin-x-ds/global/TextArea';
-import TextField from '../../../admin-x-ds/global/TextField';
+import TextArea from '../../../admin-x-ds/global/form/TextArea';
+import TextField from '../../../admin-x-ds/global/form/TextField';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {ReactComponent as FacebookLogo} from '../../../admin-x-ds/assets/images/facebook-logo.svg';
 import {FileService, ServicesContext} from '../../providers/ServiceProvider';
diff --git a/ghost/admin-x-settings/src/components/settings/general/InviteUserModal.tsx b/ghost/admin-x-settings/src/components/settings/general/InviteUserModal.tsx
index e877702a87..a514a88b36 100644
--- a/ghost/admin-x-settings/src/components/settings/general/InviteUserModal.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/InviteUserModal.tsx
@@ -1,7 +1,7 @@
-import Modal from '../../../admin-x-ds/global/Modal';
+import Modal from '../../../admin-x-ds/global/modal/Modal';
 import NiceModal from '@ebay/nice-modal-react';
-import Radio from '../../../admin-x-ds/global/Radio';
-import TextField from '../../../admin-x-ds/global/TextField';
+import Radio from '../../../admin-x-ds/global/form/Radio';
+import TextField from '../../../admin-x-ds/global/form/TextField';
 import useRoles from '../../../hooks/useRoles';
 import useStaffUsers from '../../../hooks/useStaffUsers';
 import validator from 'validator';
diff --git a/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx b/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx
index 4797ea5d9a..42fefa8f99 100644
--- a/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/LockSite.tsx
@@ -3,8 +3,8 @@ import Link from '../../../admin-x-ds/global/Link';
 import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import TextField from '../../../admin-x-ds/global/TextField';
-import Toggle from '../../../admin-x-ds/global/Toggle';
+import TextField from '../../../admin-x-ds/global/form/TextField';
+import Toggle from '../../../admin-x-ds/global/form/Toggle';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {getSettingValues} from '../../../utils/helpers';
 
diff --git a/ghost/admin-x-settings/src/components/settings/general/Metadata.tsx b/ghost/admin-x-settings/src/components/settings/general/Metadata.tsx
index 500ab347d7..40f26890d3 100644
--- a/ghost/admin-x-settings/src/components/settings/general/Metadata.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/Metadata.tsx
@@ -2,7 +2,7 @@ import Heading from '../../../admin-x-ds/global/Heading';
 import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import TextField from '../../../admin-x-ds/global/TextField';
+import TextField from '../../../admin-x-ds/global/form/TextField';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {ReactComponent as GoogleLogo} from '../../../admin-x-ds/assets/images/google-logo.svg';
 import {ReactComponent as MagnifyingGlass} from '../../../admin-x-ds/assets/icons/magnifying-glass.svg';
diff --git a/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx b/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx
index 94c86ca061..82fe411775 100644
--- a/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import TextField from '../../../admin-x-ds/global/TextField';
+import TextField from '../../../admin-x-ds/global/form/TextField';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {getSettingValues} from '../../../utils/helpers';
 
diff --git a/ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx b/ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx
index 181ea50253..e63ac4d05d 100644
--- a/ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/SocialAccounts.tsx
@@ -1,7 +1,7 @@
 import React, {useRef, useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import TextField from '../../../admin-x-ds/global/TextField';
+import TextField from '../../../admin-x-ds/global/form/TextField';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import validator from 'validator';
 import {getSettingValues} from '../../../utils/helpers';
diff --git a/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx b/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx
index a7cab7b0de..84e3377ba8 100644
--- a/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/TimeZone.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import Select from '../../../admin-x-ds/global/Select';
+import Select from '../../../admin-x-ds/global/form/Select';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import timezoneData from '@tryghost/timezone-data';
diff --git a/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx b/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx
index 3546f8beff..89bc9340d8 100644
--- a/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/TitleAndDescription.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import TextArea from '../../../admin-x-ds/global/TextArea';
-import TextField from '../../../admin-x-ds/global/TextField';
+import TextArea from '../../../admin-x-ds/global/form/TextArea';
+import TextField from '../../../admin-x-ds/global/form/TextField';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {getSettingValues} from '../../../utils/helpers';
 
diff --git a/ghost/admin-x-settings/src/components/settings/general/Twitter.tsx b/ghost/admin-x-settings/src/components/settings/general/Twitter.tsx
index 4167472cfe..9b09fd9cf3 100644
--- a/ghost/admin-x-settings/src/components/settings/general/Twitter.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/Twitter.tsx
@@ -1,9 +1,9 @@
-import ImageUpload from '../../../admin-x-ds/global/ImageUpload';
+import ImageUpload from '../../../admin-x-ds/global/form/ImageUpload';
 import React, {useContext} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import TextArea from '../../../admin-x-ds/global/TextArea';
-import TextField from '../../../admin-x-ds/global/TextField';
+import TextArea from '../../../admin-x-ds/global/form/TextArea';
+import TextField from '../../../admin-x-ds/global/form/TextField';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {FileService, ServicesContext} from '../../providers/ServiceProvider';
 import {ReactComponent as TwitterLogo} from '../../../admin-x-ds/assets/images/twitter-logo.svg';
diff --git a/ghost/admin-x-settings/src/components/settings/general/UserDetailModal.tsx b/ghost/admin-x-settings/src/components/settings/general/UserDetailModal.tsx
index 11acda383c..0dfdb89126 100644
--- a/ghost/admin-x-settings/src/components/settings/general/UserDetailModal.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/UserDetailModal.tsx
@@ -1,17 +1,17 @@
 import Button from '../../../admin-x-ds/global/Button';
-import ConfirmationModal from '../../../admin-x-ds/global/ConfirmationModal';
+import ConfirmationModal from '../../../admin-x-ds/global/modal/ConfirmationModal';
 import Heading from '../../../admin-x-ds/global/Heading';
 import Icon from '../../../admin-x-ds/global/Icon';
-import ImageUpload from '../../../admin-x-ds/global/ImageUpload';
+import ImageUpload from '../../../admin-x-ds/global/form/ImageUpload';
 import Menu from '../../../admin-x-ds/global/Menu';
-import Modal from '../../../admin-x-ds/global/Modal';
+import Modal from '../../../admin-x-ds/global/modal/Modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
-import Radio from '../../../admin-x-ds/global/Radio';
+import Radio from '../../../admin-x-ds/global/form/Radio';
 import React, {useContext, useEffect, useRef, useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import TextField from '../../../admin-x-ds/global/TextField';
-import Toggle from '../../../admin-x-ds/global/Toggle';
+import TextField from '../../../admin-x-ds/global/form/TextField';
+import Toggle from '../../../admin-x-ds/global/form/Toggle';
 import useRoles from '../../../hooks/useRoles';
 import useStaffUsers from '../../../hooks/useStaffUsers';
 import validator from 'validator';
diff --git a/ghost/admin-x-settings/src/components/settings/membership/Access.tsx b/ghost/admin-x-settings/src/components/settings/membership/Access.tsx
index fb4f6fa2d7..5c709fc847 100644
--- a/ghost/admin-x-settings/src/components/settings/membership/Access.tsx
+++ b/ghost/admin-x-settings/src/components/settings/membership/Access.tsx
@@ -1,6 +1,6 @@
-import MultiSelect, {MultiSelectOption} from '../../../admin-x-ds/global/MultiSelect';
+import MultiSelect, {MultiSelectOption} from '../../../admin-x-ds/global/form/MultiSelect';
 import React, {useContext, useEffect, useState} from 'react';
-import Select from '../../../admin-x-ds/global/Select';
+import Select from '../../../admin-x-ds/global/form/Select';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
 import useSettingGroup from '../../../hooks/useSettingGroup';
diff --git a/ghost/admin-x-settings/src/components/settings/membership/Analytics.tsx b/ghost/admin-x-settings/src/components/settings/membership/Analytics.tsx
index e7ecd0893f..26fa373132 100644
--- a/ghost/admin-x-settings/src/components/settings/membership/Analytics.tsx
+++ b/ghost/admin-x-settings/src/components/settings/membership/Analytics.tsx
@@ -2,7 +2,7 @@ import Button from '../../../admin-x-ds/global/Button';
 import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
 import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
-import Toggle from '../../../admin-x-ds/global/Toggle';
+import Toggle from '../../../admin-x-ds/global/form/Toggle';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {getSettingValues} from '../../../utils/helpers';
 
diff --git a/ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx b/ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx
index 3ea82a1201..e34d8b37d7 100644
--- a/ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx
+++ b/ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx
@@ -1,5 +1,5 @@
 import BrandSettings, {BrandSettingValues} from './designAndBranding/BrandSettings';
-import ConfirmationModal from '../../../admin-x-ds/global/ConfirmationModal';
+import ConfirmationModal from '../../../admin-x-ds/global/modal/ConfirmationModal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useContext, useEffect, useState} from 'react';
 import TabView, {Tab} from '../../../admin-x-ds/global/TabView';
@@ -7,7 +7,7 @@ import ThemePreview from './designAndBranding/ThemePreview';
 import ThemeSettings from './designAndBranding/ThemeSettings';
 import useForm from '../../../hooks/useForm';
 import {CustomThemeSetting, Post, Setting, SettingValue, SiteData} from '../../../types/api';
-import {PreviewModalContent} from '../../../admin-x-ds/global/PreviewModal';
+import {PreviewModalContent} from '../../../admin-x-ds/global/modal/PreviewModal';
 import {ServicesContext} from '../../providers/ServiceProvider';
 import {SettingsContext} from '../../providers/SettingsProvider';
 import {getSettingValues} from '../../../utils/helpers';
diff --git a/ghost/admin-x-settings/src/components/settings/site/ThemeModal.tsx b/ghost/admin-x-settings/src/components/settings/site/ThemeModal.tsx
index d231b62e80..16c6a0d9a7 100644
--- a/ghost/admin-x-settings/src/components/settings/site/ThemeModal.tsx
+++ b/ghost/admin-x-settings/src/components/settings/site/ThemeModal.tsx
@@ -1,8 +1,8 @@
 import AdvancedThemeSettings from './theme/AdvancedThemeSettings';
 import Button from '../../../admin-x-ds/global/Button';
 import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
-import FileUpload from '../../../admin-x-ds/global/FileUpload';
-import Modal from '../../../admin-x-ds/global/Modal';
+import FileUpload from '../../../admin-x-ds/global/form/FileUpload';
+import Modal from '../../../admin-x-ds/global/modal/Modal';
 import NewThemePreview from './theme/ThemePreview';
 import NiceModal, {NiceModalHandler, useModal} from '@ebay/nice-modal-react';
 import OfficialThemes from './theme/OfficialThemes';
@@ -45,7 +45,7 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
 
         return (
             <div className='sticky top-0 flex justify-between gap-3 bg-grey-50 p-5 px-7'>
-                <div className='flex items-center gap-2'>
+                <div className='flex w-[33%] items-center gap-2'>
                     <button
                         className={`text-sm`}
                         type="button"
@@ -58,7 +58,7 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
                     &rarr;
                     <span className='text-sm font-bold'>{selectedTheme?.name}</span>
                 </div>
-                <div className='flex justify-end gap-8'>
+                <div className='flex w-[33%] justify-end gap-8'>
                     <ButtonGroup
                         buttons={[
                             {icon: 'laptop', link: true, size: 'sm'},
diff --git a/ghost/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx b/ghost/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
index ec6572fb83..378374c2dc 100644
--- a/ghost/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
+++ b/ghost/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
@@ -1,9 +1,9 @@
 import Heading from '../../../../admin-x-ds/global/Heading';
 import Hint from '../../../../admin-x-ds/global/Hint';
-import ImageUpload from '../../../../admin-x-ds/global/ImageUpload';
+import ImageUpload from '../../../../admin-x-ds/global/form/ImageUpload';
 import React, {useContext} from 'react';
 import SettingGroupContent from '../../../../admin-x-ds/settings/SettingGroupContent';
-import TextField from '../../../../admin-x-ds/global/TextField';
+import TextField from '../../../../admin-x-ds/global/form/TextField';
 import {ServicesContext} from '../../../providers/ServiceProvider';
 import {SettingValue} from '../../../../types/api';
 
diff --git a/ghost/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx b/ghost/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
index 60cc3cc063..01efccee33 100644
--- a/ghost/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
+++ b/ghost/admin-x-settings/src/components/settings/site/designAndBranding/ThemeSettings.tsx
@@ -1,10 +1,10 @@
 import Heading from '../../../../admin-x-ds/global/Heading';
-import ImageUpload from '../../../../admin-x-ds/global/ImageUpload';
+import ImageUpload from '../../../../admin-x-ds/global/form/ImageUpload';
 import React, {useContext} from 'react';
-import Select from '../../../../admin-x-ds/global/Select';
+import Select from '../../../../admin-x-ds/global/form/Select';
 import SettingGroupContent from '../../../../admin-x-ds/settings/SettingGroupContent';
-import TextField from '../../../../admin-x-ds/global/TextField';
-import Toggle from '../../../../admin-x-ds/global/Toggle';
+import TextField from '../../../../admin-x-ds/global/form/TextField';
+import Toggle from '../../../../admin-x-ds/global/form/Toggle';
 import {CustomThemeSetting} from '../../../../types/api';
 import {ServicesContext} from '../../../providers/ServiceProvider';
 import {humanizeSettingKey} from '../../../../utils/helpers';