@clerk/ui 1.13.0-snapshot.v20260520220646 → 1.13.0

package/dist/ClerkUI.js

@@ -23,8 +23,8 @@ import { isVersionAtLeast, parseVersion } from "@clerk/shared/versionCheck";
 * @public
 */
 var ClerkUI = class ClerkUI {
-	static version = "1.13.0-snapshot.v20260520220646";
-	version = "1.13.0-snapshot.v20260520220646";
+	static version = "1.13.0";
+	version = "1.13.0";
 	#componentRenderer;
 	/**
 	* Creates a new `ClerkUI` instance and mounts the internal component renderer.

package/dist/common/CustomPageContentContainer.js

@@ -1,11 +1,12 @@
 import { ExternalElementMounter } from "../utils/ExternalElementMounter.js";
 import { descriptors } from "../customizables/elementDescriptors.js";
 import { Col } from "../customizables/index.js";
+import { ProfileCard } from "../elements/ProfileCard/index.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 
 //#region src/common/CustomPageContentContainer.tsx
 const CustomPageContentContainer = ({ mount, unmount }) => {
-	return /* @__PURE__ */ jsx(Col, {
+	return /* @__PURE__ */ jsx(ProfileCard.Page, { children: /* @__PURE__ */ jsx(Col, {
 		elementDescriptor: descriptors.page,
 		gap: 8,
 		children: /* @__PURE__ */ jsx(Col, {
@@ -16,7 +17,7 @@ const CustomPageContentContainer = ({ mount, unmount }) => {
 				unmount
 			})
 		})
-	});
+	}) });
 };
 
 //#endregion

package/dist/common/CustomPageContentContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomPageContentContainer.js","names":[],"sources":["../../src/common/CustomPageContentContainer.tsx"],"sourcesContent":["import { Col, descriptors } from '../customizables';\nimport type { CustomPageContent } from '../utils/createCustomPages';\nimport { ExternalElementMounter } from '../utils/ExternalElementMounter';\n\nexport const CustomPageContentContainer = ({ mount, unmount }: Omit<CustomPageContent, 'url'>) => {\n  return (\n    <Col\n      elementDescriptor={descriptors.page}\n      gap={8}\n    >\n      <Col\n        elementDescriptor={descriptors.profilePage}\n        gap={8}\n      >\n        <ExternalElementMounter\n          mount={mount}\n          unmount={unmount}\n        />\n      </Col>\n    </Col>\n  );\n};\n"],"mappings":";;;;;;AAIA,MAAa,8BAA8B,EAAE,OAAO,cAA8C;AAChG,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAK;YAEL,oBAAC;GACC,mBAAmB,YAAY;GAC/B,KAAK;aAEL,oBAAC;IACQ;IACE;KACT;IACE;GACF"}
+{"version":3,"file":"CustomPageContentContainer.js","names":[],"sources":["../../src/common/CustomPageContentContainer.tsx"],"sourcesContent":["import { Col, descriptors } from '../customizables';\nimport { ProfileCard } from '../elements/ProfileCard';\nimport type { CustomPageContent } from '../utils/createCustomPages';\nimport { ExternalElementMounter } from '../utils/ExternalElementMounter';\n\nexport const CustomPageContentContainer = ({ mount, unmount }: Omit<CustomPageContent, 'url'>) => {\n  return (\n    <ProfileCard.Page>\n      <Col\n        elementDescriptor={descriptors.page}\n        gap={8}\n      >\n        <Col\n          elementDescriptor={descriptors.profilePage}\n          gap={8}\n        >\n          <ExternalElementMounter\n            mount={mount}\n            unmount={unmount}\n          />\n        </Col>\n      </Col>\n    </ProfileCard.Page>\n  );\n};\n"],"mappings":";;;;;;;AAKA,MAAa,8BAA8B,EAAE,OAAO,cAA8C;AAChG,QACE,oBAAC,YAAY,kBACX,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAK;YAEL,oBAAC;GACC,mBAAmB,YAAY;GAC/B,KAAK;aAEL,oBAAC;IACQ;IACE;KACT;IACE;GACF,GACW"}

package/dist/components/OrganizationProfile/OrganizationAPIKeysPage.js

@@ -4,6 +4,7 @@ import { useOrganizationProfileContext } from "../../contexts/components/Organiz
 import { Col } from "../../customizables/index.js";
 import { Header } from "../../elements/Header.js";
 import { APIKeysPage } from "../APIKeys/APIKeys.js";
+import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { useUnsafeNavbarContext } from "../../elements/Navbar.js";
 import { useOrganization } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
