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

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

@@ -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-DEom6o-J.cjs";
 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-B2eLreA5.d.cts → index-DT6KvZ1x.d.cts}

@@ -1,5 +1,5 @@
-import { T as Theme, i as ButtonVariants, x as PaletteColor } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
+import { T as Theme, i as ButtonVariants, x as PaletteColor } from "./themes-DEom6o-J.cjs";
+import "./index-C1uWcbTj.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-CMKzrxOO.d.mts → index-DbkAYV9r.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-CQKn24UN.mjs";
+import "./index-e5hDFZ05.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
 //#region src/Pagination/hooks/usePagination.d.ts

package/dist/{index-CxDY_w-H.d.cts → index-DmJCHY90.d.cts}

@@ -1,4 +1,4 @@
-import { n as TextColorToken } from "./index-D5Rj4uWe.cjs";
+import { n as TextColorToken } from "./index-5w87AK-Y.cjs";
 import { SVGProps } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Icon/icons/AccountTree.d.ts

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

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

package/dist/{index-C-kvrbCi.d.cts → index-DzdiUOgM.d.cts}

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

package/dist/{index-DYtIEMr9.d.mts → index-FiPb4-DU.d.mts}

@@ -1,5 +1,5 @@
-import { T as Theme, i as ButtonVariants, x as PaletteColor } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
+import { T as Theme, i as ButtonVariants, x as PaletteColor } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.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-Dkqk_6g2.d.mts → index-e5hDFZ05.d.mts}

@@ -1,4 +1,4 @@
-import { T as Theme } from "./themes-C3RTORGO.mjs";
+import { T as Theme } from "./themes-CQKn24UN.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-CGCO5eo7.d.mts → index-q3Ftmjpf.d.mts}

@@ -1,6 +1,6 @@
-import { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-CMKzrxOO.mjs";
+import { T as Theme } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-DbkAYV9r.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/Pagination/Pagination.d.ts

package/dist/{index-C58AZZQ2.d.cts → index-sCbCJL02.d.cts}

@@ -1,6 +1,6 @@
-import { T as Theme } from "./themes-Dswy4M6B.cjs";
-import "./index-BsUsSWXP.cjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-VwsWkazt.cjs";
+import { T as Theme } from "./themes-DEom6o-J.cjs";
+import "./index-C1uWcbTj.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-BCQ9LmG1.cjs";
 import { HTMLAttributes } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Pagination/Pagination.d.ts

package/dist/{index-BT-mcuE6.d.mts → index-yQfi7MqO.d.mts}

@@ -1,6 +1,6 @@
-import { T as Theme } from "./themes-C3RTORGO.mjs";
-import "./index-Dkqk_6g2.mjs";
-import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-DYtIEMr9.mjs";
+import { T as Theme } from "./themes-CQKn24UN.mjs";
+import "./index-e5hDFZ05.mjs";
+import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-FiPb4-DU.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ElementType, HTMLAttributes } from "react";
 //#region src/ButtonGroup/ButtonGroup.d.ts

package/dist/{index-DJ8NTYR8.d.mts → index-yR_0laAQ.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-CQKn24UN.mjs";
+import "./index-e5hDFZ05.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-DEom6o-J.cjs";
+import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-C1uWcbTj.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-CQKn24UN.mjs";
+import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-e5hDFZ05.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-B0P8owUo.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-DEom6o-J.cjs";
+import "./index-DPMcs3Q1.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-CQKn24UN.mjs";
+import "./index-DLezwPW8.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-DdjeZjsA.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,59 @@
+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) => {
+		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,58 @@
+//#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) => {
+		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-B0P8owUo.cjs}

@@ -422,6 +422,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 +479,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-DdjeZjsA.mjs}

@@ -1,7 +1,7 @@
 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`;
@@ -422,6 +422,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 +479,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-B0P8owUo.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-DEom6o-J.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-DPMcs3Q1.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-CQKn24UN.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-DLezwPW8.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-DdjeZjsA.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-CQKn24UN.d.mts}

@@ -1,6 +1,6 @@
 import { CSSObject } from "@emotion/react";
-import { ElementType } from "react";
 import { ContainerQueries, QueryHelpers } from "@soroush.tech/styled-system";
+import { ElementType } from "react";
 //#region src/theme/breakpoints.d.ts
 /**
  * The query helpers a theme's breakpoint scale carries: `up` / `down` / `only` / `between` /
@@ -229,7 +229,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-DEom6o-J.d.cts}

@@ -1,6 +1,6 @@
 import { CSSObject } from "@emotion/react";
-import { ContainerQueries, QueryHelpers } from "@soroush.tech/styled-system";
 import { ElementType } from "react";
+import { ContainerQueries, QueryHelpers } from "@soroush.tech/styled-system";
 //#region src/theme/breakpoints.d.ts
 /**
  * The query helpers a theme's breakpoint scale carries: `up` / `down` / `only` / `between` /
@@ -229,7 +229,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-Ci9tV-Y3.d.cts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-CNzkJGNq.cjs";
+import { n as TableSortLabelDirection } from "./index-BqJWxp9I.cjs";
 //#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-Et2FY7SE.d.mts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-C7bEBYuv.mjs";
+import { n as TableSortLabelDirection } from "./index-Cj--T8Sh.mjs";
 //#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.3",
+  "version": "2.0.0-alpha.5",
   "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.2"
+    "@soroush.tech/styled-system": "^6.0.0-alpha.4"
   },
   "peerDependencies": {
     "react": "^19.2.8",

package/dist/index-CS4yFHlC.d.cts

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

package/dist/index-CWYckiaS.d.mts

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