AdminX Design System component structure cleanup

refs. https://github.com/TryGhost/Team/issues/3432

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'],
 			},
 		},
 	},

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',

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>)],

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}

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>;

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>)]

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';
 

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>;

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';
 

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>)],

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}

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>)],

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 {

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>)],

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';
 

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>)],

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';
 

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>)]

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';

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>;

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';

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';
 

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}) => {

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',

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;

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';

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',

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';

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';
 

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';

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';

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';
 

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';

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';
 

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';

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';

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';
 

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';

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';

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';

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';
 

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';

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'},

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';
 

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';