@soroush.tech/design-system 0.1.0 → 1.1.0

package/dist/TextInput.d.cts

@@ -1,2 +1,80 @@
-import { a as TextInputSize, i as TextInputProps, n as TextInputClasses, o as TextInputTextColor, r as TextInputColor, s as TextInputVariant, t as TextInput } from "./index-C5_ciaeo.cjs";
+import { r as index_d_exports } from "./index-DLJ-li1B.cjs";
+import { h as Theme } from "./themes-CUV79qWU.cjs";
+import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+//#region src/TextInput/TextInput.d.ts
+type TextInputColor = keyof Theme['palette'];
+type TextInputTextColor = keyof Theme['text'];
+type TextInputVariant = 'default' | 'outlined' | 'text' | 'underline';
+type TextInputSize = keyof Theme['sizes'];
+interface TextInputClasses {
+  root?: string;
+  input?: string;
+}
+interface TextInputProps extends index_d_exports.SpaceProps<Theme>, Pick<index_d_exports.LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+  /** Corner radius — applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
+  borderRadius?: keyof Theme['radii'];
+  autoComplete?: string;
+  autoFocus?: boolean;
+  /** Class names applied to inner elements. `root` targets the wrapper; `input` targets the native element. */
+  classes?: TextInputClasses;
+  /** Override components for the Root and Input slots. */
+  components?: {
+    Input?: ElementType;
+    Root?: ElementType;
+  };
+  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: TextInputColor;
+  /** Text color of the typed value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  textColor?: TextInputTextColor;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the field as invalid — applies error border color. */
+  error?: boolean;
+  /** Stretches the root to fill its container. */
+  fullWidth?: boolean;
+  id?: string;
+  /** Custom component for the input element. Takes priority over `components.Input`. Default: `'input'`. */
+  inputComponent?: ElementType;
+  /** Native HTML `size` attribute — visible width in character widths. Has no effect with `multiline` or `resize`. */
+  inputSize?: number;
+  /** Extra props spread onto the native element. Explicit top-level props take priority. */
+  inputProps?: InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>;
+  /** Maximum rows before the auto-grow textarea starts scrolling. Only applies when `resize` is set. */
+  maxRows?: number | string;
+  /** Minimum rows for the auto-grow textarea. Only applies when `resize` is set. */
+  minRows?: number | string;
+  /**
+   * Renders a `<textarea>` that grows with its content.
+   * Combine with `rows` to fix the height instead of auto-growing.
+   */
+  multiline?: boolean;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  placeholder?: string;
+  readOnly?: boolean;
+  required?: boolean;
+  /** Auto-grows the textarea as content increases. Requires `multiline`. */
+  resize?: boolean;
+  /** Controls padding and font size. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: TextInputSize;
+  /**
+   * Fixes the textarea height to this many rows. Also enables `multiline`
+   * when value is greater than 1. Disables resize.
+   */
+  rows?: number | string;
+  /** HTML input type. Ignored when multiline. Default: `'text'`. */
+  type?: string;
+  /**
+   * Visual style of the input.
+   * - `outlined` / `default` — full border box (default)
+   * - `underline` — border on bottom only
+   * - `text` — no border, transparent background
+   */
+  variant?: TextInputVariant;
+  value?: string | number | readonly string[];
+  className?: string;
+  'data-testid'?: string;
+}
+declare function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline, name, onChange, placeholder, readOnly, required: requiredProp, resize, rows, size: sizeProp, type, value, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TextInputProps>): import("react").JSX.Element;
+//#endregion
 export { TextInput, TextInputClasses, TextInputColor, TextInputProps, TextInputSize, TextInputTextColor, TextInputVariant };

package/dist/TextInput.d.mts

