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

package/dist/{index-VwsWkazt.d.cts → index-DdqdSOct.d.cts}

@@ -1,5 +1,5 @@
-import { T as Theme, x as PaletteColor } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
+import { T as Theme, x as PaletteColor } from "./themes-Kbk9h5cN.cjs";
+import "./index-DBUwu65Z.cjs";
 import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Pagination/hooks/usePagination.d.ts

package/dist/{index-BUvlTtD7.d.mts → index-DzQJSYIh.d.cts}

@@ -1,6 +1,6 @@
-import { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { n as FlexProps } from "./index-C_VwtHyK.mjs";
+import { T as Theme } from "./themes-Kbk9h5cN.cjs";
+import "./index-DBUwu65Z.cjs";
+import { n as FlexProps } from "./index-CA7HnbtH.cjs";
 import { CSSProperties, ElementType } from "react";
 //#region src/Paper/Paper.d.ts
 type PaperElevation = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;

package/dist/{index-CmscFo1L.d.mts → index-GpnmW6vu.d.mts}

@@ -1,5 +1,5 @@
-import { T as Theme, x as PaletteColor } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
+import { T as Theme, x as PaletteColor } from "./themes-RX2UX5gD.mjs";
+import "./index-C1WqEDtQ.mjs";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes, ElementType } from "react";
 //#region src/Pressable/Pressable.d.ts

package/dist/{index-di-L2lJ9.d.mts → index-S-ClM6WM.d.mts}

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

package/dist/{index-BO-vkjtm.d.cts → index-VOsBSWEu.d.mts}

