@soroush.tech/design-system 2.0.0-rc.3 → 2.0.0-rc.5

package/dist/Snackbar.mjs

@@ -0,0 +1,201 @@
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { n as useDefaultProps } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { t as getSurfaceRadius } from "./getSurfaceRadius-B1QE_VLa.mjs";
+import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
+import { t as getShapeRadius } from "./getShapeRadius-DVQRARis.mjs";
+import { Portal } from "./Portal.mjs";
+import { Grow } from "./Grow.mjs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/Snackbar/hooks/useAutoHide.ts
+/**
+* The clock of a message that hides itself: it runs while the message is open, stops while the
+* pointer or the focus is on it, and starts again - for `resumeDuration` - once they leave.
+*/
+function useAutoHide({ isOpen, duration, resumeDuration, onHide }) {
+	const timer = useRef(void 0);
+	const hide = useRef(onHide);
+	useEffect(() => {
+		hide.current = onHide;
+	});
+	const stop = useCallback(() => window.clearTimeout(timer.current), []);
+	const start = useCallback((ms) => {
+		stop();
+		if (ms !== void 0) timer.current = window.setTimeout(() => hide.current(), ms);
+	}, [stop]);
+	useEffect(() => {
+		if (!isOpen) return void 0;
+		start(duration);
+		return stop;
+	}, [
+		isOpen,
+		duration,
+		start,
+		stop
+	]);
+	return {
+		pause: stop,
+		resume: useCallback(() => {
+			if (!isOpen || duration === void 0) return;
+			start(resumeDuration ?? duration / 2);
+		}, [
+			isOpen,
+			duration,
+			resumeDuration,
+			start
+		])
+	};
+}
+// src/Snackbar/Snackbar.tsx
+const DEFAULT_ANCHOR = {
+	vertical: "bottom",
+	horizontal: "start"
+};
+const SnackbarRoot = styled("div", {
+	name: "Snackbar",
+	label: "Snackbar",
+	shouldForwardProp: createShouldForwardProp(["anchorOrigin", "layer"])
+})(({ theme, anchorOrigin, layer }) => {
+	const { vertical, horizontal } = anchorOrigin;
+	return {
+		position: "fixed",
+		zIndex: theme.zOrder[layer],
+		display: "flex",
+		pointerEvents: "none",
+		[vertical]: theme.space[3],
+		...horizontal === "center" ? {
+			left: 0,
+			right: 0,
+			justifyContent: "center"
+		} : { [horizontal === "start" ? "insetInlineStart" : "insetInlineEnd"]: theme.space[3] }
+	};
+});
+const SnackbarContent = styled("div", {
+	name: "Snackbar",
+	slot: "content",
+	label: "SnackbarContent",
+	shouldForwardProp: createShouldForwardProp([
+		"shape",
+		"borderRadius",
+		"bg",
+		"textColor"
+	])
+})(({ theme, shape, borderRadius, bg, textColor }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.space[2],
+	boxSizing: "border-box",
+	minWidth: "18rem",
+	maxWidth: `calc(100vw - ${theme.space[3]} - ${theme.space[3]})`,
+	padding: `${theme.space[1]} ${theme.space[2]}`,
+	pointerEvents: "auto",
+	borderRadius: getShapeRadius(shape, getSurfaceRadius(theme, borderRadius)),
+	boxShadow: theme.shadows[6],
+	backgroundColor: (0, src_exports.get)(theme, `background.${bg ?? "modal"}`),
+	color: (0, src_exports.get)(theme, `text.${textColor ?? themeDefault(theme, "textColor", "initial")}`),
+	fontFamily: (0, src_exports.get)(theme, "fonts.body"),
+	fontSize: theme.fontSizes[1],
+	lineHeight: (0, src_exports.get)(theme, "lineHeights.base")
+}));
+const SnackbarMessage = styled("div", {
+	name: "Snackbar",
+	slot: "message",
+	label: "SnackbarMessage"
+})(({ theme }) => ({
+	flex: 1,
+	minWidth: 0,
+	padding: `${theme.space[1]} 0`
+}));
+const SnackbarAction = styled("div", {
+	name: "Snackbar",
+	slot: "action",
+	label: "SnackbarAction"
+})(({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	flexShrink: 0,
+	gap: theme.space[1],
+	marginInlineStart: "auto"
+}));
+/**
+* @description A transient message in a corner of the window, through a `Portal`. It hides itself
+* after `autoHideDuration` - the clock stops while the pointer or the focus is on it - and asks to
+* close on Escape and on a click away, `onClose` told why. It is a `role="status"`, announced
+* politely, and never takes the focus. Several at once do not stack: the app queues them.
+*/
+function Snackbar({ isOpen: isOpenProp, defaultOpen = false, onClose, autoHideDuration: autoHideDurationProp, resumeHideDuration: resumeHideDurationProp, message, action, children, anchorOrigin: anchorOriginProp, transition: Transition = Grow, layer: layerProp, shape: shapeProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, container, className, "data-testid": dataTestid }) {
+	const dp = useDefaultProps("Snackbar");
+	const autoHideDuration = autoHideDurationProp ?? dp.autoHideDuration;
+	const resumeHideDuration = resumeHideDurationProp ?? dp.resumeHideDuration;
+	const anchorOrigin = anchorOriginProp ?? dp.anchorOrigin ?? DEFAULT_ANCHOR;
+	const layer = layerProp ?? dp.layer ?? "snackbar";
+	const shape = shapeProp ?? dp.shape ?? "rounded";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const bg = bgProp ?? dp.bg;
+	const textColor = textColorProp ?? dp.textColor;
+	const [isOpen, setIsOpen] = useControlled({
+		controlled: isOpenProp,
+		default: defaultOpen
+	});
+	const [isMounted, setIsMounted] = useState(isOpen);
+	if (isOpen && !isMounted) setIsMounted(true);
+	const close = (event, reason) => {
+		onClose?.(event, reason);
+		if (isOpenProp === void 0 && reason !== "clickaway") setIsOpen(false);
+	};
+	const latestClose = useRef(close);
+	useEffect(() => {
+		latestClose.current = close;
+	});
+	const { pause, resume } = useAutoHide({
+		isOpen,
+		duration: autoHideDuration,
+		resumeDuration: resumeHideDuration,
+		onHide: () => latestClose.current(new Event("timeout"), "timeout")
+	});
+	const contentRef = useRef(null);
+	useEffect(() => {
+		if (!isOpen) return void 0;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") latestClose.current(event, "escapeKeyDown");
+		};
+		const handlePointerDown = (event) => {
+			if (!contentRef.current?.contains(event.target)) latestClose.current(event, "clickaway");
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			document.removeEventListener("pointerdown", handlePointerDown);
+		};
+	}, [isOpen]);
+	if (!isMounted) return null;
+	return /* @__PURE__ */ jsx(Portal, {
+		container,
+		children: /* @__PURE__ */ jsx(SnackbarRoot, {
+			anchorOrigin,
+			layer,
+			className,
+			"data-testid": dataTestid,
+			children: /* @__PURE__ */ jsx(Transition, {
+				isShown: isOpen,
+				onExited: () => setIsMounted(false),
+				children: /* @__PURE__ */ jsx(SnackbarContent, {
+					ref: contentRef,
+					role: "status",
+					shape,
+					borderRadius,
+					bg,
+					textColor,
+					onMouseEnter: pause,
+					onMouseLeave: resume,
+					onFocus: pause,
+					onBlur: resume,
+					children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SnackbarMessage, { children: message }), action ? /* @__PURE__ */ jsx(SnackbarAction, { children: action }) : null] })
+				})
+			})
+		})
+	});
+}
+export { Snackbar };

