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

package/dist/ToggleButton.d.mts

@@ -1,4 +1,4 @@
-import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CqD-Afho.mjs";
+import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-10jEsQdg.mjs";
 import { ToggleButton, ToggleButtonProps } from "./ToggleButton/ToggleButton.mjs";
 import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.mjs";
 export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext, ToggleButtonGroupContextValue, ToggleButtonGroupProps, ToggleButtonProps, ToggleButtonValue };

package/dist/{ToggleButtonGroupContext-CqD-Afho.d.cts → ToggleButtonGroupContext-10jEsQdg.d.cts}

@@ -5,9 +5,9 @@ type ToggleButtonValue = string | number;
  * Visual config (color / size / disabled / fullWidth) travels via `ButtonGroupContext`.
  */
 interface ToggleButtonGroupContextValue {
-  /** Selected value(s) — single when exclusive, array otherwise. */
+  /** Selected value(s) - single when exclusive, array otherwise. */
   value?: ToggleButtonValue | ToggleButtonValue[] | null;
-  /** Fired with the clicked button's value — the group resolves the next selection. */
+  /** Fired with the clicked button's value - the group resolves the next selection. */
   onToggle?: (value: ToggleButtonValue) => void;
 }
 declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue>;

package/dist/{ToggleButtonGroupContext-CqD-Afho.d.mts → ToggleButtonGroupContext-10jEsQdg.d.mts}

@@ -5,9 +5,9 @@ type ToggleButtonValue = string | number;
  * Visual config (color / size / disabled / fullWidth) travels via `ButtonGroupContext`.
  */
 interface ToggleButtonGroupContextValue {
-  /** Selected value(s) — single when exclusive, array otherwise. */
+  /** Selected value(s) - single when exclusive, array otherwise. */
   value?: ToggleButtonValue | ToggleButtonValue[] | null;
-  /** Fired with the clicked button's value — the group resolves the next selection. */
+  /** Fired with the clicked button's value - the group resolves the next selection. */
   onToggle?: (value: ToggleButtonValue) => void;
 }
 declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue>;

package/dist/Typography.cjs

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

@@ -1,3 +1,3 @@
-import { L as TypographyVariant } from "./themes-CUV79qWU.cjs";
-import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-CohsoGjZ.cjs";
+import { K as TypographyVariant } from "./themes-9YNnlVyY.cjs";
+import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-bN91IhZi.cjs";
 export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/Typography.d.mts

@@ -1,3 +1,3 @@
-import { L as TypographyVariant } from "./themes-CUV79qWU.mjs";
-import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-DxBKLmUS.mjs";
+import { K as TypographyVariant } from "./themes-9YNnlVyY.mjs";
+import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-DuefjNlC.mjs";
 export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/Typography.mjs

@@ -1,5 +1,5 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
-import { r as useTheme } from "./theme-Cudynq5K.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Typography/Typography.tsx

package/dist/View.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 _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 //#region src/View/View.tsx

package/dist/View.d.cts

@@ -1,2 +1,2 @@
-import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-BPzvFTi5.cjs";
+import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-CvWslVk6.cjs";
 export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/View.d.mts

@@ -1,2 +1,2 @@
-import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-m9jUR509.mjs";
+import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-tv-TGYSG.mjs";
 export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/View.mjs

