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

package/dist/{index-Bx0-6yeX.d.mts → index-BC9S8Fpr.d.cts}

@@ -1,6 +1,5 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
 import { KeyboardEvent, MouseEvent, ReactNode, Ref, RefCallback, SyntheticEvent } from "react";
-//#region src/Modal/useModal.d.ts
 type ModalCloseReason = 'escapeKey' | 'backdropClick';
 type EventHandlers = Record<string, ((event: SyntheticEvent) => void) | undefined>;
 interface UseModalParameters {
@@ -25,8 +24,6 @@ interface UseModalReturnValue {
   isTopModal: () => boolean;
 }
 declare function useModal(parameters: UseModalParameters): UseModalReturnValue;
-//#endregion
-//#region src/Modal/Modal.d.ts
 type ModalScroll = 'paper' | 'body';
 interface ModalProps {
   /** If true, the modal is shown. */
@@ -66,8 +63,6 @@ interface ModalProps {
  * higher-level overlays such as Drawer.
  */
 declare function Modal({ isOpen, children, onClose, hasBackdrop, shouldKeepMounted, shouldUsePortal, portalContainer, shouldLockScroll, disableAriaHidden, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus, scroll, layer }: Readonly<ModalProps>): import("react").JSX.Element | null;
-//#endregion
-//#region src/Modal/ModalManager.d.ts
 /** A modal tracked by the manager: its portal mount node and its root element. */
 interface ManagedModal {
   mount: Element;
@@ -93,5 +88,4 @@ declare class ModalManager {
   remove(modal: ManagedModal, ariaHiddenState?: boolean): number;
   isTopModal(modal: ManagedModal): boolean;
 }
-//#endregion
 export { hideFromAria as a, ModalScroll as c, UseModalReturnValue as d, useModal as f, exposeToAria as i, ModalCloseReason as l, ManagedModalProps as n, Modal as o, ModalManager as r, ModalProps as s, ManagedModal as t, UseModalParameters as u };

package/dist/{index-CG_1uPrD.d.mts → index-BChRNCld.d.mts}

@@ -1,7 +1,6 @@
-import { P as PaletteColor, W as Theme, d as ButtonVariants } from "./index-CJhK7JND.mjs";
+import { U as PaletteColor, _ as ButtonVariants, nt as Theme } from "./index-CR8qkP8U.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;
 type ButtonColor = PaletteColor;
@@ -44,6 +43,5 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'col
   /** Anchor `rel` - only meaningful when `href` is set. */
   rel?: string;
 }
-declare function Button({ variant, color, size, shape, gap, fontWeight, letterSpacing, startIcon, endIcon, fullWidth, loading, loadingIndicator, loadingPosition, children, disabled, href, ...rest }: Readonly<ButtonProps>): import("react").JSX.Element;
-//#endregion
+declare function Button({ variant, color, size, shape, gap, fontWeight, letterSpacing, startIcon, endIcon, fullWidth, loading, loadingIndicator, loadingPosition, children, disabled, href, target, rel, ...rest }: Readonly<ButtonProps>): import("react").JSX.Element;
 export { ButtonShape as a, GapToken as c, ButtonProps as i, ButtonColor as n, ButtonSize as o, ButtonLoadingPosition as r, ButtonVariant as s, Button as t };

package/dist/index-BV5BvdeN.d.mts

@@ -0,0 +1,30 @@
+import { i as ButtonProps } from "./index-BChRNCld.mjs";
+import { ReactNode, Ref } from "react";
+type FabVariant = 'circular' | 'extended';
+type FabButtonProps = Omit<ButtonProps, 'variant' | 'shape' | 'endIcon' | 'loading' | 'loadingIndicator' | 'loadingPosition' | 'fullWidth' | 'href' | 'target' | 'rel' | 'gap'>;
+type FabProps = FabButtonProps & {
+  /** A circle, or a pill with a label. Default: `'circular'`. */
+  variant?: FabVariant;
+  /** An extended fab's icon, before the label. A circular one is its content. */
+  startIcon?: ReactNode;
+  /** The button element, for a trigger that places something against it or moves its focus. */
+  ref?: Ref<HTMLButtonElement>;
+  /**
+   * Draws an extended fab as its icon alone - a circle - and back again, the label moving in and out
+   * over `theme.transitions`. The label stays in the tree, so the fab keeps its name. A circular
+   * fab ignores it. Default: `false`.
+   */
+  isCollapsed?: boolean;
+};
+/**
+ * @description A floating action button: the one main action of a page, circular - its icon - or
+ * extended, a pill with a label. It is a `Button`, with its focus ring, press state and disabled
+ * behavior, raised on a shadow that lifts on hover and moves with `theme.transitions` (and not at
+ * all under `prefers-reduced-motion`). Its touch target is at least `theme.space[6]` square however
+ * small the fab. An extended fab keeps its label on one line, with the icon a `theme.space[1.5]`
+ * before it, and `isCollapsed` draws it as a circle - the label moving out over `theme.transitions`. Margin and padding are `theme.space` keys, as everywhere. Where it floats is the
+ * page's: no position is built in. A fab with no text - a circular one - must be named:
+ * `aria-label` or `aria-labelledby`.
+ */
+declare function Fab({ variant: variantProp, color, size, startIcon, isCollapsed, children, ...rest }: Readonly<FabProps>): import("react").JSX.Element;
+export { FabProps as n, FabVariant as r, Fab as t };

package/dist/{index-BHKgEOZJ.d.cts → index-BXlBouWV.d.mts}

@@ -1,8 +1,7 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-ChXeKJCk.cjs";
-import { HTMLAttributes } from "react";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-CKywwIep.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Pagination/Pagination.d.ts
+import { HTMLAttributes } from "react";
 type PaginationColor = PaginationItemColor;
 type PaginationVariant = PaginationItemVariant;
 type PaginationShape = PaginationItemShape;
@@ -20,5 +19,4 @@ interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'color' | 'o
   getItemAriaLabel?: (type: PaginationItemType, page: number | null, isSelected: boolean) => string;
 }
 declare function Pagination({ count, page, defaultPage, siblingCount, boundaryCount, disabled, shouldShowFirstButton, shouldShowLastButton, shouldHidePrevButton, shouldHideNextButton, onChange, color, variant, shape, size, getItemAriaLabel, 'aria-label': ariaLabel, ...rest }: Readonly<PaginationProps>): import("react").JSX.Element;
-//#endregion
 export { PaginationSize as a, PaginationShape as i, PaginationColor as n, PaginationVariant as o, PaginationProps as r, Pagination as t };

package/dist/{index-WHFhjfgy.d.cts → index-Bo45R0nD.d.cts}

@@ -1,10 +1,9 @@
-import { U as TabsVariants, W as Theme } from "./index-DJ0f69wh.cjs";
-import "./index-DchHf5cF.cjs";
-import { t as TabValue } from "./TabsContext-B_XHbjcS.cjs";
-import { n as TabScrollButtonProps } from "./index-KnXhlKMr.cjs";
+import { nt as Theme, tt as TabsVariants } from "./index-Lsm4v8fB.cjs";
+import "./index-CfB7OceY.cjs";
+import { t as TabValue } from "./TabsContext-MpMEEVuB.cjs";
+import { n as TabScrollButtonProps } from "./index-CQeTS_zL.cjs";
 import { ComponentType, ReactNode, Ref } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
-//#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-BuAKhHMs.d.cts

@@ -0,0 +1,30 @@
+import { i as ButtonProps } from "./index-BzQze7eY.cjs";
+import { ReactNode, Ref } from "react";
+type FabVariant = 'circular' | 'extended';
+type FabButtonProps = Omit<ButtonProps, 'variant' | 'shape' | 'endIcon' | 'loading' | 'loadingIndicator' | 'loadingPosition' | 'fullWidth' | 'href' | 'target' | 'rel' | 'gap'>;
+type FabProps = FabButtonProps & {
+  /** A circle, or a pill with a label. Default: `'circular'`. */
+  variant?: FabVariant;
+  /** An extended fab's icon, before the label. A circular one is its content. */
+  startIcon?: ReactNode;
+  /** The button element, for a trigger that places something against it or moves its focus. */
+  ref?: Ref<HTMLButtonElement>;
+  /**
+   * Draws an extended fab as its icon alone - a circle - and back again, the label moving in and out
+   * over `theme.transitions`. The label stays in the tree, so the fab keeps its name. A circular
+   * fab ignores it. Default: `false`.
+   */
+  isCollapsed?: boolean;
+};
+/**
+ * @description A floating action button: the one main action of a page, circular - its icon - or
+ * extended, a pill with a label. It is a `Button`, with its focus ring, press state and disabled
+ * behavior, raised on a shadow that lifts on hover and moves with `theme.transitions` (and not at
+ * all under `prefers-reduced-motion`). Its touch target is at least `theme.space[6]` square however
+ * small the fab. An extended fab keeps its label on one line, with the icon a `theme.space[1.5]`
+ * before it, and `isCollapsed` draws it as a circle - the label moving out over `theme.transitions`. Margin and padding are `theme.space` keys, as everywhere. Where it floats is the
+ * page's: no position is built in. A fab with no text - a circular one - must be named:
+ * `aria-label` or `aria-labelledby`.
+ */
+declare function Fab({ variant: variantProp, color, size, startIcon, isCollapsed, children, ...rest }: Readonly<FabProps>): import("react").JSX.Element;
+export { FabProps as n, FabVariant as r, Fab as t };

package/dist/{index-B1RFybA_.d.mts → index-Byk1_ms9.d.cts}

@@ -1,7 +1,6 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { t as MenuItemValue } from "./MenuListContext-x-7lH4CH.mjs";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { t as MenuItemValue } from "./MenuListContext-BwgQHUu9.cjs";
 import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
-//#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];
 type MenuItemSize = keyof Theme['sizes'];
 type MenuItemTextColor = keyof Theme['text'];
@@ -46,6 +45,8 @@ interface MenuItemProps {
   startIcon?: ReactNode;
   /** Menu only: the row's keyboard shortcut, shown at its end. A string is also given to the row as `aria-keyshortcuts`. */
   shortcut?: ReactNode;
+  /** Menu only: what a screen reader hears of the row's keys - the `aria-keyshortcuts` form, such as `Control+=` - where it differs from what `shortcut` shows (`Ctrl+=`). Without it, a string `shortcut` is announced as it is. */
+  'aria-keyshortcuts'?: string;
   /** Menu only: why the row is off - its tooltip and accessible description. */
   note?: string;
   /** Menu only: fired when the row is chosen, by a click, Enter or Space. */
@@ -56,6 +57,8 @@ interface MenuItemProps {
   emptyLabel?: ReactNode;
   /** Menu only: a control of the row's own beside it - a close button. It sits in the row's `role="none"` entry, out of the arrow keys and hidden from assistive technology (a menu owns rows alone), so it is the pointer's: give it `tabIndex={-1}`, and the row a key of its own through `MenuList`'s `onKeyDown`. */
   secondaryAction?: ReactNode;
+  /** Menu only: leaves `secondaryAction` in the accessibility tree - a screen reader finds the control by its own name - rather than hidden from it. A menu owns rows alone, so a control beside a row is an exception a tool may report; name it, and keep it out of the tab order. Default: `false`. */
+  shouldAnnounceSecondaryAction?: boolean;
   id?: string;
   className?: string;
   'data-testid'?: string;
@@ -67,6 +70,5 @@ interface MenuItemProps {
  * `<li role="option">` (override via `as`), whose selection, highlight and density props
  * `Select` injects; used on its own it renders a static, styled row.
  */
-declare function MenuItem({ value, children, as, disabled, selected, highlighted, multiple, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, disableGutters, divider, autoFocus, focusVisibleClassName, onSelect, role, startIcon, shortcut, note, onClick, submenu, emptyLabel, secondaryAction, id, className, 'data-testid': dataTestid }: Readonly<MenuItemProps>): import("react").JSX.Element;
-//#endregion
+declare function MenuItem({ value, children, as, disabled, selected, highlighted, multiple, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, disableGutters, divider, autoFocus, focusVisibleClassName, onSelect, role, startIcon, shortcut, 'aria-keyshortcuts': keyShortcuts, note, onClick, submenu, emptyLabel, secondaryAction, shouldAnnounceSecondaryAction, id, className, 'data-testid': dataTestid }: Readonly<MenuItemProps>): import("react").JSX.Element;
 export { MenuItemSize as a, MenuItemRole as i, MenuItemColor as n, MenuItemTextColor as o, MenuItemProps as r, MenuItem as t };

package/dist/{index-DAwcmIjN.d.cts → index-BzQze7eY.d.cts}

@@ -1,7 +1,6 @@
-import { P as PaletteColor, W as Theme, d as ButtonVariants } from "./index-DJ0f69wh.cjs";
+import { U as PaletteColor, _ as ButtonVariants, nt as Theme } from "./index-Lsm4v8fB.cjs";
 import { ButtonHTMLAttributes, ReactNode } from "react";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
-//#region src/Button/Button.d.ts
 /** Augmentable via the `ButtonVariants` interface - style new values through `theme.components.Button.variants`. */
 type ButtonVariant = keyof ButtonVariants;
 type ButtonColor = PaletteColor;
@@ -44,6 +43,5 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'col
   /** Anchor `rel` - only meaningful when `href` is set. */
   rel?: string;
 }
-declare function Button({ variant, color, size, shape, gap, fontWeight, letterSpacing, startIcon, endIcon, fullWidth, loading, loadingIndicator, loadingPosition, children, disabled, href, ...rest }: Readonly<ButtonProps>): import("react").JSX.Element;
-//#endregion
+declare function Button({ variant, color, size, shape, gap, fontWeight, letterSpacing, startIcon, endIcon, fullWidth, loading, loadingIndicator, loadingPosition, children, disabled, href, target, rel, ...rest }: Readonly<ButtonProps>): import("react").JSX.Element;
 export { ButtonShape as a, GapToken as c, ButtonProps as i, ButtonColor as n, ButtonSize as o, ButtonLoadingPosition as r, ButtonVariant as s, Button as t };

package/dist/{index-ClZyaZrR.d.mts → index-C2a-5yop.d.mts}

@@ -1,7 +1,6 @@
-import { W as Theme, ht as TypographyVariant } from "./index-CJhK7JND.mjs";
+import { jt as TypographyVariant, nt as Theme } from "./index-CR8qkP8U.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. */
 type TextColorToken = keyof Theme['text'];
@@ -23,5 +22,4 @@ interface TypographyProps$1 extends Omit<HTMLAttributes<HTMLElement>, 'color'>,
   as?: ElementType;
 }
 declare function Typography({ variant, as, ...rest }: Readonly<TypographyProps$1>): import("react").JSX.Element;
-//#endregion
 export { TypographyProps$1 as a, TypographyAlign as i, TextColorToken as n, Typography as r, BackgroundToken as t };

package/dist/{index-DtYjdBvO.d.cts → index-C2tTbEBS.d.mts}

@@ -1,7 +1,6 @@
-import { a as PaginationItemSize } from "./index-ChXeKJCk.cjs";
-import "./index-BHKgEOZJ.cjs";
+import { a as PaginationItemSize } from "./index-CKywwIep.mjs";
+import "./index-BXlBouWV.mjs";
 import { HTMLAttributes } from "react";
-//#region src/Table/TablePaginationActions/TablePaginationActions.d.ts
 type TablePaginationActionType = 'first' | 'previous' | 'next' | 'last';
 interface TablePaginationActionsProps extends HTMLAttributes<HTMLDivElement> {
   /** Total number of rows; `-1` = unknown (server-side pagination). */
@@ -27,5 +26,4 @@ interface TablePaginationActionsProps extends HTMLAttributes<HTMLDivElement> {
  * `count` / `page` / `rowsPerPage`.
  */
 declare function TablePaginationActions({ count, page, rowsPerPage, onPageChange, getItemAriaLabel, disabled, shouldShowFirstButton, shouldShowLastButton, size: sizeProp, ...rest }: Readonly<TablePaginationActionsProps>): import("react").JSX.Element;
-//#endregion
 export { TablePaginationActions as n, TablePaginationActionsProps as r, TablePaginationActionType as t };

package/dist/{index-CbFaWtjK.d.mts → index-C7EUYyom.d.cts}

@@ -1,7 +1,6 @@
-import { a as PaginationItemSize } from "./index-BGbTuHP9.mjs";
-import "./index-BQWjh4rK.mjs";
+import { a as PaginationItemSize } from "./index-Dxu6Ks2A.cjs";
+import "./index-DBF5n3ey.cjs";
 import { HTMLAttributes } from "react";
-//#region src/Table/TablePaginationActions/TablePaginationActions.d.ts
 type TablePaginationActionType = 'first' | 'previous' | 'next' | 'last';
 interface TablePaginationActionsProps extends HTMLAttributes<HTMLDivElement> {
   /** Total number of rows; `-1` = unknown (server-side pagination). */
@@ -27,5 +26,4 @@ interface TablePaginationActionsProps extends HTMLAttributes<HTMLDivElement> {
  * `count` / `page` / `rowsPerPage`.
  */
 declare function TablePaginationActions({ count, page, rowsPerPage, onPageChange, getItemAriaLabel, disabled, shouldShowFirstButton, shouldShowLastButton, size: sizeProp, ...rest }: Readonly<TablePaginationActionsProps>): import("react").JSX.Element;
-//#endregion
 export { TablePaginationActions as n, TablePaginationActionsProps as r, TablePaginationActionType as t };

package/dist/{index-Dv_fk1_F.d.cts → index-CAt0-L4i.d.cts}

@@ -1,197 +1,85 @@
-import { et as ThemeIconSizes } from "./index-DJ0f69wh.cjs";
-import { n as TextColorToken } from "./index-K5exjvnX.cjs";
+import { ft as ThemeIconSizes } from "./index-Lsm4v8fB.cjs";
+import { n as TextColorToken } from "./index-CGyIuCRh.cjs";
 import { SVGProps } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Icon/icons/AccountTree.d.ts
 declare const SvgAccountTree: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Add.d.ts
 declare const SvgAdd: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/AdsClick.d.ts
+declare const SvgAddCircle: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgAdsClick: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Analytics.d.ts
 declare const SvgAnalytics: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Architecture.d.ts
 declare const SvgArchitecture: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ArrowBack.d.ts
 declare const SvgArrowBack: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ArrowForward.d.ts
 declare const SvgArrowForward: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ArrowUpward.d.ts
 declare const SvgArrowUpward: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Check.d.ts
+declare const SvgArticle: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgCheck: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ChevronLeft.d.ts
+declare const SvgCheckCircle: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgChevronLeft: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ChevronRight.d.ts
 declare const SvgChevronRight: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Checklist.d.ts
 declare const SvgChecklist: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/CloudDone.d.ts
 declare const SvgCloudDone: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Close.d.ts
 declare const SvgClose: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Code.d.ts
 declare const SvgCode: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ContentCopy.d.ts
 declare const SvgContentCopy: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Cookie.d.ts
 declare const SvgCookie: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Database.d.ts
+declare const SvgDarkMode: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgDatabase: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/DesktopWindows.d.ts
 declare const SvgDesktopWindows: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Dns.d.ts
 declare const SvgDns: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/EditNote.d.ts
 declare const SvgEditNote: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ExpandLess.d.ts
+declare const SvgErrorCircle: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgExpandLess: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ExpandMore.d.ts
 declare const SvgExpandMore: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ExternalLink.d.ts
 declare const SvgExternalLink: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/FirstPage.d.ts
 declare const SvgFirstPage: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Folder.d.ts
 declare const SvgFolder: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/FormatListBulleted.d.ts
 declare const SvgFormatListBulleted: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/FormatListNumbered.d.ts
 declare const SvgFormatListNumbered: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/FormatQuote.d.ts
 declare const SvgFormatQuote: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Fullscreen.d.ts
 declare const SvgFullscreen: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/GridView.d.ts
 declare const SvgGridView: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Groups.d.ts
 declare const SvgGroups: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/History.d.ts
 declare const SvgHistory: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Hub.d.ts
+declare const SvgHome: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgHub: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Image.d.ts
 declare const SvgImage: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Language.d.ts
+declare const SvgInfo: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+declare const SvgInventory2: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgLanguage: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/LastPage.d.ts
 declare const SvgLastPage: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Link.d.ts
+declare const SvgLightMode: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgLink: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Lock.d.ts
 declare const SvgLock: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Menu.d.ts
 declare const SvgMenu: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/MoreHoriz.d.ts
+declare const SvgMenuBook: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgMoreHoriz: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Neurology.d.ts
 declare const SvgNeurology: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Psychology.d.ts
+declare const SvgPalette: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgPsychology: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/RebaseEdit.d.ts
 declare const SvgRebaseEdit: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Refresh.d.ts
 declare const SvgRefresh: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Remove.d.ts
 declare const SvgRemove: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Schema.d.ts
 declare const SvgSchema: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Security.d.ts
+declare const SvgSearch: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 declare const SvgSecurity: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/SettingsInputComponent.d.ts
 declare const SvgSettingsInputComponent: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/SmartToy.d.ts
 declare const SvgSmartToy: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Smartphone.d.ts
 declare const SvgSmartphone: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Speed.d.ts
 declare const SvgSpeed: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Stacks.d.ts
 declare const SvgStacks: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Star.d.ts
 declare const SvgStar: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/StarBorder.d.ts
 declare const SvgStarBorder: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Table.d.ts
 declare const SvgTable: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Terminal.d.ts
 declare const SvgTerminal: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Visibility.d.ts
 declare const SvgVisibility: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/Warning.d.ts
 declare const SvgWarning: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/WebAsset.d.ts
 declare const SvgWebAsset: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ZoomIn.d.ts
 declare const SvgZoomIn: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons/ZoomOut.d.ts
 declare const SvgZoomOut: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
-//#endregion
-//#region src/Icon/icons.d.ts
 /** Registry of available icons, keyed by their asset file name. */
 declare const icons: {
   readonly account_tree: typeof SvgAccountTree;
+  readonly add_circle: typeof SvgAddCircle;
   readonly add: typeof SvgAdd;
   readonly ads_click: typeof SvgAdsClick;
   readonly analytics: typeof SvgAnalytics;
@@ -199,7 +87,9 @@ declare const icons: {
   readonly arrow_back: typeof SvgArrowBack;
   readonly arrow_forward: typeof SvgArrowForward;
   readonly arrow_upward: typeof SvgArrowUpward;
+  readonly article: typeof SvgArticle;
   readonly check: typeof SvgCheck;
+  readonly check_circle: typeof SvgCheckCircle;
   readonly chevron_left: typeof SvgChevronLeft;
   readonly chevron_right: typeof SvgChevronRight;
   readonly checklist: typeof SvgChecklist;
@@ -208,10 +98,12 @@ declare const icons: {
   readonly code: typeof SvgCode;
   readonly content_copy: typeof SvgContentCopy;
   readonly cookie: typeof SvgCookie;
+  readonly dark_mode: typeof SvgDarkMode;
   readonly database: typeof SvgDatabase;
   readonly desktop_windows: typeof SvgDesktopWindows;
   readonly dns: typeof SvgDns;
   readonly edit_note: typeof SvgEditNote;
+  readonly error: typeof SvgErrorCircle;
   readonly expand_less: typeof SvgExpandLess;
   readonly expand_more: typeof SvgExpandMore;
   readonly external_link: typeof SvgExternalLink;
@@ -224,20 +116,27 @@ declare const icons: {
   readonly grid_view: typeof SvgGridView;
   readonly groups: typeof SvgGroups;
   readonly history: typeof SvgHistory;
+  readonly home: typeof SvgHome;
   readonly hub: typeof SvgHub;
   readonly image: typeof SvgImage;
+  readonly info: typeof SvgInfo;
+  readonly inventory_2: typeof SvgInventory2;
   readonly language: typeof SvgLanguage;
   readonly last_page: typeof SvgLastPage;
+  readonly light_mode: typeof SvgLightMode;
   readonly link: typeof SvgLink;
   readonly lock: typeof SvgLock;
+  readonly menu_book: typeof SvgMenuBook;
   readonly menu: typeof SvgMenu;
   readonly more_horiz: typeof SvgMoreHoriz;
   readonly neurology: typeof SvgNeurology;
+  readonly palette: typeof SvgPalette;
   readonly psychology: typeof SvgPsychology;
   readonly rebase_edit: typeof SvgRebaseEdit;
   readonly refresh: typeof SvgRefresh;
   readonly remove: typeof SvgRemove;
   readonly schema: typeof SvgSchema;
+  readonly search: typeof SvgSearch;
   readonly security: typeof SvgSecurity;
   readonly settings_input_component: typeof SvgSettingsInputComponent;
   readonly smart_toy: typeof SvgSmartToy;
@@ -256,8 +155,6 @@ declare const icons: {
 };
 /** Valid values for the Icon `name` prop - derived from the registry keys. */
 type IconName = keyof typeof icons;
-//#endregion
-//#region src/Icon/Icon.d.ts
 interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'color' | 'ref' | 'width' | 'height' | 'display' | 'overflow'>, LayoutProps, SpaceProps {
   /** Registry key of the icon to render. */
   name: IconName;
@@ -270,5 +167,4 @@ interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'color' | 'ref' | 'wid
   size?: keyof ThemeIconSizes | (string & {}) | number;
 }
 declare function Icon({ name, color, size, ...rest }: Readonly<IconProps>): import("react").JSX.Element;
-//#endregion
 export { icons as i, IconProps as n, IconName as r, Icon as t };

package/dist/{index-h4dYtVrp.d.mts → index-CF_pl72E.d.mts}

@@ -1,6 +1,5 @@
-import { W as Theme, X as ThemeComponents, Z as ThemeDefaults, tt as ThemeLayout } from "./index-CJhK7JND.mjs";
+import { ct as ThemeComponents, lt as ThemeDefaults, nt as Theme, pt as ThemeLayout } from "./index-CR8qkP8U.mjs";
 import { ComponentType, ReactNode } from "react";
-//#region src/theme/ThemeProvider.d.ts
 interface ThemeProviderProps {
   children: ReactNode;
   /**
@@ -16,8 +15,6 @@ interface ThemeProviderProps {
   defaults?: ThemeDefaults;
 }
 declare function ThemeProvider({ children, theme, defaults }: Readonly<ThemeProviderProps>): import("react").JSX.Element;
-//#endregion
-//#region src/theme/LayoutProvider.d.ts
 interface LayoutProviderProps {
   /**
    * The page's layout: `theme.layout`'s shape - `content`, `panels`, `bars` per breakpoint -
@@ -34,8 +31,6 @@ interface LayoutProviderProps {
  * switching and every other token stay the app theme's. Nested providers stack.
  */
 declare function LayoutProvider({ layout, children }: Readonly<LayoutProviderProps>): import("react").JSX.Element;
-//#endregion
-//#region src/theme/utils/themeDefault.d.ts
 /**
  * Resolves a component's default token/variant key: the theme's optional
  * `defaults` override wins, otherwise the component's literal `fallback`.
@@ -44,15 +39,11 @@ declare function LayoutProvider({ layout, children }: Readonly<LayoutProviderPro
  * yet overridable per theme or via `ThemeProvider`'s `defaults` prop.
  */
 declare const themeDefault: <K extends keyof ThemeDefaults>(theme: Theme, key: K, fallback: NonNullable<ThemeDefaults[K]>) => NonNullable<ThemeDefaults[K]>;
-//#endregion
-//#region src/theme/hooks/useTheme.d.ts
 /**
  * The active theme, typed as this package's own `Theme` - Emotion is an
  * internal implementation detail, never part of the public type surface.
  */
 declare const useTheme: () => Theme;
-//#endregion
-//#region src/theme/hooks/useDefaultProps.d.ts
 type DefaultPropsOf<N extends keyof ThemeComponents> = NonNullable<NonNullable<ThemeComponents[N]>['defaultProps']>;
 /**
  * The theme-contributed default prop values for a component
@@ -62,10 +53,7 @@ type DefaultPropsOf<N extends keyof ThemeComponents> = NonNullable<NonNullable<T
  * explicit prop → group context → `useDefaultProps` → `theme.defaults.*` → literal fallback.
  */
 declare function useDefaultProps<N extends keyof ThemeComponents>(name: N): DefaultPropsOf<N>;
-//#endregion
-//#region src/theme/hoc/withTheme.d.ts
 declare function withTheme<P extends object>(WrappedComponent: ComponentType<P & {
   theme: Theme;
 }>): (props: P) => import("react").JSX.Element;
-//#endregion
 export { LayoutProvider as a, themeDefault as i, useDefaultProps as n, LayoutProviderProps as o, useTheme as r, ThemeProvider as s, withTheme as t };

package/dist/{index-K5exjvnX.d.cts → index-CGyIuCRh.d.cts}

@@ -1,7 +1,6 @@
-import { W as Theme, ht as TypographyVariant } from "./index-DJ0f69wh.cjs";
+import { jt as TypographyVariant, nt as Theme } from "./index-Lsm4v8fB.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. */
 type TextColorToken = keyof Theme['text'];
@@ -23,5 +22,4 @@ interface TypographyProps$1 extends Omit<HTMLAttributes<HTMLElement>, 'color'>,
   as?: ElementType;
 }
 declare function Typography({ variant, as, ...rest }: Readonly<TypographyProps$1>): import("react").JSX.Element;
-//#endregion
 export { TypographyProps$1 as a, TypographyAlign as i, TextColorToken as n, Typography as r, BackgroundToken as t };