@nattstack/ui 0.0.107 → 0.1.1

package/README.md

@@ -1,6 +1,6 @@
 # @nattstack/ui
 
-A collection of reusable React components built with Base UI, TypeScript, and CSS Modules.
+A collection of reusable React components built with Base UI and StyleX.
 
 ## Links
 

package/dist/baseline/index.css

@@ -29,13 +29,17 @@
 html {
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
-  color-scheme: light dark;
+  color-scheme: light;
   scrollbar-color: var(--color-gray-6) transparent;
   scrollbar-width: thin;
   text-size-adjust: none;
   touch-action: manipulation;
 }
 
+html.dark {
+  color-scheme: dark;
+}
+
 /*
     Base typography and theme tokens
     - Improve font rendering

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

@@ -1,13 +1,28 @@
-import button_spinner_module_default from "./button-spinner.module.js";
+import { cn } from "../cn.js";
+import { buttonSpinnerStyles } from "./button-spinner.stylex.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/button/button-spinner.tsx
 const SIZE = 18;
+const BAR_STYLES = [
+	buttonSpinnerStyles[1],
+	buttonSpinnerStyles[2],
+	buttonSpinnerStyles[3],
+	buttonSpinnerStyles[4],
+	buttonSpinnerStyles[5],
+	buttonSpinnerStyles[6],
+	buttonSpinnerStyles[7],
+	buttonSpinnerStyles[8],
+	buttonSpinnerStyles[9],
+	buttonSpinnerStyles[10],
+	buttonSpinnerStyles[11],
+	buttonSpinnerStyles[12]
+];
 function ButtonSpinner() {
 	return /* @__PURE__ */ jsx("div", {
-		className: button_spinner_module_default.base,
-		"data-slot": "button-spinner",
+		className: cn(buttonSpinnerStyles.base),
+		"data-component": "button-spinner",
 		style: { "--size": `${SIZE}px` },
-		children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsx("div", {}, index))
+		children: BAR_STYLES.map((barStyle, index) => /* @__PURE__ */ jsx("div", { className: cn(buttonSpinnerStyles.bar, barStyle) }, index))
 	});
 }
 //#endregion

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

@@ -0,0 +1,96 @@
+//#region src/components/button/button-spinner.stylex.ts
+const buttonSpinnerStyles = {
+	"1": {
+		kSiTet: "x1hc1fzr",
+		k4XH5M: "x1gcftaf",
+		$$css: true
+	},
+	"2": {
+		kSiTet: "x1skojfp",
+		k4XH5M: "xqd20pc",
+		$$css: true
+	},
+	"3": {
+		kSiTet: "xiiclqw",
+		k4XH5M: "xhmk0vv",
+		$$css: true
+	},
+	"4": {
+		kSiTet: "x11t8jnp",
+		k4XH5M: "xq77vm1",
+		$$css: true
+	},
+	"5": {
+		kSiTet: "x1ks1olk",
+		k4XH5M: "x1yqfaqn",
+		$$css: true
+	},
+	"6": {
+		kSiTet: "x8qkkdt",
+		k4XH5M: "x1rtxy7",
+		$$css: true
+	},
+	"7": {
+		kSiTet: "xwq05k6",
+		k4XH5M: "x1qul50q",
+		$$css: true
+	},
+	"8": {
+		kSiTet: "x1sfcrbg",
+		k4XH5M: "x5f4xin",
+		$$css: true
+	},
+	"9": {
+		kSiTet: "xti2d7y",
+		k4XH5M: "x13zb3im",
+		$$css: true
+	},
+	"10": {
+		kSiTet: "x1b0snh4",
+		k4XH5M: "x7lonkb",
+		$$css: true
+	},
+	"11": {
+		kSiTet: "xvpkmg4",
+		k4XH5M: "xyp7w1s",
+		$$css: true
+	},
+	"12": {
+		kSiTet: "x1xyvc85",
+		k4XH5M: "xggx6ht",
+		$$css: true
+	},
+	bar: {
+		ks3ayO: "x1hfhjwi",
+		kUfP38: "x1f3l70z",
+		k5JduY: "x1s928wv",
+		k4zj60: "x1wsn0xg",
+		kwXMNM: "x1j6awrg",
+		kLxBhq: "xnbfe2x",
+		kkgrvl: "xdnmdmm",
+		kZKoxP: "x13gmgbj",
+		kfzvcC: "x47corl",
+		kVAEAm: "x10l6tqk",
+		kCIrl2: "x3m8u43",
+		k87sOh: "xwa60dl",
+		k3nNDw: "x1kol6zn",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "xfagghw",
+		kIY38u: "x3sa99s",
+		kzqmXN: "xtnyu7h",
+		$$css: true
+	},
+	base: {
+		k44tkh: "x1q3qbx4",
+		ko0y90: "xa4qsjk",
+		kKVMdj: "x1m7ugx0",
+		kyAemX: "xbv57ra",
+		kZKoxP: "x188dgw3",
+		kVAEAm: "x1n2onr6",
+		km0Bbg: "xngwomw",
+		kzqmXN: "x1fjlwjz",
+		$$css: true
+	}
+};
+//#endregion
+export { buttonSpinnerStyles };

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

