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

package/dist/components/layout/footer.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 context = require('./context.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 Footer = function Footer(_ref) {
@@ -14,9 +16,7 @@ var Footer = function Footer(_ref) {
   var _useContext = React.useContext(context.default),
     classNames = _useContext.classNames;
   var styled = {
-    footer: {
-      className: "musaex-m8arw7 musaex-8d9onj"
-    }
+    footer: stylex.props(styles.default.footer.base)
   };
   return /*#__PURE__*/React.createElement("footer", {
     className: className.stringify(classNames.footer, className$1, styled.footer.className),

package/dist/components/layout/footer.mjs

@@ -1,6 +1,8 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import styles from './styles.mjs';
 import React, { useContext } from 'react';
 import Context from './context.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';
 
 var Footer = function Footer(_ref) {
@@ -10,9 +12,7 @@ var Footer = function Footer(_ref) {
   var _useContext = useContext(Context),
     classNames = _useContext.classNames;
   var styled = {
-    footer: {
-      className: "musaex-m8arw7 musaex-8d9onj"
-    }
+    footer: props(styles.footer.base)
   };
   return /*#__PURE__*/React.createElement("footer", {
     className: stringify(classNames.footer, className, styled.footer.className),

package/dist/components/layout/header.cjs

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+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 className = require('@aiszlab/relax/class-name');
 var context = require('./context.cjs');
 
@@ -14,9 +16,7 @@ var Header = function Header(_ref) {
   var _useContext = React.useContext(context.default),
     classNames = _useContext.classNames;
   var styled = {
-    header: {
-      className: "musaex-4lrnbh musaex-78zum5 musaex-6s0dn4 musaex-1a0l1y6 musaex-8d9onj"
-    }
+    header: stylex.props(styles.default.header.base)
   };
   return /*#__PURE__*/React.createElement("header", {
     className: className.stringify(classNames.header, className$1, styled.header.className),

package/dist/components/layout/header.mjs

@@ -1,5 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+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 { stringify } from '@aiszlab/relax/class-name';
 import Context from './context.mjs';
 
@@ -10,9 +12,7 @@ var Header = function Header(_ref) {
   var _useContext = useContext(Context),
     classNames = _useContext.classNames;
   var styled = {
-    header: {
-      className: "musaex-4lrnbh musaex-78zum5 musaex-6s0dn4 musaex-1a0l1y6 musaex-8d9onj"
-    }
+    header: props(styles.header.base)
   };
   return /*#__PURE__*/React.createElement("header", {
     className: stringify(classNames.header, className, styled.header.className),

package/dist/components/layout/heading.cjs

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+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 className = require('@aiszlab/relax/class-name');
 var context = require('./context.cjs');
 
@@ -14,9 +16,7 @@ var Heading = function Heading(_ref) {
   var _useContext = React.useContext(context.default),
     classNames = _useContext.classNames;
   var styled = {
-    heading: {
-      className: "musaex-2vwl9x musaex-13mmbl6 musaex-1xlr1w8 musaex-78zum5 musaex-6s0dn4 musaex-1wm2zkp musaex-b3r6kr musaex-uxw1ft musaex-k59kd musaex-a640vs musaex-1y0btm7 musaex-axmpxa"
-    }
+    heading: stylex.props(styles.default.heading.base)
   };
   return /*#__PURE__*/React.createElement("div", {
     role: "heading",

package/dist/components/layout/heading.mjs

@@ -1,5 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+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 { stringify } from '@aiszlab/relax/class-name';
 import Context from './context.mjs';
 
@@ -10,9 +12,7 @@ var Heading = function Heading(_ref) {
   var _useContext = useContext(Context),
     classNames = _useContext.classNames;
   var styled = {
-    heading: {
-      className: "musaex-2vwl9x musaex-13mmbl6 musaex-1xlr1w8 musaex-78zum5 musaex-6s0dn4 musaex-1wm2zkp musaex-b3r6kr musaex-uxw1ft musaex-k59kd musaex-a640vs musaex-1y0btm7 musaex-axmpxa"
-    }
+    heading: props(styles.heading.base)
   };
   return /*#__PURE__*/React.createElement("div", {
     role: "heading",

package/dist/components/layout/layout.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 hooks = require('./hooks.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');
 var useClassNames = require('../../hooks/use-class-names.cjs');
@@ -29,9 +31,7 @@ var Layout = function Layout(_ref) {
     gridTemplateAreas = _useChildren.gridTemplateAreas;
   var _themeColorVars = useThemeColorVars.useThemeColorVars(["outline-variant"]);
   var styled = {
-    layout: {
-      className: "musaex-rvj5dj musaex-gzo7fg"
-    }
+    layout: stylex.props(styles.default.layout.base)
   };
   return /*#__PURE__*/React.createElement(context.default.Provider, {
     value: {

package/dist/components/layout/layout.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 from 'react';
 import { useChildren } from './hooks.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, { CLASS_NAMES } from './context.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
@@ -16,18 +18,16 @@ var _excluded = ["className", "style"];
 var Layout = function Layout(_ref) {
   var className = _ref.className,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props$1 = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames(CLASS_NAMES);
   var _useChildren = useChildren({
-      children: props.children
+      children: props$1.children
     }),
     children = _useChildren.children,
     gridTemplateAreas = _useChildren.gridTemplateAreas;
   var _themeColorVars = useThemeColorVars(["outline-variant"]);
   var styled = {
-    layout: {
-      className: "musaex-rvj5dj musaex-gzo7fg"
-    }
+    layout: props(styles.layout.base)
   };
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {

package/dist/components/layout/main.cjs

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var styles = require('./styles.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var React = require('react');
 var context = require('./context.cjs');
 var className = require('@aiszlab/relax/class-name');
@@ -14,9 +16,7 @@ var Main = function Main(_ref) {
   var _useContext = React.useContext(context.default),
     classNames = _useContext.classNames;
   var styled = {
-    main: {
-      className: "musaex-1qd5a2c musaex-ysyzu8 musaex-msaf0w musaex-k59kd musaex-uvson1 musaex-1y0btm7 musaex-axmpxa"
-    }
+    main: stylex.props(styles.default.main.base)
   };
   return /*#__PURE__*/React.createElement("main", {
     className: className.stringify(classNames.main, className$1, styled.main.className),

package/dist/components/layout/main.mjs

@@ -1,4 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import styles from './styles.mjs';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import React, { useContext } from 'react';
 import Context from './context.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
@@ -10,9 +12,7 @@ var Main = function Main(_ref) {
   var _useContext = useContext(Context),
     classNames = _useContext.classNames;
   var styled = {
-    main: {
-      className: "musaex-1qd5a2c musaex-ysyzu8 musaex-msaf0w musaex-k59kd musaex-uvson1 musaex-1y0btm7 musaex-axmpxa"
-    }
+    main: props(styles.main.base)
   };
   return /*#__PURE__*/React.createElement("main", {
     className: stringify(classNames.main, className, styled.main.className),

package/dist/components/layout/sidebar.cjs

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+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 context = require('./context.cjs');
 var className = require('@aiszlab/relax/class-name');
 
@@ -14,9 +16,7 @@ var Sidebar = function Sidebar(_ref) {
   var _useContext = React.useContext(context.default),
     classNames = _useContext.classNames;
   var styled = {
-    sidebar: {
-      className: "musaex-1yc5d2u musaex-1gjhikt musaex-b3r6kr musaex-k59kd musaex-uvson1 musaex-a640vs musaex-1y0btm7 musaex-axmpxa musaex-1x5d6jn"
-    }
+    sidebar: stylex.props(styles.default.sidebar.base)
   };
   return /*#__PURE__*/React.createElement("aside", {
     className: className.stringify(classNames.sidebar, className$1, styled.sidebar.className),

package/dist/components/layout/sidebar.mjs

@@ -1,5 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+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 Context from './context.mjs';
 import { stringify } from '@aiszlab/relax/class-name';
 
@@ -10,9 +12,7 @@ var Sidebar = function Sidebar(_ref) {
   var _useContext = useContext(Context),
     classNames = _useContext.classNames;
   var styled = {
-    sidebar: {
-      className: "musaex-1yc5d2u musaex-1gjhikt musaex-b3r6kr musaex-k59kd musaex-uvson1 musaex-a640vs musaex-1y0btm7 musaex-axmpxa musaex-1x5d6jn"
-    }
+    sidebar: props(styles.sidebar.base)
   };
   return /*#__PURE__*/React.createElement("aside", {
     className: stringify(classNames.sidebar, className, styled.sidebar.className),

package/dist/components/layout/styles.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var layout = {
+  base: {
+    k1xSpc: "musaex-rvj5dj",
+    kC13JO: "musaex-gzo7fg",
+    $$css: true
+  }
+};
+var footer = {
+  base: {
+    kJuA4N: "musaex-m8arw7",
+    kg3NbH: "musaex-8d9onj",
+    $$css: true
+  }
+};
+var main = {
+  base: {
+    kJuA4N: "musaex-1qd5a2c",
+    kVQacm: "musaex-ysyzu8",
+    kmVPX3: "musaex-msaf0w",
+    kMzoRj: "musaex-k59kd",
+    kEafiO: "musaex-uvson1",
+    ksu8eU: "musaex-1y0btm7",
+    kVAM5u: "musaex-axmpxa",
+    $$css: true
+  }
+};
+var sidebar = {
+  base: {
+    kJuA4N: "musaex-1yc5d2u",
+    kmVPX3: "musaex-1gjhikt",
+    kVQacm: "musaex-b3r6kr",
+    kMzoRj: "musaex-k59kd",
+    kEafiO: "musaex-uvson1",
+    kWqL5O: "musaex-a640vs",
+    ksu8eU: "musaex-1y0btm7",
+    kVAM5u: "musaex-axmpxa",
+    kUEc2X: "musaex-1x5d6jn",
+    $$css: true
+  }
+};
+var header = {
+  base: {
+    kJuA4N: "musaex-4lrnbh",
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kOIVth: "musaex-1a0l1y6",
+    kg3NbH: "musaex-8d9onj",
+    $$css: true
+  }
+};
+var heading = {
+  base: {
+    kJuA4N: "musaex-2vwl9x",
+    kg3NbH: "musaex-13mmbl6",
+    k63SB2: "musaex-1xlr1w8",
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kOIVth: "musaex-1wm2zkp",
+    kVQacm: "musaex-b3r6kr",
+    khDVqt: "musaex-uxw1ft",
+    kMzoRj: "musaex-k59kd",
+    kWqL5O: "musaex-a640vs",
+    ksu8eU: "musaex-1y0btm7",
+    kVAM5u: "musaex-axmpxa",
+    $$css: true
+  }
+};
+var styles = {
+  layout: layout,
+  footer: footer,
+  main: main,
+  sidebar: sidebar,
+  header: header,
+  heading: heading
+};
+
+exports.default = styles;

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

@@ -0,0 +1,68 @@
+declare const styles: {
+    layout: Readonly<{
+        readonly base: Readonly<{
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "grid">;
+            readonly gridTemplateAreas: import("@stylexjs/stylex").StyleXClassNameFor<"gridTemplateAreas", "var(--layout)">;
+        }>;
+    }>;
+    footer: Readonly<{
+        readonly base: Readonly<{
+            readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "footer">;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        }>;
+    }>;
+    main: Readonly<{
+        readonly base: Readonly<{
+            readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "main">;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "auto">;
+            readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
+            readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
+            readonly borderTopWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopWidth", string>;
+            readonly borderStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderStyle", "solid">;
+            readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-outline-variant)">;
+        }>;
+    }>;
+    sidebar: Readonly<{
+        readonly base: Readonly<{
+            readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "sidebar">;
+            readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
+            readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
+            readonly borderTopWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderTopWidth", string>;
+            readonly borderRightWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightWidth", string>;
+            readonly borderStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderStyle", "solid">;
+            readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-outline-variant)">;
+            readonly ":hover": import("@stylexjs/stylex").StyleXClassNameFor<":hover", {
+                readonly "@media (hover: hover)": {
+                    readonly overflow: "auto";
+                };
+            }>;
+        }>;
+    }>;
+    header: Readonly<{
+        readonly base: Readonly<{
+            readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "header">;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        }>;
+    }>;
+    heading: Readonly<{
+        readonly base: Readonly<{
+            readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "heading">;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+            readonly fontWeight: import("@stylexjs/stylex").StyleXClassNameFor<"fontWeight", 700>;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
+            readonly whiteSpace: import("@stylexjs/stylex").StyleXClassNameFor<"whiteSpace", "nowrap">;
+            readonly borderWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderWidth", string>;
+            readonly borderRightWidth: import("@stylexjs/stylex").StyleXClassNameFor<"borderRightWidth", string>;
+            readonly borderStyle: import("@stylexjs/stylex").StyleXClassNameFor<"borderStyle", "solid">;
+            readonly borderColor: import("@stylexjs/stylex").StyleXClassNameFor<"borderColor", "var(--color-outline-variant)">;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/layout/styles.mjs

@@ -0,0 +1,77 @@
+var layout = {
+  base: {
+    k1xSpc: "musaex-rvj5dj",
+    kC13JO: "musaex-gzo7fg",
+    $$css: true
+  }
+};
+var footer = {
+  base: {
+    kJuA4N: "musaex-m8arw7",
+    kg3NbH: "musaex-8d9onj",
+    $$css: true
+  }
+};
+var main = {
+  base: {
+    kJuA4N: "musaex-1qd5a2c",
+    kVQacm: "musaex-ysyzu8",
+    kmVPX3: "musaex-msaf0w",
+    kMzoRj: "musaex-k59kd",
+    kEafiO: "musaex-uvson1",
+    ksu8eU: "musaex-1y0btm7",
+    kVAM5u: "musaex-axmpxa",
+    $$css: true
+  }
+};
+var sidebar = {
+  base: {
+    kJuA4N: "musaex-1yc5d2u",
+    kmVPX3: "musaex-1gjhikt",
+    kVQacm: "musaex-b3r6kr",
+    kMzoRj: "musaex-k59kd",
+    kEafiO: "musaex-uvson1",
+    kWqL5O: "musaex-a640vs",
+    ksu8eU: "musaex-1y0btm7",
+    kVAM5u: "musaex-axmpxa",
+    kUEc2X: "musaex-1x5d6jn",
+    $$css: true
+  }
+};
+var header = {
+  base: {
+    kJuA4N: "musaex-4lrnbh",
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kOIVth: "musaex-1a0l1y6",
+    kg3NbH: "musaex-8d9onj",
+    $$css: true
+  }
+};
+var heading = {
+  base: {
+    kJuA4N: "musaex-2vwl9x",
+    kg3NbH: "musaex-13mmbl6",
+    k63SB2: "musaex-1xlr1w8",
+    k1xSpc: "musaex-78zum5",
+    kGNEyG: "musaex-6s0dn4",
+    kOIVth: "musaex-1wm2zkp",
+    kVQacm: "musaex-b3r6kr",
+    khDVqt: "musaex-uxw1ft",
+    kMzoRj: "musaex-k59kd",
+    kWqL5O: "musaex-a640vs",
+    ksu8eU: "musaex-1y0btm7",
+    kVAM5u: "musaex-axmpxa",
+    $$css: true
+  }
+};
+var styles = {
+  layout: layout,
+  footer: footer,
+  main: main,
+  sidebar: sidebar,
+  header: header,
+  heading: heading
+};
+
+export { styles as default };

package/dist/components/loading/loading.cjs

@@ -4,83 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+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 useClassNames = require('../../hooks/use-class-names.cjs');
 var className = require('@aiszlab/relax/class-name');
 var context = require('./context.cjs');
 
-var styles = {
-  circle: {
-    k44tkh: "musaex-1c74tu6",
-    kyAemX: "musaex-1esw782",
-    ko0y90: "musaex-a4qsjk",
-    kDwRjp: "musaex-bh8q5q",
-    kU5bRw: "musaex-1owpc8m",
-    $$css: true
-  },
-  top: {
-    kKVMdj: "musaex-1ygrg12",
-    kjVXCG: "musaex-1rd0bzx",
-    $$css: true
-  },
-  bottom: {
-    kKVMdj: "musaex-s32ixd",
-    kjVXCG: "musaex-1op1030",
-    $$css: true
-  },
-  left: {
-    kKVMdj: "musaex-1dxjbsd",
-    kjVXCG: "musaex-1pomg4v",
-    $$css: true
-  },
-  right: {
-    kKVMdj: "musaex-1dppd5q",
-    kjVXCG: "musaex-197s2ti",
-    $$css: true
-  },
-  small: {
-    kzqmXN: "musaex-19dbm5w",
-    kZKoxP: "musaex-12ez60q",
-    $$css: true
-  },
-  medium: {
-    kzqmXN: "musaex-108untq",
-    kZKoxP: "musaex-tbkiit",
-    $$css: true
-  },
-  large: {
-    kzqmXN: "musaex-170iu1w",
-    kZKoxP: "musaex-1x9caio",
-    $$css: true
-  },
-  loading: {
-    kVAEAm: "musaex-1n2onr6",
-    k7Eaqz: "musaex-193eezx",
-    kAzted: "musaex-aumc07",
-    $$css: true
-  },
-  spin: {
-    kVAEAm: "musaex-10l6tqk",
-    kzqmXN: "musaex-92755x",
-    kZKoxP: "musaex-qg7gut",
-    k87sOh: "musaex-13vifvy",
-    kLqNvP: "musaex-1o0tod",
-    k1xSpc: "musaex-78zum5",
-    kjj79g: "musaex-l56j7k",
-    kGNEyG: "musaex-6s0dn4",
-    kY2c9j: "musaex-qgk00j",
-    $$css: true
-  },
-  overlay: {
-    kSiTet: "musaex-byyjgo",
-    kfSwDN: "musaex-87ps6o",
-    kfzvcC: "musaex-47corl",
-    k1ekBW: "musaex-19991ni",
-    kIyJzY: "musaex-1d8287x",
-    $$css: true
-  }
-};
 var Loading = function Loading(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "medium" : _ref$size,
@@ -93,49 +23,32 @@ var Loading = function Loading(_ref) {
     loading = _ref$loading === void 0 ? true : _ref$loading;
   var classNames = useClassNames.useClassNames(context.CLASS_NAMES);
   var circles = {
-    top: _objectSpread(_objectSpread({}, {
-      className: "musaex-1c74tu6 musaex-1esw782 musaex-a4qsjk musaex-bh8q5q musaex-1owpc8m musaex-1ygrg12 musaex-1rd0bzx"
-    }), {}, {
+    top: _objectSpread(_objectSpread({}, stylex.props(styles.default.circle, styles.default.top)), {}, {
       cx: "120",
       cy: "120",
       r: "105"
     }),
-    bottom: _objectSpread(_objectSpread({}, {
-      className: "musaex-1c74tu6 musaex-1esw782 musaex-a4qsjk musaex-bh8q5q musaex-1owpc8m musaex-s32ixd musaex-1op1030"
-    }), {}, {
+    bottom: _objectSpread(_objectSpread({}, stylex.props(styles.default.circle, styles.default.bottom)), {}, {
       cx: "120",
       cy: "120",
       r: "35"
     }),
-    left: _objectSpread(_objectSpread({}, {
-      className: "musaex-1c74tu6 musaex-1esw782 musaex-a4qsjk musaex-bh8q5q musaex-1owpc8m musaex-1dxjbsd musaex-1pomg4v"
-    }), {}, {
+    left: _objectSpread(_objectSpread({}, stylex.props(styles.default.circle, styles.default.left)), {}, {
       cx: "85",
       cy: "120",
       r: "70"
     }),
-    right: _objectSpread(_objectSpread({}, {
-      className: "musaex-1c74tu6 musaex-1esw782 musaex-a4qsjk musaex-bh8q5q musaex-1owpc8m musaex-1dppd5q musaex-197s2ti"
-    }), {}, {
+    right: _objectSpread(_objectSpread({}, stylex.props(styles.default.circle, styles.default.right)), {}, {
       cx: "155",
       cy: "120",
       r: "70"
     })
   };
   var styled = {
-    loading: {
-      className: "musaex-1n2onr6 musaex-193eezx musaex-aumc07"
-    },
-    spin: {
-      className: "musaex-10l6tqk musaex-92755x musaex-qg7gut musaex-13vifvy musaex-1o0tod musaex-78zum5 musaex-l56j7k musaex-6s0dn4 musaex-qgk00j"
-    },
-    spinning: stylex.props(styles[size]),
-    content: {
-      0: {},
-      1: {
-        className: "musaex-byyjgo musaex-87ps6o musaex-47corl musaex-19991ni musaex-1d8287x"
-      }
-    }[!!(loading && overlay) << 0]
+    loading: stylex.props(styles.default.loading),
+    spin: stylex.props(styles.default.spin),
+    spinning: stylex.props(styles.default[size]),
+    content: stylex.props(loading && overlay && styles.default.overlay)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.loading, styled.loading.className),