@workos-inc/widgets 1.5.0 → 1.6.0

package/dist/cjs/lib/add-mfa-dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/add-mfa-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Box,\n  Code,\n  Dialog,\n  Flex,\n  Grid,\n  Link,\n  Separator,\n  Text,\n  VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport * as Otp from \"./otp-input.js\";\nimport { DialogContent, PrimaryButton, SecondaryButton } from \"./elements.js\";\nimport {\n  CreateTotpFactorResponse,\n  CreateTotpFactorResponseAuthenticationFactorAllOfTotpAnyOf,\n  useCreateTotpFactor,\n  useVerifyTotpFactor,\n} from \"../api/endpoint.js\";\nimport { useElevatedAccessToken } from \"../api/api-provider.js\";\nimport * as Form from \"@radix-ui/react-form\";\nimport { Marker } from \"./marker.js\";\nimport { CopyButton } from \"./copy-button.js\";\nimport { useSecuritySettings } from \"./use-security-settings.js\";\nimport { ElevatedAccess } from \"./elevated-access.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { useDialogClose } from \"./use-dialog-close.js\";\n\ninterface AddMfaDialogProps extends Dialog.RootProps {\n  children?: ReactNode;\n  onSuccess?: () => void;\n}\n\nexport function AddMfaDialog({\n  children,\n  onSuccess,\n  ...props\n}: AddMfaDialogProps) {\n  const [open, setOpen] = React.useState(false);\n  const [manuallyTriggered, setManuallyTriggered] = React.useState(false);\n  const { elevatedAccess } = useElevatedAccessToken();\n  const createAuthFactor = useCreateTotpFactor();\n\n  const handleVerified = async () => {\n    await createAuthFactor.mutateAsync(undefined);\n  };\n\n  const onTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    if (elevatedAccess && !createAuthFactor.data) {\n      event.preventDefault();\n      setManuallyTriggered(true);\n      createAuthFactor.mutate(undefined, {\n        onSuccess: () => {\n          setOpen(true);\n        },\n      });\n    } else {\n      setManuallyTriggered(false);\n    }\n  };\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <Dialog.Root\n      {...props}\n      open={props.open || open}\n      onOpenChange={props.onOpenChange || setOpen}\n    >\n      <Dialog.Trigger\n        onClick={onTriggerClick}\n        // @ts-ignore I've to find a way to pass the loading state to the trigger\n        loading={manuallyTriggered && createAuthFactor.isPending}\n      >\n        {children}\n      </Dialog.Trigger>\n\n      <DialogContent maxWidth=\"480px\">\n        <ElevatedAccess onVerified={handleVerified}>\n          <Content onClose={handleClose} totpFactor={createAuthFactor.data} />\n        </ElevatedAccess>\n      </DialogContent>\n    </Dialog.Root>\n  );\n}\n\ninterface ContentProps {\n  totpFactor?: CreateTotpFactorResponse;\n  onClose?: () => void;\n}\n\nfunction Content({ onClose, totpFactor }: ContentProps) {\n  const securitySettings = useSecuritySettings();\n\n  const [customError, setCustomError] = React.useState<string | null>(null);\n  const totp = hasQrCode(totpFactor)\n    ? totpFactor.authenticationFactor.totp\n    : undefined;\n\n  const verifyTotp = useVerifyTotpFactor({\n    mutation: {\n      onSuccess: ({ success }) => {\n        if (!success) {\n          setCustomError(\"Invalid passcode\");\n        }\n      },\n    },\n  });\n\n  const serverError = verifyTotp.error || customError;\n  const isSuccess = verifyTotp.isSuccess && !serverError;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setCustomError(null);\n\n    const formData = new FormData(event.currentTarget);\n    const otpCode = formData.get(\"otp-code\")?.toString();\n\n    verifyTotp.mutate({\n      data: {\n        authenticationChallengeId: totpFactor?.authenticationChallenge.id ?? \"\",\n        code: otpCode ?? \"\",\n      },\n    });\n  };\n\n  useDialogClose(isSuccess, () => {\n    securitySettings.update(\"Mfa\", true);\n  });\n\n  return (\n    <>\n      <Dialog.Title mb=\"5\">Set up an authenticator app</Dialog.Title>\n\n      <Form.Root onSubmit={handleSubmit}>\n        <Grid columns=\"auto 1fr\" rows=\"repeat(4, auto)\" gapX=\"3\" gapY=\"1\">\n          <Grid\n            rows=\"subgrid\"\n            gridRow=\"span 4\"\n            style={{ placeItems: \"center\" }}\n          >\n            <Marker>1</Marker>\n            <Separator\n              orientation=\"vertical\"\n              size=\"4\"\n              style={{ width: \"2px\" }}\n            />\n            <Marker>2</Marker>\n            <div />\n          </Grid>\n\n          <Grid rows=\"subgrid\" gridRow=\"span 4\">\n            <Text as=\"p\" size=\"3\" weight=\"bold\">\n              Scan the QR code\n            </Text>\n            <Flex direction=\"column\" gap=\"1\">\n              <Text as=\"p\" size=\"2\">\n                Use an authenticator app like{\" \"}\n                <Link\n                  href=\"https://1password.com/\"\n                  rel=\"noopener noreferrer\"\n                  target=\"_blank\"\n                >\n                  1Password\n                </Link>\n                ,{\" \"}\n                <Link\n                  href=\"https://apps.apple.com/us/app/google-authenticator/id388497605\"\n                  rel=\"noopener noreferrer\"\n                  target=\"_blank\"\n                >\n                  Google Authenticator\n                </Link>\n                ,{\" \"}\n                <Link\n                  href=\"https://authy.com/\"\n                  rel=\"noopener noreferrer\"\n                  target=\"_blank\"\n                >\n                  Authy\n                </Link>\n                , or{\" \"}\n                <Link\n                  href=\"https://www.microsoft.com/en-gb/security/mobile-authenticator-app\"\n                  rel=\"noopener noreferrer\"\n                  target=\"_blank\"\n                >\n                  Microsoft Authenticator\n                </Link>{\" \"}\n                to scan the QR code below.\n              </Text>\n              <Flex align=\"center\" gap=\"5\" my=\"5\">\n                <Grid\n                  position=\"relative\"\n                  width=\"160px\"\n                  height=\"160px\"\n                  p=\"2\"\n                  style={{\n                    border: \"1px solid var(--gray-7)\",\n                    borderRadius: \"var(--radius-4)\",\n                    background: \"var(--gray-2)\",\n                    overflow: \"hidden\",\n                  }}\n                >\n                  {totp?.qr_code && (\n                    <Box asChild width=\"100%\" height=\"auto\">\n                      <img\n                        alt=\"Scan this QR code to enroll\"\n                        aria-describedby=\"secret-note\"\n                        height=\"160\"\n                        src={totp.qr_code}\n                        style={{ userSelect: \"none\", background: \"white\" }}\n                        width=\"160\"\n                      />\n                    </Box>\n                  )}\n                </Grid>\n\n                <Flex direction=\"column\" gap=\"1\" align=\"start\">\n                  <Text color=\"gray\" id=\"secret-note\" size=\"2\">\n                    Can‘t scan the code?{\" \"}\n                  </Text>\n\n                  <SecretDialog setupKey={totp?.secret ?? \"\"}>\n                    <SecondaryButton\n                      size=\"1\"\n                      disabled={verifyTotp.isPending || isSuccess}\n                    >\n                      View setup key\n                    </SecondaryButton>\n                  </SecretDialog>\n                </Flex>\n              </Flex>\n            </Flex>\n            <Text as=\"p\" size=\"3\" weight=\"bold\">\n              Get verification passcode\n            </Text>\n            <Flex direction=\"column\" gap=\"4\">\n              <Text as=\"p\" size=\"2\">\n                Enter the 6-digit passcode from your authenticator app.\n              </Text>\n\n              <Flex direction=\"column\" gap=\"2\">\n                <Otp.Root\n                  autoSubmit\n                  gap=\"3\"\n                  justify=\"start\"\n                  name=\"otp-code\"\n                  rows=\"48px\"\n                  columns=\"repeat(6, 48px)\"\n                  readOnly={verifyTotp.isPending || isSuccess}\n                >\n                  <Otp.Input required autoFocus autoComplete=\"off\" />\n                  <Otp.Input required />\n                  <Otp.Input required />\n                  <Otp.Input required />\n                  <Otp.Input required />\n                  <Otp.Input required />\n                </Otp.Root>\n\n                {serverError && (\n                  <Text size=\"2\" color=\"red\">\n                    {getMutationErrorMessage(serverError)}\n                  </Text>\n                )}\n              </Flex>\n            </Flex>\n          </Grid>\n        </Grid>\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <SecondaryButton disabled={verifyTotp.isPending || isSuccess}>\n              Cancel\n            </SecondaryButton>\n          </Dialog.Close>\n\n          <SaveButton\n            asChild\n            loading={verifyTotp.isPending}\n            done={isSuccess}\n            onDone={onClose}\n          >\n            <PrimaryButton type=\"submit\">Confirm</PrimaryButton>\n          </SaveButton>\n        </Flex>\n      </Form.Root>\n\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(serverError)}\n        </section>\n      </VisuallyHidden>\n    </>\n  );\n}\n\ninterface SecretDialogProps extends React.PropsWithChildren {\n  setupKey: string;\n}\n\nfunction SecretDialog({ children, setupKey }: SecretDialogProps) {\n  return (\n    <Dialog.Root>\n      <Dialog.Trigger>{children}</Dialog.Trigger>\n      <Dialog.Content\n        maxWidth=\"90vw\"\n        size={{ initial: \"3\", sm: \"4\" }}\n        minWidth=\"300px\"\n        width=\"fit-content\"\n      >\n        <Dialog.Title size=\"2\" weight=\"regular\">\n          Your setup key\n        </Dialog.Title>\n        <Dialog.Description>\n          <Text size=\"6\">\n            <Code variant=\"ghost\" style={{ letterSpacing: \"0.15rem\" }}>\n              {setupKey}\n            </Code>\n          </Text>\n        </Dialog.Description>\n\n        <Flex align=\"center\" gap=\"3\" justify=\"end\" mt=\"5\">\n          <Dialog.Close>\n            <CopyButton asChild value={setupKey}>\n              <PrimaryButton>Copy and close</PrimaryButton>\n            </CopyButton>\n          </Dialog.Close>\n        </Flex>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  let message = \"Something went wrong, please try again\";\n\n  if (typeof error === \"string\") {\n    message = error;\n  }\n\n  if (error instanceof Error) {\n    message = error.message;\n  }\n\n  if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    message = error.message;\n  }\n\n  if (message === \"Invalid passcode\") {\n    message = \"Invalid passcode, please try again\";\n  }\n\n  return message;\n}\n\nfunction hasQrCode(\n  response?: CreateTotpFactorResponse,\n): response is CreateTotpFactorResponse & {\n  authenticationFactor: {\n    totp: NonNullable<CreateTotpFactorResponseAuthenticationFactorAllOfTotpAnyOf>;\n  };\n} {\n  const totp = response?.authenticationFactor.totp;\n  return totp != null && \"qr_code\" in totp;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/add-mfa-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Box,\n  Code,\n  Dialog,\n  Flex,\n  Grid,\n  Link,\n  Separator,\n  Text,\n  VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport * as Otp from \"./otp-input.js\";\nimport { DialogContent, PrimaryButton, SecondaryButton } from \"./elements.js\";\nimport {\n  CreateTotpFactorResponse,\n  CreateTotpFactorResponseAuthenticationFactorAllOfTotpAnyOf,\n  useCreateTotpFactor,\n  useVerifyTotpFactor,\n} from \"../api/endpoint.js\";\nimport { useElevatedAccessToken } from \"../api/api-provider.js\";\nimport * as Form from \"@radix-ui/react-form\";\nimport { Marker } from \"./marker.js\";\nimport { CopyButton } from \"./copy-button.js\";\nimport { useSecuritySettings } from \"./use-security-settings.js\";\nimport { ElevatedAccess } from \"./elevated-access.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { useDialogClose } from \"./use-dialog-close.js\";\n\ninterface AddMfaDialogProps extends Dialog.RootProps {\n  children?: ReactNode;\n  onSuccess?: () => void;\n}\n\nexport function AddMfaDialog({\n  children,\n  onSuccess,\n  ...props\n}: AddMfaDialogProps) {\n  const [open, setOpen] = React.useState(false);\n  const [manuallyTriggered, setManuallyTriggered] = React.useState(false);\n  const { elevatedAccess } = useElevatedAccessToken();\n  const createAuthFactor = useCreateTotpFactor();\n\n  const handleVerified = async () => {\n    await createAuthFactor.mutateAsync(undefined);\n  };\n\n  const onTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    if (elevatedAccess && !createAuthFactor.data) {\n      event.preventDefault();\n      setManuallyTriggered(true);\n      createAuthFactor.mutate(undefined, {\n        onSuccess: () => {\n          setOpen(true);\n        },\n      });\n    } else {\n      setManuallyTriggered(false);\n    }\n  };\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  return (\n    <Dialog.Root\n      {...props}\n      open={props.open || open}\n      onOpenChange={props.onOpenChange || setOpen}\n    >\n      <Dialog.Trigger\n        onClick={onTriggerClick}\n        // @ts-ignore I've to find a way to pass the loading state to the trigger\n        loading={manuallyTriggered && createAuthFactor.isPending}\n      >\n        {children}\n      </Dialog.Trigger>\n\n      <DialogContent maxWidth=\"480px\">\n        <ElevatedAccess onVerified={handleVerified}>\n          <Content onClose={handleClose} totpFactor={createAuthFactor.data} />\n        </ElevatedAccess>\n      </DialogContent>\n    </Dialog.Root>\n  );\n}\n\ninterface ContentProps {\n  totpFactor?: CreateTotpFactorResponse;\n  onClose?: () => void;\n}\n\nfunction Content({ onClose, totpFactor }: ContentProps) {\n  const securitySettings = useSecuritySettings();\n\n  const [customError, setCustomError] = React.useState<string | null>(null);\n  const totp = hasQrCode(totpFactor)\n    ? totpFactor.authenticationFactor.totp\n    : undefined;\n\n  const verifyTotp = useVerifyTotpFactor({\n    mutation: {\n      onSuccess: ({ success }) => {\n        if (!success) {\n          setCustomError(\"Invalid passcode\");\n        }\n      },\n    },\n  });\n\n  const serverError = verifyTotp.error || customError;\n  const isSuccess = verifyTotp.isSuccess && !serverError;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setCustomError(null);\n\n    const formData = new FormData(event.currentTarget);\n    const otpCode = formData.get(\"otp-code\")?.toString();\n\n    verifyTotp.mutate({\n      data: {\n        authenticationChallengeId: totpFactor?.authenticationChallenge.id ?? \"\",\n        code: otpCode ?? \"\",\n      },\n    });\n  };\n\n  useDialogClose(isSuccess, () => {\n    securitySettings.update(\"Mfa\", true);\n  });\n\n  return (\n    <>\n      <Dialog.Title mb=\"5\">Set up an authenticator app</Dialog.Title>\n\n      <Form.Root onSubmit={handleSubmit}>\n        <Grid columns=\"auto 1fr\" rows=\"repeat(4, auto)\" gapX=\"3\" gapY=\"1\">\n          <Grid\n            rows=\"subgrid\"\n            gridRow=\"span 4\"\n            style={{ placeItems: \"center\" }}\n          >\n            <Marker>1</Marker>\n            <Separator\n              orientation=\"vertical\"\n              size=\"4\"\n              style={{ width: \"2px\" }}\n            />\n            <Marker>2</Marker>\n            <div />\n          </Grid>\n\n          <Grid rows=\"subgrid\" gridRow=\"span 4\">\n            <Text as=\"p\" size=\"3\" weight=\"bold\">\n              Scan the QR code\n            </Text>\n            <Flex direction=\"column\" gap=\"1\">\n              <Text as=\"p\" size=\"2\">\n                Use an authenticator app like{\" \"}\n                <Link\n                  href=\"https://1password.com/\"\n                  rel=\"noopener noreferrer\"\n                  target=\"_blank\"\n                >\n                  1Password\n                </Link>\n                ,{\" \"}\n                <Link\n                  href=\"https://apps.apple.com/us/app/google-authenticator/id388497605\"\n                  rel=\"noopener noreferrer\"\n                  target=\"_blank\"\n                >\n                  Google Authenticator\n                </Link>\n                ,{\" \"}\n                <Link\n                  href=\"https://authy.com/\"\n                  rel=\"noopener noreferrer\"\n                  target=\"_blank\"\n                >\n                  Authy\n                </Link>\n                , or{\" \"}\n                <Link\n                  href=\"https://www.microsoft.com/en-gb/security/mobile-authenticator-app\"\n                  rel=\"noopener noreferrer\"\n                  target=\"_blank\"\n                >\n                  Microsoft Authenticator\n                </Link>{\" \"}\n                to scan the QR code below.\n              </Text>\n              <Flex align=\"center\" gap=\"5\" my=\"5\">\n                <Grid\n                  position=\"relative\"\n                  width=\"160px\"\n                  height=\"160px\"\n                  p=\"2\"\n                  style={{\n                    border: \"1px solid var(--gray-7)\",\n                    borderRadius: \"var(--radius-4)\",\n                    background: \"var(--gray-2)\",\n                    overflow: \"hidden\",\n                  }}\n                >\n                  {totp?.qr_code && (\n                    <Box asChild width=\"100%\" height=\"auto\">\n                      <img\n                        alt=\"Scan this QR code to enroll\"\n                        aria-describedby=\"secret-note\"\n                        height=\"160\"\n                        src={totp.qr_code}\n                        style={{ userSelect: \"none\", background: \"white\" }}\n                        width=\"160\"\n                      />\n                    </Box>\n                  )}\n                </Grid>\n\n                <Flex direction=\"column\" gap=\"1\" align=\"start\">\n                  <Text color=\"gray\" id=\"secret-note\" size=\"2\">\n                    Can‘t scan the code?{\" \"}\n                  </Text>\n\n                  <SecretDialog setupKey={totp?.secret ?? \"\"}>\n                    <SecondaryButton\n                      size=\"1\"\n                      disabled={verifyTotp.isPending || isSuccess}\n                    >\n                      View setup key\n                    </SecondaryButton>\n                  </SecretDialog>\n                </Flex>\n              </Flex>\n            </Flex>\n            <Text as=\"p\" size=\"3\" weight=\"bold\">\n              Get verification passcode\n            </Text>\n            <Flex direction=\"column\" gap=\"4\">\n              <Text as=\"p\" size=\"2\">\n                Enter the 6-digit passcode from your authenticator app.\n              </Text>\n\n              <Flex direction=\"column\" gap=\"2\">\n                <Otp.Root\n                  autoSubmit\n                  gap=\"3\"\n                  justify=\"start\"\n                  name=\"otp-code\"\n                  rows=\"48px\"\n                  columns=\"repeat(6, 48px)\"\n                  readOnly={verifyTotp.isPending || isSuccess}\n                >\n                  <Otp.Input required autoFocus autoComplete=\"off\" />\n                  <Otp.Input required />\n                  <Otp.Input required />\n                  <Otp.Input required />\n                  <Otp.Input required />\n                  <Otp.Input required />\n                </Otp.Root>\n\n                {serverError && (\n                  <Text size=\"2\" color=\"red\">\n                    {getMutationErrorMessage(serverError)}\n                  </Text>\n                )}\n              </Flex>\n            </Flex>\n          </Grid>\n        </Grid>\n\n        <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <SecondaryButton disabled={verifyTotp.isPending || isSuccess}>\n              Cancel\n            </SecondaryButton>\n          </Dialog.Close>\n\n          <SaveButton\n            asChild\n            loading={verifyTotp.isPending}\n            done={isSuccess}\n            onDone={onClose}\n          >\n            <PrimaryButton type=\"submit\">Confirm</PrimaryButton>\n          </SaveButton>\n        </Flex>\n      </Form.Root>\n\n      {/* mirror errors in a live region */}\n      <VisuallyHidden asChild>\n        <section aria-live=\"polite\">\n          {getMutationErrorMessage(serverError)}\n        </section>\n      </VisuallyHidden>\n    </>\n  );\n}\n\ninterface SecretDialogProps extends React.PropsWithChildren {\n  setupKey: string;\n}\n\nfunction SecretDialog({ children, setupKey }: SecretDialogProps) {\n  return (\n    <Dialog.Root>\n      <Dialog.Trigger>{children}</Dialog.Trigger>\n      <DialogContent\n        maxWidth=\"90vw\"\n        size={{ initial: \"3\", sm: \"4\" }}\n        minWidth=\"300px\"\n        width=\"fit-content\"\n      >\n        <Dialog.Title size=\"2\" weight=\"regular\">\n          Your setup key\n        </Dialog.Title>\n        <Dialog.Description>\n          <Text size=\"6\">\n            <Code variant=\"ghost\" style={{ letterSpacing: \"0.15rem\" }}>\n              {setupKey}\n            </Code>\n          </Text>\n        </Dialog.Description>\n\n        <Flex align=\"center\" gap=\"3\" justify=\"end\" mt=\"5\">\n          <Dialog.Close>\n            <CopyButton asChild value={setupKey}>\n              <PrimaryButton>Copy and close</PrimaryButton>\n            </CopyButton>\n          </Dialog.Close>\n        </Flex>\n      </DialogContent>\n    </Dialog.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  let message = \"Something went wrong, please try again\";\n\n  if (typeof error === \"string\") {\n    message = error;\n  }\n\n  if (error instanceof Error) {\n    message = error.message;\n  }\n\n  if (\n    typeof error === \"object\" &&\n    error !== null &&\n    \"message\" in error &&\n    typeof error.message === \"string\"\n  ) {\n    message = error.message;\n  }\n\n  if (message === \"Invalid passcode\") {\n    message = \"Invalid passcode, please try again\";\n  }\n\n  return message;\n}\n\nfunction hasQrCode(\n  response?: CreateTotpFactorResponse,\n): response is CreateTotpFactorResponse & {\n  authenticationFactor: {\n    totp: NonNullable<CreateTotpFactorResponseAuthenticationFactorAllOfTotpAnyOf>;\n  };\n} {\n  const totp = response?.authenticationFactor.totp;\n  return totp != null && \"qr_code\" in totp;\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/lib/admin-portal-domain-verification.cjs

