musae 1.3.1-beta.2 → 1.3.1-beta.21

package/dist/components/picker/picker.mjs

@@ -1,42 +1,29 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { forwardRef, useRef, useContext, useCallback, useImperativeHandle } from 'react';
+import styles from './styles.mjs';
+import React, { useRef, useContext, useCallback } from 'react';
 import Popper from '../popper/popper.mjs';
-import { useBoolean, useEvent, useFocus } from '@aiszlab/relax';
+import { useBoolean, isFunction } from '@aiszlab/relax';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { styles } from '../input/input.mjs';
-import { CLASS_NAMES, Context } from './context.mjs';
+import { CLASS_NAMES } from './context.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
-import { $body } from '../theme/theme.mjs';
-import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 import { DialogContext } from '../dialog/context.mjs';
 import { useStackLevelContextContext } from '../../contexts/stack-level.context.mjs';
-import { OPACITY } from '../theme/tokens.stylex.mjs';
-import IconClose from '../icon/icons/navigation/close.mjs';
 
-var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var Picker = function Picker(_ref) {
   var _getDropdownWidth;
   var pickable = _ref.pickable,
-    className = _ref.className,
     _ref$popupWidth = _ref.popupWidth,
     popupWidth = _ref$popupWidth === void 0 ? "match" : _ref$popupWidth,
-    style = _ref.style,
     children = _ref.children,
-    onClick = _ref.onClick,
     pickableClassName = _ref.pickableClassName,
     pickableStyle = _ref.pickableStyle,
     onPopperEnter = _ref.onPopperEnter,
     onPopperEntered = _ref.onPopperEntered,
     onPopperExited = _ref.onPopperExited,
-    onPopperExite = _ref.onPopperExite,
-    _onBlur = _ref.onBlur,
-    _ref$invalid = _ref.invalid,
-    invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-    onClear = _ref.onClear,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var _trigger = useRef(null);
+    onPopperExite = _ref.onPopperExite;
+  var triggerRef = useRef(null);
   var _useBoolean = useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isOpen = _useBoolean2[0],
@@ -46,7 +33,6 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     open = _useBoolean2$.turnOn;
   var classNames = useClassNames(CLASS_NAMES);
   var pickableRef = useRef(null);
-  var _themeColorVars = useThemeColorVars(["primary", "outline", "error", ["on-surface", OPACITY.thickest], ["on-surface", OPACITY.thin]]);
   var _useContext = useContext(DialogContext),
     container = _useContext.container;
   var _useStackLevelContext = useStackLevelContextContext(),
@@ -54,63 +40,27 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     stackLevelStyle = _useStackLevelContext.style;
   var getDropdownWidth = useCallback(function () {
     if (!popupWidth) return void 0;
-    if (!_trigger.current) return void 0;
-    return Math.max(_trigger.current.getBoundingClientRect().width, popupWidth === "match" ? 0 : popupWidth);
+    if (!triggerRef.current) return void 0;
+    return Math.max(triggerRef.current.getBoundingClientRect().width, popupWidth === "match" ? 0 : popupWidth);
   }, [popupWidth]);
-  useImperativeHandle(ref, function () {
-    return {
-      close: close
-    };
-  });
-  var click = useEvent(function (event) {
-    if (disabled) return;
-    event.stopPropagation();
-    onClick === null || onClick === void 0 || onClick(event);
-    toggle();
-  });
-  var onBlur = useEvent(function (e) {
-    e.stopPropagation();
-    _onBlur === null || _onBlur === void 0 || _onBlur(e);
-    close();
-  });
-  var _useFocus = useFocus({
-      onBlur: onBlur
-    }),
-    _useFocus2 = _slicedToArray(_useFocus, 2),
-    isFocused = _useFocus2[0],
-    focusProps = _useFocus2[1];
-  var onDropdownClick = useCallback(function (e) {
-    return e.preventDefault();
+  var onDropdownClick = useCallback(function (event) {
+    event.preventDefault();
   }, []);
-  var clear = useEvent(function (event) {
-    event.stopPropagation();
-    onClear === null || onClear === void 0 || onClear();
-  });
   var styled = {
-    picker: props($body.medium, styles.inputor, invalid && styles.invalid, disabled && styles.disabled),
-    pickable: {
-      className: "musaex-12ttxug"
-    }
+    pickable: props(styles.pickable)
   };
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: {
-      open: open,
-      isFocused: isFocused,
-      isOpen: isOpen
-    }
-  }, /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({
-    className: stringify(classNames.picker, isFocused && classNames.focused, className, styled.picker.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.picker.style), style), _themeColorVars),
-    ref: _trigger
-  }, !disabled && {
-    tabIndex: -1
-  }), {}, {
-    onClick: click
-  }, focusProps), children, !!onClear && !disabled && /*#__PURE__*/React.createElement(IconClose, {
-    onClick: clear
-  })), /*#__PURE__*/React.createElement(Popper, {
+  var renderProps = {
+    open: open,
+    close: close,
+    toggle: toggle,
+    isOpen: isOpen,
+    triggerRef: triggerRef
+  };
+  var trigger = children(renderProps);
+  var pickableContent = isFunction(pickable) ? pickable(renderProps) : pickable;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, trigger, /*#__PURE__*/React.createElement(Popper, {
     trigger: function trigger() {
-      return _trigger.current;
+      return triggerRef.current;
     },
     open: isOpen,
     className: classNames.dropdown,
@@ -131,7 +81,7 @@ var Picker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.pickable.style), pickableStyle), {}, {
       "--min-width": "".concat((_getDropdownWidth = getDropdownWidth()) !== null && _getDropdownWidth !== void 0 ? _getDropdownWidth : 0, "px")
     })
-  }, pickable)));
-});
+  }, pickableContent)));
+};
 
 export { Picker as default };

