@nattstack/ui 0.0.107 → 0.1.0

package/dist/components/menu/menu-submenu-trigger.d.ts

@@ -1,11 +1,10 @@
+import { menuSubmenuTriggerStyles } from "./menu-submenu-trigger.stylex.js";
 import { Menu } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/menu/menu-submenu-trigger.d.ts
-interface MenuSubmenuTriggerProps extends Omit<Menu.SubmenuTrigger.Props, "className" | "disabled"> {
+interface MenuSubmenuTriggerProps extends Omit<Menu.SubmenuTrigger.Props, "className"> {
   className?: string;
-  isDisabled?: Menu.SubmenuTrigger.Props["disabled"];
 }
 declare function MenuSubmenuTrigger(props: MenuSubmenuTriggerProps): JSX.Element;
-declare const menuSubmenuTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { MenuSubmenuTrigger, MenuSubmenuTriggerProps, menuSubmenuTriggerVariants };
+export { MenuSubmenuTrigger, MenuSubmenuTriggerProps, menuSubmenuTriggerStyles };

package/dist/components/menu/menu-submenu-trigger.js

@@ -1,20 +1,18 @@
-import picker_item_module_default from "../picker/picker-item.module.js";
-import menu_item_module_default from "./menu-item.module.js";
-import menu_submenu_trigger_module_default from "./menu-submenu-trigger.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { pickerItemStyles } from "../picker/picker-item.stylex.js";
+import { menuItemStyles } from "./menu-item.stylex.js";
+import { menuSubmenuTriggerStyles } from "./menu-submenu-trigger.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react";
 //#region src/components/menu/menu-submenu-trigger.tsx
 function MenuSubmenuTrigger(props) {
-	const { children, className: customClassName = "", isDisabled = false, ...rest } = props;
-	const combinedClassName = menuSubmenuTriggerVariants({ className: customClassName });
+	const { children, className: customClassName = "", ...rest } = props;
 	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
-		className: combinedClassName,
+		className: cn(sx(pickerItemStyles.base, menuItemStyles.base, menuSubmenuTriggerStyles.base), customClassName),
 		"data-slot": "menu-submenu-trigger",
-		disabled: isDisabled,
 		...rest,
 		children: [children, /* @__PURE__ */ jsx("span", {
-			className: menu_submenu_trigger_module_default.icon,
+			className: sx(menuSubmenuTriggerStyles.icon),
 			"data-slot": "menu-submenu-trigger-icon",
 			children: /* @__PURE__ */ jsx("svg", {
 				height: "14px",
@@ -35,10 +33,5 @@ function MenuSubmenuTrigger(props) {
 		})]
 	});
 }
-const menuSubmenuTriggerVariants = cva([
-	picker_item_module_default.base,
-	menu_item_module_default.base,
-	menu_submenu_trigger_module_default.base
-]);
 //#endregion
-export { MenuSubmenuTrigger, menuSubmenuTriggerVariants };
+export { MenuSubmenuTrigger, menuSubmenuTriggerStyles };

package/dist/components/menu/menu-submenu-trigger.stylex.d.ts

@@ -0,0 +1,19 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/menu/menu-submenu-trigger.stylex.d.ts
+declare const menuSubmenuTriggerStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent" | "var(--color-gray-3)">;
+  }>;
+  readonly icon: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-secondary)">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly height: stylex.StyleXClassNameFor<"height", 16>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly marginLeft: stylex.StyleXClassNameFor<"marginLeft", "auto">;
+    readonly width: stylex.StyleXClassNameFor<"width", 16>;
+  }>;
+}>;
+//#endregion
+export { menuSubmenuTriggerStyles };

package/dist/components/menu/menu-submenu-trigger.stylex.js

@@ -0,0 +1,20 @@
+//#region src/components/menu/menu-submenu-trigger.stylex.ts
+const menuSubmenuTriggerStyles = {
+	base: {
+		kWkggS: "xm4hijy xjbqb8w",
+		$$css: true
+	},
+	icon: {
+		kGNEyG: "x6s0dn4",
+		kMwMTN: "xv1l7n4",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kZKoxP: "xlup9mm",
+		kjj79g: "xl56j7k",
+		koQZXg: "x8x9d4c",
+		kzqmXN: "x1kky2od",
+		$$css: true
+	}
+};
+//#endregion
+export { menuSubmenuTriggerStyles };

package/dist/components/otp-field/otp-field-input.d.ts

@@ -1,8 +1,8 @@
+import { otpFieldInputStyles } from "./otp-field-input.stylex.js";
 import { OTPField } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/otp-field/otp-field-input.d.ts
 interface OTPFieldInputProps extends OTPField.Input.Props {}
 declare function OTPFieldInput(props: OTPFieldInputProps): JSX.Element;
-declare const otpFieldInputVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { OTPFieldInput, otpFieldInputVariants };
+export { OTPFieldInput, otpFieldInputStyles };

package/dist/components/otp-field/otp-field-input.js

@@ -1,17 +1,16 @@
-import otp_field_input_module_default from "./otp-field-input.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { otpFieldStyles } from "./otp-field.stylex.js";
+import { otpFieldInputStyles } from "./otp-field-input.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { OTPField } from "@base-ui/react";
 //#region src/components/otp-field/otp-field-input.tsx
 function OTPFieldInput(props) {
 	const { className: customClassName = "", ...rest } = props;
-	const combinedClassName = otpFieldInputVariants({ className: customClassName });
 	return /* @__PURE__ */ jsx(OTPField.Input, {
-		className: combinedClassName,
+		className: cn(sx(otpFieldInputStyles.base, otpFieldStyles.maskedInput), customClassName),
 		"data-slot": "otp-field-input",
 		...rest
 	});
 }
-const otpFieldInputVariants = cva(otp_field_input_module_default.base);
 //#endregion
-export { OTPFieldInput, otpFieldInputVariants };
+export { OTPFieldInput, otpFieldInputStyles };

package/dist/components/otp-field/otp-field-input.stylex.d.ts

@@ -0,0 +1,25 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/otp-field/otp-field-input.stylex.d.ts
+declare const otpFieldInputStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-gray-3)">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 14>;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "inset 0 0 0 1px var(--color-border)" | "inset 0 0 0 1px var(--color-gray-6)">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-primary)">;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "text" | "not-allowed">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 14>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+    readonly height: stylex.StyleXClassNameFor<"height", 48>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | 0.5>;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-outline)">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", -2>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | 2>;
+    readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "box-shadow">;
+    readonly width: stylex.StyleXClassNameFor<"width", 40>;
+  }>;
+}>;
+//#endregion
+export { otpFieldInputStyles };

package/dist/components/otp-field/otp-field-input.stylex.js

@@ -0,0 +1,23 @@
+//#region src/components/otp-field/otp-field-input.stylex.ts
+const otpFieldInputStyles = { base: {
+	kWkggS: "x2j0cto",
+	kaIpWk: "xixl9f9",
+	kGVxlE: "x1rlgnxn x1er153n",
+	kMwMTN: "x1tgivj0",
+	kkrTdU: "x1s07b3s x1ed109x",
+	kGuDYH: "xif65rj",
+	k63SB2: "x10p5zqr",
+	kZKoxP: "xsdox4t",
+	kSiTet: "xijokvz x1hc1fzr",
+	kjBf7l: "x43yjvr",
+	kInvED: "x2ssjo2",
+	k3XXqK: "xaatb59",
+	kMeerF: "x784prv x1k57tk5",
+	k9WMMc: "x2b8uid",
+	kIyJzY: "xx6bhzk",
+	k1ekBW: "xkdsq27",
+	kzqmXN: "x100vrsf",
+	$$css: true
+} };
+//#endregion
+export { otpFieldInputStyles };

package/dist/components/otp-field/otp-field.d.ts

@@ -1,13 +1,10 @@
+import { otpFieldStyles } from "./otp-field.stylex.js";
 import { OTPField } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/otp-field/otp-field.d.ts
-interface OTPFieldProps extends Omit<OTPField.Root.Props, "disabled"> {
-  isDisabled?: OTPField.Root.Props["disabled"];
-  isMasked?: OTPField.Root.Props["mask"];
+interface OTPFieldProps extends Omit<OTPField.Root.Props, "mask"> {
+  masked?: OTPField.Root.Props["mask"];
 }
 declare function OTPField$1(props: OTPFieldProps): JSX.Element;
-declare const otpFieldVariants: (props?: ({
-  isMasked?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
-export { OTPField$1 as OTPField, otpFieldVariants };
+export { OTPField$1 as OTPField, otpFieldStyles };

package/dist/components/otp-field/otp-field.js

@@ -1,28 +1,17 @@
-import otp_field_module_default from "./otp-field.module.js";
-import { cva } from "class-variance-authority";
+import { cn, sx } from "../cn.js";
+import { otpFieldStyles } from "./otp-field.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { OTPField } from "@base-ui/react";
 //#region src/components/otp-field/otp-field.tsx
 function OTPField$1(props) {
-	const { className: customClassName = "", isDisabled = false, isMasked = false, ...rest } = props;
-	const combinedClassName = otpFieldVariants({
-		className: customClassName,
-		isMasked
-	});
+	const { className: customClassName = "", masked = false, ...rest } = props;
 	return /* @__PURE__ */ jsx(OTPField.Root, {
-		className: combinedClassName,
+		className: cn(sx(otpFieldStyles.base), customClassName),
+		"data-is-masked": masked,
 		"data-slot": "otp-field",
-		disabled: isDisabled,
-		mask: isMasked,
+		mask: masked,
 		...rest
 	});
 }
-const otpFieldVariants = cva(otp_field_module_default.base, {
-	defaultVariants: { isMasked: false },
-	variants: { isMasked: {
-		false: "",
-		true: otp_field_module_default.masked
-	} }
-});
 //#endregion
-export { OTPField$1 as OTPField, otpFieldVariants };
+export { OTPField$1 as OTPField, otpFieldStyles };

package/dist/components/otp-field/otp-field.stylex.d.ts

@@ -0,0 +1,16 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/otp-field/otp-field.stylex.d.ts
+declare const otpFieldStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexWrap: stylex.StyleXClassNameFor<"flexWrap", "wrap">;
+    readonly gap: stylex.StyleXClassNameFor<"gap", 8>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly width: stylex.StyleXClassNameFor<"width", "fit-content">;
+  }>;
+  readonly maskedInput: Readonly<{
+    readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", "inherit" | "var(--font-code)">;
+  }>;
+}>;
+//#endregion
+export { otpFieldStyles };

package/dist/components/otp-field/otp-field.stylex.js

@@ -0,0 +1,17 @@
+//#region src/components/otp-field/otp-field.stylex.ts
+const otpFieldStyles = {
+	base: {
+		k1xSpc: "x78zum5",
+		kwnvtZ: "x1a02dak",
+		kOIVth: "x167g77z",
+		kjj79g: "xl56j7k",
+		kzqmXN: "xeq5yr9",
+		$$css: true
+	},
+	maskedInput: {
+		kMv6JI: "xjb2p0i x1iczwhp",
+		$$css: true
+	}
+};
+//#endregion
+export { otpFieldStyles };

package/dist/components/picker/picker-group.stylex.d.ts

@@ -0,0 +1,18 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/picker/picker-group.stylex.d.ts
+declare const pickerGroupStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+    readonly rowGap: stylex.StyleXClassNameFor<"rowGap", 2>;
+  }>;
+  readonly label: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-secondary)">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 12>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", "6px 4px">;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 12>;
+  }>;
+}>;
+//#endregion
+export { pickerGroupStyles };

package/dist/components/picker/picker-group.stylex.js

@@ -0,0 +1,19 @@
+//#region src/components/picker/picker-group.stylex.ts
+const pickerGroupStyles = {
+	base: {
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		khm7nJ: "x1dbijih",
+		$$css: true
+	},
+	label: {
+		kMwMTN: "xv1l7n4",
+		kGuDYH: "xfifm61",
+		k63SB2: "x10p5zqr",
+		k8WAf4: "xxzk6he",
+		kg3NbH: "xaope02",
+		$$css: true
+	}
+};
+//#endregion
+export { pickerGroupStyles };

package/dist/components/picker/picker-item.stylex.d.ts

@@ -0,0 +1,39 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/picker/picker-item.stylex.d.ts
+declare const pickerItemStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent" | "var(--color-gray-3)">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 8>;
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", 8>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly height: stylex.StyleXClassNameFor<"height", 36>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | 0.5>;
+    readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 12>;
+    readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+  }>;
+  readonly indicator: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-primary-9)">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly height: stylex.StyleXClassNameFor<"height", 16>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly marginLeft: stylex.StyleXClassNameFor<"marginLeft", "auto">;
+    readonly width: stylex.StyleXClassNameFor<"width", 16>;
+  }>;
+  readonly label: Readonly<{
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-primary)">;
+    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 { pickerItemStyles };

package/dist/components/picker/picker-item.stylex.js

@@ -0,0 +1,41 @@
+//#region src/components/picker/picker-item.stylex.ts
+const pickerItemStyles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "x1cgdd2a x160dr52 xjbqb8w",
+		kaIpWk: "xur7f20",
+		k1C7PZ: "xfex06f",
+		kkrTdU: "x5ezrf1 x1ypdohk",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kZKoxP: "xc9qbxq",
+		kSiTet: "xxh3kiz x1hc1fzr",
+		kI3sdo: "x1a2a7pz",
+		k8WAf4: "xt970qd",
+		kg3NbH: "xaope02",
+		kfSwDN: "x87ps6o",
+		$$css: true
+	},
+	indicator: {
+		kGNEyG: "x6s0dn4",
+		kMwMTN: "x9i09x5",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kZKoxP: "xlup9mm",
+		kjj79g: "xl56j7k",
+		koQZXg: "x8x9d4c",
+		kzqmXN: "x1kky2od",
+		$$css: true
+	},
+	label: {
+		kMwMTN: "x1tgivj0",
+		kGuDYH: "xif65rj",
+		k63SB2: "x10p5zqr",
+		kXHlph: "x6ikm8r",
+		kg5iWk: "xlyipyv",
+		khDVqt: "xuxw1ft",
+		$$css: true
+	}
+};
+//#endregion
+export { pickerItemStyles };

package/dist/components/picker/picker-list.stylex.js

@@ -0,0 +1,13 @@
+//#region src/components/picker/picker-list.stylex.ts
+const pickerListStyles = { base: {
+	k1xSpc: "x1vilw8v x78zum5",
+	kXwgrk: "xdt5ytf",
+	kORKVm: "x1odjw0f",
+	kZeWKH: "xish69e",
+	kmVPX3: "xfawy5m",
+	khm7nJ: "x1dbijih",
+	kcrMnD: "x1r1ic4w",
+	$$css: true
+} };
+//#endregion
+export { pickerListStyles };

package/dist/components/picker/picker-popup.stylex.d.ts

@@ -0,0 +1,36 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/picker/picker-popup.stylex.d.ts
+declare const pickerPopupStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-bg-shell-inner)">;
+    readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "var(--color-border)">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 12>;
+    readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+    readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "0 0.5px 0 color-mix(in oklab, black 3%, transparent), 0 36px 15px -4px color-mix(in oklab, black 1%, transparent), 0 20px 12px -3px color-mix(in oklab, black 3%, transparent), 0 9px 9px -2px color-mix(in oklab, black 4%, transparent), 0 2px 5px -1px color-mix(in oklab, black 5%, transparent)">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-text-primary)">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+    readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "min(var(--available-height), 480px)">;
+    readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "var(--available-width)">;
+    readonly minWidth: stylex.StyleXClassNameFor<"minWidth", "max(var(--anchor-width), 240px)">;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1>;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "var(--color-primary-9)">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", -2>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | 2>;
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    readonly transform: stylex.StyleXClassNameFor<"transform", "none" | "scale(0.975)" | "scale(0.975) translateY(-4px)" | "scale(0.975) translateX(-4px)" | "scale(0.975) translateX(4px)" | "scale(0.975) translateY(4px)">;
+    readonly transformOrigin: stylex.StyleXClassNameFor<"transformOrigin", "var(--transform-origin)">;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "opacity, transform">;
+    readonly width: stylex.StyleXClassNameFor<"width", "var(--anchor-width)">;
+    readonly willChange: stylex.StyleXClassNameFor<"willChange", "opacity, transform">;
+  }>;
+  readonly positioner: Readonly<{
+    readonly isolation: stylex.StyleXClassNameFor<"isolation", "isolate">;
+    readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 50>;
+  }>;
+}>;
+//#endregion
+export { pickerPopupStyles };

package/dist/components/picker/picker-popup.stylex.js

@@ -0,0 +1,37 @@
+//#region src/components/picker/picker-popup.stylex.ts
+const pickerPopupStyles = {
+	base: {
+		kWkggS: "x1h73wb5",
+		kVAM5u: "x14i3s5s",
+		kaIpWk: "x4pepcl",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		kGVxlE: "x1ikjq0b",
+		kMwMTN: "x1tgivj0",
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		kskxy: "xqldp2m",
+		ks0D6T: "x7k7lee",
+		k7Eaqz: "xz962wo",
+		kSiTet: "x1pimrze x1hc1fzr",
+		kjBf7l: "x1luwoo2",
+		kInvED: "x2ssjo2",
+		k3XXqK: "xaatb59",
+		kMeerF: "x784prv x1k57tk5",
+		kVQacm: "xb3r6kr",
+		k3aq6I: "x1t4ihx1 xmrwbtw x1fpexdu xaf6vq3 x1usa04o x1c071of",
+		k3nNDw: "xctpfpq",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x6o7n8i",
+		kzqmXN: "x1hhjr3y",
+		k6sLGO: "x6my1t9",
+		$$css: true
+	},
+	positioner: {
+		kHBbk8: "xc8icb0",
+		kY2c9j: "xa9119d",
+		$$css: true
+	}
+};
+//#endregion
+export { pickerPopupStyles };

package/dist/components/picker/picker-separator.stylex.d.ts

@@ -0,0 +1,13 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/picker/picker-separator.stylex.d.ts
+declare const pickerSeparatorStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-border)">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly height: stylex.StyleXClassNameFor<"height", 1>;
+    readonly marginBlock: stylex.StyleXClassNameFor<"marginBlock", 2>;
+    readonly marginInline: stylex.StyleXClassNameFor<"marginInline", 8>;
+  }>;
+}>;
+//#endregion
+export { pickerSeparatorStyles };

package/dist/components/picker/picker-separator.stylex.js

@@ -0,0 +1,11 @@
+//#region src/components/picker/picker-separator.stylex.ts
+const pickerSeparatorStyles = { base: {
+	kWkggS: "x1m4xfpy",
+	kmuXW: "x2lah0s",
+	kZKoxP: "xjm9jq1",
+	kqGvvJ: "x8q42hb",
+	kUOVxO: "xxbjj12",
+	$$css: true
+} };
+//#endregion
+export { pickerSeparatorStyles };

package/dist/components/picker/picker-trigger.stylex.d.ts

