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

package/dist/components/select/selector.mjs

@@ -1,27 +1,12 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { forwardRef, useRef, useContext, useImperativeHandle } from 'react';
+import styles from './styles.mjs';
+import React, { forwardRef } from 'react';
 import Tag from '../tag/tag.mjs';
-import { styles as styles$1 } from '../input/input.mjs';
+import Input from '../input/input.mjs';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
-import { Context } from '../picker/context.mjs';
-import { $body } from '../theme/theme.mjs';
-import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
-import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { isMultiple } from './utils.mjs';
+import IconClose from '../icon/icons/navigation/close.mjs';
 
-var styles = {
-  input: {
-    focused: {
-      "default": {
-        $$css: true
-      },
-      searchable: {
-        k8Qsv1: "musaex-1ew5llu",
-        $$css: true
-      }
-    }
-  }};
 var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var mode = _ref.mode,
     searchable = _ref.searchable,
@@ -29,80 +14,65 @@ var Selector = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onSearch = _ref.onSearch,
     keyword = _ref.keyword,
     onChange = _ref.onChange,
-    onBlur = _ref.onBlur,
+    _onBlur = _ref.onBlur,
+    onClose = _ref.onClose,
+    onOpen = _ref.onOpen,
+    onClear = _ref.onClear,
+    onClick = _ref.onClick,
     placeholder = _ref.placeholder,
+    label = _ref.label,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var inputRef = useRef(null);
-  var _useContext = useContext(Context),
-    isFocused = _useContext.isFocused,
-    open = _useContext.open;
-  var _themeColorVars = useThemeColorVars(["on-surface", ["on-surface", OPACITY.thickest]]);
-  useImperativeHandle(ref, function () {
-    return {
-      focus: function focus() {
-        var _inputRef$current;
-        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-      }
-    };
-  });
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$invalid = _ref.invalid,
+    invalid = _ref$invalid === void 0 ? false : _ref$invalid;
+  var multiple = isMultiple(mode);
+  var selectedValue = Array.from(value.values()).join(",");
   // on user search input, trigger the search callback
-  var search = function search(e) {
-    open === null || open === void 0 || open();
-    onSearch(e.target.value);
+  var search = function search(nextKeyword) {
+    onOpen();
+    onSearch(nextKeyword);
   };
   var styled = {
-    input: props(styles$1.input, styles.input.focused["default"], isFocused && searchable && styles.input.focused.searchable, $body.small),
-    placeholder: {
-      className: "musaex-1ldep6k"
-    }
+    input: props(styles.selector.input)
   };
-  // multiple mode render
-  if (isMultiple(mode)) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(value.entries()).map(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        label = _ref3[1];
-      return /*#__PURE__*/React.createElement(Tag, {
-        key: key,
-        size: "small",
-        closable: !disabled,
-        onClose: function onClose(event) {
-          // stop event: in `Select`, it will trigger and open the popup
-          event.stopPropagation();
-          onChange(key);
-        }
-      }, label);
-    }), searchable && (/*#__PURE__*/React.createElement("input", {
-      ref: inputRef,
-      value: keyword,
-      className: styled.input.className,
-      style: _objectSpread(_objectSpread({}, styled.input.style), _themeColorVars),
-      onChange: search,
-      onBlur: onBlur,
-      placeholder: placeholder,
-      disabled: disabled
-    })));
-  }
-  // single mode render
-  if (!searchable) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: styled.input.className,
-      style: _objectSpread(_objectSpread({}, styled.input.style), _themeColorVars)
-    }, Array.from(value.values()).join(",") || !!placeholder && (/*#__PURE__*/React.createElement("span", {
-      className: styled.placeholder.className,
-      style: styled.placeholder.style
-    }, placeholder)));
-  }
-  return /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
-    value: keyword,
-    placeholder: Array.from(value.values()).join(",") || placeholder,
+  var selections = multiple ? Array.from(value.entries()).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      label = _ref3[1];
+    return /*#__PURE__*/React.createElement(Tag, {
+      key: key,
+      size: "small",
+      closable: !disabled,
+      onClose: function onClose(event) {
+        // stop event: in `Select`, it will trigger and open the popup
+        event.stopPropagation();
+        onChange(key);
+      }
+    }, label);
+  }) : undefined;
+  return /*#__PURE__*/React.createElement(Input, {
+    ref: ref,
+    value: searchable ? keyword : multiple ? "" : selectedValue,
+    placeholder: searchable && !multiple ? selectedValue || placeholder : placeholder,
+    label: label,
     className: styled.input.className,
-    style: _objectSpread(_objectSpread({}, styled.input.style), _themeColorVars),
-    onChange: search,
-    onBlur: onBlur,
-    disabled: disabled
+    style: styled.input.style,
+    onChange: searchable ? search : undefined,
+    onClick: onClick,
+    onBlur: function onBlur(event) {
+      _onBlur === null || _onBlur === void 0 || _onBlur(event);
+      onClose();
+    },
+    readOnly: !searchable,
+    disabled: disabled,
+    invalid: invalid,
+    leading: selections,
+    trailing: !!onClear && !disabled && (/*#__PURE__*/React.createElement(IconClose, {
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        onClear();
+      }
+    }))
   });
 });
 

