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

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

@@ -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"}
+{"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

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

@@ -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"}
+{"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

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

@@ -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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"}
+{"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

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

@@ -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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"}
+{"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

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

@@ -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"}
+{"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

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

@@ -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"}
+{"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/PopoverCard.js

@@ -53,7 +53,7 @@ const PopoverCardContent = (props) => {
 const PopoverCardFooter = (props) => {
 	const { sx, children,...rest } = props;
 	const { branded } = useEnvironment().displayConfig;
-	const { privacyPageUrl, termsPageUrl, helpPageUrl } = useAppearance().parsedLayout;
+	const { privacyPageUrl, termsPageUrl, helpPageUrl } = useAppearance().parsedOptions;
 	const shouldShowTagOrLinks = branded || privacyPageUrl || termsPageUrl || helpPageUrl;
 	return /* @__PURE__ */ jsxs(Col, {
 		justify: "between",

package/dist/elements/PopoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverCard.js","names":["withAnimation: ThemableCssProp"],"sources":["../../src/elements/PopoverCard.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useEnvironment } from '../contexts';\nimport { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';\nimport type { ElementDescriptor } from '../customizables/elementDescriptors';\nimport type { PropsOfComponent, ThemableCssProp } from '../styledSystem';\nimport { animations, common } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { Card } from './Card';\n\nconst PopoverCardRoot = React.forwardRef<\n  HTMLDivElement,\n  PropsOfComponent<typeof Card.Content> & {\n    shouldEntryAnimate?: boolean;\n  }\n>((props, ref) => {\n  const { elementDescriptor, shouldEntryAnimate = true, ...rest } = props;\n\n  const withAnimation: ThemableCssProp = t => ({\n    animation: shouldEntryAnimate\n      ? `${animations.dropdownSlideInScaleAndFade} ${t.transitionDuration.$fast}`\n      : undefined,\n  });\n\n  return (\n    <Flow.Part part='popover'>\n      <Card.Root\n        elementDescriptor={[descriptors.popoverBox, elementDescriptor as ElementDescriptor]}\n        {...rest}\n        ref={ref}\n        sx={[\n          t => ({\n            width: t.sizes.$94,\n            maxWidth: `calc(100vw - ${t.sizes.$8})`,\n            zIndex: t.zIndices.$modal,\n            borderRadius: t.radii.$xl,\n            outline: 'none',\n          }),\n          withAnimation,\n        ]}\n      >\n        {props.children}\n      </Card.Root>\n    </Flow.Part>\n  );\n});\n\nconst PopoverCardContent = (props: PropsOfComponent<typeof Flex>) => {\n  const { sx, ...rest } = props;\n  return (\n    <Flex\n      direction='col'\n      sx={[\n        t => ({\n          backgroundColor: t.colors.$colorBackground,\n          overflow: 'hidden',\n          borderRadius: t.radii.$lg,\n          zIndex: t.zIndices.$card,\n          borderWidth: t.borderWidths.$normal,\n          borderStyle: t.borderStyles.$solid,\n          borderColor: t.colors.$borderAlpha150,\n          marginInline: '-1px',\n          marginBlockStart: '-1px',\n        }),\n        sx,\n      ]}\n      {...rest}\n    >\n      {props.children}\n    </Flex>\n  );\n};\n\nconst PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {\n  const { sx, children, ...rest } = props;\n  const { branded } = useEnvironment().displayConfig;\n  const { privacyPageUrl, termsPageUrl, helpPageUrl } = useAppearance().parsedLayout;\n  const shouldShowTagOrLinks = branded || privacyPageUrl || termsPageUrl || helpPageUrl;\n\n  return (\n    <Col\n      justify='between'\n      sx={[\n        t => ({\n          background: common.mergedColorsBackground(\n            colors.setAlpha(t.colors.$colorBackground, 1),\n            t.colors.$neutralAlpha50,\n          ),\n          marginTop: `calc(${t.space.$2} * -1)`,\n          paddingTop: t.space.$2,\n          '&:empty': {\n            padding: 0,\n            marginTop: 0,\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        sx,\n      ]}\n      {...rest}\n    >\n      {children}\n\n      <Card.ClerkAndPagesTag\n        outerSx={t => ({\n          padding: `${t.space.$4} ${t.space.$8}`,\n        })}\n        withFooterPages={!!shouldShowTagOrLinks}\n        devModeNoticeSx={t => ({\n          padding: t.space.$none,\n        })}\n        withDevOverlay\n      />\n    </Col>\n  );\n};\n\nexport const PopoverCard = {\n  Root: PopoverCardRoot,\n  Content: PopoverCardContent,\n  Footer: PopoverCardFooter,\n};\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,kBAAkB,MAAM,YAK3B,OAAO,QAAQ;CAChB,MAAM,EAAE,mBAAmB,qBAAqB,KAAM,GAAG,SAAS;CAElE,MAAMA,iBAAiC,OAAM,EAC3C,WAAW,qBACP,GAAG,WAAW,4BAA4B,GAAG,EAAE,mBAAmB,UAClE,QACL;AAED,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,oBAAC,KAAK;GACJ,mBAAmB,CAAC,YAAY,YAAY,kBAAuC;GACnF,GAAI;GACC;GACL,IAAI,EACF,OAAM;IACJ,OAAO,EAAE,MAAM;IACf,UAAU,gBAAgB,EAAE,MAAM,GAAG;IACrC,QAAQ,EAAE,SAAS;IACnB,cAAc,EAAE,MAAM;IACtB,SAAS;IACV,GACD,cACD;aAEA,MAAM;IACG;GACF;EAEd;AAEF,MAAM,sBAAsB,UAAyC;CACnE,MAAM,EAAE,GAAI,GAAG,SAAS;AACxB,QACE,oBAAC;EACC,WAAU;EACV,IAAI,EACF,OAAM;GACJ,iBAAiB,EAAE,OAAO;GAC1B,UAAU;GACV,cAAc,EAAE,MAAM;GACtB,QAAQ,EAAE,SAAS;GACnB,aAAa,EAAE,aAAa;GAC5B,aAAa,EAAE,aAAa;GAC5B,aAAa,EAAE,OAAO;GACtB,cAAc;GACd,kBAAkB;GACnB,GACD,GACD;EACD,GAAI;YAEH,MAAM;GACF;;AAIX,MAAM,qBAAqB,UAAyC;CAClE,MAAM,EAAE,IAAI,SAAU,GAAG,SAAS;CAClC,MAAM,EAAE,YAAY,gBAAgB,CAAC;CACrC,MAAM,EAAE,gBAAgB,cAAc,gBAAgB,eAAe,CAAC;CACtE,MAAM,uBAAuB,WAAW,kBAAkB,gBAAgB;AAE1E,QACE,qBAAC;EACC,SAAQ;EACR,IAAI,EACF,OAAM;GACJ,YAAY,OAAO,uBACjB,OAAO,SAAS,EAAE,OAAO,kBAAkB,EAAE,EAC7C,EAAE,OAAO,gBACV;GACD,WAAW,QAAQ,EAAE,MAAM,GAAG;GAC9B,YAAY,EAAE,MAAM;GACpB,WAAW;IACT,SAAS;IACT,WAAW;IACZ;GACD,yBAAyB;IACvB,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM;IAClC,gBAAgB,EAAE,aAAa;IAC/B,gBAAgB,EAAE,aAAa;IAC/B,gBAAgB,EAAE,OAAO;IAC1B;GACF,GACD,GACD;EACD,GAAI;aAEH,UAED,oBAAC,KAAK;GACJ,UAAS,OAAM,EACb,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,MACnC;GACD,iBAAiB,CAAC,CAAC;GACnB,kBAAiB,OAAM,EACrB,SAAS,EAAE,MAAM,OAClB;GACD;IACA;GACE;;AAIV,MAAa,cAAc;CACzB,MAAM;CACN,SAAS;CACT,QAAQ;CACT"}
+{"version":3,"file":"PopoverCard.js","names":["withAnimation: ThemableCssProp"],"sources":["../../src/elements/PopoverCard.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useEnvironment } from '../contexts';\nimport { Col, descriptors, Flex, Flow, useAppearance } from '../customizables';\nimport type { ElementDescriptor } from '../customizables/elementDescriptors';\nimport type { PropsOfComponent, ThemableCssProp } from '../styledSystem';\nimport { animations, common } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { Card } from './Card';\n\nconst PopoverCardRoot = React.forwardRef<\n  HTMLDivElement,\n  PropsOfComponent<typeof Card.Content> & {\n    shouldEntryAnimate?: boolean;\n  }\n>((props, ref) => {\n  const { elementDescriptor, shouldEntryAnimate = true, ...rest } = props;\n\n  const withAnimation: ThemableCssProp = t => ({\n    animation: shouldEntryAnimate\n      ? `${animations.dropdownSlideInScaleAndFade} ${t.transitionDuration.$fast}`\n      : undefined,\n  });\n\n  return (\n    <Flow.Part part='popover'>\n      <Card.Root\n        elementDescriptor={[descriptors.popoverBox, elementDescriptor as ElementDescriptor]}\n        {...rest}\n        ref={ref}\n        sx={[\n          t => ({\n            width: t.sizes.$94,\n            maxWidth: `calc(100vw - ${t.sizes.$8})`,\n            zIndex: t.zIndices.$modal,\n            borderRadius: t.radii.$xl,\n            outline: 'none',\n          }),\n          withAnimation,\n        ]}\n      >\n        {props.children}\n      </Card.Root>\n    </Flow.Part>\n  );\n});\n\nconst PopoverCardContent = (props: PropsOfComponent<typeof Flex>) => {\n  const { sx, ...rest } = props;\n  return (\n    <Flex\n      direction='col'\n      sx={[\n        t => ({\n          backgroundColor: t.colors.$colorBackground,\n          overflow: 'hidden',\n          borderRadius: t.radii.$lg,\n          zIndex: t.zIndices.$card,\n          borderWidth: t.borderWidths.$normal,\n          borderStyle: t.borderStyles.$solid,\n          borderColor: t.colors.$borderAlpha150,\n          marginInline: '-1px',\n          marginBlockStart: '-1px',\n        }),\n        sx,\n      ]}\n      {...rest}\n    >\n      {props.children}\n    </Flex>\n  );\n};\n\nconst PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {\n  const { sx, children, ...rest } = props;\n  const { branded } = useEnvironment().displayConfig;\n  const { privacyPageUrl, termsPageUrl, helpPageUrl } = useAppearance().parsedOptions;\n  const shouldShowTagOrLinks = branded || privacyPageUrl || termsPageUrl || helpPageUrl;\n\n  return (\n    <Col\n      justify='between'\n      sx={[\n        t => ({\n          background: common.mergedColorsBackground(\n            colors.setAlpha(t.colors.$colorBackground, 1),\n            t.colors.$neutralAlpha50,\n          ),\n          marginTop: `calc(${t.space.$2} * -1)`,\n          paddingTop: t.space.$2,\n          '&:empty': {\n            padding: 0,\n            marginTop: 0,\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        sx,\n      ]}\n      {...rest}\n    >\n      {children}\n\n      <Card.ClerkAndPagesTag\n        outerSx={t => ({\n          padding: `${t.space.$4} ${t.space.$8}`,\n        })}\n        withFooterPages={!!shouldShowTagOrLinks}\n        devModeNoticeSx={t => ({\n          padding: t.space.$none,\n        })}\n        withDevOverlay\n      />\n    </Col>\n  );\n};\n\nexport const PopoverCard = {\n  Root: PopoverCardRoot,\n  Content: PopoverCardContent,\n  Footer: PopoverCardFooter,\n};\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,kBAAkB,MAAM,YAK3B,OAAO,QAAQ;CAChB,MAAM,EAAE,mBAAmB,qBAAqB,KAAM,GAAG,SAAS;CAElE,MAAMA,iBAAiC,OAAM,EAC3C,WAAW,qBACP,GAAG,WAAW,4BAA4B,GAAG,EAAE,mBAAmB,UAClE,QACL;AAED,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,oBAAC,KAAK;GACJ,mBAAmB,CAAC,YAAY,YAAY,kBAAuC;GACnF,GAAI;GACC;GACL,IAAI,EACF,OAAM;IACJ,OAAO,EAAE,MAAM;IACf,UAAU,gBAAgB,EAAE,MAAM,GAAG;IACrC,QAAQ,EAAE,SAAS;IACnB,cAAc,EAAE,MAAM;IACtB,SAAS;IACV,GACD,cACD;aAEA,MAAM;IACG;GACF;EAEd;AAEF,MAAM,sBAAsB,UAAyC;CACnE,MAAM,EAAE,GAAI,GAAG,SAAS;AACxB,QACE,oBAAC;EACC,WAAU;EACV,IAAI,EACF,OAAM;GACJ,iBAAiB,EAAE,OAAO;GAC1B,UAAU;GACV,cAAc,EAAE,MAAM;GACtB,QAAQ,EAAE,SAAS;GACnB,aAAa,EAAE,aAAa;GAC5B,aAAa,EAAE,aAAa;GAC5B,aAAa,EAAE,OAAO;GACtB,cAAc;GACd,kBAAkB;GACnB,GACD,GACD;EACD,GAAI;YAEH,MAAM;GACF;;AAIX,MAAM,qBAAqB,UAAyC;CAClE,MAAM,EAAE,IAAI,SAAU,GAAG,SAAS;CAClC,MAAM,EAAE,YAAY,gBAAgB,CAAC;CACrC,MAAM,EAAE,gBAAgB,cAAc,gBAAgB,eAAe,CAAC;CACtE,MAAM,uBAAuB,WAAW,kBAAkB,gBAAgB;AAE1E,QACE,qBAAC;EACC,SAAQ;EACR,IAAI,EACF,OAAM;GACJ,YAAY,OAAO,uBACjB,OAAO,SAAS,EAAE,OAAO,kBAAkB,EAAE,EAC7C,EAAE,OAAO,gBACV;GACD,WAAW,QAAQ,EAAE,MAAM,GAAG;GAC9B,YAAY,EAAE,MAAM;GACpB,WAAW;IACT,SAAS;IACT,WAAW;IACZ;GACD,yBAAyB;IACvB,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM;IAClC,gBAAgB,EAAE,aAAa;IAC/B,gBAAgB,EAAE,aAAa;IAC/B,gBAAgB,EAAE,OAAO;IAC1B;GACF,GACD,GACD;EACD,GAAI;aAEH,UAED,oBAAC,KAAK;GACJ,UAAS,OAAM,EACb,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,MACnC;GACD,iBAAiB,CAAC,CAAC;GACnB,kBAAiB,OAAM,EACrB,SAAS,EAAE,MAAM,OAClB;GACD;IACA;GACE;;AAIV,MAAa,cAAc;CACzB,MAAM;CACN,SAAS;CACT,QAAQ;CACT"}

package/dist/elements/ReversibleContainer.js

@@ -8,7 +8,7 @@ const SocialButtonsReversibleContainerWithDivider = (props) => {
 	const appearance = useAppearance();
 	const childrenWithDivider = interleaveElementInArray(React.Children.toArray(props.children), (i) => /* @__PURE__ */ jsx(Divider, {}, `divider${i}`));
 	return /* @__PURE__ */ jsx(ReversibleContainer, {
-		reverse: appearance.parsedLayout.socialButtonsPlacement === "bottom",
+		reverse: appearance.parsedOptions.socialButtonsPlacement === "bottom",
 		...props,
 		children: childrenWithDivider
 	});

package/dist/elements/ReversibleContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReversibleContainer.js","names":[],"sources":["../../src/elements/ReversibleContainer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useAppearance } from '../customizables';\nimport { Divider } from './Divider';\n\nexport const SocialButtonsReversibleContainerWithDivider = (props: React.PropsWithChildren) => {\n  const appearance = useAppearance();\n  const childrenWithDivider = interleaveElementInArray(React.Children.toArray(props.children), i => (\n    <Divider key={`divider${i}`} />\n  ));\n\n  return (\n    <ReversibleContainer\n      reverse={appearance.parsedLayout.socialButtonsPlacement === 'bottom'}\n      {...props}\n    >\n      {childrenWithDivider}\n    </ReversibleContainer>\n  );\n};\n\nconst ReversibleContainer = (props: React.PropsWithChildren<{ reverse?: boolean }>) => {\n  const { children, reverse } = props;\n  return <>{reverse ? React.Children.toArray(children).reverse() : children}</>;\n};\n\nconst interleaveElementInArray = <T, A extends T[]>(arr: A, generator: (i: number) => any): A => {\n  return arr.reduce((acc, child, i) => {\n    return i === arr.length - 1 ? [...acc, child] : [...acc, child, generator(i)];\n  }, [] as any);\n};\n"],"mappings":";;;;;;AAKA,MAAa,+CAA+C,UAAmC;CAC7F,MAAM,aAAa,eAAe;CAClC,MAAM,sBAAsB,yBAAyB,MAAM,SAAS,QAAQ,MAAM,SAAS,GAAE,MAC3F,oBAAC,aAAa,UAAU,IAAO,CAC/B;AAEF,QACE,oBAAC;EACC,SAAS,WAAW,aAAa,2BAA2B;EAC5D,GAAI;YAEH;GACmB;;AAI1B,MAAM,uBAAuB,UAA0D;CACrF,MAAM,EAAE,UAAU,YAAY;AAC9B,QAAO,4CAAG,UAAU,MAAM,SAAS,QAAQ,SAAS,CAAC,SAAS,GAAG,WAAY;;AAG/E,MAAM,4BAA8C,KAAQ,cAAqC;AAC/F,QAAO,IAAI,QAAQ,KAAK,OAAO,MAAM;AACnC,SAAO,MAAM,IAAI,SAAS,IAAI,CAAC,GAAG,KAAK,MAAM,GAAG;GAAC,GAAG;GAAK;GAAO,UAAU,EAAE;GAAC;IAC5E,EAAE,CAAQ"}
+{"version":3,"file":"ReversibleContainer.js","names":[],"sources":["../../src/elements/ReversibleContainer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useAppearance } from '../customizables';\nimport { Divider } from './Divider';\n\nexport const SocialButtonsReversibleContainerWithDivider = (props: React.PropsWithChildren) => {\n  const appearance = useAppearance();\n  const childrenWithDivider = interleaveElementInArray(React.Children.toArray(props.children), i => (\n    <Divider key={`divider${i}`} />\n  ));\n\n  return (\n    <ReversibleContainer\n      reverse={appearance.parsedOptions.socialButtonsPlacement === 'bottom'}\n      {...props}\n    >\n      {childrenWithDivider}\n    </ReversibleContainer>\n  );\n};\n\nconst ReversibleContainer = (props: React.PropsWithChildren<{ reverse?: boolean }>) => {\n  const { children, reverse } = props;\n  return <>{reverse ? React.Children.toArray(children).reverse() : children}</>;\n};\n\nconst interleaveElementInArray = <T, A extends T[]>(arr: A, generator: (i: number) => any): A => {\n  return arr.reduce((acc, child, i) => {\n    return i === arr.length - 1 ? [...acc, child] : [...acc, child, generator(i)];\n  }, [] as any);\n};\n"],"mappings":";;;;;;AAKA,MAAa,+CAA+C,UAAmC;CAC7F,MAAM,aAAa,eAAe;CAClC,MAAM,sBAAsB,yBAAyB,MAAM,SAAS,QAAQ,MAAM,SAAS,GAAE,MAC3F,oBAAC,aAAa,UAAU,IAAO,CAC/B;AAEF,QACE,oBAAC;EACC,SAAS,WAAW,cAAc,2BAA2B;EAC7D,GAAI;YAEH;GACmB;;AAI1B,MAAM,uBAAuB,UAA0D;CACrF,MAAM,EAAE,UAAU,YAAY;AAC9B,QAAO,4CAAG,UAAU,MAAM,SAAS,QAAQ,SAAS,CAAC,SAAS,GAAG,WAAY;;AAG/E,MAAM,4BAA8C,KAAQ,cAAqC;AAC/F,QAAO,IAAI,QAAQ,KAAK,OAAO,MAAM;AACnC,SAAO,MAAM,IAAI,SAAS,IAAI,CAAC,GAAG,KAAK,MAAM,GAAG;GAAC,GAAG;GAAK;GAAO,UAAU,EAAE;GAAC;IAC5E,EAAE,CAAQ"}

package/dist/elements/SocialButtons.js

@@ -31,7 +31,7 @@ const SocialButtons = React.memo((props) => {
 	const totalEnabledAuthMethods = useTotalEnabledAuthMethods();
 	const card = useCardState();
 	const clerk = useClerk();
-	const { socialButtonsVariant } = useAppearance().parsedLayout;
+	const { socialButtonsVariant } = useAppearance().parsedOptions;
 	const strategies = [
 		...enableOAuthProviders ? authenticatableOauthStrategies : [],
 		...enableWeb3Providers ? web3Strategies : [],

package/dist/elements/SocialButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"SocialButtons.js","names":["strategies: TStrategy[]"],"sources":["../../src/elements/SocialButtons.tsx"],"sourcesContent":["import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';\nimport { useClerk } from '@clerk/shared/react';\nimport type { OAuthProvider, OAuthStrategy, PhoneCodeChannel, Web3Provider, Web3Strategy } from '@clerk/shared/types';\nimport type { Ref } from 'react';\nimport React, { forwardRef, isValidElement } from 'react';\n\nimport { ProviderInitialIcon } from '../common';\nimport type { LocalizationKey } from '../customizables';\nimport {\n  Button,\n  descriptors,\n  Flex,\n  Grid,\n  Icon,\n  Image,\n  localizationKeys,\n  SimpleButton,\n  Spinner,\n  Text,\n  useAppearance,\n} from '../customizables';\nimport { useEnabledThirdPartyProviders } from '../hooks';\nimport { useTotalEnabledAuthMethods } from '../hooks/useTotalEnabledAuthMethods';\nimport { mqu, type PropsOfComponent } from '../styledSystem';\nimport { sleep } from '../utils/sleep';\nimport { LastAuthenticationStrategyBadge } from './Badge';\nimport { useCardState } from './contexts';\nimport { distributeStrategiesIntoRows } from './utils';\n\nconst SOCIAL_BUTTON_BLOCK_THRESHOLD = 2;\nconst SOCIAL_BUTTON_PRE_TEXT_THRESHOLD = 1;\nconst MAX_STRATEGIES_PER_ROW = 5;\n\nexport type SocialButtonsProps = React.PropsWithChildren<{\n  enableOAuthProviders: boolean;\n  enableWeb3Providers: boolean;\n  enableAlternativePhoneCodeProviders: boolean;\n}>;\n\ntype SocialButtonsRootProps = SocialButtonsProps & {\n  oauthCallback: (strategy: OAuthStrategy) => Promise<unknown>;\n  web3Callback: (strategy: Web3Strategy) => Promise<unknown>;\n  alternativePhoneCodeCallback: (channel: PhoneCodeChannel) => void;\n  idleAfterDelay?: boolean;\n  showLastAuthenticationStrategy?: boolean;\n};\n\nconst isWeb3Strategy = (val: string): val is Web3Strategy => {\n  return val.startsWith('web3_');\n};\n\nconst isPhoneCodeChannel = (val: string): val is PhoneCodeChannel => {\n  return !!getAlternativePhoneCodeProviderData(val);\n};\n\nexport const SocialButtons = React.memo((props: SocialButtonsRootProps) => {\n  const {\n    oauthCallback,\n    web3Callback,\n    alternativePhoneCodeCallback,\n    enableOAuthProviders = true,\n    enableWeb3Providers = true,\n    enableAlternativePhoneCodeProviders = true,\n    idleAfterDelay = true,\n    showLastAuthenticationStrategy = false,\n  } = props;\n  const { web3Strategies, authenticatableOauthStrategies, strategyToDisplayData, alternativePhoneCodeChannels } =\n    useEnabledThirdPartyProviders();\n  const totalEnabledAuthMethods = useTotalEnabledAuthMethods();\n  const card = useCardState();\n  const clerk = useClerk();\n  const { socialButtonsVariant } = useAppearance().parsedLayout;\n\n  type TStrategy = OAuthStrategy | Web3Strategy | PhoneCodeChannel;\n\n  const strategies: TStrategy[] = [\n    ...(enableOAuthProviders ? authenticatableOauthStrategies : []),\n    ...(enableWeb3Providers ? web3Strategies : []),\n    ...(enableAlternativePhoneCodeProviders ? alternativePhoneCodeChannels : []),\n  ];\n\n  if (!strategies.length) {\n    return null;\n  }\n\n  const clientLastAuth = showLastAuthenticationStrategy ? clerk.client?.lastAuthenticationStrategy : null;\n\n  const isValidStrategy = (strategy: unknown): strategy is TStrategy => {\n    return strategies.includes(strategy as TStrategy);\n  };\n\n  // Convert SAML strategies to OAuth strategies for consistency when matching last used strategy.\n  const convertedClientLastAuth = clientLastAuth?.startsWith('saml_')\n    ? clientLastAuth.replace('saml_', 'oauth_')\n    : clientLastAuth;\n\n  const lastAuthenticationStrategy =\n    convertedClientLastAuth && isValidStrategy(convertedClientLastAuth) ? convertedClientLastAuth : null;\n\n  const { strategyRows, lastAuthenticationStrategyPresent } = distributeStrategiesIntoRows<TStrategy>(\n    [...strategies],\n    MAX_STRATEGIES_PER_ROW,\n    lastAuthenticationStrategy,\n  );\n  const strategyRowOneLength = strategyRows.at(lastAuthenticationStrategyPresent ? 1 : 0)?.length ?? 0;\n  const remainingStrategiesLength = lastAuthenticationStrategyPresent ? strategies.length - 1 : strategies.length;\n  const shouldForceSingleColumnOnMobile = !lastAuthenticationStrategyPresent && strategies.length === 2;\n\n  const preferBlockButtons =\n    socialButtonsVariant === 'blockButton'\n      ? true\n      : socialButtonsVariant === 'iconButton'\n        ? false\n        : strategies.length <= SOCIAL_BUTTON_BLOCK_THRESHOLD;\n\n  const startOauth = async (strategy: OAuthStrategy | Web3Strategy) => {\n    card.setLoading(strategy);\n    try {\n      if (isWeb3Strategy(strategy)) {\n        await web3Callback(strategy);\n      } else {\n        await oauthCallback(strategy);\n      }\n    } catch {\n      await sleep(1000);\n      card.setIdle();\n    }\n    if (idleAfterDelay) {\n      await sleep(5000);\n      card.setIdle();\n    }\n  };\n\n  const onSocialButtonClick = (strategy: OAuthStrategy | Web3Strategy | PhoneCodeChannel) => async () => {\n    if (isPhoneCodeChannel(strategy)) {\n      alternativePhoneCodeCallback(strategy);\n    } else {\n      await startOauth(strategy);\n    }\n  };\n\n  const ButtonElement = preferBlockButtons ? SocialButtonBlock : SocialButtonIcon;\n\n  return (\n    <Flex\n      direction='col'\n      gap={2}\n      elementDescriptor={descriptors.socialButtonsRoot}\n    >\n      {strategyRows.map((row, rowIndex) => (\n        <Grid\n          key={row.join('-')}\n          elementDescriptor={descriptors.socialButtons}\n          gap={2}\n          sx={t => ({\n            justifyContent: 'center',\n            [mqu.sm]: {\n              // Force single-column on mobile when 2 strategies are present (without last auth) to prevent\n              // label overflow. When last auth is present, only 1 strategy remains here, so overflow isn't a concern.\n              gridTemplateColumns: shouldForceSingleColumnOnMobile ? 'repeat(1, minmax(0, 1fr))' : undefined,\n            },\n            gridTemplateColumns:\n              strategies.length < 1\n                ? `repeat(1, minmax(0, 1fr))`\n                : `repeat(${row.length}, ${\n                    rowIndex === 0\n                      ? `minmax(0, 1fr)`\n                      : // Calculate the width of each button based on the width of the buttons within the first row.\n                        // t.sizes.$2 is used here to represent the gap defined on the Grid component.\n                        `minmax(0, calc((100% - (${strategyRowOneLength} - 1) * ${t.sizes.$2}) / ${strategyRowOneLength}))`\n                  })`,\n          })}\n        >\n          {row.map(strategy => {\n            const shouldShowPreText =\n              remainingStrategiesLength === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD ||\n              (strategy === lastAuthenticationStrategy && row.length === 1);\n\n            const label = shouldShowPreText\n              ? `Continue with ${strategyToDisplayData[strategy].name}`\n              : strategyToDisplayData[strategy].name;\n\n            const localizedText = shouldShowPreText\n              ? localizationKeys('socialButtonsBlockButton', {\n                  provider: strategyToDisplayData[strategy].name,\n                })\n              : localizationKeys('socialButtonsBlockButtonManyInView', {\n                  provider: strategyToDisplayData[strategy].name,\n                });\n\n            const imageOrInitial = strategyToDisplayData[strategy].iconUrl ? (\n              <Image\n                elementDescriptor={[descriptors.providerIcon, descriptors.socialButtonsProviderIcon]}\n                elementId={descriptors.socialButtonsProviderIcon.setId(strategyToDisplayData[strategy].id)}\n                isLoading={card.loadingMetadata === strategy}\n                isDisabled={card.isLoading}\n                src={strategyToDisplayData[strategy].iconUrl}\n                alt={`Sign in with ${strategyToDisplayData[strategy].name}`}\n                sx={theme => ({ width: theme.sizes.$4, height: 'auto', maxWidth: '100%' })}\n              />\n            ) : (\n              <ProviderInitialIcon\n                id={strategyToDisplayData[strategy].id}\n                value={strategyToDisplayData[strategy].name}\n                isLoading={card.loadingMetadata === strategy}\n                isDisabled={card.isLoading}\n              />\n            );\n\n            return (\n              <ButtonElement\n                key={strategy}\n                id={strategyToDisplayData[strategy].id}\n                onClick={onSocialButtonClick(strategy)}\n                isLoading={card.loadingMetadata === strategy}\n                isDisabled={card.isLoading}\n                label={label}\n                textLocalizationKey={localizedText}\n                icon={imageOrInitial}\n                lastAuthenticationStrategy={strategy === lastAuthenticationStrategy && totalEnabledAuthMethods > 1}\n              />\n            );\n          })}\n        </Grid>\n      ))}\n    </Flex>\n  );\n});\n\ntype SocialButtonProps = PropsOfComponent<typeof Button> & {\n  icon: React.ReactElement;\n  id: OAuthProvider | Web3Provider | PhoneCodeChannel;\n  textLocalizationKey: LocalizationKey | undefined;\n  label?: string;\n  lastAuthenticationStrategy?: boolean;\n};\n\nconst SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButtonElement> | null): JSX.Element => {\n  const { icon, label, id, textLocalizationKey, lastAuthenticationStrategy, ...rest } = props;\n\n  if (lastAuthenticationStrategy) {\n    return (\n      <SocialButtonBlock\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n\n  return (\n    <Button\n      ref={ref}\n      elementDescriptor={descriptors.socialButtonsIconButton}\n      elementId={descriptors.socialButtonsIconButton.setId(id)}\n      textVariant='buttonLarge'\n      variant='outline'\n      colorScheme='neutral'\n      hoverAsFocus\n      sx={t => ({\n        minHeight: t.sizes.$8,\n        width: '100%',\n      })}\n      {...rest}\n    >\n      {icon}\n    </Button>\n  );\n});\n\nconst SocialButtonBlock = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButtonElement> | null): JSX.Element => {\n  const { id, icon, isLoading, label, textLocalizationKey, lastAuthenticationStrategy, ...rest } = props;\n  const isIconElement = isValidElement(icon);\n\n  return (\n    <SimpleButton\n      elementDescriptor={descriptors.socialButtonsBlockButton}\n      elementId={descriptors.socialButtonsBlockButton.setId(id)}\n      variant='outline'\n      block\n      isLoading={isLoading}\n      hoverAsFocus\n      ref={ref}\n      {...rest}\n      sx={theme => [\n        {\n          gap: theme.space.$4,\n          position: 'relative',\n          justifyContent: 'flex-start',\n        },\n        props.sx,\n      ]}\n    >\n      {lastAuthenticationStrategy && <LastAuthenticationStrategyBadge overlay />}\n\n      <Flex\n        justify='center'\n        align='center'\n        as='span'\n        gap={3}\n        sx={{\n          width: '100%',\n          overflow: 'hidden',\n        }}\n      >\n        {(isLoading || icon) && (\n          <Flex\n            as='span'\n            center\n            sx={theme => ({ flex: `0 0 ${theme.space.$4}` })}\n          >\n            {isLoading ? (\n              <Spinner\n                size='sm'\n                elementDescriptor={descriptors.spinner}\n              />\n            ) : !isIconElement && icon ? (\n              <Icon\n                icon={icon as unknown as React.ComponentType}\n                sx={[\n                  theme => ({\n                    color: theme.colors.$neutralAlpha600,\n                    width: theme.sizes.$4,\n                    position: 'absolute',\n                  }),\n                ]}\n              />\n            ) : (\n              icon\n            )}\n          </Flex>\n        )}\n        <Text\n          elementDescriptor={descriptors.socialButtonsBlockButtonText}\n          elementId={descriptors.socialButtonsBlockButtonText.setId(id)}\n          as='span'\n          truncate\n          variant='buttonLarge'\n          localizationKey={textLocalizationKey}\n        >\n          {label}\n        </Text>\n      </Flex>\n    </SimpleButton>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"SocialButtons.js","names":["strategies: TStrategy[]"],"sources":["../../src/elements/SocialButtons.tsx"],"sourcesContent":["import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';\nimport { useClerk } from '@clerk/shared/react';\nimport type { OAuthProvider, OAuthStrategy, PhoneCodeChannel, Web3Provider, Web3Strategy } from '@clerk/shared/types';\nimport type { Ref } from 'react';\nimport React, { forwardRef, isValidElement } from 'react';\n\nimport { ProviderInitialIcon } from '../common';\nimport type { LocalizationKey } from '../customizables';\nimport {\n  Button,\n  descriptors,\n  Flex,\n  Grid,\n  Icon,\n  Image,\n  localizationKeys,\n  SimpleButton,\n  Spinner,\n  Text,\n  useAppearance,\n} from '../customizables';\nimport { useEnabledThirdPartyProviders } from '../hooks';\nimport { useTotalEnabledAuthMethods } from '../hooks/useTotalEnabledAuthMethods';\nimport { mqu, type PropsOfComponent } from '../styledSystem';\nimport { sleep } from '../utils/sleep';\nimport { LastAuthenticationStrategyBadge } from './Badge';\nimport { useCardState } from './contexts';\nimport { distributeStrategiesIntoRows } from './utils';\n\nconst SOCIAL_BUTTON_BLOCK_THRESHOLD = 2;\nconst SOCIAL_BUTTON_PRE_TEXT_THRESHOLD = 1;\nconst MAX_STRATEGIES_PER_ROW = 5;\n\nexport type SocialButtonsProps = React.PropsWithChildren<{\n  enableOAuthProviders: boolean;\n  enableWeb3Providers: boolean;\n  enableAlternativePhoneCodeProviders: boolean;\n}>;\n\ntype SocialButtonsRootProps = SocialButtonsProps & {\n  oauthCallback: (strategy: OAuthStrategy) => Promise<unknown>;\n  web3Callback: (strategy: Web3Strategy) => Promise<unknown>;\n  alternativePhoneCodeCallback: (channel: PhoneCodeChannel) => void;\n  idleAfterDelay?: boolean;\n  showLastAuthenticationStrategy?: boolean;\n};\n\nconst isWeb3Strategy = (val: string): val is Web3Strategy => {\n  return val.startsWith('web3_');\n};\n\nconst isPhoneCodeChannel = (val: string): val is PhoneCodeChannel => {\n  return !!getAlternativePhoneCodeProviderData(val);\n};\n\nexport const SocialButtons = React.memo((props: SocialButtonsRootProps) => {\n  const {\n    oauthCallback,\n    web3Callback,\n    alternativePhoneCodeCallback,\n    enableOAuthProviders = true,\n    enableWeb3Providers = true,\n    enableAlternativePhoneCodeProviders = true,\n    idleAfterDelay = true,\n    showLastAuthenticationStrategy = false,\n  } = props;\n  const { web3Strategies, authenticatableOauthStrategies, strategyToDisplayData, alternativePhoneCodeChannels } =\n    useEnabledThirdPartyProviders();\n  const totalEnabledAuthMethods = useTotalEnabledAuthMethods();\n  const card = useCardState();\n  const clerk = useClerk();\n  const { socialButtonsVariant } = useAppearance().parsedOptions;\n\n  type TStrategy = OAuthStrategy | Web3Strategy | PhoneCodeChannel;\n\n  const strategies: TStrategy[] = [\n    ...(enableOAuthProviders ? authenticatableOauthStrategies : []),\n    ...(enableWeb3Providers ? web3Strategies : []),\n    ...(enableAlternativePhoneCodeProviders ? alternativePhoneCodeChannels : []),\n  ];\n\n  if (!strategies.length) {\n    return null;\n  }\n\n  const clientLastAuth = showLastAuthenticationStrategy ? clerk.client?.lastAuthenticationStrategy : null;\n\n  const isValidStrategy = (strategy: unknown): strategy is TStrategy => {\n    return strategies.includes(strategy as TStrategy);\n  };\n\n  // Convert SAML strategies to OAuth strategies for consistency when matching last used strategy.\n  const convertedClientLastAuth = clientLastAuth?.startsWith('saml_')\n    ? clientLastAuth.replace('saml_', 'oauth_')\n    : clientLastAuth;\n\n  const lastAuthenticationStrategy =\n    convertedClientLastAuth && isValidStrategy(convertedClientLastAuth) ? convertedClientLastAuth : null;\n\n  const { strategyRows, lastAuthenticationStrategyPresent } = distributeStrategiesIntoRows<TStrategy>(\n    [...strategies],\n    MAX_STRATEGIES_PER_ROW,\n    lastAuthenticationStrategy,\n  );\n  const strategyRowOneLength = strategyRows.at(lastAuthenticationStrategyPresent ? 1 : 0)?.length ?? 0;\n  const remainingStrategiesLength = lastAuthenticationStrategyPresent ? strategies.length - 1 : strategies.length;\n  const shouldForceSingleColumnOnMobile = !lastAuthenticationStrategyPresent && strategies.length === 2;\n\n  const preferBlockButtons =\n    socialButtonsVariant === 'blockButton'\n      ? true\n      : socialButtonsVariant === 'iconButton'\n        ? false\n        : strategies.length <= SOCIAL_BUTTON_BLOCK_THRESHOLD;\n\n  const startOauth = async (strategy: OAuthStrategy | Web3Strategy) => {\n    card.setLoading(strategy);\n    try {\n      if (isWeb3Strategy(strategy)) {\n        await web3Callback(strategy);\n      } else {\n        await oauthCallback(strategy);\n      }\n    } catch {\n      await sleep(1000);\n      card.setIdle();\n    }\n    if (idleAfterDelay) {\n      await sleep(5000);\n      card.setIdle();\n    }\n  };\n\n  const onSocialButtonClick = (strategy: OAuthStrategy | Web3Strategy | PhoneCodeChannel) => async () => {\n    if (isPhoneCodeChannel(strategy)) {\n      alternativePhoneCodeCallback(strategy);\n    } else {\n      await startOauth(strategy);\n    }\n  };\n\n  const ButtonElement = preferBlockButtons ? SocialButtonBlock : SocialButtonIcon;\n\n  return (\n    <Flex\n      direction='col'\n      gap={2}\n      elementDescriptor={descriptors.socialButtonsRoot}\n    >\n      {strategyRows.map((row, rowIndex) => (\n        <Grid\n          key={row.join('-')}\n          elementDescriptor={descriptors.socialButtons}\n          gap={2}\n          sx={t => ({\n            justifyContent: 'center',\n            [mqu.sm]: {\n              // Force single-column on mobile when 2 strategies are present (without last auth) to prevent\n              // label overflow. When last auth is present, only 1 strategy remains here, so overflow isn't a concern.\n              gridTemplateColumns: shouldForceSingleColumnOnMobile ? 'repeat(1, minmax(0, 1fr))' : undefined,\n            },\n            gridTemplateColumns:\n              strategies.length < 1\n                ? `repeat(1, minmax(0, 1fr))`\n                : `repeat(${row.length}, ${\n                    rowIndex === 0\n                      ? `minmax(0, 1fr)`\n                      : // Calculate the width of each button based on the width of the buttons within the first row.\n                        // t.sizes.$2 is used here to represent the gap defined on the Grid component.\n                        `minmax(0, calc((100% - (${strategyRowOneLength} - 1) * ${t.sizes.$2}) / ${strategyRowOneLength}))`\n                  })`,\n          })}\n        >\n          {row.map(strategy => {\n            const shouldShowPreText =\n              remainingStrategiesLength === SOCIAL_BUTTON_PRE_TEXT_THRESHOLD ||\n              (strategy === lastAuthenticationStrategy && row.length === 1);\n\n            const label = shouldShowPreText\n              ? `Continue with ${strategyToDisplayData[strategy].name}`\n              : strategyToDisplayData[strategy].name;\n\n            const localizedText = shouldShowPreText\n              ? localizationKeys('socialButtonsBlockButton', {\n                  provider: strategyToDisplayData[strategy].name,\n                })\n              : localizationKeys('socialButtonsBlockButtonManyInView', {\n                  provider: strategyToDisplayData[strategy].name,\n                });\n\n            const imageOrInitial = strategyToDisplayData[strategy].iconUrl ? (\n              <Image\n                elementDescriptor={[descriptors.providerIcon, descriptors.socialButtonsProviderIcon]}\n                elementId={descriptors.socialButtonsProviderIcon.setId(strategyToDisplayData[strategy].id)}\n                isLoading={card.loadingMetadata === strategy}\n                isDisabled={card.isLoading}\n                src={strategyToDisplayData[strategy].iconUrl}\n                alt={`Sign in with ${strategyToDisplayData[strategy].name}`}\n                sx={theme => ({ width: theme.sizes.$4, height: 'auto', maxWidth: '100%' })}\n              />\n            ) : (\n              <ProviderInitialIcon\n                id={strategyToDisplayData[strategy].id}\n                value={strategyToDisplayData[strategy].name}\n                isLoading={card.loadingMetadata === strategy}\n                isDisabled={card.isLoading}\n              />\n            );\n\n            return (\n              <ButtonElement\n                key={strategy}\n                id={strategyToDisplayData[strategy].id}\n                onClick={onSocialButtonClick(strategy)}\n                isLoading={card.loadingMetadata === strategy}\n                isDisabled={card.isLoading}\n                label={label}\n                textLocalizationKey={localizedText}\n                icon={imageOrInitial}\n                lastAuthenticationStrategy={strategy === lastAuthenticationStrategy && totalEnabledAuthMethods > 1}\n              />\n            );\n          })}\n        </Grid>\n      ))}\n    </Flex>\n  );\n});\n\ntype SocialButtonProps = PropsOfComponent<typeof Button> & {\n  icon: React.ReactElement;\n  id: OAuthProvider | Web3Provider | PhoneCodeChannel;\n  textLocalizationKey: LocalizationKey | undefined;\n  label?: string;\n  lastAuthenticationStrategy?: boolean;\n};\n\nconst SocialButtonIcon = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButtonElement> | null): JSX.Element => {\n  const { icon, label, id, textLocalizationKey, lastAuthenticationStrategy, ...rest } = props;\n\n  if (lastAuthenticationStrategy) {\n    return (\n      <SocialButtonBlock\n        {...props}\n        ref={ref}\n      />\n    );\n  }\n\n  return (\n    <Button\n      ref={ref}\n      elementDescriptor={descriptors.socialButtonsIconButton}\n      elementId={descriptors.socialButtonsIconButton.setId(id)}\n      textVariant='buttonLarge'\n      variant='outline'\n      colorScheme='neutral'\n      hoverAsFocus\n      sx={t => ({\n        minHeight: t.sizes.$8,\n        width: '100%',\n      })}\n      {...rest}\n    >\n      {icon}\n    </Button>\n  );\n});\n\nconst SocialButtonBlock = forwardRef((props: SocialButtonProps, ref: Ref<HTMLButtonElement> | null): JSX.Element => {\n  const { id, icon, isLoading, label, textLocalizationKey, lastAuthenticationStrategy, ...rest } = props;\n  const isIconElement = isValidElement(icon);\n\n  return (\n    <SimpleButton\n      elementDescriptor={descriptors.socialButtonsBlockButton}\n      elementId={descriptors.socialButtonsBlockButton.setId(id)}\n      variant='outline'\n      block\n      isLoading={isLoading}\n      hoverAsFocus\n      ref={ref}\n      {...rest}\n      sx={theme => [\n        {\n          gap: theme.space.$4,\n          position: 'relative',\n          justifyContent: 'flex-start',\n        },\n        props.sx,\n      ]}\n    >\n      {lastAuthenticationStrategy && <LastAuthenticationStrategyBadge overlay />}\n\n      <Flex\n        justify='center'\n        align='center'\n        as='span'\n        gap={3}\n        sx={{\n          width: '100%',\n          overflow: 'hidden',\n        }}\n      >\n        {(isLoading || icon) && (\n          <Flex\n            as='span'\n            center\n            sx={theme => ({ flex: `0 0 ${theme.space.$4}` })}\n          >\n            {isLoading ? (\n              <Spinner\n                size='sm'\n                elementDescriptor={descriptors.spinner}\n              />\n            ) : !isIconElement && icon ? (\n              <Icon\n                icon={icon as unknown as React.ComponentType}\n                sx={[\n                  theme => ({\n                    color: theme.colors.$neutralAlpha600,\n                    width: theme.sizes.$4,\n                    position: 'absolute',\n                  }),\n                ]}\n              />\n            ) : (\n              icon\n            )}\n          </Flex>\n        )}\n        <Text\n          elementDescriptor={descriptors.socialButtonsBlockButtonText}\n          elementId={descriptors.socialButtonsBlockButtonText.setId(id)}\n          as='span'\n          truncate\n          variant='buttonLarge'\n          localizationKey={textLocalizationKey}\n        >\n          {label}\n        </Text>\n      </Flex>\n    </SimpleButton>\n  );\n});\n"],"mappings":"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"}

package/dist/elements/Tooltip.js

@@ -12,7 +12,7 @@ function useTooltip({ initialOpen = false, placement = "top", open: controlledOp
 	const open = controlledOpen ?? uncontrolledOpen;
 	const setOpen = setControlledOpen ?? setUncontrolledOpen;
 	const prefersReducedMotion = usePrefersReducedMotion();
-	const { animations: layoutAnimations } = useAppearance().parsedLayout;
+	const { animations: layoutAnimations } = useAppearance().parsedOptions;
 	const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
 	const data = useFloating({
 		placement,

package/dist/elements/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React"],"sources":["../../src/elements/Tooltip.tsx"],"sourcesContent":["import type { Placement, UseFloatingReturn, UseInteractionsReturn } from '@floating-ui/react';\nimport {\n  autoUpdate,\n  flip,\n  FloatingPortal,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport * as React from 'react';\n\nimport { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';\nimport { usePrefersReducedMotion } from '../hooks';\nimport type { ThemableCssProp } from '../styledSystem';\n\ninterface TooltipOptions {\n  initialOpen?: boolean;\n  placement?: Placement;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\ninterface UseTooltipReturn extends UseFloatingReturn, UseInteractionsReturn {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  isMounted: boolean;\n  transitionStyles: React.CSSProperties;\n}\n\nexport function useTooltip({\n  initialOpen = false,\n  placement = 'top',\n  open: controlledOpen,\n  onOpenChange: setControlledOpen,\n}: TooltipOptions = {}): UseTooltipReturn {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);\n\n  const open = controlledOpen ?? uncontrolledOpen;\n  const setOpen = setControlledOpen ?? setUncontrolledOpen;\n\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { animations: layoutAnimations } = useAppearance().parsedLayout;\n  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n  const data = useFloating({\n    placement,\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(6),\n      flip({\n        crossAxis: placement.includes('-'),\n        fallbackAxisSideDirection: 'start',\n        padding: 6,\n      }),\n      shift({ padding: 6 }),\n    ],\n  });\n\n  const context = data.context;\n\n  const hover = useHover(context, {\n    move: false,\n    enabled: controlledOpen == null,\n  });\n  const focus = useFocus(context, {\n    enabled: controlledOpen == null,\n  });\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: 'tooltip' });\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: isMotionSafe ? 200 : 0,\n    initial: ({ side }) => {\n      return {\n        opacity: 0,\n        transform: side === 'top' ? 'translateY(4px)' : 'translateY(-4px)',\n      };\n    },\n    open: {\n      opacity: 1,\n      transform: 'translate(0)',\n    },\n    close: ({ side }) => ({\n      opacity: 0,\n      transform: side === 'top' ? 'translateY(4px)' : 'translateY(-4px)',\n    }),\n  });\n\n  const interactions = useInteractions([hover, focus, dismiss, role]);\n\n  return React.useMemo(\n    () => ({\n      open,\n      setOpen,\n      isMounted,\n      ...interactions,\n      ...data,\n      transitionStyles,\n    }),\n    [open, setOpen, interactions, data, isMounted, transitionStyles],\n  );\n}\n\ntype ContextType = UseTooltipReturn | null;\n\nconst TooltipContext = React.createContext<ContextType>(null);\n\nexport const useTooltipContext = (): UseTooltipReturn => {\n  const context = React.useContext(TooltipContext);\n\n  if (context == null) {\n    throw new Error('Tooltip components must be wrapped in <Tooltip />');\n  }\n\n  return context;\n};\n\nfunction Root({ children, ...options }: { children: React.ReactNode } & TooltipOptions) {\n  // This can accept any props as options, e.g. `placement`,\n  // or other positioning options.\n  const tooltip = useTooltip(options);\n  return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;\n}\n\ntype TriggerProps = React.HTMLProps<HTMLElement> & {\n  sx?: ThemableCssProp;\n};\n\nconst Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(\n  { children, sx, ...props },\n  propRef,\n) {\n  const context = useTooltipContext();\n  const childrenRef = (children as any).ref;\n  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);\n\n  if (!React.isValidElement(children)) {\n    return null;\n  }\n\n  // If the child is disabled, wrap it in a span to handle focus events\n  if (children.props.isDisabled || children.props.disabled) {\n    return (\n      <Span\n        ref={ref}\n        {...context.getReferenceProps({\n          ...props,\n        })}\n        data-state={context.open ? 'open' : 'closed'}\n        sx={[\n          {\n            width: 'fit-content',\n            display: 'inline-block',\n            cursor: 'not-allowed',\n            outline: 'none',\n          },\n          sx,\n        ]}\n        tabIndex={0}\n      >\n        {children}\n      </Span>\n    );\n  }\n\n  return React.cloneElement(\n    children,\n    context.getReferenceProps({\n      ref,\n      ...props,\n      ...children.props,\n      'data-state': context.open ? 'open' : 'closed',\n    }),\n  );\n});\n\nconst Content = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLProps<HTMLDivElement> & {\n    text: string | LocalizationKey;\n    sx?: ThemableCssProp;\n  }\n>(function TooltipContent({ style, text, sx, ...props }, propRef) {\n  const context = useTooltipContext();\n  const ref = useMergeRefs([context.refs.setFloating, propRef]);\n\n  if (!context.isMounted) {\n    return null;\n  }\n\n  return (\n    <FloatingPortal>\n      <Box\n        ref={ref}\n        elementDescriptor={descriptors.tooltip}\n        style={{\n          ...context.floatingStyles,\n          ...style,\n        }}\n        {...context.getFloatingProps(props)}\n      >\n        <Box\n          elementDescriptor={descriptors.tooltipContent}\n          style={context.transitionStyles}\n          sx={[\n            t => ({\n              paddingBlock: t.space.$1,\n              paddingInline: t.space.$1x5,\n              borderRadius: t.radii.$md,\n              backgroundColor: t.colors.$black,\n              color: t.colors.$white,\n              maxWidth: t.sizes.$60,\n            }),\n            sx,\n          ]}\n        >\n          <Text\n            elementDescriptor={descriptors.tooltipText}\n            localizationKey={text}\n            variant='body'\n            colorScheme='inherit'\n          />\n        </Box>\n      </Box>\n    </FloatingPortal>\n  );\n});\n\nexport const Tooltip = {\n  Root,\n  Trigger,\n  Content,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":["React"],"sources":["../../src/elements/Tooltip.tsx"],"sourcesContent":["import type { Placement, UseFloatingReturn, UseInteractionsReturn } from '@floating-ui/react';\nimport {\n  autoUpdate,\n  flip,\n  FloatingPortal,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport * as React from 'react';\n\nimport { Box, descriptors, type LocalizationKey, Span, Text, useAppearance } from '../customizables';\nimport { usePrefersReducedMotion } from '../hooks';\nimport type { ThemableCssProp } from '../styledSystem';\n\ninterface TooltipOptions {\n  initialOpen?: boolean;\n  placement?: Placement;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\ninterface UseTooltipReturn extends UseFloatingReturn, UseInteractionsReturn {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  isMounted: boolean;\n  transitionStyles: React.CSSProperties;\n}\n\nexport function useTooltip({\n  initialOpen = false,\n  placement = 'top',\n  open: controlledOpen,\n  onOpenChange: setControlledOpen,\n}: TooltipOptions = {}): UseTooltipReturn {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);\n\n  const open = controlledOpen ?? uncontrolledOpen;\n  const setOpen = setControlledOpen ?? setUncontrolledOpen;\n\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { animations: layoutAnimations } = useAppearance().parsedOptions;\n  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n  const data = useFloating({\n    placement,\n    open,\n    onOpenChange: setOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offset(6),\n      flip({\n        crossAxis: placement.includes('-'),\n        fallbackAxisSideDirection: 'start',\n        padding: 6,\n      }),\n      shift({ padding: 6 }),\n    ],\n  });\n\n  const context = data.context;\n\n  const hover = useHover(context, {\n    move: false,\n    enabled: controlledOpen == null,\n  });\n  const focus = useFocus(context, {\n    enabled: controlledOpen == null,\n  });\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: 'tooltip' });\n\n  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n    duration: isMotionSafe ? 200 : 0,\n    initial: ({ side }) => {\n      return {\n        opacity: 0,\n        transform: side === 'top' ? 'translateY(4px)' : 'translateY(-4px)',\n      };\n    },\n    open: {\n      opacity: 1,\n      transform: 'translate(0)',\n    },\n    close: ({ side }) => ({\n      opacity: 0,\n      transform: side === 'top' ? 'translateY(4px)' : 'translateY(-4px)',\n    }),\n  });\n\n  const interactions = useInteractions([hover, focus, dismiss, role]);\n\n  return React.useMemo(\n    () => ({\n      open,\n      setOpen,\n      isMounted,\n      ...interactions,\n      ...data,\n      transitionStyles,\n    }),\n    [open, setOpen, interactions, data, isMounted, transitionStyles],\n  );\n}\n\ntype ContextType = UseTooltipReturn | null;\n\nconst TooltipContext = React.createContext<ContextType>(null);\n\nexport const useTooltipContext = (): UseTooltipReturn => {\n  const context = React.useContext(TooltipContext);\n\n  if (context == null) {\n    throw new Error('Tooltip components must be wrapped in <Tooltip />');\n  }\n\n  return context;\n};\n\nfunction Root({ children, ...options }: { children: React.ReactNode } & TooltipOptions) {\n  // This can accept any props as options, e.g. `placement`,\n  // or other positioning options.\n  const tooltip = useTooltip(options);\n  return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;\n}\n\ntype TriggerProps = React.HTMLProps<HTMLElement> & {\n  sx?: ThemableCssProp;\n};\n\nconst Trigger = React.forwardRef<HTMLElement, TriggerProps>(function TooltipTrigger(\n  { children, sx, ...props },\n  propRef,\n) {\n  const context = useTooltipContext();\n  const childrenRef = (children as any).ref;\n  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);\n\n  if (!React.isValidElement(children)) {\n    return null;\n  }\n\n  // If the child is disabled, wrap it in a span to handle focus events\n  if (children.props.isDisabled || children.props.disabled) {\n    return (\n      <Span\n        ref={ref}\n        {...context.getReferenceProps({\n          ...props,\n        })}\n        data-state={context.open ? 'open' : 'closed'}\n        sx={[\n          {\n            width: 'fit-content',\n            display: 'inline-block',\n            cursor: 'not-allowed',\n            outline: 'none',\n          },\n          sx,\n        ]}\n        tabIndex={0}\n      >\n        {children}\n      </Span>\n    );\n  }\n\n  return React.cloneElement(\n    children,\n    context.getReferenceProps({\n      ref,\n      ...props,\n      ...children.props,\n      'data-state': context.open ? 'open' : 'closed',\n    }),\n  );\n});\n\nconst Content = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLProps<HTMLDivElement> & {\n    text: string | LocalizationKey;\n    sx?: ThemableCssProp;\n  }\n>(function TooltipContent({ style, text, sx, ...props }, propRef) {\n  const context = useTooltipContext();\n  const ref = useMergeRefs([context.refs.setFloating, propRef]);\n\n  if (!context.isMounted) {\n    return null;\n  }\n\n  return (\n    <FloatingPortal>\n      <Box\n        ref={ref}\n        elementDescriptor={descriptors.tooltip}\n        style={{\n          ...context.floatingStyles,\n          ...style,\n        }}\n        {...context.getFloatingProps(props)}\n      >\n        <Box\n          elementDescriptor={descriptors.tooltipContent}\n          style={context.transitionStyles}\n          sx={[\n            t => ({\n              paddingBlock: t.space.$1,\n              paddingInline: t.space.$1x5,\n              borderRadius: t.radii.$md,\n              backgroundColor: t.colors.$black,\n              color: t.colors.$white,\n              maxWidth: t.sizes.$60,\n            }),\n            sx,\n          ]}\n        >\n          <Text\n            elementDescriptor={descriptors.tooltipText}\n            localizationKey={text}\n            variant='body'\n            colorScheme='inherit'\n          />\n        </Box>\n      </Box>\n    </FloatingPortal>\n  );\n});\n\nexport const Tooltip = {\n  Root,\n  Trigger,\n  Content,\n};\n"],"mappings":"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"}

package/dist/elements/withAvatarShimmer.js

@@ -10,11 +10,11 @@ import { jsx } from "@emotion/react/jsx-runtime";
 */
 const withAvatarShimmer = (Component) => {
 	return forwardRef((props, ref) => {
-		const { parsedLayout } = useAppearance();
+		const { parsedOptions } = useAppearance();
 		return /* @__PURE__ */ jsx(Component, {
 			...props,
 			ref,
-			sx: [parsedLayout.shimmer ? { ":hover": {
+			sx: [parsedOptions.shimmer ? { ":hover": {
 				"--cl-shimmer-hover-transform": "skew(-45deg) translateX(600%)",
 				"--cl-shimmer-hover-after-transform": "skewX(45deg) translateX(-150%)"
 			} } : {}, props.sx]

package/dist/elements/withAvatarShimmer.js.map

@@ -1 +1 @@
-{"version":3,"file":"withAvatarShimmer.js","names":[],"sources":["../../src/elements/withAvatarShimmer.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { useAppearance } from '../customizables';\nimport type { ThemableCssProp } from '../styledSystem';\n\n/**\n * This HOC is used to add the hover selector for the avatar shimmer effect to its immediate child.\n * It is used since we might want to add the selector to a different element than the avatar itself,\n * for example in the <OrganizationSwitcher/>\n */\nexport const withAvatarShimmer = <T extends { sx?: ThemableCssProp }>(Component: React.ComponentType<T>) => {\n  return forwardRef<HTMLElement, T>((props, ref) => {\n    const { parsedLayout } = useAppearance();\n\n    return (\n      <Component\n        {...(props as T)}\n        ref={ref}\n        sx={[\n          parsedLayout.shimmer\n            ? {\n                ':hover': {\n                  '--cl-shimmer-hover-transform': 'skew(-45deg) translateX(600%)',\n                  '--cl-shimmer-hover-after-transform': 'skewX(45deg) translateX(-150%)',\n                },\n              }\n            : {},\n          props.sx,\n        ]}\n      />\n    );\n  });\n};\n"],"mappings":";;;;;;;;;;AAUA,MAAa,qBAAyD,cAAsC;AAC1G,QAAO,YAA4B,OAAO,QAAQ;EAChD,MAAM,EAAE,iBAAiB,eAAe;AAExC,SACE,oBAAC;GACC,GAAK;GACA;GACL,IAAI,CACF,aAAa,UACT,EACE,UAAU;IACR,gCAAgC;IAChC,sCAAsC;IACvC,EACF,GACD,EAAE,EACN,MAAM,GACP;IACD;GAEJ"}
+{"version":3,"file":"withAvatarShimmer.js","names":[],"sources":["../../src/elements/withAvatarShimmer.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { useAppearance } from '../customizables';\nimport type { ThemableCssProp } from '../styledSystem';\n\n/**\n * This HOC is used to add the hover selector for the avatar shimmer effect to its immediate child.\n * It is used since we might want to add the selector to a different element than the avatar itself,\n * for example in the <OrganizationSwitcher/>\n */\nexport const withAvatarShimmer = <T extends { sx?: ThemableCssProp }>(Component: React.ComponentType<T>) => {\n  return forwardRef<HTMLElement, T>((props, ref) => {\n    const { parsedOptions } = useAppearance();\n\n    return (\n      <Component\n        {...(props as T)}\n        ref={ref}\n        sx={[\n          parsedOptions.shimmer\n            ? {\n                ':hover': {\n                  '--cl-shimmer-hover-transform': 'skew(-45deg) translateX(600%)',\n                  '--cl-shimmer-hover-after-transform': 'skewX(45deg) translateX(-150%)',\n                },\n              }\n            : {},\n          props.sx,\n        ]}\n      />\n    );\n  });\n};\n"],"mappings":";;;;;;;;;;AAUA,MAAa,qBAAyD,cAAsC;AAC1G,QAAO,YAA4B,OAAO,QAAQ;EAChD,MAAM,EAAE,kBAAkB,eAAe;AAEzC,SACE,oBAAC;GACC,GAAK;GACA;GACL,IAAI,CACF,cAAc,UACV,EACE,UAAU;IACR,gCAAgC;IAChC,sCAAsC;IACvC,EACF,GACD,EAAE,EACN,MAAM,GACP;IACD;GAEJ"}