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

package/dist/{themes-9YNnlVyY.d.cts → themes-CtTQTVqe.d.cts}

@@ -1,5 +1,22 @@
 import { CSSObject } from "@emotion/react";
 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` /
+ * `not` as `@media` rules, and `containerQueries` for the same sizes as `@container` rules.
+ */
+interface BreakpointHelpers extends QueryHelpers {
+  containerQueries: ContainerQueries;
+}
+/**
+ * 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.
+ */
+declare const withBreakpointHelpers: <Scale extends Record<string, string | number>>(scale: Scale) => Scale & BreakpointHelpers;
+//#endregion
 //#region src/theme/utils/createTheme.d.ts
 /**
  * Recursive partial of a theme shape. Plain objects recurse; arrays and
@@ -16,6 +33,7 @@ type ThemeOverride = DeepPartial<Theme>;
  * - `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.
  */
 declare const createTheme: (base: Theme, overrides: ThemeOverride) => Theme;
 //#endregion
@@ -187,17 +205,39 @@ interface ThemeSizes {
  * forces the matching icon size to be supplied.
  */
 type ThemeIconSizes = { [K in keyof ThemeSizes]: string; };
+/** The default breakpoint names - Material 3's window classes. */
+interface DefaultBreakpoints {
+  /** compact: 0-599px - the base, applies everywhere until `sm` overrides it. */
+  xs: true;
+  /** medium: 600-839px. */
+  sm: true;
+  /** expanded: 840-1199px. */
+  md: true;
+  /** large: 1200-1599px. */
+  lg: true;
+  /** extra-large: 1600px and up. */
+  xl: true;
+}
 /**
- * `theme.breakpoints`, ascending, in declared order - responsive props map onto
- * them in this order. A value is a CSS length (a min-width), a media condition such
- * as `(600px <= width < 1200px)`, or a full `@media ...` rule, kept as written.
- * `createTheme` appends a consumer's new breakpoint after these, so it must be larger.
+ * Add, rename or remove breakpoints by augmenting this interface: `true` adds a name, `false`
+ * removes a default one.
+ *
+ *   declare module '@soroush.tech/design-system/theme' {
+ *     interface BreakpointOverrides { mobile: true; tablet: true; xs: false; sm: false }
+ *   }
  */
-interface ThemeBreakpoints {
-  tablet: string;
-  web: string;
-  wide: string;
-}
+interface BreakpointOverrides {}
+/** 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, { [K in keyof BreakpointOverrides]: BreakpointOverrides[K] extends false ? K : never; }[keyof BreakpointOverrides]>;
+/**
+ * `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;
+ * media queries are min-width, which is why the theme writes the start of each range. Responsive
+ * props map onto the keys by name, or by position for an array. A value is a CSS length; a
+ * media condition or a full `@media` rule is passed through, without the range helpers.
+ * `createTheme` appends a breakpoint you add after the existing ones, so it must be larger.
+ */
+type ThemeBreakpoints = { [K in BreakpointKey]: string; };
 /** A `theme.space` key - layout margins and gutters step on the spacing scale. */
 type LayoutSpace = Exclude<keyof ThemeSpace, 'auto'>;
 /** A `theme.space` key or a CSS length (a 280px panel is a size, not a spacing step). */
@@ -238,14 +278,12 @@ interface LayoutEntry {
   content: LayoutContent;
 }
 /**
- * `theme.layout`: the complete `base` entry (below the first breakpoint), then a
- * partial entry per breakpoint, merged mobile-first in `ThemeBreakpoints` order. A
- * panel first declared at a breakpoint needs its `mode`, `width` and `railWidth`
- * there; an incomplete one is left out.
+ * `theme.layout`: layout tokens per breakpoint, merged mobile-first in breakpoint order. The
+ * first breakpoint's entry (`xs`) is complete; every later one lists only what changes. A panel
+ * first declared at a later breakpoint needs its `mode`, `width` and `railWidth` there. These
+ * are tokens: apps (and the studio) read them; nothing in the design system lays a page out.
  */
-type ThemeLayout = {
-  base: LayoutEntry;
-} & { [K in keyof ThemeBreakpoints]?: {
+type ThemeLayout = { [K in BreakpointKey]?: {
   bars?: LayoutBars;
   panels?: { [P in keyof LayoutPanels]?: Partial<LayoutPanel>; };
   content?: Partial<LayoutContent>;
@@ -426,14 +464,12 @@ interface ThemeComponents {
   Icon?: ComponentConfig;
   Image?: ComponentConfig;
   LinearProgress?: ComponentConfig<Record<string, unknown>, 'root' | 'track' | 'dash' | 'bar' | 'traveler' | 'segment' | 'secondaryBar'>;
-  LayoutGrid?: ComponentConfig;
   Link?: ComponentConfig;
   MenuItem?: ComponentConfig<Record<string, unknown>, 'root' | 'check'>;
   Modal?: ComponentConfig;
   NativeSelect?: ComponentConfig<Record<string, unknown>, 'root' | 'select' | 'icon'>;
   Pagination?: ComponentConfig<Record<string, unknown>, 'root' | 'list'>;
   PaginationItem?: ComponentConfig<Record<string, unknown>, 'root' | 'ellipsis'>;
-  PageLayout?: ComponentConfig<Record<string, unknown>, 'root' | 'bar' | 'panel' | 'content'>;
   Paper?: ComponentConfig;
   Popover?: ComponentConfig<Record<string, unknown>, 'root' | 'positioner'>;
   Pressable?: ComponentConfig<PressableOwnerState>;
@@ -467,7 +503,7 @@ interface Theme {
   /** Optional per-component customization - see `ThemeComponents`. */
   components?: OpenScale<ThemeComponents>;
   space: OpenScale<ThemeSpace>;
-  breakpoints: OpenScale<ThemeBreakpoints>;
+  breakpoints: OpenScale<ThemeBreakpoints & BreakpointHelpers>;
   layout: ThemeLayout;
   border: OpenScale<ThemeBorder>;
   text: OpenScale<ThemeText>;
@@ -560,7 +596,7 @@ declare const avatar: {
 declare const icon: ThemeIconSizes;
 declare const sizes: ThemeSizes;
 declare const space: ThemeSpace;
-declare const breakpoints: ThemeBreakpoints;
+declare const breakpoints: ThemeBreakpoints & BreakpointHelpers;
 declare const layout: ThemeLayout;
 declare const typography: ThemeTypographyVariants;
 /**
@@ -568,5 +604,10 @@ declare const typography: ThemeTypographyVariants;
  * belong to the consumer, who builds brand themes with `createTheme(baseTheme, ...)`.
  */
 declare const baseTheme: Theme;
+/**
+ * The query helpers for `baseTheme`'s breakpoints, as plain functions. A theme with its own
+ * breakpoints has the same helpers on `theme.breakpoints`.
+ */
+declare const up: (from: import("@soroush.tech/styled-system").BreakpointInput) => string, down: (to: import("@soroush.tech/styled-system").BreakpointInput) => string, only: (key: string) => string, between: (from: import("@soroush.tech/styled-system").BreakpointInput, to: import("@soroush.tech/styled-system").BreakpointInput) => string, not: (key: string) => string, containerQueries: import("@soroush.tech/styled-system").ContainerQueries;
 //#endregion
-export { fontWeights as $, ThemeFontWeights as A, ThemeSkeleton as B, ThemeAvatarSizes as C, ThemeBreakpoints as D, ThemeBorderWidths as E, ThemeLineHeights as F, ThemeZOrder as G, ThemeSwitch as H, ThemePalette as I, avatar as J, TypographyVariant as K, ThemeRadii as L, ThemeIconSizes as M, ThemeLayout as N, ThemeComponents as O, ThemeLetterSpacings as P, fontSizes as Q, ThemeShadow as R, Theme as S, ThemeBorder as T, ThemeText as U, ThemeSpace as V, ThemeTypographyVariants as W, borderWidths as X, baseTheme as Y, breakpoints as Z, OpenScale as _, CardSlotIconProps as a, radii as at, PressableOwnerState as b, ComponentStyle as c, typography as ct, LayoutContent as d, ThemeOverride as dt, fonts as et, LayoutEntry as f, createTheme as ft, LayoutSpace as g, LayoutPanels as h, CardOwnerState as i, lineHeights as it, ThemeFonts as j, ThemeDefaults as k, ComponentVariant as l, zOrder as lt, LayoutPanel as m, ButtonVariants as n, layout as nt, CardSlotTypographyProps as o, sizes as ot, LayoutLength as p, TypographyVariantStyle as q, CSSObject$1 as r, letterSpacings as rt, ComponentConfig as s, space as st, ButtonOwnerState as t, icon as tt, LayoutBars as u, DeepPartial as ut, PaletteColor as v, ThemeBackground as w, SizeEntry as x, PaletteEntry as y, ThemeSizes as z };
+export { between as $, ThemeBreakpoints as A, ThemeRadii as B, PressableOwnerState as C, withBreakpointHelpers as Ct, ThemeBackground as D, ThemeAvatarSizes as E, ThemeIconSizes as F, ThemeSwitch as G, ThemeSizes as H, ThemeLayout as I, ThemeZOrder as J, ThemeText as K, ThemeLetterSpacings as L, ThemeDefaults as M, ThemeFontWeights as N, ThemeBorder as O, ThemeFonts as P, baseTheme as Q, ThemeLineHeights as R, PaletteEntry as S, BreakpointHelpers as St, Theme as T, ThemeSkeleton as U, ThemeShadow as V, ThemeSpace as W, TypographyVariantStyle as X, TypographyVariant as Y, avatar as Z, LayoutPanel as _, up as _t, CSSObject$1 as a, fontWeights as at, OpenScale as b, ThemeOverride as bt, CardSlotTypographyProps as c, layout as ct, ComponentVariant as d, not as dt, borderWidths as et, DefaultBreakpoints as f, only as ft, LayoutLength as g, typography as gt, LayoutEntry as h, space as ht, ButtonVariants as i, fontSizes as it, ThemeComponents as j, ThemeBorderWidths as k, ComponentConfig as l, letterSpacings as lt, LayoutContent as m, sizes as mt, BreakpointOverrides as n, containerQueries as nt, CardOwnerState as o, fonts as ot, LayoutBars as p, radii as pt, ThemeTypographyVariants as q, ButtonOwnerState as r, down as rt, CardSlotIconProps as s, icon as st, BreakpointKey as t, breakpoints as tt, ComponentStyle as u, lineHeights as ut, LayoutPanels as v, zOrder as vt, SizeEntry as w, PaletteColor as x, createTheme as xt, LayoutSpace as y, DeepPartial as yt, ThemePalette as z };

package/dist/{useTablePagination-CLoac5oX.d.cts → useTablePagination-BG93T2Od.d.cts}

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

package/dist/{useTablePagination-RelVsdMR.d.mts → useTablePagination-jBWK8cmx.d.mts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-IEvuh6Cd.mjs";
+import { n as TableSortLabelDirection } from "./index-Fcf_SOl_.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.0",
+  "version": "2.0.0-alpha.1",
   "description": "Emotion + @soroush.tech/styled-system React component library - token-driven light/dark themes, layout primitives, forms, and overlays.",
   "keywords": [
     "design-system",
@@ -278,16 +278,6 @@
         "default": "./dist/Pagination.cjs"
       }
     },
-    "./PageLayout": {
-      "import": {
-        "types": "./dist/PageLayout.d.mts",
-        "default": "./dist/PageLayout.mjs"
-      },
-      "require": {
-        "types": "./dist/PageLayout.d.cts",
-        "default": "./dist/PageLayout.cjs"
-      }
-    },
     "./Paper": {
       "import": {
         "types": "./dist/Paper.d.mts",
@@ -487,7 +477,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@soroush.tech/styled-system": "^5.9.0-alpha.0"
+    "@soroush.tech/styled-system": "^6.0.0-alpha.0"
   },
   "peerDependencies": {
     "react": "^19.2.8",

package/dist/PageLayout/LayoutGrid.cjs

@@ -1,21 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_Grid = require("../Grid.cjs");
-const require_layoutStyles = require("../layoutStyles-B4Z1K6HZ.cjs");
-//#region src/PageLayout/LayoutGrid/LayoutGrid.tsx
-/**
-* A `Grid` on the theme's content columns: each breakpoint's
-* `theme.layout.*.content.columns` equal tracks, its `gutter` between them.
-* Place items with `gridColumn` (`'span 4'`, `'1 / -1'`, ...). `grid` and
-* `space` come last, so a `gridTemplateColumns` or `gap` prop still wins.
-*/
-const LayoutGrid = require_src.styled(require_Grid.Grid, {
-	name: "LayoutGrid",
-	label: "LayoutGrid",
-	systemProps: [require_src.src_exports.grid, require_src.src_exports.space]
-})(({ theme }) => require_layoutStyles.layoutStyles(theme, ({ content: { columns, gutter } }) => ({
-	gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-	columnGap: require_layoutStyles.layoutLength(theme, gutter)
-})));
-//#endregion
-exports.LayoutGrid = LayoutGrid;

package/dist/PageLayout/LayoutGrid.d.cts

@@ -1,22 +0,0 @@
-import { S as Theme } from "../themes-9YNnlVyY.cjs";
-import "../index-DkJzi96w.cjs";
-import { s as ViewProps } from "../index-CvWslVk6.cjs";
-import { r as GridProps } from "../index-BJ5Tsf7u.cjs";
-//#region src/PageLayout/LayoutGrid/LayoutGrid.d.ts
-type LayoutGridProps = GridProps;
-/**
- * A `Grid` on the theme's content columns: each breakpoint's
- * `theme.layout.*.content.columns` equal tracks, its `gutter` between them.
- * Place items with `gridColumn` (`'span 4'`, `'1 / -1'`, ...). `grid` and
- * `space` come last, so a `gridTemplateColumns` or `gap` prop still wins.
- */
-declare const LayoutGrid: import("@emotion/styled").StyledComponent<Pick<{
-  theme?: Theme;
-  as?: React.ElementType;
-} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-  theme?: Theme;
-} & GridProps, "about" | "accessKey" | "alignContent" | "alignItems" | "alignSelf" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "as" | "aspectRatio" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "bg" | "border" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderColor" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "borderX" | "borderY" | "bottom" | "children" | "className" | "color" | "columnGap" | "content" | "contentEditable" | "contextMenu" | "cursor" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "display" | "draggable" | "enterKeyHint" | "exportparts" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnGap" | "gridGap" | "gridRow" | "gridRowGap" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "justifyContent" | "justifyItems" | "justifySelf" | "key" | "lang" | "left" | "letterSpacing" | "lineHeight" | "m" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "marginX" | "marginY" | "maxHeight" | "maxWidth" | "mb" | "minHeight" | "minWidth" | "ml" | "mr" | "mt" | "mx" | "my" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "p" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingX" | "paddingY" | "part" | "pb" | "pl" | "popover" | "popoverTarget" | "popoverTargetAction" | "position" | "pr" | "prefix" | "property" | "pt" | "px" | "py" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "right" | "role" | "rowGap" | "security" | "size" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "textAlign" | "textAlignLast" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationStyle" | "textDecorationThickness" | "textOverflow" | "textTransform" | "theme" | "title" | "top" | "translate" | "typeof" | "unselectable" | "verticalAlign" | "vocab" | "whiteSpace" | "width" | "zIndex"> & {
-  theme?: Theme;
-} & GridProps, {}, {}>;
-//#endregion
-export { LayoutGrid, LayoutGridProps };

package/dist/PageLayout/LayoutGrid.d.mts

@@ -1,22 +0,0 @@
-import { S as Theme } from "../themes-9YNnlVyY.mjs";
-import "../index-CEqa8xx8.mjs";
-import { s as ViewProps } from "../index-tv-TGYSG.mjs";
-import { r as GridProps } from "../index-BnFxdnEL.mjs";
-//#region src/PageLayout/LayoutGrid/LayoutGrid.d.ts
-type LayoutGridProps = GridProps;
-/**
- * A `Grid` on the theme's content columns: each breakpoint's
- * `theme.layout.*.content.columns` equal tracks, its `gutter` between them.
- * Place items with `gridColumn` (`'span 4'`, `'1 / -1'`, ...). `grid` and
- * `space` come last, so a `gridTemplateColumns` or `gap` prop still wins.
- */
-declare const LayoutGrid: import("@emotion/styled").StyledComponent<Pick<{
-  theme?: Theme;
-  as?: React.ElementType;
-} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-  theme?: Theme;
-} & GridProps, "about" | "accessKey" | "alignContent" | "alignItems" | "alignSelf" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "as" | "aspectRatio" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "autoSave" | "bg" | "border" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderColor" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "borderX" | "borderY" | "bottom" | "children" | "className" | "color" | "columnGap" | "content" | "contentEditable" | "contextMenu" | "cursor" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "display" | "draggable" | "enterKeyHint" | "exportparts" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnGap" | "gridGap" | "gridRow" | "gridRowGap" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "hidden" | "id" | "inert" | "inlist" | "inputMode" | "is" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "justifyContent" | "justifyItems" | "justifySelf" | "key" | "lang" | "left" | "letterSpacing" | "lineHeight" | "m" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "marginX" | "marginY" | "maxHeight" | "maxWidth" | "mb" | "minHeight" | "minWidth" | "ml" | "mr" | "mt" | "mx" | "my" | "nonce" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBeforeToggle" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onToggle" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "p" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingX" | "paddingY" | "part" | "pb" | "pl" | "popover" | "popoverTarget" | "popoverTargetAction" | "position" | "pr" | "prefix" | "property" | "pt" | "px" | "py" | "radioGroup" | "ref" | "rel" | "resource" | "results" | "rev" | "right" | "role" | "rowGap" | "security" | "size" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "textAlign" | "textAlignLast" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationStyle" | "textDecorationThickness" | "textOverflow" | "textTransform" | "theme" | "title" | "top" | "translate" | "typeof" | "unselectable" | "verticalAlign" | "vocab" | "whiteSpace" | "width" | "zIndex"> & {
-  theme?: Theme;
-} & GridProps, {}, {}>;
-//#endregion
-export { LayoutGrid, LayoutGridProps };

package/dist/PageLayout/LayoutGrid.mjs

@@ -1,20 +0,0 @@
-import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
-import { Grid } from "../Grid.mjs";
-import { n as layoutStyles, t as layoutLength } from "../layoutStyles-f0ISNjsC.mjs";
-//#region src/PageLayout/LayoutGrid/LayoutGrid.tsx
-/**
-* A `Grid` on the theme's content columns: each breakpoint's
-* `theme.layout.*.content.columns` equal tracks, its `gutter` between them.
-* Place items with `gridColumn` (`'span 4'`, `'1 / -1'`, ...). `grid` and
-* `space` come last, so a `gridTemplateColumns` or `gap` prop still wins.
-*/
-const LayoutGrid = styled(Grid, {
-	name: "LayoutGrid",
-	label: "LayoutGrid",
-	systemProps: [src_exports.grid, src_exports.space]
-})(({ theme }) => layoutStyles(theme, ({ content: { columns, gutter } }) => ({
-	gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-	columnGap: layoutLength(theme, gutter)
-})));
-//#endregion
-export { LayoutGrid };

package/dist/PageLayout/PageLayout.cjs

@@ -1,148 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_View = require("../View.cjs");
-const require_PageLayoutContext = require("../PageLayoutContext-agXGhegE.cjs");
-const require_Grid = require("../Grid.cjs");
-const require_layoutStyles = require("../layoutStyles-B4Z1K6HZ.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/PageLayout/PageLayout/PageLayout.tsx
-const regionContext = {
-	top: {
-		region: "bar",
-		placement: "top"
-	},
-	bottom: {
-		region: "bar",
-		placement: "bottom"
-	},
-	start: {
-		region: "panel",
-		side: "start"
-	},
-	end: {
-		region: "panel",
-		side: "end"
-	}
-};
-const inRegion = (key, node) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PageLayoutContext.PageLayoutContext.Provider, {
-	value: regionContext[key],
-	children: node
-});
-const panelTrack = (theme, panel) => {
-	if (panel?.mode === "inline") return require_layoutStyles.layoutLength(theme, panel.width);
-	if (panel?.mode === "collapsed") return require_layoutStyles.layoutLength(theme, panel.railWidth);
-	return "0px";
-};
-const PageLayoutRoot = require_src.styled(require_Grid.Grid, {
-	name: "PageLayout",
-	label: "PageLayout",
-	shouldForwardProp: (prop) => prop !== "regions",
-	systemProps: [require_src.src_exports.layout]
-})({
-	position: "relative",
-	minHeight: "100dvh",
-	gridTemplateAreas: "\"top top top\" \"start content end\" \"bottom bottom bottom\""
-}, ({ theme, regions }) => require_layoutStyles.layoutStyles(theme, ({ bars, panels }) => {
-	const track = (side) => regions[side] ? panelTrack(theme, panels[side]) : "0px";
-	const row = (placement) => regions[placement] ? require_layoutStyles.layoutLength(theme, bars[placement]) : "0px";
-	return {
-		gridTemplateColumns: `${track("start")} minmax(0, 1fr) ${track("end")}`,
-		gridTemplateRows: `${row("top")} minmax(0, 1fr) ${row("bottom")}`
-	};
-}));
-const PageLayoutBar = require_src.styled(require_View.View, {
-	name: "PageLayout",
-	slot: "bar",
-	label: "PageLayoutBar",
-	shouldForwardProp: (prop) => prop !== "placement"
-})(({ theme, placement }) => ({
-	gridArea: placement,
-	minWidth: 0,
-	...require_layoutStyles.layoutStyles(theme, ({ bars }) => ({ display: require_layoutStyles.layoutLength(theme, bars[placement]) === "0px" ? "none" : "block" }))
-}));
-const panelStyle = (theme, side, isOpen, panel) => {
-	if (panel?.mode === "overlay") return {
-		display: isOpen ? "block" : "none",
-		position: "absolute",
-		insetBlock: 0,
-		[side === "start" ? "insetInlineStart" : "insetInlineEnd"]: 0,
-		width: require_layoutStyles.layoutLength(theme, panel.width),
-		zIndex: theme.zOrder.drawer
-	};
-	return {
-		display: !panel || panel.mode === "hidden" ? "none" : "block",
-		position: "static",
-		width: "auto",
-		zIndex: "auto"
-	};
-};
-const PageLayoutPanel = require_src.styled(require_View.View, {
-	name: "PageLayout",
-	slot: "panel",
-	label: "PageLayoutPanel",
-	shouldForwardProp: (prop) => prop !== "side" && prop !== "isOpen"
-})(({ theme, side, isOpen }) => ({
-	gridArea: side,
-	minWidth: 0,
-	overflow: "auto",
-	...require_layoutStyles.layoutStyles(theme, ({ panels }) => panelStyle(theme, side, isOpen, panels[side]))
-}));
-const PageLayoutContent = require_src.styled(require_View.View, {
-	name: "PageLayout",
-	slot: "content",
-	label: "PageLayoutContent"
-})(({ theme }) => ({
-	gridArea: "content",
-	minWidth: 0,
-	width: "100%",
-	...require_layoutStyles.layoutStyles(theme, ({ content: { margin, mode, maxWidth } }) => {
-		const isFixed = mode === "fixed";
-		return {
-			paddingInline: require_layoutStyles.layoutLength(theme, margin),
-			maxWidth: isFixed && maxWidth !== void 0 ? require_layoutStyles.layoutLength(theme, maxWidth) : "none",
-			marginInline: isFixed ? "auto" : 0
-		};
-	})
-}));
-/**
-* The page frame from `theme.layout`: bars on top and bottom, side panels at the
-* start and end, and the content container between them, each breakpoint
-* arranged by its layout entry in CSS alone (no JavaScript media queries, so
-* server rendering matches the client). Lay the content out on the theme's
-* columns with `LayoutGrid`.
-*/
-function PageLayout({ children, topBar, bottomBar, startPanel, endPanel, openPanels = {}, ...rest }) {
-	const regions = {
-		top: topBar != null,
-		bottom: bottomBar != null,
-		start: startPanel != null,
-		end: endPanel != null
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageLayoutRoot, {
-		regions,
-		...rest,
-		children: [
-			regions.top && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageLayoutBar, {
-				placement: "top",
-				children: inRegion("top", topBar)
-			}),
-			regions.start && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageLayoutPanel, {
-				side: "start",
-				isOpen: !!openPanels.start,
-				children: inRegion("start", startPanel)
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageLayoutContent, { children }),
-			regions.end && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageLayoutPanel, {
-				side: "end",
-				isOpen: !!openPanels.end,
-				children: inRegion("end", endPanel)
-			}),
-			regions.bottom && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageLayoutBar, {
-				placement: "bottom",
-				children: inRegion("bottom", bottomBar)
-			})
-		]
-	});
-}
-//#endregion
-exports.PageLayout = PageLayout;

package/dist/PageLayout/PageLayout.d.cts

@@ -1,31 +0,0 @@
-import { h as LayoutPanels } from "../themes-9YNnlVyY.cjs";
-import { r as GridProps } from "../index-BJ5Tsf7u.cjs";
-import "../index-BDD-L8uL.cjs";
-import { ReactNode } from "react";
-//#region src/PageLayout/PageLayout/PageLayout.d.ts
-type PageLayoutPanelSide = keyof LayoutPanels;
-type PageLayoutBarPlacement = 'top' | 'bottom';
-interface PageLayoutProps extends GridProps {
-  /** The page content, in the theme's content container (fluid or fixed per breakpoint). */
-  children: ReactNode;
-  /** The top bar - its height per breakpoint is `theme.layout.*.bars.top`; absent where unset or `0`. */
-  topBar?: ReactNode;
-  /** The bottom bar - its height per breakpoint is `theme.layout.*.bars.bottom`; absent where unset or `0`. */
-  bottomBar?: ReactNode;
-  /** The start-side panel, laid out per breakpoint by `theme.layout.*.panels.start`. */
-  startPanel?: ReactNode;
-  /** The end-side panel, laid out per breakpoint by `theme.layout.*.panels.end`. */
-  endPanel?: ReactNode;
-  /** Which `overlay` panels are open. Panels in another mode ignore it. Default: none. */
-  openPanels?: { [Side in PageLayoutPanelSide]?: boolean; };
-}
-/**
- * The page frame from `theme.layout`: bars on top and bottom, side panels at the
- * start and end, and the content container between them, each breakpoint
- * arranged by its layout entry in CSS alone (no JavaScript media queries, so
- * server rendering matches the client). Lay the content out on the theme's
- * columns with `LayoutGrid`.
- */
-declare function PageLayout({ children, topBar, bottomBar, startPanel, endPanel, openPanels, ...rest }: Readonly<PageLayoutProps>): import("react").JSX.Element;
-//#endregion
-export { PageLayout, PageLayoutBarPlacement, PageLayoutPanelSide, PageLayoutProps };

package/dist/PageLayout/PageLayout.d.mts

@@ -1,31 +0,0 @@
-import { h as LayoutPanels } from "../themes-9YNnlVyY.mjs";
-import { r as GridProps } from "../index-BnFxdnEL.mjs";
-import "../index-CoHrw2p7.mjs";
-import { ReactNode } from "react";
-//#region src/PageLayout/PageLayout/PageLayout.d.ts
-type PageLayoutPanelSide = keyof LayoutPanels;
-type PageLayoutBarPlacement = 'top' | 'bottom';
-interface PageLayoutProps extends GridProps {
-  /** The page content, in the theme's content container (fluid or fixed per breakpoint). */
-  children: ReactNode;
-  /** The top bar - its height per breakpoint is `theme.layout.*.bars.top`; absent where unset or `0`. */
-  topBar?: ReactNode;
-  /** The bottom bar - its height per breakpoint is `theme.layout.*.bars.bottom`; absent where unset or `0`. */
-  bottomBar?: ReactNode;
-  /** The start-side panel, laid out per breakpoint by `theme.layout.*.panels.start`. */
-  startPanel?: ReactNode;
-  /** The end-side panel, laid out per breakpoint by `theme.layout.*.panels.end`. */
-  endPanel?: ReactNode;
-  /** Which `overlay` panels are open. Panels in another mode ignore it. Default: none. */
-  openPanels?: { [Side in PageLayoutPanelSide]?: boolean; };
-}
-/**
- * The page frame from `theme.layout`: bars on top and bottom, side panels at the
- * start and end, and the content container between them, each breakpoint
- * arranged by its layout entry in CSS alone (no JavaScript media queries, so
- * server rendering matches the client). Lay the content out on the theme's
- * columns with `LayoutGrid`.
- */
-declare function PageLayout({ children, topBar, bottomBar, startPanel, endPanel, openPanels, ...rest }: Readonly<PageLayoutProps>): import("react").JSX.Element;
-//#endregion
-export { PageLayout, PageLayoutBarPlacement, PageLayoutPanelSide, PageLayoutProps };