package/dist/components/select/styles.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var select = {
+  pickable: {
+    kmVPX3: "musaex-1nskiab",
+    $$css: true
+  }
+};
+var selector = {
+  input: {
+    kOIVth: "musaex-15wobh7",
+    kwnvtZ: "musaex-1a02dak",
+    $$css: true
+  }
+};
+var styles = {
+  select: select,
+  selector: selector
+};
+
+exports.default = styles;

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

@@ -0,0 +1,14 @@
+declare const styles: {
+    select: Readonly<{
+        readonly pickable: Readonly<{
+            readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
+        }>;
+    }>;
+    selector: Readonly<{
+        readonly input: Readonly<{
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+            readonly flexWrap: import("@stylexjs/stylex").StyleXClassNameFor<"flexWrap", "wrap">;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/select/styles.mjs

@@ -0,0 +1,19 @@
+var select = {
+  pickable: {
+    kmVPX3: "musaex-1nskiab",
+    $$css: true
+  }
+};
+var selector = {
+  input: {
+    kOIVth: "musaex-15wobh7",
+    kwnvtZ: "musaex-1a02dak",
+    $$css: true
+  }
+};
+var styles = {
+  select: select,
+  selector: selector
+};
+
+export { styles as default };

package/dist/components/sheet/sheet.cjs

@@ -7,6 +7,7 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 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 React = require('react');
 var react = require('motion/react');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
@@ -21,84 +22,6 @@ var stackLevel_context = require('../../contexts/stack-level.context.cjs');
 var hooks = require('./hooks.cjs');
 var context = require('./context.cjs');
 
-var styles = {
-  stackLevel: {
-    kY2c9j: "musaex-pje0qt",
-    $$css: true
-  },
-  container: {
-    kVAEAm: "musaex-ixxii4",
-    kpwlN0: "musaex-10a8y8t",
-    kfzvcC: "musaex-47corl",
-    $$css: true
-  },
-  modal: {
-    kZeWKH: "musaex-ish69e",
-    kVQacm: "musaex-b3r6kr",
-    $$css: true
-  },
-  overlay: {
-    kVAEAm: "musaex-10l6tqk",
-    kpwlN0: "musaex-10a8y8t",
-    kfzvcC: "musaex-67bb7w",
-    kSiTet: "musaex-g01cxk",
-    kWkggS: "musaex-11we2rp",
-    $$css: true
-  },
-  panel: {
-    kVAEAm: "musaex-10l6tqk",
-    kfzvcC: "musaex-67bb7w",
-    k6sLGO: "musaex-1so62im",
-    k1xSpc: "musaex-78zum5",
-    kXwgrk: "musaex-dt5ytf",
-    kVQacm: "musaex-b3r6kr",
-    k3aq6I: "musaex-n7yqov",
-    $$css: true
-  },
-  right: {
-    kCIrl2: "musaex-3m8u43",
-    k87sOh: "musaex-13vifvy",
-    krVfgx: "musaex-1ey2m1c",
-    kzqmXN: "musaex-1fjlwjz",
-    $$css: true
-  },
-  left: {
-    kbCHJM: "musaex-u96u03",
-    k87sOh: "musaex-13vifvy",
-    krVfgx: "musaex-1ey2m1c",
-    kzqmXN: "musaex-1fjlwjz",
-    $$css: true
-  },
-  bottom: {
-    krVfgx: "musaex-1ey2m1c",
-    kbCHJM: "musaex-u96u03",
-    kCIrl2: "musaex-3m8u43",
-    kZKoxP: "musaex-188dgw3",
-    $$css: true
-  },
-  top: {
-    k87sOh: "musaex-13vifvy",
-    kbCHJM: "musaex-u96u03",
-    kCIrl2: "musaex-3m8u43",
-    kZKoxP: "musaex-188dgw3",
-    $$css: true
-  },
-  body: {
-    kUk6DE: "musaex-98rzlu",
-    kVQacm: "musaex-ysyzu8",
-    kZeWKH: "musaex-ish69e",
-    $$css: true
-  },
-  panelFullscreen: {
-    kRDq7Z: "musaex-1ej3teu",
-    kllhKz: "musaex-1pzvw0h",
-    kIfGbc: "musaex-1se81xg",
-    kBJAon: "musaex-19wv56r",
-    kGHaHD: "musaex-1m33i82",
-    kYNdYH: "musaex-1uogugb",
-    $$css: true
-  }
-};
 /**
  * @zh 共享的 Sheet 基础组件。渲染带遮罩层的模态面板，支持方位驱动的滑动动画、
  * 焦点管理和 body 滚动锁定。Drawer 和 BottomSheet 是围绕此组件的薄封装。
@@ -117,6 +40,7 @@ var Sheet = function Sheet(_ref) {
     header = _ref.header,
     footer = _ref.footer,
     className$1 = _ref.className,
+    style = _ref.style,
     panelClassName = _ref.panelClassName,
     panelStyle = _ref.panelStyle,
     _ref$modal = _ref.modal,
@@ -197,24 +121,10 @@ var Sheet = function Sheet(_ref) {
     }, _callee);
   })), [visible].concat(_toConsumableArray(_placement)));
   var styled = {
-    stackLevel: {
-      className: "musaex-pje0qt"
-    },
-    container: {
-      0: {
-        className: "musaex-pje0qt musaex-ixxii4 musaex-10a8y8t musaex-47corl"
-      },
-      1: {
-        className: "musaex-pje0qt musaex-ixxii4 musaex-10a8y8t musaex-47corl musaex-ish69e musaex-b3r6kr"
-      }
-    }[!!modal << 0],
-    overlay: {
-      className: "musaex-10l6tqk musaex-10a8y8t musaex-67bb7w musaex-g01cxk musaex-11we2rp"
-    },
-    panel: stylex.props(styles.panel, styles[placement], styles.panelFullscreen),
-    body: {
-      className: "musaex-98rzlu musaex-ysyzu8 musaex-ish69e"
-    }
+    stackLevel: stylex.props(styles.default.stackLevel.base),
+    container: stylex.props(styles.default.stackLevel.base, styles.default.container.base, modal && styles.default.container.modal),
+    overlay: stylex.props(styles.default.overlay.base),
+    panel: stylex.props(styles.default.panel.base, styles.default.panel[placement])
   };
   return /*#__PURE__*/React.createElement(portal.default, {
     open: visible || _isVisible,
@@ -231,7 +141,7 @@ var Sheet = function Sheet(_ref) {
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.container.style), themeColorVars), {}, {
       "--default-position": relax.at(_placement, 0),
       "--size": typeof size === "number" ? "".concat(size, "px") : size
-    }),
+    }, style),
     onKeyDown: onKeyDown
   }, /*#__PURE__*/React.createElement("div", {
     ref: overlayRef,
@@ -242,10 +152,7 @@ var Sheet = function Sheet(_ref) {
     ref: panelRef,
     className: className.stringify(classNames.panel, panelClassName, styled.panel.className),
     style: _objectSpread(_objectSpread({}, styled.panel.style), panelStyle)
-  }, header, /*#__PURE__*/React.createElement("div", {
-    className: className.stringify(classNames.body, styled.body.className),
-    style: styled.body.style
-  }, children), footer))));
+  }, header, children, footer))));
 };
 
 exports.default = Sheet;

