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

package/dist/Checkbox.d.mts

@@ -1,4 +1,4 @@
-import { P as PaletteColor, W as Theme } from "./index-CJhK7JND.mjs";
+import { U as PaletteColor, nt as Theme } from "./index-CRQ7XLri.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, ReactNode } from "react";
 //#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 };

package/dist/Checkbox.mjs

@@ -119,19 +119,26 @@ const fullWidthStyle = ({ fullWidth }) => fullWidth ? {
 	display: "flex",
 	width: "100%"
 } : {};
+const CheckboxLabel = styled("span", {
+	name: "Checkbox",
+	slot: "label",
+	label: "CheckboxLabel",
+	shouldForwardProp: createShouldForwardProp(["textColor"])
+})(({ theme, textColor }) => textColor ? { color: (0, src_exports.get)(theme, `text.${textColor}`) } : {});
 const CheckboxRoot = styled("label", {
 	name: "Checkbox",
 	label: "Checkbox",
 	shouldForwardProp,
 	systemProps: [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 = 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;
@@ -182,7 +189,10 @@ function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colo
 					})
 				]
 			}),
-			children != null && /* @__PURE__ */ jsx("span", { children })
+			children != null && /* @__PURE__ */ jsx(CheckboxLabel, {
+				textColor: fc.textColor,
+				children
+			})
 		]
 	});
 }

package/dist/Chip.cjs