@@ -1,4 +1,4 @@
-import { M as ThemeDefaults, T as Theme, j as ThemeComponents } from "./themes-Dswy4M6B.cjs";
+import { I as ThemeLayout, M as ThemeDefaults, T as Theme, j as ThemeComponents } from "./themes-RX2UX5gD.mjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/theme/ThemeProvider.d.ts
 interface ThemeProviderProps {
@@ -17,6 +17,24 @@ interface ThemeProviderProps {
 }
 declare function ThemeProvider({ children, theme, defaults }: Readonly<ThemeProviderProps>): import("react").JSX.Element;
 //#endregion
+//#region src/theme/LayoutProvider.d.ts
+interface LayoutProviderProps {
+  /**
+   * The page's layout: `theme.layout`'s shape - `content`, `panels`, `bars` per breakpoint -
+   * partial. A value holds from its breakpoint up, until the page sets it again. Keep it stable
+   * (defined outside the component, or memoized): a new object re-derives the theme.
+   */
+  layout: ThemeLayout;
+  children: ReactNode;
+}
+/**
+ * @description A page-level layout: everything inside sees `theme.layout` with the page's
+ * values merged on top - `View`, `Flex` and `Grid` with `layout`, and `useTheme().layout`. It
+ * derives the theme from the one around it and changes nothing else, so colours, light/dark
+ * switching and every other token stay the app theme's. Nested providers stack.
+ */
+declare function LayoutProvider({ layout, children }: Readonly<LayoutProviderProps>): import("react").JSX.Element;
+//#endregion
 //#region src/theme/utils/themeDefault.d.ts
 /**
  * Resolves a component's default token/variant key: the theme's optional
@@ -50,4 +68,4 @@ declare function withTheme<P extends object>(WrappedComponent: ComponentType<P &
   theme: Theme;
 }>): (props: P) => import("react").JSX.Element;
 //#endregion
-export { ThemeProvider as a, themeDefault as i, useDefaultProps as n, useTheme as r, withTheme as t };
+export { LayoutProvider as a, themeDefault as i, useDefaultProps as n, LayoutProviderProps as o, useTheme as r, ThemeProvider as s, withTheme as t };

package/dist/{index-BW4rc8cK.d.cts → index-Wnv6jCR3.d.mts}

@@ -1,5 +1,5 @@
-import { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
+import { T as Theme } from "./themes-RX2UX5gD.mjs";
+import "./index-C1WqEDtQ.mjs";
 import { KeyboardEvent, MouseEvent, ReactNode, Ref, RefCallback, SyntheticEvent } from "react";
 //#region src/Modal/useModal.d.ts
 type ModalCloseReason = 'escapeKey' | 'backdropClick';

package/dist/{index-C8SeYUxJ.d.cts → index-cuv3o-L7.d.mts}

@@ -1,7 +1,7 @@
-import { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
-import { CSSProperties, HTMLAttributes } from "react";
+import { T as Theme } from "./themes-RX2UX5gD.mjs";
+import "./index-C1WqEDtQ.mjs";
 import { BorderProps, FlexboxProps, LayoutFrameProps, LayoutProps, PositionProps, SpaceProps, SpanProps, 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-t6XUvJ_3.d.mts → index-nB94D7UM.d.cts}

@@ -1,7 +1,7 @@
-import { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { BorderProps, FlexboxProps, LayoutFrameProps, LayoutProps, PositionProps, SpaceProps, SpanProps, TypographyProps } from "@soroush.tech/styled-system";
+import { T as Theme } from "./themes-Kbk9h5cN.cjs";
+import "./index-DBUwu65Z.cjs";
 import { CSSProperties, HTMLAttributes } from "react";
+import { BorderProps, FlexboxProps, LayoutFrameProps, LayoutProps, PositionProps, SpaceProps, SpanProps, 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-C7bEBYuv.d.mts → index-nc4Sxiy9.d.mts}

@@ -1,6 +1,6 @@
-import { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { n as IconProps, r as IconName } from "./index-BBV7_p-W.mjs";
+import { T as Theme } from "./themes-RX2UX5gD.mjs";
+import "./index-C1WqEDtQ.mjs";
+import { n as IconProps, r as IconName } from "./index-DO9J-Fla.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes } from "react";
 //#region src/Table/TableSortLabel/TableSortLabel.d.ts

package/dist/{index-DJ8NTYR8.d.mts → index-smqjMLAZ.d.mts}

@@ -1,5 +1,5 @@
-import { T as Theme, Y as TypographyVariant } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
+import { T as Theme, Y as TypographyVariant } from "./themes-RX2UX5gD.mjs";
+import "./index-C1WqEDtQ.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

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { T as Theme, a as CSSObject, x as PaletteColor } from "./themes-Dswy4M6B.cjs";
-import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-BsUsSWXP.cjs";
+import { T as Theme, a as CSSObject, x as PaletteColor } from "./themes-Kbk9h5cN.cjs";
+import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-DBUwu65Z.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 { T as Theme, a as CSSObject, x as PaletteColor } from "./themes-C3RTORGO.mjs";
-import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-Dkqk_6g2.mjs";
+import { T as Theme, a as CSSObject, x as PaletteColor } from "./themes-RX2UX5gD.mjs";
+import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-C1WqEDtQ.mjs";
 export * from "@soroush.tech/styled-system";
 export { type CSSObject, type PaletteColor, type Theme, type ThemeCustomizationOptions, createShouldForwardProp, css, keyframes, props, styled };

package/dist/style.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_theme = require("./theme-DfAqr7qo.cjs");
+const require_theme = require("./theme-BXlAP3xf.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 { T as Theme, a as CSSObject } from "./themes-Dswy4M6B.cjs";
-import "./index-BO-vkjtm.cjs";
+import { T as Theme, a as CSSObject } from "./themes-Kbk9h5cN.cjs";
+import "./index-CrN4MSUF.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 { T as Theme, a as CSSObject } from "./themes-C3RTORGO.mjs";
-import "./index-BHyJ6P_D.mjs";
+import { T as Theme, a as CSSObject } from "./themes-RX2UX5gD.mjs";
+import "./index-VOsBSWEu.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-C1o9qa2E.mjs";
+import { r as useTheme } from "./theme-CDVxig_g.mjs";
 import { n as EmotionThemeContext } from "./emotion-BAyqVw0c.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/style/hooks/useStyle.ts

package/dist/testing.cjs

@@ -0,0 +1,60 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/testing/installPopover.ts
+const OPEN = "data-popover-open";
+const setOpen = (element, open) => {
+	if (element.hasAttribute(OPEN) === open) return;
+	element.toggleAttribute(OPEN, open);
+	element.style.display = open ? "block" : "";
+	const [oldState, newState] = open ? ["closed", "open"] : ["open", "closed"];
+	element.dispatchEvent(Object.assign(new Event("toggle"), {
+		oldState,
+		newState
+	}));
+};
+/**
+* @description Installs a Popover API stand-in on the test document - for jsdom, which has
+* none - so components built on HTML popovers (`Drawer`) open, close and fire `toggle` in unit
+* tests. Does nothing where the real API exists. Returns a function that removes it again.
+*/
+function installPopover() {
+	const proto = HTMLElement.prototype;
+	if (typeof proto.showPopover === "function") return () => {};
+	proto.showPopover = function() {
+		setOpen(this, true);
+	};
+	proto.hidePopover = function() {
+		setOpen(this, false);
+	};
+	proto.togglePopover = function(options) {
+		const open = (typeof options === "boolean" ? options : options?.force) ?? !this.hasAttribute(OPEN);
+		setOpen(this, open);
+		return open;
+	};
+	const style = document.createElement("style");
+	style.textContent = `[popover]:not([${OPEN}]) { display: none; }`;
+	document.head.append(style);
+	const onKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		for (const element of document.querySelectorAll(`[popover]:not([popover="manual"])[${OPEN}]`)) setOpen(element, false);
+	};
+	const onClick = (event) => {
+		if (!(event.target instanceof Element)) return;
+		const button = event.target.closest("[popovertarget]");
+		const target = button && document.getElementById(button.getAttribute("popovertarget"));
+		if (!target?.hasAttribute("popover")) return;
+		const action = button.getAttribute("popovertargetaction") ?? "toggle";
+		setOpen(target, action === "toggle" ? !target.hasAttribute(OPEN) : action === "show");
+	};
+	document.addEventListener("keydown", onKeyDown);
+	document.addEventListener("click", onClick);
+	return () => {
+		delete proto.showPopover;
+		delete proto.hidePopover;
+		delete proto.togglePopover;
+		style.remove();
+		document.removeEventListener("keydown", onKeyDown);
+		document.removeEventListener("click", onClick);
+	};
+}
+//#endregion
+exports.installPopover = installPopover;

