@mittwald/flow-react-components 1.6.0-next.14 → 1.6.0-next.15

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

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

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

@@ -12,12 +12,13 @@ var ProgressBarLegend = (props) => {
 	const { segments, showLegend, formatOptions } = props;
 	const formatter = useNumberFormatter(formatOptions);
 	if (!segments || !showLegend) return null;
+	const formatValue = (value) => formatOptions ? formatter.format(value) : `${value} %`;
 	return /* @__PURE__ */ jsx(Legend, {
 		className: ProgressBar_module_default.legend,
-		children: segments.map((s, i) => /* @__PURE__ */ jsx(LegendItem, {
-			color: s.color ?? getCategoricalColorByIndex(i),
-			children: `${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`
-		}, s.title))
+		children: segments.map((segment, index) => /* @__PURE__ */ jsx(LegendItem, {
+			color: segment.color ?? getCategoricalColorByIndex(index),
+			children: `${segment.title} (${segment.valueText ?? formatValue(segment.value)})`
+		}, segment.title))
 	});
 };
 //#endregion

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

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

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

@@ -3,7 +3,6 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import FormField_module_default from "../FormField/FormField.module.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { ColumnLayout } from "../ColumnLayout/ColumnLayout.mjs";
 import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
@@ -17,7 +16,7 @@ import * as Aria from "react-aria-components";
 var RadioGroup = flowComponent("RadioGroup", (props) => {
 	const { children, className, s, m, l, ref, ...rest } = props;
 	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, skeletonProps } = useFieldComponent(props, "RadioGroup");
-	const rootClassName = clsx(FormField_module_default.formField, className);
+	const rootClassName = clsx(wrapperProps.className, className);
 	const propsContext = {
 		RadioButton: { tunnel: {
 			id: "radioButtons",
@@ -35,7 +34,7 @@ var RadioGroup = flowComponent("RadioGroup", (props) => {
 		...rest,
 		...skeletonProps,
 		"aria-describedby": controlProps["aria-describedby"],
-		className: clsx(rootClassName, wrapperProps.className),
+		className: rootClassName,
 		ref: localRadioRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,

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

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

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

@@ -44,6 +44,17 @@ var Rating = flowComponent("Rating", (props) => {
 		}
 	};
 	const defaultSegments = Array.from({ length: maxValue }, (_, index) => /* @__PURE__ */ jsx(RatingSegment, { ...segmentProps }, index));
+	const renderSegments = (tunnelChildren) => {
+		const tunneledSegments = Children.toArray(tunnelChildren);
+		const segments = tunneledSegments.length > 0 ? tunneledSegments : defaultSegments;
+		return segments.map((segment, index) => /* @__PURE__ */ jsx(RatingSegmentContextProvider, {
+			value: {
+				value: index + 1,
+				count: segments.length
+			},
+			children: segment
+		}, index));
+	};
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
 		"aria-describedby": controlProps["aria-describedby"],
@@ -65,17 +76,7 @@ var Rating = flowComponent("Rating", (props) => {
 			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 				id: segmentsTunnelId,
 				component: "Rating",
-				children: (tunnelChildren) => {
-					const tunneledSegments = Children.toArray(tunnelChildren);
-					const segments = tunneledSegments.length > 0 ? tunneledSegments : defaultSegments;
-					return segments.map((segment, index) => /* @__PURE__ */ jsx(RatingSegmentContextProvider, {
-						value: {
-							value: index + 1,
-							count: segments.length
-						},
-						children: segment
-					}, index));
-				}
+				children: renderSegments
 			}) })
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});

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

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

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

@@ -7,7 +7,6 @@ import { IconSearch } from "../Icon/components/icons/IconSearch.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../Button/Button.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import FormField_module_default from "../FormField/FormField.module.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import SearchField_module_default from "./SearchField.module.mjs";
@@ -20,7 +19,7 @@ import * as Aria from "react-aria-components";
 var SearchField = flowComponent("SearchField", (props) => {
 	const { children, className, ref, ...rest } = useControlledHostValueProps(props, "");
 	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, skeletonProps } = useFieldComponent(props, "SearchField");
-	const rootClassName = clsx(FormField_module_default.formField, SearchField_module_default.searchField, className);
+	const rootClassName = clsx(wrapperProps.className, SearchField_module_default.searchField, className);
 	const searchText = useLocalizedStringFormatter(__locale_default, "SearchField").format(`search`);
 	const propsContext = {
 		Kbd: {
@@ -38,7 +37,7 @@ var SearchField = flowComponent("SearchField", (props) => {
 		...controlProps,
 		...skeletonProps,
 		"aria-label": searchText,
-		className: clsx(rootClassName, wrapperProps.className),
+		className: rootClassName,
 		children: [/* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }), /* @__PURE__ */ jsxs("div", {

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

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

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

@@ -4,7 +4,6 @@ import { PropsContextProvider } from "../../lib/propsContext/components/PropsCon
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import FormField_module_default from "../FormField/FormField.module.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
 import SegmentedControl_module_default from "./SegmentedControl.module.mjs";
@@ -23,7 +22,7 @@ var SegmentedControl = flowComponent("SegmentedControl", (props) => {
 	useWarnDeprecation()("The 'SegmentedControl' component is deprecated and will be removed in a future release. Use 'Tabs' instead when it switches content, or 'RadioGroup' instead when it sets a value.");
 	const { children, className, containerBreakpointSize = "m", ref, ...rest } = props;
 	const { FieldErrorView, fieldPropsContext, wrapperProps, controlProps, FieldErrorCaptureContext, skeletonProps } = useFieldComponent(props, "SegmentedControl");
-	const rootClassName = clsx(FormField_module_default.formField, SegmentedControl_module_default.segmentedControlContainer, SegmentedControl_module_default[getContainerBreakpointSizeClassName(containerBreakpointSize)], className);
+	const rootClassName = clsx(wrapperProps.className, SegmentedControl_module_default.segmentedControlContainer, SegmentedControl_module_default[getContainerBreakpointSizeClassName(containerBreakpointSize)], className);
 	const propsContext = {
 		Segment: {
 			tunnel: {
@@ -40,7 +39,7 @@ var SegmentedControl = flowComponent("SegmentedControl", (props) => {
 		...rest,
 		...skeletonProps,
 		"aria-describedby": controlProps["aria-describedby"],
-		className: clsx(rootClassName, wrapperProps.className),
+		className: rootClassName,
 		ref: objectRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			dependencies: ["segment"],

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","names":["formFieldStyles","styles"],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SegmentedControlProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/**\n * @deprecated Use `Tabs` to switch content, or `RadioGroup` to select a value.\n * @flr-generate all\n */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const warnDeprecation = useWarnDeprecation();\n  warnDeprecation(\n    \"The 'SegmentedControl' component is deprecated and will be removed in a future release. Use 'Tabs' instead when it switches content, or 'RadioGroup' instead when it sets a value.\",\n  );\n\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorCaptureContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"SegmentedControl\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnel: {\n        id: \"segments\",\n        component: \"SegmentedControl\",\n      },\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      {...skeletonProps}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={clsx(rootClassName, wrapperProps.className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n          <div className={styles.segmentedControl}>\n            <div className={styles.segments}>\n              <UiComponentTunnelExit\n                id=\"segments\"\n                component=\"SegmentedControl\"\n              />\n            </div>\n          </div>\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAE3E,mBAAA,CAAA,CACE,oLACF;CAEA,MAAM,EACJ,UACA,WACA,0BAA0B,KAC1B,KACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,mBACA,cACA,cACA,0BACA,kBACE,kBAAkB,OAAO,kBAAkB;CAE/C,MAAM,gBAAgB,KACpBA,yBAAgB,WAChBC,gCAAO,2BACPA,gCAAO,oCAAoC,uBAAuB,IAClE,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAWA,gCAAO;EACpB;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,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,cAAc,CAAC,SAAS;GAAG,OAAO;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAK,WAAWA,gCAAO;IACrB,UAAA,oBAAC,OAAD;KAAK,WAAWA,gCAAO;KACrB,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACE,CAAA;GACF,CAAA,GACJ,QACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"SegmentedControl.mjs","names":["styles"],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\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\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SegmentedControlProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/**\n * @deprecated Use `Tabs` to switch content, or `RadioGroup` to select a value.\n * @flr-generate all\n */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const warnDeprecation = useWarnDeprecation();\n  warnDeprecation(\n    \"The 'SegmentedControl' component is deprecated and will be removed in a future release. Use 'Tabs' instead when it switches content, or 'RadioGroup' instead when it sets a value.\",\n  );\n\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorCaptureContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"SegmentedControl\");\n\n  const rootClassName = clsx(\n    wrapperProps.className,\n    styles.segmentedControlContainer,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnel: {\n        id: \"segments\",\n        component: \"SegmentedControl\",\n      },\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      {...skeletonProps}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n          <div className={styles.segmentedControl}>\n            <div className={styles.segments}>\n              <UiComponentTunnelExit\n                id=\"segments\"\n                component=\"SegmentedControl\"\n              />\n            </div>\n          </div>\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAE3E,mBAAA,CAAA,CACE,oLACF;CAEA,MAAM,EACJ,UACA,WACA,0BAA0B,KAC1B,KACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,mBACA,cACA,cACA,0BACA,kBACE,kBAAkB,OAAO,kBAAkB;CAE/C,MAAM,gBAAgB,KACpB,aAAa,WACbA,gCAAO,2BACPA,gCAAO,oCAAoC,uBAAuB,IAClE,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAWA,gCAAO;EACpB;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,KAAK;EALP,UAAA,CAOE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,cAAc,CAAC,SAAS;GAAG,OAAO;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAK,WAAWA,gCAAO;IACrB,UAAA,oBAAC,OAAD;KAAK,WAAWA,gCAAO;KACrB,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACE,CAAA;GACF,CAAA,GACJ,QACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

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

@@ -8,7 +8,6 @@ import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExi
 import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
 import { getOptionsTunnelProps } from "../Option/optionsTunnel.mjs";
 import { Options } from "../Options/Options.mjs";
-import FormField_module_default from "../FormField/FormField.module.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import Select_module_default from "./Select.module.mjs";
 import clsx from "clsx";
@@ -22,7 +21,7 @@ var Select = flowComponent("Select", (props) => {
 	const warnDeprecation = useWarnDeprecation();
 	if (onSelectionChange !== void 0) warnDeprecation("The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.");
 	const { FieldErrorView, fieldPropsContext, wrapperProps, controlProps, FieldErrorCaptureContext, skeletonProps } = useFieldComponent(props, "Select");
-	const rootClassName = clsx(Select_module_default.select, FormField_module_default.formField, className);
+	const rootClassName = clsx(wrapperProps.className, Select_module_default.select, className);
 	const propsContext = {
 		Option: { tunnel: getOptionsTunnelProps("Select") },
 		...fieldPropsContext
@@ -33,7 +32,7 @@ var Select = flowComponent("Select", (props) => {
 		...rest,
 		...controlProps,
 		...skeletonProps,
-		className: clsx(rootClassName, wrapperProps.className),
+		className: rootClassName,
 		onChange: (value) => {
 			if (!isReadOnly) {
 				onChange?.(value);

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

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":["styles","formFieldStyles"],"sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SelectProps\n  extends\n    PropsWithChildren<\n      Omit<\n        Aria.SelectProps<string, \"single\" | \"multiple\">,\n        \"children\" | \"className\" | \"ref\"\n      >\n    >,\n    FlowComponentProps<HTMLButtonElement>,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | Key[] | null) => void;\n  /** @deprecated Use `onChange` instead. */\n  onSelectionChange?: (value: Key | Key[] | null) => void;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange,\n    onSelectionChange,\n    isReadOnly,\n    ref,\n    ...rest\n  } = props;\n\n  const warnDeprecation = useWarnDeprecation();\n  if (onSelectionChange !== undefined) {\n    warnDeprecation(\n      \"The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.\",\n    );\n  }\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorCaptureContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"Select\");\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"Select\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const controller = useOverlayController(\"Select\", {\n    reuseControllerFromContext: false,\n  });\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\n      className={clsx(rootClassName, wrapperProps.className)}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <Aria.Button\n            data-readonly={isReadOnly}\n            className={styles.toggle}\n            ref={ref}\n          >\n            <Aria.SelectValue>\n              {({ selectedText, isPlaceholder }) =>\n                isPlaceholder || !selectedText ? undefined : selectedText\n              }\n            </Aria.SelectValue>\n            <IconChevronDown />\n          </Aria.Button>\n          {children}\n          <Options controller={controller}>\n            <UiComponentTunnelExit id=\"options\" component=\"Select\" />\n          </Options>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,UACA,mBACA,YACA,KACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,sBAAsB,KAAA,GACxB,gBACE,6GACF;CAGF,MAAM,EACJ,gBACA,mBACA,cACA,cACA,0BACA,kBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KACpBA,sBAAO,QACPC,yBAAgB,WAChB,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,QAAQ,EACxC;EACA,GAAG;CACL;CAEA,MAAM,aAAa,qBAAqB,UAAU,EAChD,4BAA4B,MAC9B,CAAC;CACD,MAAM,SAAS,WAAW,UAAU;CAEpC,OACE,qBAAC,KAAK,QAAN;EACE,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW,KAAK,eAAe,aAAa,SAAS;EACrD,WAAW,UAAU;GACnB,IAAI,CAAC,YAAY;IACf,WAAW,KAAK;IAChB,oBAAoB,KAAK;GAC3B;EACF;EACA,eAAe,WAAW,CAAC,cAAc,WAAW,QAAQ,MAAM;EAC1D;EACR,iBAAe;EAbjB,UAAA,CAeE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,qBAAC,KAAK,QAAN;KACE,iBAAe;KACf,WAAWD,sBAAO;KACb;KAHP,UAAA,CAKE,oBAAC,KAAK,aAAN,EAAA,WACI,EAAE,cAAc,oBAChB,iBAAiB,CAAC,eAAe,KAAA,IAAY,aAE/B,CAAA,GAClB,oBAAC,iBAAD,CAAkB,CAAA,CACP;;IACZ;IACD,oBAAC,SAAD;KAAqB;KACnB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAU,CAAA;IACjD,CAAA;GACW;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACN;;AAEjB,CAAC"}
+{"version":3,"file":"Select.mjs","names":["styles"],"sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SelectProps\n  extends\n    PropsWithChildren<\n      Omit<\n        Aria.SelectProps<string, \"single\" | \"multiple\">,\n        \"children\" | \"className\" | \"ref\"\n      >\n    >,\n    FlowComponentProps<HTMLButtonElement>,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | Key[] | null) => void;\n  /** @deprecated Use `onChange` instead. */\n  onSelectionChange?: (value: Key | Key[] | null) => void;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange,\n    onSelectionChange,\n    isReadOnly,\n    ref,\n    ...rest\n  } = props;\n\n  const warnDeprecation = useWarnDeprecation();\n  if (onSelectionChange !== undefined) {\n    warnDeprecation(\n      \"The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.\",\n    );\n  }\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorCaptureContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"Select\");\n\n  const rootClassName = clsx(wrapperProps.className, styles.select, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"Select\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const controller = useOverlayController(\"Select\", {\n    reuseControllerFromContext: false,\n  });\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\n      className={rootClassName}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <Aria.Button\n            data-readonly={isReadOnly}\n            className={styles.toggle}\n            ref={ref}\n          >\n            <Aria.SelectValue>\n              {({ selectedText, isPlaceholder }) =>\n                isPlaceholder || !selectedText ? undefined : selectedText\n              }\n            </Aria.SelectValue>\n            <IconChevronDown />\n          </Aria.Button>\n          {children}\n          <Options controller={controller}>\n            <UiComponentTunnelExit id=\"options\" component=\"Select\" />\n          </Options>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,UACA,mBACA,YACA,KACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,sBAAsB,KAAA,GACxB,gBACE,6GACF;CAGF,MAAM,EACJ,gBACA,mBACA,cACA,cACA,0BACA,kBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KAAK,aAAa,WAAWA,sBAAO,QAAQ,SAAS;CAE3E,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,QAAQ,EACxC;EACA,GAAG;CACL;CAEA,MAAM,aAAa,qBAAqB,UAAU,EAChD,4BAA4B,MAC9B,CAAC;CACD,MAAM,SAAS,WAAW,UAAU;CAEpC,OACE,qBAAC,KAAK,QAAN;EACE,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,WAAW,UAAU;GACnB,IAAI,CAAC,YAAY;IACf,WAAW,KAAK;IAChB,oBAAoB,KAAK;GAC3B;EACF;EACA,eAAe,WAAW,CAAC,cAAc,WAAW,QAAQ,MAAM;EAC1D;EACR,iBAAe;EAbjB,UAAA,CAeE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,qBAAC,KAAK,QAAN;KACE,iBAAe;KACf,WAAWA,sBAAO;KACb;KAHP,UAAA,CAKE,oBAAC,KAAK,aAAN,EAAA,WACI,EAAE,cAAc,oBAChB,iBAAiB,CAAC,eAAe,KAAA,IAAY,aAE/B,CAAA,GAClB,oBAAC,iBAAD,CAAkB,CAAA,CACP;;IACZ;IACD,oBAAC,SAAD;KAAqB;KACnB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAU,CAAA;IACjD,CAAA;GACW;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACN;;AAEjB,CAAC"}

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

@@ -34,6 +34,52 @@ var Slider = flowComponent("Slider", (props) => {
 			className: Slider_module_default.label
 		}
 	};
+	const trackPropsContext = { Button: {
+		isPending: false,
+		isFailed: false,
+		isSucceeded: false,
+		isReadOnly,
+		excludeFromTabOrder: true,
+		isDisabled,
+		variant: "plain",
+		color: "secondary",
+		size: "s"
+	} };
+	const renderTrack = ({ state }) => {
+		const stepButtons = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			onPress: () => state.decrementThumb(0, step),
+			"aria-label": stringFormatter.format("decrement"),
+			className: Slider_module_default.decrement,
+			children: /* @__PURE__ */ jsx(IconMinus, {})
+		}), /* @__PURE__ */ jsx(Button, {
+			onPress: () => state.incrementThumb(0, step),
+			"aria-label": stringFormatter.format("increment"),
+			className: Slider_module_default.increment,
+			children: /* @__PURE__ */ jsx(IconPlus, {})
+		})] });
+		const initialMarker = showInitialMarker && typeof defaultValue === "number" && /* @__PURE__ */ jsx("div", {
+			className: Slider_module_default.initialMarker,
+			style: { "--slider--initial-value": state.getValuePercent(defaultValue) }
+		});
+		return /* @__PURE__ */ jsxs(PropsContextProvider, {
+			props: trackPropsContext,
+			children: [
+				!sliderOnly && stepButtons,
+				/* @__PURE__ */ jsx("div", {
+					className: Slider_module_default.fill,
+					style: { "--slider--value": state.getThumbPercent(0) }
+				}),
+				initialMarker,
+				/* @__PURE__ */ jsx(Aria.SliderThumb, {
+					inputRef: objectRef,
+					"aria-describedby": controlProps["aria-describedby"],
+					name,
+					className: Slider_module_default.handle,
+					isDisabled: isReadOnly
+				})
+			]
+		});
+	};
 	return /* @__PURE__ */ jsx("div", {
 		...skeletonProps,
 		className: wrapperProps.className,
@@ -66,47 +112,7 @@ var Slider = flowComponent("Slider", (props) => {
 					}),
 					/* @__PURE__ */ jsx(Aria.SliderTrack, {
 						className: Slider_module_default.track,
-						children: ({ state }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
-							props: { Button: {
-								isPending: false,
-								isFailed: false,
-								isSucceeded: false,
-								isReadOnly,
-								excludeFromTabOrder: true,
-								isDisabled,
-								variant: "plain",
-								color: "secondary",
-								size: "s"
-							} },
-							children: [
-								!sliderOnly && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
-									onPress: () => state.decrementThumb(0, step),
-									"aria-label": stringFormatter.format("decrement"),
-									className: Slider_module_default.decrement,
-									children: /* @__PURE__ */ jsx(IconMinus, {})
-								}), /* @__PURE__ */ jsx(Button, {
-									onPress: () => state.incrementThumb(0, step),
-									"aria-label": stringFormatter.format("increment"),
-									className: Slider_module_default.increment,
-									children: /* @__PURE__ */ jsx(IconPlus, {})
-								})] }),
-								/* @__PURE__ */ jsx("div", {
-									className: Slider_module_default.fill,
-									style: { "--slider--value": state.getThumbPercent(0) }
-								}),
-								showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx("div", {
-									className: Slider_module_default.initialMarker,
-									style: { "--slider--initial-value": state.getValuePercent(defaultValue) }
-								}),
-								/* @__PURE__ */ jsx(Aria.SliderThumb, {
-									inputRef: objectRef,
-									"aria-describedby": controlProps["aria-describedby"],
-									name,
-									className: Slider_module_default.handle,
-									isDisabled: isReadOnly
-								})
-							]
-						})
+						children: renderTrack
 					}),
 					/* @__PURE__ */ jsx(FieldErrorView, {})
 				]

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

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

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

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

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

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

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

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