npm - @mittwald/flow-react-components - Versions diffs - 1.5.0-next.9 → 1.5.0 - Mend

@mittwald/flow-react-components 1.5.0-next.9 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (787) hide show

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

@@ -4,12 +4,16 @@
 var cartesianChart = "flow--cartesian-chart";
 var emptyViewContainer = "flow--cartesian-chart--empty-view-container";
 var emptyView = "flow--cartesian-chart--empty-view";
+var skeleton = "flow--cartesian-chart--skeleton";
 var CartesianChart_module_default = {
 	cartesianChart,
 	emptyViewContainer,
-	emptyView
+	emptyView,
+	skeleton,
+	"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 };
+export { cartesianChart, CartesianChart_module_default as default, emptyView, emptyViewContainer, skeleton };
 //# sourceMappingURL=CartesianChart.module.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":[".cartesianChart {\n font-family: Inter, sans-serif;\n isolation: isolate;\n\n *:focus:not(:focus-visible) {\n outline: none !important;\n }\n\n .emptyViewContainer {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n &.emptyView {\n :global(.recharts-cartesian-grid) {\n display: none;\n }\n }\n\n // recharts renders every svg here; only its outermost surface is classed.\n // stylelint-disable-next-line selector-max-type -- third-party svgs\n svg {\n overflow: visible;\n }\n\n :global(.recharts-tooltip-wrapper) {\n z-index: 1;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.cartesianChart {\n font-family: Inter, sans-serif;\n isolation: isolate;\n\n :focus:not(:focus-visible) {\n outline: none !important;\n }\n\n .emptyViewContainer {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n &.emptyView {\n :global(.recharts-cartesian-grid) {\n display: none;\n }\n }\n\n // recharts renders every svg here; only its outermost surface is classed.\n // stylelint-disable-next-line selector-max-type -- third-party svgs\n svg {\n overflow: visible;\n }\n\n :global(.recharts-tooltip-wrapper) {\n z-index: 1;\n }\n}\n\n/ SkeletonMode */\n\n.skeleton {\n @include skeleton.surface;\n\n width: 100%;\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartTooltip.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import { type FC, Suspense } from \"react\";\nimport { Tooltip, type TooltipProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { TooltipContent } from \"@/components/CartesianChart/components/ChartTooltip/TooltipContent\";\nimport clsx from \"clsx\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart/components/ChartTooltip/types\";\n\nexport { TypedChartTooltip } from \"./types\";\n\nexport interface ChartTooltipProps<\n TData extends ChartDataValue = ChartDataValue,\n XAxisDataKey extends keyof TData = keyof TData,\n>\n extends\n Pick<\n TooltipProps<ValueType, NameType>,\n \"wrapperClassName\" \| \"allowEscapeViewBox\"\n >,\n WithTooltipFormatters<TData, XAxisDataKey> {\n /** Show progress bar for stacked areas @default \"true\" /\n showProgressBar?: boolean;\n}\n\n/* @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n const {\n headingFormatter,\n formatter,\n showProgressBar = true,\n ...rest\n } = props;\n\n return (\n <Tooltip\n {...rest}\n cursor={false}\n content={(props) => {\n if (!props.active \|\| !props.payload \|\| props.payload.length === 0) {\n return null;\n }\n\n const className = clsx(props.wrapperClassName, styles.chartTooltip);\n return (\n <div className={className}>\n <Suspense fallback={<LoadingSpinnerView />}>\n <TooltipContent\n {...props}\n headingFormatter={headingFormatter}\n formatter={formatter}\n showProgressBar={showProgressBar}\n />\n </Suspense>\n </div>\n );\n }}\n />\n );\n};\n\nexport default ChartTooltip;\n"],"mappings":";;;;;;;;;;;;AA8BA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,kBACA,WACA,kBAAkB,MAClB,GAAG,SACD;CAEJ,OACE,oBAAC,SAAD;EACE,GAAI;EACJ,QAAQ;EACR,UAAU,UAAU;GAClB,IAAI,CAAC,MAAM,UAAU,CAAC,MAAM,WAAW,MAAM,QAAQ,WAAW,GAC9D,OAAO;GAGT,MAAM,YAAY,KAAK,MAAM,~~kBAAkB~~,4BAAO,YAAY;GAClE,OACE,oBAAC,OAAD;IAAgB;IACd,UAAA,oBAAC,UAAD;KAAU,UAAU,oBAAC,oBAAD,CAAqB,CAAA;KACvC,UAAA,oBAAC,gBAAD;MACE,GAAI;MACc;MACP;MACM;KAClB,CAAA;IACO,CAAA;GACP,CAAA;EAET;CACD,CAAA;AAEL"}
1	+ {"version":3,"file":"ChartTooltip.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import { type FC, Suspense } from \"react\";\nimport { Tooltip, type TooltipProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { TooltipContent } from \"@/components/CartesianChart/components/ChartTooltip/TooltipContent\";\nimport clsx from \"clsx\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart/components/ChartTooltip/types\";\n\nexport { TypedChartTooltip } from \"./types\";\n\nexport interface ChartTooltipProps<\n TData extends ChartDataValue = ChartDataValue,\n XAxisDataKey extends keyof TData = keyof TData,\n>\n extends\n Pick<\n TooltipProps<ValueType, NameType>,\n \"wrapperClassName\" \| \"allowEscapeViewBox\"\n >,\n WithTooltipFormatters<TData, XAxisDataKey> {\n /** Show progress bar for stacked areas @default \"true\" /\n showProgressBar?: boolean;\n}\n\n/* @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n const {\n headingFormatter,\n formatter,\n showProgressBar = true,\n ...rest\n } = props;\n\n return (\n <Tooltip\n {...rest}\n cursor={false}\n content={(props) => {\n if (!props.active \|\| !props.payload \|\| props.payload.length === 0) {\n return null;\n }\n\n const className = clsx(props.wrapperClassName, styles.chartTooltip);\n return (\n <div className={className}>\n <Suspense fallback={<LoadingSpinnerView />}>\n <TooltipContent\n {...props}\n headingFormatter={headingFormatter}\n formatter={formatter}\n showProgressBar={showProgressBar}\n />\n </Suspense>\n </div>\n );\n }}\n />\n );\n};\n\nexport default ChartTooltip;\n"],"mappings":";;;;;;;;;;;;AA8BA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,kBACA,WACA,kBAAkB,MAClB,GAAG,SACD;CAEJ,OACE,oBAAC,SAAD;EACE,GAAI;EACJ,QAAQ;EACR,UAAU,UAAU;GAClB,IAAI,CAAC,MAAM,UAAU,CAAC,MAAM,WAAW,MAAM,QAAQ,WAAW,GAC9D,OAAO;GAGT,MAAM,YAAY,KAAK,MAAM,kBAAkBA,4BAAO,YAAY;GAClE,OACE,oBAAC,OAAD;IAAgB;IACd,UAAA,oBAAC,UAAD;KAAU,UAAU,oBAAC,oBAAD,CAAqB,CAAA;KACvC,UAAA,oBAAC,gBAAD;MACE,GAAI;MACc;MACP;MACM;KAClB,CAAA;IACO,CAAA;GACP,CAAA;EAET;CACD,CAAA;AAEL"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipLegendItem.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart/components/ChartTooltip/types\";\n\~~n/** @internal /\~~nexport type TooltipPayloadItem = NonNullable<\n DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/* @internal /\ninterface LegendItemLabelProps<\n TData extends ChartDataValue = ChartDataValue,\n TTooltipLabelValue extends keyof TData = keyof TData,\n> extends Pick<WithTooltipFormatters<TData, TTooltipLabelValue>, \"formatter\"> {\n item: TooltipPayloadItem;\n index: number;\n}\n\n/* @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n formatter,\n item,\n index,\n}) => {\n const { value, dataKey, unit, fill, name } = item;\n\n const formattedLabel = usePromise(\n (value, dataKey, index, unit, formatter, name) =>\n formatter\n ? formatter(value, String(name), index, unit)\n : `${name ?? \"\"} (${value ?? \"\"}${unit ? unit : \"\"})`,\n [value, dataKey, index, unit, formatter, name] as const,\n );\n\n return <LegendItem color={fill}>{formattedLabel}</LegendItem>;\n};\n"],"mappings":";;;;;;;~~AA2BA~~,IAAa,qBAA+C,EAC1D,WACA,MACA,YACI;CACJ,MAAM,EAAE,OAAO,SAAS,MAAM,MAAM,SAAS;CAE7C,MAAM,iBAAiB,YACpB,OAAO,SAAS,OAAO,MAAM,WAAW,SACvC,YACI,UAAU,OAAO,OAAO,IAAI,GAAG,OAAO,IAAI,IAC1C,GAAG,QAAQ,GAAG,IAAI,SAAS,KAAK,OAAO,OAAO,GAAG,IACvD;EAAC;EAAO;EAAS;EAAO;EAAM;EAAW;CAAI,CAC/C;CAEA,OAAO,oBAAC,YAAD;EAAY,OAAO;EAAO,UAAA;CAA2B,CAAA;AAC9D"}
1	+ {"version":3,"file":"TooltipLegendItem.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart/components/ChartTooltip/types\";\n\nexport type TooltipPayloadItem = NonNullable<\n DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/** @internal /\ninterface LegendItemLabelProps<\n TData extends ChartDataValue = ChartDataValue,\n TTooltipLabelValue extends keyof TData = keyof TData,\n> extends Pick<WithTooltipFormatters<TData, TTooltipLabelValue>, \"formatter\"> {\n item: TooltipPayloadItem;\n index: number;\n}\n\n/* @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n formatter,\n item,\n index,\n}) => {\n const { value, dataKey, unit, fill, name } = item;\n\n const formattedLabel = usePromise(\n (value, dataKey, index, unit, formatter, name) =>\n formatter\n ? formatter(value, String(name), index, unit)\n : `${name ?? \"\"} (${value ?? \"\"}${unit ? unit : \"\"})`,\n [value, dataKey, index, unit, formatter, name] as const,\n );\n\n return <LegendItem color={fill}>{formattedLabel}</LegendItem>;\n};\n"],"mappings":";;;;;;;AA0BA,IAAa,qBAA+C,EAC1D,WACA,MACA,YACI;CACJ,MAAM,EAAE,OAAO,SAAS,MAAM,MAAM,SAAS;CAE7C,MAAM,iBAAiB,YACpB,OAAO,SAAS,OAAO,MAAM,WAAW,SACvC,YACI,UAAU,OAAO,OAAO,IAAI,GAAG,OAAO,IAAI,IAC1C,GAAG,QAAQ,GAAG,IAAI,SAAS,KAAK,OAAO,OAAO,GAAG,IACvD;EAAC;EAAO;EAAS;EAAO;EAAM;EAAW;CAAI,CAC/C;CAEA,OAAO,oBAAC,YAAD;EAAY,OAAO;EAAO,UAAA;CAA2B,CAAA;AAC9D"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipProgressBar.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { ProgressBar } from \"@/components/ProgressBar\";\nimport { Label } from \"@/components/Label\";\nimport type { TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\n\ninterface TooltipProgressBarProps<\n TData extends ChartDataValue = ChartDataValue,\n TTooltipLabelValue extends keyof TData = keyof TData,\n> extends Pick<\n WithTooltipFormatters<TData, TTooltipLabelValue>,\n \"progressBarFormatter\"\n> {\n items: TooltipPayloadItem[];\n}\n\nexport const TooltipProgressBar: FC<TooltipProgressBarProps> = (props) => {\n const { items, progressBarFormatter } = props;\n\n const areaItems = items.filter(\n (item) => item.fill !== \"none\" && item.graphicalItemId.includes(\"area\"),\n );\n\n const stringFormatter = useLocalizedStringFormatter(\n locales,\n \"CartesianChart\",\n );\n\n const unit = areaItems[0]?.unit;\n\n const segments = areaItems.map((i) => ({\n title: i.dataKey as string,\n value: i.value as number,\n color: i.fill,\n }));\n\n const total = areaItems.reduce((sum, segment) => {\n if (typeof segment.value === \"number\") {\n return sum + segment.value;\n }\n\n return sum;\n }, 0);\n\n const formattedLabel = usePromise(\n (value, unit, formatter) =>\n formatter ? formatter(value, unit) : `${value}${unit ? unit : \"\"}`,\n [total, unit, progressBarFormatter] as const,\n );\n\n if (areaItems.length < 2) {\n return null;\n }\n\n return (\n <ProgressBar\n className={styles.progressBar}\n showLegend={false}\n segments={segments}\n valueLabel={formattedLabel}\n maxValue={unit === \"%\" ? undefined : total}\n >\n <Label>{stringFormatter.format(\"tooltip.progressBar.total\")}</Label>\n </ProgressBar>\n );\n};\n"],"mappings":";;;;;;;;;;AAqBA,IAAa,sBAAmD,UAAU;CACxE,MAAM,EAAE,OAAO,yBAAyB;CAExC,MAAM,YAAY,MAAM,QACrB,SAAS,KAAK,SAAS,UAAU,KAAK,gBAAgB,SAAS,MAAM,CACxE;CAEA,MAAM,kBAAkB,~~4BACtB~~,kBACA,gBACF;CAEA,MAAM,OAAO,UAAU,EAAE,EAAE;CAE3B,MAAM,WAAW,UAAU,KAAK,OAAO;EACrC,OAAO,EAAE;EACT,OAAO,EAAE;EACT,OAAO,EAAE;CACX,EAAE;CAEF,MAAM,QAAQ,UAAU,QAAQ,KAAK,YAAY;EAC/C,IAAI,OAAO,QAAQ,UAAU,UAC3B,OAAO,MAAM,QAAQ;EAGvB,OAAO;CACT,GAAG,CAAC;CAEJ,MAAM,iBAAiB,YACpB,OAAO,MAAM,cACZ,YAAY,UAAU,OAAO,IAAI,IAAI,GAAG,QAAQ,OAAO,OAAO,MAChE;EAAC;EAAO;EAAM;CAAoB,CACpC;CAEA,IAAI,UAAU,SAAS,GACrB,OAAO;CAGT,OACE,oBAAC,aAAD;EACE,~~WAAW~~,4BAAO;EAClB,YAAY;EACF;EACV,YAAY;EACZ,UAAU,SAAS,MAAM,KAAA,IAAY;EAErC,UAAA,oBAAC,OAAD,EAAA,UAAQ,gBAAgB,OAAO,2BAA2B,EAAS,CAAA;CACxD,CAAA;AAEjB"}
1	+ {"version":3,"file":"TooltipProgressBar.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { ProgressBar } from \"@/components/ProgressBar\";\nimport { Label } from \"@/components/Label\";\nimport type { TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport type { ChartDataValue } from \"@/components/CartesianChart/types\";\n\ninterface TooltipProgressBarProps<\n TData extends ChartDataValue = ChartDataValue,\n TTooltipLabelValue extends keyof TData = keyof TData,\n> extends Pick<\n WithTooltipFormatters<TData, TTooltipLabelValue>,\n \"progressBarFormatter\"\n> {\n items: TooltipPayloadItem[];\n}\n\nexport const TooltipProgressBar: FC<TooltipProgressBarProps> = (props) => {\n const { items, progressBarFormatter } = props;\n\n const areaItems = items.filter(\n (item) => item.fill !== \"none\" && item.graphicalItemId.includes(\"area\"),\n );\n\n const stringFormatter = useLocalizedStringFormatter(\n locales,\n \"CartesianChart\",\n );\n\n const unit = areaItems[0]?.unit;\n\n const segments = areaItems.map((i) => ({\n title: i.dataKey as string,\n value: i.value as number,\n color: i.fill,\n }));\n\n const total = areaItems.reduce((sum, segment) => {\n if (typeof segment.value === \"number\") {\n return sum + segment.value;\n }\n\n return sum;\n }, 0);\n\n const formattedLabel = usePromise(\n (value, unit, formatter) =>\n formatter ? formatter(value, unit) : `${value}${unit ? unit : \"\"}`,\n [total, unit, progressBarFormatter] as const,\n );\n\n if (areaItems.length < 2) {\n return null;\n }\n\n return (\n <ProgressBar\n className={styles.progressBar}\n showLegend={false}\n segments={segments}\n valueLabel={formattedLabel}\n maxValue={unit === \"%\" ? undefined : total}\n >\n <Label>{stringFormatter.format(\"tooltip.progressBar.total\")}</Label>\n </ProgressBar>\n );\n};\n"],"mappings":";;;;;;;;;;AAqBA,IAAa,sBAAmD,UAAU;CACxE,MAAM,EAAE,OAAO,yBAAyB;CAExC,MAAM,YAAY,MAAM,QACrB,SAAS,KAAK,SAAS,UAAU,KAAK,gBAAgB,SAAS,MAAM,CACxE;CAEA,MAAM,kBAAkB,4BACtBA,kBACA,gBACF;CAEA,MAAM,OAAO,UAAU,EAAE,EAAE;CAE3B,MAAM,WAAW,UAAU,KAAK,OAAO;EACrC,OAAO,EAAE;EACT,OAAO,EAAE;EACT,OAAO,EAAE;CACX,EAAE;CAEF,MAAM,QAAQ,UAAU,QAAQ,KAAK,YAAY;EAC/C,IAAI,OAAO,QAAQ,UAAU,UAC3B,OAAO,MAAM,QAAQ;EAGvB,OAAO;CACT,GAAG,CAAC;CAEJ,MAAM,iBAAiB,YACpB,OAAO,MAAM,cACZ,YAAY,UAAU,OAAO,IAAI,IAAI,GAAG,QAAQ,OAAO,OAAO,MAChE;EAAC;EAAO;EAAM;CAAoB,CACpC;CAEA,IAAI,UAAU,SAAS,GACrB,OAAO;CAGT,OACE,oBAAC,aAAD;EACE,WAAWC,4BAAO;EAClB,YAAY;EACF;EACV,YAAY;EACZ,UAAU,SAAS,MAAM,KAAA,IAAY;EAErC,UAAA,oBAAC,OAAD,EAAA,UAAQ,gBAAgB,OAAO,2BAA2B,EAAS,CAAA;CACxD,CAAA;AAEjB"}

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
+import { useCartesianChartContext } from "../../context.mjs";
 import { TypedYAxis } from "./types.mjs";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
