@workos-inc/widgets 1.5.1 → 1.6.0

package/dist/esm/api-keys.client.d.ts

@@ -0,0 +1,15 @@
+import { AuthToken } from './api/api-provider.js';
+export { ApiKeysError, ApiKeysErrorProps, ApiKeysLoading, ApiKeysLoadingProps } from './lib/api-keys/api-keys.js';
+import * as React from 'react';
+import { WidgetRootDomProps } from './lib/utils.js';
+import 'react/jsx-runtime';
+import './api/endpoint.js';
+import '@tanstack/react-query';
+import './api/widgets-api-client.js';
+
+interface ApiKeysProps extends WidgetRootDomProps {
+    authToken: AuthToken;
+}
+declare const ApiKeys: React.FC<ApiKeysProps>;
+
+export { ApiKeys, type ApiKeysProps };

package/dist/esm/api-keys.client.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ApiProvider, useApiReady } from "./api/api-provider.js";
+import { useWorkOsApiUrl } from "./lib/widgets-context.js";
+import {
+  ApiKeysLoading,
+  ApiKeys as ApiKeysPresentational,
+  ApiKeysError
+} from "./lib/api-keys/api-keys.js";
+import { useListOrganizationApiKeyPermissions } from "./api/endpoint.js";
+import { ErrorBoundary } from "./lib/error-boundary.js";
+import { usePermissions } from "./lib/use-permissions.js";
+import {
+  ApiKeysContextProvider,
+  useApiKeysContext
+} from "./lib/api-keys/api-keys-context.js";
+import { useApiKeys } from "./lib/api/api-key.js";
+import { CreateApiKeyDialog } from "./lib/api-keys/create-api-key.js";
+const ApiKeys = ({ authToken, ...domProps }) => {
+  const baseUrl = useWorkOsApiUrl();
+  return /* @__PURE__ */ jsx(
+    ErrorBoundary,
+    {
+      fallbackRender: ({ error }) => /* @__PURE__ */ jsx(ApiKeysError, { ...domProps, error }),
+      children: /* @__PURE__ */ jsx(
+        ApiProvider,
+        {
+          widgetType: "api-keys",
+          authToken,
+          baseUrl,
+          children: /* @__PURE__ */ jsxs(ApiKeysContextProvider, { children: [
+            /* @__PURE__ */ jsx(CreateApiKeyDialog, {}),
+            /* @__PURE__ */ jsx(ApiKeysImpl, { ...domProps })
+          ] })
+        }
+      )
+    }
+  );
+};
+const ApiKeysImpl = (props) => {
+  const isApiReady = useApiReady();
+  const apiKeys = useApiKeys();
+  const { state } = useApiKeysContext();
+  useListOrganizationApiKeyPermissions({ limit: 100 });
+  const permissionsQuery = usePermissions("widgets:api-keys:manage");
+  if (!isApiReady || apiKeys.isLoading || permissionsQuery.isLoading) {
+    return /* @__PURE__ */ jsx(ApiKeysLoading, { ...props });
+  }
+  if (permissionsQuery.isError || apiKeys.isError) {
+    return /* @__PURE__ */ jsx(
+      ApiKeysError,
+      {
+        error: permissionsQuery.error || apiKeys.error,
+        ...props
+      }
+    );
+  }
+  if (apiKeys.isSuccess) {
+    return /* @__PURE__ */ jsx(
+      ApiKeysPresentational,
+      {
+        apiKeys: apiKeys.data,
+        searchQuery: state.searchQuery,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(ApiKeysError, { error: apiKeys.error, ...props });
+};
+export {
+  ApiKeys,
+  ApiKeysError,
+  ApiKeysLoading
+};
+//# sourceMappingURL=api-keys.client.js.map

package/dist/esm/api-keys.client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/api-keys.client.tsx"],"sourcesContent":["\"use client\";\nimport { ApiProvider, AuthToken, useApiReady } from \"./api/api-provider.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport {\n  ApiKeysLoading,\n  ApiKeys as ApiKeysPresentational,\n  ApiKeysError,\n} from \"./lib/api-keys/api-keys.js\";\nimport type {\n  ApiKeysLoadingProps,\n  ApiKeysErrorProps,\n} from \"./lib/api-keys/api-keys.js\";\nimport { useListOrganizationApiKeyPermissions } from \"./api/endpoint.js\";\nimport * as React from \"react\";\nimport { ErrorBoundary } from \"./lib/error-boundary.js\";\nimport { usePermissions } from \"./lib/use-permissions.js\";\nimport {\n  ApiKeysContextProvider,\n  useApiKeysContext,\n} from \"./lib/api-keys/api-keys-context.js\";\nimport { useApiKeys } from \"./lib/api/api-key.js\";\nimport { CreateApiKeyDialog } from \"./lib/api-keys/create-api-key.js\";\nimport type { WidgetRootDomProps } from \"./lib/utils.js\";\n\ninterface ApiKeysProps extends WidgetRootDomProps {\n  authToken: AuthToken;\n}\n\nconst ApiKeys: React.FC<ApiKeysProps> = ({ authToken, ...domProps }) => {\n  const baseUrl = useWorkOsApiUrl();\n  return (\n    <ErrorBoundary\n      fallbackRender={({ error }) => (\n        <ApiKeysError {...domProps} error={error} />\n      )}\n    >\n      <ApiProvider\n        widgetType=\"api-keys\"\n        authToken={authToken}\n        baseUrl={baseUrl}\n      >\n        <ApiKeysContextProvider>\n          <CreateApiKeyDialog />\n          <ApiKeysImpl {...domProps} />\n        </ApiKeysContextProvider>\n      </ApiProvider>\n    </ErrorBoundary>\n  );\n};\n\nconst ApiKeysImpl = (props: WidgetRootDomProps) => {\n  const isApiReady = useApiReady();\n  const apiKeys = useApiKeys();\n  const { state } = useApiKeysContext();\n  useListOrganizationApiKeyPermissions({ limit: 100 });\n  const permissionsQuery = usePermissions(\"widgets:api-keys:manage\");\n\n  if (!isApiReady || apiKeys.isLoading || permissionsQuery.isLoading) {\n    return <ApiKeysLoading {...props} />;\n  }\n\n  if (permissionsQuery.isError || apiKeys.isError) {\n    return (\n      <ApiKeysError\n        error={permissionsQuery.error || apiKeys.error}\n        {...props}\n      />\n    );\n  }\n\n  if (apiKeys.isSuccess) {\n    return (\n      <ApiKeysPresentational\n        apiKeys={apiKeys.data}\n        searchQuery={state.searchQuery}\n        {...props}\n      />\n    );\n  }\n\n  return <ApiKeysError error={apiKeys.error} {...props} />;\n};\n\nexport type { ApiKeysProps, ApiKeysLoadingProps, ApiKeysErrorProps };\nexport { ApiKeys, ApiKeysLoading, ApiKeysError };\n"],"mappings":";AAiCQ,cAQA,YARA;AAhCR,SAAS,aAAwB,mBAAmB;AACpD,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX;AAAA,OACK;AAKP,SAAS,4CAA4C;AAErD,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAOnC,MAAM,UAAkC,CAAC,EAAE,WAAW,GAAG,SAAS,MAAM;AACtE,QAAM,UAAU,gBAAgB;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB,CAAC,EAAE,MAAM,MACvB,oBAAC,gBAAc,GAAG,UAAU,OAAc;AAAA,MAG5C;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX;AAAA,UACA;AAAA,UAEA,+BAAC,0BACC;AAAA,gCAAC,sBAAmB;AAAA,YACpB,oBAAC,eAAa,GAAG,UAAU;AAAA,aAC7B;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,cAAc,CAAC,UAA8B;AACjD,QAAM,aAAa,YAAY;AAC/B,QAAM,UAAU,WAAW;AAC3B,QAAM,EAAE,MAAM,IAAI,kBAAkB;AACpC,uCAAqC,EAAE,OAAO,IAAI,CAAC;AACnD,QAAM,mBAAmB,eAAe,yBAAyB;AAEjE,MAAI,CAAC,cAAc,QAAQ,aAAa,iBAAiB,WAAW;AAClE,WAAO,oBAAC,kBAAgB,GAAG,OAAO;AAAA,EACpC;AAEA,MAAI,iBAAiB,WAAW,QAAQ,SAAS;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,iBAAiB,SAAS,QAAQ;AAAA,QACxC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,MAAI,QAAQ,WAAW;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,QAAQ;AAAA,QACjB,aAAa,MAAM;AAAA,QAClB,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,SAAO,oBAAC,gBAAa,OAAO,QAAQ,OAAQ,GAAG,OAAO;AACxD;","names":[]}

package/dist/esm/index.d.ts

@@ -1,12 +1,13 @@
 export { WorkOsWidgets, WorkOsWidgetsProps } from './workos-widgets.client.js';
 export { OrganizationSwitcher, OrganizationSwitcherProps } from './organization-switcher.client.js';
-export { AdminPortalSsoConnection, AdminPortalSsoConnectionProps } from './admin-portal-sso-connection-client.js';
+export { AdminPortalSsoConnection, AdminPortalSsoConnectionProps } from './admin-portal-sso-connection.client.js';
 export { UserProfile, UserProfileProps } from './user-profile.client.js';
 export { UserSecurity, UserSecurityProps } from './user-security.client.js';
 export { UserSessions, UserSessionsProps } from './user-sessions.client.js';
 export { UsersManagement, UsersManagementProps } from './users-management.client.js';
 export { AdminPortalDomainVerification, AdminPortalDomainVerificationProps } from './admin-portal-domain-verification.client.js';
-export { ApiKeys, ApiKeysProps } from './api-keys-client.js';
+export { ApiKeys, ApiKeysProps } from './api-keys.client.js';
+export { Pipes, PipesProps } from './pipes.client.js';
 export { OrganizationSwitcherLoading } from './lib/organization-switcher.js';
 export { AdminPortalSsoConnectionLoading } from './lib/admin-portal-sso-connection.js';
 export { UserProfileLoading } from './lib/user-profile.js';
@@ -14,6 +15,8 @@ export { UserSecurityLoading } from './lib/user-security.js';
 export { UserSessionsLoading } from './lib/user-sessions.js';
 export { UsersManagementLoading } from './lib/users-management.js';
 export { AdminPortalDomainVerificationLoading } from './lib/admin-portal-domain-verification.js';
+export { ApiKeysLoading } from './lib/api-keys/api-keys.js';
+export { PipesLoading } from './lib/pipes.js';
 import '@radix-ui/themes/props';
 import '@tanstack/react-query';
 import 'react';
@@ -21,6 +24,7 @@ import './lib/elements.js';
 import '@radix-ui/themes';
 import './api/api-provider.js';
 import 'react/jsx-runtime';
+import './lib/utils.js';
 import './api/endpoint.js';
 import './api/widgets-api-client.js';
 import './lib/identity-providers.js';

package/dist/esm/index.js

@@ -8,7 +8,7 @@ import {
 import {
   AdminPortalSsoConnection,
   AdminPortalSsoConnectionLoading
-} from "./admin-portal-sso-connection-client.js";
+} from "./admin-portal-sso-connection.client.js";
 import {
   UserProfile,
   UserProfileLoading
@@ -29,15 +29,22 @@ import {
   AdminPortalDomainVerification,
   AdminPortalDomainVerificationLoading
 } from "./admin-portal-domain-verification.client.js";
-import { ApiKeys } from "./api-keys-client.js";
+import {
+  ApiKeys,
+  ApiKeysLoading
+} from "./api-keys.client.js";
+import { Pipes, PipesLoading } from "./pipes.client.js";
 export {
   AdminPortalDomainVerification,
   AdminPortalDomainVerificationLoading,
   AdminPortalSsoConnection,
   AdminPortalSsoConnectionLoading,
   ApiKeys,
+  ApiKeysLoading,
   OrganizationSwitcher,
   OrganizationSwitcherLoading,
+  Pipes,
+  PipesLoading,
   UserProfile,
   UserProfileLoading,
   UserSecurity,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export {\n  WorkOsWidgets,\n  type WorkOsWidgetsProps,\n} from \"./workos-widgets.client.js\";\nexport {\n  OrganizationSwitcher,\n  OrganizationSwitcherLoading,\n  type OrganizationSwitcherProps,\n} from \"./organization-switcher.client.js\";\nexport {\n  AdminPortalSsoConnection,\n  AdminPortalSsoConnectionLoading,\n  type AdminPortalSsoConnectionProps,\n} from \"./admin-portal-sso-connection-client.js\";\nexport {\n  UserProfile,\n  UserProfileLoading,\n  type UserProfileProps,\n} from \"./user-profile.client.js\";\nexport {\n  UserSecurity,\n  UserSecurityLoading,\n  type UserSecurityProps,\n} from \"./user-security.client.js\";\nexport {\n  UserSessions,\n  UserSessionsLoading,\n  type UserSessionsProps,\n} from \"./user-sessions.client.js\";\nexport {\n  UsersManagement,\n  UsersManagementLoading,\n  type UsersManagementProps,\n} from \"./users-management.client.js\";\nexport {\n  AdminPortalDomainVerification,\n  AdminPortalDomainVerificationLoading,\n  type AdminPortalDomainVerificationProps,\n} from \"./admin-portal-domain-verification.client.js\";\n\nexport { ApiKeys, type ApiKeysProps } from \"./api-keys-client.js\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,eAAkC;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export {\n  WorkOsWidgets,\n  type WorkOsWidgetsProps,\n} from \"./workos-widgets.client.js\";\nexport {\n  OrganizationSwitcher,\n  OrganizationSwitcherLoading,\n  type OrganizationSwitcherProps,\n} from \"./organization-switcher.client.js\";\nexport {\n  AdminPortalSsoConnection,\n  AdminPortalSsoConnectionLoading,\n  type AdminPortalSsoConnectionProps,\n} from \"./admin-portal-sso-connection.client.js\";\nexport {\n  UserProfile,\n  UserProfileLoading,\n  type UserProfileProps,\n} from \"./user-profile.client.js\";\nexport {\n  UserSecurity,\n  UserSecurityLoading,\n  type UserSecurityProps,\n} from \"./user-security.client.js\";\nexport {\n  UserSessions,\n  UserSessionsLoading,\n  type UserSessionsProps,\n} from \"./user-sessions.client.js\";\nexport {\n  UsersManagement,\n  UsersManagementLoading,\n  type UsersManagementProps,\n} from \"./users-management.client.js\";\nexport {\n  AdminPortalDomainVerification,\n  AdminPortalDomainVerificationLoading,\n  type AdminPortalDomainVerificationProps,\n} from \"./admin-portal-domain-verification.client.js\";\nexport {\n  ApiKeys,\n  ApiKeysLoading,\n  type ApiKeysProps,\n} from \"./api-keys.client.js\";\nexport { Pipes, PipesLoading, type PipesProps } from \"./pipes.client.js\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,OAAO,oBAAqC;","names":[]}

package/dist/esm/lib/admin-portal-domain-verification.d.ts

@@ -1,20 +1,24 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OrganizationDomain } from '../api/endpoint.js';
+import { WidgetRootDomProps } from './utils.js';
 import '@tanstack/react-query';
 import '../api/widgets-api-client.js';
 
-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/esm/lib/admin-portal-domain-verification.js

@@ -7,47 +7,40 @@ import { GenericError } from "./generic-error.js";
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
 import * as CardList from "./card-list.js";
 import { DomainItem } from "./domain-item.js";
-import clsx from "clsx";
+import { getDomProps } from "./utils.js";
 const AdminPortalDomainVerification = ({
   organizationDomains,
   onAddDomain,
   onDeleteDomain,
   onReverifyDomain,
-  isPending = false
+  isPending = false,
+  ...domProps
 }) => {
   if (organizationDomains.length === 0) {
-    return /* @__PURE__ */ jsx(
-      Card,
-      {
-        size: "2",
-        "data-woswidgets-widget-id": "admin-portal-domain-verification",
-        children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", children: [
-          /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: "You haven't added any verified domains yet." }),
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              color: "gray",
-              loading: isPending,
-              disabled: isPending,
-              onClick: onAddDomain,
-              children: [
-                "Add domain ",
-                /* @__PURE__ */ jsx(ExternalLinkIcon, {})
-              ]
-            }
-          )
-        ] })
-      }
-    );
+    return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", children: [
+      /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: "You haven't added any verified domains yet." }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          color: "gray",
+          loading: isPending,
+          disabled: isPending,
+          onClick: onAddDomain,
+          children: [
+            "Add domain ",
+            /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+          ]
+        }
+      )
+    ] }) });
   }
   return /* @__PURE__ */ jsxs(
     Flex,
     {
       direction: "column",
       gap: "4",
-      className: clsx("woswidgets-widget"),
-      "data-woswidgets-widget-id": "admin-portal-domain-verification",
+      ...getWidgetRootDomProps("resolved", domProps),
       children: [
         /* @__PURE__ */ jsx(CardList.Root, { children: organizationDomains.map((domain) => /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(
           DomainItem,
@@ -75,8 +68,8 @@ const AdminPortalDomainVerification = ({
     }
   );
 };
-const AdminPortalDomainVerificationLoading = () => {
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
+const AdminPortalDomainVerificationLoading = (domProps) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("loading", domProps), children: /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
     /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(IconPanel, {}) }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
       /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ jsx(Skeleton, { children: "Domain name" }) }),
@@ -84,10 +77,16 @@ const AdminPortalDomainVerificationLoading = () => {
     ] })
   ] }) });
 };
