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

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/CartesianChart/CartesianChart.module.scss
+// src/components/CartesianChart/CartesianChart.module.scss
 var cartesianChart = "flow--cartesian-chart";
 var emptyViewContainer = "flow--cartesian-chart--empty-view-container";
 var emptyView = "flow--cartesian-chart--empty-view";
@@ -13,7 +13,6 @@ var CartesianChart_module_default = {
 	"skeleton-surface-shimmer": "flow--cartesian-chart--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--cartesian-chart--skeleton-text-shimmer"
 };
-//#endregion
 export { cartesianChart, CartesianChart_module_default as default, emptyView, emptyViewContainer, skeleton };
 
 //# sourceMappingURL=CartesianChart.module.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/Area/Area.mjs

@@ -9,7 +9,7 @@ import { useChartAnimation } from "../../hooks/useChartAnimation.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
-//#region src/components/CartesianChart/components/Area/Area.tsx
+// src/components/CartesianChart/components/Area/Area.tsx
 /** @flr-generate all */
 var Area = (props) => {
 	const { color: colorFromProps = "sea-green", stackId: stackIdFromProps = 1, fillOpacity = 1, ...rest } = props;
@@ -30,7 +30,6 @@ var Area = (props) => {
 	});
 };
 var TypedArea = () => Area;
-//#endregion
 export { Area, Area as default, TypedArea };
 
 //# sourceMappingURL=Area.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/CartesianChart/components/AreaDot/AreaDot.tsx
+// src/components/CartesianChart/components/AreaDot/AreaDot.tsx
 var AreaDot = ({ cx, cy, color }) => {
 	if (cx === void 0 || cy === void 0) return null;
 	return /* @__PURE__ */ jsxs("svg", {
@@ -27,7 +27,6 @@ var AreaDot = ({ cx, cy, color }) => {
 		})]
 	});
 };
-//#endregion
 export { AreaDot, AreaDot as default };
 
 //# sourceMappingURL=AreaDot.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/Bar/Bar.mjs

@@ -9,7 +9,7 @@ import { useChartAnimation } from "../../hooks/useChartAnimation.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
-//#region src/components/CartesianChart/components/Bar/Bar.tsx
+// src/components/CartesianChart/components/Bar/Bar.tsx
 /** @flr-generate all */
 var Bar = (props) => {
 	const { color: colorFromProps = "sea-green", ...rest } = props;
@@ -46,7 +46,6 @@ var Bar = (props) => {
 	});
 };
 var TypedBar = () => Bar;
-//#endregion
 export { Bar, Bar as default, TypedBar };
 
 //# sourceMappingURL=Bar.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/CartesianGrid/CartesianGrid.mjs

@@ -3,7 +3,7 @@
 import { useWarnDeprecation } from "../../../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
 import { ChartGrid } from "../ChartGrid/ChartGrid.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/CartesianChart/components/CartesianGrid/CartesianGrid.tsx
+// src/components/CartesianChart/components/CartesianGrid/CartesianGrid.tsx
 /**
 * @deprecated Use ChartGrid
 * @flr-generate all
@@ -12,7 +12,6 @@ var CartesianGrid = (props) => {
 	useWarnDeprecation()("The 'CartesianGrid' component is deprecated and will be removed in a future release. Use 'ChartGrid' instead.");
 	return /* @__PURE__ */ jsx(ChartGrid, { ...props });
 };
-//#endregion
 export { CartesianGrid };
 
 //# sourceMappingURL=CartesianGrid.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/ChartGrid/ChartGrid.mjs

@@ -3,7 +3,7 @@
 import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
-//#region src/components/CartesianChart/components/ChartGrid/ChartGrid.tsx
+// src/components/CartesianChart/components/ChartGrid/ChartGrid.tsx
 /** @flr-generate all */
 var ChartGrid = (props) => {
 	const { vertical = false, ...rest } = props;
@@ -16,7 +16,6 @@ var ChartGrid = (props) => {
 	});
 };
 var TypedChartGrid = () => ChartGrid;
-//#endregion
 export { ChartGrid, ChartGrid as default, TypedChartGrid };
 
 //# sourceMappingURL=ChartGrid.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/ChartLegend/ChartLegend.mjs

@@ -3,7 +3,7 @@
 import LegendContent from "./LegendContent.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
-//#region src/components/CartesianChart/components/ChartLegend/ChartLegend.tsx
+// src/components/CartesianChart/components/ChartLegend/ChartLegend.tsx
 /** @flr-generate all */
 var ChartLegend = (props) => {
 	const { formatter, ...rest } = props;
@@ -13,7 +13,6 @@ var ChartLegend = (props) => {
 	});
 };
 var TypedChartLegend = () => ChartLegend;
-//#endregion
 export { ChartLegend, ChartLegend as default, TypedChartLegend };
 
 //# sourceMappingURL=ChartLegend.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/ChartLegend/LegendContent.mjs