@@ -1,25 +1,17 @@
-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"> {
+interface ButtonProps extends Omit<ComponentProps<"button">, "children"> {
+  fullWidth?: boolean;
   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"];
+  label?: string;
+  loading?: boolean;
+  rounded?: boolean;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
 }
+type ButtonSize = 32 | 36 | 40 | 44 | 48;
+type ButtonVariant = "ghost" | "primary" | "secondary";
 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 };
+export { Button, ButtonProps, ButtonSize, ButtonVariant };

package/dist/components/button/button.js

@@ -1,55 +1,23 @@
+import { buttonStyles, buttonStylesBy } from "./button.stylex.js";
+import { cn } from "../cn.js";
 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;
+	const { className = "", disabled = false, fullWidth = false, iconEnd = "", iconStart = "", label = "", loading = false, rounded = false, size = 40, variant = "primary", ...rest } = props;
+	const combinedClassName = cn(buttonStyles.base, buttonStylesBy.rounded[rounded ? "full" : "base"][size], buttonStylesBy.size[size], buttonStylesBy.variant[variant], buttonStylesBy.width[fullWidth ? "full" : "base"], (disabled || loading) && buttonStyles.disabled, className);
 	return /* @__PURE__ */ jsxs("button", {
-		className: button({
-			className,
-			isDisabled,
-			isFullWidth,
-			isLoading,
-			isRounded,
-			size,
-			variant
-		}),
-		"data-slot": "button",
-		disabled: isDisabled || isLoading,
-		type: "button",
+		className: combinedClassName,
+		"data-component": "button",
+		disabled: disabled || loading,
 		...rest,
 		children: [
-			isLoading && /* @__PURE__ */ jsx(ButtonSpinner, {}),
-			iconStart,
-			label !== "" && /* @__PURE__ */ jsx("span", { children: label }),
+			!loading && iconStart,
+			loading && /* @__PURE__ */ jsx(ButtonSpinner, {}),
+			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 };
+export { Button };

package/dist/components/button/button.stylex.js

@@ -0,0 +1,159 @@
+//#region src/components/button/button.stylex.ts
+const buttonStyles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		k1C7PZ: "xfex06f",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kGuDYH: "xif65rj",
+		k63SB2: "x10p5zqr",
+		kjj79g: "xl56j7k",
+		kjBf7l: "xfcj4rt x1uczgqu",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		kVQacm: "xb3r6kr",
+		kVAEAm: "x1n2onr6",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x101bfz1",
+		kIY38u: "x1avgydi x1qeszuu",
+		kfSwDN: "x87ps6o",
+		$$css: true
+	},
+	disabled: {
+		kkrTdU: "x1h6gzvc",
+		kSiTet: "xbyyjgo",
+		$$css: true
+	},
+	rounded_base_32: {
+		kaIpWk: "xur7f20",
+		kg3NbH: "xaope02",
+		$$css: true
+	},
+	rounded_base_36: {
+		kaIpWk: "xhpnuu7",
+		kg3NbH: "xqin4a2",
+		$$css: true
+	},
+	rounded_base_40: {
+		kaIpWk: "x1q4ynmn",
+		kg3NbH: "x1hr3lfm",
+		$$css: true
+	},
+	rounded_base_44: {
+		kaIpWk: "x1ctf4ec",
+		kg3NbH: "x12j899k",
+		$$css: true
+	},
+	rounded_base_48: {
+		kaIpWk: "x4pepcl",
+		kg3NbH: "x17qtykl",
+		$$css: true
+	},
+	rounded_full_32: {
+		kaIpWk: "xgqmno8",
+		kg3NbH: "xaope02",
+		$$css: true
+	},
+	rounded_full_36: {
+		kaIpWk: "xugzpu4",
+		kg3NbH: "xelufkg",
+		$$css: true
+	},
+	rounded_full_40: {
+		kaIpWk: "x1m3ak92",
+		kg3NbH: "x17qtykl",
+		$$css: true
+	},
+	rounded_full_44: {
+		kaIpWk: "x13pz1uv",
+		kg3NbH: "x16l46lf",
+		$$css: true
+	},
+	rounded_full_48: {
+		kaIpWk: "x1khhgft",
+		kg3NbH: "x1pbfunf",
+		$$css: true
+	},
+	size_32: {
+		kZKoxP: "x10w6t97",
+		$$css: true
+	},
+	size_36: {
+		kZKoxP: "xc9qbxq",
+		$$css: true
+	},
+	size_40: {
+		kZKoxP: "x1vqgdyp",
+		$$css: true
+	},
+	size_44: {
+		kZKoxP: "xn3w4p2",
+		$$css: true
+	},
+	size_48: {
+		kZKoxP: "xsdox4t",
+		$$css: true
+	},
+	variant_ghost: {
+		kWkggS: "x1pflddp xjbqb8w",
+		kMwMTN: "x197k1c5",
+		$$css: true
+	},
+	variant_primary: {
+		kWkggS: "xalcron x1escjlh",
+		kMwMTN: "xf4b43d",
+		$$css: true
+	},
+	variant_secondary: {
+		kWkggS: "x1pflddp x1h73wb5",
+		kGVxlE: "x7auhu6 x1er153n",
+		kMwMTN: "x197k1c5",
+		$$css: true
+	},
+	width_base: {
+		kzqmXN: "xeq5yr9",
+		$$css: true
+	},
+	width_full: {
+		kzqmXN: "x1brm51p",
+		$$css: true
+	}
+};
+const buttonStylesBy = {
+	rounded: {
+		base: {
+			32: buttonStyles.rounded_base_32,
+			36: buttonStyles.rounded_base_36,
+			40: buttonStyles.rounded_base_40,
+			44: buttonStyles.rounded_base_44,
+			48: buttonStyles.rounded_base_48
+		},
+		full: {
+			32: buttonStyles.rounded_full_32,
+			36: buttonStyles.rounded_full_36,
+			40: buttonStyles.rounded_full_40,
+			44: buttonStyles.rounded_full_44,
+			48: buttonStyles.rounded_full_48
+		}
+	},
+	size: {
+		32: buttonStyles.size_32,
+		36: buttonStyles.size_36,
+		40: buttonStyles.size_40,
+		44: buttonStyles.size_44,
+		48: buttonStyles.size_48
+	},
+	variant: {
+		ghost: buttonStyles.variant_ghost,
+		primary: buttonStyles.variant_primary,
+		secondary: buttonStyles.variant_secondary
+	},
+	width: {
+		base: buttonStyles.width_base,
+		full: buttonStyles.width_full
+	}
+};
+//#endregion
+export { buttonStyles, buttonStylesBy };

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

