@nattstack/ui 0.0.107 → 0.1.0

package/dist/components/combobox/combobox-item.js

@@ -1,22 +1,20 @@
-import picker_item_module_default from "../picker/picker-item.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerItemStyles } from "../picker/picker-item.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-item.tsx
 function ComboboxItem(props) {
-	const { children, className: customClassName = "", isDisabled = false, ...rest } = props;
-	const combinedClassName = comboboxItemVariants({ className: customClassName });
+	const { children, className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsxs(Combobox.Item, {
-		className: combinedClassName,
+		className: cn(sx(pickerItemStyles.base), customClassName),
 		"data-slot": "combobox-item",
-		disabled: isDisabled,
 		...rest,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: picker_item_module_default.label,
+			className: sx(pickerItemStyles.label),
 			"data-slot": "combobox-item-text",
 			children
 		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-			className: picker_item_module_default.indicator,
+			className: sx(pickerItemStyles.indicator),
 			"data-slot": "combobox-item-indicator",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14px",
@@ -37,6 +35,5 @@ function ComboboxItem(props) {
 		})]
 	});
 }
-const comboboxItemVariants = cva(picker_item_module_default.base);
 //#endregion
-export { ComboboxItem, comboboxItemVariants };
+export { ComboboxItem };

package/dist/components/combobox/combobox-list.d.ts

@@ -5,6 +5,5 @@ interface ComboboxListProps extends Omit<Combobox.List.Props, "className"> {
   className?: string;
 }
 declare function ComboboxList(props: ComboboxListProps): JSX.Element;
-declare const comboboxListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ComboboxList, ComboboxListProps, comboboxListVariants };
+export { ComboboxList, ComboboxListProps };

package/dist/components/combobox/combobox-list.js

@@ -1,17 +1,15 @@
-import picker_list_module_default from "../picker/picker-list.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerListStyles } from "../picker/picker-list.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-list.tsx
 function ComboboxList(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = comboboxListVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Combobox.List, {
-		className: combinedClassName,
+		className: cn(sx(pickerListStyles.base), customClassName),
 		"data-slot": "combobox-list",
 		...rest
 	});
 }
-const comboboxListVariants = cva(picker_list_module_default.base);
 //#endregion
-export { ComboboxList, comboboxListVariants };
+export { ComboboxList };

package/dist/components/combobox/combobox-search.d.ts

@@ -1,11 +1,10 @@
+import { comboboxSearchStyles } from "./combobox-search.stylex.js";
 import { Combobox } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/combobox/combobox-search.d.ts
-interface ComboboxSearchProps extends Omit<Combobox.Input.Props, "className" | "disabled" | "size"> {
+interface ComboboxSearchProps extends Omit<Combobox.Input.Props, "className" | "size"> {
   className?: string;
-  isDisabled?: Combobox.Input.Props["disabled"];
 }
 declare function ComboboxSearch(props: ComboboxSearchProps): JSX.Element;
-declare const comboboxSearchVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ComboboxSearch, ComboboxSearchProps, comboboxSearchVariants };
+export { ComboboxSearch, ComboboxSearchProps, comboboxSearchStyles };

package/dist/components/combobox/combobox-search.js

@@ -1,16 +1,15 @@
-import combobox_search_module_default from "./combobox-search.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { comboboxSearchStyles } from "./combobox-search.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-search.tsx
 function ComboboxSearch(props) {
-	const { className: customClassName = "", isDisabled = false, ...rest } = props;
-	const combinedClassName = comboboxSearchVariants({ className: customClassName });
+	const { className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: combinedClassName,
+		className: cn(sx(comboboxSearchStyles.base), customClassName),
 		"data-slot": "combobox-search",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: combobox_search_module_default.icon,
+			className: sx(comboboxSearchStyles.icon),
 			"data-slot": "combobox-search-icon",
 			children: /* @__PURE__ */ jsxs("svg", {
 				height: "18",
@@ -34,13 +33,11 @@ function ComboboxSearch(props) {
 				})]
 			})
 		}), /* @__PURE__ */ jsx(Combobox.Input, {
-			className: combobox_search_module_default.input,
+			className: sx(comboboxSearchStyles.input),
 			"data-slot": "combobox-search-input",
-			disabled: isDisabled,
 			...rest
 		})]
 	});
 }
-const comboboxSearchVariants = cva(combobox_search_module_default.base);
 //#endregion
-export { ComboboxSearch, comboboxSearchVariants };
+export { ComboboxSearch, comboboxSearchStyles };

package/dist/components/combobox/combobox-search.stylex.d.ts

@@ -0,0 +1,45 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/combobox/combobox-search.stylex.d.ts
+declare const comboboxSearchStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-bg-shell-inner)">;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "inset 0 -1px 0 var(--color-border)">;
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", 8>;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly height: stylex.StyleXClassNameFor<"height", 40>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 16>;
+  }>;
+  readonly icon: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-gray-9)">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+  }>;
+  readonly input: Readonly<{
+    readonly "::placeholder": stylex.StyleXClassNameFor<"::placeholder", {
+      readonly color: "var(--color-gray-9)";
+      readonly userSelect: "none";
+    }>;
+    readonly appearance: stylex.StyleXClassNameFor<"appearance", "none">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-primary)">;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "text" | "not-allowed">;
+    readonly flexBasis: stylex.StyleXClassNameFor<"flexBasis", 0>;
+    readonly flexGrow: stylex.StyleXClassNameFor<"flexGrow", 1>;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 1>;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 400>;
+    readonly height: stylex.StyleXClassNameFor<"height", "100%">;
+    readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | 0.5>;
+    readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+  }>;
+}>;
+//#endregion
+export { comboboxSearchStyles };

package/dist/components/combobox/combobox-search.stylex.js

@@ -0,0 +1,45 @@
+//#region src/components/combobox/combobox-search.stylex.ts
+const comboboxSearchStyles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "x1h73wb5",
+		kGVxlE: "x1buzmp1",
+		k1C7PZ: "xfex06f",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kZKoxP: "x1vqgdyp",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x1hr3lfm",
+		$$css: true
+	},
+	icon: {
+		kGNEyG: "x6s0dn4",
+		kMwMTN: "x1vpwubs",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kjj79g: "xl56j7k",
+		$$css: true
+	},
+	input: {
+		k8Qsv1: "x1ta7s2x",
+		kI5SfV: "xjp5s5a",
+		kysU6D: "xjyslct",
+		kWkggS: "xjbqb8w",
+		ksu8eU: "xng3xce",
+		kMwMTN: "x1tgivj0",
+		kkrTdU: "x1s07b3s x1ed109x",
+		kCS8Yb: "x1r8uery",
+		kzQI83: "x1iyjqo2",
+		kmuXW: "xs83m0k",
+		kGuDYH: "xif65rj",
+		k63SB2: "xo1l8bm",
+		kZKoxP: "x5yr21d",
+		k7Eaqz: "xeuugli",
+		kSiTet: "xijokvz x1hc1fzr",
+		kI3sdo: "x1a2a7pz",
+		kmVPX3: "x1717udv",
+		$$css: true
+	}
+};
+//#endregion
+export { comboboxSearchStyles };

package/dist/components/combobox/combobox-separator.d.ts

@@ -5,6 +5,5 @@ interface ComboboxSeparatorProps extends Omit<Combobox.Separator.Props, "classNa
   className?: string;
 }
 declare function ComboboxSeparator(props: ComboboxSeparatorProps): JSX.Element;
-declare const comboboxSeparatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ComboboxSeparator, ComboboxSeparatorProps, comboboxSeparatorVariants };
+export { ComboboxSeparator, ComboboxSeparatorProps };

package/dist/components/combobox/combobox-separator.js

@@ -1,17 +1,15 @@
-import picker_separator_module_default from "../picker/picker-separator.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerSeparatorStyles } from "../picker/picker-separator.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-separator.tsx
 function ComboboxSeparator(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = comboboxSeparatorVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Combobox.Separator, {
-		className: combinedClassName,
+		className: cn(sx(pickerSeparatorStyles.base), customClassName),
 		"data-slot": "combobox-separator",
 		...rest
 	});
 }
-const comboboxSeparatorVariants = cva(picker_separator_module_default.base);
 //#endregion
-export { ComboboxSeparator, comboboxSeparatorVariants };
+export { ComboboxSeparator };

package/dist/components/combobox/combobox-trigger.d.ts

@@ -1,15 +1,11 @@
-import { VariantProps } from "class-variance-authority";
 import { Combobox } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/combobox/combobox-trigger.d.ts
 interface ComboboxTriggerProps extends Combobox.Trigger.Props {
-  isRounded?: VariantProps<typeof comboboxTriggerVariants>["isRounded"];
-  size?: VariantProps<typeof comboboxTriggerVariants>["size"];
+  rounded?: boolean;
+  size?: ComboboxTriggerSize;
 }
+type ComboboxTriggerSize = 32 | 36 | 40 | 44 | 48;
 declare function ComboboxTrigger(props: ComboboxTriggerProps): JSX.Element;
-declare const comboboxTriggerVariants: (props?: ({
-  isRounded?: boolean | null | undefined;
-  size?: 32 | 36 | 40 | 44 | 48 | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
-export { ComboboxTrigger, ComboboxTriggerProps, comboboxTriggerVariants };
+export { ComboboxTrigger, ComboboxTriggerProps, ComboboxTriggerSize };

package/dist/components/combobox/combobox-trigger.js

@@ -1,21 +1,16 @@
-import picker_trigger_module_default from "../picker/picker-trigger.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerTriggerStyles } from "../picker/picker-trigger.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-trigger.tsx
 function ComboboxTrigger(props) {
-	const { children = void 0, className: customClassName = "", isRounded = false, size = 40, ...rest } = props;
-	const combinedClassName = comboboxTriggerVariants({
-		className: customClassName,
-		isRounded,
-		size
-	});
+	const { children = void 0, className: customClassName = "", rounded = false, size = 40, ...rest } = props;
 	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
-		className: combinedClassName,
+		className: cn(sx(pickerTriggerStyles.base, pickerTriggerStyles[size], rounded && pickerTriggerStyles.roundedFull), customClassName),
 		"data-slot": "combobox-trigger",
 		...rest,
 		children: [children, /* @__PURE__ */ jsx(Combobox.Icon, {
-			className: picker_trigger_module_default.icon,
+			className: sx(pickerTriggerStyles.icon),
 			"data-slot": "combobox-icon",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14",
@@ -34,15 +29,5 @@ function ComboboxTrigger(props) {
 		})]
 	});
 }
-const comboboxTriggerVariants = cva(picker_trigger_module_default.base, { variants: {
-	isRounded: { true: picker_trigger_module_default.rounded_full },
-	size: {
-		32: picker_trigger_module_default.size_32,
-		36: picker_trigger_module_default.size_36,
-		40: picker_trigger_module_default.size_40,
-		44: picker_trigger_module_default.size_44,
-		48: picker_trigger_module_default.size_48
-	}
-} });
 //#endregion
-export { ComboboxTrigger, comboboxTriggerVariants };
+export { ComboboxTrigger };

package/dist/components/combobox/combobox-value.d.ts

@@ -1,3 +1,4 @@
+import { comboboxValueStyles } from "./combobox-value.stylex.js";
 import { Combobox } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/combobox/combobox-value.d.ts
@@ -5,6 +6,5 @@ interface ComboboxValueProps extends Combobox.Value.Props {
   className?: string;
 }
 declare function ComboboxValue(props: ComboboxValueProps): JSX.Element;
-declare const comboboxValueVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ComboboxValue, ComboboxValueProps, comboboxValueVariants };
+export { ComboboxValue, ComboboxValueProps, comboboxValueStyles };

package/dist/components/combobox/combobox-value.js

@@ -1,14 +1,13 @@
-import combobox_value_module_default from "./combobox-value.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { comboboxValueStyles } from "./combobox-value.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 //#region src/components/combobox/combobox-value.tsx
 function ComboboxValue(props) {
 	const { children = void 0, className: customClassName = "", placeholder = void 0, ...rest } = props;
-	const combinedClassName = comboboxValueVariants({ className: customClassName });
 	const resolvedChildren = typeof children === "function" ? (selectedValue) => (selectedValue ?? void 0) === void 0 ? placeholder : children(selectedValue) : children;
 	return /* @__PURE__ */ jsx("div", {
-		className: combinedClassName,
+		className: cn(sx(comboboxValueStyles.base), customClassName),
 		"data-slot": "combobox-value",
 		children: /* @__PURE__ */ jsx(Combobox.Value, {
 			placeholder,
@@ -17,6 +16,5 @@ function ComboboxValue(props) {
 		})
 	});
 }
-const comboboxValueVariants = cva(combobox_value_module_default.base);
 //#endregion
-export { ComboboxValue, comboboxValueVariants };
+export { ComboboxValue, comboboxValueStyles };

package/dist/components/combobox/combobox-value.stylex.d.ts

@@ -0,0 +1,14 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/combobox/combobox-value.stylex.d.ts
+declare const comboboxValueStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-primary)" | "var(--color-gray-9)">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+    readonly overflowX: stylex.StyleXClassNameFor<"overflowX", "hidden">;
+    readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+    readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+  }>;
+}>;
+//#endregion
+export { comboboxValueStyles };

