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

package/dist/components/notification/holder.mjs

@@ -1,6 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React, { forwardRef, useState, useImperativeHandle } from 'react';
 import Portal from '../portal/portal.mjs';
 import { AnimatePresence } from 'motion/react';
@@ -10,50 +11,6 @@ import { useIdentity, useEvent, useMounted } from '@aiszlab/relax';
 
 var _excluded = ["placement", "key"],
   _excluded2 = ["description"];
-var styles = {
-  holder: {
-    kVAEAm: "musaex-ixxii4",
-    kY2c9j: "musaex-1vkz8cy",
-    k1xSpc: "musaex-78zum5",
-    kXwgrk: "musaex-dt5ytf",
-    kfzvcC: "musaex-47corl",
-    khm7nJ: "musaex-1yg8gkd",
-    kmVPX3: "musaex-6b7nyu",
-    $$css: true
-  },
-  top: {
-    k87sOh: "musaex-13vifvy",
-    kkqhue: "musaex-17y0mx6",
-    kGNEyG: "musaex-6s0dn4",
-    $$css: true
-  },
-  "top-right": {
-    k87sOh: "musaex-13vifvy",
-    kt4wiu: "musaex-tijo5x",
-    $$css: true
-  },
-  "top-left": {
-    k87sOh: "musaex-13vifvy",
-    kLqNvP: "musaex-1o0tod",
-    $$css: true
-  },
-  bottom: {
-    krVfgx: "musaex-1ey2m1c",
-    kkqhue: "musaex-17y0mx6",
-    kGNEyG: "musaex-6s0dn4",
-    $$css: true
-  },
-  "bottom-left": {
-    krVfgx: "musaex-1ey2m1c",
-    kLqNvP: "musaex-1o0tod",
-    $$css: true
-  },
-  "bottom-right": {
-    krVfgx: "musaex-1ey2m1c",
-    kt4wiu: "musaex-tijo5x",
-    $$css: true
-  }
-};
 var Holder = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var defaultNotifications = _ref.defaultNotifications;
   var _useIdentity = useIdentity(),
@@ -112,7 +69,7 @@ var Holder = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var _ref4 = _slicedToArray(_ref3, 2),
       placement = _ref4[0],
       notifications = _ref4[1];
-    var styled = props(styles.holder, styles[placement]);
+    var styled = props(styles.holder.base, styles.holder[placement]);
     return /*#__PURE__*/React.createElement(Portal, {
       destroyable: true,
       open: notifications.size > 0,

package/dist/components/notification/notification.cjs

@@ -6,6 +6,7 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _regenerator = require('@babel/runtime/helpers/regenerator');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var styles = require('./styles.cjs');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var React = require('react');
 var react = require('motion/react');
@@ -37,25 +38,6 @@ var PLACEMENTS = {
   top: ["translateY(-100%)", "translateY(0)"]
 };
 var LEADINGS = new Map([["success", checkCircle.default], ["error", error.default], ["loading", loading.default], ["info", notificationImportant.default], ["warning", warning.default]]);
-var styles = {
-  title: {
-    "default": {
-      kJuA4N: "musaex-nyuz70",
-      $$css: true
-    }
-  },
-  description: {
-    "default": {
-      kJuA4N: "musaex-19tbii3",
-      k1xSpc: "musaex-1rg5ohu",
-      kTgw9: "musaex-13faqbe",
-      $$css: true
-    },
-    simple: {
-      kSGwAc: "musaex-amitd3",
-      $$css: true
-    }
-  }};
 var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var placement = _ref.placement,
     _ref$duration = _ref.duration,
@@ -116,45 +98,11 @@ var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, _callee);
   })), duration);
   var styled = {
-    notification: {
-      0: {
-        className: "musaex-9nqi4b musaex-1j14bxn musaex-db68te musaex-bapks6 musaex-38mpvf musaex-67bb7w musaex-b3r6kr musaex-1c9o64o musaex-1ptezny musaex-f9qgfy musaex-g01cxk musaex-1scieg9 musaex-rvj5dj musaex-1wm2zkp musaex-1naft3c musaex-1aur8i7 musaex-1v4gb6w"
-      },
-      1: {
-        className: "musaex-9nqi4b musaex-1j14bxn musaex-db68te musaex-bapks6 musaex-38mpvf musaex-67bb7w musaex-b3r6kr musaex-1c9o64o musaex-1ptezny musaex-f9qgfy musaex-g01cxk musaex-1scieg9 musaex-rvj5dj musaex-1wm2zkp musaex-ahmwtz musaex-a0rzc7 musaex-81lxrv"
-      }
-    }[!!!title << 0],
-    leading: {
-      0: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-14qql8p"
-      },
-      4: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-tjic6"
-      },
-      2: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-s3pv69"
-      },
-      6: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-s3pv69"
-      },
-      1: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-jt36v0"
-      },
-      5: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-jt36v0"
-      },
-      3: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-jt36v0"
-      },
-      7: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-jt36v0"
-      }
-    }[!!(type === "success") << 2 | !!(type === "warning") << 1 | !!(type === "error") << 0],
-    title: stylex.props(theme.$title.medium, styles.title["default"]),
-    description: stylex.props(theme.$body.medium, styles.description["default"], !title && styles.description.simple),
-    closer: {
-      className: "musaex-1n8w83i musaex-amitd3 musaex-15bdqvn"
-    }
+    notification: stylex.props(styles.default.notification.base, !title && styles.default.notification.simple),
+    leading: stylex.props(styles.default.leading.base, type === "success" && styles.default.leading.success, type === "warning" && styles.default.leading.warning, type === "error" && styles.default.leading.error),
+    title: stylex.props(theme.$title.medium, styles.default.title.base),
+    description: stylex.props(theme.$body.medium, styles.default.description.base, !title && styles.default.description.simple),
+    closer: stylex.props(styles.default.closer.base)
   };
   relax.useAsyncEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
     var _notification;

package/dist/components/notification/notification.mjs

@@ -2,6 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _regenerator from '@babel/runtime/helpers/regenerator';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.19.0/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import React, { forwardRef, useRef, createElement } from 'react';
 import { usePresence, animate } from 'motion/react';
@@ -33,25 +34,6 @@ var PLACEMENTS = {
   top: ["translateY(-100%)", "translateY(0)"]
 };
 var LEADINGS = new Map([["success", IconCheckCircle], ["error", IconError], ["loading", IconLoading], ["info", IconNotificationImportant], ["warning", IconWarning]]);
-var styles = {
-  title: {
-    "default": {
-      kJuA4N: "musaex-nyuz70",
-      $$css: true
-    }
-  },
-  description: {
-    "default": {
-      kJuA4N: "musaex-19tbii3",
-      k1xSpc: "musaex-1rg5ohu",
-      kTgw9: "musaex-13faqbe",
-      $$css: true
-    },
-    simple: {
-      kSGwAc: "musaex-amitd3",
-      $$css: true
-    }
-  }};
 var Notification = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var placement = _ref.placement,
     _ref$duration = _ref.duration,
@@ -112,45 +94,11 @@ var Notification = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, _callee);
   })), duration);
   var styled = {
-    notification: {
-      0: {
-        className: "musaex-9nqi4b musaex-1j14bxn musaex-db68te musaex-bapks6 musaex-38mpvf musaex-67bb7w musaex-b3r6kr musaex-1c9o64o musaex-1ptezny musaex-f9qgfy musaex-g01cxk musaex-1scieg9 musaex-rvj5dj musaex-1wm2zkp musaex-1naft3c musaex-1aur8i7 musaex-1v4gb6w"
-      },
-      1: {
-        className: "musaex-9nqi4b musaex-1j14bxn musaex-db68te musaex-bapks6 musaex-38mpvf musaex-67bb7w musaex-b3r6kr musaex-1c9o64o musaex-1ptezny musaex-f9qgfy musaex-g01cxk musaex-1scieg9 musaex-rvj5dj musaex-1wm2zkp musaex-ahmwtz musaex-a0rzc7 musaex-81lxrv"
-      }
-    }[!!!title << 0],
-    leading: {
-      0: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-14qql8p"
-      },
-      4: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-tjic6"
-      },
-      2: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-s3pv69"
-      },
-      6: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-s3pv69"
-      },
-      1: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-jt36v0"
-      },
-      5: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-jt36v0"
-      },
-      3: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-jt36v0"
-      },
-      7: {
-        className: "musaex-1kxrqrs musaex-amitd3 musaex-3nfvp2 musaex-jt36v0"
-      }
-    }[!!(type === "success") << 2 | !!(type === "warning") << 1 | !!(type === "error") << 0],
-    title: props($title.medium, styles.title["default"]),
-    description: props($body.medium, styles.description["default"], !title && styles.description.simple),
-    closer: {
-      className: "musaex-1n8w83i musaex-amitd3 musaex-15bdqvn"
-    }
+    notification: props(styles.notification.base, !title && styles.notification.simple),
+    leading: props(styles.leading.base, type === "success" && styles.leading.success, type === "warning" && styles.leading.warning, type === "error" && styles.leading.error),
+    title: props($title.medium, styles.title.base),
+    description: props($body.medium, styles.description.base, !title && styles.description.simple),
+    closer: props(styles.closer.base)
   };
   useAsyncEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
     var _notification;