@@ -1,17 +1,16 @@
-import { button } from "../button/button.js";
-import { VariantProps } from "class-variance-authority";
+import { ButtonSize, ButtonVariant } from "../button/button.js";
 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;
+  fullWidth?: boolean;
   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"];
+  label?: string;
+  rounded?: boolean;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
 }
 declare function ButtonLink<ComponentType extends ElementType = "a">(props: ButtonLinkProps<ComponentType>): JSX.Element;
 //#endregion

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

@@ -1,21 +1,17 @@
-import { button } from "../button/button.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { buttonStyles, buttonStylesBy } from "../button/button.stylex.js";
+import { cn } from "../cn.js";
+import { 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;
+	const { as: Component = "a", className = "", fullWidth = false, iconEnd = "", iconStart = "", label = "", rounded = false, size = 40, variant = "primary", ...rest } = props;
+	const combinedClassName = cn(buttonStyles.base, buttonStylesBy.rounded[rounded ? "full" : "base"][size], buttonStylesBy.size[size], buttonStylesBy.variant[variant], buttonStylesBy.width[fullWidth ? "full" : "base"], className);
 	return /* @__PURE__ */ jsxs(Component, {
-		className: button({
-			className,
-			isFullWidth,
-			isRounded,
-			size,
-			variant
-		}),
-		"data-slot": "button-link",
+		className: combinedClassName,
+		"data-component": "button-link",
 		...rest,
 		children: [
 			iconStart,
-			label !== "" && /* @__PURE__ */ jsx("span", { children: label }),
+			label,
 			iconEnd
 		]
 	});

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

@@ -1,9 +1,11 @@
+import { cn } from "../cn.js";
+import { checkboxStyles } from "./checkbox.stylex.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/checkbox/checkbox-icon.tsx
 function CheckboxIcon(props) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx("svg", {
-		"data-slot": "checkbox-icon",
+		"data-component": "checkbox-icon",
 		fill: "none",
 		height: "24",
 		viewBox: "0 0 24 24",
@@ -11,11 +13,10 @@ function CheckboxIcon(props) {
 		xmlns: "http://www.w3.org/2000/svg",
 		...rest,
 		children: /* @__PURE__ */ jsx("path", {
+			className: cn(checkboxStyles.icon_path),
 			d: "M5 13.875L9.2 18L19 7",
-			stroke: "black",
 			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "1.5"
+			strokeLinejoin: "round"
 		})
 	});
 }

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

@@ -3,6 +3,5 @@ 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 };
+export { Checkbox$1 as Checkbox, CheckboxProps };

