@mittwald/flow-react-components 0.2.0-alpha.537 → 0.2.0-alpha.538

package/dist/js/components/src/components/Autocomplete/Autocomplete.mjs

@@ -55,7 +55,7 @@ const Autocomplete = flowComponent("Autocomplete", (props) => {
   };
   const {
     FieldErrorView,
-    FieldErrorResetContext,
+    FieldErrorCaptureContext,
     fieldPropsContext,
     fieldProps
   } = useFieldComponent(props);
@@ -71,7 +71,7 @@ const Autocomplete = flowComponent("Autocomplete", (props) => {
     ...fieldPropsContext
   };
   return /* @__PURE__ */ jsxs("div", { ...fieldProps, children: [
-    /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { ...focusWithin.focusWithinProps, ref: container, children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, { getContainer: () => container.current, children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { ...focusWithin.focusWithinProps, ref: container, children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, { getContainer: () => container.current, children: /* @__PURE__ */ jsxs(
       Aria.Autocomplete,
       {
         onInputChange: handleOnInputChange,

package/dist/js/components/src/components/Autocomplete/Autocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.mjs","sources":["../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n  UNSAFE_PortalProvider,\n  useFocusWithin,\n  useLocalizedStringFormatter,\n} from \"react-aria\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nexport interface AutocompleteProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps,\n    Omit<Aria.AutocompleteProps, \"children\" | \"onInputChange\" | \"inputValue\"> {\n  isInvalid?: boolean;\n}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n  const { children, isInvalid, ...rest } = props;\n\n  const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const container = useRef(null);\n  const triggerRef = useRef<HTMLInputElement>(null);\n\n  const controller = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n\n  const focusWithin = useFocusWithin({\n    onBlurWithin: controller.close,\n  });\n\n  const inputProps: SearchFieldProps & TextFieldProps = {\n    onKeyDown: (e) => {\n      if (e.key === \"Enter\" && controller.isOpen) {\n        e.preventDefault();\n      }\n    },\n    isInvalid,\n    ref: triggerRef,\n  };\n\n  const renderEmptyState = () => (\n    <Text className={styles.empty}>\n      {stringFormatter.format(\"autocomplete.empty\")}\n    </Text>\n  );\n\n  const handleOnInputChange = (value: string) => {\n    if (!value) {\n      controller.close();\n    } else if (!controller.isOpen) {\n      controller.open();\n    }\n  };\n\n  const handleOptionAction = (key: Aria.Key) => {\n    const inputElement = triggerRef.current;\n    if (inputElement) {\n      // Set value on input element and trigger change event\n      emitElementValueChange(inputElement, String(key));\n    }\n    controller.close();\n  };\n\n  const {\n    FieldErrorView,\n    FieldErrorResetContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    SearchField: inputProps,\n    TextField: inputProps,\n    Option: {\n      tunnelId: \"options\",\n    },\n    Popover: {\n      className: styles.popover,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div {...fieldProps}>\n      <FieldErrorResetContext>\n        <PropsContextProvider props={propsContext}>\n          <div {...focusWithin.focusWithinProps} ref={container}>\n            <UNSAFE_PortalProvider getContainer={() => container.current}>\n              <Aria.Autocomplete\n                onInputChange={handleOnInputChange}\n                filter={contains}\n                disableAutoFocusFirst\n                {...rest}\n              >\n                {children}\n                <Options\n                  onAction={handleOptionAction}\n                  triggerRef={triggerRef}\n                  controller={controller}\n                  renderEmptyState={renderEmptyState}\n                  isNonModal\n                  placement=\"bottom start\"\n                >\n                  <TunnelExit id=\"options\" />\n                </Options>\n              </Aria.Autocomplete>\n            </UNSAFE_PortalProvider>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorResetContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Autocomplete;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Autocomplete.mjs","sources":["../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n  UNSAFE_PortalProvider,\n  useFocusWithin,\n  useLocalizedStringFormatter,\n} from \"react-aria\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nexport interface AutocompleteProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps,\n    Omit<Aria.AutocompleteProps, \"children\" | \"onInputChange\" | \"inputValue\"> {\n  isInvalid?: boolean;\n}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n  const { children, isInvalid, ...rest } = props;\n\n  const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const container = useRef(null);\n  const triggerRef = useRef<HTMLInputElement>(null);\n\n  const controller = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n\n  const focusWithin = useFocusWithin({\n    onBlurWithin: controller.close,\n  });\n\n  const inputProps: SearchFieldProps & TextFieldProps = {\n    onKeyDown: (e) => {\n      if (e.key === \"Enter\" && controller.isOpen) {\n        e.preventDefault();\n      }\n    },\n    isInvalid,\n    ref: triggerRef,\n  };\n\n  const renderEmptyState = () => (\n    <Text className={styles.empty}>\n      {stringFormatter.format(\"autocomplete.empty\")}\n    </Text>\n  );\n\n  const handleOnInputChange = (value: string) => {\n    if (!value) {\n      controller.close();\n    } else if (!controller.isOpen) {\n      controller.open();\n    }\n  };\n\n  const handleOptionAction = (key: Aria.Key) => {\n    const inputElement = triggerRef.current;\n    if (inputElement) {\n      // Set value on input element and trigger change event\n      emitElementValueChange(inputElement, String(key));\n    }\n    controller.close();\n  };\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    SearchField: inputProps,\n    TextField: inputProps,\n    Option: {\n      tunnelId: \"options\",\n    },\n    Popover: {\n      className: styles.popover,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div {...fieldProps}>\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <div {...focusWithin.focusWithinProps} ref={container}>\n            <UNSAFE_PortalProvider getContainer={() => container.current}>\n              <Aria.Autocomplete\n                onInputChange={handleOnInputChange}\n                filter={contains}\n                disableAutoFocusFirst\n                {...rest}\n              >\n                {children}\n                <Options\n                  onAction={handleOptionAction}\n                  triggerRef={triggerRef}\n                  controller={controller}\n                  renderEmptyState={renderEmptyState}\n                  isNonModal\n                  placement=\"bottom start\"\n                >\n                  <TunnelExit id=\"options\" />\n                </Options>\n              </Aria.Autocomplete>\n            </UNSAFE_PortalProvider>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Autocomplete;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgCO,MAAM,YAAA,GAAe,aAAA,CAAc,cAAA,EAAgB,CAAC,KAAA,KAAU;AACnE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEzC,EAAA,MAAM,EAAE,UAAS,GAAI,IAAA,CAAK,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AAC3D,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,SAAA,GAAY,OAAO,IAAI,CAAA;AAC7B,EAAA,MAAM,UAAA,GAAa,OAAyB,IAAI,CAAA;AAEhD,EAAA,MAAM,UAAA,GAAa,qBAAqB,SAAA,EAAW;AAAA,IACjD,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,cAAc,cAAA,CAAe;AAAA,IACjC,cAAc,UAAA,CAAW;AAAA,GAC1B,CAAA;AAED,EAAA,MAAM,UAAA,GAAgD;AAAA,IACpD,SAAA,EAAW,CAAC,CAAA,KAAM;AAChB,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,UAAA,CAAW,MAAA,EAAQ;AAC1C,QAAA,CAAA,CAAE,cAAA,EAAe;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA,EAAK;AAAA,GACP;AAEA,EAAA,MAAM,gBAAA,GAAmB,sBACvB,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,OAAO,KAAA,EACrB,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,oBAAoB,CAAA,EAC9C,CAAA;AAGF,EAAA,MAAM,mBAAA,GAAsB,CAAC,KAAA,KAAkB;AAC7C,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,UAAA,CAAW,KAAA,EAAM;AAAA,IACnB,CAAA,MAAA,IAAW,CAAC,UAAA,CAAW,MAAA,EAAQ;AAC7B,MAAA,UAAA,CAAW,IAAA,EAAK;AAAA,IAClB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,kBAAA,GAAqB,CAAC,GAAA,KAAkB;AAC5C,IAAA,MAAM,eAAe,UAAA,CAAW,OAAA;AAChC,IAAA,IAAI,YAAA,EAAc;AAEhB,MAAA,sBAAA,CAAuB,YAAA,EAAc,MAAA,CAAO,GAAG,CAAC,CAAA;AAAA,IAClD;AACA,IAAA,UAAA,CAAW,KAAA,EAAM;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa,UAAA;AAAA,IACb,SAAA,EAAW,UAAA;AAAA,IACX,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,4BACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,KAAA,EAAA,EAAK,GAAG,WAAA,CAAY,gBAAA,EAAkB,KAAK,SAAA,EAC1C,QAAA,kBAAA,GAAA,CAAC,yBAAsB,YAAA,EAAc,MAAM,UAAU,OAAA,EACnD,QAAA,kBAAA,IAAA;AAAA,MAAC,IAAA,CAAK,YAAA;AAAA,MAAL;AAAA,QACC,aAAA,EAAe,mBAAA;AAAA,QACf,MAAA,EAAQ,QAAA;AAAA,QACR,qBAAA,EAAqB,IAAA;AAAA,QACpB,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,0BACD,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAU,kBAAA;AAAA,cACV,UAAA;AAAA,cACA,UAAA;AAAA,cACA,gBAAA;AAAA,cACA,UAAA,EAAU,IAAA;AAAA,cACV,SAAA,EAAU,cAAA;AAAA,cAEV,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,SAAA,EAAU;AAAA;AAAA;AAC3B;AAAA;AAAA,KACF,EACF,CAAA,EACF,CAAA,EACF,CAAA,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/Checkbox/Checkbox.mjs

@@ -20,7 +20,12 @@ import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 
 const Checkbox = flowComponent("Checkbox", (props) => {
   const { children, className, ref, inputClassName, ...rest } = props;
-  const { FieldErrorView, fieldPropsContext, fieldProps } = useFieldComponent(props);
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldPropsContext,
+    fieldProps
+  } = useFieldComponent(props);
   const localCheckboxRef = useObjectRef(ref);
   useMakeFocusable(localCheckboxRef);
   return /* @__PURE__ */ jsxs(
@@ -30,10 +35,10 @@ const Checkbox = flowComponent("Checkbox", (props) => {
       className: clsx(styles.checkbox, className, fieldProps.className),
       ref: localCheckboxRef,
       children: [
-        /* @__PURE__ */ jsx(Aria.Checkbox, { ...rest, className: clsx(inputClassName, styles.input), children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(PropsContextProvider, { props: fieldPropsContext, children: [
+        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Checkbox, { ...rest, className: clsx(inputClassName, styles.input), children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(PropsContextProvider, { props: fieldPropsContext, children: [
           isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, { className: styles.icon }) : isIndeterminate ? /* @__PURE__ */ jsx(IconCheckboxIndeterminate, { className: styles.icon }) : /* @__PURE__ */ jsx(IconCheckboxEmpty, { className: styles.icon }),
           children
-        ] }) }),
+        ] }) }) }),
         /* @__PURE__ */ jsx(FieldErrorView, {})
       ]
     }

package/dist/js/components/src/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sources":["../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface CheckboxProps\n  extends PropsWithChildren<Omit<Aria.CheckboxProps, \"children\">>,\n    FlowComponentProps {\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const { FieldErrorView, fieldPropsContext, fieldProps } =\n    useFieldComponent(props);\n\n  const localCheckboxRef = useObjectRef(ref);\n  useMakeFocusable(localCheckboxRef);\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(styles.checkbox, className, fieldProps.className)}\n      ref={localCheckboxRef}\n    >\n      <Aria.Checkbox {...rest} className={clsx(inputClassName, styles.input)}>\n        {({ isSelected, isIndeterminate }) => (\n          <PropsContextProvider props={fieldPropsContext}>\n            {isSelected ? (\n              <IconCheckboxChecked className={styles.icon} />\n            ) : isIndeterminate ? (\n              <IconCheckboxIndeterminate className={styles.icon} />\n            ) : (\n              <IconCheckboxEmpty className={styles.icon} />\n            )}\n            {children}\n          </PropsContextProvider>\n        )}\n      </Aria.Checkbox>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAK,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAE9D,EAAA,MAAM,EAAE,cAAA,EAAgB,iBAAA,EAAmB,UAAA,EAAW,GACpD,kBAAkB,KAAK,CAAA;AAEzB,EAAA,MAAM,gBAAA,GAAmB,aAAa,GAAG,CAAA;AACzC,EAAA,gBAAA,CAAiB,gBAAgB,CAAA;AAEjC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAW,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAA,EAAW,WAAW,SAAS,CAAA;AAAA,MAChE,GAAA,EAAK,gBAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAK,QAAA,EAAL,EAAe,GAAG,IAAA,EAAM,SAAA,EAAW,KAAK,cAAA,EAAgB,MAAA,CAAO,KAAK,CAAA,EAClE,QAAA,EAAA,CAAC,EAAE,UAAA,EAAY,eAAA,uBACd,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,iBAAA,EAC1B,QAAA,EAAA;AAAA,UAAA,UAAA,uBACE,mBAAA,EAAA,EAAoB,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,IAC3C,eAAA,mBACF,GAAA,CAAC,yBAAA,EAAA,EAA0B,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA,uBAElD,iBAAA,EAAA,EAAkB,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,UAE5C;AAAA,SAAA,EACH,CAAA,EAEJ,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Checkbox.mjs","sources":["../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface CheckboxProps\n  extends PropsWithChildren<Omit<Aria.CheckboxProps, \"children\">>,\n    FlowComponentProps {\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const localCheckboxRef = useObjectRef(ref);\n  useMakeFocusable(localCheckboxRef);\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(styles.checkbox, className, fieldProps.className)}\n      ref={localCheckboxRef}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox {...rest} className={clsx(inputClassName, styles.input)}>\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {isSelected ? (\n                <IconCheckboxChecked className={styles.icon} />\n              ) : isIndeterminate ? (\n                <IconCheckboxIndeterminate className={styles.icon} />\n              ) : (\n                <IconCheckboxEmpty className={styles.icon} />\n              )}\n              {children}\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAK,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAE9D,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,gBAAA,GAAmB,aAAa,GAAG,CAAA;AACzC,EAAA,gBAAA,CAAiB,gBAAgB,CAAA;AAEjC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAW,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAA,EAAW,WAAW,SAAS,CAAA;AAAA,MAChE,GAAA,EAAK,gBAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,8BAAC,IAAA,CAAK,QAAA,EAAL,EAAe,GAAG,IAAA,EAAM,WAAW,IAAA,CAAK,cAAA,EAAgB,OAAO,KAAK,CAAA,EAClE,WAAC,EAAE,UAAA,EAAY,iBAAgB,qBAC9B,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EAAA;AAAA,UAAA,UAAA,uBACE,mBAAA,EAAA,EAAoB,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,IAC3C,eAAA,mBACF,GAAA,CAAC,yBAAA,EAAA,EAA0B,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA,uBAElD,iBAAA,EAAA,EAAkB,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,UAE5C;AAAA,SAAA,EACH,GAEJ,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/CheckboxButton/CheckboxButton.mjs

@@ -17,7 +17,7 @@ const CheckboxButton = flowComponent("CheckboxButton", (props) => {
     fieldPropsContext,
     fieldProps,
     FieldErrorView,
-    FieldErrorResetContext
+    FieldErrorCaptureContext
   } = useFieldComponent(props);
   const mergedPropsContext = {
     Text: {
@@ -37,7 +37,7 @@ const CheckboxButton = flowComponent("CheckboxButton", (props) => {
       className: clsx(fieldProps.className, styles.checkboxButton, className),
       ref: localCheckboxButtonRef,
       children: [
-        /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsx(Checkbox, { ...rest, inputClassName: clsx(inputClassName, styles.input), children: /* @__PURE__ */ jsx(PropsContextProvider, { props: mergedPropsContext, clear: true, children }) }) }),
+        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Checkbox, { ...rest, inputClassName: clsx(inputClassName, styles.input), children: /* @__PURE__ */ jsx(PropsContextProvider, { props: mergedPropsContext, children }) }) }),
         /* @__PURE__ */ jsx(FieldErrorView, {})
       ]
     }

package/dist/js/components/src/components/CheckboxButton/CheckboxButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","sources":["../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorResetContext,\n  } = useFieldComponent(props);\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  const localCheckboxButtonRef = useObjectRef(ref);\n  useMakeFocusable(localCheckboxButtonRef);\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n      ref={localCheckboxButtonRef}\n    >\n      <FieldErrorResetContext>\n        <Checkbox {...rest} inputClassName={clsx(inputClassName, styles.input)}>\n          <PropsContextProvider props={mergedPropsContext} clear>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorResetContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":[],"mappings":";;;;;;;;;;;AAiBO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAK,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAE9D,EAAA,MAAM;AAAA,IACJ,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,kBAAA,GAAmC;AAAA,IACvC,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,sBAAA,GAAyB,aAAa,GAAG,CAAA;AAC/C,EAAA,gBAAA,CAAiB,sBAAsB,CAAA;AAEvC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,MAAA,CAAO,gBAAgB,SAAS,CAAA;AAAA,MACtE,GAAA,EAAK,sBAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,0BACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,IAAA,EAAM,cAAA,EAAgB,KAAK,cAAA,EAAgB,MAAA,CAAO,KAAK,CAAA,EACnE,QAAA,kBAAA,GAAA,CAAC,wBAAqB,KAAA,EAAO,kBAAA,EAAoB,OAAK,IAAA,EACnD,QAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.mjs","sources":["../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  const localCheckboxButtonRef = useObjectRef(ref);\n  useMakeFocusable(localCheckboxButtonRef);\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n      ref={localCheckboxButtonRef}\n    >\n      <FieldErrorCaptureContext>\n        <Checkbox {...rest} inputClassName={clsx(inputClassName, styles.input)}>\n          <PropsContextProvider props={mergedPropsContext}>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":[],"mappings":";;;;;;;;;;;AAiBO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAK,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAE9D,EAAA,MAAM;AAAA,IACJ,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,kBAAA,GAAmC;AAAA,IACvC,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,sBAAA,GAAyB,aAAa,GAAG,CAAA;AAC/C,EAAA,gBAAA,CAAiB,sBAAsB,CAAA;AAEvC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,MAAA,CAAO,gBAAgB,SAAS,CAAA;AAAA,MACtE,GAAA,EAAK,sBAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,4BACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,IAAA,EAAM,gBAAgB,IAAA,CAAK,cAAA,EAAgB,MAAA,CAAO,KAAK,GACnE,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,kBAAA,EAC1B,QAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/CheckboxGroup/CheckboxGroup.mjs

@@ -19,7 +19,7 @@ const CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
     FieldErrorView,
     fieldPropsContext,
     fieldProps,
-    FieldErrorResetContext
+    FieldErrorCaptureContext
   } = useFieldComponent(props);
   const propsContext = {
     Checkbox: {
@@ -45,7 +45,7 @@ const CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
       className: clsx(fieldProps.className, className),
       ref: localCheckboxGroupRef,
       children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
-        /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, clear: true, children: [
+        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, clear: true, children: [
           children,
           /* @__PURE__ */ jsx(ColumnLayout, { s, m, l, className: styles.checkboxGroup, children: /* @__PURE__ */ jsx(TunnelExit, { id: "checkboxButtons" }) }),
           /* @__PURE__ */ jsx(

package/dist/js/components/src/components/CheckboxGroup/CheckboxGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.mjs","sources":["../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxGroupProps\n  extends PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n  const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorResetContext,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    Checkbox: {\n      isInvalid,\n      tunnelId: \"checkboxes\",\n      className: styles.checkbox,\n    },\n    CheckboxButton: {\n      isInvalid,\n      tunnelId: \"checkboxButtons\",\n      className: styles.checkboxButton,\n    },\n    ...fieldPropsContext,\n  };\n\n  const localCheckboxGroupRef = useObjectRef(ref);\n  useMakeFocusable(localCheckboxGroupRef);\n\n  return (\n    <Aria.CheckboxGroup\n      {...rest}\n      {...fieldProps}\n      isInvalid={isInvalid}\n      className={clsx(fieldProps.className, className)}\n      ref={localCheckboxGroupRef}\n    >\n      <TunnelProvider>\n        <FieldErrorResetContext>\n          <PropsContextProvider props={propsContext} clear>\n            {children}\n            <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n              <TunnelExit id=\"checkboxButtons\" />\n            </ColumnLayout>\n\n            <ColumnLayout\n              s={s ?? [1]}\n              m={m ?? [1]}\n              l={l ?? [1]}\n              rowGap=\"s\"\n              className={styles.checkboxGroup}\n            >\n              <TunnelExit id=\"checkboxes\" />\n            </ColumnLayout>\n          </PropsContextProvider>\n        </FieldErrorResetContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.CheckboxGroup>\n  );\n});\n\nexport default CheckboxGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,SAAA,EAAW,CAAA,EAAG,GAAG,CAAA,EAAG,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAElE,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,QAAA,EAAU;AAAA,MACR,SAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,SAAA;AAAA,MACA,QAAA,EAAU,iBAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,qBAAA,GAAwB,aAAa,GAAG,CAAA;AAC9C,EAAA,gBAAA,CAAiB,qBAAqB,CAAA;AAEtC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,aAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAAA,MAC/C,GAAA,EAAK,qBAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,0BACC,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAAc,OAAK,IAAA,EAC7C,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,0BACD,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,EAAM,CAAA,EAAM,CAAA,EAAM,SAAA,EAAW,MAAA,CAAO,aAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,iBAAA,EAAkB,CAAA,EACnC,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,MAAA,EAAO,GAAA;AAAA,cACP,WAAW,MAAA,CAAO,aAAA;AAAA,cAElB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAa;AAAA;AAAA;AAC9B,SAAA,EACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxGroup.mjs","sources":["../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxGroupProps\n  extends PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n  const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    Checkbox: {\n      isInvalid,\n      tunnelId: \"checkboxes\",\n      className: styles.checkbox,\n    },\n    CheckboxButton: {\n      isInvalid,\n      tunnelId: \"checkboxButtons\",\n      className: styles.checkboxButton,\n    },\n    ...fieldPropsContext,\n  };\n\n  const localCheckboxGroupRef = useObjectRef(ref);\n  useMakeFocusable(localCheckboxGroupRef);\n\n  return (\n    <Aria.CheckboxGroup\n      {...rest}\n      {...fieldProps}\n      isInvalid={isInvalid}\n      className={clsx(fieldProps.className, className)}\n      ref={localCheckboxGroupRef}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext} clear>\n            {children}\n            <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n              <TunnelExit id=\"checkboxButtons\" />\n            </ColumnLayout>\n\n            <ColumnLayout\n              s={s ?? [1]}\n              m={m ?? [1]}\n              l={l ?? [1]}\n              rowGap=\"s\"\n              className={styles.checkboxGroup}\n            >\n              <TunnelExit id=\"checkboxes\" />\n            </ColumnLayout>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.CheckboxGroup>\n  );\n});\n\nexport default CheckboxGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,SAAA,EAAW,CAAA,EAAG,GAAG,CAAA,EAAG,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAElE,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,QAAA,EAAU;AAAA,MACR,SAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,SAAA;AAAA,MACA,QAAA,EAAU,iBAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,qBAAA,GAAwB,aAAa,GAAG,CAAA;AAC9C,EAAA,gBAAA,CAAiB,qBAAqB,CAAA;AAEtC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,aAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAAA,MAC/C,GAAA,EAAK,qBAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,4BACC,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAAc,OAAK,IAAA,EAC7C,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,0BACD,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,EAAM,CAAA,EAAM,CAAA,EAAM,SAAA,EAAW,MAAA,CAAO,aAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,iBAAA,EAAkB,CAAA,EACnC,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,MAAA,EAAO,GAAA;AAAA,cACP,WAAW,MAAA,CAAO,aAAA;AAAA,cAElB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAa;AAAA;AAAA;AAC9B,SAAA,EACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/ComboBox/ComboBox.mjs

@@ -40,7 +40,7 @@ const ComboBox = flowComponent("ComboBox", (props) => {
   } = props;
   const {
     FieldErrorView,
-    FieldErrorResetContext,
+    FieldErrorCaptureContext,
     fieldProps,
     fieldPropsContext
   } = useFieldComponent(props);
@@ -76,7 +76,7 @@ const ComboBox = flowComponent("ComboBox", (props) => {
       onSelectionChange: handleOnSelectionChange,
       onOpenChange: (isOpen) => controller.setOpen(isOpen),
       children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
-        /* @__PURE__ */ jsxs(FieldErrorResetContext, { children: [
+        /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
           /* @__PURE__ */ jsxs("div", { className: styles.input, children: [
             /* @__PURE__ */ jsx(Aria.Input, { placeholder }),
             /* @__PURE__ */ jsx(

package/dist/js/components/src/components/ComboBox/ComboBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface ComboBoxProps\n  extends Omit<Aria.ComboBoxProps<never>, \"children\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  onChange?: (value: string) => void;\n  controller?: OverlayController;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    placeholder,\n    ref,\n    renderEmptyState,\n\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorResetContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleOnSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange(String(key));\n    onSelectionChange(key);\n  };\n\n  const controllerFromContext = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const localComboBoxRef = useObjectRef(ref);\n  useMakeFocusable(localComboBoxRef);\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      ref={localComboBoxRef}\n      onSelectionChange={handleOnSelectionChange}\n      onOpenChange={(isOpen) => controller.setOpen(isOpen)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <FieldErrorResetContext>\n            <div className={styles.input}>\n              <Aria.Input placeholder={placeholder} />\n              <Button\n                className={styles.toggle}\n                aria-label={stringFormatter.format(\"comboBox.showOptions\")}\n                variant=\"plain\"\n                color=\"secondary\"\n              >\n                <IconChevronDown />\n              </Button>\n            </div>\n\n            {children}\n\n            <Options\n              controller={controller}\n              renderEmptyState={renderEmptyState}\n            >\n              <TunnelExit id=\"options\" />\n            </Options>\n          </FieldErrorResetContext>\n          <FieldErrorView />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface ComboBoxProps\n  extends Omit<Aria.ComboBoxProps<never>, \"children\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  onChange?: (value: string) => void;\n  controller?: OverlayController;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    placeholder,\n    ref,\n    renderEmptyState,\n\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleOnSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange(String(key));\n    onSelectionChange(key);\n  };\n\n  const controllerFromContext = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const localComboBoxRef = useObjectRef(ref);\n  useMakeFocusable(localComboBoxRef);\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      ref={localComboBoxRef}\n      onSelectionChange={handleOnSelectionChange}\n      onOpenChange={(isOpen) => controller.setOpen(isOpen)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <FieldErrorCaptureContext>\n            <div className={styles.input}>\n              <Aria.Input placeholder={placeholder} />\n              <Button\n                className={styles.toggle}\n                aria-label={stringFormatter.format(\"comboBox.showOptions\")}\n                variant=\"plain\"\n                color=\"secondary\"\n              >\n                <IconChevronDown />\n              </Button>\n            </div>\n\n            {children}\n\n            <Options\n              controller={controller}\n              renderEmptyState={renderEmptyState}\n            >\n              <TunnelExit id=\"options\" />\n            </Options>\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/components/DatePicker/DatePicker.mjs

@@ -23,7 +23,12 @@ import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const DatePicker = flowComponent("DatePicker", (props) => {
   const { children, className, onChange, ref, ...rest } = props;
-  const { FieldErrorView, fieldProps, fieldPropsContext } = useFieldComponent(props);
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldProps,
+    fieldPropsContext
+  } = useFieldComponent(props);
   const rootClassName = clsx(formFieldStyles.formField, className);
   const localRef = useObjectRef(ref);
   useMakeFocusable(localRef);
@@ -44,17 +49,19 @@ const DatePicker = flowComponent("DatePicker", (props) => {
         popoverController.close();
       },
       children: [
-        /* @__PURE__ */ jsx(DateInput, { isDisabled: props.isDisabled }),
-        /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children }),
-        /* @__PURE__ */ jsx(
-          Popover,
-          {
-            placement: "bottom end",
-            isDialogContent: true,
-            controller: popoverController,
-            children: /* @__PURE__ */ jsx(Calendar, {})
-          }
-        ),
+        /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
+          /* @__PURE__ */ jsx(DateInput, { isDisabled: props.isDisabled }),
+          /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children }),
+          /* @__PURE__ */ jsx(
+            Popover,
+            {
+              placement: "bottom end",
+              isDialogContent: true,
+              controller: popoverController,
+              children: /* @__PURE__ */ jsx(Calendar, {})
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(FieldErrorView, {})
       ]
     }

package/dist/js/components/src/components/DatePicker/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","sources":["../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport styles from \"../FormField/FormField.module.scss\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const { FieldErrorView, fieldProps, fieldPropsContext } =\n    useFieldComponent(props);\n\n  const rootClassName = clsx(styles.formField, className);\n\n  const localRef = useObjectRef(ref);\n  useMakeFocusable(localRef);\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  return (\n    <Aria.DatePicker\n      ref={localRef}\n      {...rest}\n      {...fieldProps}\n      className={clsx(fieldProps.className, rootClassName)}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <DateInput isDisabled={props.isDisabled} />\n      <PropsContextProvider props={fieldPropsContext}>\n        {children}\n      </PropsContextProvider>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        controller={popoverController}\n      >\n        <Calendar />\n      </Popover>\n      <FieldErrorView />\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAExD,EAAA,MAAM,EAAE,cAAA,EAAgB,UAAA,EAAY,iBAAA,EAAkB,GACpD,kBAAkB,KAAK,CAAA;AAEzB,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAKA,eAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACC,GAAA,EAAK,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,aAAa,CAAA;AAAA,MACnD,YAAA,EAAc,CAAC,CAAA,KAAM,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAA,CAAkB,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AACA,QAAA,iBAAA,CAAkB,KAAA,EAAM;AAAA,MAC1B,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,CAAA;AAAA,wBACzC,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,eAAA,EAAe,IAAA;AAAA,YACf,UAAA,EAAY,iBAAA;AAAA,YAEZ,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,SACZ;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DatePicker.mjs","sources":["../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport styles from \"../FormField/FormField.module.scss\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(styles.formField, className);\n\n  const localRef = useObjectRef(ref);\n  useMakeFocusable(localRef);\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  return (\n    <Aria.DatePicker\n      ref={localRef}\n      {...rest}\n      {...fieldProps}\n      className={clsx(fieldProps.className, rootClassName)}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <FieldErrorCaptureContext>\n        <DateInput isDisabled={props.isDisabled} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <Calendar />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAExD,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAKA,eAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACC,GAAA,EAAK,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,aAAa,CAAA;AAAA,MACnD,YAAA,EAAc,CAAC,CAAA,KAAM,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAA,CAAkB,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AACA,QAAA,iBAAA,CAAkB,KAAA,EAAM;AAAA,MAC1B,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,wBAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,EAAA,EAAU,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,CAAA;AAAA,0BACzC,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,YAAA;AAAA,cACV,eAAA,EAAe,IAAA;AAAA,cACf,UAAA,EAAY,iBAAA;AAAA,cAEZ,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA;AACZ,SAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs

@@ -18,7 +18,12 @@ import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const DateRangePicker = flowComponent("DateRangePicker", (props) => {
   const { children, className, onChange, ref, ...rest } = props;
-  const { FieldErrorView, fieldProps, fieldPropsContext } = useFieldComponent(props);
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldProps,
+    fieldPropsContext
+  } = useFieldComponent(props);
   const rootClassName = clsx(fieldProps.className, className);
   const popoverController = useOverlayController("Popover");
   const localDateRangePickerRef = useObjectRef(ref);
@@ -38,17 +43,19 @@ const DateRangePicker = flowComponent("DateRangePicker", (props) => {
         popoverController.close();
       },
       children: [
-        /* @__PURE__ */ jsx(DateRangeInput, { isDisabled: props.isDisabled }),
-        /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children }),
-        /* @__PURE__ */ jsx(
-          Popover,
-          {
-            placement: "bottom end",
-            isDialogContent: true,
-            controller: popoverController,
-            children: /* @__PURE__ */ jsx(RangeCalendar, {})
-          }
-        ),
+        /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
+          /* @__PURE__ */ jsx(DateRangeInput, { isDisabled: props.isDisabled }),
+          /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children }),
+          /* @__PURE__ */ jsx(
+            Popover,
+            {
+              placement: "bottom end",
+              isDialogContent: true,
+              controller: popoverController,
+              children: /* @__PURE__ */ jsx(RangeCalendar, {})
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(FieldErrorView, {})
       ]
     }

package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.mjs","sources":["../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { RangeCalendar } from \"../Calendar/RangeCalendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const { FieldErrorView, fieldProps, fieldPropsContext } =\n    useFieldComponent(props);\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  const localDateRangePickerRef = useObjectRef(ref);\n  useMakeFocusable(localDateRangePickerRef);\n\n  return (\n    <Aria.DateRangePicker\n      ref={localDateRangePickerRef}\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <DateRangeInput isDisabled={props.isDisabled} />\n      <PropsContextProvider props={fieldPropsContext}>\n        {children}\n      </PropsContextProvider>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        controller={popoverController}\n      >\n        <RangeCalendar />\n      </Popover>\n      <FieldErrorView />\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqBO,MAAM,eAAA,GAAkB,aAAA,CAAc,iBAAA,EAAmB,CAAC,KAAA,KAAU;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAExD,EAAA,MAAM,EAAE,cAAA,EAAgB,UAAA,EAAY,iBAAA,EAAkB,GACpD,kBAAkB,KAAK,CAAA;AAEzB,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAE1D,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EAAA,MAAM,uBAAA,GAA0B,aAAa,GAAG,CAAA;AAChD,EAAA,gBAAA,CAAiB,uBAAuB,CAAA;AAExC,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,eAAA;AAAA,IAAL;AAAA,MACC,GAAA,EAAK,uBAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,YAAA,EAAc,CAAC,CAAA,KAAM,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAA,CAAkB,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AACA,QAAA,iBAAA,CAAkB,KAAA,EAAM;AAAA,MAC1B,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,CAAA;AAAA,wBAC9C,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,eAAA,EAAe,IAAA;AAAA,YACf,UAAA,EAAY,iBAAA;AAAA,YAEZ,8BAAC,aAAA,EAAA,EAAc;AAAA;AAAA,SACjB;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DateRangePicker.mjs","sources":["../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { RangeCalendar } from \"../Calendar/RangeCalendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  const localDateRangePickerRef = useObjectRef(ref);\n  useMakeFocusable(localDateRangePickerRef);\n\n  return (\n    <Aria.DateRangePicker\n      ref={localDateRangePickerRef}\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <FieldErrorCaptureContext>\n        <DateRangeInput isDisabled={props.isDisabled} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <RangeCalendar />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqBO,MAAM,eAAA,GAAkB,aAAA,CAAc,iBAAA,EAAmB,CAAC,KAAA,KAAU;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAExD,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAE1D,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EAAA,MAAM,uBAAA,GAA0B,aAAa,GAAG,CAAA;AAChD,EAAA,gBAAA,CAAiB,uBAAuB,CAAA;AAExC,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,eAAA;AAAA,IAAL;AAAA,MACC,GAAA,EAAK,uBAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,YAAA,EAAc,CAAC,CAAA,KAAM,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAA,CAAkB,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AACA,QAAA,iBAAA,CAAkB,KAAA,EAAM;AAAA,MAC1B,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,wBAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,CAAA;AAAA,0BAC9C,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,YAAA;AAAA,cACV,eAAA,EAAe,IAAA;AAAA,cACf,UAAA,EAAY,iBAAA;AAAA,cAEZ,8BAAC,aAAA,EAAA,EAAc;AAAA;AAAA;AACjB,SAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/FieldError/FieldError.mjs

@@ -11,42 +11,43 @@ import '../Icon/Icon.mjs';
 import '../../views/IconView.mjs';
 import { IconDanger } from '../Icon/components/icons/IconDanger.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { onlyText } from 'react-children-utilities';
 
 const FieldError = flowComponent("FieldError", (props) => {
   const { children, className, ref, ...rest } = props;
   const rootClassName = clsx(styles.fieldError, className);
   const fieldErrorFromAriaContext = useContext(FieldErrorContext);
+  const isInvalidFromChildren = React.Children.count(children) >= 1;
   const mergedErrorState = useMemo(() => {
-    if (React.Children.count(children) >= 1) {
-      const textChildren = onlyText(children);
-      if (!textChildren) {
-        return fieldErrorFromAriaContext;
-      }
-      return {
-        isInvalid: true,
-        validationErrors: [textChildren],
-        validationDetails: {
-          valid: false,
-          badInput: false,
-          customError: true,
-          patternMismatch: false,
-          rangeOverflow: false,
-          rangeUnderflow: false,
-          stepMismatch: false,
-          tooLong: false,
-          tooShort: false,
-          valueMissing: false,
-          typeMismatch: false
-        }
-      };
+    const errors = fieldErrorFromAriaContext?.validationErrors ?? [];
+    if (isInvalidFromChildren) {
+      errors.push(children);
     }
-    return fieldErrorFromAriaContext;
+    const isInvalid = !!(isInvalidFromChildren || fieldErrorFromAriaContext?.isInvalid);
+    const lastError = errors.length >= 1 ? errors[errors.length - 1] : void 0;
+    return {
+      isInvalid,
+      validationDetails: {
+        valid: !isInvalid,
+        badInput: false,
+        customError: isInvalid,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        valueMissing: false,
+        typeMismatch: false,
+        ...fieldErrorFromAriaContext?.validationDetails
+      },
+      ...fieldErrorFromAriaContext,
+      validationErrors: lastError ? [lastError] : []
+    };
   }, [fieldErrorFromAriaContext, children]);
   return /* @__PURE__ */ jsx(FieldErrorContext, { value: mergedErrorState, children: /* @__PURE__ */ jsx(Aria.FieldError, { ref, ...rest, className: rootClassName, children: ({ validationErrors }) => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(IconDanger, { size: "s" }),
-      /* @__PURE__ */ jsx("span", { children: validationErrors.join(" ") })
+      /* @__PURE__ */ jsx("span", { children: validationErrors })
     ] });
   } }) });
 });

package/dist/js/components/src/components/FieldError/FieldError.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.mjs","sources":["../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import { type PropsWithChildren, useContext, useMemo } from \"react\";\nimport React from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconDanger } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport { onlyText } from \"react-children-utilities\";\n\nexport interface FieldErrorProps\n  extends PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n  const fieldErrorFromAriaContext = useContext(FieldErrorContext);\n\n  const mergedErrorState = useMemo(() => {\n    if (React.Children.count(children) >= 1) {\n      const textChildren = onlyText(children);\n      if (!textChildren) {\n        return fieldErrorFromAriaContext;\n      }\n\n      return {\n        isInvalid: true,\n        validationErrors: [textChildren],\n        validationDetails: {\n          valid: false,\n          badInput: false,\n          customError: true,\n          patternMismatch: false,\n          rangeOverflow: false,\n          rangeUnderflow: false,\n          stepMismatch: false,\n          tooLong: false,\n          tooShort: false,\n          valueMissing: false,\n          typeMismatch: false,\n        },\n      };\n    }\n\n    return fieldErrorFromAriaContext;\n  }, [fieldErrorFromAriaContext, children]);\n\n  return (\n    <FieldErrorContext value={mergedErrorState}>\n      <Aria.FieldError ref={ref} {...rest} className={rootClassName}>\n        {({ validationErrors }) => {\n          return (\n            <>\n              <IconDanger size=\"s\" />\n              <span>{validationErrors.join(\" \")}</span>\n            </>\n          );\n        }}\n      </Aria.FieldError>\n    </FieldErrorContext>\n  );\n});\n\nexport default FieldError;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AACvD,EAAA,MAAM,yBAAA,GAA4B,WAAW,iBAAiB,CAAA;AAE9D,EAAA,MAAM,gBAAA,GAAmB,QAAQ,MAAM;AACrC,IAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,QAAQ,KAAK,CAAA,EAAG;AACvC,MAAA,MAAM,YAAA,GAAe,SAAS,QAAQ,CAAA;AACtC,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,OAAO,yBAAA;AAAA,MACT;AAEA,MAAA,OAAO;AAAA,QACL,SAAA,EAAW,IAAA;AAAA,QACX,gBAAA,EAAkB,CAAC,YAAY,CAAA;AAAA,QAC/B,iBAAA,EAAmB;AAAA,UACjB,KAAA,EAAO,KAAA;AAAA,UACP,QAAA,EAAU,KAAA;AAAA,UACV,WAAA,EAAa,IAAA;AAAA,UACb,eAAA,EAAiB,KAAA;AAAA,UACjB,aAAA,EAAe,KAAA;AAAA,UACf,cAAA,EAAgB,KAAA;AAAA,UAChB,YAAA,EAAc,KAAA;AAAA,UACd,OAAA,EAAS,KAAA;AAAA,UACT,QAAA,EAAU,KAAA;AAAA,UACV,YAAA,EAAc,KAAA;AAAA,UACd,YAAA,EAAc;AAAA;AAChB,OACF;AAAA,IACF;AAEA,IAAA,OAAO,yBAAA;AAAA,EACT,CAAA,EAAG,CAAC,yBAAA,EAA2B,QAAQ,CAAC,CAAA;AAExC,EAAA,2BACG,iBAAA,EAAA,EAAkB,KAAA,EAAO,gBAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,KAAK,UAAA,EAAL,EAAgB,GAAA,EAAW,GAAG,MAAM,SAAA,EAAW,aAAA,EAC7C,QAAA,EAAA,CAAC,EAAE,kBAAiB,KAAM;AACzB,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,MAAK,GAAA,EAAI,CAAA;AAAA,sBACrB,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,gBAAA,CAAiB,IAAA,CAAK,GAAG,CAAA,EAAE;AAAA,KAAA,EACpC,CAAA;AAAA,EAEJ,GACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FieldError.mjs","sources":["../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport React from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconDanger } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { FieldErrorContext } from \"react-aria-components\";\n\nexport interface FieldErrorProps\n  extends PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n  const fieldErrorFromAriaContext = useContext(FieldErrorContext);\n  const isInvalidFromChildren = React.Children.count(children) >= 1;\n\n  const mergedErrorState = useMemo(() => {\n    const errors: (string | ReactNode)[] =\n      fieldErrorFromAriaContext?.validationErrors ?? [];\n\n    if (isInvalidFromChildren) {\n      errors.push(children);\n    }\n\n    const isInvalid = !!(\n      isInvalidFromChildren || fieldErrorFromAriaContext?.isInvalid\n    );\n    const lastError =\n      errors.length >= 1 ? errors[errors.length - 1] : undefined;\n\n    return {\n      isInvalid: isInvalid,\n      validationDetails: {\n        valid: !isInvalid,\n        badInput: false,\n        customError: isInvalid,\n        patternMismatch: false,\n        rangeOverflow: false,\n        rangeUnderflow: false,\n        stepMismatch: false,\n        tooLong: false,\n        tooShort: false,\n        valueMissing: false,\n        typeMismatch: false,\n        ...fieldErrorFromAriaContext?.validationDetails,\n      },\n      ...fieldErrorFromAriaContext,\n      validationErrors: lastError ? [lastError] : [],\n    };\n  }, [fieldErrorFromAriaContext, children]);\n\n  return (\n    <FieldErrorContext value={mergedErrorState as never}>\n      <Aria.FieldError ref={ref} {...rest} className={rootClassName}>\n        {({ validationErrors }) => {\n          return (\n            <>\n              <IconDanger size=\"s\" />\n              <span>{validationErrors}</span>\n            </>\n          );\n        }}\n      </Aria.FieldError>\n    </FieldErrorContext>\n  );\n});\n\nexport default FieldError;\n"],"names":[],"mappings":";;;;;;;;;;;;AAoBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AACvD,EAAA,MAAM,yBAAA,GAA4B,WAAW,iBAAiB,CAAA;AAC9D,EAAA,MAAM,qBAAA,GAAwB,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,QAAQ,CAAA,IAAK,CAAA;AAEhE,EAAA,MAAM,gBAAA,GAAmB,QAAQ,MAAM;AACrC,IAAA,MAAM,MAAA,GACJ,yBAAA,EAA2B,gBAAA,IAAoB,EAAC;AAElD,IAAA,IAAI,qBAAA,EAAuB;AACzB,MAAA,MAAA,CAAO,KAAK,QAAQ,CAAA;AAAA,IACtB;AAEA,IAAA,MAAM,SAAA,GAAY,CAAC,EACjB,qBAAA,IAAyB,yBAAA,EAA2B,SAAA,CAAA;AAEtD,IAAA,MAAM,SAAA,GACJ,OAAO,MAAA,IAAU,CAAA,GAAI,OAAO,MAAA,CAAO,MAAA,GAAS,CAAC,CAAA,GAAI,MAAA;AAEnD,IAAA,OAAO;AAAA,MACL,SAAA;AAAA,MACA,iBAAA,EAAmB;AAAA,QACjB,OAAO,CAAC,SAAA;AAAA,QACR,QAAA,EAAU,KAAA;AAAA,QACV,WAAA,EAAa,SAAA;AAAA,QACb,eAAA,EAAiB,KAAA;AAAA,QACjB,aAAA,EAAe,KAAA;AAAA,QACf,cAAA,EAAgB,KAAA;AAAA,QAChB,YAAA,EAAc,KAAA;AAAA,QACd,OAAA,EAAS,KAAA;AAAA,QACT,QAAA,EAAU,KAAA;AAAA,QACV,YAAA,EAAc,KAAA;AAAA,QACd,YAAA,EAAc,KAAA;AAAA,QACd,GAAG,yBAAA,EAA2B;AAAA,OAChC;AAAA,MACA,GAAG,yBAAA;AAAA,MACH,gBAAA,EAAkB,SAAA,GAAY,CAAC,SAAS,IAAI;AAAC,KAC/C;AAAA,EACF,CAAA,EAAG,CAAC,yBAAA,EAA2B,QAAQ,CAAC,CAAA;AAExC,EAAA,2BACG,iBAAA,EAAA,EAAkB,KAAA,EAAO,gBAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,KAAK,UAAA,EAAL,EAAgB,GAAA,EAAW,GAAG,MAAM,SAAA,EAAW,aAAA,EAC7C,QAAA,EAAA,CAAC,EAAE,kBAAiB,KAAM;AACzB,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,MAAK,GAAA,EAAI,CAAA;AAAA,sBACrB,GAAA,CAAC,UAAM,QAAA,EAAA,gBAAA,EAAiB;AAAA,KAAA,EAC1B,CAAA;AAAA,EAEJ,GACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs

@@ -27,7 +27,7 @@ const FileDropZone = flowComponent(
     } = props;
     const {
       FieldErrorView,
-      FieldErrorResetContext,
+      FieldErrorCaptureContext,
       fieldProps,
       fieldPropsContext
     } = useFieldComponent(props);
@@ -82,7 +82,7 @@ const FileDropZone = flowComponent(
       }
     };
     return /* @__PURE__ */ jsxs("div", { ...fieldProps, children: [
-      /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
         Aria.DropZone,
         {
           className: rootClassName,

package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.mjs","sources":["../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileDropZoneProps\n  extends PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const {\n      FieldErrorView,\n      FieldErrorResetContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props);\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      FileField: {\n        name,\n        onChange: onChangeDropZone,\n        ref: fileFieldRef,\n        accept: accept,\n        multiple: multiple,\n        Button: { variant: \"outline\", color: \"dark\" },\n        isDisabled,\n        isReadOnly,\n      },\n      Heading: {\n        className: styles.heading,\n      },\n      Icon: { className: styles.icon },\n      Text: { className: styles.text },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const fileDropItems = event.items.filter(\n        (file) => file.kind === \"file\",\n      ) as Aria.FileDropItem[];\n\n      const files = await Promise.all(\n        fileDropItems\n          .filter((f) => !accept || accept?.includes(f.type))\n          .map(async (f) => {\n            const file = await f.getFile();\n            return await addAwaitedArrayBuffer(file);\n          }),\n      );\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <div {...fieldProps}>\n        <FieldErrorResetContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.DropZone\n              className={rootClassName}\n              onDrop={onDropHandler}\n              isDisabled={isDisabled}\n              data-readonly={isReadOnly}\n            >\n              <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n            </Aria.DropZone>\n          </PropsContextProvider>\n        </FieldErrorResetContext>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileDropZone.mjs","sources":["../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileDropZoneProps\n  extends PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props);\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      FileField: {\n        name,\n        onChange: onChangeDropZone,\n        ref: fileFieldRef,\n        accept: accept,\n        multiple: multiple,\n        Button: { variant: \"outline\", color: \"dark\" },\n        isDisabled,\n        isReadOnly,\n      },\n      Heading: {\n        className: styles.heading,\n      },\n      Icon: { className: styles.icon },\n      Text: { className: styles.text },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const fileDropItems = event.items.filter(\n        (file) => file.kind === \"file\",\n      ) as Aria.FileDropItem[];\n\n      const files = await Promise.all(\n        fileDropItems\n          .filter((f) => !accept || accept?.includes(f.type))\n          .map(async (f) => {\n            const file = await f.getFile();\n            return await addAwaitedArrayBuffer(file);\n          }),\n      );\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <div {...fieldProps}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.DropZone\n              className={rootClassName}\n              onDrop={onDropHandler}\n              isDisabled={isDisabled}\n              data-readonly={isReadOnly}\n            >\n              <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n            </Aria.DropZone>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/components/FileField/FileField.mjs

@@ -27,7 +27,7 @@ const FileField = flowComponent("FileField", (props) => {
   } = props;
   const {
     FieldErrorView,
-    FieldErrorResetContext,
+    FieldErrorCaptureContext,
     fieldProps,
     fieldPropsContext
   } = useFieldComponent(props);
@@ -56,7 +56,7 @@ const FileField = flowComponent("FileField", (props) => {
     {
       value: formValidationState.displayValidation,
       children: [
-        /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children: /* @__PURE__ */ jsx(
           "div",
           {
             "data-readonly": isReadOnly,

package/dist/js/components/src/components/FileField/FileField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileField.mjs","sources":["../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorResetContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleOnChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(() =>\n        onChange(fileList),\n      );\n    }\n  };\n\n  useMakeFocusable(inputRef);\n\n  return (\n    <div {...fieldProps}>\n      <InputContext.Provider value={inputProps}>\n        <FieldErrorContext.Provider\n          value={formValidationState.displayValidation}\n        >\n          <FieldErrorResetContext>\n            <PropsContextProvider props={fieldPropsContext}>\n              <div\n                data-readonly={isReadOnly}\n                data-required={!!isRequired || undefined}\n                data-invalid={\n                  formValidationState.displayValidation.isInvalid || undefined\n                }\n              >\n                <FileInput\n                  ref={inputRef}\n                  isReadOnly={isReadOnly}\n                  onChange={isReadOnly ? undefined : handleOnChange}\n                  isDisabled={isDisabled}\n                >\n                  {children}\n                </FileInput>\n              </div>\n            </PropsContextProvider>\n          </FieldErrorResetContext>\n          <FieldErrorView />\n        </FieldErrorContext.Provider>\n      </InputContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA8BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,cAAA,GAA2C,CAAC,QAAA,KAAa;AAC7D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,OAAA,CAAQ,GAAA,CAAI,MAAM,IAAA,CAAK,QAAQ,EAAE,GAAA,CAAI,qBAAqB,CAAC,CAAA,CAAE,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,uBACE,GAAA,CAAC,SAAK,GAAG,UAAA,EACP,8BAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EAAO,UAAA,EAC5B,QAAA,kBAAA,IAAA;AAAA,IAAC,iBAAA,CAAkB,QAAA;AAAA,IAAlB;AAAA,MACC,OAAO,mBAAA,CAAoB,iBAAA;AAAA,MAE3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,sBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,UAAA;AAAA,YACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,YAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,YAGrD,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,QAAA;AAAA,gBACL,UAAA;AAAA,gBACA,QAAA,EAAU,aAAa,MAAA,GAAY,cAAA;AAAA,gBACnC,UAAA;AAAA,gBAEC;AAAA;AAAA;AACH;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,KAEpB,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileField.mjs","sources":["../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleOnChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(() =>\n        onChange(fileList),\n      );\n    }\n  };\n\n  useMakeFocusable(inputRef);\n\n  return (\n    <div {...fieldProps}>\n      <InputContext.Provider value={inputProps}>\n        <FieldErrorContext.Provider\n          value={formValidationState.displayValidation}\n        >\n          <FieldErrorCaptureContext>\n            <PropsContextProvider props={fieldPropsContext}>\n              <div\n                data-readonly={isReadOnly}\n                data-required={!!isRequired || undefined}\n                data-invalid={\n                  formValidationState.displayValidation.isInvalid || undefined\n                }\n              >\n                <FileInput\n                  ref={inputRef}\n                  isReadOnly={isReadOnly}\n                  onChange={isReadOnly ? undefined : handleOnChange}\n                  isDisabled={isDisabled}\n                >\n                  {children}\n                </FileInput>\n              </div>\n            </PropsContextProvider>\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </FieldErrorContext.Provider>\n      </InputContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA8BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,cAAA,GAA2C,CAAC,QAAA,KAAa;AAC7D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,OAAA,CAAQ,GAAA,CAAI,MAAM,IAAA,CAAK,QAAQ,EAAE,GAAA,CAAI,qBAAqB,CAAC,CAAA,CAAE,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,uBACE,GAAA,CAAC,SAAK,GAAG,UAAA,EACP,8BAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EAAO,UAAA,EAC5B,QAAA,kBAAA,IAAA;AAAA,IAAC,iBAAA,CAAkB,QAAA;AAAA,IAAlB;AAAA,MACC,OAAO,mBAAA,CAAoB,iBAAA;AAAA,MAE3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,UAAA;AAAA,YACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,YAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,YAGrD,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,QAAA;AAAA,gBACL,UAAA;AAAA,gBACA,QAAA,EAAU,aAAa,MAAA,GAAY,cAAA;AAAA,gBACnC,UAAA;AAAA,gBAEC;AAAA;AAAA;AACH;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,KAEpB,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}