@@ -0,0 +1,194 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-DU81aGy9.cjs");
+const require_utils = require("./utils.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_Icon = require("./Icon-BE7bRsqR.cjs");
+const require_getShapeRadius = require("./getShapeRadius-vXmXGV3f.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/Chip/Chip.tsx
+const getLine = (theme, variant, color) => {
+	if (variant === "text") return "transparent";
+	return color === "default" ? (0, require_src.src_exports.get)(theme, "border.default") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+};
+const accent = (theme, color) => color === "default" ? (0, require_src.src_exports.get)(theme, "text.initial") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+const getRadius = (theme, shape, borderRadius) => require_getShapeRadius.getShapeRadius(shape, theme.radii[borderRadius ?? require_themeDefault.themeDefault(theme, "borderRadius", "md")]);
+const ChipRoot = require_src.styled("div", {
+	name: "Chip",
+	label: "Chip",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		..._soroush_tech_styled_system_should_forward_prop.props,
+		"variant",
+		"color",
+		"size",
+		"shape",
+		"borderRadius",
+		"isDisabled"
+	]),
+	systemProps: [require_src.src_exports.space]
+})(({ theme, variant, color, size, shape, borderRadius, isDisabled }) => {
+	const { paddingTop, paddingBottom, paddingLeft, paddingRight, fontSize } = theme.sizes[size];
+	const isContained = variant === "contained";
+	const palette = (0, require_src.src_exports.get)(theme, `palette.${color}`);
+	return {
+		display: "inline-flex",
+		alignItems: "center",
+		boxSizing: "border-box",
+		maxWidth: "100%",
+		borderRadius: getRadius(theme, shape, borderRadius),
+		fontSize: theme.fontSizes[fontSize],
+		lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base"),
+		fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
+		paddingTop: theme.space[paddingTop],
+		paddingBottom: theme.space[paddingBottom],
+		paddingLeft: theme.space[paddingLeft],
+		paddingRight: theme.space[paddingRight],
+		gap: theme.space[1],
+		...isContained ? {
+			backgroundColor: palette.main,
+			color: palette.contrastText,
+			border: "none"
+		} : {
+			backgroundColor: "transparent",
+			color: accent(theme, color),
+			border: `${theme.borderWidths.thin} solid ${getLine(theme, variant, color)}`
+		},
+		...isDisabled && {
+			opacity: .5,
+			pointerEvents: "none"
+		}
+	};
+});
+const ChipBody = require_src.styled("button", {
+	name: "Chip",
+	slot: "body",
+	label: "ChipBody",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["isClickable"])
+})(({ theme, isClickable }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: theme.space[1],
+	minWidth: 0,
+	margin: 0,
+	padding: 0,
+	border: 0,
+	background: "none",
+	color: "inherit",
+	font: "inherit",
+	borderRadius: "inherit",
+	"&:focus-visible": {
+		outline: `${theme.borderWidths.base} solid ${(0, require_src.src_exports.get)(theme, "palette.primary.main")}`,
+		outlineOffset: theme.borderWidths.thin
+	},
+	...isClickable && { cursor: "pointer" }
+}));
+const ChipLabel = require_src.styled("span", {
+	name: "Chip",
+	slot: "label",
+	label: "ChipLabel"
+})({
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+});
+const ChipIconBox = require_src.styled("span", {
+	name: "Chip",
+	slot: "icon",
+	label: "ChipIcon"
+})({
+	display: "inline-flex",
+	flexShrink: 0
+});
+const ChipAvatar = require_src.styled("span", {
+	name: "Chip",
+	slot: "avatar",
+	label: "ChipAvatar"
+})({
+	display: "inline-flex",
+	flexShrink: 0,
+	marginInlineStart: "-0.25em"
+});
+const ChipDelete = require_src.styled("button", {
+	name: "Chip",
+	slot: "deleteIcon",
+	label: "ChipDeleteIcon"
+})(({ theme }) => ({
+	display: "inline-flex",
+	flexShrink: 0,
+	alignItems: "center",
+	justifyContent: "center",
+	margin: 0,
+	padding: 0,
+	border: 0,
+	borderRadius: "50%",
+	background: "none",
+	color: "inherit",
+	opacity: .7,
+	cursor: "pointer",
+	"&:hover": {
+		opacity: 1,
+		backgroundColor: require_utils.alpha((0, require_src.src_exports.get)(theme, "text.initial"), .12)
+	},
+	"&:focus-visible": { outline: `${theme.borderWidths.base} solid ${(0, require_src.src_exports.get)(theme, "palette.primary.main")}` }
+}));
+/**
+* @description A compact tag: a label, an icon or an avatar, and - given `onClick` - a button, and
+* - given `onDelete` - a delete control. A clickable chip is one tab stop; a deletable one deletes
+* through its control and through Backspace and Delete, so the control itself is out of the tab
+* order. Its text is the theme's `contrastText` on the color, so its contrast is the theme's.
+*/
+function Chip({ label, variant: variantProp, color: colorProp, size: sizeProp, shape: shapeProp, borderRadius: borderRadiusProp, icon, avatar, onClick, onDelete, deleteLabel: deleteLabelProp, disabled = false, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = require_theme.useDefaultProps("Chip");
+	const variant = variantProp ?? dp.variant ?? "contained";
+	const color = colorProp ?? dp.color ?? "default";
+	const size = sizeProp ?? dp.size ?? "md";
+	const shape = shapeProp ?? dp.shape ?? "pill";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const deleteLabel = deleteLabelProp ?? dp.deleteLabel;
+	const isClickable = onClick !== void 0;
+	const isDeletable = onDelete !== void 0;
+	const handleKeyDown = (event) => {
+		if (!isDeletable || event.key !== "Backspace" && event.key !== "Delete") return;
+		event.preventDefault();
+		onDelete(event);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChipRoot, {
+		variant,
+		color,
+		size,
+		shape,
+		borderRadius,
+		isDisabled: disabled,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChipBody, {
+			as: isClickable ? "button" : "span",
+			type: isClickable ? "button" : void 0,
+			tabIndex: !isClickable && isDeletable && !disabled ? 0 : void 0,
+			disabled: isClickable ? disabled : void 0,
+			isClickable,
+			onClick,
+			onKeyDown: handleKeyDown,
+			children: [
+				avatar ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipAvatar, { children: avatar }) : null,
+				!avatar && icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipIconBox, { children: icon }) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipLabel, { children: label })
+			]
+		}), isDeletable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipDelete, {
+			type: "button",
+			tabIndex: -1,
+			"aria-label": deleteLabel,
+			disabled,
+			onClick: onDelete,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				name: "close",
+				size: "1em",
+				color: "inherit"
+			})
+		})]
+	});
+}
+//#endregion
+exports.Chip = Chip;

package/dist/Chip.d.cts

