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

package/dist/Chip.mjs

@@ -0,0 +1,191 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { alpha } from "./utils.mjs";
+import { n as useDefaultProps } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { t as Icon } from "./Icon-XpXU-SuF.mjs";
+import { t as getShapeRadius } from "./getShapeRadius-DVQRARis.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/Chip/Chip.tsx
+const getLine = (theme, variant, color) => {
+	if (variant === "text") return "transparent";
+	return color === "default" ? (0, src_exports.get)(theme, "border.default") : (0, src_exports.get)(theme, `palette.${color}.main`);
+};
+const accent = (theme, color) => color === "default" ? (0, src_exports.get)(theme, "text.initial") : (0, src_exports.get)(theme, `palette.${color}.main`);
+const getRadius = (theme, shape, borderRadius) => getShapeRadius(shape, theme.radii[borderRadius ?? themeDefault(theme, "borderRadius", "md")]);
+const ChipRoot = styled("div", {
+	name: "Chip",
+	label: "Chip",
+	shouldForwardProp: createShouldForwardProp([
+		...props,
+		"variant",
+		"color",
+		"size",
+		"shape",
+		"borderRadius",
+		"isDisabled"
+	]),
+	systemProps: [src_exports.space]
+})(({ theme, variant, color, size, shape, borderRadius, isDisabled }) => {
+	const { paddingTop, paddingBottom, paddingLeft, paddingRight, fontSize } = theme.sizes[size];
+	const isContained = variant === "contained";
+	const palette = (0, src_exports.get)(theme, `palette.${color}`);
+	return {
+		display: "inline-flex",
+		alignItems: "center",
+		boxSizing: "border-box",
+		maxWidth: "100%",
+		borderRadius: getRadius(theme, shape, borderRadius),
+		fontSize: theme.fontSizes[fontSize],
+		lineHeight: (0, src_exports.get)(theme, "lineHeights.base"),
+		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
+		paddingTop: theme.space[paddingTop],
+		paddingBottom: theme.space[paddingBottom],
+		paddingLeft: theme.space[paddingLeft],
+		paddingRight: theme.space[paddingRight],
+		gap: theme.space[1],
+		...isContained ? {
+			backgroundColor: palette.main,
+			color: palette.contrastText,
+			border: "none"
+		} : {
+			backgroundColor: "transparent",
+			color: accent(theme, color),
+			border: `${theme.borderWidths.thin} solid ${getLine(theme, variant, color)}`
+		},
+		...isDisabled && {
+			opacity: .5,
+			pointerEvents: "none"
+		}
+	};
+});
+const ChipBody = styled("button", {
+	name: "Chip",
+	slot: "body",
+	label: "ChipBody",
+	shouldForwardProp: createShouldForwardProp(["isClickable"])
+})(({ theme, isClickable }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: theme.space[1],
+	minWidth: 0,
+	margin: 0,
+	padding: 0,
+	border: 0,
+	background: "none",
+	color: "inherit",
+	font: "inherit",
+	borderRadius: "inherit",
+	"&:focus-visible": {
+		outline: `${theme.borderWidths.base} solid ${(0, src_exports.get)(theme, "palette.primary.main")}`,
+		outlineOffset: theme.borderWidths.thin
+	},
+	...isClickable && { cursor: "pointer" }
+}));
+const ChipLabel = styled("span", {
+	name: "Chip",
+	slot: "label",
+	label: "ChipLabel"
+})({
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+});
+const ChipIconBox = styled("span", {
+	name: "Chip",
+	slot: "icon",
+	label: "ChipIcon"
+})({
+	display: "inline-flex",
+	flexShrink: 0
+});
+const ChipAvatar = styled("span", {
+	name: "Chip",
+	slot: "avatar",
+	label: "ChipAvatar"
+})({
+	display: "inline-flex",
+	flexShrink: 0,
+	marginInlineStart: "-0.25em"
+});
+const ChipDelete = styled("button", {
+	name: "Chip",
+	slot: "deleteIcon",
+	label: "ChipDeleteIcon"
+})(({ theme }) => ({
+	display: "inline-flex",
+	flexShrink: 0,
+	alignItems: "center",
+	justifyContent: "center",
+	margin: 0,
+	padding: 0,
+	border: 0,
+	borderRadius: "50%",
+	background: "none",
+	color: "inherit",
+	opacity: .7,
+	cursor: "pointer",
+	"&:hover": {
+		opacity: 1,
+		backgroundColor: alpha((0, src_exports.get)(theme, "text.initial"), .12)
+	},
+	"&:focus-visible": { outline: `${theme.borderWidths.base} solid ${(0, src_exports.get)(theme, "palette.primary.main")}` }
+}));
+/**
+* @description A compact tag: a label, an icon or an avatar, and - given `onClick` - a button, and
+* - given `onDelete` - a delete control. A clickable chip is one tab stop; a deletable one deletes
+* through its control and through Backspace and Delete, so the control itself is out of the tab
+* order. Its text is the theme's `contrastText` on the color, so its contrast is the theme's.
+*/
+function Chip({ label, variant: variantProp, color: colorProp, size: sizeProp, shape: shapeProp, borderRadius: borderRadiusProp, icon, avatar, onClick, onDelete, deleteLabel: deleteLabelProp, disabled = false, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = useDefaultProps("Chip");
+	const variant = variantProp ?? dp.variant ?? "contained";
+	const color = colorProp ?? dp.color ?? "default";
+	const size = sizeProp ?? dp.size ?? "md";
+	const shape = shapeProp ?? dp.shape ?? "pill";
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const deleteLabel = deleteLabelProp ?? dp.deleteLabel;
+	const isClickable = onClick !== void 0;
+	const isDeletable = onDelete !== void 0;
+	const handleKeyDown = (event) => {
+		if (!isDeletable || event.key !== "Backspace" && event.key !== "Delete") return;
+		event.preventDefault();
+		onDelete(event);
+	};
+	return /* @__PURE__ */ jsxs(ChipRoot, {
+		variant,
+		color,
+		size,
+		shape,
+		borderRadius,
+		isDisabled: disabled,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [/* @__PURE__ */ jsxs(ChipBody, {
+			as: isClickable ? "button" : "span",
+			type: isClickable ? "button" : void 0,
+			tabIndex: !isClickable && isDeletable && !disabled ? 0 : void 0,
+			disabled: isClickable ? disabled : void 0,
+			isClickable,
+			onClick,
+			onKeyDown: handleKeyDown,
+			children: [
+				avatar ? /* @__PURE__ */ jsx(ChipAvatar, { children: avatar }) : null,
+				!avatar && icon ? /* @__PURE__ */ jsx(ChipIconBox, { children: icon }) : null,
+				/* @__PURE__ */ jsx(ChipLabel, { children: label })
+			]
+		}), isDeletable && /* @__PURE__ */ jsx(ChipDelete, {
+			type: "button",
+			tabIndex: -1,
+			"aria-label": deleteLabel,
+			disabled,
+			onClick: onDelete,
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "close",
+				size: "1em",
+				color: "inherit"
+			})
+		})]
+	});
+}
+export { Chip };

