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

package/dist/Avatar.d.mts

@@ -1,5 +1,4 @@
-import { Jt as FlexProps, W as Theme } from "./index-CJhK7JND.mjs";
-//#region src/Avatar/Avatar.d.ts
+import { dn as FlexProps, nt as Theme } from "./index-CR8qkP8U.mjs";
 type AvatarVariant = 'circular' | 'rounded' | 'square';
 type AvatarSize = keyof Theme['avatar'];
 type AvatarRingColor = keyof Theme['border'];
@@ -23,5 +22,4 @@ interface AvatarProps extends Omit<FlexProps, OmittedProps> {
   ringWidth?: AvatarRingWidth;
 }
 declare function Avatar({ src, srcSet, alt, fallback, children, variant: variantProp, size: sizeProp, ring, ringColor: ringColorProp, ringWidth: ringWidthProp, ...rest }: Readonly<AvatarProps>): import("react").JSX.Element;
-//#endregion
 export { Avatar, AvatarProps, AvatarRingColor, AvatarRingWidth, AvatarSize, AvatarVariant };

package/dist/Avatar.mjs

@@ -1,10 +1,10 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { Flex } from "./Flex.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.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
+// src/Avatar/Avatar.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"variant",
@@ -100,5 +100,4 @@ function Avatar({ src, srcSet, alt, fallback, children, variant: variantProp, si
 		}) : children
 	});
 }
-//#endregion
 export { Avatar };

