musae 0.3.3 → 0.3.5

package/dist/components/upload/upload.mjs

@@ -1,8 +1,12 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useMemo, cloneElement } from 'react';
 import { useEvent } from '@aiszlab/relax';
 import { Keyboard } from '../../utils/keyboard.mjs';
 import Uploadeds from './uploadeds.mjs';
+import { Button } from '../button/button.mjs';
+import { useLocale } from '../../locale/use-locale.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var Upload = function Upload(_ref) {
   var _onClick = _ref.onClick,
@@ -10,9 +14,15 @@ var Upload = function Upload(_ref) {
     multiple = _ref.multiple,
     _children = _ref.children,
     uploader = _ref.uploader,
-    onError = _ref.onError;
+    onError = _ref.onError,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    limit = _ref.limit;
   var inputRef = useRef(null);
   var uploadedsRef = useRef(null);
+  var _useLocale = useLocale(ComponentToken.Upload),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    _locale = _useLocale2[0];
   // file upload
   var upload = useEvent(function (files) {
     files.forEach(function (file) {
@@ -20,7 +30,7 @@ var Upload = function Upload(_ref) {
       (_uploadedsRef$current = uploadedsRef.current) === null || _uploadedsRef$current === void 0 || _uploadedsRef$current.add(file);
     });
   });
-  var onChange = useEvent(function (e) {
+  var _onChange = useEvent(function (e) {
     var files = e.target.files;
     if (!files) return;
     upload(Array.from(files));
@@ -43,17 +53,28 @@ var Upload = function Upload(_ref) {
     upload(files);
   };
   var styled = {
+    upload: {
+      className: "musaex-78zum5 musaex-dt5ytf musaex-1lsrmdg"
+    },
     input: {
       className: "musaex-1s85apg"
     }
   };
   var children = useMemo(function () {
+    if (!_children) {
+      return /*#__PURE__*/React.createElement(Button, {
+        disabled: disabled
+      }, _locale.upload);
+    }
     // @ts-ignore
     return /*#__PURE__*/cloneElement(_children, {
       disabled: disabled
     });
-  }, [_children, disabled]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", _objectSpread({}, !disabled && {
+  }, [_children, disabled, _locale]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.upload.className,
+    style: styled.upload.style
+  }, /*#__PURE__*/React.createElement("div", _objectSpread({}, !disabled && {
     onClick: onClick,
     onKeyDown: onKeyDown,
     onDrop: onDrop,
@@ -61,17 +82,21 @@ var Upload = function Upload(_ref) {
   }), /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     type: "file",
+    value: "",
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
     className: styled.input.className,
     style: styled.input.style,
     multiple: multiple,
-    onChange: onChange
+    onChange: _onChange
   }), children), /*#__PURE__*/React.createElement(Uploadeds, {
     ref: uploadedsRef,
+    value: value,
     uploader: uploader,
-    onError: onError
+    onError: onError,
+    onChange: onChange,
+    limit: limit
   }));
 };
 

package/dist/components/upload/uploadeds.cjs

@@ -1,72 +1,132 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var relax = require('@aiszlab/relax');
+var theme = require('../theme/theme.cjs');
+var utils = require('./utils.cjs');
+var path = require('@aiszlab/fuzzy/path');
 var loading = require('../icon/icons/mock/loading.cjs');
-var clear = require('../icon/icons/content/clear.cjs');
+var attchFile = require('../icon/icons/editor/attch-file.cjs');
+var _delete = require('../icon/icons/action/delete.cjs');
 
+var _excluded = ["key"];
+var styles = {
+  item: {
+    display: "musaex-78zum5",
+    alignItems: "musaex-6s0dn4",
+    gap: "musaex-1lsrmdg",
+    $$css: true
+  }
+};
 var Uploadeds = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var uploader = _ref.uploader,
-    onError = _ref.onError;
-  var _useState = React.useState(new Map()),
-    _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
-  var _counter = React.useRef(0);
-  var loaded = relax.useEvent(function (id, status) {
-    // update uploaded list status
-    setItems(function (_items) {
-      var current = _items.get(id);
-      if (!current) return _items;
-      return new Map(_items).set(id, _objectSpread(_objectSpread({}, current), {}, {
-        status: status
-      }));
-    });
+    onError = _ref.onError,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$limit = _ref.limit,
+    limit = _ref$limit === void 0 ? Infinity : _ref$limit;
+  var _useControlledState = relax.useControlledState(value, {
+      defaultState: []
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    values = _useControlledState2[0],
+    setValues = _useControlledState2[1];
+  var _useIdentity = relax.useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 2),
+    identity = _useIdentity2[1];
+  // convert to map, for performance
+  var items = React.useMemo(function () {
+    return values.reduce(function (prev, _item) {
+      var _isControlled = utils.isControlled(_item);
+      if (_isControlled) {
+        var _item$key;
+        var _id = (_item$key = _item.key) !== null && _item$key !== void 0 ? _item$key : _item.url;
+        prev.set(_id, {
+          key: _id,
+          status: "success",
+          url: _item.url
+        });
+        return prev;
+      }
+      prev.set(_item.key, _item);
+      return prev;
+    }, new Map());
+  }, [values]);
+  // when loading status changed
+  // use this func to set new status & callback
+  var onLoaded = relax.useEvent(function (id, status, _ref2) {
+    var url = _ref2.url,
+      error = _ref2.error;
+    if (!items.has(id)) return;
+    var _items = new Map(items);
+    var _values = Array.from(_items.set(id, _objectSpread(_objectSpread({}, _items.get(id)), {}, {
+      status: status,
+      url: url,
+      error: error
+    })).values());
+    setValues(_values);
+    // change handler
+    onChange === null || onChange === void 0 || onChange(_values);
   });
   React.useImperativeHandle(ref, function () {
     return {
       add: function () {
         var _add = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-          var hasUploader, status, id, url;
+          var _hasUploader, _isOnlyOne, _isOverLimit, _key, _values, _url;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                hasUploader = !!uploader;
-                status = hasUploader ? "loading" : "success"; // push current file
-                id = _counter.current++;
-                setItems(function (items) {
-                  return new Map(items).set(id, {
-                    file: file,
-                    status: status
-                  });
-                });
-                // call request by user provided
-                if (hasUploader) {
-                  _context.next = 6;
+                _hasUploader = !!uploader;
+                _isOnlyOne = limit === 1;
+                _isOverLimit = items.size >= limit; // over `limit`
+                if (!(_isOverLimit && !_isOnlyOne)) {
+                  _context.next = 5;
                   break;
                 }
                 return _context.abrupt("return");
-              case 6:
-                _context.next = 8;
-                return uploader(file)["catch"](function (error) {
-                  loaded(id, "error");
-                  onError === null || onError === void 0 || onError(error);
-                  return null;
-                });
-              case 8:
-                url = _context.sent;
-                if (url) {
+              case 5:
+                // show loading in `add` trigger
+                _key = identity();
+                _values = Array.from(new Map(_isOnlyOne ? [] : items).set(_key, {
+                  key: _key,
+                  file: file,
+                  status: _hasUploader ? "loading" : "success"
+                }).values());
+                setValues(_values);
+                onChange === null || onChange === void 0 || onChange(_values);
+                // when no uploader, use original file
+                if (_hasUploader) {
                   _context.next = 11;
                   break;
                 }
                 return _context.abrupt("return");
               case 11:
-                loaded(id, "success");
-              case 12:
+                _context.next = 13;
+                return uploader(file)["catch"](function (error) {
+                  return new Error(error.message);
+                });
+              case 13:
+                _url = _context.sent;
+                if (!(_url instanceof Error)) {
+                  _context.next = 18;
+                  break;
+                }
+                onLoaded(_key, "error", {
+                  error: _url
+                });
+                onError === null || onError === void 0 || onError(_url);
+                return _context.abrupt("return");
+              case 18:
+                onLoaded(_key, "success", {
+                  url: _url
+                });
+              case 19:
               case "end":
                 return _context.stop();
             }
@@ -79,33 +139,37 @@ var Uploadeds = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }()
     };
   });
-  var remove = relax.useEvent(function (id) {
-    setItems(function (_items) {
-      var next = new Map(_items);
-      next["delete"](id);
-      return next;
-    });
+  var remove = relax.useEvent(function (key) {
+    var _items = new Map(items);
+    _items["delete"](key);
+    var _values = Array.from(_items.values());
+    setValues(_values);
+    onChange === null || onChange === void 0 || onChange(_values);
   });
   var styled = {
     uploadeds: {
-      className: "musaex-78zum5 musaex-dt5ytf musaex-4ttznp"
+      className: "musaex-78zum5 musaex-dt5ytf musaex-1lsrmdg"
     },
-    item: {
-      className: "musaex-78zum5 musaex-6s0dn4 musaex-1lsrmdg"
+    item: stylex.default.props(styles.item, theme.typography.body.small),
+    filename: {
+      className: "musaex-98rzlu musaex-b3r6kr musaex-lyipyv"
     }
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styled.uploadeds.className,
     style: styled.uploadeds.style
-  }, Array.from(items.entries()).map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      key = _ref3[0],
-      item = _ref3[1];
+  }, Array.from(items.values()).map(function (_ref3) {
+    var _item$file$name, _item$file, _item$url;
+    var key = _ref3.key,
+      item = _objectWithoutProperties(_ref3, _excluded);
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       className: styled.item.className,
       style: styled.item.style
-    }, /*#__PURE__*/React.createElement(loading.default, null), item.file.name, /*#__PURE__*/React.createElement(clear.default, {
+    }, item.status === "loading" && /*#__PURE__*/React.createElement(loading.default, null), item.status !== "loading" && /*#__PURE__*/React.createElement(attchFile.default, null), /*#__PURE__*/React.createElement("span", {
+      className: styled.filename.className,
+      style: styled.filename.style
+    }, (_item$file$name = (_item$file = item.file) === null || _item$file === void 0 ? void 0 : _item$file.name) !== null && _item$file$name !== void 0 ? _item$file$name : path.leaf((_item$url = item.url) !== null && _item$url !== void 0 ? _item$url : "")), /*#__PURE__*/React.createElement(_delete.default, {
       onClick: function onClick() {
         return remove(key);
       }

package/dist/components/upload/uploadeds.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { UploadedsProps, UploadedsRef } from "./types";
+import type { UploadedsProps, UploadedsRef } from "musae/types/upload";
 declare const Uploadeds: React.ForwardRefExoticComponent<UploadedsProps & React.RefAttributes<UploadedsRef>>;
 export default Uploadeds;

package/dist/components/upload/uploadeds.mjs

@@ -1,70 +1,130 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { forwardRef, useState, useRef, useImperativeHandle } from 'react';
-import { useEvent } from '@aiszlab/relax';
+import React, { forwardRef, useMemo, useImperativeHandle } from 'react';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useControlledState, useIdentity, useEvent } from '@aiszlab/relax';
+import { typography } from '../theme/theme.mjs';
+import { isControlled } from './utils.mjs';
+import { leaf } from '@aiszlab/fuzzy/path';
 import Loading from '../icon/icons/mock/loading.mjs';
-import Redo from '../icon/icons/content/clear.mjs';
+import AttachFile from '../icon/icons/editor/attch-file.mjs';
+import Delete from '../icon/icons/action/delete.mjs';
 
+var _excluded = ["key"];
+var styles = {
+  item: {
+    display: "musaex-78zum5",
+    alignItems: "musaex-6s0dn4",
+    gap: "musaex-1lsrmdg",
+    $$css: true
+  }
+};
 var Uploadeds = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var uploader = _ref.uploader,
-    onError = _ref.onError;
-  var _useState = useState(new Map()),
-    _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
-  var _counter = useRef(0);
-  var loaded = useEvent(function (id, status) {
-    // update uploaded list status
-    setItems(function (_items) {
-      var current = _items.get(id);
-      if (!current) return _items;
-      return new Map(_items).set(id, _objectSpread(_objectSpread({}, current), {}, {
-        status: status
-      }));
-    });
+    onError = _ref.onError,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$limit = _ref.limit,
+    limit = _ref$limit === void 0 ? Infinity : _ref$limit;
+  var _useControlledState = useControlledState(value, {
+      defaultState: []
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    values = _useControlledState2[0],
+    setValues = _useControlledState2[1];
+  var _useIdentity = useIdentity(),
+    _useIdentity2 = _slicedToArray(_useIdentity, 2),
+    identity = _useIdentity2[1];
+  // convert to map, for performance
+  var items = useMemo(function () {
+    return values.reduce(function (prev, _item) {
+      var _isControlled = isControlled(_item);
+      if (_isControlled) {
+        var _item$key;
+        var _id = (_item$key = _item.key) !== null && _item$key !== void 0 ? _item$key : _item.url;
+        prev.set(_id, {
+          key: _id,
+          status: "success",
+          url: _item.url
+        });
+        return prev;
+      }
+      prev.set(_item.key, _item);
+      return prev;
+    }, new Map());
+  }, [values]);
+  // when loading status changed
+  // use this func to set new status & callback
+  var onLoaded = useEvent(function (id, status, _ref2) {
+    var url = _ref2.url,
+      error = _ref2.error;
+    if (!items.has(id)) return;
+    var _items = new Map(items);
+    var _values = Array.from(_items.set(id, _objectSpread(_objectSpread({}, _items.get(id)), {}, {
+      status: status,
+      url: url,
+      error: error
+    })).values());
+    setValues(_values);
+    // change handler
+    onChange === null || onChange === void 0 || onChange(_values);
   });
   useImperativeHandle(ref, function () {
     return {
       add: function () {
         var _add = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-          var hasUploader, status, id, url;
+          var _hasUploader, _isOnlyOne, _isOverLimit, _key, _values, _url;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                hasUploader = !!uploader;
-                status = hasUploader ? "loading" : "success"; // push current file
-                id = _counter.current++;
-                setItems(function (items) {
-                  return new Map(items).set(id, {
-                    file: file,
-                    status: status
-                  });
-                });
-                // call request by user provided
-                if (hasUploader) {
-                  _context.next = 6;
+                _hasUploader = !!uploader;
+                _isOnlyOne = limit === 1;
+                _isOverLimit = items.size >= limit; // over `limit`
+                if (!(_isOverLimit && !_isOnlyOne)) {
+                  _context.next = 5;
                   break;
                 }
                 return _context.abrupt("return");
-              case 6:
-                _context.next = 8;
-                return uploader(file)["catch"](function (error) {
-                  loaded(id, "error");
-                  onError === null || onError === void 0 || onError(error);
-                  return null;
-                });
-              case 8:
-                url = _context.sent;
-                if (url) {
+              case 5:
+                // show loading in `add` trigger
+                _key = identity();
+                _values = Array.from(new Map(_isOnlyOne ? [] : items).set(_key, {
+                  key: _key,
+                  file: file,
+                  status: _hasUploader ? "loading" : "success"
+                }).values());
+                setValues(_values);
+                onChange === null || onChange === void 0 || onChange(_values);
+                // when no uploader, use original file
+                if (_hasUploader) {
                   _context.next = 11;
                   break;
                 }
                 return _context.abrupt("return");
               case 11:
-                loaded(id, "success");
-              case 12:
+                _context.next = 13;
+                return uploader(file)["catch"](function (error) {
+                  return new Error(error.message);
+                });
+              case 13:
+                _url = _context.sent;
+                if (!(_url instanceof Error)) {
+                  _context.next = 18;
+                  break;
+                }
+                onLoaded(_key, "error", {
+                  error: _url
+                });
+                onError === null || onError === void 0 || onError(_url);
+                return _context.abrupt("return");
+              case 18:
+                onLoaded(_key, "success", {
+                  url: _url
+                });
+              case 19:
               case "end":
                 return _context.stop();
             }
@@ -77,33 +137,37 @@ var Uploadeds = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }()
     };
   });
-  var remove = useEvent(function (id) {
-    setItems(function (_items) {
-      var next = new Map(_items);
-      next["delete"](id);
-      return next;
-    });
+  var remove = useEvent(function (key) {
+    var _items = new Map(items);
+    _items["delete"](key);
+    var _values = Array.from(_items.values());
+    setValues(_values);
+    onChange === null || onChange === void 0 || onChange(_values);
   });
   var styled = {
     uploadeds: {
-      className: "musaex-78zum5 musaex-dt5ytf musaex-4ttznp"
+      className: "musaex-78zum5 musaex-dt5ytf musaex-1lsrmdg"
     },
-    item: {
-      className: "musaex-78zum5 musaex-6s0dn4 musaex-1lsrmdg"
+    item: _stylex.props(styles.item, typography.body.small),
+    filename: {
+      className: "musaex-98rzlu musaex-b3r6kr musaex-lyipyv"
     }
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styled.uploadeds.className,
     style: styled.uploadeds.style
-  }, Array.from(items.entries()).map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      key = _ref3[0],
-      item = _ref3[1];
+  }, Array.from(items.values()).map(function (_ref3) {
+    var _item$file$name, _item$file, _item$url;
+    var key = _ref3.key,
+      item = _objectWithoutProperties(_ref3, _excluded);
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       className: styled.item.className,
       style: styled.item.style
-    }, /*#__PURE__*/React.createElement(Loading, null), item.file.name, /*#__PURE__*/React.createElement(Redo, {
+    }, item.status === "loading" && /*#__PURE__*/React.createElement(Loading, null), item.status !== "loading" && /*#__PURE__*/React.createElement(AttachFile, null), /*#__PURE__*/React.createElement("span", {
+      className: styled.filename.className,
+      style: styled.filename.style
+    }, (_item$file$name = (_item$file = item.file) === null || _item$file === void 0 ? void 0 : _item$file.name) !== null && _item$file$name !== void 0 ? _item$file$name : leaf((_item$url = item.url) !== null && _item$url !== void 0 ? _item$url : "")), /*#__PURE__*/React.createElement(Delete, {
       onClick: function onClick() {
         return remove(key);
       }

package/dist/components/upload/utils.cjs

@@ -0,0 +1,9 @@
+/**
+ * @description
+ * check current value is provided by user
+ */
+var isControlled = function isControlled(value) {
+  return !value.key || !value.file;
+};
+
+exports.isControlled = isControlled;

package/dist/components/upload/utils.d.ts

@@ -0,0 +1,6 @@
+import type { Value, ControlledValue } from "musae/types/upload";
+/**
+ * @description
+ * check current value is provided by user
+ */
+export declare const isControlled: (value: Value) => value is ControlledValue;

package/dist/components/upload/utils.mjs

@@ -0,0 +1,9 @@
+/**
+ * @description
+ * check current value is provided by user
+ */
+var isControlled = function isControlled(value) {
+  return !value.key || !value.file;
+};
+
+export { isControlled };

package/dist/components/visually-hidden/visually-hidden.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { VisuallyHiddenProps } from "./types";
+import type { VisuallyHiddenProps } from "musae/types/visually-hidden";
 declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => React.JSX.Element;
 export default VisuallyHidden;

package/dist/components/waterfall/sequential.d.ts

@@ -1,4 +1,4 @@
-import type { WaterfallProps } from "./types";
+import type { WaterfallProps } from "musae/types/waterfall";
 import React from "react";
 import type { RequiredIn } from "@aiszlab/relax/types";
 declare const Sequential: ({ children, columns, className, style, rowGap, }: RequiredIn<Omit<WaterfallProps, "sequential" | "gutter">, "children" | "columns"> & {

package/dist/components/waterfall/waterfall.d.ts

@@ -1,4 +1,4 @@
-import type { WaterfallProps } from "./types";
+import type { WaterfallProps } from "musae/types/waterfall";
 import React from "react";
 declare const Waterfall: ({ columns, gutter, children, sequential, className, style, }: WaterfallProps) => React.JSX.Element | null;
 export default Waterfall;

package/dist/components/watermark/hooks.d.ts

@@ -1,4 +1,4 @@
-import { WatermarkProps } from "./types";
+import type { WatermarkProps } from "musae/types/watermark";
 /**
  * @description
  * watermarks

package/dist/components/watermark/watermark.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { WatermarkProps } from "./types";
+import type { WatermarkProps } from "musae/types/watermark";
 declare const Watermark: ({ children, mark: _mark, width, height, font: { color, fontSize, fontFamily, fontStyle, fontWeight, textAlign, }, }: WatermarkProps) => React.JSX.Element;
 export default Watermark;

package/dist/hooks/use-class-names.d.ts

@@ -266,4 +266,5 @@ export declare const useClassNames: <T extends ComponentToken = ComponentToken>(
         0: string;
         1: string;
     };
+    48: {};
 }[T];

package/dist/hooks/use-closable.cjs

@@ -1,4 +1,3 @@
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var relax = require('@aiszlab/relax');
 var React = require('react');
 var button = require('../components/button/button.cjs');
@@ -26,18 +25,11 @@ var useClosable = function useClosable(_ref) {
   // closer react element for dialog
   var closer = React.useMemo(function () {
     if (!triggers.has("close")) return null;
-    var styled = {
-      className: "musaex-167ikqz musaex-134unf5"
-    };
     return /*#__PURE__*/React.createElement(button.Button, {
       shape: "circular",
       variant: "text",
       prefix: /*#__PURE__*/React.createElement(close.default, null),
       onClick: onClose,
-      className: styled.className,
-      style: _objectSpread(_objectSpread({}, styled.style), {}, {
-        position: "absolute"
-      }),
       size: "small"
     });
   }, [triggers, onClose]);