@@ -4,7 +4,7 @@ import { isDataKeyWithLabel } from "../../types.mjs";
 import { Legend } from "../../../Legend/Legend.mjs";
 import { LegendItem } from "../../../Legend/components/LegendItem/LegendItem.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/CartesianChart/components/ChartLegend/LegendContent.tsx
+// src/components/CartesianChart/components/ChartLegend/LegendContent.tsx
 var LegendContent = (props) => {
 	const { formatter, payload } = props;
 	return /* @__PURE__ */ jsx(Legend, { children: payload?.filter((entry) => entry.payload && "fill" in entry.payload && entry.payload?.fill !== "none").map((entry, index) => {
@@ -17,7 +17,6 @@ var LegendContent = (props) => {
 		}, `legendItem-${index}`);
 	}) });
 };
-//#endregion
 export { LegendContent as default };
 
 //# sourceMappingURL=LegendContent.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs

@@ -8,7 +8,7 @@ import clsx from "clsx";
 import { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Tooltip } from "recharts";
-//#region src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx
+// src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx
 /** @flr-generate all */
 var ChartTooltip = (props) => {
 	const { headingFormatter, formatter, showProgressBar = true, ...rest } = props;
@@ -33,7 +33,6 @@ var ChartTooltip = (props) => {
 		}
 	});
 };
-//#endregion
 export { ChartTooltip, ChartTooltip as default, TypedChartTooltip };
 
 //# sourceMappingURL=ChartTooltip.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.mjs

@@ -1,13 +1,12 @@
 "use client"
 /* */
-//#region src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.scss
+// src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.scss
 var chartTooltip = "flow--cartesian-chart--chart-tooltip";
 var progressBar = "flow--cartesian-chart--chart-tooltip--progress-bar";
 var ChartTooltip_module_default = {
 	chartTooltip,
 	progressBar
 };
-//#endregion
 export { chartTooltip, ChartTooltip_module_default as default, progressBar };
 
 //# sourceMappingURL=ChartTooltip.module.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipContent.mjs

@@ -8,7 +8,7 @@ import { Flex } from "../../../Flex/Flex.mjs";
 import { Suspense } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { usePromise } from "@mittwald/react-use-promise";
-//#region src/components/CartesianChart/components/ChartTooltip/TooltipContent.tsx
+// src/components/CartesianChart/components/ChartTooltip/TooltipContent.tsx
 /** @internal */
 var TooltipContent = (props) => {
 	const { headingFormatter, formatter, progressBarFormatter, label, payload, showProgressBar } = props;
@@ -40,7 +40,6 @@ var TooltipContent = (props) => {
 		]
 	});
 };
-//#endregion
 export { TooltipContent };
 
 //# sourceMappingURL=TooltipContent.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.mjs

@@ -3,7 +3,7 @@
 import { LegendItem } from "../../../Legend/components/LegendItem/LegendItem.mjs";
 import { jsx } from "react/jsx-runtime";
 import { usePromise } from "@mittwald/react-use-promise";
-//#region src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx
+// src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx
 /** @internal */
 var TooltipLegendItem = ({ formatter, item, index }) => {
 	const { value, dataKey, unit, fill, name } = item;
@@ -20,7 +20,6 @@ var TooltipLegendItem = ({ formatter, item, index }) => {
 		children: formattedLabel
 	});
 };
-//#endregion
 export { TooltipLegendItem };
 
 //# sourceMappingURL=TooltipLegendItem.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.mjs

@@ -7,7 +7,7 @@ import __locale_default from "../../../../../../../_virtual/_10.locale.mjs";
 import ChartTooltip_module_default from "./ChartTooltip.module.mjs";
 import { jsx } from "react/jsx-runtime";
 import { usePromise } from "@mittwald/react-use-promise";
-//#region src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx
+// src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx
 var TooltipProgressBar = (props) => {
 	const { items, progressBarFormatter } = props;
 	const areaItems = items.filter((item) => item.fill !== "none" && item.graphicalItemId.includes("area"));
@@ -37,7 +37,6 @@ var TooltipProgressBar = (props) => {
 		children: /* @__PURE__ */ jsx(Label, { children: stringFormatter.format("tooltip.progressBar.total") })
 	});
 };
-//#endregion
 export { TooltipProgressBar };
 
 //# sourceMappingURL=TooltipProgressBar.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/types.mjs

@@ -1,9 +1,8 @@
 "use client"
 /* */
 import { ChartTooltip } from "./ChartTooltip.mjs";
-//#region src/components/CartesianChart/components/ChartTooltip/types.ts
+// src/components/CartesianChart/components/ChartTooltip/types.ts
 var TypedChartTooltip = () => ChartTooltip;
