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

package/dist/Flex.d.mts

@@ -1,2 +1,2 @@
-import { n as FlexProps, r as GapToken, t as Flex } from "./index-CKZaErxJ.mjs";
+import { Jt as FlexProps, Yt as GapToken, qt as Flex } from "./index-CJhK7JND.mjs";
 export { Flex, FlexProps, GapToken };

package/dist/Form.d.cts

@@ -1,4 +1,4 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
+import { W as Theme } from "./index-DJ0f69wh.cjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/Form.d.mts

@@ -1,4 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
+import { W as Theme } from "./index-CJhK7JND.mjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/FormControl.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_View = require("./View.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
 const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
 let react = require("react");
@@ -21,10 +21,15 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 	const generatedId = (0, react.useId)();
 	const resolvedId = id ?? generatedId;
 	const helperId = `${resolvedId}-helper`;
+	const labelId = `${resolvedId}-label`;
 	const [hasHelperText, setHasHelperText] = (0, react.useState)(false);
+	const [registeredLabelId, setRegisteredLabelId] = (0, react.useState)(null);
 	const value = (0, react.useMemo)(() => ({
 		id: resolvedId,
 		helperId,
+		labelId,
+		registeredLabelId,
+		setLabelId: setRegisteredLabelId,
 		error,
 		disabled,
 		required,
@@ -37,6 +42,8 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 	}), [
 		resolvedId,
 		helperId,
+		labelId,
+		registeredLabelId,
 		error,
 		disabled,
 		required,
@@ -75,7 +82,8 @@ function useFormControl(overrides = {}) {
 		fullWidth: overrides.fullWidth ?? control?.fullWidth ?? form.fullWidth ?? false,
 		color: overrides.color ?? control?.color ?? form.color,
 		textColor: overrides.textColor ?? control?.textColor ?? form.textColor,
-		"aria-describedby": control?.hasHelperText ? control.helperId : void 0
+		"aria-describedby": control?.hasHelperText ? control.helperId : void 0,
+		labelId: control?.registeredLabelId ?? void 0
 	};
 }
 //#endregion

package/dist/FormControl.d.cts

@@ -1,5 +1,4 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import { s as ViewProps } from "./index-nB94D7UM.cjs";
+import { W as Theme, nn as ViewProps } from "./index-DJ0f69wh.cjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {
@@ -36,6 +35,12 @@ interface FormControlContextValue {
   color?: keyof Theme['palette'];
   /** Text color for label/helper/input content - resolves against `theme.text`. */
   textColor?: keyof Theme['text'];
+  /** The id a FormLabel takes when it is not given one of its own. */
+  labelId: string;
+  /** The id of the FormLabel now rendered - a group control (a radio group, a rating) names itself by it - or `null` with none. */
+  registeredLabelId: string | null;
+  /** Stable setter FormLabel calls to register its rendered id, and to clear it when it goes. */
+  setLabelId: (id: string | null) => void;
   /** Whether a FormHelperText is currently rendered - drives `aria-describedby` on the control. */
   hasHelperText: boolean;
   /** Stable setter FormHelperText calls to register/unregister its presence. */
@@ -67,6 +72,8 @@ interface ResolvedFormControl {
   textColor?: keyof Theme['text'];
   /** Points at the helper text id only while one is rendered - avoids a dangling reference. */
   'aria-describedby'?: string;
+  /** The FormLabel's id while one is rendered - for a group control, which a `for` can't label. */
+  labelId?: string;
 }
 /**
  * Merges a control's explicit props with FormControl and Form context.

package/dist/FormControl.d.mts

@@ -1,5 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import { s as ViewProps } from "./index-cuv3o-L7.mjs";
+import { W as Theme, nn as ViewProps } from "./index-CJhK7JND.mjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {
@@ -36,6 +35,12 @@ interface FormControlContextValue {
   color?: keyof Theme['palette'];
   /** Text color for label/helper/input content - resolves against `theme.text`. */
   textColor?: keyof Theme['text'];
+  /** The id a FormLabel takes when it is not given one of its own. */
+  labelId: string;
+  /** The id of the FormLabel now rendered - a group control (a radio group, a rating) names itself by it - or `null` with none. */
+  registeredLabelId: string | null;
+  /** Stable setter FormLabel calls to register its rendered id, and to clear it when it goes. */
+  setLabelId: (id: string | null) => void;
   /** Whether a FormHelperText is currently rendered - drives `aria-describedby` on the control. */
   hasHelperText: boolean;
   /** Stable setter FormHelperText calls to register/unregister its presence. */
@@ -67,6 +72,8 @@ interface ResolvedFormControl {
   textColor?: keyof Theme['text'];
   /** Points at the helper text id only while one is rendered - avoids a dangling reference. */
   'aria-describedby'?: string;
+  /** The FormLabel's id while one is rendered - for a group control, which a `for` can't label. */
+  labelId?: string;
 }
 /**
  * Merges a control's explicit props with FormControl and Form context.

package/dist/FormControl.mjs

@@ -1,7 +1,7 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
 import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
 import { useContext, useId, useMemo, useState } from "react";
@@ -20,10 +20,15 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 	const generatedId = useId();
 	const resolvedId = id ?? generatedId;
 	const helperId = `${resolvedId}-helper`;
+	const labelId = `${resolvedId}-label`;
 	const [hasHelperText, setHasHelperText] = useState(false);
+	const [registeredLabelId, setRegisteredLabelId] = useState(null);
 	const value = useMemo(() => ({
 		id: resolvedId,
 		helperId,
+		labelId,
+		registeredLabelId,
+		setLabelId: setRegisteredLabelId,
 		error,
 		disabled,
 		required,
@@ -36,6 +41,8 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 	}), [
 		resolvedId,
 		helperId,
+		labelId,
+		registeredLabelId,
 		error,
 		disabled,
 		required,
@@ -74,7 +81,8 @@ function useFormControl(overrides = {}) {
 		fullWidth: overrides.fullWidth ?? control?.fullWidth ?? form.fullWidth ?? false,
 		color: overrides.color ?? control?.color ?? form.color,
 		textColor: overrides.textColor ?? control?.textColor ?? form.textColor,
-		"aria-describedby": control?.hasHelperText ? control.helperId : void 0
+		"aria-describedby": control?.hasHelperText ? control.helperId : void 0,
+		labelId: control?.registeredLabelId ?? void 0
 	};
 }
 //#endregion

package/dist/FormHelperText.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BSqet8aO.cjs";
+import { a as TypographyProps } from "./index-K5exjvnX.cjs";
 import { ReactNode } from "react";
 //#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {

package/dist/FormHelperText.d.mts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-smqjMLAZ.mjs";
+import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
 import { ReactNode } from "react";
 //#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {

package/dist/FormLabel.cjs

@@ -15,14 +15,22 @@ const FormLabelRoot = require_src.styled(require_Typography.Typography, {
 * `required` flag from FormControl context. All Typography props pass through,
 * so callers can restyle freely while keeping the wiring automatic.
 */
-function FormLabel({ children, required, htmlFor, color, ...rest }) {
+function FormLabel({ children, required, htmlFor, id, color, ...rest }) {
 	const control = (0, react.useContext)(require_FormControlContext.FormControlContext);
 	const form = (0, react.useContext)(require_FormContext.FormContext);
 	const isRequired = required ?? control?.required ?? false;
 	const resolvedFor = htmlFor ?? control?.id;
+	const renderedId = id ?? control?.labelId;
+	const setLabelId = control?.setLabelId;
+	(0, react.useEffect)(() => {
+		if (!setLabelId || !renderedId) return void 0;
+		setLabelId(renderedId);
+		return () => setLabelId(null);
+	}, [setLabelId, renderedId]);
 	const resolvedColor = color ?? control?.textColor ?? form.textColor;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FormLabelRoot, {
 		as: "label",
+		id: renderedId,
 		htmlFor: resolvedFor,
 		variant: "body2",
 		...rest,

package/dist/FormLabel.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-BSqet8aO.cjs";
+import { a as TypographyProps } from "./index-K5exjvnX.cjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {
@@ -13,6 +13,6 @@ interface FormLabelProps extends TypographyProps {
  * `required` flag from FormControl context. All Typography props pass through,
  * so callers can restyle freely while keeping the wiring automatic.
  */
-declare function FormLabel({ children, required, htmlFor, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
+declare function FormLabel({ children, required, htmlFor, id, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
 //#endregion
 export { FormLabel, FormLabelProps };

package/dist/FormLabel.d.mts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-smqjMLAZ.mjs";
+import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {
@@ -13,6 +13,6 @@ interface FormLabelProps extends TypographyProps {
  * `required` flag from FormControl context. All Typography props pass through,
  * so callers can restyle freely while keeping the wiring automatic.
  */
-declare function FormLabel({ children, required, htmlFor, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
+declare function FormLabel({ children, required, htmlFor, id, color, ...rest }: Readonly<FormLabelProps>): import("react").JSX.Element;
 //#endregion
 export { FormLabel, FormLabelProps };

package/dist/FormLabel.mjs

@@ -2,7 +2,7 @@ import { o as styled } from "./src-DLGYOJMh.mjs";
 import { Typography } from "./Typography.mjs";
 import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
 import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { jsxs } from "react/jsx-runtime";
 //#region src/FormLabel/FormLabel.tsx
 const FormLabelRoot = styled(Typography, {
@@ -14,14 +14,22 @@ const FormLabelRoot = styled(Typography, {
 * `required` flag from FormControl context. All Typography props pass through,
 * so callers can restyle freely while keeping the wiring automatic.
 */
-function FormLabel({ children, required, htmlFor, color, ...rest }) {
+function FormLabel({ children, required, htmlFor, id, color, ...rest }) {
 	const control = useContext(FormControlContext);
 	const form = useContext(FormContext);
 	const isRequired = required ?? control?.required ?? false;
 	const resolvedFor = htmlFor ?? control?.id;
+	const renderedId = id ?? control?.labelId;
+	const setLabelId = control?.setLabelId;
+	useEffect(() => {
+		if (!setLabelId || !renderedId) return void 0;
+		setLabelId(renderedId);
+		return () => setLabelId(null);
+	}, [setLabelId, renderedId]);
 	const resolvedColor = color ?? control?.textColor ?? form.textColor;
 	return /* @__PURE__ */ jsxs(FormLabelRoot, {
 		as: "label",
+		id: renderedId,
 		htmlFor: resolvedFor,
 		variant: "body2",
 		...rest,

package/dist/Grid.d.cts

@@ -1,6 +1,4 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { s as ViewProps } from "./index-nB94D7UM.cjs";
+import { W as Theme, nn as ViewProps } from "./index-DJ0f69wh.cjs";
 import { FlexboxProps, GridProps as GridProps$1, LayoutGridProps } from "@soroush.tech/styled-system";
 //#region src/Grid/Grid.d.ts
 /** Valid values for the gap / columnGap / rowGap props - derived from theme.space keys. */

package/dist/Grid.d.mts

@@ -1,6 +1,4 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { s as ViewProps } from "./index-cuv3o-L7.mjs";
+import { W as Theme, nn as ViewProps } from "./index-CJhK7JND.mjs";
 import { FlexboxProps, GridProps as GridProps$1, LayoutGridProps } from "@soroush.tech/styled-system";
 //#region src/Grid/Grid.d.ts
 /** Valid values for the gap / columnGap / rowGap props - derived from theme.space keys. */

package/dist/{Icon-CH3asUJu.mjs → Icon-BihOAP4u.mjs}

@@ -1,6 +1,6 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Icon/icons/AccountTree.tsx
@@ -12,6 +12,15 @@ const SvgAccountTree = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M604-120v-125H450v-410h-93v130H80v-315h277v125h247v-125h276v315H604v-130h-94v350h94v-130h276v315H604ZM140-780v195-195Zm524 405v195-195Zm0-405v195-195Zm0 195h156v-195H664v195Zm0 405h156v-195H664v195ZM140-585h157v-195H140v195Z" })
 });
 //#endregion
+//#region src/Icon/icons/Add.tsx
+const SvgAdd = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" })
+});
+//#endregion
 //#region src/Icon/icons/AdsClick.tsx
 const SvgAdsClick = (props) => /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 0 24 24",
@@ -534,6 +543,15 @@ const SvgMenu = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" })
 });
 //#endregion
+//#region src/Icon/icons/MoreHoriz.tsx
+const SvgMoreHoriz = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" })
+});
+//#endregion
 //#region src/Icon/icons/Neurology.tsx
 const SvgNeurology = (props) => /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 -960 960 960",
@@ -570,6 +588,15 @@ const SvgRefresh = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z" })
 });
 //#endregion
+//#region src/Icon/icons/Remove.tsx
+const SvgRemove = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M19 13H5v-2h14v2z" })
+});
+//#endregion
 //#region src/Icon/icons/Schema.tsx
 const SvgSchema = (props) => /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 -960 960 960",
@@ -633,6 +660,24 @@ const SvgStacks = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M12 14L1 8l11-6l11 6zm0 4L1.575 12.325l2.1-1.15L12 15.725l8.325-4.55l2.1 1.15zm0 4L1.575 16.325l2.1-1.15L12 19.725l8.325-4.55l2.1 1.15z" })
 });
 //#endregion
+//#region src/Icon/icons/Star.tsx
+const SvgStar = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
+});
+//#endregion
+//#region src/Icon/icons/StarBorder.tsx
+const SvgStarBorder = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" })
+});
+//#endregion
 //#region src/Icon/icons/Table.tsx
 const SvgTable = (props) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
@@ -725,6 +770,7 @@ const SvgZoomOut = (props) => /* @__PURE__ */ jsx("svg", {
 /** Registry of available icons, keyed by their asset file name. */
 const icons = {
 	account_tree: SvgAccountTree,
+	add: SvgAdd,
 	ads_click: SvgAdsClick,
 	analytics: SvgAnalytics,
 	architecture: SvgArchitecture,
@@ -763,10 +809,12 @@ const icons = {
 	link: SvgLink,
 	lock: SvgLock,
 	menu: SvgMenu,
+	more_horiz: SvgMoreHoriz,
 	neurology: SvgNeurology,
 	psychology: SvgPsychology,
 	rebase_edit: SvgRebaseEdit,
 	refresh: SvgRefresh,
+	remove: SvgRemove,
 	schema: SvgSchema,
 	security: SvgSecurity,
 	settings_input_component: SvgSettingsInputComponent,
@@ -774,6 +822,8 @@ const icons = {
 	smartphone: SvgSmartphone,
 	speed: SvgSpeed,
 	stacks: SvgStacks,
+	star: SvgStar,
+	star_border: SvgStarBorder,
 	table: SvgTable,
 	terminal: SvgTerminal,
 	visibility: SvgVisibility,
@@ -801,7 +851,7 @@ const StyledIcon = styled("svg", {
 })({ fill: "currentColor" });
 function Icon({ name, color, size, ...rest }) {
 	const theme = useTheme();
-	const resolvedSize = size ?? theme.icon[themeDefault(theme, "iconSize", "lg")];
+	const resolvedSize = (typeof size === "string" && Object.hasOwn(theme.icon, size) ? theme.icon[size] : size) ?? theme.icon[themeDefault(theme, "iconSize", "lg")];
 	return /* @__PURE__ */ jsx(StyledIcon, {
 		as: icons[name],
 		color: color ?? themeDefault(theme, "accentTextColor", "primary"),

package/dist/{Icon-CI6q2Eyi.cjs → Icon-D-EWsBVg.cjs}

@@ -1,6 +1,6 @@
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.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");
@@ -13,6 +13,15 @@ const SvgAccountTree = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("sv
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M604-120v-125H450v-410h-93v130H80v-315h277v125h247v-125h276v315H604v-130h-94v350h94v-130h276v315H604ZM140-780v195-195Zm524 405v195-195Zm0-405v195-195Zm0 195h156v-195H664v195Zm0 405h156v-195H664v195ZM140-585h157v-195H140v195Z" })
 });
 //#endregion
+//#region src/Icon/icons/Add.tsx
+const SvgAdd = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" })
+});
+//#endregion
 //#region src/Icon/icons/AdsClick.tsx
 const SvgAdsClick = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	viewBox: "0 0 24 24",
@@ -535,6 +544,15 @@ const SvgMenu = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" })
 });
 //#endregion
+//#region src/Icon/icons/MoreHoriz.tsx
+const SvgMoreHoriz = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2" })
+});
+//#endregion
 //#region src/Icon/icons/Neurology.tsx
 const SvgNeurology = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	viewBox: "0 -960 960 960",
@@ -571,6 +589,15 @@ const SvgRefresh = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg",
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z" })
 });
 //#endregion
+//#region src/Icon/icons/Remove.tsx
+const SvgRemove = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M19 13H5v-2h14v2z" })
+});
+//#endregion
 //#region src/Icon/icons/Schema.tsx
 const SvgSchema = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	viewBox: "0 -960 960 960",
@@ -634,6 +661,24 @@ const SvgStacks = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 14L1 8l11-6l11 6zm0 4L1.575 12.325l2.1-1.15L12 15.725l8.325-4.55l2.1 1.15zm0 4L1.575 16.325l2.1-1.15L12 19.725l8.325-4.55l2.1 1.15z" })
 });
 //#endregion
