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

package/README.md

@@ -22,6 +22,30 @@ npm i @soroush.tech/design-system
 
 ---
 
+## 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.
+
+---
+
 ## Importing
 
 Import components by subpath, styling primitives from the barrel:
@@ -65,16 +89,17 @@ 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
 
@@ -129,6 +154,7 @@ Components never hardcode colors or sizes - props resolve against scales on the
 | 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`          |
 
@@ -162,6 +188,15 @@ const [isDark, setIsDark] = useState(true)
 
 `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:

package/dist/AppBar.cjs

@@ -1,7 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as FlexProps } from "./index-DOLA1VFD.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. */
 type AppBarColor = keyof Theme['background'];

package/dist/AppBar.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as FlexProps } from "./index-KZKeZDAF.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. */
 type AppBarColor = keyof Theme['background'];

package/dist/AppBar.mjs

@@ -1,6 +1,8 @@
 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

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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-Bnc03K83.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-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as FlexProps } from "./index-DOLA1VFD.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'];

package/dist/Avatar.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as FlexProps } from "./index-KZKeZDAF.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'];

package/dist/Avatar.mjs

@@ -1,7 +1,7 @@
 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-BuqqFbsz.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.d.cts

@@ -1,4 +1,4 @@
-import { s as ViewProps } from "./index-Btmdtbpb.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-DQ16ijxx.mjs";
+import { s as ViewProps } from "./index-tv-TGYSG.mjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Button.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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-Bnc03K83.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-Oxx0z4dS.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-C-2VKPcp.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-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "./utils.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-BuqqFbsz.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.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-C5-ZM7lt.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-DhMAwR96.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/Card.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Bnc03K83.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-BAMpe9SO.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-Cf7w9Lod.cjs";
-import { a as TypographyProps } from "./index-Csp1Wzbz.cjs";
-import { n as IconProps, r as IconName } from "./index-DCu7qjpa.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-BCvkP5R1.mjs";
-import { a as TypographyProps } from "./index-BWECJgSb.mjs";
-import { n as IconProps, r as IconName } from "./index-76XH-GEc.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-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-BuqqFbsz.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-gSiGgU13.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.d.cts

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.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-kbuYiwCi.mjs";
-import "./index-v_otepCe.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

package/dist/CircularProgress.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as ButtonColor } from "./index-Oxx0z4dS.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as ButtonColor } from "./index-S3NZS-Qp.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/CircularProgress/CircularProgress.d.ts

package/dist/CircularProgress.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as ButtonColor } from "./index-C-2VKPcp.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as ButtonColor } from "./index-D4i9vrQM.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/CircularProgress/CircularProgress.d.ts

package/dist/Drawer.d.cts

@@ -1,5 +1,5 @@
-import { n as PaperElevation } from "./index-Cf7w9Lod.cjs";
-import { s as ModalProps } from "./index-D-QRCHiS.cjs";
+import { n as PaperElevation } from "./index-BGD4OzzG.cjs";
+import { s as ModalProps } from "./index-B8KscJic.cjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/Drawer.d.mts

@@ -1,5 +1,5 @@
-import { n as PaperElevation } from "./index-BCvkP5R1.mjs";
-import { s as ModalProps } from "./index-CTVFwvju.mjs";
+import { n as PaperElevation } from "./index-BSR9zrAA.mjs";
+import { s as ModalProps } from "./index-qtKJ56yu.mjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/Flex.d.cts

@@ -1,2 +1,2 @@
-import { n as FlexProps, r as GapToken, t as Flex } from "./index-DOLA1VFD.cjs";
+import { n as FlexProps, r as GapToken, t as Flex } from "./index-BMJ3tyIw.cjs";
 export { Flex, FlexProps, GapToken };

package/dist/Flex.d.mts

@@ -1,2 +1,2 @@
-import { n as FlexProps, r as GapToken, t as Flex } from "./index-KZKeZDAF.mjs";
+import { n as FlexProps, r as GapToken, t as Flex } from "./index-B41OXLX8.mjs";
 export { Flex, FlexProps, GapToken };