@@ -14,7 +15,7 @@ const OrganizationAPIKeysPage = () => {
 	const { contentRef } = useUnsafeNavbarContext();
 	const { apiKeysProps } = useOrganizationProfileContext();
 	if (!organization) return null;
-	return /* @__PURE__ */ jsxs(Col, {
+	return /* @__PURE__ */ jsx(ProfileCard.Page, { children: /* @__PURE__ */ jsxs(Col, {
 		gap: 4,
 		children: [/* @__PURE__ */ jsx(Header.Root, { children: /* @__PURE__ */ jsx(Header.Title, {
 			localizationKey: localizationKeys("organizationProfile.apiKeysPage.title"),
@@ -29,7 +30,7 @@ const OrganizationAPIKeysPage = () => {
 				revokeModalRoot: contentRef
 			})
 		})]
-	});
+	}) });
 };
 
 //#endregion

package/dist/components/OrganizationProfile/OrganizationAPIKeysPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationAPIKeysPage.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\n\nimport { APIKeysContext, useOrganizationProfileContext } from '@/ui/contexts';\nimport { Col, localizationKeys } from '@/ui/customizables';\nimport { Header } from '@/ui/elements/Header';\nimport { useUnsafeNavbarContext } from '@/ui/elements/Navbar';\n\nimport { APIKeysPage } from '../APIKeys/APIKeys';\n\nexport const OrganizationAPIKeysPage = () => {\n  const { organization } = useOrganization();\n  const { contentRef } = useUnsafeNavbarContext();\n  const { apiKeysProps } = useOrganizationProfileContext();\n\n  if (!organization) {\n    // We should never reach this point, but we'll return null to make TS happy\n    return null;\n  }\n\n  return (\n    <Col gap={4}>\n      <Header.Root>\n        <Header.Title\n          localizationKey={localizationKeys('organizationProfile.apiKeysPage.title')}\n          textVariant='h2'\n        />\n      </Header.Root>\n      <APIKeysContext.Provider value={{ ...apiKeysProps, componentName: 'APIKeys' }}>\n        <APIKeysPage\n          subject={organization.id}\n          revokeModalRoot={contentRef}\n        />\n      </APIKeysContext.Provider>\n    </Col>\n  );\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAa,gCAAgC;CAC3C,MAAM,EAAE,iBAAiB,iBAAiB;CAC1C,MAAM,EAAE,eAAe,wBAAwB;CAC/C,MAAM,EAAE,iBAAiB,+BAA+B;AAExD,KAAI,CAAC,aAEH,QAAO;AAGT,QACE,qBAAC;EAAI,KAAK;aACR,oBAAC,OAAO,kBACN,oBAAC,OAAO;GACN,iBAAiB,iBAAiB,wCAAwC;GAC1E,aAAY;IACZ,GACU,EACd,oBAAC,eAAe;GAAS,OAAO;IAAE,GAAG;IAAc,eAAe;IAAW;aAC3E,oBAAC;IACC,SAAS,aAAa;IACtB,iBAAiB;KACjB;IACsB;GACtB"}
+{"version":3,"file":"OrganizationAPIKeysPage.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\n\nimport { APIKeysContext, useOrganizationProfileContext } from '@/ui/contexts';\nimport { Col, localizationKeys } from '@/ui/customizables';\nimport { Header } from '@/ui/elements/Header';\nimport { useUnsafeNavbarContext } from '@/ui/elements/Navbar';\nimport { ProfileCard } from '@/ui/elements/ProfileCard';\n\nimport { APIKeysPage } from '../APIKeys/APIKeys';\n\nexport const OrganizationAPIKeysPage = () => {\n  const { organization } = useOrganization();\n  const { contentRef } = useUnsafeNavbarContext();\n  const { apiKeysProps } = useOrganizationProfileContext();\n\n  if (!organization) {\n    // We should never reach this point, but we'll return null to make TS happy\n    return null;\n  }\n\n  return (\n    <ProfileCard.Page>\n      <Col gap={4}>\n        <Header.Root>\n          <Header.Title\n            localizationKey={localizationKeys('organizationProfile.apiKeysPage.title')}\n            textVariant='h2'\n          />\n        </Header.Root>\n        <APIKeysContext.Provider value={{ ...apiKeysProps, componentName: 'APIKeys' }}>\n          <APIKeysPage\n            subject={organization.id}\n            revokeModalRoot={contentRef}\n          />\n        </APIKeysContext.Provider>\n      </Col>\n    </ProfileCard.Page>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAUA,MAAa,gCAAgC;CAC3C,MAAM,EAAE,iBAAiB,iBAAiB;CAC1C,MAAM,EAAE,eAAe,wBAAwB;CAC/C,MAAM,EAAE,iBAAiB,+BAA+B;AAExD,KAAI,CAAC,aAEH,QAAO;AAGT,QACE,oBAAC,YAAY,kBACX,qBAAC;EAAI,KAAK;aACR,oBAAC,OAAO,kBACN,oBAAC,OAAO;GACN,iBAAiB,iBAAiB,wCAAwC;GAC1E,aAAY;IACZ,GACU,EACd,oBAAC,eAAe;GAAS,OAAO;IAAE,GAAG;IAAc,eAAe;IAAW;aAC3E,oBAAC;IACC,SAAS,aAAa;IACtB,iBAAiB;KACjB;IACsB;GACtB,GACW"}

package/dist/components/OrganizationProfile/OrganizationBillingPage.js

@@ -6,6 +6,7 @@ import { useCardState, withCardStateProvider } from "../../elements/contexts/ind
 import { Col } from "../../customizables/index.js";
 import { Card } from "../../elements/Card/index.js";
 import { Header } from "../../elements/Header.js";
+import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { Tab, TabPanel, TabPanels, Tabs, TabsList } from "../../elements/Tabs.js";
 import { useTabState } from "../../hooks/useTabState.js";
 import { PaymentAttemptsList } from "../PaymentAttempts/PaymentAttemptsList.js";
@@ -23,7 +24,7 @@ const orgTabMap = {
 const OrganizationBillingPageInternal = withCardStateProvider(() => {
 	const card = useCardState();
 	const { selectedTab, handleTabChange } = useTabState(orgTabMap);
-	return /* @__PURE__ */ jsx(Col, {
+	return /* @__PURE__ */ jsx(ProfileCard.Page, { children: /* @__PURE__ */ jsx(Col, {
 		elementDescriptor: descriptors.page,
 		sx: (t) => ({
 			gap: t.space.$8,
@@ -77,7 +78,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
 				})
 			]
 		})
-	});
+	}) });
 });
 const OrganizationBillingPage = () => {
 	return /* @__PURE__ */ jsx(SubscriberTypeContext.Provider, {

package/dist/components/OrganizationProfile/OrganizationBillingPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationBillingPage.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationBillingPage.tsx"],"sourcesContent":["import { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { Protect } from '../../common';\nimport { SubscriberTypeContext } from '../../contexts';\nimport { Col, descriptors, localizationKeys } from '../../customizables';\nimport { useTabState } from '../../hooks/useTabState';\nimport { PaymentAttemptsList } from '../PaymentAttempts';\nimport { PaymentMethods } from '../PaymentMethods';\nimport { StatementsList } from '../Statements';\nimport { SubscriptionsList } from '../Subscriptions';\n\nconst orgTabMap = {\n  0: 'subscriptions',\n  1: 'statements',\n  2: 'payments',\n} as const;\n\nconst OrganizationBillingPageInternal = withCardStateProvider(() => {\n  const card = useCardState();\n\n  const { selectedTab, handleTabChange } = useTabState(orgTabMap);\n\n  return (\n    <Col\n      elementDescriptor={descriptors.page}\n      sx={t => ({ gap: t.space.$8, color: t.colors.$colorForeground })}\n    >\n      <Col\n        elementDescriptor={descriptors.profilePage}\n        elementId={descriptors.profilePage.setId('billing')}\n        gap={4}\n      >\n        <Header.Root>\n          <Header.Title\n            localizationKey={localizationKeys('organizationProfile.billingPage.title')}\n            textVariant='h2'\n          />\n        </Header.Root>\n\n        <Card.Alert>{card.error}</Card.Alert>\n\n        <Tabs\n          value={selectedTab}\n          onChange={handleTabChange}\n        >\n          <TabsList sx={t => ({ gap: t.space.$6 })}>\n            <Tab\n              localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__subscriptions')}\n            />\n            <Tab localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__statements')} />\n            <Tab localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__payments')} />\n          </TabsList>\n          <TabPanels>\n            <TabPanel sx={{ width: '100%', flexDirection: 'column' }}>\n              <SubscriptionsList\n                title={localizationKeys('organizationProfile.billingPage.subscriptionsListSection.title')}\n                switchPlansLabel={localizationKeys(\n                  'organizationProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',\n                )}\n                newSubscriptionLabel={localizationKeys(\n                  'organizationProfile.billingPage.subscriptionsListSection.actionLabel__newSubscription',\n                )}\n                manageSubscriptionLabel={localizationKeys(\n                  'organizationProfile.billingPage.subscriptionsListSection.actionLabel__manageSubscription',\n                )}\n              />\n              <Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>\n                <PaymentMethods />\n              </Protect>\n            </TabPanel>\n            <TabPanel sx={{ width: '100%' }}>\n              <StatementsList />\n            </TabPanel>\n            <TabPanel sx={{ width: '100%' }}>\n              <PaymentAttemptsList />\n            </TabPanel>\n          </TabPanels>\n        </Tabs>\n      </Col>\n    </Col>\n  );\n});\n\nexport const OrganizationBillingPage = () => {\n  return (\n    <SubscriberTypeContext.Provider value='organization'>\n      <OrganizationBillingPageInternal />\n    </SubscriberTypeContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAcA,MAAM,YAAY;CAChB,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAM,kCAAkC,4BAA4B;CAClE,MAAM,OAAO,cAAc;CAE3B,MAAM,EAAE,aAAa,oBAAoB,YAAY,UAAU;AAE/D,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAI,OAAM;GAAE,KAAK,EAAE,MAAM;GAAI,OAAO,EAAE,OAAO;GAAkB;YAE/D,qBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,UAAU;GACnD,KAAK;;IAEL,oBAAC,OAAO,kBACN,oBAAC,OAAO;KACN,iBAAiB,iBAAiB,wCAAwC;KAC1E,aAAY;MACZ,GACU;IAEd,oBAAC,KAAK,mBAAO,KAAK,QAAmB;IAErC,qBAAC;KACC,OAAO;KACP,UAAU;gBAEV,qBAAC;MAAS,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;;OACrC,oBAAC,OACC,iBAAiB,iBAAiB,mEAAmE,GACrG;OACF,oBAAC,OAAI,iBAAiB,iBAAiB,gEAAgE,GAAI;OAC3G,oBAAC,OAAI,iBAAiB,iBAAiB,8DAA8D,GAAI;;OAChG,EACX,qBAAC;MACC,qBAAC;OAAS,IAAI;QAAE,OAAO;QAAQ,eAAe;QAAU;kBACtD,oBAAC;QACC,OAAO,iBAAiB,iEAAiE;QACzF,kBAAkB,iBAChB,mFACD;QACD,sBAAsB,iBACpB,wFACD;QACD,yBAAyB,iBACvB,2FACD;SACD,EACF,oBAAC;QAAQ,YAAW,QAAO,IAAI,EAAE,YAAY,0BAA0B,CAAC;kBACtE,oBAAC,mBAAiB;SACV;QACD;MACX,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,mBAAiB;QACT;MACX,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,wBAAsB;QACd;SACD;MACP;;IACH;GACF;EAER;AAEF,MAAa,gCAAgC;AAC3C,QACE,oBAAC,sBAAsB;EAAS,OAAM;YACpC,oBAAC,oCAAkC;GACJ"}
+{"version":3,"file":"OrganizationBillingPage.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationBillingPage.tsx"],"sourcesContent":["import { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { ProfileCard } from '@/ui/elements/ProfileCard';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { Protect } from '../../common';\nimport { SubscriberTypeContext } from '../../contexts';\nimport { Col, descriptors, localizationKeys } from '../../customizables';\nimport { useTabState } from '../../hooks/useTabState';\nimport { PaymentAttemptsList } from '../PaymentAttempts';\nimport { PaymentMethods } from '../PaymentMethods';\nimport { StatementsList } from '../Statements';\nimport { SubscriptionsList } from '../Subscriptions';\n\nconst orgTabMap = {\n  0: 'subscriptions',\n  1: 'statements',\n  2: 'payments',\n} as const;\n\nconst OrganizationBillingPageInternal = withCardStateProvider(() => {\n  const card = useCardState();\n\n  const { selectedTab, handleTabChange } = useTabState(orgTabMap);\n\n  return (\n    <ProfileCard.Page>\n      <Col\n        elementDescriptor={descriptors.page}\n        sx={t => ({ gap: t.space.$8, color: t.colors.$colorForeground })}\n      >\n        <Col\n          elementDescriptor={descriptors.profilePage}\n          elementId={descriptors.profilePage.setId('billing')}\n          gap={4}\n        >\n          <Header.Root>\n            <Header.Title\n              localizationKey={localizationKeys('organizationProfile.billingPage.title')}\n              textVariant='h2'\n            />\n          </Header.Root>\n\n          <Card.Alert>{card.error}</Card.Alert>\n\n          <Tabs\n            value={selectedTab}\n            onChange={handleTabChange}\n          >\n            <TabsList sx={t => ({ gap: t.space.$6 })}>\n              <Tab\n                localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__subscriptions')}\n              />\n              <Tab\n                localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__statements')}\n              />\n              <Tab localizationKey={localizationKeys('organizationProfile.billingPage.start.headerTitle__payments')} />\n            </TabsList>\n            <TabPanels>\n              <TabPanel sx={{ width: '100%', flexDirection: 'column' }}>\n                <SubscriptionsList\n                  title={localizationKeys('organizationProfile.billingPage.subscriptionsListSection.title')}\n                  switchPlansLabel={localizationKeys(\n                    'organizationProfile.billingPage.subscriptionsListSection.actionLabel__switchPlan',\n                  )}\n                  newSubscriptionLabel={localizationKeys(\n                    'organizationProfile.billingPage.subscriptionsListSection.actionLabel__newSubscription',\n                  )}\n                  manageSubscriptionLabel={localizationKeys(\n                    'organizationProfile.billingPage.subscriptionsListSection.actionLabel__manageSubscription',\n                  )}\n                />\n                <Protect condition={has => has({ permission: 'org:sys_billing:manage' })}>\n                  <PaymentMethods />\n                </Protect>\n              </TabPanel>\n              <TabPanel sx={{ width: '100%' }}>\n                <StatementsList />\n              </TabPanel>\n              <TabPanel sx={{ width: '100%' }}>\n                <PaymentAttemptsList />\n              </TabPanel>\n            </TabPanels>\n          </Tabs>\n        </Col>\n      </Col>\n    </ProfileCard.Page>\n  );\n});\n\nexport const OrganizationBillingPage = () => {\n  return (\n    <SubscriberTypeContext.Provider value='organization'>\n      <OrganizationBillingPageInternal />\n    </SubscriberTypeContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAY;CAChB,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAM,kCAAkC,4BAA4B;CAClE,MAAM,OAAO,cAAc;CAE3B,MAAM,EAAE,aAAa,oBAAoB,YAAY,UAAU;AAE/D,QACE,oBAAC,YAAY,kBACX,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAI,OAAM;GAAE,KAAK,EAAE,MAAM;GAAI,OAAO,EAAE,OAAO;GAAkB;YAE/D,qBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,UAAU;GACnD,KAAK;;IAEL,oBAAC,OAAO,kBACN,oBAAC,OAAO;KACN,iBAAiB,iBAAiB,wCAAwC;KAC1E,aAAY;MACZ,GACU;IAEd,oBAAC,KAAK,mBAAO,KAAK,QAAmB;IAErC,qBAAC;KACC,OAAO;KACP,UAAU;gBAEV,qBAAC;MAAS,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;;OACrC,oBAAC,OACC,iBAAiB,iBAAiB,mEAAmE,GACrG;OACF,oBAAC,OACC,iBAAiB,iBAAiB,gEAAgE,GAClG;OACF,oBAAC,OAAI,iBAAiB,iBAAiB,8DAA8D,GAAI;;OAChG,EACX,qBAAC;MACC,qBAAC;OAAS,IAAI;QAAE,OAAO;QAAQ,eAAe;QAAU;kBACtD,oBAAC;QACC,OAAO,iBAAiB,iEAAiE;QACzF,kBAAkB,iBAChB,mFACD;QACD,sBAAsB,iBACpB,wFACD;QACD,yBAAyB,iBACvB,2FACD;SACD,EACF,oBAAC;QAAQ,YAAW,QAAO,IAAI,EAAE,YAAY,0BAA0B,CAAC;kBACtE,oBAAC,mBAAiB;SACV;QACD;MACX,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,mBAAiB;QACT;MACX,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,wBAAsB;QACd;SACD;MACP;;IACH;GACF,GACW;EAErB;AAEF,MAAa,gCAAgC;AAC3C,QACE,oBAAC,sBAAsB;EAAS,OAAM;YACpC,oBAAC,oCAAkC;GACJ"}

package/dist/components/OrganizationProfile/OrganizationGeneralPage.js

@@ -6,6 +6,7 @@ import { Col, Text } from "../../customizables/index.js";
 import { Header } from "../../elements/Header.js";
 import { useActionContext } from "../../elements/Action/ActionRoot.js";
 import { Action } from "../../elements/Action/index.js";
+import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { ProfileSection } from "../../elements/Section.js";
 import { OrganizationPreview } from "../../elements/OrganizationPreview.js";
 import { DeleteOrganizationForm, LeaveOrganizationForm } from "./ActionConfirmationPage.js";
@@ -45,7 +46,7 @@ const DeleteOrganizationScreen = () => {
 	});
 };
 const OrganizationGeneralPage = () => {
-	return /* @__PURE__ */ jsx(Col, {
+	return /* @__PURE__ */ jsx(ProfileCard.Page, { children: /* @__PURE__ */ jsx(Col, {
 		elementDescriptor: descriptors.page,
 		sx: (t) => ({ gap: t.space.$8 }),
 		children: /* @__PURE__ */ jsxs(Col, {
@@ -66,7 +67,7 @@ const OrganizationGeneralPage = () => {
 				/* @__PURE__ */ jsx(OrganizationDeleteSection, {})
 			]
 		})
-	});
+	}) });
 };
 const OrganizationProfileSection = () => {
 	const { organization } = useOrganization();

package/dist/components/OrganizationProfile/OrganizationGeneralPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationGeneralPage.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationGeneralPage.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\n\nimport { Header } from '@/ui/elements/Header';\nimport { OrganizationPreview } from '@/ui/elements/OrganizationPreview';\nimport { ProfileSection } from '@/ui/elements/Section';\n\nimport { Protect, useProtect } from '../../common';\nimport { useEnvironment } from '../../contexts';\nimport { Col, descriptors, localizationKeys, Text } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport { DeleteOrganizationForm, LeaveOrganizationForm } from './ActionConfirmationPage';\nimport { AddDomainForm } from './AddDomainForm';\nimport { DomainList } from './DomainList';\nimport { ProfileForm } from './ProfileForm';\n\nconst ProfileScreen = () => {\n  const { close } = useActionContext();\n  return (\n    <ProfileForm\n      onSuccess={close}\n      onReset={close}\n    />\n  );\n};\n\nconst AddDomainScreen = () => {\n  const { close } = useActionContext();\n  return (\n    <AddDomainForm\n      onSuccess={close}\n      onReset={close}\n    />\n  );\n};\n\nconst LeaveOrganizationScreen = () => {\n  const { close } = useActionContext();\n  return (\n    <LeaveOrganizationForm\n      onSuccess={close}\n      onReset={close}\n    />\n  );\n};\n\nconst DeleteOrganizationScreen = () => {\n  const { close } = useActionContext();\n  return (\n    <DeleteOrganizationForm\n      onSuccess={close}\n      onReset={close}\n    />\n  );\n};\n\nexport const OrganizationGeneralPage = () => {\n  return (\n    <Col\n      elementDescriptor={descriptors.page}\n      sx={t => ({ gap: t.space.$8 })}\n    >\n      <Col\n        elementDescriptor={descriptors.profilePage}\n        elementId={descriptors.profilePage.setId('organizationGeneral')}\n      >\n        <Header.Root>\n          <Header.Title\n            localizationKey={localizationKeys('organizationProfile.start.headerTitle__general')}\n            sx={t => ({ marginBottom: t.space.$4 })}\n            textVariant='h2'\n          />\n        </Header.Root>\n        <OrganizationProfileSection />\n        <Protect permission='org:sys_domains:read'>\n          <OrganizationDomainsSection />\n        </Protect>\n        <OrganizationLeaveSection />\n        <OrganizationDeleteSection />\n      </Col>\n    </Col>\n  );\n};\n\nconst OrganizationProfileSection = () => {\n  const { organization } = useOrganization();\n\n  if (!organization) {\n    return null;\n  }\n\n  const profile = (\n    <OrganizationPreview\n      size='lg'\n      mainIdentifierVariant='subtitle'\n      organization={organization}\n    />\n  );\n\n  return (\n    <ProfileSection.Root\n      title={localizationKeys('organizationProfile.start.profileSection.title')}\n      id='organizationProfile'\n    >\n      <Action.Root>\n        <Protect\n          permission={'org:sys_profile:manage'}\n          fallback={profile}\n        >\n          <Action.Closed value='edit'>\n            <ProfileSection.Item id='organizationProfile'>\n              {profile}\n\n              <Action.Trigger value='edit'>\n                <ProfileSection.Button\n                  id='organizationProfile'\n                  localizationKey={localizationKeys('organizationProfile.start.profileSection.primaryButton')}\n                />\n              </Action.Trigger>\n            </ProfileSection.Item>\n          </Action.Closed>\n        </Protect>\n\n        <Action.Open value='edit'>\n          <Action.Card>\n            <ProfileScreen />\n          </Action.Card>\n        </Action.Open>\n      </Action.Root>\n    </ProfileSection.Root>\n  );\n};\n\nconst OrganizationDomainsSection = () => {\n  const { organizationSettings } = useEnvironment();\n  const { organization } = useOrganization();\n\n  if (!organizationSettings || !organization) {\n    return null;\n  }\n\n  if (!organizationSettings.domains.enabled) {\n    return null;\n  }\n\n  return (\n    <ProfileSection.Root\n      title={localizationKeys('organizationProfile.profilePage.domainSection.title')}\n      id='organizationDomains'\n      centered={false}\n    >\n      <Action.Root>\n        <DomainList />\n\n        <Protect permission='org:sys_domains:manage'>\n          <Action.Trigger value='add'>\n            <Col>\n              <ProfileSection.ArrowButton\n                localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}\n                id='organizationDomains'\n              />\n              <Text\n                localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}\n                sx={t => ({\n                  paddingInlineStart: t.space.$9,\n                })}\n                colorScheme='secondary'\n              />\n            </Col>\n          </Action.Trigger>\n\n          <Action.Open value='add'>\n            <Action.Card>\n              <AddDomainScreen />\n            </Action.Card>\n          </Action.Open>\n        </Protect>\n      </Action.Root>\n    </ProfileSection.Root>\n  );\n};\n\nconst OrganizationLeaveSection = () => {\n  const { organization } = useOrganization();\n\n  if (!organization) {\n    return null;\n  }\n\n  return (\n    <ProfileSection.Root\n      id='organizationDanger'\n      title={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}\n    >\n      <Action.Root>\n        <Action.Closed value='leave'>\n          <ProfileSection.Item\n            sx={t => ({\n              paddingTop: 0,\n              paddingBottom: 0,\n              paddingInlineStart: t.space.$1,\n            })}\n            id='organizationDanger'\n          >\n            <Action.Trigger value='leave'>\n              <ProfileSection.Button\n                id='organizationDanger'\n                variant='ghost'\n                colorScheme='danger'\n                textVariant='buttonLarge'\n                localizationKey={localizationKeys(\n                  'organizationProfile.profilePage.dangerSection.leaveOrganization.title',\n                )}\n              />\n            </Action.Trigger>\n          </ProfileSection.Item>\n        </Action.Closed>\n\n        <Action.Open value='leave'>\n          <Action.Card variant='destructive'>\n            <LeaveOrganizationScreen />\n          </Action.Card>\n        </Action.Open>\n      </Action.Root>\n    </ProfileSection.Root>\n  );\n};\n\nconst OrganizationDeleteSection = () => {\n  const { organization } = useOrganization();\n  const canDeleteOrganization = useProtect({ permission: 'org:sys_profile:delete' });\n\n  if (!organization) {\n    return null;\n  }\n\n  const adminDeleteEnabled = organization.adminDeleteEnabled;\n\n  if (!canDeleteOrganization || !adminDeleteEnabled) {\n    return null;\n  }\n\n  return (\n    <ProfileSection.Root\n      id='organizationDanger'\n      title={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}\n      sx={t => ({ marginBottom: t.space.$4 })}\n    >\n      <Action.Root>\n        <Action.Closed value='delete'>\n          <ProfileSection.Item\n            sx={t => ({\n              paddingTop: 0,\n              paddingBottom: 0,\n              paddingInlineStart: t.space.$1,\n            })}\n            id={'organizationDanger'}\n          >\n            <Action.Trigger value='delete'>\n              <ProfileSection.Button\n                id='organizationDanger'\n                variant='ghost'\n                colorScheme='danger'\n                textVariant='buttonLarge'\n                localizationKey={localizationKeys(\n                  'organizationProfile.profilePage.dangerSection.deleteOrganization.title',\n                )}\n              />\n            </Action.Trigger>\n          </ProfileSection.Item>\n        </Action.Closed>\n\n        <Action.Open value='delete'>\n          <Action.Card variant='destructive'>\n            <DeleteOrganizationScreen />\n          </Action.Card>\n        </Action.Open>\n      </Action.Root>\n    </ProfileSection.Root>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"OrganizationGeneralPage.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationGeneralPage.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\n\nimport { Header } from '@/ui/elements/Header';\nimport { OrganizationPreview } from '@/ui/elements/OrganizationPreview';\nimport { ProfileCard } from '@/ui/elements/ProfileCard';\nimport { ProfileSection } from '@/ui/elements/Section';\n\nimport { Protect, useProtect } from '../../common';\nimport { useEnvironment } from '../../contexts';\nimport { Col, descriptors, localizationKeys, Text } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport { DeleteOrganizationForm, LeaveOrganizationForm } from './ActionConfirmationPage';\nimport { AddDomainForm } from './AddDomainForm';\nimport { DomainList } from './DomainList';\nimport { ProfileForm } from './ProfileForm';\n\nconst ProfileScreen = () => {\n  const { close } = useActionContext();\n  return (\n    <ProfileForm\n      onSuccess={close}\n      onReset={close}\n    />\n  );\n};\n\nconst AddDomainScreen = () => {\n  const { close } = useActionContext();\n  return (\n    <AddDomainForm\n      onSuccess={close}\n      onReset={close}\n    />\n  );\n};\n\nconst LeaveOrganizationScreen = () => {\n  const { close } = useActionContext();\n  return (\n    <LeaveOrganizationForm\n      onSuccess={close}\n      onReset={close}\n    />\n  );\n};\n\nconst DeleteOrganizationScreen = () => {\n  const { close } = useActionContext();\n  return (\n    <DeleteOrganizationForm\n      onSuccess={close}\n      onReset={close}\n    />\n  );\n};\n\nexport const OrganizationGeneralPage = () => {\n  return (\n    <ProfileCard.Page>\n      <Col\n        elementDescriptor={descriptors.page}\n        sx={t => ({ gap: t.space.$8 })}\n      >\n        <Col\n          elementDescriptor={descriptors.profilePage}\n          elementId={descriptors.profilePage.setId('organizationGeneral')}\n        >\n          <Header.Root>\n            <Header.Title\n              localizationKey={localizationKeys('organizationProfile.start.headerTitle__general')}\n              sx={t => ({ marginBottom: t.space.$4 })}\n              textVariant='h2'\n            />\n          </Header.Root>\n          <OrganizationProfileSection />\n          <Protect permission='org:sys_domains:read'>\n            <OrganizationDomainsSection />\n          </Protect>\n          <OrganizationLeaveSection />\n          <OrganizationDeleteSection />\n        </Col>\n      </Col>\n    </ProfileCard.Page>\n  );\n};\n\nconst OrganizationProfileSection = () => {\n  const { organization } = useOrganization();\n\n  if (!organization) {\n    return null;\n  }\n\n  const profile = (\n    <OrganizationPreview\n      size='lg'\n      mainIdentifierVariant='subtitle'\n      organization={organization}\n    />\n  );\n\n  return (\n    <ProfileSection.Root\n      title={localizationKeys('organizationProfile.start.profileSection.title')}\n      id='organizationProfile'\n    >\n      <Action.Root>\n        <Protect\n          permission={'org:sys_profile:manage'}\n          fallback={profile}\n        >\n          <Action.Closed value='edit'>\n            <ProfileSection.Item id='organizationProfile'>\n              {profile}\n\n              <Action.Trigger value='edit'>\n                <ProfileSection.Button\n                  id='organizationProfile'\n                  localizationKey={localizationKeys('organizationProfile.start.profileSection.primaryButton')}\n                />\n              </Action.Trigger>\n            </ProfileSection.Item>\n          </Action.Closed>\n        </Protect>\n\n        <Action.Open value='edit'>\n          <Action.Card>\n            <ProfileScreen />\n          </Action.Card>\n        </Action.Open>\n      </Action.Root>\n    </ProfileSection.Root>\n  );\n};\n\nconst OrganizationDomainsSection = () => {\n  const { organizationSettings } = useEnvironment();\n  const { organization } = useOrganization();\n\n  if (!organizationSettings || !organization) {\n    return null;\n  }\n\n  if (!organizationSettings.domains.enabled) {\n    return null;\n  }\n\n  return (\n    <ProfileSection.Root\n      title={localizationKeys('organizationProfile.profilePage.domainSection.title')}\n      id='organizationDomains'\n      centered={false}\n    >\n      <Action.Root>\n        <DomainList />\n\n        <Protect permission='org:sys_domains:manage'>\n          <Action.Trigger value='add'>\n            <Col>\n              <ProfileSection.ArrowButton\n                localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}\n                id='organizationDomains'\n              />\n              <Text\n                localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}\n                sx={t => ({\n                  paddingInlineStart: t.space.$9,\n                })}\n                colorScheme='secondary'\n              />\n            </Col>\n          </Action.Trigger>\n\n          <Action.Open value='add'>\n            <Action.Card>\n              <AddDomainScreen />\n            </Action.Card>\n          </Action.Open>\n        </Protect>\n      </Action.Root>\n    </ProfileSection.Root>\n  );\n};\n\nconst OrganizationLeaveSection = () => {\n  const { organization } = useOrganization();\n\n  if (!organization) {\n    return null;\n  }\n\n  return (\n    <ProfileSection.Root\n      id='organizationDanger'\n      title={localizationKeys('organizationProfile.profilePage.dangerSection.leaveOrganization.title')}\n    >\n      <Action.Root>\n        <Action.Closed value='leave'>\n          <ProfileSection.Item\n            sx={t => ({\n              paddingTop: 0,\n              paddingBottom: 0,\n              paddingInlineStart: t.space.$1,\n            })}\n            id='organizationDanger'\n          >\n            <Action.Trigger value='leave'>\n              <ProfileSection.Button\n                id='organizationDanger'\n                variant='ghost'\n                colorScheme='danger'\n                textVariant='buttonLarge'\n                localizationKey={localizationKeys(\n                  'organizationProfile.profilePage.dangerSection.leaveOrganization.title',\n                )}\n              />\n            </Action.Trigger>\n          </ProfileSection.Item>\n        </Action.Closed>\n\n        <Action.Open value='leave'>\n          <Action.Card variant='destructive'>\n            <LeaveOrganizationScreen />\n          </Action.Card>\n        </Action.Open>\n      </Action.Root>\n    </ProfileSection.Root>\n  );\n};\n\nconst OrganizationDeleteSection = () => {\n  const { organization } = useOrganization();\n  const canDeleteOrganization = useProtect({ permission: 'org:sys_profile:delete' });\n\n  if (!organization) {\n    return null;\n  }\n\n  const adminDeleteEnabled = organization.adminDeleteEnabled;\n\n  if (!canDeleteOrganization || !adminDeleteEnabled) {\n    return null;\n  }\n\n  return (\n    <ProfileSection.Root\n      id='organizationDanger'\n      title={localizationKeys('organizationProfile.profilePage.dangerSection.deleteOrganization.title')}\n      sx={t => ({ marginBottom: t.space.$4 })}\n    >\n      <Action.Root>\n        <Action.Closed value='delete'>\n          <ProfileSection.Item\n            sx={t => ({\n              paddingTop: 0,\n              paddingBottom: 0,\n              paddingInlineStart: t.space.$1,\n            })}\n            id={'organizationDanger'}\n          >\n            <Action.Trigger value='delete'>\n              <ProfileSection.Button\n                id='organizationDanger'\n                variant='ghost'\n                colorScheme='danger'\n                textVariant='buttonLarge'\n                localizationKey={localizationKeys(\n                  'organizationProfile.profilePage.dangerSection.deleteOrganization.title',\n                )}\n              />\n            </Action.Trigger>\n          </ProfileSection.Item>\n        </Action.Closed>\n\n        <Action.Open value='delete'>\n          <Action.Card variant='destructive'>\n            <DeleteOrganizationScreen />\n          </Action.Card>\n        </Action.Open>\n      </Action.Root>\n    </ProfileSection.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBA,MAAM,sBAAsB;CAC1B,MAAM,EAAE,UAAU,kBAAkB;AACpC,QACE,oBAAC;EACC,WAAW;EACX,SAAS;GACT;;AAIN,MAAM,wBAAwB;CAC5B,MAAM,EAAE,UAAU,kBAAkB;AACpC,QACE,oBAAC;EACC,WAAW;EACX,SAAS;GACT;;AAIN,MAAM,gCAAgC;CACpC,MAAM,EAAE,UAAU,kBAAkB;AACpC,QACE,oBAAC;EACC,WAAW;EACX,SAAS;GACT;;AAIN,MAAM,iCAAiC;CACrC,MAAM,EAAE,UAAU,kBAAkB;AACpC,QACE,oBAAC;EACC,WAAW;EACX,SAAS;GACT;;AAIN,MAAa,gCAAgC;AAC3C,QACE,oBAAC,YAAY,kBACX,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;YAE7B,qBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,sBAAsB;;IAE/D,oBAAC,OAAO,kBACN,oBAAC,OAAO;KACN,iBAAiB,iBAAiB,iDAAiD;KACnF,KAAI,OAAM,EAAE,cAAc,EAAE,MAAM,IAAI;KACtC,aAAY;MACZ,GACU;IACd,oBAAC,+BAA6B;IAC9B,oBAAC;KAAQ,YAAW;eAClB,oBAAC,+BAA6B;MACtB;IACV,oBAAC,6BAA2B;IAC5B,oBAAC,8BAA4B;;IACzB;GACF,GACW;;AAIvB,MAAM,mCAAmC;CACvC,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,aACH,QAAO;CAGT,MAAM,UACJ,oBAAC;EACC,MAAK;EACL,uBAAsB;EACR;GACd;AAGJ,QACE,oBAAC,eAAe;EACd,OAAO,iBAAiB,iDAAiD;EACzE,IAAG;YAEH,qBAAC,OAAO,mBACN,oBAAC;GACC,YAAY;GACZ,UAAU;aAEV,oBAAC,OAAO;IAAO,OAAM;cACnB,qBAAC,eAAe;KAAK,IAAG;gBACrB,SAED,oBAAC,OAAO;MAAQ,OAAM;gBACpB,oBAAC,eAAe;OACd,IAAG;OACH,iBAAiB,iBAAiB,yDAAyD;QAC3F;OACa;MACG;KACR;IACR,EAEV,oBAAC,OAAO;GAAK,OAAM;aACjB,oBAAC,OAAO,kBACN,oBAAC,kBAAgB,GACL;IACF,IACF;GACM;;AAI1B,MAAM,mCAAmC;CACvC,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,wBAAwB,CAAC,aAC5B,QAAO;AAGT,KAAI,CAAC,qBAAqB,QAAQ,QAChC,QAAO;AAGT,QACE,oBAAC,eAAe;EACd,OAAO,iBAAiB,sDAAsD;EAC9E,IAAG;EACH,UAAU;YAEV,qBAAC,OAAO,mBACN,oBAAC,eAAa,EAEd,qBAAC;GAAQ,YAAW;cAClB,oBAAC,OAAO;IAAQ,OAAM;cACpB,qBAAC,kBACC,oBAAC,eAAe;KACd,iBAAiB,iBAAiB,8DAA8D;KAChG,IAAG;MACH,EACF,oBAAC;KACC,iBAAiB,iBAAiB,yDAAyD;KAC3F,KAAI,OAAM,EACR,oBAAoB,EAAE,MAAM,IAC7B;KACD,aAAY;MACZ,IACE;KACS,EAEjB,oBAAC,OAAO;IAAK,OAAM;cACjB,oBAAC,OAAO,kBACN,oBAAC,oBAAkB,GACP;KACF;IACN,IACE;GACM;;AAI1B,MAAM,iCAAiC;CACrC,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,aACH,QAAO;AAGT,QACE,oBAAC,eAAe;EACd,IAAG;EACH,OAAO,iBAAiB,wEAAwE;YAEhG,qBAAC,OAAO,mBACN,oBAAC,OAAO;GAAO,OAAM;aACnB,oBAAC,eAAe;IACd,KAAI,OAAM;KACR,YAAY;KACZ,eAAe;KACf,oBAAoB,EAAE,MAAM;KAC7B;IACD,IAAG;cAEH,oBAAC,OAAO;KAAQ,OAAM;eACpB,oBAAC,eAAe;MACd,IAAG;MACH,SAAQ;MACR,aAAY;MACZ,aAAY;MACZ,iBAAiB,iBACf,wEACD;OACD;MACa;KACG;IACR,EAEhB,oBAAC,OAAO;GAAK,OAAM;aACjB,oBAAC,OAAO;IAAK,SAAQ;cACnB,oBAAC,4BAA0B;KACf;IACF,IACF;GACM;;AAI1B,MAAM,kCAAkC;CACtC,MAAM,EAAE,iBAAiB,iBAAiB;CAC1C,MAAM,wBAAwB,WAAW,EAAE,YAAY,0BAA0B,CAAC;AAElF,KAAI,CAAC,aACH,QAAO;CAGT,MAAM,qBAAqB,aAAa;AAExC,KAAI,CAAC,yBAAyB,CAAC,mBAC7B,QAAO;AAGT,QACE,oBAAC,eAAe;EACd,IAAG;EACH,OAAO,iBAAiB,yEAAyE;EACjG,KAAI,OAAM,EAAE,cAAc,EAAE,MAAM,IAAI;YAEtC,qBAAC,OAAO,mBACN,oBAAC,OAAO;GAAO,OAAM;aACnB,oBAAC,eAAe;IACd,KAAI,OAAM;KACR,YAAY;KACZ,eAAe;KACf,oBAAoB,EAAE,MAAM;KAC7B;IACD,IAAI;cAEJ,oBAAC,OAAO;KAAQ,OAAM;eACpB,oBAAC,eAAe;MACd,IAAG;MACH,SAAQ;MACR,aAAY;MACZ,aAAY;MACZ,iBAAiB,iBACf,yEACD;OACD;MACa;KACG;IACR,EAEhB,oBAAC,OAAO;GAAK,OAAM;aACjB,oBAAC,OAAO;IAAK,SAAQ;cACnB,oBAAC,6BAA2B;KAChB;IACF,IACF;GACM"}

package/dist/components/OrganizationProfile/OrganizationMembers.js

@@ -12,6 +12,7 @@ import { Header } from "../../elements/Header.js";
 import { NotificationCountBadge } from "../../common/NotificationCountBadge.js";
 import { Animated } from "../../elements/Animated.js";
 import { Action } from "../../elements/Action/index.js";
+import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { useFetchRoles } from "../../hooks/useFetchRoles.js";
 import { Tab, TabPanel, TabPanels, Tabs, TabsList } from "../../elements/Tabs.js";
 import { ActiveMembersList } from "./ActiveMembersList.js";
@@ -43,7 +44,7 @@ const OrganizationMembers = withCardStateProvider(() => {
 		} : void 0
 	});
 	if (canManageMemberships === null) return null;
-	return /* @__PURE__ */ jsxs(Col, {
+	return /* @__PURE__ */ jsx(ProfileCard.Page, { children: /* @__PURE__ */ jsxs(Col, {
 		elementDescriptor: descriptors.page,
 		gap: 2,
 		children: [/* @__PURE__ */ jsx(Col, {
@@ -172,7 +173,7 @@ const OrganizationMembers = withCardStateProvider(() => {
 				})]
 			})
 		}) : null]
-	});
+	}) });
 });
 
 //#endregion