package/dist/components/notification/styles.cjs

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var notification = {
+  base: {
+    kWkggS: "musaex-9nqi4b",
+    kMwMTN: "musaex-1j14bxn",
+    kaIpWk: "musaex-db68te",
+    kGVxlE: "musaex-bapks6",
+    ks0D6T: "musaex-38mpvf",
+    kfzvcC: "musaex-67bb7w",
+    kVQacm: "musaex-b3r6kr",
+    k1ekBW: "musaex-1c9o64o",
+    kIyJzY: "musaex-1ptezny",
+    k3aq6I: "musaex-f9qgfy",
+    kSiTet: "musaex-g01cxk",
+    keoZOQ: "musaex-1scieg9",
+    k1xSpc: "musaex-rvj5dj",
+    kOIVth: "musaex-1wm2zkp",
+    kC13JO: "musaex-1naft3c",
+    k8WAf4: "musaex-1aur8i7",
+    kg3NbH: "musaex-1v4gb6w",
+    $$css: true
+  },
+  simple: {
+    kC13JO: "musaex-ahmwtz",
+    k8WAf4: "musaex-a0rzc7",
+    kg3NbH: "musaex-81lxrv",
+    $$css: true
+  }
+};
+var leading = {
+  base: {
+    kJuA4N: "musaex-1kxrqrs",
+    kSGwAc: "musaex-amitd3",
+    k1xSpc: "musaex-3nfvp2",
+    kMwMTN: "musaex-14qql8p",
+    $$css: true
+  },
+  success: {
+    kMwMTN: "musaex-tjic6",
+    $$css: true
+  },
+  warning: {
+    kMwMTN: "musaex-s3pv69",
+    $$css: true
+  },
+  error: {
+    kMwMTN: "musaex-jt36v0",
+    $$css: true
+  }
+};
+var title = {
+  base: {
+    kJuA4N: "musaex-nyuz70",
+    $$css: true
+  }
+};
+var description = {
+  base: {
+    kJuA4N: "musaex-19tbii3",
+    k1xSpc: "musaex-1rg5ohu",
+    kTgw9: "musaex-13faqbe",
+    $$css: true
+  },
+  simple: {
+    kSGwAc: "musaex-amitd3",
+    $$css: true
+  }
+};
+var closer = {
+  base: {
+    kJuA4N: "musaex-1n8w83i",
+    kSGwAc: "musaex-amitd3",
+    kFhvOy: "musaex-15bdqvn",
+    $$css: true
+  }
+};
+var holder = {
+  base: {
+    kVAEAm: "musaex-ixxii4",
+    kY2c9j: "musaex-1vkz8cy",
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kfzvcC: "musaex-47corl",
+    khm7nJ: "musaex-1yg8gkd",
+    kmVPX3: "musaex-6b7nyu",
+    $$css: true
+  },
+  top: {
+    k87sOh: "musaex-13vifvy",
+    kkqhue: "musaex-17y0mx6",
+    kGNEyG: "musaex-6s0dn4",
+    $$css: true
+  },
+  "top-right": {
+    k87sOh: "musaex-13vifvy",
+    kt4wiu: "musaex-tijo5x",
+    $$css: true
+  },
+  "top-left": {
+    k87sOh: "musaex-13vifvy",
+    kLqNvP: "musaex-1o0tod",
+    $$css: true
+  },
+  bottom: {
+    krVfgx: "musaex-1ey2m1c",
+    kkqhue: "musaex-17y0mx6",
+    kGNEyG: "musaex-6s0dn4",
+    $$css: true
+  },
+  "bottom-left": {
+    krVfgx: "musaex-1ey2m1c",
+    kLqNvP: "musaex-1o0tod",
+    $$css: true
+  },
+  "bottom-right": {
+    krVfgx: "musaex-1ey2m1c",
+    kt4wiu: "musaex-tijo5x",
+    $$css: true
+  }
+};
+var styles = {
+  notification: notification,
+  leading: leading,
+  title: title,
+  description: description,
+  closer: closer,
+  holder: holder
+};
+
+exports.default = styles;

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

