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

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

@@ -10,7 +10,7 @@ import { ProgressBarLegend } from "./components/ProgressBarLegend.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/ProgressBar/ProgressBar.tsx
+// src/components/ProgressBar/ProgressBar.tsx
 /** @flr-generate all */
 var ProgressBar = flowComponent("ProgressBar", (props) => {
 	const { children, className, status = "info", showMaxValue, size = "m", segments, value, formatOptions, showLegend = true, maxValue, valueLabel, ...rest } = props;
@@ -52,7 +52,6 @@ var ProgressBar = flowComponent("ProgressBar", (props) => {
 		})
 	});
 });
-//#endregion
 export { ProgressBar, ProgressBar as default };
 
 //# sourceMappingURL=ProgressBar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.mjs","names":["styles"],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface ProgressBarProps\n  extends\n    PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n    FlowComponentProps {\n  /** The status the progress bar is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** Whether the max value should be displayed. */\n  showMaxValue?: boolean;\n  /** The size variant of the progress bar. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Divides the fill of the progress bar into segments */\n  segments?: {\n    value: number;\n    title: string;\n    color?: CategoricalWithCustomColor;\n    valueText?: string;\n  }[];\n  /**\n   * Whether the legend component is shown when segments are used. @default:\n   * true\n   */\n  showLegend?: boolean;\n}\n\n/** @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    showMaxValue,\n    size = \"m\",\n    segments,\n    value,\n    formatOptions,\n    showLegend = true,\n    maxValue,\n    valueLabel,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.progressBar,\n    styles[`size-${size}`],\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      unstyled: true,\n    },\n  };\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  return (\n    <Aria.ProgressBar\n      className={rootClassName}\n      value={segmentsTotalValue ?? value}\n      formatOptions={formatOptions}\n      maxValue={maxValue}\n      {...rest}\n      inert={isSkeleton || undefined}\n    >\n      {({ percentage }) => (\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ProgressBarValue\n            showMaxValue={showMaxValue}\n            maxValue={maxValue}\n            formatOptions={formatOptions}\n            value={segmentsTotalValue ?? value}\n            valueLabel={valueLabel}\n          />\n\n          <ProgressBarBar percentage={percentage} segments={segments} />\n\n          <ProgressBarLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        </PropsContextProvider>\n      )}\n    </Aria.ProgressBar>\n  );\n});\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,WACA,SAAS,QACT,cACA,OAAO,KACP,UACA,OACA,eACA,aAAa,MACb,UACA,YACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,QAAQ,SACfA,2BAAO,SACP,cAAcA,2BAAO,UACrB,SACF;CAEA,MAAM,eAA6B,EACjC,OAAO;EACL,WAAWA,2BAAO;EAClB,UAAU;CACZ,EACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO,sBAAsB;EACd;EACL;EACV,GAAI;EACJ,OAAO,cAAc,KAAA;EAEnB,WAAA,EAAE,iBACF,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,kBAAD;KACgB;KACJ;KACK;KACf,OAAO,sBAAsB;KACjB;IACb,CAAA;IAED,oBAAC,gBAAD;KAA4B;KAAsB;IAAW,CAAA;IAE7D,oBAAC,mBAAD;KACc;KACF;KACK;IAChB,CAAA;GACmB;;CAER,CAAA;AAEtB,CAAC"}
+{"version":3,"file":"ProgressBar.mjs","names":["styles"],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface ProgressBarProps\n  extends\n    PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n    FlowComponentProps {\n  /** The status the progress bar is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** Whether the max value should be displayed. */\n  showMaxValue?: boolean;\n  /** The size variant of the progress bar. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Divides the fill of the progress bar into segments */\n  segments?: {\n    value: number;\n    title: string;\n    color?: CategoricalWithCustomColor;\n    valueText?: string;\n  }[];\n  /** Whether the legend component is shown when segments are used. @default true */\n  showLegend?: boolean;\n}\n\n/** @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    showMaxValue,\n    size = \"m\",\n    segments,\n    value,\n    formatOptions,\n    showLegend = true,\n    maxValue,\n    valueLabel,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.progressBar,\n    styles[`size-${size}`],\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      unstyled: true,\n    },\n  };\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  return (\n    <Aria.ProgressBar\n      className={rootClassName}\n      value={segmentsTotalValue ?? value}\n      formatOptions={formatOptions}\n      maxValue={maxValue}\n      {...rest}\n      inert={isSkeleton || undefined}\n    >\n      {({ percentage }) => (\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ProgressBarValue\n            showMaxValue={showMaxValue}\n            maxValue={maxValue}\n            formatOptions={formatOptions}\n            value={segmentsTotalValue ?? value}\n            valueLabel={valueLabel}\n          />\n\n          <ProgressBarBar percentage={percentage} segments={segments} />\n\n          <ProgressBarLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        </PropsContextProvider>\n      )}\n    </Aria.ProgressBar>\n  );\n});\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;;;;;;;;AAuCA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,WACA,SAAS,QACT,cACA,OAAO,KACP,UACA,OACA,eACA,aAAa,MACb,UACA,YACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,QAAQ,SACfA,2BAAO,SACP,cAAcA,2BAAO,UACrB,SACF;CAEA,MAAM,eAA6B,EACjC,OAAO;EACL,WAAWA,2BAAO;EAClB,UAAU;CACZ,EACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO,sBAAsB;EACd;EACL;EACV,GAAI;EACJ,OAAO,cAAc,KAAA;EAEnB,WAAA,EAAE,iBACF,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,kBAAD;KACgB;KACJ;KACK;KACf,OAAO,sBAAsB;KACjB;IACb,CAAA;IAED,oBAAC,gBAAD;KAA4B;KAAsB;IAAW,CAAA;IAE7D,oBAAC,mBAAD;KACc;KACF;KACK;IAChB,CAAA;GACmB;;CAER,CAAA;AAEtB,CAAC"}

package/dist/js/packages/components/src/components/ProgressBar/ProgressBar.module.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/ProgressBar/ProgressBar.module.scss
+// src/components/ProgressBar/ProgressBar.module.scss
 var progressBar = "flow--progress-bar";
 var legend = "flow--progress-bar--legend";
 var label = "flow--progress-bar--label";
@@ -33,7 +33,6 @@ var ProgressBar_module_default = {
 	"skeleton-surface-shimmer": "flow--progress-bar--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--progress-bar--skeleton-text-shimmer"
 };
-//#endregion
 export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, segment, skeleton, success, value, warning };
 
 //# sourceMappingURL=ProgressBar.module.mjs.map

package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs

@@ -5,7 +5,7 @@ import { isCategoricalColor } from "../../../lib/tokens/isCategoricalColor.mjs";
 import ProgressBar_module_default from "../ProgressBar.module.mjs";
 import { getCategoricalColorByIndex } from "../../../lib/tokens/getCategoricalColorByIndex.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/ProgressBar/components/ProgressBarBar.tsx
+// src/components/ProgressBar/components/ProgressBarBar.tsx
 var ProgressBarBar = (props) => {
 	const { segments, percentage } = props;
 	if (useSkeletonMode()) return /* @__PURE__ */ jsx("div", { className: ProgressBar_module_default.bar });
@@ -29,7 +29,6 @@ var ProgressBarBar = (props) => {
 		})
 	});
 };
-//#endregion
 export { ProgressBarBar };
 
 //# sourceMappingURL=ProgressBarBar.mjs.map

package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarLegend.mjs

@@ -7,20 +7,20 @@ import { getCategoricalColorByIndex } from "../../../lib/tokens/getCategoricalCo
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { useNumberFormatter } from "react-aria";
-//#region src/components/ProgressBar/components/ProgressBarLegend.tsx
+// src/components/ProgressBar/components/ProgressBarLegend.tsx
 var ProgressBarLegend = (props) => {
 	const { segments, showLegend, formatOptions } = props;
 	const formatter = useNumberFormatter(formatOptions);
 	if (!segments || !showLegend) return null;
+	const formatValue = (value) => formatOptions ? formatter.format(value) : `${value} %`;
 	return /* @__PURE__ */ jsx(Legend, {
 		className: ProgressBar_module_default.legend,
-		children: segments.map((s, i) => /* @__PURE__ */ jsx(LegendItem, {
-			color: s.color ?? getCategoricalColorByIndex(i),
-			children: `${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`
-		}, s.title))
+		children: segments.map((segment, index) => /* @__PURE__ */ jsx(LegendItem, {
+			color: segment.color ?? getCategoricalColorByIndex(index),
+			children: `${segment.title} (${segment.valueText ?? formatValue(segment.value)})`
+		}, segment.title))
 	});
 };