package/dist/components/sheet/sheet.d.ts

@@ -7,5 +7,5 @@ import type { SheetProps } from "../../types/sheet";
  * placement-driven slide animation, focus management, and body scroll lock.
  * Drawer and BottomSheet are thin wrappers around this component.
  */
-declare const Sheet: ({ visible, onClose, placement, size, closable, header, footer, className, panelClassName, panelStyle, modal, children, }: SheetProps) => React.JSX.Element;
+declare const Sheet: ({ visible, onClose, placement, size, closable, header, footer, className, style, panelClassName, panelStyle, modal, children, }: SheetProps) => React.JSX.Element;
 export default Sheet;

package/dist/components/sheet/sheet.mjs

@@ -3,6 +3,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 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 React, { useRef } from 'react';
 import { animate } from 'motion/react';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
@@ -17,84 +18,6 @@ import StackLevelContext from '../../contexts/stack-level.context.mjs';
 import { PLACEMENTS } from './hooks.mjs';
 import { CLASS_NAMES } from './context.mjs';
 
-var styles = {
-  stackLevel: {
-    kY2c9j: "musaex-pje0qt",
-    $$css: true
-  },
-  container: {
-    kVAEAm: "musaex-ixxii4",
-    kpwlN0: "musaex-10a8y8t",
-    kfzvcC: "musaex-47corl",
-    $$css: true
-  },
-  modal: {
-    kZeWKH: "musaex-ish69e",
-    kVQacm: "musaex-b3r6kr",
-    $$css: true
-  },
-  overlay: {
-    kVAEAm: "musaex-10l6tqk",
-    kpwlN0: "musaex-10a8y8t",
-    kfzvcC: "musaex-67bb7w",
-    kSiTet: "musaex-g01cxk",
-    kWkggS: "musaex-11we2rp",
-    $$css: true
-  },
-  panel: {
-    kVAEAm: "musaex-10l6tqk",
-    kfzvcC: "musaex-67bb7w",
-    k6sLGO: "musaex-1so62im",
-    k1xSpc: "musaex-78zum5",
-    kXwgrk: "musaex-dt5ytf",
-    kVQacm: "musaex-b3r6kr",
-    k3aq6I: "musaex-n7yqov",
-    $$css: true
-  },
-  right: {
-    kCIrl2: "musaex-3m8u43",
-    k87sOh: "musaex-13vifvy",
-    krVfgx: "musaex-1ey2m1c",
-    kzqmXN: "musaex-1fjlwjz",
-    $$css: true
-  },
-  left: {
-    kbCHJM: "musaex-u96u03",
-    k87sOh: "musaex-13vifvy",
-    krVfgx: "musaex-1ey2m1c",
-    kzqmXN: "musaex-1fjlwjz",
-    $$css: true
-  },
-  bottom: {
-    krVfgx: "musaex-1ey2m1c",
-    kbCHJM: "musaex-u96u03",
-    kCIrl2: "musaex-3m8u43",
-    kZKoxP: "musaex-188dgw3",
-    $$css: true
-  },
-  top: {
-    k87sOh: "musaex-13vifvy",
-    kbCHJM: "musaex-u96u03",
-    kCIrl2: "musaex-3m8u43",
-    kZKoxP: "musaex-188dgw3",
-    $$css: true
-  },
-  body: {
-    kUk6DE: "musaex-98rzlu",
-    kVQacm: "musaex-ysyzu8",
-    kZeWKH: "musaex-ish69e",
-    $$css: true
-  },
-  panelFullscreen: {
-    kRDq7Z: "musaex-1ej3teu",
-    kllhKz: "musaex-1pzvw0h",
-    kIfGbc: "musaex-1se81xg",
-    kBJAon: "musaex-19wv56r",
-    kGHaHD: "musaex-1m33i82",
-    kYNdYH: "musaex-1uogugb",
-    $$css: true
-  }
-};
 /**
  * @zh 共享的 Sheet 基础组件。渲染带遮罩层的模态面板，支持方位驱动的滑动动画、
  * 焦点管理和 body 滚动锁定。Drawer 和 BottomSheet 是围绕此组件的薄封装。
@@ -113,6 +36,7 @@ var Sheet = function Sheet(_ref) {
     header = _ref.header,
     footer = _ref.footer,
     className = _ref.className,
+    style = _ref.style,
     panelClassName = _ref.panelClassName,
     panelStyle = _ref.panelStyle,
     _ref$modal = _ref.modal,
@@ -193,24 +117,10 @@ var Sheet = function Sheet(_ref) {
     }, _callee);
   })), [visible].concat(_toConsumableArray(_placement)));
   var styled = {
-    stackLevel: {
-      className: "musaex-pje0qt"
-    },
-    container: {
-      0: {
-        className: "musaex-pje0qt musaex-ixxii4 musaex-10a8y8t musaex-47corl"
-      },
-      1: {
-        className: "musaex-pje0qt musaex-ixxii4 musaex-10a8y8t musaex-47corl musaex-ish69e musaex-b3r6kr"
-      }
-    }[!!modal << 0],
-    overlay: {
-      className: "musaex-10l6tqk musaex-10a8y8t musaex-67bb7w musaex-g01cxk musaex-11we2rp"
-    },
-    panel: props(styles.panel, styles[placement], styles.panelFullscreen),
-    body: {
-      className: "musaex-98rzlu musaex-ysyzu8 musaex-ish69e"
-    }
+    stackLevel: props(styles.stackLevel.base),
+    container: props(styles.stackLevel.base, styles.container.base, modal && styles.container.modal),
+    overlay: props(styles.overlay.base),
+    panel: props(styles.panel.base, styles.panel[placement])
   };
   return /*#__PURE__*/React.createElement(Portal, {
     open: visible || _isVisible,
@@ -227,7 +137,7 @@ var Sheet = function Sheet(_ref) {
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.container.style), themeColorVars), {}, {
       "--default-position": at(_placement, 0),
       "--size": typeof size === "number" ? "".concat(size, "px") : size
-    }),
+    }, style),
     onKeyDown: onKeyDown
   }, /*#__PURE__*/React.createElement("div", {
     ref: overlayRef,
@@ -238,10 +148,7 @@ var Sheet = function Sheet(_ref) {
     ref: panelRef,
     className: stringify(classNames.panel, panelClassName, styled.panel.className),
     style: _objectSpread(_objectSpread({}, styled.panel.style), panelStyle)
-  }, header, /*#__PURE__*/React.createElement("div", {
-    className: stringify(classNames.body, styled.body.className),
-    style: styled.body.style
-  }, children), footer))));
+  }, header, children, footer))));
 };
 
 export { Sheet as default };

