@povio/ui 2.3.0-rc.9 → 2.3.1

package/dist/components/navigation/Stepper/StepperSeparator.js

@@ -1,30 +1,12 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { stepperSeparatorCva } from "./stepper.cva.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation/Stepper/StepperSeparator.tsx
-var StepperSeparator = (t0) => {
-	const $ = c(6);
-	const { orientation, contentOrientation } = t0;
-	const stepperSeparatorCva$1 = UIStyle.useCva("stepper.separatorCva", stepperSeparatorCva);
-	let t1;
-	if ($[0] !== contentOrientation || $[1] !== orientation || $[2] !== stepperSeparatorCva$1) {
-		t1 = stepperSeparatorCva$1({
-			orientation,
-			contentOrientation
-		});
-		$[0] = contentOrientation;
-		$[1] = orientation;
-		$[2] = stepperSeparatorCva$1;
-		$[3] = t1;
-	} else t1 = $[3];
-	let t2;
-	if ($[4] !== t1) {
-		t2 = /* @__PURE__ */ jsx("div", { className: t1 });
-		$[4] = t1;
-		$[5] = t2;
-	} else t2 = $[5];
-	return t2;
+var StepperSeparator = ({ orientation, contentOrientation }) => {
+	return /* @__PURE__ */ jsx("div", { className: UIStyle.useCva("stepper.separatorCva", stepperSeparatorCva)({
+		orientation,
+		contentOrientation
+	}) });
 };
 //#endregion
 export { StepperSeparator };

package/dist/components/overlays/ActionModal/ActionModal.js

@@ -2,7 +2,6 @@ import { Typography } from "../../text/Typography/Typography.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { Button } from "../../buttons/Button/Button.js";
 import { Modal } from "../Modal/Modal.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/components/overlays/ActionModal/ActionModal.tsx
@@ -11,178 +10,45 @@ var textAlignClassMap = {
 	center: "text-center",
 	right: "text-right"
 };
-var ActionModal = (t0) => {
-	const $ = c(52);
-	let description;
-	let descriptionClassName;
-	let descriptionTypography;
-	let heading;
-	let modalClassName;
-	let modalProps;
-	let primaryAction;
-	let secondaryAction;
-	let t1;
-	let t2;
-	let titleClassName;
-	let titleTypography;
-	if ($[0] !== t0) {
-		({heading, description, primaryAction, secondaryAction, buttonSize: t1, textAlign: t2, modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps} = t0);
-		$[0] = t0;
-		$[1] = description;
-		$[2] = descriptionClassName;
-		$[3] = descriptionTypography;
-		$[4] = heading;
-		$[5] = modalClassName;
-		$[6] = modalProps;
-		$[7] = primaryAction;
-		$[8] = secondaryAction;
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = titleClassName;
-		$[12] = titleTypography;
-	} else {
-		description = $[1];
-		descriptionClassName = $[2];
-		descriptionTypography = $[3];
-		heading = $[4];
-		modalClassName = $[5];
-		modalProps = $[6];
-		primaryAction = $[7];
-		secondaryAction = $[8];
-		t1 = $[9];
-		t2 = $[10];
-		titleClassName = $[11];
-		titleTypography = $[12];
-	}
-	const buttonSize = t1 === void 0 ? "m" : t1;
-	const textAlign = t2 === void 0 ? "left" : t2;
+var ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps }) => {
 	const ui = UIConfig.useConfig();
 	const textAlignClass = textAlignClassMap[textAlign];
-	let t3;
-	if ($[13] !== modalClassName) {
-		t3 = clsx("w-modal", modalClassName);
-		$[13] = modalClassName;
-		$[14] = t3;
-	} else t3 = $[14];
-	const t4 = titleTypography ?? ui.actionModal.titleTypography;
-	let t5;
-	if ($[15] !== textAlignClass || $[16] !== titleClassName) {
-		t5 = clsx("text-text-default-1", textAlignClass, titleClassName);
-		$[15] = textAlignClass;
-		$[16] = titleClassName;
-		$[17] = t5;
-	} else t5 = $[17];
-	let t6;
-	if ($[18] !== heading || $[19] !== t4 || $[20] !== t5) {
-		t6 = /* @__PURE__ */ jsx(Typography, {
-			...t4,
-			as: "h2",
-			className: t5,
-			children: heading
-		});
-		$[18] = heading;
-		$[19] = t4;
-		$[20] = t5;
-		$[21] = t6;
-	} else t6 = $[21];
-	const t7 = descriptionTypography ?? ui.actionModal.descriptionTypography;
-	let t8;
-	if ($[22] !== descriptionClassName || $[23] !== textAlignClass) {
-		t8 = clsx("text-text-default-1", textAlignClass, descriptionClassName);
-		$[22] = descriptionClassName;
-		$[23] = textAlignClass;
-		$[24] = t8;
-	} else t8 = $[24];
-	let t9;
-	if ($[25] !== description || $[26] !== t7 || $[27] !== t8) {
-		t9 = /* @__PURE__ */ jsx(Typography, {
-			...t7,
-			className: t8,
-			children: description
-		});
-		$[25] = description;
-		$[26] = t7;
-		$[27] = t8;
-		$[28] = t9;
-	} else t9 = $[28];
-	let t10;
-	if ($[29] !== t6 || $[30] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Modal, {
+		modalClassName: clsx("w-modal", modalClassName),
+		...modalProps,
+		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-modal-gap-text",
-			children: [t6, t9]
-		});
-		$[29] = t6;
-		$[30] = t9;
-		$[31] = t10;
-	} else t10 = $[31];
-	let t11;
-	if ($[32] !== buttonSize || $[33] !== secondaryAction) {
-		t11 = secondaryAction && /* @__PURE__ */ jsx(Button, {
-			variant: secondaryAction?.variant ?? "contained",
-			size: buttonSize,
-			color: secondaryAction?.color ?? "secondary",
-			width: "fill",
-			onPress: secondaryAction?.onPress,
-			className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
-			children: secondaryAction?.label
-		});
-		$[32] = buttonSize;
-		$[33] = secondaryAction;
-		$[34] = t11;
-	} else t11 = $[34];
-	const t12 = primaryAction?.variant ?? "contained";
-	const t13 = primaryAction?.color ?? "primary";
-	const t14 = primaryAction.onPress;
-	const t15 = primaryAction?.className;
-	let t16;
-	if ($[35] !== t15) {
-		t16 = clsx("min-w-40 flex-1 shrink-0", t15);
-		$[35] = t15;
-		$[36] = t16;
-	} else t16 = $[36];
-	let t17;
-	if ($[37] !== buttonSize || $[38] !== primaryAction.label || $[39] !== primaryAction.onPress || $[40] !== t12 || $[41] !== t13 || $[42] !== t16) {
-		t17 = /* @__PURE__ */ jsx(Button, {
-			variant: t12,
-			size: buttonSize,
-			color: t13,
-			width: "fill",
-			onPress: t14,
-			className: t16,
-			children: primaryAction.label
-		});
-		$[37] = buttonSize;
-		$[38] = primaryAction.label;
-		$[39] = primaryAction.onPress;
-		$[40] = t12;
-		$[41] = t13;
-		$[42] = t16;
-		$[43] = t17;
-	} else t17 = $[43];
-	let t18;
-	if ($[44] !== t11 || $[45] !== t17) {
-		t18 = /* @__PURE__ */ jsxs("div", {
+			children: [/* @__PURE__ */ jsx(Typography, {
+				...titleTypography ?? ui.actionModal.titleTypography,
+				as: "h2",
+				className: clsx("text-text-default-1", textAlignClass, titleClassName),
+				children: heading
+			}), /* @__PURE__ */ jsx(Typography, {
+				...descriptionTypography ?? ui.actionModal.descriptionTypography,
+				className: clsx("text-text-default-1", textAlignClass, descriptionClassName),
+				children: description
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex w-full flex-wrap gap-modal-gap-buttons pt-1",
-			children: [t11, t17]
-		});
-		$[44] = t11;
-		$[45] = t17;
-		$[46] = t18;
-	} else t18 = $[46];
-	let t19;
-	if ($[47] !== modalProps || $[48] !== t10 || $[49] !== t18 || $[50] !== t3) {
-		t19 = /* @__PURE__ */ jsxs(Modal, {
-			modalClassName: t3,
-			...modalProps,
-			children: [t10, t18]
-		});
-		$[47] = modalProps;
-		$[48] = t10;
-		$[49] = t18;
-		$[50] = t3;
-		$[51] = t19;
-	} else t19 = $[51];
-	return t19;
+			children: [secondaryAction && /* @__PURE__ */ jsx(Button, {
+				variant: secondaryAction?.variant ?? "contained",
+				size: buttonSize,
+				color: secondaryAction?.color ?? "secondary",
+				width: "fill",
+				onPress: secondaryAction?.onPress,
+				className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
+				children: secondaryAction?.label
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: primaryAction?.variant ?? "contained",
+				size: buttonSize,
+				color: primaryAction?.color ?? "primary",
+				width: "fill",
+				onPress: primaryAction.onPress,
+				className: clsx("min-w-40 flex-1 shrink-0", primaryAction?.className),
+				children: primaryAction.label
+			})]
+		})]
+	});
 };
 //#endregion
 export { ActionModal };

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -2,7 +2,6 @@ import { UIConfig } from "../../../config/uiConfig.context.js";
 import { BottomSheetHeader } from "./BottomSheetHeader.js";
 import { useStateAndRef } from "../../../hooks/useStateAndRef.js";
 import { DomUtils } from "../../../utils/dom.utils.js";
