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

package/dist/index-BnFxdnEL.d.mts

@@ -0,0 +1,16 @@
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { s as ViewProps } from "./index-tv-TGYSG.mjs";
+import { FlexboxProps, GridProps } from "@soroush.tech/styled-system";
+//#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$1 extends ViewProps, GridProps<Theme>, FlexboxProps<Theme> {}
+declare const Grid: import("@emotion/styled").StyledComponent<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+} & GridProps$1, {}, {}>;
+//#endregion
+export { Grid as n, GridProps$1 as r, GapToken as t };

package/dist/{index-DhMAwR96.d.mts → index-CCrocxBL.d.cts}

@@ -1,8 +1,8 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-C-2VKPcp.mjs";
-import { SpaceProps } from "@soroush.tech/styled-system";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-S3NZS-Qp.cjs";
 import { ElementType, HTMLAttributes } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/ButtonGroup/ButtonGroup.d.ts
 type ButtonGroupOrientation = 'horizontal' | 'vertical';
 type ButtonGroupRadius = keyof Theme['radii'];

package/dist/{index-v_otepCe.d.mts → index-CEqa8xx8.d.mts}

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
 import { CreateStyledComponent, FilteringStyledOptions, Interpolation, StyledOptions } from "@emotion/styled";
 import { PropsOf, css as css$1, keyframes } from "@emotion/react";
 import { createShouldForwardProp, props } from "@soroush.tech/styled-system/should-forward-prop";

package/dist/{index-d6gR2x8j.d.cts → index-CLttbRhG.d.cts}

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Pagination/hooks/usePagination.d.ts

package/dist/{index-CHRAYSwH.d.cts → index-CVb5zbas.d.mts}

@@ -1,8 +1,8 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { t as TableCellPadding } from "./TableContext-DXzUQ4-a.cjs";
-import { ElementType, ThHTMLAttributes } from "react";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { t as TableCellPadding } from "./TableContext-DBOk01Xl.mjs";
 import { BorderProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { ElementType, ThHTMLAttributes } from "react";
 //#region src/Table/TableSectionContext.d.ts
 /** The table section a cell lives in - drives `TableCell`'s th/td element resolution. */
 type TableSection = 'head' | 'body' | 'footer';

package/dist/{index-XZDPGJ_h.d.mts → index-Cjlax0-f.d.mts}

@@ -1,5 +1,5 @@
-import { a as PaginationItemSize } from "./index-DdBeSvit.mjs";
-import "./index-h36rcOy8.mjs";
+import { a as PaginationItemSize } from "./index-CzmA09Yf.mjs";
+import "./index-DsKd9VW5.mjs";
 import { HTMLAttributes } from "react";
 //#region src/Table/TablePaginationActions/TablePaginationActions.d.ts
 type TablePaginationActionType = 'first' | 'previous' | 'next' | 'last';

package/dist/{index-NBVilQuP.d.mts → index-CoHrw2p7.d.mts}

@@ -1,4 +1,4 @@
-import { b as ThemeComponents, h as Theme, x as ThemeDefaults } from "./themes-kbuYiwCi.mjs";
+import { O as ThemeComponents, S as Theme, k as ThemeDefaults } from "./themes-9YNnlVyY.mjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/theme/ThemeProvider.d.ts
 interface ThemeProviderProps {

package/dist/{index-h36rcOy8.d.mts → index-CohgpyUj.d.cts}

@@ -1,8 +1,8 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-DdBeSvit.mjs";
-import { SpaceProps } from "@soroush.tech/styled-system";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-CLttbRhG.cjs";
 import { HTMLAttributes } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Pagination/Pagination.d.ts
 type PaginationColor = PaginationItemColor;
 type PaginationVariant = PaginationItemVariant;

package/dist/{index-DzuXwDCW.d.cts → index-CtrxW81j.d.cts}

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { ButtonHTMLAttributes, ElementType } from "react";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Pressable/Pressable.d.ts

package/dist/{index-DQ16ijxx.d.mts → index-CvWslVk6.d.cts}

@@ -1,7 +1,7 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { CSSProperties, HTMLAttributes } from "react";
+import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/View/View.d.ts
 /** Valid values for the color prop - derived from theme.text keys. */
 type ViewColorToken = keyof Theme['text'];

package/dist/{index-DdBeSvit.d.mts → index-CzmA09Yf.d.mts}

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
+import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
 //#region src/Pagination/hooks/usePagination.d.ts

package/dist/{index-C-2VKPcp.d.mts → index-D4i9vrQM.d.mts}

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme, n as ButtonVariants } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
+import { S as Theme, n as ButtonVariants, v as PaletteColor } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes, ReactNode } from "react";
 //#region src/Button/Button.d.ts