package/dist/components/sheet/styles.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var stackLevel = {
+  base: {
+    kY2c9j: "musaex-pje0qt",
+    $$css: true
+  }
+};
+var container = {
+  base: {
+    kVAEAm: "musaex-ixxii4",
+    kpwlN0: "musaex-10a8y8t",
+    kfzvcC: "musaex-47corl",
+    $$css: true
+  },
+  modal: {
+    kZeWKH: "musaex-ish69e",
+    kVQacm: "musaex-b3r6kr",
+    $$css: true
+  }
+};
+var overlay = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kpwlN0: "musaex-10a8y8t",
+    kfzvcC: "musaex-67bb7w",
+    kSiTet: "musaex-g01cxk",
+    kWkggS: "musaex-11we2rp",
+    $$css: true
+  }
+};
+var panel = {
+  base: {
+    kVAEAm: "musaex-10l6tqk",
+    kfzvcC: "musaex-67bb7w",
+    k6sLGO: "musaex-1so62im",
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kVQacm: "musaex-b3r6kr",
+    k3aq6I: "musaex-n7yqov",
+    $$css: true
+  },
+  right: {
+    kCIrl2: "musaex-3m8u43",
+    k87sOh: "musaex-13vifvy",
+    krVfgx: "musaex-1ey2m1c",
+    kzqmXN: "musaex-1fjlwjz",
+    $$css: true
+  },
+  left: {
+    kbCHJM: "musaex-u96u03",
+    k87sOh: "musaex-13vifvy",
+    krVfgx: "musaex-1ey2m1c",
+    kzqmXN: "musaex-1fjlwjz",
+    $$css: true
+  },
+  bottom: {
+    krVfgx: "musaex-1ey2m1c",
+    kbCHJM: "musaex-u96u03",
+    kCIrl2: "musaex-3m8u43",
+    kZKoxP: "musaex-188dgw3",
+    $$css: true
+  },
+  top: {
+    k87sOh: "musaex-13vifvy",
+    kbCHJM: "musaex-u96u03",
+    kCIrl2: "musaex-3m8u43",
+    kZKoxP: "musaex-188dgw3",
+    $$css: true
+  }
+};
+var styles = {
+  stackLevel: stackLevel,
+  container: container,
+  overlay: overlay,
+  panel: panel
+};
+
+exports.default = styles;

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

