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

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-hoHPfsc1.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-tOrd12AJ.mjs";
 export { ButtonGroup, ButtonGroupContext, ButtonGroupContextValue, ButtonGroupOrientation, ButtonGroupProps, ButtonGroupRadius };

package/dist/ButtonGroup.mjs

@@ -1,10 +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 { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
 import { alpha } from "./utils.mjs";
-import { t as ButtonGroupContext } from "./ButtonGroupContext-DS-kl9lG.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { t as ButtonGroupContext } from "./ButtonGroupContext-DK9whWFt.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/ButtonGroup/ButtonGroup.tsx
+// src/ButtonGroup/ButtonGroup.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"orientation",
@@ -103,5 +103,4 @@ function ButtonGroup({ variant = "outlined", color, size, orientation = "horizon
 		})
 	});
 }
-//#endregion
 export { ButtonGroup, ButtonGroupContext };

package/dist/{ButtonGroupContext-DS-kl9lG.mjs → ButtonGroupContext-DK9whWFt.mjs}

@@ -1,5 +1,4 @@
 import { createContext } from "react";
-//#region src/ButtonGroup/ButtonGroupContext.ts
+// src/ButtonGroup/ButtonGroupContext.ts
 const ButtonGroupContext = createContext({});
-//#endregion
 export { ButtonGroupContext as t };

package/dist/{ButtonGroupContext-NtkVeDVE.cjs → ButtonGroupContext-n0wa0q6H.cjs}

@@ -1,6 +1,5 @@
-//#region src/ButtonGroup/ButtonGroupContext.ts
+// src/ButtonGroup/ButtonGroupContext.ts
 const ButtonGroupContext = (0, require("react").createContext)({});
