@soroush.tech/design-system 2.0.0-alpha.3 → 2.0.0-alpha.5

package/dist/AppBar.d.cts

@@ -1,6 +1,6 @@
-import { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
-import { n as FlexProps } from "./index-CS4yFHlC.cjs";
+import { T as Theme } from "./themes-DEom6o-J.cjs";
+import "./index-C1uWcbTj.cjs";
+import { n as FlexProps } from "./index-ClclP_mB.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 { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { n as FlexProps } from "./index-CWYckiaS.mjs";
+import { T as Theme } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.mjs";
+import { n as FlexProps } from "./index-BUrUPbcB.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/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-DfAqr7qo.cjs");
+const require_theme = require("./theme-B0P8owUo.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 { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
-import { n as FlexProps } from "./index-CS4yFHlC.cjs";
+import { T as Theme } from "./themes-DEom6o-J.cjs";
+import "./index-C1uWcbTj.cjs";
+import { n as FlexProps } from "./index-ClclP_mB.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 { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { n as FlexProps } from "./index-CWYckiaS.mjs";
+import { T as Theme } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.mjs";
+import { n as FlexProps } from "./index-BUrUPbcB.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-C1o9qa2E.mjs";
+import { r as useTheme } from "./theme-DdjeZjsA.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-C8SeYUxJ.cjs";
+import { s as ViewProps } from "./index-CSoaaZ20.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-t6XUvJ_3.mjs";
+import { s as ViewProps } from "./index-CllDs3D0.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-DfAqr7qo.cjs");
+const require_theme = require("./theme-B0P8owUo.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-B2eLreA5.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-DT6KvZ1x.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-DYtIEMr9.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-FiPb4-DU.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-C1o9qa2E.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-DdjeZjsA.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-D0XX9v0b.cjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-ChPaQZ6F.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-BT-mcuE6.mjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-yQfi7MqO.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-DfAqr7qo.cjs");
+const require_theme = require("./theme-B0P8owUo.cjs");
 const require_Paper = require("./Paper.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-Cn6Zx8wb.cjs");
