npm - @telepix-lab/telepix-ui - Versions diffs - 0.1.2 → 0.2.1 - Mend

@telepix-lab/telepix-ui 0.1.2 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/cjs/autocomplete/styles.d.ts +0 -1
package/dist/cjs/hooks/usePreferColors.d.ts +13 -0
package/dist/cjs/index.js +737 -1511
package/dist/cjs/index.js.map +1 -1
package/dist/cjs/styles/primitiveColors.stylex.d.ts +6 -6
package/dist/cjs/styles/semanticColors.stylex.d.ts +98 -0
package/dist/cjs/styles.css +151 -57
package/dist/esm/autocomplete/styles.d.ts +0 -1
package/dist/esm/hooks/usePreferColors.d.ts +13 -0
package/dist/esm/index.js +736 -1512
package/dist/esm/index.js.map +1 -1
package/dist/esm/styles/primitiveColors.stylex.d.ts +6 -6
package/dist/esm/styles/semanticColors.stylex.d.ts +98 -0
package/dist/esm/styles.css +151 -57
package/dist/index.d.ts +105 -8
package/package.json +2 -1

package/dist/esm/index.js CHANGED Viewed

@@ -1,34 +1,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as stylex from '@stylexjs/stylex';
 import * as React from 'react';
-import React__default, { useState, useLayoutEffect, forwardRef, createElement, useEffect, createContext, useContext, useRef, useCallback } from 'react';
+import React__default, { useState, useEffect, useLayoutEffect, forwardRef, createElement, createContext, useContext, useRef, useCallback } from 'react';
+import * as stylex from '@stylexjs/stylex';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 import { DayPicker } from 'react-day-picker';
-// 간격 변수 정의
-const spacing = {
-  xs: "var(--tpst1aa85u5)",
-  sm: "var(--tpst15cl33r)",
-  md: "var(--tpst1s1bzlu)",
-  lg: "var(--tpstr1ymy1)",
-  xl: "var(--tpst13zox1l)",
-  xxl: "var(--tpst1xkcubw)",
-  xxxl: "var(--tpst67ua5f)",
-  __themeName__: "tpst1cmuz2h"
-};
-// 테두리 반경 변수 정의
-const borderRadius = {
-  none: "var(--tpst16kocez)",
-  xs: "var(--tpst1vsob78)",
-  sm: "var(--tpst1w7bvkk)",
-  md: "var(--tpst1ls88jo)",
-  lg: "var(--tpst1d2ic4p)",
-  xl: "var(--tpst1bkg6mz)",
-  full: "var(--tpstbu84cc)",
-  __themeName__: "tpstun8bdo"
-};
 // 프리미티브 컬러 변수 정의
 const primitiveColors = {
   blue100: "var(--tpstqe013h)",
@@ -49,16 +26,16 @@ const primitiveColors = {
   cyan700: "var(--tpsth1uc7g)",
   cyan800: "var(--tpsttewm74)",
   cyan900: "var(--tpst1ts0yxk)",
+  darkOpacity25: "var(--tpst1695na0)",
+  darkOpacity50: "var(--tpstoyk8v8)",
   darkOpacity100: "var(--tpst101zq66)",
   darkOpacity150: "var(--tpst18059y4)",
   darkOpacity200: "var(--tpst1o2qj1w)",
-  darkOpacity25: "var(--tpst1695na0)",
   darkOpacity250: "var(--tpst1e4u9cd)",
   darkOpacity300: "var(--tpstzzylim)",
   darkOpacity350: "var(--tpst1giqxg)",
   darkOpacity400: "var(--tpst1ckp6cb)",
   darkOpacity450: "var(--tpst1ujyhgx)",
-  darkOpacity50: "var(--tpstoyk8v8)",
   darkOpacity500: "var(--tpstdb8mlt)",
   darkOpacity550: "var(--tpst142inpb)",
   darkOpacity600: "var(--tpstrvxn8n)",
@@ -77,16 +54,16 @@ const primitiveColors = {
   green700: "var(--tpst1a1gxqa)",
   green800: "var(--tpstb6uyui)",
   green900: "var(--tpstklhf60)",
+  lightOpacity25: "var(--tpstevrkdv)",
+  lightOpacity50: "var(--tpst8kgh2v)",
   lightOpacity100: "var(--tpst1i0r5ji)",
   lightOpacity150: "var(--tpst1y5wwdd)",
   lightOpacity200: "var(--tpst1qyy4b3)",
-  lightOpacity25: "var(--tpstevrkdv)",
   lightOpacity250: "var(--tpst9u9sq4)",
   lightOpacity300: "var(--tpst9ontey)",
   lightOpacity350: "var(--tpst7h2gr7)",
   lightOpacity400: "var(--tpstrlh8f2)",
   lightOpacity450: "var(--tpstpvck6k)",
-  lightOpacity50: "var(--tpst8kgh2v)",
   lightOpacity500: "var(--tpstwf3o2r)",
   lightOpacity550: "var(--tpst1yklry3)",
   lightOpacity600: "var(--tpst1pqr7tr)",
@@ -105,16 +82,16 @@ const primitiveColors = {
   magenta700: "var(--tpst11snvgx)",
   magenta800: "var(--tpst14beq8s)",
   magenta900: "var(--tpstzb1amu)",
+  neutral25: "var(--tpsttwjrp6)",
+  neutral50: "var(--tpst1oe8qtm)",
   neutral100: "var(--tpst1gpymmf)",
   neutral150: "var(--tpst1wxl5pq)",
   neutral200: "var(--tpst12b1wd7)",
-  neutral25: "var(--tpsttwjrp6)",
   neutral250: "var(--tpstxadivy)",
   neutral300: "var(--tpst13x3j6w)",
   neutral350: "var(--tpstihxxi9)",
   neutral400: "var(--tpstv2m2ve)",
   neutral450: "var(--tpstiiea8d)",
-  neutral50: "var(--tpst1oe8qtm)",
   neutral500: "var(--tpst1yltxr6)",
   neutral550: "var(--tpstr8jwi2)",
   neutral600: "var(--tpst1dl1ny3)",
@@ -257,6 +234,89 @@ const semanticColors = {
   transparent: "var(--tpst1wrmwgo)",
   __themeName__: "tpst1h3jhwn"
 };
+const lightMode = {
+  $$css: true,
+  tpst1h3jhwn: "tpst1eqgcyt tpst1h3jhwn"
+};
+const darkMode = {
+  $$css: true,
+  tpst1h3jhwn: "tpst1bbvikf tpst1h3jhwn"
+};
+const usePreferColors = () => {
+  const [dataTheme, setDataTheme] = useState("light");
+  const initTheme = () => {
+    const targetNode = document.documentElement; // <html> 엘리먼트
+    const currentTheme = targetNode.getAttribute("data-theme");
+    // currentTheme이 없으면 system의 기본 테마를 사용
+    if (currentTheme === "dark" || currentTheme === "light") {
+      setDataTheme(currentTheme);
+    } else {
+      // matchMedia를 사용하여 시스템의 기본 테마를 확인
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      // 시스템의 기본 테마가 dark이면 data-theme을 "dark"로 설정,
+      // 아니면 "light"로 설정
+      prefersDark ? setDataTheme("dark") : setDataTheme("light");
+    }
+  };
+  useEffect(() => {
+    const targetNode = document.documentElement; // <html> 엘리먼트
+    const observer = new MutationObserver(mutationsList => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes" && mutation.attributeName === "data-theme") {
+          const currentTheme = targetNode.getAttribute("data-theme");
+          // currentTheme이 없으면 system의 기본 테마를 사용
+          if (currentTheme === "dark" || currentTheme === "light") {
+            setDataTheme(currentTheme);
+          } else {
+            // matchMedia를 사용하여 시스템의 기본 테마를 확인
+            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+            // 시스템의 기본 테마가 dark이면 data-theme을 "dark"로 설정,
+            // 아니면 "light"로 설정
+            prefersDark ? setDataTheme("dark") : setDataTheme("light");
+          }
+        }
+      }
+    });
+    observer.observe(targetNode, {
+      attributes: true,
+      // 속성 감시
+      attributeFilter: ["data-theme"] // data-theme만 감시
+    });
+    initTheme();
+  }, []);
+  const setStyleXProps = (...styles) => {
+    return stylex.props(dataTheme === "dark" ? darkMode : lightMode, ...styles);
+  };
+  return {
+    setStyleXProps,
+    dataTheme,
+    setDataTheme
+  };
+};
+// 간격 변수 정의
+const spacing = {
+  xs: "var(--tpst1aa85u5)",
+  sm: "var(--tpst15cl33r)",
+  md: "var(--tpst1s1bzlu)",
+  lg: "var(--tpstr1ymy1)",
+  xl: "var(--tpst13zox1l)",
+  xxl: "var(--tpst1xkcubw)",
+  xxxl: "var(--tpst67ua5f)",
+  __themeName__: "tpst1cmuz2h"
+};
+// 테두리 반경 변수 정의
+const borderRadius = {
+  none: "var(--tpst16kocez)",
+  xs: "var(--tpst1vsob78)",
+  sm: "var(--tpst1w7bvkk)",
+  md: "var(--tpst1ls88jo)",
+  lg: "var(--tpst1d2ic4p)",
+  xl: "var(--tpst1bkg6mz)",
+  full: "var(--tpstbu84cc)",
+  __themeName__: "tpstun8bdo"
+};
 // 폰트 패밀리 변수 정의
 const fontFamily = {
@@ -594,61 +654,19 @@ const commonStyles = {
  * </Button>
  * ```
  */
-const Button = React__default.forwardRef(({
-  variant = "accent",
-  size = "regular",
-  fullWidth = false,
-  isLoading = false,
-  leftIcon,
-  rightIcon,
-  children,
-  disabled,
-  className,
-  ...rest
-}, ref) => {
-  const buttonClasses = stylex.props(buttonStyles.base, buttonSizeStyles[size], buttonVariantStyles[variant], fullWidth ? buttonStyles.fullWidth : null, leftIcon || rightIcon ? buttonStyles.withIcon : null);
-  const getLoadingSpinnerStyles = () => {
-    if (size === "small") {
-      return buttonStyles.spinnerSmall;
-    }
-    if (size === "large") {
-      return buttonStyles.spinnerLarge;
-    }
-    return buttonStyles.spinner;
-  };
-  return jsxs("button", {
-    ref: ref,
-    disabled: disabled ?? isLoading,
-    className: `${buttonClasses.className} ${className ?? ""}`,
-    ...rest,
-    children: [isLoading && jsx("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className: `lucide lucide-loader-circle-icon lucide-loader-circle ${stylex.props(getLoadingSpinnerStyles()).className}`,
-      children: jsx("path", {
-        d: "M21 12a9 9 0 1 1-6.219-8.56"
-      })
-    }), leftIcon && jsx("span", {
-      className: stylex.props(commonStyles.flexCenter).className,
-      children: leftIcon
-    }), children && jsx("span", {
-      className: "button-text",
-      style: {
-        visibility: isLoading ? "hidden" : "visible"
-      },
-      children: children
-    }), rightIcon && jsx("span", {
-      className: stylex.props(commonStyles.flexCenter).className,
-      children: rightIcon
-    })]
-  });
+const Button = React__default.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const buttonClasses = setStyleXProps(buttonStyles.base, buttonSizeStyles[size], buttonVariantStyles[variant], fullWidth ? buttonStyles.fullWidth : null, leftIcon || rightIcon ? buttonStyles.withIcon : null);
+    const getLoadingSpinnerStyles = () => {
+        if (size === "small") {
+            return buttonStyles.spinnerSmall;
+        }
+        if (size === "large") {
+            return buttonStyles.spinnerLarge;
+        }
+        return buttonStyles.spinner;
+    };
+    return (jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: `${buttonClasses.className} ${className ?? ""}`, ...rest, children: [isLoading && (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-loader-circle-icon lucide-loader-circle ${setStyleXProps(getLoadingSpinnerStyles()).className}`, children: jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: leftIcon })), children && (jsx("span", { className: "button-text", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: rightIcon }))] }));
 });
 Button.displayName = "Button";
@@ -1017,24 +1035,10 @@ const textStyles = {
   }
 };
