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

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.mjs","names":[],"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 { 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 \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n  extends\n    Omit<Aria.ComboBoxProps<never>, \"children\" | \"onChange\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement> {\n  /** Called with the key of the selected option whenever the selection changes. */\n  onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange,\n    onSelectionChange,\n    placeholder,\n    ref,\n    renderEmptyState,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"ComboBox\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"ComboBox\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange?.(String(key));\n    onSelectionChange?.(key);\n  };\n\n  const controller = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: false,\n  });\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      onSelectionChange={handleSelectionChange}\n      onOpenChange={(isOpen) => {\n        controller.setOpen(isOpen);\n      }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} ref={ref} />\n            <Button\n              className={styles.toggle}\n              aria-label={stringFormatter.format(\"showOptions\")}\n              variant=\"plain\"\n              color=\"secondary\"\n            >\n              <IconChevronDown />\n            </Button>\n          </div>\n\n          {children}\n\n          <Options\n            controller={controller}\n            onOpenChange={() => {\n              // cut-off to avoid double controller state changes\n            }}\n            renderEmptyState={renderEmptyState}\n          >\n            <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n          </Options>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,WACA,cAAc,SACd,UACA,mBACA,aACA,KACA,kBACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,gBAAgB,KAAK,WAAW,WAAW,wBAAO,UAAU,SAAS;CAE3E,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,UAAU,EAC1C;EACA,GAAG;CACL;CAEA,MAAM,yBAAyB,QAAoB;EACjD,IAAI,QAAQ,MACV;EAEF,WAAW,OAAO,GAAG,CAAC;EACtB,oBAAoB,GAAG;CACzB;CAEA,MAAM,aAAa,qBAAqB,YAAY,EAClD,4BAA4B,MAC9B,CAAC;CAED,OACE,oBAAC,KAAK,UAAN;EACE,GAAI;EACS;EACb,WAAW;EACX,GAAI;EACJ,mBAAmB;EACnB,eAAe,WAAW;GACxB,WAAW,QAAQ,MAAM;EAC3B;EAEA,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACE,qBAAC,OAAD;KAAK,WAAW,wBAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAyB;MAAkB;KAAM,CAAA,GACjD,oBAAC,QAAD;MACE,WAAW,wBAAO;MAClB,cAAY,gBAAgB,OAAO,aAAa;MAChD,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA,CACL;;IAEJ;IAED,oBAAC,SAAD;KACc;KACZ,oBAAoB,CAEpB;KACkB;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAY,CAAA;IACnD,CAAA;GACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACT,CAAA;AAEnB,CAAC"}
+{"version":3,"file":"ComboBox.mjs","names":[],"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 { 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 \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ComboBoxProps\n  extends\n    Omit<Aria.ComboBoxProps<never>, \"children\" | \"onChange\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement> {\n  /** Called with the key of the selected option whenever the selection changes. */\n  onChange?: (value: string) => void;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange,\n    onSelectionChange,\n    placeholder,\n    ref,\n    renderEmptyState,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"ComboBox\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"ComboBox\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.comboBox,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"ComboBox\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange?.(String(key));\n    onSelectionChange?.(key);\n  };\n\n  const controller = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: false,\n  });\n\n  return (\n    <Aria.ComboBox\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      {...controlProps}\n      onSelectionChange={handleSelectionChange}\n      onOpenChange={(isOpen) => {\n        controller.setOpen(isOpen);\n      }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} ref={ref} />\n            <Button\n              className={styles.toggle}\n              aria-label={stringFormatter.format(\"showOptions\")}\n              variant=\"plain\"\n              color=\"secondary\"\n            >\n              <IconChevronDown />\n            </Button>\n          </div>\n\n          {children}\n\n          <Options\n            controller={controller}\n            onOpenChange={() => {\n              // cut-off to avoid double controller state changes\n            }}\n            renderEmptyState={renderEmptyState}\n          >\n            <UiComponentTunnelExit id=\"options\" component=\"ComboBox\" />\n          </Options>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EACJ,UACA,WACA,cAAc,SACd,UACA,mBACA,aACA,KACA,kBACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,kBAAkB,4BAA4B,kBAAS,UAAU;CAEvE,MAAM,gBAAgB,KACpB,aAAa,WACb,wBAAO,UACP,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,UAAU,EAC1C;EACA,GAAG;CACL;CAEA,MAAM,yBAAyB,QAAoB;EACjD,IAAI,QAAQ,MACV;EAEF,WAAW,OAAO,GAAG,CAAC;EACtB,oBAAoB,GAAG;CACzB;CAEA,MAAM,aAAa,qBAAqB,YAAY,EAClD,4BAA4B,MAC9B,CAAC;CAED,OACE,oBAAC,KAAK,UAAN;EACe;EACb,WAAW;EACX,GAAI;EACJ,GAAI;EACJ,mBAAmB;EACnB,eAAe,WAAW;GACxB,WAAW,QAAQ,MAAM;EAC3B;EAEA,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACE,qBAAC,OAAD;KAAK,WAAW,wBAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAyB;MAAkB;KAAM,CAAA,GACjD,oBAAC,QAAD;MACE,WAAW,wBAAO;MAClB,cAAY,gBAAgB,OAAO,aAAa;MAChD,SAAQ;MACR,OAAM;MAEN,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACZ,CAAA,CACL;;IAEJ;IAED,oBAAC,SAAD;KACc;KACZ,oBAAoB,CAEpB;KACkB;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAY,CAAA;IACnD,CAAA;GACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACT,CAAA;AAEnB,CAAC"}

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

@@ -15,7 +15,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ContextMenu/ContextMenu.tsx
 /** @flr-generate all */
 var ContextMenu = flowComponent("ContextMenu", (props) => {
-	const { children, onAction, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, renderEmptyState, showSelectAll, ref, controller: overlayControllerFromProps, ...rest } = props;
+	const { children, onAction, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, renderEmptyState, showSelectAll, ref, controller: overlayControllerFromProps, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, ...rest } = props;
 	const overlayControllerFromContext = useOverlayController("ContextMenu", { reuseControllerFromContext: true });
 	const overlayController = overlayControllerFromProps ?? overlayControllerFromContext;
 	const selectionVariant = getMenuItemSelectionVariant(selectionMode);
@@ -50,6 +50,10 @@ var ContextMenu = flowComponent("ContextMenu", (props) => {
 					disabledKeys,
 					onSelectionChange,
 					renderEmptyState,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-describedby": ariaDescribedBy,
+					"aria-details": ariaDetails,
 					ref,
 					children: [selectAll, /* @__PURE__ */ jsx(PropsContextProvider, {
 						props: propsContext,

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n  getAriaSelectionMode,\n  closesOnSelect,\n  getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\nimport { ContextMenuSelectAll } from \"@/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll\";\n\nexport interface ContextMenuProps\n  extends\n    Omit<PopoverProps, \"withTip\" | \"modality\">,\n    Pick<\n      Aria.MenuProps<MenuItemProps>,\n      | \"onAction\"\n      | \"selectedKeys\"\n      | \"defaultSelectedKeys\"\n      | \"onSelectionChange\"\n      | \"disabledKeys\"\n      | \"renderEmptyState\"\n    >,\n    FlowComponentProps {\n  /** The type of selection that is allowed in the context menu. */\n  selectionMode?: ContextMenuSelectionMode;\n  /** Sets the context menu to a fixed width. */\n  width?: string | number;\n  /**\n   * Adds a first entry that selects or deselects all items at once. Only\n   * applies to `selectionMode=\"multiple\"`.\n   */\n  showSelectAll?: boolean;\n}\n\n/** @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n  const {\n    children,\n    onAction,\n    selectionMode,\n    selectedKeys,\n    defaultSelectedKeys,\n    disabledKeys,\n    onSelectionChange,\n    renderEmptyState,\n    showSelectAll,\n    ref,\n    controller: overlayControllerFromProps,\n    ...rest\n  } = props;\n\n  const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n    reuseControllerFromContext: true,\n  });\n\n  const overlayController =\n    overlayControllerFromProps ?? overlayControllerFromContext;\n\n  const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n  const selectAll = showSelectAll && selectionMode === \"multiple\" && (\n    <ContextMenuSelectAll />\n  );\n\n  const propsContext: PropsContext = {\n    MenuItem: {\n      selectionVariant,\n      Avatar: {\n        size: \"l\",\n      },\n    },\n\n    Section: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n      renderContextMenuSection: true,\n    },\n\n    ContextMenuSection: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n    },\n  };\n\n  return (\n    <OverlayContentSuspendWatcher overlayController={overlayController}>\n      <Popover\n        {...rest}\n        className={styles.popover}\n        controller={overlayController}\n        isDialogContent={false}\n      >\n        <OverlayContextProvider\n          type=\"ContextMenu\"\n          controller={overlayController}\n        >\n          <ContextMenuContentView\n            className={styles.contextMenu}\n            onAction={onAction}\n            selectionMode={getAriaSelectionMode(selectionMode)}\n            selectedKeys={selectedKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n            disabledKeys={disabledKeys}\n            onSelectionChange={onSelectionChange}\n            renderEmptyState={renderEmptyState}\n            ref={ref}\n          >\n            {selectAll}\n            <PropsContextProvider props={propsContext}>\n              <Action closeOverlay={closesOnSelect(selectionMode)}>\n                {children}\n              </Action>\n            </PropsContextProvider>\n          </ContextMenuContentView>\n        </OverlayContextProvider>\n      </Popover>\n    </OverlayContentSuspendWatcher>\n  );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,eACA,KACA,YAAY,4BACZ,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAEhC,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,YAAY,iBAAiB,kBAAkB,cACnD,oBAAC,sBAAD,CAAuB,CAAA;CAGzB,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,WAAW,2BAAO;GAClB,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,qBAAC,wBAAD;KACE,WAAW,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;KACb;KATP,UAAA,CAWG,WACD,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,eAAe,aAAa;OAC/C;MACK,CAAA;KACY,CAAA,CACA;;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}
+{"version":3,"file":"ContextMenu.mjs","names":[],"sources":["../../../../../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { Action } from \"@/components/Action\";\nimport type { ContextMenuSelectionMode } from \"@/components/ContextMenu/lib\";\nimport {\n  getAriaSelectionMode,\n  closesOnSelect,\n  getMenuItemSelectionVariant,\n} from \"@/components/ContextMenu/lib\";\nimport type { MenuItemProps } from \"@/components/MenuItem\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { OverlayContextProvider } from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport ContextMenuContentView from \"@/views/ContextMenuContentView\";\nimport type * as Aria from \"react-aria-components\";\nimport styles from \"./ContextMenu.module.scss\";\nimport { OverlayContentSuspendWatcher } from \"@/lib/controller/overlay/OverlayContentSuspendWatcher\";\nimport { ContextMenuSelectAll } from \"@/components/ContextMenu/components/ContextMenuSelectAll/ContextMenuSelectAll\";\n\nexport interface ContextMenuProps\n  extends\n    Omit<PopoverProps, \"withTip\" | \"modality\">,\n    Pick<\n      Aria.MenuProps<MenuItemProps>,\n      | \"onAction\"\n      | \"selectedKeys\"\n      | \"defaultSelectedKeys\"\n      | \"onSelectionChange\"\n      | \"disabledKeys\"\n      | \"renderEmptyState\"\n    >,\n    FlowComponentProps {\n  /** The type of selection that is allowed in the context menu. */\n  selectionMode?: ContextMenuSelectionMode;\n  /** Sets the context menu to a fixed width. */\n  width?: string | number;\n  /**\n   * Adds a first entry that selects or deselects all items at once. Only\n   * applies to `selectionMode=\"multiple\"`.\n   */\n  showSelectAll?: boolean;\n}\n\n/** @flr-generate all */\nexport const ContextMenu = flowComponent(\"ContextMenu\", (props) => {\n  const {\n    children,\n    onAction,\n    selectionMode,\n    selectedKeys,\n    defaultSelectedKeys,\n    disabledKeys,\n    onSelectionChange,\n    renderEmptyState,\n    showSelectAll,\n    ref,\n    controller: overlayControllerFromProps,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-details\": ariaDetails,\n    ...rest\n  } = props;\n\n  const overlayControllerFromContext = useOverlayController(\"ContextMenu\", {\n    reuseControllerFromContext: true,\n  });\n\n  const overlayController =\n    overlayControllerFromProps ?? overlayControllerFromContext;\n\n  const selectionVariant = getMenuItemSelectionVariant(selectionMode);\n\n  const selectAll = showSelectAll && selectionMode === \"multiple\" && (\n    <ContextMenuSelectAll />\n  );\n\n  const propsContext: PropsContext = {\n    MenuItem: {\n      selectionVariant,\n      Avatar: {\n        size: \"l\",\n      },\n    },\n\n    Section: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n      renderContextMenuSection: true,\n    },\n\n    ContextMenuSection: {\n      MenuItem: {\n        Avatar: {\n          size: \"l\",\n        },\n      },\n    },\n  };\n\n  return (\n    <OverlayContentSuspendWatcher overlayController={overlayController}>\n      <Popover\n        {...rest}\n        className={styles.popover}\n        controller={overlayController}\n        isDialogContent={false}\n      >\n        <OverlayContextProvider\n          type=\"ContextMenu\"\n          controller={overlayController}\n        >\n          <ContextMenuContentView\n            className={styles.contextMenu}\n            onAction={onAction}\n            selectionMode={getAriaSelectionMode(selectionMode)}\n            selectedKeys={selectedKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n            disabledKeys={disabledKeys}\n            onSelectionChange={onSelectionChange}\n            renderEmptyState={renderEmptyState}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-describedby={ariaDescribedBy}\n            aria-details={ariaDetails}\n            ref={ref}\n          >\n            {selectAll}\n            <PropsContextProvider props={propsContext}>\n              <Action closeOverlay={closesOnSelect(selectionMode)}>\n                {children}\n              </Action>\n            </PropsContextProvider>\n          </ContextMenuContentView>\n        </OverlayContextProvider>\n      </Popover>\n    </OverlayContentSuspendWatcher>\n  );\n});\n\nexport default ContextMenu;\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,UACA,eACA,cACA,qBACA,cACA,mBACA,kBACA,eACA,KACA,YAAY,4BACZ,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,gBAAgB,aAChB,GAAG,SACD;CAEJ,MAAM,+BAA+B,qBAAqB,eAAe,EACvE,4BAA4B,KAC9B,CAAC;CAED,MAAM,oBACJ,8BAA8B;CAEhC,MAAM,mBAAmB,4BAA4B,aAAa;CAElE,MAAM,YAAY,iBAAiB,kBAAkB,cACnD,oBAAC,sBAAD,CAAuB,CAAA;CAGzB,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,QAAQ,EACN,MAAM,IACR;EACF;EAEA,SAAS;GACP,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF;GACA,0BAA0B;EAC5B;EAEA,oBAAoB,EAClB,UAAU,EACR,QAAQ,EACN,MAAM,IACR,EACF,EACF;CACF;CAEA,OACE,oBAAC,8BAAD;EAAiD;EAC/C,UAAA,oBAAC,SAAD;GACE,GAAI;GACJ,WAAW,2BAAO;GAClB,YAAY;GACZ,iBAAiB;GAEjB,UAAA,oBAAC,wBAAD;IACE,MAAK;IACL,YAAY;IAEZ,UAAA,qBAAC,wBAAD;KACE,WAAW,2BAAO;KACR;KACV,eAAe,qBAAqB,aAAa;KACnC;KACO;KACP;KACK;KACD;KAClB,cAAY;KACZ,mBAAiB;KACjB,oBAAkB;KAClB,gBAAc;KACT;KAbP,UAAA,CAeG,WACD,oBAAC,sBAAD;MAAsB,OAAO;MAC3B,UAAA,oBAAC,QAAD;OAAQ,cAAc,eAAe,aAAa;OAC/C;MACK,CAAA;KACY,CAAA,CACA;;GACF,CAAA;EACjB,CAAA;CACmB,CAAA;AAElC,CAAC"}

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

@@ -5,6 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
 import { Popover } from "../Popover/Popover.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { DateInput } from "./components/DateInput/DateInput.mjs";
 import { Calendar } from "../Calendar/Calendar.mjs";
 import DatePicker_module_default from "./DatePicker.module.mjs";
@@ -15,13 +16,13 @@ import * as Aria from "react-aria-components";
 //#region src/components/DatePicker/DatePicker.tsx
 /** @flr-generate all */
 var DatePicker = flowComponent("DatePicker", (props) => {
-	const { children, className, onChange, ref, ...rest } = props;
-	const popoverController = useOverlayController("Popover");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "DatePicker");
-	const rootClassName = clsx(fieldProps.className, className);
+	const { children, className, onChange, ref, ...rest } = useControlledHostValueProps(props, null);
+	const popoverController = useOverlayController("Popover", { reuseControllerFromContext: false });
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "DatePicker");
+	const rootClassName = clsx(wrapperProps.className, className);
 	return /* @__PURE__ */ jsxs(Aria.DatePicker, {
 		...rest,
-		...fieldProps,
+		...controlProps,
 		className: rootClassName,
 		onOpenChange: (v) => popoverController.setOpen(v),
 		isOpen: popoverController.isOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","names":[],"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 { 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 { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./DatePicker.module.scss\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const popoverController = useOverlayController(\"Popover\");\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DatePicker\");\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  return (\n    <Aria.DatePicker\n      {...rest}\n      {...fieldProps}\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        <DateInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <Calendar className={styles.calendar} />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,UAAU,KAAK,GAAG,SAAS;CAExD,MAAM,oBAAoB,qBAAqB,SAAS;CACxD,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,WAAW,UAAU;GACnB,IAAI,UACF,SAAS,KAAK;GAEhB,kBAAkB,MAAM;EAC1B;EAXF,UAAA,CAaE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,WAAD;IAAW,YAAY,MAAM;IAAiB;GAAM,CAAA;GACpD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,UAAD,EAAU,WAAW,0BAAO,SAAW,CAAA;GAChC,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"DatePicker.mjs","names":[],"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 { 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 { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./DatePicker.module.scss\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  // `null` is what react-aria's date picker state uses for \"no date\"\n  const { children, className, onChange, ref, ...rest } =\n    useControlledHostValueProps(props, null);\n\n  const popoverController = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DatePicker\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  return (\n    <Aria.DatePicker\n      {...rest}\n      {...controlProps}\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        <DateInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <Calendar className={styles.calendar} />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAE/D,MAAM,EAAE,UAAU,WAAW,UAAU,KAAK,GAAG,SAC7C,4BAA4B,OAAO,IAAI;CAEzC,MAAM,oBAAoB,qBAAqB,WAAW,EACxD,4BAA4B,MAC9B,CAAC;CACD,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,YAAY;CAEzC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,WAAW,UAAU;GACnB,IAAI,UACF,SAAS,KAAK;GAEhB,kBAAkB,MAAM;EAC1B;EAXF,UAAA,CAaE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,WAAD;IAAW,YAAY,MAAM;IAAiB;GAAM,CAAA;GACpD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,UAAD,EAAU,WAAW,0BAAO,SAAW,CAAA;GAChC,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

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

@@ -16,15 +16,16 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var DateRangePicker = flowComponent("DateRangePicker", (props) => {
 	const { children, className, onChange, ref, withDatePickerPresets = false, ...rest } = useControlledHostValueProps(props, null);
-	const popoverController = useOverlayController("Popover");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "DateRangePicker");
-	const rootClassName = clsx(fieldProps.className, className);
+	const popoverController = useOverlayController("Popover", { reuseControllerFromContext: false });
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "DateRangePicker");
+	const rootClassName = clsx(wrapperProps.className, className);
 	const onDatePickerChange = (value) => {
 		if (onChange) onChange(value);
 		popoverController.close();
 	};
 	return /* @__PURE__ */ jsxs(Aria.DateRangePicker, {
 		...rest,
+		"aria-describedby": controlProps["aria-describedby"],
 		className: rootClassName,
 		onOpenChange: (v) => popoverController.setOpen(v),
 		isOpen: popoverController.isOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.mjs","names":[],"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\";\nimport { type DateRangePresets, RangeCalendar } from \"@/components/Calendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport type { RangeValue } from \"react-aria\";\nimport type { DateValue } from \"@internationalized/date\";\nimport styles from \"./DateRangePicker.module.scss\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {\n  /**\n   * Whether the calendar offers presets to pick a range with one click. Pass an\n   * array to replace the built-in presets with your own.\n   *\n   * @default false\n   */\n  withDatePickerPresets?: boolean | DateRangePresets;\n}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  // `null` is what react-aria's date range picker state uses for \"no range\"\n  const {\n    children,\n    className,\n    onChange,\n    ref,\n    withDatePickerPresets = false,\n    ...rest\n  } = useControlledHostValueProps(props, null);\n\n  const popoverController = useOverlayController(\"Popover\");\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DateRangePicker\");\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const onDatePickerChange = (value: RangeValue<DateValue> | null) => {\n    if (onChange) {\n      onChange(value);\n    }\n    popoverController.close();\n  };\n\n  return (\n    <Aria.DateRangePicker\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={onDatePickerChange}\n    >\n      <FieldErrorCaptureContext>\n        <DateRangeInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <RangeCalendar\n            withDatePickerPresets={withDatePickerPresets}\n            className={styles.calendar}\n          />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CAEzE,MAAM,EACJ,UACA,WACA,UACA,KACA,wBAAwB,OACxB,GAAG,SACD,4BAA4B,OAAO,IAAI;CAE3C,MAAM,oBAAoB,qBAAqB,SAAS;CACxD,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,iBAAiB;CAE9C,MAAM,gBAAgB,KAAK,WAAW,WAAW,SAAS;CAE1D,MAAM,sBAAsB,UAAwC;EAClE,IAAI,UACF,SAAS,KAAK;EAEhB,kBAAkB,MAAM;CAC1B;CAEA,OACE,qBAAC,KAAK,iBAAN;EACE,GAAI;EACJ,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,UAAU;EALZ,UAAA,CAOE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,gBAAD;IAAgB,YAAY,MAAM;IAAiB;GAAM,CAAA;GACzD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,eAAD;KACyB;KACvB,WAAW,+BAAO;IACnB,CAAA;GACM,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;AAE1B,CAAC"}
+{"version":3,"file":"DateRangePicker.mjs","names":[],"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\";\nimport { type DateRangePresets, RangeCalendar } from \"@/components/Calendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport type { RangeValue } from \"react-aria\";\nimport type { DateValue } from \"@internationalized/date\";\nimport styles from \"./DateRangePicker.module.scss\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends\n    PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLSpanElement> {\n  /**\n   * Whether the calendar offers presets to pick a range with one click. Pass an\n   * array to replace the built-in presets with your own.\n   *\n   * @default false\n   */\n  withDatePickerPresets?: boolean | DateRangePresets;\n}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  // `null` is what react-aria's date range picker state uses for \"no range\"\n  const {\n    children,\n    className,\n    onChange,\n    ref,\n    withDatePickerPresets = false,\n    ...rest\n  } = useControlledHostValueProps(props, null);\n\n  const popoverController = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"DateRangePicker\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const onDatePickerChange = (value: RangeValue<DateValue> | null) => {\n    if (onChange) {\n      onChange(value);\n    }\n    popoverController.close();\n  };\n\n  return (\n    <Aria.DateRangePicker\n      {...rest}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={onDatePickerChange}\n    >\n      <FieldErrorCaptureContext>\n        <DateRangeInput isDisabled={props.isDisabled} ref={ref} />\n        <PropsContextProvider props={fieldPropsContext}>\n          {children}\n        </PropsContextProvider>\n        <Popover\n          placement=\"bottom end\"\n          isDialogContent\n          controller={popoverController}\n        >\n          <RangeCalendar\n            withDatePickerPresets={withDatePickerPresets}\n            className={styles.calendar}\n          />\n        </Popover>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,IAAa,kBAAkB,cAAc,oBAAoB,UAAU;CAEzE,MAAM,EACJ,UACA,WACA,UACA,KACA,wBAAwB,OACxB,GAAG,SACD,4BAA4B,OAAO,IAAI;CAE3C,MAAM,oBAAoB,qBAAqB,WAAW,EACxD,4BAA4B,MAC9B,CAAC;CACD,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,iBAAiB;CAE9C,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,sBAAsB,UAAwC;EAClE,IAAI,UACF,SAAS,KAAK;EAEhB,kBAAkB,MAAM;CAC1B;CAEA,OACE,qBAAC,KAAK,iBAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,eAAe,MAAM,kBAAkB,QAAQ,CAAC;EAChD,QAAQ,kBAAkB;EAC1B,UAAU;EANZ,UAAA,CAQE,qBAAC,0BAAD,EAAA,UAAA;GACE,oBAAC,gBAAD;IAAgB,YAAY,MAAM;IAAiB;GAAM,CAAA;GACzD,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;GACtB,oBAAC,SAAD;IACE,WAAU;IACV,iBAAA;IACA,YAAY;IAEZ,UAAA,oBAAC,eAAD;KACyB;KACvB,WAAW,+BAAO;IACnB,CAAA;GACM,CAAA;EACe,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;AAE1B,CAAC"}

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

@@ -3,52 +3,61 @@
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { Alert } from "../Alert/Alert.mjs";
 import { AlertText } from "../AlertText/AlertText.mjs";
+import { FieldErrorRenderedContext } from "../../lib/hooks/fieldErrorRenderedContext.mjs";
 import { Heading } from "../Heading/Heading.mjs";
 import FieldError_module_default from "./FieldError.module.mjs";
 import clsx from "clsx";
-import React, { useContext, useMemo } from "react";
+import React, { useContext, useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 import { FieldErrorContext, TextContext } from "react-aria-components";
+import { useObjectRef } from "react-aria";
 //#region src/components/FieldError/FieldError.tsx
 /** @flr-generate all */
 var FieldError = flowComponent("FieldError", (props) => {
 	const { children, className, ref, renderAlert, ...rest } = props;
 	const rootClassName = clsx(FieldError_module_default.fieldError, className);
-	const fieldErrorFromAriaContext = useContext(FieldErrorContext);
-	const isInvalidFromChildren = React.Children.count(children) >= 1;
-	const mergedErrorState = useMemo(() => {
-		const errors = fieldErrorFromAriaContext?.validationErrors ?? [];
-		if (isInvalidFromChildren) errors.push(children);
-		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]);
-	if (!mergedErrorState.isInvalid) return;
+	const fieldValidation = useContext(FieldErrorContext);
+	const reportRendered = useContext(FieldErrorRenderedContext);
+	const hasChildren = React.Children.count(children) >= 1;
+	const isInvalid = fieldValidation ? fieldValidation.isInvalid : hasChildren;
+	const message = hasChildren ? children : fieldValidation?.validationErrors.at(-1);
+	const errorState = {
+		isInvalid,
+		validationDetails: fieldValidation?.validationDetails ?? {
+			badInput: false,
+			customError: isInvalid,
+			patternMismatch: false,
+			rangeOverflow: false,
+			rangeUnderflow: false,
+			stepMismatch: false,
+			tooLong: false,
+			tooShort: false,
+			typeMismatch: false,
+			valid: !isInvalid,
+			valueMissing: false
+		},
+		validationErrors: message ? [message] : []
+	};
+	const localRef = useObjectRef(ref);
+	useLayoutEffect(() => {
+		const element = localRef.current;
+		if (!reportRendered || !isInvalid || !element?.isConnected || !element.id) return;
+		reportRendered(element.id);
+		return () => reportRendered(void 0);
+	}, [
+		reportRendered,
+		isInvalid,
+		rest.id,
+		localRef
+	]);
+	if (!isInvalid) return;
 	return /* @__PURE__ */ jsx(Aria.Provider, {
 		values: [[TextContext, { slot: void 0 }]],
 		children: /* @__PURE__ */ jsx(FieldErrorContext, {
-			value: mergedErrorState,
+			value: errorState,
 			children: /* @__PURE__ */ jsx(Aria.FieldError, {
-				ref,
+				ref: localRef,
 				...rest,
 				className: rootClassName,
 				children: ({ validationErrors }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"FieldError.mjs","names":[],"sources":["../../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import React, {\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, TextContext } from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertText } from \"@/components/AlertText\";\nimport { Alert } from \"@/components/Alert\";\nimport { Heading } from \"@/components/Heading\";\n\nexport interface FieldErrorProps\n  extends\n    PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {\n  /** @internal */\n  renderAlert?: boolean;\n}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, renderAlert, ...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  if (!mergedErrorState.isInvalid) {\n    return undefined;\n  }\n\n  return (\n    <Aria.Provider values={[[TextContext, { slot: undefined }]]}>\n      <FieldErrorContext value={mergedErrorState as never}>\n        <Aria.FieldError ref={ref} {...rest} className={rootClassName}>\n          {({ validationErrors }) => {\n            return renderAlert ? (\n              <Alert status=\"danger\">\n                <Heading>{validationErrors}</Heading>\n              </Alert>\n            ) : (\n              <AlertText status=\"danger\">{validationErrors}</AlertText>\n            );\n          }}\n        </Aria.FieldError>\n      </FieldErrorContext>\n    </Aria.Provider>\n  );\n});\n\nexport default FieldError;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,KAAK,aAAa,GAAG,SAAS;CAE3D,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CACvD,MAAM,4BAA4B,WAAW,iBAAiB;CAC9D,MAAM,wBAAwB,MAAM,SAAS,MAAM,QAAQ,KAAK;CAEhE,MAAM,mBAAmB,cAAc;EACrC,MAAM,SACJ,2BAA2B,oBAAoB,CAAC;EAElD,IAAI,uBACF,OAAO,KAAK,QAAQ;EAGtB,MAAM,YAAY,CAAC,EACjB,yBAAyB,2BAA2B;EAEtD,MAAM,YACJ,OAAO,UAAU,IAAI,OAAO,OAAO,SAAS,KAAK,KAAA;EAEnD,OAAO;GACM;GACX,mBAAmB;IACjB,OAAO,CAAC;IACR,UAAU;IACV,aAAa;IACb,iBAAiB;IACjB,eAAe;IACf,gBAAgB;IAChB,cAAc;IACd,SAAS;IACT,UAAU;IACV,cAAc;IACd,cAAc;IACd,GAAG,2BAA2B;GAChC;GACA,GAAG;GACH,kBAAkB,YAAY,CAAC,SAAS,IAAI,CAAC;EAC/C;CACF,GAAG,CAAC,2BAA2B,QAAQ,CAAC;CAExC,IAAI,CAAC,iBAAiB,WACpB;CAGF,OACE,oBAAC,KAAK,UAAN;EAAe,QAAQ,CAAC,CAAC,aAAa,EAAE,MAAM,KAAA,EAAU,CAAC,CAAC;EACxD,UAAA,oBAAC,mBAAD;GAAmB,OAAO;GACxB,UAAA,oBAAC,KAAK,YAAN;IAAsB;IAAK,GAAI;IAAM,WAAW;IAC5C,WAAA,EAAE,uBAAuB;KACzB,OAAO,cACL,oBAAC,OAAD;MAAO,QAAO;MACZ,UAAA,oBAAC,SAAD,EAAA,UAAU,iBAA0B,CAAA;KAC/B,CAAA,IAEP,oBAAC,WAAD;MAAW,QAAO;MAAU,UAAA;KAA4B,CAAA;IAE5D;GACe,CAAA;EACA,CAAA;CACN,CAAA;AAEnB,CAAC"}
+{"version":3,"file":"FieldError.mjs","names":[],"sources":["../../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import React, {\n  type PropsWithChildren,\n  useContext,\n  useLayoutEffect,\n} from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, TextContext } from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertText } from \"@/components/AlertText\";\nimport { Alert } from \"@/components/Alert\";\nimport { Heading } from \"@/components/Heading\";\nimport { FieldErrorRenderedContext } from \"@/lib/hooks/fieldErrorRenderedContext\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface FieldErrorProps\n  extends\n    PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {\n  /** @internal */\n  renderAlert?: boolean;\n}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, renderAlert, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n  const fieldValidation = useContext(FieldErrorContext);\n  const reportRendered = useContext(FieldErrorRenderedContext);\n  const hasChildren = React.Children.count(children) >= 1;\n\n  // Inside a field the field decides whether there is an error – children only\n  // provide its message. Without a field, children are the error.\n  const isInvalid = fieldValidation ? fieldValidation.isInvalid : hasChildren;\n\n  // Never mutate the context's errors: for a valid field react-aria hands out\n  // one module-level array shared by every field of the page.\n  const message = hasChildren\n    ? children\n    : fieldValidation?.validationErrors.at(-1);\n\n  const errorState = {\n    isInvalid,\n    validationDetails: fieldValidation?.validationDetails ?? {\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      typeMismatch: false,\n      valid: !isInvalid,\n      valueMissing: false,\n    },\n    validationErrors: message ? [message] : [],\n  };\n\n  // Report what is actually in the document: inside a collection (`Select`,\n  // `ComboBox`) react-aria renders the children a second time into a hidden\n  // collection document, where no field context exists and no id resolves.\n  const localRef = useObjectRef(ref);\n  useLayoutEffect(() => {\n    const element = localRef.current;\n    if (!reportRendered || !isInvalid || !element?.isConnected || !element.id) {\n      return;\n    }\n    reportRendered(element.id);\n    return () => reportRendered(undefined);\n  }, [reportRendered, isInvalid, rest.id, localRef]);\n\n  if (!isInvalid) {\n    return undefined;\n  }\n\n  return (\n    <Aria.Provider values={[[TextContext, { slot: undefined }]]}>\n      <FieldErrorContext value={errorState as never}>\n        <Aria.FieldError ref={localRef} {...rest} className={rootClassName}>\n          {({ validationErrors }) => {\n            return renderAlert ? (\n              <Alert status=\"danger\">\n                <Heading>{validationErrors}</Heading>\n              </Alert>\n            ) : (\n              <AlertText status=\"danger\">{validationErrors}</AlertText>\n            );\n          }}\n        </Aria.FieldError>\n      </FieldErrorContext>\n    </Aria.Provider>\n  );\n});\n\nexport default FieldError;\n"],"mappings":";;;;;;;;;;;;;;;;AA0BA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,KAAK,aAAa,GAAG,SAAS;CAE3D,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CACvD,MAAM,kBAAkB,WAAW,iBAAiB;CACpD,MAAM,iBAAiB,WAAW,yBAAyB;CAC3D,MAAM,cAAc,MAAM,SAAS,MAAM,QAAQ,KAAK;CAItD,MAAM,YAAY,kBAAkB,gBAAgB,YAAY;CAIhE,MAAM,UAAU,cACZ,WACA,iBAAiB,iBAAiB,GAAG,EAAE;CAE3C,MAAM,aAAa;EACjB;EACA,mBAAmB,iBAAiB,qBAAqB;GACvD,UAAU;GACV,aAAa;GACb,iBAAiB;GACjB,eAAe;GACf,gBAAgB;GAChB,cAAc;GACd,SAAS;GACT,UAAU;GACV,cAAc;GACd,OAAO,CAAC;GACR,cAAc;EAChB;EACA,kBAAkB,UAAU,CAAC,OAAO,IAAI,CAAC;CAC3C;CAKA,MAAM,WAAW,aAAa,GAAG;CACjC,sBAAsB;EACpB,MAAM,UAAU,SAAS;EACzB,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,SAAS,eAAe,CAAC,QAAQ,IACrE;EAEF,eAAe,QAAQ,EAAE;EACzB,aAAa,eAAe,KAAA,CAAS;CACvC,GAAG;EAAC;EAAgB;EAAW,KAAK;EAAI;CAAQ,CAAC;CAEjD,IAAI,CAAC,WACH;CAGF,OACE,oBAAC,KAAK,UAAN;EAAe,QAAQ,CAAC,CAAC,aAAa,EAAE,MAAM,KAAA,EAAU,CAAC,CAAC;EACxD,UAAA,oBAAC,mBAAD;GAAmB,OAAO;GACxB,UAAA,oBAAC,KAAK,YAAN;IAAiB,KAAK;IAAU,GAAI;IAAM,WAAW;IACjD,WAAA,EAAE,uBAAuB;KACzB,OAAO,cACL,oBAAC,OAAD;MAAO,QAAO;MACZ,UAAA,oBAAC,SAAD,EAAA,UAAU,iBAA0B,CAAA;KAC/B,CAAA,IAEP,oBAAC,WAAD;MAAW,QAAO;MAAU,UAAA;KAA4B,CAAA;IAE5D;GACe,CAAA;EACA,CAAA;CACN,CAAA;AAEnB,CAAC"}

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

@@ -14,7 +14,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var FileDropZone = flowComponent("FileDropZone", (props) => {
 	const { multiple, accept, className, onChange: onChangeDropZone, children, name, isDisabled, isReadOnly } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "FileDropZone");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "FileDropZone");
 	const fileFieldRef = useRef(null);
 	const rootClassName = clsx(FileDropZone_module_default.fileDropZone, isDisabled && FileDropZone_module_default.disabled, className);
 	const propsContext = {
@@ -31,7 +31,8 @@ var FileDropZone = flowComponent("FileDropZone", (props) => {
 					color: "dark"
 				},
 				isDisabled,
-				isReadOnly
+				isReadOnly,
+				"aria-describedby": controlProps["aria-describedby"]
 			},
 			Heading: { className: FileDropZone_module_default.heading },
 			Icon: { className: FileDropZone_module_default.icon },
@@ -49,9 +50,10 @@ var FileDropZone = flowComponent("FileDropZone", (props) => {
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
-		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
+		className: wrapperProps.className,
+		children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
+			dependencies: [controlProps["aria-describedby"]],
 			children: /* @__PURE__ */ jsx(Aria.DropZone, {
 				className: rootClassName,
 				onDrop: onDropHandler,
@@ -59,10 +61,10 @@ var FileDropZone = flowComponent("FileDropZone", (props) => {
 				"data-readonly": isReadOnly,
 				children: /* @__PURE__ */ jsx(IllustratedMessage, {
 					color: "dark",
-					children
+					children: /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children })
 				})
 			})
-		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
+		}), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.mjs","names":[],"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 { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { getAcceptedFiles } from \"@/lib/files/acceptedFiles\";\n\nexport interface FileDropZoneProps\n  extends\n    PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  /** Called with the dropped or selected files whenever the selection changes. */\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, \"FileDropZone\");\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      IllustratedMessage: {\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\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const files = await getAcceptedFiles(event.items, accept);\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"],"mappings":";;;;;;;;;;;;;;AA+BA,IAAa,eAAsC,cACjD,iBACC,UAAU;CACT,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,eACE;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,gBAAgB,KACpB,4BAAO,cACP,cAAc,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;GACF;GACA,SAAS,EACP,WAAW,4BAAO,QACpB;GACA,MAAM,EAAE,WAAW,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAW,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,QAAQ,MAAM,iBAAiB,MAAM,OAAO,MAAM;EAExD,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAEf,UAAA,oBAAC,oBAAD;KAAoB,OAAM;KAAQ;IAA6B,CAAA;GAClD,CAAA;EACK,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CACF"}
+{"version":3,"file":"FileDropZone.mjs","names":[],"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 { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { getAcceptedFiles } from \"@/lib/files/acceptedFiles\";\n\nexport interface FileDropZoneProps\n  extends\n    PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  /** Called with the dropped or selected files whenever the selection changes. */\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      wrapperProps,\n      controlProps,\n      fieldPropsContext,\n    } = useFieldComponent(props, \"FileDropZone\");\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      IllustratedMessage: {\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          \"aria-describedby\": controlProps[\"aria-describedby\"],\n        },\n        Heading: {\n          className: styles.heading,\n        },\n        Icon: { className: styles.icon },\n        Text: { className: styles.text },\n      },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const files = await getAcceptedFiles(event.items, accept);\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 className={wrapperProps.className}>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[controlProps[\"aria-describedby\"]]}\n        >\n          <Aria.DropZone\n            className={rootClassName}\n            onDrop={onDropHandler}\n            isDisabled={isDisabled}\n            data-readonly={isReadOnly}\n          >\n            <IllustratedMessage color=\"dark\">\n              {/* Inside: IllustratedMessage clears the props context it gets. */}\n              <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n            </IllustratedMessage>\n          </Aria.DropZone>\n        </PropsContextProvider>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"mappings":";;;;;;;;;;;;;;AA+BA,IAAa,eAAsC,cACjD,iBACC,UAAU;CACT,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,eACE;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,gBAAgB,KACpB,4BAAO,cACP,cAAc,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;IACA,oBAAoB,aAAa;GACnC;GACA,SAAS,EACP,WAAW,4BAAO,QACpB;GACA,MAAM,EAAE,WAAW,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAW,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,QAAQ,MAAM,iBAAiB,MAAM,OAAO,MAAM;EAExD,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,aAAa;EAA7B,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,aAAa,mBAAmB;GAE/C,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAEf,UAAA,oBAAC,oBAAD;KAAoB,OAAM;KAExB,UAAA,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;IAC5C,CAAA;GACP,CAAA;EACK,CAAA,GACtB,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CACF"}

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

@@ -15,7 +15,7 @@ import { useFormValidationState } from "@react-stately/form";
 /** @flr-generate all */
 var FileField = flowComponent("FileField", (props) => {
 	const { children, ref, isRequired, isInvalid, isDisabled, validationBehavior, onChange, isReadOnly, ...restInputProps } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "FileField");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "FileField");
 	const inputRef = useObjectRef(ref);
 	const formValidationState = useFormValidationState({
 		value: void 0,
@@ -25,6 +25,7 @@ var FileField = flowComponent("FileField", (props) => {
 	useFormValidation({ validationBehavior }, formValidationState, inputRef);
 	const inputProps = {
 		...restInputProps,
+		"aria-describedby": controlProps["aria-describedby"],
 		"aria-invalid": formValidationState.displayValidation.isInvalid,
 		value: void 0
 	};
@@ -32,8 +33,7 @@ var FileField = flowComponent("FileField", (props) => {
 		if (fileList && onChange) onChange(fileList);
 	};
 	return /* @__PURE__ */ jsx("div", {
-		...fieldProps,
-		className: clsx(fieldProps.className, FileField_module_default.fileField),
+		className: clsx(wrapperProps.className, FileField_module_default.fileField),
 		children: /* @__PURE__ */ jsxs(FieldErrorContext.Provider, {
 			value: formValidationState.displayValidation,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"FileField.mjs","names":[],"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 } 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 { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./FileField.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface FileFieldProps\n  extends\n    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, \"FileField\");\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 handleChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      onChange(fileList);\n    }\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.fileField)}\n    >\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\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 : handleChange}\n                isDisabled={isDisabled}\n                {...inputProps}\n              >\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </FieldErrorContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,UACA,KACA,YACA,WACA,YACA,oBACA,UACA,YACA,GAAG,mBACD;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,sBAAsB,uBAAuB;EACjD,OAAO,KAAA;EACP;EACA;CACF,CAAC;CAED,kBAAkB,EAAE,mBAAmB,GAAG,qBAAqB,QAAQ;CAEvE,MAAM,aAAa;EACjB,GAAG;EACH,gBAAgB,oBAAoB,kBAAkB;EACtD,OAAO,KAAA;CACT;CAEA,MAAM,gBAA0C,aAAa;EAC3D,IAAI,YAAY,UACd,SAAS,QAAQ;CAErB;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,WAAW,WAAW,yBAAO,SAAS;EAEtD,UAAA,qBAAC,kBAAkB,UAAnB;GAA4B,OAAO,oBAAoB;GAAvD,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;IAAsB,OAAO;IAC3B,UAAA,oBAAC,OAAD;KACE,iBAAe;KACf,iBAAe,CAAC,CAAC,cAAc,KAAA;KAC/B,gBACE,oBAAoB,kBAAkB,aAAa,KAAA;KAGrD,UAAA,oBAAC,WAAD;MACE,KAAK;MACO;MACZ,UAAU,aAAa,KAAA,IAAY;MACvB;MACZ,GAAI;MAEH;KACQ,CAAA;IACR,CAAA;GACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACS;;CACzB,CAAA;AAET,CAAC"}
+{"version":3,"file":"FileField.mjs","names":[],"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 } 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 { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./FileField.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface FileFieldProps\n  extends\n    PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\" | \"aria-describedby\">,\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    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"FileField\");\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-describedby\": controlProps[\"aria-describedby\"],\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      onChange(fileList);\n    }\n  };\n\n  return (\n    <div className={clsx(wrapperProps.className, styles.fileField)}>\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\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 : handleChange}\n                isDisabled={isDisabled}\n                {...inputProps}\n              >\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </FieldErrorContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,UACA,KACA,YACA,WACA,YACA,oBACA,UACA,YACA,GAAG,mBACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,sBAAsB,uBAAuB;EACjD,OAAO,KAAA;EACP;EACA;CACF,CAAC;CAED,kBAAkB,EAAE,mBAAmB,GAAG,qBAAqB,QAAQ;CAEvE,MAAM,aAAa;EACjB,GAAG;EACH,oBAAoB,aAAa;EACjC,gBAAgB,oBAAoB,kBAAkB;EACtD,OAAO,KAAA;CACT;CAEA,MAAM,gBAA0C,aAAa;EAC3D,IAAI,YAAY,UACd,SAAS,QAAQ;CAErB;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,aAAa,WAAW,yBAAO,SAAS;EAC3D,UAAA,qBAAC,kBAAkB,UAAnB;GAA4B,OAAO,oBAAoB;GAAvD,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;IAAsB,OAAO;IAC3B,UAAA,oBAAC,OAAD;KACE,iBAAe;KACf,iBAAe,CAAC,CAAC,cAAc,KAAA;KAC/B,gBACE,oBAAoB,kBAAkB,aAAa,KAAA;KAGrD,UAAA,oBAAC,WAAD;MACE,KAAK;MACO;MACZ,UAAU,aAAa,KAAA,IAAY;MACvB;MACZ,GAAI;MAEH;KACQ,CAAA;IACR,CAAA;GACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACS;;CACzB,CAAA;AAET,CAAC"}

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

@@ -7,13 +7,13 @@ import { jsx } from "react/jsx-runtime";
 var sizeVariable = (size) => size && `var(--size-px--${size})`;
 /** @flr-generate all */
 var Flex = (props) => {
-	const { children, className, direction = "row", align, justify, gap, columnGap, rowGap, grow, wrap = "nowrap", padding, paddingTop, paddingBottom, paddingLeft, paddingRight, elementType = "div", ...restProps } = props;
+	const { children, className, direction = "row", align, justify, gap, columnGap, rowGap, grow, wrap = "nowrap", padding, paddingBlock, paddingInline, paddingTop, paddingBottom, paddingLeft, paddingRight, elementType = "div", ...restProps } = props;
 	const columnGapSize = columnGap ?? gap;
 	const rowGapSize = rowGap ?? gap;
-	const paddingTopSize = paddingTop ?? padding;
-	const paddingBottomSize = paddingBottom ?? padding;
-	const paddingLeftSize = paddingLeft ?? padding;
-	const paddingRightSize = paddingRight ?? padding;
+	const paddingTopSize = paddingTop ?? paddingBlock ?? padding;
+	const paddingBottomSize = paddingBottom ?? paddingBlock ?? padding;
+	const paddingLeftSize = paddingLeft ?? paddingInline ?? padding;
+	const paddingRightSize = paddingRight ?? paddingInline ?? padding;
 	const rootClassName = clsx(Flex_module_default.flex, align && Flex_module_default.align, justify && Flex_module_default.justify, grow && Flex_module_default.grow, columnGapSize && Flex_module_default["column-gap"], rowGapSize && Flex_module_default["row-gap"], paddingTopSize && Flex_module_default["padding-top"], paddingBottomSize && Flex_module_default["padding-bottom"], paddingLeftSize && Flex_module_default["padding-left"], paddingRightSize && Flex_module_default["padding-right"], className);
 	const style = {
 		"--flex--direction": direction,

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.mjs","names":[],"sources":["../../../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Flex.module.scss\";\n\nexport interface FlexProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    PropsWithElementType<\n      | \"div\"\n      | \"aside\"\n      | \"ul\"\n      | \"li\"\n      | \"ol\"\n      | \"section\"\n      | \"main\"\n      | \"span\"\n      | \"p\"\n      | \"footer\"\n      | \"header\"\n    > {\n  /** The flexDirection value of the element. @default \"row\" */\n  direction?: CSSProperties[\"flexDirection\"];\n  /** The alignItems value of the element. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\n  /** The justifyContent value of the element. @default \"start\" */\n  justify?: CSSProperties[\"justifyContent\"];\n  /** The gap size of the element. */\n  gap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The columnGap size of the element. */\n  columnGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The rowGap size of the element. */\n  rowGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** Whether the element should grow. */\n  grow?: boolean;\n  /** The flexWrap value of the element. @default \"nowrap\" */\n  wrap?: CSSProperties[\"flexWrap\"];\n  /** The padding of the element. */\n  padding?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding top of the element. */\n  paddingTop?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding bottom of the element. */\n  paddingBottom?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left of the element. */\n  paddingLeft?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding right of the element. */\n  paddingRight?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n}\n\ntype FlexSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nconst sizeVariable = (size: FlexSize | undefined) =>\n  size && `var(--size-px--${size})`;\n\n/** @flr-generate all */\nexport const Flex: FC<FlexProps> = (props) => {\n  const {\n    children,\n    className,\n    direction = \"row\",\n    align,\n    justify,\n    gap,\n    columnGap,\n    rowGap,\n    grow,\n    wrap = \"nowrap\",\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n    ...restProps\n  } = props;\n\n  const columnGapSize = columnGap ?? gap;\n  const rowGapSize = rowGap ?? gap;\n  const paddingTopSize = paddingTop ?? padding;\n  const paddingBottomSize = paddingBottom ?? padding;\n  const paddingLeftSize = paddingLeft ?? padding;\n  const paddingRightSize = paddingRight ?? padding;\n\n  const rootClassName = clsx(\n    styles.flex,\n    align && styles.align,\n    justify && styles.justify,\n    grow && styles.grow,\n    columnGapSize && styles[\"column-gap\"],\n    rowGapSize && styles[\"row-gap\"],\n    paddingTopSize && styles[\"padding-top\"],\n    paddingBottomSize && styles[\"padding-bottom\"],\n    paddingLeftSize && styles[\"padding-left\"],\n    paddingRightSize && styles[\"padding-right\"],\n    className,\n  );\n\n  const style: CSSProperties = {\n    \"--flex--direction\": direction,\n    \"--flex--wrap\": wrap,\n    \"--flex--align\":\n      align === \"end\" ? \"flex-end\" : align === \"start\" ? \"flex-start\" : align,\n    \"--flex--justify\": justify,\n    \"--flex--column-gap\": sizeVariable(columnGapSize),\n    \"--flex--row-gap\": sizeVariable(rowGapSize),\n    \"--flex--padding-top\": sizeVariable(paddingTopSize),\n    \"--flex--padding-bottom\": sizeVariable(paddingBottomSize),\n    \"--flex--padding-left\": sizeVariable(paddingLeftSize),\n    \"--flex--padding-right\": sizeVariable(paddingRightSize),\n  };\n\n  const Element = elementType;\n\n  return (\n    <Element {...restProps} className={rootClassName} style={style}>\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"mappings":";;;;;;AAuDA,IAAM,gBAAgB,SACpB,QAAQ,kBAAkB,KAAK;;AAGjC,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,UACA,WACA,YAAY,OACZ,OACA,SACA,KACA,WACA,QACA,MACA,OAAO,UACP,SACA,YACA,eACA,aACA,cACA,cAAc,OACd,GAAG,cACD;CAEJ,MAAM,gBAAgB,aAAa;CACnC,MAAM,aAAa,UAAU;CAC7B,MAAM,iBAAiB,cAAc;CACrC,MAAM,oBAAoB,iBAAiB;CAC3C,MAAM,kBAAkB,eAAe;CACvC,MAAM,mBAAmB,gBAAgB;CAEzC,MAAM,gBAAgB,KACpB,oBAAO,MACP,SAAS,oBAAO,OAChB,WAAW,oBAAO,SAClB,QAAQ,oBAAO,MACf,iBAAiB,oBAAO,eACxB,cAAc,oBAAO,YACrB,kBAAkB,oBAAO,gBACzB,qBAAqB,oBAAO,mBAC5B,mBAAmB,oBAAO,iBAC1B,oBAAoB,oBAAO,kBAC3B,SACF;CAEA,MAAM,QAAuB;EAC3B,qBAAqB;EACrB,gBAAgB;EAChB,iBACE,UAAU,QAAQ,aAAa,UAAU,UAAU,eAAe;EACpE,mBAAmB;EACnB,sBAAsB,aAAa,aAAa;EAChD,mBAAmB,aAAa,UAAU;EAC1C,uBAAuB,aAAa,cAAc;EAClD,0BAA0B,aAAa,iBAAiB;EACxD,wBAAwB,aAAa,eAAe;EACpD,yBAAyB,aAAa,gBAAgB;CACxD;CAIA,OACE,oBAAC,aAAD;EAAS,GAAI;EAAW,WAAW;EAAsB;EACtD;CACM,CAAA;AAEb"}
+{"version":3,"file":"Flex.mjs","names":[],"sources":["../../../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Flex.module.scss\";\n\nexport interface FlexProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    PropsWithElementType<\n      | \"div\"\n      | \"aside\"\n      | \"ul\"\n      | \"li\"\n      | \"ol\"\n      | \"section\"\n      | \"main\"\n      | \"span\"\n      | \"p\"\n      | \"footer\"\n      | \"header\"\n    > {\n  /** The flexDirection value of the element. @default \"row\" */\n  direction?: CSSProperties[\"flexDirection\"];\n  /** The alignItems value of the element. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\n  /** The justifyContent value of the element. @default \"start\" */\n  justify?: CSSProperties[\"justifyContent\"];\n  /** The gap size of the element. */\n  gap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The columnGap size of the element. */\n  columnGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The rowGap size of the element. */\n  rowGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** Whether the element should grow. */\n  grow?: boolean;\n  /** The flexWrap value of the element. @default \"nowrap\" */\n  wrap?: CSSProperties[\"flexWrap\"];\n  /** The padding of the element. */\n  padding?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding top and bottom of the element. Takes precedence over `padding`. */\n  paddingBlock?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left and right of the element. Takes precedence over `padding`. */\n  paddingInline?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding top of the element. */\n  paddingTop?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding bottom of the element. */\n  paddingBottom?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left of the element. */\n  paddingLeft?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding right of the element. */\n  paddingRight?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n}\n\ntype FlexSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nconst sizeVariable = (size: FlexSize | undefined) =>\n  size && `var(--size-px--${size})`;\n\n/** @flr-generate all */\nexport const Flex: FC<FlexProps> = (props) => {\n  const {\n    children,\n    className,\n    direction = \"row\",\n    align,\n    justify,\n    gap,\n    columnGap,\n    rowGap,\n    grow,\n    wrap = \"nowrap\",\n    padding,\n    paddingBlock,\n    paddingInline,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n    ...restProps\n  } = props;\n\n  const columnGapSize = columnGap ?? gap;\n  const rowGapSize = rowGap ?? gap;\n  const paddingTopSize = paddingTop ?? paddingBlock ?? padding;\n  const paddingBottomSize = paddingBottom ?? paddingBlock ?? padding;\n  const paddingLeftSize = paddingLeft ?? paddingInline ?? padding;\n  const paddingRightSize = paddingRight ?? paddingInline ?? padding;\n\n  const rootClassName = clsx(\n    styles.flex,\n    align && styles.align,\n    justify && styles.justify,\n    grow && styles.grow,\n    columnGapSize && styles[\"column-gap\"],\n    rowGapSize && styles[\"row-gap\"],\n    paddingTopSize && styles[\"padding-top\"],\n    paddingBottomSize && styles[\"padding-bottom\"],\n    paddingLeftSize && styles[\"padding-left\"],\n    paddingRightSize && styles[\"padding-right\"],\n    className,\n  );\n\n  const style: CSSProperties = {\n    \"--flex--direction\": direction,\n    \"--flex--wrap\": wrap,\n    \"--flex--align\":\n      align === \"end\" ? \"flex-end\" : align === \"start\" ? \"flex-start\" : align,\n    \"--flex--justify\": justify,\n    \"--flex--column-gap\": sizeVariable(columnGapSize),\n    \"--flex--row-gap\": sizeVariable(rowGapSize),\n    \"--flex--padding-top\": sizeVariable(paddingTopSize),\n    \"--flex--padding-bottom\": sizeVariable(paddingBottomSize),\n    \"--flex--padding-left\": sizeVariable(paddingLeftSize),\n    \"--flex--padding-right\": sizeVariable(paddingRightSize),\n  };\n\n  const Element = elementType;\n\n  return (\n    <Element {...restProps} className={rootClassName} style={style}>\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"mappings":";;;;;;AA2DA,IAAM,gBAAgB,SACpB,QAAQ,kBAAkB,KAAK;;AAGjC,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,UACA,WACA,YAAY,OACZ,OACA,SACA,KACA,WACA,QACA,MACA,OAAO,UACP,SACA,cACA,eACA,YACA,eACA,aACA,cACA,cAAc,OACd,GAAG,cACD;CAEJ,MAAM,gBAAgB,aAAa;CACnC,MAAM,aAAa,UAAU;CAC7B,MAAM,iBAAiB,cAAc,gBAAgB;CACrD,MAAM,oBAAoB,iBAAiB,gBAAgB;CAC3D,MAAM,kBAAkB,eAAe,iBAAiB;CACxD,MAAM,mBAAmB,gBAAgB,iBAAiB;CAE1D,MAAM,gBAAgB,KACpB,oBAAO,MACP,SAAS,oBAAO,OAChB,WAAW,oBAAO,SAClB,QAAQ,oBAAO,MACf,iBAAiB,oBAAO,eACxB,cAAc,oBAAO,YACrB,kBAAkB,oBAAO,gBACzB,qBAAqB,oBAAO,mBAC5B,mBAAmB,oBAAO,iBAC1B,oBAAoB,oBAAO,kBAC3B,SACF;CAEA,MAAM,QAAuB;EAC3B,qBAAqB;EACrB,gBAAgB;EAChB,iBACE,UAAU,QAAQ,aAAa,UAAU,UAAU,eAAe;EACpE,mBAAmB;EACnB,sBAAsB,aAAa,aAAa;EAChD,mBAAmB,aAAa,UAAU;EAC1C,uBAAuB,aAAa,cAAc;EAClD,0BAA0B,aAAa,iBAAiB;EACxD,wBAAwB,aAAa,eAAe;EACpD,yBAAyB,aAAa,gBAAgB;CACxD;CAIA,OACE,oBAAC,aAAD;EAAS,GAAI;EAAW,WAAW;EAAsB;EACtD;CACM,CAAA;AAEb"}

package/dist/js/packages/components/src/components/List/components/ListItemView/ListItemView.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":[".view {\n  display: flex;\n  flex-direction: column;\n\n  .checkboxContainer {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .content {\n    min-width: 0;\n    display: flex;\n    gap: var(--list-item--spacing);\n    flex-grow: 1;\n    flex-wrap: wrap;\n  }\n\n  .topContent {\n    overflow-wrap: anywhere;\n    display: flex;\n  }\n\n  .bottomContent {\n    width: 100%;\n    overflow-wrap: anywhere;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .heading {\n    color: var(--text--color--default);\n    overflow-wrap: anywhere;\n  }\n\n  .header {\n    overflow-wrap: anywhere;\n    display: flex;\n    gap: var(--list-item--avatar-to-title-spacing);\n    max-width: 100%;\n  }\n\n  .subTitle {\n    font-size: var(--list-item--subtitle-font-size);\n\n    .text:not(:last-child)::after {\n      content: \"–\";\n      display: inline-block;\n      margin: 0 var(--size-rem--s);\n    }\n  }\n\n  .badge {\n    max-width: 100%;\n  }\n\n  &.listView {\n    padding: var(--list-item--padding);\n    gap: var(--list-item--spacing);\n\n    .columnLayout {\n      flex-grow: 1;\n\n      > :global(.flow--column-layout) {\n        flex-grow: 1;\n        align-items: center;\n      }\n    }\n\n    .contentWrapper {\n      display: flex;\n      gap: var(--list-item--spacing);\n      justify-content: space-between;\n      flex-grow: 1;\n      align-items: flex-start;\n    }\n\n    .content {\n      align-items: center;\n      align-self: center;\n      max-width: 100%;\n    }\n\n    .title {\n      max-width: 100%;\n      min-width: 0;\n    }\n\n    .action {\n      margin-inline-start: auto;\n\n      :global(.flow--button) {\n        margin-inline-end: 0;\n      }\n    }\n\n    .header {\n      order: 0;\n      flex-grow: 1;\n      align-items: center;\n\n      &:empty,\n      .subTitle:empty {\n        display: none;\n      }\n\n      .avatar,\n      .checkboxContainer {\n        align-self: start;\n      }\n\n      .checkboxContainer {\n        height: var(--avatar--size--m);\n      }\n    }\n\n    &:has(.subTitle:not(:empty)) {\n      .action,\n      .avatar,\n      .checkboxContainer {\n        margin-top: var(--size-px--xxs);\n      }\n    }\n\n    .topContent {\n      order: 1;\n    }\n\n    :global(.flow--heading--heading-content) {\n      max-width: 100%;\n    }\n  }\n\n  &.tileView {\n    gap: var(--list-item--padding);\n    border-color: var(--list-item--border-color);\n    border-width: var(--list-item--border-width);\n    border-style: var(--list-item--border-style);\n    border-radius: var(--list-item--corner-radius);\n    align-content: flex-start;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n\n    .content {\n      flex-direction: column;\n      justify-content: flex-start;\n      align-items: flex-start;\n      padding-inline: var(--list-item--padding);\n      padding-bottom: var(--list-item--padding);\n      width: 100%;\n    }\n\n    .avatarContainer {\n      width: 100%;\n      border-bottom: var(--list-item--border-width)\n        var(--list-item--border-style) var(--list-item--border-color);\n      aspect-ratio: 16 / 9;\n\n      // A consumer child inside `Avatar` — Flow `Image` or a bare `<img>`.\n      // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n      img {\n        overflow-clip-margin: unset;\n        aspect-ratio: 16 / 9;\n      }\n    }\n\n    .avatar {\n      width: 100%;\n      height: 100%;\n      border-radius: 0;\n\n      :global(.flow--avatar--icon) {\n        width: var(--size-px--xxl);\n        height: var(--size-px--xxl);\n      }\n\n      :global(.flow--avatar--initials) {\n        font-size: var(--size-px--xxl);\n      }\n    }\n\n    .checkboxContainer {\n      position: absolute;\n      top: var(--list-item--padding);\n      inset-inline-start: var(--list-item--padding);\n      background-color: var(--list-item--checkbox-background-color);\n      border-radius: var(--list-item--checkbox-corner-radius);\n\n      :global(.flow--checkbox .flow--checkbox--icon) {\n        color: var(--list-item--checkbox-color);\n        padding: var(--size-px--xxxs);\n      }\n    }\n\n    .title {\n      width: 100%;\n      min-width: 0;\n\n      :global(.flow--heading--heading-text-spacer) {\n        display: none;\n      }\n\n      :global(.flow--heading--heading-content) {\n        position: absolute;\n        top: var(--list-item--padding);\n        inset-inline: var(--list-item--padding);\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--heading--icon-to-text-spacing);\n        justify-content: end;\n      }\n\n      :global(.flow--heading--heading-content-item):not(:last-child) {\n        margin-inline-end: 0;\n      }\n    }\n\n    &:has(.checkboxContainer:not(:empty)) {\n      :global(.flow--heading--heading-content) {\n        inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n      }\n    }\n\n    .topContent,\n    .header {\n      width: 100%;\n    }\n\n    .action {\n      align-self: start;\n    }\n\n    .bottomContent {\n      margin-top: auto;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ListItemView.module.mjs","names":[],"sources":["../../../../../../../../../src/components/List/components/ListItemView/ListItemView.module.scss"],"sourcesContent":[".view {\n  display: flex;\n  flex-direction: column;\n\n  .checkboxContainer {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .content {\n    min-width: 0;\n    display: flex;\n    gap: var(--list-item--spacing);\n    flex-grow: 1;\n    flex-wrap: wrap;\n  }\n\n  .topContent {\n    overflow-wrap: anywhere;\n    display: flex;\n  }\n\n  .bottomContent {\n    width: 100%;\n    overflow-wrap: anywhere;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .heading {\n    color: var(--text--color--default);\n    overflow-wrap: anywhere;\n  }\n\n  .header {\n    overflow-wrap: anywhere;\n    display: flex;\n    gap: var(--list-item--avatar-to-title-spacing);\n    max-width: 100%;\n  }\n\n  .subTitle {\n    font-size: var(--list-item--subtitle-font-size);\n\n    .text:not(:last-child)::after {\n      content: \"–\";\n      display: inline-block;\n      margin: 0 var(--size-rem--s);\n    }\n  }\n\n  .badge {\n    max-width: 100%;\n  }\n\n  &.listView {\n    padding: var(--list-item--padding);\n    gap: var(--list-item--spacing);\n\n    .columnLayout {\n      flex-grow: 1;\n\n      > :global(.flow--column-layout) {\n        flex-grow: 1;\n        align-items: center;\n      }\n    }\n\n    .contentWrapper {\n      display: flex;\n      gap: var(--list-item--spacing);\n      justify-content: space-between;\n      flex-grow: 1;\n      align-items: flex-start;\n    }\n\n    .content {\n      align-items: center;\n      align-self: center;\n      max-width: 100%;\n    }\n\n    .title {\n      max-width: 100%;\n      min-width: 0;\n    }\n\n    .action {\n      margin-inline-start: auto;\n\n      :global(.flow--button) {\n        margin-inline-end: 0;\n      }\n    }\n\n    .header {\n      order: 0;\n      flex-grow: 1;\n      align-items: center;\n\n      &:empty,\n      .subTitle:empty {\n        display: none;\n      }\n\n      .avatar,\n      .checkboxContainer {\n        align-self: start;\n      }\n\n      .checkboxContainer {\n        height: var(--avatar--size--m);\n      }\n    }\n\n    &:has(.subTitle:not(:empty)) {\n      .action,\n      .avatar,\n      .checkboxContainer {\n        margin-top: var(--size-px--xxs);\n      }\n    }\n\n    .topContent {\n      order: 1;\n    }\n\n    :global(.flow--heading--heading-content) {\n      max-width: 100%;\n    }\n  }\n\n  &.tileView {\n    gap: var(--list-item--padding);\n    border-color: var(--list-item--border-color);\n    border-width: var(--list-item--border-width);\n    border-style: var(--list-item--border-style);\n    border-radius: var(--list-item--corner-radius);\n    align-content: flex-start;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n\n    .content {\n      flex-direction: column;\n      justify-content: flex-start;\n      align-items: flex-start;\n      padding-inline: var(--list-item--padding);\n      padding-bottom: var(--list-item--padding);\n      width: 100%;\n    }\n\n    .avatarContainer {\n      width: 100%;\n      border-bottom: var(--list-item--border-width)\n        var(--list-item--border-style) var(--list-item--border-color);\n      aspect-ratio: 16 / 9;\n\n      // A consumer child inside `Avatar` — Flow `Image` or a bare `<img>`.\n      // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n      img {\n        overflow-clip-margin: unset;\n        aspect-ratio: 16 / 9;\n        border-radius: 0;\n      }\n    }\n\n    .avatar {\n      width: 100%;\n      height: 100%;\n      border-radius: 0;\n\n      :global(.flow--avatar--icon) {\n        width: var(--size-px--xxl);\n        height: var(--size-px--xxl);\n      }\n\n      :global(.flow--avatar--initials) {\n        font-size: var(--size-px--xxl);\n      }\n    }\n\n    .checkboxContainer {\n      position: absolute;\n      top: var(--list-item--padding);\n      inset-inline-start: var(--list-item--padding);\n      background-color: var(--list-item--checkbox-background-color);\n      border-radius: var(--list-item--checkbox-corner-radius);\n\n      :global(.flow--checkbox .flow--checkbox--icon) {\n        color: var(--list-item--checkbox-color);\n        padding: var(--size-px--xxxs);\n      }\n    }\n\n    .title {\n      width: 100%;\n      min-width: 0;\n\n      :global(.flow--heading--heading-text-spacer) {\n        display: none;\n      }\n\n      :global(.flow--heading--heading-content) {\n        position: absolute;\n        top: var(--list-item--padding);\n        inset-inline: var(--list-item--padding);\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--heading--icon-to-text-spacing);\n        justify-content: end;\n      }\n\n      :global(.flow--heading--heading-content-item):not(:last-child) {\n        margin-inline-end: 0;\n      }\n    }\n\n    &:has(.checkboxContainer:not(:empty)) {\n      :global(.flow--heading--heading-content) {\n        inset-inline-start: calc(var(--list-item--padding) * 2 + var(--icon--size--m));\n      }\n    }\n\n    .topContent,\n    .header {\n      width: 100%;\n    }\n\n    .action {\n      align-self: start;\n    }\n\n    .bottomContent {\n      margin-top: auto;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -19,12 +19,13 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var NumberField = flowComponent("NumberField", (props) => {
 	const { children, className, isWheelDisabled = true, ref, ...rest } = useControlledHostValueProps(props, NaN);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "NumberField");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "NumberField");
 	const rootClassName = clsx(FormField_module_default.formField, className);
 	return /* @__PURE__ */ jsxs(Aria.NumberField, {
 		...rest,
 		isWheelDisabled,
-		className: clsx(rootClassName, fieldProps.className),
+		"aria-describedby": controlProps["aria-describedby"],
+		className: clsx(rootClassName, wrapperProps.className),
 		children: [/* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: fieldPropsContext,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }), /* @__PURE__ */ jsx(FieldErrorView, {})]

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

@@ -1 +1 @@
-{"version":3,"file":"NumberField.mjs","names":[],"sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface NumberFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  // `NaN` is what react-aria's number field state uses for \"no number\"\n  const {\n    children,\n    className,\n    isWheelDisabled = true,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props, NaN);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"NumberField\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      isWheelDisabled={isWheelDisabled}\n      className={clsx(rootClassName, fieldProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <Aria.Input className={styles.input} ref={ref} />\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CAEjE,MAAM,EACJ,UACA,WACA,kBAAkB,MAClB,KACA,GAAG,SACD,4BAA4B,OAAO,GAAG;CAE1C,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KAAK,yBAAgB,WAAW,SAAS;CAE/D,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACa;EACjB,WAAW,KAAK,eAAe,WAAW,SAAS;EAHrD,UAAA,CAKE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAC9D,oBAAC,gBAAD,CAAiB,CAAA,CACG;EACtB,CAAA,GAAA,qBAAC,KAAK,OAAN;GAAY,WAAW,2BAAO;GAA9B,UAAA;IACE,qBAAC,QAAD;KACE,UAAS;KACT,WAAW,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD,EAAW,WAAW,2BAAO,kBAAoB,CAAA,CAC3C;;IACR,oBAAC,KAAK,OAAN;KAAY,WAAW,2BAAO;KAAY;IAAM,CAAA;IAChD,qBAAC,QAAD;KACE,UAAS;KACT,WAAW,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,UAAD,EAAU,WAAW,2BAAO,kBAAoB,CAAA,CAC1C;;GACE;EACI,CAAA,CAAA;;AAEtB,CAAC"}
+{"version":3,"file":"NumberField.mjs","names":[],"sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface NumberFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  // `NaN` is what react-aria's number field state uses for \"no number\"\n  const {\n    children,\n    className,\n    isWheelDisabled = true,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props, NaN);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"NumberField\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      isWheelDisabled={isWheelDisabled}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={clsx(rootClassName, wrapperProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <Aria.Input className={styles.input} ref={ref} />\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CAEjE,MAAM,EACJ,UACA,WACA,kBAAkB,MAClB,KACA,GAAG,SACD,4BAA4B,OAAO,GAAG;CAE1C,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KAAK,yBAAgB,WAAW,SAAS;CAE/D,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACa;EACjB,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EAJvD,UAAA,CAME,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAC9D,oBAAC,gBAAD,CAAiB,CAAA,CACG;EACtB,CAAA,GAAA,qBAAC,KAAK,OAAN;GAAY,WAAW,2BAAO;GAA9B,UAAA;IACE,qBAAC,QAAD;KACE,UAAS;KACT,WAAW,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD,EAAW,WAAW,2BAAO,kBAAoB,CAAA,CAC3C;;IACR,oBAAC,KAAK,OAAN;KAAY,WAAW,2BAAO;KAAY;IAAM,CAAA;IAChD,qBAAC,QAAD;KACE,UAAS;KACT,WAAW,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,UAAD,EAAU,WAAW,2BAAO,kBAAoB,CAAA,CAC1C;;GACE;EACI,CAAA,CAAA;;AAEtB,CAAC"}