package/dist/components/checkbox/checkbox.js

@@ -1,22 +1,21 @@
+import { cn } from "../cn.js";
+import { checkboxStyles } from "./checkbox.stylex.js";
 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 });
+	const { children = void 0, className = "", ...rest } = props;
+	const combinedClassName = cn(checkboxStyles.base, className);
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		className: combinedClassName,
-		"data-slot": "checkbox",
+		"data-component": "checkbox",
 		...rest,
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
-			className: checkbox_module_default.indicator,
-			children: children ?? /* @__PURE__ */ jsx(CheckboxIcon, { className: checkbox_module_default.icon })
+			className: cn(checkboxStyles.indicator),
+			children: children ?? /* @__PURE__ */ jsx(CheckboxIcon, { className: cn(checkboxStyles.icon) })
 		})
 	});
 }
-const checkboxVariants = cva(checkbox_module_default.base);
 //#endregion
-export { Checkbox$1 as Checkbox, checkboxVariants };
+export { Checkbox$1 as Checkbox };

package/dist/components/checkbox/checkbox.stylex.js

@@ -0,0 +1,43 @@
+//#region src/components/checkbox/checkbox.stylex.ts
+const checkboxStyles = {
+	base: {
+		"--size": "x1fwrj7o",
+		kGNEyG: "x6s0dn4",
+		kWkggS: "x12icss0 x1qny0gl x1h73wb5",
+		kVAM5u: "x7n6cpb x81i4et x14i3s5s",
+		kaIpWk: "x12oqio5",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kZKoxP: "x188dgw3",
+		kjj79g: "xl56j7k",
+		kjBf7l: "x1du7r5n",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x784prv x1k57tk5",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "xts7igz",
+		kzqmXN: "x1fjlwjz",
+		$$css: true
+	},
+	icon: {
+		"--size": "x14kqwz2",
+		kZKoxP: "x188dgw3",
+		kzqmXN: "x1fjlwjz",
+		$$css: true
+	},
+	icon_path: {
+		kjVXCG: "xqvyd8v",
+		kfJifR: "xqjr0vm",
+		$$css: true
+	},
+	indicator: {
+		kSiTet: "xyn2shw xg01cxk",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x19991ni",
+		$$css: true
+	}
+};
+//#endregion
+export { checkboxStyles };