@@ -0,0 +1,105 @@
+declare const styles: {
+    notification: Readonly<{
+        readonly base: Readonly<{
+            readonly backgroundColor: import("@stylexjs/stylex").StyleXClassNameFor<"backgroundColor", "var(--color-surface-container-lowest)">;
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-on-surface)">;
+            readonly borderRadius: import("@stylexjs/stylex").StyleXClassNameFor<"borderRadius", string>;
+            readonly boxShadow: import("@stylexjs/stylex").StyleXClassNameFor<"boxShadow", string>;
+            readonly maxWidth: import("@stylexjs/stylex").StyleXClassNameFor<"maxWidth", string>;
+            readonly pointerEvents: import("@stylexjs/stylex").StyleXClassNameFor<"pointerEvents", "auto">;
+            readonly overflow: import("@stylexjs/stylex").StyleXClassNameFor<"overflow", "hidden">;
+            readonly transitionProperty: import("@stylexjs/stylex").StyleXClassNameFor<"transitionProperty", "margin-top, transform">;
+            readonly transitionDuration: import("@stylexjs/stylex").StyleXClassNameFor<"transitionDuration", string>;
+            readonly transform: import("@stylexjs/stylex").StyleXClassNameFor<"transform", "var(--placement)">;
+            readonly opacity: import("@stylexjs/stylex").StyleXClassNameFor<"opacity", 0>;
+            readonly marginBlockStart: import("@stylexjs/stylex").StyleXClassNameFor<"marginBlockStart", string>;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "grid">;
+            readonly gap: import("@stylexjs/stylex").StyleXClassNameFor<"gap", string>;
+            readonly gridTemplateAreas: import("@stylexjs/stylex").StyleXClassNameFor<"gridTemplateAreas", "'leading title closer' '. description description'">;
+            readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        }>;
+        readonly simple: Readonly<{
+            readonly gridTemplateAreas: import("@stylexjs/stylex").StyleXClassNameFor<"gridTemplateAreas", "'leading description closer'">;
+            readonly paddingBlock: import("@stylexjs/stylex").StyleXClassNameFor<"paddingBlock", string>;
+            readonly paddingInline: import("@stylexjs/stylex").StyleXClassNameFor<"paddingInline", string>;
+        }>;
+    }>;
+    leading: Readonly<{
+        readonly base: Readonly<{
+            readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "leading">;
+            readonly alignSelf: import("@stylexjs/stylex").StyleXClassNameFor<"alignSelf", "center">;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-flex">;
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-primary)">;
+        }>;
+        readonly success: Readonly<{
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-success)">;
+        }>;
+        readonly warning: Readonly<{
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-warning)">;
+        }>;
+        readonly error: Readonly<{
+            readonly color: import("@stylexjs/stylex").StyleXClassNameFor<"color", "var(--color-error)">;
+        }>;
+    }>;
+    title: Readonly<{
+        readonly base: Readonly<{
+            readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "title">;
+        }>;
+    }>;
+    description: Readonly<{
+        readonly base: Readonly<{
+            readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "description">;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "inline-block">;
+            readonly wordBreak: import("@stylexjs/stylex").StyleXClassNameFor<"wordBreak", "break-word">;
+        }>;
+        readonly simple: Readonly<{
+            readonly alignSelf: import("@stylexjs/stylex").StyleXClassNameFor<"alignSelf", "center">;
+        }>;
+    }>;
+    closer: Readonly<{
+        readonly base: Readonly<{
+            readonly gridArea: import("@stylexjs/stylex").StyleXClassNameFor<"gridArea", "closer">;
+            readonly alignSelf: import("@stylexjs/stylex").StyleXClassNameFor<"alignSelf", "center">;
+            readonly justifySelf: import("@stylexjs/stylex").StyleXClassNameFor<"justifySelf", "flex-end">;
+        }>;
+    }>;
+    holder: Readonly<{
+        readonly base: Readonly<{
+            readonly position: import("@stylexjs/stylex").StyleXClassNameFor<"position", "fixed">;
+            readonly zIndex: import("@stylexjs/stylex").StyleXClassNameFor<"zIndex", string>;
+            readonly display: import("@stylexjs/stylex").StyleXClassNameFor<"display", "flex">;
+            readonly flexDirection: import("@stylexjs/stylex").StyleXClassNameFor<"flexDirection", "column">;
+            readonly pointerEvents: import("@stylexjs/stylex").StyleXClassNameFor<"pointerEvents", "none">;
+            readonly rowGap: import("@stylexjs/stylex").StyleXClassNameFor<"rowGap", string>;
+            readonly padding: import("@stylexjs/stylex").StyleXClassNameFor<"padding", string>;
+        }>;
+        readonly top: Readonly<{
+            readonly insetBlockStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockStart", 0>;
+            readonly insetInline: import("@stylexjs/stylex").StyleXClassNameFor<"insetInline", 0>;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+        }>;
+        readonly "top-right": Readonly<{
+            readonly insetBlockStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockStart", 0>;
+            readonly insetInlineEnd: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineEnd", 0>;
+        }>;
+        readonly "top-left": Readonly<{
+            readonly insetBlockStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockStart", 0>;
+            readonly insetInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineStart", 0>;
+        }>;
+        readonly bottom: Readonly<{
+            readonly insetBlockEnd: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockEnd", 0>;
+            readonly insetInline: import("@stylexjs/stylex").StyleXClassNameFor<"insetInline", 0>;
+            readonly alignItems: import("@stylexjs/stylex").StyleXClassNameFor<"alignItems", "center">;
+        }>;
+        readonly "bottom-left": Readonly<{
+            readonly insetBlockEnd: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockEnd", 0>;
+            readonly insetInlineStart: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineStart", 0>;
+        }>;
+        readonly "bottom-right": Readonly<{
+            readonly insetBlockEnd: import("@stylexjs/stylex").StyleXClassNameFor<"insetBlockEnd", 0>;
+            readonly insetInlineEnd: import("@stylexjs/stylex").StyleXClassNameFor<"insetInlineEnd", 0>;
+        }>;
+    }>;
+};
+export default styles;

