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

package/README.md

@@ -81,6 +81,14 @@ import { Global, globalStyles, CacheProvider, styleCache } from '@soroush.tech/d
 
 `Global` (retyped against this package's `Theme`) applies app-wide CSS and should render inside `ThemeProvider` so it resolves against the active theme. `globalStyles(theme)` is the base reset this package owns - box-sizing, margin/table resets, and theme-driven body colors - compose it into your own `Global` styles array alongside your app's own concerns (font-family, webfont loading, and anything else app-specific stay entirely app policy).
 
+The component catalog - every component as data, for tools that place and write components (a
+design tool's palette, a source writer) - lives at its own subpath and loads in plain Node
+([docs](./docs/catalog.md)):
+
+```ts
+import { catalog } from '@soroush.tech/design-system/catalog'
+```
+
 SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in concern most apps never need - that's what `CacheProvider` and its paired `styleCache` instance are for.
 
 ---
@@ -113,16 +121,28 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 
 ### Inputs & forms
 
-| Component                                            | Purpose                                                                 |
-| ---------------------------------------------------- | ----------------------------------------------------------------------- |
-| `Button`, `ButtonGroup`, `ToggleButton`              | Actions and toggles                                                     |
-| `TextInput`                                          | Text field                                                              |
-| `Checkbox`, `Radio`, `Switch`                        | Selection controls                                                      |
-| `NativeSelect`                                       | Low-level platform `<select>` - not recommended; use `Select native`    |
-| `Select`                                             | The select to use - custom listbox, or `native` for the platform picker |
-| `MenuItem`                                           | Option row for `Select`'s listbox                                       |
-| `Form`, `FormControl`, `FormLabel`, `FormHelperText` | Form composition and labeling                                           |
-| `Pagination`                                         | Page navigation control                                                 |
+| Component                                            | Purpose                                                                                   |
+| ---------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `Button`, `ButtonGroup`, `ToggleButton`              | Actions and toggles                                                                       |
+| `TextInput`                                          | Text field                                                                                |
+| `Checkbox`, `Radio`, `Switch`                        | Selection controls                                                                        |
+| `InputRange`                                         | A slider - one value on a range, or two or more thumbs for a range of values              |
+| `TransferList`                                       | Two lists and the buttons that move the checked items from one to the other               |
+| `NumberField`                                        | A field for a number - read in its locale, clamped to a range, stepped by keys or buttons |
+| `Rating`                                             | A row of icons the user sets as a rating, or a read-only display of one                   |
+| `NativeSelect`                                       | Low-level platform `<select>` - not recommended; use `Select native`                      |
+| `Select`                                             | The select to use - custom listbox, or `native` for the platform picker                   |
+| `MenuItem`                                           | Option row for `Select`'s listbox, and a menu row in a `MenuList`                         |
+| `Form`, `FormControl`, `FormLabel`, `FormHelperText` | Form composition and labeling                                                             |
+| `Pagination`                                         | Page navigation control                                                                   |
+
+### Navigation & menus
+
+| Component     | Purpose                                                                                                                                                                                                                                                                         |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Breadcrumbs` | The trail of links from a site's root to the current page - a long one collapses behind a button that shows it all                                                                                                                                                              |
+| `Menu`        | A trigger and the list of commands it opens - exports `MenuList` (the `role="menu"` list that owns the keyboard), `MenuDivider`, `MenuItems` (rows from data) and `ContextMenu` (the same list, opened at the pointer by a right-click) from `@soroush.tech/design-system/Menu` |
+| `Tabs`        | A row of tabs - exports `Tab`, `TabContext` (holds the value for a `TabList` and its panels), `TabList` (the `Tabs` of a `TabContext`), `TabPanel` (the content a tab shows) and `TabScrollButton` from `@soroush.tech/design-system/Tabs`                                      |
 
 ### Feedback
 

package/dist/AppBar.d.cts

@@ -1,6 +1,4 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { n as FlexProps } from "./index-CA7HnbtH.cjs";
+import { Jt as FlexProps, W as Theme } from "./index-DJ0f69wh.cjs";
 //#region src/AppBar/AppBar.d.ts
 /** Valid values for the color prop - derived from theme.background keys. */
 type AppBarColor = keyof Theme['background'];

package/dist/AppBar.d.mts

@@ -1,6 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { n as FlexProps } from "./index-CKZaErxJ.mjs";
+import { Jt as FlexProps, W as Theme } from "./index-CJhK7JND.mjs";
 //#region src/AppBar/AppBar.d.ts
 /** Valid values for the color prop - derived from theme.background keys. */
 type AppBarColor = keyof Theme['background'];

package/dist/Avatar.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_Flex = require("./Flex.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.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/Avatar.d.cts

@@ -1,6 +1,4 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { n as FlexProps } from "./index-CA7HnbtH.cjs";
+import { Jt as FlexProps, W as Theme } from "./index-DJ0f69wh.cjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];

package/dist/Avatar.d.mts

@@ -1,6 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { n as FlexProps } from "./index-CKZaErxJ.mjs";
+import { Jt as FlexProps, W as Theme } from "./index-CJhK7JND.mjs";
 //#region src/Avatar/Avatar.d.ts
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];

package/dist/Avatar.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { Flex } from "./Flex.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Avatar/Avatar.tsx

package/dist/Backdrop.d.cts

@@ -1,4 +1,4 @@
-import { s as ViewProps } from "./index-nB94D7UM.cjs";
+import { nn as ViewProps } from "./index-DJ0f69wh.cjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Backdrop.d.mts

@@ -1,4 +1,4 @@
-import { s as ViewProps } from "./index-cuv3o-L7.mjs";
+import { nn as ViewProps } from "./index-CJhK7JND.mjs";
 //#region src/Backdrop/Backdrop.d.ts
 type BackdropProps = ViewProps;
 /**

package/dist/Breadcrumbs.cjs

@@ -0,0 +1,132 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-DU81aGy9.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_Typography = require("./Typography.cjs");
+const require_Icon = require("./Icon-D-EWsBVg.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Breadcrumbs/Breadcrumbs.tsx
+const BreadcrumbsRoot = require_src.styled(require_Typography.Typography, {
+	name: "Breadcrumbs",
+	label: "Breadcrumbs"
+})({});
+const BreadcrumbsList = require_src.styled("ol", {
+	name: "Breadcrumbs",
+	slot: "list",
+	label: "BreadcrumbsList"
+})({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	padding: 0,
+	margin: 0,
+	listStyle: "none"
+});
+const BreadcrumbsItem = require_src.styled("li", {
+	name: "Breadcrumbs",
+	slot: "item",
+	label: "BreadcrumbsItem"
+})({
+	display: "flex",
+	alignItems: "center",
+	"& > *": { marginBlock: 0 }
+});
+const BreadcrumbsSeparator = require_src.styled("li", {
+	name: "Breadcrumbs",
+	slot: "separator",
+	label: "BreadcrumbsSeparator"
+})(({ theme }) => ({
+	display: "flex",
+	userSelect: "none",
+	marginInline: theme.space[1],
+	"[dir=\"rtl\"] & svg": { transform: "scaleX(-1)" }
+}));
+const BreadcrumbsCollapsed = require_src.styled("button", {
+	name: "Breadcrumbs",
+	slot: "collapsed",
+	label: "BreadcrumbsCollapsed"
+})(({ theme }) => {
+	const main = (0, require_src.src_exports.get)(theme, `palette.${require_themeDefault.themeDefault(theme, "color", "primary")}.main`);
+	return {
+		appearance: "none",
+		display: "flex",
+		alignItems: "center",
+		marginInline: theme.space[.5],
+		padding: `0 ${theme.space[.5]}`,
+		border: "none",
+		borderRadius: theme.radii.sm,
+		backgroundColor: (0, require_src.src_exports.get)(theme, "background.paper"),
+		color: "inherit",
+		cursor: "pointer",
+		outline: "none",
+		"&:hover": { backgroundColor: `${main}1F` },
+		"&:focus-visible": {
+			outline: `${theme.borderWidths.base} solid ${main}`,
+			outlineOffset: theme.borderWidths.thin
+		}
+	};
+});
+const BreadcrumbsCollapsedIcon = require_src.styled("span", {
+	name: "Breadcrumbs",
+	slot: "collapsedIcon",
+	label: "BreadcrumbsCollapsedIcon"
+})({ display: "inline-flex" });
+/**
+* @description The trail of links from a site's root to the current page - a `nav` landmark named
+* by `aria-label`, its crumbs an ordered list with a separator between two. Past `maxItems` the
+* trail collapses to its first and last crumbs and a button that shows them all.
+*/
+function Breadcrumbs({ children, as = "nav", separator: separatorProp, maxItems: maxItemsProp, itemsBeforeCollapse: itemsBeforeCollapseProp, itemsAfterCollapse: itemsAfterCollapseProp, expandLabel: expandLabelProp, color: colorProp, typography, slots, slotProps, ...rest }) {
+	const dp = require_theme.useDefaultProps("Breadcrumbs");
+	const separator = separatorProp ?? dp.separator ?? "/";
+	const maxItems = maxItemsProp ?? dp.maxItems ?? 8;
+	const itemsBeforeCollapse = itemsBeforeCollapseProp ?? dp.itemsBeforeCollapse ?? 1;
+	const itemsAfterCollapse = itemsAfterCollapseProp ?? dp.itemsAfterCollapse ?? 1;
+	const expandLabel = expandLabelProp ?? dp.expandLabel;
+	const color = colorProp ?? dp.color ?? "secondary";
+	const [isExpanded, setIsExpanded] = (0, react.useState)(false);
+	const listRef = (0, react.useRef)(null);
+	const shouldFocusRef = (0, react.useRef)(false);
+	(0, react.useLayoutEffect)(() => {
+		if (!shouldFocusRef.current) return;
+		shouldFocusRef.current = false;
+		listRef.current?.querySelector("a[href],button,[tabindex]")?.focus();
+	}, [isExpanded]);
+	const crumbs = react.Children.toArray(children).filter(react.isValidElement).map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbsItem, { children: child }, child.key));
+	const isCollapsed = !isExpanded && crumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse < crumbs.length;
+	const CollapsedIcon = slots?.collapsedIcon;
+	const shown = isCollapsed ? [
+		...crumbs.slice(0, itemsBeforeCollapse),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbsItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbsCollapsed, {
+			type: "button",
+			"aria-label": expandLabel,
+			onClick: () => {
+				shouldFocusRef.current = true;
+				setIsExpanded(true);
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbsCollapsedIcon, { children: CollapsedIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsedIcon, { ...slotProps?.collapsedIcon }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				name: "more_horiz",
+				size: "sm",
+				color: "inherit",
+				...slotProps?.collapsedIcon
+			}) })
+		}) }, "collapsed"),
+		...crumbs.slice(crumbs.length - itemsAfterCollapse)
+	] : crumbs;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbsRoot, {
+		as,
+		color,
+		variant: typography,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbsList, {
+			ref: listRef,
+			children: shown.flatMap((crumb, index) => index === 0 ? [crumb] : [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreadcrumbsSeparator, {
+				"aria-hidden": true,
+				children: separator
+			}, `separator-${crumb.key}`), crumb])
+		})
+	});
+}
+//#endregion
+exports.Breadcrumbs = Breadcrumbs;

package/dist/Breadcrumbs.d.cts

@@ -0,0 +1,40 @@
+import { ht as TypographyVariant } from "./index-DJ0f69wh.cjs";
+import { a as TypographyProps } from "./index-K5exjvnX.cjs";
+import { n as IconProps } from "./index-Dv_fk1_F.cjs";
+import { ElementType, ReactNode } from "react";
+//#region src/Breadcrumbs/Breadcrumbs.d.ts
+interface BreadcrumbsProps extends Omit<TypographyProps, 'children' | 'variant'> {
+  /** The crumbs - the app's `Link`s, and the current page as `Typography` or a `Link` with `aria-current="page"`. */
+  children?: ReactNode;
+  /** The trail's type - a `theme.typography` variant, given to its root `Typography`. Default: `'body1'`. */
+  typography?: TypographyVariant;
+  /** Between two crumbs. Default: `'/'`. */
+  separator?: ReactNode;
+  /** Past this many crumbs the trail collapses, a button standing for the ones between. Default: `8`. */
+  maxItems?: number;
+  /** Crumbs shown before the button when collapsed. Default: `1`. */
+  itemsBeforeCollapse?: number;
+  /** Crumbs shown after the button when collapsed. Default: `1`. */
+  itemsAfterCollapse?: number;
+  /** Names the button that shows the whole trail - no built-in text; a theme gives it through `defaultProps`. */
+  expandLabel?: string;
+  /** An icon of your own in the button, in place of `more_horiz`. */
+  slots?: {
+    collapsedIcon?: ElementType;
+  };
+  /** Props for the button's icon. */
+  slotProps?: {
+    collapsedIcon?: Partial<Omit<IconProps, 'name'>> & {
+      'data-testid'?: string;
+    };
+  };
+  'data-testid'?: string;
+}
+/**
+ * @description The trail of links from a site's root to the current page - a `nav` landmark named
+ * by `aria-label`, its crumbs an ordered list with a separator between two. Past `maxItems` the
+ * trail collapses to its first and last crumbs and a button that shows them all.
+ */
+declare function Breadcrumbs({ children, as, separator: separatorProp, maxItems: maxItemsProp, itemsBeforeCollapse: itemsBeforeCollapseProp, itemsAfterCollapse: itemsAfterCollapseProp, expandLabel: expandLabelProp, color: colorProp, typography, slots, slotProps, ...rest }: Readonly<BreadcrumbsProps>): import("react").JSX.Element;
+//#endregion
+export { Breadcrumbs, BreadcrumbsProps };

package/dist/Breadcrumbs.d.mts

@@ -0,0 +1,40 @@
+import { ht as TypographyVariant } from "./index-CJhK7JND.mjs";
+import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
+import { n as IconProps } from "./index-ha1WjSZ5.mjs";
+import { ElementType, ReactNode } from "react";
+//#region src/Breadcrumbs/Breadcrumbs.d.ts
+interface BreadcrumbsProps extends Omit<TypographyProps, 'children' | 'variant'> {
+  /** The crumbs - the app's `Link`s, and the current page as `Typography` or a `Link` with `aria-current="page"`. */
+  children?: ReactNode;
+  /** The trail's type - a `theme.typography` variant, given to its root `Typography`. Default: `'body1'`. */
+  typography?: TypographyVariant;
+  /** Between two crumbs. Default: `'/'`. */
+  separator?: ReactNode;
+  /** Past this many crumbs the trail collapses, a button standing for the ones between. Default: `8`. */
+  maxItems?: number;
+  /** Crumbs shown before the button when collapsed. Default: `1`. */
+  itemsBeforeCollapse?: number;
+  /** Crumbs shown after the button when collapsed. Default: `1`. */
+  itemsAfterCollapse?: number;
+  /** Names the button that shows the whole trail - no built-in text; a theme gives it through `defaultProps`. */
+  expandLabel?: string;
+  /** An icon of your own in the button, in place of `more_horiz`. */
+  slots?: {
+    collapsedIcon?: ElementType;
+  };
+  /** Props for the button's icon. */
+  slotProps?: {
+    collapsedIcon?: Partial<Omit<IconProps, 'name'>> & {
+      'data-testid'?: string;
+    };
+  };
+  'data-testid'?: string;
+}
+/**
+ * @description The trail of links from a site's root to the current page - a `nav` landmark named
+ * by `aria-label`, its crumbs an ordered list with a separator between two. Past `maxItems` the
+ * trail collapses to its first and last crumbs and a button that shows them all.
+ */
+declare function Breadcrumbs({ children, as, separator: separatorProp, maxItems: maxItemsProp, itemsBeforeCollapse: itemsBeforeCollapseProp, itemsAfterCollapse: itemsAfterCollapseProp, expandLabel: expandLabelProp, color: colorProp, typography, slots, slotProps, ...rest }: Readonly<BreadcrumbsProps>): import("react").JSX.Element;
+//#endregion
+export { Breadcrumbs, BreadcrumbsProps };

package/dist/Breadcrumbs.mjs

@@ -0,0 +1,131 @@
+import { a as src_exports, o as styled } from "./src-DLGYOJMh.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { n as useDefaultProps } from "./theme-Z9_QludW.mjs";
+import { Typography } from "./Typography.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { Children, isValidElement, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Breadcrumbs/Breadcrumbs.tsx
+const BreadcrumbsRoot = styled(Typography, {
+	name: "Breadcrumbs",
+	label: "Breadcrumbs"
+})({});
+const BreadcrumbsList = styled("ol", {
+	name: "Breadcrumbs",
+	slot: "list",
+	label: "BreadcrumbsList"
+})({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	padding: 0,
+	margin: 0,
+	listStyle: "none"
+});
+const BreadcrumbsItem = styled("li", {
+	name: "Breadcrumbs",
+	slot: "item",
+	label: "BreadcrumbsItem"
+})({
+	display: "flex",
+	alignItems: "center",
+	"& > *": { marginBlock: 0 }
+});
+const BreadcrumbsSeparator = styled("li", {
+	name: "Breadcrumbs",
+	slot: "separator",
+	label: "BreadcrumbsSeparator"
+})(({ theme }) => ({
+	display: "flex",
+	userSelect: "none",
+	marginInline: theme.space[1],
+	"[dir=\"rtl\"] & svg": { transform: "scaleX(-1)" }
+}));
+const BreadcrumbsCollapsed = styled("button", {
+	name: "Breadcrumbs",
+	slot: "collapsed",
+	label: "BreadcrumbsCollapsed"
+})(({ theme }) => {
+	const main = (0, src_exports.get)(theme, `palette.${themeDefault(theme, "color", "primary")}.main`);
+	return {
+		appearance: "none",
+		display: "flex",
+		alignItems: "center",
+		marginInline: theme.space[.5],
+		padding: `0 ${theme.space[.5]}`,
+		border: "none",
+		borderRadius: theme.radii.sm,
+		backgroundColor: (0, src_exports.get)(theme, "background.paper"),
+		color: "inherit",
+		cursor: "pointer",
+		outline: "none",
+		"&:hover": { backgroundColor: `${main}1F` },
+		"&:focus-visible": {
+			outline: `${theme.borderWidths.base} solid ${main}`,
+			outlineOffset: theme.borderWidths.thin
+		}
+	};
+});
+const BreadcrumbsCollapsedIcon = styled("span", {
+	name: "Breadcrumbs",
+	slot: "collapsedIcon",
+	label: "BreadcrumbsCollapsedIcon"
+})({ display: "inline-flex" });
+/**
+* @description The trail of links from a site's root to the current page - a `nav` landmark named
+* by `aria-label`, its crumbs an ordered list with a separator between two. Past `maxItems` the
+* trail collapses to its first and last crumbs and a button that shows them all.
+*/
+function Breadcrumbs({ children, as = "nav", separator: separatorProp, maxItems: maxItemsProp, itemsBeforeCollapse: itemsBeforeCollapseProp, itemsAfterCollapse: itemsAfterCollapseProp, expandLabel: expandLabelProp, color: colorProp, typography, slots, slotProps, ...rest }) {
+	const dp = useDefaultProps("Breadcrumbs");
+	const separator = separatorProp ?? dp.separator ?? "/";
+	const maxItems = maxItemsProp ?? dp.maxItems ?? 8;
+	const itemsBeforeCollapse = itemsBeforeCollapseProp ?? dp.itemsBeforeCollapse ?? 1;
+	const itemsAfterCollapse = itemsAfterCollapseProp ?? dp.itemsAfterCollapse ?? 1;
+	const expandLabel = expandLabelProp ?? dp.expandLabel;
+	const color = colorProp ?? dp.color ?? "secondary";
+	const [isExpanded, setIsExpanded] = useState(false);
+	const listRef = useRef(null);
+	const shouldFocusRef = useRef(false);
+	useLayoutEffect(() => {
+		if (!shouldFocusRef.current) return;
+		shouldFocusRef.current = false;
+		listRef.current?.querySelector("a[href],button,[tabindex]")?.focus();
+	}, [isExpanded]);
+	const crumbs = Children.toArray(children).filter(isValidElement).map((child) => /* @__PURE__ */ jsx(BreadcrumbsItem, { children: child }, child.key));
+	const isCollapsed = !isExpanded && crumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse < crumbs.length;
+	const CollapsedIcon = slots?.collapsedIcon;
+	const shown = isCollapsed ? [
+		...crumbs.slice(0, itemsBeforeCollapse),
+		/* @__PURE__ */ jsx(BreadcrumbsItem, { children: /* @__PURE__ */ jsx(BreadcrumbsCollapsed, {
+			type: "button",
+			"aria-label": expandLabel,
+			onClick: () => {
+				shouldFocusRef.current = true;
+				setIsExpanded(true);
+			},
+			children: /* @__PURE__ */ jsx(BreadcrumbsCollapsedIcon, { children: CollapsedIcon ? /* @__PURE__ */ jsx(CollapsedIcon, { ...slotProps?.collapsedIcon }) : /* @__PURE__ */ jsx(Icon, {
+				name: "more_horiz",
+				size: "sm",
+				color: "inherit",
+				...slotProps?.collapsedIcon
+			}) })
+		}) }, "collapsed"),
+		...crumbs.slice(crumbs.length - itemsAfterCollapse)
+	] : crumbs;
+	return /* @__PURE__ */ jsx(BreadcrumbsRoot, {
+		as,
+		color,
+		variant: typography,
+		...rest,
+		children: /* @__PURE__ */ jsx(BreadcrumbsList, {
+			ref: listRef,
+			children: shown.flatMap((crumb, index) => index === 0 ? [crumb] : [/* @__PURE__ */ jsx(BreadcrumbsSeparator, {
+				"aria-hidden": true,
+				children: separator
+			}, `separator-${crumb.key}`), crumb])
+		})
+	});
+}
+//#endregion
+export { Breadcrumbs };

package/dist/Button.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_CircularProgress = require("./CircularProgress.cjs");
 const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
 let react = require("react");

package/dist/Button.d.cts

@@ -1,2 +1,2 @@
-import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-BhibLnZ0.cjs";
+import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-DAwcmIjN.cjs";
 export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.d.mts

@@ -1,2 +1,2 @@
-import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-DXvQ-JVZ.mjs";
+import { a as ButtonShape, c as GapToken, i as ButtonProps, n as ButtonColor, o as ButtonSize, r as ButtonLoadingPosition, s as ButtonVariant, t as Button } from "./index-CG_1uPrD.mjs";
 export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "./utils.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-CDVxig_g.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
 import { CircularProgress } from "./CircularProgress.mjs";
 import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
 import { useContext } from "react";

package/dist/ButtonGroup.d.cts

@@ -1,2 +1,2 @@
-import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-DbEnSf2m.cjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-CQfJZADG.cjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/ButtonGroup.d.mts

@@ -1,2 +1,2 @@
-import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-BB-dLv5V.mjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-BrgwkY6z.mjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/Card.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
-const require_Paper = require("./Paper.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-CI6q2Eyi.cjs");
+const require_Icon = require("./Icon-D-EWsBVg.cjs");
+const require_Paper = require("./Paper.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Card/Card.tsx

package/dist/Card.d.cts

@@ -1,6 +1,7 @@
-import { r as PaperProps } from "./index-DzQJSYIh.cjs";
-import { a as TypographyProps } from "./index-BSqet8aO.cjs";
-import { n as IconProps, r as IconName } from "./index-Ctqajtac.cjs";
+import { Kt as PaperProps } from "./index-DJ0f69wh.cjs";
+import { a as TypographyProps } from "./index-K5exjvnX.cjs";
+import { n as IconProps, r as IconName } from "./index-Dv_fk1_F.cjs";
+import "./index-BxVTIMnB.cjs";
 import { ReactNode } from "react";
 //#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';

package/dist/Card.d.mts

@@ -1,6 +1,7 @@
-import { r as PaperProps } from "./index-B_dKjEDR.mjs";
-import { a as TypographyProps } from "./index-smqjMLAZ.mjs";
-import { n as IconProps, r as IconName } from "./index-DO9J-Fla.mjs";
+import { Kt as PaperProps } from "./index-CJhK7JND.mjs";
+import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
+import { n as IconProps, r as IconName } from "./index-ha1WjSZ5.mjs";
+import "./index-DaIIo5QU.mjs";
 import { ReactNode } from "react";
 //#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';

package/dist/Card.mjs

@@ -1,9 +1,9 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-CDVxig_g.mjs";
-import { Paper } from "./Paper.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-CH3asUJu.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { Paper } from "./Paper.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Card/Card.tsx

package/dist/Checkbox.d.cts

@@ -1,5 +1,4 @@
-import { T as Theme, x as PaletteColor } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
+import { P as PaletteColor, W as Theme } from "./index-DJ0f69wh.cjs";
 import { ChangeEvent, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Checkbox/Checkbox.d.ts

package/dist/Checkbox.d.mts

@@ -1,5 +1,4 @@
-import { T as Theme, x as PaletteColor } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
+import { P as PaletteColor, W as Theme } from "./index-CJhK7JND.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/Checkbox/Checkbox.d.ts

package/dist/CircularProgress.d.cts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { n as ButtonColor } from "./index-BhibLnZ0.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { n as ButtonColor } from "./index-DAwcmIjN.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/CircularProgress/CircularProgress.d.ts

package/dist/CircularProgress.d.mts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { n as ButtonColor } from "./index-DXvQ-JVZ.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { n as ButtonColor } from "./index-CG_1uPrD.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/CircularProgress/CircularProgress.d.ts

package/dist/Drawer.d.cts

@@ -1,5 +1,6 @@
-import { i as ButtonProps } from "./index-BhibLnZ0.cjs";
-import { n as PaperElevation } from "./index-DzQJSYIh.cjs";
+import { Gt as PaperElevation } from "./index-DJ0f69wh.cjs";
+import { i as ButtonProps } from "./index-DAwcmIjN.cjs";
+import "./index-BxVTIMnB.cjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/Drawer.d.mts

@@ -1,5 +1,6 @@
-import { i as ButtonProps } from "./index-DXvQ-JVZ.mjs";
-import { n as PaperElevation } from "./index-B_dKjEDR.mjs";
+import { Gt as PaperElevation } from "./index-CJhK7JND.mjs";
+import { i as ButtonProps } from "./index-CG_1uPrD.mjs";
+import "./index-DaIIo5QU.mjs";
 import { ReactNode } from "react";
 //#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';

package/dist/Flex.d.cts

@@ -1,2 +1,2 @@
-import { n as FlexProps, r as GapToken, t as Flex } from "./index-CA7HnbtH.cjs";
+import { Jt as FlexProps, Yt as GapToken, qt as Flex } from "./index-DJ0f69wh.cjs";
 export { Flex, FlexProps, GapToken };