@soroush.tech/design-system 1.0.0 → 1.2.0

package/README.md

@@ -1,11 +1,11 @@
 # @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)
 
 **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.

package/dist/AppBar.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_Flex = require("./Flex.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/AppBar.d.cts

@@ -1,6 +1,6 @@
-import "./index-BVX_Jq2G.cjs";
-import { m as Theme } from "./themes-BTGww2YK.cjs";
-import { n as FlexProps } from "./index-DhcmRr8Q.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,6 +1,6 @@
-import { m as Theme } from "./themes-BTGww2YK.mjs";
-import "./index-B66h9kbP.mjs";
-import { n as FlexProps } from "./index-BJcHQUga.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/Avatar.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_Flex = require("./Flex.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Du6xgPsg.cjs");
+const require_theme = require("./theme-CleLAV6A.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 "./index-BVX_Jq2G.cjs";
-import { m as Theme } from "./themes-BTGww2YK.cjs";
-import { n as FlexProps } from "./index-DhcmRr8Q.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,6 +1,6 @@
-import { m as Theme } from "./themes-BTGww2YK.mjs";
-import "./index-B66h9kbP.mjs";
-import { n as FlexProps } from "./index-BJcHQUga.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,7 +1,7 @@
 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 { r as useTheme } from "./theme-Cudynq5K.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-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.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-B8FOqBiS.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-CYNgNatZ.mjs";
+import { s as ViewProps } from "./index-q6EgsH9R.mjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Button.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-Du6xgPsg.cjs");
+const require_theme = require("./theme-CleLAV6A.cjs");
 const require_CircularProgress = require("./CircularProgress.cjs");
 const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
 let react = require("react");
@@ -11,7 +11,6 @@ let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/sty
 //#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",
@@ -72,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 {
@@ -126,7 +121,6 @@ const ButtonRoot = require_src.styled("button", {
 	systemProps: [
 		require_src.src_exports.space,
 		safeLayout,
-		buttonBaseSystem,
 		require_src.src_exports.typography,
 		require_src.src_exports.border
 	]

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-BnCp6k4s.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-CLCtvcKA.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,7 +1,7 @@
 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 { n as useDefaultProps, r as useTheme } from "./theme-Cudynq5K.mjs";
 import { CircularProgress } from "./CircularProgress.mjs";
 import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
 import { useContext } from "react";
@@ -9,7 +9,6 @@ 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,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
 const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");

package/dist/ButtonGroup.d.cts

@@ -1,2 +1,2 @@
-import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-C1vVYigQ.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-DwjxjLcD.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/Card.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Du6xgPsg.cjs");
+const require_theme = require("./theme-CleLAV6A.cjs");
 const require_Paper = require("./Paper.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-zsHe7hWR.cjs");
+const require_Icon = require("./Icon-ByDvM-t1.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-HnvGdPCp.cjs";
-import { a as TypographyProps } from "./index-BLnOsdgc.cjs";
-import { n as IconProps, r as IconName } from "./index-DN7IvJeV.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-DLiHZtDi.mjs";
-import { a as TypographyProps } from "./index-BF2KXGBM.mjs";
-import { n as IconProps, r as IconName } from "./index-D0x1ZMVG.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 { 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 { n as useDefaultProps, r as useTheme } from "./theme-Cudynq5K.mjs";
 import { Paper } from "./Paper.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-bv8Z38l-.mjs";
+import { t as Icon } from "./Icon-GgwNXKEY.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Card/Card.tsx

package/dist/Checkbox.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_FormControl = require("./FormControl.cjs");
 let react = require("react");

package/dist/Checkbox.d.cts

@@ -1,5 +1,5 @@
-import { r as index_d_exports } from "./index-BVX_Jq2G.cjs";
-import { d as PaletteColor, m as Theme } from "./themes-BTGww2YK.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;

package/dist/Checkbox.d.mts

@@ -1,5 +1,5 @@
-import { d as PaletteColor, m as Theme } from "./themes-BTGww2YK.mjs";
-import { r as index_d_exports } from "./index-B66h9kbP.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;

package/dist/CircularProgress.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
 require("react");

package/dist/CircularProgress.d.cts

@@ -1,6 +1,6 @@
-import { r as index_d_exports } from "./index-BVX_Jq2G.cjs";
-import { m as Theme } from "./themes-BTGww2YK.cjs";
-import { n as ButtonColor } from "./index-BnCp6k4s.cjs";
+import { r as index_d_exports } from "./index-DLJ-li1B.cjs";
+import { h as Theme } from "./themes-CUV79qWU.cjs";
+import { n as ButtonColor } from "./index-BJ8OC_Zh.cjs";
 import { HTMLAttributes } from "react";
 //#region src/CircularProgress/CircularProgress.d.ts
 type CircularProgressVariant = 'indeterminate' | 'determinate';

package/dist/CircularProgress.d.mts

@@ -1,6 +1,6 @@
-import { m as Theme } from "./themes-BTGww2YK.mjs";
-import { r as index_d_exports } from "./index-B66h9kbP.mjs";
-import { n as ButtonColor } from "./index-CLCtvcKA.mjs";
+import { h as Theme } from "./themes-CUV79qWU.mjs";
+import { r as index_d_exports } from "./index-D8b5OCLe.mjs";
+import { n as ButtonColor } from "./index-D8U2tk1L.mjs";
 import { HTMLAttributes } from "react";
 //#region src/CircularProgress/CircularProgress.d.ts
 type CircularProgressVariant = 'indeterminate' | 'determinate';

package/dist/Drawer.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_Paper = require("./Paper.cjs");
-const require_Modal = require("./Modal-DZH-DzMZ.cjs");
+const require_Modal = require("./Modal-S2nb35q-.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@emotion/react");
@@ -39,10 +39,11 @@ const anchorPosition = {
 		width: "100%"
 	}
 };
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["anchor", "duration"]);
 const DrawerPanel = require_src.styled(require_Paper.Paper, {
 	name: "Drawer",
 	label: "Drawer",
-	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["anchor", "duration"])
+	shouldForwardProp
 })(({ anchor, duration }) => ({
 	position: "fixed",
 	...anchorPosition[anchor],

package/dist/Drawer.d.cts

@@ -1,5 +1,5 @@
-import { n as PaperElevation } from "./index-HnvGdPCp.cjs";
-import { o as ModalProps } from "./index-DdFxl06Q.cjs";
+import { n as PaperElevation } from "./index-CYTaYcm3.cjs";
+import { o as ModalProps } from "./index-BfpjEqqt.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-DLiHZtDi.mjs";
-import { o as ModalProps } from "./index-BpLv6Y8m.mjs";
+import { n as PaperElevation } from "./index-KZUd8B5E.mjs";
+import { o as ModalProps } from "./index-Ds__py2h.mjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/Drawer.mjs

@@ -1,6 +1,6 @@
 import { o as styled, r as keyframes, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
 import { Paper } from "./Paper.mjs";
-import { t as Modal } from "./Modal-dy5l7gfH.mjs";
+import { t as Modal } from "./Modal-COLrJoNW.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Drawer/Drawer.tsx
@@ -36,10 +36,11 @@ const anchorPosition = {
 		width: "100%"
 	}
 };
+const shouldForwardProp = createShouldForwardProp(["anchor", "duration"]);
 const DrawerPanel = styled(Paper, {
 	name: "Drawer",
 	label: "Drawer",
-	shouldForwardProp: createShouldForwardProp(["anchor", "duration"])
+	shouldForwardProp
 })(({ anchor, duration }) => ({
 	position: "fixed",
 	...anchorPosition[anchor],

package/dist/Flex.cjs

@@ -1,18 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_View = require("./View.cjs");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 //#region src/Flex/Flex.tsx
-const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props, "gap"]);
-const gapSystem = (0, require_src.src_exports.system)({ gap: {
-	property: "gap",
-	scale: "space"
-} });
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]);
 const Flex = require_src.styled(require_View.View, {
 	name: "Flex",
 	label: "flex",
 	shouldForwardProp,
-	systemProps: [require_src.src_exports.flexbox, gapSystem]
+	systemProps: [require_src.src_exports.flexbox]
 })({
 	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-DhcmRr8Q.cjs";
+import { n as FlexProps, r as GapToken, t as Flex } from "./index-zFYi0f1t.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-BJcHQUga.mjs";
+import { n as FlexProps, r as GapToken, t as Flex } from "./index-DEv2QslH.mjs";
 export { Flex, FlexProps, GapToken };

package/dist/Flex.mjs

@@ -1,16 +1,12 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
 import { View } from "./View.mjs";
 //#region src/Flex/Flex.tsx
-const shouldForwardProp = createShouldForwardProp([...props, "gap"]);
-const gapSystem = (0, src_exports.system)({ gap: {
-	property: "gap",
-	scale: "space"
-} });
+const shouldForwardProp = createShouldForwardProp([...props]);
 const Flex = styled(View, {
 	name: "Flex",
 	label: "flex",
 	shouldForwardProp,
-	systemProps: [src_exports.flexbox, gapSystem]
+	systemProps: [src_exports.flexbox]
 })({
 	display: "flex",
 	flexDirection: "column"

package/dist/FocusTrap.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/FocusTrap/FocusTrap.tsx

package/dist/Form.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Form.d.cts

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

package/dist/Form.d.mts

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

package/dist/FormControl.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_View = require("./View.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Du6xgPsg.cjs");
+const require_theme = require("./theme-CleLAV6A.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 { m as Theme } from "./themes-BTGww2YK.cjs";
-import { s as ViewProps } from "./index-B8FOqBiS.cjs";
+import { h as Theme } from "./themes-CUV79qWU.cjs";
+import { s as ViewProps } from "./index-DjtGkwRM.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 { m as Theme } from "./themes-BTGww2YK.mjs";
-import { s as ViewProps } from "./index-CYNgNatZ.mjs";
+import { h as Theme } from "./themes-CUV79qWU.mjs";
+import { s as ViewProps } from "./index-q6EgsH9R.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-BJy4dM4f.mjs";
 import { View } from "./View.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-V6lYzd3j.mjs";
+import { r as useTheme } from "./theme-Cudynq5K.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.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_Typography = require("./Typography.cjs");
 const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
 const require_FormContext = require("./FormContext-BGCsWAFc.cjs");

package/dist/FormHelperText.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BLnOsdgc.cjs";
+import { a as TypographyProps } from "./index-CvaEVk-f.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-BF2KXGBM.mjs";
+import { a as TypographyProps } from "./index-B2hrssyF.mjs";
 import { ReactNode } from "react";
 //#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {

package/dist/FormLabel.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_Typography = require("./Typography.cjs");
 const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
 const require_FormContext = require("./FormContext-BGCsWAFc.cjs");

package/dist/FormLabel.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BLnOsdgc.cjs";
+import { a as TypographyProps } from "./index-CvaEVk-f.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-BF2KXGBM.mjs";
+import { a as TypographyProps } from "./index-B2hrssyF.mjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {

package/dist/Grid.cjs

@@ -1,37 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-C8PIppTy.cjs");
+const require_src = require("./src-BJrcLd7P.cjs");
 const require_View = require("./View.cjs");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 //#region src/Grid/Grid.tsx
-const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
-	..._soroush_tech_styled_system_should_forward_prop.props,
-	"gap",
-	"columnGap",
-	"rowGap"
-]);
-const gapSystem = (0, require_src.src_exports.system)({
-	gap: {
-		property: "gap",
-		scale: "space"
-	},
-	columnGap: {
-		property: "columnGap",
-		scale: "space"
-	},
-	rowGap: {
-		property: "rowGap",
-		scale: "space"
-	}
-});
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]);
 const Grid = require_src.styled(require_View.View, {
 	name: "Grid",
 	label: "grid",
 	shouldForwardProp,
-	systemProps: [
-		gapSystem,
-		require_src.src_exports.grid,
-		require_src.src_exports.flexbox
-	]
+	systemProps: [require_src.src_exports.grid, require_src.src_exports.flexbox]
 })({ display: "grid" });
 //#endregion
 exports.Grid = Grid;