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

package/dist/engine.d.cts

@@ -1,6 +1,6 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { CacheProvider, Interpolation } from "@emotion/react";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { ComponentType, RefAttributes } from "react";
+import { CacheProvider, Interpolation } from "@emotion/react";
 //#region src/theme/emotion.d.ts
 /** `Global`, retyped against this package's own `Theme` (see `styled.ts`'s `StyledTags`). */
 declare const Global: ComponentType<{

package/dist/engine.d.mts

@@ -1,4 +1,4 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
 import { CacheProvider, Interpolation } from "@emotion/react";
 import { ComponentType, RefAttributes } from "react";
 //#region src/theme/emotion.d.ts

package/dist/getAnchorRel-CySI28HJ.mjs

@@ -0,0 +1,8 @@
+//#region src/utils/getAnchorRel.ts
+/**
+* The `rel` of an anchor: as given, else `noopener noreferrer` when it opens a new tab, so the
+* page it opens can't reach back to this one through `window.opener`.
+*/
+const getAnchorRel = (target, rel) => target === "_blank" && rel === void 0 ? "noopener noreferrer" : rel;
+//#endregion
+export { getAnchorRel as t };

package/dist/getAnchorRel-_vtAXC-4.cjs

@@ -0,0 +1,13 @@
+//#region src/utils/getAnchorRel.ts
+/**
+* The `rel` of an anchor: as given, else `noopener noreferrer` when it opens a new tab, so the
+* page it opens can't reach back to this one through `window.opener`.
+*/
+const getAnchorRel = (target, rel) => target === "_blank" && rel === void 0 ? "noopener noreferrer" : rel;
+//#endregion
+Object.defineProperty(exports, "getAnchorRel", {
+	enumerable: true,
+	get: function() {
+		return getAnchorRel;
+	}
+});

package/dist/getShapeRadius-B9ytqDSk.d.cts

@@ -0,0 +1,5 @@
+//#region src/utils/getShapeRadius.d.ts
+/** The corner shapes of a control or a surface: square, rounded by a radius, or a full pill. */
+type Shape = 'square' | 'rounded' | 'pill';
+//#endregion
+export { Shape as t };

package/dist/getShapeRadius-B9ytqDSk.d.mts

@@ -0,0 +1,5 @@
+//#region src/utils/getShapeRadius.d.ts
+/** The corner shapes of a control or a surface: square, rounded by a radius, or a full pill. */
+type Shape = 'square' | 'rounded' | 'pill';
+//#endregion
+export { Shape as t };

package/dist/getShapeRadius-sY6-AGP4.mjs

@@ -0,0 +1,12 @@
+//#region src/utils/getShapeRadius.ts
+/**
+* The corner radius of a shape. Only `rounded` takes a radius - `rounded` is the one the
+* `borderRadius` prop and the theme's radii set; `square` is none and `pill` is a full round.
+*/
+const getShapeRadius = (shape, rounded) => {
+	if (shape === "square") return 0;
+	if (shape === "pill") return "9999px";
+	return rounded;
+};
+//#endregion
+export { getShapeRadius as t };

package/dist/getShapeRadius-vXmXGV3f.cjs

@@ -0,0 +1,17 @@
+//#region src/utils/getShapeRadius.ts
+/**
+* The corner radius of a shape. Only `rounded` takes a radius - `rounded` is the one the
+* `borderRadius` prop and the theme's radii set; `square` is none and `pill` is a full round.
+*/
+const getShapeRadius = (shape, rounded) => {
+	if (shape === "square") return 0;
+	if (shape === "pill") return "9999px";
+	return rounded;
+};
+//#endregion
+Object.defineProperty(exports, "getShapeRadius", {
+	enumerable: true,
+	get: function() {
+		return getShapeRadius;
+	}
+});

package/dist/getSurfaceRadius-BTUV1E8H.cjs

@@ -0,0 +1,11 @@
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+//#region src/utils/getSurfaceRadius.ts
+/** The corner radius of a surface: the one asked for, else `theme.defaults.surfaceRadius`, else square. */
+const getSurfaceRadius = (theme, borderRadius) => theme.radii[borderRadius ?? require_themeDefault.themeDefault(theme, "surfaceRadius", "sq")];
+//#endregion
+Object.defineProperty(exports, "getSurfaceRadius", {
+	enumerable: true,
+	get: function() {
+		return getSurfaceRadius;
+	}
+});

package/dist/getSurfaceRadius-DTgqIzll.mjs

@@ -0,0 +1,6 @@
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+//#region src/utils/getSurfaceRadius.ts
+/** The corner radius of a surface: the one asked for, else `theme.defaults.surfaceRadius`, else square. */
+const getSurfaceRadius = (theme, borderRadius) => theme.radii[borderRadius ?? themeDefault(theme, "surfaceRadius", "sq")];
+//#endregion
+export { getSurfaceRadius as t };

package/dist/getTooltipOrigins-B_7XXtQq.cjs

@@ -0,0 +1,104 @@
+//#region src/Tooltip/utils/getTooltipOrigins.ts
+const tooltipPlacementValues = [
+	"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"
+];
+const opposite = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/**
+* The origins `computePopoverPosition` places a tooltip with: its edge against the child's edge on
+* its side, and - for `-start` and `-end` - the two lined up on the same end. `start` is logical:
+* the right edge in a right-to-left page, and `left` and `right` swap there too. The placement
+* flips to the other side on its own where the window has no room.
+*/
+function getTooltipOrigins(placement, isRtl) {
+	const [side, end] = placement.split("-");
+	if (side === "top" || side === "bottom") {
+		let edge = "center";
+		if (end !== void 0) edge = end === "start" !== isRtl ? "left" : "right";
+		return {
+			anchorOrigin: {
+				vertical: side,
+				horizontal: edge
+			},
+			transformOrigin: {
+				vertical: opposite[side],
+				horizontal: edge
+			}
+		};
+	}
+	const toward = isRtl ? opposite[side] : side;
+	let edge = "center";
+	if (end !== void 0) edge = end === "start" ? "top" : "bottom";
+	return {
+		anchorOrigin: {
+			vertical: edge,
+			horizontal: toward
+		},
+		transformOrigin: {
+			vertical: edge,
+			horizontal: opposite[toward]
+		}
+	};
+}
+const AUTO_SIDES = [
+	"top",
+	"bottom",
+	"right",
+	"left"
+];
+/**
+* The fixed placement a placement stands for. `auto` is the side of the child with the most room
+* left once the tooltip is on it - above, below, then beside, on a tie - and `auto-start` and
+* `auto-end` line it up with that end of the side. The window is measured, so a tooltip next to
+* the window edge goes to the other side.
+*/
+function resolveTooltipPlacement(placement, { anchorRect, surfaceSize, viewport, isRtl }) {
+	if (!placement.startsWith("auto")) return placement;
+	const room = {
+		top: anchorRect.top - surfaceSize.height,
+		bottom: viewport.height - anchorRect.bottom - surfaceSize.height,
+		left: anchorRect.left - surfaceSize.width,
+		right: viewport.width - anchorRect.right - surfaceSize.width
+	};
+	const side = AUTO_SIDES.reduce((best, next) => room[next] > room[best] ? next : best, "top");
+	const logical = (side === "left" || side === "right") && isRtl ? opposite[side] : side;
+	const end = placement.split("-")[1];
+	return end ? `${logical}-${end}` : logical;
+}
+//#endregion
+Object.defineProperty(exports, "getTooltipOrigins", {
+	enumerable: true,
+	get: function() {
+		return getTooltipOrigins;
+	}
+});
+Object.defineProperty(exports, "resolveTooltipPlacement", {
+	enumerable: true,
+	get: function() {
+		return resolveTooltipPlacement;
+	}
+});
+Object.defineProperty(exports, "tooltipPlacementValues", {
+	enumerable: true,
+	get: function() {
+		return tooltipPlacementValues;
+	}
+});

package/dist/getTooltipOrigins-CyyIMCF1.mjs

@@ -0,0 +1,87 @@
+//#region src/Tooltip/utils/getTooltipOrigins.ts
+const tooltipPlacementValues = [
+	"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"
+];
+const opposite = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/**
+* The origins `computePopoverPosition` places a tooltip with: its edge against the child's edge on
+* its side, and - for `-start` and `-end` - the two lined up on the same end. `start` is logical:
+* the right edge in a right-to-left page, and `left` and `right` swap there too. The placement
+* flips to the other side on its own where the window has no room.
+*/
+function getTooltipOrigins(placement, isRtl) {
+	const [side, end] = placement.split("-");
+	if (side === "top" || side === "bottom") {
+		let edge = "center";
+		if (end !== void 0) edge = end === "start" !== isRtl ? "left" : "right";
+		return {
+			anchorOrigin: {
+				vertical: side,
+				horizontal: edge
+			},
+			transformOrigin: {
+				vertical: opposite[side],
+				horizontal: edge
+			}
+		};
+	}
+	const toward = isRtl ? opposite[side] : side;
+	let edge = "center";
+	if (end !== void 0) edge = end === "start" ? "top" : "bottom";
+	return {
+		anchorOrigin: {
+			vertical: edge,
+			horizontal: toward
+		},
+		transformOrigin: {
+			vertical: edge,
+			horizontal: opposite[toward]
+		}
+	};
+}
+const AUTO_SIDES = [
+	"top",
+	"bottom",
+	"right",
+	"left"
+];
+/**
+* The fixed placement a placement stands for. `auto` is the side of the child with the most room
+* left once the tooltip is on it - above, below, then beside, on a tie - and `auto-start` and
+* `auto-end` line it up with that end of the side. The window is measured, so a tooltip next to
+* the window edge goes to the other side.
+*/
+function resolveTooltipPlacement(placement, { anchorRect, surfaceSize, viewport, isRtl }) {
+	if (!placement.startsWith("auto")) return placement;
+	const room = {
+		top: anchorRect.top - surfaceSize.height,
+		bottom: viewport.height - anchorRect.bottom - surfaceSize.height,
+		left: anchorRect.left - surfaceSize.width,
+		right: viewport.width - anchorRect.right - surfaceSize.width
+	};
+	const side = AUTO_SIDES.reduce((best, next) => room[next] > room[best] ? next : best, "top");
+	const logical = (side === "left" || side === "right") && isRtl ? opposite[side] : side;
+	const end = placement.split("-")[1];
+	return end ? `${logical}-${end}` : logical;
+}
+//#endregion
+export { resolveTooltipPlacement as n, tooltipPlacementValues as r, getTooltipOrigins as t };

package/dist/{index-Dv_fk1_F.d.cts → index-05VGk0y_.d.cts}

@@ -1,5 +1,5 @@
-import { et as ThemeIconSizes } from "./index-DJ0f69wh.cjs";
-import { n as TextColorToken } from "./index-K5exjvnX.cjs";
+import { ft as ThemeIconSizes } from "./index-XN4-ZqTB.cjs";
+import { n as TextColorToken } from "./index-BDqIc6Gx.cjs";
 import { SVGProps } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Icon/icons/AccountTree.d.ts
@@ -29,6 +29,9 @@ declare const SvgArrowUpward: (props: SVGProps<SVGSVGElement>) => import("react"
 //#region src/Icon/icons/Check.d.ts
 declare const SvgCheck: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
+//#region src/Icon/icons/CheckCircle.d.ts
+declare const SvgCheckCircle: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+//#endregion
 //#region src/Icon/icons/ChevronLeft.d.ts
 declare const SvgChevronLeft: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
@@ -65,6 +68,9 @@ declare const SvgDns: (props: SVGProps<SVGSVGElement>) => import("react").JSX.El
 //#region src/Icon/icons/EditNote.d.ts
 declare const SvgEditNote: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
+//#region src/Icon/icons/ErrorCircle.d.ts
+declare const SvgErrorCircle: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+//#endregion
 //#region src/Icon/icons/ExpandLess.d.ts
 declare const SvgExpandLess: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
@@ -107,6 +113,9 @@ declare const SvgHub: (props: SVGProps<SVGSVGElement>) => import("react").JSX.El
 //#region src/Icon/icons/Image.d.ts
 declare const SvgImage: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
+//#region src/Icon/icons/Info.d.ts
+declare const SvgInfo: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+//#endregion
 //#region src/Icon/icons/Language.d.ts
 declare const SvgLanguage: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 //#endregion
@@ -200,6 +209,7 @@ declare const icons: {
   readonly arrow_forward: typeof SvgArrowForward;
   readonly arrow_upward: typeof SvgArrowUpward;
   readonly check: typeof SvgCheck;
+  readonly check_circle: typeof SvgCheckCircle;
   readonly chevron_left: typeof SvgChevronLeft;
   readonly chevron_right: typeof SvgChevronRight;
   readonly checklist: typeof SvgChecklist;
@@ -212,6 +222,7 @@ declare const icons: {
   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;
@@ -226,6 +237,7 @@ declare const icons: {
   readonly history: typeof SvgHistory;
   readonly hub: typeof SvgHub;
   readonly image: typeof SvgImage;
+  readonly info: typeof SvgInfo;
   readonly language: typeof SvgLanguage;
   readonly last_page: typeof SvgLastPage;
   readonly link: typeof SvgLink;

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

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

package/dist/{index-B1RFybA_.d.mts → index-46mhlgP6.d.mts}

@@ -1,5 +1,5 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { t as MenuItemValue } from "./MenuListContext-x-7lH4CH.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { t as MenuItemValue } from "./MenuListContext-BWL5fM_L.mjs";
 import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
 //#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];
@@ -46,6 +46,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 +58,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 +71,6 @@ 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;
+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;
 //#endregion
 export { MenuItemSize as a, MenuItemRole as i, MenuItemColor as n, MenuItemTextColor as o, MenuItemProps as r, MenuItem as t };

package/dist/{index-BQWjh4rK.d.mts → index-BCzI2Iqo.d.cts}

@@ -1,7 +1,7 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-BGbTuHP9.mjs";
-import { SpaceProps } from "@soroush.tech/styled-system";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, s as PaginationItemType } from "./index-DOH1xY0L.cjs";
 import { HTMLAttributes } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Pagination/Pagination.d.ts
 type PaginationColor = PaginationItemColor;
 type PaginationVariant = PaginationItemVariant;

package/dist/{index-ClZyaZrR.d.mts → index-BDqIc6Gx.d.cts}

@@ -1,6 +1,6 @@
-import { W as Theme, ht as TypographyVariant } from "./index-CJhK7JND.mjs";
-import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { jt as TypographyVariant, nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { CSSProperties, ElementType, HTMLAttributes } from "react";
+import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Typography/Typography.d.ts
 type TypographyAlign = 'left' | 'right' | 'center' | 'justify' | 'inherit';
 /** Valid values for the color prop - derived from theme.text keys. */

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

@@ -1,6 +1,6 @@
-import { W as Theme, ht as TypographyVariant } from "./index-DJ0f69wh.cjs";
-import { CSSProperties, ElementType, HTMLAttributes } from "react";
+import { jt as TypographyVariant, nt as Theme } from "./index-CRQ7XLri.mjs";
 import { BorderProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
+import { CSSProperties, ElementType, HTMLAttributes } from "react";
 //#region src/Typography/Typography.d.ts
 type TypographyAlign = 'left' | 'right' | 'center' | 'justify' | 'inherit';
 /** Valid values for the color prop - derived from theme.text keys. */

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

@@ -1,4 +1,4 @@
-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-XN4-ZqTB.cjs";
 import { ButtonHTMLAttributes, ReactNode } from "react";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Button/Button.d.ts
@@ -44,6 +44,6 @@ 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;
+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;
 //#endregion
 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-B4TeaB7b.d.cts → index-BSGu9rPv.d.cts}

@@ -1,5 +1,5 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { t as MenuItemValue } from "./MenuListContext-DKUOhNyw.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { t as MenuItemValue } from "./MenuListContext-BrCKLgKZ.cjs";
 import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
 //#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];
@@ -46,6 +46,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 +58,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 +71,6 @@ 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;
+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;
 //#endregion
 export { MenuItemSize as a, MenuItemRole as i, MenuItemColor as n, MenuItemTextColor as o, MenuItemProps as r, MenuItem as t };

package/dist/{index-BelFIizY.d.cts → index-BThHG5QU.d.mts}

@@ -1,7 +1,7 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { t as TableCellPadding } from "./TableContext-Duj1nVG7.cjs";
-import { ElementType, ThHTMLAttributes } from "react";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { t as TableCellPadding } from "./TableContext-DUPqls5k.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';

package/dist/{index-YKrfFC_I.d.cts → index-BUeqNHjb.d.cts}

@@ -1,4 +1,4 @@
-import { P as PaletteColor, W as Theme } from "./index-DJ0f69wh.cjs";
+import { U as PaletteColor, nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { ButtonHTMLAttributes, ElementType } from "react";
 import { BorderProps, LayoutProps, SpaceProps, TypographyProps } from "@soroush.tech/styled-system";
 //#region src/Pressable/Pressable.d.ts
@@ -44,6 +44,6 @@ interface PressableProps extends Omit<ButtonHTMLAttributes<HTMLElement>, 'color'
  * `feedback` picks what happens while it is held: nothing (default), the content
  * dims, or the surface tints.
  */
-declare function Pressable({ as, feedback, color, activeOpacity, href, type, disabled, onClick, onKeyDown, onKeyUp, ...rest }: Readonly<PressableProps>): import("react").JSX.Element;
+declare function Pressable({ as, feedback, color, activeOpacity, href, target, rel, type, disabled, onClick, onKeyDown, onKeyUp, ...rest }: Readonly<PressableProps>): import("react").JSX.Element;
 //#endregion
 export { PressableProps as i, PressableColor as n, PressableFeedback as r, Pressable as t };

package/dist/{index-BGbTuHP9.d.mts → index-BeqpkGV-.d.mts}

@@ -1,4 +1,4 @@
-import { P as PaletteColor, W as Theme } from "./index-CJhK7JND.mjs";
+import { U as PaletteColor, nt as Theme } from "./index-CRQ7XLri.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes, ElementType, ReactNode } from "react";
 //#region src/Pagination/hooks/usePagination.d.ts

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

@@ -1,4 +1,4 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
 import { KeyboardEvent, MouseEvent, ReactNode, Ref, RefCallback, SyntheticEvent } from "react";
 //#region src/Modal/useModal.d.ts
 type ModalCloseReason = 'escapeKey' | 'backdropClick';

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

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

package/dist/{index-DchHf5cF.d.cts → index-BhnLFsBv.d.cts}

@@ -1,4 +1,4 @@
-import { W as Theme, X as ThemeComponents, Z as ThemeDefaults, tt as ThemeLayout } from "./index-DJ0f69wh.cjs";
+import { ct as ThemeComponents, lt as ThemeDefaults, nt as Theme, pt as ThemeLayout } from "./index-XN4-ZqTB.cjs";
 import { ComponentType, ReactNode } from "react";
 //#region src/theme/ThemeProvider.d.ts
 interface ThemeProviderProps {

package/dist/{index-KnXhlKMr.d.cts → index-BitQk7Hx.d.cts}

@@ -1,4 +1,4 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { MouseEvent, ReactNode } from "react";
 //#region src/Tabs/TabScrollButton/TabScrollButton.d.ts
 /** Which way a scroll button scrolls a row of tabs: towards its start, or its end. */

package/dist/index-BvgX5eyV.d.mts

@@ -0,0 +1,36 @@
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { r as TransitionTimeout, t as TransitionCallbacks } from "./useTransition-C1F7MuHO.mjs";
+import { ReactNode } from "react";
+//#region src/Collapse/Collapse.d.ts
+type CollapseOrientation = 'vertical' | 'horizontal';
+interface CollapseProps extends TransitionCallbacks {
+  /** What opens and closes. */
+  children?: ReactNode;
+  /** Whether it is open. Default: `false`. */
+  isShown?: boolean;
+  /** Moves on the first render too, when open. Default: `true`. */
+  shouldAppear?: boolean;
+  /** Keeps the content out of the tree until it is first opened. Default: `false`. */
+  shouldMountOnEnter?: boolean;
+  /** Takes the content out of the tree once it is closed. Default: `false`. */
+  shouldUnmountOnExit?: boolean;
+  /** How long it takes in milliseconds, open or closed. Default: `theme.transitions.duration.standard`. */
+  timeout?: TransitionTimeout;
+  /** Which of `theme.transitions.easing` it moves by. Default: `'standard'`. */
+  easing?: keyof Theme['transitions']['easing'];
+  /** The height - or, horizontal, the width - it keeps when closed. Default: `0`. */
+  collapsedSize?: string | number;
+  /** Which way it opens. Default: `'vertical'`. */
+  orientation?: CollapseOrientation;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description Opens and closes its content by its height - or, horizontal, its width. The size
+ * it moves to is measured from the content, and left to the content once it is open, so content
+ * that grows keeps showing. Closed, it keeps `collapsedSize` and is hidden when that is nothing.
+ * A user who asked for less motion sees it change at once.
+ */
+declare function Collapse({ children, isShown, shouldAppear: shouldAppearProp, shouldMountOnEnter, shouldUnmountOnExit, timeout: timeoutProp, easing: easingProp, collapsedSize: collapsedSizeProp, orientation: orientationProp, onEnter, onEntering, onEntered, onExit, onExiting, onExited, className, 'data-testid': dataTestid }: Readonly<CollapseProps>): import("react").JSX.Element | null;
+//#endregion
+export { CollapseOrientation as n, CollapseProps as r, Collapse as t };

package/dist/index-CERyXFjz.d.cts

@@ -0,0 +1,32 @@
+import { i as ButtonProps } from "./index-BQge4W7L.cjs";
+import { ReactNode, Ref } from "react";
+//#region src/Fab/Fab.d.ts
+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;
+//#endregion
+export { FabProps as n, FabVariant as r, Fab as t };