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

package/dist/{computePopoverPosition-DiyEOHnU.cjs → computePopoverPosition-C2W1FcYE.cjs}

@@ -1,4 +1,4 @@
-//#region src/Popover/utils/getOffset.ts
+// src/Popover/utils/getOffset.ts
 /** Vertical offset within a rect for an anchor/transform origin keyword or explicit px. */
 function getOffsetTop(rect, vertical) {
 	if (typeof vertical === "number") return vertical;
@@ -13,14 +13,12 @@ function getOffsetLeft(rect, horizontal) {
 	if (horizontal === "right") return rect.width;
 	return 0;
 }
-//#endregion
-//#region src/Popover/utils/getTransformOriginValue.ts
+// src/Popover/utils/getTransformOriginValue.ts
 /** Serializes a resolved transform origin (in px) to a CSS `transform-origin` value. */
 function getTransformOriginValue(origin) {
 	return `${origin.horizontal}px ${origin.vertical}px`;
 }
-//#endregion
-//#region src/Popover/utils/computePopoverPosition.ts
+// src/Popover/utils/computePopoverPosition.ts
 /** Mirrors a keyword origin to the opposite edge; numbers and `center` are unchanged. */
 function flipVertical(origin) {
 	if (origin === "top") return "bottom";
@@ -119,7 +117,6 @@ function computePopoverPosition(params) {
 		})
 	};
 }