-//#endregion
 export { TypedChartTooltip };
 
 //# sourceMappingURL=types.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/Line/Line.mjs

@@ -7,7 +7,7 @@ import { useChartAnimation } from "../../hooks/useChartAnimation.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
-//#region src/components/CartesianChart/components/Line/Line.tsx
+// src/components/CartesianChart/components/Line/Line.tsx
 /** @flr-generate all */
 var Line = (props) => {
 	const { color: colorFromProps = "sea-green", ...rest } = props;
@@ -25,7 +25,6 @@ var Line = (props) => {
 	});
 };
 var TypedLine = () => Line;
-//#endregion
 export { Line, Line as default, TypedLine };
 
 //# sourceMappingURL=Line.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs

@@ -4,7 +4,7 @@ import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.m
 import { TypedXAxis } from "./types.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
-//#region src/components/CartesianChart/components/XAxis/XAxis.tsx
+// src/components/CartesianChart/components/XAxis/XAxis.tsx
 /**
 * `tickFormatter` is deliberately not part of the remote surface. A function
 * property crosses the boundary as a thread proxy whose call returns a Promise,
@@ -27,7 +27,6 @@ var XAxis = (props) => {
 		tickSize: parseInt(tokens.axis["tick-size"].value)
 	});
 };
-//#endregion
 export { TypedXAxis, XAxis, XAxis as default };
 
 //# sourceMappingURL=XAxis.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/types.mjs

@@ -1,9 +1,8 @@
 "use client"
 /* */
 import { XAxis } from "./XAxis.mjs";
-//#region src/components/CartesianChart/components/XAxis/types.ts
+// src/components/CartesianChart/components/XAxis/types.ts
 var TypedXAxis = () => XAxis;
-//#endregion
 export { TypedXAxis };
 
 //# sourceMappingURL=types.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs

@@ -2,10 +2,11 @@
 /* */
 import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
 import { useCartesianChartContext } from "../../context.mjs";
+import { useTickLabelWidth } from "../../hooks/useTickLabelWidth.mjs";
 import { TypedYAxis } from "./types.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
-//#region src/components/CartesianChart/components/YAxis/YAxis.tsx
+// src/components/CartesianChart/components/YAxis/YAxis.tsx
 /**
 * `tickFormatter` is deliberately not part of the remote surface. A function
 * property crosses the boundary as a thread proxy whose call returns a Promise,
@@ -20,20 +21,36 @@ var YAxis = (props) => {
 	const { domain, type = "auto", width, ...rest } = props;
 	const tokens = useDesignTokens();
 	const { layout } = useCartesianChartContext();
-	const isCategoryAxis = type === "category" || type === "auto" && layout === "vertical";
+	const tickLabels = useTickLabelWidth();
+	const isAutoWidth = (width ?? (type === "category" || type === "auto" && layout === "vertical" ? "auto" : void 0)) === "auto";
+	const tickMargin = parseInt(tokens.axis.spacing.value);
+	const tickSize = parseInt(tokens.axis["tick-size"].value);
+	const tickFill = tokens.axis["color"].value;
+	const autoWidth = tickLabels.width === void 0 ? "auto" : tickLabels.width + tickSize + tickMargin;
+	const measuredTick = (tickProps) => {
+		const { payload, index, tickFormatter } = tickProps;
+		const value = `${tickFormatter ? tickFormatter(payload.value, index) : payload.value}${rest.unit ?? ""}`;
+		return /* @__PURE__ */ jsx(Recharts.Text, {
+			...tickProps,
+			ref: tickLabels.labelRef,
+			className: "recharts-cartesian-axis-tick-value",
+			fill: tickFill,
+			width: void 0,
+			children: value
+		});
+	};
 	return /* @__PURE__ */ jsx(Recharts.YAxis, {
 		...rest,
 		allowDataOverflow: true,
 		domain,
 		type,
-		width: width ?? (isCategoryAxis ? "auto" : void 0),
+		width: isAutoWidth ? autoWidth : width,
 		fontSize: tokens.axis["font-size"].value,
-		tick: { fill: tokens.axis["color"].value },
-		tickMargin: parseInt(tokens.axis.spacing.value),
-		tickSize: parseInt(tokens.axis["tick-size"].value)
+		tick: isAutoWidth ? measuredTick : { fill: tickFill },
+		tickMargin,
+		tickSize
 	});
 };
