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

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

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { t as TableCellPadding } from "./TableContext-DXzUQ4-a.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { t as TableCellPadding } from "./TableContext-98M9MAm7.cjs";
 import { ElementType, ThHTMLAttributes } from "react";
 import { BorderProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Table/TableSectionContext.d.ts

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

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

package/dist/index-C-ACdUhw.d.mts

@@ -0,0 +1,20 @@
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { s as ViewProps } from "./index-AlVOmB-K.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`.
+ */
+interface FlexProps extends ViewProps, 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-D3iQQ0L3.d.cts → index-C2e925FY.d.cts}

@@ -1,4 +1,4 @@
-import { b as ThemeComponents, h as Theme, x as ThemeDefaults } from "./themes-kbuYiwCi.cjs";
+import { M as ThemeDefaults, T as Theme, j as ThemeComponents } from "./themes-CtTQTVqe.cjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/theme/ThemeProvider.d.ts
 interface ThemeProviderProps {

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

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

package/dist/{index-C5-ZM7lt.d.cts → index-CJWXZFFZ.d.cts}

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-Oxx0z4dS.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-6BHvkjdp.cjs";
 import { ElementType, HTMLAttributes } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/ButtonGroup/ButtonGroup.d.ts

package/dist/{index-h36rcOy8.d.mts → index-COKAN6-s.d.mts}

@@ -1,6 +1,6 @@
-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 { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-BS5dkngf.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/Pagination/Pagination.d.ts

package/dist/{index-Csp1Wzbz.d.cts → index-COYl2TN0.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 { T as Theme, Y as TypographyVariant } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.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-DhMAwR96.d.mts → index-CaCfFN31.d.mts}

@@ -1,6 +1,6 @@
-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 { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-DLtzp-Mg.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ElementType, HTMLAttributes } from "react";
 //#region src/ButtonGroup/ButtonGroup.d.ts

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

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.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-Cf7w9Lod.d.cts → index-CorVAOY7.d.mts}

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as FlexProps } from "./index-DOLA1VFD.cjs";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { n as FlexProps } from "./index-C-ACdUhw.mjs";
 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-Br2gDSme.d.cts → index-D3kNrl9W.d.cts}

@@ -1,6 +1,6 @@
-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 { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-BfOZMmZA.cjs";
 import { HTMLAttributes } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Pagination/Pagination.d.ts

package/dist/{index-COYxtrc0.d.mts → index-D4M18wt_.d.mts}

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
+import { T as Theme, x as PaletteColor } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.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-DzuXwDCW.d.cts → index-D8jHpwh5.d.cts}

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+import { T as Theme, x as PaletteColor } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.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-BWECJgSb.d.mts → index-DClEfecw.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 { T as Theme, Y as TypographyVariant } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.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-Oxx0z4dS.d.cts → index-DLtzp-Mg.d.mts}

@@ -1,7 +1,7 @@
-import { d as PaletteColor, h as Theme, n as ButtonVariants } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { ButtonHTMLAttributes, ReactNode } from "react";
+import { T as Theme, i as ButtonVariants, x as PaletteColor } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { ButtonHTMLAttributes, ReactNode } from "react";
 //#region src/Button/Button.d.ts
 /** Augmentable via the `ButtonVariants` interface - style new values through `theme.components.Button.variants`. */
 type ButtonVariant = keyof ButtonVariants;

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

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
+import { T as Theme } from "./themes-CCguU8uo.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-Da9Sr6v7.d.cts

@@ -0,0 +1,20 @@
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { s as ViewProps } from "./index-B2LR3Y5d.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`.
+ */
+interface FlexProps extends ViewProps, 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-76XH-GEc.d.mts → index-Dyfu-Otn.d.mts}

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

package/dist/{index-CTVFwvju.d.mts → index-FTr8Mn3p.d.cts}

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