package/dist/components/combobox/combobox-value.stylex.js

@@ -0,0 +1,12 @@
+//#region src/components/combobox/combobox-value.stylex.ts
+const comboboxValueStyles = { base: {
+	kMwMTN: "x1tgivj0 xn64az2",
+	kGuDYH: "xif65rj",
+	k63SB2: "x10p5zqr",
+	kXHlph: "x6ikm8r",
+	kg5iWk: "xlyipyv",
+	khDVqt: "xuxw1ft",
+	$$css: true
+} };
+//#endregion
+export { comboboxValueStyles };

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

@@ -1,17 +1,15 @@
-import dialog_responsive_backdrop_module_default from "./dialog-responsive-backdrop.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { dialogResponsiveBackdropStyles } from "./dialog-responsive-backdrop.stylex.js";
 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,
+		className: cn(sx(dialogResponsiveBackdropStyles.base), customClassName),
 		"data-slot": "dialog-responsive-backdrop",
 		...rest
 	});
 }
-const dialogResponsiveBackdropVariants = cva(dialog_responsive_backdrop_module_default.base);
 //#endregion
-export { DialogResponsiveBackdrop, dialogResponsiveBackdropVariants };
+export { DialogResponsiveBackdrop };

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

@@ -0,0 +1,14 @@
+//#region src/components/dialog-responsive/dialog-responsive-backdrop.stylex.ts
+const dialogResponsiveBackdropStyles = { base: {
+	"--backdrop-opacity": "x10t59f0",
+	kWkggS: "x42x0ya",
+	kpwlN0: "x10a8y8t",
+	kSiTet: "x1pimrze x1b866l",
+	kjBf7l: "x1luwoo2",
+	kVAEAm: "xixxii4",
+	kIyJzY: "x10t6uq9 xm69ghq xx6bhzk",
+	k1ekBW: "x19991ni",
+	$$css: true
+} };
+//#endregion
+export { dialogResponsiveBackdropStyles };

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

@@ -1,16 +1,14 @@
-import dialog_responsive_bar_module_default from "./dialog-responsive-bar.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { dialogResponsiveBarStyles } from "./dialog-responsive-bar.stylex.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/dialog-responsive/dialog-responsive-bar.tsx
 function DialogResponsiveBar(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = dialogResponsiveBarVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx("div", {
-		className: combinedClassName,
+		className: cn(sx(dialogResponsiveBarStyles.base), customClassName),
 		"data-slot": "dialog-responsive-bar",
 		...rest
 	});
 }
-const dialogResponsiveBarVariants = cva(dialog_responsive_bar_module_default.base);
 //#endregion
-export { DialogResponsiveBar, dialogResponsiveBarVariants };
+export { DialogResponsiveBar };

package/dist/components/dialog-responsive/dialog-responsive-bar.stylex.js

@@ -0,0 +1,13 @@
+//#region src/components/dialog-responsive/dialog-responsive-bar.stylex.ts
+const dialogResponsiveBarStyles = { base: {
+	kWkggS: "x1tcrco7",
+	kaIpWk: "x10hpsqq",
+	k1xSpc: "x1s85apg xfsj286",
+	kZKoxP: "xqu0tyb",
+	kqGvvJ: "x1twdi5u",
+	kUOVxO: "xvueqy4",
+	kzqmXN: "x1useyqa",
+	$$css: true
+} };
+//#endregion
+export { dialogResponsiveBarStyles };

package/dist/components/dialog-responsive/dialog-responsive-popup.d.ts

@@ -1,8 +1,8 @@
+import { dialogResponsivePopupStyles } from "./dialog-responsive-popup.stylex.js";
 import { Drawer } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/dialog-responsive/dialog-responsive-popup.d.ts
 interface DialogResponsivePopupProps extends Drawer.Popup.Props {}
 declare function DialogResponsivePopup(props: DialogResponsivePopupProps): JSX.Element;