-//#endregion
 export { TypedYAxis, YAxis, YAxis as default };
 
 //# sourceMappingURL=YAxis.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n  /**\n   * The width of the axis in pixels. `\"auto\"` sizes the axis to its widest tick\n   * label. Defaults to `\"auto\"` for a category axis (e.g. with `layout` set to\n   * `\"vertical\"`) and to `60` otherwise. Pin a number to align the plot areas\n   * of synchronized charts.\n   */\n  width?: number | \"auto\";\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", width, ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n\n  const isCategoryAxis =\n    type === \"category\" || (type === \"auto\" && layout === \"vertical\");\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      width={width ?? (isCategoryAxis ? \"auto\" : undefined)}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={{\n        fill: tokens.axis[\"color\"].value,\n      }}\n      tickMargin={parseInt(tokens.axis.spacing.value)}\n      tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgDA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,GAAG,SAAS;CAElD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAE5C,MAAM,iBACJ,SAAS,cAAe,SAAS,UAAU,WAAW;CAExD,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,OAAO,UAAU,iBAAiB,SAAS,KAAA;EAC3C,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}
+{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n  ChartDataValue,\n  DataKey,\n  DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\nimport { useTickLabelWidth } from \"@/components/CartesianChart/hooks/useTickLabelWidth\";\n\nexport type YAxisProps<\n  TData extends ChartDataValue = ChartDataValue,\n  TDataKey extends DataKey<TData> = DataKey<TData>,\n  TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n  Recharts.YAxisProps,\n  | \"className\"\n  | \"orientation\"\n  | \"allowDecimals\"\n  | \"interval\"\n  | \"minTickGap\"\n  | \"scale\"\n  | \"type\"\n  | \"domain\"\n  | \"hide\"\n  | \"unit\"\n> & {\n  dataKey?: TDataKey;\n  tickFormatter?: (value: TDataMatch, index: number) => string;\n  /**\n   * The width of the axis in pixels. `\"auto\"` sizes the axis to its widest tick\n   * label. Defaults to `\"auto\"` for a category axis (e.g. with `layout` set to\n   * `\"vertical\"`) and to `60` otherwise. Pin a number to align the plot areas\n   * of synchronized charts.\n   */\n  width?: number | \"auto\";\n};\n\n/**\n * `tickFormatter` is deliberately not part of the remote surface. A function\n * property crosses the boundary as a thread proxy whose call returns a Promise,\n * and recharts concatenates the formatter's result straight into the tick label\n * — so remotely every tick rendered `[object Promise]`. Dropping it from the\n * remote surface leaves the raw value there; the prop keeps working locally.\n *\n * @flr-generate all\n * @flr-ignore-props tickFormatter\n */\nexport const YAxis: FC<YAxisProps> = (props) => {\n  const { domain, type = \"auto\", width, ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n  const tickLabels = useTickLabelWidth();\n\n  const isCategoryAxis =\n    type === \"category\" || (type === \"auto\" && layout === \"vertical\");\n  const isAutoWidth =\n    (width ?? (isCategoryAxis ? \"auto\" : undefined)) === \"auto\";\n\n  const tickMargin = parseInt(tokens.axis.spacing.value);\n  const tickSize = parseInt(tokens.axis[\"tick-size\"].value);\n  const tickFill = tokens.axis[\"color\"].value;\n\n  /*\n   * Recharts' own `\"auto\"` stays in charge until the labels are measured, so\n   * the first frame is close already.\n   */\n  const autoWidth =\n    tickLabels.width === undefined\n      ? \"auto\"\n      : tickLabels.width + tickSize + tickMargin;\n\n  /*\n   * Recharts' default tick label, plus the measuring ref. Recharts passes a\n   * numeric axis width on to the label, which wraps once the text is wider —\n   * so the label drops it, as it does with `\"auto\"`.\n   */\n  const measuredTick = (tickProps: Recharts.YAxisTickContentProps) => {\n    const { payload, index, tickFormatter } = tickProps;\n    const value = `${tickFormatter ? tickFormatter(payload.value, index) : payload.value}${rest.unit ?? \"\"}`;\n    return (\n      <Recharts.Text\n        {...tickProps}\n        ref={tickLabels.labelRef}\n        className=\"recharts-cartesian-axis-tick-value\"\n        fill={tickFill}\n        width={undefined}\n      >\n        {value}\n      </Recharts.Text>\n    );\n  };\n\n  return (\n    <Recharts.YAxis\n      {...rest}\n      allowDataOverflow\n      domain={domain}\n      type={type}\n      width={isAutoWidth ? autoWidth : width}\n      fontSize={tokens.axis[\"font-size\"].value}\n      tick={isAutoWidth ? measuredTick : { fill: tickFill }}\n      tickMargin={tickMargin}\n      tickSize={tickSize}\n    />\n  );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,GAAG,SAAS;CAElD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAC5C,MAAM,aAAa,kBAAkB;CAIrC,MAAM,eACH,UAFD,SAAS,cAAe,SAAS,UAAU,WAAW,aAE1B,SAAS,KAAA,QAAgB;CAEvD,MAAM,aAAa,SAAS,OAAO,KAAK,QAAQ,KAAK;CACrD,MAAM,WAAW,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CACxD,MAAM,WAAW,OAAO,KAAK,QAAQ,CAAC;CAMtC,MAAM,YACJ,WAAW,UAAU,KAAA,IACjB,SACA,WAAW,QAAQ,WAAW;CAOpC,MAAM,gBAAgB,cAA8C;EAClE,MAAM,EAAE,SAAS,OAAO,kBAAkB;EAC1C,MAAM,QAAQ,GAAG,gBAAgB,cAAc,QAAQ,OAAO,KAAK,IAAI,QAAQ,QAAQ,KAAK,QAAQ;EACpG,OACE,oBAAC,SAAS,MAAV;GACE,GAAI;GACJ,KAAK,WAAW;GAChB,WAAU;GACV,MAAM;GACN,OAAO,KAAA;GAEN,UAAA;EACY,CAAA;CAEnB;CAEA,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,OAAO,cAAc,YAAY;EACjC,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,cAAc,eAAe,EAAE,MAAM,SAAS;EACxC;EACF;CACX,CAAA;AAEL"}