-function AdminPortalDomainVerificationError({
-  error
-}) {
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsx(GenericError, { error }) });
+const AdminPortalDomainVerificationError = ({ error, ...domProps }) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ jsx(GenericError, { error }) });
+};
+function getWidgetRootDomProps(state, domProps) {
+  return getDomProps({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "admin-portal-domain-verification",
+    widgetState: state
+  });
 }
 export {
   AdminPortalDomainVerification,

package/dist/esm/lib/admin-portal-domain-verification.js.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\n        size=\"2\"\n        data-woswidgets-widget-id=\"admin-portal-domain-verification\"\n      >\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":";AAoCU,cAGA,YAHA;AAjCV,SAAS,KAAK,QAAQ,MAAM,MAAM,YAAY;AAC9C,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,YAAY,cAAc;AAE1B,SAAS,kBAAkB;AAE3B,OAAO,UAAU;AAUV,MAAM,gCAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,MAA0C;AACxC,MAAI,oBAAoB,WAAW,GAAG;AACpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,6BAA0B;AAAA,QAE1B,+BAAC,QAAK,WAAU,OAAM,SAAQ,WAAU,OAAM,UAC5C;AAAA,8BAAC,QAAK,MAAK,KAAI,OAAM,QAAO,yDAE5B;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,SAAS;AAAA,cACT,UAAU;AAAA,cACV,SAAS;AAAA,cACV;AAAA;AAAA,gBACY,oBAAC,oBAAiB;AAAA;AAAA;AAAA,UAC/B;AAAA,WACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,WAAW,KAAK,mBAAmB;AAAA,MACnC,6BAA0B;AAAA,MAE1B;AAAA,4BAAC,SAAS,MAAT,EACE,8BAAoB,IAAI,CAAC,WACxB,oBAAC,SAAS,MAAT,EACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,KALkB,OAAO,EAM3B,CACD,GACH;AAAA,QAEA,oBAAC,OACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,SAAS;AAAA,YACV;AAAA;AAAA,cACY,oBAAC,oBAAiB;AAAA;AAAA;AAAA,QAC/B,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,uCAAiD,MAAM;AAClE,SACE,oBAAC,QAAK,MAAK,KACT,+BAAC,QAAK,KAAI,KAAI,OAAM,UAClB;AAAA,wBAAC,YACC,8BAAC,aAAU,GACb;AAAA,IAEA,qBAAC,QAAK,WAAU,UACd;AAAA,0BAAC,QAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,IAAG,QAClD,8BAAC,YAAS,yBAAW,GACvB;AAAA,MAEA,oBAAC,QAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAC7B,8BAAC,YAAS,4BAAc,GAC1B;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAEO,SAAS,mCAAmC;AAAA,EACjD;AACF,GAEG;AACD,SACE,oBAAC,QAAK,MAAK,KACT,8BAAC,gBAAa,OAAc,GAC9B;AAEJ;","names":[]}
+{"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":";AAkCU,cAGA,YAHA;AA/BV,SAAS,KAAK,QAAQ,MAAM,MAAM,YAAY;AAC9C,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,YAAY,cAAc;AAE1B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;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,oBAAC,QAAK,MAAK,KAAK,GAAG,sBAAsB,YAAY,QAAQ,GAC3D,+BAAC,QAAK,WAAU,OAAM,SAAQ,WAAU,OAAM,UAC5C;AAAA,0BAAC,QAAK,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,oBAAC,oBAAiB;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,4BAAC,SAAS,MAAT,EACE,8BAAoB,IAAI,CAAC,WACxB,oBAAC,SAAS,MAAT,EACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,KALkB,OAAO,EAM3B,CACD,GACH;AAAA,QAEA,oBAAC,OACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAM;AAAA,YACN,SAAQ;AAAA,YACR,SAAS;AAAA,YACV;AAAA;AAAA,cACY,oBAAC,oBAAiB;AAAA;AAAA;AAAA,QAC/B,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAKA,MAAM,uCAEF,CAAC,aAAa;AAChB,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,sBAAsB,WAAW,QAAQ,GAC1D,+BAAC,QAAK,KAAI,KAAI,OAAM,UAClB;AAAA,wBAAC,YACC,8BAAC,aAAU,GACb;AAAA,IAEA,qBAAC,QAAK,WAAU,UACd;AAAA,0BAAC,QAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,IAAG,QAClD,8BAAC,YAAS,yBAAW,GACvB;AAAA,MAEA,oBAAC,QAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAC7B,8BAAC,YAAS,4BAAc,GAC1B;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAMA,MAAM,qCAEF,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM;AAC9B,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,sBAAsB,SAAS,QAAQ,GACxD,8BAAC,gBAAa,OAAc,GAC9B;AAEJ;AAEA,SAAS,sBACP,OACA,UACA;AACA,SAAO,YAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}

package/dist/esm/lib/admin-portal-sso-connection.d.ts

@@ -1,6 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { IdentityProvider } from './identity-providers.js';
+import { WidgetRootDomProps } from './utils.js';
+import '../api/endpoint.js';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.js';
 
 interface NotConfiguredProps {
     connectionStatus: "NotConfigured";
@@ -23,20 +27,23 @@ interface RequiresActionProps {
     expiryDate: Date | null;
 }
 type AdminPortalSsoConnectionStatusProps = NotConfiguredProps | InactiveProps | ActiveProps | RequiresActionProps;
-type AdminPortalSsoConnectionProps = AdminPortalSsoConnectionStatusProps & {
+type AdminPortalSsoConnectionProps = WidgetRootDomProps & AdminPortalSsoConnectionStatusProps & {
     currentDate: Date | null;
     lastSession: Date | null;
     adminPortalOpenButton: React.ReactNode;
 };
-declare const AdminPortalSsoConnection: ({ currentDate, connectionStatus, identityProvider, expiryDate, lastSession, adminPortalOpenButton, }: AdminPortalSsoConnectionProps) => react_jsx_runtime.JSX.Element;
+declare const AdminPortalSsoConnection: React.FC<AdminPortalSsoConnectionProps>;
 declare function AdminPortalOpenButton({ isPending, href, initConfig, }: {
     isPending: boolean;
     href: string | null;
     initConfig: () => void;
 }): react_jsx_runtime.JSX.Element;
-declare const AdminPortalSsoConnectionLoading: React.FC;
-declare function AdminPortalSsoConnectionError({ error }: {
+interface AdminPortalSsoConnectionLoadingProps extends WidgetRootDomProps {
+}
+declare const AdminPortalSsoConnectionLoading: React.FC<AdminPortalSsoConnectionLoadingProps>;
+interface AdminPortalSsoConnectionErrorProps extends WidgetRootDomProps {
     error: unknown;
-}): react_jsx_runtime.JSX.Element;
+}
+declare const AdminPortalSsoConnectionError: React.FC<AdminPortalSsoConnectionErrorProps>;
 
-export { AdminPortalOpenButton, AdminPortalSsoConnection, AdminPortalSsoConnectionError, AdminPortalSsoConnectionLoading, type AdminPortalSsoConnectionProps, type AdminPortalSsoConnectionStatusProps };
+export { AdminPortalOpenButton, AdminPortalSsoConnection, AdminPortalSsoConnectionError, type AdminPortalSsoConnectionErrorProps, AdminPortalSsoConnectionLoading, type AdminPortalSsoConnectionLoadingProps, type AdminPortalSsoConnectionProps, type AdminPortalSsoConnectionStatusProps };

package/dist/esm/lib/admin-portal-sso-connection.js

@@ -15,8 +15,10 @@ import {
   getIdentityProviderName
 } from "./identity-providers.js";
 import { Status } from "./status.js";
-import { unreachable } from "./utils.js";
-import clsx from "clsx";
+import {
+  getDomProps,
+  unreachable
+} from "./utils.js";
 import { getErrorMessage } from "./generic-error.js";
 const AdminPortalSsoConnectionContext = React.createContext(null);
 AdminPortalSsoConnectionContext.displayName = "AdminPortalSsoConnectionContext";
@@ -35,84 +37,77 @@ const AdminPortalSsoConnection = ({
   identityProvider,
   expiryDate,
   lastSession,
-  adminPortalOpenButton
+  adminPortalOpenButton,
+  ...domProps
 }) => {
-  return /* @__PURE__ */ jsx(
-    CardList.Root,
-    {
-      size: "2",
-      className: clsx("woswidgets-widget"),
-      "data-woswidgets-widget-id": "admin-portal-sso-connection",
-      children: /* @__PURE__ */ jsxs(AdminPortalSsoConnectionContext.Provider, { value: { connectionStatus }, children: [
-        /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: (() => {
-          if (connectionStatus === "NotConfigured") {
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", ml: "2", children: "You haven\u2019t set up Single Sign-On yet." }),
-              adminPortalOpenButton
-            ] });
+  return /* @__PURE__ */ jsx(CardList.Root, { size: "2", ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ jsxs(AdminPortalSsoConnectionContext.Provider, { value: { connectionStatus }, children: [
+    /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: (() => {
+      if (connectionStatus === "NotConfigured") {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: "You haven\u2019t set up Single Sign-On yet." }),
+          adminPortalOpenButton
+        ] });
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          SessionInfo,
+          {
+            connectionStatus,
+            identityProvider,
+            lastSession,
+            currentDate
           }
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              SessionInfo,
-              {
-                connectionStatus,
-                identityProvider,
-                lastSession,
-                currentDate
+        ),
+        /* @__PURE__ */ jsxs(Flex, { gap: "5", align: "center", children: [
+          /* @__PURE__ */ jsx(SsoStatus, { status: connectionStatus }),
+          adminPortalOpenButton
+        ] })
+      ] });
+    })() }) }),
+    connectionStatus === "Expired" && /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { align: "start", gap: "2", children: [
+      /* @__PURE__ */ jsx(Box, { asChild: true, mt: "2px", flexShrink: "0", children: /* @__PURE__ */ jsx(InfoCircledIcon, { color: "gray" }) }),
+      (() => {
+        if (connectionStatus === "Expired") {
+          return /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
+            (() => {
+              if (!expiryDate) {
+                return "The SAML response signing certificate has expired";
               }
-            ),
-            /* @__PURE__ */ jsxs(Flex, { gap: "5", align: "center", children: [
-              /* @__PURE__ */ jsx(SsoStatus, { status: connectionStatus }),
-              adminPortalOpenButton
-            ] })
-          ] });
-        })() }) }),
-        connectionStatus === "Expired" && /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { align: "start", gap: "2", children: [
-          /* @__PURE__ */ jsx(Box, { asChild: true, mt: "2px", flexShrink: "0", children: /* @__PURE__ */ jsx(InfoCircledIcon, { color: "gray" }) }),
-          (() => {
-            if (connectionStatus === "Expired") {
-              return /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
-                (() => {
-                  if (!expiryDate) {
-                    return "The SAML response signing certificate has expired";
-                  }
-                  return /* @__PURE__ */ jsxs(Fragment, { children: [
-                    "The SAML response signing certificate expired on",
-                    " ",
-                    /* @__PURE__ */ jsx(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__ */ jsxs(Fragment, { children: [
+                "The SAML response signing certificate expired on",
+                " ",
+                /* @__PURE__ */ jsx(Text, { weight: "bold", as: "span", children: expiryDate?.toLocaleString("en-US", {
+                  month: "long",
+                  day: "numeric",
+                  year: "numeric"
+                }) })
               ] });
-            }
-            if (connectionStatus === "Expiring") {
-              return /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
-                (() => {
-                  if (!expiryDate) {
-                    return "The SAML response signing certificate is expiring soon";
-                  }
-                  return /* @__PURE__ */ jsxs(Fragment, { children: [
-                    "The SAML response signing certificate will expire on",
-                    " ",
-                    /* @__PURE__ */ jsx(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__ */ jsxs(Text, { size: "2", color: "gray", children: [
+            (() => {
+              if (!expiryDate) {
+                return "The SAML response signing certificate is expiring soon";
+              }
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                "The SAML response signing certificate will expire on",
+                " ",
+                /* @__PURE__ */ jsx(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
@@ -197,8 +192,8 @@ function AdminPortalOpenButton({
     }
   );
 }
-const AdminPortalSsoConnectionLoading = () => {
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
+const AdminPortalSsoConnectionLoading = (props) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
     /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
       /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(IconPanel, { color: "panel", children: /* @__PURE__ */ jsx(ProviderIcon, { provider: "okta", size: "2" }) }) }),
       /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", my: "-4px", children: [
@@ -215,12 +210,12 @@ const AdminPortalSsoConnectionLoading = () => {
     ] })
   ] }) });
 };
-function AdminPortalSsoConnectionError({ error }) {
+const AdminPortalSsoConnectionError = ({ error, ...domProps }) => {
   React.useEffect(() => {
     console.error(error);
   }, [error]);
   const { heading, message } = getErrorMessage(error);
-  return /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
     /* @__PURE__ */ jsx(
       Flex,
       {
@@ -242,7 +237,7 @@ function AdminPortalSsoConnectionError({ error }) {
       /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: message })
     ] })
   ] }) }) });
-}
+};
 function getRelativeTimeString(currentDate, lastSession) {
   if (!currentDate || !lastSession) {
     return null;
@@ -272,6 +267,14 @@ function getRelativeTimeString(currentDate, lastSession) {
   }
   return rtf.format(diffYears, "year");
 }
+function getWidgetRootDomProps(state, domProps) {
+  return getDomProps({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "admin-portal-sso-connection",
+    widgetState: state
+  });
+}
 export {
   AdminPortalOpenButton,
   AdminPortalSsoConnection,