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

package/dist/Rating.mjs

@@ -0,0 +1,371 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { clamp } from "./utils.mjs";
+import { n as useDefaultProps } from "./theme-Z9_QludW.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
+import { useFormControl } from "./FormControl.mjs";
+import { t as isRtl } from "./isRtl-BJDtm86G.mjs";
+import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
+import { r as roundToPrecision } from "./precision-B1lhxnnO.mjs";
+import { useContext, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Rating/utils/precision.ts
+/** The value under the pointer: along the width, rounded to a step, between one step and `max`. */
+function getHoverValue({ offset, width, max, precision }) {
+	const raw = max * (offset / width) + precision / 2;
+	return clamp(roundToPrecision(raw, precision), precision, max);
+}
+//#endregion
+//#region src/Rating/hooks/useRating.ts
+const NONE = -1;
+const parseRating = (raw) => raw === "" ? null : Number.parseFloat(raw);
+const getDisplayValue = (focus, rounded) => focus === NONE ? rounded : focus;
+/**
+* A rating's state: the rating itself (controlled or not, rounded to its precision), what the
+* pointer and the focus are on, and the handlers that move them. The pointer takes priority over
+* the keys when both change at once, and pressing the chosen item again clears it.
+*/
+function useRating({ value: valueProp, defaultValue, precision, max, rootRef, onChange, onChangeActive }) {
+	const [value, setValue] = useControlled({
+		controlled: valueProp,
+		default: defaultValue ?? null
+	});
+	const rounded = roundToPrecision(value, precision);
+	const [{ hover, focus }, setActive] = useState({
+		hover: NONE,
+		focus: NONE
+	});
+	const handleMouseMove = (event) => {
+		const { left, right, width } = rootRef.current.getBoundingClientRect();
+		if (width === 0) return;
+		const next = getHoverValue({
+			offset: isRtl(rootRef.current) ? right - event.clientX : event.clientX - left,
+			width,
+			max,
+			precision
+		});
+		setActive({
+			hover: next,
+			focus: next
+		});
+		if (hover !== next) onChangeActive?.(event, next);
+	};
+	const handleMouseLeave = (event) => {
+		setActive({
+			hover: NONE,
+			focus: NONE
+		});
+		if (hover !== NONE) onChangeActive?.(event, NONE);
+	};
+	const handleChange = (event) => {
+		const next = hover === NONE ? parseRating(event.currentTarget.value) : hover;
+		setValue(next);
+		onChange?.(event, next);
+	};
+	const handleClear = (event) => {
+		if (event.clientX === 0 && event.clientY === 0) return;
+		setActive({
+			hover: NONE,
+			focus: NONE
+		});
+		setValue(null);
+		if (Number.parseFloat(event.currentTarget.value) === rounded) onChange?.(event, null);
+	};
+	const handleFocus = (event) => {
+		const next = Number.parseFloat(event.currentTarget.value);
+		setActive((previous) => ({
+			hover: previous.hover,
+			focus: next
+		}));
+	};
+	const handleBlur = () => {
+		if (hover !== NONE) return;
+		setActive((previous) => ({
+			hover: previous.hover,
+			focus: NONE
+		}));
+	};
+	return {
+		rounded,
+		displayValue: getDisplayValue(focus, rounded),
+		isActive: hover !== NONE || focus !== NONE,
+		handleMouseMove,
+		handleMouseLeave,
+		handleChange,
+		handleClear,
+		handleFocus,
+		handleBlur
+	};
+}
+//#endregion
+//#region src/Rating/Rating.tsx
+const visuallyHidden = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	border: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+};
+const RatingRoot = styled("span", {
+	name: "Rating",
+	label: "Rating",
+	shouldForwardProp: createShouldForwardProp([
+		...props,
+		"size",
+		"color",
+		"isDisabled",
+		"isReadOnly",
+		"isInField"
+	]),
+	systemProps: [src_exports.space]
+})(({ theme, size, isDisabled, isReadOnly, isInField }) => ({
+	display: isInField ? "flex" : "inline-flex",
+	position: "relative",
+	width: "min-content",
+	fontSize: theme.icon[size],
+	lineHeight: 1,
+	cursor: isReadOnly ? "default" : "pointer",
+	...isDisabled && {
+		opacity: .5,
+		cursor: "not-allowed"
+	},
+	...(isDisabled || isReadOnly) && { pointerEvents: "none" }
+}));
+const focusRing = (theme, color) => {
+	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		outline: `${theme.borderWidths.base} solid ${main}`,
+		outlineOffset: theme.borderWidths.thin
+	};
+};
+const RatingItem = styled("label", {
+	name: "Rating",
+	slot: "item",
+	label: "RatingItem",
+	shouldForwardProp: createShouldForwardProp(["color"])
+})(({ theme, color }) => ({
+	display: "block",
+	position: "relative",
+	cursor: "inherit",
+	"&:has(input:focus-visible)": focusRing(theme, color)
+}));
+const RatingEmptyLabel = styled("label", {
+	name: "Rating",
+	slot: "emptyLabel",
+	label: "RatingEmptyLabel",
+	shouldForwardProp: createShouldForwardProp(["color"])
+})(({ theme, color }) => ({
+	position: "absolute",
+	inset: 0,
+	pointerEvents: "none",
+	"&:has(input:focus-visible)": focusRing(theme, color)
+}));
+const RatingInput = styled("input", {
+	name: "Rating",
+	slot: "input",
+	label: "RatingInput"
+})(visuallyHidden);
+const RatingText = styled("span", {
+	name: "Rating",
+	slot: "text",
+	label: "RatingText"
+})(visuallyHidden);
+const getIconColor = (theme, { color, isFilled, isError }) => {
+	if (isFilled) return (0, src_exports.get)(theme, `palette.${color}.main`);
+	if (isError) return (0, src_exports.get)(theme, "palette.error.main");
+	return (0, src_exports.get)(theme, "text.disabled");
+};
+const activeTransform = (isActive) => isActive ? "scale(1.2)" : "none";
+const RatingIcon = styled("span", {
+	name: "Rating",
+	slot: "icon",
+	label: "RatingIcon",
+	shouldForwardProp: createShouldForwardProp([
+		"color",
+		"isFilled",
+		"isActive",
+		"isError"
+	])
+})(({ theme, ...style }) => ({
+	display: "flex",
+	flexShrink: 0,
+	width: "max-content",
+	pointerEvents: "none",
+	color: getIconColor(theme, style),
+	transition: "transform 0.2s",
+	transform: activeTransform(style.isActive),
+	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+}));
+const RatingDecimal = styled("span", {
+	name: "Rating",
+	slot: "decimal",
+	label: "RatingDecimal",
+	shouldForwardProp: createShouldForwardProp(["isActive"])
+})(({ isActive }) => ({
+	position: "relative",
+	display: "flex",
+	transition: "transform 0.2s",
+	transform: activeTransform(isActive),
+	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+}));
+function Item({ itemValue, isFilled, isActive, isChecked, isInteractive, label, labelStyle, icon, emptyIcon, name, required, disabled, color, isError, state }) {
+	const glyph = /* @__PURE__ */ jsx(RatingIcon, {
+		color,
+		isFilled,
+		isActive,
+		isError,
+		children: isFilled ? icon : emptyIcon
+	});
+	if (!isInteractive) return /* @__PURE__ */ jsx(RatingItem, {
+		as: "span",
+		color,
+		style: labelStyle,
+		children: glyph
+	});
+	return /* @__PURE__ */ jsxs(RatingItem, {
+		color,
+		style: labelStyle,
+		children: [
+			glyph,
+			/* @__PURE__ */ jsx(RatingText, { children: label }),
+			/* @__PURE__ */ jsx(RatingInput, {
+				type: "radio",
+				name,
+				value: itemValue,
+				checked: isChecked,
+				required,
+				disabled,
+				onChange: state.handleChange,
+				onClick: state.handleClear,
+				onFocus: state.handleFocus,
+				onBlur: state.handleBlur
+			})
+		]
+	});
+}
+/**
+* @description A rating: a row of icons the user sets - or, `readOnly`, shows. A group of visually
+* hidden native radio inputs, so keys (Tab to the rating, the arrows to change it), assistive
+* technology and forms work as the platform's; hovering previews the value, and pressing the
+* chosen item clears it. In a `FormControl` it takes the field's size, color, error and
+* disabled state, and its `FormLabel` names it.
+*/
+function Rating({ value, defaultValue, onChange, onChangeActive, max: maxProp, precision: precisionProp, highlightSelectedOnly: highlightSelectedOnlyProp, icon: iconProp, emptyIcon: emptyIconProp, getLabelText = String, emptyLabelText, readOnly = false, size: sizeProp, color: colorProp, disabled: disabledProp, required: requiredProp, error: errorProp, name: nameProp, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = useDefaultProps("Rating");
+	const isInField = useContext(FormControlContext) !== null;
+	const fc = useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp ?? dp.size,
+		color: colorProp ?? dp.color
+	});
+	const color = fc.color ?? "warning";
+	const max = maxProp ?? dp.max ?? 5;
+	const precision = precisionProp ?? dp.precision ?? 1;
+	const highlightSelectedOnly = highlightSelectedOnlyProp ?? dp.highlightSelectedOnly ?? false;
+	const icon = iconProp ?? /* @__PURE__ */ jsx(Icon, {
+		name: "star",
+		size: "1em",
+		color: "inherit"
+	});
+	const emptyIcon = emptyIconProp ?? /* @__PURE__ */ jsx(Icon, {
+		name: "star_border",
+		size: "1em",
+		color: "inherit"
+	});
+	const generatedName = useId();
+	const name = nameProp ?? generatedName;
+	const isInput = !readOnly;
+	const rootRef = useRef(null);
+	const state = useRating({
+		value,
+		defaultValue,
+		precision,
+		max,
+		rootRef,
+		onChange,
+		onChangeActive
+	});
+	const shown = state.displayValue ?? 0;
+	const renderItem = (itemValue, labelStyle, isActive = false) => /* @__PURE__ */ jsx(Item, {
+		itemValue,
+		isFilled: highlightSelectedOnly ? itemValue === shown : itemValue <= shown,
+		isActive,
+		isChecked: itemValue === state.rounded,
+		isInteractive: isInput,
+		label: getLabelText(itemValue),
+		labelStyle,
+		icon,
+		emptyIcon,
+		name,
+		required: fc.required,
+		disabled: fc.disabled,
+		color,
+		isError: fc.error,
+		state
+	}, itemValue);
+	const items = Array.from({ length: max }, (_, index) => {
+		const itemValue = index + 1;
+		const isActive = state.isActive && itemValue === Math.ceil(shown);
+		if (precision >= 1) return renderItem(itemValue, void 0, isActive);
+		const steps = Math.round(1 / precision);
+		return /* @__PURE__ */ jsx(RatingDecimal, {
+			isActive,
+			children: Array.from({ length: steps }, (__, step) => {
+				const stepValue = roundToPrecision(itemValue - 1 + (step + 1) * precision, precision);
+				const isLast = step === steps - 1;
+				const width = stepValue === state.displayValue ? `${(step + 1) * precision * 100}%` : "0%";
+				return renderItem(stepValue, isLast ? void 0 : {
+					width,
+					overflow: "hidden",
+					position: "absolute"
+				});
+			})
+		}, itemValue);
+	});
+	const displayLabel = isInput ? void 0 : getLabelText(state.rounded ?? 0);
+	const groupProps = isInput ? {
+		role: "radiogroup",
+		"aria-labelledby": ariaLabelledby ?? fc.labelId,
+		"aria-describedby": ariaDescribedby ?? fc["aria-describedby"],
+		"aria-required": fc.required || void 0,
+		"aria-invalid": fc.error || void 0,
+		onMouseMove: state.handleMouseMove,
+		onMouseLeave: state.handleMouseLeave
+	} : {
+		role: "img",
+		"aria-labelledby": ariaLabelledby
+	};
+	return /* @__PURE__ */ jsxs(RatingRoot, {
+		ref: rootRef,
+		id: fc.id,
+		size: fc.size,
+		color,
+		isDisabled: fc.disabled,
+		isReadOnly: readOnly,
+		isInField,
+		className,
+		"data-testid": dataTestid,
+		"aria-label": ariaLabel ?? displayLabel,
+		...groupProps,
+		...spaceProps,
+		children: [items, isInput && !fc.disabled && emptyLabelText !== void 0 && /* @__PURE__ */ jsxs(RatingEmptyLabel, {
+			color,
+			children: [/* @__PURE__ */ jsx(RatingInput, {
+				type: "radio",
+				name,
+				value: "",
+				checked: state.rounded === null,
+				onChange: state.handleChange
+			}), /* @__PURE__ */ jsx(RatingText, { children: emptyLabelText })]
+		})]
+	});
+}
+//#endregion
+export { Rating };

