moduix 0.10.0 → 0.11.1

package/dist/components/Drawer/Drawer.cjs

@@ -0,0 +1,202 @@
+const require_mergeClassName = require("../../utils/mergeClassName.cjs");
+const require_CloseButton = require("../CloseButton/CloseButton.cjs");
+const require_Drawer_module = require("./Drawer.module.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let clsx = require("clsx");
+let react = require("react");
+let _base_ui_react_drawer = require("@base-ui/react/drawer");
+//#region src/components/Drawer/Drawer.tsx
+const DEFAULT_CLOSE_BUTTON_LABEL = "Close drawer";
+const DrawerModeContext = (0, react.createContext)(true);
+function useMountReady(disableInitialAnimation) {
+	const [mountReady, setMountReady] = (0, react.useState)(!disableInitialAnimation);
+	(0, react.useEffect)(() => {
+		if (!disableInitialAnimation) {
+			setMountReady(true);
+			return;
+		}
+		setMountReady(false);
+		let frame = window.requestAnimationFrame(() => {
+			setMountReady(true);
+		});
+		return () => {
+			window.cancelAnimationFrame(frame);
+		};
+	}, [disableInitialAnimation]);
+	return mountReady;
+}
+function Drawer({ modal = true, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerModeContext.Provider, {
+		value: modal,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Root, {
+			modal,
+			...props
+		})
+	});
+}
+const DrawerProvider = _base_ui_react_drawer.Drawer.Provider;
+const createDrawerHandle = _base_ui_react_drawer.Drawer.createHandle;
+function DrawerIndent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Indent, {
+		"data-slot": "drawer-indent",
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.indent),
+		...props
+	});
+}
+function DrawerIndentBackground({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.IndentBackground, {
+		"data-slot": "drawer-indent-background",
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.indentBackground),
+		...props
+	});
+}
+function DrawerTrigger({ className, render, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Trigger, {
+		"data-slot": "drawer-trigger",
+		render,
+		className: render ? className : require_mergeClassName.mergeClassName(className, require_Drawer_module.default.trigger),
+		...props
+	});
+}
+function DrawerSwipeArea({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.SwipeArea, {
+		"data-slot": "drawer-swipe-area",
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.swipeArea),
+		...props
+	});
+}
+function DrawerPortal({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Portal, {
+		"data-slot": "drawer-portal",
+		className,
+		...props
+	});
+}
+function DrawerBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Backdrop, {
+		"data-slot": "drawer-backdrop",
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.backdrop),
+		...props
+	});
+}
+function DrawerViewport({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Viewport, {
+		"data-slot": "drawer-viewport",
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.viewport),
+		...props
+	});
+}
+function DrawerPopup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Popup, {
+		"data-slot": "drawer-popup",
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.popup),
+		...props
+	});
+}
+function DrawerHandle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "drawer-handle",
+		className: (0, clsx.clsx)(require_Drawer_module.default.handle, className),
+		...props
+	});
+}
+function DrawerContentInner({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Content, {
+		"data-slot": "drawer-content",
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.content),
+		...props
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Title, {
+		"data-slot": "drawer-title",
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.title),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Description, {
+		"data-slot": "drawer-description",
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.description),
+		...props
+	});
+}
+function DrawerClose({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Close, {
+		"data-slot": "drawer-close",
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.close),
+		...props
+	});
+}
+function DrawerCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, render, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_drawer.Drawer.Close, {
+		"data-slot": "drawer-close-icon",
+		render: render ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CloseButton.CloseButton, {
+			"aria-label": ariaLabel,
+			children
+		}),
+		className: require_mergeClassName.mergeClassName(className, require_Drawer_module.default.closeIcon),
+		...props
+	});
+}
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "drawer-header",
+		className: (0, clsx.clsx)(require_Drawer_module.default.header, className),
+		...props
+	});
+}
+function DrawerBody({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "drawer-body",
+		className: (0, clsx.clsx)(require_Drawer_module.default.body, className),
+		...props
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "drawer-footer",
+		className: (0, clsx.clsx)(require_Drawer_module.default.footer, className),
+		...props
+	});
+}
+function DrawerContent({ snapLayout = false, disableInitialAnimation = false, variant = "default", className, children, ...props }) {
+	const modal = (0, react.useContext)(DrawerModeContext);
+	const mountReady = useMountReady(disableInitialAnimation);
+	const blocksOutsidePointerInteraction = modal === true;
+	const viewportClassName = require_mergeClassName.mergeClassName(blocksOutsidePointerInteraction ? void 0 : require_Drawer_module.default.viewportNonModal, variant === "island" ? require_Drawer_module.default.viewportIsland : void 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DrawerPortal, { children: [blocksOutsidePointerInteraction ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerBackdrop, {}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerViewport, {
+		className: viewportClassName,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DrawerPopup, {
+			"data-snap-layout": snapLayout ? "" : void 0,
+			"data-disable-initial-animation": disableInitialAnimation ? "true" : void 0,
+			"data-mount-ready": mountReady ? "true" : "false",
+			"data-variant": variant,
+			className,
+			...props,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerHandle, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerContentInner, { children })]
+		})
+	})] });
+}
+//#endregion
+exports.Drawer = Drawer;
+exports.DrawerBackdrop = DrawerBackdrop;
+exports.DrawerBody = DrawerBody;
+exports.DrawerClose = DrawerClose;
+exports.DrawerCloseIcon = DrawerCloseIcon;
+exports.DrawerContent = DrawerContent;
+exports.DrawerContentInner = DrawerContentInner;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHandle = DrawerHandle;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerIndent = DrawerIndent;
+exports.DrawerIndentBackground = DrawerIndentBackground;
+exports.DrawerPopup = DrawerPopup;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerProvider = DrawerProvider;
+exports.DrawerSwipeArea = DrawerSwipeArea;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;
+exports.DrawerViewport = DrawerViewport;
+exports.createDrawerHandle = createDrawerHandle;