@@ -1,2 +1,80 @@
-import { a as TextInputSize, i as TextInputProps, n as TextInputClasses, o as TextInputTextColor, r as TextInputColor, s as TextInputVariant, t as TextInput } from "./index-Bwi4kRpf.mjs";
+import { h as Theme } from "./themes-CUV79qWU.mjs";
+import { r as index_d_exports } from "./index-D8b5OCLe.mjs";
+import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+//#region src/TextInput/TextInput.d.ts
+type TextInputColor = keyof Theme['palette'];
+type TextInputTextColor = keyof Theme['text'];
+type TextInputVariant = 'default' | 'outlined' | 'text' | 'underline';
+type TextInputSize = keyof Theme['sizes'];
+interface TextInputClasses {
+  root?: string;
+  input?: string;
+}
+interface TextInputProps extends index_d_exports.SpaceProps<Theme>, Pick<index_d_exports.LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+  /** Corner radius — applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
+  borderRadius?: keyof Theme['radii'];
+  autoComplete?: string;
+  autoFocus?: boolean;
+  /** Class names applied to inner elements. `root` targets the wrapper; `input` targets the native element. */
+  classes?: TextInputClasses;
+  /** Override components for the Root and Input slots. */
+  components?: {
+    Input?: ElementType;
+    Root?: ElementType;
+  };
+  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: TextInputColor;
+  /** Text color of the typed value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  textColor?: TextInputTextColor;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the field as invalid — applies error border color. */
+  error?: boolean;
+  /** Stretches the root to fill its container. */
+  fullWidth?: boolean;
+  id?: string;
+  /** Custom component for the input element. Takes priority over `components.Input`. Default: `'input'`. */
+  inputComponent?: ElementType;
+  /** Native HTML `size` attribute — visible width in character widths. Has no effect with `multiline` or `resize`. */
+  inputSize?: number;
+  /** Extra props spread onto the native element. Explicit top-level props take priority. */
+  inputProps?: InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>;
+  /** Maximum rows before the auto-grow textarea starts scrolling. Only applies when `resize` is set. */
+  maxRows?: number | string;
+  /** Minimum rows for the auto-grow textarea. Only applies when `resize` is set. */
+  minRows?: number | string;
+  /**
+   * Renders a `<textarea>` that grows with its content.
+   * Combine with `rows` to fix the height instead of auto-growing.
+   */
+  multiline?: boolean;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  placeholder?: string;
+  readOnly?: boolean;
+  required?: boolean;
+  /** Auto-grows the textarea as content increases. Requires `multiline`. */
+  resize?: boolean;
+  /** Controls padding and font size. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: TextInputSize;
+  /**
+   * Fixes the textarea height to this many rows. Also enables `multiline`
+   * when value is greater than 1. Disables resize.
+   */
+  rows?: number | string;
+  /** HTML input type. Ignored when multiline. Default: `'text'`. */
+  type?: string;
+  /**
+   * Visual style of the input.
+   * - `outlined` / `default` — full border box (default)
+   * - `underline` — border on bottom only
+   * - `text` — no border, transparent background
+   */
+  variant?: TextInputVariant;
+  value?: string | number | readonly string[];
+  className?: string;
+  'data-testid'?: string;
+}
+declare function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline, name, onChange, placeholder, readOnly, required: requiredProp, resize, rows, size: sizeProp, type, value, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TextInputProps>): import("react").JSX.Element;
+//#endregion
 export { TextInput, TextInputClasses, TextInputColor, TextInputProps, TextInputSize, TextInputTextColor, TextInputVariant };

package/dist/TextInput.mjs