-const Text = ({
-  children,
-  className,
-  size,
-  weight,
-  align,
-  variant = "regularBase",
-  color,
-  as: Component = "p"
-}) => {
-  const styles = stylex.props(textStyles.base, textVariantStyles[variant], size ? textSizeStyles[size] : undefined, weight ? fontWeightStyles[weight] : undefined, align ? textAlignStyles[align] : undefined);
-  return jsx(Component, {
-    style: color ? {
-      color
-    } : undefined,
-    className: `${styles.className} ${className ?? ""}`,
-    children: children
-  });
+const Text = ({ children, className, size, weight, align, variant = "regularBase", color, as: Component = "p", }) => {
+    const { setStyleXProps } = usePreferColors();
+    const styles = setStyleXProps(textStyles.base, textVariantStyles[variant], size ? textSizeStyles[size] : undefined, weight ? fontWeightStyles[weight] : undefined, align ? textAlignStyles[align] : undefined);
+    return (jsx(Component, { style: color ? { color } : undefined, className: `${styles.className} ${className ?? ""}`, children: children }));
 };
 Text.displayName = "Text";
@@ -1212,30 +1216,11 @@ const inputStyles = {
  * />
  * ```
  */
-const Input = React__default.forwardRef(({
-  size = "regular",
-  leftIcon,
-  rightIcon,
-  wrapperClassName,
-  ...rest
-}, ref) => {
-  const inputWrapperClasses = stylex.props(inputWrapperStyles.base, size ? inputWrapperSizeStyles[size] : inputWrapperSizeStyles.regular);
-  const inputClasses = stylex.props(inputStyles.base, size ? inputStyles[size] : inputStyles.regular);
-  return jsxs("div", {
-    "aria-disabled": rest.disabled,
-    className: `${inputWrapperClasses.className} ${wrapperClassName}`,
-    children: [leftIcon && jsx("span", {
-      className: stylex.props(commonStyles.flexCenter).className,
-      children: leftIcon
-    }), jsx("input", {
-      ref: ref,
-      className: `${inputClasses.className} ${rest.className}`,
-      ...rest
-    }), rightIcon && jsx("span", {
-      className: stylex.props(commonStyles.flexCenter).className,
-      children: rightIcon
-    })]
-  });
+const Input = React__default.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const inputWrapperClasses = setStyleXProps(inputWrapperStyles.base, size ? inputWrapperSizeStyles[size] : inputWrapperSizeStyles.regular);
+    const inputClasses = setStyleXProps(inputStyles.base, size ? inputStyles[size] : inputStyles.regular);
+    return (jsxs("div", { "aria-disabled": rest.disabled, className: `${inputWrapperClasses.className} ${wrapperClassName}`, children: [leftIcon && (jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: leftIcon })), jsx("input", { ref: ref, className: `${inputClasses.className} ${rest.className}`, ...rest }), rightIcon && (jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: rightIcon }))] }));
 });
 Input.displayName = "Input";
@@ -1339,15 +1324,9 @@ const textAreaStyles = {
  * ```
  */
 const TextArea = React__default.forwardRef((rest, ref) => {
-  const textAreaClasses = stylex.props(textAreaStyles.base, rest.disabled ? textAreaStyles.disabled : undefined);
-  return jsx("div", {
-    ...stylex.props(textAreaWrapperStyles.base),
-    children: jsx("textarea", {
-      ref: ref,
-      className: `${textAreaClasses.className} ${rest.className}`,
-      ...rest
-    })
-  });
+    const { setStyleXProps } = usePreferColors();
+    const textAreaClasses = setStyleXProps(textAreaStyles.base, rest.disabled ? textAreaStyles.disabled : undefined);
+    return (jsx("div", { ...setStyleXProps(textAreaWrapperStyles.base), children: jsx("textarea", { ref: ref, className: `${textAreaClasses.className} ${rest.className}`, ...rest }) }));
 });
 TextArea.displayName = "TextArea";
@@ -10102,64 +10081,32 @@ const X = createLucideIcon("x", __iconNode);
  * />
  * ```
  */
-const Checkbox = React__default.forwardRef(({
-  label,
-  labelClassName,
-  wrapperClassName,
-  ...rest
-}, ref) => {
-  const {
-    checked: isChecked,
-    defaultChecked,
-    id,
-    disabled,
-    className,
-    onCheckedChange: onChange
-  } = rest;
-  const [checked, setChecked] = React__default.useState(isChecked ?? defaultChecked);
-  useEffect(() => {
-    setChecked(isChecked ?? defaultChecked);
-  }, [isChecked, defaultChecked]);
-  const randomId = React__default.useId();
-  const checkboxWrapperClasses = stylex.props(checkboxWrapperStyles.base);
-  const checkboxClasses = stylex.props(checkboxStyles.base);
-  const labelClasses = stylex.props(labelStyles.base, disabled ? labelStyles.disabled : undefined);
-  const checkboxIconClasses = stylex.props(checkboxStyles.icon, checked ? checkboxStyles.iconChecked : undefined, disabled ? checkboxStyles.iconDisabled : undefined);
-  const renderCheckboxIcon = (checked, disabled) => {
-    if (disabled) {
-      return jsx(SquareMinus, {
-        ...checkboxIconClasses
-      });
-    } else if (checked) {
-      return jsx(SquareCheck, {
-        ...checkboxIconClasses
-      });
-    }
-    return jsx(Square, {
-      ...checkboxIconClasses
-    });
-  };
-  const onCheckedChange = value => {
-    setChecked(value);
-    onChange?.(value);
-  };
-  return jsxs("div", {
-    className: `${checkboxWrapperClasses.className} ${wrapperClassName}`,
-    children: [jsx(Checkbox$1, {
-      ref: ref,
-      id: id ?? randomId,
-      ...rest,
-      checked: checked,
-      className: `${checkboxClasses.className} ${className}`,
-      onCheckedChange: onCheckedChange,
-      children: renderCheckboxIcon(checked, disabled)
-    }), jsx("label", {
-      className: `${labelClasses.className} ${labelClassName}`,
-      htmlFor: id ?? randomId,
-      "aria-disabled": disabled,
-      children: label
-    })]
-  });
+const Checkbox = React__default.forwardRef(({ label, labelClassName, wrapperClassName, ...rest }, ref) => {
+    const { checked: isChecked, defaultChecked, id, disabled, className, onCheckedChange: onChange, } = rest;
+    const { setStyleXProps } = usePreferColors();
+    const [checked, setChecked] = React__default.useState(isChecked ?? defaultChecked);
+    useEffect(() => {
+        setChecked(isChecked ?? defaultChecked);
+    }, [isChecked, defaultChecked]);
+    const randomId = React__default.useId();
+    const checkboxWrapperClasses = setStyleXProps(checkboxWrapperStyles.base);
+    const checkboxClasses = setStyleXProps(checkboxStyles.base);
+    const labelClasses = setStyleXProps(labelStyles.base, disabled ? labelStyles.disabled : undefined);
+    const checkboxIconClasses = setStyleXProps(checkboxStyles.icon, checked ? checkboxStyles.iconChecked : undefined, disabled ? checkboxStyles.iconDisabled : undefined);
+    const renderCheckboxIcon = (checked, disabled) => {
+        if (disabled) {
+            return jsx(SquareMinus, { ...checkboxIconClasses });
+        }
+        else if (checked) {
+            return jsx(SquareCheck, { ...checkboxIconClasses });
+        }
+        return jsx(Square, { ...checkboxIconClasses });
+    };
+    const onCheckedChange = (value) => {
+        setChecked(value);
+        onChange?.(value);
+    };
+    return (jsxs("div", { className: `${checkboxWrapperClasses.className} ${wrapperClassName}`, children: [jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: checked, className: `${checkboxClasses.className} ${className}`, onCheckedChange: onCheckedChange, children: renderCheckboxIcon(checked, disabled) }), jsx("label", { className: `${labelClasses.className} ${labelClassName}`, htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })] }));
 });
 Checkbox.displayName = "Checkbox";
@@ -10435,13 +10382,16 @@ const RadioGroup = React__default.forwardRef(({
   orientation = "vertical",
   ...rest
 }, ref) => {
+  const {
+    setStyleXProps
+  } = usePreferColors();
   const {
     disabled,
     children,
     value,
     ...restProps
   } = rest;
-  const radioGroupClasses = stylex.props(radioGroupStyles.base, orientation === "horizontal" ? radioGroupStyles.horizontal : undefined);
+  const radioGroupClasses = setStyleXProps(radioGroupStyles.base, orientation === "horizontal" ? radioGroupStyles.horizontal : undefined);
   return jsx(RadioGroupContext, {
     value: {
       value: value ?? "",
@@ -10469,11 +10419,14 @@ const RadioItem = React__default.forwardRef(({
     ...restProps
   } = rest;
   const randomId = id ?? React__default.useId();
+  const {
+    setStyleXProps
+  } = usePreferColors();
   const isSelected = useContext(RadioGroupContext).value === value;
   const isDisabled = useContext(RadioGroupContext).disabled || disabled || false;
-  const radioItemWrapperClasses = stylex.props(radioItemWrapperStyles.base);
-  const radioItemLabelClasses = stylex.props(radioItemLabelStyles.base, isSelected ? radioItemLabelStyles.selected : undefined, isDisabled ? radioItemLabelStyles.disabled : undefined);
-  const radioItemClasses = stylex.props(radioItemStyles.base);
+  const radioItemWrapperClasses = setStyleXProps(radioItemWrapperStyles.base);
+  const radioItemLabelClasses = setStyleXProps(radioItemLabelStyles.base, isSelected ? radioItemLabelStyles.selected : undefined, isDisabled ? radioItemLabelStyles.disabled : undefined);
+  const radioItemClasses = setStyleXProps(radioItemStyles.base);
   return jsxs("div", {
     className: `${radioItemWrapperClasses.className} ${wrapperClassName ?? ""}`,
     children: [jsx(Item2, {
@@ -10603,60 +10556,28 @@ const cardFooterStyles = {
  *   </CardFooter>
  * </Card>
  */
-const Card = React__default.forwardRef(({
-  className,
-  ...rest
-}, ref) => {
-  const cardClasses = stylex.props(cardStyles.base);
-  return jsx("div", {
-    ...rest,
-    ref: ref,
-    className: `${cardClasses.className} ${className ?? ""}`,
-    children: rest.children
-  });
+const Card = React__default.forwardRef(({ className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const cardClasses = setStyleXProps(cardStyles.base);
+    return (jsx("div", { ...rest, ref: ref, className: `${cardClasses.className} ${className ?? ""}`, children: rest.children }));
 });
-const CardBody = React__default.forwardRef(({
-  className,
-  ...rest
-}, ref) => {
-  const cardBodyClasses = stylex.props(cardBodyStyles.base);
-  return jsx("div", {
-    ...rest,
-    ref: ref,
-    className: `${cardBodyClasses.className} ${className ?? ""}`,
-    children: rest.children
-  });
+const CardBody = React__default.forwardRef(({ className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const cardBodyClasses = setStyleXProps(cardBodyStyles.base);
+    return (jsx("div", { ...rest, ref: ref, className: `${cardBodyClasses.className} ${className ?? ""}`, children: rest.children }));
 });
-const CardHeader = React__default.forwardRef(({
-  className,
-  ...rest
-}, ref) => {
-  const cardHeaderClasses = stylex.props(cardHeaderStyles.base);
-  return jsx("div", {
-    ...rest,
-    ref: ref,
-    className: `${cardHeaderClasses.className} ${className ?? ""}`,
-    children: rest.children
-  });
+const CardHeader = React__default.forwardRef(({ className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const cardHeaderClasses = setStyleXProps(cardHeaderStyles.base);
+    return (jsx("div", { ...rest, ref: ref, className: `${cardHeaderClasses.className} ${className ?? ""}`, children: rest.children }));
 });
 const CardContent = React__default.forwardRef((rest, ref) => {
-  return jsx("div", {
-    ...rest,
-    ref: ref,
-    children: rest.children
-  });
+    return (jsx("div", { ...rest, ref: ref, children: rest.children }));
 });
-const CardFooter = React__default.forwardRef(({
-  className,
-  ...rest
-}, ref) => {
-  const cardFooterClasses = stylex.props(cardFooterStyles.base);
-  return jsx("div", {
-    ...rest,
-    ref: ref,
-    className: `${cardFooterClasses.className} ${className ?? ""}`,
-    children: rest.children
-  });
+const CardFooter = React__default.forwardRef(({ className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const cardFooterClasses = setStyleXProps(cardFooterStyles.base);
+    return (jsx("div", { ...rest, ref: ref, className: `${cardFooterClasses.className} ${className ?? ""}`, children: rest.children }));
 });
 const dialogOverlayStyles = {
@@ -10742,58 +10663,23 @@ const dialogContentStyles = {
  * </Dialog>
  */
 const Dialog = Root$2;
-const DialogTrigger = props => {
-  return jsx(Trigger$4, {
-    className: props.className,
-    ...props,
-    "data-slot": "dialog-trigger",
-    asChild: true,
-    children: props.children
-  });
+const DialogTrigger = (props) => {
+    return (jsx(Trigger$4, { className: props.className, ...props, "data-slot": "dialog-trigger", asChild: true, children: props.children }));
 };
 const DialogPortal = Portal$3;
 const DialogClose = Close;
-const DialogContent = ({
-  className,
-  children,
-  ...props
-}) => {
-  const dialogOverlayClasses = stylex.props(dialogOverlayStyles.base);
-  const dialogContentClasses = stylex.props(dialogContentStyles.base);
-  return jsxs(Portal$3, {
-    children: [jsx(Overlay, {
-      ...dialogOverlayClasses
-    }), jsxs(Content$1, {
-      className: `${dialogContentClasses.className} ${className ?? ""}`,
-      ...props,
-      children: [jsx(Description, {}), jsx(Card, {
-        children: children
-      })]
-    })]
-  });
+const DialogContent = ({ className, children, ...props }) => {
+    const { setStyleXProps } = usePreferColors();
+    const dialogOverlayClasses = setStyleXProps(dialogOverlayStyles.base);
+    const dialogContentClasses = setStyleXProps(dialogContentStyles.base);
+    return (jsxs(Portal$3, { children: [jsx(Overlay, { ...dialogOverlayClasses }), jsxs(Content$1, { className: `${dialogContentClasses.className} ${className ?? ""}`, ...props, children: [jsx(Description, {}), jsx(Card, { children: children })] })] }));
 };
-const DialogHeader = ({
-  className,
-  ...props
-}) => {
-  return jsx(Title, {
-    "data-slot": "dialog-title",
-    ...props,
-    children: jsx(CardHeader, {
-      className: className,
-      children: props.children
-    })
-  });
+const DialogHeader = ({ className, ...props }) => {
+    return (jsx(Title, { "data-slot": "dialog-title", ...props, children: jsx(CardHeader, { className: className, children: props.children }) }));
 };
 const DialogFooter = CardFooter;
-const DialogDescription = ({
-  className,
-  ...props
-}) => {
-  return jsx(CardBody, {
-    className: className,
-    children: props.children
-  });
+const DialogDescription = ({ className, ...props }) => {
+    return jsx(CardBody, { className: className, children: props.children });
 };
 const selectIconWrapperStyles = {
@@ -11115,95 +11001,37 @@ const selectGroupLabelStyles = {
  *   </SelectContent>
  * </Select>
  */
-const Select = props => jsx(Root2, {
-  ...props
-});
-const SelectTrigger = ({
-  placeholder,
-  variant = "outline",
-  size = "regular",
-  icon,
-  ...rest
-}) => {
-  const {
-    className,
-    ...otherProps
-  } = rest;
-  const triggerClasses = stylex.props(selectTriggerStyles.base, selectTriggerStyles[variant], selectTriggerStyles[size]);
-  const iconWrapperClasses = stylex.props(selectIconWrapperStyles.base);
-  return jsxs(Trigger$1, {
-    className: `${triggerClasses.className} ${className}`,
-    ...otherProps,
-    children: [icon && jsx("div", {
-      className: iconWrapperClasses.className,
-      children: icon
-    }), jsx(Value, {
-      placeholder: placeholder
-    }), jsx(Icon$1, {
-      className: iconWrapperClasses.className,
-      children: jsx(CaretDownIcon, {})
-    })]
-  });
-};
-const SelectContent = ({
-  children,
-  ...rest
-}) => {
-  const contentClasses = stylex.props(selectContentStyles.base);
-  const {
-    className,
-    position,
-    sideOffset,
-    ...otherProps
-  } = rest;
-  return jsx(Portal$1, {
-    children: jsx(Content2$1, {
-      position: "popper",
-      sideOffset: 7,
-      className: `${contentClasses.className} ${className}`,
-      ...otherProps,
-      children: jsx(Viewport, {
-        children: children
-      })
-    })
-  });
+const Select = (props) => jsx(Root2, { ...props });
+const SelectTrigger = ({ placeholder, variant = "outline", size = "regular", icon, ...rest }) => {
+    const { setStyleXProps } = usePreferColors();
+    const { className, ...otherProps } = rest;
+    const triggerClasses = setStyleXProps(selectTriggerStyles.base, selectTriggerStyles[variant], selectTriggerStyles[size]);
+    const iconWrapperClasses = setStyleXProps(selectIconWrapperStyles.base);
+    return (jsxs(Trigger$1, { className: `${triggerClasses.className} ${className}`, ...otherProps, children: [icon && jsx("div", { className: iconWrapperClasses.className, children: icon }), jsx(Value, { placeholder: placeholder }), jsx(Icon$1, { className: iconWrapperClasses.className, children: jsx(CaretDownIcon, {}) })] }));
+};
+const SelectContent = ({ children, ...rest }) => {
+    const { setStyleXProps } = usePreferColors();
+    const contentClasses = setStyleXProps(selectContentStyles.base);
+    const { className, position, sideOffset, ...otherProps } = rest;
+    return (jsx(Portal$1, { children: jsx(Content2$1, { position: "popper", sideOffset: 7, className: `${contentClasses.className} ${className}`, ...otherProps, children: jsx(Viewport, { children: children }) }) }));
 };
 const SelectGroup = Group;
-const SelectLabel = props => {
-  const groupLabelClasses = stylex.props(selectGroupLabelStyles.base);
-  return jsx(Label, {
-    ...props,
-    className: groupLabelClasses.className
-  });
-};
-const SelectSeparator = props => {
-  const separatorClasses = stylex.props(selectSeparatorStyles.base);
-  return jsx(Separator, {
-    ...props,
-    className: separatorClasses.className
-  });
-};
-const SelectItem = ({
-  indicator,
-  ...rest
-}) => {
-  const itemClasses = stylex.props(selectItemStyles.base);
-  const itemIndicatorClasses = stylex.props(selectItemStyles.indicator);
-  const {
-    className,
-    textValue,
-    ...otherProps
-  } = rest;
-  return jsxs(Item, {
-    className: `${itemClasses.className} ${className}`,
-    ...otherProps,
-    children: [jsx(ItemText, {
-      children: textValue
-    }), indicator && jsx(ItemIndicator, {
-      className: itemIndicatorClasses.className,
-      children: indicator
-    })]
-  });
+const SelectLabel = (props) => {
+    const { setStyleXProps } = usePreferColors();
+    const groupLabelClasses = setStyleXProps(selectGroupLabelStyles.base);
+    return (jsx(Label, { ...props, className: groupLabelClasses.className }));
+};
+const SelectSeparator = (props) => {
+    const { setStyleXProps } = usePreferColors();
+    const separatorClasses = setStyleXProps(selectSeparatorStyles.base);
+    return (jsx(Separator, { ...props, className: separatorClasses.className }));
+};
+const SelectItem = ({ indicator, ...rest }) => {
+    const { setStyleXProps } = usePreferColors();
+    const itemClasses = setStyleXProps(selectItemStyles.base);
+    const itemIndicatorClasses = setStyleXProps(selectItemStyles.indicator);
+    const { className, textValue, ...otherProps } = rest;
+    return (jsxs(Item, { className: `${itemClasses.className} ${className}`, ...otherProps, children: [jsx(ItemText, { children: textValue }), indicator && (jsx(ItemIndicator, { className: itemIndicatorClasses.className, children: indicator }))] }));
 };
 Select.displayName = "Select";
 SelectTrigger.displayName = "SelectTrigger";
@@ -11353,70 +11181,41 @@ const verticalMenuStyles = {
 };
 const VerticalMenusContext = createContext({
-  value: "",
-  disabled: false,
-  setSelectedMenu: () => {}
+    value: "",
+    disabled: false,
+    setSelectedMenu: () => { },
 });
-const VerticalMenus = React__default.forwardRef(({
-  disabled,
-  value,
-  onValueChange,
-  className,
-  ...rest
-}, ref) => {
-  const [selectedMenu, setSelectedMenu] = React__default.useState(value || "");
-  const verticalMenusClasses = stylex.props(verticalMenusWrapperStyles.base);
-  useEffect(() => {
-    if (!onValueChange) return;
-    onValueChange(selectedMenu);
-  }, [selectedMenu]);
-  return jsx(VerticalMenusContext, {
-    value: {
-      value: selectedMenu,
-      disabled: disabled ?? false,
-      setSelectedMenu
-    },
-    children: jsx("div", {
-      ref: ref,
-      className: `${verticalMenusClasses.className} ${className || ""}`,
-      ...rest,
-      children: rest.children
-    })
-  });
+const VerticalMenus = React__default.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const [selectedMenu, setSelectedMenu] = React__default.useState(value || "");
+    const verticalMenusClasses = setStyleXProps(verticalMenusWrapperStyles.base);
+    useEffect(() => {
+        if (!onValueChange)
+            return;
+        onValueChange(selectedMenu);
+    }, [selectedMenu]);
+    return (jsx(VerticalMenusContext, { value: {
+            value: selectedMenu,
+            disabled: disabled ?? false,
+            setSelectedMenu,
+        }, children: jsx("div", { ref: ref, className: `${verticalMenusClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
 });
-const VerticalMenu = React__default.forwardRef(({
-  disabled,
-  value,
-  label,
-  icon,
-  variant = "accent",
-  size = "regular",
-  ...rest
-}, ref) => {
-  const context = useContext(VerticalMenusContext);
-  const isSelected = context.value === value;
-  const isDisabled = context.disabled || disabled || false;
-  const verticalMenuClasses = stylex.props(verticalMenuStyles.base, verticalMenuStyles[variant], verticalMenuStyles[size]);
-  const verticalMenuIconClasses = stylex.props(verticalMenuIconStyles.base);
-  const onClick = e => {
-    if (isDisabled) return;
-    if (context.disabled) return;
-    context.setSelectedMenu?.(value);
-    rest.onClick?.(e);
-  };
-  return jsxs("button", {
-    ref: ref,
-    className: `${verticalMenuClasses.className} ${rest.className || ""}`,
-    ...rest,
-    disabled: isDisabled,
-    value: value,
-    "data-selected": isSelected,
-    onClick: onClick,
-    children: [icon && jsx("span", {
-      ...verticalMenuIconClasses,
-      children: icon
-    }), label]
-  });
+const VerticalMenu = React__default.forwardRef(({ disabled, value, label, icon, variant = "accent", size = "regular", ...rest }, ref) => {
+    const context = useContext(VerticalMenusContext);
+    const { setStyleXProps } = usePreferColors();
+    const isSelected = context.value === value;
+    const isDisabled = context.disabled || disabled || false;
+    const verticalMenuClasses = setStyleXProps(verticalMenuStyles.base, verticalMenuStyles[variant], verticalMenuStyles[size]);
+    const verticalMenuIconClasses = setStyleXProps(verticalMenuIconStyles.base);
+    const onClick = (e) => {
+        if (isDisabled)
+            return;
+        if (context.disabled)
+            return;
+        context.setSelectedMenu?.(value);
+        rest.onClick?.(e);
+    };
+    return (jsxs("button", { ref: ref, className: `${verticalMenuClasses.className} ${rest.className || ""}`, ...rest, disabled: isDisabled, value: value, "data-selected": isSelected, onClick: onClick, children: [icon && jsx("span", { ...verticalMenuIconClasses, children: icon }), label] }));
 });
 VerticalMenu.displayName = "VerticalMenu";
@@ -11546,78 +11345,40 @@ const horizontalTabStyles = {
 };
 const HorizontalTabContext = React__default.createContext({
-  value: "",
-  disabled: false,
-  setSelectedTab: () => {}
+    value: "",
+    disabled: false,
+    setSelectedTab: () => { },
 });
-const HorizontalTabs = React__default.forwardRef(({
-  disabled,
-  value,
-  onValueChange,
-  className,
-  ...rest
-}, ref) => {
-  const [selectedTab, setSelectedTab] = React__default.useState(value || "");
-  const horizontalTabClasses = stylex.props(horizontalTabWrapperStyles.base);
-  React__default.useEffect(() => {
-    if (!onValueChange) return;
-    onValueChange(selectedTab);
-  }, [selectedTab]);
-  return jsx(HorizontalTabContext.Provider, {
-    value: {
-      value: selectedTab,
-      disabled: disabled ?? false,
-      setSelectedTab
-    },
-    children: jsx("div", {
-      ref: ref,
-      className: `${horizontalTabClasses.className} ${className || ""}`,
-      ...rest,
-      children: rest.children
-    })
-  });
+const HorizontalTabs = React__default.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const [selectedTab, setSelectedTab] = React__default.useState(value || "");
+    const horizontalTabClasses = setStyleXProps(horizontalTabWrapperStyles.base);
+    React__default.useEffect(() => {
+        if (!onValueChange)
+            return;
+        onValueChange(selectedTab);
+    }, [selectedTab]);
+    return (jsx(HorizontalTabContext.Provider, { value: {
+            value: selectedTab,
+            disabled: disabled ?? false,
+            setSelectedTab,
+        }, children: jsx("div", { ref: ref, className: `${horizontalTabClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
 });
-const HorizontalTab = React__default.forwardRef(({
-  value,
-  label,
-  className,
-  icon,
-  size = "regular",
-  ...rest
-}, ref) => {
-  const {
-    value: selectedTab,
-    setSelectedTab,
-    disabled
-  } = React__default.useContext(HorizontalTabContext);
-  const isSelected = selectedTab === value;
-  const isDisabled = disabled || rest.disabled;
-  const handleClick = () => {
-    if (isDisabled) return;
-    setSelectedTab(value);
-  };
-  const horizontalTabClasses = stylex.props(horizontalTabStyles.base);
-  const iconClasses = stylex.props(horizontalTabStyles.icon, size === "small" && horizontalTabStyles.iconSmall);
-  const lineClasses = stylex.props(horizontalTabStyles.line);
-  const labelWrapperClasses = stylex.props(horizontalTabStyles.labelWrapper, horizontalTabStyles[size || "regular"]);
-  return jsxs("button", {
-    ref: ref,
-    className: `${horizontalTabClasses.className} ${className || ""}`,
-    onClick: handleClick,
-    disabled: isDisabled,
-    "data-selected": isSelected,
-    ...rest,
-    children: [jsxs("div", {
-      ...labelWrapperClasses,
-      children: [icon && jsx("span", {
-        ...iconClasses,
-        children: icon
-      }), label]
-    }), jsx("div", {
-      ...lineClasses,
-      "data-selected": isSelected
-    })]
-  });
+const HorizontalTab = React__default.forwardRef(({ value, label, className, icon, size = "regular", ...rest }, ref) => {
+    const { value: selectedTab, setSelectedTab, disabled, } = React__default.useContext(HorizontalTabContext);
+    const { setStyleXProps } = usePreferColors();
+    const isSelected = selectedTab === value;
+    const isDisabled = disabled || rest.disabled;
+    const handleClick = () => {
+        if (isDisabled)
+            return;
+        setSelectedTab(value);
+    };
+    const horizontalTabClasses = setStyleXProps(horizontalTabStyles.base);
+    const iconClasses = setStyleXProps(horizontalTabStyles.icon, size === "small" && horizontalTabStyles.iconSmall);
+    const lineClasses = setStyleXProps(horizontalTabStyles.line);
+    const labelWrapperClasses = setStyleXProps(horizontalTabStyles.labelWrapper, horizontalTabStyles[size || "regular"]);
+    return (jsxs("button", { ref: ref, className: `${horizontalTabClasses.className} ${className || ""}`, onClick: handleClick, disabled: isDisabled, "data-selected": isSelected, ...rest, children: [jsxs("div", { ...labelWrapperClasses, children: [icon && jsx("span", { ...iconClasses, children: icon }), label] }), jsx("div", { ...lineClasses, "data-selected": isSelected })] }));
 });
 const modeTabWrapperStyles = {
@@ -11730,69 +11491,38 @@ const modeTabStyles = {
 };
 const ModeTabContext = React__default.createContext({
-  value: "",
-  disabled: false,
-  setSelectedTab: () => {}
+    value: "",
+    disabled: false,
+    setSelectedTab: () => { },
 });
-const ModeTabs = React__default.forwardRef(({
-  disabled,
-  value,
-  onValueChange,
-  className,
-  ...rest
-}, ref) => {
-  const [selectedTab, setSelectedTab] = React__default.useState(value || "");
-  const modeTabsClasses = stylex.props(modeTabWrapperStyles.base);
-  React__default.useEffect(() => {
-    if (!onValueChange) return;
-    onValueChange(selectedTab);
-  }, [selectedTab]);
-  return jsx(ModeTabContext, {
-    value: {
-      value: selectedTab,
-      disabled: disabled ?? false,
-      setSelectedTab
-    },
-    children: jsx("div", {
-      ref: ref,
-      className: `${modeTabsClasses.className} ${className || ""}`,
-      ...rest,
-      children: rest.children
-    })
-  });
+const ModeTabs = React__default.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const [selectedTab, setSelectedTab] = React__default.useState(value || "");
+    const modeTabsClasses = setStyleXProps(modeTabWrapperStyles.base);
+    React__default.useEffect(() => {
+        if (!onValueChange)
+            return;
+        onValueChange(selectedTab);
+    }, [selectedTab]);
+    return (jsx(ModeTabContext, { value: {
+            value: selectedTab,
+            disabled: disabled ?? false,
+            setSelectedTab,
+        }, children: jsx("div", { ref: ref, className: `${modeTabsClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
 });
-const ModeTab = React__default.forwardRef(({
-  label,
-  icon,
-  value,
-  className,
-  ...rest
-}, ref) => {
-  const modeTabClasses = stylex.props(modeTabStyles.base);
-  const iconClasses = stylex.props(modeTabStyles.icon);
-  const {
-    value: selectedTab,
-    disabled,
-    setSelectedTab
-  } = React__default.useContext(ModeTabContext);
-  const isSelected = selectedTab === value;
-  const isDisabled = disabled || rest.disabled;
-  const handleClick = () => {
-    if (isDisabled) return;
-    setSelectedTab(value);
-  };
-  return jsxs("button", {
-    ref: ref,
-    className: `${modeTabClasses.className} ${className || ""}`,
-    "data-selected": isSelected,
-    disabled: isDisabled,
-    onClick: handleClick,
-    ...rest,
-    children: [icon && jsx("span", {
-      ...iconClasses,
-      children: icon
-    }), label]
-  });
+const ModeTab = React__default.forwardRef(({ label, icon, value, className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const modeTabClasses = setStyleXProps(modeTabStyles.base);
+    const iconClasses = setStyleXProps(modeTabStyles.icon);
+    const { value: selectedTab, disabled, setSelectedTab, } = React__default.useContext(ModeTabContext);
+    const isSelected = selectedTab === value;
+    const isDisabled = disabled || rest.disabled;
+    const handleClick = () => {
+        if (isDisabled)
+            return;
+        setSelectedTab(value);
+    };
+    return (jsxs("button", { ref: ref, className: `${modeTabClasses.className} ${className || ""}`, "data-selected": isSelected, disabled: isDisabled, onClick: handleClick, ...rest, children: [icon && jsx("span", { ...iconClasses, children: icon }), label] }));
 });
 const tooltipDescriptionStyles = {
@@ -11958,94 +11688,40 @@ const tooltipShortStyles = {
   }
 };
-const Tooltip = props => {
-  const {
-    delayDuration,
-    skipDelayDuration,
-    disableHoverableContent,
-    ...rest
-  } = props;
-  return jsx(Provider, {
-    delayDuration: delayDuration,
-    skipDelayDuration: skipDelayDuration,
-    disableHoverableContent: disableHoverableContent,
-    children: jsx(Root3, {
-      ...rest,
-      children: props.children
-    })
-  });
+const Tooltip = (props) => {
+    const { delayDuration, skipDelayDuration, disableHoverableContent, ...rest } = props;
+    return (jsx(Provider, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, disableHoverableContent: disableHoverableContent, children: jsx(Root3, { ...rest, children: props.children }) }));
 };
 const TooltipTrigger = Trigger;
-const TooltipContent = ({
-  type,
-  ...rest
-}) => {
-  if (type === "default") {
-    const contentClasses = stylex.props(tooltipDescriptionStyles.base);
-    const {
-      className,
-      ...otherProps
-    } = rest;
-    return jsx(Portal, {
-      children: jsx(Content2, {
-        className: `${contentClasses.className} ${className}`,
-        ...otherProps,
-        children: rest.children
-      })
-    });
-  }
-  const {
-    variant = "default",
-    size = "regular"
-  } = rest;
-  const contentClasses = stylex.props(tooltipShortStyles.base, type === "short" && tooltipShortStyles[variant], type === "short" && tooltipShortStyles[size]);
-  return jsx(Portal, {
-    children: jsx(Content2, {
-      className: contentClasses.className,
-      ...rest,
-      children: rest.children
-    })
-  });
+const TooltipContent = ({ type, ...rest }) => {
+    const { setStyleXProps } = usePreferColors();
+    if (type === "default") {
+        const contentClasses = setStyleXProps(tooltipDescriptionStyles.base);
+        const { className, ...otherProps } = rest;
+        return (jsx(Portal, { children: jsx(Content2, { className: `${contentClasses.className} ${className}`, ...otherProps, children: rest.children }) }));
+    }
+    const { variant = "default", size = "regular" } = rest;
+    const contentClasses = setStyleXProps(tooltipShortStyles.base, type === "short" && tooltipShortStyles[variant], type === "short" && tooltipShortStyles[size]);
+    return (jsx(Portal, { children: jsx(Content2, { className: contentClasses.className, ...rest, children: rest.children }) }));
 };
 const TooltipArrow = Arrow2;
 const TooltipHeader = React__default.forwardRef((props, ref) => {
-  const {
-    className,
-    ...otherProps
-  } = props;
-  const headerClasses = stylex.props(tooltipDescriptionStyles.header);
-  return jsx("div", {
-    className: `${headerClasses.className} ${className}`,
-    ...otherProps,
-    ref: ref,
-    children: props.children
-  });
+    const { className, ...otherProps } = props;
+    const { setStyleXProps } = usePreferColors();
+    const headerClasses = setStyleXProps(tooltipDescriptionStyles.header);
+    return (jsx("div", { className: `${headerClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
 });
 const TooltipDescription = React__default.forwardRef((props, ref) => {
-  const {
-    className,
-    ...otherProps
-  } = props;
-  const descriptionClasses = stylex.props(tooltipDescriptionStyles.content);
-  return jsx("div", {
-    className: `${descriptionClasses.className} ${className}`,
-    ...otherProps,
-    ref: ref,
-    children: props.children
-  });
+    const { className, ...otherProps } = props;
+    const { setStyleXProps } = usePreferColors();
+    const descriptionClasses = setStyleXProps(tooltipDescriptionStyles.content);
+    return (jsx("div", { className: `${descriptionClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
 });
 const TooltipFooter = React__default.forwardRef((props, ref) => {
-  const {
-    className,
-    ...otherProps
-  } = props;
-  const footerClasses = stylex.props(tooltipDescriptionStyles.footer);
-  return jsx("div", {
-    className: `${footerClasses.className} ${className}`,
-    ...otherProps,
-    ref: ref,
-    children: props.children
-  });
+    const { className, ...otherProps } = props;
+    const { setStyleXProps } = usePreferColors();
+    const footerClasses = setStyleXProps(tooltipDescriptionStyles.footer);
+    return (jsx("div", { className: `${footerClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
 });
 const tagStyles = {
@@ -12336,46 +12012,21 @@ const tagStyles = {
   }
 };
-const Tag = React__default.forwardRef(({
-  icon,
-  value,
-  variant = "filled",
-  size = "regular",
-  className,
-  onDeleteClick,
-  onClick,
-  ...props
-}, ref) => {
-  const [isSelected, setIsSelected] = React__default.useState(false);
-  const handleClick = event => {
-    setIsSelected(prev => !prev);
-    onClick?.(event);
-  };
-  const tagClasses = stylex.props(tagStyles.base, tagStyles[variant], tagStyles[size]);
-  const iconClasses = stylex.props(tagStyles.icon);
-  const textClasses = stylex.props(tagStyles.text);
-  const handleDeleteClick = event => {
-    event.stopPropagation();
-    onDeleteClick?.(value, event);
-  };
-  return jsxs("button", {
-    ref: ref,
-    className: `${tagClasses.className} ${className ?? ""}`,
-    onClick: handleClick,
-    "data-selected": isSelected,
-    ...props,
-    children: [icon && jsx("span", {
-      className: iconClasses.className,
-      children: icon
-    }), jsx("span", {
-      ...textClasses,
-      children: value.label
-    }), onDeleteClick && jsx("span", {
-      className: iconClasses.className,
-      onClick: handleDeleteClick,
-      children: jsx(X, {})
-    })]
-  });
+const Tag = React__default.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const [isSelected, setIsSelected] = React__default.useState(false);
+    const handleClick = (event) => {
+        setIsSelected((prev) => !prev);
+        onClick?.(event);
+    };
+    const tagClasses = setStyleXProps(tagStyles.base, tagStyles[variant], tagStyles[size]);
+    const iconClasses = setStyleXProps(tagStyles.icon);
+    const textClasses = setStyleXProps(tagStyles.text);
+    const handleDeleteClick = (event) => {
+        event.stopPropagation();
+        onDeleteClick?.(value, event);
+    };
+    return (jsxs("button", { ref: ref, className: `${tagClasses.className} ${className ?? ""}`, onClick: handleClick, "data-selected": isSelected, ...props, children: [icon && jsx("span", { className: iconClasses.className, children: icon }), jsx("span", { ...textClasses, children: value.label }), onDeleteClick && (jsx("span", { className: iconClasses.className, onClick: handleDeleteClick, children: jsx(X, {}) }))] }));
 });
 Tag.displayName = "Tag";
@@ -12750,245 +12401,131 @@ const multipleSelectItemStyles = {
 };
 const MultipleSelectContext = React__default.createContext({
-  isOpen: false,
-  values: [],
-  disabled: false,
-  setSelectedValues: () => {},
-  setIsOpen: () => {}
+    isOpen: false,
+    values: [],
+    disabled: false,
+    setSelectedValues: () => { },
+    setIsOpen: () => { },
 });
-const MultipleSelect = React__default.forwardRef(({
-  open,
-  onOpenChange,
-  disabled,
-  value,
-  onValueChange,
-  className,
-  children,
-  ...rest
-}, ref) => {
-  const [isOpen, setIsOpen] = React__default.useState(open || false);
-  const [selectedValues, setSelectedValues] = React__default.useState([]);
-  const wrapperStyles = stylex.props(multipleSelectWrapperStyles.base);
-  useEffect(() => {
-    setIsOpen(open || false);
-  }, [open]);
-  const onSelectedValuesChange = newValues => {
-    setSelectedValues(newValues);
-    onValueChange?.(newValues.map(value => ({
-      value: value.value,
-      label: value.label
-    })));
-  };
-  const onTriggerOpenChange = value => {
-    setIsOpen(value);
-    onOpenChange?.(value);
-  };
-  return jsx(MultipleSelectContext, {
-    value: {
-      isOpen,
-      values: selectedValues,
-      disabled: disabled || false,
-      setSelectedValues: onSelectedValuesChange,
-      setIsOpen: onTriggerOpenChange
-    },
-    children: jsx("div", {
-      ref: ref,
-      className: `${wrapperStyles.className} ${className ?? ""}`,
-      ...rest,
-      children: children
-    })
-  });
-});
-const MultipleSelectTrigger = React__default.forwardRef(({
-  size = "regular",
-  children,
-  ...rest
-}, ref) => {
-  const {
-    className,
-    onClick,
-    ...otherProps
-  } = rest;
-  const {
-    disabled,
-    values,
-    isOpen,
-    setIsOpen
-  } = React__default.useContext(MultipleSelectContext);
-  const triggerStyles = stylex.props(multipleSelectTriggerStyles.base, multipleSelectTriggerStyles[size]);
-  const arrowStyles = stylex.props(multipleSelectTriggerStyles.arrow);
-  const handleTriggerClick = e => {
-    e.stopPropagation();
-    if (disabled) return;
-    const value = !isOpen;
-    setIsOpen(value);
-    onClick?.(e);
-  };
-  return jsxs("div", {
-    ref: ref,
-    className: `${triggerStyles.className} ${className ?? ""}`,
-    "data-disabled": disabled,
-    "data-selected": values.length > 0,
-    onClick: handleTriggerClick,
-    ...otherProps,
-    children: [children, jsx("span", {
-      ...arrowStyles,
-      children: jsx(ChevronDown, {
-        size: 16
-      })
-    })]
-  });
-});
-const MultipleSelectValue = React__default.forwardRef(({
-  placeholder,
-  className,
-  ...rest
-}, ref) => {
-  const {
-    values,
-    disabled,
-    setSelectedValues
-  } = React__default.useContext(MultipleSelectContext);
-  const [content, setContent] = React__default.useState(null);
-  const composedRefs = useComposedRefs(ref, node => setContent(node));
-  const valueStyles = stylex.props(multipleSelectTriggerStyles.value);
-  const tagStyles = stylex.props(multipleSelectTriggerStyles.tag);
-  const placeholderStyles = stylex.props(multipleSelectTriggerStyles.placeholder);
-  const onDeleteClick = (value, e) => {
-    e.stopPropagation();
-    const newValues = values.filter(v => v.value !== value.id);
-    setSelectedValues(newValues);
-  };
-  return jsx("div", {
-    ref: composedRefs,
-    style: {
-      "--select-content-width": `${content?.offsetWidth}px`
-    },
-    className: `${valueStyles.className} ${className ?? ""}`,
-    ...rest,
-    children: values?.length > 0 ? values.map(val => jsx(Tag, {
-      value: {
-        id: val.value,
-        label: val.label
-      },
-      disabled: disabled,
-      className: tagStyles.className,
-      onDeleteClick: onDeleteClick
-    }, val.value)) : jsx("span", {
-      "data-disabled": disabled,
-      ...placeholderStyles,
-      children: placeholder || "Select options"
-    })
-  });
+const MultipleSelect = React__default.forwardRef(({ open, onOpenChange, disabled, value, onValueChange, className, children, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const [isOpen, setIsOpen] = React__default.useState(open || false);
+    const [selectedValues, setSelectedValues] = React__default.useState([]);
+    const wrapperStyles = setStyleXProps(multipleSelectWrapperStyles.base);
+    useEffect(() => {
+        setIsOpen(open || false);
+    }, [open]);
+    const onSelectedValuesChange = (newValues) => {
+        setSelectedValues(newValues);
+        onValueChange?.(newValues.map((value) => ({ value: value.value, label: value.label })));
+    };
+    const onTriggerOpenChange = (value) => {
+        setIsOpen(value);
+        onOpenChange?.(value);
+    };
+    return (jsx(MultipleSelectContext, { value: {
+            isOpen,
+            values: selectedValues,
+            disabled: disabled || false,
+            setSelectedValues: onSelectedValuesChange,
+            setIsOpen: onTriggerOpenChange,
+        }, children: jsx("div", { ref: ref, className: `${wrapperStyles.className} ${className ?? ""}`, ...rest, children: children }) }));
 });
-const MultipleSelectContent = React__default.forwardRef(({
-  useSearch,
-  options: optionsProps,
-  indicator,
-  className,
-  ...rest
-}, ref) => {
-  const {
-    isOpen,
-    setIsOpen
-  } = React__default.useContext(MultipleSelectContext);
-  const contentStyles = stylex.props(multipleSelectContentStyles.base);
-  const optionsStyles = stylex.props(multipleSelectContentStyles.options);
-  const searchStyles = stylex.props(multipleSelectContentStyles.search);
-  const [content, setContent] = React__default.useState(null);
-  const composedRefs = useComposedRefs(ref, node => setContent(node));
-  const [options, setOptions] = useState(optionsProps);
-  useEffect(() => {
-    if (isOpen) return;
-    setOptions(optionsProps);
-  }, [isOpen]);
-  const handleSearchChange = e => {
-    const searchValue = e.target.value.toLowerCase();
-    if (!searchValue) {
-      setOptions(optionsProps);
-      return;
-    }
-    const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue));
-    setOptions(filteredOptions);
-  };
-  React__default.useEffect(() => {
-    const handleMouseUp = event => {
-      if (!content?.contains(event.target)) {
-        setIsOpen(false);
-      }
+const MultipleSelectTrigger = React__default.forwardRef(({ size = "regular", children, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const { className, onClick, ...otherProps } = rest;
+    const { disabled, values, isOpen, setIsOpen } = React__default.useContext(MultipleSelectContext);
+    const triggerStyles = setStyleXProps(multipleSelectTriggerStyles.base, multipleSelectTriggerStyles[size]);
+    const arrowStyles = setStyleXProps(multipleSelectTriggerStyles.arrow);
+    const handleTriggerClick = (e) => {
+        e.stopPropagation();
+        if (disabled)
+            return;
+        const value = !isOpen;
+        setIsOpen(value);
+        onClick?.(e);
     };
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mouseup", handleMouseUp);
+    return (jsxs("div", { ref: ref, className: `${triggerStyles.className} ${className ?? ""}`, "data-disabled": disabled, "data-selected": values.length > 0, onClick: handleTriggerClick, ...otherProps, children: [children, jsx("span", { ...arrowStyles, children: jsx(ChevronDown, { size: 16 }) })] }));
+});
+const MultipleSelectValue = React__default.forwardRef(({ placeholder, className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const { values, disabled, setSelectedValues } = React__default.useContext(MultipleSelectContext);
+    const [content, setContent] = React__default.useState(null);
+    const composedRefs = useComposedRefs(ref, (node) => setContent(node));
+    const valueStyles = setStyleXProps(multipleSelectTriggerStyles.value);
+    const tagStyles = setStyleXProps(multipleSelectTriggerStyles.tag);
+    const placeholderStyles = setStyleXProps(multipleSelectTriggerStyles.placeholder);
+    const onDeleteClick = (value, e) => {
+        e.stopPropagation();
+        const newValues = values.filter((v) => v.value !== value.id);
+        setSelectedValues(newValues);
     };
-  }, [setIsOpen, content]);
-  React__default.useEffect(() => {
-    const close = () => setIsOpen(false);
-    window.addEventListener("blur", close);
-    window.addEventListener("resize", close);
-    return () => {
-      window.removeEventListener("blur", close);
-      window.removeEventListener("resize", close);
+    return (jsx("div", { ref: composedRefs, style: {
+            "--select-content-width": `${content?.offsetWidth}px`,
+        }, className: `${valueStyles.className} ${className ?? ""}`, ...rest, children: values?.length > 0 ? (values.map((val) => (jsx(Tag, { value: { id: val.value, label: val.label }, disabled: disabled, className: tagStyles.className, onDeleteClick: onDeleteClick }, val.value)))) : (jsx("span", { "data-disabled": disabled, ...placeholderStyles, children: placeholder || "Select options" })) }));
+});
+const MultipleSelectContent = React__default.forwardRef(({ useSearch, options: optionsProps, indicator, className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const { isOpen, setIsOpen } = React__default.useContext(MultipleSelectContext);
+    const contentStyles = setStyleXProps(multipleSelectContentStyles.base);
+    const optionsStyles = setStyleXProps(multipleSelectContentStyles.options);
+    const searchStyles = setStyleXProps(multipleSelectContentStyles.search);
+    const [content, setContent] = React__default.useState(null);
+    const composedRefs = useComposedRefs(ref, (node) => setContent(node));
+    const [options, setOptions] = useState(optionsProps);
+    useEffect(() => {
+        if (isOpen)
+            return;
+        setOptions(optionsProps);
+    }, [isOpen]);
+    const handleSearchChange = (e) => {
+        const searchValue = e.target.value.toLowerCase();
+        if (!searchValue) {
+            setOptions(optionsProps);
+            return;
+        }
+        const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchValue));
+        setOptions(filteredOptions);
     };
-  }, [setIsOpen]);
-  return isOpen && jsxs("div", {
-    ref: composedRefs,
-    className: `${contentStyles.className} ${className ?? ""}`,
-    ...rest,
-    children: [useSearch && jsx("div", {
-      ...searchStyles,
-      children: jsx(Input, {
-        onChange: handleSearchChange,
-        leftIcon: jsx(MagnifyingGlassIcon, {
-          width: 20,
-          height: 20
-        }),
-        placeholder: "Enter any characters..."
-      })
-    }), jsx("ul", {
-      ...optionsStyles,
-      children: options.map(option => jsx(MultipleSelectItem, {
-        option: option,
-        indicator: indicator
-      }, option.value))
-    })]
-  });
+    React__default.useEffect(() => {
+        const handleMouseUp = (event) => {
+            if (!content?.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [setIsOpen, content]);
+    React__default.useEffect(() => {
+        const close = () => setIsOpen(false);
+        window.addEventListener("blur", close);
+        window.addEventListener("resize", close);
+        return () => {
+            window.removeEventListener("blur", close);
+            window.removeEventListener("resize", close);
+        };
+    }, [setIsOpen]);
+    return (isOpen && (jsxs("div", { ref: composedRefs, className: `${contentStyles.className} ${className ?? ""}`, ...rest, children: [useSearch && (jsx("div", { ...searchStyles, children: jsx(Input, { onChange: handleSearchChange, leftIcon: jsx(MagnifyingGlassIcon, { width: 20, height: 20 }), placeholder: "Enter any characters..." }) })), jsx("ul", { ...optionsStyles, children: options.map((option) => (jsx(MultipleSelectItem, { option: option, indicator: indicator }, option.value))) })] })));
 });
-const MultipleSelectItem = React__default.forwardRef(({
-  option,
-  indicator,
-  className,
-  ...rest
-}, ref) => {
-  const {
-    values,
-    setSelectedValues
-  } = React__default.useContext(MultipleSelectContext);
-  const isSelected = values.some(val => val.value === option.value);
-  const itemStyles = stylex.props(multipleSelectItemStyles.base);
-  const indicatorStyles = stylex.props(multipleSelectItemStyles.indicator);
-  const itemLabelStyles = stylex.props(multipleSelectItemStyles.label);
-  const handleClick = e => {
-    e.stopPropagation();
-    if (option.disabled) return;
-    const newValues = isSelected ? values.filter(val => val.value !== option.value) : [...values, option];
-    setSelectedValues(newValues);
-  };
-  return jsxs("li", {
-    ref: ref,
-    "data-selected": isSelected,
-    "data-disabled": option.disabled,
-    className: `${itemStyles.className} ${className}`,
-    onClick: handleClick,
-    ...rest,
-    children: [jsx("span", {
-      className: itemLabelStyles.className,
-      children: option.label
-    }), indicator && isSelected && jsx("span", {
-      ...indicatorStyles,
-      children: indicator
-    })]
-  });
+const MultipleSelectItem = React__default.forwardRef(({ option, indicator, className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const { values, setSelectedValues } = React__default.useContext(MultipleSelectContext);
+    const isSelected = values.some((val) => val.value === option.value);
+    const itemStyles = setStyleXProps(multipleSelectItemStyles.base);
+    const indicatorStyles = setStyleXProps(multipleSelectItemStyles.indicator);
+    const itemLabelStyles = setStyleXProps(multipleSelectItemStyles.label);
+    const handleClick = (e) => {
+        e.stopPropagation();
+        if (option.disabled)
+            return;
+        const newValues = isSelected
+            ? values.filter((val) => val.value !== option.value)
+            : [...values, option];
+        setSelectedValues(newValues);
+    };
+    return (jsxs("li", { ref: ref, "data-selected": isSelected, "data-disabled": option.disabled, className: `${itemStyles.className} ${className}`, onClick: handleClick, ...rest, children: [jsx("span", { className: itemLabelStyles.className, children: option.label }), indicator && isSelected && jsx("span", { ...indicatorStyles, children: indicator })] }));
 });
 const tableStyles = {
@@ -13057,99 +12594,35 @@ const tableStyles = {
   }
 };
-const Table = React__default.forwardRef(({
-  className,
-  ...rest
-}, ref) => {
-  const tableClasses = stylex.props(tableStyles.table);
-  return jsx("table", {
-    ref: ref,
-    className: `${tableClasses.className} ${className ?? ""}`,
-    ...rest
-  });
+const Table = React__default.forwardRef(({ className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const tableClasses = setStyleXProps(tableStyles.table);
+    return (jsx("table", { ref: ref, className: `${tableClasses.className} ${className ?? ""}`, ...rest }));
 });
-const TableHeader = React__default.forwardRef(({
-  className,
-  ...rest
-}, ref) => {
-  const headerRowClasses = stylex.props(tableStyles.theadTR);
-  return jsx("thead", {
-    children: jsx("tr", {
-      ref: ref,
-      className: `${headerRowClasses.className} ${className ?? ""}`,
-      ...rest
-    })
-  });
+const TableHeader = React__default.forwardRef(({ className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const headerRowClasses = setStyleXProps(tableStyles.theadTR);
+    return (jsx("thead", { children: jsx("tr", { ref: ref, className: `${headerRowClasses.className} ${className ?? ""}`, ...rest }) }));
 });
-const TableBody = React__default.forwardRef(({
-  ...rest
-}, ref) => {
-  return jsx("tbody", {
-    ref: ref,
-    ...rest
-  });
+const TableBody = React__default.forwardRef(({ ...rest }, ref) => {
+    return jsx("tbody", { ref: ref, ...rest });
 });
-const TableRow = React__default.forwardRef(({
-  isSelected,
-  shouldLastBorderRender = true,
-  className,
-  ...rest
-}, ref) => {
-  const rowClasses = stylex.props(tableStyles.tr);
-  return jsx("tr", {
-    ref: ref,
-    "data-selected": isSelected,
-    "data-last-border": shouldLastBorderRender,
-    className: `${rowClasses.className} ${className ?? ""}`,
-    ...rest
-  });
+const TableRow = React__default.forwardRef(({ isSelected, shouldLastBorderRender = true, className, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const rowClasses = setStyleXProps(tableStyles.tr);
+    return (jsx("tr", { ref: ref, "data-selected": isSelected, "data-last-border": shouldLastBorderRender, className: `${rowClasses.className} ${className ?? ""}`, ...rest }));
 });
-const TableHead = React__default.forwardRef(({
-  className,
-  children,
-  ...rest
-}, ref) => {
-  const headClasses = stylex.props(tableStyles.cell, tableStyles.th);
-  const contentClasses = stylex.props(tableStyles.content);
-  return jsx("th", {
-    ref: ref,
-    className: `${headClasses.className} ${className ?? ""}`,
-    ...rest,
-    children: jsx("div", {
-      className: contentClasses.className,
-      children: children
-    })
-  });
+const TableHead = React__default.forwardRef(({ className, children, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const headClasses = setStyleXProps(tableStyles.cell, tableStyles.th);
+    const contentClasses = setStyleXProps(tableStyles.content);
+    return (jsx("th", { ref: ref, className: `${headClasses.className} ${className ?? ""}`, ...rest, children: jsx("div", { className: contentClasses.className, children: children }) }));
 });
-const TableCell = React__default.forwardRef(({
-  className,
-  children,
-  showTooltip,
-  ...rest
-}, ref) => {
-  const cellClasses = stylex.props(tableStyles.cell, tableStyles.td);
-  const contentClasses = stylex.props(tableStyles.content);
-  return jsx("td", {
-    ref: ref,
-    className: `${cellClasses.className} ${className ?? ""}`,
-    ...rest,
-    children: showTooltip ? jsxs(Tooltip, {
-      children: [jsx(TooltipTrigger, {
-        asChild: true,
-        children: jsx("span", {
-          children: children
-        })
-      }), jsx(TooltipContent, {
-        type: "short",
-        side: "bottom",
-        sideOffset: 10,
-        children: children
-      })]
-    }) : jsx("div", {
-      className: contentClasses.className,
-      children: children
-    })
-  });
+const TableCell = React__default.forwardRef(({ className, children, showTooltip, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const cellClasses = setStyleXProps(tableStyles.cell, tableStyles.td);
+    const contentClasses = setStyleXProps(tableStyles.content);
+    return (jsx("td", { ref: ref, className: `${cellClasses.className} ${className ?? ""}`, ...rest, children: showTooltip ? (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { children: children }) }), jsx(TooltipContent, { type: "short", side: "bottom", sideOffset: 10, children: children })] })) : (jsx("div", { className: contentClasses.className, children: children })) }));
 });
 const DataTable = ({ config, data, emptyMessage, onRowClick, enableSelection = false, shouldLastBorderRender = true, classNames, refs, }) => {
@@ -13247,97 +12720,39 @@ const paginationStyles = {
   }
 };
-const Pagination = ({
-  className,
-  ...props
-}) => {
-  const paginationClasses = stylex.props(paginationStyles.pagination);
-  return jsx("nav", {
-    role: "navigation",
-    "aria-label": "pagination",
-    "data-slot": "pagination",
-    className: `${paginationClasses.className} ${className ?? ""}`,
-    ...props
-  });
+const Pagination = ({ className, ...props }) => {
+    const { setStyleXProps } = usePreferColors();
+    const paginationClasses = setStyleXProps(paginationStyles.pagination);
+    return (jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: `${paginationClasses.className} ${className ?? ""}`, ...props }));
 };
-const PaginationContent = ({
-  className,
-  ...props
-}) => {
-  const contentClasses = stylex.props(paginationStyles.content);
-  return jsx("ul", {
-    "data-slot": "pagination-content",
-    className: `${contentClasses.className} ${className ?? ""}`,
-    ...props
-  });
+const PaginationContent = ({ className, ...props }) => {
+    const { setStyleXProps } = usePreferColors();
+    const contentClasses = setStyleXProps(paginationStyles.content);
+    return (jsx("ul", { "data-slot": "pagination-content", className: `${contentClasses.className} ${className ?? ""}`, ...props }));
 };
-const PaginationItem = props => {
-  return jsx("li", {
-    "data-slot": "pagination-item",
-    ...props
-  });
+const PaginationItem = (props) => {
+    return jsx("li", { "data-slot": "pagination-item", ...props });
 };
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "regular",
-  variant = "ghost",
-  ...props
-}) => {
-  const buttonClasses = stylex.props(paginationStyles.button, isActive && paginationStyles.selected);
-  return jsx(Button, {
-    "aria-current": isActive ? "page" : undefined,
-    "data-slot": "pagination-link",
-    "data-active": isActive,
-    size: size,
-    variant: variant,
-    className: `${buttonClasses.className} ${className ?? ""}`,
-    ...props
-  });
+const PaginationLink = ({ className, isActive, size = "regular", variant = "ghost", ...props }) => {
+    const { setStyleXProps } = usePreferColors();
+    const buttonClasses = setStyleXProps(paginationStyles.button, isActive && paginationStyles.selected);
+    return (jsx(Button, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, size: size, variant: variant, className: `${buttonClasses.className} ${className ?? ""}`, ...props }));
 };
-const PaginationPrevious = ({
-  className,
-  ...props
-}) => {
-  const previousClasses = stylex.props(paginationStyles.previous);
-  return jsx(PaginationLink, {
-    "aria-label": "Go to previous page",
-    className: `${previousClasses.className} ${className ?? ""}`,
-    leftIcon: jsx(ChevronLeft, {
-      size: 20
-    }),
-    ...props
-  });
+const PaginationPrevious = ({ className, ...props }) => {
+    const { setStyleXProps } = usePreferColors();
+    const previousClasses = setStyleXProps(paginationStyles.previous);
+    return (jsx(PaginationLink, { "aria-label": "Go to previous page", className: `${previousClasses.className} ${className ?? ""}`, leftIcon: jsx(ChevronLeft, { size: 20 }), ...props }));
 };
-const PaginationNext = ({
-  className,
-  ...props
-}) => {
-  const nextClasses = stylex.props(paginationStyles.next);
-  return jsx(PaginationLink, {
-    "aria-label": "Go to next page",
-    className: `${nextClasses.className} ${className ?? ""}`,
-    leftIcon: jsx(ChevronRight, {
-      size: 20
-    }),
-    ...props
-  });
+const PaginationNext = ({ className, ...props }) => {
+    const { setStyleXProps } = usePreferColors();
+    const nextClasses = setStyleXProps(paginationStyles.next);
+    return (jsx(PaginationLink, { "aria-label": "Go to next page", className: `${nextClasses.className} ${className ?? ""}`, leftIcon: jsx(ChevronRight, { size: 20 }), ...props }));
 };
-const PaginationEllipsis = ({
-  className,
-  ...props
-}) => {
-  const ellipsisClasses = stylex.props(paginationStyles.ellipsis);
-  const iconClasses = stylex.props(paginationStyles.ellipsisIcon);
-  return jsx("span", {
-    "aria-hidden": true,
-    "data-slot": "pagination-ellipsis",
-    className: `${ellipsisClasses.className} ${className ?? ""}`,
-    ...props,
-    children: jsx(Ellipsis, {
-      className: iconClasses.className
-    })
-  });
+const PaginationEllipsis = ({ className, ...props }) => {
+    const { setStyleXProps } = usePreferColors();
+    const ellipsisClasses = setStyleXProps(paginationStyles.ellipsis);
+    const iconClasses = setStyleXProps(paginationStyles.ellipsisIcon);
+    return (jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: `${ellipsisClasses.className} ${className ?? ""}`, ...props, children: jsx(Ellipsis, { className: iconClasses.className }) }));
 };
 const interactiveListItemStyles = {
@@ -13469,66 +12884,27 @@ const interactiveListItemStyles = {
 };
 const InteractiveListItemContext = React__default.createContext({
-  disabled: false
+    disabled: false,
 });
-const InteractiveListItem = React__default.forwardRef(({
-  isSelected,
-  disabled,
-  showHoverActions = true,
-  children,
-  ...props
-}, ref) => {
-  const itemClasses = stylex.props(interactiveListItemStyles.base);
-  return jsx(InteractiveListItemContext, {
-    value: {
-      disabled: !!disabled
-    },
-    children: jsx("div", {
-      ref: ref,
-      "data-selected": isSelected,
-      "data-disabled": disabled,
-      "data-hover-actions": showHoverActions,
-      className: `${itemClasses.className} ${props.className ?? ""}`,
-      ...props,
-      children: children
-    })
-  });
+const InteractiveListItem = React__default.forwardRef(({ isSelected, disabled, showHoverActions = true, children, ...props }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const itemClasses = setStyleXProps(interactiveListItemStyles.base);
+    return (jsx(InteractiveListItemContext, { value: { disabled: !!disabled }, children: jsx("div", { ref: ref, "data-selected": isSelected, "data-disabled": disabled, "data-hover-actions": showHoverActions, className: `${itemClasses.className} ${props.className ?? ""}`, ...props, children: children }) }));
 });
-const InteractiveListItemIcon = React__default.forwardRef(({
-  children,
-  ...props
-}, ref) => {
-  const iconClasses = stylex.props(interactiveListItemStyles.icon);
-  return jsx("span", {
-    className: iconClasses.className,
-    ...props,
-    ref: ref,
-    children: children
-  });
+const InteractiveListItemIcon = React__default.forwardRef(({ children, ...props }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const iconClasses = setStyleXProps(interactiveListItemStyles.icon);
+    return (jsx("span", { className: iconClasses.className, ...props, ref: ref, children: children }));
 });
-const InteractiveListItemContent = React__default.forwardRef(({
-  children,
-  ...rest
-}, ref) => {
-  const contentClasses = stylex.props(interactiveListItemStyles.content);
-  return jsx("div", {
-    className: contentClasses.className,
-    ...rest,
-    ref: ref,
-    children: children
-  });
+const InteractiveListItemContent = React__default.forwardRef(({ children, ...rest }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const contentClasses = setStyleXProps(interactiveListItemStyles.content);
+    return (jsx("div", { className: contentClasses.className, ...rest, ref: ref, children: children }));
 });
-const InteractiveListItemActions = React__default.forwardRef(({
-  children,
-  ...props
-}, ref) => {
-  const buttonsClasses = stylex.props(interactiveListItemStyles.buttons);
-  return jsx("div", {
-    className: buttonsClasses.className,
-    ...props,
-    ref: ref,
-    children: children
-  });
+const InteractiveListItemActions = React__default.forwardRef(({ children, ...props }, ref) => {
+    const { setStyleXProps } = usePreferColors();
+    const buttonsClasses = setStyleXProps(interactiveListItemStyles.buttons);
+    return (jsx("div", { className: buttonsClasses.className, ...props, ref: ref, children: children }));
 });
 const calendarStyles = {
@@ -13751,50 +13127,33 @@ const calendarStyles = {
   }
 };
-const Calendar = ({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}) => {
-  const getDatePickerClassName = key => {
-    return stylex.props(calendarStyles[key]).className;
-  };
-  return jsx(DayPicker, {
-    showOutsideDays: showOutsideDays,
-    navLayout: "around",
-    style: {
-      "--rdp-day-width": "32px",
-      "--rdp-day-height": "32px",
-      "--rdp-day_button-height": "32px",
-      "--rdp-day_button-width": "32px"
-    },
-    className: className,
-    classNames: {
-      months: getDatePickerClassName("months"),
-      month_caption: getDatePickerClassName("monthCaption"),
-      caption_label: getDatePickerClassName("captionLabel"),
-      month_grid: getDatePickerClassName("monthGrid"),
-      weekday: getDatePickerClassName("weekday"),
-      day: getDatePickerClassName("day"),
-      selected: getDatePickerClassName("selected"),
-      today: getDatePickerClassName("day"),
-      range_start: `${getDatePickerClassName("rangeStart")} range-start`,
-      range_middle: `${getDatePickerClassName("rangeMiddle")} range-middle`,
-      range_end: `${getDatePickerClassName("rangeEnd")} range-end`,
-      outside: getDatePickerClassName("outside"),
-      ...classNames
-    },
-    components: {
-      Chevron: args => jsx(ChevronLeft, {
-        size: 16,
-        ...args,
-        "data-orientation": args.orientation,
-        className: getDatePickerClassName("navButton")
-      })
-    },
-    ...props
-  });
+const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) => {
+    const { setStyleXProps } = usePreferColors();
+    const getDatePickerClassName = (key) => {
+        return setStyleXProps(calendarStyles[key]).className;
+    };
+    return (jsx(DayPicker, { showOutsideDays: showOutsideDays, navLayout: "around", style: {
+            "--rdp-day-width": "32px",
+            "--rdp-day-height": "32px",
+            "--rdp-day_button-height": "32px",
+            "--rdp-day_button-width": "32px",
+        }, className: className, classNames: {
+            months: getDatePickerClassName("months"),
+            month_caption: getDatePickerClassName("monthCaption"),
+            caption_label: getDatePickerClassName("captionLabel"),
+            month_grid: getDatePickerClassName("monthGrid"),
+            weekday: getDatePickerClassName("weekday"),
+            day: getDatePickerClassName("day"),
+            selected: getDatePickerClassName("selected"),
+            today: getDatePickerClassName("day"),
+            range_start: `${getDatePickerClassName("rangeStart")} range-start`,
+            range_middle: `${getDatePickerClassName("rangeMiddle")} range-middle`,
+            range_end: `${getDatePickerClassName("rangeEnd")} range-end`,
+            outside: getDatePickerClassName("outside"),
+            ...classNames,
+        }, components: {
+            Chevron: (args) => (jsx(ChevronLeft, { size: 16, ...args, "data-orientation": args.orientation, className: getDatePickerClassName("navButton") })),
+        }, ...props }));
 };
 const datePickerStyles = {
@@ -13813,90 +13172,49 @@ var dayjs_min = {exports: {}};
 var dayjs_minExports = dayjs_min.exports;
 var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
-const DatePicker = ({
-  size = "regular",
-  placeholder = "Pick a date",
-  format = "YYYY. MM. DD.",
-  value,
-  mode = "single",
-  onChange,
-  isInstantClose = false,
-  open: openProp,
-  onOpenChange: onOpenChangeProp,
-  disabled,
-  ...rest
-}) => {
-  const [inputValue, setInputValue] = React__default.useState(value);
-  const [open, setOpen] = React__default.useState(openProp || false);
-  const wrapperStyle = stylex.props(datePickerStyles.wrapper);
-  const handleSelect = date => {
-    if (mode === "single") {
-      const value = date;
-      onChange?.(value);
-    } else if (mode === "multiple") {
-      const value = date;
-      onChange?.(value);
-    } else if (mode === "range") {
-      const value = date;
-      onChange?.(value);
-    }
-    setInputValue(date);
-    if (isInstantClose && mode === "single") {
-      handleOpenChange(false);
-    }
-  };
-  const handleOpenChange = open => {
-    setOpen(open);
-    onOpenChangeProp?.(open);
-  };
-  const getDateToFormatString = date => {
-    if (date instanceof Date) {
-      return dayjs(date).format(format);
-    } else if (Array.isArray(date)) {
-      return date.map(d => dayjs(d).format(format)).join(", ");
-    } else if (date && typeof date === "object" && "from" in date && "to" in date) {
-      return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
-    }
-    return placeholder ?? "";
-  };
-  return jsxs(Root2$2, {
-    open: open,
-    onOpenChange: handleOpenChange,
-    children: [jsx(Trigger$2, {
-      asChild: true,
-      children: jsx(Button, {
-        size: size,
-        fullWidth: true,
-        variant: "outline",
-        leftIcon: jsx(Calendar$1, {
-          size: 20
-        }),
-        className: wrapperStyle.className,
-        disabled: disabled,
-        children: getDateToFormatString(inputValue)
-      })
-    }), jsx(Content2$2, {
-      sideOffset: 10,
-      align: "start",
-      ...rest,
-      children: mode === "single" ? jsx(Calendar, {
-        mode: "single",
-        ...rest,
-        selected: inputValue,
-        onSelect: handleSelect
-      }) : mode === "multiple" ? jsx(Calendar, {
-        mode: "multiple",
-        ...rest,
-        selected: Array.isArray(inputValue) ? inputValue : [],
-        onSelect: handleSelect
-      }) : jsx(Calendar, {
-        mode: "range",
-        ...rest,
-        selected: inputValue,
-        onSelect: handleSelect
-      })
-    })]
-  });
+const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "YYYY. MM. DD.", value, mode = "single", onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, ...rest }) => {
+    const { setStyleXProps } = usePreferColors();
+    const [inputValue, setInputValue] = React__default.useState(value);
+    const [open, setOpen] = React__default.useState(openProp || false);
+    const wrapperStyle = setStyleXProps(datePickerStyles.wrapper);
+    const handleSelect = (date) => {
+        if (mode === "single") {
+            const value = date;
+            onChange?.(value);
+        }
+        else if (mode === "multiple") {
+            const value = date;
+            onChange?.(value);
+        }
+        else if (mode === "range") {
+            const value = date;
+            onChange?.(value);
+        }
+        setInputValue(date);
+        if (isInstantClose && mode === "single") {
+            handleOpenChange(false);
+        }
+    };
+    const handleOpenChange = (open) => {
+        setOpen(open);
+        onOpenChangeProp?.(open);
+    };
+    const getDateToFormatString = (date) => {
+        if (date instanceof Date) {
+            return dayjs(date).format(format);
+        }
+        else if (Array.isArray(date)) {
+            return date.map((d) => dayjs(d).format(format)).join(", ");
+        }
+        else if (date &&
+            typeof date === "object" &&
+            "from" in date &&
+            "to" in date) {
+            return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
+        }
+        return placeholder ?? "";
+    };
+    return (jsxs(Root2$2, { open: open, onOpenChange: handleOpenChange, children: [jsx(Trigger$2, { asChild: true, children: jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsx(Calendar$1, { size: 20 }), className: wrapperStyle.className, disabled: disabled, children: getDateToFormatString(inputValue) }) }), jsx(Content2$2, { sideOffset: 10, align: "start", ...rest, children: mode === "single" ? (jsx(Calendar, { mode: "single", ...rest, selected: inputValue, onSelect: handleSelect })) : mode === "multiple" ? (jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(inputValue) ? inputValue : [], onSelect: handleSelect })) : (jsx(Calendar, { mode: "range", ...rest, selected: inputValue, onSelect: handleSelect })) })] }));
 };
 const contextMenuContentStyles = {
@@ -14095,80 +13413,42 @@ const contextMenuContentStyles = {
 const ContextMenu = Root2$3;
 const ContextMenuTrigger = Trigger$3;
-const ContextMenuContent = props => {
-  const contentClasses = stylex.props(contextMenuContentStyles.content);
-  return jsx(Portal2, {
-    children: jsx(Content2$3, {
-      ...props,
-      className: `${contentClasses.className} ${props.className ?? ""}`,
-      children: props.children
-    })
-  });
+const ContextMenuContent = (props) => {
+    const { setStyleXProps } = usePreferColors();
+    const contentClasses = setStyleXProps(contextMenuContentStyles.content);
+    return (jsx(Portal2, { children: jsx(Content2$3, { ...props, className: `${contentClasses.className} ${props.className ?? ""}`, children: props.children }) }));
 };
 const ContextMenuArrow = Arrow2$1;
-const ContextMenuLabel = props => {
-  return jsx(Label2, {
-    ...props,
-    children: props.children
-  });
-};
-const ContextMenuItem = ({
-  leftIcon,
-  rightSlot,
-  textValue,
-  ...rest
-}) => {
-  const itemClasses = stylex.props(contextMenuContentStyles.item);
-  const leftIconClasses = stylex.props(contextMenuContentStyles.leftIcon);
-  const rightSlotClasses = stylex.props(contextMenuContentStyles.rightSlot);
-  const itemContentClasses = stylex.props(contextMenuContentStyles.itemContent);
-  const itemTextClasses = stylex.props(contextMenuContentStyles.textValue);
-  return jsxs(Item2$1, {
-    ...rest,
-    className: `${itemClasses.className} ${rest.className ?? ""}`,
-    children: [jsxs("div", {
-      ...itemContentClasses,
-      children: [jsx("div", {
-        className: leftIconClasses.className,
-        children: leftIcon
-      }), jsx("span", {
-        ...itemTextClasses,
-        children: textValue
-      })]
-    }), rightSlot && jsx("div", {
-      ...rightSlotClasses,
-      children: rightSlot
-    })]
-  });
+const ContextMenuLabel = (props) => {
+    return (jsx(Label2, { ...props, children: props.children }));
+};
+const ContextMenuItem = ({ leftIcon, rightSlot, textValue, ...rest }) => {
+    const { setStyleXProps } = usePreferColors();
+    const itemClasses = setStyleXProps(contextMenuContentStyles.item);
+    const leftIconClasses = setStyleXProps(contextMenuContentStyles.leftIcon);
+    const rightSlotClasses = setStyleXProps(contextMenuContentStyles.rightSlot);
+    const itemContentClasses = setStyleXProps(contextMenuContentStyles.itemContent);
+    const itemTextClasses = setStyleXProps(contextMenuContentStyles.textValue);
+    return (jsxs(Item2$1, { ...rest, className: `${itemClasses.className} ${rest.className ?? ""}`, children: [jsxs("div", { ...itemContentClasses, children: [jsx("div", { className: leftIconClasses.className, children: leftIcon }), jsx("span", { ...itemTextClasses, children: textValue })] }), rightSlot && jsx("div", { ...rightSlotClasses, children: rightSlot })] }));
 };
 const ContextMenuGroup = Group2;
 const ContextMenuSub = Sub2;
 const ContextMenuSubTrigger = SubTrigger2;
-const ContextMenuSubContent = props => {
-  const contentClasses = stylex.props(contextMenuContentStyles.content);
-  return jsx(Portal2, {
-    children: jsx(SubContent2, {
-      ...props,
-      className: `${contentClasses.className} ${props.className ?? ""}`,
-      children: props.children
-    })
-  });
+const ContextMenuSubContent = (props) => {
+    const { setStyleXProps } = usePreferColors();
+    const contentClasses = setStyleXProps(contextMenuContentStyles.content);
+    return (jsx(Portal2, { children: jsx(SubContent2, { ...props, className: `${contentClasses.className} ${props.className ?? ""}`, children: props.children }) }));
 };
-const ContextMenuSeparator = props => {
-  const separatorClasses = stylex.props(contextMenuContentStyles.separator);
-  return jsx(Separator2, {
-    ...props,
-    className: `${separatorClasses.className} ${props.className ?? ""}`
-  });
+const ContextMenuSeparator = (props) => {
+    const { setStyleXProps } = usePreferColors();
+    const separatorClasses = setStyleXProps(contextMenuContentStyles.separator);
+    return (jsx(Separator2, { ...props, className: `${separatorClasses.className} ${props.className ?? ""}` }));
 };
 const ContextMenuCheckboxItem = CheckboxItem2;
 const ContextMenuRadioGroup = RadioGroup2;
 const ContextMenuRadioItem = RadioItem2;
-const ContextMenuItemIndicator = props => {
-  return jsx(ItemIndicator2, {
-    ...props,
-    children: props.children
-  });
+const ContextMenuItemIndicator = (props) => {
+    return (jsx(ItemIndicator2, { ...props, children: props.children }));
 };
 const autocompleteStyles = {
@@ -14253,7 +13533,6 @@ const autocompleteStyles = {
     k8WAf4: null,
     kLKAdn: null,
     kGO01o: null,
-    kWkggS: "tpst1po33qi",
     kMwMTN: "tpst3jceqh",
     kGuDYH: "tpst1v3388n",
     kLWn49: "tpst1waae9e",
@@ -14303,179 +13582,124 @@ const autocompleteStyles = {
   }
 };
-const AutocompleteContentItem = ({
-  inputValue,
-  item,
-  index,
-  displayValue,
-  highlightedIndex,
-  onClick,
-  className = ""
-}) => {
-  const isHighlighted = index === highlightedIndex;
-  const itemClasses = stylex.props(autocompleteStyles.item, isHighlighted && autocompleteStyles.highlight);
-  const matchedClasses = stylex.props(autocompleteStyles.matched);
-  return jsx("li", {
-    id: `suggestion-item-${index}`,
-    className: `${itemClasses.className} ${className}`,
-    onClick: e => onClick(item, e),
-    role: "option",
-    "aria-selected": isHighlighted,
-    children: displayValue(item).split(new RegExp(`(${inputValue})`, "gi")).map((part, i) => part.toLowerCase() === inputValue.toLowerCase() ? jsx("span", {
-      ...matchedClasses,
-      children: part
-    }, i) : jsx("span", {
-      children: part
-    }, i))
-  });
-};
-const Autocomplete = ({
-  placeholder,
-  data,
-  value,
-  displayValue,
-  onSelect,
-  onChange,
-  noResultsMessage = "검색 결과가 없습니다.",
-  maxResults = 10,
-  debounceTime = 300,
-  wrapperClassName,
-  contentClassName,
-  itemClassName
-}) => {
-  const [inputValue, setInputValue] = useState(value ?? "");
-  const [filteredResults, setFilteredResults] = useState([]);
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const [highlightedIndex, setHighlightedIndex] = useState(-1);
-  // useRef를 사용하여 DOM 엘리먼트 참조
-  const autocompleteRef = useRef(null);
-  const inputRef = useRef(null);
-  // 디바운싱을 위한 타이머 참조
-  const debounceTimerRef = useRef(null);
-  // 외부 클릭 감지 (추천 목록 닫기)
-  useEffect(() => {
-    const handleClickOutside = event => {
-      if (autocompleteRef.current && !autocompleteRef.current.contains(event.target)) {
+const AutocompleteContentItem = ({ inputValue, item, index, displayValue, highlightedIndex, onClick, className = "", }) => {
+    const { setStyleXProps } = usePreferColors();
+    const isHighlighted = index === highlightedIndex;
+    const itemClasses = setStyleXProps(autocompleteStyles.item, isHighlighted && autocompleteStyles.highlight);
+    const matchedClasses = setStyleXProps(autocompleteStyles.matched);
+    return (jsx("li", { id: `suggestion-item-${index}`, className: `${itemClasses.className} ${className}`, onClick: (e) => onClick(item, e), role: "option", "aria-selected": isHighlighted, children: displayValue(item)
+            .split(new RegExp(`(${inputValue})`, "gi"))
+            .map((part, i) => part.toLowerCase() === inputValue.toLowerCase() ? (jsx("span", { ...matchedClasses, children: part }, i)) : (jsx("span", { children: part }, i))) }));
+};
+const Autocomplete = ({ placeholder, data, value, displayValue, onSelect, onChange, noResultsMessage = "검색 결과가 없습니다.", maxResults = 10, debounceTime = 300, wrapperClassName, contentClassName, itemClassName, }) => {
+    const { setStyleXProps } = usePreferColors();
+    const [inputValue, setInputValue] = useState(value ?? "");
+    const [filteredResults, setFilteredResults] = useState([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    // useRef를 사용하여 DOM 엘리먼트 참조
+    const autocompleteRef = useRef(null);
+    const inputRef = useRef(null);
+    // 디바운싱을 위한 타이머 참조
+    const debounceTimerRef = useRef(null);
+    // 외부 클릭 감지 (추천 목록 닫기)
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (autocompleteRef.current &&
+                !autocompleteRef.current.contains(event.target)) {
+                setShowSuggestions(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        setInputValue(value ?? "");
+    }, [value]);
+    // 입력 값 변경에 따른 필터링 로직 (디바운싱 적용)
+    useEffect(() => {
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        if (inputValue.length === 0) {
+            setFilteredResults(data);
+            return;
+        }
+        debounceTimerRef.current = setTimeout(() => {
+            const lowercasedInput = inputValue.toLowerCase();
+            const results = data.filter((item) => displayValue(item).toLowerCase().includes(lowercasedInput));
+            setFilteredResults(results.slice(0, maxResults));
+            setHighlightedIndex(-1); // 필터링 시 하이라이트 초기화
+        }, debounceTime);
+        return () => {
+            // 클린업: 컴포넌트 언마운트 또는 useEffect 재실행 시 타이머 정리
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, [inputValue, data, displayValue, maxResults, debounceTime]);
+    // 항목 선택 처리
+    const handleSelectItem = useCallback((item) => {
+        setInputValue(displayValue(item));
+        onSelect?.(item);
         setShowSuggestions(false);
-      }
+        setHighlightedIndex(-1);
+        inputRef.current?.focus(); // 선택 후 입력 필드에 포커스 유지
+    }, [displayValue, onSelect]);
+    // 입력 필드 변경 핸들러
+    const handleChange = (e) => {
+        const value = e.target.value;
+        setInputValue(value);
+        onChange?.(value); // 외부 onChange 콜백 호출
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
+    // 키보드 이벤트 핸들러
+    const handleKeyDown = (e) => {
+        if (!showSuggestions || filteredResults.length === 0)
+            return;
+        if (e.key === "ArrowDown") {
+            e.preventDefault(); // 커서 이동 방지
+            setHighlightedIndex((prevIndex) => (prevIndex + 1) % filteredResults.length);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault(); // 커서 이동 방지
+            setHighlightedIndex((prevIndex) => (prevIndex - 1 + filteredResults.length) % filteredResults.length);
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            if (highlightedIndex >= 0) {
+                handleSelectItem(filteredResults[highlightedIndex]);
+            }
+            else if (filteredResults.length > 0) ;
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            setShowSuggestions(false);
+            setHighlightedIndex(-1);
+        }
     };
-  }, []);
-  useEffect(() => {
-    setInputValue(value ?? "");
-  }, [value]);
-  // 입력 값 변경에 따른 필터링 로직 (디바운싱 적용)
-  useEffect(() => {
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
-    if (inputValue.length === 0) {
-      setFilteredResults(data);
-      return;
-    }
-    debounceTimerRef.current = setTimeout(() => {
-      const lowercasedInput = inputValue.toLowerCase();
-      const results = data.filter(item => displayValue(item).toLowerCase().includes(lowercasedInput));
-      setFilteredResults(results.slice(0, maxResults));
-      setHighlightedIndex(-1); // 필터링 시 하이라이트 초기화
-    }, debounceTime);
-    return () => {
-      // 클린업: 컴포넌트 언마운트 또는 useEffect 재실행 시 타이머 정리
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
+    // 마우스 클릭 시 항목 선택
+    const handleItemClick = (item, e) => {
+        e.stopPropagation(); // 외부 클릭 감지 이벤트 버블링 방지
+        handleSelectItem(item);
     };
-  }, [inputValue, data, displayValue, maxResults, debounceTime]);
-  // 항목 선택 처리
-  const handleSelectItem = useCallback(item => {
-    setInputValue(displayValue(item));
-    onSelect?.(item);
-    setShowSuggestions(false);
-    setHighlightedIndex(-1);
-    inputRef.current?.focus(); // 선택 후 입력 필드에 포커스 유지
-  }, [displayValue, onSelect]);
-  // 입력 필드 변경 핸들러
-  const handleChange = e => {
-    const value = e.target.value;
-    setInputValue(value);
-    onChange?.(value); // 외부 onChange 콜백 호출
-  };
-  // 키보드 이벤트 핸들러
-  const handleKeyDown = e => {
-    if (!showSuggestions || filteredResults.length === 0) return;
-    if (e.key === "ArrowDown") {
-      e.preventDefault(); // 커서 이동 방지
-      setHighlightedIndex(prevIndex => (prevIndex + 1) % filteredResults.length);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault(); // 커서 이동 방지
-      setHighlightedIndex(prevIndex => (prevIndex - 1 + filteredResults.length) % filteredResults.length);
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      if (highlightedIndex >= 0) {
-        handleSelectItem(filteredResults[highlightedIndex]);
-      } else if (filteredResults.length > 0) ;
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      setShowSuggestions(false);
-      setHighlightedIndex(-1);
-    }
-  };
-  // 마우스 클릭 시 항목 선택
-  const handleItemClick = (item, e) => {
-    e.stopPropagation(); // 외부 클릭 감지 이벤트 버블링 방지
-    handleSelectItem(item);
-  };
-  const wrapperClasses = stylex.props(autocompleteStyles.wrapper);
-  const contentClasses = stylex.props(autocompleteStyles.content);
-  const noResultClasses = stylex.props(autocompleteStyles.noResults);
-  return jsxs("div", {
-    ref: autocompleteRef,
-    className: `${wrapperClasses.className} ${wrapperClassName ?? ""}`,
-    children: [jsx(Input, {
-      type: "text",
-      placeholder: placeholder,
-      value: inputValue,
-      onChange: handleChange,
-      onFocus: () => setShowSuggestions(true),
-      onKeyDown: handleKeyDown,
-      ref: inputRef,
-      // ARIA 속성 (접근성)
-      role: "combobox",
-      "aria-autocomplete": "list",
-      "aria-haspopup": "listbox",
-      "aria-expanded": showSuggestions,
-      "aria-controls": "autocomplete-suggestions",
-      "aria-activedescendant": highlightedIndex >= 0 ? `suggestion-item-${highlightedIndex}` : undefined
-    }), showSuggestions && jsx("ul", {
-      id: "autocomplete-suggestions",
-      role: "listbox",
-      className: `${contentClasses.className} ${contentClassName ?? ""}`,
-      children: filteredResults.length > 0 ? filteredResults.map((item, index) => jsx(AutocompleteContentItem, {
-        item: item,
-        index: index,
-        highlightedIndex: highlightedIndex,
-        onClick: handleItemClick,
-        displayValue: displayValue,
-        inputValue: inputValue,
-        className: itemClassName
-      }, displayValue(item) + index)) : jsx("li", {
-        "data-no-results": true,
-        ...noResultClasses,
-        children: noResultsMessage
-      })
-    })]
-  });
+    const wrapperClasses = setStyleXProps(autocompleteStyles.wrapper);
+    const contentClasses = setStyleXProps(autocompleteStyles.content);
+    const noResultClasses = setStyleXProps(autocompleteStyles.noResults);
+    return (jsxs("div", { ref: autocompleteRef, className: `${wrapperClasses.className} ${wrapperClassName ?? ""}`, children: [jsx(Input, { type: "text", placeholder: placeholder, value: inputValue, onChange: handleChange, onFocus: () => setShowSuggestions(true), onKeyDown: handleKeyDown, ref: inputRef,
+                // ARIA 속성 (접근성)
+                role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": showSuggestions, "aria-controls": "autocomplete-suggestions", "aria-activedescendant": highlightedIndex >= 0
+                    ? `suggestion-item-${highlightedIndex}`
+                    : undefined }), showSuggestions && (jsx("ul", { id: "autocomplete-suggestions", role: "listbox", className: `${contentClasses.className} ${contentClassName ?? ""}`, children: filteredResults.length > 0 ? (filteredResults.map((item, index) => (jsx(AutocompleteContentItem, { item: item, index: index, highlightedIndex: highlightedIndex, onClick: handleItemClick, displayValue: displayValue, inputValue: inputValue, className: itemClassName }, displayValue(item) + index)))) : (jsx("li", { "data-no-results": true, ...noResultClasses, children: noResultsMessage })) }))] }));
 };
 // 컴포넌트 내보내기
 // 버전 정보
 const version = "0.0.1";
-export { Autocomplete, Button, Calendar, Card, CardBody, CardContent, CardFooter, CardHeader, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HorizontalTab, HorizontalTabs, Input, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, RadioGroup, RadioItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag, Text, TextArea, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VerticalMenu, VerticalMenus, autocompleteStyles, borderRadius, buttonSizeStyles, buttonStyles, buttonVariantStyles, calendarStyles, cardBodyStyles, cardFooterStyles, cardHeaderStyles, cardStyles, checkboxStyles, checkboxWrapperStyles, commonStyles, contextMenuContentStyles, datePickerStyles, dialogContentStyles, dialogOverlayStyles, fontFamily, fontSize, fontWeight, fontWeightStyles, horizontalTabStyles, horizontalTabWrapperStyles, inputStyles, inputWrapperSizeStyles, inputWrapperStyles, interactiveListItemStyles, labelStyles, lineHeight, modeTabStyles, modeTabWrapperStyles, multipleSelectContentStyles, multipleSelectItemStyles, multipleSelectTriggerStyles, multipleSelectWrapperStyles, paginationStyles, primitiveColors, radioGroupStyles, radioItemLabelStyles, radioItemStyles, radioItemWrapperStyles, selectContentStyles, selectGroupLabelStyles, selectIconWrapperStyles, selectItemStyles, selectSeparatorStyles, selectTriggerStyles, semanticColors, spacing, tableStyles, tagStyles, textAlignStyles, textAreaStyles, textAreaWrapperStyles, textSizeStyles, textStyles, textVariantStyles, tooltipDescriptionStyles, tooltipShortStyles, version, verticalMenuIconStyles, verticalMenuStyles, verticalMenusWrapperStyles };
+export { Autocomplete, Button, Calendar, Card, CardBody, CardContent, CardFooter, CardHeader, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HorizontalTab, HorizontalTabs, Input, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, RadioGroup, RadioItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag, Text, TextArea, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VerticalMenu, VerticalMenus, autocompleteStyles, borderRadius, buttonSizeStyles, buttonStyles, buttonVariantStyles, calendarStyles, cardBodyStyles, cardFooterStyles, cardHeaderStyles, cardStyles, checkboxStyles, checkboxWrapperStyles, commonStyles, contextMenuContentStyles, darkMode, datePickerStyles, dialogContentStyles, dialogOverlayStyles, fontFamily, fontSize, fontWeight, fontWeightStyles, horizontalTabStyles, horizontalTabWrapperStyles, inputStyles, inputWrapperSizeStyles, inputWrapperStyles, interactiveListItemStyles, labelStyles, lightMode, lineHeight, modeTabStyles, modeTabWrapperStyles, multipleSelectContentStyles, multipleSelectItemStyles, multipleSelectTriggerStyles, multipleSelectWrapperStyles, paginationStyles, primitiveColors, radioGroupStyles, radioItemLabelStyles, radioItemStyles, radioItemWrapperStyles, selectContentStyles, selectGroupLabelStyles, selectIconWrapperStyles, selectItemStyles, selectSeparatorStyles, selectTriggerStyles, semanticColors, spacing, tableStyles, tagStyles, textAlignStyles, textAreaStyles, textAreaWrapperStyles, textSizeStyles, textStyles, textVariantStyles, tooltipDescriptionStyles, tooltipShortStyles, version, verticalMenuIconStyles, verticalMenuStyles, verticalMenusWrapperStyles };
 //# sourceMappingURL=index.js.map