-//#endregion
 Object.defineProperty(exports, "computePopoverPosition", {
 	enumerable: true,
 	get: function() {

package/dist/{computePopoverPosition-BIprs_xo.mjs → computePopoverPosition-qii46Z6p.mjs}

@@ -1,4 +1,4 @@
-//#region src/Popover/utils/getOffset.ts
+// src/Popover/utils/getOffset.ts
 /** Vertical offset within a rect for an anchor/transform origin keyword or explicit px. */
 function getOffsetTop(rect, vertical) {
 	if (typeof vertical === "number") return vertical;
@@ -13,14 +13,12 @@ function getOffsetLeft(rect, horizontal) {
 	if (horizontal === "right") return rect.width;
 	return 0;
 }
-//#endregion
-//#region src/Popover/utils/getTransformOriginValue.ts
+// src/Popover/utils/getTransformOriginValue.ts
 /** Serializes a resolved transform origin (in px) to a CSS `transform-origin` value. */
 function getTransformOriginValue(origin) {
 	return `${origin.horizontal}px ${origin.vertical}px`;
 }
-//#endregion
-//#region src/Popover/utils/computePopoverPosition.ts
+// src/Popover/utils/computePopoverPosition.ts
 /** Mirrors a keyword origin to the opposite edge; numbers and `center` are unchanged. */
 function flipVertical(origin) {
 	if (origin === "top") return "bottom";
@@ -119,5 +117,4 @@ function computePopoverPosition(params) {
 		})
 	};
 }
-//#endregion
 export { computePopoverPosition as t };

package/dist/{dividerLine-FahY-M6_.mjs → dividerLine-BC8E38Ed.mjs}

@@ -1,6 +1,6 @@
-import { a as src_exports } from "./src-DLGYOJMh.mjs";
+import { a as src_exports } from "./src-B-rNjHIL.mjs";
 import { createContext, useContext } from "react";
-//#region src/Tabs/TabsContext.ts
+// src/Tabs/TabsContext.ts
 const TabsContext = createContext(null);
 /** Each tab's position among its siblings - its value when it has none of its own. */
 const TabIndexContext = createContext(0);
@@ -9,8 +9,7 @@ function useTabsContext() {
 	if (!tabs) throw new Error("A Tab must be inside Tabs.");
 	return tabs;
 }
-//#endregion
-//#region src/Tabs/utils/dividerLine.ts
+// src/Tabs/utils/dividerLine.ts
 /**
 * The divider - the line along a row of tabs' foot, a column's end side - as an inset shadow,
 * so it adds no size and runs unbroken across the pieces that each draw a stretch of it.
@@ -27,5 +26,4 @@ const getDividerColor = (theme, variant, color) => variant === "enclosed" ? (0,
 * leave its own piece out.
 */
 const getEnclosedPieceStyle = (theme, { variant, color, orientation, hasDivider }) => hasDivider && variant === "enclosed" ? { boxShadow: getDividerShadow(theme, orientation === "vertical", getDividerColor(theme, variant, color)) } : {};
-//#endregion
 export { TabsContext as a, TabIndexContext as i, getDividerShadow as n, useTabsContext as o, getEnclosedPieceStyle as r, getDividerColor as t };

package/dist/{dividerLine-BNljcGlv.cjs → dividerLine-DFuLn1zU.cjs}

@@ -1,6 +1,6 @@
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 let react = require("react");
-//#region src/Tabs/TabsContext.ts
+// src/Tabs/TabsContext.ts
 const TabsContext = (0, react.createContext)(null);
 /** Each tab's position among its siblings - its value when it has none of its own. */
 const TabIndexContext = (0, react.createContext)(0);
@@ -9,8 +9,7 @@ function useTabsContext() {
 	if (!tabs) throw new Error("A Tab must be inside Tabs.");
 	return tabs;
 }
-//#endregion
-//#region src/Tabs/utils/dividerLine.ts
+// src/Tabs/utils/dividerLine.ts
 /**
 * The divider - the line along a row of tabs' foot, a column's end side - as an inset shadow,
 * so it adds no size and runs unbroken across the pieces that each draw a stretch of it.
@@ -27,7 +26,6 @@ const getDividerColor = (theme, variant, color) => variant === "enclosed" ? (0,
 * leave its own piece out.
 */
 const getEnclosedPieceStyle = (theme, { variant, color, orientation, hasDivider }) => hasDivider && variant === "enclosed" ? { boxShadow: getDividerShadow(theme, orientation === "vertical", getDividerColor(theme, variant, color)) } : {};
-//#endregion
 Object.defineProperty(exports, "TabIndexContext", {
 	enumerable: true,
 	get: function() {

package/dist/{emotion-BAyqVw0c.mjs → emotion-E3pBNlXd.mjs}

@@ -1,6 +1,5 @@
 import { CacheProvider, Global, ThemeContext as EmotionThemeContext, ThemeProvider as EmotionThemeProvider, useTheme as useEmotionTheme } from "@emotion/react";
-//#region src/theme/emotion.ts
+// src/theme/emotion.ts
 /** `Global`, retyped against this package's own `Theme` (see `styled.ts`'s `StyledTags`). */
 const Global$1 = Global;
-//#endregion
 export { useEmotionTheme as a, Global$1 as i, EmotionThemeContext as n, EmotionThemeProvider as r, CacheProvider as t };

package/dist/{emotion-DviPkkGL.cjs → emotion-sEV-zb6P.cjs}

@@ -1,7 +1,6 @@
-//#region src/theme/emotion.ts
+// src/theme/emotion.ts
 /** `Global`, retyped against this package's own `Theme` (see `styled.ts`'s `StyledTags`). */
 const Global = require("@emotion/react").Global;
-//#endregion
 Object.defineProperty(exports, "Global", {
 	enumerable: true,
 	get: function() {

package/dist/engine.cjs

@@ -1,13 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_rolldown_runtime = require("./rolldown-runtime-BloeesfJ.cjs");
-const require_emotion = require("./emotion-DviPkkGL.cjs");
+const require_rolldown_runtime = require("./rolldown-runtime-CiKaZLfC.cjs");
+const require_emotion = require("./emotion-sEV-zb6P.cjs");
 let _emotion_react = require("@emotion/react");
 let _emotion_cache = require("@emotion/cache");
 _emotion_cache = require_rolldown_runtime.__toESM(_emotion_cache, 1);
-//#region src/engine/styleCache.ts
+// src/engine/styleCache.ts
 var styleCache_default = (0, _emotion_cache.default)({ key: "soroush" });
-//#endregion
-//#region src/engine/globalStyles.ts
+// src/engine/globalStyles.ts
 /**
 * The base reset this package owns - box-sizing, margin/table resets, and
 * theme-driven body colors. Font-family, webfont loading, and anything else
@@ -68,7 +67,6 @@ const globalStyles = (theme) => _emotion_react.css`
     padding: 0;
   }
 `;
-//#endregion
 Object.defineProperty(exports, "CacheProvider", {
 	enumerable: true,
 	get: function() {

package/dist/engine.d.cts

@@ -1,21 +1,15 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { CacheProvider, Interpolation } from "@emotion/react";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
 import { ComponentType, RefAttributes } from "react";
-//#region src/theme/emotion.d.ts
+import { CacheProvider, Interpolation } from "@emotion/react";
 /** `Global`, retyped against this package's own `Theme` (see `styled.ts`'s `StyledTags`). */
 declare const Global: ComponentType<{
   styles: Interpolation<Theme>;
 } & RefAttributes<unknown>>;
-//#endregion
-//#region src/engine/styleCache.d.ts
 declare const _default: import("@emotion/cache").EmotionCache;
-//#endregion
-//#region src/engine/globalStyles.d.ts
 /**
  * The base reset this package owns - box-sizing, margin/table resets, and
  * theme-driven body colors. Font-family, webfont loading, and anything else
  * app-specific are app policy - compose this into your own `Global` styles array.
  */
 declare const globalStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
-//#endregion
 export { CacheProvider, Global, globalStyles, _default as styleCache };

package/dist/engine.d.mts

@@ -1,21 +1,15 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
 import { CacheProvider, Interpolation } from "@emotion/react";
 import { ComponentType, RefAttributes } from "react";
-//#region src/theme/emotion.d.ts
 /** `Global`, retyped against this package's own `Theme` (see `styled.ts`'s `StyledTags`). */
 declare const Global: ComponentType<{
   styles: Interpolation<Theme>;
 } & RefAttributes<unknown>>;
-//#endregion
-//#region src/engine/styleCache.d.ts
 declare const _default: import("@emotion/cache").EmotionCache;
-//#endregion
-//#region src/engine/globalStyles.d.ts
 /**
  * The base reset this package owns - box-sizing, margin/table resets, and
  * theme-driven body colors. Font-family, webfont loading, and anything else
  * app-specific are app policy - compose this into your own `Global` styles array.
  */
 declare const globalStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
-//#endregion
 export { CacheProvider, Global, globalStyles, _default as styleCache };

package/dist/engine.mjs

@@ -1,10 +1,9 @@
-import { i as Global, t as CacheProvider } from "./emotion-BAyqVw0c.mjs";
+import { i as Global, t as CacheProvider } from "./emotion-E3pBNlXd.mjs";
 import { css } from "@emotion/react";
 import createCache from "@emotion/cache";
-//#region src/engine/styleCache.ts
+// src/engine/styleCache.ts
 var styleCache_default = createCache({ key: "soroush" });
-//#endregion
-//#region src/engine/globalStyles.ts
+// src/engine/globalStyles.ts
 /**
 * The base reset this package owns - box-sizing, margin/table resets, and
 * theme-driven body colors. Font-family, webfont loading, and anything else
@@ -65,5 +64,4 @@ const globalStyles = (theme) => css`
     padding: 0;
   }
 `;
-//#endregion
 export { CacheProvider, Global, globalStyles, styleCache_default as styleCache };

package/dist/getAnchorRel-BLYap7aE.mjs

@@ -0,0 +1,7 @@
+// 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;
+export { getAnchorRel as t };

package/dist/getAnchorRel-DFMc_uIR.cjs

@@ -0,0 +1,12 @@
+// 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;
+Object.defineProperty(exports, "getAnchorRel", {
+	enumerable: true,
+	get: function() {
+		return getAnchorRel;
+	}
+});

package/dist/getShapeRadius-C2xXOKCl.cjs

@@ -0,0 +1,16 @@
+// 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;
+};
+Object.defineProperty(exports, "getShapeRadius", {
+	enumerable: true,
+	get: function() {
+		return getShapeRadius;
+	}
+});

package/dist/getShapeRadius-CdCQb8OT.d.cts

@@ -0,0 +1,3 @@
+/** The corner shapes of a control or a surface: square, rounded by a radius, or a full pill. */
+type Shape = 'square' | 'rounded' | 'pill';
+export { Shape as t };

package/dist/getShapeRadius-CdCQb8OT.d.mts

@@ -0,0 +1,3 @@
+/** The corner shapes of a control or a surface: square, rounded by a radius, or a full pill. */
+type Shape = 'square' | 'rounded' | 'pill';
+export { Shape as t };

package/dist/getShapeRadius-DVQRARis.mjs

@@ -0,0 +1,11 @@
+// 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;
+};
+export { getShapeRadius as t };

package/dist/getSurfaceRadius-B1QE_VLa.mjs

@@ -0,0 +1,5 @@
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+// 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")];
+export { getSurfaceRadius as t };

package/dist/getSurfaceRadius-DwOn3ALC.cjs

@@ -0,0 +1,10 @@
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+// 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")];
+Object.defineProperty(exports, "getSurfaceRadius", {
+	enumerable: true,
+	get: function() {
+		return getSurfaceRadius;
+	}
+});

package/dist/getTooltipOrigins-8b5zQafY.cjs

@@ -0,0 +1,103 @@
+// 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;
+}
+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-D0bLLXwY.mjs

@@ -0,0 +1,86 @@
+// 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;
+}
+export { resolveTooltipPlacement as n, tooltipPlacementValues as r, getTooltipOrigins as t };

package/dist/index-1Xzj0iAs.d.mts

@@ -0,0 +1 @@
+import "./index-CR8qkP8U.mjs";

package/dist/index-323PrYLR.d.cts

@@ -0,0 +1 @@
+import "./index-Lsm4v8fB.cjs";

package/dist/{index-nqUA_6J_.d.cts → index-4maWM1H8.d.mts}

@@ -1,6 +1,5 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
 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-pTNq3iQn.d.mts → index-76zijQoi.d.mts}

@@ -1,8 +1,7 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { n as IconProps, r as IconName } from "./index-ha1WjSZ5.mjs";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { n as IconProps, r as IconName } from "./index-D48qVo1X.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ButtonHTMLAttributes } from "react";
-//#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-B3Bdupj3.d.mts

@@ -0,0 +1,34 @@
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { r as TransitionTimeout, t as TransitionCallbacks } from "./useTransition-3EoagwIe.mjs";
+import { ReactNode } from "react";
+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;
+export { CollapseOrientation as n, CollapseProps as r, Collapse as t };

package/dist/{index-DGnXJwLj.d.mts → index-BAzMLTVi.d.mts}

@@ -1,13 +1,10 @@
-import { Gt as PaperElevation, W as Theme } from "./index-CJhK7JND.mjs";
-import "./index-DaIIo5QU.mjs";
-import { t as MenuItemValue } from "./MenuListContext-x-7lH4CH.mjs";
-import { n as MenuItemData } from "./index-BkzZxHVj.mjs";
+import { cn as PaperElevation, nt as Theme } from "./index-CR8qkP8U.mjs";
+import "./index-1Xzj0iAs.mjs";
+import { t as MenuItemValue } from "./MenuListContext-DbnAoUdJ.mjs";
+import { n as MenuItemData } from "./index-CJYWGPVO.mjs";
 import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref, SyntheticEvent } from "react";
-//#region src/Menu/utils/getMenuOrigins.d.ts
 /** Which edge of its trigger a menu lines up with: the start edge, or the end edge. */
 type MenuAlign = 'start' | 'end';
-//#endregion
-//#region src/Menu/Menu/Menu.d.ts
 /** Why a menu closed: Escape, a chosen row, its trigger pressed again, or focus leaving it. */
 type MenuCloseReason = 'escapeKey' | 'select' | 'triggerClick' | 'blur';
 /** A step a menu bar takes from this menu to the previous (`-1`) or next (`1`) one. */
@@ -43,6 +40,8 @@ interface MenuProps {
   marginThreshold?: keyof Theme['space'];
   /** Shadow depth of the surface. Default: `8`. */
   elevation?: PaperElevation;
+  /** Corner radius of the list, resolves against `theme.radii`. Default: `theme.defaults.surfaceRadius`, else square. */
+  borderRadius?: keyof Theme['radii'];
   /** Stacking layer from `theme.zOrder`. Default: `'modal'`. */
   layer?: keyof Theme['zOrder'];
   /** Shown as one disabled row when the menu has no rows. Without it, the list stays empty. */
@@ -67,6 +66,5 @@ interface MenuProps {
  * can't clip it, but stays inside the menu's own box in the DOM. Escape or a chosen row
  * closes it and returns focus to the trigger; focus leaving it closes it where it went.
  */
-declare function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen, onOpen, onClose, onStep, onSelect, align: alignProp, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid }: Readonly<MenuProps>): import("react").JSX.Element;
-//#endregion
+declare function Menu({ trigger, children, items, isOpen: isOpenProp, defaultOpen, onOpen, onClose, onStep, onSelect, align: alignProp, marginThreshold: marginThresholdProp, elevation: elevationProp, layer: layerProp, borderRadius: borderRadiusProp, emptyLabel, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid }: Readonly<MenuProps>): import("react").JSX.Element;
 export { MenuAlign as a, MenuStep as i, MenuCloseReason as n, MenuProps as r, Menu as t };