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

package/dist/{index-DxBKLmUS.d.mts → index-bN91IhZi.d.cts}

@@ -1,15 +1,15 @@
-import { L as TypographyVariant, h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { K as TypographyVariant, S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { CSSProperties, ElementType, HTMLAttributes } from "react";
+import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Typography/Typography.d.ts
 type TypographyAlign = 'left' | 'right' | 'center' | 'justify' | 'inherit';
-/** Valid values for the color prop — derived from theme.text keys. */
+/** Valid values for the color prop - derived from theme.text keys. */
 type TextColorToken = keyof Theme['text'];
-/** Valid values for the bg prop — derived from theme.background keys. */
+/** Valid values for the bg prop - derived from theme.background keys. */
 type BackgroundToken = keyof Theme['background'];
 interface TypographyProps$1 extends Omit<HTMLAttributes<HTMLElement>, 'color'>, SpaceProps<Theme>, LayoutProps<Theme>, TypographyProps<Theme>, FlexboxProps<Theme>, BorderProps<Theme>, PositionProps<Theme> {
-  /** Resolves against theme.text — inherit · initial · primary · secondary · error · success */
+  /** Resolves against theme.text - inherit · initial · primary · secondary · error · success */
   color?: TextColorToken;
   /** Resolves against theme.background */
   bg?: BackgroundToken;
@@ -19,7 +19,7 @@ interface TypographyProps$1 extends Omit<HTMLAttributes<HTMLElement>, 'color'>,
   align?: TypographyAlign;
   gutterBottom?: boolean;
   noWrap?: boolean;
-  /** Machine-readable timestamp — forwarded when rendering as `<time>` (`as="time"`). */
+  /** Machine-readable timestamp - forwarded when rendering as `<time>` (`as="time"`). */
   dateTime?: string;
   as?: ElementType;
 }

package/dist/{index-CTYZyQ2g.d.mts → index-qtKJ56yu.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 { KeyboardEvent, MouseEvent, ReactNode, Ref, RefCallback, SyntheticEvent } from "react";
 //#region src/Modal/useModal.d.ts
 type ModalCloseReason = 'escapeKey' | 'backdropClick';
@@ -46,7 +46,7 @@ interface ModalProps {
   portalContainer?: HTMLElement | (() => HTMLElement | null) | null;
   /** Lock body scroll while open. Default: true. */
   shouldLockScroll?: boolean;
-  /** Skip `aria-hidden` on background content — for non-modal popovers whose trigger stays focused. Default: false. */
+  /** Skip `aria-hidden` on background content - for non-modal popovers whose trigger stays focused. Default: false. */
   disableAriaHidden?: boolean;
   /** Move focus into the modal on open. Default: true. */
   shouldAutoFocus?: boolean;

package/dist/{index-D_AwmCU5.d.cts → index-r2avCy1z.d.mts}

@@ -1,6 +1,6 @@
-import { n as TextColorToken } from "./index-CohsoGjZ.cjs";
-import { SVGProps } from "react";
+import { n as TextColorToken } from "./index-DuefjNlC.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+import { SVGProps } from "react";
 //#region src/Icon/icons/AccountTree.d.ts
 declare const SvgAccountTree: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
@@ -233,14 +233,14 @@ declare const icons: {
   readonly zoom_in: typeof SvgZoomIn;
   readonly zoom_out: typeof SvgZoomOut;
 };
-/** Valid values for the Icon `name` prop — derived from the registry keys. */
+/** Valid values for the Icon `name` prop - derived from the registry keys. */
 type IconName = keyof typeof icons;
 //#endregion
 //#region src/Icon/Icon.d.ts
 interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'color' | 'ref' | 'width' | 'height' | 'display' | 'overflow'>, LayoutProps, SpaceProps {
   /** Registry key of the icon to render. */
   name: IconName;
-  /** Resolves against theme.text — applied as `color`, which the SVG inherits via `currentColor`. */
+  /** Resolves against theme.text - applied as `color`, which the SVG inherits via `currentColor`. */
   color?: TextColorToken;
   /** Sets both width and height (icons are square). */
   size?: string | number;

package/dist/{index-BPzvFTi5.d.cts → index-tv-TGYSG.d.mts}

@@ -1,23 +1,23 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { CSSProperties, HTMLAttributes } from "react";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { CSSProperties, HTMLAttributes } from "react";
 //#region src/View/View.d.ts
-/** Valid values for the color prop — derived from theme.text keys. */
+/** Valid values for the color prop - derived from theme.text keys. */
 type ViewColorToken = keyof Theme['text'];
-/** Valid values for the bg prop — derived from theme.background keys. */
+/** Valid values for the bg prop - derived from theme.background keys. */
 type ViewBackgroundToken = keyof Theme['background'];
-/** Valid values for the borderColor prop — derived from theme.border keys. */
+/** Valid values for the borderColor prop - derived from theme.border keys. */
 type ViewBorderColorToken = keyof Theme['border'];
-/** Valid values for the borderWidth prop — derived from theme.borderWidths keys. */
+/** Valid values for the borderWidth prop - derived from theme.borderWidths keys. */
 type ViewBorderWidthToken = keyof Theme['borderWidths'];
 /** Valid theme tokens for border-radius. Raw CSS pixel values (e.g. '6px', '9999px') are also accepted. */
 type ViewBorderRadiusToken = keyof Theme['radii'] | `${number}px`;
 interface ViewProps extends Omit<HTMLAttributes<HTMLElement>, 'color'>, SpaceProps<Theme>, LayoutProps<Theme>, TypographyProps<Theme>, Omit<BorderProps<Theme>, 'borderColor' | 'borderWidth' | 'borderRadius'>, PositionProps<Theme> {
   bg?: ViewBackgroundToken;
-  /** Resolves against theme.border — light · primary · dark */
+  /** Resolves against theme.border - light · primary · dark */
   borderColor?: ViewBorderColorToken;
-  /** Resolves against theme.borderWidths — none · thin · base · thick */
+  /** Resolves against theme.borderWidths - none · thin · base · thick */
   borderWidth?: ViewBorderWidthToken;
   /** Theme tokens: sq · sm · md · lg. Also accepts raw CSS pixel values e.g. '6px', '9999px'. */
   borderRadius?: ViewBorderRadiusToken;

package/dist/index.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");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 let _emotion_react = require("@emotion/react");
 Object.defineProperty(exports, "createShouldForwardProp", {

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { d as PaletteColor, h as Theme, r as CSSObject } from "./themes-CUV79qWU.cjs";
-import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-2QPYJgCl.cjs";
+import { S as Theme, r as CSSObject, v as PaletteColor } from "./themes-9YNnlVyY.cjs";
+import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-DkJzi96w.cjs";
 export * from "@soroush.tech/styled-system";
 export { type CSSObject, type PaletteColor, type Theme, type ThemeCustomizationOptions, createShouldForwardProp, css, keyframes, props, styled };

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { d as PaletteColor, h as Theme, r as CSSObject } from "./themes-CUV79qWU.mjs";
-import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-q9peil7T.mjs";
+import { S as Theme, r as CSSObject, v as PaletteColor } from "./themes-9YNnlVyY.mjs";
+import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-CEqa8xx8.mjs";
 export * from "@soroush.tech/styled-system";
 export { type CSSObject, type PaletteColor, type Theme, type ThemeCustomizationOptions, createShouldForwardProp, css, keyframes, props, styled };

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import { i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+import { i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 export * from "@soroush.tech/styled-system";
 export { createShouldForwardProp, css, keyframes, props, styled };

package/dist/layoutStyles-B4Z1K6HZ.cjs

@@ -0,0 +1,67 @@
+const require_src = require("./src-DU81aGy9.cjs");
+//#region src/PageLayout/layoutStyles.ts
+const mergePanel = (panel, override) => {
+	const { mode, width, railWidth } = {
+		...panel,
+		...override
+	};
+	return mode && width !== void 0 && railWidth !== void 0 ? {
+		mode,
+		width,
+		railWidth
+	} : void 0;
+};
+const mergeEntry = (entry, { bars, panels, content }) => ({
+	bars: {
+		...entry.bars,
+		...bars
+	},
+	panels: {
+		start: mergePanel(entry.panels.start, panels?.start),
+		end: mergePanel(entry.panels.end, panels?.end)
+	},
+	content: {
+		...entry.content,
+		...content
+	}
+});
+/**
+* `theme.layout` resolved mobile-first: the base entry, then one entry per
+* breakpoint that has one, merged over the entries before it, with its `@media` rule.
+*/
+const layoutEntries = ({ breakpoints, layout }) => {
+	let entry = layout.base;
+	const entries = [[null, entry]];
+	for (const [key, value] of Object.entries(breakpoints)) {
+		const override = layout[key];
+		if (!override) continue;
+		entry = mergeEntry(entry, override);
+		entries.push([(0, require_src.src_exports.createMediaQuery)(value), entry]);
+	}
+	return entries;
+};
+/** A layout length as CSS: a `theme.space` key resolves through the scale, a length stays as written. */
+const layoutLength = (theme, value = 0) => {
+	const length = theme.space[value] ?? value;
+	return typeof length === "number" ? `${length}px` : length;
+};
+/** Styles per layout entry: the base entry's at the top level, each breakpoint's in its `@media` block. */
+const layoutStyles = (theme, style) => {
+	const styles = {};
+	for (const [media, entry] of layoutEntries(theme)) if (media) styles[media] = style(entry);
+	else Object.assign(styles, style(entry));
+	return styles;
+};
+//#endregion
+Object.defineProperty(exports, "layoutLength", {
+	enumerable: true,
+	get: function() {
+		return layoutLength;
+	}
+});
+Object.defineProperty(exports, "layoutStyles", {
+	enumerable: true,
+	get: function() {
+		return layoutStyles;
+	}
+});

package/dist/layoutStyles-f0ISNjsC.mjs

@@ -0,0 +1,56 @@
+import { a as src_exports } from "./src-DLGYOJMh.mjs";
+//#region src/PageLayout/layoutStyles.ts
+const mergePanel = (panel, override) => {
+	const { mode, width, railWidth } = {
+		...panel,
+		...override
+	};
+	return mode && width !== void 0 && railWidth !== void 0 ? {
+		mode,
+		width,
+		railWidth
+	} : void 0;
+};
+const mergeEntry = (entry, { bars, panels, content }) => ({
+	bars: {
+		...entry.bars,
+		...bars
+	},
+	panels: {
+		start: mergePanel(entry.panels.start, panels?.start),
+		end: mergePanel(entry.panels.end, panels?.end)
+	},
+	content: {
+		...entry.content,
+		...content
+	}
+});
+/**
+* `theme.layout` resolved mobile-first: the base entry, then one entry per
+* breakpoint that has one, merged over the entries before it, with its `@media` rule.
+*/
+const layoutEntries = ({ breakpoints, layout }) => {
+	let entry = layout.base;
+	const entries = [[null, entry]];
+	for (const [key, value] of Object.entries(breakpoints)) {
+		const override = layout[key];
+		if (!override) continue;
+		entry = mergeEntry(entry, override);
+		entries.push([(0, src_exports.createMediaQuery)(value), entry]);
+	}
+	return entries;
+};
+/** A layout length as CSS: a `theme.space` key resolves through the scale, a length stays as written. */
+const layoutLength = (theme, value = 0) => {
+	const length = theme.space[value] ?? value;
+	return typeof length === "number" ? `${length}px` : length;
+};
+/** Styles per layout entry: the base entry's at the top level, each breakpoint's in its `@media` block. */
+const layoutStyles = (theme, style) => {
+	const styles = {};
+	for (const [media, entry] of layoutEntries(theme)) if (media) styles[media] = style(entry);
+	else Object.assign(styles, style(entry));
+	return styles;
+};
+//#endregion
+export { layoutStyles as n, layoutLength as t };

package/dist/{src-D3tHU94W.mjs → src-DLGYOJMh.mjs}

@@ -50,7 +50,7 @@ const createThemedStyled = (tag, options = {}) => {
 	return (...styles) => create(...styles, themeStyles, ...systemProps);
 };
 /**
-* The design system's `styled` — Emotion's styled plus theme-level component
+* The design system's `styled` - Emotion's styled plus theme-level component
 * customization (`theme.components[name].styleOverrides` / `.variants`).
 */
 const styled = Object.assign(createThemedStyled, emotionStyled);

package/dist/{src-BJrcLd7P.cjs → src-DU81aGy9.cjs}

@@ -26,7 +26,7 @@ const createThemedStyled = (tag, options = {}) => {
 	return (...styles) => create(...styles, themeStyles, ...systemProps);
 };
 /**
-* The design system's `styled` — Emotion's styled plus theme-level component
+* The design system's `styled` - Emotion's styled plus theme-level component
 * customization (`theme.components[name].styleOverrides` / `.variants`).
 */
 const styled = Object.assign(createThemedStyled, _emotion_styled.default);

package/dist/style.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_theme = require("./theme-CleLAV6A.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@emotion/react");
 //#region src/style/hooks/useStyle.ts

package/dist/style.d.cts

@@ -1,5 +1,5 @@
-import { h as Theme, r as CSSObject } from "./themes-CUV79qWU.cjs";
-import "./index-MsUtFRul.cjs";
+import { S as Theme, r as CSSObject } from "./themes-9YNnlVyY.cjs";
+import "./index-BDD-L8uL.cjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/style/hooks/useStyle.d.ts
 type StyleFactory = {

package/dist/style.d.mts

@@ -1,5 +1,5 @@
-import { h as Theme, r as CSSObject } from "./themes-CUV79qWU.mjs";
-import "./index-BoOs5h_b.mjs";
+import { S as Theme, r as CSSObject } from "./themes-9YNnlVyY.mjs";
+import "./index-CoHrw2p7.mjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/style/hooks/useStyle.d.ts
 type StyleFactory = {

package/dist/style.mjs

@@ -1,4 +1,4 @@
-import { r as useTheme } from "./theme-Cudynq5K.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
 import { n as EmotionThemeContext } from "./emotion-BAyqVw0c.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/style/hooks/useStyle.ts

package/dist/{theme-Cudynq5K.mjs → theme-BQGlZoma.mjs}

@@ -21,7 +21,7 @@ const deepMerge = (base, overrides) => {
 *
 * - Recurses only where both sides are plain objects; arrays (`shadows`,
 *   `fontSizes`) and functions replace wholesale.
-* - `undefined` override values are ignored — a key can be added or replaced,
+* - `undefined` override values are ignored - a key can be added or replaced,
 *   never removed.
 * - Neither argument is mutated; untouched branches keep referential identity.
 */
@@ -141,6 +141,52 @@ const space = {
 	10: spacing(10),
 	auto: "auto"
 };
+const breakpoints = {
+	tablet: "600px",
+	web: "1200px",
+	wide: "1600px"
+};
+const layout = {
+	base: {
+		bars: { bottom: 8 },
+		panels: { start: {
+			mode: "hidden",
+			width: "280px",
+			railWidth: 9
+		} },
+		content: {
+			columns: 4,
+			margin: 2,
+			gutter: 2,
+			mode: "fluid"
+		}
+	},
+	tablet: {
+		panels: { start: { mode: "collapsed" } },
+		content: {
+			columns: 8,
+			margin: 4
+		}
+	},
+	web: {
+		bars: {
+			top: 8,
+			bottom: 0
+		},
+		panels: { start: { mode: "inline" } },
+		content: {
+			columns: 12,
+			margin: 3,
+			gutter: 3,
+			mode: "fixed",
+			maxWidth: "1200px"
+		}
+	},
+	wide: { content: {
+		columns: 16,
+		maxWidth: "1600px"
+	} }
+};
 const typography = {
 	h1: {
 		element: "h1",
@@ -214,8 +260,8 @@ const typography = {
 	inherit: { element: "span" }
 };
 /**
-* The package's complete default theme (dark-schemed). Raw hex only — palettes
-* belong to the consumer, who builds brand themes with `createTheme(baseTheme, …)`.
+* The package's complete default theme (dark-schemed). Raw hex only - palettes
+* belong to the consumer, who builds brand themes with `createTheme(baseTheme, ...)`.
 */
 const baseTheme = {
 	name: "base",
@@ -232,6 +278,8 @@ const baseTheme = {
 	icon,
 	sizes,
 	space,
+	breakpoints,
+	layout,
 	zOrder,
 	blur: "12px",
 	colorScheme: "dark",
@@ -328,7 +376,7 @@ function ThemeProvider({ children, theme = baseTheme, defaults }) {
 //#endregion
 //#region src/theme/hooks/useTheme.ts
 /**
-* The active theme, typed as this package's own `Theme` — Emotion is an
+* The active theme, typed as this package's own `Theme` - Emotion is an
 * internal implementation detail, never part of the public type surface.
 */
 const useTheme = () => useEmotionTheme();
@@ -355,4 +403,4 @@ function withTheme(WrappedComponent) {
 	};
 }
 //#endregion
-export { typography as _, avatar as a, fontSizes as c, icon as d, letterSpacings as f, space as g, sizes as h, ThemeProvider as i, fontWeights as l, radii as m, useDefaultProps as n, baseTheme as o, lineHeights as p, useTheme as r, borderWidths as s, withTheme as t, fonts as u, zOrder as v, createTheme as y };
+export { sizes as _, avatar as a, zOrder as b, breakpoints as c, fonts as d, icon as f, radii as g, lineHeights as h, ThemeProvider as i, fontSizes as l, letterSpacings as m, useDefaultProps as n, baseTheme as o, layout as p, useTheme as r, borderWidths as s, withTheme as t, fontWeights as u, space as v, createTheme as x, typography as y };

package/dist/{theme-CleLAV6A.cjs → theme-BmEAXmwh.cjs}

@@ -21,7 +21,7 @@ const deepMerge = (base, overrides) => {
 *
 * - Recurses only where both sides are plain objects; arrays (`shadows`,
 *   `fontSizes`) and functions replace wholesale.
-* - `undefined` override values are ignored — a key can be added or replaced,
+* - `undefined` override values are ignored - a key can be added or replaced,
 *   never removed.
 * - Neither argument is mutated; untouched branches keep referential identity.
 */
@@ -141,6 +141,52 @@ const space = {
 	10: spacing(10),
 	auto: "auto"
 };
+const breakpoints = {
+	tablet: "600px",
+	web: "1200px",
+	wide: "1600px"
+};
+const layout = {
+	base: {
+		bars: { bottom: 8 },
+		panels: { start: {
+			mode: "hidden",
+			width: "280px",
+			railWidth: 9
+		} },
+		content: {
+			columns: 4,
+			margin: 2,
+			gutter: 2,
+			mode: "fluid"
+		}
+	},
+	tablet: {
+		panels: { start: { mode: "collapsed" } },
+		content: {
+			columns: 8,
+			margin: 4
+		}
+	},
+	web: {
+		bars: {
+			top: 8,
+			bottom: 0
+		},
+		panels: { start: { mode: "inline" } },
+		content: {
+			columns: 12,
+			margin: 3,
+			gutter: 3,
+			mode: "fixed",
+			maxWidth: "1200px"
+		}
+	},
+	wide: { content: {
+		columns: 16,
+		maxWidth: "1600px"
+	} }
+};
 const typography = {
 	h1: {
 		element: "h1",
@@ -214,8 +260,8 @@ const typography = {
 	inherit: { element: "span" }
 };
 /**
-* The package's complete default theme (dark-schemed). Raw hex only — palettes
-* belong to the consumer, who builds brand themes with `createTheme(baseTheme, …)`.
+* The package's complete default theme (dark-schemed). Raw hex only - palettes
+* belong to the consumer, who builds brand themes with `createTheme(baseTheme, ...)`.
 */
 const baseTheme = {
 	name: "base",
@@ -232,6 +278,8 @@ const baseTheme = {
 	icon,
 	sizes,
 	space,
+	breakpoints,
+	layout,
 	zOrder,
 	blur: "12px",
 	colorScheme: "dark",
@@ -328,7 +376,7 @@ function ThemeProvider({ children, theme = baseTheme, defaults }) {
 //#endregion
 //#region src/theme/hooks/useTheme.ts
 /**
-* The active theme, typed as this package's own `Theme` — Emotion is an
+* The active theme, typed as this package's own `Theme` - Emotion is an
 * internal implementation detail, never part of the public type surface.
 */
 const useTheme = () => (0, _emotion_react.useTheme)();
@@ -379,6 +427,12 @@ Object.defineProperty(exports, "borderWidths", {
 		return borderWidths;
 	}
 });
+Object.defineProperty(exports, "breakpoints", {
+	enumerable: true,
+	get: function() {
+		return breakpoints;
+	}
+});
 Object.defineProperty(exports, "createTheme", {
 	enumerable: true,
 	get: function() {
@@ -409,6 +463,12 @@ Object.defineProperty(exports, "icon", {
 		return icon;
 	}
 });
+Object.defineProperty(exports, "layout", {
+	enumerable: true,
+	get: function() {
+		return layout;
+	}
+});
 Object.defineProperty(exports, "letterSpacings", {
 	enumerable: true,
 	get: function() {

package/dist/theme.cjs

@@ -1,15 +1,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-CleLAV6A.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
 exports.ThemeProvider = require_theme.ThemeProvider;
 exports.avatar = require_theme.avatar;
 exports.baseTheme = require_theme.baseTheme;
 exports.borderWidths = require_theme.borderWidths;
+exports.breakpoints = require_theme.breakpoints;
 exports.createTheme = require_theme.createTheme;
 exports.fontSizes = require_theme.fontSizes;
 exports.fontWeights = require_theme.fontWeights;
 exports.fonts = require_theme.fonts;
 exports.icon = require_theme.icon;
+exports.layout = require_theme.layout;
 exports.letterSpacings = require_theme.letterSpacings;
 exports.lineHeights = require_theme.lineHeights;
 exports.radii = require_theme.radii;

package/dist/theme.d.cts

@@ -1,3 +1,3 @@
-import { $ as DeepPartial, A as ThemeSizes, B as baseTheme, C as ThemeFonts, D as ThemePalette, E as ThemeLineHeights, F as ThemeTypographyVariants, G as icon, H as fontSizes, I as ThemeZOrder, J as radii, K as letterSpacings, L as TypographyVariant, M as ThemeSpace, N as ThemeSwitch, O as ThemeRadii, P as ThemeText, Q as zOrder, R as TypographyVariantStyle, S as ThemeFontWeights, T as ThemeLetterSpacings, U as fontWeights, V as borderWidths, W as fonts, X as space, Y as sizes, Z as typography, _ as ThemeBackground, a as CardSlotIconProps, b as ThemeComponents, c as ComponentStyle, d as PaletteColor, et as ThemeOverride, f as PaletteEntry, g as ThemeAvatarSizes, h as Theme, i as CardOwnerState, j as ThemeSkeleton, k as ThemeShadow, l as ComponentVariant, m as SizeEntry, n as ButtonVariants, o as CardSlotTypographyProps, p as PressableOwnerState, q as lineHeights, r as CSSObject, s as ComponentConfig, t as ButtonOwnerState, tt as createTheme, u as OpenScale, v as ThemeBorder, w as ThemeIconSizes, x as ThemeDefaults, y as ThemeBorderWidths, z as avatar } from "./themes-CUV79qWU.cjs";
-import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-MsUtFRul.cjs";
-export { ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, OpenScale, PaletteColor, PaletteEntry, PressableOwnerState, SizeEntry, Theme, ThemeAvatarSizes, ThemeBackground, ThemeBorder, ThemeBorderWidths, ThemeComponents, ThemeDefaults, ThemeFontWeights, ThemeFonts, ThemeIconSizes, ThemeLetterSpacings, ThemeLineHeights, type ThemeOverride, ThemePalette, ThemeProvider, ThemeRadii, ThemeShadow, ThemeSizes, ThemeSkeleton, ThemeSpace, ThemeSwitch, ThemeText, ThemeTypographyVariants, ThemeZOrder, TypographyVariant, TypographyVariantStyle, avatar, baseTheme, borderWidths, createTheme, fontSizes, fontWeights, fonts, icon, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };
+import { $ as fontWeights, A as ThemeFontWeights, B as ThemeSkeleton, C as ThemeAvatarSizes, D as ThemeBreakpoints, E as ThemeBorderWidths, F as ThemeLineHeights, G as ThemeZOrder, H as ThemeSwitch, I as ThemePalette, J as avatar, K as TypographyVariant, L as ThemeRadii, M as ThemeIconSizes, N as ThemeLayout, O as ThemeComponents, P as ThemeLetterSpacings, Q as fontSizes, R as ThemeShadow, S as Theme, T as ThemeBorder, U as ThemeText, V as ThemeSpace, W as ThemeTypographyVariants, X as borderWidths, Y as baseTheme, Z as breakpoints, _ as OpenScale, a as CardSlotIconProps, at as radii, b as PressableOwnerState, c as ComponentStyle, ct as typography, d as LayoutContent, dt as ThemeOverride, et as fonts, f as LayoutEntry, ft as createTheme, g as LayoutSpace, h as LayoutPanels, i as CardOwnerState, it as lineHeights, j as ThemeFonts, k as ThemeDefaults, l as ComponentVariant, lt as zOrder, m as LayoutPanel, n as ButtonVariants, nt as layout, o as CardSlotTypographyProps, ot as sizes, p as LayoutLength, q as TypographyVariantStyle, r as CSSObject, rt as letterSpacings, s as ComponentConfig, st as space, t as ButtonOwnerState, tt as icon, u as LayoutBars, ut as DeepPartial, v as PaletteColor, w as ThemeBackground, x as SizeEntry, y as PaletteEntry, z as ThemeSizes } from "./themes-9YNnlVyY.cjs";
+import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-BDD-L8uL.cjs";
+export { ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, LayoutBars, LayoutContent, LayoutEntry, LayoutLength, LayoutPanel, LayoutPanels, LayoutSpace, OpenScale, PaletteColor, PaletteEntry, PressableOwnerState, SizeEntry, Theme, ThemeAvatarSizes, ThemeBackground, ThemeBorder, ThemeBorderWidths, ThemeBreakpoints, ThemeComponents, ThemeDefaults, ThemeFontWeights, ThemeFonts, ThemeIconSizes, ThemeLayout, ThemeLetterSpacings, ThemeLineHeights, type ThemeOverride, ThemePalette, ThemeProvider, ThemeRadii, ThemeShadow, ThemeSizes, ThemeSkeleton, ThemeSpace, ThemeSwitch, ThemeText, ThemeTypographyVariants, ThemeZOrder, TypographyVariant, TypographyVariantStyle, avatar, baseTheme, borderWidths, breakpoints, createTheme, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };

package/dist/theme.d.mts

@@ -1,3 +1,3 @@
-import { $ as DeepPartial, A as ThemeSizes, B as baseTheme, C as ThemeFonts, D as ThemePalette, E as ThemeLineHeights, F as ThemeTypographyVariants, G as icon, H as fontSizes, I as ThemeZOrder, J as radii, K as letterSpacings, L as TypographyVariant, M as ThemeSpace, N as ThemeSwitch, O as ThemeRadii, P as ThemeText, Q as zOrder, R as TypographyVariantStyle, S as ThemeFontWeights, T as ThemeLetterSpacings, U as fontWeights, V as borderWidths, W as fonts, X as space, Y as sizes, Z as typography, _ as ThemeBackground, a as CardSlotIconProps, b as ThemeComponents, c as ComponentStyle, d as PaletteColor, et as ThemeOverride, f as PaletteEntry, g as ThemeAvatarSizes, h as Theme, i as CardOwnerState, j as ThemeSkeleton, k as ThemeShadow, l as ComponentVariant, m as SizeEntry, n as ButtonVariants, o as CardSlotTypographyProps, p as PressableOwnerState, q as lineHeights, r as CSSObject, s as ComponentConfig, t as ButtonOwnerState, tt as createTheme, u as OpenScale, v as ThemeBorder, w as ThemeIconSizes, x as ThemeDefaults, y as ThemeBorderWidths, z as avatar } from "./themes-CUV79qWU.mjs";
-import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-BoOs5h_b.mjs";
-export { ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, OpenScale, PaletteColor, PaletteEntry, PressableOwnerState, SizeEntry, Theme, ThemeAvatarSizes, ThemeBackground, ThemeBorder, ThemeBorderWidths, ThemeComponents, ThemeDefaults, ThemeFontWeights, ThemeFonts, ThemeIconSizes, ThemeLetterSpacings, ThemeLineHeights, type ThemeOverride, ThemePalette, ThemeProvider, ThemeRadii, ThemeShadow, ThemeSizes, ThemeSkeleton, ThemeSpace, ThemeSwitch, ThemeText, ThemeTypographyVariants, ThemeZOrder, TypographyVariant, TypographyVariantStyle, avatar, baseTheme, borderWidths, createTheme, fontSizes, fontWeights, fonts, icon, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };
+import { $ as fontWeights, A as ThemeFontWeights, B as ThemeSkeleton, C as ThemeAvatarSizes, D as ThemeBreakpoints, E as ThemeBorderWidths, F as ThemeLineHeights, G as ThemeZOrder, H as ThemeSwitch, I as ThemePalette, J as avatar, K as TypographyVariant, L as ThemeRadii, M as ThemeIconSizes, N as ThemeLayout, O as ThemeComponents, P as ThemeLetterSpacings, Q as fontSizes, R as ThemeShadow, S as Theme, T as ThemeBorder, U as ThemeText, V as ThemeSpace, W as ThemeTypographyVariants, X as borderWidths, Y as baseTheme, Z as breakpoints, _ as OpenScale, a as CardSlotIconProps, at as radii, b as PressableOwnerState, c as ComponentStyle, ct as typography, d as LayoutContent, dt as ThemeOverride, et as fonts, f as LayoutEntry, ft as createTheme, g as LayoutSpace, h as LayoutPanels, i as CardOwnerState, it as lineHeights, j as ThemeFonts, k as ThemeDefaults, l as ComponentVariant, lt as zOrder, m as LayoutPanel, n as ButtonVariants, nt as layout, o as CardSlotTypographyProps, ot as sizes, p as LayoutLength, q as TypographyVariantStyle, r as CSSObject, rt as letterSpacings, s as ComponentConfig, st as space, t as ButtonOwnerState, tt as icon, u as LayoutBars, ut as DeepPartial, v as PaletteColor, w as ThemeBackground, x as SizeEntry, y as PaletteEntry, z as ThemeSizes } from "./themes-9YNnlVyY.mjs";
+import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-CoHrw2p7.mjs";
+export { ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, LayoutBars, LayoutContent, LayoutEntry, LayoutLength, LayoutPanel, LayoutPanels, LayoutSpace, OpenScale, PaletteColor, PaletteEntry, PressableOwnerState, SizeEntry, Theme, ThemeAvatarSizes, ThemeBackground, ThemeBorder, ThemeBorderWidths, ThemeBreakpoints, ThemeComponents, ThemeDefaults, ThemeFontWeights, ThemeFonts, ThemeIconSizes, ThemeLayout, ThemeLetterSpacings, ThemeLineHeights, type ThemeOverride, ThemePalette, ThemeProvider, ThemeRadii, ThemeShadow, ThemeSizes, ThemeSkeleton, ThemeSpace, ThemeSwitch, ThemeText, ThemeTypographyVariants, ThemeZOrder, TypographyVariant, TypographyVariantStyle, avatar, baseTheme, borderWidths, breakpoints, createTheme, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };

package/dist/theme.mjs

@@ -1,3 +1,3 @@
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { _ as typography, a as avatar, c as fontSizes, d as icon, f as letterSpacings, g as space, h as sizes, i as ThemeProvider, l as fontWeights, m as radii, n as useDefaultProps, o as baseTheme, p as lineHeights, r as useTheme, s as borderWidths, t as withTheme, u as fonts, v as zOrder, y as createTheme } from "./theme-Cudynq5K.mjs";
-export { ThemeProvider, avatar, baseTheme, borderWidths, createTheme, fontSizes, fontWeights, fonts, icon, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };
+import { _ as sizes, a as avatar, b as zOrder, c as breakpoints, d as fonts, f as icon, g as radii, h as lineHeights, i as ThemeProvider, l as fontSizes, m as letterSpacings, n as useDefaultProps, o as baseTheme, p as layout, r as useTheme, s as borderWidths, t as withTheme, u as fontWeights, v as space, x as createTheme, y as typography } from "./theme-BQGlZoma.mjs";
+export { ThemeProvider, avatar, baseTheme, borderWidths, breakpoints, createTheme, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };