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

package/dist/Pagination/PaginationItem.cjs

@@ -1,8 +1,8 @@
 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_Icon = require("../Icon-D-EWsBVg.cjs");
+const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
+const require_Icon = require("../Icon-BE7bRsqR.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/Pagination/PaginationItem.d.cts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-ChXeKJCk.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-DOH1xY0L.cjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.d.mts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-BGbTuHP9.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-BeqpkGV-.mjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.mjs

@@ -1,7 +1,7 @@
 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 { alpha } from "../utils.mjs";
-import { t as Icon } from "../Icon-BihOAP4u.mjs";
+import { t as themeDefault } from "../themeDefault-Z3KmyIbm.mjs";
+import { t as Icon } from "../Icon-0hPpk-WZ.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Pagination/PaginationItem/PaginationItem.tsx

package/dist/Pagination.d.cts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-ChXeKJCk.cjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BHKgEOZJ.cjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-DOH1xY0L.cjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BCzI2Iqo.cjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Pagination.d.mts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-BGbTuHP9.mjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BQWjh4rK.mjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-BeqpkGV-.mjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-D_LT3QiH.mjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Paper.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
-const require_Flex = require("./Flex.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");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Paper/Paper.tsx

package/dist/Paper.d.cts

@@ -1,3 +1,3 @@
-import { Gt as PaperElevation, Kt as PaperProps, Wt as Paper } from "./index-DJ0f69wh.cjs";
-import "./index-BxVTIMnB.cjs";
+import { cn as PaperElevation, ln as PaperProps, sn as Paper } from "./index-XN4-ZqTB.cjs";
+import "./index-x3WC9ViD.cjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.d.mts

@@ -1,3 +1,3 @@
-import { Gt as PaperElevation, Kt as PaperProps, Wt as Paper } from "./index-CJhK7JND.mjs";
-import "./index-DaIIo5QU.mjs";
+import { cn as PaperElevation, ln as PaperProps, sn as Paper } from "./index-CRQ7XLri.mjs";
+import "./index-fPRELf0V.mjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { Flex } from "./Flex.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 "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Paper/Paper.tsx

package/dist/{Popover-QjM5Z1CR.mjs → Popover-Neeqs_7l.mjs}

@@ -1,8 +1,8 @@
 import { o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { r as useTheme } from "./theme-Z9_QludW.mjs";
-import { Paper } from "./Paper.mjs";
+import { r as useTheme } from "./theme-oBfFhJm9.mjs";
 import { t as computePopoverPosition } from "./computePopoverPosition-BIprs_xo.mjs";
-import { t as Modal } from "./Modal-BcsyrrpH.mjs";
+import { Paper } from "./Paper.mjs";
+import { t as Modal } from "./Modal-CEHDej-v.mjs";
 import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Popover/utils/resolveAnchorEl.ts

package/dist/{Popover-CiZfgiKE.cjs → Popover-xyJTSjZy.cjs}

@@ -1,8 +1,8 @@
 const require_src = require("./src-DU81aGy9.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
-const require_Paper = require("./Paper.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
 const require_computePopoverPosition = require("./computePopoverPosition-DiyEOHnU.cjs");
-const require_Modal = require("./Modal-CM3osOqj.cjs");
+const require_Paper = require("./Paper.cjs");
+const require_Modal = require("./Modal-DBw4j0YA.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/Popover.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Popover = require("./Popover-CiZfgiKE.cjs");
+const require_Popover = require("./Popover-xyJTSjZy.cjs");
 exports.Popover = require_Popover.Popover;

package/dist/Popover.d.cts

@@ -1,6 +1,6 @@
-import { Gt as PaperElevation, Kt as PaperProps, W as Theme } from "./index-DJ0f69wh.cjs";
-import "./index-BxVTIMnB.cjs";
-import { l as ModalCloseReason } from "./index-nqUA_6J_.cjs";
+import { cn as PaperElevation, ln as PaperProps, nt as Theme } from "./index-XN4-ZqTB.cjs";
+import "./index-x3WC9ViD.cjs";
+import { l as ModalCloseReason } from "./index-CrQDxJ1D.cjs";
 import { ReactNode, Ref } from "react";
 //#region src/Popover/utils/getOffset.d.ts
 type PopoverVerticalOrigin = 'top' | 'center' | 'bottom' | number;

package/dist/Popover.d.mts

@@ -1,6 +1,6 @@
-import { Gt as PaperElevation, Kt as PaperProps, W as Theme } from "./index-CJhK7JND.mjs";
-import "./index-DaIIo5QU.mjs";
-import { l as ModalCloseReason } from "./index-Bx0-6yeX.mjs";
+import { cn as PaperElevation, ln as PaperProps, nt as Theme } from "./index-CRQ7XLri.mjs";
+import "./index-fPRELf0V.mjs";
+import { l as ModalCloseReason } from "./index-Bfyz3MDc.mjs";
 import { ReactNode, Ref } from "react";
 //#region src/Popover/utils/getOffset.d.ts
 type PopoverVerticalOrigin = 'top' | 'center' | 'bottom' | number;

package/dist/Popover.mjs

@@ -1,2 +1,2 @@
-import { t as Popover } from "./Popover-QjM5Z1CR.mjs";
+import { t as Popover } from "./Popover-Neeqs_7l.mjs";
 export { Popover };

package/dist/Portal.d.cts

@@ -1,18 +1,2 @@
-import { ReactNode } from "react";
-//#region src/Portal/Portal.d.ts
-interface PortalProps {
-  /** Content to render into the container. */
-  children: ReactNode;
-  /** Target node, or a function returning one. Defaults to `document.body`. */
-  container?: HTMLElement | (() => HTMLElement | null) | null;
-}
-/**
- * Renders its children into a DOM node outside the parent hierarchy (the document
- * body by default). Resolves the container synchronously during render, so the
- * portaled content mounts in the same commit - consumers like Modal can rely on
- * their root ref being attached before their effects run. Renders nothing during
- * server rendering.
- */
-declare function Portal({ children, container }: Readonly<PortalProps>): import("react").ReactPortal | null;
-//#endregion
+import { n as PortalProps, t as Portal } from "./index-Ctx-DKV3.cjs";
 export { Portal, PortalProps };

package/dist/Portal.d.mts

@@ -1,18 +1,2 @@
-import { ReactNode } from "react";
-//#region src/Portal/Portal.d.ts
-interface PortalProps {
-  /** Content to render into the container. */
-  children: ReactNode;
-  /** Target node, or a function returning one. Defaults to `document.body`. */
-  container?: HTMLElement | (() => HTMLElement | null) | null;
-}
-/**
- * Renders its children into a DOM node outside the parent hierarchy (the document
- * body by default). Resolves the container synchronously during render, so the
- * portaled content mounts in the same commit - consumers like Modal can rely on
- * their root ref being attached before their effects run. Renders nothing during
- * server rendering.
- */
-declare function Portal({ children, container }: Readonly<PortalProps>): import("react").ReactPortal | null;
-//#endregion
+import { n as PortalProps, t as Portal } from "./index-Ctx-DKV3.mjs";
 export { Portal, PortalProps };

package/dist/Pressable.cjs

@@ -1,8 +1,9 @@
 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_theme = require("./theme-BxXuXRgQ.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_getAnchorRel = require("./getAnchorRel-_vtAXC-4.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");
@@ -66,7 +67,7 @@ const PressableRoot = require_src.styled("div", {
 * `feedback` picks what happens while it is held: nothing (default), the content
 * dims, or the surface tints.
 */
-function Pressable({ as, feedback, color, activeOpacity, href, type = "button", disabled = false, onClick, onKeyDown, onKeyUp, ...rest }) {
+function Pressable({ as, feedback, color, activeOpacity, href, target, rel, type = "button", disabled = false, onClick, onKeyDown, onKeyUp, ...rest }) {
 	const theme = require_theme.useTheme();
 	const dp = require_theme.useDefaultProps("Pressable");
 	const resolvedFeedback = feedback ?? dp.feedback ?? "none";
@@ -96,9 +97,21 @@ function Pressable({ as, feedback, color, activeOpacity, href, type = "button",
 		onKeyUp?.(event);
 		if (!disabled && event.key === " ") activate(event);
 	};
+	const shimProps = needsShim ? {
+		role: "button",
+		tabIndex: disabled ? -1 : 0,
+		"aria-disabled": disabled || void 0,
+		onKeyDown: handleKeyDown,
+		onKeyUp: handleKeyUp
+	} : {
+		onKeyDown,
+		onKeyUp
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PressableRoot, {
 		as: element,
 		href,
+		target,
+		rel: require_getAnchorRel.getAnchorRel(target, rel),
 		type: isButton ? type : void 0,
 		disabled: isButton ? disabled : void 0,
 		feedback: resolvedFeedback,
@@ -106,16 +119,7 @@ function Pressable({ as, feedback, color, activeOpacity, href, type = "button",
 		activeOpacity: resolvedActiveOpacity,
 		isDisabled: disabled,
 		onClick: handleClick,
-		...needsShim ? {
-			role: "button",
-			tabIndex: disabled ? -1 : 0,
-			"aria-disabled": disabled || void 0,
-			onKeyDown: handleKeyDown,
-			onKeyUp: handleKeyUp
-		} : {
-			onKeyDown,
-			onKeyUp
-		},
+		...shimProps,
 		...rest
 	});
 }

package/dist/Pressable.d.cts

@@ -1,2 +1,2 @@
-import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-YKrfFC_I.cjs";
+import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-BUeqNHjb.cjs";
 export { Pressable, PressableColor, PressableFeedback, PressableProps };

package/dist/Pressable.d.mts

@@ -1,2 +1,2 @@
-import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-CUz2h5xY.mjs";
+import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-CWPvdEjP.mjs";
 export { Pressable, PressableColor, PressableFeedback, PressableProps };

package/dist/Pressable.mjs

@@ -1,7 +1,8 @@
 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 { alpha } from "./utils.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-oBfFhJm9.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { t as getAnchorRel } from "./getAnchorRel-CySI28HJ.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Pressable/Pressable.tsx
@@ -64,7 +65,7 @@ const PressableRoot = styled("div", {
 * `feedback` picks what happens while it is held: nothing (default), the content
 * dims, or the surface tints.
 */
-function Pressable({ as, feedback, color, activeOpacity, href, type = "button", disabled = false, onClick, onKeyDown, onKeyUp, ...rest }) {
+function Pressable({ as, feedback, color, activeOpacity, href, target, rel, type = "button", disabled = false, onClick, onKeyDown, onKeyUp, ...rest }) {
 	const theme = useTheme();
 	const dp = useDefaultProps("Pressable");
 	const resolvedFeedback = feedback ?? dp.feedback ?? "none";
@@ -94,9 +95,21 @@ function Pressable({ as, feedback, color, activeOpacity, href, type = "button",
 		onKeyUp?.(event);
 		if (!disabled && event.key === " ") activate(event);
 	};
+	const shimProps = needsShim ? {
+		role: "button",
+		tabIndex: disabled ? -1 : 0,
+		"aria-disabled": disabled || void 0,
+		onKeyDown: handleKeyDown,
+		onKeyUp: handleKeyUp
+	} : {
+		onKeyDown,
+		onKeyUp
+	};
 	return /* @__PURE__ */ jsx(PressableRoot, {
 		as: element,
 		href,
+		target,
+		rel: getAnchorRel(target, rel),
 		type: isButton ? type : void 0,
 		disabled: isButton ? disabled : void 0,
 		feedback: resolvedFeedback,
@@ -104,16 +117,7 @@ function Pressable({ as, feedback, color, activeOpacity, href, type = "button",
 		activeOpacity: resolvedActiveOpacity,
 		isDisabled: disabled,
 		onClick: handleClick,
-		...needsShim ? {
-			role: "button",
-			tabIndex: disabled ? -1 : 0,
-			"aria-disabled": disabled || void 0,
-			onKeyDown: handleKeyDown,
-			onKeyUp: handleKeyUp
-		} : {
-			onKeyDown,
-			onKeyUp
-		},
+		...shimProps,
 		...rest
 	});
 }

package/dist/Quote.d.cts

@@ -1,5 +1,5 @@
-import { W as Theme, nn as ViewProps } from "./index-DJ0f69wh.cjs";
-import "./index-DchHf5cF.cjs";
+import { nt as Theme, yn as ViewProps } from "./index-XN4-ZqTB.cjs";
+import "./index-BhnLFsBv.cjs";
 //#region src/Quote/Quote.d.ts
 type QuoteProps = ViewProps;
 /** A View with a 2px primary left-border - used for terminal readouts and markdown blockquotes. */

package/dist/Quote.d.mts

@@ -1,5 +1,5 @@
-import { W as Theme, nn as ViewProps } from "./index-CJhK7JND.mjs";
-import "./index-h4dYtVrp.mjs";
+import { nt as Theme, yn as ViewProps } from "./index-CRQ7XLri.mjs";
+import "./index-vBCN6iAz.mjs";
 //#region src/Quote/Quote.d.ts
 type QuoteProps = ViewProps;
 /** A View with a 2px primary left-border - used for terminal readouts and markdown blockquotes. */

package/dist/Radio.cjs

@@ -89,18 +89,25 @@ const baseStyle = ({ disabled, theme }) => ({
 const colorStyle = ({ theme, color = require_themeDefault.themeDefault(theme, "neutralColor", "default") }) => {
 	return { color: color === "default" ? theme.text.secondary : theme.palette[color].main };
 };
+const RadioLabel = require_src.styled("span", {
+	name: "Radio",
+	slot: "label",
+	label: "RadioLabel",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["textColor"])
+})(({ theme, textColor }) => textColor ? { color: (0, require_src.src_exports.get)(theme, `text.${textColor}`) } : {});
 const RadioRoot = require_src.styled("label", {
 	name: "Radio",
 	label: "Radio",
 	shouldForwardProp,
 	systemProps: [require_src.src_exports.space]
 })(baseStyle, colorStyle);
-function Radio({ checked, disabled: disabledProp, color: colorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, "data-testid": dataTestid, ...spaceProps }) {
+function Radio({ checked, disabled: disabledProp, color: colorProp, textColor: textColorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, "data-testid": dataTestid, ...spaceProps }) {
 	const fc = require_FormControl.useFormControl({
 		id: idProp,
 		disabled: disabledProp,
 		required: requiredProp,
-		size: sizeProp
+		size: sizeProp,
+		textColor: textColorProp
 	});
 	const { id, disabled, required, size } = fc;
 	const color = colorProp ?? fc.color;
@@ -135,7 +142,10 @@ function Radio({ checked, disabled: disabledProp, color: colorProp, size: sizePr
 					children: checkedIcon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckedIcon, {})
 				})]
 			}),
-			children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children })
+			children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioLabel, {
+				textColor: fc.textColor,
+				children
+			})
 		]
 	});
 }

package/dist/Radio.d.cts

@@ -1,4 +1,4 @@
-import { P as PaletteColor, W as Theme } from "./index-DJ0f69wh.cjs";
+import { U as PaletteColor, nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Radio/Radio.d.ts
@@ -11,6 +11,8 @@ interface RadioProps extends SpaceProps<Theme> {
   disabled?: boolean;
   /** Stroke/fill color. `'default'` resolves to `theme.text.secondary`. Default: `'default'`. */
   color?: RadioColor;
+  /** Text color of the label, resolves against `theme.text`. Default: the control's `FormControl` or `Form` `textColor`, else the control's color. */
+  textColor?: keyof Theme['text'];
   /** Icon size. Default: `'medium'`. */
   size?: RadioSize;
   /** Custom icon for the unchecked state. */
@@ -33,6 +35,6 @@ interface RadioProps extends SpaceProps<Theme> {
   className?: string;
   'data-testid'?: string;
 }
-declare function Radio({ checked, disabled: disabledProp, color: colorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<RadioProps>): import("react").JSX.Element;
+declare function Radio({ checked, disabled: disabledProp, color: colorProp, textColor: textColorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<RadioProps>): import("react").JSX.Element;
 //#endregion
 export { Radio, RadioColor, RadioProps, RadioSize };

package/dist/Radio.d.mts

@@ -1,4 +1,4 @@
-import { P as PaletteColor, W as Theme } from "./index-CJhK7JND.mjs";
+import { U as PaletteColor, nt as Theme } from "./index-CRQ7XLri.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 //#region src/Radio/Radio.d.ts
@@ -11,6 +11,8 @@ interface RadioProps extends SpaceProps<Theme> {
   disabled?: boolean;
   /** Stroke/fill color. `'default'` resolves to `theme.text.secondary`. Default: `'default'`. */
   color?: RadioColor;
+  /** Text color of the label, resolves against `theme.text`. Default: the control's `FormControl` or `Form` `textColor`, else the control's color. */
+  textColor?: keyof Theme['text'];
   /** Icon size. Default: `'medium'`. */
   size?: RadioSize;
   /** Custom icon for the unchecked state. */
@@ -33,6 +35,6 @@ interface RadioProps extends SpaceProps<Theme> {
   className?: string;
   'data-testid'?: string;
 }
-declare function Radio({ checked, disabled: disabledProp, color: colorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<RadioProps>): import("react").JSX.Element;
+declare function Radio({ checked, disabled: disabledProp, color: colorProp, textColor: textColorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<RadioProps>): import("react").JSX.Element;
 //#endregion
 export { Radio, RadioColor, RadioProps, RadioSize };

package/dist/Radio.mjs

@@ -87,18 +87,25 @@ const baseStyle = ({ disabled, theme }) => ({
 const colorStyle = ({ theme, color = themeDefault(theme, "neutralColor", "default") }) => {
 	return { color: color === "default" ? theme.text.secondary : theme.palette[color].main };
 };
+const RadioLabel = styled("span", {
+	name: "Radio",
+	slot: "label",
+	label: "RadioLabel",
+	shouldForwardProp: createShouldForwardProp(["textColor"])
+})(({ theme, textColor }) => textColor ? { color: (0, src_exports.get)(theme, `text.${textColor}`) } : {});
 const RadioRoot = styled("label", {
 	name: "Radio",
 	label: "Radio",
 	shouldForwardProp,
 	systemProps: [src_exports.space]
 })(baseStyle, colorStyle);
-function Radio({ checked, disabled: disabledProp, color: colorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, "data-testid": dataTestid, ...spaceProps }) {
+function Radio({ checked, disabled: disabledProp, color: colorProp, textColor: textColorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, "data-testid": dataTestid, ...spaceProps }) {
 	const fc = useFormControl({
 		id: idProp,
 		disabled: disabledProp,
 		required: requiredProp,
-		size: sizeProp
+		size: sizeProp,
+		textColor: textColorProp
 	});
 	const { id, disabled, required, size } = fc;
 	const color = colorProp ?? fc.color;
@@ -133,7 +140,10 @@ function Radio({ checked, disabled: disabledProp, color: colorProp, size: sizePr
 					children: checkedIcon ?? /* @__PURE__ */ jsx(CheckedIcon, {})
 				})]
 			}),
-			children != null && /* @__PURE__ */ jsx("span", { children })
+			children != null && /* @__PURE__ */ jsx(RadioLabel, {
+				textColor: fc.textColor,
+				children
+			})
 		]
 	});
 }