package/dist/Switch.cjs

@@ -1,13 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_FormControl = require("./FormControl.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Switch/Switch.tsx
+// src/Switch/Switch.tsx
 const OUTSIDE_TRACK = {
 	sm: {
 		width: "34px",
@@ -258,19 +258,26 @@ const edgeStyle = ({ edge }) => {
 		...edge === "end" && { marginRight: -8 }
 	};
 };
+const SwitchLabel = require_src.styled("span", {
+	name: "Switch",
+	slot: "label",
+	label: "SwitchLabel",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["textColor"])
+})(({ theme, textColor }) => textColor ? { color: (0, require_src.src_exports.get)(theme, `text.${textColor}`) } : {});
 const SwitchRoot = require_src.styled("label", {
 	name: "Switch",
 	label: "Switch",
 	shouldForwardProp,
 	systemProps: [require_src.src_exports.space]
 })(baseStyle, colorStyle, edgeStyle);
-function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple: _disableRipple, color: colorProp, size: sizeProp, variant: variantProp, marked = false, bg, edge = false, icon, checkedIcon, onChange, id: idProp, required: requiredProp, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple: _disableRipple, color: colorProp, textColor: textColorProp, size: sizeProp, variant: variantProp, marked = false, bg, edge = false, icon, checkedIcon, onChange, id: idProp, required: requiredProp, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
 	const theme = require_theme.useTheme();
 	const fc = require_FormControl.useFormControl({
 		id: idProp,
 		disabled: disabledProp,
 		required: requiredProp,
-		size: sizeProp
+		size: sizeProp,
+		textColor: textColorProp
 	});
 	const { id, disabled, required, size } = fc;
 	const color = colorProp ?? fc.color;
@@ -331,9 +338,11 @@ function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple
 					})]
 				})]
 			}),