-import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -27,6 +26,7 @@ var staticTransition = {
 		1
 	]
 };
+var KEYBOARD_INSET_THRESHOLD = 48;
 var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = true, isScrollable = true, height = "full", label, portalContainerRef, children, footer, hideHeader, hideThumb: hideThumbProp, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName, overlayClassName, headerTypography: headerTypographyProp }) => {
 	const uiConfig = UIConfig.useConfig();
 	const closeDragThreshold = closeDragThresholdProp ?? uiConfig.bottomSheet.closeDragThreshold;
@@ -49,6 +49,27 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 	const focusTrapRef = useRef(null);
 	const [footerElement, footerRef, setFooterElement] = useStateAndRef(null);
 	const [footerHeight, setFooterHeight] = useState(0);
+	const [keyboardInset, setKeyboardInset] = useState(0);
+	useEffect(() => {
+		if (!isOpen) {
+			setKeyboardInset(0);
+			return;
+		}
+		const vv = window.visualViewport;
+		if (!vv) return;
+		const update = () => {
+			const naturalHeight = vv.height * Math.max(vv.scale, 1);
+			const next = Math.max(0, window.innerHeight - naturalHeight);
+			setKeyboardInset(next > KEYBOARD_INSET_THRESHOLD ? Math.round(next) : 0);
+		};
+		update();
+		vv.addEventListener("resize", update);
+		vv.addEventListener("scroll", update);
+		return () => {
+			vv.removeEventListener("resize", update);
+			vv.removeEventListener("scroll", update);
+		};
+	}, [isOpen]);
 	useEffect(() => {
 		if (!footerElement) return;
 		const onResize = () => {
@@ -78,6 +99,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 		isOpen: true,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
 		className: clsx("fixed top-0 left-0 z-10 w-screen h-dvh", containerClassName),
+		style: { "--bottom-sheet-keyboard-inset": `${keyboardInset}px` },
 		onOpenChange,
 		isDismissable,
 		ref: overlayRef,
@@ -105,13 +127,14 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 			onAnimationComplete: (data) => {
 				onStateChange?.(data.y === 0 ? "opened" : "closed");
 			},
-			onAnimationStart: (data_0) => {
-				onStateChange?.(data_0.y === 0 ? "opening" : "closing");
+			onAnimationStart: (data) => {
+				onStateChange?.(data.y === 0 ? "opening" : "closing");
 			},
 			transition: staticTransition,
 			style: {
 				y,
-				minHeight: "100%"
+				height: "calc(100dvh - var(--bottom-sheet-keyboard-inset, 0px))",
+				minHeight: "calc(100dvh - var(--bottom-sheet-keyboard-inset, 0px))"
 			},
 			drag: "y",
 			dragListener: false,
@@ -189,7 +212,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[100dvh] left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
+						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[calc(100dvh-var(--bottom-sheet-keyboard-inset,0))] left-0 translate-y-[calc(-100%-var(--scroll-position,0))]"),
 						children: footer
 					})
 				] })
