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

package/dist/Backdrop.d.cts

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

package/dist/Backdrop.d.mts

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

package/dist/Badge.cjs

@@ -0,0 +1,130 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-DzfwuzMZ.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/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)
+			})
+		]
+	});
+}
+//#endregion
+exports.Badge = Badge;

package/dist/Badge.d.cts

@@ -0,0 +1,45 @@
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { ReactNode } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+//#region src/Badge/Badge.d.ts
+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;
+//#endregion
+export { Badge, BadgeAnchorOrigin, BadgeColor, BadgeOverlap, BadgeProps, BadgeVariant };

package/dist/Badge.d.mts

@@ -0,0 +1,45 @@
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { ReactNode } from "react";
+//#region src/Badge/Badge.d.ts
+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;
+//#endregion
+export { Badge, BadgeAnchorOrigin, BadgeColor, BadgeOverlap, BadgeProps, BadgeVariant };

package/dist/Badge.mjs

@@ -0,0 +1,128 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps } from "./theme-oBfFhJm9.mjs";
+import { cloneElement, isValidElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region 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)
+			})
+		]
+	});
+}
+//#endregion
+export { Badge };

package/dist/Breadcrumbs.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-DzfwuzMZ.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");
+const require_Icon = require("./Icon-BE7bRsqR.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Breadcrumbs/Breadcrumbs.tsx

package/dist/Breadcrumbs.d.cts

@@ -1,6 +1,6 @@
-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-XN4-ZqTB.cjs";
+import { a as TypographyProps } from "./index-BDqIc6Gx.cjs";
+import { n as IconProps } from "./index-05VGk0y_.cjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Breadcrumbs/Breadcrumbs.d.ts
 interface BreadcrumbsProps extends Omit<TypographyProps, 'children' | 'variant'> {

package/dist/Breadcrumbs.d.mts

@@ -1,6 +1,6 @@
-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-CRQ7XLri.mjs";
+import { a as TypographyProps } from "./index-BPh60KDs.mjs";
+import { n as IconProps } from "./index-DNj5P2NH.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Breadcrumbs/Breadcrumbs.d.ts
 interface BreadcrumbsProps extends Omit<TypographyProps, 'children' | 'variant'> {

package/dist/Breadcrumbs.mjs

@@ -1,8 +1,8 @@
 import { a as src_exports, o as styled } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps } from "./theme-oBfFhJm9.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 { t as Icon } from "./Icon-0hPpk-WZ.mjs";
 import { Children, isValidElement, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Breadcrumbs/Breadcrumbs.tsx

package/dist/Button.cjs

@@ -1,10 +1,11 @@
 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-BxXuXRgQ.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_CircularProgress = require("./CircularProgress.cjs");
 const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
+const require_getAnchorRel = require("./getAnchorRel-_vtAXC-4.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");
@@ -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,

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

package/dist/Button.mjs

@@ -1,9 +1,10 @@
 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-Z9_QludW.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-oBfFhJm9.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { CircularProgress } from "./CircularProgress.mjs";
 import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
+import { t as getAnchorRel } from "./getAnchorRel-CySI28HJ.mjs";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Button/Button.tsx
@@ -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,

package/dist/ButtonGroup.cjs

@@ -1,7 +1,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_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_ButtonGroupContext = require("./ButtonGroupContext-NtkVeDVE.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

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-CQfJZADG.cjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-Dk4KuTPB.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-BrgwkY6z.mjs";
+import { a as ButtonGroupProps, i as ButtonGroupOrientation, n as ButtonGroupContextValue, o as ButtonGroupRadius, r as ButtonGroup, t as ButtonGroupContext } from "./index-MWUGpG-Y.mjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/ButtonGroup.mjs

@@ -1,6 +1,6 @@
 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 { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/Card.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-DzfwuzMZ.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");
+const require_Icon = require("./Icon-BE7bRsqR.cjs");
 const require_Paper = require("./Paper.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Card.d.cts

@@ -1,7 +1,7 @@
-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 { ln as PaperProps } from "./index-XN4-ZqTB.cjs";
+import { a as TypographyProps } from "./index-BDqIc6Gx.cjs";
+import { n as IconProps, r as IconName } from "./index-05VGk0y_.cjs";
+import "./index-x3WC9ViD.cjs";
 import { ReactNode } from "react";
 //#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';

package/dist/Card.d.mts

@@ -1,7 +1,7 @@
-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 { ln as PaperProps } from "./index-CRQ7XLri.mjs";
+import { a as TypographyProps } from "./index-BPh60KDs.mjs";
+import { n as IconProps, r as IconName } from "./index-DNj5P2NH.mjs";
+import "./index-fPRELf0V.mjs";
 import { ReactNode } from "react";
 //#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';

package/dist/Card.mjs

@@ -1,8 +1,8 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-oBfFhJm9.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { t as Icon } from "./Icon-0hPpk-WZ.mjs";
 import { Paper } from "./Paper.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/Checkbox.cjs

@@ -121,19 +121,26 @@ const fullWidthStyle = ({ fullWidth }) => fullWidth ? {
 	display: "flex",
 	width: "100%"
 } : {};
+const CheckboxLabel = require_src.styled("span", {
+	name: "Checkbox",
+	slot: "label",
+	label: "CheckboxLabel",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["textColor"])
+})(({ theme, textColor }) => textColor ? { color: (0, require_src.src_exports.get)(theme, `text.${textColor}`) } : {});
 const CheckboxRoot = require_src.styled("label", {
 	name: "Checkbox",
 	label: "Checkbox",
 	shouldForwardProp,
 	systemProps: [require_src.src_exports.space]
 })(baseStyle, colorStyle, fullWidthStyle);
-function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colorProp, size: sizeProp, fullWidth: fullWidthProp, indeterminate = false, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colorProp, textColor: textColorProp, size: sizeProp, fullWidth: fullWidthProp, indeterminate = false, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
 	const fc = require_FormControl.useFormControl({
 		id: idProp,
 		disabled: disabledProp,
 		required: requiredProp,
 		size: sizeProp,
-		fullWidth: fullWidthProp
+		fullWidth: fullWidthProp,
+		textColor: textColorProp
 	});
 	const { id, disabled, required, size, fullWidth } = fc;
 	const color = colorProp ?? fc.color;
@@ -184,7 +191,10 @@ function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colo
 					})
 				]
 			}),
