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

@workos-inc/widgets 1.8.1 → 1.8.2

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 (1332) hide show

package/dist/esm/lib/elevated-access.js.map CHANGED Viewed

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

package/dist/esm/lib/otp-input.js CHANGED Viewed

@@ -1,8 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import * as Form from "@radix-ui/react-form";
+import {
+  composeRefs,
+  useComposedRefs,
+  useControllableState
+} from "radix-ui/internal";
+import { Form } from "radix-ui";
 import { Grid } from "@radix-ui/themes";
 import * as React from "react";
 import { TextField } from "./elements.js";

package/dist/esm/lib/otp-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/lib/otp-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { composeRefs, useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport * as Form from \"@radix-ui/react-form\";\nimport { Grid } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { TextField } from \"./elements.js\";\n\ninterface OptContextType {\n value: string[];\n readOnly?: boolean;\n state?: \"valid\" \| \"invalid\";\n onEnterPressed: () => void;\n onChildAdd: (input: HTMLInputElement) => void;\n onCharChange: (char: string, index: number) => void;\n allChildrenAdded: boolean;\n}\n\nconst OtpContext = React.createContext<OptContextType \| undefined>(undefined);\n\ntype OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {\n onValueChange?: (value: string) => void;\n id?: string;\n name?: string;\n readOnly?: boolean;\n state?: \"valid\" \| \"invalid\";\n value?: string;\n defaultValue?: string;\n autoSubmit?: boolean;\n};\n\nexport const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(\n function Root(\n {\n name,\n id,\n defaultValue,\n value: valueProp,\n onValueChange,\n autoSubmit,\n children,\n readOnly,\n state,\n ...gridProps\n },\n forwardedRef,\n ) {\n const [lastCharIndex, setLastCharIndex] = React.useState<number>(0);\n const [allChildrenAdded, setAllChildrenAdded] =\n React.useState<boolean>(false);\n const childCount = React.Children.count(children);\n\n const [value, setValue] = useControllableState({\n prop: getValueAsArray(valueProp, childCount),\n defaultProp: getValueAsArray(defaultValue, childCount) ?? [],\n onChange: (value) => onValueChange?.(value.join(\"\")),\n });\n\n const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n const childrenRefs = React.useRef<HTMLInputElement[]>([]);\n\n const attemptAutoSubmit = React.useCallback(\n (enterPressed = false) => {\n if (\n autoSubmit &&\n value &&\n value.every((char) => char !== \"\") &&\n (enterPressed \|\| lastCharIndex + 1 === childCount)\n ) {\n hiddenInputRef.current?.form?.requestSubmit();\n }\n },\n [value, childCount, lastCharIndex, autoSubmit],\n );\n\n const handleEnterPressed = React.useCallback(\n () => attemptAutoSubmit(true),\n [attemptAutoSubmit],\n );\n\n const handleChildAdd = React.useCallback(\n (input: HTMLInputElement) => {\n if (input) {\n input.dataset.index = `${childrenRefs.current.length}`;\n childrenRefs.current.push(input);\n } else {\n childrenRefs.current.pop();\n }\n\n if (childrenRefs.current.length === childCount) {\n setAllChildrenAdded(true);\n }\n },\n [childCount],\n );\n\n const handleCharChange = React.useCallback(\n (char: string, index: number) => {\n setValue((previousValue) => {\n const arrayToCopy = previousValue ?? createEmptyArray(childCount);\n const newValue = [...arrayToCopy];\n newValue[index] = char;\n return newValue;\n });\n setLastCharIndex(index);\n },\n [childCount, setValue],\n );\n\n const otpContext = React.useMemo(\n () => ({\n value: value ?? createEmptyArray(childCount),\n readOnly,\n state,\n allChildrenAdded,\n onEnterPressed: handleEnterPressed,\n onChildAdd: handleChildAdd,\n onCharChange: handleCharChange,\n }),\n [\n value,\n allChildrenAdded,\n readOnly,\n state,\n childCount,\n handleEnterPressed,\n handleChildAdd,\n handleCharChange,\n ],\n );\n\n React.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);\n\n return (\n <OtpContext.Provider value={otpContext}>\n <Grid\n columns={`repeat(${childCount}, 1fr)`}\n {...gridProps}\n onPaste={(event: React.ClipboardEvent<HTMLDivElement>) => {\n event.preventDefault();\n const pastedValue = event.clipboardData.getData(\"Text\");\n const sanitizedValue = pastedValue\n .replace(/[^\\d]/g, \"\")\n .slice(0, childCount);\n const value = sanitizedValue\n .padEnd(childCount, \"#\")\n .split(\"\")\n .map((char) => (char === \"#\" ? \"\" : char));\n\n setValue(value);\n setLastCharIndex(sanitizedValue.length - 1);\n\n const index = Math.min(sanitizedValue.length, childCount - 1);\n childrenRefs.current?.[index]?.focus();\n }}\n >\n {children}\n <input\n ref={composeRefs(forwardedRef, hiddenInputRef)}\n defaultValue={value?.join(\"\")}\n minLength={childCount}\n name={name}\n type=\"hidden\"\n />\n </Grid>\n </OtpContext.Provider>\n );\n },\n);\n\ninterface InputProps extends React.ComponentProps<typeof TextField> {\n autoComplete?: \"one-time-code\" \| \"off\";\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n function Input(\n { style, readOnly, autoComplete = \"off\", ...props },\n forwardedRef,\n ) {\n const otpContext = useOptContext();\n const inputRef = React.useRef<HTMLInputElement>(null);\n const composedInputRef = useComposedRefs(\n forwardedRef,\n inputRef,\n otpContext.onChildAdd,\n );\n\n // FIXME: This should be refactored\n // eslint-disable-next-line react-hooks/refs\n const index = Number(inputRef.current?.dataset.index ?? -1);\n const char = otpContext.value[index] ?? \"\";\n\n return (\n <Form.Field name={`otp-${index}`} asChild>\n <Form.Control asChild>\n <TextField\n ref={composedInputRef}\n autoComplete={index === 0 ? autoComplete : \"off\"}\n color={otpContext.state === \"invalid\" ? \"red\" : undefined}\n inputMode=\"numeric\"\n maxLength={1}\n pattern=\"\\d{1}\"\n readOnly={readOnly ?? otpContext.readOnly}\n size=\"3\"\n value={char}\n variant={otpContext.state === \"invalid\" ? \"soft\" : undefined}\n style={{\n ...style,\n height: \"auto\",\n \"--text-field-padding\": 0,\n textAlign: \"center\",\n }}\n onChange={(event) => {\n // Only update the value if it matches the input pattern (number only)\n if (event.target.validity.valid) {\n const char = event.target.value;\n const index = Number(event.target.dataset.index ?? -1);\n otpContext.onCharChange(char, index);\n if (char !== \"\") {\n focusSibling(event.currentTarget, { back: char === \"\" });\n }\n }\n }}\n onKeyDown={(event) => {\n if (event.key === \"ArrowLeft\") {\n focusSibling(event.currentTarget, { back: true });\n event.preventDefault();\n } else if (event.key === \"ArrowRight\") {\n focusSibling(event.currentTarget);\n event.preventDefault();\n } else if (event.key === \"Backspace\" && char === \"\") {\n focusSibling(event.currentTarget, { back: true });\n } else if (event.key === \"Enter\" && char !== \"\") {\n otpContext.onEnterPressed();\n }\n }}\n {...props}\n />\n </Form.Control>\n </Form.Field>\n );\n },\n);\n\nconst useOptContext = () => {\n const optContext = React.useContext(OtpContext);\n\n if (!optContext) {\n throw new Error(\n \"OtpInput compound components cannot be rendered outside the OtpRoot component\",\n );\n }\n\n return optContext;\n};\n\nfunction focusSibling(input: HTMLInputElement, { back = false } = {}) {\n const sibling = back\n ? input.parentElement?.previousSibling\n : input.parentElement?.nextSibling;\n const siblingInput = sibling?.firstChild;\n if (siblingInput && siblingInput instanceof HTMLInputElement) {\n siblingInput?.focus();\n siblingInput?.select();\n }\n}\n\nconst getValueAsArray = (value: string \| undefined, length: number) => {\n if (!value) {\n return undefined;\n }\n\n return createEmptyArray(length).map((_, index) => value?.[index] ?? \"\");\n};\n\nconst createEmptyArray = (length: number): string[] =>\n Array.from<string>({ length }).fill(\"\");\n"],"mappings":";AAwIQ,SAsBE,KAtBF;AAtIR,SAAS,aAAa,uBAAuB;AAC7C,SAAS,4BAA4B;AACrC,YAAY,UAAU;AACtB,SAAS,YAAY;AACrB,YAAY,WAAW;AACvB,SAAS,iBAAiB;AAY1B,MAAM,aAAa,MAAM,cAA0C,MAAS;AAarE,MAAM,OAAO,MAAM;AAAA,EACxB,SAASA,MACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,cACA;AACA,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAiB,CAAC;AAClE,UAAM,CAAC,kBAAkB,mBAAmB,IAC1C,MAAM,SAAkB,KAAK;AAC/B,UAAM,aAAa,MAAM,SAAS,MAAM,QAAQ;AAEhD,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C,MAAM,gBAAgB,WAAW,UAAU;AAAA,MAC3C,aAAa,gBAAgB,cAAc,UAAU,KAAK,CAAC;AAAA,MAC3D,UAAU,CAACC,WAAU,gBAAgBA,OAAM,KAAK,EAAE,CAAC;AAAA,IACrD,CAAC;AAED,UAAM,iBAAiB,MAAM,OAAyB,IAAI;AAC1D,UAAM,eAAe,MAAM,OAA2B,CAAC,CAAC;AAExD,UAAM,oBAAoB,MAAM;AAAA,MAC9B,CAAC,eAAe,UAAU;AACxB,YACE,cACA,SACA,MAAM,MAAM,CAAC,SAAS,SAAS,EAAE,MAChC,gBAAgB,gBAAgB,MAAM,aACvC;AACA,yBAAe,SAAS,MAAM,cAAc;AAAA,QAC9C;AAAA,MACF;AAAA,MACA,CAAC,OAAO,YAAY,eAAe,UAAU;AAAA,IAC/C;AAEA,UAAM,qBAAqB,MAAM;AAAA,MAC/B,MAAM,kBAAkB,IAAI;AAAA,MAC5B,CAAC,iBAAiB;AAAA,IACpB;AAEA,UAAM,iBAAiB,MAAM;AAAA,MAC3B,CAAC,UAA4B;AAC3B,YAAI,OAAO;AACT,gBAAM,QAAQ,QAAQ,GAAG,aAAa,QAAQ,MAAM;AACpD,uBAAa,QAAQ,KAAK,KAAK;AAAA,QACjC,OAAO;AACL,uBAAa,QAAQ,IAAI;AAAA,QAC3B;AAEA,YAAI,aAAa,QAAQ,WAAW,YAAY;AAC9C,8BAAoB,IAAI;AAAA,QAC1B;AAAA,MACF;AAAA,MACA,CAAC,UAAU;AAAA,IACb;AAEA,UAAM,mBAAmB,MAAM;AAAA,MAC7B,CAAC,MAAc,UAAkB;AAC/B,iBAAS,CAAC,kBAAkB;AAC1B,gBAAM,cAAc,iBAAiB,iBAAiB,UAAU;AAChE,gBAAM,WAAW,CAAC,GAAG,WAAW;AAChC,mBAAS,KAAK,IAAI;AAClB,iBAAO;AAAA,QACT,CAAC;AACD,yBAAiB,KAAK;AAAA,MACxB;AAAA,MACA,CAAC,YAAY,QAAQ;AAAA,IACvB;AAEA,UAAM,aAAa,MAAM;AAAA,MACvB,OAAO;AAAA,QACL,OAAO,SAAS,iBAAiB,UAAU;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,cAAc;AAAA,MAChB;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,UAAU,mBAAmB,CAAC,iBAAiB,CAAC;AAEtD,WACE,oBAAC,WAAW,UAAX,EAAoB,OAAO,YAC1B;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,UAAU,UAAU;AAAA,QAC5B,GAAG;AAAA,QACJ,SAAS,CAAC,UAAgD;AACxD,gBAAM,eAAe;AACrB,gBAAM,cAAc,MAAM,cAAc,QAAQ,MAAM;AACtD,gBAAM,iBAAiB,YACpB,QAAQ,UAAU,EAAE,EACpB,MAAM,GAAG,UAAU;AACtB,gBAAMA,SAAQ,eACX,OAAO,YAAY,GAAG,EACtB,MAAM,EAAE,EACR,IAAI,CAAC,SAAU,SAAS,MAAM,KAAK,IAAK;AAE3C,mBAASA,MAAK;AACd,2BAAiB,eAAe,SAAS,CAAC;AAE1C,gBAAM,QAAQ,KAAK,IAAI,eAAe,QAAQ,aAAa,CAAC;AAC5D,uBAAa,UAAU,KAAK,GAAG,MAAM;AAAA,QACvC;AAAA,QAEC;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,YAAY,cAAc,cAAc;AAAA,cAC7C,cAAc,OAAO,KAAK,EAAE;AAAA,cAC5B,WAAW;AAAA,cACX;AAAA,cACA,MAAK;AAAA;AAAA,UACP;AAAA;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAMO,MAAM,QAAQ,MAAM;AAAA,EACzB,SAASC,OACP,EAAE,OAAO,UAAU,eAAe,OAAO,GAAG,MAAM,GAClD,cACA;AACA,UAAM,aAAa,cAAc;AACjC,UAAM,WAAW,MAAM,OAAyB,IAAI;AACpD,UAAM,mBAAmB;AAAA,MACvB;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACb;AAIA,UAAM,QAAQ,OAAO,SAAS,SAAS,QAAQ,SAAS,EAAE;AAC1D,UAAM,OAAO,WAAW,MAAM,KAAK,KAAK;AAExC,WACE,oBAAC,KAAK,OAAL,EAAW,MAAM,OAAO,KAAK,IAAI,SAAO,MACvC,8BAAC,KAAK,SAAL,EAAa,SAAO,MACnB;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,cAAc,UAAU,IAAI,eAAe;AAAA,QAC3C,OAAO,WAAW,UAAU,YAAY,QAAQ;AAAA,QAChD,WAAU;AAAA,QACV,WAAW;AAAA,QACX,SAAQ;AAAA,QACR,UAAU,YAAY,WAAW;AAAA,QACjC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS,WAAW,UAAU,YAAY,SAAS;AAAA,QACnD,OAAO;AAAA,UACL,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,wBAAwB;AAAA,UACxB,WAAW;AAAA,QACb;AAAA,QACA,UAAU,CAAC,UAAU;AAEnB,cAAI,MAAM,OAAO,SAAS,OAAO;AAC/B,kBAAMC,QAAO,MAAM,OAAO;AAC1B,kBAAMC,SAAQ,OAAO,MAAM,OAAO,QAAQ,SAAS,EAAE;AACrD,uBAAW,aAAaD,OAAMC,MAAK;AACnC,gBAAID,UAAS,IAAI;AACf,2BAAa,MAAM,eAAe,EAAE,MAAMA,UAAS,GAAG,CAAC;AAAA,YACzD;AAAA,UACF;AAAA,QACF;AAAA,QACA,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,aAAa;AAC7B,yBAAa,MAAM,eAAe,EAAE,MAAM,KAAK,CAAC;AAChD,kBAAM,eAAe;AAAA,UACvB,WAAW,MAAM,QAAQ,cAAc;AACrC,yBAAa,MAAM,aAAa;AAChC,kBAAM,eAAe;AAAA,UACvB,WAAW,MAAM,QAAQ,eAAe,SAAS,IAAI;AACnD,yBAAa,MAAM,eAAe,EAAE,MAAM,KAAK,CAAC;AAAA,UAClD,WAAW,MAAM,QAAQ,WAAW,SAAS,IAAI;AAC/C,uBAAW,eAAe;AAAA,UAC5B;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN,GACF,GACF;AAAA,EAEJ;AACF;AAEA,MAAM,gBAAgB,MAAM;AAC1B,QAAM,aAAa,MAAM,WAAW,UAAU;AAE9C,MAAI,CAAC,YAAY;AACf,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAEA,SAAS,aAAa,OAAyB,EAAE,OAAO,MAAM,IAAI,CAAC,GAAG;AACpE,QAAM,UAAU,OACZ,MAAM,eAAe,kBACrB,MAAM,eAAe;AACzB,QAAM,eAAe,SAAS;AAC9B,MAAI,gBAAgB,wBAAwB,kBAAkB;AAC5D,kBAAc,MAAM;AACpB,kBAAc,OAAO;AAAA,EACvB;AACF;AAEA,MAAM,kBAAkB,CAAC,OAA2B,WAAmB;AACrE,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,SAAO,iBAAiB,MAAM,EAAE,IAAI,CAAC,GAAG,UAAU,QAAQ,KAAK,KAAK,EAAE;AACxE;AAEA,MAAM,mBAAmB,CAAC,WACxB,MAAM,KAAa,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE;","names":["Root","value","Input","char","index"]}
1	+ {"version":3,"sources":["../../../src/lib/otp-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n composeRefs,\n useComposedRefs,\n useControllableState,\n} from \"radix-ui/internal\";\nimport { Form } from \"radix-ui\";\nimport { Grid } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { TextField } from \"./elements.js\";\n\ninterface OptContextType {\n value: string[];\n readOnly?: boolean;\n state?: \"valid\" \| \"invalid\";\n onEnterPressed: () => void;\n onChildAdd: (input: HTMLInputElement) => void;\n onCharChange: (char: string, index: number) => void;\n allChildrenAdded: boolean;\n}\n\nconst OtpContext = React.createContext<OptContextType \| undefined>(undefined);\n\ntype OtpRootProps = React.ComponentPropsWithoutRef<typeof Grid> & {\n onValueChange?: (value: string) => void;\n id?: string;\n name?: string;\n readOnly?: boolean;\n state?: \"valid\" \| \"invalid\";\n value?: string;\n defaultValue?: string;\n autoSubmit?: boolean;\n};\n\nexport const Root = React.forwardRef<HTMLInputElement, OtpRootProps>(\n function Root(\n {\n name,\n id,\n defaultValue,\n value: valueProp,\n onValueChange,\n autoSubmit,\n children,\n readOnly,\n state,\n ...gridProps\n },\n forwardedRef,\n ) {\n const [lastCharIndex, setLastCharIndex] = React.useState<number>(0);\n const [allChildrenAdded, setAllChildrenAdded] =\n React.useState<boolean>(false);\n const childCount = React.Children.count(children);\n\n const [value, setValue] = useControllableState({\n prop: getValueAsArray(valueProp, childCount),\n defaultProp: getValueAsArray(defaultValue, childCount) ?? [],\n onChange: (value) => onValueChange?.(value.join(\"\")),\n });\n\n const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n const childrenRefs = React.useRef<HTMLInputElement[]>([]);\n\n const attemptAutoSubmit = React.useCallback(\n (enterPressed = false) => {\n if (\n autoSubmit &&\n value &&\n value.every((char) => char !== \"\") &&\n (enterPressed \|\| lastCharIndex + 1 === childCount)\n ) {\n hiddenInputRef.current?.form?.requestSubmit();\n }\n },\n [value, childCount, lastCharIndex, autoSubmit],\n );\n\n const handleEnterPressed = React.useCallback(\n () => attemptAutoSubmit(true),\n [attemptAutoSubmit],\n );\n\n const handleChildAdd = React.useCallback(\n (input: HTMLInputElement) => {\n if (input) {\n input.dataset.index = `${childrenRefs.current.length}`;\n childrenRefs.current.push(input);\n } else {\n childrenRefs.current.pop();\n }\n\n if (childrenRefs.current.length === childCount) {\n setAllChildrenAdded(true);\n }\n },\n [childCount],\n );\n\n const handleCharChange = React.useCallback(\n (char: string, index: number) => {\n setValue((previousValue) => {\n const arrayToCopy = previousValue ?? createEmptyArray(childCount);\n const newValue = [...arrayToCopy];\n newValue[index] = char;\n return newValue;\n });\n setLastCharIndex(index);\n },\n [childCount, setValue],\n );\n\n const otpContext = React.useMemo(\n () => ({\n value: value ?? createEmptyArray(childCount),\n readOnly,\n state,\n allChildrenAdded,\n onEnterPressed: handleEnterPressed,\n onChildAdd: handleChildAdd,\n onCharChange: handleCharChange,\n }),\n [\n value,\n allChildrenAdded,\n readOnly,\n state,\n childCount,\n handleEnterPressed,\n handleChildAdd,\n handleCharChange,\n ],\n );\n\n React.useEffect(attemptAutoSubmit, [attemptAutoSubmit]);\n\n return (\n <OtpContext.Provider value={otpContext}>\n <Grid\n columns={`repeat(${childCount}, 1fr)`}\n {...gridProps}\n onPaste={(event: React.ClipboardEvent<HTMLDivElement>) => {\n event.preventDefault();\n const pastedValue = event.clipboardData.getData(\"Text\");\n const sanitizedValue = pastedValue\n .replace(/[^\\d]/g, \"\")\n .slice(0, childCount);\n const value = sanitizedValue\n .padEnd(childCount, \"#\")\n .split(\"\")\n .map((char) => (char === \"#\" ? \"\" : char));\n\n setValue(value);\n setLastCharIndex(sanitizedValue.length - 1);\n\n const index = Math.min(sanitizedValue.length, childCount - 1);\n childrenRefs.current?.[index]?.focus();\n }}\n >\n {children}\n <input\n ref={composeRefs(forwardedRef, hiddenInputRef)}\n defaultValue={value?.join(\"\")}\n minLength={childCount}\n name={name}\n type=\"hidden\"\n />\n </Grid>\n </OtpContext.Provider>\n );\n },\n);\n\ninterface InputProps extends React.ComponentProps<typeof TextField> {\n autoComplete?: \"one-time-code\" \| \"off\";\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n function Input(\n { style, readOnly, autoComplete = \"off\", ...props },\n forwardedRef,\n ) {\n const otpContext = useOptContext();\n const inputRef = React.useRef<HTMLInputElement>(null);\n const composedInputRef = useComposedRefs(\n forwardedRef,\n inputRef,\n otpContext.onChildAdd,\n );\n\n // FIXME: This should be refactored\n // eslint-disable-next-line react-hooks/refs\n const index = Number(inputRef.current?.dataset.index ?? -1);\n const char = otpContext.value[index] ?? \"\";\n\n return (\n <Form.Field name={`otp-${index}`} asChild>\n <Form.Control asChild>\n <TextField\n ref={composedInputRef}\n autoComplete={index === 0 ? autoComplete : \"off\"}\n color={otpContext.state === \"invalid\" ? \"red\" : undefined}\n inputMode=\"numeric\"\n maxLength={1}\n pattern=\"\\d{1}\"\n readOnly={readOnly ?? otpContext.readOnly}\n size=\"3\"\n value={char}\n variant={otpContext.state === \"invalid\" ? \"soft\" : undefined}\n style={{\n ...style,\n height: \"auto\",\n \"--text-field-padding\": 0,\n textAlign: \"center\",\n }}\n onChange={(event) => {\n // Only update the value if it matches the input pattern (number only)\n if (event.target.validity.valid) {\n const char = event.target.value;\n const index = Number(event.target.dataset.index ?? -1);\n otpContext.onCharChange(char, index);\n if (char !== \"\") {\n focusSibling(event.currentTarget, { back: char === \"\" });\n }\n }\n }}\n onKeyDown={(event) => {\n if (event.key === \"ArrowLeft\") {\n focusSibling(event.currentTarget, { back: true });\n event.preventDefault();\n } else if (event.key === \"ArrowRight\") {\n focusSibling(event.currentTarget);\n event.preventDefault();\n } else if (event.key === \"Backspace\" && char === \"\") {\n focusSibling(event.currentTarget, { back: true });\n } else if (event.key === \"Enter\" && char !== \"\") {\n otpContext.onEnterPressed();\n }\n }}\n {...props}\n />\n </Form.Control>\n </Form.Field>\n );\n },\n);\n\nconst useOptContext = () => {\n const optContext = React.useContext(OtpContext);\n\n if (!optContext) {\n throw new Error(\n \"OtpInput compound components cannot be rendered outside the OtpRoot component\",\n );\n }\n\n return optContext;\n};\n\nfunction focusSibling(input: HTMLInputElement, { back = false } = {}) {\n const sibling = back\n ? input.parentElement?.previousSibling\n : input.parentElement?.nextSibling;\n const siblingInput = sibling?.firstChild;\n if (siblingInput && siblingInput instanceof HTMLInputElement) {\n siblingInput?.focus();\n siblingInput?.select();\n }\n}\n\nconst getValueAsArray = (value: string \| undefined, length: number) => {\n if (!value) {\n return undefined;\n }\n\n return createEmptyArray(length).map((_, index) => value?.[index] ?? \"\");\n};\n\nconst createEmptyArray = (length: number): string[] =>\n Array.from<string>({ length }).fill(\"\");\n"],"mappings":"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","names":["Root","value","Input","char","index"]}

