@soroush.tech/design-system 0.1.0 → 1.1.0

package/README.md

@@ -1,17 +1,16 @@
 # @soroush.tech/design-system
 
-[![npm version](https://img.shields.io/npm/v/@soroush.tech/design-system.svg)](https://www.npmjs.com/package/@soroush.tech/design-system)
-[![npm downloads](https://img.shields.io/npm/dm/@soroush.tech/design-system.svg)](https://www.npmjs.com/package/@soroush.tech/design-system)
+[![npm version](https://img.shields.io/npm/v/@soroush.tech/design-system.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/design-system)
+[![npm downloads](https://img.shields.io/npm/dm/@soroush.tech/design-system.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/design-system)
 [![coverage](https://codecov.io/gh/soroush-tech/core/branch/main/graph/badge.svg?flag=design-system)](https://app.codecov.io/gh/soroush-tech/core?flags%5B0%5D=design-system)
-[![unpacked size](https://img.shields.io/npm/unpacked-size/@soroush.tech/design-system.svg)](https://www.npmjs.com/package/@soroush.tech/design-system)
-[![types included](https://img.shields.io/npm/types/@soroush.tech/design-system.svg)](https://www.npmjs.com/package/@soroush.tech/design-system)
-[![license](https://img.shields.io/npm/l/@soroush.tech/design-system.svg)](./LICENSE)
+[![unpacked size](https://img.shields.io/npm/unpacked-size/@soroush.tech/design-system.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/design-system)
+[![types included](https://img.shields.io/npm/types/@soroush.tech/design-system.svg?cacheSeconds=86400)](https://www.npmjs.com/package/@soroush.tech/design-system)
+[![license](https://img.shields.io/npm/l/@soroush.tech/design-system.svg?cacheSeconds=86400)](./LICENSE)
 
-An Emotion + [@soroush.tech/styled-system](https://www.npmjs.com/package/@soroush.tech/styled-system) React component library with a token-driven, consumer-extensible theme — layout primitives, forms, overlays, data display, and a headless markdown editor/renderer.
+**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.
 
-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.
-
-For the conventions every component must follow (prop typing, `system()` wiring, `shouldForwardProp`, Storybook rules, testing), read **[`design-system.md`](./design-system.md)** — this README is the map, that file is the law.
+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
 
@@ -19,7 +18,7 @@ For the conventions every component must follow (prop typing, `system()` wiring,
 npm i @soroush.tech/design-system
 ```
 
-`react`, `react-dom`, `@emotion/react`, and `@emotion/styled` are peer dependencies.
+`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.
 
 ---
 
@@ -32,29 +31,33 @@ 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`, `useTheme`, 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, useTheme, type Theme } from '@soroush.tech/design-system'
+import { styled, css, type Theme } from '@soroush.tech/design-system'
 ```
 
----
+`ThemeProvider` and the theme-value hooks (`useTheme`, `useDefaultProps`, `withTheme`) live at their own subpath:
 
-## Folder map
+```ts
+import { ThemeProvider, useTheme } from '@soroush.tech/design-system/theme'
+```
 
-| Path               | What it is                                                                                                                 |
-| ------------------ | -------------------------------------------------------------------------------------------------------------------------- |
-| `index.ts`         | Engine barrel — the themed `styled`, Emotion + `@soroush.tech/styled-system` re-exports                                    |
-| `styled.ts`        | The themed `styled` wrapper — `name`/`slot` options enable `theme.components` customization                                |
-| `themes.ts`        | `baseTheme` (the complete default theme — the only place hex values live), the `Theme` type layer, `createTheme`           |
-| `hooks/`           | `useTheme`, `useDefaultProps`, `useStyle`, `useCopyToClipboard`, `withTheme`, `withStyles`, `StylesConsumer`               |
-| `utils/`           | Style helpers — `alpha`, `spacing`, `clamp`, `luminance`, `generateBoxShadow`, `styleCache`, `createTheme`, `themeDefault` |
-| `utils/test/`      | `storiesOptions.ts` (token option arrays) and `storiesArgs.ts` (pre-built argTypes) for Storybook                          |
-| `docs/`            | Guides — [`theming.md`](./docs/theming.md) and [`customization.md`](./docs/customization.md)                               |
-| `design-system.md` | Architecture and conventions for building components                                                                       |
-| `ComponentName/`   | One folder per component (see inventory below)                                                                             |
+Style-computation helpers (`useStyle`, `withStyles`, `StylesConsumer`) — resolving a `StyleInput`/`StyleFactory` into a `CSSObject` — live at their own subpath:
 
-Every component folder contains `index.ts` (barrel), `ComponentName.tsx`, `README.md` (prop reference), `ComponentName.stories.tsx`, and `ComponentName.test.tsx`. Each component's own README documents its full prop API.
+```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:
+
+```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).
+
+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.
 
 ---
 
@@ -83,8 +86,6 @@ Every component folder contains `index.ts` (barrel), `ComponentName.tsx`, `READM
 | `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` |
-| `CodeBlock`  | Scrollable fenced-code surface with a copy-to-clipboard button                                                                                                                                                                               |
-| `Markdown`   | Headless markdown editor + renderer — exports `Control`, `Toolbar`, `Editor`, and `Preview` from `@soroush.tech/design-system/Markdown`                                                                                                      |
 
 ### Inputs & forms
 
@@ -96,7 +97,6 @@ Every component folder contains `index.ts` (barrel), `ComponentName.tsx`, `READM
 | `NativeSelect`                                       | Platform `<select>`                           |
 | `Select`                                             | Custom select built on `Popover` + `MenuItem` |
 | `MenuItem`                                           | Option row for `Select`'s listbox             |
-| `Field`                                              | Composed input field                          |
 | `Form`, `FormControl`, `FormLabel`, `FormHelperText` | Form composition and labeling                 |
 | `Pagination`                                         | Page navigation control                       |
 
@@ -145,8 +145,8 @@ The theme belongs to you — the package only ships defaults. This section is th
 `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/ThemeProvider'
-import { baseTheme, createTheme } from '@soroush.tech/design-system/themes'
+import { ThemeProvider } from '@soroush.tech/design-system/theme'
+import { baseTheme, createTheme } from '@soroush.tech/design-system/theme'
 
 // Zero-config: the built-in `baseTheme`.
 <ThemeProvider>{app}</ThemeProvider>
@@ -160,7 +160,7 @@ const [isDark, setIsDark] = useState(true)
 <ThemeProvider theme={isDark ? brandDark : brandLight}>{app}</ThemeProvider>
 ```
 
-`createTheme(base, overrides)` (exported from `…/themes` and `…/utils`) 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
 
@@ -209,7 +209,7 @@ const brand = createTheme(baseTheme, {
       },
 
       // A new variant value — register it first so it typechecks:
-      // declare module '@emotion/react' { interface ButtonVariants { dashed: true } }
+      // declare module '@soroush.tech/design-system/theme' { interface ButtonVariants { dashed: true } }
       variants: [
         {
           props: { variant: 'dashed' },
@@ -230,12 +230,12 @@ Your own components can join the same mechanism: create their roots with this pa
 
 ### Extending tokens (declaration merging)
 
-Every scale is an open interface declared on `@emotion/react`, 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/themes'
+import type { PaletteEntry } from '@soroush.tech/design-system/theme'
 
-declare module '@emotion/react' {
+declare module '@soroush.tech/design-system/theme' {
   interface ThemePalette {
     brand: PaletteEntry // new palette color
   }
@@ -276,3 +276,14 @@ Scaffold with the skill — it reads the live `Typography` files and `design-sys
 ```
 
 Then work through the checklist at the bottom of [`design-system.md`](./design-system.md).
+
+---
+
+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.
+
+---
+
+## Release notes
+
+Per-version notes for every published release live in
+[`release-notes/`](https://github.com/soroush-tech/core/tree/main/packages/design-system/release-notes).

package/dist/AppBar.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
-const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
 const require_Flex = require("./Flex.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 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

package/dist/AppBar.d.cts

@@ -1,5 +1,6 @@
-import { o as Theme } from "./index-Bihpwn75.cjs";
-import { n as FlexProps } from "./index-B1rCD6Oo.cjs";
+import "./index-DLJ-li1B.cjs";
+import { h as Theme } from "./themes-CUV79qWU.cjs";
+import { n as FlexProps } from "./index-zFYi0f1t.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,5 +1,6 @@
-import { o as Theme } from "./index-Dm9HfgV6.mjs";
-import { n as FlexProps } from "./index-z35LEYG8.mjs";
+import { h as Theme } from "./themes-CUV79qWU.mjs";
+import "./index-D8b5OCLe.mjs";
+import { n as FlexProps } from "./index-DEv2QslH.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,6 @@
-import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
-import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
 import { Flex } from "./Flex.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/AppBar/AppBar.tsx
 const shouldForwardProp = createShouldForwardProp([

package/dist/Avatar.cjs

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
-const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
 const require_Flex = require("./Flex.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_theme = require("./theme-Du6xgPsg.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");
-let _emotion_react = require("@emotion/react");
 //#region src/Avatar/Avatar.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
@@ -62,7 +62,7 @@ const AvatarImg = require_src.styled("img", {
 	display: "block"
 });
 function Avatar({ src, srcSet, alt, fallback, children, variant: variantProp, size: sizeProp, ring, ringColor: ringColorProp, ringWidth: ringWidthProp, ...rest }) {
-	const theme = (0, _emotion_react.useTheme)();
+	const theme = require_theme.useTheme();
 	const variant = variantProp ?? require_themeDefault.themeDefault(theme, "avatarVariant", "circular");
 	const size = sizeProp ?? require_themeDefault.themeDefault(theme, "avatarSize", "md");
 	const ringColor = ringColorProp ?? require_themeDefault.themeDefault(theme, "borderColor", "primary");

package/dist/Avatar.d.cts

@@ -1,5 +1,6 @@
-import { o as Theme } from "./index-Bihpwn75.cjs";
-import { n as FlexProps } from "./index-B1rCD6Oo.cjs";
+import "./index-DLJ-li1B.cjs";
+import { h as Theme } from "./themes-CUV79qWU.cjs";
+import { n as FlexProps } from "./index-zFYi0f1t.cjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];

package/dist/Avatar.d.mts

@@ -1,5 +1,6 @@
-import { o as Theme } from "./index-Dm9HfgV6.mjs";
-import { n as FlexProps } from "./index-z35LEYG8.mjs";
+import { h as Theme } from "./themes-CUV79qWU.mjs";
+import "./index-D8b5OCLe.mjs";
+import { n as FlexProps } from "./index-DEv2QslH.mjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];

package/dist/Avatar.mjs

@@ -1,6 +1,7 @@
-import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
-import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
 import { Flex } from "./Flex.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { r as useTheme } from "./theme-V6lYzd3j.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-BiocWFSR.cjs");
+const require_src = require("./src-C8PIppTy.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-FwTocqhP.cjs";
+import { s as ViewProps } from "./index-DjtGkwRM.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-pX7tBQdJ.mjs";
+import { s as ViewProps } from "./index-q6EgsH9R.mjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Backdrop.mjs

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

package/dist/Button.cjs

@@ -1,18 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
-const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
+const require_theme = require("./theme-Du6xgPsg.cjs");
 const require_CircularProgress = require("./CircularProgress.cjs");
 const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
-const require_useDefaultProps = require("./useDefaultProps-Cb-5FNok.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");
-let _emotion_react = require("@emotion/react");
 //#region src/Button/Button.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
-	"gap",
 	"variant",
 	"size",
 	"shape",
@@ -73,10 +71,6 @@ const baseStyles = {
 		opacity: .5
 	}
 };
-const buttonBaseSystem = (0, require_src.src_exports.system)({ gap: {
-	property: "gap",
-	scale: "space"
-} });
 const sizeVariants = ({ theme, size }) => {
 	const s = theme.sizes[size];
 	return {
@@ -127,15 +121,14 @@ const ButtonRoot = require_src.styled("button", {
 	systemProps: [
 		require_src.src_exports.space,
 		safeLayout,
-		buttonBaseSystem,
 		require_src.src_exports.typography,
 		require_src.src_exports.border
 	]
 })(baseStyles, sizeVariants, variantStyles, shapeVariants, fullWidthStyles, focusVisibleStyles);
 function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", letterSpacing = "tight", startIcon, endIcon, fullWidth, loading = false, loadingIndicator, loadingPosition = "center", children, disabled, href, ...rest }) {
 	const group = (0, react.useContext)(require_ButtonGroupContext.ButtonGroupContext);
-	const theme = (0, _emotion_react.useTheme)();
-	const dp = require_useDefaultProps.useDefaultProps("Button");
+	const theme = require_theme.useTheme();
+	const dp = require_theme.useDefaultProps("Button");
 	const resolvedVariant = variant ?? group.variant ?? dp.variant ?? require_themeDefault.themeDefault(theme, "buttonVariant", "contained");
 	const resolvedColor = color ?? group.color ?? dp.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
 	const resolvedSize = size ?? group.size ?? dp.size ?? require_themeDefault.themeDefault(theme, "size", "md");

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-DASvoACZ.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-BJ8OC_Zh.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-C0xMvDjL.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-D8U2tk1L.mjs";
 export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.mjs

@@ -1,15 +1,14 @@
-import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
-import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "./utils.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-V6lYzd3j.mjs";
 import { CircularProgress } from "./CircularProgress.mjs";
 import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
-import { t as useDefaultProps } from "./useDefaultProps-CoApb4KT.mjs";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Button/Button.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
-	"gap",
 	"variant",
 	"size",
 	"shape",
@@ -70,10 +69,6 @@ const baseStyles = {
 		opacity: .5
 	}
 };
-const buttonBaseSystem = (0, src_exports.system)({ gap: {
-	property: "gap",
-	scale: "space"
-} });
 const sizeVariants = ({ theme, size }) => {
 	const s = theme.sizes[size];
 	return {
@@ -124,7 +119,6 @@ const ButtonRoot = styled("button", {
 	systemProps: [
 		src_exports.space,
 		safeLayout,
-		buttonBaseSystem,
 		src_exports.typography,
 		src_exports.border
 	]

package/dist/ButtonGroup.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
-const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
 const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
 let react = require("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-CyZYXDn0.cjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index--mvTGo8F.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-BqVgv2B_.mjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-DF3Hweir.mjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/ButtonGroup.mjs

@@ -1,5 +1,5 @@
-import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
-import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "./utils.mjs";
 import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
 import { useMemo } from "react";

package/dist/Card.cjs

@@ -1,13 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
-const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
-const require_useDefaultProps = require("./useDefaultProps-Cb-5FNok.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_theme = require("./theme-Du6xgPsg.cjs");
 const require_Paper = require("./Paper.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-1YtNCUKo.cjs");
+const require_Icon = require("./Icon-BOjk5r39.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _emotion_react = require("@emotion/react");
 //#region src/Card/Card.tsx
 const variantStyle = ({ theme, variant }) => {
 	if (variant === "bracketBox") {
@@ -57,8 +56,8 @@ const CardIcon = require_src.styled(require_Icon.Icon, {
 	slot: "icon"
 })();
 function Card({ variant: variantProp, icon, title, caption, iconProps, titleProps, captionProps, flexDirection = "column", children, ...rest }) {
-	const theme = (0, _emotion_react.useTheme)();
-	const dp = require_useDefaultProps.useDefaultProps("Card");
+	const theme = require_theme.useTheme();
+	const dp = require_theme.useDefaultProps("Card");
 	const variant = variantProp ?? dp.variant ?? require_themeDefault.themeDefault(theme, "cardVariant", "paper");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardSurface, {
 		variant,

package/dist/Card.d.cts

@@ -1,6 +1,6 @@
-import { r as PaperProps } from "./index-x80UG39F.cjs";
-import { a as TypographyProps } from "./index-CDVnvjIE.cjs";
-import { n as IconProps, r as IconName } from "./index-Dp81rWM1.cjs";
+import { r as PaperProps } from "./index-CYTaYcm3.cjs";
+import { a as TypographyProps } from "./index-CvaEVk-f.cjs";
+import { n as IconProps, r as IconName } from "./index-CA_X-mXg.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-BLRMuO_x.mjs";
-import { a as TypographyProps } from "./index-DE5PtzPn.mjs";
-import { n as IconProps, r as IconName } from "./index-BLfFycfJ.mjs";
+import { r as PaperProps } from "./index-KZUd8B5E.mjs";
+import { a as TypographyProps } from "./index-B2hrssyF.mjs";
+import { n as IconProps, r as IconName } from "./index-BL3jwIQU.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 { d as styled, u as useTheme } from "./src-DcNT2aIK.mjs";
-import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
-import { t as useDefaultProps } from "./useDefaultProps-CoApb4KT.mjs";
+import { o as styled } from "./src-BJy4dM4f.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-V6lYzd3j.mjs";
 import { Paper } from "./Paper.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-CAKRmFz3.mjs";
+import { t as Icon } from "./Icon-CYjD0Bad.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Card/Card.tsx

package/dist/Checkbox.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
-const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_FormControl = require("./FormControl.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Checkbox.d.cts

@@ -1,2 +1,43 @@
-import { i as CheckboxSize, n as CheckboxColor, r as CheckboxProps, t as Checkbox } from "./index-DOPXpr2J.cjs";
+import { r as index_d_exports } from "./index-DLJ-li1B.cjs";
+import { d as PaletteColor, h as Theme } from "./themes-CUV79qWU.cjs";
+import { ChangeEvent, ReactNode } from "react";
+//#region src/Checkbox/Checkbox.d.ts
+type CheckboxColor = PaletteColor;
+type CheckboxSize = keyof Theme['sizes'];
+interface CheckboxProps extends index_d_exports.SpaceProps<Theme> {
+  /** Controlled checked state. */
+  checked?: boolean;
+  /** Initial checked state for uncontrolled usage. */
+  defaultChecked?: boolean;
+  /** Disables the checkbox. */
+  disabled?: boolean;
+  /** Stroke/fill color. `'default'` resolves to `theme.text.secondary`. Default: `'default'`. */
+  color?: CheckboxColor;
+  /** Icon size. Default: `'medium'`. */
+  size?: CheckboxSize;
+  /** Stretches the root to `width: 100%`. Default: `false`. */
+  fullWidth?: boolean;
+  /** Displays the indeterminate state (dash icon). Takes priority over `checked`. */
+  indeterminate?: boolean;
+  /** Custom icon for the unchecked state. */
+  icon?: ReactNode;
+  /** Custom icon for the checked state. */
+  checkedIcon?: ReactNode;
+  /** Called when the user toggles the checkbox. */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  /** Forwarded to the underlying `<input>` for label association. */
+  id?: string;
+  /** Marks the field as required in a form. */
+  required?: boolean;
+  name?: string;
+  value?: string | number | readonly string[];
+  children?: ReactNode;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+declare function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colorProp, size: sizeProp, fullWidth: fullWidthProp, indeterminate, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<CheckboxProps>): import("react").JSX.Element;
+//#endregion
 export { Checkbox, CheckboxColor, CheckboxProps, CheckboxSize };

package/dist/Checkbox.d.mts

@@ -1,2 +1,43 @@
-import { i as CheckboxSize, n as CheckboxColor, r as CheckboxProps, t as Checkbox } from "./index-Bx24ZnOV.mjs";
+import { d as PaletteColor, h as Theme } from "./themes-CUV79qWU.mjs";
+import { r as index_d_exports } from "./index-D8b5OCLe.mjs";
+import { ChangeEvent, ReactNode } from "react";
+//#region src/Checkbox/Checkbox.d.ts
+type CheckboxColor = PaletteColor;
+type CheckboxSize = keyof Theme['sizes'];
+interface CheckboxProps extends index_d_exports.SpaceProps<Theme> {
+  /** Controlled checked state. */
+  checked?: boolean;
+  /** Initial checked state for uncontrolled usage. */
+  defaultChecked?: boolean;
+  /** Disables the checkbox. */
+  disabled?: boolean;
+  /** Stroke/fill color. `'default'` resolves to `theme.text.secondary`. Default: `'default'`. */
+  color?: CheckboxColor;
+  /** Icon size. Default: `'medium'`. */
+  size?: CheckboxSize;
+  /** Stretches the root to `width: 100%`. Default: `false`. */
+  fullWidth?: boolean;
+  /** Displays the indeterminate state (dash icon). Takes priority over `checked`. */
+  indeterminate?: boolean;
+  /** Custom icon for the unchecked state. */
+  icon?: ReactNode;
+  /** Custom icon for the checked state. */
+  checkedIcon?: ReactNode;
+  /** Called when the user toggles the checkbox. */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  /** Forwarded to the underlying `<input>` for label association. */
+  id?: string;
+  /** Marks the field as required in a form. */
+  required?: boolean;
+  name?: string;
+  value?: string | number | readonly string[];
+  children?: ReactNode;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+declare function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colorProp, size: sizeProp, fullWidth: fullWidthProp, indeterminate, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<CheckboxProps>): import("react").JSX.Element;
+//#endregion
 export { Checkbox, CheckboxColor, CheckboxProps, CheckboxSize };

package/dist/Checkbox.mjs

@@ -1,5 +1,5 @@
-import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
-import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/CircularProgress.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
-const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");