package/dist/Backdrop.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_View = require("./View.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Backdrop/Backdrop.tsx
+// src/Backdrop/Backdrop.tsx
 const BackdropRoot = require_src.styled(require_View.View, {
 	name: "Backdrop",
 	label: "Backdrop"
@@ -22,5 +22,4 @@ function Backdrop(props) {
 		...props
 	});
 }
-//#endregion
 exports.Backdrop = Backdrop;

package/dist/Backdrop.d.cts

@@ -1,10 +1,8 @@
-import { nn as ViewProps } from "./index-DJ0f69wh.cjs";
-//#region src/Backdrop/Backdrop.d.ts
+import { yn as ViewProps } from "./index-Lsm4v8fB.cjs";
 type BackdropProps = ViewProps;
 /**
  * @description Dimmed overlay rendered behind a modal's content. Defaults to the
  * theme `backdrop` background; forwards click and other props to the surface.
  */
 declare function Backdrop(props: Readonly<BackdropProps>): import("react").JSX.Element;
-//#endregion
 export { Backdrop, BackdropProps };

package/dist/Backdrop.d.mts

@@ -1,10 +1,8 @@
-import { nn as ViewProps } from "./index-CJhK7JND.mjs";
-//#region src/Backdrop/Backdrop.d.ts
+import { yn as ViewProps } from "./index-CR8qkP8U.mjs";
 type BackdropProps = ViewProps;
 /**
  * @description Dimmed overlay rendered behind a modal's content. Defaults to the
  * theme `backdrop` background; forwards click and other props to the surface.
  */
 declare function Backdrop(props: Readonly<BackdropProps>): import("react").JSX.Element;
-//#endregion
 export { Backdrop, BackdropProps };

package/dist/Backdrop.mjs

@@ -1,7 +1,7 @@
-import { o as styled } from "./src-DLGYOJMh.mjs";
+import { o as styled } from "./src-B-rNjHIL.mjs";
 import { View } from "./View.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/Backdrop/Backdrop.tsx
+// src/Backdrop/Backdrop.tsx
 const BackdropRoot = styled(View, {
 	name: "Backdrop",
 	label: "Backdrop"
@@ -21,5 +21,4 @@ function Backdrop(props) {
 		...props
 	});
 }
-//#endregion
 export { Backdrop };

package/dist/Badge.cjs

@@ -0,0 +1,129 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.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");
+// src/Badge/Badge.tsx
+const DEFAULT_ANCHOR = {
+	vertical: "top",
+	horizontal: "end"
+};
+const BadgeRoot = require_src.styled("span", {
+	name: "Badge",
+	label: "Badge",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]),
+	systemProps: [require_src.src_exports.space]
+})({
+	position: "relative",
+	display: "inline-flex",
+	verticalAlign: "middle",
+	flexShrink: 0
+});
+const getOffset = (overlap) => overlap === "circular" ? "14%" : "0";
+const BadgeMark = require_src.styled("span", {
+	name: "Badge",
+	slot: "badge",
+	label: "BadgeMark",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"variant",
+		"color",
+		"anchorOrigin",
+		"overlap"
+	])
+})(({ theme, variant, color, anchorOrigin, overlap }) => {
+	const palette = (0, require_src.src_exports.get)(theme, `palette.${color}`);
+	const isDot = variant === "dot";
+	const { vertical, horizontal } = anchorOrigin;
+	const offset = getOffset(overlap);
+	const y = vertical === "top" ? "-50%" : "50%";
+	const x = horizontal === "end" ? "50%" : "-50%";
+	return {
+		position: "absolute",
+		boxSizing: "border-box",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		pointerEvents: "none",
+		fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
+		fontSize: theme.fontSizes[0],
+		fontWeight: (0, require_src.src_exports.get)(theme, "fontWeights.medium"),
+		lineHeight: 1,
+		whiteSpace: "nowrap",
+		backgroundColor: palette.main,
+		color: palette.contrastText,
+		borderRadius: "9999px",
+		...isDot ? {
+			width: 8,
+			height: 8,
+			minWidth: 8,
+			padding: 0
+		} : {
+			minWidth: 20,
+			height: 20,
+			padding: `0 ${theme.space[1]}`
+		},
+		[vertical]: offset,
+		insetInlineEnd: horizontal === "end" ? offset : "auto",
+		insetInlineStart: horizontal === "start" ? offset : "auto",
+		transform: `translate(${x}, ${y})`,
+		"[dir=\"rtl\"] &": { transform: `translate(${horizontal === "end" ? "-50%" : "50%"}, ${y})` }
+	};
+});
+const VisuallyHidden = require_src.styled("span", {
+	name: "Badge",
+	slot: "label",
+	label: "BadgeLabel"
+})({
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	border: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+});
+const getShown = (content, max) => typeof content === "number" && content > max ? `${max}+` : content;
+const isEmpty = (content) => content === void 0 || content === null || content === "";
+/**
+* @description A count or a dot anchored over another element. The badge is decoration: it is hidden
+* from assistive technology, and `badgeLabel` is what is heard instead - read with its child, and,
+* for one element, as that element's description. A count over `max` shows as `max+`, and a count
+* of zero shows nothing, unless `shouldShowZero`.
+*/
+function Badge({ children, badgeContent, max: maxProp, variant: variantProp, color: colorProp, isHidden = false, shouldShowZero = false, anchorOrigin: anchorOriginProp, overlap: overlapProp, badgeLabel, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = require_theme.useDefaultProps("Badge");
+	const max = maxProp ?? dp.max ?? 99;
+	const variant = variantProp ?? dp.variant ?? "standard";
+	const color = colorProp ?? dp.color ?? "error";
+	const anchorOrigin = anchorOriginProp ?? dp.anchorOrigin ?? DEFAULT_ANCHOR;
+	const overlap = overlapProp ?? dp.overlap ?? "rectangular";
+	const labelId = (0, react.useId)();
+	const isEmptyCount = isEmpty(badgeContent) || badgeContent === 0 && !shouldShowZero;
+	const isShown = !isHidden && (variant === "dot" || !isEmptyCount);
+	const hasLabel = isShown && badgeLabel !== void 0;
+	const child = hasLabel && (0, react.isValidElement)(children) ? (0, react.cloneElement)(children, { "aria-describedby": [children.props["aria-describedby"], labelId].filter(Boolean).join(" ") }) : children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(BadgeRoot, {
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [
+			child,
+			hasLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisuallyHidden, {
+				id: labelId,
+				children: badgeLabel
+			}),
+			isShown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BadgeMark, {
+				variant,
+				color,
+				anchorOrigin,
+				overlap,
+				"aria-hidden": "true",
+				children: variant === "dot" ? null : getShown(badgeContent, max)
+			})
+		]
+	});
+}
+exports.Badge = Badge;

package/dist/Badge.d.cts

@@ -0,0 +1,43 @@
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { ReactNode } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+type BadgeVariant = 'standard' | 'dot';
+type BadgeOverlap = 'rectangular' | 'circular';
+type BadgeColor = keyof Theme['palette'];
+interface BadgeAnchorOrigin {
+  vertical: 'top' | 'bottom';
+  /** `'end'` is the right side, and the left in a right-to-left page. */
+  horizontal: 'start' | 'end';
+}
+interface BadgeProps extends SpaceProps<Theme> {
+  /** What the badge sits over. */
+  children?: ReactNode;
+  /** The count or the text. */
+  badgeContent?: ReactNode;
+  /** Above it, a number shows as `99+` - the number given. Default: `99`. */
+  max?: number;
+  /** A count, or only a dot. Default: `'standard'`. */
+  variant?: BadgeVariant;
+  /** Resolves to `theme.palette`. Default: `'error'`. */
+  color?: BadgeColor;
+  /** Draws no badge. Default: `false`. */
+  isHidden?: boolean;
+  /** Draws a badge for a count of zero. Default: `false`. */
+  shouldShowZero?: boolean;
+  /** The corner it sits on - mirrored right to left. Default: `{ vertical: 'top', horizontal: 'end' }`. */
+  anchorOrigin?: BadgeAnchorOrigin;
+  /** Sits on the corner of the box, or on the curve of a circle. Default: `'rectangular'`. */
+  overlap?: BadgeOverlap;
+  /** What a screen reader hears of the badge, with its child - no built-in English. */
+  badgeLabel?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A count or a dot anchored over another element. The badge is decoration: it is hidden
+ * from assistive technology, and `badgeLabel` is what is heard instead - read with its child, and,
+ * for one element, as that element's description. A count over `max` shows as `max+`, and a count
+ * of zero shows nothing, unless `shouldShowZero`.
+ */
+declare function Badge({ children, badgeContent, max: maxProp, variant: variantProp, color: colorProp, isHidden, shouldShowZero, anchorOrigin: anchorOriginProp, overlap: overlapProp, badgeLabel, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<BadgeProps>): import("react").JSX.Element;
+export { Badge, BadgeAnchorOrigin, BadgeColor, BadgeOverlap, BadgeProps, BadgeVariant };

package/dist/Badge.d.mts

@@ -0,0 +1,43 @@
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { ReactNode } from "react";
+type BadgeVariant = 'standard' | 'dot';
+type BadgeOverlap = 'rectangular' | 'circular';
+type BadgeColor = keyof Theme['palette'];
+interface BadgeAnchorOrigin {
+  vertical: 'top' | 'bottom';
+  /** `'end'` is the right side, and the left in a right-to-left page. */
+  horizontal: 'start' | 'end';
+}
+interface BadgeProps extends SpaceProps<Theme> {
+  /** What the badge sits over. */
+  children?: ReactNode;
+  /** The count or the text. */
+  badgeContent?: ReactNode;
+  /** Above it, a number shows as `99+` - the number given. Default: `99`. */
+  max?: number;
+  /** A count, or only a dot. Default: `'standard'`. */
+  variant?: BadgeVariant;
+  /** Resolves to `theme.palette`. Default: `'error'`. */
+  color?: BadgeColor;
+  /** Draws no badge. Default: `false`. */
+  isHidden?: boolean;
+  /** Draws a badge for a count of zero. Default: `false`. */
+  shouldShowZero?: boolean;
+  /** The corner it sits on - mirrored right to left. Default: `{ vertical: 'top', horizontal: 'end' }`. */
+  anchorOrigin?: BadgeAnchorOrigin;
+  /** Sits on the corner of the box, or on the curve of a circle. Default: `'rectangular'`. */
+  overlap?: BadgeOverlap;
+  /** What a screen reader hears of the badge, with its child - no built-in English. */
+  badgeLabel?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A count or a dot anchored over another element. The badge is decoration: it is hidden
+ * from assistive technology, and `badgeLabel` is what is heard instead - read with its child, and,
+ * for one element, as that element's description. A count over `max` shows as `max+`, and a count
+ * of zero shows nothing, unless `shouldShowZero`.
+ */
+declare function Badge({ children, badgeContent, max: maxProp, variant: variantProp, color: colorProp, isHidden, shouldShowZero, anchorOrigin: anchorOriginProp, overlap: overlapProp, badgeLabel, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<BadgeProps>): import("react").JSX.Element;
+export { Badge, BadgeAnchorOrigin, BadgeColor, BadgeOverlap, BadgeProps, BadgeVariant };

package/dist/Badge.mjs

@@ -0,0 +1,127 @@
+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 { cloneElement, isValidElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/Badge/Badge.tsx
+const DEFAULT_ANCHOR = {
+	vertical: "top",
+	horizontal: "end"
+};
+const BadgeRoot = styled("span", {
+	name: "Badge",
+	label: "Badge",
+	shouldForwardProp: createShouldForwardProp([...props]),
+	systemProps: [src_exports.space]
+})({
+	position: "relative",
+	display: "inline-flex",
+	verticalAlign: "middle",
+	flexShrink: 0
+});
+const getOffset = (overlap) => overlap === "circular" ? "14%" : "0";
+const BadgeMark = styled("span", {
+	name: "Badge",
+	slot: "badge",
+	label: "BadgeMark",
+	shouldForwardProp: createShouldForwardProp([
+		"variant",
+		"color",
+		"anchorOrigin",
+		"overlap"
+	])
+})(({ theme, variant, color, anchorOrigin, overlap }) => {
+	const palette = (0, src_exports.get)(theme, `palette.${color}`);
+	const isDot = variant === "dot";
+	const { vertical, horizontal } = anchorOrigin;
+	const offset = getOffset(overlap);
+	const y = vertical === "top" ? "-50%" : "50%";
+	const x = horizontal === "end" ? "50%" : "-50%";
+	return {
+		position: "absolute",
+		boxSizing: "border-box",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		pointerEvents: "none",
+		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
+		fontSize: theme.fontSizes[0],
+		fontWeight: (0, src_exports.get)(theme, "fontWeights.medium"),
+		lineHeight: 1,
+		whiteSpace: "nowrap",
+		backgroundColor: palette.main,
+		color: palette.contrastText,
+		borderRadius: "9999px",
+		...isDot ? {
+			width: 8,
+			height: 8,
+			minWidth: 8,
+			padding: 0
+		} : {
+			minWidth: 20,
+			height: 20,
+			padding: `0 ${theme.space[1]}`
+		},
+		[vertical]: offset,
+		insetInlineEnd: horizontal === "end" ? offset : "auto",
+		insetInlineStart: horizontal === "start" ? offset : "auto",
+		transform: `translate(${x}, ${y})`,
+		"[dir=\"rtl\"] &": { transform: `translate(${horizontal === "end" ? "-50%" : "50%"}, ${y})` }
+	};
+});
+const VisuallyHidden = styled("span", {
+	name: "Badge",
+	slot: "label",
+	label: "BadgeLabel"
+})({
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	border: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+});
+const getShown = (content, max) => typeof content === "number" && content > max ? `${max}+` : content;
+const isEmpty = (content) => content === void 0 || content === null || content === "";
+/**
+* @description A count or a dot anchored over another element. The badge is decoration: it is hidden
+* from assistive technology, and `badgeLabel` is what is heard instead - read with its child, and,
+* for one element, as that element's description. A count over `max` shows as `max+`, and a count
+* of zero shows nothing, unless `shouldShowZero`.
+*/
+function Badge({ children, badgeContent, max: maxProp, variant: variantProp, color: colorProp, isHidden = false, shouldShowZero = false, anchorOrigin: anchorOriginProp, overlap: overlapProp, badgeLabel, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = useDefaultProps("Badge");
+	const max = maxProp ?? dp.max ?? 99;
+	const variant = variantProp ?? dp.variant ?? "standard";
+	const color = colorProp ?? dp.color ?? "error";
+	const anchorOrigin = anchorOriginProp ?? dp.anchorOrigin ?? DEFAULT_ANCHOR;
+	const overlap = overlapProp ?? dp.overlap ?? "rectangular";
+	const labelId = useId();
+	const isEmptyCount = isEmpty(badgeContent) || badgeContent === 0 && !shouldShowZero;
+	const isShown = !isHidden && (variant === "dot" || !isEmptyCount);
+	const hasLabel = isShown && badgeLabel !== void 0;
+	const child = hasLabel && isValidElement(children) ? cloneElement(children, { "aria-describedby": [children.props["aria-describedby"], labelId].filter(Boolean).join(" ") }) : children;
+	return /* @__PURE__ */ jsxs(BadgeRoot, {
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [
+			child,
+			hasLabel && /* @__PURE__ */ jsx(VisuallyHidden, {
+				id: labelId,
+				children: badgeLabel
+			}),
+			isShown && /* @__PURE__ */ jsx(BadgeMark, {
+				variant,
+				color,
+				anchorOrigin,
+				overlap,
+				"aria-hidden": "true",
+				children: variant === "dot" ? null : getShown(badgeContent, max)
+			})
+		]
+	});
+}
+export { Badge };

package/dist/Breadcrumbs.cjs

@@ -1,12 +1,12 @@
 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_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_Typography = require("./Typography.cjs");
-const require_Icon = require("./Icon-D-EWsBVg.cjs");
+const require_Icon = require("./Icon-C5Iz5ekp.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Breadcrumbs/Breadcrumbs.tsx
+// src/Breadcrumbs/Breadcrumbs.tsx
 const BreadcrumbsRoot = require_src.styled(require_Typography.Typography, {
 	name: "Breadcrumbs",
 	label: "Breadcrumbs"
@@ -128,5 +128,4 @@ function Breadcrumbs({ children, as = "nav", separator: separatorProp, maxItems:
 		})
 	});
 }
-//#endregion
 exports.Breadcrumbs = Breadcrumbs;

package/dist/Breadcrumbs.d.cts

@@ -1,8 +1,7 @@
-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 { jt as TypographyVariant } from "./index-Lsm4v8fB.cjs";
+import { a as TypographyProps } from "./index-CGyIuCRh.cjs";
+import { n as IconProps } from "./index-CAt0-L4i.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;
@@ -36,5 +35,4 @@ interface BreadcrumbsProps extends Omit<TypographyProps, 'children' | 'variant'>
  * 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

@@ -1,8 +1,7 @@
-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 { jt as TypographyVariant } from "./index-CR8qkP8U.mjs";
+import { a as TypographyProps } from "./index-C2a-5yop.mjs";
+import { n as IconProps } from "./index-D48qVo1X.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;
@@ -36,5 +35,4 @@ interface BreadcrumbsProps extends Omit<TypographyProps, 'children' | 'variant'>
  * 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

@@ -1,11 +1,11 @@
-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 { a as src_exports, o as styled } from "./src-B-rNjHIL.mjs";
+import { n as useDefaultProps } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { t as Icon } from "./Icon-XpXU-SuF.mjs";
 import { Children, isValidElement, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Breadcrumbs/Breadcrumbs.tsx
+// src/Breadcrumbs/Breadcrumbs.tsx
 const BreadcrumbsRoot = styled(Typography, {
 	name: "Breadcrumbs",
 	label: "Breadcrumbs"
@@ -127,5 +127,4 @@ function Breadcrumbs({ children, as = "nav", separator: separatorProp, maxItems:
 		})
 	});
 }
-//#endregion
 export { Breadcrumbs };

package/dist/Button.cjs

@@ -1,14 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_CircularProgress = require("./CircularProgress.cjs");
-const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
+const require_ButtonGroupContext = require("./ButtonGroupContext-n0wa0q6H.cjs");
+const require_getAnchorRel = require("./getAnchorRel-DFMc_uIR.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");
-//#region src/Button/Button.tsx
+// src/Button/Button.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
 	"variant",
@@ -125,7 +126,7 @@ const ButtonRoot = require_src.styled("button", {
 		require_src.src_exports.border
 	]
 })(baseStyles, sizeVariants, variantStyles, shapeVariants, fullWidthStyles, focusVisibleStyles);
-function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", letterSpacing = "tight", startIcon, endIcon, fullWidth, loading = false, loadingIndicator, loadingPosition = "center", children, disabled, href, ...rest }) {
+function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", letterSpacing = "tight", startIcon, endIcon, fullWidth, loading = false, loadingIndicator, loadingPosition = "center", children, disabled, href, target, rel, ...rest }) {
 	const group = (0, react.useContext)(require_ButtonGroupContext.ButtonGroupContext);
 	const theme = require_theme.useTheme();
 	const dp = require_theme.useDefaultProps("Button");
@@ -145,6 +146,8 @@ function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", let
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ButtonRoot, {
 		as: href == null ? void 0 : "a",
 		href,
+		target,
+		rel: require_getAnchorRel.getAnchorRel(target, rel),
 		variant: resolvedVariant,
 		color: resolvedColor,
 		size: resolvedSize,
@@ -167,5 +170,4 @@ function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", let
 		]
 	});
 }
-//#endregion
 exports.Button = Button;

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-DAwcmIjN.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-BzQze7eY.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-CG_1uPrD.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-BChRNCld.mjs";
 export { Button, ButtonColor, ButtonLoadingPosition, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, GapToken };

package/dist/Button.mjs

@@ -1,12 +1,13 @@
-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 { 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, r as useTheme } from "./theme-Z9_QludW.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { CircularProgress } from "./CircularProgress.mjs";
-import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
+import { t as ButtonGroupContext } from "./ButtonGroupContext-DK9whWFt.mjs";
+import { t as getAnchorRel } from "./getAnchorRel-BLYap7aE.mjs";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/Button/Button.tsx
+// src/Button/Button.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"variant",
@@ -123,7 +124,7 @@ const ButtonRoot = styled("button", {
 		src_exports.border
 	]
 })(baseStyles, sizeVariants, variantStyles, shapeVariants, fullWidthStyles, focusVisibleStyles);
-function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", letterSpacing = "tight", startIcon, endIcon, fullWidth, loading = false, loadingIndicator, loadingPosition = "center", children, disabled, href, ...rest }) {
+function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", letterSpacing = "tight", startIcon, endIcon, fullWidth, loading = false, loadingIndicator, loadingPosition = "center", children, disabled, href, target, rel, ...rest }) {
 	const group = useContext(ButtonGroupContext);
 	const theme = useTheme();
 	const dp = useDefaultProps("Button");
@@ -143,6 +144,8 @@ function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", let
 	return /* @__PURE__ */ jsxs(ButtonRoot, {
 		as: href == null ? void 0 : "a",
 		href,
+		target,
+		rel: getAnchorRel(target, rel),
 		variant: resolvedVariant,
 		color: resolvedColor,
 		size: resolvedSize,
@@ -165,5 +168,4 @@ function Button({ variant, color, size, shape, gap = 1, fontWeight = "bold", let
 		]
 	});
 }
-//#endregion
 export { Button };

package/dist/ButtonGroup.cjs

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_utils = require("./utils.cjs");
-const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_ButtonGroupContext = require("./ButtonGroupContext-n0wa0q6H.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");
-//#region src/ButtonGroup/ButtonGroup.tsx
+// src/ButtonGroup/ButtonGroup.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
 	"orientation",
@@ -105,6 +105,5 @@ function ButtonGroup({ variant = "outlined", color, size, orientation = "horizon
 		})
 	});
 }
-//#endregion
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonGroupContext = require_ButtonGroupContext.ButtonGroupContext;