+const require_Icon = require("./Icon-DRBVfAHY.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-Ddetmkqd.cjs";
-import { a as TypographyProps } from "./index-D5Rj4uWe.cjs";
-import { n as IconProps, r as IconName } from "./index-CxDY_w-H.cjs";
+import { r as PaperProps } from "./index-B2ljqGWF.cjs";
+import { a as TypographyProps } from "./index-5w87AK-Y.cjs";
+import { n as IconProps, r as IconName } from "./index-DmJCHY90.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-suqlMrTp.mjs";
-import { a as TypographyProps } from "./index-DJ8NTYR8.mjs";
-import { n as IconProps, r as IconName } from "./index-BBV7_p-W.mjs";
+import { r as PaperProps } from "./index-BcU5ow8v.mjs";
+import { a as TypographyProps } from "./index-yR_0laAQ.mjs";
+import { n as IconProps, r as IconName } from "./index-BUb6X9OH.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-C1o9qa2E.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-DdjeZjsA.mjs";
 import { Paper } from "./Paper.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-BGcd6yy0.mjs";
+import { t as Icon } from "./Icon-CnYvHWhh.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 { T as Theme, x as PaletteColor } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
+import { T as Theme, x as PaletteColor } from "./themes-DEom6o-J.cjs";
+import "./index-C1uWcbTj.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 { T as Theme, x as PaletteColor } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
+import { T as Theme, x as PaletteColor } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.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 { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
-import { n as ButtonColor } from "./index-B2eLreA5.cjs";
+import { T as Theme } from "./themes-DEom6o-J.cjs";
+import "./index-C1uWcbTj.cjs";
+import { n as ButtonColor } from "./index-DT6KvZ1x.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 { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { n as ButtonColor } from "./index-DYtIEMr9.mjs";
+import { T as Theme } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.mjs";
+import { n as ButtonColor } from "./index-FiPb4-DU.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/CircularProgress/CircularProgress.d.ts

package/dist/Drawer.cjs

@@ -105,6 +105,7 @@ function Drawer({ id, children, isOpen, onClose, anchor = "left", elevation = 16
 	(0, react.useEffect)(() => {
 		if (isOpen === void 0 || isOpen === isShownRef.current) return;
 		const panel = panelRef.current;
+		if (typeof panel.showPopover !== "function") return;
 		isShownRef.current = isOpen;
 		if (isOpen) panel.showPopover();
 		else {

package/dist/Drawer.d.cts

@@ -1,5 +1,5 @@
-import { i as ButtonProps } from "./index-B2eLreA5.cjs";
-import { n as PaperElevation } from "./index-Ddetmkqd.cjs";
+import { i as ButtonProps } from "./index-DT6KvZ1x.cjs";
+import { n as PaperElevation } from "./index-B2ljqGWF.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 { i as ButtonProps } from "./index-DYtIEMr9.mjs";
-import { n as PaperElevation } from "./index-suqlMrTp.mjs";
+import { i as ButtonProps } from "./index-FiPb4-DU.mjs";
+import { n as PaperElevation } from "./index-BcU5ow8v.mjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/Drawer.mjs

@@ -102,6 +102,7 @@ function Drawer({ id, children, isOpen, onClose, anchor = "left", elevation = 16
 	useEffect(() => {
 		if (isOpen === void 0 || isOpen === isShownRef.current) return;
 		const panel = panelRef.current;
+		if (typeof panel.showPopover !== "function") return;
 		isShownRef.current = isOpen;
 		if (isOpen) panel.showPopover();
 		else {

package/dist/Flex.cjs

@@ -8,11 +8,7 @@ const Flex = require_src.styled(require_View.View, {
 	name: "Flex",
 	label: "flex",
 	shouldForwardProp,
-	systemProps: [
-		require_src.src_exports.layoutFlex,
-		require_src.src_exports.flexbox,
-		require_src.src_exports.space
-	]
+	systemProps: [require_src.src_exports.flexbox, require_src.src_exports.space]
 })({
 	display: "flex",
 	flexDirection: "column"

package/dist/Flex.d.cts

@@ -1,2 +1,2 @@
-import { n as FlexProps, r as GapToken, t as Flex } from "./index-CS4yFHlC.cjs";
+import { n as FlexProps, r as GapToken, t as Flex } from "./index-ClclP_mB.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-CWYckiaS.mjs";
+import { n as FlexProps, r as GapToken, t as Flex } from "./index-BUrUPbcB.mjs";
 export { Flex, FlexProps, GapToken };

package/dist/Flex.mjs

@@ -6,11 +6,7 @@ const Flex = styled(View, {
 	name: "Flex",
 	label: "flex",
 	shouldForwardProp,
-	systemProps: [
-		src_exports.layoutFlex,
-		src_exports.flexbox,
-		src_exports.space
-	]
+	systemProps: [src_exports.flexbox, src_exports.space]
 })({
 	display: "flex",
 	flexDirection: "column"

package/dist/Form.d.cts

@@ -1,4 +1,4 @@
-import { T as Theme } from "./themes-Dswy4M6B.cjs";
+import { T as Theme } from "./themes-DEom6o-J.cjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/Form.d.mts

@@ -1,4 +1,4 @@
-import { T as Theme } from "./themes-C3RTORGO.mjs";
+import { T as Theme } from "./themes-CQKn24UN.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-DfAqr7qo.cjs");
+const require_theme = require("./theme-B0P8owUo.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 { T as Theme } from "./themes-Dswy4M6B.cjs";
-import { s as ViewProps } from "./index-C8SeYUxJ.cjs";
+import { T as Theme } from "./themes-DEom6o-J.cjs";
+import { s as ViewProps } from "./index-CSoaaZ20.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 { T as Theme } from "./themes-C3RTORGO.mjs";
-import { s as ViewProps } from "./index-t6XUvJ_3.mjs";
+import { T as Theme } from "./themes-CQKn24UN.mjs";
+import { s as ViewProps } from "./index-CllDs3D0.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-C1o9qa2E.mjs";
+import { r as useTheme } from "./theme-DdjeZjsA.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-D5Rj4uWe.cjs";
+import { a as TypographyProps } from "./index-5w87AK-Y.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-DJ8NTYR8.mjs";
+import { a as TypographyProps } from "./index-yR_0laAQ.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-D5Rj4uWe.cjs";
+import { a as TypographyProps } from "./index-5w87AK-Y.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-DJ8NTYR8.mjs";
+import { a as TypographyProps } from "./index-yR_0laAQ.mjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {

package/dist/Grid.d.cts

@@ -1,16 +1,16 @@
-import { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
-import { s as ViewProps } from "./index-C8SeYUxJ.cjs";
+import { T as Theme } from "./themes-DEom6o-J.cjs";
+import "./index-C1uWcbTj.cjs";
+import { s as ViewProps } from "./index-CSoaaZ20.cjs";
 import { FlexboxProps, GridProps as GridProps$1, LayoutGridProps } 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'];
 /**
  * `layout` lays the grid out from `theme.layout` - the theme's columns, gutter and margin per
- * breakpoint, its own at every breakpoint (`layout={{ gutter: 8 }}`), or its own for a named
- * breakpoint: `layout={{ lg: { columns: 16 } }}`. Both mix: `{ gutter: 8, lg: { columns: 16 } }`.
- * View draws the frame (margin, max width); Grid adds the columns. The layout owns what it
- * writes, so column spacing comes from `gutter` and rows take `rowGap`.
+ * breakpoint, its own at every breakpoint (`layout={{ maxWidth: '1280px' }}`), or its own from
+ * a named breakpoint up: `layout={{ lg: { columns: 16 } }}`. View draws the frame (margin, max
+ * width); Grid adds the columns. The gutter is the grid's own `gap` / `columnGap` where it sets
+ * one - single or responsive - and the theme's elsewhere; rows take `gap` or `rowGap`.
  */
 interface GridProps extends Omit<ViewProps, 'layout'>, GridProps$1<Theme>, FlexboxProps<Theme>, LayoutGridProps<Theme> {}
 declare const Grid: import("@emotion/styled").StyledComponent<{

package/dist/Grid.d.mts

@@ -1,16 +1,16 @@
-import { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { s as ViewProps } from "./index-t6XUvJ_3.mjs";
+import { T as Theme } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.mjs";
+import { s as ViewProps } from "./index-CllDs3D0.mjs";
 import { FlexboxProps, GridProps as GridProps$1, LayoutGridProps } 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'];
 /**
  * `layout` lays the grid out from `theme.layout` - the theme's columns, gutter and margin per
- * breakpoint, its own at every breakpoint (`layout={{ gutter: 8 }}`), or its own for a named
- * breakpoint: `layout={{ lg: { columns: 16 } }}`. Both mix: `{ gutter: 8, lg: { columns: 16 } }`.
- * View draws the frame (margin, max width); Grid adds the columns. The layout owns what it
- * writes, so column spacing comes from `gutter` and rows take `rowGap`.
+ * breakpoint, its own at every breakpoint (`layout={{ maxWidth: '1280px' }}`), or its own from
+ * a named breakpoint up: `layout={{ lg: { columns: 16 } }}`. View draws the frame (margin, max
+ * width); Grid adds the columns. The gutter is the grid's own `gap` / `columnGap` where it sets
+ * one - single or responsive - and the theme's elsewhere; rows take `gap` or `rowGap`.
  */
 interface GridProps extends Omit<ViewProps, 'layout'>, GridProps$1<Theme>, FlexboxProps<Theme>, LayoutGridProps<Theme> {}
 declare const Grid: import("@emotion/styled").StyledComponent<{

package/dist/{Icon-BGcd6yy0.mjs → Icon-CnYvHWhh.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-C1o9qa2E.mjs";
+import { r as useTheme } from "./theme-DdjeZjsA.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Icon/icons/AccountTree.tsx

package/dist/{Icon-Cn6Zx8wb.cjs → Icon-DRBVfAHY.cjs}

@@ -1,6 +1,6 @@
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-DfAqr7qo.cjs");
+const require_theme = require("./theme-B0P8owUo.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.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Icon = require("./Icon-Cn6Zx8wb.cjs");
+const require_Icon = require("./Icon-DRBVfAHY.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-CxDY_w-H.cjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-DmJCHY90.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-BBV7_p-W.mjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-BUb6X9OH.mjs";
 export { Icon, type IconName, IconProps, icons };

package/dist/Icon.mjs

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

package/dist/Image.d.cts

@@ -1,5 +1,5 @@
-import { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
+import { T as Theme } from "./themes-DEom6o-J.cjs";
+import "./index-C1uWcbTj.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 { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
+import { T as Theme } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.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 { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
-import { n as ButtonColor } from "./index-B2eLreA5.cjs";
+import { T as Theme } from "./themes-DEom6o-J.cjs";
+import "./index-C1uWcbTj.cjs";
+import { n as ButtonColor } from "./index-DT6KvZ1x.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 { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { n as ButtonColor } from "./index-DYtIEMr9.mjs";
+import { T as Theme } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.mjs";
+import { n as ButtonColor } from "./index-FiPb4-DU.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-DfAqr7qo.cjs");
+const require_theme = require("./theme-B0P8owUo.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-D5Rj4uWe.cjs";
+import { a as TypographyProps } from "./index-5w87AK-Y.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-DJ8NTYR8.mjs";
+import { a as TypographyProps } from "./index-yR_0laAQ.mjs";
 import { AnchorHTMLAttributes } from "react";
 //#region src/Link/Link.d.ts
 type LinkUnderline = 'always' | 'hover' | 'none';

package/dist/Link.mjs

@@ -1,6 +1,6 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-C1o9qa2E.mjs";
+import { r as useTheme } from "./theme-DdjeZjsA.mjs";
 import { Typography } from "./Typography.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/MenuItem.cjs

@@ -1,8 +1,8 @@
 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-DfAqr7qo.cjs");
-const require_Icon = require("./Icon-Cn6Zx8wb.cjs");
+const require_theme = require("./theme-B0P8owUo.cjs");
+const require_Icon = require("./Icon-DRBVfAHY.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/MenuItem/MenuItem.tsx

package/dist/MenuItem.d.cts

@@ -1,5 +1,5 @@
-import { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
+import { T as Theme } from "./themes-DEom6o-J.cjs";
+import "./index-C1uWcbTj.cjs";
 import { ElementType, ReactNode } from "react";
 //#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];

package/dist/MenuItem.d.mts

@@ -1,5 +1,5 @@
-import { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
+import { T as Theme } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];

package/dist/MenuItem.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-C1o9qa2E.mjs";
-import { t as Icon } from "./Icon-BGcd6yy0.mjs";
+import { r as useTheme } from "./theme-DdjeZjsA.mjs";
+import { t as Icon } from "./Icon-CnYvHWhh.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/MenuItem/MenuItem.tsx

package/dist/Modal.d.cts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-BW4rc8cK.cjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-CAjXum0k.cjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/Modal.d.mts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-BbngAEDY.mjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-Dq5PHWL4.mjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };