@clerk/ui 1.9.1 → 1.9.2-canary.v20260511154043

package/dist/ClerkUI.js

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

package/dist/components/ConfigureSSO/ConfigureSSO.js

@@ -1,26 +1,23 @@
 import { withCoreUserGuard } from "../../contexts/CoreUserContext.js";
-import { useEnvironment } from "../../contexts/EnvironmentContext.js";
-import { localizationKeys } from "../../localization/localizationKeys.js";
 import { Route } from "../../router/Route.js";
 import { Switch } from "../../router/Switch.js";
-import box_default from "../../icons/box.js";
 import { descriptors } from "../../customizables/elementDescriptors.js";
-import { useAppearance } from "../../customizables/AppearanceContext.js";
 import { withCardStateProvider } from "../../elements/contexts/index.js";
 import { Flow } from "../../customizables/Flow.js";
-import { Box, Col, Flex, Icon, Text } from "../../customizables/index.js";
-import { ApplicationLogo } from "../../elements/ApplicationLogo.js";
-import { NavBar, NavbarContextProvider } from "../../elements/Navbar.js";
+import { Col } from "../../customizables/index.js";
 import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { ConfigureSSOFlowProvider } from "./ConfigureSSOContext.js";
-import { ConfigureSSOWizard } from "./wizard/ConfigureSSOWizard.js";
-import { ConfigureCreateApp } from "./steps/ConfigureCreateAppStep.js";
+import { Wizard } from "./elements/Wizard/Wizard.js";
+import { ConfigureSSOHeader } from "./ConfigureSSOHeader.js";
+import { ConfigureSSONavbar } from "./ConfigureSSONavbar.js";
+import { ConfigureSSOSkeleton } from "./ConfigureSSOSkeleton.js";
+import { ConfigureStep } from "./steps/ConfigureStep.js";
 import { ConfirmationStep } from "./steps/ConfirmationStep.js";
-import { ProvideEmail } from "./steps/ProvideEmailStep.js";
+import { SelectProviderStep } from "./steps/SelectProviderStep.js";
 import { TestConfigurationStep } from "./steps/TestConfigurationStep.js";
 import { VerifyDomainStep } from "./steps/VerifyDomainStep.js";
 import React from "react";
-import { __internal_useUserEnterpriseConnections, useOrganization, useUser } from "@clerk/shared/react";
+import { __internal_useUserEnterpriseConnections } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 
 //#region src/components/ConfigureSSO/ConfigureSSO.tsx