@@ -1,2 +1,227 @@
-import { t as TextInput } from "./TextInput-D_lHYJlL.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { r as useTheme } from "./theme-V6lYzd3j.mjs";
+import { useFormControl } from "./FormControl.mjs";
+import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
+import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/TextInput/TextAreaAutoResize.tsx
+const adjust = (el, minRows, maxRows) => {
+	const style = getComputedStyle(el);
+	const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2;
+	const paddingY = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+	el.style.height = "auto";
+	const scrollHeight = el.scrollHeight;
+	const min = minRows == null ? 0 : Number(minRows) * lineHeight + paddingY;
+	const max = maxRows == null ? Infinity : Number(maxRows) * lineHeight + paddingY;
+	el.style.height = `${Math.min(max, Math.max(min, scrollHeight))}px`;
+	el.style.overflow = scrollHeight > max ? "auto" : "hidden";
+};
+const TextAreaAutoResize = forwardRef(function TextAreaAutoResize({ value, onChange, minRows, maxRows, ...rest }, forwardedRef) {
+	const innerRef = useRef(null);
+	const setRef = useCallback((el) => {
+		innerRef.current = el;
+		if (typeof forwardedRef === "function") forwardedRef(el);
+		else if (forwardedRef) forwardedRef.current = el;
+	}, [forwardedRef]);
+	useLayoutEffect(() => {
+		adjust(innerRef.current, minRows, maxRows);
+	}, [
+		value,
+		minRows,
+		maxRows
+	]);
+	return /* @__PURE__ */ jsx("textarea", {
+		ref: setRef,
+		value,
+		onChange: useCallback((e) => {
+			adjust(e.currentTarget, minRows, maxRows);
+			onChange?.(e);
+		}, [
+			onChange,
+			minRows,
+			maxRows
+		]),
+		...rest
+	});
+});
+//#endregion
+//#region src/TextInput/TextInput.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"as",
+	"color",
+	"textColor",
+	"variant",
+	"error",
+	"disabled",
+	"fullWidth"
+]);
+const baseStyle = {
+	display: "inline-flex",
+	alignItems: "center",
+	transition: "border-color 0.15s ease"
+};
+const backgroundStyle = ({ theme, textColor = themeDefault(theme, "accentTextColor", "primary") }) => {
+	return {
+		backgroundColor: (0, src_exports.get)(theme, `background.${themeDefault(theme, "inputBg", "terminal")}`),
+		color: (0, src_exports.get)(theme, `text.${textColor}`),
+		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
+		fontSize: (0, src_exports.get)(theme, "fontSizes.1"),
+		lineHeight: (0, src_exports.get)(theme, "lineHeights.base")
+	};
+};
+const colorBorder = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
+	return { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.light`) };
+};
+const focusVisibleRing = ({ theme }) => {
+	return { "&:has(:focus-visible)": {
+		outline: `2px solid ${(0, src_exports.get)(theme, `palette.${themeDefault(theme, "color", "primary")}.main`)}`,
+		outlineOffset: "2px"
+	} };
+};
+const focusWithinColor = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => ({ "&:focus-within": { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`) } });
+const borderRadiusStyle = ({ variant: v = "default", borderRadius, theme }) => {
+	if (v === "underline" || v === "text" || !borderRadius) return {};
+	return { borderRadius: (0, src_exports.get)(theme, `radii.${borderRadius}`) };
+};
+const layoutStyles = ({ fullWidth, disabled }) => ({
+	...fullWidth ? {
+		display: "flex",
+		width: "100%"
+	} : {},
+	...disabled ? {
+		opacity: .5,
+		cursor: "not-allowed",
+		pointerEvents: "none"
+	} : {}
+});
+const nativeBaseStyles = {
+	flex: 1,
+	minWidth: 0,
+	width: "100%",
+	border: "none",
+	outline: "none",
+	background: "transparent",
+	color: "inherit",
+	fontFamily: "inherit",
+	lineHeight: "inherit",
+	"&::placeholder": {
+		color: "inherit",
+		opacity: .5
+	},
+	"&:disabled": { cursor: "not-allowed" }
+};
+const textAreaBaseStyles = {
+	resize: "none",
+	overflow: "auto"
+};
+function InputBase({ inputSize, inputComponent, ...props }) {
+	return /* @__PURE__ */ jsx(inputComponent ?? "input", {
+		...props,
+		size: inputSize
+	});
+}
+const widthStyles = (0, src_exports.system)({
+	width: true,
+	minWidth: true,
+	maxWidth: true
+});
+const sizeVariants = ({ theme, size }) => {
+	const s = theme.sizes[size];
+	return {
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const TextInputRoot = styled("div", {
+	name: "TextInput",
+	label: "TextInput",
+	shouldForwardProp,
+	systemProps: [src_exports.space, widthStyles]
+})(baseStyle, inputVariantStyles, borderRadiusStyle, colorBorder, focusWithinColor, focusVisibleRing, backgroundStyle, layoutStyles);
+const StyledInput = styled(InputBase, {
+	name: "TextInput",
+	slot: "input",
+	label: "TextInputInput"
+})(nativeBaseStyles, sizeVariants);
+const shouldForwardInputProps = (prop) => prop !== "size";
+const StyledTextarea = styled("textarea", {
+	name: "TextInput",
+	slot: "input",
+	label: "TextInputTextarea",
+	shouldForwardProp: shouldForwardInputProps
+})(nativeBaseStyles, textAreaBaseStyles, sizeVariants);
+const StyledAutoResizeTextarea = styled(TextAreaAutoResize, {
+	name: "TextInput",
+	slot: "input",
+	label: "TextInputTextarea",
+	shouldForwardProp: shouldForwardInputProps
+})(nativeBaseStyles, textAreaBaseStyles, sizeVariants);
+function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline = false, name, onChange, placeholder, readOnly, required: requiredProp, resize = false, rows, size: sizeProp, type = "text", value, variant: variantProp, className, "data-testid": dataTestid, ...spaceProps }) {
+	const fc = useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp,
+		fullWidth: fullWidthProp,
+		color: colorProp,
+		textColor: textColorProp
+	});
+	const { id, error, disabled, required, size, fullWidth } = fc;
+	const theme = useTheme();
+	const color = fc.color ?? themeDefault(theme, "color", "primary");
+	const textColor = fc.textColor ?? themeDefault(theme, "accentTextColor", "primary");
+	const variant = variantProp ?? themeDefault(theme, "inputVariant", "default");
+	const isAutoResize = resize;
+	const isMultiline = multiline || rows !== void 0 && Number(rows) > 1;
+	const isTextarea = (isAutoResize || isMultiline) && (!type || type === "text");
+	const rootClassName = [className, classes?.root].filter(Boolean).join(" ") || void 0;
+	const resolvedInputComponent = inputComponent ?? components?.Input;
+	const inputElProps = {
+		...inputProps,
+		id,
+		name,
+		disabled,
+		required,
+		autoComplete,
+		autoFocus,
+		placeholder,
+		readOnly,
+		onChange,
+		value,
+		className: classes?.input,
+		type: isTextarea ? void 0 : type,
+		rows: isMultiline && rows !== void 0 ? Number(rows) : void 0,
+		size,
+		"aria-describedby": inputProps?.["aria-describedby"] ?? fc["aria-describedby"]
+	};
+	return /* @__PURE__ */ jsx(TextInputRoot, {
+		as: components?.Root,
+		color,
+		textColor,
+		variant,
+		error,
+		disabled,
+		fullWidth,
+		borderRadius,
+		className: rootClassName,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: isTextarea && isAutoResize ? /* @__PURE__ */ jsx(StyledAutoResizeTextarea, {
+			...inputElProps,
+			minRows: minRows ?? rows,
+			maxRows
+		}) : isTextarea ? /* @__PURE__ */ jsx(StyledTextarea, { ...inputElProps }) : /* @__PURE__ */ jsx(StyledInput, {
+			inputComponent: resolvedInputComponent,
+			inputSize,
+			...inputElProps
+		})
+	});
+}
+//#endregion
 export { TextInput };

