@mittwald/flow-react-components 1.6.0-next.5 → 1.6.0-next.50

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.mjs","names":["styles","locales","_Fragment"],"sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\n\nexport interface SliderProps\n  extends\n    FlowComponentProps<HTMLInputElement>,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"name\"> {\n  /** Whether the marker for the initial value should be visible */\n  showInitialMarker?: boolean;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n  /** Whether the component is invalid. */\n  isInvalid?: boolean;\n  /** Hide Buttons, Label and Value */\n  sliderOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    isReadOnly,\n    ref,\n    step,\n    sliderOnly,\n    // Reaches the thumb through `controlProps` – react-aria would add it a\n    // second time from the slider.\n    \"aria-describedby\": ignoredAriaDescribedBy,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"Slider\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Slider\");\n\n  const objectRef = useObjectRef(ref);\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      tunnel: {\n        id: \"label\",\n        component: \"Slider\",\n      },\n      ...fieldPropsContext.Label,\n      className: styles.label,\n    },\n  };\n\n  return (\n    <div {...skeletonProps} className={wrapperProps.className}>\n      <Aria.Slider\n        {...rest}\n        className={rootClassName}\n        isDisabled={isDisabled}\n        defaultValue={defaultValue}\n        step={step}\n      >\n        <PropsContextProvider props={propsContext}>\n          <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n          {!sliderOnly && (\n            <div className={styles.text}>\n              <Aria.SliderOutput className={styles.value}>\n                {({ defaultChildren }) => (\n                  <SkeletonTextContent defaultWidth=\"2em\">\n                    {defaultChildren}\n                  </SkeletonTextContent>\n                )}\n              </Aria.SliderOutput>{\" \"}\n              <UiComponentTunnelExit id=\"label\" component=\"Slider\" />\n            </div>\n          )}\n\n          <Aria.SliderTrack className={styles.track}>\n            {({ state }) => (\n              <PropsContextProvider\n                props={{\n                  Button: {\n                    isPending: false,\n                    isFailed: false,\n                    isSucceeded: false,\n                    isReadOnly: isReadOnly,\n                    excludeFromTabOrder: true,\n                    isDisabled,\n                    variant: \"plain\",\n                    color: \"secondary\",\n                    size: \"s\",\n                  },\n                }}\n              >\n                {!sliderOnly && (\n                  <>\n                    <Button\n                      onPress={() => state.decrementThumb(0, step)}\n                      aria-label={stringFormatter.format(\"decrement\")}\n                      className={styles.decrement}\n                    >\n                      <IconMinus />\n                    </Button>\n                    <Button\n                      onPress={() => state.incrementThumb(0, step)}\n                      aria-label={stringFormatter.format(\"increment\")}\n                      className={styles.increment}\n                    >\n                      <IconPlus />\n                    </Button>\n                  </>\n                )}\n\n                <div\n                  className={styles.fill}\n                  style={{\n                    \"--slider--value\": state.getThumbPercent(0),\n                  }}\n                />\n\n                {showInitialMarker &&\n                  defaultValue &&\n                  typeof defaultValue === \"number\" && (\n                    <div\n                      className={styles.initialMarker}\n                      style={{\n                        \"--slider--initial-value\":\n                          state.getValuePercent(defaultValue),\n                      }}\n                    />\n                  )}\n                <Aria.SliderThumb\n                  inputRef={objectRef}\n                  aria-describedby={controlProps[\"aria-describedby\"]}\n                  name={name}\n                  className={styles.handle}\n                  isDisabled={isReadOnly}\n                />\n              </PropsContextProvider>\n            )}\n          </Aria.SliderTrack>\n          <FieldErrorView />\n        </PropsContextProvider>\n      </Aria.Slider>\n    </div>\n  );\n});\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,MACA,YACA,cACA,mBACA,YACA,KACA,MACA,YAGA,oBAAoB,wBACpB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,sBAAO,QACP,cAAcA,sBAAO,UACrB,SACF;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,kBAAkB,4BAA4BC,kBAAS,QAAQ;CAErE,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,GAAG,kBAAkB;GACrB,WAAWD,sBAAO;EACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAe,WAAW,aAAa;EAC9C,UAAA,oBAAC,KAAK,QAAN;GACE,GAAI;GACJ,WAAW;GACC;GACE;GACR;GAEN,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA;KACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;KAE7D,CAAC,cACA,qBAAC,OAAD;MAAK,WAAWA,sBAAO;MAAvB,UAAA;OACE,oBAAC,KAAK,cAAN;QAAmB,WAAWA,sBAAO;QACjC,WAAA,EAAE,sBACF,oBAAC,qBAAD;SAAqB,cAAa;SAC/B,UAAA;QACkB,CAAA;OAEN,CAAA;OAAE;OACrB,oBAAC,uBAAD;QAAuB,IAAG;QAAQ,WAAU;OAAU,CAAA;MACnD;;KAGP,oBAAC,KAAK,aAAN;MAAkB,WAAWA,sBAAO;MAChC,WAAA,EAAE,YACF,qBAAC,sBAAD;OACE,OAAO,EACL,QAAQ;QACN,WAAW;QACX,UAAU;QACV,aAAa;QACD;QACZ,qBAAqB;QACrB;QACA,SAAS;QACT,OAAO;QACP,MAAM;OACR,EACF;OAbF,UAAA;QAeG,CAAC,cACA,qBAAAE,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAWF,sBAAO;SAElB,UAAA,oBAAC,WAAD,CAAY,CAAA;QACN,CAAA,GACR,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAWA,sBAAO;SAElB,UAAA,oBAAC,UAAD,CAAW,CAAA;QACL,CAAA,CACR,EAAA,CAAA;QAGJ,oBAAC,OAAD;SACE,WAAWA,sBAAO;SAClB,OAAO,EACL,mBAAmB,MAAM,gBAAgB,CAAC,EAC5C;QACD,CAAA;QAEA,qBACC,gBACA,OAAO,iBAAiB,YACtB,oBAAC,OAAD;SACE,WAAWA,sBAAO;SAClB,OAAO,EACL,2BACE,MAAM,gBAAgB,YAAY,EACtC;QACD,CAAA;QAEL,oBAAC,KAAK,aAAN;SACE,UAAU;SACV,oBAAkB,aAAa;SACzB;SACN,WAAWA,sBAAO;SAClB,YAAY;QACb,CAAA;OACmB;;KAER,CAAA;KAClB,oBAAC,gBAAD,CAAiB,CAAA;IACG;;EACX,CAAA;CACV,CAAA;AAET,CAAC"}
+{"version":3,"file":"Slider.mjs","names":["styles","locales","_Fragment"],"sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\n\nexport interface SliderProps\n  extends\n    FlowComponentProps<HTMLInputElement>,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"name\"> {\n  /** Whether the marker for the initial value should be visible */\n  showInitialMarker?: boolean;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n  /** Whether the component is invalid. */\n  isInvalid?: boolean;\n  /** Hide Buttons, Label and Value */\n  sliderOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    isReadOnly,\n    ref,\n    step,\n    sliderOnly,\n    // Reaches the thumb through `controlProps` – react-aria would add it a\n    // second time from the slider.\n    \"aria-describedby\": ignoredAriaDescribedBy,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"Slider\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Slider\");\n\n  const objectRef = useObjectRef(ref);\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      tunnel: {\n        id: \"label\",\n        component: \"Slider\",\n      },\n      ...fieldPropsContext.Label,\n      className: styles.label,\n    },\n  };\n\n  const trackPropsContext: PropsContext = {\n    Button: {\n      isPending: false,\n      isFailed: false,\n      isSucceeded: false,\n      isReadOnly: isReadOnly,\n      excludeFromTabOrder: true,\n      isDisabled,\n      variant: \"plain\",\n      color: \"secondary\",\n      size: \"s\",\n    },\n  };\n\n  const renderTrack = ({ state }: Aria.SliderTrackRenderProps) => {\n    const stepButtons = (\n      <>\n        <Button\n          onPress={() => state.decrementThumb(0, step)}\n          aria-label={stringFormatter.format(\"decrement\")}\n          className={styles.decrement}\n        >\n          <IconMinus />\n        </Button>\n        <Button\n          onPress={() => state.incrementThumb(0, step)}\n          aria-label={stringFormatter.format(\"increment\")}\n          className={styles.increment}\n        >\n          <IconPlus />\n        </Button>\n      </>\n    );\n\n    const initialMarker = showInitialMarker &&\n      typeof defaultValue === \"number\" && (\n        <div\n          className={styles.initialMarker}\n          style={{\n            \"--slider--initial-value\": state.getValuePercent(defaultValue),\n          }}\n        />\n      );\n\n    return (\n      <PropsContextProvider props={trackPropsContext}>\n        {!sliderOnly && stepButtons}\n\n        <div\n          className={styles.fill}\n          style={{\n            \"--slider--value\": state.getThumbPercent(0),\n          }}\n        />\n\n        {initialMarker}\n        <Aria.SliderThumb\n          inputRef={objectRef}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          name={name}\n          className={styles.handle}\n          isDisabled={isReadOnly}\n        />\n      </PropsContextProvider>\n    );\n  };\n\n  return (\n    <div {...skeletonProps} className={wrapperProps.className}>\n      <Aria.Slider\n        {...rest}\n        className={rootClassName}\n        isDisabled={isDisabled}\n        defaultValue={defaultValue}\n        step={step}\n      >\n        <PropsContextProvider props={propsContext}>\n          <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n          {!sliderOnly && (\n            <div className={styles.text}>\n              <Aria.SliderOutput className={styles.value}>\n                {({ defaultChildren }) => (\n                  <SkeletonTextContent defaultWidth=\"2em\">\n                    {defaultChildren}\n                  </SkeletonTextContent>\n                )}\n              </Aria.SliderOutput>{\" \"}\n              <UiComponentTunnelExit id=\"label\" component=\"Slider\" />\n            </div>\n          )}\n\n          <Aria.SliderTrack className={styles.track}>\n            {renderTrack}\n          </Aria.SliderTrack>\n          <FieldErrorView />\n        </PropsContextProvider>\n      </Aria.Slider>\n    </div>\n  );\n});\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,MACA,YACA,cACA,mBACA,YACA,KACA,MACA,YAGA,oBAAoB,wBACpB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,sBAAO,QACP,cAAcA,sBAAO,UACrB,SACF;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,kBAAkB,4BAA4BC,kBAAS,QAAQ;CAErE,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,GAAG,kBAAkB;GACrB,WAAWD,sBAAO;EACpB;CACF;CAEA,MAAM,oBAAkC,EACtC,QAAQ;EACN,WAAW;EACX,UAAU;EACV,aAAa;EACD;EACZ,qBAAqB;EACrB;EACA,SAAS;EACT,OAAO;EACP,MAAM;CACR,EACF;CAEA,MAAM,eAAe,EAAE,YAAyC;EAC9D,MAAM,cACJ,qBAAAE,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GACE,eAAe,MAAM,eAAe,GAAG,IAAI;GAC3C,cAAY,gBAAgB,OAAO,WAAW;GAC9C,WAAWF,sBAAO;GAElB,UAAA,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA,GACR,oBAAC,QAAD;GACE,eAAe,MAAM,eAAe,GAAG,IAAI;GAC3C,cAAY,gBAAgB,OAAO,WAAW;GAC9C,WAAWA,sBAAO;GAElB,UAAA,oBAAC,UAAD,CAAW,CAAA;EACL,CAAA,CACR,EAAA,CAAA;EAGJ,MAAM,gBAAgB,qBACpB,OAAO,iBAAiB,YACtB,oBAAC,OAAD;GACE,WAAWA,sBAAO;GAClB,OAAO,EACL,2BAA2B,MAAM,gBAAgB,YAAY,EAC/D;EACD,CAAA;EAGL,OACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG,CAAC,cAAc;IAEhB,oBAAC,OAAD;KACE,WAAWA,sBAAO;KAClB,OAAO,EACL,mBAAmB,MAAM,gBAAgB,CAAC,EAC5C;IACD,CAAA;IAEA;IACD,oBAAC,KAAK,aAAN;KACE,UAAU;KACV,oBAAkB,aAAa;KACzB;KACN,WAAWA,sBAAO;KAClB,YAAY;IACb,CAAA;GACmB;;CAE1B;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAe,WAAW,aAAa;EAC9C,UAAA,oBAAC,KAAK,QAAN;GACE,GAAI;GACJ,WAAW;GACC;GACE;GACR;GAEN,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA;KACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;KAE7D,CAAC,cACA,qBAAC,OAAD;MAAK,WAAWA,sBAAO;MAAvB,UAAA;OACE,oBAAC,KAAK,cAAN;QAAmB,WAAWA,sBAAO;QACjC,WAAA,EAAE,sBACF,oBAAC,qBAAD;SAAqB,cAAa;SAC/B,UAAA;QACkB,CAAA;OAEN,CAAA;OAAE;OACrB,oBAAC,uBAAD;QAAuB,IAAG;QAAQ,WAAU;OAAU,CAAA;MACnD;;KAGP,oBAAC,KAAK,aAAN;MAAkB,WAAWA,sBAAO;MACjC,UAAA;KACe,CAAA;KAClB,oBAAC,gBAAD,CAAiB,CAAA;IACG;;EACX,CAAA;CACV,CAAA;AAET,CAAC"}

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

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useLabelledBySectionHeading } from "../Section/context.mjs";
 import Table_module_default from "./Table.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -8,6 +9,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var Table = (props) => {
 	const { children, className, verticalAlign = "top", layout = "auto", minWidth, ...rest } = props;
+	const ariaLabelledBy = useLabelledBySectionHeading(rest);
 	const rootClassName = clsx(Table_module_default.table, verticalAlign !== "top" && Table_module_default[`vertical-align-${verticalAlign}`], Table_module_default[`layout-${layout}`], className);
 	return /* @__PURE__ */ jsx("div", {
 		className: Table_module_default.tableContainer,
@@ -17,6 +19,7 @@ var Table = (props) => {
 			children: /* @__PURE__ */ jsx(Aria.Table, {
 				className: rootClassName,
 				...rest,
+				"aria-labelledby": ariaLabelledBy,
 				children
 			})
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":["styles"],"sources":["../../../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Table.module.scss\";\n\nexport type TableProps = Omit<\n  Aria.TableProps,\n  \"render\" | \"className\" | \"style\"\n> & {\n  /** The vertical alignment of the table cells content. */\n  verticalAlign?: \"top\" | \"middle\";\n  /**\n   * The column-sizing algorithm of the table. Use \"fixed\" together with column\n   * widths to enforce exact widths. @default \"auto\"\n   */\n  layout?: \"auto\" | \"fixed\";\n  /**\n   * The minimum width of the table. Below this width the table scrolls\n   * horizontally instead of shrinking its columns.\n   */\n  minWidth?: number | string;\n  /** The elements class name. */\n  className?: string;\n};\n\n/** @flr-generate all */\nexport const Table: FC<TableProps> = (props) => {\n  const {\n    children,\n    className,\n    verticalAlign = \"top\",\n    layout = \"auto\",\n    minWidth,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.table,\n    verticalAlign !== \"top\" && styles[`vertical-align-${verticalAlign}`],\n    styles[`layout-${layout}`],\n    className,\n  );\n\n  return (\n    <div className={styles.tableContainer}>\n      <div className={styles.tableScrollArea} style={{ minWidth }}>\n        <Aria.Table className={rootClassName} {...rest}>\n          {children}\n        </Aria.Table>\n      </div>\n    </div>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;AA0BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EACJ,UACA,WACA,gBAAgB,OAChB,SAAS,QACT,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,OACP,kBAAkB,SAASA,qBAAO,kBAAkB,kBACpDA,qBAAO,UAAU,WACjB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAWA,qBAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,WAAWA,qBAAO;GAAiB,OAAO,EAAE,SAAS;GACxD,UAAA,oBAAC,KAAK,OAAN;IAAY,WAAW;IAAe,GAAI;IACvC;GACS,CAAA;EACT,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"Table.mjs","names":["styles"],"sources":["../../../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Table.module.scss\";\nimport { useLabelledBySectionHeading } from \"@/components/Section/context\";\n\nexport type TableProps = Omit<\n  Aria.TableProps,\n  \"render\" | \"className\" | \"style\"\n> & {\n  /** The vertical alignment of the table cells content. */\n  verticalAlign?: \"top\" | \"middle\";\n  /**\n   * The column-sizing algorithm of the table. Use \"fixed\" together with column\n   * widths to enforce exact widths. @default \"auto\"\n   */\n  layout?: \"auto\" | \"fixed\";\n  /**\n   * The minimum width of the table. Below this width the table scrolls\n   * horizontally instead of shrinking its columns.\n   */\n  minWidth?: number | string;\n  /** The elements class name. */\n  className?: string;\n};\n\n/** @flr-generate all */\nexport const Table: FC<TableProps> = (props) => {\n  const {\n    children,\n    className,\n    verticalAlign = \"top\",\n    layout = \"auto\",\n    minWidth,\n    ...rest\n  } = props;\n\n  const ariaLabelledBy = useLabelledBySectionHeading(rest);\n\n  const rootClassName = clsx(\n    styles.table,\n    verticalAlign !== \"top\" && styles[`vertical-align-${verticalAlign}`],\n    styles[`layout-${layout}`],\n    className,\n  );\n\n  return (\n    <div className={styles.tableContainer}>\n      <div className={styles.tableScrollArea} style={{ minWidth }}>\n        <Aria.Table\n          className={rootClassName}\n          {...rest}\n          aria-labelledby={ariaLabelledBy}\n        >\n          {children}\n        </Aria.Table>\n      </div>\n    </div>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;AA2BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EACJ,UACA,WACA,gBAAgB,OAChB,SAAS,QACT,UACA,GAAG,SACD;CAEJ,MAAM,iBAAiB,4BAA4B,IAAI;CAEvD,MAAM,gBAAgB,KACpBA,qBAAO,OACP,kBAAkB,SAASA,qBAAO,kBAAkB,kBACpDA,qBAAO,UAAU,WACjB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAWA,qBAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,WAAWA,qBAAO;GAAiB,OAAO,EAAE,SAAS;GACxD,UAAA,oBAAC,KAAK,OAAN;IACE,WAAW;IACX,GAAI;IACJ,mBAAiB;IAEhB;GACS,CAAA;EACT,CAAA;CACF,CAAA;AAET"}

package/dist/js/packages/components/src/components/Table/Table.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.module.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.tableContainer {\n  @include scrollbar.scrollbar;\n\n  width: 100%;\n  overflow-x: auto;\n}\n\n.tableScrollArea {\n  width: 100%;\n}\n\n.table {\n  border-radius: var(--table--corner-radius);\n  overflow: hidden;\n  width: 100%;\n  border-width: var(--table--border-width);\n  border-style: var(--table--border-style);\n  border-color: var(--table--border-color);\n  border-spacing: 0;\n  background-color: var(--table--background-color);\n\n  .column {\n    font-weight: var(--table--header-font-weight);\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .cell,\n  .column {\n    padding-inline: var(--table--padding-x);\n    padding-block: var(--table--padding-y);\n    text-align: start;\n    vertical-align: top;\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-width: 0;\n\n    // Cell content is the consumer's — a Flow icon or a raw `<svg>`.\n    // stylelint-disable-next-line selector-max-type -- consumer content\n    > svg {\n      vertical-align: bottom;\n    }\n\n    &.horizontal-align-center {\n      text-align: center;\n    }\n\n    &.horizontal-align-end {\n      text-align: end;\n    }\n  }\n\n  .header {\n    .column {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  :where(.body) {\n    :where(.row) {\n      &:where(:nth-of-type(odd):not(.footer)) {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) {\n        .cell {\n          border-block-end-width: var(--table--border-width);\n        }\n      }\n\n      &.footer .cell {\n        border-block-start-width: var(--table--border-width);\n      }\n    }\n  }\n\n  &.vertical-align-middle {\n    .cell,\n    .column {\n      vertical-align: middle;\n    }\n  }\n\n  &.layout-auto {\n    table-layout: auto;\n  }\n\n  &.layout-fixed {\n    table-layout: fixed;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Table.module.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.tableContainer {\n  @include scrollbar.scrollbar;\n\n  width: 100%;\n  overflow-x: auto;\n}\n\n.tableScrollArea {\n  width: 100%;\n}\n\n.table {\n  border-radius: var(--table--corner-radius);\n  overflow: hidden;\n  width: 100%;\n  border-width: var(--table--border-width);\n  border-style: var(--table--border-style);\n  border-color: var(--table--border-color);\n  border-spacing: 0;\n  background-color: var(--table--background-color);\n\n  .column {\n    font-weight: var(--table--header-font-weight);\n  }\n\n  .cell,\n  .column {\n    padding-inline: var(--table--padding-x);\n    padding-block: var(--table--padding-y);\n    text-align: start;\n    vertical-align: top;\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-width: 0;\n\n    // Cell content is the consumer's — a Flow icon or a raw `<svg>`.\n    // stylelint-disable-next-line selector-max-type -- consumer content\n    > svg {\n      vertical-align: bottom;\n    }\n\n    &.horizontal-align-center {\n      text-align: center;\n    }\n\n    &.horizontal-align-end {\n      text-align: end;\n    }\n  }\n\n  .header {\n    .column {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    // Hide only an all-empty header: a hidden `<th>` shifts the next headings.\n    &:not(:has(.column:not(:empty))) {\n      display: none;\n    }\n  }\n\n  :where(.body) {\n    :where(.row) {\n      &:where(:nth-of-type(odd):not(.footer)) {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) {\n        .cell {\n          border-block-end-width: var(--table--border-width);\n        }\n      }\n\n      &.footer .cell {\n        border-block-start-width: var(--table--border-width);\n      }\n    }\n  }\n\n  &.vertical-align-middle {\n    .cell,\n    .column {\n      vertical-align: middle;\n    }\n  }\n\n  &.layout-auto {\n    table-layout: auto;\n  }\n\n  &.layout-fixed {\n    table-layout: fixed;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Table/components/TableCell/TableCell.mjs

@@ -3,7 +3,6 @@
 import { SkeletonText } from "../../../SkeletonText/SkeletonText.mjs";
 import { SkeletonRawText } from "../../../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Table_module_default from "../../Table.module.mjs";
-import { TableColumn } from "../TableColumn/TableColumn.mjs";
 import clsx from "clsx";
 import { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -12,20 +11,14 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var TableCell = (props) => {
 	const { children, className, rowHeader, horizontalAlign = "start", ...rest } = props;
-	const rootClassName = clsx(Table_module_default.cell, horizontalAlign !== "start" && Table_module_default[`horizontal-align-${horizontalAlign}`], className);
-	const content = /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx(SkeletonText, { width: "100px" }),
-		children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
-	});
-	if (rowHeader) return /* @__PURE__ */ jsx(TableColumn, {
-		className: rootClassName,
-		...rest,
-		children: content
-	});
+	const rootClassName = clsx(Table_module_default.cell, rowHeader && Table_module_default.column, horizontalAlign !== "start" && Table_module_default[`horizontal-align-${horizontalAlign}`], className);
 	return /* @__PURE__ */ jsx(Aria.Cell, {
 		className: rootClassName,
 		...rest,
-		children: content
+		children: /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(SkeletonText, { width: "100px" }),
+			children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
+		})
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/Table/components/TableCell/TableCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table/components/TableColumn/TableColumn\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableCellProps\n  extends\n    Omit<Aria.CellProps, \"children\" | \"style\" | \"render\">,\n    PropsWithChildren {\n  /** Use cell as row header */\n  rowHeader?: boolean;\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const content = (\n    <Suspense fallback={<SkeletonText width=\"100px\" />}>\n      <SkeletonRawText>{children}</SkeletonRawText>\n    </Suspense>\n  );\n\n  if (rowHeader) {\n    return (\n      <TableColumn className={rootClassName} {...rest}>\n        {content}\n      </TableColumn>\n    );\n  }\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      {content}\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,UACA,WACA,WACA,kBAAkB,SAClB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,MACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,UACJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,cAAD,EAAc,OAAM,QAAS,CAAA;EAC/C,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;CACpC,CAAA;CAGZ,IAAI,WACF,OACE,oBAAC,aAAD;EAAa,WAAW;EAAe,GAAI;EACxC,UAAA;CACU,CAAA;CAIjB,OACE,oBAAC,KAAK,MAAN;EAAW,WAAW;EAAe,GAAI;EACtC,UAAA;CACQ,CAAA;AAEf"}
+{"version":3,"file":"TableCell.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableCellProps\n  extends\n    Omit<Aria.CellProps, \"children\" | \"style\" | \"render\">,\n    PropsWithChildren {\n  /**\n   * Styles the cell as a row header. Its semantics come from the column: the\n   * first column, or the one with `isRowHeader`.\n   */\n  rowHeader?: boolean;\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    rowHeader && styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      <Suspense fallback={<SkeletonText width=\"100px\" />}>\n        <SkeletonRawText>{children}</SkeletonRawText>\n      </Suspense>\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,UACA,WACA,WACA,kBAAkB,SAClB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,MACP,aAAaA,qBAAO,QACpB,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAW,WAAW;EAAe,GAAI;EACvC,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,cAAD,EAAc,OAAM,QAAS,CAAA;GAC/C,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;EACpC,CAAA;CACD,CAAA;AAEf"}

package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs

@@ -3,17 +3,19 @@
 import { PropsContextProvider } from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
 import { SkeletonRawText } from "../../../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Table_module_default from "../../Table.module.mjs";
+import { useIsFirstColumn } from "../TableHeader/context.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/Table/components/TableColumn/TableColumn.tsx
 /** @flr-generate all */
 var TableColumn = (props) => {
-	const { children, className, horizontalAlign = "start", width, minWidth, ...rest } = props;
+	const { children, className, horizontalAlign = "start", width, minWidth, isRowHeader, ...rest } = props;
+	const isFirstColumn = useIsFirstColumn();
 	const rootClassName = clsx(Table_module_default.column, horizontalAlign !== "start" && Table_module_default[`horizontal-align-${horizontalAlign}`], className);
 	const propsContext = { Checkbox: { slot: null } };
 	return /* @__PURE__ */ jsx(Aria.Column, {
-		isRowHeader: true,
+		isRowHeader: isRowHeader ?? isFirstColumn ?? true,
 		className: rootClassName,
 		...rest,
 		style: {

package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumn.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableColumnProps\n  extends\n    Omit<\n      Aria.ColumnProps,\n      \"children\" | \"width\" | \"minWidth\" | \"maxWidth\" | \"style\"\n    >,\n    PropsWithChildren {\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n  /** The width of the column. */\n  width?: number | string;\n  /** The minimum width of the column. */\n  minWidth?: number | string;\n}\n\n/** @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n  const {\n    children,\n    className,\n    horizontalAlign = \"start\",\n    width,\n    minWidth,\n    ...rest\n  } = props;\n  const rootClassName = clsx(\n    styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n  return (\n    <Aria.Column\n      isRowHeader\n      className={rootClassName}\n      {...rest}\n      style={{ width, minWidth }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <SkeletonRawText>{children}</SkeletonRawText>\n      </PropsContextProvider>\n    </Aria.Column>\n  );\n};\n\nexport default TableColumn;\n"],"mappings":";;;;;;;;;;AAuBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,UACA,WACA,kBAAkB,SAClB,OACA,UACA,GAAG,SACD;CACJ,MAAM,gBAAgB,KACpBA,qBAAO,QACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,eAA6B,EAAE,UAAU,EAAE,MAAM,KAAK,EAAE;CAE9D,OACE,oBAAC,KAAK,QAAN;EACE,aAAA;EACA,WAAW;EACX,GAAI;EACJ,OAAO;GAAE;GAAO;EAAS;EAEzB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;EACxB,CAAA;CACX,CAAA;AAEjB"}
+{"version":3,"file":"TableColumn.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\nimport { useIsFirstColumn } from \"@/components/Table/components/TableHeader/context\";\n\nexport interface TableColumnProps\n  extends\n    Omit<\n      Aria.ColumnProps,\n      \"children\" | \"width\" | \"minWidth\" | \"maxWidth\" | \"style\"\n    >,\n    PropsWithChildren {\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n  /** The width of the column. */\n  width?: number | string;\n  /** The minimum width of the column. */\n  minWidth?: number | string;\n}\n\n/** @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n  const {\n    children,\n    className,\n    horizontalAlign = \"start\",\n    width,\n    minWidth,\n    isRowHeader,\n    ...rest\n  } = props;\n  const isFirstColumn = useIsFirstColumn();\n\n  const rootClassName = clsx(\n    styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n  return (\n    <Aria.Column\n      isRowHeader={isRowHeader ?? isFirstColumn ?? true}\n      className={rootClassName}\n      {...rest}\n      style={{ width, minWidth }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <SkeletonRawText>{children}</SkeletonRawText>\n      </PropsContextProvider>\n    </Aria.Column>\n  );\n};\n\nexport default TableColumn;\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,UACA,WACA,kBAAkB,SAClB,OACA,UACA,aACA,GAAG,SACD;CACJ,MAAM,gBAAgB,iBAAiB;CAEvC,MAAM,gBAAgB,KACpBA,qBAAO,QACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,eAA6B,EAAE,UAAU,EAAE,MAAM,KAAK,EAAE;CAE9D,OACE,oBAAC,KAAK,QAAN;EACE,aAAa,eAAe,iBAAiB;EAC7C,WAAW;EACX,GAAI;EACJ,OAAO;GAAE;GAAO;EAAS;EAEzB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;EACxB,CAAA;CACX,CAAA;AAEjB"}

package/dist/js/packages/components/src/components/Table/components/TableHeader/TableHeader.mjs

@@ -1,7 +1,9 @@
 "use client"
 /* */
 import Table_module_default from "../../Table.module.mjs";
+import { IsFirstColumnContext } from "./context.mjs";
 import clsx from "clsx";
+import { Children } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/Table/components/TableHeader/TableHeader.tsx
@@ -9,10 +11,14 @@ import * as Aria from "react-aria-components";
 var TableHeader = (props) => {
 	const { children, className, ...rest } = props;
 	const rootClassName = clsx(Table_module_default.header, className);
+	const columns = typeof children === "function" ? children : Children.toArray(children).map((column, index) => /* @__PURE__ */ jsx(IsFirstColumnContext, {
+		value: index === 0,
+		children: column
+	}, index));
 	return /* @__PURE__ */ jsx(Aria.TableHeader, {
 		className: rootClassName,
 		...rest,
-		children
+		children: columns
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/Table/components/TableHeader/TableHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\n\nexport type TableHeaderProps = Aria.TableHeaderProps<never>;\n\n/** @flr-generate all */\nexport const TableHeader: FC<TableHeaderProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.header, className);\n\n  return (\n    <Aria.TableHeader className={rootClassName} {...rest}>\n      {children}\n    </Aria.TableHeader>\n  );\n};\n\nexport default TableHeader;\n"],"mappings":";;;;;;;;AAQA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,qBAAO,QAAQ,SAAS;CAEnD,OACE,oBAAC,KAAK,aAAN;EAAkB,WAAW;EAAe,GAAI;EAC7C;CACe,CAAA;AAEtB"}
+{"version":3,"file":"TableHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import { Children, type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { IsFirstColumnContext } from \"./context\";\n\nexport type TableHeaderProps = Aria.TableHeaderProps<never>;\n\n/** @flr-generate all */\nexport const TableHeader: FC<TableHeaderProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.header, className);\n\n  // Assumes the first child renders a column; a wrapper that renders nothing\n  // leaves the table without row header column, and react-aria throws.\n  const columns =\n    typeof children === \"function\"\n      ? children\n      : Children.toArray(children).map((column, index) => (\n          <IsFirstColumnContext key={index} value={index === 0}>\n            {column}\n          </IsFirstColumnContext>\n        ));\n\n  return (\n    <Aria.TableHeader className={rootClassName} {...rest}>\n      {columns}\n    </Aria.TableHeader>\n  );\n};\n\nexport default TableHeader;\n"],"mappings":";;;;;;;;;;AASA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,gBAAgB,KAAKA,qBAAO,QAAQ,SAAS;CAInD,MAAM,UACJ,OAAO,aAAa,aAChB,WACA,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,QAAQ,UACtC,oBAAC,sBAAD;EAAkC,OAAO,UAAU;EAChD,UAAA;CACmB,GAFK,KAEL,CACvB;CAEP,OACE,oBAAC,KAAK,aAAN;EAAkB,WAAW;EAAe,GAAI;EAC7C,UAAA;CACe,CAAA;AAEtB"}

package/dist/js/packages/components/src/components/Table/components/TableHeader/context.mjs

@@ -0,0 +1,14 @@
+"use client"
+/* */
+import { createContext, useContext } from "react";
+//#region src/components/Table/components/TableHeader/context.ts
+/**
+* Whether a column is the first of its `TableHeader`. Undefined outside a
+* header that can tell, e.g. with dynamic `columns`.
+*/
+var IsFirstColumnContext = createContext(void 0);
+var useIsFirstColumn = () => useContext(IsFirstColumnContext);
+//#endregion
+export { IsFirstColumnContext, useIsFirstColumn };
+
+//# sourceMappingURL=context.mjs.map

package/dist/js/packages/components/src/components/Table/components/TableHeader/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../../../src/components/Table/components/TableHeader/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n/**\n * Whether a column is the first of its `TableHeader`. Undefined outside a\n * header that can tell, e.g. with dynamic `columns`.\n */\nexport const IsFirstColumnContext = createContext<boolean | undefined>(\n  undefined,\n);\n\nexport const useIsFirstColumn = () => useContext(IsFirstColumnContext);\n"],"mappings":";;;;;;;;AAMA,IAAa,uBAAuB,cAClC,KAAA,CACF;AAEA,IAAa,yBAAyB,WAAW,oBAAoB"}

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

@@ -18,15 +18,16 @@ var Tabs = flowComponent("Tabs", (props) => {
 	const [selectedKeyState, setSelectedKeyState] = useState(defaultSelectedKey);
 	const selectedKey = selectedKeyProps ?? selectedKeyState ?? null;
 	const isSsr = useIsSSR();
+	const handleSelectionChange = (key) => {
+		setSelectedKeyState(key);
+		onSelectionChange?.(key);
+	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsxs(Aria.Tabs, {
 		slot: null,
 		className: rootClassName,
 		...rest,
 		selectedKey,
-		onSelectionChange: (key) => {
-			setSelectedKeyState(key);
-			if (onSelectionChange) onSelectionChange(key);
-		},
+		onSelectionChange: handleSelectionChange,
 		disabledKeys,
 		ref,
 		children: [
@@ -34,10 +35,7 @@ var Tabs = flowComponent("Tabs", (props) => {
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledby,
 				selection: selectedKey,
-				onContextMenuSelectionChange: (key) => {
-					setSelectedKeyState(key);
-					if (onSelectionChange) onSelectionChange(key);
-				},
+				onContextMenuSelectionChange: handleSelectionChange,
 				disabledKeys
 			}),
 			/* @__PURE__ */ jsx(UiComponentTunnelExit, {

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabList } from \"@/components/Tabs/components/TabList\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Tabs.module.scss\";\nimport { FallbackTab } from \"@/components/Tabs/components/FallbackTab\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface TabsProps\n  extends\n    Omit<Aria.TabsProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  /**\n   * An accessible name for the tab list. `Tabs` has no `Label` slot, so this is\n   * how the group is named when the surrounding heading does not already do\n   * it.\n   */\n  \"aria-label\"?: string;\n  /** The id of an element that names the tab list. */\n  \"aria-labelledby\"?: string;\n  /**\n   * The view rendered when the selected tab does not exist. Defaults to a\n   * built-in IllustratedMessage.\n   */\n  tabNotFoundView?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const Tabs = flowComponent(\"Tabs\", (props) => {\n  const {\n    children,\n    className,\n    defaultSelectedKey,\n    selectedKey: selectedKeyProps,\n    disabledKeys,\n    ref,\n    onSelectionChange,\n    tabNotFoundView,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(styles.tabs, className);\n  const [selectedKeyState, setSelectedKeyState] = useState<\n    Aria.Key | undefined\n  >(defaultSelectedKey);\n\n  /*\n   * `null`, not `undefined`, keeps `Aria.Tabs` controlled while nothing is\n   * selected yet — see the controlled-from-the-first-render convention in\n   * AGENTS.md. `Aria.TabsProps` narrows `selectedKey` to `Key`, hence the cast\n   * below.\n   */\n  const selectedKey = selectedKeyProps ?? selectedKeyState ?? null;\n\n  const isSsr = useIsSSR();\n\n  return (\n    <>\n      {children}\n      <Aria.Tabs\n        slot={null}\n        className={rootClassName}\n        {...rest}\n        selectedKey={selectedKey as Aria.Key | undefined}\n        onSelectionChange={(key) => {\n          setSelectedKeyState(key);\n          if (onSelectionChange) {\n            onSelectionChange(key);\n          }\n        }}\n        disabledKeys={disabledKeys}\n        ref={ref}\n      >\n        <TabList\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          selection={selectedKey}\n          onContextMenuSelectionChange={(key) => {\n            setSelectedKeyState(key);\n            if (onSelectionChange) {\n              onSelectionChange(key);\n            }\n          }}\n          disabledKeys={disabledKeys}\n        />\n        <UiComponentTunnelExit id=\"Panels\" component=\"Tabs\" />\n        {!isSsr && <FallbackTab tabNotFoundView={tabNotFoundView} />}\n      </Aria.Tabs>\n    </>\n  );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBACA,aAAa,kBACb,cACA,KACA,mBACA,iBACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KAAKA,oBAAO,MAAM,SAAS;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,kBAAkB;CAQpB,MAAM,cAAc,oBAAoB,oBAAoB;CAE5D,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAAC,YAAA,EAAA,UAAA,CACG,UACD,qBAAC,KAAK,MAAN;EACE,MAAM;EACN,WAAW;EACX,GAAI;EACS;EACb,oBAAoB,QAAQ;GAC1B,oBAAoB,GAAG;GACvB,IAAI,mBACF,kBAAkB,GAAG;EAEzB;EACc;EACT;EAZP,UAAA;GAcE,oBAAC,SAAD;IACE,cAAY;IACZ,mBAAiB;IACjB,WAAW;IACX,+BAA+B,QAAQ;KACrC,oBAAoB,GAAG;KACvB,IAAI,mBACF,kBAAkB,GAAG;IAEzB;IACc;GACf,CAAA;GACD,oBAAC,uBAAD;IAAuB,IAAG;IAAS,WAAU;GAAQ,CAAA;GACpD,CAAC,SAAS,oBAAC,aAAD,EAA8B,gBAAkB,CAAA;EAClD;CACX,CAAA,CAAA,EAAA,CAAA;AAEN,CAAC"}
+{"version":3,"file":"Tabs.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabList } from \"@/components/Tabs/components/TabList\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Tabs.module.scss\";\nimport { FallbackTab } from \"@/components/Tabs/components/FallbackTab\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface TabsProps\n  extends\n    Omit<Aria.TabsProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  /**\n   * An accessible name for the tab list. `Tabs` has no `Label` slot, so this is\n   * how the group is named when the surrounding heading does not already do\n   * it.\n   */\n  \"aria-label\"?: string;\n  /** The id of an element that names the tab list. */\n  \"aria-labelledby\"?: string;\n  /**\n   * The view rendered when the selected tab does not exist. Defaults to a\n   * built-in IllustratedMessage.\n   */\n  tabNotFoundView?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const Tabs = flowComponent(\"Tabs\", (props) => {\n  const {\n    children,\n    className,\n    defaultSelectedKey,\n    selectedKey: selectedKeyProps,\n    disabledKeys,\n    ref,\n    onSelectionChange,\n    tabNotFoundView,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(styles.tabs, className);\n  const [selectedKeyState, setSelectedKeyState] = useState<\n    Aria.Key | undefined\n  >(defaultSelectedKey);\n\n  /*\n   * `null`, not `undefined`, keeps `Aria.Tabs` controlled while nothing is\n   * selected yet — see the controlled-from-the-first-render convention in\n   * AGENTS.md. `Aria.TabsProps` narrows `selectedKey` to `Key`, hence the cast\n   * below.\n   */\n  const selectedKey = selectedKeyProps ?? selectedKeyState ?? null;\n\n  const isSsr = useIsSSR();\n\n  const handleSelectionChange = (key: Aria.Key) => {\n    setSelectedKeyState(key);\n    onSelectionChange?.(key);\n  };\n\n  return (\n    <>\n      {children}\n      <Aria.Tabs\n        slot={null}\n        className={rootClassName}\n        {...rest}\n        selectedKey={selectedKey as Aria.Key | undefined}\n        onSelectionChange={handleSelectionChange}\n        disabledKeys={disabledKeys}\n        ref={ref}\n      >\n        <TabList\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          selection={selectedKey}\n          onContextMenuSelectionChange={handleSelectionChange}\n          disabledKeys={disabledKeys}\n        />\n        <UiComponentTunnelExit id=\"Panels\" component=\"Tabs\" />\n        {!isSsr && <FallbackTab tabNotFoundView={tabNotFoundView} />}\n      </Aria.Tabs>\n    </>\n  );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBACA,aAAa,kBACb,cACA,KACA,mBACA,iBACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KAAKA,oBAAO,MAAM,SAAS;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,kBAAkB;CAQpB,MAAM,cAAc,oBAAoB,oBAAoB;CAE5D,MAAM,QAAQ,SAAS;CAEvB,MAAM,yBAAyB,QAAkB;EAC/C,oBAAoB,GAAG;EACvB,oBAAoB,GAAG;CACzB;CAEA,OACE,qBAAAC,YAAA,EAAA,UAAA,CACG,UACD,qBAAC,KAAK,MAAN;EACE,MAAM;EACN,WAAW;EACX,GAAI;EACS;EACb,mBAAmB;EACL;EACT;EAPP,UAAA;GASE,oBAAC,SAAD;IACE,cAAY;IACZ,mBAAiB;IACjB,WAAW;IACX,8BAA8B;IAChB;GACf,CAAA;GACD,oBAAC,uBAAD;IAAuB,IAAG;IAAS,WAAU;GAAQ,CAAA;GACpD,CAAC,SAAS,oBAAC,aAAD,EAA8B,gBAAkB,CAAA;EAClD;CACX,CAAA,CAAA,EAAA,CAAA;AAEN,CAAC"}

package/dist/js/packages/components/src/components/Tabs/Tabs.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.module.mjs","names":[],"sources":["../../../../../../../src/components/Tabs/Tabs.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabs {\n  display: flex;\n  flex-direction: column;\n\n  .list {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .fallbackTab {\n    display: none;\n  }\n\n  &:not(:has(.tabPanel[id])) {\n    .fallbackTab {\n      display: flex;\n    }\n  }\n}\n\n.tabPanel {\n  opacity: 0;\n  height: 0;\n  overflow: hidden;\n\n  &[id] {\n    padding-top: var(--section--spacing);\n    opacity: 1;\n    height: auto;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tabs.module.mjs","names":[],"sources":["../../../../../../../src/components/Tabs/Tabs.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabs {\n  display: flex;\n  flex-direction: column;\n\n  .list {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .fallbackTab {\n    display: none;\n  }\n\n  &:not(:has(.tabPanel[id])) {\n    .fallbackTab {\n      display: flex;\n    }\n  }\n}\n\n.tabPanel {\n  opacity: 0;\n  height: 0;\n  overflow: hidden;\n\n  &[id] {\n    padding-top: var(--section--spacing);\n    opacity: 1;\n    height: auto;\n\n    /* Only inactive panels clip, so focus rings and hover backgrounds can\n       reach past the panel. */\n    overflow: visible;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n  position: relative;\n  padding-block: var(--tabs--padding-y);\n  padding-inline: var(--tabs--padding-x);\n  color: var(--tabs--color--default);\n  cursor: default;\n  white-space: nowrap;\n  transition-property: background-color;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  column-gap: var(--tabs--spacing);\n  border-radius: var(--tabs--corner-radius);\n\n  @include focus.focus;\n\n  & {\n    outline-offset: calc(var(--size-px--xs) * -1);\n  }\n\n  /* The active indicator is painted below the titles (it precedes them in the\n     tab list), so the selected title must not paint a background over it. */\n  &:not([data-selected]) {\n    &:hover {\n      background-color: var(--tabs--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tabs--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--tabs--color--disabled);\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tabs--spacing);\n  }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n  font-weight: var(--tabs--font-weight--selected);\n}\n\n/* SkeletonMode: no tab shows as selected */\n.tabTitle.skeleton[data-selected] {\n  font-weight: inherit;\n}\n\n.menuItem {\n  // The tab's children are the consumer's; a `Text` child renders this span.\n  // stylelint-disable-next-line selector-max-type -- consumer children\n  > span {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    column-gap: var(--tabs--spacing);\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n  position: relative;\n  padding-block: var(--tabs--padding-y);\n  padding-inline: var(--tabs--padding-x);\n  color: var(--tabs--color--default);\n  cursor: default;\n  white-space: nowrap;\n  transition-property: background-color;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  column-gap: var(--tabs--spacing);\n  border-radius: var(--tabs--corner-radius);\n\n  @include focus.focus;\n\n  & {\n    outline-offset: calc(var(--size-px--xs) * -1);\n  }\n\n  /* The active indicator is painted below the titles (it precedes them in the\n     tab list), so the selected title must not paint a background over it. */\n  &:not([data-selected]) {\n    &:hover {\n      background-color: var(--tabs--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tabs--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--tabs--color--disabled);\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tabs--spacing);\n  }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n  font-weight: var(--tabs--font-weight--selected);\n}\n\n/* SkeletonMode: no tab shows as selected */\n.tabTitle.skeleton[data-selected] {\n  font-weight: inherit;\n}\n\n.menuItem {\n  // The tab's children are the consumer's. Badges render a span, too.\n  > :global(.flow--text) {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    column-gap: var(--tabs--spacing);\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Text/Text.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n  color: inherit;\n  text-wrap-style: pretty;\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--text--color--#{$color});\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* `Text` styles raw HTML that its children bring along — `Markdown` nests\n     bare `<ul>`/`<ol>`/`<blockquote>` inside a `Text`, and consumers write the\n     same markup by hand. None of it is authored here, so none of it is classed. */\n  // stylelint-disable selector-max-type -- children's raw HTML, see above\n  ul,\n  ol {\n    padding-inline-start: var(--text--list-padding);\n  }\n\n  ul {\n    li {\n      list-style: initial;\n    }\n  }\n\n  small {\n    font-size: var(--font-size-text--s);\n  }\n\n  blockquote {\n    border-inline-start: var(--text--blockquote-border-width)\n      var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n    padding-inline-start: var(--text--blockquote-padding);\n  }\n\n  .icon {\n    vertical-align: text-bottom;\n  }\n\n  small {\n    .icon {\n      width: var(--line-height-s);\n      height: var(--line-height-s);\n    }\n  }\n  // stylelint-enable selector-max-type\n\n  &:where(.align-start) {\n    text-align: start;\n  }\n\n  &:where(.align-center) {\n    text-align: center;\n  }\n\n  &:where(.align-end) {\n    text-align: end;\n  }\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n\n  &:where(.wrap-pretty) {\n    text-wrap: pretty;\n  }\n\n  &:where(.no-ligatures) {\n    font-variant-ligatures: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n  color: inherit;\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--text--color--#{$color});\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* `Text` styles raw HTML that its children bring along — `Markdown` nests\n     bare `<ul>`/`<ol>`/`<blockquote>` inside a `Text`, and consumers write the\n     same markup by hand. None of it is authored here, so none of it is classed. */\n  // stylelint-disable selector-max-type -- children's raw HTML, see above\n  ul,\n  ol {\n    padding-inline-start: var(--text--list-padding);\n  }\n\n  ul {\n    li {\n      list-style: initial;\n    }\n  }\n\n  small {\n    font-size: var(--font-size-text--s);\n  }\n\n  blockquote {\n    border-inline-start: var(--text--blockquote-border-width)\n      var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n    padding-inline-start: var(--text--blockquote-padding);\n  }\n\n  .icon {\n    vertical-align: text-bottom;\n  }\n\n  small {\n    .icon {\n      width: var(--line-height-s);\n      height: var(--line-height-s);\n    }\n  }\n  // stylelint-enable selector-max-type\n\n  &:where(.align-start) {\n    text-align: start;\n  }\n\n  &:where(.align-center) {\n    text-align: center;\n  }\n\n  &:where(.align-end) {\n    text-align: end;\n  }\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n\n  &:where(.wrap-pretty) {\n    text-wrap: pretty;\n  }\n\n  &:where(.no-ligatures) {\n    font-variant-ligatures: none;\n  }\n}\n"],"mappings":""}

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

@@ -52,6 +52,16 @@ var TextField = flowComponent("TextField", (props) => {
 		count: charactersCount,
 		maxCount: props.maxLength ?? 0
 	});
+	const isPasswordHidden = type === "password";
+	const togglePasswordVisibility = () => setType(isPasswordHidden ? "text" : "password");
+	const passwordVisibilityButton = /* @__PURE__ */ jsx(Button, {
+		color: "secondary",
+		variant: "plain",
+		className: TextField_module_default.button,
+		onPress: togglePasswordVisibility,
+		"aria-label": translation.format(isPasswordHidden ? "password.show" : "password.hide"),
+		children: isPasswordHidden ? /* @__PURE__ */ jsx(IconShow, {}) : /* @__PURE__ */ jsx(IconHide, {})
+	});
 	return /* @__PURE__ */ jsx(Aria.TextField, {
 		...rest,
 		...controlProps,
@@ -76,14 +86,7 @@ var TextField = flowComponent("TextField", (props) => {
 							id: "button",
 							component: "TextField"
 						}),
-						typeFromProps === "password" && /* @__PURE__ */ jsx(Button, {
-							color: "secondary",
-							variant: "plain",
-							className: TextField_module_default.button,
-							onPress: () => setType(type === "password" ? "text" : "password"),
-							"aria-label": translation.format(`password.${type === "password" ? "show" : "hide"}`),
-							children: type === "password" ? /* @__PURE__ */ jsx(IconShow, {}) : /* @__PURE__ */ jsx(IconHide, {})
-						})
+						typeFromProps === "password" && passwordVisibilityButton
 					]
 				}),
 				showCharacterCount && /* @__PURE__ */ jsx(FieldDescription, { children: charactersCountDescription })

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","names":["styles","locales"],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"TextField\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    CopyButton: {\n      className: styles.button,\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n  const charactersCountDescription = translation.format(\"characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          {children}\n          <div className={styles.inputContainer}>\n            <Aria.Input\n              form={form}\n              placeholder={placeholder}\n              className={styles.input}\n              ref={ref}\n            />\n            <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n            {typeFromProps === \"password\" && (\n              <Button\n                color=\"secondary\"\n                variant=\"plain\"\n                className={styles.button}\n                onPress={() =>\n                  setType(type === \"password\" ? \"text\" : \"password\")\n                }\n                aria-label={translation.format(\n                  `password.${type === \"password\" ? \"show\" : \"hide\"}`,\n                )}\n              >\n                {type === \"password\" ? <IconShow /> : <IconHide />}\n              </Button>\n            )}\n          </div>\n          {showCharacterCount && (\n            <FieldDescription>{charactersCountDescription}</FieldDescription>\n          )}\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAE9C,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAWA,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,YAAY;GACV,WAAWA,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,UACF,SAAS,CAAC;CAEd;CAEA,MAAM,cAAc,4BAA4BC,kBAAS,WAAW;CAEpE,MAAM,6BAA6B,YAAY,OAAO,cAAc;EAClE,OAAO;EACP,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;EAEN,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAWD,yBAAO;KAAvB,UAAA;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAWA,yBAAO;OACb;MACN,CAAA;MACD,oBAAC,uBAAD;OAAuB,IAAG;OAAS,WAAU;MAAa,CAAA;MACzD,kBAAkB,cACjB,oBAAC,QAAD;OACE,OAAM;OACN,SAAQ;OACR,WAAWA,yBAAO;OAClB,eACE,QAAQ,SAAS,aAAa,SAAS,UAAU;OAEnD,cAAY,YAAY,OACtB,YAAY,SAAS,aAAa,SAAS,QAC7C;OAEC,UAAA,SAAS,aAAa,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;MAC3C,CAAA;KAEP;;IACJ,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;GAE1C,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACR,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"TextField.mjs","names":["styles","locales"],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"TextField\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    CopyButton: {\n      className: styles.button,\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n  const charactersCountDescription = translation.format(\"characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  const isPasswordHidden = type === \"password\";\n\n  const togglePasswordVisibility = () =>\n    setType(isPasswordHidden ? \"text\" : \"password\");\n\n  const passwordVisibilityButton = (\n    <Button\n      color=\"secondary\"\n      variant=\"plain\"\n      className={styles.button}\n      onPress={togglePasswordVisibility}\n      aria-label={translation.format(\n        isPasswordHidden ? \"password.show\" : \"password.hide\",\n      )}\n    >\n      {isPasswordHidden ? <IconShow /> : <IconHide />}\n    </Button>\n  );\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          {children}\n          <div className={styles.inputContainer}>\n            <Aria.Input\n              form={form}\n              placeholder={placeholder}\n              className={styles.input}\n              ref={ref}\n            />\n            <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n            {typeFromProps === \"password\" && passwordVisibilityButton}\n          </div>\n          {showCharacterCount && (\n            <FieldDescription>{charactersCountDescription}</FieldDescription>\n          )}\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAE9C,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAWA,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,YAAY;GACV,WAAWA,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,UACF,SAAS,CAAC;CAEd;CAEA,MAAM,cAAc,4BAA4BC,kBAAS,WAAW;CAEpE,MAAM,6BAA6B,YAAY,OAAO,cAAc;EAClE,OAAO;EACP,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,MAAM,mBAAmB,SAAS;CAElC,MAAM,iCACJ,QAAQ,mBAAmB,SAAS,UAAU;CAEhD,MAAM,2BACJ,oBAAC,QAAD;EACE,OAAM;EACN,SAAQ;EACR,WAAWD,yBAAO;EAClB,SAAS;EACT,cAAY,YAAY,OACtB,mBAAmB,kBAAkB,eACvC;EAEC,UAAA,mBAAmB,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACxC,CAAA;CAGV,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;EAEN,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAWA,yBAAO;KAAvB,UAAA;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAWA,yBAAO;OACb;MACN,CAAA;MACD,oBAAC,uBAAD;OAAuB,IAAG;OAAS,WAAU;MAAa,CAAA;MACzD,kBAAkB,cAAc;KAC9B;;IACJ,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;GAE1C,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACR,CAAA;AAEpB,CAAC"}

package/dist/js/packages/components/src/components/TranslationProvider/useLocalizedStringFormatter.mjs

@@ -13,6 +13,20 @@ var pickComponentTranslations = (componentName, data) => {
 		return pick(components ?? {}, [componentName])[componentName] ?? {};
 	});
 };
+var compiledMessages = /* @__PURE__ */ new Map();
+var getCompiledMessage = (message, locale) => {
+	let messagesOfLocale = compiledMessages.get(locale);
+	if (!messagesOfLocale) {
+		messagesOfLocale = /* @__PURE__ */ new Map();
+		compiledMessages.set(locale, messagesOfLocale);
+	}
+	let compiled = messagesOfLocale.get(message);
+	if (!compiled) {
+		compiled = new IntlMessageFormat(message, locale);
+		messagesOfLocale.set(message, compiled);
+	}
+	return compiled;
+};
 var useLocalizedStringFormatter = (strings, componentName) => {
 	const locale = useLanguage();
 	const { translations, translate } = useTranslationProvider();
@@ -31,8 +45,7 @@ var useLocalizedStringFormatter = (strings, componentName) => {
 			if (customTranslated !== void 0) return customTranslated;
 		}
 		const translationString = dictionary.getStringForLocale(key, locale);
-		const translationMessage = new IntlMessageFormat(translationString, locale);
-		return String(translationMessage.format(variables));
+		return String(getCompiledMessage(translationString, locale).format(variables));
 	}, [
 		translate,
 		locale,

package/dist/js/packages/components/src/components/TranslationProvider/useLocalizedStringFormatter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useLocalizedStringFormatter.mjs","names":[],"sources":["../../../../../../../src/components/TranslationProvider/useLocalizedStringFormatter.ts"],"sourcesContent":["import {\n  type Translations,\n  useTranslationProvider,\n} from \"@/components/TranslationProvider/TranslationProvider\";\nimport { mergeDeep } from \"remeda\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport { mapValues, pick } from \"remeda\";\nimport type {\n  Variables,\n  LocalizedStrings as LocalizedStringsIntl,\n} from \"@internationalized/string\";\nimport IntlMessageFormat from \"intl-messageformat\";\nimport { useLocalizedStringDictionary } from \"@react-aria/i18n\";\nimport { useCallback, useMemo } from \"react\";\nimport { useLanguage } from \"@/lib/hooks/useLanguage\";\n\nexport type LocalizedStrings = LocalizedStringsIntl<string, string>;\nexport type LocalizedComponentName = FlowComponentName | string;\n\nexport type TranslationFunction = (\n  key: string,\n  variables: Variables,\n  meta: {\n    component: string;\n    locale: string;\n  },\n) => string | undefined;\n\nconst pickComponentTranslations = (\n  componentName: LocalizedComponentName,\n  data?: Translations,\n) => {\n  if (!data) {\n    return {};\n  }\n\n  return mapValues(data, (components) => {\n    const picked = pick(components ?? {}, [componentName]);\n    return picked[componentName] ?? {};\n  });\n};\n\nexport const useLocalizedStringFormatter = (\n  strings: LocalizedStrings,\n  componentName: LocalizedComponentName,\n) => {\n  const locale = useLanguage();\n  const { translations, translate } = useTranslationProvider();\n\n  const mergedStrings = useMemo(\n    () =>\n      mergeDeep(\n        strings,\n        pickComponentTranslations(componentName, translations),\n      ),\n    [strings, translations, componentName],\n  );\n\n  const dictionary = useLocalizedStringDictionary(mergedStrings, componentName);\n  const formatFunction = useCallback(\n    (key: string, variables?: Variables): string => {\n      if (translate) {\n        const customTranslated = translate(key, variables, {\n          component: componentName,\n          locale,\n        });\n\n        if (customTranslated !== undefined) {\n          return customTranslated;\n        }\n      }\n\n      const translationString = dictionary.getStringForLocale(key, locale);\n      const translationMessage = new IntlMessageFormat(\n        translationString,\n        locale,\n      );\n\n      return String(translationMessage.format(variables));\n    },\n    [translate, locale, componentName, dictionary],\n  );\n\n  return useMemo(() => ({ format: formatFunction }), [formatFunction]);\n};\n"],"mappings":";;;;;;;;;AA4BA,IAAM,6BACJ,eACA,SACG;CACH,IAAI,CAAC,MACH,OAAO,CAAC;CAGV,OAAO,UAAU,OAAO,eAAe;EAErC,OADe,KAAK,cAAc,CAAC,GAAG,CAAC,aAAa,CAC7C,CAAA,CAAO,kBAAkB,CAAC;CACnC,CAAC;AACH;AAEA,IAAa,+BACX,SACA,kBACG;CACH,MAAM,SAAS,YAAY;CAC3B,MAAM,EAAE,cAAc,cAAc,uBAAuB;CAE3D,MAAM,gBAAgB,cAElB,UACE,SACA,0BAA0B,eAAe,YAAY,CACvD,GACF;EAAC;EAAS;EAAc;CAAa,CACvC;CAEA,MAAM,aAAa,6BAA6B,eAAe,aAAa;CAC5E,MAAM,iBAAiB,aACpB,KAAa,cAAkC;EAC9C,IAAI,WAAW;GACb,MAAM,mBAAmB,UAAU,KAAK,WAAW;IACjD,WAAW;IACX;GACF,CAAC;GAED,IAAI,qBAAqB,KAAA,GACvB,OAAO;EAEX;EAEA,MAAM,oBAAoB,WAAW,mBAAmB,KAAK,MAAM;EACnE,MAAM,qBAAqB,IAAI,kBAC7B,mBACA,MACF;EAEA,OAAO,OAAO,mBAAmB,OAAO,SAAS,CAAC;CACpD,GACA;EAAC;EAAW;EAAQ;EAAe;CAAU,CAC/C;CAEA,OAAO,eAAe,EAAE,QAAQ,eAAe,IAAI,CAAC,cAAc,CAAC;AACrE"}
+{"version":3,"file":"useLocalizedStringFormatter.mjs","names":[],"sources":["../../../../../../../src/components/TranslationProvider/useLocalizedStringFormatter.ts"],"sourcesContent":["import {\n  type Translations,\n  useTranslationProvider,\n} from \"@/components/TranslationProvider/TranslationProvider\";\nimport { mergeDeep } from \"remeda\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport { mapValues, pick } from \"remeda\";\nimport type {\n  Variables,\n  LocalizedStrings as LocalizedStringsIntl,\n} from \"@internationalized/string\";\nimport IntlMessageFormat from \"intl-messageformat\";\nimport { useLocalizedStringDictionary } from \"@react-aria/i18n\";\nimport { useCallback, useMemo } from \"react\";\nimport { useLanguage } from \"@/lib/hooks/useLanguage\";\n\nexport type LocalizedStrings = LocalizedStringsIntl<string, string>;\nexport type LocalizedComponentName = FlowComponentName | string;\n\nexport type TranslationFunction = (\n  key: string,\n  variables: Variables,\n  meta: {\n    component: string;\n    locale: string;\n  },\n) => string | undefined;\n\nconst pickComponentTranslations = (\n  componentName: LocalizedComponentName,\n  data?: Translations,\n) => {\n  if (!data) {\n    return {};\n  }\n\n  return mapValues(data, (components) => {\n    const picked = pick(components ?? {}, [componentName]);\n    return picked[componentName] ?? {};\n  });\n};\n\n// Compiling parses the message — do it once per locale and message.\nconst compiledMessages = new Map<string, Map<string, IntlMessageFormat>>();\n\nconst getCompiledMessage = (message: string, locale: string) => {\n  let messagesOfLocale = compiledMessages.get(locale);\n  if (!messagesOfLocale) {\n    messagesOfLocale = new Map();\n    compiledMessages.set(locale, messagesOfLocale);\n  }\n\n  let compiled = messagesOfLocale.get(message);\n  if (!compiled) {\n    compiled = new IntlMessageFormat(message, locale);\n    messagesOfLocale.set(message, compiled);\n  }\n\n  return compiled;\n};\n\nexport const useLocalizedStringFormatter = (\n  strings: LocalizedStrings,\n  componentName: LocalizedComponentName,\n) => {\n  const locale = useLanguage();\n  const { translations, translate } = useTranslationProvider();\n\n  const mergedStrings = useMemo(\n    () =>\n      mergeDeep(\n        strings,\n        pickComponentTranslations(componentName, translations),\n      ),\n    [strings, translations, componentName],\n  );\n\n  const dictionary = useLocalizedStringDictionary(mergedStrings, componentName);\n  const formatFunction = useCallback(\n    (key: string, variables?: Variables): string => {\n      if (translate) {\n        const customTranslated = translate(key, variables, {\n          component: componentName,\n          locale,\n        });\n\n        if (customTranslated !== undefined) {\n          return customTranslated;\n        }\n      }\n\n      const translationString = dictionary.getStringForLocale(key, locale);\n      return String(\n        getCompiledMessage(translationString, locale).format(variables),\n      );\n    },\n    [translate, locale, componentName, dictionary],\n  );\n\n  return useMemo(() => ({ format: formatFunction }), [formatFunction]);\n};\n"],"mappings":";;;;;;;;;AA4BA,IAAM,6BACJ,eACA,SACG;CACH,IAAI,CAAC,MACH,OAAO,CAAC;CAGV,OAAO,UAAU,OAAO,eAAe;EAErC,OADe,KAAK,cAAc,CAAC,GAAG,CAAC,aAAa,CAC7C,CAAA,CAAO,kBAAkB,CAAC;CACnC,CAAC;AACH;AAGA,IAAM,mCAAmB,IAAI,IAA4C;AAEzE,IAAM,sBAAsB,SAAiB,WAAmB;CAC9D,IAAI,mBAAmB,iBAAiB,IAAI,MAAM;CAClD,IAAI,CAAC,kBAAkB;EACrB,mCAAmB,IAAI,IAAI;EAC3B,iBAAiB,IAAI,QAAQ,gBAAgB;CAC/C;CAEA,IAAI,WAAW,iBAAiB,IAAI,OAAO;CAC3C,IAAI,CAAC,UAAU;EACb,WAAW,IAAI,kBAAkB,SAAS,MAAM;EAChD,iBAAiB,IAAI,SAAS,QAAQ;CACxC;CAEA,OAAO;AACT;AAEA,IAAa,+BACX,SACA,kBACG;CACH,MAAM,SAAS,YAAY;CAC3B,MAAM,EAAE,cAAc,cAAc,uBAAuB;CAE3D,MAAM,gBAAgB,cAElB,UACE,SACA,0BAA0B,eAAe,YAAY,CACvD,GACF;EAAC;EAAS;EAAc;CAAa,CACvC;CAEA,MAAM,aAAa,6BAA6B,eAAe,aAAa;CAC5E,MAAM,iBAAiB,aACpB,KAAa,cAAkC;EAC9C,IAAI,WAAW;GACb,MAAM,mBAAmB,UAAU,KAAK,WAAW;IACjD,WAAW;IACX;GACF,CAAC;GAED,IAAI,qBAAqB,KAAA,GACvB,OAAO;EAEX;EAEA,MAAM,oBAAoB,WAAW,mBAAmB,KAAK,MAAM;EACnE,OAAO,OACL,mBAAmB,mBAAmB,MAAM,CAAC,CAAC,OAAO,SAAS,CAChE;CACF,GACA;EAAC;EAAW;EAAQ;EAAe;CAAU,CAC/C;CAEA,OAAO,eAAe,EAAE,QAAQ,eAAe,IAAI,CAAC,cAAc,CAAC;AACrE"}

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

@@ -1 +1 @@
-{"version":3,"file":"Wrap.mjs","names":[],"sources":["../../../../../../../src/components/Wrap/Wrap.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactElement } from \"react\";\n\nexport interface WrapProps {\n  if: unknown;\n  children: ReactElement<PropsWithChildren>;\n}\n\nexport const Wrap: FC<WrapProps> = (props) => {\n  const { if: _if, children } = props;\n\n  if (_if) {\n    return children;\n  }\n\n  return children.props.children;\n};\n\nexport default Wrap;\n"],"mappings":";;;AAOA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EAAE,IAAI,KAAK,aAAa;CAE9B,IAAI,KACF,OAAO;CAGT,OAAO,SAAS,MAAM;AACxB"}
+{"version":3,"file":"Wrap.mjs","names":[],"sources":["../../../../../../../src/components/Wrap/Wrap.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactElement } from \"react\";\n\nexport interface WrapProps {\n  /**\n   * Whether the child element is rendered. Any truthy value keeps it, a falsy\n   * one renders only its children.\n   */\n  if: unknown;\n  /** The element that wraps the content, with the content as its children. */\n  children: ReactElement<PropsWithChildren>;\n}\n\nexport const Wrap: FC<WrapProps> = (props) => {\n  const { if: _if, children } = props;\n\n  if (_if) {\n    return children;\n  }\n\n  return children.props.children;\n};\n\nexport default Wrap;\n"],"mappings":";;;AAYA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EAAE,IAAI,KAAK,aAAa;CAE9B,IAAI,KACF,OAAO;CAGT,OAAO,SAAS,MAAM;AACxB"}

package/dist/js/packages/components/src/integrations/react-hook-form/components/Field/Field.mjs

@@ -3,9 +3,9 @@
 import { PropsContextProvider } from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
 import dynamic from "../../../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { useLocalizedStringFormatter } from "../../../../components/TranslationProvider/useLocalizedStringFormatter.mjs";
+import FieldErrorView from "../../../../views/FieldErrorView.mjs";
 import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
 import __locale_default from "../../../../../../../_virtual/_36.locale.mjs";
-import FieldErrorView from "../../../../views/FieldErrorView.mjs";
 import { useUpdateFormDefaultValue } from "./hooks/useUpdateFormDefaultValue.mjs";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/js/packages/components/src/integrations/react-hook-form/components/Form/Form.mjs

@@ -51,7 +51,10 @@ function Form(props) {
 		if (autoResetOptions?.onAfterModalClose) form.reset();
 	});
 	const { submitInterceptor } = useFormSettings();
-	const onSubmit = submitInterceptor ? (values) => submitInterceptor(onSubmitProp, values, { form }) : onSubmitProp;
+	const onSubmit = submitInterceptor ? (values, event) => submitInterceptor(onSubmitProp, values, {
+		form,
+		event
+	}) : onSubmitProp;
 	const handleSubmitResult = (result) => {
 		if (typeof result === "function") afterSubmitCallback.current = result;
 		const rootError = form.getFieldState("root")?.error;

package/dist/js/packages/components/src/integrations/react-hook-form/components/Form/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mjs","names":["RhfFormContextProvider"],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/Form/Form.tsx"],"sourcesContent":["import { FormContextProvider } from \"@/integrations/react-hook-form/components/FormContextProvider/FormContextProvider\";\nimport { useComponentDefaults } from \"@/components/ComponentDefaultsProvider\";\nimport { type OverlayController, useModalController } from \"@/lib/controller\";\nimport {\n  type BaseSyntheticEvent,\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type Ref,\n  type SubmitEventHandler,\n  useId,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type {\n  FieldValues,\n  Path,\n  SubmitHandler,\n  UseFormReturn,\n} from \"react-hook-form\";\nimport { FormProvider as RhfFormContextProvider } from \"react-hook-form\";\nimport { useFormRootErrorController } from \"../FormRootError/useFormRootErrorController\";\nimport { FormRootError } from \"../../lib/FormRootError\";\nimport { useFormSettings } from \"../FormSettingsProvider/FormSettingsProvider\";\nimport {\n  useFormSubmitController,\n  type WithFormSubmitControllerProps,\n} from \"@/integrations/react-hook-form/components/Form/hooks/useFormSubmitController\";\nimport { useHotkeySubmit } from \"@/integrations/react-hook-form/components/Form/hooks/useHotkeySubmit\";\n\nexport type FormOnSubmitHandler<F extends FieldValues> = SubmitHandler<F>;\n\nexport type AfterFormSubmitCallback = (...unknownArgs: unknown[]) => unknown;\n\nexport interface FormAutoResetOptions {\n  /**\n   * Whether the form is reset to its default values after the surrounding modal\n   * has closed.\n   *\n   * @default true\n   */\n  onAfterModalClose?: boolean;\n}\n\ntype FormComponentType = FC<\n  PropsWithChildren<{\n    id: string;\n    onSubmit?: SubmitEventHandler | FormOnSubmitHandler<never>;\n    ref?: Ref<HTMLFormElement>;\n  }>\n>;\n\nexport interface FormProps<F extends FieldValues>\n  extends\n    Omit<ComponentProps<\"form\">, \"onSubmit\">,\n    PropsWithChildren,\n    WithFormSubmitControllerProps {\n  /** The react-hook-form instance returned by `useForm()`. */\n  form: UseFormReturn<F>;\n  /**\n   * Called with the validated form values when the form is submitted. Returning\n   * a promise keeps the submit button pending until it settles.\n   */\n  onSubmit: FormOnSubmitHandler<F>;\n  /**\n   * The component rendered as the form element. Use it to render the form with\n   * a routers form component. Defaults to a plain `<form />`.\n   */\n  formComponent?: FC<Omit<FormComponentType, \"ref\">>;\n  /**\n   * Whether all fields of the form can be read but not edited.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean;\n  /**\n   * When the form is reset to its default values. `true` resets it after the\n   * surrounding modal has closed, `false` never resets it.\n   *\n   * @default true\n   */\n  autoReset?: FormAutoResetOptions | boolean;\n  /**\n   * Whether closing the surrounding modal must be confirmed while the form has\n   * unsaved changes. Overrides `Form.confirmModalCloseOnUnsavedChanges` of the\n   * `ComponentDefaultsProvider`.\n   *\n   * @default true\n   */\n  confirmModalCloseOnUnsavedChanges?: boolean;\n}\n\nconst DefaultFormComponent: FormComponentType = (p) => <form {...p} />;\n\n/**\n * Runs `operation` while closing the surrounding Modal is allowed without a\n * confirmation, and drops that permission again as soon as the operation has\n * settled. Scoping it to the operation is what keeps a submit that only\n * advances a wizard step from disarming the confirmation for good (#2775).\n */\nconst runWithGrantedModalClose = (\n  modalController: OverlayController,\n  operation: () => unknown,\n): unknown => {\n  const releaseGrant = modalController.grantCloseWithoutConfirmation();\n\n  let result: unknown;\n  try {\n    result = operation();\n  } catch (error) {\n    releaseGrant();\n    throw error;\n  }\n\n  if (result instanceof Promise) {\n    return result.finally(releaseGrant);\n  }\n  releaseGrant();\n  return result;\n};\n\nexport function Form<F extends FieldValues>(props: FormProps<F>) {\n  const {\n    form,\n    children,\n    onSubmit: onSubmitProp,\n    formComponent = DefaultFormComponent,\n    isReadOnly,\n    ref,\n    id: idProp,\n    autoReset = true,\n    confirmModalCloseOnUnsavedChanges: confirmModalCloseOnUnsavedChangesProp,\n    submitController: submitControllerFromProps,\n    ...formProps\n  } = props;\n\n  const newFormId = useId();\n  const formId = idProp ?? newFormId;\n  const FormComponent = useMemo(() => formComponent, [formId]);\n  const afterSubmitCallback = useRef<AfterFormSubmitCallback>(undefined);\n  const { isDirty } = form.formState;\n  const rootErrorController = useFormRootErrorController();\n\n  const defaultSubmitController = useFormSubmitController();\n  const submitController = submitControllerFromProps\n    ? submitControllerFromProps.submit.extend(defaultSubmitController)\n    : defaultSubmitController;\n\n  const autoResetOptions =\n    typeof autoReset === \"boolean\"\n      ? { onAfterModalClose: autoReset }\n      : autoReset;\n\n  const defaults = useComponentDefaults(\"Form\");\n  const confirmModalCloseOnUnsavedChanges =\n    confirmModalCloseOnUnsavedChangesProp ??\n    defaults.confirmModalCloseOnUnsavedChanges;\n\n  const modalController = useModalController();\n  modalController.useUpdateOptions({\n    // A dirty Form contributes one close confirmation source to the surrounding\n    // Modal; sources are combined, so a clean Form does not overrule a\n    // `<Modal confirmOnClose>`. The Modal renders the confirmation dialog.\n    // A Form that switched it off contributes nothing at all.\n    confirmOnClose: confirmModalCloseOnUnsavedChanges ? isDirty : undefined,\n  });\n  modalController.useOnClosed(() => {\n    if (autoResetOptions?.onAfterModalClose) {\n      form.reset();\n    }\n  });\n\n  const { submitInterceptor } = useFormSettings();\n  const onSubmit = submitInterceptor\n    ? (values: F) => submitInterceptor<F>(onSubmitProp, values, { form })\n    : onSubmitProp;\n\n  const handleSubmitResult = (result: unknown) => {\n    if (typeof result === \"function\") {\n      afterSubmitCallback.current = result as AfterFormSubmitCallback;\n    }\n    const rootError = form.getFieldState(\"root\" as Path<F>)?.error;\n    if (rootError && !rootErrorController.errorComponentMounted) {\n      throw new FormRootError(rootError);\n    }\n  };\n\n  const handleSubmit = async (e?: BaseSyntheticEvent | F): Promise<void> => {\n    const formEvent =\n      e && \"nativeEvent\" in e ? (e as BaseSyntheticEvent) : undefined;\n    formEvent?.stopPropagation();\n\n    // react-hook-form's submit handler resolves with an unknown value; the\n    // submit controller only awaits it, so drop the result.\n    await form.handleSubmit((values, event) =>\n      runWithGrantedModalClose(modalController, () => {\n        const submitResult = onSubmit(values, event);\n        if (submitResult instanceof Promise) {\n          return submitResult.then(handleSubmitResult);\n        }\n        handleSubmitResult(submitResult);\n      }),\n    )(formEvent);\n  };\n  submitController.submit.set(handleSubmit);\n\n  const onAfterSuccessFeedback = () => {\n    const callback = afterSubmitCallback.current;\n    if (!callback) {\n      return;\n    }\n    // The callback runs after the submit itself has finished (and after\n    // SubmitButton's success feedback), so it needs its own permission to close\n    // the Modal.\n    runWithGrantedModalClose(modalController, callback);\n  };\n\n  const refWithHotkeySubmit = useHotkeySubmit({\n    ref,\n    submitController,\n  });\n\n  return (\n    <RhfFormContextProvider {...form}>\n      <FormContextProvider\n        form={form as UseFormReturn}\n        isReadOnly={isReadOnly}\n        id={formId}\n        onAfterSuccessFeedback={onAfterSuccessFeedback}\n        rootErrorController={rootErrorController}\n      >\n        <FormComponent\n          {...formProps}\n          ref={refWithHotkeySubmit}\n          id={formId}\n          onSubmit={handleSubmit}\n        >\n          {children}\n        </FormComponent>\n      </FormContextProvider>\n    </RhfFormContextProvider>\n  );\n}\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;;AA4FA,IAAM,wBAA2C,MAAM,oBAAC,QAAD,EAAM,GAAI,EAAI,CAAA;;;;;;;AAQrE,IAAM,4BACJ,iBACA,cACY;CACZ,MAAM,eAAe,gBAAgB,8BAA8B;CAEnE,IAAI;CACJ,IAAI;EACF,SAAS,UAAU;CACrB,SAAS,OAAO;EACd,aAAa;EACb,MAAM;CACR;CAEA,IAAI,kBAAkB,SACpB,OAAO,OAAO,QAAQ,YAAY;CAEpC,aAAa;CACb,OAAO;AACT;AAEA,SAAgB,KAA4B,OAAqB;CAC/D,MAAM,EACJ,MACA,UACA,UAAU,cACV,gBAAgB,sBAChB,YACA,KACA,IAAI,QACJ,YAAY,MACZ,mCAAmC,uCACnC,kBAAkB,2BAClB,GAAG,cACD;CAEJ,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,UAAU;CACzB,MAAM,gBAAgB,cAAc,eAAe,CAAC,MAAM,CAAC;CAC3D,MAAM,sBAAsB,OAAgC,KAAA,CAAS;CACrE,MAAM,EAAE,YAAY,KAAK;CACzB,MAAM,sBAAsB,2BAA2B;CAEvD,MAAM,0BAA0B,wBAAwB;CACxD,MAAM,mBAAmB,4BACrB,0BAA0B,OAAO,OAAO,uBAAuB,IAC/D;CAEJ,MAAM,mBACJ,OAAO,cAAc,YACjB,EAAE,mBAAmB,UAAU,IAC/B;CAEN,MAAM,WAAW,qBAAqB,MAAM;CAC5C,MAAM,oCACJ,yCACA,SAAS;CAEX,MAAM,kBAAkB,mBAAmB;CAC3C,gBAAgB,iBAAiB,EAK/B,gBAAgB,oCAAoC,UAAU,KAAA,EAChE,CAAC;CACD,gBAAgB,kBAAkB;EAChC,IAAI,kBAAkB,mBACpB,KAAK,MAAM;CAEf,CAAC;CAED,MAAM,EAAE,sBAAsB,gBAAgB;CAC9C,MAAM,WAAW,qBACZ,WAAc,kBAAqB,cAAc,QAAQ,EAAE,KAAK,CAAC,IAClE;CAEJ,MAAM,sBAAsB,WAAoB;EAC9C,IAAI,OAAO,WAAW,YACpB,oBAAoB,UAAU;EAEhC,MAAM,YAAY,KAAK,cAAc,MAAiB,CAAC,EAAE;EACzD,IAAI,aAAa,CAAC,oBAAoB,uBACpC,MAAM,IAAI,cAAc,SAAS;CAErC;CAEA,MAAM,eAAe,OAAO,MAA8C;EACxE,MAAM,YACJ,KAAK,iBAAiB,IAAK,IAA2B,KAAA;EACxD,WAAW,gBAAgB;EAI3B,MAAM,KAAK,cAAc,QAAQ,UAC/B,yBAAyB,uBAAuB;GAC9C,MAAM,eAAe,SAAS,QAAQ,KAAK;GAC3C,IAAI,wBAAwB,SAC1B,OAAO,aAAa,KAAK,kBAAkB;GAE7C,mBAAmB,YAAY;EACjC,CAAC,CACH,CAAC,CAAC,SAAS;CACb;CACA,iBAAiB,OAAO,IAAI,YAAY;CAExC,MAAM,+BAA+B;EACnC,MAAM,WAAW,oBAAoB;EACrC,IAAI,CAAC,UACH;EAKF,yBAAyB,iBAAiB,QAAQ;CACpD;CAEA,MAAM,sBAAsB,gBAAgB;EAC1C;EACA;CACF,CAAC;CAED,OACE,oBAACA,cAAD;EAAwB,GAAI;EAC1B,UAAA,oBAAC,qBAAD;GACQ;GACM;GACZ,IAAI;GACoB;GACH;GAErB,UAAA,oBAAC,eAAD;IACE,GAAI;IACJ,KAAK;IACL,IAAI;IACJ,UAAU;IAET;GACY,CAAA;EACI,CAAA;CACC,CAAA;AAE5B"}
+{"version":3,"file":"Form.mjs","names":["RhfFormContextProvider"],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/Form/Form.tsx"],"sourcesContent":["import { FormContextProvider } from \"@/integrations/react-hook-form/components/FormContextProvider/FormContextProvider\";\nimport { useComponentDefaults } from \"@/components/ComponentDefaultsProvider\";\nimport { type OverlayController, useModalController } from \"@/lib/controller\";\nimport {\n  type BaseSyntheticEvent,\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type Ref,\n  type SubmitEventHandler,\n  useId,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type {\n  FieldValues,\n  Path,\n  SubmitHandler,\n  UseFormReturn,\n} from \"react-hook-form\";\nimport { FormProvider as RhfFormContextProvider } from \"react-hook-form\";\nimport { useFormRootErrorController } from \"../FormRootError/useFormRootErrorController\";\nimport { FormRootError } from \"../../lib/FormRootError\";\nimport { useFormSettings } from \"../FormSettingsProvider/FormSettingsProvider\";\nimport {\n  useFormSubmitController,\n  type WithFormSubmitControllerProps,\n} from \"@/integrations/react-hook-form/components/Form/hooks/useFormSubmitController\";\nimport { useHotkeySubmit } from \"@/integrations/react-hook-form/components/Form/hooks/useHotkeySubmit\";\n\nexport type FormOnSubmitHandler<F extends FieldValues> = SubmitHandler<F>;\n\nexport type AfterFormSubmitCallback = (...unknownArgs: unknown[]) => unknown;\n\nexport interface FormAutoResetOptions {\n  /**\n   * Whether the form is reset to its default values after the surrounding modal\n   * has closed.\n   *\n   * @default true\n   */\n  onAfterModalClose?: boolean;\n}\n\ntype FormComponentType = FC<\n  PropsWithChildren<{\n    id: string;\n    onSubmit?: SubmitEventHandler | FormOnSubmitHandler<never>;\n    ref?: Ref<HTMLFormElement>;\n  }>\n>;\n\nexport interface FormProps<F extends FieldValues>\n  extends\n    Omit<ComponentProps<\"form\">, \"onSubmit\">,\n    PropsWithChildren,\n    WithFormSubmitControllerProps {\n  /** The react-hook-form instance returned by `useForm()`. */\n  form: UseFormReturn<F>;\n  /**\n   * Called with the validated form values when the form is submitted. Returning\n   * a promise keeps the submit button pending until it settles.\n   */\n  onSubmit: FormOnSubmitHandler<F>;\n  /**\n   * The component rendered as the form element. Use it to render the form with\n   * a routers form component. Defaults to a plain `<form />`.\n   */\n  formComponent?: FC<Omit<FormComponentType, \"ref\">>;\n  /**\n   * Whether all fields of the form can be read but not edited.\n   *\n   * @default false\n   */\n  isReadOnly?: boolean;\n  /**\n   * When the form is reset to its default values. `true` resets it after the\n   * surrounding modal has closed, `false` never resets it.\n   *\n   * @default true\n   */\n  autoReset?: FormAutoResetOptions | boolean;\n  /**\n   * Whether closing the surrounding modal must be confirmed while the form has\n   * unsaved changes. Overrides `Form.confirmModalCloseOnUnsavedChanges` of the\n   * `ComponentDefaultsProvider`.\n   *\n   * @default true\n   */\n  confirmModalCloseOnUnsavedChanges?: boolean;\n}\n\nconst DefaultFormComponent: FormComponentType = (p) => <form {...p} />;\n\n/**\n * Runs `operation` while closing the surrounding Modal is allowed without a\n * confirmation, and drops that permission again as soon as the operation has\n * settled. Scoping it to the operation is what keeps a submit that only\n * advances a wizard step from disarming the confirmation for good (#2775).\n */\nconst runWithGrantedModalClose = (\n  modalController: OverlayController,\n  operation: () => unknown,\n): unknown => {\n  const releaseGrant = modalController.grantCloseWithoutConfirmation();\n\n  let result: unknown;\n  try {\n    result = operation();\n  } catch (error) {\n    releaseGrant();\n    throw error;\n  }\n\n  if (result instanceof Promise) {\n    return result.finally(releaseGrant);\n  }\n  releaseGrant();\n  return result;\n};\n\nexport function Form<F extends FieldValues>(props: FormProps<F>) {\n  const {\n    form,\n    children,\n    onSubmit: onSubmitProp,\n    formComponent = DefaultFormComponent,\n    isReadOnly,\n    ref,\n    id: idProp,\n    autoReset = true,\n    confirmModalCloseOnUnsavedChanges: confirmModalCloseOnUnsavedChangesProp,\n    submitController: submitControllerFromProps,\n    ...formProps\n  } = props;\n\n  const newFormId = useId();\n  const formId = idProp ?? newFormId;\n  const FormComponent = useMemo(() => formComponent, [formId]);\n  const afterSubmitCallback = useRef<AfterFormSubmitCallback>(undefined);\n  const { isDirty } = form.formState;\n  const rootErrorController = useFormRootErrorController();\n\n  const defaultSubmitController = useFormSubmitController();\n  const submitController = submitControllerFromProps\n    ? submitControllerFromProps.submit.extend(defaultSubmitController)\n    : defaultSubmitController;\n\n  const autoResetOptions =\n    typeof autoReset === \"boolean\"\n      ? { onAfterModalClose: autoReset }\n      : autoReset;\n\n  const defaults = useComponentDefaults(\"Form\");\n  const confirmModalCloseOnUnsavedChanges =\n    confirmModalCloseOnUnsavedChangesProp ??\n    defaults.confirmModalCloseOnUnsavedChanges;\n\n  const modalController = useModalController();\n  modalController.useUpdateOptions({\n    // A dirty Form contributes one close confirmation source to the surrounding\n    // Modal; sources are combined, so a clean Form does not overrule a\n    // `<Modal confirmOnClose>`. The Modal renders the confirmation dialog.\n    // A Form that switched it off contributes nothing at all.\n    confirmOnClose: confirmModalCloseOnUnsavedChanges ? isDirty : undefined,\n  });\n  modalController.useOnClosed(() => {\n    if (autoResetOptions?.onAfterModalClose) {\n      form.reset();\n    }\n  });\n\n  const { submitInterceptor } = useFormSettings();\n  const onSubmit = submitInterceptor\n    ? (values: F, event?: BaseSyntheticEvent) =>\n        submitInterceptor<F>(onSubmitProp, values, { form, event })\n    : onSubmitProp;\n\n  const handleSubmitResult = (result: unknown) => {\n    if (typeof result === \"function\") {\n      afterSubmitCallback.current = result as AfterFormSubmitCallback;\n    }\n    const rootError = form.getFieldState(\"root\" as Path<F>)?.error;\n    if (rootError && !rootErrorController.errorComponentMounted) {\n      throw new FormRootError(rootError);\n    }\n  };\n\n  const handleSubmit = async (e?: BaseSyntheticEvent | F): Promise<void> => {\n    const formEvent =\n      e && \"nativeEvent\" in e ? (e as BaseSyntheticEvent) : undefined;\n    formEvent?.stopPropagation();\n\n    // react-hook-form's submit handler resolves with an unknown value; the\n    // submit controller only awaits it, so drop the result.\n    await form.handleSubmit((values, event) =>\n      runWithGrantedModalClose(modalController, () => {\n        const submitResult = onSubmit(values, event);\n        if (submitResult instanceof Promise) {\n          return submitResult.then(handleSubmitResult);\n        }\n        handleSubmitResult(submitResult);\n      }),\n    )(formEvent);\n  };\n  submitController.submit.set(handleSubmit);\n\n  const onAfterSuccessFeedback = () => {\n    const callback = afterSubmitCallback.current;\n    if (!callback) {\n      return;\n    }\n    // The callback runs after the submit itself has finished (and after\n    // SubmitButton's success feedback), so it needs its own permission to close\n    // the Modal.\n    runWithGrantedModalClose(modalController, callback);\n  };\n\n  const refWithHotkeySubmit = useHotkeySubmit({\n    ref,\n    submitController,\n  });\n\n  return (\n    <RhfFormContextProvider {...form}>\n      <FormContextProvider\n        form={form as UseFormReturn}\n        isReadOnly={isReadOnly}\n        id={formId}\n        onAfterSuccessFeedback={onAfterSuccessFeedback}\n        rootErrorController={rootErrorController}\n      >\n        <FormComponent\n          {...formProps}\n          ref={refWithHotkeySubmit}\n          id={formId}\n          onSubmit={handleSubmit}\n        >\n          {children}\n        </FormComponent>\n      </FormContextProvider>\n    </RhfFormContextProvider>\n  );\n}\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;;AA4FA,IAAM,wBAA2C,MAAM,oBAAC,QAAD,EAAM,GAAI,EAAI,CAAA;;;;;;;AAQrE,IAAM,4BACJ,iBACA,cACY;CACZ,MAAM,eAAe,gBAAgB,8BAA8B;CAEnE,IAAI;CACJ,IAAI;EACF,SAAS,UAAU;CACrB,SAAS,OAAO;EACd,aAAa;EACb,MAAM;CACR;CAEA,IAAI,kBAAkB,SACpB,OAAO,OAAO,QAAQ,YAAY;CAEpC,aAAa;CACb,OAAO;AACT;AAEA,SAAgB,KAA4B,OAAqB;CAC/D,MAAM,EACJ,MACA,UACA,UAAU,cACV,gBAAgB,sBAChB,YACA,KACA,IAAI,QACJ,YAAY,MACZ,mCAAmC,uCACnC,kBAAkB,2BAClB,GAAG,cACD;CAEJ,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,UAAU;CACzB,MAAM,gBAAgB,cAAc,eAAe,CAAC,MAAM,CAAC;CAC3D,MAAM,sBAAsB,OAAgC,KAAA,CAAS;CACrE,MAAM,EAAE,YAAY,KAAK;CACzB,MAAM,sBAAsB,2BAA2B;CAEvD,MAAM,0BAA0B,wBAAwB;CACxD,MAAM,mBAAmB,4BACrB,0BAA0B,OAAO,OAAO,uBAAuB,IAC/D;CAEJ,MAAM,mBACJ,OAAO,cAAc,YACjB,EAAE,mBAAmB,UAAU,IAC/B;CAEN,MAAM,WAAW,qBAAqB,MAAM;CAC5C,MAAM,oCACJ,yCACA,SAAS;CAEX,MAAM,kBAAkB,mBAAmB;CAC3C,gBAAgB,iBAAiB,EAK/B,gBAAgB,oCAAoC,UAAU,KAAA,EAChE,CAAC;CACD,gBAAgB,kBAAkB;EAChC,IAAI,kBAAkB,mBACpB,KAAK,MAAM;CAEf,CAAC;CAED,MAAM,EAAE,sBAAsB,gBAAgB;CAC9C,MAAM,WAAW,qBACZ,QAAW,UACV,kBAAqB,cAAc,QAAQ;EAAE;EAAM;CAAM,CAAC,IAC5D;CAEJ,MAAM,sBAAsB,WAAoB;EAC9C,IAAI,OAAO,WAAW,YACpB,oBAAoB,UAAU;EAEhC,MAAM,YAAY,KAAK,cAAc,MAAiB,CAAC,EAAE;EACzD,IAAI,aAAa,CAAC,oBAAoB,uBACpC,MAAM,IAAI,cAAc,SAAS;CAErC;CAEA,MAAM,eAAe,OAAO,MAA8C;EACxE,MAAM,YACJ,KAAK,iBAAiB,IAAK,IAA2B,KAAA;EACxD,WAAW,gBAAgB;EAI3B,MAAM,KAAK,cAAc,QAAQ,UAC/B,yBAAyB,uBAAuB;GAC9C,MAAM,eAAe,SAAS,QAAQ,KAAK;GAC3C,IAAI,wBAAwB,SAC1B,OAAO,aAAa,KAAK,kBAAkB;GAE7C,mBAAmB,YAAY;EACjC,CAAC,CACH,CAAC,CAAC,SAAS;CACb;CACA,iBAAiB,OAAO,IAAI,YAAY;CAExC,MAAM,+BAA+B;EACnC,MAAM,WAAW,oBAAoB;EACrC,IAAI,CAAC,UACH;EAKF,yBAAyB,iBAAiB,QAAQ;CACpD;CAEA,MAAM,sBAAsB,gBAAgB;EAC1C;EACA;CACF,CAAC;CAED,OACE,oBAACA,cAAD;EAAwB,GAAI;EAC1B,UAAA,oBAAC,qBAAD;GACQ;GACM;GACZ,IAAI;GACoB;GACH;GAErB,UAAA,oBAAC,eAAD;IACE,GAAI;IACJ,KAAK;IACL,IAAI;IACJ,UAAU;IAET;GACY,CAAA;EACI,CAAA;CACC,CAAA;AAE5B"}

package/dist/js/packages/components/src/integrations/react-hook-form/components/FormRootError/FormRootError.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
-import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
 import FieldErrorView from "../../../../views/FieldErrorView.mjs";
+import { useFormContext } from "../FormContextProvider/FormContextProvider.mjs";
 import { useMountedFormRootErrorComponent } from "./useMountedFormRootErrorComponent.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
 //#region src/integrations/react-hook-form/components/FormRootError/FormRootError.tsx

package/dist/js/packages/components/src/integrations/react-hook-form/components/FormSettingsProvider/FormSettingsProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormSettingsProvider.mjs","names":[],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/FormSettingsProvider/FormSettingsProvider.tsx"],"sourcesContent":["import { createContext, useContext, type PropsWithChildren } from \"react\";\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\nimport type { FormOnSubmitHandler } from \"../Form/Form\";\n\nexport interface SubmitInterceptorContext<F extends FieldValues = FieldValues> {\n  form: UseFormReturn<F>;\n}\n\nexport type SubmitInterceptor = <F extends FieldValues = FieldValues>(\n  submit: FormOnSubmitHandler<F>,\n  values: F,\n  context: SubmitInterceptorContext<F>,\n) => ReturnType<FormOnSubmitHandler<F>>;\n\ninterface Context {\n  submitInterceptor?: SubmitInterceptor;\n}\n\nconst context = createContext<Context>({});\n\nexport type FormSettingsProviderProps = Context & PropsWithChildren;\n\nexport function FormSettingsProvider(props: FormSettingsProviderProps) {\n  return (\n    <context.Provider value={props as Context}>\n      {props.children}\n    </context.Provider>\n  );\n}\n\nexport const useFormSettings = () => useContext(context);\n"],"mappings":";;;;;AAkBA,IAAM,UAAU,cAAuB,CAAC,CAAC;AAIzC,SAAgB,qBAAqB,OAAkC;CACrE,OACE,oBAAC,QAAQ,UAAT;EAAkB,OAAO;EACtB,UAAA,MAAM;CACS,CAAA;AAEtB;AAEA,IAAa,wBAAwB,WAAW,OAAO"}
+{"version":3,"file":"FormSettingsProvider.mjs","names":[],"sources":["../../../../../../../../../src/integrations/react-hook-form/components/FormSettingsProvider/FormSettingsProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type BaseSyntheticEvent,\n  type PropsWithChildren,\n} from \"react\";\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\nimport type { FormOnSubmitHandler } from \"../Form/Form\";\n\nexport interface SubmitInterceptorContext<F extends FieldValues = FieldValues> {\n  form: UseFormReturn<F>;\n  /**\n   * The submit event, if the form was submitted by one. Pass it on to `submit`\n   * so the handler can read the pressed submit button\n   * (`event.nativeEvent.submitter`).\n   */\n  event?: BaseSyntheticEvent;\n}\n\nexport type SubmitInterceptor = <F extends FieldValues = FieldValues>(\n  submit: FormOnSubmitHandler<F>,\n  values: F,\n  context: SubmitInterceptorContext<F>,\n) => ReturnType<FormOnSubmitHandler<F>>;\n\ninterface Context {\n  submitInterceptor?: SubmitInterceptor;\n}\n\nconst context = createContext<Context>({});\n\nexport type FormSettingsProviderProps = Context & PropsWithChildren;\n\nexport function FormSettingsProvider(props: FormSettingsProviderProps) {\n  return (\n    <context.Provider value={props as Context}>\n      {props.children}\n    </context.Provider>\n  );\n}\n\nexport const useFormSettings = () => useContext(context);\n"],"mappings":";;;;;AA6BA,IAAM,UAAU,cAAuB,CAAC,CAAC;AAIzC,SAAgB,qBAAqB,OAAkC;CACrE,OACE,oBAAC,QAAQ,UAAT;EAAkB,OAAO;EACtB,UAAA,MAAM;CACS,CAAA;AAEtB;AAEA,IAAa,wBAAwB,WAAW,OAAO"}