@soroush.tech/design-system 1.3.2 → 2.0.0-alpha.0

package/dist/Sidebar/Sidebar.d.mts

@@ -1,23 +1,26 @@
-import { n as FlexProps } from "../index-n2OyTMr6.mjs";
-import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-ao6lRfTX.mjs";
+import { n as FlexProps } from "../index-B41OXLX8.mjs";
+import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Sidebar/Sidebar/Sidebar.d.ts
 interface SidebarProps extends FlexProps {
   /**
-   * Rail contents — `SidebarItem`s, but any node composes (a sponsor logo,
-   * a footer, dividers, …). Items read the open state from `SidebarContext`.
+   * Rail contents - `SidebarItem`s, but any node composes (a sponsor logo,
+   * a footer, dividers, ...). Items read the open state from `SidebarContext`.
    */
   children: ReactNode;
   /**
-   * Whether item labels are shown. Controlled — the toggle lives with the
+   * Whether item labels are shown. Controlled - the toggle lives with the
    * consumer (typically a menu button in the app bar).
    */
   isOpen: boolean;
-  /** Screen edge the rail hugs — labels render away from it. Default: `'left'`. */
+  /** Screen edge the rail hugs - labels render away from it. Default: `'left'`. */
   anchor?: SidebarAnchor;
-  /** Default variant for every item — an item's own `variant` wins. Default: `'text'`. */
+  /** Default variant for every item - an item's own `variant` wins. Default: `'text'`. */
   variant?: SidebarItemVariant;
-  /** Rail width while open. Default: `'14rem'`. */
+  /**
+   * Rail width while open. Default: `'14rem'`. In a `PageLayout` panel, with neither
+   * width set, the rail fills the panel's track instead.
+   */
   expandedWidth?: string;
   /** Rail width while collapsed (icons only). Default: `'3.5rem'`. */
   collapsedWidth?: string;
@@ -30,7 +33,7 @@ interface SidebarProps extends FlexProps {
   /** Width of the panel column. Only meaningful with `hasPanel`. Default: `'18rem'`. */
   panelWidth?: string;
   /**
-   * Props for the panel column — any `Flex` prop, plus `as` to change its
+   * Props for the panel column - any `Flex` prop, plus `as` to change its
    * element. Overrides `panelWidth` and the derived `aria-label`; its `id` and
    * ref stay owned by the rail, which needs them as the port target and the
    * `aria-controls` anchor.
@@ -38,18 +41,18 @@ interface SidebarProps extends FlexProps {
   panelProps?: Omit<FlexProps, 'children' | 'id'> & {
     as?: ElementType;
   };
-  /** Accessible name of the navigation landmark — required so multiple navs stay distinguishable. */
+  /** Accessible name of the navigation landmark - required so multiple navs stay distinguishable. */
   'aria-label': string;
 }
 /**
  * A collapsible vertical icon rail: collapsed it shows icon-only items; open
  * it also shows each item's label, rendered away from the anchored edge.
- * Purely controlled via `isOpen` — pair it with a menu button wherever your
+ * Purely controlled via `isOpen` - pair it with a menu button wherever your
  * layout keeps one (usually the app bar). Children consume the state through
- * `SidebarContext`, and any `Flex` prop (`bg`, spacing, …) applies to the rail.
+ * `SidebarContext`, and any `Flex` prop (`bg`, spacing, ...) applies to the rail.
  *
  * With `hasPanel`, the rail gains a second column and the selected item's
- * `children` render there instead of inside its row — an icon rail beside a
+ * `children` render there instead of inside its row - an icon rail beside a
  * detail panel. The panel appears only when the selected item has children, and
  * is independent of `isOpen`, so a collapsed icons-only rail can sit beside an
  * open panel.

package/dist/Sidebar/Sidebar.mjs

@@ -1,9 +1,12 @@
-import { o as styled } from "../src-D3tHU94W.mjs";
+import { o as styled } from "../src-DLGYOJMh.mjs";
 import { Flex } from "../Flex.mjs";
+import { t as PageLayoutContext } from "../PageLayoutContext-DjJ1_7Xc.mjs";
+import { n as layoutStyles, t as layoutLength } from "../layoutStyles-f0ISNjsC.mjs";
 import { t as SidebarContext } from "../SidebarContext-DgSLwjur.mjs";
-import { useId, useMemo, useState } from "react";
+import { useContext, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Sidebar/Sidebar/Sidebar.tsx
+const hideLabels = { "[data-sidebar-item-content] > :not(:first-child)": { display: "none" } };
 const SidebarRoot = styled(Flex, {
 	name: "Sidebar",
 	label: "Sidebar"
@@ -12,13 +15,21 @@ const SidebarRail = styled(Flex, {
 	name: "Sidebar",
 	slot: "rail",
 	label: "SidebarRail",
-	shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "expandedWidth" && prop !== "collapsedWidth"
-})(({ isOpen, expandedWidth, collapsedWidth }) => ({
+	shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "expandedWidth" && prop !== "collapsedWidth" && prop !== "panelSide"
+})(({ theme, isOpen, expandedWidth, collapsedWidth, panelSide }) => panelSide ? {
+	width: "100%",
+	overflowX: "hidden",
+	containerType: "inline-size",
+	...layoutStyles(theme, ({ panels }) => {
+		const width = panels[panelSide]?.width;
+		return width === void 0 ? {} : { [`@container (width < ${layoutLength(theme, width)})`]: hideLabels };
+	})
+} : {
 	width: isOpen ? expandedWidth : collapsedWidth,
 	transition: "width 200ms ease",
 	overflowX: "hidden",
 	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
-}));
+});
 const SidebarPanelRoot = styled(Flex, {
 	name: "Sidebar",
 	slot: "panel",
@@ -32,17 +43,20 @@ const SidebarPanelRoot = styled(Flex, {
 /**
 * A collapsible vertical icon rail: collapsed it shows icon-only items; open
 * it also shows each item's label, rendered away from the anchored edge.
-* Purely controlled via `isOpen` — pair it with a menu button wherever your
+* Purely controlled via `isOpen` - pair it with a menu button wherever your
 * layout keeps one (usually the app bar). Children consume the state through
-* `SidebarContext`, and any `Flex` prop (`bg`, spacing, …) applies to the rail.
+* `SidebarContext`, and any `Flex` prop (`bg`, spacing, ...) applies to the rail.
 *
 * With `hasPanel`, the rail gains a second column and the selected item's
-* `children` render there instead of inside its row — an icon rail beside a
+* `children` render there instead of inside its row - an icon rail beside a
 * detail panel. The panel appears only when the selected item has children, and
 * is independent of `isOpen`, so a collapsed icons-only rail can sit beside an
 * open panel.
 */
-function Sidebar({ children, isOpen, anchor = "left", variant = "text", expandedWidth = "14rem", collapsedWidth = "3.5rem", hasPanel = false, panelWidth = "18rem", panelProps, "aria-label": ariaLabel, ...rest }) {
+function Sidebar({ children, isOpen, anchor = "left", variant = "text", expandedWidth, collapsedWidth, hasPanel = false, panelWidth = "18rem", panelProps, "aria-label": ariaLabel, ...rest }) {
+	const region = useContext(PageLayoutContext);
+	const isSized = expandedWidth !== void 0 || collapsedWidth !== void 0;
+	const panelSide = region?.region === "panel" && !isSized ? region.side : void 0;
 	const panelId = useId();
 	const [panelNode, setPanelNode] = useState(null);
 	const [panelLabel, setPanelLabel] = useState(null);
@@ -67,14 +81,19 @@ function Sidebar({ children, isOpen, anchor = "left", variant = "text", expanded
 		"aria-label": ariaLabel,
 		flexDirection: anchor === "right" ? "row-reverse" : "row",
 		flexShrink: 0,
+		...panelSide && {
+			width: "100%",
+			height: "100%"
+		},
 		...rest,
 		children: [/* @__PURE__ */ jsx(SidebarRail, {
 			flexDirection: "column",
 			gap: 1,
 			flexShrink: 0,
 			isOpen,
-			expandedWidth,
-			collapsedWidth,
+			expandedWidth: expandedWidth ?? "14rem",
+			collapsedWidth: collapsedWidth ?? "3.5rem",
+			panelSide,
 			children: /* @__PURE__ */ jsx(SidebarContext.Provider, {
 				value: context,
 				children

package/dist/Sidebar/SidebarItem.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-BJrcLd7P.cjs");
+const require_src = require("../src-DU81aGy9.cjs");
 const require_Flex = require("../Flex.cjs");
 const require_utils = require("../utils.cjs");
 const require_Typography = require("../Typography.cjs");
-const require_Icon = require("../Icon-ByDvM-t1.cjs");
+const require_Icon = require("../Icon-CKLBJ7CC.cjs");
 const require_Portal = require("../Portal.cjs");
 const require_Pressable = require("../Pressable.cjs");
 const require_SidebarContext = require("../SidebarContext-jG6OioC-.cjs");
@@ -61,10 +61,10 @@ const SidebarItemRoot = require_src.styled(require_Pressable.Pressable, {
 })(densityStyles, layoutStyles, stateStyles);
 /**
 * One entry of a `Sidebar`: an icon pinned to the anchored edge, plus content
-* shown while the rail is open — the `label` by default, or custom `children`
+* shown while the rail is open - the `label` by default, or custom `children`
 * (on a right-anchored rail the content renders to the icon's left). Built on
 * `Pressable`, so it is a real button carrying nothing but the styling declared
-* here — no inherited uppercase, weight, or tracking.
+* here - no inherited uppercase, weight, or tracking.
 */
 function SidebarItem({ icon, label, variant, size = "sm", color = "primary", children, onSelect, onClick, isSelected, ...rest }) {
 	const { isOpen, anchor, variant: railVariant, hasPanel, panelId, panelNode, setPanelLabel } = (0, react.useContext)(require_SidebarContext.SidebarContext);
@@ -101,6 +101,7 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
 			as: "span",
+			"data-sidebar-item-content": "",
 			flexDirection: anchor === "right" ? "row-reverse" : "row",
 			alignItems: "center",
 			gap: 2,

package/dist/Sidebar/SidebarItem.d.cts

@@ -1,26 +1,26 @@
-import { h as Theme } from "../themes-CUV79qWU.cjs";
-import "../index-2QPYJgCl.cjs";
-import { r as IconName } from "../index-D_AwmCU5.cjs";
-import { i as PressableProps } from "../index-CSXMCqrV.cjs";
-import { i as SidebarItemVariant } from "../SidebarContext-ao6lRfTX.cjs";
+import { S as Theme } from "../themes-9YNnlVyY.cjs";
+import "../index-DkJzi96w.cjs";
+import { r as IconName } from "../index-DPHwCZYf.cjs";
+import { i as PressableProps } from "../index-CtrxW81j.cjs";
+import { i as SidebarItemVariant } from "../SidebarContext-B1lWrt77.cjs";
 import { ReactNode } from "react";
 //#region src/Sidebar/SidebarItem/SidebarItem.d.ts
-/** Density token — controls padding and font size. Resolves against `theme.sizes`. */
+/** Density token - controls padding and font size. Resolves against `theme.sizes`. */
 type SidebarItemSize = keyof Theme['sizes'];
 interface SidebarItemProps extends Omit<PressableProps, 'children' | 'feedback' | 'activeOpacity' | 'size'> {
-  /** Icon shown in both the collapsed and open states — pinned to the anchored edge. */
+  /** Icon shown in both the collapsed and open states - pinned to the anchored edge. */
   icon: IconName;
   /** Accessible name; also the default visible content while open. */
   label: string;
-  /** Visual style — overrides the enclosing `Sidebar`'s `variant` (default `'text'`). */
+  /** Visual style - overrides the enclosing `Sidebar`'s `variant` (default `'text'`). */
   variant?: SidebarItemVariant;
-  /** Padding and font size — resolves against `theme.sizes`. Default: `'sm'`. */
+  /** Padding and font size - resolves against `theme.sizes`. Default: `'sm'`. */
   size?: SidebarItemSize;
-  /** Active state — drives `aria-pressed` and the selected fill. */
+  /** Active state - drives `aria-pressed` and the selected fill. */
   isSelected?: boolean;
   /**
    * Custom open-state content rendered instead of the label text (badges,
-   * counts, …) — or, under the enclosing `Sidebar`'s `hasPanel`, the content of
+   * counts, ...) - or, under the enclosing `Sidebar`'s `hasPanel`, the content of
    * the panel column, shown while this item is selected.
    */
   children?: ReactNode;
@@ -29,10 +29,10 @@ interface SidebarItemProps extends Omit<PressableProps, 'children' | 'feedback'
 }
 /**
  * One entry of a `Sidebar`: an icon pinned to the anchored edge, plus content
- * shown while the rail is open — the `label` by default, or custom `children`
+ * shown while the rail is open - the `label` by default, or custom `children`
  * (on a right-anchored rail the content renders to the icon's left). Built on
  * `Pressable`, so it is a real button carrying nothing but the styling declared
- * here — no inherited uppercase, weight, or tracking.
+ * here - no inherited uppercase, weight, or tracking.
  */
 declare function SidebarItem({ icon, label, variant, size, color, children, onSelect, onClick, isSelected, ...rest }: Readonly<SidebarItemProps>): import("react").JSX.Element;
 //#endregion

package/dist/Sidebar/SidebarItem.d.mts

@@ -1,26 +1,26 @@
-import { h as Theme } from "../themes-CUV79qWU.mjs";
-import "../index-q9peil7T.mjs";
-import { r as IconName } from "../index-B0xTqpvt.mjs";
-import { i as PressableProps } from "../index-CrXLEJO4.mjs";
-import { i as SidebarItemVariant } from "../SidebarContext-ao6lRfTX.mjs";
+import { S as Theme } from "../themes-9YNnlVyY.mjs";
+import "../index-CEqa8xx8.mjs";
+import { r as IconName } from "../index-r2avCy1z.mjs";
+import { i as PressableProps } from "../index-8mHoIUt5.mjs";
+import { i as SidebarItemVariant } from "../SidebarContext-B1lWrt77.mjs";
 import { ReactNode } from "react";
 //#region src/Sidebar/SidebarItem/SidebarItem.d.ts
-/** Density token — controls padding and font size. Resolves against `theme.sizes`. */
+/** Density token - controls padding and font size. Resolves against `theme.sizes`. */
 type SidebarItemSize = keyof Theme['sizes'];
 interface SidebarItemProps extends Omit<PressableProps, 'children' | 'feedback' | 'activeOpacity' | 'size'> {
-  /** Icon shown in both the collapsed and open states — pinned to the anchored edge. */
+  /** Icon shown in both the collapsed and open states - pinned to the anchored edge. */
   icon: IconName;
   /** Accessible name; also the default visible content while open. */
   label: string;
-  /** Visual style — overrides the enclosing `Sidebar`'s `variant` (default `'text'`). */
+  /** Visual style - overrides the enclosing `Sidebar`'s `variant` (default `'text'`). */
   variant?: SidebarItemVariant;
-  /** Padding and font size — resolves against `theme.sizes`. Default: `'sm'`. */
+  /** Padding and font size - resolves against `theme.sizes`. Default: `'sm'`. */
   size?: SidebarItemSize;
-  /** Active state — drives `aria-pressed` and the selected fill. */
+  /** Active state - drives `aria-pressed` and the selected fill. */
   isSelected?: boolean;
   /**
    * Custom open-state content rendered instead of the label text (badges,
-   * counts, …) — or, under the enclosing `Sidebar`'s `hasPanel`, the content of
+   * counts, ...) - or, under the enclosing `Sidebar`'s `hasPanel`, the content of
    * the panel column, shown while this item is selected.
    */
   children?: ReactNode;
@@ -29,10 +29,10 @@ interface SidebarItemProps extends Omit<PressableProps, 'children' | 'feedback'
 }
 /**
  * One entry of a `Sidebar`: an icon pinned to the anchored edge, plus content
- * shown while the rail is open — the `label` by default, or custom `children`
+ * shown while the rail is open - the `label` by default, or custom `children`
  * (on a right-anchored rail the content renders to the icon's left). Built on
  * `Pressable`, so it is a real button carrying nothing but the styling declared
- * here — no inherited uppercase, weight, or tracking.
+ * here - no inherited uppercase, weight, or tracking.
  */
 declare function SidebarItem({ icon, label, variant, size, color, children, onSelect, onClick, isSelected, ...rest }: Readonly<SidebarItemProps>): import("react").JSX.Element;
 //#endregion

package/dist/Sidebar/SidebarItem.mjs

@@ -1,8 +1,8 @@
-import { a as src_exports, o as styled } from "../src-D3tHU94W.mjs";
+import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
 import { Flex } from "../Flex.mjs";
 import { alpha } from "../utils.mjs";
 import { Typography } from "../Typography.mjs";
-import { t as Icon } from "../Icon-CU_nUmsU.mjs";
+import { t as Icon } from "../Icon-CkQGOBmm.mjs";
 import { Portal } from "../Portal.mjs";
 import { Pressable } from "../Pressable.mjs";
 import { t as SidebarContext } from "../SidebarContext-DgSLwjur.mjs";
@@ -60,10 +60,10 @@ const SidebarItemRoot = styled(Pressable, {
 })(densityStyles, layoutStyles, stateStyles);
 /**
 * One entry of a `Sidebar`: an icon pinned to the anchored edge, plus content
-* shown while the rail is open — the `label` by default, or custom `children`
+* shown while the rail is open - the `label` by default, or custom `children`
 * (on a right-anchored rail the content renders to the icon's left). Built on
 * `Pressable`, so it is a real button carrying nothing but the styling declared
-* here — no inherited uppercase, weight, or tracking.
+* here - no inherited uppercase, weight, or tracking.
 */
 function SidebarItem({ icon, label, variant, size = "sm", color = "primary", children, onSelect, onClick, isSelected, ...rest }) {
 	const { isOpen, anchor, variant: railVariant, hasPanel, panelId, panelNode, setPanelLabel } = useContext(SidebarContext);
@@ -100,6 +100,7 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		...rest,
 		children: /* @__PURE__ */ jsxs(Flex, {
 			as: "span",
+			"data-sidebar-item-content": "",
 			flexDirection: anchor === "right" ? "row-reverse" : "row",
 			alignItems: "center",
 			gap: 2,

package/dist/Sidebar.d.cts

@@ -1,4 +1,4 @@
-import { i as SidebarItemVariant, n as SidebarContext, r as SidebarContextValue, t as SidebarAnchor } from "./SidebarContext-ao6lRfTX.cjs";
+import { i as SidebarItemVariant, n as SidebarContext, r as SidebarContextValue, t as SidebarAnchor } from "./SidebarContext-B1lWrt77.cjs";
 import { Sidebar, SidebarProps } from "./Sidebar/Sidebar.cjs";
 import { SidebarItem, SidebarItemProps, SidebarItemSize } from "./Sidebar/SidebarItem.cjs";
 export { Sidebar, SidebarAnchor, SidebarContext, SidebarContextValue, SidebarItem, SidebarItemProps, SidebarItemSize, SidebarItemVariant, SidebarProps };

package/dist/Sidebar.d.mts

@@ -1,4 +1,4 @@
-import { i as SidebarItemVariant, n as SidebarContext, r as SidebarContextValue, t as SidebarAnchor } from "./SidebarContext-ao6lRfTX.mjs";
+import { i as SidebarItemVariant, n as SidebarContext, r as SidebarContextValue, t as SidebarAnchor } from "./SidebarContext-B1lWrt77.mjs";
 import { Sidebar, SidebarProps } from "./Sidebar/Sidebar.mjs";
 import { SidebarItem, SidebarItemProps, SidebarItemSize } from "./Sidebar/SidebarItem.mjs";
 export { Sidebar, SidebarAnchor, SidebarContext, SidebarContextValue, SidebarItem, SidebarItemProps, SidebarItemSize, SidebarItemVariant, SidebarProps };

package/dist/{SidebarContext-ao6lRfTX.d.cts → SidebarContext-B1lWrt77.d.cts}

@@ -1,9 +1,9 @@
 //#region src/Sidebar/SidebarContext.d.ts
-/** Screen edge a `Sidebar` hugs — item labels render away from that edge. */
+/** Screen edge a `Sidebar` hugs - item labels render away from that edge. */
 type SidebarAnchor = 'left' | 'right';
 /**
  * Visual style of a `SidebarItem`: borderless (`text`, default), `outlined`, or
- * `plain` — no fill and no hover or press feedback, so selection reads through
+ * `plain` - no fill and no hover or press feedback, so selection reads through
  * the text color alone.
  */
 type SidebarItemVariant = 'outlined' | 'text' | 'plain';
@@ -11,7 +11,7 @@ type SidebarItemVariant = 'outlined' | 'text' | 'plain';
  * State provided by `Sidebar` and consumed by `SidebarItem`: whether labels
  * are shown, which side the rail hugs (decides the label side), the rail-wide
  * default item variant (an item's own `variant` wins), and whether the rail
- * renders a panel column — which decides where an item's `children` go.
+ * renders a panel column - which decides where an item's `children` go.
  */
 interface SidebarContextValue {
   isOpen: boolean;
@@ -22,7 +22,7 @@ interface SidebarContextValue {
   /** `id` of the panel element, so the selected item can point `aria-controls` at it. */
   panelId?: string;
   /**
-   * The panel's DOM node — the container the selected item ports its `children`
+   * The panel's DOM node - the container the selected item ports its `children`
    * into. `null` until the panel has mounted, and whenever `hasPanel` is off.
    */
   panelNode?: HTMLElement | null;

package/dist/{SidebarContext-ao6lRfTX.d.mts → SidebarContext-B1lWrt77.d.mts}

@@ -1,9 +1,9 @@
 //#region src/Sidebar/SidebarContext.d.ts
-/** Screen edge a `Sidebar` hugs — item labels render away from that edge. */
+/** Screen edge a `Sidebar` hugs - item labels render away from that edge. */
 type SidebarAnchor = 'left' | 'right';
 /**
  * Visual style of a `SidebarItem`: borderless (`text`, default), `outlined`, or
- * `plain` — no fill and no hover or press feedback, so selection reads through
+ * `plain` - no fill and no hover or press feedback, so selection reads through
  * the text color alone.
  */
 type SidebarItemVariant = 'outlined' | 'text' | 'plain';
@@ -11,7 +11,7 @@ type SidebarItemVariant = 'outlined' | 'text' | 'plain';
  * State provided by `Sidebar` and consumed by `SidebarItem`: whether labels
  * are shown, which side the rail hugs (decides the label side), the rail-wide
  * default item variant (an item's own `variant` wins), and whether the rail
- * renders a panel column — which decides where an item's `children` go.
+ * renders a panel column - which decides where an item's `children` go.
  */
 interface SidebarContextValue {
   isOpen: boolean;
@@ -22,7 +22,7 @@ interface SidebarContextValue {
   /** `id` of the panel element, so the selected item can point `aria-controls` at it. */
   panelId?: string;
   /**
-   * The panel's DOM node — the container the selected item ports its `children`
+   * The panel's DOM node - the container the selected item ports its `children`
    * into. `null` until the panel has mounted, and whenever `hasPanel` is off.
    */
   panelNode?: HTMLElement | null;

package/dist/Skeleton.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BJrcLd7P.cjs");
+const require_src = require("./src-DU81aGy9.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");

package/dist/Skeleton.d.cts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { HTMLAttributes } from "react";
 import { PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Skeleton/Skeleton.d.ts
@@ -9,7 +9,7 @@ type SkeletonRadius = keyof Theme['radii'];
 interface SkeletonProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps<Theme>, keyof PaddingProps> {
   /** Shape of the placeholder. Default: `'text'`. */
   variant?: SkeletonVariant;
-  /** Corner radius — resolves against `theme.radii` (sq · sm · md · lg). Overrides the variant default. */
+  /** Corner radius - resolves against `theme.radii` (sq · sm · md · lg). Overrides the variant default. */
   borderRadius?: SkeletonRadius;
   /** Loading animation. `false` disables it. Default: `'pulse'`. */
   animation?: SkeletonAnimation;

package/dist/Skeleton.d.mts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/Skeleton/Skeleton.d.ts
@@ -9,7 +9,7 @@ type SkeletonRadius = keyof Theme['radii'];
 interface SkeletonProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps<Theme>, keyof PaddingProps> {
   /** Shape of the placeholder. Default: `'text'`. */
   variant?: SkeletonVariant;
-  /** Corner radius — resolves against `theme.radii` (sq · sm · md · lg). Overrides the variant default. */
+  /** Corner radius - resolves against `theme.radii` (sq · sm · md · lg). Overrides the variant default. */
   borderRadius?: SkeletonRadius;
   /** Loading animation. `false` disables it. Default: `'pulse'`. */
   animation?: SkeletonAnimation;

package/dist/Skeleton.mjs

@@ -1,4 +1,4 @@
-import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Skeleton/Skeleton.tsx

package/dist/Switch.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BJrcLd7P.cjs");
+const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-CleLAV6A.cjs");
+const require_theme = require("./theme-BmEAXmwh.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");

package/dist/Switch.d.cts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { ChangeEvent, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Switch/Switch.d.ts
@@ -11,7 +11,7 @@ interface SwitchProps extends SpaceProps<Theme> {
   checked?: boolean;
   defaultChecked?: boolean;
   disabled?: boolean;
-  /** Accepted for API parity — the design system does not implement ripple. */
+  /** Accepted for API parity - the design system does not implement ripple. */
   disableRipple?: boolean;
   color?: SwitchColor;
   size?: SwitchSize;
@@ -19,8 +19,8 @@ interface SwitchProps extends SpaceProps<Theme> {
   bg?: keyof Theme['background'];
   /**
    * Shows ✓/✕ indicators.
-   * - `"outside"` — marks appear as SVG icons inside the thumb.
-   * - `"inside"` — marks appear as CSS pseudo-elements in the track.
+   * - `"outside"` - marks appear as SVG icons inside the thumb.
+   * - `"inside"` - marks appear as CSS pseudo-elements in the track.
    * Custom `icon`/`checkedIcon` override the defaults when `marked` is true.
    */
   marked?: boolean;

package/dist/Switch.d.mts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/Switch/Switch.d.ts
@@ -11,7 +11,7 @@ interface SwitchProps extends SpaceProps<Theme> {
   checked?: boolean;
   defaultChecked?: boolean;
   disabled?: boolean;
-  /** Accepted for API parity — the design system does not implement ripple. */
+  /** Accepted for API parity - the design system does not implement ripple. */
   disableRipple?: boolean;
   color?: SwitchColor;
   size?: SwitchSize;
@@ -19,8 +19,8 @@ interface SwitchProps extends SpaceProps<Theme> {
   bg?: keyof Theme['background'];
   /**
    * Shows ✓/✕ indicators.
-   * - `"outside"` — marks appear as SVG icons inside the thumb.
-   * - `"inside"` — marks appear as CSS pseudo-elements in the track.
+   * - `"outside"` - marks appear as SVG icons inside the thumb.
+   * - `"inside"` - marks appear as CSS pseudo-elements in the track.
    * Custom `icon`/`checkedIcon` override the defaults when `marked` is true.
    */
   marked?: boolean;

package/dist/Switch.mjs

@@ -1,7 +1,7 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+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 { alpha } from "./utils.mjs";
-import { r as useTheme } from "./theme-Cudynq5K.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Switch/Switch.tsx

package/dist/Table/Table.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-BJrcLd7P.cjs");
+const require_src = require("../src-DU81aGy9.cjs");
 const require_TableContext = require("../TableContext-Bfg1C3Sr.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Table/Table.d.cts

@@ -1,48 +1,48 @@
-import { d as PaletteColor, h as Theme } from "../themes-CUV79qWU.cjs";
-import "../index-2QPYJgCl.cjs";
-import { t as TableCellPadding } from "../TableContext-BoOxdk8p.cjs";
+import { S as Theme, v as PaletteColor } from "../themes-9YNnlVyY.cjs";
+import "../index-DkJzi96w.cjs";
+import { t as TableCellPadding } from "../TableContext-DRAhXvq3.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. */
+/** 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. */
+/** Valid values for the size prop - derived from theme.sizes keys. */
 type TableSize = keyof Theme['sizes'];
-/** Valid values for the borderColor prop — derived from theme.border keys. */
+/** Valid values for the borderColor prop - derived from theme.border keys. */
 type TableBorderColorToken = keyof Theme['border'];
 interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'color' | 'cellPadding' | 'align' | 'width' | 'border'>, SpaceProps<Theme>, LayoutProps<Theme>, Omit<BorderProps<Theme>, 'borderColor'> {
   /**
-   * Palette color for descendant rows' hover/selected shading — broadcast to
+   * Palette color for descendant rows' hover/selected shading - broadcast to
    * `TableRow`s via `TableContext`; a row's own `color` wins.
    */
   color?: PaletteColor;
   /** Resolves against theme.background */
   bg?: TableBackgroundToken;
-  /** Resolves against theme.border — light · primary · dark */
+  /** Resolves against theme.border - light · primary · dark */
   borderColor?: TableBorderColorToken;
-  /** Cell density — broadcast to descendant `TableCell`s via `TableContext`. Default: 'md', overridable via `theme.defaults.size`. */
+  /** Cell density - broadcast to descendant `TableCell`s via `TableContext`. Default: 'md', overridable via `theme.defaults.size`. */
   size?: TableSize;
-  /** Cell padding mode — broadcast to descendant `TableCell`s. `'none'` zeroes cell padding. Default: `'normal'`. */
+  /** Cell padding mode - broadcast to descendant `TableCell`s. `'none'` zeroes cell padding. Default: `'normal'`. */
   cellPadding?: TableCellPadding;
   /** Makes header cells stick to the top of a scrolling `TableContainer`. Default: `false`. */
   hasStickyHeader?: boolean;
   /**
-   * Hides inactive sort icons (revealed on hover/focus) — broadcast to
+   * Hides inactive sort icons (revealed on hover/focus) - broadcast to
    * descendant `TableSortLabel`s via `TableContext`. Set `false` to keep them
    * always visible (dimmed). Default: `true`.
    */
   shouldHideSortIcon?: boolean;
   /**
-   * Truncates overflowing cell text with an ellipsis — broadcast to descendant
+   * Truncates overflowing cell text with an ellipsis - broadcast to descendant
    * `TableCell`s via `TableContext`. Cells need a constrained width (e.g.
    * `maxWidth`) for the truncation to kick in. Default: `false`.
    */
   hasEllipsis?: boolean;
-  /** Default text alignment for every cell — cells with `align="inherit"` (the default) follow it. */
+  /** Default text alignment for every cell - cells with `align="inherit"` (the default) follow it. */
   align?: TableAlign;
   as?: ElementType;
 }
-/** Table-wide text alignment — inherited by head, body, and footer cells alike. */
+/** 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