package/dist/CircularProgress.cjs

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_utils = require("./utils.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.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");
 let _emotion_react = require("@emotion/react");
-//#region src/CircularProgress/CircularProgress.tsx
+// src/CircularProgress/CircularProgress.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
 	"color",
@@ -133,5 +133,4 @@ function CircularProgress({ variant = "indeterminate", color, size = SIZE_DEFAUL
 		})
 	});
 }
-//#endregion
 exports.CircularProgress = CircularProgress;

package/dist/CircularProgress.d.cts

@@ -1,8 +1,7 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { n as ButtonColor } from "./index-DAwcmIjN.cjs";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { n as ButtonColor } from "./index-BzQze7eY.cjs";
 import { HTMLAttributes } from "react";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/CircularProgress/CircularProgress.d.ts
 type CircularProgressVariant = 'indeterminate' | 'determinate';
 type CircularProgressColor = ButtonColor | 'inherit';
 type CircularProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
@@ -31,5 +30,4 @@ interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<Sp
   showTrack?: boolean;
 }
 declare function CircularProgress({ variant, color, size, thickness, value, min, max, disableShrink, spinning, easing, showTrack, ...rest }: Readonly<CircularProgressProps>): import("react").JSX.Element;
-//#endregion
 export { CircularProgress, CircularProgressColor, CircularProgressEasing, CircularProgressProps, CircularProgressVariant };