@@ -0,0 +1,49 @@
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { t as Shape } from "./getShapeRadius-B9ytqDSk.cjs";
+import { MouseEvent, ReactNode, SyntheticEvent } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+//#region src/Chip/Chip.d.ts
+type ChipVariant = 'contained' | 'outlined' | 'text';
+type ChipColor = keyof Theme['palette'];
+type ChipSize = keyof Theme['sizes'];
+type ChipShape = Shape;
+interface ChipProps extends SpaceProps<Theme> {
+  /** What the chip says. */
+  label?: ReactNode;
+  /** Filled, outlined, or only its text - as `Button`'s. Default: `'contained'`. */
+  variant?: ChipVariant;
+  /** Resolves to `theme.palette`. Default: `'default'`. */
+  color?: ChipColor;
+  /** Resolves against `theme.sizes`. Default: `'md'`. */
+  size?: ChipSize;
+  /**
+   * Corner shape: `'square'` is 0, `'pill'` a full round, `'rounded'` the radius of `borderRadius`.
+   * Default: `'pill'`.
+   */
+  shape?: ChipShape;
+  /** The radius of a `'rounded'` chip, resolves against `theme.radii`. Default: `theme.defaults.borderRadius`, else `'md'`. Other shapes ignore it. */
+  borderRadius?: keyof Theme['radii'];
+  /** An icon before the label. An `avatar` takes its place. */
+  icon?: ReactNode;
+  /** An avatar before the label. */
+  avatar?: ReactNode;
+  /** Makes the chip a button. */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  /** Shows a delete control, and deletes on Backspace and Delete too. */
+  onDelete?: (event: SyntheticEvent) => void;
+  /** Names the delete control - no built-in English. */
+  deleteLabel?: string;
+  /** Stays as it is, off. Default: `false`. */
+  disabled?: boolean;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A compact tag: a label, an icon or an avatar, and - given `onClick` - a button, and
+ * - given `onDelete` - a delete control. A clickable chip is one tab stop; a deletable one deletes
+ * through its control and through Backspace and Delete, so the control itself is out of the tab
+ * order. Its text is the theme's `contrastText` on the color, so its contrast is the theme's.
+ */
+declare function Chip({ label, variant: variantProp, color: colorProp, size: sizeProp, shape: shapeProp, borderRadius: borderRadiusProp, icon, avatar, onClick, onDelete, deleteLabel: deleteLabelProp, disabled, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<ChipProps>): import("react").JSX.Element;
+//#endregion
+export { Chip, ChipColor, ChipProps, ChipShape, ChipSize, ChipVariant };

package/dist/Chip.d.mts

@@ -0,0 +1,49 @@
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { t as Shape } from "./getShapeRadius-B9ytqDSk.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { MouseEvent, ReactNode, SyntheticEvent } from "react";
+//#region src/Chip/Chip.d.ts
+type ChipVariant = 'contained' | 'outlined' | 'text';
+type ChipColor = keyof Theme['palette'];
+type ChipSize = keyof Theme['sizes'];
+type ChipShape = Shape;
+interface ChipProps extends SpaceProps<Theme> {
+  /** What the chip says. */
+  label?: ReactNode;
+  /** Filled, outlined, or only its text - as `Button`'s. Default: `'contained'`. */
+  variant?: ChipVariant;
+  /** Resolves to `theme.palette`. Default: `'default'`. */
+  color?: ChipColor;
+  /** Resolves against `theme.sizes`. Default: `'md'`. */
+  size?: ChipSize;
+  /**
+   * Corner shape: `'square'` is 0, `'pill'` a full round, `'rounded'` the radius of `borderRadius`.
+   * Default: `'pill'`.
+   */
+  shape?: ChipShape;
+  /** The radius of a `'rounded'` chip, resolves against `theme.radii`. Default: `theme.defaults.borderRadius`, else `'md'`. Other shapes ignore it. */
+  borderRadius?: keyof Theme['radii'];
+  /** An icon before the label. An `avatar` takes its place. */
+  icon?: ReactNode;
+  /** An avatar before the label. */
+  avatar?: ReactNode;
+  /** Makes the chip a button. */
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  /** Shows a delete control, and deletes on Backspace and Delete too. */
+  onDelete?: (event: SyntheticEvent) => void;
+  /** Names the delete control - no built-in English. */
+  deleteLabel?: string;
+  /** Stays as it is, off. Default: `false`. */
+  disabled?: boolean;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A compact tag: a label, an icon or an avatar, and - given `onClick` - a button, and
+ * - given `onDelete` - a delete control. A clickable chip is one tab stop; a deletable one deletes
+ * through its control and through Backspace and Delete, so the control itself is out of the tab
+ * order. Its text is the theme's `contrastText` on the color, so its contrast is the theme's.
+ */
+declare function Chip({ label, variant: variantProp, color: colorProp, size: sizeProp, shape: shapeProp, borderRadius: borderRadiusProp, icon, avatar, onClick, onDelete, deleteLabel: deleteLabelProp, disabled, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<ChipProps>): import("react").JSX.Element;
+//#endregion
+export { Chip, ChipColor, ChipProps, ChipShape, ChipSize, ChipVariant };

package/dist/Chip.mjs

@@ -0,0 +1,192 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { alpha } from "./utils.mjs";
+import { n as useDefaultProps } from "./theme-oBfFhJm9.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { t as Icon } from "./Icon-0hPpk-WZ.mjs";
+import { t as getShapeRadius } from "./getShapeRadius-sY6-AGP4.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Chip/Chip.tsx
+const getLine = (theme, variant, color) => {
+	if (variant === "text") return "transparent";
+	return color === "default" ? (0, src_exports.get)(theme, "border.default") : (0, src_exports.get)(theme, `palette.${color}.main`);
+};
+const accent = (theme, color) => color === "default" ? (0, src_exports.get)(theme, "text.initial") : (0, src_exports.get)(theme, `palette.${color}.main`);
+const getRadius = (theme, shape, borderRadius) => getShapeRadius(shape, theme.radii[borderRadius ?? themeDefault(theme, "borderRadius", "md")]);
+const ChipRoot = styled("div", {
+	name: "Chip",
+	label: "Chip",
+	shouldForwardProp: createShouldForwardProp([
+		...props,
+		"variant",
+		"color",
+		"size",
+		"shape",
+		"borderRadius",
+		"isDisabled"
+	]),
+	systemProps: [src_exports.space]
+})(({ theme, variant, color, size, shape, borderRadius, isDisabled }) => {
+	const { paddingTop, paddingBottom, paddingLeft, paddingRight, fontSize } = theme.sizes[size];
+	const isContained = variant === "contained";
+	const palette = (0, src_exports.get)(theme, `palette.${color}`);
+	return {
+		display: "inline-flex",
+		alignItems: "center",
+		boxSizing: "border-box",
+		maxWidth: "100%",
+		borderRadius: getRadius(theme, shape, borderRadius),
+		fontSize: theme.fontSizes[fontSize],
+		lineHeight: (0, src_exports.get)(theme, "lineHeights.base"),
+		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
+		paddingTop: theme.space[paddingTop],
+		paddingBottom: theme.space[paddingBottom],
+		paddingLeft: theme.space[paddingLeft],
+		paddingRight: theme.space[paddingRight],
+		gap: theme.space[1],
+		...isContained ? {
+			backgroundColor: palette.main,
+			color: palette.contrastText,
+			border: "none"
+		} : {
+			backgroundColor: "transparent",
+			color: accent(theme, color),
+			border: `${theme.borderWidths.thin} solid ${getLine(theme, variant, color)}`
+		},
+		...isDisabled && {
+			opacity: .5,
+			pointerEvents: "none"
+		}
+	};
+});
+const ChipBody = styled("button", {
+	name: "Chip",
+	slot: "body",
+	label: "ChipBody",
+	shouldForwardProp: createShouldForwardProp(["isClickable"])
+})(({ theme, isClickable }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: theme.space[1],
+	minWidth: 0,
+	margin: 0,
+	padding: 0,
+	border: 0,
+	background: "none",
+	color: "inherit",
+	font: "inherit",
+	borderRadius: "inherit",
+	"&:focus-visible": {
+		outline: `${theme.borderWidths.base} solid ${(0, src_exports.get)(theme, "palette.primary.main")}`,
+		outlineOffset: theme.borderWidths.thin
+	},
+	...isClickable && { cursor: "pointer" }
+}));
+const ChipLabel = styled("span", {
+	name: "Chip",
+	slot: "label",
+	label: "ChipLabel"
+})({
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+});
+const ChipIconBox = styled("span", {
+	name: "Chip",
+	slot: "icon",
+	label: "ChipIcon"
+})({
+	display: "inline-flex",
+	flexShrink: 0
+});
+const ChipAvatar = styled("span", {
+	name: "Chip",
+	slot: "avatar",
+	label: "ChipAvatar"
+})({
+	display: "inline-flex",
+	flexShrink: 0,
+	marginInlineStart: "-0.25em"
+});
+const ChipDelete = styled("button", {
+	name: "Chip",
+	slot: "deleteIcon",
+	label: "ChipDeleteIcon"
+})(({ theme }) => ({
+	display: "inline-flex",
+	flexShrink: 0,
+	alignItems: "center",
+	justifyContent: "center",
+	margin: 0,
+	padding: 0,
+	border: 0,
+	borderRadius: "50%",
+	background: "none",
+	color: "inherit",
+	opacity: .7,
+	cursor: "pointer",
+	"&:hover": {
+		opacity: 1,
+		backgroundColor: alpha((0, src_exports.get)(theme, "text.initial"), .12)
+	},
+	"&:focus-visible": { outline: `${theme.borderWidths.base} solid ${(0, src_exports.get)(theme, "palette.primary.main")}` }
+}));
+/**
+* @description A compact tag: a label, an icon or an avatar, and - given `onClick` - a button, and
+* - given `onDelete` - a delete control. A clickable chip is one tab stop; a deletable one deletes
+* through its control and through Backspace and Delete, so the control itself is out of the tab
+* order. Its text is the theme's `contrastText` on the color, so its contrast is the theme's.
+*/
+function Chip({ label, variant: variantProp, color: colorProp, size: sizeProp, shape: shapeProp, borderRadius: borderRadiusProp, icon, avatar, onClick, onDelete, deleteLabel: deleteLabelProp, disabled = false, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = useDefaultProps("Chip");
+	const variant = variantProp ?? dp.variant ?? "contained";
+	const color = colorProp ?? dp.color ?? "default";
+	const size = sizeProp ?? dp.size ?? "md";
+	const shape = shapeProp ?? dp.shape ?? "pill";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const deleteLabel = deleteLabelProp ?? dp.deleteLabel;
+	const isClickable = onClick !== void 0;
+	const isDeletable = onDelete !== void 0;
+	const handleKeyDown = (event) => {
+		if (!isDeletable || event.key !== "Backspace" && event.key !== "Delete") return;
+		event.preventDefault();
+		onDelete(event);
+	};
+	return /* @__PURE__ */ jsxs(ChipRoot, {
+		variant,
+		color,
+		size,
+		shape,
+		borderRadius,
+		isDisabled: disabled,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [/* @__PURE__ */ jsxs(ChipBody, {
+			as: isClickable ? "button" : "span",
+			type: isClickable ? "button" : void 0,
+			tabIndex: !isClickable && isDeletable && !disabled ? 0 : void 0,
+			disabled: isClickable ? disabled : void 0,
+			isClickable,
+			onClick,
+			onKeyDown: handleKeyDown,
+			children: [
+				avatar ? /* @__PURE__ */ jsx(ChipAvatar, { children: avatar }) : null,
+				!avatar && icon ? /* @__PURE__ */ jsx(ChipIconBox, { children: icon }) : null,
+				/* @__PURE__ */ jsx(ChipLabel, { children: label })
+			]
+		}), isDeletable && /* @__PURE__ */ jsx(ChipDelete, {
+			type: "button",
+			tabIndex: -1,
+			"aria-label": deleteLabel,
+			disabled,
+			onClick: onDelete,
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "close",
+				size: "1em",
+				color: "inherit"
+			})
+		})]
+	});
+}
+//#endregion
+export { Chip };

package/dist/CircularProgress.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");
 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/CircularProgress.d.cts

@@ -1,5 +1,5 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { n as ButtonColor } from "./index-DAwcmIjN.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { n as ButtonColor } from "./index-BQge4W7L.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,5 +1,5 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { n as ButtonColor } from "./index-CG_1uPrD.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { n as ButtonColor } from "./index-DK3zgGPe.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/CircularProgress/CircularProgress.d.ts

package/dist/CircularProgress.mjs

@@ -1,6 +1,6 @@
 import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { clamp } from "./utils.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/CircularProgress/CircularProgress.tsx