package/dist/esm/lib/set-password-dialog.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Callout, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
 import * as React from "react";
 import { Dialog, Label, PasswordField, Button } from "./elements.js";
-import * as Form from "@radix-ui/react-form";
+import { Form } from "radix-ui";
 import { useCreatePassword } from "../api/endpoint.js";
 import { useSecuritySettings } from "./use-security-settings.js";
 import { ElevatedAccess } from "./elevated-access.js";

package/dist/esm/lib/set-password-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/lib/set-password-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport { Dialog, Label, PasswordField, Button } from \"./elements.js\";\nimport * as Form from \"@radix-ui/react-form\";\nimport { useCreatePassword } from \"../api/endpoint.js\";\nimport { useSecuritySettings } from \"./use-security-settings.js\";\nimport { ElevatedAccess } from \"./elevated-access.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { useDialogClose } from \"./use-dialog-close.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface SetPasswordDialogProps extends Dialog.RootProps {\n children?: ReactNode;\n}\n\nexport function SetPasswordDialog({\n children,\n ...props\n}: SetPasswordDialogProps) {\n const [open, setOpen] = React.useState(false);\n\n const handleClose = React.useCallback(() => {\n setOpen(false);\n }, []);\n\n return (\n <Dialog.Root {...props} open={open} onOpenChange={setOpen}>\n <Dialog.Trigger>{children}</Dialog.Trigger>\n\n <Dialog.Content maxWidth=\"480px\">\n <ElevatedAccess>\n <Content onClose={handleClose} />\n </ElevatedAccess>\n </Dialog.Content>\n </Dialog.Root>\n );\n}\n\ninterface ContentProps {\n onClose: () => void;\n}\n\nfunction Content({ onClose }: ContentProps) {\n const translate = useTranslation();\n const setPassword = useCreatePassword();\n const securitySettings = useSecuritySettings();\n const [disableSubmit, setDisableSubmit] = React.useState(true);\n\n const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n\n const formData = new FormData(event.currentTarget);\n const password = formData.get(\"password\")?.toString();\n\n if (!password) {\n return;\n }\n\n setPassword.mutate({ data: { password } });\n };\n\n useDialogClose(setPassword.isSuccess, () => {\n securitySettings.update(\"Password\", true);\n });\n\n return (\n <>\n <Dialog.Title mb=\"5\">\n <Translation\n defaultMessage=\"Set New Password\"\n id=\"4ymFUc\"\n description=\"Dialog title for setting a new password\"\n />\n </Dialog.Title>\n <VisuallyHidden>\n <Dialog.Description>\n <Translation\n defaultMessage=\"Set a new password for your account\"\n id=\"KYv5vS\"\n description=\"Screen reader description for set password dialog\"\n />\n </Dialog.Description>\n </VisuallyHidden>\n\n {setPassword.error ? (\n <Callout.Root color=\"red\" my=\"-2\">\n <Callout.Text>\n {getMutationErrorMessage(setPassword.error)}\n </Callout.Text>\n </Callout.Root>\n ) : null}\n\n <Form.Root\n onSubmit={handleSubmit}\n onChange={(event) => {\n const formData = new FormData(event.currentTarget);\n const password = formData.get(\"password\")?.toString();\n const confirmPassword = formData.get(\"confirmPassword\")?.toString();\n setDisableSubmit(password === \"\" \|\| confirmPassword === \"\");\n }}\n >\n <Flex mt=\"5\" direction=\"column\" gap=\"4\">\n <Form.Field name=\"password\" asChild>\n <Flex direction=\"column\" gap=\"2\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Enter a new password\"\n id=\"OHDxyL\"\n description=\"Label for password input field\"\n />\n </Label>\n </Form.Label>\n <Form.Control asChild>\n <PasswordField\n autoFocus\n required\n autoComplete=\"new-password\"\n placeholder={translate({\n defaultMessage: \"New password\",\n id: \"ABfT4E\",\n description: \"Placeholder for password input\",\n })}\n disabled={setPassword.isPending \|\| setPassword.isSuccess}\n />\n </Form.Control>\n <Form.Message match=\"valueMissing\" asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Please enter a new password\"\n id=\"+2kQs5\"\n description=\"Error message when password field is empty\"\n />\n </Text>\n </Form.Message>\n <Form.Message match={(value) => value.length < 8} asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Password must be at least 8 characters\"\n id=\"WRjyrh\"\n description=\"Error message when password is too short\"\n />\n </Text>\n </Form.Message>\n </Flex>\n </Form.Field>\n\n <Form.Field name=\"confirmPassword\" asChild>\n <Flex direction=\"column\" gap=\"2\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Confirm your new password\"\n id=\"K83lBn\"\n description=\"Label for password confirmation field\"\n />\n </Label>\n </Form.Label>\n <Form.Control asChild>\n <PasswordField\n required\n autoComplete=\"new-password\"\n placeholder={translate({\n defaultMessage: \"Confirm new password\",\n id: \"O79vjp\",\n description: \"Placeholder for password confirmation input\",\n })}\n disabled={setPassword.isPending \|\| setPassword.isSuccess}\n />\n </Form.Control>\n <Form.Message match=\"valueMissing\" asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Please confirm your new password\"\n id=\"vfwqWf\"\n description=\"Error message when password confirmation is empty\"\n />\n </Text>\n </Form.Message>\n <Form.Message\n match={(value, formData) => value !== formData.get(\"password\")}\n asChild\n >\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"The passwords you entered don't match.\"\n id=\"ayYwQx\"\n description=\"Error message when passwords don't match\"\n />\n </Text>\n </Form.Message>\n </Flex>\n </Form.Field>\n </Flex>\n\n <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n <Dialog.Close>\n <Button\n variant=\"secondary\"\n disabled={setPassword.isPending \|\| setPassword.isSuccess}\n >\n <Translation\n defaultMessage=\"Cancel\"\n id=\"VJVs4m\"\n description=\"Button to cancel setting password\"\n />\n </Button>\n </Dialog.Close>\n\n <SaveButton\n loading={setPassword.isPending}\n done={setPassword.isSuccess}\n onDone={onClose}\n type=\"submit\"\n disabled={disableSubmit \|\| undefined}\n >\n <Translation\n defaultMessage=\"Set password\"\n id=\"jSfqX/\"\n description=\"Button to confirm setting new password\"\n />\n </SaveButton>\n </Flex>\n\n {/* mirror errors in a live region */}\n <VisuallyHidden asChild>\n <section aria-live=\"polite\">\n {getMutationErrorMessage(setPassword.error)}\n </section>\n </VisuallyHidden>\n </Form.Root>\n </>\n );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n if (error instanceof Error) {\n return error.message;\n }\n\n if (\n typeof error === \"object\" &&\n error !== null &&\n \"message\" in error &&\n typeof error.message === \"string\"\n ) {\n return error.message;\n }\n\n return (\n <Translation\n defaultMessage=\"Something went wrong. Please try again.\"\n id=\"jLzoYu\"\n description=\"Generic error message for password setting failure\"\n />\n );\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/lib/set-password-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport { Dialog, Label, PasswordField, Button } from \"./elements.js\";\nimport { Form } from \"radix-ui\";\nimport { useCreatePassword } from \"../api/endpoint.js\";\nimport { useSecuritySettings } from \"./use-security-settings.js\";\nimport { ElevatedAccess } from \"./elevated-access.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { useDialogClose } from \"./use-dialog-close.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface SetPasswordDialogProps extends Dialog.RootProps {\n children?: ReactNode;\n}\n\nexport function SetPasswordDialog({\n children,\n ...props\n}: SetPasswordDialogProps) {\n const [open, setOpen] = React.useState(false);\n\n const handleClose = React.useCallback(() => {\n setOpen(false);\n }, []);\n\n return (\n <Dialog.Root {...props} open={open} onOpenChange={setOpen}>\n <Dialog.Trigger>{children}</Dialog.Trigger>\n\n <Dialog.Content maxWidth=\"480px\">\n <ElevatedAccess>\n <Content onClose={handleClose} />\n </ElevatedAccess>\n </Dialog.Content>\n </Dialog.Root>\n );\n}\n\ninterface ContentProps {\n onClose: () => void;\n}\n\nfunction Content({ onClose }: ContentProps) {\n const translate = useTranslation();\n const setPassword = useCreatePassword();\n const securitySettings = useSecuritySettings();\n const [disableSubmit, setDisableSubmit] = React.useState(true);\n\n const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n\n const formData = new FormData(event.currentTarget);\n const password = formData.get(\"password\")?.toString();\n\n if (!password) {\n return;\n }\n\n setPassword.mutate({ data: { password } });\n };\n\n useDialogClose(setPassword.isSuccess, () => {\n securitySettings.update(\"Password\", true);\n });\n\n return (\n <>\n <Dialog.Title mb=\"5\">\n <Translation\n defaultMessage=\"Set New Password\"\n id=\"4ymFUc\"\n description=\"Dialog title for setting a new password\"\n />\n </Dialog.Title>\n <VisuallyHidden>\n <Dialog.Description>\n <Translation\n defaultMessage=\"Set a new password for your account\"\n id=\"KYv5vS\"\n description=\"Screen reader description for set password dialog\"\n />\n </Dialog.Description>\n </VisuallyHidden>\n\n {setPassword.error ? (\n <Callout.Root color=\"red\" my=\"-2\">\n <Callout.Text>\n {getMutationErrorMessage(setPassword.error)}\n </Callout.Text>\n </Callout.Root>\n ) : null}\n\n <Form.Root\n onSubmit={handleSubmit}\n onChange={(event) => {\n const formData = new FormData(event.currentTarget);\n const password = formData.get(\"password\")?.toString();\n const confirmPassword = formData.get(\"confirmPassword\")?.toString();\n setDisableSubmit(password === \"\" \|\| confirmPassword === \"\");\n }}\n >\n <Flex mt=\"5\" direction=\"column\" gap=\"4\">\n <Form.Field name=\"password\" asChild>\n <Flex direction=\"column\" gap=\"2\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Enter a new password\"\n id=\"OHDxyL\"\n description=\"Label for password input field\"\n />\n </Label>\n </Form.Label>\n <Form.Control asChild>\n <PasswordField\n autoFocus\n required\n autoComplete=\"new-password\"\n placeholder={translate({\n defaultMessage: \"New password\",\n id: \"ABfT4E\",\n description: \"Placeholder for password input\",\n })}\n disabled={setPassword.isPending \|\| setPassword.isSuccess}\n />\n </Form.Control>\n <Form.Message match=\"valueMissing\" asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Please enter a new password\"\n id=\"+2kQs5\"\n description=\"Error message when password field is empty\"\n />\n </Text>\n </Form.Message>\n <Form.Message match={(value) => value.length < 8} asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Password must be at least 8 characters\"\n id=\"WRjyrh\"\n description=\"Error message when password is too short\"\n />\n </Text>\n </Form.Message>\n </Flex>\n </Form.Field>\n\n <Form.Field name=\"confirmPassword\" asChild>\n <Flex direction=\"column\" gap=\"2\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Confirm your new password\"\n id=\"K83lBn\"\n description=\"Label for password confirmation field\"\n />\n </Label>\n </Form.Label>\n <Form.Control asChild>\n <PasswordField\n required\n autoComplete=\"new-password\"\n placeholder={translate({\n defaultMessage: \"Confirm new password\",\n id: \"O79vjp\",\n description: \"Placeholder for password confirmation input\",\n })}\n disabled={setPassword.isPending \|\| setPassword.isSuccess}\n />\n </Form.Control>\n <Form.Message match=\"valueMissing\" asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Please confirm your new password\"\n id=\"vfwqWf\"\n description=\"Error message when password confirmation is empty\"\n />\n </Text>\n </Form.Message>\n <Form.Message\n match={(value, formData) => value !== formData.get(\"password\")}\n asChild\n >\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"The passwords you entered don't match.\"\n id=\"ayYwQx\"\n description=\"Error message when passwords don't match\"\n />\n </Text>\n </Form.Message>\n </Flex>\n </Form.Field>\n </Flex>\n\n <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n <Dialog.Close>\n <Button\n variant=\"secondary\"\n disabled={setPassword.isPending \|\| setPassword.isSuccess}\n >\n <Translation\n defaultMessage=\"Cancel\"\n id=\"VJVs4m\"\n description=\"Button to cancel setting password\"\n />\n </Button>\n </Dialog.Close>\n\n <SaveButton\n loading={setPassword.isPending}\n done={setPassword.isSuccess}\n onDone={onClose}\n type=\"submit\"\n disabled={disableSubmit \|\| undefined}\n >\n <Translation\n defaultMessage=\"Set password\"\n id=\"jSfqX/\"\n description=\"Button to confirm setting new password\"\n />\n </SaveButton>\n </Flex>\n\n {/* mirror errors in a live region */}\n <VisuallyHidden asChild>\n <section aria-live=\"polite\">\n {getMutationErrorMessage(setPassword.error)}\n </section>\n </VisuallyHidden>\n </Form.Root>\n </>\n );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n if (error instanceof Error) {\n return error.message;\n }\n\n if (\n typeof error === \"object\" &&\n error !== null &&\n \"message\" in error &&\n typeof error.message === \"string\"\n ) {\n return error.message;\n }\n\n return (\n <Translation\n defaultMessage=\"Something went wrong. Please try again.\"\n id=\"jLzoYu\"\n description=\"Generic error message for password setting failure\"\n />\n );\n}\n"],"mappings":";AA8BI,SAwCA,UAvCE,KADF;AA5BJ,SAAS,SAAS,MAAM,MAAM,sBAAsB;AACpD,YAAY,WAAW;AAEvB,SAAS,QAAQ,OAAO,eAAe,cAAc;AACrD,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAMxB,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAE5C,QAAM,cAAc,MAAM,YAAY,MAAM;AAC1C,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,CAAC;AAEL,SACE,qBAAC,OAAO,MAAP,EAAa,GAAG,OAAO,MAAY,cAAc,SAChD;AAAA,wBAAC,OAAO,SAAP,EAAgB,UAAS;AAAA,IAE1B,oBAAC,OAAO,SAAP,EAAe,UAAS,SACvB,8BAAC,kBACC,8BAAC,WAAQ,SAAS,aAAa,GACjC,GACF;AAAA,KACF;AAEJ;AAMA,SAAS,QAAQ,EAAE,QAAQ,GAAiB;AAC1C,QAAM,YAAY,eAAe;AACjC,QAAM,cAAc,kBAAkB;AACtC,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,IAAI;AAE7D,QAAM,eAAe,OAAO,UAA4C;AACtE,UAAM,eAAe;AAErB,UAAM,WAAW,IAAI,SAAS,MAAM,aAAa;AACjD,UAAM,WAAW,SAAS,IAAI,UAAU,GAAG,SAAS;AAEpD,QAAI,CAAC,UAAU;AACb;AAAA,IACF;AAEA,gBAAY,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;AAAA,EAC3C;AAEA,iBAAe,YAAY,WAAW,MAAM;AAC1C,qBAAiB,OAAO,YAAY,IAAI;AAAA,EAC1C,CAAC;AAED,SACE,iCACE;AAAA,wBAAC,OAAO,OAAP,EAAa,IAAG,KACf;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,IAAG;AAAA,QACH,aAAY;AAAA;AAAA,IACd,GACF;AAAA,IACA,oBAAC,kBACC,8BAAC,OAAO,aAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,IAAG;AAAA,QACH,aAAY;AAAA;AAAA,IACd,GACF,GACF;AAAA,IAEC,YAAY,QACX,oBAAC,QAAQ,MAAR,EAAa,OAAM,OAAM,IAAG,MAC3B,8BAAC,QAAQ,MAAR,EACE,kCAAwB,YAAY,KAAK,GAC5C,GACF,IACE;AAAA,IAEJ;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,UAAU;AAAA,QACV,UAAU,CAAC,UAAU;AACnB,gBAAM,WAAW,IAAI,SAAS,MAAM,aAAa;AACjD,gBAAM,WAAW,SAAS,IAAI,UAAU,GAAG,SAAS;AACpD,gBAAM,kBAAkB,SAAS,IAAI,iBAAiB,GAAG,SAAS;AAClE,2BAAiB,aAAa,MAAM,oBAAoB,EAAE;AAAA,QAC5D;AAAA,QAEA;AAAA,+BAAC,QAAK,IAAG,KAAI,WAAU,UAAS,KAAI,KAClC;AAAA,gCAAC,KAAK,OAAL,EAAW,MAAK,YAAW,SAAO,MACjC,+BAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,kCAAC,KAAK,OAAL,EAAW,SAAO,MACjB,8BAAC,SACC;AAAA,gBAAC;AAAA;AAAA,kBACC,gBAAe;AAAA,kBACf,IAAG;AAAA,kBACH,aAAY;AAAA;AAAA,cACd,GACF,GACF;AAAA,cACA,oBAAC,KAAK,SAAL,EAAa,SAAO,MACnB;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAS;AAAA,kBACT,UAAQ;AAAA,kBACR,cAAa;AAAA,kBACb,aAAa,UAAU;AAAA,oBACrB,gBAAgB;AAAA,oBAChB,IAAI;AAAA,oBACJ,aAAa;AAAA,kBACf,CAAC;AAAA,kBACD,UAAU,YAAY,aAAa,YAAY;AAAA;AAAA,cACjD,GACF;AAAA,cACA,oBAAC,KAAK,SAAL,EAAa,OAAM,gBAAe,SAAO,MACxC,8BAAC,QAAK,MAAK,KAAI,OAAM,OACnB;AAAA,gBAAC;AAAA;AAAA,kBACC,gBAAe;AAAA,kBACf,IAAG;AAAA,kBACH,aAAY;AAAA;AAAA,cACd,GACF,GACF;AAAA,cACA,oBAAC,KAAK,SAAL,EAAa,OAAO,CAAC,UAAU,MAAM,SAAS,GAAG,SAAO,MACvD,8BAAC,QAAK,MAAK,KAAI,OAAM,OACnB;AAAA,gBAAC;AAAA;AAAA,kBACC,gBAAe;AAAA,kBACf,IAAG;AAAA,kBACH,aAAY;AAAA;AAAA,cACd,GACF,GACF;AAAA,eACF,GACF;AAAA,YAEA,oBAAC,KAAK,OAAL,EAAW,MAAK,mBAAkB,SAAO,MACxC,+BAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,kCAAC,KAAK,OAAL,EAAW,SAAO,MACjB,8BAAC,SACC;AAAA,gBAAC;AAAA;AAAA,kBACC,gBAAe;AAAA,kBACf,IAAG;AAAA,kBACH,aAAY;AAAA;AAAA,cACd,GACF,GACF;AAAA,cACA,oBAAC,KAAK,SAAL,EAAa,SAAO,MACnB;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAQ;AAAA,kBACR,cAAa;AAAA,kBACb,aAAa,UAAU;AAAA,oBACrB,gBAAgB;AAAA,oBAChB,IAAI;AAAA,oBACJ,aAAa;AAAA,kBACf,CAAC;AAAA,kBACD,UAAU,YAAY,aAAa,YAAY;AAAA;AAAA,cACjD,GACF;AAAA,cACA,oBAAC,KAAK,SAAL,EAAa,OAAM,gBAAe,SAAO,MACxC,8BAAC,QAAK,MAAK,KAAI,OAAM,OACnB;AAAA,gBAAC;AAAA;AAAA,kBACC,gBAAe;AAAA,kBACf,IAAG;AAAA,kBACH,aAAY;AAAA;AAAA,cACd,GACF,GACF;AAAA,cACA;AAAA,gBAAC,KAAK;AAAA,gBAAL;AAAA,kBACC,OAAO,CAAC,OAAO,aAAa,UAAU,SAAS,IAAI,UAAU;AAAA,kBAC7D,SAAO;AAAA,kBAEP,8BAAC,QAAK,MAAK,KAAI,OAAM,OACnB;AAAA,oBAAC;AAAA;AAAA,sBACC,gBAAe;AAAA,sBACf,IAAG;AAAA,sBACH,aAAY;AAAA;AAAA,kBACd,GACF;AAAA;AAAA,cACF;AAAA,eACF,GACF;AAAA,aACF;AAAA,UAEA,qBAAC,QAAK,IAAG,KAAI,KAAI,KAAI,SAAQ,OAC3B;AAAA,gCAAC,OAAO,OAAP,EACC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,UAAU,YAAY,aAAa,YAAY;AAAA,gBAE/C;AAAA,kBAAC;AAAA;AAAA,oBACC,gBAAe;AAAA,oBACf,IAAG;AAAA,oBACH,aAAY;AAAA;AAAA,gBACd;AAAA;AAAA,YACF,GACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,YAAY;AAAA,gBACrB,MAAM,YAAY;AAAA,gBAClB,QAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,UAAU,iBAAiB;AAAA,gBAE3B;AAAA,kBAAC;AAAA;AAAA,oBACC,gBAAe;AAAA,oBACf,IAAG;AAAA,oBACH,aAAY;AAAA;AAAA,gBACd;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UAGA,oBAAC,kBAAe,SAAO,MACrB,8BAAC,aAAQ,aAAU,UAChB,kCAAwB,YAAY,KAAK,GAC5C,GACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,SAAS,wBAAwB,OAAgB;AAC/C,MAAI,iBAAiB,OAAO;AAC1B,WAAO,MAAM;AAAA,EACf;AAEA,MACE,OAAO,UAAU,YACjB,UAAU,QACV,aAAa,SACb,OAAO,MAAM,YAAY,UACzB;AACA,WAAO,MAAM;AAAA,EACf;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,IAAG;AAAA,MACH,aAAY;AAAA;AAAA,EACd;AAEJ;","names":[]}

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useComposedRefs } from "radix-ui/internal";
 import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import cx from "clsx";
 import * as React from "react";

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\";\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":[]}
1	+ {"version":3,"sources":["../../../src/lib/users-search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComposedRefs } from \"radix-ui/internal\";\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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@workos-inc/widgets",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -62,17 +62,14 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@radix-ui/react-compose-refs": "^1.0.0",
-    "@radix-ui/react-form": "^0.1.2",
-    "@radix-ui/react-icons": "^1.3.1",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-use-controllable-state": "^1.1.0",
+    "@radix-ui/react-icons": "^1.3.2",
     "bowser": "2.12.1",
     "clsx": "^2.0.0",
+    "radix-ui": "^1.4.3",
     "use-debounce": "^10.0.4"
   },
   "peerDependencies": {
-    "@radix-ui/themes": "^3.1.0",
+    "@radix-ui/themes": "^3.3.0",
     "@tanstack/react-query": "^5.0.0",
     "react": ">=18",
     "react-dom": ">=18",
@@ -80,12 +77,7 @@
   },
   "devDependencies": {
     "@formatjs/cli": "^6.12.0",
-    "@radix-ui/react-compose-refs": "^1.1.2",
-    "@radix-ui/react-form": "^0.1.8",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "@radix-ui/themes": "^3.2.1",
     "@tanstack/react-query": "^5.90.20",
     "@types/node": "^24",
     "@types/react": "^19.2.10",
@@ -95,6 +87,7 @@
     "execa": "^9.6.1",
     "fast-glob": "^3.3.3",
     "orval": "^7.21.0",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "swr": "^2.4.0",

package/dist/cjs/experimental/api/model/active-session-current-location.cjs DELETED Viewed

@@ -1,17 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var active_session_current_location_exports = {};
-module.exports = __toCommonJS(active_session_current_location_exports);
-//# sourceMappingURL=active-session-current-location.cjs.map

package/dist/cjs/experimental/api/model/active-session-current-location.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../../../../src/experimental/api/model/active-session-current-location.ts"],"sourcesContent":["/**\n * Generated by orval v7.21.0 🍺\n * Do not edit manually.\n * WorkOS Widgets\n * WorkOS Widgets API\n * OpenAPI spec version: 1.0\n */\n\n/**\n * @nullable\n */\nexport type ActiveSessionCurrentLocation = {\n cityName: string;\n countryISOCode: string;\n} | null;\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/cjs/experimental/api/model/active-session-current-location.d.cts DELETED Viewed

@@ -1,16 +0,0 @@
-/**
- * Generated by orval v7.21.0 🍺
- * Do not edit manually.
- * WorkOS Widgets
- * WorkOS Widgets API
- * OpenAPI spec version: 1.0
- */
-/**
- * @nullable
- */
-type ActiveSessionCurrentLocation = {
-    cityName: string;
-    countryISOCode: string;
-} | null;
-export type { ActiveSessionCurrentLocation };

package/dist/cjs/experimental/api/model/active-session-state.cjs DELETED Viewed

@@ -1,17 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var active_session_state_exports = {};
-module.exports = __toCommonJS(active_session_state_exports);
-//# sourceMappingURL=active-session-state.cjs.map

package/dist/cjs/experimental/api/model/active-session-state.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../../../../src/experimental/api/model/active-session-state.ts"],"sourcesContent":["/**\n * Generated by orval v7.21.0 🍺\n * Do not edit manually.\n * WorkOS Widgets\n * WorkOS Widgets API\n * OpenAPI spec version: 1.0\n */\n\nexport type ActiveSessionState = {\n tag: string;\n /** @nullable */\n expiresAt?: string | null;\n};\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/cjs/experimental/api/model/active-session-state.d.cts DELETED Viewed

@@ -1,14 +0,0 @@
-/**
- * Generated by orval v7.21.0 🍺
- * Do not edit manually.
- * WorkOS Widgets
- * WorkOS Widgets API
- * OpenAPI spec version: 1.0
- */
-type ActiveSessionState = {
-    tag: string;
-    /** @nullable */
-    expiresAt?: string | null;
-};
-export type { ActiveSessionState };

package/dist/cjs/experimental/api/model/active-session.cjs DELETED Viewed

@@ -1,17 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var active_session_exports = {};
-module.exports = __toCommonJS(active_session_exports);
-//# sourceMappingURL=active-session.cjs.map

package/dist/cjs/experimental/api/model/active-session.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../../../../src/experimental/api/model/active-session.ts"],"sourcesContent":["/**\n * Generated by orval v7.21.0 🍺\n * Do not edit manually.\n * WorkOS Widgets\n * WorkOS Widgets API\n * OpenAPI spec version: 1.0\n */\nimport type { ActiveSessionState } from \"./active-session-state.js\";\nimport type { ActiveSessionCurrentLocation } from \"./active-session-current-location.js\";\n\nexport interface ActiveSession {\n id: string;\n userlandUserId: string;\n /** @nullable */\n ipAddress?: string | null;\n /** @nullable */\n userAgent?: string | null;\n /** @nullable */\n organizationId?: string | null;\n state: ActiveSessionState;\n /** @nullable */\n currentLocation?: ActiveSessionCurrentLocation;\n usedSsoAuth: boolean;\n usedPasswordAuth: boolean;\n usedPasskeyAuth: boolean;\n usedAppleOauth: boolean;\n usedBitbucketOauth: boolean;\n usedGithubOauth: boolean;\n usedGitLabOauth: boolean;\n usedGoogleOauth: boolean;\n usedLinkedInOauth: boolean;\n usedImpersonation: boolean;\n usedMicrosoftOauth: boolean;\n usedSlackOauth: boolean;\n usedXeroOauth: boolean;\n usedMagicAuth: boolean;\n /** @nullable */\n impersonatorUserId?: string | null;\n /** @nullable */\n impersonatorEmail?: string | null;\n /** @nullable */\n impersonationReason?: string | null;\n /** @nullable */\n lastActivityAt?: string | null;\n createdAt: string;\n updatedAt: string;\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/cjs/experimental/api/model/active-session.d.cts DELETED Viewed

@@ -1,50 +0,0 @@
-import { ActiveSessionState } from './active-session-state.cjs';
-import { ActiveSessionCurrentLocation } from './active-session-current-location.cjs';
-/**
- * Generated by orval v7.21.0 🍺
- * Do not edit manually.
- * WorkOS Widgets
- * WorkOS Widgets API
- * OpenAPI spec version: 1.0
- */
-interface ActiveSession {
-    id: string;
-    userlandUserId: string;
-    /** @nullable */
-    ipAddress?: string | null;
-    /** @nullable */
-    userAgent?: string | null;
-    /** @nullable */
-    organizationId?: string | null;
-    state: ActiveSessionState;
-    /** @nullable */
-    currentLocation?: ActiveSessionCurrentLocation;
-    usedSsoAuth: boolean;
-    usedPasswordAuth: boolean;
-    usedPasskeyAuth: boolean;
-    usedAppleOauth: boolean;
-    usedBitbucketOauth: boolean;
-    usedGithubOauth: boolean;
-    usedGitLabOauth: boolean;
-    usedGoogleOauth: boolean;
-    usedLinkedInOauth: boolean;
-    usedImpersonation: boolean;
-    usedMicrosoftOauth: boolean;
-    usedSlackOauth: boolean;
-    usedXeroOauth: boolean;
-    usedMagicAuth: boolean;
-    /** @nullable */
-    impersonatorUserId?: string | null;
-    /** @nullable */
-    impersonatorEmail?: string | null;
-    /** @nullable */
-    impersonationReason?: string | null;
-    /** @nullable */
-    lastActivityAt?: string | null;
-    createdAt: string;
-    updatedAt: string;
-}
-export type { ActiveSession };

package/dist/cjs/experimental/api/model/active-sessions-response.cjs DELETED Viewed

@@ -1,17 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var active_sessions_response_exports = {};
-module.exports = __toCommonJS(active_sessions_response_exports);
-//# sourceMappingURL=active-sessions-response.cjs.map

package/dist/cjs/experimental/api/model/active-sessions-response.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../../../../src/experimental/api/model/active-sessions-response.ts"],"sourcesContent":["/**\n * Generated by orval v7.21.0 🍺\n * Do not edit manually.\n * WorkOS Widgets\n * WorkOS Widgets API\n * OpenAPI spec version: 1.0\n */\nimport type { ActiveSession } from \"./active-session.js\";\n\nexport interface ActiveSessionsResponse {\n data: ActiveSession[];\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/cjs/experimental/api/model/active-sessions-response.d.cts DELETED Viewed

@@ -1,17 +0,0 @@
-import { ActiveSession } from './active-session.cjs';
-import './active-session-state.cjs';
-import './active-session-current-location.cjs';
-/**
- * Generated by orval v7.21.0 🍺
- * Do not edit manually.
- * WorkOS Widgets
- * WorkOS Widgets API
- * OpenAPI spec version: 1.0
- */
-interface ActiveSessionsResponse {
-    data: ActiveSession[];
-}
-export type { ActiveSessionsResponse };

package/dist/cjs/experimental/api/model/authentication-information-response-data-password-settings.cjs DELETED Viewed

@@ -1,17 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var authentication_information_response_data_password_settings_exports = {};
-module.exports = __toCommonJS(authentication_information_response_data_password_settings_exports);
-//# sourceMappingURL=authentication-information-response-data-password-settings.cjs.map

package/dist/cjs/experimental/api/model/authentication-information-response-data-password-settings.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../../../../src/experimental/api/model/authentication-information-response-data-password-settings.ts"],"sourcesContent":["/**\n * Generated by orval v7.21.0 🍺\n * Do not edit manually.\n * WorkOS Widgets\n * WorkOS Widgets API\n * OpenAPI spec version: 1.0\n */\n\nexport type AuthenticationInformationResponseDataPasswordSettings = {\n isPasswordNumberRequired: boolean;\n isPasswordPwnedRequired: boolean;\n isPasswordSymbolRequired: boolean;\n isPasswordUppercaseRequired: boolean;\n passwordMinimumLength: number;\n passwordMinimumStrength: number;\n};\n"],"mappings":";;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/cjs/experimental/api/model/authentication-information-response-data-password-settings.d.cts DELETED Viewed

@@ -1,17 +0,0 @@
-/**
- * Generated by orval v7.21.0 🍺
- * Do not edit manually.
- * WorkOS Widgets
- * WorkOS Widgets API
- * OpenAPI spec version: 1.0
- */
-type AuthenticationInformationResponseDataPasswordSettings = {
-    isPasswordNumberRequired: boolean;
-    isPasswordPwnedRequired: boolean;
-    isPasswordSymbolRequired: boolean;
-    isPasswordUppercaseRequired: boolean;
-    passwordMinimumLength: number;
-    passwordMinimumStrength: number;
-};
-export type { AuthenticationInformationResponseDataPasswordSettings };

package/dist/cjs/experimental/api/model/authentication-information-response-data-verification-methods-mfa-provider.cjs DELETED Viewed

@@ -1,31 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var authentication_information_response_data_verification_methods_mfa_provider_exports = {};
-__export(authentication_information_response_data_verification_methods_mfa_provider_exports, {
-  AuthenticationInformationResponseDataVerificationMethodsMfaProvider: () => AuthenticationInformationResponseDataVerificationMethodsMfaProvider
-});
-module.exports = __toCommonJS(authentication_information_response_data_verification_methods_mfa_provider_exports);
-const AuthenticationInformationResponseDataVerificationMethodsMfaProvider = {
-  MFA: "MFA"
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  AuthenticationInformationResponseDataVerificationMethodsMfaProvider
-});
-//# sourceMappingURL=authentication-information-response-data-verification-methods-mfa-provider.cjs.map

package/dist/cjs/experimental/api/model/authentication-information-response-data-verification-methods-mfa-provider.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../../../../src/experimental/api/model/authentication-information-response-data-verification-methods-mfa-provider.ts"],"sourcesContent":["/**\n * Generated by orval v7.21.0 🍺\n * Do not edit manually.\n * WorkOS Widgets\n * WorkOS Widgets API\n * OpenAPI spec version: 1.0\n */\n\nexport type AuthenticationInformationResponseDataVerificationMethodsMfaProvider =\n (typeof AuthenticationInformationResponseDataVerificationMethodsMfaProvider)[keyof typeof AuthenticationInformationResponseDataVerificationMethodsMfaProvider];\n\nexport const AuthenticationInformationResponseDataVerificationMethodsMfaProvider =\n {\n MFA: \"MFA\",\n } as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,MAAM,sEACX;AAAA,EACE,KAAK;AACP;","names":[]}

package/dist/cjs/experimental/api/model/authentication-information-response-data-verification-methods-mfa-provider.d.cts DELETED Viewed

@@ -1,13 +0,0 @@
-/**
- * Generated by orval v7.21.0 🍺
- * Do not edit manually.
- * WorkOS Widgets
- * WorkOS Widgets API
- * OpenAPI spec version: 1.0
- */
-type AuthenticationInformationResponseDataVerificationMethodsMfaProvider = (typeof AuthenticationInformationResponseDataVerificationMethodsMfaProvider)[keyof typeof AuthenticationInformationResponseDataVerificationMethodsMfaProvider];
-declare const AuthenticationInformationResponseDataVerificationMethodsMfaProvider: {
-    readonly MFA: "MFA";
-};
-export { AuthenticationInformationResponseDataVerificationMethodsMfaProvider };