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

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 })

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.mjs","names":["styles","locales"],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"TextField\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    CopyButton: {\n      className: styles.button,\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n  const charactersCountDescription = translation.format(\"characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          {children}\n          <div className={styles.inputContainer}>\n            <Aria.Input\n              form={form}\n              placeholder={placeholder}\n              className={styles.input}\n              ref={ref}\n            />\n            <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n            {typeFromProps === \"password\" && (\n              <Button\n                color=\"secondary\"\n                variant=\"plain\"\n                className={styles.button}\n                onPress={() =>\n                  setType(type === \"password\" ? \"text\" : \"password\")\n                }\n                aria-label={translation.format(\n                  `password.${type === \"password\" ? \"show\" : \"hide\"}`,\n                )}\n              >\n                {type === \"password\" ? <IconShow /> : <IconHide />}\n              </Button>\n            )}\n          </div>\n          {showCharacterCount && (\n            <FieldDescription>{charactersCountDescription}</FieldDescription>\n          )}\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAE9C,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAWA,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,YAAY;GACV,WAAWA,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,UACF,SAAS,CAAC;CAEd;CAEA,MAAM,cAAc,4BAA4BC,kBAAS,WAAW;CAEpE,MAAM,6BAA6B,YAAY,OAAO,cAAc;EAClE,OAAO;EACP,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;EAEN,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAWD,yBAAO;KAAvB,UAAA;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAWA,yBAAO;OACb;MACN,CAAA;MACD,oBAAC,uBAAD;OAAuB,IAAG;OAAS,WAAU;MAAa,CAAA;MACzD,kBAAkB,cACjB,oBAAC,QAAD;OACE,OAAM;OACN,SAAQ;OACR,WAAWA,yBAAO;OAClB,eACE,QAAQ,SAAS,aAAa,SAAS,UAAU;OAEnD,cAAY,YAAY,OACtB,YAAY,SAAS,aAAa,SAAS,QAC7C;OAEC,UAAA,SAAS,aAAa,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;MAC3C,CAAA;KAEP;;IACJ,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;GAE1C,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACR,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"TextField.mjs","names":["styles","locales"],"sources":["../../../../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./TextField.module.scss\";\nimport { FieldDescription } from \"@/components/FieldDescription\";\nimport locales from \"./locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface TextFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.TextFieldProps, \"children\">>,\n    Pick<Aria.InputProps, \"placeholder\">,\n    FlowComponentProps<HTMLInputElement> {\n  /** Whether a character count should be displayed inside the field description. */\n  showCharacterCount?: boolean;\n}\n\n/** @flr-generate all */\nexport const TextField = flowComponent(\"TextField\", (props) => {\n  const {\n    className,\n    showCharacterCount,\n    form,\n    placeholder,\n    ref,\n    type: typeFromProps,\n    children,\n    onChange,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const [charactersCount, setCharactersCount] = useState(\n    props.defaultValue?.length ?? props.value?.length ?? 0,\n  );\n\n  const [type, setType] = useState(typeFromProps);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    skeletonProps,\n  } = useFieldComponent(props, \"TextField\");\n\n  const rootClassName = clsx(wrapperProps.className, className);\n\n  const propsContext: PropsContext = {\n    Button: {\n      className: styles.button,\n      variant: \"plain\",\n      color: \"secondary\",\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    CopyButton: {\n      className: styles.button,\n      tunnel: {\n        id: \"button\",\n        component: \"TextField\",\n      },\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleChange = (v: string) => {\n    if (showCharacterCount) {\n      setCharactersCount(v.length);\n    }\n    if (onChange) {\n      onChange(v);\n    }\n  };\n\n  const translation = useLocalizedStringFormatter(locales, \"TextField\");\n\n  const charactersCountDescription = translation.format(\"characters\", {\n    count: charactersCount,\n    maxCount: props.maxLength ?? 0,\n  });\n\n  const isPasswordHidden = type === \"password\";\n\n  const togglePasswordVisibility = () =>\n    setType(isPasswordHidden ? \"text\" : \"password\");\n\n  const passwordVisibilityButton = (\n    <Button\n      color=\"secondary\"\n      variant=\"plain\"\n      className={styles.button}\n      onPress={togglePasswordVisibility}\n      aria-label={translation.format(\n        isPasswordHidden ? \"password.show\" : \"password.hide\",\n      )}\n    >\n      {isPasswordHidden ? <IconShow /> : <IconHide />}\n    </Button>\n  );\n\n  return (\n    <Aria.TextField\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\n      className={rootClassName}\n      onChange={handleChange}\n      type={type}\n    >\n      <PropsContextProvider props={propsContext}>\n        <FieldErrorCaptureContext>\n          {children}\n          <div className={styles.inputContainer}>\n            <Aria.Input\n              form={form}\n              placeholder={placeholder}\n              className={styles.input}\n              ref={ref}\n            />\n            <UiComponentTunnelExit id=\"button\" component=\"TextField\" />\n            {typeFromProps === \"password\" && passwordVisibilityButton}\n          </div>\n          {showCharacterCount && (\n            <FieldDescription>{charactersCountDescription}</FieldDescription>\n          )}\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n    </Aria.TextField>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,WACA,oBACA,MACA,aACA,KACA,MAAM,eACN,UACA,UACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,MAAM,cAAc,UAAU,MAAM,OAAO,UAAU,CACvD;CAEA,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAE9C,MAAM,EACJ,gBACA,0BACA,mBACA,cACA,cACA,kBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,gBAAgB,KAAK,aAAa,WAAW,SAAS;CAE5D,MAAM,eAA6B;EACjC,QAAQ;GACN,WAAWA,yBAAO;GAClB,SAAS;GACT,OAAO;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,YAAY;GACV,WAAWA,yBAAO;GAClB,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;EACF;EACA,GAAG;CACL;CAEA,MAAM,gBAAgB,MAAc;EAClC,IAAI,oBACF,mBAAmB,EAAE,MAAM;EAE7B,IAAI,UACF,SAAS,CAAC;CAEd;CAEA,MAAM,cAAc,4BAA4BC,kBAAS,WAAW;CAEpE,MAAM,6BAA6B,YAAY,OAAO,cAAc;EAClE,OAAO;EACP,UAAU,MAAM,aAAa;CAC/B,CAAC;CAED,MAAM,mBAAmB,SAAS;CAElC,MAAM,iCACJ,QAAQ,mBAAmB,SAAS,UAAU;CAEhD,MAAM,2BACJ,oBAAC,QAAD;EACE,OAAM;EACN,SAAQ;EACR,WAAWD,yBAAO;EAClB,SAAS;EACT,cAAY,YAAY,OACtB,mBAAmB,kBAAkB,eACvC;EAEC,UAAA,mBAAmB,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACxC,CAAA;CAGV,OACE,oBAAC,KAAK,WAAN;EACE,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW;EACX,UAAU;EACJ;EAEN,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,qBAAC,0BAAD,EAAA,UAAA;IACG;IACD,qBAAC,OAAD;KAAK,WAAWA,yBAAO;KAAvB,UAAA;MACE,oBAAC,KAAK,OAAN;OACQ;OACO;OACb,WAAWA,yBAAO;OACb;MACN,CAAA;MACD,oBAAC,uBAAD;OAAuB,IAAG;OAAS,WAAU;MAAa,CAAA;MACzD,kBAAkB,cAAc;KAC9B;;IACJ,sBACC,oBAAC,kBAAD,EAAA,UAAmB,2BAA6C,CAAA;GAE1C,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACG;;CACR,CAAA;AAEpB,CAAC"}

package/dist/types/components/CodeBlock/CodeBlock.d.ts

@@ -8,7 +8,7 @@ export interface CodeBlockProps extends PropsWithClassName, PropsWithChildren, P
      * Controls truncation of long code blocks. `false` disables it, `true`
      * truncates after 8 lines, and a number sets the maximum line count.
      *
-     * @default: false
+     * @default false
      */
     truncateLines?: boolean | number;
 }

