@workos-inc/widgets 1.5.0 → 1.6.0

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

@@ -1,6 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { IdentityProvider } from './identity-providers.cjs';
+import { WidgetRootDomProps } from './utils.cjs';
+import '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
 
 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/cjs/lib/api-keys/api-keys.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,21 +15,12 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var api_keys_exports = {};
 __export(api_keys_exports, {
-  ApiKeysEmptyState: () => ApiKeysEmptyState,
+  ApiKeys: () => ApiKeys,
   ApiKeysError: () => ApiKeysError,
-  ApiKeysLoading: () => ApiKeysLoading,
-  ApiKeysRoot: () => ApiKeysRoot
+  ApiKeysLoading: () => ApiKeysLoading
 });
 module.exports = __toCommonJS(api_keys_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -42,70 +31,85 @@ var import_empty_state = require("../empty-state.js");
 var import_react_icons = require("@radix-ui/react-icons");
 var import_skeleton_table = require("./skeleton-table.js");
 var import_create_api_key = require("./create-api-key.js");
-var import_clsx = __toESM(require("clsx"), 1);
-function ApiKeysError({ error }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_generic_error.GenericError, { error });
-}
-function ApiKeysEmptyState() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_empty_state.EmptyState,
+var import_utils = require("../utils.js");
+var import_api_keys_search_provider = require("./api-keys-search-provider.js");
+var import_api_keys_table = require("./api-keys-table.js");
+const ApiKeys = ({
+  apiKeys,
+  searchQuery,
+  ...domProps
+}) => {
+  return apiKeys.data.length === 0 && !searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiKeysEmptyState, { ...getWidgetRootDomProps("resolved", domProps) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_api_keys_search_provider.ApiKeysSearchProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_api_keys_table.ApiKeysTable,
     {
-      heading: "No API keys yet",
-      message: "Generate an API key to authenticate and interact with our API.",
-      action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_create_api_key.CreateApiKeyButton, {})
+      apiKeys,
+      ...getWidgetRootDomProps("resolved", domProps)
     }
-  );
-}
-function ApiKeysLoading() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { justify: "between", align: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_elements.TextField,
-        {
-          name: "api-keys-widget-search",
-          style: { width: "390px" },
-          placeholder: "Search by name",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.TextFieldSlot, { side: "left", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) })
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Button, { children: "Create API key" }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_skeleton_table.SkeletonTable,
-      {
-        numRows: 5,
-        columns: [
-          { children: "Name", width: "25%" },
-          { children: "Secret key", width: "25%" },
-          { children: "Last used", width: "25%" },
-          { children: "Created", width: "25%" }
-        ]
-      }
-    )
-  ] });
-}
-function ApiKeysRoot({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  ) });
+};
+const ApiKeysLoading = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_themes.Flex,
     {
-      className: (0, import_clsx.default)("woswidgets-widget", className),
-      "data-woswidgets-widget-id": "api-keys",
       direction: "column",
+      align: "stretch",
       gap: "3",
-      ...props,
-      children
+      ...getWidgetRootDomProps("loading", props),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { justify: "between", align: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_elements.TextField,
+            {
+              name: "api-keys-widget-search",
+              style: { width: "390px" },
+              placeholder: "Search by name",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_elements.TextFieldSlot, { side: "left", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Button, { children: "Create API key" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_skeleton_table.SkeletonTable,
+          {
+            numRows: 5,
+            columns: [
+              { children: "Name", width: "25%" },
+              { children: "Secret key", width: "25%" },
+              { children: "Last used", width: "25%" },
+              { children: "Created", width: "25%" }
+            ]
+          }
+        )
+      ]
     }
   );
+};
+const ApiKeysError = ({ error, ...domProps }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_generic_error.GenericError, { error, ...getWidgetRootDomProps("error", domProps) });
+};
+function ApiKeysEmptyState(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_empty_state.EmptyState,
+    {
+      heading: "No API keys yet",
+      message: "Generate an API key to authenticate and interact with our API.",
+      action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_create_api_key.CreateApiKeyButton, {}),
+      ...props
+    }
+  );
+}
+function getWidgetRootDomProps(state, domProps) {
+  return (0, import_utils.getDomProps)({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "api-keys",
+    widgetState: state
+  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ApiKeysEmptyState,
+  ApiKeys,
   ApiKeysError,
-  ApiKeysLoading,
-  ApiKeysRoot
+  ApiKeysLoading
 });
 //# sourceMappingURL=api-keys.cjs.map

package/dist/cjs/lib/api-keys/api-keys.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/api-keys/api-keys.tsx"],"sourcesContent":["import { Button, Flex, Skeleton } from \"@radix-ui/themes\";\nimport { TextField, TextFieldSlot } from \"../elements.js\";\nimport { GenericError } from \"../generic-error.js\";\nimport { EmptyState } from \"../empty-state.js\";\nimport { MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { SkeletonTable } from \"./skeleton-table.js\";\nimport { CreateApiKeyButton } from \"./create-api-key.js\";\nimport clsx from \"clsx\";\n\nexport function ApiKeysError({ error }: { error: unknown }) {\n  return <GenericError error={error} />;\n}\n\nexport function ApiKeysEmptyState() {\n  return (\n    <EmptyState\n      heading=\"No API keys yet\"\n      message=\"Generate an API key to authenticate and interact with our API.\"\n      action={<CreateApiKeyButton />}\n    />\n  );\n}\n\nexport function ApiKeysLoading() {\n  return (\n    <>\n      <Flex justify=\"between\" align=\"center\">\n        <Skeleton>\n          <TextField\n            name=\"api-keys-widget-search\"\n            style={{ width: \"390px\" }}\n            placeholder=\"Search by name\"\n          >\n            <TextFieldSlot side=\"left\">\n              <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n            </TextFieldSlot>\n          </TextField>\n        </Skeleton>\n        <Skeleton>\n          <Button>Create API key</Button>\n        </Skeleton>\n      </Flex>\n      <SkeletonTable\n        numRows={5}\n        columns={[\n          { children: \"Name\", width: \"25%\" },\n          { children: \"Secret key\", width: \"25%\" },\n          { children: \"Last used\", width: \"25%\" },\n          { children: \"Created\", width: \"25%\" },\n        ]}\n      />\n    </>\n  );\n}\n\nexport function ApiKeysRoot({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof Flex>) {\n  return (\n    <Flex\n      className={clsx(\"woswidgets-widget\", className)}\n      data-woswidgets-widget-id=\"api-keys\"\n      direction=\"column\"\n      gap=\"3\"\n      {...props}\n    >\n      {children}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUS;AAVT,oBAAuC;AACvC,sBAAyC;AACzC,2BAA6B;AAC7B,yBAA2B;AAC3B,yBAAoC;AACpC,4BAA8B;AAC9B,4BAAmC;AACnC,kBAAiB;AAEV,SAAS,aAAa,EAAE,MAAM,GAAuB;AAC1D,SAAO,4CAAC,qCAAa,OAAc;AACrC;AAEO,SAAS,oBAAoB;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAQ,4CAAC,4CAAmB;AAAA;AAAA,EAC9B;AAEJ;AAEO,SAAS,iBAAiB;AAC/B,SACE,4EACE;AAAA,iDAAC,sBAAK,SAAQ,WAAU,OAAM,UAC5B;AAAA,kDAAC,0BACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,EAAE,OAAO,QAAQ;AAAA,UACxB,aAAY;AAAA,UAEZ,sDAAC,iCAAc,MAAK,QAClB,sDAAC,0CAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA;AAAA,MACF,GACF;AAAA,MACA,4CAAC,0BACC,sDAAC,wBAAO,4BAAc,GACxB;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAS;AAAA,UACP,EAAE,UAAU,QAAQ,OAAO,MAAM;AAAA,UACjC,EAAE,UAAU,cAAc,OAAO,MAAM;AAAA,UACvC,EAAE,UAAU,aAAa,OAAO,MAAM;AAAA,UACtC,EAAE,UAAU,WAAW,OAAO,MAAM;AAAA,QACtC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,YAAAA,SAAK,qBAAqB,SAAS;AAAA,MAC9C,6BAA0B;AAAA,MAC1B,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":["clsx"]}
+{"version":3,"sources":["../../../../src/lib/api-keys/api-keys.tsx"],"sourcesContent":["import { Button, Flex, Skeleton } from \"@radix-ui/themes\";\nimport { TextField, TextFieldSlot } from \"../elements.js\";\nimport { GenericError } from \"../generic-error.js\";\nimport { EmptyState } from \"../empty-state.js\";\nimport { MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport { SkeletonTable } from \"./skeleton-table.js\";\nimport { CreateApiKeyButton } from \"./create-api-key.js\";\nimport { getDomProps, WidgetRootDomProps, WidgetRootState } from \"../utils.js\";\nimport { ListOrganizationApiKeysResponse } from \"../../api/endpoint.js\";\nimport { ApiKeysSearchProvider } from \"./api-keys-search-provider.js\";\nimport { ApiKeysTable } from \"./api-keys-table.js\";\n\ninterface ApiKeysProps extends WidgetRootDomProps {\n  apiKeys: ListOrganizationApiKeysResponse;\n  searchQuery: string | null;\n}\n\nconst ApiKeys: React.FC<ApiKeysProps> = ({\n  apiKeys,\n  searchQuery,\n  ...domProps\n}) => {\n  return apiKeys.data.length === 0 && !searchQuery ? (\n    <ApiKeysEmptyState {...getWidgetRootDomProps(\"resolved\", domProps)} />\n  ) : (\n    <ApiKeysSearchProvider>\n      <ApiKeysTable\n        apiKeys={apiKeys}\n        {...getWidgetRootDomProps(\"resolved\", domProps)}\n      />\n    </ApiKeysSearchProvider>\n  );\n};\n\ninterface ApiKeysLoadingProps extends WidgetRootDomProps {}\n\nconst ApiKeysLoading: React.FC<ApiKeysLoadingProps> = (props) => {\n  return (\n    <Flex\n      direction=\"column\"\n      align=\"stretch\"\n      gap=\"3\"\n      {...getWidgetRootDomProps(\"loading\", props)}\n    >\n      <Flex justify=\"between\" align=\"center\">\n        <Skeleton>\n          <TextField\n            name=\"api-keys-widget-search\"\n            style={{ width: \"390px\" }}\n            placeholder=\"Search by name\"\n          >\n            <TextFieldSlot side=\"left\">\n              <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n            </TextFieldSlot>\n          </TextField>\n        </Skeleton>\n        <Skeleton>\n          <Button>Create API key</Button>\n        </Skeleton>\n      </Flex>\n      <SkeletonTable\n        numRows={5}\n        columns={[\n          { children: \"Name\", width: \"25%\" },\n          { children: \"Secret key\", width: \"25%\" },\n          { children: \"Last used\", width: \"25%\" },\n          { children: \"Created\", width: \"25%\" },\n        ]}\n      />\n    </Flex>\n  );\n};\n\ninterface ApiKeysErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst ApiKeysError: React.FC<ApiKeysErrorProps> = ({ error, ...domProps }) => {\n  return (\n    <GenericError error={error} {...getWidgetRootDomProps(\"error\", domProps)} />\n  );\n};\n\nfunction ApiKeysEmptyState(props: WidgetRootDomProps) {\n  return (\n    <EmptyState\n      heading=\"No API keys yet\"\n      message=\"Generate an API key to authenticate and interact with our API.\"\n      action={<CreateApiKeyButton />}\n      {...props}\n    />\n  );\n}\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"api-keys\",\n    widgetState: state,\n  });\n}\n\nexport type { ApiKeysProps, ApiKeysLoadingProps, ApiKeysErrorProps };\nexport { ApiKeys, ApiKeysLoading, ApiKeysError };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBI;AAvBJ,oBAAuC;AACvC,sBAAyC;AACzC,2BAA6B;AAC7B,yBAA2B;AAC3B,yBAAoC;AACpC,4BAA8B;AAC9B,4BAAmC;AACnC,mBAAiE;AAEjE,sCAAsC;AACtC,4BAA6B;AAO7B,MAAM,UAAkC,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SAAO,QAAQ,KAAK,WAAW,KAAK,CAAC,cACnC,4CAAC,qBAAmB,GAAG,sBAAsB,YAAY,QAAQ,GAAG,IAEpE,4CAAC,yDACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG,sBAAsB,YAAY,QAAQ;AAAA;AAAA,EAChD,GACF;AAEJ;AAIA,MAAM,iBAAgD,CAAC,UAAU;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAM;AAAA,MACN,KAAI;AAAA,MACH,GAAG,sBAAsB,WAAW,KAAK;AAAA,MAE1C;AAAA,qDAAC,sBAAK,SAAQ,WAAU,OAAM,UAC5B;AAAA,sDAAC,0BACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,EAAE,OAAO,QAAQ;AAAA,cACxB,aAAY;AAAA,cAEZ,sDAAC,iCAAc,MAAK,QAClB,sDAAC,0CAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA;AAAA,UACF,GACF;AAAA,UACA,4CAAC,0BACC,sDAAC,wBAAO,4BAAc,GACxB;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,SAAS;AAAA,cACP,EAAE,UAAU,QAAQ,OAAO,MAAM;AAAA,cACjC,EAAE,UAAU,cAAc,OAAO,MAAM;AAAA,cACvC,EAAE,UAAU,aAAa,OAAO,MAAM;AAAA,cACtC,EAAE,UAAU,WAAW,OAAO,MAAM;AAAA,YACtC;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAMA,MAAM,eAA4C,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM;AAC5E,SACE,4CAAC,qCAAa,OAAe,GAAG,sBAAsB,SAAS,QAAQ,GAAG;AAE9E;AAEA,SAAS,kBAAkB,OAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,QAAQ,4CAAC,4CAAmB;AAAA,MAC3B,GAAG;AAAA;AAAA,EACN;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/api-keys/api-keys.d.cts

@@ -1,11 +1,19 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Flex } from '@radix-ui/themes';
+import { WidgetRootDomProps } from '../utils.cjs';
+import { ListOrganizationApiKeysResponse } from '../../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../../api/widgets-api-client.cjs';
 
-declare function ApiKeysError({ error }: {
+interface ApiKeysProps extends WidgetRootDomProps {
+    apiKeys: ListOrganizationApiKeysResponse;
+    searchQuery: string | null;
+}
+declare const ApiKeys: React.FC<ApiKeysProps>;
+interface ApiKeysLoadingProps extends WidgetRootDomProps {
+}
+declare const ApiKeysLoading: React.FC<ApiKeysLoadingProps>;
+interface ApiKeysErrorProps extends WidgetRootDomProps {
     error: unknown;
-}): react_jsx_runtime.JSX.Element;
-declare function ApiKeysEmptyState(): react_jsx_runtime.JSX.Element;
-declare function ApiKeysLoading(): react_jsx_runtime.JSX.Element;
-declare function ApiKeysRoot({ className, children, ...props }: React.ComponentProps<typeof Flex>): react_jsx_runtime.JSX.Element;
+}
+declare const ApiKeysError: React.FC<ApiKeysErrorProps>;
 
-export { ApiKeysEmptyState, ApiKeysError, ApiKeysLoading, ApiKeysRoot };
+export { ApiKeys, ApiKeysError, type ApiKeysErrorProps, ApiKeysLoading, type ApiKeysLoadingProps, type ApiKeysProps };

package/dist/cjs/lib/card-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/card-list.tsx"],"sourcesContent":["import { Box, Card, CardProps, Inset } from \"@radix-ui/themes\";\n\nexport function Root({ children, ...props }: CardProps) {\n  return (\n    <Card size=\"2\" {...props} className=\"woswidgets-card-list\">\n      <Inset side=\"all\" clip=\"padding-box\">\n        {children}\n      </Inset>\n    </Card>\n  );\n}\n\nexport function Item({ children }: { children: React.ReactNode }) {\n  return (\n    <Inset\n      side=\"x\"\n      px=\"current\"\n      className=\"woswidgets-card-list-item\"\n      clip=\"padding-box\"\n    >\n      <Box px=\"4\" py=\"4\">\n        {children}\n      </Box>\n    </Inset>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKM;AALN,oBAA4C;AAErC,SAAS,KAAK,EAAE,UAAU,GAAG,MAAM,GAAc;AACtD,SACE,4CAAC,sBAAK,MAAK,KAAK,GAAG,OAAO,WAAU,wBAClC,sDAAC,uBAAM,MAAK,OAAM,MAAK,eACpB,UACH,GACF;AAEJ;AAEO,SAAS,KAAK,EAAE,SAAS,GAAkC;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAG;AAAA,MACH,WAAU;AAAA,MACV,MAAK;AAAA,MAEL,sDAAC,qBAAI,IAAG,KAAI,IAAG,KACZ,UACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/cjs/lib/constants.cjs

@@ -20,16 +20,19 @@ var constants_exports = {};
 __export(constants_exports, {
   USER_ROW_LIMIT: () => USER_ROW_LIMIT,
   WIDGETS_API_VERSION: () => WIDGETS_API_VERSION,
-  WIDGETS_CLASS_NAMESPACE: () => WIDGETS_CLASS_NAMESPACE
+  WIDGETS_CLASS_NAMESPACE: () => WIDGETS_CLASS_NAMESPACE,
+  WIDGETS_DATA_ATTRIBUTE_NAMESPACE: () => WIDGETS_DATA_ATTRIBUTE_NAMESPACE
 });
 module.exports = __toCommonJS(constants_exports);
 const USER_ROW_LIMIT = 10;
 const WIDGETS_API_VERSION = "1";
 const WIDGETS_CLASS_NAMESPACE = "woswidgets";
+const WIDGETS_DATA_ATTRIBUTE_NAMESPACE = "woswidgets";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   USER_ROW_LIMIT,
   WIDGETS_API_VERSION,
-  WIDGETS_CLASS_NAMESPACE
+  WIDGETS_CLASS_NAMESPACE,
+  WIDGETS_DATA_ATTRIBUTE_NAMESPACE
 });
 //# sourceMappingURL=constants.cjs.map

