@thunderid/react 1.3.3 → 1.4.1

package/dist/components/primitives/AffixedField/AffixedField.js

@@ -27,6 +27,9 @@ const AffixedField = ({ label, error, required, className, disabled, helperText,
 	const hasFixedPrefix = prefixList.length === 1;
 	const styles = AffixedField_styles_default(theme, colorScheme, disabled ?? false, hasError, hasPrefix);
 	const prefixDescriptionId = `${useId()}-prefix`;
+	const generatedId = useId();
+	const inputId = rest.id ?? generatedId;
+	const helperTextId = error || helperText ? `${inputId}-helper-text` : void 0;
 	const containerClassName = cx(withVendorCSSClassPrefix(bem("affixed-field", "container")), styles["inputContainer"]);
 	const inputClassName = cx(withVendorCSSClassPrefix(bem("affixed-field", "input")), styles["input"]);
 	const renderPrefix = () => {
@@ -56,9 +59,11 @@ const AffixedField = ({ label, error, required, className, disabled, helperText,
 	return /* @__PURE__ */ jsxs(FormControl_default, {
 		error,
 		helperText,
+		helperTextId,
 		className: cx(withVendorCSSClassPrefix(bem("affixed-field")), className),
 		style,
 		children: [label && /* @__PURE__ */ jsx(InputLabel_default, {
+			htmlFor: inputId,
 			required,
 			error: hasError,
 			children: label
@@ -71,7 +76,12 @@ const AffixedField = ({ label, error, required, className, disabled, helperText,
 				"aria-invalid": hasError,
 				"aria-required": required,
 				...rest,
-				"aria-describedby": [rest["aria-describedby"], hasFixedPrefix ? prefixDescriptionId : void 0].filter(Boolean).join(" ") || void 0
+				id: inputId,
+				"aria-describedby": [
+					rest["aria-describedby"],
+					hasFixedPrefix ? prefixDescriptionId : void 0,
+					helperTextId
+				].filter(Boolean).join(" ") || void 0
 			})]
 		})]
 	});

package/dist/components/primitives/AffixedField/AffixedField.js.map

@@ -1 +1 @@
-{"version":3,"file":"AffixedField.js","names":["AffixedField: FC<AffixedFieldProps>","useTheme","hasError: boolean","prefixList: PrefixOption[]","hasPrefix: boolean","hasFixedPrefix: boolean","styles: Record<string, string>","useStyles","prefixDescriptionId: string","containerClassName: string","inputClassName: string","selectedValue: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/AffixedField/AffixedField.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {PrefixOption, bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {ChangeEvent, FC, InputHTMLAttributes, ReactElement, useId} from 'react';\nimport useStyles from './AffixedField.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 AffixedFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'prefix'> {\n  /** Additional CSS class names applied to the outer form control. */\n  className?: string;\n  /** Whether the field is disabled. */\n  disabled?: boolean;\n  /** Error message to render below the field. */\n  error?: string;\n  /** Helper text to render below the field. */\n  helperText?: string;\n  /** Label rendered above the field. */\n  label?: string;\n  /**\n   * Called when the user changes the selected prefix. Only fires when `prefixes` is an\n   * array with two or more entries and the user picks a different one.\n   */\n  onPrefixChange?: (prefixValue: string) => void;\n  /**\n   * Currently selected prefix `value` (must match one of the resolved prefix entries'\n   * `value`). Required when `prefixes` resolves to a non-empty list. Ignored otherwise.\n   */\n  prefixValue?: string;\n  /**\n   * Leading affix. `string` renders as a fixed span; `PrefixOption[]` renders as a fixed\n   * span (single entry) or dropdown (multiple entries). Empty or undefined renders a\n   * plain input with no leading element.\n   */\n  prefixes?: string | PrefixOption[];\n  /** Whether the field is required. */\n  required?: boolean;\n}\n\n/**\n * Converts the polymorphic `prefixes` prop into a uniform list. A string is treated\n * as a single fixed entry so the rest of the component can iterate a single shape.\n */\nconst normalizePrefixes = (prefixes: string | PrefixOption[] | undefined): PrefixOption[] => {\n  if (typeof prefixes === 'string') {\n    return prefixes.length > 0 ? [{label: prefixes, value: prefixes}] : [];\n  }\n  return prefixes ?? [];\n};\n\nconst AffixedField: FC<AffixedFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  prefixes,\n  prefixValue,\n  onPrefixChange,\n  type = 'text',\n  style = {},\n  ...rest\n}: AffixedFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError: boolean = !!error;\n  const prefixList: PrefixOption[] = normalizePrefixes(prefixes);\n  const hasPrefix: boolean = prefixList.length > 0;\n  const hasFixedPrefix: boolean = prefixList.length === 1;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError, hasPrefix);\n  // Stable id for the visually-hidden prefix announcement; only referenced when a\n  // fixed prefix is present, but generated unconditionally so the hook order is stable.\n  const prefixDescriptionId: string = `${useId()}-prefix`;\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('affixed-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const inputClassName: string = cx(withVendorCSSClassPrefix(bem('affixed-field', 'input')), styles['input']);\n\n  const renderPrefix = (): ReactElement | null => {\n    if (prefixList.length === 0) return null;\n\n    if (prefixList.length === 1) {\n      return (\n        <>\n          <span\n            className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-span')), styles['prefixSpan'])}\n            aria-hidden=\"true\"\n          >\n            {prefixList[0].label}\n          </span>\n          {/* Assistive-tech-only mirror of the fixed prefix; wired to the input via aria-describedby. */}\n          <span id={prefixDescriptionId} className={styles['visuallyHidden']}>\n            {prefixList[0].label}\n          </span>\n        </>\n      );\n    }\n\n    const selectedValue: string = prefixValue ?? prefixList[0].value;\n    return (\n      <select\n        className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-select')), styles['prefixSelect'])}\n        value={selectedValue}\n        disabled={disabled}\n        onChange={(e: ChangeEvent<HTMLSelectElement>): void => onPrefixChange?.(e.target.value)}\n        aria-label=\"Prefix\"\n      >\n        {prefixList.map((p: PrefixOption) => (\n          <option key={p.value} value={p.value}>\n            {p.label}\n          </option>\n        ))}\n      </select>\n    );\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('affixed-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {renderPrefix()}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n          aria-describedby={\n            [rest['aria-describedby'], hasFixedPrefix ? prefixDescriptionId : undefined].filter(Boolean).join(' ') ||\n            undefined\n          }\n        />\n      </div>\n    </FormControl>\n  );\n};\n\nexport default AffixedField;\n"],"mappings":";;;;;;;;;;;;;;AA8CA,MAAM,qBAAqB,aAAkE;AAC3F,KAAI,OAAO,aAAa,SACtB,QAAO,SAAS,SAAS,IAAI,CAAC;EAAC,OAAO;EAAU,OAAO;EAAS,CAAC,GAAG,EAAE;AAExE,QAAO,YAAY,EAAE;;AAGvB,MAAMA,gBAAuC,EAC3C,OACA,OACA,UACA,WACA,UACA,YACA,UACA,aACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACoB;CACvB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,WAAoB,CAAC,CAAC;CAC5B,MAAMC,aAA6B,kBAAkB,SAAS;CAC9D,MAAMC,YAAqB,WAAW,SAAS;CAC/C,MAAMC,iBAA0B,WAAW,WAAW;CACtD,MAAMC,SAAiCC,4BAAU,OAAO,aAAa,YAAY,OAAO,UAAU,UAAU;CAG5G,MAAMC,sBAA8B,GAAG,OAAO,CAAC;CAE/C,MAAMC,qBAA6B,GACjC,yBAAyB,IAAI,iBAAiB,YAAY,CAAC,EAC3D,OAAO,kBACR;CAED,MAAMC,iBAAyB,GAAG,yBAAyB,IAAI,iBAAiB,QAAQ,CAAC,EAAE,OAAO,SAAS;CAE3G,MAAM,qBAA0C;AAC9C,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,MAAI,WAAW,WAAW,EACxB,QACE,8CACE,oBAAC;GACC,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,cAAc,CAAC,EAAE,OAAO,cAAc;GAClG,eAAY;aAEX,WAAW,GAAG;IACV,EAEP,oBAAC;GAAK,IAAI;GAAqB,WAAW,OAAO;aAC9C,WAAW,GAAG;IACV,IACN;EAIP,MAAMC,gBAAwB,eAAe,WAAW,GAAG;AAC3D,SACE,oBAAC;GACC,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,gBAAgB,CAAC,EAAE,OAAO,gBAAgB;GACtG,OAAO;GACG;GACV,WAAW,MAA4C,iBAAiB,EAAE,OAAO,MAAM;GACvF,cAAW;aAEV,WAAW,KAAK,MACf,oBAAC;IAAqB,OAAO,EAAE;cAC5B,EAAE;MADQ,EAAE,MAEN,CACT;IACK;;AAIb,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,gBAAgB,CAAC,EAAE,UAAU;EACjE;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,qBAAC;GAAI,WAAW;cACb,cAAc,EACf,oBAAC;IACC,WAAW;IACL;IACI;IACV,gBAAc;IACd,iBAAe;IACf,GAAI;IACJ,oBACE,CAAC,KAAK,qBAAqB,iBAAiB,sBAAsB,OAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IACtG;KAEF;IACE;GACM;;AAIlB,2BAAe"}
+{"version":3,"file":"AffixedField.js","names":["AffixedField: FC<AffixedFieldProps>","useTheme","hasError: boolean","prefixList: PrefixOption[]","hasPrefix: boolean","hasFixedPrefix: boolean","styles: Record<string, string>","useStyles","prefixDescriptionId: string","generatedId: string","inputId: string","helperTextId: string | undefined","containerClassName: string","inputClassName: string","selectedValue: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/AffixedField/AffixedField.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {PrefixOption, bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {ChangeEvent, FC, InputHTMLAttributes, ReactElement, useId} from 'react';\nimport useStyles from './AffixedField.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 AffixedFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'prefix'> {\n  /** Additional CSS class names applied to the outer form control. */\n  className?: string;\n  /** Whether the field is disabled. */\n  disabled?: boolean;\n  /** Error message to render below the field. */\n  error?: string;\n  /** Helper text to render below the field. */\n  helperText?: string;\n  /** Label rendered above the field. */\n  label?: string;\n  /**\n   * Called when the user changes the selected prefix. Only fires when `prefixes` is an\n   * array with two or more entries and the user picks a different one.\n   */\n  onPrefixChange?: (prefixValue: string) => void;\n  /**\n   * Currently selected prefix `value` (must match one of the resolved prefix entries'\n   * `value`). Required when `prefixes` resolves to a non-empty list. Ignored otherwise.\n   */\n  prefixValue?: string;\n  /**\n   * Leading affix. `string` renders as a fixed span; `PrefixOption[]` renders as a fixed\n   * span (single entry) or dropdown (multiple entries). Empty or undefined renders a\n   * plain input with no leading element.\n   */\n  prefixes?: string | PrefixOption[];\n  /** Whether the field is required. */\n  required?: boolean;\n}\n\n/**\n * Converts the polymorphic `prefixes` prop into a uniform list. A string is treated\n * as a single fixed entry so the rest of the component can iterate a single shape.\n */\nconst normalizePrefixes = (prefixes: string | PrefixOption[] | undefined): PrefixOption[] => {\n  if (typeof prefixes === 'string') {\n    return prefixes.length > 0 ? [{label: prefixes, value: prefixes}] : [];\n  }\n  return prefixes ?? [];\n};\n\nconst AffixedField: FC<AffixedFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  prefixes,\n  prefixValue,\n  onPrefixChange,\n  type = 'text',\n  style = {},\n  ...rest\n}: AffixedFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError: boolean = !!error;\n  const prefixList: PrefixOption[] = normalizePrefixes(prefixes);\n  const hasPrefix: boolean = prefixList.length > 0;\n  const hasFixedPrefix: boolean = prefixList.length === 1;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError, hasPrefix);\n  // Stable id for the visually-hidden prefix announcement; only referenced when a\n  // fixed prefix is present, but generated unconditionally so the hook order is stable.\n  const prefixDescriptionId: string = `${useId()}-prefix`;\n  const generatedId: string = useId();\n  const inputId: string = rest.id ?? generatedId;\n  const helperTextId: string | undefined = error || helperText ? `${inputId}-helper-text` : undefined;\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('affixed-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const inputClassName: string = cx(withVendorCSSClassPrefix(bem('affixed-field', 'input')), styles['input']);\n\n  const renderPrefix = (): ReactElement | null => {\n    if (prefixList.length === 0) return null;\n\n    if (prefixList.length === 1) {\n      return (\n        <>\n          <span\n            className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-span')), styles['prefixSpan'])}\n            aria-hidden=\"true\"\n          >\n            {prefixList[0].label}\n          </span>\n          {/* Assistive-tech-only mirror of the fixed prefix; wired to the input via aria-describedby. */}\n          <span id={prefixDescriptionId} className={styles['visuallyHidden']}>\n            {prefixList[0].label}\n          </span>\n        </>\n      );\n    }\n\n    const selectedValue: string = prefixValue ?? prefixList[0].value;\n    return (\n      <select\n        className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-select')), styles['prefixSelect'])}\n        value={selectedValue}\n        disabled={disabled}\n        onChange={(e: ChangeEvent<HTMLSelectElement>): void => onPrefixChange?.(e.target.value)}\n        aria-label=\"Prefix\"\n      >\n        {prefixList.map((p: PrefixOption) => (\n          <option key={p.value} value={p.value}>\n            {p.label}\n          </option>\n        ))}\n      </select>\n    );\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      helperTextId={helperTextId}\n      className={cx(withVendorCSSClassPrefix(bem('affixed-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel htmlFor={inputId} required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {renderPrefix()}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n          id={inputId}\n          aria-describedby={\n            [rest['aria-describedby'], hasFixedPrefix ? prefixDescriptionId : undefined, helperTextId]\n              .filter(Boolean)\n              .join(' ') || undefined\n          }\n        />\n      </div>\n    </FormControl>\n  );\n};\n\nexport default AffixedField;\n"],"mappings":";;;;;;;;;;;;;;AA8CA,MAAM,qBAAqB,aAAkE;AAC3F,KAAI,OAAO,aAAa,SACtB,QAAO,SAAS,SAAS,IAAI,CAAC;EAAC,OAAO;EAAU,OAAO;EAAS,CAAC,GAAG,EAAE;AAExE,QAAO,YAAY,EAAE;;AAGvB,MAAMA,gBAAuC,EAC3C,OACA,OACA,UACA,WACA,UACA,YACA,UACA,aACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACoB;CACvB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,WAAoB,CAAC,CAAC;CAC5B,MAAMC,aAA6B,kBAAkB,SAAS;CAC9D,MAAMC,YAAqB,WAAW,SAAS;CAC/C,MAAMC,iBAA0B,WAAW,WAAW;CACtD,MAAMC,SAAiCC,4BAAU,OAAO,aAAa,YAAY,OAAO,UAAU,UAAU;CAG5G,MAAMC,sBAA8B,GAAG,OAAO,CAAC;CAC/C,MAAMC,cAAsB,OAAO;CACnC,MAAMC,UAAkB,KAAK,MAAM;CACnC,MAAMC,eAAmC,SAAS,aAAa,GAAG,QAAQ,gBAAgB;CAE1F,MAAMC,qBAA6B,GACjC,yBAAyB,IAAI,iBAAiB,YAAY,CAAC,EAC3D,OAAO,kBACR;CAED,MAAMC,iBAAyB,GAAG,yBAAyB,IAAI,iBAAiB,QAAQ,CAAC,EAAE,OAAO,SAAS;CAE3G,MAAM,qBAA0C;AAC9C,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,MAAI,WAAW,WAAW,EACxB,QACE,8CACE,oBAAC;GACC,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,cAAc,CAAC,EAAE,OAAO,cAAc;GAClG,eAAY;aAEX,WAAW,GAAG;IACV,EAEP,oBAAC;GAAK,IAAI;GAAqB,WAAW,OAAO;aAC9C,WAAW,GAAG;IACV,IACN;EAIP,MAAMC,gBAAwB,eAAe,WAAW,GAAG;AAC3D,SACE,oBAAC;GACC,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,gBAAgB,CAAC,EAAE,OAAO,gBAAgB;GACtG,OAAO;GACG;GACV,WAAW,MAA4C,iBAAiB,EAAE,OAAO,MAAM;GACvF,cAAW;aAEV,WAAW,KAAK,MACf,oBAAC;IAAqB,OAAO,EAAE;cAC5B,EAAE;MADQ,EAAE,MAEN,CACT;IACK;;AAIb,QACE,qBAACC;EACQ;EACK;EACE;EACd,WAAW,GAAG,yBAAyB,IAAI,gBAAgB,CAAC,EAAE,UAAU;EACjE;aAEN,SACC,oBAACC;GAAW,SAAS;GAAmB;GAAU,OAAO;aACtD;IACU,EAEf,qBAAC;GAAI,WAAW;cACb,cAAc,EACf,oBAAC;IACC,WAAW;IACL;IACI;IACV,gBAAc;IACd,iBAAe;IACf,GAAI;IACJ,IAAI;IACJ,oBACE;KAAC,KAAK;KAAqB,iBAAiB,sBAAsB;KAAW;KAAa,CACvF,OAAO,QAAQ,CACf,KAAK,IAAI,IAAI;KAElB;IACE;GACM;;AAIlB,2BAAe"}

package/dist/components/primitives/AuthFlowSelect/AuthFlowSelect.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { BaseAuthFlowSelectProps } from './BaseAuthFlowSelect';
+export type AuthFlowSelectProps = Omit<BaseAuthFlowSelectProps, 'fetchAuthFlows'>;
+/**
+ * Authentication-flow picker for signed-in screens. It loads the authentication flows itself with the
+ * signed-in user's access token and submits the chosen flow's ID, so it takes no data source. For any
+ * other data source use `Select` with `useInfiniteOptions`.
+ */
+declare const AuthFlowSelect: FC<AuthFlowSelectProps>;
+export default AuthFlowSelect;
+//# sourceMappingURL=AuthFlowSelect.d.ts.map

package/dist/components/primitives/AuthFlowSelect/AuthFlowSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthFlowSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/AuthFlowSelect/AuthFlowSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAA2B,EAAC,uBAAuB,EAAC,MAAM,sBAAsB,CAAC;AAGjF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,CAAC;AAElF;;;;GAIG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAE3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/primitives/AuthFlowSelect/AuthFlowSelect.js

@@ -0,0 +1,19 @@
+import useFetchAuthFlows_default from "../../../hooks/useFetchAuthFlows.js";
+import BaseAuthFlowSelect_default from "./BaseAuthFlowSelect.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/AuthFlowSelect/AuthFlowSelect.tsx
+/**
+* Authentication-flow picker for signed-in screens. It loads the authentication flows itself with the
+* signed-in user's access token and submits the chosen flow's ID, so it takes no data source. For any
+* other data source use `Select` with `useInfiniteOptions`.
+*/
+const AuthFlowSelect = (props) => /* @__PURE__ */ jsx(BaseAuthFlowSelect_default, {
+	...props,
+	fetchAuthFlows: useFetchAuthFlows_default()
+});
+var AuthFlowSelect_default = AuthFlowSelect;
+
+//#endregion
+export { AuthFlowSelect_default as default };
+//# sourceMappingURL=AuthFlowSelect.js.map

package/dist/components/primitives/AuthFlowSelect/AuthFlowSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthFlowSelect.js","names":["AuthFlowSelect: FC<AuthFlowSelectProps>","BaseAuthFlowSelect","useFetchAuthFlows"],"sources":["../../../../src/components/primitives/AuthFlowSelect/AuthFlowSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC} from 'react';\nimport BaseAuthFlowSelect, {BaseAuthFlowSelectProps} from './BaseAuthFlowSelect';\nimport useFetchAuthFlows from '../../../hooks/useFetchAuthFlows';\n\nexport type AuthFlowSelectProps = Omit<BaseAuthFlowSelectProps, 'fetchAuthFlows'>;\n\n/**\n * Authentication-flow picker for signed-in screens. It loads the authentication flows itself with the\n * signed-in user's access token and submits the chosen flow's ID, so it takes no data source. For any\n * other data source use `Select` with `useInfiniteOptions`.\n */\nconst AuthFlowSelect: FC<AuthFlowSelectProps> = (props: AuthFlowSelectProps) => (\n  <BaseAuthFlowSelect {...props} fetchAuthFlows={useFetchAuthFlows()} />\n);\n\nexport default AuthFlowSelect;\n"],"mappings":";;;;;;;;;;AAcA,MAAMA,kBAA2C,UAC/C,oBAACC;CAAmB,GAAI;CAAO,gBAAgBC,2BAAmB;EAAI;AAGxE,6BAAe"}

package/dist/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.d.ts

@@ -0,0 +1,14 @@
+import type { FetchAuthFlows } from '@thunderid/browser';
+import { FC } from 'react';
+import { ResourceSelectProps } from '../Select/ResourceSelect';
+export interface BaseAuthFlowSelectProps extends Omit<ResourceSelectProps, 'bemBlock' | 'defaults' | 'fallbackMessages' | 'fetchPage' | 'mapping' | 'messageKey' | 'resource' | 'type'> {
+    fetchAuthFlows?: FetchAuthFlows;
+}
+/**
+ * Authentication-flow picker: a `Select` that loads from the given `fetchAuthFlows`, showing each
+ * flow by its name and submitting its ID. Building block for {@link AuthFlowSelect}; for a custom
+ * data source use `Select` with `useInfiniteOptions`.
+ */
+declare const BaseAuthFlowSelect: FC<BaseAuthFlowSelectProps>;
+export default BaseAuthFlowSelect;
+//# sourceMappingURL=BaseAuthFlowSelect.d.ts.map

package/dist/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseAuthFlowSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,cAAc,EAAuB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AACzB,OAAuB,EAAC,mBAAmB,EAAC,MAAM,0BAA0B,CAAC;AAE7E,MAAM,WAAW,uBACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,kBAAkB,GAAG,WAAW,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAC5G;IACD,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAID;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAcnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.js

@@ -0,0 +1,29 @@
+import ResourceSelect_default from "../Select/ResourceSelect.js";
+import { AuthFlowSelectConstants, EmbeddedFlowComponentType } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.tsx
+const AUTH_FLOW_DEFAULTS = { labelAttributes: AuthFlowSelectConstants.LABEL_ATTRIBUTES };
+/**
+* Authentication-flow picker: a `Select` that loads from the given `fetchAuthFlows`, showing each
+* flow by its name and submitting its ID. Building block for {@link AuthFlowSelect}; for a custom
+* data source use `Select` with `useInfiniteOptions`.
+*/
+const BaseAuthFlowSelect = ({ fetchAuthFlows,...rest }) => /* @__PURE__ */ jsx(ResourceSelect_default, {
+	...rest,
+	bemBlock: "auth-flow-select",
+	defaults: AUTH_FLOW_DEFAULTS,
+	fallbackMessages: {
+		ariaLabel: "Select a login flow",
+		empty: "No login flows found."
+	},
+	fetchPage: fetchAuthFlows,
+	messageKey: "auth_flow_select",
+	resource: "auth flows",
+	type: EmbeddedFlowComponentType.AuthFlowSelect
+});
+var BaseAuthFlowSelect_default = BaseAuthFlowSelect;
+
+//#endregion
+export { BaseAuthFlowSelect_default as default };
+//# sourceMappingURL=BaseAuthFlowSelect.js.map

package/dist/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseAuthFlowSelect.js","names":["AUTH_FLOW_DEFAULTS: SelectOptionDefaults","BaseAuthFlowSelect: FC<BaseAuthFlowSelectProps>","ResourceSelect"],"sources":["../../../../src/components/primitives/AuthFlowSelect/BaseAuthFlowSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {AuthFlowSelectConstants, EmbeddedFlowComponentType} from '@thunderid/browser';\nimport type {FetchAuthFlows, SelectOptionDefaults} from '@thunderid/browser';\nimport {FC} from 'react';\nimport ResourceSelect, {ResourceSelectProps} from '../Select/ResourceSelect';\n\nexport interface BaseAuthFlowSelectProps\n  extends Omit<\n    ResourceSelectProps,\n    'bemBlock' | 'defaults' | 'fallbackMessages' | 'fetchPage' | 'mapping' | 'messageKey' | 'resource' | 'type'\n  > {\n  fetchAuthFlows?: FetchAuthFlows;\n}\n\nconst AUTH_FLOW_DEFAULTS: SelectOptionDefaults = {labelAttributes: AuthFlowSelectConstants.LABEL_ATTRIBUTES};\n\n/**\n * Authentication-flow picker: a `Select` that loads from the given `fetchAuthFlows`, showing each\n * flow by its name and submitting its ID. Building block for {@link AuthFlowSelect}; for a custom\n * data source use `Select` with `useInfiniteOptions`.\n */\nconst BaseAuthFlowSelect: FC<BaseAuthFlowSelectProps> = ({fetchAuthFlows, ...rest}: BaseAuthFlowSelectProps) => (\n  <ResourceSelect\n    {...rest}\n    bemBlock=\"auth-flow-select\"\n    defaults={AUTH_FLOW_DEFAULTS}\n    fallbackMessages={{\n      ariaLabel: 'Select a login flow',\n      empty: 'No login flows found.',\n    }}\n    fetchPage={fetchAuthFlows}\n    messageKey=\"auth_flow_select\"\n    resource=\"auth flows\"\n    type={EmbeddedFlowComponentType.AuthFlowSelect}\n  />\n);\n\nexport default BaseAuthFlowSelect;\n"],"mappings":";;;;;AAgBA,MAAMA,qBAA2C,EAAC,iBAAiB,wBAAwB,kBAAiB;;;;;;AAO5G,MAAMC,sBAAmD,EAAC,eAAgB,GAAG,WAC3E,oBAACC;CACC,GAAI;CACJ,UAAS;CACT,UAAU;CACV,kBAAkB;EAChB,WAAW;EACX,OAAO;EACR;CACD,WAAW;CACX,YAAW;CACX,UAAS;CACT,MAAM,0BAA0B;EAChC;AAGJ,iCAAe"}

package/dist/components/primitives/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAC,MAAM,OAAO,CAAC;AAO9C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACtG;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA6C/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAQ,MAAM,OAAO,CAAC;AAOrD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACtG;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAsD/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/primitives/Checkbox/Checkbox.js

@@ -4,16 +4,22 @@ import FormControl_default from "../FormControl/FormControl.js";
 import InputLabel_default from "../InputLabel/InputLabel.js";
 import Checkbox_styles_default from "./Checkbox.styles.js";
 import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/primitives/Checkbox/Checkbox.tsx
 const Checkbox = ({ label, error, className, required, helperText, style = {},...rest }) => {
 	const { theme, colorScheme } = useTheme_default();
 	const hasError = !!error;
+	const generatedId = 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 = Checkbox_styles_default(theme, colorScheme, hasError, !!required);
 	return /* @__PURE__ */ jsx(FormControl_default, {
 		error,
 		helperText,
+		helperTextId,
 		className: cx(withVendorCSSClassPrefix(bem("checkbox")), className),
 		helperTextMarginLeft: `calc(${theme.vars.spacing.unit} * 3.5)`,
 		children: /* @__PURE__ */ jsxs("div", {
@@ -24,8 +30,11 @@ const Checkbox = ({ label, error, className, required, helperText, style = {},..
 				className: cx(withVendorCSSClassPrefix(bem("checkbox", "input")), styles["input"], styles["errorInput"], { [withVendorCSSClassPrefix(bem("checkbox", "input", "error"))]: hasError }),
 				"aria-invalid": hasError,
 				"aria-required": required,
-				...rest
+				...rest,
+				id: inputId,
+				"aria-describedby": describedBy
 			}), label && /* @__PURE__ */ jsx(InputLabel_default, {
+				htmlFor: inputId,
 				required,
 				error: hasError,
 				variant: "inline",

package/dist/components/primitives/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["Checkbox: FC<CheckboxProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/Checkbox/Checkbox.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 './Checkbox.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 CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the checkbox\n   */\n  error?: string;\n  /**\n   * Helper text to display below the checkbox\n   */\n  helperText?: string;\n  /**\n   * Label text to display next to the checkbox\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst Checkbox: FC<CheckboxProps> = ({\n  label,\n  error,\n  className,\n  required,\n  helperText,\n  style = {},\n  ...rest\n}: CheckboxProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!required);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('checkbox')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 3.5)`}\n    >\n      <div style={style} className={cx(withVendorCSSClassPrefix(bem('checkbox', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          className={cx(withVendorCSSClassPrefix(bem('checkbox', 'input')), styles['input'], styles['errorInput'], {\n            [withVendorCSSClassPrefix(bem('checkbox', 'input', 'error'))]: hasError,\n          })}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('checkbox', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('checkbox', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAkCA,MAAMA,YAA+B,EACnC,OACA,OACA,WACA,UACA,YACA,QAAQ,EAAE,CACV,GAAG,WACgB;CACnB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,wBAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,oBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,WAAW,CAAC,EAAE,UAAU;EACnE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,qBAAC;GAAW;GAAO,WAAW,GAAG,yBAAyB,IAAI,YAAY,YAAY,CAAC,EAAE,OAAO,aAAa;cAC3G,oBAAC;IACC,MAAK;IACL,WAAW,GAAG,yBAAyB,IAAI,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,GACtG,yBAAyB,IAAI,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;IACF,gBAAc;IACd,iBAAe;IACf,GAAI;KACJ,EACD,SACC,oBAACC;IACW;IACV,OAAO;IACP,SAAQ;IACR,WAAW,GAAG,yBAAyB,IAAI,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,GACtG,yBAAyB,IAAI,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;cAED;KACU;IAEX;GACM;;AAIlB,uBAAe"}
+{"version":3,"file":"Checkbox.js","names":["Checkbox: FC<CheckboxProps>","useTheme","generatedId: string","inputId: string","helperTextId: string | undefined","describedBy: string | undefined","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/Checkbox/Checkbox.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 './Checkbox.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 CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the checkbox\n   */\n  error?: string;\n  /**\n   * Helper text to display below the checkbox\n   */\n  helperText?: string;\n  /**\n   * Label text to display next to the checkbox\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst Checkbox: FC<CheckboxProps> = ({\n  label,\n  error,\n  className,\n  required,\n  helperText,\n  style = {},\n  ...rest\n}: CheckboxProps) => {\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, !!required);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      helperTextId={helperTextId}\n      className={cx(withVendorCSSClassPrefix(bem('checkbox')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 3.5)`}\n    >\n      <div style={style} className={cx(withVendorCSSClassPrefix(bem('checkbox', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          className={cx(withVendorCSSClassPrefix(bem('checkbox', 'input')), styles['input'], styles['errorInput'], {\n            [withVendorCSSClassPrefix(bem('checkbox', 'input', 'error'))]: hasError,\n          })}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n          id={inputId}\n          aria-describedby={describedBy}\n        />\n        {label && (\n          <InputLabel\n            htmlFor={inputId}\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('checkbox', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('checkbox', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;AAkCA,MAAMA,YAA+B,EACnC,OACA,OACA,WACA,UACA,YACA,QAAQ,EAAE,CACV,GAAG,WACgB;CACnB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,cAAsB,OAAO;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,wBAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,oBAACC;EACQ;EACK;EACE;EACd,WAAW,GAAG,yBAAyB,IAAI,WAAW,CAAC,EAAE,UAAU;EACnE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,qBAAC;GAAW;GAAO,WAAW,GAAG,yBAAyB,IAAI,YAAY,YAAY,CAAC,EAAE,OAAO,aAAa;cAC3G,oBAAC;IACC,MAAK;IACL,WAAW,GAAG,yBAAyB,IAAI,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,GACtG,yBAAyB,IAAI,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;IACF,gBAAc;IACd,iBAAe;IACf,GAAI;IACJ,IAAI;IACJ,oBAAkB;KAClB,EACD,SACC,oBAACC;IACC,SAAS;IACC;IACV,OAAO;IACP,SAAQ;IACR,WAAW,GAAG,yBAAyB,IAAI,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,GACtG,yBAAyB,IAAI,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;cAED;KACU;IAEX;GACM;;AAIlB,uBAAe"}

package/dist/components/primitives/CopyableText/CopyableText.d.ts

@@ -4,6 +4,11 @@ export interface CopyableTextProps {
      * Optional label displayed above the value box.
      */
     label?: string;
+    /**
+     * Hides the value in a read-only password field until the user chooses to show it, as for a secret. Copying always
+     * copies the real value.
+     */
+    masked?: boolean;
     /**
      * The text value to display and copy.
      */
@@ -14,6 +19,10 @@ export interface CopyableTextProps {
  * the clipboard. When the button is clicked, it attempts to copy the value using the Clipboard API, and
  * falls back to a textarea method if the API is not supported.
  * After copying, it shows a "Copied!" message for 3 seconds before resetting.
+ *
+ * The copy control is an icon button inside the box in both layouts. With `masked`, the value sits in a read-only
+ * password field with the same show and hide control as `PasswordField`. A browser does not copy out of a password
+ * field, which is why copying is a button of its own.
  */
 declare const CopyableText: FC<CopyableTextProps>;
 export default CopyableText;

package/dist/components/primitives/CopyableText/CopyableText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/CopyableText/CopyableText.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAsC,MAAM,OAAO,CAAC;AAM9D,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAuCvC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CopyableText.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/CopyableText/CopyableText.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAsC,MAAM,OAAO,CAAC;AAS9D,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAID;;;;;;;;;GASG;AACH,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAqDvC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/primitives/CopyableText/CopyableText.js

@@ -1,55 +1,74 @@
 import useTheme_default from "../../../contexts/Theme/useTheme.js";
 import useTranslation_default from "../../../hooks/useTranslation.js";
 import Button_default from "../Button/Button.js";
+import PasswordField_default from "../PasswordField/PasswordField.js";
 import CopyableText_styles_default from "./CopyableText.styles.js";
+import Check_default from "../Icons/Check.js";
+import Copy_default from "../Icons/Copy.js";
+import { copyTextToClipboard } from "@thunderid/browser";
 import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/primitives/CopyableText/CopyableText.tsx
+const ignoreChange = () => void 0;
 /**
 * A React component that displays a text value with an optional label and a button to copy the value to
 * the clipboard. When the button is clicked, it attempts to copy the value using the Clipboard API, and
 * falls back to a textarea method if the API is not supported.
 * After copying, it shows a "Copied!" message for 3 seconds before resetting.
+*
+* The copy control is an icon button inside the box in both layouts. With `masked`, the value sits in a read-only
+* password field with the same show and hide control as `PasswordField`. A browser does not copy out of a password
+* field, which is why copying is a button of its own.
 */
-const CopyableText = ({ label, value }) => {
+const CopyableText = ({ label, masked = false, value }) => {
 	const { theme } = useTheme_default();
 	const styles = CopyableText_styles_default(theme);
 	const { t } = useTranslation_default();
 	const [copied, setCopied] = useState(false);
 	const handleCopy = useCallback(async () => {
-		try {
-			await navigator.clipboard.writeText(value);
-		} catch {
-			const textArea = document.createElement("textarea");
-			textArea.value = value;
-			document.body.appendChild(textArea);
-			textArea.select();
-			document.execCommand("copy");
-			document.body.removeChild(textArea);
-		}
+		await copyTextToClipboard(value);
 		setCopied(true);
 		setTimeout(() => setCopied(false), 3e3);
 	}, [value]);
+	const copyLabel = copied ? t("elements.display.copyable_text.copied") : t("elements.display.copyable_text.copy");
+	const copyButton = /* @__PURE__ */ jsx(Button_default, {
+		variant: "icon",
+		size: "small",
+		className: styles["copyButton"],
+		"aria-label": copyLabel,
+		title: copyLabel,
+		onClick: () => {
+			handleCopy().catch(() => void 0);
+		},
+		children: copied ? /* @__PURE__ */ jsx(Check_default, {
+			width: 16,
+			height: 16
+		}) : /* @__PURE__ */ jsx(Copy_default, {
+			width: 16,
+			height: 16
+		})
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: styles["container"],
 		children: [label && /* @__PURE__ */ jsx("span", {
 			className: styles["label"],
 			children: label
-		}), /* @__PURE__ */ jsxs("div", {
+		}), masked ? /* @__PURE__ */ jsx(PasswordField_default, {
+			"aria-label": label,
+			autoComplete: "off",
+			endAdornment: copyButton,
+			hideLabel: t("elements.display.copyable_text.hide"),
+			onChange: ignoreChange,
+			readOnly: true,
+			showLabel: t("elements.display.copyable_text.show"),
+			value
+		}) : /* @__PURE__ */ jsxs("div", {
 			className: styles["valueBox"],
 			children: [/* @__PURE__ */ jsx("span", {
 				className: styles["valueText"],
 				children: value
-			}), /* @__PURE__ */ jsx(Button_default, {
-				variant: "outline",
-				size: "small",
-				className: styles["copyButton"],
-				onClick: () => {
-					handleCopy().catch(() => void 0);
-				},
-				children: copied ? t("elements.display.copyable_text.copied") : t("elements.display.copyable_text.copy")
-			})]
+			}), copyButton]
 		})]
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.js","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,kBAAU;CAC1B,MAAMC,SAAiCC,4BAAU,MAAM;CACvD,MAAM,EAAC,MAAKC,wBAAgB;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,MAAMC,aAA6C,YAAY,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,qBAAC;EAAI,WAAW,OAAO;aACpB,SAAS,oBAAC;GAAK,WAAW,OAAO;aAAW;IAAa,EAC1D,qBAAC;GAAI,WAAW,OAAO;cACrB,oBAAC;IAAK,WAAW,OAAO;cAAe;KAAa,EACpD,oBAACC;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.js","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,kBAAU;CAC1B,MAAMC,SAAiCC,4BAAU,MAAM;CACvD,MAAM,EAAC,MAAKC,wBAAgB;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,MAAMC,aAA6C,YAAY,YAA2B;AACxF,QAAM,oBAAoB,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,oBAACC;EACC,SAAQ;EACR,MAAK;EACL,WAAW,OAAO;EAClB,cAAY;EACZ,OAAO;EACP,eAAe;AACb,eAAY,CAAC,YAAY,OAAU;;YAGpC,SAAS,oBAACC;GAAM,OAAO;GAAI,QAAQ;IAAM,GAAG,oBAACC;GAAK,OAAO;GAAI,QAAQ;IAAM;GACrE;AAGX,QACE,qBAAC;EAAI,WAAW,OAAO;aACpB,SAAS,oBAAC;GAAK,WAAW,OAAO;aAAW;IAAa,EACzD,SACC,oBAACC;GACC,cAAY;GACZ,cAAa;GACb,cAAc;GACd,WAAW,EAAE,sCAAsC;GACnD,UAAU;GACV;GACA,WAAW,EAAE,sCAAsC;GAC5C;IACP,GAEF,qBAAC;GAAI,WAAW,OAAO;cACrB,oBAAC;IAAK,WAAW,OAAO;cAAe;KAAa,EACnD;IACG;GAEJ;;AAIV,2BAAe"}

package/dist/components/primitives/CopyableText/CopyableText.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/CopyableText/CopyableText.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAuCpD,CAAC;AAEJ,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CopyableText.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/CopyableText/CopyableText.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA0CpD,CAAC;AAEJ,eAAe,SAAS,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.styles.js","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,UACjB,eACS;CACL,WAAW,GAAG;;;oBAGA,MAAM,KAAK,QAAQ,KAAK;;;CAGtC,YAAY,GAAG;;;;CAIf,OAAO,GAAG;iBACC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,UAAU,GAAG;;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,GAAG;iBACH,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;;CAS3C,GACD,CAAC,MAAM,CACR;AAEH,kCAAe"}
+{"version":3,"file":"CopyableText.styles.js","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,UACjB,eACS;CACL,WAAW,GAAG;;;oBAGA,MAAM,KAAK,QAAQ,KAAK;;;CAGtC,YAAY,GAAG;iBACJ,MAAM,KAAK,OAAO,KAAK,UAAU;;;mBAG/B,MAAM,KAAK,OAAO,KAAK,QAAQ;;;CAG5C,OAAO,GAAG;iBACC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,UAAU,GAAG;;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,GAAG;iBACH,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;;CAS3C,GACD,CAAC,MAAM,CACR;AAEH,kCAAe"}

package/dist/components/primitives/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAC,MAAM,OAAO,CAAC;AAO9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACxG;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAoDnC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAQ,MAAM,OAAO,CAAC;AAOrD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACxG;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA6DnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/primitives/DatePicker/DatePicker.js

@@ -4,19 +4,26 @@ import FormControl_default from "../FormControl/FormControl.js";
 import InputLabel_default from "../InputLabel/InputLabel.js";
 import DatePicker_styles_default from "./DatePicker.styles.js";
 import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/primitives/DatePicker/DatePicker.tsx
 const DatePicker = ({ label, error, className, required, disabled, helperText, dateFormat = "yyyy-MM-dd", style = {},...rest }) => {
 	const { theme, colorScheme } = useTheme_default();
 	const hasError = !!error;
+	const generatedId = 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 = DatePicker_styles_default(theme, colorScheme, hasError, !!disabled);
 	return /* @__PURE__ */ jsxs(FormControl_default, {
 		error,
 		helperText,
+		helperTextId,
 		className: cx(withVendorCSSClassPrefix(bem("date-picker")), className),
 		style,
 		children: [label && /* @__PURE__ */ jsx(InputLabel_default, {
+			htmlFor: inputId,
 			required,
 			error: hasError,
 			className: cx(withVendorCSSClassPrefix(bem("date-picker", "label")), styles["label"]),
@@ -32,7 +39,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/components/primitives/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["DatePicker: FC<DatePickerProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","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,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,0BAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,cAAc,CAAC,EAAE,UAAU;EAC/D;aAEN,SACC,oBAACC;GACW;GACV,OAAO;GACP,WAAW,GAAG,yBAAyB,IAAI,eAAe,QAAQ,CAAC,EAAE,OAAO,SAAS;aAEpF;IACU,EAEf,oBAAC;GACC,MAAK;GACL,SAAQ;GACR,aAAa;GACb,WAAW,GACT,yBAAyB,IAAI,eAAe,QAAQ,CAAC,EACrD,OAAO,UACP,OAAO,eACP,OAAO,kBACP;KACG,yBAAyB,IAAI,eAAe,SAAS,QAAQ,CAAC,GAAG;KACjE,yBAAyB,IAAI,eAAe,SAAS,WAAW,CAAC,GAAG;IACtE,CACF;GACS;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;IACJ;GACU;;AAIlB,yBAAe"}
+{"version":3,"file":"DatePicker.js","names":["DatePicker: FC<DatePickerProps>","useTheme","generatedId: string","inputId: string","helperTextId: string | undefined","describedBy: string | undefined","styles: Record<string, string>","useStyles","FormControl","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,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,cAAsB,OAAO;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,0BAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,qBAACC;EACQ;EACK;EACE;EACd,WAAW,GAAG,yBAAyB,IAAI,cAAc,CAAC,EAAE,UAAU;EAC/D;aAEN,SACC,oBAACC;GACC,SAAS;GACC;GACV,OAAO;GACP,WAAW,GAAG,yBAAyB,IAAI,eAAe,QAAQ,CAAC,EAAE,OAAO,SAAS;aAEpF;IACU,EAEf,oBAAC;GACC,MAAK;GACL,SAAQ;GACR,aAAa;GACb,WAAW,GACT,yBAAyB,IAAI,eAAe,QAAQ,CAAC,EACrD,OAAO,UACP,OAAO,eACP,OAAO,kBACP;KACG,yBAAyB,IAAI,eAAe,SAAS,QAAQ,CAAC,GAAG;KACjE,yBAAyB,IAAI,eAAe,SAAS,WAAW,CAAC,GAAG;IACtE,CACF;GACS;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;GACJ,IAAI;GACJ,oBAAkB;IAClB;GACU;;AAIlB,yBAAe"}

package/dist/components/primitives/FormControl/FormControl.d.ts

@@ -17,6 +17,10 @@ export interface FormControlProps {
      * Helper text to display below the content
      */
     helperText?: string;
+    /**
+     * id of the helper text element, so the field it describes can reference it with `aria-describedby`
+     */
+    helperTextId?: string;
     /**
      * Custom alignment for helper text (default: left, center for OTP)
      */

package/dist/components/primitives/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/FormControl/FormControl.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,aAAa,EAAE,EAAE,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAMnD,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA6BrC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/FormControl/FormControl.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,aAAa,EAAE,EAAE,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAMnD,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+BrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/primitives/FormControl/FormControl.js

@@ -6,13 +6,14 @@ import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
 import { jsx, jsxs } from "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 } = useTheme_default();
 	const styles = FormControl_styles_default(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);
 	return /* @__PURE__ */ jsxs("div", {
 		id,
 		className: cx(withVendorCSSClassPrefix(bem("form-control")), styles["formControl"], className),
 		children: [children, (error || helperText) && /* @__PURE__ */ jsx(Typography_default, {
+			id: helperTextId,
 			variant: "caption",
 			color: error ? "error" : "textSecondary",
 			className: cx(withVendorCSSClassPrefix(bem("form-control", "helper-text")), styles["helperText"], {

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","names":["FormControl: FC<FormControlProps>","useTheme","styles: Record<string, string>","useStyles","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,kBAAU;CACpE,MAAMC,SAAiCC,2BAAU,OAAO,aAAa,iBAAiB,sBAAsB,CAAC,CAAC,MAAM;AAEpH,QACE,qBAAC;EAAQ;EAAI,WAAW,GAAG,yBAAyB,IAAI,eAAe,CAAC,EAAE,OAAO,gBAAgB,UAAU;aACxG,WACC,SAAS,eACT,oBAACC;GACC,SAAQ;GACR,OAAO,QAAQ,UAAU;GACzB,WAAW,GAAG,yBAAyB,IAAI,gBAAgB,cAAc,CAAC,EAAE,OAAO,eAAe;KAC/F,yBAAyB,IAAI,gBAAgB,eAAe,QAAQ,CAAC,GAAG,CAAC,CAAC;KAC1E,OAAO,qBAAqB,CAAC,CAAC;IAChC,CAAC;aAED,SAAS;IACC;GAEX;;AAIV,0BAAe"}
+{"version":3,"file":"FormControl.js","names":["FormControl: FC<FormControlProps>","useTheme","styles: Record<string, string>","useStyles","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,kBAAU;CACpE,MAAMC,SAAiCC,2BAAU,OAAO,aAAa,iBAAiB,sBAAsB,CAAC,CAAC,MAAM;AAEpH,QACE,qBAAC;EAAQ;EAAI,WAAW,GAAG,yBAAyB,IAAI,eAAe,CAAC,EAAE,OAAO,gBAAgB,UAAU;aACxG,WACC,SAAS,eACT,oBAACC;GACC,IAAI;GACJ,SAAQ;GACR,OAAO,QAAQ,UAAU;GACzB,WAAW,GAAG,yBAAyB,IAAI,gBAAgB,cAAc,CAAC,EAAE,OAAO,eAAe;KAC/F,yBAAyB,IAAI,gBAAgB,eAAe,QAAQ,CAAC,GAAG,CAAC,CAAC;KAC1E,OAAO,qBAAqB,CAAC,CAAC;IAChC,CAAC;aAED,SAAS;IACC;GAEX;;AAIV,0BAAe"}

package/dist/components/primitives/Icons/Copy.d.ts

@@ -0,0 +1,7 @@
+import { FC, SVGProps } from 'react';
+/**
+ * Copy icon component.
+ */
+declare const Copy: FC<SVGProps<SVGSVGElement>>;
+export default Copy;
+//# sourceMappingURL=Copy.d.ts.map

package/dist/components/primitives/Icons/Copy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Copy.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Icons/Copy.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEnC;;GAEG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,CAgBrC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/primitives/Icons/Copy.tsx
+/**
+* Copy icon component.
+*/
+const Copy = (props) => /* @__PURE__ */ 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__ */ jsx("rect", {
+		width: "14",
+		height: "14",
+		x: "8",
+		y: "8",
+		rx: "2",
+		ry: "2"
+	}), /* @__PURE__ */ 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
+export { Copy_default as default };
+//# sourceMappingURL=Copy.js.map