@soroush.tech/design-system 2.1.0 → 2.1.2-rc.0

package/dist/Chip.d.cts

@@ -1,12 +1,12 @@
-import { nt as Theme } from "./index-CK-uaK5U.cjs";
+import { nt as Theme } from "./index-MipJMh6w.cjs";
 import { t as Shape } from "./getShapeRadius-CdCQb8OT.cjs";
 import { MouseEvent, ReactNode, SyntheticEvent } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
-type ChipVariant = 'contained' | 'outlined' | 'text';
-type ChipColor = keyof Theme['palette'];
-type ChipSize = keyof Theme['sizes'];
-type ChipShape = Shape;
-interface ChipProps extends SpaceProps<Theme> {
+export type ChipVariant = 'contained' | 'outlined' | 'text';
+export type ChipColor = keyof Theme['palette'];
+export type ChipSize = keyof Theme['sizes'];
+export type ChipShape = Shape;
+export interface ChipProps extends SpaceProps<Theme> {
   /** What the chip says. */
   label?: ReactNode;
   /** Filled, outlined, or only its text - as `Button`'s. Default: `'contained'`. */
@@ -43,5 +43,4 @@ interface ChipProps extends SpaceProps<Theme> {
  * through its control and through Backspace and Delete, so the control itself is out of the tab
  * order. Its text is the theme's `contrastText` on the color, so its contrast is the theme's.
  */
-declare function Chip({ label, variant: variantProp, color: colorProp, size: sizeProp, shape: shapeProp, borderRadius: borderRadiusProp, icon, avatar, onClick, onDelete, deleteLabel: deleteLabelProp, disabled, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<ChipProps>): import("react").JSX.Element;
-export { Chip, ChipColor, ChipProps, ChipShape, ChipSize, ChipVariant };
+export declare function Chip({ label, variant: variantProp, color: colorProp, size: sizeProp, shape: shapeProp, borderRadius: borderRadiusProp, icon, avatar, onClick, onDelete, deleteLabel: deleteLabelProp, disabled, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<ChipProps>): import("react").JSX.Element;

package/dist/Chip.d.mts

@@ -1,12 +1,12 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
+import { nt as Theme } from "./index-nw0pvCoK.mjs";
 import { t as Shape } from "./getShapeRadius-CdCQb8OT.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { MouseEvent, ReactNode, SyntheticEvent } from "react";
-type ChipVariant = 'contained' | 'outlined' | 'text';
-type ChipColor = keyof Theme['palette'];
-type ChipSize = keyof Theme['sizes'];
-type ChipShape = Shape;
-interface ChipProps extends SpaceProps<Theme> {
+export type ChipVariant = 'contained' | 'outlined' | 'text';
+export type ChipColor = keyof Theme['palette'];
+export type ChipSize = keyof Theme['sizes'];
+export type ChipShape = Shape;
+export interface ChipProps extends SpaceProps<Theme> {
   /** What the chip says. */
   label?: ReactNode;
   /** Filled, outlined, or only its text - as `Button`'s. Default: `'contained'`. */
@@ -43,5 +43,4 @@ interface ChipProps extends SpaceProps<Theme> {
  * through its control and through Backspace and Delete, so the control itself is out of the tab
  * order. Its text is the theme's `contrastText` on the color, so its contrast is the theme's.
  */
-declare function Chip({ label, variant: variantProp, color: colorProp, size: sizeProp, shape: shapeProp, borderRadius: borderRadiusProp, icon, avatar, onClick, onDelete, deleteLabel: deleteLabelProp, disabled, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<ChipProps>): import("react").JSX.Element;
-export { Chip, ChipColor, ChipProps, ChipShape, ChipSize, ChipVariant };
+export declare function Chip({ label, variant: variantProp, color: colorProp, size: sizeProp, shape: shapeProp, borderRadius: borderRadiusProp, icon, avatar, onClick, onDelete, deleteLabel: deleteLabelProp, disabled, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<ChipProps>): import("react").JSX.Element;

package/dist/Chip.mjs

@@ -1,9 +1,9 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { alpha } from "./utils.mjs";
-import { n as useDefaultProps } from "./theme-DyyZQFzQ.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { n as useDefaultProps } from "./theme-B6LFWZ98.mjs";
+import { t as Icon } from "./Icon-gVHlFgdH.mjs";
 import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
-import { t as Icon } from "./Icon-XpXU-SuF.mjs";
 import { t as getShapeRadius } from "./getShapeRadius-DVQRARis.mjs";
+import { alpha } from "./utils.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/Chip/Chip.tsx
 const getLine = (theme, variant, color) => {

package/dist/CircularProgress.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_utils = require("./utils.cjs");
 const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 require("react");

package/dist/CircularProgress.d.cts

@@ -1,11 +1,11 @@
-import { nt as Theme } from "./index-CK-uaK5U.cjs";
-import { n as ButtonColor } from "./index-Cf2D7Y1b.cjs";
+import { nt as Theme } from "./index-MipJMh6w.cjs";
+import { ButtonColor } from "./Button.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
-type CircularProgressVariant = 'indeterminate' | 'determinate';
-type CircularProgressColor = ButtonColor | 'inherit';
-type CircularProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
-interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps<Theme>, keyof PaddingProps>, LayoutProps<Theme> {
+export type CircularProgressVariant = 'indeterminate' | 'determinate';
+export type CircularProgressColor = ButtonColor | 'inherit';
+export type CircularProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+export interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps<Theme>, keyof PaddingProps>, LayoutProps<Theme> {
   /** Visual variant - looping animation or value-driven arc. Default: `'indeterminate'`. */
   variant?: CircularProgressVariant;
   /** Stroke color - resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
@@ -29,5 +29,4 @@ interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<Sp
   /** Renders a faint full-ring track behind the progress arc. Default: `false`. */
   showTrack?: boolean;
 }
-declare function CircularProgress({ variant, color, size, thickness, value, min, max, disableShrink, spinning, easing, showTrack, ...rest }: Readonly<CircularProgressProps>): import("react").JSX.Element;
-export { CircularProgress, CircularProgressColor, CircularProgressEasing, CircularProgressProps, CircularProgressVariant };
+export declare function CircularProgress({ variant, color, size, thickness, value, min, max, disableShrink, spinning, easing, showTrack, ...rest }: Readonly<CircularProgressProps>): import("react").JSX.Element;

package/dist/CircularProgress.d.mts

@@ -1,11 +1,11 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
-import { n as ButtonColor } from "./index-BMeqk34D.mjs";
+import { nt as Theme } from "./index-nw0pvCoK.mjs";
+import { n as ButtonColor } from "./index-DuW9P_vU.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
-type CircularProgressVariant = 'indeterminate' | 'determinate';
-type CircularProgressColor = ButtonColor | 'inherit';
-type CircularProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
-interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps<Theme>, keyof PaddingProps>, LayoutProps<Theme> {
+export type CircularProgressVariant = 'indeterminate' | 'determinate';
+export type CircularProgressColor = ButtonColor | 'inherit';
+export type CircularProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+export interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<SpaceProps<Theme>, keyof PaddingProps>, LayoutProps<Theme> {
   /** Visual variant - looping animation or value-driven arc. Default: `'indeterminate'`. */
   variant?: CircularProgressVariant;
   /** Stroke color - resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
@@ -29,5 +29,4 @@ interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<Sp
   /** Renders a faint full-ring track behind the progress arc. Default: `false`. */
   showTrack?: boolean;
 }
-declare function CircularProgress({ variant, color, size, thickness, value, min, max, disableShrink, spinning, easing, showTrack, ...rest }: Readonly<CircularProgressProps>): import("react").JSX.Element;
-export { CircularProgress, CircularProgressColor, CircularProgressEasing, CircularProgressProps, CircularProgressVariant };
+export declare function CircularProgress({ variant, color, size, thickness, value, min, max, disableShrink, spinning, easing, showTrack, ...rest }: Readonly<CircularProgressProps>): import("react").JSX.Element;

package/dist/CircularProgress.mjs

@@ -1,4 +1,4 @@
-import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
 import { clamp } from "./utils.mjs";
 import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import "react";

package/dist/Collapse.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
 const require_useTransition = require("./useTransition-B0V2fAq5.cjs");
 let react = require("react");

package/dist/Collapse.d.cts

@@ -1,2 +1,33 @@
-import { n as CollapseOrientation, r as CollapseProps, t as Collapse } from "./index-CGlDeiGk.cjs";
-export { Collapse, CollapseOrientation, CollapseProps };
+import { nt as Theme } from "./index-MipJMh6w.cjs";
+import { r as TransitionTimeout, t as TransitionCallbacks } from "./useTransition-CdObuV2M.cjs";
+import { ReactNode } from "react";
+export type CollapseOrientation = 'vertical' | 'horizontal';
+export 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.
+ */
+export 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;

package/dist/Collapse.d.mts

@@ -1,2 +1,2 @@
-import { n as CollapseOrientation, r as CollapseProps, t as Collapse } from "./index-Dh_9qMhj.mjs";
+import { n as CollapseOrientation, r as CollapseProps, t as Collapse } from "./index-DXpsn7vq.mjs";
 export { Collapse, CollapseOrientation, CollapseProps };

package/dist/Collapse.mjs

@@ -1,5 +1,5 @@
-import { o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-B6LFWZ98.mjs";
 import { t as useTransition } from "./useTransition-CWxiEqtC.mjs";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/Drawer.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
-const require_Button = require("./Button.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_Paper = require("./Paper.cjs");
 const require_FocusTrap = require("./FocusTrap.cjs");
+const require_Button = require("./Button.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@emotion/react");

package/dist/Drawer.d.cts

@@ -1,11 +1,11 @@
-import { cn as PaperElevation } from "./index-CK-uaK5U.cjs";
-import { i as ButtonProps } from "./index-Cf2D7Y1b.cjs";
-import "./index-fwRQcB91.cjs";
+import { cn as PaperElevation } from "./index-MipJMh6w.cjs";
+import "./Paper.cjs";
+import { ButtonProps } from "./Button.cjs";
 import { ReactNode } from "react";
-type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
 /** Why the drawer closed: the Escape key, or any other dismissal (a click outside, its toggle). */
-type DrawerCloseReason = 'escapeKey' | 'dismiss';
-interface DrawerProps {
+export type DrawerCloseReason = 'escapeKey' | 'dismiss';
+export interface DrawerProps {
   /** The element id a `DrawerToggle`'s `drawer` names. */
   id: string;
   /** The content of the drawer. */
@@ -40,8 +40,8 @@ interface DrawerProps {
  * so it works on a prerendered page with scripts off. With JavaScript it can be controlled with
  * `isOpen` / `onClose`, and it moves focus in, traps Tab and locks scroll while open.
  */
-declare function Drawer({ id, children, isOpen, onClose, anchor, elevation, transitionDuration, hasBackdrop, shouldLockScroll, shouldAutoFocus, shouldTrapFocus, shouldRestoreFocus }: Readonly<DrawerProps>): import("react").JSX.Element;
-interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
+export declare function Drawer({ id, children, isOpen, onClose, anchor, elevation, transitionDuration, hasBackdrop, shouldLockScroll, shouldAutoFocus, shouldTrapFocus, shouldRestoreFocus }: Readonly<DrawerProps>): import("react").JSX.Element;
+export interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
   /** The `id` of the `Drawer` this button opens and closes. */
   drawer: string;
   /** What a click does to the drawer. Default: 'toggle'. */
@@ -51,5 +51,4 @@ interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
  * @description The button that opens and closes a `Drawer`, through the HTML
  * `popovertarget` attribute - it works without JavaScript. Takes every `Button` prop.
  */
-declare function DrawerToggle({ drawer, action, ...rest }: Readonly<DrawerToggleProps>): import("react").JSX.Element;
-export { Drawer, DrawerAnchor, DrawerCloseReason, DrawerProps, DrawerToggle, DrawerToggleProps };
+export declare function DrawerToggle({ drawer, action, ...rest }: Readonly<DrawerToggleProps>): import("react").JSX.Element;

package/dist/Drawer.d.mts

@@ -1,11 +1,11 @@
-import { cn as PaperElevation } from "./index-B-1sp9oV.mjs";
-import { i as ButtonProps } from "./index-BMeqk34D.mjs";
-import "./index-C_n4ZPpQ.mjs";
+import { cn as PaperElevation } from "./index-nw0pvCoK.mjs";
+import "./index-BzWmnUjW.mjs";
+import { i as ButtonProps } from "./index-DuW9P_vU.mjs";
 import { ReactNode } from "react";
-type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
 /** Why the drawer closed: the Escape key, or any other dismissal (a click outside, its toggle). */
-type DrawerCloseReason = 'escapeKey' | 'dismiss';
-interface DrawerProps {
+export type DrawerCloseReason = 'escapeKey' | 'dismiss';
+export interface DrawerProps {
   /** The element id a `DrawerToggle`'s `drawer` names. */
   id: string;
   /** The content of the drawer. */
@@ -40,8 +40,8 @@ interface DrawerProps {
  * so it works on a prerendered page with scripts off. With JavaScript it can be controlled with
  * `isOpen` / `onClose`, and it moves focus in, traps Tab and locks scroll while open.
  */
-declare function Drawer({ id, children, isOpen, onClose, anchor, elevation, transitionDuration, hasBackdrop, shouldLockScroll, shouldAutoFocus, shouldTrapFocus, shouldRestoreFocus }: Readonly<DrawerProps>): import("react").JSX.Element;
-interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
+export declare function Drawer({ id, children, isOpen, onClose, anchor, elevation, transitionDuration, hasBackdrop, shouldLockScroll, shouldAutoFocus, shouldTrapFocus, shouldRestoreFocus }: Readonly<DrawerProps>): import("react").JSX.Element;
+export interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
   /** The `id` of the `Drawer` this button opens and closes. */
   drawer: string;
   /** What a click does to the drawer. Default: 'toggle'. */
@@ -51,5 +51,4 @@ interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
  * @description The button that opens and closes a `Drawer`, through the HTML
  * `popovertarget` attribute - it works without JavaScript. Takes every `Button` prop.
  */
-declare function DrawerToggle({ drawer, action, ...rest }: Readonly<DrawerToggleProps>): import("react").JSX.Element;
-export { Drawer, DrawerAnchor, DrawerCloseReason, DrawerProps, DrawerToggle, DrawerToggleProps };
+export declare function DrawerToggle({ drawer, action, ...rest }: Readonly<DrawerToggleProps>): import("react").JSX.Element;

package/dist/Drawer.mjs

@@ -1,7 +1,7 @@
-import { o as styled, r as keyframes, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { Button } from "./Button.mjs";
+import { o as styled, r as keyframes, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
 import { Paper } from "./Paper.mjs";
 import { FocusTrap } from "./FocusTrap.mjs";
+import { Button } from "./Button.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/Drawer/Drawer.tsx

package/dist/Fab.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
 const require_Button = require("./Button.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Fab.d.cts

@@ -1,2 +1,30 @@
-import { n as FabProps, r as FabVariant, t as Fab } from "./index-CoHM1HQY.cjs";
-export { Fab, FabProps, FabVariant };
+import { ButtonProps } from "./Button.cjs";
+import { ReactNode, Ref } from "react";
+export type FabVariant = 'circular' | 'extended';
+type FabButtonProps = Omit<ButtonProps, 'variant' | 'shape' | 'endIcon' | 'loading' | 'loadingIndicator' | 'loadingPosition' | 'fullWidth' | 'href' | 'target' | 'rel' | 'gap'>;
+export 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`.
+ */
+export declare function Fab({ variant: variantProp, color, size, startIcon, isCollapsed, children, ...rest }: Readonly<FabProps>): import("react").JSX.Element;
+export {};

package/dist/Fab.d.mts

@@ -1,2 +1,2 @@
-import { n as FabProps, r as FabVariant, t as Fab } from "./index-BwFPSXSw.mjs";
+import { n as FabProps, r as FabVariant, t as Fab } from "./index-m7brCUK5.mjs";
 export { Fab, FabProps, FabVariant };

package/dist/Fab.mjs

@@ -1,5 +1,5 @@
-import { a as src_exports, o as styled } from "./src-B-rNjHIL.mjs";
-import { n as useDefaultProps } from "./theme-DyyZQFzQ.mjs";
+import { a as src_exports, o as styled } from "./src-BSo7bM2g.mjs";
+import { n as useDefaultProps } from "./theme-B6LFWZ98.mjs";
 import { Button } from "./Button.mjs";
 import { jsx } from "react/jsx-runtime";
 // src/Fab/Fab.tsx

package/dist/FabMenu/FabMenu.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_FabMenu = require("../FabMenu-fQGSZCjr.cjs");
+const require_FabMenu = require("../FabMenu-CvHrONFi.cjs");
 exports.FabMenu = require_FabMenu.FabMenu;

package/dist/FabMenu/FabMenu.d.cts

@@ -1,9 +1,9 @@
-import { nt as Theme } from "../index-CK-uaK5U.cjs";
+import { nt as Theme } from "../index-MipJMh6w.cjs";
 import { ReactNode, SyntheticEvent } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
-type FabMenuDirection = 'up' | 'down' | 'left' | 'right';
-type FabMenuAlign = 'start' | 'end';
-interface FabMenuProps extends SpaceProps<Theme> {
+export type FabMenuDirection = 'up' | 'down' | 'left' | 'right';
+export type FabMenuAlign = 'start' | 'end';
+export interface FabMenuProps extends SpaceProps<Theme> {
   /** The `FabMenuItem`s. */
   children?: ReactNode;
   /** The trigger's icon while closed. Default: an add icon. */
@@ -47,5 +47,4 @@ interface FabMenuProps extends SpaceProps<Theme> {
  * Escape and an action, returns the focus to the trigger; the arrow keys, Home and End walk the
  * actions and the trigger in the order they are drawn. Where it floats is the page's.
  */
-declare function FabMenu({ children, icon, closeIcon, label, 'aria-label': ariaLabel, isOpen: isOpenProp, defaultOpen, onOpen, onClose, direction: directionProp, align: alignProp, color, size: sizeProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<FabMenuProps>): import("react").JSX.Element;
-export { FabMenu, FabMenuAlign, FabMenuDirection, FabMenuProps };
+export declare function FabMenu({ children, icon, closeIcon, label, 'aria-label': ariaLabel, isOpen: isOpenProp, defaultOpen, onOpen, onClose, direction: directionProp, align: alignProp, color, size: sizeProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<FabMenuProps>): import("react").JSX.Element;

package/dist/FabMenu/FabMenu.d.mts

@@ -1,9 +1,9 @@
-import { nt as Theme } from "../index-B-1sp9oV.mjs";
+import { nt as Theme } from "../index-nw0pvCoK.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ReactNode, SyntheticEvent } from "react";
-type FabMenuDirection = 'up' | 'down' | 'left' | 'right';
-type FabMenuAlign = 'start' | 'end';
-interface FabMenuProps extends SpaceProps<Theme> {
+export type FabMenuDirection = 'up' | 'down' | 'left' | 'right';
+export type FabMenuAlign = 'start' | 'end';
+export interface FabMenuProps extends SpaceProps<Theme> {
   /** The `FabMenuItem`s. */
   children?: ReactNode;
   /** The trigger's icon while closed. Default: an add icon. */
@@ -47,5 +47,4 @@ interface FabMenuProps extends SpaceProps<Theme> {
  * Escape and an action, returns the focus to the trigger; the arrow keys, Home and End walk the
  * actions and the trigger in the order they are drawn. Where it floats is the page's.
  */
-declare function FabMenu({ children, icon, closeIcon, label, 'aria-label': ariaLabel, isOpen: isOpenProp, defaultOpen, onOpen, onClose, direction: directionProp, align: alignProp, color, size: sizeProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<FabMenuProps>): import("react").JSX.Element;
-export { FabMenu, FabMenuAlign, FabMenuDirection, FabMenuProps };
+export declare function FabMenu({ children, icon, closeIcon, label, 'aria-label': ariaLabel, isOpen: isOpenProp, defaultOpen, onOpen, onClose, direction: directionProp, align: alignProp, color, size: sizeProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<FabMenuProps>): import("react").JSX.Element;

package/dist/FabMenu/FabMenu.mjs

@@ -1 +1 @@
-export { t as FabMenu } from "../FabMenu-BqBhZs0S.mjs";
+export { t as FabMenu } from "../FabMenu-JJzhFdJP.mjs";

package/dist/FabMenu/FabMenuItem.d.cts

@@ -1,6 +1,6 @@
-import { n as FabProps } from "../index-CoHM1HQY.cjs";
+import { FabProps } from "../Fab.cjs";
 import { MouseEvent, ReactNode } from "react";
-interface FabMenuItemProps extends Omit<FabProps, 'variant' | 'size' | 'isCollapsed' | 'startIcon' | 'children'> {
+export interface FabMenuItemProps extends Omit<FabProps, 'variant' | 'size' | 'isCollapsed' | 'startIcon' | 'children'> {
   /** An icon before the label. */
   icon?: ReactNode;
   /** What the item says, and does: its name. */
@@ -13,5 +13,4 @@ interface FabMenuItemProps extends Omit<FabProps, 'variant' | 'size' | 'isCollap
  * icon and a label. Pressing it runs `onClick` and closes the menu, and focus goes back to the
  * trigger. It takes any `Fab` prop but its shape.
  */
-declare function FabMenuItem({ icon, children, color, onClick, ...rest }: Readonly<FabMenuItemProps>): import("react").JSX.Element;
-export { FabMenuItem, FabMenuItemProps };
+export declare function FabMenuItem({ icon, children, color, onClick, ...rest }: Readonly<FabMenuItemProps>): import("react").JSX.Element;

package/dist/FabMenu/FabMenuItem.d.mts

@@ -1,6 +1,6 @@
-import { n as FabProps } from "../index-BwFPSXSw.mjs";
+import { n as FabProps } from "../index-m7brCUK5.mjs";
 import { MouseEvent, ReactNode } from "react";
-interface FabMenuItemProps extends Omit<FabProps, 'variant' | 'size' | 'isCollapsed' | 'startIcon' | 'children'> {
+export interface FabMenuItemProps extends Omit<FabProps, 'variant' | 'size' | 'isCollapsed' | 'startIcon' | 'children'> {
   /** An icon before the label. */
   icon?: ReactNode;
   /** What the item says, and does: its name. */
@@ -13,5 +13,4 @@ interface FabMenuItemProps extends Omit<FabProps, 'variant' | 'size' | 'isCollap
  * icon and a label. Pressing it runs `onClick` and closes the menu, and focus goes back to the
  * trigger. It takes any `Fab` prop but its shape.
  */
-declare function FabMenuItem({ icon, children, color, onClick, ...rest }: Readonly<FabMenuItemProps>): import("react").JSX.Element;
-export { FabMenuItem, FabMenuItemProps };
+export declare function FabMenuItem({ icon, children, color, onClick, ...rest }: Readonly<FabMenuItemProps>): import("react").JSX.Element;

package/dist/{FabMenu-fQGSZCjr.cjs → FabMenu-CvHrONFi.cjs}

@@ -1,10 +1,10 @@
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
-const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
-const require_Icon = require("./Icon-C5Iz5ekp.cjs");
-const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
 const require_Fab = require("./Fab.cjs");
+const require_Icon = require("./Icon-C4QMiNHJ.cjs");
 const require_Zoom = require("./Zoom.cjs");
+const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
+const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
 const require_FabMenuContext = require("./FabMenuContext-C86bOvTe.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/{FabMenu-BqBhZs0S.mjs → FabMenu-JJzhFdJP.mjs}

@@ -1,10 +1,10 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
-import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
-import { t as Icon } from "./Icon-XpXU-SuF.mjs";
-import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-B6LFWZ98.mjs";
 import { Fab } from "./Fab.mjs";
+import { t as Icon } from "./Icon-gVHlFgdH.mjs";
 import { Zoom } from "./Zoom.mjs";
+import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
+import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
 import { t as FabMenuContext } from "./FabMenuContext-CiCWgAmf.mjs";
 import { Children, Fragment, cloneElement, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/FabMenu.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_FabMenu = require("./FabMenu-fQGSZCjr.cjs");
+const require_FabMenu = require("./FabMenu-CvHrONFi.cjs");
 const require_FabMenu_FabMenuItem = require("./FabMenu/FabMenuItem.cjs");
 exports.FabMenu = require_FabMenu.FabMenu;
 exports.FabMenuItem = require_FabMenu_FabMenuItem.FabMenuItem;

package/dist/FabMenu.mjs

@@ -1,3 +1,3 @@
-import { t as FabMenu } from "./FabMenu-BqBhZs0S.mjs";
+import { t as FabMenu } from "./FabMenu-JJzhFdJP.mjs";
 import { FabMenuItem } from "./FabMenu/FabMenuItem.mjs";
 export { FabMenu, FabMenuItem };

package/dist/Fade.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_useTransitionChild = require("./useTransitionChild-COlRozbU.cjs");
+const require_useTransitionChild = require("./useTransitionChild-B2W_GM3m.cjs");
 // src/Fade/Fade.tsx
 /**
 * @description Fades one child in and out by its opacity. The child holds a `ref` and takes a

package/dist/Fade.d.cts

@@ -1,9 +1,8 @@
-import { n as TransitionProps } from "./useTransition-DnOAXNav.cjs";
-type FadeProps = TransitionProps;
+import { n as TransitionProps } from "./useTransition-CdObuV2M.cjs";
+export type FadeProps = TransitionProps;
 /**
  * @description Fades one child in and out by its opacity. The child holds a `ref` and takes a
  * `style`; out, it is hidden, so it takes no click or focus. A user who asked for less motion sees
  * it change at once.
  */
-declare function Fade(props: Readonly<FadeProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
-export { Fade, FadeProps };
+export declare function Fade(props: Readonly<FadeProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/dist/Fade.d.mts

@@ -1,9 +1,8 @@
-import { n as TransitionProps } from "./useTransition-Dk84FQFT.mjs";
-type FadeProps = TransitionProps;
+import { n as TransitionProps } from "./useTransition-DwlKWjUJ.mjs";
+export type FadeProps = TransitionProps;
 /**
  * @description Fades one child in and out by its opacity. The child holds a `ref` and takes a
  * `style`; out, it is hidden, so it takes no click or focus. A user who asked for less motion sees
  * it change at once.
  */
-declare function Fade(props: Readonly<FadeProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
-export { Fade, FadeProps };
+export declare function Fade(props: Readonly<FadeProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/dist/Fade.mjs

@@ -1,4 +1,4 @@
-import { t as useTransitionChild } from "./useTransitionChild-CFhlMm65.mjs";
+import { t as useTransitionChild } from "./useTransitionChild-De79LIB9.mjs";
 // src/Fade/Fade.tsx
 /**
 * @description Fades one child in and out by its opacity. The child holds a `ref` and takes a

package/dist/Flex.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_View = require("./View.cjs");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 // src/Flex/Flex.tsx

package/dist/Flex.d.cts

@@ -1,2 +1,2 @@
-import { dn as FlexProps, fn as GapToken, un as Flex } from "./index-CK-uaK5U.cjs";
+import { dn as FlexProps, fn as GapToken, un as Flex } from "./index-MipJMh6w.cjs";
 export { Flex, FlexProps, GapToken };

package/dist/Flex.d.mts

@@ -1,2 +1,2 @@
-import { dn as FlexProps, fn as GapToken, un as Flex } from "./index-B-1sp9oV.mjs";
+import { dn as FlexProps, fn as GapToken, un as Flex } from "./index-nw0pvCoK.mjs";
 export { Flex, FlexProps, GapToken };

package/dist/Flex.mjs

@@ -1,4 +1,4 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
 import { View } from "./View.mjs";
 // src/Flex/Flex.tsx
 const shouldForwardProp = createShouldForwardProp([...props, "layout"]);

package/dist/FocusTrap.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/FocusTrap/FocusTrap.tsx

package/dist/FocusTrap.d.cts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-interface FocusTrapProps {
+export interface FocusTrapProps {
   /** The content whose focusable descendants are trapped. */
   children: ReactNode;
   /** When false, focus is neither moved nor trapped (e.g. a non-top modal). */
@@ -18,5 +18,4 @@ interface FocusTrapProps {
  * in on activation, cycles Tab / Shift+Tab at the boundaries, pulls focus back when
  * it escapes, and restores focus to the previously focused element on deactivation.
  */
-declare function FocusTrap({ children, isEnabled, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus }: Readonly<FocusTrapProps>): import("react").JSX.Element;
-export { FocusTrap, FocusTrapProps };
+export declare function FocusTrap({ children, isEnabled, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus }: Readonly<FocusTrapProps>): import("react").JSX.Element;

package/dist/FocusTrap.d.mts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-interface FocusTrapProps {
+export interface FocusTrapProps {
   /** The content whose focusable descendants are trapped. */
   children: ReactNode;
   /** When false, focus is neither moved nor trapped (e.g. a non-top modal). */
@@ -18,5 +18,4 @@ interface FocusTrapProps {
  * in on activation, cycles Tab / Shift+Tab at the boundaries, pulls focus back when
  * it escapes, and restores focus to the previously focused element on deactivation.
  */
-declare function FocusTrap({ children, isEnabled, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus }: Readonly<FocusTrapProps>): import("react").JSX.Element;
-export { FocusTrap, FocusTrapProps };
+export declare function FocusTrap({ children, isEnabled, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus }: Readonly<FocusTrapProps>): import("react").JSX.Element;

package/dist/FocusTrap.mjs

@@ -1,4 +1,4 @@
-import { o as styled } from "./src-B-rNjHIL.mjs";
+import { o as styled } from "./src-BSo7bM2g.mjs";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/FocusTrap/FocusTrap.tsx