package/dist/cjs/lib/constants.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/constants.ts"],"sourcesContent":["export const USER_ROW_LIMIT = 10;\nexport const WIDGETS_API_VERSION = \"1\";\nexport const WIDGETS_CLASS_NAMESPACE = \"woswidgets\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,0BAA0B;","names":[]}
+{"version":3,"sources":["../../../src/lib/constants.ts"],"sourcesContent":["export const USER_ROW_LIMIT = 10;\nexport const WIDGETS_API_VERSION = \"1\";\nexport const WIDGETS_CLASS_NAMESPACE = \"woswidgets\";\nexport const WIDGETS_DATA_ATTRIBUTE_NAMESPACE = \"woswidgets\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,0BAA0B;AAChC,MAAM,mCAAmC;","names":[]}

package/dist/cjs/lib/constants.d.cts

@@ -1,5 +1,6 @@
 declare const USER_ROW_LIMIT = 10;
 declare const WIDGETS_API_VERSION = "1";
 declare const WIDGETS_CLASS_NAMESPACE = "woswidgets";
+declare const WIDGETS_DATA_ATTRIBUTE_NAMESPACE = "woswidgets";
 
-export { USER_ROW_LIMIT, WIDGETS_API_VERSION, WIDGETS_CLASS_NAMESPACE };
+export { USER_ROW_LIMIT, WIDGETS_API_VERSION, WIDGETS_CLASS_NAMESPACE, WIDGETS_DATA_ATTRIBUTE_NAMESPACE };

package/dist/cjs/lib/elevated-access.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/elevated-access.tsx"],"sourcesContent":["import * as Form from \"@radix-ui/react-form\";\nimport { AlertDialog, Callout, Dialog, Flex, Text } from \"@radix-ui/themes\";\nimport { useMe, useSendVerification, useVerify } from \"../api/endpoint.js\";\nimport { useElevatedAccessToken } from \"../api/api-provider.js\";\nimport { PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { PrimaryButton, SecondaryButton } from \"./elements.js\";\nimport * as Otp from \"./otp-input.js\";\n\ninterface ElevatedAccessProps extends PropsWithChildren {\n  onVerified?: () => Promise<unknown>;\n  type?: \"dialog\" | \"alert\";\n}\n\nexport function ElevatedAccess({\n  type = \"dialog\",\n  children,\n  onVerified,\n}: ElevatedAccessProps) {\n  const { elevatedAccess } = useElevatedAccessToken();\n  const [authenticationChallengeId, setAuthenticationChallengeId] =\n    useState<string>();\n\n  const prevAccessToken = useRef(elevatedAccess);\n\n  useEffect(() => {\n    prevAccessToken.current = elevatedAccess;\n  }, [elevatedAccess]);\n\n  if (elevatedAccess) {\n    return <>{children}</>;\n  }\n\n  if (!authenticationChallengeId) {\n    const hasTokenExpired = !!prevAccessToken.current;\n\n    return (\n      <SendVerificationEmailForm\n        type={type}\n        hasTokenExpired={hasTokenExpired}\n        onSuccess={(challengeId) => {\n          setAuthenticationChallengeId(challengeId);\n        }}\n      />\n    );\n  }\n\n  if (authenticationChallengeId) {\n    return (\n      <VerificationIdentityForm\n        type={type}\n        authenticationChallengeId={authenticationChallengeId}\n        onSuccess={() => {\n          // Reset the challenge id\n          setAuthenticationChallengeId(undefined);\n\n          return onVerified?.();\n        }}\n      />\n    );\n  }\n\n  return null;\n}\n\ninterface SendVerificationEmailFormProps {\n  onSuccess: (challengeId: string) => unknown | Promise<unknown>;\n  type: \"dialog\" | \"alert\";\n  hasTokenExpired: boolean;\n}\n\nfunction SendVerificationEmailForm({\n  onSuccess,\n  type,\n  hasTokenExpired,\n}: SendVerificationEmailFormProps) {\n  const { data: me } = useMe();\n  const sendVerification = useSendVerification({\n    mutation: { onSuccess: (data) => onSuccess(data.authenticationChallenge) },\n  });\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    sendVerification.mutate();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Title>\n        {hasTokenExpired\n          ? \"Your verification token has expired\"\n          : \"Verify your identity\"}\n      </Title>\n\n      <Description color=\"gray\" mb=\"5\">\n        To continue, we need to confirm your identity. We'll send a temporary\n        verification code to{\" \"}\n        <Text weight=\"bold\" highContrast>\n          {me?.email}\n        </Text>\n        .\n      </Description>\n\n      {sendVerification.error && (\n        <Callout.Root color=\"red\" mt=\"-2\" mb=\"0\">\n          <Callout.Text>\n            {getMutationErrorMessage(sendVerification.error)}\n          </Callout.Text>\n        </Callout.Root>\n      )}\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <SecondaryButton type=\"button\" disabled={sendVerification.isPending}>\n            Cancel\n          </SecondaryButton>\n        </Close>\n        <PrimaryButton type=\"submit\" loading={sendVerification.isPending}>\n          Send verification code\n        </PrimaryButton>\n      </Flex>\n    </form>\n  );\n}\n\ninterface VerificationIdentityFormProps {\n  onSuccess?: () => unknown | Promise<unknown>;\n  authenticationChallengeId: string;\n  type: \"dialog\" | \"alert\";\n}\n\nfunction VerificationIdentityForm({\n  onSuccess,\n  authenticationChallengeId,\n  type,\n}: VerificationIdentityFormProps) {\n  const { data: me } = useMe();\n  const { setElevatedAccess } = useElevatedAccessToken();\n  const verifyIdentity = useVerify();\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const code = formData.get(\"otp-code\")?.toString() ?? \"\";\n\n    setIsSubmitting(true);\n\n    try {\n      // Mutate async so we can wait for the onSuccess callback as well\n      const newAuthState = await verifyIdentity.mutateAsync({\n        data: {\n          code,\n          authenticationChallengeId,\n        },\n      });\n\n      const in10Seconds = new Date(Date.now() + 5 * 1000);\n\n      setElevatedAccess({\n        token: newAuthState.elevatedAccessToken,\n        // expiresAt: newAuthState.expiresAt,\n        expiresAt: in10Seconds.toISOString(),\n      });\n\n      if (onSuccess) {\n        await new Promise((resolve) => setTimeout(resolve, 200));\n        await onSuccess();\n      }\n    } catch (error) {\n      console.error(error);\n    }\n\n    setIsSubmitting(false);\n  };\n\n  return (\n    <Form.Root onSubmit={handleSubmit}>\n      <Title>Verify your identity</Title>\n\n      <Description color=\"gray\">\n        A verification code was sent to{\" \"}\n        <Text weight=\"bold\" highContrast>\n          {me?.email}\n        </Text>\n        . Please enter it below.\n      </Description>\n\n      <Flex direction=\"column\" gap=\"2\" mt=\"5\" mx=\"auto\" width=\"fit-content\">\n        <Otp.Root\n          autoSubmit\n          gap=\"2\"\n          justify=\"center\"\n          columns=\"repeat(6, 48px)\"\n          width=\"fit-content\"\n          rows=\"48px\"\n          name=\"otp-code\"\n          readOnly={isSubmitting}\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        {verifyIdentity.error && (\n          <Text color=\"red\" size=\"2\" as=\"p\">\n            {getMutationErrorMessage(verifyIdentity.error)}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <SecondaryButton type=\"button\">Cancel</SecondaryButton>\n        </Close>\n\n        <PrimaryButton type=\"submit\" loading={isSubmitting}>\n          Confirm\n        </PrimaryButton>\n      </Flex>\n    </Form.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  let message = typeof error === \"string\" ? error : \"\";\n\n  if (error instanceof Error) {\n    message = error.message;\n  } else 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 || message === \"Bad Request\") {\n    message = \"Invalid code, please try again.\";\n  }\n\n  return message;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/elevated-access.tsx"],"sourcesContent":["import * as Form from \"@radix-ui/react-form\";\nimport { AlertDialog, Callout, Dialog, Flex, Text } from \"@radix-ui/themes\";\nimport { useMe, useSendVerification, useVerify } from \"../api/endpoint.js\";\nimport { useElevatedAccessToken } from \"../api/api-provider.js\";\nimport { PropsWithChildren, useEffect, useRef, useState } from \"react\";\nimport { PrimaryButton, SecondaryButton } from \"./elements.js\";\nimport * as Otp from \"./otp-input.js\";\n\ninterface ElevatedAccessProps extends PropsWithChildren {\n  onVerified?: () => Promise<unknown>;\n  type?: \"dialog\" | \"alert\";\n}\n\nexport function ElevatedAccess({\n  type = \"dialog\",\n  children,\n  onVerified,\n}: ElevatedAccessProps) {\n  const { elevatedAccess } = useElevatedAccessToken();\n  const [authenticationChallengeId, setAuthenticationChallengeId] =\n    useState<string>();\n\n  const prevAccessToken = useRef(elevatedAccess);\n\n  useEffect(() => {\n    prevAccessToken.current = elevatedAccess;\n  }, [elevatedAccess]);\n\n  if (elevatedAccess) {\n    return <>{children}</>;\n  }\n\n  if (!authenticationChallengeId) {\n    // FIXME: This should be refactored\n    // eslint-disable-next-line react-hooks/refs\n    const hasTokenExpired = !!prevAccessToken.current;\n\n    return (\n      <SendVerificationEmailForm\n        type={type}\n        hasTokenExpired={hasTokenExpired}\n        onSuccess={(challengeId) => {\n          setAuthenticationChallengeId(challengeId);\n        }}\n      />\n    );\n  }\n\n  if (authenticationChallengeId) {\n    return (\n      <VerificationIdentityForm\n        type={type}\n        authenticationChallengeId={authenticationChallengeId}\n        onSuccess={() => {\n          // Reset the challenge id\n          setAuthenticationChallengeId(undefined);\n\n          return onVerified?.();\n        }}\n      />\n    );\n  }\n\n  return null;\n}\n\ninterface SendVerificationEmailFormProps {\n  onSuccess: (challengeId: string) => unknown | Promise<unknown>;\n  type: \"dialog\" | \"alert\";\n  hasTokenExpired: boolean;\n}\n\nfunction SendVerificationEmailForm({\n  onSuccess,\n  type,\n  hasTokenExpired,\n}: SendVerificationEmailFormProps) {\n  const { data: me } = useMe();\n  const sendVerification = useSendVerification({\n    mutation: { onSuccess: (data) => onSuccess(data.authenticationChallenge) },\n  });\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    sendVerification.mutate();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <Title>\n        {hasTokenExpired\n          ? \"Your verification token has expired\"\n          : \"Verify your identity\"}\n      </Title>\n\n      <Description color=\"gray\" mb=\"5\">\n        To continue, we need to confirm your identity. We'll send a temporary\n        verification code to{\" \"}\n        <Text weight=\"bold\" highContrast>\n          {me?.email}\n        </Text>\n        .\n      </Description>\n\n      {sendVerification.error && (\n        <Callout.Root color=\"red\" mt=\"-2\" mb=\"0\">\n          <Callout.Text>\n            {getMutationErrorMessage(sendVerification.error)}\n          </Callout.Text>\n        </Callout.Root>\n      )}\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <SecondaryButton type=\"button\" disabled={sendVerification.isPending}>\n            Cancel\n          </SecondaryButton>\n        </Close>\n        <PrimaryButton type=\"submit\" loading={sendVerification.isPending}>\n          Send verification code\n        </PrimaryButton>\n      </Flex>\n    </form>\n  );\n}\n\ninterface VerificationIdentityFormProps {\n  onSuccess?: () => unknown | Promise<unknown>;\n  authenticationChallengeId: string;\n  type: \"dialog\" | \"alert\";\n}\n\nfunction VerificationIdentityForm({\n  onSuccess,\n  authenticationChallengeId,\n  type,\n}: VerificationIdentityFormProps) {\n  const { data: me } = useMe();\n  const { setElevatedAccess } = useElevatedAccessToken();\n  const verifyIdentity = useVerify();\n  const [isSubmitting, setIsSubmitting] = useState(false);\n\n  const Title = type === \"dialog\" ? Dialog.Title : AlertDialog.Title;\n  const Description =\n    type === \"dialog\" ? Dialog.Description : AlertDialog.Description;\n  const Close = type === \"dialog\" ? Dialog.Close : AlertDialog.Cancel;\n  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n\n    const formData = new FormData(event.currentTarget);\n    const code = formData.get(\"otp-code\")?.toString() ?? \"\";\n\n    setIsSubmitting(true);\n\n    try {\n      // Mutate async so we can wait for the onSuccess callback as well\n      const newAuthState = await verifyIdentity.mutateAsync({\n        data: {\n          code,\n          authenticationChallengeId,\n        },\n      });\n\n      const in10Seconds = new Date(Date.now() + 5 * 1000);\n\n      setElevatedAccess({\n        token: newAuthState.elevatedAccessToken,\n        // expiresAt: newAuthState.expiresAt,\n        expiresAt: in10Seconds.toISOString(),\n      });\n\n      if (onSuccess) {\n        await new Promise((resolve) => setTimeout(resolve, 200));\n        await onSuccess();\n      }\n    } catch (error) {\n      console.error(error);\n    }\n\n    setIsSubmitting(false);\n  };\n\n  return (\n    <Form.Root onSubmit={handleSubmit}>\n      <Title>Verify your identity</Title>\n\n      <Description color=\"gray\">\n        A verification code was sent to{\" \"}\n        <Text weight=\"bold\" highContrast>\n          {me?.email}\n        </Text>\n        . Please enter it below.\n      </Description>\n\n      <Flex direction=\"column\" gap=\"2\" mt=\"5\" mx=\"auto\" width=\"fit-content\">\n        <Otp.Root\n          autoSubmit\n          gap=\"2\"\n          justify=\"center\"\n          columns=\"repeat(6, 48px)\"\n          width=\"fit-content\"\n          rows=\"48px\"\n          name=\"otp-code\"\n          readOnly={isSubmitting}\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        {verifyIdentity.error && (\n          <Text color=\"red\" size=\"2\" as=\"p\">\n            {getMutationErrorMessage(verifyIdentity.error)}\n          </Text>\n        )}\n      </Flex>\n\n      <Flex justify=\"end\" align=\"center\" gap=\"3\" mt=\"5\">\n        <Close>\n          <SecondaryButton type=\"button\">Cancel</SecondaryButton>\n        </Close>\n\n        <PrimaryButton type=\"submit\" loading={isSubmitting}>\n          Confirm\n        </PrimaryButton>\n      </Flex>\n    </Form.Root>\n  );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n  let message = typeof error === \"string\" ? error : \"\";\n\n  if (error instanceof Error) {\n    message = error.message;\n  } else 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 || message === \"Bad Request\") {\n    message = \"Invalid code, please try again.\";\n  }\n\n  return message;\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/lib/empty-state.cjs

@@ -23,14 +23,30 @@ __export(empty_state_exports, {
 module.exports = __toCommonJS(empty_state_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_themes = require("@radix-ui/themes");
-function EmptyState({ heading, message, action }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { p: "6", gap: "4", justify: "center", align: "center", direction: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", maxWidth: "420px", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Heading, { size: "5", align: "center", mb: "1", wrap: "balance", as: "h3", children: heading }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", align: "center", wrap: "balance", color: "gray", children: message })
-    ] }),
-    action
-  ] });
+function EmptyState({
+  heading,
+  message,
+  action,
+  ...domProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_themes.Flex,
+    {
+      p: "6",
+      gap: "4",
+      justify: "center",
+      align: "center",
+      direction: "column",
+      ...domProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", maxWidth: "420px", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Heading, { size: "5", align: "center", mb: "1", wrap: "balance", as: "h3", children: heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", align: "center", wrap: "balance", color: "gray", children: message })
+        ] }),
+        action
+      ]
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/lib/empty-state.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/empty-state.tsx"],"sourcesContent":["import { Flex, Heading, Text } from \"@radix-ui/themes\";\n\ninterface EmptyStateProps {\n  heading: string;\n  message: string;\n  action?: React.ReactNode;\n}\n\nexport function EmptyState({ heading, message, action }: EmptyStateProps) {\n  return (\n    <Flex p=\"6\" gap=\"4\" justify=\"center\" align=\"center\" direction=\"column\">\n      <Flex direction=\"column\" gap=\"1\" maxWidth=\"420px\">\n        <Heading size=\"5\" align=\"center\" mb=\"1\" wrap=\"balance\" as=\"h3\">\n          {heading}\n        </Heading>\n\n        <Text as=\"p\" align=\"center\" wrap=\"balance\" color=\"gray\">\n          {message}\n        </Text>\n      </Flex>\n\n      {action}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWM;AAXN,oBAAoC;AAQ7B,SAAS,WAAW,EAAE,SAAS,SAAS,OAAO,GAAoB;AACxE,SACE,6CAAC,sBAAK,GAAE,KAAI,KAAI,KAAI,SAAQ,UAAS,OAAM,UAAS,WAAU,UAC5D;AAAA,iDAAC,sBAAK,WAAU,UAAS,KAAI,KAAI,UAAS,SACxC;AAAA,kDAAC,yBAAQ,MAAK,KAAI,OAAM,UAAS,IAAG,KAAI,MAAK,WAAU,IAAG,MACvD,mBACH;AAAA,MAEA,4CAAC,sBAAK,IAAG,KAAI,OAAM,UAAS,MAAK,WAAU,OAAM,QAC9C,mBACH;AAAA,OACF;AAAA,IAEC;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/lib/empty-state.tsx"],"sourcesContent":["import { Flex, Heading, Text } from \"@radix-ui/themes\";\nimport { WidgetRootDomProps } from \"./utils.js\";\n\ninterface EmptyStateProps extends WidgetRootDomProps {\n  heading: string;\n  message: string;\n  action?: React.ReactNode;\n}\n\nexport function EmptyState({\n  heading,\n  message,\n  action,\n  ...domProps\n}: EmptyStateProps) {\n  return (\n    <Flex\n      p=\"6\"\n      gap=\"4\"\n      justify=\"center\"\n      align=\"center\"\n      direction=\"column\"\n      {...domProps}\n    >\n      <Flex direction=\"column\" gap=\"1\" maxWidth=\"420px\">\n        <Heading size=\"5\" align=\"center\" mb=\"1\" wrap=\"balance\" as=\"h3\">\n          {heading}\n        </Heading>\n\n        <Text as=\"p\" align=\"center\" wrap=\"balance\" color=\"gray\">\n          {message}\n        </Text>\n      </Flex>\n\n      {action}\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBM;AAxBN,oBAAoC;AAS7B,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,KAAI;AAAA,MACJ,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA,qDAAC,sBAAK,WAAU,UAAS,KAAI,KAAI,UAAS,SACxC;AAAA,sDAAC,yBAAQ,MAAK,KAAI,OAAM,UAAS,IAAG,KAAI,MAAK,WAAU,IAAG,MACvD,mBACH;AAAA,UAEA,4CAAC,sBAAK,IAAG,KAAI,OAAM,UAAS,MAAK,WAAU,OAAM,QAC9C,mBACH;AAAA,WACF;AAAA,QAEC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/cjs/lib/empty-state.d.cts

@@ -1,10 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { WidgetRootDomProps } from './utils.cjs';
+import '../api/endpoint.cjs';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.cjs';
 
-interface EmptyStateProps {
+interface EmptyStateProps extends WidgetRootDomProps {
     heading: string;
     message: string;
     action?: React.ReactNode;
 }
-declare function EmptyState({ heading, message, action }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+declare function EmptyState({ heading, message, action, ...domProps }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
 export { EmptyState };

package/dist/cjs/lib/errors.cjs

@@ -52,7 +52,7 @@ class NoAuthTokenError extends Error {
 class IncorrectPermissionsError extends Error {
   constructor(args) {
     super("Incorrect permissions");
-    this.name = "NoPermissionError";
+    this.name = "IncorrectPermissionsError";
     this.context = args?.context;
   }
 }

package/dist/cjs/lib/errors.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/errors.ts"],"sourcesContent":["type QueryType = \"query\" | \"mutation\";\ntype RecordType = \"users\" | \"roles\";\n\nexport class FetchError extends Error {\n  queryType: QueryType;\n  recordType: RecordType;\n  context: unknown;\n  constructor(args: {\n    message: string;\n    queryType: QueryType;\n    recordType: RecordType;\n    context?: unknown;\n  }) {\n    super(args.message);\n    this.name = \"FetchError\";\n    this.queryType = args.queryType;\n    this.recordType = args.recordType;\n    this.context = args.context;\n  }\n}\n\nexport class ApiError extends Error {\n  status: number;\n  queryType: QueryType;\n  recordType: RecordType;\n  context: unknown;\n  constructor(args: {\n    message: string;\n    queryType: QueryType;\n    recordType: RecordType;\n    status: number;\n    context?: unknown;\n  }) {\n    super(args.message);\n    this.name = \"ApiError\";\n    this.status = args.status;\n    this.queryType = args.queryType;\n    this.recordType = args.recordType;\n  }\n}\n\nexport class NoAuthTokenError extends Error {\n  context: unknown;\n  constructor(args?: { context?: unknown }) {\n    super(\"No auth token provided\");\n    this.name = \"NoAuthTokenError\";\n    this.context = args?.context;\n  }\n}\n\nexport class IncorrectPermissionsError extends Error {\n  context: unknown;\n  constructor(args?: { context?: unknown }) {\n    super(\"Incorrect permissions\");\n    this.name = \"NoPermissionError\";\n    this.context = args?.context;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,mBAAmB,MAAM;AAAA,EAIpC,YAAY,MAKT;AACD,UAAM,KAAK,OAAO;AAClB,SAAK,OAAO;AACZ,SAAK,YAAY,KAAK;AACtB,SAAK,aAAa,KAAK;AACvB,SAAK,UAAU,KAAK;AAAA,EACtB;AACF;AAEO,MAAM,iBAAiB,MAAM;AAAA,EAKlC,YAAY,MAMT;AACD,UAAM,KAAK,OAAO;AAClB,SAAK,OAAO;AACZ,SAAK,SAAS,KAAK;AACnB,SAAK,YAAY,KAAK;AACtB,SAAK,aAAa,KAAK;AAAA,EACzB;AACF;AAEO,MAAM,yBAAyB,MAAM;AAAA,EAE1C,YAAY,MAA8B;AACxC,UAAM,wBAAwB;AAC9B,SAAK,OAAO;AACZ,SAAK,UAAU,MAAM;AAAA,EACvB;AACF;AAEO,MAAM,kCAAkC,MAAM;AAAA,EAEnD,YAAY,MAA8B;AACxC,UAAM,uBAAuB;AAC7B,SAAK,OAAO;AACZ,SAAK,UAAU,MAAM;AAAA,EACvB;AACF;","names":[]}
+{"version":3,"sources":["../../../src/lib/errors.ts"],"sourcesContent":["type QueryType = \"query\" | \"mutation\";\ntype RecordType = \"users\" | \"roles\";\n\nexport class FetchError extends Error {\n  queryType: QueryType;\n  recordType: RecordType;\n  context: unknown;\n  constructor(args: {\n    message: string;\n    queryType: QueryType;\n    recordType: RecordType;\n    context?: unknown;\n  }) {\n    super(args.message);\n    this.name = \"FetchError\";\n    this.queryType = args.queryType;\n    this.recordType = args.recordType;\n    this.context = args.context;\n  }\n}\n\nexport class ApiError extends Error {\n  status: number;\n  queryType: QueryType;\n  recordType: RecordType;\n  context: unknown;\n  constructor(args: {\n    message: string;\n    queryType: QueryType;\n    recordType: RecordType;\n    status: number;\n    context?: unknown;\n  }) {\n    super(args.message);\n    this.name = \"ApiError\";\n    this.status = args.status;\n    this.queryType = args.queryType;\n    this.recordType = args.recordType;\n  }\n}\n\nexport class NoAuthTokenError extends Error {\n  context: unknown;\n  constructor(args?: { context?: unknown }) {\n    super(\"No auth token provided\");\n    this.name = \"NoAuthTokenError\";\n    this.context = args?.context;\n  }\n}\n\nexport class IncorrectPermissionsError extends Error {\n  context: unknown;\n  constructor(args?: { context?: unknown }) {\n    super(\"Incorrect permissions\");\n    this.name = \"IncorrectPermissionsError\";\n    this.context = args?.context;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,mBAAmB,MAAM;AAAA,EAIpC,YAAY,MAKT;AACD,UAAM,KAAK,OAAO;AAClB,SAAK,OAAO;AACZ,SAAK,YAAY,KAAK;AACtB,SAAK,aAAa,KAAK;AACvB,SAAK,UAAU,KAAK;AAAA,EACtB;AACF;AAEO,MAAM,iBAAiB,MAAM;AAAA,EAKlC,YAAY,MAMT;AACD,UAAM,KAAK,OAAO;AAClB,SAAK,OAAO;AACZ,SAAK,SAAS,KAAK;AACnB,SAAK,YAAY,KAAK;AACtB,SAAK,aAAa,KAAK;AAAA,EACzB;AACF;AAEO,MAAM,yBAAyB,MAAM;AAAA,EAE1C,YAAY,MAA8B;AACxC,UAAM,wBAAwB;AAC9B,SAAK,OAAO;AACZ,SAAK,UAAU,MAAM;AAAA,EACvB;AACF;AAEO,MAAM,kCAAkC,MAAM;AAAA,EAEnD,YAAY,MAA8B;AACxC,UAAM,uBAAuB;AAC7B,SAAK,OAAO;AACZ,SAAK,UAAU,MAAM;AAAA,EACvB;AACF;","names":[]}

package/dist/cjs/lib/generic-error.cjs

@@ -28,7 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var generic_error_exports = {};
 __export(generic_error_exports, {
-  GenericError: () => GenericError
+  GenericError: () => GenericError,
+  getErrorMessage: () => getErrorMessage
 });
 module.exports = __toCommonJS(generic_error_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -36,74 +37,71 @@ var React = __toESM(require("react"), 1);
 var import_themes = require("@radix-ui/themes");
 var import_errors = require("./errors.js");
 var import_react_icons = require("@radix-ui/react-icons");
-function GenericError({ error }) {
+function GenericError({ error, ...domProps }) {
   React.useEffect(() => {
     console.error(error);
   }, [error]);
-  const render = (heading, message) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { p: "6", justify: "center", align: "center", direction: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_themes.Flex,
-      {
-        align: "center",
-        justify: "center",
-        width: "32px",
-        height: "32px",
-        mb: "2",
-        style: {
-          borderRadius: "9999px",
-          backgroundColor: "var(--red-a4)",
-          color: "var(--red-a11)"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.Cross2Icon, { width: "24px", height: "24px" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", maxWidth: "420px", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Heading, { size: "5", align: "center", mb: "1", wrap: "balance", as: "h3", children: heading }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", align: "center", wrap: "balance", color: "gray", children: message })
-    ] })
-  ] });
+  const { heading, message } = getErrorMessage(error);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_themes.Flex,
+    {
+      p: "6",
+      justify: "center",
+      align: "center",
+      direction: "column",
+      ...domProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_themes.Flex,
+          {
+            align: "center",
+            justify: "center",
+            width: "32px",
+            height: "32px",
+            mb: "2",
+            style: {
+              borderRadius: "9999px",
+              backgroundColor: "var(--red-a4)",
+              color: "var(--red-a11)"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.Cross2Icon, { width: "24px", height: "24px" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_themes.Flex, { direction: "column", gap: "1", maxWidth: "420px", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Heading, { size: "5", align: "center", mb: "1", wrap: "balance", as: "h3", children: heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, { as: "p", align: "center", wrap: "balance", color: "gray", children: message })
+        ] })
+      ]
+    }
+  );
+}
+function getErrorMessage(error) {
   if (error instanceof import_errors.FetchError) {
-    return render(
-      "Error fetching data",
-      "An error occurred. You may need to configure CORS in the WorkOS Dashboard. Contact your organization admin for support."
-    );
+    return {
+      heading: "Error fetching data",
+      message: "An error occurred. You may need to configure CORS in the WorkOS Dashboard."
+    };
   }
   if (error instanceof import_errors.NoAuthTokenError) {
-    return render(
-      "Error fetching data",
-      "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 render(
-      "Error fetching data",
-      "Authorization error. Contact your organization admin for support."
-    );
+    return {
+      heading: "Authorization error",
+      message: "You likely forgot to provide an authorization token to the widget."
+    };
   }
   if (error instanceof import_errors.IncorrectPermissionsError) {
-    return render(
-      "Error fetching data",
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        "Incorrect permissions.",
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_themes.Link,
-          {
-            href: "https://workos.com/docs/user-management/widgets/user-management",
-            target: "_blank",
-            children: "Check that the correct permissions have been assigned."
-          }
-        )
-      ] })
-    );
+    return {
+      heading: "Incorrect permissions",
+      message: "Check that the correct permissions have been assigned."
+    };
   }
-  return render(
-    "Error fetching data",
-    "An unknown error occurred. If the problem continues, contact the site owner."
-  );
+  return {
+    heading: "Error fetching data",
+    message: "An unexpected error occurred. Check your network connection or try refreshing the page."
+  };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  GenericError
+  GenericError,
+  getErrorMessage
 });
 //# sourceMappingURL=generic-error.cjs.map