package/dist/components/notification/styles.mjs

@@ -0,0 +1,129 @@
+var notification = {
+  base: {
+    kWkggS: "musaex-9nqi4b",
+    kMwMTN: "musaex-1j14bxn",
+    kaIpWk: "musaex-db68te",
+    kGVxlE: "musaex-bapks6",
+    ks0D6T: "musaex-38mpvf",
+    kfzvcC: "musaex-67bb7w",
+    kVQacm: "musaex-b3r6kr",
+    k1ekBW: "musaex-1c9o64o",
+    kIyJzY: "musaex-1ptezny",
+    k3aq6I: "musaex-f9qgfy",
+    kSiTet: "musaex-g01cxk",
+    keoZOQ: "musaex-1scieg9",
+    k1xSpc: "musaex-rvj5dj",
+    kOIVth: "musaex-1wm2zkp",
+    kC13JO: "musaex-1naft3c",
+    k8WAf4: "musaex-1aur8i7",
+    kg3NbH: "musaex-1v4gb6w",
+    $$css: true
+  },
+  simple: {
+    kC13JO: "musaex-ahmwtz",
+    k8WAf4: "musaex-a0rzc7",
+    kg3NbH: "musaex-81lxrv",
+    $$css: true
+  }
+};
+var leading = {
+  base: {
+    kJuA4N: "musaex-1kxrqrs",
+    kSGwAc: "musaex-amitd3",
+    k1xSpc: "musaex-3nfvp2",
+    kMwMTN: "musaex-14qql8p",
+    $$css: true
+  },
+  success: {
+    kMwMTN: "musaex-tjic6",
+    $$css: true
+  },
+  warning: {
+    kMwMTN: "musaex-s3pv69",
+    $$css: true
+  },
+  error: {
+    kMwMTN: "musaex-jt36v0",
+    $$css: true
+  }
+};
+var title = {
+  base: {
+    kJuA4N: "musaex-nyuz70",
+    $$css: true
+  }
+};
+var description = {
+  base: {
+    kJuA4N: "musaex-19tbii3",
+    k1xSpc: "musaex-1rg5ohu",
+    kTgw9: "musaex-13faqbe",
+    $$css: true
+  },
+  simple: {
+    kSGwAc: "musaex-amitd3",
+    $$css: true
+  }
+};
+var closer = {
+  base: {
+    kJuA4N: "musaex-1n8w83i",
+    kSGwAc: "musaex-amitd3",
+    kFhvOy: "musaex-15bdqvn",
+    $$css: true
+  }
+};
+var holder = {
+  base: {
+    kVAEAm: "musaex-ixxii4",
+    kY2c9j: "musaex-1vkz8cy",
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-dt5ytf",
+    kfzvcC: "musaex-47corl",
+    khm7nJ: "musaex-1yg8gkd",
+    kmVPX3: "musaex-6b7nyu",
+    $$css: true
+  },
+  top: {
+    k87sOh: "musaex-13vifvy",
+    kkqhue: "musaex-17y0mx6",
+    kGNEyG: "musaex-6s0dn4",
+    $$css: true
+  },
+  "top-right": {
+    k87sOh: "musaex-13vifvy",
+    kt4wiu: "musaex-tijo5x",
+    $$css: true
+  },
+  "top-left": {
+    k87sOh: "musaex-13vifvy",
+    kLqNvP: "musaex-1o0tod",
+    $$css: true
+  },
+  bottom: {
+    krVfgx: "musaex-1ey2m1c",
+    kkqhue: "musaex-17y0mx6",
+    kGNEyG: "musaex-6s0dn4",
+    $$css: true
+  },
+  "bottom-left": {
+    krVfgx: "musaex-1ey2m1c",
+    kLqNvP: "musaex-1o0tod",
+    $$css: true
+  },
+  "bottom-right": {
+    krVfgx: "musaex-1ey2m1c",
+    kt4wiu: "musaex-tijo5x",
+    $$css: true
+  }
+};
+var styles = {
+  notification: notification,
+  leading: leading,
+  title: title,
+  description: description,
+  closer: closer,
+  holder: holder
+};
+
+export { styles as default };

