@soroush.tech/design-system 2.1.1 → 2.1.2

package/README.md

@@ -24,17 +24,26 @@ npm i @soroush.tech/design-system
 
 ## Use it with AI tools
 
+Two skills teach a coding agent how to build with this library: a house-style skill, and a
+WCAG 2.2 AA skill for contrast, labels, landmarks and accessibility tests. Both install for
+whichever agents you use:
+
+```sh
+npx skills add soroush-tech/design-system
+```
+
 An MCP server serves this library's component inventory, every component's props
 reference, and the live token contract, so an AI assistant writes against the real API
-instead of guessing:
+instead of guessing. Add the hosted server, `https://mcp.soroush.design/mcp`, to any MCP
+client; in Claude Code:
 
 ```sh
 claude mcp add --transport http soroush https://mcp.soroush.design/mcp
 ```
 
 It also runs locally over stdio (`npx -y @soroush.design/mcp`). Claude Code users can
-install the plugin instead, which adds a house-style skill and a UI review agent on top
-of the same server:
+install the plugin instead, which brings the skills, the server and a UI review agent in
+one step:
 
 ```sh
 claude plugin marketplace add soroush-tech/design-system

package/dist/Accordion/Accordion.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_themeDefault = require("../themeDefault-DbPHBbNO.cjs");
 const require_getSurfaceRadius = require("../getSurfaceRadius-DwOn3ALC.cjs");

package/dist/Accordion/Accordion.d.cts

@@ -1,10 +1,10 @@
-import { nt as Theme } from "../index-CK-uaK5U.cjs";
-import { r as CollapseProps } from "../index-CGlDeiGk.cjs";
+import { nt as Theme } from "../index-MipJMh6w.cjs";
+import { CollapseProps } from "../Collapse.cjs";
 import { ComponentType, ReactNode, SyntheticEvent } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 /** What an `Accordion` hands the transition that opens and closes its region. */
-type AccordionTransitionProps = Pick<CollapseProps, 'isShown' | 'children' | 'shouldAppear' | 'shouldMountOnEnter' | 'shouldUnmountOnExit' | 'timeout' | 'easing'>;
-interface AccordionProps extends SpaceProps<Theme> {
+export type AccordionTransitionProps = Pick<CollapseProps, 'isShown' | 'children' | 'shouldAppear' | 'shouldMountOnEnter' | 'shouldUnmountOnExit' | 'timeout' | 'easing'>;
+export interface AccordionProps extends SpaceProps<Theme> {
   /** An `AccordionSummary`, then what it opens - `AccordionDetails`, `AccordionActions`. */
   children: ReactNode;
   /** Whether it is open. Controlled with `onChange`. */
@@ -35,5 +35,4 @@ interface AccordionProps extends SpaceProps<Theme> {
  * Open or closed it owns, until `isExpanded` takes it over. In an `AccordionGroup` the arrows,
  * Home and End move between the summaries, and the group may keep one open at a time.
  */
-declare function Accordion({ children, isExpanded: isExpandedProp, defaultExpanded, onChange, disabled, hasGutters: hasGuttersProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, transition: Transition, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AccordionProps>): import("react").JSX.Element;
-export { Accordion, AccordionProps, AccordionTransitionProps };
+export declare function Accordion({ children, isExpanded: isExpandedProp, defaultExpanded, onChange, disabled, hasGutters: hasGuttersProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, transition: Transition, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AccordionProps>): import("react").JSX.Element;

package/dist/Accordion/Accordion.d.mts

@@ -1,10 +1,10 @@
-import { nt as Theme } from "../index-B-1sp9oV.mjs";
-import { r as CollapseProps } from "../index-Dh_9qMhj.mjs";
+import { nt as Theme } from "../index-nw0pvCoK.mjs";
+import { r as CollapseProps } from "../index-DXpsn7vq.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ComponentType, ReactNode, SyntheticEvent } from "react";
 /** What an `Accordion` hands the transition that opens and closes its region. */
-type AccordionTransitionProps = Pick<CollapseProps, 'isShown' | 'children' | 'shouldAppear' | 'shouldMountOnEnter' | 'shouldUnmountOnExit' | 'timeout' | 'easing'>;
-interface AccordionProps extends SpaceProps<Theme> {
+export type AccordionTransitionProps = Pick<CollapseProps, 'isShown' | 'children' | 'shouldAppear' | 'shouldMountOnEnter' | 'shouldUnmountOnExit' | 'timeout' | 'easing'>;
+export interface AccordionProps extends SpaceProps<Theme> {
   /** An `AccordionSummary`, then what it opens - `AccordionDetails`, `AccordionActions`. */
   children: ReactNode;
   /** Whether it is open. Controlled with `onChange`. */
@@ -35,5 +35,4 @@ interface AccordionProps extends SpaceProps<Theme> {
  * Open or closed it owns, until `isExpanded` takes it over. In an `AccordionGroup` the arrows,
  * Home and End move between the summaries, and the group may keep one open at a time.
  */
-declare function Accordion({ children, isExpanded: isExpandedProp, defaultExpanded, onChange, disabled, hasGutters: hasGuttersProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, transition: Transition, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AccordionProps>): import("react").JSX.Element;
-export { Accordion, AccordionProps, AccordionTransitionProps };
+export declare function Accordion({ children, isExpanded: isExpandedProp, defaultExpanded, onChange, disabled, hasGutters: hasGuttersProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, transition: Transition, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AccordionProps>): import("react").JSX.Element;

package/dist/Accordion/Accordion.mjs

@@ -1,5 +1,5 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.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 themeDefault } from "../themeDefault-BeZJzqJj.mjs";
 import { t as getSurfaceRadius } from "../getSurfaceRadius-B1QE_VLa.mjs";
 import { Collapse } from "../Collapse.mjs";

package/dist/Accordion/AccordionActions.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_AccordionContext = require("../AccordionContext-CpSLhcF6.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/Accordion/AccordionActions.d.cts

@@ -1,10 +1,9 @@
 import { ReactNode } from "react";
-interface AccordionActionsProps {
+export interface AccordionActionsProps {
   /** The buttons at the foot of the region. */
   children?: ReactNode;
   className?: string;
   'data-testid'?: string;
 }
 /** @description The foot of an `Accordion` region: its buttons, at the end of a row. */
-declare function AccordionActions({ children, className, 'data-testid': dataTestid }: Readonly<AccordionActionsProps>): import("react").JSX.Element;
-export { AccordionActions, AccordionActionsProps };
+export declare function AccordionActions({ children, className, 'data-testid': dataTestid }: Readonly<AccordionActionsProps>): import("react").JSX.Element;

package/dist/Accordion/AccordionActions.d.mts

@@ -1,10 +1,9 @@
 import { ReactNode } from "react";
-interface AccordionActionsProps {
+export interface AccordionActionsProps {
   /** The buttons at the foot of the region. */
   children?: ReactNode;
   className?: string;
   'data-testid'?: string;
 }
 /** @description The foot of an `Accordion` region: its buttons, at the end of a row. */
-declare function AccordionActions({ children, className, 'data-testid': dataTestid }: Readonly<AccordionActionsProps>): import("react").JSX.Element;
-export { AccordionActions, AccordionActionsProps };
+export declare function AccordionActions({ children, className, 'data-testid': dataTestid }: Readonly<AccordionActionsProps>): import("react").JSX.Element;

package/dist/Accordion/AccordionActions.mjs

@@ -1,4 +1,4 @@
-import { o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { o as styled, t as createShouldForwardProp } from "../src-BSo7bM2g.mjs";
 import { a as useAccordion } from "../AccordionContext-CBiu9CIa.mjs";
 import { jsx } from "react/jsx-runtime";
 // src/Accordion/AccordionActions/AccordionActions.tsx

package/dist/Accordion/AccordionDetails.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_AccordionContext = require("../AccordionContext-CpSLhcF6.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/Accordion/AccordionDetails.d.cts

@@ -1,10 +1,9 @@
 import { ReactNode } from "react";
-interface AccordionDetailsProps {
+export interface AccordionDetailsProps {
   /** What the accordion opens. */
   children?: ReactNode;
   className?: string;
   'data-testid'?: string;
 }
 /** @description What an `Accordion` opens: the padded body of its region. */
-declare function AccordionDetails({ children, className, 'data-testid': dataTestid }: Readonly<AccordionDetailsProps>): import("react").JSX.Element;
-export { AccordionDetails, AccordionDetailsProps };
+export declare function AccordionDetails({ children, className, 'data-testid': dataTestid }: Readonly<AccordionDetailsProps>): import("react").JSX.Element;

package/dist/Accordion/AccordionDetails.d.mts

@@ -1,10 +1,9 @@
 import { ReactNode } from "react";
-interface AccordionDetailsProps {
+export interface AccordionDetailsProps {
   /** What the accordion opens. */
   children?: ReactNode;
   className?: string;
   'data-testid'?: string;
 }
 /** @description What an `Accordion` opens: the padded body of its region. */
-declare function AccordionDetails({ children, className, 'data-testid': dataTestid }: Readonly<AccordionDetailsProps>): import("react").JSX.Element;
-export { AccordionDetails, AccordionDetailsProps };
+export declare function AccordionDetails({ children, className, 'data-testid': dataTestid }: Readonly<AccordionDetailsProps>): import("react").JSX.Element;

package/dist/Accordion/AccordionDetails.mjs

@@ -1,4 +1,4 @@
-import { o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { o as styled, t as createShouldForwardProp } from "../src-BSo7bM2g.mjs";
 import { a as useAccordion } from "../AccordionContext-CBiu9CIa.mjs";
 import { jsx } from "react/jsx-runtime";
 // src/Accordion/AccordionDetails/AccordionDetails.tsx

package/dist/Accordion/AccordionGroup.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_AccordionContext = require("../AccordionContext-CpSLhcF6.cjs");
 let react = require("react");

package/dist/Accordion/AccordionGroup.d.cts

@@ -1,8 +1,8 @@
-import { nt as Theme } from "../index-CK-uaK5U.cjs";
+import { nt as Theme } from "../index-MipJMh6w.cjs";
 import { ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
-type AccordionGroupVariant = 'separated' | 'attached';
-interface AccordionGroupProps extends SpaceProps<Theme> {
+export type AccordionGroupVariant = 'separated' | 'attached';
+export interface AccordionGroupProps extends SpaceProps<Theme> {
   /** The accordions. */
   children?: ReactNode;
   /** Opening one closes the others. Default: `false`. */
@@ -18,5 +18,4 @@ interface AccordionGroupProps extends SpaceProps<Theme> {
  * `isExclusive`, keep one open at a time. A summary that is off is skipped. An accordion given
  * `isExpanded` is its owner's, and the group leaves it alone.
  */
-declare function AccordionGroup({ children, isExclusive: isExclusiveProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AccordionGroupProps>): import("react").JSX.Element;
-export { AccordionGroup, AccordionGroupProps, AccordionGroupVariant };
+export declare function AccordionGroup({ children, isExclusive: isExclusiveProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AccordionGroupProps>): import("react").JSX.Element;

package/dist/Accordion/AccordionGroup.d.mts

@@ -1,8 +1,8 @@
-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 } from "react";
-type AccordionGroupVariant = 'separated' | 'attached';
-interface AccordionGroupProps extends SpaceProps<Theme> {
+export type AccordionGroupVariant = 'separated' | 'attached';
+export interface AccordionGroupProps extends SpaceProps<Theme> {
   /** The accordions. */
   children?: ReactNode;
   /** Opening one closes the others. Default: `false`. */
@@ -18,5 +18,4 @@ interface AccordionGroupProps extends SpaceProps<Theme> {
  * `isExclusive`, keep one open at a time. A summary that is off is skipped. An accordion given
  * `isExpanded` is its owner's, and the group leaves it alone.
  */
-declare function AccordionGroup({ children, isExclusive: isExclusiveProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AccordionGroupProps>): import("react").JSX.Element;
-export { AccordionGroup, AccordionGroupProps, AccordionGroupVariant };
+export declare function AccordionGroup({ children, isExclusive: isExclusiveProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AccordionGroupProps>): import("react").JSX.Element;

package/dist/Accordion/AccordionGroup.mjs

@@ -1,5 +1,5 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.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 { n as AccordionGroupContext } from "../AccordionContext-CBiu9CIa.mjs";
 import { useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/Accordion/AccordionSummary.cjs

@@ -1,8 +1,8 @@
 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_Icon = require("../Icon-C4QMiNHJ.cjs");
 const require_AccordionContext = require("../AccordionContext-CpSLhcF6.cjs");
-const require_Icon = require("../Icon-C5Iz5ekp.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 // src/Accordion/AccordionSummary/AccordionSummary.tsx

package/dist/Accordion/AccordionSummary.d.cts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-type AccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-interface AccordionSummaryProps {
+export type AccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface AccordionSummaryProps {
   /** What the header says. */
   children?: ReactNode;
   /** The icon that turns as it opens. Default: the `expand_more` icon. */
@@ -15,5 +15,4 @@ interface AccordionSummaryProps {
  * `aria-expanded` and `aria-controls` for its region. Enter and Space press it, as they press any
  * button; in an `AccordionGroup` the arrows, Home and End move between summaries.
  */
-declare function AccordionSummary({ children, expandIcon, headingLevel: headingLevelProp, className, 'data-testid': dataTestid }: Readonly<AccordionSummaryProps>): import("react").JSX.Element;
-export { AccordionHeadingLevel, AccordionSummary, AccordionSummaryProps };
+export declare function AccordionSummary({ children, expandIcon, headingLevel: headingLevelProp, className, 'data-testid': dataTestid }: Readonly<AccordionSummaryProps>): import("react").JSX.Element;

package/dist/Accordion/AccordionSummary.d.mts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-type AccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-interface AccordionSummaryProps {
+export type AccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface AccordionSummaryProps {
   /** What the header says. */
   children?: ReactNode;
   /** The icon that turns as it opens. Default: the `expand_more` icon. */
@@ -15,5 +15,4 @@ interface AccordionSummaryProps {
  * `aria-expanded` and `aria-controls` for its region. Enter and Space press it, as they press any
  * button; in an `AccordionGroup` the arrows, Home and End move between summaries.
  */
-declare function AccordionSummary({ children, expandIcon, headingLevel: headingLevelProp, className, 'data-testid': dataTestid }: Readonly<AccordionSummaryProps>): import("react").JSX.Element;
-export { AccordionHeadingLevel, AccordionSummary, AccordionSummaryProps };
+export declare function AccordionSummary({ children, expandIcon, headingLevel: headingLevelProp, className, 'data-testid': dataTestid }: Readonly<AccordionSummaryProps>): import("react").JSX.Element;

package/dist/Accordion/AccordionSummary.mjs

@@ -1,7 +1,7 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
-import { n as useDefaultProps } from "../theme-DyyZQFzQ.mjs";
+import { a as src_exports, 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 { a as useAccordion, i as getSummaryId, r as getRegionId } from "../AccordionContext-CBiu9CIa.mjs";
-import { t as Icon } from "../Icon-XpXU-SuF.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/Accordion/AccordionSummary/AccordionSummary.tsx
 const SummaryHeading = styled("div", {

package/dist/Alert/Alert.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-yC1f5WR2.cjs");
-const require_utils = require("../utils.cjs");
+const require_src = require("../src-B1PmaZ-2.cjs");
 const require_theme = require("../theme-XJvMdOnY.cjs");
 const require_getSurfaceRadius = require("../getSurfaceRadius-DwOn3ALC.cjs");
-const require_Icon = require("../Icon-C5Iz5ekp.cjs");
+const require_Icon = require("../Icon-C4QMiNHJ.cjs");
+const require_utils = require("../utils.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 // src/Alert/Alert/Alert.tsx

package/dist/Alert/Alert.d.cts

@@ -1,9 +1,9 @@
-import { nt as Theme } from "../index-CK-uaK5U.cjs";
+import { nt as Theme } from "../index-MipJMh6w.cjs";
 import { MouseEvent, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
-type AlertSeverity = 'success' | 'info' | 'warning' | 'error';
-type AlertVariant = 'standard' | 'contained' | 'outlined';
-interface AlertProps extends SpaceProps<Theme> {
+export type AlertSeverity = 'success' | 'info' | 'warning' | 'error';
+export type AlertVariant = 'standard' | 'contained' | 'outlined';
+export interface AlertProps extends SpaceProps<Theme> {
   /** The message. An `AlertTitle` may come first. */
   children?: ReactNode;
   /** Picks the icon and the palette color. Default: `'info'`. */
@@ -31,5 +31,4 @@ interface AlertProps extends SpaceProps<Theme> {
  * and outlined, its text is the theme's text on a surface, so its contrast is the theme's; filled,
  * it is the severity color's `contrastText`.
  */
-declare function Alert({ children, severity: severityProp, variant: variantProp, icon, action, onClose, closeLabel: closeLabelProp, role: roleProp, borderRadius: borderRadiusProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AlertProps>): import("react").JSX.Element;
-export { Alert, AlertProps, AlertSeverity, AlertVariant };
+export declare function Alert({ children, severity: severityProp, variant: variantProp, icon, action, onClose, closeLabel: closeLabelProp, role: roleProp, borderRadius: borderRadiusProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AlertProps>): import("react").JSX.Element;

package/dist/Alert/Alert.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 { MouseEvent, ReactNode } from "react";
-type AlertSeverity = 'success' | 'info' | 'warning' | 'error';
-type AlertVariant = 'standard' | 'contained' | 'outlined';
-interface AlertProps extends SpaceProps<Theme> {
+export type AlertSeverity = 'success' | 'info' | 'warning' | 'error';
+export type AlertVariant = 'standard' | 'contained' | 'outlined';
+export interface AlertProps extends SpaceProps<Theme> {
   /** The message. An `AlertTitle` may come first. */
   children?: ReactNode;
   /** Picks the icon and the palette color. Default: `'info'`. */
@@ -31,5 +31,4 @@ interface AlertProps extends SpaceProps<Theme> {
  * and outlined, its text is the theme's text on a surface, so its contrast is the theme's; filled,
  * it is the severity color's `contrastText`.
  */
-declare function Alert({ children, severity: severityProp, variant: variantProp, icon, action, onClose, closeLabel: closeLabelProp, role: roleProp, borderRadius: borderRadiusProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AlertProps>): import("react").JSX.Element;
-export { Alert, AlertProps, AlertSeverity, AlertVariant };
+export declare function Alert({ children, severity: severityProp, variant: variantProp, icon, action, onClose, closeLabel: closeLabelProp, role: roleProp, borderRadius: borderRadiusProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AlertProps>): import("react").JSX.Element;

package/dist/Alert/Alert.mjs

@@ -1,8 +1,8 @@
-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 getSurfaceRadius } from "../getSurfaceRadius-B1QE_VLa.mjs";
-import { t as Icon } from "../Icon-XpXU-SuF.mjs";
+import { t as Icon } from "../Icon-gVHlFgdH.mjs";
+import { alpha } from "../utils.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/Alert/Alert/Alert.tsx
 const SEVERITY_ICONS = {

package/dist/Alert/AlertTitle.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_jsx_runtime = require("react/jsx-runtime");
 // src/Alert/AlertTitle/AlertTitle.tsx
 const AlertTitleRoot = require_src.styled("div", {

package/dist/Alert/AlertTitle.d.cts

@@ -1,10 +1,9 @@
 import { ReactNode } from "react";
-interface AlertTitleProps {
+export interface AlertTitleProps {
   /** The title. */
   children?: ReactNode;
   className?: string;
   'data-testid'?: string;
 }
 /** @description The title of an `Alert`: its first line of the message, in a heavier weight. */
-declare function AlertTitle({ children, className, 'data-testid': dataTestid }: Readonly<AlertTitleProps>): import("react").JSX.Element;
-export { AlertTitle, AlertTitleProps };
+export declare function AlertTitle({ children, className, 'data-testid': dataTestid }: Readonly<AlertTitleProps>): import("react").JSX.Element;

package/dist/Alert/AlertTitle.d.mts

@@ -1,10 +1,9 @@
 import { ReactNode } from "react";
-interface AlertTitleProps {
+export interface AlertTitleProps {
   /** The title. */
   children?: ReactNode;
   className?: string;
   'data-testid'?: string;
 }
 /** @description The title of an `Alert`: its first line of the message, in a heavier weight. */
-declare function AlertTitle({ children, className, 'data-testid': dataTestid }: Readonly<AlertTitleProps>): import("react").JSX.Element;
-export { AlertTitle, AlertTitleProps };
+export declare function AlertTitle({ children, className, 'data-testid': dataTestid }: Readonly<AlertTitleProps>): import("react").JSX.Element;

package/dist/Alert/AlertTitle.mjs

@@ -1,4 +1,4 @@
-import { a as src_exports, o as styled } from "../src-B-rNjHIL.mjs";
+import { a as src_exports, o as styled } from "../src-BSo7bM2g.mjs";
 import { jsx } from "react/jsx-runtime";
 // src/Alert/AlertTitle/AlertTitle.tsx
 const AlertTitleRoot = styled("div", {

package/dist/AppBar.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
-const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_Flex = require("./Flex.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 // src/AppBar/AppBar.tsx

package/dist/AppBar.d.cts

@@ -1,10 +1,10 @@
-import { dn as FlexProps, nt as Theme } from "./index-CK-uaK5U.cjs";
+import { dn as FlexProps, nt as Theme } from "./index-MipJMh6w.cjs";
 /** Valid values for the color prop - derived from theme.background keys. */
-type AppBarColor = keyof Theme['background'];
-type AppBarPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
+export type AppBarColor = keyof Theme['background'];
+export type AppBarPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
 /** Padding preset from theme.sizes. Default: 'md', overridable via `theme.defaults.size`. */
-type AppBarSize = keyof Theme['sizes'];
-interface AppBarProps extends Omit<FlexProps, 'position' | 'bg'> {
+export type AppBarSize = keyof Theme['sizes'];
+export interface AppBarProps extends Omit<FlexProps, 'position' | 'bg'> {
   /** Resolves against theme.background - sets the AppBar background color. */
   color?: AppBarColor;
   /** CSS position value for layout placement. Default: browser default (static). */
@@ -16,5 +16,4 @@ interface AppBarProps extends Omit<FlexProps, 'position' | 'bg'> {
   /** Applies backdrop-filter: blur(theme.blur) + webkit prefix for frosted-glass effect. */
   blur?: boolean;
 }
-declare function AppBar({ elevation, size, ...rest }: Readonly<AppBarProps>): import("react").JSX.Element;
-export { AppBar, AppBarColor, AppBarPosition, AppBarProps, AppBarSize };
+export declare function AppBar({ elevation, size, ...rest }: Readonly<AppBarProps>): import("react").JSX.Element;

package/dist/AppBar.d.mts

@@ -1,10 +1,10 @@
-import { dn as FlexProps, nt as Theme } from "./index-B-1sp9oV.mjs";
+import { dn as FlexProps, nt as Theme } from "./index-nw0pvCoK.mjs";
 /** Valid values for the color prop - derived from theme.background keys. */
-type AppBarColor = keyof Theme['background'];
-type AppBarPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
+export type AppBarColor = keyof Theme['background'];
+export type AppBarPosition = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky';
 /** Padding preset from theme.sizes. Default: 'md', overridable via `theme.defaults.size`. */
-type AppBarSize = keyof Theme['sizes'];
-interface AppBarProps extends Omit<FlexProps, 'position' | 'bg'> {
+export type AppBarSize = keyof Theme['sizes'];
+export interface AppBarProps extends Omit<FlexProps, 'position' | 'bg'> {
   /** Resolves against theme.background - sets the AppBar background color. */
   color?: AppBarColor;
   /** CSS position value for layout placement. Default: browser default (static). */
@@ -16,5 +16,4 @@ interface AppBarProps extends Omit<FlexProps, 'position' | 'bg'> {
   /** Applies backdrop-filter: blur(theme.blur) + webkit prefix for frosted-glass effect. */
   blur?: boolean;
 }
-declare function AppBar({ elevation, size, ...rest }: Readonly<AppBarProps>): import("react").JSX.Element;
-export { AppBar, AppBarColor, AppBarPosition, AppBarProps, AppBarSize };
+export declare function AppBar({ elevation, size, ...rest }: Readonly<AppBarProps>): import("react").JSX.Element;

package/dist/AppBar.mjs

@@ -1,6 +1,6 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
 import { Flex } from "./Flex.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { jsx } from "react/jsx-runtime";
 // src/AppBar/AppBar.tsx
 const shouldForwardProp = createShouldForwardProp([

package/dist/Autocomplete.cjs

@@ -1,16 +1,16 @@
 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_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_getSurfaceRadius = require("./getSurfaceRadius-DwOn3ALC.cjs");
-const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
-const require_Icon = require("./Icon-C5Iz5ekp.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-DhClkDHY.cjs");
-const require_FormControlContext = require("./FormControlContext-DvEyxrdM.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-GsJaknFt.cjs");
 const require_FormControl = require("./FormControl.cjs");
+const require_FormControlContext = require("./FormControlContext-DvEyxrdM.cjs");
 const require_Chip = require("./Chip.cjs");
+const require_Icon = require("./Icon-C4QMiNHJ.cjs");
 const require_Portal = require("./Portal.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_useAnchoredPlacement = require("./useAnchoredPlacement-BSfjNMut.cjs");
+const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/Autocomplete.d.cts

@@ -1,5 +1,5 @@
-import { nt as Theme } from "./index-CK-uaK5U.cjs";
-import { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from "react";
+import { nt as Theme } from "./index-MipJMh6w.cjs";
+import { ReactNode } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 /** One value for a single field, a list for `multiple`. */
 type AutocompleteValue<T, Multiple extends boolean | undefined> = Multiple extends true ? T[] : T | null;
@@ -7,8 +7,8 @@ type AutocompleteValue<T, Multiple extends boolean | undefined> = Multiple exten
 type AutocompleteChangeReason = 'selectOption' | 'removeOption' | 'createOption' | 'clear';
 /** Why the text changes: it was typed, set to match a choice, or emptied. */
 type AutocompleteInputReason = 'input' | 'reset' | 'clear';
-type AutocompleteVariant = 'default' | 'outlined' | 'text' | 'underline';
-interface AutocompleteProps<T = string, Multiple extends boolean | undefined = false> extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+export type AutocompleteVariant = 'default' | 'outlined' | 'text' | 'underline';
+export interface AutocompleteProps<T = string, Multiple extends boolean | undefined = false> extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
   /** What can be chosen - strings, or anything `getOptionLabel` can say. */
   options: readonly T[];
   /** The chosen option - `null` for none - or, with `multiple`, the chosen list. Controlled with `onChange`. */
@@ -89,5 +89,5 @@ interface AutocompleteProps<T = string, Multiple extends boolean | undefined = f
  * the empty field takes the last off; `shouldAllowFreeText` takes what is typed as a value. In a
  * `FormControl` its `FormLabel` names it, and its size, color, error and disabled state apply.
  */
-declare function Autocomplete<T = string, Multiple extends boolean | undefined = false>({ options, value, defaultValue, onChange, inputValue: inputValueProp, onInputChange, multiple, shouldAllowFreeText: shouldAllowFreeTextProp, getOptionLabel, isOptionEqualToValue, filterOptions, groupBy, renderOption, isLoading, loadingText: loadingTextProp, noOptionsText: noOptionsTextProp, clearLabel: clearLabelProp, openLabel: openLabelProp, closeLabel: closeLabelProp, getRemoveLabel, placeholder, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, borderRadius: borderRadiusProp, bg: bgProp, disabled: disabledProp, error: errorProp, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, layer: layerProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<AutocompleteProps<T, Multiple>>): import("react").JSX.Element;
-export { Autocomplete, type AutocompleteChangeReason, type AutocompleteInputReason, AutocompleteProps, type AutocompleteValue, AutocompleteVariant };
+export declare function Autocomplete<T = string, Multiple extends boolean | undefined = false>({ options, value, defaultValue, onChange, inputValue: inputValueProp, onInputChange, multiple, shouldAllowFreeText: shouldAllowFreeTextProp, getOptionLabel, isOptionEqualToValue, filterOptions, groupBy, renderOption, isLoading, loadingText: loadingTextProp, noOptionsText: noOptionsTextProp, clearLabel: clearLabelProp, openLabel: openLabelProp, closeLabel: closeLabelProp, getRemoveLabel, placeholder, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, borderRadius: borderRadiusProp, bg: bgProp, disabled: disabledProp, error: errorProp, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, layer: layerProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<AutocompleteProps<T, Multiple>>): import("react").JSX.Element;
+export type { AutocompleteChangeReason, AutocompleteInputReason, AutocompleteValue };

package/dist/Autocomplete.d.mts

@@ -1,14 +1,14 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
+import { nt as Theme } from "./index-nw0pvCoK.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-import { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from "react";
+import { ReactNode } from "react";
 /** One value for a single field, a list for `multiple`. */
 type AutocompleteValue<T, Multiple extends boolean | undefined> = Multiple extends true ? T[] : T | null;
 /** Why the value changes. */
 type AutocompleteChangeReason = 'selectOption' | 'removeOption' | 'createOption' | 'clear';
 /** Why the text changes: it was typed, set to match a choice, or emptied. */
 type AutocompleteInputReason = 'input' | 'reset' | 'clear';
-type AutocompleteVariant = 'default' | 'outlined' | 'text' | 'underline';
-interface AutocompleteProps<T = string, Multiple extends boolean | undefined = false> extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+export type AutocompleteVariant = 'default' | 'outlined' | 'text' | 'underline';
+export interface AutocompleteProps<T = string, Multiple extends boolean | undefined = false> extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
   /** What can be chosen - strings, or anything `getOptionLabel` can say. */
   options: readonly T[];
   /** The chosen option - `null` for none - or, with `multiple`, the chosen list. Controlled with `onChange`. */
@@ -89,5 +89,5 @@ interface AutocompleteProps<T = string, Multiple extends boolean | undefined = f
  * the empty field takes the last off; `shouldAllowFreeText` takes what is typed as a value. In a
  * `FormControl` its `FormLabel` names it, and its size, color, error and disabled state apply.
  */
-declare function Autocomplete<T = string, Multiple extends boolean | undefined = false>({ options, value, defaultValue, onChange, inputValue: inputValueProp, onInputChange, multiple, shouldAllowFreeText: shouldAllowFreeTextProp, getOptionLabel, isOptionEqualToValue, filterOptions, groupBy, renderOption, isLoading, loadingText: loadingTextProp, noOptionsText: noOptionsTextProp, clearLabel: clearLabelProp, openLabel: openLabelProp, closeLabel: closeLabelProp, getRemoveLabel, placeholder, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, borderRadius: borderRadiusProp, bg: bgProp, disabled: disabledProp, error: errorProp, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, layer: layerProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<AutocompleteProps<T, Multiple>>): import("react").JSX.Element;
-export { Autocomplete, type AutocompleteChangeReason, type AutocompleteInputReason, AutocompleteProps, type AutocompleteValue, AutocompleteVariant };
+export declare function Autocomplete<T = string, Multiple extends boolean | undefined = false>({ options, value, defaultValue, onChange, inputValue: inputValueProp, onInputChange, multiple, shouldAllowFreeText: shouldAllowFreeTextProp, getOptionLabel, isOptionEqualToValue, filterOptions, groupBy, renderOption, isLoading, loadingText: loadingTextProp, noOptionsText: noOptionsTextProp, clearLabel: clearLabelProp, openLabel: openLabelProp, closeLabel: closeLabelProp, getRemoveLabel, placeholder, variant: variantProp, size: sizeProp, color: colorProp, textColor: textColorProp, borderRadius: borderRadiusProp, bg: bgProp, disabled: disabledProp, error: errorProp, required: requiredProp, fullWidth: fullWidthProp, name, id: idProp, layer: layerProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<AutocompleteProps<T, Multiple>>): import("react").JSX.Element;
+export type { AutocompleteChangeReason, AutocompleteInputReason, AutocompleteValue };

package/dist/Autocomplete.mjs

@@ -1,15 +1,15 @@
-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 themeDefault } from "./themeDefault-BeZJzqJj.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 { t as getSurfaceRadius } from "./getSurfaceRadius-B1QE_VLa.mjs";
-import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
-import { t as Icon } from "./Icon-XpXU-SuF.mjs";
-import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-DCGRUY9c.mjs";
-import { t as FormControlContext } from "./FormControlContext-Dg_ommiF.mjs";
+import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-GEyyFeaq.mjs";
 import { useFormControl } from "./FormControl.mjs";
+import { t as FormControlContext } from "./FormControlContext-Dg_ommiF.mjs";
 import { Chip } from "./Chip.mjs";
+import { t as Icon } from "./Icon-gVHlFgdH.mjs";
 import { Portal } from "./Portal.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { t as useAnchoredPlacement } from "./useAnchoredPlacement-txSaWzfk.mjs";
+import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
 import { Fragment, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/Autocomplete/hooks/useAutocomplete.ts