npm - @workos-inc/widgets - Versions diffs - 1.7.2 → 1.8.1 - Mend

@workos-inc/widgets 1.7.2 → 1.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1500) hide show

package/dist/esm/lib/users-management.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/lib/users-management.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n Box,\n Flex,\n Grid,\n Separator,\n Table,\n Tooltip,\n Text,\n type TextProps,\n VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport {\n Avatar,\n Badge,\n IconButton,\n Button,\n Select,\n Skeleton,\n TextField,\n} from \"./elements.js\";\nimport { InviteUserDialog } from \"./invite-user-dialog.js\";\nimport { SearchProvider, useSearchContext } from \"./search-provider.js\";\nimport { useIsHydrated } from \"./use-is-hydrated.js\";\nimport { UserActionsDropdown } from \"./user-actions-dropdown.js\";\nimport { UsersFilter } from \"./users-filter.js\";\nimport { UsersSearch } from \"./users-search.js\";\nimport {\n getBestName,\n getComparativeReadableDate,\n getDomProps,\n pluralize,\n WidgetRootState,\n type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { USER_ROW_LIMIT } from \"./constants.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport { Member, MemberRole, MembersQueryResult } from \"../api/endpoint.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { DotsHorizontalIcon } from \"@radix-ui/react-icons\";\n\ninterface UsersManagementProps extends WidgetRootDomProps {\n rolesData: { roles: MemberRole[]; multipleRolesEnabled: boolean };\n userData: MembersQueryResult;\n disableRolesFilter?: boolean;\n // When the users list is loading new users\n isPending: boolean;\n}\n\nconst UsersManagement: React.FC<UsersManagementProps> = ({\n userData,\n rolesData,\n isPending,\n disableRolesFilter,\n ...domProps\n}) => {\n const users = userData?.data ?? [];\n const usersCount = users?.length ?? 0;\n const isHydrated = useIsHydrated();\n const { listMetadata: pagination = {} } = userData;\n const { dispatch } = useUsersManagementContext();\n const isMultipleRolesEnabled = rolesData.multipleRolesEnabled;\n\n // we only want to show the loading indicator for some buttons if the request\n // is still pending after 500ms. If the request is fast enough the indicator\n // is a bit jarring.\n const [deferredLoading, setDeferredLoading] = React.useState(false);\n React.useEffect(() => {\n if (isPending) {\n const timeoutId = window.setTimeout(() => {\n setDeferredLoading(true);\n }, 500);\n return () => {\n window.clearTimeout(timeoutId);\n };\n } else {\n setDeferredLoading(false);\n }\n }, [isPending]);\n\n const showPagination = !!(pagination.before \|\| pagination.after);\n\n return (\n <SearchProvider>\n <Flex\n direction=\"column\"\n gap=\"3\"\n {...getWidgetRootDomProps(\"resolved\", domProps)}\n >\n <Grid columns=\"1fr auto\" gap=\"2\">\n <Flex gap=\"2\" align=\"center\">\n <Box flexBasis=\"380px\" flexGrow=\"0\" flexShrink=\"1\">\n <UsersSearch />\n </Box>\n <Box flexGrow=\"0\" flexShrink=\"0\">\n <UsersFilter\n roles={rolesData.roles}\n disabled={disableRolesFilter}\n />\n </Box>\n </Flex>\n <Box flexGrow=\"0\" flexShrink=\"0\" style={{ placeSelf: \"flex-end\" }}>\n <InviteUserDialog>\n <Button>Invite user</Button>\n </InviteUserDialog>\n </Box>\n </Grid>\n <Table.Root variant=\"ghost\" size=\"1\">\n <Table.Header>\n <Table.Row>\n <Table.ColumnHeaderCell width=\"260px\">\n User\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"100px\">\n {`Role${isMultipleRolesEnabled ? \"s\" : \"\"}`}\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"140px\">\n Last active\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"28px\" />\n </Table.Row>\n </Table.Header>\n\n <Table.Body\n style={{\n transition: `opacity 0.2s ease-out ${isPending ? \"0.2s\" : \"0s\"}`,\n opacity: isPending && usersCount > 0 ? 0.5 : 1,\n }}\n >\n {users.length > 0 ? (\n users.map((user) => {\n const userDisplayName = getBestName(user);\n const dimText =\n user.status === \"InviteRevoked\" \|\|\n user.status === \"InviteExpired\";\n return (\n <Table.Row key={user.id} align=\"center\">\n <Table.RowHeaderCell>\n <Flex\n align=\"center\"\n gap=\"3\"\n overflow=\"hidden\"\n height=\"var(--space-7)\"\n >\n <Avatar\n size=\"2\"\n fallback={<FallbackUserIcon />}\n src={user.profilePictureUrl ?? undefined}\n dim={dimText}\n />\n\n {userDisplayName ? (\n <Flex\n direction=\"column\"\n align=\"start\"\n height=\"var(--space-7)\"\n justify=\"center\"\n overflow=\"hidden\"\n >\n <Flex gap=\"2\" align=\"center\" minWidth=\"0\">\n <TableCellText dim={dimText}>\n {userDisplayName}\n </TableCellText>\n <UserBadge user={user} />\n </Flex>\n <TableCellText\n level=\"secondary\"\n title={user.email}\n dim={dimText}\n >\n {user.email}\n </TableCellText>\n </Flex>\n ) : (\n <Flex gap=\"2\" align=\"center\" minWidth=\"0\">\n <TableCellText dim={dimText} title={user.email}>\n {user.email}\n </TableCellText>\n <UserBadge user={user} />\n </Flex>\n )}\n </Flex>\n </Table.RowHeaderCell>\n <Table.Cell>\n <UserRolesCellContent\n user={user}\n isMultipleRolesEnabled={isMultipleRolesEnabled}\n dimText={dimText}\n />\n </Table.Cell>\n <Table.Cell>\n <LastActive user={user} isHydrated={isHydrated} />\n </Table.Cell>\n <Table.Cell justify=\"end\">\n <UserActionsDropdown user={user}>\n <IconButton\n title=\"User actions\"\n aria-label=\"User actions\"\n >\n <DotsHorizontalIcon />\n </IconButton>\n </UserActionsDropdown>\n </Table.Cell>\n </Table.Row>\n );\n })\n ) : (\n <Table.Row align=\"center\">\n <Table.Cell colSpan={4}>\n <UsersManagementEmptyState isPending={isPending} />\n </Table.Cell>\n </Table.Row>\n )}\n </Table.Body>\n </Table.Root>\n\n {showPagination ? (\n <Flex gap=\"2\" justify=\"end\">\n <Button\n variant=\"secondary\"\n size=\"1\"\n disabled={!pagination.after \|\| isPending \|\| undefined}\n loading={deferredLoading}\n onClick={() => {\n if (pagination.after) {\n dispatch({\n type: \"SET_PAGINATION\",\n pagination: { after: pagination.after },\n });\n }\n }}\n >\n Previous\n </Button>\n <Button\n variant=\"secondary\"\n size=\"1\"\n disabled={!pagination.before \|\| isPending \|\| undefined}\n loading={deferredLoading}\n onClick={() => {\n if (pagination.before) {\n dispatch({\n type: \"SET_PAGINATION\",\n pagination: { before: pagination.before },\n });\n }\n }}\n >\n Next\n </Button>\n </Flex>\n ) : null}\n </Flex>\n </SearchProvider>\n );\n};\n\ninterface UsersManagementLoadingProps extends WidgetRootDomProps {}\n\nconst UsersManagementLoading: React.FC<UsersManagementLoadingProps> = (\n props,\n) => {\n return (\n <Flex\n direction=\"column\"\n gap=\"3\"\n {...getWidgetRootDomProps(\"loading\", props)}\n >\n <Grid columns=\"1fr auto\" gap=\"2\">\n <Flex gap=\"2\" align=\"center\">\n <Skeleton loading>\n <Box flexBasis=\"380px\" flexGrow=\"0\" flexShrink=\"1\">\n <TextField />\n </Box>\n </Skeleton>\n <Skeleton loading>\n <Box flexGrow=\"0\" flexShrink=\"0\">\n <Select.Root value=\"all\" onValueChange={() => void 0}>\n <Select.Trigger>All</Select.Trigger>\n <Select.Content>\n <Select.Item value=\"all\">All</Select.Item>\n </Select.Content>\n </Select.Root>\n </Box>\n </Skeleton>\n </Flex>\n <Skeleton loading>\n <Box flexGrow=\"0\" flexShrink=\"0\" style={{ placeSelf: \"flex-end\" }}>\n <Button>Invite user</Button>\n </Box>\n </Skeleton>\n </Grid>\n <Table.Root variant=\"ghost\" size=\"1\">\n <Table.Header>\n <Table.Row>\n <Table.ColumnHeaderCell width=\"260px\">\n <Skeleton loading>User</Skeleton>\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"100px\">\n <Skeleton>Role</Skeleton>\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"140px\">\n <Skeleton>Last active</Skeleton>\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"28px\" />\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n {Array.from({ length: USER_ROW_LIMIT }, (_, index) => (\n <Table.Row key={index} align=\"center\">\n <Table.RowHeaderCell>\n <Flex align=\"center\" gap=\"3\">\n <Skeleton>\n <Avatar size=\"2\" fallback=\"F\" />\n </Skeleton>\n\n <Flex\n direction=\"column\"\n height=\"var(--space-7)\"\n justify=\"center\"\n >\n <Skeleton width=\"180px\" height=\"var(--space-4)\" />\n <Skeleton width=\"90px\" height=\"var(--space-3)\" mt=\"1\" />\n </Flex>\n </Flex>\n </Table.RowHeaderCell>\n <Table.Cell>\n <Flex wrap=\"wrap\" gap=\"1\">\n <Skeleton width=\"75px\" height=\"var(--space-4)\" />\n </Flex>\n </Table.Cell>\n <Table.Cell>\n <Skeleton width=\"120px\" height=\"var(--space-4)\" />\n </Table.Cell>\n <Table.Cell justify=\"end\" />\n </Table.Row>\n ))}\n </Table.Body>\n </Table.Root>\n\n <Flex gap=\"2\" justify=\"end\">\n <Skeleton loading>\n <Button variant=\"secondary\" size=\"1\">\n Previous\n </Button>\n </Skeleton>\n <Skeleton loading>\n <Button variant=\"secondary\" size=\"1\">\n Next\n </Button>\n </Skeleton>\n </Flex>\n </Flex>\n );\n};\n\ninterface UsersManagementErrorProps extends WidgetRootDomProps {\n error: unknown;\n}\n\nconst UsersManagementError: React.FC<UsersManagementErrorProps> = ({\n error,\n ...domProps\n}) => {\n return (\n <GenericError\n error={error}\n minHeight=\"676px\"\n {...getWidgetRootDomProps(\"error\", domProps)}\n />\n );\n};\n\nfunction UserBadge({ user }: { user: Member }) {\n // TODO: This is not yet available in the data. Update here after API is updated.\n if (user.isLoggedInUser) {\n return (\n <Badge color=\"gray\" style={{ userSelect: \"none\" }}>\n You\n </Badge>\n );\n }\n if (user.status === \"Invited\") {\n return (\n <Badge color=\"amber\" style={{ userSelect: \"none\" }}>\n <VisuallyHidden>Status: </VisuallyHidden>Invited\n </Badge>\n );\n }\n if (user.status === \"InviteExpired\") {\n return (\n <Badge color=\"red\" style={{ userSelect: \"none\" }}>\n <VisuallyHidden>Status: Invite </VisuallyHidden>\n Expired\n </Badge>\n );\n }\n if (user.status === \"InviteRevoked\") {\n return (\n <Badge color=\"red\" style={{ userSelect: \"none\" }}>\n <VisuallyHidden>Status: Invite </VisuallyHidden>\n Revoked\n </Badge>\n );\n }\n return null;\n}\n\ninterface LastActiveProps {\n user: Member;\n isHydrated: boolean;\n dim?: boolean;\n}\n\nfunction LastActive(props: LastActiveProps) {\n if (!props.user.lastActivityAt) {\n return (\n <>\n <VisuallyHidden>\n {props.user.status === \"Active\" ? \"Never\" : \"Not active\"}\n </VisuallyHidden>\n <Separator />\n </>\n );\n }\n return <LastActiveImpl {...props} date={props.user.lastActivityAt} />;\n}\n\nfunction LastActiveImpl({\n date,\n isHydrated,\n dim,\n}: LastActiveProps & { date: string }) {\n const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {\n const defaultTimeZone = \"America/Los_Angeles\";\n const lastActiveDate = new Date(date);\n const lastActiveDateTime = lastActiveDate.toLocaleTimeString(\"en-US\", {\n // hard-coded timezone before hydration to prevent server/client mismatch\n timeZone: isHydrated ? undefined : defaultTimeZone,\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\",\n });\n\n // Server and client may produce a different 'now' date, so only\n // show comparative date if the component is hydrated to prevent a\n // server/client mismatch\n const lastActiveDisplay = isHydrated\n ? getComparativeReadableDate(new Date(), lastActiveDate)\n : lastActiveDate.toLocaleDateString(\"en-US\", {\n // hard-coded timezone to prevent server/client mismatch\n timeZone: defaultTimeZone,\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n return { lastActiveDateTime, lastActiveDisplay };\n }, [isHydrated, date]);\n\n // handle cases where the DB might return an invalid date string\n if (lastActiveDisplay === \"Invalid Date\") {\n return (\n <>\n <VisuallyHidden>Unknown</VisuallyHidden>\n <Separator />\n </>\n );\n }\n\n return (\n <TableCellText asChild dim={dim}>\n <time dateTime={date} title={lastActiveDateTime}>\n {lastActiveDisplay}\n </time>\n </TableCellText>\n );\n}\n\nconst TableCellText = React.forwardRef<HTMLSpanElement, TableCellTextProps>(\n function TableCellText(\n { children, dim, level = \"primary\", ...props },\n forwardedRef,\n ) {\n return (\n <Text\n ref={forwardedRef}\n color={level === \"secondary\" ? \"gray\" : undefined}\n weight={level === \"secondary\" ? \"regular\" : \"medium\"}\n size={level === \"secondary\" ? \"1\" : \"2\"}\n truncate\n {...props}\n style={\n dim\n ? {\n // TODO: use CSS var instead of hard-coded value for opacity\n opacity: 0.6,\n ...props.style,\n }\n : props.style\n }\n >\n {children}\n </Text>\n );\n },\n);\n\ntype TableCellTextProps = TextProps & {\n level?: \"primary\" \| \"secondary\";\n dim?: boolean;\n};\n\nconst FallbackUserIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n >\n <title>User icon</title>\n <path d=\"M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z\" />\n </svg>\n);\n\nconst UsersManagementEmptyState = ({ isPending }: { isPending: boolean }) => {\n const { clearSearch } = useSearchContext();\n const {\n state: { searchQuery },\n } = useUsersManagementContext();\n\n // When the search query is cleared, the users query is re-fetched which sends\n // us into a pending state. When this happens we want to keep a snapshot of\n // the previous search query while the query is revalidated. We can use this\n // to keep the 'No users found for query' UI in place until re-fetching is\n // complete, otherwise the view flips to 'No users found' very quickly before\n // the full table is shown again.\n const [{ isClearing, lastSearchQuery }, setClearing] = React.useState({\n isClearing: false,\n lastSearchQuery: null as null \| string,\n });\n const [wasPending, setWasPending] = React.useState(isPending);\n if (wasPending !== isPending) {\n setWasPending(isPending);\n if (!isPending) {\n setClearing((prev) =>\n prev.isClearing ? { isClearing: false, lastSearchQuery: null } : prev,\n );\n }\n }\n\n if (searchQuery \|\| isClearing) {\n return (\n <Flex align=\"center\" justify=\"center\" py=\"8\" direction=\"column\" gap=\"2\">\n <Text size=\"2\">\n No users found for query{\" \"}\n <Text weight=\"medium\">\n “{isClearing ? lastSearchQuery : searchQuery}”\n </Text>\n </Text>\n\n <Button\n variant=\"secondary\"\n size=\"1\"\n onClick={() => {\n setClearing({ isClearing: true, lastSearchQuery: searchQuery });\n clearSearch();\n }}\n loading={isPending}\n >\n Clear search\n </Button>\n </Flex>\n );\n }\n\n return (\n <Flex align=\"center\" justify=\"center\" py=\"8\" gap=\"2\">\n <Text size=\"2\">No users found</Text>\n </Flex>\n );\n};\n\ninterface UserRolesCellContentProps {\n user: Member;\n isMultipleRolesEnabled: boolean;\n dimText: boolean;\n}\n\nfunction UserRolesCellContent({\n user,\n isMultipleRolesEnabled,\n dimText,\n}: UserRolesCellContentProps) {\n if (!user.roles \|\| user.roles.length === 0) {\n return (\n <>\n <VisuallyHidden>No roles assigned</VisuallyHidden>\n <span aria-hidden style={{ userSelect: \"none\" }}>\n –\n </span>\n </>\n );\n }\n\n if (isMultipleRolesEnabled && user.roles.length > 1) {\n return (\n <Tooltip\n content={user.roles?.map((role) => role.name).join(\", \")}\n maxWidth=\"250px\"\n >\n <TableCellText dim={dimText}>\n {pluralize(\"role\", user.roles.length)}\n </TableCellText>\n </Tooltip>\n );\n }\n\n return <TableCellText dim={dimText}>{user.roles?.[0]?.name}</TableCellText>;\n}\n\nfunction getWidgetRootDomProps(\n state: WidgetRootState,\n domProps: WidgetRootDomProps,\n) {\n return getDomProps({\n ...domProps,\n isWidgetRoot: true,\n widgetId: \"users-management\",\n widgetState: state,\n });\n}\n\nexport type { UsersManagementLoadingProps, UsersManagementErrorProps };\nexport { UsersManagement, UsersManagementLoading, UsersManagementError };\n"],"mappings":"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","names":["lastActiveDateTime","lastActiveDisplay","TableCellText"]}
1	+ {"version":3,"sources":["../../../src/lib/users-management.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n Box,\n Flex,\n Grid,\n Separator,\n Table,\n Tooltip,\n Text,\n type TextProps,\n VisuallyHidden,\n} from \"@radix-ui/themes\";\nimport {\n Avatar,\n Badge,\n IconButton,\n Button,\n Select,\n Skeleton,\n TextField,\n} from \"./elements.js\";\nimport { InviteUserDialog } from \"./invite-user-dialog.js\";\nimport { SearchProvider, useSearchContext } from \"./search-provider.js\";\nimport { useIsHydrated } from \"./use-is-hydrated.js\";\nimport { UserActionsDropdown } from \"./user-actions-dropdown.js\";\nimport { UsersFilter } from \"./users-filter.js\";\nimport { UsersSearch } from \"./users-search.js\";\nimport {\n getBestName,\n getComparativeReadableDate,\n getDomProps,\n WidgetRootState,\n type WidgetRootDomProps,\n} from \"./utils.js\";\nimport { USER_ROW_LIMIT } from \"./constants.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport { Member, MemberRole, MembersQueryResult } from \"../api/endpoint.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport { DotsHorizontalIcon } from \"@radix-ui/react-icons\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\nimport { useLocale } from \"./i18n/use-locale.js\";\n\ninterface UsersManagementProps extends WidgetRootDomProps {\n rolesData: { roles: MemberRole[]; multipleRolesEnabled: boolean };\n userData: MembersQueryResult;\n disableRolesFilter?: boolean;\n // When the users list is loading new users\n isPending: boolean;\n}\n\nconst UsersManagement: React.FC<UsersManagementProps> = ({\n userData,\n rolesData,\n isPending,\n disableRolesFilter,\n ...domProps\n}) => {\n const users = userData?.data ?? [];\n const usersCount = users?.length ?? 0;\n const isHydrated = useIsHydrated();\n const { listMetadata: pagination = {} } = userData;\n const { dispatch } = useUsersManagementContext();\n const isMultipleRolesEnabled = rolesData.multipleRolesEnabled;\n const translate = useTranslation();\n\n // we only want to show the loading indicator for some buttons if the request\n // is still pending after 500ms. If the request is fast enough the indicator\n // is a bit jarring.\n const [deferredLoading, setDeferredLoading] = React.useState(false);\n React.useEffect(() => {\n if (isPending) {\n const timeoutId = window.setTimeout(() => {\n setDeferredLoading(true);\n }, 500);\n return () => {\n window.clearTimeout(timeoutId);\n };\n } else {\n setDeferredLoading(false);\n }\n }, [isPending]);\n\n const showPagination = !!(pagination.before \|\| pagination.after);\n\n return (\n <SearchProvider>\n <Flex\n direction=\"column\"\n gap=\"3\"\n {...getWidgetRootDomProps(\"resolved\", domProps)}\n >\n <Grid columns=\"1fr auto\" gap=\"2\">\n <Flex gap=\"2\" align=\"center\">\n <Box flexBasis=\"380px\" flexGrow=\"0\" flexShrink=\"1\">\n <UsersSearch />\n </Box>\n <Box flexGrow=\"0\" flexShrink=\"0\">\n <UsersFilter\n roles={rolesData.roles}\n disabled={disableRolesFilter}\n />\n </Box>\n </Flex>\n <Box flexGrow=\"0\" flexShrink=\"0\" style={{ placeSelf: \"flex-end\" }}>\n <InviteUserDialog>\n <Button>\n <Translation\n defaultMessage=\"Invite user\"\n id=\"NBXpRj\"\n description=\"Button text to invite a new user to the organization\"\n />\n </Button>\n </InviteUserDialog>\n </Box>\n </Grid>\n <Table.Root variant=\"ghost\" size=\"1\">\n <Table.Header>\n <Table.Row>\n <Table.ColumnHeaderCell width=\"260px\">\n <Translation\n defaultMessage=\"User\"\n id=\"BBh86k\"\n description=\"Column header for user information in the users table\"\n />\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"100px\">\n {isMultipleRolesEnabled ? (\n <Translation\n defaultMessage=\"Roles\"\n id=\"A1DuWM\"\n description=\"Column header for user roles when multiple roles are enabled\"\n />\n ) : (\n <Translation\n defaultMessage=\"Role\"\n id=\"nQbe+Y\"\n description=\"Column header for user role when only single role is allowed\"\n />\n )}\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"140px\">\n <Translation\n defaultMessage=\"Last active\"\n id=\"oOwLGt\"\n description=\"Column header showing when users were last active\"\n />\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"28px\" />\n </Table.Row>\n </Table.Header>\n\n <Table.Body\n style={{\n transition: `opacity 0.2s ease-out ${isPending ? \"0.2s\" : \"0s\"}`,\n opacity: isPending && usersCount > 0 ? 0.5 : 1,\n }}\n >\n {users.length > 0 ? (\n users.map((user) => {\n const userDisplayName = getBestName(user);\n const dimText =\n user.status === \"InviteRevoked\" \|\|\n user.status === \"InviteExpired\";\n return (\n <Table.Row key={user.id} align=\"center\">\n <Table.RowHeaderCell>\n <Flex\n align=\"center\"\n gap=\"3\"\n overflow=\"hidden\"\n height=\"var(--space-7)\"\n >\n <Avatar\n size=\"2\"\n fallback={<FallbackUserIcon />}\n src={user.profilePictureUrl ?? undefined}\n dim={dimText}\n />\n\n {userDisplayName ? (\n <Flex\n direction=\"column\"\n align=\"start\"\n height=\"var(--space-7)\"\n justify=\"center\"\n overflow=\"hidden\"\n >\n <Flex gap=\"2\" align=\"center\" minWidth=\"0\">\n <TableCellText dim={dimText}>\n {userDisplayName}\n </TableCellText>\n <UserBadge user={user} />\n </Flex>\n <TableCellText\n level=\"secondary\"\n title={user.email}\n dim={dimText}\n >\n {user.email}\n </TableCellText>\n </Flex>\n ) : (\n <Flex gap=\"2\" align=\"center\" minWidth=\"0\">\n <TableCellText dim={dimText} title={user.email}>\n {user.email}\n </TableCellText>\n <UserBadge user={user} />\n </Flex>\n )}\n </Flex>\n </Table.RowHeaderCell>\n <Table.Cell>\n <UserRolesCellContent\n user={user}\n isMultipleRolesEnabled={isMultipleRolesEnabled}\n dimText={dimText}\n />\n </Table.Cell>\n <Table.Cell>\n <LastActive user={user} isHydrated={isHydrated} />\n </Table.Cell>\n <Table.Cell justify=\"end\">\n <UserActionsDropdown user={user}>\n <IconButton\n title={translate({\n defaultMessage: \"User actions\",\n id: \"1nsmNS\",\n description:\n \"Button tooltip for opening user actions menu\",\n })}\n >\n <DotsHorizontalIcon />\n </IconButton>\n </UserActionsDropdown>\n </Table.Cell>\n </Table.Row>\n );\n })\n ) : (\n <Table.Row align=\"center\">\n <Table.Cell colSpan={4}>\n <UsersManagementEmptyState isPending={isPending} />\n </Table.Cell>\n </Table.Row>\n )}\n </Table.Body>\n </Table.Root>\n\n {showPagination ? (\n <Flex gap=\"2\" justify=\"end\">\n <Button\n variant=\"secondary\"\n size=\"1\"\n disabled={!pagination.after \|\| isPending \|\| undefined}\n loading={deferredLoading}\n onClick={() => {\n if (pagination.after) {\n dispatch({\n type: \"SET_PAGINATION\",\n pagination: { after: pagination.after },\n });\n }\n }}\n >\n <Translation\n defaultMessage=\"Previous\"\n id=\"910Q6b\"\n description=\"Button text to navigate to the previous page of users\"\n />\n </Button>\n <Button\n variant=\"secondary\"\n size=\"1\"\n disabled={!pagination.before \|\| isPending \|\| undefined}\n loading={deferredLoading}\n onClick={() => {\n if (pagination.before) {\n dispatch({\n type: \"SET_PAGINATION\",\n pagination: { before: pagination.before },\n });\n }\n }}\n >\n <Translation\n defaultMessage=\"Next\"\n id=\"UlAY08\"\n description=\"Button text to navigate to the next page of users\"\n />\n </Button>\n </Flex>\n ) : null}\n </Flex>\n </SearchProvider>\n );\n};\n\ninterface UsersManagementLoadingProps extends WidgetRootDomProps {}\n\nconst UsersManagementLoading: React.FC<UsersManagementLoadingProps> = (\n props,\n) => {\n const translate = useTranslation();\n const placeholderText = (\n <Translation\n defaultMessage=\"All\"\n id=\"l/Do9/\"\n description=\"Filter option to show all users\"\n />\n );\n return (\n <Flex\n direction=\"column\"\n gap=\"3\"\n {...getWidgetRootDomProps(\"loading\", props)}\n >\n <Grid columns=\"1fr auto\" gap=\"2\">\n <Flex gap=\"2\" align=\"center\">\n <Skeleton loading>\n <Box flexBasis=\"380px\" flexGrow=\"0\" flexShrink=\"1\">\n <TextField\n disabled\n aria-label={translate({\n defaultMessage: \"User search\",\n id: \"lzPOKv\",\n description: \"Label for the user search input field\",\n })}\n />\n </Box>\n </Skeleton>\n <Skeleton loading>\n <Box flexGrow=\"0\" flexShrink=\"0\">\n <Select.Root disabled value=\"all\" onValueChange={() => void 0}>\n <Select.Trigger>{placeholderText}</Select.Trigger>\n <Select.Content>\n <Select.Item value=\"all\">{placeholderText}</Select.Item>\n </Select.Content>\n </Select.Root>\n </Box>\n </Skeleton>\n </Flex>\n <Skeleton loading>\n <Box flexGrow=\"0\" flexShrink=\"0\" style={{ placeSelf: \"flex-end\" }}>\n <Button disabled>\n <Translation\n defaultMessage=\"Invite user\"\n id=\"NBXpRj\"\n description=\"Button text to invite a new user to the organization\"\n />\n </Button>\n </Box>\n </Skeleton>\n </Grid>\n <Table.Root variant=\"ghost\" size=\"1\">\n <Table.Header>\n <Table.Row>\n <Table.ColumnHeaderCell width=\"260px\">\n <Skeleton loading>\n <Translation\n defaultMessage=\"User\"\n id=\"BBh86k\"\n description=\"Column header for user information in the users table\"\n />\n </Skeleton>\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"100px\">\n <Skeleton>\n <Translation\n defaultMessage=\"Role\"\n id=\"FK7mP4\"\n description=\"Column header for user role\"\n />\n </Skeleton>\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"140px\">\n <Skeleton>\n <Translation\n defaultMessage=\"Last active\"\n id=\"oOwLGt\"\n description=\"Column header showing when users were last active\"\n />\n </Skeleton>\n </Table.ColumnHeaderCell>\n <Table.ColumnHeaderCell width=\"28px\" />\n </Table.Row>\n </Table.Header>\n\n <Table.Body>\n {Array.from({ length: USER_ROW_LIMIT }, (_, index) => (\n <Table.Row key={index} align=\"center\">\n <Table.RowHeaderCell>\n <Flex align=\"center\" gap=\"3\">\n <Skeleton>\n <Avatar size=\"2\" fallback=\"F\" />\n </Skeleton>\n\n <Flex\n direction=\"column\"\n height=\"var(--space-7)\"\n justify=\"center\"\n >\n <Skeleton width=\"180px\" height=\"var(--space-4)\" />\n <Skeleton width=\"90px\" height=\"var(--space-3)\" mt=\"1\" />\n </Flex>\n </Flex>\n </Table.RowHeaderCell>\n <Table.Cell>\n <Flex wrap=\"wrap\" gap=\"1\">\n <Skeleton width=\"75px\" height=\"var(--space-4)\" />\n </Flex>\n </Table.Cell>\n <Table.Cell>\n <Skeleton width=\"120px\" height=\"var(--space-4)\" />\n </Table.Cell>\n <Table.Cell justify=\"end\" />\n </Table.Row>\n ))}\n </Table.Body>\n </Table.Root>\n\n <Flex gap=\"2\" justify=\"end\">\n <Skeleton loading>\n <Button disabled variant=\"secondary\" size=\"1\">\n <Translation\n defaultMessage=\"Previous\"\n id=\"910Q6b\"\n description=\"Button text to navigate to the previous page of users\"\n />\n </Button>\n </Skeleton>\n <Skeleton loading>\n <Button disabled variant=\"secondary\" size=\"1\">\n <Translation\n defaultMessage=\"Next\"\n id=\"UlAY08\"\n description=\"Button text to navigate to the next page of users\"\n />\n </Button>\n </Skeleton>\n </Flex>\n </Flex>\n );\n};\n\ninterface UsersManagementErrorProps extends WidgetRootDomProps {\n error: unknown;\n}\n\nconst UsersManagementError: React.FC<UsersManagementErrorProps> = ({\n error,\n ...domProps\n}) => {\n return (\n <GenericError\n error={error}\n minHeight=\"676px\"\n {...getWidgetRootDomProps(\"error\", domProps)}\n />\n );\n};\n\nfunction UserBadge({ user }: { user: Member }) {\n // TODO: This is not yet available in the data. Update here after API is updated.\n if (user.isLoggedInUser) {\n return (\n <Badge color=\"gray\" style={{ userSelect: \"none\" }}>\n <Translation\n defaultMessage=\"You\"\n id=\"ER1Vmv\"\n description=\"Badge indicating the current logged-in user\"\n />\n </Badge>\n );\n }\n if (user.status === \"Invited\") {\n return (\n <Badge color=\"amber\" style={{ userSelect: \"none\" }}>\n <VisuallyHidden>\n <Translation\n defaultMessage=\"Status: \"\n id=\"E2o/+H\"\n description=\"Prefix for status indicator in screen reader\"\n />\n </VisuallyHidden>\n <Translation\n defaultMessage=\"Invited\"\n id=\"byIkUu\"\n description=\"Badge status indicating user has been invited but not yet accepted\"\n />\n </Badge>\n );\n }\n if (user.status === \"InviteExpired\") {\n return (\n <Badge color=\"red\" style={{ userSelect: \"none\" }}>\n <VisuallyHidden>\n <Translation\n defaultMessage=\"Status: Invite \"\n id=\"BWvbwY\"\n description=\"Prefix for invite status indicator in screen reader\"\n />\n </VisuallyHidden>\n <Translation\n defaultMessage=\"Expired\"\n id=\"+0sQaN\"\n description=\"Badge status indicating user invitation has expired\"\n />\n </Badge>\n );\n }\n if (user.status === \"InviteRevoked\") {\n return (\n <Badge color=\"red\" style={{ userSelect: \"none\" }}>\n <VisuallyHidden>\n <Translation\n defaultMessage=\"Status: Invite \"\n id=\"BWvbwY\"\n description=\"Prefix for invite status indicator in screen reader\"\n />\n </VisuallyHidden>\n <Translation\n defaultMessage=\"Revoked\"\n id=\"NNBv+r\"\n description=\"Badge status indicating user invitation has been revoked\"\n />\n </Badge>\n );\n }\n return null;\n}\n\ninterface LastActiveProps {\n user: Member;\n isHydrated: boolean;\n dim?: boolean;\n}\n\nfunction LastActive(props: LastActiveProps) {\n if (!props.user.lastActivityAt) {\n return (\n <>\n <VisuallyHidden>\n {props.user.status === \"Active\" ? (\n <Translation\n defaultMessage=\"Never\"\n id=\"0duvF4\"\n description=\"Screen reader text indicating user has never been active\"\n />\n ) : (\n <Translation\n defaultMessage=\"Not active\"\n id=\"hd2+kk\"\n description=\"Screen reader text indicating user is not active\"\n />\n )}\n </VisuallyHidden>\n <Separator />\n </>\n );\n }\n return <LastActiveImpl {...props} date={props.user.lastActivityAt} />;\n}\n\nfunction LastActiveImpl({\n date,\n isHydrated,\n dim,\n}: LastActiveProps & { date: string }) {\n const locale = useLocale();\n const { lastActiveDateTime, lastActiveDisplay } = React.useMemo(() => {\n const defaultTimeZone = \"America/Los_Angeles\";\n const lastActiveDate = new Date(date);\n const lastActiveDateTime = lastActiveDate.toLocaleTimeString(locale, {\n // hard-coded timezone before hydration to prevent server/client mismatch\n timeZone: isHydrated ? undefined : defaultTimeZone,\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\",\n });\n\n // Server and client may produce a different 'now' date, so only\n // show comparative date if the component is hydrated to prevent a\n // server/client mismatch\n const lastActiveDisplay = isHydrated\n ? getComparativeReadableDate(new Date(), lastActiveDate, { locale })\n : lastActiveDate.toLocaleDateString(locale, {\n // hard-coded timezone to prevent server/client mismatch\n timeZone: defaultTimeZone,\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\",\n });\n\n return {\n lastActiveDateTime,\n lastActiveDisplay,\n };\n }, [isHydrated, date, locale]);\n\n // handle cases where the DB might return an invalid date string\n if (lastActiveDisplay === \"Invalid Date\") {\n return (\n <>\n <VisuallyHidden>\n <Translation\n defaultMessage=\"Unknown\"\n id=\"UUigrK\"\n description=\"Screen reader text indicating last active date is unknown\"\n />\n </VisuallyHidden>\n <Separator />\n </>\n );\n }\n\n return (\n <TableCellText asChild dim={dim}>\n <time dateTime={date} title={lastActiveDateTime}>\n {lastActiveDisplay}\n </time>\n </TableCellText>\n );\n}\n\nconst TableCellText = React.forwardRef<HTMLSpanElement, TableCellTextProps>(\n function TableCellText(\n { children, dim, level = \"primary\", ...props },\n forwardedRef,\n ) {\n return (\n <Text\n ref={forwardedRef}\n color={level === \"secondary\" ? \"gray\" : undefined}\n weight={level === \"secondary\" ? \"regular\" : \"medium\"}\n size={level === \"secondary\" ? \"1\" : \"2\"}\n truncate\n {...props}\n style={\n dim\n ? {\n // TODO: use CSS var instead of hard-coded value for opacity\n opacity: 0.6,\n ...props.style,\n }\n : props.style\n }\n >\n {children}\n </Text>\n );\n },\n);\n\ntype TableCellTextProps = TextProps & {\n level?: \"primary\" \| \"secondary\";\n dim?: boolean;\n};\n\nconst FallbackUserIcon = () => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n >\n {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx /}\n <title>User icon</title>\n <path d=\"M229.19,213c-15.81-27.32-40.63-46.49-69.47-54.62a70,70,0,1,0-63.44,0C67.44,166.5,42.62,185.67,26.81,213a6,6,0,1,0,10.38,6C56.4,185.81,90.34,166,128,166s71.6,19.81,90.81,53a6,6,0,1,0,10.38-6ZM70,96a58,58,0,1,1,58,58A58.07,58.07,0,0,1,70,96Z\" />\n </svg>\n);\n\nconst UsersManagementEmptyState = ({ isPending }: { isPending: boolean }) => {\n const { clearSearch } = useSearchContext();\n const {\n state: { searchQuery },\n } = useUsersManagementContext();\n\n // When the search query is cleared, the users query is re-fetched which sends\n // us into a pending state. When this happens we want to keep a snapshot of\n // the previous search query while the query is revalidated. We can use this\n // to keep the 'No users found for query' UI in place until re-fetching is\n // complete, otherwise the view flips to 'No users found' very quickly before\n // the full table is shown again.\n const [{ isClearing, lastSearchQuery }, setClearing] = React.useState({\n isClearing: false,\n lastSearchQuery: null as null \| string,\n });\n const [wasPending, setWasPending] = React.useState(isPending);\n if (wasPending !== isPending) {\n setWasPending(isPending);\n if (!isPending) {\n setClearing((prev) =>\n prev.isClearing ? { isClearing: false, lastSearchQuery: null } : prev,\n );\n }\n }\n\n if (searchQuery \|\| isClearing) {\n return (\n <Flex align=\"center\" justify=\"center\" py=\"8\" direction=\"column\" gap=\"2\">\n <Text size=\"2\">\n <Translation\n defaultMessage=\"No users found for query '{query}'\"\n id=\"wrEZ8+\"\n description=\"Message shown when no users match the search query\"\n values={{\n query: isClearing ? lastSearchQuery : searchQuery,\n }}\n />\n </Text>\n\n <Button\n variant=\"secondary\"\n size=\"1\"\n onClick={() => {\n setClearing({ isClearing: true, lastSearchQuery: searchQuery });\n clearSearch();\n }}\n loading={isPending}\n >\n <Translation\n defaultMessage=\"Clear search\"\n id=\"Xv3fVI\"\n description=\"Button text to clear the current search query\"\n />\n </Button>\n </Flex>\n );\n }\n\n return (\n <Flex align=\"center\" justify=\"center\" py=\"8\" gap=\"2\">\n <Text size=\"2\">\n <Translation\n defaultMessage=\"No users found\"\n id=\"MQ+LoA\"\n description=\"Message shown when there are no users in the system\"\n />\n </Text>\n </Flex>\n );\n};\n\ninterface UserRolesCellContentProps {\n user: Member;\n isMultipleRolesEnabled: boolean;\n dimText: boolean;\n}\n\nfunction UserRolesCellContent({\n user,\n isMultipleRolesEnabled,\n dimText,\n}: UserRolesCellContentProps) {\n if (!user.roles \|\| user.roles.length === 0) {\n return (\n <>\n <VisuallyHidden>\n <Translation\n defaultMessage=\"No roles assigned\"\n id=\"CVOVB0\"\n description=\"Screen reader text indicating user has no roles assigned\"\n />\n </VisuallyHidden>\n {/ eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n <span aria-hidden style={{ userSelect: \"none\" }}>\n –\n </span>\n </>\n );\n }\n\n if (isMultipleRolesEnabled && user.roles.length > 1) {\n const roleNames = user.roles?.map((role) => role.name).join(\", \");\n return (\n <Tooltip content={roleNames} maxWidth=\"250px\">\n <TableCellText dim={dimText}>\n <Translation\n defaultMessage=\"{count} roles\"\n id=\"lWAmRC\"\n description=\"Shows the number of roles assigned to a user (plural)\"\n values={{ count: user.roles.length }}\n />\n </TableCellText>\n </Tooltip>\n );\n }\n\n return <TableCellText dim={dimText}>{user.roles?.[0]?.name}</TableCellText>;\n}\n\nfunction getWidgetRootDomProps(\n state: WidgetRootState,\n domProps: WidgetRootDomProps,\n) {\n return getDomProps({\n ...domProps,\n isWidgetRoot: true,\n widgetId: \"users-management\",\n widgetState: state,\n });\n}\n\nexport type { UsersManagementLoadingProps, UsersManagementErrorProps };\nexport { UsersManagement, UsersManagementLoading, UsersManagementError };\n"],"mappings":";AA+FU,SAgcJ,UA9bQ,KAFJ;AA7FV,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAE1C,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAU1B,MAAM,kBAAkD,CAAC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,UAAU,QAAQ,CAAC;AACjC,QAAM,aAAa,OAAO,UAAU;AACpC,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,cAAc,aAAa,CAAC,EAAE,IAAI;AAC1C,QAAM,EAAE,SAAS,IAAI,0BAA0B;AAC/C,QAAM,yBAAyB,UAAU;AACzC,QAAM,YAAY,eAAe;AAKjC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAS,KAAK;AAClE,QAAM,UAAU,MAAM;AACpB,QAAI,WAAW;AACb,YAAM,YAAY,OAAO,WAAW,MAAM;AACxC,2BAAmB,IAAI;AAAA,MACzB,GAAG,GAAG;AACN,aAAO,MAAM;AACX,eAAO,aAAa,SAAS;AAAA,MAC/B;AAAA,IACF,OAAO;AACL,yBAAmB,KAAK;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,iBAAiB,CAAC,EAAE,WAAW,UAAU,WAAW;AAE1D,SACE,oBAAC,kBACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG,sBAAsB,YAAY,QAAQ;AAAA,MAE9C;AAAA,6BAAC,QAAK,SAAQ,YAAW,KAAI,KAC3B;AAAA,+BAAC,QAAK,KAAI,KAAI,OAAM,UAClB;AAAA,gCAAC,OAAI,WAAU,SAAQ,UAAS,KAAI,YAAW,KAC7C,8BAAC,eAAY,GACf;AAAA,YACA,oBAAC,OAAI,UAAS,KAAI,YAAW,KAC3B;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,UAAU;AAAA,gBACjB,UAAU;AAAA;AAAA,YACZ,GACF;AAAA,aACF;AAAA,UACA,oBAAC,OAAI,UAAS,KAAI,YAAW,KAAI,OAAO,EAAE,WAAW,WAAW,GAC9D,8BAAC,oBACC,8BAAC,UACC;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF,GACF,GACF;AAAA,WACF;AAAA,QACA,qBAAC,MAAM,MAAN,EAAW,SAAQ,SAAQ,MAAK,KAC/B;AAAA,8BAAC,MAAM,QAAN,EACC,+BAAC,MAAM,KAAN,EACC;AAAA,gCAAC,MAAM,kBAAN,EAAuB,OAAM,SAC5B;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GACF;AAAA,YACA,oBAAC,MAAM,kBAAN,EAAuB,OAAM,SAC3B,mCACC;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,IAEA;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GAEJ;AAAA,YACA,oBAAC,MAAM,kBAAN,EAAuB,OAAM,SAC5B;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GACF;AAAA,YACA,oBAAC,MAAM,kBAAN,EAAuB,OAAM,QAAO;AAAA,aACvC,GACF;AAAA,UAEA;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACC,OAAO;AAAA,gBACL,YAAY,yBAAyB,YAAY,SAAS,IAAI;AAAA,gBAC9D,SAAS,aAAa,aAAa,IAAI,MAAM;AAAA,cAC/C;AAAA,cAEC,gBAAM,SAAS,IACd,MAAM,IAAI,CAAC,SAAS;AAClB,sBAAM,kBAAkB,YAAY,IAAI;AACxC,sBAAM,UACJ,KAAK,WAAW,mBAChB,KAAK,WAAW;AAClB,uBACE,qBAAC,MAAM,KAAN,EAAwB,OAAM,UAC7B;AAAA,sCAAC,MAAM,eAAN,EACC;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAM;AAAA,sBACN,KAAI;AAAA,sBACJ,UAAS;AAAA,sBACT,QAAO;AAAA,sBAEP;AAAA;AAAA,0BAAC;AAAA;AAAA,4BACC,MAAK;AAAA,4BACL,UAAU,oBAAC,oBAAiB;AAAA,4BAC5B,KAAK,KAAK,qBAAqB;AAAA,4BAC/B,KAAK;AAAA;AAAA,wBACP;AAAA,wBAEC,kBACC;AAAA,0BAAC;AAAA;AAAA,4BACC,WAAU;AAAA,4BACV,OAAM;AAAA,4BACN,QAAO;AAAA,4BACP,SAAQ;AAAA,4BACR,UAAS;AAAA,4BAET;AAAA,mDAAC,QAAK,KAAI,KAAI,OAAM,UAAS,UAAS,KACpC;AAAA,oDAAC,iBAAc,KAAK,SACjB,2BACH;AAAA,gCACA,oBAAC,aAAU,MAAY;AAAA,iCACzB;AAAA,8BACA;AAAA,gCAAC;AAAA;AAAA,kCACC,OAAM;AAAA,kCACN,OAAO,KAAK;AAAA,kCACZ,KAAK;AAAA,kCAEJ,eAAK;AAAA;AAAA,8BACR;AAAA;AAAA;AAAA,wBACF,IAEA,qBAAC,QAAK,KAAI,KAAI,OAAM,UAAS,UAAS,KACpC;AAAA,8CAAC,iBAAc,KAAK,SAAS,OAAO,KAAK,OACtC,eAAK,OACR;AAAA,0BACA,oBAAC,aAAU,MAAY;AAAA,2BACzB;AAAA;AAAA;AAAA,kBAEJ,GACF;AAAA,kBACA,oBAAC,MAAM,MAAN,EACC;AAAA,oBAAC;AAAA;AAAA,sBACC;AAAA,sBACA;AAAA,sBACA;AAAA;AAAA,kBACF,GACF;AAAA,kBACA,oBAAC,MAAM,MAAN,EACC,8BAAC,cAAW,MAAY,YAAwB,GAClD;AAAA,kBACA,oBAAC,MAAM,MAAN,EAAW,SAAQ,OAClB,8BAAC,uBAAoB,MACnB;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO,UAAU;AAAA,wBACf,gBAAgB;AAAA,wBAChB,IAAI;AAAA,wBACJ,aACE;AAAA,sBACJ,CAAC;AAAA,sBAED,8BAAC,sBAAmB;AAAA;AAAA,kBACtB,GACF,GACF;AAAA,qBAtEc,KAAK,EAuErB;AAAA,cAEJ,CAAC,IAED,oBAAC,MAAM,KAAN,EAAU,OAAM,UACf,8BAAC,MAAM,MAAN,EAAW,SAAS,GACnB,8BAAC,6BAA0B,WAAsB,GACnD,GACF;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA,QAEC,iBACC,qBAAC,QAAK,KAAI,KAAI,SAAQ,OACpB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAU,CAAC,WAAW,SAAS,aAAa;AAAA,cAC5C,SAAS;AAAA,cACT,SAAS,MAAM;AACb,oBAAI,WAAW,OAAO;AACpB,2BAAS;AAAA,oBACP,MAAM;AAAA,oBACN,YAAY,EAAE,OAAO,WAAW,MAAM;AAAA,kBACxC,CAAC;AAAA,gBACH;AAAA,cACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,gBAAe;AAAA,kBACf,IAAG;AAAA,kBACH,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAU,CAAC,WAAW,UAAU,aAAa;AAAA,cAC7C,SAAS;AAAA,cACT,SAAS,MAAM;AACb,oBAAI,WAAW,QAAQ;AACrB,2BAAS;AAAA,oBACP,MAAM;AAAA,oBACN,YAAY,EAAE,QAAQ,WAAW,OAAO;AAAA,kBAC1C,CAAC;AAAA,gBACH;AAAA,cACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,gBAAe;AAAA,kBACf,IAAG;AAAA,kBACH,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA,WACF,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;AAIA,MAAM,yBAAgE,CACpE,UACG;AACH,QAAM,YAAY,eAAe;AACjC,QAAM,kBACJ;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,IAAG;AAAA,MACH,aAAY;AAAA;AAAA,EACd;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG,sBAAsB,WAAW,KAAK;AAAA,MAE1C;AAAA,6BAAC,QAAK,SAAQ,YAAW,KAAI,KAC3B;AAAA,+BAAC,QAAK,KAAI,KAAI,OAAM,UAClB;AAAA,gCAAC,YAAS,SAAO,MACf,8BAAC,OAAI,WAAU,SAAQ,UAAS,KAAI,YAAW,KAC7C;AAAA,cAAC;AAAA;AAAA,gBACC,UAAQ;AAAA,gBACR,cAAY,UAAU;AAAA,kBACpB,gBAAgB;AAAA,kBAChB,IAAI;AAAA,kBACJ,aAAa;AAAA,gBACf,CAAC;AAAA;AAAA,YACH,GACF,GACF;AAAA,YACA,oBAAC,YAAS,SAAO,MACf,8BAAC,OAAI,UAAS,KAAI,YAAW,KAC3B,+BAAC,OAAO,MAAP,EAAY,UAAQ,MAAC,OAAM,OAAM,eAAe,MAAM,QACrD;AAAA,kCAAC,OAAO,SAAP,EAAgB,2BAAgB;AAAA,cACjC,oBAAC,OAAO,SAAP,EACC,8BAAC,OAAO,MAAP,EAAY,OAAM,OAAO,2BAAgB,GAC5C;AAAA,eACF,GACF,GACF;AAAA,aACF;AAAA,UACA,oBAAC,YAAS,SAAO,MACf,8BAAC,OAAI,UAAS,KAAI,YAAW,KAAI,OAAO,EAAE,WAAW,WAAW,GAC9D,8BAAC,UAAO,UAAQ,MACd;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF,GACF,GACF;AAAA,WACF;AAAA,QACA,qBAAC,MAAM,MAAN,EAAW,SAAQ,SAAQ,MAAK,KAC/B;AAAA,8BAAC,MAAM,QAAN,EACC,+BAAC,MAAM,KAAN,EACC;AAAA,gCAAC,MAAM,kBAAN,EAAuB,OAAM,SAC5B,8BAAC,YAAS,SAAO,MACf;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GACF,GACF;AAAA,YACA,oBAAC,MAAM,kBAAN,EAAuB,OAAM,SAC5B,8BAAC,YACC;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GACF,GACF;AAAA,YACA,oBAAC,MAAM,kBAAN,EAAuB,OAAM,SAC5B,8BAAC,YACC;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GACF,GACF;AAAA,YACA,oBAAC,MAAM,kBAAN,EAAuB,OAAM,QAAO;AAAA,aACvC,GACF;AAAA,UAEA,oBAAC,MAAM,MAAN,EACE,gBAAM,KAAK,EAAE,QAAQ,eAAe,GAAG,CAAC,GAAG,UAC1C,qBAAC,MAAM,KAAN,EAAsB,OAAM,UAC3B;AAAA,gCAAC,MAAM,eAAN,EACC,+BAAC,QAAK,OAAM,UAAS,KAAI,KACvB;AAAA,kCAAC,YACC,8BAAC,UAAO,MAAK,KAAI,UAAS,KAAI,GAChC;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,QAAO;AAAA,kBACP,SAAQ;AAAA,kBAER;AAAA,wCAAC,YAAS,OAAM,SAAQ,QAAO,kBAAiB;AAAA,oBAChD,oBAAC,YAAS,OAAM,QAAO,QAAO,kBAAiB,IAAG,KAAI;AAAA;AAAA;AAAA,cACxD;AAAA,eACF,GACF;AAAA,YACA,oBAAC,MAAM,MAAN,EACC,8BAAC,QAAK,MAAK,QAAO,KAAI,KACpB,8BAAC,YAAS,OAAM,QAAO,QAAO,kBAAiB,GACjD,GACF;AAAA,YACA,oBAAC,MAAM,MAAN,EACC,8BAAC,YAAS,OAAM,SAAQ,QAAO,kBAAiB,GAClD;AAAA,YACA,oBAAC,MAAM,MAAN,EAAW,SAAQ,OAAM;AAAA,eAzBZ,KA0BhB,CACD,GACH;AAAA,WACF;AAAA,QAEA,qBAAC,QAAK,KAAI,KAAI,SAAQ,OACpB;AAAA,8BAAC,YAAS,SAAO,MACf,8BAAC,UAAO,UAAQ,MAAC,SAAQ,aAAY,MAAK,KACxC;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF,GACF;AAAA,UACA,oBAAC,YAAS,SAAO,MACf,8BAAC,UAAO,UAAQ,MAAC,SAAQ,aAAY,MAAK,KACxC;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF,GACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAMA,MAAM,uBAA4D,CAAC;AAAA,EACjE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACT,GAAG,sBAAsB,SAAS,QAAQ;AAAA;AAAA,EAC7C;AAEJ;AAEA,SAAS,UAAU,EAAE,KAAK,GAAqB;AAE7C,MAAI,KAAK,gBAAgB;AACvB,WACE,oBAAC,SAAM,OAAM,QAAO,OAAO,EAAE,YAAY,OAAO,GAC9C;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,IAAG;AAAA,QACH,aAAY;AAAA;AAAA,IACd,GACF;AAAA,EAEJ;AACA,MAAI,KAAK,WAAW,WAAW;AAC7B,WACE,qBAAC,SAAM,OAAM,SAAQ,OAAO,EAAE,YAAY,OAAO,GAC/C;AAAA,0BAAC,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd;AAAA,OACF;AAAA,EAEJ;AACA,MAAI,KAAK,WAAW,iBAAiB;AACnC,WACE,qBAAC,SAAM,OAAM,OAAM,OAAO,EAAE,YAAY,OAAO,GAC7C;AAAA,0BAAC,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd;AAAA,OACF;AAAA,EAEJ;AACA,MAAI,KAAK,WAAW,iBAAiB;AACnC,WACE,qBAAC,SAAM,OAAM,OAAM,OAAO,EAAE,YAAY,OAAO,GAC7C;AAAA,0BAAC,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd;AAAA,OACF;AAAA,EAEJ;AACA,SAAO;AACT;AAQA,SAAS,WAAW,OAAwB;AAC1C,MAAI,CAAC,MAAM,KAAK,gBAAgB;AAC9B,WACE,iCACE;AAAA,0BAAC,kBACE,gBAAM,KAAK,WAAW,WACrB;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GAEJ;AAAA,MACA,oBAAC,aAAU;AAAA,OACb;AAAA,EAEJ;AACA,SAAO,oBAAC,kBAAgB,GAAG,OAAO,MAAM,MAAM,KAAK,gBAAgB;AACrE;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,oBAAoB,kBAAkB,IAAI,MAAM,QAAQ,MAAM;AACpE,UAAM,kBAAkB;AACxB,UAAM,iBAAiB,IAAI,KAAK,IAAI;AACpC,UAAMA,sBAAqB,eAAe,mBAAmB,QAAQ;AAAA;AAAA,MAEnE,UAAU,aAAa,SAAY;AAAA,MACnC,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,IACV,CAAC;AAKD,UAAMC,qBAAoB,aACtB,2BAA2B,oBAAI,KAAK,GAAG,gBAAgB,EAAE,OAAO,CAAC,IACjE,eAAe,mBAAmB,QAAQ;AAAA;AAAA,MAExC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAM;AAAA,IACR,CAAC;AAEL,WAAO;AAAA,MACL,oBAAAD;AAAA,MACA,mBAAAC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,YAAY,MAAM,MAAM,CAAC;AAG7B,MAAI,sBAAsB,gBAAgB;AACxC,WACE,iCACE;AAAA,0BAAC,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MACA,oBAAC,aAAU;AAAA,OACb;AAAA,EAEJ;AAEA,SACE,oBAAC,iBAAc,SAAO,MAAC,KACrB,8BAAC,UAAK,UAAU,MAAM,OAAO,oBAC1B,6BACH,GACF;AAEJ;AAEA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASC,eACP,EAAE,UAAU,KAAK,QAAQ,WAAW,GAAG,MAAM,GAC7C,cACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO,UAAU,cAAc,SAAS;AAAA,QACxC,QAAQ,UAAU,cAAc,YAAY;AAAA,QAC5C,MAAM,UAAU,cAAc,MAAM;AAAA,QACpC,UAAQ;AAAA,QACP,GAAG;AAAA,QACJ,OACE,MACI;AAAA;AAAA,UAEE,SAAS;AAAA,UACT,GAAG,MAAM;AAAA,QACX,IACA,MAAM;AAAA,QAGX;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAOA,MAAM,mBAAmB,MACvB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,MAAK;AAAA,IACL,SAAQ;AAAA,IAGR;AAAA,0BAAC,WAAM,uBAAS;AAAA,MAChB,oBAAC,UAAK,GAAE,mPAAkP;AAAA;AAAA;AAC5P;AAGF,MAAM,4BAA4B,CAAC,EAAE,UAAU,MAA8B;AAC3E,QAAM,EAAE,YAAY,IAAI,iBAAiB;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY;AAAA,EACvB,IAAI,0BAA0B;AAQ9B,QAAM,CAAC,EAAE,YAAY,gBAAgB,GAAG,WAAW,IAAI,MAAM,SAAS;AAAA,IACpE,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACnB,CAAC;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,SAAS;AAC5D,MAAI,eAAe,WAAW;AAC5B,kBAAc,SAAS;AACvB,QAAI,CAAC,WAAW;AACd;AAAA,QAAY,CAAC,SACX,KAAK,aAAa,EAAE,YAAY,OAAO,iBAAiB,KAAK,IAAI;AAAA,MACnE;AAAA,IACF;AAAA,EACF;AAEA,MAAI,eAAe,YAAY;AAC7B,WACE,qBAAC,QAAK,OAAM,UAAS,SAAQ,UAAS,IAAG,KAAI,WAAU,UAAS,KAAI,KAClE;AAAA,0BAAC,QAAK,MAAK,KACT;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA,UACZ,QAAQ;AAAA,YACN,OAAO,aAAa,kBAAkB;AAAA,UACxC;AAAA;AAAA,MACF,GACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM;AACb,wBAAY,EAAE,YAAY,MAAM,iBAAiB,YAAY,CAAC;AAC9D,wBAAY;AAAA,UACd;AAAA,UACA,SAAS;AAAA,UAET;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,oBAAC,QAAK,OAAM,UAAS,SAAQ,UAAS,IAAG,KAAI,KAAI,KAC/C,8BAAC,QAAK,MAAK,KACT;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,IAAG;AAAA,MACH,aAAY;AAAA;AAAA,EACd,GACF,GACF;AAEJ;AAQA,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,MAAI,CAAC,KAAK,SAAS,KAAK,MAAM,WAAW,GAAG;AAC1C,WACE,iCACE;AAAA,0BAAC,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF;AAAA,MAEA,oBAAC,UAAK,eAAW,MAAC,OAAO,EAAE,YAAY,OAAO,GAAG,oBAEjD;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,0BAA0B,KAAK,MAAM,SAAS,GAAG;AACnD,UAAM,YAAY,KAAK,OAAO,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,IAAI;AAChE,WACE,oBAAC,WAAQ,SAAS,WAAW,UAAS,SACpC,8BAAC,iBAAc,KAAK,SAClB;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,IAAG;AAAA,QACH,aAAY;AAAA,QACZ,QAAQ,EAAE,OAAO,KAAK,MAAM,OAAO;AAAA;AAAA,IACrC,GACF,GACF;AAAA,EAEJ;AAEA,SAAO,oBAAC,iBAAc,KAAK,SAAU,eAAK,QAAQ,CAAC,GAAG,MAAK;AAC7D;AAEA,SAAS,sBACP,OACA,UACA;AACA,SAAO,YAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":["lastActiveDateTime","lastActiveDisplay","TableCellText"]}

