@soroush.tech/design-system 1.3.2 → 2.0.0-alpha.0

package/dist/Image.d.mts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { BackgroundProps, LayoutProps, PositionProps, SpaceProps } from "@soroush.tech/styled-system";
 import { CSSProperties, ImgHTMLAttributes } from "react";
 //#region src/Image/Image.d.ts
@@ -8,7 +8,7 @@ interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'height'
   fallback?: string;
   objectFit?: CSSProperties['objectFit'];
   objectPosition?: CSSProperties['objectPosition'];
-  /** Corner radius — resolves against `theme.radii`. */
+  /** Corner radius - resolves against `theme.radii`. */
   borderRadius?: keyof Theme['radii'];
   /** Called once when all image sources are exhausted. */
   onError?: () => void;

package/dist/Image.mjs

@@ -1,4 +1,4 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Image/Image.tsx

package/dist/LinearProgress.cjs

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

package/dist/LinearProgress.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { n as ButtonColor } from "./index-uH0EeDBZ.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as ButtonColor } from "./index-S3NZS-Qp.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/LinearProgress/LinearProgress.d.ts
@@ -8,9 +8,9 @@ type LinearProgressVariant = 'indeterminate' | 'determinate' | 'query';
 type LinearProgressColor = ButtonColor | 'inherit';
 type LinearProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
 interface LinearProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps<Theme>, keyof PaddingProps>, LayoutProps<Theme> {
-  /** Visual variant — looping animation, value-driven bar, or reversed loop. Default: `'indeterminate'`. */
+  /** Visual variant - looping animation, value-driven bar, or reversed loop. Default: `'indeterminate'`. */
   variant?: LinearProgressVariant;
-  /** Bar color — resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Bar color - resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: LinearProgressColor;
   /** Bar height. Number → px; string → raw CSS unit (e.g. `'0.5rem'`). Default: `4`. */
   thickness?: number | string;

package/dist/LinearProgress.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { n as ButtonColor } from "./index-BAfSyQaP.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as ButtonColor } from "./index-D4i9vrQM.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/LinearProgress/LinearProgress.d.ts
@@ -8,9 +8,9 @@ type LinearProgressVariant = 'indeterminate' | 'determinate' | 'query';
 type LinearProgressColor = ButtonColor | 'inherit';
 type LinearProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
 interface LinearProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps<Theme>, keyof PaddingProps>, LayoutProps<Theme> {
-  /** Visual variant — looping animation, value-driven bar, or reversed loop. Default: `'indeterminate'`. */
+  /** Visual variant - looping animation, value-driven bar, or reversed loop. Default: `'indeterminate'`. */
   variant?: LinearProgressVariant;
-  /** Bar color — resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Bar color - resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: LinearProgressColor;
   /** Bar height. Number → px; string → raw CSS unit (e.g. `'0.5rem'`). Default: `4`. */
   thickness?: number | string;

package/dist/LinearProgress.mjs

@@ -1,4 +1,4 @@
-import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { clamp } from "./utils.mjs";
 import "react";

package/dist/Link.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BJrcLd7P.cjs");
+const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-CleLAV6A.cjs");
+const require_theme = require("./theme-BmEAXmwh.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-CohsoGjZ.cjs";
+import { a as TypographyProps } from "./index-bN91IhZi.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-DxBKLmUS.mjs";
+import { a as TypographyProps } from "./index-DuefjNlC.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-D3tHU94W.mjs";
+import { o as styled } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-Cudynq5K.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.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-BJrcLd7P.cjs");
+const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-CleLAV6A.cjs");
-const require_Icon = require("./Icon-ByDvM-t1.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
+const require_Icon = require("./Icon-CKLBJ7CC.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/MenuItem/MenuItem.tsx

package/dist/MenuItem.d.cts

@@ -1,18 +1,18 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { ElementType, ReactNode } from "react";
 //#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];
 type MenuItemSize = keyof Theme['sizes'];
 type MenuItemTextColor = keyof Theme['text'];
 interface MenuItemProps {
-  /** The value this option represents — reported to `Select`'s `onChange`. */
+  /** The value this option represents - reported to `Select`'s `onChange`. */
   value: string | number;
   /** The option label. */
   children: ReactNode;
-  /** The element used for the root node — a tag name or a component. Default: `'li'`. */
+  /** The element used for the root node - a tag name or a component. Default: `'li'`. */
   as?: ElementType;
-  /** Disables the option — it cannot be highlighted or selected. */
+  /** Disables the option - it cannot be highlighted or selected. */
   disabled?: boolean;
   /** Marks the option as the current selection. Injected by `Select`. */
   selected?: boolean;
@@ -20,11 +20,11 @@ interface MenuItemProps {
   highlighted?: boolean;
   /** Reserves a leading checkmark slot for multi-select menus. Injected by `Select`. */
   multiple?: boolean;
-  /** Accent color — resolves to `theme.palette[color]`. Injected by `Select`; the item's own value wins. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Accent color - resolves to `theme.palette[color]`. Injected by `Select`; the item's own value wins. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: MenuItemColor;
-  /** Base text color of the row — resolves against `theme.text`. When unset, falls back to the accent color's `main`. Injected by `Select`; the item's own value wins. */
+  /** Base text color of the row - resolves against `theme.text`. When unset, falls back to the accent color's `main`. Injected by `Select`; the item's own value wins. */
   textColor?: MenuItemTextColor;
-  /** Density token — resolves against `theme.sizes`. Injected by `Select`. Default: 'md', overridable via `theme.defaults.size`. */
+  /** Density token - resolves against `theme.sizes`. Injected by `Select`. Default: 'md', overridable via `theme.defaults.size`. */
   size?: MenuItemSize;
   /** Compact vertical padding, independent of `size`. Default: `false`. */
   dense?: boolean;
@@ -34,7 +34,7 @@ interface MenuItemProps {
   divider?: boolean;
   /** Focus the row on first mount, and whenever `autoFocus` flips from `false` to `true`. Default: `false`. */
   autoFocus?: boolean;
-  /** Class applied only while the row has keyboard focus — a `:focus-visible` hook. */
+  /** Class applied only while the row has keyboard focus - a `:focus-visible` hook. */
   focusVisibleClassName?: string;
   /** Fired with `value` when the option is chosen. Injected by `Select`. */
   onSelect?: (value: string | number) => void;

package/dist/MenuItem.d.mts

@@ -1,18 +1,18 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];
 type MenuItemSize = keyof Theme['sizes'];
 type MenuItemTextColor = keyof Theme['text'];
 interface MenuItemProps {
-  /** The value this option represents — reported to `Select`'s `onChange`. */
+  /** The value this option represents - reported to `Select`'s `onChange`. */
   value: string | number;
   /** The option label. */
   children: ReactNode;
-  /** The element used for the root node — a tag name or a component. Default: `'li'`. */
+  /** The element used for the root node - a tag name or a component. Default: `'li'`. */
   as?: ElementType;
-  /** Disables the option — it cannot be highlighted or selected. */
+  /** Disables the option - it cannot be highlighted or selected. */
   disabled?: boolean;
   /** Marks the option as the current selection. Injected by `Select`. */
   selected?: boolean;
@@ -20,11 +20,11 @@ interface MenuItemProps {
   highlighted?: boolean;
   /** Reserves a leading checkmark slot for multi-select menus. Injected by `Select`. */
   multiple?: boolean;
-  /** Accent color — resolves to `theme.palette[color]`. Injected by `Select`; the item's own value wins. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Accent color - resolves to `theme.palette[color]`. Injected by `Select`; the item's own value wins. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: MenuItemColor;
-  /** Base text color of the row — resolves against `theme.text`. When unset, falls back to the accent color's `main`. Injected by `Select`; the item's own value wins. */
+  /** Base text color of the row - resolves against `theme.text`. When unset, falls back to the accent color's `main`. Injected by `Select`; the item's own value wins. */
   textColor?: MenuItemTextColor;
-  /** Density token — resolves against `theme.sizes`. Injected by `Select`. Default: 'md', overridable via `theme.defaults.size`. */
+  /** Density token - resolves against `theme.sizes`. Injected by `Select`. Default: 'md', overridable via `theme.defaults.size`. */
   size?: MenuItemSize;
   /** Compact vertical padding, independent of `size`. Default: `false`. */
   dense?: boolean;
@@ -34,7 +34,7 @@ interface MenuItemProps {
   divider?: boolean;
   /** Focus the row on first mount, and whenever `autoFocus` flips from `false` to `true`. Default: `false`. */
   autoFocus?: boolean;
-  /** Class applied only while the row has keyboard focus — a `:focus-visible` hook. */
+  /** Class applied only while the row has keyboard focus - a `:focus-visible` hook. */
   focusVisibleClassName?: string;
   /** Fired with `value` when the option is chosen. Injected by `Select`. */
   onSelect?: (value: string | number) => void;

package/dist/MenuItem.mjs

@@ -1,7 +1,7 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+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-Cudynq5K.mjs";
-import { t as Icon } from "./Icon-CU_nUmsU.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
+import { t as Icon } from "./Icon-CkQGOBmm.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/MenuItem/MenuItem.tsx

package/dist/{Modal-Bjfv7n4e.cjs → Modal-CApyh_V5.cjs}

@@ -1,4 +1,4 @@
-const require_src = require("./src-BJrcLd7P.cjs");
+const require_src = require("./src-DU81aGy9.cjs");
 const require_View = require("./View.cjs");
 const require_Backdrop = require("./Backdrop.cjs");
 const require_Portal = require("./Portal.cjs");
@@ -170,7 +170,7 @@ var ModalManager = class {
 * Returns a stable function identity that always calls the latest `fn`. Lets
 * effects depend on the callback without re-running when the handler changes.
 *
-* Syncs the ref in `useEffect` (not `useLayoutEffect`) so it stays SSR-safe —
+* Syncs the ref in `useEffect` (not `useLayoutEffect`) so it stays SSR-safe -
 * the timing difference is irrelevant for the user-triggered handlers it wraps.
 */
 function useEventCallback(fn) {

package/dist/{Modal-Bv-mf8Fn.mjs → Modal-CYNcPk-2.mjs}

@@ -1,4 +1,4 @@
-import { o as styled, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+import { o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
 import { Backdrop } from "./Backdrop.mjs";
 import { Portal } from "./Portal.mjs";
@@ -169,7 +169,7 @@ var ModalManager = class {
 * Returns a stable function identity that always calls the latest `fn`. Lets
 * effects depend on the callback without re-running when the handler changes.
 *
-* Syncs the ref in `useEffect` (not `useLayoutEffect`) so it stays SSR-safe —
+* Syncs the ref in `useEffect` (not `useLayoutEffect`) so it stays SSR-safe -
 * the timing difference is irrelevant for the user-triggered handlers it wraps.
 */
 function useEventCallback(fn) {

package/dist/Modal.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Modal = require("./Modal-Bjfv7n4e.cjs");
+const require_Modal = require("./Modal-CApyh_V5.cjs");
 exports.Modal = require_Modal.Modal;
 exports.ModalManager = require_Modal.ModalManager;
 exports.exposeToAria = require_Modal.exposeToAria;

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-BBWtMvkm.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-B8KscJic.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-CTYZyQ2g.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-qtKJ56yu.mjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/Modal.mjs

@@ -1,2 +1,2 @@
-import { a as hideFromAria, i as exposeToAria, n as useModal, r as ModalManager, t as Modal } from "./Modal-Bv-mf8Fn.mjs";
+import { a as hideFromAria, i as exposeToAria, n as useModal, r as ModalManager, t as Modal } from "./Modal-CYNcPk-2.mjs";
 export { Modal, ModalManager, exposeToAria, hideFromAria, useModal };

package/dist/NativeSelect.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BJrcLd7P.cjs");
+const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-CleLAV6A.cjs");
-const require_Icon = require("./Icon-ByDvM-t1.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
+const require_Icon = require("./Icon-CKLBJ7CC.cjs");
 const require_FormControl = require("./FormControl.cjs");
 const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 require("react");

package/dist/NativeSelect.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { n as IconProps, r as IconName } from "./index-D_AwmCU5.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as IconProps, r as IconName } from "./index-DPHwCZYf.cjs";
 import { SelectHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/NativeSelect/NativeSelect.d.ts
@@ -16,7 +16,7 @@ interface NativeSelectOption {
 interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
   /** The options to populate the select with. */
   options: NativeSelectOption[];
-  /** Controlled value — matches an option's `value`. */
+  /** Controlled value - matches an option's `value`. */
   value?: string | number;
   /** Uncontrolled initial value. */
   defaultValue?: string | number;
@@ -24,17 +24,17 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   onChange?: (value: string | number) => void;
   /** Empty-state label rendered as a disabled first option, shown while nothing is selected. */
   placeholder?: string;
-  /** Corner radius — applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
+  /** Corner radius - applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
   borderRadius?: keyof Theme['radii'];
-  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Focus/active border color - resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: NativeSelectColor;
-  /** Text color of the selected value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  /** Text color of the selected value - resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
   textColor?: NativeSelectTextColor;
-  /** Background color — resolves against `theme.background`. Default: `'terminal'`. */
+  /** Background color - resolves against `theme.background`. Default: `'terminal'`. */
   bg?: NativeSelectBackgroundToken;
   /** Disables the select. */
   disabled?: boolean;
-  /** Marks the field as invalid — applies error border color. */
+  /** Marks the field as invalid - applies error border color. */
   error?: boolean;
   /** Stretches the root to fill its container. */
   fullWidth?: boolean;
@@ -51,9 +51,9 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   size?: NativeSelectSize;
   /**
    * Visual style of the select.
-   * - `outlined` / `default` — full border box (default)
-   * - `underline` — border on bottom only
-   * - `text` — no border, transparent background
+   * - `outlined` / `default` - full border box (default)
+   * - `underline` - border on bottom only
+   * - `text` - no border, transparent background
    */
   variant?: NativeSelectVariant;
   className?: string;

package/dist/NativeSelect.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { n as IconProps, r as IconName } from "./index-B0xTqpvt.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as IconProps, r as IconName } from "./index-r2avCy1z.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { SelectHTMLAttributes } from "react";
 //#region src/NativeSelect/NativeSelect.d.ts
@@ -16,7 +16,7 @@ interface NativeSelectOption {
 interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
   /** The options to populate the select with. */
   options: NativeSelectOption[];
-  /** Controlled value — matches an option's `value`. */
+  /** Controlled value - matches an option's `value`. */
   value?: string | number;
   /** Uncontrolled initial value. */
   defaultValue?: string | number;
@@ -24,17 +24,17 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   onChange?: (value: string | number) => void;
   /** Empty-state label rendered as a disabled first option, shown while nothing is selected. */
   placeholder?: string;
-  /** Corner radius — applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
+  /** Corner radius - applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
   borderRadius?: keyof Theme['radii'];
-  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Focus/active border color - resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: NativeSelectColor;
-  /** Text color of the selected value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  /** Text color of the selected value - resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
   textColor?: NativeSelectTextColor;
-  /** Background color — resolves against `theme.background`. Default: `'terminal'`. */
+  /** Background color - resolves against `theme.background`. Default: `'terminal'`. */
   bg?: NativeSelectBackgroundToken;
   /** Disables the select. */
   disabled?: boolean;
-  /** Marks the field as invalid — applies error border color. */
+  /** Marks the field as invalid - applies error border color. */
   error?: boolean;
   /** Stretches the root to fill its container. */
   fullWidth?: boolean;
@@ -51,9 +51,9 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   size?: NativeSelectSize;
   /**
    * Visual style of the select.
-   * - `outlined` / `default` — full border box (default)
-   * - `underline` — border on bottom only
-   * - `text` — no border, transparent background
+   * - `outlined` / `default` - full border box (default)
+   * - `underline` - border on bottom only
+   * - `text` - no border, transparent background
    */
   variant?: NativeSelectVariant;
   className?: string;

package/dist/NativeSelect.mjs

@@ -1,7 +1,7 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+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-Cudynq5K.mjs";
-import { t as Icon } from "./Icon-CU_nUmsU.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
+import { t as Icon } from "./Icon-CkQGOBmm.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import "react";

package/dist/PageLayout/LayoutGrid.cjs

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-DU81aGy9.cjs");
+const require_Grid = require("../Grid.cjs");
+const require_layoutStyles = require("../layoutStyles-B4Z1K6HZ.cjs");
+//#region src/PageLayout/LayoutGrid/LayoutGrid.tsx
+/**
+* A `Grid` on the theme's content columns: each breakpoint's
+* `theme.layout.*.content.columns` equal tracks, its `gutter` between them.
+* Place items with `gridColumn` (`'span 4'`, `'1 / -1'`, ...). `grid` and
+* `space` come last, so a `gridTemplateColumns` or `gap` prop still wins.
+*/
+const LayoutGrid = require_src.styled(require_Grid.Grid, {
+	name: "LayoutGrid",
+	label: "LayoutGrid",
+	systemProps: [require_src.src_exports.grid, require_src.src_exports.space]
+})(({ theme }) => require_layoutStyles.layoutStyles(theme, ({ content: { columns, gutter } }) => ({
+	gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+	columnGap: require_layoutStyles.layoutLength(theme, gutter)
+})));
+//#endregion
+exports.LayoutGrid = LayoutGrid;

package/dist/PageLayout/LayoutGrid.d.cts

@@ -0,0 +1,22 @@
+import { S as Theme } from "../themes-9YNnlVyY.cjs";
+import "../index-DkJzi96w.cjs";
+import { s as ViewProps } from "../index-CvWslVk6.cjs";
+import { r as GridProps } from "../index-BJ5Tsf7u.cjs";
+//#region src/PageLayout/LayoutGrid/LayoutGrid.d.ts
+type LayoutGridProps = GridProps;
+/**
+ * A `Grid` on the theme's content columns: each breakpoint's
+ * `theme.layout.*.content.columns` equal tracks, its `gutter` between them.
+ * Place items with `gridColumn` (`'span 4'`, `'1 / -1'`, ...). `grid` and
+ * `space` come last, so a `gridTemplateColumns` or `gap` prop still wins.
+ */
+declare const LayoutGrid: import("@emotion/styled").StyledComponent<Pick<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+} & GridProps, "about" | "accessKey" | "alignContent" | "alignItems" | "alignSelf" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "as" | "aspectRatio" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "bg" | "border" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderColor" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "borderX" | "borderY" | "bottom" | "children" | "className" | "color" | "columnGap" | "content" | "contentEditable" | "contextMenu" | "cursor" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "display" | "draggable" | "enterKeyHint" | "exportparts" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnGap" | "gridGap" | "gridRow" | "gridRowGap" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "justifyContent" | "justifyItems" | "justifySelf" | "key" | "lang" | "left" | "letterSpacing" | "lineHeight" | "m" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "marginX" | "marginY" | "maxHeight" | "maxWidth" | "mb" | "minHeight" | "minWidth" | "ml" | "mr" | "mt" | "mx" | "my" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "p" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingX" | "paddingY" | "part" | "pb" | "pl" | "popover" | "popoverTarget" | "popoverTargetAction" | "position" | "pr" | "prefix" | "property" | "pt" | "px" | "py" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "right" | "role" | "rowGap" | "security" | "size" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "textAlign" | "textAlignLast" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationStyle" | "textDecorationThickness" | "textOverflow" | "textTransform" | "theme" | "title" | "top" | "translate" | "typeof" | "unselectable" | "verticalAlign" | "vocab" | "whiteSpace" | "width" | "zIndex"> & {
+  theme?: Theme;
+} & GridProps, {}, {}>;
+//#endregion
+export { LayoutGrid, LayoutGridProps };

package/dist/PageLayout/LayoutGrid.d.mts

@@ -0,0 +1,22 @@
+import { S as Theme } from "../themes-9YNnlVyY.mjs";
+import "../index-CEqa8xx8.mjs";
+import { s as ViewProps } from "../index-tv-TGYSG.mjs";
+import { r as GridProps } from "../index-BnFxdnEL.mjs";
+//#region src/PageLayout/LayoutGrid/LayoutGrid.d.ts
+type LayoutGridProps = GridProps;
+/**
+ * A `Grid` on the theme's content columns: each breakpoint's
+ * `theme.layout.*.content.columns` equal tracks, its `gutter` between them.
+ * Place items with `gridColumn` (`'span 4'`, `'1 / -1'`, ...). `grid` and
+ * `space` come last, so a `gridTemplateColumns` or `gap` prop still wins.
+ */
+declare const LayoutGrid: import("@emotion/styled").StyledComponent<Pick<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+} & GridProps, "about" | "accessKey" | "alignContent" | "alignItems" | "alignSelf" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "as" | "aspectRatio" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "bg" | "border" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderColor" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "borderX" | "borderY" | "bottom" | "children" | "className" | "color" | "columnGap" | "content" | "contentEditable" | "contextMenu" | "cursor" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "display" | "draggable" | "enterKeyHint" | "exportparts" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnGap" | "gridGap" | "gridRow" | "gridRowGap" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "justifyContent" | "justifyItems" | "justifySelf" | "key" | "lang" | "left" | "letterSpacing" | "lineHeight" | "m" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "marginX" | "marginY" | "maxHeight" | "maxWidth" | "mb" | "minHeight" | "minWidth" | "ml" | "mr" | "mt" | "mx" | "my" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "p" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingX" | "paddingY" | "part" | "pb" | "pl" | "popover" | "popoverTarget" | "popoverTargetAction" | "position" | "pr" | "prefix" | "property" | "pt" | "px" | "py" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "right" | "role" | "rowGap" | "security" | "size" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "textAlign" | "textAlignLast" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationStyle" | "textDecorationThickness" | "textOverflow" | "textTransform" | "theme" | "title" | "top" | "translate" | "typeof" | "unselectable" | "verticalAlign" | "vocab" | "whiteSpace" | "width" | "zIndex"> & {
+  theme?: Theme;
+} & GridProps, {}, {}>;
+//#endregion
+export { LayoutGrid, LayoutGridProps };

package/dist/PageLayout/LayoutGrid.mjs

@@ -0,0 +1,20 @@
+import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
+import { Grid } from "../Grid.mjs";
+import { n as layoutStyles, t as layoutLength } from "../layoutStyles-f0ISNjsC.mjs";
+//#region src/PageLayout/LayoutGrid/LayoutGrid.tsx
+/**
+* A `Grid` on the theme's content columns: each breakpoint's
+* `theme.layout.*.content.columns` equal tracks, its `gutter` between them.
+* Place items with `gridColumn` (`'span 4'`, `'1 / -1'`, ...). `grid` and
+* `space` come last, so a `gridTemplateColumns` or `gap` prop still wins.
+*/
+const LayoutGrid = styled(Grid, {
+	name: "LayoutGrid",
+	label: "LayoutGrid",
+	systemProps: [src_exports.grid, src_exports.space]
+})(({ theme }) => layoutStyles(theme, ({ content: { columns, gutter } }) => ({
+	gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+	columnGap: layoutLength(theme, gutter)
+})));
+//#endregion
+export { LayoutGrid };