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

package/dist/js/packages/components/src/components/SkeletonMode/lib/hasContent.mjs

@@ -2,10 +2,9 @@
 /* */
 import { getTextOfChild } from "./isTextChild.mjs";
 import { Children } from "react";
-//#region src/components/SkeletonMode/lib/hasContent.ts
+// src/components/SkeletonMode/lib/hasContent.ts
 /** Whether `children` renders anything — `null`, booleans and empty text do not. */
 var hasContent = (children) => Children.toArray(children).some((child) => getTextOfChild(child) !== "");
-//#endregion
 export { hasContent };
 
 //# sourceMappingURL=hasContent.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/lib/isTextChild.mjs

@@ -2,7 +2,7 @@
 /* */
 import { isRemoteTextRenderProps } from "../../../lib/react/remote.mjs";
 import { isValidElement } from "react";
-//#region src/components/SkeletonMode/lib/isTextChild.ts
+// src/components/SkeletonMode/lib/isTextChild.ts
 /**
 * Whether `child` is a text node — locally a string or number, remotely a
 * `RemoteTextRenderer` element.
@@ -13,7 +13,6 @@ var getTextOfChild = (child) => {
 	if (typeof child === "string" || typeof child === "number") return String(child);
 	return isValidElement(child) && isRemoteTextRenderProps(child.props) ? child.props.remote.data : void 0;
 };
-//#endregion
 export { getTextOfChild, isTextChild };
 
 //# sourceMappingURL=isTextChild.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/skeletonModeContext.mjs

@@ -21,7 +21,6 @@ var SkeletonModeReset = (props) => /* @__PURE__ */ jsx(skeletonModeContext.Provi
 	value: resetState,
 	children: props.children
 });
-//#endregion
 export { SkeletonModeReset, skeletonModeContext, useSkeletonMode };
 
 //# sourceMappingURL=skeletonModeContext.mjs.map

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

@@ -3,7 +3,7 @@
 import SkeletonText_module_default from "./SkeletonText.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/SkeletonText/SkeletonText.tsx
+// src/components/SkeletonText/SkeletonText.tsx
 /** @flr-generate all */
 var SkeletonText = (props) => {
 	const { width, style = {}, className, ...rest } = props;
@@ -17,7 +17,6 @@ var SkeletonText = (props) => {
 		className: clsx(SkeletonText_module_default.skeletonText, className)
 	});
 };
-//#endregion
 export { SkeletonText, SkeletonText as default };
 
 //# sourceMappingURL=SkeletonText.mjs.map

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

@@ -1,13 +1,12 @@
 "use client"
 /* */
-//#region src/components/SkeletonText/SkeletonText.module.scss
+// src/components/SkeletonText/SkeletonText.module.scss
 var skeletonText = "flow--skeleton-text";
 var SkeletonText_module_default = {
 	skeletonText,
 	"skeleton-surface-shimmer": "flow--skeleton-text--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--skeleton-text--skeleton-text-shimmer"
 };
-//#endregion
 export { SkeletonText_module_default as default, skeletonText };
 
 //# sourceMappingURL=SkeletonText.module.mjs.map

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

@@ -15,7 +15,7 @@ import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
-//#region src/components/Slider/Slider.tsx
+// src/components/Slider/Slider.tsx
 /** @flr-generate all */
 var Slider = flowComponent("Slider", (props) => {
 	const { className, children, name, isDisabled, defaultValue, showInitialMarker, isReadOnly, ref, step, sliderOnly, "aria-describedby": ignoredAriaDescribedBy, ...rest } = props;
@@ -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, {})
 				]
@@ -114,7 +120,6 @@ var Slider = flowComponent("Slider", (props) => {
 		})
 	});
 });
-//#endregion
 export { Slider, Slider as default };
 
 //# sourceMappingURL=Slider.mjs.map

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/Slider/Slider.module.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Slider/Slider.module.scss
+// src/components/Slider/Slider.module.scss
 var slider = "flow--slider";
 var text = "flow--slider--text";
 var value = "flow--slider--value";
@@ -27,7 +27,6 @@ var Slider_module_default = {
 	"skeleton-surface-shimmer": "flow--slider--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--slider--skeleton-text-shimmer"
 };
-//#endregion
 export { decrement, Slider_module_default as default, disabled, fill, handle, increment, initialMarker, label, slider, text, track, value };
 
 //# sourceMappingURL=Slider.module.mjs.map

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