package/dist/CircularProgress.d.mts

@@ -1,8 +1,7 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { n as ButtonColor } from "./index-CG_1uPrD.mjs";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { n as ButtonColor } from "./index-BChRNCld.mjs";
 import { LayoutProps, PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
-//#region src/CircularProgress/CircularProgress.d.ts
 type CircularProgressVariant = 'indeterminate' | 'determinate';
 type CircularProgressColor = ButtonColor | 'inherit';
 type CircularProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
@@ -31,5 +30,4 @@ interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<Sp
   showTrack?: boolean;
 }
 declare function CircularProgress({ variant, color, size, thickness, value, min, max, disableShrink, spinning, easing, showTrack, ...rest }: Readonly<CircularProgressProps>): import("react").JSX.Element;
-//#endregion
 export { CircularProgress, CircularProgressColor, CircularProgressEasing, CircularProgressProps, CircularProgressVariant };

package/dist/CircularProgress.mjs

@@ -1,9 +1,9 @@
-import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { a as src_exports, i as props, o as styled, r as keyframes, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
 import { clamp } from "./utils.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/CircularProgress/CircularProgress.tsx
+// src/CircularProgress/CircularProgress.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"color",
@@ -130,5 +130,4 @@ function CircularProgress({ variant = "indeterminate", color, size = SIZE_DEFAUL
 		})
 	});
 }
-//#endregion
 export { CircularProgress };

package/dist/Collapse.cjs

@@ -0,0 +1,125 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_useTransition = require("./useTransition-B0V2fAq5.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");
+// src/Collapse/Collapse.tsx
+const CollapseRoot = require_src.styled("div", {
+	name: "Collapse",
+	label: "Collapse",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"status",
+		"duration",
+		"easing",
+		"orientation",
+		"collapsedSize"
+	])
+})(({ status, duration, easing, orientation, collapsedSize }) => {
+	const size = orientation === "horizontal" ? "width" : "height";
+	return {
+		overflow: "hidden",
+		transition: `${size} ${duration}ms ${easing}`,
+		...orientation === "horizontal" && status !== "exited" && { width: "max-content" },
+		...status === "exited" && {
+			[size]: collapsedSize,
+			...Number.parseFloat(collapsedSize) === 0 && { visibility: "hidden" }
+		}
+	};
+});
+const CollapseWrapper = require_src.styled("div", {
+	name: "Collapse",
+	slot: "wrapper",
+	label: "CollapseWrapper",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["orientation"])
+})(({ orientation }) => orientation === "horizontal" ? {
+	display: "flex",
+	height: "100%",
+	width: "max-content"
+} : {
+	display: "flex",
+	width: "100%"
+});
+const CollapseInner = require_src.styled("div", {
+	name: "Collapse",
+	slot: "inner",
+	label: "CollapseInner",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["orientation"])
+})(({ orientation }) => orientation === "horizontal" ? { height: "100%" } : { width: "100%" });
+/**
+* @description Opens and closes its content by its height - or, horizontal, its width. The size
+* it moves to is measured from the content, and left to the content once it is open, so content
+* that grows keeps showing. Closed, it keeps `collapsedSize` and is hidden when that is nothing.
+* A user who asked for less motion sees it change at once.
+*/
+function Collapse({ children, isShown = false, shouldAppear: shouldAppearProp, shouldMountOnEnter = false, shouldUnmountOnExit = false, timeout: timeoutProp, easing: easingProp, collapsedSize: collapsedSizeProp, orientation: orientationProp, onEnter, onEntering, onEntered, onExit, onExiting, onExited, className, "data-testid": dataTestid }) {
+	const theme = require_theme.useTheme();
+	const dp = require_theme.useDefaultProps("Collapse");
+	const shouldAppear = shouldAppearProp ?? dp.shouldAppear ?? true;
+	const timeout = timeoutProp ?? dp.timeout ?? theme.transitions.duration.standard;
+	const easing = easingProp ?? dp.easing ?? "standard";
+	const collapsedSize = collapsedSizeProp ?? dp.collapsedSize ?? 0;
+	const orientation = orientationProp ?? dp.orientation ?? "vertical";
+	const size = orientation === "horizontal" ? "width" : "height";
+	const collapsed = typeof collapsedSize === "number" ? `${collapsedSize}px` : collapsedSize;
+	const rootRef = (0, react.useRef)(null);
+	const wrapperRef = (0, react.useRef)(null);
+	const measure = () => {
+		const wrapper = wrapperRef.current;
+		return `${orientation === "horizontal" ? wrapper.clientWidth : wrapper.clientHeight}px`;
+	};
+	const { status, duration } = require_useTransition.useTransition({
+		isShown,
+		shouldAppear,
+		shouldMountOnEnter,
+		shouldUnmountOnExit,
+		timeout,
+		nodeRef: rootRef,
+		onEnter: (node) => {
+			node.getBoundingClientRect();
+			onEnter?.(node);
+		},
+		onEntering: (node) => {
+			node.style[size] = measure();
+			onEntering?.(node);
+		},
+		onEntered: (node) => {
+			node.style[size] = "";
+			onEntered?.(node);
+		},
+		onExit: (node) => {
+			node.style[size] = measure();
+			node.getBoundingClientRect();
+			onExit?.(node);
+		},
+		onExiting: (node) => {
+			node.style[size] = collapsed;
+			onExiting?.(node);
+		},
+		onExited: (node) => {
+			node.style[size] = "";
+			onExited?.(node);
+		}
+	});
+	if (status === "unmounted") return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapseRoot, {
+		ref: rootRef,
+		status,
+		duration,
+		easing: theme.transitions.easing[easing],
+		orientation,
+		collapsedSize: collapsed,
+		className,
+		"data-testid": dataTestid,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapseWrapper, {
+			ref: wrapperRef,
+			orientation,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapseInner, {
+				orientation,
+				children
+			})
+		})
+	});
+}
+exports.Collapse = Collapse;