@@ -0,0 +1,60 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/picker/picker-trigger.stylex.d.ts
+declare const pickerTriggerStyles: Readonly<{
+  readonly 32: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 8>;
+    readonly height: stylex.StyleXClassNameFor<"height", 32>;
+  }>;
+  readonly 36: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 9>;
+    readonly height: stylex.StyleXClassNameFor<"height", 36>;
+  }>;
+  readonly 40: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 10>;
+    readonly height: stylex.StyleXClassNameFor<"height", 40>;
+  }>;
+  readonly 44: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 11>;
+    readonly height: stylex.StyleXClassNameFor<"height", 44>;
+  }>;
+  readonly 48: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 12>;
+    readonly height: stylex.StyleXClassNameFor<"height", 48>;
+  }>;
+  readonly base: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-bg-shell-inner)" | "var(--color-gray-3)">;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "inset 0 0 0 1px var(--color-border)" | "inset 0 0 0 1px var(--color-gray-6)" | "inset 0 0 0 1px transparent">;
+    readonly columnGap: stylex.StyleXClassNameFor<"columnGap", 8>;
+    readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+    readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 1 | "var(--opacity-picker-disabled)">;
+    readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "transparent" | "var(--color-primary)">;
+    readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", 2>;
+    readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+    readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 2>;
+    readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 16>;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "background-color, box-shadow">;
+    readonly width: stylex.StyleXClassNameFor<"width", "stretch">;
+  }>;
+  readonly icon: Readonly<{
+    readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+    readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+    readonly height: stylex.StyleXClassNameFor<"height", 16>;
+    readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+    readonly marginLeft: stylex.StyleXClassNameFor<"marginLeft", "auto">;
+    readonly rotate: stylex.StyleXClassNameFor<"rotate", "0deg" | "180deg">;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "rotate">;
+    readonly width: stylex.StyleXClassNameFor<"width", 16>;
+  }>;
+  readonly roundedFull: Readonly<{
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 9999>;
+  }>;
+}>;
+//#endregion
+export { pickerTriggerStyles };

package/dist/components/picker/picker-trigger.stylex.js

@@ -0,0 +1,67 @@
+//#region src/components/picker/picker-trigger.stylex.ts
+const pickerTriggerStyles = {
+	"32": {
+		kaIpWk: "xur7f20",
+		kZKoxP: "x10w6t97",
+		$$css: true
+	},
+	"36": {
+		kaIpWk: "xhpnuu7",
+		kZKoxP: "xc9qbxq",
+		$$css: true
+	},
+	"40": {
+		kaIpWk: "x1q4ynmn",
+		kZKoxP: "x1vqgdyp",
+		$$css: true
+	},
+	"44": {
+		kaIpWk: "x1ctf4ec",
+		kZKoxP: "xn3w4p2",
+		$$css: true
+	},
+	"48": {
+		kaIpWk: "x4pepcl",
+		kZKoxP: "xsdox4t",
+		$$css: true
+	},
+	base: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xfi2sx2 xm4hijy x1h73wb5",
+		kGVxlE: "xwsgaks xofwk0p x1er153n",
+		k1C7PZ: "xfex06f",
+		kkrTdU: "x1s07b3s x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kSiTet: "xpdez7c x1hc1fzr",
+		kjBf7l: "xr5th1z x1uczgqu",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		kVQacm: "xb3r6kr",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x1hr3lfm",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x106061f",
+		kzqmXN: "x1brm51p",
+		$$css: true
+	},
+	icon: {
+		kGNEyG: "x6s0dn4",
+		k1xSpc: "x78zum5",
+		kZKoxP: "xlup9mm",
+		kjj79g: "xl56j7k",
+		koQZXg: "x8x9d4c",
+		k4XH5M: "x1gcftaf xxh3ss5",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x1s3hfkw",
+		kzqmXN: "x1kky2od",
+		$$css: true
+	},
+	roundedFull: {
+		kaIpWk: "x10hpsqq",
+		$$css: true
+	}
+};
+//#endregion
+export { pickerTriggerStyles };