npm - @clerk/ui - Versions diffs - 1.32.1-canary.v20260903011802 → 1.32.1 - Mend

@clerk/ui 1.32.1-canary.v20260903011802 → 1.32.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 (182) hide show

package/dist/ClerkUI.js CHANGED Viewed

@@ -22,8 +22,8 @@ import { isVersionAtLeast, parseVersion } from "@clerk/shared/versionCheck";
 * @public
 */
 var ClerkUI = class ClerkUI {
-	static version = "1.32.1-canary.v20260903011802";
-	version = "1.32.1-canary.v20260903011802";
+	static version = "1.32.1";
+	version = "1.32.1";
 	#componentRenderer;
 	/**
 	* Creates a new `ClerkUI` instance and mounts the internal component renderer.

package/dist/components/OAuthDeviceVerification/OAuthDeviceVerificationCodeInput.js CHANGED Viewed

@@ -12,11 +12,15 @@ const USER_CODE_LENGTH = 8;
 const USER_CODE_GROUP_LENGTH = 4;
 function CodeGroup({ slots, hasError }) {
 	return /* @__PURE__ */ jsx(Flex, {
-		gap: 2,
+		sx: (t) => ({ gap: t.space.$1x5 }),
 		hasError,
 		children: slots.map((slot, index) => /* @__PURE__ */ jsx(OTPInputSlot, {
 			elementDescriptor: descriptors.otpCodeFieldInput,
 			hasError,
+			sx: (t) => ({
+				width: t.space.$8,
+				height: t.space.$8
+			}),
 			...slot
 		}, index))
 	});
@@ -53,7 +57,7 @@ function OAuthDeviceVerificationCodeInput({ control }) {
 			render: ({ slots }) => /* @__PURE__ */ jsxs(Flex, {
 				align: "center",
 				elementDescriptor: descriptors.otpCodeFieldInputs,
-				gap: 3,
+				gap: 2,
 				hasError,
 				justify: "center",
 				role: "group",

package/dist/components/OAuthDeviceVerification/OAuthDeviceVerificationCodeInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OAuthDeviceVerificationCodeInput.js","names":[],"sources":["../../../src/components/OAuthDeviceVerification/OAuthDeviceVerificationCodeInput.tsx"],"sourcesContent":["import type { SlotProps } from 'input-otp';\nimport { OTPInput } from 'input-otp';\n\nimport { Box, descriptors, Flex, Text, useAppearance } from '@/ui/customizables';\nimport { OTPInputSlot } from '@/ui/elements/CodeControl';\nimport { useFormField } from '@/ui/primitives/hooks/useFormField';\nimport type { FormControlState } from '@/ui/utils/useFormControl';\n\nimport { normalizeOAuthDeviceUserCode } from './utils';\n\nconst USER_CODE_LENGTH = 8;\nconst USER_CODE_GROUP_LENGTH = 4;\n\ntype OAuthDeviceVerificationCodeInputProps = {\n control: FormControlState<'userCode'>;\n};\n\nfunction CodeGroup({ slots, hasError }: { slots: SlotProps[]; hasError: boolean }) {\n return (\n <Flex\n ~~gap~~={2}\n hasError={hasError}\n >\n {slots.map((slot, index) => (\n <OTPInputSlot\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n elementDescriptor={descriptors.otpCodeFieldInput}\n hasError={hasError}\n {...slot}\n />\n ))}\n </Flex>\n );\n}\n\nexport function OAuthDeviceVerificationCodeInput({ control }: OAuthDeviceVerificationCodeInputProps) {\n const { autoFocus } = useAppearance().parsedOptions;\n const formField = useFormField();\n const hasError = formField.hasError ?? false;\n\n return (\n <Box\n elementDescriptor={descriptors.otpCodeFieldInputContainer}\n sx={{ position: 'relative' }}\n >\n <OTPInput\n id={formField.id}\n name={control.name}\n autoFocus={autoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n autoComplete='one-time-code'\n autoCapitalize='characters'\n aria-describedby={formField.feedbackMessageId \|\| undefined}\n aria-invalid={hasError}\n aria-required={formField.isRequired}\n disabled={formField.isDisabled}\n inputMode='text'\n maxLength={USER_CODE_LENGTH}\n spellCheck={false}\n textAlign='center'\n value={control.value}\n pasteTransformer={normalizeOAuthDeviceUserCode}\n onBlur={control.onBlur}\n onFocus={control.onFocus}\n onChange={value => {\n control.clearFeedback();\n control.setValue(normalizeOAuthDeviceUserCode(value));\n }}\n render={({ slots }) => (\n <Flex\n align='center'\n elementDescriptor={descriptors.otpCodeFieldInputs}\n gap={3}\n hasError={hasError}\n justify='center'\n role='group'\n >\n <CodeGroup\n slots={slots.slice(0, USER_CODE_GROUP_LENGTH)}\n hasError={hasError}\n />\n <Text\n aria-hidden\n data-testid='device-code-separator'\n variant='h2'\n >\n -\n </Text>\n <CodeGroup\n slots={slots.slice(USER_CODE_GROUP_LENGTH)}\n hasError={hasError}\n />\n </Flex>\n )}\n />\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAM/B,SAAS,UAAU,EAAE,OAAO,YAAuD;CACjF,OACE,oBAAC,MAAD;EACE,KAAK;~~EACK~~;YAET,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD;GAGE,mBAAmB,YAAY;GACrB;GACV,GAAI;EACL,~~GAJM~~,~~KAIN~~,CACF;CACG;AAEV;AAEA,SAAgB,iCAAiC,EAAE,WAAkD;CACnG,MAAM,EAAE,cAAc,cAAc,CAAC,CAAC;CACtC,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,UAAU,YAAY;CAEvC,OACE,oBAAC,KAAD;EACE,mBAAmB,YAAY;EAC/B,IAAI,EAAE,UAAU,WAAW;YAE3B,oBAAC,UAAD;GACE,IAAI,UAAU;GACd,MAAM,QAAQ;GACH;GACX,cAAa;GACb,gBAAe;GACf,oBAAkB,UAAU,qBAAqB;GACjD,gBAAc;GACd,iBAAe,UAAU;GACzB,UAAU,UAAU;GACpB,WAAU;GACV,WAAW;GACX,YAAY;GACZ,WAAU;GACV,OAAO,QAAQ;GACf,kBAAkB;GAClB,QAAQ,QAAQ;GAChB,SAAS,QAAQ;GACjB,WAAU,UAAS;IACjB,QAAQ,cAAc;IACtB,QAAQ,SAAS,6BAA6B,KAAK,CAAC;GACtD;GACA,SAAS,EAAE,YACT,qBAAC,MAAD;IACE,OAAM;IACN,mBAAmB,YAAY;IAC/B,KAAK;IACK;IACV,SAAQ;IACR,MAAK;cANP;KAQE,oBAAC,WAAD;MACE,OAAO,MAAM,MAAM,GAAG,sBAAsB;MAClC;KACX;KACD,oBAAC,MAAD;MACE;MACA,eAAY;MACZ,SAAQ;gBACT;KAEK;KACN,oBAAC,WAAD;MACE,OAAO,MAAM,MAAM,sBAAsB;MAC/B;KACX;IACG;;EAET;CACE;AAET"}
1	+ {"version":3,"file":"OAuthDeviceVerificationCodeInput.js","names":[],"sources":["../../../src/components/OAuthDeviceVerification/OAuthDeviceVerificationCodeInput.tsx"],"sourcesContent":["import type { SlotProps } from 'input-otp';\nimport { OTPInput } from 'input-otp';\n\nimport { Box, descriptors, Flex, Text, useAppearance } from '@/ui/customizables';\nimport { OTPInputSlot } from '@/ui/elements/CodeControl';\nimport { useFormField } from '@/ui/primitives/hooks/useFormField';\nimport type { FormControlState } from '@/ui/utils/useFormControl';\n\nimport { normalizeOAuthDeviceUserCode } from './utils';\n\nconst USER_CODE_LENGTH = 8;\nconst USER_CODE_GROUP_LENGTH = 4;\n\ntype OAuthDeviceVerificationCodeInputProps = {\n control: FormControlState<'userCode'>;\n};\n\nfunction CodeGroup({ slots, hasError }: { slots: SlotProps[]; hasError: boolean }) {\n return (\n <Flex\n sx={t => ({ gap: t.space.$1x5 })}\n hasError={hasError}\n >\n {slots.map((slot, index) => (\n <OTPInputSlot\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n elementDescriptor={descriptors.otpCodeFieldInput}\n hasError={hasError}\n sx={t => ({ width: t.space.$8, height: t.space.$8 })}\n {...slot}\n />\n ))}\n </Flex>\n );\n}\n\nexport function OAuthDeviceVerificationCodeInput({ control }: OAuthDeviceVerificationCodeInputProps) {\n const { autoFocus } = useAppearance().parsedOptions;\n const formField = useFormField();\n const hasError = formField.hasError ?? false;\n\n return (\n <Box\n elementDescriptor={descriptors.otpCodeFieldInputContainer}\n sx={{ position: 'relative' }}\n >\n <OTPInput\n id={formField.id}\n name={control.name}\n autoFocus={autoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n autoComplete='one-time-code'\n autoCapitalize='characters'\n aria-describedby={formField.feedbackMessageId \|\| undefined}\n aria-invalid={hasError}\n aria-required={formField.isRequired}\n disabled={formField.isDisabled}\n inputMode='text'\n maxLength={USER_CODE_LENGTH}\n spellCheck={false}\n textAlign='center'\n value={control.value}\n pasteTransformer={normalizeOAuthDeviceUserCode}\n onBlur={control.onBlur}\n onFocus={control.onFocus}\n onChange={value => {\n control.clearFeedback();\n control.setValue(normalizeOAuthDeviceUserCode(value));\n }}\n render={({ slots }) => (\n <Flex\n align='center'\n elementDescriptor={descriptors.otpCodeFieldInputs}\n gap={2}\n hasError={hasError}\n justify='center'\n role='group'\n >\n <CodeGroup\n slots={slots.slice(0, USER_CODE_GROUP_LENGTH)}\n hasError={hasError}\n />\n <Text\n aria-hidden\n data-testid='device-code-separator'\n variant='h2'\n >\n -\n </Text>\n <CodeGroup\n slots={slots.slice(USER_CODE_GROUP_LENGTH)}\n hasError={hasError}\n />\n </Flex>\n )}\n />\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAM/B,SAAS,UAAU,EAAE,OAAO,YAAuD;CACjF,OACE,oBAAC,MAAD;EACE,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,KAAK;EACpB;YAET,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD;GAGE,mBAAmB,YAAY;GACrB;GACV,KAAI,OAAM;IAAE,OAAO,EAAE,MAAM;IAAI,QAAQ,EAAE,MAAM;GAAG;GAClD,GAAI;EACL,GALM,KAKN,CACF;CACG;AAEV;AAEA,SAAgB,iCAAiC,EAAE,WAAkD;CACnG,MAAM,EAAE,cAAc,cAAc,CAAC,CAAC;CACtC,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,UAAU,YAAY;CAEvC,OACE,oBAAC,KAAD;EACE,mBAAmB,YAAY;EAC/B,IAAI,EAAE,UAAU,WAAW;YAE3B,oBAAC,UAAD;GACE,IAAI,UAAU;GACd,MAAM,QAAQ;GACH;GACX,cAAa;GACb,gBAAe;GACf,oBAAkB,UAAU,qBAAqB;GACjD,gBAAc;GACd,iBAAe,UAAU;GACzB,UAAU,UAAU;GACpB,WAAU;GACV,WAAW;GACX,YAAY;GACZ,WAAU;GACV,OAAO,QAAQ;GACf,kBAAkB;GAClB,QAAQ,QAAQ;GAChB,SAAS,QAAQ;GACjB,WAAU,UAAS;IACjB,QAAQ,cAAc;IACtB,QAAQ,SAAS,6BAA6B,KAAK,CAAC;GACtD;GACA,SAAS,EAAE,YACT,qBAAC,MAAD;IACE,OAAM;IACN,mBAAmB,YAAY;IAC/B,KAAK;IACK;IACV,SAAQ;IACR,MAAK;cANP;KAQE,oBAAC,WAAD;MACE,OAAO,MAAM,MAAM,GAAG,sBAAsB;MAClC;KACX;KACD,oBAAC,MAAD;MACE;MACA,eAAY;MACZ,SAAQ;gBACT;KAEK;KACN,oBAAC,WAAD;MACE,OAAO,MAAM,MAAM,sBAAsB;MAC/B;KACX;IACG;;EAET;CACE;AAET"}

package/dist/elements/CodeControl.js CHANGED Viewed

@@ -148,13 +148,13 @@ const OTPCodeControl = () => {
 };
 function OTPInputSlot(props) {
 	const { isSuccessfullyFilled, ...otpProps } = props;
-	const { char, hasFakeCaret, isActive, placeholderChar, ...rest } = otpProps;
+	const { char, hasFakeCaret, isActive, placeholderChar, sx, ...rest } = otpProps;
 	return /* @__PURE__ */ jsxs(OTPInputSegment, {
 		"data-testid": "otp-input-segment",
 		...rest,
 		focusRing: isActive,
 		variant: "default",
-		sx: (t) => ({
+		sx: [(t) => ({
 			textAlign: "center",
 			...common.textVariants(t).h2,
 			padding: `${t.space.$0x5} 0`,
@@ -174,7 +174,7 @@ function OTPInputSlot(props) {
 				height: t.space.$8,
 				width: t.space.$8
 			}
-		}),
+		}), sx],
 		children: [char !== null && /* @__PURE__ */ jsx("div", { children: char }), hasFakeCaret && /* @__PURE__ */ jsx(FakeCaret, {})]
 	});
 }

package/dist/elements/CodeControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeControl.js","names":[],"sources":["../../src/elements/CodeControl.tsx"],"sourcesContent":["import { createContextAndHook } from '@clerk/shared/react';\nimport type { SlotProps } from 'input-otp';\nimport { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp';\nimport type { PropsWithChildren } from 'react';\nimport React, { useCallback } from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Box, descriptors, Flex, OTPInputSegment, useAppearance } from '../customizables';\nimport { useCardState } from '../elements/contexts';\nimport { useLoadingStatus } from '../hooks';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { common, mqu } from '../styledSystem';\nimport { handleError } from '../utils/errorHandler';\nimport { sleep } from '../utils/sleep';\nimport type { FormControlState } from '../utils/useFormControl';\nimport { useFormControl } from '../utils/useFormControl';\nimport { TimerButton } from './TimerButton';\n\ntype UseCodeInputOptions = {\n length?: number;\n};\n\ntype onCodeEntryFinishedCallback = (code: string) => unknown;\ntype onCodeEntryFinished = (cb: onCodeEntryFinishedCallback) => void;\n\ntype onCodeEntryFinishedActionCallback<R = unknown> = (\n code: string,\n resolve: (params?: R) => Promise<void>,\n reject: (err: unknown) => Promise<void>,\n) => void;\n\ntype UseFieldOTP = <R = unknown>(params: {\n id?: 'code';\n onCodeEntryFinished: onCodeEntryFinishedActionCallback<R>;\n onResendCodeClicked?: React.MouseEventHandler;\n onResolve?: (a?: R) => Promise<void> \| void;\n}) => {\n isLoading: boolean;\n otpControl: ReturnType<typeof useCodeControl>;\n onResendCode: React.MouseEventHandler<HTMLButtonElement> \| undefined;\n onFakeContinue: () => void;\n};\n\nexport const useFieldOTP: UseFieldOTP = params => {\n const card = useCardState();\n const {\n id = 'code',\n onCodeEntryFinished: paramsOnCodeEntryFinished,\n onResendCodeClicked: paramsOnResendCodeClicked,\n onResolve: paramsOnResolve,\n } = params;\n const codeControlState = useFormControl(id, '');\n const codeControl = useCodeControl(codeControlState);\n const status = useLoadingStatus();\n\n const resolve = async (param: any) => {\n // TODO: Localize this\n codeControlState.setSuccess('success');\n await sleep(750);\n await paramsOnResolve?.(param);\n };\n\n const reject = async (err: any) => {\n handleError(err, [codeControlState], card.setError);\n status.setIdle();\n await sleep(750);\n codeControl.reset();\n };\n\n codeControl.onCodeEntryFinished(code => {\n status.setLoading();\n codeControlState.clearFeedback();\n paramsOnCodeEntryFinished(code, resolve, reject);\n });\n\n const onFakeContinue = () => {\n codeControlState.clearFeedback();\n paramsOnCodeEntryFinished('', resolve, reject);\n };\n\n const onResendCode = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n e => {\n codeControl.reset();\n paramsOnResendCodeClicked?.(e);\n },\n [codeControl, paramsOnResendCodeClicked],\n );\n\n return {\n isLoading: status.isLoading,\n otpControl: codeControl,\n onResendCode: paramsOnResendCodeClicked ? onResendCode : undefined,\n onFakeContinue,\n };\n};\n\nconst useCodeControl = (formControl: FormControlState, options?: UseCodeInputOptions) => {\n const userOnCodeEnteredCallback = React.useRef<onCodeEntryFinishedCallback>();\n const defaultValue = formControl.value;\n const { feedback, feedbackType, onChange, clearFeedback } = formControl;\n const { length = 6 } = options \|\| {};\n const [values, setValues] = React.useState(() =>\n defaultValue ? defaultValue.split('').slice(0, length) : Array.from({ length }, () => ''),\n );\n\n const onCodeEntryFinished: onCodeEntryFinished = cb => {\n userOnCodeEnteredCallback.current = cb;\n };\n\n const reset = React.useCallback(() => {\n setValues(Array.from({ length }, () => ''));\n }, [length]);\n\n React.useEffect(() => {\n const len = values.filter(c => c).length;\n if (len === length) {\n const code = values.map(c => c \|\| ' ').join('');\n userOnCodeEnteredCallback.current?.(code);\n } else {\n const code = values.join('');\n onChange?.({ target: { value: code } } as any);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [values.toString()]);\n\n const otpInputProps = { length, values, setValues, feedback, feedbackType, clearFeedback };\n return { otpInputProps, onCodeEntryFinished, reset };\n};\n\nexport type OTPInputProps = {\n label?: string \| LocalizationKey;\n resendButton?: LocalizationKey;\n description?: string \| LocalizationKey;\n isLoading: boolean;\n isDisabled?: boolean;\n onResendCode?: React.MouseEventHandler<HTMLButtonElement>;\n otpControl: ReturnType<typeof useFieldOTP>['otpControl'];\n centerAlign?: boolean;\n};\n\nconst [OTPInputContext, useOTPInputContext] = createContextAndHook<OTPInputProps>('OTPInputContext');\n\nexport const OTPRoot = ({ children, ...props }: PropsWithChildren<OTPInputProps>) => {\n return <OTPInputContext.Provider value={{ value: props }}>{children}</OTPInputContext.Provider>;\n};\n\nexport const OTPResendButton = () => {\n const { resendButton, onResendCode, isLoading, otpControl } = useOTPInputContext();\n\n if (!onResendCode) {\n return null;\n }\n\n return (\n <TimerButton\n elementDescriptor={descriptors.formResendCodeLink}\n onClick={onResendCode}\n startDisabled\n isDisabled={otpControl.otpInputProps.feedbackType === 'success' \|\| isLoading}\n showCounter={otpControl.otpInputProps.feedbackType !== 'success'}\n localizationKey={resendButton}\n />\n );\n};\n\nexport const OTPCodeControl = () => {\n const [disabled, setDisabled] = React.useState(false);\n const { otpControl, isLoading, isDisabled } = useOTPInputContext();\n const { autoFocus: optionAutoFocus } = useAppearance().parsedOptions;\n const { feedback, values, setValues, feedbackType, length } = otpControl.otpInputProps;\n\n React.useEffect(() => {\n if (feedback) {\n setDisabled(true);\n }\n }, [feedback]);\n\n return (\n <Box\n elementDescriptor={descriptors.otpCodeFieldInputContainer}\n sx={{ position: 'relative' }}\n >\n <OTPInput\n autoFocus={optionAutoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n aria-label='Enter verification code'\n aria-required\n maxLength={length}\n inputMode='numeric'\n pattern={REGEXP_ONLY_DIGITS}\n textAlign='center'\n value={values.join('')}\n onChange={newValue => {\n setValues(newValue.split(''));\n }}\n render={({ slots }) => (\n <Flex\n align='center'\n elementDescriptor={descriptors.otpCodeFieldInputs}\n gap={2}\n hasError={feedbackType === 'error'}\n isLoading={isLoading}\n role='group'\n >\n {slots.map((slot, index: number) => (\n <OTPInputSlot\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n elementDescriptor={descriptors.otpCodeFieldInput}\n isDisabled={isDisabled \|\| isLoading \|\| disabled \|\| feedbackType === 'success'}\n hasError={feedbackType === 'error'}\n isSuccessfullyFilled={feedbackType === 'success'}\n {...slot}\n />\n ))}\n </Flex>\n )}\n />\n </Box>\n );\n};\n\nexport function OTPInputSlot(\n props: SlotProps & PropsOfComponent<typeof OTPInputSegment> & { isSuccessfullyFilled?: boolean },\n) {\n const { isSuccessfullyFilled, ...otpProps } = props;\n const { char, hasFakeCaret, isActive, placeholderChar, ...rest } = otpProps;\n return (\n <OTPInputSegment\n data-testid='otp-input-segment'\n {...rest}\n focusRing={isActive}\n variant='default'\n sx={t => ({\n textAlign: 'center',\n ...common.textVariants(t).h2,\n padding: `${t.space.$0x5} 0`,\n boxSizing: 'border-box',\n display: 'flex',\n position: 'relative',\n alignItems: 'center',\n justifyContent: 'center',\n height: t.space.$10,\n width: t.space.$10,\n color: t.colors.$colorInputForeground,\n borderWidth: t.borderWidths.$normal,\n borderRadius: t.radii.$md,\n ...(isSuccessfullyFilled ? { borderColor: t.colors.$success500 } : common.borderColor(t, props)),\n backgroundColor: 'unset',\n [mqu.sm]: {\n height: t.space.$8,\n width: t.space.$8,\n },\n })}\n >\n {char !== null && <div>{char}</div>}\n {hasFakeCaret && <FakeCaret />}\n </OTPInputSegment>\n );\n}\n\nfunction FakeCaret() {\n return (\n <>\n <style>{`\n @keyframes caret-blink-animation {\n 0%, 50% {\n opacity: 1;\n }\n 51%, 100% {\n opacity: 0;\n }\n }\n `}</style>\n <Flex\n align='center'\n justify='center'\n sx={() => ({\n animation: 'caret-blink-animation 1s infinite',\n pointerEvents: 'none',\n position: 'absolute',\n inset: 0,\n })}\n >\n <Box\n sx={t => ({\n height: t.space.$4,\n width: t.space.$px,\n backgroundColor: t.colors.$colorInputForeground,\n })}\n />\n </Flex>\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"CodeControl.js","names":[],"sources":["../../src/elements/CodeControl.tsx"],"sourcesContent":["import { createContextAndHook } from '@clerk/shared/react';\nimport type { SlotProps } from 'input-otp';\nimport { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp';\nimport type { PropsWithChildren } from 'react';\nimport React, { useCallback } from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Box, descriptors, Flex, OTPInputSegment, useAppearance } from '../customizables';\nimport { useCardState } from '../elements/contexts';\nimport { useLoadingStatus } from '../hooks';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { common, mqu } from '../styledSystem';\nimport { handleError } from '../utils/errorHandler';\nimport { sleep } from '../utils/sleep';\nimport type { FormControlState } from '../utils/useFormControl';\nimport { useFormControl } from '../utils/useFormControl';\nimport { TimerButton } from './TimerButton';\n\ntype UseCodeInputOptions = {\n length?: number;\n};\n\ntype onCodeEntryFinishedCallback = (code: string) => unknown;\ntype onCodeEntryFinished = (cb: onCodeEntryFinishedCallback) => void;\n\ntype onCodeEntryFinishedActionCallback<R = unknown> = (\n code: string,\n resolve: (params?: R) => Promise<void>,\n reject: (err: unknown) => Promise<void>,\n) => void;\n\ntype UseFieldOTP = <R = unknown>(params: {\n id?: 'code';\n onCodeEntryFinished: onCodeEntryFinishedActionCallback<R>;\n onResendCodeClicked?: React.MouseEventHandler;\n onResolve?: (a?: R) => Promise<void> \| void;\n}) => {\n isLoading: boolean;\n otpControl: ReturnType<typeof useCodeControl>;\n onResendCode: React.MouseEventHandler<HTMLButtonElement> \| undefined;\n onFakeContinue: () => void;\n};\n\nexport const useFieldOTP: UseFieldOTP = params => {\n const card = useCardState();\n const {\n id = 'code',\n onCodeEntryFinished: paramsOnCodeEntryFinished,\n onResendCodeClicked: paramsOnResendCodeClicked,\n onResolve: paramsOnResolve,\n } = params;\n const codeControlState = useFormControl(id, '');\n const codeControl = useCodeControl(codeControlState);\n const status = useLoadingStatus();\n\n const resolve = async (param: any) => {\n // TODO: Localize this\n codeControlState.setSuccess('success');\n await sleep(750);\n await paramsOnResolve?.(param);\n };\n\n const reject = async (err: any) => {\n handleError(err, [codeControlState], card.setError);\n status.setIdle();\n await sleep(750);\n codeControl.reset();\n };\n\n codeControl.onCodeEntryFinished(code => {\n status.setLoading();\n codeControlState.clearFeedback();\n paramsOnCodeEntryFinished(code, resolve, reject);\n });\n\n const onFakeContinue = () => {\n codeControlState.clearFeedback();\n paramsOnCodeEntryFinished('', resolve, reject);\n };\n\n const onResendCode = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n e => {\n codeControl.reset();\n paramsOnResendCodeClicked?.(e);\n },\n [codeControl, paramsOnResendCodeClicked],\n );\n\n return {\n isLoading: status.isLoading,\n otpControl: codeControl,\n onResendCode: paramsOnResendCodeClicked ? onResendCode : undefined,\n onFakeContinue,\n };\n};\n\nconst useCodeControl = (formControl: FormControlState, options?: UseCodeInputOptions) => {\n const userOnCodeEnteredCallback = React.useRef<onCodeEntryFinishedCallback>();\n const defaultValue = formControl.value;\n const { feedback, feedbackType, onChange, clearFeedback } = formControl;\n const { length = 6 } = options \|\| {};\n const [values, setValues] = React.useState(() =>\n defaultValue ? defaultValue.split('').slice(0, length) : Array.from({ length }, () => ''),\n );\n\n const onCodeEntryFinished: onCodeEntryFinished = cb => {\n userOnCodeEnteredCallback.current = cb;\n };\n\n const reset = React.useCallback(() => {\n setValues(Array.from({ length }, () => ''));\n }, [length]);\n\n React.useEffect(() => {\n const len = values.filter(c => c).length;\n if (len === length) {\n const code = values.map(c => c \|\| ' ').join('');\n userOnCodeEnteredCallback.current?.(code);\n } else {\n const code = values.join('');\n onChange?.({ target: { value: code } } as any);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [values.toString()]);\n\n const otpInputProps = { length, values, setValues, feedback, feedbackType, clearFeedback };\n return { otpInputProps, onCodeEntryFinished, reset };\n};\n\nexport type OTPInputProps = {\n label?: string \| LocalizationKey;\n resendButton?: LocalizationKey;\n description?: string \| LocalizationKey;\n isLoading: boolean;\n isDisabled?: boolean;\n onResendCode?: React.MouseEventHandler<HTMLButtonElement>;\n otpControl: ReturnType<typeof useFieldOTP>['otpControl'];\n centerAlign?: boolean;\n};\n\nconst [OTPInputContext, useOTPInputContext] = createContextAndHook<OTPInputProps>('OTPInputContext');\n\nexport const OTPRoot = ({ children, ...props }: PropsWithChildren<OTPInputProps>) => {\n return <OTPInputContext.Provider value={{ value: props }}>{children}</OTPInputContext.Provider>;\n};\n\nexport const OTPResendButton = () => {\n const { resendButton, onResendCode, isLoading, otpControl } = useOTPInputContext();\n\n if (!onResendCode) {\n return null;\n }\n\n return (\n <TimerButton\n elementDescriptor={descriptors.formResendCodeLink}\n onClick={onResendCode}\n startDisabled\n isDisabled={otpControl.otpInputProps.feedbackType === 'success' \|\| isLoading}\n showCounter={otpControl.otpInputProps.feedbackType !== 'success'}\n localizationKey={resendButton}\n />\n );\n};\n\nexport const OTPCodeControl = () => {\n const [disabled, setDisabled] = React.useState(false);\n const { otpControl, isLoading, isDisabled } = useOTPInputContext();\n const { autoFocus: optionAutoFocus } = useAppearance().parsedOptions;\n const { feedback, values, setValues, feedbackType, length } = otpControl.otpInputProps;\n\n React.useEffect(() => {\n if (feedback) {\n setDisabled(true);\n }\n }, [feedback]);\n\n return (\n <Box\n elementDescriptor={descriptors.otpCodeFieldInputContainer}\n sx={{ position: 'relative' }}\n >\n <OTPInput\n autoFocus={optionAutoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n aria-label='Enter verification code'\n aria-required\n maxLength={length}\n inputMode='numeric'\n pattern={REGEXP_ONLY_DIGITS}\n textAlign='center'\n value={values.join('')}\n onChange={newValue => {\n setValues(newValue.split(''));\n }}\n render={({ slots }) => (\n <Flex\n align='center'\n elementDescriptor={descriptors.otpCodeFieldInputs}\n gap={2}\n hasError={feedbackType === 'error'}\n isLoading={isLoading}\n role='group'\n >\n {slots.map((slot, index: number) => (\n <OTPInputSlot\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n elementDescriptor={descriptors.otpCodeFieldInput}\n isDisabled={isDisabled \|\| isLoading \|\| disabled \|\| feedbackType === 'success'}\n hasError={feedbackType === 'error'}\n isSuccessfullyFilled={feedbackType === 'success'}\n {...slot}\n />\n ))}\n </Flex>\n )}\n />\n </Box>\n );\n};\n\nexport function OTPInputSlot(\n props: SlotProps & PropsOfComponent<typeof OTPInputSegment> & { isSuccessfullyFilled?: boolean },\n) {\n const { isSuccessfullyFilled, ...otpProps } = props;\n const { char, hasFakeCaret, isActive, placeholderChar, sx, ...rest } = otpProps;\n return (\n <OTPInputSegment\n data-testid='otp-input-segment'\n {...rest}\n focusRing={isActive}\n variant='default'\n sx={[\n t => ({\n textAlign: 'center',\n ...common.textVariants(t).h2,\n padding: `${t.space.$0x5} 0`,\n boxSizing: 'border-box',\n display: 'flex',\n position: 'relative',\n alignItems: 'center',\n justifyContent: 'center',\n height: t.space.$10,\n width: t.space.$10,\n color: t.colors.$colorInputForeground,\n borderWidth: t.borderWidths.$normal,\n borderRadius: t.radii.$md,\n ...(isSuccessfullyFilled ? { borderColor: t.colors.$success500 } : common.borderColor(t, props)),\n backgroundColor: 'unset',\n [mqu.sm]: {\n height: t.space.$8,\n width: t.space.$8,\n },\n }),\n sx,\n ]}\n >\n {char !== null && <div>{char}</div>}\n {hasFakeCaret && <FakeCaret />}\n </OTPInputSegment>\n );\n}\n\nfunction FakeCaret() {\n return (\n <>\n <style>{`\n @keyframes caret-blink-animation {\n 0%, 50% {\n opacity: 1;\n }\n 51%, 100% {\n opacity: 0;\n }\n }\n `}</style>\n <Flex\n align='center'\n justify='center'\n sx={() => ({\n animation: 'caret-blink-animation 1s infinite',\n pointerEvents: 'none',\n position: 'absolute',\n inset: 0,\n })}\n >\n <Box\n sx={t => ({\n height: t.space.$4,\n width: t.space.$px,\n backgroundColor: t.colors.$colorInputForeground,\n })}\n />\n </Flex>\n </>\n );\n}\n"],"mappings":"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"}

package/dist/index.js CHANGED Viewed

@@ -17,7 +17,7 @@ import { ClerkUI } from "./ClerkUI.js";
 */
 const ui = {
 	__brand: UI_BRAND,
-	version: "1.32.1-canary.v20260903011802",
+	version: "1.32.1",
 	ClerkUI
 };

package/dist/no-rhc/ClerkUI.js CHANGED Viewed

@@ -22,8 +22,8 @@ import { isVersionAtLeast, parseVersion } from "@clerk/shared/versionCheck";
 * @public
 */
 var ClerkUI = class ClerkUI {
-	static version = "1.32.1-canary.v20260903011802";
-	version = "1.32.1-canary.v20260903011802";
+	static version = "1.32.1";
+	version = "1.32.1";
 	#componentRenderer;
 	/**
 	* Creates a new `ClerkUI` instance and mounts the internal component renderer.

package/dist/no-rhc/components/OAuthDeviceVerification/OAuthDeviceVerificationCodeInput.js CHANGED Viewed

@@ -12,11 +12,15 @@ const USER_CODE_LENGTH = 8;
 const USER_CODE_GROUP_LENGTH = 4;
 function CodeGroup({ slots, hasError }) {
 	return /* @__PURE__ */ jsx(Flex, {
-		gap: 2,
+		sx: (t) => ({ gap: t.space.$1x5 }),
 		hasError,
 		children: slots.map((slot, index) => /* @__PURE__ */ jsx(OTPInputSlot, {
 			elementDescriptor: descriptors.otpCodeFieldInput,
 			hasError,
+			sx: (t) => ({
+				width: t.space.$8,
+				height: t.space.$8
+			}),
 			...slot
 		}, index))
 	});
@@ -53,7 +57,7 @@ function OAuthDeviceVerificationCodeInput({ control }) {
 			render: ({ slots }) => /* @__PURE__ */ jsxs(Flex, {
 				align: "center",
 				elementDescriptor: descriptors.otpCodeFieldInputs,
-				gap: 3,
+				gap: 2,
 				hasError,
 				justify: "center",
 				role: "group",

package/dist/no-rhc/components/OAuthDeviceVerification/OAuthDeviceVerificationCodeInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OAuthDeviceVerificationCodeInput.js","names":[],"sources":["../../../../src/components/OAuthDeviceVerification/OAuthDeviceVerificationCodeInput.tsx"],"sourcesContent":["import type { SlotProps } from 'input-otp';\nimport { OTPInput } from 'input-otp';\n\nimport { Box, descriptors, Flex, Text, useAppearance } from '@/ui/customizables';\nimport { OTPInputSlot } from '@/ui/elements/CodeControl';\nimport { useFormField } from '@/ui/primitives/hooks/useFormField';\nimport type { FormControlState } from '@/ui/utils/useFormControl';\n\nimport { normalizeOAuthDeviceUserCode } from './utils';\n\nconst USER_CODE_LENGTH = 8;\nconst USER_CODE_GROUP_LENGTH = 4;\n\ntype OAuthDeviceVerificationCodeInputProps = {\n control: FormControlState<'userCode'>;\n};\n\nfunction CodeGroup({ slots, hasError }: { slots: SlotProps[]; hasError: boolean }) {\n return (\n <Flex\n ~~gap~~={2}\n hasError={hasError}\n >\n {slots.map((slot, index) => (\n <OTPInputSlot\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n elementDescriptor={descriptors.otpCodeFieldInput}\n hasError={hasError}\n {...slot}\n />\n ))}\n </Flex>\n );\n}\n\nexport function OAuthDeviceVerificationCodeInput({ control }: OAuthDeviceVerificationCodeInputProps) {\n const { autoFocus } = useAppearance().parsedOptions;\n const formField = useFormField();\n const hasError = formField.hasError ?? false;\n\n return (\n <Box\n elementDescriptor={descriptors.otpCodeFieldInputContainer}\n sx={{ position: 'relative' }}\n >\n <OTPInput\n id={formField.id}\n name={control.name}\n autoFocus={autoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n autoComplete='one-time-code'\n autoCapitalize='characters'\n aria-describedby={formField.feedbackMessageId \|\| undefined}\n aria-invalid={hasError}\n aria-required={formField.isRequired}\n disabled={formField.isDisabled}\n inputMode='text'\n maxLength={USER_CODE_LENGTH}\n spellCheck={false}\n textAlign='center'\n value={control.value}\n pasteTransformer={normalizeOAuthDeviceUserCode}\n onBlur={control.onBlur}\n onFocus={control.onFocus}\n onChange={value => {\n control.clearFeedback();\n control.setValue(normalizeOAuthDeviceUserCode(value));\n }}\n render={({ slots }) => (\n <Flex\n align='center'\n elementDescriptor={descriptors.otpCodeFieldInputs}\n gap={3}\n hasError={hasError}\n justify='center'\n role='group'\n >\n <CodeGroup\n slots={slots.slice(0, USER_CODE_GROUP_LENGTH)}\n hasError={hasError}\n />\n <Text\n aria-hidden\n data-testid='device-code-separator'\n variant='h2'\n >\n -\n </Text>\n <CodeGroup\n slots={slots.slice(USER_CODE_GROUP_LENGTH)}\n hasError={hasError}\n />\n </Flex>\n )}\n />\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAM/B,SAAS,UAAU,EAAE,OAAO,YAAuD;CACjF,OACE,oBAAC,MAAD;EACE,KAAK;~~EACK~~;YAET,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD;GAGE,mBAAmB,YAAY;GACrB;GACV,GAAI;EACL,~~GAJM~~,~~KAIN~~,CACF;CACG;AAEV;AAEA,SAAgB,iCAAiC,EAAE,WAAkD;CACnG,MAAM,EAAE,cAAc,cAAc,CAAC,CAAC;CACtC,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,UAAU,YAAY;CAEvC,OACE,oBAAC,KAAD;EACE,mBAAmB,YAAY;EAC/B,IAAI,EAAE,UAAU,WAAW;YAE3B,oBAAC,UAAD;GACE,IAAI,UAAU;GACd,MAAM,QAAQ;GACH;GACX,cAAa;GACb,gBAAe;GACf,oBAAkB,UAAU,qBAAqB;GACjD,gBAAc;GACd,iBAAe,UAAU;GACzB,UAAU,UAAU;GACpB,WAAU;GACV,WAAW;GACX,YAAY;GACZ,WAAU;GACV,OAAO,QAAQ;GACf,kBAAkB;GAClB,QAAQ,QAAQ;GAChB,SAAS,QAAQ;GACjB,WAAU,UAAS;IACjB,QAAQ,cAAc;IACtB,QAAQ,SAAS,6BAA6B,KAAK,CAAC;GACtD;GACA,SAAS,EAAE,YACT,qBAAC,MAAD;IACE,OAAM;IACN,mBAAmB,YAAY;IAC/B,KAAK;IACK;IACV,SAAQ;IACR,MAAK;cANP;KAQE,oBAAC,WAAD;MACE,OAAO,MAAM,MAAM,GAAG,sBAAsB;MAClC;KACX;KACD,oBAAC,MAAD;MACE;MACA,eAAY;MACZ,SAAQ;gBACT;KAEK;KACN,oBAAC,WAAD;MACE,OAAO,MAAM,MAAM,sBAAsB;MAC/B;KACX;IACG;;EAET;CACE;AAET"}
1	+ {"version":3,"file":"OAuthDeviceVerificationCodeInput.js","names":[],"sources":["../../../../src/components/OAuthDeviceVerification/OAuthDeviceVerificationCodeInput.tsx"],"sourcesContent":["import type { SlotProps } from 'input-otp';\nimport { OTPInput } from 'input-otp';\n\nimport { Box, descriptors, Flex, Text, useAppearance } from '@/ui/customizables';\nimport { OTPInputSlot } from '@/ui/elements/CodeControl';\nimport { useFormField } from '@/ui/primitives/hooks/useFormField';\nimport type { FormControlState } from '@/ui/utils/useFormControl';\n\nimport { normalizeOAuthDeviceUserCode } from './utils';\n\nconst USER_CODE_LENGTH = 8;\nconst USER_CODE_GROUP_LENGTH = 4;\n\ntype OAuthDeviceVerificationCodeInputProps = {\n control: FormControlState<'userCode'>;\n};\n\nfunction CodeGroup({ slots, hasError }: { slots: SlotProps[]; hasError: boolean }) {\n return (\n <Flex\n sx={t => ({ gap: t.space.$1x5 })}\n hasError={hasError}\n >\n {slots.map((slot, index) => (\n <OTPInputSlot\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n elementDescriptor={descriptors.otpCodeFieldInput}\n hasError={hasError}\n sx={t => ({ width: t.space.$8, height: t.space.$8 })}\n {...slot}\n />\n ))}\n </Flex>\n );\n}\n\nexport function OAuthDeviceVerificationCodeInput({ control }: OAuthDeviceVerificationCodeInputProps) {\n const { autoFocus } = useAppearance().parsedOptions;\n const formField = useFormField();\n const hasError = formField.hasError ?? false;\n\n return (\n <Box\n elementDescriptor={descriptors.otpCodeFieldInputContainer}\n sx={{ position: 'relative' }}\n >\n <OTPInput\n id={formField.id}\n name={control.name}\n autoFocus={autoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n autoComplete='one-time-code'\n autoCapitalize='characters'\n aria-describedby={formField.feedbackMessageId \|\| undefined}\n aria-invalid={hasError}\n aria-required={formField.isRequired}\n disabled={formField.isDisabled}\n inputMode='text'\n maxLength={USER_CODE_LENGTH}\n spellCheck={false}\n textAlign='center'\n value={control.value}\n pasteTransformer={normalizeOAuthDeviceUserCode}\n onBlur={control.onBlur}\n onFocus={control.onFocus}\n onChange={value => {\n control.clearFeedback();\n control.setValue(normalizeOAuthDeviceUserCode(value));\n }}\n render={({ slots }) => (\n <Flex\n align='center'\n elementDescriptor={descriptors.otpCodeFieldInputs}\n gap={2}\n hasError={hasError}\n justify='center'\n role='group'\n >\n <CodeGroup\n slots={slots.slice(0, USER_CODE_GROUP_LENGTH)}\n hasError={hasError}\n />\n <Text\n aria-hidden\n data-testid='device-code-separator'\n variant='h2'\n >\n -\n </Text>\n <CodeGroup\n slots={slots.slice(USER_CODE_GROUP_LENGTH)}\n hasError={hasError}\n />\n </Flex>\n )}\n />\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AAM/B,SAAS,UAAU,EAAE,OAAO,YAAuD;CACjF,OACE,oBAAC,MAAD;EACE,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,KAAK;EACpB;YAET,MAAM,KAAK,MAAM,UAChB,oBAAC,cAAD;GAGE,mBAAmB,YAAY;GACrB;GACV,KAAI,OAAM;IAAE,OAAO,EAAE,MAAM;IAAI,QAAQ,EAAE,MAAM;GAAG;GAClD,GAAI;EACL,GALM,KAKN,CACF;CACG;AAEV;AAEA,SAAgB,iCAAiC,EAAE,WAAkD;CACnG,MAAM,EAAE,cAAc,cAAc,CAAC,CAAC;CACtC,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,UAAU,YAAY;CAEvC,OACE,oBAAC,KAAD;EACE,mBAAmB,YAAY;EAC/B,IAAI,EAAE,UAAU,WAAW;YAE3B,oBAAC,UAAD;GACE,IAAI,UAAU;GACd,MAAM,QAAQ;GACH;GACX,cAAa;GACb,gBAAe;GACf,oBAAkB,UAAU,qBAAqB;GACjD,gBAAc;GACd,iBAAe,UAAU;GACzB,UAAU,UAAU;GACpB,WAAU;GACV,WAAW;GACX,YAAY;GACZ,WAAU;GACV,OAAO,QAAQ;GACf,kBAAkB;GAClB,QAAQ,QAAQ;GAChB,SAAS,QAAQ;GACjB,WAAU,UAAS;IACjB,QAAQ,cAAc;IACtB,QAAQ,SAAS,6BAA6B,KAAK,CAAC;GACtD;GACA,SAAS,EAAE,YACT,qBAAC,MAAD;IACE,OAAM;IACN,mBAAmB,YAAY;IAC/B,KAAK;IACK;IACV,SAAQ;IACR,MAAK;cANP;KAQE,oBAAC,WAAD;MACE,OAAO,MAAM,MAAM,GAAG,sBAAsB;MAClC;KACX;KACD,oBAAC,MAAD;MACE;MACA,eAAY;MACZ,SAAQ;gBACT;KAEK;KACN,oBAAC,WAAD;MACE,OAAO,MAAM,MAAM,sBAAsB;MAC/B;KACX;IACG;;EAET;CACE;AAET"}

package/dist/no-rhc/elements/CodeControl.js CHANGED Viewed

@@ -148,13 +148,13 @@ const OTPCodeControl = () => {
 };
 function OTPInputSlot(props) {
 	const { isSuccessfullyFilled, ...otpProps } = props;
-	const { char, hasFakeCaret, isActive, placeholderChar, ...rest } = otpProps;
+	const { char, hasFakeCaret, isActive, placeholderChar, sx, ...rest } = otpProps;
 	return /* @__PURE__ */ jsxs(OTPInputSegment, {
 		"data-testid": "otp-input-segment",
 		...rest,
 		focusRing: isActive,
 		variant: "default",
-		sx: (t) => ({
+		sx: [(t) => ({
 			textAlign: "center",
 			...common.textVariants(t).h2,
 			padding: `${t.space.$0x5} 0`,
@@ -174,7 +174,7 @@ function OTPInputSlot(props) {
 				height: t.space.$8,
 				width: t.space.$8
 			}
-		}),
+		}), sx],
 		children: [char !== null && /* @__PURE__ */ jsx("div", { children: char }), hasFakeCaret && /* @__PURE__ */ jsx(FakeCaret, {})]
 	});
 }

package/dist/no-rhc/elements/CodeControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeControl.js","names":[],"sources":["../../../src/elements/CodeControl.tsx"],"sourcesContent":["import { createContextAndHook } from '@clerk/shared/react';\nimport type { SlotProps } from 'input-otp';\nimport { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp';\nimport type { PropsWithChildren } from 'react';\nimport React, { useCallback } from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Box, descriptors, Flex, OTPInputSegment, useAppearance } from '../customizables';\nimport { useCardState } from '../elements/contexts';\nimport { useLoadingStatus } from '../hooks';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { common, mqu } from '../styledSystem';\nimport { handleError } from '../utils/errorHandler';\nimport { sleep } from '../utils/sleep';\nimport type { FormControlState } from '../utils/useFormControl';\nimport { useFormControl } from '../utils/useFormControl';\nimport { TimerButton } from './TimerButton';\n\ntype UseCodeInputOptions = {\n length?: number;\n};\n\ntype onCodeEntryFinishedCallback = (code: string) => unknown;\ntype onCodeEntryFinished = (cb: onCodeEntryFinishedCallback) => void;\n\ntype onCodeEntryFinishedActionCallback<R = unknown> = (\n code: string,\n resolve: (params?: R) => Promise<void>,\n reject: (err: unknown) => Promise<void>,\n) => void;\n\ntype UseFieldOTP = <R = unknown>(params: {\n id?: 'code';\n onCodeEntryFinished: onCodeEntryFinishedActionCallback<R>;\n onResendCodeClicked?: React.MouseEventHandler;\n onResolve?: (a?: R) => Promise<void> \| void;\n}) => {\n isLoading: boolean;\n otpControl: ReturnType<typeof useCodeControl>;\n onResendCode: React.MouseEventHandler<HTMLButtonElement> \| undefined;\n onFakeContinue: () => void;\n};\n\nexport const useFieldOTP: UseFieldOTP = params => {\n const card = useCardState();\n const {\n id = 'code',\n onCodeEntryFinished: paramsOnCodeEntryFinished,\n onResendCodeClicked: paramsOnResendCodeClicked,\n onResolve: paramsOnResolve,\n } = params;\n const codeControlState = useFormControl(id, '');\n const codeControl = useCodeControl(codeControlState);\n const status = useLoadingStatus();\n\n const resolve = async (param: any) => {\n // TODO: Localize this\n codeControlState.setSuccess('success');\n await sleep(750);\n await paramsOnResolve?.(param);\n };\n\n const reject = async (err: any) => {\n handleError(err, [codeControlState], card.setError);\n status.setIdle();\n await sleep(750);\n codeControl.reset();\n };\n\n codeControl.onCodeEntryFinished(code => {\n status.setLoading();\n codeControlState.clearFeedback();\n paramsOnCodeEntryFinished(code, resolve, reject);\n });\n\n const onFakeContinue = () => {\n codeControlState.clearFeedback();\n paramsOnCodeEntryFinished('', resolve, reject);\n };\n\n const onResendCode = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n e => {\n codeControl.reset();\n paramsOnResendCodeClicked?.(e);\n },\n [codeControl, paramsOnResendCodeClicked],\n );\n\n return {\n isLoading: status.isLoading,\n otpControl: codeControl,\n onResendCode: paramsOnResendCodeClicked ? onResendCode : undefined,\n onFakeContinue,\n };\n};\n\nconst useCodeControl = (formControl: FormControlState, options?: UseCodeInputOptions) => {\n const userOnCodeEnteredCallback = React.useRef<onCodeEntryFinishedCallback>();\n const defaultValue = formControl.value;\n const { feedback, feedbackType, onChange, clearFeedback } = formControl;\n const { length = 6 } = options \|\| {};\n const [values, setValues] = React.useState(() =>\n defaultValue ? defaultValue.split('').slice(0, length) : Array.from({ length }, () => ''),\n );\n\n const onCodeEntryFinished: onCodeEntryFinished = cb => {\n userOnCodeEnteredCallback.current = cb;\n };\n\n const reset = React.useCallback(() => {\n setValues(Array.from({ length }, () => ''));\n }, [length]);\n\n React.useEffect(() => {\n const len = values.filter(c => c).length;\n if (len === length) {\n const code = values.map(c => c \|\| ' ').join('');\n userOnCodeEnteredCallback.current?.(code);\n } else {\n const code = values.join('');\n onChange?.({ target: { value: code } } as any);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [values.toString()]);\n\n const otpInputProps = { length, values, setValues, feedback, feedbackType, clearFeedback };\n return { otpInputProps, onCodeEntryFinished, reset };\n};\n\nexport type OTPInputProps = {\n label?: string \| LocalizationKey;\n resendButton?: LocalizationKey;\n description?: string \| LocalizationKey;\n isLoading: boolean;\n isDisabled?: boolean;\n onResendCode?: React.MouseEventHandler<HTMLButtonElement>;\n otpControl: ReturnType<typeof useFieldOTP>['otpControl'];\n centerAlign?: boolean;\n};\n\nconst [OTPInputContext, useOTPInputContext] = createContextAndHook<OTPInputProps>('OTPInputContext');\n\nexport const OTPRoot = ({ children, ...props }: PropsWithChildren<OTPInputProps>) => {\n return <OTPInputContext.Provider value={{ value: props }}>{children}</OTPInputContext.Provider>;\n};\n\nexport const OTPResendButton = () => {\n const { resendButton, onResendCode, isLoading, otpControl } = useOTPInputContext();\n\n if (!onResendCode) {\n return null;\n }\n\n return (\n <TimerButton\n elementDescriptor={descriptors.formResendCodeLink}\n onClick={onResendCode}\n startDisabled\n isDisabled={otpControl.otpInputProps.feedbackType === 'success' \|\| isLoading}\n showCounter={otpControl.otpInputProps.feedbackType !== 'success'}\n localizationKey={resendButton}\n />\n );\n};\n\nexport const OTPCodeControl = () => {\n const [disabled, setDisabled] = React.useState(false);\n const { otpControl, isLoading, isDisabled } = useOTPInputContext();\n const { autoFocus: optionAutoFocus } = useAppearance().parsedOptions;\n const { feedback, values, setValues, feedbackType, length } = otpControl.otpInputProps;\n\n React.useEffect(() => {\n if (feedback) {\n setDisabled(true);\n }\n }, [feedback]);\n\n return (\n <Box\n elementDescriptor={descriptors.otpCodeFieldInputContainer}\n sx={{ position: 'relative' }}\n >\n <OTPInput\n autoFocus={optionAutoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n aria-label='Enter verification code'\n aria-required\n maxLength={length}\n inputMode='numeric'\n pattern={REGEXP_ONLY_DIGITS}\n textAlign='center'\n value={values.join('')}\n onChange={newValue => {\n setValues(newValue.split(''));\n }}\n render={({ slots }) => (\n <Flex\n align='center'\n elementDescriptor={descriptors.otpCodeFieldInputs}\n gap={2}\n hasError={feedbackType === 'error'}\n isLoading={isLoading}\n role='group'\n >\n {slots.map((slot, index: number) => (\n <OTPInputSlot\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n elementDescriptor={descriptors.otpCodeFieldInput}\n isDisabled={isDisabled \|\| isLoading \|\| disabled \|\| feedbackType === 'success'}\n hasError={feedbackType === 'error'}\n isSuccessfullyFilled={feedbackType === 'success'}\n {...slot}\n />\n ))}\n </Flex>\n )}\n />\n </Box>\n );\n};\n\nexport function OTPInputSlot(\n props: SlotProps & PropsOfComponent<typeof OTPInputSegment> & { isSuccessfullyFilled?: boolean },\n) {\n const { isSuccessfullyFilled, ...otpProps } = props;\n const { char, hasFakeCaret, isActive, placeholderChar, ...rest } = otpProps;\n return (\n <OTPInputSegment\n data-testid='otp-input-segment'\n {...rest}\n focusRing={isActive}\n variant='default'\n sx={t => ({\n textAlign: 'center',\n ...common.textVariants(t).h2,\n padding: `${t.space.$0x5} 0`,\n boxSizing: 'border-box',\n display: 'flex',\n position: 'relative',\n alignItems: 'center',\n justifyContent: 'center',\n height: t.space.$10,\n width: t.space.$10,\n color: t.colors.$colorInputForeground,\n borderWidth: t.borderWidths.$normal,\n borderRadius: t.radii.$md,\n ...(isSuccessfullyFilled ? { borderColor: t.colors.$success500 } : common.borderColor(t, props)),\n backgroundColor: 'unset',\n [mqu.sm]: {\n height: t.space.$8,\n width: t.space.$8,\n },\n })}\n >\n {char !== null && <div>{char}</div>}\n {hasFakeCaret && <FakeCaret />}\n </OTPInputSegment>\n );\n}\n\nfunction FakeCaret() {\n return (\n <>\n <style>{`\n @keyframes caret-blink-animation {\n 0%, 50% {\n opacity: 1;\n }\n 51%, 100% {\n opacity: 0;\n }\n }\n `}</style>\n <Flex\n align='center'\n justify='center'\n sx={() => ({\n animation: 'caret-blink-animation 1s infinite',\n pointerEvents: 'none',\n position: 'absolute',\n inset: 0,\n })}\n >\n <Box\n sx={t => ({\n height: t.space.$4,\n width: t.space.$px,\n backgroundColor: t.colors.$colorInputForeground,\n })}\n />\n </Flex>\n </>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"CodeControl.js","names":[],"sources":["../../../src/elements/CodeControl.tsx"],"sourcesContent":["import { createContextAndHook } from '@clerk/shared/react';\nimport type { SlotProps } from 'input-otp';\nimport { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp';\nimport type { PropsWithChildren } from 'react';\nimport React, { useCallback } from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Box, descriptors, Flex, OTPInputSegment, useAppearance } from '../customizables';\nimport { useCardState } from '../elements/contexts';\nimport { useLoadingStatus } from '../hooks';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { common, mqu } from '../styledSystem';\nimport { handleError } from '../utils/errorHandler';\nimport { sleep } from '../utils/sleep';\nimport type { FormControlState } from '../utils/useFormControl';\nimport { useFormControl } from '../utils/useFormControl';\nimport { TimerButton } from './TimerButton';\n\ntype UseCodeInputOptions = {\n length?: number;\n};\n\ntype onCodeEntryFinishedCallback = (code: string) => unknown;\ntype onCodeEntryFinished = (cb: onCodeEntryFinishedCallback) => void;\n\ntype onCodeEntryFinishedActionCallback<R = unknown> = (\n code: string,\n resolve: (params?: R) => Promise<void>,\n reject: (err: unknown) => Promise<void>,\n) => void;\n\ntype UseFieldOTP = <R = unknown>(params: {\n id?: 'code';\n onCodeEntryFinished: onCodeEntryFinishedActionCallback<R>;\n onResendCodeClicked?: React.MouseEventHandler;\n onResolve?: (a?: R) => Promise<void> \| void;\n}) => {\n isLoading: boolean;\n otpControl: ReturnType<typeof useCodeControl>;\n onResendCode: React.MouseEventHandler<HTMLButtonElement> \| undefined;\n onFakeContinue: () => void;\n};\n\nexport const useFieldOTP: UseFieldOTP = params => {\n const card = useCardState();\n const {\n id = 'code',\n onCodeEntryFinished: paramsOnCodeEntryFinished,\n onResendCodeClicked: paramsOnResendCodeClicked,\n onResolve: paramsOnResolve,\n } = params;\n const codeControlState = useFormControl(id, '');\n const codeControl = useCodeControl(codeControlState);\n const status = useLoadingStatus();\n\n const resolve = async (param: any) => {\n // TODO: Localize this\n codeControlState.setSuccess('success');\n await sleep(750);\n await paramsOnResolve?.(param);\n };\n\n const reject = async (err: any) => {\n handleError(err, [codeControlState], card.setError);\n status.setIdle();\n await sleep(750);\n codeControl.reset();\n };\n\n codeControl.onCodeEntryFinished(code => {\n status.setLoading();\n codeControlState.clearFeedback();\n paramsOnCodeEntryFinished(code, resolve, reject);\n });\n\n const onFakeContinue = () => {\n codeControlState.clearFeedback();\n paramsOnCodeEntryFinished('', resolve, reject);\n };\n\n const onResendCode = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n e => {\n codeControl.reset();\n paramsOnResendCodeClicked?.(e);\n },\n [codeControl, paramsOnResendCodeClicked],\n );\n\n return {\n isLoading: status.isLoading,\n otpControl: codeControl,\n onResendCode: paramsOnResendCodeClicked ? onResendCode : undefined,\n onFakeContinue,\n };\n};\n\nconst useCodeControl = (formControl: FormControlState, options?: UseCodeInputOptions) => {\n const userOnCodeEnteredCallback = React.useRef<onCodeEntryFinishedCallback>();\n const defaultValue = formControl.value;\n const { feedback, feedbackType, onChange, clearFeedback } = formControl;\n const { length = 6 } = options \|\| {};\n const [values, setValues] = React.useState(() =>\n defaultValue ? defaultValue.split('').slice(0, length) : Array.from({ length }, () => ''),\n );\n\n const onCodeEntryFinished: onCodeEntryFinished = cb => {\n userOnCodeEnteredCallback.current = cb;\n };\n\n const reset = React.useCallback(() => {\n setValues(Array.from({ length }, () => ''));\n }, [length]);\n\n React.useEffect(() => {\n const len = values.filter(c => c).length;\n if (len === length) {\n const code = values.map(c => c \|\| ' ').join('');\n userOnCodeEnteredCallback.current?.(code);\n } else {\n const code = values.join('');\n onChange?.({ target: { value: code } } as any);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [values.toString()]);\n\n const otpInputProps = { length, values, setValues, feedback, feedbackType, clearFeedback };\n return { otpInputProps, onCodeEntryFinished, reset };\n};\n\nexport type OTPInputProps = {\n label?: string \| LocalizationKey;\n resendButton?: LocalizationKey;\n description?: string \| LocalizationKey;\n isLoading: boolean;\n isDisabled?: boolean;\n onResendCode?: React.MouseEventHandler<HTMLButtonElement>;\n otpControl: ReturnType<typeof useFieldOTP>['otpControl'];\n centerAlign?: boolean;\n};\n\nconst [OTPInputContext, useOTPInputContext] = createContextAndHook<OTPInputProps>('OTPInputContext');\n\nexport const OTPRoot = ({ children, ...props }: PropsWithChildren<OTPInputProps>) => {\n return <OTPInputContext.Provider value={{ value: props }}>{children}</OTPInputContext.Provider>;\n};\n\nexport const OTPResendButton = () => {\n const { resendButton, onResendCode, isLoading, otpControl } = useOTPInputContext();\n\n if (!onResendCode) {\n return null;\n }\n\n return (\n <TimerButton\n elementDescriptor={descriptors.formResendCodeLink}\n onClick={onResendCode}\n startDisabled\n isDisabled={otpControl.otpInputProps.feedbackType === 'success' \|\| isLoading}\n showCounter={otpControl.otpInputProps.feedbackType !== 'success'}\n localizationKey={resendButton}\n />\n );\n};\n\nexport const OTPCodeControl = () => {\n const [disabled, setDisabled] = React.useState(false);\n const { otpControl, isLoading, isDisabled } = useOTPInputContext();\n const { autoFocus: optionAutoFocus } = useAppearance().parsedOptions;\n const { feedback, values, setValues, feedbackType, length } = otpControl.otpInputProps;\n\n React.useEffect(() => {\n if (feedback) {\n setDisabled(true);\n }\n }, [feedback]);\n\n return (\n <Box\n elementDescriptor={descriptors.otpCodeFieldInputContainer}\n sx={{ position: 'relative' }}\n >\n <OTPInput\n autoFocus={optionAutoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n aria-label='Enter verification code'\n aria-required\n maxLength={length}\n inputMode='numeric'\n pattern={REGEXP_ONLY_DIGITS}\n textAlign='center'\n value={values.join('')}\n onChange={newValue => {\n setValues(newValue.split(''));\n }}\n render={({ slots }) => (\n <Flex\n align='center'\n elementDescriptor={descriptors.otpCodeFieldInputs}\n gap={2}\n hasError={feedbackType === 'error'}\n isLoading={isLoading}\n role='group'\n >\n {slots.map((slot, index: number) => (\n <OTPInputSlot\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n elementDescriptor={descriptors.otpCodeFieldInput}\n isDisabled={isDisabled \|\| isLoading \|\| disabled \|\| feedbackType === 'success'}\n hasError={feedbackType === 'error'}\n isSuccessfullyFilled={feedbackType === 'success'}\n {...slot}\n />\n ))}\n </Flex>\n )}\n />\n </Box>\n );\n};\n\nexport function OTPInputSlot(\n props: SlotProps & PropsOfComponent<typeof OTPInputSegment> & { isSuccessfullyFilled?: boolean },\n) {\n const { isSuccessfullyFilled, ...otpProps } = props;\n const { char, hasFakeCaret, isActive, placeholderChar, sx, ...rest } = otpProps;\n return (\n <OTPInputSegment\n data-testid='otp-input-segment'\n {...rest}\n focusRing={isActive}\n variant='default'\n sx={[\n t => ({\n textAlign: 'center',\n ...common.textVariants(t).h2,\n padding: `${t.space.$0x5} 0`,\n boxSizing: 'border-box',\n display: 'flex',\n position: 'relative',\n alignItems: 'center',\n justifyContent: 'center',\n height: t.space.$10,\n width: t.space.$10,\n color: t.colors.$colorInputForeground,\n borderWidth: t.borderWidths.$normal,\n borderRadius: t.radii.$md,\n ...(isSuccessfullyFilled ? { borderColor: t.colors.$success500 } : common.borderColor(t, props)),\n backgroundColor: 'unset',\n [mqu.sm]: {\n height: t.space.$8,\n width: t.space.$8,\n },\n }),\n sx,\n ]}\n >\n {char !== null && <div>{char}</div>}\n {hasFakeCaret && <FakeCaret />}\n </OTPInputSegment>\n );\n}\n\nfunction FakeCaret() {\n return (\n <>\n <style>{`\n @keyframes caret-blink-animation {\n 0%, 50% {\n opacity: 1;\n }\n 51%, 100% {\n opacity: 0;\n }\n }\n `}</style>\n <Flex\n align='center'\n justify='center'\n sx={() => ({\n animation: 'caret-blink-animation 1s infinite',\n pointerEvents: 'none',\n position: 'absolute',\n inset: 0,\n })}\n >\n <Box\n sx={t => ({\n height: t.space.$4,\n width: t.space.$px,\n backgroundColor: t.colors.$colorInputForeground,\n })}\n />\n </Flex>\n </>\n );\n}\n"],"mappings":"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"}

package/dist/no-rhc/index.js CHANGED Viewed

@@ -17,7 +17,7 @@ import { ClerkUI } from "./ClerkUI.js";
 */
 const ui = {
 	__brand: UI_BRAND,
-	version: "1.32.1-canary.v20260903011802",
+	version: "1.32.1",
 	ClerkUI
 };

package/dist/oauthDeviceVerification_ui_0bc85e_1.32.1.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(globalThis.rspackChunk_clerk_ui=globalThis.rspackChunk_clerk_ui||[]).push([[9088],{8677(e,i,t){var r=t(9763),o=t(9230),a=t(1046),n=t(8343),l=t(9793);function c({children:e,sx:i,...t}){return(0,r.Y)(o.az,{...t,sx:[e=>({textAlign:"start",borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,borderRadius:e.radii.$lg,overflow:"hidden"}),i],elementDescriptor:a.$z.listGroup,children:e})}function s({children:e,sx:i,...t}){return(0,r.Y)(o.az,{...t,sx:[e=>({padding:e.space.$3,background:n.s.mergedColorsBackground(l.T.setAlpha(e.colors.$colorBackground,1),e.colors.$neutralAlpha50)}),i],elementDescriptor:a.$z.listGroupHeader,children:e})}function d(e){return(0,r.Y)(o.EY,{...e,variant:"subtitle",elementDescriptor:a.$z.listGroupHeaderTitle})}function u({children:e,sx:i,...t}){return(0,r.Y)(o.az,{...t,as:"ul",sx:[e=>({margin:e.sizes.$none,padding:e.sizes.$none,maxBlockSize:"10.9375rem",backgroundColor:e.colors.$colorBackground,overflowY:"auto",...n.s.unstyledScrollbar(e),"--fade-distance":"2.5rem","&::before, &::after":{content:'""',display:"block",position:"sticky",insetInline:0,blockSize:"var(--fade-distance)",pointerEvents:"none",zIndex:1,opacity:0},"&::before":{insetBlockStart:0,marginBlockEnd:"calc(var(--fade-distance) * -1)",background:`linear-gradient(to bottom, ${e.colors.$colorBackground}, transparent)`},"&::after":{insetBlockEnd:0,marginBlockStart:"calc(var(--fade-distance) * -1)",background:`linear-gradient(to top, ${e.colors.$colorBackground}, transparent)`},"@keyframes list-fade-top":{from:{opacity:0},to:{opacity:1}},"@keyframes list-fade-bottom":{from:{opacity:1},to:{opacity:0}},"@supports (animation-timeline: scroll())":{"&::before":{animationName:"list-fade-top",animationDuration:"auto",animationTimingFunction:"linear",animationFillMode:"both",animationTimeline:"scroll(y)",animationRange:"0 var(--fade-distance)"},"&::after":{animationName:"list-fade-bottom",animationDuration:"auto",animationTimingFunction:"linear",animationFillMode:"both",animationTimeline:"scroll(y)",animationRange:"calc(100% - var(--fade-distance)) 100%"}}}),i],elementDescriptor:a.$z.listGroupContent,children:e})}function p({children:e,sx:i,...t}){return(0,r.Y)(o.az,{...t,as:"li",sx:[e=>({display:"flex",alignItems:"baseline",paddingInline:e.space.$3,paddingBlock:e.space.$2,borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,"&::before":{content:'""',display:"inline-block",width:e.space.$1,height:e.space.$1,background:e.colors.$colorMutedForeground,borderRadius:e.radii.$circle,transform:"translateY(-0.1875rem)",marginInlineEnd:e.space.$2,flexShrink:0}}),i],elementDescriptor:a.$z.listGroupItem,children:e})}function h(e){return(0,r.Y)(o.EY,{...e,variant:"subtitle",elementDescriptor:a.$z.listGroupItemLabel})}t.d(i,{Bd:()=>h,HU:()=>p,Hb:()=>s,T$:()=>u,Xd:()=>d,yq:()=>c})},3294(e,i,t){var r=t(9763);t(630);var o=t(9230),a=t(1046),n=t(5033),l=t(8343),c=t(9793);function s({children:e}){return(0,r.Y)(o.so,{justify:"center",align:"center",gap:4,sx:e=>({marginBlockEnd:e.space.$6}),elementDescriptor:a.$z.logoGroup,children:e})}function d({children:e,sx:i,...t}){return(0,r.Y)(o.so,{...t,sx:[{flex:1},i],elementDescriptor:a.$z.logoGroupItem,children:e})}function u({size:e="md",sx:i,children:t}){let n=i=>{let t="sm"===e?i.space.$6:i.space.$12,r="sm"===e?i.space.$3:i.space.$5;return{width:t,height:t,"&& > *":{width:r,height:r}}};return(0,r.Y)(o.az,{sx:e=>[{background:l.s.mergedColorsBackground(c.T.setAlpha(e.colors.$colorBackground,1),e.colors.$neutralAlpha50),borderRadius:e.radii.$circle,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,display:"flex",alignItems:"center",justifyContent:"center"},n,i],elementDescriptor:a.$z.logoGroupItemContainer,children:t})}function p({icon:e=n.A,iconSx:i=e=>({color:e.colors.$primary500}),label:t}){return(0,r.Y)(o.In,{icon:e,sx:i,elementDescriptor:a.$z.logoGroupIcon,role:t?"img":void 0,"aria-label":t,"aria-hidden":!t||void 0})}function h(){return(0,r.Y)(o.az,{as:"svg",fill:"none",viewBox:"0 0 16 2",height:2,"aria-hidden":!0,sx:e=>({color:e.colors.$colorMutedForeground}),elementDescriptor:a.$z.logoGroupSeparator,children:(0,r.Y)("path",{stroke:"currentColor",strokeDasharray:"0.1 4",strokeLinecap:"round",strokeWidth:"2",d:"M1 1h14"})})}t.d(i,{$l:()=>s,E9:()=>h,GC:()=>p,Us:()=>d,t2:()=>u})},7438(e,i,t){var r=t(9763),o=t(630),a=t(9230),n=t(3919),l=t(3693),c=t(8343);function s({options:e,value:i,onChange:t}){let d=(0,o.useRef)(null),u=e.find(e=>e.value===i);return(0,r.FD)(n.l6,{options:e,value:i,onChange:e=>t(e.value),referenceElement:d,renderOption:(e,i,t)=>(0,r.FD)(a.az,{as:"span",sx:e=>({width:"100%",display:"grid",gridTemplateColumns:`${e.sizes.$5} 1fr ${e.sizes.$3}`,columnGap:e.space.$2,paddingInlineStart:e.space.$1,paddingInlineEnd:e.space.$1x5,paddingBlock:e.space.$1,alignItems:"center",borderRadius:e.radii.$md,'&:hover, &[data-focused="true"]':{background:c.s.mutedBackground(e)}}),children:[(0,r.Y)(a._V,{src:e.logoUrl,alt:e.label,sx:e=>({width:e.sizes.$5,height:e.sizes.$5,objectFit:"contain",flexShrink:0,borderRadius:e.radii.$md})}),(0,r.Y)(a.EY,{sx:{flex:1,textAlign:"start",minWidth:0,maxInlineSize:"200px"},truncate:!0,as:"span",variant:"subtitle",children:e.label}),t&&(0,r.Y)(a.In,{icon:l.A,sx:e=>({color:e.colors.$primary500})})]}),children:[(0,r.FD)(n.JC,{ref:d,"aria-haspopup":"listbox",sx:e=>({paddingInline:e.space.$3}),children:[(0,r.Y)(a._V,{src:u?.logoUrl||"",alt:u?.label||"",sx:e=>({width:e.sizes.$5,height:e.sizes.$5,borderRadius:e.radii.$md,objectFit:"contain",flexShrink:0})}),(0,r.Y)(a.EY,{colorScheme:"body",as:"span",truncate:!0,sx:{flex:1,minWidth:0,textAlign:"start"},children:u?.label||"Select an option"})]}),(0,r.Y)(n.UL,{})]})}t.d(i,{X:()=>s})},2736(e,i,t){t.r(i),t.d(i,{OAuthDeviceVerification:()=>Z});var r=t(9763),o=t(1756),a=t(6262),n=t(630),l=t(1868),c=t(9203),s=t(6887),d=t(8342),u=t(9230),p=t(4641),h=t(914),m=t(5402),f=t(7308),b=t(7447),g=t(9642),v=t(9095),Y=t(6674),y=t(6661),D=t(9922),$=t(1637),k=t(8677),z=t(3294),x=t(7438),C=t(9209),S=t(1046),F=t(1008),V=t(747),R=t(3388);let w=/^[BCDFGHJKLMNPQRSTVWXZ]{8}$/,G=/[-\p{White_Space}]/gu;function _(e){return e.toUpperCase().replace(G,"")}function T(e){return w.test(_(e))}function A({slots:e,hasError:i}){return(0,r.Y)(u.so,{sx:e=>({gap:e.space.$1x5}),hasError:i,children:e.map((e,t)=>(0,r.Y)(V.MK,{elementDescriptor:S.$z.otpCodeFieldInput,hasError:i,sx:e=>({width:e.space.$8,height:e.space.$8}),...e},t))})}function E({control:e}){let{autoFocus:i}=(0,F.KP)().parsedOptions,t=(0,R.Wd)(),o=t.hasError??!1;return(0,r.Y)(u.az,{elementDescriptor:S.$z.otpCodeFieldInputContainer,sx:{position:"relative"},children:(0,r.Y)(C.wE,{id:t.id,name:e.name,autoFocus:i,autoComplete:"one-time-code",autoCapitalize:"characters","aria-describedby":t.feedbackMessageId||void 0,"aria-invalid":o,"aria-required":t.isRequired,disabled:t.isDisabled,inputMode:"text",maxLength:8,spellCheck:!1,textAlign:"center",value:e.value,pasteTransformer:_,onBlur:e.onBlur,onFocus:e.onFocus,onChange:i=>{e.clearFeedback(),e.setValue(_(i))},render:({slots:e})=>(0,r.FD)(u.so,{align:"center",elementDescriptor:S.$z.otpCodeFieldInputs,gap:2,hasError:o,justify:"center",role:"group",children:[(0,r.Y)(A,{slots:e.slice(0,4),hasError:o}),(0,r.Y)(u.EY,{"aria-hidden":!0,"data-testid":"device-code-separator",variant:"h2",children:"-"}),(0,r.Y)(A,{slots:e.slice(4),hasError:o})]})})})}let I="offline_access";function B(e){return(0,o.$R)(e)?e.errors?.[0]?.code:void 0}function L({applicationName:e,logoUrl:i,showClerkLogo:t}){let o=i?(0,r.Y)(u._V,{src:i,alt:e,sx:{width:"100%",height:"100%",objectFit:"contain"}}):(0,r.Y)(z.GC,{label:e});return t?(0,r.FD)(z.$l,{children:[(0,r.Y)(z.Us,{justify:"end",children:(0,r.Y)(z.t2,{children:o})}),(0,r.Y)(z.E9,{}),(0,r.Y)(z.Us,{justify:"start",children:(0,r.Y)(z.t2,{children:(0,r.Y)(h.G,{})})})]}):(0,r.Y)(z.$l,{children:(0,r.Y)(z.t2,{children:o})})}let K=(0,c.G)((0,f.dm)(function(){let e=(0,a.ho)(),{user:i}=(0,a.Jd)(),{displayConfig:{applicationName:t,logoImageUrl:o},organizationSettings:c}=(0,l.O)(),{t:p}=(0,s._)(),h=(0,a.Yk)(),[f,y]=(0,n.useState)("entry"),[D,z]=(0,n.useState)(null),[C,S]=(0,n.useState)(null),F=(0,n.useRef)(!1),V=(0,n.useRef)(!1),R=(0,$.tJ)("userCode","",{type:"text",label:(0,d.G)("oauthDeviceVerification.start.userCodeLabel"),transformer:_,isRequired:!0}),w=(0,n.useCallback)(e=>{switch(B(e)){case"resource_not_found":y("entry"),R.setError(p((0,d.G)("oauthDeviceVerification.error.unknownCode")));break;case"oauth_device_code_expired":y("expired");break;case"too_many_requests":y("rateLimited");break;default:y("error")}},[R,p]),G=(0,n.useCallback)(e=>{switch(e.status){case"pending":y("confirmation");break;case"approved":y("alreadyApproved");break;case"denied":y("alreadyDenied");break;case"consumed":y("consumed");break;default:y("error")}},[]),A=(0,n.useCallback)(async e=>{R.clearFeedback(),y("loading");try{let i=await h.lookup({userCode:e});G(i)}catch(e){w(e)}},[R,w,G,h]);(0,n.useEffect)(()=>{if(F.current)return;F.current=!0;let e="u">typeof window&&window.location?new URLSearchParams(window.location.search).get("user_code")??"":"";if(e){if(R.setValue(_(e)),!T(e))return void R.setError(p((0,d.G)("oauthDeviceVerification.error.invalidCode")));A(_(e))}},[R,A,p]);let K=h.data,Z=(K?.scopes.some(e=>"user:org:read"===e.scope)??!1)&&c.enabled,W=Z?(i?.organizationMemberships??[]).map(e=>({value:e.organization.id,label:e.organization.name,logoUrl:e.organization.imageUrl})):[],U=e.session?.lastActiveOrganizationId,N=W.find(e=>e.value===U)?.value??W[0]?.value??null,M=D??N,q=e=>{switch(B(e)){case"oauth_device_code_expired":y("expired");break;case"too_many_requests":y("rateLimited");break;case"bad_request":y("alreadyDecided");break;default:y("error")}},j=async()=>{if(V.current)return;V.current=!0;let e=_(R.value);S("approve");try{await h.approve({userCode:e,organizationId:M??void 0}),y("approved")}catch(e){q(e)}finally{V.current=!1,S(null)}},H=async()=>{if(V.current)return;V.current=!0;let e=_(R.value);S("deny");try{await h.deny({userCode:e}),y("denied")}catch(e){q(e)}finally{V.current=!1,S(null)}};if("loading"===f)return(0,r.FD)(m.Z.Root,{children:[(0,r.Y)(m.Z.Content,{children:(0,r.Y)(v.W,{})}),(0,r.Y)(m.Z.Footer,{})]});if("entry"===f)return(0,r.FD)(m.Z.Root,{children:[(0,r.FD)(m.Z.Content,{children:[(0,r.FD)(g.Y.Root,{showLogo:!0,children:[(0,r.Y)(g.Y.Title,{localizationKey:(0,d.G)("oauthDeviceVerification.start.title")}),(0,r.Y)(g.Y.Subtitle,{localizationKey:(0,d.G)("oauthDeviceVerification.start.subtitle")})]}),(0,r.FD)(b.l.Root,{onSubmit:e=>{e.preventDefault();let i=_(R.value);T(i)?A(i):R.setError(p((0,d.G)("oauthDeviceVerification.error.invalidCode")))},children:[(0,r.Y)(b.l.ControlRow,{elementId:R.id,children:(0,r.Y)(b.l.CommonInputWrapper,{...R.props,children:(0,r.Y)(E,{control:R})})}),(0,r.Y)(b.l.SubmitButton,{localizationKey:(0,d.G)("oauthDeviceVerification.start.action__continue")})]})]}),(0,r.Y)(m.Z.Footer,{})]});if("confirmation"===f&&K){let e=i?.primaryEmailAddress?.emailAddress||i?.primaryPhoneNumber?.phoneNumber||"",a=K.scopes.filter(e=>e.scope!==I).map(e=>({...e,description:"private_metadata"===e.scope?p((0,d.G)("oauthConsent.scopeList.privateMetadata",{applicationName:t})):e.description})),n=K.scopes.some(e=>e.scope===I);return(0,r.FD)(m.Z.Root,{children:[(0,r.FD)(m.Z.Content,{children:[(0,r.FD)(g.Y.Root,{children:[(0,r.Y)(L,{applicationName:K.oauthApplicationName,logoUrl:K.oauthApplicationLogoUrl,showClerkLogo:!!o}),(0,r.Y)(g.Y.Title,{localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.title",{applicationName:K.oauthApplicationName})}),(0,r.Y)(g.Y.Subtitle,{localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.subtitle",{identifier:e})})]}),Z&&W.length>0&&M&&(0,r.Y)(x.X,{options:W,value:M,onChange:z}),(0,r.FD)(k.yq,{children:[(0,r.Y)(k.Hb,{children:(0,r.Y)(k.Xd,{localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.scopeListTitle",{applicationName:K.oauthApplicationName})})}),(0,r.Y)(k.T$,{children:a.map(e=>(0,r.Y)(k.HU,{children:(0,r.Y)(k.Bd,{children:e.description||e.scope})},e.scope))})]}),(0,r.Y)(Y.F,{colorScheme:"warning",children:(0,r.Y)(u.EY,{colorScheme:"warning",variant:"caption",localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.warning")})}),(0,r.FD)(u.xA,{columns:2,gap:3,children:[(0,r.Y)(u.$n,{colorScheme:"secondary",variant:"outline",isLoading:"deny"===C&&h.isSubmitting,isDisabled:h.isSubmitting,onClick:()=>void H(),localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.action__deny")}),(0,r.Y)(u.$n,{isLoading:"approve"===C&&h.isSubmitting,isDisabled:h.isSubmitting,onClick:()=>void j(),localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.action__approve")}),n&&(0,r.Y)(u.EY,{sx:{gridColumn:"span 2"},colorScheme:"secondary",variant:"caption",localizationKey:(0,d.G)("oauthConsent.offlineAccessNotice")})]})]}),(0,r.Y)(m.Z.Footer,{})]})}if("confirmation"===f)return(0,r.FD)(m.Z.Root,{children:[(0,r.Y)(m.Z.Content,{children:(0,r.Y)(v.W,{})}),(0,r.Y)(m.Z.Footer,{})]});let O=function(e){switch(e){case"approved":return{title:"oauthDeviceVerification.status.approvedTitle",subtitle:"oauthDeviceVerification.status.approvedSubtitle",canReset:!1};case"alreadyApproved":return{title:"oauthDeviceVerification.status.alreadyApprovedTitle",subtitle:"oauthDeviceVerification.status.alreadyApprovedSubtitle",canReset:!1};case"denied":return{title:"oauthDeviceVerification.status.deniedTitle",subtitle:"oauthDeviceVerification.status.deniedSubtitle",canReset:!1};case"alreadyDenied":return{title:"oauthDeviceVerification.status.alreadyDeniedTitle",subtitle:"oauthDeviceVerification.status.alreadyDeniedSubtitle",canReset:!1};case"consumed":return{title:"oauthDeviceVerification.status.consumedTitle",subtitle:"oauthDeviceVerification.status.consumedSubtitle",canReset:!1};case"expired":return{title:"oauthDeviceVerification.error.expiredTitle",subtitle:"oauthDeviceVerification.error.expiredSubtitle",canReset:!1};case"rateLimited":return{title:"oauthDeviceVerification.error.rateLimitedTitle",subtitle:"oauthDeviceVerification.error.rateLimitedSubtitle",canReset:!1};case"alreadyDecided":return{title:"oauthDeviceVerification.status.alreadyDecidedTitle",subtitle:"oauthDeviceVerification.status.alreadyDecidedSubtitle",canReset:!1};case"error":return{title:"oauthDeviceVerification.error.genericTitle",subtitle:"oauthDeviceVerification.error.genericSubtitle",canReset:!0}}}(f);return(0,r.FD)(m.Z.Root,{children:[(0,r.Y)(m.Z.Content,{children:(0,r.FD)(u.fv,{gap:6,children:[(0,r.FD)(g.Y.Root,{showLogo:!0,children:[(0,r.Y)(g.Y.Title,{localizationKey:(0,d.G)(O.title)}),(0,r.Y)(g.Y.Subtitle,{localizationKey:(0,d.G)(O.subtitle)})]}),O.canReset&&(0,r.Y)(u.$n,{block:!0,onClick:()=>{V.current=!1,h.reset(),R.setValue(""),R.clearFeedback(),z(null),y("entry")},localizationKey:(0,d.G)("oauthDeviceVerification.action__tryAnotherCode")})]})}),(0,r.Y)(m.Z.Footer,{})]})})),Z=()=>(0,r.Y)(p.n.Root,{flow:"oauthDeviceVerification",children:(0,r.Y)(p.n.Part,{children:(0,r.Y)(y.d,{children:(0,r.Y)(D.q,{children:(0,r.Y)(K,{})})})})})}}]);

package/dist/oauthDeviceVerification_ui_13e6c8_1.32.1.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(globalThis.rspackChunk_clerk_ui=globalThis.rspackChunk_clerk_ui||[]).push([[9088],{8677(e,i,t){var r=t(9763),o=t(9230),a=t(1046),n=t(8343),l=t(9793);function c({children:e,sx:i,...t}){return(0,r.Y)(o.az,{...t,sx:[e=>({textAlign:"start",borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,borderRadius:e.radii.$lg,overflow:"hidden"}),i],elementDescriptor:a.$z.listGroup,children:e})}function s({children:e,sx:i,...t}){return(0,r.Y)(o.az,{...t,sx:[e=>({padding:e.space.$3,background:n.s.mergedColorsBackground(l.T.setAlpha(e.colors.$colorBackground,1),e.colors.$neutralAlpha50)}),i],elementDescriptor:a.$z.listGroupHeader,children:e})}function d(e){return(0,r.Y)(o.EY,{...e,variant:"subtitle",elementDescriptor:a.$z.listGroupHeaderTitle})}function u({children:e,sx:i,...t}){return(0,r.Y)(o.az,{...t,as:"ul",sx:[e=>({margin:e.sizes.$none,padding:e.sizes.$none,maxBlockSize:"10.9375rem",backgroundColor:e.colors.$colorBackground,overflowY:"auto",...n.s.unstyledScrollbar(e),"--fade-distance":"2.5rem","&::before, &::after":{content:'""',display:"block",position:"sticky",insetInline:0,blockSize:"var(--fade-distance)",pointerEvents:"none",zIndex:1,opacity:0},"&::before":{insetBlockStart:0,marginBlockEnd:"calc(var(--fade-distance) * -1)",background:`linear-gradient(to bottom, ${e.colors.$colorBackground}, transparent)`},"&::after":{insetBlockEnd:0,marginBlockStart:"calc(var(--fade-distance) * -1)",background:`linear-gradient(to top, ${e.colors.$colorBackground}, transparent)`},"@keyframes list-fade-top":{from:{opacity:0},to:{opacity:1}},"@keyframes list-fade-bottom":{from:{opacity:1},to:{opacity:0}},"@supports (animation-timeline: scroll())":{"&::before":{animationName:"list-fade-top",animationDuration:"auto",animationTimingFunction:"linear",animationFillMode:"both",animationTimeline:"scroll(y)",animationRange:"0 var(--fade-distance)"},"&::after":{animationName:"list-fade-bottom",animationDuration:"auto",animationTimingFunction:"linear",animationFillMode:"both",animationTimeline:"scroll(y)",animationRange:"calc(100% - var(--fade-distance)) 100%"}}}),i],elementDescriptor:a.$z.listGroupContent,children:e})}function p({children:e,sx:i,...t}){return(0,r.Y)(o.az,{...t,as:"li",sx:[e=>({display:"flex",alignItems:"baseline",paddingInline:e.space.$3,paddingBlock:e.space.$2,borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,"&::before":{content:'""',display:"inline-block",width:e.space.$1,height:e.space.$1,background:e.colors.$colorMutedForeground,borderRadius:e.radii.$circle,transform:"translateY(-0.1875rem)",marginInlineEnd:e.space.$2,flexShrink:0}}),i],elementDescriptor:a.$z.listGroupItem,children:e})}function h(e){return(0,r.Y)(o.EY,{...e,variant:"subtitle",elementDescriptor:a.$z.listGroupItemLabel})}t.d(i,{Bd:()=>h,HU:()=>p,Hb:()=>s,T$:()=>u,Xd:()=>d,yq:()=>c})},3294(e,i,t){var r=t(9763);t(9701);var o=t(9230),a=t(1046),n=t(5033),l=t(8343),c=t(9793);function s({children:e}){return(0,r.Y)(o.so,{justify:"center",align:"center",gap:4,sx:e=>({marginBlockEnd:e.space.$6}),elementDescriptor:a.$z.logoGroup,children:e})}function d({children:e,sx:i,...t}){return(0,r.Y)(o.so,{...t,sx:[{flex:1},i],elementDescriptor:a.$z.logoGroupItem,children:e})}function u({size:e="md",sx:i,children:t}){let n=i=>{let t="sm"===e?i.space.$6:i.space.$12,r="sm"===e?i.space.$3:i.space.$5;return{width:t,height:t,"&& > *":{width:r,height:r}}};return(0,r.Y)(o.az,{sx:e=>[{background:l.s.mergedColorsBackground(c.T.setAlpha(e.colors.$colorBackground,1),e.colors.$neutralAlpha50),borderRadius:e.radii.$circle,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,display:"flex",alignItems:"center",justifyContent:"center"},n,i],elementDescriptor:a.$z.logoGroupItemContainer,children:t})}function p({icon:e=n.A,iconSx:i=e=>({color:e.colors.$primary500}),label:t}){return(0,r.Y)(o.In,{icon:e,sx:i,elementDescriptor:a.$z.logoGroupIcon,role:t?"img":void 0,"aria-label":t,"aria-hidden":!t||void 0})}function h(){return(0,r.Y)(o.az,{as:"svg",fill:"none",viewBox:"0 0 16 2",height:2,"aria-hidden":!0,sx:e=>({color:e.colors.$colorMutedForeground}),elementDescriptor:a.$z.logoGroupSeparator,children:(0,r.Y)("path",{stroke:"currentColor",strokeDasharray:"0.1 4",strokeLinecap:"round",strokeWidth:"2",d:"M1 1h14"})})}t.d(i,{$l:()=>s,E9:()=>h,GC:()=>p,Us:()=>d,t2:()=>u})},7438(e,i,t){var r=t(9763),o=t(9701),a=t(9230),n=t(3919),l=t(3693),c=t(8343);function s({options:e,value:i,onChange:t}){let d=(0,o.useRef)(null),u=e.find(e=>e.value===i);return(0,r.FD)(n.l6,{options:e,value:i,onChange:e=>t(e.value),referenceElement:d,renderOption:(e,i,t)=>(0,r.FD)(a.az,{as:"span",sx:e=>({width:"100%",display:"grid",gridTemplateColumns:`${e.sizes.$5} 1fr ${e.sizes.$3}`,columnGap:e.space.$2,paddingInlineStart:e.space.$1,paddingInlineEnd:e.space.$1x5,paddingBlock:e.space.$1,alignItems:"center",borderRadius:e.radii.$md,'&:hover, &[data-focused="true"]':{background:c.s.mutedBackground(e)}}),children:[(0,r.Y)(a._V,{src:e.logoUrl,alt:e.label,sx:e=>({width:e.sizes.$5,height:e.sizes.$5,objectFit:"contain",flexShrink:0,borderRadius:e.radii.$md})}),(0,r.Y)(a.EY,{sx:{flex:1,textAlign:"start",minWidth:0,maxInlineSize:"200px"},truncate:!0,as:"span",variant:"subtitle",children:e.label}),t&&(0,r.Y)(a.In,{icon:l.A,sx:e=>({color:e.colors.$primary500})})]}),children:[(0,r.FD)(n.JC,{ref:d,"aria-haspopup":"listbox",sx:e=>({paddingInline:e.space.$3}),children:[(0,r.Y)(a._V,{src:u?.logoUrl||"",alt:u?.label||"",sx:e=>({width:e.sizes.$5,height:e.sizes.$5,borderRadius:e.radii.$md,objectFit:"contain",flexShrink:0})}),(0,r.Y)(a.EY,{colorScheme:"body",as:"span",truncate:!0,sx:{flex:1,minWidth:0,textAlign:"start"},children:u?.label||"Select an option"})]}),(0,r.Y)(n.UL,{})]})}t.d(i,{X:()=>s})},2736(e,i,t){t.r(i),t.d(i,{OAuthDeviceVerification:()=>Z});var r=t(9763),o=t(1756),a=t(6262),n=t(9701),l=t(1868),c=t(9203),s=t(6887),d=t(8342),u=t(9230),p=t(4641),h=t(914),m=t(5402),f=t(7308),b=t(7447),g=t(9642),v=t(9095),Y=t(6674),y=t(6661),D=t(9922),$=t(1637),k=t(8677),z=t(3294),x=t(7438),C=t(9209),S=t(1046),F=t(1008),V=t(747),R=t(3388);let w=/^[BCDFGHJKLMNPQRSTVWXZ]{8}$/,G=/[-\p{White_Space}]/gu;function _(e){return e.toUpperCase().replace(G,"")}function T(e){return w.test(_(e))}function A({slots:e,hasError:i}){return(0,r.Y)(u.so,{sx:e=>({gap:e.space.$1x5}),hasError:i,children:e.map((e,t)=>(0,r.Y)(V.MK,{elementDescriptor:S.$z.otpCodeFieldInput,hasError:i,sx:e=>({width:e.space.$8,height:e.space.$8}),...e},t))})}function E({control:e}){let{autoFocus:i}=(0,F.KP)().parsedOptions,t=(0,R.Wd)(),o=t.hasError??!1;return(0,r.Y)(u.az,{elementDescriptor:S.$z.otpCodeFieldInputContainer,sx:{position:"relative"},children:(0,r.Y)(C.wE,{id:t.id,name:e.name,autoFocus:i,autoComplete:"one-time-code",autoCapitalize:"characters","aria-describedby":t.feedbackMessageId||void 0,"aria-invalid":o,"aria-required":t.isRequired,disabled:t.isDisabled,inputMode:"text",maxLength:8,spellCheck:!1,textAlign:"center",value:e.value,pasteTransformer:_,onBlur:e.onBlur,onFocus:e.onFocus,onChange:i=>{e.clearFeedback(),e.setValue(_(i))},render:({slots:e})=>(0,r.FD)(u.so,{align:"center",elementDescriptor:S.$z.otpCodeFieldInputs,gap:2,hasError:o,justify:"center",role:"group",children:[(0,r.Y)(A,{slots:e.slice(0,4),hasError:o}),(0,r.Y)(u.EY,{"aria-hidden":!0,"data-testid":"device-code-separator",variant:"h2",children:"-"}),(0,r.Y)(A,{slots:e.slice(4),hasError:o})]})})})}let I="offline_access";function B(e){return(0,o.$R)(e)?e.errors?.[0]?.code:void 0}function L({applicationName:e,logoUrl:i,showClerkLogo:t}){let o=i?(0,r.Y)(u._V,{src:i,alt:e,sx:{width:"100%",height:"100%",objectFit:"contain"}}):(0,r.Y)(z.GC,{label:e});return t?(0,r.FD)(z.$l,{children:[(0,r.Y)(z.Us,{justify:"end",children:(0,r.Y)(z.t2,{children:o})}),(0,r.Y)(z.E9,{}),(0,r.Y)(z.Us,{justify:"start",children:(0,r.Y)(z.t2,{children:(0,r.Y)(h.G,{})})})]}):(0,r.Y)(z.$l,{children:(0,r.Y)(z.t2,{children:o})})}let K=(0,c.G)((0,f.dm)(function(){let e=(0,a.ho)(),{user:i}=(0,a.Jd)(),{displayConfig:{applicationName:t,logoImageUrl:o},organizationSettings:c}=(0,l.O)(),{t:p}=(0,s._)(),h=(0,a.Yk)(),[f,y]=(0,n.useState)("entry"),[D,z]=(0,n.useState)(null),[C,S]=(0,n.useState)(null),F=(0,n.useRef)(!1),V=(0,n.useRef)(!1),R=(0,$.tJ)("userCode","",{type:"text",label:(0,d.G)("oauthDeviceVerification.start.userCodeLabel"),transformer:_,isRequired:!0}),w=(0,n.useCallback)(e=>{switch(B(e)){case"resource_not_found":y("entry"),R.setError(p((0,d.G)("oauthDeviceVerification.error.unknownCode")));break;case"oauth_device_code_expired":y("expired");break;case"too_many_requests":y("rateLimited");break;default:y("error")}},[R,p]),G=(0,n.useCallback)(e=>{switch(e.status){case"pending":y("confirmation");break;case"approved":y("alreadyApproved");break;case"denied":y("alreadyDenied");break;case"consumed":y("consumed");break;default:y("error")}},[]),A=(0,n.useCallback)(async e=>{R.clearFeedback(),y("loading");try{let i=await h.lookup({userCode:e});G(i)}catch(e){w(e)}},[R,w,G,h]);(0,n.useEffect)(()=>{if(F.current)return;F.current=!0;let e="u">typeof window&&window.location?new URLSearchParams(window.location.search).get("user_code")??"":"";if(e){if(R.setValue(_(e)),!T(e))return void R.setError(p((0,d.G)("oauthDeviceVerification.error.invalidCode")));A(_(e))}},[R,A,p]);let K=h.data,Z=(K?.scopes.some(e=>"user:org:read"===e.scope)??!1)&&c.enabled,W=Z?(i?.organizationMemberships??[]).map(e=>({value:e.organization.id,label:e.organization.name,logoUrl:e.organization.imageUrl})):[],U=e.session?.lastActiveOrganizationId,N=W.find(e=>e.value===U)?.value??W[0]?.value??null,M=D??N,q=e=>{switch(B(e)){case"oauth_device_code_expired":y("expired");break;case"too_many_requests":y("rateLimited");break;case"bad_request":y("alreadyDecided");break;default:y("error")}},j=async()=>{if(V.current)return;V.current=!0;let e=_(R.value);S("approve");try{await h.approve({userCode:e,organizationId:M??void 0}),y("approved")}catch(e){q(e)}finally{V.current=!1,S(null)}},H=async()=>{if(V.current)return;V.current=!0;let e=_(R.value);S("deny");try{await h.deny({userCode:e}),y("denied")}catch(e){q(e)}finally{V.current=!1,S(null)}};if("loading"===f)return(0,r.FD)(m.Z.Root,{children:[(0,r.Y)(m.Z.Content,{children:(0,r.Y)(v.W,{})}),(0,r.Y)(m.Z.Footer,{})]});if("entry"===f)return(0,r.FD)(m.Z.Root,{children:[(0,r.FD)(m.Z.Content,{children:[(0,r.FD)(g.Y.Root,{showLogo:!0,children:[(0,r.Y)(g.Y.Title,{localizationKey:(0,d.G)("oauthDeviceVerification.start.title")}),(0,r.Y)(g.Y.Subtitle,{localizationKey:(0,d.G)("oauthDeviceVerification.start.subtitle")})]}),(0,r.FD)(b.l.Root,{onSubmit:e=>{e.preventDefault();let i=_(R.value);T(i)?A(i):R.setError(p((0,d.G)("oauthDeviceVerification.error.invalidCode")))},children:[(0,r.Y)(b.l.ControlRow,{elementId:R.id,children:(0,r.Y)(b.l.CommonInputWrapper,{...R.props,children:(0,r.Y)(E,{control:R})})}),(0,r.Y)(b.l.SubmitButton,{localizationKey:(0,d.G)("oauthDeviceVerification.start.action__continue")})]})]}),(0,r.Y)(m.Z.Footer,{})]});if("confirmation"===f&&K){let e=i?.primaryEmailAddress?.emailAddress||i?.primaryPhoneNumber?.phoneNumber||"",a=K.scopes.filter(e=>e.scope!==I).map(e=>({...e,description:"private_metadata"===e.scope?p((0,d.G)("oauthConsent.scopeList.privateMetadata",{applicationName:t})):e.description})),n=K.scopes.some(e=>e.scope===I);return(0,r.FD)(m.Z.Root,{children:[(0,r.FD)(m.Z.Content,{children:[(0,r.FD)(g.Y.Root,{children:[(0,r.Y)(L,{applicationName:K.oauthApplicationName,logoUrl:K.oauthApplicationLogoUrl,showClerkLogo:!!o}),(0,r.Y)(g.Y.Title,{localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.title",{applicationName:K.oauthApplicationName})}),(0,r.Y)(g.Y.Subtitle,{localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.subtitle",{identifier:e})})]}),Z&&W.length>0&&M&&(0,r.Y)(x.X,{options:W,value:M,onChange:z}),(0,r.FD)(k.yq,{children:[(0,r.Y)(k.Hb,{children:(0,r.Y)(k.Xd,{localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.scopeListTitle",{applicationName:K.oauthApplicationName})})}),(0,r.Y)(k.T$,{children:a.map(e=>(0,r.Y)(k.HU,{children:(0,r.Y)(k.Bd,{children:e.description||e.scope})},e.scope))})]}),(0,r.Y)(Y.F,{colorScheme:"warning",children:(0,r.Y)(u.EY,{colorScheme:"warning",variant:"caption",localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.warning")})}),(0,r.FD)(u.xA,{columns:2,gap:3,children:[(0,r.Y)(u.$n,{colorScheme:"secondary",variant:"outline",isLoading:"deny"===C&&h.isSubmitting,isDisabled:h.isSubmitting,onClick:()=>void H(),localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.action__deny")}),(0,r.Y)(u.$n,{isLoading:"approve"===C&&h.isSubmitting,isDisabled:h.isSubmitting,onClick:()=>void j(),localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.action__approve")}),n&&(0,r.Y)(u.EY,{sx:{gridColumn:"span 2"},colorScheme:"secondary",variant:"caption",localizationKey:(0,d.G)("oauthConsent.offlineAccessNotice")})]})]}),(0,r.Y)(m.Z.Footer,{})]})}if("confirmation"===f)return(0,r.FD)(m.Z.Root,{children:[(0,r.Y)(m.Z.Content,{children:(0,r.Y)(v.W,{})}),(0,r.Y)(m.Z.Footer,{})]});let O=function(e){switch(e){case"approved":return{title:"oauthDeviceVerification.status.approvedTitle",subtitle:"oauthDeviceVerification.status.approvedSubtitle",canReset:!1};case"alreadyApproved":return{title:"oauthDeviceVerification.status.alreadyApprovedTitle",subtitle:"oauthDeviceVerification.status.alreadyApprovedSubtitle",canReset:!1};case"denied":return{title:"oauthDeviceVerification.status.deniedTitle",subtitle:"oauthDeviceVerification.status.deniedSubtitle",canReset:!1};case"alreadyDenied":return{title:"oauthDeviceVerification.status.alreadyDeniedTitle",subtitle:"oauthDeviceVerification.status.alreadyDeniedSubtitle",canReset:!1};case"consumed":return{title:"oauthDeviceVerification.status.consumedTitle",subtitle:"oauthDeviceVerification.status.consumedSubtitle",canReset:!1};case"expired":return{title:"oauthDeviceVerification.error.expiredTitle",subtitle:"oauthDeviceVerification.error.expiredSubtitle",canReset:!1};case"rateLimited":return{title:"oauthDeviceVerification.error.rateLimitedTitle",subtitle:"oauthDeviceVerification.error.rateLimitedSubtitle",canReset:!1};case"alreadyDecided":return{title:"oauthDeviceVerification.status.alreadyDecidedTitle",subtitle:"oauthDeviceVerification.status.alreadyDecidedSubtitle",canReset:!1};case"error":return{title:"oauthDeviceVerification.error.genericTitle",subtitle:"oauthDeviceVerification.error.genericSubtitle",canReset:!0}}}(f);return(0,r.FD)(m.Z.Root,{children:[(0,r.Y)(m.Z.Content,{children:(0,r.FD)(u.fv,{gap:6,children:[(0,r.FD)(g.Y.Root,{showLogo:!0,children:[(0,r.Y)(g.Y.Title,{localizationKey:(0,d.G)(O.title)}),(0,r.Y)(g.Y.Subtitle,{localizationKey:(0,d.G)(O.subtitle)})]}),O.canReset&&(0,r.Y)(u.$n,{block:!0,onClick:()=>{V.current=!1,h.reset(),R.setValue(""),R.clearFeedback(),z(null),y("entry")},localizationKey:(0,d.G)("oauthDeviceVerification.action__tryAnotherCode")})]})}),(0,r.Y)(m.Z.Footer,{})]})})),Z=()=>(0,r.Y)(p.n.Root,{flow:"oauthDeviceVerification",children:(0,r.Y)(p.n.Part,{children:(0,r.Y)(y.d,{children:(0,r.Y)(D.q,{children:(0,r.Y)(K,{})})})})})}}]);

package/dist/oauthDeviceVerification_ui_5a232d_1.32.1.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(globalThis.rspackChunk_clerk_ui=globalThis.rspackChunk_clerk_ui||[]).push([[9088],{38677(e,i,t){var r=t(59763),o=t(39230),a=t(61046),n=t(8343),l=t(89793);function c(e){let{children:i,sx:t,...n}=e;return(0,r.Y)(o.az,{...n,sx:[e=>({textAlign:"start",borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,borderRadius:e.radii.$lg,overflow:"hidden"}),t],elementDescriptor:a.$z.listGroup,children:i})}function s(e){let{children:i,sx:t,...c}=e;return(0,r.Y)(o.az,{...c,sx:[e=>({padding:e.space.$3,background:n.s.mergedColorsBackground(l.T.setAlpha(e.colors.$colorBackground,1),e.colors.$neutralAlpha50)}),t],elementDescriptor:a.$z.listGroupHeader,children:i})}function d(e){return(0,r.Y)(o.EY,{...e,variant:"subtitle",elementDescriptor:a.$z.listGroupHeaderTitle})}function u(e){let{children:i,sx:t,...l}=e;return(0,r.Y)(o.az,{...l,as:"ul",sx:[e=>({margin:e.sizes.$none,padding:e.sizes.$none,maxBlockSize:"10.9375rem",backgroundColor:e.colors.$colorBackground,overflowY:"auto",...n.s.unstyledScrollbar(e),"--fade-distance":"2.5rem","&::before, &::after":{content:'""',display:"block",position:"sticky",insetInline:0,blockSize:"var(--fade-distance)",pointerEvents:"none",zIndex:1,opacity:0},"&::before":{insetBlockStart:0,marginBlockEnd:"calc(var(--fade-distance) * -1)",background:"linear-gradient(to bottom, ".concat(e.colors.$colorBackground,", transparent)")},"&::after":{insetBlockEnd:0,marginBlockStart:"calc(var(--fade-distance) * -1)",background:"linear-gradient(to top, ".concat(e.colors.$colorBackground,", transparent)")},"@keyframes list-fade-top":{from:{opacity:0},to:{opacity:1}},"@keyframes list-fade-bottom":{from:{opacity:1},to:{opacity:0}},"@supports (animation-timeline: scroll())":{"&::before":{animationName:"list-fade-top",animationDuration:"auto",animationTimingFunction:"linear",animationFillMode:"both",animationTimeline:"scroll(y)",animationRange:"0 var(--fade-distance)"},"&::after":{animationName:"list-fade-bottom",animationDuration:"auto",animationTimingFunction:"linear",animationFillMode:"both",animationTimeline:"scroll(y)",animationRange:"calc(100% - var(--fade-distance)) 100%"}}}),t],elementDescriptor:a.$z.listGroupContent,children:i})}function p(e){let{children:i,sx:t,...n}=e;return(0,r.Y)(o.az,{...n,as:"li",sx:[e=>({display:"flex",alignItems:"baseline",paddingInline:e.space.$3,paddingBlock:e.space.$2,borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha100,"&::before":{content:'""',display:"inline-block",width:e.space.$1,height:e.space.$1,background:e.colors.$colorMutedForeground,borderRadius:e.radii.$circle,transform:"translateY(-0.1875rem)",marginInlineEnd:e.space.$2,flexShrink:0}}),t],elementDescriptor:a.$z.listGroupItem,children:i})}function h(e){return(0,r.Y)(o.EY,{...e,variant:"subtitle",elementDescriptor:a.$z.listGroupItemLabel})}t.d(i,{Bd:()=>h,HU:()=>p,Hb:()=>s,T$:()=>u,Xd:()=>d,yq:()=>c})},93294(e,i,t){var r=t(59763);t(59701);var o=t(39230),a=t(61046),n=t(55033),l=t(8343),c=t(89793);function s(e){let{children:i}=e;return(0,r.Y)(o.so,{justify:"center",align:"center",gap:4,sx:e=>({marginBlockEnd:e.space.$6}),elementDescriptor:a.$z.logoGroup,children:i})}function d(e){let{children:i,sx:t,...n}=e;return(0,r.Y)(o.so,{...n,sx:[{flex:1},t],elementDescriptor:a.$z.logoGroupItem,children:i})}function u(e){let{size:i="md",sx:t,children:n}=e,s=e=>{let t="sm"===i?e.space.$6:e.space.$12,r="sm"===i?e.space.$3:e.space.$5;return{width:t,height:t,"&& > *":{width:r,height:r}}};return(0,r.Y)(o.az,{sx:e=>[{background:l.s.mergedColorsBackground(c.T.setAlpha(e.colors.$colorBackground,1),e.colors.$neutralAlpha50),borderRadius:e.radii.$circle,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,display:"flex",alignItems:"center",justifyContent:"center"},s,t],elementDescriptor:a.$z.logoGroupItemContainer,children:n})}function p(e){let{icon:i=n.A,iconSx:t=e=>({color:e.colors.$primary500}),label:l}=e;return(0,r.Y)(o.In,{icon:i,sx:t,elementDescriptor:a.$z.logoGroupIcon,role:l?"img":void 0,"aria-label":l,"aria-hidden":!l||void 0})}function h(){return(0,r.Y)(o.az,{as:"svg",fill:"none",viewBox:"0 0 16 2",height:2,"aria-hidden":!0,sx:e=>({color:e.colors.$colorMutedForeground}),elementDescriptor:a.$z.logoGroupSeparator,children:(0,r.Y)("path",{stroke:"currentColor",strokeDasharray:"0.1 4",strokeLinecap:"round",strokeWidth:"2",d:"M1 1h14"})})}t.d(i,{$l:()=>s,E9:()=>h,GC:()=>p,Us:()=>d,t2:()=>u})},87438(e,i,t){t(42949),t(49678);var r=t(59763),o=t(59701),a=t(39230),n=t(63919),l=t(53693),c=t(8343);function s(e){let{options:i,value:t,onChange:s}=e,d=(0,o.useRef)(null),u=i.find(e=>e.value===t);return(0,r.FD)(n.l6,{options:i,value:t,onChange:e=>s(e.value),referenceElement:d,renderOption:(e,i,t)=>(0,r.FD)(a.az,{as:"span",sx:e=>({width:"100%",display:"grid",gridTemplateColumns:"".concat(e.sizes.$5," 1fr ").concat(e.sizes.$3),columnGap:e.space.$2,paddingInlineStart:e.space.$1,paddingInlineEnd:e.space.$1x5,paddingBlock:e.space.$1,alignItems:"center",borderRadius:e.radii.$md,'&:hover, &[data-focused="true"]':{background:c.s.mutedBackground(e)}}),children:[(0,r.Y)(a._V,{src:e.logoUrl,alt:e.label,sx:e=>({width:e.sizes.$5,height:e.sizes.$5,objectFit:"contain",flexShrink:0,borderRadius:e.radii.$md})}),(0,r.Y)(a.EY,{sx:{flex:1,textAlign:"start",minWidth:0,maxInlineSize:"200px"},truncate:!0,as:"span",variant:"subtitle",children:e.label}),t&&(0,r.Y)(a.In,{icon:l.A,sx:e=>({color:e.colors.$primary500})})]}),children:[(0,r.FD)(n.JC,{ref:d,"aria-haspopup":"listbox",sx:e=>({paddingInline:e.space.$3}),children:[(0,r.Y)(a._V,{src:(null==u?void 0:u.logoUrl)||"",alt:(null==u?void 0:u.label)||"",sx:e=>({width:e.sizes.$5,height:e.sizes.$5,borderRadius:e.radii.$md,objectFit:"contain",flexShrink:0})}),(0,r.Y)(a.EY,{colorScheme:"body",as:"span",truncate:!0,sx:{flex:1,minWidth:0,textAlign:"start"},children:(null==u?void 0:u.label)||"Select an option"})]}),(0,r.Y)(n.UL,{})]})}t.d(i,{X:()=>s})},90355(e,i,t){t.r(i),t.d(i,{OAuthDeviceVerification:()=>Z}),t(36395),t(42949),t(12021),t(37891),t(49678),t(18723);var r=t(59763),o=t(71756),a=t(46262),n=t(59701),l=t(91868),c=t(9203),s=t(66887),d=t(78342),u=t(39230),p=t(34641),h=t(30914),m=t(35402),f=t(17308),b=t(17447),v=t(39642),g=t(89095),Y=t(96674),y=t(66661),D=t(59922),$=t(51637),k=t(38677),z=t(93294),x=t(87438),C=t(19209),F=t(61046),S=t(11008),V=t(70747),R=t(13388);t(20498),t(40807),t(85281),t(96954),t(38978),t(52205),t(40768),t(76235);let w=/^[BCDFGHJKLMNPQRSTVWXZ]{8}$/,G=RegExp("[-\\u0009-\\u000D\\u0020\\u0085\\u00A0\\u1680\\u2000-\\u200A\\u2028-\\u2029\\u202F\\u205F\\u3000]","gu");function _(e){return e.toUpperCase().replace(G,"")}function A(e){return w.test(_(e))}function T(e){let{slots:i,hasError:t}=e;return(0,r.Y)(u.so,{sx:e=>({gap:e.space.$1x5}),hasError:t,children:i.map((e,i)=>(0,r.Y)(V.MK,{elementDescriptor:F.$z.otpCodeFieldInput,hasError:t,sx:e=>({width:e.space.$8,height:e.space.$8}),...e},i))})}function E(e){var i;let{control:t}=e,{autoFocus:o}=(0,S.KP)().parsedOptions,a=(0,R.Wd)(),n=null!=(i=a.hasError)&&i;return(0,r.Y)(u.az,{elementDescriptor:F.$z.otpCodeFieldInputContainer,sx:{position:"relative"},children:(0,r.Y)(C.wE,{id:a.id,name:t.name,autoFocus:o,autoComplete:"one-time-code",autoCapitalize:"characters","aria-describedby":a.feedbackMessageId||void 0,"aria-invalid":n,"aria-required":a.isRequired,disabled:a.isDisabled,inputMode:"text",maxLength:8,spellCheck:!1,textAlign:"center",value:t.value,pasteTransformer:_,onBlur:t.onBlur,onFocus:t.onFocus,onChange:e=>{t.clearFeedback(),t.setValue(_(e))},render:e=>{let{slots:i}=e;return(0,r.FD)(u.so,{align:"center",elementDescriptor:F.$z.otpCodeFieldInputs,gap:2,hasError:n,justify:"center",role:"group",children:[(0,r.Y)(T,{slots:i.slice(0,4),hasError:n}),(0,r.Y)(u.EY,{"aria-hidden":!0,"data-testid":"device-code-separator",variant:"h2",children:"-"}),(0,r.Y)(T,{slots:i.slice(4),hasError:n})]})}})})}let I="offline_access";function B(e){var i,t;return(0,o.$R)(e)?null==(t=e.errors)||null==(i=t[0])?void 0:i.code:void 0}function L(e){let{applicationName:i,logoUrl:t,showClerkLogo:o}=e,a=t?(0,r.Y)(u._V,{src:t,alt:i,sx:{width:"100%",height:"100%",objectFit:"contain"}}):(0,r.Y)(z.GC,{label:i});return o?(0,r.FD)(z.$l,{children:[(0,r.Y)(z.Us,{justify:"end",children:(0,r.Y)(z.t2,{children:a})}),(0,r.Y)(z.E9,{}),(0,r.Y)(z.Us,{justify:"start",children:(0,r.Y)(z.t2,{children:(0,r.Y)(h.G,{})})})]}):(0,r.Y)(z.$l,{children:(0,r.Y)(z.t2,{children:a})})}let K=(0,c.G)((0,f.dm)(function(){var e,i,t,o,c,p,h,f,y;let D=(0,a.ho)(),{user:z}=(0,a.Jd)(),{displayConfig:{applicationName:C,logoImageUrl:F},organizationSettings:S}=(0,l.O)(),{t:V}=(0,s._)(),R=(0,a.Yk)(),[w,G]=(0,n.useState)("entry"),[T,K]=(0,n.useState)(null),[Z,U]=(0,n.useState)(null),W=(0,n.useRef)(!1),N=(0,n.useRef)(!1),M=(0,$.tJ)("userCode","",{type:"text",label:(0,d.G)("oauthDeviceVerification.start.userCodeLabel"),transformer:_,isRequired:!0}),q=(0,n.useCallback)(e=>{switch(B(e)){case"resource_not_found":G("entry"),M.setError(V((0,d.G)("oauthDeviceVerification.error.unknownCode")));break;case"oauth_device_code_expired":G("expired");break;case"too_many_requests":G("rateLimited");break;default:G("error")}},[M,V]),j=(0,n.useCallback)(e=>{switch(e.status){case"pending":G("confirmation");break;case"approved":G("alreadyApproved");break;case"denied":G("alreadyDenied");break;case"consumed":G("consumed");break;default:G("error")}},[]),H=(0,n.useCallback)(async e=>{M.clearFeedback(),G("loading");try{let i=await R.lookup({userCode:e});j(i)}catch(e){q(e)}},[M,q,j,R]);(0,n.useEffect)(()=>{var e;if(W.current)return;W.current=!0;let i="u">typeof window&&window.location&&null!=(e=new URLSearchParams(window.location.search).get("user_code"))?e:"";if(i){if(M.setValue(_(i)),!A(i))return void M.setError(V((0,d.G)("oauthDeviceVerification.error.invalidCode")));H(_(i))}},[M,H,V]);let O=R.data,P=null!=(e=null==O?void 0:O.scopes.some(e=>"user:org:read"===e.scope))&&e&&S.enabled,X=P?(null!=(i=null==z?void 0:z.organizationMemberships)?i:[]).map(e=>({value:e.organization.id,label:e.organization.name,logoUrl:e.organization.imageUrl})):[],J=null==(c=D.session)?void 0:c.lastActiveOrganizationId,Q=null!=(t=null!=(o=null==(p=X.find(e=>e.value===J))?void 0:p.value)?o:null==(h=X[0])?void 0:h.value)?t:null,ee=null!=T?T:Q,ei=e=>{switch(B(e)){case"oauth_device_code_expired":G("expired");break;case"too_many_requests":G("rateLimited");break;case"bad_request":G("alreadyDecided");break;default:G("error")}},et=async()=>{if(N.current)return;N.current=!0;let e=_(M.value);U("approve");try{await R.approve({userCode:e,organizationId:null!=ee?ee:void 0}),G("approved")}catch(e){ei(e)}finally{N.current=!1,U(null)}},er=async()=>{if(N.current)return;N.current=!0;let e=_(M.value);U("deny");try{await R.deny({userCode:e}),G("denied")}catch(e){ei(e)}finally{N.current=!1,U(null)}};if("loading"===w)return(0,r.FD)(m.Z.Root,{children:[(0,r.Y)(m.Z.Content,{children:(0,r.Y)(g.W,{})}),(0,r.Y)(m.Z.Footer,{})]});if("entry"===w)return(0,r.FD)(m.Z.Root,{children:[(0,r.FD)(m.Z.Content,{children:[(0,r.FD)(v.Y.Root,{showLogo:!0,children:[(0,r.Y)(v.Y.Title,{localizationKey:(0,d.G)("oauthDeviceVerification.start.title")}),(0,r.Y)(v.Y.Subtitle,{localizationKey:(0,d.G)("oauthDeviceVerification.start.subtitle")})]}),(0,r.FD)(b.l.Root,{onSubmit:e=>{e.preventDefault();let i=_(M.value);A(i)?H(i):M.setError(V((0,d.G)("oauthDeviceVerification.error.invalidCode")))},children:[(0,r.Y)(b.l.ControlRow,{elementId:M.id,children:(0,r.Y)(b.l.CommonInputWrapper,{...M.props,children:(0,r.Y)(E,{control:M})})}),(0,r.Y)(b.l.SubmitButton,{localizationKey:(0,d.G)("oauthDeviceVerification.start.action__continue")})]})]}),(0,r.Y)(m.Z.Footer,{})]});if("confirmation"===w&&O){let e=(null==z||null==(f=z.primaryEmailAddress)?void 0:f.emailAddress)||(null==z||null==(y=z.primaryPhoneNumber)?void 0:y.phoneNumber)||"",i=O.scopes.filter(e=>e.scope!==I).map(e=>({...e,description:"private_metadata"===e.scope?V((0,d.G)("oauthConsent.scopeList.privateMetadata",{applicationName:C})):e.description})),t=O.scopes.some(e=>e.scope===I);return(0,r.FD)(m.Z.Root,{children:[(0,r.FD)(m.Z.Content,{children:[(0,r.FD)(v.Y.Root,{children:[(0,r.Y)(L,{applicationName:O.oauthApplicationName,logoUrl:O.oauthApplicationLogoUrl,showClerkLogo:!!F}),(0,r.Y)(v.Y.Title,{localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.title",{applicationName:O.oauthApplicationName})}),(0,r.Y)(v.Y.Subtitle,{localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.subtitle",{identifier:e})})]}),P&&X.length>0&&ee&&(0,r.Y)(x.X,{options:X,value:ee,onChange:K}),(0,r.FD)(k.yq,{children:[(0,r.Y)(k.Hb,{children:(0,r.Y)(k.Xd,{localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.scopeListTitle",{applicationName:O.oauthApplicationName})})}),(0,r.Y)(k.T$,{children:i.map(e=>(0,r.Y)(k.HU,{children:(0,r.Y)(k.Bd,{children:e.description||e.scope})},e.scope))})]}),(0,r.Y)(Y.F,{colorScheme:"warning",children:(0,r.Y)(u.EY,{colorScheme:"warning",variant:"caption",localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.warning")})}),(0,r.FD)(u.xA,{columns:2,gap:3,children:[(0,r.Y)(u.$n,{colorScheme:"secondary",variant:"outline",isLoading:"deny"===Z&&R.isSubmitting,isDisabled:R.isSubmitting,onClick:()=>void er(),localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.action__deny")}),(0,r.Y)(u.$n,{isLoading:"approve"===Z&&R.isSubmitting,isDisabled:R.isSubmitting,onClick:()=>void et(),localizationKey:(0,d.G)("oauthDeviceVerification.confirmation.action__approve")}),t&&(0,r.Y)(u.EY,{sx:{gridColumn:"span 2"},colorScheme:"secondary",variant:"caption",localizationKey:(0,d.G)("oauthConsent.offlineAccessNotice")})]})]}),(0,r.Y)(m.Z.Footer,{})]})}if("confirmation"===w)return(0,r.FD)(m.Z.Root,{children:[(0,r.Y)(m.Z.Content,{children:(0,r.Y)(g.W,{})}),(0,r.Y)(m.Z.Footer,{})]});let eo=function(e){switch(e){case"approved":return{title:"oauthDeviceVerification.status.approvedTitle",subtitle:"oauthDeviceVerification.status.approvedSubtitle",canReset:!1};case"alreadyApproved":return{title:"oauthDeviceVerification.status.alreadyApprovedTitle",subtitle:"oauthDeviceVerification.status.alreadyApprovedSubtitle",canReset:!1};case"denied":return{title:"oauthDeviceVerification.status.deniedTitle",subtitle:"oauthDeviceVerification.status.deniedSubtitle",canReset:!1};case"alreadyDenied":return{title:"oauthDeviceVerification.status.alreadyDeniedTitle",subtitle:"oauthDeviceVerification.status.alreadyDeniedSubtitle",canReset:!1};case"consumed":return{title:"oauthDeviceVerification.status.consumedTitle",subtitle:"oauthDeviceVerification.status.consumedSubtitle",canReset:!1};case"expired":return{title:"oauthDeviceVerification.error.expiredTitle",subtitle:"oauthDeviceVerification.error.expiredSubtitle",canReset:!1};case"rateLimited":return{title:"oauthDeviceVerification.error.rateLimitedTitle",subtitle:"oauthDeviceVerification.error.rateLimitedSubtitle",canReset:!1};case"alreadyDecided":return{title:"oauthDeviceVerification.status.alreadyDecidedTitle",subtitle:"oauthDeviceVerification.status.alreadyDecidedSubtitle",canReset:!1};case"error":return{title:"oauthDeviceVerification.error.genericTitle",subtitle:"oauthDeviceVerification.error.genericSubtitle",canReset:!0}}}(w);return(0,r.FD)(m.Z.Root,{children:[(0,r.Y)(m.Z.Content,{children:(0,r.FD)(u.fv,{gap:6,children:[(0,r.FD)(v.Y.Root,{showLogo:!0,children:[(0,r.Y)(v.Y.Title,{localizationKey:(0,d.G)(eo.title)}),(0,r.Y)(v.Y.Subtitle,{localizationKey:(0,d.G)(eo.subtitle)})]}),eo.canReset&&(0,r.Y)(u.$n,{block:!0,onClick:()=>{N.current=!1,R.reset(),M.setValue(""),M.clearFeedback(),K(null),G("entry")},localizationKey:(0,d.G)("oauthDeviceVerification.action__tryAnotherCode")})]})}),(0,r.Y)(m.Z.Footer,{})]})})),Z=()=>(0,r.Y)(p.n.Root,{flow:"oauthDeviceVerification",children:(0,r.Y)(p.n.Part,{children:(0,r.Y)(y.d,{children:(0,r.Y)(D.q,{children:(0,r.Y)(K,{})})})})})}}]);

package/dist/server.js CHANGED Viewed

@@ -22,7 +22,7 @@ import { ClerkUI } from "./ClerkUI.js";
 */
 const ui = {
 	__brand: UI_BRAND,
-	version: "1.32.1-canary.v20260903011802",
+	version: "1.32.1",
 	ClerkUI
 };