diff --git a/.changeset/polite-beds-juggle.md b/.changeset/polite-beds-juggle.md new file mode 100644 index 00000000000..f7cf55e7721 --- /dev/null +++ b/.changeset/polite-beds-juggle.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': minor +'@clerk/types': minor +--- + +Remove the unused appearance keys for accordion and breadcrumb elements. diff --git a/packages/clerk-js/src/ui/common/CalloutWithAction.tsx b/packages/clerk-js/src/ui/common/CalloutWithAction.tsx index 599ab6bc8dd..08de5db5e02 100644 --- a/packages/clerk-js/src/ui/common/CalloutWithAction.tsx +++ b/packages/clerk-js/src/ui/common/CalloutWithAction.tsx @@ -36,7 +36,7 @@ export const CalloutWithAction = (props: PropsWithChildren diff --git a/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx b/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx index ef924aaf4e6..0f66044b757 100644 --- a/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx +++ b/packages/clerk-js/src/ui/common/EmailLinkStatusCard.tsx @@ -71,7 +71,7 @@ const StatusRow = (props: { status: VerificationStatus }) => { diff --git a/packages/clerk-js/src/ui/common/RemoveResourceForm.tsx b/packages/clerk-js/src/ui/common/RemoveResourceForm.tsx index 469e3d5576d..a94ce5065bb 100644 --- a/packages/clerk-js/src/ui/common/RemoveResourceForm.tsx +++ b/packages/clerk-js/src/ui/common/RemoveResourceForm.tsx @@ -32,7 +32,7 @@ export const RemoveResourceForm = withCardStateProvider((props: RemoveFormProps) {messageLine2 ? ( ) : null} diff --git a/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx b/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx index 8b1010caca0..afad36a5ee6 100644 --- a/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx +++ b/packages/clerk-js/src/ui/components/ImpersonationFab/ImpersonationFab.tsx @@ -71,7 +71,7 @@ const FabContent = ({ title, signOutText }: FabContentProps) => { })} > ); diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx index 8df16b84c63..6cf7ca3835d 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ActionConfirmationPage.tsx @@ -159,7 +159,7 @@ const ActionConfirmationPage = withCardStateProvider((props: ActionConfirmationP {invitation.createdAt.toLocaleDateString()} diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx index cc2455c1ac1..61f5a52fd4f 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx @@ -205,7 +205,7 @@ export const RoleSelect = (props: { {prefixLocalizationKey && ( )} @@ -245,7 +245,7 @@ const RolesListItem = memo((props: RolesListItemProps) => { ]} {...rest} > - {option?.label} + {option?.label} ); }); diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx index 64992968d03..b664ed8ff16 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx @@ -161,7 +161,7 @@ const OrganizationDomainsSection = () => { sx={t => ({ paddingLeft: t.space.$9, })} - colorScheme='neutral' + colorScheme='secondary' /> diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx index e110026ad81..af3b4546903 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileNavbar.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { useProtect } from '../../common'; import { ORGANIZATION_PROFILE_NAVBAR_ROUTE_ID } from '../../constants'; import { useOrganizationProfileContext } from '../../contexts'; -import { Breadcrumbs, NavBar, NavbarContextProvider } from '../../elements'; +import { NavBar, NavbarContextProvider } from '../../elements'; import { localizationKeys } from '../../localization'; import type { PropsOfComponent } from '../../styledSystem'; @@ -41,13 +41,3 @@ export const OrganizationProfileNavbar = ( ); }; - -export const OrganizationProfileBreadcrumbs = (props: Pick, 'title'>) => { - const { pages } = useOrganizationProfileContext(); - return ( - - ); -}; diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx index 3f54d138f99..2cd0e8d7f32 100644 --- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx @@ -57,7 +57,7 @@ const AcceptRejectSuggestionButtons = (props: OrganizationSuggestionResource) => if (props.status === 'accepted') { return ( ); diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx index 6bf8748e3ed..3cdec7e9021 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorTwoCodeForm.tsx @@ -109,7 +109,7 @@ export const SignInFactorTwoCodeForm = (props: SignInFactorTwoCodeFormProps) => {isResettingPassword(signIn) && ( )} diff --git a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx index fdf8aa9df02..33874183ab9 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/ActiveDevicesSection.tsx @@ -139,11 +139,11 @@ const DeviceInfo = (props: { session: SessionWithActivitiesResource }) => { /> )} - {browser} - + {browser} + {ipAddress} ({location}) - {t(getRelativeToNowDateKey(props.session.lastActiveAt))} + {t(getRelativeToNowDateKey(props.session.lastActiveAt))} ); diff --git a/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx b/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx index 084c6f7898c..46cacdadc59 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/AddAuthenticatorApp.tsx @@ -66,7 +66,7 @@ export const AddAuthenticatorApp = withCardStateProvider((props: AddAuthenticato {displayFormat == 'uri' && ( <> { {label ? `• ${label}` : ''} diff --git a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx index 00db2e8a700..1e3e849d9b6 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/DeleteUserForm.tsx @@ -43,7 +43,7 @@ export const DeleteUserForm = withCardStateProvider((props: DeleteUserFormProps) { > {providerName} {label ? `• ${label}` : ''} diff --git a/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx b/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx index 427eb738f2d..964e257acf4 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/LinkButtonWithDescription.tsx @@ -39,7 +39,7 @@ export const LinkButtonWithDescription = (props: LinkButtonWithTextDescriptionPr {actionLabel && ( diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeAccordion.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeAccordion.tsx deleted file mode 100644 index 16788be375e..00000000000 --- a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeAccordion.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Col, Icon, localizationKeys, useLocalizations } from '../../customizables'; -import { DotCircle } from '../../icons'; -import { useRouter } from '../../router'; -import { LinkButtonWithDescription } from './LinkButtonWithDescription'; -import { UserProfileAccordion } from './UserProfileAccordion'; - -export const MfaBackupCodeAccordion = () => { - const { navigate } = useRouter(); - const { t } = useLocalizations(); - - return ( - ({ color: theme.colors.$neutralAlpha700 })} - /> - } - title={t(localizationKeys('userProfile.start.mfaSection.backupCodes.headerTitle'))} - > - - navigate('multi-factor/backup_code/add')} - /> - - - ); -}; diff --git a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx index 3fe13e5bfb7..89244ccd0c1 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx @@ -52,7 +52,7 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => { { ? 'userProfile.mfaPhoneCodePage.subtitle__availablePhoneNumbers' : 'userProfile.mfaPhoneCodePage.subtitle__unavailablePhoneNumbers', )} - colorScheme='neutral' + colorScheme='secondary' /> {availableMethods.length > 0 && ( diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneForm.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneForm.tsx index dd13e00ee0f..4ea7201e1d0 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/PhoneForm.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/PhoneForm.tsx @@ -81,7 +81,7 @@ export const AddPhone = (props: AddPhoneProps) => { > ) => { - const isModal = useUserProfileContext().mode === 'modal'; - return ( - - ); -}; diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx index 3b747b16dd1..eef05a52a1b 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileNavbar.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useUserProfileContext } from '../../contexts'; -import { Breadcrumbs, NavBar, NavbarContextProvider } from '../../elements'; +import { NavBar, NavbarContextProvider } from '../../elements'; import { localizationKeys } from '../../localization'; import type { PropsOfComponent } from '../../styledSystem'; @@ -22,13 +22,3 @@ export const UserProfileNavbar = ( ); }; - -export const UserProfileBreadcrumbs = (props: Pick, 'title'>) => { - const { pages } = useUserProfileContext(); - return ( - - ); -}; diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts index a0ea29ba474..0808c5e9727 100644 --- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts +++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts @@ -225,13 +225,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'formattedPhoneNumberFlag', 'formattedPhoneNumberText', - 'breadcrumbs', - 'breadcrumbsItems', - 'breadcrumbsItemBox', - 'breadcrumbsItem', - 'breadcrumbsItemIcon', - 'breadcrumbsItemDivider', - 'scrollBox', 'navbar', @@ -258,9 +251,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'invitationsSentIconBox', 'invitationsSentIcon', - 'accordionTriggerButton', - 'accordionContent', - 'qrCodeRow', 'qrCodeContainer', @@ -269,8 +259,6 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([ 'buttonArrowIcon', 'providerIcon', 'spinner', - // Decide if we want to keep the keys as camel cased in HTML as well, - // if yes, refactor and remove the .map(camelize) method ] as const).map(camelize) as (keyof ElementsConfig)[]; type TargettableClassname = `${typeof CLASS_PREFIX}${K}`; diff --git a/packages/clerk-js/src/ui/elements/Accordion.tsx b/packages/clerk-js/src/ui/elements/Accordion.tsx deleted file mode 100644 index e5c15a63908..00000000000 --- a/packages/clerk-js/src/ui/elements/Accordion.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React from 'react'; - -import { Col, descriptors } from '../customizables'; -import { Caret } from '../icons'; -import type { PropsOfComponent } from '../styledSystem'; -import { animations } from '../styledSystem'; -import { ArrowBlockButton } from './ArrowBlockButton'; - -type AccordionItemProps = Omit, 'title'> & - React.PropsWithChildren<{ - title: React.ReactElement | string; - icon?: React.ReactElement; - badge?: React.ReactElement; - defaultOpen?: boolean; - toggleable?: boolean; - scrollOnOpen?: boolean; - onCloseCallback?: () => void; - }>; - -export const AccordionItem = (props: AccordionItemProps) => { - const { - children, - title, - icon, - defaultOpen = false, - toggleable = true, - scrollOnOpen = false, - badge, - onCloseCallback = null, - ...rest - } = props; - const [isOpen, setIsOpen] = React.useState(defaultOpen); - const contentRef = React.useRef(null); - - const toggle = () => { - if (toggleable) { - setIsOpen(s => !s); - } - - if (isOpen && onCloseCallback) { - onCloseCallback(); - } - }; - - React.useEffect(() => { - setIsOpen(defaultOpen); - }, [defaultOpen]); - - React.useLayoutEffect(() => { - let requestRef: number; - if (scrollOnOpen && isOpen && contentRef.current) { - requestRef = requestAnimationFrame(() => { - contentRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' }); - }); - } - - return () => cancelAnimationFrame(requestRef); - }, [isOpen, scrollOnOpen]); - - return ( - - ({ - transitionProperty: t.transitionProperty.$common, - transitionDuration: t.transitionDuration.$controls, - transform: `rotate(${isOpen ? '180' : '0'}deg)`, - opacity: 0.4, - })} - badge={badge} - sx={t => ({ - backgroundColor: isOpen ? t.colors.$neutralAlpha50 : undefined, - padding: `${t.space.$3} ${t.space.$4}`, - minHeight: t.sizes.$10, - justifyContent: 'start', - })} - onClick={toggle} - isDisabled={!toggleable} - childrenSx={{ - width: '100%', - }} - > - {title} - - {isOpen && ( - ({ - animation: `${animations.blockBigIn} ${t.transitionDuration.$slow} ease`, - padding: `${t.space.$4} ${t.space.$8}`, - borderTopWidth: 0, - })} - > - {children} - - )} - - ); -}; diff --git a/packages/clerk-js/src/ui/elements/Alert.tsx b/packages/clerk-js/src/ui/elements/Alert.tsx index 0f468fa8fd5..f6d21369b6b 100644 --- a/packages/clerk-js/src/ui/elements/Alert.tsx +++ b/packages/clerk-js/src/ui/elements/Alert.tsx @@ -39,7 +39,7 @@ export const Alert = (props: AlertProps): JSX.Element | null => { @@ -49,7 +49,7 @@ export const Alert = (props: AlertProps): JSX.Element | null => { diff --git a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx index 73d13667f0e..a328eccc611 100644 --- a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx +++ b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx @@ -118,7 +118,7 @@ export const AvatarUploader = (props: AvatarUploaderProps) => { )} ({ fontSize: t.fontSizes.$sm })} localizationKey={localizationKeys('userProfile.profilePage.fileDropAreaHint')} /> diff --git a/packages/clerk-js/src/ui/elements/Breadcrumbs.tsx b/packages/clerk-js/src/ui/elements/Breadcrumbs.tsx deleted file mode 100644 index ff4f1b90faa..00000000000 --- a/packages/clerk-js/src/ui/elements/Breadcrumbs.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import React, { useMemo } from 'react'; - -import type { LocalizationKey } from '../customizables'; -import { descriptors, Flex, Icon, Link, Text, useLocalizations } from '../customizables'; -import { useNavigateToFlowStart } from '../hooks'; -import { useRouter } from '../router'; -import type { PropsOfComponent } from '../styledSystem'; -import { mqu } from '../styledSystem'; -import type { NavbarRoute } from './Navbar'; - -type BreadcrumbsProps = { - title: LocalizationKey; - pageToRootNavbarRoute: Record; -}; - -const BreadcrumbItem = (props: PropsOfComponent & { href?: string }) => { - const El = (props.onClick || props.href ? Link : Text) as unknown as any; - return ( - - - - ); -}; - -export const Breadcrumbs = (props: BreadcrumbsProps) => { - const { title, pageToRootNavbarRoute, ...rest } = props; - const router = useRouter(); - const { navigateToFlowStart } = useNavigateToFlowStart(); - const { t } = useLocalizations(); - const currentPath = router.currentPath.replace(`/${router.basePath}/`, ''); - - const root = useMemo( - () => - Object.entries(pageToRootNavbarRoute).find(([key]) => { - return currentPath.includes(key); - })?.[1], - [], - ); - - if (!title) { - return null; - } - - const handleRootClick = (e: React.MouseEvent) => { - e.preventDefault(); - return navigateToFlowStart(); - }; - - return ( - - ({ - gap: t.space.$3, - [mqu.sm]: { gap: t.space.$1 }, - margin: 0, - padding: 0, - })} - > - {root && ( - <> - - ({ - [mqu.sm]: { display: 'none' }, - opacity: 0.7, - marginRight: t.space.$2, - })} - /> - {t(root.name)} - - - / - - - )} - - - - ); -}; diff --git a/packages/clerk-js/src/ui/elements/Card/CardAction.tsx b/packages/clerk-js/src/ui/elements/Card/CardAction.tsx index 968597be233..08c559409a3 100644 --- a/packages/clerk-js/src/ui/elements/Card/CardAction.tsx +++ b/packages/clerk-js/src/ui/elements/Card/CardAction.tsx @@ -33,7 +33,7 @@ export const CardActionText = (props: React.PropsWithChildren): JSX.Element {...props} as='span' variant='body' - colorScheme='neutral' + colorScheme='secondary' /> ); }; diff --git a/packages/clerk-js/src/ui/elements/Divider.tsx b/packages/clerk-js/src/ui/elements/Divider.tsx index c9a06680185..faf61fea5ce 100644 --- a/packages/clerk-js/src/ui/elements/Divider.tsx +++ b/packages/clerk-js/src/ui/elements/Divider.tsx @@ -19,7 +19,7 @@ export const Divider = (props: DividerProps) => { localizationKey={!dividerText ? localizationKeys('dividerText') : dividerText} elementDescriptor={descriptors.dividerText} variant='body' - colorScheme='neutral' + colorScheme='secondary' sx={t => ({ margin: `0 ${t.space.$4}` })} /> diff --git a/packages/clerk-js/src/ui/elements/ErrorCard.tsx b/packages/clerk-js/src/ui/elements/ErrorCard.tsx index ad12a10b1d1..8c792aef0fe 100644 --- a/packages/clerk-js/src/ui/elements/ErrorCard.tsx +++ b/packages/clerk-js/src/ui/elements/ErrorCard.tsx @@ -49,7 +49,7 @@ export const ErrorCard = (props: ErrorCardProps) => { > {props.message && ( )} diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/clerk-js/src/ui/elements/FieldControl.tsx index 973afa1ef47..3984b30411b 100644 --- a/packages/clerk-js/src/ui/elements/FieldControl.tsx +++ b/packages/clerk-js/src/ui/elements/FieldControl.tsx @@ -80,7 +80,7 @@ const FieldOptionalLabel = () => { elementId={descriptors.formFieldHintText.setId(fieldId)} as='span' variant='caption' - colorScheme='neutral' + colorScheme='secondary' isDisabled={isDisabled} /> ); diff --git a/packages/clerk-js/src/ui/elements/Header.tsx b/packages/clerk-js/src/ui/elements/Header.tsx index 7644d59a241..fdbea981d5e 100644 --- a/packages/clerk-js/src/ui/elements/Header.tsx +++ b/packages/clerk-js/src/ui/elements/Header.tsx @@ -55,7 +55,7 @@ const Subtitle = React.memo((props: PropsOfComponent): JSX.Element { return ( diff --git a/packages/clerk-js/src/ui/elements/InputGroup.tsx b/packages/clerk-js/src/ui/elements/InputGroup.tsx index 9f3f3691e8c..222a63c6ec9 100644 --- a/packages/clerk-js/src/ui/elements/InputGroup.tsx +++ b/packages/clerk-js/src/ui/elements/InputGroup.tsx @@ -46,7 +46,7 @@ export const InputGroup = forwardRef< > {groupPrefix && ( {groupPrefix} @@ -72,7 +72,7 @@ export const InputGroup = forwardRef< /> {groupSuffix && ( {groupSuffix} diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx index fb880c8c81e..6e694305bb4 100644 --- a/packages/clerk-js/src/ui/elements/Navbar.tsx +++ b/packages/clerk-js/src/ui/elements/Navbar.tsx @@ -164,7 +164,7 @@ const NavbarContainer = ( /> diff --git a/packages/clerk-js/src/ui/elements/Pagination.tsx b/packages/clerk-js/src/ui/elements/Pagination.tsx index d377fff83d9..d2ccc9acff9 100644 --- a/packages/clerk-js/src/ui/elements/Pagination.tsx +++ b/packages/clerk-js/src/ui/elements/Pagination.tsx @@ -79,7 +79,7 @@ const RowInformation = (props: RowInfoProps) => { elementId={descriptors.paginationRowText?.setId('displaying')} sx={t => ({ opacity: t.opacity.$inactive })} localizationKey={localizationKeys('paginationRowText__displaying')} - colorScheme='neutral' + colorScheme='secondary' />{' '} ( - ... + ... ); diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx index 754c5a9ca7b..4704f8cee5f 100644 --- a/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx +++ b/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx @@ -134,7 +134,7 @@ const PhoneInputBase = forwardRef { > {country.name} - +{country.code} + +{country.code} ); }); diff --git a/packages/clerk-js/src/ui/elements/RadioGroup.tsx b/packages/clerk-js/src/ui/elements/RadioGroup.tsx index 35cfc9c25fb..373326af6fc 100644 --- a/packages/clerk-js/src/ui/elements/RadioGroup.tsx +++ b/packages/clerk-js/src/ui/elements/RadioGroup.tsx @@ -49,7 +49,7 @@ export const RadioLabel = (props: { {props.description && ( )} diff --git a/packages/clerk-js/src/ui/elements/Section.tsx b/packages/clerk-js/src/ui/elements/Section.tsx index 674fd704bae..10e96f867ed 100644 --- a/packages/clerk-js/src/ui/elements/Section.tsx +++ b/packages/clerk-js/src/ui/elements/Section.tsx @@ -346,7 +346,7 @@ export const SectionSubHeader = (props: SectionHeaderProps) => { > diff --git a/packages/clerk-js/src/ui/elements/SuccessPage.tsx b/packages/clerk-js/src/ui/elements/SuccessPage.tsx index 924a50201d9..fe68bbd4605 100644 --- a/packages/clerk-js/src/ui/elements/SuccessPage.tsx +++ b/packages/clerk-js/src/ui/elements/SuccessPage.tsx @@ -37,7 +37,7 @@ export const SuccessPage = (props: SuccessPageProps) => { ({ display: 'inline', ':not(:last-of-type)': { @@ -49,7 +49,7 @@ export const SuccessPage = (props: SuccessPageProps) => { ) : ( )} diff --git a/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx b/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx index 83d64be4d5e..4eb25041ab7 100644 --- a/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx +++ b/packages/clerk-js/src/ui/elements/VerificationLinkCard.tsx @@ -87,7 +87,7 @@ export const VerificationLink = (props: VerificationLinkProps) => { )} {props.children} diff --git a/packages/clerk-js/src/ui/elements/index.ts b/packages/clerk-js/src/ui/elements/index.ts index a9829bf9b2b..349d8d6845a 100644 --- a/packages/clerk-js/src/ui/elements/index.ts +++ b/packages/clerk-js/src/ui/elements/index.ts @@ -19,7 +19,6 @@ export * from './ReversibleContainer'; export * from './Divider'; export * from './Modal'; export * from './UserPreview'; -export * from './Accordion'; export * from './FormattedPhoneNumber'; export * from './RootBox'; export * from './InvisibleRootBox'; @@ -36,7 +35,6 @@ export * from './OrganizationAvatar'; export * from './OrganizationPreview'; export * from './PersonalWorkspacePreview'; export * from './Navbar'; -export * from './Breadcrumbs'; export * from './FormContainer'; export * from './IconButton'; export * from './AvatarUploader'; diff --git a/packages/clerk-js/src/ui/primitives/FormInfoText.tsx b/packages/clerk-js/src/ui/primitives/FormInfoText.tsx index 6483895ed62..b520f59f348 100644 --- a/packages/clerk-js/src/ui/primitives/FormInfoText.tsx +++ b/packages/clerk-js/src/ui/primitives/FormInfoText.tsx @@ -15,7 +15,7 @@ export const FormInfoText = forwardRef((props, ref) return ( ((props, re return ( ((props, re return ( { variants: { variant: common.textVariants(theme), colorScheme: { - primary: { color: theme.colors.$colorText }, + body: { color: theme.colors.$colorText }, onPrimaryBg: { color: theme.colors.$colorTextOnPrimaryBackground }, danger: { color: theme.colors.$danger500 }, success: { color: theme.colors.$success500 }, - neutral: { color: theme.colors.$colorTextSecondary }, + secondary: { color: theme.colors.$colorTextSecondary }, inherit: { color: 'inherit' }, }, truncate: { diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index e22ebcb632d..d0fb54a686d 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -350,13 +350,6 @@ export type ElementsConfig = { formattedPhoneNumberFlag: WithOptions; formattedPhoneNumberText: WithOptions; - breadcrumbs: WithOptions; - breadcrumbsItems: WithOptions; - breadcrumbsItemBox: WithOptions<'currentPage'>; - breadcrumbsItem: WithOptions<'currentPage'>; - breadcrumbsItemIcon: WithOptions<'currentPage'>; - breadcrumbsItemDivider: WithOptions; - scrollBox: WithOptions; navbar: WithOptions; @@ -383,9 +376,6 @@ export type ElementsConfig = { invitationsSentIconBox: WithOptions; invitationsSentIcon: WithOptions; - accordionTriggerButton: WithOptions; - accordionContent: WithOptions; - qrCodeRow: WithOptions; qrCodeContainer: WithOptions;