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

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,31 @@ 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.
+
+---
+
+## Use it with AI tools
+
+An MCP server serves this library's component inventory, every component's props
+reference, and the live token contract, so an AI assistant writes against the real API
+instead of guessing:
+
+```sh
+claude mcp add --transport http soroush https://mcp.soroush.tech/mcp
+```
+
+It also runs locally over stdio (`npx -y @soroush.tech/mcp`). Claude Code users can
+install the plugin instead, which adds a house-style skill and a UI review agent on top
+of the same server:
+
+```sh
+claude plugin marketplace add soroush-tech/design-system
+claude plugin install soroush-design-system@soroush-tech
+```
+
+Any other tool can read [docs.soroush.tech/llms.txt](https://docs.soroush.tech/llms.txt).
+See [`@soroush.tech/mcp`](../mcp) for the full tool list.
 
 ---
 
@@ -31,7 +55,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 +67,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.
 
 ---
 
@@ -65,27 +89,28 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 
 ### Layout & surfaces
 
-| Component | Purpose                                           |
-| --------- | ------------------------------------------------- |
-| `View`    | Styled `div` primitive — the base building block  |
-| `Flex`    | `View` with flexbox defaults                      |
-| `Grid`    | CSS grid container                                |
-| `Paper`   | Elevated surface with background and shadow       |
-| `Card`    | Content container built on `Paper`                |
-| `Quote`   | Bordered quote / terminal-panel surface on `View` |
-| `AppBar`  | Top application bar                               |
-| `Drawer`  | Slide-in side panel                               |
+| Component    | Purpose                                                                                   |
+| ------------ | ----------------------------------------------------------------------------------------- |
+| `View`       | Styled `div` primitive - the base building block                                          |
+| `Flex`       | `View` with flexbox defaults                                                              |
+| `Grid`       | CSS grid container                                                                        |
+| `PageLayout` | Page frame (bars, side panels, content) from `theme.layout`; `LayoutGrid` for its columns |
+| `Paper`      | Elevated surface with background and shadow                                               |
+| `Card`       | Content container built on `Paper`                                                        |
+| `Quote`      | Bordered quote / terminal-panel surface on `View`                                         |
+| `AppBar`     | Top application bar                                                                       |
+| `Drawer`     | Slide-in side panel                                                                       |
 
 ### Content & data display
 
 | 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,13 +147,14 @@ 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                                                                                                |
 | ------------------ | ----------------------------------------------------------------------------------------------------- |
 | Color              | `palette` (main/light/dark/contrastText per color) · `text` · `background` · `border` · `colorScheme` |
 | Typography         | `typography` (variant map) · `fonts` · `fontSizes` · `fontWeights` · `lineHeights` · `letterSpacings` |
 | Space & shape      | `space` · `sizes` · `radii` · `borderWidths` · `shadows`                                              |
+| Layout             | `breakpoints` (tablet/web/wide) · `layout` (bars, panels, content columns per breakpoint)             |
 | Component scales   | `avatar` (size steps) · `skeleton` (wave highlight)                                                   |
 | Layering & effects | `zOrder` (appBar/drawer/modal) · `blur` · `logoFilter` · `portraitBlend` · `portraitOpacity`          |
 
@@ -138,11 +164,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 +177,29 @@ 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.
+
+### Breakpoints and layout
+
+`theme.breakpoints` (`tablet` 600px, `web` 1200px, `wide` 1600px) is where responsive props change -
+`p={{ _: 2, web: 4 }}` or `p={[2, 3, 4]}`. `theme.layout` holds the page's columns, margins,
+gutters, side panels and bars per breakpoint, merged mobile-first; `PageLayout` and `LayoutGrid`
+lay a page out from it. Override both with `createTheme`; a breakpoint you add comes after the
+existing ones, so it must be larger. The full guide is the
+[Breakpoints and layout](./docs/theming.md#breakpoints-and-layout) section of the theming guide.
 
 ### 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 +216,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 +224,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 +233,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 +243,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 +261,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 +298,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 +314,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,7 +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_PageLayoutContext = require("./PageLayoutContext-agXGhegE.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 //#region src/AppBar/AppBar.tsx
@@ -60,10 +62,12 @@ const AppBarBase = require_src.styled(require_Flex.Flex, {
 	width: "100%"
 }, elevationVariant, sizeVariants);
 function AppBar({ elevation = 4, size, ...rest }) {
+	const isInBar = (0, react.useContext)(require_PageLayoutContext.PageLayoutContext)?.region === "bar";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppBarBase, {
 		as: "header",
 		elevation,
 		size,
+		...isInBar && { height: "100%" },
 		...rest
 	});
 }

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 { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as FlexProps } from "./index-BMJ3tyIw.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 { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as FlexProps } from "./index-B41OXLX8.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,6 +1,8 @@
-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 PageLayoutContext } from "./PageLayoutContext-DjJ1_7Xc.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/AppBar/AppBar.tsx
 const shouldForwardProp = createShouldForwardProp([
@@ -58,10 +60,12 @@ const AppBarBase = styled(Flex, {
 	width: "100%"
 }, elevationVariant, sizeVariants);
 function AppBar({ elevation = 4, size, ...rest }) {
+	const isInBar = useContext(PageLayoutContext)?.region === "bar";
 	return /* @__PURE__ */ jsx(AppBarBase, {
 		as: "header",
 		elevation,
 		size,
+		...isInBar && { height: "100%" },
 		...rest
 	});
 }

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-BmEAXmwh.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 { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as FlexProps } from "./index-BMJ3tyIw.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 { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as FlexProps } from "./index-B41OXLX8.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-BQGlZoma.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-CvWslVk6.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-tv-TGYSG.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-BmEAXmwh.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-S3NZS-Qp.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-D4i9vrQM.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-BQGlZoma.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-CCrocxBL.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-BNpkmtaM.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-BmEAXmwh.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-CKLBJ7CC.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-D_AwmCU5.cjs";
+import { r as PaperProps } from "./index-BGD4OzzG.cjs";
+import { a as TypographyProps } from "./index-bN91IhZi.cjs";
+import { n as IconProps, r as IconName } from "./index-DPHwCZYf.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-B0xTqpvt.mjs";
+import { r as PaperProps } from "./index-BSR9zrAA.mjs";
+import { a as TypographyProps } from "./index-DuefjNlC.mjs";
+import { n as IconProps, r as IconName } from "./index-r2avCy1z.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-BQGlZoma.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-CkQGOBmm.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 { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.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 { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/Checkbox/Checkbox.d.ts