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

package/dist/components/tour/styles.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tour = {
+  overlay: {
+    kVAEAm: "musaex-10l6tqk",
+    kpwlN0: "musaex-10a8y8t",
+    k9M9Na: "musaex-1dzd4em",
+    kWkggS: "musaex-11we2rp",
+    kY2c9j: "musaex-1ypu1o3",
+    $$css: true
+  },
+  tour: {
+    kWkggS: "musaex-1q2mt7c",
+    kXwgrk: "musaex-dt5ytf",
+    kGVxlE: "musaex-16g3oyh",
+    kaIpWk: "musaex-db68te",
+    k1ekBW: "musaex-fagghw",
+    kIyJzY: "musaex-1ptezny",
+    $$css: true
+  },
+  title: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-1oop6c3",
+    kGO01o: "musaex-7gss4w",
+    $$css: true
+  },
+  description: {
+    kg3NbH: "musaex-1v4gb6w",
+    $$css: true
+  },
+  footer: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-ltmd5o",
+    kGO01o: "musaex-5ynjmo",
+    $$css: true
+  }
+};
+var spotlight = {
+  base: {
+    kWkggS: "musaex-1u5qhrl",
+    kaIpWk: "musaex-m9kfsm",
+    k1ekBW: "musaex-11xpdln",
+    kIyJzY: "musaex-1ptezny",
+    k6sLGO: "musaex-1so62im",
+    k1xSpc: "musaex-1s85apg",
+    $$css: true
+  }
+};
+var styles = {
+  tour: tour,
+  spotlight: spotlight
+};
+
+exports.default = styles;

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