@@ -197,108 +220,36 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 		})]
 	}) });
 };
-var BottomSheet = (t0) => {
-	const $ = c(30);
-	let children;
-	let isOpen;
-	let onOpenChange;
-	let portalContainerRef;
-	let rest;
-	let trigger;
-	if ($[0] !== t0) {
-		({isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = isOpen;
-		$[3] = onOpenChange;
-		$[4] = portalContainerRef;
-		$[5] = rest;
-		$[6] = trigger;
-	} else {
-		children = $[1];
-		isOpen = $[2];
-		onOpenChange = $[3];
-		portalContainerRef = $[4];
-		rest = $[5];
-		trigger = $[6];
-	}
+var BottomSheet = ({ isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest }) => {
 	const [isSheetOpen, setIsSheetOpen] = useState(!!isOpen);
 	const hasTrigger = !!trigger;
-	let t1;
-	let t2;
-	if ($[7] !== hasTrigger || $[8] !== isOpen) {
-		t1 = () => {
-			if (hasTrigger) setIsSheetOpen(!!isOpen);
-		};
-		t2 = [isOpen, hasTrigger];
-		$[7] = hasTrigger;
-		$[8] = isOpen;
-		$[9] = t1;
-		$[10] = t2;
-	} else {
-		t1 = $[9];
-		t2 = $[10];
-	}
-	useEffect(t1, t2);
+	useEffect(() => {
+		if (hasTrigger) setIsSheetOpen(!!isOpen);
+	}, [isOpen, hasTrigger]);
 	if (trigger) {
-		let t3;
-		if ($[11] !== onOpenChange) {
-			t3 = (open) => {
-				setIsSheetOpen(open);
-				onOpenChange?.(open);
-			};
-			$[11] = onOpenChange;
-			$[12] = t3;
-		} else t3 = $[12];
-		const handleOpenChange = t3;
-		let t4;
-		if ($[13] !== children || $[14] !== handleOpenChange || $[15] !== isSheetOpen || $[16] !== portalContainerRef || $[17] !== rest) {
-			t4 = /* @__PURE__ */ jsx(BottomSheetBase, {
+		const handleOpenChange = (open) => {
+			setIsSheetOpen(open);
+			onOpenChange?.(open);
+		};
+		return /* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen: isSheetOpen,
+			onOpenChange: handleOpenChange,
+			children: [trigger, /* @__PURE__ */ jsx(BottomSheetBase, {
 				isOpen: isSheetOpen,
 				onOpenChange: handleOpenChange,
 				portalContainerRef,
 				...rest,
 				children
-			});
-			$[13] = children;
-			$[14] = handleOpenChange;
-			$[15] = isSheetOpen;
-			$[16] = portalContainerRef;
-			$[17] = rest;
-			$[18] = t4;
-		} else t4 = $[18];
-		let t5;
-		if ($[19] !== handleOpenChange || $[20] !== isSheetOpen || $[21] !== t4 || $[22] !== trigger) {
-			t5 = /* @__PURE__ */ jsxs(DialogTrigger, {
-				isOpen: isSheetOpen,
-				onOpenChange: handleOpenChange,
-				children: [trigger, t4]
-			});
-			$[19] = handleOpenChange;
-			$[20] = isSheetOpen;
-			$[21] = t4;
-			$[22] = trigger;
-			$[23] = t5;
-		} else t5 = $[23];
-		return t5;
-	}
-	let t3;
-	if ($[24] !== children || $[25] !== isOpen || $[26] !== onOpenChange || $[27] !== portalContainerRef || $[28] !== rest) {
-		t3 = /* @__PURE__ */ jsx(BottomSheetBase, {
-			isOpen,
-			onOpenChange,
-			portalContainerRef,
-			...rest,
-			children
+			})]
 		});
-		$[24] = children;
-		$[25] = isOpen;
-		$[26] = onOpenChange;
-		$[27] = portalContainerRef;
-		$[28] = rest;
-		$[29] = t3;
-	} else t3 = $[29];
-	return t3;
+	}
+	return /* @__PURE__ */ jsx(BottomSheetBase, {
+		isOpen,
+		onOpenChange,
+		portalContainerRef,
+		...rest,
+		children
+	});
 };
 //#endregion
 export { BottomSheet };

package/dist/components/overlays/BottomSheet/BottomSheetHeader.js

@@ -1,26 +1,16 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import "../../../config/i18n.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/overlays/BottomSheet/BottomSheetHeader.tsx
-var BottomSheetHeader = (t0) => {
-	const $ = c(17);
-	const { label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose } = t0;
+var BottomSheetHeader = ({ label, dragControls, isDismissable, hideThumb, hideHeader, headerTypography, onClose }) => {
 	const { t } = useTranslation("ui");
-	const t1 = !isDismissable && "pt-list-height-title-top";
-	let t2;
-	if ($[0] !== t1) {
-		t2 = clsx("pb-list-height-title-bottom", t1);
-		$[0] = t1;
-		$[1] = t2;
-	} else t2 = $[1];
-	let t3;
-	if ($[2] !== dragControls || $[3] !== hideThumb || $[4] !== isDismissable) {
-		t3 = isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("pb-list-height-title-bottom", !isDismissable && "pt-list-height-title-top"),
+		children: [isDismissable && !hideThumb && /* @__PURE__ */ jsx("div", {
 			className: "flex shrink-0 cursor-grab touch-none justify-center px-list-side-title pt-list-height-title-top pb-2-5",
 			onPointerDown: (e) => {
 				e.preventDefault();
@@ -28,15 +18,7 @@ var BottomSheetHeader = (t0) => {
 			},
 			"aria-hidden": true,
 			children: /* @__PURE__ */ jsx("div", { className: "h-1 w-16 shrink-0 rounded-full bg-elevation-fill-default-3" })
-		});
-		$[2] = dragControls;
-		$[3] = hideThumb;
-		$[4] = isDismissable;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== headerTypography || $[7] !== hideHeader || $[8] !== isDismissable || $[9] !== label || $[10] !== onClose || $[11] !== t) {
-		t4 = !hideHeader && /* @__PURE__ */ jsxs("div", {
+		}), !hideHeader && /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-between px-list-side-title",
 			children: [/* @__PURE__ */ jsx(Typography, {
 				size: "label-2",
@@ -45,34 +27,12 @@ var BottomSheetHeader = (t0) => {
 				children: label
 			}), onClose && isDismissable && /* @__PURE__ */ jsx(Button, {
 				onPress: onClose,
-				"aria-label": t(_temp),
+				"aria-label": t(($) => $.ui.closeAlt),
 				className: "-m-2 shrink-0 p-2 text-interactive-text-secondary-idle focus-visible:outline-interactive-text-secondary-focus",
 				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6" })
 			})]
-		});
-		$[6] = headerTypography;
-		$[7] = hideHeader;
-		$[8] = isDismissable;
-		$[9] = label;
-		$[10] = onClose;
-		$[11] = t;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
-	if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("div", {
-			className: t2,
-			children: [t3, t4]
-		});
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t4;
-		$[16] = t5;
-	} else t5 = $[16];
-	return t5;
+		})]
+	});
 };