@@ -40,18 +40,19 @@ var import_elements = require("./elements.js");
 var import_icon_panel = require("./icon-panel.js");
 var import_generic_error = require("./generic-error.js");
 var import_react_icons = require("@radix-ui/react-icons");
-var CardList = __toESM(require("../card-list.js"), 1);
+var CardList = __toESM(require("./card-list.js"), 1);
 var import_domain_item = require("./domain-item.js");
-var import_clsx = __toESM(require("clsx"), 1);
+var import_utils = require("./utils.js");
 const AdminPortalDomainVerification = ({
   organizationDomains,
   onAddDomain,
   onDeleteDomain,
   onReverifyDomain,
-  isPending = false
+  isPending = false,
+  ...domProps
 }) => {
   if (organizationDomains.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", children: "You haven't added any verified domains yet." }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_themes.Button,
@@ -74,8 +75,7 @@ const AdminPortalDomainVerification = ({
     {
       direction: "column",
       gap: "4",
-      className: (0, import_clsx.default)("woswidgets-widget"),
-      "data-woswidgets-widget-id": "admin-portal-domain-verification",
+      ...getWidgetRootDomProps("resolved", domProps),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { children: organizationDomains.map((domain) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_domain_item.DomainItem,
@@ -103,8 +103,8 @@ const AdminPortalDomainVerification = ({
     }
   );
 };
-const AdminPortalDomainVerificationLoading = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
+const AdminPortalDomainVerificationLoading = (domProps) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...getWidgetRootDomProps("loading", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: "Domain name" }) }),
@@ -112,10 +112,16 @@ const AdminPortalDomainVerificationLoading = () => {
     ] })
   ] }) });
 };