package/dist/testing.d.cts

@@ -0,0 +1,9 @@
+//#region src/testing/installPopover.d.ts
+/**
+ * @description Installs a Popover API stand-in on the test document - for jsdom, which has
+ * none - so components built on HTML popovers (`Drawer`) open, close and fire `toggle` in unit
+ * tests. Does nothing where the real API exists. Returns a function that removes it again.
+ */
+declare function installPopover(): () => void;
+//#endregion
+export { installPopover };

package/dist/testing.d.mts

@@ -0,0 +1,9 @@
+//#region src/testing/installPopover.d.ts
+/**
+ * @description Installs a Popover API stand-in on the test document - for jsdom, which has
+ * none - so components built on HTML popovers (`Drawer`) open, close and fire `toggle` in unit
+ * tests. Does nothing where the real API exists. Returns a function that removes it again.
+ */
+declare function installPopover(): () => void;
+//#endregion
+export { installPopover };

package/dist/testing.mjs

@@ -0,0 +1,59 @@
+//#region src/testing/installPopover.ts
+const OPEN = "data-popover-open";
+const setOpen = (element, open) => {
+	if (element.hasAttribute(OPEN) === open) return;
+	element.toggleAttribute(OPEN, open);
+	element.style.display = open ? "block" : "";
+	const [oldState, newState] = open ? ["closed", "open"] : ["open", "closed"];
+	element.dispatchEvent(Object.assign(new Event("toggle"), {
+		oldState,
+		newState
+	}));
+};
+/**
+* @description Installs a Popover API stand-in on the test document - for jsdom, which has
+* none - so components built on HTML popovers (`Drawer`) open, close and fire `toggle` in unit
+* tests. Does nothing where the real API exists. Returns a function that removes it again.
+*/
+function installPopover() {
+	const proto = HTMLElement.prototype;
+	if (typeof proto.showPopover === "function") return () => {};
+	proto.showPopover = function() {
+		setOpen(this, true);
+	};
+	proto.hidePopover = function() {
+		setOpen(this, false);
+	};
+	proto.togglePopover = function(options) {
+		const open = (typeof options === "boolean" ? options : options?.force) ?? !this.hasAttribute(OPEN);
+		setOpen(this, open);
+		return open;
+	};
+	const style = document.createElement("style");
+	style.textContent = `[popover]:not([${OPEN}]) { display: none; }`;
+	document.head.append(style);
+	const onKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		for (const element of document.querySelectorAll(`[popover]:not([popover="manual"])[${OPEN}]`)) setOpen(element, false);
+	};
+	const onClick = (event) => {
+		if (!(event.target instanceof Element)) return;
+		const button = event.target.closest("[popovertarget]");
+		const target = button && document.getElementById(button.getAttribute("popovertarget"));
+		if (!target?.hasAttribute("popover")) return;
+		const action = button.getAttribute("popovertargetaction") ?? "toggle";
+		setOpen(target, action === "toggle" ? !target.hasAttribute(OPEN) : action === "show");
+	};
+	document.addEventListener("keydown", onKeyDown);
+	document.addEventListener("click", onClick);
+	return () => {
+		delete proto.showPopover;
+		delete proto.hidePopover;
+		delete proto.togglePopover;
+		style.remove();
+		document.removeEventListener("keydown", onKeyDown);
+		document.removeEventListener("click", onClick);
+	};
+}
+//#endregion
+export { installPopover };

