moduix 0.11.0 → 0.11.2

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,122 @@
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import { CloseButton } from "../CloseButton/CloseButton.js";
+import Dialog_module_default from "./Dialog.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { createContext, useContext } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/Dialog/Dialog.tsx
+const DEFAULT_CLOSE_BUTTON_LABEL = "Close dialog";
+const DialogModeContext = createContext(true);
+const createDialogHandle = Dialog.createHandle;
+function Dialog$1({ modal = true, ...props }) {
+	return /* @__PURE__ */ jsx(DialogModeContext.Provider, {
+		value: modal,
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			modal,
+			...props
+		})
+	});
+}
+function DialogTrigger({ className, render, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		render,
+		className: render ? className : mergeClassName(className, Dialog_module_default.trigger),
+		...props
+	});
+}
+function DialogPortal({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		className,
+		...props
+	});
+}
+function DialogBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-backdrop",
+		className: mergeClassName(className, Dialog_module_default.backdrop),
+		...props
+	});
+}
+function DialogViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		"data-slot": "dialog-viewport",
+		className: mergeClassName(className, Dialog_module_default.viewport),
+		...props
+	});
+}
+function DialogPopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		"data-slot": "dialog-popup",
+		className: mergeClassName(className, Dialog_module_default.popup),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: mergeClassName(className, Dialog_module_default.title),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: mergeClassName(className, Dialog_module_default.description),
+		...props
+	});
+}
+function DialogClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		className: mergeClassName(className, Dialog_module_default.close),
+		...props
+	});
+}
+function DialogCloseIcon({ className, children, "aria-label": ariaLabel = DEFAULT_CLOSE_BUTTON_LABEL, render, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close-icon",
+		render: render ?? /* @__PURE__ */ jsx(CloseButton, {
+			"aria-label": ariaLabel,
+			children
+		}),
+		className: mergeClassName(className, Dialog_module_default.closeIcon),
+		...props
+	});
+}
+function DialogContent({ className, children, ...props }) {
+	const blocksOutsidePointerInteraction = useContext(DialogModeContext) === true;
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [blocksOutsidePointerInteraction ? /* @__PURE__ */ jsx(DialogBackdrop, {}) : null, /* @__PURE__ */ jsx(DialogViewport, {
+		className: blocksOutsidePointerInteraction ? void 0 : Dialog_module_default.viewportNonBlocking,
+		children: /* @__PURE__ */ jsx(DialogPopup, {
+			className,
+			...props,
+			children
+		})
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: clsx(Dialog_module_default.header, className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: clsx(Dialog_module_default.footer, className),
+		...props
+	});
+}
+function DialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-body",
+		className: clsx(Dialog_module_default.body, className),
+		...props
+	});
+}
+//#endregion
+export { Dialog$1 as Dialog, DialogBackdrop, DialogBody, DialogClose, DialogCloseIcon, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, createDialogHandle };

package/dist/components/Dialog/Dialog.module.js

@@ -0,0 +1,18 @@
+import './Dialog.css';
+//#region src/components/Dialog/Dialog.module.css
+var Dialog_module_default = {
+	"backdrop": "u1ogVa_backdrop",
+	"body": "u1ogVa_body",
+	"close": "u1ogVa_close",
+	"closeIcon": "u1ogVa_closeIcon",
+	"description": "u1ogVa_description",
+	"footer": "u1ogVa_footer",
+	"header": "u1ogVa_header",
+	"popup": "u1ogVa_popup",
+	"title": "u1ogVa_title",
+	"trigger": "u1ogVa_trigger",
+	"viewport": "u1ogVa_viewport",
+	"viewportNonBlocking": "u1ogVa_viewportNonBlocking"
+};
+//#endregion
+export { Dialog_module_default as default };

package/dist/components/Dialog/index.d.ts

@@ -1 +1 @@
-export { Dialog, createDialogHandle, DialogTrigger, DialogPortal, DialogBackdrop, DialogViewport, DialogPopup, DialogTitle, DialogDescription, DialogClose, DialogCloseIcon, DialogContent, DialogHeader, DialogBody, DialogFooter, } from './Dialog';
+import { Dialog, DialogBackdrop, DialogBody, DialogClose, DialogCloseIcon, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, createDialogHandle } from "./Dialog.js";

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;
+  }
+}