package/dist/components/cn.js

@@ -0,0 +1,20 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/cn.ts
+/**
+* Compile StyleX styles and join class names, dropping empty values.
+*
+* `cn` is short for class names.
+*
+* @param {unknown[]} values - StyleX styles, class strings, and optional empty values to ignore.
+* @returns {string} A single space-separated class string.
+*/
+function cn(...values) {
+	const stylexStyles = [];
+	const classNames = [];
+	for (const value of values) if (typeof value === "string") {
+		if (value !== "") classNames.push(value);
+	} else if (typeof value !== "function") stylexStyles.push(value);
+	return [stylexStyles.length === 0 ? "" : stylex.props(...stylexStyles).className ?? "", ...classNames].filter((value) => value !== "").join(" ");
+}
+//#endregion
+export { cn };

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

@@ -11,6 +11,5 @@ interface ColumnInternalProps {
   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 };
+export { Column, ColumnProps };

package/dist/components/column/column.js

@@ -1,11 +1,10 @@
-import column_module_default from "./column.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { columnStyles } from "./column.stylex.js";
 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;
-	const Component = as;
-	const combinedClassName = columnVariants({ className: customClassName });
+	const { alignItems = void 0, as = "div", className = "", flexWrap = void 0, gap = void 0, gapX = void 0, gapY = void 0, justifyContent = void 0, style: customStyle, ...rest } = props;
+	const combinedClassName = cn(columnStyles.base, className);
 	const combinedStyle = {
 		...customStyle,
 		...gap === void 0 ? {} : { gap },
@@ -15,13 +14,12 @@ function Column(props) {
 		...alignItems === void 0 ? {} : { alignItems },
 		...justifyContent === void 0 ? {} : { justifyContent }
 	};
-	return createElement(Component, {
+	return createElement(as, {
 		className: combinedClassName,
-		"data-slot": "column",
+		"data-component": "column",
 		style: combinedStyle,
 		...rest
 	});
 }
-const columnVariants = cva(column_module_default.base);
 //#endregion
-export { Column, columnVariants };
+export { Column };

package/dist/components/column/column.stylex.js

@@ -0,0 +1,8 @@
+//#region src/components/column/column.stylex.ts
+const columnStyles = { base: {
+	k1xSpc: "x78zum5",
+	kXwgrk: "xdt5ytf",
+	$$css: true
+} };
+//#endregion
+export { columnStyles };

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

@@ -6,6 +6,5 @@ interface ComboboxContentProps extends Omit<Combobox.Popup.Props, "className">,
   container?: Combobox.Portal.Props["container"];
 }
 declare function ComboboxContent(props: ComboboxContentProps): JSX.Element;
-declare const comboboxContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ComboboxContent, ComboboxContentProps, comboboxContentVariants };
+export { ComboboxContent, ComboboxContentProps };