@soroush.tech/design-system 0.1.0 → 1.1.0

package/dist/CircularProgress.d.cts

@@ -1,5 +1,6 @@
-import { l as index_d_exports, o as Theme } from "./index-Bihpwn75.cjs";
-import { n as ButtonColor } from "./index-DASvoACZ.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,5 +1,6 @@
-import { l as index_d_exports, o as Theme } from "./index-Dm9HfgV6.mjs";
-import { n as ButtonColor } from "./index-C0xMvDjL.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/CircularProgress.mjs

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

package/dist/Drawer.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
 const require_Paper = require("./Paper.cjs");
-const require_Modal = require("./Modal-BDMPTSXv.cjs");
+const require_Modal = require("./Modal-DZH-DzMZ.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@emotion/react");

package/dist/Drawer.d.cts

@@ -1,5 +1,5 @@
-import { n as PaperElevation } from "./index-x80UG39F.cjs";
-import { o as ModalProps } from "./index-BX5-NfbX.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-BLRMuO_x.mjs";
-import { o as ModalProps } from "./index-Dy03o__A.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 { a as createShouldForwardProp, d as styled, s as keyframes } from "./src-DcNT2aIK.mjs";
+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-DR60peRg.mjs";
+import { t as Modal } from "./Modal-dy5l7gfH.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Drawer/Drawer.tsx

package/dist/Flex.cjs

@@ -1,18 +1,14 @@
 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 _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-B1rCD6Oo.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-z35LEYG8.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,10 @@