-//#endregion
 export { ProgressBarLegend };
 
 //# sourceMappingURL=ProgressBarLegend.mjs.map

package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarLegend.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarLegend.mjs","names":["styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n  ProgressBarProps,\n  \"segments\" | \"showLegend\" | \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n  const { segments, showLegend, formatOptions } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (!segments || !showLegend) {\n    return null;\n  }\n\n  return (\n    <Legend className={styles.legend}>\n      {segments.map((s, i) => (\n        <LegendItem\n          key={s.title}\n          color={s.color ?? getCategoricalColorByIndex(i)}\n        >{`${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`}</LegendItem>\n      ))}\n    </Legend>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,qBAAgC,UAAU;CACrD,MAAM,EAAE,UAAU,YAAY,kBAAkB;CAEhD,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,CAAC,YAAY,CAAC,YAChB,OAAO;CAGT,OACE,oBAAC,QAAD;EAAQ,WAAWA,2BAAO;EACvB,UAAA,SAAS,KAAK,GAAG,MAChB,oBAAC,YAAD;GAEE,OAAO,EAAE,SAAS,2BAA2B,CAAC;GAC9C,UAAA,GAAG,EAAE,MAAM,IAAI,EAAE,cAAc,gBAAgB,UAAU,OAAO,EAAE,KAAK,IAAI,GAAG,EAAE,MAAM,KAAK;EAAe,GAFrG,EAAE,KAEmG,CAC7G;CACK,CAAA;AAEZ"}
+{"version":3,"file":"ProgressBarLegend.mjs","names":["styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n  ProgressBarProps,\n  \"segments\" | \"showLegend\" | \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n  const { segments, showLegend, formatOptions } = props;\n\n  const formatter = useNumberFormatter(formatOptions);\n\n  if (!segments || !showLegend) {\n    return null;\n  }\n\n  const formatValue = (value: number) =>\n    formatOptions ? formatter.format(value) : `${value} %`;\n\n  return (\n    <Legend className={styles.legend}>\n      {segments.map((segment, index) => (\n        <LegendItem\n          key={segment.title}\n          color={segment.color ?? getCategoricalColorByIndex(index)}\n        >\n          {`${segment.title} (${segment.valueText ?? formatValue(segment.value)})`}\n        </LegendItem>\n      ))}\n    </Legend>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,qBAAgC,UAAU;CACrD,MAAM,EAAE,UAAU,YAAY,kBAAkB;CAEhD,MAAM,YAAY,mBAAmB,aAAa;CAElD,IAAI,CAAC,YAAY,CAAC,YAChB,OAAO;CAGT,MAAM,eAAe,UACnB,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAErD,OACE,oBAAC,QAAD;EAAQ,WAAWA,2BAAO;EACvB,UAAA,SAAS,KAAK,SAAS,UACtB,oBAAC,YAAD;GAEE,OAAO,QAAQ,SAAS,2BAA2B,KAAK;GAEvD,UAAA,GAAG,QAAQ,MAAM,IAAI,QAAQ,aAAa,YAAY,QAAQ,KAAK,EAAE;EAC5D,GAJL,QAAQ,KAIH,CACb;CACK,CAAA;AAEZ"}

package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarValue.mjs

@@ -5,7 +5,7 @@ import __locale_default from "../../../../../../_virtual/_8.locale.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { useLocalizedStringFormatter, useNumberFormatter } from "react-aria";
-//#region src/components/ProgressBar/components/ProgressBarValue.tsx
+// src/components/ProgressBar/components/ProgressBarValue.tsx
 var ProgressBarValue = (props) => {
 	const { showMaxValue, maxValue, value = 0, formatOptions, valueLabel } = props;
 	const formatter = useNumberFormatter(formatOptions);
@@ -18,7 +18,6 @@ var ProgressBarValue = (props) => {
 		children: valueLabel ?? (maxValueText ? textWithMaxValue : valueText)
 	});
 };
-//#endregion
 export { ProgressBarValue };
 
 //# sourceMappingURL=ProgressBarValue.mjs.map

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

@@ -3,7 +3,6 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import FormField_module_default from "../FormField/FormField.module.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { ColumnLayout } from "../ColumnLayout/ColumnLayout.mjs";
 import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