-declare const dialogResponsivePopupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { DialogResponsivePopup, DialogResponsivePopupProps, dialogResponsivePopupVariants };
+export { DialogResponsivePopup, DialogResponsivePopupProps, dialogResponsivePopupStyles };

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

@@ -1,22 +1,20 @@
+import { cn, sx } from "../cn.js";
 import { DialogResponsiveBackdrop } from "./dialog-responsive-backdrop.js";
 import { DialogResponsiveBar } from "./dialog-responsive-bar.js";
+import { dialogResponsivePopupStyles } from "./dialog-responsive-popup.stylex.js";
 import { DialogResponsivePortal } from "./dialog-responsive-portal.js";
 import { DialogResponsiveViewport } from "./dialog-responsive-viewport.js";
-import dialog_responsive_popup_module_default from "./dialog-responsive-popup.module.js";
-import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog-responsive/dialog-responsive-popup.tsx
 function DialogResponsivePopup(props) {
 	const { children, className: customClassName = "", ...rest } = props;
-	const combinedClassName = dialogResponsivePopupVariants({ className: customClassName });
 	return /* @__PURE__ */ jsxs(DialogResponsivePortal, { children: [/* @__PURE__ */ jsx(DialogResponsiveBackdrop, {}), /* @__PURE__ */ jsx(DialogResponsiveViewport, { children: /* @__PURE__ */ jsxs(Drawer.Popup, {
-		className: combinedClassName,
+		className: cn(sx(dialogResponsivePopupStyles.base), customClassName),
 		"data-slot": "dialog-responsive-popup",
 		...rest,
 		children: [/* @__PURE__ */ jsx(DialogResponsiveBar, {}), children]
 	}) })] });
 }
-const dialogResponsivePopupVariants = cva(dialog_responsive_popup_module_default.base);
 //#endregion
-export { DialogResponsivePopup, dialogResponsivePopupVariants };
+export { DialogResponsivePopup, dialogResponsivePopupStyles };

package/dist/components/dialog-responsive/dialog-responsive-popup.stylex.d.ts

@@ -0,0 +1,32 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/dialog-responsive/dialog-responsive-popup.stylex.d.ts
+declare const dialogResponsivePopupStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly "--radius-mobile": stylex.StyleXClassNameFor<"--radius-mobile", "16px" | "24px">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-gray-1)">;
+    readonly borderBottomLeftRadius: stylex.StyleXClassNameFor<"borderBottomLeftRadius", 0 | 16>;
+    readonly borderBottomRightRadius: stylex.StyleXClassNameFor<"borderBottomRightRadius", 0 | 16>;
+    readonly borderTopLeftRadius: stylex.StyleXClassNameFor<"borderTopLeftRadius", 16 | "var(--radius-mobile)">;
+    readonly borderTopRightRadius: stylex.StyleXClassNameFor<"borderTopRightRadius", 16 | "var(--radius-mobile)">;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "auto">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+    readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", 640>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1>;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-primary-9)">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", -4>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | 2>;
+    readonly padding: stylex.StyleXClassNameFor<"padding", 16>;
+    readonly paddingTop: stylex.StyleXClassNameFor<"paddingTop", 0 | 16>;
+    readonly transform: stylex.StyleXClassNameFor<"transform", "none" | "scale(0.975)" | "scale(1) translateY(100%)" | "translateY(var(--drawer-swipe-movement-y))">;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms" | "calc(var(--drawer-swipe-strength) * 300ms)" | "450ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "transform" | "opacity, transform">;
+    readonly transitionTimingFunction: stylex.StyleXClassNameFor<"transitionTimingFunction", "ease" | "cubic-bezier(0.32, 0.72, 0, 1)">;
+    readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "auto" | "none">;
+    readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+    readonly willChange: stylex.StyleXClassNameFor<"willChange", "opacity, transform">;
+  }>;
+}>;
+//#endregion
+export { dialogResponsivePopupStyles };

package/dist/components/dialog-responsive/dialog-responsive-popup.stylex.js