package/dist/Collapse.d.cts

@@ -0,0 +1,2 @@
+import { n as CollapseOrientation, r as CollapseProps, t as Collapse } from "./index-CLTFsCYC.cjs";
+export { Collapse, CollapseOrientation, CollapseProps };

package/dist/Collapse.d.mts

@@ -0,0 +1,2 @@
+import { n as CollapseOrientation, r as CollapseProps, t as Collapse } from "./index-B3Bdupj3.mjs";
+export { Collapse, CollapseOrientation, CollapseProps };

package/dist/Collapse.mjs

@@ -0,0 +1,123 @@
+import { o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as useTransition } from "./useTransition-CWxiEqtC.mjs";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/Collapse/Collapse.tsx
+const CollapseRoot = styled("div", {
+	name: "Collapse",
+	label: "Collapse",
+	shouldForwardProp: createShouldForwardProp([
+		"status",
+		"duration",
+		"easing",
+		"orientation",
+		"collapsedSize"
+	])
+})(({ status, duration, easing, orientation, collapsedSize }) => {
+	const size = orientation === "horizontal" ? "width" : "height";
+	return {
+		overflow: "hidden",
+		transition: `${size} ${duration}ms ${easing}`,
+		...orientation === "horizontal" && status !== "exited" && { width: "max-content" },
+		...status === "exited" && {
+			[size]: collapsedSize,
+			...Number.parseFloat(collapsedSize) === 0 && { visibility: "hidden" }
+		}
+	};
+});
+const CollapseWrapper = styled("div", {
+	name: "Collapse",
+	slot: "wrapper",
+	label: "CollapseWrapper",
+	shouldForwardProp: createShouldForwardProp(["orientation"])
+})(({ orientation }) => orientation === "horizontal" ? {
+	display: "flex",
+	height: "100%",
+	width: "max-content"
+} : {
+	display: "flex",
+	width: "100%"
+});
+const CollapseInner = styled("div", {
+	name: "Collapse",
+	slot: "inner",
+	label: "CollapseInner",
+	shouldForwardProp: createShouldForwardProp(["orientation"])
+})(({ orientation }) => orientation === "horizontal" ? { height: "100%" } : { width: "100%" });
+/**
+* @description Opens and closes its content by its height - or, horizontal, its width. The size
+* it moves to is measured from the content, and left to the content once it is open, so content
+* that grows keeps showing. Closed, it keeps `collapsedSize` and is hidden when that is nothing.
+* A user who asked for less motion sees it change at once.
+*/
+function Collapse({ children, isShown = false, shouldAppear: shouldAppearProp, shouldMountOnEnter = false, shouldUnmountOnExit = false, timeout: timeoutProp, easing: easingProp, collapsedSize: collapsedSizeProp, orientation: orientationProp, onEnter, onEntering, onEntered, onExit, onExiting, onExited, className, "data-testid": dataTestid }) {
+	const theme = useTheme();
+	const dp = useDefaultProps("Collapse");
+	const shouldAppear = shouldAppearProp ?? dp.shouldAppear ?? true;
+	const timeout = timeoutProp ?? dp.timeout ?? theme.transitions.duration.standard;
+	const easing = easingProp ?? dp.easing ?? "standard";
+	const collapsedSize = collapsedSizeProp ?? dp.collapsedSize ?? 0;
+	const orientation = orientationProp ?? dp.orientation ?? "vertical";
+	const size = orientation === "horizontal" ? "width" : "height";
+	const collapsed = typeof collapsedSize === "number" ? `${collapsedSize}px` : collapsedSize;
+	const rootRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const measure = () => {
+		const wrapper = wrapperRef.current;
+		return `${orientation === "horizontal" ? wrapper.clientWidth : wrapper.clientHeight}px`;
+	};
+	const { status, duration } = useTransition({
+		isShown,
+		shouldAppear,
+		shouldMountOnEnter,
+		shouldUnmountOnExit,
+		timeout,
+		nodeRef: rootRef,
+		onEnter: (node) => {
+			node.getBoundingClientRect();
+			onEnter?.(node);
+		},
+		onEntering: (node) => {
+			node.style[size] = measure();
+			onEntering?.(node);
+		},
+		onEntered: (node) => {
+			node.style[size] = "";
+			onEntered?.(node);
+		},
+		onExit: (node) => {
+			node.style[size] = measure();
+			node.getBoundingClientRect();
+			onExit?.(node);
+		},
+		onExiting: (node) => {
+			node.style[size] = collapsed;
+			onExiting?.(node);
+		},
+		onExited: (node) => {
+			node.style[size] = "";
+			onExited?.(node);
+		}
+	});
+	if (status === "unmounted") return null;
+	return /* @__PURE__ */ jsx(CollapseRoot, {
+		ref: rootRef,
+		status,
+		duration,
+		easing: theme.transitions.easing[easing],
+		orientation,
+		collapsedSize: collapsed,
+		className,
+		"data-testid": dataTestid,
+		children: /* @__PURE__ */ jsx(CollapseWrapper, {
+			ref: wrapperRef,
+			orientation,
+			children: /* @__PURE__ */ jsx(CollapseInner, {
+				orientation,
+				children
+			})
+		})
+	});
+}
+export { Collapse };

package/dist/Drawer.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
 const require_Button = require("./Button.cjs");
 const require_Paper = require("./Paper.cjs");
 const require_FocusTrap = require("./FocusTrap.cjs");
@@ -7,7 +7,7 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@emotion/react");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Drawer/Drawer.tsx
+// src/Drawer/Drawer.tsx
 const slideIn = {
 	left: _emotion_react.keyframes`from { transform: translateX(-100%); } to { transform: translateX(0); }`,
 	right: _emotion_react.keyframes`from { transform: translateX(100%); } to { transform: translateX(0); }`,
@@ -146,8 +146,7 @@ function Drawer({ id, children, isOpen, onClose, anchor = "left", elevation = 16
 		})
 	});
 }
-//#endregion
-//#region src/Drawer/DrawerToggle.tsx
+// 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.
@@ -159,6 +158,5 @@ function DrawerToggle({ drawer, action = "toggle", ...rest }) {
 		...rest
 	});
 }
-//#endregion
 exports.Drawer = Drawer;
 exports.DrawerToggle = DrawerToggle;

package/dist/Drawer.d.cts

@@ -1,8 +1,7 @@
-import { Gt as PaperElevation } from "./index-DJ0f69wh.cjs";
-import { i as ButtonProps } from "./index-DAwcmIjN.cjs";
-import "./index-BxVTIMnB.cjs";
+import { cn as PaperElevation } from "./index-Lsm4v8fB.cjs";
+import { i as ButtonProps } from "./index-BzQze7eY.cjs";
+import "./index-323PrYLR.cjs";
 import { ReactNode } from "react";