-			children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children })
+			children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxLabel, {
+				textColor: fc.textColor,
+				children
+			})
 		]
 	});
 }

package/dist/Checkbox.d.cts

@@ -1,4 +1,4 @@
-import { P as PaletteColor, W as Theme } from "./index-DJ0f69wh.cjs";
+import { U as PaletteColor, nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { ChangeEvent, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Checkbox/Checkbox.d.ts
@@ -13,6 +13,8 @@ interface CheckboxProps extends SpaceProps<Theme> {
   disabled?: boolean;
   /** Stroke/fill color. `'default'` resolves to `theme.text.secondary`. Default: `'default'`. */
   color?: CheckboxColor;
+  /** Text color of the label, resolves against `theme.text`. Default: the control's `FormControl` or `Form` `textColor`, else the control's color. */
+  textColor?: keyof Theme['text'];
   /** Icon size. Default: `'medium'`. */
   size?: CheckboxSize;
   /** Stretches the root to `width: 100%`. Default: `false`. */
@@ -38,6 +40,6 @@ interface CheckboxProps extends SpaceProps<Theme> {
   'aria-describedby'?: string;
   'data-testid'?: string;
 }
-declare function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colorProp, size: sizeProp, fullWidth: fullWidthProp, indeterminate, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<CheckboxProps>): import("react").JSX.Element;
+declare function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colorProp, textColor: textColorProp, size: sizeProp, fullWidth: fullWidthProp, indeterminate, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<CheckboxProps>): import("react").JSX.Element;
 //#endregion
 export { Checkbox, CheckboxColor, CheckboxProps, CheckboxSize };