package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/types.mjs

@@ -1,9 +1,8 @@
 "use client"
 /* */
 import { YAxis } from "./YAxis.mjs";
-//#region src/components/CartesianChart/components/YAxis/types.ts
+// src/components/CartesianChart/components/YAxis/types.ts
 var TypedYAxis = () => YAxis;
-//#endregion
 export { TypedYAxis };
 
 //# sourceMappingURL=types.mjs.map

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

@@ -1,14 +1,13 @@
 "use client"
 /* */
 import { createContext, useContext } from "react";
-//#region src/components/CartesianChart/context.ts
+// src/components/CartesianChart/context.ts
 var cartesianChartContext = createContext({
 	layout: "horizontal",
 	stackIdPrefix: ""
 });
 var useCartesianChartContext = () => useContext(cartesianChartContext);
 var CartesianChartContextProvider = cartesianChartContext.Provider;
-//#endregion
 export { CartesianChartContextProvider, useCartesianChartContext };
 
 //# sourceMappingURL=context.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useChartAnimation.mjs

@@ -2,7 +2,7 @@
 /* */
 import { useDesignTokens } from "../../../lib/theming/hooks/useDesignTokens.mjs";
 import { useReducedMotion } from "framer-motion";
-//#region src/components/CartesianChart/hooks/useChartAnimation.ts
+// src/components/CartesianChart/hooks/useChartAnimation.ts
 /**
 * Animation props for the chart's graphical items. Recharts animates on mount
 * by default and does not look at the user's motion preference on its own.
@@ -21,7 +21,6 @@ var useChartAnimation = () => {
 		animationEasing: "ease"
 	};
 };
-//#endregion
 export { useChartAnimation };
 
 //# sourceMappingURL=useChartAnimation.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useChartClipRect.mjs

@@ -2,7 +2,7 @@
 /* */
 import { useEffect, useRef, useState } from "react";
 import { useCallbackRef } from "use-callback-ref";
-//#region src/components/CartesianChart/hooks/useChartClipRect.ts
+// src/components/CartesianChart/hooks/useChartClipRect.ts
 /** @internal * */
 var useChartClipRect = () => {
 	const observerRef = useRef(null);
@@ -63,7 +63,6 @@ var useChartClipRect = () => {
 		})
 	};
 };