@@ -16,13 +17,16 @@ import * as Recharts from "recharts";
 * @flr-ignore-props tickFormatter
 */
 var YAxis = (props) => {
-	const { domain, type = "auto", ...rest } = props;
+	const { domain, type = "auto", width, ...rest } = props;
 	const tokens = useDesignTokens();
+	const { layout } = useCartesianChartContext();
+	const isCategoryAxis = type === "category" || type === "auto" && layout === "vertical";
 	return /* @__PURE__ */ jsx(Recharts.YAxis, {
 		...rest,
 		allowDataOverflow: true,
 		domain,
 		type,
+		width: width ?? (isCategoryAxis ? "auto" : void 0),
 		fontSize: tokens.axis["font-size"].value,
 		tick: { fill: tokens.axis["color"].value },
 		tickMargin: parseInt(tokens.axis.spacing.value),

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

	@@ -1 +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 { 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\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\", ...rest } = props;\n\n const tokens = useDesignTokens();\n\n return (\n <Recharts.YAxis\n {...rest}\n allowDataOverflow\n domain={domain}\n type={type}\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":"~~;;;;;;;;;;;;;;;;;AAwCA~~,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,GAAG,SAAS;~~CAE3C~~,MAAM,SAAS,gBAAgB;~~CAE~~/B,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,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"}
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"}

package/dist/js/packages/components/src/components/Chat/Chat.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chat.mjs","names":[],"sources":["../../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n /** The height of the chat. /\n height?: CSSProperties[\"height\"];\n}\n\n/* @flr-generate all */\nexport const Chat: FC<ChatProps> = flowComponent(\n \"Chat\",\n (props) => {\n const { height, className, children } = props;\n\n const rootClassName = clsx(styles.chat, className);\n\n const propsContext: PropsContext = {\n MessageThread: {\n tunnel: {\n id: \"messageThread\",\n component: \"Chat\",\n },\n },\n FileCardList: {\n className: styles.fileCardList,\n tunnel: {\n id: \"fileCardList\",\n component: \"Chat\",\n },\n },\n Button: {\n className: dynamic((props) => {\n return props.color === \"success\" \|\| props.color === \"accent\"\n ? styles.successButton\n : styles.button;\n }),\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div style={{ height }} className={rootClassName}>\n <div className={styles.messageThreadContainer}>\n <UiComponentTunnelExit id=\"messageThread\" component=\"Chat\" />\n </div>\n <div className={styles.controls}>{children}</div>\n <UiComponentTunnelExit id=\"fileCardList\" component=\"Chat\" />\n </div>\n </PropsContextProvider>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default Chat;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,OAAsB,cACjC,SACC,UAAU;CACT,MAAM,EAAE,QAAQ,WAAW,aAAa;CAExC,MAAM,gBAAgB,~~KAAK~~,oBAAO,MAAM,SAAS;CAEjD,MAAM,eAA6B;EACjC,eAAe,EACb,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,cAAc;GACZ,~~WAAW~~,oBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ,EACN,WAAW,SAAS,UAAU;GAC5B,OAAO,MAAM,UAAU,aAAa,MAAM,UAAU,~~WAChD~~,oBAAO,~~gBACP~~,oBAAO;EACb,CAAC,EACH;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,OAAO,EAAE,OAAO;GAAG,WAAW;GAAnC,UAAA;IACE,oBAAC,OAAD;KAAK,~~WAAW~~,oBAAO;KACrB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAgB,WAAU;KAAQ,CAAA;IACzD,CAAA;IACL,oBAAC,OAAD;KAAK,~~WAAW~~,oBAAO;KAAW;IAAc,CAAA;IAChD,oBAAC,uBAAD;KAAuB,IAAG;KAAe,WAAU;IAAQ,CAAA;GACxD;;CACe,CAAA;AAE1B,GACA,EACE,MAAM,SACR,CACF"}
1	+ {"version":3,"file":"Chat.mjs","names":["styles"],"sources":["../../../../../../../src/components/Chat/Chat.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./Chat.module.scss\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface ChatProps extends PropsWithChildren, PropsWithClassName {\n /** The height of the chat. /\n height?: CSSProperties[\"height\"];\n}\n\n/* @flr-generate all */\nexport const Chat: FC<ChatProps> = flowComponent(\n \"Chat\",\n (props) => {\n const { height, className, children } = props;\n\n const rootClassName = clsx(styles.chat, className);\n\n const propsContext: PropsContext = {\n MessageThread: {\n tunnel: {\n id: \"messageThread\",\n component: \"Chat\",\n },\n },\n FileCardList: {\n className: styles.fileCardList,\n tunnel: {\n id: \"fileCardList\",\n component: \"Chat\",\n },\n },\n Button: {\n className: dynamic((props) => {\n return props.color === \"success\" \|\| props.color === \"accent\"\n ? styles.successButton\n : styles.button;\n }),\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <div style={{ height }} className={rootClassName}>\n <div className={styles.messageThreadContainer}>\n <UiComponentTunnelExit id=\"messageThread\" component=\"Chat\" />\n </div>\n <div className={styles.controls}>{children}</div>\n <UiComponentTunnelExit id=\"fileCardList\" component=\"Chat\" />\n </div>\n </PropsContextProvider>\n );\n },\n {\n type: \"layout\",\n },\n);\n\nexport default Chat;\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,OAAsB,cACjC,SACC,UAAU;CACT,MAAM,EAAE,QAAQ,WAAW,aAAa;CAExC,MAAM,gBAAgB,KAAKA,oBAAO,MAAM,SAAS;CAEjD,MAAM,eAA6B;EACjC,eAAe,EACb,QAAQ;GACN,IAAI;GACJ,WAAW;EACb,EACF;EACA,cAAc;GACZ,WAAWA,oBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,QAAQ,EACN,WAAW,SAAS,UAAU;GAC5B,OAAO,MAAM,UAAU,aAAa,MAAM,UAAU,WAChDA,oBAAO,gBACPA,oBAAO;EACb,CAAC,EACH;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,OAAO,EAAE,OAAO;GAAG,WAAW;GAAnC,UAAA;IACE,oBAAC,OAAD;KAAK,WAAWA,oBAAO;KACrB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAgB,WAAU;KAAQ,CAAA;IACzD,CAAA;IACL,oBAAC,OAAD;KAAK,WAAWA,oBAAO;KAAW;IAAc,CAAA;IAChD,oBAAC,uBAAD;KAAuB,IAAG;KAAe,WAAU;IAAQ,CAAA;GACxD;;CACe,CAAA;AAE1B,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -2,31 +2,46 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconCheckboxChecked } from "../Icon/components/icons/IconCheckboxChecked.mjs";
 import { IconCheckboxEmpty } from "../Icon/components/icons/IconCheckboxEmpty.mjs";
 import { IconCheckboxIndeterminate } from "../Icon/components/icons/IconCheckboxIndeterminate.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { SkeletonRawText } from "../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Checkbox_module_default from "./Checkbox.module.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Aria from "react-aria-components";
 import { useObjectRef } from "react-aria";
+import * as Aria from "react-aria-components";
 //#region src/components/Checkbox/Checkbox.tsx
 /** @flr-generate all */
 var Checkbox = flowComponent("Checkbox", (props) => {
 	const { children, className, ref, inputClassName, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Checkbox");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps, skeletonProps } = useFieldComponent(props, "Checkbox");
 	const inputRef = useObjectRef(ref);
+	const isSkeleton = useSkeletonMode();
+	const checkedIcon = /* @__PURE__ */ jsx(IconCheckboxChecked, { className: Checkbox_module_default.icon });
+	const indeterminateIcon = /* @__PURE__ */ jsx(IconCheckboxIndeterminate, { className: Checkbox_module_default.icon });
+	const emptyIcon = /* @__PURE__ */ jsx(IconCheckboxEmpty, { className: Checkbox_module_default.icon });
+	const renderIcon = (isSelected, isIndeterminate) => {
+		const icon = isSelected ? checkedIcon : isIndeterminate ? indeterminateIcon : emptyIcon;
+		const skeletonIcon = /* @__PURE__ */ jsx("span", {
+			className: Checkbox_module_default.skeletonIcon,
+			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: icon })
+		});
+		return isSkeleton ? skeletonIcon : icon;
+	};
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
-		className: clsx(Checkbox_module_default.checkbox, className, fieldProps.className),
+		...skeletonProps,
+		className: clsx(Checkbox_module_default.checkbox, className, wrapperProps.className),
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Checkbox, {
 			...rest,
+			"aria-describedby": controlProps["aria-describedby"],
 			inputRef,
 			className: clsx(inputClassName, Checkbox_module_default.input),
 			children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
 				props: fieldPropsContext,
-				children: [isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, { className: Checkbox_module_default.icon }) : isIndeterminate ? /* @__PURE__ */ jsx(IconCheckboxIndeterminate, { className: Checkbox_module_default.icon }) : /* @__PURE__ */ jsx(IconCheckboxEmpty, { className: Checkbox_module_default.icon }), children]
+				children: [renderIcon(isSelected, isIndeterminate), /* @__PURE__ */ jsx(SkeletonRawText, { children })]
 			})
 		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.mjs","names":[],"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\";\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 ~~fieldProps~~,\n } = useFieldComponent(props, \"Checkbox\");\n\n const inputRef = useObjectRef(ref);\n\n return (\n <div\n {...~~fieldProps~~}\n className={clsx(styles.checkbox, className, ~~fieldProps~~.className)}\n >\n <FieldErrorCaptureContext>\n <Aria.Checkbox\n {...rest}\n inputRef={inputRef}\n className={clsx(inputClassName, styles.input)}\n >\n {({ isSelected, isIndeterminate }) => (\n <PropsContextProvider props={fieldPropsContext}>\n {isSelected ~~? (\n <IconCheckboxChecked className={styles.icon} />\n ) :~~ isIndeterminate ~~? (\n <IconCheckboxIndeterminate className={styles.icon} />\n~~ ) ~~: (\n <IconCheckboxEmpty className={styles.icon~~} ~~/>\n )}~~\n {children}\n </PropsContextProvider>\n )}\n </Aria.Checkbox>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Checkbox;\n"],"mappings":"~~;;;;;;;;;;;;;;;AA0BA~~,IAAa,WAAW,cAAc,aAAa,UAAU;CAC3D,MAAM,EAAE,UAAU,WAAW,KAAK,gBAAgB,GAAG,SAAS;CAE9D,MAAM,EACJ,gBACA,0BACA,mBACA,~~eACE~~,kBAAkB,OAAO,UAAU;CAEvC,MAAM,WAAW,aAAa,GAAG;~~CAEjC~~,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,~~KAAK~~,wBAAO,UAAU,WAAW,~~WAAW~~,SAAS;~~EAFlE~~,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,UAAN;GACE,GAAI;~~GACM~~;GACV,WAAW,KAAK,~~gBAAgB~~,wBAAO,KAAK;GAE1C,WAAA,EAAE,YAAY,sBACd,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACG,~~aACC,oBAAC,qBAAD,EAAqB,~~WAAW,~~wBAAO~~,~~KAAO~~,~~CAAA~~,~~IAC5C,kBACF,~~oBAAC,~~2BAAD~~,~~EAA2B~~,~~WAAW~~,~~wBAAO,KAAO,~~CAAA,~~IAEpD,oBAAC,mBAAD,EAAmB,WAAW,wBAAO,KAAO,CAAA,GAE7C,QACmB~~;;EAEX,CAAA,EACS,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
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"}

package/dist/js/packages/components/src/components/Checkbox/Checkbox.module.mjs CHANGED Viewed

@@ -4,13 +4,17 @@
 var checkbox = "flow--checkbox";
 var input = "flow--checkbox--input";
 var icon = "flow--checkbox--icon";
+var skeletonIcon = "flow--checkbox--skeleton-icon";
 var Checkbox_module_default = {
 	checkbox,
 	input,
 	icon,
-	"check-pop": "flow--checkbox--check-pop"
+	"check-pop": "flow--checkbox--check-pop",
+	skeletonIcon,
+	"skeleton-surface-shimmer": "flow--checkbox--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--checkbox--skeleton-text-shimmer"
 };
 //#endregion
-export { checkbox, Checkbox_module_default as default, icon, input };
+export { checkbox, Checkbox_module_default as default, icon, input, skeletonIcon };
 //# sourceMappingURL=Checkbox.module.mjs.map

package/dist/js/packages/components/src/components/Checkbox/Checkbox.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.module.mjs","names":[],"sources":["../../../../../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/formControl\";\n\n.checkbox {\n @include formControl.formHiddenInputScrollBehaviorFix;\n\n .input {\n display: flex;\n flex-direction: row;\n column-gap: var(--form-control--spacing-x);\n\n @include focus.focus;\n\n &[data-selected],\n &[data-indeterminate] {\n .icon {\n color: var(--choice--icon-color--selected);\n }\n }\n\n &[data-disabled] {\n color: var(--text--color--disabled);\n\n .icon {\n color: var(--choice--icon-color--disabled);\n }\n }\n\n &[data-invalid]:not([data-selected]) {\n .icon {\n color: var(--form-control--border-color--invalid);\n }\n }\n }\n\n .icon {\n color: var(--choice--icon-color--default);\n }\n\n /* When the box becomes checked/indeterminate, React mounts the checked icon.\n It settles in softly from a slightly smaller, half-faded state; the box\n never fully disappears, so the swap does not flicker. Unchecking\n mounts the empty icon, which is intentionally left un-animated. */\n .input[data-selected] .icon,\n .input[data-indeterminate] .icon {\n animation: check-pop var(--transition--duration--fast)\n cubic-bezier(0.2, 0, 0, 1);\n }\n}\n\n@keyframes check-pop {\n from {\n transform: scale(0.9);\n opacity: 0.5;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Checkbox.module.mjs","names":[],"sources":["../../../../../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/formControl\";\n\n.checkbox {\n @include formControl.formHiddenInputScrollBehaviorFix;\n\n .input {\n display: flex;\n flex-direction: row;\n column-gap: var(--form-control--spacing-x);\n\n @include focus.focus;\n\n &[data-selected],\n &[data-indeterminate] {\n .icon {\n color: var(--choice--icon-color--selected);\n }\n }\n\n &[data-disabled] {\n color: var(--text--color--disabled);\n\n .icon {\n color: var(--choice--icon-color--disabled);\n }\n }\n\n &[data-invalid]:not([data-selected]) {\n .icon {\n color: var(--form-control--border-color--invalid);\n }\n }\n }\n\n .icon {\n color: var(--choice--icon-color--default);\n }\n\n /* When the box becomes checked/indeterminate, React mounts the checked icon.\n It settles in softly from a slightly smaller, half-faded state; the box\n never fully disappears, so the swap does not flicker. Unchecking\n mounts the empty icon, which is intentionally left un-animated. /\n .input[data-selected] .icon,\n .input[data-indeterminate] .icon {\n animation: check-pop var(--transition--duration--fast)\n cubic-bezier(0.2, 0, 0, 1);\n }\n\n / Skeleton: a box around the icon is the surface */\n .skeletonIcon {\n display: flex;\n align-self: start;\n\n @include formControl.formSkeletonShape(var(--corner-radius--s));\n }\n}\n\n@keyframes check-pop {\n from {\n transform: scale(0.9);\n opacity: 0.5;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/CheckboxButton/CheckboxButton.mjs CHANGED Viewed

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { Checkbox } from "../Checkbox/Checkbox.mjs";
 import CheckboxButton_module_default from "./CheckboxButton.module.mjs";
@@ -11,24 +12,28 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var CheckboxButton = flowComponent("CheckboxButton", (props) => {
 	const { children, className, inputClassName, ...rest } = props;
-	const { fieldPropsContext, fieldProps, FieldErrorView, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxButton");
+	const { fieldPropsContext, wrapperProps, controlProps, FieldErrorView, FieldErrorCaptureContext, skeletonProps } = useFieldComponent(props, "CheckboxButton");
+	const isSkeleton = useSkeletonMode();
 	const mergedPropsContext = {
 		Text: { className: CheckboxButton_module_default.label },
 		Content: { className: CheckboxButton_module_default.content },
 		...fieldPropsContext
 	};
+	const checkbox = /* @__PURE__ */ jsx(Checkbox, {
+		...rest,
+		"aria-describedby": controlProps["aria-describedby"],
+		className: CheckboxButton_module_default.checkbox,
+		inputClassName: clsx(inputClassName, CheckboxButton_module_default.input),
+		children: /* @__PURE__ */ jsx(PropsContextProvider, {
+			props: mergedPropsContext,
+			children
+		})
+	});
+	const skeletonCheckbox = /* @__PURE__ */ jsx(SkeletonModeReset, { children: checkbox });
 	return /* @__PURE__ */ jsxs("div", {
-		...fieldProps,
-		className: clsx(fieldProps.className, CheckboxButton_module_default.checkboxButton, className),
-		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Checkbox, {
-			...rest,
-			className: CheckboxButton_module_default.checkbox,
-			inputClassName: clsx(inputClassName, CheckboxButton_module_default.input),
-			children: /* @__PURE__ */ jsx(PropsContextProvider, {
-				props: mergedPropsContext,
-				children
-			})
-		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
+		...skeletonProps,
+		className: clsx(wrapperProps.className, CheckboxButton_module_default.checkboxButton, className),
+		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: isSkeleton ? skeletonCheckbox : checkbox }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
 //#endregion

package/dist/js/packages/components/src/components/CheckboxButton/CheckboxButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxButton.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxButtonProps\n extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n const { children, className, inputClassName, ...rest } = props;\n\n const {\n fieldPropsContext,\n ~~fieldProps~~,\n FieldErrorView,\n FieldErrorCaptureContext,\n } = useFieldComponent(props, \"CheckboxButton\");\n\n const mergedPropsContext: PropsContext = {\n Text: {\n className: styles.label,\n },\n Content: {\n className: styles.content,\n },\n ...fieldPropsContext,\n };\n\n ~~return~~ (\n <~~div~~\n {...~~fieldProps~~}\n ~~className~~={~~clsx(fieldProps.className, styles.checkboxButton, className)}~~\~~n >\n <FieldErrorCaptureContext>\n <Checkbox~~\~~n {...rest~~}\n className={styles.checkbox}\n inputClassName={clsx(inputClassName, styles.input)}\n >\n <PropsContextProvider props={mergedPropsContext}>\n {children}\n </PropsContextProvider>\n </Checkbox>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default CheckboxButton;\n"],"mappings":"~~;;;;;;;;;;;AAcA~~,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,~~YACA~~,gBACA,~~6BACE~~,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,qBAAmC;EACvC,MAAM,EACJ,~~WAAW~~,8BAAO,MACpB;EACA,SAAS,EACP,~~WAAW~~,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,~~OACE~~,~~qBAAC~~,~~OAAD~~;EACE,GAAI;EACJ,~~WAAW~~,~~KAAK~~,~~WAAW~~,~~WAAW,~~8BAAO,gBAAgB,~~SAAS~~;~~EAFxE~~,UAAA,~~CAIE~~,oBAAC,~~0BAAD~~,EAAA,~~UACE~~,~~oBAAC~~,~~UAAD~~;~~GACE~~,GAAI;~~GACJ~~,WAAW,~~8BAAO;GAClB~~,~~gBAAgB~~,~~KAAK~~,gBAAgB,~~8BAAO,KAAK~~;~~GAEjD~~,UAAA,oBAAC,~~sBAAD;IAAsB~~,~~OAAO;IAC1B;GACmB~~,~~CAAA;EACd~~,~~CAAA~~,~~EACc~~,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}
1	+ {"version":3,"file":"CheckboxButton.mjs","names":["styles"],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CheckboxButtonProps\n extends CheckboxProps, FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all /\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n const { children, className, inputClassName, ...rest } = props;\n\n const {\n fieldPropsContext,\n wrapperProps,\n controlProps,\n FieldErrorView,\n FieldErrorCaptureContext,\n skeletonProps,\n } = useFieldComponent(props, \"CheckboxButton\");\n\n const isSkeleton = useSkeletonMode();\n\n const mergedPropsContext: PropsContext = {\n Text: {\n className: styles.label,\n },\n Content: {\n className: styles.content,\n },\n ...fieldPropsContext,\n };\n\n const checkbox = (\n <Checkbox\n {...rest}\n aria-describedby={controlProps[\"aria-describedby\"]}\n className={styles.checkbox}\n inputClassName={clsx(inputClassName, styles.input)}\n >\n <PropsContextProvider props={mergedPropsContext}>\n {children}\n </PropsContextProvider>\n </Checkbox>\n );\n\n / The whole button is the surface, its content draws no bars. */\n const skeletonCheckbox = <SkeletonModeReset>{checkbox}</SkeletonModeReset>;\n\n return (\n <div\n {...skeletonProps}\n className={clsx(wrapperProps.className, styles.checkboxButton, className)}\n >\n <FieldErrorCaptureContext>\n {isSkeleton ? skeletonCheckbox : checkbox}\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default CheckboxButton;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EAAE,UAAU,WAAW,gBAAgB,GAAG,SAAS;CAEzD,MAAM,EACJ,mBACA,cACA,cACA,gBACA,0BACA,kBACE,kBAAkB,OAAO,gBAAgB;CAE7C,MAAM,aAAa,gBAAgB;CAEnC,MAAM,qBAAmC;EACvC,MAAM,EACJ,WAAWA,8BAAO,MACpB;EACA,SAAS,EACP,WAAWA,8BAAO,QACpB;EACA,GAAG;CACL;CAEA,MAAM,WACJ,oBAAC,UAAD;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAWA,8BAAO;EAClB,gBAAgB,KAAK,gBAAgBA,8BAAO,KAAK;EAEjD,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACd,CAAA;CAIZ,MAAM,mBAAmB,oBAAC,mBAAD,EAAA,UAAoB,SAA4B,CAAA;CAEzE,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,aAAa,WAAWA,8BAAO,gBAAgB,SAAS;EAF1E,UAAA,CAIE,oBAAC,0BAAD,EAAA,UACG,aAAa,mBAAmB,SACT,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

package/dist/js/packages/components/src/components/CheckboxButton/CheckboxButton.module.mjs CHANGED Viewed

@@ -11,9 +11,11 @@ var CheckboxButton_module_default = {
 	checkboxButton,
 	input,
 	readonly,
+	"skeleton-surface-shimmer": "flow--checkbox-button--skeleton-surface-shimmer",
 	content,
 	label,
-	checkbox
+	checkbox,
+	"skeleton-text-shimmer": "flow--checkbox-button--skeleton-text-shimmer"
 };
 //#endregion
 export { checkbox, checkboxButton, content, CheckboxButton_module_default as default, input, label, readonly };

package/dist/js/packages/components/src/components/CheckboxButton/CheckboxButton.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxButton.module.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.checkboxButton {\n @include formControl.formHiddenInputScrollBehaviorFix;\n\n align-self: normal;\n width: fit-content;\n\n .input {\n @include formControl.formControl();\n\n & {\n order: unset;\n height: 100%;\n }\n\n /* With content /\n &:focus-within:not([data-selected], [data-focus-visible]) {\n border-color: var(--form-control--border-color--default);\n }\n\n &[data-invalid]:not([data-selected]) {\n border-color: var(--form-control--border-color--invalid);\n background-color: var(--form-control--background-color--invalid);\n }\n\n &:has(.content) {\n display: grid;\n grid-template:\n \"icon label\" auto\n \". content\" 1fr\n / auto 1fr;\n\n .label {\n font-weight: var(--font-weight--bold);\n }\n }\n }\n\n / Elements */\n .checkbox {\n flex-grow: 1;\n }\n\n .label {\n grid-area: label;\n }\n\n .content {\n grid-area: content;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CheckboxButton.module.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxButton/CheckboxButton.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.checkboxButton {\n @include formControl.formHiddenInputScrollBehaviorFix;\n\n align-self: normal;\n width: fit-content;\n\n .input {\n @include formControl.formControl();\n\n & {\n order: unset;\n height: 100%;\n }\n\n /* With content /\n &:focus-within:not([data-selected], [data-focus-visible]) {\n border-color: var(--form-control--border-color--default);\n }\n\n &[data-invalid]:not([data-selected]) {\n border-color: var(--form-control--border-color--invalid);\n background-color: var(--form-control--background-color--invalid);\n }\n\n &:has(.content) {\n display: grid;\n grid-template:\n \"icon label\" auto\n \". content\" 1fr\n / auto 1fr;\n\n .label {\n font-weight: var(--font-weight--bold);\n }\n }\n }\n\n / Elements /\n .checkbox {\n flex-grow: 1;\n }\n\n .label {\n grid-area: label;\n }\n\n .content {\n grid-area: content;\n }\n\n / Skeleton: as specific as the invalid state above, and after it */\n &[data-skeleton] .checkbox .input {\n @include formControl.formSkeletonShape;\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/CheckboxGroup/CheckboxGroup.mjs CHANGED Viewed

@@ -15,7 +15,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
 	const { children, className, isInvalid, s, m, l, ref, ...rest } = props;
-	const { FieldErrorView, fieldPropsContext, fieldProps, FieldErrorCaptureContext } = useFieldComponent(props, "CheckboxGroup");
+	const { FieldErrorView, fieldPropsContext, wrapperProps, controlProps, FieldErrorCaptureContext, skeletonProps } = useFieldComponent(props, "CheckboxGroup");
 	const propsContext = {
 		Checkbox: {
 			isInvalid,
@@ -39,9 +39,10 @@ var CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
 	useMakeFocusable(objectRef);
 	return /* @__PURE__ */ jsxs(Aria.CheckboxGroup, {
 		...rest,
-		...fieldProps,
+		...controlProps,
+		...skeletonProps,
 		isInvalid,
-		className: clsx(fieldProps.className, className),
+		className: clsx(wrapperProps.className, className),
 		ref: objectRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,

package/dist/js/packages/components/src/components/CheckboxGroup/CheckboxGroup.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroup.mjs","names":[],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CheckboxGroupProps\n extends\n PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n Pick<ColumnLayoutProps, \"s\" \| \"m\" \| \"l\">,\n FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n fieldPropsContext,\n ~~fieldProps~~,\n FieldErrorCaptureContext,\n } = useFieldComponent(props, \"CheckboxGroup\");\n\n const propsContext: PropsContext = {\n Checkbox: {\n isInvalid,\n className: styles.checkbox,\n tunnel: {\n id: \"checkboxes\",\n component: \"CheckboxGroup\",\n },\n },\n CheckboxButton: {\n isInvalid,\n className: styles.checkboxButton,\n tunnel: {\n id: \"checkboxButtons\",\n component: \"CheckboxGroup\",\n },\n },\n ...fieldPropsContext,\n };\n\n const objectRef = useObjectRef(ref);\n useMakeFocusable(objectRef);\n\n return (\n <Aria.CheckboxGroup\n {...rest}\n {...~~fieldProps~~}\n isInvalid={isInvalid}\n className={clsx(~~fieldProps~~.className, className)}\n ref={objectRef}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n {children}\n\n <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n <UiComponentTunnelExit\n id=\"checkboxButtons\"\n component=\"CheckboxGroup\"\n />\n </ColumnLayout>\n\n <ColumnLayout\n s={s ?? [1]}\n m={m ?? [1]}\n l={l ?? [1]}\n rowGap=\"s\"\n className={styles.checkboxGroup}\n >\n <UiComponentTunnelExit id=\"checkboxes\" component=\"CheckboxGroup\" />\n </ColumnLayout>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.CheckboxGroup>\n );\n});\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAElE,MAAM,EACJ,gBACA,mBACA,~~YACA~~,~~6BACE~~,kBAAkB,OAAO,eAAe;CAE5C,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,~~WAAW~~,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,gBAAgB;GACd;GACA,~~WAAW~~,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,eAAN;EACE,GAAI;EACJ,GAAI;EACO;EACX,WAAW,KAAK,~~WAAW~~,WAAW,SAAS;~~EAC/C~~,KAAK;~~EALP~~,UAAA,~~CAOE~~,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,~~WAAW~~,6BAAO;KAChD,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACW,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,~~WAAW~~,6BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAa,WAAU;KAAiB,CAAA;IACtD,CAAA;GACM;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACC;;AAExB,CAAC"}
1	+ {"version":3,"file":"CheckboxGroup.mjs","names":["styles"],"sources":["../../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface CheckboxGroupProps\n extends\n PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n Pick<ColumnLayoutProps, \"s\" \| \"m\" \| \"l\">,\n FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n fieldPropsContext,\n wrapperProps,\n controlProps,\n FieldErrorCaptureContext,\n skeletonProps,\n } = useFieldComponent(props, \"CheckboxGroup\");\n\n const propsContext: PropsContext = {\n Checkbox: {\n isInvalid,\n className: styles.checkbox,\n tunnel: {\n id: \"checkboxes\",\n component: \"CheckboxGroup\",\n },\n },\n CheckboxButton: {\n isInvalid,\n className: styles.checkboxButton,\n tunnel: {\n id: \"checkboxButtons\",\n component: \"CheckboxGroup\",\n },\n },\n ...fieldPropsContext,\n };\n\n const objectRef = useObjectRef(ref);\n useMakeFocusable(objectRef);\n\n return (\n <Aria.CheckboxGroup\n {...rest}\n {...controlProps}\n {...skeletonProps}\n isInvalid={isInvalid}\n className={clsx(wrapperProps.className, className)}\n ref={objectRef}\n >\n <FieldErrorCaptureContext>\n <PropsContextProvider props={propsContext}>\n {children}\n\n <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n <UiComponentTunnelExit\n id=\"checkboxButtons\"\n component=\"CheckboxGroup\"\n />\n </ColumnLayout>\n\n <ColumnLayout\n s={s ?? [1]}\n m={m ?? [1]}\n l={l ?? [1]}\n rowGap=\"s\"\n className={styles.checkboxGroup}\n >\n <UiComponentTunnelExit id=\"checkboxes\" component=\"CheckboxGroup\" />\n </ColumnLayout>\n </PropsContextProvider>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </Aria.CheckboxGroup>\n );\n});\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS;CAElE,MAAM,EACJ,gBACA,mBACA,cACA,cACA,0BACA,kBACE,kBAAkB,OAAO,eAAe;CAE5C,MAAM,eAA6B;EACjC,UAAU;GACR;GACA,WAAWA,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,gBAAgB;GACd;GACA,WAAWA,6BAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,eAAN;EACE,GAAI;EACJ,GAAI;EACJ,GAAI;EACO;EACX,WAAW,KAAK,aAAa,WAAW,SAAS;EACjD,KAAK;EANP,UAAA,CAQE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,cAAD;KAAiB;KAAM;KAAM;KAAG,WAAWA,6BAAO;KAChD,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACW,CAAA;IAEd,oBAAC,cAAD;KACE,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,GAAG,KAAK,CAAC,CAAC;KACV,QAAO;KACP,WAAWA,6BAAO;KAElB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAa,WAAU;KAAiB,CAAA;IACtD,CAAA;GACM;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACC;;AAExB,CAAC"}

package/dist/js/packages/components/src/components/CoachMark/CoachMark.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CoachMark.mjs","names":[],"sources":["../../../../../../../src/components/CoachMark/CoachMark.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { PopoverProps } from \"@/components/Popover/Popover\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport styles from \"./CoachMark.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\n\nexport interface CoachMarkProps extends Omit<\n PopoverProps,\n // The popover's own shape, which a coach mark decides for itself.\n \| \"withTip\"\n \| \"modality\"\n // react-aria's own non-modal switch, which would compete with the shape this\n // component already decided on.\n \| \"isNonModal\"\n \| \"isDialogContent\"\n \| \"triggerRef\"\n // Positioning and dismissal it does not hand out: it is never dismissed by an\n // interaction outside it, it owns its Escape handling, and it renders where it\n // stands instead of in a portal.\n \| \"getTargetRect\"\n \| \"shouldCloseOnInteractOutside\"\n // Overridden in CSS to escape react-aria's viewport clamp, so a value here\n // would be silently ignored.\n \| \"maxHeight\"\n \| \"isKeyboardDismissDisabled\"\n \| \"UNSTABLE_portalContainer\"\n // Popover keeps this one working for the consumers it already has; a coach\n // mark has none yet, so it ships only the current name.\n \| \"defaultOpen\"\n> {\n /*\n The element the coach mark points at. It is an anchor, not a trigger —\n * nothing about it opens the coach mark. Give it either this or `anchor`.\n /\n anchorRef?: RefObject<Element \| null>;\n /\n The `id` of the element the coach mark points at, looked up once the\n * element exists. Use it where a ref cannot be shared — an mStudio extension\n * renders in a different context than the host, so a ref never arrives, while\n * an id does.\n /\n anchor?: string;\n}\n\n/\n Resolves whichever anchor was given into something `Popover` can position\n * against.\n \n An id is looked up after the commit, and kept looking for until it resolves.\n * A single lookup would only work for an anchor that is already mounted, which\n * is the case this prop does not exist for: remotely the host materializes the\n * page in pieces, so the anchor regularly arrives after the coach mark. Without\n * the observer the hint stays parked and invisible, and nothing says why.\n /\nconst useAnchorRef = (\n anchorRef: RefObject<Element \| null> \| undefined,\n anchor: string \| undefined,\n): RefObject<Element \| null> => {\n const [anchorElement, setAnchorElement] = useState<Element \| null>(null);\n\n useEffect(() => {\n if (!anchor) {\n setAnchorElement(null);\n return;\n }\n\n const element = document.getElementById(anchor);\n setAnchorElement(element);\n\n if (element) {\n return;\n }\n\n const observer = new MutationObserver(() => {\n const late = document.getElementById(anchor);\n\n if (late) {\n setAnchorElement(late);\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, { childList: true, subtree: true });\n\n return () => observer.disconnect();\n }, [anchor]);\n\n return useMemo(\n () => anchorRef ?? { current: anchorElement },\n [anchorRef, anchorElement],\n );\n};\n\n/\n Points at a control the user did not ask about — a feature that is new, moved\n * or easy to miss. It opens on its own, so it stays out of the way: the page\n * below keeps scrolling, focus is left alone, and the coach mark rides along\n * with its anchor instead of closing at the first scroll.\n \n Nothing announces it. It renders where it is written, so put it directly\n * behind the element it points at — then it follows that element in the reading\n * order, and its anchor refers to it through `aria-details`.\n \n @flr-generate all\n * @flr-ignore-props anchorRef\n * @flowStatus beta, new\n */\nexport const CoachMark = flowComponent(\"CoachMark\", (props) => {\n const {\n children,\n controller: controllerFromProps,\n anchorRef,\n anchor,\n isDefaultOpen = false,\n ref: ignoredRef,\n ...rest\n } = props;\n\n const resolvedAnchorRef = useAnchorRef(anchorRef, anchor);\n\n const controllerFromContext = useOverlayController(\"CoachMark\", {\n reuseControllerFromContext: true,\n isDefaultOpen,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n\n const propsContext: PropsContext = {\n // A coach mark holds one short thought. Its heading is a bold label, not a\n // level in the page's outline — the same call ContextualHelp makes.\n Heading: {\n level: 5,\n elementType: \"span\",\n },\n // The dismiss action is composed, not configured. Flow never closes an\n // overlay on a consumer's behalf — `Modal` only augments a `closeOverlay`\n // that is already there — so this sets the shape and leaves the behaviour\n // to whatever `Action` the consumer wraps the button in.\n Button: {\n size: \"s\",\n className: styles.dismiss,\n },\n };\n\n return (\n <Popover\n withTip\n {...rest}\n modality=\"non-modal\"\n controller={controller}\n triggerRef={resolvedAnchorRef}\n >\n <OverlayContextProvider type=\"CoachMark\" controller={controller}>\n <PropsContextProvider props={propsContext}>\n <div className={styles.coachMark}>{children}</div>\n </PropsContextProvider>\n </OverlayContextProvider>\n </Popover>\n );\n});\n\nexport default CoachMark;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2DA,IAAM,gBACJ,WACA,WAC8B;CAC9B,MAAM,CAAC,eAAe,oBAAoB,SAAyB,IAAI;CAEvE,gBAAgB;EACd,IAAI,CAAC,QAAQ;GACX,iBAAiB,IAAI;GACrB;EACF;EAEA,MAAM,UAAU,SAAS,eAAe,MAAM;EAC9C,iBAAiB,OAAO;EAExB,IAAI,SACF;EAGF,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,OAAO,SAAS,eAAe,MAAM;GAE3C,IAAI,MAAM;IACR,iBAAiB,IAAI;IACrB,SAAS,WAAW;GACtB;EACF,CAAC;EAED,SAAS,QAAQ,SAAS,MAAM;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAElE,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO,cACC,aAAa,EAAE,SAAS,cAAc,GAC5C,CAAC,WAAW,aAAa,CAC3B;AACF;;;;;;;;;;;;;;;AAgBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,UACA,YAAY,qBACZ,WACA,QACA,gBAAgB,OAChB,KAAK,YACL,GAAG,SACD;CAEJ,MAAM,oBAAoB,aAAa,WAAW,MAAM;CAExD,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAE1C,MAAM,eAA6B;EAGjC,SAAS;GACP,OAAO;GACP,aAAa;EACf;EAKA,QAAQ;GACN,MAAM;GACN,~~WAAW~~,yBAAO;EACpB;CACF;CAEA,OACE,oBAAC,SAAD;EACE,SAAA;EACA,GAAI;EACJ,UAAS;EACG;EACZ,YAAY;EAEZ,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAwB;GACnD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC3B,UAAA,oBAAC,OAAD;KAAK,~~WAAW~~,yBAAO;KAAY;IAAc,CAAA;GAC7B,CAAA;EACA,CAAA;CACjB,CAAA;AAEb,CAAC"}
1	+ {"version":3,"file":"CoachMark.mjs","names":["styles"],"sources":["../../../../../../../src/components/CoachMark/CoachMark.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { PopoverProps } from \"@/components/Popover/Popover\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport styles from \"./CoachMark.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\n\nexport interface CoachMarkProps extends Omit<\n PopoverProps,\n // The popover's own shape, which a coach mark decides for itself.\n \| \"withTip\"\n \| \"modality\"\n // react-aria's own non-modal switch, which would compete with the shape this\n // component already decided on.\n \| \"isNonModal\"\n \| \"isDialogContent\"\n \| \"triggerRef\"\n // Positioning and dismissal it does not hand out: it is never dismissed by an\n // interaction outside it, it owns its Escape handling, and it renders where it\n // stands instead of in a portal.\n \| \"getTargetRect\"\n \| \"shouldCloseOnInteractOutside\"\n // Overridden in CSS to escape react-aria's viewport clamp, so a value here\n // would be silently ignored.\n \| \"maxHeight\"\n \| \"isKeyboardDismissDisabled\"\n \| \"UNSTABLE_portalContainer\"\n // Popover keeps this one working for the consumers it already has; a coach\n // mark has none yet, so it ships only the current name.\n \| \"defaultOpen\"\n> {\n /*\n The element the coach mark points at. It is an anchor, not a trigger —\n * nothing about it opens the coach mark. Give it either this or `anchor`.\n /\n anchorRef?: RefObject<Element \| null>;\n /\n The `id` of the element the coach mark points at, looked up once the\n * element exists. Use it where a ref cannot be shared — an mStudio extension\n * renders in a different context than the host, so a ref never arrives, while\n * an id does.\n /\n anchor?: string;\n}\n\n/\n Resolves whichever anchor was given into something `Popover` can position\n * against.\n \n An id is looked up after the commit, and kept looking for until it resolves.\n * A single lookup would only work for an anchor that is already mounted, which\n * is the case this prop does not exist for: remotely the host materializes the\n * page in pieces, so the anchor regularly arrives after the coach mark. Without\n * the observer the hint stays parked and invisible, and nothing says why.\n /\nconst useAnchorRef = (\n anchorRef: RefObject<Element \| null> \| undefined,\n anchor: string \| undefined,\n): RefObject<Element \| null> => {\n const [anchorElement, setAnchorElement] = useState<Element \| null>(null);\n\n useEffect(() => {\n if (!anchor) {\n setAnchorElement(null);\n return;\n }\n\n const element = document.getElementById(anchor);\n setAnchorElement(element);\n\n if (element) {\n return;\n }\n\n const observer = new MutationObserver(() => {\n const late = document.getElementById(anchor);\n\n if (late) {\n setAnchorElement(late);\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, { childList: true, subtree: true });\n\n return () => observer.disconnect();\n }, [anchor]);\n\n return useMemo(\n () => anchorRef ?? { current: anchorElement },\n [anchorRef, anchorElement],\n );\n};\n\n/\n Points at a control the user did not ask about — a feature that is new, moved\n * or easy to miss. It opens on its own, so it stays out of the way: the page\n * below keeps scrolling, focus is left alone, and the coach mark rides along\n * with its anchor instead of closing at the first scroll.\n \n Nothing announces it. It renders where it is written, so put it directly\n * behind the element it points at — then it follows that element in the reading\n * order, and its anchor refers to it through `aria-details`.\n \n @flr-generate all\n * @flr-ignore-props anchorRef\n * @flowStatus beta, new\n */\nexport const CoachMark = flowComponent(\"CoachMark\", (props) => {\n const {\n children,\n controller: controllerFromProps,\n anchorRef,\n anchor,\n isDefaultOpen = false,\n ref: ignoredRef,\n ...rest\n } = props;\n\n const resolvedAnchorRef = useAnchorRef(anchorRef, anchor);\n\n const controllerFromContext = useOverlayController(\"CoachMark\", {\n reuseControllerFromContext: true,\n isDefaultOpen,\n });\n\n const controller = controllerFromProps ?? controllerFromContext;\n\n const propsContext: PropsContext = {\n // A coach mark holds one short thought. Its heading is a bold label, not a\n // level in the page's outline — the same call ContextualHelp makes.\n Heading: {\n level: 5,\n elementType: \"span\",\n },\n // The dismiss action is composed, not configured. Flow never closes an\n // overlay on a consumer's behalf — `Modal` only augments a `closeOverlay`\n // that is already there — so this sets the shape and leaves the behaviour\n // to whatever `Action` the consumer wraps the button in.\n Button: {\n size: \"s\",\n className: styles.dismiss,\n },\n };\n\n return (\n <Popover\n withTip\n {...rest}\n modality=\"non-modal\"\n controller={controller}\n triggerRef={resolvedAnchorRef}\n >\n <OverlayContextProvider type=\"CoachMark\" controller={controller}>\n <PropsContextProvider props={propsContext}>\n <div className={styles.coachMark}>{children}</div>\n </PropsContextProvider>\n </OverlayContextProvider>\n </Popover>\n );\n});\n\nexport default CoachMark;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2DA,IAAM,gBACJ,WACA,WAC8B;CAC9B,MAAM,CAAC,eAAe,oBAAoB,SAAyB,IAAI;CAEvE,gBAAgB;EACd,IAAI,CAAC,QAAQ;GACX,iBAAiB,IAAI;GACrB;EACF;EAEA,MAAM,UAAU,SAAS,eAAe,MAAM;EAC9C,iBAAiB,OAAO;EAExB,IAAI,SACF;EAGF,MAAM,WAAW,IAAI,uBAAuB;GAC1C,MAAM,OAAO,SAAS,eAAe,MAAM;GAE3C,IAAI,MAAM;IACR,iBAAiB,IAAI;IACrB,SAAS,WAAW;GACtB;EACF,CAAC;EAED,SAAS,QAAQ,SAAS,MAAM;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAElE,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO,cACC,aAAa,EAAE,SAAS,cAAc,GAC5C,CAAC,WAAW,aAAa,CAC3B;AACF;;;;;;;;;;;;;;;AAgBA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,UACA,YAAY,qBACZ,WACA,QACA,gBAAgB,OAChB,KAAK,YACL,GAAG,SACD;CAEJ,MAAM,oBAAoB,aAAa,WAAW,MAAM;CAExD,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAE1C,MAAM,eAA6B;EAGjC,SAAS;GACP,OAAO;GACP,aAAa;EACf;EAKA,QAAQ;GACN,MAAM;GACN,WAAWA,yBAAO;EACpB;CACF;CAEA,OACE,oBAAC,SAAD;EACE,SAAA;EACA,GAAI;EACJ,UAAS;EACG;EACZ,YAAY;EAEZ,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAwB;GACnD,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC3B,UAAA,oBAAC,OAAD;KAAK,WAAWA,yBAAO;KAAY;IAAc,CAAA;GAC7B,CAAA;EACA,CAAA;CACjB,CAAA;AAEb,CAAC"}

package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../Button/Button.mjs";
 import CodeBlock_module_default from "./CodeBlock.module.mjs";
@@ -18,11 +19,13 @@ var CodeBlock = (props) => {
 	const [expandedHeight, setExpandedHeight] = useState();
 	const editorRef = useRef(null);
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "CodeBlock");
-	const rootClassName = clsx(CodeBlock_module_default.codeBlock, className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(CodeBlock_module_default.codeBlock, isSkeleton && CodeBlock_module_default.skeleton, className);
 	const id = useId();
 	if (!code) return /* @__PURE__ */ jsx("div", {
 		className: clsx(rootClassName, CodeBlock_module_default.withChildren),
-		children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children }) })
+		inert: isSkeleton || void 0,
+		children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx(SkeletonModeReset, { children }) }) })
 	});
 	const heightVariables = {
 		...maxHeight ? { "--max-height": `${maxHeight}px` } : {},
@@ -50,7 +53,8 @@ var CodeBlock = (props) => {
 		onTransitionEnd: (event) => {
 			if (event.propertyName === "max-height") setExpandedHeight(void 0);
 		},
-		children: /* @__PURE__ */ jsx(CodeEditor, {
+		inert: isSkeleton || void 0,
+		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(CodeEditor, {
 			...rest,
 			value: code,
 			editable: false,
@@ -81,7 +85,7 @@ var CodeBlock = (props) => {
 					children: stringFormatter.format(folded ? "showMore" : "showLess")
 				})
 			})
-		})
+		}) })
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n type FC,\n type PropsWithChildren,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/.locale.json\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" \| \"showLineNumbers\" \| \"copyable\">\n > {\n /* The code displayed in the block. /\n code?: string;\n /\n Controls truncation of long code blocks. `false` disables it, `true`\n * truncates after 8 lines, and a number sets the maximum line count.\n \n @default: false\n /\n truncateLines?: boolean \| number;\n}\n\n/* @flr-generate all /\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n truncateLines = false,\n ...rest\n } = props;\n\n const [folded, setFolded] = useState(truncateLines !== false);\n const [maxHeight, setMaxHeight] = useState<number>();\n / The full height, only while the toggle animates to or from it. /\n const [expandedHeight, setExpandedHeight] = useState<number>();\n const editorRef = useRef<HTMLElement>(null);\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n\n const rootClassName = clsx(styles.codeBlock, className);\n\n const id = useId();\n\n if (!code) {\n return (\n <div className={clsx(rootClassName, styles.withChildren)}>\n {/ Deliberately class-less: a `flow--` class would make the global\n reset's `font: inherit` apply and replace the UA monospace\n metrics. See CodeBlock.module.scss. /}\n <pre>\n <code>{children}</code>\n </pre>\n </div>\n );\n }\n\n const heightVariables: React.CSSProperties = {\n ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n ...(expandedHeight\n ? { \"--expanded-max-height\": `${expandedHeight}px` }\n : {}),\n };\n\n / A height transition needs a length on both ends – `none` does not\n interpolate. So the full height is measured for the transition and\n released once it ended, and code that changes later is not clipped. /\n const toggleFolded = () => {\n const editor = editorRef.current;\n\n if (!editor) {\n setFolded((folded) => !folded);\n return;\n }\n\n const animates = getComputedStyle(editor)\n .transitionDuration.split(\",\")\n .some((duration) => parseFloat(duration) > 0);\n\n if (folded) {\n setExpandedHeight(animates ? editor.scrollHeight : undefined);\n setFolded(false);\n } else {\n flushSync(() => setExpandedHeight(editor.scrollHeight));\n // Applies the start height before the folded one replaces it.\n editor.getBoundingClientRect();\n setFolded(true);\n }\n };\n\n return (\n <div\n className={clsx(\n rootClassName,\n maxHeight && styles.truncated,\n folded && styles.folded,\n )}\n style={heightVariables}\n onTransitionEnd={(event) => {\n if (event.propertyName === \"max-height\") {\n setExpandedHeight(undefined);\n }\n }}\n >\n <CodeEditor\n {...rest}\n value={code}\n editable={false}\n copyable={copyable}\n showLineNumbers={showLineNumbers}\n showLinterMarkers={false}\n showCodeFolding={false}\n showActiveLineMarker={false}\n isReadOnly\n onCreateEditor={(view) => {\n editorRef.current = view.dom;\n\n if (!truncateLines) {\n return;\n }\n\n const lineHeight = 20;\n const padding = 12;\n\n const visibleLines =\n typeof truncateLines === \"number\" ? truncateLines : 8;\n\n const totalLines = view.state.doc.lines;\n\n if (totalLines > visibleLines)\n setMaxHeight(lineHeight visibleLines + padding);\n }}\n id={id}\n >\n {truncateLines && maxHeight && (\n <div className={clsx(styles.buttonContainer)}>\n <Button\n variant=\"plain\"\n color=\"secondary\"\n size=\"s\"\n onPress={toggleFolded}\n aria-expanded={!folded}\n aria-controls={id}\n >\n {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n </Button>\n </div>\n )}\n </CodeEditor>\n </div>\n );\n};\n\nexport default CodeBlock;\n"],"mappings":"~~;;;;;;;;;;;;;AAmCA~~,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,~~4BAA4B~~,kBAAS,WAAW;~~CAExE~~,MAAM,gBAAgB,~~KAAK~~,yBAAO,~~WAAW~~,~~SAAS~~;~~CAEtD~~,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;~~EAAK~~,WAAW,KAAK,~~eAAe~~,yBAAO,YAAY;~~EAIrD~~,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,~~EAAO~~,~~SAAe~~,CAAA,~~EACnB~~,CAAA;CACF,CAAA;CAIT,MAAM,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,~~aAAa~~,yBAAO,WACpB,~~UAAU~~,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;~~EAEA~~,UAAA,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,~~KAAK~~,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA;~~CACT~~,CAAA;AAET"}
1	+ {"version":3,"file":"CodeBlock.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n type FC,\n type PropsWithChildren,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeBlock.module.scss\";\nimport { CodeEditor, type CodeEditorProps } from \"@/components/CodeEditor\";\nimport { Button } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/.locale.json\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CodeBlockProps\n extends\n PropsWithClassName,\n PropsWithChildren,\n Partial<\n Pick<CodeEditorProps, \"language\" \| \"showLineNumbers\" \| \"copyable\">\n > {\n /* The code displayed in the block. /\n code?: string;\n /\n Controls truncation of long code blocks. `false` disables it, `true`\n * truncates after 8 lines, and a number sets the maximum line count.\n \n @default: false\n /\n truncateLines?: boolean \| number;\n}\n\n/* @flr-generate all /\nexport const CodeBlock: FC<CodeBlockProps> = (props) => {\n const {\n code,\n className,\n copyable = false,\n showLineNumbers = false,\n children,\n truncateLines = false,\n ...rest\n } = props;\n\n const [folded, setFolded] = useState(truncateLines !== false);\n const [maxHeight, setMaxHeight] = useState<number>();\n / The full height, only while the toggle animates to or from it. /\n const [expandedHeight, setExpandedHeight] = useState<number>();\n const editorRef = useRef<HTMLElement>(null);\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"CodeBlock\");\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.codeBlock,\n isSkeleton && styles.skeleton,\n className,\n );\n\n const id = useId();\n\n if (!code) {\n return (\n <div\n className={clsx(rootClassName, styles.withChildren)}\n inert={isSkeleton \|\| undefined}\n >\n {/ Deliberately class-less: a `flow--` class would make the global\n reset's `font: inherit` apply and replace the UA monospace\n metrics. See CodeBlock.module.scss. /}\n <pre>\n <code>\n <SkeletonModeReset>{children}</SkeletonModeReset>\n </code>\n </pre>\n </div>\n );\n }\n\n const heightVariables: React.CSSProperties = {\n ...(maxHeight ? { \"--max-height\": `${maxHeight}px` } : {}),\n ...(expandedHeight\n ? { \"--expanded-max-height\": `${expandedHeight}px` }\n : {}),\n };\n\n / A height transition needs a length on both ends – `none` does not\n interpolate. So the full height is measured for the transition and\n released once it ended, and code that changes later is not clipped. /\n const toggleFolded = () => {\n const editor = editorRef.current;\n\n if (!editor) {\n setFolded((folded) => !folded);\n return;\n }\n\n const animates = getComputedStyle(editor)\n .transitionDuration.split(\",\")\n .some((duration) => parseFloat(duration) > 0);\n\n if (folded) {\n setExpandedHeight(animates ? editor.scrollHeight : undefined);\n setFolded(false);\n } else {\n flushSync(() => setExpandedHeight(editor.scrollHeight));\n // Applies the start height before the folded one replaces it.\n editor.getBoundingClientRect();\n setFolded(true);\n }\n };\n\n return (\n <div\n className={clsx(\n rootClassName,\n maxHeight && styles.truncated,\n folded && styles.folded,\n )}\n style={heightVariables}\n onTransitionEnd={(event) => {\n if (event.propertyName === \"max-height\") {\n setExpandedHeight(undefined);\n }\n }}\n inert={isSkeleton \|\| undefined}\n >\n {/ The code block is one skeleton surface in the size of its code, so\n the editor inside renders for real, but invisibly. /}\n <SkeletonModeReset>\n <CodeEditor\n {...rest}\n value={code}\n editable={false}\n copyable={copyable}\n showLineNumbers={showLineNumbers}\n showLinterMarkers={false}\n showCodeFolding={false}\n showActiveLineMarker={false}\n isReadOnly\n onCreateEditor={(view) => {\n editorRef.current = view.dom;\n\n if (!truncateLines) {\n return;\n }\n\n const lineHeight = 20;\n const padding = 12;\n\n const visibleLines =\n typeof truncateLines === \"number\" ? truncateLines : 8;\n\n const totalLines = view.state.doc.lines;\n\n if (totalLines > visibleLines)\n setMaxHeight(lineHeight visibleLines + padding);\n }}\n id={id}\n >\n {truncateLines && maxHeight && (\n <div className={clsx(styles.buttonContainer)}>\n <Button\n variant=\"plain\"\n color=\"secondary\"\n size=\"s\"\n onPress={toggleFolded}\n aria-expanded={!folded}\n aria-controls={id}\n >\n {stringFormatter.format(folded ? \"showMore\" : \"showLess\")}\n </Button>\n </div>\n )}\n </CodeEditor>\n </SkeletonModeReset>\n </div>\n );\n};\n\nexport default CodeBlock;\n"],"mappings":";;;;;;;;;;;;;;AAuCA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,MACA,WACA,WAAW,OACX,kBAAkB,OAClB,UACA,gBAAgB,OAChB,GAAG,SACD;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,kBAAkB,KAAK;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAiB;CAEnD,MAAM,CAAC,gBAAgB,qBAAqB,SAAiB;CAC7D,MAAM,YAAY,OAAoB,IAAI;CAE1C,MAAM,kBAAkB,4BAA4BA,kBAAS,WAAW;CACxE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBC,yBAAO,WACP,cAAcA,yBAAO,UACrB,SACF;CAEA,MAAM,KAAK,MAAM;CAEjB,IAAI,CAAC,MACH,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,eAAeA,yBAAO,YAAY;EAClD,OAAO,cAAc,KAAA;EAKrB,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UACE,oBAAC,mBAAD,EAAoB,SAA4B,CAAA,EAC5C,CAAA,EACH,CAAA;CACF,CAAA;CAIT,MAAM,kBAAuC;EAC3C,GAAI,YAAY,EAAE,gBAAgB,GAAG,UAAU,IAAI,IAAI,CAAC;EACxD,GAAI,iBACA,EAAE,yBAAyB,GAAG,eAAe,IAAI,IACjD,CAAC;CACP;CAKA,MAAM,qBAAqB;EACzB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ;GACX,WAAW,WAAW,CAAC,MAAM;GAC7B;EACF;EAEA,MAAM,WAAW,iBAAiB,MAAM,CAAC,CACtC,mBAAmB,MAAM,GAAG,CAAC,CAC7B,MAAM,aAAa,WAAW,QAAQ,IAAI,CAAC;EAE9C,IAAI,QAAQ;GACV,kBAAkB,WAAW,OAAO,eAAe,KAAA,CAAS;GAC5D,UAAU,KAAK;EACjB,OAAO;GACL,gBAAgB,kBAAkB,OAAO,YAAY,CAAC;GAEtD,OAAO,sBAAsB;GAC7B,UAAU,IAAI;EAChB;CACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW,KACT,eACA,aAAaA,yBAAO,WACpB,UAAUA,yBAAO,MACnB;EACA,OAAO;EACP,kBAAkB,UAAU;GAC1B,IAAI,MAAM,iBAAiB,cACzB,kBAAkB,KAAA,CAAS;EAE/B;EACA,OAAO,cAAc,KAAA;EAIrB,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,YAAD;GACE,GAAI;GACJ,OAAO;GACP,UAAU;GACA;GACO;GACjB,mBAAmB;GACnB,iBAAiB;GACjB,sBAAsB;GACtB,YAAA;GACA,iBAAiB,SAAS;IACxB,UAAU,UAAU,KAAK;IAEzB,IAAI,CAAC,eACH;IAGF,MAAM,aAAa;IACnB,MAAM,UAAU;IAEhB,MAAM,eACJ,OAAO,kBAAkB,WAAW,gBAAgB;IAItD,IAFmB,KAAK,MAAM,IAAI,QAEjB,cACf,aAAa,aAAa,eAAe,OAAO;GACpD;GACI;GAEH,UAAA,iBAAiB,aAChB,oBAAC,OAAD;IAAK,WAAW,KAAKA,yBAAO,eAAe;IACzC,UAAA,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,SAAS;KACT,iBAAe,CAAC;KAChB,iBAAe;KAEd,UAAA,gBAAgB,OAAO,SAAS,aAAa,UAAU;IAClD,CAAA;GACL,CAAA;EAEG,CAAA,EACK,CAAA;CAChB,CAAA;AAET"}

package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.module.mjs CHANGED Viewed

@@ -6,14 +6,18 @@ var withChildren = "flow--code-block--with-children";
 var truncated = "flow--code-block--truncated";
 var buttonContainer = "flow--code-block--button-container";
 var folded = "flow--code-block--folded";
+var skeleton = "flow--code-block--skeleton";
 var CodeBlock_module_default = {
 	codeBlock,
 	withChildren,
 	truncated,
 	buttonContainer,
-	folded
+	folded,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--code-block--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--code-block--skeleton-text-shimmer"
 };
 //#endregion
-export { buttonContainer, codeBlock, CodeBlock_module_default as default, folded, truncated, withChildren };
+export { buttonContainer, codeBlock, CodeBlock_module_default as default, folded, skeleton, truncated, withChildren };
 //# sourceMappingURL=CodeBlock.module.mjs.map

package/dist/js/packages/components/src/components/CodeBlock/CodeBlock.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlock.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/scrollbar\";\n\n/* The show-more strip: a size-s button plus the container's padding. /\n$button-height-s: calc(\n var(--button--line-height-s) + 2 var(--button--padding-s-y)\n);\n$show-more-height: calc(\n #{$button-height-s} + 2 * var(--code-block--show-more-padding)\n);\n$inner-corner-radius: calc(\n var(--code-block--corner-radius) - var(--form-control--border-width)\n);\n\n@function fade-color($amount) {\n @return color-mix(\n in srgb,\n var(--code-block--background-color) $amount,\n transparent\n );\n}\n\n.codeBlock {\n display: block;\n font-size: var(--code-block--font-size);\n font-family: var(--code-block--font-family);\n overflow: hidden;\n min-width: 0;\n\n &.withChildren {\n color: var(--code-block--content-color);\n background-color: var(--code-block--background-color);\n border: var(--code-block--border-width) var(--code-block--border-style)\n var(--code-block--border-color);\n border-radius: var(--code-block--corner-radius);\n\n /* These stay element selectors on purpose. Classing them would give them a\n `flow--` class, and the global reset's\n `:where([class=\"flow--\"] [class=\"flow--\"]) { font: inherit }` would\n then replace the UA monospace metrics — the code text visibly reflows.\n Fixing that is a design decision for UX, not a lint cleanup. /\n // stylelint-disable selector-max-type -- see above\n > pre {\n @include scrollbar.scrollbar;\n\n overflow-x: auto;\n padding: var(--code-block--padding);\n\n > code {\n text-shadow: none;\n }\n }\n // stylelint-enable selector-max-type\n }\n\n /* Truncatable: collapsed, the show-more button lies over the code, which\n runs down to the border and fades out behind it. Toggling animates the\n height, the fade and the button's position together. /\n &.truncated {\n :global(.flow--code-editor--code-mirror) {\n transition-property:\n color, background-color, border-color, padding-block-end;\n\n @include expandTransition.expandTransition;\n }\n\n / The editor holds the code and the line numbers, so both are clipped\n and fade out together. /\n :global(.cm-editor) {\n max-height: var(--expanded-max-height, none);\n overflow: hidden;\n border-end-start-radius: $inner-corner-radius;\n border-end-end-radius: $inner-corner-radius;\n transition-property: max-height;\n\n @include expandTransition.expandTransition;\n\n &::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: min(calc(var(--size-px--xxl) + #{$show-more-height}), 75%);\n pointer-events: none;\n opacity: 0;\n transition-property: opacity;\n\n @include expandTransition.expandTransition;\n\n / Eased stops: no visible edge on top, the code only shimmers through\n behind the button. /\n background: linear-gradient(\n to bottom,\n transparent,\n fade-color(10%) 15%,\n fade-color(30%) 30%,\n fade-color(60%) 45%,\n fade-color(82%) 58%,\n fade-color(92%) 68%,\n fade-color(95%) 85%,\n fade-color(96%)\n );\n }\n }\n\n / Keeps its full height instead of shrinking into the editor, so the\n editor clips it rather than the scroller scrolling within. The\n scroller's own z-index (CodeMirror's) keeps the line numbers under the\n fade. /\n :global(.cm-scroller) {\n flex-shrink: 0;\n }\n\n .buttonContainer {\n transition-property: margin-top, margin-bottom;\n\n @include expandTransition.expandTransition;\n }\n }\n\n &.folded {\n :global(.flow--code-editor--code-mirror) {\n padding-block-end: 0;\n }\n\n / Grows by the button strip, so the button covers none of the lines. /\n :global(.cm-editor) {\n max-height: calc(var(--max-height) + #{$show-more-height});\n\n &::after {\n opacity: 1;\n }\n }\n\n .buttonContainer {\n margin-top: calc(#{$show-more-height} -1);\n margin-bottom: 0;\n }\n }\n\n /* A code block is not an input – both axes use its own padding. The repeated\n root class only buys specificity over CodeEditor's own `.codeMirror` rules\n (incl. `.readonly`); it identifies nothing. /\n &.codeBlock.codeBlock :global(.flow--code-editor--code-mirror) {\n --form-control--padding-y: var(--code-block--padding);\n --form-control--padding-x: var(--code-block--padding);\n\n border-color: var(--code-block--border-color);\n }\n\n .buttonContainer {\n position: relative;\n margin-top: calc(var(--code-block--show-more-padding) -1);\n\n /* Covers the editor's bottom padding – the container brings its own. */\n margin-bottom: calc(\n var(--form-control--border-width) - var(--form-control--padding-y)\n );\n display: flex;\n justify-content: center;\n padding-block: var(--code-block--show-more-padding);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CodeBlock.module.mjs","names":[],"sources":["../../../../../../../src/components/CodeBlock/CodeBlock.module.scss"],"sourcesContent":["@use \"@/styles/mixins/expandTransition\";\n@use \"@/styles/mixins/scrollbar\";\n@use \"@/styles/mixins/skeleton\";\n\n/* The show-more strip: a size-s button plus the container's padding. /\n$button-height-s: calc(\n var(--button--line-height-s) + 2 var(--button--padding-s-y)\n);\n$show-more-height: calc(\n #{$button-height-s} + 2 * var(--code-block--show-more-padding)\n);\n$inner-corner-radius: calc(\n var(--code-block--corner-radius) - var(--form-control--border-width)\n);\n\n@function fade-color($amount) {\n @return color-mix(\n in srgb,\n var(--code-block--background-color) $amount,\n transparent\n );\n}\n\n.codeBlock {\n display: block;\n font-size: var(--code-block--font-size);\n font-family: var(--code-block--font-family);\n overflow: hidden;\n min-width: 0;\n\n &.withChildren {\n color: var(--code-block--content-color);\n background-color: var(--code-block--background-color);\n border: var(--code-block--border-width) var(--code-block--border-style)\n var(--code-block--border-color);\n border-radius: var(--code-block--corner-radius);\n\n /* These stay element selectors on purpose. Classing them would give them a\n `flow--` class, and the global reset's\n `:where([class=\"flow--\"] [class=\"flow--\"]) { font: inherit }` would\n then replace the UA monospace metrics — the code text visibly reflows.\n Fixing that is a design decision for UX, not a lint cleanup. /\n // stylelint-disable selector-max-type -- see above\n > pre {\n @include scrollbar.scrollbar;\n\n overflow-x: auto;\n padding: var(--code-block--padding);\n\n > code {\n text-shadow: none;\n }\n }\n // stylelint-enable selector-max-type\n }\n\n /* Truncatable: collapsed, the show-more button lies over the code, which\n runs down to the border and fades out behind it. Toggling animates the\n height, the fade and the button's position together. /\n &.truncated {\n :global(.flow--code-editor--code-mirror) {\n transition-property:\n color, background-color, border-color, padding-block-end;\n\n @include expandTransition.expandTransition;\n }\n\n / The editor holds the code and the line numbers, so both are clipped\n and fade out together. /\n :global(.cm-editor) {\n max-height: var(--expanded-max-height, none);\n overflow: hidden;\n border-end-start-radius: $inner-corner-radius;\n border-end-end-radius: $inner-corner-radius;\n transition-property: max-height;\n\n @include expandTransition.expandTransition;\n\n &::after {\n content: \"\";\n position: absolute;\n inset-inline: 0;\n bottom: 0;\n height: min(calc(var(--size-px--xxl) + #{$show-more-height}), 75%);\n pointer-events: none;\n opacity: 0;\n transition-property: opacity;\n\n @include expandTransition.expandTransition;\n\n / Eased stops: no visible edge on top, the code only shimmers through\n behind the button. /\n background: linear-gradient(\n to bottom,\n transparent,\n fade-color(10%) 15%,\n fade-color(30%) 30%,\n fade-color(60%) 45%,\n fade-color(82%) 58%,\n fade-color(92%) 68%,\n fade-color(95%) 85%,\n fade-color(96%)\n );\n }\n }\n\n / Keeps its full height instead of shrinking into the editor, so the\n editor clips it rather than the scroller scrolling within. The\n scroller's own z-index (CodeMirror's) keeps the line numbers under the\n fade. /\n :global(.cm-scroller) {\n flex-shrink: 0;\n }\n\n .buttonContainer {\n transition-property: margin-top, margin-bottom;\n\n @include expandTransition.expandTransition;\n }\n }\n\n &.folded {\n :global(.flow--code-editor--code-mirror) {\n padding-block-end: 0;\n }\n\n / Grows by the button strip, so the button covers none of the lines. /\n :global(.cm-editor) {\n max-height: calc(var(--max-height) + #{$show-more-height});\n\n &::after {\n opacity: 1;\n }\n }\n\n .buttonContainer {\n margin-top: calc(#{$show-more-height} -1);\n margin-bottom: 0;\n }\n }\n\n /* A code block is not an input – both axes use its own padding. The repeated\n root class only buys specificity over CodeEditor's own `.codeMirror` rules\n (incl. `.readonly`); it identifies nothing. /\n &.codeBlock.codeBlock :global(.flow--code-editor--code-mirror) {\n --form-control--padding-y: var(--code-block--padding);\n --form-control--padding-x: var(--code-block--padding);\n\n border-color: var(--code-block--border-color);\n }\n\n .buttonContainer {\n position: relative;\n margin-top: calc(var(--code-block--show-more-padding) -1);\n\n /* Covers the editor's bottom padding – the container brings its own. /\n margin-bottom: calc(\n var(--form-control--border-width) - var(--form-control--padding-y)\n );\n display: flex;\n justify-content: center;\n padding-block: var(--code-block--show-more-padding);\n }\n\n / SkeletonMode — after the variants, so the surface wins over their colors */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--code-block--corner-radius);\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}