package/dist/components/Drawer/Drawer.css

@@ -0,0 +1,483 @@
+@layer ui.components {
+  .DGe4oW_indentBackground {
+    background: var(--drawer-indent-background-bg, var(--color-foreground));
+    opacity: var(--drawer-indent-background-opacity, 0);
+    transition: opacity var(--drawer-indent-transition, .4s cubic-bezier(.32, .72, 0, 1));
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+
+    &[data-active] {
+      opacity: var(--drawer-indent-background-opacity-active, 1);
+    }
+  }
+
+  .DGe4oW_indent {
+    transition: transform var(--drawer-indent-transition, .4s cubic-bezier(.32, .72, 0, 1)),
+      border-radius var(--drawer-indent-radius-transition, .25s cubic-bezier(.32, .72, 0, 1));
+    transform-origin: top;
+    position: relative;
+    transform: translateY(0) scale(1);
+
+    &[data-active] {
+      border-top-left-radius: var(--drawer-indent-radius-active, var(--radius-lg));
+      border-top-right-radius: var(--drawer-indent-radius-active, var(--radius-lg));
+      transform: translateY(var(--drawer-indent-translate-y-active, var(--spacing-2)))
+        scale(var(--drawer-indent-scale-active, .98));
+    }
+  }
+
+  .DGe4oW_trigger, .DGe4oW_close {
+    box-sizing: border-box;
+    min-height: var(--drawer-control-height, var(--size-lg));
+    padding: var(--drawer-control-padding-y, .5rem) var(--drawer-control-padding-x, .875rem);
+    border: var(--drawer-control-border-width, var(--border-width-sm)) solid
+      var(--drawer-control-border-color, var(--color-border));
+    border-radius: var(--drawer-control-radius, var(--radius-md));
+    background-color: var(--drawer-control-bg, var(--color-background));
+    color: var(--drawer-control-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--drawer-control-font-size, var(--text-md));
+    line-height: var(--drawer-control-line-height, var(--line-height-text-md));
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default);
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--drawer-control-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--drawer-focus-ring-width, var(--drawer-control-border-width, var(--border-width-sm)))
+        solid var(--drawer-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--drawer-focus-ring-width, var(--drawer-control-border-width, var(--border-width-sm))) *
+          -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--opacity-disabled);
+    }
+  }
+
+  .DGe4oW_swipeArea {
+    z-index: var(--z-modal);
+    touch-action: none;
+    position: fixed;
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+
+    &[data-swipe-direction="up"] {
+      height: var(--drawer-swipe-area-size, var(--spacing-10));
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    &[data-swipe-direction="down"] {
+      height: var(--drawer-swipe-area-size, var(--spacing-10));
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+
+    &[data-swipe-direction="left"] {
+      width: var(--drawer-swipe-area-size, var(--spacing-10));
+      top: 0;
+      bottom: 0;
+      right: 0;
+    }
+
+    &[data-swipe-direction="right"] {
+      width: var(--drawer-swipe-area-size, var(--spacing-10));
+      top: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  .DGe4oW_backdrop {
+    z-index: var(--z-backdrop);
+    background-color: var(--drawer-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--drawer-backdrop-blur, 4px)));
+    opacity: calc(1 - var(--drawer-swipe-progress, 0));
+    pointer-events: var(--drawer-backdrop-pointer-events, auto);
+    transition: opacity var(--drawer-backdrop-transition, .45s cubic-bezier(.32, .72, 0, 1)),
+      backdrop-filter var(--drawer-backdrop-transition, .45s cubic-bezier(.32, .72, 0, 1));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+
+    &[data-swiping] {
+      transition-duration: 0s;
+    }
+
+    &[data-ending-style] {
+      transition-duration: calc(var(--drawer-swipe-strength, 1) * .4s);
+    }
+  }
+
+  .DGe4oW_viewport {
+    z-index: var(--z-modal);
+    top: var(--drawer-viewport-top, 0);
+    right: var(--drawer-viewport-right, 0);
+    bottom: var(--drawer-viewport-bottom, 0);
+    left: var(--drawer-viewport-left, 0);
+    padding: var(--drawer-viewport-padding, 0px);
+    pointer-events: var(--drawer-viewport-pointer-events, auto);
+    overscroll-behavior: contain;
+    justify-content: center;
+    align-items: flex-end;
+    display: flex;
+    position: fixed;
+
+    &:has(.DGe4oW_popup[data-swipe-direction="up"]) {
+      justify-content: center;
+      align-items: flex-start;
+    }
+
+    &:has(.DGe4oW_popup[data-swipe-direction="left"]) {
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    &:has(.DGe4oW_popup[data-swipe-direction="right"]) {
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+
+  .DGe4oW_viewportNonModal {
+    pointer-events: none;
+  }
+
+  .DGe4oW_viewportIsland {
+    --drawer-viewport-padding: var(--drawer-island-padding, var(--spacing-4));
+  }
+
+  .DGe4oW_popup {
+    --drawer-bleed: var(--drawer-bleed-size, 3rem);
+    box-sizing: border-box;
+    border: var(--border-width-sm) solid var(--drawer-border-color, var(--color-border));
+    background: var(--drawer-bg, var(--color-popover));
+    color: var(--drawer-color, var(--color-popover-foreground));
+    box-shadow: var(--drawer-shadow, var(--shadow-lg));
+    touch-action: auto;
+    overscroll-behavior: contain;
+    pointer-events: var(--drawer-popup-pointer-events, auto);
+    transition: transform var(--drawer-transition, .45s cubic-bezier(.32, .72, 0, 1));
+    outline: none;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+
+    &[data-swiping] {
+      user-select: none;
+    }
+
+    &[data-swipe-direction="down"] {
+      width: min(var(--drawer-width, 100%), 100vw);
+      max-height: calc(var(--drawer-max-height, 80vh) + var(--drawer-bleed));
+      min-height: 0;
+      margin-bottom: calc(-1 * var(--drawer-bleed));
+      padding: var(--drawer-padding-y, var(--spacing-4)) var(--drawer-padding-x, var(--spacing-6))
+        calc(var(--drawer-padding-y, var(--spacing-4)) + env(safe-area-inset-bottom, 0px) +
+            var(--drawer-bleed));
+      padding-top: calc(var(--drawer-padding-y, var(--spacing-4)) + var(--drawer-handle-offset, var(--spacing-3)) +
+          var(--drawer-handle-height, .25rem));
+      border-radius: var(--drawer-radius, var(--radius-xl)) var(--drawer-radius, var(--radius-xl)) 0
+        0;
+      transform: translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)));
+
+      &[data-starting-style], &[data-ending-style] {
+        transform: translateY(calc(100% - var(--drawer-bleed) + 2px));
+      }
+    }
+
+    &[data-swipe-direction="up"] {
+      width: min(var(--drawer-width, 100%), 100vw);
+      max-height: calc(var(--drawer-max-height, 80vh) + var(--drawer-bleed));
+      min-height: 0;
+      margin-top: calc(-1 * var(--drawer-bleed));
+      padding: calc(var(--drawer-padding-y, var(--spacing-4)) + env(safe-area-inset-top, 0px) +
+            var(--drawer-bleed))
+        var(--drawer-padding-x, var(--spacing-6)) var(--drawer-padding-y, var(--spacing-4));
+      padding-bottom: calc(var(--drawer-padding-y, var(--spacing-4)) + var(--drawer-handle-offset, var(--spacing-3)) +
+          var(--drawer-handle-height, .25rem));
+      border-radius: 0 0 var(--drawer-radius, var(--radius-xl))
+        var(--drawer-radius, var(--radius-xl));
+      transform: translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)));
+
+      &[data-starting-style], &[data-ending-style] {
+        transform: translateY(calc(-100% + var(--drawer-bleed) - 2px));
+      }
+    }
+
+    &[data-swipe-direction="right"] {
+      width: calc(var(--drawer-side-width, 22rem) + var(--drawer-bleed));
+      max-width: calc(100vw - 3rem + var(--drawer-bleed));
+      height: var(--drawer-side-height, 100%);
+      max-height: var(--drawer-side-max-height, 100%);
+      min-height: 0;
+      margin-right: calc(-1 * var(--drawer-bleed));
+      padding: var(--drawer-padding-y, var(--spacing-6))
+        calc(var(--drawer-padding-x, var(--spacing-6)) + var(--drawer-bleed))
+        var(--drawer-padding-y, var(--spacing-6)) var(--drawer-padding-x, var(--spacing-6));
+      border-radius: var(--drawer-radius, var(--radius-xl)) 0 0
+        var(--drawer-radius, var(--radius-xl));
+      transform: translateX(var(--drawer-swipe-movement-x, 0px));
+
+      &[data-starting-style], &[data-ending-style] {
+        transform: translateX(calc(100% - var(--drawer-bleed) + var(--drawer-viewport-padding, 0px) + 2px));
+      }
+    }
+
+    &[data-swipe-direction="left"] {
+      width: calc(var(--drawer-side-width, 22rem) + var(--drawer-bleed));
+      max-width: calc(100vw - 3rem + var(--drawer-bleed));
+      height: var(--drawer-side-height, 100%);
+      max-height: var(--drawer-side-max-height, 100%);
+      min-height: 0;
+      margin-left: calc(-1 * var(--drawer-bleed));
+      padding: var(--drawer-padding-y, var(--spacing-6)) var(--drawer-padding-x, var(--spacing-6))
+        var(--drawer-padding-y, var(--spacing-6))
+        calc(var(--drawer-padding-x, var(--spacing-6)) + var(--drawer-bleed));
+      border-radius: 0 var(--drawer-radius, var(--radius-xl)) var(--drawer-radius, var(--radius-xl))
+        0;
+      transform: translateX(var(--drawer-swipe-movement-x, 0px));
+
+      &[data-starting-style], &[data-ending-style] {
+        transform: translateX(calc(-100% + var(--drawer-bleed) - var(--drawer-viewport-padding, 0px) - 2px));
+      }
+    }
+
+    &[data-ending-style] {
+      transition-duration: calc(var(--drawer-swipe-strength, 1) * .4s);
+    }
+
+    &[data-disable-initial-animation="true"][data-mount-ready="false"] {
+      transition: none;
+
+      &[data-starting-style][data-swipe-direction="down"], &[data-starting-style][data-swipe-direction="up"] {
+        transform: translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)));
+      }
+
+      &[data-starting-style][data-swipe-direction="left"], &[data-starting-style][data-swipe-direction="right"] {
+        transform: translateX(var(--drawer-swipe-movement-x, 0px));
+      }
+    }
+
+    &[data-variant="island"] {
+      --drawer-bleed: 0px;
+    }
+
+    &[data-variant="island"][data-snap-layout] {
+      --drawer-snap-tail-size: 0px;
+    }
+
+    &[data-variant="island"][data-swipe-direction="down"], &[data-variant="island"][data-swipe-direction="up"], &[data-variant="island"][data-swipe-direction="left"], &[data-variant="island"][data-swipe-direction="right"] {
+      border-radius: var(--drawer-radius, var(--radius-xl));
+    }
+
+    &[data-snap-layout][data-swipe-direction="down"] {
+      --drawer-bleed: 0px;
+      --drawer-snap-tail-size: var(--drawer-bleed-size, 3rem);
+      --drawer-snap-visible-height: calc(100% -
+          max(0px, calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px))));
+      height: var(--drawer-max-height, 100dvh);
+      max-height: var(--drawer-max-height, 100dvh);
+      padding-bottom: calc(var(--drawer-padding-y, var(--spacing-4)) + env(safe-area-inset-bottom, 0px));
+      touch-action: none;
+      margin-bottom: 0;
+      overflow: visible;
+
+      &:after {
+        height: var(--drawer-snap-tail-size);
+        background: var(--drawer-bg, var(--color-popover));
+        content: "";
+        pointer-events: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+      }
+    }
+
+    &[data-snap-layout][data-swipe-direction="up"] {
+      --drawer-bleed: 0px;
+      --drawer-snap-tail-size: var(--drawer-bleed-size, 3rem);
+      --drawer-snap-visible-height: calc(100% -
+          max(0px,
+            calc(-1 * (var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)))));
+      height: var(--drawer-max-height, 100dvh);
+      max-height: var(--drawer-max-height, 100dvh);
+      padding-top: calc(var(--drawer-padding-y, var(--spacing-4)) + env(safe-area-inset-top, 0px));
+      touch-action: none;
+      margin-top: 0;
+      overflow: visible;
+
+      &:after {
+        height: var(--drawer-snap-tail-size);
+        background: var(--drawer-bg, var(--color-popover));
+        content: "";
+        pointer-events: none;
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        right: 0;
+      }
+    }
+
+    &[data-nested-drawer-open][data-swipe-direction="down"] {
+      height: calc(max(0px,
+            calc(var(--drawer-frontmost-height, var(--drawer-height)) -
+                var(--drawer-nested-peek, 2.75rem))) +
+          var(--drawer-bleed));
+      transform: translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) -
+              var(--drawer-nested-peek, 2.75rem) * var(--nested-drawers, 1)))
+        scale(calc(1 - var(--drawer-nested-scale-step, .06) * var(--nested-drawers, 0)));
+      transform-origin: bottom;
+      overflow: hidden;
+    }
+
+    &[data-nested-drawer-open][data-swipe-direction="up"] {
+      height: calc(max(0px,
+            calc(var(--drawer-frontmost-height, var(--drawer-height)) -
+                var(--drawer-nested-peek, 2.75rem))) +
+          var(--drawer-bleed));
+      transform: translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px) +
+              var(--drawer-nested-peek, 2.75rem) * var(--nested-drawers, 1)))
+        scale(calc(1 - var(--drawer-nested-scale-step, .06) * var(--nested-drawers, 0)));
+      transform-origin: top;
+      overflow: hidden;
+    }
+  }
+
+  .DGe4oW_handle {
+    width: var(--drawer-handle-width, 3rem);
+    height: var(--drawer-handle-height, .25rem);
+    border-radius: var(--drawer-handle-radius, var(--radius-full));
+    background: var(--drawer-handle-bg, var(--color-muted-foreground));
+    opacity: var(--drawer-handle-opacity, .45);
+    flex: none;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+
+    .DGe4oW_popup[data-swipe-direction="down"] & {
+      top: var(--drawer-handle-offset, var(--spacing-3));
+    }
+
+    .DGe4oW_popup[data-swipe-direction="up"] & {
+      bottom: var(--drawer-handle-offset, var(--spacing-3));
+    }
+
+    .DGe4oW_popup[data-swipe-direction="left"] &, .DGe4oW_popup[data-swipe-direction="right"] & {
+      display: none;
+    }
+  }
+
+  .DGe4oW_content {
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+    display: flex;
+    overflow: hidden;
+
+    .DGe4oW_popup[data-snap-layout] & {
+      height: var(--drawer-snap-visible-height, 100%);
+      max-height: var(--drawer-snap-visible-height, 100%);
+      flex: 0 auto;
+      flex-basis: var(--drawer-snap-visible-height, 100%);
+      transition: height var(--drawer-transition, .45s cubic-bezier(.32, .72, 0, 1)),
+        max-height var(--drawer-transition, .45s cubic-bezier(.32, .72, 0, 1)),
+        flex-basis var(--drawer-transition, .45s cubic-bezier(.32, .72, 0, 1));
+    }
+
+    .DGe4oW_popup[data-snap-layout][data-swiping] & {
+      transition: none;
+    }
+  }
+
+  .DGe4oW_header {
+    align-items: start;
+    gap: var(--drawer-header-gap, var(--spacing-1));
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+
+    & > [data-slot="drawer-title"] {
+      grid-column: 1;
+    }
+
+    & > [data-slot="drawer-close"], & > [data-slot="drawer-close-icon"] {
+      grid-column: 2;
+      justify-self: end;
+    }
+
+    & > [data-slot="drawer-description"] {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .DGe4oW_title {
+    color: var(--drawer-title-color, var(--drawer-color, var(--color-popover-foreground)));
+    font-size: var(--drawer-title-font-size, var(--text-lg));
+    font-weight: var(--drawer-title-font-weight, var(--weight-semibold));
+    line-height: var(--drawer-title-line-height, var(--line-height-text-lg));
+    margin: 0;
+  }
+
+  .DGe4oW_description {
+    color: var(--drawer-description-color, var(--color-muted-foreground));
+    font-size: var(--drawer-description-font-size, var(--text-md));
+    line-height: var(--drawer-description-line-height, var(--line-height-text-md));
+    margin: 0;
+  }
+
+  .DGe4oW_body {
+    min-height: 0;
+    margin-top: var(--drawer-body-margin-top, var(--spacing-4));
+    font-size: var(--drawer-body-font-size, var(--text-md));
+    line-height: var(--drawer-body-line-height, var(--line-height-text-md));
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .DGe4oW_footer {
+    justify-content: flex-end;
+    gap: var(--drawer-footer-gap, var(--spacing-2));
+    margin-top: var(--drawer-footer-margin-top, var(--spacing-6));
+    display: flex;
+  }
+
+  .DGe4oW_closeIcon {
+    --close-button-size: var(--drawer-close-icon-size, 1.75rem);
+    --close-button-radius: var(--drawer-close-icon-radius, var(--radius-md));
+    --close-button-color: var(--drawer-close-icon-color, var(--drawer-description-color, var(--color-muted-foreground)));
+    --close-button-color-hover: var(--drawer-close-icon-color-hover, var(--drawer-close-icon-color, var(--drawer-color, var(--color-popover-foreground))));
+    --close-button-bg: var(--drawer-close-icon-bg, transparent);
+    --close-button-bg-hover: var(--drawer-close-icon-bg-hover, var(--color-accent));
+    --close-button-focus-ring-color: var(--drawer-close-icon-focus-ring-color, var(--drawer-focus-ring-color, var(--color-ring)));
+    --close-button-icon-size: var(--drawer-close-icon-glyph-size, .75rem);
+    border: 0;
+    min-height: auto;
+    padding: 0;
+  }
+}