-//#endregion
 export { useChartClipRect };
 
 //# sourceMappingURL=useChartClipRect.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useScopedStackId.mjs

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import { useCartesianChartContext } from "../context.mjs";
-//#region src/components/CartesianChart/hooks/useScopedStackId.ts
+// src/components/CartesianChart/hooks/useScopedStackId.ts
 /**
 * Scopes a stack ID to the surrounding chart, so that charts on the same page
 * using the same stack ID do not share the DOM IDs Recharts derives from it.
@@ -10,7 +10,6 @@ var useScopedStackId = (stackId) => {
 	const { stackIdPrefix } = useCartesianChartContext();
 	return stackId === void 0 ? void 0 : `${stackIdPrefix}${stackId}`;
 };
-//#endregion
 export { useScopedStackId };
 
 //# sourceMappingURL=useScopedStackId.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useTickLabelWidth.mjs

@@ -0,0 +1,66 @@
+"use client"
+/* */
+import { createFrameResizeObserver } from "../../../lib/dom/createFrameResizeObserver.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+// src/components/CartesianChart/hooks/useTickLabelWidth.ts
+var measureLabel = (label) => {
+	try {
+		return label.getBBox().width;
+	} catch {
+		return 0;
+	}
+};
+/**
+* Measures the widest tick label of an axis, for an axis that sizes itself to
+* its labels.
+*
+* Replaces recharts' own `width="auto"` measurement, which undersizes the axis
+* in two ways. It reads `getBoundingClientRect()` — screen pixels, which a CSS
+* `zoom` or `transform` on an ancestor scales — and uses the result as SVG user
+* units. And it measures once, so a web font that replaces its fallback after
+* mount widens the labels past the axis. `getBBox()` measures in user units,
+* and a `ResizeObserver` — which tracks an SVG element's bbox — measures again
+* whenever a label changes size: a font swap, a new text, a hidden chart that
+* is shown.
+*
+* Attach the returned ref to every tick label. The width is `undefined` until a
+* label has been measured.
+*
+* @internal
+*/
+var useTickLabelWidth = () => {
+	const labels = useRef(/* @__PURE__ */ new Set());
+	const observer = useRef(null);
+	const [width, setWidth] = useState();
+	const measure = useCallback(() => {
+		const widest = Math.max(0, ...[...labels.current].map(measureLabel));
+		setWidth(widest > 0 ? Math.ceil(widest) : void 0);
+	}, []);
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const frameObserver = createFrameResizeObserver(measure);
+		frameObserver.observe(labels.current);
+		observer.current = frameObserver;
+		return () => {
+			frameObserver.disconnect();
+			observer.current = null;
+		};
+	}, [measure]);
+	return {
+		width,
+		labelRef: useCallback((label) => {
+			if (!label) return;
+			labels.current.add(label);
+			observer.current?.observe(labels.current);
+			measure();
+			return () => {
+				labels.current.delete(label);
+				observer.current?.observe(labels.current);
+				measure();
+			};
+		}, [measure])
+	};
+};
+export { useTickLabelWidth };
+
+//# sourceMappingURL=useTickLabelWidth.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useTickLabelWidth.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTickLabelWidth.mjs","names":[],"sources":["../../../../../../../../src/components/CartesianChart/hooks/useTickLabelWidth.ts"],"sourcesContent":["import {\n  type RefCallback,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  createFrameResizeObserver,\n  type FrameResizeObserver,\n} from \"@/lib/dom/createFrameResizeObserver\";\n\nconst measureLabel = (label: SVGTextElement): number => {\n  try {\n    return label.getBBox().width;\n  } catch {\n    // Firefox throws for an element that is not rendered, and jsdom has no\n    // `getBBox` at all.\n    return 0;\n  }\n};\n\n/**\n * Measures the widest tick label of an axis, for an axis that sizes itself to\n * its labels.\n *\n * Replaces recharts' own `width=\"auto\"` measurement, which undersizes the axis\n * in two ways. It reads `getBoundingClientRect()` — screen pixels, which a CSS\n * `zoom` or `transform` on an ancestor scales — and uses the result as SVG user\n * units. And it measures once, so a web font that replaces its fallback after\n * mount widens the labels past the axis. `getBBox()` measures in user units,\n * and a `ResizeObserver` — which tracks an SVG element's bbox — measures again\n * whenever a label changes size: a font swap, a new text, a hidden chart that\n * is shown.\n *\n * Attach the returned ref to every tick label. The width is `undefined` until a\n * label has been measured.\n *\n * @internal\n */\nexport const useTickLabelWidth = () => {\n  const labels = useRef(new Set<SVGTextElement>());\n  const observer = useRef<FrameResizeObserver>(null);\n  const [width, setWidth] = useState<number>();\n\n  const measure = useCallback(() => {\n    const widest = Math.max(0, ...[...labels.current].map(measureLabel));\n    setWidth(widest > 0 ? Math.ceil(widest) : undefined);\n  }, []);\n\n  useEffect(() => {\n    // jsdom has no `ResizeObserver`.\n    if (typeof ResizeObserver === \"undefined\") {\n      return;\n    }\n    const frameObserver = createFrameResizeObserver(measure);\n    frameObserver.observe(labels.current);\n    observer.current = frameObserver;\n    return () => {\n      frameObserver.disconnect();\n      observer.current = null;\n    };\n  }, [measure]);\n\n  const labelRef: RefCallback<SVGTextElement> = useCallback(\n    (label) => {\n      if (!label) {\n        return;\n      }\n      labels.current.add(label);\n      observer.current?.observe(labels.current);\n      measure();\n      return () => {\n        labels.current.delete(label);\n        observer.current?.observe(labels.current);\n        measure();\n      };\n    },\n    [measure],\n  );\n\n  return { width, labelRef };\n};\n"],"mappings":";;;;;AAYA,IAAM,gBAAgB,UAAkC;CACtD,IAAI;EACF,OAAO,MAAM,QAAQ,CAAC,CAAC;CACzB,QAAQ;EAGN,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;AAoBA,IAAa,0BAA0B;CACrC,MAAM,SAAS,uBAAO,IAAI,IAAoB,CAAC;CAC/C,MAAM,WAAW,OAA4B,IAAI;CACjD,MAAM,CAAC,OAAO,YAAY,SAAiB;CAE3C,MAAM,UAAU,kBAAkB;EAChC,MAAM,SAAS,KAAK,IAAI,GAAG,GAAG,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,IAAI,YAAY,CAAC;EACnE,SAAS,SAAS,IAAI,KAAK,KAAK,MAAM,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,CAAC;CAEL,gBAAgB;EAEd,IAAI,OAAO,mBAAmB,aAC5B;EAEF,MAAM,gBAAgB,0BAA0B,OAAO;EACvD,cAAc,QAAQ,OAAO,OAAO;EACpC,SAAS,UAAU;EACnB,aAAa;GACX,cAAc,WAAW;GACzB,SAAS,UAAU;EACrB;CACF,GAAG,CAAC,OAAO,CAAC;CAmBZ,OAAO;EAAE;EAAO,UAjB8B,aAC3C,UAAU;GACT,IAAI,CAAC,OACH;GAEF,OAAO,QAAQ,IAAI,KAAK;GACxB,SAAS,SAAS,QAAQ,OAAO,OAAO;GACxC,QAAQ;GACR,aAAa;IACX,OAAO,QAAQ,OAAO,KAAK;IAC3B,SAAS,SAAS,QAAQ,OAAO,OAAO;IACxC,QAAQ;GACV;EACF,GACA,CAAC,OAAO,CAGM;CAAS;AAC3B"}