-			children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children })
+			children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwitchLabel, {
+				textColor: fc.textColor,
+				children
+			})
 		]
 	});
 }
-//#endregion
 exports.Switch = Switch;

package/dist/Switch.d.cts

@@ -1,7 +1,6 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
 import { ChangeEvent, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Switch/Switch.d.ts
 type SwitchColor = keyof Theme['palette'];
 type SwitchSize = keyof Theme['sizes'];
 type SwitchEdge = 'start' | 'end' | false;
@@ -13,6 +12,8 @@ interface SwitchProps extends SpaceProps<Theme> {
   /** Accepted for API parity - the design system does not implement ripple. */
   disableRipple?: boolean;
   color?: SwitchColor;
+  /** Text color of the label, resolves against `theme.text`. Default: the control's `FormControl` or `Form` `textColor`, else the control's color. */
+  textColor?: keyof Theme['text'];
   size?: SwitchSize;
   variant?: SwitchVariant;
   bg?: keyof Theme['background'];
@@ -36,6 +37,5 @@ interface SwitchProps extends SpaceProps<Theme> {
   'aria-describedby'?: string;
   'data-testid'?: string;
 }
-declare function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple: _disableRipple, color: colorProp, size: sizeProp, variant: variantProp, marked, bg, edge, icon, checkedIcon, onChange, id: idProp, required: requiredProp, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<SwitchProps>): import("react").JSX.Element;
-//#endregion
+declare function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple: _disableRipple, color: colorProp, textColor: textColorProp, size: sizeProp, variant: variantProp, marked, bg, edge, icon, checkedIcon, onChange, id: idProp, required: requiredProp, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<SwitchProps>): import("react").JSX.Element;
 export { Switch, SwitchColor, SwitchEdge, SwitchProps, SwitchSize, SwitchVariant };

package/dist/Switch.d.mts

@@ -1,7 +1,6 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, ReactNode } from "react";
-//#region src/Switch/Switch.d.ts
 type SwitchColor = keyof Theme['palette'];
 type SwitchSize = keyof Theme['sizes'];
 type SwitchEdge = 'start' | 'end' | false;
