@nattstack/ui 0.1.2 → 0.1.3

package/dist/colors/neutral/sand.css

@@ -0,0 +1,67 @@
+[data-color-neutral="sand"] {
+  --color-neutral-1: light-dark(#fdfdfc, #111110);
+  --color-neutral-2: light-dark(#f9f9f8, #191918);
+  --color-neutral-3: light-dark(#f1f0ef, #222221);
+  --color-neutral-4: light-dark(#e9e8e6, #2a2a28);
+  --color-neutral-5: light-dark(#e2e1de, #31312e);
+  --color-neutral-6: light-dark(#dad9d6, #3b3a37);
+  --color-neutral-7: light-dark(#cfceca, #494844);
+  --color-neutral-8: light-dark(#bcbbb5, #62605b);
+  --color-neutral-9: light-dark(#8d8d86, #6f6d66);
+  --color-neutral-10: light-dark(#82827c, #7c7b74);
+  --color-neutral-11: light-dark(#63635e, #b5b3ad);
+  --color-neutral-12: light-dark(#21201c, #eeeeec);
+}
+
+@media (color-gamut: p3) {
+  [data-color-neutral="sand"] {
+    --color-neutral-1: light-dark(
+      color(display-p3 0.992 0.992 0.989),
+      color(display-p3 0.067 0.067 0.063)
+    );
+    --color-neutral-2: light-dark(
+      color(display-p3 0.977 0.977 0.973),
+      color(display-p3 0.098 0.098 0.094)
+    );
+    --color-neutral-3: light-dark(
+      color(display-p3 0.943 0.942 0.936),
+      color(display-p3 0.135 0.135 0.129)
+    );
+    --color-neutral-4: light-dark(
+      color(display-p3 0.913 0.912 0.903),
+      color(display-p3 0.164 0.163 0.156)
+    );
+    --color-neutral-5: light-dark(
+      color(display-p3 0.885 0.883 0.873),
+      color(display-p3 0.193 0.192 0.183)
+    );
+    --color-neutral-6: light-dark(
+      color(display-p3 0.854 0.852 0.839),
+      color(display-p3 0.23 0.229 0.217)
+    );
+    --color-neutral-7: light-dark(
+      color(display-p3 0.813 0.81 0.794),
+      color(display-p3 0.285 0.282 0.267)
+    );
+    --color-neutral-8: light-dark(
+      color(display-p3 0.738 0.734 0.713),
+      color(display-p3 0.384 0.378 0.357)
+    );
+    --color-neutral-9: light-dark(
+      color(display-p3 0.553 0.553 0.528),
+      color(display-p3 0.434 0.428 0.403)
+    );
+    --color-neutral-10: light-dark(
+      color(display-p3 0.511 0.511 0.488),
+      color(display-p3 0.487 0.481 0.456)
+    );
+    --color-neutral-11: light-dark(
+      color(display-p3 0.388 0.388 0.37),
+      color(display-p3 0.707 0.703 0.68)
+    );
+    --color-neutral-12: light-dark(
+      color(display-p3 0.129 0.126 0.111),
+      color(display-p3 0.933 0.933 0.926)
+    );
+  }
+}

package/dist/colors/neutral/slate.css

@@ -0,0 +1,67 @@
+[data-color-neutral="slate"] {
+  --color-neutral-1: light-dark(#fcfcfd, #111113);
+  --color-neutral-2: light-dark(#f9f9fb, #18191b);
+  --color-neutral-3: light-dark(#f0f0f3, #212225);
+  --color-neutral-4: light-dark(#e8e8ec, #272a2d);
+  --color-neutral-5: light-dark(#e0e1e6, #2e3135);
+  --color-neutral-6: light-dark(#d9d9e0, #363a3f);
+  --color-neutral-7: light-dark(#cdced6, #43484e);
+  --color-neutral-8: light-dark(#b9bbc6, #5a6169);
+  --color-neutral-9: light-dark(#8b8d98, #696e77);
+  --color-neutral-10: light-dark(#80838d, #777b84);
+  --color-neutral-11: light-dark(#60646c, #b0b4ba);
+  --color-neutral-12: light-dark(#1c2024, #edeef0);
+}
+
+@media (color-gamut: p3) {
+  [data-color-neutral="slate"] {
+    --color-neutral-1: light-dark(
+      color(display-p3 0.988 0.988 0.992),
+      color(display-p3 0.067 0.067 0.074)
+    );
+    --color-neutral-2: light-dark(
+      color(display-p3 0.976 0.976 0.984),
+      color(display-p3 0.095 0.098 0.105)
+    );
+    --color-neutral-3: light-dark(
+      color(display-p3 0.94 0.941 0.953),
+      color(display-p3 0.13 0.135 0.145)
+    );
+    --color-neutral-4: light-dark(
+      color(display-p3 0.908 0.909 0.925),
+      color(display-p3 0.156 0.163 0.176)
+    );
+    --color-neutral-5: light-dark(
+      color(display-p3 0.88 0.881 0.901),
+      color(display-p3 0.183 0.191 0.206)
+    );
+    --color-neutral-6: light-dark(
+      color(display-p3 0.85 0.852 0.876),
+      color(display-p3 0.215 0.226 0.244)
+    );
+    --color-neutral-7: light-dark(
+      color(display-p3 0.805 0.808 0.838),
+      color(display-p3 0.265 0.28 0.302)
+    );
+    --color-neutral-8: light-dark(
+      color(display-p3 0.727 0.733 0.773),
+      color(display-p3 0.357 0.381 0.409)
+    );
+    --color-neutral-9: light-dark(
+      color(display-p3 0.547 0.553 0.592),
+      color(display-p3 0.415 0.431 0.463)
+    );
+    --color-neutral-10: light-dark(
+      color(display-p3 0.503 0.512 0.549),
+      color(display-p3 0.469 0.483 0.514)
+    );
+    --color-neutral-11: light-dark(
+      color(display-p3 0.379 0.392 0.421),
+      color(display-p3 0.692 0.704 0.728)
+    );
+    --color-neutral-12: light-dark(
+      color(display-p3 0.113 0.125 0.14),
+      color(display-p3 0.93 0.933 0.94)
+    );
+  }
+}

package/dist/colors/semantic/index.css

@@ -0,0 +1,2 @@
+@import "./neutral-on-accent.css";
+@import "./semantic.css";

package/dist/colors/semantic/neutral-on-accent.css

@@ -0,0 +1,11 @@
+[data-color-accent] {
+  --color-neutral-on-accent: var(--color-text-primary);
+}
+
+[data-color-accent="yellow"],
+[data-color-accent="amber"],
+[data-color-accent="lime"],
+[data-color-accent="mint"],
+[data-color-accent="sky"] {
+  --color-neutral-on-accent: var(--color-text-inverse);
+}

package/dist/colors/semantic/semantic.css

@@ -0,0 +1,26 @@
+:root {
+  --color-neutral: var(--color-neutral-9);
+  --color-accent: var(--color-accent-9);
+
+  --color-border: var(--color-neutral-4);
+  --color-outline: var(--color-accent-9);
+
+  --color-bg-primary: var(--color-neutral-1);
+  --color-bg-secondary: var(--color-neutral-2);
+  --color-bg-inverse: var(--color-neutral-12);
+  --color-bg-shell-outer: var(--color-neutral-2);
+  --color-bg-shell-inner: var(--color-neutral-1);
+
+  --color-text-primary: var(--color-neutral-12);
+  --color-text-secondary: var(--color-neutral-11);
+  --color-text-inverse: var(--color-neutral-1);
+
+  --color-success: #30a46c;
+  --color-warning: #ffe629;
+  --color-error: #e5484d;
+}
+
+[data-color-theme="dark"] {
+  --color-bg-shell-outer: var(--color-neutral-1);
+  --color-bg-shell-inner: var(--color-neutral-2);
+}

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

@@ -11,7 +11,7 @@ interface ButtonProps extends Omit<ComponentProps<"button">, "children"> {
   variant?: ButtonVariant;
 }
 type ButtonSize = 32 | 36 | 40 | 44 | 48;
-type ButtonVariant = "ghost" | "primary" | "secondary";
+type ButtonVariant = "accent" | "ghost" | "primary" | "secondary";
 declare function Button(props: ButtonProps): JSX.Element;
 //#endregion
 export { Button, ButtonProps, ButtonSize, ButtonVariant };

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

@@ -96,20 +96,25 @@ const buttonStyles = {
 		kZKoxP: "xsdox4t",
 		$$css: true
 	},
+	variant_accent: {
+		kWkggS: "x3t9pfk x1gdbxxd",
+		kMwMTN: "x1wkzfu4",
+		$$css: true
+	},
 	variant_ghost: {
-		kWkggS: "x1pflddp xjbqb8w",
-		kMwMTN: "x197k1c5",
+		kWkggS: "xdx07ev xjbqb8w",
+		kMwMTN: "x1s2xpon",
 		$$css: true
 	},
 	variant_primary: {
-		kWkggS: "xalcron x1escjlh",
-		kMwMTN: "xf4b43d",
+		kWkggS: "xikox1u xwwl56u",
+		kMwMTN: "xa9avxy",
 		$$css: true
 	},
 	variant_secondary: {
-		kWkggS: "x1pflddp x1h73wb5",
+		kWkggS: "xdx07ev x1h73wb5",
 		kGVxlE: "x7auhu6 x1er153n",
-		kMwMTN: "x197k1c5",
+		kMwMTN: "x1s2xpon",
 		$$css: true
 	},
 	width_base: {
@@ -146,6 +151,7 @@ const buttonStylesBy = {
 		48: buttonStyles.size_48
 	},
 	variant: {
+		accent: buttonStyles.variant_accent,
 		ghost: buttonStyles.variant_ghost,
 		primary: buttonStyles.variant_primary,
 		secondary: buttonStyles.variant_secondary

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

@@ -3,8 +3,8 @@ const checkboxStyles = {
 	base: {
 		"--size": "x1fwrj7o",
 		kGNEyG: "x6s0dn4",
-		kWkggS: "x12icss0 x1qny0gl x1h73wb5",
-		kVAM5u: "x7n6cpb x81i4et x14i3s5s",
+		kWkggS: "xh52p7d x1unksgd x1h73wb5",
+		kVAM5u: "x17d5om2 x81i4et x14i3s5s",
 		kaIpWk: "x12oqio5",
 		ksu8eU: "x1y0btm7",
 		kMzoRj: "xmkeg23",
@@ -12,7 +12,7 @@ const checkboxStyles = {
 		k1xSpc: "x78zum5",
 		kZKoxP: "x188dgw3",
 		kjj79g: "xl56j7k",
-		kjBf7l: "x1du7r5n",
+		kjBf7l: "xj8wus6",
 		kInvED: "x1hl8ikr",
 		k3XXqK: "xaatb59",
 		kMeerF: "x784prv x1k57tk5",
@@ -28,7 +28,7 @@ const checkboxStyles = {
 		$$css: true
 	},
 	icon_path: {
-		kjVXCG: "xqvyd8v",
+		kjVXCG: "xzeoyw6",
 		kfJifR: "xqjr0vm",
 		$$css: true
 	},

package/dist/components/colors/palette.d.ts

@@ -0,0 +1,74 @@
+//#region src/colors/palette.d.ts
+type ColorAccent = (typeof COLOR.ACCENT)[keyof typeof COLOR.ACCENT];
+type ColorNeutral = (typeof COLOR.NEUTRAL)[keyof typeof COLOR.NEUTRAL];
+declare const COLOR: {
+  readonly ACCENT: {
+    readonly AMBER: "amber";
+    readonly BLUE: "blue";
+    readonly BRONZE: "bronze";
+    readonly BROWN: "brown";
+    readonly CRIMSON: "crimson";
+    readonly CYAN: "cyan";
+    readonly GOLD: "gold";
+    readonly GRASS: "grass";
+    readonly GREEN: "green";
+    readonly INDIGO: "indigo";
+    readonly IRIS: "iris";
+    readonly JADE: "jade";
+    readonly LIME: "lime";
+    readonly MINT: "mint";
+    readonly ORANGE: "orange";
+    readonly PINK: "pink";
+    readonly PLUM: "plum";
+    readonly PURPLE: "purple";
+    readonly RED: "red";
+    readonly RUBY: "ruby";
+    readonly SKY: "sky";
+    readonly TEAL: "teal";
+    readonly TOMATO: "tomato";
+    readonly VIOLET: "violet";
+    readonly YELLOW: "yellow";
+  };
+  readonly NEUTRAL: {
+    readonly GRAY: "gray";
+    readonly MAUVE: "mauve";
+    readonly OLIVE: "olive";
+    readonly SAGE: "sage";
+    readonly SAND: "sand";
+    readonly SLATE: "slate";
+  };
+  readonly THEME: {
+    readonly DARK: "dark";
+    readonly LIGHT: "light";
+  };
+};
+declare const COLOR_ACCENT_TO_NEUTRAL: {
+  readonly amber: "sand";
+  readonly blue: "slate";
+  readonly bronze: "sand";
+  readonly brown: "sand";
+  readonly crimson: "mauve";
+  readonly cyan: "slate";
+  readonly gold: "sand";
+  readonly grass: "olive";
+  readonly green: "sage";
+  readonly indigo: "slate";
+  readonly iris: "slate";
+  readonly jade: "sage";
+  readonly lime: "olive";
+  readonly mint: "sage";
+  readonly orange: "sand";
+  readonly pink: "mauve";
+  readonly plum: "mauve";
+  readonly purple: "mauve";
+  readonly red: "mauve";
+  readonly ruby: "mauve";
+  readonly sky: "slate";
+  readonly teal: "sage";
+  readonly tomato: "mauve";
+  readonly violet: "mauve";
+  readonly yellow: "sand";
+};
+declare function getColorAccentToNeutral(accent: ColorAccent): ColorNeutral;
+//#endregion
+export { COLOR, COLOR_ACCENT_TO_NEUTRAL, ColorAccent, ColorNeutral, getColorAccentToNeutral };

package/dist/components/colors/palette.js

@@ -0,0 +1,74 @@
+//#region src/colors/palette.ts
+const COLOR = {
+	ACCENT: {
+		AMBER: "amber",
+		BLUE: "blue",
+		BRONZE: "bronze",
+		BROWN: "brown",
+		CRIMSON: "crimson",
+		CYAN: "cyan",
+		GOLD: "gold",
+		GRASS: "grass",
+		GREEN: "green",
+		INDIGO: "indigo",
+		IRIS: "iris",
+		JADE: "jade",
+		LIME: "lime",
+		MINT: "mint",
+		ORANGE: "orange",
+		PINK: "pink",
+		PLUM: "plum",
+		PURPLE: "purple",
+		RED: "red",
+		RUBY: "ruby",
+		SKY: "sky",
+		TEAL: "teal",
+		TOMATO: "tomato",
+		VIOLET: "violet",
+		YELLOW: "yellow"
+	},
+	NEUTRAL: {
+		GRAY: "gray",
+		MAUVE: "mauve",
+		OLIVE: "olive",
+		SAGE: "sage",
+		SAND: "sand",
+		SLATE: "slate"
+	},
+	THEME: {
+		DARK: "dark",
+		LIGHT: "light"
+	}
+};
+const COLOR_ACCENT_TO_NEUTRAL = {
+	[COLOR.ACCENT.AMBER]: COLOR.NEUTRAL.SAND,
+	[COLOR.ACCENT.BLUE]: COLOR.NEUTRAL.SLATE,
+	[COLOR.ACCENT.BRONZE]: COLOR.NEUTRAL.SAND,
+	[COLOR.ACCENT.BROWN]: COLOR.NEUTRAL.SAND,
+	[COLOR.ACCENT.CRIMSON]: COLOR.NEUTRAL.MAUVE,
+	[COLOR.ACCENT.CYAN]: COLOR.NEUTRAL.SLATE,
+	[COLOR.ACCENT.GOLD]: COLOR.NEUTRAL.SAND,
+	[COLOR.ACCENT.GRASS]: COLOR.NEUTRAL.OLIVE,
+	[COLOR.ACCENT.GREEN]: COLOR.NEUTRAL.SAGE,
+	[COLOR.ACCENT.INDIGO]: COLOR.NEUTRAL.SLATE,
+	[COLOR.ACCENT.IRIS]: COLOR.NEUTRAL.SLATE,
+	[COLOR.ACCENT.JADE]: COLOR.NEUTRAL.SAGE,
+	[COLOR.ACCENT.LIME]: COLOR.NEUTRAL.OLIVE,
+	[COLOR.ACCENT.MINT]: COLOR.NEUTRAL.SAGE,
+	[COLOR.ACCENT.ORANGE]: COLOR.NEUTRAL.SAND,
+	[COLOR.ACCENT.PINK]: COLOR.NEUTRAL.MAUVE,
+	[COLOR.ACCENT.PLUM]: COLOR.NEUTRAL.MAUVE,
+	[COLOR.ACCENT.PURPLE]: COLOR.NEUTRAL.MAUVE,
+	[COLOR.ACCENT.RED]: COLOR.NEUTRAL.MAUVE,
+	[COLOR.ACCENT.RUBY]: COLOR.NEUTRAL.MAUVE,
+	[COLOR.ACCENT.SKY]: COLOR.NEUTRAL.SLATE,
+	[COLOR.ACCENT.TEAL]: COLOR.NEUTRAL.SAGE,
+	[COLOR.ACCENT.TOMATO]: COLOR.NEUTRAL.MAUVE,
+	[COLOR.ACCENT.VIOLET]: COLOR.NEUTRAL.MAUVE,
+	[COLOR.ACCENT.YELLOW]: COLOR.NEUTRAL.SAND
+};
+function getColorAccentToNeutral(accent) {
+	return COLOR_ACCENT_TO_NEUTRAL[accent];
+}
+//#endregion
+export { COLOR, COLOR_ACCENT_TO_NEUTRAL, getColorAccentToNeutral };

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

@@ -2,14 +2,14 @@
 const comboboxInputStyles = {
 	base: {
 		kGNEyG: "x6s0dn4",
-		kWkggS: "xoepl9e xm4hijy x1h73wb5 xpy517o",
-		kGVxlE: "x1ytwql3 x1er153n",
+		kWkggS: "xu5tege x1jkuzjh x1h73wb5 xp2pw04",
+		kGVxlE: "x1235ddk x1er153n",
 		k1C7PZ: "xfex06f",
 		kkrTdU: "x5ezrf1 x1ed109x x1beebc2",
 		k1xSpc: "x3nfvp2",
 		kmuXW: "x2lah0s",
 		kSiTet: "xxh3kiz x1hc1fzr x116ge45",
-		kjBf7l: "x1oifg x1uczgqu",
+		kjBf7l: "x1wcu262 x1uczgqu",
 		kInvED: "x1hl8ikr",
 		k3XXqK: "xaatb59",
 		kMeerF: "x1de99jn",
@@ -33,7 +33,7 @@ const comboboxInputStyles = {
 		$$css: true
 	},
 	input: {
-		k8Qsv1: "x1ta7s2x",
+		k8Qsv1: "x53zao0",
 		kI5SfV: "xjp5s5a",
 		kysU6D: "xjyslct",
 		kWkggS: "xjbqb8w",

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

@@ -14,14 +14,14 @@ const comboboxSearchStyles = {
 	},
 	icon: {
 		kGNEyG: "x6s0dn4",
-		kMwMTN: "x1vpwubs",
+		kMwMTN: "xszoz02",
 		k1xSpc: "x78zum5",
 		kmuXW: "x2lah0s",
 		kjj79g: "xl56j7k",
 		$$css: true
 	},
 	input: {
-		k8Qsv1: "x1ta7s2x",
+		k8Qsv1: "x53zao0",
 		kI5SfV: "xjp5s5a",
 		kysU6D: "xjyslct",
 		kWkggS: "xjbqb8w",

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

@@ -1,6 +1,6 @@
 //#region src/components/combobox/combobox-value.stylex.ts
 const comboboxValueStyles = { base: {
-	kMwMTN: "x1tgivj0 xn64az2",
+	kMwMTN: "x1tgivj0 x1ytjifj",
 	kGuDYH: "xif65rj",
 	k63SB2: "x10p5zqr",
 	kXHlph: "x6ikm8r",

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

@@ -4,7 +4,7 @@ const dialogResponsiveBackdropStyles = { base: {
 	kWkggS: "x42x0ya",
 	kpwlN0: "x10a8y8t",
 	kSiTet: "x1pimrze x1b866l",
-	kjBf7l: "x1luwoo2",
+	kjBf7l: "x16u5ykr",
 	kVAEAm: "xixxii4",
 	kIyJzY: "x10t6uq9 xm69ghq xx6bhzk",
 	k1ekBW: "x19991ni",

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

@@ -1,6 +1,6 @@
 //#region src/components/dialog-responsive/dialog-responsive-bar.stylex.ts
 const dialogResponsiveBarStyles = { base: {
-	kWkggS: "x1tcrco7",
+	kWkggS: "x1hhrpk5",
 	kaIpWk: "x10hpsqq",
 	k1xSpc: "x1s85apg xfsj286",
 	kZKoxP: "xqu0tyb",

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

@@ -1,7 +1,7 @@
 //#region src/components/dialog-responsive/dialog-responsive-popup.stylex.ts
 const dialogResponsivePopupStyles = { base: {
 	"--radius-mobile": "x1kpxz5j xlj1bto",
-	kWkggS: "xm8sm7k",
+	kWkggS: "x1qibisb",
 	kqGeR4: "x17sffzf x1lclwwd",
 	kYm2EN: "xve69zf xgrp7ii",
 	kIxVMA: "xtzlleu x1pwg7sp",
@@ -11,7 +11,7 @@ const dialogResponsivePopupStyles = { base: {
 	kXwgrk: "xdt5ytf",
 	ks0D6T: "x11gisft",
 	kSiTet: "x1pimrze x1hc1fzr xf275dk xpvzxny",
-	kjBf7l: "x1luwoo2",
+	kjBf7l: "x16u5ykr",
 	kInvED: "xr2mjdv",
 	k3XXqK: "xaatb59",
 	kMeerF: "x784prv x1k57tk5",

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+import { COLOR, COLOR_ACCENT_TO_NEUTRAL, ColorAccent, ColorNeutral, getColorAccentToNeutral } from "./colors/palette.js";
 import { Button, ButtonProps, ButtonSize, ButtonVariant } from "./button/button.js";
 import { ButtonLink, ButtonLinkProps } from "./button-link/button-link.js";
 import { Checkbox, CheckboxProps } from "./checkbox/checkbox.js";
@@ -62,4 +63,4 @@ import { Tooltip, TooltipProps } from "./tooltip/tooltip.js";
 import { TooltipPopup, TooltipPopupProps } from "./tooltip/tooltip-popup.js";
 import { TooltipProvider, TooltipProviderProps } from "./tooltip/tooltip-provider.js";
 import { TooltipTrigger, TooltipTriggerProps } from "./tooltip/tooltip-trigger.js";
-export { Button, ButtonLink, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxProps, Column, ColumnProps, Combobox, ComboboxCollection, ComboboxCollectionProps, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInput, ComboboxInputProps, ComboboxInputSize, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxListProps, ComboboxProps, ComboboxSearch, ComboboxSearchProps, ComboboxSeparator, ComboboxSeparatorProps, ComboboxTrigger, ComboboxTriggerProps, ComboboxTriggerSize, ComboboxValue, ComboboxValueProps, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, IconButton, IconButtonProps, Input, InputProps, InputSize, Label, LabelProps, Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLinkItem, MenuLinkItemProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSubmenu, MenuSubmenuProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, OTPField, OTPFieldInput, OTPFieldInputProps, OTPFieldProps, Row, RowProps, Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectTriggerSize, SelectValue, SelectValueProps, Spacer, SpacerProps, Switch, SwitchProps, SwitchSize, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, Tooltip, TooltipPopup, TooltipPopupProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps };
+export { Button, ButtonLink, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant, COLOR, COLOR_ACCENT_TO_NEUTRAL, Checkbox, CheckboxProps, ColorAccent, ColorNeutral, Column, ColumnProps, Combobox, ComboboxCollection, ComboboxCollectionProps, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInput, ComboboxInputProps, ComboboxInputSize, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxListProps, ComboboxProps, ComboboxSearch, ComboboxSearchProps, ComboboxSeparator, ComboboxSeparatorProps, ComboboxTrigger, ComboboxTriggerProps, ComboboxTriggerSize, ComboboxValue, ComboboxValueProps, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, IconButton, IconButtonProps, Input, InputProps, InputSize, Label, LabelProps, Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLinkItem, MenuLinkItemProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSubmenu, MenuSubmenuProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, OTPField, OTPFieldInput, OTPFieldInputProps, OTPFieldProps, Row, RowProps, Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectTriggerSize, SelectValue, SelectValueProps, Spacer, SpacerProps, Switch, SwitchProps, SwitchSize, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, Tooltip, TooltipPopup, TooltipPopupProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps, getColorAccentToNeutral };

package/dist/components/index.js

@@ -1,4 +1,5 @@
 /* empty css       */
+import { COLOR, COLOR_ACCENT_TO_NEUTRAL, getColorAccentToNeutral } from "./colors/palette.js";
 import { ButtonLink } from "./button-link/button-link.js";
 import { Button } from "./button/button.js";
 import { Checkbox } from "./checkbox/checkbox.js";
@@ -63,4 +64,4 @@ import { Tooltip } from "./tooltip/tooltip.js";
 import { TooltipPopup } from "./tooltip/tooltip-popup.js";
 import { TooltipProvider } from "./tooltip/tooltip-provider.js";
 import { TooltipTrigger } from "./tooltip/tooltip-trigger.js";
-export { Button, ButtonLink, Checkbox, Column, Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSearch, ComboboxSeparator, ComboboxTrigger, ComboboxValue, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, IconButton, Input, Label, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, OTPField, OTPFieldInput, Row, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Spacer, Switch, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger };
+export { Button, ButtonLink, COLOR, COLOR_ACCENT_TO_NEUTRAL, Checkbox, Column, Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSearch, ComboboxSeparator, ComboboxTrigger, ComboboxValue, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, IconButton, Input, Label, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, OTPField, OTPFieldInput, Row, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Spacer, Switch, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, getColorAccentToNeutral };

package/dist/components/input/input.stylex.js

@@ -1,12 +1,12 @@
 //#region src/components/input/input.stylex.ts
 const inputStyles = {
 	base: {
-		k8Qsv1: "x1ta7s2x",
+		k8Qsv1: "x53zao0",
 		kI5SfV: "xjp5s5a",
 		kysU6D: "xjyslct",
 		kWkggS: "x1h73wb5",
 		ksu8eU: "xng3xce",
-		kGVxlE: "xnn6d81 xho1339 x1rlgnxn xhxsgan x1er153n",
+		kGVxlE: "x1myrugz x8k5xug x1kqw4io x9frp66 x1er153n",
 		kMwMTN: "x1tgivj0",
 		kkrTdU: "x1s07b3s x1ed109x",
 		kGuDYH: "xif65rj",

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

@@ -1,7 +1,7 @@
 //#region src/components/menu/menu-submenu-trigger.stylex.ts
 const menuSubmenuTriggerStyles = {
 	base: {
-		kWkggS: "xm4hijy xjbqb8w",
+		kWkggS: "x1jkuzjh xjbqb8w",
 		$$css: true
 	},
 	icon: {

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

@@ -1,8 +1,8 @@
 //#region src/components/otp-field/otp-field-input.stylex.ts
 const otpFieldInputStyles = { base: {
-	kWkggS: "x2j0cto",
+	kWkggS: "x191x1kn",
 	kaIpWk: "xixl9f9",
-	kGVxlE: "x1rlgnxn x1er153n",
+	kGVxlE: "x1kqw4io x1er153n",
 	kMwMTN: "x1tgivj0",
 	kkrTdU: "x1s07b3s x1ed109x",
 	kGuDYH: "xif65rj",

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

@@ -2,7 +2,7 @@
 const pickerItemStyles = {
 	base: {
 		kGNEyG: "x6s0dn4",
-		kWkggS: "x1cgdd2a x160dr52 xjbqb8w",
+		kWkggS: "x1tuk5u7 xxmzxow xjbqb8w",
 		kaIpWk: "xur7f20",
 		k1C7PZ: "xfex06f",
 		kkrTdU: "x5ezrf1 x1ypdohk",
@@ -18,7 +18,7 @@ const pickerItemStyles = {
 	},
 	indicator: {
 		kGNEyG: "x6s0dn4",
-		kMwMTN: "x9i09x5",
+		kMwMTN: "xnucuqp",
 		k1xSpc: "x78zum5",
 		kmuXW: "x2lah0s",
 		kZKoxP: "xlup9mm",

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

@@ -14,7 +14,7 @@ const pickerPopupStyles = {
 		ks0D6T: "x7k7lee",
 		k7Eaqz: "xz962wo",
 		kSiTet: "x1pimrze x1hc1fzr",
-		kjBf7l: "x1luwoo2",
+		kjBf7l: "x16u5ykr",
 		kInvED: "x2ssjo2",
 		k3XXqK: "xaatb59",
 		kMeerF: "x784prv x1k57tk5",

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

@@ -2,14 +2,14 @@
 const pickerTriggerStyles = {
 	base: {
 		kGNEyG: "x6s0dn4",
-		kWkggS: "xfi2sx2 xm4hijy x1h73wb5",
-		kGVxlE: "xwsgaks xofwk0p x1er153n",
+		kWkggS: "x1kwllon x1jkuzjh x1h73wb5",
+		kGVxlE: "x19m32tz xofwk0p x1er153n",
 		k1C7PZ: "xfex06f",
 		kkrTdU: "x1s07b3s x1ypdohk",
 		k1xSpc: "x3nfvp2",
 		kmuXW: "x2lah0s",
 		kSiTet: "xpdez7c x1hc1fzr",
-		kjBf7l: "xr5th1z x1uczgqu",
+		kjBf7l: "xzunyri x1uczgqu",
 		kInvED: "x1hl8ikr",
 		k3XXqK: "xaatb59",
 		kMeerF: "x1de99jn",

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

@@ -1,6 +1,6 @@
 //#region src/components/select/select-value.stylex.ts
 const selectValueStyles = { base: {
-	kMwMTN: "x1juq307 x1tgivj0",
+	kMwMTN: "xgyj9p2 x1tgivj0",
 	kGuDYH: "xif65rj",
 	k63SB2: "x10p5zqr",
 	kXHlph: "x6ikm8r",