package/dist/components/OrganizationProfile/OrganizationMembers.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationMembers.js","names":["query","Users"],"sources":["../../../src/components/OrganizationProfile/OrganizationMembers.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { useState } from 'react';\n\nimport { useFetchRoles } from '@/hooks/useFetchRoles';\nimport { Users } from '@/icons';\nimport { Alert } from '@/ui/elements/Alert';\nimport { Animated } from '@/ui/elements/Animated';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { NotificationCountBadge, useProtect } from '../../common';\nimport { useEnvironment } from '../../contexts';\nimport { Box, Col, descriptors, Flex, Icon, localizationKeys, Text } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { mqu } from '../../styledSystem';\nimport { ActiveMembersList } from './ActiveMembersList';\nimport { MembersActionsRow } from './MembersActions';\nimport { MembersSearch } from './MembersSearch';\nimport { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';\nimport { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';\n\nexport const ACTIVE_MEMBERS_PAGE_SIZE = 10;\n\nexport const OrganizationMembers = withCardStateProvider(() => {\n  const { organizationSettings } = useEnvironment();\n  const card = useCardState();\n  const { hasRoleSetMigration } = useFetchRoles();\n  const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });\n  const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });\n  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;\n\n  const [query, setQuery] = useState('');\n  const [search, setSearch] = useState('');\n\n  const { membershipRequests, memberships, invitations, organization } = useOrganization({\n    membershipRequests: isDomainsEnabled || undefined,\n    invitations: canManageMemberships || undefined,\n    memberships: canReadMemberships\n      ? {\n          keepPreviousData: true,\n          query: query || undefined,\n        }\n      : undefined,\n  });\n\n  if (canManageMemberships === null) {\n    return null;\n  }\n\n  return (\n    <Col\n      elementDescriptor={descriptors.page}\n      gap={2}\n    >\n      <Col\n        elementDescriptor={descriptors.profilePage}\n        elementId={descriptors.profilePage.setId('organizationMembers')}\n        gap={4}\n        sx={theme => ({ paddingBottom: theme.space.$13 })}\n      >\n        <Action.Root animate={false}>\n          <Animated asChild>\n            <Header.Root\n              contentSx={{\n                [mqu.md]: {\n                  flexDirection: 'row',\n                  width: '100%',\n                  justifyContent: 'space-between',\n                },\n              }}\n            >\n              <Header.Title\n                localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}\n                textVariant='h2'\n              />\n            </Header.Root>\n          </Animated>\n          <Card.Alert>{card.error}</Card.Alert>\n          <Tabs>\n            <TabsList sx={t => ({ gap: t.space.$2 })}>\n              {canReadMemberships && (\n                <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')}>\n                  {!!memberships?.count && (\n                    <NotificationCountBadge\n                      shouldAnimate={!query}\n                      notificationCount={memberships.count}\n                      colorScheme='outline'\n                    />\n                  )}\n                </Tab>\n              )}\n              {canManageMemberships && (\n                <Tab\n                  localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}\n                >\n                  {invitations?.data && !invitations.isLoading && (\n                    <NotificationCountBadge\n                      notificationCount={invitations.count}\n                      colorScheme='outline'\n                    />\n                  )}\n                </Tab>\n              )}\n              {canManageMemberships && isDomainsEnabled && (\n                <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>\n                  {membershipRequests?.data && !membershipRequests.isLoading && (\n                    <NotificationCountBadge\n                      notificationCount={membershipRequests.count}\n                      colorScheme='outline'\n                    />\n                  )}\n                </Tab>\n              )}\n            </TabsList>\n            <TabPanels>\n              {canReadMemberships && (\n                <TabPanel sx={{ width: '100%' }}>\n                  <Flex\n                    gap={4}\n                    direction='col'\n                    sx={{\n                      width: '100%',\n                    }}\n                  >\n                    <Flex\n                      gap={2}\n                      direction='col'\n                      sx={{\n                        width: '100%',\n                      }}\n                    >\n                      <MembersActionsRow\n                        actionSlot={\n                          <MembersSearch\n                            query={query}\n                            value={search}\n                            memberships={memberships}\n                            onSearchChange={query => setSearch(query)}\n                            onQueryTrigger={query => setQuery(query)}\n                          />\n                        }\n                      />\n                      {hasRoleSetMigration && (\n                        <Alert\n                          variant='warning'\n                          title={localizationKeys(\n                            'organizationProfile.membersPage.alerts.roleSetMigrationInProgress.title',\n                          )}\n                          subtitle={localizationKeys(\n                            'organizationProfile.membersPage.alerts.roleSetMigrationInProgress.subtitle',\n                          )}\n                        />\n                      )}\n                      <ActiveMembersList\n                        pageSize={ACTIVE_MEMBERS_PAGE_SIZE}\n                        memberships={memberships}\n                      />\n                    </Flex>\n                  </Flex>\n                </TabPanel>\n              )}\n              {canManageMemberships && (\n                <TabPanel sx={{ width: '100%' }}>\n                  <OrganizationMembersTabInvitations />\n                </TabPanel>\n              )}\n              {canManageMemberships && isDomainsEnabled && (\n                <TabPanel sx={{ width: '100%' }}>\n                  <OrganizationMembersTabRequests />\n                </TabPanel>\n              )}\n            </TabPanels>\n          </Tabs>\n        </Action.Root>\n      </Col>\n\n      {canReadMemberships && !!memberships?.count && organization && organization.maxAllowedMemberships > 0 ? (\n        <Box\n          sx={theme => ({\n            position: 'absolute',\n            bottom: 0,\n            left: 0,\n            right: 0,\n            backgroundColor: theme.colors.$colorBackground,\n            borderTop: `1px solid ${theme.colors.$borderAlpha100}`,\n            paddingInline: theme.space.$4,\n            height: theme.space.$13,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n          })}\n        >\n          <Text\n            sx={t => ({\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: t.space.$2,\n            })}\n          >\n            <Icon\n              icon={Users}\n              size='md'\n              colorScheme='neutral'\n            />\n            <Text\n              as='span'\n              colorScheme='inherit'\n              localizationKey={localizationKeys('organizationProfile.start.membershipSeatUsageLabel', {\n                count: organization.membersCount + organization.pendingInvitationsCount,\n                limit: organization.maxAllowedMemberships,\n              })}\n            />\n          </Text>\n        </Box>\n      ) : null}\n    </Col>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"OrganizationMembers.js","names":["query","Users"],"sources":["../../../src/components/OrganizationProfile/OrganizationMembers.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { useState } from 'react';\n\nimport { useFetchRoles } from '@/hooks/useFetchRoles';\nimport { Users } from '@/icons';\nimport { Alert } from '@/ui/elements/Alert';\nimport { Animated } from '@/ui/elements/Animated';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { ProfileCard } from '@/ui/elements/ProfileCard';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { NotificationCountBadge, useProtect } from '../../common';\nimport { useEnvironment } from '../../contexts';\nimport { Box, Col, descriptors, Flex, Icon, localizationKeys, Text } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { mqu } from '../../styledSystem';\nimport { ActiveMembersList } from './ActiveMembersList';\nimport { MembersActionsRow } from './MembersActions';\nimport { MembersSearch } from './MembersSearch';\nimport { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';\nimport { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';\n\nexport const ACTIVE_MEMBERS_PAGE_SIZE = 10;\n\nexport const OrganizationMembers = withCardStateProvider(() => {\n  const { organizationSettings } = useEnvironment();\n  const card = useCardState();\n  const { hasRoleSetMigration } = useFetchRoles();\n  const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });\n  const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });\n  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;\n\n  const [query, setQuery] = useState('');\n  const [search, setSearch] = useState('');\n\n  const { membershipRequests, memberships, invitations, organization } = useOrganization({\n    membershipRequests: isDomainsEnabled || undefined,\n    invitations: canManageMemberships || undefined,\n    memberships: canReadMemberships\n      ? {\n          keepPreviousData: true,\n          query: query || undefined,\n        }\n      : undefined,\n  });\n\n  if (canManageMemberships === null) {\n    return null;\n  }\n\n  return (\n    <ProfileCard.Page>\n      <Col\n        elementDescriptor={descriptors.page}\n        gap={2}\n      >\n        <Col\n          elementDescriptor={descriptors.profilePage}\n          elementId={descriptors.profilePage.setId('organizationMembers')}\n          gap={4}\n          sx={theme => ({ paddingBottom: theme.space.$13 })}\n        >\n          <Action.Root animate={false}>\n            <Animated asChild>\n              <Header.Root\n                contentSx={{\n                  [mqu.md]: {\n                    flexDirection: 'row',\n                    width: '100%',\n                    justifyContent: 'space-between',\n                  },\n                }}\n              >\n                <Header.Title\n                  localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}\n                  textVariant='h2'\n                />\n              </Header.Root>\n            </Animated>\n            <Card.Alert>{card.error}</Card.Alert>\n            <Tabs>\n              <TabsList sx={t => ({ gap: t.space.$2 })}>\n                {canReadMemberships && (\n                  <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')}>\n                    {!!memberships?.count && (\n                      <NotificationCountBadge\n                        shouldAnimate={!query}\n                        notificationCount={memberships.count}\n                        colorScheme='outline'\n                      />\n                    )}\n                  </Tab>\n                )}\n                {canManageMemberships && (\n                  <Tab\n                    localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}\n                  >\n                    {invitations?.data && !invitations.isLoading && (\n                      <NotificationCountBadge\n                        notificationCount={invitations.count}\n                        colorScheme='outline'\n                      />\n                    )}\n                  </Tab>\n                )}\n                {canManageMemberships && isDomainsEnabled && (\n                  <Tab\n                    localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}\n                  >\n                    {membershipRequests?.data && !membershipRequests.isLoading && (\n                      <NotificationCountBadge\n                        notificationCount={membershipRequests.count}\n                        colorScheme='outline'\n                      />\n                    )}\n                  </Tab>\n                )}\n              </TabsList>\n              <TabPanels>\n                {canReadMemberships && (\n                  <TabPanel sx={{ width: '100%' }}>\n                    <Flex\n                      gap={4}\n                      direction='col'\n                      sx={{\n                        width: '100%',\n                      }}\n                    >\n                      <Flex\n                        gap={2}\n                        direction='col'\n                        sx={{\n                          width: '100%',\n                        }}\n                      >\n                        <MembersActionsRow\n                          actionSlot={\n                            <MembersSearch\n                              query={query}\n                              value={search}\n                              memberships={memberships}\n                              onSearchChange={query => setSearch(query)}\n                              onQueryTrigger={query => setQuery(query)}\n                            />\n                          }\n                        />\n                        {hasRoleSetMigration && (\n                          <Alert\n                            variant='warning'\n                            title={localizationKeys(\n                              'organizationProfile.membersPage.alerts.roleSetMigrationInProgress.title',\n                            )}\n                            subtitle={localizationKeys(\n                              'organizationProfile.membersPage.alerts.roleSetMigrationInProgress.subtitle',\n                            )}\n                          />\n                        )}\n                        <ActiveMembersList\n                          pageSize={ACTIVE_MEMBERS_PAGE_SIZE}\n                          memberships={memberships}\n                        />\n                      </Flex>\n                    </Flex>\n                  </TabPanel>\n                )}\n                {canManageMemberships && (\n                  <TabPanel sx={{ width: '100%' }}>\n                    <OrganizationMembersTabInvitations />\n                  </TabPanel>\n                )}\n                {canManageMemberships && isDomainsEnabled && (\n                  <TabPanel sx={{ width: '100%' }}>\n                    <OrganizationMembersTabRequests />\n                  </TabPanel>\n                )}\n              </TabPanels>\n            </Tabs>\n          </Action.Root>\n        </Col>\n\n        {canReadMemberships && !!memberships?.count && organization && organization.maxAllowedMemberships > 0 ? (\n          <Box\n            sx={theme => ({\n              position: 'absolute',\n              bottom: 0,\n              left: 0,\n              right: 0,\n              backgroundColor: theme.colors.$colorBackground,\n              borderTop: `1px solid ${theme.colors.$borderAlpha100}`,\n              paddingInline: theme.space.$4,\n              height: theme.space.$13,\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n            })}\n          >\n            <Text\n              sx={t => ({\n                display: 'inline-flex',\n                alignItems: 'center',\n                gap: t.space.$2,\n              })}\n            >\n              <Icon\n                icon={Users}\n                size='md'\n                colorScheme='neutral'\n              />\n              <Text\n                as='span'\n                colorScheme='inherit'\n                localizationKey={localizationKeys('organizationProfile.start.membershipSeatUsageLabel', {\n                  count: organization.membersCount + organization.pendingInvitationsCount,\n                  limit: organization.maxAllowedMemberships,\n                })}\n              />\n            </Text>\n          </Box>\n        ) : null}\n      </Col>\n    </ProfileCard.Page>\n  );\n});\n"],"mappings":"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"}

