@nattstack/ui 0.0.85 → 0.0.87

package/dist/components/button/button-spinner.css

@@ -0,0 +1,97 @@
+@layer components {
+  .button-spinner-module_base_UApLZa {
+    height: var(--size);
+    width: var(--size);
+    animation: 1s steps(12, end) infinite button-spinner-module_spinner_UApLZa;
+    position: absolute;
+    scale: -1 1;
+  }
+
+  @keyframes button-spinner-module_spinner_UApLZa {
+    to {
+      rotate: 1turn;
+    }
+  }
+
+  .button-spinner-module_base_UApLZa > div {
+    height: calc(var(--size) / 12);
+    pointer-events: none;
+    transform-origin: 0;
+    width: calc(var(--size) / 2);
+    transition: all .15s;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    translate: 0 -50%;
+  }
+
+  .button-spinner-module_base_UApLZa > div:after {
+    content: "";
+    background-color: currentColor;
+    border-radius: 9999px;
+    width: 50%;
+    height: 100%;
+    position: absolute;
+    right: 0;
+  }
+
+  .button-spinner-module_base_UApLZa > div:first-child {
+    opacity: 1;
+    rotate: 0deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(2) {
+    opacity: .925;
+    rotate: 30deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(3) {
+    opacity: .85;
+    rotate: 60deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(4) {
+    opacity: .775;
+    rotate: 90deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(5) {
+    opacity: .7;
+    rotate: 120deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(6) {
+    opacity: .625;
+    rotate: 150deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(7) {
+    opacity: .55;
+    rotate: 180deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(8) {
+    opacity: .475;
+    rotate: 210deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(9) {
+    opacity: .4;
+    rotate: 240deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(10) {
+    opacity: .325;
+    rotate: 270deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(11) {
+    opacity: .25;
+    rotate: 300deg;
+  }
+
+  .button-spinner-module_base_UApLZa > div:nth-child(12) {
+    opacity: .15;
+    rotate: 330deg;
+  }
+}

package/dist/components/button/button-spinner.js

@@ -0,0 +1,14 @@
+import button_spinner_module_default from "./button-spinner.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button/button-spinner.tsx
+const SIZE = 18;
+function ButtonSpinner() {
+	return /* @__PURE__ */ jsx("div", {
+		className: button_spinner_module_default.base,
+		"data-slot": "button-spinner",
+		style: { "--size": `${SIZE}px` },
+		children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsx("div", {}, index))
+	});
+}
+//#endregion
+export { ButtonSpinner };

package/dist/components/button/button-spinner.module.js

@@ -0,0 +1,8 @@
+import './button-spinner.css';
+//#region src/components/button/button-spinner.module.css
+var button_spinner_module_default = {
+	"base": "button-spinner-module_base_UApLZa",
+	"spinner": "button-spinner-module_spinner_UApLZa"
+};
+//#endregion
+export { button_spinner_module_default as default };

package/dist/components/button/button.css

@@ -0,0 +1,191 @@
+@layer components {
+  .button-module_base_4nLWdW {
+    cursor: pointer;
+    outline-offset: 2px;
+    user-select: none;
+    outline: 2px solid #0000;
+    justify-content: center;
+    align-items: center;
+    column-gap: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    transition-property: background-color, box-shadow, translate;
+    transition-duration: .15s;
+    display: inline-flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .button-module_base_4nLWdW:active:not(:disabled) {
+    translate: 0 1px;
+  }
+
+  .button-module_base_4nLWdW:focus-visible {
+    outline-color: var(--color-outline);
+  }
+
+  .button-module_disabled_4nLWdW, .button-module_loading_4nLWdW {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  .button-module_loading_4nLWdW > :not([data-slot="button-spinner"]) {
+    color: #0000;
+    text-shadow: none;
+  }
+
+  .button-module_rounded_base_4nLWdW.button-module_size_32_4nLWdW {
+    border-radius: 8px;
+    padding: 0 12px;
+  }
+
+  .button-module_rounded_base_4nLWdW.button-module_size_36_4nLWdW {
+    border-radius: 9px;
+    padding: 0 14px;
+  }
+
+  .button-module_rounded_base_4nLWdW.button-module_size_40_4nLWdW {
+    border-radius: 10px;
+    padding: 0 16px;
+  }
+
+  .button-module_rounded_base_4nLWdW.button-module_size_44_4nLWdW {
+    border-radius: 11px;
+    padding: 0 18px;
+  }
+
+  .button-module_rounded_base_4nLWdW.button-module_size_48_4nLWdW {
+    border-radius: 12px;
+    padding: 0 20px;
+  }
+
+  .button-module_rounded_full_4nLWdW.button-module_size_32_4nLWdW {
+    border-radius: 16px;
+    padding: 0 12px;
+  }
+
+  .button-module_rounded_full_4nLWdW.button-module_size_36_4nLWdW {
+    border-radius: 18px;
+    padding: 0 17px;
+  }
+
+  .button-module_rounded_full_4nLWdW.button-module_size_40_4nLWdW {
+    border-radius: 20px;
+    padding: 0 20px;
+  }
+
+  .button-module_rounded_full_4nLWdW.button-module_size_44_4nLWdW {
+    border-radius: 22px;
+    padding: 0 23px;
+  }
+
+  .button-module_rounded_full_4nLWdW.button-module_size_48_4nLWdW {
+    border-radius: 24px;
+    padding: 0 28px;
+  }
+
+  .button-module_size_32_4nLWdW {
+    height: 32px;
+  }
+
+  .button-module_size_36_4nLWdW {
+    height: 36px;
+  }
+
+  .button-module_size_40_4nLWdW {
+    height: 40px;
+  }
+
+  .button-module_size_44_4nLWdW {
+    height: 44px;
+  }
+
+  .button-module_size_48_4nLWdW {
+    height: 48px;
+  }
+
+  .button-module_variant_ghost_4nLWdW {
+    color: #000;
+    background-color: #0000;
+  }
+
+  .button-module_variant_ghost_4nLWdW:hover:not(:disabled) {
+    background-color: var(--color-gray-4);
+  }
+
+  .dark .button-module_variant_ghost_4nLWdW {
+    color: #fff;
+  }
+
+  .button-module_variant_primary_4nLWdW {
+    background-color: var(--color-primary);
+    box-shadow: inset 0 0 0 1px var(--color-primary),
+      inset 0 1px 0 1px #ffffff40;
+    color: #fff;
+    isolation: isolate;
+  }
+
+  .button-module_variant_primary_4nLWdW:after {
+    content: "";
+    mix-blend-mode: overlay;
+    pointer-events: none;
+    transition-duration: inherit;
+    background-image: radial-gradient(75% 100% at 50% -50%, #ffffff40, #0000);
+    transition-property: opacity;
+    position: absolute;
+    inset: 0;
+  }
+
+  .button-module_variant_primary_4nLWdW:hover:not(:disabled):after {
+    opacity: 0;
+  }
+
+  .dark .button-module_variant_primary_4nLWdW {
+    box-shadow: inset 0 1px #ffffff40;
+  }
+
+  .button-module_variant_primary_4nLWdW:hover:not(:disabled) {
+    --color-mixed: #000;
+    background-color: color-mix(in oklab, var(--color-primary) 100%, var(--color-mixed) 10%);
+    box-shadow: none;
+  }
+
+  .dark .button-module_variant_primary_4nLWdW:hover:not(:disabled) {
+    --color-mixed: #fff;
+  }
+
+  .button-module_variant_primary_4nLWdW > * {
+    --opacity: .25;
+    filter: drop-shadow(0 1px 1px hsla(0, 0%, 0%, var(--opacity)));
+    transition-duration: inherit;
+    transition-property: filter;
+  }
+
+  .button-module_variant_primary_4nLWdW:hover:not(:disabled) > * {
+    --opacity: 0;
+  }
+
+  .button-module_variant_secondary_4nLWdW {
+    --color-text: #000;
+    background-color: var(--color-bg-shell-outer);
+    box-shadow: inset 0 0 0 1px var(--color-border);
+    color: var(--color-text);
+  }
+
+  .dark .button-module_variant_secondary_4nLWdW {
+    --color-text: #fff;
+  }
+
+  .button-module_variant_secondary_4nLWdW:hover:not(:disabled) {
+    background-color: var(--color-gray-4);
+    box-shadow: none;
+  }
+
+  .button-module_width_base_4nLWdW {
+    width: fit-content;
+  }
+
+  .button-module_width_full_4nLWdW {
+    width: stretch;
+  }
+}

package/dist/components/button/button.d.ts

@@ -0,0 +1,25 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, JSX, ReactNode } from "react";
+//#region src/components/button/button.d.ts
+interface ButtonProps extends Omit<ComponentProps<"button">, "children" | "disabled"> {
+  iconEnd?: ReactNode;
+  iconStart?: ReactNode;
+  isDisabled?: ComponentProps<"button">["disabled"];
+  isFullWidth?: VariantProps<typeof button>["isFullWidth"];
+  isLoading?: ComponentProps<"button">["disabled"];
+  isRounded?: VariantProps<typeof button>["isRounded"];
+  label?: number | number[] | string | string[];
+  size?: VariantProps<typeof button>["size"];
+  variant?: VariantProps<typeof button>["variant"];
+}
+declare function Button(props: ButtonProps): JSX.Element;
+declare const button: (props?: ({
+  isDisabled?: boolean | null | undefined;
+  isFullWidth?: boolean | null | undefined;
+  isLoading?: boolean | null | undefined;
+  isRounded?: boolean | null | undefined;
+  size?: 32 | 36 | 40 | 44 | 48 | null | undefined;
+  variant?: "ghost" | "primary" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { Button, ButtonProps, button };

package/dist/components/button/button.js

@@ -0,0 +1,54 @@
+import { ButtonSpinner } from "./button-spinner.js";
+import button_module_default from "./button.module.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/button/button.tsx
+function Button(props) {
+	const { className = "", isDisabled = false, iconStart = "", iconEnd = "", isFullWidth = false, isLoading = false, isRounded = false, label = "", variant = "primary", size = 40, ...rest } = props;
+	return /* @__PURE__ */ jsxs("button", {
+		className: button({
+			className,
+			isDisabled,
+			isFullWidth,
+			isLoading,
+			isRounded,
+			size,
+			variant
+		}),
+		disabled: isDisabled || isLoading,
+		type: "button",
+		...rest,
+		children: [
+			isLoading && /* @__PURE__ */ jsx(ButtonSpinner, {}),
+			iconStart,
+			label !== "" && /* @__PURE__ */ jsx("span", { children: label }),
+			iconEnd
+		]
+	});
+}
+const button = cva(button_module_default.base, { variants: {
+	isDisabled: { true: button_module_default.disabled },
+	isFullWidth: {
+		false: button_module_default.width_base,
+		true: button_module_default.width_full
+	},
+	isLoading: { true: button_module_default.loading },
+	isRounded: {
+		false: button_module_default.rounded_base,
+		true: button_module_default.rounded_full
+	},
+	size: {
+		32: button_module_default.size_32,
+		36: button_module_default.size_36,
+		40: button_module_default.size_40,
+		44: button_module_default.size_44,
+		48: button_module_default.size_48
+	},
+	variant: {
+		ghost: button_module_default.variant_ghost,
+		primary: button_module_default.variant_primary,
+		secondary: button_module_default.variant_secondary
+	}
+} });
+//#endregion
+export { Button, button };

package/dist/components/button/button.module.js

@@ -0,0 +1,21 @@
+import './button.css';
+//#region src/components/button/button.module.css
+var button_module_default = {
+	"base": "button-module_base_4nLWdW",
+	"disabled": "button-module_disabled_4nLWdW",
+	"loading": "button-module_loading_4nLWdW",
+	"rounded_base": "button-module_rounded_base_4nLWdW",
+	"rounded_full": "button-module_rounded_full_4nLWdW",
+	"size_32": "button-module_size_32_4nLWdW",
+	"size_36": "button-module_size_36_4nLWdW",
+	"size_40": "button-module_size_40_4nLWdW",
+	"size_44": "button-module_size_44_4nLWdW",
+	"size_48": "button-module_size_48_4nLWdW",
+	"variant_ghost": "button-module_variant_ghost_4nLWdW",
+	"variant_primary": "button-module_variant_primary_4nLWdW",
+	"variant_secondary": "button-module_variant_secondary_4nLWdW",
+	"width_base": "button-module_width_base_4nLWdW",
+	"width_full": "button-module_width_full_4nLWdW"
+};
+//#endregion
+export { button_module_default as default };

package/dist/components/button-link/button-link.d.ts

@@ -0,0 +1,18 @@
+import { button } from "../button/button.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, ElementType, JSX, ReactNode } from "react";
+//#region src/components/button-link/button-link.d.ts
+type ButtonLinkProps<ComponentType extends ElementType = "a"> = ButtonLinkInternalProps<ComponentType> & Omit<ComponentProps<ComponentType>, "children" | keyof ButtonLinkInternalProps>;
+interface ButtonLinkInternalProps<ComponentType extends ElementType = "a"> {
+  as?: ComponentType;
+  iconEnd?: ReactNode;
+  iconStart?: ReactNode;
+  isFullWidth?: VariantProps<typeof button>["isFullWidth"];
+  isRounded?: VariantProps<typeof button>["isRounded"];
+  label?: number | number[] | string | string[];
+  size?: VariantProps<typeof button>["size"];
+  variant?: VariantProps<typeof button>["variant"];
+}
+declare function ButtonLink<ComponentType extends ElementType = "a">(props: ButtonLinkProps<ComponentType>): JSX.Element;
+//#endregion
+export { ButtonLink, ButtonLinkProps };

package/dist/components/button-link/button-link.js

@@ -0,0 +1,23 @@
+import { button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/button-link/button-link.tsx
+function ButtonLink(props) {
+	const { as: Component = "a", className = "", iconStart = "", iconEnd = "", isFullWidth = false, isRounded = false, label = "", size = 40, variant = "primary", ...rest } = props;
+	return /* @__PURE__ */ jsxs(Component, {
+		className: button({
+			className,
+			isFullWidth,
+			isRounded,
+			size,
+			variant
+		}),
+		...rest,
+		children: [
+			iconStart,
+			label !== "" && /* @__PURE__ */ jsx("span", { children: label }),
+			iconEnd
+		]
+	});
+}
+//#endregion
+export { ButtonLink };

package/dist/components/checkbox/checkbox-icon.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/checkbox/checkbox-icon.tsx
+function CheckboxIcon(props) {
+	const { ...rest } = props;
+	return /* @__PURE__ */ jsx("svg", {
+		fill: "none",
+		height: "24",
+		viewBox: "0 0 24 24",
+		width: "24",
+		xmlns: "http://www.w3.org/2000/svg",
+		...rest,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M5 13.875L9.2 18L19 7",
+			stroke: "black",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1.5"
+		})
+	});
+}
+//#endregion
+export { CheckboxIcon };

package/dist/components/checkbox/checkbox.css

@@ -0,0 +1,55 @@
+@layer components {
+  .checkbox-module_checkbox_tQ0i7W {
+    --size: 16px;
+    background-color: var(--color-bg-shell-inner);
+    border: 1px solid var(--color-border);
+    cursor: pointer;
+    height: var(--size);
+    outline-color: var(--color-primary);
+    outline-offset: 2px;
+    width: var(--size);
+    border-radius: 4px;
+    outline-width: 0;
+    outline-style: solid;
+    justify-content: center;
+    align-items: center;
+    transition-property: background-color, border-color;
+    transition-duration: .15s;
+    display: flex;
+  }
+
+  .checkbox-module_checkbox_tQ0i7W:focus-visible {
+    outline-width: 2px;
+  }
+
+  .checkbox-module_checkbox_tQ0i7W:hover {
+    background-color: var(--color-gray-3);
+    border-color: var(--color-gray-6);
+  }
+
+  .checkbox-module_checkbox_tQ0i7W[data-checked] {
+    background-color: var(--color-primary);
+    border-color: #0000;
+  }
+
+  .checkbox-module_indicator_tQ0i7W {
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: .15s;
+  }
+
+  .checkbox-module_indicator_tQ0i7W[data-checked] {
+    opacity: 1;
+  }
+
+  .checkbox-module_icon_tQ0i7W {
+    --size: 12px;
+    height: var(--size);
+    width: var(--size);
+
+    & > path {
+      stroke-width: 3px;
+      stroke: #fff;
+    }
+  }
+}

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,8 @@
+import { Checkbox } from "@base-ui/react";
+import { ComponentProps, JSX } from "react";
+//#region src/components/checkbox/checkbox.d.ts
+interface CheckboxProps extends ComponentProps<typeof Checkbox.Root> {}
+declare function Checkbox$1(props: CheckboxProps): JSX.Element;
+declare const checkboxVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxProps, checkboxVariants };

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,21 @@
+import { CheckboxIcon } from "./checkbox-icon.js";
+import checkbox_module_default from "./checkbox.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react";
+//#region src/components/checkbox/checkbox.tsx
+function Checkbox$1(props) {
+	const { children = void 0, className: customClassName = "", ...rest } = props;
+	const combinedClassName = checkboxVariants({ className: customClassName });
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		className: combinedClassName,
+		...rest,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: checkbox_module_default.indicator,
+			children: children ?? /* @__PURE__ */ jsx(CheckboxIcon, { className: checkbox_module_default.icon })
+		})
+	});
+}
+const checkboxVariants = cva(checkbox_module_default.checkbox);
+//#endregion
+export { Checkbox$1 as Checkbox, checkboxVariants };

package/dist/components/checkbox/checkbox.module.js

@@ -0,0 +1,9 @@
+import './checkbox.css';
+//#region src/components/checkbox/checkbox.module.css
+var checkbox_module_default = {
+	"checkbox": "checkbox-module_checkbox_tQ0i7W",
+	"icon": "checkbox-module_icon_tQ0i7W",
+	"indicator": "checkbox-module_indicator_tQ0i7W"
+};
+//#endregion
+export { checkbox_module_default as default };

package/dist/components/column/column.css

@@ -0,0 +1,6 @@
+@layer components {
+  .column-module_column_CgFaGG {
+    flex-direction: column;
+    display: flex;
+  }
+}

package/dist/components/column/column.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ComponentProps, ElementType, JSX } from "react";
+//#region src/components/column/column.d.ts
+type ColumnProps<ComponentType extends ElementType = "div"> = ColumnInternalProps & ComponentProps<ComponentType>;
+interface ColumnInternalProps {
+  alignItems?: CSSProperties["alignItems"];
+  as?: keyof JSX.IntrinsicElements;
+  flexWrap?: CSSProperties["flexWrap"];
+  gap?: CSSProperties["gap"];
+  gapX?: CSSProperties["columnGap"];
+  gapY?: CSSProperties["rowGap"];
+  justifyContent?: CSSProperties["justifyContent"];
+}
+declare function Column(props: ColumnProps): JSX.Element;
+declare const columnVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { Column, ColumnProps, columnVariants };

package/dist/components/column/column.js

@@ -0,0 +1,23 @@
+import column_module_default from "./column.module.js";
+import { cva } from "class-variance-authority";
+import { createElement } from "react";
+//#region src/components/column/column.tsx
+function Column(props) {
+	const { alignItems = void 0, as = "div", className: customClassName = "", flexWrap = void 0, gap = void 0, gapX = void 0, gapY = void 0, justifyContent = void 0, style: customStyle, ...rest } = props;
+	return createElement(as, {
+		className: columnVariants({ className: customClassName }),
+		style: {
+			...customStyle,
+			...gap === void 0 ? {} : { gap },
+			...gapX === void 0 ? {} : { columnGap: gapX },
+			...gapY === void 0 ? {} : { rowGap: gapY },
+			...flexWrap === void 0 ? {} : { flexWrap },
+			...alignItems === void 0 ? {} : { alignItems },
+			...justifyContent === void 0 ? {} : { justifyContent }
+		},
+		...rest
+	});
+}
+const columnVariants = cva(column_module_default.column);
+//#endregion
+export { Column, columnVariants };

package/dist/components/column/column.module.js

@@ -0,0 +1,5 @@
+import './column.css';
+//#region src/components/column/column.module.css
+var column_module_default = { "column": "column-module_column_CgFaGG" };
+//#endregion
+export { column_module_default as default };

package/dist/components/dialog-responsive/dialog-responsive-backdrop.css

@@ -0,0 +1,28 @@
+@layer components {
+  .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq {
+    --backdrop-opacity: .25;
+    opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
+    outline-color: var(--color-primary-9);
+    background-color: #000;
+    transition-property: opacity;
+    transition-duration: .15s;
+    position: fixed;
+    inset: 0;
+  }
+
+  .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq[data-ending-style], .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq[data-starting-style] {
+    opacity: 0;
+  }
+
+  .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * .4s);
+  }
+
+  .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq[data-swiping] {
+    transition-duration: 0s;
+  }
+
+  .dark .dialog-responsive-backdrop-module_dialog_responsive_backdrop_-X7FOq {
+    --backdrop-opacity: .75;
+  }
+}

package/dist/components/dialog-responsive/dialog-responsive-backdrop.js

@@ -0,0 +1,17 @@
+import dialog_responsive_backdrop_module_default from "./dialog-responsive-backdrop.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react";
+//#region src/components/dialog-responsive/dialog-responsive-backdrop.tsx
+function DialogResponsiveBackdrop(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = dialogResponsiveBackdropVariants({ className: customClassName });
+	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
+		className: combinedClassName,
+		"data-slot": "dialog-responsive-backdrop",
+		...rest
+	});
+}
+const dialogResponsiveBackdropVariants = cva(dialog_responsive_backdrop_module_default.dialog_responsive_backdrop);
+//#endregion
+export { DialogResponsiveBackdrop, dialogResponsiveBackdropVariants };