-function AdminPortalDomainVerificationError({
-  error
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_generic_error.GenericError, { error }) });
+const AdminPortalDomainVerificationError = ({ error, ...domProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_generic_error.GenericError, { error }) });
+};
+function getWidgetRootDomProps(state, domProps) {
+  return (0, import_utils.getDomProps)({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "admin-portal-domain-verification",
+    widgetState: state
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/lib/admin-portal-domain-verification.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/admin-portal-domain-verification.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { ExternalLinkIcon } from \"@radix-ui/react-icons\";\nimport * as CardList from \"../card-list.js\";\nimport { OrganizationDomain } from \"../api/endpoint.js\";\nimport { DomainItem } from \"./domain-item.js\";\n\nimport clsx from \"clsx\";\n\ninterface AdminPortalDomainVerificationProps {\n  organizationDomains: OrganizationDomain[];\n  onAddDomain: () => void;\n  onDeleteDomain: (domainId: string) => void;\n  onReverifyDomain: (domainId: string) => void;\n  isPending?: boolean;\n}\n\nexport const AdminPortalDomainVerification = ({\n  organizationDomains,\n  onAddDomain,\n  onDeleteDomain,\n  onReverifyDomain,\n  isPending = false,\n}: AdminPortalDomainVerificationProps) => {\n  if (organizationDomains.length === 0) {\n    return (\n      <Card size=\"2\">\n        <Flex direction=\"row\" justify=\"between\" align=\"center\">\n          <Text size=\"2\" color=\"gray\">\n            You haven't added any verified domains yet.\n          </Text>\n          <Button\n            variant=\"outline\"\n            color=\"gray\"\n            loading={isPending}\n            disabled={isPending}\n            onClick={onAddDomain}\n          >\n            Add domain <ExternalLinkIcon />\n          </Button>\n        </Flex>\n      </Card>\n    );\n  }\n\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"admin-portal-domain-verification\"\n    >\n      <CardList.Root>\n        {organizationDomains.map((domain) => (\n          <CardList.Item key={domain.id}>\n            <DomainItem\n              domain={domain}\n              onDeleteDomain={onDeleteDomain}\n              onReverifyDomain={onReverifyDomain}\n            />\n          </CardList.Item>\n        ))}\n      </CardList.Root>\n\n      <Box>\n        <Button\n          loading={isPending}\n          disabled={isPending}\n          color=\"gray\"\n          variant=\"outline\"\n          onClick={onAddDomain}\n        >\n          Add domain <ExternalLinkIcon />\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport const AdminPortalDomainVerificationLoading: React.FC = () => {\n  return (\n    <Card size=\"2\">\n      <Flex gap=\"4\" align=\"center\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>Domain name</Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>Added recently</Skeleton>\n          </Text>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nexport function AdminPortalDomainVerificationError({\n  error,\n}: {\n  error: unknown;\n}) {\n  return (\n    <Card size=\"2\">\n      <GenericError error={error} />\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCU;AA9BV,oBAA8C;AAC9C,sBAAyB;AACzB,wBAA0B;AAC1B,2BAA6B;AAC7B,yBAAiC;AACjC,eAA0B;AAE1B,yBAA2B;AAE3B,kBAAiB;AAUV,MAAM,gCAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,MAA0C;AACxC,MAAI,oBAAoB,WAAW,GAAG;AACpC,WACE,4CAAC,sBAAK,MAAK,KACT,uDAAC,sBAAK,WAAU,OAAM,SAAQ,WAAU,OAAM,UAC5C;AAAA,kDAAC,sBAAK,MAAK,KAAI,OAAM,QAAO,yDAE5B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,SAAS;AAAA,UACT,UAAU;AAAA,UACV,SAAS;AAAA,UACV;AAAA;AAAA,YACY,4CAAC,uCAAiB;AAAA;AAAA;AAAA,MAC/B;AAAA,OACF,GACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,eAAW,YAAAA,SAAK,mBAAmB;AAAA,MACnC,6BAA0B;AAAA,MAE1B;AAAA,oDAAC,SAAS,MAAT,EACE,8BAAoB,IAAI,CAAC,WACxB,4CAAC,SAAS,MAAT,EACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,KALkB,OAAO,EAM3B,CACD,GACH;AAAA,QAEA,4CAAC,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,SAAS;AAAA,YACV;AAAA;AAAA,cACY,4CAAC,uCAAiB;AAAA;AAAA;AAAA,QAC/B,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,uCAAiD,MAAM;AAClE,SACE,4CAAC,sBAAK,MAAK,KACT,uDAAC,sBAAK,KAAI,KAAI,OAAM,UAClB;AAAA,gDAAC,4BACC,sDAAC,+BAAU,GACb;AAAA,IAEA,6CAAC,sBAAK,WAAU,UACd;AAAA,kDAAC,sBAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,IAAG,QAClD,sDAAC,4BAAS,yBAAW,GACvB;AAAA,MAEA,4CAAC,sBAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAC7B,sDAAC,4BAAS,4BAAc,GAC1B;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAEO,SAAS,mCAAmC;AAAA,EACjD;AACF,GAEG;AACD,SACE,4CAAC,sBAAK,MAAK,KACT,sDAAC,qCAAa,OAAc,GAC9B;AAEJ;","names":["clsx"]}
+{"version":3,"sources":["../../../src/lib/admin-portal-domain-verification.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { ExternalLinkIcon } from \"@radix-ui/react-icons\";\nimport * as CardList from \"./card-list.js\";\nimport { OrganizationDomain } from \"../api/endpoint.js\";\nimport { DomainItem } from \"./domain-item.js\";\nimport { getDomProps } from \"./utils.js\";\nimport type { WidgetRootDomProps, WidgetRootState } from \"./utils.js\";\n\ninterface AdminPortalDomainVerificationProps extends WidgetRootDomProps {\n  organizationDomains: OrganizationDomain[];\n  onAddDomain: () => void;\n  onDeleteDomain: (domainId: string) => void;\n  onReverifyDomain: (domainId: string) => void;\n  isPending?: boolean;\n}\n\nconst AdminPortalDomainVerification = ({\n  organizationDomains,\n  onAddDomain,\n  onDeleteDomain,\n  onReverifyDomain,\n  isPending = false,\n  ...domProps\n}: AdminPortalDomainVerificationProps) => {\n  if (organizationDomains.length === 0) {\n    return (\n      <Card size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n        <Flex direction=\"row\" justify=\"between\" align=\"center\">\n          <Text size=\"2\" color=\"gray\">\n            You haven't added any verified domains yet.\n          </Text>\n          <Button\n            variant=\"outline\"\n            color=\"gray\"\n            loading={isPending}\n            disabled={isPending}\n            onClick={onAddDomain}\n          >\n            Add domain <ExternalLinkIcon />\n          </Button>\n        </Flex>\n      </Card>\n    );\n  }\n\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      {...getWidgetRootDomProps(\"resolved\", domProps)}\n    >\n      <CardList.Root>\n        {organizationDomains.map((domain) => (\n          <CardList.Item key={domain.id}>\n            <DomainItem\n              domain={domain}\n              onDeleteDomain={onDeleteDomain}\n              onReverifyDomain={onReverifyDomain}\n            />\n          </CardList.Item>\n        ))}\n      </CardList.Root>\n\n      <Box>\n        <Button\n          loading={isPending}\n          disabled={isPending}\n          color=\"gray\"\n          variant=\"outline\"\n          onClick={onAddDomain}\n        >\n          Add domain <ExternalLinkIcon />\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\ninterface AdminPortalDomainVerificationLoadingProps\n  extends WidgetRootDomProps {}\n\nconst AdminPortalDomainVerificationLoading: React.FC<\n  AdminPortalDomainVerificationLoadingProps\n> = (domProps) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", domProps)}>\n      <Flex gap=\"4\" align=\"center\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>Domain name</Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>Added recently</Skeleton>\n          </Text>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\ninterface AdminPortalDomainVerificationErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst AdminPortalDomainVerificationError: React.FC<\n  AdminPortalDomainVerificationErrorProps\n> = ({ error, ...domProps }) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"admin-portal-domain-verification\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  AdminPortalDomainVerificationProps,\n  AdminPortalDomainVerificationLoadingProps,\n  AdminPortalDomainVerificationErrorProps,\n};\nexport {\n  AdminPortalDomainVerification,\n  AdminPortalDomainVerificationLoading,\n  AdminPortalDomainVerificationError,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCU;AA/BV,oBAA8C;AAC9C,sBAAyB;AACzB,wBAA0B;AAC1B,2BAA6B;AAC7B,yBAAiC;AACjC,eAA0B;AAE1B,yBAA2B;AAC3B,mBAA4B;AAW5B,MAAM,gCAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,MAA0C;AACxC,MAAI,oBAAoB,WAAW,GAAG;AACpC,WACE,4CAAC,sBAAK,MAAK,KAAK,GAAG,sBAAsB,YAAY,QAAQ,GAC3D,uDAAC,sBAAK,WAAU,OAAM,SAAQ,WAAU,OAAM,UAC5C;AAAA,kDAAC,sBAAK,MAAK,KAAI,OAAM,QAAO,yDAE5B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,SAAS;AAAA,UACT,UAAU;AAAA,UACV,SAAS;AAAA,UACV;AAAA;AAAA,YACY,4CAAC,uCAAiB;AAAA;AAAA;AAAA,MAC/B;AAAA,OACF,GACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG,sBAAsB,YAAY,QAAQ;AAAA,MAE9C;AAAA,oDAAC,SAAS,MAAT,EACE,8BAAoB,IAAI,CAAC,WACxB,4CAAC,SAAS,MAAT,EACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,KALkB,OAAO,EAM3B,CACD,GACH;AAAA,QAEA,4CAAC,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,SAAS;AAAA,YACV;AAAA;AAAA,cACY,4CAAC,uCAAiB;AAAA;AAAA;AAAA,QAC/B,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAKA,MAAM,uCAEF,CAAC,aAAa;AAChB,SACE,4CAAC,sBAAK,MAAK,KAAK,GAAG,sBAAsB,WAAW,QAAQ,GAC1D,uDAAC,sBAAK,KAAI,KAAI,OAAM,UAClB;AAAA,gDAAC,4BACC,sDAAC,+BAAU,GACb;AAAA,IAEA,6CAAC,sBAAK,WAAU,UACd;AAAA,kDAAC,sBAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,IAAG,QAClD,sDAAC,4BAAS,yBAAW,GACvB;AAAA,MAEA,4CAAC,sBAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAC7B,sDAAC,4BAAS,4BAAc,GAC1B;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAMA,MAAM,qCAEF,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM;AAC9B,SACE,4CAAC,sBAAK,MAAK,KAAK,GAAG,sBAAsB,SAAS,QAAQ,GACxD,sDAAC,qCAAa,OAAc,GAC9B;AAEJ;AAEA,SAAS,sBACP,OACA,UACA;AACA,aAAO,0BAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}

package/dist/cjs/lib/admin-portal-domain-verification.d.cts

@@ -1,20 +1,24 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OrganizationDomain } from '../api/endpoint.cjs';
+import { WidgetRootDomProps } from './utils.cjs';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.cjs';
 