@@ -13,6 +12,8 @@ interface SwitchProps extends SpaceProps<Theme> {
   /** Accepted for API parity - the design system does not implement ripple. */
   disableRipple?: boolean;
   color?: SwitchColor;
+  /** Text color of the label, resolves against `theme.text`. Default: the control's `FormControl` or `Form` `textColor`, else the control's color. */
+  textColor?: keyof Theme['text'];
   size?: SwitchSize;
   variant?: SwitchVariant;
   bg?: keyof Theme['background'];
@@ -36,6 +37,5 @@ interface SwitchProps extends SpaceProps<Theme> {
   'aria-describedby'?: string;
   'data-testid'?: string;
 }
-declare function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple: _disableRipple, color: colorProp, size: sizeProp, variant: variantProp, marked, bg, edge, icon, checkedIcon, onChange, id: idProp, required: requiredProp, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<SwitchProps>): import("react").JSX.Element;
-//#endregion
+declare function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple: _disableRipple, color: colorProp, textColor: textColorProp, size: sizeProp, variant: variantProp, marked, bg, edge, icon, checkedIcon, onChange, id: idProp, required: requiredProp, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<SwitchProps>): import("react").JSX.Element;
 export { Switch, SwitchColor, SwitchEdge, SwitchProps, SwitchSize, SwitchVariant };

package/dist/Switch.mjs

@@ -1,11 +1,11 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
 import { alpha } from "./utils.mjs";
-import { r as useTheme } from "./theme-Z9_QludW.mjs";
+import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/Switch/Switch.tsx
+// src/Switch/Switch.tsx
 const OUTSIDE_TRACK = {
 	sm: {
 		width: "34px",
@@ -256,19 +256,26 @@ const edgeStyle = ({ edge }) => {
 		...edge === "end" && { marginRight: -8 }
 	};
 };
+const SwitchLabel = styled("span", {
+	name: "Switch",
+	slot: "label",
+	label: "SwitchLabel",
+	shouldForwardProp: createShouldForwardProp(["textColor"])
+})(({ theme, textColor }) => textColor ? { color: (0, src_exports.get)(theme, `text.${textColor}`) } : {});
 const SwitchRoot = styled("label", {
 	name: "Switch",
 	label: "Switch",
 	shouldForwardProp,
 	systemProps: [src_exports.space]
 })(baseStyle, colorStyle, edgeStyle);
-function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple: _disableRipple, color: colorProp, size: sizeProp, variant: variantProp, marked = false, bg, edge = false, icon, checkedIcon, onChange, id: idProp, required: requiredProp, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple: _disableRipple, color: colorProp, textColor: textColorProp, size: sizeProp, variant: variantProp, marked = false, bg, edge = false, icon, checkedIcon, onChange, id: idProp, required: requiredProp, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
 	const theme = useTheme();
 	const fc = useFormControl({
 		id: idProp,
 		disabled: disabledProp,
 		required: requiredProp,
-		size: sizeProp
+		size: sizeProp,
+		textColor: textColorProp
 	});
 	const { id, disabled, required, size } = fc;
 	const color = colorProp ?? fc.color;
@@ -329,9 +336,11 @@ function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple
 					})]
 				})]
 			}),
-			children != null && /* @__PURE__ */ jsx("span", { children })
+			children != null && /* @__PURE__ */ jsx(SwitchLabel, {
+				textColor: fc.textColor,
+				children
+			})
 		]
 	});
 }
-//#endregion
 export { Switch };

