@mittwald/flow-react-components 1.5.0-next.2 → 1.5.0-next.20

package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs

@@ -5,7 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { joinIds, useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
 import { FieldError } from "../FieldError/FieldError.mjs";
@@ -23,7 +23,7 @@ import { PasswordGenerateButton } from "./components/PasswordGenerateButton/Pass
 import { usePolicyValidationResult } from "./lib/usePolicyValidationResult.mjs";
 import { useAriaAnnouncePasswordVisibility, useAriaAnnounceValidationState } from "./lib/ariaAnnounce.mjs";
 import clsx from "clsx";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/PasswordCreationField/PasswordCreationField.tsx
@@ -44,7 +44,7 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	};
 	const [policyValidationResult, setPolicyValidationResult] = useState(initialPolicyValidationState);
 	const loadingRef = useRef(null);
-	usePolicyValidationResult(validationPolicy, value ?? "", () => {
+	const { rememberValidationResult } = usePolicyValidationResult(validationPolicy, value ?? "", () => {
 		if (isEmptyValue) return;
 		loadingRef.current = setTimeout(() => {
 			setPolicyValidationResult((r) => ({
@@ -77,10 +77,23 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	const isValidFromValidationResult = !isEmptyValue && stateFromValidationResult?.isValid;
 	const isInvalidFromValidationResult = !isEmptyValue && stateFromValidationResult?.isValid === false;
 	const isInvalid = invalidFromProps || isInvalidFromValidationResult;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent({
-		...props,
-		isInvalid
-	}, "PasswordCreationField");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, renderedFieldErrorId } = useFieldComponent(props, "PasswordCreationField");
+	/**
+	* The result for a valid password appears after the asynchronous policy
+	* validation. react-aria resolves its description slot only when the
+	* field's validity changes, so a result that appears while the field stays
+	* valid (a generated password) was never linked. It gets its own id
+	* instead, referenced only while it is rendered.
+	*
+	* A shown error replaces it: the FormField styles hide descriptions next to
+	* an error, and a hidden description would still be announced.
+	*/
+	const resultDescriptionId = useId();
+	const [isResultDescriptionRendered, setIsResultDescriptionRendered] = useState(false);
+	const resultDescriptionRef = useCallback((element) => {
+		setIsResultDescriptionRendered(!!element);
+	}, []);
+	const describedBy = joinIds(isResultDescriptionRendered && resultDescriptionId, controlProps["aria-describedby"]);
 	useAriaAnnounceValidationState(latestValidationErrorText, !isEmptyValue && policyValidationResult.isValid !== "indeterminate");
 	useAriaAnnouncePasswordVisibility(isPasswordRevealed);
 	const setOptimisticPolicyValidationResult = (state = {}) => {
@@ -92,14 +105,16 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	};
 	const onPasswordGenerateHandler = async () => {
 		const generatedPassword = await generatePassword(validationPolicy);
-		setOptimisticPolicyValidationResult({
-			...initialPolicyValidationState,
-			isValid: true,
-			ruleResults: policyValidationResult.ruleResults.map((r) => ({
-				...r,
-				isValid: true
-			}))
-		});
+		/**
+		* The generator returns only passwords the policy accepts, so the rating
+		* is set with the password instead of after the typing debounce. It is
+		* the policy's own result: a guessed one (full strength) was overturned
+		* by the real rating, e.g. to "meets the minimum requirements". Cached,
+		* so the debounced validation of this password does not rate it again.
+		*/
+		const generatedPasswordResult = await validationPolicy.validate(generatedPassword);
+		rememberValidationResult(generatedPassword, generatedPasswordResult);
+		setPolicyValidationResult(generatedPasswordResult);
 		setIsPasswordRevealed(true);
 		onChange(generatedPassword);
 	};
@@ -155,12 +170,12 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	};
 	return /* @__PURE__ */ jsxs(Aria.TextField, {
 		...rest,
-		...fieldProps,
+		"aria-describedby": describedBy,
 		value,
 		type: isPasswordRevealed ? "text" : "password",
 		onChange,
 		onPaste: onPasswordPasteHandler,
-		className: clsx(className, fieldProps.className),
+		className: clsx(className, wrapperProps.className),
 		isDisabled,
 		isInvalid,
 		isRequired,
@@ -199,11 +214,19 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 							isEmptyValue,
 							isLoading: policyValidationResult.isValid === "indeterminate",
 							policyValidationResult,
-							validationResultState: stateFromValidationResult
+							validationResultState: stateFromValidationResult,
+							isInvalid: invalidFromProps
 						}, value)
 					]
 				}),
-				isValidFromValidationResult && /* @__PURE__ */ jsx(FieldDescription, { children: latestValidationErrorText })
+				isValidFromValidationResult && !renderedFieldErrorId && /* @__PURE__ */ jsx(Aria.TextContext.Provider, {
+					value: null,
+					children: /* @__PURE__ */ jsx(FieldDescription, {
+						id: resultDescriptionId,
+						ref: resultDescriptionRef,
+						children: latestValidationErrorText
+					})
+				})
 			]
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});

package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordCreationField.mjs","names":[],"sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  useState,\n  type ClipboardEvent,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport type {\n  PolicyValidationResult,\n  PolicyGenericDeclaration,\n  RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n  defaultPasswordCreationPolicy,\n  Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  useAriaAnnouncePasswordVisibility,\n  useAriaAnnounceValidationState,\n} from \"@/components/PasswordCreationField/lib/ariaAnnounce\";\n\nexport interface PasswordCreationFieldProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n        Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The password of a controlled field. */\n  value?: string;\n  /** Called with the password and its validity whenever the password changes. */\n  onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n  /** The initial password of an uncontrolled field. */\n  defaultValue?: string;\n  /** The placeholder shown while the field is empty. */\n  placeholder?: string;\n  /**\n   * The policy the password is validated against.\n   *\n   * @default defaultPasswordCreationPolicy\n   */\n  validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult extends Omit<\n  PolicyValidationResult,\n  \"isValid\"\n> {\n  isValid: boolean | \"indeterminate\";\n  ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n  \"PasswordCreationField\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      isDisabled,\n      onValidationResult,\n      isInvalid: invalidFromProps,\n      validationPolicy:\n        validationPolicyFromProps = defaultPasswordCreationPolicy,\n      isRequired,\n      value,\n      onChange,\n      ...rest\n    } = useControlledHostValueProps(props, \"\");\n\n    const translate = useLocalizedStringFormatter(\n      locales,\n      \"PasswordCreationField\",\n    );\n\n    const validationPolicy = useMemo(\n      () => Policy.fromDeclaration(validationPolicyFromProps),\n      [validationPolicyFromProps],\n    );\n\n    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n    const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n      isValid: \"indeterminate\",\n      complexity: {\n        min: validationPolicy.minComplexity,\n        actual: 4,\n        warning: null,\n      },\n      ruleResults: [],\n    };\n\n    const [policyValidationResult, setPolicyValidationResult] = useState(\n      initialPolicyValidationState,\n    );\n\n    const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n    usePolicyValidationResult(\n      validationPolicy,\n      value ?? \"\",\n      () => {\n        if (isEmptyValue) {\n          return;\n        }\n\n        loadingRef.current = setTimeout(() => {\n          setPolicyValidationResult((r) => ({\n            ...r,\n            isValid: \"indeterminate\",\n          }));\n        }, 150);\n      },\n      ({ password, isValid, results }) => {\n        if (loadingRef.current) {\n          clearTimeout(loadingRef.current);\n        }\n\n        if (isEmptyValue) {\n          setPolicyValidationResult(() => ({\n            ...results,\n            isValid: true,\n          }));\n          return;\n        }\n\n        setPolicyValidationResult(() => results);\n        onValidationResult?.({ password, isValid });\n      },\n    );\n\n    const isEmptyValue = !value;\n    const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n      isEmptyValue,\n      policyValidationResult,\n    );\n    let latestValidationErrorText = undefined;\n    if (stateFromValidationResult) {\n      const [translationKey, translationValues] = generateValidationTranslation(\n        stateFromValidationResult,\n      );\n      latestValidationErrorText = translate.format(\n        translationKey,\n        translationValues,\n      );\n    }\n\n    const isValidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid;\n\n    const isInvalidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid === false;\n    const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n    // The field derives its invalid state from the policy validation, so the\n    // hook has to see that state — not just the `isInvalid` prop — to describe\n    // the input with the field error.\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent({ ...props, isInvalid }, \"PasswordCreationField\");\n\n    useAriaAnnounceValidationState(\n      latestValidationErrorText,\n      !isEmptyValue && policyValidationResult.isValid !== \"indeterminate\",\n    );\n    useAriaAnnouncePasswordVisibility(isPasswordRevealed);\n\n    const setOptimisticPolicyValidationResult = (\n      state: Partial<ResolvedPolicyValidationResult> = {},\n    ) => {\n      setPolicyValidationResult((currentState) => ({\n        ...currentState,\n        isValid: true,\n        ...state,\n      }));\n    };\n\n    const onPasswordGenerateHandler: ActionFn = async () => {\n      const generatedPassword = await generatePassword(validationPolicy);\n      setOptimisticPolicyValidationResult({\n        ...initialPolicyValidationState,\n        isValid: true,\n        ruleResults: policyValidationResult.ruleResults.map((r) => ({\n          ...r,\n          isValid: true,\n        })),\n      });\n      setIsPasswordRevealed(true);\n      onChange(generatedPassword);\n    };\n\n    const onPasswordPasteHandler = (event: ClipboardEvent) => {\n      const pastedValue = event.clipboardData?.getData(\"text\");\n      if (typeof pastedValue === \"string\" && pastedValue !== value) {\n        setOptimisticPolicyValidationResult({\n          isValid: \"indeterminate\",\n        });\n      }\n    };\n\n    const togglePasswordVisibilityHandler = () => {\n      setIsPasswordRevealed((old) => !old);\n    };\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      Button: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n      },\n      CopyButton: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n        text: value,\n      },\n      Label: {\n        ...fieldPropsContext.Label,\n        children: dynamic((localProps) => {\n          return (\n            <>\n              {localProps.children}\n              <PasswordGenerateButton\n                isDisabled={isDisabled}\n                onGeneratePasswordAction={onPasswordGenerateHandler}\n              />\n              <ValidationResultButton\n                isEmptyValue={isEmptyValue}\n                isDisabled={isDisabled}\n                policyValidationResult={policyValidationResult}\n              />\n            </>\n          );\n        }),\n      },\n    };\n\n    return (\n      <Aria.TextField\n        {...rest}\n        {...fieldProps}\n        value={value}\n        type={isPasswordRevealed ? \"text\" : \"password\"}\n        onChange={onChange}\n        onPaste={onPasswordPasteHandler}\n        className={clsx(className, fieldProps.className)}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        <FieldErrorCaptureContext>\n          {latestValidationErrorText && (\n            <FieldError>{latestValidationErrorText}</FieldError>\n          )}\n          <PropsContextProvider\n            props={propsContext}\n            dependencies={[\n              isDisabled,\n              isRequired,\n              value,\n              policyValidationResult,\n              isEmptyValue,\n            ]}\n          >\n            {children}\n            <Aria.Group\n              isDisabled={isDisabled}\n              className={clsx(styles.inputGroup)}\n            >\n              <Aria.Input ref={ref} className={styles.input} />\n              <Aria.Group className={styles.buttonContainer}>\n                <TogglePasswordVisibilityButton\n                  className={styles.button}\n                  isVisible={isPasswordRevealed}\n                  isDisabled={isDisabled}\n                  onPress={togglePasswordVisibilityHandler}\n                />\n                <UiComponentTunnelExit\n                  id=\"button\"\n                  component=\"PasswordCreationField\"\n                />\n              </Aria.Group>\n              <ComplexityIndicator\n                key={value}\n                isEmptyValue={isEmptyValue}\n                isLoading={policyValidationResult.isValid === \"indeterminate\"}\n                policyValidationResult={policyValidationResult}\n                validationResultState={stateFromValidationResult}\n              />\n            </Aria.Group>\n            {isValidFromValidationResult && (\n              <FieldDescription>{latestValidationErrorText}</FieldDescription>\n            )}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </Aria.TextField>\n    );\n  },\n);\n\nexport default PasswordCreationField;\n"],"mappings":"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"}
+{"version":3,"file":"PasswordCreationField.mjs","names":[],"sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  useState,\n  type ClipboardEvent,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport type {\n  PolicyValidationResult,\n  PolicyGenericDeclaration,\n  RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n  defaultPasswordCreationPolicy,\n  Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  useAriaAnnouncePasswordVisibility,\n  useAriaAnnounceValidationState,\n} from \"@/components/PasswordCreationField/lib/ariaAnnounce\";\n\nexport interface PasswordCreationFieldProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n        Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The password of a controlled field. */\n  value?: string;\n  /** Called with the password and its validity whenever the password changes. */\n  onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n  /** The initial password of an uncontrolled field. */\n  defaultValue?: string;\n  /** The placeholder shown while the field is empty. */\n  placeholder?: string;\n  /**\n   * The policy the password is validated against.\n   *\n   * @default defaultPasswordCreationPolicy\n   */\n  validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult extends Omit<\n  PolicyValidationResult,\n  \"isValid\"\n> {\n  isValid: boolean | \"indeterminate\";\n  ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n  \"PasswordCreationField\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      isDisabled,\n      onValidationResult,\n      isInvalid: invalidFromProps,\n      validationPolicy:\n        validationPolicyFromProps = defaultPasswordCreationPolicy,\n      isRequired,\n      value,\n      onChange,\n      ...rest\n    } = useControlledHostValueProps(props, \"\");\n\n    const translate = useLocalizedStringFormatter(\n      locales,\n      \"PasswordCreationField\",\n    );\n\n    const validationPolicy = useMemo(\n      () => Policy.fromDeclaration(validationPolicyFromProps),\n      [validationPolicyFromProps],\n    );\n\n    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n    const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n      isValid: \"indeterminate\",\n      complexity: {\n        min: validationPolicy.minComplexity,\n        actual: 4,\n        warning: null,\n      },\n      ruleResults: [],\n    };\n\n    const [policyValidationResult, setPolicyValidationResult] = useState(\n      initialPolicyValidationState,\n    );\n\n    const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n    const { rememberValidationResult } = usePolicyValidationResult(\n      validationPolicy,\n      value ?? \"\",\n      () => {\n        if (isEmptyValue) {\n          return;\n        }\n\n        loadingRef.current = setTimeout(() => {\n          setPolicyValidationResult((r) => ({\n            ...r,\n            isValid: \"indeterminate\",\n          }));\n        }, 150);\n      },\n      ({ password, isValid, results }) => {\n        if (loadingRef.current) {\n          clearTimeout(loadingRef.current);\n        }\n\n        if (isEmptyValue) {\n          setPolicyValidationResult(() => ({\n            ...results,\n            isValid: true,\n          }));\n          return;\n        }\n\n        setPolicyValidationResult(() => results);\n        onValidationResult?.({ password, isValid });\n      },\n    );\n\n    const isEmptyValue = !value;\n    const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n      isEmptyValue,\n      policyValidationResult,\n    );\n    let latestValidationErrorText = undefined;\n    if (stateFromValidationResult) {\n      const [translationKey, translationValues] = generateValidationTranslation(\n        stateFromValidationResult,\n      );\n      latestValidationErrorText = translate.format(\n        translationKey,\n        translationValues,\n      );\n    }\n\n    const isValidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid;\n\n    const isInvalidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid === false;\n    const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      wrapperProps,\n      controlProps,\n      fieldPropsContext,\n      renderedFieldErrorId,\n    } = useFieldComponent(props, \"PasswordCreationField\");\n\n    /**\n     * The result for a valid password appears after the asynchronous policy\n     * validation. react-aria resolves its description slot only when the\n     * field's validity changes, so a result that appears while the field stays\n     * valid (a generated password) was never linked. It gets its own id\n     * instead, referenced only while it is rendered.\n     *\n     * A shown error replaces it: the FormField styles hide descriptions next to\n     * an error, and a hidden description would still be announced.\n     */\n    const resultDescriptionId = useId();\n    const [isResultDescriptionRendered, setIsResultDescriptionRendered] =\n      useState(false);\n    const resultDescriptionRef = useCallback((element: Element | null) => {\n      setIsResultDescriptionRendered(!!element);\n    }, []);\n    const describedBy = joinIds(\n      isResultDescriptionRendered && resultDescriptionId,\n      controlProps[\"aria-describedby\"],\n    );\n\n    useAriaAnnounceValidationState(\n      latestValidationErrorText,\n      !isEmptyValue && policyValidationResult.isValid !== \"indeterminate\",\n    );\n    useAriaAnnouncePasswordVisibility(isPasswordRevealed);\n\n    const setOptimisticPolicyValidationResult = (\n      state: Partial<ResolvedPolicyValidationResult> = {},\n    ) => {\n      setPolicyValidationResult((currentState) => ({\n        ...currentState,\n        isValid: true,\n        ...state,\n      }));\n    };\n\n    const onPasswordGenerateHandler: ActionFn = async () => {\n      const generatedPassword = await generatePassword(validationPolicy);\n      /**\n       * The generator returns only passwords the policy accepts, so the rating\n       * is set with the password instead of after the typing debounce. It is\n       * the policy's own result: a guessed one (full strength) was overturned\n       * by the real rating, e.g. to \"meets the minimum requirements\". Cached,\n       * so the debounced validation of this password does not rate it again.\n       */\n      const generatedPasswordResult =\n        await validationPolicy.validate(generatedPassword);\n      rememberValidationResult(generatedPassword, generatedPasswordResult);\n      setPolicyValidationResult(generatedPasswordResult);\n      setIsPasswordRevealed(true);\n      onChange(generatedPassword);\n    };\n\n    const onPasswordPasteHandler = (event: ClipboardEvent) => {\n      const pastedValue = event.clipboardData?.getData(\"text\");\n      if (typeof pastedValue === \"string\" && pastedValue !== value) {\n        setOptimisticPolicyValidationResult({\n          isValid: \"indeterminate\",\n        });\n      }\n    };\n\n    const togglePasswordVisibilityHandler = () => {\n      setIsPasswordRevealed((old) => !old);\n    };\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      Button: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n      },\n      CopyButton: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n        text: value,\n      },\n      Label: {\n        ...fieldPropsContext.Label,\n        children: dynamic((localProps) => {\n          return (\n            <>\n              {localProps.children}\n              <PasswordGenerateButton\n                isDisabled={isDisabled}\n                onGeneratePasswordAction={onPasswordGenerateHandler}\n              />\n              <ValidationResultButton\n                isEmptyValue={isEmptyValue}\n                isDisabled={isDisabled}\n                policyValidationResult={policyValidationResult}\n              />\n            </>\n          );\n        }),\n      },\n    };\n\n    return (\n      <Aria.TextField\n        {...rest}\n        aria-describedby={describedBy}\n        value={value}\n        type={isPasswordRevealed ? \"text\" : \"password\"}\n        onChange={onChange}\n        onPaste={onPasswordPasteHandler}\n        className={clsx(className, wrapperProps.className)}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        <FieldErrorCaptureContext>\n          {latestValidationErrorText && (\n            <FieldError>{latestValidationErrorText}</FieldError>\n          )}\n          <PropsContextProvider\n            props={propsContext}\n            dependencies={[\n              isDisabled,\n              isRequired,\n              value,\n              policyValidationResult,\n              isEmptyValue,\n            ]}\n          >\n            {children}\n            <Aria.Group\n              isDisabled={isDisabled}\n              className={clsx(styles.inputGroup)}\n            >\n              <Aria.Input ref={ref} className={styles.input} />\n              <Aria.Group className={styles.buttonContainer}>\n                <TogglePasswordVisibilityButton\n                  className={styles.button}\n                  isVisible={isPasswordRevealed}\n                  isDisabled={isDisabled}\n                  onPress={togglePasswordVisibilityHandler}\n                />\n                <UiComponentTunnelExit\n                  id=\"button\"\n                  component=\"PasswordCreationField\"\n                />\n              </Aria.Group>\n              <ComplexityIndicator\n                key={value}\n                isEmptyValue={isEmptyValue}\n                isLoading={policyValidationResult.isValid === \"indeterminate\"}\n                policyValidationResult={policyValidationResult}\n                validationResultState={stateFromValidationResult}\n                isInvalid={invalidFromProps}\n              />\n            </Aria.Group>\n            {isValidFromValidationResult && !renderedFieldErrorId && (\n              // Out of react-aria's description slot, which would set its own\n              // id – see `resultDescriptionId`.\n              <Aria.TextContext.Provider value={null}>\n                <FieldDescription\n                  id={resultDescriptionId}\n                  ref={resultDescriptionRef}\n                >\n                  {latestValidationErrorText}\n                </FieldDescription>\n              </Aria.TextContext.Provider>\n            )}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </Aria.TextField>\n    );\n  },\n);\n\nexport default PasswordCreationField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,IAAa,wBAAwB,cACnC,0BACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,YACA,oBACA,WAAW,kBACX,kBACE,4BAA4B,+BAC9B,YACA,OACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,YAAY,4BAChB,kBACA,uBACF;CAEA,MAAM,mBAAmB,cACjB,OAAO,gBAAgB,yBAAyB,GACtD,CAAC,yBAAyB,CAC5B;CAEA,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,KAAK;CAClE,MAAM,+BAA+D;EACnE,SAAS;EACT,YAAY;GACV,KAAK,iBAAiB;GACtB,QAAQ;GACR,SAAS;EACX;EACA,aAAa,CAAC;CAChB;CAEA,MAAM,CAAC,wBAAwB,6BAA6B,SAC1D,4BACF;CAEA,MAAM,aAAa,OAAsC,IAAI;CAC7D,MAAM,EAAE,6BAA6B,0BACnC,kBACA,SAAS,UACH;EACJ,IAAI,cACF;EAGF,WAAW,UAAU,iBAAiB;GACpC,2BAA2B,OAAO;IAChC,GAAG;IACH,SAAS;GACX,EAAE;EACJ,GAAG,GAAG;CACR,IACC,EAAE,UAAU,SAAS,cAAc;EAClC,IAAI,WAAW,SACb,aAAa,WAAW,OAAO;EAGjC,IAAI,cAAc;GAChB,iCAAiC;IAC/B,GAAG;IACH,SAAS;GACX,EAAE;GACF;EACF;EAEA,gCAAgC,OAAO;EACvC,qBAAqB;GAAE;GAAU;EAAQ,CAAC;CAC5C,CACF;CAEA,MAAM,eAAe,CAAC;CACtB,MAAM,4BAA4B,yCAChC,cACA,sBACF;CACA,IAAI,4BAA4B,KAAA;CAChC,IAAI,2BAA2B;EAC7B,MAAM,CAAC,gBAAgB,qBAAqB,8BAC1C,yBACF;EACA,4BAA4B,UAAU,OACpC,gBACA,iBACF;CACF;CAEA,MAAM,8BACJ,CAAC,gBAAgB,2BAA2B;CAE9C,MAAM,gCACJ,CAAC,gBAAgB,2BAA2B,YAAY;CAC1D,MAAM,YAAY,oBAAoB;CAEtC,MAAM,EACJ,gBACA,0BACA,cACA,cACA,mBACA,yBACE,kBAAkB,OAAO,uBAAuB;;;;;;;;;;;CAYpD,MAAM,sBAAsB,MAAM;CAClC,MAAM,CAAC,6BAA6B,kCAClC,SAAS,KAAK;CAChB,MAAM,uBAAuB,aAAa,YAA4B;EACpE,+BAA+B,CAAC,CAAC,OAAO;CAC1C,GAAG,CAAC,CAAC;CACL,MAAM,cAAc,QAClB,+BAA+B,qBAC/B,aAAa,mBACf;CAEA,+BACE,2BACA,CAAC,gBAAgB,uBAAuB,YAAY,eACtD;CACA,kCAAkC,kBAAkB;CAEpD,MAAM,uCACJ,QAAiD,CAAC,MAC/C;EACH,2BAA2B,kBAAkB;GAC3C,GAAG;GACH,SAAS;GACT,GAAG;EACL,EAAE;CACJ;CAEA,MAAM,4BAAsC,YAAY;EACtD,MAAM,oBAAoB,MAAM,iBAAiB,gBAAgB;;;;;;;;EAQjE,MAAM,0BACJ,MAAM,iBAAiB,SAAS,iBAAiB;EACnD,yBAAyB,mBAAmB,uBAAuB;EACnE,0BAA0B,uBAAuB;EACjD,sBAAsB,IAAI;EAC1B,SAAS,iBAAiB;CAC5B;CAEA,MAAM,0BAA0B,UAA0B;EACxD,MAAM,cAAc,MAAM,eAAe,QAAQ,MAAM;EACvD,IAAI,OAAO,gBAAgB,YAAY,gBAAgB,OACrD,oCAAoC,EAClC,SAAS,gBACX,CAAC;CAEL;CAEA,MAAM,wCAAwC;EAC5C,uBAAuB,QAAQ,CAAC,GAAG;CACrC;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,QAAQ;GACN,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;GACN,SAAS;GACT,OAAO;GACK;GACZ,WAAW,qCAAO;EACpB;EACA,YAAY;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,MAAM;GACN,SAAS;GACT,OAAO;GACK;GACZ,WAAW,qCAAO;GAClB,MAAM;EACR;EACA,OAAO;GACL,GAAG,kBAAkB;GACrB,UAAU,SAAS,eAAe;IAChC,OACE,qBAAA,YAAA,EAAA,UAAA;KACG,WAAW;KACZ,oBAAC,wBAAD;MACc;MACZ,0BAA0B;KAC3B,CAAA;KACD,oBAAC,wBAAD;MACgB;MACF;MACY;KACzB,CAAA;IACD,EAAA,CAAA;GAEN,CAAC;EACH;CACF;CAEA,OACE,qBAAC,KAAK,WAAN;EACE,GAAI;EACJ,oBAAkB;EACX;EACP,MAAM,qBAAqB,SAAS;EAC1B;EACV,SAAS;EACT,WAAW,KAAK,WAAW,aAAa,SAAS;EACrC;EACD;EACC;EAVd,UAAA,CAYE,qBAAC,0BAAD,EAAA,UAAA,CACG,6BACC,oBAAC,YAAD,EAAA,UAAa,0BAAsC,CAAA,GAErD,qBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IACZ;IACA;IACA;IACA;IACA;GACF;GARF,UAAA;IAUG;IACD,qBAAC,KAAK,OAAN;KACc;KACZ,WAAW,KAAK,qCAAO,UAAU;KAFnC,UAAA;MAIE,oBAAC,KAAK,OAAN;OAAiB;OAAK,WAAW,qCAAO;MAAQ,CAAA;MAChD,qBAAC,KAAK,OAAN;OAAY,WAAW,qCAAO;OAA9B,UAAA,CACE,oBAAC,gCAAD;QACE,WAAW,qCAAO;QAClB,WAAW;QACC;QACZ,SAAS;OACV,CAAA,GACD,oBAAC,uBAAD;QACE,IAAG;QACH,WAAU;OACX,CAAA,CACS;;MACZ,oBAAC,qBAAD;OAEgB;OACd,WAAW,uBAAuB,YAAY;OACtB;OACxB,uBAAuB;OACvB,WAAW;MACZ,GANM,KAMN;KACS;;IACX,+BAA+B,CAAC,wBAG/B,oBAAC,KAAK,YAAY,UAAlB;KAA2B,OAAO;KAChC,UAAA,oBAAC,kBAAD;MACE,IAAI;MACJ,KAAK;MAEJ,UAAA;KACe,CAAA;IACO,CAAA;GAET;EACE,CAAA,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACH;;AAEpB,CACF"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.mjs

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx
 /** @internal */
 var ComplexityIndicator = (props) => {
-	const { policyValidationResult, validationResultState, isLoading, isEmptyValue } = props;
+	const { policyValidationResult, validationResultState, isLoading, isEmptyValue, isInvalid } = props;
 	let complexityVisible;
 	let status;
 	const complexityScore = policyValidationResult?.complexity;
@@ -22,7 +22,7 @@ var ComplexityIndicator = (props) => {
 		status = "success";
 	} else {
 		complexityVisible = true;
-		status = getStatusFromPolicyValidationResult(validationResultState?.isValid ?? policyValidationResult.isValid, policyValidationResult);
+		status = isInvalid ? "danger" : getStatusFromPolicyValidationResult(validationResultState?.isValid ?? policyValidationResult.isValid, policyValidationResult);
 	}
 	const complexityFulfilled = totalFulfilledPercentage === 100;
 	const percentageClassName = clsx(ComplexityIndicator_module_default.bar, !isEmptyValue && status !== "unavailable" && ComplexityIndicator_module_default[`bar-background-status-${status}`], {

package/dist/js/packages/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComplexityIndicator.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"./ComplexityIndicator.module.scss\";\nimport { getStatusFromPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult\";\nimport clsx from \"clsx\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { type Status } from \"@/lib/types/props\";\nimport type { StateFromLatestPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\n\nexport type ComplexityStatus = Exclude<Status, \"info\"> | \"indeterminate\";\n\nexport interface ComplexityIndicatorProps {\n  isLoading: boolean;\n  isEmptyValue: boolean;\n  validationResultState: StateFromLatestPolicyValidationResult;\n  policyValidationResult: ResolvedPolicyValidationResult;\n}\n\n/** @internal */\nexport const ComplexityIndicator: FC<ComplexityIndicatorProps> = (props) => {\n  const {\n    policyValidationResult,\n    validationResultState,\n    isLoading,\n    isEmptyValue,\n  } = props;\n\n  let complexityVisible;\n  let status: ComplexityStatus;\n\n  const complexityScore = policyValidationResult?.complexity;\n  const rulesResults = policyValidationResult?.ruleResults ?? [];\n\n  const complexityFulfilledPercentage = complexityScore\n    ? Math.min(\n        (100 / (complexityScore.min + 1)) * (complexityScore.actual + 1),\n        100,\n      )\n    : 0;\n\n  const validRules = rulesResults.filter((r) => r.isValid).length;\n  const rulesFulfilledPercentage =\n    rulesResults.length > 0 ? (validRules / rulesResults.length) * 100 : 0;\n\n  let totalFulfilledPercentage = Math.round(\n    complexityFulfilledPercentage * 0.8 + rulesFulfilledPercentage * 0.2,\n  );\n\n  if (isEmptyValue) {\n    complexityVisible = false;\n    totalFulfilledPercentage = 0;\n    status = \"success\";\n  } else {\n    complexityVisible = true;\n    status = getStatusFromPolicyValidationResult(\n      validationResultState?.isValid ?? policyValidationResult.isValid,\n      policyValidationResult,\n    );\n  }\n\n  const complexityFulfilled = totalFulfilledPercentage === 100;\n\n  const percentageClassName = clsx(\n    styles.bar,\n    !isEmptyValue &&\n      status !== \"unavailable\" &&\n      styles[`bar-background-status-${status}`],\n    {\n      [styles.loading as string]: isLoading,\n      [styles.running as string]: !complexityFulfilled,\n    },\n  );\n\n  return (\n    <div\n      aria-hidden={true}\n      data-container=\"complexity\"\n      data-complexity-visible={complexityVisible}\n      data-complexity-status={status}\n      data-complexity-percentage={totalFulfilledPercentage}\n      className={clsx(styles.complexityIndicator, {\n        [styles.hide as string]: !complexityVisible,\n      })}\n    >\n      <div\n        style={{\n          \"--complexity-indicator--percentage\": totalFulfilledPercentage,\n        }}\n        className={percentageClassName}\n      />\n    </div>\n  );\n};\n\nexport default ComplexityIndicator;\n"],"mappings":";;;;;;;;AAkBA,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EACJ,wBACA,uBACA,WACA,iBACE;CAEJ,IAAI;CACJ,IAAI;CAEJ,MAAM,kBAAkB,wBAAwB;CAChD,MAAM,eAAe,wBAAwB,eAAe,CAAC;CAE7D,MAAM,gCAAgC,kBAClC,KAAK,IACF,OAAO,gBAAgB,MAAM,MAAO,gBAAgB,SAAS,IAC9D,GACF,IACA;CAEJ,MAAM,aAAa,aAAa,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAC;CACzD,MAAM,2BACJ,aAAa,SAAS,IAAK,aAAa,aAAa,SAAU,MAAM;CAEvE,IAAI,2BAA2B,KAAK,MAClC,gCAAgC,KAAM,2BAA2B,EACnE;CAEA,IAAI,cAAc;EAChB,oBAAoB;EACpB,2BAA2B;EAC3B,SAAS;CACX,OAAO;EACL,oBAAoB;EACpB,SAAS,oCACP,uBAAuB,WAAW,uBAAuB,SACzD,sBACF;CACF;CAEA,MAAM,sBAAsB,6BAA6B;CAEzD,MAAM,sBAAsB,KAC1B,mCAAO,KACP,CAAC,gBACC,WAAW,iBACX,mCAAO,yBAAyB,WAClC;GACG,mCAAO,UAAoB;GAC3B,mCAAO,UAAoB,CAAC;CAC/B,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAa;EACb,kBAAe;EACf,2BAAyB;EACzB,0BAAwB;EACxB,8BAA4B;EAC5B,WAAW,KAAK,mCAAO,qBAAqB,GACzC,mCAAO,OAAiB,CAAC,kBAC5B,CAAC;EAED,UAAA,oBAAC,OAAD;GACE,OAAO,EACL,sCAAsC,yBACxC;GACA,WAAW;EACZ,CAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"ComplexityIndicator.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"./ComplexityIndicator.module.scss\";\nimport { getStatusFromPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult\";\nimport clsx from \"clsx\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { type Status } from \"@/lib/types/props\";\nimport type { StateFromLatestPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\n\nexport type ComplexityStatus = Exclude<Status, \"info\"> | \"indeterminate\";\n\nexport interface ComplexityIndicatorProps {\n  isLoading: boolean;\n  isEmptyValue: boolean;\n  validationResultState: StateFromLatestPolicyValidationResult;\n  policyValidationResult: ResolvedPolicyValidationResult;\n  /**\n   * The field is invalid for a reason outside the policy, e.g. a server error.\n   * The bar then shows danger like the field, not the password's strength.\n   */\n  isInvalid?: boolean;\n}\n\n/** @internal */\nexport const ComplexityIndicator: FC<ComplexityIndicatorProps> = (props) => {\n  const {\n    policyValidationResult,\n    validationResultState,\n    isLoading,\n    isEmptyValue,\n    isInvalid,\n  } = props;\n\n  let complexityVisible;\n  let status: ComplexityStatus;\n\n  const complexityScore = policyValidationResult?.complexity;\n  const rulesResults = policyValidationResult?.ruleResults ?? [];\n\n  const complexityFulfilledPercentage = complexityScore\n    ? Math.min(\n        (100 / (complexityScore.min + 1)) * (complexityScore.actual + 1),\n        100,\n      )\n    : 0;\n\n  const validRules = rulesResults.filter((r) => r.isValid).length;\n  const rulesFulfilledPercentage =\n    rulesResults.length > 0 ? (validRules / rulesResults.length) * 100 : 0;\n\n  let totalFulfilledPercentage = Math.round(\n    complexityFulfilledPercentage * 0.8 + rulesFulfilledPercentage * 0.2,\n  );\n\n  if (isEmptyValue) {\n    complexityVisible = false;\n    totalFulfilledPercentage = 0;\n    status = \"success\";\n  } else {\n    complexityVisible = true;\n    status = isInvalid\n      ? \"danger\"\n      : getStatusFromPolicyValidationResult(\n          validationResultState?.isValid ?? policyValidationResult.isValid,\n          policyValidationResult,\n        );\n  }\n\n  const complexityFulfilled = totalFulfilledPercentage === 100;\n\n  const percentageClassName = clsx(\n    styles.bar,\n    !isEmptyValue &&\n      status !== \"unavailable\" &&\n      styles[`bar-background-status-${status}`],\n    {\n      [styles.loading as string]: isLoading,\n      [styles.running as string]: !complexityFulfilled,\n    },\n  );\n\n  return (\n    <div\n      aria-hidden={true}\n      data-container=\"complexity\"\n      data-complexity-visible={complexityVisible}\n      data-complexity-status={status}\n      data-complexity-percentage={totalFulfilledPercentage}\n      className={clsx(styles.complexityIndicator, {\n        [styles.hide as string]: !complexityVisible,\n      })}\n    >\n      <div\n        style={{\n          \"--complexity-indicator--percentage\": totalFulfilledPercentage,\n        }}\n        className={percentageClassName}\n      />\n    </div>\n  );\n};\n\nexport default ComplexityIndicator;\n"],"mappings":";;;;;;;;AAuBA,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EACJ,wBACA,uBACA,WACA,cACA,cACE;CAEJ,IAAI;CACJ,IAAI;CAEJ,MAAM,kBAAkB,wBAAwB;CAChD,MAAM,eAAe,wBAAwB,eAAe,CAAC;CAE7D,MAAM,gCAAgC,kBAClC,KAAK,IACF,OAAO,gBAAgB,MAAM,MAAO,gBAAgB,SAAS,IAC9D,GACF,IACA;CAEJ,MAAM,aAAa,aAAa,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAC;CACzD,MAAM,2BACJ,aAAa,SAAS,IAAK,aAAa,aAAa,SAAU,MAAM;CAEvE,IAAI,2BAA2B,KAAK,MAClC,gCAAgC,KAAM,2BAA2B,EACnE;CAEA,IAAI,cAAc;EAChB,oBAAoB;EACpB,2BAA2B;EAC3B,SAAS;CACX,OAAO;EACL,oBAAoB;EACpB,SAAS,YACL,WACA,oCACE,uBAAuB,WAAW,uBAAuB,SACzD,sBACF;CACN;CAEA,MAAM,sBAAsB,6BAA6B;CAEzD,MAAM,sBAAsB,KAC1B,mCAAO,KACP,CAAC,gBACC,WAAW,iBACX,mCAAO,yBAAyB,WAClC;GACG,mCAAO,UAAoB;GAC3B,mCAAO,UAAoB,CAAC;CAC/B,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAa;EACb,kBAAe;EACf,2BAAyB;EACzB,0BAAwB;EACxB,8BAA4B;EAC5B,WAAW,KAAK,mCAAO,qBAAqB,GACzC,mCAAO,OAAiB,CAAC,kBAC5B,CAAC;EAED,UAAA,oBAAC,OAAD;GACE,OAAO,EACL,sCAAsC,yBACxC;GACA,WAAW;EACZ,CAAA;CACE,CAAA;AAET"}

package/dist/js/packages/components/src/components/PasswordCreationField/lib/usePolicyValidationResult.mjs

@@ -34,6 +34,18 @@ var usePolicyValidationResult = (validationPolicy, password, onValidationStart,
 		if (password) validatePasswordDebounce(password);
 		else validatePassword(password);
 	}, [password, validationPolicy]);