-interface AdminPortalDomainVerificationProps {
+interface AdminPortalDomainVerificationProps extends WidgetRootDomProps {
     organizationDomains: OrganizationDomain[];
     onAddDomain: () => void;
     onDeleteDomain: (domainId: string) => void;
     onReverifyDomain: (domainId: string) => void;
     isPending?: boolean;
 }
-declare const AdminPortalDomainVerification: ({ organizationDomains, onAddDomain, onDeleteDomain, onReverifyDomain, isPending, }: AdminPortalDomainVerificationProps) => react_jsx_runtime.JSX.Element;
-declare const AdminPortalDomainVerificationLoading: React.FC;
-declare function AdminPortalDomainVerificationError({ error, }: {
+declare const AdminPortalDomainVerification: ({ organizationDomains, onAddDomain, onDeleteDomain, onReverifyDomain, isPending, ...domProps }: AdminPortalDomainVerificationProps) => react_jsx_runtime.JSX.Element;
+interface AdminPortalDomainVerificationLoadingProps extends WidgetRootDomProps {
+}
+declare const AdminPortalDomainVerificationLoading: React.FC<AdminPortalDomainVerificationLoadingProps>;
+interface AdminPortalDomainVerificationErrorProps extends WidgetRootDomProps {
     error: unknown;
-}): react_jsx_runtime.JSX.Element;
+}
+declare const AdminPortalDomainVerificationError: React.FC<AdminPortalDomainVerificationErrorProps>;
 
-export { AdminPortalDomainVerification, AdminPortalDomainVerificationError, AdminPortalDomainVerificationLoading };
+export { AdminPortalDomainVerification, AdminPortalDomainVerificationError, type AdminPortalDomainVerificationErrorProps, AdminPortalDomainVerificationLoading, type AdminPortalDomainVerificationLoadingProps, type AdminPortalDomainVerificationProps };

package/dist/cjs/lib/admin-portal-sso-connection.cjs

@@ -41,13 +41,12 @@ var import_themes = require("@radix-ui/themes");
 var import_elements = require("./elements.js");
 var import_icon_panel = require("./icon-panel.js");
 var import_react_icons = require("@radix-ui/react-icons");
-var CardList = __toESM(require("../card-list.js"), 1);
+var CardList = __toESM(require("./card-list.js"), 1);
 var import_provider_icon = require("./provider-icon.js");
 var import_identity_providers = require("./identity-providers.js");
 var import_status = require("./status.js");
 var import_utils = require("./utils.js");
-var import_clsx = __toESM(require("clsx"), 1);
-var import_errors = require("./errors.js");
+var import_generic_error = require("./generic-error.js");
 const AdminPortalSsoConnectionContext = React.createContext(null);
 AdminPortalSsoConnectionContext.displayName = "AdminPortalSsoConnectionContext";
 function useAdminPortalSsoConnectionContext() {
@@ -65,84 +64,77 @@ const AdminPortalSsoConnection = ({
   identityProvider,
   expiryDate,
   lastSession,
-  adminPortalOpenButton
+  adminPortalOpenButton,
+  ...domProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    CardList.Root,
-    {
-      size: "2",
-      className: (0, import_clsx.default)("woswidgets-widget"),
-      "data-woswidgets-widget-id": "admin-portal-sso-connection",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AdminPortalSsoConnectionContext.Provider, { value: { connectionStatus }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: (() => {
-          if (connectionStatus === "NotConfigured") {
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", ml: "2", children: "You haven\u2019t set up Single Sign-On yet." }),
-              adminPortalOpenButton
-            ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Root, { size: "2", ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AdminPortalSsoConnectionContext.Provider, { value: { connectionStatus }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: (() => {
+      if (connectionStatus === "NotConfigured") {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", children: "You haven\u2019t set up Single Sign-On yet." }),
+          adminPortalOpenButton
+        ] });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SessionInfo,
+          {
+            connectionStatus,
+            identityProvider,
+            lastSession,
+            currentDate
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              SessionInfo,
-              {
-                connectionStatus,
-                identityProvider,
-                lastSession,
-                currentDate
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "5", align: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SsoStatus, { status: connectionStatus }),
+          adminPortalOpenButton
+        ] })
+      ] });
+    })() }) }),
+    connectionStatus === "Expired" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "start", gap: "2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { asChild: true, mt: "2px", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.InfoCircledIcon, { color: "gray" }) }),
+      (() => {
+        if (connectionStatus === "Expired") {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", color: "gray", children: [
+            (() => {
+              if (!expiryDate) {
+                return "The SAML response signing certificate has expired";
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "5", align: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SsoStatus, { status: connectionStatus }),
-              adminPortalOpenButton
-            ] })
-          ] });
-        })() }) }),
-        connectionStatus === "Expired" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardList.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { align: "start", gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Box, { asChild: true, mt: "2px", flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.InfoCircledIcon, { color: "gray" }) }),
-          (() => {
-            if (connectionStatus === "Expired") {
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", color: "gray", children: [
-                (() => {
-                  if (!expiryDate) {
-                    return "The SAML response signing certificate has expired";
-                  }
-                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                    "The SAML response signing certificate expired on",
-                    " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
-                      month: "long",
-                      day: "numeric",
-                      year: "numeric"
-                    }) })
-                  ] });
-                })(),
-                ". Users won\u2019t be able to sign-in to the application until the certificate is renewed."
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                "The SAML response signing certificate expired on",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric"
+                }) })
               ] });