package/dist/{theme-DfAqr7qo.cjs → theme-BXlAP3xf.cjs}

@@ -4,7 +4,7 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@emotion/react");
 //#region src/theme/utils/spacing.ts
-const spacing = (units) => `${8 * units}px`;
+const spacing = (units) => units === 0 ? "0px" : `${Math.max(1, Math.round(8 * units))}px`;
 //#endregion
 //#region src/theme/breakpoints.ts
 /**
@@ -157,9 +157,14 @@ const sizes = {
 };
 const space = {
 	0: 0,
+	.125: spacing(.125),
+	.25: spacing(.25),
 	.5: spacing(.5),
+	.75: spacing(.75),
 	1: spacing(1),
+	1.25: spacing(1.25),
 	1.5: spacing(1.5),
+	1.75: spacing(1.75),
 	2: spacing(2),
 	3: spacing(3),
 	4: spacing(4),
@@ -422,6 +427,34 @@ function ThemeProvider({ children, theme = baseTheme, defaults }) {
 	});
 }
 //#endregion
+//#region src/theme/LayoutProvider.tsx
+const pageLayout = (theme, layout) => {
+	const page = layout;
+	let carried = {};
+	const merged = {};
+	for (const key of Object.keys(theme.breakpoints)) {
+		carried = deepMerge(carried, page[key] ?? {});
+		if (Object.keys(carried).length > 0) merged[key] = carried;
+	}
+	return merged;
+};
+/**
+* @description A page-level layout: everything inside sees `theme.layout` with the page's
+* values merged on top - `View`, `Flex` and `Grid` with `layout`, and `useTheme().layout`. It
+* derives the theme from the one around it and changes nothing else, so colours, light/dark
+* switching and every other token stay the app theme's. Nested providers stack.
+*/
+function LayoutProvider({ layout, children }) {
+	const derive = (0, react.useCallback)((outer) => {
+		const theme = "breakpoints" in outer ? outer : baseTheme;
+		return createTheme(theme, { layout: pageLayout(theme, layout) });
+	}, [layout]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.ThemeProvider, {
+		theme: derive,
+		children
+	});
+}
+//#endregion
 //#region src/theme/hooks/useTheme.ts
 /**
 * The active theme, typed as this package's own `Theme` - Emotion is an
@@ -451,6 +484,12 @@ function withTheme(WrappedComponent) {
 	};
 }
 //#endregion
+Object.defineProperty(exports, "LayoutProvider", {
+	enumerable: true,
+	get: function() {
+		return LayoutProvider;
+	}
+});
 Object.defineProperty(exports, "ThemeProvider", {
 	enumerable: true,
 	get: function() {

package/dist/{theme-C1o9qa2E.mjs → theme-CDVxig_g.mjs}

@@ -1,10 +1,10 @@
 import { alpha, generateBoxShadow } from "./utils.mjs";
 import { a as useEmotionTheme, n as EmotionThemeContext, r as EmotionThemeProvider } from "./emotion-BAyqVw0c.mjs";
 import { createContainerQueries, createMediaHelpers } from "@soroush.tech/styled-system";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/theme/utils/spacing.ts
-const spacing = (units) => `${8 * units}px`;
+const spacing = (units) => units === 0 ? "0px" : `${Math.max(1, Math.round(8 * units))}px`;
 //#endregion
 //#region src/theme/breakpoints.ts
 /**
@@ -157,9 +157,14 @@ const sizes = {
 };
 const space = {
 	0: 0,
+	.125: spacing(.125),
+	.25: spacing(.25),
 	.5: spacing(.5),
+	.75: spacing(.75),
 	1: spacing(1),
+	1.25: spacing(1.25),
 	1.5: spacing(1.5),
+	1.75: spacing(1.75),
 	2: spacing(2),
 	3: spacing(3),
 	4: spacing(4),
@@ -422,6 +427,34 @@ function ThemeProvider({ children, theme = baseTheme, defaults }) {
 	});
 }
 //#endregion
+//#region src/theme/LayoutProvider.tsx
+const pageLayout = (theme, layout) => {
+	const page = layout;
+	let carried = {};
+	const merged = {};
+	for (const key of Object.keys(theme.breakpoints)) {
+		carried = deepMerge(carried, page[key] ?? {});
+		if (Object.keys(carried).length > 0) merged[key] = carried;
+	}
+	return merged;
+};
+/**
+* @description A page-level layout: everything inside sees `theme.layout` with the page's
+* values merged on top - `View`, `Flex` and `Grid` with `layout`, and `useTheme().layout`. It
+* derives the theme from the one around it and changes nothing else, so colours, light/dark
+* switching and every other token stay the app theme's. Nested providers stack.
+*/
+function LayoutProvider({ layout, children }) {
+	const derive = useCallback((outer) => {
+		const theme = "breakpoints" in outer ? outer : baseTheme;
+		return createTheme(theme, { layout: pageLayout(theme, layout) });
+	}, [layout]);
+	return /* @__PURE__ */ jsx(EmotionThemeProvider, {
+		theme: derive,
+		children
+	});
+}
+//#endregion
 //#region src/theme/hooks/useTheme.ts
 /**
 * The active theme, typed as this package's own `Theme` - Emotion is an
@@ -451,4 +484,4 @@ function withTheme(WrappedComponent) {
 	};
 }
 //#endregion
-export { space as C, createTheme as D, zOrder as E, withBreakpointHelpers as O, sizes as S, up as T, letterSpacings as _, avatar as a, only as b, borderWidths as c, down as d, fontSizes as f, layout as g, icon as h, ThemeProvider as i, breakpoints as l, fonts as m, useDefaultProps as n, baseTheme as o, fontWeights as p, useTheme as r, between as s, withTheme as t, containerQueries as u, lineHeights as v, typography as w, radii as x, not as y };
+export { sizes as C, zOrder as D, up as E, createTheme as O, radii as S, typography as T, layout as _, ThemeProvider as a, not as b, between as c, containerQueries as d, down as f, icon as g, fonts as h, LayoutProvider as i, withBreakpointHelpers as k, borderWidths as l, fontWeights as m, useDefaultProps as n, avatar as o, fontSizes as p, useTheme as r, baseTheme as s, withTheme as t, breakpoints as u, letterSpacings as v, space as w, only as x, lineHeights as y };

package/dist/theme.cjs

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-DfAqr7qo.cjs");
+const require_theme = require("./theme-BXlAP3xf.cjs");
+exports.LayoutProvider = require_theme.LayoutProvider;
 exports.ThemeProvider = require_theme.ThemeProvider;
 exports.avatar = require_theme.avatar;
 exports.baseTheme = require_theme.baseTheme;

package/dist/theme.d.cts

@@ -1,3 +1,3 @@
-import { $ as between, A as ThemeBreakpoints, B as ThemeRadii, C as PressableOwnerState, Ct as withBreakpointHelpers, D as ThemeBackground, E as ThemeAvatarSizes, F as ThemeIconSizes, G as ThemeSwitch, H as ThemeSizes, I as ThemeLayout, J as ThemeZOrder, K as ThemeText, L as ThemeLetterSpacings, M as ThemeDefaults, N as ThemeFontWeights, O as ThemeBorder, P as ThemeFonts, Q as baseTheme, R as ThemeLineHeights, S as PaletteEntry, St as BreakpointHelpers, T as Theme, U as ThemeSkeleton, V as ThemeShadow, W as ThemeSpace, X as TypographyVariantStyle, Y as TypographyVariant, Z as avatar, _ as LayoutPanel, _t as up, a as CSSObject, at as fontWeights, b as OpenScale, bt as ThemeOverride, c as CardSlotTypographyProps, ct as layout, d as ComponentVariant, dt as not, et as borderWidths, f as DefaultBreakpoints, ft as only, g as LayoutLength, gt as typography, h as LayoutEntry, ht as space, i as ButtonVariants, it as fontSizes, j as ThemeComponents, k as ThemeBorderWidths, l as ComponentConfig, lt as letterSpacings, m as LayoutContent, mt as sizes, n as BreakpointOverrides, nt as containerQueries, o as CardOwnerState, ot as fonts, p as LayoutBars, pt as radii, q as ThemeTypographyVariants, r as ButtonOwnerState, rt as down, s as CardSlotIconProps, st as icon, t as BreakpointKey, tt as breakpoints, u as ComponentStyle, ut as lineHeights, v as LayoutPanels, vt as zOrder, w as SizeEntry, x as PaletteColor, xt as createTheme, y as LayoutSpace, yt as DeepPartial, z as ThemePalette } from "./themes-Dswy4M6B.cjs";
-import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-BO-vkjtm.cjs";
-export { BreakpointHelpers, BreakpointKey, BreakpointOverrides, ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, DefaultBreakpoints, 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, between, borderWidths, breakpoints, containerQueries, createTheme, down, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, not, only, radii, sizes, space, themeDefault, typography, up, useDefaultProps, useTheme, withBreakpointHelpers, withTheme, zOrder };
+import { $ as between, A as ThemeBreakpoints, B as ThemeRadii, C as PressableOwnerState, Ct as withBreakpointHelpers, D as ThemeBackground, E as ThemeAvatarSizes, F as ThemeIconSizes, G as ThemeSwitch, H as ThemeSizes, I as ThemeLayout, J as ThemeZOrder, K as ThemeText, L as ThemeLetterSpacings, M as ThemeDefaults, N as ThemeFontWeights, O as ThemeBorder, P as ThemeFonts, Q as baseTheme, R as ThemeLineHeights, S as PaletteEntry, St as BreakpointHelpers, T as Theme, U as ThemeSkeleton, V as ThemeShadow, W as ThemeSpace, X as TypographyVariantStyle, Y as TypographyVariant, Z as avatar, _ as LayoutPanel, _t as up, a as CSSObject, at as fontWeights, b as OpenScale, bt as ThemeOverride, c as CardSlotTypographyProps, ct as layout, d as ComponentVariant, dt as not, et as borderWidths, f as DefaultBreakpoints, ft as only, g as LayoutLength, gt as typography, h as LayoutEntry, ht as space, i as ButtonVariants, it as fontSizes, j as ThemeComponents, k as ThemeBorderWidths, l as ComponentConfig, lt as letterSpacings, m as LayoutContent, mt as sizes, n as BreakpointOverrides, nt as containerQueries, o as CardOwnerState, ot as fonts, p as LayoutBars, pt as radii, q as ThemeTypographyVariants, r as ButtonOwnerState, rt as down, s as CardSlotIconProps, st as icon, t as BreakpointKey, tt as breakpoints, u as ComponentStyle, ut as lineHeights, v as LayoutPanels, vt as zOrder, w as SizeEntry, x as PaletteColor, xt as createTheme, y as LayoutSpace, yt as DeepPartial, z as ThemePalette } from "./themes-Kbk9h5cN.cjs";
+import { a as LayoutProvider, i as themeDefault, n as useDefaultProps, o as LayoutProviderProps, r as useTheme, s as ThemeProvider, t as withTheme } from "./index-CrN4MSUF.cjs";
+export { BreakpointHelpers, BreakpointKey, BreakpointOverrides, ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, DefaultBreakpoints, LayoutBars, LayoutContent, LayoutEntry, LayoutLength, LayoutPanel, LayoutPanels, LayoutProvider, LayoutProviderProps, 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, between, borderWidths, breakpoints, containerQueries, createTheme, down, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, not, only, radii, sizes, space, themeDefault, typography, up, useDefaultProps, useTheme, withBreakpointHelpers, withTheme, zOrder };

package/dist/theme.d.mts

@@ -1,3 +1,3 @@
-import { $ as between, A as ThemeBreakpoints, B as ThemeRadii, C as PressableOwnerState, Ct as withBreakpointHelpers, D as ThemeBackground, E as ThemeAvatarSizes, F as ThemeIconSizes, G as ThemeSwitch, H as ThemeSizes, I as ThemeLayout, J as ThemeZOrder, K as ThemeText, L as ThemeLetterSpacings, M as ThemeDefaults, N as ThemeFontWeights, O as ThemeBorder, P as ThemeFonts, Q as baseTheme, R as ThemeLineHeights, S as PaletteEntry, St as BreakpointHelpers, T as Theme, U as ThemeSkeleton, V as ThemeShadow, W as ThemeSpace, X as TypographyVariantStyle, Y as TypographyVariant, Z as avatar, _ as LayoutPanel, _t as up, a as CSSObject, at as fontWeights, b as OpenScale, bt as ThemeOverride, c as CardSlotTypographyProps, ct as layout, d as ComponentVariant, dt as not, et as borderWidths, f as DefaultBreakpoints, ft as only, g as LayoutLength, gt as typography, h as LayoutEntry, ht as space, i as ButtonVariants, it as fontSizes, j as ThemeComponents, k as ThemeBorderWidths, l as ComponentConfig, lt as letterSpacings, m as LayoutContent, mt as sizes, n as BreakpointOverrides, nt as containerQueries, o as CardOwnerState, ot as fonts, p as LayoutBars, pt as radii, q as ThemeTypographyVariants, r as ButtonOwnerState, rt as down, s as CardSlotIconProps, st as icon, t as BreakpointKey, tt as breakpoints, u as ComponentStyle, ut as lineHeights, v as LayoutPanels, vt as zOrder, w as SizeEntry, x as PaletteColor, xt as createTheme, y as LayoutSpace, yt as DeepPartial, z as ThemePalette } from "./themes-C3RTORGO.mjs";
-import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-BHyJ6P_D.mjs";
-export { BreakpointHelpers, BreakpointKey, BreakpointOverrides, ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, DefaultBreakpoints, 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, between, borderWidths, breakpoints, containerQueries, createTheme, down, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, not, only, radii, sizes, space, themeDefault, typography, up, useDefaultProps, useTheme, withBreakpointHelpers, withTheme, zOrder };
+import { $ as between, A as ThemeBreakpoints, B as ThemeRadii, C as PressableOwnerState, Ct as withBreakpointHelpers, D as ThemeBackground, E as ThemeAvatarSizes, F as ThemeIconSizes, G as ThemeSwitch, H as ThemeSizes, I as ThemeLayout, J as ThemeZOrder, K as ThemeText, L as ThemeLetterSpacings, M as ThemeDefaults, N as ThemeFontWeights, O as ThemeBorder, P as ThemeFonts, Q as baseTheme, R as ThemeLineHeights, S as PaletteEntry, St as BreakpointHelpers, T as Theme, U as ThemeSkeleton, V as ThemeShadow, W as ThemeSpace, X as TypographyVariantStyle, Y as TypographyVariant, Z as avatar, _ as LayoutPanel, _t as up, a as CSSObject, at as fontWeights, b as OpenScale, bt as ThemeOverride, c as CardSlotTypographyProps, ct as layout, d as ComponentVariant, dt as not, et as borderWidths, f as DefaultBreakpoints, ft as only, g as LayoutLength, gt as typography, h as LayoutEntry, ht as space, i as ButtonVariants, it as fontSizes, j as ThemeComponents, k as ThemeBorderWidths, l as ComponentConfig, lt as letterSpacings, m as LayoutContent, mt as sizes, n as BreakpointOverrides, nt as containerQueries, o as CardOwnerState, ot as fonts, p as LayoutBars, pt as radii, q as ThemeTypographyVariants, r as ButtonOwnerState, rt as down, s as CardSlotIconProps, st as icon, t as BreakpointKey, tt as breakpoints, u as ComponentStyle, ut as lineHeights, v as LayoutPanels, vt as zOrder, w as SizeEntry, x as PaletteColor, xt as createTheme, y as LayoutSpace, yt as DeepPartial, z as ThemePalette } from "./themes-RX2UX5gD.mjs";
+import { a as LayoutProvider, i as themeDefault, n as useDefaultProps, o as LayoutProviderProps, r as useTheme, s as ThemeProvider, t as withTheme } from "./index-VOsBSWEu.mjs";
+export { BreakpointHelpers, BreakpointKey, BreakpointOverrides, ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, DefaultBreakpoints, LayoutBars, LayoutContent, LayoutEntry, LayoutLength, LayoutPanel, LayoutPanels, LayoutProvider, LayoutProviderProps, 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, between, borderWidths, breakpoints, containerQueries, createTheme, down, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, not, only, radii, sizes, space, themeDefault, typography, up, useDefaultProps, useTheme, withBreakpointHelpers, withTheme, zOrder };

package/dist/theme.mjs

@@ -1,3 +1,3 @@
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { C as space, D as createTheme, E as zOrder, O as withBreakpointHelpers, S as sizes, T as up, _ as letterSpacings, a as avatar, b as only, c as borderWidths, d as down, f as fontSizes, g as layout, h as icon, i as ThemeProvider, l as breakpoints, m as fonts, n as useDefaultProps, o as baseTheme, p as fontWeights, r as useTheme, s as between, t as withTheme, u as containerQueries, v as lineHeights, w as typography, x as radii, y as not } from "./theme-C1o9qa2E.mjs";
-export { ThemeProvider, avatar, baseTheme, between, borderWidths, breakpoints, containerQueries, createTheme, down, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, not, only, radii, sizes, space, themeDefault, typography, up, useDefaultProps, useTheme, withBreakpointHelpers, withTheme, zOrder };
+import { C as sizes, D as zOrder, E as up, O as createTheme, S as radii, T as typography, _ as layout, a as ThemeProvider, b as not, c as between, d as containerQueries, f as down, g as icon, h as fonts, i as LayoutProvider, k as withBreakpointHelpers, l as borderWidths, m as fontWeights, n as useDefaultProps, o as avatar, p as fontSizes, r as useTheme, s as baseTheme, t as withTheme, u as breakpoints, v as letterSpacings, w as space, x as only, y as lineHeights } from "./theme-CDVxig_g.mjs";
+export { LayoutProvider, ThemeProvider, avatar, baseTheme, between, borderWidths, breakpoints, containerQueries, createTheme, down, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, not, only, radii, sizes, space, themeDefault, typography, up, useDefaultProps, useTheme, withBreakpointHelpers, withTheme, zOrder };

package/dist/{themes-Dswy4M6B.d.cts → themes-Kbk9h5cN.d.cts}

@@ -172,9 +172,14 @@ interface ThemeLetterSpacings {
 interface ThemeSpace {
   auto: string;
   0: number | string;
+  0.125: number | string;
+  0.25: number | string;
   0.5: number | string;
+  0.75: number | string;
   1: number | string;
+  1.25: number | string;
   1.5: number | string;
+  1.75: number | string;
   2: number | string;
   3: number | string;
   4: number | string;
@@ -229,7 +234,7 @@ interface DefaultBreakpoints {
 interface BreakpointOverrides {}
 type RemovedBreakpoints = keyof { [K in keyof BreakpointOverrides as BreakpointOverrides[K] extends false ? K : never]: true; };
 /** The theme's breakpoint names: the defaults, plus every override set to `true`, minus every one set to `false`. */