package/dist/Table/Table.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_TableContext = require("../TableContext-Bfg1C3Sr.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_TableContext = require("../TableContext-CK5ALcd9.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Table/Table/Table.tsx
+// src/Table/Table/Table.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props, "tableAlign"]);
 const colorSystem = (0, require_src.src_exports.system)({ bg: {
 	property: "backgroundColor",
@@ -61,5 +61,4 @@ function Table({ size, cellPadding = "normal", hasStickyHeader = false, shouldHi
 		})
 	});
 }
-//#endregion
 exports.Table = Table;

package/dist/Table/Table.d.cts

@@ -1,8 +1,7 @@
-import { P as PaletteColor, W as Theme } from "../index-DJ0f69wh.cjs";
-import { t as TableCellPadding } from "../TableContext-Duj1nVG7.cjs";
+import { U as PaletteColor, nt as Theme } from "../index-Lsm4v8fB.cjs";
+import { t as TableCellPadding } from "../TableContext-fIyMD_Bj.cjs";
 import { ElementType, TableHTMLAttributes } from "react";
 import { BorderProps, LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Table/Table/Table.d.ts
 /** Valid values for the bg prop - derived from theme.background keys. */
 type TableBackgroundToken = keyof Theme['background'];
 /** Valid values for the size prop - derived from theme.sizes keys. */
@@ -44,5 +43,4 @@ interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'color'
 /** Table-wide text alignment - inherited by head, body, and footer cells alike. */
 type TableAlign = 'left' | 'right' | 'center' | 'justify';
 declare function Table({ size, cellPadding, hasStickyHeader, shouldHideSortIcon, hasEllipsis, color, align, as, children, ...rest }: Readonly<TableProps>): import("react").JSX.Element;
-//#endregion
 export { Table, TableAlign, TableBackgroundToken, TableBorderColorToken, TableProps, TableSize };

package/dist/Table/Table.d.mts

@@ -1,8 +1,7 @@
-import { P as PaletteColor, W as Theme } from "../index-CJhK7JND.mjs";
-import { t as TableCellPadding } from "../TableContext-DhuRf6Wy.mjs";
+import { U as PaletteColor, nt as Theme } from "../index-CR8qkP8U.mjs";
+import { t as TableCellPadding } from "../TableContext-0hifLOKH.mjs";
 import { BorderProps, LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ElementType, TableHTMLAttributes } from "react";
-//#region src/Table/Table/Table.d.ts
 /** Valid values for the bg prop - derived from theme.background keys. */
 type TableBackgroundToken = keyof Theme['background'];
 /** Valid values for the size prop - derived from theme.sizes keys. */
@@ -44,5 +43,4 @@ interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'color'
 /** Table-wide text alignment - inherited by head, body, and footer cells alike. */
 type TableAlign = 'left' | 'right' | 'center' | 'justify';
 declare function Table({ size, cellPadding, hasStickyHeader, shouldHideSortIcon, hasEllipsis, color, align, as, children, ...rest }: Readonly<TableProps>): import("react").JSX.Element;
-//#endregion
 export { Table, TableAlign, TableBackgroundToken, TableBorderColorToken, TableProps, TableSize };

package/dist/Table/Table.mjs

@@ -1,8 +1,8 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { t as TableContext } from "../TableContext-Dyr89h_k.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { t as TableContext } from "../TableContext-BBzwHtLn.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Table/Table/Table.tsx
+// src/Table/Table/Table.tsx
 const shouldForwardProp = createShouldForwardProp([...props, "tableAlign"]);
 const colorSystem = (0, src_exports.system)({ bg: {
 	property: "backgroundColor",
@@ -59,5 +59,4 @@ function Table({ size, cellPadding = "normal", hasStickyHeader = false, shouldHi
 		})
 	});
 }
-//#endregion
 export { Table };

package/dist/Table/TableBody.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_TableSectionContext = require("../TableSectionContext-pYlJ-duI.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_TableSectionContext = require("../TableSectionContext-D25fE10g.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Table/TableBody/TableBody.tsx
+// src/Table/TableBody/TableBody.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]);
 const colorSystem = (0, require_src.src_exports.system)({
 	color: {
@@ -40,5 +40,4 @@ function TableBody({ as, children, ...rest }) {
 		})
 	});
 }
-//#endregion
 exports.TableBody = TableBody;

package/dist/Table/TableBody.d.cts

@@ -1,7 +1,6 @@
-import { W as Theme } from "../index-DJ0f69wh.cjs";
+import { nt as Theme } from "../index-Lsm4v8fB.cjs";
 import { ElementType, HTMLAttributes } from "react";
 import { BorderProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Table/TableBody/TableBody.d.ts
 /** Valid values for the color prop - derived from theme.text keys. */
 type TableBodyColorToken = keyof Theme['text'];
 /** Valid values for the bg prop - derived from theme.background keys. */
@@ -18,5 +17,4 @@ interface TableBodyProps extends Omit<HTMLAttributes<HTMLTableSectionElement>, '
   as?: ElementType;
 }
 declare function TableBody({ as, children, ...rest }: Readonly<TableBodyProps>): import("react").JSX.Element;
-//#endregion
 export { TableBody, TableBodyBackgroundToken, TableBodyBorderColorToken, TableBodyColorToken, TableBodyProps };

package/dist/Table/TableBody.d.mts

@@ -1,7 +1,6 @@
-import { W as Theme } from "../index-CJhK7JND.mjs";
+import { nt as Theme } from "../index-CR8qkP8U.mjs";
 import { BorderProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ElementType, HTMLAttributes } from "react";
-//#region src/Table/TableBody/TableBody.d.ts
 /** Valid values for the color prop - derived from theme.text keys. */
 type TableBodyColorToken = keyof Theme['text'];
 /** Valid values for the bg prop - derived from theme.background keys. */
@@ -18,5 +17,4 @@ interface TableBodyProps extends Omit<HTMLAttributes<HTMLTableSectionElement>, '
   as?: ElementType;
 }
 declare function TableBody({ as, children, ...rest }: Readonly<TableBodyProps>): import("react").JSX.Element;
-//#endregion
 export { TableBody, TableBodyBackgroundToken, TableBodyBorderColorToken, TableBodyColorToken, TableBodyProps };

package/dist/Table/TableBody.mjs

@@ -1,8 +1,8 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { t as TableSectionContext } from "../TableSectionContext-meIG4lFZ.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { t as TableSectionContext } from "../TableSectionContext-CT6xhPDd.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Table/TableBody/TableBody.tsx
+// src/Table/TableBody/TableBody.tsx
 const shouldForwardProp = createShouldForwardProp([...props]);
 const colorSystem = (0, src_exports.system)({
 	color: {
@@ -38,5 +38,4 @@ function TableBody({ as, children, ...rest }) {
 		})
 	});
 }
