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

package/dist/components/grid/col.cjs

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var styles = require('./styles.cjs');
 var React = require('react');
 var className = require('@aiszlab/relax/class-name');
+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 Col = function Col(_ref) {
@@ -16,9 +18,7 @@ var Col = function Col(_ref) {
     As = _ref$as === void 0 ? "div" : _ref$as,
     style = _ref.style,
     onClick = _ref.onClick;
-  var styled = {
-    className: "musaex-aovyj7 musaex-1wf3z74"
-  };
+  var styled = stylex.props(styles.default.col.base);
   var _useContext = React.useContext(context.Context),
     classNames = _useContext.classNames;
   var isFull = span >= context.SPANS;

package/dist/components/grid/col.mjs

@@ -1,6 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import styles from './styles.mjs';
 import { useContext, createElement } from 'react';
 import { stringify } from '@aiszlab/relax/class-name';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { Context, SPANS } from './context.mjs';
 
 var Col = function Col(_ref) {
@@ -12,9 +14,7 @@ var Col = function Col(_ref) {
     As = _ref$as === void 0 ? "div" : _ref$as,
     style = _ref.style,
     onClick = _ref.onClick;
-  var styled = {
-    className: "musaex-aovyj7 musaex-1wf3z74"
-  };
+  var styled = props(styles.col.base);
   var _useContext = useContext(Context),
     classNames = _useContext.classNames;
   var isFull = span >= SPANS;

package/dist/components/grid/row.cjs

@@ -4,9 +4,11 @@ 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 useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('@aiszlab/relax/class-name');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var useGutters = require('../../hooks/use-gutters.cjs');
 var context = require('./context.cjs');
 
@@ -27,9 +29,7 @@ var Row = function Row(_ref) {
     columnGap = _useGutters2[0],
     rowGap = _useGutters2[1];
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
-  var styled = {
-    className: "musaex-78zum5 musaex-1q0g3np musaex-1a02dak musaex-n1rw23 musaex-1wj6dh3 musaex-g1d4a0 musaex-1umk585"
-  };
+  var styled = stylex.props(styles.default.row.base);
   return /*#__PURE__*/React.createElement(context.Context.Provider, {
     value: {
       classNames: classNames

package/dist/components/grid/row.mjs

@@ -1,8 +1,10 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React from 'react';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useGutters } from '../../hooks/use-gutters.mjs';
 import { Context, CLASS_NAMES } from './context.mjs';
 
@@ -23,9 +25,7 @@ var Row = function Row(_ref) {
     columnGap = _useGutters2[0],
     rowGap = _useGutters2[1];
   var classNames = useClassNames(CLASS_NAMES);
-  var styled = {
-    className: "musaex-78zum5 musaex-1q0g3np musaex-1a02dak musaex-n1rw23 musaex-1wj6dh3 musaex-g1d4a0 musaex-1umk585"
-  };
+  var styled = props(styles.row.base);
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {
       classNames: classNames

package/dist/components/grid/styles.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var col = {
+  base: {
+    kUk6DE: "musaex-aovyj7",
+    ks0D6T: "musaex-1wf3z74",
+    $$css: true
+  }
+};
+var row = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-1q0g3np",
+    kwnvtZ: "musaex-1a02dak",
+    k1C7PZ: "musaex-n1rw23",
+    khm7nJ: "musaex-1wj6dh3",
+    kAPf3g: "musaex-g1d4a0",
+    kGNEyG: "musaex-1umk585",
+    $$css: true
+  }
+};
+var styles = {
+  col: col,
+  row: row
+};
+
+exports.default = styles;

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

@@ -0,0 +1,20 @@
+declare const styles: {
+    col: Readonly<{
+        readonly base: Readonly<{
+            readonly flex: import("@stylexjs/stylex").StyleXClassNameFor<"flex", "0 0 var(--span)">;
+            readonly maxWidth: import("@stylexjs/stylex").StyleXClassNameFor<"maxWidth", "var(--span)">;
+        }>;
+    }>;
+    row: Readonly<{
+        readonly base: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "row">;
+            readonly flexWrap: import("@stylexjs/stylex").StyleXClassNameFor<"flexWrap", "wrap">;
+            readonly columnGap: import("@stylexjs/stylex").StyleXClassNameFor<"columnGap", "var(--column-gap)">;
+            readonly rowGap: import("@stylexjs/stylex").StyleXClassNameFor<"rowGap", "var(--row-gap)">;
+            readonly justifyItems: import("@stylexjs/stylex").StyleXClassNameFor<"justifyItems", "var(--justify)">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "var(--align)">;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/grid/styles.mjs

@@ -0,0 +1,25 @@
+var col = {
+  base: {
+    kUk6DE: "musaex-aovyj7",
+    ks0D6T: "musaex-1wf3z74",
+    $$css: true
+  }
+};
+var row = {
+  base: {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-1q0g3np",
+    kwnvtZ: "musaex-1a02dak",
+    k1C7PZ: "musaex-n1rw23",
+    khm7nJ: "musaex-1wj6dh3",
+    kAPf3g: "musaex-g1d4a0",
+    kGNEyG: "musaex-1umk585",
+    $$css: true
+  }
+};
+var styles = {
+  col: col,
+  row: row
+};
+
+export { styles as default };

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

@@ -0,0 +1,31 @@
+import stylex from "@stylexjs/stylex";
+declare const styles: Readonly<{
+    readonly guideline: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+    }>;
+    readonly figure: Readonly<{
+        readonly borderStartStartRadius: stylex.StyleXClassNameFor<"borderStartStartRadius", string>;
+        readonly borderStartEndRadius: stylex.StyleXClassNameFor<"borderStartEndRadius", string>;
+        readonly borderEndStartRadius: stylex.StyleXClassNameFor<"borderEndStartRadius", string>;
+        readonly borderEndEndRadius: stylex.StyleXClassNameFor<"borderEndEndRadius", string>;
+    }>;
+    readonly label: Readonly<{
+        readonly marginBlockStart: stylex.StyleXClassNameFor<"marginBlockStart", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-error)">;
+        readonly borderStartStartRadius: stylex.StyleXClassNameFor<"borderStartStartRadius", string>;
+        readonly borderStartEndRadius: stylex.StyleXClassNameFor<"borderStartEndRadius", string>;
+        readonly borderEndStartRadius: stylex.StyleXClassNameFor<"borderEndStartRadius", string>;
+        readonly borderEndEndRadius: stylex.StyleXClassNameFor<"borderEndEndRadius", string>;
+    }>;
+    readonly recommend: Readonly<{
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-success)">;
+    }>;
+    readonly caption: Readonly<{
+        readonly marginBlockStart: stylex.StyleXClassNameFor<"marginBlockStart", string>;
+        readonly marginInline: stylex.StyleXClassNameFor<"marginInline", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+}>;
+export default styles;

package/dist/components/highlight/highlight.cjs

@@ -3,7 +3,9 @@
 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 hooks = require('../theme/hooks.cjs');
 var className = require('@aiszlab/relax/class-name');
 var context = require('./context.cjs');
@@ -16,9 +18,7 @@ var Highlight = function Highlight(_ref) {
   var theme = hooks.useTheme();
   var _children = React.useMemo(function () {
     if (!capture) return [children];
-    var styled = {
-      className: "musaex-14qql8p"
-    };
+    var styled = stylex.props(styles.default.capture);
     // 1. use regex match
     // 2. replace with custom node
     var _Array$from$reduce = Array.from(children.matchAll(new RegExp(capture, "g"))).reduce(function (prev, item) {

package/dist/components/highlight/highlight.mjs

@@ -1,5 +1,7 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React, { memo, useMemo } from 'react';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { CLASS_NAMES } from './context.mjs';
@@ -12,9 +14,7 @@ var Highlight = function Highlight(_ref) {
   var theme = useTheme();
   var _children = useMemo(function () {
     if (!capture) return [children];
-    var styled = {
-      className: "musaex-14qql8p"
-    };
+    var styled = props(styles.capture);
     // 1. use regex match
     // 2. replace with custom node
     var _Array$from$reduce = Array.from(children.matchAll(new RegExp(capture, "g"))).reduce(function (prev, item) {

package/dist/components/highlight/styles.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  capture: {
+    kMwMTN: "musaex-14qql8p",
+    $$css: true
+  }
+};
+
+exports.default = styles;

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

@@ -0,0 +1,6 @@
+declare const styles: Readonly<{
+    readonly capture: Readonly<{
+        readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-primary)">;
+    }>;
+}>;
+export default styles;

package/dist/components/highlight/styles.mjs

@@ -0,0 +1,8 @@
+var styles = {
+  capture: {
+    kMwMTN: "musaex-14qql8p",
+    $$css: true
+  }
+};
+
+export { styles as default };

package/dist/components/icon/icon.cjs

@@ -4,8 +4,10 @@ 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 relax = require('@aiszlab/relax');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('@aiszlab/relax/class-name');
 var context = require('./context.cjs');
@@ -31,14 +33,7 @@ var Icon = function Icon(_ref) {
     }
     return as;
   }, [asProps, as]);
-  var styled = {
-    0: {
-      className: "musaex-3nfvp2 musaex-xymvpz musaex-fx01vb"
-    },
-    1: {
-      className: "musaex-3nfvp2 musaex-xymvpz musaex-fx01vb musaex-1ypdohk musaex-87ps6o"
-    }
-  }[!!!!onClick << 0];
+  var styled = stylex.props(styles.default.icon, !!onClick && styles.default.clickable);
   return /*#__PURE__*/React.createElement("span", _objectSpread({
     className: className.stringify(classNames.icon, className$1, styled.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), style), {}, {

package/dist/components/icon/icon.mjs

@@ -1,7 +1,9 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import styles from './styles.mjs';
 import React, { useMemo, createElement } from 'react';
 import { isFunction } from '@aiszlab/relax';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 import { CLASS_NAMES } from './context.mjs';
@@ -14,7 +16,7 @@ var Icon = function Icon(_ref) {
     onClick = _ref.onClick,
     style = _ref.style,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props$1 = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames(CLASS_NAMES);
   var asProps = useMemo(function () {
     return {
@@ -27,21 +29,14 @@ var Icon = function Icon(_ref) {
     }
     return as;
   }, [asProps, as]);
-  var styled = {
-    0: {
-      className: "musaex-3nfvp2 musaex-xymvpz musaex-fx01vb"
-    },
-    1: {
-      className: "musaex-3nfvp2 musaex-xymvpz musaex-fx01vb musaex-1ypdohk musaex-87ps6o"
-    }
-  }[!!!!onClick << 0];
+  var styled = props(styles.icon, !!onClick && styles.clickable);
   return /*#__PURE__*/React.createElement("span", _objectSpread({
     className: stringify(classNames.icon, className, styled.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.style), style), {}, {
       "--color": color
     }),
     onClick: onClick
-  }, props), children);
+  }, props$1), children);
 };
 
 export { Icon as default };

package/dist/components/icon/icons/mock/loading.cjs

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var styles = require('../../styles.cjs');
 var React = require('react');
 var hoc = require('../../hoc.cjs');
+var stylex = require('../../../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 
 var IconLoading = hoc.withIcon(function (props) {
-  var styled = {
-    className: "musaex-3fzgka musaex-1q3qbx4 musaex-1esw782 musaex-a4qsjk"
-  };
+  var styled = stylex.props(styles.default.loading);
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: props.size,

package/dist/components/icon/icons/mock/loading.mjs

@@ -1,14 +1,14 @@
+import styles from '../../styles.mjs';
 import React from 'react';
 import { withIcon } from '../../hoc.mjs';
+import { props } from '../../../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 
-var IconLoading = withIcon(function (props) {
-  var styled = {
-    className: "musaex-3fzgka musaex-1q3qbx4 musaex-1esw782 musaex-a4qsjk"
-  };
+var IconLoading = withIcon(function (props$1) {
+  var styled = props(styles.loading);
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: props.size,
-    height: props.size,
+    width: props$1.size,
+    height: props$1.size,
     viewBox: "0 0 1024 1024",
     fill: "none",
     className: styled.className,

package/dist/components/icon/styles.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  icon: {
+    k1xSpc: "musaex-3nfvp2",
+    kXLuUW: "musaex-xymvpz",
+    kMwMTN: "musaex-fx01vb",
+    $$css: true
+  },
+  clickable: {
+    kkrTdU: "musaex-1ypdohk",
+    kfSwDN: "musaex-87ps6o",
+    $$css: true
+  },
+  loading: {
+    kKVMdj: "musaex-3fzgka",
+    k44tkh: "musaex-1q3qbx4",
+    kyAemX: "musaex-1esw782",
+    ko0y90: "musaex-a4qsjk",
+    $$css: true
+  }
+};
+
+exports.default = styles;

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

@@ -0,0 +1,18 @@
+declare const styles: Readonly<{
+    readonly icon: Readonly<{
+        readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
+        readonly verticalAlign: import("@stylexjs/stylex").StyleXClassNameFor<"verticalAlign", "middle">;
+        readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color)">;
+    }>;
+    readonly clickable: Readonly<{
+        readonly cursor: import("@stylexjs/stylex").StyleXClassNameFor<"cursor", "pointer">;
+        readonly userSelect: import("@stylexjs/stylex").StyleXClassNameFor<"userSelect", "none">;
+    }>;
+    readonly loading: Readonly<{
+        readonly animationName: import("@stylexjs/stylex").StyleXClassNameFor<"animationName", string>;
+        readonly animationDuration: import("@stylexjs/stylex").StyleXClassNameFor<"animationDuration", "1s">;
+        readonly animationTimingFunction: import("@stylexjs/stylex").StyleXClassNameFor<"animationTimingFunction", "linear">;
+        readonly animationIterationCount: import("@stylexjs/stylex").StyleXClassNameFor<"animationIterationCount", "infinite">;
+    }>;
+}>;
+export default styles;

package/dist/components/icon/styles.mjs

@@ -0,0 +1,22 @@
+var styles = {
+  icon: {
+    k1xSpc: "musaex-3nfvp2",
+    kXLuUW: "musaex-xymvpz",
+    kMwMTN: "musaex-fx01vb",
+    $$css: true
+  },
+  clickable: {
+    kkrTdU: "musaex-1ypdohk",
+    kfSwDN: "musaex-87ps6o",
+    $$css: true
+  },
+  loading: {
+    kKVMdj: "musaex-3fzgka",
+    k44tkh: "musaex-1q3qbx4",
+    kyAemX: "musaex-1esw782",
+    ko0y90: "musaex-a4qsjk",
+    $$css: true
+  }
+};
+
+export { styles as default };

package/dist/components/icon-button/icon-button.cjs

@@ -4,56 +4,20 @@ 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 stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var button = require('../button/button.cjs');
 var className = require('@aiszlab/relax/class-name');
 
 var _excluded = ["className", "style", "size"];
-var styles = {
-  "default": {
-    kZglDW: "musaex-hkfzi4",
-    kKklSC: "musaex-3e2p9r",
-    $$css: true
-  },
-  xsmall: {
-    kzqmXN: "musaex-1po6ib",
-    k7Eaqz: "musaex-1mao3ak",
-    kZKoxP: "musaex-1si1pn3",
-    $$css: true
-  },
-  small: {
-    kzqmXN: "musaex-19dbm5w",
-    k7Eaqz: "musaex-14dj9iu",
-    kZKoxP: "musaex-12ez60q",
-    $$css: true
-  },
-  medium: {
-    kzqmXN: "musaex-x7tnyf",
-    k7Eaqz: "musaex-pigv26",
-    kZKoxP: "musaex-1s2k5h2",
-    $$css: true
-  },
-  large: {
-    kzqmXN: "musaex-irjzkq",
-    k7Eaqz: "musaex-193eezx",
-    kZKoxP: "musaex-1nrwtz4",
-    $$css: true
-  },
-  xlarge: {
-    kzqmXN: "musaex-h0ce78",
-    k7Eaqz: "musaex-mhg31v",
-    kZKoxP: "musaex-1do9ykw",
-    $$css: true
-  }
-};
 var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className$1 = _ref.className,
     style = _ref.style,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "medium" : _ref$size,
     props = _objectWithoutProperties(_ref, _excluded);
-  var styled = stylex.props(styles["default"], styles[size]);
+  var styled = stylex.props(styles.default.base, styles.default[size]);
   return /*#__PURE__*/React.createElement(button.Button, _objectSpread({
     className: className.stringify(className$1, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style),

package/dist/components/icon-button/icon-button.mjs

@@ -1,55 +1,19 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import styles from './styles.mjs';
 import React, { forwardRef } from 'react';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { Button } from '../button/button.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 
 var _excluded = ["className", "style", "size"];
-var styles = {
-  "default": {
-    kZglDW: "musaex-hkfzi4",
-    kKklSC: "musaex-3e2p9r",
-    $$css: true
-  },
-  xsmall: {
-    kzqmXN: "musaex-1po6ib",
-    k7Eaqz: "musaex-1mao3ak",
-    kZKoxP: "musaex-1si1pn3",
-    $$css: true
-  },
-  small: {
-    kzqmXN: "musaex-19dbm5w",
-    k7Eaqz: "musaex-14dj9iu",
-    kZKoxP: "musaex-12ez60q",
-    $$css: true
-  },
-  medium: {
-    kzqmXN: "musaex-x7tnyf",
-    k7Eaqz: "musaex-pigv26",
-    kZKoxP: "musaex-1s2k5h2",
-    $$css: true
-  },
-  large: {
-    kzqmXN: "musaex-irjzkq",
-    k7Eaqz: "musaex-193eezx",
-    kZKoxP: "musaex-1nrwtz4",
-    $$css: true
-  },
-  xlarge: {
-    kzqmXN: "musaex-h0ce78",
-    k7Eaqz: "musaex-mhg31v",
-    kZKoxP: "musaex-1do9ykw",
-    $$css: true
-  }
-};
 var IconButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "medium" : _ref$size,
     props$1 = _objectWithoutProperties(_ref, _excluded);
-  var styled = props(styles["default"], styles[size]);
+  var styled = props(styles.base, styles[size]);
   return /*#__PURE__*/React.createElement(Button, _objectSpread({
     className: stringify(className, styled.className),
     style: _objectSpread(_objectSpread({}, styled.style), style),

package/dist/components/icon-button/styles.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  base: {
+    kZglDW: "musaex-hkfzi4",
+    kKklSC: "musaex-3e2p9r",
+    $$css: true
+  },
+  xsmall: {
+    kzqmXN: "musaex-1po6ib",
+    k7Eaqz: "musaex-1mao3ak",
+    kZKoxP: "musaex-1si1pn3",
+    $$css: true
+  },
+  small: {
+    kzqmXN: "musaex-19dbm5w",
+    k7Eaqz: "musaex-14dj9iu",
+    kZKoxP: "musaex-12ez60q",
+    $$css: true
+  },
+  medium: {
+    kzqmXN: "musaex-x7tnyf",
+    k7Eaqz: "musaex-pigv26",
+    kZKoxP: "musaex-1s2k5h2",
+    $$css: true
+  },
+  large: {
+    kzqmXN: "musaex-irjzkq",
+    k7Eaqz: "musaex-193eezx",
+    kZKoxP: "musaex-1nrwtz4",
+    $$css: true
+  },
+  xlarge: {
+    kzqmXN: "musaex-h0ce78",
+    k7Eaqz: "musaex-mhg31v",
+    kZKoxP: "musaex-1do9ykw",
+    $$css: true
+  }
+};
+
+exports.default = styles;

package/dist/components/icon-button/styles.d.ts

@@ -0,0 +1,34 @@
+declare const styles: Readonly<{
+    readonly base: Readonly<{
+        readonly ":not(#\\#)": import("@stylexjs/stylex").StyleXClassNameFor<":not(#\\#)", {
+            readonly paddingInline: 0;
+            readonly paddingBlock: 0;
+        }>;
+    }>;
+    readonly xsmall: Readonly<{
+        readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+        readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
+        readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+    }>;
+    readonly small: Readonly<{
+        readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+        readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
+        readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+    }>;
+    readonly medium: Readonly<{
+        readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+        readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
+        readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+    }>;
+    readonly large: Readonly<{
+        readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+        readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
+        readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+    }>;
+    readonly xlarge: Readonly<{
+        readonly width: import("@stylexjs/stylex").StyleXClassNameFor<"width", string>;
+        readonly minWidth: import("@stylexjs/stylex").StyleXClassNameFor<"minWidth", string>;
+        readonly height: import("@stylexjs/stylex").StyleXClassNameFor<"height", string>;
+    }>;
+}>;
+export default styles;