package/dist/types/components/DonutChart/DonutChart.d.ts

@@ -15,10 +15,7 @@ export interface DonutChartProps extends Omit<Aria.ProgressBarProps, "children"
     size?: "m" | "l";
     /** Divides the fill of the donut chart into segments */
     segments?: DonutChartSegment[];
-    /**
-     * Whether the legend component is shown when segments are used. @default:
-     * true
-     */
+    /** Whether the legend component is shown when segments are used. @default true */
     showLegend?: boolean;
     /** The position of the legend. @default "right" */
     legendPosition?: "top" | "left" | "bottom" | "right";

package/dist/types/components/List/components/ListSummary/ListSummary.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { FlowComponentProps } from '../../../../lib/componentFactory/flowComponent';
 export interface ListSummaryProps extends FlowComponentProps, PropsWithChildren {
-    /** Whether the summary is placed above or underneath the list @default: "top" */
+    /** Whether the summary is placed above or underneath the list @default "top" */
     position?: "top" | "bottom";
 }
 /** @flr-generate all */

package/dist/types/components/ProgressBar/ProgressBar.d.ts

@@ -17,10 +17,7 @@ export interface ProgressBarProps extends PropsWithChildren<Omit<Aria.ProgressBa
         color?: CategoricalWithCustomColor;
         valueText?: string;
     }[];