+	/**
+	* Stores a result the caller already has (a generated password), so the
+	* validation of that password answers from the cache instead of rating it
+	* again.
+	*/
+	const rememberValidationResult = (pwd, results) => {
+		cache.current = {
+			password: pwd,
+			results
+		};
+	};
+	return { rememberValidationResult };
 };
 //#endregion
 export { usePolicyValidationResult };

package/dist/js/packages/components/src/components/PasswordCreationField/lib/usePolicyValidationResult.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePolicyValidationResult.mjs","names":[],"sources":["../../../../../../../../src/components/PasswordCreationField/lib/usePolicyValidationResult.ts"],"sourcesContent":["import { startTransition, useEffect, useRef } from \"react\";\nimport type { Policy } from \"@/integrations/@mittwald/password-tools-js\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\n/** @internal */\nexport const usePolicyValidationResult = (\n  validationPolicy: Policy,\n  password: string,\n  onValidationStart?: () => void,\n  onValidationResult?: (data: {\n    password: string;\n    isValid: boolean;\n    results: ResolvedPolicyValidationResult;\n  }) => void,\n) => {\n  const cache = useRef<{\n    password: string;\n    results: ResolvedPolicyValidationResult;\n  } | null>(null);\n\n  const validatePassword = (pwd: string) => {\n    onValidationStart?.();\n\n    startTransition(async () => {\n      if (cache.current?.password === pwd) {\n        onValidationResult?.({\n          password: cache.current.password,\n          isValid: Boolean(cache.current.results.isValid),\n          results: cache.current.results,\n        });\n        return;\n      }\n\n      const validationResult = await validationPolicy.validate(pwd);\n      cache.current = { password: pwd, results: validationResult };\n      onValidationResult?.({\n        password: pwd,\n        isValid: validationResult.isValid,\n        results: validationResult,\n      });\n    });\n  };\n\n  const validatePasswordDebounce = useDebouncedCallback(validatePassword, 350, {\n    trailing: true,\n  });\n\n  useEffect(() => {\n    if (password) {\n      validatePasswordDebounce(password);\n    } else {\n      validatePassword(password);\n    }\n  }, [password, validationPolicy]);\n};\n"],"mappings":";;;;;;AAMA,IAAa,6BACX,kBACA,UACA,mBACA,uBAKG;CACH,MAAM,QAAQ,OAGJ,IAAI;CAEd,MAAM,oBAAoB,QAAgB;EACxC,oBAAoB;EAEpB,gBAAgB,YAAY;GAC1B,IAAI,MAAM,SAAS,aAAa,KAAK;IACnC,qBAAqB;KACnB,UAAU,MAAM,QAAQ;KACxB,SAAS,QAAQ,MAAM,QAAQ,QAAQ,OAAO;KAC9C,SAAS,MAAM,QAAQ;IACzB,CAAC;IACD;GACF;GAEA,MAAM,mBAAmB,MAAM,iBAAiB,SAAS,GAAG;GAC5D,MAAM,UAAU;IAAE,UAAU;IAAK,SAAS;GAAiB;GAC3D,qBAAqB;IACnB,UAAU;IACV,SAAS,iBAAiB;IAC1B,SAAS;GACX,CAAC;EACH,CAAC;CACH;CAEA,MAAM,2BAA2B,qBAAqB,kBAAkB,KAAK,EAC3E,UAAU,KACZ,CAAC;CAED,gBAAgB;EACd,IAAI,UACF,yBAAyB,QAAQ;OAEjC,iBAAiB,QAAQ;CAE7B,GAAG,CAAC,UAAU,gBAAgB,CAAC;AACjC"}
+{"version":3,"file":"usePolicyValidationResult.mjs","names":[],"sources":["../../../../../../../../src/components/PasswordCreationField/lib/usePolicyValidationResult.ts"],"sourcesContent":["import { startTransition, useEffect, useRef } from \"react\";\nimport type { Policy } from \"@/integrations/@mittwald/password-tools-js\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { useDebouncedCallback } from \"use-debounce\";\n\n/** @internal */\nexport const usePolicyValidationResult = (\n  validationPolicy: Policy,\n  password: string,\n  onValidationStart?: () => void,\n  onValidationResult?: (data: {\n    password: string;\n    isValid: boolean;\n    results: ResolvedPolicyValidationResult;\n  }) => void,\n) => {\n  const cache = useRef<{\n    password: string;\n    results: ResolvedPolicyValidationResult;\n  } | null>(null);\n\n  const validatePassword = (pwd: string) => {\n    onValidationStart?.();\n\n    startTransition(async () => {\n      if (cache.current?.password === pwd) {\n        onValidationResult?.({\n          password: cache.current.password,\n          isValid: Boolean(cache.current.results.isValid),\n          results: cache.current.results,\n        });\n        return;\n      }\n\n      const validationResult = await validationPolicy.validate(pwd);\n      cache.current = { password: pwd, results: validationResult };\n      onValidationResult?.({\n        password: pwd,\n        isValid: validationResult.isValid,\n        results: validationResult,\n      });\n    });\n  };\n\n  const validatePasswordDebounce = useDebouncedCallback(validatePassword, 350, {\n    trailing: true,\n  });\n\n  useEffect(() => {\n    if (password) {\n      validatePasswordDebounce(password);\n    } else {\n      validatePassword(password);\n    }\n  }, [password, validationPolicy]);\n\n  /**\n   * Stores a result the caller already has (a generated password), so the\n   * validation of that password answers from the cache instead of rating it\n   * again.\n   */\n  const rememberValidationResult = (\n    pwd: string,\n    results: ResolvedPolicyValidationResult,\n  ) => {\n    cache.current = { password: pwd, results };\n  };\n\n  return { rememberValidationResult } as const;\n};\n"],"mappings":";;;;;;AAMA,IAAa,6BACX,kBACA,UACA,mBACA,uBAKG;CACH,MAAM,QAAQ,OAGJ,IAAI;CAEd,MAAM,oBAAoB,QAAgB;EACxC,oBAAoB;EAEpB,gBAAgB,YAAY;GAC1B,IAAI,MAAM,SAAS,aAAa,KAAK;IACnC,qBAAqB;KACnB,UAAU,MAAM,QAAQ;KACxB,SAAS,QAAQ,MAAM,QAAQ,QAAQ,OAAO;KAC9C,SAAS,MAAM,QAAQ;IACzB,CAAC;IACD;GACF;GAEA,MAAM,mBAAmB,MAAM,iBAAiB,SAAS,GAAG;GAC5D,MAAM,UAAU;IAAE,UAAU;IAAK,SAAS;GAAiB;GAC3D,qBAAqB;IACnB,UAAU;IACV,SAAS,iBAAiB;IAC1B,SAAS;GACX,CAAC;EACH,CAAC;CACH;CAEA,MAAM,2BAA2B,qBAAqB,kBAAkB,KAAK,EAC3E,UAAU,KACZ,CAAC;CAED,gBAAgB;EACd,IAAI,UACF,yBAAyB,QAAQ;OAEjC,iBAAiB,QAAQ;CAE7B,GAAG,CAAC,UAAU,gBAAgB,CAAC;;;;;;CAO/B,MAAM,4BACJ,KACA,YACG;EACH,MAAM,UAAU;GAAE,UAAU;GAAK;EAAQ;CAC3C;CAEA,OAAO,EAAE,yBAAyB;AACpC"}