-function _temp($) {
-	return $.ui.closeAlt;
-}
 //#endregion
 export { BottomSheetHeader };

package/dist/components/overlays/Drawer/Drawer.js

@@ -1,77 +1,35 @@
 import { modalOverlay } from "../Modal/modal.cva.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Modal, ModalOverlay } from "react-aria-components";
 //#region src/components/overlays/Drawer/Drawer.tsx
-var Drawer = (t0) => {
-	const $ = c(25);
-	const { label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside } = t0;
-	if (trigger) {
-		let t1;
-		if ($[0] !== children || $[1] !== className || $[2] !== dialogClassName || $[3] !== isDismissable || $[4] !== label || $[5] !== overlayClassName || $[6] !== portalContainerRef || $[7] !== shouldCloseOnInteractOutside) {
-			t1 = /* @__PURE__ */ jsx(DrawerOverlay, {
-				label,
-				portalContainerRef,
-				isDismissable,
-				overlayClassName,
-				dialogClassName,
-				className,
-				shouldCloseOnInteractOutside,
-				children
-			});
-			$[0] = children;
-			$[1] = className;
-			$[2] = dialogClassName;
-			$[3] = isDismissable;
-			$[4] = label;
-			$[5] = overlayClassName;
-			$[6] = portalContainerRef;
-			$[7] = shouldCloseOnInteractOutside;
-			$[8] = t1;
-		} else t1 = $[8];
-		let t2;
-		if ($[9] !== isOpen || $[10] !== onOpenChange || $[11] !== t1 || $[12] !== trigger) {
-			t2 = /* @__PURE__ */ jsxs(DialogTrigger, {
-				isOpen,
-				onOpenChange,
-				children: [trigger, t1]
-			});
-			$[9] = isOpen;
-			$[10] = onOpenChange;
-			$[11] = t1;
-			$[12] = trigger;
-			$[13] = t2;
-		} else t2 = $[13];
-		return t2;
-	}
-	let t1;
-	if ($[14] !== children || $[15] !== className || $[16] !== dialogClassName || $[17] !== isDismissable || $[18] !== isOpen || $[19] !== label || $[20] !== onOpenChange || $[21] !== overlayClassName || $[22] !== portalContainerRef || $[23] !== shouldCloseOnInteractOutside) {
-		t1 = /* @__PURE__ */ jsx(DrawerOverlay, {
-			isOpen,
-			onOpenChange,
+var Drawer = ({ label, isOpen, portalContainerRef, onOpenChange, trigger, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
+	if (trigger) return /* @__PURE__ */ jsxs(DialogTrigger, {
+		isOpen,
+		onOpenChange,
+		children: [trigger, /* @__PURE__ */ jsx(DrawerOverlay, {
+			label,
 			portalContainerRef,
 			isDismissable,
 			overlayClassName,
 			dialogClassName,
 			className,
-			label,
 			shouldCloseOnInteractOutside,
 			children
-		});
-		$[14] = children;
-		$[15] = className;
-		$[16] = dialogClassName;
-		$[17] = isDismissable;
-		$[18] = isOpen;
-		$[19] = label;
-		$[20] = onOpenChange;
-		$[21] = overlayClassName;
-		$[22] = portalContainerRef;
-		$[23] = shouldCloseOnInteractOutside;
-		$[24] = t1;
-	} else t1 = $[24];
-	return t1;
+		})]
+	});
+	return /* @__PURE__ */ jsx(DrawerOverlay, {
+		isOpen,
+		onOpenChange,
+		portalContainerRef,
+		isDismissable,
+		overlayClassName,
+		dialogClassName,
+		className,
+		label,
+		shouldCloseOnInteractOutside,
+		children
+	});
 };
 var DrawerOverlay = ({ label, isOpen, onOpenChange, portalContainerRef, children, isDismissable, overlayClassName, dialogClassName, className, shouldCloseOnInteractOutside }) => {
 	return /* @__PURE__ */ jsx(ModalOverlay, {