-            }
-            if (connectionStatus === "Expiring") {
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", color: "gray", children: [
-                (() => {
-                  if (!expiryDate) {
-                    return "The SAML response signing certificate is expiring soon";
-                  }
-                  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                    "The SAML response signing certificate will expire on",
-                    " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
-                      month: "long",
-                      day: "numeric",
-                      year: "numeric"
-                    }) })
-                  ] });
-                })(),
-                ". When expired, users won\u2019t be able to sign-in."
+            })(),
+            ". Users won\u2019t be able to sign-in to the application until the certificate is renewed."
+          ] });
+        }
+        if (connectionStatus === "Expiring") {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Text, { size: "2", color: "gray", children: [
+            (() => {
+              if (!expiryDate) {
+                return "The SAML response signing certificate is expiring soon";
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                "The SAML response signing certificate will expire on",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric"
+                }) })
               ] });
-            }
-          })()
-        ] }) })
-      ] })
-    }
-  );
+            })(),
+            ". When expired, users won\u2019t be able to sign-in."
+          ] });
+        }
+      })()
+    ] }) })
+  ] }) });
 };
 function SsoStatus({
   status
@@ -227,8 +219,8 @@ function AdminPortalOpenButton({
     }
   );
 }
-const AdminPortalSsoConnectionLoading = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
+const AdminPortalSsoConnectionLoading = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_panel.IconPanel, { color: "panel", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_provider_icon.ProviderIcon, { provider: "okta", size: "2" }) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", my: "-4px", children: [
@@ -245,35 +237,12 @@ const AdminPortalSsoConnectionLoading = () => {
     ] })
   ] }) });
 };
-function AdminPortalSsoConnectionError({ error }) {
+const AdminPortalSsoConnectionError = ({ error, ...domProps }) => {
   React.useEffect(() => {
     console.error(error);
   }, [error]);
-  const { heading, message } = (() => {
-    if (error instanceof import_errors.FetchError) {
-      return {
-        heading: "Error fetching data",
-        message: "An error occurred. You may need to configure CORS in the WorkOS Dashboard. Contact your organization admin for support."
-      };
-    }
-    if (error instanceof import_errors.NoAuthTokenError) {
-      return {
-        heading: "Error fetching data",
-        message: "Authorization error. You likely forgot to provide an authorization token to the Users Management Widget."
-      };
-    }
-    if (error instanceof import_errors.ApiError && error.status === 404) {
-      return {
-        heading: "Error fetching data",
-        message: "Authorization error. Contact your organization admin for support."
-      };
-    }
-    return {
-      heading: "Unknown error",
-      message: "An unexpected error occurred. Please try refreshing the page, or contact your organization admin for support."
-    };
-  })();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
+  const { heading, message } = (0, import_generic_error.getErrorMessage)(error);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { gap: "4", align: "center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_themes.Flex,
       {
@@ -284,7 +253,8 @@ function AdminPortalSsoConnectionError({ error }) {
         style: {
           borderRadius: "9999px",
           backgroundColor: "var(--red-a4)",
-          color: "var(--red-a11)"
+          color: "var(--red-a11)",
+          flexShrink: 0
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.Cross2Icon, { width: "18px", height: "18px" })
       }
@@ -294,7 +264,7 @@ function AdminPortalSsoConnectionError({ error }) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { size: "2", color: "gray", children: message })
     ] })
   ] }) }) });
