@soroush.tech/design-system 2.0.0-rc.3 → 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 { Jt as FlexProps, Yt as GapToken, qt as Flex } from "./index-DJ0f69wh.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 { Jt as FlexProps, Yt as GapToken, qt as Flex } from "./index-CJhK7JND.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 { W as Theme } from "./index-DJ0f69wh.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 { W as Theme } from "./index-CJhK7JND.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"
 })();
@@ -57,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
 		})

package/dist/FormControl.d.cts

@@ -1,4 +1,4 @@
-import { W as Theme, nn as ViewProps } from "./index-DJ0f69wh.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'> {

package/dist/FormControl.d.mts

@@ -1,4 +1,4 @@
-import { W as Theme, nn as ViewProps } from "./index-CJhK7JND.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'> {

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"
 })();
@@ -56,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
 		})

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-K5exjvnX.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-ClZyaZrR.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,7 +9,10 @@ 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,

package/dist/FormLabel.d.cts

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

package/dist/FormLabel.d.mts

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

package/dist/FormLabel.mjs

@@ -8,7 +8,10 @@ import { jsxs } from "react/jsx-runtime";
 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,

package/dist/Grid.d.cts

@@ -1,4 +1,4 @@
-import { W as Theme, nn as ViewProps } from "./index-DJ0f69wh.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 { W as Theme, nn as ViewProps } from "./index-CJhK7JND.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-BihOAP4u.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
@@ -84,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",
@@ -221,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",
@@ -487,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",
@@ -778,6 +805,7 @@ const icons = {
 	arrow_forward: SvgArrowForward,
 	arrow_upward: SvgArrowUpward,
 	check: SvgCheck,
+	check_circle: SvgCheckCircle,
 	chevron_left: SvgChevronLeft,
 	chevron_right: SvgChevronRight,
 	checklist: SvgChecklist,
@@ -790,6 +818,7 @@ const icons = {
 	desktop_windows: SvgDesktopWindows,
 	dns: SvgDns,
 	edit_note: SvgEditNote,
+	error: SvgErrorCircle,
 	expand_less: SvgExpandLess,
 	expand_more: SvgExpandMore,
 	external_link: SvgExternalLink,
@@ -804,6 +833,7 @@ const icons = {
 	history: SvgHistory,
 	hub: SvgHub,
 	image: SvgImage,
+	info: SvgInfo,
 	language: SvgLanguage,
 	last_page: SvgLastPage,
 	link: SvgLink,

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

@@ -1,6 +1,6 @@
 const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.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");
@@ -85,6 +85,15 @@ const SvgCheck = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (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 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__ */ (0, react_jsx_runtime.jsx)("svg", {
 	viewBox: "0 0 24 24",
@@ -222,6 +231,15 @@ const SvgEditNote = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg",
 	children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (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 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__ */ (0, react_jsx_runtime.jsx)("svg", {
 	viewBox: "0 0 24 24",
@@ -488,6 +506,15 @@ const SvgImage = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 	]
 });
 //#endregion
+//#region src/Icon/icons/Info.tsx
+const SvgInfo = (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 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__ */ (0, react_jsx_runtime.jsx)("svg", {
 	viewBox: "0 0 24 24",
@@ -779,6 +806,7 @@ const icons = {
 	arrow_forward: SvgArrowForward,
 	arrow_upward: SvgArrowUpward,
 	check: SvgCheck,
+	check_circle: SvgCheckCircle,
 	chevron_left: SvgChevronLeft,
 	chevron_right: SvgChevronRight,
 	checklist: SvgChecklist,
@@ -791,6 +819,7 @@ const icons = {
 	desktop_windows: SvgDesktopWindows,
 	dns: SvgDns,
 	edit_note: SvgEditNote,
+	error: SvgErrorCircle,
 	expand_less: SvgExpandLess,
 	expand_more: SvgExpandMore,
 	external_link: SvgExternalLink,
@@ -805,6 +834,7 @@ const icons = {
 	history: SvgHistory,
 	hub: SvgHub,
 	image: SvgImage,
+	info: SvgInfo,
 	language: SvgLanguage,
 	last_page: SvgLastPage,
 	link: SvgLink,

package/dist/Icon.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Icon = require("./Icon-D-EWsBVg.cjs");
+const require_Icon = require("./Icon-BE7bRsqR.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-Dv_fk1_F.cjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-05VGk0y_.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-ha1WjSZ5.mjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-DNj5P2NH.mjs";
 export { Icon, type IconName, IconProps, icons };

package/dist/Icon.mjs

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

package/dist/Image.d.cts

@@ -1,4 +1,4 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.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,4 +1,4 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
 import { BackgroundProps, LayoutProps, PositionProps, SpaceProps } from "@soroush.tech/styled-system";
 import { CSSProperties, ImgHTMLAttributes } from "react";
 //#region src/Image/Image.d.ts

package/dist/LinearProgress.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.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");

package/dist/LinearProgress.d.cts

@@ -1,5 +1,5 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { n as ButtonColor } from "./index-DAwcmIjN.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { n as ButtonColor } from "./index-BQge4W7L.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/LinearProgress/LinearProgress.d.ts

package/dist/LinearProgress.d.mts

@@ -1,5 +1,5 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { n as ButtonColor } from "./index-CG_1uPrD.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { n as ButtonColor } from "./index-DK3zgGPe.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/LinearProgress/LinearProgress.d.ts

package/dist/LinearProgress.mjs

@@ -1,6 +1,6 @@
 import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { clamp } from "./utils.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/LinearProgress/LinearProgress.tsx

package/dist/Link.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_Typography = require("./Typography.cjs");
+const require_getAnchorRel = require("./getAnchorRel-_vtAXC-4.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Link/Link.tsx
@@ -45,14 +46,13 @@ const LinkBase = require_src.styled(require_Typography.Typography, {
 function Link({ underline: underlineProp, color, variant = "inherit", target, rel, ...rest }) {
 	const theme = require_theme.useTheme();
 	const underline = underlineProp ?? require_themeDefault.themeDefault(theme, "linkUnderline", "always");
-	const resolvedRel = target === "_blank" && rel === void 0 ? "noopener noreferrer" : rel;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkBase, {
 		as: "a",
 		underline,
 		color: color ?? require_themeDefault.themeDefault(theme, "accentTextColor", "primary"),
 		variant,
 		target,
-		rel: resolvedRel,
+		rel: require_getAnchorRel.getAnchorRel(target, rel),
 		...rest
 	});
 }

package/dist/Link.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-K5exjvnX.cjs";
+import { a as TypographyProps } from "./index-BDqIc6Gx.cjs";
 import { AnchorHTMLAttributes } from "react";
 //#region src/Link/Link.d.ts
 type LinkUnderline = 'always' | 'hover' | 'none';

package/dist/Link.d.mts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-ClZyaZrR.mjs";
+import { a as TypographyProps } from "./index-BPh60KDs.mjs";
 import { AnchorHTMLAttributes } from "react";
 //#region src/Link/Link.d.ts
 type LinkUnderline = 'always' | 'hover' | 'none';

package/dist/Link.mjs

@@ -1,7 +1,8 @@
 import { o as styled } 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 { Typography } from "./Typography.mjs";
+import { t as getAnchorRel } from "./getAnchorRel-CySI28HJ.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Link/Link.tsx
@@ -44,14 +45,13 @@ const LinkBase = styled(Typography, {
 function Link({ underline: underlineProp, color, variant = "inherit", target, rel, ...rest }) {
 	const theme = useTheme();
 	const underline = underlineProp ?? themeDefault(theme, "linkUnderline", "always");
-	const resolvedRel = target === "_blank" && rel === void 0 ? "noopener noreferrer" : rel;
 	return /* @__PURE__ */ jsx(LinkBase, {
 		as: "a",
 		underline,
 		color: color ?? themeDefault(theme, "accentTextColor", "primary"),
 		variant,
 		target,
-		rel: resolvedRel,
+		rel: getAnchorRel(target, rel),
 		...rest
 	});
 }