-import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+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 Flex = styled(View, {
 	name: "Flex",
 	label: "flex",
-	shouldForwardProp,
-	systemProps: [src_exports.flexbox, gapSystem]
+	shouldForwardProp: createShouldForwardProp([...props]),
+	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-BiocWFSR.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/FocusTrap/FocusTrap.tsx

package/dist/FocusTrap.mjs

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

package/dist/Form.cjs

@@ -1,7 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
-const require_FormContext = require("./FormContext-CRmRgDgu.cjs");
-require("@emotion/react");
+const require_src = require("./src-C8PIppTy.cjs");
+const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Form/Form.tsx

package/dist/Form.d.cts

@@ -1,4 +1,4 @@
-import { Theme } from "@emotion/react";
+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 { Theme } from "@emotion/react";
+import { h as Theme } from "./themes-CUV79qWU.mjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/Form.mjs

@@ -1,6 +1,5 @@
-import { d as styled } from "./src-DcNT2aIK.mjs";
-import { t as FormContext } from "./FormContext-_G3sxJyQ.mjs";
-import "@emotion/react";
+import { o as styled } from "./src-BJy4dM4f.mjs";
+import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Form/Form.tsx

package/dist/{FormContext-CRmRgDgu.cjs → FormContext-BGCsWAFc.cjs}

@@ -1,4 +1,3 @@
-require("@emotion/react");
 //#region src/Form/FormContext.ts
 const FormContext = (0, require("react").createContext)({});
 //#endregion

package/dist/{FormContext-_G3sxJyQ.mjs → FormContext-LrjAGe6U.mjs}

@@ -1,4 +1,3 @@
-import "@emotion/react";
 import { createContext } from "react";
 //#region src/Form/FormContext.ts
 const FormContext = createContext({});

package/dist/FormControl.cjs

@@ -1,10 +1,10 @@
 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_View = require("./View.cjs");
-const require_FormControlContext = require("./FormControlContext-aeKTjRKY.cjs");
-const require_FormContext = require("./FormContext-CRmRgDgu.cjs");
-let _emotion_react = require("@emotion/react");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_theme = require("./theme-Du6xgPsg.cjs");
+const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
+const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/FormControl/FormControl.tsx
@@ -65,7 +65,7 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 function useFormControl(overrides = {}) {
 	const form = (0, react.useContext)(require_FormContext.FormContext);
 	const control = (0, react.useContext)(require_FormControlContext.FormControlContext);
-	const theme = (0, _emotion_react.useTheme)();
+	const theme = require_theme.useTheme();
 	return {
 		id: overrides.id ?? control?.id,
 		error: overrides.error ?? control?.error ?? false,

package/dist/FormControl.d.cts

@@ -1,5 +1,5 @@
-import { s as ViewProps } from "./index-FwTocqhP.cjs";
-import { Theme } from "@emotion/react";
+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 { s as ViewProps } from "./index-pX7tBQdJ.mjs";
-import { Theme } from "@emotion/react";
+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,9 +1,9 @@
-import { d as styled, u as useTheme } from "./src-DcNT2aIK.mjs";
-import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { o as styled } from "./src-BJy4dM4f.mjs";
 import { View } from "./View.mjs";
-import { t as FormControlContext } from "./FormControlContext-CyxdOxdN.mjs";
-import { t as FormContext } from "./FormContext-_G3sxJyQ.mjs";
-import "@emotion/react";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { r as useTheme } from "./theme-V6lYzd3j.mjs";
+import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
+import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
 import { useContext, useId, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/FormControl/FormControl.tsx

package/dist/{FormControlContext-aeKTjRKY.cjs → FormControlContext-74gvPGFk.cjs}

@@ -1,4 +1,3 @@
-require("@emotion/react");
 //#region src/FormControl/FormControlContext.ts
 const FormControlContext = (0, require("react").createContext)(null);
 //#endregion

package/dist/{FormControlContext-CyxdOxdN.mjs → FormControlContext-CC2kToms.mjs}

@@ -1,4 +1,3 @@
-import "@emotion/react";
 import { createContext } from "react";
 //#region src/FormControl/FormControlContext.ts
 const FormControlContext = createContext(null);

package/dist/FormHelperText.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_FormControlContext = require("./FormControlContext-aeKTjRKY.cjs");
-const require_FormContext = require("./FormContext-CRmRgDgu.cjs");
+const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
+const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/FormHelperText/FormHelperText.tsx

package/dist/FormHelperText.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-CDVnvjIE.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-DE5PtzPn.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/FormHelperText.mjs

@@ -1,7 +1,7 @@
-import { d as styled } from "./src-DcNT2aIK.mjs";
+import { o as styled } from "./src-BJy4dM4f.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as FormControlContext } from "./FormControlContext-CyxdOxdN.mjs";
-import { t as FormContext } from "./FormContext-_G3sxJyQ.mjs";
+import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
+import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
 import { useContext, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/FormHelperText/FormHelperText.tsx

package/dist/FormLabel.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_FormControlContext = require("./FormControlContext-aeKTjRKY.cjs");
-const require_FormContext = require("./FormContext-CRmRgDgu.cjs");
+const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
+const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/FormLabel/FormLabel.tsx

package/dist/FormLabel.d.cts

@@ -1,2 +1,18 @@
-import { n as FormLabelProps, t as FormLabel } from "./index-Dg8-CPOO.cjs";
+import { a as TypographyProps } from "./index-CvaEVk-f.cjs";
+import { ReactNode } from "react";
+//#region src/FormLabel/FormLabel.d.ts
+interface FormLabelProps extends TypographyProps {
+  children: ReactNode;
+  /** Appends a `*` indicator. Falls back to the FormControl `required` value. */
+  required?: boolean;
+  /** Target control id. Falls back to the FormControl id. */
+  htmlFor?: string;
+}
+/**
+ * Renders a `<label>` linked to the control via `htmlFor`, reading the id and
+ * `required` flag from FormControl context. All Typography props pass through,
+ * so callers can restyle freely while keeping the wiring automatic.
+ */
+declare function FormLabel({ children, required, htmlFor, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
+//#endregion
 export { FormLabel, FormLabelProps };

package/dist/FormLabel.d.mts

@@ -1,2 +1,18 @@
-import { n as FormLabelProps, t as FormLabel } from "./index-Cv_UOfYx.mjs";
+import { a as TypographyProps } from "./index-B2hrssyF.mjs";
+import { ReactNode } from "react";
+//#region src/FormLabel/FormLabel.d.ts
+interface FormLabelProps extends TypographyProps {
+  children: ReactNode;
+  /** Appends a `*` indicator. Falls back to the FormControl `required` value. */
+  required?: boolean;
+  /** Target control id. Falls back to the FormControl id. */
+  htmlFor?: string;
+}
+/**
+ * Renders a `<label>` linked to the control via `htmlFor`, reading the id and
+ * `required` flag from FormControl context. All Typography props pass through,
+ * so callers can restyle freely while keeping the wiring automatic.
+ */
+declare function FormLabel({ children, required, htmlFor, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
+//#endregion
 export { FormLabel, FormLabelProps };

package/dist/FormLabel.mjs

@@ -1,7 +1,7 @@
-import { d as styled } from "./src-DcNT2aIK.mjs";
+import { o as styled } from "./src-BJy4dM4f.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as FormControlContext } from "./FormControlContext-CyxdOxdN.mjs";
-import { t as FormContext } from "./FormContext-_G3sxJyQ.mjs";
+import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
+import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
 import { useContext } from "react";
 import { jsxs } from "react/jsx-runtime";
 //#region src/FormLabel/FormLabel.tsx

package/dist/Grid.cjs

@@ -1,37 +1,14 @@
 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 _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;

package/dist/Grid.d.cts

@@ -1,16 +1,10 @@
-import { l as index_d_exports, o as Theme } from "./index-Bihpwn75.cjs";
-import { s as ViewProps } from "./index-FwTocqhP.cjs";
+import { r as index_d_exports } from "./index-DLJ-li1B.cjs";
+import { h as Theme } from "./themes-CUV79qWU.cjs";
+import { s as ViewProps } from "./index-DjtGkwRM.cjs";
 //#region src/Grid/Grid.d.ts
 /** Valid values for the gap / columnGap / rowGap props — derived from theme.space keys. */
 type GapToken = keyof Theme['space'];
-interface GridProps extends ViewProps, index_d_exports.GridProps<Theme>, index_d_exports.FlexboxProps<Theme> {
-  /** Resolves against theme.space — maps to CSS gap. Accepts responsive arrays. */
-  gap?: index_d_exports.ResponsiveValue<GapToken>;
-  /** Resolves against theme.space — maps to CSS column-gap. Accepts responsive arrays. */
-  columnGap?: index_d_exports.ResponsiveValue<GapToken>;
-  /** Resolves against theme.space — maps to CSS row-gap. Accepts responsive arrays. */
-  rowGap?: index_d_exports.ResponsiveValue<GapToken>;
-}
+interface GridProps extends ViewProps, index_d_exports.GridProps<Theme>, index_d_exports.FlexboxProps<Theme> {}
 declare const Grid: import("@emotion/styled").StyledComponent<{
   theme?: Theme;
   as?: React.ElementType;

package/dist/Grid.d.mts

@@ -1,16 +1,10 @@
-import { l as index_d_exports, o as Theme } from "./index-Dm9HfgV6.mjs";
-import { s as ViewProps } from "./index-pX7tBQdJ.mjs";
+import { h as Theme } from "./themes-CUV79qWU.mjs";
+import { r as index_d_exports } from "./index-D8b5OCLe.mjs";
+import { s as ViewProps } from "./index-q6EgsH9R.mjs";
 //#region src/Grid/Grid.d.ts
 /** Valid values for the gap / columnGap / rowGap props — derived from theme.space keys. */
 type GapToken = keyof Theme['space'];
-interface GridProps extends ViewProps, index_d_exports.GridProps<Theme>, index_d_exports.FlexboxProps<Theme> {
-  /** Resolves against theme.space — maps to CSS gap. Accepts responsive arrays. */
-  gap?: index_d_exports.ResponsiveValue<GapToken>;
-  /** Resolves against theme.space — maps to CSS column-gap. Accepts responsive arrays. */
-  columnGap?: index_d_exports.ResponsiveValue<GapToken>;
-  /** Resolves against theme.space — maps to CSS row-gap. Accepts responsive arrays. */
-  rowGap?: index_d_exports.ResponsiveValue<GapToken>;
-}
+interface GridProps extends ViewProps, index_d_exports.GridProps<Theme>, index_d_exports.FlexboxProps<Theme> {}
 declare const Grid: import("@emotion/styled").StyledComponent<{
   theme?: Theme;
   as?: React.ElementType;

package/dist/Grid.mjs

@@ -1,32 +1,10 @@
-import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
 import { View } from "./View.mjs";
 const Grid = styled(View, {
 	name: "Grid",
 	label: "grid",
-	shouldForwardProp: createShouldForwardProp([
-		...props,
-		"gap",
-		"columnGap",
-		"rowGap"
-	]),
-	systemProps: [
-		(0, src_exports.system)({
-			gap: {
-				property: "gap",
-				scale: "space"
-			},
-			columnGap: {
-				property: "columnGap",
-				scale: "space"
-			},
-			rowGap: {
-				property: "rowGap",
-				scale: "space"
-			}
-		}),
-		src_exports.grid,
-		src_exports.flexbox
-	]
+	shouldForwardProp: createShouldForwardProp([...props]),
+	systemProps: [src_exports.grid, src_exports.flexbox]
 })({ display: "grid" });
 //#endregion
 export { Grid };