-
+
{template.title}
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhookEventOptions.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhookEventOptions.tsx
index d56f9fef4f..78b7f4c5ae 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhookEventOptions.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhookEventOptions.tsx
@@ -1,4 +1,4 @@
-import {SelectOptionGroup} from '../../../../admin-x-ds/global/form/Select';
+import {SelectOptionGroup} from '@tryghost/admin-x-design';
const webhookEventOptions: SelectOptionGroup[] = [
{
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
index f3010ce102..ad54475ae0 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
@@ -1,7 +1,7 @@
import FeatureToggle from './FeatureToggle';
import LabItem from './LabItem';
-import List from '../../../../admin-x-ds/global/List';
import React from 'react';
+import {List} from '@tryghost/admin-x-design';
const features = [{
title: 'URL cache',
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx
index 1b731b686b..564dd36a1c 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx
@@ -1,14 +1,11 @@
-import Button from '../../../../admin-x-ds/global/Button';
import FeatureToggle from './FeatureToggle';
-import FileUpload from '../../../../admin-x-ds/global/form/FileUpload';
import LabItem from './LabItem';
-import List from '../../../../admin-x-ds/global/List';
import React, {useState} from 'react';
import useHandleError from '../../../../utils/api/handleError';
import useRouting from '../../../../hooks/useRouting';
+import {Button, FileUpload, List, showToast} from '@tryghost/admin-x-design';
import {downloadRedirects, useUploadRedirects} from '../../../../api/redirects';
import {downloadRoutes, useUploadRoutes} from '../../../../api/routes';
-import {showToast} from '../../../../admin-x-ds/global/Toast';
const BetaFeatures: React.FC = () => {
const {updateRoute} = useRouting();
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx
index 8785fc6ae5..14e96d5488 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import Toggle from '../../../../admin-x-ds/global/form/Toggle';
import useHandleError from '../../../../utils/api/handleError';
import {ConfigResponseType, configDataType} from '../../../../api/config';
+import {Toggle} from '@tryghost/admin-x-design';
import {getSettingValue, useEditSettings} from '../../../../api/settings';
import {useGlobalData} from '../../../providers/GlobalDataProvider';
import {useQueryClient} from '@tanstack/react-query';
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/LabItem.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/LabItem.tsx
index 236ec19933..de5be48c48 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/LabItem.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/LabItem.tsx
@@ -1,5 +1,5 @@
-import ListItem from '../../../../admin-x-ds/global/ListItem';
import React from 'react';
+import {ListItem} from '@tryghost/admin-x-design';
const LabItem: React.FC<{
title?: React.ReactNode;
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/MigrationOptions.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/MigrationOptions.tsx
index b9034c356c..3aa96aade3 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/MigrationOptions.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/MigrationOptions.tsx
@@ -1,13 +1,9 @@
-import Button from '../../../../admin-x-ds/global/Button';
-import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal';
-import FileUpload from '../../../../admin-x-ds/global/form/FileUpload';
import LabItem from './LabItem';
-import List from '../../../../admin-x-ds/global/List';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React, {useState} from 'react';
import useHandleError from '../../../../utils/api/handleError';
+import {Button, ConfirmationModal, FileUpload, List, showToast} from '@tryghost/admin-x-design';
import {downloadAllContent, useDeleteAllContent, useImportContent} from '../../../../api/db';
-import {showToast} from '../../../../admin-x-ds/global/Toast';
import {useQueryClient} from '@tanstack/react-query';
const ImportModalContent = () => {
diff --git a/apps/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx b/apps/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx
index 1e399cdd06..ed7c317cba 100644
--- a/apps/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx
@@ -1,14 +1,11 @@
-import MultiSelect, {MultiSelectOption} from '../../../admin-x-ds/global/form/MultiSelect';
import React, {useState} from 'react';
-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 TopLevelGroup from '../../TopLevelGroup';
import useDefaultRecipientsOptions from './useDefaultRecipientsOptions';
import useSettingGroup from '../../../hooks/useSettingGroup';
+import {MultiSelect, MultiSelectOption, Select, SettingGroupContent, withErrorBoundary} from '@tryghost/admin-x-design';
import {MultiValue} from 'react-select';
import {getOptionLabel} from '../../../utils/helpers';
import {getSettingValues} from '../../../api/settings';
-import {withErrorBoundary} from '../../../admin-x-ds/global/ErrorBoundary';
type RefipientValueArgs = {
defaultEmailRecipients: string;
@@ -154,7 +151,7 @@ const DefaultRecipients: React.FC<{ keywords: string[] }> = ({keywords}) => {
);
return (
-
= ({keywords}) => {
onSave={handleSave}
>
{isEditing ? form : values}
-
+
);
};
diff --git a/apps/admin-x-settings/src/components/settings/email/EmailSettings.tsx b/apps/admin-x-settings/src/components/settings/email/EmailSettings.tsx
index 33586885c8..946c111880 100644
--- a/apps/admin-x-settings/src/components/settings/email/EmailSettings.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/EmailSettings.tsx
@@ -3,7 +3,7 @@ import EnableNewsletters from './EnableNewsletters';
import MailGun from './Mailgun';
import Newsletters from './Newsletters';
import React from 'react';
-import SettingSection from '../../../admin-x-ds/settings/SettingSection';
+import SearchableSection from '../../SearchableSection';
import {getSettingValues} from '../../../api/settings';
import {useGlobalData} from '../../providers/GlobalDataProvider';
@@ -19,7 +19,7 @@ const EmailSettings: React.FC = () => {
const [newslettersEnabled] = getSettingValues(settings, ['editor_default_email_recipients']) as [string];
return (
-
+
{newslettersEnabled !== 'disabled' && (
<>
@@ -28,7 +28,7 @@ const EmailSettings: React.FC = () => {
{!config.mailgunIsConfigured && }
)}
-
+
);
};
diff --git a/apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx b/apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx
index c8657aa4b9..56a1268404 100644
--- a/apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/EnableNewsletters.tsx
@@ -1,14 +1,10 @@
-import Banner from '../../../admin-x-ds/global/Banner';
-import Icon from '../../../admin-x-ds/global/Icon';
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/form/Toggle';
+import TopLevelGroup from '../../TopLevelGroup';
import useHandleError from '../../../utils/api/handleError';
import useRouting from '../../../hooks/useRouting';
+import {Banner, Icon, SettingGroupContent, Toggle, withErrorBoundary} from '@tryghost/admin-x-design';
import {Setting, getSettingValues, useEditSettings} from '../../../api/settings';
import {useGlobalData} from '../../providers/GlobalDataProvider';
-import {withErrorBoundary} from '../../../admin-x-ds/global/ErrorBoundary';
const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
const {settings} = useGlobalData();
@@ -46,7 +42,7 @@ const EnableNewsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
);
- return (
= ({keywords}) => {
}
]}
/>
- );
+ );
};
export default withErrorBoundary(EnableNewsletters, 'Newsletter sending');
diff --git a/apps/admin-x-settings/src/components/settings/email/Mailgun.tsx b/apps/admin-x-settings/src/components/settings/email/Mailgun.tsx
index 78d0f73290..16ad90400a 100644
--- a/apps/admin-x-settings/src/components/settings/email/Mailgun.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/Mailgun.tsx
@@ -1,14 +1,9 @@
-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/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/form/TextField';
+import TopLevelGroup from '../../TopLevelGroup';
import useHandleError from '../../../utils/api/handleError';
import useSettingGroup from '../../../hooks/useSettingGroup';
+import {IconLabel, Link, Select, SettingGroupContent, TextField, withErrorBoundary} from '@tryghost/admin-x-design';
import {getSettingValues, useEditSettings} from '../../../api/settings';
-import {withErrorBoundary} from '../../../admin-x-ds/global/ErrorBoundary';
const MAILGUN_REGIONS = [
{label: '🇺🇸 US', value: 'https://api.mailgun.net/v3'},
@@ -99,7 +94,7 @@ const MailGun: React.FC<{ keywords: string[] }> = ({keywords}) => {
);
return (
-
= ({keywords}) => {
}}
>
{isEditing ? inputs : values}
-
+
);
};
diff --git a/apps/admin-x-settings/src/components/settings/email/Newsletters.tsx b/apps/admin-x-settings/src/components/settings/email/Newsletters.tsx
index c10b228605..d0fab889b7 100644
--- a/apps/admin-x-settings/src/components/settings/email/Newsletters.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/Newsletters.tsx
@@ -1,16 +1,13 @@
-import Button from '../../../admin-x-ds/global/Button';
-import ConfirmationModal from '../../../admin-x-ds/global/modal/ConfirmationModal';
import NewslettersList from './newsletters/NewslettersList';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React, {ReactNode, useEffect, useState} from 'react';
-import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
-import TabView from '../../../admin-x-ds/global/TabView';
+import TopLevelGroup from '../../TopLevelGroup';
import useHandleError from '../../../utils/api/handleError';
import useQueryParams from '../../../hooks/useQueryParams';
import useRouting from '../../../hooks/useRouting';
import {APIError} from '../../../utils/errors';
+import {Button, ConfirmationModal, TabView, withErrorBoundary} from '@tryghost/admin-x-design';
import {useBrowseNewsletters, useVerifyNewsletterEmail} from '../../../api/newsletters';
-import {withErrorBoundary} from '../../../admin-x-ds/global/ErrorBoundary';
const NavigateToNewsletter = ({id, children}: {id: string; children: ReactNode}) => {
const modal = useModal();
@@ -89,7 +86,7 @@ const Newsletters: React.FC<{ keywords: string[] }> = ({keywords}) => {
];
return (
-
= ({keywords}) => {
link
onClick={() => fetchNextPage()}
/>}
-
+
);
};
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx
index 65ffa51797..ff448e7331 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/AddNewsletterModal.tsx
@@ -1,17 +1,11 @@
-import Form from '../../../../admin-x-ds/global/form/Form';
-import LimitModal from '../../../../admin-x-ds/global/modal/LimitModal';
-import Modal from '../../../../admin-x-ds/global/modal/Modal';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React, {useEffect} from 'react';
-import TextArea from '../../../../admin-x-ds/global/form/TextArea';
-import TextField from '../../../../admin-x-ds/global/form/TextField';
-import Toggle from '../../../../admin-x-ds/global/form/Toggle';
import useForm from '../../../../hooks/useForm';
import useHandleError from '../../../../utils/api/handleError';
import useRouting from '../../../../hooks/useRouting';
+import {Form, LimitModal, Modal, TextArea, TextField, Toggle, showToast} from '@tryghost/admin-x-design';
import {HostLimitError, useLimiter} from '../../../../hooks/useLimiter';
import {RoutingModalProps} from '../../../providers/RoutingProvider';
-import {showToast} from '../../../../admin-x-ds/global/Toast';
import {toast} from 'react-hot-toast';
import {useAddNewsletter} from '../../../../api/newsletters';
import {useBrowseMembers} from '../../../../api/members';
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
index e3042b2a00..9ad1e3a04a 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
@@ -1,38 +1,19 @@
-import Button from '../../../../admin-x-ds/global/Button';
-import ButtonGroup from '../../../../admin-x-ds/global/ButtonGroup';
-import ColorPickerField from '../../../../admin-x-ds/global/form/ColorPickerField';
-import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal';
-import Form from '../../../../admin-x-ds/global/form/Form';
-import Heading from '../../../../admin-x-ds/global/Heading';
-import Hint from '../../../../admin-x-ds/global/Hint';
-import HtmlField from '../../../../admin-x-ds/global/form/HtmlField';
-import Icon from '../../../../admin-x-ds/global/Icon';
-import ImageUpload from '../../../../admin-x-ds/global/form/ImageUpload';
-import LimitModal from '../../../../admin-x-ds/global/modal/LimitModal';
import NewsletterPreview from './NewsletterPreview';
import NiceModal, {useModal} from '@ebay/nice-modal-react';
import React, {useEffect, useState} from 'react';
-import Select, {SelectOption} from '../../../../admin-x-ds/global/form/Select';
-import Separator from '../../../../admin-x-ds/global/Separator';
-import TabView, {Tab} from '../../../../admin-x-ds/global/TabView';
-import TextArea from '../../../../admin-x-ds/global/form/TextArea';
-import TextField from '../../../../admin-x-ds/global/form/TextField';
-import Toggle from '../../../../admin-x-ds/global/form/Toggle';
-import ToggleGroup from '../../../../admin-x-ds/global/form/ToggleGroup';
import useFeatureFlag from '../../../../hooks/useFeatureFlag';
import useForm, {ErrorMessages} from '../../../../hooks/useForm';
import useHandleError from '../../../../utils/api/handleError';
import useRouting from '../../../../hooks/useRouting';
import useSettingGroup from '../../../../hooks/useSettingGroup';
import validator from 'validator';
+import {Button, ButtonGroup, ColorPickerField, ConfirmationModal, Form, Heading, Hint, HtmlField, Icon, ImageUpload, LimitModal, PreviewModalContent, Select, SelectOption, Separator, Tab, TabView, TextArea, TextField, Toggle, ToggleGroup, showToast} from '@tryghost/admin-x-design';
import {HostLimitError, useLimiter} from '../../../../hooks/useLimiter';
import {Newsletter, useBrowseNewsletters, useEditNewsletter} from '../../../../api/newsletters';
-import {PreviewModalContent} from '../../../../admin-x-ds/global/modal/PreviewModal';
import {RoutingModalProps} from '../../../providers/RoutingProvider';
import {fullEmailAddress} from '../../../../api/site';
import {getImageUrl, useUploadImage} from '../../../../api/images';
import {getSettingValues} from '../../../../api/settings';
-import {showToast} from '../../../../admin-x-ds/global/Toast';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
import {useGlobalData} from '../../../providers/GlobalDataProvider';
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx
index f5ff9ab39a..a52b9a3d53 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterPreviewContent.tsx
@@ -1,10 +1,9 @@
import CoverImage from '../../../../assets/images/user-cover.png';
-import Icon from '../../../../admin-x-ds/global/Icon';
import LatestPosts1 from '../../../../assets/images/latest-posts-1.png';
import LatestPosts2 from '../../../../assets/images/latest-posts-2.png';
import LatestPosts3 from '../../../../assets/images/latest-posts-3.png';
import clsx from 'clsx';
-import {ReactComponent as GhostOrb} from '../../../../admin-x-ds/assets/images/ghost-orb.svg';
+import {GhostOrb, Icon} from '@tryghost/admin-x-design';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
const NewsletterPreviewContent: React.FC<{
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/NewslettersList.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/NewslettersList.tsx
index 7b18e59eaf..2a9464e744 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/NewslettersList.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/NewslettersList.tsx
@@ -1,10 +1,6 @@
-import Button from '../../../../admin-x-ds/global/Button';
-import NoValueLabel from '../../../../admin-x-ds/global/NoValueLabel';
import React from 'react';
-import Table from '../../../../admin-x-ds/global/Table';
-import TableCell from '../../../../admin-x-ds/global/TableCell';
-import TableRow from '../../../../admin-x-ds/global/TableRow';
import useRouting from '../../../../hooks/useRouting';
+import {Button, NoValueLabel, Table, TableCell, TableRow} from '@tryghost/admin-x-design';
import {Newsletter} from '../../../../api/newsletters';
import {numberWithCommas} from '../../../../utils/helpers';
diff --git a/apps/admin-x-settings/src/components/settings/email/useDefaultRecipientsOptions.tsx b/apps/admin-x-settings/src/components/settings/email/useDefaultRecipientsOptions.tsx
index 4548432e17..f018eec019 100644
--- a/apps/admin-x-settings/src/components/settings/email/useDefaultRecipientsOptions.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/useDefaultRecipientsOptions.tsx
@@ -1,10 +1,9 @@
import useFilterableApi from '../../../hooks/useFilterableApi';
import {GroupBase, MultiValue} from 'react-select';
import {Label} from '../../../api/labels';
-import {LoadOptions, MultiSelectOption} from '../../../admin-x-ds/global/form/MultiSelect';
+import {LoadMultiSelectOptions, MultiSelectOption, debounce} from '@tryghost/admin-x-design';
import {Offer} from '../../../api/offers';
import {Tier} from '../../../api/tiers';
-import {debounce} from '../../../utils/debounce';
import {isObjectId} from '../../../utils/helpers';
import {useEffect, useState} from 'react';
@@ -29,7 +28,7 @@ const useDefaultRecipientsOptions = (selectedOption: string, defaultEmailRecipie
const labelOption = (label: Label): MultiSelectOption => ({value: `label:${label.slug}`, label: label.name, color: 'grey'});
const offerOption = (offer: Offer): MultiSelectOption => ({value: `offer_redemptions:${offer.id}`, label: offer.name, color: 'black'});
- const loadOptions: LoadOptions = async (input, callback) => {
+ const loadOptions: LoadMultiSelectOptions = async (input, callback) => {
const [tiersData, labelsData, offersData] = await Promise.all([tiers.loadData(input), labels.loadData(input), offers.loadData(input)]);
const segmentOptionGroups: GroupBase
[] = [
diff --git a/apps/admin-x-settings/src/components/settings/general/About.tsx b/apps/admin-x-settings/src/components/settings/general/About.tsx
index 61987e2fc2..5030e18076 100644
--- a/apps/admin-x-settings/src/components/settings/general/About.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/About.tsx
@@ -1,9 +1,6 @@
-import Icon from '../../../admin-x-ds/global/Icon';
-import Modal from '../../../admin-x-ds/global/modal/Modal';
import NiceModal from '@ebay/nice-modal-react';
-import Separator from '../../../admin-x-ds/global/Separator';
import useRouting from '../../../hooks/useRouting';
-import {ReactComponent as GhostLogo} from '../../../admin-x-ds/assets/images/ghost-logo.svg';
+import {GhostLogo, Icon, Modal, Separator} from '@tryghost/admin-x-design';
import {RoutingModalProps} from '../../providers/RoutingProvider';
import {linkToGitHubReleases} from '../../../utils/linkToGithubReleases';
import {showDatabaseWarning} from '../../../utils/showDatabaseWarning';
diff --git a/apps/admin-x-settings/src/components/settings/general/Facebook.tsx b/apps/admin-x-settings/src/components/settings/general/Facebook.tsx
index a61f0ae76c..10028303bc 100644
--- a/apps/admin-x-settings/src/components/settings/general/Facebook.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/Facebook.tsx
@@ -1,15 +1,11 @@
-import ImageUpload from '../../../admin-x-ds/global/form/ImageUpload';
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/form/TextField';
+import TopLevelGroup from '../../TopLevelGroup';
import useHandleError from '../../../utils/api/handleError';
import usePinturaEditor from '../../../hooks/usePinturaEditor';
import useSettingGroup from '../../../hooks/useSettingGroup';
-import {ReactComponent as FacebookLogo} from '../../../admin-x-ds/assets/images/facebook-logo.svg';
+import {FacebookLogo, ImageUpload, SettingGroupContent, TextField, withErrorBoundary} from '@tryghost/admin-x-design';
import {getImageUrl, useUploadImage} from '../../../api/images';
import {getSettingValues} from '../../../api/settings';
-import {withErrorBoundary} from '../../../admin-x-ds/global/ErrorBoundary';
const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => {
const {
@@ -117,7 +113,7 @@ const Facebook: React.FC<{ keywords: string[] }> = ({keywords}) => {
);
return (
- = ({keywords}) => {
>
{values}
{isEditing ? inputFields : null}
-
+
);
};
diff --git a/apps/admin-x-settings/src/components/settings/general/GeneralSettings.tsx b/apps/admin-x-settings/src/components/settings/general/GeneralSettings.tsx
index 37c1ab41ad..e27b703f93 100644
--- a/apps/admin-x-settings/src/components/settings/general/GeneralSettings.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/GeneralSettings.tsx
@@ -4,7 +4,7 @@ import Facebook from './Facebook';
import LockSite from './LockSite';
import Metadata from './Metadata';
import PublicationLanguage from './PublicationLanguage';
-import SettingSection from '../../../admin-x-ds/settings/SettingSection';
+import SearchableSection from '../../SearchableSection';
import SocialAccounts from './SocialAccounts';
import TimeZone from './TimeZone';
import TitleAndDescription from './TitleAndDescription';
@@ -25,7 +25,7 @@ export const searchKeywords = {
const GeneralSettings: React.FC = () => {
return (
-
+
@@ -35,7 +35,7 @@ const GeneralSettings: React.FC = () => {
-
+
);
};
diff --git a/apps/admin-x-settings/src/components/settings/general/InviteUserModal.tsx b/apps/admin-x-settings/src/components/settings/general/InviteUserModal.tsx
index 8ef43fafb2..d5a059e86d 100644
--- a/apps/admin-x-settings/src/components/settings/general/InviteUserModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/InviteUserModal.tsx
@@ -1,12 +1,9 @@
-import Modal from '../../../admin-x-ds/global/modal/Modal';
import NiceModal from '@ebay/nice-modal-react';
-import Radio from '../../../admin-x-ds/global/form/Radio';
-import TextField from '../../../admin-x-ds/global/form/TextField';
import useHandleError from '../../../utils/api/handleError';
import useRouting from '../../../hooks/useRouting';
import validator from 'validator';
import {HostLimitError, useLimiter} from '../../../hooks/useLimiter';
-import {showToast} from '../../../admin-x-ds/global/Toast';
+import {Modal, Radio, TextField, showToast} from '@tryghost/admin-x-design';
import {useAddInvite, useBrowseInvites} from '../../../api/invites';
import {useBrowseRoles} from '../../../api/roles';
import {useBrowseUsers} from '../../../api/users';
diff --git a/apps/admin-x-settings/src/components/settings/general/LockSite.tsx b/apps/admin-x-settings/src/components/settings/general/LockSite.tsx
index 481e69091c..b72568c482 100644
--- a/apps/admin-x-settings/src/components/settings/general/LockSite.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/LockSite.tsx
@@ -1,13 +1,8 @@
-import Icon from '../../../admin-x-ds/global/Icon';
-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/form/TextField';
-import Toggle from '../../../admin-x-ds/global/form/Toggle';
+import TopLevelGroup from '../../TopLevelGroup';
import useSettingGroup from '../../../hooks/useSettingGroup';
+import {Icon, Link, SettingGroupContent, TextField, Toggle, withErrorBoundary} from '@tryghost/admin-x-design';
import {getSettingValues} from '../../../api/settings';
-import {withErrorBoundary} from '../../../admin-x-ds/global/ErrorBoundary';
const LockSite: React.FC<{ keywords: string[] }> = ({keywords}) => {
const {
@@ -92,7 +87,7 @@ const LockSite: React.FC<{ keywords: string[] }> = ({keywords}) => {
);
return (
- = ({keywords}) => {
onSave={handleSave}
>
{isEditing ? inputs : values}
-
+
);
};
diff --git a/apps/admin-x-settings/src/components/settings/general/Metadata.tsx b/apps/admin-x-settings/src/components/settings/general/Metadata.tsx
index f78ce8dc8e..35fe32e5fb 100644
--- a/apps/admin-x-settings/src/components/settings/general/Metadata.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/Metadata.tsx
@@ -1,13 +1,8 @@
-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/form/TextField';
+import TopLevelGroup from '../../TopLevelGroup';
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';
+import {GoogleLogo, Heading, Icon, SettingGroupContent, TextField, withErrorBoundary} from '@tryghost/admin-x-design';
import {getSettingValues} from '../../../api/settings';
-import {withErrorBoundary} from '../../../admin-x-ds/global/ErrorBoundary';
interface SearchEnginePreviewProps {
title: string;
@@ -34,7 +29,7 @@ const SearchEnginePreview: React.FC = ({