@@ -1,4 +1,4 @@
-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 "react";
 //#region src/View/View.tsx
 const shouldForwardProp = createShouldForwardProp([

package/dist/engine.cjs

@@ -9,9 +9,9 @@ var styleCache_default = (0, _emotion_cache.default)({ key: "soroush" });
 //#endregion
 //#region src/engine/globalStyles.ts
 /**
-* The base reset this package owns — box-sizing, margin/table resets, and
+* The base reset this package owns - box-sizing, margin/table resets, and
 * theme-driven body colors. Font-family, webfont loading, and anything else
-* app-specific are app policy — compose this into your own `Global` styles array.
+* app-specific are app policy - compose this into your own `Global` styles array.
 */
 const globalStyles = (theme) => _emotion_react.css`
   *,

package/dist/engine.d.cts

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
 import { CacheProvider, Interpolation } from "@emotion/react";
 import { ComponentType, RefAttributes } from "react";
 //#region src/theme/emotion.d.ts
@@ -12,9 +12,9 @@ declare const _default: import("@emotion/cache").EmotionCache;
 //#endregion
 //#region src/engine/globalStyles.d.ts
 /**
- * The base reset this package owns — box-sizing, margin/table resets, and
+ * The base reset this package owns - box-sizing, margin/table resets, and
  * theme-driven body colors. Font-family, webfont loading, and anything else
- * app-specific are app policy — compose this into your own `Global` styles array.
+ * app-specific are app policy - compose this into your own `Global` styles array.
  */
 declare const globalStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
 //#endregion

package/dist/engine.d.mts

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
 import { CacheProvider, Interpolation } from "@emotion/react";
 import { ComponentType, RefAttributes } from "react";
 //#region src/theme/emotion.d.ts
@@ -12,9 +12,9 @@ declare const _default: import("@emotion/cache").EmotionCache;
 //#endregion
 //#region src/engine/globalStyles.d.ts
 /**
- * The base reset this package owns — box-sizing, margin/table resets, and
+ * The base reset this package owns - box-sizing, margin/table resets, and
  * theme-driven body colors. Font-family, webfont loading, and anything else
- * app-specific are app policy — compose this into your own `Global` styles array.
+ * app-specific are app policy - compose this into your own `Global` styles array.
  */
 declare const globalStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
 //#endregion

package/dist/engine.mjs

@@ -6,9 +6,9 @@ var styleCache_default = createCache({ key: "soroush" });
 //#endregion
 //#region src/engine/globalStyles.ts
 /**
-* The base reset this package owns — box-sizing, margin/table resets, and
+* The base reset this package owns - box-sizing, margin/table resets, and
 * theme-driven body colors. Font-family, webfont loading, and anything else
-* app-specific are app policy — compose this into your own `Global` styles array.
+* app-specific are app policy - compose this into your own `Global` styles array.
 */
 const globalStyles = (theme) => css`
   *,

package/dist/{index-CrXLEJO4.d.mts → index-8mHoIUt5.d.mts}

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
+import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes, ElementType } from "react";
 //#region src/Pressable/Pressable.d.ts
@@ -11,7 +11,7 @@ type PressableFeedback = 'none' | 'opacity' | 'highlight';
 type PressableColor = PaletteColor;
 interface PressableProps extends Omit<ButtonHTMLAttributes<HTMLElement>, 'color'>, SpaceProps<Theme>, LayoutProps<Theme>, BorderProps<Theme>, TypographyProps<Theme> {
   /**
-   * Element to render. Default: `'div'` — which still behaves as a button
+   * Element to render. Default: `'div'` - which still behaves as a button
    * (`role`, tab stop, Enter/Space) because a `<button>` may not legally contain
    * links, buttons, or block-level content. Pass `'button'` for a native button
    * when the content is phrasing-only, or any other tag you need.
@@ -19,25 +19,25 @@ interface PressableProps extends Omit<ButtonHTMLAttributes<HTMLElement>, 'color'
   as?: ElementType;
   /** Feedback shown while pressed. Default: `'none'`, overridable via `theme.components.Pressable.defaultProps`. */
   feedback?: PressableFeedback;
-  /** Palette the `highlight` tint derives from — maps to `theme.palette[color]`. Default: `'primary'`, overridable via `theme.defaults.color`. */
+  /** Palette the `highlight` tint derives from - maps to `theme.palette[color]`. Default: `'primary'`, overridable via `theme.defaults.color`. */
   color?: PressableColor;
   /** Opacity held content fades to under `feedback="opacity"`. Default: `0.7`. */
   activeOpacity?: number;
   /** The URL to link to. If defined and `as` is unset, an `a` element is used. */
   href?: string;
-  /** Anchor `target` — only meaningful when `href` is set. */
+  /** Anchor `target` - only meaningful when `href` is set. */
   target?: string;
-  /** Anchor `rel` — only meaningful when `href` is set. */
+  /** Anchor `rel` - only meaningful when `href` is set. */
   rel?: string;
 }
 /**
- * An unstyled clickable surface — button semantics (keyboard activation, focus
+ * An unstyled clickable surface - button semantics (keyboard activation, focus
  * ring, disabled state) with none of a button's looks, so it can wrap arbitrary
  * content without changing its layout. Use it instead of an `onClick` on a
  * `div`, which no keyboard or screen-reader user can reach.
  *
  * It renders a `div` by default, because `<button>` may not legally contain a
- * link, another button, or block-level content — the shim gives that div a
+ * link, another button, or block-level content - the shim gives that div a
  * `role`, a tab stop, and Enter/Space activation, so it is announced and
  * operated as a button either way. Pass `as="button"` for a native button, or
  * `href` for an anchor; both skip the shim and let the browser do the work.

package/dist/{index-DLUE7t3O.d.cts → index-B41OXLX8.d.mts}

@@ -1,9 +1,9 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { s as ViewProps } from "./index-BPzvFTi5.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { s as ViewProps } from "./index-tv-TGYSG.mjs";
 import { FlexboxProps } from "@soroush.tech/styled-system";
 //#region src/Flex/Flex.d.ts
-/** Valid values for the gap prop — derived from theme.space keys. */
+/** Valid values for the gap prop - derived from theme.space keys. */
 type GapToken = keyof Theme['space'];
 interface FlexProps extends ViewProps, FlexboxProps<Theme> {}
 declare const Flex: import("@emotion/styled").StyledComponent<{

package/dist/{index-X4STXeE2.d.cts → index-B6vxRNLt.d.cts}

@@ -1,43 +1,43 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { t as TableCellPadding } from "./TableContext-BoOxdk8p.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { t as TableCellPadding } from "./TableContext-DRAhXvq3.cjs";
 import { ElementType, ThHTMLAttributes } from "react";
 import { BorderProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Table/TableSectionContext.d.ts
-/** The table section a cell lives in — drives `TableCell`'s th/td element resolution. */
+/** The table section a cell lives in - drives `TableCell`'s th/td element resolution. */
 type TableSection = 'head' | 'body' | 'footer';
 declare const TableSectionContext: import("react").Context<TableSection | undefined>;
 //#endregion
 //#region src/Table/TableCell/TableCell.d.ts
-/** Cell type — inherited from the enclosing section, overridable per cell. */
+/** Cell type - inherited from the enclosing section, overridable per cell. */
 type TableCellVariant = TableSection;
 type TableCellAlign = 'left' | 'right' | 'center' | 'justify' | 'inherit';
 type TableCellSortDirection = 'asc' | 'desc';
-/** Valid values for the color prop — derived from theme.text keys. */
+/** Valid values for the color prop - derived from theme.text keys. */
 type TableCellColorToken = keyof Theme['text'];
-/** Valid values for the bg prop — derived from theme.background keys. */
+/** Valid values for the bg prop - derived from theme.background keys. */
 type TableCellBackgroundToken = keyof Theme['background'];
-/** Valid values for the borderColor prop — derived from theme.border keys. */
+/** Valid values for the borderColor prop - derived from theme.border keys. */
 type TableCellBorderColorToken = keyof Theme['border'];
 interface TableCellProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'color' | 'align'>, SpaceProps<Theme>, TypographyProps<Theme>, Omit<BorderProps<Theme>, 'borderColor' | 'borderRadius'> {
   /** Resolves against theme.text */
   color?: TableCellColorToken;
   /** Resolves against theme.background */
   bg?: TableCellBackgroundToken;
-  /** Resolves against theme.border — light · primary · dark */
+  /** Resolves against theme.border - light · primary · dark */
   borderColor?: TableCellBorderColorToken;
-  /** Cell type — overrides the enclosing `TableHead`/`TableBody`/`TableFooter` section. */
+  /** Cell type - overrides the enclosing `TableHead`/`TableBody`/`TableFooter` section. */
   variant?: TableCellVariant;
   /** Text alignment of the cell content. Numbers should be right-aligned. Default: `'inherit'`. */
   align?: TableCellAlign;
-  /** Cell density — overrides the `Table`'s `size`. Resolves against `theme.sizes`. */
+  /** Cell density - overrides the `Table`'s `size`. Resolves against `theme.sizes`. */
   size?: keyof Theme['sizes'];
-  /** Cell padding mode — overrides the `Table`'s `cellPadding`. `'none'` zeroes padding. */
+  /** Cell padding mode - overrides the `Table`'s `cellPadding`. `'none'` zeroes padding. */
   cellPadding?: TableCellPadding;
-  /** Sets `aria-sort` on the cell — a11y only, pair with `TableSortLabel` for the control. */
+  /** Sets `aria-sort` on the cell - a11y only, pair with `TableSortLabel` for the control. */
   sortDirection?: TableCellSortDirection;
   /**
-   * Truncates overflowing text with an ellipsis — inherits the `Table`'s
+   * Truncates overflowing text with an ellipsis - inherits the `Table`'s
    * `hasEllipsis`. Needs a constrained width (e.g. `maxWidth`) to kick in.
    */
   hasEllipsis?: boolean;

package/dist/{index-BBWtMvkm.d.cts → index-B8KscJic.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 { KeyboardEvent, MouseEvent, ReactNode, Ref, RefCallback, SyntheticEvent } from "react";
 //#region src/Modal/useModal.d.ts
 type ModalCloseReason = 'escapeKey' | 'backdropClick';
@@ -46,7 +46,7 @@ interface ModalProps {
   portalContainer?: HTMLElement | (() => HTMLElement | null) | null;
   /** Lock body scroll while open. Default: true. */
   shouldLockScroll?: boolean;
-  /** Skip `aria-hidden` on background content — for non-modal popovers whose trigger stays focused. Default: false. */
+  /** Skip `aria-hidden` on background content - for non-modal popovers whose trigger stays focused. Default: false. */
   disableAriaHidden?: boolean;
   /** Move focus into the modal on open. Default: true. */
   shouldAutoFocus?: boolean;

package/dist/{index-MsUtFRul.d.cts → index-BDD-L8uL.d.cts}

@@ -1,10 +1,10 @@
-import { b as ThemeComponents, h as Theme, x as ThemeDefaults } from "./themes-CUV79qWU.cjs";
+import { O as ThemeComponents, S as Theme, k as ThemeDefaults } from "./themes-9YNnlVyY.cjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/theme/ThemeProvider.d.ts
 interface ThemeProviderProps {
   children: ReactNode;
   /**
-   * The active theme. Bring one theme, or as many as you like — switching
+   * The active theme. Bring one theme, or as many as you like - switching
    * between them is your state, not the provider's. Defaults to the built-in
    * `baseTheme`.
    */
@@ -29,7 +29,7 @@ declare const themeDefault: <K extends keyof ThemeDefaults>(theme: Theme, key: K
 //#endregion
 //#region src/theme/hooks/useTheme.d.ts
 /**
- * The active theme, typed as this package's own `Theme` — Emotion is an
+ * The active theme, typed as this package's own `Theme` - Emotion is an
  * internal implementation detail, never part of the public type surface.
  */
 declare const useTheme: () => Theme;

package/dist/{index-BW-9sqFG.d.cts → index-BGD4OzzG.d.cts}

@@ -1,17 +1,17 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { n as FlexProps } from "./index-DLUE7t3O.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as FlexProps } from "./index-BMJ3tyIw.cjs";
 import { CSSProperties, ElementType } from "react";
 //#region src/Paper/Paper.d.ts
 type PaperElevation = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 interface PaperProps extends FlexProps {
-  /** Shadow depth — 0 (flat) to 24 (highest). Resolves to theme.shadows[n]. Default: 1. */
+  /** Shadow depth - 0 (flat) to 24 (highest). Resolves to theme.shadows[n]. Default: 1. */
   elevation?: PaperElevation;
   /** CSS transition for surface animations (e.g. hover elevation change). */
   transition?: CSSProperties['transition'];
-  /** Resolves against theme.border — light · primary · dark */
+  /** Resolves against theme.border - light · primary · dark */
   borderColor?: keyof Theme['border'];
-  /** Resolves against theme.borderWidths — none · thin · base · thick */
+  /** Resolves against theme.borderWidths - none · thin · base · thick */
   borderWidth?: keyof Theme['borderWidths'];
   /** CSS border-style value (e.g. 'solid', 'dashed'). */
   borderStyle?: CSSProperties['borderStyle'];

package/dist/index-BJ5Tsf7u.d.cts

@@ -0,0 +1,16 @@
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { s as ViewProps } from "./index-CvWslVk6.cjs";
+import { FlexboxProps, GridProps } from "@soroush.tech/styled-system";
+//#region src/Grid/Grid.d.ts
+/** Valid values for the gap / columnGap / rowGap props - derived from theme.space keys. */
+type GapToken = keyof Theme['space'];
+interface GridProps$1 extends ViewProps, GridProps<Theme>, FlexboxProps<Theme> {}
+declare const Grid: import("@emotion/styled").StyledComponent<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+} & GridProps$1, {}, {}>;
+//#endregion
+export { Grid as n, GridProps$1 as r, GapToken as t };

package/dist/{index-n2OyTMr6.d.mts → index-BMJ3tyIw.d.cts}

@@ -1,9 +1,9 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { s as ViewProps } from "./index-m9jUR509.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { s as ViewProps } from "./index-CvWslVk6.cjs";
 import { FlexboxProps } from "@soroush.tech/styled-system";
 //#region src/Flex/Flex.d.ts
-/** Valid values for the gap prop — derived from theme.space keys. */
+/** Valid values for the gap prop - derived from theme.space keys. */
 type GapToken = keyof Theme['space'];
 interface FlexProps extends ViewProps, FlexboxProps<Theme> {}
 declare const Flex: import("@emotion/styled").StyledComponent<{

package/dist/{index-CbGfrKZi.d.mts → index-BNpkmtaM.d.mts}

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-BAfSyQaP.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-D4i9vrQM.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ElementType, HTMLAttributes } from "react";
 //#region src/ButtonGroup/ButtonGroup.d.ts
@@ -9,13 +9,13 @@ type ButtonGroupRadius = keyof Theme['radii'];
 interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, SpaceProps<Theme> {
   /** Visual style for all child buttons. Default: `'outlined'`. */
   variant?: ButtonVariant;
-  /** Color palette for all child buttons — resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Color palette for all child buttons - resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: ButtonColor;
-  /** Density for all child buttons — resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
+  /** Density for all child buttons - resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
   size?: ButtonSize;
   /** Layout flow direction. Default: `'horizontal'`. */
   orientation?: ButtonGroupOrientation;
-  /** Group corner radius — rounds the group's outer corners only. Resolves against `theme.radii`. Default: 'md', overridable via `theme.defaults.borderRadius`. */
+  /** Group corner radius - rounds the group's outer corners only. Resolves against `theme.radii`. Default: 'md', overridable via `theme.defaults.borderRadius`. */
   borderRadius?: ButtonGroupRadius;
   /** Disables all child buttons. Default: `false`. */
   disabled?: boolean;

package/dist/{index-CKz1lEdR.d.mts → index-BSR9zrAA.d.mts}

@@ -1,17 +1,17 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { n as FlexProps } from "./index-n2OyTMr6.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as FlexProps } from "./index-B41OXLX8.mjs";
 import { CSSProperties, ElementType } from "react";
 //#region src/Paper/Paper.d.ts
 type PaperElevation = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 interface PaperProps extends FlexProps {
-  /** Shadow depth — 0 (flat) to 24 (highest). Resolves to theme.shadows[n]. Default: 1. */
+  /** Shadow depth - 0 (flat) to 24 (highest). Resolves to theme.shadows[n]. Default: 1. */
   elevation?: PaperElevation;
   /** CSS transition for surface animations (e.g. hover elevation change). */
   transition?: CSSProperties['transition'];
-  /** Resolves against theme.border — light · primary · dark */
+  /** Resolves against theme.border - light · primary · dark */
   borderColor?: keyof Theme['border'];
-  /** Resolves against theme.borderWidths — none · thin · base · thick */
+  /** Resolves against theme.borderWidths - none · thin · base · thick */
   borderWidth?: keyof Theme['borderWidths'];
   /** CSS border-style value (e.g. 'solid', 'dashed'). */
   borderStyle?: CSSProperties['borderStyle'];

package/dist/index-BnFxdnEL.d.mts

@@ -0,0 +1,16 @@
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { s as ViewProps } from "./index-tv-TGYSG.mjs";
+import { FlexboxProps, GridProps } from "@soroush.tech/styled-system";
+//#region src/Grid/Grid.d.ts
+/** Valid values for the gap / columnGap / rowGap props - derived from theme.space keys. */
+type GapToken = keyof Theme['space'];
+interface GridProps$1 extends ViewProps, GridProps<Theme>, FlexboxProps<Theme> {}
+declare const Grid: import("@emotion/styled").StyledComponent<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+} & GridProps$1, {}, {}>;
+//#endregion
+export { Grid as n, GridProps$1 as r, GapToken as t };

package/dist/{index-BYYEoNec.d.cts → index-CCrocxBL.d.cts}

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-uH0EeDBZ.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-S3NZS-Qp.cjs";
 import { ElementType, HTMLAttributes } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/ButtonGroup/ButtonGroup.d.ts
@@ -9,13 +9,13 @@ type ButtonGroupRadius = keyof Theme['radii'];
 interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, SpaceProps<Theme> {
   /** Visual style for all child buttons. Default: `'outlined'`. */
   variant?: ButtonVariant;
-  /** Color palette for all child buttons — resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Color palette for all child buttons - resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: ButtonColor;
-  /** Density for all child buttons — resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
+  /** Density for all child buttons - resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
   size?: ButtonSize;
   /** Layout flow direction. Default: `'horizontal'`. */
   orientation?: ButtonGroupOrientation;
-  /** Group corner radius — rounds the group's outer corners only. Resolves against `theme.radii`. Default: 'md', overridable via `theme.defaults.borderRadius`. */
+  /** Group corner radius - rounds the group's outer corners only. Resolves against `theme.radii`. Default: 'md', overridable via `theme.defaults.borderRadius`. */
   borderRadius?: ButtonGroupRadius;
   /** Disables all child buttons. Default: `false`. */
   disabled?: boolean;

package/dist/{index-q9peil7T.d.mts → index-CEqa8xx8.d.mts}

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
 import { CreateStyledComponent, FilteringStyledOptions, Interpolation, StyledOptions } from "@emotion/styled";
 import { PropsOf, css as css$1, keyframes } from "@emotion/react";
 import { createShouldForwardProp, props } from "@soroush.tech/styled-system/should-forward-prop";
@@ -9,7 +9,7 @@ import { ComponentClass, ComponentProps, ComponentType, JSX, Ref } from "react";
  * `name` becomes theme-customizable: `theme.components[name]` may contribute
  * `styleOverrides` (per `slot`) and `variants`, appended after the component's
  * own styles so the theme wins the cascade. Roots without `name` are plain
- * Emotion — zero behavior change, zero cost.
+ * Emotion - zero behavior change, zero cost.
  */
 interface ThemeCustomizationOptions {
   /** `theme.components` key enabling styleOverrides/variants for this root. */
@@ -17,19 +17,19 @@ interface ThemeCustomizationOptions {
   /** The `styleOverrides` slot this root maps to. Default: `'root'`. */
   slot?: string;
   /**
-   * Styled-system prop parsers (`space`, `layout`, …) appended AFTER the theme
-   * override resolver, so per-instance props (`m`, `p`, `width`, …) always beat
+   * Styled-system prop parsers (`space`, `layout`, ...) appended AFTER the theme
+   * override resolver, so per-instance props (`m`, `p`, `width`, ...) always beat
    * theme `styleOverrides`.
    */
   systemProps?: ReadonlyArray<Interpolation<never>>;
   /**
-   * Custom mapping from render props to applied override styles — replaces the
+   * Custom mapping from render props to applied override styles - replaces the
    * default `styleOverrides[slot]` lookup (for prop-keyed override keys).
    */
   overridesResolver?: (props: Record<string, unknown>, styleOverrides: Record<string, unknown>) => unknown;
 }
 /**
- * The `styled.div`, `styled.span`, … tag shorthands — mirrors Emotion's own
+ * The `styled.div`, `styled.span`, ... tag shorthands - mirrors Emotion's own
  * `StyledTags`, retyped against this package's `Theme` instead of Emotion's
  * (otherwise-empty) one, so `${({ theme }) => theme.space[2]}` template
  * interpolations resolve to the real theme shape.
@@ -61,7 +61,7 @@ interface CreateThemedStyled extends StyledTags {
   }, JSX.IntrinsicElements[Tag]>;
 }
 /**
- * The design system's `styled` — Emotion's styled plus theme-level component
+ * The design system's `styled` - Emotion's styled plus theme-level component
  * customization (`theme.components[name].styleOverrides` / `.variants`).
  */
 declare const styled: CreateThemedStyled;

package/dist/{index-CiShdd2j.d.cts → index-CLttbRhG.d.cts}

@@ -1,10 +1,10 @@
-import { d as PaletteColor, h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
+import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Pagination/hooks/usePagination.d.ts
 type PaginationItemType = 'page' | 'first' | 'previous' | 'next' | 'last' | 'start-ellipsis' | 'end-ellipsis';
-/** One renderable pagination item — `Pagination` maps these onto `PaginationItem`s. */
+/** One renderable pagination item - `Pagination` maps these onto `PaginationItem`s. */
 interface UsePaginationItem {
   type: PaginationItemType;
   /** Target page for actionable items; `null` for ellipses. */
@@ -34,7 +34,7 @@ interface UsePaginationProps {
   onChange?: (page: number) => void;
 }
 /**
- * Headless pagination model — computes the item list (nav buttons, page numbers,
+ * Headless pagination model - computes the item list (nav buttons, page numbers,
  * ellipses) with selection, boundary disabling, and controlled/uncontrolled paging.
  */
 declare function usePagination({ count, page: pageProp, defaultPage, siblingCount, boundaryCount, disabled, shouldShowFirstButton, shouldShowLastButton, shouldHidePrevButton, shouldHideNextButton, onChange }: UsePaginationProps): {
@@ -47,19 +47,19 @@ type PaginationItemVariant = 'text' | 'outlined';
 type PaginationItemShape = 'circular' | 'rounded';
 type PaginationItemSize = keyof Theme['sizes'];
 interface PaginationItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'type'>, SpaceProps<Theme> {
-  /** What the item renders — a page number, a nav control, or a non-interactive ellipsis. */
+  /** What the item renders - a page number, a nav control, or a non-interactive ellipsis. */
   type?: PaginationItemType;
   /** The page number/content for `type="page"`. */
   page?: ReactNode;
   /** Active styling for the current page. Default: `false`. */
   isSelected?: boolean;
-  /** Selected-state color — resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Selected-state color - resolves against `theme.palette`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: PaginationItemColor;
-  /** `text` — no border · `outlined` — stroked. Default: `'text'`. */
+  /** `text` - no border · `outlined` - stroked. Default: `'text'`. */
   variant?: PaginationItemVariant;
   /** Corner shape. Default: `'circular'`. */
   shape?: PaginationItemShape;
-  /** Item dimensions and font size — resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
+  /** Item dimensions and font size - resolves against `theme.sizes`. Default: 'md', overridable via `theme.defaults.size`. */
   size?: PaginationItemSize;
   disabled?: boolean;
   as?: ElementType;