@@ -32,12 +29,6 @@ const ConfigureSSOInternal = () => {
 };
 const AuthenticatedContent = withCoreUserGuard(() => {
 	const contentRef = React.useRef(null);
-	const { applicationName, logoImageUrl } = useEnvironment().displayConfig;
-	const { organizationSettings } = useEnvironment();
-	const { parsedOptions } = useAppearance();
-	const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
-	const { data: enterpriseConnections, isLoading: isLoadingEnterpriseConnections } = __internal_useUserEnterpriseConnections({ enabled: true });
-	const enterpriseConnection = enterpriseConnections?.[0];
 	return /* @__PURE__ */ jsx(ProfileCard.Root, {
 		sx: (t) => ({
 			display: "grid",
@@ -45,55 +36,9 @@ const AuthenticatedContent = withCoreUserGuard(() => {
 			height: t.sizes.$176,
 			overflow: "hidden"
 		}),
-		children: /* @__PURE__ */ jsxs(NavbarContextProvider, {
+		children: /* @__PURE__ */ jsx(ConfigureSSONavbar, {
 			contentRef,
-			children: [/* @__PURE__ */ jsx(NavBar, {
-				header: /* @__PURE__ */ jsxs(Flex, {
-					align: "center",
-					sx: (t) => ({
-						gap: t.space.$2,
-						padding: `${t.space.$none} ${t.space.$3}`,
-						maxWidth: "100%"
-					}),
-					children: [hasLogo ? /* @__PURE__ */ jsx(ApplicationLogo, { sx: (t) => ({
-						width: t.space.$9,
-						height: t.space.$9,
-						borderRadius: t.radii.$md,
-						overflow: "hidden"
-					}) }) : /* @__PURE__ */ jsx(Box, {
-						sx: (t) => ({
-							width: t.space.$9,
-							height: t.space.$9,
-							flexShrink: 0,
-							borderRadius: t.radii.$md,
-							backgroundColor: t.colors.$primary500,
-							color: t.colors.$colorPrimaryForeground,
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center"
-						}),
-						"aria-hidden": true,
-						children: /* @__PURE__ */ jsx(Icon, {
-							icon: box_default,
-							sx: (t) => ({
-								width: t.sizes.$4,
-								height: t.sizes.$4
-							})
-						})
-					}), /* @__PURE__ */ jsxs(Col, {
-						sx: { minWidth: 0 },
-						children: [/* @__PURE__ */ jsx(Text, {
-							as: "p",
-							truncate: true,
-							children: applicationName
-						}), organizationSettings.enabled && /* @__PURE__ */ jsx(OrganizationSidebarSubtitle, {})]
-					})]
-				}),
-				titleSx: (t) => ({ fontSize: t.fontSizes.$lg }),
-				title: localizationKeys("configureSSO.navbar.title"),
-				routes: [],
-				contentRef
-			}), /* @__PURE__ */ jsx(Col, {
+			children: /* @__PURE__ */ jsx(Col, {
 				ref: contentRef,
 				elementDescriptor: descriptors.scrollBox,
 				sx: (t) => ({
@@ -105,69 +50,46 @@ const AuthenticatedContent = withCoreUserGuard(() => {
 					borderWidth: t.borderWidths.$normal,
 					borderStyle: t.borderStyles.$solid,
 					borderColor: t.colors.$borderAlpha150,
-					marginBlock: "-1px",
-					marginInlineEnd: "-1px",
 					flex: 1
 				}),
-				children: /* @__PURE__ */ jsx(ConfigureSSOFlowProvider, {
-					enterpriseConnection,
-					isLoading: isLoadingEnterpriseConnections,
-					children: /* @__PURE__ */ jsx(ConfigureSSOSteps, {})
-				})
-			})]
+				children: /* @__PURE__ */ jsx(ConfigureSSOCardContent, {})
+			})
 		})
 	});
 });
-const ConfigureSSOSteps = () => {
-	const { user } = useUser();
-	const primaryEmailAddress = user?.primaryEmailAddress;
-	return /* @__PURE__ */ jsxs(ConfigureSSOWizard, { children: [
-		/* @__PURE__ */ jsx(ConfigureSSOWizard.Step, {
-			id: "verify-email-domain",
-			path: "verify-email-domain",
-			label: "Verify domain",
-			children: /* @__PURE__ */ jsxs(ConfigureSSOWizard, { children: [!primaryEmailAddress && /* @__PURE__ */ jsx(ConfigureSSOWizard.Step, {
-				id: "provide-email",
-				path: "provide-email",
-				children: /* @__PURE__ */ jsx(ProvideEmail, {})
-			}), /* @__PURE__ */ jsx(ConfigureSSOWizard.Step, {
+const ConfigureSSOCardContent = () => {
+	const { data: enterpriseConnections, isLoading } = __internal_useUserEnterpriseConnections({ enabled: true });
+	const enterpriseConnection = enterpriseConnections?.[0];
+	if (isLoading && !enterpriseConnection) return /* @__PURE__ */ jsx(ConfigureSSOSkeleton, {});
+	return /* @__PURE__ */ jsx(ConfigureSSOFlowProvider, {
+		enterpriseConnection,
+		children: /* @__PURE__ */ jsxs(Wizard, { children: [
+			/* @__PURE__ */ jsx(ConfigureSSOHeader, {}),
+			/* @__PURE__ */ jsx(Wizard.Step, {
+				id: "select-provider",
+				children: /* @__PURE__ */ jsx(SelectProviderStep, {})
+			}),
+			/* @__PURE__ */ jsx(Wizard.Step, {
 				id: "verify-domain",
-				path: "verify-domain",
+				label: "Verify domain",
 				children: /* @__PURE__ */ jsx(VerifyDomainStep, {})
-			})] })
-		}),
-		/* @__PURE__ */ jsx(ConfigureSSOWizard.Step, {
-			id: "configure",
-			path: "configure",
-			label: "Configure",
-			children: /* @__PURE__ */ jsx(ConfigureSSOWizard, { children: /* @__PURE__ */ jsx(ConfigureSSOWizard.Step, {
-				id: "create-app",
-				path: "create-app",
-				children: /* @__PURE__ */ jsx(ConfigureCreateApp, {})
-			}) })
-		}),
-		/* @__PURE__ */ jsx(ConfigureSSOWizard.Step, {
-			id: "test",
-			path: "test",
-			label: "Test",
-			children: /* @__PURE__ */ jsx(TestConfigurationStep, {})
-		}),
-		/* @__PURE__ */ jsx(ConfigureSSOWizard.Step, {
-			id: "confirmation",
-			path: "confirmation",
-			label: "Confirmation",
-			children: /* @__PURE__ */ jsx(ConfirmationStep, {})
-		})
-	] });
-};
-const OrganizationSidebarSubtitle = () => {
-	const { organization } = useOrganization();
-	if (!organization) return null;
-	return /* @__PURE__ */ jsx(Text, {
-		as: "span",
-		truncate: true,
-		sx: (t) => ({ color: t.colors.$colorMutedForeground }),
-		children: organization?.name
+			}),
+			/* @__PURE__ */ jsx(Wizard.Step, {
+				id: "configure",
+				label: "Configure",
+				children: /* @__PURE__ */ jsx(ConfigureStep, {})
+			}),
+			/* @__PURE__ */ jsx(Wizard.Step, {
+				id: "test",
+				label: "Test",
+				children: /* @__PURE__ */ jsx(TestConfigurationStep, {})
+			}),
+			/* @__PURE__ */ jsx(Wizard.Step, {
+				id: "confirmation",
+				label: "Confirmation",
+				children: /* @__PURE__ */ jsx(ConfirmationStep, {})
+			})
+		] })
 	});
 };
 const ConfigureSSO = withCardStateProvider(ConfigureSSOInternal);

package/dist/components/ConfigureSSO/ConfigureSSO.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigureSSO.js","names":["BoxIcon","ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps>"],"sources":["../../../src/components/ConfigureSSO/ConfigureSSO.tsx"],"sourcesContent":["import { __internal_useUserEnterpriseConnections, useOrganization, useUser } from '@clerk/shared/react';\nimport type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { useEnvironment, withCoreUserGuard } from '@/contexts';\nimport { Box, Col, descriptors, Flex, Flow, Icon, localizationKeys, Text, useAppearance } from '@/customizables';\nimport { ApplicationLogo } from '@/elements/ApplicationLogo';\nimport { withCardStateProvider } from '@/elements/contexts';\nimport { NavBar, NavbarContextProvider } from '@/elements/Navbar';\nimport { ProfileCard } from '@/elements/ProfileCard';\nimport { BoxIcon } from '@/icons';\nimport { Route, Switch } from '@/router';\n\nimport { ConfigureSSOFlowProvider } from './ConfigureSSOContext';\nimport { ConfigureCreateApp, ConfirmationStep, ProvideEmail, TestConfigurationStep, VerifyDomainStep } from './steps';\nimport { ConfigureSSOWizard } from './wizard';\n\nconst ConfigureSSOInternal = () => {\n  return (\n    <Flow.Root flow='configureSSO'>\n      <Switch>\n        <Route>\n          <AuthenticatedContent />\n        </Route>\n      </Switch>\n    </Flow.Root>\n  );\n};\n\nconst AuthenticatedContent = withCoreUserGuard(() => {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const { applicationName, logoImageUrl } = useEnvironment().displayConfig;\n  const { organizationSettings } = useEnvironment();\n  const { parsedOptions } = useAppearance();\n  const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);\n\n  const { data: enterpriseConnections, isLoading: isLoadingEnterpriseConnections } =\n    __internal_useUserEnterpriseConnections({ enabled: true });\n  // Currently FAPI only supports one enterprise connection per user\n  const enterpriseConnection = enterpriseConnections?.[0];\n\n  return (\n    <ProfileCard.Root\n      sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}\n    >\n      <NavbarContextProvider contentRef={contentRef}>\n        <NavBar\n          header={\n            <Flex\n              align='center'\n              sx={t => ({\n                gap: t.space.$2,\n                padding: `${t.space.$none} ${t.space.$3}`,\n                maxWidth: '100%',\n              })}\n            >\n              {hasLogo ? (\n                <ApplicationLogo\n                  sx={t => ({ width: t.space.$9, height: t.space.$9, borderRadius: t.radii.$md, overflow: 'hidden' })}\n                />\n              ) : (\n                <Box\n                  sx={t => ({\n                    width: t.space.$9,\n                    height: t.space.$9,\n                    flexShrink: 0,\n                    borderRadius: t.radii.$md,\n                    backgroundColor: t.colors.$primary500,\n                    color: t.colors.$colorPrimaryForeground,\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                  })}\n                  aria-hidden\n                >\n                  <Icon\n                    icon={BoxIcon}\n                    sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}\n                  />\n                </Box>\n              )}\n\n              <Col sx={{ minWidth: 0 }}>\n                <Text\n                  as='p'\n                  truncate\n                >\n                  {applicationName}\n                </Text>\n                {organizationSettings.enabled && <OrganizationSidebarSubtitle />}\n              </Col>\n            </Flex>\n          }\n          titleSx={t => ({ fontSize: t.fontSizes.$lg })}\n          title={localizationKeys('configureSSO.navbar.title')}\n          routes={[]}\n          contentRef={contentRef}\n        />\n        <Col\n          ref={contentRef}\n          elementDescriptor={descriptors.scrollBox}\n          sx={t => ({\n            backgroundColor: t.colors.$colorBackground,\n            position: 'relative',\n            borderRadius: t.radii.$lg,\n            width: '100%',\n            overflow: 'hidden',\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha150,\n            marginBlock: '-1px',\n            marginInlineEnd: '-1px',\n            flex: 1,\n          })}\n        >\n          <ConfigureSSOFlowProvider\n            enterpriseConnection={enterpriseConnection}\n            isLoading={isLoadingEnterpriseConnections}\n          >\n            <ConfigureSSOSteps />\n          </ConfigureSSOFlowProvider>\n        </Col>\n      </NavbarContextProvider>\n    </ProfileCard.Root>\n  );\n});\n\nconst ConfigureSSOSteps = () => {\n  const { user } = useUser();\n\n  const primaryEmailAddress = user?.primaryEmailAddress;\n\n  return (\n    <ConfigureSSOWizard>\n      <ConfigureSSOWizard.Step\n        id='verify-email-domain'\n        path='verify-email-domain'\n        label='Verify domain'\n      >\n        <ConfigureSSOWizard>\n          {!primaryEmailAddress && (\n            <ConfigureSSOWizard.Step\n              id='provide-email'\n              path='provide-email'\n            >\n              <ProvideEmail />\n            </ConfigureSSOWizard.Step>\n          )}\n          <ConfigureSSOWizard.Step\n            id='verify-domain'\n            path='verify-domain'\n          >\n            <VerifyDomainStep />\n          </ConfigureSSOWizard.Step>\n        </ConfigureSSOWizard>\n      </ConfigureSSOWizard.Step>\n      <ConfigureSSOWizard.Step\n        id='configure'\n        path='configure'\n        label='Configure'\n      >\n        <ConfigureSSOWizard>\n          {/* TODO: Implement configure steps */}\n          <ConfigureSSOWizard.Step\n            id='create-app'\n            path='create-app'\n          >\n            <ConfigureCreateApp />\n          </ConfigureSSOWizard.Step>\n        </ConfigureSSOWizard>\n      </ConfigureSSOWizard.Step>\n      <ConfigureSSOWizard.Step\n        id='test'\n        path='test'\n        label='Test'\n      >\n        <TestConfigurationStep />\n      </ConfigureSSOWizard.Step>\n      <ConfigureSSOWizard.Step\n        id='confirmation'\n        path='confirmation'\n        label='Confirmation'\n      >\n        <ConfirmationStep />\n      </ConfigureSSOWizard.Step>\n    </ConfigureSSOWizard>\n  );\n};\n\nconst OrganizationSidebarSubtitle = () => {\n  const { organization } = useOrganization();\n\n  if (!organization) {\n    return null;\n  }\n\n  return (\n    <Text\n      as='span'\n      truncate\n      sx={t => ({ color: t.colors.$colorMutedForeground })}\n    >\n      {organization?.name}\n    </Text>\n  );\n};\n\nexport const ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps> =\n  withCardStateProvider(ConfigureSSOInternal);\n"],"mappings":"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"}
+{"version":3,"file":"ConfigureSSO.js","names":["ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps>"],"sources":["../../../src/components/ConfigureSSO/ConfigureSSO.tsx"],"sourcesContent":["import { __internal_useUserEnterpriseConnections } from '@clerk/shared/react';\nimport type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { withCoreUserGuard } from '@/contexts';\nimport { Col, descriptors, Flow } from '@/customizables';\nimport { withCardStateProvider } from '@/elements/contexts';\nimport { ProfileCard } from '@/elements/ProfileCard';\nimport { Route, Switch } from '@/router';\n\nimport { ConfigureSSOFlowProvider } from './ConfigureSSOContext';\nimport { ConfigureSSOHeader } from './ConfigureSSOHeader';\nimport { ConfigureSSONavbar } from './ConfigureSSONavbar';\nimport { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton';\nimport { Wizard } from './elements/Wizard';\nimport { ConfigureStep, ConfirmationStep, SelectProviderStep, TestConfigurationStep, VerifyDomainStep } from './steps';\n\nconst ConfigureSSOInternal = () => {\n  return (\n    <Flow.Root flow='configureSSO'>\n      <Switch>\n        <Route>\n          <AuthenticatedContent />\n        </Route>\n      </Switch>\n    </Flow.Root>\n  );\n};\n\nconst AuthenticatedContent = withCoreUserGuard(() => {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <ProfileCard.Root\n      sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}\n    >\n      <ConfigureSSONavbar contentRef={contentRef}>\n        <Col\n          ref={contentRef}\n          elementDescriptor={descriptors.scrollBox}\n          sx={t => ({\n            backgroundColor: t.colors.$colorBackground,\n            position: 'relative',\n            borderRadius: t.radii.$lg,\n            width: '100%',\n            overflow: 'hidden',\n            borderWidth: t.borderWidths.$normal,\n            borderStyle: t.borderStyles.$solid,\n            borderColor: t.colors.$borderAlpha150,\n            flex: 1,\n          })}\n        >\n          <ConfigureSSOCardContent />\n        </Col>\n      </ConfigureSSONavbar>\n    </ProfileCard.Root>\n  );\n});\n\nconst ConfigureSSOCardContent = () => {\n  const { data: enterpriseConnections, isLoading } = __internal_useUserEnterpriseConnections({ enabled: true });\n  // Currently FAPI only supports one enterprise connection per user\n  const enterpriseConnection = enterpriseConnections?.[0];\n\n  // Initial-load gate at root — wizard never sees isLoading\n  if (isLoading && !enterpriseConnection) {\n    return <ConfigureSSOSkeleton />;\n  }\n\n  return (\n    <ConfigureSSOFlowProvider enterpriseConnection={enterpriseConnection}>\n      <Wizard>\n        <ConfigureSSOHeader />\n\n        <Wizard.Step id='select-provider'>\n          <SelectProviderStep />\n        </Wizard.Step>\n\n        <Wizard.Step\n          id='verify-domain'\n          label='Verify domain'\n        >\n          <VerifyDomainStep />\n        </Wizard.Step>\n\n        <Wizard.Step\n          id='configure'\n          label='Configure'\n        >\n          <ConfigureStep />\n        </Wizard.Step>\n\n        <Wizard.Step\n          id='test'\n          label='Test'\n        >\n          <TestConfigurationStep />\n        </Wizard.Step>\n\n        <Wizard.Step\n          id='confirmation'\n          label='Confirmation'\n        >\n          <ConfirmationStep />\n        </Wizard.Step>\n      </Wizard>\n    </ConfigureSSOFlowProvider>\n  );\n};\n\nexport const ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps> =\n  withCardStateProvider(ConfigureSSOInternal);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,6BAA6B;AACjC,QACE,oBAAC,KAAK;EAAK,MAAK;YACd,oBAAC,oBACC,oBAAC,mBACC,oBAAC,yBAAuB,GAClB,GACD;GACC;;AAIhB,MAAM,uBAAuB,wBAAwB;CACnD,MAAM,aAAa,MAAM,OAAuB,KAAK;AAErD,QACE,oBAAC,YAAY;EACX,KAAI,OAAM;GAAE,SAAS;GAAQ,qBAAqB;GAAW,QAAQ,EAAE,MAAM;GAAM,UAAU;GAAU;YAEvG,oBAAC;GAA+B;aAC9B,oBAAC;IACC,KAAK;IACL,mBAAmB,YAAY;IAC/B,KAAI,OAAM;KACR,iBAAiB,EAAE,OAAO;KAC1B,UAAU;KACV,cAAc,EAAE,MAAM;KACtB,OAAO;KACP,UAAU;KACV,aAAa,EAAE,aAAa;KAC5B,aAAa,EAAE,aAAa;KAC5B,aAAa,EAAE,OAAO;KACtB,MAAM;KACP;cAED,oBAAC,4BAA0B;KACvB;IACa;GACJ;EAErB;AAEF,MAAM,gCAAgC;CACpC,MAAM,EAAE,MAAM,uBAAuB,cAAc,wCAAwC,EAAE,SAAS,MAAM,CAAC;CAE7G,MAAM,uBAAuB,wBAAwB;AAGrD,KAAI,aAAa,CAAC,qBAChB,QAAO,oBAAC,yBAAuB;AAGjC,QACE,oBAAC;EAA+C;YAC9C,qBAAC;GACC,oBAAC,uBAAqB;GAEtB,oBAAC,OAAO;IAAK,IAAG;cACd,oBAAC,uBAAqB;KACV;GAEd,oBAAC,OAAO;IACN,IAAG;IACH,OAAM;cAEN,oBAAC,qBAAmB;KACR;GAEd,oBAAC,OAAO;IACN,IAAG;IACH,OAAM;cAEN,oBAAC,kBAAgB;KACL;GAEd,oBAAC,OAAO;IACN,IAAG;IACH,OAAM;cAEN,oBAAC,0BAAwB;KACb;GAEd,oBAAC,OAAO;IACN,IAAG;IACH,OAAM;cAEN,oBAAC,qBAAmB;KACR;MACP;GACgB;;AAI/B,MAAaA,eACX,sBAAsB,qBAAqB"}

package/dist/components/ConfigureSSO/ConfigureSSOContext.js

@@ -4,22 +4,14 @@ import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/components/ConfigureSSO/ConfigureSSOContext.tsx
 const ConfigureSSOFlowContext = React.createContext(null);
 ConfigureSSOFlowContext.displayName = "ConfigureSSOFlowContext";
-const ConfigureSSOFlowProvider = ({ enterpriseConnection, isLoading, children }) => {
-	const value = React.useMemo(() => ({
-		enterpriseConnection,
-		isLoading
-	}), [enterpriseConnection, isLoading]);
+const ConfigureSSOFlowProvider = ({ enterpriseConnection, children }) => {
+	const value = React.useMemo(() => ({ enterpriseConnection }), [enterpriseConnection]);
 	return /* @__PURE__ */ jsx(ConfigureSSOFlowContext.Provider, {
 		value,
 		children
 	});
 };
-const useConfigureSSOFlow = () => {
-	const ctx = React.useContext(ConfigureSSOFlowContext);
-	if (!ctx) throw new Error("useConfigureSSOFlow called outside <ConfigureSSOFlowProvider>.");
-	return ctx;
-};
 
 //#endregion
-export { ConfigureSSOFlowProvider, useConfigureSSOFlow };
+export { ConfigureSSOFlowProvider };
 //# sourceMappingURL=ConfigureSSOContext.js.map

package/dist/components/ConfigureSSO/ConfigureSSOContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigureSSOContext.js","names":[],"sources":["../../../src/components/ConfigureSSO/ConfigureSSOContext.tsx"],"sourcesContent":["import type { EnterpriseConnectionResource } from '@clerk/shared/types';\nimport React, { type PropsWithChildren } from 'react';\n\n/**\n * Shared form state for the ConfigureSSO wizard, persisted across steps\n */\nexport interface ConfigureSSOData {\n  /**\n   * The enterprise connection from the user's primary email address domain\n   */\n  enterpriseConnection: EnterpriseConnectionResource | undefined;\n}\n\nexport interface ConfigureSSOContextValue extends ConfigureSSOData {\n  /**\n   * `true` while the parent is still fetching the user's enterprise\n   * connection\n   */\n  isLoading: boolean;\n}\n\ninterface ConfigureSSOFlowProviderProps {\n  enterpriseConnection: EnterpriseConnectionResource | undefined;\n  isLoading: boolean;\n}\n\nconst ConfigureSSOFlowContext = React.createContext<ConfigureSSOContextValue | null>(null);\nConfigureSSOFlowContext.displayName = 'ConfigureSSOFlowContext';\n\nexport const ConfigureSSOFlowProvider = ({\n  enterpriseConnection,\n  isLoading,\n  children,\n}: PropsWithChildren<ConfigureSSOFlowProviderProps>): JSX.Element => {\n  const value = React.useMemo<ConfigureSSOContextValue>(\n    () => ({\n      enterpriseConnection,\n      isLoading,\n    }),\n    [enterpriseConnection, isLoading],\n  );\n\n  return <ConfigureSSOFlowContext.Provider value={value}>{children}</ConfigureSSOFlowContext.Provider>;\n};\n\nexport const useConfigureSSOFlow = (): ConfigureSSOContextValue => {\n  const ctx = React.useContext(ConfigureSSOFlowContext);\n  if (!ctx) {\n    throw new Error('useConfigureSSOFlow called outside <ConfigureSSOFlowProvider>.');\n  }\n  return ctx;\n};\n"],"mappings":";;;;AA0BA,MAAM,0BAA0B,MAAM,cAA+C,KAAK;AAC1F,wBAAwB,cAAc;AAEtC,MAAa,4BAA4B,EACvC,sBACA,WACA,eACmE;CACnE,MAAM,QAAQ,MAAM,eACX;EACL;EACA;EACD,GACD,CAAC,sBAAsB,UAAU,CAClC;AAED,QAAO,oBAAC,wBAAwB;EAAgB;EAAQ;GAA4C;;AAGtG,MAAa,4BAAsD;CACjE,MAAM,MAAM,MAAM,WAAW,wBAAwB;AACrD,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,iEAAiE;AAEnF,QAAO"}
+{"version":3,"file":"ConfigureSSOContext.js","names":[],"sources":["../../../src/components/ConfigureSSO/ConfigureSSOContext.tsx"],"sourcesContent":["import type { EnterpriseConnectionResource } from '@clerk/shared/types';\nimport React, { type PropsWithChildren } from 'react';\n\n/**\n * Shared form state for the ConfigureSSO wizard, persisted across steps\n */\nexport interface ConfigureSSOData {\n  /**\n   * The enterprise connection from the user's primary email address domain\n   */\n  enterpriseConnection: EnterpriseConnectionResource | undefined;\n}\n\ninterface ConfigureSSOFlowProviderProps {\n  enterpriseConnection: EnterpriseConnectionResource | undefined;\n}\n\nconst ConfigureSSOFlowContext = React.createContext<ConfigureSSOData | null>(null);\nConfigureSSOFlowContext.displayName = 'ConfigureSSOFlowContext';\n\nexport const ConfigureSSOFlowProvider = ({\n  enterpriseConnection,\n  children,\n}: PropsWithChildren<ConfigureSSOFlowProviderProps>): JSX.Element => {\n  const value = React.useMemo<ConfigureSSOData>(\n    () => ({\n      enterpriseConnection,\n    }),\n    [enterpriseConnection],\n  );\n\n  return <ConfigureSSOFlowContext.Provider value={value}>{children}</ConfigureSSOFlowContext.Provider>;\n};\n\nexport const useConfigureSSOFlow = (): ConfigureSSOData => {\n  const ctx = React.useContext(ConfigureSSOFlowContext);\n  if (!ctx) {\n    throw new Error('useConfigureSSOFlow called outside <ConfigureSSOFlowProvider>.');\n  }\n  return ctx;\n};\n"],"mappings":";;;;AAiBA,MAAM,0BAA0B,MAAM,cAAuC,KAAK;AAClF,wBAAwB,cAAc;AAEtC,MAAa,4BAA4B,EACvC,sBACA,eACmE;CACnE,MAAM,QAAQ,MAAM,eACX,EACL,sBACD,GACD,CAAC,qBAAqB,CACvB;AAED,QAAO,oBAAC,wBAAwB;EAAgB;EAAQ;GAA4C"}

package/dist/components/ConfigureSSO/ConfigureSSOHeader.js

@@ -0,0 +1,31 @@
+import { useLocalizations } from "../../localization/makeLocalizable.js";
+import { ProfileCardHeader } from "./elements/ProfileCard.js";
+import { Stepper } from "./elements/Stepper/Stepper.js";
+import { useWizard } from "./elements/Wizard/WizardContext.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+
+//#region src/components/ConfigureSSO/ConfigureSSOHeader.tsx
+const ConfigureSSOHeader = () => {
+	const { activeSteps, currentStep, goToStep } = useWizard();
+	const { t } = useLocalizations();
+	const visibleSteps = activeSteps.filter((step) => step.id !== "select-provider");
+	const currentIndex = visibleSteps.findIndex((step) => step.id === currentStep?.id);
+	return /* @__PURE__ */ jsx(ProfileCardHeader, { children: /* @__PURE__ */ jsx(Stepper, { children: visibleSteps.map((step, index) => {
+		const isCurrent = index === currentIndex;
+		const isCompleted = step.isCompleted ?? index < currentIndex;
+		const isReachable = isCompleted || index <= currentIndex;
+		const labelText = step.label ? typeof step.label === "string" ? step.label : t(step.label) : "";
+		return /* @__PURE__ */ jsx(Stepper.Item, {
+			bullet: index + 1,
+			isCurrent,
+			isCompleted,
+			isReachable,
+			onClick: () => void goToStep(step.id),
+			children: labelText
+		}, step.id);
+	}) }) });
+};
+
+//#endregion
+export { ConfigureSSOHeader };
+//# sourceMappingURL=ConfigureSSOHeader.js.map

package/dist/components/ConfigureSSO/ConfigureSSOHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigureSSOHeader.js","names":[],"sources":["../../../src/components/ConfigureSSO/ConfigureSSOHeader.tsx"],"sourcesContent":["import { useLocalizations } from '@/customizables';\n\nimport { ProfileCardHeader } from './elements/ProfileCard';\nimport { Stepper } from './elements/Stepper';\nimport { useWizard } from './elements/Wizard';\n\nexport const ConfigureSSOHeader = (): JSX.Element => {\n  const { activeSteps, currentStep, goToStep } = useWizard();\n  const { t } = useLocalizations();\n  // Select Provider isn't part of the visual breadcrumb per the design —\n  // filter it out here. The wizard still tracks it as the first step\n  // for navigation (goNext from it advances to verify-domain, Previous\n  // is naturally disabled because isFirstStep is true).\n  const visibleSteps = activeSteps.filter(step => step.id !== 'select-provider');\n  const currentIndex = visibleSteps.findIndex(step => step.id === currentStep?.id);\n\n  return (\n    <ProfileCardHeader>\n      <Stepper>\n        {visibleSteps.map((step, index) => {\n          const isCurrent = index === currentIndex;\n          const isCompleted = step.isCompleted ?? index < currentIndex;\n          const isReachable = isCompleted || index <= currentIndex;\n          const labelText = step.label ? (typeof step.label === 'string' ? step.label : t(step.label)) : '';\n\n          return (\n            <Stepper.Item\n              key={step.id}\n              bullet={index + 1}\n              isCurrent={isCurrent}\n              isCompleted={isCompleted}\n              isReachable={isReachable}\n              onClick={() => void goToStep(step.id)}\n            >\n              {labelText}\n            </Stepper.Item>\n          );\n        })}\n      </Stepper>\n    </ProfileCardHeader>\n  );\n};\n"],"mappings":";;;;;;;AAMA,MAAa,2BAAwC;CACnD,MAAM,EAAE,aAAa,aAAa,aAAa,WAAW;CAC1D,MAAM,EAAE,MAAM,kBAAkB;CAKhC,MAAM,eAAe,YAAY,QAAO,SAAQ,KAAK,OAAO,kBAAkB;CAC9E,MAAM,eAAe,aAAa,WAAU,SAAQ,KAAK,OAAO,aAAa,GAAG;AAEhF,QACE,oBAAC,+BACC,oBAAC,qBACE,aAAa,KAAK,MAAM,UAAU;EACjC,MAAM,YAAY,UAAU;EAC5B,MAAM,cAAc,KAAK,eAAe,QAAQ;EAChD,MAAM,cAAc,eAAe,SAAS;EAC5C,MAAM,YAAY,KAAK,QAAS,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,EAAE,KAAK,MAAM,GAAI;AAE/F,SACE,oBAAC,QAAQ;GAEP,QAAQ,QAAQ;GACL;GACE;GACA;GACb,eAAe,KAAK,SAAS,KAAK,GAAG;aAEpC;KAPI,KAAK,GAQG;GAEjB,GACM,GACQ"}

package/dist/components/ConfigureSSO/ConfigureSSONavbar.js

@@ -0,0 +1,80 @@
+import { useEnvironment } from "../../contexts/EnvironmentContext.js";
+import { localizationKeys } from "../../localization/localizationKeys.js";
+import box_default from "../../icons/box.js";
+import { useAppearance } from "../../customizables/AppearanceContext.js";
+import { Box, Col, Flex, Icon, Text } from "../../customizables/index.js";
+import { ApplicationLogo } from "../../elements/ApplicationLogo.js";
+import { NavBar, NavbarContextProvider } from "../../elements/Navbar.js";
+import React from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useOrganization } from "@clerk/shared/react/index";
+
+//#region src/components/ConfigureSSO/ConfigureSSONavbar.tsx
+const ConfigureSSONavbar = ({ children, contentRef }) => {
+	const { parsedOptions } = useAppearance();
+	const { organizationSettings, displayConfig: { applicationName, logoImageUrl } } = useEnvironment();
+	return /* @__PURE__ */ jsxs(NavbarContextProvider, {
+		contentRef,
+		children: [/* @__PURE__ */ jsx(NavBar, {
+			header: /* @__PURE__ */ jsxs(Flex, {
+				align: "center",
+				sx: (t) => ({
+					gap: t.space.$2,
+					padding: `${t.space.$none} ${t.space.$3}`,
+					maxWidth: "100%"
+				}),
+				children: [Boolean(parsedOptions.logoImageUrl || logoImageUrl) ? /* @__PURE__ */ jsx(ApplicationLogo, { sx: (t) => ({
+					width: t.space.$9,
+					height: t.space.$9,
+					borderRadius: t.radii.$md,
+					overflow: "hidden"
+				}) }) : /* @__PURE__ */ jsx(Box, {
+					sx: (t) => ({
+						width: t.space.$9,
+						height: t.space.$9,
+						flexShrink: 0,
+						borderRadius: t.radii.$md,
+						backgroundColor: t.colors.$primary500,
+						color: t.colors.$colorPrimaryForeground,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center"
+					}),
+					"aria-hidden": true,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: box_default,
+						sx: (t) => ({
+							width: t.sizes.$4,
+							height: t.sizes.$4
+						})
+					})
+				}), /* @__PURE__ */ jsxs(Col, {
+					sx: { minWidth: 0 },
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "p",
+						truncate: true,
+						children: applicationName
+					}), organizationSettings.enabled && /* @__PURE__ */ jsx(OrganizationSidebarSubtitle, {})]
+				})]
+			}),
+			titleSx: (t) => ({ fontSize: t.fontSizes.$lg }),
+			title: localizationKeys("configureSSO.navbar.title"),
+			routes: [],
+			contentRef
+		}), children]
+	});
+};
+const OrganizationSidebarSubtitle = () => {
+	const { organization } = useOrganization();
+	if (!organization) return null;
+	return /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		truncate: true,
+		sx: (t) => ({ color: t.colors.$colorMutedForeground }),
+		children: organization?.name
+	});
+};
+
+//#endregion
+export { ConfigureSSONavbar };
+//# sourceMappingURL=ConfigureSSONavbar.js.map

package/dist/components/ConfigureSSO/ConfigureSSONavbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigureSSONavbar.js","names":["BoxIcon"],"sources":["../../../src/components/ConfigureSSO/ConfigureSSONavbar.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react/index';\nimport React from 'react';\n\nimport { useEnvironment } from '@/contexts';\nimport { Box, Col, Flex, Icon, localizationKeys, Text, useAppearance } from '@/customizables';\nimport { ApplicationLogo } from '@/elements/ApplicationLogo';\nimport { NavBar, NavbarContextProvider } from '@/elements/Navbar';\nimport { BoxIcon } from '@/icons';\n\ntype ConfigureSSONavbarProps = React.PropsWithChildren<{\n  contentRef: React.RefObject<HTMLDivElement>;\n}>;\n\nexport const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarProps) => {\n  const { parsedOptions } = useAppearance();\n  const {\n    organizationSettings,\n    displayConfig: { applicationName, logoImageUrl },\n  } = useEnvironment();\n\n  const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);\n\n  return (\n    <NavbarContextProvider contentRef={contentRef}>\n      <NavBar\n        header={\n          <Flex\n            align='center'\n            sx={t => ({\n              gap: t.space.$2,\n              padding: `${t.space.$none} ${t.space.$3}`,\n              maxWidth: '100%',\n            })}\n          >\n            {hasLogo ? (\n              <ApplicationLogo\n                sx={t => ({ width: t.space.$9, height: t.space.$9, borderRadius: t.radii.$md, overflow: 'hidden' })}\n              />\n            ) : (\n              <Box\n                sx={t => ({\n                  width: t.space.$9,\n                  height: t.space.$9,\n                  flexShrink: 0,\n                  borderRadius: t.radii.$md,\n                  backgroundColor: t.colors.$primary500,\n                  color: t.colors.$colorPrimaryForeground,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                })}\n                aria-hidden\n              >\n                <Icon\n                  icon={BoxIcon}\n                  sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}\n                />\n              </Box>\n            )}\n\n            <Col sx={{ minWidth: 0 }}>\n              <Text\n                as='p'\n                truncate\n              >\n                {applicationName}\n              </Text>\n              {organizationSettings.enabled && <OrganizationSidebarSubtitle />}\n            </Col>\n          </Flex>\n        }\n        titleSx={t => ({ fontSize: t.fontSizes.$lg })}\n        title={localizationKeys('configureSSO.navbar.title')}\n        routes={[]}\n        contentRef={contentRef}\n      />\n      {children}\n    </NavbarContextProvider>\n  );\n};\n\nconst OrganizationSidebarSubtitle = (): JSX.Element | null => {\n  const { organization } = useOrganization();\n\n  if (!organization) {\n    return null;\n  }\n\n  return (\n    <Text\n      as='span'\n      truncate\n      sx={t => ({ color: t.colors.$colorMutedForeground })}\n    >\n      {organization?.name}\n    </Text>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,sBAAsB,EAAE,UAAU,iBAA0C;CACvF,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,EACJ,sBACA,eAAe,EAAE,iBAAiB,mBAChC,gBAAgB;AAIpB,QACE,qBAAC;EAAkC;aACjC,oBAAC;GACC,QACE,qBAAC;IACC,OAAM;IACN,KAAI,OAAM;KACR,KAAK,EAAE,MAAM;KACb,SAAS,GAAG,EAAE,MAAM,MAAM,GAAG,EAAE,MAAM;KACrC,UAAU;KACX;eAZK,QAAQ,cAAc,gBAAgB,aAAa,GAevD,oBAAC,mBACC,KAAI,OAAM;KAAE,OAAO,EAAE,MAAM;KAAI,QAAQ,EAAE,MAAM;KAAI,cAAc,EAAE,MAAM;KAAK,UAAU;KAAU,IAClG,GAEF,oBAAC;KACC,KAAI,OAAM;MACR,OAAO,EAAE,MAAM;MACf,QAAQ,EAAE,MAAM;MAChB,YAAY;MACZ,cAAc,EAAE,MAAM;MACtB,iBAAiB,EAAE,OAAO;MAC1B,OAAO,EAAE,OAAO;MAChB,SAAS;MACT,YAAY;MACZ,gBAAgB;MACjB;KACD;eAEA,oBAAC;MACC,MAAMA;MACN,KAAI,OAAM;OAAE,OAAO,EAAE,MAAM;OAAI,QAAQ,EAAE,MAAM;OAAI;OACnD;MACE,EAGR,qBAAC;KAAI,IAAI,EAAE,UAAU,GAAG;gBACtB,oBAAC;MACC,IAAG;MACH;gBAEC;OACI,EACN,qBAAqB,WAAW,oBAAC,gCAA8B;MAC5D;KACD;GAET,UAAS,OAAM,EAAE,UAAU,EAAE,UAAU,KAAK;GAC5C,OAAO,iBAAiB,4BAA4B;GACpD,QAAQ,EAAE;GACE;IACZ,EACD;GACqB;;AAI5B,MAAM,oCAAwD;CAC5D,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,aACH,QAAO;AAGT,QACE,oBAAC;EACC,IAAG;EACH;EACA,KAAI,OAAM,EAAE,OAAO,EAAE,OAAO,uBAAuB;YAElD,cAAc;GACV"}

package/dist/components/ConfigureSSO/ConfigureSSOSkeleton.js

@@ -0,0 +1,31 @@
+import { descriptors } from "../../customizables/elementDescriptors.js";
+import { Flex, Spinner } from "../../customizables/index.js";
+import { ProfileCardHeader } from "./elements/ProfileCard.js";
+import { Stepper } from "./elements/Stepper/Stepper.js";
+import { Step } from "./elements/Step.js";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+
+//#region src/components/ConfigureSSO/ConfigureSSOSkeleton.tsx
+const ConfigureSSOSkeleton = () => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(ProfileCardHeader, { children: /* @__PURE__ */ jsx(Stepper.Skeleton, {}) }),
+		/* @__PURE__ */ jsx(Flex, {
+			align: "center",
+			justify: "center",
+			sx: (theme) => ({
+				flex: 1,
+				padding: theme.space.$5
+			}),
+			children: /* @__PURE__ */ jsx(Spinner, {
+				size: "xs",
+				colorScheme: "neutral",
+				elementDescriptor: descriptors.spinner
+			})
+		}),
+		/* @__PURE__ */ jsxs(Step.Footer, { children: [/* @__PURE__ */ jsx(Step.Footer.Previous, { isDisabled: true }), /* @__PURE__ */ jsx(Step.Footer.Continue, { isDisabled: true })] })
+	] });
+};
+
+//#endregion
+export { ConfigureSSOSkeleton };
+//# sourceMappingURL=ConfigureSSOSkeleton.js.map

package/dist/components/ConfigureSSO/ConfigureSSOSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigureSSOSkeleton.js","names":[],"sources":["../../../src/components/ConfigureSSO/ConfigureSSOSkeleton.tsx"],"sourcesContent":["import { descriptors, Flex, Spinner } from '@/customizables';\n\nimport { ProfileCardHeader } from './elements/ProfileCard';\nimport { Step } from './elements/Step';\nimport { Stepper } from './elements/Stepper';\n\nexport const ConfigureSSOSkeleton = () => {\n  return (\n    <>\n      <ProfileCardHeader>\n        <Stepper.Skeleton />\n      </ProfileCardHeader>\n\n      <Flex\n        align='center'\n        justify='center'\n        sx={theme => ({\n          flex: 1,\n          padding: theme.space.$5,\n        })}\n      >\n        <Spinner\n          size='xs'\n          colorScheme='neutral'\n          elementDescriptor={descriptors.spinner}\n        />\n      </Flex>\n\n      <Step.Footer>\n        <Step.Footer.Previous isDisabled />\n        <Step.Footer.Continue isDisabled />\n      </Step.Footer>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAa,6BAA6B;AACxC,QACE;EACE,oBAAC,+BACC,oBAAC,QAAQ,aAAW,GACF;EAEpB,oBAAC;GACC,OAAM;GACN,SAAQ;GACR,KAAI,WAAU;IACZ,MAAM;IACN,SAAS,MAAM,MAAM;IACtB;aAED,oBAAC;IACC,MAAK;IACL,aAAY;IACZ,mBAAmB,YAAY;KAC/B;IACG;EAEP,qBAAC,KAAK,qBACJ,oBAAC,KAAK,OAAO,YAAS,mBAAa,EACnC,oBAAC,KAAK,OAAO,YAAS,mBAAa,IACvB;KACb"}

package/dist/components/ConfigureSSO/elements/ProfileCard.js

@@ -0,0 +1,38 @@
+import { common } from "../../../styledSystem/common.js";
+import { descriptors } from "../../../customizables/elementDescriptors.js";
+import { Flex } from "../../../customizables/index.js";
+import { jsx } from "@emotion/react/jsx-runtime";
+
+//#region src/components/ConfigureSSO/elements/ProfileCard.tsx
+const ProfileCardHeader = (props) => /* @__PURE__ */ jsx(Flex, {
+	as: "header",
+	elementDescriptor: descriptors.configureSSOHeader,
+	...props,
+	sx: (theme) => ({
+		gap: theme.space.$2,
+		padding: `${theme.space.$5}`,
+		borderBottomWidth: theme.borderWidths.$normal,
+		borderBottomStyle: theme.borderStyles.$solid,
+		borderBottomColor: theme.colors.$borderAlpha100
+	})
+});
+const ProfileCardFooter = (props) => /* @__PURE__ */ jsx(Flex, {
+	as: "footer",
+	elementDescriptor: descriptors.configureSSOFooter,
+	align: "center",
+	justify: "end",
+	...props,
+	sx: (theme) => ({
+		gap: theme.space.$2,
+		padding: theme.space.$4,
+		minHeight: theme.sizes.$16,
+		background: common.mutedBackground(theme),
+		borderTopWidth: theme.borderWidths.$normal,
+		borderTopStyle: theme.borderStyles.$solid,
+		borderTopColor: theme.colors.$borderAlpha100
+	})
+});
+
+//#endregion
+export { ProfileCardFooter, ProfileCardHeader };
+//# sourceMappingURL=ProfileCard.js.map

package/dist/components/ConfigureSSO/elements/ProfileCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileCard.js","names":[],"sources":["../../../../src/components/ConfigureSSO/elements/ProfileCard.tsx"],"sourcesContent":["import { descriptors, Flex } from '@/customizables';\nimport { common } from '@/styledSystem';\n\ntype ProfileCardHeaderProps = React.PropsWithChildren;\n\nexport const ProfileCardHeader = (props: ProfileCardHeaderProps): JSX.Element => (\n  <Flex\n    as='header'\n    elementDescriptor={descriptors.configureSSOHeader}\n    {...props}\n    sx={theme => ({\n      gap: theme.space.$2,\n      padding: `${theme.space.$5}`,\n      borderBottomWidth: theme.borderWidths.$normal,\n      borderBottomStyle: theme.borderStyles.$solid,\n      borderBottomColor: theme.colors.$borderAlpha100,\n    })}\n  />\n);\n\ntype ProfileCardFooterProps = React.PropsWithChildren;\n\nexport const ProfileCardFooter = (props: ProfileCardFooterProps): JSX.Element => (\n  <Flex\n    as='footer'\n    elementDescriptor={descriptors.configureSSOFooter}\n    align='center'\n    justify='end'\n    {...props}\n    sx={theme => ({\n      gap: theme.space.$2,\n      padding: theme.space.$4,\n      minHeight: theme.sizes.$16,\n      background: common.mutedBackground(theme),\n      borderTopWidth: theme.borderWidths.$normal,\n      borderTopStyle: theme.borderStyles.$solid,\n      borderTopColor: theme.colors.$borderAlpha100,\n    })}\n  />\n);\n"],"mappings":";;;;;;AAKA,MAAa,qBAAqB,UAChC,oBAAC;CACC,IAAG;CACH,mBAAmB,YAAY;CAC/B,GAAI;CACJ,KAAI,WAAU;EACZ,KAAK,MAAM,MAAM;EACjB,SAAS,GAAG,MAAM,MAAM;EACxB,mBAAmB,MAAM,aAAa;EACtC,mBAAmB,MAAM,aAAa;EACtC,mBAAmB,MAAM,OAAO;EACjC;EACD;AAKJ,MAAa,qBAAqB,UAChC,oBAAC;CACC,IAAG;CACH,mBAAmB,YAAY;CAC/B,OAAM;CACN,SAAQ;CACR,GAAI;CACJ,KAAI,WAAU;EACZ,KAAK,MAAM,MAAM;EACjB,SAAS,MAAM,MAAM;EACrB,WAAW,MAAM,MAAM;EACvB,YAAY,OAAO,gBAAgB,MAAM;EACzC,gBAAgB,MAAM,aAAa;EACnC,gBAAgB,MAAM,aAAa;EACnC,gBAAgB,MAAM,OAAO;EAC9B;EACD"}