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

package/dist/Fade.cjs

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useTransitionChild = require("./useTransitionChild-CikpU0Yh.cjs");
+//#region src/Fade/Fade.tsx
+/**
+* @description Fades one child in and out by its opacity. The child holds a `ref` and takes a
+* `style`; out, it is hidden, so it takes no click or focus. A user who asked for less motion sees
+* it change at once.
+*/
+function Fade(props) {
+	return require_useTransitionChild.useTransitionChild(props, ({ status, duration, easing }) => ({
+		opacity: status === "entering" || status === "entered" ? 1 : 0,
+		transition: `opacity ${duration}ms ${easing}`,
+		visibility: status === "exited" ? "hidden" : void 0
+	}));
+}
+//#endregion
+exports.Fade = Fade;

package/dist/Fade.d.cts

@@ -0,0 +1,11 @@
+import { n as TransitionProps } from "./useTransition-l9dv83-Y.cjs";
+//#region src/Fade/Fade.d.ts
+type FadeProps = TransitionProps;
+/**
+ * @description Fades one child in and out by its opacity. The child holds a `ref` and takes a
+ * `style`; out, it is hidden, so it takes no click or focus. A user who asked for less motion sees
+ * it change at once.
+ */
+declare function Fade(props: Readonly<FadeProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//#endregion
+export { Fade, FadeProps };

package/dist/Fade.d.mts

@@ -0,0 +1,11 @@
+import { n as TransitionProps } from "./useTransition-C1F7MuHO.mjs";
+//#region src/Fade/Fade.d.ts
+type FadeProps = TransitionProps;
+/**
+ * @description Fades one child in and out by its opacity. The child holds a `ref` and takes a
+ * `style`; out, it is hidden, so it takes no click or focus. A user who asked for less motion sees
+ * it change at once.
+ */
+declare function Fade(props: Readonly<FadeProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//#endregion
+export { Fade, FadeProps };

package/dist/Fade.mjs

@@ -0,0 +1,16 @@
+import { t as useTransitionChild } from "./useTransitionChild-Dvg9hO-F.mjs";
+//#region src/Fade/Fade.tsx
+/**
+* @description Fades one child in and out by its opacity. The child holds a `ref` and takes a
+* `style`; out, it is hidden, so it takes no click or focus. A user who asked for less motion sees
+* it change at once.
+*/
+function Fade(props) {
+	return useTransitionChild(props, ({ status, duration, easing }) => ({
+		opacity: status === "entering" || status === "entered" ? 1 : 0,
+		transition: `opacity ${duration}ms ${easing}`,
+		visibility: status === "exited" ? "hidden" : void 0
+	}));
+}
+//#endregion
+export { Fade };

package/dist/Flex.d.cts

@@ -1,2 +1,2 @@
-import { Gt as GapToken, Ut as Flex, Wt as FlexProps } from "./index-DmJ7yWWi.cjs";
+import { dn as FlexProps, fn as GapToken, un as Flex } from "./index-XN4-ZqTB.cjs";
 export { Flex, FlexProps, GapToken };

package/dist/Flex.d.mts

@@ -1,2 +1,2 @@
-import { Gt as GapToken, Ut as Flex, Wt as FlexProps } from "./index-CVNJEUwJ.mjs";
+import { dn as FlexProps, fn as GapToken, un as Flex } from "./index-CRQ7XLri.mjs";
 export { Flex, FlexProps, GapToken };

package/dist/Form.d.cts

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/Form.d.mts

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/FormControl.cjs

@@ -1,14 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
-const require_View = require("./View.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_Flex = require("./Flex.cjs");
 const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
 const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/FormControl/FormControl.tsx
-const FormControlRoot = require_src.styled(require_View.View, {
+const FormControlRoot = require_src.styled(require_Flex.Flex, {
 	name: "FormControl",
 	label: "FormControl"
 })();
@@ -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,
@@ -50,6 +57,8 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 		value,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlRoot, {
 			width: fullWidth ? "100%" : void 0,
+			flexDirection: "column",
+			alignItems: fullWidth ? "stretch" : "flex-start",
 			...viewProps,
 			children
 		})
@@ -75,7 +84,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,4 +1,4 @@
-import { Qt as ViewProps, V as Theme } from "./index-DmJ7yWWi.cjs";
+import { nt as Theme, yn as ViewProps } from "./index-XN4-ZqTB.cjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {
@@ -35,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. */
@@ -66,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,4 +1,4 @@
-import { Qt as ViewProps, V as Theme } from "./index-CVNJEUwJ.mjs";
+import { nt as Theme, yn as ViewProps } from "./index-CRQ7XLri.mjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {
@@ -35,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. */
@@ -66,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,13 +1,13 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
-import { View } from "./View.mjs";
+import { r as useTheme } from "./theme-oBfFhJm9.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-Z9_QludW.mjs";
+import { Flex } from "./Flex.mjs";
 import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
 import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
 import { useContext, useId, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/FormControl/FormControl.tsx
-const FormControlRoot = styled(View, {
+const FormControlRoot = styled(Flex, {
 	name: "FormControl",
 	label: "FormControl"
 })();
@@ -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,
@@ -49,6 +56,8 @@ function FormControl({ children, id, error, disabled, required, size, fullWidth,
 		value,
 		children: /* @__PURE__ */ jsx(FormControlRoot, {
 			width: fullWidth ? "100%" : void 0,
+			flexDirection: "column",
+			alignItems: fullWidth ? "stretch" : "flex-start",
 			...viewProps,
 			children
 		})
@@ -74,7 +83,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.cjs

@@ -9,7 +9,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const FormHelperTextRoot = require_src.styled(require_Typography.Typography, {
 	name: "FormHelperText",
 	label: "FormHelperText"
-})();
+})(({ theme }) => ({ marginTop: theme.space[.5] }));
 /**
 * Helper or error text for a field. Reads its id and error state from
 * FormControl context and registers its presence so the control can point

package/dist/FormHelperText.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-IdMqR82e.cjs";
+import { a as TypographyProps } from "./index-BDqIc6Gx.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-BSA6SKao.mjs";
+import { a as TypographyProps } from "./index-BPh60KDs.mjs";
 import { ReactNode } from "react";
 //#region src/FormHelperText/FormHelperText.d.ts
 interface FormHelperTextProps extends TypographyProps {

package/dist/FormHelperText.mjs

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 const FormHelperTextRoot = styled(Typography, {
 	name: "FormHelperText",
 	label: "FormHelperText"
-})();
+})(({ theme }) => ({ marginTop: theme.space[.5] }));
 /**
 * Helper or error text for a field. Reads its id and error state from
 * FormControl context and registers its presence so the control can point

package/dist/FormLabel.cjs

@@ -9,20 +9,31 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const FormLabelRoot = require_src.styled(require_Typography.Typography, {
 	name: "FormLabel",
 	label: "FormLabel"
-})();
+})(({ theme }) => ({
+	display: "block",
+	marginBottom: theme.space[.5]
+}));
 /**
 * Renders a `<label>` linked to the control via `htmlFor`, reading the id and
 * `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-IdMqR82e.cjs";
+import { a as TypographyProps } from "./index-BDqIc6Gx.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-BSA6SKao.mjs";
+import { a as TypographyProps } from "./index-BPh60KDs.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,26 +2,37 @@ 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, {
 	name: "FormLabel",
 	label: "FormLabel"
-})();
+})(({ theme }) => ({
+	display: "block",
+	marginBottom: theme.space[.5]
+}));
 /**
 * Renders a `<label>` linked to the control via `htmlFor`, reading the id and
 * `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,4 +1,4 @@
-import { Qt as ViewProps, V as Theme } from "./index-DmJ7yWWi.cjs";
+import { nt as Theme, yn as ViewProps } from "./index-XN4-ZqTB.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,4 +1,4 @@
-import { Qt as ViewProps, V as Theme } from "./index-CVNJEUwJ.mjs";
+import { nt as Theme, yn as ViewProps } from "./index-CRQ7XLri.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/Grow.cjs

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_useTransitionChild = require("./useTransitionChild-CikpU0Yh.cjs");
+//#region src/Grow/Grow.tsx
+/**
+* @description Grows one child in from a little smaller, fading as it does, and shrinks it out.
+* The child holds a `ref` and takes a `style`; out, it is hidden. A user who asked for less
+* motion sees it change at once.
+*/
+function Grow(props) {
+	return require_useTransitionChild.useTransitionChild(props, ({ status, duration, easing }) => {
+		const isIn = status === "entering" || status === "entered";
+		return {
+			opacity: isIn ? 1 : 0,
+			transform: isIn ? "none" : "scale(0.75)",
+			transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
+			visibility: status === "exited" ? "hidden" : void 0
+		};
+	});
+}
+//#endregion
+exports.Grow = Grow;

package/dist/Grow.d.cts

@@ -0,0 +1,11 @@
+import { n as TransitionProps } from "./useTransition-l9dv83-Y.cjs";
+//#region src/Grow/Grow.d.ts
+type GrowProps = TransitionProps;
+/**
+ * @description Grows one child in from a little smaller, fading as it does, and shrinks it out.
+ * The child holds a `ref` and takes a `style`; out, it is hidden. A user who asked for less
+ * motion sees it change at once.
+ */
+declare function Grow(props: Readonly<GrowProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//#endregion
+export { Grow, GrowProps };

package/dist/Grow.d.mts

@@ -0,0 +1,11 @@
+import { n as TransitionProps } from "./useTransition-C1F7MuHO.mjs";
+//#region src/Grow/Grow.d.ts
+type GrowProps = TransitionProps;
+/**
+ * @description Grows one child in from a little smaller, fading as it does, and shrinks it out.
+ * The child holds a `ref` and takes a `style`; out, it is hidden. A user who asked for less
+ * motion sees it change at once.
+ */
+declare function Grow(props: Readonly<GrowProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//#endregion
+export { Grow, GrowProps };

package/dist/Grow.mjs

@@ -0,0 +1,20 @@
+import { t as useTransitionChild } from "./useTransitionChild-Dvg9hO-F.mjs";
+//#region src/Grow/Grow.tsx
+/**
+* @description Grows one child in from a little smaller, fading as it does, and shrinks it out.
+* The child holds a `ref` and takes a `style`; out, it is hidden. A user who asked for less
+* motion sees it change at once.
+*/
+function Grow(props) {
+	return useTransitionChild(props, ({ status, duration, easing }) => {
+		const isIn = status === "entering" || status === "entered";
+		return {
+			opacity: isIn ? 1 : 0,
+			transform: isIn ? "none" : "scale(0.75)",
+			transition: `opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
+			visibility: status === "exited" ? "hidden" : void 0
+		};
+	});
+}
+//#endregion
+export { Grow };

package/dist/{Icon-DlheCTJb.mjs → Icon-0hPpk-WZ.mjs}

@@ -1,6 +1,6 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { r as useTheme } from "./theme-oBfFhJm9.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.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",
@@ -75,6 +84,15 @@ const SvgCheck = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" })
 });
 //#endregion
+//#region src/Icon/icons/CheckCircle.tsx
+const SvgCheckCircle = (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 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
+});
+//#endregion
 //#region src/Icon/icons/ChevronLeft.tsx
 const SvgChevronLeft = (props) => /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 0 24 24",
@@ -212,6 +230,15 @@ const SvgEditNote = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", { d: "M120-400v-60h300v60H120Zm0-165v-60h470v60H120Zm0-165v-60h470v60H120Zm400 610v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q9 9 13 20t4 22q0 11-4.5 22.5T862-340L642-120H520Zm300-263-37-37 37 37ZM580-180h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z" })
 });
 //#endregion
+//#region src/Icon/icons/ErrorCircle.tsx
+const SvgErrorCircle = (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 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
+});
+//#endregion
 //#region src/Icon/icons/ExpandLess.tsx
 const SvgExpandLess = (props) => /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 0 24 24",
@@ -478,6 +505,15 @@ const SvgImage = (props) => /* @__PURE__ */ jsxs("svg", {
 	]
 });
 //#endregion
+//#region src/Icon/icons/Info.tsx
+const SvgInfo = (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 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" })
+});
+//#endregion
 //#region src/Icon/icons/Language.tsx
 const SvgLanguage = (props) => /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 0 24 24",
@@ -579,6 +615,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",
@@ -642,6 +687,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",
@@ -734,6 +797,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,
@@ -741,6 +805,7 @@ const icons = {
 	arrow_forward: SvgArrowForward,
 	arrow_upward: SvgArrowUpward,
 	check: SvgCheck,
+	check_circle: SvgCheckCircle,
 	chevron_left: SvgChevronLeft,
 	chevron_right: SvgChevronRight,
 	checklist: SvgChecklist,
@@ -753,6 +818,7 @@ const icons = {
 	desktop_windows: SvgDesktopWindows,
 	dns: SvgDns,
 	edit_note: SvgEditNote,
+	error: SvgErrorCircle,
 	expand_less: SvgExpandLess,
 	expand_more: SvgExpandMore,
 	external_link: SvgExternalLink,
@@ -767,6 +833,7 @@ const icons = {
 	history: SvgHistory,
 	hub: SvgHub,
 	image: SvgImage,
+	info: SvgInfo,
 	language: SvgLanguage,
 	last_page: SvgLastPage,
 	link: SvgLink,
@@ -777,6 +844,7 @@ const icons = {
 	psychology: SvgPsychology,
 	rebase_edit: SvgRebaseEdit,
 	refresh: SvgRefresh,
+	remove: SvgRemove,
 	schema: SvgSchema,
 	security: SvgSecurity,
 	settings_input_component: SvgSettingsInputComponent,
@@ -784,6 +852,8 @@ const icons = {
 	smartphone: SvgSmartphone,
 	speed: SvgSpeed,
 	stacks: SvgStacks,
+	star: SvgStar,
+	star_border: SvgStarBorder,
 	table: SvgTable,
 	terminal: SvgTerminal,
 	visibility: SvgVisibility,