package/dist/esm/lib/users-search.js CHANGED Viewed

@@ -9,10 +9,12 @@ import { IconButton, TextField, TextFieldSlot } from "./elements.js";
 import { useSearchContext } from "./search-provider.js";
 import { useUsersManagementContext } from "./users-management-context.js";
 import { namespaceClassNames } from "./utils.js";
+import { useTranslation } from "./i18n/use-translation.js";
 const UsersSearch = React.forwardRef(
   ({ className, ...props }, ref) => {
     const { inputRef, clearSearch, searchValue, setSearchValue } = useSearchContext();
     const { dispatch } = useUsersManagementContext();
+    const translate = useTranslation();
     const filter = useDebouncedCallback((value) => {
       dispatch({ type: "FILTER_BY_SEARCH", searchQuery: value });
     }, 200);
@@ -26,7 +28,16 @@ const UsersSearch = React.forwardRef(
         ref: useComposedRefs(inputRef, ref),
         className: cx(namespaceClassNames("users-search"), className),
         autoComplete: "off",
-        placeholder: "Search by name or e-mail",
+        "aria-label": translate({
+          defaultMessage: "User search",
+          id: "lzPOKv",
+          description: "Label for the user search input field"
+        }),
+        placeholder: translate({
+          defaultMessage: "Search by name or e-mail",
+          id: "VH4IKy",
+          description: "Placeholder text for the user search input field"
+        }),
         value: searchValue,
         onChange: (event) => {
           const value = event.target.value;
@@ -42,13 +53,16 @@ const UsersSearch = React.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(TextFieldSlot, { side: "left", children: /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "aria-hidden": "true", height: "16", width: "16" }) }),
-          /* @__PURE__ */ jsx(TextFieldSlot, { side: "right", children: searchValue && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TextFieldSlot, { side: "right", children: !!searchValue && /* @__PURE__ */ jsx(
             IconButton,
             {
               size: "1",
               onClick: resetSearch,
-              title: "Clear search",
-              "aria-label": "Clear search",
+              title: translate({
+                defaultMessage: "Clear search",
+                id: "IBozK6",
+                description: "Tooltip text for the clear search button"
+              }),
               children: /* @__PURE__ */ jsx(Cross2Icon, { "aria-hidden": "true" })
             }
           ) })

package/dist/esm/lib/users-search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/lib/users-search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { Cross2Icon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport cx from \"clsx\";\nimport * as React from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { IconButton, TextField, TextFieldSlot } from \"./elements.js\";\nimport { useSearchContext } from \"./search-provider.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport { namespaceClassNames } from \"./utils.js\";\n\ntype UsersSearchProps = React.ComponentPropsWithoutRef<typeof TextField>;\n\nexport const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(\n ({ className, ...props }, ref) => {\n const { inputRef, clearSearch, searchValue, setSearchValue } =\n useSearchContext();\n const { dispatch } = useUsersManagementContext();\n\n const filter = useDebouncedCallback((value) => {\n dispatch({ type: \"FILTER_BY_SEARCH\", searchQuery: value });\n }, 200);\n\n const resetSearch = () => {\n clearSearch();\n filter.cancel();\n };\n\n return (\n <TextField\n ref={useComposedRefs(inputRef, ref)}\n className={cx(namespaceClassNames(\"users-search\"), className)}\n autoComplete=\"off\"\n placeholder=\"Search by name or e-mail\"\n value={searchValue}\n onChange={(event) => {\n const value = event.target.value;\n setSearchValue(value);\n filter(value);\n }}\n onKeyDown={(event) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n resetSearch();\n }\n }}\n {...props}\n >\n <TextFieldSlot side=\"left\">\n <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n </TextFieldSlot>\n\n <TextFieldSlot side=\"right\">\n {searchValue && (\n <IconButton\n size=\"1\"\n onClick={resetSearch}\n title=\"Clear search\"\n ~~aria-label=\~~"~~Clear~~ search\"\n >\n <Cross2Icon aria-hidden=\"true\" />\n </IconButton>\n )}\n </TextFieldSlot>\n </TextField>\n );\n },\n);\n"],"mappings":";~~AA8BM~~,~~SAoBI~~,~~KApBJ~~;~~AA5BN~~,SAAS,uBAAuB;AAChC,SAAS,YAAY,2BAA2B;AAChD,OAAO,QAAQ;AACf,YAAY,WAAW;AACvB,SAAS,4BAA4B;AACrC,SAAS,YAAY,WAAW,qBAAqB;AACrD,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;~~AAI7B~~,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,UAAU,aAAa,aAAa,eAAe,IACzD,iBAAiB;AACnB,UAAM,EAAE,SAAS,IAAI,0BAA0B;~~AAE~~/C,UAAM,SAAS,qBAAqB,CAAC,UAAU;AAC7C,eAAS,EAAE,MAAM,oBAAoB,aAAa,MAAM,CAAC;AAAA,IAC3D,GAAG,GAAG;AAEN,UAAM,cAAc,MAAM;AACxB,kBAAY;AACZ,aAAO,OAAO;AAAA,IAChB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,gBAAgB,UAAU,GAAG;AAAA,QAClC,WAAW,GAAG,oBAAoB,cAAc,GAAG,SAAS;AAAA,QAC5D,cAAa;AAAA,QACb,~~aAAY~~;AAAA,~~QACZ~~,OAAO;AAAA,QACP,UAAU,CAAC,UAAU;AACnB,gBAAM,QAAQ,MAAM,OAAO;AAC3B,yBAAe,KAAK;AACpB,iBAAO,KAAK;AAAA,QACd;AAAA,QACA,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,UAAU;AAC1B,kBAAM,eAAe;AACrB,wBAAY;AAAA,UACd;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,iBAAc,MAAK,QAClB,8BAAC,uBAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA,UAEA,oBAAC,iBAAc,MAAK,SACjB,~~yBACC~~;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,~~OAAM~~;AAAA,~~cACN~~,~~cAAW~~;AAAA,~~cAEX~~,8BAAC,cAAW,eAAY,QAAO;AAAA;AAAA,UACjC,GAEJ;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}
1	+ {"version":3,"sources":["../../../src/lib/users-search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { Cross2Icon, MagnifyingGlassIcon } from \"@radix-ui/react-icons\";\nimport cx from \"clsx\";\nimport * as React from \"react\";\nimport { useDebouncedCallback } from \"use-debounce\";\nimport { IconButton, TextField, TextFieldSlot } from \"./elements.js\";\nimport { useSearchContext } from \"./search-provider.js\";\nimport { useUsersManagementContext } from \"./users-management-context.js\";\nimport { namespaceClassNames } from \"./utils.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ntype UsersSearchProps = React.ComponentPropsWithoutRef<typeof TextField>;\n\nexport const UsersSearch = React.forwardRef<HTMLInputElement, UsersSearchProps>(\n ({ className, ...props }, ref) => {\n const { inputRef, clearSearch, searchValue, setSearchValue } =\n useSearchContext();\n const { dispatch } = useUsersManagementContext();\n const translate = useTranslation();\n\n const filter = useDebouncedCallback((value) => {\n dispatch({ type: \"FILTER_BY_SEARCH\", searchQuery: value });\n }, 200);\n\n const resetSearch = () => {\n clearSearch();\n filter.cancel();\n };\n\n return (\n <TextField\n ref={useComposedRefs(inputRef, ref)}\n className={cx(namespaceClassNames(\"users-search\"), className)}\n autoComplete=\"off\"\n aria-label={translate({\n defaultMessage: \"User search\",\n id: \"lzPOKv\",\n description: \"Label for the user search input field\",\n })}\n placeholder={translate({\n defaultMessage: \"Search by name or e-mail\",\n id: \"VH4IKy\",\n description: \"Placeholder text for the user search input field\",\n })}\n value={searchValue}\n onChange={(event) => {\n const value = event.target.value;\n setSearchValue(value);\n filter(value);\n }}\n onKeyDown={(event) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n resetSearch();\n }\n }}\n {...props}\n >\n <TextFieldSlot side=\"left\">\n <MagnifyingGlassIcon aria-hidden=\"true\" height=\"16\" width=\"16\" />\n </TextFieldSlot>\n\n <TextFieldSlot side=\"right\">\n {!!searchValue && (\n <IconButton\n size=\"1\"\n onClick={resetSearch}\n title={translate({\n defaultMessage: \"Clear search\",\n id: \"IBozK6\",\n description: \"Tooltip text for the clear search button\",\n })}\n >\n <Cross2Icon aria-hidden=\"true\" />\n </IconButton>\n )}\n </TextFieldSlot>\n </TextField>\n );\n },\n);\n"],"mappings":";AAgCM,SA6BI,KA7BJ;AA9BN,SAAS,uBAAuB;AAChC,SAAS,YAAY,2BAA2B;AAChD,OAAO,QAAQ;AACf,YAAY,WAAW;AACvB,SAAS,4BAA4B;AACrC,SAAS,YAAY,WAAW,qBAAqB;AACrD,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAIxB,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,UAAU,aAAa,aAAa,eAAe,IACzD,iBAAiB;AACnB,UAAM,EAAE,SAAS,IAAI,0BAA0B;AAC/C,UAAM,YAAY,eAAe;AAEjC,UAAM,SAAS,qBAAqB,CAAC,UAAU;AAC7C,eAAS,EAAE,MAAM,oBAAoB,aAAa,MAAM,CAAC;AAAA,IAC3D,GAAG,GAAG;AAEN,UAAM,cAAc,MAAM;AACxB,kBAAY;AACZ,aAAO,OAAO;AAAA,IAChB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,gBAAgB,UAAU,GAAG;AAAA,QAClC,WAAW,GAAG,oBAAoB,cAAc,GAAG,SAAS;AAAA,QAC5D,cAAa;AAAA,QACb,cAAY,UAAU;AAAA,UACpB,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aAAa;AAAA,QACf,CAAC;AAAA,QACD,aAAa,UAAU;AAAA,UACrB,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,aAAa;AAAA,QACf,CAAC;AAAA,QACD,OAAO;AAAA,QACP,UAAU,CAAC,UAAU;AACnB,gBAAM,QAAQ,MAAM,OAAO;AAC3B,yBAAe,KAAK;AACpB,iBAAO,KAAK;AAAA,QACd;AAAA,QACA,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,UAAU;AAC1B,kBAAM,eAAe;AACrB,wBAAY;AAAA,UACd;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,iBAAc,MAAK,QAClB,8BAAC,uBAAoB,eAAY,QAAO,QAAO,MAAK,OAAM,MAAK,GACjE;AAAA,UAEA,oBAAC,iBAAc,MAAK,SACjB,WAAC,CAAC,eACD;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,OAAO,UAAU;AAAA,gBACf,gBAAgB;AAAA,gBAChB,IAAI;AAAA,gBACJ,aAAa;AAAA,cACf,CAAC;AAAA,cAED,8BAAC,cAAW,eAAY,QAAO;AAAA;AAAA,UACjC,GAEJ;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}

package/dist/esm/lib/utils.d.ts CHANGED Viewed

@@ -16,7 +16,8 @@ import '@radix-ui/themes/components/select';
 declare const canUseDOM: boolean;
 declare function getBestName({ firstName, lastName, }: Pick<Member, "firstName" | "lastName">): string | null;
-declare function getComparativeReadableDate(now: Date, then: Date, options?: {
+declare function getComparativeReadableDate(now: Date, then: Date, options: {
+    locale: string;
     timeZone?: string;
 }): string;
 declare function isObjectLike(value: unknown): value is Record<string, unknown>;

package/dist/esm/lib/utils.js CHANGED Viewed

@@ -12,28 +12,30 @@ function getBestName({
   return [firstName, lastName].filter(Boolean).join(" ") || null;
 }
 function getComparativeReadableDate(now, then, options) {
+  const locale = options.locale ?? "en-US";
   const timeSince = now.getTime() - then.getTime();
+  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
   if (timeSince < 6e4) {
-    return "Just now";
+    return formatter.format(0, "second");
   }
   if (timeSince < 36e5) {
     const timePassed = Math.floor(timeSince / 6e4);
-    return timePassed === 1 ? "1 minute ago" : `${timePassed} minutes ago`;
+    return formatter.format(-timePassed, "minute");
   }
   if (timeSince < 864e5) {
     const timePassed = Math.floor(timeSince / 36e5);
-    return timePassed === 1 ? "1 hour ago" : `${timePassed} hours ago`;
+    return formatter.format(-timePassed, "hour");
   }
   if (timeSince < 6048e5) {
     const timePassed = Math.floor(timeSince / 864e5);
-    return timePassed === 1 ? "1 day ago" : `${timePassed} days ago`;
+    return formatter.format(-timePassed, "day");
   }
   if (timeSince < 2592e6) {
     const timePassed = Math.floor(timeSince / 6048e5);
-    return timePassed === 1 ? "1 week ago" : `${timePassed} weeks ago`;
+    return formatter.format(-timePassed, "week");
   }
-  return then.toLocaleDateString("en-US", {
-    timeZone: options?.timeZone,
+  return then.toLocaleDateString(locale, {
+    timeZone: options.timeZone,
     month: "long",
     day: "numeric",
     // omit year if it's the same as the current year
@@ -111,6 +113,7 @@ function getDomProps(args) {
   }
   if (isWidgetRoot) {
     widgetState ??= "resolved";
+    props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-widget`] = true;
     props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-widget-state`] = widgetState;
   }
   if (dataAttributes) {

package/dist/esm/lib/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/lib/utils.ts"],"sourcesContent":["import { Member } from \"../api/endpoint.js\";\nimport Bowser from \"bowser\";\nimport cx from \"clsx\";\nimport {\n WIDGETS_CLASS_NAMESPACE,\n WIDGETS_DATA_ATTRIBUTE_NAMESPACE,\n} from \"./constants.js\";\nimport type { Elements } from \"./elements.js\";\n\nexport const canUseDOM = !!(\n typeof window !== \"undefined\" &&\n window.document &&\n window.document.createElement\n);\n\nexport function getBestName({\n firstName,\n lastName,\n}: Pick<Member, \"firstName\" \| \"lastName\">) {\n return [firstName, lastName].filter(Boolean).join(\" \") \|\| null;\n}\n\nexport function getComparativeReadableDate(\n now: Date,\n then: Date,\n options?: { timeZone?: string },\n): string {\n const timeSince = now.getTime() - then.getTime();\n\n // Has it been less than a minute?\n if (timeSince < 60_000) {\n return \"Just now\";\n }\n\n // Has it been less than an hour?\n if (timeSince < 3_600_000) {\n const timePassed = Math.floor(timeSince / 60_000);\n return timePassed === 1 ? \"1 minute ago\" : `${timePassed} minutes ago`;\n }\n\n // Has it been less than a day?\n if (timeSince < 86_400_000) {\n const timePassed = Math.floor(timeSince / 3_600_000);\n return timePassed === 1 ? \"1 hour ago\" : `${timePassed} hours ago`;\n }\n\n // Has it been less than a week?\n if (timeSince < 604_800_000) {\n const timePassed = Math.floor(timeSince / 86_400_000);\n return timePassed === 1 ? \"1 day ago\" : `${timePassed} days ago`;\n }\n\n // Has it been less than a month?\n if (timeSince < 2_592_000_000) {\n const timePassed = Math.floor(timeSince / 604_800_000);\n return timePassed === 1 ? \"1 week ago\" : `${timePassed} weeks ago`;\n }\n\n // Any later?\n return then.toLocaleDateString(\"en-US\", {\n timeZone: options?.timeZone,\n month: \"long\",\n day: \"numeric\",\n // omit year if it's the same as the current year\n year: now.getFullYear() !== then.getFullYear() ? \"numeric\" : undefined,\n });\n}\n\nexport function isObjectLike(value: unknown): value is Record<string, unknown> {\n return typeof value === \"object\" && value !== null;\n}\n\nexport function isErrorLike(\n value: unknown,\n): value is Record<string, unknown> & { message: string } {\n return isObjectLike(value) && typeof value.message === \"string\";\n}\n\nexport function isPromiseLike(value: unknown): value is PromiseLike<unknown> {\n return (\n typeof value === \"object\" &&\n value !== null &&\n \"then\" in value &&\n typeof value.then === \"function\"\n );\n}\n\nexport async function parseErrorResponse(\n response: Response,\n): Promise<{ message: string; status: number }> {\n try {\n const json = await response.json();\n if (!isObjectLike(json) \|\| typeof json.message !== \"string\") {\n return {\n status: response.status,\n message: response.statusText,\n };\n }\n return {\n ...json,\n status: response.status,\n message: json.message \|\| response.statusText,\n };\n } catch {\n return {\n status: response.status,\n message: response.statusText,\n };\n }\n}\n\nexport function namespaceClassNames(\n ...classNames: (string \| undefined \| null \| boolean)[]\n): string {\n return classNames\n .filter(Boolean)\n .map((className) => `${WIDGETS_CLASS_NAMESPACE}-${className}`)\n .join(\" \");\n}\n\ninterface CommonDomArgs {\n className?: string \| undefined \| null;\n dataAttributes?: Record<string, string \| boolean \| undefined \| null>;\n}\n\ninterface WidgetRootDomArgs {\n isWidgetRoot: true;\n widgetId: string;\n elementId?: never;\n widgetState: WidgetRootState;\n}\n\ninterface WidgetElementDomArgs {\n isWidgetRoot?: false;\n widgetId?: string;\n elementId?: keyof Elements;\n widgetState?: never;\n className: string \| undefined \| null;\n}\n\ntype DomArgs = CommonDomArgs & (WidgetRootDomArgs \| WidgetElementDomArgs);\n\ntype DataAttributeProps = {\n [K in `data-${string}`]?: string \| boolean;\n};\n\ntype DomProps = {\n className: string \| undefined;\n} & DataAttributeProps;\n\nexport function getDomProps(args: DomArgs) {\n let {\n className,\n dataAttributes,\n isWidgetRoot = false,\n widgetId,\n elementId,\n widgetState,\n ...passthroughProps\n } = args;\n\n const elementClassName = elementId\n ? (() => {\n // TODO: Overrides for specific elements are mostly here for backwards\n // compatibility. They should be removed in the next major version.\n if (\n elementId === \"primaryButton\" \|\|\n elementId === \"secondaryButton\" \|\|\n elementId === \"destructiveButton\"\n ) {\n return namespaceClassNames(\"button\");\n }\n\n if (elementId === \"iconButton\") {\n return namespaceClassNames(\"button\", \"icon-button\");\n }\n\n if (\n elementId === \"primaryMenuItem\" \|\|\n elementId === \"destructiveMenuItem\"\n ) {\n return namespaceClassNames(\"menu-item\");\n }\n\n if (elementId === \"textfield\") {\n return namespaceClassNames(elementId, \"text-field\");\n }\n\n return namespaceClassNames(fastKebabCase(elementId));\n })()\n : undefined;\n\n const props: DomProps = {\n ...passthroughProps,\n className: cx(\n className,\n isWidgetRoot && namespaceClassNames(\"widget\"),\n elementClassName,\n ),\n };\n\n if (widgetId) {\n props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-widget-id`] = widgetId;\n }\n\n if (isWidgetRoot) {\n widgetState ??= \"resolved\";\n props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-widget-state`] =\n widgetState;\n }\n\n if (dataAttributes) {\n for (const [key, value] of Object.entries(dataAttributes)) {\n if (value != null) {\n const parts = [widgetId, elementId, key]\n .filter((v) => v != null)\n .map(fastKebabCase)\n .join(\"-\");\n if (parts) {\n props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-${parts}`] = value;\n }\n }\n }\n }\n\n if (elementId) {\n props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-element`] =\n fastKebabCase(elementId);\n }\n\n return props;\n}\n\n/*\n Opt for simplicity and performance over capturing edge cases. Input strings\n * are expected to only be alphabetic.\n /\nfunction fastKebabCase(alphaString: string) {\n return alphaString.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n}\n\nexport function parseUserAgent(userAgent?: string \| null) {\n const browser = Bowser.getParser(userAgent ?? \"\");\n const browserName = browser.getBrowserName().replace(/^Mobile\\s/i, \"\");\n const osName = browser.getOSName();\n const pretty = [browserName, osName].filter(Boolean).join(\" on \");\n\n return { pretty, isMobile: browser.getPlatformType() === \"mobile\" };\n}\n\nexport function getUserLocation(\n location?: {\n cityName: string;\n countryISOCode: string;\n } \| null,\n ipAddress?: string \| null,\n) {\n if (location) {\n return (\n [location.cityName, location.countryISOCode].filter(Boolean).join(\", \") \|\|\n \"Unknown location\"\n );\n }\n\n if (ipAddress) {\n return ipAddress;\n }\n\n return \"Unknown location\";\n}\n\nexport function unreachable(value: never): never {\n throw new TypeError(`Unreachable code: ${value}`);\n}\n\nexport function pluralize(word = \"\", amount = 0, showAmount = true): string {\n return `${showAmount ? `${amount} ` : \"\"}${word}${amount === 1 ? \"\" : \"s\"}`;\n}\n\n// Props that all widgets should accept.\nexport interface WidgetRootDomProps {\n className?: string;\n}\n\nexport type WidgetRootState = \"loading\" \| \"error\" \| \"resolved\";\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/lib/utils.ts"],"sourcesContent":["import { Member } from \"../api/endpoint.js\";\nimport Bowser from \"bowser\";\nimport cx from \"clsx\";\nimport {\n WIDGETS_CLASS_NAMESPACE,\n WIDGETS_DATA_ATTRIBUTE_NAMESPACE,\n} from \"./constants.js\";\nimport type { Elements } from \"./elements.js\";\n\nexport const canUseDOM = !!(\n typeof window !== \"undefined\" &&\n window.document &&\n window.document.createElement\n);\n\nexport function getBestName({\n firstName,\n lastName,\n}: Pick<Member, \"firstName\" \| \"lastName\">) {\n return [firstName, lastName].filter(Boolean).join(\" \") \|\| null;\n}\n\nexport function getComparativeReadableDate(\n now: Date,\n then: Date,\n options: { locale: string; timeZone?: string },\n): string {\n const locale = options.locale ?? \"en-US\";\n const timeSince = now.getTime() - then.getTime();\n const formatter = new Intl.RelativeTimeFormat(locale, { numeric: \"auto\" });\n\n // Has it been less than a minute?\n if (timeSince < 60_000) {\n return formatter.format(0, \"second\"); // Returns \"now\" / \"maintenant\" / \"jetzt\" etc.\n }\n\n // Has it been less than an hour?\n if (timeSince < 3_600_000) {\n const timePassed = Math.floor(timeSince / 60_000);\n return formatter.format(-timePassed, \"minute\");\n }\n\n // Has it been less than a day?\n if (timeSince < 86_400_000) {\n const timePassed = Math.floor(timeSince / 3_600_000);\n return formatter.format(-timePassed, \"hour\");\n }\n\n // Has it been less than a week?\n if (timeSince < 604_800_000) {\n const timePassed = Math.floor(timeSince / 86_400_000);\n return formatter.format(-timePassed, \"day\");\n }\n\n // Has it been less than a month?\n if (timeSince < 2_592_000_000) {\n const timePassed = Math.floor(timeSince / 604_800_000);\n return formatter.format(-timePassed, \"week\");\n }\n\n // Any later?\n return then.toLocaleDateString(locale, {\n timeZone: options.timeZone,\n month: \"long\",\n day: \"numeric\",\n // omit year if it's the same as the current year\n year: now.getFullYear() !== then.getFullYear() ? \"numeric\" : undefined,\n });\n}\n\nexport function isObjectLike(value: unknown): value is Record<string, unknown> {\n return typeof value === \"object\" && value !== null;\n}\n\nexport function isErrorLike(\n value: unknown,\n): value is Record<string, unknown> & { message: string } {\n return isObjectLike(value) && typeof value.message === \"string\";\n}\n\nexport function isPromiseLike(value: unknown): value is PromiseLike<unknown> {\n return (\n typeof value === \"object\" &&\n value !== null &&\n \"then\" in value &&\n typeof value.then === \"function\"\n );\n}\n\nexport async function parseErrorResponse(\n response: Response,\n): Promise<{ message: string; status: number }> {\n try {\n const json = await response.json();\n if (!isObjectLike(json) \|\| typeof json.message !== \"string\") {\n return {\n status: response.status,\n message: response.statusText,\n };\n }\n return {\n ...json,\n status: response.status,\n message: json.message \|\| response.statusText,\n };\n } catch {\n return {\n status: response.status,\n message: response.statusText,\n };\n }\n}\n\nexport function namespaceClassNames(\n ...classNames: (string \| undefined \| null \| boolean)[]\n): string {\n return classNames\n .filter(Boolean)\n .map((className) => `${WIDGETS_CLASS_NAMESPACE}-${className}`)\n .join(\" \");\n}\n\ninterface CommonDomArgs {\n className?: string \| undefined \| null;\n dataAttributes?: Record<string, string \| boolean \| undefined \| null>;\n}\n\ninterface WidgetRootDomArgs {\n isWidgetRoot: true;\n widgetId: string;\n elementId?: never;\n widgetState: WidgetRootState;\n}\n\ninterface WidgetElementDomArgs {\n isWidgetRoot?: false;\n widgetId?: string;\n elementId?: keyof Elements;\n widgetState?: never;\n className: string \| undefined \| null;\n}\n\ntype DomArgs = CommonDomArgs & (WidgetRootDomArgs \| WidgetElementDomArgs);\n\ntype DataAttributeProps = {\n [K in `data-${string}`]?: string \| boolean;\n};\n\ntype DomProps = {\n className: string \| undefined;\n} & DataAttributeProps;\n\nexport function getDomProps(args: DomArgs) {\n let {\n className,\n dataAttributes,\n isWidgetRoot = false,\n widgetId,\n elementId,\n widgetState,\n ...passthroughProps\n } = args;\n\n const elementClassName = elementId\n ? (() => {\n // TODO: Overrides for specific elements are mostly here for backwards\n // compatibility. They should be removed in the next major version.\n if (\n elementId === \"primaryButton\" \|\|\n elementId === \"secondaryButton\" \|\|\n elementId === \"destructiveButton\"\n ) {\n return namespaceClassNames(\"button\");\n }\n\n if (elementId === \"iconButton\") {\n return namespaceClassNames(\"button\", \"icon-button\");\n }\n\n if (\n elementId === \"primaryMenuItem\" \|\|\n elementId === \"destructiveMenuItem\"\n ) {\n return namespaceClassNames(\"menu-item\");\n }\n\n if (elementId === \"textfield\") {\n return namespaceClassNames(elementId, \"text-field\");\n }\n\n return namespaceClassNames(fastKebabCase(elementId));\n })()\n : undefined;\n\n const props: DomProps = {\n ...passthroughProps,\n className: cx(\n className,\n isWidgetRoot && namespaceClassNames(\"widget\"),\n elementClassName,\n ),\n };\n\n if (widgetId) {\n props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-widget-id`] = widgetId;\n }\n\n if (isWidgetRoot) {\n widgetState ??= \"resolved\";\n props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-widget`] = true;\n props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-widget-state`] =\n widgetState;\n }\n\n if (dataAttributes) {\n for (const [key, value] of Object.entries(dataAttributes)) {\n if (value != null) {\n const parts = [widgetId, elementId, key]\n .filter((v) => v != null)\n .map(fastKebabCase)\n .join(\"-\");\n if (parts) {\n props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-${parts}`] = value;\n }\n }\n }\n }\n\n if (elementId) {\n props[`data-${WIDGETS_DATA_ATTRIBUTE_NAMESPACE}-element`] =\n fastKebabCase(elementId);\n }\n\n return props;\n}\n\n/*\n Opt for simplicity and performance over capturing edge cases. Input strings\n * are expected to only be alphabetic.\n /\nfunction fastKebabCase(alphaString: string) {\n return alphaString.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n}\n\nexport function parseUserAgent(userAgent?: string \| null) {\n const browser = Bowser.getParser(userAgent ?? \"\");\n const browserName = browser.getBrowserName().replace(/^Mobile\\s/i, \"\");\n const osName = browser.getOSName();\n const pretty = [browserName, osName].filter(Boolean).join(\" on \");\n\n return { pretty, isMobile: browser.getPlatformType() === \"mobile\" };\n}\n\nexport function getUserLocation(\n location?: {\n cityName: string;\n countryISOCode: string;\n } \| null,\n ipAddress?: string \| null,\n) {\n if (location) {\n return (\n [location.cityName, location.countryISOCode].filter(Boolean).join(\", \") \|\|\n \"Unknown location\"\n );\n }\n\n if (ipAddress) {\n return ipAddress;\n }\n\n return \"Unknown location\";\n}\n\nexport function unreachable(value: never): never {\n throw new TypeError(`Unreachable code: ${value}`);\n}\n\nexport function pluralize(word = \"\", amount = 0, showAmount = true): string {\n return `${showAmount ? `${amount} ` : \"\"}${word}${amount === 1 ? \"\" : \"s\"}`;\n}\n\n// Props that all widgets should accept.\nexport interface WidgetRootDomProps {\n className?: string;\n}\n\nexport type WidgetRootState = \"loading\" \| \"error\" \| \"resolved\";\n"],"mappings":"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","names":[]}

package/dist/esm/lib/view-dns-record-dialog.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { NameServerIcon } from "./name-server-icon.js";
 import { IconPanel } from "./icon-panel.js";
 import { CopyIconButton } from "./copy-button.js";
 import { Dialog, Button } from "./elements.js";
+import { Translation } from "./i18n/translation.js";
 const ViewDnsRecordDialog = (props) => {
   const isFailed = props.domain.state === "Failed";
   const handleRestartVerification = () => {
@@ -15,24 +16,73 @@ const ViewDnsRecordDialog = (props) => {
     props.children && /* @__PURE__ */ jsx(Dialog.Trigger, { children: props.children }),
     /* @__PURE__ */ jsxs(Dialog.Content, { style: { maxWidth: "530px" }, children: [
       /* @__PURE__ */ jsxs(Box, { mb: "5", children: [
-        /* @__PURE__ */ jsx(Dialog.Title, { size: "5", mb: "2", children: isFailed ? "Restart verification" : "View DNS record" }),
-        /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, children: isFailed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          "The domain ",
-          /* @__PURE__ */ jsx("b", { children: props.domain.domain }),
-          " will be automatically verified once the following DNS record is detected. Use a tool like ",
-          /* @__PURE__ */ jsx(Link, { href: "https://dnschecker.org/", children: "DNSChecker" }),
-          " to check the domain's record for any mistakes."
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          "The domain ",
-          /* @__PURE__ */ jsx("b", { children: props.domain.domain }),
-          " will be automatically verified once the following DNS record is detected."
-        ] }) })
+        /* @__PURE__ */ jsx(Dialog.Title, { size: "5", mb: "2", children: isFailed ? /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Restart verification",
+            id: "k9X2ru",
+            description: "Dialog title for restarting domain verification"
+          }
+        ) : /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "View DNS record",
+            id: "/aCgMQ",
+            description: "Dialog title for viewing DNS record"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, children: isFailed ? /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "The domain {domain} will be automatically verified once the following DNS record is detected. Use a tool like {dnsChecker} to check the domain's record for any mistakes.",
+            id: "yk7ScH",
+            description: "Instructions for failed domain verification with DNS checker tool",
+            values: {
+              domain: /* @__PURE__ */ jsx("b", { children: props.domain.domain }),
+              dnsChecker: (
+                // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                /* @__PURE__ */ jsx(Link, { href: "https://dnschecker.org/", children: "DNSChecker" })
+              )
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "The domain {domain} will be automatically verified once the following DNS record is detected.",
+            id: "7+lT5Q",
+            description: "Instructions for domain verification",
+            values: {
+              domain: /* @__PURE__ */ jsx("b", { children: props.domain.domain })
+            }
+          }
+        ) })
       ] }),
       /* @__PURE__ */ jsx(DnsRecordCard, { domain: props.domain }),
       /* @__PURE__ */ jsx(Flex, { justify: "end", gap: "2", mt: "5", children: isFailed ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Close" }) }),
-        /* @__PURE__ */ jsx(Button, { onClick: handleRestartVerification, children: "Restart verification" })
-      ] }) : /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { children: "Close" }) }) })
+        /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "secondary", children: /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Close",
+            id: "ESS/aT",
+            description: "Button text to close dialog"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleRestartVerification, children: /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "Restart verification",
+            id: "eSQSjC",
+            description: "Button text to restart domain verification"
+          }
+        ) })
+      ] }) : /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Close",
+          id: "ESS/aT",
+          description: "Button text to close dialog"
+        }
+      ) }) }) })
     ] })
   ] });
 };
