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

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 { n as FlexProps } from "./index-DRM_YhHL.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 { n as FlexProps } from "./index-C_VwtHyK.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.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 { n as FlexProps } from "./index-DRM_YhHL.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 { n as FlexProps } from "./index-C_VwtHyK.mjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];

package/dist/Card.d.cts

@@ -1,4 +1,4 @@
-import { r as PaperProps } from "./index-Ddetmkqd.cjs";
+import { r as PaperProps } from "./index-N_TM6YXV.cjs";
 import { a as TypographyProps } from "./index-D5Rj4uWe.cjs";
 import { n as IconProps, r as IconName } from "./index-CxDY_w-H.cjs";
 import { ReactNode } from "react";

package/dist/Card.d.mts

@@ -1,4 +1,4 @@
-import { r as PaperProps } from "./index-suqlMrTp.mjs";
+import { r as PaperProps } from "./index-BUvlTtD7.mjs";
 import { a as TypographyProps } from "./index-DJ8NTYR8.mjs";
 import { n as IconProps, r as IconName } from "./index-BBV7_p-W.mjs";
 import { ReactNode } from "react";

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 { n as PaperElevation } from "./index-N_TM6YXV.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 { n as PaperElevation } from "./index-BUvlTtD7.mjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

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-DRM_YhHL.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-C_VwtHyK.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/Grid.d.cts

@@ -7,10 +7,10 @@ import { FlexboxProps, GridProps as GridProps$1, LayoutGridProps } from "@sorous
 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

@@ -7,10 +7,10 @@ import { FlexboxProps, GridProps as GridProps$1, LayoutGridProps } from "@sorous
 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/Paper.d.cts

@@ -1,2 +1,2 @@
-import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-Ddetmkqd.cjs";
+import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-N_TM6YXV.cjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.d.mts

@@ -1,2 +1,2 @@
-import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-suqlMrTp.mjs";
+import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-BUvlTtD7.mjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Popover.d.cts

@@ -1,6 +1,6 @@
 import { T as Theme } from "./themes-Dswy4M6B.cjs";
 import "./index-BsUsSWXP.cjs";
-import { n as PaperElevation, r as PaperProps } from "./index-Ddetmkqd.cjs";
+import { n as PaperElevation, r as PaperProps } from "./index-N_TM6YXV.cjs";
 import { l as ModalCloseReason } from "./index-BW4rc8cK.cjs";
 import { ReactNode, Ref } from "react";
 //#region src/Popover/utils/resolveAnchorEl.d.ts

package/dist/Popover.d.mts

@@ -1,6 +1,6 @@
 import { T as Theme } from "./themes-C3RTORGO.mjs";
 import "./index-Dkqk_6g2.mjs";
-import { n as PaperElevation, r as PaperProps } from "./index-suqlMrTp.mjs";
+import { n as PaperElevation, r as PaperProps } from "./index-BUvlTtD7.mjs";
 import { l as ModalCloseReason } from "./index-BbngAEDY.mjs";
 import { ReactNode, Ref } from "react";
 //#region src/Popover/utils/resolveAnchorEl.d.ts

package/dist/Sidebar/Sidebar.d.cts

@@ -1,4 +1,4 @@
-import { n as FlexProps } from "../index-CS4yFHlC.cjs";
+import { n as FlexProps } from "../index-DRM_YhHL.cjs";
 import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.cjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Sidebar/Sidebar/Sidebar.d.ts

package/dist/Sidebar/Sidebar.d.mts

@@ -1,4 +1,4 @@
-import { n as FlexProps } from "../index-CWYckiaS.mjs";
+import { n as FlexProps } from "../index-C_VwtHyK.mjs";
 import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Sidebar/Sidebar/Sidebar.d.ts

package/dist/{index-suqlMrTp.d.mts → index-BUvlTtD7.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 { n as FlexProps } from "./index-C_VwtHyK.mjs";
 import { CSSProperties, ElementType } from "react";
 //#region src/Paper/Paper.d.ts
 type PaperElevation = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;

package/dist/index-C_VwtHyK.d.mts

@@ -0,0 +1,21 @@
+import { T as Theme } from "./themes-C3RTORGO.mjs";
+import "./index-Dkqk_6g2.mjs";
+import { s as ViewProps } from "./index-t6XUvJ_3.mjs";
+import { FlexboxProps } from "@soroush.tech/styled-system";
+//#region src/Flex/Flex.d.ts
+/** Valid values for the gap prop - derived from theme.space keys. */
+type GapToken = keyof Theme['space'];
+/**
+ * `layout` puts the flex container on the page frame, as on any View: the theme's margin and
+ * max width per breakpoint. The flexbox stays as set - a column by default, a row with
+ * `flexDirection="row"`. Columns are Grid's: content on the page columns uses `<Grid layout>`.
+ */
+interface FlexProps extends ViewProps, FlexboxProps<Theme> {}
+declare const Flex: import("@emotion/styled").StyledComponent<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+} & FlexProps, {}, {}>;
+//#endregion
+export { FlexProps as n, GapToken as r, Flex as t };