package/dist/Form.d.cts

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/Form.d.mts

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/FormControl.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_View = require("./View.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Bnc03K83.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
 const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
 const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
 let react = require("react");

package/dist/FormControl.d.cts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import { s as ViewProps } from "./index-Btmdtbpb.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import { s as ViewProps } from "./index-CvWslVk6.cjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {

package/dist/FormControl.d.mts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import { s as ViewProps } from "./index-DQ16ijxx.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import { s as ViewProps } from "./index-tv-TGYSG.mjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {

package/dist/FormControl.mjs

@@ -1,7 +1,7 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-BuqqFbsz.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
 import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
 import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
 import { useContext, useId, useMemo, useState } from "react";

package/dist/FormHelperText.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-Csp1Wzbz.cjs";
+import { a as TypographyProps } from "./index-bN91IhZi.cjs";
 import { ReactNode } from "react";
 //#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {

package/dist/FormHelperText.d.mts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BWECJgSb.mjs";
+import { a as TypographyProps } from "./index-DuefjNlC.mjs";
 import { ReactNode } from "react";
 //#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {

package/dist/FormLabel.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-Csp1Wzbz.cjs";
+import { a as TypographyProps } from "./index-bN91IhZi.cjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {

package/dist/FormLabel.d.mts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BWECJgSb.mjs";
+import { a as TypographyProps } from "./index-DuefjNlC.mjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {

package/dist/Grid.d.cts

@@ -1,16 +1,2 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { s as ViewProps } from "./index-Btmdtbpb.cjs";
-import { FlexboxProps, GridProps as GridProps$1 } 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 extends ViewProps, GridProps$1<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, {}, {}>;
-//#endregion
+import { n as Grid, r as GridProps, t as GapToken } from "./index-BJ5Tsf7u.cjs";
 export { GapToken, Grid, GridProps };

package/dist/Grid.d.mts

@@ -1,16 +1,2 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { s as ViewProps } from "./index-DQ16ijxx.mjs";
-import { FlexboxProps, GridProps as GridProps$1 } 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 extends ViewProps, GridProps$1<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, {}, {}>;
-//#endregion
+import { n as Grid, r as GridProps, t as GapToken } from "./index-BnFxdnEL.mjs";
 export { GapToken, Grid, GridProps };

package/dist/{Icon-BAMpe9SO.cjs → Icon-CKLBJ7CC.cjs}

@@ -1,6 +1,6 @@
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Bnc03K83.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/{Icon-gSiGgU13.mjs → Icon-CkQGOBmm.mjs}

@@ -1,6 +1,6 @@
 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 { r as useTheme } from "./theme-BuqqFbsz.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Icon/icons/AccountTree.tsx

package/dist/Icon.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Icon = require("./Icon-BAMpe9SO.cjs");
+const require_Icon = require("./Icon-CKLBJ7CC.cjs");
 exports.Icon = require_Icon.Icon;
 exports.icons = require_Icon.icons;

package/dist/Icon.d.cts

@@ -1,2 +1,2 @@
-import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-DCu7qjpa.cjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-DPHwCZYf.cjs";
 export { Icon, type IconName, IconProps, icons };

package/dist/Icon.d.mts

@@ -1,2 +1,2 @@
-import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-76XH-GEc.mjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-r2avCy1z.mjs";
 export { Icon, type IconName, IconProps, icons };

package/dist/Icon.mjs

@@ -1,2 +1,2 @@
-import { n as icons, t as Icon } from "./Icon-gSiGgU13.mjs";
+import { n as icons, t as Icon } from "./Icon-CkQGOBmm.mjs";
 export { Icon, icons };

package/dist/Image.d.cts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { CSSProperties, ImgHTMLAttributes } from "react";
 import { BackgroundProps, LayoutProps, PositionProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Image/Image.d.ts

package/dist/Image.d.mts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { BackgroundProps, LayoutProps, PositionProps, SpaceProps } from "@soroush.tech/styled-system";
 import { CSSProperties, ImgHTMLAttributes } from "react";
 //#region src/Image/Image.d.ts

package/dist/LinearProgress.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as ButtonColor } from "./index-Oxx0z4dS.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as ButtonColor } from "./index-S3NZS-Qp.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/LinearProgress/LinearProgress.d.ts

package/dist/LinearProgress.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as ButtonColor } from "./index-C-2VKPcp.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as ButtonColor } from "./index-D4i9vrQM.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/LinearProgress/LinearProgress.d.ts

package/dist/Link.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Bnc03K83.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
 const require_Typography = require("./Typography.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Link.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-Csp1Wzbz.cjs";
+import { a as TypographyProps } from "./index-bN91IhZi.cjs";
 import { AnchorHTMLAttributes } from "react";
 //#region src/Link/Link.d.ts
 type LinkUnderline = 'always' | 'hover' | 'none';

package/dist/Link.d.mts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BWECJgSb.mjs";
+import { a as TypographyProps } from "./index-DuefjNlC.mjs";
 import { AnchorHTMLAttributes } from "react";
 //#region src/Link/Link.d.ts
 type LinkUnderline = 'always' | 'hover' | 'none';