@@ -12,12 +11,12 @@ import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
-//#region src/components/RadioGroup/RadioGroup.tsx
+// src/components/RadioGroup/RadioGroup.tsx
 /** @flr-generate all */
 var RadioGroup = flowComponent("RadioGroup", (props) => {
 	const { children, className, s, m, l, ref, ...rest } = props;
 	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, skeletonProps } = useFieldComponent(props, "RadioGroup");
-	const rootClassName = clsx(FormField_module_default.formField, className);
+	const rootClassName = clsx(wrapperProps.className, className);
 	const propsContext = {
 		RadioButton: { tunnel: {
 			id: "radioButtons",
@@ -35,7 +34,7 @@ var RadioGroup = flowComponent("RadioGroup", (props) => {
 		...rest,
 		...skeletonProps,
 		"aria-describedby": controlProps["aria-describedby"],
-		className: clsx(rootClassName, wrapperProps.className),
+		className: rootClassName,
 		ref: localRadioRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
@@ -66,7 +65,6 @@ var RadioGroup = flowComponent("RadioGroup", (props) => {
 		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
-//#endregion
 export { RadioGroup, RadioGroup as default };
 
 //# sourceMappingURL=RadioGroup.mjs.map

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

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

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

@@ -1,9 +1,8 @@
 "use client"
 /* */
-//#region src/components/RadioGroup/RadioGroup.module.scss
+// src/components/RadioGroup/RadioGroup.module.scss
 var radioGroup = "flow--radio-group";
 var RadioGroup_module_default = { radioGroup };
-//#endregion
 export { RadioGroup_module_default as default, radioGroup };
 
 //# sourceMappingURL=RadioGroup.module.mjs.map

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

@@ -9,7 +9,7 @@ import Radio_module_default from "./Radio.module.mjs";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/RadioGroup/components/Radio/Radio.tsx
+// src/components/RadioGroup/components/Radio/Radio.tsx
 /** @flr-generate all */
 var Radio = flowComponent("Radio", (props) => {
 	const { children, className, ref, ...rest } = props;
@@ -32,7 +32,6 @@ var Radio = flowComponent("Radio", (props) => {
 		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [renderIcon(isSelected), /* @__PURE__ */ jsx(SkeletonRawText, { children })] })
 	});
 });
-//#endregion
 export { Radio, Radio as default };
 
 //# sourceMappingURL=Radio.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/RadioGroup/components/Radio/Radio.module.scss
+// src/components/RadioGroup/components/Radio/Radio.module.scss
 var radio = "flow--radio-group--radio";
 var icon = "flow--radio-group--radio--icon";
 var skeletonIcon = "flow--radio-group--radio--skeleton-icon";
@@ -12,7 +12,6 @@ var Radio_module_default = {
 	"skeleton-surface-shimmer": "flow--radio-group--radio--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--radio-group--radio--skeleton-text-shimmer"
 };
-//#endregion
 export { Radio_module_default as default, icon, radio, skeletonIcon };
 
 //# sourceMappingURL=Radio.module.mjs.map

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

@@ -7,7 +7,7 @@ import { Radio } from "../Radio/Radio.mjs";
 import RadioButton_module_default from "./RadioButton.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/RadioGroup/components/RadioButton/RadioButton.tsx
+// src/components/RadioGroup/components/RadioButton/RadioButton.tsx
 /** @flr-generate all */
 var RadioButton = flowComponent("RadioButton", (props) => {
 	const { children, className, ref, ...rest } = props;
@@ -28,7 +28,6 @@ var RadioButton = flowComponent("RadioButton", (props) => {
 	});
 	return isSkeleton ? /* @__PURE__ */ jsx(SkeletonModeReset, { children: radio }) : radio;
 });
-//#endregion
 export { RadioButton, RadioButton as default };
 
 //# sourceMappingURL=RadioButton.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/RadioGroup/components/RadioButton/RadioButton.module.scss
+// src/components/RadioGroup/components/RadioButton/RadioButton.module.scss
 var label = "flow--radio-group--radio-button--label";
 var content = "flow--radio-group--radio-button--content";
 var radioButton = "flow--radio-group--radio-button";
@@ -13,7 +13,6 @@ var RadioButton_module_default = {
 	"skeleton-surface-shimmer": "flow--radio-group--radio-button--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--radio-group--radio-button--skeleton-text-shimmer"
 };
-//#endregion
 export { content, RadioButton_module_default as default, label, radioButton, readonly };
 
 //# sourceMappingURL=RadioButton.module.mjs.map

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

@@ -14,7 +14,7 @@ import { Children } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
-//#region src/components/Rating/Rating.tsx
+// src/components/Rating/Rating.tsx
 var segmentsTunnelId = "segments";
 var toSegmentValue = (value) => value === void 0 ? void 0 : Math.round(value).toString();
 /**
@@ -44,6 +44,17 @@ var Rating = flowComponent("Rating", (props) => {
 		}
 	};
 	const defaultSegments = Array.from({ length: maxValue }, (_, index) => /* @__PURE__ */ jsx(RatingSegment, { ...segmentProps }, index));
+	const renderSegments = (tunnelChildren) => {
+		const tunneledSegments = Children.toArray(tunnelChildren);
+		const segments = tunneledSegments.length > 0 ? tunneledSegments : defaultSegments;
+		return segments.map((segment, index) => /* @__PURE__ */ jsx(RatingSegmentContextProvider, {
+			value: {
+				value: index + 1,
+				count: segments.length
+			},
+			children: segment
+		}, index));
+	};
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
 		"aria-describedby": controlProps["aria-describedby"],
@@ -65,22 +76,11 @@ var Rating = flowComponent("Rating", (props) => {
 			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 				id: segmentsTunnelId,
 				component: "Rating",
-				children: (tunnelChildren) => {
-					const tunneledSegments = Children.toArray(tunnelChildren);
-					const segments = tunneledSegments.length > 0 ? tunneledSegments : defaultSegments;
-					return segments.map((segment, index) => /* @__PURE__ */ jsx(RatingSegmentContextProvider, {
-						value: {
-							value: index + 1,
-							count: segments.length
-						},
-						children: segment
-					}, index));
-				}
+				children: renderSegments
 			}) })
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
-//#endregion
 export { Rating, Rating as default };
 
 //# sourceMappingURL=Rating.mjs.map

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

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

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Rating/Rating.module.scss
+// src/components/Rating/Rating.module.scss
 var rating = "flow--rating";
 var ratingSegments = "flow--rating--rating-segments";
 var ratingSegment = "flow--rating--rating-segment";
@@ -23,7 +23,6 @@ var Rating_module_default = {
 	"skeleton-surface-shimmer": "flow--rating--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--rating--skeleton-text-shimmer"
 };
-//#endregion
 export { current, Rating_module_default as default, empty, filled, rating, ratingSegment, ratingSegments, skeleton };
 
 //# sourceMappingURL=Rating.module.mjs.map

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

@@ -5,7 +5,7 @@ import { IconStar } from "../../../Icon/components/icons/IconStar.mjs";
 import Rating_module_default from "../../Rating.module.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/Rating/components/RatingSegment/EmptySegment.tsx
+// src/components/Rating/components/RatingSegment/EmptySegment.tsx
 var EmptySegment = (props) => {
 	const { size, children } = props;
 	const propsContext = { Icon: {
@@ -22,7 +22,6 @@ var EmptySegment = (props) => {
 		})
 	});
 };
-//#endregion
 export { EmptySegment };
 
 //# sourceMappingURL=EmptySegment.mjs.map

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

@@ -5,7 +5,7 @@ import { IconStarFilled } from "../../../Icon/components/icons/IconStarFilled.mj
 import Rating_module_default from "../../Rating.module.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/Rating/components/RatingSegment/FilledSegment.tsx
+// src/components/Rating/components/RatingSegment/FilledSegment.tsx
 var FilledSegment = (props) => {
 	const { size, children } = props;
 	const propsContext = { Icon: {
@@ -22,7 +22,6 @@ var FilledSegment = (props) => {
 		})
 	});
 };
-//#endregion
 export { FilledSegment };
 
 //# sourceMappingURL=FilledSegment.mjs.map

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

@@ -11,7 +11,7 @@ import clsx from "clsx";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Rating/components/RatingSegment/RatingSegment.tsx
+// src/components/Rating/components/RatingSegment/RatingSegment.tsx
 /**
 * @flr-generate all
 * @flr-slot-props iconEmpty, iconFilled
@@ -38,7 +38,6 @@ var RatingSegment = flowComponent("RatingSegment", (props) => {
 		})]
 	});
 });
-//#endregion
 export { RatingSegment, RatingSegment as default };
 
 //# sourceMappingURL=RatingSegment.mjs.map

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

@@ -1,14 +1,13 @@
 "use client"
 /* */
 import { createContext, useContext } from "react";
-//#region src/components/Rating/context.ts
+// src/components/Rating/context.ts
 var ratingSegmentContext = createContext({
 	value: 1,
 	count: 1
 });
 var useRatingSegmentContext = () => useContext(ratingSegmentContext);
 var RatingSegmentContextProvider = ratingSegmentContext.Provider;
-//#endregion
 export { RatingSegmentContextProvider, useRatingSegmentContext };
 
 //# sourceMappingURL=context.mjs.map

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

@@ -1,4 +1,3 @@
 "use client"
 /* */
-import { RouterProvider as RouterProvider$1 } from "react-aria-components";
-export { RouterProvider$1 as RouterProvider };
+export { RouterProvider } from "react-aria-components";

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

@@ -7,7 +7,6 @@ import { IconSearch } from "../Icon/components/icons/IconSearch.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../Button/Button.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import FormField_module_default from "../FormField/FormField.module.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import SearchField_module_default from "./SearchField.module.mjs";
@@ -15,12 +14,12 @@ import __locale_default from "../../../../../_virtual/_23.locale.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/SearchField/SearchField.tsx
+// src/components/SearchField/SearchField.tsx
 /** @flr-generate all */
 var SearchField = flowComponent("SearchField", (props) => {
 	const { children, className, ref, ...rest } = useControlledHostValueProps(props, "");
 	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, skeletonProps } = useFieldComponent(props, "SearchField");
-	const rootClassName = clsx(FormField_module_default.formField, SearchField_module_default.searchField, className);
+	const rootClassName = clsx(wrapperProps.className, SearchField_module_default.searchField, className);
 	const searchText = useLocalizedStringFormatter(__locale_default, "SearchField").format(`search`);
 	const propsContext = {
 		Kbd: {
@@ -38,7 +37,7 @@ var SearchField = flowComponent("SearchField", (props) => {
 		...controlProps,
 		...skeletonProps,
 		"aria-label": searchText,
-		className: clsx(rootClassName, wrapperProps.className),
+		className: rootClassName,
 		children: [/* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }), /* @__PURE__ */ jsxs("div", {
@@ -65,7 +64,6 @@ var SearchField = flowComponent("SearchField", (props) => {
 		}), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
-//#endregion
 export { SearchField, SearchField as default };
 
 //# sourceMappingURL=SearchField.mjs.map

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

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

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/SearchField/SearchField.module.scss
+// src/components/SearchField/SearchField.module.scss
 var searchField = "flow--search-field";
 var clearButton = "flow--search-field--clear-button";
 var searchIcon = "flow--search-field--search-icon";
@@ -19,7 +19,6 @@ var SearchField_module_default = {
 	"skeleton-surface-shimmer": "flow--search-field--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--search-field--skeleton-text-shimmer"
 };
-//#endregion
 export { clearButton, SearchField_module_default as default, input, inputContainer, kbd, readonly, searchField, searchIcon };
 
 //# sourceMappingURL=SearchField.module.mjs.map

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

@@ -2,16 +2,18 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SectionHeadingProvider, useSectionHeading } from "./context.mjs";
 import Section_module_default from "./Section.module.mjs";
 import ContextMenuSectionView from "../../views/ContextMenuSectionView.mjs";
 import clsx from "clsx";
 import { useId } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/Section/Section.tsx
+// src/components/Section/Section.tsx
 /** @flr-generate all */
 var Section = flowComponent("Section", (props) => {
 	const { children, className, ref, renderContextMenuSection, hideSeparator, ...rest } = props;
 	const headingId = useId();
+	const sectionHeading = useSectionHeading(headingId);
 	if (!children) return null;
 	if (renderContextMenuSection) return /* @__PURE__ */ jsx(ContextMenuSectionView, {
 		ref,
@@ -24,20 +26,21 @@ var Section = flowComponent("Section", (props) => {
 			id: headingId,
 			className: Section_module_default.heading
 		},
-		Header: { renderSectionHeader: true },
-		List: { "aria-labelledby": headingId }
+		Header: { renderSectionHeader: true }
 	};
 	return /* @__PURE__ */ jsx("section", {
 		...rest,
 		className: rootClassName,
 		ref,
-		children: /* @__PURE__ */ jsx(PropsContextProvider, {
-			props: propsContext,
-			children
+		children: /* @__PURE__ */ jsx(SectionHeadingProvider, {
+			value: sectionHeading,
+			children: /* @__PURE__ */ jsx(PropsContextProvider, {
+				props: propsContext,
+				children
+			})
 		})
 	});
 }, { type: "layout" });
-//#endregion
 export { Section, Section as default };
 
 //# sourceMappingURL=Section.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Section.mjs","names":["styles"],"sources":["../../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\n\nexport interface SectionProps\n  extends\n    PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  /** @internal */\n  renderContextMenuSection?: boolean;\n  /** @internal */\n  hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\n  \"Section\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      renderContextMenuSection,\n      hideSeparator,\n      ...rest\n    } = props;\n\n    const headingId = useId();\n\n    if (!children) {\n      return null;\n    }\n\n    if (renderContextMenuSection) {\n      return (\n        <ContextMenuSectionView ref={ref as never}>\n          {children}\n        </ContextMenuSectionView>\n      );\n    }\n\n    const rootClassName = clsx(\n      styles.section,\n      hideSeparator && styles.hideSeparator,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 2,\n        id: headingId,\n        className: styles.heading,\n      },\n      Header: {\n        renderSectionHeader: true,\n      },\n      List: {\n        \"aria-labelledby\": headingId,\n      },\n    };\n\n    return (\n      <section {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </section>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Section;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,UAAU,cACrB,YACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,0BACA,eACA,GAAG,SACD;CAEJ,MAAM,YAAY,MAAM;CAExB,IAAI,CAAC,UACH,OAAO;CAGT,IAAI,0BACF,OACE,oBAAC,wBAAD;EAA6B;EAC1B;CACqB,CAAA;CAI5B,MAAM,gBAAgB,KACpBA,uBAAO,SACP,iBAAiBA,uBAAO,eACxB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,IAAI;GACJ,WAAWA,uBAAO;EACpB;EACA,QAAQ,EACN,qBAAqB,KACvB;EACA,MAAM,EACJ,mBAAmB,UACrB;CACF;CAEA,OACE,oBAAC,WAAD;EAAS,GAAI;EAAM,WAAW;EAAoB;EAChD,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACf,CAAA;AAEb,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"Section.mjs","names":["styles"],"sources":["../../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\nimport { SectionHeadingProvider, useSectionHeading } from \"./context\";\n\nexport interface SectionProps\n  extends\n    PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  /** @internal */\n  renderContextMenuSection?: boolean;\n  /** @internal */\n  hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\n  \"Section\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      renderContextMenuSection,\n      hideSeparator,\n      ...rest\n    } = props;\n\n    const headingId = useId();\n    const sectionHeading = useSectionHeading(headingId);\n\n    if (!children) {\n      return null;\n    }\n\n    if (renderContextMenuSection) {\n      return (\n        <ContextMenuSectionView ref={ref as never}>\n          {children}\n        </ContextMenuSectionView>\n      );\n    }\n\n    const rootClassName = clsx(\n      styles.section,\n      hideSeparator && styles.hideSeparator,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 2,\n        id: headingId,\n        className: styles.heading,\n      },\n      Header: {\n        renderSectionHeader: true,\n      },\n    };\n\n    return (\n      <section {...rest} className={rootClassName} ref={ref}>\n        <SectionHeadingProvider value={sectionHeading}>\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </SectionHeadingProvider>\n      </section>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Section;\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAa,UAAU,cACrB,YACC,UAAU;CACT,MAAM,EACJ,UACA,WACA,KACA,0BACA,eACA,GAAG,SACD;CAEJ,MAAM,YAAY,MAAM;CACxB,MAAM,iBAAiB,kBAAkB,SAAS;CAElD,IAAI,CAAC,UACH,OAAO;CAGT,IAAI,0BACF,OACE,oBAAC,wBAAD;EAA6B;EAC1B;CACqB,CAAA;CAI5B,MAAM,gBAAgB,KACpBA,uBAAO,SACP,iBAAiBA,uBAAO,eACxB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,OAAO;GACP,IAAI;GACJ,WAAWA,uBAAO;EACpB;EACA,QAAQ,EACN,qBAAqB,KACvB;CACF;CAEA,OACE,oBAAC,WAAD;EAAS,GAAI;EAAM,WAAW;EAAoB;EAChD,UAAA,oBAAC,wBAAD;GAAwB,OAAO;GAC7B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACA,CAAA;CACjB,CAAA;AAEb,GACA,EACE,MAAM,SACR,CACF"}