package/dist/js/packages/components/src/components/RadioGroup/RadioGroup.mjs

@@ -16,7 +16,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var RadioGroup = flowComponent("RadioGroup", (props) => {
 	const { children, className, s, m, l, ref, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "RadioGroup");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "RadioGroup");
 	const rootClassName = clsx(FormField_module_default.formField, className);
 	const propsContext = {
 		RadioButton: { tunnel: {
@@ -33,7 +33,8 @@ var RadioGroup = flowComponent("RadioGroup", (props) => {
 	useMakeFocusable(localRadioRef);
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
-		className: clsx(rootClassName, fieldProps.className),
+		"aria-describedby": controlProps["aria-describedby"],
+		className: clsx(rootClassName, wrapperProps.className),
 		ref: localRadioRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,

package/dist/js/packages/components/src/components/RadioGroup/RadioGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.mjs","names":[],"sources":["../../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface RadioGroupProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n    FlowComponentProps,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> {}\n\n/** @flr-generate all */\nexport const RadioGroup = flowComponent(\"RadioGroup\", (props) => {\n  const { children, className, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"RadioGroup\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n  const propsContext: PropsContext = {\n    RadioButton: {\n      tunnel: {\n        id: \"radioButtons\",\n        component: \"RadioGroup\",\n      },\n    },\n    Radio: {\n      tunnel: {\n        id: \"radios\",\n        component: \"RadioGroup\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const localRadioRef = useObjectRef(ref);\n  useMakeFocusable(localRadioRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={localRadioRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>\n            <UiComponentTunnelExit id=\"radioButtons\" component=\"RadioGroup\" />\n          </ColumnLayout>\n\n          <ColumnLayout\n            s={s ?? [1]}\n            m={m ?? [1]}\n            l={l ?? [1]}\n            rowGap=\"s\"\n            className={styles.radioGroup}\n          >\n            <UiComponentTunnelExit id=\"radios\" component=\"RadioGroup\" />\n          </ColumnLayout>\n\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAEvD,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,yBAAgB,WAAW,SAAS;CAC/D,MAAM,eAA6B;EACjC,aAAa,EACX,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,aAAa,GAAG;CACtC,iBAAiB,aAAa;CAE9B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,WAAW,KAAK,eAAe,WAAW,SAAS;EACnD,KAAK;EAHP,UAAA,CAKE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAW,0BAAO;KAChD,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAe,WAAU;KAAc,CAAA;IACrD,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAW,0BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAS,WAAU;KAAc,CAAA;IAC/C,CAAA;IAEb;GACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"RadioGroup.mjs","names":[],"sources":["../../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface RadioGroupProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n    FlowComponentProps,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> {}\n\n/** @flr-generate all */\nexport const RadioGroup = flowComponent(\"RadioGroup\", (props) => {\n  const { children, className, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"RadioGroup\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n  const propsContext: PropsContext = {\n    RadioButton: {\n      tunnel: {\n        id: \"radioButtons\",\n        component: \"RadioGroup\",\n      },\n    },\n    Radio: {\n      tunnel: {\n        id: \"radios\",\n        component: \"RadioGroup\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const localRadioRef = useObjectRef(ref);\n  useMakeFocusable(localRadioRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={clsx(rootClassName, wrapperProps.className)}\n      ref={localRadioRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>\n            <UiComponentTunnelExit id=\"radioButtons\" component=\"RadioGroup\" />\n          </ColumnLayout>\n\n          <ColumnLayout\n            s={s ?? [1]}\n            m={m ?? [1]}\n            l={l ?? [1]}\n            rowGap=\"s\"\n            className={styles.radioGroup}\n          >\n            <UiComponentTunnelExit id=\"radios\" component=\"RadioGroup\" />\n          </ColumnLayout>\n\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAEvD,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,yBAAgB,WAAW,SAAS;CAC/D,MAAM,eAA6B;EACjC,aAAa,EACX,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,OAAO,EACL,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,aAAa,GAAG;CACtC,iBAAiB,aAAa;CAE9B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EACrD,KAAK;EAJP,UAAA,CAME,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAW,0BAAO;KAChD,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAe,WAAU;KAAc,CAAA;IACrD,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAW,0BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAS,WAAU;KAAc,CAAA;IAC/C,CAAA;IAEb;GACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

package/dist/js/packages/components/src/components/Rating/Rating.mjs

@@ -22,8 +22,8 @@ var toSegmentValue = (value) => value === void 0 ? void 0 : Math.round(value).to
 */
 var Rating = flowComponent("Rating", (props) => {
 	const { value, defaultValue, size = "m", maxValue = 5, fill = "cumulative", className, children, ref, iconEmpty, iconFilled, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "Rating");
-	const rootClassName = clsx(Rating_module_default.rating, Rating_module_default[`size-${size}`], Rating_module_default[`fill-${fill}`], fieldProps.className, className);
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "Rating");
+	const rootClassName = clsx(Rating_module_default.rating, Rating_module_default[`size-${size}`], Rating_module_default[`fill-${fill}`], wrapperProps.className, className);
 	const localRef = useObjectRef(ref);
 	useMakeFocusable(localRef);
 	const segmentProps = {
@@ -44,6 +44,7 @@ var Rating = flowComponent("Rating", (props) => {
 	const defaultSegments = Array.from({ length: maxValue }, (_, index) => /* @__PURE__ */ jsx(RatingSegment, { ...segmentProps }, index));
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
+		"aria-describedby": controlProps["aria-describedby"],
 		className: rootClassName,
 		value: toSegmentValue(value),
 		defaultValue: toSegmentValue(defaultValue),

package/dist/js/packages/components/src/components/Rating/Rating.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { Children, type PropsWithChildren, type ReactElement } from \"react\";\nimport styles from \"./Rating.module.scss\";\nimport clsx from \"clsx\";\nimport * as Aria from \"react-aria-components\";\nimport { RatingSegment } from \"@/components/Rating/components/RatingSegment\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { RatingSegmentContextProvider } from \"@/components/Rating/context\";\n\nexport interface RatingProps\n  extends\n    FlowComponentProps,\n    PropsWithChildren,\n    Omit<Aria.RadioGroupProps, \"children\" | \"value\" | \"defaultValue\"> {\n  /**\n   * The value sets the amount of filled stars. Decimals are rounded to the\n   * nearest whole star. @default: 0\n   */\n  value?: number;\n  /**\n   * The defaultValue sets the amount of default filled stars. Decimals are\n   * rounded to the nearest whole star. @default: 0\n   */\n  defaultValue?: number;\n  /** The size of the component. @default: \"m\" */\n  size?: \"s\" | \"m\";\n  /**\n   * The number of segments the rating consists of. Ignored when the rating has\n   * `RatingSegment` children — those define the number of segments themselves.\n   *\n   * @default: 5\n   */\n  maxValue?: number;\n  /**\n   * How the segments are filled. `cumulative` fills every segment up to the\n   * value, `single` fills only the selected segment.\n   *\n   * @default: cumulative\n   */\n  fill?: \"cumulative\" | \"single\";\n  /** An alternative icon for the empty state */\n  iconEmpty?: ReactElement;\n  /** An alternative icon for the filled state */\n  iconFilled?: ReactElement;\n}\n\nconst segmentsTunnelId = \"segments\";\n\n// Segment values are whole numbers, so a decimal would match no segment.\nconst toSegmentValue = (value?: number) =>\n  value === undefined ? undefined : Math.round(value).toString();\n\n/**\n * @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const Rating = flowComponent(\"Rating\", (props) => {\n  const {\n    value,\n    defaultValue,\n    size = \"m\",\n    maxValue = 5,\n    fill = \"cumulative\",\n    className,\n    children,\n    ref,\n    iconEmpty,\n    iconFilled,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"Rating\");\n\n  const rootClassName = clsx(\n    styles.rating,\n    styles[`size-${size}`],\n    styles[`fill-${fill}`],\n    fieldProps.className,\n    className,\n  );\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  const segmentProps = { size, iconEmpty, iconFilled };\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    RatingSegment: {\n      ...segmentProps,\n      tunnel: { id: segmentsTunnelId, component: \"Rating\" },\n    },\n  };\n\n  const defaultSegments = Array.from({ length: maxValue }, (_, index) => (\n    <RatingSegment key={index} {...segmentProps} />\n  ));\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={rootClassName}\n      value={toSegmentValue(value)}\n      defaultValue={toSegmentValue(defaultValue)}\n      ref={localRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[size, iconEmpty, iconFilled]}\n        >\n          {children}\n        </PropsContextProvider>\n        <div className={styles.ratingSegments}>\n          <UiComponentTunnelExit id={segmentsTunnelId} component=\"Rating\">\n            {(tunnelChildren) => {\n              const tunneledSegments = Children.toArray(tunnelChildren);\n              const segments =\n                tunneledSegments.length > 0\n                  ? tunneledSegments\n                  : defaultSegments;\n\n              return segments.map((segment, index) => (\n                <RatingSegmentContextProvider\n                  key={index}\n                  value={{ value: index + 1, count: segments.length }}\n                >\n                  {segment}\n                </RatingSegmentContextProvider>\n              ));\n            }}\n          </UiComponentTunnelExit>\n        </div>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default Rating;\n"],"mappings":";;;;;;;;;;;;;;;;AAqDA,IAAM,mBAAmB;AAGzB,IAAM,kBAAkB,UACtB,UAAU,KAAA,IAAY,KAAA,IAAY,KAAK,MAAM,KAAK,CAAC,CAAC,SAAS;;;;;AAM/D,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,OACA,cACA,OAAO,KACP,WAAW,GACX,OAAO,cACP,WACA,UACA,KACA,WACA,YACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KACpB,sBAAO,QACP,sBAAO,QAAQ,SACf,sBAAO,QAAQ,SACf,WAAW,WACX,SACF;CAEA,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,MAAM,eAAe;EAAE;EAAM;EAAW;CAAW;CAEnD,MAAM,eAA6B;EACjC,GAAG;EACH,eAAe;GACb,GAAG;GACH,QAAQ;IAAE,IAAI;IAAkB,WAAW;GAAS;EACtD;CACF;CAEA,MAAM,kBAAkB,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UAC3D,oBAAC,eAAD,EAA2B,GAAI,aAAe,GAA1B,KAA0B,CAC/C;CAED,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,WAAW;EACX,OAAO,eAAe,KAAK;EAC3B,cAAc,eAAe,YAAY;EACzC,KAAK;EALP,UAAA,CAOE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IAAC;IAAM;IAAW;GAAU;GAEzC;EACmB,CAAA,GACtB,oBAAC,OAAD;GAAK,WAAW,sBAAO;GACrB,UAAA,oBAAC,uBAAD;IAAuB,IAAI;IAAkB,WAAU;IACnD,WAAA,mBAAmB;KACnB,MAAM,mBAAmB,SAAS,QAAQ,cAAc;KACxD,MAAM,WACJ,iBAAiB,SAAS,IACtB,mBACA;KAEN,OAAO,SAAS,KAAK,SAAS,UAC5B,oBAAC,8BAAD;MAEE,OAAO;OAAE,OAAO,QAAQ;OAAG,OAAO,SAAS;MAAO;MAEjD,UAAA;KAC2B,GAJvB,KAIuB,CAC/B;IACH;GACqB,CAAA;EACpB,CAAA,CACmB,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"Rating.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { Children, type PropsWithChildren, type ReactElement } from \"react\";\nimport styles from \"./Rating.module.scss\";\nimport clsx from \"clsx\";\nimport * as Aria from \"react-aria-components\";\nimport { RatingSegment } from \"@/components/Rating/components/RatingSegment\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { RatingSegmentContextProvider } from \"@/components/Rating/context\";\n\nexport interface RatingProps\n  extends\n    FlowComponentProps,\n    PropsWithChildren,\n    Omit<Aria.RadioGroupProps, \"children\" | \"value\" | \"defaultValue\"> {\n  /**\n   * The value sets the amount of filled stars. Decimals are rounded to the\n   * nearest whole star. @default: 0\n   */\n  value?: number;\n  /**\n   * The defaultValue sets the amount of default filled stars. Decimals are\n   * rounded to the nearest whole star. @default: 0\n   */\n  defaultValue?: number;\n  /** The size of the component. @default: \"m\" */\n  size?: \"s\" | \"m\";\n  /**\n   * The number of segments the rating consists of. Ignored when the rating has\n   * `RatingSegment` children — those define the number of segments themselves.\n   *\n   * @default: 5\n   */\n  maxValue?: number;\n  /**\n   * How the segments are filled. `cumulative` fills every segment up to the\n   * value, `single` fills only the selected segment.\n   *\n   * @default: cumulative\n   */\n  fill?: \"cumulative\" | \"single\";\n  /** An alternative icon for the empty state */\n  iconEmpty?: ReactElement;\n  /** An alternative icon for the filled state */\n  iconFilled?: ReactElement;\n}\n\nconst segmentsTunnelId = \"segments\";\n\n// Segment values are whole numbers, so a decimal would match no segment.\nconst toSegmentValue = (value?: number) =>\n  value === undefined ? undefined : Math.round(value).toString();\n\n/**\n * @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const Rating = flowComponent(\"Rating\", (props) => {\n  const {\n    value,\n    defaultValue,\n    size = \"m\",\n    maxValue = 5,\n    fill = \"cumulative\",\n    className,\n    children,\n    ref,\n    iconEmpty,\n    iconFilled,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"Rating\");\n\n  const rootClassName = clsx(\n    styles.rating,\n    styles[`size-${size}`],\n    styles[`fill-${fill}`],\n    wrapperProps.className,\n    className,\n  );\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  const segmentProps = { size, iconEmpty, iconFilled };\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    RatingSegment: {\n      ...segmentProps,\n      tunnel: { id: segmentsTunnelId, component: \"Rating\" },\n    },\n  };\n\n  const defaultSegments = Array.from({ length: maxValue }, (_, index) => (\n    <RatingSegment key={index} {...segmentProps} />\n  ));\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n      value={toSegmentValue(value)}\n      defaultValue={toSegmentValue(defaultValue)}\n      ref={localRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[size, iconEmpty, iconFilled]}\n        >\n          {children}\n        </PropsContextProvider>\n        <div className={styles.ratingSegments}>\n          <UiComponentTunnelExit id={segmentsTunnelId} component=\"Rating\">\n            {(tunnelChildren) => {\n              const tunneledSegments = Children.toArray(tunnelChildren);\n              const segments =\n                tunneledSegments.length > 0\n                  ? tunneledSegments\n                  : defaultSegments;\n\n              return segments.map((segment, index) => (\n                <RatingSegmentContextProvider\n                  key={index}\n                  value={{ value: index + 1, count: segments.length }}\n                >\n                  {segment}\n                </RatingSegmentContextProvider>\n              ));\n            }}\n          </UiComponentTunnelExit>\n        </div>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default Rating;\n"],"mappings":";;;;;;;;;;;;;;;;AAqDA,IAAM,mBAAmB;AAGzB,IAAM,kBAAkB,UACtB,UAAU,KAAA,IAAY,KAAA,IAAY,KAAK,MAAM,KAAK,CAAC,CAAC,SAAS;;;;;AAM/D,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,OACA,cACA,OAAO,KACP,WAAW,GACX,OAAO,cACP,WACA,UACA,KACA,WACA,YACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KACpB,sBAAO,QACP,sBAAO,QAAQ,SACf,sBAAO,QAAQ,SACf,aAAa,WACb,SACF;CAEA,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,MAAM,eAAe;EAAE;EAAM;EAAW;CAAW;CAEnD,MAAM,eAA6B;EACjC,GAAG;EACH,eAAe;GACb,GAAG;GACH,QAAQ;IAAE,IAAI;IAAkB,WAAW;GAAS;EACtD;CACF;CAEA,MAAM,kBAAkB,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UAC3D,oBAAC,eAAD,EAA2B,GAAI,aAAe,GAA1B,KAA0B,CAC/C;CAED,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,OAAO,eAAe,KAAK;EAC3B,cAAc,eAAe,YAAY;EACzC,KAAK;EANP,UAAA,CAQE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IAAC;IAAM;IAAW;GAAU;GAEzC;EACmB,CAAA,GACtB,oBAAC,OAAD;GAAK,WAAW,sBAAO;GACrB,UAAA,oBAAC,uBAAD;IAAuB,IAAI;IAAkB,WAAU;IACnD,WAAA,mBAAmB;KACnB,MAAM,mBAAmB,SAAS,QAAQ,cAAc;KACxD,MAAM,WACJ,iBAAiB,SAAS,IACtB,mBACA;KAEN,OAAO,SAAS,KAAK,SAAS,UAC5B,oBAAC,8BAAD;MAEE,OAAO;OAAE,OAAO,QAAQ;OAAG,OAAO,SAAS;MAAO;MAEjD,UAAA;KAC2B,GAJvB,KAIuB,CAC/B;IACH;GACqB,CAAA;EACpB,CAAA,CACmB,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

package/dist/js/packages/components/src/components/SearchField/SearchField.mjs

@@ -19,7 +19,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var SearchField = flowComponent("SearchField", (props) => {
 	const { children, className, ref, ...rest } = useControlledHostValueProps(props, "");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "SearchField");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "SearchField");
 	const rootClassName = clsx(FormField_module_default.formField, SearchField_module_default.searchField, className);
 	const searchText = useLocalizedStringFormatter(__locale_default, "SearchField").format(`search`);
 	const propsContext = {
@@ -35,9 +35,9 @@ var SearchField = flowComponent("SearchField", (props) => {
 	};
 	return /* @__PURE__ */ jsxs(Aria.SearchField, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		"aria-label": searchText,
-		className: clsx(rootClassName, fieldProps.className),
+		className: clsx(rootClassName, wrapperProps.className),
 		children: [/* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }), /* @__PURE__ */ jsxs("div", {

package/dist/js/packages/components/src/components/SearchField/SearchField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.mjs","names":[],"sources":["../../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose, IconSearch } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SearchFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.SearchFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const SearchField = flowComponent(\"SearchField\", (props) => {\n  const { children, className, ref, ...rest } = useControlledHostValueProps(\n    props,\n    \"\",\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"SearchField\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.searchField,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"SearchField\");\n  const searchText = stringFormatter.format(`search`);\n\n  const propsContext: PropsContext = {\n    Kbd: {\n      isDisabled: props.isDisabled,\n      tunnel: {\n        id: \"kbd\",\n        component: \"SearchField\",\n      },\n      className: styles.kbd,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <Aria.SearchField\n      {...rest}\n      {...fieldProps}\n      aria-label={searchText}\n      className={clsx(rootClassName, fieldProps.className)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n        <div className={styles.inputContainer}>\n          <IconSearch className={styles.searchIcon} />\n          <Aria.Input\n            placeholder={searchText}\n            className={styles.input}\n            ref={ref}\n          />\n          <UiComponentTunnelExit id=\"kbd\" component=\"SearchField\" />\n          <Button\n            className={styles.clearButton}\n            variant=\"plain\"\n            color=\"secondary\"\n          >\n            <IconClose />\n          </Button>\n        </div>\n      </PropsContextProvider>\n      <FieldErrorView />\n    </Aria.SearchField>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS,4BAC5C,OACA,EACF;CAEA,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KACpB,yBAAgB,WAChB,2BAAO,aACP,SACF;CAGA,MAAM,aADkB,4BAA4B,kBAAS,aAC1C,CAAA,CAAgB,OAAO,QAAQ;CAElD,MAAM,eAA6B;EACjC,KAAK;GACH,YAAY,MAAM;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAW,2BAAO;EACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACJ,GAAI;EACJ,cAAY;EACZ,WAAW,KAAK,eAAe,WAAW,SAAS;EAJrD,UAAA,CAME,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAE9D,qBAAC,OAAD;IAAK,WAAW,2BAAO;IAAvB,UAAA;KACE,oBAAC,YAAD,EAAY,WAAW,2BAAO,WAAa,CAAA;KAC3C,oBAAC,KAAK,OAAN;MACE,aAAa;MACb,WAAW,2BAAO;MACb;KACN,CAAA;KACD,oBAAC,uBAAD;MAAuB,IAAG;MAAM,WAAU;KAAe,CAAA;KACzD,oBAAC,QAAD;MACE,WAAW,2BAAO;MAClB,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,WAAD,CAAY,CAAA;KACN,CAAA;IACL;GACe,CAAA,CAAA;EACtB,CAAA,GAAA,oBAAC,gBAAD,CAAiB,CAAA,CACD;;AAEtB,CAAC"}
+{"version":3,"file":"SearchField.mjs","names":[],"sources":["../../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose, IconSearch } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SearchFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.SearchFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const SearchField = flowComponent(\"SearchField\", (props) => {\n  const { children, className, ref, ...rest } = useControlledHostValueProps(\n    props,\n    \"\",\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"SearchField\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.searchField,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"SearchField\");\n  const searchText = stringFormatter.format(`search`);\n\n  const propsContext: PropsContext = {\n    Kbd: {\n      isDisabled: props.isDisabled,\n      tunnel: {\n        id: \"kbd\",\n        component: \"SearchField\",\n      },\n      className: styles.kbd,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <Aria.SearchField\n      {...rest}\n      {...controlProps}\n      aria-label={searchText}\n      className={clsx(rootClassName, wrapperProps.className)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n        <div className={styles.inputContainer}>\n          <IconSearch className={styles.searchIcon} />\n          <Aria.Input\n            placeholder={searchText}\n            className={styles.input}\n            ref={ref}\n          />\n          <UiComponentTunnelExit id=\"kbd\" component=\"SearchField\" />\n          <Button\n            className={styles.clearButton}\n            variant=\"plain\"\n            color=\"secondary\"\n          >\n            <IconClose />\n          </Button>\n        </div>\n      </PropsContextProvider>\n      <FieldErrorView />\n    </Aria.SearchField>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS,4BAC5C,OACA,EACF;CAEA,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KACpB,yBAAgB,WAChB,2BAAO,aACP,SACF;CAGA,MAAM,aADkB,4BAA4B,kBAAS,aAC1C,CAAA,CAAgB,OAAO,QAAQ;CAElD,MAAM,eAA6B;EACjC,KAAK;GACH,YAAY,MAAM;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAW,2BAAO;EACpB;EACA,GAAG;CACL;CAEA,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACJ,GAAI;EACJ,cAAY;EACZ,WAAW,KAAK,eAAe,aAAa,SAAS;EAJvD,UAAA,CAME,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAE9D,qBAAC,OAAD;IAAK,WAAW,2BAAO;IAAvB,UAAA;KACE,oBAAC,YAAD,EAAY,WAAW,2BAAO,WAAa,CAAA;KAC3C,oBAAC,KAAK,OAAN;MACE,aAAa;MACb,WAAW,2BAAO;MACb;KACN,CAAA;KACD,oBAAC,uBAAD;MAAuB,IAAG;MAAM,WAAU;KAAe,CAAA;KACzD,oBAAC,QAAD;MACE,WAAW,2BAAO;MAClB,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,WAAD,CAAY,CAAA;KACN,CAAA;IACL;GACe,CAAA,CAAA;EACtB,CAAA,GAAA,oBAAC,gBAAD,CAAiB,CAAA,CACD;;AAEtB,CAAC"}

package/dist/js/packages/components/src/components/SegmentedControl/SegmentedControl.mjs

@@ -22,7 +22,7 @@ import * as Aria from "react-aria-components";
 var SegmentedControl = flowComponent("SegmentedControl", (props) => {
 	useWarnDeprecation()("The 'SegmentedControl' component is deprecated and will be removed in a future release. Use 'Tabs' instead when it switches content, or 'RadioGroup' instead when it sets a value.");
 	const { children, className, containerBreakpointSize = "m", ref, ...rest } = props;
-	const { FieldErrorView, fieldPropsContext, fieldProps, FieldErrorCaptureContext } = useFieldComponent(props, "SegmentedControl");
+	const { FieldErrorView, fieldPropsContext, wrapperProps, controlProps, FieldErrorCaptureContext } = useFieldComponent(props, "SegmentedControl");
 	const rootClassName = clsx(FormField_module_default.formField, SegmentedControl_module_default.segmentedControlContainer, SegmentedControl_module_default[getContainerBreakpointSizeClassName(containerBreakpointSize)], className);
 	const propsContext = {
 		Segment: {
@@ -38,7 +38,8 @@ var SegmentedControl = flowComponent("SegmentedControl", (props) => {
 	useMakeFocusable(objectRef);
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
-		className: clsx(rootClassName, fieldProps.className),
+		"aria-describedby": controlProps["aria-describedby"],
+		className: clsx(rootClassName, wrapperProps.className),
 		ref: objectRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			dependencies: ["segment"],

package/dist/js/packages/components/src/components/SegmentedControl/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","names":[],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SegmentedControlProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/**\n * @deprecated Use `Tabs` to switch content, or `RadioGroup` to select a value.\n * @flr-generate all\n */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const warnDeprecation = useWarnDeprecation();\n  warnDeprecation(\n    \"The 'SegmentedControl' component is deprecated and will be removed in a future release. Use 'Tabs' instead when it switches content, or 'RadioGroup' instead when it sets a value.\",\n  );\n\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"SegmentedControl\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnel: {\n        id: \"segments\",\n        component: \"SegmentedControl\",\n      },\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n          <div className={styles.segmentedControl}>\n            <div className={styles.segments}>\n              <UiComponentTunnelExit\n                id=\"segments\"\n                component=\"SegmentedControl\"\n              />\n            </div>\n          </div>\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAE3E,mBAAA,CAAA,CACE,oLACF;CAEA,MAAM,EACJ,UACA,WACA,0BAA0B,KAC1B,KACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,mBACA,YACA,6BACE,kBAAkB,OAAO,kBAAkB;CAE/C,MAAM,gBAAgB,KACpB,yBAAgB,WAChB,gCAAO,2BACP,gCAAO,oCAAoC,uBAAuB,IAClE,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAW,gCAAO;EACpB;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,WAAW,KAAK,eAAe,WAAW,SAAS;EACnD,KAAK;EAHP,UAAA,CAKE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,cAAc,CAAC,SAAS;GAAG,OAAO;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,gCAAO;IACrB,UAAA,oBAAC,OAAD;KAAK,WAAW,gCAAO;KACrB,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACE,CAAA;GACF,CAAA,GACJ,QACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"SegmentedControl.mjs","names":[],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SegmentedControlProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/**\n * @deprecated Use `Tabs` to switch content, or `RadioGroup` to select a value.\n * @flr-generate all\n */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const warnDeprecation = useWarnDeprecation();\n  warnDeprecation(\n    \"The 'SegmentedControl' component is deprecated and will be removed in a future release. Use 'Tabs' instead when it switches content, or 'RadioGroup' instead when it sets a value.\",\n  );\n\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"SegmentedControl\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnel: {\n        id: \"segments\",\n        component: \"SegmentedControl\",\n      },\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={clsx(rootClassName, wrapperProps.className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n          <div className={styles.segmentedControl}>\n            <div className={styles.segments}>\n              <UiComponentTunnelExit\n                id=\"segments\"\n                component=\"SegmentedControl\"\n              />\n            </div>\n          </div>\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAE3E,mBAAA,CAAA,CACE,oLACF;CAEA,MAAM,EACJ,UACA,WACA,0BAA0B,KAC1B,KACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,mBACA,cACA,cACA,6BACE,kBAAkB,OAAO,kBAAkB;CAE/C,MAAM,gBAAgB,KACpB,yBAAgB,WAChB,gCAAO,2BACP,gCAAO,oCAAoC,uBAAuB,IAClE,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAW,gCAAO;EACpB;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EACrD,KAAK;EAJP,UAAA,CAME,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,cAAc,CAAC,SAAS;GAAG,OAAO;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,gCAAO;IACrB,UAAA,oBAAC,OAAD;KAAK,WAAW,gCAAO;KACrB,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACE,CAAA;GACF,CAAA,GACJ,QACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

package/dist/js/packages/components/src/components/Select/Select.mjs

@@ -21,7 +21,7 @@ var Select = flowComponent("Select", (props) => {
 	const { children, className, onChange, onSelectionChange, isReadOnly, ref, ...rest } = props;
 	const warnDeprecation = useWarnDeprecation();
 	if (onSelectionChange !== void 0) warnDeprecation("The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.");
-	const { FieldErrorView, fieldPropsContext, fieldProps, FieldErrorCaptureContext } = useFieldComponent(props, "Select");
+	const { FieldErrorView, fieldPropsContext, wrapperProps, controlProps, FieldErrorCaptureContext } = useFieldComponent(props, "Select");
 	const rootClassName = clsx(Select_module_default.select, FormField_module_default.formField, className);
 	const propsContext = {
 		Option: { tunnel: getOptionsTunnelProps("Select") },
@@ -31,8 +31,8 @@ var Select = flowComponent("Select", (props) => {
 	const isOpen = controller.useIsOpen();
 	return /* @__PURE__ */ jsxs(Aria.Select, {
 		...rest,
-		...fieldProps,
-		className: clsx(rootClassName, fieldProps.className),
+		...controlProps,
+		className: clsx(rootClassName, wrapperProps.className),
 		onChange: (value) => {
 			if (!isReadOnly) {
 				onChange?.(value);

package/dist/js/packages/components/src/components/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SelectProps\n  extends\n    PropsWithChildren<\n      Omit<\n        Aria.SelectProps<string, \"single\" | \"multiple\">,\n        \"children\" | \"className\" | \"ref\"\n      >\n    >,\n    FlowComponentProps<HTMLButtonElement>,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | Key[] | null) => void;\n  /** @deprecated Use `onChange` instead. */\n  onSelectionChange?: (value: Key | Key[] | null) => void;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange,\n    onSelectionChange,\n    isReadOnly,\n    ref,\n    ...rest\n  } = props;\n\n  const warnDeprecation = useWarnDeprecation();\n  if (onSelectionChange !== undefined) {\n    warnDeprecation(\n      \"The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.\",\n    );\n  }\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"Select\");\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"Select\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const controller = useOverlayController(\"Select\", {\n    reuseControllerFromContext: false,\n  });\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...fieldProps}\n      className={clsx(rootClassName, fieldProps.className)}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <Aria.Button\n            data-readonly={isReadOnly}\n            className={styles.toggle}\n            ref={ref}\n          >\n            <Aria.SelectValue>\n              {({ selectedText, isPlaceholder }) =>\n                isPlaceholder || !selectedText ? undefined : selectedText\n              }\n            </Aria.SelectValue>\n            <IconChevronDown />\n          </Aria.Button>\n          {children}\n          <Options controller={controller}>\n            <UiComponentTunnelExit id=\"options\" component=\"Select\" />\n          </Options>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,UACA,mBACA,YACA,KACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,sBAAsB,KAAA,GACxB,gBACE,6GACF;CAGF,MAAM,EACJ,gBACA,mBACA,YACA,6BACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KACpB,sBAAO,QACP,yBAAgB,WAChB,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,QAAQ,EACxC;EACA,GAAG;CACL;CAEA,MAAM,aAAa,qBAAqB,UAAU,EAChD,4BAA4B,MAC9B,CAAC;CACD,MAAM,SAAS,WAAW,UAAU;CAEpC,OACE,qBAAC,KAAK,QAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW,KAAK,eAAe,WAAW,SAAS;EACnD,WAAW,UAAU;GACnB,IAAI,CAAC,YAAY;IACf,WAAW,KAAK;IAChB,oBAAoB,KAAK;GAC3B;EACF;EACA,eAAe,WAAW,CAAC,cAAc,WAAW,QAAQ,MAAM;EAC1D;EACR,iBAAe;EAZjB,UAAA,CAcE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,qBAAC,KAAK,QAAN;KACE,iBAAe;KACf,WAAW,sBAAO;KACb;KAHP,UAAA,CAKE,oBAAC,KAAK,aAAN,EAAA,WACI,EAAE,cAAc,oBAChB,iBAAiB,CAAC,eAAe,KAAA,IAAY,aAE/B,CAAA,GAClB,oBAAC,iBAAD,CAAkB,CAAA,CACP;;IACZ;IACD,oBAAC,SAAD;KAAqB;KACnB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAU,CAAA;IACjD,CAAA;GACW;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACN;;AAEjB,CAAC"}
+{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SelectProps\n  extends\n    PropsWithChildren<\n      Omit<\n        Aria.SelectProps<string, \"single\" | \"multiple\">,\n        \"children\" | \"className\" | \"ref\"\n      >\n    >,\n    FlowComponentProps<HTMLButtonElement>,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | Key[] | null) => void;\n  /** @deprecated Use `onChange` instead. */\n  onSelectionChange?: (value: Key | Key[] | null) => void;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange,\n    onSelectionChange,\n    isReadOnly,\n    ref,\n    ...rest\n  } = props;\n\n  const warnDeprecation = useWarnDeprecation();\n  if (onSelectionChange !== undefined) {\n    warnDeprecation(\n      \"The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.\",\n    );\n  }\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"Select\");\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"Select\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const controller = useOverlayController(\"Select\", {\n    reuseControllerFromContext: false,\n  });\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...controlProps}\n      className={clsx(rootClassName, wrapperProps.className)}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <Aria.Button\n            data-readonly={isReadOnly}\n            className={styles.toggle}\n            ref={ref}\n          >\n            <Aria.SelectValue>\n              {({ selectedText, isPlaceholder }) =>\n                isPlaceholder || !selectedText ? undefined : selectedText\n              }\n            </Aria.SelectValue>\n            <IconChevronDown />\n          </Aria.Button>\n          {children}\n          <Options controller={controller}>\n            <UiComponentTunnelExit id=\"options\" component=\"Select\" />\n          </Options>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,UACA,mBACA,YACA,KACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,sBAAsB,KAAA,GACxB,gBACE,6GACF;CAGF,MAAM,EACJ,gBACA,mBACA,cACA,cACA,6BACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KACpB,sBAAO,QACP,yBAAgB,WAChB,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,QAAQ,EACxC;EACA,GAAG;CACL;CAEA,MAAM,aAAa,qBAAqB,UAAU,EAChD,4BAA4B,MAC9B,CAAC;CACD,MAAM,SAAS,WAAW,UAAU;CAEpC,OACE,qBAAC,KAAK,QAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW,KAAK,eAAe,aAAa,SAAS;EACrD,WAAW,UAAU;GACnB,IAAI,CAAC,YAAY;IACf,WAAW,KAAK;IAChB,oBAAoB,KAAK;GAC3B;EACF;EACA,eAAe,WAAW,CAAC,cAAc,WAAW,QAAQ,MAAM;EAC1D;EACR,iBAAe;EAZjB,UAAA,CAcE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,qBAAC,KAAK,QAAN;KACE,iBAAe;KACf,WAAW,sBAAO;KACb;KAHP,UAAA,CAKE,oBAAC,KAAK,aAAN,EAAA,WACI,EAAE,cAAc,oBAChB,iBAAiB,CAAC,eAAe,KAAA,IAAY,aAE/B,CAAA,GAClB,oBAAC,iBAAD,CAAkB,CAAA,CACP;;IACZ;IACD,oBAAC,SAAD;KAAqB;KACnB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAU,CAAA;IACjD,CAAA;GACW;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACN;;AAEjB,CAAC"}

package/dist/js/packages/components/src/components/Slider/Slider.mjs

@@ -11,16 +11,15 @@ import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import Slider_module_default from "./Slider.module.mjs";
 import __locale_default from "../../../../../_virtual/_19.locale.mjs";
 import clsx from "clsx";
-import "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
 //#region src/components/Slider/Slider.tsx
 /** @flr-generate all */
 var Slider = flowComponent("Slider", (props) => {
-	const { className, children, name, isDisabled, defaultValue, showInitialMarker, isReadOnly, ref, step, sliderOnly, ...rest } = props;
+	const { className, children, name, isDisabled, defaultValue, showInitialMarker, isReadOnly, ref, step, sliderOnly, "aria-describedby": ignoredAriaDescribedBy, ...rest } = props;
 	const rootClassName = clsx(Slider_module_default.slider, isDisabled && Slider_module_default.disabled, className);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Slider");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps } = useFieldComponent(props, "Slider");
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Slider");
 	const objectRef = useObjectRef(ref);
 	const propsContext = {
@@ -35,7 +34,7 @@ var Slider = flowComponent("Slider", (props) => {
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
-		...fieldProps,
+		className: wrapperProps.className,
 		children: /* @__PURE__ */ jsx(Aria.Slider, {
 			...rest,
 			className: rootClassName,
@@ -72,7 +71,7 @@ var Slider = flowComponent("Slider", (props) => {
 								size: "s"
 							} },
 							children: [
-								!sliderOnly && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+								!sliderOnly && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
 									onPress: () => state.decrementThumb(0, step),
 									"aria-label": stringFormatter.format("decrement"),
 									className: Slider_module_default.decrement,
@@ -85,14 +84,15 @@ var Slider = flowComponent("Slider", (props) => {
 								})] }),
 								/* @__PURE__ */ jsx("div", {
 									className: Slider_module_default.fill,
-									style: { width: state.getThumbPercent(0) * 100 + "%" }
+									style: { "--slider--value": state.getThumbPercent(0) }
 								}),
 								showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx("div", {
 									className: Slider_module_default.initialMarker,
-									style: { left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)` }
+									style: { "--slider--initial-value": state.getValuePercent(defaultValue) }
 								}),
 								/* @__PURE__ */ jsx(Aria.SliderThumb, {
 									inputRef: objectRef,
+									"aria-describedby": controlProps["aria-describedby"],
 									name,
 									className: Slider_module_default.handle,
 									isDisabled: isReadOnly