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

package/dist/{MenuItem-BTP7Ijwi.cjs → MenuItem-EJ4u73f0.cjs}

@@ -1,10 +1,11 @@
 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_Icon = require("./Icon-D-EWsBVg.cjs");
+const require_getSurfaceRadius = require("./getSurfaceRadius-BTUV1E8H.cjs");
+const require_Icon = require("./Icon-BE7bRsqR.cjs");
 const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
-const require_MenuList = require("./MenuList-D4imLXAa.cjs");
-const require_computePopoverPosition = require("./computePopoverPosition-DiyEOHnU.cjs");
+const require_useAnchoredPlacement = require("./useAnchoredPlacement-B1FyGoZV.cjs");
+const require_MenuList = require("./MenuList-BBAYeUvD.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");
@@ -20,9 +21,10 @@ const MenuPaper = require_src.styled("div", {
 	shouldForwardProp: (prop) => ![
 		"elevation",
 		"layer",
-		"margin"
+		"margin",
+		"borderRadius"
 	].includes(prop)
-})(({ theme, layer, margin }) => ({
+})(({ theme, layer, margin, borderRadius }) => ({
 	position: "fixed",
 	top: 0,
 	left: 0,
@@ -31,7 +33,7 @@ const MenuPaper = require_src.styled("div", {
 	maxHeight: `calc(100vh - ${2 * margin}px)`,
 	overflowY: "auto",
 	backgroundColor: (0, require_src.src_exports.get)(theme, `background.${require_themeDefault.themeDefault(theme, "surfaceBg", "paper")}`),
-	borderRadius: theme.radii.sm,
+	borderRadius: require_getSurfaceRadius.getSurfaceRadius(theme, borderRadius),
 	visibility: "hidden"
 }), elevationSystem);
 //#endregion
@@ -95,81 +97,39 @@ function hasRoomBeside(anchorRect, width, viewportWidth, margin) {
 //#endregion
 //#region src/Menu/hooks/useMenuPlacement.ts
 /**
-* Places a menu's `position: fixed` surface in the window, next to its anchor - so a
-* scrolling panel's overflow never clips it, while it stays in the menu's own box in the
-* DOM. Placed before paint on every render while open, and again on resize and on any
-* scroll. The surface starts `visibility: hidden` and is shown here, as it is placed - in
-* the same layout pass, so it is visible by the time anything inside it takes focus.
-* Returns whether a list beside its row opened on the other side for want of room.
+* Places a menu's `position: fixed` surface in the window, next to its anchor, with the shared
+* `useAnchoredPlacement`. A submenu with room on neither side of its row opens under it (or over
+* it) instead, so it never covers the row it came from. Returns whether a list beside its row
+* opened on the other side for want of room.
 */
 function useMenuPlacement({ isOpen, anchorRef, surfaceRef, placement, align, margin, anchorPosition = null }) {
 	const [isFlipped, setIsFlipped] = (0, react.useState)(false);
-	const pointTop = anchorPosition?.top;
-	const pointLeft = anchorPosition?.left ?? 0;
-	const place = (0, react.useCallback)(() => {
-		const anchor = anchorRef.current;
-		const surface = surfaceRef.current;
-		if (!anchor || !surface) return;
-		const isPoint = pointTop !== void 0;
-		const anchorRect = anchor.getBoundingClientRect();
-		const paperRect = {
-			width: surface.offsetWidth,
-			height: surface.offsetHeight
-		};
-		const viewport = {
-			width: window.innerWidth,
-			height: window.innerHeight
-		};
-		const isCramped = placement === "beside" && !hasRoomBeside(anchorRect, paperRect.width, viewport.width, margin);
-		const { top, left } = require_computePopoverPosition.computePopoverPosition({
-			anchorReference: isPoint ? "anchorPosition" : "anchorEl",
-			anchorPosition: isPoint ? {
-				top: pointTop,
-				left: pointLeft
-			} : void 0,
-			anchorRect,
-			paperRect,
-			...getMenuOrigins(isCramped ? "below" : placement, align, require_isRtl.isRtl(anchor)),
-			viewport,
-			marginThreshold: margin
-		});
-		surface.style.top = `${top}px`;
-		surface.style.left = `${left}px`;
-		const landed = surface.getBoundingClientRect();
-		const isOwnBox = paperRect.width > 0 && Math.round(landed.width) === paperRect.width;
-		const shiftTop = Math.round(landed.top - top);
-		const shiftLeft = Math.round(landed.left - left);
-		if (isOwnBox && (shiftTop !== 0 || shiftLeft !== 0)) {
-			surface.style.top = `${top - shiftTop}px`;
-			surface.style.left = `${left - shiftLeft}px`;
-		}
-		surface.style.visibility = "visible";
-		if (placement === "beside") {
-			const isOpeningRight = left + paperRect.width / 2 > anchorRect.left + anchorRect.width / 2;
-			const isRightPreferred = align === "start" !== require_isRtl.isRtl(anchor);
-			setIsFlipped(!isCramped && isOpeningRight !== isRightPreferred);
-		}
+	const isCramped = (0, react.useCallback)(({ anchorRect, surfaceSize, viewport }) => placement === "beside" && !hasRoomBeside(anchorRect, surfaceSize.width, viewport.width, margin), [placement, margin]);
+	const getOrigins = (0, react.useCallback)((context) => getMenuOrigins(isCramped(context) ? "below" : placement, align, context.isRtl), [
+		isCramped,
+		placement,
+		align
+	]);
+	const onPlaced = (0, react.useCallback)((placed) => {
+		if (placement !== "beside") return;
+		const { anchorRect, surfaceSize, left, isRtl } = placed;
+		const isOpeningRight = left + surfaceSize.width / 2 > anchorRect.left + anchorRect.width / 2;
+		const isRightPreferred = align === "start" !== isRtl;
+		setIsFlipped(!isCramped(placed) && isOpeningRight !== isRightPreferred);
 	}, [
-		anchorRef,
-		surfaceRef,
 		placement,
 		align,
-		margin,
-		pointTop,
-		pointLeft
+		isCramped
 	]);
-	(0, react.useLayoutEffect)(() => {
-		if (isOpen) place();
+	require_useAnchoredPlacement.useAnchoredPlacement({
+		isOpen,
+		anchorRef,
+		surfaceRef,
+		anchorPosition,
+		getOrigins,
+		margin,
+		onPlaced
 	});
-	(0, react.useEffect)(() => {
-		if (!isOpen) return void 0;
-		window.addEventListener("resize", place);
-		window.addEventListener("scroll", place, true);
-		return () => {
-			window.removeEventListener("resize", place);
-			window.removeEventListener("scroll", place, true);
-		};
-	}, [isOpen, place]);
 	return isFlipped;
 }
 //#endregion
@@ -460,7 +420,7 @@ const getRowAria = (state) => ({
 	"aria-expanded": state.hasSubmenu ? state.isSubmenuOpen : void 0,
 	"aria-controls": state.isSubmenuOpen ? state.submenuId : void 0,
 	"aria-checked": state.role === "menuitem" ? void 0 : state.selected,
-	"aria-keyshortcuts": typeof state.shortcut === "string" ? state.shortcut : void 0,
+	"aria-keyshortcuts": state.keyShortcuts ?? (typeof state.shortcut === "string" ? state.shortcut : void 0),
 	"aria-describedby": state.note ? state.noteId : void 0
 });
 const joinClassNames = (...names) => names.filter(Boolean).join(" ") || void 0;
@@ -471,7 +431,7 @@ const joinClassNames = (...names) => names.filter(Boolean).join(" ") || void 0;
 * `<li role="option">` (override via `as`), whose selection, highlight and density props
 * `Select` injects; used on its own it renders a static, styled row.
 */
-function MenuItem({ value, children, as, disabled = false, selected = false, highlighted = false, multiple = false, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, disableGutters = false, divider = false, autoFocus = false, focusVisibleClassName, onSelect, role = "menuitem", startIcon, shortcut, note, onClick, submenu, emptyLabel, secondaryAction, id, className, "data-testid": dataTestid }) {
+function MenuItem({ value, children, as, disabled = false, selected = false, highlighted = false, multiple = false, color: colorProp, textColor: textColorProp, size: sizeProp, dense: denseProp, disableGutters = false, divider = false, autoFocus = false, focusVisibleClassName, onSelect, role = "menuitem", startIcon, shortcut, "aria-keyshortcuts": keyShortcuts, note, onClick, submenu, emptyLabel, secondaryAction, shouldAnnounceSecondaryAction = false, id, className, "data-testid": dataTestid }) {
 	const menu = require_MenuList.useMenuListContext();
 	const isMenu = menu !== null;
 	const { color, size, textColor, dense } = useRowLook({
@@ -577,6 +537,7 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 			isSubmenuOpen,
 			submenuId,
 			shortcut,
+			keyShortcuts,
 			note,
 			noteId
 		}),
@@ -617,7 +578,7 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 		role: "none",
 		hasSecondaryAction: true,
 		children: [row, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecondaryActionSlot, {
-			"aria-hidden": true,
+			"aria-hidden": shouldAnnounceSecondaryAction ? void 0 : true,
 			children: secondaryAction
 		})]
 	});
@@ -631,7 +592,7 @@ function MenuItem({ value, children, as, disabled = false, selected = false, hig
 		children: [
 			row,
 			hasSecondaryAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecondaryActionSlot, {
-				"aria-hidden": true,
+				"aria-hidden": shouldAnnounceSecondaryAction ? void 0 : true,
 				children: secondaryAction
 			}),
 			isSubmenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Submenu, {

package/dist/MenuItem.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_MenuItem = require("./MenuItem-BTP7Ijwi.cjs");
+const require_MenuItem = require("./MenuItem-EJ4u73f0.cjs");
 exports.MenuItem = require_MenuItem.MenuItem;

package/dist/MenuItem.d.cts

@@ -1,2 +1,2 @@
-import { a as MenuItemSize, i as MenuItemRole, n as MenuItemColor, o as MenuItemTextColor, r as MenuItemProps, t as MenuItem } from "./index-B4TeaB7b.cjs";
+import { a as MenuItemSize, i as MenuItemRole, n as MenuItemColor, o as MenuItemTextColor, r as MenuItemProps, t as MenuItem } from "./index-BSGu9rPv.cjs";
 export { MenuItem, MenuItemColor, MenuItemProps, MenuItemRole, MenuItemSize, MenuItemTextColor };

package/dist/MenuItem.d.mts

@@ -1,2 +1,2 @@
-import { a as MenuItemSize, i as MenuItemRole, n as MenuItemColor, o as MenuItemTextColor, r as MenuItemProps, t as MenuItem } from "./index-B1RFybA_.mjs";
+import { a as MenuItemSize, i as MenuItemRole, n as MenuItemColor, o as MenuItemTextColor, r as MenuItemProps, t as MenuItem } from "./index-46mhlgP6.mjs";
 export { MenuItem, MenuItemColor, MenuItemProps, MenuItemRole, MenuItemSize, MenuItemTextColor };

package/dist/MenuItem.mjs

@@ -1,2 +1,2 @@
-import { t as MenuItem } from "./MenuItem-DUn4IZKK.mjs";
+import { t as MenuItem } from "./MenuItem-C21eR7d6.mjs";
 export { MenuItem };

package/dist/{MenuList-D4imLXAa.cjs → MenuList-BBAYeUvD.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");
 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/{MenuList-B7msJ1IG.mjs → MenuList-Cz3cupC3.mjs}

@@ -1,6 +1,6 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps } from "./theme-oBfFhJm9.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { n as useDefaultProps } from "./theme-Z9_QludW.mjs";
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Menu/MenuActivationContext.ts

package/dist/{MenuListContext-DKUOhNyw.d.cts → MenuListContext-BWL5fM_L.d.mts}

@@ -1,5 +1,5 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import "./index-DchHf5cF.cjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import "./index-vBCN6iAz.mjs";
 import { SyntheticEvent } from "react";
 //#region src/Menu/MenuListContext.d.ts
 type MenuItemValue = string | number;

package/dist/{MenuListContext-x-7lH4CH.d.mts → MenuListContext-BrCKLgKZ.d.cts}

@@ -1,5 +1,5 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import "./index-h4dYtVrp.mjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import "./index-BhnLFsBv.cjs";
 import { SyntheticEvent } from "react";
 //#region src/Menu/MenuListContext.d.ts
 type MenuItemValue = string | number;

package/dist/{Modal-BcsyrrpH.mjs → Modal-CEHDej-v.mjs}

@@ -1,9 +1,10 @@
 import { o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
+import { Portal } from "./Portal.mjs";
 import { Backdrop } from "./Backdrop.mjs";
 import { FocusTrap } from "./FocusTrap.mjs";
-import { Portal } from "./Portal.mjs";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { t as useMergedRefs } from "./useMergedRefs-BfBckwRY.mjs";
+import { useCallback, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/utils/ownerDocument.ts
 /**
@@ -180,26 +181,6 @@ function useEventCallback(fn) {
 	return useCallback((...args) => ref.current(...args), []);
 }
 //#endregion
-//#region src/Modal/hooks/useMergedRefs.ts
-function assignRef(ref, value) {
-	if (typeof ref === "function") ref(value);
-	else if (ref) ref.current = value;
-}
-/**
-* Merges two refs into a single stable ref callback so one DOM node can be
-* tracked by both an internal ref and a forwarded `ref`. Returns `null` when
-* both refs are absent, so React skips attaching a callback ref entirely.
-*/
-function useMergedRefs(refA, refB) {
-	return useMemo(() => {
-		if (refA == null && refB == null) return null;
-		return (value) => {
-			assignRef(refA, value);
-			assignRef(refB, value);
-		};
-	}, [refA, refB]);
-}
-//#endregion
 //#region src/Modal/useModal.ts
 const modalManager = new ModalManager();
 function getContainer(container) {

package/dist/{Modal-CM3osOqj.cjs → Modal-DBw4j0YA.cjs}

@@ -1,8 +1,9 @@
 const require_src = require("./src-DU81aGy9.cjs");
 const require_View = require("./View.cjs");
+const require_Portal = require("./Portal.cjs");
 const require_Backdrop = require("./Backdrop.cjs");
 const require_FocusTrap = require("./FocusTrap.cjs");
-const require_Portal = require("./Portal.cjs");
+const require_useMergedRefs = require("./useMergedRefs-2zTDXgPO.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");
@@ -181,26 +182,6 @@ function useEventCallback(fn) {
 	return (0, react.useCallback)((...args) => ref.current(...args), []);
 }
 //#endregion
-//#region src/Modal/hooks/useMergedRefs.ts
-function assignRef(ref, value) {
-	if (typeof ref === "function") ref(value);
-	else if (ref) ref.current = value;
-}
-/**
-* Merges two refs into a single stable ref callback so one DOM node can be
-* tracked by both an internal ref and a forwarded `ref`. Returns `null` when
-* both refs are absent, so React skips attaching a callback ref entirely.
-*/
-function useMergedRefs(refA, refB) {
-	return (0, react.useMemo)(() => {
-		if (refA == null && refB == null) return null;
-		return (value) => {
-			assignRef(refA, value);
-			assignRef(refB, value);
-		};
-	}, [refA, refB]);
-}
-//#endregion
 //#region src/Modal/useModal.ts
 const modalManager = new ModalManager();
 function getContainer(container) {
@@ -211,7 +192,7 @@ function useModal(parameters) {
 	const modal = (0, react.useRef)({});
 	const mountNodeRef = (0, react.useRef)(null);
 	const modalRef = (0, react.useRef)(null);
-	const handleRef = useMergedRefs(modalRef, rootRef);
+	const handleRef = require_useMergedRefs.useMergedRefs(modalRef, rootRef);
 	const getModal = () => {
 		modal.current.modalRef = modalRef.current;
 		modal.current.mount = mountNodeRef.current;

package/dist/Modal.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Modal = require("./Modal-CM3osOqj.cjs");
+const require_Modal = require("./Modal-DBw4j0YA.cjs");
 exports.Modal = require_Modal.Modal;
 exports.ModalManager = require_Modal.ModalManager;
 exports.exposeToAria = require_Modal.exposeToAria;

package/dist/Modal.d.cts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-nqUA_6J_.cjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-CrQDxJ1D.cjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/Modal.d.mts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-Bx0-6yeX.mjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-Bfyz3MDc.mjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/Modal.mjs

@@ -1,2 +1,2 @@
-import { a as hideFromAria, i as exposeToAria, n as useModal, r as ModalManager, t as Modal } from "./Modal-BcsyrrpH.mjs";
+import { a as hideFromAria, i as exposeToAria, n as useModal, r as ModalManager, t as Modal } from "./Modal-CEHDej-v.mjs";
 export { Modal, ModalManager, exposeToAria, hideFromAria, useModal };

package/dist/NativeSelect.cjs

@@ -1,10 +1,10 @@
 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_Icon = require("./Icon-D-EWsBVg.cjs");
+const require_Icon = require("./Icon-BE7bRsqR.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-BUK_62Ra.cjs");
 const require_FormControl = require("./FormControl.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.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");
@@ -39,17 +39,13 @@ const colorBorder = ({ theme, color = require_themeDefault.themeDefault(theme, "
 const focusWithinColor = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => {
 	return { "&: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 focusVisibleRing = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => {
-	return { "&:has(:focus-visible)": {
-		outline: `2px solid ${error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`)}`,
-		outlineOffset: "2px"
-	} };
-};
+const focusVisibleRing = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => ({ "&:has(:focus-visible)": require_inputVariantStyles.getFocusRing(theme, color, error) });
 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%"
@@ -181,8 +177,8 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 			}, String(option.value)))]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownIcon, {
 			name: iconName,
-			size: "1.25rem",
-			color: "secondary",
+			size,
+			color: "inherit",
 			...iconProps
 		})]
 	});

package/dist/NativeSelect.d.cts

@@ -1,5 +1,5 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { n as IconProps, r as IconName } from "./index-Dv_fk1_F.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { n as IconProps, r as IconName } from "./index-05VGk0y_.cjs";
 import { SelectHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/NativeSelect/NativeSelect.d.ts

package/dist/NativeSelect.d.mts

@@ -1,5 +1,5 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { n as IconProps, r as IconName } from "./index-ha1WjSZ5.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { n as IconProps, r as IconName } from "./index-DNj5P2NH.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { SelectHTMLAttributes } from "react";
 //#region src/NativeSelect/NativeSelect.d.ts

package/dist/NativeSelect.mjs

@@ -1,9 +1,9 @@
 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 { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { t as Icon } from "./Icon-0hPpk-WZ.mjs";
+import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-q_cZsCJg.mjs";
 import { useFormControl } from "./FormControl.mjs";
-import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/NativeSelect/NativeSelect.tsx
@@ -37,17 +37,13 @@ const colorBorder = ({ theme, color = themeDefault(theme, "color", "primary"), e
 const focusWithinColor = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
 	return { "&:focus-within": { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`) } };
 };
-const focusVisibleRing = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
-	return { "&:has(:focus-visible)": {
-		outline: `2px solid ${error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`)}`,
-		outlineOffset: "2px"
-	} };
-};
+const focusVisibleRing = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => ({ "&:has(:focus-visible)": getFocusRing(theme, color, error) });
 const borderRadiusStyle = ({ variant: v = "default", borderRadius, theme }) => {
 	if (v === "underline" || v === "text" || !borderRadius) return {};
 	return { borderRadius: (0, src_exports.get)(theme, `radii.${borderRadius}`) };
 };
-const layoutStyles = ({ fullWidth, disabled }) => ({
+const layoutStyles = ({ theme, fullWidth, disabled }) => ({
+	minWidth: getInputMinWidth(theme),
 	...fullWidth ? {
 		display: "flex",
 		width: "100%"
@@ -179,8 +175,8 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 			}, String(option.value)))]
 		}), /* @__PURE__ */ jsx(DropdownIcon, {
 			name: iconName,
-			size: "1.25rem",
-			color: "secondary",
+			size,
+			color: "inherit",
 			...iconProps
 		})]
 	});