@@ -2,14 +2,13 @@
 /* */
 import { lazy } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/SuspenseTrigger/SuspenseTrigger.tsx
+// src/components/SuspenseTrigger/SuspenseTrigger.tsx
 var nonResolvingPromise = new Promise(() => {});
 var NonResolvingLazy = lazy(() => nonResolvingPromise);
 var SuspenseTrigger = (props) => {
 	const { show = true } = props;
 	return show ? /* @__PURE__ */ jsx(NonResolvingLazy, {}) : null;
 };
-//#endregion
 export { SuspenseTrigger, SuspenseTrigger as default };
 
 //# sourceMappingURL=SuspenseTrigger.mjs.map

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

@@ -13,7 +13,7 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "react-aria";
 import * as Aria from "react-aria-components";
-//#region src/components/Switch/Switch.tsx
+// src/components/Switch/Switch.tsx
 /** @flr-generate all */
 var Switch = flowComponent("Switch", (props) => {
 	const { children, className, labelPosition = "trailing", ref, ...rest } = props;
@@ -52,7 +52,6 @@ var Switch = flowComponent("Switch", (props) => {
 		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });
-//#endregion
 export { Switch, Switch as default };
 
 //# sourceMappingURL=Switch.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Switch/Switch.module.scss
+// src/components/Switch/Switch.module.scss
 var track = "flow--switch--track";
 var handle = "flow--switch--handle";
 var label = "flow--switch--label";
@@ -13,7 +13,6 @@ var Switch_module_default = {
 	"skeleton-surface-shimmer": "flow--switch--skeleton-surface-shimmer",
 	"skeleton-text-shimmer": "flow--switch--skeleton-text-shimmer"
 };
-//#endregion
 export { Switch_module_default as default, handle, label, track };
 
 //# sourceMappingURL=Switch.module.mjs.map

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

@@ -17,7 +17,7 @@ import __locale_default from "../../../../../_virtual/_19.locale.mjs";
 import useCollapsingItems from "./lib/useCollapsingItems.mjs";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/TabNavigation/TabNavigation.tsx
+// src/components/TabNavigation/TabNavigation.tsx
 /**
 * @flr-generate all
 * @flowStatus new
@@ -68,7 +68,6 @@ var TabNavigation = flowComponent("TabNavigation", (props) => {
 		})]
 	});
 });
-//#endregion
 export { TabNavigation, TabNavigation as default };
 
 //# sourceMappingURL=TabNavigation.mjs.map

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/TabNavigation/TabNavigation.module.scss
+// src/components/TabNavigation/TabNavigation.module.scss
 var tabNavigation = "flow--tab-navigation";
 var list = "flow--tab-navigation--list";
 var item = "flow--tab-navigation--item";
@@ -21,7 +21,6 @@ var TabNavigation_module_default = {
 	current,
 	collapsed
 };
-//#endregion
 export { collapsed, current, TabNavigation_module_default as default, item, link, list, more, moreButton, tabNavigation, text };
 
 //# sourceMappingURL=TabNavigation.module.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/components/LinkContent/LinkContent.mjs

@@ -5,7 +5,7 @@ import { Text } from "../../../Text/Text.mjs";
 import { MenuItem } from "../../../MenuItem/MenuItem.mjs";
 import TabNavigation_module_default from "../../TabNavigation.module.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/TabNavigation/components/LinkContent/LinkContent.tsx
+// src/components/TabNavigation/components/LinkContent/LinkContent.tsx
 /**
 * Renders the content of a link inside the tab navigation and mirrors the link
 * as a menu item into the overflow context menu (via tunnel). The context menu
@@ -38,7 +38,6 @@ var LinkContent = (props) => {
 		})
 	})] });
 };
-//#endregion
 export { LinkContent, LinkContent as default };
 
 //# sourceMappingURL=LinkContent.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/lib/getVisibleItemCount.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/TabNavigation/lib/getVisibleItemCount.ts
+// src/components/TabNavigation/lib/getVisibleItemCount.ts
 /**
 * Tolerance for sub-pixel rounding differences between measured item widths and
 * the available width.
@@ -17,7 +17,6 @@ var getVisibleItemCount = (itemWidths, availableWidth, moreItemWidth) => {
 	}
 	return visibleCount;
 };
-//#endregion
 export { getVisibleItemCount };
 
 //# sourceMappingURL=getVisibleItemCount.mjs.map

package/dist/js/packages/components/src/components/TabNavigation/lib/useCollapsingItems.mjs

@@ -3,7 +3,7 @@
 import { createFrameResizeObserver } from "../../../lib/dom/createFrameResizeObserver.mjs";
 import { getVisibleItemCount } from "./getVisibleItemCount.mjs";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
-//#region src/components/TabNavigation/lib/useCollapsingItems.ts
+// src/components/TabNavigation/lib/useCollapsingItems.ts
 var initialState = {
 	visibleCount: null,
 	hasOverflow: false,
@@ -64,7 +64,6 @@ var useCollapsingItems = () => {
 		moreRef
 	};
 };
-//#endregion
 export { useCollapsingItems as default, useCollapsingItems };
 
 //# sourceMappingURL=useCollapsingItems.mjs.map

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

@@ -1,13 +1,15 @@
 "use client"
 /* */
+import { useLabelledBySectionHeading } from "../Section/context.mjs";
 import Table_module_default from "./Table.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Table/Table.tsx
+// src/components/Table/Table.tsx
 /** @flr-generate all */
 var Table = (props) => {
 	const { children, className, verticalAlign = "top", layout = "auto", minWidth, ...rest } = props;
+	const ariaLabelledBy = useLabelledBySectionHeading(rest);
 	const rootClassName = clsx(Table_module_default.table, verticalAlign !== "top" && Table_module_default[`vertical-align-${verticalAlign}`], Table_module_default[`layout-${layout}`], className);
 	return /* @__PURE__ */ jsx("div", {
 		className: Table_module_default.tableContainer,
@@ -17,12 +19,12 @@ var Table = (props) => {
 			children: /* @__PURE__ */ jsx(Aria.Table, {
 				className: rootClassName,
 				...rest,
+				"aria-labelledby": ariaLabelledBy,
 				children
 			})
 		})
 	});
 };
-//#endregion
 export { Table, Table as default };
 
 //# sourceMappingURL=Table.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":["styles"],"sources":["../../../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Table.module.scss\";\n\nexport type TableProps = Omit<\n  Aria.TableProps,\n  \"render\" | \"className\" | \"style\"\n> & {\n  /** The vertical alignment of the table cells content. */\n  verticalAlign?: \"top\" | \"middle\";\n  /**\n   * The column-sizing algorithm of the table. Use \"fixed\" together with column\n   * widths to enforce exact widths. @default \"auto\"\n   */\n  layout?: \"auto\" | \"fixed\";\n  /**\n   * The minimum width of the table. Below this width the table scrolls\n   * horizontally instead of shrinking its columns.\n   */\n  minWidth?: number | string;\n  /** The elements class name. */\n  className?: string;\n};\n\n/** @flr-generate all */\nexport const Table: FC<TableProps> = (props) => {\n  const {\n    children,\n    className,\n    verticalAlign = \"top\",\n    layout = \"auto\",\n    minWidth,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.table,\n    verticalAlign !== \"top\" && styles[`vertical-align-${verticalAlign}`],\n    styles[`layout-${layout}`],\n    className,\n  );\n\n  return (\n    <div className={styles.tableContainer}>\n      <div className={styles.tableScrollArea} style={{ minWidth }}>\n        <Aria.Table className={rootClassName} {...rest}>\n          {children}\n        </Aria.Table>\n      </div>\n    </div>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;AA0BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EACJ,UACA,WACA,gBAAgB,OAChB,SAAS,QACT,UACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,OACP,kBAAkB,SAASA,qBAAO,kBAAkB,kBACpDA,qBAAO,UAAU,WACjB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAWA,qBAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,WAAWA,qBAAO;GAAiB,OAAO,EAAE,SAAS;GACxD,UAAA,oBAAC,KAAK,OAAN;IAAY,WAAW;IAAe,GAAI;IACvC;GACS,CAAA;EACT,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"Table.mjs","names":["styles"],"sources":["../../../../../../../src/components/Table/Table.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Table.module.scss\";\nimport { useLabelledBySectionHeading } from \"@/components/Section/context\";\n\nexport type TableProps = Omit<\n  Aria.TableProps,\n  \"render\" | \"className\" | \"style\"\n> & {\n  /** The vertical alignment of the table cells content. */\n  verticalAlign?: \"top\" | \"middle\";\n  /**\n   * The column-sizing algorithm of the table. Use \"fixed\" together with column\n   * widths to enforce exact widths. @default \"auto\"\n   */\n  layout?: \"auto\" | \"fixed\";\n  /**\n   * The minimum width of the table. Below this width the table scrolls\n   * horizontally instead of shrinking its columns.\n   */\n  minWidth?: number | string;\n  /** The elements class name. */\n  className?: string;\n};\n\n/** @flr-generate all */\nexport const Table: FC<TableProps> = (props) => {\n  const {\n    children,\n    className,\n    verticalAlign = \"top\",\n    layout = \"auto\",\n    minWidth,\n    ...rest\n  } = props;\n\n  const ariaLabelledBy = useLabelledBySectionHeading(rest);\n\n  const rootClassName = clsx(\n    styles.table,\n    verticalAlign !== \"top\" && styles[`vertical-align-${verticalAlign}`],\n    styles[`layout-${layout}`],\n    className,\n  );\n\n  return (\n    <div className={styles.tableContainer}>\n      <div className={styles.tableScrollArea} style={{ minWidth }}>\n        <Aria.Table\n          className={rootClassName}\n          {...rest}\n          aria-labelledby={ariaLabelledBy}\n        >\n          {children}\n        </Aria.Table>\n      </div>\n    </div>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;AA2BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EACJ,UACA,WACA,gBAAgB,OAChB,SAAS,QACT,UACA,GAAG,SACD;CAEJ,MAAM,iBAAiB,4BAA4B,IAAI;CAEvD,MAAM,gBAAgB,KACpBA,qBAAO,OACP,kBAAkB,SAASA,qBAAO,kBAAkB,kBACpDA,qBAAO,UAAU,WACjB,SACF;CAEA,OACE,oBAAC,OAAD;EAAK,WAAWA,qBAAO;EACrB,UAAA,oBAAC,OAAD;GAAK,WAAWA,qBAAO;GAAiB,OAAO,EAAE,SAAS;GACxD,UAAA,oBAAC,KAAK,OAAN;IACE,WAAW;IACX,GAAI;IACJ,mBAAiB;IAEhB;GACS,CAAA;EACT,CAAA;CACF,CAAA;AAET"}

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-//#region src/components/Table/Table.module.scss
+// src/components/Table/Table.module.scss
 var tableContainer = "flow--table--table-container";
 var tableScrollArea = "flow--table--table-scroll-area";
 var table = "flow--table";
@@ -26,7 +26,6 @@ var Table_module_default = {
 	"layout-auto": "flow--table--layout-auto",
 	"layout-fixed": "flow--table--layout-fixed"
 };
-//#endregion
 export { body, cell, column, Table_module_default as default, footer, header, row, table, tableContainer, tableScrollArea };
 
 //# sourceMappingURL=Table.module.mjs.map

package/dist/js/packages/components/src/components/Table/Table.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.module.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.tableContainer {\n  @include scrollbar.scrollbar;\n\n  width: 100%;\n  overflow-x: auto;\n}\n\n.tableScrollArea {\n  width: 100%;\n}\n\n.table {\n  border-radius: var(--table--corner-radius);\n  overflow: hidden;\n  width: 100%;\n  border-width: var(--table--border-width);\n  border-style: var(--table--border-style);\n  border-color: var(--table--border-color);\n  border-spacing: 0;\n  background-color: var(--table--background-color);\n\n  .column {\n    font-weight: var(--table--header-font-weight);\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .cell,\n  .column {\n    padding-inline: var(--table--padding-x);\n    padding-block: var(--table--padding-y);\n    text-align: start;\n    vertical-align: top;\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-width: 0;\n\n    // Cell content is the consumer's — a Flow icon or a raw `<svg>`.\n    // stylelint-disable-next-line selector-max-type -- consumer content\n    > svg {\n      vertical-align: bottom;\n    }\n\n    &.horizontal-align-center {\n      text-align: center;\n    }\n\n    &.horizontal-align-end {\n      text-align: end;\n    }\n  }\n\n  .header {\n    .column {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  :where(.body) {\n    :where(.row) {\n      &:where(:nth-of-type(odd):not(.footer)) {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) {\n        .cell {\n          border-block-end-width: var(--table--border-width);\n        }\n      }\n\n      &.footer .cell {\n        border-block-start-width: var(--table--border-width);\n      }\n    }\n  }\n\n  &.vertical-align-middle {\n    .cell,\n    .column {\n      vertical-align: middle;\n    }\n  }\n\n  &.layout-auto {\n    table-layout: auto;\n  }\n\n  &.layout-fixed {\n    table-layout: fixed;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Table.module.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.tableContainer {\n  @include scrollbar.scrollbar;\n\n  width: 100%;\n  overflow-x: auto;\n}\n\n.tableScrollArea {\n  width: 100%;\n}\n\n.table {\n  border-radius: var(--table--corner-radius);\n  overflow: hidden;\n  width: 100%;\n  border-width: var(--table--border-width);\n  border-style: var(--table--border-style);\n  border-color: var(--table--border-color);\n  border-spacing: 0;\n  background-color: var(--table--background-color);\n\n  .column {\n    font-weight: var(--table--header-font-weight);\n  }\n\n  .cell,\n  .column {\n    padding-inline: var(--table--padding-x);\n    padding-block: var(--table--padding-y);\n    text-align: start;\n    vertical-align: top;\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-width: 0;\n\n    // Cell content is the consumer's — a Flow icon or a raw `<svg>`.\n    // stylelint-disable-next-line selector-max-type -- consumer content\n    > svg {\n      vertical-align: bottom;\n    }\n\n    &.horizontal-align-center {\n      text-align: center;\n    }\n\n    &.horizontal-align-end {\n      text-align: end;\n    }\n  }\n\n  .header {\n    .column {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    // Hide only an all-empty header: a hidden `<th>` shifts the next headings.\n    &:not(:has(.column:not(:empty))) {\n      display: none;\n    }\n  }\n\n  :where(.body) {\n    :where(.row) {\n      &:where(:nth-of-type(odd):not(.footer)) {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) {\n        .cell {\n          border-block-end-width: var(--table--border-width);\n        }\n      }\n\n      &.footer .cell {\n        border-block-start-width: var(--table--border-width);\n      }\n    }\n  }\n\n  &.vertical-align-middle {\n    .cell,\n    .column {\n      vertical-align: middle;\n    }\n  }\n\n  &.layout-auto {\n    table-layout: auto;\n  }\n\n  &.layout-fixed {\n    table-layout: fixed;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Table/components/TableBody/TableBody.mjs

@@ -4,7 +4,7 @@ import Table_module_default from "../../Table.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Table/components/TableBody/TableBody.tsx
+// src/components/Table/components/TableBody/TableBody.tsx
 /** @flr-generate all */
 var TableBody = (props) => {
 	const { children, className, ...rest } = props;
@@ -15,7 +15,6 @@ var TableBody = (props) => {
 		children
 	});
 };
-//#endregion
 export { TableBody, TableBody as default };
 
 //# sourceMappingURL=TableBody.mjs.map

package/dist/js/packages/components/src/components/Table/components/TableCell/TableCell.mjs

@@ -3,32 +3,24 @@
 import { SkeletonText } from "../../../SkeletonText/SkeletonText.mjs";
 import { SkeletonRawText } from "../../../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Table_module_default from "../../Table.module.mjs";
-import { TableColumn } from "../TableColumn/TableColumn.mjs";
 import clsx from "clsx";
 import { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Table/components/TableCell/TableCell.tsx
+// src/components/Table/components/TableCell/TableCell.tsx
 /** @flr-generate all */
 var TableCell = (props) => {
 	const { children, className, rowHeader, horizontalAlign = "start", ...rest } = props;
-	const rootClassName = clsx(Table_module_default.cell, horizontalAlign !== "start" && Table_module_default[`horizontal-align-${horizontalAlign}`], className);
-	const content = /* @__PURE__ */ jsx(Suspense, {
-		fallback: /* @__PURE__ */ jsx(SkeletonText, { width: "100px" }),
-		children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
-	});
-	if (rowHeader) return /* @__PURE__ */ jsx(TableColumn, {
-		className: rootClassName,
-		...rest,
-		children: content
-	});
+	const rootClassName = clsx(Table_module_default.cell, rowHeader && Table_module_default.column, horizontalAlign !== "start" && Table_module_default[`horizontal-align-${horizontalAlign}`], className);
 	return /* @__PURE__ */ jsx(Aria.Cell, {
 		className: rootClassName,
 		...rest,
-		children: content
+		children: /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(SkeletonText, { width: "100px" }),
+			children: /* @__PURE__ */ jsx(SkeletonRawText, { children })
+		})
 	});
 };
-//#endregion
 export { TableCell, TableCell as default };
 
 //# sourceMappingURL=TableCell.mjs.map

package/dist/js/packages/components/src/components/Table/components/TableCell/TableCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table/components/TableColumn/TableColumn\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableCellProps\n  extends\n    Omit<Aria.CellProps, \"children\" | \"style\" | \"render\">,\n    PropsWithChildren {\n  /** Use cell as row header */\n  rowHeader?: boolean;\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const content = (\n    <Suspense fallback={<SkeletonText width=\"100px\" />}>\n      <SkeletonRawText>{children}</SkeletonRawText>\n    </Suspense>\n  );\n\n  if (rowHeader) {\n    return (\n      <TableColumn className={rootClassName} {...rest}>\n        {content}\n      </TableColumn>\n    );\n  }\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      {content}\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,UACA,WACA,WACA,kBAAkB,SAClB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,MACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,UACJ,oBAAC,UAAD;EAAU,UAAU,oBAAC,cAAD,EAAc,OAAM,QAAS,CAAA;EAC/C,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;CACpC,CAAA;CAGZ,IAAI,WACF,OACE,oBAAC,aAAD;EAAa,WAAW;EAAe,GAAI;EACxC,UAAA;CACU,CAAA;CAIjB,OACE,oBAAC,KAAK,MAAN;EAAW,WAAW;EAAe,GAAI;EACtC,UAAA;CACQ,CAAA;AAEf"}
+{"version":3,"file":"TableCell.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableCellProps\n  extends\n    Omit<Aria.CellProps, \"children\" | \"style\" | \"render\">,\n    PropsWithChildren {\n  /**\n   * Styles the cell as a row header. Its semantics come from the column: the\n   * first column, or the one with `isRowHeader`.\n   */\n  rowHeader?: boolean;\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    rowHeader && styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      <Suspense fallback={<SkeletonText width=\"100px\" />}>\n        <SkeletonRawText>{children}</SkeletonRawText>\n      </Suspense>\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EACJ,UACA,WACA,WACA,kBAAkB,SAClB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,qBAAO,MACP,aAAaA,qBAAO,QACpB,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAW,WAAW;EAAe,GAAI;EACvC,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,cAAD,EAAc,OAAM,QAAS,CAAA;GAC/C,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;EACpC,CAAA;CACD,CAAA;AAEf"}

package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs

@@ -3,17 +3,19 @@
 import { PropsContextProvider } from "../../../../lib/propsContext/components/PropsContextProvider.mjs";
 import { SkeletonRawText } from "../../../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Table_module_default from "../../Table.module.mjs";
+import { useIsFirstColumn } from "../TableHeader/context.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
-//#region src/components/Table/components/TableColumn/TableColumn.tsx
+// src/components/Table/components/TableColumn/TableColumn.tsx
 /** @flr-generate all */
 var TableColumn = (props) => {
-	const { children, className, horizontalAlign = "start", width, minWidth, ...rest } = props;
+	const { children, className, horizontalAlign = "start", width, minWidth, isRowHeader, ...rest } = props;
+	const isFirstColumn = useIsFirstColumn();
 	const rootClassName = clsx(Table_module_default.column, horizontalAlign !== "start" && Table_module_default[`horizontal-align-${horizontalAlign}`], className);
 	const propsContext = { Checkbox: { slot: null } };
 	return /* @__PURE__ */ jsx(Aria.Column, {
-		isRowHeader: true,
+		isRowHeader: isRowHeader ?? isFirstColumn ?? true,
 		className: rootClassName,
 		...rest,
 		style: {
@@ -26,7 +28,6 @@ var TableColumn = (props) => {
 		})
 	});
 };
-//#endregion
 export { TableColumn, TableColumn as default };
 
 //# sourceMappingURL=TableColumn.mjs.map

package/dist/js/packages/components/src/components/Table/components/TableColumn/TableColumn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumn.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface TableColumnProps\n  extends\n    Omit<\n      Aria.ColumnProps,\n      \"children\" | \"width\" | \"minWidth\" | \"maxWidth\" | \"style\"\n    >,\n    PropsWithChildren {\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n  /** The width of the column. */\n  width?: number | string;\n  /** The minimum width of the column. */\n  minWidth?: number | string;\n}\n\n/** @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n  const {\n    children,\n    className,\n    horizontalAlign = \"start\",\n    width,\n    minWidth,\n    ...rest\n  } = props;\n  const rootClassName = clsx(\n    styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n  return (\n    <Aria.Column\n      isRowHeader\n      className={rootClassName}\n      {...rest}\n      style={{ width, minWidth }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <SkeletonRawText>{children}</SkeletonRawText>\n      </PropsContextProvider>\n    </Aria.Column>\n  );\n};\n\nexport default TableColumn;\n"],"mappings":";;;;;;;;;;AAuBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,UACA,WACA,kBAAkB,SAClB,OACA,UACA,GAAG,SACD;CACJ,MAAM,gBAAgB,KACpBA,qBAAO,QACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,eAA6B,EAAE,UAAU,EAAE,MAAM,KAAK,EAAE;CAE9D,OACE,oBAAC,KAAK,QAAN;EACE,aAAA;EACA,WAAW;EACX,GAAI;EACJ,OAAO;GAAE;GAAO;EAAS;EAEzB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;EACxB,CAAA;CACX,CAAA;AAEjB"}
+{"version":3,"file":"TableColumn.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Table/components/TableColumn/TableColumn.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\nimport { useIsFirstColumn } from \"@/components/Table/components/TableHeader/context\";\n\nexport interface TableColumnProps\n  extends\n    Omit<\n      Aria.ColumnProps,\n      \"children\" | \"width\" | \"minWidth\" | \"maxWidth\" | \"style\"\n    >,\n    PropsWithChildren {\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n  /** The width of the column. */\n  width?: number | string;\n  /** The minimum width of the column. */\n  minWidth?: number | string;\n}\n\n/** @flr-generate all */\nexport const TableColumn: FC<TableColumnProps> = (props) => {\n  const {\n    children,\n    className,\n    horizontalAlign = \"start\",\n    width,\n    minWidth,\n    isRowHeader,\n    ...rest\n  } = props;\n  const isFirstColumn = useIsFirstColumn();\n\n  const rootClassName = clsx(\n    styles.column,\n    horizontalAlign !== \"start\" &&\n      styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const propsContext: PropsContext = { Checkbox: { slot: null } };\n\n  return (\n    <Aria.Column\n      isRowHeader={isRowHeader ?? isFirstColumn ?? true}\n      className={rootClassName}\n      {...rest}\n      style={{ width, minWidth }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <SkeletonRawText>{children}</SkeletonRawText>\n      </PropsContextProvider>\n    </Aria.Column>\n  );\n};\n\nexport default TableColumn;\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,eAAqC,UAAU;CAC1D,MAAM,EACJ,UACA,WACA,kBAAkB,SAClB,OACA,UACA,aACA,GAAG,SACD;CACJ,MAAM,gBAAgB,iBAAiB;CAEvC,MAAM,gBAAgB,KACpBA,qBAAO,QACP,oBAAoB,WAClBA,qBAAO,oBAAoB,oBAC7B,SACF;CAEA,MAAM,eAA6B,EAAE,UAAU,EAAE,MAAM,KAAK,EAAE;CAE9D,OACE,oBAAC,KAAK,QAAN;EACE,aAAa,eAAe,iBAAiB;EAC7C,WAAW;EACX,GAAI;EACJ,OAAO;GAAE;GAAO;EAAS;EAEzB,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,iBAAD,EAAkB,SAA0B,CAAA;EACxB,CAAA;CACX,CAAA;AAEjB"}

package/dist/js/packages/components/src/components/Table/components/TableFooterRow/TableFooterRow.mjs

@@ -2,7 +2,7 @@
 /* */
 import { TableRow } from "../TableRow/TableRow.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/Table/components/TableFooterRow/TableFooterRow.tsx
+// src/components/Table/components/TableFooterRow/TableFooterRow.tsx
 /** @flr-generate all */
 var TableFooterRow = (props) => {
 	return /* @__PURE__ */ jsx(TableRow, {
@@ -10,7 +10,6 @@ var TableFooterRow = (props) => {
 		footer: true
 	});
 };
-//#endregion
 export { TableFooterRow, TableFooterRow as default };
 
 //# sourceMappingURL=TableFooterRow.mjs.map