package/dist/components/picker/styles.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  pickable: {
+    k7Eaqz: "musaex-12ttxug",
+    kB7OPa: "musaex-9f619",
+    $$css: true
+  }
+};
+
+exports.default = styles;

package/dist/components/picker/styles.d.ts

@@ -0,0 +1,7 @@
+declare const styles: Readonly<{
+    readonly pickable: Readonly<{
+        readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", "var(--min-width)">;
+        readonly boxSizing: import("@stylexjs/stylex").StyleXClassNameFor<"boxSizing", "border-box">;
+    }>;
+}>;
+export default styles;

package/dist/components/picker/styles.mjs

@@ -0,0 +1,9 @@
+var styles = {
+  pickable: {
+    k7Eaqz: "musaex-12ttxug",
+    kB7OPa: "musaex-9f619",
+    $$css: true
+  }
+};
+
+export { styles as default };

package/dist/components/popconfirm/popconfirm.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('./styles.cjs');
 var React = require('react');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var space = require('../space/space.cjs');
@@ -18,16 +19,6 @@ var theme = require('../theme/theme.cjs');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 var warning = require('../icon/icons/alert/warning.cjs');
 
-var styles = {
-  title: {
-    kJuA4N: "musaex-nyuz70",
-    $$css: true
-  },
-  content: {
-    kJuA4N: "musaex-1fdo2jl",
-    $$css: true
-  }
-};
 var Popconfirm = function Popconfirm(_ref) {
   var content = _ref.content,
     title = _ref.title,
@@ -82,22 +73,11 @@ var Popconfirm = function Popconfirm(_ref) {
     turnOff();
   }, [popperRef, ref]);
   var styled = {
-    popconfirm: {
-      0: {
-        className: "musaex-6b7nyu musaex-16xn7b0 musaex-rvj5dj musaex-1jix8dk musaex-1wm2zkp"
-      },
-      1: {
-        className: "musaex-6b7nyu musaex-16xn7b0 musaex-rvj5dj musaex-1wm2zkp musaex-10dkvcv"
-      }
-    }[!!!title << 0],
-    leading: {
-      className: "musaex-1kxrqrs musaex-78zum5 musaex-amitd3 musaex-s3pv69"
-    },
-    title: stylex.props(styles.title, theme.$title.medium),
-    content: stylex.props(styles.content, theme.$body.medium),
-    footer: {
-      className: "musaex-m8arw7 musaex-13a6bvl"
-    }
+    popconfirm: stylex.props(styles.default.popconfirm, !title && styles.default.simple),
+    leading: stylex.props(styles.default.leading),
+    title: stylex.props(styles.default.title, theme.$title.medium),
+    content: stylex.props(styles.default.content, theme.$body.medium),
+    footer: stylex.props(styles.default.footer)
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(popper.default, {
     trigger: function trigger() {

package/dist/components/popconfirm/popconfirm.mjs

@@ -1,5 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React, { useRef, useMemo, isValidElement, cloneElement } from 'react';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Space from '../space/space.mjs';
@@ -14,16 +15,6 @@ import { $body, $title } from '../theme/theme.mjs';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
 import IconWarning from '../icon/icons/alert/warning.mjs';
 
-var styles = {
-  title: {
-    kJuA4N: "musaex-nyuz70",
-    $$css: true
-  },
-  content: {
-    kJuA4N: "musaex-1fdo2jl",
-    $$css: true
-  }
-};
 var Popconfirm = function Popconfirm(_ref) {
   var content = _ref.content,
     title = _ref.title,
@@ -78,22 +69,11 @@ var Popconfirm = function Popconfirm(_ref) {
     turnOff();
   }, [popperRef, ref]);
   var styled = {
-    popconfirm: {
-      0: {
-        className: "musaex-6b7nyu musaex-16xn7b0 musaex-rvj5dj musaex-1jix8dk musaex-1wm2zkp"
-      },
-      1: {
-        className: "musaex-6b7nyu musaex-16xn7b0 musaex-rvj5dj musaex-1wm2zkp musaex-10dkvcv"
-      }
-    }[!!!title << 0],
-    leading: {
-      className: "musaex-1kxrqrs musaex-78zum5 musaex-amitd3 musaex-s3pv69"
-    },
+    popconfirm: props(styles.popconfirm, !title && styles.simple),
+    leading: props(styles.leading),
     title: props(styles.title, $title.medium),
     content: props(styles.content, $body.medium),
-    footer: {
-      className: "musaex-m8arw7 musaex-13a6bvl"
-    }
+    footer: props(styles.footer)
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(Popper, {
     trigger: function trigger() {

package/dist/components/popconfirm/styles.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  popconfirm: {
+    kmVPX3: "musaex-6b7nyu",
+    ks0D6T: "musaex-16xn7b0",
+    k1xSpc: "musaex-rvj5dj",
+    kC13JO: "musaex-1jix8dk",
+    kOIVth: "musaex-1wm2zkp",
+    $$css: true
+  },
+  simple: {
+    kC13JO: "musaex-10dkvcv",
+    $$css: true
+  },
+  leading: {
+    kJuA4N: "musaex-1kxrqrs",
+    k1xSpc: "musaex-78zum5",
+    kSGwAc: "musaex-amitd3",
+    kMwMTN: "musaex-s3pv69",
+    $$css: true
+  },
+  title: {
+    kJuA4N: "musaex-nyuz70",
+    $$css: true
+  },
+  content: {
+    kJuA4N: "musaex-1fdo2jl",
+    $$css: true
+  },
+  footer: {
+    kJuA4N: "musaex-m8arw7",
+    kjj79g: "musaex-13a6bvl",
+    $$css: true
+  }
+};
+
+exports.default = styles;

package/dist/components/popconfirm/styles.d.ts

@@ -0,0 +1,29 @@
+declare const styles: Readonly<{
+    readonly popconfirm: Readonly<{
+        readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
+        readonly maxWidth: import("@stylexjs/stylex").StyleXClassNameFor<"maxWidth", "100vw">;
+        readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "grid">;
+        readonly gridTemplateAreas: import("@stylexjs/stylex").StyleXClassNameFor<"gridTemplateAreas", "'leading title' '. content' 'footer footer'">;
+        readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly simple: Readonly<{
+        readonly gridTemplateAreas: import("@stylexjs/stylex").StyleXClassNameFor<"gridTemplateAreas", "'leading content' 'footer footer'">;
+    }>;
+    readonly leading: Readonly<{
+        readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "leading">;
+        readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+        readonly alignSelf: import("@stylexjs/stylex").StyleXClassNameFor<"alignSelf", "center">;
+        readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-warning)">;
+    }>;
+    readonly title: Readonly<{
+        readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "title">;
+    }>;
+    readonly content: Readonly<{
+        readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "content">;
+    }>;
+    readonly footer: Readonly<{
+        readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "footer">;
+        readonly justifyContent: import("@stylexjs/stylex").StyleXClassNameFor<"justifyContent", "flex-end">;
+    }>;
+}>;
+export default styles;

package/dist/components/popconfirm/styles.mjs

@@ -0,0 +1,36 @@
+var styles = {
+  popconfirm: {
+    kmVPX3: "musaex-6b7nyu",
+    ks0D6T: "musaex-16xn7b0",
+    k1xSpc: "musaex-rvj5dj",
+    kC13JO: "musaex-1jix8dk",
+    kOIVth: "musaex-1wm2zkp",
+    $$css: true
+  },
+  simple: {
+    kC13JO: "musaex-10dkvcv",
+    $$css: true
+  },
+  leading: {
+    kJuA4N: "musaex-1kxrqrs",
+    k1xSpc: "musaex-78zum5",
+    kSGwAc: "musaex-amitd3",
+    kMwMTN: "musaex-s3pv69",
+    $$css: true
+  },
+  title: {
+    kJuA4N: "musaex-nyuz70",
+    $$css: true
+  },
+  content: {
+    kJuA4N: "musaex-1fdo2jl",
+    $$css: true
+  },
+  footer: {
+    kJuA4N: "musaex-m8arw7",
+    kjj79g: "musaex-13a6bvl",
+    $$css: true
+  }
+};
+
+export { styles as default };

package/dist/components/popover/popover.cjs

@@ -6,6 +6,7 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _regenerator = require('@babel/runtime/helpers/regenerator');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('./styles.cjs');
 var relax = require('@aiszlab/relax');
 var react = require('@aiszlab/relax/react');
 var React = require('react');
@@ -18,20 +19,6 @@ var context = require('./context.cjs');
 var theme = require('../theme/theme.cjs');
 var useIsVisibleState = require('./hooks/use-is-visible-state.cjs');
 
-var styles = {
-  popover: {
-    "default": {
-      ks0D6T: "musaex-16xn7b0",
-      k1xSpc: "musaex-78zum5",
-      kXwgrk: "musaex-dt5ytf",
-      kOIVth: "musaex-1wm2zkp",
-      $$css: true
-    },
-    padding: {
-      kmVPX3: "musaex-zre1s9",
-      $$css: true
-    }
-  }};
 var Popover = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$triggerBy = _ref2.triggerBy,
     _triggerBy = _ref2$triggerBy === void 0 ? "hover" : _ref2$triggerBy,
@@ -137,9 +124,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   // valid elment, inject handlers
   // else add `div` wrapper, inject handlers to `div` wrapper
   var children = React.useMemo(function () {
-    var styled = {
-      className: "musaex-eq5yr9 musaex-g7h5cd"
-    };
+    var styled = stylex.props(styles.default.virtual.base);
     var _child = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(_children) ? _children : (/*#__PURE__*/React.createElement("div", {
       className: styled.className,
       style: styled.style
@@ -172,7 +157,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     };
   });
   var styled = {
-    popover: stylex.props(styles.popover["default"], !!padding && styles.popover.padding, theme.$body.medium),
+    popover: stylex.props(styles.default.popover.base, !!padding && styles.default.popover.padding, theme.$body.medium),
     title: stylex.props(theme.$title.medium),
     content: stylex.props(theme.$body.medium)
   };

package/dist/components/popover/popover.mjs

@@ -2,6 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _regenerator from '@babel/runtime/helpers/regenerator';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import { useEvent, useHover, useFocus, isRefable, useClickAway, isNumber } from '@aiszlab/relax';
 import { mountRef } from '@aiszlab/relax/react';
 import React, { forwardRef, useRef, useCallback, isValidElement, useMemo, cloneElement, useImperativeHandle } from 'react';
@@ -14,20 +15,6 @@ import { CLASS_NAMES } from './context.mjs';
 import { $body, $title } from '../theme/theme.mjs';
 import { useIsVisibleState } from './hooks/use-is-visible-state.mjs';
 
-var styles = {
-  popover: {
-    "default": {
-      ks0D6T: "musaex-16xn7b0",
-      k1xSpc: "musaex-78zum5",
-      kXwgrk: "musaex-dt5ytf",
-      kOIVth: "musaex-1wm2zkp",
-      $$css: true
-    },
-    padding: {
-      kmVPX3: "musaex-zre1s9",
-      $$css: true
-    }
-  }};
 var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref2$triggerBy = _ref2.triggerBy,
     _triggerBy = _ref2$triggerBy === void 0 ? "hover" : _ref2$triggerBy,
@@ -133,14 +120,12 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   // valid elment, inject handlers
   // else add `div` wrapper, inject handlers to `div` wrapper
   var children = useMemo(function () {
-    var styled = {
-      className: "musaex-eq5yr9 musaex-g7h5cd"
-    };
+    var styled = props(styles.virtual.base);
     var _child = /*#__PURE__*/ /*#__PURE__*/isValidElement(_children) ? _children : (/*#__PURE__*/React.createElement("div", {
       className: styled.className,
       style: styled.style
     }, _children));
-    var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, isHoverable && hoverProps), isFocusable && focusProps), isClickable && {
+    var props$1 = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, isHoverable && hoverProps), isFocusable && focusProps), isClickable && {
       onClick: click
     }), isContextMenuable && {
       onContextMenu: onContextMenu
@@ -151,7 +136,7 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       }
     });
     // eslint-disable-next-line react-hooks/refs
-    return /*#__PURE__*/cloneElement(_child, props);
+    return /*#__PURE__*/cloneElement(_child, props$1);
   }, [_children, focusProps, hoverProps, isClickable, isContextMenuable, isFocusable, isHoverable, click, onContextMenu]);
   var onPopperHoverEnter = useCallback(function () {
     turnOn();
@@ -168,7 +153,7 @@ var Popover = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     };
   });
   var styled = {
-    popover: props(styles.popover["default"], !!padding && styles.popover.padding, $body.medium),
+    popover: props(styles.popover.base, !!padding && styles.popover.padding, $body.medium),
     title: props($title.medium),
     content: props($body.medium)
   };

package/dist/components/popover/styles.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var popover = {
+  base: {
+    ks0D6T: "musaex-16xn7b0",
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kOIVth: "musaex-1wm2zkp",
+    $$css: true
+  },
+  padding: {
+    kmVPX3: "musaex-zre1s9",
+    $$css: true
+  }
+};
+var virtual = {
+  base: {
+    kzqmXN: "musaex-eq5yr9",
+    kZKoxP: "musaex-g7h5cd",
+    $$css: true
+  }
+};
+var styles = {
+  popover: popover,
+  virtual: virtual
+};
+
+exports.default = styles;

package/dist/components/popover/styles.d.ts

@@ -0,0 +1,20 @@
+declare const styles: {
+    popover: Readonly<{
+        readonly base: Readonly<{
+            readonly maxWidth: import("@stylexjs/stylex").StyleXClassNameFor<"maxWidth", "100vw">;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+        }>;
+        readonly padding: Readonly<{
+            readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", `var(--padding, ${import("@stylexjs/stylex").StyleXVar<string>})`>;
+        }>;
+    }>;
+    virtual: Readonly<{
+        readonly base: Readonly<{
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "fit-content">;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", "fit-content">;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/popover/styles.mjs

@@ -0,0 +1,26 @@
+var popover = {
+  base: {
+    ks0D6T: "musaex-16xn7b0",
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kOIVth: "musaex-1wm2zkp",
+    $$css: true
+  },
+  padding: {
+    kmVPX3: "musaex-zre1s9",
+    $$css: true
+  }
+};
+var virtual = {
+  base: {
+    kzqmXN: "musaex-eq5yr9",
+    kZKoxP: "musaex-g7h5cd",
+    $$css: true
+  }
+};
+var styles = {
+  popover: popover,
+  virtual: virtual
+};
+
+export { styles as default };

package/dist/components/popper/__test__/dropdown.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/popper/dropdown.cjs

@@ -4,13 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var styles = require('./styles.cjs');
 var React = require('react');
 var useClassNames = require('../../hooks/use-class-names.cjs');
+var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
 var className = require('@aiszlab/relax/class-name');
-var hooks$1 = require('./hooks.cjs');
-var hooks = require('../theme/hooks.cjs');
+var hooks = require('./hooks.cjs');
 var dom = require('@aiszlab/relax/dom');
 var context = require('./context.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
 
 var _excluded = ["open", "children", "placement", "style", "className", "onEnter", "onExit", "onExited", "onEntered", "trigger", "offset", "overlay", "arrow", "disappearable", "elevation", "portalClassName", "portalStyle"];
 var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -37,8 +40,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     portalStyle = _ref.portalStyle,
     props = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var theme = hooks.useTheme();
-  var _useFloating = hooks$1.useFloating({
+  var themeColorVars = useThemeColorVars.useThemeColorVars(["surface", ["shadow", tokens_stylex.OPACITY.thicker], ["shadow", tokens_stylex.OPACITY.thick], ["shadow", tokens_stylex.OPACITY.medium]]);
+  var _useFloating = hooks.useFloating({
       arrowable: arrowable,
       offset: offset,
       placement: placement,
@@ -64,31 +67,13 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   });
   var styled = {
-    dropdown: {
-      0: {
-        className: "musaex-10l6tqk musaex-17o6occ musaex-13vifvy musaex-1o0tod musaex-m9kfsm musaex-67bb7w musaex-1larqbn musaex-19991ni musaex-1g2r6go musaex-1s85apg musaex-g01cxk"
-      },
-      1: {
-        className: "musaex-10l6tqk musaex-17o6occ musaex-13vifvy musaex-1o0tod musaex-m9kfsm musaex-67bb7w musaex-1larqbn musaex-19991ni musaex-1g2r6go musaex-1s85apg musaex-g01cxk musaex-16g3oyh"
-      }
-    }[!!elevation << 0],
-    arrow: {
-      className: "musaex-10l6tqk musaex-1fdp3o3 musaex-151xgyu musaex-17o6occ musaex-1158fpu musaex-1gn0fna"
-    },
-    portal: {
-      0: {
-        className: "musaex-ixxii4 musaex-b3r6kr musaex-47corl musaex-10a8y8t musaex-1xd8qwe"
-      },
-      1: {
-        className: "musaex-ixxii4 musaex-b3r6kr musaex-47corl musaex-10a8y8t musaex-12yt2qg"
-      }
-    }[!!overlay << 0]
+    dropdown: stylex.props(styles.default.dropdown.base, elevation && styles.default.dropdown.elevation),
+    arrow: stylex.props(styles.default.arrow.base),
+    portal: stylex.props(styles.default.portal.base, overlay && styles.default.portal.overlay)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.popper, portalClassName, styled.portal.className),
-    style: _objectSpread(_objectSpread(_objectSpread({}, styled.portal.style), portalStyle), {}, {
-      "--color-surface-container": theme.colors["surface-container"]
-    })
+    style: _objectSpread(_objectSpread(_objectSpread({}, styled.portal.style), portalStyle), themeColorVars)
   }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
     ref: floatableRef
   }, props), {}, {

package/dist/components/popper/dropdown.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { PopperRef } from "../../types/popper";
-declare const Dropdown: React.ForwardRefExoticComponent<Omit<import("../../types/popper").PopperProps, "placement" | "container" | "portal"> & {
+declare const Dropdown: React.ForwardRefExoticComponent<Omit<import("../../types/popper").PopperProps, "container" | "placement" | "portal"> & {
     placement: import("@floating-ui/dom").Placement;
 } & React.RefAttributes<PopperRef>>;
 export default Dropdown;