-//#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
 /** Why the drawer closed: the Escape key, or any other dismissal (a click outside, its toggle). */
 type DrawerCloseReason = 'escapeKey' | 'dismiss';
@@ -42,8 +41,6 @@ interface DrawerProps {
  * `isOpen` / `onClose`, and it moves focus in, traps Tab and locks scroll while open.
  */
 declare function Drawer({ id, children, isOpen, onClose, anchor, elevation, transitionDuration, hasBackdrop, shouldLockScroll, shouldAutoFocus, shouldTrapFocus, shouldRestoreFocus }: Readonly<DrawerProps>): import("react").JSX.Element;
-//#endregion
-//#region src/Drawer/DrawerToggle.d.ts
 interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
   /** The `id` of the `Drawer` this button opens and closes. */
   drawer: string;
@@ -55,5 +52,4 @@ interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
  * `popovertarget` attribute - it works without JavaScript. Takes every `Button` prop.
  */
 declare function DrawerToggle({ drawer, action, ...rest }: Readonly<DrawerToggleProps>): import("react").JSX.Element;
-//#endregion
 export { Drawer, DrawerAnchor, DrawerCloseReason, DrawerProps, DrawerToggle, DrawerToggleProps };

package/dist/Drawer.d.mts

@@ -1,8 +1,7 @@
-import { Gt as PaperElevation } from "./index-CJhK7JND.mjs";
-import { i as ButtonProps } from "./index-CG_1uPrD.mjs";
-import "./index-DaIIo5QU.mjs";
+import { cn as PaperElevation } from "./index-CR8qkP8U.mjs";
+import { i as ButtonProps } from "./index-BChRNCld.mjs";
+import "./index-1Xzj0iAs.mjs";
 import { ReactNode } from "react";
-//#region src/Drawer/Drawer.d.ts
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
 /** Why the drawer closed: the Escape key, or any other dismissal (a click outside, its toggle). */
 type DrawerCloseReason = 'escapeKey' | 'dismiss';
@@ -42,8 +41,6 @@ interface DrawerProps {
  * `isOpen` / `onClose`, and it moves focus in, traps Tab and locks scroll while open.
  */
 declare function Drawer({ id, children, isOpen, onClose, anchor, elevation, transitionDuration, hasBackdrop, shouldLockScroll, shouldAutoFocus, shouldTrapFocus, shouldRestoreFocus }: Readonly<DrawerProps>): import("react").JSX.Element;
-//#endregion
-//#region src/Drawer/DrawerToggle.d.ts
 interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
   /** The `id` of the `Drawer` this button opens and closes. */
   drawer: string;
@@ -55,5 +52,4 @@ interface DrawerToggleProps extends Omit<ButtonProps, 'href'> {
  * `popovertarget` attribute - it works without JavaScript. Takes every `Button` prop.
  */
 declare function DrawerToggle({ drawer, action, ...rest }: Readonly<DrawerToggleProps>): import("react").JSX.Element;
-//#endregion
 export { Drawer, DrawerAnchor, DrawerCloseReason, DrawerProps, DrawerToggle, DrawerToggleProps };

package/dist/Drawer.mjs

@@ -1,10 +1,10 @@
-import { o as styled, r as keyframes, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { o as styled, r as keyframes, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
 import { Button } from "./Button.mjs";
 import { Paper } from "./Paper.mjs";
 import { FocusTrap } from "./FocusTrap.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Drawer/Drawer.tsx
+// src/Drawer/Drawer.tsx
 const slideIn = {
 	left: keyframes`from { transform: translateX(-100%); } to { transform: translateX(0); }`,
 	right: keyframes`from { transform: translateX(100%); } to { transform: translateX(0); }`,
@@ -143,8 +143,7 @@ function Drawer({ id, children, isOpen, onClose, anchor = "left", elevation = 16
 		})
 	});
 }
-//#endregion
-//#region src/Drawer/DrawerToggle.tsx
+// 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.
@@ -156,5 +155,4 @@ function DrawerToggle({ drawer, action = "toggle", ...rest }) {
 		...rest
 	});
 }
-//#endregion
 export { Drawer, DrawerToggle };