-type BreakpointKey = Exclude<keyof DefaultBreakpoints | keyof BreakpointOverrides, RemovedBreakpoints>;
+type BreakpointKey = Exclude<keyof (Omit<DefaultBreakpoints, keyof BreakpointOverrides> & BreakpointOverrides), RemovedBreakpoints>;
 /**
  * `theme.breakpoints`: where each window class starts, ascending, in declared order. A key holds
  * from its value until the next key, so `xs: '0px'` applies everywhere until `sm` overrides it;

package/dist/{themes-C3RTORGO.d.mts → themes-RX2UX5gD.d.mts}

@@ -172,9 +172,14 @@ interface ThemeLetterSpacings {
 interface ThemeSpace {
   auto: string;
   0: number | string;
+  0.125: number | string;
+  0.25: number | string;
   0.5: number | string;
+  0.75: number | string;
   1: number | string;
+  1.25: number | string;
   1.5: number | string;
+  1.75: number | string;
   2: number | string;
   3: number | string;
   4: number | string;
@@ -229,7 +234,7 @@ interface DefaultBreakpoints {
 interface BreakpointOverrides {}
 type RemovedBreakpoints = keyof { [K in keyof BreakpointOverrides as BreakpointOverrides[K] extends false ? K : never]: true; };
 /** The theme's breakpoint names: the defaults, plus every override set to `true`, minus every one set to `false`. */
-type BreakpointKey = Exclude<keyof DefaultBreakpoints | keyof BreakpointOverrides, RemovedBreakpoints>;
+type BreakpointKey = Exclude<keyof (Omit<DefaultBreakpoints, keyof BreakpointOverrides> & BreakpointOverrides), RemovedBreakpoints>;
 /**
  * `theme.breakpoints`: where each window class starts, ascending, in declared order. A key holds
  * from its value until the next key, so `xs: '0px'` applies everywhere until `sm` overrides it;

package/dist/{useTablePagination-BueH0_dG.d.cts → useTablePagination-COTiNH_8.d.mts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-CNzkJGNq.cjs";
+import { n as TableSortLabelDirection } from "./index-nc4Sxiy9.mjs";
 //#region src/Table/hooks/useTableSort.d.ts
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {

package/dist/{useTablePagination-CxBh-gU8.d.mts → useTablePagination-WFkaUZu8.d.cts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-C7bEBYuv.mjs";
+import { n as TableSortLabelDirection } from "./index-DNwF3DUX.cjs";
 //#region src/Table/hooks/useTableSort.d.ts
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/design-system",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-rc.0",
   "description": "Emotion + @soroush.tech/styled-system React component library - token-driven light/dark themes, layout primitives, forms, and overlays.",
   "keywords": [
     "design-system",
@@ -408,6 +408,16 @@
         "default": "./dist/theme.cjs"
       }
     },
+    "./testing": {
+      "import": {
+        "types": "./dist/testing.d.mts",
+        "default": "./dist/testing.mjs"
+      },
+      "require": {
+        "types": "./dist/testing.d.cts",
+        "default": "./dist/testing.cjs"
+      }
+    },
     "./style": {
       "import": {
         "types": "./dist/style.d.mts",
@@ -477,7 +487,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@soroush.tech/styled-system": "^6.0.0-alpha.3"
+    "@soroush.tech/styled-system": "^6.0.0-rc.0"
   },
   "peerDependencies": {
     "react": "^19.2.8",