npm - @thunderid/react - Versions diffs - 1.4.0 → 1.4.1 - Mend

@thunderid/react 1.4.0 → 1.4.1

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

Files changed (78) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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","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/Checkbox/Checkbox.d.ts.map CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/DatePicker/DatePicker.d.ts.map CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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/MultiInput/MultiInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiInput.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/MultiInput/MultiInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,aAAa,EAAE,EAAE,EAA+B,SAAS,~~EAAwB~~,MAAM,OAAO,CAAC;~~AAUvG~~,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAChG,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAMD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,~~CA8KnC~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"MultiInput.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/MultiInput/MultiInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,aAAa,EAAE,EAAE,EAA+B,SAAS,EAA+B,MAAM,OAAO,CAAC;AAU9G,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAChG,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAMD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAoLnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/primitives/MultiInput/MultiInput.js CHANGED Viewed

@@ -7,12 +7,14 @@ import DatePicker_default from "../DatePicker/DatePicker.js";
 import TextField_default from "../TextField/TextField.js";
 import MultiInput_styles_default from "./MultiInput.styles.js";
 import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
-import { useCallback, useState } from "react";
+import { useCallback, useId, useState } from "react";
 import { jsx, jsxs } from "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 } = useTheme_default();
+	const inputId = useId();
+	const helperTextId = error || helperText ? `${inputId}-description` : void 0;
 	const canAddMore = !maxFields || values.length < maxFields;
 	const canRemove = values.length > minFields;
 	const styles = MultiInput_styles_default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
@@ -54,10 +56,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,
@@ -84,7 +89,9 @@ const MultiInput = ({ label, error, required, className, disabled, helperText, p
 		endIcon,
 		error,
 		fieldType,
-		type
+		type,
+		inputId,
+		helperTextId
 	]);
 	const [currentInputValue, setCurrentInputValue] = useState("");
 	const handleInputSubmit = useCallback(() => {
@@ -96,9 +103,11 @@ const MultiInput = ({ label, error, required, className, disabled, helperText, p
 	return /* @__PURE__ */ jsxs(FormControl_default, {
 		error,
 		helperText,
+		helperTextId,
 		className: cx(withVendorCSSClassPrefix(bem("multi-input")), className),
 		style,
 		children: [label && /* @__PURE__ */ jsx(InputLabel_default, {
+			htmlFor: inputId,
 			required,
 			error: !!error,
 			children: label

package/dist/components/primitives/MultiInput/MultiInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiInput.js","names":["MultiInput: FC<MultiInputProps>","useTheme","canAddMore: boolean","canRemove: boolean","styles: Record<string, string>","useStyles","PlusIcon: FC<IconProps>","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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"}
1	+ {"version":3,"file":"MultiInput.js","names":["MultiInput: FC<MultiInputProps>","useTheme","inputId: string","helperTextId: string \| undefined","canAddMore: boolean","canRemove: boolean","styles: Record<string, string>","useStyles","PlusIcon: FC<IconProps>","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/components/primitives/OtpField/OtpField.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OtpField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/OtpField/OtpField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,EAAE,EAOF,aAAa,~~EACd~~,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;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,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,MAAM,EAAE;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC,CAAA;KAAC,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,~~CAmL~~/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"OtpField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/OtpField/OtpField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,EAAE,EAOF,aAAa,EAEd,MAAM,OAAO,CAAC;AAOf,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;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,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,MAAM,EAAE;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC,CAAA;KAAC,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA6L/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/primitives/OtpField/OtpField.js CHANGED Viewed

@@ -4,7 +4,7 @@ import FormControl_default from "../FormControl/FormControl.js";
 import InputLabel_default from "../InputLabel/InputLabel.js";
 import OtpField_styles_default from "./OtpField.styles.js";
 import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/primitives/OtpField/OtpField.tsx
@@ -13,6 +13,9 @@ const OtpField = ({ label, error, className, required, disabled, helperText, len
 	const styles = OtpField_styles_default(theme, colorScheme, !!disabled, !!error, length);
 	const [otp, setOtp] = useState(Array(length).fill(""));
 	const inputRefs = useRef([]);
+	const fieldId = useId();
+	const labelId = `${fieldId}-label`;
+	const helperTextId = error || helperText ? `${fieldId}-helper-text` : void 0;
 	useEffect(() => {
 		inputRefs.current = inputRefs.current.slice(0, length);
 	}, [length]);
@@ -82,14 +85,19 @@ const OtpField = ({ label, error, className, required, disabled, helperText, len
 	return /* @__PURE__ */ jsxs(FormControl_default, {
 		error,
 		helperText,
+		helperTextId,
 		className: cx(withVendorCSSClassPrefix(bem("otp-field")), className),
 		helperTextAlign: "center",
 		style,
 		children: [label && /* @__PURE__ */ jsx(InputLabel_default, {
+			id: labelId,
 			required,
 			error: !!error,
 			children: label
 		}), /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-labelledby": label ? labelId : void 0,
+			"aria-describedby": helperTextId,
 			className: cx(withVendorCSSClassPrefix(bem("otp-field", "input-container")), styles["inputContainer"]),
 			children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx("input", {
 				ref: (el) => {
@@ -113,6 +121,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/components/primitives/OtpField/OtpField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OtpField.js","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","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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"}
1	+ {"version":3,"file":"OtpField.js","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","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/components/primitives/Select/Select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAc,EAAE,EAAa,oBAAoB,~~EAA6B~~,MAAM,OAAO,CAAC;~~AAQnG~~,YAAY,EAAC,YAAY,EAAE,iBAAiB,EAAC,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAC7F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;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,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,IAAI,CAAC;IACnE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,~~CAwH3B~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAc,EAAE,EAAa,oBAAoB,EAAoC,MAAM,OAAO,CAAC;AAQ1G,YAAY,EAAC,YAAY,EAAE,iBAAiB,EAAC,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAC7F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;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,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,IAAI,CAAC;IACnE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAgI3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/primitives/Select/Select.js CHANGED Viewed

@@ -5,7 +5,7 @@ import InputLabel_default from "../InputLabel/InputLabel.js";
 import Select_styles_default from "./Select.styles.js";
 import useSelectMessages_default from "./useSelectMessages.js";
 import { SelectConstants, bem, normalizeSelectOptions, withVendorCSSClassPrefix } from "@thunderid/browser";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useId, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/primitives/Select/Select.tsx
@@ -13,6 +13,10 @@ const Select = ({ label, error, className, required, disabled, helperText, place
 	const { theme, colorScheme } = useTheme_default();
 	const messages = useSelectMessages_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 = Select_styles_default(theme, colorScheme, disabled ?? false, hasError);
 	const items = useMemo(() => normalizeSelectOptions(options), [options]);
 	const selectRef = useRef(null);
@@ -40,10 +44,12 @@ const Select = ({ label, error, className, required, disabled, helperText, place
 	return /* @__PURE__ */ jsxs(FormControl_default, {
 		error,
 		helperText,
+		helperTextId,
 		className: cx(withVendorCSSClassPrefix(bem("select")), className),
 		style,
 		children: [
 			label && /* @__PURE__ */ jsx(InputLabel_default, {
+				htmlFor: inputId,
 				required,
 				error: hasError,
 				children: label
@@ -55,6 +61,8 @@ const Select = ({ label, error, className, required, disabled, helperText, place
 				"aria-required": required,
 				"aria-busy": loading || void 0,
 				...rest,
+				id: inputId,
+				"aria-describedby": describedBy,
 				ref: selectRef,
 				onChange: onLoadMore ? handleChange : onChange,
 				children: [