package/dist/components/OrganizationProfile/OrganizationPlansPage.js

@@ -6,13 +6,14 @@ import { PricingTableContext } from "../../contexts/components/PricingTable.js";
 import { Flex } from "../../customizables/index.js";
 import { Alert } from "../../elements/Alert.js";
 import { Header } from "../../elements/Header.js";
+import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { PricingTable } from "../PricingTable/PricingTable.js";
-import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/OrganizationProfile/OrganizationPlansPage.tsx
 const OrganizationPlansPageInternal = () => {
 	const { navigate } = useRouter();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Header.Root, {
+	return /* @__PURE__ */ jsxs(ProfileCard.Page, { children: [/* @__PURE__ */ jsx(Header.Root, {
 		sx: (t) => ({
 			borderBottomWidth: t.borderWidths.$normal,
 			borderBottomStyle: t.borderStyles.$solid,

package/dist/components/OrganizationProfile/OrganizationPlansPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationPlansPage.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationPlansPage.tsx"],"sourcesContent":["import { Alert } from '@/ui/elements/Alert';\nimport { Header } from '@/ui/elements/Header';\n\nimport { Protect } from '../../common';\nimport { PricingTableContext, SubscriberTypeContext } from '../../contexts';\nimport { Flex } from '../../customizables';\nimport { localizationKeys } from '../../localization';\nimport { useRouter } from '../../router';\nimport { PricingTable } from '../PricingTable/PricingTable';\n\nconst OrganizationPlansPageInternal = () => {\n  const { navigate } = useRouter();\n\n  return (\n    <>\n      <Header.Root\n        sx={t => ({\n          borderBottomWidth: t.borderWidths.$normal,\n          borderBottomStyle: t.borderStyles.$solid,\n          borderBottomColor: t.colors.$borderAlpha100,\n          marginBlockEnd: t.space.$4,\n          paddingBlockEnd: t.space.$4,\n        })}\n      >\n        <Header.BackLink\n          onClick={() => void navigate('../', { searchParams: new URLSearchParams('tab=subscriptions') })}\n        >\n          <Header.Title\n            localizationKey={localizationKeys('organizationProfile.plansPage.title')}\n            textVariant='h2'\n          />\n        </Header.BackLink>\n      </Header.Root>\n\n      <Flex\n        direction='col'\n        gap={4}\n      >\n        <Protect condition={has => !has({ permission: 'org:sys_billing:manage' })}>\n          <Alert\n            variant='info'\n            colorScheme='info'\n            title={localizationKeys('organizationProfile.plansPage.alerts.noPermissionsToManageBilling')}\n          />\n        </Protect>\n        <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>\n          <PricingTable />\n        </PricingTableContext.Provider>\n      </Flex>\n    </>\n  );\n};\n\nexport const OrganizationPlansPage = () => {\n  return (\n    <SubscriberTypeContext.Provider value='organization'>\n      <OrganizationPlansPageInternal />\n    </SubscriberTypeContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAUA,MAAM,sCAAsC;CAC1C,MAAM,EAAE,aAAa,WAAW;AAEhC,QACE,4CACE,oBAAC,OAAO;EACN,KAAI,OAAM;GACR,mBAAmB,EAAE,aAAa;GAClC,mBAAmB,EAAE,aAAa;GAClC,mBAAmB,EAAE,OAAO;GAC5B,gBAAgB,EAAE,MAAM;GACxB,iBAAiB,EAAE,MAAM;GAC1B;YAED,oBAAC,OAAO;GACN,eAAe,KAAK,SAAS,OAAO,EAAE,cAAc,IAAI,gBAAgB,oBAAoB,EAAE,CAAC;aAE/F,oBAAC,OAAO;IACN,iBAAiB,iBAAiB,sCAAsC;IACxE,aAAY;KACZ;IACc;GACN,EAEd,qBAAC;EACC,WAAU;EACV,KAAK;aAEL,oBAAC;GAAQ,YAAW,QAAO,CAAC,IAAI,EAAE,YAAY,0BAA0B,CAAC;aACvE,oBAAC;IACC,SAAQ;IACR,aAAY;IACZ,OAAO,iBAAiB,oEAAoE;KAC5F;IACM,EACV,oBAAC,oBAAoB;GAAS,OAAO;IAAE,eAAe;IAAgB,MAAM;IAAS;aACnF,oBAAC,iBAAe;IACa;GAC1B,IACN;;AAIP,MAAa,8BAA8B;AACzC,QACE,oBAAC,sBAAsB;EAAS,OAAM;YACpC,oBAAC,kCAAgC;GACF"}
+{"version":3,"file":"OrganizationPlansPage.js","names":[],"sources":["../../../src/components/OrganizationProfile/OrganizationPlansPage.tsx"],"sourcesContent":["import { Alert } from '@/ui/elements/Alert';\nimport { Header } from '@/ui/elements/Header';\nimport { ProfileCard } from '@/ui/elements/ProfileCard';\n\nimport { Protect } from '../../common';\nimport { PricingTableContext, SubscriberTypeContext } from '../../contexts';\nimport { Flex } from '../../customizables';\nimport { localizationKeys } from '../../localization';\nimport { useRouter } from '../../router';\nimport { PricingTable } from '../PricingTable/PricingTable';\n\nconst OrganizationPlansPageInternal = () => {\n  const { navigate } = useRouter();\n\n  return (\n    <ProfileCard.Page>\n      <Header.Root\n        sx={t => ({\n          borderBottomWidth: t.borderWidths.$normal,\n          borderBottomStyle: t.borderStyles.$solid,\n          borderBottomColor: t.colors.$borderAlpha100,\n          marginBlockEnd: t.space.$4,\n          paddingBlockEnd: t.space.$4,\n        })}\n      >\n        <Header.BackLink\n          onClick={() => void navigate('../', { searchParams: new URLSearchParams('tab=subscriptions') })}\n        >\n          <Header.Title\n            localizationKey={localizationKeys('organizationProfile.plansPage.title')}\n            textVariant='h2'\n          />\n        </Header.BackLink>\n      </Header.Root>\n\n      <Flex\n        direction='col'\n        gap={4}\n      >\n        <Protect condition={has => !has({ permission: 'org:sys_billing:manage' })}>\n          <Alert\n            variant='info'\n            colorScheme='info'\n            title={localizationKeys('organizationProfile.plansPage.alerts.noPermissionsToManageBilling')}\n          />\n        </Protect>\n        <PricingTableContext.Provider value={{ componentName: 'PricingTable', mode: 'modal' }}>\n          <PricingTable />\n        </PricingTableContext.Provider>\n      </Flex>\n    </ProfileCard.Page>\n  );\n};\n\nexport const OrganizationPlansPage = () => {\n  return (\n    <SubscriberTypeContext.Provider value='organization'>\n      <OrganizationPlansPageInternal />\n    </SubscriberTypeContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,sCAAsC;CAC1C,MAAM,EAAE,aAAa,WAAW;AAEhC,QACE,qBAAC,YAAY,mBACX,oBAAC,OAAO;EACN,KAAI,OAAM;GACR,mBAAmB,EAAE,aAAa;GAClC,mBAAmB,EAAE,aAAa;GAClC,mBAAmB,EAAE,OAAO;GAC5B,gBAAgB,EAAE,MAAM;GACxB,iBAAiB,EAAE,MAAM;GAC1B;YAED,oBAAC,OAAO;GACN,eAAe,KAAK,SAAS,OAAO,EAAE,cAAc,IAAI,gBAAgB,oBAAoB,EAAE,CAAC;aAE/F,oBAAC,OAAO;IACN,iBAAiB,iBAAiB,sCAAsC;IACxE,aAAY;KACZ;IACc;GACN,EAEd,qBAAC;EACC,WAAU;EACV,KAAK;aAEL,oBAAC;GAAQ,YAAW,QAAO,CAAC,IAAI,EAAE,YAAY,0BAA0B,CAAC;aACvE,oBAAC;IACC,SAAQ;IACR,aAAY;IACZ,OAAO,iBAAiB,oEAAoE;KAC5F;IACM,EACV,oBAAC,oBAAoB;GAAS,OAAO;IAAE,eAAe;IAAgB,MAAM;IAAS;aACnF,oBAAC,iBAAe;IACa;GAC1B,IACU;;AAIvB,MAAa,8BAA8B;AACzC,QACE,oBAAC,sBAAsB;EAAS,OAAM;YACpC,oBAAC,kCAAgC;GACF"}

package/dist/components/PaymentAttempts/PaymentAttemptPage.js

@@ -12,7 +12,8 @@ import { Header } from "../../elements/Header.js";
 import { truncateWithEndVisible } from "../../utils/truncateTextWithEndVisible.js";
 import { LineItems } from "../../elements/LineItems.js";
 import { formatDate } from "../../utils/formatDate.js";
-import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { ProfileCard } from "../../elements/ProfileCard/index.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { __internal_usePaymentAttemptQuery } from "@clerk/shared/react/index";
 
 //#region src/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -28,7 +29,7 @@ const PaymentAttemptPage = () => {
 		enabled: Boolean(params.paymentAttemptId)
 	});
 	const subscriptionItem = paymentAttempt?.subscriptionItem;
-	if (isLoading) return /* @__PURE__ */ jsx(Box, {
+	if (isLoading) return /* @__PURE__ */ jsx(ProfileCard.Page, { children: /* @__PURE__ */ jsx(Box, {
 		sx: {
 			display: "flex",
 			justifyContent: "center",
@@ -43,8 +44,8 @@ const PaymentAttemptPage = () => {
 			},
 			elementDescriptor: descriptors.spinner
 		})
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Header.Root, {
+	}) });
+	return /* @__PURE__ */ jsxs(ProfileCard.Page, { children: [/* @__PURE__ */ jsx(Header.Root, {
 		sx: (t$1) => ({
 			borderBlockEndWidth: t$1.borderWidths.$normal,
 			borderBlockEndStyle: t$1.borderStyles.$solid,

package/dist/components/PaymentAttempts/PaymentAttemptPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentAttemptPage.js","names":["t","Check","Copy"],"sources":["../../../src/components/PaymentAttempts/PaymentAttemptPage.tsx"],"sourcesContent":["import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';\nimport type { BillingSubscriptionItemResource } from '@clerk/shared/types';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Header } from '@/ui/elements/Header';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { formatDate } from '@/ui/utils/formatDate';\nimport { truncateWithEndVisible } from '@/ui/utils/truncateTextWithEndVisible';\n\nimport { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts/components';\nimport {\n  Badge,\n  Box,\n  Button,\n  descriptors,\n  Heading,\n  Icon,\n  localizationKeys,\n  Span,\n  Spinner,\n  Text,\n  useLocalizations,\n} from '../../customizables';\nimport { useClipboard } from '../../hooks';\nimport { Check, Copy } from '../../icons';\nimport { useRouter } from '../../router';\n\nexport const PaymentAttemptPage = () => {\n  const { params, navigate } = useRouter();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  const { t, translateError } = useLocalizations();\n  const requesterType = subscriberType === 'organization' ? 'organization' : 'user';\n\n  const {\n    data: paymentAttempt,\n    isLoading,\n    error,\n  } = __internal_usePaymentAttemptQuery({\n    paymentAttemptId: params.paymentAttemptId,\n    for: requesterType,\n    enabled: Boolean(params.paymentAttemptId),\n  });\n\n  const subscriptionItem = paymentAttempt?.subscriptionItem;\n\n  if (isLoading) {\n    return (\n      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n        <Spinner\n          colorScheme='primary'\n          sx={{ margin: 'auto', display: 'block' }}\n          elementDescriptor={descriptors.spinner}\n        />\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      <Header.Root\n        sx={t => ({\n          borderBlockEndWidth: t.borderWidths.$normal,\n          borderBlockEndStyle: t.borderStyles.$solid,\n          borderBlockEndColor: t.colors.$borderAlpha100,\n          marginBlockEnd: t.space.$4,\n          paddingBlockEnd: t.space.$4,\n        })}\n      >\n        <Header.BackLink onClick={() => void navigate('../../', { searchParams: new URLSearchParams('tab=payments') })}>\n          <Header.Title\n            localizationKey={localizationKeys(`${localizationRoot}.billingPage.start.headerTitle__payments`)}\n            textVariant='h2'\n          />\n        </Header.BackLink>\n      </Header.Root>\n      {!paymentAttempt ? (\n        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n          <Alert\n            variant='danger'\n            colorScheme='danger'\n          >\n            {error\n              ? translateError(error.errors[0])\n              : t(localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.notFound`))}\n          </Alert>\n        </Box>\n      ) : (\n        <Box\n          elementDescriptor={descriptors.paymentAttemptRoot}\n          as='article'\n          sx={t => ({\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha100,\n            borderRadius: t.radii.$lg,\n            overflow: 'clip',\n          })}\n        >\n          <Box\n            elementDescriptor={descriptors.paymentAttemptHeader}\n            as='header'\n            sx={t => ({\n              padding: t.space.$4,\n              background: t.colors.$neutralAlpha25,\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'flex-start',\n            })}\n          >\n            <Span elementDescriptor={descriptors.paymentAttemptHeaderTitleContainer}>\n              <Heading\n                elementDescriptor={descriptors.paymentAttemptHeaderTitle}\n                textVariant='h2'\n                localizationKey={formatDate(\n                  paymentAttempt.paidAt || paymentAttempt.failedAt || paymentAttempt.updatedAt,\n                  'long',\n                )}\n              />\n              <Span\n                sx={t => ({\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: t.space.$0x25,\n                  color: t.colors.$colorMutedForeground,\n                })}\n              >\n                <CopyButton\n                  copyLabel='Copy payment attempt ID'\n                  text={paymentAttempt.id}\n                />\n                <Text\n                  colorScheme='secondary'\n                  variant='subtitle'\n                >\n                  {truncateWithEndVisible(paymentAttempt.id)}\n                </Text>\n              </Span>\n            </Span>\n            <Badge\n              elementDescriptor={descriptors.paymentAttemptHeaderBadge}\n              colorScheme={\n                paymentAttempt.status === 'paid' ? 'success' : paymentAttempt.status === 'failed' ? 'danger' : 'primary'\n              }\n              sx={{ textTransform: 'capitalize' }}\n            >\n              {paymentAttempt.status}\n            </Badge>\n          </Box>\n          <PaymentAttemptBody subscriptionItem={subscriptionItem} />\n          <Box\n            elementDescriptor={descriptors.paymentAttemptFooter}\n            as='footer'\n            sx={t => ({\n              paddingInline: t.space.$4,\n              paddingBlock: t.space.$3,\n              background: t.colors.$neutralAlpha25,\n              borderBlockStartWidth: t.borderWidths.$normal,\n              borderBlockStartStyle: t.borderStyles.$solid,\n              borderBlockStartColor: t.colors.$borderAlpha100,\n              display: 'flex',\n              justifyContent: 'space-between',\n            })}\n          >\n            <Text\n              variant='h3'\n              localizationKey={localizationKeys('billing.totalDue')}\n              elementDescriptor={descriptors.paymentAttemptFooterLabel}\n            />\n            <Span\n              elementDescriptor={descriptors.paymentAttemptFooterValueContainer}\n              sx={t => ({\n                display: 'flex',\n                alignItems: 'center',\n                gap: t.space.$2x5,\n              })}\n            >\n              <Text\n                variant='caption'\n                colorScheme='secondary'\n                elementDescriptor={descriptors.paymentAttemptFooterCurrency}\n                sx={{ textTransform: 'uppercase' }}\n              >\n                {paymentAttempt.amount.currency}\n              </Text>\n              <Text\n                variant='h3'\n                elementDescriptor={descriptors.paymentAttemptFooterValue}\n              >\n                {paymentAttempt.amount.currencySymbol}\n                {paymentAttempt.amount.amountFormatted}\n              </Text>\n            </Span>\n          </Box>\n        </Box>\n      )}\n    </>\n  );\n};\n\nfunction PaymentAttemptBody({ subscriptionItem }: { subscriptionItem: BillingSubscriptionItemResource | undefined }) {\n  if (!subscriptionItem) {\n    return null;\n  }\n\n  const fee =\n    subscriptionItem.planPeriod === 'month'\n      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        subscriptionItem.plan.fee!\n      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        subscriptionItem.plan.annualMonthlyFee!;\n\n  return (\n    <Box\n      elementDescriptor={descriptors.paymentAttemptBody}\n      sx={t => ({\n        padding: t.space.$4,\n      })}\n    >\n      <LineItems.Root>\n        <LineItems.Group>\n          <LineItems.Title title={subscriptionItem.plan.name} />\n          <LineItems.Description\n            prefix={subscriptionItem.planPeriod === 'annual' ? 'x12' : undefined}\n            text={`${fee.currencySymbol}${fee.amountFormatted}`}\n          />\n        </LineItems.Group>\n        <LineItems.Group\n          borderTop\n          variant='tertiary'\n        >\n          <LineItems.Title title={localizationKeys('billing.subtotal')} />\n          <LineItems.Description\n            text={`${subscriptionItem.amount?.currencySymbol}${subscriptionItem.amount?.amountFormatted}`}\n          />\n        </LineItems.Group>\n        {subscriptionItem.credits &&\n          subscriptionItem.credits.proration &&\n          subscriptionItem.credits.proration.amount.amount > 0 && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.prorationCredit')} />\n              <LineItems.Description\n                text={`- ${subscriptionItem.credits.proration.amount.currencySymbol}${subscriptionItem.credits.proration.amount.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n        {subscriptionItem.credits &&\n          subscriptionItem.credits.payer &&\n          subscriptionItem.credits.payer.appliedAmount.amount > 0 && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.accountCredit')} />\n              <LineItems.Description\n                text={`- ${subscriptionItem.credits.payer.appliedAmount.currencySymbol}${subscriptionItem.credits.payer.appliedAmount.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n      </LineItems.Root>\n    </Box>\n  );\n}\n\nfunction CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: string }) {\n  const { onCopy, hasCopied } = useClipboard(text);\n\n  return (\n    <Button\n      elementDescriptor={descriptors.paymentAttemptCopyButton}\n      variant='unstyled'\n      onClick={() => onCopy()}\n      sx={t => ({\n        color: 'inherit',\n        width: t.sizes.$4,\n        height: t.sizes.$4,\n        padding: 0,\n        borderRadius: t.radii.$sm,\n        '&:focus-visible': {\n          outline: '2px solid',\n          outlineColor: t.colors.$colorRing,\n        },\n      })}\n      focusRing={false}\n      aria-label={hasCopied ? 'Copied' : copyLabel}\n    >\n      <Icon\n        size='sm'\n        icon={hasCopied ? Check : Copy}\n        aria-hidden\n      />\n    </Button>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"PaymentAttemptPage.js","names":["t","Check","Copy"],"sources":["../../../src/components/PaymentAttempts/PaymentAttemptPage.tsx"],"sourcesContent":["import { __internal_usePaymentAttemptQuery } from '@clerk/shared/react/index';\nimport type { BillingSubscriptionItemResource } from '@clerk/shared/types';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Header } from '@/ui/elements/Header';\nimport { LineItems } from '@/ui/elements/LineItems';\nimport { ProfileCard } from '@/ui/elements/ProfileCard';\nimport { formatDate } from '@/ui/utils/formatDate';\nimport { truncateWithEndVisible } from '@/ui/utils/truncateTextWithEndVisible';\n\nimport { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts/components';\nimport {\n  Badge,\n  Box,\n  Button,\n  descriptors,\n  Heading,\n  Icon,\n  localizationKeys,\n  Span,\n  Spinner,\n  Text,\n  useLocalizations,\n} from '../../customizables';\nimport { useClipboard } from '../../hooks';\nimport { Check, Copy } from '../../icons';\nimport { useRouter } from '../../router';\n\nexport const PaymentAttemptPage = () => {\n  const { params, navigate } = useRouter();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  const { t, translateError } = useLocalizations();\n  const requesterType = subscriberType === 'organization' ? 'organization' : 'user';\n\n  const {\n    data: paymentAttempt,\n    isLoading,\n    error,\n  } = __internal_usePaymentAttemptQuery({\n    paymentAttemptId: params.paymentAttemptId,\n    for: requesterType,\n    enabled: Boolean(params.paymentAttemptId),\n  });\n\n  const subscriptionItem = paymentAttempt?.subscriptionItem;\n\n  if (isLoading) {\n    return (\n      <ProfileCard.Page>\n        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n          <Spinner\n            colorScheme='primary'\n            sx={{ margin: 'auto', display: 'block' }}\n            elementDescriptor={descriptors.spinner}\n          />\n        </Box>\n      </ProfileCard.Page>\n    );\n  }\n\n  return (\n    <ProfileCard.Page>\n      <Header.Root\n        sx={t => ({\n          borderBlockEndWidth: t.borderWidths.$normal,\n          borderBlockEndStyle: t.borderStyles.$solid,\n          borderBlockEndColor: t.colors.$borderAlpha100,\n          marginBlockEnd: t.space.$4,\n          paddingBlockEnd: t.space.$4,\n        })}\n      >\n        <Header.BackLink onClick={() => void navigate('../../', { searchParams: new URLSearchParams('tab=payments') })}>\n          <Header.Title\n            localizationKey={localizationKeys(`${localizationRoot}.billingPage.start.headerTitle__payments`)}\n            textVariant='h2'\n          />\n        </Header.BackLink>\n      </Header.Root>\n      {!paymentAttempt ? (\n        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n          <Alert\n            variant='danger'\n            colorScheme='danger'\n          >\n            {error\n              ? translateError(error.errors[0])\n              : t(localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.notFound`))}\n          </Alert>\n        </Box>\n      ) : (\n        <Box\n          elementDescriptor={descriptors.paymentAttemptRoot}\n          as='article'\n          sx={t => ({\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha100,\n            borderRadius: t.radii.$lg,\n            overflow: 'clip',\n          })}\n        >\n          <Box\n            elementDescriptor={descriptors.paymentAttemptHeader}\n            as='header'\n            sx={t => ({\n              padding: t.space.$4,\n              background: t.colors.$neutralAlpha25,\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'flex-start',\n            })}\n          >\n            <Span elementDescriptor={descriptors.paymentAttemptHeaderTitleContainer}>\n              <Heading\n                elementDescriptor={descriptors.paymentAttemptHeaderTitle}\n                textVariant='h2'\n                localizationKey={formatDate(\n                  paymentAttempt.paidAt || paymentAttempt.failedAt || paymentAttempt.updatedAt,\n                  'long',\n                )}\n              />\n              <Span\n                sx={t => ({\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: t.space.$0x25,\n                  color: t.colors.$colorMutedForeground,\n                })}\n              >\n                <CopyButton\n                  copyLabel='Copy payment attempt ID'\n                  text={paymentAttempt.id}\n                />\n                <Text\n                  colorScheme='secondary'\n                  variant='subtitle'\n                >\n                  {truncateWithEndVisible(paymentAttempt.id)}\n                </Text>\n              </Span>\n            </Span>\n            <Badge\n              elementDescriptor={descriptors.paymentAttemptHeaderBadge}\n              colorScheme={\n                paymentAttempt.status === 'paid' ? 'success' : paymentAttempt.status === 'failed' ? 'danger' : 'primary'\n              }\n              sx={{ textTransform: 'capitalize' }}\n            >\n              {paymentAttempt.status}\n            </Badge>\n          </Box>\n          <PaymentAttemptBody subscriptionItem={subscriptionItem} />\n          <Box\n            elementDescriptor={descriptors.paymentAttemptFooter}\n            as='footer'\n            sx={t => ({\n              paddingInline: t.space.$4,\n              paddingBlock: t.space.$3,\n              background: t.colors.$neutralAlpha25,\n              borderBlockStartWidth: t.borderWidths.$normal,\n              borderBlockStartStyle: t.borderStyles.$solid,\n              borderBlockStartColor: t.colors.$borderAlpha100,\n              display: 'flex',\n              justifyContent: 'space-between',\n            })}\n          >\n            <Text\n              variant='h3'\n              localizationKey={localizationKeys('billing.totalDue')}\n              elementDescriptor={descriptors.paymentAttemptFooterLabel}\n            />\n            <Span\n              elementDescriptor={descriptors.paymentAttemptFooterValueContainer}\n              sx={t => ({\n                display: 'flex',\n                alignItems: 'center',\n                gap: t.space.$2x5,\n              })}\n            >\n              <Text\n                variant='caption'\n                colorScheme='secondary'\n                elementDescriptor={descriptors.paymentAttemptFooterCurrency}\n                sx={{ textTransform: 'uppercase' }}\n              >\n                {paymentAttempt.amount.currency}\n              </Text>\n              <Text\n                variant='h3'\n                elementDescriptor={descriptors.paymentAttemptFooterValue}\n              >\n                {paymentAttempt.amount.currencySymbol}\n                {paymentAttempt.amount.amountFormatted}\n              </Text>\n            </Span>\n          </Box>\n        </Box>\n      )}\n    </ProfileCard.Page>\n  );\n};\n\nfunction PaymentAttemptBody({ subscriptionItem }: { subscriptionItem: BillingSubscriptionItemResource | undefined }) {\n  if (!subscriptionItem) {\n    return null;\n  }\n\n  const fee =\n    subscriptionItem.planPeriod === 'month'\n      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        subscriptionItem.plan.fee!\n      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        subscriptionItem.plan.annualMonthlyFee!;\n\n  return (\n    <Box\n      elementDescriptor={descriptors.paymentAttemptBody}\n      sx={t => ({\n        padding: t.space.$4,\n      })}\n    >\n      <LineItems.Root>\n        <LineItems.Group>\n          <LineItems.Title title={subscriptionItem.plan.name} />\n          <LineItems.Description\n            prefix={subscriptionItem.planPeriod === 'annual' ? 'x12' : undefined}\n            text={`${fee.currencySymbol}${fee.amountFormatted}`}\n          />\n        </LineItems.Group>\n        <LineItems.Group\n          borderTop\n          variant='tertiary'\n        >\n          <LineItems.Title title={localizationKeys('billing.subtotal')} />\n          <LineItems.Description\n            text={`${subscriptionItem.amount?.currencySymbol}${subscriptionItem.amount?.amountFormatted}`}\n          />\n        </LineItems.Group>\n        {subscriptionItem.credits &&\n          subscriptionItem.credits.proration &&\n          subscriptionItem.credits.proration.amount.amount > 0 && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.prorationCredit')} />\n              <LineItems.Description\n                text={`- ${subscriptionItem.credits.proration.amount.currencySymbol}${subscriptionItem.credits.proration.amount.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n        {subscriptionItem.credits &&\n          subscriptionItem.credits.payer &&\n          subscriptionItem.credits.payer.appliedAmount.amount > 0 && (\n            <LineItems.Group variant='tertiary'>\n              <LineItems.Title title={localizationKeys('billing.accountCredit')} />\n              <LineItems.Description\n                text={`- ${subscriptionItem.credits.payer.appliedAmount.currencySymbol}${subscriptionItem.credits.payer.appliedAmount.amountFormatted}`}\n              />\n            </LineItems.Group>\n          )}\n      </LineItems.Root>\n    </Box>\n  );\n}\n\nfunction CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: string }) {\n  const { onCopy, hasCopied } = useClipboard(text);\n\n  return (\n    <Button\n      elementDescriptor={descriptors.paymentAttemptCopyButton}\n      variant='unstyled'\n      onClick={() => onCopy()}\n      sx={t => ({\n        color: 'inherit',\n        width: t.sizes.$4,\n        height: t.sizes.$4,\n        padding: 0,\n        borderRadius: t.radii.$sm,\n        '&:focus-visible': {\n          outline: '2px solid',\n          outlineColor: t.colors.$colorRing,\n        },\n      })}\n      focusRing={false}\n      aria-label={hasCopied ? 'Copied' : copyLabel}\n    >\n      <Icon\n        size='sm'\n        icon={hasCopied ? Check : Copy}\n        aria-hidden\n      />\n    </Button>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Statements/StatementPage.js

@@ -10,8 +10,9 @@ import { Box, Icon, SimpleButton, Span, Spinner } from "../../customizables/inde
 import { Alert } from "../../elements/Alert.js";
 import { Header } from "../../elements/Header.js";
 import { formatDate } from "../../utils/formatDate.js";
+import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { Statement } from "./Statement.js";
-import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { __internal_useStatementQuery } from "@clerk/shared/react/index";
 
 //#region src/components/Statements/StatementPage.tsx
@@ -26,7 +27,7 @@ const StatementPage = () => {
 		for: requesterType,
 		enabled: Boolean(params.statementId)
 	});
-	if (isLoading) return /* @__PURE__ */ jsx(Box, {
+	if (isLoading) return /* @__PURE__ */ jsx(ProfileCard.Page, { children: /* @__PURE__ */ jsx(Box, {
 		sx: {
 			display: "flex",
 			justifyContent: "center",
@@ -41,8 +42,8 @@ const StatementPage = () => {
 			},
 			elementDescriptor: descriptors.spinner
 		})
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Header.Root, {
+	}) });
+	return /* @__PURE__ */ jsxs(ProfileCard.Page, { children: [/* @__PURE__ */ jsx(Header.Root, {
 		sx: (t$1) => ({
 			borderBlockEndWidth: t$1.borderWidths.$normal,
 			borderBlockEndStyle: t$1.borderStyles.$solid,

package/dist/components/Statements/StatementPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatementPage.js","names":["t","RotateLeftRight","Plus","ArrowRightIcon"],"sources":["../../../src/components/Statements/StatementPage.tsx"],"sourcesContent":["import { __internal_useStatementQuery } from '@clerk/shared/react/index';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Header } from '@/ui/elements/Header';\nimport { formatDate } from '@/ui/utils/formatDate';\n\nimport { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts/components';\nimport {\n  Box,\n  descriptors,\n  Icon,\n  localizationKeys,\n  SimpleButton,\n  Span,\n  Spinner,\n  useLocalizations,\n} from '../../customizables';\nimport { ArrowRightIcon, Plus, RotateLeftRight } from '../../icons';\nimport { useRouter } from '../../router';\nimport { Statement } from './Statement';\n\nexport const StatementPage = () => {\n  const { params, navigate } = useRouter();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  const { t, translateError } = useLocalizations();\n  const requesterType = subscriberType === 'organization' ? 'organization' : 'user';\n\n  const {\n    data: statement,\n    isLoading,\n    error,\n  } = __internal_useStatementQuery({\n    statementId: params.statementId,\n    for: requesterType,\n    enabled: Boolean(params.statementId),\n  });\n\n  if (isLoading) {\n    return (\n      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n        <Spinner\n          colorScheme='primary'\n          sx={{ margin: 'auto', display: 'block' }}\n          elementDescriptor={descriptors.spinner}\n        />\n      </Box>\n    );\n  }\n\n  return (\n    <>\n      <Header.Root\n        sx={t => ({\n          borderBlockEndWidth: t.borderWidths.$normal,\n          borderBlockEndStyle: t.borderStyles.$solid,\n          borderBlockEndColor: t.colors.$borderAlpha100,\n          marginBlockEnd: t.space.$4,\n          paddingBlockEnd: t.space.$4,\n        })}\n      >\n        <Header.BackLink\n          onClick={() => void navigate('../../', { searchParams: new URLSearchParams('tab=statements') })}\n        >\n          <Header.Title\n            localizationKey={localizationKeys(`${localizationRoot}.billingPage.statementsSection.title`)}\n            textVariant='h2'\n          />\n        </Header.BackLink>\n      </Header.Root>\n      {!statement ? (\n        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n          <Alert\n            variant='danger'\n            colorScheme='danger'\n          >\n            {error\n              ? translateError(error.errors[0])\n              : t(localizationKeys(`${localizationRoot}.billingPage.statementsSection.notFound`))}\n          </Alert>\n        </Box>\n      ) : (\n        <Statement.Root>\n          <Statement.Header\n            title={formatDate(statement.timestamp, 'monthyear')}\n            id={statement.id}\n            status={statement.status}\n          />\n          <Statement.Body>\n            {statement.groups.map(group => (\n              <Statement.Section key={group.timestamp.toISOString()}>\n                <Statement.SectionHeader text={formatDate(group.timestamp, 'long')} />\n                <Statement.SectionContent>\n                  {group.items.map(item => (\n                    <Statement.SectionContentItem key={item.id}>\n                      <Statement.SectionContentDetailsHeader\n                        title={item.subscriptionItem.plan.name}\n                        description={`${item.subscriptionItem.amount?.currencySymbol}${item.subscriptionItem.amount?.amountFormatted} / ${item.subscriptionItem.planPeriod === 'month' ? t(localizationKeys('billing.month')) : t(localizationKeys('billing.year'))}`}\n                        secondaryTitle={`${item.amount.currencySymbol}${item.amount.amountFormatted}`}\n                      />\n                      <Statement.SectionContentDetailsList>\n                        <Statement.SectionContentDetailsListItem\n                          label={\n                            item.chargeType === 'recurring'\n                              ? localizationKeys(\n                                  `${localizationRoot}.billingPage.statementsSection.itemCaption__paidForPlan`,\n                                  {\n                                    plan: item.subscriptionItem.plan.name,\n                                    period: item.subscriptionItem.planPeriod,\n                                  },\n                                )\n                              : localizationKeys(\n                                  `${localizationRoot}.billingPage.statementsSection.itemCaption__subscribedAndPaidForPlan`,\n                                  {\n                                    plan: item.subscriptionItem.plan.name,\n                                    period: item.subscriptionItem.planPeriod,\n                                  },\n                                )\n                          }\n                          labelIcon={item.chargeType === 'recurring' ? RotateLeftRight : Plus}\n                          value={\n                            <SimpleButton\n                              onClick={() => void navigate(`../../payment-attempt/${item.id}`)}\n                              variant='link'\n                              colorScheme='primary'\n                              textVariant='buttonSmall'\n                              sx={t => ({\n                                gap: t.space.$1,\n                              })}\n                            >\n                              <Span localizationKey={localizationKeys('billing.viewPayment')} />\n                              <Icon\n                                icon={ArrowRightIcon}\n                                size='sm'\n                                aria-hidden\n                              />\n                            </SimpleButton>\n                          }\n                        />\n                        {item.subscriptionItem.credits &&\n                        item.subscriptionItem.credits.proration &&\n                        item.subscriptionItem.credits.proration.amount.amount > 0 ? (\n                          <Statement.SectionContentDetailsListItem\n                            label={localizationKeys(\n                              `${localizationRoot}.billingPage.statementsSection.itemCaption__proratedCredit`,\n                            )}\n                            value={`(${item.subscriptionItem.credits.proration.amount.currencySymbol}${item.subscriptionItem.credits.proration.amount.amountFormatted})`}\n                          />\n                        ) : null}\n                        {item.subscriptionItem.credits &&\n                        item.subscriptionItem.credits.payer &&\n                        item.subscriptionItem.credits.payer.appliedAmount.amount > 0 ? (\n                          <Statement.SectionContentDetailsListItem\n                            label={localizationKeys(\n                              `${localizationRoot}.billingPage.statementsSection.itemCaption__payerCredit`,\n                            )}\n                            value={`(${item.subscriptionItem.credits.payer.appliedAmount.currencySymbol}${item.subscriptionItem.credits.payer.appliedAmount.amountFormatted})`}\n                          />\n                        ) : null}\n                      </Statement.SectionContentDetailsList>\n                    </Statement.SectionContentItem>\n                  ))}\n                </Statement.SectionContent>\n              </Statement.Section>\n            ))}\n          </Statement.Body>\n          <Statement.Footer\n            label={localizationKeys(`${localizationRoot}.billingPage.statementsSection.totalPaid`)}\n            value={`${statement.totals.grandTotal.currencySymbol}${statement.totals.grandTotal.amountFormatted}`}\n          />\n        </Statement.Root>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"StatementPage.js","names":["t","RotateLeftRight","Plus","ArrowRightIcon"],"sources":["../../../src/components/Statements/StatementPage.tsx"],"sourcesContent":["import { __internal_useStatementQuery } from '@clerk/shared/react/index';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Header } from '@/ui/elements/Header';\nimport { ProfileCard } from '@/ui/elements/ProfileCard';\nimport { formatDate } from '@/ui/utils/formatDate';\n\nimport { useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts/components';\nimport {\n  Box,\n  descriptors,\n  Icon,\n  localizationKeys,\n  SimpleButton,\n  Span,\n  Spinner,\n  useLocalizations,\n} from '../../customizables';\nimport { ArrowRightIcon, Plus, RotateLeftRight } from '../../icons';\nimport { useRouter } from '../../router';\nimport { Statement } from './Statement';\n\nexport const StatementPage = () => {\n  const { params, navigate } = useRouter();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  const { t, translateError } = useLocalizations();\n  const requesterType = subscriberType === 'organization' ? 'organization' : 'user';\n\n  const {\n    data: statement,\n    isLoading,\n    error,\n  } = __internal_useStatementQuery({\n    statementId: params.statementId,\n    for: requesterType,\n    enabled: Boolean(params.statementId),\n  });\n\n  if (isLoading) {\n    return (\n      <ProfileCard.Page>\n        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n          <Spinner\n            colorScheme='primary'\n            sx={{ margin: 'auto', display: 'block' }}\n            elementDescriptor={descriptors.spinner}\n          />\n        </Box>\n      </ProfileCard.Page>\n    );\n  }\n\n  return (\n    <ProfileCard.Page>\n      <Header.Root\n        sx={t => ({\n          borderBlockEndWidth: t.borderWidths.$normal,\n          borderBlockEndStyle: t.borderStyles.$solid,\n          borderBlockEndColor: t.colors.$borderAlpha100,\n          marginBlockEnd: t.space.$4,\n          paddingBlockEnd: t.space.$4,\n        })}\n      >\n        <Header.BackLink\n          onClick={() => void navigate('../../', { searchParams: new URLSearchParams('tab=statements') })}\n        >\n          <Header.Title\n            localizationKey={localizationKeys(`${localizationRoot}.billingPage.statementsSection.title`)}\n            textVariant='h2'\n          />\n        </Header.BackLink>\n      </Header.Root>\n      {!statement ? (\n        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>\n          <Alert\n            variant='danger'\n            colorScheme='danger'\n          >\n            {error\n              ? translateError(error.errors[0])\n              : t(localizationKeys(`${localizationRoot}.billingPage.statementsSection.notFound`))}\n          </Alert>\n        </Box>\n      ) : (\n        <Statement.Root>\n          <Statement.Header\n            title={formatDate(statement.timestamp, 'monthyear')}\n            id={statement.id}\n            status={statement.status}\n          />\n          <Statement.Body>\n            {statement.groups.map(group => (\n              <Statement.Section key={group.timestamp.toISOString()}>\n                <Statement.SectionHeader text={formatDate(group.timestamp, 'long')} />\n                <Statement.SectionContent>\n                  {group.items.map(item => (\n                    <Statement.SectionContentItem key={item.id}>\n                      <Statement.SectionContentDetailsHeader\n                        title={item.subscriptionItem.plan.name}\n                        description={`${item.subscriptionItem.amount?.currencySymbol}${item.subscriptionItem.amount?.amountFormatted} / ${item.subscriptionItem.planPeriod === 'month' ? t(localizationKeys('billing.month')) : t(localizationKeys('billing.year'))}`}\n                        secondaryTitle={`${item.amount.currencySymbol}${item.amount.amountFormatted}`}\n                      />\n                      <Statement.SectionContentDetailsList>\n                        <Statement.SectionContentDetailsListItem\n                          label={\n                            item.chargeType === 'recurring'\n                              ? localizationKeys(\n                                  `${localizationRoot}.billingPage.statementsSection.itemCaption__paidForPlan`,\n                                  {\n                                    plan: item.subscriptionItem.plan.name,\n                                    period: item.subscriptionItem.planPeriod,\n                                  },\n                                )\n                              : localizationKeys(\n                                  `${localizationRoot}.billingPage.statementsSection.itemCaption__subscribedAndPaidForPlan`,\n                                  {\n                                    plan: item.subscriptionItem.plan.name,\n                                    period: item.subscriptionItem.planPeriod,\n                                  },\n                                )\n                          }\n                          labelIcon={item.chargeType === 'recurring' ? RotateLeftRight : Plus}\n                          value={\n                            <SimpleButton\n                              onClick={() => void navigate(`../../payment-attempt/${item.id}`)}\n                              variant='link'\n                              colorScheme='primary'\n                              textVariant='buttonSmall'\n                              sx={t => ({\n                                gap: t.space.$1,\n                              })}\n                            >\n                              <Span localizationKey={localizationKeys('billing.viewPayment')} />\n                              <Icon\n                                icon={ArrowRightIcon}\n                                size='sm'\n                                aria-hidden\n                              />\n                            </SimpleButton>\n                          }\n                        />\n                        {item.subscriptionItem.credits &&\n                        item.subscriptionItem.credits.proration &&\n                        item.subscriptionItem.credits.proration.amount.amount > 0 ? (\n                          <Statement.SectionContentDetailsListItem\n                            label={localizationKeys(\n                              `${localizationRoot}.billingPage.statementsSection.itemCaption__proratedCredit`,\n                            )}\n                            value={`(${item.subscriptionItem.credits.proration.amount.currencySymbol}${item.subscriptionItem.credits.proration.amount.amountFormatted})`}\n                          />\n                        ) : null}\n                        {item.subscriptionItem.credits &&\n                        item.subscriptionItem.credits.payer &&\n                        item.subscriptionItem.credits.payer.appliedAmount.amount > 0 ? (\n                          <Statement.SectionContentDetailsListItem\n                            label={localizationKeys(\n                              `${localizationRoot}.billingPage.statementsSection.itemCaption__payerCredit`,\n                            )}\n                            value={`(${item.subscriptionItem.credits.payer.appliedAmount.currencySymbol}${item.subscriptionItem.credits.payer.appliedAmount.amountFormatted})`}\n                          />\n                        ) : null}\n                      </Statement.SectionContentDetailsList>\n                    </Statement.SectionContentItem>\n                  ))}\n                </Statement.SectionContent>\n              </Statement.Section>\n            ))}\n          </Statement.Body>\n          <Statement.Footer\n            label={localizationKeys(`${localizationRoot}.billingPage.statementsSection.totalPaid`)}\n            value={`${statement.totals.grandTotal.currencySymbol}${statement.totals.grandTotal.amountFormatted}`}\n          />\n        </Statement.Root>\n      )}\n    </ProfileCard.Page>\n  );\n};\n"],"mappings":"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"}

package/dist/components/UserProfile/APIKeysPage.js

@@ -5,6 +5,7 @@ import { descriptors } from "../../customizables/elementDescriptors.js";
 import { Col } from "../../customizables/index.js";
 import { Header } from "../../elements/Header.js";
 import { APIKeysPage as APIKeysPage$1 } from "../APIKeys/APIKeys.js";
+import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { useUnsafeNavbarContext } from "../../elements/Navbar.js";
 import { useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
@@ -15,7 +16,7 @@ const APIKeysPage = () => {
 	const { contentRef } = useUnsafeNavbarContext();
 	const { apiKeysProps } = useUserProfileContext();
 	if (!user) return null;
-	return /* @__PURE__ */ jsxs(Col, {
+	return /* @__PURE__ */ jsx(ProfileCard.Page, { children: /* @__PURE__ */ jsxs(Col, {
 		gap: 4,
 		elementDescriptor: descriptors.page,
 		children: [/* @__PURE__ */ jsx(Header.Root, { children: /* @__PURE__ */ jsx(Header.Title, {
@@ -31,7 +32,7 @@ const APIKeysPage = () => {
 				revokeModalRoot: contentRef
 			})
 		})]
-	});
+	}) });
 };
 
 //#endregion

package/dist/components/UserProfile/APIKeysPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"APIKeysPage.js","names":["APIKeysPageInternal"],"sources":["../../../src/components/UserProfile/APIKeysPage.tsx"],"sourcesContent":["import { useUser } from '@clerk/shared/react';\n\nimport { APIKeysContext, useUserProfileContext } from '@/ui/contexts';\nimport { Col, descriptors, localizationKeys } from '@/ui/customizables';\nimport { Header } from '@/ui/elements/Header';\nimport { useUnsafeNavbarContext } from '@/ui/elements/Navbar';\n\nimport { APIKeysPage as APIKeysPageInternal } from '../APIKeys/APIKeys';\n\nexport const APIKeysPage = () => {\n  const { user } = useUser();\n  const { contentRef } = useUnsafeNavbarContext();\n  const { apiKeysProps } = useUserProfileContext();\n\n  if (!user) {\n    // We should never reach this point, but we'll return null to make TS happy\n    return null;\n  }\n\n  return (\n    <Col\n      gap={4}\n      elementDescriptor={descriptors.page}\n    >\n      <Header.Root>\n        <Header.Title\n          localizationKey={localizationKeys('userProfile.apiKeysPage.title')}\n          textVariant='h2'\n        />\n      </Header.Root>\n      <APIKeysContext.Provider value={{ componentName: 'APIKeys', ...apiKeysProps }}>\n        <APIKeysPageInternal\n          subject={user.id}\n          revokeModalRoot={contentRef}\n        />\n      </APIKeysContext.Provider>\n    </Col>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AASA,MAAa,oBAAoB;CAC/B,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,EAAE,eAAe,wBAAwB;CAC/C,MAAM,EAAE,iBAAiB,uBAAuB;AAEhD,KAAI,CAAC,KAEH,QAAO;AAGT,QACE,qBAAC;EACC,KAAK;EACL,mBAAmB,YAAY;aAE/B,oBAAC,OAAO,kBACN,oBAAC,OAAO;GACN,iBAAiB,iBAAiB,gCAAgC;GAClE,aAAY;IACZ,GACU,EACd,oBAAC,eAAe;GAAS,OAAO;IAAE,eAAe;IAAW,GAAG;IAAc;aAC3E,oBAACA;IACC,SAAS,KAAK;IACd,iBAAiB;KACjB;IACsB;GACtB"}
+{"version":3,"file":"APIKeysPage.js","names":["APIKeysPageInternal"],"sources":["../../../src/components/UserProfile/APIKeysPage.tsx"],"sourcesContent":["import { useUser } from '@clerk/shared/react';\n\nimport { APIKeysContext, useUserProfileContext } from '@/ui/contexts';\nimport { Col, descriptors, localizationKeys } from '@/ui/customizables';\nimport { Header } from '@/ui/elements/Header';\nimport { useUnsafeNavbarContext } from '@/ui/elements/Navbar';\nimport { ProfileCard } from '@/ui/elements/ProfileCard';\n\nimport { APIKeysPage as APIKeysPageInternal } from '../APIKeys/APIKeys';\n\nexport const APIKeysPage = () => {\n  const { user } = useUser();\n  const { contentRef } = useUnsafeNavbarContext();\n  const { apiKeysProps } = useUserProfileContext();\n\n  if (!user) {\n    // We should never reach this point, but we'll return null to make TS happy\n    return null;\n  }\n\n  return (\n    <ProfileCard.Page>\n      <Col\n        gap={4}\n        elementDescriptor={descriptors.page}\n      >\n        <Header.Root>\n          <Header.Title\n            localizationKey={localizationKeys('userProfile.apiKeysPage.title')}\n            textVariant='h2'\n          />\n        </Header.Root>\n        <APIKeysContext.Provider value={{ componentName: 'APIKeys', ...apiKeysProps }}>\n          <APIKeysPageInternal\n            subject={user.id}\n            revokeModalRoot={contentRef}\n          />\n        </APIKeysContext.Provider>\n      </Col>\n    </ProfileCard.Page>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,oBAAoB;CAC/B,MAAM,EAAE,SAAS,SAAS;CAC1B,MAAM,EAAE,eAAe,wBAAwB;CAC/C,MAAM,EAAE,iBAAiB,uBAAuB;AAEhD,KAAI,CAAC,KAEH,QAAO;AAGT,QACE,oBAAC,YAAY,kBACX,qBAAC;EACC,KAAK;EACL,mBAAmB,YAAY;aAE/B,oBAAC,OAAO,kBACN,oBAAC,OAAO;GACN,iBAAiB,iBAAiB,gCAAgC;GAClE,aAAY;IACZ,GACU,EACd,oBAAC,eAAe;GAAS,OAAO;IAAE,eAAe;IAAW,GAAG;IAAc;aAC3E,oBAACA;IACC,SAAS,KAAK;IACd,iBAAiB;KACjB;IACsB;GACtB,GACW"}