-}
+};
 function getRelativeTimeString(currentDate, lastSession) {
   if (!currentDate || !lastSession) {
     return null;
@@ -324,6 +294,14 @@ function getRelativeTimeString(currentDate, lastSession) {
   }
   return rtf.format(diffYears, "year");
 }
+function getWidgetRootDomProps(state, domProps) {
+  return (0, import_utils.getDomProps)({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "admin-portal-sso-connection",
+    widgetState: state
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AdminPortalOpenButton,

package/dist/cjs/lib/admin-portal-sso-connection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/admin-portal-sso-connection.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport {\n  ExternalLinkIcon,\n  InfoCircledIcon,\n  Cross2Icon,\n} from \"@radix-ui/react-icons\";\nimport * as CardList from \"../card-list.js\";\nimport { ProviderIcon } from \"./provider-icon.js\";\nimport {\n  getIdentityProviderName,\n  type IdentityProvider,\n} from \"./identity-providers.js\";\nimport { Status } from \"./status.js\";\nimport { unreachable } from \"./utils.js\";\nimport clsx from \"clsx\";\n\nimport { ApiError, FetchError, NoAuthTokenError } from \"./errors.js\";\n\ninterface NotConfiguredProps {\n  connectionStatus: \"NotConfigured\";\n  identityProvider?: never;\n  expiryDate?: never;\n}\n\ninterface InactiveProps {\n  connectionStatus: \"Inactive\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface ActiveProps {\n  connectionStatus: \"Active\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface RequiresActionProps {\n  connectionStatus: \"Expired\" | \"Expiring\";\n  identityProvider: IdentityProvider;\n  expiryDate: Date | null;\n}\n\nexport type AdminPortalSsoConnectionStatusProps =\n  | NotConfiguredProps\n  | InactiveProps\n  | ActiveProps\n  | RequiresActionProps;\n\nexport type AdminPortalSsoConnectionProps =\n  AdminPortalSsoConnectionStatusProps & {\n    currentDate: Date | null;\n\n    lastSession: Date | null;\n    adminPortalOpenButton: React.ReactNode;\n  };\n\ninterface AdminPortalSsoConnectionContextValue {\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}\n\nconst AdminPortalSsoConnectionContext =\n  React.createContext<AdminPortalSsoConnectionContextValue | null>(null);\nAdminPortalSsoConnectionContext.displayName = \"AdminPortalSsoConnectionContext\";\n\nfunction useAdminPortalSsoConnectionContext() {\n  const context = React.useContext(AdminPortalSsoConnectionContext);\n  if (!context) {\n    throw new Error(\n      \"useAdminPortalSsoConnectionContext must be used within a AdminPortalSsoConnectionContext provider\",\n    );\n  }\n  return context;\n}\n\nexport const AdminPortalSsoConnection = ({\n  currentDate,\n  connectionStatus,\n  identityProvider,\n  expiryDate,\n  lastSession,\n  adminPortalOpenButton,\n}: AdminPortalSsoConnectionProps) => {\n  return (\n    <CardList.Root\n      size=\"2\"\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"admin-portal-sso-connection\"\n    >\n      <AdminPortalSsoConnectionContext.Provider value={{ connectionStatus }}>\n        <CardList.Item>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            {(() => {\n              if (connectionStatus === \"NotConfigured\") {\n                return (\n                  <>\n                    <Text size=\"2\" color=\"gray\" ml=\"2\">\n                      You haven’t set up Single Sign-On yet.\n                    </Text>\n                    {adminPortalOpenButton}\n                  </>\n                );\n              }\n\n              return (\n                <>\n                  <SessionInfo\n                    connectionStatus={connectionStatus}\n                    identityProvider={identityProvider}\n                    lastSession={lastSession}\n                    currentDate={currentDate}\n                  />\n                  <Flex gap=\"5\" align=\"center\">\n                    <SsoStatus status={connectionStatus} />\n                    {adminPortalOpenButton}\n                  </Flex>\n                </>\n              );\n            })()}\n          </Flex>\n        </CardList.Item>\n        {connectionStatus === \"Expired\" && (\n          <CardList.Item>\n            <Flex align=\"start\" gap=\"2\">\n              <Box asChild mt=\"2px\" flexShrink=\"0\">\n                <InfoCircledIcon color=\"gray\" />\n              </Box>\n              {(() => {\n                if (connectionStatus === \"Expired\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return \"The SAML response signing certificate has expired\";\n                        }\n\n                        return (\n                          <>\n                            The SAML response signing certificate expired on{\" \"}\n                            <Text weight=\"bold\" as=\"span\">\n                              {expiryDate?.toLocaleString(\"en-US\", {\n                                month: \"long\",\n                                day: \"numeric\",\n                                year: \"numeric\",\n                              })}\n                            </Text>\n                          </>\n                        );\n                      })()}\n                      . Users won’t be able to sign-in to the application until\n                      the certificate is renewed.\n                    </Text>\n                  );\n                }\n\n                if (connectionStatus === \"Expiring\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return \"The SAML response signing certificate is expiring soon\";\n                        }\n\n                        return (\n                          <>\n                            The SAML response signing certificate will expire on{\" \"}\n                            <Text weight=\"bold\" as=\"span\">\n                              {expiryDate?.toLocaleString(\"en-US\", {\n                                month: \"long\",\n                                day: \"numeric\",\n                                year: \"numeric\",\n                              })}\n                            </Text>\n                          </>\n                        );\n                      })()}\n                      . When expired, users won’t be able to sign-in.\n                    </Text>\n                  );\n                }\n              })()}\n            </Flex>\n          </CardList.Item>\n        )}\n      </AdminPortalSsoConnectionContext.Provider>\n    </CardList.Root>\n  );\n};\n\nfunction SsoStatus({\n  status,\n}: {\n  status: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  if (status === \"NotConfigured\") {\n    return null;\n  }\n\n  if (status === \"Inactive\") {\n    return <Status state=\"waiting\">Setup in progress</Status>;\n  }\n\n  if (status === \"Expired\") {\n    return <Status state=\"error\">Requires action</Status>;\n  }\n\n  if (status === \"Active\" || status === \"Expiring\") {\n    return <Status state=\"success\">Connected</Status>;\n  }\n\n  return unreachable(status);\n}\n\nfunction SessionInfo({\n  currentDate,\n  identityProvider,\n  lastSession,\n  connectionStatus,\n}: {\n  identityProvider: IdentityProvider;\n  lastSession: Date | null;\n  currentDate: Date | null;\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  const relativeTimeString = React.useMemo(() => {\n    if (\n      !lastSession ||\n      !currentDate ||\n      connectionStatus === \"NotConfigured\" ||\n      connectionStatus === \"Inactive\"\n    ) {\n      return null;\n    }\n\n    return getRelativeTimeString(currentDate, lastSession);\n  }, [lastSession, currentDate, connectionStatus]);\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel color=\"panel\">\n        <ProviderIcon provider={identityProvider} size=\"2\" />\n      </IconPanel>\n      {lastSession ? (\n        <Flex direction=\"column\">\n          <Text size=\"2\" weight=\"bold\">\n            {getIdentityProviderName(identityProvider)}\n          </Text>\n          {relativeTimeString ? (\n            <Text color=\"gray\" size=\"2\">\n              Last session {relativeTimeString}\n            </Text>\n          ) : null}\n        </Flex>\n      ) : (\n        <Text size=\"2\" weight=\"bold\">\n          {getIdentityProviderName(identityProvider)}\n        </Text>\n      )}\n    </Flex>\n  );\n}\n\nexport function AdminPortalOpenButton({\n  isPending,\n  href,\n  initConfig,\n}: {\n  isPending: boolean;\n  href: string | null;\n  initConfig: () => void;\n}) {\n  const { connectionStatus } = useAdminPortalSsoConnectionContext();\n  const label = (() => {\n    switch (connectionStatus) {\n      case \"NotConfigured\":\n        return \"Set up SSO\";\n      case \"Inactive\":\n        return \"Continue setup\";\n      case \"Active\":\n      case \"Expiring\":\n      case \"Expired\":\n        return \"Manage\";\n      default:\n        return unreachable(connectionStatus);\n    }\n  })();\n\n  if (href) {\n    return (\n      <Button variant=\"outline\" color=\"gray\" asChild>\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n          {label} <ExternalLinkIcon />\n        </a>\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      variant=\"outline\"\n      color=\"gray\"\n      loading={isPending}\n      disabled={isPending}\n      onClick={initConfig}\n    >\n      {label} <ExternalLinkIcon />\n    </Button>\n  );\n}\n\nexport const AdminPortalSsoConnectionLoading: React.FC = () => {\n  return (\n    <Card size=\"2\">\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Skeleton>\n            <IconPanel color=\"panel\">\n              <ProviderIcon provider=\"okta\" size=\"2\" />\n            </IconPanel>\n          </Skeleton>\n          <Flex direction=\"column\" gap=\"1\" my=\"-4px\">\n            <Skeleton>\n              <Text size=\"1\">Okta</Text>\n            </Skeleton>\n            <Skeleton>\n              <Text size=\"1\">Last session 10 minutes ago</Text>\n            </Skeleton>\n          </Flex>\n        </Flex>\n        <Flex gap=\"5\" align=\"center\">\n          <Skeleton>\n            <Status state=\"error\">Requires action</Status>\n          </Skeleton>\n          <Skeleton>\n            <Button variant=\"outline\" color=\"gray\">\n              Manage <ExternalLinkIcon />\n            </Button>\n          </Skeleton>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nexport function AdminPortalSsoConnectionError({ error }: { error: unknown }) {\n  React.useEffect(() => {\n    console.error(error);\n  }, [error]);\n\n  const { heading, message } = (() => {\n    if (error instanceof FetchError) {\n      return {\n        heading: \"Error fetching data\",\n        message:\n          \"An error occurred. You may need to configure CORS in the WorkOS Dashboard. \" +\n          \"Contact your organization admin for support.\",\n      };\n    }\n\n    if (error instanceof NoAuthTokenError) {\n      return {\n        heading: \"Error fetching data\",\n        message:\n          \"Authorization error. You likely forgot to provide an authorization \" +\n          \"token to the Users Management Widget.\",\n      };\n    }\n\n    if (error instanceof ApiError && error.status === 404) {\n      // The widgets API treats all authorization errors as 404s. If there is a\n      // legitimate 404, it's a bug on our end but there's currently no way to\n      // distinguish between the two.\n      return {\n        heading: \"Error fetching data\",\n        message:\n          \"Authorization error. Contact your organization admin for support.\",\n      };\n    }\n\n    return {\n      heading: \"Unknown error\",\n      message:\n        \"An unexpected error occurred. Please try refreshing the page, or contact your organization admin for support.\",\n    };\n  })();\n\n  return (\n    <Card size=\"2\">\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            width=\"24px\"\n            height=\"24px\"\n            style={{\n              borderRadius: \"9999px\",\n              backgroundColor: \"var(--red-a4)\",\n              color: \"var(--red-a11)\",\n            }}\n          >\n            <Cross2Icon width=\"18px\" height=\"18px\" />\n          </Flex>\n          <Flex direction=\"column\">\n            <Text size=\"2\" weight=\"bold\">\n              {heading}\n            </Text>\n            <Text size=\"2\" color=\"gray\">\n              {message}\n            </Text>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n}\n\nfunction getRelativeTimeString(\n  currentDate: Date | null,\n  lastSession: Date | null,\n) {\n  if (!currentDate || !lastSession) {\n    return null;\n  }\n\n  const rtf = new Intl.RelativeTimeFormat(\"en\", { numeric: \"auto\" });\n  const diff = lastSession.getTime() - currentDate.getTime();\n\n  const diffSeconds = Math.round(diff / 1000);\n  const diffMinutes = Math.round(diffSeconds / 60);\n  const diffHours = Math.round(diffMinutes / 60);\n  const diffDays = Math.round(diffHours / 24);\n  const diffMonths = Math.round(diffDays / 30);\n  const diffYears = Math.round(diffMonths / 12);\n\n  if (Math.abs(diffSeconds) < 60) {\n    return \"now\";\n  }\n\n  if (Math.abs(diffMinutes) < 60) {\n    return rtf.format(diffMinutes, \"minute\");\n  }\n\n  if (Math.abs(diffHours) < 24) {\n    return rtf.format(diffHours, \"hour\");\n  }\n\n  if (Math.abs(diffDays) < 30) {\n    return rtf.format(diffDays, \"day\");\n  }\n\n  if (Math.abs(diffMonths) < 12) {\n    return rtf.format(diffMonths, \"month\");\n  }\n\n  return rtf.format(diffYears, \"year\");\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmGkB;AAjGlB,YAAuB;AACvB,oBAA8C;AAC9C,sBAAyB;AACzB,wBAA0B;AAC1B,yBAIO;AACP,eAA0B;AAC1B,2BAA6B;AAC7B,gCAGO;AACP,oBAAuB;AACvB,mBAA4B;AAC5B,kBAAiB;AAEjB,oBAAuD;AA4CvD,MAAM,kCACJ,MAAM,cAA2D,IAAI;AACvE,gCAAgC,cAAc;AAE9C,SAAS,qCAAqC;AAC5C,QAAM,UAAU,MAAM,WAAW,+BAA+B;AAChE,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,MAAK;AAAA,MACL,eAAW,YAAAA,SAAK,mBAAmB;AAAA,MACnC,6BAA0B;AAAA,MAE1B,uDAAC,gCAAgC,UAAhC,EAAyC,OAAO,EAAE,iBAAiB,GAClE;AAAA,oDAAC,SAAS,MAAT,EACC,sDAAC,sBAAK,WAAU,OAAM,SAAQ,WAAU,OAAM,UAAS,KAAI,KACvD,iBAAM;AACN,cAAI,qBAAqB,iBAAiB;AACxC,mBACE,4EACE;AAAA,0DAAC,sBAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAAI,yDAEnC;AAAA,cACC;AAAA,eACH;AAAA,UAEJ;AAEA,iBACE,4EACE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,YACA,6CAAC,sBAAK,KAAI,KAAI,OAAM,UAClB;AAAA,0DAAC,aAAU,QAAQ,kBAAkB;AAAA,cACpC;AAAA,eACH;AAAA,aACF;AAAA,QAEJ,GAAG,GACL,GACF;AAAA,QACC,qBAAqB,aACpB,4CAAC,SAAS,MAAT,EACC,uDAAC,sBAAK,OAAM,SAAQ,KAAI,KACtB;AAAA,sDAAC,qBAAI,SAAO,MAAC,IAAG,OAAM,YAAW,KAC/B,sDAAC,sCAAgB,OAAM,QAAO,GAChC;AAAA,WACE,MAAM;AACN,gBAAI,qBAAqB,WAAW;AAClC,qBACE,6CAAC,sBAAK,MAAK,KAAI,OAAM,QACjB;AAAA,uBAAM;AACN,sBAAI,CAAC,YAAY;AACf,2BAAO;AAAA,kBACT;AAEA,yBACE,4EAAE;AAAA;AAAA,oBACiD;AAAA,oBACjD,4CAAC,sBAAK,QAAO,QAAO,IAAG,QACpB,sBAAY,eAAe,SAAS;AAAA,sBACnC,OAAO;AAAA,sBACP,KAAK;AAAA,sBACL,MAAM;AAAA,oBACR,CAAC,GACH;AAAA,qBACF;AAAA,gBAEJ,GAAG;AAAA,gBAAE;AAAA,iBAGP;AAAA,YAEJ;AAEA,gBAAI,qBAAqB,YAAY;AACnC,qBACE,6CAAC,sBAAK,MAAK,KAAI,OAAM,QACjB;AAAA,uBAAM;AACN,sBAAI,CAAC,YAAY;AACf,2BAAO;AAAA,kBACT;AAEA,yBACE,4EAAE;AAAA;AAAA,oBACqD;AAAA,oBACrD,4CAAC,sBAAK,QAAO,QAAO,IAAG,QACpB,sBAAY,eAAe,SAAS;AAAA,sBACnC,OAAO;AAAA,sBACP,KAAK;AAAA,sBACL,MAAM;AAAA,oBACR,CAAC,GACH;AAAA,qBACF;AAAA,gBAEJ,GAAG;AAAA,gBAAE;AAAA,iBAEP;AAAA,YAEJ;AAAA,UACF,GAAG;AAAA,WACL,GACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,UAAU;AAAA,EACjB;AACF,GAEG;AACD,MAAI,WAAW,iBAAiB;AAC9B,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,YAAY;AACzB,WAAO,4CAAC,wBAAO,OAAM,WAAU,+BAAiB;AAAA,EAClD;AAEA,MAAI,WAAW,WAAW;AACxB,WAAO,4CAAC,wBAAO,OAAM,SAAQ,6BAAe;AAAA,EAC9C;AAEA,MAAI,WAAW,YAAY,WAAW,YAAY;AAChD,WAAO,4CAAC,wBAAO,OAAM,WAAU,uBAAS;AAAA,EAC1C;AAEA,aAAO,0BAAY,MAAM;AAC3B;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,qBAAqB,MAAM,QAAQ,MAAM;AAC7C,QACE,CAAC,eACD,CAAC,eACD,qBAAqB,mBACrB,qBAAqB,YACrB;AACA,aAAO;AAAA,IACT;AAEA,WAAO,sBAAsB,aAAa,WAAW;AAAA,EACvD,GAAG,CAAC,aAAa,aAAa,gBAAgB,CAAC;AAE/C,SACE,6CAAC,sBAAK,KAAI,KAAI,OAAM,UAClB;AAAA,gDAAC,+BAAU,OAAM,SACf,sDAAC,qCAAa,UAAU,kBAAkB,MAAK,KAAI,GACrD;AAAA,IACC,cACC,6CAAC,sBAAK,WAAU,UACd;AAAA,kDAAC,sBAAK,MAAK,KAAI,QAAO,QACnB,iEAAwB,gBAAgB,GAC3C;AAAA,MACC,qBACC,6CAAC,sBAAK,OAAM,QAAO,MAAK,KAAI;AAAA;AAAA,QACZ;AAAA,SAChB,IACE;AAAA,OACN,IAEA,4CAAC,sBAAK,MAAK,KAAI,QAAO,QACnB,iEAAwB,gBAAgB,GAC3C;AAAA,KAEJ;AAEJ;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,iBAAiB,IAAI,mCAAmC;AAChE,QAAM,SAAS,MAAM;AACnB,YAAQ,kBAAkB;AAAA,MACxB,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO;AAAA,MACT;AACE,mBAAO,0BAAY,gBAAgB;AAAA,IACvC;AAAA,EACF,GAAG;AAEH,MAAI,MAAM;AACR,WACE,4CAAC,wBAAO,SAAQ,WAAU,OAAM,QAAO,SAAO,MAC5C,uDAAC,OAAE,MAAY,QAAO,UAAS,KAAI,uBAChC;AAAA;AAAA,MAAM;AAAA,MAAC,4CAAC,uCAAiB;AAAA,OAC5B,GACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS;AAAA,MAER;AAAA;AAAA,QAAM;AAAA,QAAC,4CAAC,uCAAiB;AAAA;AAAA;AAAA,EAC5B;AAEJ;AAEO,MAAM,kCAA4C,MAAM;AAC7D,SACE,4CAAC,sBAAK,MAAK,KACT,uDAAC,sBAAK,WAAU,OAAM,SAAQ,WAAU,OAAM,UAAS,KAAI,KACzD;AAAA,iDAAC,sBAAK,KAAI,KAAI,OAAM,UAClB;AAAA,kDAAC,4BACC,sDAAC,+BAAU,OAAM,SACf,sDAAC,qCAAa,UAAS,QAAO,MAAK,KAAI,GACzC,GACF;AAAA,MACA,6CAAC,sBAAK,WAAU,UAAS,KAAI,KAAI,IAAG,QAClC;AAAA,oDAAC,4BACC,sDAAC,sBAAK,MAAK,KAAI,kBAAI,GACrB;AAAA,QACA,4CAAC,4BACC,sDAAC,sBAAK,MAAK,KAAI,yCAA2B,GAC5C;AAAA,SACF;AAAA,OACF;AAAA,IACA,6CAAC,sBAAK,KAAI,KAAI,OAAM,UAClB;AAAA,kDAAC,4BACC,sDAAC,wBAAO,OAAM,SAAQ,6BAAe,GACvC;AAAA,MACA,4CAAC,4BACC,uDAAC,wBAAO,SAAQ,WAAU,OAAM,QAAO;AAAA;AAAA,QAC9B,4CAAC,uCAAiB;AAAA,SAC3B,GACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAEO,SAAS,8BAA8B,EAAE,MAAM,GAAuB;AAC3E,QAAM,UAAU,MAAM;AACpB,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,EAAE,SAAS,QAAQ,KAAK,MAAM;AAClC,QAAI,iBAAiB,0BAAY;AAC/B,aAAO;AAAA,QACL,SAAS;AAAA,QACT,SACE;AAAA,MAEJ;AAAA,IACF;AAEA,QAAI,iBAAiB,gCAAkB;AACrC,aAAO;AAAA,QACL,SAAS;AAAA,QACT,SACE;AAAA,MAEJ;AAAA,IACF;AAEA,QAAI,iBAAiB,0BAAY,MAAM,WAAW,KAAK;AAIrD,aAAO;AAAA,QACL,SAAS;AAAA,QACT,SACE;AAAA,MACJ;AAAA,IACF;AAEA,WAAO;AAAA,MACL,SAAS;AAAA,MACT,SACE;AAAA,IACJ;AAAA,EACF,GAAG;AAEH,SACE,4CAAC,sBAAK,MAAK,KACT,sDAAC,sBAAK,WAAU,OAAM,SAAQ,WAAU,OAAM,UAAS,KAAI,KACzD,uDAAC,sBAAK,KAAI,KAAI,OAAM,UAClB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,QAAO;AAAA,QACP,OAAO;AAAA,UACL,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,OAAO;AAAA,QACT;AAAA,QAEA,sDAAC,iCAAW,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,IACzC;AAAA,IACA,6CAAC,sBAAK,WAAU,UACd;AAAA,kDAAC,sBAAK,MAAK,KAAI,QAAO,QACnB,mBACH;AAAA,MACA,4CAAC,sBAAK,MAAK,KAAI,OAAM,QAClB,mBACH;AAAA,OACF;AAAA,KACF,GACF,GACF;AAEJ;AAEA,SAAS,sBACP,aACA,aACA;AACA,MAAI,CAAC,eAAe,CAAC,aAAa;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,IAAI,KAAK,mBAAmB,MAAM,EAAE,SAAS,OAAO,CAAC;AACjE,QAAM,OAAO,YAAY,QAAQ,IAAI,YAAY,QAAQ;AAEzD,QAAM,cAAc,KAAK,MAAM,OAAO,GAAI;AAC1C,QAAM,cAAc,KAAK,MAAM,cAAc,EAAE;AAC/C,QAAM,YAAY,KAAK,MAAM,cAAc,EAAE;AAC7C,QAAM,WAAW,KAAK,MAAM,YAAY,EAAE;AAC1C,QAAM,aAAa,KAAK,MAAM,WAAW,EAAE;AAC3C,QAAM,YAAY,KAAK,MAAM,aAAa,EAAE;AAE5C,MAAI,KAAK,IAAI,WAAW,IAAI,IAAI;AAC9B,WAAO;AAAA,EACT;AAEA,MAAI,KAAK,IAAI,WAAW,IAAI,IAAI;AAC9B,WAAO,IAAI,OAAO,aAAa,QAAQ;AAAA,EACzC;AAEA,MAAI,KAAK,IAAI,SAAS,IAAI,IAAI;AAC5B,WAAO,IAAI,OAAO,WAAW,MAAM;AAAA,EACrC;AAEA,MAAI,KAAK,IAAI,QAAQ,IAAI,IAAI;AAC3B,WAAO,IAAI,OAAO,UAAU,KAAK;AAAA,EACnC;AAEA,MAAI,KAAK,IAAI,UAAU,IAAI,IAAI;AAC7B,WAAO,IAAI,OAAO,YAAY,OAAO;AAAA,EACvC;AAEA,SAAO,IAAI,OAAO,WAAW,MAAM;AACrC;","names":["clsx"]}
+{"version":3,"sources":["../../../src/lib/admin-portal-sso-connection.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport {\n  ExternalLinkIcon,\n  InfoCircledIcon,\n  Cross2Icon,\n} from \"@radix-ui/react-icons\";\nimport * as CardList from \"./card-list.js\";\nimport { ProviderIcon } from \"./provider-icon.js\";\nimport {\n  getIdentityProviderName,\n  type IdentityProvider,\n} from \"./identity-providers.js\";\nimport { Status } from \"./status.js\";\nimport {\n  getDomProps,\n  unreachable,\n  type WidgetRootState,\n  type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { getErrorMessage } from \"./generic-error.js\";\n\ninterface NotConfiguredProps {\n  connectionStatus: \"NotConfigured\";\n  identityProvider?: never;\n  expiryDate?: never;\n}\n\ninterface InactiveProps {\n  connectionStatus: \"Inactive\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface ActiveProps {\n  connectionStatus: \"Active\";\n  identityProvider: IdentityProvider;\n  expiryDate?: never;\n}\n\ninterface RequiresActionProps {\n  connectionStatus: \"Expired\" | \"Expiring\";\n  identityProvider: IdentityProvider;\n  expiryDate: Date | null;\n}\n\nexport type AdminPortalSsoConnectionStatusProps =\n  | NotConfiguredProps\n  | InactiveProps\n  | ActiveProps\n  | RequiresActionProps;\n\ntype AdminPortalSsoConnectionProps = WidgetRootDomProps &\n  AdminPortalSsoConnectionStatusProps & {\n    currentDate: Date | null;\n    lastSession: Date | null;\n    adminPortalOpenButton: React.ReactNode;\n  };\n\ninterface AdminPortalSsoConnectionContextValue {\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}\n\nconst AdminPortalSsoConnectionContext =\n  React.createContext<AdminPortalSsoConnectionContextValue | null>(null);\nAdminPortalSsoConnectionContext.displayName = \"AdminPortalSsoConnectionContext\";\n\nfunction useAdminPortalSsoConnectionContext() {\n  const context = React.useContext(AdminPortalSsoConnectionContext);\n  if (!context) {\n    throw new Error(\n      \"useAdminPortalSsoConnectionContext must be used within a AdminPortalSsoConnectionContext provider\",\n    );\n  }\n  return context;\n}\n\nconst AdminPortalSsoConnection: React.FC<AdminPortalSsoConnectionProps> = ({\n  currentDate,\n  connectionStatus,\n  identityProvider,\n  expiryDate,\n  lastSession,\n  adminPortalOpenButton,\n  ...domProps\n}) => {\n  return (\n    <CardList.Root size=\"2\" {...getWidgetRootDomProps(\"resolved\", domProps)}>\n      <AdminPortalSsoConnectionContext.Provider value={{ connectionStatus }}>\n        <CardList.Item>\n          <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n            {(() => {\n              if (connectionStatus === \"NotConfigured\") {\n                return (\n                  <>\n                    <Text size=\"2\" color=\"gray\">\n                      You haven’t set up Single Sign-On yet.\n                    </Text>\n                    {adminPortalOpenButton}\n                  </>\n                );\n              }\n\n              return (\n                <>\n                  <SessionInfo\n                    connectionStatus={connectionStatus}\n                    identityProvider={identityProvider}\n                    lastSession={lastSession}\n                    currentDate={currentDate}\n                  />\n                  <Flex gap=\"5\" align=\"center\">\n                    <SsoStatus status={connectionStatus} />\n                    {adminPortalOpenButton}\n                  </Flex>\n                </>\n              );\n            })()}\n          </Flex>\n        </CardList.Item>\n        {connectionStatus === \"Expired\" && (\n          <CardList.Item>\n            <Flex align=\"start\" gap=\"2\">\n              <Box asChild mt=\"2px\" flexShrink=\"0\">\n                <InfoCircledIcon color=\"gray\" />\n              </Box>\n              {(() => {\n                if (connectionStatus === \"Expired\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return \"The SAML response signing certificate has expired\";\n                        }\n\n                        return (\n                          <>\n                            The SAML response signing certificate expired on{\" \"}\n                            <Text weight=\"bold\" as=\"span\">\n                              {expiryDate?.toLocaleString(\"en-US\", {\n                                month: \"long\",\n                                day: \"numeric\",\n                                year: \"numeric\",\n                              })}\n                            </Text>\n                          </>\n                        );\n                      })()}\n                      . Users won’t be able to sign-in to the application until\n                      the certificate is renewed.\n                    </Text>\n                  );\n                }\n\n                if (connectionStatus === \"Expiring\") {\n                  return (\n                    <Text size=\"2\" color=\"gray\">\n                      {(() => {\n                        if (!expiryDate) {\n                          return \"The SAML response signing certificate is expiring soon\";\n                        }\n\n                        return (\n                          <>\n                            The SAML response signing certificate will expire on{\" \"}\n                            <Text weight=\"bold\" as=\"span\">\n                              {expiryDate?.toLocaleString(\"en-US\", {\n                                month: \"long\",\n                                day: \"numeric\",\n                                year: \"numeric\",\n                              })}\n                            </Text>\n                          </>\n                        );\n                      })()}\n                      . When expired, users won’t be able to sign-in.\n                    </Text>\n                  );\n                }\n              })()}\n            </Flex>\n          </CardList.Item>\n        )}\n      </AdminPortalSsoConnectionContext.Provider>\n    </CardList.Root>\n  );\n};\n\nfunction SsoStatus({\n  status,\n}: {\n  status: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  if (status === \"NotConfigured\") {\n    return null;\n  }\n\n  if (status === \"Inactive\") {\n    return <Status state=\"waiting\">Setup in progress</Status>;\n  }\n\n  if (status === \"Expired\") {\n    return <Status state=\"error\">Requires action</Status>;\n  }\n\n  if (status === \"Active\" || status === \"Expiring\") {\n    return <Status state=\"success\">Connected</Status>;\n  }\n\n  return unreachable(status);\n}\n\nfunction SessionInfo({\n  currentDate,\n  identityProvider,\n  lastSession,\n  connectionStatus,\n}: {\n  identityProvider: IdentityProvider;\n  lastSession: Date | null;\n  currentDate: Date | null;\n  connectionStatus: AdminPortalSsoConnectionStatusProps[\"connectionStatus\"];\n}) {\n  const relativeTimeString = React.useMemo(() => {\n    if (\n      !lastSession ||\n      !currentDate ||\n      connectionStatus === \"NotConfigured\" ||\n      connectionStatus === \"Inactive\"\n    ) {\n      return null;\n    }\n\n    return getRelativeTimeString(currentDate, lastSession);\n  }, [lastSession, currentDate, connectionStatus]);\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel color=\"panel\">\n        <ProviderIcon provider={identityProvider} size=\"2\" />\n      </IconPanel>\n      {lastSession ? (\n        <Flex direction=\"column\">\n          <Text size=\"2\" weight=\"bold\">\n            {getIdentityProviderName(identityProvider)}\n          </Text>\n          {relativeTimeString ? (\n            <Text color=\"gray\" size=\"2\">\n              Last session {relativeTimeString}\n            </Text>\n          ) : null}\n        </Flex>\n      ) : (\n        <Text size=\"2\" weight=\"bold\">\n          {getIdentityProviderName(identityProvider)}\n        </Text>\n      )}\n    </Flex>\n  );\n}\n\nfunction AdminPortalOpenButton({\n  isPending,\n  href,\n  initConfig,\n}: {\n  isPending: boolean;\n  href: string | null;\n  initConfig: () => void;\n}) {\n  const { connectionStatus } = useAdminPortalSsoConnectionContext();\n  const label = (() => {\n    switch (connectionStatus) {\n      case \"NotConfigured\":\n        return \"Set up SSO\";\n      case \"Inactive\":\n        return \"Continue setup\";\n      case \"Active\":\n      case \"Expiring\":\n      case \"Expired\":\n        return \"Manage\";\n      default:\n        return unreachable(connectionStatus);\n    }\n  })();\n\n  if (href) {\n    return (\n      <Button variant=\"outline\" color=\"gray\" asChild>\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n          {label} <ExternalLinkIcon />\n        </a>\n      </Button>\n    );\n  }\n\n  return (\n    <Button\n      variant=\"outline\"\n      color=\"gray\"\n      loading={isPending}\n      disabled={isPending}\n      onClick={initConfig}\n    >\n      {label} <ExternalLinkIcon />\n    </Button>\n  );\n}\n\ninterface AdminPortalSsoConnectionLoadingProps extends WidgetRootDomProps {}\n\nconst AdminPortalSsoConnectionLoading: React.FC<\n  AdminPortalSsoConnectionLoadingProps\n> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Skeleton>\n            <IconPanel color=\"panel\">\n              <ProviderIcon provider=\"okta\" size=\"2\" />\n            </IconPanel>\n          </Skeleton>\n          <Flex direction=\"column\" gap=\"1\" my=\"-4px\">\n            <Skeleton>\n              <Text size=\"1\">Okta</Text>\n            </Skeleton>\n            <Skeleton>\n              <Text size=\"1\">Last session 10 minutes ago</Text>\n            </Skeleton>\n          </Flex>\n        </Flex>\n        <Flex gap=\"5\" align=\"center\">\n          <Skeleton>\n            <Status state=\"error\">Requires action</Status>\n          </Skeleton>\n          <Skeleton>\n            <Button variant=\"outline\" color=\"gray\">\n              Manage <ExternalLinkIcon />\n            </Button>\n          </Skeleton>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\ninterface AdminPortalSsoConnectionErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst AdminPortalSsoConnectionError: React.FC<\n  AdminPortalSsoConnectionErrorProps\n> = ({ error, ...domProps }) => {\n  React.useEffect(() => {\n    console.error(error);\n  }, [error]);\n\n  const { heading, message } = getErrorMessage(error);\n\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n        <Flex gap=\"4\" align=\"center\">\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            width=\"24px\"\n            height=\"24px\"\n            style={{\n              borderRadius: \"9999px\",\n              backgroundColor: \"var(--red-a4)\",\n              color: \"var(--red-a11)\",\n              flexShrink: 0,\n            }}\n          >\n            <Cross2Icon width=\"18px\" height=\"18px\" />\n          </Flex>\n          <Flex direction=\"column\">\n            <Text size=\"2\" weight=\"bold\">\n              {heading}\n            </Text>\n            <Text size=\"2\" color=\"gray\">\n              {message}\n            </Text>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nfunction getRelativeTimeString(\n  currentDate: Date | null,\n  lastSession: Date | null,\n) {\n  if (!currentDate || !lastSession) {\n    return null;\n  }\n\n  const rtf = new Intl.RelativeTimeFormat(\"en\", { numeric: \"auto\" });\n  const diff = lastSession.getTime() - currentDate.getTime();\n\n  const diffSeconds = Math.round(diff / 1000);\n  const diffMinutes = Math.round(diffSeconds / 60);\n  const diffHours = Math.round(diffMinutes / 60);\n  const diffDays = Math.round(diffHours / 24);\n  const diffMonths = Math.round(diffDays / 30);\n  const diffYears = Math.round(diffMonths / 12);\n\n  if (Math.abs(diffSeconds) < 60) {\n    return \"now\";\n  }\n\n  if (Math.abs(diffMinutes) < 60) {\n    return rtf.format(diffMinutes, \"minute\");\n  }\n\n  if (Math.abs(diffHours) < 24) {\n    return rtf.format(diffHours, \"hour\");\n  }\n\n  if (Math.abs(diffDays) < 30) {\n    return rtf.format(diffDays, \"day\");\n  }\n\n  if (Math.abs(diffMonths) < 12) {\n    return rtf.format(diffMonths, \"month\");\n  }\n\n  return rtf.format(diffYears, \"year\");\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"admin-portal-sso-connection\",\n    widgetState: state,\n  });\n}\n\nexport type {\n  AdminPortalSsoConnectionProps,\n  AdminPortalSsoConnectionLoadingProps,\n  AdminPortalSsoConnectionErrorProps,\n};\nexport {\n  AdminPortalSsoConnection,\n  AdminPortalSsoConnectionLoading,\n  AdminPortalSsoConnectionError,\n  /** @internal */\n  AdminPortalOpenButton,\n};\n"],"mappings":"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","names":[]}