package/dist/js/packages/components/src/components/CartesianChart/types.mjs

@@ -1,10 +1,9 @@
 "use client"
 /* */
-//#region src/components/CartesianChart/types.ts
+// src/components/CartesianChart/types.ts
 var isDataKeyWithLabel = (obj) => {
 	return typeof obj === "object" && obj !== null && "dataKeyLabel" in obj && typeof obj.dataKeyLabel === "string";
 };
-//#endregion
 export { isDataKeyWithLabel };
 
 //# sourceMappingURL=types.mjs.map

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

@@ -7,7 +7,7 @@ import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExi
 import Chat_module_default from "./Chat.module.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Chat/Chat.tsx
+// src/components/Chat/Chat.tsx
 /** @flr-generate all */
 var Chat = flowComponent("Chat", (props) => {
 	const { height, className, children } = props;
@@ -53,7 +53,6 @@ var Chat = flowComponent("Chat", (props) => {
 		})
 	});
 }, { type: "layout" });
-//#endregion
 export { Chat, Chat as default };
 
 //# sourceMappingURL=Chat.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Chat/Chat.module.scss
+// src/components/Chat/Chat.module.scss
 var chat = "flow--chat";
 var messageThreadContainer = "flow--chat--message-thread-container";
 var fileCardList = "flow--chat--file-card-list";
@@ -15,7 +15,6 @@ var Chat_module_default = {
 	successButton,
 	button
 };
-//#endregion
 export { button, chat, controls, Chat_module_default as default, fileCardList, messageThreadContainer, successButton };
 
 //# sourceMappingURL=Chat.module.mjs.map

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

@@ -13,7 +13,7 @@ import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "react-aria";
 import * as Aria from "react-aria-components";
