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

package/dist/{index-DJ0f69wh.d.cts → index-Lsm4v8fB.d.cts}

@@ -1,9 +1,8 @@
-import { CreateStyledComponent, FilteringStyledOptions, Interpolation, StyledOptions } from "@emotion/styled";
-import { CSSObject, PropsOf, css, keyframes } from "@emotion/react";
 import { CSSProperties, ComponentClass, ComponentProps, ComponentType, ElementType, HTMLAttributes, JSX, ReactNode, Ref } from "react";
 import { BorderProps, ContainerQueries, FlexboxProps, LayoutFrameProps, LayoutProps, PositionProps, QueryHelpers, SpaceProps, SpanProps, TypographyProps } from "@soroush.tech/styled-system";
+import { CreateStyledComponent, FilteringStyledOptions, Interpolation, StyledOptions } from "@emotion/styled";
+import { CSSObject, PropsOf, css, keyframes } from "@emotion/react";
 import { createShouldForwardProp, props } from "@soroush.tech/styled-system/should-forward-prop";
-//#region src/View/View.d.ts
 /** Valid values for the color prop - derived from theme.text keys. */
 type ViewColorToken = keyof Theme['text'];
 /** Valid values for the bg prop - derived from theme.background keys. */
@@ -31,8 +30,6 @@ declare const View: import("@emotion/styled").StyledComponent<{
   theme?: Theme;
   as?: React.ElementType;
 } & ViewProps, import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-//#endregion
-//#region src/Flex/Flex.d.ts
 /** Valid values for the gap prop - derived from theme.space keys. */
 type GapToken = keyof Theme['space'];
 /**
@@ -47,8 +44,6 @@ declare const Flex: import("@emotion/styled").StyledComponent<{
 } & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
   theme?: Theme;
 } & FlexProps, {}, {}>;
-//#endregion
-//#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;
 interface PaperProps extends FlexProps {
   /** Shadow depth - 0 (flat) to 24 (highest). Resolves to theme.shadows[n]. Default: 1. */
@@ -65,8 +60,6 @@ interface PaperProps extends FlexProps {
   as?: ElementType;
 }
 declare function Paper({ elevation, p, bg, borderRadius, ...rest }: Readonly<PaperProps>): import("react").JSX.Element;