package/dist/ToggleButton/ToggleButton.cjs

@@ -1,13 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-BiocWFSR.cjs");
-const require_themeDefault = require("../themeDefault-B-QjpGEO.cjs");
+const require_src = require("../src-C8PIppTy.cjs");
+const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
 const require_utils = require("../utils.cjs");
+const require_theme = require("../theme-Du6xgPsg.cjs");
 const require_ButtonGroupContext = require("../ButtonGroupContext-NtkVeDVE.cjs");
 const require_Button = require("../Button.cjs");
 const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-Ewc5Ixas.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _emotion_react = require("@emotion/react");
 //#region src/ToggleButton/ToggleButton/ToggleButton.tsx
 const stateStyles = ({ theme, color = require_themeDefault.themeDefault(theme, "neutralColor", "default"), isSelected }) => {
 	const c = theme.palette[color];
@@ -35,7 +35,7 @@ const isValueSelected = (value, groupValue) => {
 function ToggleButton({ value, isSelected, color, onChange, onClick, type = "button", ...rest }) {
 	const group = (0, react.useContext)(require_ToggleButtonGroupContext.ToggleButtonGroupContext);
 	const buttonGroup = (0, react.useContext)(require_ButtonGroupContext.ButtonGroupContext);
-	const theme = (0, _emotion_react.useTheme)();
+	const theme = require_theme.useTheme();
 	const selected = isSelected ?? isValueSelected(value, group.value);
 	const resolvedColor = color ?? buttonGroup.color ?? require_themeDefault.themeDefault(theme, "neutralColor", "default");
 	const handleClick = (event) => {

package/dist/ToggleButton/ToggleButton.d.cts

@@ -1,4 +1,4 @@
-import { i as ButtonProps } from "../index-DASvoACZ.cjs";
+import { i as ButtonProps } from "../index-BJ8OC_Zh.cjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CqD-Afho.cjs";
 //#region src/ToggleButton/ToggleButton/ToggleButton.d.ts
 interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {

package/dist/ToggleButton/ToggleButton.d.mts

@@ -1,4 +1,4 @@
-import { i as ButtonProps } from "../index-C0xMvDjL.mjs";
+import { i as ButtonProps } from "../index-D8U2tk1L.mjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CqD-Afho.mjs";
 //#region src/ToggleButton/ToggleButton/ToggleButton.d.ts
 interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {

package/dist/ToggleButton/ToggleButton.mjs

@@ -1,6 +1,7 @@
-import { d as styled, l as src_exports, u as useTheme } from "../src-DcNT2aIK.mjs";
-import { t as themeDefault } from "../themeDefault-CjXaY3ok.mjs";
+import { a as src_exports, o as styled } from "../src-BJy4dM4f.mjs";
+import { t as themeDefault } from "../themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "../utils.mjs";
+import { r as useTheme } from "../theme-V6lYzd3j.mjs";
 import { t as ButtonGroupContext } from "../ButtonGroupContext-DS-kl9lG.mjs";
 import { Button } from "../Button.mjs";
 import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-DxIyy8ze.mjs";

package/dist/ToggleButton/ToggleButtonGroup.cjs

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-BiocWFSR.cjs");
-const require_themeDefault = require("../themeDefault-B-QjpGEO.cjs");
+const require_src = require("../src-C8PIppTy.cjs");
+const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
+const require_theme = require("../theme-Du6xgPsg.cjs");
 const require_ButtonGroup = require("../ButtonGroup.cjs");
 const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-Ewc5Ixas.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _emotion_react = require("@emotion/react");
 //#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.tsx
 const selectedEdgeStyles = ({ theme, orientation = "horizontal", color = require_themeDefault.themeDefault(theme, "neutralColor", "default") }) => {
 	return { "& > [aria-pressed=\"true\"]:not(:first-of-type)": { [orientation === "vertical" ? "borderTopColor" : "borderLeftColor"]: theme.palette[color].main } };
@@ -21,7 +21,7 @@ const ToggleButtonGroupRoot = require_src.styled(require_ButtonGroup.ButtonGroup
 * through `ButtonGroup` as usual.
 */
 function ToggleButtonGroup({ value = null, onChange, isExclusive = false, color: colorProp, children, ...rest }) {
-	const theme = (0, _emotion_react.useTheme)();
+	const theme = require_theme.useTheme();
 	const color = colorProp ?? require_themeDefault.themeDefault(theme, "neutralColor", "default");
 	const context = (0, react.useMemo)(() => {
 		const handleToggle = (buttonValue) => {

package/dist/ToggleButton/ToggleButtonGroup.d.cts

@@ -1,4 +1,4 @@
-import { a as ButtonGroupProps } from "../index-CyZYXDn0.cjs";
+import { a as ButtonGroupProps } from "../index--mvTGo8F.cjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CqD-Afho.cjs";
 //#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.d.ts
 interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {

package/dist/ToggleButton/ToggleButtonGroup.d.mts

@@ -1,4 +1,4 @@
-import { a as ButtonGroupProps } from "../index-BqVgv2B_.mjs";
+import { a as ButtonGroupProps } from "../index-DF3Hweir.mjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CqD-Afho.mjs";
 //#region src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.d.ts
 interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {

package/dist/ToggleButton/ToggleButtonGroup.mjs

@@ -1,5 +1,6 @@
-import { d as styled, u as useTheme } from "../src-DcNT2aIK.mjs";
-import { t as themeDefault } from "../themeDefault-CjXaY3ok.mjs";
+import { o as styled } from "../src-BJy4dM4f.mjs";
+import { t as themeDefault } from "../themeDefault-Z3KmyIbm.mjs";
+import { r as useTheme } from "../theme-V6lYzd3j.mjs";
 import { ButtonGroup } from "../ButtonGroup.mjs";
 import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-DxIyy8ze.mjs";
 import { useMemo } from "react";

package/dist/ToggleButton.d.cts

@@ -1,4 +1,4 @@
 import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CqD-Afho.cjs";
-import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.cjs";
 import { ToggleButton, ToggleButtonProps } from "./ToggleButton/ToggleButton.cjs";
+import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.cjs";
 export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext, ToggleButtonGroupContextValue, ToggleButtonGroupProps, ToggleButtonProps, ToggleButtonValue };

package/dist/ToggleButton.d.mts

@@ -1,4 +1,4 @@
 import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CqD-Afho.mjs";
-import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.mjs";
 import { ToggleButton, ToggleButtonProps } from "./ToggleButton/ToggleButton.mjs";
+import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.mjs";
 export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext, ToggleButtonGroupContextValue, ToggleButtonGroupProps, ToggleButtonProps, ToggleButtonValue };

package/dist/Typography.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
+const require_theme = require("./theme-Du6xgPsg.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");
-let _emotion_react = require("@emotion/react");
 //#region src/Typography/Typography.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
@@ -52,7 +52,7 @@ const TypographyBase = require_src.styled("p", {
 	whiteSpace: "nowrap"
 } : {});
 function Typography({ variant = "body1", as, ...rest }) {
-	const theme = (0, _emotion_react.useTheme)();
+	const theme = require_theme.useTheme();
 	const element = as ?? theme.typography[variant].element;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TypographyBase, {
 		as: element,

package/dist/Typography.d.cts

@@ -1,3 +1,3 @@
-import { F as TypographyVariant } from "./themes-D81JYbqm.cjs";
-import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-CDVnvjIE.cjs";
+import { L as TypographyVariant } from "./themes-CUV79qWU.cjs";
+import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-CvaEVk-f.cjs";
 export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/Typography.d.mts

@@ -1,3 +1,3 @@
-import { F as TypographyVariant } from "./themes-D1SAp3SL.mjs";
-import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-DE5PtzPn.mjs";
+import { L as TypographyVariant } from "./themes-CUV79qWU.mjs";
+import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-B2hrssyF.mjs";
 export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/Typography.mjs

@@ -1,4 +1,5 @@
-import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
+import { r as useTheme } from "./theme-V6lYzd3j.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Typography/Typography.tsx

package/dist/View.cjs

@@ -1,12 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
+const require_src = require("./src-C8PIppTy.cjs");
 require("react");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 //#region src/View/View.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
 	"cursor",
-	"aspectRatio",
 	"order"
 ]);
 const colorSystem = (0, require_src.src_exports.system)({
@@ -20,7 +19,6 @@ const colorSystem = (0, require_src.src_exports.system)({
 	},
 	opacity: { property: "opacity" },
 	cursor: { property: "cursor" },
-	aspectRatio: { property: "aspectRatio" },
 	order: { property: "order" }
 });
 const View = require_src.styled("div", {

package/dist/View.d.cts

@@ -1,2 +1,2 @@
-import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-FwTocqhP.cjs";
+import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-DjtGkwRM.cjs";
 export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/View.d.mts

@@ -1,2 +1,2 @@
-import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-pX7tBQdJ.mjs";
+import { a as ViewBorderWidthToken, i as ViewBorderRadiusToken, n as ViewBackgroundToken, o as ViewColorToken, r as ViewBorderColorToken, s as ViewProps, t as View } from "./index-q6EgsH9R.mjs";
 export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/View.mjs

@@ -1,10 +1,9 @@
-import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BJy4dM4f.mjs";
 import "react";
 //#region src/View/View.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"cursor",
-	"aspectRatio",
 	"order"
 ]);
 const colorSystem = (0, src_exports.system)({
@@ -18,7 +17,6 @@ const colorSystem = (0, src_exports.system)({
 	},
 	opacity: { property: "opacity" },
 	cursor: { property: "cursor" },
-	aspectRatio: { property: "aspectRatio" },
 	order: { property: "order" }
 });
 const View = styled("div", {

package/dist/emotion-BAyqVw0c.mjs

@@ -0,0 +1,6 @@
+import { CacheProvider, Global, ThemeContext as EmotionThemeContext, ThemeProvider as EmotionThemeProvider, useTheme as useEmotionTheme } from "@emotion/react";
+//#region src/theme/emotion.ts
+/** `Global`, retyped against this package's own `Theme` (see `styled.ts`'s `StyledTags`). */
+const Global$1 = Global;
+//#endregion
+export { useEmotionTheme as a, Global$1 as i, EmotionThemeContext as n, EmotionThemeProvider as r, CacheProvider as t };

package/dist/emotion-DviPkkGL.cjs

@@ -0,0 +1,10 @@
+//#region src/theme/emotion.ts
+/** `Global`, retyped against this package's own `Theme` (see `styled.ts`'s `StyledTags`). */
+const Global = require("@emotion/react").Global;
+//#endregion
+Object.defineProperty(exports, "Global", {
+	enumerable: true,
+	get: function() {
+		return Global;
+	}
+});