@@ -0,0 +1,63 @@
+declare const styles: {
+    stackLevel: Readonly<{
+        readonly base: Readonly<{
+            readonly zIndex: import("@stylexjs/stylex").StyleXClassNameFor<"zIndex", string>;
+        }>;
+    }>;
+    container: Readonly<{
+        readonly base: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "fixed">;
+            readonly inset: import("@stylexjs/stylex").StyleXClassNameFor<"inset", 0>;
+            readonly pointerEvents: import("@stylexjs/stylex").StyleXClassNameFor<"pointerEvents", "none">;
+        }>;
+        readonly modal: Readonly<{
+            readonly overscrollBehavior: import("@stylexjs/stylex").StyleXClassNameFor<"overscrollBehavior", "contain">;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
+        }>;
+    }>;
+    overlay: Readonly<{
+        readonly base: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
+            readonly inset: import("@stylexjs/stylex").StyleXClassNameFor<"inset", 0>;
+            readonly pointerEvents: import("@stylexjs/stylex").StyleXClassNameFor<"pointerEvents", "auto">;
+            readonly opacity: import("@stylexjs/stylex").StyleXClassNameFor<"opacity", 0>;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface-dim)">;
+        }>;
+    }>;
+    panel: Readonly<{
+        readonly base: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
+            readonly pointerEvents: import("@stylexjs/stylex").StyleXClassNameFor<"pointerEvents", "auto">;
+            readonly willChange: import("@stylexjs/stylex").StyleXClassNameFor<"willChange", "transform">;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
+            readonly transform: import("@stylexjs/stylex").StyleXClassNameFor<"transform", "var(--default-position)">;
+        }>;
+        readonly right: Readonly<{
+            readonly right: import("@stylexjs/stylex").StyleXClassNameFor<"right", 0>;
+            readonly top: import("@stylexjs/stylex").StyleXClassNameFor<"top", 0>;
+            readonly bottom: import("@stylexjs/stylex").StyleXClassNameFor<"bottom", 0>;
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "var(--size)">;
+        }>;
+        readonly left: Readonly<{
+            readonly left: import("@stylexjs/stylex").StyleXClassNameFor<"left", 0>;
+            readonly top: import("@stylexjs/stylex").StyleXClassNameFor<"top", 0>;
+            readonly bottom: import("@stylexjs/stylex").StyleXClassNameFor<"bottom", 0>;
+            readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", "var(--size)">;
+        }>;
+        readonly bottom: Readonly<{
+            readonly bottom: import("@stylexjs/stylex").StyleXClassNameFor<"bottom", 0>;
+            readonly left: import("@stylexjs/stylex").StyleXClassNameFor<"left", 0>;
+            readonly right: import("@stylexjs/stylex").StyleXClassNameFor<"right", 0>;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", "var(--size)">;
+        }>;
+        readonly top: Readonly<{
+            readonly top: import("@stylexjs/stylex").StyleXClassNameFor<"top", 0>;
+            readonly left: import("@stylexjs/stylex").StyleXClassNameFor<"left", 0>;
+            readonly right: import("@stylexjs/stylex").StyleXClassNameFor<"right", 0>;
+            readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", "var(--size)">;
+        }>;
+    }>;
+};
+export default styles;