-//#endregion
-//#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.
@@ -81,8 +74,6 @@ interface BreakpointHelpers extends QueryHelpers {
  * 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
  * functions are replaced wholesale by `createTheme`, so they stay intact here.
@@ -101,8 +92,6 @@ type ThemeOverride = DeepPartial<Theme>;
  * - `breakpoints` gets its query helpers back, built from the merged sizes.
  */
 declare const createTheme: (base: Theme, overrides: ThemeOverride) => Theme;
-//#endregion
-//#region src/theme/themes.d.ts
 /** Design-system's own style-object shape - Emotion stays an internal implementation detail. */
 type CSSObject$1 = CSSObject;
 /**
@@ -152,6 +141,10 @@ interface ThemeBackground {
   terminal: string;
   grid: string;
   transparent: string;
+  /** The thumb of a drawn scrollbar (`ScrollArea`). */
+  scrollbar: string;
+  /** The track of a drawn scrollbar, while it is hovered or dragged. */
+  scrollbarTrack: string;
 }
 interface ThemeBorder {
   default?: string;
@@ -188,6 +181,25 @@ interface ThemeZOrder {
   appBar: number;
   drawer: number;
   modal: number;
+  snackbar: number;
+  tooltip: number;
+}
+/** The durations of `theme.transitions.duration`, in milliseconds. */
+interface ThemeTransitionDuration {
+  short: number;
+  standard: number;
+  long: number;
+}
+/** The easings of `theme.transitions.easing` - CSS timing functions. */
+interface ThemeTransitionEasing {
+  standard: string;
+  enter: string;
+  exit: string;
+}
+/** How long and how smoothly things move - read by `Collapse`, `Fade`, `Grow`, `Slide` and `Zoom`. */
+interface ThemeTransitions {
+  duration: OpenScale<ThemeTransitionDuration>;
+  easing: OpenScale<ThemeTransitionEasing>;
 }
 interface ThemeRadii {
   sq: string;
@@ -417,6 +429,8 @@ interface ThemeDefaults {
   avatarSize?: keyof ThemeAvatarSizes;
   /** Icon glyph size step. Fallback: `'lg'`. */
   iconSize?: keyof ThemeIconSizes;
+  /** Least width of an input that does not fill its row (text, number, select, autocomplete) - a CSS length. Fallback: `'12rem'`. */
+  inputMinWidth?: string;
   /** Border/ring color. Fallback: `'primary'`. */
   borderColor?: keyof ThemeBorder;
   /** Border/ring width. Fallback: `'thin'`. */
@@ -426,7 +440,7 @@ interface ThemeDefaults {
   /** Switch thumb/track layout. Fallback: `'outside'`. */
   switchVariant?: 'outside' | 'inside';
   /** Input frame style (TextInput, Select, NativeSelect). Fallback: `'default'`. */
-  inputVariant?: 'default' | 'outlined' | 'text' | 'underline';
+  inputVariant?: InputVariantKey;
   /** Avatar shape. Fallback: `'circular'`. */
   avatarVariant?: 'circular' | 'rounded' | 'square';
   /** Link underline behavior. Fallback: `'always'`. */
@@ -467,8 +481,8 @@ interface ButtonVariants {
   outlined: true;
   text: true;
 }
-/** The defaults a theme may set for every `InputRange`. */
-interface InputRangeOwnerState {
+/** The defaults a theme may set for every `RangeInput`. */
+interface RangeInputOwnerState {
   size?: keyof ThemeSizes;
   color?: keyof ThemePalette;
   orientation?: 'horizontal' | 'vertical';
@@ -478,9 +492,9 @@ interface InputRangeOwnerState {
   valueLabel?: 'auto' | 'on' | 'off';
   shouldSwapThumbs?: boolean;
 }
-/** The defaults a theme may set for every `NumberField` - its button labels give it a language. */
-interface NumberFieldOwnerState {
-  variant?: 'default' | 'outlined' | 'text' | 'underline';
+/** The defaults a theme may set for every `NumberInput` - its button labels give it a language. */
+interface NumberInputOwnerState {
+  variant?: InputVariantKey;
   size?: keyof ThemeSizes;
   color?: keyof ThemePalette;
   spinButtons?: 'stacked' | 'sides' | 'none';
@@ -500,6 +514,129 @@ interface RatingOwnerState {
   size?: keyof ThemeSizes;
   color?: keyof ThemePalette;
 }
+/** The defaults a theme may set for every `Autocomplete` - its labels give it a language. */
+interface AutocompleteOwnerState {
+  borderRadius?: keyof ThemeRadii;
+  bg?: keyof ThemeBackground;
+  textColor?: keyof ThemeText;
+  variant?: InputVariantKey;
+  size?: keyof ThemeSizes;
+  color?: keyof ThemePalette;
+  shouldAllowFreeText?: boolean;
+  layer?: keyof ThemeZOrder;
+  clearLabel?: string;
+  openLabel?: string;
+  closeLabel?: string;
+  loadingText?: string;
+  noOptionsText?: string;
+}
+/** The defaults a theme may set for every `ScrollArea`. */
+interface ScrollAreaOwnerState {
+  axes?: 'x' | 'y' | 'both';
+}
+/** The frames a form input is drawn in. */
+type InputVariantKey = 'default' | 'outlined' | 'text' | 'underline';
+/** The corner shapes of a control or a surface. */
+type ShapeKey = 'square' | 'rounded' | 'pill';
+/** The defaults a theme may set for every `Tooltip`. */
+interface TooltipOwnerState {
+  borderRadius?: keyof ThemeRadii;
+  bg?: keyof ThemeBackground;
+  textColor?: keyof ThemeText;
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'auto' | 'auto-start' | 'auto-end';
+  hasArrow?: boolean;
+  enterDelay?: number;
+  leaveDelay?: number;
+  enterTouchDelay?: number;
+  leaveTouchDelay?: number;
+  shouldDescribeChild?: boolean;
+  shouldOpenOnHover?: boolean;
+  shouldOpenOnFocus?: boolean;
+  shouldOpenOnTouch?: boolean;
+  layer?: keyof ThemeZOrder;
+}
+/** The defaults a theme may set for every `Snackbar`. */
+interface SnackbarOwnerState {
+  anchorOrigin?: {
+    vertical: 'top' | 'bottom';
+    horizontal: 'start' | 'center' | 'end';
+  };
+  autoHideDuration?: number;
+  resumeHideDuration?: number;
+  layer?: keyof ThemeZOrder;
+  shape?: ShapeKey;
+  borderRadius?: keyof ThemeRadii;
+  bg?: keyof ThemeBackground;
+  textColor?: keyof ThemeText;
+}
+/** The defaults a theme may set for every `Fab`. */
+interface FabOwnerState {
+  variant?: 'circular' | 'extended';
+  color?: keyof ThemePalette;
+  size?: keyof ThemeSizes;
+}
+/** The defaults a theme may set for every `FabMenu`. */
+interface FabMenuOwnerState {
+  direction?: 'up' | 'down' | 'left' | 'right';
+  align?: 'start' | 'end';
+  color?: keyof ThemePalette;
+  size?: keyof ThemeSizes;
+}
+/** The defaults a theme may set for every `Alert` - its `closeLabel` gives it a language. */
+interface AlertOwnerState {
+  severity?: 'success' | 'info' | 'warning' | 'error';
+  variant?: 'standard' | 'contained' | 'outlined';
+  closeLabel?: string;
+  role?: 'alert' | 'status';
+  borderRadius?: keyof ThemeRadii;
+}
+/** The defaults a theme may set for every `Badge`. */
+interface BadgeOwnerState {
+  max?: number;
+  variant?: 'standard' | 'dot';
+  color?: keyof ThemePalette;
+  anchorOrigin?: {
+    vertical: 'top' | 'bottom';
+    horizontal: 'start' | 'end';
+  };
+  overlap?: 'rectangular' | 'circular';
+}
+/** The defaults a theme may set for every `Chip` - its `deleteLabel` gives it a language. */
+interface ChipOwnerState {
+  variant?: 'contained' | 'outlined' | 'text';
+  color?: keyof ThemePalette;
+  size?: keyof ThemeSizes;
+  shape?: ShapeKey;
+  borderRadius?: keyof ThemeRadii;
+  deleteLabel?: string;
+}
+/** The defaults a theme may set for every `Accordion`. */
+interface AccordionOwnerState {
+  hasGutters?: boolean;
+  borderRadius?: keyof ThemeRadii;
+  bg?: keyof ThemeBackground;
+  textColor?: keyof ThemeText;
+}
+/** The defaults a theme may set for every `AccordionSummary`. */
+interface AccordionSummaryOwnerState {
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+/** The defaults a theme may set for every `AccordionGroup`. */
+interface AccordionGroupOwnerState {
+  isExclusive?: boolean;
+  variant?: 'separated' | 'attached';
+}
+/** The defaults a theme may set for every `Collapse`. */
+interface CollapseOwnerState {
+  orientation?: 'vertical' | 'horizontal';
+  collapsedSize?: string | number;
+  timeout?: number | {
+    enter: number;
+    exit: number;
+  };
+  easing?: keyof ThemeTransitionEasing;
+  shouldAppear?: boolean;
+}
 /** The defaults a theme may set for every `TransferList` - its button labels give it a language. */
 interface TransferListOwnerState {
   size?: keyof ThemeSizes;
@@ -525,7 +662,7 @@ interface ButtonOwnerState {
   variant?: keyof ButtonVariants;
   color?: keyof ThemePalette;
   size?: keyof ThemeSizes;
-  shape?: 'square' | 'rounded' | 'pill';
+  shape?: ShapeKey;
   fullWidth?: boolean;
   disabled?: boolean;
 }
@@ -534,6 +671,7 @@ interface TabsVariants {
   underline: true;
   boxed: true;
   enclosed: true;
+  tonal: true;
 }
 /** The resolved props Tabs' styled elements receive - what `ownerState` exposes. */
 interface TabsOwnerState {
@@ -548,6 +686,7 @@ interface TabsOwnerState {
 /** The defaults a theme may set for every `Menu`. */
 interface MenuOwnerState {
   align?: 'start' | 'end';
+  borderRadius?: keyof ThemeRadii;
   marginThreshold?: keyof ThemeSpace;
   elevation?: PaperElevation;
   layer?: keyof ThemeZOrder;
@@ -639,7 +778,7 @@ interface ThemeComponents {
   Button?: ComponentConfig<ButtonOwnerState, 'root' | 'label' | 'icon' | 'loader'>;
   ButtonGroup?: ComponentConfig;
   Card?: ComponentConfig<CardOwnerState, 'root' | 'title' | 'caption' | 'icon'>;
-  Checkbox?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'icon'>;
+  Checkbox?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'icon' | 'label'>;
   CircularProgress?: ComponentConfig<Record<string, unknown>, 'root' | 'track' | 'circle'>;
   ContextMenu?: ComponentConfig<ContextMenuOwnerState, 'root' | 'paper'>;
   Drawer?: ComponentConfig;
@@ -666,16 +805,35 @@ interface ThemeComponents {
   Popover?: ComponentConfig<Record<string, unknown>, 'root' | 'positioner'>;
   Pressable?: ComponentConfig<PressableOwnerState>;
   Quote?: ComponentConfig;
-  Radio?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'icon'>;
-  InputRange?: ComponentConfig<InputRangeOwnerState, 'root' | 'rail' | 'track' | 'thumb' | 'mark' | 'markLabel' | 'valueLabel' | 'input'>;
+  Radio?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'icon' | 'label'>;
+  RangeInput?: ComponentConfig<RangeInputOwnerState, 'root' | 'rail' | 'track' | 'thumb' | 'mark' | 'markLabel' | 'valueLabel' | 'input'>;
+  Tooltip?: ComponentConfig<TooltipOwnerState, 'root' | 'arrow'>;
+  Snackbar?: ComponentConfig<SnackbarOwnerState, 'root' | 'content' | 'message' | 'action'>;
+  Fab?: ComponentConfig<FabOwnerState, 'root' | 'label' | 'labelText'>;
+  FabMenu?: ComponentConfig<FabMenuOwnerState, 'root' | 'list'>;
+  Alert?: ComponentConfig<AlertOwnerState, 'root' | 'icon' | 'message' | 'action' | 'closeButton'>;
+  AlertTitle?: ComponentConfig;
+  Badge?: ComponentConfig<BadgeOwnerState, 'root' | 'badge' | 'label'>;
+  Chip?: ComponentConfig<ChipOwnerState, 'root' | 'body' | 'label' | 'icon' | 'avatar' | 'deleteIcon'>;
+  Accordion?: ComponentConfig<AccordionOwnerState, 'root' | 'region'>;
+  AccordionSummary?: ComponentConfig<AccordionSummaryOwnerState, 'root' | 'button' | 'content' | 'icon'>;
+  AccordionDetails?: ComponentConfig;
+  AccordionActions?: ComponentConfig;
+  AccordionGroup?: ComponentConfig<AccordionGroupOwnerState>;
+  Collapse?: ComponentConfig<CollapseOwnerState, 'root' | 'wrapper' | 'inner'>;
   TransferList?: ComponentConfig<TransferListOwnerState, 'root' | 'list' | 'header' | 'title' | 'count' | 'items' | 'item' | 'controls' | 'icon'>;
-  NumberField?: ComponentConfig<NumberFieldOwnerState, 'root' | 'input' | 'spinButtons' | 'increment' | 'decrement'>;
+  Autocomplete?: ComponentConfig<AutocompleteOwnerState, 'root' | 'tags' | 'input' | 'clearIndicator' | 'popupIndicator' | 'popup' | 'listbox' | 'group' | 'groupLabel' | 'groupItems' | 'option' | 'status'>;
+  NumberInput?: ComponentConfig<NumberInputOwnerState, 'root' | 'input' | 'content' | 'spinButtons' | 'increment' | 'decrement'>;
   Rating?: ComponentConfig<RatingOwnerState, 'root' | 'item' | 'icon' | 'decimal' | 'input' | 'text' | 'emptyLabel'>;
+  ScrollArea?: ComponentConfig<ScrollAreaOwnerState, 'root' | 'viewport' | 'track' | 'thumb'>;
   Select?: ComponentConfig<Record<string, unknown>, 'root' | 'value' | 'valueArea' | 'valueGhost' | 'listbox'>;
+  NavGroup?: ComponentConfig<Record<string, unknown>, 'root' | 'label' | 'list'>;
+  NavLink?: ComponentConfig<Record<string, unknown>, 'root' | 'label' | 'note'>;
+  NavTree?: ComponentConfig<Record<string, unknown>, 'root'>;
   Sidebar?: ComponentConfig<Record<string, unknown>, 'root' | 'rail' | 'panel'>;
-  SidebarItem?: ComponentConfig;
+  SidebarItem?: ComponentConfig<Record<string, unknown>, 'root' | 'pill'>;
   Skeleton?: ComponentConfig<Record<string, unknown>, 'root' | 'content'>;
-  Switch?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'track' | 'thumb'>;
+  Switch?: ComponentConfig<Record<string, unknown>, 'root' | 'input' | 'track' | 'thumb' | 'label'>;
   Tab?: ComponentConfig<TabOwnerState, 'root' | 'label' | 'icon' | 'secondaryAction' | 'close'>;
   Table?: ComponentConfig;
   TableBody?: ComponentConfig;
@@ -732,6 +890,7 @@ interface Theme {
   fontWeights: OpenScale<ThemeFontWeights>;
   palette: OpenScale<ThemePalette>;
   zOrder: OpenScale<ThemeZOrder>;
+  transitions: ThemeTransitions;
 }
 /** The semantic color keys of `theme.palette`. */
 type PaletteColor = keyof ThemePalette;
@@ -753,6 +912,20 @@ declare const zOrder: {
   appBar: number;
   drawer: number;
   modal: number;
+  snackbar: number;
+  tooltip: number;
+};
+declare const transitions: {
+  duration: {
+    short: number;
+    standard: number;
+    long: number;
+  };
+  easing: {
+    standard: string;
+    enter: string;
+    exit: string;
+  };
 };
 declare const fontSizes: number[];
 declare const lineHeights: {
@@ -809,8 +982,6 @@ declare const baseTheme: Theme;
  * 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
-//#region src/style/styled.d.ts
 /**
  * Design-system additions to Emotion's styled options. A styled root that passes
  * `name` becomes theme-customizable: `theme.components[name]` may contribute
@@ -872,5 +1043,4 @@ interface CreateThemedStyled extends StyledTags {
  * customization (`theme.components[name].styleOverrides` / `.variants`).
  */
 declare const styled: CreateThemedStyled;
-//#endregion
-export { ThemeFonts as $, ViewBorderRadiusToken as $t, MenuListOwnerState as A, lineHeights as At, TabPanelOwnerState as B, ThemeOverride as Bt, LayoutContent as C, down as Ct, LayoutPanels as D, icon as Dt, LayoutPanel as E, fonts as Et, PaletteEntry as F, space as Ft, ThemeAvatarSizes as G, PaperElevation as Gt, TabsOwnerState as H, BreakpointHelpers as Ht, PressableOwnerState as I, typography as It, ThemeBorderWidths as J, FlexProps as Jt, ThemeBackground as K, PaperProps as Kt, RatingOwnerState as L, up as Lt, NumberFieldOwnerState as M, only as Mt, OpenScale as N, radii as Nt, LayoutSpace as O, layout as Ot, PaletteColor as P, sizes as Pt, ThemeFontWeights as Q, ViewBorderColorToken as Qt, SizeEntry as R, zOrder as Rt, LayoutBars as S, containerQueries as St, LayoutLength as T, fontWeights as Tt, TabsVariants as U, withBreakpointHelpers as Ut, TabScrollButtonOwnerState as V, createTheme as Vt, Theme as W, Paper as Wt, ThemeComponents as X, View as Xt, ThemeBreakpoints as Y, GapToken as Yt, ThemeDefaults as Z, ViewBackgroundToken as Zt, ComponentStyle as _, avatar as _t, ThemeCustomizationOptions as a, ThemeRadii as at, DefaultBreakpoints as b, borderWidths as bt, BreakpointKey as c, ThemeSkeleton as ct, ButtonVariants as d, ThemeText as dt, ViewBorderWidthToken as en, ThemeIconSizes as et, CSSObject$1 as f, ThemeTypographyVariants as ft, ComponentConfig as g, TypographyVariantStyle as gt, CardSlotTypographyProps as h, TypographyVariant as ht, props as i, ThemePalette as it, MenuOwnerState as j, not as jt, MenuItemOwnerState as k, letterSpacings as kt, BreakpointOverrides as l, ThemeSpace as lt, CardSlotIconProps as m, TransferListOwnerState as mt, css as n, ViewProps as nn, ThemeLetterSpacings as nt, styled as o, ThemeShadow as ot, CardOwnerState as p, ThemeZOrder as pt, ThemeBorder as q, Flex as qt, keyframes as r, ThemeLineHeights as rt, BreadcrumbsOwnerState as s, ThemeSizes as st, createShouldForwardProp as t, ViewColorToken as tn, ThemeLayout as tt, ButtonOwnerState as u, ThemeSwitch as ut, ComponentVariant as v, baseTheme as vt, LayoutEntry as w, fontSizes as wt, InputRangeOwnerState as x, breakpoints as xt, ContextMenuOwnerState as y, between as yt, TabOwnerState as z, DeepPartial as zt };
+export { TabScrollButtonOwnerState as $, typography as $t, FabOwnerState as A, TransferListOwnerState as At, MenuOwnerState as B, fontSizes as Bt, CollapseOwnerState as C, ThemeText as Ct, ContextMenuOwnerState as D, ThemeTypographyVariants as Dt, ComponentVariant as E, ThemeTransitions as Et, LayoutPanel as F, between as Ft, PressableOwnerState as G, letterSpacings as Gt, OpenScale as H, fonts as Ht, LayoutPanels as I, borderWidths as It, ScrollAreaOwnerState as J, only as Jt, RangeInputOwnerState as K, lineHeights as Kt, LayoutSpace as L, breakpoints as Lt, LayoutContent as M, TypographyVariantStyle as Mt, LayoutEntry as N, avatar as Nt, DefaultBreakpoints as O, ThemeZOrder as Ot, LayoutLength as P, baseTheme as Pt, TabPanelOwnerState as Q, transitions as Qt, MenuItemOwnerState as R, containerQueries as Rt, ChipOwnerState as S, ThemeSwitch as St, ComponentStyle as T, ThemeTransitionEasing as Tt, PaletteColor as U, icon as Ut, NumberInputOwnerState as V, fontWeights as Vt, PaletteEntry as W, layout as Wt, SnackbarOwnerState as X, sizes as Xt, SizeEntry as Y, radii as Yt, TabOwnerState as Z, space as Zt, ButtonVariants as _, ViewBorderWidthToken as _n, ThemeRadii as _t, ThemeCustomizationOptions as a, BreakpointHelpers as an, ThemeBorder as at, CardSlotIconProps as b, ThemeSkeleton as bt, AccordionOwnerState as c, PaperElevation as cn, ThemeComponents as ct, AutocompleteOwnerState as d, FlexProps as dn, ThemeFonts as dt, up as en, TabsOwnerState as et, BadgeOwnerState as f, GapToken as fn, ThemeIconSizes as ft, ButtonOwnerState as g, ViewBorderRadiusToken as gn, ThemePalette as gt, BreakpointOverrides as h, ViewBorderColorToken as hn, ThemeLineHeights as ht, props as i, createTheme as in, ThemeBackground as it, LayoutBars as j, TypographyVariant as jt, FabMenuOwnerState as k, TooltipOwnerState as kt, AccordionSummaryOwnerState as l, PaperProps as ln, ThemeDefaults as lt, BreakpointKey as m, ViewBackgroundToken as mn, ThemeLetterSpacings as mt, css as n, DeepPartial as nn, Theme as nt, styled as o, withBreakpointHelpers as on, ThemeBorderWidths as ot, BreadcrumbsOwnerState as p, View as pn, ThemeLayout as pt, RatingOwnerState as q, not as qt, keyframes as r, ThemeOverride as rn, ThemeAvatarSizes as rt, AccordionGroupOwnerState as s, Paper as sn, ThemeBreakpoints as st, createShouldForwardProp as t, zOrder as tn, TabsVariants as tt, AlertOwnerState as u, Flex as un, ThemeFontWeights as ut, CSSObject$1 as v, ViewColorToken as vn, ThemeShadow as vt, ComponentConfig as w, ThemeTransitionDuration as wt, CardSlotTypographyProps as x, ThemeSpace as xt, CardOwnerState as y, ViewProps as yn, ThemeSizes as yt, MenuListOwnerState as z, down as zt };

package/dist/{index-DYF8sRE-.d.cts → index-RaDENVX_.d.cts}

@@ -1,8 +1,7 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { n as IconProps, r as IconName } from "./index-Dv_fk1_F.cjs";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { n as IconProps, r as IconName } from "./index-CAt0-L4i.cjs";
 import { ButtonHTMLAttributes } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Table/TableSortLabel/TableSortLabel.d.ts
 type TableSortLabelDirection = 'asc' | 'desc';
 interface TableSortLabelProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, SpaceProps<Theme> {
   /** Marks the currently-sorted column - shows the icon fully opaque. Default: `false`. */
@@ -21,5 +20,4 @@ interface TableSortLabelProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
   iconProps?: Omit<IconProps, 'name'>;
 }
 declare function TableSortLabel({ isActive, direction, shouldHideSortIcon, iconName, iconProps, type, children, ...rest }: Readonly<TableSortLabelProps>): import("react").JSX.Element;
-//#endregion
 export { TableSortLabelDirection as n, TableSortLabelProps as r, TableSortLabel as t };

package/dist/{index-bpnLB_4K.d.mts → index-SotXsXXb.d.mts}

@@ -1,10 +1,9 @@
-import { U as TabsVariants, W as Theme } from "./index-CJhK7JND.mjs";
-import "./index-h4dYtVrp.mjs";
-import { t as TabValue } from "./TabsContext-Dn2kqUwr.mjs";
-import { n as TabScrollButtonProps } from "./index-CE5JG1us.mjs";
+import { nt as Theme, tt as TabsVariants } from "./index-CR8qkP8U.mjs";
+import "./index-CF_pl72E.mjs";
+import { t as TabValue } from "./TabsContext-0ZtedNyH.mjs";
+import { n as TabScrollButtonProps } from "./index-C_J58B_n.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ComponentType, ReactNode, Ref } from "react";
-//#region src/Tabs/Tabs/Tabs.d.ts
 type TabsVariant = keyof TabsVariants;
 type TabsOrientation = 'horizontal' | 'vertical';
 /** What the row does when its tabs don't fit: scroll, list the rest in a menu, or nothing. */
@@ -29,11 +28,19 @@ interface TabsProps extends SpaceProps<Theme> {
   onChange?: (value: TabValue) => void;
   /** Fired with a closable tab's value when its close button, a middle click or Delete closes it. Removing the tab, and picking the next selection, are the app's. */
   onTabClose?: (value: TabValue) => void;
+  /**
+   * Names each closable tab's close button for assistive technology - and the one in the overflow
+   * menu - by its `closeLabel`, so it is a button a screen reader finds and presses by name, still
+   * out of the tab order. It is a sibling of the tab, not inside it, so a tablist of tabs and their
+   * close buttons is read as one. Without it, the button is the pointer's alone and Delete closes
+   * the focused tab. Default: `false`.
+   */
+  shouldAnnounceClose?: boolean;
   /** `'nav'` makes it a navigation of links or buttons (`aria-current="page"`) rather than a `tablist`. Default: `'div'`. */
   as?: 'div' | 'nav';
   /** Default: `'horizontal'`. */
   orientation?: TabsOrientation;
-  /** The look: an indicator under the selected tab, or the selected tab boxed. Default: `'underline'`, overridable via `theme.components.Tabs.defaultProps`. */
+  /** The look: an indicator under the selected tab, the selected tab boxed, or `'tonal'` - the tabs in a rounded container, the selected one a tinted pill. Default: `'underline'`, overridable via `theme.components.Tabs.defaultProps`. */
   variant?: TabsVariant;
   /** The indicator's or outline's color - resolves to `theme.palette[color]`. Default: `'primary'`. */
   color?: keyof Theme['palette'];
@@ -93,6 +100,5 @@ interface TabsProps extends SpaceProps<Theme> {
  * navigation, its current tab marked `aria-current="page"`. Content of the row's own sits
  * before and after the tabs.
  */
-declare function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, as, orientation, variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth, isCentered, shouldSelectOnFocus, overflowBehavior, overflowLabel, scrollButtons, shouldShowScrollButtonsOnMobile, hasVisibleScrollbar, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, id, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TabsProps>): import("react").JSX.Element;
-//#endregion
+declare function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, shouldAnnounceClose, as, orientation, variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth, isCentered, shouldSelectOnFocus, overflowBehavior, overflowLabel, scrollButtons, shouldShowScrollButtonsOnMobile, hasVisibleScrollbar, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, id, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TabsProps>): import("react").JSX.Element;
 export { TabsProps as a, TabsOverflowBehavior as i, TabsActions as n, TabsScrollButtons as o, TabsOrientation as r, TabsVariant as s, Tabs as t };

package/dist/{index-ByYxVl9O.d.mts → index-UiyZAKID.d.mts}

@@ -1,13 +1,10 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { t as TableCellPadding } from "./TableContext-DhuRf6Wy.mjs";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { t as TableCellPadding } from "./TableContext-0hifLOKH.mjs";
 import { BorderProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 import { ElementType, ThHTMLAttributes } from "react";
-//#region src/Table/TableSectionContext.d.ts
 /** The table section a cell lives in - drives `TableCell`'s th/td element resolution. */
 type TableSection = 'head' | 'body' | 'footer';
 declare const TableSectionContext: import("react").Context<TableSection | undefined>;
-//#endregion
-//#region src/Table/TableCell/TableCell.d.ts
 /** Cell type - inherited from the enclosing section, overridable per cell. */
 type TableCellVariant = TableSection;
 type TableCellAlign = 'left' | 'right' | 'center' | 'justify' | 'inherit';
@@ -43,5 +40,4 @@ interface TableCellProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'c
   as?: ElementType;
 }
 declare function TableCell({ variant, align, size, cellPadding, sortDirection, hasEllipsis, scope, as, children, ...rest }: Readonly<TableCellProps>): import("react").JSX.Element;
-//#endregion
 export { TableCellColorToken as a, TableCellVariant as c, TableCellBorderColorToken as i, TableSection as l, TableCellAlign as n, TableCellProps as o, TableCellBackgroundToken as r, TableCellSortDirection as s, TableCell as t, TableSectionContext as u };

package/dist/index-UloRwym_.d.cts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+interface PortalProps {
+  /** Content to render into the container. */
+  children: ReactNode;
+  /** Target node, or a function returning one. Defaults to `document.body`. */
+  container?: HTMLElement | (() => HTMLElement | null) | null;
+}
+/**
+ * Renders its children into a DOM node outside the parent hierarchy (the document
+ * body by default). Resolves the container synchronously during render, so the
+ * portaled content mounts in the same commit - consumers like Modal can rely on
+ * their root ref being attached before their effects run. Renders nothing during
+ * server rendering.
+ */
+declare function Portal({ children, container }: Readonly<PortalProps>): import("react").ReactPortal | null;
+export { PortalProps as n, Portal as t };

package/dist/index-UloRwym_.d.mts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+interface PortalProps {
+  /** Content to render into the container. */
+  children: ReactNode;
+  /** Target node, or a function returning one. Defaults to `document.body`. */
+  container?: HTMLElement | (() => HTMLElement | null) | null;
+}
+/**
+ * Renders its children into a DOM node outside the parent hierarchy (the document
+ * body by default). Resolves the container synchronously during render, so the
+ * portaled content mounts in the same commit - consumers like Modal can rely on
+ * their root ref being attached before their effects run. Renders nothing during
+ * server rendering.
+ */
+declare function Portal({ children, container }: Readonly<PortalProps>): import("react").ReactPortal | null;
+export { PortalProps as n, Portal as t };

package/dist/{index-BrgwkY6z.d.mts → index-hoHPfsc1.d.cts}

@@ -1,8 +1,7 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-CG_1uPrD.mjs";
-import { SpaceProps } from "@soroush.tech/styled-system";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-BzQze7eY.cjs";
 import { ElementType, HTMLAttributes } from "react";
-//#region src/ButtonGroup/ButtonGroup.d.ts
+import { SpaceProps } from "@soroush.tech/styled-system";
 type ButtonGroupOrientation = 'horizontal' | 'vertical';
 type ButtonGroupRadius = keyof Theme['radii'];
 interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, SpaceProps<Theme> {
@@ -28,8 +27,6 @@ interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
  * `ButtonGroupContext` (explicit props on a child win).
  */
 declare function ButtonGroup({ variant, color, size, orientation, borderRadius, disabled, fullWidth, as, children, ...rest }: Readonly<ButtonGroupProps>): import("react").JSX.Element;
-//#endregion
-//#region src/ButtonGroup/ButtonGroupContext.d.ts
 /** Group-wide defaults provided by `ButtonGroup` and consumed by `Button` (explicit props win). */
 interface ButtonGroupContextValue {
   variant?: ButtonVariant;
@@ -39,5 +36,4 @@ interface ButtonGroupContextValue {
   fullWidth?: boolean;
 }
 declare const ButtonGroupContext: import("react").Context<ButtonGroupContextValue>;
-//#endregion
 export { ButtonGroupProps as a, ButtonGroupOrientation as i, ButtonGroupContextValue as n, ButtonGroupRadius as o, ButtonGroup as r, ButtonGroupContext as t };

package/dist/{index-CQfJZADG.d.cts → index-tOrd12AJ.d.mts}

@@ -1,8 +1,7 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-DAwcmIjN.cjs";
-import { ElementType, HTMLAttributes } from "react";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { n as ButtonColor, o as ButtonSize, s as ButtonVariant } from "./index-BChRNCld.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
-//#region src/ButtonGroup/ButtonGroup.d.ts
+import { ElementType, HTMLAttributes } from "react";
 type ButtonGroupOrientation = 'horizontal' | 'vertical';
 type ButtonGroupRadius = keyof Theme['radii'];
 interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, SpaceProps<Theme> {
@@ -28,8 +27,6 @@ interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
  * `ButtonGroupContext` (explicit props on a child win).
  */
 declare function ButtonGroup({ variant, color, size, orientation, borderRadius, disabled, fullWidth, as, children, ...rest }: Readonly<ButtonGroupProps>): import("react").JSX.Element;
-//#endregion
-//#region src/ButtonGroup/ButtonGroupContext.d.ts
 /** Group-wide defaults provided by `ButtonGroup` and consumed by `Button` (explicit props win). */
 interface ButtonGroupContextValue {
   variant?: ButtonVariant;
@@ -39,5 +36,4 @@ interface ButtonGroupContextValue {
   fullWidth?: boolean;
 }
 declare const ButtonGroupContext: import("react").Context<ButtonGroupContextValue>;
-//#endregion
 export { ButtonGroupProps as a, ButtonGroupOrientation as i, ButtonGroupContextValue as n, ButtonGroupRadius as o, ButtonGroup as r, ButtonGroupContext as t };

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 let _emotion_react = require("@emotion/react");
 Object.defineProperty(exports, "createShouldForwardProp", {

package/dist/index.d.cts

@@ -1,3 +1,3 @@
-import { P as PaletteColor, W as Theme, a as ThemeCustomizationOptions, f as CSSObject, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-DJ0f69wh.cjs";
+import { U as PaletteColor, a as ThemeCustomizationOptions, i as props, n as css, nt as Theme, o as styled, r as keyframes, t as createShouldForwardProp, v as CSSObject } from "./index-Lsm4v8fB.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,3 +1,3 @@
-import { P as PaletteColor, W as Theme, a as ThemeCustomizationOptions, f as CSSObject, i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./index-CJhK7JND.mjs";
+import { U as PaletteColor, a as ThemeCustomizationOptions, i as props, n as css, nt as Theme, o as styled, r as keyframes, t as createShouldForwardProp, v as CSSObject } from "./index-CR8qkP8U.mjs";
 export * from "@soroush.tech/styled-system";
 export { type CSSObject, type PaletteColor, type Theme, type ThemeCustomizationOptions, createShouldForwardProp, css, keyframes, props, styled };

package/dist/index.mjs

@@ -1,3 +1,2 @@
-import { i as props, n as css, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+export { t as createShouldForwardProp, n as css, r as keyframes, i as props, o as styled } from "./src-B-rNjHIL.mjs";
 export * from "@soroush.tech/styled-system";
-export { createShouldForwardProp, css, keyframes, props, styled };

package/dist/inputVariantStyles-DCGRUY9c.mjs

@@ -0,0 +1,42 @@
+import { a as src_exports } from "./src-B-rNjHIL.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { variant } from "@soroush.tech/styled-system";
+// src/utils/inputStyles.ts
+/** The least width of a field that does not fill its row: `theme.defaults.inputMinWidth`, else `'12rem'`. */
+const getInputMinWidth = (theme) => themeDefault(theme, "inputMinWidth", "12rem");
+/**
+* The keyboard focus ring of every input - the one the border takes on focus: the error color
+* while it is in error, else the field's own color.
+*/
+const getFocusRing = (theme, color, isError = false) => {
+	return {
+		outline: `2px solid ${(0, src_exports.get)(theme, `palette.${isError ? "error" : color}.main`)}`,
+		outlineOffset: "2px"
+	};
+};
+// src/utils/inputVariantStyles.ts
+const inputVariantStyles = variant({
+	prop: "variant",
+	variants: {
+		outlined: {
+			borderRadius: "sq",
+			borderWidth: "thin",
+			borderStyle: "solid"
+		},
+		default: {
+			borderRadius: "sq",
+			borderStyle: "none"
+		},
+		underline: {
+			borderRadius: "sq",
+			borderStyle: "none",
+			borderBottomWidth: "thin",
+			borderBottomStyle: "solid"
+		},
+		text: {
+			borderRadius: "sq",
+			borderStyle: "none"
+		}
+	}
+});
+export { getFocusRing as n, getInputMinWidth as r, inputVariantStyles as t };