package/dist/components/otp-input/otp-input.cjs

@@ -4,10 +4,12 @@ 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 hooks = require('./hooks.cjs');
 var input = require('../input/input.cjs');
 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 className = require('@aiszlab/relax/class-name');
 
 var OtpInput = function OtpInput(_ref) {
@@ -64,12 +66,8 @@ var OtpInput = function OtpInput(_ref) {
     }),
     keyDown = _useInputEvents.keyDown;
   var styled = {
-    otp: {
-      className: "musaex-78zum5 musaex-1q0g3np musaex-1wm2zkp"
-    },
-    input: {
-      className: "musaex-17gq8ck"
-    }
+    otp: stylex.props(styles.default.otp),
+    input: stylex.props(styles.default.input)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(styled.otp.className, className$1),

package/dist/components/otp-input/otp-input.mjs

@@ -1,9 +1,11 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import styles from './styles.mjs';
 import React, { useRef, useState } from 'react';
 import { useValue, useInputEvents } from './hooks.mjs';
 import Input from '../input/input.mjs';
 import { useEvent, clamp } from '@aiszlab/relax';
+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 OtpInput = function OtpInput(_ref) {
@@ -60,12 +62,8 @@ var OtpInput = function OtpInput(_ref) {
     }),
     keyDown = _useInputEvents.keyDown;
   var styled = {
-    otp: {
-      className: "musaex-78zum5 musaex-1q0g3np musaex-1wm2zkp"
-    },
-    input: {
-      className: "musaex-17gq8ck"
-    }
+    otp: props(styles.otp),
+    input: props(styles.input)
   };
   return /*#__PURE__*/React.createElement("div", {
     className: stringify(styled.otp.className, className),

package/dist/components/otp-input/styles.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  otp: {
+    k1xSpc: "musaex-78zum5",
+    kXwgrk: "musaex-1q0g3np",
+    kOIVth: "musaex-1wm2zkp",
+    $$css: true
+  },
+  input: {
+    kXlws8: "musaex-17gq8ck",
+    $$css: true
+  }
+};
+
+exports.default = styles;