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

@mittwald/flow-react-components 1.5.0-next.8 → 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/ProgressBar/ProgressBar.mjs.map CHANGED Viewed

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

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

@@ -12,6 +12,7 @@ var info = "flow--progress-bar--info";
 var success = "flow--progress-bar--success";
 var danger = "flow--progress-bar--danger";
 var warning = "flow--progress-bar--warning";
+var skeleton = "flow--progress-bar--skeleton";
 var ProgressBar_module_default = {
 	progressBar,
 	legend,
@@ -27,9 +28,12 @@ var ProgressBar_module_default = {
 	info,
 	success,
 	danger,
-	warning
+	warning,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--progress-bar--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--progress-bar--skeleton-text-shimmer"
 };
 //#endregion
-export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, segment, success, value, warning };
+export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, segment, skeleton, success, value, warning };
 //# sourceMappingURL=ProgressBar.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":[".progressBar {\n display: grid;\n grid-template-areas:\n \"label value\"\n \"bar bar\";\n grid-template-columns: 1fr auto;\n column-gap: var(--progress-bar--spacing-x);\n width: 100%;\n font-size: var(--progress-bar--font-size);\n\n @extend .size-m;\n @extend .info;\n\n &:has(.legend) {\n grid-template-areas:\n \"label value\"\n \"bar bar\"\n \"legend legend\";\n }\n\n /* Elements /\n\n .label {\n grid-area: label;\n }\n\n .value {\n grid-area: value;\n font-weight: var(--progress-bar--value-font-weight);\n }\n\n .bar {\n grid-area: bar;\n border-radius: var(--progress-bar--corner-radius);\n background-color: var(--progress-bar--background-color);\n box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n var(--progress-bar--border-color);\n overflow: hidden;\n margin-top: var(--progress-bar--spacing-y);\n }\n\n .fill {\n height: 100%;\n width: calc(var(--progress-bar--percentage) 1%);\n display: flex;\n animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n }\n\n /* Segments share the fill in proportion to their values. /\n .segment {\n flex: var(--progress-bar--segment-value) 1 0;\n }\n\n .legend {\n grid-area: legend;\n margin-top: var(--progress-bar--spacing-bar-to-legend);\n }\n\n / Size /\n\n &.size-s {\n font-size: var(--progress-bar--font-size-s);\n }\n\n / Sizes /\n\n @mixin size($size) {\n &.size-#{$size} {\n .bar {\n height: var(--progress-bar--height--#{$size});\n }\n }\n }\n\n @include size(s);\n @include size(m);\n @include size(l);\n\n / Variants /\n\n @mixin status($status) {\n &.#{$status} {\n .fill {\n background: var(--progress-bar--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n}\n\n/ The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n from {\n width: 0%;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.progressBar {\n display: grid;\n grid-template-areas:\n \"label value\"\n \"bar bar\";\n grid-template-columns: 1fr auto;\n column-gap: var(--progress-bar--spacing-x);\n width: 100%;\n font-size: var(--progress-bar--font-size);\n\n @extend .size-m;\n @extend .info;\n\n &:has(.legend) {\n grid-template-areas:\n \"label value\"\n \"bar bar\"\n \"legend legend\";\n }\n\n /* Elements /\n\n .label {\n grid-area: label;\n }\n\n .value {\n grid-area: value;\n font-weight: var(--progress-bar--value-font-weight);\n }\n\n .bar {\n grid-area: bar;\n border-radius: var(--progress-bar--corner-radius);\n background-color: var(--progress-bar--background-color);\n box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n var(--progress-bar--border-color);\n overflow: hidden;\n margin-top: var(--progress-bar--spacing-y);\n }\n\n .fill {\n height: 100%;\n width: calc(var(--progress-bar--percentage) 1%);\n display: flex;\n animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n }\n\n /* Segments share the fill in proportion to their values. /\n .segment {\n flex: var(--progress-bar--segment-value) 1 0;\n }\n\n .legend {\n grid-area: legend;\n margin-top: var(--progress-bar--spacing-bar-to-legend);\n }\n\n / Size /\n\n &.size-s {\n font-size: var(--progress-bar--font-size-s);\n }\n\n / Sizes /\n\n @mixin size($size) {\n &.size-#{$size} {\n .bar {\n height: var(--progress-bar--height--#{$size});\n }\n }\n }\n\n @include size(s);\n @include size(m);\n @include size(l);\n\n / Variants /\n\n @mixin status($status) {\n &.#{$status} {\n .fill {\n background: var(--progress-bar--#{$status}-fill-background-color);\n }\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(danger);\n @include status(warning);\n\n / SkeletonMode: the track is a surface, the value stays hidden /\n &.skeleton {\n .bar {\n @include skeleton.surface;\n\n --skeleton-radius: var(--progress-bar--corner-radius);\n\n box-shadow: none;\n }\n\n .value {\n visibility: hidden;\n }\n }\n}\n\n@include skeleton.keyframes;\n\n/ The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n from {\n width: 0%;\n }\n}\n"],"mappings":""}

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

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../../SkeletonMode/skeletonModeContext.mjs";
 import { isCategoricalColor } from "../../../lib/tokens/isCategoricalColor.mjs";
 import ProgressBar_module_default from "../ProgressBar.module.mjs";
 import { getCategoricalColorByIndex } from "../../../lib/tokens/getCategoricalColorByIndex.mjs";
