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

package/dist/{TableContext-6PgGpUzM.d.mts → TableContext-Be8tluYZ.d.cts}

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
 //#region src/Table/TableContext.d.ts
 /** Cell padding modes broadcast from `Table` to descendant cells. */
 type TableCellPadding = 'normal' | 'none';

package/dist/{TableContext-CBGk-Lh8.d.cts → TableContext-DUPqls5k.d.mts}

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
 //#region src/Table/TableContext.d.ts
 /** Cell padding modes broadcast from `Table` to descendant cells. */
 type TableCellPadding = 'normal' | 'none';

package/dist/Tabs/Tab.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
-const require_theme = require("../theme-BxXuXRgQ.cjs");
-const require_Icon = require("../Icon-Cvuhp9ek.cjs");
+const require_theme = require("../theme-DzfwuzMZ.cjs");
+const require_Icon = require("../Icon-BE7bRsqR.cjs");
 const require_dividerLine = require("../dividerLine-BNljcGlv.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -23,7 +23,8 @@ const shouldForwardProp = (0, require("@soroush.tech/styled-system/should-forwar
 	"borderRadius",
 	"lineColor",
 	"rowPaddingTop",
-	"rowPaddingBottom"
+	"rowPaddingBottom",
+	"isAnnounced"
 ]);
 const getEnclosedEdgeStyle = (theme, main, lineMain, isSelected, isVertical, hasDivider, radius) => {
 	const thin = theme.borderWidths.thin;
@@ -85,7 +86,10 @@ const TabRoot = require_src.styled("div", {
 		...variant === "enclosed" && getEnclosedEdgeStyle(theme, main, (0, require_src.src_exports.get)(theme, `palette.${lineColor}.main`), isSelected, isVertical, hasDivider, String(radius)),
 		transition: "background-color 0.12s ease",
 		...isDisabled ? {} : { "&:hover": { backgroundColor: isBoxed ? raised : `${main}14` } },
-		"&:hover [data-tab-close]": { visibility: "visible" }
+		"&:hover [data-tab-close]": {
+			visibility: "visible",
+			opacity: 1
+		}
 	};
 });
 const TabLabel = require_src.styled("button", {
@@ -147,7 +151,7 @@ const TabClose = require_src.styled("button", {
 	slot: "close",
 	label: "TabClose",
 	shouldForwardProp
-})(({ theme, color, isSelected }) => {
+})(({ theme, color, isSelected, isAnnounced }) => {
 	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
 	return {
 		appearance: "none",
@@ -164,7 +168,10 @@ const TabClose = require_src.styled("button", {
 		backgroundColor: "transparent",
 		color: "inherit",
 		cursor: "pointer",
-		visibility: isSelected ? "visible" : "hidden",
+		...isAnnounced ? {
+			opacity: isSelected ? 1 : 0,
+			"&:focus-visible": { opacity: 1 }
+		} : { visibility: isSelected ? "visible" : "hidden" },
 		"&:hover": { backgroundColor: `${main}1F` }
 	};
 });
@@ -286,7 +293,9 @@ function Tab({ value: valueProp, label, icon, iconPosition = "top", isWrapped: i
 			secondaryAction != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecondaryActionSlot, { children: secondaryAction }),
 			isClosable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabClose, {
 				type: "button",
-				"aria-hidden": true,
+				isAnnounced: tabs.shouldAnnounceClose,
+				"aria-hidden": tabs.shouldAnnounceClose ? void 0 : true,
+				"aria-label": tabs.shouldAnnounceClose ? closeLabel : void 0,
 				title: closeLabel,
 				tabIndex: -1,
 				"data-tab-close": true,

package/dist/Tabs/Tab.d.cts

@@ -1,5 +1,5 @@
-import { V as Theme } from "../index-DmJ7yWWi.cjs";
-import { t as TabValue } from "../TabsContext-C2agsLBN.cjs";
+import { nt as Theme } from "../index-XN4-ZqTB.cjs";
+import { t as TabValue } from "../TabsContext-BYeGjSZK.cjs";
 import { ElementType, MouseEvent, ReactNode } from "react";
 //#region src/Tabs/Tab/Tab.d.ts
 /** Where `icon` sits around a tab's label. */

package/dist/Tabs/Tab.d.mts

@@ -1,5 +1,5 @@
-import { V as Theme } from "../index-CVNJEUwJ.mjs";
-import { t as TabValue } from "../TabsContext-DqyxdmGW.mjs";
+import { nt as Theme } from "../index-CRQ7XLri.mjs";
+import { t as TabValue } from "../TabsContext-D4YumTfD.mjs";
 import { ElementType, MouseEvent, ReactNode } from "react";
 //#region src/Tabs/Tab/Tab.d.ts
 /** Where `icon` sits around a tab's label. */

package/dist/Tabs/Tab.mjs

@@ -1,6 +1,6 @@
 import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { n as useDefaultProps } from "../theme-Z9_QludW.mjs";
-import { t as Icon } from "../Icon-DlheCTJb.mjs";
+import { n as useDefaultProps } from "../theme-oBfFhJm9.mjs";
+import { t as Icon } from "../Icon-0hPpk-WZ.mjs";
 import { i as TabIndexContext, n as getDividerShadow, o as useTabsContext } from "../dividerLine-FahY-M6_.mjs";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -22,7 +22,8 @@ const shouldForwardProp = createShouldForwardProp([
 	"borderRadius",
 	"lineColor",
 	"rowPaddingTop",
-	"rowPaddingBottom"
+	"rowPaddingBottom",
+	"isAnnounced"
 ]);
 const getEnclosedEdgeStyle = (theme, main, lineMain, isSelected, isVertical, hasDivider, radius) => {
 	const thin = theme.borderWidths.thin;
@@ -84,7 +85,10 @@ const TabRoot = styled("div", {
 		...variant === "enclosed" && getEnclosedEdgeStyle(theme, main, (0, src_exports.get)(theme, `palette.${lineColor}.main`), isSelected, isVertical, hasDivider, String(radius)),
 		transition: "background-color 0.12s ease",
 		...isDisabled ? {} : { "&:hover": { backgroundColor: isBoxed ? raised : `${main}14` } },
-		"&:hover [data-tab-close]": { visibility: "visible" }
+		"&:hover [data-tab-close]": {
+			visibility: "visible",
+			opacity: 1
+		}
 	};
 });
 const TabLabel = styled("button", {
@@ -146,7 +150,7 @@ const TabClose = styled("button", {
 	slot: "close",
 	label: "TabClose",
 	shouldForwardProp
-})(({ theme, color, isSelected }) => {
+})(({ theme, color, isSelected, isAnnounced }) => {
 	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
 	return {
 		appearance: "none",
@@ -163,7 +167,10 @@ const TabClose = styled("button", {
 		backgroundColor: "transparent",
 		color: "inherit",
 		cursor: "pointer",
-		visibility: isSelected ? "visible" : "hidden",
+		...isAnnounced ? {
+			opacity: isSelected ? 1 : 0,
+			"&:focus-visible": { opacity: 1 }
+		} : { visibility: isSelected ? "visible" : "hidden" },
 		"&:hover": { backgroundColor: `${main}1F` }
 	};
 });
@@ -285,7 +292,9 @@ function Tab({ value: valueProp, label, icon, iconPosition = "top", isWrapped: i
 			secondaryAction != null && /* @__PURE__ */ jsx(SecondaryActionSlot, { children: secondaryAction }),
 			isClosable && /* @__PURE__ */ jsx(TabClose, {
 				type: "button",
-				"aria-hidden": true,
+				isAnnounced: tabs.shouldAnnounceClose,
+				"aria-hidden": tabs.shouldAnnounceClose ? void 0 : true,
+				"aria-label": tabs.shouldAnnounceClose ? closeLabel : void 0,
 				title: closeLabel,
 				tabIndex: -1,
 				"data-tab-close": true,

package/dist/Tabs/TabContext.d.cts

@@ -1,4 +1,4 @@
-import { t as TabValue } from "../TabsContext-C2agsLBN.cjs";
+import { t as TabValue } from "../TabsContext-BYeGjSZK.cjs";
 import { ReactNode } from "react";
 //#region src/Tabs/TabContext/TabContext.d.ts
 interface TabContextProps {

package/dist/Tabs/TabContext.d.mts

@@ -1,4 +1,4 @@
-import { t as TabValue } from "../TabsContext-DqyxdmGW.mjs";
+import { t as TabValue } from "../TabsContext-D4YumTfD.mjs";
 import { ReactNode } from "react";
 //#region src/Tabs/TabContext/TabContext.d.ts
 interface TabContextProps {

package/dist/Tabs/TabList.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
-const require_Tabs = require("../Tabs-D_wkX-Jb.cjs");
+const require_Tabs = require("../Tabs-Croeq9s2.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Tabs/TabList/TabList.tsx

package/dist/Tabs/TabList.d.cts

@@ -1,4 +1,4 @@
-import { a as TabsProps } from "../index-B3LIhqHR.cjs";
+import { a as TabsProps } from "../index-Ebjbrbsk.cjs";
 //#region src/Tabs/TabList/TabList.d.ts
 type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
 /**

package/dist/Tabs/TabList.d.mts

@@ -1,4 +1,4 @@
-import { a as TabsProps } from "../index-CoEqjFYn.mjs";
+import { a as TabsProps } from "../index-D_-DAAE7.mjs";
 //#region src/Tabs/TabList/TabList.d.ts
 type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
 /**

package/dist/Tabs/TabList.mjs

@@ -1,5 +1,5 @@
 import { n as useTabsValue } from "../TabsValueContext-DvL3inf7.mjs";
-import { n as TabListContext, t as Tabs } from "../Tabs-YfCUbkQV.mjs";
+import { n as TabListContext, t as Tabs } from "../Tabs-DMMP5aDj.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Tabs/TabList/TabList.tsx

package/dist/Tabs/TabPanel.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
-const require_theme = require("../theme-BxXuXRgQ.cjs");
+const require_theme = require("../theme-DzfwuzMZ.cjs");
 const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
 const require_surfaceSystem = require("../surfaceSystem-BGQBoXv_.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Tabs/TabPanel.d.cts

@@ -1,5 +1,5 @@
-import { V as Theme } from "../index-DmJ7yWWi.cjs";
-import { t as TabValue } from "../TabsContext-C2agsLBN.cjs";
+import { nt as Theme } from "../index-XN4-ZqTB.cjs";
+import { t as TabValue } from "../TabsContext-BYeGjSZK.cjs";
 import { ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Tabs/TabPanel/TabPanel.d.ts

package/dist/Tabs/TabPanel.d.mts

@@ -1,5 +1,5 @@
-import { V as Theme } from "../index-CVNJEUwJ.mjs";
-import { t as TabValue } from "../TabsContext-DqyxdmGW.mjs";
+import { nt as Theme } from "../index-CRQ7XLri.mjs";
+import { t as TabValue } from "../TabsContext-D4YumTfD.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ReactNode } from "react";
 //#region src/Tabs/TabPanel/TabPanel.d.ts

package/dist/Tabs/TabPanel.mjs

@@ -1,5 +1,5 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { n as useDefaultProps } from "../theme-Z9_QludW.mjs";
+import { n as useDefaultProps } from "../theme-oBfFhJm9.mjs";
 import { n as useTabsValue } from "../TabsValueContext-DvL3inf7.mjs";
 import { n as getPanelId, r as getTabId, t as surfaceSystem } from "../surfaceSystem-D8TbmKy3.mjs";
 import { jsx } from "react/jsx-runtime";

package/dist/Tabs/TabScrollButton.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
-const require_theme = require("../theme-BxXuXRgQ.cjs");
-const require_Icon = require("../Icon-Cvuhp9ek.cjs");
+const require_theme = require("../theme-DzfwuzMZ.cjs");
+const require_Icon = require("../Icon-BE7bRsqR.cjs");
 const require_dividerLine = require("../dividerLine-BNljcGlv.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Tabs/TabScrollButton.d.cts

@@ -1,2 +1,2 @@
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-gnh-Oe0n.cjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-BitQk7Hx.cjs";
 export { TabScrollButton, TabScrollButtonProps, TabScrollDirection };

package/dist/Tabs/TabScrollButton.d.mts

@@ -1,2 +1,2 @@
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-BjPX49XA.mjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-CyLhEXYB.mjs";
 export { TabScrollButton, TabScrollButtonProps, TabScrollDirection };

package/dist/Tabs/TabScrollButton.mjs

@@ -1,6 +1,6 @@
 import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { n as useDefaultProps, r as useTheme } from "../theme-Z9_QludW.mjs";
-import { t as Icon } from "../Icon-DlheCTJb.mjs";
+import { n as useDefaultProps, r as useTheme } from "../theme-oBfFhJm9.mjs";
+import { t as Icon } from "../Icon-0hPpk-WZ.mjs";
 import { a as TabsContext, r as getEnclosedPieceStyle } from "../dividerLine-FahY-M6_.mjs";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/Tabs/Tabs.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Tabs = require("../Tabs-D_wkX-Jb.cjs");
+const require_Tabs = require("../Tabs-Croeq9s2.cjs");
 exports.Tabs = require_Tabs.Tabs;

package/dist/Tabs/Tabs.d.cts

@@ -1,3 +1,3 @@
-import { t as TabValue } from "../TabsContext-C2agsLBN.cjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-B3LIhqHR.cjs";
+import { t as TabValue } from "../TabsContext-BYeGjSZK.cjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-Ebjbrbsk.cjs";
 export { type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs/Tabs.d.mts

@@ -1,3 +1,3 @@
-import { t as TabValue } from "../TabsContext-DqyxdmGW.mjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-CoEqjFYn.mjs";
+import { t as TabValue } from "../TabsContext-D4YumTfD.mjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-D_-DAAE7.mjs";
 export { type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs/Tabs.mjs

@@ -1,2 +1,2 @@
-import { t as Tabs } from "../Tabs-YfCUbkQV.mjs";
+import { t as Tabs } from "../Tabs-DMMP5aDj.mjs";
 export { Tabs };

package/dist/{Tabs-D_wkX-Jb.cjs → Tabs-Croeq9s2.cjs}

@@ -1,10 +1,11 @@
 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_Icon = require("./Icon-Cvuhp9ek.cjs");
-const require_MenuItem = require("./MenuItem-CfdN4axw.cjs");
-const require_Menu = require("./Menu-BkKPTOfh.cjs");
+const require_Icon = require("./Icon-BE7bRsqR.cjs");
+const require_View = require("./View.cjs");
+const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
+const require_MenuItem = require("./MenuItem-EJ4u73f0.cjs");
+const require_Menu = require("./Menu-DXLjR9ga.cjs");
 const require_dividerLine = require("./dividerLine-BNljcGlv.cjs");
 const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
 const require_surfaceSystem = require("./surfaceSystem-BGQBoXv_.cjs");
@@ -139,7 +140,7 @@ function useTabsScroll(listRef, isEnabled, isVertical) {
 	const scrollByView = (direction) => {
 		const list = listRef.current;
 		const isReduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
-		const distance = (!isVertical && require_MenuItem.isRtl(list) ? -direction : direction) * (isVertical ? list.clientHeight : list.clientWidth);
+		const distance = (!isVertical && require_isRtl.isRtl(list) ? -direction : direction) * (isVertical ? list.clientHeight : list.clientWidth);
 		list.scrollBy({
 			[isVertical ? "top" : "left"]: distance,
 			behavior: isReduced ? "auto" : "smooth"
@@ -372,7 +373,7 @@ const STEP_BY_KEY = {
 * navigation, its current tab marked `aria-current="page"`. Content of the row's own sits
 * before and after the tabs.
 */
-function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, as = "div", orientation = "horizontal", variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth = false, isCentered = false, shouldSelectOnFocus = false, overflowBehavior = "none", overflowLabel, scrollButtons = "auto", shouldShowScrollButtonsOnMobile = false, hasVisibleScrollbar = false, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, className, "data-testid": dataTestid, ...spaceProps }) {
+function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, shouldAnnounceClose = false, as = "div", orientation = "horizontal", variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth = false, isCentered = false, shouldSelectOnFocus = false, overflowBehavior = "none", overflowLabel, scrollButtons = "auto", shouldShowScrollButtonsOnMobile = false, hasVisibleScrollbar = false, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, className, "data-testid": dataTestid, ...spaceProps }) {
 	const theme = require_theme.useTheme();
 	const dp = require_theme.useDefaultProps("Tabs");
 	const variant = variantProp ?? dp.variant ?? "underline";
@@ -417,6 +418,7 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		focusableValue,
 		select,
 		onTabClose,
+		shouldAnnounceClose,
 		getTabId: (value) => require_surfaceSystem.getTabId(baseId, value),
 		getPanelId: (value) => tabList ? require_surfaceSystem.getPanelId(baseId, value) : void 0,
 		isNavigation,
@@ -439,6 +441,7 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		focusableValue,
 		select,
 		onTabClose,
+		shouldAnnounceClose,
 		baseId,
 		tabList,
 		isNavigation,
@@ -521,8 +524,8 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 	const handleKeyDown = (event) => {
 		if (isNavigation || event.target.dataset.tab === void 0) return;
 		const list = event.currentTarget;
-		const forward = require_MenuItem.isRtl(list) ? "ArrowLeft" : "ArrowRight";
-		const backward = require_MenuItem.isRtl(list) ? "ArrowRight" : "ArrowLeft";
+		const forward = require_isRtl.isRtl(list) ? "ArrowLeft" : "ArrowRight";
+		const backward = require_isRtl.isRtl(list) ? "ArrowRight" : "ArrowLeft";
 		const nextKey = isVertical ? "ArrowDown" : forward;
 		const previousKey = isVertical ? "ArrowUp" : backward;
 		let step = STEP_BY_KEY[event.key];
@@ -605,10 +608,12 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 						children: hiddenTabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
 							value: tab.value,
 							disabled: tab.disabled,
+							shouldAnnounceSecondaryAction: shouldAnnounceClose,
 							secondaryAction: tab.closeLabel === void 0 ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowClose, {
 								type: "button",
 								color: selectedColor,
-								"aria-hidden": true,
+								"aria-hidden": shouldAnnounceClose ? void 0 : true,
+								"aria-label": shouldAnnounceClose ? tab.closeLabel : void 0,
 								title: tab.closeLabel,
 								tabIndex: -1,
 								onClick: () => onTabClose?.(tab.value),

package/dist/{Tabs-YfCUbkQV.mjs → Tabs-DMMP5aDj.mjs}

@@ -1,10 +1,11 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { View } from "./View.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-oBfFhJm9.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
-import { t as Icon } from "./Icon-DlheCTJb.mjs";
-import { r as isRtl, t as MenuItem } from "./MenuItem-BR7ingQx.mjs";
-import { t as Menu } from "./Menu-tECbAEFj.mjs";
+import { t as Icon } from "./Icon-0hPpk-WZ.mjs";
+import { View } from "./View.mjs";
+import { t as isRtl } from "./isRtl-BJDtm86G.mjs";
+import { t as MenuItem } from "./MenuItem-C21eR7d6.mjs";
+import { t as Menu } from "./Menu-CnG4ikZd.mjs";
 import { a as TabsContext, i as TabIndexContext, n as getDividerShadow, r as getEnclosedPieceStyle, t as getDividerColor } from "./dividerLine-FahY-M6_.mjs";
 import { TabScrollButton } from "./Tabs/TabScrollButton.mjs";
 import { n as getPanelId, r as getTabId, t as surfaceSystem } from "./surfaceSystem-D8TbmKy3.mjs";
@@ -371,7 +372,7 @@ const STEP_BY_KEY = {
 * navigation, its current tab marked `aria-current="page"`. Content of the row's own sits
 * before and after the tabs.
 */
-function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, as = "div", orientation = "horizontal", variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth = false, isCentered = false, shouldSelectOnFocus = false, overflowBehavior = "none", overflowLabel, scrollButtons = "auto", shouldShowScrollButtonsOnMobile = false, hasVisibleScrollbar = false, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, className, "data-testid": dataTestid, ...spaceProps }) {
+function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, shouldAnnounceClose = false, as = "div", orientation = "horizontal", variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth = false, isCentered = false, shouldSelectOnFocus = false, overflowBehavior = "none", overflowLabel, scrollButtons = "auto", shouldShowScrollButtonsOnMobile = false, hasVisibleScrollbar = false, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, className, "data-testid": dataTestid, ...spaceProps }) {
 	const theme = useTheme();
 	const dp = useDefaultProps("Tabs");
 	const variant = variantProp ?? dp.variant ?? "underline";
@@ -416,6 +417,7 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		focusableValue,
 		select,
 		onTabClose,
+		shouldAnnounceClose,
 		getTabId: (value) => getTabId(baseId, value),
 		getPanelId: (value) => tabList ? getPanelId(baseId, value) : void 0,
 		isNavigation,
@@ -438,6 +440,7 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 		focusableValue,
 		select,
 		onTabClose,
+		shouldAnnounceClose,
 		baseId,
 		tabList,
 		isNavigation,
@@ -604,10 +607,12 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 						children: hiddenTabs.map((tab) => /* @__PURE__ */ jsx(MenuItem, {
 							value: tab.value,
 							disabled: tab.disabled,
+							shouldAnnounceSecondaryAction: shouldAnnounceClose,
 							secondaryAction: tab.closeLabel === void 0 ? void 0 : /* @__PURE__ */ jsx(OverflowClose, {
 								type: "button",
 								color: selectedColor,
-								"aria-hidden": true,
+								"aria-hidden": shouldAnnounceClose ? void 0 : true,
+								"aria-label": shouldAnnounceClose ? tab.closeLabel : void 0,
 								title: tab.closeLabel,
 								tabIndex: -1,
 								onClick: () => onTabClose?.(tab.value),

package/dist/Tabs.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Tabs_Tab = require("./Tabs/Tab.cjs");
 const require_Tabs_TabContext = require("./Tabs/TabContext.cjs");
 const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
-const require_Tabs = require("./Tabs-D_wkX-Jb.cjs");
+const require_Tabs = require("./Tabs-Croeq9s2.cjs");
 const require_Tabs_TabList = require("./Tabs/TabList.cjs");
 const require_Tabs_TabPanel = require("./Tabs/TabPanel.cjs");
 exports.Tab = require_Tabs_Tab.Tab;

package/dist/Tabs.d.cts

@@ -1,8 +1,8 @@
-import { t as TabValue } from "./TabsContext-C2agsLBN.cjs";
+import { t as TabValue } from "./TabsContext-BYeGjSZK.cjs";
 import { Tab, TabIconPosition, TabProps } from "./Tabs/Tab.cjs";
 import { TabContext, TabContextProps } from "./Tabs/TabContext.cjs";
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-gnh-Oe0n.cjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-B3LIhqHR.cjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-BitQk7Hx.cjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-Ebjbrbsk.cjs";
 import { TabList, TabListProps } from "./Tabs/TabList.cjs";
 import { TabPanel, TabPanelProps } from "./Tabs/TabPanel.cjs";
 export { Tab, TabContext, TabContextProps, TabIconPosition, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabScrollButton, TabScrollButtonProps, TabScrollDirection, type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs.d.mts

@@ -1,8 +1,8 @@
-import { t as TabValue } from "./TabsContext-DqyxdmGW.mjs";
+import { t as TabValue } from "./TabsContext-D4YumTfD.mjs";
 import { Tab, TabIconPosition, TabProps } from "./Tabs/Tab.mjs";
 import { TabContext, TabContextProps } from "./Tabs/TabContext.mjs";
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-BjPX49XA.mjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-CoEqjFYn.mjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-CyLhEXYB.mjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-D_-DAAE7.mjs";
 import { TabList, TabListProps } from "./Tabs/TabList.mjs";
 import { TabPanel, TabPanelProps } from "./Tabs/TabPanel.mjs";
 export { Tab, TabContext, TabContextProps, TabIconPosition, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabScrollButton, TabScrollButtonProps, TabScrollDirection, type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs.mjs

@@ -1,7 +1,7 @@
 import { Tab } from "./Tabs/Tab.mjs";
 import { TabContext } from "./Tabs/TabContext.mjs";
 import { TabScrollButton } from "./Tabs/TabScrollButton.mjs";
-import { t as Tabs } from "./Tabs-YfCUbkQV.mjs";
+import { t as Tabs } from "./Tabs-DMMP5aDj.mjs";
 import { TabList } from "./Tabs/TabList.mjs";
 import { TabPanel } from "./Tabs/TabPanel.mjs";
 export { Tab, TabContext, TabList, TabPanel, TabScrollButton, Tabs };

package/dist/{TabsContext-C2agsLBN.d.cts → TabsContext-BYeGjSZK.d.cts}

@@ -1,4 +1,4 @@
-import "./index-DDJuUfL5.cjs";
+import "./index-BhnLFsBv.cjs";
 //#region src/Tabs/TabsContext.d.ts
 /** A tab's value: what it is chosen as. A `Tab` without one takes its position. */
 type TabValue = string | number;

package/dist/{TabsContext-DqyxdmGW.d.mts → TabsContext-D4YumTfD.d.mts}

@@ -1,4 +1,4 @@
-import "./index-BVPrG1L0.mjs";
+import "./index-vBCN6iAz.mjs";
 //#region src/Tabs/TabsContext.d.ts
 /** A tab's value: what it is chosen as. A `Tab` without one takes its position. */
 type TabValue = string | number;

package/dist/TextInput.cjs

@@ -1,9 +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_inputVariantStyles = require("./inputVariantStyles-BUK_62Ra.cjs");
 const require_FormControl = require("./FormControl.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.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");
@@ -65,10 +65,10 @@ const baseStyle = {
 	alignItems: "center",
 	transition: "border-color 0.15s ease"
 };
-const backgroundStyle = ({ theme, textColor = require_themeDefault.themeDefault(theme, "accentTextColor", "primary") }) => {
+const backgroundStyle = ({ theme, textColor, color = require_themeDefault.themeDefault(theme, "color", "primary") }) => {
 	return {
 		backgroundColor: (0, require_src.src_exports.get)(theme, `background.${require_themeDefault.themeDefault(theme, "inputBg", "terminal")}`),
-		color: (0, require_src.src_exports.get)(theme, `text.${textColor}`),
+		color: textColor ? (0, require_src.src_exports.get)(theme, `text.${textColor}`) : (0, require_src.src_exports.get)(theme, `palette.${color}.main`),
 		fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
 		fontSize: (0, require_src.src_exports.get)(theme, "fontSizes.1"),
 		lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base")
@@ -77,18 +77,14 @@ const backgroundStyle = ({ theme, textColor = require_themeDefault.themeDefault(
 const colorBorder = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => {
 	return { borderColor: error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.light`) };
 };
-const focusVisibleRing = ({ theme }) => {
-	return { "&:has(:focus-visible)": {
-		outline: `2px solid ${(0, require_src.src_exports.get)(theme, `palette.${require_themeDefault.themeDefault(theme, "color", "primary")}.main`)}`,
-		outlineOffset: "2px"
-	} };
-};
+const focusVisibleRing = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => ({ "&:has(:focus-visible)": require_inputVariantStyles.getFocusRing(theme, color, error) });
 const focusWithinColor = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => ({ "&:focus-within": { borderColor: error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`) } });
 const borderRadiusStyle = ({ variant: v = "default", borderRadius, theme }) => {
 	if (v === "underline" || v === "text" || !borderRadius) return {};
 	return { borderRadius: (0, require_src.src_exports.get)(theme, `radii.${borderRadius}`) };
 };
-const layoutStyles = ({ fullWidth, disabled }) => ({
+const layoutStyles = ({ theme, fullWidth, disabled }) => ({
+	minWidth: require_inputVariantStyles.getInputMinWidth(theme),
 	...fullWidth ? {
 		display: "flex",
 		width: "100%"
@@ -178,7 +174,7 @@ function TextInput({ autoComplete, autoFocus, borderRadius, classes, components,
 	const { id, error, disabled, required, size, fullWidth } = fc;
 	const theme = require_theme.useTheme();
 	const color = fc.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
-	const textColor = fc.textColor ?? require_themeDefault.themeDefault(theme, "accentTextColor", "primary");
+	const textColor = fc.textColor;
 	const variant = variantProp ?? require_themeDefault.themeDefault(theme, "inputVariant", "default");
 	const isAutoResize = resize;
 	const isMultiline = multiline || rows !== void 0 && Number(rows) > 1;
@@ -205,14 +201,18 @@ function TextInput({ autoComplete, autoFocus, borderRadius, classes, components,
 	};
 	let inputElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledInput, {
 		inputComponent: resolvedInputComponent,
-		inputSize,
+		inputSize: inputSize ?? (resolvedInputComponent ? void 0 : 1),
 		...inputElProps
 	});
 	if (isTextarea) inputElement = isAutoResize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAutoResizeTextarea, {
 		...inputElProps,
+		cols: 1,
 		minRows: minRows ?? rows,
 		maxRows
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTextarea, { ...inputElProps });
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTextarea, {
+		...inputElProps,
+		cols: 1
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInputRoot, {
 		as: components?.Root,
 		color,

package/dist/TextInput.d.cts

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/TextInput/TextInput.d.ts
@@ -24,7 +24,7 @@ interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'wi
   };
   /** Focus/active border color - resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: TextInputColor;
-  /** Text color of the typed value - resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  /** Text color of the typed value - resolves against `theme.text`. Default: the accent `color`'s `main`. */
   textColor?: TextInputTextColor;
   /** Disables the input. */
   disabled?: boolean;

package/dist/TextInput.d.mts

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 //#region src/TextInput/TextInput.d.ts
@@ -24,7 +24,7 @@ interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'wi
   };
   /** Focus/active border color - resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: TextInputColor;
-  /** Text color of the typed value - resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  /** Text color of the typed value - resolves against `theme.text`. Default: the accent `color`'s `main`. */
   textColor?: TextInputTextColor;
   /** Disables the input. */
   disabled?: boolean;