@@ -0,0 +1,30 @@
+//#region src/components/dialog-responsive/dialog-responsive-popup.stylex.ts
+const dialogResponsivePopupStyles = { base: {
+	"--radius-mobile": "x1kpxz5j xlj1bto",
+	kWkggS: "xm8sm7k",
+	kqGeR4: "x17sffzf x1lclwwd",
+	kYm2EN: "xve69zf xgrp7ii",
+	kIxVMA: "xtzlleu x1pwg7sp",
+	ksF3WI: "x34fko1 x18pojzy",
+	kkrTdU: "x1sqbtui",
+	k1xSpc: "x78zum5",
+	kXwgrk: "xdt5ytf",
+	ks0D6T: "x11gisft",
+	kSiTet: "x1pimrze x1hc1fzr xf275dk xpvzxny",
+	kjBf7l: "x1luwoo2",
+	kInvED: "xr2mjdv",
+	k3XXqK: "xaatb59",
+	kMeerF: "x784prv x1k57tk5",
+	kmVPX3: "x1tamke2",
+	kLKAdn: "xyamay9 x1vy0343",
+	k3aq6I: "x1t4ihx1 x1c071of x1snmyix x1u4bqw3",
+	kIyJzY: "xx6bhzk x1ty2x96 xan356u",
+	k1ekBW: "x6o7n8i x1lnlnex",
+	kAMwcw: "xwji4o3 xxexonw",
+	kfSwDN: "xk78c8h x1kxipp6",
+	kzqmXN: "xh8yej3",
+	k6sLGO: "x6my1t9",
+	$$css: true
+} };
+//#endregion
+export { dialogResponsivePopupStyles };

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

@@ -1,17 +1,15 @@
-import dialog_responsive_portal_module_default from "./dialog-responsive-portal.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { dialogResponsivePortalStyles } from "./dialog-responsive-portal.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog-responsive/dialog-responsive-portal.tsx
 function DialogResponsivePortal(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = dialogResponsivePortalVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Drawer.Portal, {
-		className: combinedClassName,
+		className: cn(sx(dialogResponsivePortalStyles.base), customClassName),
 		"data-slot": "dialog-responsive-portal",
 		...rest
 	});
 }
-const dialogResponsivePortalVariants = cva(dialog_responsive_portal_module_default.base);
 //#endregion
-export { DialogResponsivePortal, dialogResponsivePortalVariants };
+export { DialogResponsivePortal };

package/dist/components/dialog-responsive/dialog-responsive-portal.stylex.js

@@ -0,0 +1,9 @@
+//#region src/components/dialog-responsive/dialog-responsive-portal.stylex.ts
+const dialogResponsivePortalStyles = { base: {
+	kHBbk8: "xc8icb0",
+	kVAEAm: "x1n2onr6",
+	kY2c9j: "x68pp3s",
+	$$css: true
+} };
+//#endregion
+export { dialogResponsivePortalStyles };

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

@@ -1,17 +1,15 @@
-import dialog_responsive_viewport_module_default from "./dialog-responsive-viewport.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { dialogResponsiveViewportStyles } from "./dialog-responsive-viewport.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react";
 //#region src/components/dialog-responsive/dialog-responsive-viewport.tsx
 function DialogResponsiveViewport(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = dialogResponsiveViewportVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(Drawer.Viewport, {
-		className: combinedClassName,
+		className: cn(sx(dialogResponsiveViewportStyles.base), customClassName),
 		"data-slot": "dialog-responsive-viewport",
 		...rest
 	});
 }
-const dialogResponsiveViewportVariants = cva(dialog_responsive_viewport_module_default.base);
 //#endregion
-export { DialogResponsiveViewport, dialogResponsiveViewportVariants };
+export { DialogResponsiveViewport };

package/dist/components/dialog-responsive/dialog-responsive-viewport.stylex.js

@@ -0,0 +1,13 @@
+//#region src/components/dialog-responsive/dialog-responsive-viewport.stylex.ts
+const dialogResponsiveViewportStyles = { base: {
+	kGNEyG: "x1yy6ivq x13k7z1v",
+	kkrTdU: "x1ypdohk",
+	k1xSpc: "x78zum5",
+	kpwlN0: "x10a8y8t",
+	kjj79g: "xej7fhh",
+	kmVPX3: "xggk2y7 x16g1wpl",
+	kVAEAm: "xixxii4",
+	$$css: true
+} };
+//#endregion
+export { dialogResponsiveViewportStyles };