package/dist/{index-ggLhNdZV.d.mts → index-Fcf_SOl_.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 { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { n as IconProps, r as IconName } from "./index-Dyfu-Otn.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes } from "react";
 //#region src/Table/TableSortLabel/TableSortLabel.d.ts

package/dist/{index-BCvkP5R1.d.mts → index-OWbQXOvw.d.cts}

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as FlexProps } from "./index-KZKeZDAF.mjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { n as FlexProps } from "./index-Da9Sr6v7.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-NBVilQuP.d.mts → index-iHyGhLkM.d.mts}

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

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

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

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 { T as Theme, a as CSSObject, x as PaletteColor } from "./themes-CtTQTVqe.cjs";
+import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-CkYiijiE.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 { T as Theme, a as CSSObject, x as PaletteColor } from "./themes-CCguU8uo.mjs";
+import { a as ThemeCustomizationOptions, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-DVG64KQ4.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-Bnc03K83.cjs");
+const require_theme = require("./theme-DfAqr7qo.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 { T as Theme, a as CSSObject } from "./themes-CtTQTVqe.cjs";
+import "./index-C2e925FY.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 { T as Theme, a as CSSObject } from "./themes-CCguU8uo.mjs";
+import "./index-iHyGhLkM.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-C1o9qa2E.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-C1o9qa2E.mjs}

@@ -1,10 +1,31 @@
 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 { jsx } from "react/jsx-runtime";
 //#region src/theme/utils/spacing.ts
 const spacing = (units) => `${8 * units}px`;
 //#endregion
+//#region src/theme/breakpoints.ts
+/**
+* The scale with its helpers attached as non-enumerable methods: the engine, the theme's JSON
+* and a spread see only the sizes, while `theme.breakpoints.up('md')` works. `createTheme`
+* and `ThemeProvider` re-attach them after a merge, so they always follow the theme's own
+* breakpoints.
+*/
+const withBreakpointHelpers = (scale) => {
+	const sizes = { ...scale };
+	const helpers = {
+		...createMediaHelpers(sizes),
+		containerQueries: createContainerQueries(sizes)
+	};
+	for (const [name, helper] of Object.entries(helpers)) Object.defineProperty(sizes, name, {
+		value: helper,
+		enumerable: false
+	});
+	return sizes;
+};
+//#endregion
 //#region src/theme/utils/createTheme.ts
 const isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 const deepMerge = (base, overrides) => {
@@ -24,8 +45,17 @@ const deepMerge = (base, overrides) => {
 * - `undefined` override values are ignored - a key can be added or replaced,
 *   never removed.
 * - Neither argument is mutated; untouched branches keep referential identity.
+* - `breakpoints` gets its query helpers back, built from the merged sizes.
 */
-const createTheme = (base, overrides) => deepMerge(base, overrides);
+const createTheme = (base, overrides) => {
+	const theme = deepMerge(base, overrides);
+	return withHelpers(theme);
+};
+/** A theme whose `breakpoints` carry the query helpers - added when a hand-built theme lacks them. */
+const withHelpers = (theme) => theme.breakpoints && !("up" in theme.breakpoints) ? {
+	...theme,
+	breakpoints: withBreakpointHelpers(theme.breakpoints)
+} : theme;
 //#endregion
 //#region src/theme/themes.ts
 const shadow = {
@@ -141,6 +171,65 @@ const space = {
 	10: spacing(10),
 	auto: "auto"
 };
+const breakpoints = withBreakpointHelpers({
+	xs: "0px",
+	sm: "600px",
+	md: "840px",
+	lg: "1200px",
+	xl: "1600px"
+});
+const layout = {
+	xs: {
+		bars: { top: 8 },
+		panels: {
+			start: {
+				mode: "hidden",
+				width: "280px",
+				railWidth: 9
+			},
+			end: {
+				mode: "hidden",
+				width: "360px",
+				railWidth: 9
+			}
+		},
+		content: {
+			columns: 4,
+			margin: 2,
+			gutter: 2,
+			mode: "fluid"
+		}
+	},
+	sm: {
+		panels: { start: { mode: "collapsed" } },
+		content: {
+			columns: 8,
+			margin: 4
+		}
+	},
+	md: {
+		panels: { end: { mode: "overlay" } },
+		content: {
+			columns: 12,
+			margin: 3,
+			gutter: 3
+		}
+	},
+	lg: {
+		panels: { end: { width: "412px" } },
+		content: {
+			mode: "fixed",
+			maxWidth: "1200px"
+		}
+	},
+	xl: {
+		panels: {
+			start: { mode: "inline" },
+			end: { mode: "inline" }
+		},
+		content: { maxWidth: "1600px" }
+	}
+};
 const typography = {
 	h1: {
 		element: "h1",
@@ -232,6 +321,8 @@ const baseTheme = {
 	icon,
 	sizes,
 	space,
+	breakpoints,
+	layout,
 	zOrder,
 	blur: "12px",
 	colorScheme: "dark",
@@ -316,10 +407,15 @@ const baseTheme = {
 	shadow,
 	shadows
 };
+/**
+* The query helpers for `baseTheme`'s breakpoints, as plain functions. A theme with its own
+* breakpoints has the same helpers on `theme.breakpoints`.
+*/
+const { up, down, only, between, not, containerQueries } = breakpoints;
 //#endregion
 //#region src/theme/ThemeProvider.tsx
 function ThemeProvider({ children, theme = baseTheme, defaults }) {
-	const value = useMemo(() => defaults ? createTheme(theme, { defaults }) : theme, [theme, defaults]);
+	const value = useMemo(() => defaults ? createTheme(theme, { defaults }) : withHelpers(theme), [theme, defaults]);
 	return /* @__PURE__ */ jsx(EmotionThemeProvider, {
 		theme: value,
 		children
@@ -355,4 +451,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 { 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 };