@workos-inc/widgets 1.5.0 → 1.5.1

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

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

package/dist/esm/lib/card-list.js.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":"AAKM;AALN,SAAS,KAAK,MAAiB,aAAa;AAErC,SAAS,KAAK,EAAE,UAAU,GAAG,MAAM,GAAc;AACtD,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,OAAO,WAAU,wBAClC,8BAAC,SAAM,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,8BAAC,OAAI,IAAG,KAAI,IAAG,KACZ,UACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/lib/errors.js

@@ -26,7 +26,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/esm/lib/errors.js.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":"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":"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/esm/lib/generic-error.d.ts

@@ -3,5 +3,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 declare function GenericError({ error }: {
     error: unknown;
 }): react_jsx_runtime.JSX.Element;
+declare function getErrorMessage(error: unknown): {
+    heading: string;
+    message: string;
+};
 
-export { GenericError };
+export { GenericError, getErrorMessage };

package/dist/esm/lib/generic-error.js

@@ -1,8 +1,7 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Flex, Heading, Link, Text } from "@radix-ui/themes";
+import { Flex, Heading, Text } from "@radix-ui/themes";
 import {
-  ApiError,
   FetchError,
   IncorrectPermissionsError,
   NoAuthTokenError
@@ -12,7 +11,7 @@ function GenericError({ error }) {
   React.useEffect(() => {
     console.error(error);
   }, [error]);
-  const render = (heading, message) => /* @__PURE__ */ jsxs(Flex, { p: "6", justify: "center", align: "center", direction: "column", children: [
+  const render = (heading2, message2) => /* @__PURE__ */ jsxs(Flex, { p: "6", justify: "center", align: "center", direction: "column", children: [
     /* @__PURE__ */ jsx(
       Flex,
       {
@@ -30,51 +29,39 @@ function GenericError({ error }) {
       }
     ),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", maxWidth: "420px", children: [
-      /* @__PURE__ */ jsx(Heading, { size: "5", align: "center", mb: "1", wrap: "balance", as: "h3", children: heading }),
-      /* @__PURE__ */ jsx(Text, { as: "p", align: "center", wrap: "balance", color: "gray", children: message })
+      /* @__PURE__ */ jsx(Heading, { size: "5", align: "center", mb: "1", wrap: "balance", as: "h3", children: heading2 }),
+      /* @__PURE__ */ jsx(Text, { as: "p", align: "center", wrap: "balance", color: "gray", children: message2 })
     ] })
   ] });
+  const { heading, message } = getErrorMessage(error);
+  return render(heading, message);
+}
+function getErrorMessage(error) {
   if (error instanceof 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 NoAuthTokenError) {
-    return render(
-      "Error fetching data",
-      "Authorization error. You likely forgot to provide an authorization token to the Users Management Widget."
-    );
-  }
-  if (error instanceof 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 IncorrectPermissionsError) {
-    return render(
-      "Error fetching data",
-      /* @__PURE__ */ jsxs(Fragment, { children: [
-        "Incorrect permissions.",
-        " ",
-        /* @__PURE__ */ jsx(
-          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."
+  };
 }
 export {
-  GenericError
+  GenericError,
+  getErrorMessage
 };
 //# sourceMappingURL=generic-error.js.map

package/dist/esm/lib/generic-error.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/generic-error.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Flex, Heading, Link, Text } from \"@radix-ui/themes\";\nimport {\n  ApiError,\n  FetchError,\n  IncorrectPermissionsError,\n  NoAuthTokenError,\n} from \"./errors.js\";\nimport { Cross2Icon } from \"@radix-ui/react-icons\";\n\nexport function GenericError({ error }: { error: unknown }) {\n  React.useEffect(() => {\n    console.error(error);\n  }, [error]);\n\n  const render = (heading: string, message: React.ReactNode) => (\n    <Flex p=\"6\" justify=\"center\" align=\"center\" direction=\"column\">\n      <Flex\n        align=\"center\"\n        justify=\"center\"\n        width=\"32px\"\n        height=\"32px\"\n        mb=\"2\"\n        style={{\n          borderRadius: \"9999px\",\n          backgroundColor: \"var(--red-a4)\",\n          color: \"var(--red-a11)\",\n        }}\n      >\n        <Cross2Icon width=\"24px\" height=\"24px\" />\n      </Flex>\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    </Flex>\n  );\n\n  if (error instanceof FetchError) {\n    return render(\n      \"Error fetching data\",\n      \"An error occurred. You may need to configure CORS in the WorkOS Dashboard. \" +\n        \"Contact your organization admin for support.\",\n    );\n  }\n\n  if (error instanceof NoAuthTokenError) {\n    return render(\n      \"Error fetching data\",\n      \"Authorization error. You likely forgot to provide an authorization \" +\n        \"token to the Users Management Widget.\",\n    );\n  }\n\n  if (error instanceof ApiError && error.status === 404) {\n    // The widgets API treats all authorization errors as 404s. If there is a\n    // legitimate 404, it's a bug on our end but there's currently no way to\n    // distinguish between the two.\n    return render(\n      \"Error fetching data\",\n      \"Authorization error. Contact your organization admin for support.\",\n    );\n  }\n\n  if (error instanceof IncorrectPermissionsError) {\n    return render(\n      \"Error fetching data\",\n      <>\n        Incorrect permissions.{\" \"}\n        <Link\n          href=\"https://workos.com/docs/user-management/widgets/user-management\"\n          target=\"_blank\"\n        >\n          Check that the correct permissions have been assigned.\n        </Link>\n      </>,\n    );\n  }\n\n  return render(\n    \"Error fetching data\",\n    \"An unknown error occurred. If the problem continues, contact the site owner.\",\n  );\n}\n"],"mappings":"AA6BQ,SA4CF,UA5CE,KAGF,YAHE;AA7BR,YAAY,WAAW;AACvB,SAAS,MAAM,SAAS,MAAM,YAAY;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAEpB,SAAS,aAAa,EAAE,MAAM,GAAuB;AAC1D,QAAM,UAAU,MAAM;AACpB,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,SAAS,CAAC,SAAiB,YAC/B,qBAAC,QAAK,GAAE,KAAI,SAAQ,UAAS,OAAM,UAAS,WAAU,UACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,OAAO;AAAA,UACL,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,OAAO;AAAA,QACT;AAAA,QAEA,8BAAC,cAAW,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,IACzC;AAAA,IAEA,qBAAC,QAAK,WAAU,UAAS,KAAI,KAAI,UAAS,SACxC;AAAA,0BAAC,WAAQ,MAAK,KAAI,OAAM,UAAS,IAAG,KAAI,MAAK,WAAU,IAAG,MACvD,mBACH;AAAA,MAEA,oBAAC,QAAK,IAAG,KAAI,OAAM,UAAS,MAAK,WAAU,OAAM,QAC9C,mBACH;AAAA,OACF;AAAA,KACF;AAGF,MAAI,iBAAiB,YAAY;AAC/B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,IAEF;AAAA,EACF;AAEA,MAAI,iBAAiB,kBAAkB;AACrC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,IAEF;AAAA,EACF;AAEA,MAAI,iBAAiB,YAAY,MAAM,WAAW,KAAK;AAIrD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,MAAI,iBAAiB,2BAA2B;AAC9C,WAAO;AAAA,MACL;AAAA,MACA,iCAAE;AAAA;AAAA,QACuB;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,QAAO;AAAA,YACR;AAAA;AAAA,QAED;AAAA,SACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../src/lib/generic-error.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Flex, Heading, Text } from \"@radix-ui/themes\";\nimport {\n  FetchError,\n  IncorrectPermissionsError,\n  NoAuthTokenError,\n} from \"./errors.js\";\nimport { Cross2Icon } from \"@radix-ui/react-icons\";\n\nexport function GenericError({ error }: { error: unknown }) {\n  React.useEffect(() => {\n    console.error(error);\n  }, [error]);\n\n  const render = (heading: string, message: React.ReactNode) => (\n    <Flex p=\"6\" justify=\"center\" align=\"center\" direction=\"column\">\n      <Flex\n        align=\"center\"\n        justify=\"center\"\n        width=\"32px\"\n        height=\"32px\"\n        mb=\"2\"\n        style={{\n          borderRadius: \"9999px\",\n          backgroundColor: \"var(--red-a4)\",\n          color: \"var(--red-a11)\",\n        }}\n      >\n        <Cross2Icon width=\"24px\" height=\"24px\" />\n      </Flex>\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    </Flex>\n  );\n\n  const { heading, message } = getErrorMessage(error);\n  return render(heading, message);\n}\n\nexport function getErrorMessage(error: unknown) {\n  if (error instanceof FetchError) {\n    return {\n      heading: \"Error fetching data\",\n      message:\n        \"An error occurred. You may need to configure CORS in the WorkOS Dashboard.\",\n    };\n  }\n\n  if (error instanceof NoAuthTokenError) {\n    return {\n      heading: \"Authorization error\",\n      message:\n        \"You likely forgot to provide an authorization token to the widget.\",\n    };\n  }\n\n  if (error instanceof IncorrectPermissionsError) {\n    return {\n      heading: \"Incorrect permissions\",\n      message: \"Check that the correct permissions have been assigned.\",\n    };\n  }\n\n  return {\n    heading: \"Error fetching data\",\n    message:\n      \"An unexpected error occurred. Check your network connection or try refreshing the page.\",\n  };\n}\n"],"mappings":"AA4BQ,cAGF,YAHE;AA5BR,YAAY,WAAW;AACvB,SAAS,MAAM,SAAS,YAAY;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAEpB,SAAS,aAAa,EAAE,MAAM,GAAuB;AAC1D,QAAM,UAAU,MAAM;AACpB,YAAQ,MAAM,KAAK;AAAA,EACrB,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,SAAS,CAACA,UAAiBC,aAC/B,qBAAC,QAAK,GAAE,KAAI,SAAQ,UAAS,OAAM,UAAS,WAAU,UACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,OAAO;AAAA,UACL,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,OAAO;AAAA,QACT;AAAA,QAEA,8BAAC,cAAW,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,IACzC;AAAA,IAEA,qBAAC,QAAK,WAAU,UAAS,KAAI,KAAI,UAAS,SACxC;AAAA,0BAAC,WAAQ,MAAK,KAAI,OAAM,UAAS,IAAG,KAAI,MAAK,WAAU,IAAG,MACvD,UAAAD,UACH;AAAA,MAEA,oBAAC,QAAK,IAAG,KAAI,OAAM,UAAS,MAAK,WAAU,OAAM,QAC9C,UAAAC,UACH;AAAA,OACF;AAAA,KACF;AAGF,QAAM,EAAE,SAAS,QAAQ,IAAI,gBAAgB,KAAK;AAClD,SAAO,OAAO,SAAS,OAAO;AAChC;AAEO,SAAS,gBAAgB,OAAgB;AAC9C,MAAI,iBAAiB,YAAY;AAC/B,WAAO;AAAA,MACL,SAAS;AAAA,MACT,SACE;AAAA,IACJ;AAAA,EACF;AAEA,MAAI,iBAAiB,kBAAkB;AACrC,WAAO;AAAA,MACL,SAAS;AAAA,MACT,SACE;AAAA,IACJ;AAAA,EACF;AAEA,MAAI,iBAAiB,2BAA2B;AAC9C,WAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,IACT,SACE;AAAA,EACJ;AACF;","names":["heading","message"]}

package/dist/esm/lib/use-permissions.d.ts

@@ -1,6 +1,6 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 
 type WidgetScope = "widgets:users-table:manage" | "widgets:api-keys:manage";
-declare function usePermissions(scope: WidgetScope, authToken: null | string | Promise<string>): _tanstack_react_query.UseQueryResult<boolean, Error>;
+declare function usePermissions(scope: WidgetScope): _tanstack_react_query.UseQueryResult<boolean, Error>;
 
 export { usePermissions };

package/dist/esm/lib/use-permissions.js

@@ -1,13 +1,13 @@
-import { useQuery } from "@tanstack/react-query";
+import { skipToken, useQuery } from "@tanstack/react-query";
+import { getClaims } from "../api/utils.js";
 import { IncorrectPermissionsError, NoAuthTokenError } from "./errors.js";
-function usePermissions(scope, authToken) {
+import { useApi } from "../api/api-provider.js";
+function usePermissions(scope) {
+  const { authToken } = useApi();
   return useQuery({
     queryKey: ["permission", scope, authToken],
-    queryFn: async () => {
-      if (!authToken) {
-        throw new NoAuthTokenError();
-      }
-      const { permissions } = parseJwt(await authToken);
+    queryFn: authToken ? async () => {
+      const { permissions } = getClaims(authToken);
       if (!permissions || !Array.isArray(permissions)) {
         throw new NoAuthTokenError();
       }
@@ -15,16 +15,9 @@ function usePermissions(scope, authToken) {
         throw new IncorrectPermissionsError();
       }
       return true;
-    }
+    } : skipToken
   });
 }
-function parseJwt(token) {
-  try {
-    return JSON.parse(atob(token.split(".")[1]));
-  } catch {
-    return {};
-  }
-}
 export {
   usePermissions
 };

package/dist/esm/lib/use-permissions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/use-permissions.ts"],"sourcesContent":["import { useQuery } from \"@tanstack/react-query\";\nimport { IncorrectPermissionsError, NoAuthTokenError } from \"./errors.js\";\n\n// TODO find a way to reuse the same type in the @workos-inc/node package\ntype WidgetScope = \"widgets:users-table:manage\" | \"widgets:api-keys:manage\";\n\nexport function usePermissions(\n  scope: WidgetScope,\n  authToken: null | string | Promise<string>,\n) {\n  return useQuery({\n    queryKey: [\"permission\", scope, authToken],\n    queryFn: async () => {\n      if (!authToken) {\n        throw new NoAuthTokenError();\n      }\n\n      const { permissions } = parseJwt(await authToken);\n\n      // When the permissions is not present in the token\n      if (!permissions || !Array.isArray(permissions)) {\n        throw new NoAuthTokenError();\n      }\n\n      // When the scope is not present in the permissions\n      if (!permissions.includes(scope)) {\n        throw new IncorrectPermissionsError();\n      }\n\n      return true;\n    },\n  });\n}\n\nfunction parseJwt(token: string) {\n  try {\n    return JSON.parse(atob(token.split(\".\")[1]));\n  } catch {\n    return {};\n  }\n}\n"],"mappings":"AAAA,SAAS,gBAAgB;AACzB,SAAS,2BAA2B,wBAAwB;AAKrD,SAAS,eACd,OACA,WACA;AACA,SAAO,SAAS;AAAA,IACd,UAAU,CAAC,cAAc,OAAO,SAAS;AAAA,IACzC,SAAS,YAAY;AACnB,UAAI,CAAC,WAAW;AACd,cAAM,IAAI,iBAAiB;AAAA,MAC7B;AAEA,YAAM,EAAE,YAAY,IAAI,SAAS,MAAM,SAAS;AAGhD,UAAI,CAAC,eAAe,CAAC,MAAM,QAAQ,WAAW,GAAG;AAC/C,cAAM,IAAI,iBAAiB;AAAA,MAC7B;AAGA,UAAI,CAAC,YAAY,SAAS,KAAK,GAAG;AAChC,cAAM,IAAI,0BAA0B;AAAA,MACtC;AAEA,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AACH;AAEA,SAAS,SAAS,OAAe;AAC/B,MAAI;AACF,WAAO,KAAK,MAAM,KAAK,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC;AAAA,EAC7C,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;AACF;","names":[]}
+{"version":3,"sources":["../../../src/lib/use-permissions.ts"],"sourcesContent":["import { skipToken, useQuery } from \"@tanstack/react-query\";\nimport { getClaims } from \"../api/utils.js\";\nimport { IncorrectPermissionsError, NoAuthTokenError } from \"./errors.js\";\nimport { useApi } from \"../api/api-provider.js\";\n\n// TODO find a way to reuse the same type in the @workos-inc/node package\ntype WidgetScope = \"widgets:users-table:manage\" | \"widgets:api-keys:manage\";\n\nexport function usePermissions(scope: WidgetScope) {\n  const { authToken } = useApi();\n\n  return useQuery({\n    queryKey: [\"permission\", scope, authToken],\n    queryFn: authToken\n      ? async () => {\n          const { permissions } = getClaims(authToken);\n\n          // When the permissions is not present in the token\n          if (!permissions || !Array.isArray(permissions)) {\n            throw new NoAuthTokenError();\n          }\n\n          // When the scope is not present in the permissions\n          if (!permissions.includes(scope)) {\n            throw new IncorrectPermissionsError();\n          }\n\n          return true;\n        }\n      : skipToken,\n  });\n}\n"],"mappings":"AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B,wBAAwB;AAC5D,SAAS,cAAc;AAKhB,SAAS,eAAe,OAAoB;AACjD,QAAM,EAAE,UAAU,IAAI,OAAO;AAE7B,SAAO,SAAS;AAAA,IACd,UAAU,CAAC,cAAc,OAAO,SAAS;AAAA,IACzC,SAAS,YACL,YAAY;AACV,YAAM,EAAE,YAAY,IAAI,UAAU,SAAS;AAG3C,UAAI,CAAC,eAAe,CAAC,MAAM,QAAQ,WAAW,GAAG;AAC/C,cAAM,IAAI,iBAAiB;AAAA,MAC7B;AAGA,UAAI,CAAC,YAAY,SAAS,KAAK,GAAG;AAChC,cAAM,IAAI,0BAA0B;AAAA,MACtC;AAEA,aAAO;AAAA,IACT,IACA;AAAA,EACN,CAAC;AACH;","names":[]}

package/dist/esm/lib/user-security.js

@@ -9,7 +9,7 @@ import { SetPasswordDialog } from "./set-password-dialog.js";
 import { ChangePasswordDialog } from "./change-password-dialog.js";
 import { AddMfaDialog } from "./add-mfa-dialog.js";
 import { ResetMfaDialog } from "./reset-mfa-dialog.js";
-import * as CardList from "../card-list.js";
+import * as CardList from "./card-list.js";
 import { GenericError } from "./generic-error.js";
 import { getComparativeReadableDate } from "./utils.js";
 const UserSecurity = ({ settings }) => {

package/dist/esm/lib/user-security.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-security.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport clsx from \"clsx\";\nimport { SecondaryButton, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { ButtonIcon, LockClosedIcon } from \"@radix-ui/react-icons\";\nimport { SetPasswordDialog } from \"./set-password-dialog.js\";\nimport { ChangePasswordDialog } from \"./change-password-dialog.js\";\nimport { AddMfaDialog } from \"./add-mfa-dialog.js\";\nimport type {\n  AuthenticationInformationResponseData as AuthenticationSettings,\n  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,\n  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,\n} from \"../api/endpoint.js\";\nimport { ResetMfaDialog } from \"./reset-mfa-dialog.js\";\nimport * as CardList from \"../card-list.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { getComparativeReadableDate } from \"./utils.js\";\n\ninterface UserSecurityProps {\n  settings: AuthenticationSettings;\n}\n\nexport const UserSecurity = ({ settings }: UserSecurityProps) => {\n  const passwordSettings = settings.verificationMethods.Password;\n  const mfaSettings = settings.verificationMethods.Mfa;\n\n  return (\n    <CardList.Root\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"user-security\"\n    >\n      {passwordSettings && (\n        <CardList.Item>\n          <PasswordSettings settings={passwordSettings} />\n        </CardList.Item>\n      )}\n\n      {mfaSettings && (\n        <CardList.Item>\n          <MfaSettings\n            settings={mfaSettings}\n            isPasswordSet={!!passwordSettings?.isSetUp}\n          />\n        </CardList.Item>\n      )}\n    </CardList.Root>\n  );\n};\n\nexport function UserSecurityError({ error }: { error: unknown }) {\n  return (\n    <Card size=\"2\">\n      <GenericError error={error} />\n    </Card>\n  );\n}\n\nexport const UserSecurityLoading: React.FC = () => {\n  return (\n    <Card size=\"2\">\n      <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>Password</Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>Set a password to access your account</Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <SecondaryButton>Change</SecondaryButton>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({\n  settings,\n}: {\n  settings: NonNullable<PasswordVerificationMethod>;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <LockClosedIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Password\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              Last used{\" \"}\n              {getComparativeReadableDate(\n                new Date(),\n                new Date(settings.lastUsed),\n              )}\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Set a password to access your account\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <SecondaryButton>Change</SecondaryButton>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <SecondaryButton>Set a password</SecondaryButton>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: NonNullable<MfaVerificationMethod>;\n  isPasswordSet: boolean;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <ButtonIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Multi-factor authentication\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            Authenticator app\n            {settings.lastUsed && (\n              <>\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  Last used{\" \"}\n                  {getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                  )}\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Secure your account with an extra verification step\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <SecondaryButton>Disable</SecondaryButton>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <SecondaryButton>Set up authenticator app</SecondaryButton>\n        </AddMfaDialog>\n      )}\n    </Grid>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/user-security.tsx"],"sourcesContent":["\"use client\";\n\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport clsx from \"clsx\";\nimport { SecondaryButton, Skeleton } from \"./elements.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { ButtonIcon, LockClosedIcon } from \"@radix-ui/react-icons\";\nimport { SetPasswordDialog } from \"./set-password-dialog.js\";\nimport { ChangePasswordDialog } from \"./change-password-dialog.js\";\nimport { AddMfaDialog } from \"./add-mfa-dialog.js\";\nimport type {\n  AuthenticationInformationResponseData as AuthenticationSettings,\n  AuthenticationInformationResponseDataVerificationMethodsPassword as PasswordVerificationMethod,\n  AuthenticationInformationResponseDataVerificationMethodsMfa as MfaVerificationMethod,\n} from \"../api/endpoint.js\";\nimport { ResetMfaDialog } from \"./reset-mfa-dialog.js\";\nimport * as CardList from \"./card-list.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { getComparativeReadableDate } from \"./utils.js\";\n\ninterface UserSecurityProps {\n  settings: AuthenticationSettings;\n}\n\nexport const UserSecurity = ({ settings }: UserSecurityProps) => {\n  const passwordSettings = settings.verificationMethods.Password;\n  const mfaSettings = settings.verificationMethods.Mfa;\n\n  return (\n    <CardList.Root\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"user-security\"\n    >\n      {passwordSettings && (\n        <CardList.Item>\n          <PasswordSettings settings={passwordSettings} />\n        </CardList.Item>\n      )}\n\n      {mfaSettings && (\n        <CardList.Item>\n          <MfaSettings\n            settings={mfaSettings}\n            isPasswordSet={!!passwordSettings?.isSetUp}\n          />\n        </CardList.Item>\n      )}\n    </CardList.Root>\n  );\n};\n\nexport function UserSecurityError({ error }: { error: unknown }) {\n  return (\n    <Card size=\"2\">\n      <GenericError error={error} />\n    </Card>\n  );\n}\n\nexport const UserSecurityLoading: React.FC = () => {\n  return (\n    <Card size=\"2\">\n      <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>Password</Skeleton>\n          </Text>\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            <Skeleton>Set a password to access your account</Skeleton>\n          </Text>\n        </Flex>\n\n        <ChangePasswordDialog>\n          <Skeleton>\n            <SecondaryButton>Change</SecondaryButton>\n          </Skeleton>\n        </ChangePasswordDialog>\n      </Grid>\n    </Card>\n  );\n};\n\nfunction PasswordSettings({\n  settings,\n}: {\n  settings: NonNullable<PasswordVerificationMethod>;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <LockClosedIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Password\n        </Text>\n\n        {settings.isSetUp ? (\n          settings.lastUsed && (\n            <Text size=\"2\" color=\"gray\">\n              Last used{\" \"}\n              {getComparativeReadableDate(\n                new Date(),\n                new Date(settings.lastUsed),\n              )}\n            </Text>\n          )\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Set a password to access your account\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ChangePasswordDialog>\n          <SecondaryButton>Change</SecondaryButton>\n        </ChangePasswordDialog>\n      ) : (\n        <SetPasswordDialog>\n          <SecondaryButton>Set a password</SecondaryButton>\n        </SetPasswordDialog>\n      )}\n    </Grid>\n  );\n}\n\nfunction MfaSettings({\n  settings,\n  isPasswordSet,\n}: {\n  settings: NonNullable<MfaVerificationMethod>;\n  isPasswordSet: boolean;\n}) {\n  return (\n    <Grid columns=\"auto 1fr auto\" align=\"center\" gap=\"4\">\n      <IconPanel>\n        <ButtonIcon />\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          Multi-factor authentication\n        </Text>\n\n        {settings.isSetUp ? (\n          <Text size=\"2\">\n            Authenticator app\n            {settings.lastUsed && (\n              <>\n                <Text size=\"2\" color=\"gray\" mx=\"1\">\n                  ∙\n                </Text>\n                <Text size=\"2\" color=\"gray\">\n                  Last used{\" \"}\n                  {getComparativeReadableDate(\n                    new Date(),\n                    new Date(settings.lastUsed),\n                  )}\n                </Text>\n              </>\n            )}\n          </Text>\n        ) : (\n          <Text as=\"p\" size=\"2\" color=\"gray\">\n            Secure your account with an extra verification step\n          </Text>\n        )}\n      </Flex>\n\n      {settings.isSetUp ? (\n        <ResetMfaDialog isPasswordSet={isPasswordSet}>\n          <SecondaryButton>Disable</SecondaryButton>\n        </ResetMfaDialog>\n      ) : (\n        <AddMfaDialog>\n          <SecondaryButton>Set up authenticator app</SecondaryButton>\n        </AddMfaDialog>\n      )}\n    </Grid>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/esm/lib/user-sessions.js

@@ -10,7 +10,7 @@ import {
 } from "./utils.js";
 import { LogoutDialog } from "./logout-dialog.js";
 import { LogoutAllSessionsDialog } from "./logout-all-sessions-dialog.js";
-import * as CardList from "../card-list.js";
+import * as CardList from "./card-list.js";
 import { IconPanel } from "./icon-panel.js";
 import { useState } from "react";
 import { GenericError } from "./generic-error.js";

package/dist/esm/lib/user-sessions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport clsx from \"clsx\";\nimport { Badge, SecondaryButton, Skeleton } from \"./elements.js\";\nimport {\n  getComparativeReadableDate,\n  getUserLocation,\n  parseUserAgent,\n} from \"./utils.js\";\nimport { LogoutDialog } from \"./logout-dialog.js\";\nimport { LogoutAllSessionsDialog } from \"./logout-all-sessions-dialog.js\";\nimport { ActiveSession } from \"../api/endpoint.js\";\nimport * as CardList from \"../card-list.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { useState } from \"react\";\nimport { GenericError } from \"./generic-error.js\";\nimport { LaptopIcon, MobileIcon } from \"@radix-ui/react-icons\";\n\ninterface UserSessionsProps {\n  sessionsData: ActiveSession[];\n  currentSessionId: string;\n}\n\nexport const UserSessions = ({\n  sessionsData: sessions,\n  currentSessionId,\n}: UserSessionsProps) => {\n  const currentSession = sessions.find(\n    (session) => session.id === currentSessionId,\n  );\n  const otherSessions = sessions.filter(\n    (session) => session.id !== currentSessionId,\n  );\n  const [openLogoutDialog, setOpenLogoutDialog] = useState(false);\n  const [sessionToSignOut, setSessionToSignOut] =\n    useState<ActiveSession | null>(null);\n  const [openLogoutAllSessionsDialog, setOpenLogoutAllSessionsDialog] =\n    useState(false);\n\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"user-sessions\"\n    >\n      <CardList.Root>\n        {currentSession && (\n          <CardList.Item>\n            <UserSession session={currentSession} isCurrentSession />\n          </CardList.Item>\n        )}\n\n        {otherSessions.map((session) => (\n          <CardList.Item key={session.id}>\n            <UserSession\n              session={session}\n              onSignOut={() => {\n                setSessionToSignOut(session);\n                setOpenLogoutDialog(true);\n              }}\n            />\n          </CardList.Item>\n        ))}\n      </CardList.Root>\n\n      {sessions.length > 1 && (\n        <Card size=\"2\">\n          <Flex gap=\"2\" justify=\"between\" align=\"center\">\n            <Box>\n              <Text size=\"2\" highContrast weight=\"bold\" as=\"p\">\n                Sign out of all other devices\n              </Text>\n              <Text size=\"2\" color=\"gray\" as=\"p\">\n                Remove access from all devices except this one\n              </Text>\n            </Box>\n\n            <SecondaryButton\n              onClick={() => {\n                setOpenLogoutAllSessionsDialog(true);\n              }}\n            >\n              Sign out\n            </SecondaryButton>\n          </Flex>\n        </Card>\n      )}\n\n      {sessionToSignOut && (\n        <LogoutDialog\n          session={sessionToSignOut}\n          open={openLogoutDialog}\n          onOpenChange={setOpenLogoutDialog}\n        />\n      )}\n\n      <LogoutAllSessionsDialog\n        currentSessionId={currentSessionId}\n        open={openLogoutAllSessionsDialog}\n        onOpenChange={setOpenLogoutAllSessionsDialog}\n      />\n    </Flex>\n  );\n};\n\nexport const UserSessionsLoading: 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>The location</Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>The location</Skeleton>\n          </Text>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nexport function UserSessionsError({ error }: { error: unknown }) {\n  return (\n    <Card size=\"2\">\n      <GenericError error={error} />\n    </Card>\n  );\n}\n\ninterface UserSessionProps {\n  session: ActiveSession;\n  isCurrentSession?: boolean;\n  onSignOut?: (session: ActiveSession) => void;\n}\n\nconst UserSession = ({\n  session,\n  isCurrentSession = false,\n  onSignOut,\n}: UserSessionProps) => {\n  const userAgent = parseUserAgent(session.userAgent);\n  const userLocation = getUserLocation(\n    session.currentLocation,\n    session.ipAddress,\n  );\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel>\n        {userAgent.isMobile ? <MobileIcon /> : <LaptopIcon />}\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          {userAgent.pretty}\n        </Text>\n\n        <Flex gap=\"1\" align=\"center\">\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            {userLocation}\n          </Text>\n\n          {isCurrentSession && <Badge ml=\"2\">This device</Badge>}\n\n          {!isCurrentSession && session.lastActivityAt && (\n            <>\n              <Text size=\"2\" color=\"gray\">\n                ∙\n              </Text>\n              <Text size=\"2\" color=\"gray\">\n                Last seen{\" \"}\n                {getComparativeReadableDate(\n                  new Date(),\n                  new Date(session.lastActivityAt),\n                )}\n              </Text>\n            </>\n          )}\n        </Flex>\n      </Flex>\n\n      {!isCurrentSession && (\n        <Flex ml=\"auto\" mr=\"2\">\n          <Button\n            variant=\"ghost\"\n            onClick={() => {\n              onSignOut?.(session);\n            }}\n          >\n            Sign out\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Button, Card, Flex, Text } from \"@radix-ui/themes\";\nimport clsx from \"clsx\";\nimport { Badge, SecondaryButton, Skeleton } from \"./elements.js\";\nimport {\n  getComparativeReadableDate,\n  getUserLocation,\n  parseUserAgent,\n} from \"./utils.js\";\nimport { LogoutDialog } from \"./logout-dialog.js\";\nimport { LogoutAllSessionsDialog } from \"./logout-all-sessions-dialog.js\";\nimport { ActiveSession } from \"../api/endpoint.js\";\nimport * as CardList from \"./card-list.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { useState } from \"react\";\nimport { GenericError } from \"./generic-error.js\";\nimport { LaptopIcon, MobileIcon } from \"@radix-ui/react-icons\";\n\ninterface UserSessionsProps {\n  sessionsData: ActiveSession[];\n  currentSessionId: string;\n}\n\nexport const UserSessions = ({\n  sessionsData: sessions,\n  currentSessionId,\n}: UserSessionsProps) => {\n  const currentSession = sessions.find(\n    (session) => session.id === currentSessionId,\n  );\n  const otherSessions = sessions.filter(\n    (session) => session.id !== currentSessionId,\n  );\n  const [openLogoutDialog, setOpenLogoutDialog] = useState(false);\n  const [sessionToSignOut, setSessionToSignOut] =\n    useState<ActiveSession | null>(null);\n  const [openLogoutAllSessionsDialog, setOpenLogoutAllSessionsDialog] =\n    useState(false);\n\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      className={clsx(\"woswidgets-widget\")}\n      data-woswidgets-widget-id=\"user-sessions\"\n    >\n      <CardList.Root>\n        {currentSession && (\n          <CardList.Item>\n            <UserSession session={currentSession} isCurrentSession />\n          </CardList.Item>\n        )}\n\n        {otherSessions.map((session) => (\n          <CardList.Item key={session.id}>\n            <UserSession\n              session={session}\n              onSignOut={() => {\n                setSessionToSignOut(session);\n                setOpenLogoutDialog(true);\n              }}\n            />\n          </CardList.Item>\n        ))}\n      </CardList.Root>\n\n      {sessions.length > 1 && (\n        <Card size=\"2\">\n          <Flex gap=\"2\" justify=\"between\" align=\"center\">\n            <Box>\n              <Text size=\"2\" highContrast weight=\"bold\" as=\"p\">\n                Sign out of all other devices\n              </Text>\n              <Text size=\"2\" color=\"gray\" as=\"p\">\n                Remove access from all devices except this one\n              </Text>\n            </Box>\n\n            <SecondaryButton\n              onClick={() => {\n                setOpenLogoutAllSessionsDialog(true);\n              }}\n            >\n              Sign out\n            </SecondaryButton>\n          </Flex>\n        </Card>\n      )}\n\n      {sessionToSignOut && (\n        <LogoutDialog\n          session={sessionToSignOut}\n          open={openLogoutDialog}\n          onOpenChange={setOpenLogoutDialog}\n        />\n      )}\n\n      <LogoutAllSessionsDialog\n        currentSessionId={currentSessionId}\n        open={openLogoutAllSessionsDialog}\n        onOpenChange={setOpenLogoutAllSessionsDialog}\n      />\n    </Flex>\n  );\n};\n\nexport const UserSessionsLoading: 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>The location</Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>The location</Skeleton>\n          </Text>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\nexport function UserSessionsError({ error }: { error: unknown }) {\n  return (\n    <Card size=\"2\">\n      <GenericError error={error} />\n    </Card>\n  );\n}\n\ninterface UserSessionProps {\n  session: ActiveSession;\n  isCurrentSession?: boolean;\n  onSignOut?: (session: ActiveSession) => void;\n}\n\nconst UserSession = ({\n  session,\n  isCurrentSession = false,\n  onSignOut,\n}: UserSessionProps) => {\n  const userAgent = parseUserAgent(session.userAgent);\n  const userLocation = getUserLocation(\n    session.currentLocation,\n    session.ipAddress,\n  );\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel>\n        {userAgent.isMobile ? <MobileIcon /> : <LaptopIcon />}\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          {userAgent.pretty}\n        </Text>\n\n        <Flex gap=\"1\" align=\"center\">\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            {userLocation}\n          </Text>\n\n          {isCurrentSession && <Badge ml=\"2\">This device</Badge>}\n\n          {!isCurrentSession && session.lastActivityAt && (\n            <>\n              <Text size=\"2\" color=\"gray\">\n                ∙\n              </Text>\n              <Text size=\"2\" color=\"gray\">\n                Last seen{\" \"}\n                {getComparativeReadableDate(\n                  new Date(),\n                  new Date(session.lastActivityAt),\n                )}\n              </Text>\n            </>\n          )}\n        </Flex>\n      </Flex>\n\n      {!isCurrentSession && (\n        <Flex ml=\"auto\" mr=\"2\">\n          <Button\n            variant=\"ghost\"\n            onClick={() => {\n              onSignOut?.(session);\n            }}\n          >\n            Sign out\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/esm/organization-switcher.client.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { ApiProvider } from "./api/api-provider.js";
+import { ApiProvider, useApiReady } from "./api/api-provider.js";
 import { useOrganizations } from "./api/endpoint.js";
 import { ErrorBoundary } from "./lib/error-boundary.js";
-import { useIsHydrated } from "./lib/use-is-hydrated.js";
 import {
   OrganizationSwitcherError,
   OrganizationSwitcherLoading,
@@ -31,15 +30,14 @@ const OrganizationSwitcherContent = ({
   variant,
   ...rest
 }) => {
-  const isHydrated = useIsHydrated();
+  const isApiReady = useApiReady();
   const organizationsQuery = useOrganizations({
     query: {
       placeholderData: keepPreviousData
     }
   });
   const organizations = organizationsQuery.data?.data ?? emptyOrganizations;
-  if (organizationsQuery.isLoading || // render loading state on the server to prevent FOUC or hydration mismatch
-  !isHydrated) {
+  if (organizationsQuery.isLoading || !isApiReady) {
     return /* @__PURE__ */ jsx(OrganizationSwitcherLoading, {});
   }
   if (organizationsQuery.isError) {

package/dist/esm/organization-switcher.client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/organization-switcher.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { ApiProvider, AuthToken } from \"./api/api-provider.js\";\nimport { OrganizationInfo, useOrganizations } from \"./api/endpoint.js\";\nimport * as React from \"react\";\nimport { ErrorBoundary } from \"./lib/error-boundary.js\";\nimport { useIsHydrated } from \"./lib/use-is-hydrated.js\";\nimport {\n  OrganizationSwitcherError,\n  OrganizationSwitcherLoading,\n  OrganizationSwitcherPassthroughProps,\n  OrganizationSwitcher as OrganizationSwitcherPresentational,\n} from \"./lib/organization-switcher.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport { keepPreviousData } from \"@tanstack/react-query\";\n\nexport interface OrganizationSwitcherProps\n  extends OrganizationSwitcherPassthroughProps {\n  authToken: AuthToken;\n}\n\nexport const OrganizationSwitcher: React.FC<OrganizationSwitcherProps> = ({\n  authToken,\n  ...passthroughProps\n}) => {\n  const baseUrl = useWorkOsApiUrl();\n\n  return (\n    <ErrorBoundary FallbackComponent={OrganizationSwitcherError}>\n      <ApiProvider\n        widgetType=\"organization-switcher\"\n        authToken={authToken}\n        baseUrl={baseUrl}\n      >\n        <OrganizationSwitcherContent {...passthroughProps} />\n      </ApiProvider>\n    </ErrorBoundary>\n  );\n};\n\nexport { OrganizationSwitcherLoading };\n\n// Constant reference to avoid unnecessary prop changes\nconst emptyOrganizations: OrganizationInfo[] = [];\n\nconst OrganizationSwitcherContent = ({\n  variant,\n  ...rest\n}: OrganizationSwitcherPassthroughProps) => {\n  const isHydrated = useIsHydrated();\n  const organizationsQuery = useOrganizations({\n    query: {\n      placeholderData: keepPreviousData,\n    },\n  });\n\n  const organizations = organizationsQuery.data?.data ?? emptyOrganizations;\n\n  if (\n    organizationsQuery.isLoading ||\n    // render loading state on the server to prevent FOUC or hydration mismatch\n    !isHydrated\n  ) {\n    return <OrganizationSwitcherLoading />;\n  }\n\n  if (organizationsQuery.isError) {\n    return <OrganizationSwitcherError error={organizationsQuery.error} />;\n  }\n\n  return (\n    <ErrorBoundary FallbackComponent={OrganizationSwitcherError}>\n      <OrganizationSwitcherPresentational\n        organizations={organizations}\n        {...rest}\n      />\n    </ErrorBoundary>\n  );\n};\n"],"mappings":";AAkCQ;AAhCR,SAAS,mBAA8B;AACvC,SAA2B,wBAAwB;AAEnD,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EAEA,wBAAwB;AAAA,OACnB;AACP,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAO1B,MAAM,uBAA4D,CAAC;AAAA,EACxE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,UAAU,gBAAgB;AAEhC,SACE,oBAAC,iBAAc,mBAAmB,2BAChC;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA,8BAAC,+BAA6B,GAAG,kBAAkB;AAAA;AAAA,EACrD,GACF;AAEJ;AAKA,MAAM,qBAAyC,CAAC;AAEhD,MAAM,8BAA8B,CAAC;AAAA,EACnC;AAAA,EACA,GAAG;AACL,MAA4C;AAC1C,QAAM,aAAa,cAAc;AACjC,QAAM,qBAAqB,iBAAiB;AAAA,IAC1C,OAAO;AAAA,MACL,iBAAiB;AAAA,IACnB;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,mBAAmB,MAAM,QAAQ;AAEvD,MACE,mBAAmB;AAAA,EAEnB,CAAC,YACD;AACA,WAAO,oBAAC,+BAA4B;AAAA,EACtC;AAEA,MAAI,mBAAmB,SAAS;AAC9B,WAAO,oBAAC,6BAA0B,OAAO,mBAAmB,OAAO;AAAA,EACrE;AAEA,SACE,oBAAC,iBAAc,mBAAmB,2BAChC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/organization-switcher.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { ApiProvider, AuthToken, useApiReady } from \"./api/api-provider.js\";\nimport { OrganizationInfo, useOrganizations } from \"./api/endpoint.js\";\nimport * as React from \"react\";\nimport { ErrorBoundary } from \"./lib/error-boundary.js\";\nimport {\n  OrganizationSwitcherError,\n  OrganizationSwitcherLoading,\n  OrganizationSwitcherPassthroughProps,\n  OrganizationSwitcher as OrganizationSwitcherPresentational,\n} from \"./lib/organization-switcher.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport { keepPreviousData } from \"@tanstack/react-query\";\n\nexport interface OrganizationSwitcherProps\n  extends OrganizationSwitcherPassthroughProps {\n  authToken: AuthToken;\n}\n\nexport const OrganizationSwitcher: React.FC<OrganizationSwitcherProps> = ({\n  authToken,\n  ...passthroughProps\n}) => {\n  const baseUrl = useWorkOsApiUrl();\n\n  return (\n    <ErrorBoundary FallbackComponent={OrganizationSwitcherError}>\n      <ApiProvider\n        widgetType=\"organization-switcher\"\n        authToken={authToken}\n        baseUrl={baseUrl}\n      >\n        <OrganizationSwitcherContent {...passthroughProps} />\n      </ApiProvider>\n    </ErrorBoundary>\n  );\n};\n\nexport { OrganizationSwitcherLoading };\n\n// Constant reference to avoid unnecessary prop changes\nconst emptyOrganizations: OrganizationInfo[] = [];\n\nconst OrganizationSwitcherContent = ({\n  variant,\n  ...rest\n}: OrganizationSwitcherPassthroughProps) => {\n  const isApiReady = useApiReady();\n  const organizationsQuery = useOrganizations({\n    query: {\n      placeholderData: keepPreviousData,\n    },\n  });\n\n  const organizations = organizationsQuery.data?.data ?? emptyOrganizations;\n\n  if (organizationsQuery.isLoading || !isApiReady) {\n    return <OrganizationSwitcherLoading />;\n  }\n\n  if (organizationsQuery.isError) {\n    return <OrganizationSwitcherError error={organizationsQuery.error} />;\n  }\n\n  return (\n    <ErrorBoundary FallbackComponent={OrganizationSwitcherError}>\n      <OrganizationSwitcherPresentational\n        organizations={organizations}\n        {...rest}\n      />\n    </ErrorBoundary>\n  );\n};\n"],"mappings":";AAiCQ;AA/BR,SAAS,aAAwB,mBAAmB;AACpD,SAA2B,wBAAwB;AAEnD,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EAEA,wBAAwB;AAAA,OACnB;AACP,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAO1B,MAAM,uBAA4D,CAAC;AAAA,EACxE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,UAAU,gBAAgB;AAEhC,SACE,oBAAC,iBAAc,mBAAmB,2BAChC;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA,8BAAC,+BAA6B,GAAG,kBAAkB;AAAA;AAAA,EACrD,GACF;AAEJ;AAKA,MAAM,qBAAyC,CAAC;AAEhD,MAAM,8BAA8B,CAAC;AAAA,EACnC;AAAA,EACA,GAAG;AACL,MAA4C;AAC1C,QAAM,aAAa,YAAY;AAC/B,QAAM,qBAAqB,iBAAiB;AAAA,IAC1C,OAAO;AAAA,MACL,iBAAiB;AAAA,IACnB;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,mBAAmB,MAAM,QAAQ;AAEvD,MAAI,mBAAmB,aAAa,CAAC,YAAY;AAC/C,WAAO,oBAAC,+BAA4B;AAAA,EACtC;AAEA,MAAI,mBAAmB,SAAS;AAC9B,WAAO,oBAAC,6BAA0B,OAAO,mBAAmB,OAAO;AAAA,EACrE;AAEA,SACE,oBAAC,iBAAc,mBAAmB,2BAChC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;","names":[]}

package/dist/esm/user-profile.client.js

@@ -5,9 +5,8 @@ import {
   UserProfileLoading,
   UserProfile as UserProfilePresentational
 } from "./lib/user-profile.js";
-import { useIsHydrated } from "./lib/use-is-hydrated.js";
 import { useMe } from "./api/endpoint.js";
-import { ApiProvider } from "./api/api-provider.js";
+import { ApiProvider, useApiReady } from "./api/api-provider.js";
 import { useWorkOsApiUrl } from "./lib/widgets-context.js";
 import { ErrorBoundary } from "./lib/error-boundary.js";
 const UserProfile = ({ authToken }) => {
@@ -23,12 +22,9 @@ const UserProfile = ({ authToken }) => {
   );
 };
 const UserProfileContent = () => {
-  const isHydrated = useIsHydrated();
+  const isApiReady = useApiReady();
   const meQuery = useMe();
-  if (
-    // render loading state on the server to prevent FOUC or hydration mismatch
-    !isHydrated || meQuery.isLoading
-  ) {
+  if (!isApiReady || meQuery.isLoading) {
     return /* @__PURE__ */ jsx(UserProfileLoading, {});
   }
   if (meQuery.isError) {

package/dist/esm/user-profile.client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/user-profile.client.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  UserProfileError,\n  UserProfileLoading,\n  UserProfile as UserProfilePresentational,\n} from \"./lib/user-profile.js\";\nimport { useIsHydrated } from \"./lib/use-is-hydrated.js\";\nimport { useMe } from \"./api/endpoint.js\";\nimport { ApiProvider, AuthToken } from \"./api/api-provider.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport { ErrorBoundary } from \"./lib/error-boundary.js\";\n\nexport interface UserProfileProps {\n  authToken: AuthToken;\n}\n\nexport const UserProfile: React.FC<UserProfileProps> = ({ authToken }) => {\n  const baseUrl = useWorkOsApiUrl();\n\n  return (\n    <ApiProvider\n      widgetType=\"user-profile\"\n      authToken={authToken}\n      baseUrl={baseUrl}\n    >\n      <UserProfileContent />\n    </ApiProvider>\n  );\n};\n\nexport { UserProfileLoading };\n\nconst UserProfileContent = () => {\n  const isHydrated = useIsHydrated();\n  const meQuery = useMe();\n\n  if (\n    // render loading state on the server to prevent FOUC or hydration mismatch\n    !isHydrated ||\n    meQuery.isLoading\n  ) {\n    return <UserProfileLoading />;\n  }\n\n  if (meQuery.isError) {\n    return <UserProfileError error={meQuery.error} />;\n  }\n\n  const user = meQuery.data!;\n\n  return (\n    <ErrorBoundary FallbackComponent={UserProfileError}>\n      <UserProfilePresentational userData={user} />\n    </ErrorBoundary>\n  );\n};\n"],"mappings":";AA2BM;AAxBN;AAAA,EACE;AAAA,EACA;AAAA,EACA,eAAe;AAAA,OACV;AACP,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,mBAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAMvB,MAAM,cAA0C,CAAC,EAAE,UAAU,MAAM;AACxE,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA,8BAAC,sBAAmB;AAAA;AAAA,EACtB;AAEJ;AAIA,MAAM,qBAAqB,MAAM;AAC/B,QAAM,aAAa,cAAc;AACjC,QAAM,UAAU,MAAM;AAEtB;AAAA;AAAA,IAEE,CAAC,cACD,QAAQ;AAAA,IACR;AACA,WAAO,oBAAC,sBAAmB;AAAA,EAC7B;AAEA,MAAI,QAAQ,SAAS;AACnB,WAAO,oBAAC,oBAAiB,OAAO,QAAQ,OAAO;AAAA,EACjD;AAEA,QAAM,OAAO,QAAQ;AAErB,SACE,oBAAC,iBAAc,mBAAmB,kBAChC,8BAAC,6BAA0B,UAAU,MAAM,GAC7C;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/user-profile.client.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  UserProfileError,\n  UserProfileLoading,\n  UserProfile as UserProfilePresentational,\n} from \"./lib/user-profile.js\";\nimport { useMe } from \"./api/endpoint.js\";\nimport { ApiProvider, AuthToken, useApiReady } from \"./api/api-provider.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport { ErrorBoundary } from \"./lib/error-boundary.js\";\n\nexport interface UserProfileProps {\n  authToken: AuthToken;\n}\n\nexport const UserProfile: React.FC<UserProfileProps> = ({ authToken }) => {\n  const baseUrl = useWorkOsApiUrl();\n\n  return (\n    <ApiProvider\n      widgetType=\"user-profile\"\n      authToken={authToken}\n      baseUrl={baseUrl}\n    >\n      <UserProfileContent />\n    </ApiProvider>\n  );\n};\n\nexport { UserProfileLoading };\n\nconst UserProfileContent = () => {\n  const isApiReady = useApiReady();\n  const meQuery = useMe();\n\n  if (!isApiReady || meQuery.isLoading) {\n    return <UserProfileLoading />;\n  }\n\n  if (meQuery.isError) {\n    return <UserProfileError error={meQuery.error} />;\n  }\n\n  const user = meQuery.data!;\n\n  return (\n    <ErrorBoundary FallbackComponent={UserProfileError}>\n      <UserProfilePresentational userData={user} />\n    </ErrorBoundary>\n  );\n};\n"],"mappings":";AA0BM;AAvBN;AAAA,EACE;AAAA,EACA;AAAA,EACA,eAAe;AAAA,OACV;AACP,SAAS,aAAa;AACtB,SAAS,aAAwB,mBAAmB;AACpD,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAMvB,MAAM,cAA0C,CAAC,EAAE,UAAU,MAAM;AACxE,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA,8BAAC,sBAAmB;AAAA;AAAA,EACtB;AAEJ;AAIA,MAAM,qBAAqB,MAAM;AAC/B,QAAM,aAAa,YAAY;AAC/B,QAAM,UAAU,MAAM;AAEtB,MAAI,CAAC,cAAc,QAAQ,WAAW;AACpC,WAAO,oBAAC,sBAAmB;AAAA,EAC7B;AAEA,MAAI,QAAQ,SAAS;AACnB,WAAO,oBAAC,oBAAiB,OAAO,QAAQ,OAAO;AAAA,EACjD;AAEA,QAAM,OAAO,QAAQ;AAErB,SACE,oBAAC,iBAAc,mBAAmB,kBAChC,8BAAC,6BAA0B,UAAU,MAAM,GAC7C;AAEJ;","names":[]}

package/dist/esm/user-security.client.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { ApiProvider } from "./api/api-provider.js";
+import { ApiProvider, useApiReady } from "./api/api-provider.js";
 import { useAuthenticationInformation } from "./api/endpoint.js";
 import {
   UserSecurityError,
   UserSecurityLoading,
   UserSecurity as UserSecurityPresentational
 } from "./lib/user-security.js";
-import { useIsHydrated } from "./lib/use-is-hydrated.js";
 import { useWorkOsApiUrl } from "./lib/widgets-context.js";
 import { ErrorBoundary } from "./lib/error-boundary.js";
 const UserSecurity = ({ authToken }) => {
@@ -23,15 +22,17 @@ const UserSecurity = ({ authToken }) => {
   );
 };
 const UserSecurityContent = () => {
-  const isHydrated = useIsHydrated();
+  const isApiReady = useApiReady();
   const {
     data: settings,
     isLoading,
     isError,
     isSuccess,
     error
-  } = useAuthenticationInformation();
-  if (!isHydrated || isLoading) {
+  } = useAuthenticationInformation({
+    query: { enabled: isApiReady }
+  });
+  if (!isApiReady || isLoading) {
     return /* @__PURE__ */ jsx(UserSecurityLoading, {});
   }
   if (isError || !isSuccess) {

package/dist/esm/user-security.client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/user-security.client.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ApiProvider, AuthToken } from \"./api/api-provider.js\";\nimport { useAuthenticationInformation } from \"./api/endpoint.js\";\nimport {\n  UserSecurityError,\n  UserSecurityLoading,\n  UserSecurity as UserSecurityPresentational,\n} from \"./lib/user-security.js\";\nimport { useIsHydrated } from \"./lib/use-is-hydrated.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport { ErrorBoundary } from \"./lib/error-boundary.js\";\n\nexport interface UserSecurityProps {\n  authToken: AuthToken;\n}\n\nexport const UserSecurity: React.FC<UserSecurityProps> = ({ authToken }) => {\n  const baseUrl = useWorkOsApiUrl();\n\n  return (\n    <ApiProvider\n      widgetType=\"user-security\"\n      authToken={authToken}\n      baseUrl={baseUrl}\n    >\n      <UserSecurityContent />\n    </ApiProvider>\n  );\n};\n\nexport { UserSecurityLoading };\n\nconst UserSecurityContent = () => {\n  const isHydrated = useIsHydrated();\n  const {\n    data: settings,\n    isLoading,\n    isError,\n    isSuccess,\n    error,\n  } = useAuthenticationInformation();\n\n  if (!isHydrated || isLoading) {\n    return <UserSecurityLoading />;\n  }\n\n  if (isError || !isSuccess) {\n    return <UserSecurityError error={error} />;\n  }\n\n  return (\n    <ErrorBoundary FallbackComponent={UserSecurityError}>\n      <UserSecurityPresentational settings={settings.data} />\n    </ErrorBoundary>\n  );\n};\n"],"mappings":";AA2BM;AAxBN,SAAS,mBAA8B;AACvC,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,OACX;AACP,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAMvB,MAAM,eAA4C,CAAC,EAAE,UAAU,MAAM;AAC1E,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA,8BAAC,uBAAoB;AAAA;AAAA,EACvB;AAEJ;AAIA,MAAM,sBAAsB,MAAM;AAChC,QAAM,aAAa,cAAc;AACjC,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,6BAA6B;AAEjC,MAAI,CAAC,cAAc,WAAW;AAC5B,WAAO,oBAAC,uBAAoB;AAAA,EAC9B;AAEA,MAAI,WAAW,CAAC,WAAW;AACzB,WAAO,oBAAC,qBAAkB,OAAc;AAAA,EAC1C;AAEA,SACE,oBAAC,iBAAc,mBAAmB,mBAChC,8BAAC,8BAA2B,UAAU,SAAS,MAAM,GACvD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/user-security.client.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ApiProvider, AuthToken, useApiReady } from \"./api/api-provider.js\";\nimport { useAuthenticationInformation } from \"./api/endpoint.js\";\nimport {\n  UserSecurityError,\n  UserSecurityLoading,\n  UserSecurity as UserSecurityPresentational,\n} from \"./lib/user-security.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport { ErrorBoundary } from \"./lib/error-boundary.js\";\n\nexport interface UserSecurityProps {\n  authToken: AuthToken;\n}\n\nexport const UserSecurity: React.FC<UserSecurityProps> = ({ authToken }) => {\n  const baseUrl = useWorkOsApiUrl();\n\n  return (\n    <ApiProvider\n      widgetType=\"user-security\"\n      authToken={authToken}\n      baseUrl={baseUrl}\n    >\n      <UserSecurityContent />\n    </ApiProvider>\n  );\n};\n\nexport { UserSecurityLoading };\n\nconst UserSecurityContent = () => {\n  const isApiReady = useApiReady();\n  const {\n    data: settings,\n    isLoading,\n    isError,\n    isSuccess,\n    error,\n  } = useAuthenticationInformation({\n    query: { enabled: isApiReady },\n  });\n\n  if (!isApiReady || isLoading) {\n    return <UserSecurityLoading />;\n  }\n\n  if (isError || !isSuccess) {\n    return <UserSecurityError error={error} />;\n  }\n\n  return (\n    <ErrorBoundary FallbackComponent={UserSecurityError}>\n      <UserSecurityPresentational settings={settings.data} />\n    </ErrorBoundary>\n  );\n};\n"],"mappings":";AA0BM;AAvBN,SAAS,aAAwB,mBAAmB;AACpD,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,OACX;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAMvB,MAAM,eAA4C,CAAC,EAAE,UAAU,MAAM;AAC1E,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA,8BAAC,uBAAoB;AAAA;AAAA,EACvB;AAEJ;AAIA,MAAM,sBAAsB,MAAM;AAChC,QAAM,aAAa,YAAY;AAC/B,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,6BAA6B;AAAA,IAC/B,OAAO,EAAE,SAAS,WAAW;AAAA,EAC/B,CAAC;AAED,MAAI,CAAC,cAAc,WAAW;AAC5B,WAAO,oBAAC,uBAAoB;AAAA,EAC9B;AAEA,MAAI,WAAW,CAAC,WAAW;AACzB,WAAO,oBAAC,qBAAkB,OAAc;AAAA,EAC1C;AAEA,SACE,oBAAC,iBAAc,mBAAmB,mBAChC,8BAAC,8BAA2B,UAAU,SAAS,MAAM,GACvD;AAEJ;","names":[]}