-//#endregion
 export { TableBody };

package/dist/Table/TableCell.cjs

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
-const require_TableContext = require("../TableContext-Bfg1C3Sr.cjs");
-const require_TableSectionContext = require("../TableSectionContext-pYlJ-duI.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_themeDefault = require("../themeDefault-DbPHBbNO.cjs");
+const require_TableContext = require("../TableContext-CK5ALcd9.cjs");
+const require_TableSectionContext = require("../TableSectionContext-D25fE10g.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Table/TableCell/TableCell.tsx
+// src/Table/TableCell/TableCell.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
 	"cellAlign",
@@ -89,5 +89,4 @@ function TableCell({ variant, align = "inherit", size, cellPadding, sortDirectio
 		children
 	});
 }
-//#endregion
 exports.TableCell = TableCell;

package/dist/Table/TableCell.d.cts

@@ -1,2 +1,2 @@
-import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell } from "../index-BelFIizY.cjs";
+import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell } from "../index-D4PcgL-c.cjs";
 export { TableCell, TableCellAlign, TableCellBackgroundToken, TableCellBorderColorToken, TableCellColorToken, TableCellProps, TableCellSortDirection, TableCellVariant };

package/dist/Table/TableCell.d.mts

@@ -1,2 +1,2 @@
-import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell } from "../index-ByYxVl9O.mjs";
+import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell } from "../index-UiyZAKID.mjs";
 export { TableCell, TableCellAlign, TableCellBackgroundToken, TableCellBorderColorToken, TableCellColorToken, TableCellProps, TableCellSortDirection, TableCellVariant };