-//#region src/components/Checkbox/Checkbox.tsx
+// src/components/Checkbox/Checkbox.tsx
 /** @flr-generate all */
 var Checkbox = flowComponent("Checkbox", (props) => {
 	const { children, className, ref, inputClassName, ...rest } = props;
@@ -33,12 +33,12 @@ var Checkbox = flowComponent("Checkbox", (props) => {
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		...skeletonProps,
-		className: clsx(Checkbox_module_default.checkbox, className, wrapperProps.className),
+		className: clsx(wrapperProps.className, Checkbox_module_default.checkbox, className),
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Checkbox, {
 			...rest,
 			"aria-describedby": controlProps["aria-describedby"],
 			inputRef,
-			className: clsx(inputClassName, Checkbox_module_default.input),
+			className: clsx(Checkbox_module_default.input, inputClassName),
 			children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
 				props: fieldPropsContext,
 				children: [renderIcon(isSelected, isIndeterminate), /* @__PURE__ */ jsx(SkeletonRawText, { children })]
@@ -46,7 +46,6 @@ var Checkbox = flowComponent("Checkbox", (props) => {
 		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
-//#endregion
 export { Checkbox, Checkbox as default };
 
 //# sourceMappingURL=Checkbox.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["styles"],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The class name of the underlying input element. */\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n  const isSkeleton = useSkeletonMode();\n\n  const checkedIcon = <IconCheckboxChecked className={styles.icon} />;\n  const indeterminateIcon = (\n    <IconCheckboxIndeterminate className={styles.icon} />\n  );\n  const emptyIcon = <IconCheckboxEmpty className={styles.icon} />;\n\n  const renderIcon = (isSelected: boolean, isIndeterminate: boolean) => {\n    const icon = isSelected\n      ? checkedIcon\n      : isIndeterminate\n        ? indeterminateIcon\n        : emptyIcon;\n\n    const skeletonIcon = (\n      <span className={styles.skeletonIcon}>\n        <SkeletonModeReset>{icon}</SkeletonModeReset>\n      </span>\n    );\n\n    return isSkeleton ? skeletonIcon : icon;\n  };\n\n  return (\n    <div\n      {...skeletonProps}\n      className={clsx(styles.checkbox, className, wrapperProps.className)}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          inputRef={inputRef}\n          className={clsx(inputClassName, styles.input)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {renderIcon(isSelected, isIndeterminate)}\n              <SkeletonRawText>{children}</SkeletonRawText>\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,cAAc,oBAAC,qBAAD,EAAqB,WAAWA,wBAAO,KAAO,CAAA;CAClE,MAAM,oBACJ,oBAAC,2BAAD,EAA2B,WAAWA,wBAAO,KAAO,CAAA;CAEtD,MAAM,YAAY,oBAAC,mBAAD,EAAmB,WAAWA,wBAAO,KAAO,CAAA;CAE9D,MAAM,cAAc,YAAqB,oBAA6B;EACpE,MAAM,OAAO,aACT,cACA,kBACE,oBACA;EAEN,MAAM,eACJ,oBAAC,QAAD;GAAM,WAAWA,wBAAO;GACtB,UAAA,oBAAC,mBAAD,EAAA,UAAoB,KAAwB,CAAA;EACxC,CAAA;EAGR,OAAO,aAAa,eAAe;CACrC;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAKA,wBAAO,UAAU,WAAW,aAAa,SAAS;EAFpE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GACrB;GACV,WAAW,KAAK,gBAAgBA,wBAAO,KAAK;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,WAAW,YAAY,eAAe,GACvC,oBAAC,iBAAD,EAAkB,SAA0B,CAAA,CACxB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
+{"version":3,"file":"Checkbox.mjs","names":["styles"],"sources":["../../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"react-aria\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CheckboxProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.CheckboxProps, \"children\" | \"ref\" | \"inputRef\">\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The class name of the underlying input element. */\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"Checkbox\");\n\n  const inputRef = useObjectRef(ref);\n  const isSkeleton = useSkeletonMode();\n\n  const checkedIcon = <IconCheckboxChecked className={styles.icon} />;\n  const indeterminateIcon = (\n    <IconCheckboxIndeterminate className={styles.icon} />\n  );\n  const emptyIcon = <IconCheckboxEmpty className={styles.icon} />;\n\n  const renderIcon = (isSelected: boolean, isIndeterminate: boolean) => {\n    const icon = isSelected\n      ? checkedIcon\n      : isIndeterminate\n        ? indeterminateIcon\n        : emptyIcon;\n\n    const skeletonIcon = (\n      <span className={styles.skeletonIcon}>\n        <SkeletonModeReset>{icon}</SkeletonModeReset>\n      </span>\n    );\n\n    return isSkeleton ? skeletonIcon : icon;\n  };\n\n  return (\n    <div\n      {...skeletonProps}\n      className={clsx(wrapperProps.className, styles.checkbox, className)}\n    >\n      <FieldErrorCaptureContext>\n        <Aria.Checkbox\n          {...rest}\n          aria-describedby={controlProps[\"aria-describedby\"]}\n          inputRef={inputRef}\n          className={clsx(styles.input, inputClassName)}\n        >\n          {({ isSelected, isIndeterminate }) => (\n            <PropsContextProvider props={fieldPropsContext}>\n              {renderIcon(isSelected, isIndeterminate)}\n              <SkeletonRawText>{children}</SkeletonRawText>\n            </PropsContextProvider>\n          )}\n        </Aria.Checkbox>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,cAAc,oBAAC,qBAAD,EAAqB,WAAWA,wBAAO,KAAO,CAAA;CAClE,MAAM,oBACJ,oBAAC,2BAAD,EAA2B,WAAWA,wBAAO,KAAO,CAAA;CAEtD,MAAM,YAAY,oBAAC,mBAAD,EAAmB,WAAWA,wBAAO,KAAO,CAAA;CAE9D,MAAM,cAAc,YAAqB,oBAA6B;EACpE,MAAM,OAAO,aACT,cACA,kBACE,oBACA;EAEN,MAAM,eACJ,oBAAC,QAAD;GAAM,WAAWA,wBAAO;GACtB,UAAA,oBAAC,mBAAD,EAAA,UAAoB,KAAwB,CAAA;EACxC,CAAA;EAGR,OAAO,aAAa,eAAe;CACrC;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,aAAa,WAAWA,wBAAO,UAAU,SAAS;EAFpE,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;GACJ,oBAAkB,aAAa;GACrB;GACV,WAAW,KAAKA,wBAAO,OAAO,cAAc;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,WAAW,YAAY,eAAe,GACvC,oBAAC,iBAAD,EAAkB,SAA0B,CAAA,CACxB;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}