@soroush.tech/design-system 1.3.1 → 1.3.3

package/README.md

@@ -8,9 +8,9 @@
 [![license](https://img.shields.io/npm/l/@soroush.tech/design-system.svg?cacheSeconds=86400)](./LICENSE)
 
 **Your design system. Your tokens. Your rules.**
-A fully typed React component library where nothing is hardcoded — every color, scale, and default belongs to you, not the package.
+A fully typed React component library where nothing is hardcoded - every color, scale, and default belongs to you, not the package.
 
-Tired of forking a component library just to change a color? Every token here is designed to be overridden — theming isn't an afterthought, it's the whole point.
+Tired of forking a component library just to change a color? Every token here is designed to be overridden - theming isn't an afterthought, it's the whole point.
 
 ## Install
 
@@ -18,7 +18,7 @@ Tired of forking a component library just to change a color? Every token here is
 npm i @soroush.tech/design-system
 ```
 
-`react` and `react-dom` are peer dependencies. Emotion is an internal implementation detail — it ships as a regular dependency, not a peer, so you never install it yourself.
+`react` and `react-dom` are peer dependencies. Emotion is an internal implementation detail - it ships as a regular dependency, not a peer, so you never install it yourself.
 
 ---
 
@@ -31,7 +31,7 @@ import { Typography } from '@soroush.tech/design-system/Typography'
 import { Flex } from '@soroush.tech/design-system/Flex'
 ```
 
-Styling primitives (the engine) come from the barrel `@soroush.tech/design-system` — `styled`, `css`, `keyframes`, the `Theme` type, styled-system functions, and `createShouldForwardProp`. The barrel (`src/index.ts`) is the engine abstraction layer: to swap the CSS-in-JS engine, only that file changes.
+Styling primitives (the engine) come from the barrel `@soroush.tech/design-system` - `styled`, `css`, `keyframes`, the `Theme` type, styled-system functions, and `createShouldForwardProp`. The barrel (`src/index.ts`) is the engine abstraction layer: to swap the CSS-in-JS engine, only that file changes.
 
 ```ts
 import { styled, css, type Theme } from '@soroush.tech/design-system'
@@ -43,21 +43,21 @@ import { styled, css, type Theme } from '@soroush.tech/design-system'
 import { ThemeProvider, useTheme } from '@soroush.tech/design-system/theme'
 ```
 
-Style-computation helpers (`useStyle`, `withStyles`, `StylesConsumer`) — resolving a `StyleInput`/`StyleFactory` into a `CSSObject` — live at their own subpath:
+Style-computation helpers (`useStyle`, `withStyles`, `StylesConsumer`) - resolving a `StyleInput`/`StyleFactory` into a `CSSObject` - live at their own subpath:
 
 ```ts
 import { useStyle } from '@soroush.tech/design-system/style'
 ```
 
-Raw engine primitives for building your own global styles — `Global`, `globalStyles`, and the SSR-only `CacheProvider`/`styleCache` pairing — live at their own subpath, not the barrel:
+Raw engine primitives for building your own global styles - `Global`, `globalStyles`, and the SSR-only `CacheProvider`/`styleCache` pairing - live at their own subpath, not the barrel:
 
 ```ts
 import { Global, globalStyles, CacheProvider, styleCache } from '@soroush.tech/design-system/engine'
 ```
 
-`Global` (retyped against this package's `Theme`) applies app-wide CSS and should render inside `ThemeProvider` so it resolves against the active theme. `globalStyles(theme)` is the base reset this package owns — box-sizing, margin/table resets, and theme-driven body colors — compose it into your own `Global` styles array alongside your app's own concerns (font-family, webfont loading, and anything else app-specific stay entirely app policy).
+`Global` (retyped against this package's `Theme`) applies app-wide CSS and should render inside `ThemeProvider` so it resolves against the active theme. `globalStyles(theme)` is the base reset this package owns - box-sizing, margin/table resets, and theme-driven body colors - compose it into your own `Global` styles array alongside your app's own concerns (font-family, webfont loading, and anything else app-specific stay entirely app policy).
 
-SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in concern most apps never need — that's what `CacheProvider` and its paired `styleCache` instance are for.
+SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in concern most apps never need - that's what `CacheProvider` and its paired `styleCache` instance are for.
 
 ---
 
@@ -67,7 +67,7 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 
 | Component | Purpose                                           |
 | --------- | ------------------------------------------------- |
-| `View`    | Styled `div` primitive — the base building block  |
+| `View`    | Styled `div` primitive - the base building block  |
 | `Flex`    | `View` with flexbox defaults                      |
 | `Grid`    | CSS grid container                                |
 | `Paper`   | Elevated surface with background and shadow       |
@@ -80,12 +80,12 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 
 | Component    | Purpose                                                                                                                                                                                                                                      |
 | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Typography` | Text with variant → element mapping — the reference implementation for all components                                                                                                                                                        |
+| `Typography` | Text with variant → element mapping - the reference implementation for all components                                                                                                                                                        |
 | `Link`       | Anchor with theme-aware styling                                                                                                                                                                                                              |
 | `Icon`       | Icon renderer                                                                                                                                                                                                                                |
 | `Image`      | Image with styled-system props                                                                                                                                                                                                               |
 | `Avatar`     | User/entity avatar                                                                                                                                                                                                                           |
-| `Table`      | Compound data table — exports `TableContainer`, `TableHead`, `TableBody`, `TableFooter`, `TableRow`, `TableCell`, `TablePagination`, `TablePaginationActions`, `TableSortLabel`, and `TableControl` from `@soroush.tech/design-system/Table` |
+| `Table`      | Compound data table - exports `TableContainer`, `TableHead`, `TableBody`, `TableFooter`, `TableRow`, `TableCell`, `TablePagination`, `TablePaginationActions`, `TableSortLabel`, and `TableControl` from `@soroush.tech/design-system/Table` |
 
 ### Inputs & forms
 
@@ -122,7 +122,7 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 
 ## Theme tokens
 
-Components never hardcode colors or sizes — props resolve against scales on the `Theme` object:
+Components never hardcode colors or sizes - props resolve against scales on the `Theme` object:
 
 | Group              | Scales                                                                                                |
 | ------------------ | ----------------------------------------------------------------------------------------------------- |
@@ -138,11 +138,11 @@ Prop types are derived from the interface (`keyof Theme['text']`), so adding a t
 
 ## Theming
 
-The theme belongs to you — the package only ships defaults. This section is the overview; the full guides are [`docs/theming.md`](./docs/theming.md) and [`docs/customization.md`](./docs/customization.md).
+The theme belongs to you - the package only ships defaults. This section is the overview; the full guides are [`docs/theming.md`](./docs/theming.md) and [`docs/customization.md`](./docs/customization.md).
 
 ### One theme, yours
 
-`ThemeProvider` provides exactly one theme — the built-in dark theme when you pass nothing. Bring one theme, or as many as you like: switching between them is your state, not the provider's.
+`ThemeProvider` provides exactly one theme - the built-in dark theme when you pass nothing. Bring one theme, or as many as you like: switching between them is your state, not the provider's.
 
 ```tsx
 import { ThemeProvider } from '@soroush.tech/design-system/theme'
@@ -151,20 +151,20 @@ import { baseTheme, createTheme } from '@soroush.tech/design-system/theme'
 // Zero-config: the built-in `baseTheme`.
 <ThemeProvider>{app}</ThemeProvider>
 
-// Your theme — written from scratch or extended from the base.
+// Your theme - written from scratch or extended from the base.
 const brand = createTheme(baseTheme, { palette: { primary: { main: '#00ff88' } } })
 <ThemeProvider theme={brand}>{app}</ThemeProvider>
 
-// Mode switching is app policy — own the state and pass the active theme:
+// Mode switching is app policy - own the state and pass the active theme:
 const [isDark, setIsDark] = useState(true)
 <ThemeProvider theme={isDark ? brandDark : brandLight}>{app}</ThemeProvider>
 ```
 
-`createTheme(base, overrides)` (exported from `@soroush.tech/design-system/theme`) is the merge primitive: plain objects recurse, arrays (`shadows`, `fontSizes`) and functions replace wholesale, `undefined` values are ignored — keys are added or replaced, never removed.
+`createTheme(base, overrides)` (exported from `@soroush.tech/design-system/theme`) is the merge primitive: plain objects recurse, arrays (`shadows`, `fontSizes`) and functions replace wholesale, `undefined` values are ignored - keys are added or replaced, never removed.
 
 ### Component defaults
 
-Components carry visible literal fallbacks (`size = 'md'`, `variant = 'outside'`, …) resolved through `themeDefault(theme, key, fallback)` — so every default, including behavioral variants, is overridable via the optional `theme.defaults` map or the provider's `defaults` prop:
+Components carry visible literal fallbacks (`size = 'md'`, `variant = 'outside'`, ...) resolved through `themeDefault(theme, key, fallback)` - so every default, including behavioral variants, is overridable via the optional `theme.defaults` map or the provider's `defaults` prop:
 
 | Key                                          | Fallback                           | Drives                                 |
 | -------------------------------------------- | ---------------------------------- | -------------------------------------- |
@@ -181,7 +181,7 @@ Components carry visible literal fallbacks (`size = 'md'`, `variant = 'outside'`
 | `linkUnderline`                              | `'always'`                         | Link underline behavior                |
 | `paginationVariant` / `paginationShape`      | `'text'` / `'circular'`            | Pagination items                       |
 
-The built-in themes carry no `defaults` — the literals apply. A theme with entirely different size or palette keys stays valid by pointing the keys at its own tokens:
+The built-in themes carry no `defaults` - the literals apply. A theme with entirely different size or palette keys stays valid by pointing the keys at its own tokens:
 
 ```tsx
 <ThemeProvider defaults={{ size: 'compact', color: 'brand', switchVariant: 'inside' }}>
@@ -189,7 +189,7 @@ The built-in themes carry no `defaults` — the literals apply. A theme with ent
 
 ### Per-component customization (`theme.components`)
 
-Customize one component for the whole app — default prop values, per-slot CSS, and new variant values — without wrapping or forking:
+Customize one component for the whole app - default prop values, per-slot CSS, and new variant values - without wrapping or forking:
 
 ```tsx
 const brand = createTheme(baseTheme, {
@@ -198,8 +198,8 @@ const brand = createTheme(baseTheme, {
       // Buttons default to sm + rounded; explicit props and ButtonGroup still win.
       defaultProps: { size: 'sm', shape: 'rounded' },
 
-      // Per-slot CSS merged after Button's own styles — the theme wins the cascade,
-      // but per-instance props (m, p, width, …) still beat the theme.
+      // Per-slot CSS merged after Button's own styles - the theme wins the cascade,
+      // but per-instance props (m, p, width, ...) still beat the theme.
       styleOverrides: {
         root: ({ theme, ownerState }) => ({
           letterSpacing: theme.letterSpacings.wide,
@@ -208,7 +208,7 @@ const brand = createTheme(baseTheme, {
         label: { fontStyle: 'italic' },
       },
 
-      // A new variant value — register it first so it typechecks:
+      // A new variant value - register it first so it typechecks:
       // declare module '@soroush.tech/design-system/theme' { interface ButtonVariants { dashed: true } }
       variants: [
         {
@@ -226,11 +226,11 @@ const brand = createTheme(baseTheme, {
 
 Style callbacks receive `{ theme, ownerState }`, where `ownerState` is the styled root's **resolved** props (after group context, `defaultProps`, and `theme.defaults`). `defaultProps` sits in the standard precedence chain: explicit prop → group context → `defaultProps` → `theme.defaults.*` → the component's literal fallback. `variants` arrays are replaced wholesale by `createTheme`, never merged.
 
-Your own components can join the same mechanism: create their roots with this package's `styled(tag, { name: 'MyWidget', slot: 'root' })` and register the name by augmenting `ThemeComponents`. Zero-config themes pay nothing — the resolver bails out on the first check when `theme.components` is absent.
+Your own components can join the same mechanism: create their roots with this package's `styled(tag, { name: 'MyWidget', slot: 'root' })` and register the name by augmenting `ThemeComponents`. Zero-config themes pay nothing - the resolver bails out on the first check when `theme.components` is absent.
 
 ### Extending tokens (declaration merging)
 
-Every scale is an open interface declared on `@soroush.tech/design-system/theme`, so you can add palette colors, tokens, or whole scales — and every component prop union (`color`, `bg`, `size`, …) widens automatically:
+Every scale is an open interface declared on `@soroush.tech/design-system/theme`, so you can add palette colors, tokens, or whole scales - and every component prop union (`color`, `bg`, `size`, ...) widens automatically:
 
 ```ts
 import type { PaletteEntry } from '@soroush.tech/design-system/theme'
@@ -263,13 +263,13 @@ const brandDark = createTheme(baseTheme, {
 </ThemeProvider>
 ```
 
-Notes: new object-valued keys (like a `PaletteEntry`) must be supplied complete — components read `.main`/`.contrastText` at runtime; and TypeScript cannot verify at runtime that an augmented token was actually supplied, so always pair an augmentation with the matching override.
+Notes: new object-valued keys (like a `PaletteEntry`) must be supplied complete - components read `.main`/`.contrastText` at runtime; and TypeScript cannot verify at runtime that an augmented token was actually supplied, so always pair an augmentation with the matching override.
 
 ---
 
 ## Adding a component
 
-Scaffold with the skill — it reads the live `Typography` files and `design-system.md` so output matches the codebase:
+Scaffold with the skill - it reads the live `Typography` files and `design-system.md` so output matches the codebase:
 
 ```
 /new_theme_component ComponentName
@@ -279,7 +279,7 @@ Then work through the checklist at the bottom of [`design-system.md`](./design-s
 
 ---
 
-The library takes inspiration from [Material UI](https://mui.com/) — its component vocabulary and prop conventions will feel familiar — but it is written entirely in house. It is not a clone or a fork: every component is built from scratch on our own engine and token system, and the API is free to diverge wherever it serves its consumers better.
+The library takes inspiration from [Material UI](https://mui.com/) - its component vocabulary and prop conventions will feel familiar - but it is written entirely in house. It is not a clone or a fork: every component is built from scratch on our own engine and token system, and the API is free to diverge wherever it serves its consumers better.
 
 ---
 

package/dist/AppBar.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_Flex = require("./Flex.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/AppBar.d.cts

@@ -1,18 +1,18 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { n as FlexProps } from "./index-DLUE7t3O.cjs";
+import { h as Theme } from "./themes-kbuYiwCi.cjs";
+import "./index-jmy5eXpx.cjs";
+import { n as FlexProps } from "./index-DOLA1VFD.cjs";
 //#region src/AppBar/AppBar.d.ts
-/** Valid values for the color prop — derived from theme.background keys. */
+/** Valid values for the color prop - derived from theme.background keys. */
 type AppBarColor = keyof Theme['background'];
 type AppBarPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
 /** Padding preset from theme.sizes. Default: 'md', overridable via `theme.defaults.size`. */
 type AppBarSize = keyof Theme['sizes'];
 interface AppBarProps extends Omit<FlexProps, 'position' | 'bg'> {
-  /** Resolves against theme.background — sets the AppBar background color. */
+  /** Resolves against theme.background - sets the AppBar background color. */
   color?: AppBarColor;
   /** CSS position value for layout placement. Default: browser default (static). */
   position?: AppBarPosition;
-  /** Box-shadow elevation (index into theme.shadows, 0–24). Default: `4`; use `0` for no shadow. */
+  /** Box-shadow elevation (index into theme.shadows, 0-24). Default: `4`; use `0` for no shadow. */
   elevation?: number;
   /** Padding preset from theme.sizes. Default: 'md', overridable via `theme.defaults.size`. */
   size?: AppBarSize;

package/dist/AppBar.d.mts

@@ -1,18 +1,18 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { n as FlexProps } from "./index-n2OyTMr6.mjs";
+import { h as Theme } from "./themes-kbuYiwCi.mjs";
+import "./index-v_otepCe.mjs";
+import { n as FlexProps } from "./index-KZKeZDAF.mjs";
 //#region src/AppBar/AppBar.d.ts
-/** Valid values for the color prop — derived from theme.background keys. */
+/** Valid values for the color prop - derived from theme.background keys. */
 type AppBarColor = keyof Theme['background'];
 type AppBarPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
 /** Padding preset from theme.sizes. Default: 'md', overridable via `theme.defaults.size`. */
 type AppBarSize = keyof Theme['sizes'];
 interface AppBarProps extends Omit<FlexProps, 'position' | 'bg'> {
-  /** Resolves against theme.background — sets the AppBar background color. */
+  /** Resolves against theme.background - sets the AppBar background color. */
   color?: AppBarColor;
   /** CSS position value for layout placement. Default: browser default (static). */
   position?: AppBarPosition;
-  /** Box-shadow elevation (index into theme.shadows, 0–24). Default: `4`; use `0` for no shadow. */
+  /** Box-shadow elevation (index into theme.shadows, 0-24). Default: `4`; use `0` for no shadow. */
   elevation?: number;
   /** Padding preset from theme.sizes. Default: 'md', overridable via `theme.defaults.size`. */
   size?: AppBarSize;

package/dist/AppBar.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 { Flex } from "./Flex.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { jsx } from "react/jsx-runtime";

package/dist/Avatar.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_Flex = require("./Flex.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-CleLAV6A.cjs");
+const require_theme = require("./theme-Bnc03K83.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");

package/dist/Avatar.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { n as FlexProps } from "./index-DLUE7t3O.cjs";
+import { h as Theme } from "./themes-kbuYiwCi.cjs";
+import "./index-jmy5eXpx.cjs";
+import { n as FlexProps } from "./index-DOLA1VFD.cjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];
@@ -15,13 +15,13 @@ interface AvatarProps extends Omit<FlexProps, OmittedProps> {
   fallback?: string;
   /** Shape of the avatar. Default: 'circular'. */
   variant?: AvatarVariant;
-  /** Preset size — resolves against theme.avatar. Default: 'md', overridable via `theme.defaults.size`. */
+  /** Preset size - resolves against theme.avatar. Default: 'md', overridable via `theme.defaults.size`. */
   size?: AvatarSize;
   /** Adds a CSS outline ring around the avatar. */
   ring?: boolean;
-  /** Ring color — resolves against theme.border. */
+  /** Ring color - resolves against theme.border. */
   ringColor?: AvatarRingColor;
-  /** Ring width — resolves against theme.borderWidths. */
+  /** Ring width - resolves against theme.borderWidths. */
   ringWidth?: AvatarRingWidth;
 }
 declare function Avatar({ src, srcSet, alt, fallback, children, variant: variantProp, size: sizeProp, ring, ringColor: ringColorProp, ringWidth: ringWidthProp, ...rest }: Readonly<AvatarProps>): import("react").JSX.Element;

package/dist/Avatar.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { n as FlexProps } from "./index-n2OyTMr6.mjs";
+import { h as Theme } from "./themes-kbuYiwCi.mjs";
+import "./index-v_otepCe.mjs";
+import { n as FlexProps } from "./index-KZKeZDAF.mjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];
@@ -15,13 +15,13 @@ interface AvatarProps extends Omit<FlexProps, OmittedProps> {
   fallback?: string;
   /** Shape of the avatar. Default: 'circular'. */
   variant?: AvatarVariant;
-  /** Preset size — resolves against theme.avatar. Default: 'md', overridable via `theme.defaults.size`. */
+  /** Preset size - resolves against theme.avatar. Default: 'md', overridable via `theme.defaults.size`. */
   size?: AvatarSize;
   /** Adds a CSS outline ring around the avatar. */
   ring?: boolean;
-  /** Ring color — resolves against theme.border. */
+  /** Ring color - resolves against theme.border. */
   ringColor?: AvatarRingColor;
-  /** Ring width — resolves against theme.borderWidths. */
+  /** Ring width - resolves against theme.borderWidths. */
   ringWidth?: AvatarRingWidth;
 }
 declare function Avatar({ src, srcSet, alt, fallback, children, variant: variantProp, size: sizeProp, ring, ringColor: ringColorProp, ringWidth: ringWidthProp, ...rest }: Readonly<AvatarProps>): import("react").JSX.Element;

package/dist/Avatar.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 { Flex } from "./Flex.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-Cudynq5K.mjs";
+import { r as useTheme } from "./theme-BuqqFbsz.mjs";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Avatar/Avatar.tsx

package/dist/Backdrop.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_View = require("./View.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Backdrop/Backdrop.tsx

package/dist/Backdrop.d.cts

@@ -1,4 +1,4 @@
-import { s as ViewProps } from "./index-BPzvFTi5.cjs";
+import { s as ViewProps } from "./index-Btmdtbpb.cjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Backdrop.d.mts

@@ -1,4 +1,4 @@
-import { s as ViewProps } from "./index-m9jUR509.mjs";
+import { s as ViewProps } from "./index-DQ16ijxx.mjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Backdrop.mjs

@@ -1,4 +1,4 @@
-import { o as styled } from "./src-D3tHU94W.mjs";
+import { o as styled } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/Backdrop/Backdrop.tsx

package/dist/Button.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-Bnc03K83.cjs");
 const require_CircularProgress = require("./CircularProgress.cjs");
 const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
 let react = require("react");

package/dist/Button.d.cts

@@ -1,2 +1,2 @@
-import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-uH0EeDBZ.cjs";
+import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-Oxx0z4dS.cjs";
 export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.d.mts

@@ -1,2 +1,2 @@
-import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-BAfSyQaP.mjs";
+import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-C-2VKPcp.mjs";
 export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.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 { n as useDefaultProps, r as useTheme } from "./theme-Cudynq5K.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-BuqqFbsz.mjs";
 import { CircularProgress } from "./CircularProgress.mjs";
 import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
 import { useContext } from "react";

package/dist/ButtonGroup.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_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
 const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");

package/dist/ButtonGroup.d.cts

@@ -1,2 +1,2 @@
-import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-BYYEoNec.cjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-C5-ZM7lt.cjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/ButtonGroup.d.mts

@@ -1,2 +1,2 @@
-import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-CbGfrKZi.mjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-DhMAwR96.mjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/ButtonGroup.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 { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "./utils.mjs";
 import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";

package/dist/Card.cjs

@@ -1,10 +1,10 @@
 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_theme = require("./theme-CleLAV6A.cjs");
+const require_theme = require("./theme-Bnc03K83.cjs");
 const require_Paper = require("./Paper.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-ByDvM-t1.cjs");
+const require_Icon = require("./Icon-BAMpe9SO.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Card/Card.tsx

package/dist/Card.d.cts

@@ -1,6 +1,6 @@
-import { r as PaperProps } from "./index-BW-9sqFG.cjs";
-import { a as TypographyProps } from "./index-CohsoGjZ.cjs";
-import { n as IconProps, r as IconName } from "./index-Borai-Wg.cjs";
+import { r as PaperProps } from "./index-Cf7w9Lod.cjs";
+import { a as TypographyProps } from "./index-Csp1Wzbz.cjs";
+import { n as IconProps, r as IconName } from "./index-DCu7qjpa.cjs";
 import { ReactNode } from "react";
 //#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';

package/dist/Card.d.mts

@@ -1,6 +1,6 @@
-import { r as PaperProps } from "./index-CKz1lEdR.mjs";
-import { a as TypographyProps } from "./index-DxBKLmUS.mjs";
-import { n as IconProps, r as IconName } from "./index-BjLlSr2P.mjs";
+import { r as PaperProps } from "./index-BCvkP5R1.mjs";
+import { a as TypographyProps } from "./index-BWECJgSb.mjs";
+import { n as IconProps, r as IconName } from "./index-76XH-GEc.mjs";
 import { ReactNode } from "react";
 //#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';

package/dist/Card.mjs

@@ -1,9 +1,9 @@
-import { o as styled } from "./src-D3tHU94W.mjs";
+import { o as styled } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-Cudynq5K.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-BuqqFbsz.mjs";
 import { Paper } from "./Paper.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-CU_nUmsU.mjs";
+import { t as Icon } from "./Icon-gSiGgU13.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Card/Card.tsx

package/dist/Checkbox.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_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_FormControl = require("./FormControl.cjs");
 let react = require("react");

package/dist/Checkbox.d.cts

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
+import { d as PaletteColor, h as Theme } from "./themes-kbuYiwCi.cjs";
+import "./index-jmy5eXpx.cjs";
 import { ChangeEvent, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Checkbox/Checkbox.d.ts

package/dist/Checkbox.d.mts

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
+import { d as PaletteColor, h as Theme } from "./themes-kbuYiwCi.mjs";
+import "./index-v_otepCe.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/Checkbox/Checkbox.d.ts

package/dist/Checkbox.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 { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { useEffect, useRef } from "react";

package/dist/CircularProgress.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_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
 require("react");

package/dist/CircularProgress.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { n as ButtonColor } from "./index-uH0EeDBZ.cjs";
+import { h as Theme } from "./themes-kbuYiwCi.cjs";
+import "./index-jmy5eXpx.cjs";
+import { n as ButtonColor } from "./index-Oxx0z4dS.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/CircularProgress/CircularProgress.d.ts
@@ -8,9 +8,9 @@ type CircularProgressVariant = 'indeterminate' | 'determinate';
 type CircularProgressColor = ButtonColor | 'inherit';
 type CircularProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
 interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps<Theme>, keyof PaddingProps>, LayoutProps<Theme> {
-  /** Visual variant — looping animation or value-driven arc. Default: `'indeterminate'`. */
+  /** Visual variant - looping animation or value-driven arc. Default: `'indeterminate'`. */
   variant?: CircularProgressVariant;
-  /** Stroke color — resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Stroke color - resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: CircularProgressColor;
   /** Width and height. Number → px; string → raw CSS unit (e.g. `'3rem'`). Default: `40`. */
   size?: number | string;
@@ -24,7 +24,7 @@ interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<Sp
   max?: number;
   /** Disables the stroke shrink/expand animation (`'indeterminate'` only). */
   disableShrink?: boolean;
-  /** Applies the rotation animation to a `'determinate'` arc — arc length reflects `value` while the spinner still rotates. */
+  /** Applies the rotation animation to a `'determinate'` arc - arc length reflects `value` while the spinner still rotates. */
   spinning?: boolean;
   /** Timing function for the rotation animation. Default: `'linear'`. */
   easing?: CircularProgressEasing;

package/dist/CircularProgress.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { n as ButtonColor } from "./index-BAfSyQaP.mjs";
+import { h as Theme } from "./themes-kbuYiwCi.mjs";
+import "./index-v_otepCe.mjs";
+import { n as ButtonColor } from "./index-C-2VKPcp.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/CircularProgress/CircularProgress.d.ts
@@ -8,9 +8,9 @@ type CircularProgressVariant = 'indeterminate' | 'determinate';
 type CircularProgressColor = ButtonColor | 'inherit';
 type CircularProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
 interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps<Theme>, keyof PaddingProps>, LayoutProps<Theme> {
-  /** Visual variant — looping animation or value-driven arc. Default: `'indeterminate'`. */
+  /** Visual variant - looping animation or value-driven arc. Default: `'indeterminate'`. */
   variant?: CircularProgressVariant;
-  /** Stroke color — resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Stroke color - resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: CircularProgressColor;
   /** Width and height. Number → px; string → raw CSS unit (e.g. `'3rem'`). Default: `40`. */
   size?: number | string;
@@ -24,7 +24,7 @@ interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<Sp
   max?: number;
   /** Disables the stroke shrink/expand animation (`'indeterminate'` only). */
   disableShrink?: boolean;
-  /** Applies the rotation animation to a `'determinate'` arc — arc length reflects `value` while the spinner still rotates. */
+  /** Applies the rotation animation to a `'determinate'` arc - arc length reflects `value` while the spinner still rotates. */
   spinning?: boolean;
   /** Timing function for the rotation animation. Default: `'linear'`. */
   easing?: CircularProgressEasing;