package/dist/Table/TableCell.mjs

@@ -1,10 +1,10 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { t as themeDefault } from "../themeDefault-Z3KmyIbm.mjs";
-import { t as TableContext } from "../TableContext-Dyr89h_k.mjs";
-import { t as TableSectionContext } from "../TableSectionContext-meIG4lFZ.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { t as themeDefault } from "../themeDefault-BeZJzqJj.mjs";
+import { t as TableContext } from "../TableContext-BBzwHtLn.mjs";
+import { t as TableSectionContext } from "../TableSectionContext-CT6xhPDd.mjs";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Table/TableCell/TableCell.tsx
+// src/Table/TableCell/TableCell.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"cellAlign",
@@ -87,5 +87,4 @@ function TableCell({ variant, align = "inherit", size, cellPadding, sortDirectio
 		children
 	});
 }
-//#endregion
 export { TableCell };

package/dist/Table/TableContainer.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
 const require_View = require("../View.cjs");
-//#region src/Table/TableContainer/TableContainer.tsx
+// src/Table/TableContainer/TableContainer.tsx
 /**
 * Scroll wrapper for `Table` - wide tables scroll horizontally inside it
 * instead of breaking the page layout. Give it a bounded height to make
@@ -11,5 +11,4 @@ const TableContainer = require_src.styled(require_View.View, {
 	name: "TableContainer",
 	label: "TableContainer"
 })({ overflowX: "auto" });
-//#endregion
 exports.TableContainer = TableContainer;

package/dist/Table/TableContainer.d.cts

@@ -1,5 +1,4 @@
-import { W as Theme, nn as ViewProps } from "../index-DJ0f69wh.cjs";
-//#region src/Table/TableContainer/TableContainer.d.ts
+import { nt as Theme, yn as ViewProps } from "../index-Lsm4v8fB.cjs";
 type TableContainerProps = ViewProps;
 /**
  * Scroll wrapper for `Table` - wide tables scroll horizontally inside it
@@ -12,5 +11,4 @@ declare const TableContainer: import("@emotion/styled").StyledComponent<Pick<{
 } & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "about" | "accessKey" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "as" | "aspectRatio" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "bg" | "border" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderColor" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "borderX" | "borderY" | "bottom" | "children" | "className" | "color" | "columnGap" | "containerName" | "containerType" | "content" | "contentEditable" | "contextMenu" | "cursor" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "display" | "draggable" | "enterKeyHint" | "exportparts" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gap" | "height" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "key" | "lang" | "layout" | "left" | "letterSpacing" | "lineHeight" | "m" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "marginX" | "marginY" | "maxHeight" | "maxWidth" | "mb" | "minHeight" | "minWidth" | "ml" | "mr" | "mt" | "mx" | "my" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "p" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingX" | "paddingY" | "part" | "pb" | "pl" | "popover" | "popoverTarget" | "popoverTargetAction" | "position" | "pr" | "prefix" | "property" | "pt" | "px" | "py" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "right" | "role" | "rowGap" | "security" | "size" | "slot" | "span" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "textAlign" | "textAlignLast" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationStyle" | "textDecorationThickness" | "textOverflow" | "textTransform" | "theme" | "title" | "top" | "translate" | "typeof" | "unselectable" | "verticalAlign" | "vocab" | "whiteSpace" | "width" | "zIndex"> & {
   theme?: Theme;
 } & ViewProps, {}, {}>;
-//#endregion
 export { TableContainer, TableContainerProps };