@@ -58,11 +108,32 @@ const DnsRecordCard = (props) => {
           gridTemplateColumns: "146px 1fr"
         },
         children: [
-          /* @__PURE__ */ jsx(Text, { color: "gray", weight: "medium", size: "2", children: "Type" }),
+          /* @__PURE__ */ jsx(Text, { color: "gray", weight: "medium", size: "2", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Type",
+              id: "/UCweF",
+              description: "Label for DNS record type field"
+            }
+          ) }),
           /* @__PURE__ */ jsx(Text, { size: "2", children: "TXT" }),
-          /* @__PURE__ */ jsx(Text, { color: "gray", weight: "medium", size: "2", children: "Host / Name" }),
+          /* @__PURE__ */ jsx(Text, { color: "gray", weight: "medium", size: "2", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Host / Name",
+              id: "dx3Cso",
+              description: "Label for DNS host/name field"
+            }
+          ) }),
           /* @__PURE__ */ jsx(Text, { size: "2", children: props.domain.subdomain || "@" }),
-          /* @__PURE__ */ jsx(Text, { color: "gray", weight: "medium", size: "2", children: "Value" }),
+          /* @__PURE__ */ jsx(Text, { color: "gray", weight: "medium", size: "2", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Value",
+              id: "MaYH9g",
+              description: "Label for DNS record value field"
+            }
+          ) }),
           /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "start", children: [
             /* @__PURE__ */ jsx(Code, { size: "2", variant: "ghost", children: verificationContent }),
             /* @__PURE__ */ jsx(CopyIconButton, { value: verificationContent })

package/dist/esm/lib/view-dns-record-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/lib/view-dns-record-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Card, Flex, Text, Grid, Link, Code } from \"@radix-ui/themes\";\nimport { OrganizationDomain } from \"../api/endpoint.js\";\nimport { NameServerIcon } from \"./name-server-icon.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { CopyIconButton } from \"./copy-button.js\";\nimport { Dialog, Button } from \"./elements.js\";\n\ninterface ViewDnsRecordDialogProps {\n children?: React.ReactNode;\n domain: OrganizationDomain;\n onReverifyDomain: (domainId: string) => void;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n}\n\nexport const ViewDnsRecordDialog = (props: ViewDnsRecordDialogProps) => {\n const isFailed = props.domain.state === \"Failed\";\n\n const handleRestartVerification = () => {\n props.onReverifyDomain(props.domain.id);\n props.onOpenChange(false);\n };\n\n return (\n <Dialog.Root open={props.open} onOpenChange={props.onOpenChange}>\n {props.children && <Dialog.Trigger>{props.children}</Dialog.Trigger>}\n <Dialog.Content style={{ maxWidth: \"530px\" }}>\n <Box mb=\"5\">\n <Dialog.Title size=\"5\" mb=\"2\">\n {isFailed ? \"Restart verification\" : \"View DNS record\"}\n </Dialog.Title>\n <Text size=\"2\" highContrast>\n {isFailed ? (\n ~~<>\~~n The domain ~~<b>~~{~~props.~~domain~~.domain~~}~~</b>~~ will be automatically\n verified once the following DNS record is detected. Use a tool\n ~~like~~ <Link href=\"https://dnschecker.org/\">DNSChecker</Link~~> to\~~n ~~check the domain's record for any mistakes.\~~n ~~</>\~~n ) : (\n ~~<>\~~n The domain ~~<b>~~{~~props.~~domain~~.domain~~}~~</b>~~ will be automatically\n verified once the following DNS record is detected.\n ~~</>\~~n )}\n </Text>\n </Box>\n\n <DnsRecordCard domain={props.domain} />\n <Flex justify=\"end\" gap=\"2\" mt=\"5\">\n {isFailed ? (\n <>\n <Dialog.Close>\n <Button variant=\"secondary\">Close</Button>\n </Dialog.Close>\n <Button onClick={handleRestartVerification}>\n Restart verification\n </Button>\n </>\n ) : (\n <Dialog.Close>\n <Button>Close</Button>\n </Dialog.Close>\n )}\n </Flex>\n </Dialog.Content>\n </Dialog.Root>\n );\n};\n\nconst DnsRecordCard = (props: { domain: OrganizationDomain }) => {\n const verificationContent = `${props.domain.verificationPrefix ?? \"verification_token\"}=${props.domain.verificationToken}`;\n return (\n <Card size=\"2\">\n <Flex gap=\"2\" align=\"center\" mb=\"4\">\n <IconPanel\n color={props.domain.nameServer === \"Other\" ? \"gray\" : \"panel\"}\n >\n <NameServerIcon provider={props.domain.nameServer} />\n </IconPanel>\n\n <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n {props.domain.domain}\n </Text>\n </Flex>\n <Grid\n gap=\"4\"\n style={{\n alignItems: \"start\",\n gridTemplateColumns: \"146px 1fr\",\n }}\n >\n <Text color=\"gray\" weight=\"medium\" size=\"2\">\n Type\n </Text>\n <Text size=\"2\">TXT</Text>\n\n <Text color=\"gray\" weight=\"medium\" size=\"2\">\n Host / Name\n </Text>\n <Text size=\"2\">{props.domain.subdomain \|\| \"@\"}</Text>\n\n <Text color=\"gray\" weight=\"medium\" size=\"2\">\n Value\n </Text>\n <Flex gap=\"2\" align=\"start\">\n <Code size=\"2\" variant=\"ghost\">\n {verificationContent}\n </Code>\n <CopyIconButton value={verificationContent} />\n </Flex>\n </Grid>\n </Card>\n );\n};\n"],"mappings":";~~AA4ByB~~,~~SAQX~~,~~UARW~~,~~KAQX~~,~~YARW~~;~~AAzBzB~~,SAAS,KAAK,MAAM,MAAM,MAAM,MAAM,MAAM,YAAY;AAExD,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,QAAQ,cAAc;~~AAUxB~~,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM,WAAW,MAAM,OAAO,UAAU;AAExC,QAAM,4BAA4B,MAAM;AACtC,UAAM,iBAAiB,MAAM,OAAO,EAAE;AACtC,UAAM,aAAa,KAAK;AAAA,EAC1B;AAEA,SACE,qBAAC,OAAO,MAAP,EAAY,MAAM,MAAM,MAAM,cAAc,MAAM,cAChD;AAAA,UAAM,YAAY,oBAAC,OAAO,SAAP,EAAgB,gBAAM,UAAS;AAAA,IACnD,qBAAC,OAAO,SAAP,EAAe,OAAO,EAAE,UAAU,QAAQ,GACzC;AAAA,2BAAC,OAAI,IAAG,KACN;AAAA,4BAAC,OAAO,OAAP,EAAa,MAAK,KAAI,IAAG,KACvB,~~qBAAW~~,~~yBAAyB~~,~~mBACvC~~;AAAA,QACA,oBAAC,QAAK,MAAK,KAAI,cAAY,MACxB,qBACC,~~iCAAE~~;AAAA;AAAA,~~UACW~~,oBAAC,OAAG,gBAAM,OAAO,QAAO;AAAA,~~UAAI~~;AAAA,~~UAElC~~,oBAAC,QAAK,MAAK,2BAA0B,wBAAU;AAAA,~~UAAO~~;AAAA,~~WAE7D~~,IAEA,~~iCAAE~~;AAAA;AAAA,~~UACW~~,oBAAC,OAAG,gBAAM,OAAO,QAAO;AAAA,~~UAAI~~;AAAA,~~WAEzC~~,GAEJ;AAAA,SACF;AAAA,MAEA,oBAAC,iBAAc,QAAQ,MAAM,QAAQ;AAAA,MACrC,oBAAC,QAAK,SAAQ,OAAM,KAAI,KAAI,IAAG,KAC5B,qBACC,iCACE;AAAA,4BAAC,OAAO,OAAP,EACC,8BAAC,UAAO,SAAQ,aAAY,~~mBAAK~~,~~GACnC~~;AAAA,QACA,oBAAC,UAAO,SAAS,~~2BAA2B~~,~~kCAE5C~~;AAAA,SACF,IAEA,oBAAC,OAAO,OAAP,EACC,8BAAC,~~UAAO~~,~~mBAAK~~,~~GACf~~,GAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,gBAAgB,CAAC,UAA0C;AAC/D,QAAM,sBAAsB,GAAG,MAAM,OAAO,sBAAsB,oBAAoB,IAAI,MAAM,OAAO,iBAAiB;AACxH,SACE,qBAAC,QAAK,MAAK,KACT;AAAA,yBAAC,QAAK,KAAI,KAAI,OAAM,UAAS,IAAG,KAC9B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM,OAAO,eAAe,UAAU,SAAS;AAAA,UAEtD,8BAAC,kBAAe,UAAU,MAAM,OAAO,YAAY;AAAA;AAAA,MACrD;AAAA,MAEA,oBAAC,QAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,IAAG,QACjD,gBAAM,OAAO,QAChB;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,qBAAqB;AAAA,QACvB;AAAA,QAEA;AAAA,8BAAC,QAAK,OAAM,QAAO,QAAO,UAAS,MAAK,~~KAAI~~,~~kBAE5C~~;AAAA,~~UACA~~,oBAAC,QAAK,MAAK,KAAI,iBAAG;AAAA,UAElB,oBAAC,QAAK,OAAM,QAAO,QAAO,UAAS,MAAK,~~KAAI~~,~~yBAE5C~~;AAAA,~~UACA~~,oBAAC,QAAK,MAAK,KAAK,gBAAM,OAAO,aAAa,KAAI;AAAA,UAE9C,oBAAC,QAAK,OAAM,QAAO,QAAO,UAAS,MAAK,~~KAAI~~,~~mBAE5C~~;AAAA,UACA,qBAAC,QAAK,KAAI,KAAI,OAAM,SAClB;AAAA,gCAAC,QAAK,MAAK,KAAI,SAAQ,SACpB,+BACH;AAAA,YACA,oBAAC,kBAAe,OAAO,qBAAqB;AAAA,aAC9C;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
1	+ {"version":3,"sources":["../../../src/lib/view-dns-record-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Card, Flex, Text, Grid, Link, Code } from \"@radix-ui/themes\";\nimport { OrganizationDomain } from \"../api/endpoint.js\";\nimport { NameServerIcon } from \"./name-server-icon.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { CopyIconButton } from \"./copy-button.js\";\nimport { Dialog, Button } from \"./elements.js\";\nimport { Translation } from \"./i18n/translation.js\";\n\ninterface ViewDnsRecordDialogProps {\n children?: React.ReactNode;\n domain: OrganizationDomain;\n onReverifyDomain: (domainId: string) => void;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n}\n\nexport const ViewDnsRecordDialog = (props: ViewDnsRecordDialogProps) => {\n const isFailed = props.domain.state === \"Failed\";\n\n const handleRestartVerification = () => {\n props.onReverifyDomain(props.domain.id);\n props.onOpenChange(false);\n };\n\n return (\n <Dialog.Root open={props.open} onOpenChange={props.onOpenChange}>\n {props.children && <Dialog.Trigger>{props.children}</Dialog.Trigger>}\n <Dialog.Content style={{ maxWidth: \"530px\" }}>\n <Box mb=\"5\">\n <Dialog.Title size=\"5\" mb=\"2\">\n {isFailed ? (\n <Translation\n defaultMessage=\"Restart verification\"\n id=\"k9X2ru\"\n description=\"Dialog title for restarting domain verification\"\n />\n ) : (\n <Translation\n defaultMessage=\"View DNS record\"\n id=\"/aCgMQ\"\n description=\"Dialog title for viewing DNS record\"\n />\n )}\n </Dialog.Title>\n <Text size=\"2\" highContrast>\n {isFailed ? (\n <Translation\n defaultMessage=\"The domain {domain} will be automatically verified once the following DNS record is detected. Use a tool like {dnsChecker} to check the domain's record for any mistakes.\"\n id=\"yk7ScH\"\n description=\"Instructions for failed domain verification with DNS checker tool\"\n values={{\n domain: <b>{props.domain.domain}</b>,\n dnsChecker: (\n // eslint-disable-next-line formatjs/no-literal-string-in-jsx\n <Link href=\"https://dnschecker.org/\">DNSChecker</Link>\n ),\n }}\n />\n ) : (\n <Translation\n defaultMessage=\"The domain {domain} will be automatically verified once the following DNS record is detected.\"\n id=\"7+lT5Q\"\n description=\"Instructions for domain verification\"\n values={{\n domain: <b>{props.domain.domain}</b>,\n }}\n />\n )}\n </Text>\n </Box>\n\n <DnsRecordCard domain={props.domain} />\n <Flex justify=\"end\" gap=\"2\" mt=\"5\">\n {isFailed ? (\n <>\n <Dialog.Close>\n <Button variant=\"secondary\">\n <Translation\n defaultMessage=\"Close\"\n id=\"ESS/aT\"\n description=\"Button text to close dialog\"\n />\n </Button>\n </Dialog.Close>\n <Button onClick={handleRestartVerification}>\n <Translation\n defaultMessage=\"Restart verification\"\n id=\"eSQSjC\"\n description=\"Button text to restart domain verification\"\n />\n </Button>\n </>\n ) : (\n <Dialog.Close>\n <Button>\n <Translation\n defaultMessage=\"Close\"\n id=\"ESS/aT\"\n description=\"Button text to close dialog\"\n />\n </Button>\n </Dialog.Close>\n )}\n </Flex>\n </Dialog.Content>\n </Dialog.Root>\n );\n};\n\nconst DnsRecordCard = (props: { domain: OrganizationDomain }) => {\n const verificationContent = `${props.domain.verificationPrefix ?? \"verification_token\"}=${props.domain.verificationToken}`;\n return (\n <Card size=\"2\">\n <Flex gap=\"2\" align=\"center\" mb=\"4\">\n <IconPanel\n color={props.domain.nameServer === \"Other\" ? \"gray\" : \"panel\"}\n >\n <NameServerIcon provider={props.domain.nameServer} />\n </IconPanel>\n\n <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n {props.domain.domain}\n </Text>\n </Flex>\n <Grid\n gap=\"4\"\n style={{\n alignItems: \"start\",\n gridTemplateColumns: \"146px 1fr\",\n }}\n >\n <Text color=\"gray\" weight=\"medium\" size=\"2\">\n <Translation\n defaultMessage=\"Type\"\n id=\"/UCweF\"\n description=\"Label for DNS record type field\"\n />\n </Text>\n {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx /}\n <Text size=\"2\">TXT</Text>\n\n <Text color=\"gray\" weight=\"medium\" size=\"2\">\n <Translation\n defaultMessage=\"Host / Name\"\n id=\"dx3Cso\"\n description=\"Label for DNS host/name field\"\n />\n </Text>\n {/ eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n <Text size=\"2\">{props.domain.subdomain \|\| \"@\"}</Text>\n\n <Text color=\"gray\" weight=\"medium\" size=\"2\">\n <Translation\n defaultMessage=\"Value\"\n id=\"MaYH9g\"\n description=\"Label for DNS record value field\"\n />\n </Text>\n <Flex gap=\"2\" align=\"start\">\n <Code size=\"2\" variant=\"ghost\">\n {verificationContent}\n </Code>\n <CopyIconButton value={verificationContent} />\n </Flex>\n </Grid>\n </Card>\n );\n};\n"],"mappings":";AA6ByB,SAgDb,UAhDa,KAEjB,YAFiB;AA1BzB,SAAS,KAAK,MAAM,MAAM,MAAM,MAAM,MAAM,YAAY;AAExD,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,QAAQ,cAAc;AAC/B,SAAS,mBAAmB;AAUrB,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM,WAAW,MAAM,OAAO,UAAU;AAExC,QAAM,4BAA4B,MAAM;AACtC,UAAM,iBAAiB,MAAM,OAAO,EAAE;AACtC,UAAM,aAAa,KAAK;AAAA,EAC1B;AAEA,SACE,qBAAC,OAAO,MAAP,EAAY,MAAM,MAAM,MAAM,cAAc,MAAM,cAChD;AAAA,UAAM,YAAY,oBAAC,OAAO,SAAP,EAAgB,gBAAM,UAAS;AAAA,IACnD,qBAAC,OAAO,SAAP,EAAe,OAAO,EAAE,UAAU,QAAQ,GACzC;AAAA,2BAAC,OAAI,IAAG,KACN;AAAA,4BAAC,OAAO,OAAP,EAAa,MAAK,KAAI,IAAG,KACvB,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,IAAG;AAAA,YACH,aAAY;AAAA;AAAA,QACd,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,IAAG;AAAA,YACH,aAAY;AAAA;AAAA,QACd,GAEJ;AAAA,QACA,oBAAC,QAAK,MAAK,KAAI,cAAY,MACxB,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,IAAG;AAAA,YACH,aAAY;AAAA,YACZ,QAAQ;AAAA,cACN,QAAQ,oBAAC,OAAG,gBAAM,OAAO,QAAO;AAAA,cAChC;AAAA;AAAA,gBAEE,oBAAC,QAAK,MAAK,2BAA0B,wBAAU;AAAA;AAAA,YAEnD;AAAA;AAAA,QACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,IAAG;AAAA,YACH,aAAY;AAAA,YACZ,QAAQ;AAAA,cACN,QAAQ,oBAAC,OAAG,gBAAM,OAAO,QAAO;AAAA,YAClC;AAAA;AAAA,QACF,GAEJ;AAAA,SACF;AAAA,MAEA,oBAAC,iBAAc,QAAQ,MAAM,QAAQ;AAAA,MACrC,oBAAC,QAAK,SAAQ,OAAM,KAAI,KAAI,IAAG,KAC5B,qBACC,iCACE;AAAA,4BAAC,OAAO,OAAP,EACC,8BAAC,UAAO,SAAQ,aACd;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,IAAG;AAAA,YACH,aAAY;AAAA;AAAA,QACd,GACF,GACF;AAAA,QACA,oBAAC,UAAO,SAAS,2BACf;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,IAAG;AAAA,YACH,aAAY;AAAA;AAAA,QACd,GACF;AAAA,SACF,IAEA,oBAAC,OAAO,OAAP,EACC,8BAAC,UACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF,GAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,MAAM,gBAAgB,CAAC,UAA0C;AAC/D,QAAM,sBAAsB,GAAG,MAAM,OAAO,sBAAsB,oBAAoB,IAAI,MAAM,OAAO,iBAAiB;AACxH,SACE,qBAAC,QAAK,MAAK,KACT;AAAA,yBAAC,QAAK,KAAI,KAAI,OAAM,UAAS,IAAG,KAC9B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM,OAAO,eAAe,UAAU,SAAS;AAAA,UAEtD,8BAAC,kBAAe,UAAU,MAAM,OAAO,YAAY;AAAA;AAAA,MACrD;AAAA,MAEA,oBAAC,QAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,IAAG,QACjD,gBAAM,OAAO,QAChB;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,qBAAqB;AAAA,QACvB;AAAA,QAEA;AAAA,8BAAC,QAAK,OAAM,QAAO,QAAO,UAAS,MAAK,KACtC;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UAEA,oBAAC,QAAK,MAAK,KAAI,iBAAG;AAAA,UAElB,oBAAC,QAAK,OAAM,QAAO,QAAO,UAAS,MAAK,KACtC;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UAEA,oBAAC,QAAK,MAAK,KAAK,gBAAM,OAAO,aAAa,KAAI;AAAA,UAE9C,oBAAC,QAAK,OAAM,QAAO,QAAO,UAAS,MAAK,KACtC;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,qBAAC,QAAK,KAAI,KAAI,OAAM,SAClB;AAAA,gCAAC,QAAK,MAAK,KAAI,SAAQ,SACpB,+BACH;AAAA,YACA,oBAAC,kBAAe,OAAO,qBAAqB;AAAA,aAC9C;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

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

	@@ -1 +1 @@
1	- {"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 OrganizationSwitcher as OrganizationSwitcherPresentational,\n} from \"./lib/organization-switcher.js\";\nimport type {\n OrganizationSwitcherErrorProps,\n OrganizationSwitcherLoadingProps,\n OrganizationSwitcherPassthroughProps,\n} from \"./lib/organization-switcher.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport { keepPreviousData } from \"@tanstack/react-query\";\n\ninterface OrganizationSwitcherProps\n extends OrganizationSwitcherPassthroughProps {\n authToken: AuthToken;\n}\n\nconst OrganizationSwitcher: React.FC<OrganizationSwitcherProps> = ({\n authToken,\n organizationLabel,\n switchToOrganization,\n truncateBehavior,\n variant,\n ...domProps\n}) => {\n const baseUrl = useWorkOsApiUrl();\n\n return (\n <ErrorBoundary\n fallbackRender={({ error }) => (\n <OrganizationSwitcherError\n error={error}\n variant={variant}\n {...domProps}\n />\n )}\n >\n <ApiProvider\n widgetType=\"organization-switcher\"\n authToken={authToken}\n baseUrl={baseUrl}\n >\n <OrganizationSwitcherImpl\n switchToOrganization={switchToOrganization}\n organizationLabel={organizationLabel}\n truncateBehavior={truncateBehavior}\n variant={variant}\n {...domProps}\n />\n </ApiProvider>\n </ErrorBoundary>\n );\n};\n\n// Constant reference to avoid unnecessary prop changes\nconst emptyOrganizations: OrganizationInfo[] = [];\n\nconst OrganizationSwitcherImpl = ({\n variant,\n switchToOrganization,\n organizationLabel,\n truncateBehavior,\n children,\n ...domProps\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 variant={variant} {...domProps} />;\n }\n\n if (organizationsQuery.isError) {\n return (\n <OrganizationSwitcherError\n error={organizationsQuery.error}\n variant={variant}\n {...domProps}\n />\n );\n }\n\n return (\n <ErrorBoundary\n fallbackRender={({ error }) => (\n <OrganizationSwitcherError\n error={error}\n variant={variant}\n {...domProps}\n />\n )}\n >\n <OrganizationSwitcherPresentational\n organizations={organizations}\n switchToOrganization={switchToOrganization}\n variant={variant}\n organizationLabel={organizationLabel}\n truncateBehavior={truncateBehavior}\n {...domProps}\n >\n {children}\n </OrganizationSwitcherPresentational>\n </ErrorBoundary>\n );\n};\n\nexport type {\n OrganizationSwitcherProps,\n OrganizationSwitcherLoadingProps,\n OrganizationSwitcherErrorProps,\n};\nexport {\n OrganizationSwitcher,\n OrganizationSwitcherLoading,\n OrganizationSwitcherError,\n};\n"],"mappings":";~~AAqCQ~~;~~AAnCR~~,SAAS,aAAwB,mBAAmB;AACpD,SAA2B,wBAAwB;AAEnD,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,OACnB;AAMP,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;~~AAOjC~~,MAAM,uBAA4D,CAAC;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB,CAAC,EAAE,MAAM,MACvB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACC,GAAG;AAAA;AAAA,UACN;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAGA,MAAM,qBAAyC,CAAC;AAEhD,MAAM,2BAA2B,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;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,SAAmB,GAAG,UAAU;AAAA,EACtE;AAEA,MAAI,mBAAmB,SAAS;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,mBAAmB;AAAA,QAC1B;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB,CAAC,EAAE,MAAM,MACvB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
1	+ {"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 OrganizationSwitcher as OrganizationSwitcherPresentational,\n} from \"./lib/organization-switcher.js\";\nimport type {\n OrganizationSwitcherErrorProps,\n OrganizationSwitcherLoadingProps,\n OrganizationSwitcherPassthroughProps,\n} from \"./lib/organization-switcher.js\";\nimport { useWorkOsApiUrl } from \"./lib/widgets-context.js\";\nimport { keepPreviousData } from \"@tanstack/react-query\";\n\ninterface OrganizationSwitcherProps extends OrganizationSwitcherPassthroughProps {\n authToken: AuthToken;\n}\n\nconst OrganizationSwitcher: React.FC<OrganizationSwitcherProps> = ({\n authToken,\n organizationLabel,\n switchToOrganization,\n truncateBehavior,\n variant,\n ...domProps\n}) => {\n const baseUrl = useWorkOsApiUrl();\n\n return (\n <ErrorBoundary\n fallbackRender={({ error }) => (\n <OrganizationSwitcherError\n error={error}\n variant={variant}\n {...domProps}\n />\n )}\n >\n <ApiProvider\n widgetType=\"organization-switcher\"\n authToken={authToken}\n baseUrl={baseUrl}\n >\n <OrganizationSwitcherImpl\n switchToOrganization={switchToOrganization}\n organizationLabel={organizationLabel}\n truncateBehavior={truncateBehavior}\n variant={variant}\n {...domProps}\n />\n </ApiProvider>\n </ErrorBoundary>\n );\n};\n\n// Constant reference to avoid unnecessary prop changes\nconst emptyOrganizations: OrganizationInfo[] = [];\n\nconst OrganizationSwitcherImpl = ({\n variant,\n switchToOrganization,\n organizationLabel,\n truncateBehavior,\n children,\n ...domProps\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 variant={variant} {...domProps} />;\n }\n\n if (organizationsQuery.isError) {\n return (\n <OrganizationSwitcherError\n error={organizationsQuery.error}\n variant={variant}\n {...domProps}\n />\n );\n }\n\n return (\n <ErrorBoundary\n fallbackRender={({ error }) => (\n <OrganizationSwitcherError\n error={error}\n variant={variant}\n {...domProps}\n />\n )}\n >\n <OrganizationSwitcherPresentational\n organizations={organizations}\n switchToOrganization={switchToOrganization}\n variant={variant}\n organizationLabel={organizationLabel}\n truncateBehavior={truncateBehavior}\n {...domProps}\n >\n {children}\n </OrganizationSwitcherPresentational>\n </ErrorBoundary>\n );\n};\n\nexport type {\n OrganizationSwitcherProps,\n OrganizationSwitcherLoadingProps,\n OrganizationSwitcherErrorProps,\n};\nexport {\n OrganizationSwitcher,\n OrganizationSwitcherLoading,\n OrganizationSwitcherError,\n};\n"],"mappings":";AAoCQ;AAlCR,SAAS,aAAwB,mBAAmB;AACpD,SAA2B,wBAAwB;AAEnD,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,OACnB;AAMP,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAMjC,MAAM,uBAA4D,CAAC;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB,CAAC,EAAE,MAAM,MACvB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACC,GAAG;AAAA;AAAA,UACN;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAGA,MAAM,qBAAyC,CAAC;AAEhD,MAAM,2BAA2B,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;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,SAAmB,GAAG,UAAU;AAAA,EACtE;AAEA,MAAI,mBAAmB,SAAS;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,mBAAmB;AAAA,QAC1B;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB,CAAC,EAAE,MAAM,MACvB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/esm/workos-widgets.client.js CHANGED Viewed

@@ -14,14 +14,14 @@ import { WidgetsContext } from "./lib/widgets-context.js";
 import { WIDGETS_DATA_ATTRIBUTE_NAMESPACE } from "./lib/constants.js";
 const WorkOsWidgets = ({
   elements = {},
+  className,
   theme: { fontFamily, ...radixThemesProps } = {},
   style = {},
   children,
   apiHostname = DEFAULT_API_HOSTNAME,
   port = null,
   https = true,
-  queryClient,
-  className
+  queryClient
 }) => {
   const customStyle = fontFamily ? {
     "--default-font-family": fontFamily,