+//#region src/Icon/icons/Star.tsx
+const SvgStar = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
+});
+//#endregion
+//#region src/Icon/icons/StarBorder.tsx
+const SvgStarBorder = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	fill: "#9cff93",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" })
+});
+//#endregion
 //#region src/Icon/icons/Table.tsx
 const SvgTable = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
@@ -726,6 +771,7 @@ const SvgZoomOut = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg",
 /** Registry of available icons, keyed by their asset file name. */
 const icons = {
 	account_tree: SvgAccountTree,
+	add: SvgAdd,
 	ads_click: SvgAdsClick,
 	analytics: SvgAnalytics,
 	architecture: SvgArchitecture,
@@ -764,10 +810,12 @@ const icons = {
 	link: SvgLink,
 	lock: SvgLock,
 	menu: SvgMenu,
+	more_horiz: SvgMoreHoriz,
 	neurology: SvgNeurology,
 	psychology: SvgPsychology,
 	rebase_edit: SvgRebaseEdit,
 	refresh: SvgRefresh,
+	remove: SvgRemove,
 	schema: SvgSchema,
 	security: SvgSecurity,
 	settings_input_component: SvgSettingsInputComponent,
@@ -775,6 +823,8 @@ const icons = {
 	smartphone: SvgSmartphone,
 	speed: SvgSpeed,
 	stacks: SvgStacks,
+	star: SvgStar,
+	star_border: SvgStarBorder,
 	table: SvgTable,
 	terminal: SvgTerminal,
 	visibility: SvgVisibility,
@@ -802,7 +852,7 @@ const StyledIcon = require_src.styled("svg", {
 })({ fill: "currentColor" });
 function Icon({ name, color, size, ...rest }) {
 	const theme = require_theme.useTheme();
-	const resolvedSize = size ?? theme.icon[require_themeDefault.themeDefault(theme, "iconSize", "lg")];
+	const resolvedSize = (typeof size === "string" && Object.hasOwn(theme.icon, size) ? theme.icon[size] : size) ?? theme.icon[require_themeDefault.themeDefault(theme, "iconSize", "lg")];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIcon, {
 		as: icons[name],
 		color: color ?? require_themeDefault.themeDefault(theme, "accentTextColor", "primary"),

package/dist/Icon.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Icon = require("./Icon-CI6q2Eyi.cjs");
+const require_Icon = require("./Icon-D-EWsBVg.cjs");
 exports.Icon = require_Icon.Icon;
 exports.icons = require_Icon.icons;

package/dist/Icon.d.cts

@@ -1,2 +1,2 @@
-import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-Ctqajtac.cjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-Dv_fk1_F.cjs";
 export { Icon, type IconName, IconProps, icons };

package/dist/Icon.d.mts

@@ -1,2 +1,2 @@
-import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-DO9J-Fla.mjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-ha1WjSZ5.mjs";
 export { Icon, type IconName, IconProps, icons };

package/dist/Icon.mjs

@@ -1,2 +1,2 @@
-import { n as icons, t as Icon } from "./Icon-CH3asUJu.mjs";
+import { n as icons, t as Icon } from "./Icon-BihOAP4u.mjs";
 export { Icon, icons };

package/dist/Image.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 { CSSProperties, ImgHTMLAttributes } from "react";
 import { BackgroundProps, LayoutProps, PositionProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Image/Image.d.ts

package/dist/Image.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 { BackgroundProps, LayoutProps, PositionProps, SpaceProps } from "@soroush.tech/styled-system";
 import { CSSProperties, ImgHTMLAttributes } from "react";
 //#region src/Image/Image.d.ts