package/dist/{index-vuPAf55D.d.cts → index-DNNg9RoR.d.cts}

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as IconProps, r as IconName } from "./index-DCu7qjpa.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 { ButtonHTMLAttributes } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Table/TableSortLabel/TableSortLabel.d.ts

package/dist/{index-76XH-GEc.d.mts → index-DPHwCZYf.d.cts}

@@ -1,6 +1,6 @@
-import { n as TextColorToken } from "./index-BWECJgSb.mjs";
-import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+import { n as TextColorToken } from "./index-bN91IhZi.cjs";
 import { SVGProps } from "react";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Icon/icons/AccountTree.d.ts
 declare const SvgAccountTree: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion

package/dist/{index-jmy5eXpx.d.cts → index-DkJzi96w.d.cts}

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
 import { CreateStyledComponent, FilteringStyledOptions, Interpolation, StyledOptions } from "@emotion/styled";
 import { PropsOf, css, keyframes } from "@emotion/react";
 import { ComponentClass, ComponentProps, ComponentType, JSX, Ref } from "react";

package/dist/{index-Br2gDSme.d.cts → index-DsKd9VW5.d.mts}

@@ -1,8 +1,8 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-d6gR2x8j.cjs";
-import { HTMLAttributes } from "react";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-CzmA09Yf.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
+import { HTMLAttributes } from "react";
 //#region src/Pagination/Pagination.d.ts
 type PaginationColor = PaginationItemColor;
 type PaginationVariant = PaginationItemVariant;

package/dist/{index-Csp1Wzbz.d.cts → index-DuefjNlC.d.mts}

@@ -1,7 +1,7 @@
-import { L as TypographyVariant, h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { CSSProperties, ElementType, HTMLAttributes } from "react";
+import { K as TypographyVariant, 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, ElementType, HTMLAttributes } from "react";
 //#region src/Typography/Typography.d.ts
 type TypographyAlign = 'left' | 'right' | 'center' | 'justify' | 'inherit';
 /** Valid values for the color prop - derived from theme.text keys. */

package/dist/{index-D9CwTcnr.d.cts → index-EYR0z1Qv.d.cts}

@@ -1,5 +1,5 @@
-import { a as PaginationItemSize } from "./index-d6gR2x8j.cjs";
-import "./index-Br2gDSme.cjs";
+import { a as PaginationItemSize } from "./index-CLttbRhG.cjs";
+import "./index-CohgpyUj.cjs";
 import { HTMLAttributes } from "react";
 //#region src/Table/TablePaginationActions/TablePaginationActions.d.ts
 type TablePaginationActionType = 'first' | 'previous' | 'next' | 'last';

package/dist/{index-ggLhNdZV.d.mts → index-IEvuh6Cd.d.mts}

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as IconProps, r as IconName } from "./index-76XH-GEc.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 { SpaceProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes } from "react";
 //#region src/Table/TableSortLabel/TableSortLabel.d.ts

package/dist/{index-Oxx0z4dS.d.cts → index-S3NZS-Qp.d.cts}

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme, n as ButtonVariants } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+import { S as Theme, n as ButtonVariants, v as PaletteColor } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { ButtonHTMLAttributes, ReactNode } from "react";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Button/Button.d.ts

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

@@ -1,7 +1,7 @@
-import { L as TypographyVariant, h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.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. */

package/dist/{index-D-QRCHiS.d.cts → index-qtKJ56yu.d.mts}

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+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';

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

@@ -1,6 +1,6 @@
-import { n as TextColorToken } from "./index-Csp1Wzbz.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

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

@@ -1,7 +1,7 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.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. */
 type ViewColorToken = keyof Theme['text'];

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { d as PaletteColor, h as Theme, r as CSSObject } from "./themes-kbuYiwCi.cjs";
-import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-jmy5eXpx.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-kbuYiwCi.mjs";
-import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-v_otepCe.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/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/style.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_theme = require("./theme-Bnc03K83.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-kbuYiwCi.cjs";
-import "./index-D3iQQ0L3.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-kbuYiwCi.mjs";
-import "./index-NBVilQuP.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-BuqqFbsz.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-BuqqFbsz.mjs → theme-BQGlZoma.mjs}

@@ -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",
@@ -232,6 +278,8 @@ const baseTheme = {
 	icon,
 	sizes,
 	space,
+	breakpoints,
+	layout,
 	zOrder,
 	blur: "12px",
 	colorScheme: "dark",
@@ -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-Bnc03K83.cjs → theme-BmEAXmwh.cjs}

@@ -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",
@@ -232,6 +278,8 @@ const baseTheme = {
 	icon,
 	sizes,
 	space,
+	breakpoints,
+	layout,
 	zOrder,
 	blur: "12px",
 	colorScheme: "dark",
@@ -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-Bnc03K83.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-kbuYiwCi.cjs";
-import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-D3iQQ0L3.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 };