npm - @clerk/ui - Versions diffs - 1.0.0-snapshot.v20251204175016 → 1.0.0-snapshot.v20251211120550 - Mend

@clerk/ui 1.0.0-snapshot.v20251204175016 → 1.0.0-snapshot.v20251211120550

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/dist/elements/AvatarUploader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarUploader.js","names":[],"sources":["../../src/elements/AvatarUploader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Button, Col, descriptors, Flex, localizationKeys, SimpleButton, Text } from '../customizables';\nimport { handleError } from '../utils/errorHandler';\nimport { useCardState } from './contexts';\n\nexport type AvatarUploaderProps = {\n title: LocalizationKey;\n avatarPreview: React.ReactElement;\n onAvatarChange: (file: File) => Promise<unknown>;\n onAvatarRemove?: (() => void) \| null;\n avatarPreviewPlaceholder?: React.ReactElement \| null;\n};\n\nconst fileToBase64 = (file: File): Promise<string> => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = error => reject(error);\n });\n};\n\nconst MAX_SIZE_BYTES = 10 * 1000 * 1000;\nconst SUPPORTED_MIME_TYPES = Object.freeze(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);\n\nconst validType = (f: File \| DataTransferItem) => SUPPORTED_MIME_TYPES.includes(f.type);\nconst validSize = (f: File) => f.size <= MAX_SIZE_BYTES;\~~nconst validFile = (f: File) => validType(f) && validSize(f);\~~n\nexport const AvatarUploader = (props: AvatarUploaderProps) => {\n const [showUpload, setShowUpload] = React.useState(false);\n const [objectUrl, setObjectUrl] = React.useState<string>();\n const card = useCardState();\n const inputRef = React.useRef<HTMLInputElement \| null>(null);\n const openDialog = () => inputRef.current?.click();\n\n const { onAvatarChange, onAvatarRemove, title, avatarPreview, avatarPreviewPlaceholder, ...rest } = props;\n\n const toggle = () => {\n setShowUpload(!showUpload);\n };\n\n const handleFileDrop = (file: File \| null) => {\n if (file === null) {\n return setObjectUrl('');\n }\n\n void fileToBase64(file).then(setObjectUrl);\n card.setLoading();\n return onAvatarChange(file)\n .then(() => {\n toggle();\n card.setIdle();\n })\n .catch(err => handleError(err, [], card.setError));\n };\n\n const handleRemove = async () => {\n card.setLoading();\n await handleFileDrop(null);\n return onAvatarRemove?.();\n };\n\n const upload = async (f: File \| undefined) => {\n if (f && ~~validFile~~(f)) {\n ~~await~~ ~~handleFileDrop~~(f);\n }\n };\n\n const previewElement = objectUrl\n ? React.cloneElement(avatarPreview, { imageUrl: objectUrl })\n : avatarPreviewPlaceholder\n ? React.cloneElement(avatarPreviewPlaceholder, { onClick: openDialog })\n : avatarPreview;\n\n return (\n <Col gap={4}>\n <input\n type='file'\n accept={SUPPORTED_MIME_TYPES.join(',')}\n style={{ display: 'none' }}\n ref={inputRef}\n onChange={e => upload(e.currentTarget.files?.[0])}\n />\n\n <Flex\n gap={4}\n align='center'\n {...rest}\n >\n {previewElement}\n <Col gap={1}>\n <Flex\n elementDescriptor={descriptors.avatarImageActions}\n gap={2}\n >\n <SimpleButton\n elementDescriptor={descriptors.avatarImageActionsUpload}\n localizationKey={localizationKeys('userProfile.profilePage.imageFormSubtitle')}\n isDisabled={card.isLoading}\n variant='outline'\n size='xs'\n onClick={openDialog}\n />\n\n {!!onAvatarRemove && !showUpload && (\n <Button\n elementDescriptor={descriptors.avatarImageActionsRemove}\n localizationKey={localizationKeys('userProfile.profilePage.imageFormDestructiveActionSubtitle')}\n isDisabled={card.isLoading}\n sx={t => ({ color: t.colors.$danger500 })}\n variant='ghost'\n colorScheme='danger'\n onClick={handleRemove}\n size='xs'\n />\n )}\n </Flex>\n <Text\n colorScheme='secondary'\n sx={t => ({ fontSize: t.fontSizes.$sm })}\n localizationKey={localizationKeys('userProfile.profilePage.fileDropAreaHint')}\n />\n </Col>\n </Flex>\n </Col>\n );\n};\n"],"mappings":"~~;;;;;;;;;AAeA~~,MAAM,gBAAgB,SAAgC;AACpD,QAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,SAAS,IAAI,YAAY;AAC/B,SAAO,cAAc,KAAK;AAC1B,SAAO,eAAe,QAAQ,OAAO,OAAiB;AACtD,SAAO,WAAU,UAAS,OAAO,MAAM;GACvC;;AAGJ,MAAM,iBAAiB,KAAK,MAAO;AACnC,MAAM,uBAAuB,OAAO,OAAO;CAAC;CAAa;CAAc;CAAa;CAAa,CAAC;AAElG,MAAM,aAAa,MAA+B,qBAAqB,SAAS,EAAE,KAAK;AACvF,MAAM,aAAa,MAAY,EAAE,QAAQ;~~AACzC~~,~~MAAM,aAAa,MAAY,UAAU,EAAE,IAAI,UAAU,EAAE;AAE3D,~~MAAa,kBAAkB,UAA+B;CAC5D,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,MAAM;CACzD,MAAM,CAAC,WAAW,gBAAgB,MAAM,UAAkB;CAC1D,MAAM,OAAO,cAAc;CAC3B,MAAM,WAAW,MAAM,OAAgC,KAAK;CAC5D,MAAM,mBAAmB,SAAS,SAAS,OAAO;CAElD,MAAM,EAAE,gBAAgB,gBAAgB,OAAO,eAAe,yBAA0B,GAAG,SAAS;CAEpG,MAAM,eAAe;AACnB,gBAAc,CAAC,WAAW;;CAG5B,MAAM,kBAAkB,SAAsB;AAC5C,MAAI,SAAS,KACX,QAAO,aAAa,GAAG;AAGzB,EAAK,aAAa,KAAK,CAAC,KAAK,aAAa;AAC1C,OAAK,YAAY;AACjB,SAAO,eAAe,KAAK,CACxB,WAAW;AACV,WAAQ;AACR,QAAK,SAAS;IACd,CACD,OAAM,QAAO,YAAY,KAAK,EAAE,EAAE,KAAK,SAAS,CAAC;;CAGtD,MAAM,eAAe,YAAY;AAC/B,OAAK,YAAY;AACjB,QAAM,eAAe,KAAK;AAC1B,SAAO,kBAAkB;;CAG3B,MAAM,SAAS,OAAO,MAAwB;AAC5C,MAAI,~~KAAK~~,UAAU,EAAE,~~CACnB~~,~~OAAM~~,eAAe,EAAE;;~~CAI3B~~,MAAM,iBAAiB,YACnB,MAAM,aAAa,eAAe,EAAE,UAAU,WAAW,CAAC,GAC1D,2BACE,MAAM,aAAa,0BAA0B,EAAE,SAAS,YAAY,CAAC,GACrE;AAEN,QACE,qBAAC;EAAI,KAAK;aACR,oBAAC;GACC,MAAK;GACL,QAAQ,qBAAqB,KAAK,IAAI;GACtC,OAAO,EAAE,SAAS,QAAQ;GAC1B,KAAK;GACL,WAAU,MAAK,OAAO,EAAE,cAAc,QAAQ,GAAG;IACjD,EAEF,qBAAC;GACC,KAAK;GACL,OAAM;GACN,GAAI;cAEH,gBACD,qBAAC;IAAI,KAAK;eACR,qBAAC;KACC,mBAAmB,YAAY;KAC/B,KAAK;gBAEL,oBAAC;MACC,mBAAmB,YAAY;MAC/B,iBAAiB,iBAAiB,4CAA4C;MAC9E,YAAY,KAAK;MACjB,SAAQ;MACR,MAAK;MACL,SAAS;OACT,EAED,CAAC,CAAC,kBAAkB,CAAC,cACpB,oBAAC;MACC,mBAAmB,YAAY;MAC/B,iBAAiB,iBAAiB,6DAA6D;MAC/F,YAAY,KAAK;MACjB,KAAI,~~OAAM~~,EAAE,~~OAAO~~,~~EAAE~~,OAAO,YAAY;MACxC,SAAQ;MACR,aAAY;MACZ,SAAS;MACT,MAAK;OACL;MAEC,EACP,oBAAC;KACC,aAAY;KACZ,KAAI,~~OAAM~~,EAAE,~~UAAU~~,~~EAAE~~,UAAU,KAAK;KACvC,iBAAiB,iBAAiB,2CAA2C;MAC7E;KACE;IACD;GACH"}
1	+ {"version":3,"file":"AvatarUploader.js","names":["t"],"sources":["../../src/elements/AvatarUploader.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport {\n Button,\n Col,\n descriptors,\n Flex,\n localizationKeys,\n SimpleButton,\n Text,\n useLocalizations,\n} from '../customizables';\nimport { handleError } from '../utils/errorHandler';\nimport { useCardState } from './contexts';\n\nexport type AvatarUploaderProps = {\n title: LocalizationKey;\n avatarPreview: React.ReactElement;\n onAvatarChange: (file: File) => Promise<unknown>;\n onAvatarRemove?: (() => void) \| null;\n avatarPreviewPlaceholder?: React.ReactElement \| null;\n};\n\nconst fileToBase64 = (file: File): Promise<string> => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = error => reject(error);\n });\n};\n\nconst MAX_SIZE_BYTES = 10 * 1000 * 1000;\nconst SUPPORTED_MIME_TYPES = Object.freeze(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);\n\nconst validType = (f: File \| DataTransferItem) => SUPPORTED_MIME_TYPES.includes(f.type);\nconst validSize = (f: File) => f.size <= MAX_SIZE_BYTES;\n\nexport const AvatarUploader = (props: AvatarUploaderProps) => {\n const { t } = useLocalizations();\n const [showUpload, setShowUpload] = React.useState(false);\n const [objectUrl, setObjectUrl] = React.useState<string>();\n const card = useCardState();\n const inputRef = React.useRef<HTMLInputElement \| null>(null);\n const openDialog = () => inputRef.current?.click();\n\n const { onAvatarChange, onAvatarRemove, title, avatarPreview, avatarPreviewPlaceholder, ...rest } = props;\n\n const toggle = () => {\n setShowUpload(!showUpload);\n };\n\n const handleFileDrop = (file: File \| null) => {\n if (file === null) {\n return setObjectUrl('');\n }\n\n void fileToBase64(file).then(setObjectUrl);\n card.setLoading();\n return onAvatarChange(file)\n .then(() => {\n toggle();\n card.setIdle();\n })\n .catch(err => handleError(err, [], card.setError));\n };\n\n const handleRemove = async () => {\n card.setLoading();\n await handleFileDrop(null);\n return onAvatarRemove?.();\n };\n\n const upload = async (f: File \| undefined) => {\n if (!f) {\n return;\n }\n\n if (!validType(f)) {\n card.setError(t(localizationKeys('unstable__errors.avatar_file_type_invalid')));\n return;\n }\n\n if (!validSize(f)) {\n card.setError(t(localizationKeys('unstable__errors.avatar_file_size_exceeded')));\n return;\n }\n\n await handleFileDrop(f);\n };\n\n const previewElement = objectUrl\n ? React.cloneElement(avatarPreview, { imageUrl: objectUrl })\n : avatarPreviewPlaceholder\n ? React.cloneElement(avatarPreviewPlaceholder, { onClick: openDialog })\n : avatarPreview;\n\n return (\n <Col gap={4}>\n <input\n type='file'\n accept={SUPPORTED_MIME_TYPES.join(',')}\n style={{ display: 'none' }}\n ref={inputRef}\n onChange={e => upload(e.currentTarget.files?.[0])}\n />\n\n <Flex\n gap={4}\n align='center'\n {...rest}\n >\n {previewElement}\n <Col gap={1}>\n <Flex\n elementDescriptor={descriptors.avatarImageActions}\n gap={2}\n >\n <SimpleButton\n elementDescriptor={descriptors.avatarImageActionsUpload}\n localizationKey={localizationKeys('userProfile.profilePage.imageFormSubtitle')}\n isDisabled={card.isLoading}\n variant='outline'\n size='xs'\n onClick={openDialog}\n />\n\n {!!onAvatarRemove && !showUpload && (\n <Button\n elementDescriptor={descriptors.avatarImageActionsRemove}\n localizationKey={localizationKeys('userProfile.profilePage.imageFormDestructiveActionSubtitle')}\n isDisabled={card.isLoading}\n sx={t => ({ color: t.colors.$danger500 })}\n variant='ghost'\n colorScheme='danger'\n onClick={handleRemove}\n size='xs'\n />\n )}\n </Flex>\n <Text\n colorScheme='secondary'\n sx={t => ({ fontSize: t.fontSizes.$sm })}\n localizationKey={localizationKeys('userProfile.profilePage.fileDropAreaHint')}\n />\n </Col>\n </Flex>\n </Col>\n );\n};\n"],"mappings":";;;;;;;;;;AAwBA,MAAM,gBAAgB,SAAgC;AACpD,QAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,SAAS,IAAI,YAAY;AAC/B,SAAO,cAAc,KAAK;AAC1B,SAAO,eAAe,QAAQ,OAAO,OAAiB;AACtD,SAAO,WAAU,UAAS,OAAO,MAAM;GACvC;;AAGJ,MAAM,iBAAiB,KAAK,MAAO;AACnC,MAAM,uBAAuB,OAAO,OAAO;CAAC;CAAa;CAAc;CAAa;CAAa,CAAC;AAElG,MAAM,aAAa,MAA+B,qBAAqB,SAAS,EAAE,KAAK;AACvF,MAAM,aAAa,MAAY,EAAE,QAAQ;AAEzC,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,MAAM,kBAAkB;CAChC,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,MAAM;CACzD,MAAM,CAAC,WAAW,gBAAgB,MAAM,UAAkB;CAC1D,MAAM,OAAO,cAAc;CAC3B,MAAM,WAAW,MAAM,OAAgC,KAAK;CAC5D,MAAM,mBAAmB,SAAS,SAAS,OAAO;CAElD,MAAM,EAAE,gBAAgB,gBAAgB,OAAO,eAAe,yBAA0B,GAAG,SAAS;CAEpG,MAAM,eAAe;AACnB,gBAAc,CAAC,WAAW;;CAG5B,MAAM,kBAAkB,SAAsB;AAC5C,MAAI,SAAS,KACX,QAAO,aAAa,GAAG;AAGzB,EAAK,aAAa,KAAK,CAAC,KAAK,aAAa;AAC1C,OAAK,YAAY;AACjB,SAAO,eAAe,KAAK,CACxB,WAAW;AACV,WAAQ;AACR,QAAK,SAAS;IACd,CACD,OAAM,QAAO,YAAY,KAAK,EAAE,EAAE,KAAK,SAAS,CAAC;;CAGtD,MAAM,eAAe,YAAY;AAC/B,OAAK,YAAY;AACjB,QAAM,eAAe,KAAK;AAC1B,SAAO,kBAAkB;;CAG3B,MAAM,SAAS,OAAO,MAAwB;AAC5C,MAAI,CAAC,EACH;AAGF,MAAI,CAAC,UAAU,EAAE,EAAE;AACjB,QAAK,SAAS,EAAE,iBAAiB,4CAA4C,CAAC,CAAC;AAC/E;;AAGF,MAAI,CAAC,UAAU,EAAE,EAAE;AACjB,QAAK,SAAS,EAAE,iBAAiB,6CAA6C,CAAC,CAAC;AAChF;;AAGF,QAAM,eAAe,EAAE;;CAGzB,MAAM,iBAAiB,YACnB,MAAM,aAAa,eAAe,EAAE,UAAU,WAAW,CAAC,GAC1D,2BACE,MAAM,aAAa,0BAA0B,EAAE,SAAS,YAAY,CAAC,GACrE;AAEN,QACE,qBAAC;EAAI,KAAK;aACR,oBAAC;GACC,MAAK;GACL,QAAQ,qBAAqB,KAAK,IAAI;GACtC,OAAO,EAAE,SAAS,QAAQ;GAC1B,KAAK;GACL,WAAU,MAAK,OAAO,EAAE,cAAc,QAAQ,GAAG;IACjD,EAEF,qBAAC;GACC,KAAK;GACL,OAAM;GACN,GAAI;cAEH,gBACD,qBAAC;IAAI,KAAK;eACR,qBAAC;KACC,mBAAmB,YAAY;KAC/B,KAAK;gBAEL,oBAAC;MACC,mBAAmB,YAAY;MAC/B,iBAAiB,iBAAiB,4CAA4C;MAC9E,YAAY,KAAK;MACjB,SAAQ;MACR,MAAK;MACL,SAAS;OACT,EAED,CAAC,CAAC,kBAAkB,CAAC,cACpB,oBAAC;MACC,mBAAmB,YAAY;MAC/B,iBAAiB,iBAAiB,6DAA6D;MAC/F,YAAY,KAAK;MACjB,KAAI,SAAM,EAAE,OAAOA,IAAE,OAAO,YAAY;MACxC,SAAQ;MACR,aAAY;MACZ,SAAS;MACT,MAAK;OACL;MAEC,EACP,oBAAC;KACC,aAAY;KACZ,KAAI,SAAM,EAAE,UAAUA,IAAE,UAAU,KAAK;KACvC,iBAAiB,iBAAiB,2CAA2C;MAC7E;KACE;IACD;GACH"}

package/dist/elements/Card/CardFooter.js CHANGED Viewed

@@ -16,7 +16,7 @@ const CardFooter = React.forwardRef((props, ref) => {
 	const { displayConfig } = useEnvironment();
 	const { branded } = displayConfig;
 	const { showDevModeNotice } = useDevMode();
-	const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
+	const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedOptions;
 	const showSponsorAndLinks = isProfileFooter ? branded : !!(branded || helpPageUrl || privacyPageUrl || termsPageUrl);
 	if (!children && !(showSponsorAndLinks || showDevModeNotice)) return null;
 	const footerStyles = (t) => ({
@@ -66,7 +66,7 @@ const CardFooterLink = (props) => {
 	});
 };
 const CardFooterLinks = React.memo(() => {
-	const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout;
+	const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedOptions;
 	if (!helpPageUrl && !privacyPageUrl && !termsPageUrl) return null;
 	return /* @__PURE__ */ jsxs(Flex, {
 		elementDescriptor: descriptors.footerPages,

package/dist/elements/Card/CardFooter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardFooter.js","names":[],"sources":["../../../src/elements/Card/CardFooter.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useEnvironment } from '../../contexts';\nimport { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';\nimport { useDevMode } from '../../hooks/useDevMode';\nimport type { InternalTheme, PropsOfComponent } from '../../styledSystem';\nimport { common, mqu } from '../../styledSystem';\nimport { Card } from '.';\n\ntype CardFooterProps = PropsOfComponent<typeof Flex> & {\n isProfileFooter?: boolean;\n};\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {\n const { children, isProfileFooter = false, sx, ...rest } = props;\n const { displayConfig } = useEnvironment();\n const { branded } = displayConfig;\n const { showDevModeNotice } = useDevMode();\n const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().~~parsedLayout~~;\n const sponsorOrLinksExist = !!(branded \|\| helpPageUrl \|\| privacyPageUrl \|\| termsPageUrl);\n const showSponsorAndLinks = isProfileFooter ? branded : sponsorOrLinksExist;\n\n if (!children && !(showSponsorAndLinks \|\| showDevModeNotice)) {\n return null;\n }\n\n const footerStyles = (t: InternalTheme) => ({\n '>:first-of-type': {\n padding: `${t.space.$4} ${t.space.$8} ${t.space.$4} ${t.space.$8}`,\n },\n '>:not(:first-of-type)': {\n padding: `${t.space.$4} ${t.space.$8}`,\n borderTopWidth: t.borderWidths.$normal,\n borderTopStyle: t.borderStyles.$solid,\n borderTopColor: t.colors.$borderAlpha100,\n },\n });\n\n const profileCardFooterStyles = (t: InternalTheme) => ({\n padding: `${t.space.$4} ${t.space.$8}`,\n });\n\n return (\n <Flex\n direction='col'\n align='center'\n justify='center'\n elementDescriptor={descriptors.footer}\n sx={[\n t => ({\n marginTop: `calc(${t.space.$2} * -1)`,\n paddingTop: t.space.$2,\n background: common.mutedBackground(t),\n '&:empty': {\n padding: 0,\n marginTop: 0,\n },\n }),\n !isProfileFooter && footerStyles,\n sx,\n ]}\n {...rest}\n ref={ref}\n >\n {children}\n\n <Card.ClerkAndPagesTag\n withFooterPages={showSponsorAndLinks && !isProfileFooter}\n devModeNoticeSx={t => ({\n padding: t.space.$none,\n })}\n outerSx={isProfileFooter ? profileCardFooterStyles : undefined}\n withDevOverlay\n />\n </Flex>\n );\n});\n\nconst CardFooterLink = (props: PropsOfComponent<typeof Link>): JSX.Element => {\n return (\n <Link\n elementDescriptor={descriptors.footerPagesLink}\n {...props}\n colorScheme='neutral'\n variant='buttonSmall'\n />\n );\n};\n\nexport const CardFooterLinks = React.memo((): JSX.Element \| null => {\n const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().~~parsedLayout~~;\n\n if (!helpPageUrl && !privacyPageUrl && !termsPageUrl) {\n return null;\n }\n\n return (\n <Flex\n elementDescriptor={descriptors.footerPages}\n justify='between'\n sx={t => ({\n gap: t.space.$3,\n [mqu.sm]: {\n gap: t.space.$2,\n },\n })}\n >\n {helpPageUrl && (\n <CardFooterLink\n localizationKey={localizationKeys('footerPageLink__help')}\n elementId={descriptors.footerPagesLink.setId('help')}\n isExternal\n href={helpPageUrl}\n />\n )}\n {privacyPageUrl && (\n <CardFooterLink\n localizationKey={localizationKeys('footerPageLink__privacy')}\n elementId={descriptors.footerPagesLink.setId('privacy')}\n isExternal\n href={privacyPageUrl}\n />\n )}\n {termsPageUrl && (\n <CardFooterLink\n localizationKey={localizationKeys('footerPageLink__terms')}\n elementId={descriptors.footerPagesLink.setId('terms')}\n isExternal\n href={termsPageUrl}\n />\n )}\n </Flex>\n );\n});\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,aAAa,MAAM,YAA6C,OAAO,QAAQ;CAC1F,MAAM,EAAE,UAAU,kBAAkB,OAAO,GAAI,GAAG,SAAS;CAC3D,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,YAAY;CACpB,MAAM,EAAE,sBAAsB,YAAY;CAC1C,MAAM,EAAE,aAAa,gBAAgB,iBAAiB,eAAe,CAAC;CAEtE,MAAM,sBAAsB,kBAAkB,UADlB,CAAC,EAAE,WAAW,eAAe,kBAAkB;AAG3E,KAAI,CAAC,YAAY,EAAE,uBAAuB,mBACxC,QAAO;CAGT,MAAM,gBAAgB,OAAsB;EAC1C,mBAAmB,EACjB,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,MAC/D;EACD,yBAAyB;GACvB,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM;GAClC,gBAAgB,EAAE,aAAa;GAC/B,gBAAgB,EAAE,aAAa;GAC/B,gBAAgB,EAAE,OAAO;GAC1B;EACF;CAED,MAAM,2BAA2B,OAAsB,EACrD,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,MACnC;AAED,QACE,qBAAC;EACC,WAAU;EACV,OAAM;EACN,SAAQ;EACR,mBAAmB,YAAY;EAC/B,IAAI;IACF,OAAM;IACJ,WAAW,QAAQ,EAAE,MAAM,GAAG;IAC9B,YAAY,EAAE,MAAM;IACpB,YAAY,OAAO,gBAAgB,EAAE;IACrC,WAAW;KACT,SAAS;KACT,WAAW;KACZ;IACF;GACD,CAAC,mBAAmB;GACpB;GACD;EACD,GAAI;EACC;aAEJ,UAED,oBAAC,KAAK;GACJ,iBAAiB,uBAAuB,CAAC;GACzC,kBAAiB,OAAM,EACrB,SAAS,EAAE,MAAM,OAClB;GACD,SAAS,kBAAkB,0BAA0B;GACrD;IACA;GACG;EAET;AAEF,MAAM,kBAAkB,UAAsD;AAC5E,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,GAAI;EACJ,aAAY;EACZ,SAAQ;GACR;;AAIN,MAAa,kBAAkB,MAAM,WAA+B;CAClE,MAAM,EAAE,aAAa,gBAAgB,iBAAiB,eAAe,CAAC;AAEtE,KAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,aACtC,QAAO;AAGT,QACE,qBAAC;EACC,mBAAmB,YAAY;EAC/B,SAAQ;EACR,KAAI,OAAM;GACR,KAAK,EAAE,MAAM;IACZ,IAAI,KAAK,EACR,KAAK,EAAE,MAAM,IACd;GACF;;GAEA,eACC,oBAAC;IACC,iBAAiB,iBAAiB,uBAAuB;IACzD,WAAW,YAAY,gBAAgB,MAAM,OAAO;IACpD;IACA,MAAM;KACN;GAEH,kBACC,oBAAC;IACC,iBAAiB,iBAAiB,0BAA0B;IAC5D,WAAW,YAAY,gBAAgB,MAAM,UAAU;IACvD;IACA,MAAM;KACN;GAEH,gBACC,oBAAC;IACC,iBAAiB,iBAAiB,wBAAwB;IAC1D,WAAW,YAAY,gBAAgB,MAAM,QAAQ;IACrD;IACA,MAAM;KACN;;GAEC;EAET"}
1	+ {"version":3,"file":"CardFooter.js","names":[],"sources":["../../../src/elements/Card/CardFooter.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useEnvironment } from '../../contexts';\nimport { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';\nimport { useDevMode } from '../../hooks/useDevMode';\nimport type { InternalTheme, PropsOfComponent } from '../../styledSystem';\nimport { common, mqu } from '../../styledSystem';\nimport { Card } from '.';\n\ntype CardFooterProps = PropsOfComponent<typeof Flex> & {\n isProfileFooter?: boolean;\n};\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {\n const { children, isProfileFooter = false, sx, ...rest } = props;\n const { displayConfig } = useEnvironment();\n const { branded } = displayConfig;\n const { showDevModeNotice } = useDevMode();\n const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedOptions;\n const sponsorOrLinksExist = !!(branded \|\| helpPageUrl \|\| privacyPageUrl \|\| termsPageUrl);\n const showSponsorAndLinks = isProfileFooter ? branded : sponsorOrLinksExist;\n\n if (!children && !(showSponsorAndLinks \|\| showDevModeNotice)) {\n return null;\n }\n\n const footerStyles = (t: InternalTheme) => ({\n '>:first-of-type': {\n padding: `${t.space.$4} ${t.space.$8} ${t.space.$4} ${t.space.$8}`,\n },\n '>:not(:first-of-type)': {\n padding: `${t.space.$4} ${t.space.$8}`,\n borderTopWidth: t.borderWidths.$normal,\n borderTopStyle: t.borderStyles.$solid,\n borderTopColor: t.colors.$borderAlpha100,\n },\n });\n\n const profileCardFooterStyles = (t: InternalTheme) => ({\n padding: `${t.space.$4} ${t.space.$8}`,\n });\n\n return (\n <Flex\n direction='col'\n align='center'\n justify='center'\n elementDescriptor={descriptors.footer}\n sx={[\n t => ({\n marginTop: `calc(${t.space.$2} * -1)`,\n paddingTop: t.space.$2,\n background: common.mutedBackground(t),\n '&:empty': {\n padding: 0,\n marginTop: 0,\n },\n }),\n !isProfileFooter && footerStyles,\n sx,\n ]}\n {...rest}\n ref={ref}\n >\n {children}\n\n <Card.ClerkAndPagesTag\n withFooterPages={showSponsorAndLinks && !isProfileFooter}\n devModeNoticeSx={t => ({\n padding: t.space.$none,\n })}\n outerSx={isProfileFooter ? profileCardFooterStyles : undefined}\n withDevOverlay\n />\n </Flex>\n );\n});\n\nconst CardFooterLink = (props: PropsOfComponent<typeof Link>): JSX.Element => {\n return (\n <Link\n elementDescriptor={descriptors.footerPagesLink}\n {...props}\n colorScheme='neutral'\n variant='buttonSmall'\n />\n );\n};\n\nexport const CardFooterLinks = React.memo((): JSX.Element \| null => {\n const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedOptions;\n\n if (!helpPageUrl && !privacyPageUrl && !termsPageUrl) {\n return null;\n }\n\n return (\n <Flex\n elementDescriptor={descriptors.footerPages}\n justify='between'\n sx={t => ({\n gap: t.space.$3,\n [mqu.sm]: {\n gap: t.space.$2,\n },\n })}\n >\n {helpPageUrl && (\n <CardFooterLink\n localizationKey={localizationKeys('footerPageLink__help')}\n elementId={descriptors.footerPagesLink.setId('help')}\n isExternal\n href={helpPageUrl}\n />\n )}\n {privacyPageUrl && (\n <CardFooterLink\n localizationKey={localizationKeys('footerPageLink__privacy')}\n elementId={descriptors.footerPagesLink.setId('privacy')}\n isExternal\n href={privacyPageUrl}\n />\n )}\n {termsPageUrl && (\n <CardFooterLink\n localizationKey={localizationKeys('footerPageLink__terms')}\n elementId={descriptors.footerPagesLink.setId('terms')}\n isExternal\n href={termsPageUrl}\n />\n )}\n </Flex>\n );\n});\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,aAAa,MAAM,YAA6C,OAAO,QAAQ;CAC1F,MAAM,EAAE,UAAU,kBAAkB,OAAO,GAAI,GAAG,SAAS;CAC3D,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,YAAY;CACpB,MAAM,EAAE,sBAAsB,YAAY;CAC1C,MAAM,EAAE,aAAa,gBAAgB,iBAAiB,eAAe,CAAC;CAEtE,MAAM,sBAAsB,kBAAkB,UADlB,CAAC,EAAE,WAAW,eAAe,kBAAkB;AAG3E,KAAI,CAAC,YAAY,EAAE,uBAAuB,mBACxC,QAAO;CAGT,MAAM,gBAAgB,OAAsB;EAC1C,mBAAmB,EACjB,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,MAC/D;EACD,yBAAyB;GACvB,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM;GAClC,gBAAgB,EAAE,aAAa;GAC/B,gBAAgB,EAAE,aAAa;GAC/B,gBAAgB,EAAE,OAAO;GAC1B;EACF;CAED,MAAM,2BAA2B,OAAsB,EACrD,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,MACnC;AAED,QACE,qBAAC;EACC,WAAU;EACV,OAAM;EACN,SAAQ;EACR,mBAAmB,YAAY;EAC/B,IAAI;IACF,OAAM;IACJ,WAAW,QAAQ,EAAE,MAAM,GAAG;IAC9B,YAAY,EAAE,MAAM;IACpB,YAAY,OAAO,gBAAgB,EAAE;IACrC,WAAW;KACT,SAAS;KACT,WAAW;KACZ;IACF;GACD,CAAC,mBAAmB;GACpB;GACD;EACD,GAAI;EACC;aAEJ,UAED,oBAAC,KAAK;GACJ,iBAAiB,uBAAuB,CAAC;GACzC,kBAAiB,OAAM,EACrB,SAAS,EAAE,MAAM,OAClB;GACD,SAAS,kBAAkB,0BAA0B;GACrD;IACA;GACG;EAET;AAEF,MAAM,kBAAkB,UAAsD;AAC5E,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,GAAI;EACJ,aAAY;EACZ,SAAQ;GACR;;AAIN,MAAa,kBAAkB,MAAM,WAA+B;CAClE,MAAM,EAAE,aAAa,gBAAgB,iBAAiB,eAAe,CAAC;AAEtE,KAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,aACtC,QAAO;AAGT,QACE,qBAAC;EACC,mBAAmB,YAAY;EAC/B,SAAQ;EACR,KAAI,OAAM;GACR,KAAK,EAAE,MAAM;IACZ,IAAI,KAAK,EACR,KAAK,EAAE,MAAM,IACd;GACF;;GAEA,eACC,oBAAC;IACC,iBAAiB,iBAAiB,uBAAuB;IACzD,WAAW,YAAY,gBAAgB,MAAM,OAAO;IACpD;IACA,MAAM;KACN;GAEH,kBACC,oBAAC;IACC,iBAAiB,iBAAiB,0BAA0B;IAC5D,WAAW,YAAY,gBAAgB,MAAM,UAAU;IACvD;IACA,MAAM;KACN;GAEH,gBACC,oBAAC;IACC,iBAAiB,iBAAiB,wBAAwB;IAC1D,WAAW,YAAY,gBAAgB,MAAM,QAAQ;IACrD;IACA,MAAM;KACN;;GAEC;EAET"}

package/dist/elements/Card/CardRoot.js CHANGED Viewed

@@ -13,7 +13,7 @@ const CardRoot = React.forwardRef((props, ref) => {
 	const { sx, children,...rest } = props;
 	const appearance = useAppearance();
 	const flowMetadata = useFlowMetadata();
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [appearance.parsedLayout.logoPlacement === "outside" && /* @__PURE__ */ jsx(ApplicationLogo, { sx: (t) => ({
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [appearance.parsedOptions.logoPlacement === "outside" && /* @__PURE__ */ jsx(ApplicationLogo, { sx: (t) => ({
 		position: "relative",
 		[mqu.sm]: { margin: `0 0 ${t.space.$7} 0` }
 	}) }), /* @__PURE__ */ jsx(Col, {

package/dist/elements/Card/CardRoot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardRoot.js","names":[],"sources":["../../../src/elements/Card/CardRoot.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Col, descriptors, generateFlowPartClassname, useAppearance } from '../../customizables';\nimport type { ElementDescriptor } from '../../customizables/elementDescriptors';\nimport type { PropsOfComponent } from '../../styledSystem';\nimport { mqu } from '../../styledSystem';\nimport { ApplicationLogo } from '../ApplicationLogo';\nimport { useFlowMetadata } from '../contexts';\n\ntype CardRootProps = PropsOfComponent<typeof Col>;\nexport const CardRoot = React.forwardRef<HTMLDivElement, CardRootProps>((props, ref) => {\n const { sx, children, ...rest } = props;\n const appearance = useAppearance();\n const flowMetadata = useFlowMetadata();\n\n return (\n <>\n {appearance.~~parsedLayout~~.logoPlacement === 'outside' && (\n <ApplicationLogo\n sx={t => ({\n position: 'relative',\n [mqu.sm]: {\n margin: `0 0 ${t.space.$7} 0`,\n },\n })}\n />\n )}\n <Col\n elementDescriptor={[descriptors.cardBox, props.elementDescriptor as ElementDescriptor]}\n className={generateFlowPartClassname(flowMetadata)}\n ref={ref}\n sx={[\n t => ({\n /*\n All components should create their own stack context\n * https://developer.mozilla.org/en-US/docs/Web/CSS/isolation\n */\n isolation: 'isolate',\n maxWidth: `calc(100vw - ${t.sizes.$10})`,\n width: t.sizes.$100,\n borderWidth: t.borderWidths.$normal,\n borderStyle: t.borderStyles.$solid,\n borderColor: t.colors.$borderAlpha150,\n borderRadius: t.radii.$xl,\n color: t.colors.$colorForeground,\n position: 'relative',\n overflow: 'hidden',\n }),\n sx,\n ]}\n {...rest}\n >\n {children}\n </Col>\n </>\n );\n});\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,WAAW,MAAM,YAA2C,OAAO,QAAQ;CACtF,MAAM,EAAE,IAAI,SAAU,GAAG,SAAS;CAClC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,iBAAiB;AAEtC,QACE,8CACG,WAAW,~~aAAa~~,kBAAkB,~~aACzC~~,oBAAC,mBACC,KAAI,OAAM;EACR,UAAU;GACT,IAAI,KAAK,EACR,QAAQ,OAAO,EAAE,MAAM,GAAG,KAC3B;EACF,IACD,EAEJ,oBAAC;EACC,mBAAmB,CAAC,YAAY,SAAS,MAAM,kBAAuC;EACtF,WAAW,0BAA0B,aAAa;EAC7C;EACL,IAAI,EACF,OAAM;GAKJ,WAAW;GACX,UAAU,gBAAgB,EAAE,MAAM,IAAI;GACtC,OAAO,EAAE,MAAM;GACf,aAAa,EAAE,aAAa;GAC5B,aAAa,EAAE,aAAa;GAC5B,aAAa,EAAE,OAAO;GACtB,cAAc,EAAE,MAAM;GACtB,OAAO,EAAE,OAAO;GAChB,UAAU;GACV,UAAU;GACX,GACD,GACD;EACD,GAAI;EAEH;GACG,IACL;EAEL"}
1	+ {"version":3,"file":"CardRoot.js","names":[],"sources":["../../../src/elements/Card/CardRoot.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Col, descriptors, generateFlowPartClassname, useAppearance } from '../../customizables';\nimport type { ElementDescriptor } from '../../customizables/elementDescriptors';\nimport type { PropsOfComponent } from '../../styledSystem';\nimport { mqu } from '../../styledSystem';\nimport { ApplicationLogo } from '../ApplicationLogo';\nimport { useFlowMetadata } from '../contexts';\n\ntype CardRootProps = PropsOfComponent<typeof Col>;\nexport const CardRoot = React.forwardRef<HTMLDivElement, CardRootProps>((props, ref) => {\n const { sx, children, ...rest } = props;\n const appearance = useAppearance();\n const flowMetadata = useFlowMetadata();\n\n return (\n <>\n {appearance.parsedOptions.logoPlacement === 'outside' && (\n <ApplicationLogo\n sx={t => ({\n position: 'relative',\n [mqu.sm]: {\n margin: `0 0 ${t.space.$7} 0`,\n },\n })}\n />\n )}\n <Col\n elementDescriptor={[descriptors.cardBox, props.elementDescriptor as ElementDescriptor]}\n className={generateFlowPartClassname(flowMetadata)}\n ref={ref}\n sx={[\n t => ({\n /*\n All components should create their own stack context\n * https://developer.mozilla.org/en-US/docs/Web/CSS/isolation\n */\n isolation: 'isolate',\n maxWidth: `calc(100vw - ${t.sizes.$10})`,\n width: t.sizes.$100,\n borderWidth: t.borderWidths.$normal,\n borderStyle: t.borderStyles.$solid,\n borderColor: t.colors.$borderAlpha150,\n borderRadius: t.radii.$xl,\n color: t.colors.$colorForeground,\n position: 'relative',\n overflow: 'hidden',\n }),\n sx,\n ]}\n {...rest}\n >\n {children}\n </Col>\n </>\n );\n});\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,WAAW,MAAM,YAA2C,OAAO,QAAQ;CACtF,MAAM,EAAE,IAAI,SAAU,GAAG,SAAS;CAClC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,iBAAiB;AAEtC,QACE,8CACG,WAAW,cAAc,kBAAkB,aAC1C,oBAAC,mBACC,KAAI,OAAM;EACR,UAAU;GACT,IAAI,KAAK,EACR,QAAQ,OAAO,EAAE,MAAM,GAAG,KAC3B;EACF,IACD,EAEJ,oBAAC;EACC,mBAAmB,CAAC,YAAY,SAAS,MAAM,kBAAuC;EACtF,WAAW,0BAA0B,aAAa;EAC7C;EACL,IAAI,EACF,OAAM;GAKJ,WAAW;GACX,UAAU,gBAAgB,EAAE,MAAM,IAAI;GACtC,OAAO,EAAE,MAAM;GACf,aAAa,EAAE,aAAa;GAC5B,aAAa,EAAE,aAAa;GAC5B,aAAa,EAAE,OAAO;GACtB,cAAc,EAAE,MAAM;GACtB,OAAO,EAAE,OAAO;GAChB,UAAU;GACV,UAAU;GACX,GACD,GACD;EACD,GAAI;EAEH;GACG,IACL;EAEL"}

package/dist/elements/Drawer.js CHANGED Viewed

@@ -100,7 +100,7 @@ const Overlay = React$1.forwardRef((_, ref) => {
 Overlay.displayName = "Drawer.Overlay";
 const Content = React$1.forwardRef(({ children }, ref) => {
 	const prefersReducedMotion = usePrefersReducedMotion();
-	const { animations: layoutAnimations } = useAppearance().parsedLayout;
+	const { animations: layoutAnimations } = useAppearance().parsedOptions;
 	const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
 	const { strategy, refs, context, getFloatingProps, direction } = useDrawerContext();
 	const mergedRefs = useMergeRefs([ref, refs.setFloating]);
@@ -244,7 +244,7 @@ const Close = React$1.forwardRef((_, ref) => {
 Close.displayName = "Drawer.Close";
 const Confirmation = React$1.forwardRef(({ open, onOpenChange, children, actionsSlot, roleProps }, ref) => {
 	const prefersReducedMotion = usePrefersReducedMotion();
-	const { animations: layoutAnimations } = useAppearance().parsedLayout;
+	const { animations: layoutAnimations } = useAppearance().parsedOptions;
 	const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
 	const { refs, context } = useFloating({
 		open,

package/dist/elements/Drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","names":["React","FloatingOverlay","CloseIcon"],"sources":["../../src/elements/Drawer.tsx"],"sourcesContent":["import { useSafeLayoutEffect } from '@clerk/shared/react/index';\nimport type { UseDismissProps, UseFloatingOptions, UseRoleProps } from '@floating-ui/react';\nimport {\n FloatingFocusManager,\n FloatingPortal,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport * as React from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../customizables';\nimport { transitionDurationValues, transitionTiming } from '../foundations/transitions';\nimport { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';\nimport { Close as CloseIcon } from '../icons';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { common } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { IconButton } from './IconButton';\n\ntype FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer Context\n * -----------------------------------------------------------------------------------------------/\n\ninterface DrawerContext {\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n strategy: UseFloatingOptions['strategy'];\n refs: ReturnType<typeof useFloating>['refs'];\n context: ReturnType<typeof useFloating>['context'];\n getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n portalProps: FloatingPortalProps;\n direction: ReturnType<typeof useDirection>;\n}\n\nconst DrawerContext = React.createContext<DrawerContext \| null>(null);\n\nexport const useDrawerContext = () => {\n const context = React.useContext(DrawerContext);\n if (!context) {\n throw new Error('Drawer components must be wrapped in <Drawer.Root>');\n }\n return context;\n};\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------/\n\ninterface RootProps {\n children: React.ReactNode;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /\n The strategy to use when positioning the floating element.\n * @default 'fixed'\n * @see https://floating-ui.com/docs/useFloating#strategy\n /\n strategy?: UseFloatingOptions['strategy'];\n /\n @see https://floating-ui.com/docs/useFloating\n /\n floatingProps?: Omit<UseFloatingOptions, 'open' \| 'onOpenChange' \| 'strategy' \| 'transform'>;\n /\n @see https://floating-ui.com/docs/FloatingPortal\n /\n portalProps?: FloatingPortalProps;\n /\n @see https://floating-ui.com/docs/useDismiss\n /\n dismissProps?: UseDismissProps;\n}\n\nfunction Root({\n children,\n open,\n onOpenChange,\n strategy = 'fixed',\n floatingProps,\n portalProps,\n dismissProps,\n}: RootProps) {\n const direction = useDirection();\n\n const { refs, context } = useFloating({\n open,\n onOpenChange,\n transform: false,\n strategy,\n placement: direction === 'ltr' ? 'right' : 'left',\n ...floatingProps,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, dismissProps),\n useRole(context),\n ]);\n\n return (\n <DrawerContext.Provider\n value={{\n isOpen: open,\n setIsOpen: onOpenChange,\n strategy,\n portalProps: portalProps \|\| {},\n refs,\n context,\n getFloatingProps,\n direction,\n }}\n >\n <FloatingPortal {...portalProps}>{children}</FloatingPortal>\n </DrawerContext.Provider>\n );\n}\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Overlay\n * -----------------------------------------------------------------------------------------------/\n\nexport const FloatingOverlay = React.forwardRef(function FloatingOverlay(\n props: React.ComponentPropsWithoutRef<typeof Box>,\n ref: React.ForwardedRef<HTMLDivElement>,\n) {\n const { strategy } = useDrawerContext();\n const { disableScrollLock, enableScrollLock } = useScrollLock();\n\n useSafeLayoutEffect(() => {\n if (strategy !== 'fixed') {\n return;\n }\n enableScrollLock();\n return () => {\n disableScrollLock();\n };\n }, [strategy, disableScrollLock, enableScrollLock]);\n\n return (\n <Box\n ref={ref}\n {...props}\n elementDescriptor={descriptors.drawerBackdrop}\n sx={[\n t => ({\n inset: 0,\n backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),\n }),\n props.sx,\n ]}\n />\n );\n});\n\nconst Overlay = React.forwardRef<HTMLDivElement>((_, ref) => {\n const { strategy, context } = useDrawerContext();\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n close: { opacity: 0 },\n common: {\n position: strategy,\n inset: 0,\n transitionProperty: 'opacity',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: transitionDurationValues.drawer,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <FloatingOverlay\n ref={ref}\n style={{\n ...transitionStyles,\n }}\n />\n );\n});\n\nOverlay.displayName = 'Drawer.Overlay';\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Content\n * -----------------------------------------------------------------------------------------------/\n\ninterface ContentProps {\n children: React.ReactNode;\n}\n\nconst Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, ref) => {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedLayout;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n const { strategy, refs, context, getFloatingProps, direction } = useDrawerContext();\n const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n open: { transform: 'translate3d(0, 0, 0)' },\n close: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n common: {\n transitionProperty: 'transform',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <FloatingFocusManager\n context={context}\n modal\n outsideElementsInert\n initialFocus={refs.floating}\n >\n <Box\n ref={mergedRefs}\n {...getFloatingProps()}\n sx={t => ({\n position: strategy,\n insetBlock: 0,\n insetInline: 0,\n pointerEvents: 'none',\n isolation: 'isolate',\n // When drawer is within the profile components, we need to ensure it is above the drawer\n // renders above the profile close button\n zIndex: strategy === 'absolute' ? t.zIndices.$modal : undefined,\n })}\n elementDescriptor={descriptors.drawerRoot}\n >\n <Flex\n elementDescriptor={descriptors.drawerContent}\n style={transitionStyles}\n direction='col'\n sx={t => ({\n // Apply the conditional right offset + the spread of the\n // box shadow to ensure it is fully offscreen before unmounting\n '--transform-offset':\n strategy === 'fixed'\n ? `calc((100% + ${t.space.$3} + ${t.space.$8x75}) ${direction === 'rtl' ? -1 : 1})`\n : `calc((100% + ${t.space.$8x75}) * ${direction === 'rtl' ? -1 : 1})`,\n willChange: 'transform',\n position: strategy,\n insetBlock: strategy === 'fixed' ? t.space.$3 : 0,\n insetInlineEnd: strategy === 'fixed' ? t.space.$3 : 0,\n outline: 0,\n width: t.sizes.$100,\n maxWidth: strategy === 'fixed' ? `calc(100% - ${t.space.$6})` : '100%',\n backgroundColor: t.colors.$colorBackground,\n borderStartStartRadius: t.radii.$lg,\n borderEndStartRadius: t.radii.$lg,\n borderEndEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n borderStartEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n borderWidth: t.borderWidths.$normal,\n borderStyle: t.borderStyles.$solid,\n borderColor: t.colors.$borderAlpha150,\n overflow: 'hidden',\n pointerEvents: 'auto',\n })}\n >\n {children}\n </Flex>\n </Box>\n </FloatingFocusManager>\n );\n});\n\nContent.displayName = 'Drawer.Content';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Header\n * -----------------------------------------------------------------------------------------------/\n\ninterface HeaderProps {\n title?: string \| LocalizationKey;\n children?: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children, sx }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerHeader}\n as='header'\n sx={[\n t => ({\n display: 'flex',\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n borderBlockEndWidth: t.borderWidths.$normal,\n borderBlockEndStyle: t.borderStyles.$solid,\n borderBlockEndColor: t.colors.$borderAlpha150,\n borderStartStartRadius: t.radii.$lg,\n borderStartEndRadius: t.radii.$lg,\n paddingBlock: title ? t.space.$3 : undefined,\n paddingInline: title ? t.space.$4 : undefined,\n }),\n sx,\n ]}\n >\n {title ? (\n <>\n <Heading\n localizationKey={title}\n as='h2'\n elementDescriptor={descriptors.drawerTitle}\n textVariant='h2'\n sx={{\n alignSelf: 'center',\n }}\n />\n <Close />\n </>\n ) : (\n children\n )}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------/\n\ninterface BodyProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Body = React.forwardRef<HTMLDivElement, BodyProps>(({ children, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerBody}\n sx={[\n () => ({\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n }),\n props.sx,\n ]}\n {...props}\n >\n {children}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Footer\n * -----------------------------------------------------------------------------------------------/\n\ninterface FooterProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerFooter}\n sx={[\n t => ({\n display: 'flex',\n flexDirection: 'column',\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n borderBlockStartWidth: t.borderWidths.$normal,\n borderBlockStartStyle: t.borderStyles.$solid,\n borderBlockStartColor: t.colors.$borderAlpha100,\n borderEndStartRadius: t.radii.$xl,\n borderEndEndRadius: t.radii.$xl,\n paddingBlock: t.space.$3,\n paddingInline: t.space.$4,\n }),\n sx,\n ]}\n {...props}\n >\n {children}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Close\n * -----------------------------------------------------------------------------------------------/\n\nconst Close = React.forwardRef<HTMLButtonElement>((_, ref) => {\n const { setIsOpen } = useDrawerContext();\n return (\n <IconButton\n ref={ref}\n elementDescriptor={descriptors.drawerClose}\n variant='ghost'\n aria-label='Close drawer'\n onClick={() => setIsOpen(false)}\n icon={\n <Icon\n icon={CloseIcon}\n size='sm'\n />\n }\n sx={t => ({\n color: t.colors.$colorMutedForeground,\n padding: t.space.$3,\n marginInlineStart: 'auto',\n })}\n />\n );\n});\n\nClose.displayName = 'Drawer.Close';\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Confirmation\n * -----------------------------------------------------------------------------------------------/\n\ninterface ConfirmationProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n children: React.ReactNode;\n actionsSlot: React.ReactNode;\n /\n @see https://floating-ui.com/docs/userole\n */\n roleProps?: UseRoleProps;\n}\n\nconst Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(\n ({ open, onOpenChange, children, actionsSlot, roleProps }, ref) => {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedLayout;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n const { refs, context } = useFloating({\n open,\n onOpenChange,\n transform: false,\n strategy: 'absolute',\n });\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context),\n useRole(context, { role: 'alertdialog', ...roleProps }),\n ]);\n\n const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n const { styles: overlayTransitionStyles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n close: { opacity: 0 },\n common: {\n transitionProperty: 'opacity',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: transitionDurationValues.drawer,\n });\n\n const { isMounted, styles: modalTransitionStyles } = useTransitionStyles(context, {\n initial: { transform: 'translate3D(0, 100%, 0)' },\n open: { transform: 'translate3D(0, 0, 0)' },\n close: { transform: 'translate3D(0, 100%, 0)' },\n common: {\n transitionProperty: 'transform',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <>\n <Span\n elementDescriptor={descriptors.drawerConfirmationBackdrop}\n style={overlayTransitionStyles}\n sx={t => ({\n position: 'absolute',\n inset: 0,\n backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,\n })}\n />\n\n <FloatingFocusManager\n context={context}\n modal\n outsideElementsInert\n initialFocus={refs.floating}\n >\n <Box\n ref={mergedRefs}\n elementDescriptor={descriptors.drawerConfirmationRoot}\n style={modalTransitionStyles}\n {...getFloatingProps()}\n sx={t => ({\n display: 'flex',\n flexDirection: 'column',\n rowGap: t.space.$6,\n outline: 'none',\n willChange: 'transform',\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n padding: t.space.$4,\n borderStartStartRadius: t.radii.$md,\n borderStartEndRadius: t.radii.$md,\n boxShadow: `0 0 0 1px ${t.colors.$borderAlpha100}`,\n })}\n >\n {children}\n\n <Flex\n elementDescriptor={descriptors.drawerConfirmationActions}\n gap={3}\n justify='end'\n >\n {actionsSlot}\n </Flex>\n </Box>\n </FloatingFocusManager>\n </>\n );\n },\n);\n\nConfirmation.displayName = 'Drawer.Confirmation';\n\nexport const Drawer = {\n Root,\n Overlay,\n Content,\n Header,\n Body,\n Footer,\n Confirmation,\n Close,\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Drawer.js","names":["React","FloatingOverlay","CloseIcon"],"sources":["../../src/elements/Drawer.tsx"],"sourcesContent":["import { useSafeLayoutEffect } from '@clerk/shared/react/index';\nimport type { UseDismissProps, UseFloatingOptions, UseRoleProps } from '@floating-ui/react';\nimport {\n FloatingFocusManager,\n FloatingPortal,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport * as React from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../customizables';\nimport { transitionDurationValues, transitionTiming } from '../foundations/transitions';\nimport { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';\nimport { Close as CloseIcon } from '../icons';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { common } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { IconButton } from './IconButton';\n\ntype FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer Context\n * -----------------------------------------------------------------------------------------------/\n\ninterface DrawerContext {\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n strategy: UseFloatingOptions['strategy'];\n refs: ReturnType<typeof useFloating>['refs'];\n context: ReturnType<typeof useFloating>['context'];\n getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n portalProps: FloatingPortalProps;\n direction: ReturnType<typeof useDirection>;\n}\n\nconst DrawerContext = React.createContext<DrawerContext \| null>(null);\n\nexport const useDrawerContext = () => {\n const context = React.useContext(DrawerContext);\n if (!context) {\n throw new Error('Drawer components must be wrapped in <Drawer.Root>');\n }\n return context;\n};\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------/\n\ninterface RootProps {\n children: React.ReactNode;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /\n The strategy to use when positioning the floating element.\n * @default 'fixed'\n * @see https://floating-ui.com/docs/useFloating#strategy\n /\n strategy?: UseFloatingOptions['strategy'];\n /\n @see https://floating-ui.com/docs/useFloating\n /\n floatingProps?: Omit<UseFloatingOptions, 'open' \| 'onOpenChange' \| 'strategy' \| 'transform'>;\n /\n @see https://floating-ui.com/docs/FloatingPortal\n /\n portalProps?: FloatingPortalProps;\n /\n @see https://floating-ui.com/docs/useDismiss\n /\n dismissProps?: UseDismissProps;\n}\n\nfunction Root({\n children,\n open,\n onOpenChange,\n strategy = 'fixed',\n floatingProps,\n portalProps,\n dismissProps,\n}: RootProps) {\n const direction = useDirection();\n\n const { refs, context } = useFloating({\n open,\n onOpenChange,\n transform: false,\n strategy,\n placement: direction === 'ltr' ? 'right' : 'left',\n ...floatingProps,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, dismissProps),\n useRole(context),\n ]);\n\n return (\n <DrawerContext.Provider\n value={{\n isOpen: open,\n setIsOpen: onOpenChange,\n strategy,\n portalProps: portalProps \|\| {},\n refs,\n context,\n getFloatingProps,\n direction,\n }}\n >\n <FloatingPortal {...portalProps}>{children}</FloatingPortal>\n </DrawerContext.Provider>\n );\n}\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Overlay\n * -----------------------------------------------------------------------------------------------/\n\nexport const FloatingOverlay = React.forwardRef(function FloatingOverlay(\n props: React.ComponentPropsWithoutRef<typeof Box>,\n ref: React.ForwardedRef<HTMLDivElement>,\n) {\n const { strategy } = useDrawerContext();\n const { disableScrollLock, enableScrollLock } = useScrollLock();\n\n useSafeLayoutEffect(() => {\n if (strategy !== 'fixed') {\n return;\n }\n enableScrollLock();\n return () => {\n disableScrollLock();\n };\n }, [strategy, disableScrollLock, enableScrollLock]);\n\n return (\n <Box\n ref={ref}\n {...props}\n elementDescriptor={descriptors.drawerBackdrop}\n sx={[\n t => ({\n inset: 0,\n backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),\n }),\n props.sx,\n ]}\n />\n );\n});\n\nconst Overlay = React.forwardRef<HTMLDivElement>((_, ref) => {\n const { strategy, context } = useDrawerContext();\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n close: { opacity: 0 },\n common: {\n position: strategy,\n inset: 0,\n transitionProperty: 'opacity',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: transitionDurationValues.drawer,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <FloatingOverlay\n ref={ref}\n style={{\n ...transitionStyles,\n }}\n />\n );\n});\n\nOverlay.displayName = 'Drawer.Overlay';\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Content\n * -----------------------------------------------------------------------------------------------/\n\ninterface ContentProps {\n children: React.ReactNode;\n}\n\nconst Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, ref) => {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedOptions;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n const { strategy, refs, context, getFloatingProps, direction } = useDrawerContext();\n const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n open: { transform: 'translate3d(0, 0, 0)' },\n close: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n common: {\n transitionProperty: 'transform',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <FloatingFocusManager\n context={context}\n modal\n outsideElementsInert\n initialFocus={refs.floating}\n >\n <Box\n ref={mergedRefs}\n {...getFloatingProps()}\n sx={t => ({\n position: strategy,\n insetBlock: 0,\n insetInline: 0,\n pointerEvents: 'none',\n isolation: 'isolate',\n // When drawer is within the profile components, we need to ensure it is above the drawer\n // renders above the profile close button\n zIndex: strategy === 'absolute' ? t.zIndices.$modal : undefined,\n })}\n elementDescriptor={descriptors.drawerRoot}\n >\n <Flex\n elementDescriptor={descriptors.drawerContent}\n style={transitionStyles}\n direction='col'\n sx={t => ({\n // Apply the conditional right offset + the spread of the\n // box shadow to ensure it is fully offscreen before unmounting\n '--transform-offset':\n strategy === 'fixed'\n ? `calc((100% + ${t.space.$3} + ${t.space.$8x75}) ${direction === 'rtl' ? -1 : 1})`\n : `calc((100% + ${t.space.$8x75}) * ${direction === 'rtl' ? -1 : 1})`,\n willChange: 'transform',\n position: strategy,\n insetBlock: strategy === 'fixed' ? t.space.$3 : 0,\n insetInlineEnd: strategy === 'fixed' ? t.space.$3 : 0,\n outline: 0,\n width: t.sizes.$100,\n maxWidth: strategy === 'fixed' ? `calc(100% - ${t.space.$6})` : '100%',\n backgroundColor: t.colors.$colorBackground,\n borderStartStartRadius: t.radii.$lg,\n borderEndStartRadius: t.radii.$lg,\n borderEndEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n borderStartEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n borderWidth: t.borderWidths.$normal,\n borderStyle: t.borderStyles.$solid,\n borderColor: t.colors.$borderAlpha150,\n overflow: 'hidden',\n pointerEvents: 'auto',\n })}\n >\n {children}\n </Flex>\n </Box>\n </FloatingFocusManager>\n );\n});\n\nContent.displayName = 'Drawer.Content';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Header\n * -----------------------------------------------------------------------------------------------/\n\ninterface HeaderProps {\n title?: string \| LocalizationKey;\n children?: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children, sx }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerHeader}\n as='header'\n sx={[\n t => ({\n display: 'flex',\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n borderBlockEndWidth: t.borderWidths.$normal,\n borderBlockEndStyle: t.borderStyles.$solid,\n borderBlockEndColor: t.colors.$borderAlpha150,\n borderStartStartRadius: t.radii.$lg,\n borderStartEndRadius: t.radii.$lg,\n paddingBlock: title ? t.space.$3 : undefined,\n paddingInline: title ? t.space.$4 : undefined,\n }),\n sx,\n ]}\n >\n {title ? (\n <>\n <Heading\n localizationKey={title}\n as='h2'\n elementDescriptor={descriptors.drawerTitle}\n textVariant='h2'\n sx={{\n alignSelf: 'center',\n }}\n />\n <Close />\n </>\n ) : (\n children\n )}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------/\n\ninterface BodyProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Body = React.forwardRef<HTMLDivElement, BodyProps>(({ children, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerBody}\n sx={[\n () => ({\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n }),\n props.sx,\n ]}\n {...props}\n >\n {children}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Footer\n * -----------------------------------------------------------------------------------------------/\n\ninterface FooterProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerFooter}\n sx={[\n t => ({\n display: 'flex',\n flexDirection: 'column',\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n borderBlockStartWidth: t.borderWidths.$normal,\n borderBlockStartStyle: t.borderStyles.$solid,\n borderBlockStartColor: t.colors.$borderAlpha100,\n borderEndStartRadius: t.radii.$xl,\n borderEndEndRadius: t.radii.$xl,\n paddingBlock: t.space.$3,\n paddingInline: t.space.$4,\n }),\n sx,\n ]}\n {...props}\n >\n {children}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Close\n * -----------------------------------------------------------------------------------------------/\n\nconst Close = React.forwardRef<HTMLButtonElement>((_, ref) => {\n const { setIsOpen } = useDrawerContext();\n return (\n <IconButton\n ref={ref}\n elementDescriptor={descriptors.drawerClose}\n variant='ghost'\n aria-label='Close drawer'\n onClick={() => setIsOpen(false)}\n icon={\n <Icon\n icon={CloseIcon}\n size='sm'\n />\n }\n sx={t => ({\n color: t.colors.$colorMutedForeground,\n padding: t.space.$3,\n marginInlineStart: 'auto',\n })}\n />\n );\n});\n\nClose.displayName = 'Drawer.Close';\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Confirmation\n * -----------------------------------------------------------------------------------------------/\n\ninterface ConfirmationProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n children: React.ReactNode;\n actionsSlot: React.ReactNode;\n /\n @see https://floating-ui.com/docs/userole\n */\n roleProps?: UseRoleProps;\n}\n\nconst Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(\n ({ open, onOpenChange, children, actionsSlot, roleProps }, ref) => {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedOptions;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n const { refs, context } = useFloating({\n open,\n onOpenChange,\n transform: false,\n strategy: 'absolute',\n });\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context),\n useRole(context, { role: 'alertdialog', ...roleProps }),\n ]);\n\n const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n const { styles: overlayTransitionStyles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n close: { opacity: 0 },\n common: {\n transitionProperty: 'opacity',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: transitionDurationValues.drawer,\n });\n\n const { isMounted, styles: modalTransitionStyles } = useTransitionStyles(context, {\n initial: { transform: 'translate3D(0, 100%, 0)' },\n open: { transform: 'translate3D(0, 0, 0)' },\n close: { transform: 'translate3D(0, 100%, 0)' },\n common: {\n transitionProperty: 'transform',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <>\n <Span\n elementDescriptor={descriptors.drawerConfirmationBackdrop}\n style={overlayTransitionStyles}\n sx={t => ({\n position: 'absolute',\n inset: 0,\n backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,\n })}\n />\n\n <FloatingFocusManager\n context={context}\n modal\n outsideElementsInert\n initialFocus={refs.floating}\n >\n <Box\n ref={mergedRefs}\n elementDescriptor={descriptors.drawerConfirmationRoot}\n style={modalTransitionStyles}\n {...getFloatingProps()}\n sx={t => ({\n display: 'flex',\n flexDirection: 'column',\n rowGap: t.space.$6,\n outline: 'none',\n willChange: 'transform',\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n padding: t.space.$4,\n borderStartStartRadius: t.radii.$md,\n borderStartEndRadius: t.radii.$md,\n boxShadow: `0 0 0 1px ${t.colors.$borderAlpha100}`,\n })}\n >\n {children}\n\n <Flex\n elementDescriptor={descriptors.drawerConfirmationActions}\n gap={3}\n justify='end'\n >\n {actionsSlot}\n </Flex>\n </Box>\n </FloatingFocusManager>\n </>\n );\n },\n);\n\nConfirmation.displayName = 'Drawer.Confirmation';\n\nexport const Drawer = {\n Root,\n Overlay,\n Content,\n Header,\n Body,\n Footer,\n Confirmation,\n Close,\n};\n"],"mappings":"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"}

package/dist/elements/FormControl.js CHANGED Viewed

@@ -11,7 +11,7 @@ import { titleize } from "@clerk/shared/underscore";
 //#region src/elements/FormControl.tsx
 function useFormTextAnimation() {
 	const prefersReducedMotion = usePrefersReducedMotion();
-	const { animations: appearanceAnimations } = useAppearance().parsedLayout;
+	const { animations: appearanceAnimations } = useAppearance().parsedOptions;
 	return { getFormTextAnimation: useCallback((enterAnimation, options) => {
 		if (prefersReducedMotion || !appearanceAnimations) return { animation: "none" };
 		const inAnimation = options?.inDelay ? animations.inDelayAnimation : animations.inAnimation;

package/dist/elements/FormControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl.js","names":["result: {\n a?: Feedback;\n b?: Feedback;\n }","FormInfoComponent: Record<\n FeedbackType,\n typeof FormErrorText \| typeof FormInfoText \| typeof FormSuccessText \| typeof FormWarningText\n >"],"sources":["../../src/elements/FormControl.tsx"],"sourcesContent":["import type { FieldId } from '@clerk/shared/types';\nimport { titleize } from '@clerk/shared/underscore';\nimport { useCallback, useMemo, useRef, useState } from 'react';\n\nimport {\n descriptors,\n Flex,\n FormErrorText,\n FormInfoText,\n FormSuccessText,\n FormWarningText,\n Span,\n useAppearance,\n} from '../customizables';\nimport type { ElementDescriptor } from '../customizables/elementDescriptors';\nimport { usePrefersReducedMotion } from '../hooks';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { animations, common } from '../styledSystem';\nimport type { FeedbackType, useFormControlFeedback } from '../utils/useFormControl';\n\nfunction useFormTextAnimation() {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: appearanceAnimations } = useAppearance().~~parsedLayout~~;\n\n const getFormTextAnimation = useCallback(\n (enterAnimation: boolean, options?: { inDelay?: boolean }): ThemableCssProp => {\n if (prefersReducedMotion \|\| !appearanceAnimations) {\n return {\n animation: 'none',\n };\n }\n\n const inAnimation = options?.inDelay ? animations.inDelayAnimation : animations.inAnimation;\n\n return t => ({\n animation: `${enterAnimation ? inAnimation : animations.outAnimation} ${t.transitionDuration.$textField} ${\n t.transitionTiming.$common\n }`,\n transitionProperty: 'height',\n transitionDuration: t.transitionDuration.$slow,\n transitionTimingFunction: t.transitionTiming.$common,\n });\n },\n [prefersReducedMotion, appearanceAnimations],\n );\n\n return {\n getFormTextAnimation,\n };\n}\n\nconst useCalculateErrorTextHeight = ({ feedback }: { feedback: string }) => {\n const [height, setHeight] = useState(0);\n\n const calculateHeight = useCallback(\n (element: HTMLElement \| null) => {\n if (element) {\n setHeight(element.scrollHeight + element.offsetTop * 2);\n }\n },\n [feedback],\n );\n\n return {\n height,\n calculateHeight,\n };\n};\n\nexport type FormFeedbackDescriptorsKeys = 'error' \| 'warning' \| 'info' \| 'success';\n\ntype Feedback = { feedback?: string; feedbackType?: FeedbackType; shouldEnter: boolean };\n\nexport type FormFeedbackProps = Partial<ReturnType<typeof useFormControlFeedback>['debounced'] & { id: FieldId }> & {\n elementDescriptors?: Partial<Record<FormFeedbackDescriptorsKeys, ElementDescriptor>>;\n center?: boolean;\n sx?: ThemableCssProp;\n};\n\nexport const FormFeedback = (props: FormFeedbackProps) => {\n const { id, elementDescriptors, sx, feedback, feedbackType = 'info', center = false } = props;\n const feedbacksRef = useRef<{\n a?: Feedback;\n b?: Feedback;\n }>({ a: undefined, b: undefined });\n\n const { getFormTextAnimation } = useFormTextAnimation();\n const defaultElementDescriptors = {\n error: descriptors.formFieldErrorText,\n warning: descriptors.formFieldWarningText,\n info: descriptors.formFieldInfoText,\n success: descriptors.formFieldSuccessText,\n };\n\n const feedbacks = useMemo(() => {\n const oldFeedbacks = feedbacksRef.current;\n let result: {\n a?: Feedback;\n b?: Feedback;\n };\n if (oldFeedbacks.a?.shouldEnter) {\n result = {\n a: { ...oldFeedbacks.a, shouldEnter: false },\n b: {\n feedback,\n feedbackType,\n shouldEnter: true,\n },\n };\n } else {\n result = {\n a: {\n feedback,\n feedbackType,\n shouldEnter: true,\n },\n b: { ...oldFeedbacks.b, shouldEnter: false },\n };\n }\n feedbacksRef.current = result;\n return result;\n }, [feedback, feedbackType]);\n\n const { calculateHeight: calculateHeightA, height: heightA } = useCalculateErrorTextHeight({\n feedback: feedbacks.a?.feedback \|\| '',\n });\n const { calculateHeight: calculateHeightB, height: heightB } = useCalculateErrorTextHeight({\n feedback: feedbacks.b?.feedback \|\| '',\n });\n const maxHeightRef = useRef(Math.max(heightA, heightB));\n\n const maxHeight = useMemo(() => {\n const max = Math.max(heightA, heightB, maxHeightRef.current);\n maxHeightRef.current = max;\n return max;\n }, [heightA, heightB]);\n\n const getElementProps = (type?: FormFeedbackDescriptorsKeys) => {\n if (!type) {\n return {};\n }\n const descriptor = (elementDescriptors?.[type] \|\| defaultElementDescriptors[type]) as ElementDescriptor \| undefined;\n return {\n elementDescriptor: descriptor,\n elementId: id ? descriptor?.setId?.(id) : undefined,\n // Use legacy pattern for errors (backwards compatible), new pattern for other types\n id: type === 'error' ? `error-${id}` : `${id}-${type}-feedback`,\n };\n };\n\n const FormInfoComponent: Record<\n FeedbackType,\n typeof FormErrorText \| typeof FormInfoText \| typeof FormSuccessText \| typeof FormWarningText\n > = {\n error: FormErrorText,\n info: FormInfoText,\n success: FormSuccessText,\n warning: FormWarningText,\n };\n\n const InfoComponentA = FormInfoComponent[feedbacks.a?.feedbackType \|\| 'info'];\n const InfoComponentB = FormInfoComponent[feedbacks.b?.feedbackType \|\| 'info'];\n\n return (\n <>\n {/* Screen reader only live region that updates when feedback changes */}\n <Span\n aria-live='polite'\n aria-atomic='true'\n sx={{\n ...common.visuallyHidden(),\n }}\n >\n {feedback ? titleize(feedback) : ''}\n </Span>\n <Flex\n style={{\n height: feedback ? maxHeight : 0, // dynamic height\n position: 'relative',\n }}\n center={center}\n sx={[getFormTextAnimation(!!feedback), sx]}\n >\n <InfoComponentA\n {...getElementProps(feedbacks.a?.feedbackType)}\n {...(feedbacks.a?.feedbackType && { 'data-testid': `form-feedback-${feedbacks.a.feedbackType}` })}\n ref={calculateHeightA}\n sx={[\n () => ({\n visibility: feedbacks.a?.shouldEnter ? 'visible' : 'hidden',\n }),\n getFormTextAnimation(!!feedbacks.a?.shouldEnter, { inDelay: true }),\n ]}\n localizationKey={titleize(feedbacks.a?.feedback)}\n />\n <InfoComponentB\n {...getElementProps(feedbacks.b?.feedbackType)}\n {...(feedbacks.b?.feedbackType && { 'data-testid': `form-feedback-${feedbacks.b.feedbackType}` })}\n ref={calculateHeightB}\n sx={[\n () => ({\n visibility: feedbacks.b?.shouldEnter ? 'visible' : 'hidden',\n }),\n getFormTextAnimation(!!feedbacks.b?.shouldEnter, { inDelay: true }),\n ]}\n localizationKey={titleize(feedbacks.b?.feedback)}\n />\n </Flex>\n </>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"FormControl.js","names":["result: {\n a?: Feedback;\n b?: Feedback;\n }","FormInfoComponent: Record<\n FeedbackType,\n typeof FormErrorText \| typeof FormInfoText \| typeof FormSuccessText \| typeof FormWarningText\n >"],"sources":["../../src/elements/FormControl.tsx"],"sourcesContent":["import type { FieldId } from '@clerk/shared/types';\nimport { titleize } from '@clerk/shared/underscore';\nimport { useCallback, useMemo, useRef, useState } from 'react';\n\nimport {\n descriptors,\n Flex,\n FormErrorText,\n FormInfoText,\n FormSuccessText,\n FormWarningText,\n Span,\n useAppearance,\n} from '../customizables';\nimport type { ElementDescriptor } from '../customizables/elementDescriptors';\nimport { usePrefersReducedMotion } from '../hooks';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { animations, common } from '../styledSystem';\nimport type { FeedbackType, useFormControlFeedback } from '../utils/useFormControl';\n\nfunction useFormTextAnimation() {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: appearanceAnimations } = useAppearance().parsedOptions;\n\n const getFormTextAnimation = useCallback(\n (enterAnimation: boolean, options?: { inDelay?: boolean }): ThemableCssProp => {\n if (prefersReducedMotion \|\| !appearanceAnimations) {\n return {\n animation: 'none',\n };\n }\n\n const inAnimation = options?.inDelay ? animations.inDelayAnimation : animations.inAnimation;\n\n return t => ({\n animation: `${enterAnimation ? inAnimation : animations.outAnimation} ${t.transitionDuration.$textField} ${\n t.transitionTiming.$common\n }`,\n transitionProperty: 'height',\n transitionDuration: t.transitionDuration.$slow,\n transitionTimingFunction: t.transitionTiming.$common,\n });\n },\n [prefersReducedMotion, appearanceAnimations],\n );\n\n return {\n getFormTextAnimation,\n };\n}\n\nconst useCalculateErrorTextHeight = ({ feedback }: { feedback: string }) => {\n const [height, setHeight] = useState(0);\n\n const calculateHeight = useCallback(\n (element: HTMLElement \| null) => {\n if (element) {\n setHeight(element.scrollHeight + element.offsetTop * 2);\n }\n },\n [feedback],\n );\n\n return {\n height,\n calculateHeight,\n };\n};\n\nexport type FormFeedbackDescriptorsKeys = 'error' \| 'warning' \| 'info' \| 'success';\n\ntype Feedback = { feedback?: string; feedbackType?: FeedbackType; shouldEnter: boolean };\n\nexport type FormFeedbackProps = Partial<ReturnType<typeof useFormControlFeedback>['debounced'] & { id: FieldId }> & {\n elementDescriptors?: Partial<Record<FormFeedbackDescriptorsKeys, ElementDescriptor>>;\n center?: boolean;\n sx?: ThemableCssProp;\n};\n\nexport const FormFeedback = (props: FormFeedbackProps) => {\n const { id, elementDescriptors, sx, feedback, feedbackType = 'info', center = false } = props;\n const feedbacksRef = useRef<{\n a?: Feedback;\n b?: Feedback;\n }>({ a: undefined, b: undefined });\n\n const { getFormTextAnimation } = useFormTextAnimation();\n const defaultElementDescriptors = {\n error: descriptors.formFieldErrorText,\n warning: descriptors.formFieldWarningText,\n info: descriptors.formFieldInfoText,\n success: descriptors.formFieldSuccessText,\n };\n\n const feedbacks = useMemo(() => {\n const oldFeedbacks = feedbacksRef.current;\n let result: {\n a?: Feedback;\n b?: Feedback;\n };\n if (oldFeedbacks.a?.shouldEnter) {\n result = {\n a: { ...oldFeedbacks.a, shouldEnter: false },\n b: {\n feedback,\n feedbackType,\n shouldEnter: true,\n },\n };\n } else {\n result = {\n a: {\n feedback,\n feedbackType,\n shouldEnter: true,\n },\n b: { ...oldFeedbacks.b, shouldEnter: false },\n };\n }\n feedbacksRef.current = result;\n return result;\n }, [feedback, feedbackType]);\n\n const { calculateHeight: calculateHeightA, height: heightA } = useCalculateErrorTextHeight({\n feedback: feedbacks.a?.feedback \|\| '',\n });\n const { calculateHeight: calculateHeightB, height: heightB } = useCalculateErrorTextHeight({\n feedback: feedbacks.b?.feedback \|\| '',\n });\n const maxHeightRef = useRef(Math.max(heightA, heightB));\n\n const maxHeight = useMemo(() => {\n const max = Math.max(heightA, heightB, maxHeightRef.current);\n maxHeightRef.current = max;\n return max;\n }, [heightA, heightB]);\n\n const getElementProps = (type?: FormFeedbackDescriptorsKeys) => {\n if (!type) {\n return {};\n }\n const descriptor = (elementDescriptors?.[type] \|\| defaultElementDescriptors[type]) as ElementDescriptor \| undefined;\n return {\n elementDescriptor: descriptor,\n elementId: id ? descriptor?.setId?.(id) : undefined,\n // Use legacy pattern for errors (backwards compatible), new pattern for other types\n id: type === 'error' ? `error-${id}` : `${id}-${type}-feedback`,\n };\n };\n\n const FormInfoComponent: Record<\n FeedbackType,\n typeof FormErrorText \| typeof FormInfoText \| typeof FormSuccessText \| typeof FormWarningText\n > = {\n error: FormErrorText,\n info: FormInfoText,\n success: FormSuccessText,\n warning: FormWarningText,\n };\n\n const InfoComponentA = FormInfoComponent[feedbacks.a?.feedbackType \|\| 'info'];\n const InfoComponentB = FormInfoComponent[feedbacks.b?.feedbackType \|\| 'info'];\n\n return (\n <>\n {/* Screen reader only live region that updates when feedback changes */}\n <Span\n aria-live='polite'\n aria-atomic='true'\n sx={{\n ...common.visuallyHidden(),\n }}\n >\n {feedback ? titleize(feedback) : ''}\n </Span>\n <Flex\n style={{\n height: feedback ? maxHeight : 0, // dynamic height\n position: 'relative',\n }}\n center={center}\n sx={[getFormTextAnimation(!!feedback), sx]}\n >\n <InfoComponentA\n {...getElementProps(feedbacks.a?.feedbackType)}\n {...(feedbacks.a?.feedbackType && { 'data-testid': `form-feedback-${feedbacks.a.feedbackType}` })}\n ref={calculateHeightA}\n sx={[\n () => ({\n visibility: feedbacks.a?.shouldEnter ? 'visible' : 'hidden',\n }),\n getFormTextAnimation(!!feedbacks.a?.shouldEnter, { inDelay: true }),\n ]}\n localizationKey={titleize(feedbacks.a?.feedback)}\n />\n <InfoComponentB\n {...getElementProps(feedbacks.b?.feedbackType)}\n {...(feedbacks.b?.feedbackType && { 'data-testid': `form-feedback-${feedbacks.b.feedbackType}` })}\n ref={calculateHeightB}\n sx={[\n () => ({\n visibility: feedbacks.b?.shouldEnter ? 'visible' : 'hidden',\n }),\n getFormTextAnimation(!!feedbacks.b?.shouldEnter, { inDelay: true }),\n ]}\n localizationKey={titleize(feedbacks.b?.feedback)}\n />\n </Flex>\n </>\n );\n};\n"],"mappings":"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"}

package/dist/elements/Header.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/elements/Header.tsx
 const Root = React.memo(React.forwardRef((props, ref) => {
 	const { sx, children, contentSx, gap = 6, showLogo = false, showDivider = false,...rest } = props;
-	const logoIsVisible = useAppearance().parsedLayout.logoPlacement === "inside" && showLogo;
+	const logoIsVisible = useAppearance().parsedOptions.logoPlacement === "inside" && showLogo;
 	const verticalDividerIsVisible = showDivider && logoIsVisible;
 	return /* @__PURE__ */ jsxs(Col, {
 		ref,

package/dist/elements/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","names":["ArrowLeftIcon"],"sources":["../../src/elements/Header.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Col, descriptors, Heading, Icon, Link, Text, useAppearance } from '../customizables';\nimport { ArrowLeftIcon } from '../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../styledSystem';\nimport { ApplicationLogo } from './ApplicationLogo';\nimport { VerticalDivider } from './Divider';\n\nexport type HeaderProps = PropsOfComponent<typeof Col> & {\n showLogo?: boolean;\n showDivider?: boolean;\n contentSx?: ThemableCssProp;\n};\n\nconst Root = React.memo(\n React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {\n const { sx, children, contentSx, gap = 6, showLogo = false, showDivider = false, ...rest } = props;\n const appearance = useAppearance();\n\n const logoIsVisible = appearance.~~parsedLayout~~.logoPlacement === 'inside' && showLogo;\n const verticalDividerIsVisible = showDivider && logoIsVisible;\n\n return (\n <Col\n ref={ref}\n elementDescriptor={descriptors.header}\n gap={gap}\n sx={sx}\n {...rest}\n >\n {logoIsVisible && <ApplicationLogo />}\n {verticalDividerIsVisible && <VerticalDivider />}\n <Col\n gap={1}\n sx={contentSx}\n {...rest}\n >\n {children}\n </Col>\n </Col>\n );\n }),\n);\n\nconst Title = React.memo((props: PropsOfComponent<typeof Heading>): JSX.Element => {\n const { sx, textVariant = 'h2', ...rest } = props;\n return (\n <Heading\n elementDescriptor={descriptors.headerTitle}\n textVariant={textVariant}\n sx={sx}\n {...rest}\n />\n );\n});\n\nconst Subtitle = React.memo((props: PropsOfComponent<typeof Text>): JSX.Element => {\n const { sx, ...rest } = props;\n return (\n <Text\n elementDescriptor={descriptors.headerSubtitle}\n variant='body'\n colorScheme='secondary'\n sx={[\n {\n wordWrap: 'break-word',\n },\n sx,\n ]}\n {...rest}\n />\n );\n});\n\nconst BackLink = React.memo((props: PropsOfComponent<typeof Link>): JSX.Element => {\n const { sx, children, ...rest } = props;\n return (\n <Link\n elementDescriptor={descriptors.headerBackLink}\n sx={t => [\n {\n display: 'inline-flex',\n alignItems: 'center',\n gap: t.space.$2,\n width: 'fit-content',\n '&:hover': {\n textDecoration: 'none',\n },\n },\n sx,\n ]}\n {...rest}\n >\n <Icon\n icon={ArrowLeftIcon}\n sx={t => ({ color: t.colors.$colorForeground })}\n />\n {children}\n </Link>\n );\n});\n\nexport const Header = {\n Root,\n Title,\n Subtitle,\n BackLink,\n};\n"],"mappings":";;;;;;;;;;AAcA,MAAM,OAAO,MAAM,KACjB,MAAM,YAAyC,OAAO,QAAQ;CAC5D,MAAM,EAAE,IAAI,UAAU,WAAW,MAAM,GAAG,WAAW,OAAO,cAAc,MAAO,GAAG,SAAS;CAG7F,MAAM,gBAFa,eAAe,CAED,~~aAAa~~,kBAAkB,YAAY;~~CAC5E~~,MAAM,2BAA2B,eAAe;AAEhD,QACE,qBAAC;EACM;EACL,mBAAmB,YAAY;EAC1B;EACD;EACJ,GAAI;;GAEH,iBAAiB,oBAAC,oBAAkB;GACpC,4BAA4B,oBAAC,oBAAkB;GAChD,oBAAC;IACC,KAAK;IACL,IAAI;IACJ,GAAI;IAEH;KACG;;GACF;EAER,CACH;AAED,MAAM,QAAQ,MAAM,MAAM,UAAyD;CACjF,MAAM,EAAE,IAAI,cAAc,KAAM,GAAG,SAAS;AAC5C,QACE,oBAAC;EACC,mBAAmB,YAAY;EAClB;EACT;EACJ,GAAI;GACJ;EAEJ;AAEF,MAAM,WAAW,MAAM,MAAM,UAAsD;CACjF,MAAM,EAAE,GAAI,GAAG,SAAS;AACxB,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,SAAQ;EACR,aAAY;EACZ,IAAI,CACF,EACE,UAAU,cACX,EACD,GACD;EACD,GAAI;GACJ;EAEJ;AAEF,MAAM,WAAW,MAAM,MAAM,UAAsD;CACjF,MAAM,EAAE,IAAI,SAAU,GAAG,SAAS;AAClC,QACE,qBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAI,MAAK,CACP;GACE,SAAS;GACT,YAAY;GACZ,KAAK,EAAE,MAAM;GACb,OAAO;GACP,WAAW,EACT,gBAAgB,QACjB;GACF,EACD,GACD;EACD,GAAI;aAEJ,oBAAC;GACC,MAAMA;GACN,KAAI,OAAM,EAAE,OAAO,EAAE,OAAO,kBAAkB;IAC9C,EACD;GACI;EAET;AAEF,MAAa,SAAS;CACpB;CACA;CACA;CACA;CACD"}
1	+ {"version":3,"file":"Header.js","names":["ArrowLeftIcon"],"sources":["../../src/elements/Header.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Col, descriptors, Heading, Icon, Link, Text, useAppearance } from '../customizables';\nimport { ArrowLeftIcon } from '../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../styledSystem';\nimport { ApplicationLogo } from './ApplicationLogo';\nimport { VerticalDivider } from './Divider';\n\nexport type HeaderProps = PropsOfComponent<typeof Col> & {\n showLogo?: boolean;\n showDivider?: boolean;\n contentSx?: ThemableCssProp;\n};\n\nconst Root = React.memo(\n React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {\n const { sx, children, contentSx, gap = 6, showLogo = false, showDivider = false, ...rest } = props;\n const appearance = useAppearance();\n\n const logoIsVisible = appearance.parsedOptions.logoPlacement === 'inside' && showLogo;\n const verticalDividerIsVisible = showDivider && logoIsVisible;\n\n return (\n <Col\n ref={ref}\n elementDescriptor={descriptors.header}\n gap={gap}\n sx={sx}\n {...rest}\n >\n {logoIsVisible && <ApplicationLogo />}\n {verticalDividerIsVisible && <VerticalDivider />}\n <Col\n gap={1}\n sx={contentSx}\n {...rest}\n >\n {children}\n </Col>\n </Col>\n );\n }),\n);\n\nconst Title = React.memo((props: PropsOfComponent<typeof Heading>): JSX.Element => {\n const { sx, textVariant = 'h2', ...rest } = props;\n return (\n <Heading\n elementDescriptor={descriptors.headerTitle}\n textVariant={textVariant}\n sx={sx}\n {...rest}\n />\n );\n});\n\nconst Subtitle = React.memo((props: PropsOfComponent<typeof Text>): JSX.Element => {\n const { sx, ...rest } = props;\n return (\n <Text\n elementDescriptor={descriptors.headerSubtitle}\n variant='body'\n colorScheme='secondary'\n sx={[\n {\n wordWrap: 'break-word',\n },\n sx,\n ]}\n {...rest}\n />\n );\n});\n\nconst BackLink = React.memo((props: PropsOfComponent<typeof Link>): JSX.Element => {\n const { sx, children, ...rest } = props;\n return (\n <Link\n elementDescriptor={descriptors.headerBackLink}\n sx={t => [\n {\n display: 'inline-flex',\n alignItems: 'center',\n gap: t.space.$2,\n width: 'fit-content',\n '&:hover': {\n textDecoration: 'none',\n },\n },\n sx,\n ]}\n {...rest}\n >\n <Icon\n icon={ArrowLeftIcon}\n sx={t => ({ color: t.colors.$colorForeground })}\n />\n {children}\n </Link>\n );\n});\n\nexport const Header = {\n Root,\n Title,\n Subtitle,\n BackLink,\n};\n"],"mappings":";;;;;;;;;;AAcA,MAAM,OAAO,MAAM,KACjB,MAAM,YAAyC,OAAO,QAAQ;CAC5D,MAAM,EAAE,IAAI,UAAU,WAAW,MAAM,GAAG,WAAW,OAAO,cAAc,MAAO,GAAG,SAAS;CAG7F,MAAM,gBAFa,eAAe,CAED,cAAc,kBAAkB,YAAY;CAC7E,MAAM,2BAA2B,eAAe;AAEhD,QACE,qBAAC;EACM;EACL,mBAAmB,YAAY;EAC1B;EACD;EACJ,GAAI;;GAEH,iBAAiB,oBAAC,oBAAkB;GACpC,4BAA4B,oBAAC,oBAAkB;GAChD,oBAAC;IACC,KAAK;IACL,IAAI;IACJ,GAAI;IAEH;KACG;;GACF;EAER,CACH;AAED,MAAM,QAAQ,MAAM,MAAM,UAAyD;CACjF,MAAM,EAAE,IAAI,cAAc,KAAM,GAAG,SAAS;AAC5C,QACE,oBAAC;EACC,mBAAmB,YAAY;EAClB;EACT;EACJ,GAAI;GACJ;EAEJ;AAEF,MAAM,WAAW,MAAM,MAAM,UAAsD;CACjF,MAAM,EAAE,GAAI,GAAG,SAAS;AACxB,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,SAAQ;EACR,aAAY;EACZ,IAAI,CACF,EACE,UAAU,cACX,EACD,GACD;EACD,GAAI;GACJ;EAEJ;AAEF,MAAM,WAAW,MAAM,MAAM,UAAsD;CACjF,MAAM,EAAE,IAAI,SAAU,GAAG,SAAS;AAClC,QACE,qBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAI,MAAK,CACP;GACE,SAAS;GACT,YAAY;GACZ,KAAK,EAAE,MAAM;GACb,OAAO;GACP,WAAW,EACT,gBAAgB,QACjB;GACF,EACD,GACD;EACD,GAAI;aAEJ,oBAAC;GACC,MAAMA;GACN,KAAI,OAAM,EAAE,OAAO,EAAE,OAAO,kBAAkB;IAC9C,EACD;GACI;EAET;AAEF,MAAa,SAAS;CACpB;CACA;CACA;CACA;CACD"}

package/dist/elements/LegalConsentCheckbox.js CHANGED Viewed

@@ -45,9 +45,9 @@ const LegalCheckboxLabel = (props) => {
 };
 const LegalCheckbox = (props) => {
 	const { displayConfig } = useEnvironment();
-	const { parsedLayout } = useAppearance();
-	const termsLink = parsedLayout.termsPageUrl || displayConfig.termsUrl;
-	const privacyPolicy = parsedLayout.privacyPageUrl || displayConfig.privacyPolicyUrl;
+	const { parsedOptions } = useAppearance();
+	const termsLink = parsedOptions.termsPageUrl || displayConfig.termsUrl;
+	const privacyPolicy = parsedOptions.privacyPageUrl || displayConfig.privacyPolicyUrl;
 	return /* @__PURE__ */ jsx(Field.Root, {
 		...props,
 		children: /* @__PURE__ */ jsxs(Flex, {

package/dist/elements/LegalConsentCheckbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LegalConsentCheckbox.js","names":["localizationKey: LocalizationKey \| undefined","t"],"sources":["../../src/elements/LegalConsentCheckbox.tsx"],"sourcesContent":["import { useEnvironment } from '@/contexts';\n\nimport type { LocalizationKey } from '../customizables';\nimport {\n descriptors,\n Flex,\n FormLabel,\n localizationKeys,\n Text,\n useAppearance,\n useLocalizations,\n} from '../customizables';\nimport { sanitizeInputProps, useFormField } from '../primitives/hooks/useFormField';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { Field } from './FieldControl';\nimport { LinkRenderer } from './LinkRenderer';\n\nconst LegalCheckboxLabel = (props: { termsUrl?: string; privacyPolicyUrl?: string }) => {\n const { termsUrl, privacyPolicyUrl } = props;\n const { t } = useLocalizations();\n const formField = useFormField();\n const { placeholder, ...inputProps } = sanitizeInputProps(formField);\n let localizationKey: LocalizationKey \| undefined;\n\n if (termsUrl && privacyPolicyUrl) {\n localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__termsOfServiceAndPrivacyPolicy', {\n termsOfServiceLink: termsUrl,\n privacyPolicyLink: privacyPolicyUrl,\n });\n } else if (termsUrl) {\n localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__onlyTermsOfService', {\n termsOfServiceLink: termsUrl,\n });\n } else if (privacyPolicyUrl) {\n localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__onlyPrivacyPolicy', {\n privacyPolicyLink: privacyPolicyUrl,\n });\n }\n\n return (\n <FormLabel\n elementDescriptor={descriptors.formFieldCheckboxLabel}\n htmlFor={inputProps.id}\n isDisabled={inputProps.isDisabled}\n sx={t => ({\n paddingLeft: t.space.$1x5,\n textAlign: 'left',\n })}\n >\n <Text\n variant='body'\n as='span'\n >\n <LinkRenderer\n text={t(localizationKey)}\n isExternal\n sx={t => ({\n textDecoration: 'underline',\n textUnderlineOffset: t.space.$1,\n })}\n />\n </Text>\n </FormLabel>\n );\n};\n\ntype CommonFieldRootProps = Omit<PropsOfComponent<typeof Field.Root>, 'children' \| 'elementDescriptor' \| 'elementId'>;\n\nexport const LegalCheckbox = (\n props: CommonFieldRootProps & {\n description?: string \| LocalizationKey;\n },\n) => {\n const { displayConfig } = useEnvironment();\n const { ~~parsedLayout~~ } = useAppearance();\n\n const termsLink = ~~parsedLayout~~.termsPageUrl \|\| displayConfig.termsUrl;\n const privacyPolicy = ~~parsedLayout~~.privacyPageUrl \|\| displayConfig.privacyPolicyUrl;\n\n return (\n <Field.Root {...props}>\n <Flex justify='center'>\n <Field.CheckboxIndicator\n elementDescriptor={descriptors.formFieldCheckboxInput}\n elementId={descriptors.formFieldInput.setId('legalAccepted')}\n />\n <LegalCheckboxLabel\n termsUrl={termsLink}\n privacyPolicyUrl={privacyPolicy}\n />\n </Flex>\n </Field.Root>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,sBAAsB,UAA4D;CACtF,MAAM,EAAE,UAAU,qBAAqB;CACvC,MAAM,EAAE,MAAM,kBAAkB;CAEhC,MAAM,EAAE,YAAa,GAAG,eAAe,mBADrB,cAAc,CACoC;CACpE,IAAIA;AAEJ,KAAI,YAAY,iBACd,mBAAkB,iBAAiB,sEAAsE;EACvG,oBAAoB;EACpB,mBAAmB;EACpB,CAAC;UACO,SACT,mBAAkB,iBAAiB,0DAA0D,EAC3F,oBAAoB,UACrB,CAAC;UACO,iBACT,mBAAkB,iBAAiB,yDAAyD,EAC1F,mBAAmB,kBACpB,CAAC;AAGJ,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,SAAS,WAAW;EACpB,YAAY,WAAW;EACvB,KAAI,SAAM;GACR,aAAaC,IAAE,MAAM;GACrB,WAAW;GACZ;YAED,oBAAC;GACC,SAAQ;GACR,IAAG;aAEH,oBAAC;IACC,MAAM,EAAE,gBAAgB;IACxB;IACA,KAAI,SAAM;KACR,gBAAgB;KAChB,qBAAqBA,IAAE,MAAM;KAC9B;KACD;IACG;GACG;;AAMhB,MAAa,iBACX,UAGG;CACH,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,~~iBAAiB~~,eAAe;~~CAExC~~,MAAM,YAAY,~~aAAa~~,gBAAgB,cAAc;~~CAC7D~~,MAAM,gBAAgB,~~aAAa~~,kBAAkB,cAAc;~~AAEnE~~,QACE,oBAAC,MAAM;EAAK,GAAI;YACd,qBAAC;GAAK,SAAQ;cACZ,oBAAC,MAAM;IACL,mBAAmB,YAAY;IAC/B,WAAW,YAAY,eAAe,MAAM,gBAAgB;KAC5D,EACF,oBAAC;IACC,UAAU;IACV,kBAAkB;KAClB;IACG;GACI"}
1	+ {"version":3,"file":"LegalConsentCheckbox.js","names":["localizationKey: LocalizationKey \| undefined","t"],"sources":["../../src/elements/LegalConsentCheckbox.tsx"],"sourcesContent":["import { useEnvironment } from '@/contexts';\n\nimport type { LocalizationKey } from '../customizables';\nimport {\n descriptors,\n Flex,\n FormLabel,\n localizationKeys,\n Text,\n useAppearance,\n useLocalizations,\n} from '../customizables';\nimport { sanitizeInputProps, useFormField } from '../primitives/hooks/useFormField';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { Field } from './FieldControl';\nimport { LinkRenderer } from './LinkRenderer';\n\nconst LegalCheckboxLabel = (props: { termsUrl?: string; privacyPolicyUrl?: string }) => {\n const { termsUrl, privacyPolicyUrl } = props;\n const { t } = useLocalizations();\n const formField = useFormField();\n const { placeholder, ...inputProps } = sanitizeInputProps(formField);\n let localizationKey: LocalizationKey \| undefined;\n\n if (termsUrl && privacyPolicyUrl) {\n localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__termsOfServiceAndPrivacyPolicy', {\n termsOfServiceLink: termsUrl,\n privacyPolicyLink: privacyPolicyUrl,\n });\n } else if (termsUrl) {\n localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__onlyTermsOfService', {\n termsOfServiceLink: termsUrl,\n });\n } else if (privacyPolicyUrl) {\n localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__onlyPrivacyPolicy', {\n privacyPolicyLink: privacyPolicyUrl,\n });\n }\n\n return (\n <FormLabel\n elementDescriptor={descriptors.formFieldCheckboxLabel}\n htmlFor={inputProps.id}\n isDisabled={inputProps.isDisabled}\n sx={t => ({\n paddingLeft: t.space.$1x5,\n textAlign: 'left',\n })}\n >\n <Text\n variant='body'\n as='span'\n >\n <LinkRenderer\n text={t(localizationKey)}\n isExternal\n sx={t => ({\n textDecoration: 'underline',\n textUnderlineOffset: t.space.$1,\n })}\n />\n </Text>\n </FormLabel>\n );\n};\n\ntype CommonFieldRootProps = Omit<PropsOfComponent<typeof Field.Root>, 'children' \| 'elementDescriptor' \| 'elementId'>;\n\nexport const LegalCheckbox = (\n props: CommonFieldRootProps & {\n description?: string \| LocalizationKey;\n },\n) => {\n const { displayConfig } = useEnvironment();\n const { parsedOptions } = useAppearance();\n\n const termsLink = parsedOptions.termsPageUrl \|\| displayConfig.termsUrl;\n const privacyPolicy = parsedOptions.privacyPageUrl \|\| displayConfig.privacyPolicyUrl;\n\n return (\n <Field.Root {...props}>\n <Flex justify='center'>\n <Field.CheckboxIndicator\n elementDescriptor={descriptors.formFieldCheckboxInput}\n elementId={descriptors.formFieldInput.setId('legalAccepted')}\n />\n <LegalCheckboxLabel\n termsUrl={termsLink}\n privacyPolicyUrl={privacyPolicy}\n />\n </Flex>\n </Field.Root>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,sBAAsB,UAA4D;CACtF,MAAM,EAAE,UAAU,qBAAqB;CACvC,MAAM,EAAE,MAAM,kBAAkB;CAEhC,MAAM,EAAE,YAAa,GAAG,eAAe,mBADrB,cAAc,CACoC;CACpE,IAAIA;AAEJ,KAAI,YAAY,iBACd,mBAAkB,iBAAiB,sEAAsE;EACvG,oBAAoB;EACpB,mBAAmB;EACpB,CAAC;UACO,SACT,mBAAkB,iBAAiB,0DAA0D,EAC3F,oBAAoB,UACrB,CAAC;UACO,iBACT,mBAAkB,iBAAiB,yDAAyD,EAC1F,mBAAmB,kBACpB,CAAC;AAGJ,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,SAAS,WAAW;EACpB,YAAY,WAAW;EACvB,KAAI,SAAM;GACR,aAAaC,IAAE,MAAM;GACrB,WAAW;GACZ;YAED,oBAAC;GACC,SAAQ;GACR,IAAG;aAEH,oBAAC;IACC,MAAM,EAAE,gBAAgB;IACxB;IACA,KAAI,SAAM;KACR,gBAAgB;KAChB,qBAAqBA,IAAE,MAAM;KAC9B;KACD;IACG;GACG;;AAMhB,MAAa,iBACX,UAGG;CACH,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EAAE,kBAAkB,eAAe;CAEzC,MAAM,YAAY,cAAc,gBAAgB,cAAc;CAC9D,MAAM,gBAAgB,cAAc,kBAAkB,cAAc;AAEpE,QACE,oBAAC,MAAM;EAAK,GAAI;YACd,qBAAC;GAAK,SAAQ;cACZ,oBAAC,MAAM;IACL,mBAAmB,YAAY;IAC/B,WAAW,YAAY,eAAe,MAAM,gBAAgB;KAC5D,EACF,oBAAC;IACC,UAAU;IACV,kBAAkB;KAClB;IACG;GACI"}

package/dist/elements/PhoneInput/countryCodeData.js CHANGED Viewed

@@ -54,13 +54,18 @@ const data = [
 		"af",
 		"93"
 	],
+	[
+		"Åland Islands",
+		"ax",
+		"358"
+	],
 	[
 		"Albania",
 		"al",
 		"355"
 	],
 	[
-		"Algeria ",
+		"Algeria",
 		"dz",
 		"213"
 	],
@@ -104,6 +109,11 @@ const data = [
 		"aw",
 		"297"
 	],
+	[
+		"Ascension Island",
+		"ac",
+		"247"
+	],
 	[
 		"Australia",
 		"au",
@@ -278,12 +288,12 @@ const data = [
 		"269"
 	],
 	[
-		"Congo",
+		"Democratic Republic of the Congo",
 		"cd",
 		"243"
 	],
 	[
-		"Congo",
+		"Republic of the Congo",
 		"cg",
 		"242"
 	],
@@ -580,6 +590,11 @@ const data = [
 		"ki",
 		"686"
 	],
+	[
+		"Kosovo",
+		"xk",
+		"383"
+	],
 	[
 		"Kuwait",
 		"kw",
@@ -640,11 +655,6 @@ const data = [
 		"mo",
 		"853"
 	],
-	[
-		"Macedonia",
-		"mk",
-		"389"
-	],
 	[
 		"Madagascar",
 		"mg",
@@ -696,6 +706,11 @@ const data = [
 		"mu",
 		"230"
 	],
+	[
+		"Mayotte",
+		"yt",
+		"262"
+	],
 	[
 		"Mexico",
 		"mx",
@@ -808,6 +823,11 @@ const data = [
 		"kp",
 		"850"
 	],
+	[
+		"North Macedonia",
+		"mk",
+		"389"
+	],
 	[
 		"Northern Mariana Islands",
 		"mp",
@@ -1045,7 +1065,7 @@ const data = [
 		"597"
 	],
 	[
-		"Swaziland",
+		"Eswatini",
 		"sz",
 		"268"
 	],
@@ -1193,6 +1213,11 @@ const data = [
 		"wf",
 		"681"
 	],
+	[
+		"Western Sahara",
+		"eh",
+		"212"
+	],
 	[
 		"Yemen",
 		"ye",