@@ -0,0 +1,43 @@
+declare const styles: {
+    tour: Readonly<{
+        readonly overlay: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "absolute">;
+            readonly inset: import("@stylexjs/stylex").StyleXClassNameFor<"inset", 0>;
+            readonly mixBlendMode: import("@stylexjs/stylex").StyleXClassNameFor<"mixBlendMode", "hard-light">;
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface-dim)">;
+            readonly zIndex: import("@stylexjs/stylex").StyleXClassNameFor<"zIndex", string>;
+        }>;
+        readonly tour: Readonly<{
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-on-primary)">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", string>;
+            readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+            readonly transitionProperty: import("@stylexjs/stylex").StyleXClassNameFor<"transitionProperty", "all">;
+            readonly transitionDuration: import("@stylexjs/stylex").StyleXClassNameFor<"transitionDuration", string>;
+        }>;
+        readonly title: Readonly<{
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+            readonly paddingBlockStart: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlockStart", string>;
+            readonly paddingBlockEnd: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlockEnd", string>;
+        }>;
+        readonly description: Readonly<{
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        }>;
+        readonly footer: Readonly<{
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+            readonly paddingBlockStart: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlockStart", string>;
+            readonly paddingBlockEnd: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlockEnd", string>;
+        }>;
+    }>;
+    spotlight: Readonly<{
+        readonly base: Readonly<{
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "#808080">;
+            readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+            readonly transitionProperty: import("@stylexjs/stylex").StyleXClassNameFor<"transitionProperty", "transform">;
+            readonly transitionDuration: import("@stylexjs/stylex").StyleXClassNameFor<"transitionDuration", string>;
+            readonly willChange: import("@stylexjs/stylex").StyleXClassNameFor<"willChange", "transform">;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "none">;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/tour/styles.mjs

@@ -0,0 +1,52 @@
+var tour = {
+  overlay: {
+    kVAEAm: "musaex-10l6tqk",
+    kpwlN0: "musaex-10a8y8t",
+    k9M9Na: "musaex-1dzd4em",
+    kWkggS: "musaex-11we2rp",
+    kY2c9j: "musaex-1ypu1o3",
+    $$css: true
+  },
+  tour: {
+    kWkggS: "musaex-1q2mt7c",
+    kXwgrk: "musaex-dt5ytf",
+    kGVxlE: "musaex-16g3oyh",
+    kaIpWk: "musaex-db68te",
+    k1ekBW: "musaex-fagghw",
+    kIyJzY: "musaex-1ptezny",
+    $$css: true
+  },
+  title: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-1oop6c3",
+    kGO01o: "musaex-7gss4w",
+    $$css: true
+  },
+  description: {
+    kg3NbH: "musaex-1v4gb6w",
+    $$css: true
+  },
+  footer: {
+    kg3NbH: "musaex-1v4gb6w",
+    kLKAdn: "musaex-ltmd5o",
+    kGO01o: "musaex-5ynjmo",
+    $$css: true
+  }
+};
+var spotlight = {
+  base: {
+    kWkggS: "musaex-1u5qhrl",
+    kaIpWk: "musaex-m9kfsm",
+    k1ekBW: "musaex-11xpdln",
+    kIyJzY: "musaex-1ptezny",
+    k6sLGO: "musaex-1so62im",
+    k1xSpc: "musaex-1s85apg",
+    $$css: true
+  }
+};
+var styles = {
+  tour: tour,
+  spotlight: spotlight
+};
+
+export { styles as default };

package/dist/components/tour/tour.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 portal = require('../portal/portal.cjs');
 var popper = require('../popper/popper.cjs');
@@ -21,18 +22,6 @@ var useClassNames = require('../../hooks/use-class-names.cjs');
 var useContainer = require('../../hooks/use-container.cjs');
 var theme = require('../theme/theme.cjs');
 
-var styles = {
-  title: {
-    kg3NbH: "musaex-1v4gb6w",
-    kLKAdn: "musaex-1oop6c3",
-    kGO01o: "musaex-7gss4w",
-    $$css: true
-  },
-  description: {
-    kg3NbH: "musaex-1v4gb6w",
-    $$css: true
-  }
-};
 var Tour = function Tour(_ref) {
   var _ref$steps = _ref.steps,
     steps = _ref$steps === void 0 ? [] : _ref$steps,
@@ -67,17 +56,11 @@ var Tour = function Tour(_ref) {
     }),
     trigger = _useContainer.container;
   var styled = {
-    overlay: {
-      className: "musaex-10l6tqk musaex-10a8y8t musaex-1dzd4em musaex-11we2rp musaex-1ypu1o3"
-    },
-    tour: {
-      className: "musaex-1q2mt7c musaex-dt5ytf musaex-16g3oyh musaex-db68te musaex-fagghw musaex-1ptezny"
-    },
-    title: stylex.props(styles.title, theme.$title.medium),
-    description: stylex.props(styles.description, theme.$body.medium),
-    footer: {
-      className: "musaex-1v4gb6w musaex-ltmd5o musaex-5ynjmo"
-    }
+    overlay: stylex.props(styles.default.tour.overlay),
+    tour: stylex.props(styles.default.tour.tour),
+    title: stylex.props(styles.default.tour.title, theme.$title.medium),
+    description: stylex.props(styles.default.tour.description, theme.$body.medium),
+    footer: stylex.props(styles.default.tour.footer)
   };
   return /*#__PURE__*/React.createElement(context.Context.Provider, {
     value: {

package/dist/components/tour/tour.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 from 'react';
 import Portal from '../portal/portal.mjs';
 import Popper from '../popper/popper.mjs';
@@ -17,18 +18,6 @@ import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { useContainer } from '../../hooks/use-container.mjs';
 import { $body, $title } from '../theme/theme.mjs';
 
-var styles = {
-  title: {
-    kg3NbH: "musaex-1v4gb6w",
-    kLKAdn: "musaex-1oop6c3",
-    kGO01o: "musaex-7gss4w",
-    $$css: true
-  },
-  description: {
-    kg3NbH: "musaex-1v4gb6w",
-    $$css: true
-  }
-};
 var Tour = function Tour(_ref) {
   var _ref$steps = _ref.steps,
     steps = _ref$steps === void 0 ? [] : _ref$steps,
@@ -63,17 +52,11 @@ var Tour = function Tour(_ref) {
     }),
     trigger = _useContainer.container;
   var styled = {
-    overlay: {
-      className: "musaex-10l6tqk musaex-10a8y8t musaex-1dzd4em musaex-11we2rp musaex-1ypu1o3"
-    },
-    tour: {
-      className: "musaex-1q2mt7c musaex-dt5ytf musaex-16g3oyh musaex-db68te musaex-fagghw musaex-1ptezny"
-    },
-    title: props(styles.title, $title.medium),
-    description: props(styles.description, $body.medium),
-    footer: {
-      className: "musaex-1v4gb6w musaex-ltmd5o musaex-5ynjmo"
-    }
+    overlay: props(styles.tour.overlay),
+    tour: props(styles.tour.tour),
+    title: props(styles.tour.title, $title.medium),
+    description: props(styles.tour.description, $body.medium),
+    footer: props(styles.tour.footer)
   };
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {

package/dist/components/transfer/item.cjs

@@ -2,8 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var styles = require('./styles.cjs');
 var React = require('react');
 var index = require('../checkbox/index.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var className = require('@aiszlab/relax/class-name');
 var context = require('./context.cjs');
 
@@ -13,9 +15,7 @@ var Item = function Item(_ref) {
   var _useContext = React.useContext(context.Context),
     classNames = _useContext.classNames;
   var styled = {
-    item: {
-      className: "musaex-78zum5 musaex-6s0dn4 musaex-81lxrv musaex-11owsmz musaex-1wm2zkp"
-    }
+    item: stylex.props(styles.default.item.base)
   };
   return /*#__PURE__*/React.createElement("li", {
     className: className.stringify(classNames.item, styled.item.className),

package/dist/components/transfer/item.mjs

@@ -1,5 +1,7 @@
+import styles from './styles.mjs';
 import React, { useContext } from 'react';
 import { Checkbox } from '../checkbox/index.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { Context } from './context.mjs';
 
@@ -9,9 +11,7 @@ var Item = function Item(_ref) {
   var _useContext = useContext(Context),
     classNames = _useContext.classNames;
   var styled = {
-    item: {
-      className: "musaex-78zum5 musaex-6s0dn4 musaex-81lxrv musaex-11owsmz musaex-1wm2zkp"
-    }
+    item: props(styles.item.base)
   };
   return /*#__PURE__*/React.createElement("li", {
     className: stringify(classNames.item, styled.item.className),

package/dist/components/transfer/list.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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 item = require('./item.cjs');
@@ -12,41 +13,6 @@ var className = require('@aiszlab/relax/class-name');
 var theme = require('../theme/theme.cjs');
 var useLocale = require('../../locale/use-locale.cjs');
 
-var styles = {
-  list: {
-    k7Eaqz: "musaex-16wgjtg",
-    kskxy: "musaex-18v8bz2",
-    k1xSpc: "musaex-78zum5",
-    kXwgrk: "musaex-dt5ytf",
-    kOIVth: "musaex-15wobh7",
-    $$css: true
-  },
-  header: {
-    k1xSpc: "musaex-78zum5",
-    kGNEyG: "musaex-6s0dn4",
-    kmVPX3: "musaex-17p8e4n",
-    kIxVMA: "musaex-ebmt4n",
-    ksF3WI: "musaex-xieajt",
-    kqGeR4: "musaex-3wq0gx",
-    kYm2EN: "musaex-ipjkct",
-    kGVxlE: "musaex-bapks6",
-    $$css: true
-  },
-  body: {
-    kAzted: "musaex-1qm8y5n",
-    kzQI83: "musaex-1iyjqo2",
-    kogj98: "musaex-q3gua8",
-    kIxVMA: "musaex-421gk9",
-    ksF3WI: "musaex-4izuhl",
-    kqGeR4: "musaex-vnpsd4",
-    kYm2EN: "musaex-q8l5kc",
-    kGVxlE: "musaex-bapks6",
-    kVQacm: "musaex-ysyzu8",
-    kg3NbH: "musaex-2961ne",
-    k8WAf4: "musaex-11owsmz",
-    $$css: true
-  }
-};
 var List = function List(_ref) {
   var options = _ref.options,
     title = _ref.title,
@@ -59,12 +25,10 @@ var List = function List(_ref) {
     _useLocale2 = _slicedToArray(_useLocale, 1),
     locale = _useLocale2[0];
   var styled = {
-    list: stylex.props(theme.$scrollbar["default"], styles.list),
-    header: stylex.props(styles.header, theme.$label.large),
-    title: {
-      className: "musaex-b3r6kr musaex-p4054r musaex-1isitws"
-    },
-    body: stylex.props(styles.body, theme.$body.medium)
+    list: stylex.props(theme.$scrollbar.base, styles.default.list.base),
+    header: stylex.props(styles.default.list.header, theme.$label.large),
+    title: stylex.props(styles.default.list.title),
+    body: stylex.props(styles.default.list.body, theme.$body.medium)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.list, styled.list.className),

package/dist/components/transfer/list.mjs

@@ -1,4 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React, { useContext } from 'react';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Item from './item.mjs';
@@ -8,41 +9,6 @@ import { stringify } from '@aiszlab/relax/class-name';
 import { $body, $label, $scrollbar } from '../theme/theme.mjs';
 import { useLocale } from '../../locale/use-locale.mjs';
 
-var styles = {
-  list: {
-    k7Eaqz: "musaex-16wgjtg",
-    kskxy: "musaex-18v8bz2",
-    k1xSpc: "musaex-78zum5",
-    kXwgrk: "musaex-dt5ytf",
-    kOIVth: "musaex-15wobh7",
-    $$css: true
-  },
-  header: {
-    k1xSpc: "musaex-78zum5",
-    kGNEyG: "musaex-6s0dn4",
-    kmVPX3: "musaex-17p8e4n",
-    kIxVMA: "musaex-ebmt4n",
-    ksF3WI: "musaex-xieajt",
-    kqGeR4: "musaex-3wq0gx",
-    kYm2EN: "musaex-ipjkct",
-    kGVxlE: "musaex-bapks6",
-    $$css: true
-  },
-  body: {
-    kAzted: "musaex-1qm8y5n",
-    kzQI83: "musaex-1iyjqo2",
-    kogj98: "musaex-q3gua8",
-    kIxVMA: "musaex-421gk9",
-    ksF3WI: "musaex-4izuhl",
-    kqGeR4: "musaex-vnpsd4",
-    kYm2EN: "musaex-q8l5kc",
-    kGVxlE: "musaex-bapks6",
-    kVQacm: "musaex-ysyzu8",
-    kg3NbH: "musaex-2961ne",
-    k8WAf4: "musaex-11owsmz",
-    $$css: true
-  }
-};
 var List = function List(_ref) {
   var options = _ref.options,
     title = _ref.title,
@@ -55,12 +21,10 @@ var List = function List(_ref) {
     _useLocale2 = _slicedToArray(_useLocale, 1),
     locale = _useLocale2[0];
   var styled = {
-    list: props($scrollbar["default"], styles.list),
-    header: props(styles.header, $label.large),
-    title: {
-      className: "musaex-b3r6kr musaex-p4054r musaex-1isitws"
-    },
-    body: props(styles.body, $body.medium)
+    list: props($scrollbar.base, styles.list.base),
+    header: props(styles.list.header, $label.large),
+    title: props(styles.list.title),
+    body: props(styles.list.body, $body.medium)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(classNames.list, styled.list.className),

package/dist/components/transfer/styles.cjs

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var item = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kg3NbH: "musaex-81lxrv",
+    k8WAf4: "musaex-11owsmz",
+    kOIVth: "musaex-1wm2zkp",
+    $$css: true
+  }
+};
+var list = {
+  base: {
+    k7Eaqz: "musaex-16wgjtg",
+    kskxy: "musaex-18v8bz2",
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kOIVth: "musaex-15wobh7",
+    $$css: true
+  },
+  header: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kmVPX3: "musaex-17p8e4n",
+    kIxVMA: "musaex-ebmt4n",
+    ksF3WI: "musaex-xieajt",
+    kqGeR4: "musaex-3wq0gx",
+    kYm2EN: "musaex-ipjkct",
+    kGVxlE: "musaex-bapks6",
+    $$css: true
+  },
+  title: {
+    kVQacm: "musaex-b3r6kr",
+    k9WMMc: "musaex-p4054r",
+    kUk6DE: "musaex-1isitws",
+    $$css: true
+  },
+  body: {
+    kAzted: "musaex-1qm8y5n",
+    kzQI83: "musaex-1iyjqo2",
+    kogj98: "musaex-q3gua8",
+    kIxVMA: "musaex-421gk9",
+    ksF3WI: "musaex-4izuhl",
+    kqGeR4: "musaex-vnpsd4",
+    kYm2EN: "musaex-q8l5kc",
+    kGVxlE: "musaex-bapks6",
+    kVQacm: "musaex-ysyzu8",
+    kg3NbH: "musaex-2961ne",
+    k8WAf4: "musaex-11owsmz",
+    $$css: true
+  }
+};
+var transfer = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-1q0g3np",
+    kGNEyG: "musaex-1qjc9v5",
+    kOIVth: "musaex-1wm2zkp",
+    $$css: true
+  },
+  operation: {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kOIVth: "musaex-1wm2zkp",
+    kSGwAc: "musaex-amitd3",
+    $$css: true
+  }
+};
+var styles = {
+  item: item,
+  list: list,
+  transfer: transfer
+};
+
+exports.default = styles;

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

@@ -0,0 +1,63 @@
+declare const styles: {
+    item: Readonly<{
+        readonly base: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+            readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+        }>;
+    }>;
+    list: Readonly<{
+        readonly base: Readonly<{
+            readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
+            readonly maxHeight: import("@stylexjs/stylex").StyleXClassNameFor<"maxHeight", string>;
+            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 header: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+            readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
+            readonly borderTopLeftRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopLeftRadius", string>;
+            readonly borderTopRightRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopRightRadius", string>;
+            readonly borderBottomLeftRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomLeftRadius", string>;
+            readonly borderBottomRightRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomRightRadius", string>;
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", string>;
+        }>;
+        readonly title: Readonly<{
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
+            readonly textAlign: import("@stylexjs/stylex").StyleXClassNameFor<"textAlign", "end">;
+            readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", "auto">;
+        }>;
+        readonly body: Readonly<{
+            readonly minHeight: import("@stylexjs/stylex").StyleXClassNameFor<"minHeight", string>;
+            readonly flexGrow: import("@stylexjs/stylex").StyleXClassNameFor<"flexGrow", 1>;
+            readonly margin: import("@stylexjs/stylex").StyleXClassNameFor<"margin", string>;
+            readonly borderTopLeftRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopLeftRadius", string>;
+            readonly borderTopRightRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopRightRadius", string>;
+            readonly borderBottomLeftRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomLeftRadius", string>;
+            readonly borderBottomRightRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderBottomRightRadius", string>;
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", string>;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "auto">;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+            readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+        }>;
+    }>;
+    transfer: Readonly<{
+        readonly base: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "row">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "stretch">;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+        }>;
+        readonly operation: Readonly<{
+            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 alignSelf: import("@stylexjs/stylex").StyleXClassNameFor<"alignSelf", "center">;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/transfer/styles.mjs

@@ -0,0 +1,74 @@
+var item = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kg3NbH: "musaex-81lxrv",
+    k8WAf4: "musaex-11owsmz",
+    kOIVth: "musaex-1wm2zkp",
+    $$css: true
+  }
+};
+var list = {
+  base: {
+    k7Eaqz: "musaex-16wgjtg",
+    kskxy: "musaex-18v8bz2",
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kOIVth: "musaex-15wobh7",
+    $$css: true
+  },
+  header: {
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kmVPX3: "musaex-17p8e4n",
+    kIxVMA: "musaex-ebmt4n",
+    ksF3WI: "musaex-xieajt",
+    kqGeR4: "musaex-3wq0gx",
+    kYm2EN: "musaex-ipjkct",
+    kGVxlE: "musaex-bapks6",
+    $$css: true
+  },
+  title: {
+    kVQacm: "musaex-b3r6kr",
+    k9WMMc: "musaex-p4054r",
+    kUk6DE: "musaex-1isitws",
+    $$css: true
+  },
+  body: {
+    kAzted: "musaex-1qm8y5n",
+    kzQI83: "musaex-1iyjqo2",
+    kogj98: "musaex-q3gua8",
+    kIxVMA: "musaex-421gk9",
+    ksF3WI: "musaex-4izuhl",
+    kqGeR4: "musaex-vnpsd4",
+    kYm2EN: "musaex-q8l5kc",
+    kGVxlE: "musaex-bapks6",
+    kVQacm: "musaex-ysyzu8",
+    kg3NbH: "musaex-2961ne",
+    k8WAf4: "musaex-11owsmz",
+    $$css: true
+  }
+};
+var transfer = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-1q0g3np",
+    kGNEyG: "musaex-1qjc9v5",
+    kOIVth: "musaex-1wm2zkp",
+    $$css: true
+  },
+  operation: {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kOIVth: "musaex-1wm2zkp",
+    kSGwAc: "musaex-amitd3",
+    $$css: true
+  }
+};
+var styles = {
+  item: item,
+  list: list,
+  transfer: transfer
+};
+
+export { styles as default };

package/dist/components/transfer/transfer.cjs

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var styles = require('./styles.cjs');
 var React = require('react');
 var hooks = require('./hooks.cjs');
 var list = require('./list.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var context = require('./context.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('@aiszlab/relax/class-name');
@@ -39,12 +41,8 @@ var Transfer = function Transfer(_ref) {
     setSelectedUntransferKeys = _useTransfer.setSelectedUntransferKeys;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var styled = {
-    transfer: {
-      className: "musaex-78zum5 musaex-1q0g3np musaex-1qjc9v5 musaex-1wm2zkp"
-    },
-    operation: {
-      className: "musaex-78zum5 musaex-dt5ytf musaex-1wm2zkp musaex-amitd3"
-    }
+    transfer: stylex.props(styles.default.transfer.base),
+    operation: stylex.props(styles.default.transfer.operation)
   };
   var contextValue = React.useMemo(function () {
     return {