package/dist/Select.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-BXlAP3xf.cjs");
-const require_Icon = require("./Icon-CI6q2Eyi.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_Icon = require("./Icon-D-EWsBVg.cjs");
 const require_FormControl = require("./FormControl.cjs");
 const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 const require_NativeSelect = require("./NativeSelect.cjs");
-const require_Popover = require("./Popover-TpwRSORC.cjs");
+const require_Popover = require("./Popover-CiZfgiKE.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");
@@ -230,7 +230,7 @@ const ListBox = require_src.styled("ul", {
 	overflowY: "auto",
 	listStyle: "none"
 }));
-function Select({ children, native = false, multiple = false, autoWidth = false, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId, "aria-label": ariaLabel, className, "data-testid": dataTestid, ...spaceProps }) {
+function Select({ children, native = false, multiple = false, autoWidth = false, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId: labelIdProp, "aria-label": ariaLabel, className, "data-testid": dataTestid, ...spaceProps }) {
 	const fc = require_FormControl.useFormControl({
 		id: idProp,
 		error: errorProp,
@@ -242,6 +242,7 @@ function Select({ children, native = false, multiple = false, autoWidth = false,
 		textColor: textColorProp
 	});
 	const { id, error, disabled, required, size, fullWidth } = fc;
+	const labelId = labelIdProp ?? fc.labelId;
 	const theme = require_theme.useTheme();
 	const color = fc.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
 	const bg = bgProp ?? require_themeDefault.themeDefault(theme, "inputBg", "terminal");

package/dist/Select.d.cts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { n as IconProps, r as IconName } from "./index-Ctqajtac.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { n as IconProps, r as IconName } from "./index-Dv_fk1_F.cjs";
 import { ReactNode } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Select/utils/isOptionSelected.d.ts
@@ -65,6 +64,6 @@ interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width
   className?: string;
   'data-testid'?: string;
 }
-declare function Select({ children, native, multiple, autoWidth, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId, 'aria-label': ariaLabel, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<SelectProps>): import("react").JSX.Element;
+declare function Select({ children, native, multiple, autoWidth, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId: labelIdProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<SelectProps>): import("react").JSX.Element;
 //#endregion
 export { Select, SelectBackgroundToken, SelectColor, SelectProps, SelectSize, SelectTextColor, type SelectValue, SelectVariant };

package/dist/Select.d.mts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { n as IconProps, r as IconName } from "./index-DO9J-Fla.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { n as IconProps, r as IconName } from "./index-ha1WjSZ5.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ReactNode } from "react";
 //#region src/Select/utils/isOptionSelected.d.ts
@@ -65,6 +64,6 @@ interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width
   className?: string;
   'data-testid'?: string;
 }
-declare function Select({ children, native, multiple, autoWidth, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId, 'aria-label': ariaLabel, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<SelectProps>): import("react").JSX.Element;
+declare function Select({ children, native, multiple, autoWidth, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId: labelIdProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<SelectProps>): import("react").JSX.Element;
 //#endregion
 export { Select, SelectBackgroundToken, SelectColor, SelectProps, SelectSize, SelectTextColor, type SelectValue, SelectVariant };

package/dist/Select.mjs

@@ -1,13 +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 { r as useTheme } from "./theme-CDVxig_g.mjs";
-import { t as Icon } from "./Icon-CH3asUJu.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import { NativeSelect } from "./NativeSelect.mjs";
-import { t as Popover } from "./Popover-DwnSLpp1.mjs";
+import { t as Popover } from "./Popover-QjM5Z1CR.mjs";
 import { Children, cloneElement, isValidElement, useCallback, useId, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Select/hooks/useSelectPopover.ts
 /**
 * Owns `Select`'s open state (controlled or uncontrolled) and fires the open/close
@@ -228,7 +228,7 @@ const ListBox = styled("ul", {
 	overflowY: "auto",
 	listStyle: "none"
 }));
-function Select({ children, native = false, multiple = false, autoWidth = false, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId, "aria-label": ariaLabel, className, "data-testid": dataTestid, ...spaceProps }) {
+function Select({ children, native = false, multiple = false, autoWidth = false, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId: labelIdProp, "aria-label": ariaLabel, className, "data-testid": dataTestid, ...spaceProps }) {
 	const fc = useFormControl({
 		id: idProp,
 		error: errorProp,
@@ -240,6 +240,7 @@ function Select({ children, native = false, multiple = false, autoWidth = false,
 		textColor: textColorProp
 	});
 	const { id, error, disabled, required, size, fullWidth } = fc;
+	const labelId = labelIdProp ?? fc.labelId;
 	const theme = useTheme();
 	const color = fc.color ?? themeDefault(theme, "color", "primary");
 	const bg = bgProp ?? themeDefault(theme, "inputBg", "terminal");
@@ -420,7 +421,7 @@ function NonNativeSelect({ children, options, value, autoWidth, onChangeValue, m
 			onSelect: selectValue
 		});
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs(Trigger, {
 			ref: setAnchorEl,
 			role: "combobox",

package/dist/Sidebar/Sidebar.d.cts

@@ -1,4 +1,4 @@
-import { n as FlexProps } from "../index-CA7HnbtH.cjs";
+import { Jt as FlexProps } from "../index-DJ0f69wh.cjs";
 import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.cjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Sidebar/Sidebar/Sidebar.d.ts

package/dist/Sidebar/Sidebar.d.mts

@@ -1,4 +1,4 @@
-import { n as FlexProps } from "../index-CKZaErxJ.mjs";
+import { Jt as FlexProps } from "../index-CJhK7JND.mjs";
 import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Sidebar/Sidebar/Sidebar.d.ts

package/dist/Sidebar/SidebarItem.cjs

@@ -3,7 +3,7 @@ const require_src = require("../src-DU81aGy9.cjs");
 const require_Flex = require("../Flex.cjs");
 const require_utils = require("../utils.cjs");
 const require_Typography = require("../Typography.cjs");
-const require_Icon = require("../Icon-CI6q2Eyi.cjs");
+const require_Icon = require("../Icon-D-EWsBVg.cjs");
 const require_Portal = require("../Portal.cjs");
 const require_Pressable = require("../Pressable.cjs");
 const require_SidebarContext = require("../SidebarContext-jG6OioC-.cjs");

package/dist/Sidebar/SidebarItem.d.cts

@@ -1,7 +1,6 @@
-import { T as Theme } from "../themes-Kbk9h5cN.cjs";
-import "../index-DBUwu65Z.cjs";
-import { r as IconName } from "../index-Ctqajtac.cjs";
-import { i as PressableProps } from "../index-CxUsrlg1.cjs";
+import { W as Theme } from "../index-DJ0f69wh.cjs";
+import { r as IconName } from "../index-Dv_fk1_F.cjs";
+import { i as PressableProps } from "../index-YKrfFC_I.cjs";
 import { i as SidebarItemVariant } from "../SidebarContext-B1lWrt77.cjs";
 import { ReactNode } from "react";
 //#region src/Sidebar/SidebarItem/SidebarItem.d.ts

package/dist/Sidebar/SidebarItem.d.mts

@@ -1,7 +1,6 @@
-import { T as Theme } from "../themes-RX2UX5gD.mjs";
-import "../index-C1WqEDtQ.mjs";
-import { r as IconName } from "../index-DO9J-Fla.mjs";
-import { i as PressableProps } from "../index-GpnmW6vu.mjs";
+import { W as Theme } from "../index-CJhK7JND.mjs";
+import { r as IconName } from "../index-ha1WjSZ5.mjs";
+import { i as PressableProps } from "../index-CUz2h5xY.mjs";
 import { i as SidebarItemVariant } from "../SidebarContext-B1lWrt77.mjs";
 import { ReactNode } from "react";
 //#region src/Sidebar/SidebarItem/SidebarItem.d.ts

package/dist/Sidebar/SidebarItem.mjs

@@ -2,12 +2,12 @@ import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
 import { Flex } from "../Flex.mjs";
 import { alpha } from "../utils.mjs";
 import { Typography } from "../Typography.mjs";
-import { t as Icon } from "../Icon-CH3asUJu.mjs";
+import { t as Icon } from "../Icon-BihOAP4u.mjs";
 import { Portal } from "../Portal.mjs";
 import { Pressable } from "../Pressable.mjs";
 import { t as SidebarContext } from "../SidebarContext-DgSLwjur.mjs";
 import { useContext, useEffect } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Sidebar/SidebarItem/SidebarItem.tsx
 const densityStyles = ({ theme, size }) => {
 	const s = theme.sizes[size];
@@ -83,7 +83,7 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		onClick?.(event);
 		onSelect?.();
 	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarItemRoot, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SidebarItemRoot, {
 		feedback: resolvedVariant === "plain" ? "none" : "highlight",
 		color,
 		size,

package/dist/Skeleton.d.cts

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

package/dist/Skeleton.d.mts

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