package/dist/index-DRM_YhHL.d.cts

@@ -0,0 +1,21 @@
+import { T as Theme } from "./themes-Dswy4M6B.cjs";
+import "./index-BsUsSWXP.cjs";
+import { s as ViewProps } from "./index-C8SeYUxJ.cjs";
+import { FlexboxProps } from "@soroush.tech/styled-system";
+//#region src/Flex/Flex.d.ts
+/** Valid values for the gap prop - derived from theme.space keys. */
+type GapToken = keyof Theme['space'];
+/**
+ * `layout` puts the flex container on the page frame, as on any View: the theme's margin and
+ * max width per breakpoint. The flexbox stays as set - a column by default, a row with
+ * `flexDirection="row"`. Columns are Grid's: content on the page columns uses `<Grid layout>`.
+ */
+interface FlexProps extends ViewProps, FlexboxProps<Theme> {}
+declare const Flex: import("@emotion/styled").StyledComponent<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+} & FlexProps, {}, {}>;
+//#endregion
+export { FlexProps as n, GapToken as r, Flex as t };

package/dist/{index-Ddetmkqd.d.cts → index-N_TM6YXV.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 { n as FlexProps } from "./index-DRM_YhHL.cjs";
 import { CSSProperties, ElementType } from "react";
 //#region src/Paper/Paper.d.ts
 type PaperElevation = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/design-system",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Emotion + @soroush.tech/styled-system React component library - token-driven light/dark themes, layout primitives, forms, and overlays.",
   "keywords": [
     "design-system",
@@ -477,7 +477,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@soroush.tech/styled-system": "^6.0.0-alpha.2"
+    "@soroush.tech/styled-system": "^6.0.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^19.2.8",

package/dist/index-CS4yFHlC.d.cts

@@ -1,22 +0,0 @@
-import { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
-import { s as ViewProps } from "./index-C8SeYUxJ.cjs";
-import { FlexboxProps, LayoutGridProps } from "@soroush.tech/styled-system";
-//#region src/Flex/Flex.d.ts
-/** Valid values for the gap prop - derived from theme.space keys. */
-type GapToken = keyof Theme['space'];
-/**
- * `layout` lays a wrapping row out from `theme.layout` - the theme's gutter and margin per
- * breakpoint, with `--layout-columns` / `--layout-gutter` for the children's `span`. Entries
- * work as on `Grid`: `layout={{ gutter: 8 }}` at every breakpoint, `{ md: { gutter: 4 } }` at one.
- * View draws the frame; Flex adds the row. Column spacing comes from `gutter`, rows take `rowGap`.
- */
-interface FlexProps extends Omit<ViewProps, 'layout'>, FlexboxProps<Theme>, LayoutGridProps<Theme> {}
-declare const Flex: import("@emotion/styled").StyledComponent<{
-  theme?: Theme;
-  as?: React.ElementType;
-} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-  theme?: Theme;
-} & FlexProps, {}, {}>;
-//#endregion
-export { FlexProps as n, GapToken as r, Flex as t };

package/dist/index-CWYckiaS.d.mts

@@ -1,22 +0,0 @@
-import { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { s as ViewProps } from "./index-t6XUvJ_3.mjs";
-import { FlexboxProps, LayoutGridProps } from "@soroush.tech/styled-system";
-//#region src/Flex/Flex.d.ts
-/** Valid values for the gap prop - derived from theme.space keys. */
-type GapToken = keyof Theme['space'];
-/**
- * `layout` lays a wrapping row out from `theme.layout` - the theme's gutter and margin per
- * breakpoint, with `--layout-columns` / `--layout-gutter` for the children's `span`. Entries
- * work as on `Grid`: `layout={{ gutter: 8 }}` at every breakpoint, `{ md: { gutter: 4 } }` at one.
- * View draws the frame; Flex adds the row. Column spacing comes from `gutter`, rows take `rowGap`.
- */
-interface FlexProps extends Omit<ViewProps, 'layout'>, FlexboxProps<Theme>, LayoutGridProps<Theme> {}
-declare const Flex: import("@emotion/styled").StyledComponent<{
-  theme?: Theme;
-  as?: React.ElementType;
-} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-  theme?: Theme;
-} & FlexProps, {}, {}>;
-//#endregion
-export { FlexProps as n, GapToken as r, Flex as t };