@@ -7,6 +8,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/ProgressBar/components/ProgressBarBar.tsx
 var ProgressBarBar = (props) => {
 	const { segments, percentage } = props;
+	if (useSkeletonMode()) return /* @__PURE__ */ jsx("div", { className: ProgressBar_module_default.bar });
 	const segmentFill = segments && segments.length > 0 ? segments.map((s, i) => {
 		const backgroundColor = !s.color ? `var(--color--categorical--${getCategoricalColorByIndex(i)})` : isCategoricalColor(s.color) ? `var(--color--categorical--${s.color})` : s.color;
 		return /* @__PURE__ */ jsx("div", {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBarBar.mjs","names":[],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport type { FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n percentage?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n const { segments, percentage } = props;\n\n const segmentFill =\n segments && segments.length > 0\n ? segments.map((s, i) => {\n const backgroundColor = !s.color\n ? `var(--color--categorical--${getCategoricalColorByIndex(i)})`\n : isCategoricalColor(s.color)\n ? `var(--color--categorical--${s.color})`\n : s.color;\n\n return (\n <div\n key={s.title}\n aria-hidden\n className={styles.segment}\n style={{\n backgroundColor,\n \"--progress-bar--segment-value\": s.value,\n }}\n />\n );\n })\n : null;\n\n return (\n <div className={styles.bar}>\n <div\n className={styles.fill}\n style={{ \"--progress-bar--percentage\": percentage }}\n >\n {segmentFill}\n </div>\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;AAUA~~,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,eAAe;~~CAEjC~~,MAAM,cACJ,YAAY,SAAS,SAAS,IAC1B,SAAS,KAAK,GAAG,MAAM;EACrB,MAAM,kBAAkB,CAAC,EAAE,QACvB,6BAA6B,2BAA2B,CAAC,EAAE,KAC3D,mBAAmB,EAAE,KAAK,IACxB,6BAA6B,EAAE,MAAM,KACrC,EAAE;EAER,OACE,oBAAC,OAAD;GAEE,eAAA;GACA,~~WAAW~~,2BAAO;GAClB,OAAO;IACL;IACA,iCAAiC,EAAE;GACrC;EACD,GAPM,EAAE,KAOR;CAEL,CAAC,IACD;CAEN,OACE,oBAAC,OAAD;EAAK,~~WAAW~~,2BAAO;EACrB,UAAA,oBAAC,OAAD;GACE,~~WAAW~~,2BAAO;GAClB,OAAO,EAAE,8BAA8B,WAAW;GAEjD,UAAA;EACE,CAAA;CACF,CAAA;AAET"}
1	+ {"version":3,"file":"ProgressBarBar.mjs","names":["styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport type { FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n percentage?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n const { segments, percentage } = props;\n\n const isSkeleton = useSkeletonMode();\n\n /* In the mode, the track stays and shows no value. */\n if (isSkeleton) {\n return <div className={styles.bar} />;\n }\n\n const segmentFill =\n segments && segments.length > 0\n ? segments.map((s, i) => {\n const backgroundColor = !s.color\n ? `var(--color--categorical--${getCategoricalColorByIndex(i)})`\n : isCategoricalColor(s.color)\n ? `var(--color--categorical--${s.color})`\n : s.color;\n\n return (\n <div\n key={s.title}\n aria-hidden\n className={styles.segment}\n style={{\n backgroundColor,\n \"--progress-bar--segment-value\": s.value,\n }}\n />\n );\n })\n : null;\n\n return (\n <div className={styles.bar}>\n <div\n className={styles.fill}\n style={{ \"--progress-bar--percentage\": percentage }}\n >\n {segmentFill}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;AAWA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,eAAe;CAKjC,IAHmB,gBAGf,GACF,OAAO,oBAAC,OAAD,EAAK,WAAWA,2BAAO,IAAM,CAAA;CAGtC,MAAM,cACJ,YAAY,SAAS,SAAS,IAC1B,SAAS,KAAK,GAAG,MAAM;EACrB,MAAM,kBAAkB,CAAC,EAAE,QACvB,6BAA6B,2BAA2B,CAAC,EAAE,KAC3D,mBAAmB,EAAE,KAAK,IACxB,6BAA6B,EAAE,MAAM,KACrC,EAAE;EAER,OACE,oBAAC,OAAD;GAEE,eAAA;GACA,WAAWA,2BAAO;GAClB,OAAO;IACL;IACA,iCAAiC,EAAE;GACrC;EACD,GAPM,EAAE,KAOR;CAEL,CAAC,IACD;CAEN,OACE,oBAAC,OAAD;EAAK,WAAWA,2BAAO;EACrB,UAAA,oBAAC,OAAD;GACE,WAAWA,2BAAO;GAClB,OAAO,EAAE,8BAA8B,WAAW;GAEjD,UAAA;EACE,CAAA;CACF,CAAA;AAET"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBarValue.mjs","names":[],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC, type ReactNode } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props extends Pick<\n ProgressBarProps,\n \"showMaxValue\" \| \"maxValue\" \| \"formatOptions\"\n> {\n value?: number;\n valueLabel?: ReactNode;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n const {\n showMaxValue,\n maxValue,\n value = 0,\n formatOptions,\n valueLabel,\n } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const maxValueText =\n !showMaxValue \|\| !maxValue\n ? undefined\n : formatOptions\n ? formatter.format(maxValue)\n : `${maxValue} %`;\n\n const valueText = formatOptions ? formatter.format(value) : `${value} %`;\n\n const textWithMaxValue = `${valueText} ${stringFormatter.format(\"progressBar.of\")} ${maxValueText}`;\n\n return (\n <span className={styles.value}>\n {valueLabel ?? (maxValueText ? textWithMaxValue : valueText)}\n </span>\n );\n};\n"],"mappings":";;;;;;;;AAcA,IAAa,oBAA+B,UAAU;CACpD,MAAM,EACJ,cACA,UACA,QAAQ,GACR,eACA,eACE;CAEJ,MAAM,YAAY,mBAAmB,aAAa;CAElD,MAAM,kBAAkB,~~4BAA4B~~,gBAAO;CAE3D,MAAM,eACJ,CAAC,gBAAgB,CAAC,WACd,KAAA,IACA,gBACE,UAAU,OAAO,QAAQ,IACzB,GAAG,SAAS;CAEpB,MAAM,YAAY,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAErE,MAAM,mBAAmB,GAAG,UAAU,GAAG,gBAAgB,OAAO,gBAAgB,EAAE,GAAG;CAErF,OACE,oBAAC,QAAD;EAAM,~~WAAW~~,2BAAO;EACrB,UAAA,eAAe,eAAe,mBAAmB;CAC9C,CAAA;AAEV"}
1	+ {"version":3,"file":"ProgressBarValue.mjs","names":["locales","styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarValue.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport { type FC, type ReactNode } from \"react\";\nimport { useLocalizedStringFormatter, useNumberFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\n\ninterface Props extends Pick<\n ProgressBarProps,\n \"showMaxValue\" \| \"maxValue\" \| \"formatOptions\"\n> {\n value?: number;\n valueLabel?: ReactNode;\n}\n\nexport const ProgressBarValue: FC<Props> = (props) => {\n const {\n showMaxValue,\n maxValue,\n value = 0,\n formatOptions,\n valueLabel,\n } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const maxValueText =\n !showMaxValue \|\| !maxValue\n ? undefined\n : formatOptions\n ? formatter.format(maxValue)\n : `${maxValue} %`;\n\n const valueText = formatOptions ? formatter.format(value) : `${value} %`;\n\n const textWithMaxValue = `${valueText} ${stringFormatter.format(\"progressBar.of\")} ${maxValueText}`;\n\n return (\n <span className={styles.value}>\n {valueLabel ?? (maxValueText ? textWithMaxValue : valueText)}\n </span>\n );\n};\n"],"mappings":";;;;;;;;AAcA,IAAa,oBAA+B,UAAU;CACpD,MAAM,EACJ,cACA,UACA,QAAQ,GACR,eACA,eACE;CAEJ,MAAM,YAAY,mBAAmB,aAAa;CAElD,MAAM,kBAAkB,4BAA4BA,gBAAO;CAE3D,MAAM,eACJ,CAAC,gBAAgB,CAAC,WACd,KAAA,IACA,gBACE,UAAU,OAAO,QAAQ,IACzB,GAAG,SAAS;CAEpB,MAAM,YAAY,gBAAgB,UAAU,OAAO,KAAK,IAAI,GAAG,MAAM;CAErE,MAAM,mBAAmB,GAAG,UAAU,GAAG,gBAAgB,OAAO,gBAAgB,EAAE,GAAG;CAErF,OACE,oBAAC,QAAD;EAAM,WAAWC,2BAAO;EACrB,UAAA,eAAe,eAAe,mBAAmB;CAC9C,CAAA;AAEV"}

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

@@ -16,7 +16,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var RadioGroup = flowComponent("RadioGroup", (props) => {
 	const { children, className, s, m, l, ref, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "RadioGroup");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, skeletonProps } = useFieldComponent(props, "RadioGroup");
 	const rootClassName = clsx(FormField_module_default.formField, className);
 	const propsContext = {
 		RadioButton: { tunnel: {
@@ -33,7 +33,9 @@ var RadioGroup = flowComponent("RadioGroup", (props) => {
 	useMakeFocusable(localRadioRef);
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
-		className: clsx(rootClassName, fieldProps.className),
+		...skeletonProps,
+		"aria-describedby": controlProps["aria-describedby"],
+		className: clsx(rootClassName, wrapperProps.className),
 		ref: localRadioRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,

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

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

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

@@ -1,8 +1,10 @@
 "use client"
 /* */
 import { flowComponent } from "../../../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../../../SkeletonMode/skeletonModeContext.mjs";
 import { IconRadioOff } from "../../../Icon/components/icons/IconRadioOff.mjs";
 import { IconRadioOn } from "../../../Icon/components/icons/IconRadioOn.mjs";
+import { SkeletonRawText } from "../../../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Radio_module_default from "./Radio.module.mjs";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -11,12 +13,23 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var Radio = flowComponent("Radio", (props) => {
 	const { children, className, ref, ...rest } = props;
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(Radio_module_default.radio, className);
+	const onIcon = /* @__PURE__ */ jsx(IconRadioOn, { className: Radio_module_default.icon });
+	const offIcon = /* @__PURE__ */ jsx(IconRadioOff, { className: Radio_module_default.icon });
+	const renderIcon = (isSelected) => {
+		const icon = isSelected ? onIcon : offIcon;
+		const skeletonIcon = /* @__PURE__ */ jsx("span", {
+			className: Radio_module_default.skeletonIcon,
+			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: icon })
+		});
+		return isSkeleton ? skeletonIcon : icon;
+	};
 	return /* @__PURE__ */ jsx(Aria.Radio, {
 		...rest,
 		className: rootClassName,
 		ref,
-		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [isSelected ? /* @__PURE__ */ jsx(IconRadioOn, { className: Radio_module_default.icon }) : /* @__PURE__ */ jsx(IconRadioOff, { className: Radio_module_default.icon }), children] })
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [renderIcon(isSelected), /* @__PURE__ */ jsx(SkeletonRawText, { children })] })
 	});
 });
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.mjs","names":[],"sources":["../../../../../../../../../src/components/RadioGroup/components/Radio/Radio.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Radio.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconRadioOff, IconRadioOn } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface RadioProps\n extends\n PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Radio = flowComponent(\"Radio\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.radio, className);\n\n ~~return~~ ~~(\n~~ <~~Aria.Radio~~ {~~...rest~~} className={~~rootClassName~~} ~~ref~~=~~{ref}>\n {~~({ isSelected }) => (\n ~~<>\n {~~isSelected ? (\n <~~IconRadioOn~~ className={styles.icon} ~~/>\~~n ) : (\n <~~IconRadioOff~~ className={~~styles.icon~~} ~~/>\~~n )}\n {children}\n </>\n )}\n </Aria.Radio>\n );\n});\n\nexport default Radio;\n"],"mappings":"~~;;;;;;;;;;;AAcA~~,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,~~KAAK~~,qBAAO,OAAO,SAAS;CAElD,OACE,oBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EACjD,WAAA,EAAE,iBACF,~~qBAAA~~,UAAA,EAAA,UAAA,CACG,~~aACC,oBAAC,aAAD,EAAa,~~WAAW,~~qBAAO~~,~~KAAO~~,~~CAAA,IAEtC,~~oBAAC,~~cAAD~~,~~EAAc~~,~~WAAW~~,~~qBAAO,KAAO,~~CAAA,~~GAExC~~,~~QACD,~~EAAA,CAAA;CAEM,CAAA;AAEhB,CAAC"}
1	+ {"version":3,"file":"Radio.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../../../src/components/RadioGroup/components/Radio/Radio.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Radio.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconRadioOff, IconRadioOn } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface RadioProps\n extends\n PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Radio = flowComponent(\"Radio\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(styles.radio, className);\n\n const onIcon = <IconRadioOn className={styles.icon} />;\n const offIcon = <IconRadioOff className={styles.icon} />;\n\n const renderIcon = (isSelected: boolean) => {\n const icon = isSelected ? onIcon : offIcon;\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 <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n {({ isSelected }) => (\n <>\n {renderIcon(isSelected)}\n <SkeletonRawText>{children}</SkeletonRawText>\n </>\n )}\n </Aria.Radio>\n );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KAAKA,qBAAO,OAAO,SAAS;CAElD,MAAM,SAAS,oBAAC,aAAD,EAAa,WAAWA,qBAAO,KAAO,CAAA;CACrD,MAAM,UAAU,oBAAC,cAAD,EAAc,WAAWA,qBAAO,KAAO,CAAA;CAEvD,MAAM,cAAc,eAAwB;EAC1C,MAAM,OAAO,aAAa,SAAS;EAEnC,MAAM,eACJ,oBAAC,QAAD;GAAM,WAAWA,qBAAO;GACtB,UAAA,oBAAC,mBAAD,EAAA,UAAoB,KAAwB,CAAA;EACxC,CAAA;EAGR,OAAO,aAAa,eAAe;CACrC;CAEA,OACE,oBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EACjD,WAAA,EAAE,iBACF,qBAAAC,UAAA,EAAA,UAAA,CACG,WAAW,UAAU,GACtB,oBAAC,iBAAD,EAAkB,SAA0B,CAAA,CAC5C,EAAA,CAAA;CAEM,CAAA;AAEhB,CAAC"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.module.mjs","names":[],"sources":["../../../../../../../../../src/components/RadioGroup/components/Radio/Radio.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.radio {\n display: grid;\n column-gap: var(--form-control--spacing-x);\n grid-template-columns: auto 1fr;\n width: fit-content;\n\n @include focus.focus;\n\n .icon {\n color: var(--choice--icon-color--default);\n }\n\n &[data-selected] {\n .icon {\n color: var(--choice--icon-color--selected);\n\n /* Subtle pop when the filled dot mounts on selection. */\n animation: radio-pop var(--transition--duration--fast)\n cubic-bezier(0.2, 0, 0, 1);\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\n@keyframes radio-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":"Radio.module.mjs","names":[],"sources":["../../../../../../../../../src/components/RadioGroup/components/Radio/Radio.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/formControl\";\n\n.radio {\n display: grid;\n column-gap: var(--form-control--spacing-x);\n grid-template-columns: auto 1fr;\n width: fit-content;\n\n @include focus.focus;\n\n .icon {\n color: var(--choice--icon-color--default);\n }\n\n &[data-selected] {\n .icon {\n color: var(--choice--icon-color--selected);\n\n /* Subtle pop when the filled dot mounts on selection. /\n animation: radio-pop var(--transition--duration--fast)\n cubic-bezier(0.2, 0, 0, 1);\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 / Skeleton: a circle around the icon is the surface */\n .skeletonIcon {\n display: flex;\n align-self: start;\n\n @include formControl.formSkeletonShape(var(--corner-radius--round));\n }\n}\n\n@keyframes radio-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/RadioGroup/components/RadioButton/RadioButton.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 { Radio } from "../Radio/Radio.mjs";
 import RadioButton_module_default from "./RadioButton.module.mjs";
 import clsx from "clsx";
@@ -10,12 +11,13 @@ import { jsx } from "react/jsx-runtime";
 /** @flr-generate all */
 var RadioButton = flowComponent("RadioButton", (props) => {
 	const { children, className, ref, ...rest } = props;
+	const isSkeleton = useSkeletonMode();
 	const rootClassName = clsx(RadioButton_module_default.radioButton, className);
 	const propsContext = {
 		Text: { className: RadioButton_module_default.label },
 		Content: { className: RadioButton_module_default.content }
 	};
-	return /* @__PURE__ */ jsx(Radio, {
+	const radio = /* @__PURE__ */ jsx(Radio, {
 		...rest,
 		className: rootClassName,
 		ref,
@@ -24,6 +26,7 @@ var RadioButton = flowComponent("RadioButton", (props) => {
 			children
 		})
 	});
+	return isSkeleton ? /* @__PURE__ */ jsx(SkeletonModeReset, { children: radio }) : radio;
 });
 //#endregion
 export { RadioButton, RadioButton as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.mjs","names":[],"sources":["../../../../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import styles from \"./RadioButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { RadioProps } from \"@/components/RadioGroup\";\nimport { Radio } from \"@/components/RadioGroup\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport type RadioButtonProps = RadioProps;\n\n/** @flr-generate all */\nexport const RadioButton = flowComponent(\"RadioButton\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.radioButton, className);\n\n const propsContext: PropsContext = {\n Text: {\n className: styles.label,\n },\n Content: {\n className: styles.content,\n },\n };\n\n ~~return~~ (\n <Radio {...rest} className={rootClassName} ref={ref}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Radio>\n );\n});\n\nexport default RadioButton;\n"],"mappings":"~~;;;;;;;;;;AAWA~~,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,~~KAAK~~,2BAAO,aAAa,SAAS;CAExD,MAAM,eAA6B;EACjC,MAAM,EACJ,~~WAAW~~,2BAAO,MACpB;EACA,SAAS,EACP,~~WAAW~~,2BAAO,QACpB;CACF;CAEA,~~OACE~~,oBAAC,OAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACjB,CAAA;~~AAEX~~,CAAC"}
1	+ {"version":3,"file":"RadioButton.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import styles from \"./RadioButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { RadioProps } from \"@/components/RadioGroup\";\nimport { Radio } from \"@/components/RadioGroup\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport type RadioButtonProps = RadioProps;\n\n/** @flr-generate all /\nexport const RadioButton = flowComponent(\"RadioButton\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(styles.radioButton, className);\n\n const propsContext: PropsContext = {\n Text: {\n className: styles.label,\n },\n Content: {\n className: styles.content,\n },\n };\n\n const radio = (\n <Radio {...rest} className={rootClassName} ref={ref}>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </Radio>\n );\n\n / The whole button is the surface, its content draws no bars. */\n return isSkeleton ? <SkeletonModeReset>{radio}</SkeletonModeReset> : radio;\n});\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;;AAeA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KAAKA,2BAAO,aAAa,SAAS;CAExD,MAAM,eAA6B;EACjC,MAAM,EACJ,WAAWA,2BAAO,MACpB;EACA,SAAS,EACP,WAAWA,2BAAO,QACpB;CACF;CAEA,MAAM,QACJ,oBAAC,OAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACjB,CAAA;CAIT,OAAO,aAAa,oBAAC,mBAAD,EAAA,UAAoB,MAAyB,CAAA,IAAI;AACvE,CAAC"}

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

@@ -9,7 +9,9 @@ var RadioButton_module_default = {
 	label,
 	content,
 	radioButton,
-	readonly
+	readonly,
+	"skeleton-surface-shimmer": "flow--radio-group--radio-button--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--radio-group--radio-button--skeleton-text-shimmer"
 };
 //#endregion
 export { content, RadioButton_module_default as default, label, radioButton, readonly };

package/dist/js/packages/components/src/components/Rating/Rating.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 { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
@@ -22,8 +23,9 @@ var toSegmentValue = (value) => value === void 0 ? void 0 : Math.round(value).to
 */
 var Rating = flowComponent("Rating", (props) => {
 	const { value, defaultValue, size = "m", maxValue = 5, fill = "cumulative", className, children, ref, iconEmpty, iconFilled, ...rest } = props;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "Rating");
-	const rootClassName = clsx(Rating_module_default.rating, Rating_module_default[`size-${size}`], Rating_module_default[`fill-${fill}`], fieldProps.className, className);
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "Rating");
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Rating_module_default.rating, Rating_module_default[`size-${size}`], Rating_module_default[`fill-${fill}`], isSkeleton && Rating_module_default.skeleton, wrapperProps.className, className);
 	const localRef = useObjectRef(ref);
 	useMakeFocusable(localRef);
 	const segmentProps = {
@@ -44,10 +46,12 @@ var Rating = flowComponent("Rating", (props) => {
 	const defaultSegments = Array.from({ length: maxValue }, (_, index) => /* @__PURE__ */ jsx(RatingSegment, { ...segmentProps }, index));
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
+		"aria-describedby": controlProps["aria-describedby"],
 		className: rootClassName,
 		value: toSegmentValue(value),
 		defaultValue: toSegmentValue(defaultValue),
 		ref: localRef,
+		inert: isSkeleton || void 0,
 		children: [/* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			dependencies: [
@@ -58,7 +62,7 @@ var Rating = flowComponent("Rating", (props) => {
 			children
 		}), /* @__PURE__ */ jsx("div", {
 			className: Rating_module_default.ratingSegments,
-			children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 				id: segmentsTunnelId,
 				component: "Rating",
 				children: (tunnelChildren) => {
@@ -72,7 +76,7 @@ var Rating = flowComponent("Rating", (props) => {
 						children: segment
 					}, index));
 				}
-			})
+			}) })
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });

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

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

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

@@ -7,6 +7,7 @@ var ratingSegment = "flow--rating--rating-segment";
 var empty = "flow--rating--empty";
 var filled = "flow--rating--filled";
 var current = "flow--rating--current";
+var skeleton = "flow--rating--skeleton";
 var Rating_module_default = {
 	rating,
 	ratingSegments,
@@ -17,9 +18,12 @@ var Rating_module_default = {
 	current,
 	"fill-single": "flow--rating--fill-single",
 	"size-s": "flow--rating--size-s",
-	"size-m": "flow--rating--size-m"
+	"size-m": "flow--rating--size-m",
+	skeleton,
+	"skeleton-surface-shimmer": "flow--rating--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--rating--skeleton-text-shimmer"
 };
 //#endregion
-export { current, Rating_module_default as default, empty, filled, rating, ratingSegment, ratingSegments };
+export { current, Rating_module_default as default, empty, filled, rating, ratingSegment, ratingSegments, skeleton };
 //# sourceMappingURL=Rating.module.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Rating.module.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n/*\n Segments render filled by default. The fill rules below empty out every\n * segment that must not appear filled.\n /\n@mixin empty-segment {\n .empty {\n opacity: 1;\n }\n\n .filled {\n opacity: 0;\n }\n}\n\n.rating {\n .ratingSegments {\n display: flex;\n width: fit-content;\n order: 2;\n }\n\n .ratingSegment {\n display: grid;\n grid-template-areas: \"star\";\n border-radius: var(--corner-radius--m);\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xxs) -1);\n }\n\n &[data-focus-visible] {\n transform: scale(1.2);\n }\n }\n\n .empty,\n .filled {\n grid-area: star;\n transition-property: opacity, transform;\n transition-duration: var(--transition--duration--fast);\n }\n\n :where(.empty) {\n opacity: 0;\n color: var(--rating--star-color);\n }\n\n :where(.filled) {\n opacity: 1;\n color: var(--rating--star-filled-color);\n }\n\n &.fill-cumulative {\n &:not(:has(.ratingSegments:hover)),\n &[data-readonly] {\n .ratingSegment.current ~ .ratingSegment {\n @include empty-segment;\n }\n\n &:not(:has(.current)) .ratingSegment {\n @include empty-segment;\n }\n }\n\n &:not([data-readonly]) {\n .ratingSegment:hover ~ .ratingSegment {\n @include empty-segment;\n }\n }\n }\n\n &.fill-single {\n &:not(:has(.ratingSegments:hover)),\n &[data-readonly] {\n .ratingSegment:not(.current) {\n @include empty-segment;\n }\n }\n\n &:not([data-readonly]):has(.ratingSegments:hover) {\n .ratingSegment:not(:hover) {\n @include empty-segment;\n }\n }\n }\n\n &:not([data-readonly]) {\n .ratingSegment:hover {\n transform: scale(1.2);\n transform-origin: center;\n }\n }\n\n &:disabled,\n &[data-disabled],\n [aria-disabled] & {\n .ratingSegment {\n .empty,\n .filled {\n color: var(--form-control--border-color--disabled);\n }\n }\n }\n\n @mixin size($size) {\n &.size-#{$size} .ratingSegment {\n padding: var(--rating--spacing--#{$size});\n }\n }\n\n @include size(s);\n @include size(m);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Rating.module.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n/*\n Segments render filled by default. The fill rules below empty out every\n * segment that must not appear filled.\n /\n@mixin empty-segment {\n .empty {\n opacity: 1;\n }\n\n .filled {\n opacity: 0;\n }\n}\n\n.rating {\n .ratingSegments {\n display: flex;\n width: fit-content;\n order: 2;\n }\n\n .ratingSegment {\n display: grid;\n grid-template-areas: \"star\";\n border-radius: var(--corner-radius--m);\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xxs) -1);\n }\n\n &[data-focus-visible] {\n transform: scale(1.2);\n }\n }\n\n .empty,\n .filled {\n grid-area: star;\n transition-property: opacity, transform;\n transition-duration: var(--transition--duration--fast);\n }\n\n :where(.empty) {\n opacity: 0;\n color: var(--rating--star-color);\n }\n\n :where(.filled) {\n opacity: 1;\n color: var(--rating--star-filled-color);\n }\n\n &.fill-cumulative {\n &:not(:has(.ratingSegments:hover)),\n &[data-readonly] {\n .ratingSegment.current ~ .ratingSegment {\n @include empty-segment;\n }\n\n &:not(:has(.current)) .ratingSegment {\n @include empty-segment;\n }\n }\n\n &:not([data-readonly]) {\n .ratingSegment:hover ~ .ratingSegment {\n @include empty-segment;\n }\n }\n }\n\n &.fill-single {\n &:not(:has(.ratingSegments:hover)),\n &[data-readonly] {\n .ratingSegment:not(.current) {\n @include empty-segment;\n }\n }\n\n &:not([data-readonly]):has(.ratingSegments:hover) {\n .ratingSegment:not(:hover) {\n @include empty-segment;\n }\n }\n }\n\n &:not([data-readonly]) {\n .ratingSegment:hover {\n transform: scale(1.2);\n transform-origin: center;\n }\n }\n\n &:disabled,\n &[data-disabled],\n [aria-disabled] & {\n .ratingSegment {\n .empty,\n .filled {\n color: var(--form-control--border-color--disabled);\n }\n }\n }\n\n @mixin size($size) {\n &.size-#{$size} .ratingSegment {\n padding: var(--rating--spacing--#{$size});\n }\n }\n\n @include size(s);\n @include size(m);\n\n /* SkeletonMode: the segments become one surface in their size */\n &.skeleton .ratingSegments {\n @include skeleton.shape;\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptySegment.mjs","names":[],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/EmptySegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStar } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n size: RatingSegmentProps[\"size\"];\n}\n\nexport const EmptySegment: FC<Props> = (props) => {\n const { size, children } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n size,\n \"aria-hidden\": true,\n className: styles.empty,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children ?? (\n <IconStar aria-hidden size={size} className={styles.empty} />\n )}\n </PropsContextProvider>\n );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,~~WAAW~~,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,UAAD;GAAU,eAAA;GAAkB;GAAM,~~WAAW~~,sBAAO;EAAQ,CAAA;CAE1C,CAAA;AAE1B"}
1	+ {"version":3,"file":"EmptySegment.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/EmptySegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStar } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n size: RatingSegmentProps[\"size\"];\n}\n\nexport const EmptySegment: FC<Props> = (props) => {\n const { size, children } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n size,\n \"aria-hidden\": true,\n className: styles.empty,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children ?? (\n <IconStar aria-hidden size={size} className={styles.empty} />\n )}\n </PropsContextProvider>\n );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,gBAA2B,UAAU;CAChD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,WAAWA,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,UAAD;GAAU,eAAA;GAAkB;GAAM,WAAWA,sBAAO;EAAQ,CAAA;CAE1C,CAAA;AAE1B"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FilledSegment.mjs","names":[],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/FilledSegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStarFilled } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n size: RatingSegmentProps[\"size\"];\n}\n\nexport const FilledSegment: FC<Props> = (props) => {\n const { size, children } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n size,\n \"aria-hidden\": true,\n className: styles.filled,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children ?? (\n <IconStarFilled aria-hidden size={size} className={styles.filled} />\n )}\n </PropsContextProvider>\n );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,iBAA4B,UAAU;CACjD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,~~WAAW~~,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,gBAAD;GAAgB,eAAA;GAAkB;GAAM,~~WAAW~~,sBAAO;EAAS,CAAA;CAEjD,CAAA;AAE1B"}
1	+ {"version":3,"file":"FilledSegment.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/FilledSegment.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\nimport type { RatingSegmentProps } from \"@/components/Rating/components/RatingSegment/RatingSegment\";\nimport styles from \"../../Rating.module.scss\";\nimport { IconStarFilled } from \"@/components/Icon/components/icons\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\n\ninterface Props extends PropsWithChildren {\n size: RatingSegmentProps[\"size\"];\n}\n\nexport const FilledSegment: FC<Props> = (props) => {\n const { size, children } = props;\n\n const propsContext: PropsContext = {\n Icon: {\n size,\n \"aria-hidden\": true,\n className: styles.filled,\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {children ?? (\n <IconStarFilled aria-hidden size={size} className={styles.filled} />\n )}\n </PropsContextProvider>\n );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,iBAA4B,UAAU;CACjD,MAAM,EAAE,MAAM,aAAa;CAE3B,MAAM,eAA6B,EACjC,MAAM;EACJ;EACA,eAAe;EACf,WAAWA,sBAAO;CACpB,EACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC1B,UAAA,YACC,oBAAC,gBAAD;GAAgB,eAAA;GAAkB;GAAM,WAAWA,sBAAO;EAAS,CAAA;CAEjD,CAAA;AAE1B"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RatingSegment.mjs","names":[],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/RatingSegment.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"@/components/Rating/Rating.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/.locale.json\";\nimport { useRatingSegmentContext } from \"@/components/Rating/context\";\nimport { FilledSegment } from \"@/components/Rating/components/RatingSegment/FilledSegment\";\nimport { EmptySegment } from \"@/components/Rating/components/RatingSegment/EmptySegment\";\n\nexport interface RatingSegmentProps\n extends\n Omit<Aria.RadioProps, \"children\" \| \"value\" \| \"className\">,\n PropsWithClassName,\n FlowComponentProps<HTMLLabelElement> {\n /* An alternative icon for the empty state of this segment /\n iconEmpty?: ReactElement;\n /* An alternative icon for the filled state of this segment /\n iconFilled?: ReactElement;\n /* @internal Set by the surrounding `Rating`. /\n size?: \"s\" \| \"m\";\n /* A segment renders icons only. `never` keeps the shared props union usable. /\n children?: never;\n}\n\n/\n @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const RatingSegment = flowComponent(\"RatingSegment\", (props) => {\n const { className, iconEmpty, iconFilled, size = \"m\", ref, ...rest } = props;\n\n const { value, count } = useRatingSegmentContext();\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Rating\");\n\n return (\n <Aria.Radio\n aria-label={stringFormatter.format(\"segment\", { value, count })}\n {...rest}\n value={value.toString()}\n ref={ref}\n className={({ isSelected }) =>\n clsx(styles.ratingSegment, isSelected && styles.current, className)\n }\n >\n <FilledSegment size={size}>{iconFilled}</FilledSegment>\n <EmptySegment size={size}>{iconEmpty}</EmptySegment>\n </Aria.Radio>\n );\n});\n\nexport default RatingSegment;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,WAAW,WAAW,YAAY,OAAO,KAAK,KAAK,GAAG,SAAS;CAEvE,MAAM,EAAE,OAAO,UAAU,wBAAwB;CAEjD,MAAM,kBAAkB,~~4BAA4B~~,kBAAS,QAAQ;CAErE,OACE,qBAAC,KAAK,OAAN;EACE,cAAY,gBAAgB,OAAO,WAAW;GAAE;GAAO;EAAM,CAAC;EAC9D,GAAI;EACJ,OAAO,MAAM,SAAS;EACjB;EACL,YAAY,EAAE,iBACZ,~~KAAK~~,sBAAO,eAAe,~~cAAc~~,sBAAO,SAAS,SAAS;EANtE,UAAA,CASE,oBAAC,eAAD;GAAqB;GAAO,UAAA;EAA0B,CAAA,GACtD,oBAAC,cAAD;GAAoB;GAAO,UAAA;EAAwB,CAAA,CACzC;;AAEhB,CAAC"}
1	+ {"version":3,"file":"RatingSegment.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/Rating/components/RatingSegment/RatingSegment.tsx"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"@/components/Rating/Rating.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../locales/.locale.json\";\nimport { useRatingSegmentContext } from \"@/components/Rating/context\";\nimport { FilledSegment } from \"@/components/Rating/components/RatingSegment/FilledSegment\";\nimport { EmptySegment } from \"@/components/Rating/components/RatingSegment/EmptySegment\";\n\nexport interface RatingSegmentProps\n extends\n Omit<Aria.RadioProps, \"children\" \| \"value\" \| \"className\">,\n PropsWithClassName,\n FlowComponentProps<HTMLLabelElement> {\n /* An alternative icon for the empty state of this segment /\n iconEmpty?: ReactElement;\n /* An alternative icon for the filled state of this segment /\n iconFilled?: ReactElement;\n /* @internal Set by the surrounding `Rating`. /\n size?: \"s\" \| \"m\";\n /* A segment renders icons only. `never` keeps the shared props union usable. /\n children?: never;\n}\n\n/\n @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const RatingSegment = flowComponent(\"RatingSegment\", (props) => {\n const { className, iconEmpty, iconFilled, size = \"m\", ref, ...rest } = props;\n\n const { value, count } = useRatingSegmentContext();\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Rating\");\n\n return (\n <Aria.Radio\n aria-label={stringFormatter.format(\"segment\", { value, count })}\n {...rest}\n value={value.toString()}\n ref={ref}\n className={({ isSelected }) =>\n clsx(styles.ratingSegment, isSelected && styles.current, className)\n }\n >\n <FilledSegment size={size}>{iconFilled}</FilledSegment>\n <EmptySegment size={size}>{iconEmpty}</EmptySegment>\n </Aria.Radio>\n );\n});\n\nexport default RatingSegment;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,WAAW,WAAW,YAAY,OAAO,KAAK,KAAK,GAAG,SAAS;CAEvE,MAAM,EAAE,OAAO,UAAU,wBAAwB;CAEjD,MAAM,kBAAkB,4BAA4BA,kBAAS,QAAQ;CAErE,OACE,qBAAC,KAAK,OAAN;EACE,cAAY,gBAAgB,OAAO,WAAW;GAAE;GAAO;EAAM,CAAC;EAC9D,GAAI;EACJ,OAAO,MAAM,SAAS;EACjB;EACL,YAAY,EAAE,iBACZ,KAAKC,sBAAO,eAAe,cAAcA,sBAAO,SAAS,SAAS;EANtE,UAAA,CASE,oBAAC,eAAD;GAAqB;GAAO,UAAA;EAA0B,CAAA,GACtD,oBAAC,cAAD;GAAoB;GAAO,UAAA;EAAwB,CAAA,CACzC;;AAEhB,CAAC"}

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

@@ -19,7 +19,7 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var SearchField = flowComponent("SearchField", (props) => {
 	const { children, className, ref, ...rest } = useControlledHostValueProps(props, "");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "SearchField");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, skeletonProps } = useFieldComponent(props, "SearchField");
 	const rootClassName = clsx(FormField_module_default.formField, SearchField_module_default.searchField, className);
 	const searchText = useLocalizedStringFormatter(__locale_default, "SearchField").format(`search`);
 	const propsContext = {
@@ -35,9 +35,10 @@ var SearchField = flowComponent("SearchField", (props) => {
 	};
 	return /* @__PURE__ */ jsxs(Aria.SearchField, {
 		...rest,
-		...fieldProps,
+		...controlProps,
+		...skeletonProps,
 		"aria-label": searchText,
-		className: clsx(rootClassName, fieldProps.className),
+		className: clsx(rootClassName, wrapperProps.className),
 		children: [/* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }), /* @__PURE__ */ jsxs("div", {

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

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

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

@@ -15,7 +15,9 @@ var SearchField_module_default = {
 	kbd,
 	inputContainer,
 	input,
-	readonly
+	readonly,
+	"skeleton-surface-shimmer": "flow--search-field--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--search-field--skeleton-text-shimmer"
 };
 //#endregion
 export { clearButton, SearchField_module_default as default, input, inputContainer, kbd, readonly, searchField, searchIcon };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../src/components/SearchField/SearchField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.searchField {\n &[data-empty] .clearButton {\n display: none;\n }\n\n .searchIcon {\n color: var(--form-control--placeholder-color--default);\n margin-inline: var(--size-px--s);\n }\n\n .kbd {\n margin-inline-end: var(--size-px--m);\n }\n\n &:disabled,\n &[data-disabled],\n [aria-disabled] & {\n .inputContainer {\n background-color: var(--form-control--background-color--disabled);\n border-color: var(--form-control--border-color--disabled);\n }\n\n .searchIcon {\n color: var(--form-control--placeholder-color--disabled);\n }\n\n .input::placeholder {\n color: var(--form-control--placeholder-color--disabled);\n }\n }\n}\n\n.inputContainer {\n order: 2;\n display: flex;\n position: relative;\n align-items: center;\n\n @include formControl.formControl();\n\n & {\n padding: 0;\n }\n\n .input {\n border: none;\n background: none;\n padding-block: calc(\n var(--form-control--padding-y) - var(--form-control--border-width)\n );\n flex-grow: 1;\n min-width: 0;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--form-control--placeholder-color--default);\n }\n\n &[data-focused],\n &:focus-visible {\n outline: none;\n }\n }\n\n .clearButton {\n padding-block: initial;\n align-self: stretch;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../src/components/SearchField/SearchField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.searchField {\n &[data-empty] .clearButton {\n display: none;\n }\n\n .searchIcon {\n color: var(--form-control--placeholder-color--default);\n margin-inline: var(--size-px--s);\n }\n\n .kbd {\n margin-inline-end: var(--size-px--m);\n }\n\n &:disabled,\n &[data-disabled],\n [aria-disabled] & {\n .inputContainer {\n background-color: var(--form-control--background-color--disabled);\n border-color: var(--form-control--border-color--disabled);\n }\n\n .searchIcon {\n color: var(--form-control--placeholder-color--disabled);\n }\n\n .input::placeholder {\n color: var(--form-control--placeholder-color--disabled);\n }\n }\n}\n\n.inputContainer {\n order: 2;\n display: flex;\n position: relative;\n align-items: center;\n\n @include formControl.formControl();\n\n & {\n padding: 0;\n }\n\n .input {\n border: none;\n background: none;\n padding-block: calc(\n var(--form-control--padding-y) - var(--form-control--border-width)\n );\n flex-grow: 1;\n min-width: 0;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--form-control--placeholder-color--default);\n }\n\n &[data-focused],\n &:focus-visible {\n outline: none;\n }\n }\n\n .clearButton {\n padding-block: initial;\n align-self: stretch;\n }\n}\n\n/* Skeleton: as specific as the disabled state above, and after it */\n.searchField[data-skeleton] .inputContainer {\n @include formControl.formSkeletonShape;\n}\n"],"mappings":""}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Section.module.mjs","names":[],"sources":["../../../../../../../src/components/Section/Section.module.scss"],"sourcesContent":[".section {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n width: 100%;\n min-width: 0;\n\n // A consumer `Form` wrapping the section content. `Form` is a plain FC, so\n // the props context cannot give it a class.\n // stylelint-disable-next-line selector-max-type -- consumer form, no class\n > form {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n }\n\n /* Children that render nothing still leave the element behind — the guard in\n Section.tsx only sees the child, not its output (a boundary returning null,\n an empty fragment, a map over an empty array). Collapse it so it neither\n draws its own separator nor claims section-to-section spacing, while\n staying in the sibling chain so the next section keeps exactly one\n separator. /\n &:empty {\n display: none;\n }\n\n + .section {\n margin-block-start: var(--section--section-to-section-spacing);\n }\n\n &:not(.hideSeparator) + .section {\n border-block-start: var(--separator--height) var(--border-style--default)\n var(--separator--color);\n padding-block-start: var(--section--section-to-section-spacing);\n }\n\n / Keys on the heading's rendered element, not on `Heading`'s level class: a\n `Heading` with `elementType` renders a span/p that carries the level class\n but must not claim heading-to-content spacing. */\n // stylelint-disable selector-max-type -- element type is the signal, see above\n h2.heading:not(:first-child),\n h3.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-m);\n }\n\n h4.heading:not(:first-child),\n h5.heading:not(:first-child),\n h6.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-s);\n }\n // stylelint-enable selector-max-type\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Section.module.mjs","names":[],"sources":["../../../../../../../src/components/Section/Section.module.scss"],"sourcesContent":[".section {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n width: 100%;\n min-width: 0;\n\n // A consumer `Form` wrapping the section content. `Form` is a plain FC, so\n // the props context cannot give it a class.\n // stylelint-disable-next-line selector-max-type -- consumer form, no class\n > form {\n display: flex;\n flex-direction: column;\n row-gap: var(--section--spacing);\n }\n\n /* Children that render nothing still leave the element behind — the guard in\n Section.tsx only sees the child, not its output (a boundary returning null,\n an empty fragment, a map over an empty array). Collapse it so it neither\n draws its own separator nor claims section-to-section spacing, while\n staying in the sibling chain so the next section keeps exactly one\n separator. /\n &:empty {\n display: none;\n }\n\n + .section {\n margin-block-start: var(--section--section-to-section-spacing);\n }\n\n &:not(.hideSeparator) + .section {\n border-block-start: var(--separator--height) var(--border-style--default)\n var(--separator--color);\n padding-block-start: var(--section--section-to-section-spacing);\n }\n\n / Keys on the heading's rendered element, not on `Heading`'s level class: a\n `Heading` with `elementType` renders a span/p that carries the level class\n but must not claim heading-to-content spacing. /\n // stylelint-disable selector-max-type -- element type is the signal, see above\n h2.heading:not(:first-child),\n h3.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-m);\n }\n\n h4.heading:not(:first-child),\n h5.heading:not(:first-child),\n h6.heading:not(:first-child) {\n margin-top: var(--section--sub-heading-spacing-s);\n }\n\n / An accordion headed by a heading is a sub-heading as well, alone or as\n the first one of a group. The toggle's padding already counts towards\n the spacing. */\n $accordion: \":global(.flow--accordion)\";\n $group: \":global(.flow--accordion-group)\";\n $toggle-padding: var(--accordion--padding);\n\n > #{$accordion}:not(:first-child):has(> h2, > h3) {\n margin-top: calc(var(--section--sub-heading-spacing-m) - $toggle-padding);\n }\n\n > #{$accordion}:not(:first-child):has(> h4, > h5, > h6) {\n margin-top: calc(var(--section--sub-heading-spacing-s) - $toggle-padding);\n }\n\n > #{$group}:not(:first-child):has(> :first-child > :is(h2, h3)) {\n margin-top: calc(var(--section--sub-heading-spacing-m) - $toggle-padding);\n }\n\n > #{$group}:not(:first-child):has(> :first-child > :is(h4, h5, h6)) {\n margin-top: calc(var(--section--sub-heading-spacing-s) - $toggle-padding);\n }\n // stylelint-enable selector-max-type\n}\n"],"mappings":""}