-//#endregion
 Object.defineProperty(exports, "ButtonGroupContext", {
 	enumerable: true,
 	get: function() {

package/dist/Card.cjs

@@ -1,13 +1,13 @@
 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");
 const require_Paper = require("./Paper.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Card/Card.tsx
+// src/Card/Card.tsx
 const variantStyle = ({ theme, variant }) => {
 	if (variant === "bracketBox") {
 		const corner = `2px solid ${theme?.border.primary}`;
@@ -90,5 +90,4 @@ function Card({ variant: variantProp, icon, title, caption, iconProps, titleProp
 		]
 	});
 }
-//#endregion
 exports.Card = Card;

package/dist/Card.d.cts

@@ -1,9 +1,8 @@
-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-Lsm4v8fB.cjs";
+import { a as TypographyProps } from "./index-CGyIuCRh.cjs";
+import { n as IconProps, r as IconName } from "./index-CAt0-L4i.cjs";
+import "./index-323PrYLR.cjs";
 import { ReactNode } from "react";
-//#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';
 interface CardProps extends Omit<PaperProps, 'title'> {
   variant?: CardVariant;
@@ -15,5 +14,4 @@ interface CardProps extends Omit<PaperProps, 'title'> {
   captionProps?: Omit<TypographyProps, 'children'>;
 }
 declare function Card({ variant: variantProp, icon, title, caption, iconProps, titleProps, captionProps, flexDirection, children, ...rest }: Readonly<CardProps>): import("react").JSX.Element;
-//#endregion
 export { Card, CardProps, CardVariant };

package/dist/Card.d.mts

@@ -1,9 +1,8 @@
-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-CR8qkP8U.mjs";
+import { a as TypographyProps } from "./index-C2a-5yop.mjs";
+import { n as IconProps, r as IconName } from "./index-D48qVo1X.mjs";
+import "./index-1Xzj0iAs.mjs";
 import { ReactNode } from "react";
-//#region src/Card/Card.d.ts
 type CardVariant = 'paper' | 'bracketBox' | 'interactive';
 interface CardProps extends Omit<PaperProps, 'title'> {
   variant?: CardVariant;
@@ -15,5 +14,4 @@ interface CardProps extends Omit<PaperProps, 'title'> {
   captionProps?: Omit<TypographyProps, 'children'>;
 }
 declare function Card({ variant: variantProp, icon, title, caption, iconProps, titleProps, captionProps, flexDirection, children, ...rest }: Readonly<CardProps>): import("react").JSX.Element;
-//#endregion
 export { Card, CardProps, CardVariant };

package/dist/Card.mjs

@@ -1,12 +1,12 @@
-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-Z9_QludW.mjs";
+import { o as styled } from "./src-B-rNjHIL.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { Typography } from "./Typography.mjs";
-import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { t as Icon } from "./Icon-XpXU-SuF.mjs";
 import { Paper } from "./Paper.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/Card/Card.tsx
+// src/Card/Card.tsx
 const variantStyle = ({ theme, variant }) => {
 	if (variant === "bracketBox") {
 		const corner = `2px solid ${theme?.border.primary}`;
@@ -89,5 +89,4 @@ function Card({ variant: variantProp, icon, title, caption, iconProps, titleProp
 		]
 	});
 }
-//#endregion
 export { Card };

package/dist/Checkbox.cjs

@@ -1,11 +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_src = require("./src-yC1f5WR2.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_FormControl = require("./FormControl.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/Checkbox/Checkbox.tsx
+// src/Checkbox/Checkbox.tsx
 const UncheckedIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	viewBox: "0 0 18 18",
 	width: "1em",
@@ -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,9 +191,11 @@ 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
+			})
 		]
 	});
 }
-//#endregion
 exports.Checkbox = Checkbox;

package/dist/Checkbox.d.cts

@@ -1,7 +1,6 @@
-import { P as PaletteColor, W as Theme } from "./index-DJ0f69wh.cjs";
+import { U as PaletteColor, nt as Theme } from "./index-Lsm4v8fB.cjs";
 import { ChangeEvent, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Checkbox/Checkbox.d.ts
 type CheckboxColor = PaletteColor;
 type CheckboxSize = keyof Theme['sizes'];
 interface CheckboxProps extends SpaceProps<Theme> {
@@ -13,6 +12,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 +39,5 @@ 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;
-//#endregion
+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;
 export { Checkbox, CheckboxColor, CheckboxProps, CheckboxSize };

package/dist/Checkbox.d.mts

@@ -1,7 +1,6 @@
-import { P as PaletteColor, W as Theme } from "./index-CJhK7JND.mjs";
+import { U as PaletteColor, nt as Theme } from "./index-CR8qkP8U.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, ReactNode } from "react";
-//#region src/Checkbox/Checkbox.d.ts
 type CheckboxColor = PaletteColor;
 type CheckboxSize = keyof Theme['sizes'];
 interface CheckboxProps extends SpaceProps<Theme> {
@@ -13,6 +12,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 +39,5 @@ 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;
-//#endregion
+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;
 export { Checkbox, CheckboxColor, CheckboxProps, CheckboxSize };

package/dist/Checkbox.mjs

@@ -1,9 +1,9 @@
-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 { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/Checkbox/Checkbox.tsx
+// src/Checkbox/Checkbox.tsx
 const UncheckedIcon = () => /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 0 18 18",
 	width: "1em",
@@ -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,9 +189,11 @@ function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colo
 					})
 				]
 			}),
-			children != null && /* @__PURE__ */ jsx("span", { children })
+			children != null && /* @__PURE__ */ jsx(CheckboxLabel, {
+				textColor: fc.textColor,
+				children
+			})
 		]
 	});
 }
-//#endregion
 export { Checkbox };

package/dist/Chip.cjs

@@ -0,0 +1,193 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_utils = require("./utils.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_Icon = require("./Icon-C5Iz5ekp.cjs");
+const require_getShapeRadius = require("./getShapeRadius-C2xXOKCl.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+// src/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"
+			})
+		})]
+	});
+}
+exports.Chip = Chip;

package/dist/Chip.d.cts

@@ -0,0 +1,47 @@
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { t as Shape } from "./getShapeRadius-CdCQb8OT.cjs";
+import { MouseEvent, ReactNode, SyntheticEvent } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+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;
+export { Chip, ChipColor, ChipProps, ChipShape, ChipSize, ChipVariant };

package/dist/Chip.d.mts

@@ -0,0 +1,47 @@
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { t as Shape } from "./getShapeRadius-CdCQb8OT.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { MouseEvent, ReactNode, SyntheticEvent } from "react";
+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;
+export { Chip, ChipColor, ChipProps, ChipShape, ChipSize, ChipVariant };