-    /**
-     * Whether the legend component is shown when segments are used. @default:
-     * true
-     */
+    /** Whether the legend component is shown when segments are used. @default true */
     showLegend?: boolean;
 }
 /** @flr-generate all */

package/dist/types/components/Rating/Rating.d.ts

@@ -4,28 +4,28 @@ import * as Aria from "react-aria-components";
 export interface RatingProps extends FlowComponentProps, PropsWithChildren, Omit<Aria.RadioGroupProps, "children" | "value" | "defaultValue"> {
     /**
      * The value sets the amount of filled stars. Decimals are rounded to the
-     * nearest whole star. @default: 0
+     * nearest whole star. @default 0
      */
     value?: number;
     /**
      * The defaultValue sets the amount of default filled stars. Decimals are
-     * rounded to the nearest whole star. @default: 0
+     * rounded to the nearest whole star. @default 0
      */
     defaultValue?: number;
-    /** The size of the component. @default: "m" */
+    /** The size of the component. @default "m" */
     size?: "s" | "m";
     /**
      * The number of segments the rating consists of. Ignored when the rating has
      * `RatingSegment` children — those define the number of segments themselves.
      *
-     * @default: 5
+     * @default 5
      */
     maxValue?: number;
     /**
      * How the segments are filled. `cumulative` fills every segment up to the
      * value, `single` fills only the selected segment.
      *
-     * @default: cumulative
+     * @default "cumulative"
      */
     fill?: "cumulative" | "single";
     /** An alternative icon for the empty state */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.6.0-next.13",
+  "version": "1.6.0-next.15",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -84,9 +84,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.6.0-next.13",
+    "@mittwald/flow-icons": "^1.6.0-next.15",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.6.0-next.13",
+    "@mittwald/react-tunnel": "^1.6.0-next.15",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -139,13 +139,13 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-components-base": "1.6.0-next.13",
-    "@mittwald/flow-core": "1.6.0-next.13",
-    "@mittwald/flow-design-tokens": "1.6.0-next.13",
-    "@mittwald/flow-icons-base": "1.6.0-next.13",
+    "@mittwald/flow-components-base": "1.6.0-next.15",
+    "@mittwald/flow-core": "1.6.0-next.15",
+    "@mittwald/flow-design-tokens": "1.6.0-next.15",
+    "@mittwald/flow-icons-base": "1.6.0-next.15",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.6.0-next.13",
+    "@mittwald/typescript-config": "1.6.0-next.15",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -199,7 +199,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.6.0-next.13",
+    "@mittwald/flow-icons-pro": "1.6.0-next.15",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -223,5 +223,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "a5a7f9bde0c09ead3786ad080f45cd37b9c5c58b"
+  "gitHead": "db5b635b7b983af4f92ed3b634b6b244094e95dd"
 }