@thunderid/react 1.3.3 → 1.4.1

package/dist/cjs/components/primitives/CopyableText/CopyableText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.cjs","names":["CopyableText: FC<CopyableTextProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","handleCopy: ReturnType<typeof useCallback>","textArea: HTMLTextAreaElement","Button"],"sources":["../../../../../src/components/primitives/CopyableText/CopyableText.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, ReactElement, useCallback, useState} from 'react';\nimport useStyles from './CopyableText.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Button from '../Button/Button';\n\nexport interface CopyableTextProps {\n  /**\n   * Optional label displayed above the value box.\n   */\n  label?: string;\n  /**\n   * The text value to display and copy.\n   */\n  value: string;\n}\n\n/**\n * A React component that displays a text value with an optional label and a button to copy the value to\n * the clipboard. When the button is clicked, it attempts to copy the value using the Clipboard API, and\n * falls back to a textarea method if the API is not supported.\n * After copying, it shows a \"Copied!\" message for 3 seconds before resetting.\n */\nconst CopyableText: FC<CopyableTextProps> = ({label, value}: CopyableTextProps): ReactElement => {\n  const {theme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme);\n  const {t} = useTranslation();\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy: ReturnType<typeof useCallback> = useCallback(async (): Promise<void> => {\n    try {\n      await navigator.clipboard.writeText(value);\n    } catch {\n      const textArea: HTMLTextAreaElement = document.createElement('textarea');\n      textArea.value = value;\n      document.body.appendChild(textArea);\n      textArea.select();\n      document.execCommand('copy');\n      document.body.removeChild(textArea);\n    }\n    setCopied(true);\n    setTimeout(() => setCopied(false), 3000);\n  }, [value]);\n\n  return (\n    <div className={styles['container']}>\n      {label && <span className={styles['label']}>{label}</span>}\n      <div className={styles['valueBox']}>\n        <span className={styles['valueText']}>{value}</span>\n        <Button\n          variant=\"outline\"\n          size=\"small\"\n          className={styles['copyButton']}\n          onClick={() => {\n            handleCopy().catch(() => undefined);\n          }}\n        >\n          {copied ? t('elements.display.copyable_text.copied') : t('elements.display.copyable_text.copy')}\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default CopyableText;\n"],"mappings":";;;;;;;;;;;;;;;;;AA0BA,MAAMA,gBAAuC,EAAC,OAAO,YAA4C;CAC/F,MAAM,EAAC,UAASC,0BAAU;CAC1B,MAAMC,SAAiCC,oCAAU,MAAM;CACvD,MAAM,EAAC,MAAKC,gCAAgB;CAC5B,MAAM,CAAC,QAAQ,iCAAsB,MAAM;CAE3C,MAAMC,oCAAyD,YAA2B;AACxF,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,MAAM;UACpC;GACN,MAAMC,WAAgC,SAAS,cAAc,WAAW;AACxE,YAAS,QAAQ;AACjB,YAAS,KAAK,YAAY,SAAS;AACnC,YAAS,QAAQ;AACjB,YAAS,YAAY,OAAO;AAC5B,YAAS,KAAK,YAAY,SAAS;;AAErC,YAAU,KAAK;AACf,mBAAiB,UAAU,MAAM,EAAE,IAAK;IACvC,CAAC,MAAM,CAAC;AAEX,QACE,4CAAC;EAAI,WAAW,OAAO;aACpB,SAAS,2CAAC;GAAK,WAAW,OAAO;aAAW;IAAa,EAC1D,4CAAC;GAAI,WAAW,OAAO;cACrB,2CAAC;IAAK,WAAW,OAAO;cAAe;KAAa,EACpD,2CAACC;IACC,SAAQ;IACR,MAAK;IACL,WAAW,OAAO;IAClB,eAAe;AACb,iBAAY,CAAC,YAAY,OAAU;;cAGpC,SAAS,EAAE,wCAAwC,GAAG,EAAE,sCAAsC;KACxF;IACL;GACF;;AAIV,2BAAe"}
+{"version":3,"file":"CopyableText.cjs","names":["CopyableText: FC<CopyableTextProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","handleCopy: ReturnType<typeof useCallback>","copyLabel: string","copyButton: ReactElement","Button","Check","Copy","PasswordField"],"sources":["../../../../../src/components/primitives/CopyableText/CopyableText.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {copyTextToClipboard} from '@thunderid/browser';\nimport {FC, ReactElement, useCallback, useState} from 'react';\nimport useStyles from './CopyableText.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Button from '../Button/Button';\nimport Check from '../Icons/Check';\nimport Copy from '../Icons/Copy';\nimport PasswordField from '../PasswordField/PasswordField';\n\nexport interface CopyableTextProps {\n  /**\n   * Optional label displayed above the value box.\n   */\n  label?: string;\n  /**\n   * Hides the value in a read-only password field until the user chooses to show it, as for a secret. Copying always\n   * copies the real value.\n   */\n  masked?: boolean;\n  /**\n   * The text value to display and copy.\n   */\n  value: string;\n}\n\nconst ignoreChange = (): void => undefined;\n\n/**\n * A React component that displays a text value with an optional label and a button to copy the value to\n * the clipboard. When the button is clicked, it attempts to copy the value using the Clipboard API, and\n * falls back to a textarea method if the API is not supported.\n * After copying, it shows a \"Copied!\" message for 3 seconds before resetting.\n *\n * The copy control is an icon button inside the box in both layouts. With `masked`, the value sits in a read-only\n * password field with the same show and hide control as `PasswordField`. A browser does not copy out of a password\n * field, which is why copying is a button of its own.\n */\nconst CopyableText: FC<CopyableTextProps> = ({label, masked = false, value}: CopyableTextProps): ReactElement => {\n  const {theme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme);\n  const {t} = useTranslation();\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy: ReturnType<typeof useCallback> = useCallback(async (): Promise<void> => {\n    await copyTextToClipboard(value);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 3000);\n  }, [value]);\n\n  const copyLabel: string = copied\n    ? t('elements.display.copyable_text.copied')\n    : t('elements.display.copyable_text.copy');\n\n  const copyButton: ReactElement = (\n    <Button\n      variant=\"icon\"\n      size=\"small\"\n      className={styles['copyButton']}\n      aria-label={copyLabel}\n      title={copyLabel}\n      onClick={() => {\n        handleCopy().catch(() => undefined);\n      }}\n    >\n      {copied ? <Check width={16} height={16} /> : <Copy width={16} height={16} />}\n    </Button>\n  );\n\n  return (\n    <div className={styles['container']}>\n      {label && <span className={styles['label']}>{label}</span>}\n      {masked ? (\n        <PasswordField\n          aria-label={label}\n          autoComplete=\"off\"\n          endAdornment={copyButton}\n          hideLabel={t('elements.display.copyable_text.hide')}\n          onChange={ignoreChange}\n          readOnly\n          showLabel={t('elements.display.copyable_text.show')}\n          value={value}\n        />\n      ) : (\n        <div className={styles['valueBox']}>\n          <span className={styles['valueText']}>{value}</span>\n          {copyButton}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default CopyableText;\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,MAAM,qBAA2B;;;;;;;;;;;AAYjC,MAAMA,gBAAuC,EAAC,OAAO,SAAS,OAAO,YAA4C;CAC/G,MAAM,EAAC,UAASC,0BAAU;CAC1B,MAAMC,SAAiCC,oCAAU,MAAM;CACvD,MAAM,EAAC,MAAKC,gCAAgB;CAC5B,MAAM,CAAC,QAAQ,iCAAsB,MAAM;CAE3C,MAAMC,oCAAyD,YAA2B;AACxF,qDAA0B,MAAM;AAChC,YAAU,KAAK;AACf,mBAAiB,UAAU,MAAM,EAAE,IAAK;IACvC,CAAC,MAAM,CAAC;CAEX,MAAMC,YAAoB,SACtB,EAAE,wCAAwC,GAC1C,EAAE,sCAAsC;CAE5C,MAAMC,aACJ,2CAACC;EACC,SAAQ;EACR,MAAK;EACL,WAAW,OAAO;EAClB,cAAY;EACZ,OAAO;EACP,eAAe;AACb,eAAY,CAAC,YAAY,OAAU;;YAGpC,SAAS,2CAACC;GAAM,OAAO;GAAI,QAAQ;IAAM,GAAG,2CAACC;GAAK,OAAO;GAAI,QAAQ;IAAM;GACrE;AAGX,QACE,4CAAC;EAAI,WAAW,OAAO;aACpB,SAAS,2CAAC;GAAK,WAAW,OAAO;aAAW;IAAa,EACzD,SACC,2CAACC;GACC,cAAY;GACZ,cAAa;GACb,cAAc;GACd,WAAW,EAAE,sCAAsC;GACnD,UAAU;GACV;GACA,WAAW,EAAE,sCAAsC;GAC5C;IACP,GAEF,4CAAC;GAAI,WAAW,OAAO;cACrB,2CAAC;IAAK,WAAW,OAAO;cAAe;KAAa,EACnD;IACG;GAEJ;;AAIV,2BAAe"}

package/dist/cjs/components/primitives/CopyableText/CopyableText.styles.cjs

@@ -12,8 +12,11 @@ const useStyles = (theme) => (0, react.useMemo)(() => ({
         width: 100%;
       `,
 	copyButton: require_emotion.css`
-        flex-shrink: 0;
-        white-space: nowrap;
+        color: ${theme.vars.colors.text.secondary};
+
+        &:hover:not(:disabled) {
+          color: ${theme.vars.colors.text.primary};
+        }
       `,
 	label: require_emotion.css`
         color: ${theme.vars.colors.text.secondary};

package/dist/cjs/components/primitives/CopyableText/CopyableText.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.styles.cjs","names":[],"sources":["../../../../../src/components/primitives/CopyableText/CopyableText.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nconst useStyles = (theme: Theme): Record<string, string> =>\n  useMemo(\n    () => ({\n      container: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${theme.vars.spacing.unit} * 0.5);\n        width: 100%;\n      `,\n      copyButton: css`\n        flex-shrink: 0;\n        white-space: nowrap;\n      `,\n      label: css`\n        color: ${theme.vars.colors.text.secondary};\n        font-size: 0.875rem;\n        font-weight: 500;\n      `,\n      valueBox: css`\n        align-items: center;\n        background-color: ${theme.vars.colors.background.surface};\n        border: 1px solid ${theme.vars.colors.border};\n        border-radius: ${theme.vars.borderRadius.small};\n        display: flex;\n        gap: calc(${theme.vars.spacing.unit} * 1);\n        padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1);\n      `,\n      valueText: css`\n        color: ${theme.vars.colors.text.primary};\n        flex: 1;\n        font-family: monospace;\n        font-size: 0.85rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        word-break: break-all;\n      `,\n    }),\n    [theme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;AAOA,MAAM,aAAa,oCAER;CACL,WAAW,mBAAG;;;oBAGA,MAAM,KAAK,QAAQ,KAAK;;;CAGtC,YAAY,mBAAG;;;;CAIf,OAAO,mBAAG;iBACC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,UAAU,mBAAG;;4BAES,MAAM,KAAK,OAAO,WAAW,QAAQ;4BACrC,MAAM,KAAK,OAAO,OAAO;yBAC5B,MAAM,KAAK,aAAa,MAAM;;oBAEnC,MAAM,KAAK,QAAQ,KAAK;wBACpB,MAAM,KAAK,QAAQ,KAAK,gBAAgB,MAAM,KAAK,QAAQ,KAAK;;CAElF,WAAW,mBAAG;iBACH,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;;CAS3C,GACD,CAAC,MAAM,CACR;AAEH,kCAAe"}
+{"version":3,"file":"CopyableText.styles.cjs","names":[],"sources":["../../../../../src/components/primitives/CopyableText/CopyableText.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nconst useStyles = (theme: Theme): Record<string, string> =>\n  useMemo(\n    () => ({\n      container: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${theme.vars.spacing.unit} * 0.5);\n        width: 100%;\n      `,\n      copyButton: css`\n        color: ${theme.vars.colors.text.secondary};\n\n        &:hover:not(:disabled) {\n          color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      label: css`\n        color: ${theme.vars.colors.text.secondary};\n        font-size: 0.875rem;\n        font-weight: 500;\n      `,\n      valueBox: css`\n        align-items: center;\n        background-color: ${theme.vars.colors.background.surface};\n        border: 1px solid ${theme.vars.colors.border};\n        border-radius: ${theme.vars.borderRadius.small};\n        display: flex;\n        gap: calc(${theme.vars.spacing.unit} * 1);\n        padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1);\n      `,\n      valueText: css`\n        color: ${theme.vars.colors.text.primary};\n        flex: 1;\n        font-family: monospace;\n        font-size: 0.85rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        word-break: break-all;\n      `,\n    }),\n    [theme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;AAOA,MAAM,aAAa,oCAER;CACL,WAAW,mBAAG;;;oBAGA,MAAM,KAAK,QAAQ,KAAK;;;CAGtC,YAAY,mBAAG;iBACJ,MAAM,KAAK,OAAO,KAAK,UAAU;;;mBAG/B,MAAM,KAAK,OAAO,KAAK,QAAQ;;;CAG5C,OAAO,mBAAG;iBACC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,UAAU,mBAAG;;4BAES,MAAM,KAAK,OAAO,WAAW,QAAQ;4BACrC,MAAM,KAAK,OAAO,OAAO;yBAC5B,MAAM,KAAK,aAAa,MAAM;;oBAEnC,MAAM,KAAK,QAAQ,KAAK;wBACpB,MAAM,KAAK,QAAQ,KAAK,gBAAgB,MAAM,KAAK,QAAQ,KAAK;;CAElF,WAAW,mBAAG;iBACH,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;;CAS3C,GACD,CAAC,MAAM,CACR;AAEH,kCAAe"}

package/dist/cjs/components/primitives/DatePicker/DatePicker.cjs

@@ -6,6 +6,8 @@ const require_InputLabel = require('../InputLabel/InputLabel.cjs');
 const require_DatePicker_styles = require('./DatePicker.styles.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
@@ -13,13 +15,19 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 const DatePicker = ({ label, error, className, required, disabled, helperText, dateFormat = "yyyy-MM-dd", style = {},...rest }) => {
 	const { theme, colorScheme } = require_useTheme.default();
 	const hasError = !!error;
+	const generatedId = (0, react.useId)();
+	const inputId = rest.id ?? generatedId;
+	const helperTextId = error || helperText ? `${inputId}-helper-text` : void 0;
+	const describedBy = [rest["aria-describedby"], helperTextId].filter(Boolean).join(" ") || void 0;
 	const styles = require_DatePicker_styles.default(theme, colorScheme, hasError, !!disabled);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FormControl.default, {
 		error,
 		helperText,
+		helperTextId,
 		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("date-picker")), className),
 		style,
 		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
+			htmlFor: inputId,
 			required,
 			error: hasError,
 			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("date-picker", "label")), styles["label"]),
@@ -35,7 +43,9 @@ const DatePicker = ({ label, error, className, required, disabled, helperText, d
 			disabled,
 			"aria-invalid": hasError,
 			"aria-required": required,
-			...rest
+			...rest,
+			id: inputId,
+			"aria-describedby": describedBy
 		})]
 	});
 };

package/dist/cjs/components/primitives/DatePicker/DatePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","names":["DatePicker: FC<DatePickerProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/DatePicker/DatePicker.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes} from 'react';\nimport useStyles from './DatePicker.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Custom date format for the regex pattern\n   */\n  dateFormat?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the input\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst DatePicker: FC<DatePickerProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  dateFormat = 'yyyy-MM-dd',\n  style = {},\n  ...rest\n}: DatePickerProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!disabled);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('date-picker')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel\n          required={required}\n          error={hasError}\n          className={cx(withVendorCSSClassPrefix(bem('date-picker', 'label')), styles['label'])}\n        >\n          {label}\n        </InputLabel>\n      )}\n      <input\n        type=\"date\"\n        pattern=\"\\d{4}-\\d{2}-\\d{2}\"\n        placeholder={dateFormat}\n        className={cx(\n          withVendorCSSClassPrefix(bem('date-picker', 'input')),\n          styles['input'],\n          styles['errorInput'],\n          styles['disabledInput'],\n          {\n            [withVendorCSSClassPrefix(bem('date-picker', 'input', 'error'))]: hasError,\n            [withVendorCSSClassPrefix(bem('date-picker', 'input', 'disabled'))]: disabled,\n          },\n        )}\n        disabled={disabled}\n        aria-invalid={hasError}\n        aria-required={required}\n        {...rest}\n      />\n    </FormControl>\n  );\n};\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;AA0CA,MAAMA,cAAmC,EACvC,OACA,OACA,WACA,UACA,UACA,YACA,aAAa,cACb,QAAQ,EAAE,CACV,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,kCAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,4CAACC;EACQ;EACK;EACZ,WAAWC,kGAAgC,cAAc,CAAC,EAAE,UAAU;EAC/D;aAEN,SACC,2CAACC;GACW;GACV,OAAO;GACP,WAAWD,kGAAgC,eAAe,QAAQ,CAAC,EAAE,OAAO,SAAS;aAEpF;IACU,EAEf,2CAAC;GACC,MAAK;GACL,SAAQ;GACR,aAAa;GACb,WAAWA,kGACoB,eAAe,QAAQ,CAAC,EACrD,OAAO,UACP,OAAO,eACP,OAAO,kBACP;oFACgC,eAAe,SAAS,QAAQ,CAAC,GAAG;oFACpC,eAAe,SAAS,WAAW,CAAC,GAAG;IACtE,CACF;GACS;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;IACJ;GACU;;AAIlB,yBAAe"}
+{"version":3,"file":"DatePicker.cjs","names":["DatePicker: FC<DatePickerProps>","useTheme","generatedId: string","inputId: string","helperTextId: string | undefined","describedBy: string | undefined","styles: Record<string, string>","useStyles","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/DatePicker/DatePicker.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes, useId} from 'react';\nimport useStyles from './DatePicker.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Custom date format for the regex pattern\n   */\n  dateFormat?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the input\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst DatePicker: FC<DatePickerProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  dateFormat = 'yyyy-MM-dd',\n  style = {},\n  ...rest\n}: DatePickerProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const generatedId: string = useId();\n  const inputId: string = rest.id ?? generatedId;\n  const helperTextId: string | undefined = error || helperText ? `${inputId}-helper-text` : undefined;\n  const describedBy: string | undefined =\n    [rest['aria-describedby'], helperTextId].filter(Boolean).join(' ') || undefined;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!disabled);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      helperTextId={helperTextId}\n      className={cx(withVendorCSSClassPrefix(bem('date-picker')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel\n          htmlFor={inputId}\n          required={required}\n          error={hasError}\n          className={cx(withVendorCSSClassPrefix(bem('date-picker', 'label')), styles['label'])}\n        >\n          {label}\n        </InputLabel>\n      )}\n      <input\n        type=\"date\"\n        pattern=\"\\d{4}-\\d{2}-\\d{2}\"\n        placeholder={dateFormat}\n        className={cx(\n          withVendorCSSClassPrefix(bem('date-picker', 'input')),\n          styles['input'],\n          styles['errorInput'],\n          styles['disabledInput'],\n          {\n            [withVendorCSSClassPrefix(bem('date-picker', 'input', 'error'))]: hasError,\n            [withVendorCSSClassPrefix(bem('date-picker', 'input', 'disabled'))]: disabled,\n          },\n        )}\n        disabled={disabled}\n        aria-invalid={hasError}\n        aria-required={required}\n        {...rest}\n        id={inputId}\n        aria-describedby={describedBy}\n      />\n    </FormControl>\n  );\n};\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;AA0CA,MAAMA,cAAmC,EACvC,OACA,OACA,WACA,UACA,UACA,YACA,aAAa,cACb,QAAQ,EAAE,CACV,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,gCAA6B;CACnC,MAAMC,UAAkB,KAAK,MAAM;CACnC,MAAMC,eAAmC,SAAS,aAAa,GAAG,QAAQ,gBAAgB;CAC1F,MAAMC,cACJ,CAAC,KAAK,qBAAqB,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI;CACxE,MAAMC,SAAiCC,kCAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,4CAACC;EACQ;EACK;EACE;EACd,WAAWC,kGAAgC,cAAc,CAAC,EAAE,UAAU;EAC/D;aAEN,SACC,2CAACC;GACC,SAAS;GACC;GACV,OAAO;GACP,WAAWD,kGAAgC,eAAe,QAAQ,CAAC,EAAE,OAAO,SAAS;aAEpF;IACU,EAEf,2CAAC;GACC,MAAK;GACL,SAAQ;GACR,aAAa;GACb,WAAWA,kGACoB,eAAe,QAAQ,CAAC,EACrD,OAAO,UACP,OAAO,eACP,OAAO,kBACP;oFACgC,eAAe,SAAS,QAAQ,CAAC,GAAG;oFACpC,eAAe,SAAS,WAAW,CAAC,GAAG;IACtE,CACF;GACS;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;GACJ,IAAI;GACJ,oBAAkB;IAClB;GACU;;AAIlB,yBAAe"}

package/dist/cjs/components/primitives/FormControl/FormControl.cjs

@@ -9,13 +9,14 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/components/primitives/FormControl/FormControl.tsx
-const FormControl = ({ children, error, helperText, className, id, helperTextAlign = "left", helperTextMarginLeft }) => {
+const FormControl = ({ children, error, helperText, helperTextId, className, id, helperTextAlign = "left", helperTextMarginLeft }) => {
 	const { theme, colorScheme } = require_useTheme.default();
 	const styles = require_FormControl_styles.default(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		id,
 		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("form-control")), styles["formControl"], className),
 		children: [children, (error || helperText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+			id: helperTextId,
 			variant: "caption",
 			color: error ? "error" : "textSecondary",
 			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("form-control", "helper-text")), styles["helperText"], {

package/dist/cjs/components/primitives/FormControl/FormControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.cjs","names":["FormControl: FC<FormControlProps>","useTheme","styles: Record<string, string>","useStyles","cx","Typography"],"sources":["../../../../../src/components/primitives/FormControl/FormControl.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {CSSProperties, FC, ReactNode} from 'react';\nimport useStyles from './FormControl.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Typography from '../Typography/Typography';\n\nexport type FormControlHelperTextAlign = 'left' | 'center';\n\nexport interface FormControlProps {\n  /**\n   * The content to be wrapped by the form control\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the content\n   */\n  error?: string;\n  /**\n   * Helper text to display below the content\n   */\n  helperText?: string;\n  /**\n   * Custom alignment for helper text (default: left, center for OTP)\n   */\n  helperTextAlign?: FormControlHelperTextAlign;\n  /**\n   * Custom margin left for helper text (for components like Checkbox)\n   */\n  helperTextMarginLeft?: string;\n  /**\n   * HTML id attribute\n   */\n  id?: string;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n}\n\nconst FormControl: FC<FormControlProps> = ({\n  children,\n  error,\n  helperText,\n  className,\n  id,\n  helperTextAlign = 'left',\n  helperTextMarginLeft,\n}: FormControlProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);\n\n  return (\n    <div id={id} className={cx(withVendorCSSClassPrefix(bem('form-control')), styles['formControl'], className)}>\n      {children}\n      {(error || helperText) && (\n        <Typography\n          variant=\"caption\"\n          color={error ? 'error' : 'textSecondary'}\n          className={cx(withVendorCSSClassPrefix(bem('form-control', 'helper-text')), styles['helperText'], {\n            [withVendorCSSClassPrefix(bem('form-control', 'helper-text', 'error'))]: !!error,\n            [styles['helperTextError']]: !!error,\n          })}\n        >\n          {error || helperText}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"mappings":";;;;;;;;;;;AA+CA,MAAMA,eAAqC,EACzC,UACA,OACA,YACA,WACA,IACA,kBAAkB,QAClB,2BACsB;CACtB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,mCAAU,OAAO,aAAa,iBAAiB,sBAAsB,CAAC,CAAC,MAAM;AAEpH,QACE,4CAAC;EAAQ;EAAI,WAAWC,kGAAgC,eAAe,CAAC,EAAE,OAAO,gBAAgB,UAAU;aACxG,WACC,SAAS,eACT,2CAACC;GACC,SAAQ;GACR,OAAO,QAAQ,UAAU;GACzB,WAAWD,kGAAgC,gBAAgB,cAAc,CAAC,EAAE,OAAO,eAAe;oFAClE,gBAAgB,eAAe,QAAQ,CAAC,GAAG,CAAC,CAAC;KAC1E,OAAO,qBAAqB,CAAC,CAAC;IAChC,CAAC;aAED,SAAS;IACC;GAEX;;AAIV,0BAAe"}
+{"version":3,"file":"FormControl.cjs","names":["FormControl: FC<FormControlProps>","useTheme","styles: Record<string, string>","useStyles","cx","Typography"],"sources":["../../../../../src/components/primitives/FormControl/FormControl.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {CSSProperties, FC, ReactNode} from 'react';\nimport useStyles from './FormControl.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Typography from '../Typography/Typography';\n\nexport type FormControlHelperTextAlign = 'left' | 'center';\n\nexport interface FormControlProps {\n  /**\n   * The content to be wrapped by the form control\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the content\n   */\n  error?: string;\n  /**\n   * Helper text to display below the content\n   */\n  helperText?: string;\n  /**\n   * id of the helper text element, so the field it describes can reference it with `aria-describedby`\n   */\n  helperTextId?: string;\n  /**\n   * Custom alignment for helper text (default: left, center for OTP)\n   */\n  helperTextAlign?: FormControlHelperTextAlign;\n  /**\n   * Custom margin left for helper text (for components like Checkbox)\n   */\n  helperTextMarginLeft?: string;\n  /**\n   * HTML id attribute\n   */\n  id?: string;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n}\n\nconst FormControl: FC<FormControlProps> = ({\n  children,\n  error,\n  helperText,\n  helperTextId,\n  className,\n  id,\n  helperTextAlign = 'left',\n  helperTextMarginLeft,\n}: FormControlProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);\n\n  return (\n    <div id={id} className={cx(withVendorCSSClassPrefix(bem('form-control')), styles['formControl'], className)}>\n      {children}\n      {(error || helperText) && (\n        <Typography\n          id={helperTextId}\n          variant=\"caption\"\n          color={error ? 'error' : 'textSecondary'}\n          className={cx(withVendorCSSClassPrefix(bem('form-control', 'helper-text')), styles['helperText'], {\n            [withVendorCSSClassPrefix(bem('form-control', 'helper-text', 'error'))]: !!error,\n            [styles['helperTextError']]: !!error,\n          })}\n        >\n          {error || helperText}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"mappings":";;;;;;;;;;;AAmDA,MAAMA,eAAqC,EACzC,UACA,OACA,YACA,cACA,WACA,IACA,kBAAkB,QAClB,2BACsB;CACtB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,mCAAU,OAAO,aAAa,iBAAiB,sBAAsB,CAAC,CAAC,MAAM;AAEpH,QACE,4CAAC;EAAQ;EAAI,WAAWC,kGAAgC,eAAe,CAAC,EAAE,OAAO,gBAAgB,UAAU;aACxG,WACC,SAAS,eACT,2CAACC;GACC,IAAI;GACJ,SAAQ;GACR,OAAO,QAAQ,UAAU;GACzB,WAAWD,kGAAgC,gBAAgB,cAAc,CAAC,EAAE,OAAO,eAAe;oFAClE,gBAAgB,eAAe,QAAQ,CAAC,GAAG,CAAC,CAAC;KAC1E,OAAO,qBAAqB,CAAC,CAAC;IAChC,CAAC;aAED,SAAS;IACC;GAEX;;AAIV,0BAAe"}

package/dist/cjs/components/primitives/Icons/Copy.cjs

@@ -0,0 +1,33 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/primitives/Icons/Copy.tsx
+/**
+* Copy icon component.
+*/
+const Copy = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+		width: "14",
+		height: "14",
+		x: "8",
+		y: "8",
+		rx: "2",
+		ry: "2"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })]
+});
+var Copy_default = Copy;
+
+//#endregion
+exports.default = Copy_default;
+//# sourceMappingURL=Copy.cjs.map

package/dist/cjs/components/primitives/Icons/Copy.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Copy.cjs","names":["Copy: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../../src/components/primitives/Icons/Copy.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, SVGProps} from 'react';\n\n/**\n * Copy icon component.\n */\nconst Copy: FC<SVGProps<SVGSVGElement>> = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n    <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n  </svg>\n);\n\nexport default Copy;\n"],"mappings":";;;;;;;;AAQA,MAAMA,QAAqC,UACzC,4CAAC;CACC,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,MAAK;CACL,QAAO;CACP,aAAY;CACZ,eAAc;CACd,gBAAe;CACf,GAAI;YAEJ,2CAAC;EAAK,OAAM;EAAK,QAAO;EAAK,GAAE;EAAI,GAAE;EAAI,IAAG;EAAI,IAAG;GAAM,EACzD,2CAAC,UAAK,GAAE,4DAA4D;EAChE;AAGR,mBAAe"}

package/dist/cjs/components/primitives/MultiInput/MultiInput.cjs

@@ -17,6 +17,8 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 //#region src/components/primitives/MultiInput/MultiInput.tsx
 const MultiInput = ({ label, error, required, className, disabled, helperText, placeholder = "Enter value", values = [], onChange, type = "text", fieldType = "STRING", startIcon, endIcon, minFields = 1, maxFields, style = {} }) => {
 	const { theme, colorScheme } = require_useTheme.default();
+	const inputId = (0, react.useId)();
+	const helperTextId = error || helperText ? `${inputId}-description` : void 0;
 	const canAddMore = !maxFields || values.length < maxFields;
 	const canRemove = values.length > minFields;
 	const styles = require_MultiInput_styles.default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
@@ -58,10 +60,13 @@ const MultiInput = ({ label, error, required, className, disabled, helperText, p
 				onEndIconClick();
 			}
 		};
+		const finalEndIcon = attachedEndIcon || endIcon;
 		const commonProps = {
+			"aria-describedby": helperTextId,
 			disabled,
-			endIcon: attachedEndIcon || endIcon,
+			endIcon: finalEndIcon,
 			error,
+			id: inputId,
 			onChange: handleInputChange,
 			onEndIconClick,
 			onKeyDown: handleKeyDown,
@@ -88,7 +93,9 @@ const MultiInput = ({ label, error, required, className, disabled, helperText, p
 		endIcon,
 		error,
 		fieldType,
-		type
+		type,
+		inputId,
+		helperTextId
 	]);
 	const [currentInputValue, setCurrentInputValue] = (0, react.useState)("");
 	const handleInputSubmit = (0, react.useCallback)(() => {
@@ -100,9 +107,11 @@ const MultiInput = ({ label, error, required, className, disabled, helperText, p
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FormControl.default, {
 		error,
 		helperText,
+		helperTextId,
 		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input")), className),
 		style,
 		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
+			htmlFor: inputId,
 			required,
 			error: !!error,
 			children: label

package/dist/cjs/components/primitives/MultiInput/MultiInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiInput.cjs","names":["MultiInput: FC<MultiInputProps>","useTheme","canAddMore: boolean","canRemove: boolean","styles: Record<string, string>","useStyles","PlusIcon: FC<IconProps>","cx","BinIcon: FC<IconProps>","handleAddValue: ReturnType<typeof useCallback>","handleRemoveValue: ReturnType<typeof useCallback>","renderInputField: ReturnType<typeof useCallback>","commonProps: Record<string, unknown>","DatePicker","Checkbox","TextField","handleInputSubmit: ReturnType<typeof useCallback>","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/MultiInput/MultiInput.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {CSSProperties, FC, KeyboardEvent, ReactElement, ReactNode, useCallback, useState} from 'react';\nimport useStyles from './MultiInput.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Checkbox from '../Checkbox/Checkbox';\nimport DatePicker from '../DatePicker/DatePicker';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\nimport TextField from '../TextField/TextField';\n\nexport type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';\nexport type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';\n\nexport interface MultiInputProps {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Icon to display at the end (right) of each input (in addition to add/remove buttons)\n   */\n  endIcon?: ReactNode;\n  /**\n   * Error message to display below the inputs\n   */\n  error?: string;\n  /**\n   * Field type for different input components\n   */\n  fieldType?: MultiInputFieldType;\n  /**\n   * Helper text to display below the inputs\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the inputs\n   */\n  label?: string;\n  /**\n   * Maximum number of fields to allow (default: unlimited)\n   */\n  maxFields?: number;\n  /**\n   * Minimum number of fields to show (default: 1)\n   */\n  minFields?: number;\n  /**\n   * Callback when values change\n   */\n  onChange: (values: string[]) => void;\n  /**\n   * Placeholder text for input fields\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of each input\n   */\n  startIcon?: ReactNode;\n  /**\n   * Custom style object\n   */\n  style?: CSSProperties;\n  /**\n   * Input type\n   */\n  type?: MultiInputType;\n  /**\n   * Array of values\n   */\n  values: string[];\n}\n\ninterface IconProps {\n  iconClassName?: string;\n}\n\nconst MultiInput: FC<MultiInputProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  placeholder = 'Enter value',\n  values = [],\n  onChange,\n  type = 'text',\n  fieldType = 'STRING',\n  startIcon,\n  endIcon,\n  minFields = 1,\n  maxFields,\n  style = {},\n}: MultiInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const canAddMore: boolean = !maxFields || values.length < maxFields;\n  const canRemove: boolean = values.length > minFields;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);\n\n  const PlusIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  );\n\n  const BinIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6\" />\n    </svg>\n  );\n\n  const handleAddValue: ReturnType<typeof useCallback> = useCallback(\n    (newValue: string) => {\n      if (newValue.trim() !== '' && (!maxFields || values.length < maxFields)) {\n        onChange([...values, newValue.trim()]);\n      }\n    },\n    [values, onChange, maxFields],\n  );\n\n  const handleRemoveValue: ReturnType<typeof useCallback> = useCallback(\n    (index: number) => {\n      if (values.length > minFields) {\n        const updatedValues: string[] = values.filter((_: string, i: number) => i !== index);\n        onChange(updatedValues);\n      }\n    },\n    [values, onChange, minFields],\n  );\n\n  const renderInputField: ReturnType<typeof useCallback> = useCallback(\n    (\n      value: string,\n      onValueChange: (value: string) => void,\n      attachedEndIcon?: ReactNode,\n      onEndIconClick?: () => void,\n    ): ReactElement => {\n      const handleInputChange = (e: any): void => {\n        const newValue: string = e.target ? e.target.value : e;\n        onValueChange(newValue);\n      };\n\n      const handleKeyDown = (e: KeyboardEvent): void => {\n        if (e.key === 'Enter' && onEndIconClick) {\n          e.preventDefault();\n          onEndIconClick();\n        }\n      };\n\n      const finalEndIcon: ReactNode = attachedEndIcon || endIcon;\n\n      const commonProps: Record<string, unknown> = {\n        disabled,\n        endIcon: finalEndIcon,\n        error,\n        onChange: handleInputChange,\n        onEndIconClick,\n        onKeyDown: handleKeyDown,\n        placeholder,\n        startIcon,\n        value,\n      };\n\n      switch (fieldType) {\n        case 'DATE_TIME':\n          return <DatePicker {...commonProps} />;\n        case 'BOOLEAN':\n          return (\n            <Checkbox\n              {...commonProps}\n              checked={value === 'true' || Boolean(value)}\n              onChange={(e: any): void => onValueChange(e.target.checked ? 'true' : 'false')}\n            />\n          );\n        default:\n          return <TextField {...commonProps} type={type} />;\n      }\n    },\n    [placeholder, disabled, startIcon, endIcon, error, fieldType, type],\n  );\n\n  // State for the current input value\n  const [currentInputValue, setCurrentInputValue] = useState('');\n\n  const handleInputSubmit: ReturnType<typeof useCallback> = useCallback((): void => {\n    if (currentInputValue.trim() !== '') {\n      handleAddValue(currentInputValue);\n      setCurrentInputValue('');\n    }\n  }, [currentInputValue, handleAddValue]);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('multi-input')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'container')), styles['container'])}>\n        {/* Input field at the top */}\n        <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-row')), styles['inputRow'])}>\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-wrapper')), styles['inputWrapper'])}>\n            {renderInputField(\n              currentInputValue,\n              setCurrentInputValue,\n              canAddMore ? <PlusIcon iconClassName={styles['plusIcon']} /> : undefined,\n              canAddMore ? handleInputSubmit : undefined,\n            )}\n          </div>\n        </div>\n\n        {/* List of added items */}\n        {values.length > 0 && (\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-container')), styles['listContainer'])}>\n            {values.map((value: string, index: number) => (\n              <div\n                key={index}\n                className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item')), styles['listItem'])}\n              >\n                <span\n                  className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item-text')), styles['listItemText'])}\n                >\n                  {value}\n                </span>\n                {canRemove && (\n                  <button\n                    type=\"button\"\n                    onClick={(): void => handleRemoveValue(index)}\n                    disabled={disabled}\n                    className={cx(\n                      withVendorCSSClassPrefix(bem('multi-input', 'remove-button')),\n                      styles['removeButton'],\n                    )}\n                    title=\"Remove value\"\n                  >\n                    <BinIcon iconClassName={styles['icon']} />\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default MultiInput;\n"],"mappings":"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"}
+{"version":3,"file":"MultiInput.cjs","names":["MultiInput: FC<MultiInputProps>","useTheme","inputId: string","helperTextId: string | undefined","canAddMore: boolean","canRemove: boolean","styles: Record<string, string>","useStyles","PlusIcon: FC<IconProps>","cx","BinIcon: FC<IconProps>","handleAddValue: ReturnType<typeof useCallback>","handleRemoveValue: ReturnType<typeof useCallback>","renderInputField: ReturnType<typeof useCallback>","finalEndIcon: ReactNode","commonProps: Record<string, unknown>","DatePicker","Checkbox","TextField","handleInputSubmit: ReturnType<typeof useCallback>","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/MultiInput/MultiInput.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {CSSProperties, FC, KeyboardEvent, ReactElement, ReactNode, useCallback, useId, useState} from 'react';\nimport useStyles from './MultiInput.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Checkbox from '../Checkbox/Checkbox';\nimport DatePicker from '../DatePicker/DatePicker';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\nimport TextField from '../TextField/TextField';\n\nexport type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';\nexport type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';\n\nexport interface MultiInputProps {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Icon to display at the end (right) of each input (in addition to add/remove buttons)\n   */\n  endIcon?: ReactNode;\n  /**\n   * Error message to display below the inputs\n   */\n  error?: string;\n  /**\n   * Field type for different input components\n   */\n  fieldType?: MultiInputFieldType;\n  /**\n   * Helper text to display below the inputs\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the inputs\n   */\n  label?: string;\n  /**\n   * Maximum number of fields to allow (default: unlimited)\n   */\n  maxFields?: number;\n  /**\n   * Minimum number of fields to show (default: 1)\n   */\n  minFields?: number;\n  /**\n   * Callback when values change\n   */\n  onChange: (values: string[]) => void;\n  /**\n   * Placeholder text for input fields\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of each input\n   */\n  startIcon?: ReactNode;\n  /**\n   * Custom style object\n   */\n  style?: CSSProperties;\n  /**\n   * Input type\n   */\n  type?: MultiInputType;\n  /**\n   * Array of values\n   */\n  values: string[];\n}\n\ninterface IconProps {\n  iconClassName?: string;\n}\n\nconst MultiInput: FC<MultiInputProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  placeholder = 'Enter value',\n  values = [],\n  onChange,\n  type = 'text',\n  fieldType = 'STRING',\n  startIcon,\n  endIcon,\n  minFields = 1,\n  maxFields,\n  style = {},\n}: MultiInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const inputId: string = useId();\n  // The inner field renders its own helper text with `${inputId}-helper-text`, so this one needs a distinct id.\n  const helperTextId: string | undefined = error || helperText ? `${inputId}-description` : undefined;\n  const canAddMore: boolean = !maxFields || values.length < maxFields;\n  const canRemove: boolean = values.length > minFields;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);\n\n  const PlusIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  );\n\n  const BinIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6\" />\n    </svg>\n  );\n\n  const handleAddValue: ReturnType<typeof useCallback> = useCallback(\n    (newValue: string) => {\n      if (newValue.trim() !== '' && (!maxFields || values.length < maxFields)) {\n        onChange([...values, newValue.trim()]);\n      }\n    },\n    [values, onChange, maxFields],\n  );\n\n  const handleRemoveValue: ReturnType<typeof useCallback> = useCallback(\n    (index: number) => {\n      if (values.length > minFields) {\n        const updatedValues: string[] = values.filter((_: string, i: number) => i !== index);\n        onChange(updatedValues);\n      }\n    },\n    [values, onChange, minFields],\n  );\n\n  const renderInputField: ReturnType<typeof useCallback> = useCallback(\n    (\n      value: string,\n      onValueChange: (value: string) => void,\n      attachedEndIcon?: ReactNode,\n      onEndIconClick?: () => void,\n    ): ReactElement => {\n      const handleInputChange = (e: any): void => {\n        const newValue: string = e.target ? e.target.value : e;\n        onValueChange(newValue);\n      };\n\n      const handleKeyDown = (e: KeyboardEvent): void => {\n        if (e.key === 'Enter' && onEndIconClick) {\n          e.preventDefault();\n          onEndIconClick();\n        }\n      };\n\n      const finalEndIcon: ReactNode = attachedEndIcon || endIcon;\n\n      const commonProps: Record<string, unknown> = {\n        'aria-describedby': helperTextId,\n        disabled,\n        endIcon: finalEndIcon,\n        error,\n        id: inputId,\n        onChange: handleInputChange,\n        onEndIconClick,\n        onKeyDown: handleKeyDown,\n        placeholder,\n        startIcon,\n        value,\n      };\n\n      switch (fieldType) {\n        case 'DATE_TIME':\n          return <DatePicker {...commonProps} />;\n        case 'BOOLEAN':\n          return (\n            <Checkbox\n              {...commonProps}\n              checked={value === 'true' || Boolean(value)}\n              onChange={(e: any): void => onValueChange(e.target.checked ? 'true' : 'false')}\n            />\n          );\n        default:\n          return <TextField {...commonProps} type={type} />;\n      }\n    },\n    [placeholder, disabled, startIcon, endIcon, error, fieldType, type, inputId, helperTextId],\n  );\n\n  // State for the current input value\n  const [currentInputValue, setCurrentInputValue] = useState('');\n\n  const handleInputSubmit: ReturnType<typeof useCallback> = useCallback((): void => {\n    if (currentInputValue.trim() !== '') {\n      handleAddValue(currentInputValue);\n      setCurrentInputValue('');\n    }\n  }, [currentInputValue, handleAddValue]);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      helperTextId={helperTextId}\n      className={cx(withVendorCSSClassPrefix(bem('multi-input')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel htmlFor={inputId} required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'container')), styles['container'])}>\n        {/* Input field at the top */}\n        <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-row')), styles['inputRow'])}>\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-wrapper')), styles['inputWrapper'])}>\n            {renderInputField(\n              currentInputValue,\n              setCurrentInputValue,\n              canAddMore ? <PlusIcon iconClassName={styles['plusIcon']} /> : undefined,\n              canAddMore ? handleInputSubmit : undefined,\n            )}\n          </div>\n        </div>\n\n        {/* List of added items */}\n        {values.length > 0 && (\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-container')), styles['listContainer'])}>\n            {values.map((value: string, index: number) => (\n              <div\n                key={index}\n                className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item')), styles['listItem'])}\n              >\n                <span\n                  className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item-text')), styles['listItemText'])}\n                >\n                  {value}\n                </span>\n                {canRemove && (\n                  <button\n                    type=\"button\"\n                    onClick={(): void => handleRemoveValue(index)}\n                    disabled={disabled}\n                    className={cx(\n                      withVendorCSSClassPrefix(bem('multi-input', 'remove-button')),\n                      styles['removeButton'],\n                    )}\n                    title=\"Remove value\"\n                  >\n                    <BinIcon iconClassName={styles['icon']} />\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default MultiInput;\n"],"mappings":"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"}

package/dist/cjs/components/primitives/OtpField/OtpField.cjs

@@ -17,6 +17,9 @@ const OtpField = ({ label, error, className, required, disabled, helperText, len
 	const styles = require_OtpField_styles.default(theme, colorScheme, !!disabled, !!error, length);
 	const [otp, setOtp] = (0, react.useState)(Array(length).fill(""));
 	const inputRefs = (0, react.useRef)([]);
+	const fieldId = (0, react.useId)();
+	const labelId = `${fieldId}-label`;
+	const helperTextId = error || helperText ? `${fieldId}-helper-text` : void 0;
 	(0, react.useEffect)(() => {
 		inputRefs.current = inputRefs.current.slice(0, length);
 	}, [length]);
@@ -86,14 +89,19 @@ const OtpField = ({ label, error, className, required, disabled, helperText, len
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FormControl.default, {
 		error,
 		helperText,
+		helperTextId,
 		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field")), className),
 		helperTextAlign: "center",
 		style,
 		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
+			id: labelId,
 			required,
 			error: !!error,
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "group",
+			"aria-labelledby": label ? labelId : void 0,
+			"aria-describedby": helperTextId,
 			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input-container")), styles["inputContainer"]),
 			children: Array.from({ length }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				ref: (el) => {
@@ -117,6 +125,7 @@ const OtpField = ({ label, error, className, required, disabled, helperText, len
 				"aria-label": `${label || "OTP"} digit ${index + 1}`,
 				"aria-invalid": !!error,
 				"aria-required": required,
+				"aria-describedby": helperTextId,
 				autoComplete: "one-time-code"
 			}, index))
 		})]

package/dist/cjs/components/primitives/OtpField/OtpField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OtpField.cjs","names":["OtpField: FC<OtpInputProps>","useTheme","styles: Record<string, string>","useStyles","inputRefs: MutableRefObject<HTMLInputElement[]>","newOtp: string[]","newValue: string","otpValue: string","rawData: string","pastedData: string","nextEmptyIndex: number","focusIndex: number","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  ClipboardEvent,\n  FC,\n  KeyboardEvent,\n  ChangeEvent,\n  MutableRefObject,\n  useRef,\n  useEffect,\n  useState,\n  CSSProperties,\n} from 'react';\nimport useStyles from './OtpField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type OtpFieldType = 'text' | 'number' | 'password';\n\nexport interface OtpInputProps {\n  /**\n   * Auto focus the first input on mount\n   */\n  autoFocus?: boolean;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the OTP input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the OTP input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the OTP input\n   */\n  label?: string;\n  /**\n   * Number of OTP input fields\n   */\n  length?: number;\n  /**\n   * Callback function called when OTP value changes\n   */\n  onChange?: (event: {target: {value: string}}) => void;\n  /**\n   * Callback function called when OTP input is complete\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * Pattern for numeric input validation\n   */\n  pattern?: string;\n  /**\n   * Placeholder character for each input field\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n  /**\n   * Type of input (text, number, password)\n   */\n  type?: OtpFieldType;\n  /**\n   * Upper-case entered characters before emitting them\n   */\n  uppercase?: boolean;\n  /**\n   * Current OTP value\n   */\n  value?: string;\n}\n\nconst OtpField: FC<OtpInputProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  length = 6,\n  value = '',\n  onChange,\n  onComplete,\n  type = 'text',\n  placeholder = '',\n  style = {},\n  autoFocus = false,\n  pattern,\n  uppercase = false,\n}: OtpInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, length);\n  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));\n  const inputRefs: MutableRefObject<HTMLInputElement[]> = useRef<HTMLInputElement[]>([]);\n\n  useEffect(() => {\n    inputRefs.current = inputRefs.current.slice(0, length);\n  }, [length]);\n\n  useEffect(() => {\n    if (value) {\n      const newOtp: string[] = value.split('').slice(0, length);\n      while (newOtp.length < length) {\n        newOtp.push('');\n      }\n      setOtp(newOtp);\n    } else {\n      setOtp(Array(length).fill(''));\n    }\n  }, [value, length]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0].focus();\n    }\n  }, [autoFocus]);\n\n  const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>): void => {\n    const newValue: string = uppercase ? event.target.value.toUpperCase() : event.target.value;\n\n    if (newValue.length > 1) return;\n\n    if (type === 'number' && newValue && !/^\\d$/.test(newValue)) return;\n\n    if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;\n\n    const newOtp: string[] = [...otp];\n    newOtp[index] = newValue;\n    setOtp(newOtp);\n\n    const otpValue: string = newOtp.join('');\n\n    onChange?.({target: {value: otpValue}});\n\n    if (newValue && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(otpValue);\n    }\n  };\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>): void => {\n    if (event.key === 'Backspace') {\n      if (!otp[index] && index > 0) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index - 1] = '';\n        setOtp(newOtp);\n        inputRefs.current[index - 1]?.focus();\n        onChange?.({target: {value: newOtp.join('')}});\n      } else if (otp[index]) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index] = '';\n        setOtp(newOtp);\n        onChange?.({target: {value: newOtp.join('')}});\n      }\n    } else if (event.key === 'ArrowLeft' && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    } else if (event.key === 'ArrowRight' && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n\n      if (otp.every((digit: string) => digit !== '') && onComplete) {\n        onComplete(otp.join(''));\n      }\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n    event.preventDefault();\n\n    const rawData: string = event.clipboardData.getData('text');\n    // Filter first and let the copy loop below bound the result, so surrounding text such as\n    // \"Your code is 123456\" does not push the code itself past the cut-off.\n    const pastedData: string = uppercase ? rawData.toUpperCase() : rawData;\n\n    let validData = '';\n\n    Array.from(pastedData).forEach((char: string) => {\n      if (type === 'number' && !/^\\d$/.test(char)) return;\n      if (pattern && !new RegExp(pattern).test(char)) return;\n      validData += char;\n    });\n\n    const newOtp: string[] = Array(length).fill('');\n\n    for (let i = 0; i < Math.min(validData.length, length); i += 1) {\n      newOtp[i] = validData[i];\n    }\n\n    setOtp(newOtp);\n    onChange?.({target: {value: newOtp.join('')}});\n\n    const nextEmptyIndex: number = newOtp.findIndex((digit: string) => digit === '');\n    const focusIndex: number = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;\n\n    inputRefs.current[focusIndex]?.focus();\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(newOtp.join(''));\n    }\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('otp-field')), className)}\n      helperTextAlign=\"center\"\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input-container')), styles['inputContainer'])}>\n        {Array.from({length}, (_: unknown, index: number) => (\n          <input\n            key={index}\n            ref={(el: HTMLInputElement | null): void => {\n              if (el) inputRefs.current[index] = el;\n            }}\n            type={type === 'password' ? 'password' : 'text'}\n            inputMode={type === 'number' ? 'numeric' : 'text'}\n            value={otp[index] || ''}\n            onChange={(event: ChangeEvent<HTMLInputElement>): void => handleChange(index, event)}\n            onKeyDown={(event: KeyboardEvent<HTMLInputElement>): void => handleKeyDown(index, event)}\n            onPaste={handlePaste}\n            className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input')), styles['input'], {\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'error'))]: !!error,\n              [styles['inputError']]: !!error,\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'disabled'))]: !!disabled,\n              [styles['inputDisabled']]: !!disabled,\n            })}\n            maxLength={1}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-label={`${label || 'OTP'} digit ${index + 1}`}\n            aria-invalid={!!error}\n            aria-required={required}\n            autoComplete=\"one-time-code\"\n          />\n        ))}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default OtpField;\n"],"mappings":"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"}
+{"version":3,"file":"OtpField.cjs","names":["OtpField: FC<OtpInputProps>","useTheme","styles: Record<string, string>","useStyles","inputRefs: MutableRefObject<HTMLInputElement[]>","fieldId: string","helperTextId: string | undefined","newOtp: string[]","newValue: string","otpValue: string","rawData: string","pastedData: string","nextEmptyIndex: number","focusIndex: number","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  ClipboardEvent,\n  FC,\n  KeyboardEvent,\n  ChangeEvent,\n  MutableRefObject,\n  useRef,\n  useEffect,\n  useState,\n  CSSProperties,\n  useId,\n} from 'react';\nimport useStyles from './OtpField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type OtpFieldType = 'text' | 'number' | 'password';\n\nexport interface OtpInputProps {\n  /**\n   * Auto focus the first input on mount\n   */\n  autoFocus?: boolean;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the OTP input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the OTP input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the OTP input\n   */\n  label?: string;\n  /**\n   * Number of OTP input fields\n   */\n  length?: number;\n  /**\n   * Callback function called when OTP value changes\n   */\n  onChange?: (event: {target: {value: string}}) => void;\n  /**\n   * Callback function called when OTP input is complete\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * Pattern for numeric input validation\n   */\n  pattern?: string;\n  /**\n   * Placeholder character for each input field\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n  /**\n   * Type of input (text, number, password)\n   */\n  type?: OtpFieldType;\n  /**\n   * Upper-case entered characters before emitting them\n   */\n  uppercase?: boolean;\n  /**\n   * Current OTP value\n   */\n  value?: string;\n}\n\nconst OtpField: FC<OtpInputProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  length = 6,\n  value = '',\n  onChange,\n  onComplete,\n  type = 'text',\n  placeholder = '',\n  style = {},\n  autoFocus = false,\n  pattern,\n  uppercase = false,\n}: OtpInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, length);\n  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));\n  const inputRefs: MutableRefObject<HTMLInputElement[]> = useRef<HTMLInputElement[]>([]);\n  const fieldId: string = useId();\n  const labelId = `${fieldId}-label`;\n  const helperTextId: string | undefined = error || helperText ? `${fieldId}-helper-text` : undefined;\n\n  useEffect(() => {\n    inputRefs.current = inputRefs.current.slice(0, length);\n  }, [length]);\n\n  useEffect(() => {\n    if (value) {\n      const newOtp: string[] = value.split('').slice(0, length);\n      while (newOtp.length < length) {\n        newOtp.push('');\n      }\n      setOtp(newOtp);\n    } else {\n      setOtp(Array(length).fill(''));\n    }\n  }, [value, length]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0].focus();\n    }\n  }, [autoFocus]);\n\n  const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>): void => {\n    const newValue: string = uppercase ? event.target.value.toUpperCase() : event.target.value;\n\n    if (newValue.length > 1) return;\n\n    if (type === 'number' && newValue && !/^\\d$/.test(newValue)) return;\n\n    if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;\n\n    const newOtp: string[] = [...otp];\n    newOtp[index] = newValue;\n    setOtp(newOtp);\n\n    const otpValue: string = newOtp.join('');\n\n    onChange?.({target: {value: otpValue}});\n\n    if (newValue && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(otpValue);\n    }\n  };\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>): void => {\n    if (event.key === 'Backspace') {\n      if (!otp[index] && index > 0) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index - 1] = '';\n        setOtp(newOtp);\n        inputRefs.current[index - 1]?.focus();\n        onChange?.({target: {value: newOtp.join('')}});\n      } else if (otp[index]) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index] = '';\n        setOtp(newOtp);\n        onChange?.({target: {value: newOtp.join('')}});\n      }\n    } else if (event.key === 'ArrowLeft' && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    } else if (event.key === 'ArrowRight' && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n\n      if (otp.every((digit: string) => digit !== '') && onComplete) {\n        onComplete(otp.join(''));\n      }\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n    event.preventDefault();\n\n    const rawData: string = event.clipboardData.getData('text');\n    // Filter first and let the copy loop below bound the result, so surrounding text such as\n    // \"Your code is 123456\" does not push the code itself past the cut-off.\n    const pastedData: string = uppercase ? rawData.toUpperCase() : rawData;\n\n    let validData = '';\n\n    Array.from(pastedData).forEach((char: string) => {\n      if (type === 'number' && !/^\\d$/.test(char)) return;\n      if (pattern && !new RegExp(pattern).test(char)) return;\n      validData += char;\n    });\n\n    const newOtp: string[] = Array(length).fill('');\n\n    for (let i = 0; i < Math.min(validData.length, length); i += 1) {\n      newOtp[i] = validData[i];\n    }\n\n    setOtp(newOtp);\n    onChange?.({target: {value: newOtp.join('')}});\n\n    const nextEmptyIndex: number = newOtp.findIndex((digit: string) => digit === '');\n    const focusIndex: number = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;\n\n    inputRefs.current[focusIndex]?.focus();\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(newOtp.join(''));\n    }\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      helperTextId={helperTextId}\n      className={cx(withVendorCSSClassPrefix(bem('otp-field')), className)}\n      helperTextAlign=\"center\"\n      style={style}\n    >\n      {label && (\n        <InputLabel id={labelId} required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div\n        role=\"group\"\n        aria-labelledby={label ? labelId : undefined}\n        aria-describedby={helperTextId}\n        className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input-container')), styles['inputContainer'])}\n      >\n        {Array.from({length}, (_: unknown, index: number) => (\n          <input\n            key={index}\n            ref={(el: HTMLInputElement | null): void => {\n              if (el) inputRefs.current[index] = el;\n            }}\n            type={type === 'password' ? 'password' : 'text'}\n            inputMode={type === 'number' ? 'numeric' : 'text'}\n            value={otp[index] || ''}\n            onChange={(event: ChangeEvent<HTMLInputElement>): void => handleChange(index, event)}\n            onKeyDown={(event: KeyboardEvent<HTMLInputElement>): void => handleKeyDown(index, event)}\n            onPaste={handlePaste}\n            className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input')), styles['input'], {\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'error'))]: !!error,\n              [styles['inputError']]: !!error,\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'disabled'))]: !!disabled,\n              [styles['inputDisabled']]: !!disabled,\n            })}\n            maxLength={1}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-label={`${label || 'OTP'} digit ${index + 1}`}\n            aria-invalid={!!error}\n            aria-required={required}\n            aria-describedby={helperTextId}\n            autoComplete=\"one-time-code\"\n          />\n        ))}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default OtpField;\n"],"mappings":"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"}

package/dist/cjs/components/primitives/PasswordField/PasswordField.cjs

@@ -17,7 +17,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 * Password field component with show/hide toggle functionality.
 * This component extends TextField and adds password visibility toggle functionality.
 */
-const PasswordField = ({ autoComplete = "current-password", onChange, className, disabled, error,...textFieldProps }) => {
+const PasswordField = ({ autoComplete = "current-password", hideLabel = "Hide password", onChange, showLabel = "Show password", className, disabled, error,...textFieldProps }) => {
 	const { theme, colorScheme } = require_useTheme.default();
 	const [showPassword, setShowPassword] = (0, react.useState)(false);
 	const styles = require_PasswordField_styles.default(theme, colorScheme, showPassword, !!disabled, !!error);
@@ -33,6 +33,7 @@ const PasswordField = ({ autoComplete = "current-password", onChange, className,
 		autoComplete,
 		disabled,
 		error,
+		endIconLabel: showPassword ? hideLabel : showLabel,
 		endIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {
 			width: 16,
 			height: 16,

package/dist/cjs/components/primitives/PasswordField/PasswordField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.cjs","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField","cx"],"sources":["../../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, SVGProps, useState} from 'react';\nimport useStyles from './PasswordField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Eye from '../Icons/Eye';\nimport EyeOff from '../Icons/EyeOff';\nimport TextField, {TextFieldProps} from '../TextField/TextField';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {\n  /**\n   * The browser autofill hint. Defaults to `current-password`; set `new-password` on the\n   * fields of a change-password or sign-up form so password managers offer to generate and\n   * store a new credential instead of filling the existing one.\n   */\n  autoComplete?: string;\n  /**\n   * Callback function when the field value changes\n   */\n  onChange: (value: string) => void;\n}\n\n/**\n * Password field component with show/hide toggle functionality.\n * This component extends TextField and adds password visibility toggle functionality.\n */\nconst PasswordField: FC<PasswordFieldProps> = ({\n  autoComplete = 'current-password',\n  onChange,\n  className,\n  disabled,\n  error,\n  ...textFieldProps\n}: PasswordFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const [showPassword, setShowPassword] = useState(false);\n  const styles: Record<string, string> = useStyles(theme, colorScheme, showPassword, !!disabled, !!error);\n\n  const togglePasswordVisibility = (): void => {\n    if (!disabled) {\n      setShowPassword(!showPassword);\n    }\n  };\n\n  const IconComponent: FC<SVGProps<SVGSVGElement>> = showPassword ? EyeOff : Eye;\n\n  return (\n    <TextField\n      {...textFieldProps}\n      className={cx(withVendorCSSClassPrefix(bem('password-field')), className)}\n      type={showPassword ? 'text' : 'password'}\n      onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n      autoComplete={autoComplete}\n      disabled={disabled}\n      error={error}\n      endIcon={\n        <IconComponent\n          width={16}\n          height={16}\n          className={cx(\n            withVendorCSSClassPrefix(bem('password-field', 'toggle-icon')),\n            styles['toggleIcon'],\n            showPassword ? styles['visibleIcon'] : styles['hiddenIcon'],\n          )}\n        />\n      }\n      onEndIconClick={togglePasswordVisibility}\n    />\n  );\n};\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,iBAAyC,EAC7C,eAAe,oBACf,UACA,WACA,UACA,MACA,GAAG,qBACqB;CACxB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,CAAC,cAAc,uCAA4B,MAAM;CACvD,MAAMC,SAAiCC,qCAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,yBAASC;AAE3E,QACE,2CAACC;EACC,GAAI;EACJ,WAAWC,kGAAgC,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAChE;EACJ;EACH;EACP,SACE,2CAAC;GACC,OAAO;GACP,QAAQ;GACR,WAAWA,kGACoB,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}
+{"version":3,"file":"PasswordField.cjs","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField","cx"],"sources":["../../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, SVGProps, useState} from 'react';\nimport useStyles from './PasswordField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Eye from '../Icons/Eye';\nimport EyeOff from '../Icons/EyeOff';\nimport TextField, {TextFieldProps} from '../TextField/TextField';\n\nexport interface PasswordFieldProps\n  extends Omit<TextFieldProps, 'type' | 'endIcon' | 'endIconLabel' | 'onEndIconClick' | 'onChange'> {\n  /**\n   * The browser autofill hint. Defaults to `current-password`; set `new-password` on the\n   * fields of a change-password or sign-up form so password managers offer to generate and\n   * store a new credential instead of filling the existing one.\n   */\n  autoComplete?: string;\n  /**\n   * Accessible name of the toggle button while the password is visible\n   */\n  hideLabel?: string;\n  /**\n   * Callback function when the field value changes\n   */\n  onChange: (value: string) => void;\n  /**\n   * Accessible name of the toggle button while the password is hidden\n   */\n  showLabel?: string;\n}\n\n/**\n * Password field component with show/hide toggle functionality.\n * This component extends TextField and adds password visibility toggle functionality.\n */\nconst PasswordField: FC<PasswordFieldProps> = ({\n  autoComplete = 'current-password',\n  hideLabel = 'Hide password',\n  onChange,\n  showLabel = 'Show password',\n  className,\n  disabled,\n  error,\n  ...textFieldProps\n}: PasswordFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const [showPassword, setShowPassword] = useState(false);\n  const styles: Record<string, string> = useStyles(theme, colorScheme, showPassword, !!disabled, !!error);\n\n  const togglePasswordVisibility = (): void => {\n    if (!disabled) {\n      setShowPassword(!showPassword);\n    }\n  };\n\n  const IconComponent: FC<SVGProps<SVGSVGElement>> = showPassword ? EyeOff : Eye;\n\n  return (\n    <TextField\n      {...textFieldProps}\n      className={cx(withVendorCSSClassPrefix(bem('password-field')), className)}\n      type={showPassword ? 'text' : 'password'}\n      onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n      autoComplete={autoComplete}\n      disabled={disabled}\n      error={error}\n      endIconLabel={showPassword ? hideLabel : showLabel}\n      endIcon={\n        <IconComponent\n          width={16}\n          height={16}\n          className={cx(\n            withVendorCSSClassPrefix(bem('password-field', 'toggle-icon')),\n            styles['toggleIcon'],\n            showPassword ? styles['visibleIcon'] : styles['hiddenIcon'],\n          )}\n        />\n      }\n      onEndIconClick={togglePasswordVisibility}\n    />\n  );\n};\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,MAAMA,iBAAyC,EAC7C,eAAe,oBACf,YAAY,iBACZ,UACA,YAAY,iBACZ,WACA,UACA,MACA,GAAG,qBACqB;CACxB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,CAAC,cAAc,uCAA4B,MAAM;CACvD,MAAMC,SAAiCC,qCAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,yBAASC;AAE3E,QACE,2CAACC;EACC,GAAI;EACJ,WAAWC,kGAAgC,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAChE;EACJ;EACH;EACP,cAAc,eAAe,YAAY;EACzC,SACE,2CAAC;GACC,OAAO;GACP,QAAQ;GACR,WAAWA,kGACoB,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}

package/dist/cjs/components/primitives/Select/ResourceSelect.cjs

@@ -0,0 +1,104 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_useInfiniteOptions = require('../../../hooks/useInfiniteOptions.cjs');
+const require_Select = require('./Select.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/primitives/Select/ResourceSelect.tsx
+const NO_PAGES = () => Promise.resolve({
+	nextOffset: null,
+	options: []
+});
+/**
+* The part the `USER_SELECT`, `AUTH_FLOW_SELECT` and `USER_TYPE_SELECT` pickers share: a {@link Select} that loads
+* one resource page by page. The list restarts when the page function, filter or page size changes.
+*/
+const ResourceSelect = ({ "aria-label": ariaLabel, bemBlock, className, component, defaults, emptyText, fallbackMessages, fetchPage, filter, id, label, mapping, messageKey, name, onError, pageSize = __thunderid_browser.SelectConstants.DEFAULT_PAGE_SIZE, placeholder, resource, type,...rest }) => {
+	const { t } = require_useTranslation.default();
+	const effectivePageSize = (0, __thunderid_browser.resolvePageSize)(pageSize);
+	const live = (0, react.useRef)({
+		component,
+		defaults,
+		mapping
+	});
+	(0, react.useEffect)(() => {
+		live.current = {
+			component,
+			defaults,
+			mapping
+		};
+	});
+	const load = (0, react.useMemo)(() => (0, __thunderid_browser.createResourceOptionsLoader)({
+		get component() {
+			return live.current.component ?? {
+				id: id ?? name ?? bemBlock,
+				type
+			};
+		},
+		get defaults() {
+			return live.current.defaults;
+		},
+		fetchPage: fetchPage ?? NO_PAGES,
+		filter,
+		get mapping() {
+			return live.current.mapping;
+		},
+		pageSize: effectivePageSize,
+		resource
+	}), [
+		bemBlock,
+		effectivePageSize,
+		fetchPage,
+		filter,
+		id,
+		name,
+		resource,
+		type
+	]);
+	const { hasMore, loading, onLoadMore, options, reset } = require_useInfiniteOptions.default({
+		load,
+		onError
+	});
+	const previousLoadRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		const previousLoad = previousLoadRef.current;
+		previousLoadRef.current = load;
+		if (previousLoad !== null && previousLoad !== load) reset();
+		if (fetchPage) onLoadMore();
+	}, [
+		fetchPage,
+		load,
+		onLoadMore,
+		reset
+	]);
+	const accessibleName = [
+		ariaLabel,
+		label,
+		placeholder,
+		t(`elements.fields.${messageKey}.aria_label`)
+	].find((text) => Boolean(text)) ?? fallbackMessages.ariaLabel;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.default, {
+		...rest,
+		"aria-label": accessibleName,
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(bemBlock)), className),
+		emptyText: emptyText ?? (t(`elements.fields.${messageKey}.empty`) || fallbackMessages.empty),
+		id,
+		label,
+		loading,
+		name,
+		onLoadMore: fetchPage && hasMore ? onLoadMore : void 0,
+		options,
+		placeholder
+	});
+};
+var ResourceSelect_default = ResourceSelect;
+
+//#endregion
+exports.default = ResourceSelect_default;
+//# sourceMappingURL=ResourceSelect.cjs.map

package/dist/cjs/components/primitives/Select/ResourceSelect.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceSelect.cjs","names":["NO_PAGES: FetchSelectPage","ResourceSelect: FC<ResourceSelectProps>","SelectConstants","useTranslation","effectivePageSize: number","load: ResourceOptionsLoader","useInfiniteOptions","previousLoad: ResourceOptionsLoader | null","accessibleName: string","Select","cx"],"sources":["../../../../../src/components/primitives/Select/ResourceSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  bem,\n  createResourceOptionsLoader,\n  SelectConstants,\n  resolvePageSize,\n  withVendorCSSClassPrefix,\n} from '@thunderid/browser';\nimport type {\n  EmbeddedFlowComponent,\n  EmbeddedFlowComponentType,\n  FetchSelectPage,\n  ResourceOptionsLoader,\n  SelectOptionDefaults,\n  SelectOptionMapping,\n} from '@thunderid/browser';\nimport {FC, useEffect, useMemo, useRef} from 'react';\nimport Select, {SelectProps} from './Select';\nimport useInfiniteOptions from '../../../hooks/useInfiniteOptions';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\n\nexport interface ResourceSelectProps extends Omit<SelectProps, 'loading' | 'onError' | 'onLoadMore' | 'options'> {\n  /** Block name for the picker's CSS class, e.g. `user-select`. */\n  bemBlock: string;\n  /** The flow component the page function is called for. Defaults to one built from `type`. */\n  component?: EmbeddedFlowComponent;\n  defaults?: SelectOptionDefaults;\n  /** Wording used when the translations for the keys under `messageKey` are empty. */\n  fallbackMessages: {ariaLabel: string; empty: string};\n  /** Loads one page of the resource. Nothing is requested while this is unset. */\n  fetchPage?: FetchSelectPage;\n  filter?: string;\n  mapping?: SelectOptionMapping;\n  /** Translation key group under `elements.fields`, e.g. `user_select`. */\n  messageKey: string;\n  /** Called with the error of every failed load. The list itself shows no error. */\n  onError?: (error: Error) => void;\n  /** Options per request. Defaults to 30 and is capped at 100. */\n  pageSize?: number;\n  /** What is loaded, in the words of the failure log, e.g. `users`. */\n  resource: string;\n  /** The flow component type this picker stands for. */\n  type: EmbeddedFlowComponentType;\n}\n\nconst NO_PAGES: FetchSelectPage = () => Promise.resolve({nextOffset: null, options: []});\n\n/**\n * The part the `USER_SELECT`, `AUTH_FLOW_SELECT` and `USER_TYPE_SELECT` pickers share: a {@link Select} that loads\n * one resource page by page. The list restarts when the page function, filter or page size changes.\n */\nconst ResourceSelect: FC<ResourceSelectProps> = ({\n  'aria-label': ariaLabel,\n  bemBlock,\n  className,\n  component,\n  defaults,\n  emptyText,\n  fallbackMessages,\n  fetchPage,\n  filter,\n  id,\n  label,\n  mapping,\n  messageKey,\n  name,\n  onError,\n  pageSize = SelectConstants.DEFAULT_PAGE_SIZE,\n  placeholder,\n  resource,\n  type,\n  ...rest\n}: ResourceSelectProps) => {\n  const {t} = useTranslation();\n  const effectivePageSize: number = resolvePageSize(pageSize);\n\n  const live = useRef({component, defaults, mapping});\n\n  useEffect(() => {\n    live.current = {component, defaults, mapping};\n  });\n\n  // Only the page function, filter and page size restart the list. Mapping, defaults and component are read when\n  // a page loads, so a parent that passes a new object on every render does not reload it.\n  const load: ResourceOptionsLoader = useMemo(\n    () =>\n      createResourceOptionsLoader({\n        get component(): EmbeddedFlowComponent {\n          return live.current.component ?? ({id: id ?? name ?? bemBlock, type} as EmbeddedFlowComponent);\n        },\n        get defaults(): SelectOptionDefaults | undefined {\n          return live.current.defaults;\n        },\n        fetchPage: fetchPage ?? NO_PAGES,\n        filter,\n        get mapping(): SelectOptionMapping | undefined {\n          return live.current.mapping;\n        },\n        pageSize: effectivePageSize,\n        resource,\n      }),\n    [bemBlock, effectivePageSize, fetchPage, filter, id, name, resource, type],\n  );\n  const {hasMore, loading, onLoadMore, options, reset} = useInfiniteOptions({load, onError});\n\n  const previousLoadRef = useRef<ResourceOptionsLoader | null>(null);\n\n  // The first batch is requested when the picker renders. A different page function, filter or page size starts\n  // the list again from the beginning.\n  useEffect(() => {\n    const previousLoad: ResourceOptionsLoader | null = previousLoadRef.current;\n\n    previousLoadRef.current = load;\n\n    if (previousLoad !== null && previousLoad !== load) {\n      reset();\n    }\n\n    if (fetchPage) {\n      onLoadMore();\n    }\n  }, [fetchPage, load, onLoadMore, reset]);\n\n  // The first of these that is not empty names the select. An empty string is not a name, which is why this is not a\n  // chain of `??`.\n  const accessibleName: string =\n    [ariaLabel, label, placeholder, t(`elements.fields.${messageKey}.aria_label`)].find((text) => Boolean(text)) ??\n    fallbackMessages.ariaLabel;\n\n  return (\n    <Select\n      {...rest}\n      aria-label={accessibleName}\n      className={cx(withVendorCSSClassPrefix(bem(bemBlock)), className)}\n      emptyText={emptyText ?? (t(`elements.fields.${messageKey}.empty`) || fallbackMessages.empty)}\n      id={id}\n      label={label}\n      loading={loading}\n      name={name}\n      onLoadMore={fetchPage && hasMore ? onLoadMore : undefined}\n      options={options}\n      placeholder={placeholder}\n    />\n  );\n};\n\nexport default ResourceSelect;\n"],"mappings":";;;;;;;;;;;;;AAgDA,MAAMA,iBAAkC,QAAQ,QAAQ;CAAC,YAAY;CAAM,SAAS,EAAE;CAAC,CAAC;;;;;AAMxF,MAAMC,kBAA2C,EAC/C,cAAc,WACd,UACA,WACA,WACA,UACA,WACA,kBACA,WACA,QACA,IACA,OACA,SACA,YACA,MACA,SACA,WAAWC,oCAAgB,mBAC3B,aACA,UACA,KACA,GAAG,WACsB;CACzB,MAAM,EAAC,MAAKC,gCAAgB;CAC5B,MAAMC,6DAA4C,SAAS;CAE3D,MAAM,yBAAc;EAAC;EAAW;EAAU;EAAQ,CAAC;AAEnD,4BAAgB;AACd,OAAK,UAAU;GAAC;GAAW;GAAU;GAAQ;GAC7C;CAIF,MAAMC,qFAE0B;EAC1B,IAAI,YAAmC;AACrC,UAAO,KAAK,QAAQ,aAAc;IAAC,IAAI,MAAM,QAAQ;IAAU;IAAK;;EAEtE,IAAI,WAA6C;AAC/C,UAAO,KAAK,QAAQ;;EAEtB,WAAW,aAAa;EACxB;EACA,IAAI,UAA2C;AAC7C,UAAO,KAAK,QAAQ;;EAEtB,UAAU;EACV;EACD,CAAC,EACJ;EAAC;EAAU;EAAmB;EAAW;EAAQ;EAAI;EAAM;EAAU;EAAK,CAC3E;CACD,MAAM,EAAC,SAAS,SAAS,YAAY,SAAS,UAASC,mCAAmB;EAAC;EAAM;EAAQ,CAAC;CAE1F,MAAM,oCAAuD,KAAK;AAIlE,4BAAgB;EACd,MAAMC,eAA6C,gBAAgB;AAEnE,kBAAgB,UAAU;AAE1B,MAAI,iBAAiB,QAAQ,iBAAiB,KAC5C,QAAO;AAGT,MAAI,UACF,aAAY;IAEb;EAAC;EAAW;EAAM;EAAY;EAAM,CAAC;CAIxC,MAAMC,iBACJ;EAAC;EAAW;EAAO;EAAa,EAAE,mBAAmB,WAAW,aAAa;EAAC,CAAC,MAAM,SAAS,QAAQ,KAAK,CAAC,IAC5G,iBAAiB;AAEnB,QACE,2CAACC;EACC,GAAI;EACJ,cAAY;EACZ,WAAWC,kGAAgC,SAAS,CAAC,EAAE,UAAU;EACjE,WAAW,cAAc,EAAE,mBAAmB,WAAW,QAAQ,IAAI,iBAAiB;EAClF;EACG;EACE;EACH;EACN,YAAY,aAAa,UAAU,aAAa;EACvC;EACI;GACb;;AAIN,6BAAe"}