@soroush.tech/design-system 1.3.3 → 2.0.0-alpha.1

package/dist/Drawer.mjs

@@ -1,7 +1,8 @@
 import { o as styled, r as keyframes, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { Button } from "./Button.mjs";
 import { Paper } from "./Paper.mjs";
-import { t as Modal } from "./Modal-CYNcPk-2.mjs";
-import "react";
+import { FocusTrap } from "./FocusTrap.mjs";
+import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Drawer/Drawer.tsx
 const slideIn = {
@@ -36,32 +37,122 @@ const anchorPosition = {
 		width: "100%"
 	}
 };
-const shouldForwardProp = createShouldForwardProp(["anchor", "duration"]);
-const DrawerPanel = styled(Paper, {
+const shouldForwardProp = createShouldForwardProp([
+	"anchor",
+	"duration",
+	"hasBackdrop"
+]);
+const DrawerPanel = styled("div", {
 	name: "Drawer",
 	label: "Drawer",
 	shouldForwardProp
-})(({ anchor, duration }) => ({
+})(({ theme, anchor, duration, hasBackdrop }) => ({
 	position: "fixed",
+	inset: "auto",
+	margin: 0,
+	padding: 0,
+	border: "none",
+	background: "transparent",
+	color: "inherit",
+	maxWidth: "100%",
+	maxHeight: "100%",
+	overflow: "visible",
 	...anchorPosition[anchor],
-	animation: `${slideIn[anchor]} ${duration}ms ease-out`,
-	"@media (prefers-reduced-motion: reduce)": { animation: "none" }
+	"&:popover-open": { animation: `${slideIn[anchor]} ${duration}ms ease-out` },
+	"&::backdrop": { backgroundColor: hasBackdrop ? theme.background.backdrop : "transparent" },
+	"@media (prefers-reduced-motion: reduce)": { "&:popover-open": { animation: "none" } }
 }));
 /**
-* @description A panel that slides in from a screen edge, built on Modal. Portals,
-* dims the page, traps focus, locks scroll, and closes on Escape or backdrop click.
+* @description A panel that slides in from a screen edge. It is an HTML `popover`: a
+* `DrawerToggle` opens it, and Escape or a click outside closes it - all without JavaScript,
+* so it works on a prerendered page with scripts off. With JavaScript it can be controlled with
+* `isOpen` / `onClose`, and it moves focus in, traps Tab and locks scroll while open.
 */
-function Drawer({ children, anchor = "left", elevation = 16, transitionDuration = 225, ...modalProps }) {
-	return /* @__PURE__ */ jsx(Modal, {
-		...modalProps,
-		layer: "drawer",
-		children: /* @__PURE__ */ jsx(DrawerPanel, {
-			anchor,
-			duration: transitionDuration,
+function Drawer({ id, children, isOpen, onClose, anchor = "left", elevation = 16, transitionDuration = 225, hasBackdrop = true, shouldLockScroll = true, shouldAutoFocus = true, shouldTrapFocus = true, shouldRestoreFocus = true }) {
+	const panelRef = useRef(null);
+	const [isShown, setIsShown] = useState(false);
+	const isShownRef = useRef(false);
+	const closingByProp = useRef(false);
+	const onCloseRef = useRef(onClose);
+	useEffect(() => {
+		onCloseRef.current = onClose;
+	}, [onClose]);
+	useEffect(() => {
+		const panel = panelRef.current;
+		let escaped = false;
+		const handleKeyDown = (event) => {
+			escaped = event.key === "Escape" && isShownRef.current;
+		};
+		const handleToggle = (event) => {
+			const open = event.newState === "open";
+			isShownRef.current = open;
+			setIsShown(open);
+			if (!open && !closingByProp.current) onCloseRef.current?.(event, escaped ? "escapeKey" : "dismiss");
+			closingByProp.current = false;
+			escaped = false;
+		};
+		const doc = panel.ownerDocument;
+		doc.addEventListener("keydown", handleKeyDown, true);
+		panel.addEventListener("toggle", handleToggle);
+		return () => {
+			doc.removeEventListener("keydown", handleKeyDown, true);
+			panel.removeEventListener("toggle", handleToggle);
+		};
+	}, []);
+	useEffect(() => {
+		if (isOpen === void 0 || isOpen === isShownRef.current) return;
+		const panel = panelRef.current;
+		isShownRef.current = isOpen;
+		if (isOpen) panel.showPopover();
+		else {
+			closingByProp.current = true;
+			panel.hidePopover();
+		}
+	}, [isOpen]);
+	useEffect(() => {
+		if (!isShown || !shouldLockScroll) return;
+		const { body } = panelRef.current.ownerDocument;
+		const previous = body.style.overflow;
+		body.style.overflow = "hidden";
+		return () => {
+			body.style.overflow = previous;
+		};
+	}, [isShown, shouldLockScroll]);
+	return /* @__PURE__ */ jsx(DrawerPanel, {
+		ref: panelRef,
+		id,
+		popover: "auto",
+		anchor,
+		duration: transitionDuration,
+		hasBackdrop,
+		children: /* @__PURE__ */ jsx(Paper, {
 			elevation,
-			children
+			width: "100%",
+			height: "100%",
+			overflow: "auto",
+			children: /* @__PURE__ */ jsx(FocusTrap, {
+				isEnabled: isShown,
+				shouldAutoFocus,
+				shouldTrapFocus,
+				shouldEnforceFocus: false,
+				shouldRestoreFocus,
+				children
+			})
 		})
 	});
 }
 //#endregion
-export { Drawer };
+//#region src/Drawer/DrawerToggle.tsx
+/**
+* @description The button that opens and closes a `Drawer`, through the HTML
+* `popovertarget` attribute - it works without JavaScript. Takes every `Button` prop.
+*/
+function DrawerToggle({ drawer, action = "toggle", ...rest }) {
+	return /* @__PURE__ */ jsx(Button, {
+		popoverTarget: drawer,
+		popoverTargetAction: action,
+		...rest
+	});
+}
+//#endregion
+export { Drawer, DrawerToggle };

package/dist/Flex.cjs

@@ -3,12 +3,16 @@ const require_src = require("./src-DU81aGy9.cjs");
 const require_View = require("./View.cjs");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 //#region src/Flex/Flex.tsx
-const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]);
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props, "layout"]);
 const Flex = require_src.styled(require_View.View, {
 	name: "Flex",
 	label: "flex",
 	shouldForwardProp,
-	systemProps: [require_src.src_exports.flexbox]
+	systemProps: [
+		require_src.src_exports.layoutFlex,
+		require_src.src_exports.flexbox,
+		require_src.src_exports.space
+	]
 })({
 	display: "flex",
 	flexDirection: "column"

package/dist/Flex.d.cts

@@ -1,2 +1,2 @@
-import { n as FlexProps, r as GapToken, t as Flex } from "./index-DOLA1VFD.cjs";
+import { n as FlexProps, r as GapToken, t as Flex } from "./index-Da9Sr6v7.cjs";
 export { Flex, FlexProps, GapToken };

package/dist/Flex.d.mts

@@ -1,2 +1,2 @@
-import { n as FlexProps, r as GapToken, t as Flex } from "./index-KZKeZDAF.mjs";
+import { n as FlexProps, r as GapToken, t as Flex } from "./index-C-ACdUhw.mjs";
 export { Flex, FlexProps, GapToken };

package/dist/Flex.mjs

@@ -1,12 +1,16 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
 //#region src/Flex/Flex.tsx
-const shouldForwardProp = createShouldForwardProp([...props]);
+const shouldForwardProp = createShouldForwardProp([...props, "layout"]);
 const Flex = styled(View, {
 	name: "Flex",
 	label: "flex",
 	shouldForwardProp,
-	systemProps: [src_exports.flexbox]
+	systemProps: [
+		src_exports.layoutFlex,
+		src_exports.flexbox,
+		src_exports.space
+	]
 })({
 	display: "flex",
 	flexDirection: "column"

package/dist/Form.d.cts

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/Form.d.mts

@@ -1,4 +1,4 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
 import { ReactNode, SyntheticEvent } from "react";
 //#region src/Form/Form.d.ts
 interface FormProps {

package/dist/FormControl.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_View = require("./View.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Bnc03K83.cjs");
+const require_theme = require("./theme-DfAqr7qo.cjs");
 const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
 const require_FormContext = require("./FormContext-BGCsWAFc.cjs");
 let react = require("react");

package/dist/FormControl.d.cts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import { s as ViewProps } from "./index-Btmdtbpb.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import { s as ViewProps } from "./index-B2LR3Y5d.cjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {

package/dist/FormControl.d.mts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import { s as ViewProps } from "./index-DQ16ijxx.mjs";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import { s as ViewProps } from "./index-AlVOmB-K.mjs";
 import { ReactNode } from "react";
 //#region src/FormControl/FormControl.d.ts
 interface FormControlProps extends Omit<ViewProps, 'color'> {

package/dist/FormControl.mjs

@@ -1,7 +1,7 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-BuqqFbsz.mjs";
+import { r as useTheme } from "./theme-C1o9qa2E.mjs";
 import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
 import { t as FormContext } from "./FormContext-LrjAGe6U.mjs";
 import { useContext, useId, useMemo, useState } from "react";

package/dist/FormHelperText.d.cts

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

package/dist/FormLabel.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-Csp1Wzbz.cjs";
+import { a as TypographyProps } from "./index-DClEfecw.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-BWECJgSb.mjs";
+import { a as TypographyProps } from "./index-COYl2TN0.mjs";
 import { ReactNode } from "react";
 //#region src/FormLabel/FormLabel.d.ts
 interface FormLabelProps extends TypographyProps {

package/dist/Grid.cjs

@@ -3,12 +3,17 @@ const require_src = require("./src-DU81aGy9.cjs");
 const require_View = require("./View.cjs");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
 //#region src/Grid/Grid.tsx
-const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]);
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props, "layout"]);
 const Grid = require_src.styled(require_View.View, {
 	name: "Grid",
 	label: "grid",
 	shouldForwardProp,
-	systemProps: [require_src.src_exports.grid, require_src.src_exports.flexbox]
+	systemProps: [
+		require_src.src_exports.layoutGrid,
+		require_src.src_exports.grid,
+		require_src.src_exports.flexbox,
+		require_src.src_exports.space
+	]
 })({ display: "grid" });
 //#endregion
 exports.Grid = Grid;

package/dist/Grid.d.cts

@@ -1,11 +1,15 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { s as ViewProps } from "./index-Btmdtbpb.cjs";
-import { FlexboxProps, GridProps as GridProps$1 } from "@soroush.tech/styled-system";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { s as ViewProps } from "./index-B2LR3Y5d.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. */
 type GapToken = keyof Theme['space'];
-interface GridProps extends ViewProps, GridProps$1<Theme>, FlexboxProps<Theme> {}
+/**
+ * `layout` lays the grid out from `theme.layout` - the theme's columns, gutter and margin per
+ * breakpoint, or its own for a named breakpoint: `layout={{ lg: { columns: 16 } }}`.
+ */
+interface GridProps extends ViewProps, GridProps$1<Theme>, FlexboxProps<Theme>, LayoutGridProps<Theme> {}
 declare const Grid: import("@emotion/styled").StyledComponent<{
   theme?: Theme;
   as?: React.ElementType;

package/dist/Grid.d.mts

@@ -1,11 +1,15 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { s as ViewProps } from "./index-DQ16ijxx.mjs";
-import { FlexboxProps, GridProps as GridProps$1 } from "@soroush.tech/styled-system";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { s as ViewProps } from "./index-AlVOmB-K.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. */
 type GapToken = keyof Theme['space'];
-interface GridProps extends ViewProps, GridProps$1<Theme>, FlexboxProps<Theme> {}
+/**
+ * `layout` lays the grid out from `theme.layout` - the theme's columns, gutter and margin per
+ * breakpoint, or its own for a named breakpoint: `layout={{ lg: { columns: 16 } }}`.
+ */
+interface GridProps extends ViewProps, GridProps$1<Theme>, FlexboxProps<Theme>, LayoutGridProps<Theme> {}
 declare const Grid: import("@emotion/styled").StyledComponent<{
   theme?: Theme;
   as?: React.ElementType;

package/dist/Grid.mjs

@@ -1,12 +1,17 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
 //#region src/Grid/Grid.tsx
-const shouldForwardProp = createShouldForwardProp([...props]);
+const shouldForwardProp = createShouldForwardProp([...props, "layout"]);
 const Grid = styled(View, {
 	name: "Grid",
 	label: "grid",
 	shouldForwardProp,
-	systemProps: [src_exports.grid, src_exports.flexbox]
+	systemProps: [
+		src_exports.layoutGrid,
+		src_exports.grid,
+		src_exports.flexbox,
+		src_exports.space
+	]
 })({ display: "grid" });
 //#endregion
 export { Grid };

package/dist/{Icon-gSiGgU13.mjs → Icon-BGcd6yy0.mjs}

@@ -1,6 +1,6 @@
 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 { r as useTheme } from "./theme-BuqqFbsz.mjs";
+import { r as useTheme } from "./theme-C1o9qa2E.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Icon/icons/AccountTree.tsx

package/dist/{Icon-BAMpe9SO.cjs → Icon-Cn6Zx8wb.cjs}

@@ -1,6 +1,6 @@
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Bnc03K83.cjs");
+const require_theme = require("./theme-DfAqr7qo.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/Icon.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Icon = require("./Icon-BAMpe9SO.cjs");
+const require_Icon = require("./Icon-Cn6Zx8wb.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-DCu7qjpa.cjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-wJbUPxSk.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-76XH-GEc.mjs";
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-Dyfu-Otn.mjs";
 export { Icon, type IconName, IconProps, icons };

package/dist/Icon.mjs

@@ -1,2 +1,2 @@
-import { n as icons, t as Icon } from "./Icon-gSiGgU13.mjs";
+import { n as icons, t as Icon } from "./Icon-BGcd6yy0.mjs";
 export { Icon, icons };

package/dist/Image.d.cts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.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,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.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.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as ButtonColor } from "./index-Oxx0z4dS.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { n as ButtonColor } from "./index-6BHvkjdp.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,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as ButtonColor } from "./index-C-2VKPcp.mjs";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { n as ButtonColor } from "./index-DLtzp-Mg.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/LinearProgress/LinearProgress.d.ts

package/dist/Link.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_theme = require("./theme-Bnc03K83.cjs");
+const require_theme = require("./theme-DfAqr7qo.cjs");
 const require_Typography = require("./Typography.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/Link.d.cts

@@ -1,4 +1,4 @@
-import { a as TypographyProps } from "./index-Csp1Wzbz.cjs";
+import { a as TypographyProps } from "./index-DClEfecw.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-BWECJgSb.mjs";
+import { a as TypographyProps } from "./index-COYl2TN0.mjs";
 import { AnchorHTMLAttributes } from "react";
 //#region src/Link/Link.d.ts
 type LinkUnderline = 'always' | 'hover' | 'none';

package/dist/Link.mjs

@@ -1,6 +1,6 @@
 import { o as styled } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-BuqqFbsz.mjs";
+import { r as useTheme } from "./theme-C1o9qa2E.mjs";
 import { Typography } from "./Typography.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/MenuItem.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_theme = require("./theme-Bnc03K83.cjs");
-const require_Icon = require("./Icon-BAMpe9SO.cjs");
+const require_theme = require("./theme-DfAqr7qo.cjs");
+const require_Icon = require("./Icon-Cn6Zx8wb.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/MenuItem/MenuItem.tsx

package/dist/MenuItem.d.cts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
 import { ElementType, ReactNode } from "react";
 //#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];

package/dist/MenuItem.d.mts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/MenuItem/MenuItem.d.ts
 type MenuItemColor = keyof Theme['palette'];

package/dist/MenuItem.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-BuqqFbsz.mjs";
-import { t as Icon } from "./Icon-gSiGgU13.mjs";
+import { r as useTheme } from "./theme-C1o9qa2E.mjs";
+import { t as Icon } from "./Icon-BGcd6yy0.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/MenuItem/MenuItem.tsx

package/dist/Modal.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Modal = require("./Modal-CApyh_V5.cjs");
+const require_Modal = require("./Modal-CM3osOqj.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-D-QRCHiS.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-FTr8Mn3p.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-CTVFwvju.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-CHr4HUzH.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-CYNcPk-2.mjs";
+import { a as hideFromAria, i as exposeToAria, n as useModal, r as ModalManager, t as Modal } from "./Modal-BcsyrrpH.mjs";
 export { Modal, ModalManager, exposeToAria, hideFromAria, useModal };

package/dist/NativeSelect.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_theme = require("./theme-Bnc03K83.cjs");
-const require_Icon = require("./Icon-BAMpe9SO.cjs");
+const require_theme = require("./theme-DfAqr7qo.cjs");
+const require_Icon = require("./Icon-Cn6Zx8wb.cjs");
 const require_FormControl = require("./FormControl.cjs");
 const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 require("react");

package/dist/NativeSelect.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as IconProps, r as IconName } from "./index-DCu7qjpa.cjs";
+import { T as Theme } from "./themes-CtTQTVqe.cjs";
+import "./index-CkYiijiE.cjs";
+import { n as IconProps, r as IconName } from "./index-wJbUPxSk.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,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as IconProps, r as IconName } from "./index-76XH-GEc.mjs";
+import { T as Theme } from "./themes-CCguU8uo.mjs";
+import "./index-DVG64KQ4.mjs";
+import { n as IconProps, r as IconName } from "./index-Dyfu-Otn.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { SelectHTMLAttributes } from "react";
 //#region src/NativeSelect/NativeSelect.d.ts

package/dist/NativeSelect.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 { r as useTheme } from "./theme-BuqqFbsz.mjs";
-import { t as Icon } from "./Icon-gSiGgU13.mjs";
+import { r as useTheme } from "./theme-C1o9qa2E.mjs";
+import { t as Icon } from "./Icon-BGcd6yy0.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import "react";

package/dist/Pagination/PaginationItem.cjs

@@ -2,7 +2,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_Icon = require("../Icon-BAMpe9SO.cjs");
+const require_Icon = require("../Icon-Cn6Zx8wb.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-d6gR2x8j.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-BfOZMmZA.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-DdBeSvit.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-BS5dkngf.mjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };