@itilite/lumina-ui 0.0.6 → 0.0.31

package/dist/esm/index.js

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { isMemo, ForwardRef } from 'react-is';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
+import 'scroll-into-view-if-needed';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -45,7 +46,7 @@ function isFragment$1(object) {
   );
 }
 
-function toArray$2(children) {
+function toArray$3(children) {
   var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var ret = [];
   React__default.Children.forEach(children, function (child) {
@@ -53,9 +54,9 @@ function toArray$2(children) {
       return;
     }
     if (Array.isArray(child)) {
-      ret = ret.concat(toArray$2(child));
+      ret = ret.concat(toArray$3(child));
     } else if (isFragment$1(child) && child.props) {
-      ret = ret.concat(toArray$2(child.props.children, option));
+      ret = ret.concat(toArray$3(child.props.children, option));
     } else {
       ret.push(child);
     }
@@ -1501,7 +1502,7 @@ if (process.env.NODE_ENV !== 'production') {
 var INTERNAL_PREFIX_KEY = 'rc-observer-key';
 function ResizeObserver$1(props, ref) {
   var children = props.children;
-  var childNodes = typeof children === 'function' ? [children] : toArray$2(children);
+  var childNodes = typeof children === 'function' ? [children] : toArray$3(children);
   if (process.env.NODE_ENV !== 'production') {
     if (childNodes.length > 1) {
       warning$3(false, 'Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.');
@@ -3998,10 +3999,9 @@ function resetWarned() {
   deprecatedWarnList = null;
   resetWarned$1();
 }
-// eslint-disable-next-line import/no-mutable-exports
-let warning$2 = noop$1;
+let _warning = noop$1;
 if (process.env.NODE_ENV !== 'production') {
-  warning$2 = (valid, component, message) => {
+  _warning = (valid, component, message) => {
     warningOnce(valid, `[antd: ${component}] ${message}`);
     // StrictMode will inject console which will not throw warning in React 17.
     if (process.env.NODE_ENV === 'test') {
@@ -4009,6 +4009,7 @@ if (process.env.NODE_ENV !== 'production') {
     }
   };
 }
+const warning$2 = _warning;
 const WarningContext = /*#__PURE__*/React.createContext({});
 /**
  * This is a hook but we not named as `useWarning`
@@ -5425,7 +5426,6 @@ function derivative(token) {
       return prev;
     }, {});
   }).reduce((prev, cur) => {
-    // biome-ignore lint/style/noParameterAssign: it is a reduce
     prev = Object.assign(Object.assign({}, prev), cur);
     return prev;
   }, {});
@@ -6353,7 +6353,7 @@ function genStyleUtils(config) {
 
 const PresetColors = ['blue', 'purple', 'cyan', 'green', 'magenta', 'pink', 'red', 'orange', 'yellow', 'volcano', 'geekblue', 'lime', 'gold'];
 
-var version$1 = '5.25.3';
+var version$1 = '5.26.5';
 
 function isStableColor(color) {
   return color >= 0 && color <= 255;
@@ -6396,7 +6396,7 @@ function getAlphaColor(frontColor, backgroundColor) {
   }).toRgbString();
 }
 
-var __rest$e = undefined && undefined.__rest || function (s, e) {
+var __rest$g = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -6413,7 +6413,7 @@ function formatToken(derivativeToken) {
   const {
       override
     } = derivativeToken,
-    restToken = __rest$e(derivativeToken, ["override"]);
+    restToken = __rest$g(derivativeToken, ["override"]);
   const overrideTokens = Object.assign({}, override);
   Object.keys(seedToken).forEach(token => {
     delete overrideTokens[token];
@@ -6570,7 +6570,7 @@ function formatToken(derivativeToken) {
   return aliasToken;
 }
 
-var __rest$d = undefined && undefined.__rest || function (s, e) {
+var __rest$f = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -6632,7 +6632,7 @@ const getComputedToken = (originToken, overrideToken, theme) => {
   const {
       override
     } = overrideToken,
-    components = __rest$d(overrideToken, ["override"]);
+    components = __rest$f(overrideToken, ["override"]);
   // Merge with override
   let mergedDerivativeToken = Object.assign(Object.assign({}, derivativeToken), {
     override
@@ -6644,7 +6644,7 @@ const getComputedToken = (originToken, overrideToken, theme) => {
       const {
           theme: componentTheme
         } = value,
-        componentTokens = __rest$d(value, ["theme"]);
+        componentTokens = __rest$f(value, ["theme"]);
       let mergedComponentToken = componentTokens;
       if (componentTheme) {
         mergedComponentToken = getComputedToken(Object.assign(Object.assign({}, mergedDerivativeToken), componentTokens), {
@@ -7754,7 +7754,12 @@ function genCSSMotionList(transitionSupport) {
 }
 genCSSMotionList(supportTransition);
 
+const MotionCacheContext = /*#__PURE__*/React.createContext(true);
+if (process.env.NODE_ENV !== 'production') {
+  MotionCacheContext.displayName = 'MotionCacheContext';
+}
 function MotionWrapper(props) {
+  const parentMotion = React.useContext(MotionCacheContext);
   const {
     children
   } = props;
@@ -7763,11 +7768,13 @@ function MotionWrapper(props) {
     motion
   } = token;
   const needWrapMotionProviderRef = React.useRef(false);
-  needWrapMotionProviderRef.current = needWrapMotionProviderRef.current || motion === false;
+  needWrapMotionProviderRef.current || (needWrapMotionProviderRef.current = parentMotion !== motion);
   if (needWrapMotionProviderRef.current) {
-    return /*#__PURE__*/React.createElement(MotionProvider, {
+    return /*#__PURE__*/React.createElement(MotionCacheContext.Provider, {
+      value: motion
+    }, /*#__PURE__*/React.createElement(MotionProvider, {
       motion: motion
-    }, children);
+    }, children));
   }
   return children;
 }
@@ -7788,7 +7795,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 var PropWarning$1 = process.env.NODE_ENV !== 'production' ? PropWarning : () => null;
 
-var __rest$c = undefined && undefined.__rest || function (s, e) {
+var __rest$e = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -8118,7 +8125,7 @@ const ProviderChildren = props => {
         components,
         cssVar
       } = _a,
-      rest = __rest$c(_a, ["algorithm", "token", "components", "cssVar"]);
+      rest = __rest$e(_a, ["algorithm", "token", "components", "cssVar"]);
     const themeObj = algorithm && (!Array.isArray(algorithm) || algorithm.length > 0) ? createTheme(algorithm) : defaultTheme;
     const parsedComponents = {};
     Object.entries(components || {}).forEach(([componentName, componentToken]) => {
@@ -8682,274 +8689,259 @@ function usePatchElement() {
   return [elements, patchElement];
 }
 
-function _regeneratorRuntime() {
-  _regeneratorRuntime = function _regeneratorRuntime() {
-    return r;
-  };
-  var t,
-    r = {},
-    e = Object.prototype,
-    n = e.hasOwnProperty,
-    o = "function" == typeof Symbol ? Symbol : {},
-    i = o.iterator || "@@iterator",
-    a = o.asyncIterator || "@@asyncIterator",
-    u = o.toStringTag || "@@toStringTag";
-  function c(t, r, e, n) {
-    Object.defineProperty(t, r, {
-      value: e,
-      enumerable: !n,
-      configurable: !n,
-      writable: !n
-    });
-  }
+function _OverloadYield(e, d) {
+  this.v = e, this.k = d;
+}
+
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
   try {
-    c({}, "");
-  } catch (t) {
-    c = function c(t, r, e) {
-      return t[r] = e;
-    };
-  }
-  function h(r, e, n, o) {
-    var i = e && e.prototype instanceof Generator ? e : Generator,
-      a = Object.create(i.prototype);
-    return c(a, "_invoke", function (r, e, n) {
-      var o = 1;
-      return function (i, a) {
-        if (3 === o) throw Error("Generator is already running");
-        if (4 === o) {
-          if ("throw" === i) throw a;
-          return {
-            value: t,
-            done: true
-          };
-        }
-        for (n.method = i, n.arg = a;;) {
-          var u = n.delegate;
-          if (u) {
-            var c = d(u, n);
-            if (c) {
-              if (c === f) continue;
-              return c;
-            }
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function regeneratorDefine(e, r, n, t) {
+    if (r) i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n;else {
+      var o = function o(r, n) {
+        _regeneratorDefine(e, r, function (e) {
+          return this._invoke(r, n, e);
+        });
+      };
+      o("next", 0), o("throw", 1), o("return", 2);
+    }
+  }, _regeneratorDefine(e, r, n, t);
+}
+
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function d(t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
           }
-          if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
-            if (1 === o) throw o = 4, n.arg;
-            n.dispatchException(n.arg);
-          } else "return" === n.method && n.abrupt("return", n.arg);
-          o = 3;
-          var h = s(r, e, n);
-          if ("normal" === h.type) {
-            if (o = n.done ? 4 : 2, h.arg === f) continue;
-            return {
-              value: h.arg,
-              done: n.done
-            };
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = true, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
           }
-          "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg);
         }
+        return {
+          value: t,
+          done: y
+        };
       };
-    }(r, n, new Context(o || [])), true), a;
-  }
-  function s(t, r, e) {
-    try {
-      return {
-        type: "normal",
-        arg: t.call(r, e)
-      };
-    } catch (t) {
-      return {
-        type: "throw",
-        arg: t
-      };
-    }
+    }(r, o, i), true), u;
   }
-  r.wrap = h;
-  var f = {};
+  var a = {};
   function Generator() {}
   function GeneratorFunction() {}
   function GeneratorFunctionPrototype() {}
-  var l = {};
-  c(l, i, function () {
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
     return this;
-  });
-  var p = Object.getPrototypeOf,
-    y = p && p(p(x([])));
-  y && y !== e && n.call(y, i) && (l = y);
-  var v = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(l);
-  function g(t) {
-    ["next", "throw", "return"].forEach(function (r) {
-      c(t, r, function (t) {
-        return this._invoke(r, t);
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function _regenerator() {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+
+function AsyncIterator(t, e) {
+  function n(r, o, i, f) {
+    try {
+      var c = t[r](o),
+        u = c.value;
+      return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) {
+        n("next", t, i, f);
+      }, function (t) {
+        n("throw", t, i, f);
+      }) : e.resolve(u).then(function (t) {
+        c.value = t, i(c);
+      }, function (t) {
+        return n("throw", t, i, f);
       });
-    });
-  }
-  function AsyncIterator(t, r) {
-    function e(o, i, a, u) {
-      var c = s(t[o], t, i);
-      if ("throw" !== c.type) {
-        var h = c.arg,
-          f = h.value;
-        return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) {
-          e("next", t, a, u);
-        }, function (t) {
-          e("throw", t, a, u);
-        }) : r.resolve(f).then(function (t) {
-          h.value = t, a(h);
-        }, function (t) {
-          return e("throw", t, a, u);
-        });
-      }
-      u(c.arg);
-    }
-    var o;
-    c(this, "_invoke", function (t, n) {
-      function i() {
-        return new r(function (r, o) {
-          e(t, n, r, o);
-        });
-      }
-      return o = o ? o.then(i, i) : i();
-    }, true);
-  }
-  function d(r, e) {
-    var n = e.method,
-      o = r.i[n];
-    if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f;
-    var i = s(o, r.i, e.arg);
-    if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f;
-    var a = i.arg;
-    return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f);
-  }
-  function w(t) {
-    this.tryEntries.push(t);
-  }
-  function m(r) {
-    var e = r[4] || {};
-    e.type = "normal", e.arg = t, r[4] = e;
-  }
-  function Context(t) {
-    this.tryEntries = [[-1]], t.forEach(w, this), this.reset(true);
-  }
-  function x(r) {
-    if (null != r) {
-      var e = r[i];
-      if (e) return e.call(r);
-      if ("function" == typeof r.next) return r;
-      if (!isNaN(r.length)) {
-        var o = -1,
-          a = function e() {
-            for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = false, e;
-            return e.value = t, e.done = true, e;
-          };
-        return a.next = a;
-      }
+    } catch (t) {
+      f(t);
     }
-    throw new TypeError(_typeof(r) + " is not iterable");
   }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), c(GeneratorFunctionPrototype, u, GeneratorFunction.displayName = "GeneratorFunction"), r.isGeneratorFunction = function (t) {
-    var r = "function" == typeof t && t.constructor;
-    return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name));
-  }, r.mark = function (t) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = Object.create(v), t;
-  }, r.awrap = function (t) {
-    return {
-      __await: t
-    };
-  }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () {
-    return this;
-  }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) {
-    void 0 === i && (i = Promise);
-    var a = new AsyncIterator(h(t, e, n, o), i);
-    return r.isGeneratorFunction(e) ? a : a.next().then(function (t) {
-      return t.done ? t.value : a.next();
-    });
-  }, g(v), c(v, u, "Generator"), c(v, i, function () {
+  var r;
+  this.next || (_regeneratorDefine(AsyncIterator.prototype), _regeneratorDefine(AsyncIterator.prototype, "function" == typeof Symbol && Symbol.asyncIterator || "@asyncIterator", function () {
     return this;
-  }), c(v, "toString", function () {
-    return "[object Generator]";
-  }), r.keys = function (t) {
-    var r = Object(t),
-      e = [];
-    for (var n in r) e.unshift(n);
-    return function t() {
-      for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = false, t;
-      return t.done = true, t;
-    };
-  }, r.values = x, Context.prototype = {
-    constructor: Context,
-    reset: function reset(r) {
-      if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = false, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+e.slice(1)) && (this[e] = t);
-    },
-    stop: function stop() {
-      this.done = true;
-      var t = this.tryEntries[0][4];
-      if ("throw" === t.type) throw t.arg;
-      return this.rval;
-    },
-    dispatchException: function dispatchException(r) {
-      if (this.done) throw r;
-      var e = this;
-      function n(t) {
-        a.type = "throw", a.arg = r, e.next = t;
-      }
-      for (var o = e.tryEntries.length - 1; o >= 0; --o) {
-        var i = this.tryEntries[o],
-          a = i[4],
-          u = this.prev,
-          c = i[1],
-          h = i[2];
-        if (-1 === i[0]) return n("end"), false;
-        if (!c && !h) throw Error("try statement without catch or finally");
-        if (null != i[0] && i[0] <= u) {
-          if (u < c) return this.method = "next", this.arg = t, n(c), true;
-          if (u < h) return n(h), false;
-        }
+  })), _regeneratorDefine(this, "_invoke", function (t, o, i) {
+    function f() {
+      return new e(function (e, r) {
+        n(t, i, e, r);
+      });
+    }
+    return r = r ? r.then(f, f) : f();
+  }, true);
+}
+
+function _regeneratorAsyncGen(r, e, t, o, n) {
+  return new AsyncIterator(_regenerator().w(r, e, t, o), n || Promise);
+}
+
+function _regeneratorAsync(n, e, r, t, o) {
+  var a = _regeneratorAsyncGen(n, e, r, t, o);
+  return a.next().then(function (n) {
+    return n.done ? n.value : a.next();
+  });
+}
+
+function _regeneratorKeys(e) {
+  var n = Object(e),
+    r = [];
+  for (var t in n) r.unshift(t);
+  return function e() {
+    for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = false, e;
+    return e.done = true, e;
+  };
+}
+
+function _regeneratorValues(e) {
+  if (null != e) {
+    var t = e["function" == typeof Symbol && Symbol.iterator || "@@iterator"],
+      r = 0;
+    if (t) return t.call(e);
+    if ("function" == typeof e.next) return e;
+    if (!isNaN(e.length)) return {
+      next: function next() {
+        return e && r >= e.length && (e = void 0), {
+          value: e && e[r++],
+          done: !e
+        };
       }
-    },
-    abrupt: function abrupt(t, r) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var n = this.tryEntries[e];
-        if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) {
-          var o = n;
-          break;
+    };
+  }
+  throw new TypeError(_typeof(e) + " is not iterable");
+}
+
+function _regeneratorRuntime() {
+
+  var r = _regenerator(),
+    e = r.m(_regeneratorRuntime),
+    t = (Object.getPrototypeOf ? Object.getPrototypeOf(e) : e.__proto__).constructor;
+  function n(r) {
+    var e = "function" == typeof r && r.constructor;
+    return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name));
+  }
+  var o = {
+    "throw": 1,
+    "return": 2,
+    "break": 3,
+    "continue": 3
+  };
+  function a(r) {
+    var e, t;
+    return function (n) {
+      e || (e = {
+        stop: function stop() {
+          return t(n.a, 2);
+        },
+        "catch": function _catch() {
+          return n.v;
+        },
+        abrupt: function abrupt(r, e) {
+          return t(n.a, o[r], e);
+        },
+        delegateYield: function delegateYield(r, o, a) {
+          return e.resultName = o, t(n.d, _regeneratorValues(r), a);
+        },
+        finish: function finish(r) {
+          return t(n.f, r);
         }
-      }
-      o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null);
-      var i = o ? o[4] : {};
-      return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i);
-    },
-    complete: function complete(t, r) {
-      if ("throw" === t.type) throw t.arg;
-      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f;
-    },
-    finish: function finish(t) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var e = this.tryEntries[r];
-        if (e[2] === t) return this.complete(e[4], e[3]), m(e), f;
-      }
-    },
-    "catch": function _catch(t) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var e = this.tryEntries[r];
-        if (e[0] === t) {
-          var n = e[4];
-          if ("throw" === n.type) {
-            var o = n.arg;
-            m(e);
-          }
-          return o;
+      }, t = function t(r, _t, o) {
+        n.p = e.prev, n.n = e.next;
+        try {
+          return r(_t, o);
+        } finally {
+          e.next = n.n;
         }
+      }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n;
+      try {
+        return r.call(this, e);
+      } finally {
+        n.p = e.prev, n.n = e.next;
       }
-      throw Error("illegal catch attempt");
-    },
-    delegateYield: function delegateYield(r, e, n) {
-      return this.delegate = {
-        i: x(r),
-        r: e,
-        n: n
-      }, "next" === this.method && (this.arg = t), f;
-    }
-  }, r;
+    };
+  }
+  return (_regeneratorRuntime = function _regeneratorRuntime() {
+    return {
+      wrap: function wrap(e, t, n, o) {
+        return r.w(a(e), t, n, o && o.reverse());
+      },
+      isGeneratorFunction: n,
+      mark: r.m,
+      awrap: function awrap(r, e) {
+        return new _OverloadYield(r, e);
+      },
+      AsyncIterator: AsyncIterator,
+      async: function async(r, e, t, o, u) {
+        return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u);
+      },
+      keys: _regeneratorKeys,
+      values: _regeneratorValues
+    };
+  })();
 }
 
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
@@ -9165,7 +9157,7 @@ const genWaveStyle = token => {
     }
   };
 };
-var useStyle$7 = genComponentStyleHook('Wave', token => [genWaveStyle(token)]);
+var useStyle$8 = genComponentStyleHook('Wave', token => [genWaveStyle(token)]);
 
 const TARGET_CLS = `${defaultPrefixCls}-wave-target`;
 
@@ -9370,7 +9362,7 @@ const Wave = props => {
   const containerRef = useRef(null);
   // ============================== Style ===============================
   const prefixCls = getPrefixCls('wave');
-  const [, hashId] = useStyle$7(prefixCls);
+  const [, hashId] = useStyle$8(prefixCls);
   // =============================== Wave ===============================
   const showWave = useWave(containerRef, classNames(prefixCls, hashId), component);
   // ============================== Effect ==============================
@@ -9467,7 +9459,7 @@ const NoCompactStyle = props => {
   }, children);
 };
 
-var __rest$b = undefined && undefined.__rest || function (s, e) {
+var __rest$d = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -9486,7 +9478,7 @@ const ButtonGroup = props => {
       size,
       className
     } = props,
-    others = __rest$b(props, ["prefixCls", "size", "className"]);
+    others = __rest$d(props, ["prefixCls", "size", "className"]);
   const prefixCls = getPrefixCls('btn-group', customizePrefixCls);
   const [,, hashId] = useToken();
   const sizeCls = React.useMemo(() => {
@@ -10721,7 +10713,7 @@ const isBright = (value, bgColorToken) => {
   return r * 0.299 + g * 0.587 + b * 0.114 > 192;
 };
 
-const prepareToken$1 = token => {
+const prepareToken$2 = token => {
   const {
     paddingInline,
     onlyIconSize
@@ -10733,7 +10725,7 @@ const prepareToken$1 = token => {
   });
   return buttonToken;
 };
-const prepareComponentToken$5 = token => {
+const prepareComponentToken$6 = token => {
   var _a, _b, _c, _d, _e, _f;
   const contentFontSize = (_a = token.contentFontSize) !== null && _a !== void 0 ? _a : token.fontSize;
   const contentFontSizeSM = (_b = token.contentFontSizeSM) !== null && _b !== void 0 ? _b : token.fontSize;
@@ -11236,8 +11228,8 @@ const genBlockButtonStyle = token => {
   };
 };
 // ============================== Export ==============================
-var useStyle$6 = genStyleHooks('Button', token => {
-  const buttonToken = prepareToken$1(token);
+var useStyle$7 = genStyleHooks('Button', token => {
+  const buttonToken = prepareToken$2(token);
   return [
   // Shared
   genSharedButtonStyle(buttonToken),
@@ -11251,7 +11243,7 @@ var useStyle$6 = genStyleHooks('Button', token => {
   genCompatibleButtonStyle(buttonToken),
   // Button Group
   genGroupStyle(buttonToken)];
-}, prepareComponentToken$5, {
+}, prepareComponentToken$6, {
   unitless: {
     fontWeight: true,
     contentLineHeight: true,
@@ -11393,13 +11385,13 @@ const genButtonCompactStyle = token => {
 };
 // ============================== Export ==============================
 var Compact = genSubStyleComponent(['Button', 'compact'], token => {
-  const buttonToken = prepareToken$1(token);
+  const buttonToken = prepareToken$2(token);
   return [
   // Space Compact
   genCompactItemStyle(buttonToken), genCompactItemVerticalStyle(buttonToken), genButtonCompactStyle(buttonToken)];
-}, prepareComponentToken$5);
+}, prepareComponentToken$6);
 
-var __rest$a = undefined && undefined.__rest || function (s, e) {
+var __rest$c = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -11456,7 +11448,7 @@ const InternalCompoundedButton = /*#__PURE__*/React__default.forwardRef((props,
       autoInsertSpace,
       autoFocus
     } = props,
-    rest = __rest$a(props, ["loading", "prefixCls", "color", "variant", "type", "danger", "shape", "size", "styles", "disabled", "className", "rootClassName", "children", "icon", "iconPosition", "ghost", "block", "htmlType", "classNames", "style", "autoInsertSpace", "autoFocus"]);
+    rest = __rest$c(props, ["loading", "prefixCls", "color", "variant", "type", "danger", "shape", "size", "styles", "disabled", "className", "rootClassName", "children", "icon", "iconPosition", "ghost", "block", "htmlType", "classNames", "style", "autoInsertSpace", "autoFocus"]);
   // https://github.com/ant-design/ant-design/issues/47605
   // Compatible with original `type` behavior
   const mergedType = type || 'default';
@@ -11496,7 +11488,7 @@ const InternalCompoundedButton = /*#__PURE__*/React__default.forwardRef((props,
   } = useComponentConfig('button');
   const mergedInsertSpace = (_a = autoInsertSpace !== null && autoInsertSpace !== void 0 ? autoInsertSpace : contextAutoInsertSpace) !== null && _a !== void 0 ? _a : true;
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$6(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$7(prefixCls);
   const disabled = useContext(DisabledContext);
   const mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
   const groupSize = useContext(GroupSizeContext);
@@ -11517,8 +11509,9 @@ const InternalCompoundedButton = /*#__PURE__*/React__default.forwardRef((props,
     };
   }, []);
   // ========================= Effect =========================
-  // Loading
-  useEffect(() => {
+  // Loading. Should use `useLayoutEffect` to avoid low perf multiple click issue.
+  // https://github.com/ant-design/ant-design/issues/51325
+  useLayoutEffect$1(() => {
     let delayTimer = null;
     if (loadingOrDelay.delay > 0) {
       delayTimer = setTimeout(() => {
@@ -11535,7 +11528,7 @@ const InternalCompoundedButton = /*#__PURE__*/React__default.forwardRef((props,
       }
     }
     return cleanupTimer;
-  }, [loadingOrDelay]);
+  }, [loadingOrDelay.delay, loadingOrDelay.loading]);
   // Two chinese characters check
   useEffect(() => {
     // FIXME: for HOC usage like <FormatMessage />
@@ -12676,7 +12669,7 @@ var Context = /*#__PURE__*/React.createContext({
 
 var ListContext = /*#__PURE__*/React.createContext(null);
 
-function toArray$1(value) {
+function toArray$2(value) {
   if (value === undefined || value === null) {
     return [];
   }
@@ -14142,7 +14135,7 @@ function _finishOnFirstFailed() {
  * ['a', 123] => ['a', 123]
  */
 function getNamePath(path) {
-  return toArray$1(path);
+  return toArray$2(path);
 }
 function cloneByNamePathList(store, namePathList) {
   var newStore = {};
@@ -14503,7 +14496,7 @@ var Field = /*#__PURE__*/function (_React$Component) {
                   if (!validateTrigger) {
                     return true;
                   }
-                  var triggerList = toArray$1(validateTrigger);
+                  var triggerList = toArray$2(validateTrigger);
                   return triggerList.includes(triggerName);
                 });
               }
@@ -14633,7 +14626,7 @@ var Field = /*#__PURE__*/function (_React$Component) {
       }
 
       // Filed element only
-      var childList = toArray$2(children);
+      var childList = toArray$3(children);
       if (childList.length !== 1 || ! /*#__PURE__*/React.isValidElement(childList[0])) {
         return {
           child: childList,
@@ -14714,7 +14707,7 @@ var Field = /*#__PURE__*/function (_React$Component) {
       };
 
       // Add validateTrigger
-      var validateTriggerList = toArray$1(mergedValidateTrigger || []);
+      var validateTriggerList = toArray$2(mergedValidateTrigger || []);
       validateTriggerList.forEach(function (triggerName) {
         // Wrap additional function of component, so that we can get latest value from store
         var originTrigger = control[triggerName];
@@ -16388,6 +16381,7 @@ function useClosable(propCloseCollection, contextCloseCollection, fallbackCloseC
   }, [propCloseConfig, contextCloseConfig, mergedFallbackCloseCollection]);
   // Calculate the final closeIcon
   return React__default.useMemo(() => {
+    var _a, _b;
     if (mergedClosableConfig === false) {
       return [false, null, closeBtnIsDisabled, {}];
     }
@@ -16405,9 +16399,9 @@ function useClosable(propCloseCollection, contextCloseCollection, fallbackCloseC
       if (closeIconRender) {
         mergedCloseIcon = closeIconRender(closeIcon);
       }
-      mergedCloseIcon = /*#__PURE__*/React__default.isValidElement(mergedCloseIcon) ? (/*#__PURE__*/React__default.cloneElement(mergedCloseIcon, Object.assign({
-        'aria-label': contextLocale.close
-      }, ariaOrDataProps))) : (/*#__PURE__*/React__default.createElement("span", Object.assign({
+      mergedCloseIcon = /*#__PURE__*/React__default.isValidElement(mergedCloseIcon) ? (/*#__PURE__*/React__default.cloneElement(mergedCloseIcon, Object.assign(Object.assign(Object.assign({}, mergedCloseIcon.props), {
+        'aria-label': (_b = (_a = mergedCloseIcon.props) === null || _a === void 0 ? void 0 : _a['aria-label']) !== null && _b !== void 0 ? _b : contextLocale.close
+      }), ariaOrDataProps))) : (/*#__PURE__*/React__default.createElement("span", Object.assign({
         "aria-label": contextLocale.close
       }, ariaOrDataProps), mergedCloseIcon));
     }
@@ -16595,7 +16589,7 @@ const genSkeletonElementButton = token => {
   }), genSkeletonElementButtonShape(token, controlHeightSM, `${skeletonButtonCls}-sm`));
 };
 // =============================== Base ===============================
-const genBaseStyle = token => {
+const genBaseStyle$1 = token => {
   const {
     componentCls,
     skeletonAvatarCls,
@@ -16713,7 +16707,7 @@ const genBaseStyle = token => {
   };
 };
 // ============================== Export ==============================
-const prepareComponentToken$4 = token => {
+const prepareComponentToken$5 = token => {
   const {
     colorFillContent,
     colorFill
@@ -16731,7 +16725,7 @@ const prepareComponentToken$4 = token => {
     paragraphLiHeight: token.controlHeight / 2
   };
 };
-var useStyle$5 = genStyleHooks('Skeleton', token => {
+var useStyle$6 = genStyleHooks('Skeleton', token => {
   const {
     componentCls,
     calc
@@ -16749,8 +16743,8 @@ var useStyle$5 = genStyleHooks('Skeleton', token => {
     skeletonLoadingBackground: `linear-gradient(90deg, ${token.gradientFromColor} 25%, ${token.gradientToColor} 37%, ${token.gradientFromColor} 63%)`,
     skeletonLoadingMotionDuration: '1.4s'
   });
-  return [genBaseStyle(skeletonToken)];
-}, prepareComponentToken$4, {
+  return [genBaseStyle$1(skeletonToken)];
+}, prepareComponentToken$5, {
   deprecatedTokens: [['color', 'gradientFromColor'], ['colorGradientEnd', 'gradientToColor']]
 });
 
@@ -16767,7 +16761,7 @@ const SkeletonAvatar = props => {
     getPrefixCls
   } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$5(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$6(prefixCls);
   const otherProps = omit(props, ['prefixCls', 'className']);
   const cls = classNames(prefixCls, `${prefixCls}-element`, {
     [`${prefixCls}-active`]: active
@@ -16794,7 +16788,7 @@ const SkeletonButton = props => {
     getPrefixCls
   } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$5(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$6(prefixCls);
   const otherProps = omit(props, ['prefixCls']);
   const cls = classNames(prefixCls, `${prefixCls}-element`, {
     [`${prefixCls}-active`]: active,
@@ -16821,7 +16815,7 @@ const SkeletonImage = props => {
     getPrefixCls
   } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$5(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$6(prefixCls);
   const cls = classNames(prefixCls, `${prefixCls}-element`, {
     [`${prefixCls}-active`]: active
   }, className, rootClassName, hashId, cssVarCls);
@@ -16853,7 +16847,7 @@ const SkeletonInput = props => {
     getPrefixCls
   } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$5(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$6(prefixCls);
   const otherProps = omit(props, ['prefixCls']);
   const cls = classNames(prefixCls, `${prefixCls}-element`, {
     [`${prefixCls}-active`]: active,
@@ -16880,7 +16874,7 @@ const SkeletonNode = props => {
     getPrefixCls
   } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$5(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$6(prefixCls);
   const cls = classNames(prefixCls, `${prefixCls}-element`, {
     [`${prefixCls}-active`]: active
   }, hashId, className, rootClassName, cssVarCls);
@@ -17012,7 +17006,7 @@ const Skeleton = props => {
     style: contextStyle
   } = useComponentConfig('skeleton');
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$5(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$6(prefixCls);
   if (loading || !('loading' in props)) {
     const hasAvatar = !!avatar;
     const hasTitle = !!title;
@@ -17562,23 +17556,30 @@ const genResponsiveWidthStyle = token => {
   const {
     componentCls
   } = token;
-  const gridMediaSizesMap = getMediaSize(token);
+  const oriGridMediaSizesMap = getMediaSize(token);
+  const gridMediaSizesMap = Object.assign({}, oriGridMediaSizesMap);
   delete gridMediaSizesMap.xs;
+  const cssVarPrefix = `--${componentCls.replace('.', '')}-`;
   const responsiveStyles = Object.keys(gridMediaSizesMap).map(key => ({
     [`@media (min-width: ${unit$1(gridMediaSizesMap[key])})`]: {
-      width: `var(--${componentCls.replace('.', '')}-${key}-width)`
+      width: `var(${cssVarPrefix}${key}-width)`
     }
   }));
   return {
     [`${componentCls}-root`]: {
-      [componentCls]: [{
-        width: `var(--${componentCls.replace('.', '')}-xs-width)`
-      }].concat(_toConsumableArray(responsiveStyles))
+      [componentCls]: [].concat(_toConsumableArray(Object.keys(oriGridMediaSizesMap).map((currentKey, index) => {
+        const previousKey = Object.keys(oriGridMediaSizesMap)[index - 1];
+        return previousKey ? {
+          [`${cssVarPrefix}${currentKey}-width`]: `var(${cssVarPrefix}${previousKey}-width)`
+        } : null;
+      })), [{
+        width: `var(${cssVarPrefix}xs-width)`
+      }], _toConsumableArray(responsiveStyles))
     }
   };
 };
 // ============================== Export ==============================
-const prepareToken = token => {
+const prepareToken$1 = token => {
   const headerPaddingVertical = token.padding;
   const headerFontSize = token.fontSizeHeading5;
   const headerLineHeight = token.lineHeightHeading5;
@@ -17595,7 +17596,7 @@ const prepareToken = token => {
   });
   return modalToken;
 };
-const prepareComponentToken$3 = token => ({
+const prepareComponentToken$4 = token => ({
   footerBg: 'transparent',
   headerBg: token.colorBgElevated,
   titleLineHeight: token.lineHeightHeading5,
@@ -17616,16 +17617,16 @@ const prepareComponentToken$3 = token => ({
   confirmIconMarginInlineEnd: token.wireframe ? token.margin : token.marginSM,
   confirmBtnsMarginTop: token.wireframe ? token.marginLG : token.marginSM
 });
-var useStyle$4 = genStyleHooks('Modal', token => {
-  const modalToken = prepareToken(token);
+var useStyle$5 = genStyleHooks('Modal', token => {
+  const modalToken = prepareToken$1(token);
   return [genModalStyle(modalToken), genRTLStyle(modalToken), genModalMaskStyle(modalToken), initZoomMotion(modalToken, 'zoom'), genResponsiveWidthStyle(modalToken)];
-}, prepareComponentToken$3, {
+}, prepareComponentToken$4, {
   unitless: {
     titleLineHeight: true
   }
 });
 
-var __rest$9 = undefined && undefined.__rest || function (s, e) {
+var __rest$b = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -17678,7 +17679,7 @@ const Modal$2 = props => {
       destroyOnHidden,
       destroyOnClose
     } = props,
-    restProps = __rest$9(props, ["prefixCls", "className", "rootClassName", "open", "wrapClassName", "centered", "getContainer", "focusTriggerAfterClose", "style", "visible", "width", "footer", "classNames", "styles", "children", "loading", "confirmLoading", "zIndex", "mousePosition", "onOk", "onCancel", "destroyOnHidden", "destroyOnClose"]);
+    restProps = __rest$b(props, ["prefixCls", "className", "rootClassName", "open", "wrapClassName", "centered", "getContainer", "focusTriggerAfterClose", "style", "visible", "width", "footer", "classNames", "styles", "children", "loading", "confirmLoading", "zIndex", "mousePosition", "onOk", "onCancel", "destroyOnHidden", "destroyOnClose"]);
   const {
     getPopupContainer: getContextPopupContainer,
     getPrefixCls,
@@ -17704,7 +17705,7 @@ const Modal$2 = props => {
   const rootPrefixCls = getPrefixCls();
   // Style
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$4(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$5(prefixCls, rootCls);
   const wrapClassNameExtended = classNames(wrapClassName, {
     [`${prefixCls}-centered`]: centered !== null && centered !== void 0 ? centered : modalContext === null || modalContext === void 0 ? void 0 : modalContext.centered,
     [`${prefixCls}-wrap-rtl`]: direction === 'rtl'
@@ -17880,14 +17881,14 @@ const genModalConfirmStyle = token => {
 };
 // ============================== Export ==============================
 var Confirm = genSubStyleComponent(['Modal', 'confirm'], token => {
-  const modalToken = prepareToken(token);
+  const modalToken = prepareToken$1(token);
   return [genModalConfirmStyle(modalToken)];
-}, prepareComponentToken$3, {
+}, prepareComponentToken$4, {
   // confirm is weak than modal since no conflict here
   order: -1e3
 });
 
-var __rest$8 = undefined && undefined.__rest || function (s, e) {
+var __rest$a = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -17908,7 +17909,7 @@ function ConfirmContent(props) {
       // Legacy for static function usage
       locale: staticLocale
     } = props,
-    resetProps = __rest$8(props, ["prefixCls", "icon", "okText", "cancelText", "confirmPrefixCls", "type", "okCancel", "footer", "locale"]);
+    resetProps = __rest$a(props, ["prefixCls", "icon", "okText", "cancelText", "confirmPrefixCls", "type", "okCancel", "footer", "locale"]);
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Modal');
     process.env.NODE_ENV !== "production" ? warning(!(typeof icon === 'string' && icon.length > 2), 'breaking', `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`) : void 0;
@@ -18208,7 +18209,7 @@ function modalGlobalConfig({
   defaultRootPrefixCls = rootPrefixCls;
 }
 
-var __rest$7 = undefined && undefined.__rest || function (s, e) {
+var __rest$9 = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -18222,7 +18223,7 @@ const HookModal = (_a, ref) => {
       afterClose: hookAfterClose,
       config
     } = _a,
-    restProps = __rest$7(_a, ["afterClose", "config"]);
+    restProps = __rest$9(_a, ["afterClose", "config"]);
   const [open, setOpen] = React.useState(true);
   const [innerConfig, setInnerConfig] = React.useState(config);
   const {
@@ -18248,7 +18249,10 @@ const HookModal = (_a, ref) => {
   React.useImperativeHandle(ref, () => ({
     destroy: close,
     update: newConfig => {
-      setInnerConfig(originConfig => Object.assign(Object.assign({}, originConfig), newConfig));
+      setInnerConfig(originConfig => {
+        const nextConfig = typeof newConfig === 'function' ? newConfig(originConfig) : newConfig;
+        return Object.assign(Object.assign({}, originConfig), nextConfig);
+      });
     }
   }));
   const mergedOkCancel = (_b = innerConfig.okCancel) !== null && _b !== void 0 ? _b : innerConfig.type === 'confirm';
@@ -18663,13 +18667,13 @@ if (process.env.NODE_ENV !== 'production') {
 
 var TriggerContext = /*#__PURE__*/React.createContext(null);
 
-function toArray(val) {
+function toArray$1(val) {
   return val ? Array.isArray(val) ? val : [val] : [];
 }
 function useAction(mobile, action, showAction, hideAction) {
   return React.useMemo(function () {
-    var mergedShowAction = toArray(showAction !== null && showAction !== void 0 ? showAction : action);
-    var mergedHideAction = toArray(hideAction !== null && hideAction !== void 0 ? hideAction : action);
+    var mergedShowAction = toArray$1(showAction !== null && showAction !== void 0 ? showAction : action);
+    var mergedHideAction = toArray$1(hideAction !== null && hideAction !== void 0 ? hideAction : action);
     var showActionSet = new Set(mergedShowAction);
     var hideActionSet = new Set(mergedHideAction);
     if (mobile) {
@@ -18945,8 +18949,6 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var doc = popupElement.ownerDocument;
       var win = getWin(popupElement);
       var _win$getComputedStyle = win.getComputedStyle(popupElement),
-        width = _win$getComputedStyle.width,
-        height = _win$getComputedStyle.height,
         popupPosition = _win$getComputedStyle.position;
       var originLeft = popupElement.style.left;
       var originTop = popupElement.style.top;
@@ -18995,6 +18997,9 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         };
       }
       var popupRect = popupElement.getBoundingClientRect();
+      var _win$getComputedStyle2 = win.getComputedStyle(popupElement),
+        height = _win$getComputedStyle2.height,
+        width = _win$getComputedStyle2.width;
       popupRect.x = (_popupRect$x = popupRect.x) !== null && _popupRect$x !== void 0 ? _popupRect$x : popupRect.left;
       popupRect.y = (_popupRect$y = popupRect.y) !== null && _popupRect$y !== void 0 ? _popupRect$y : popupRect.top;
       var _doc$documentElement = doc.documentElement,
@@ -20655,7 +20660,7 @@ const genTooltipStyle = token => {
   }];
 };
 // ============================== Export ==============================
-const prepareComponentToken$2 = token => Object.assign(Object.assign({
+const prepareComponentToken$3 = token => Object.assign(Object.assign({
   zIndexPopup: token.zIndexPopupBase + 70
 }, getArrowOffsetToken({
   contentRadius: token.borderRadius,
@@ -20663,7 +20668,7 @@ const prepareComponentToken$2 = token => Object.assign(Object.assign({
 })), getArrowToken(merge(token, {
   borderRadiusOuter: Math.min(token.borderRadiusOuter, 4)
 })));
-var useStyle$3 = (prefixCls, injectStyle = true) => {
+var useStyle$4 = (prefixCls, injectStyle = true) => {
   const useStyle = genStyleHooks('Tooltip', token => {
     const {
       borderRadius,
@@ -20678,7 +20683,7 @@ var useStyle$3 = (prefixCls, injectStyle = true) => {
       tooltipBg: colorBgSpotlight
     });
     return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
-  }, prepareComponentToken$2, {
+  }, prepareComponentToken$3, {
     resetStyle: false,
     // Popover use Tooltip as internal component. We do not need to handle this.
     injectStyle
@@ -20687,6 +20692,7 @@ var useStyle$3 = (prefixCls, injectStyle = true) => {
 };
 
 const inverseColors = PresetColors.map(color => `${color}-inverse`);
+const PresetStatusColorTypes = ['success', 'processing', 'error', 'default', 'warning'];
 /**
  * determine if the color keyword belongs to the `Ant Design` {@link PresetColors}.
  * @param color color to be judged
@@ -20698,6 +20704,9 @@ function isPresetColor(color, includeInverse = true) {
   }
   return PresetColors.includes(color);
 }
+function isPresetStatusColor(color) {
+  return PresetStatusColorTypes.includes(color);
+}
 
 function parseColor(prefixCls, color) {
   const isInternalColor = isPresetColor(color);
@@ -20732,7 +20741,7 @@ const PurePanel$2 = props => {
     getPrefixCls
   } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$3(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$4(prefixCls);
   // Color
   const colorInfo = parseColor(prefixCls, color);
   const arrowContentStyle = colorInfo.arrowStyle;
@@ -20750,7 +20759,7 @@ const PurePanel$2 = props => {
   }), title)));
 };
 
-var __rest$6 = undefined && undefined.__rest || function (s, e) {
+var __rest$8 = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -20788,7 +20797,7 @@ const InternalTooltip = /*#__PURE__*/React.forwardRef((props, ref) => {
       styles,
       classNames: tooltipClassNames
     } = props,
-    restProps = __rest$6(props, ["prefixCls", "openClassName", "getTooltipContainer", "color", "overlayInnerStyle", "children", "afterOpenChange", "afterVisibleChange", "destroyTooltipOnHide", "destroyOnHidden", "arrow", "title", "overlay", "builtinPlacements", "arrowPointAtCenter", "autoAdjustOverflow", "motion", "getPopupContainer", "placement", "mouseEnterDelay", "mouseLeaveDelay", "overlayStyle", "rootClassName", "overlayClassName", "styles", "classNames"]);
+    restProps = __rest$8(props, ["prefixCls", "openClassName", "getTooltipContainer", "color", "overlayInnerStyle", "children", "afterOpenChange", "afterVisibleChange", "destroyTooltipOnHide", "destroyOnHidden", "arrow", "title", "overlay", "builtinPlacements", "arrowPointAtCenter", "autoAdjustOverflow", "motion", "getPopupContainer", "placement", "mouseEnterDelay", "mouseLeaveDelay", "overlayStyle", "rootClassName", "overlayClassName", "styles", "classNames"]);
   const mergedShowArrow = !!arrow;
   const [, token] = useToken();
   const {
@@ -20876,7 +20885,7 @@ const InternalTooltip = /*#__PURE__*/React.forwardRef((props, ref) => {
   const childProps = child.props;
   const childCls = !childProps.className || typeof childProps.className === 'string' ? classNames(childProps.className, openClassName || `${prefixCls}-open`) : childProps.className;
   // Style
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$3(prefixCls, !injectFromPopover);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$4(prefixCls, !injectFromPopover);
   // Color
   const colorInfo = parseColor(prefixCls, color);
   const arrowContentStyle = colorInfo.arrowStyle;
@@ -21438,7 +21447,7 @@ const getRadioButtonStyle = token => {
   };
 };
 // ============================== Export ==============================
-const prepareComponentToken$1 = token => {
+const prepareComponentToken$2 = token => {
   const {
     wireframe,
     padding,
@@ -21480,7 +21489,7 @@ const prepareComponentToken$1 = token => {
     radioBgColor: wireframe ? colorBgContainer : colorPrimary
   };
 };
-var useStyle$2 = genStyleHooks('Radio', token => {
+var useStyle$3 = genStyleHooks('Radio', token => {
   const {
     controlOutline,
     controlOutlineWidth
@@ -21492,14 +21501,14 @@ var useStyle$2 = genStyleHooks('Radio', token => {
     radioButtonFocusShadow
   });
   return [getGroupRadioStyle(radioToken), getRadioBasicStyle(radioToken), getRadioButtonStyle(radioToken)];
-}, prepareComponentToken$1, {
+}, prepareComponentToken$2, {
   unitless: {
     radioSize: true,
     dotSize: true
   }
 });
 
-var __rest$5 = undefined && undefined.__rest || function (s, e) {
+var __rest$7 = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -21538,13 +21547,13 @@ const InternalRadio = (props, ref) => {
       style,
       title
     } = props,
-    restProps = __rest$5(props, ["prefixCls", "className", "rootClassName", "children", "style", "title"]);
+    restProps = __rest$7(props, ["prefixCls", "className", "rootClassName", "children", "style", "title"]);
   const radioPrefixCls = getPrefixCls('radio', customizePrefixCls);
   const isButtonType = ((groupContext === null || groupContext === void 0 ? void 0 : groupContext.optionType) || radioOptionTypeContext) === 'button';
   const prefixCls = isButtonType ? `${radioPrefixCls}-button` : radioPrefixCls;
   // Style
   const rootCls = useCSSVarCls(radioPrefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$2(radioPrefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$3(radioPrefixCls, rootCls);
   const radioProps = Object.assign({}, restProps);
   // ===================== Disabled =====================
   const disabled = React.useContext(DisabledContext);
@@ -21592,12 +21601,35 @@ if (process.env.NODE_ENV !== 'production') {
   Radio$2.displayName = 'Radio';
 }
 
+// form item name black list.  in form ,you can use form.id get the form item element.
+// use object hasOwnProperty will get better performance if black list is longer.
+function toArray(candidate) {
+  if (candidate === undefined || candidate === false) return [];
+  return Array.isArray(candidate) ? candidate : [candidate];
+}
+
+undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+function toNamePathStr(name) {
+  const namePath = toArray(name);
+  return namePath.join('_');
+}
+
 const RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     getPrefixCls,
     direction
   } = React.useContext(ConfigContext);
-  const defaultName = useId();
+  const {
+    name: formItemName
+  } = React.useContext(FormItemInputContext);
+  const defaultName = useId(toNamePathStr(formItemName));
   const {
     prefixCls: customizePrefixCls,
     className,
@@ -21637,7 +21669,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const groupPrefixCls = `${prefixCls}-group`;
   // Style
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$2(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$3(prefixCls, rootCls);
   let childrenToRender = children;
   // 如果存在 options, 优先使用
   if (options && options.length > 0) {
@@ -21699,7 +21731,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 var Group = /*#__PURE__*/React.memo(RadioGroup);
 
-var __rest$4 = undefined && undefined.__rest || function (s, e) {
+var __rest$6 = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -21714,7 +21746,7 @@ const RadioButton = (props, ref) => {
   const {
       prefixCls: customizePrefixCls
     } = props,
-    radioProps = __rest$4(props, ["prefixCls"]);
+    radioProps = __rest$6(props, ["prefixCls"]);
   const prefixCls = getPrefixCls('radio', customizePrefixCls);
   return /*#__PURE__*/React.createElement(RadioOptionTypeContextProvider, {
     value: "button"
@@ -21883,26 +21915,28 @@ const genCheckboxStyle = token => {
   {
     [checkboxCls]: {
       '&-indeterminate': {
-        // Wrapper > Checkbox > inner
-        [`${checkboxCls}-inner`]: {
-          backgroundColor: `${token.colorBgContainer} !important`,
-          borderColor: `${token.colorBorder} !important`,
-          '&:after': {
-            top: '50%',
-            insetInlineStart: '50%',
-            width: token.calc(token.fontSizeLG).div(2).equal(),
-            height: token.calc(token.fontSizeLG).div(2).equal(),
-            backgroundColor: token.colorPrimary,
-            border: 0,
-            transform: 'translate(-50%, -50%) scale(1)',
-            opacity: 1,
-            content: '""'
+        '&': {
+          // Wrapper > Checkbox > inner
+          [`${checkboxCls}-inner`]: {
+            backgroundColor: `${token.colorBgContainer}`,
+            borderColor: `${token.colorBorder}`,
+            '&:after': {
+              top: '50%',
+              insetInlineStart: '50%',
+              width: token.calc(token.fontSizeLG).div(2).equal(),
+              height: token.calc(token.fontSizeLG).div(2).equal(),
+              backgroundColor: token.colorPrimary,
+              border: 0,
+              transform: 'translate(-50%, -50%) scale(1)',
+              opacity: 1,
+              content: '""'
+            }
+          },
+          // https://github.com/ant-design/ant-design/issues/50074
+          [`&:hover ${checkboxCls}-inner`]: {
+            backgroundColor: `${token.colorBgContainer}`,
+            borderColor: `${token.colorPrimary}`
           }
-        },
-        // https://github.com/ant-design/ant-design/issues/50074
-        [`&:hover ${checkboxCls}-inner`]: {
-          backgroundColor: `${token.colorBgContainer} !important`,
-          borderColor: `${token.colorPrimary} !important`
         }
       }
     }
@@ -21950,13 +21984,13 @@ function getStyle(prefixCls, token) {
   });
   return [genCheckboxStyle(checkboxToken)];
 }
-var useStyle$1 = genStyleHooks('Checkbox', (token, {
+var useStyle$2 = genStyleHooks('Checkbox', (token, {
   prefixCls
 }) => [getStyle(prefixCls, token)]);
 
 const GroupContext = /*#__PURE__*/React__default.createContext(null);
 
-var __rest$3 = undefined && undefined.__rest || function (s, e) {
+var __rest$5 = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -21978,7 +22012,7 @@ const InternalCheckbox = (props, ref) => {
       skipGroup = false,
       disabled
     } = props,
-    restProps = __rest$3(props, ["prefixCls", "className", "rootClassName", "children", "indeterminate", "style", "onMouseEnter", "onMouseLeave", "skipGroup", "disabled"]);
+    restProps = __rest$5(props, ["prefixCls", "className", "rootClassName", "children", "indeterminate", "style", "onMouseEnter", "onMouseLeave", "skipGroup", "disabled"]);
   const {
     getPrefixCls,
     direction,
@@ -22019,7 +22053,7 @@ const InternalCheckbox = (props, ref) => {
   }, [indeterminate]);
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$1(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$2(prefixCls, rootCls);
   const checkboxProps = Object.assign({}, restProps);
   if (checkboxGroup && !skipGroup) {
     checkboxProps.onChange = (...args) => {
@@ -22072,7 +22106,7 @@ if (process.env.NODE_ENV !== 'production') {
   Checkbox$2.displayName = 'Checkbox';
 }
 
-var __rest$2 = undefined && undefined.__rest || function (s, e) {
+var __rest$4 = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -22091,7 +22125,7 @@ const CheckboxGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
       style,
       onChange
     } = props,
-    restProps = __rest$2(props, ["defaultValue", "children", "options", "prefixCls", "className", "rootClassName", "style", "onChange"]);
+    restProps = __rest$4(props, ["defaultValue", "children", "options", "prefixCls", "className", "rootClassName", "style", "onChange"]);
   const {
     getPrefixCls,
     direction
@@ -22138,7 +22172,7 @@ const CheckboxGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
   const groupPrefixCls = `${prefixCls}-group`;
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$1(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$2(prefixCls, rootCls);
   const domProps = omit(restProps, ['value', 'disabled']);
   const childrenNode = options.length ? memoizedOptions.map(option => (/*#__PURE__*/React.createElement(Checkbox$2, {
     prefixCls: prefixCls,
@@ -22182,7 +22216,7 @@ if (process.env.NODE_ENV !== 'production') {
   Checkbox$1.displayName = 'Checkbox';
 }
 
-var __rest$1 = undefined && undefined.__rest || function (s, e) {
+var __rest$3 = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -22201,14 +22235,14 @@ const PurePanel = props => {
       children,
       footer
     } = props,
-    restProps = __rest$1(props, ["prefixCls", "className", "closeIcon", "closable", "type", "title", "children", "footer"]);
+    restProps = __rest$3(props, ["prefixCls", "className", "closeIcon", "closable", "type", "title", "children", "footer"]);
   const {
     getPrefixCls
   } = React.useContext(ConfigContext);
   const rootPrefixCls = getPrefixCls();
   const prefixCls = customizePrefixCls || getPrefixCls('modal');
   const rootCls = useCSSVarCls(rootPrefixCls);
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle$4(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$5(prefixCls, rootCls);
   const confirmPrefixCls = `${prefixCls}-confirm`;
   // Choose target props by confirm mark
   let additionalProps = {};
@@ -22604,7 +22638,7 @@ const genSwitchStyle = token => {
   };
 };
 // ============================== Export ==============================
-const prepareComponentToken = token => {
+const prepareComponentToken$1 = token => {
   const {
     fontSize,
     lineHeight,
@@ -22633,7 +22667,7 @@ const prepareComponentToken = token => {
     innerMaxMarginSM: handleSizeSM + padding + padding * 2
   };
 };
-var useStyle = genStyleHooks('Switch', token => {
+var useStyle$1 = genStyleHooks('Switch', token => {
   const switchToken = merge(token, {
     switchDuration: token.motionDurationMid,
     switchColor: token.colorPrimary,
@@ -22651,9 +22685,9 @@ var useStyle = genStyleHooks('Switch', token => {
   genSwitchLoadingStyle(switchToken),
   // small style
   genSwitchSmallStyle(switchToken)];
-}, prepareComponentToken);
+}, prepareComponentToken$1);
 
-var __rest = undefined && undefined.__rest || function (s, e) {
+var __rest$2 = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -22676,7 +22710,7 @@ const InternalSwitch = /*#__PURE__*/React.forwardRef((props, ref) => {
       defaultValue,
       onChange
     } = props,
-    restProps = __rest(props, ["prefixCls", "size", "disabled", "loading", "className", "rootClassName", "style", "checked", "value", "defaultChecked", "defaultValue", "onChange"]);
+    restProps = __rest$2(props, ["prefixCls", "size", "disabled", "loading", "className", "rootClassName", "style", "checked", "value", "defaultChecked", "defaultValue", "onChange"]);
   const [checked, setChecked] = useMergedState(false, {
     value: checkedProp !== null && checkedProp !== void 0 ? checkedProp : value,
     defaultValue: defaultCheckedProp !== null && defaultCheckedProp !== void 0 ? defaultCheckedProp : defaultValue
@@ -22696,7 +22730,7 @@ const InternalSwitch = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: `${prefixCls}-loading-icon`
   }));
   // Style
-  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle$1(prefixCls);
   const mergedSize = useSize(customizeSize);
   const classes = classNames(SWITCH === null || SWITCH === void 0 ? void 0 : SWITCH.className, {
     [`${prefixCls}-small`]: mergedSize === 'small',
@@ -22727,12 +22761,327 @@ if (process.env.NODE_ENV !== 'production') {
   Switch$1.displayName = 'Switch';
 }
 
+// ============================== Styles ==============================
+const genBaseStyle = token => {
+  const {
+    paddingXXS,
+    lineWidth,
+    tagPaddingHorizontal,
+    componentCls,
+    calc
+  } = token;
+  const paddingInline = calc(tagPaddingHorizontal).sub(lineWidth).equal();
+  const iconMarginInline = calc(paddingXXS).sub(lineWidth).equal();
+  return {
+    // Result
+    [componentCls]: Object.assign(Object.assign({}, resetComponent(token)), {
+      display: 'inline-block',
+      height: 'auto',
+      // https://github.com/ant-design/ant-design/pull/47504
+      marginInlineEnd: token.marginXS,
+      paddingInline,
+      fontSize: token.tagFontSize,
+      lineHeight: token.tagLineHeight,
+      whiteSpace: 'nowrap',
+      background: token.defaultBg,
+      border: `${unit$1(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
+      borderRadius: token.borderRadiusSM,
+      opacity: 1,
+      transition: `all ${token.motionDurationMid}`,
+      textAlign: 'start',
+      position: 'relative',
+      // RTL
+      [`&${componentCls}-rtl`]: {
+        direction: 'rtl'
+      },
+      '&, a, a:hover': {
+        color: token.defaultColor
+      },
+      [`${componentCls}-close-icon`]: {
+        marginInlineStart: iconMarginInline,
+        fontSize: token.tagIconSize,
+        color: token.colorIcon,
+        cursor: 'pointer',
+        transition: `all ${token.motionDurationMid}`,
+        '&:hover': {
+          color: token.colorTextHeading
+        }
+      },
+      [`&${componentCls}-has-color`]: {
+        borderColor: 'transparent',
+        [`&, a, a:hover, ${token.iconCls}-close, ${token.iconCls}-close:hover`]: {
+          color: token.colorTextLightSolid
+        }
+      },
+      '&-checkable': {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        cursor: 'pointer',
+        [`&:not(${componentCls}-checkable-checked):hover`]: {
+          color: token.colorPrimary,
+          backgroundColor: token.colorFillSecondary
+        },
+        '&:active, &-checked': {
+          color: token.colorTextLightSolid
+        },
+        '&-checked': {
+          backgroundColor: token.colorPrimary,
+          '&:hover': {
+            backgroundColor: token.colorPrimaryHover
+          }
+        },
+        '&:active': {
+          backgroundColor: token.colorPrimaryActive
+        }
+      },
+      '&-hidden': {
+        display: 'none'
+      },
+      // To ensure that a space will be placed between character and `Icon`.
+      [`> ${token.iconCls} + span, > span + ${token.iconCls}`]: {
+        marginInlineStart: paddingInline
+      }
+    }),
+    [`${componentCls}-borderless`]: {
+      borderColor: 'transparent',
+      background: token.tagBorderlessBg
+    }
+  };
+};
+// ============================== Export ==============================
+const prepareToken = token => {
+  const {
+    lineWidth,
+    fontSizeIcon,
+    calc
+  } = token;
+  const tagFontSize = token.fontSizeSM;
+  const tagToken = merge(token, {
+    tagFontSize,
+    tagLineHeight: unit$1(calc(token.lineHeightSM).mul(tagFontSize).equal()),
+    tagIconSize: calc(fontSizeIcon).sub(calc(lineWidth).mul(2)).equal(),
+    // Tag icon is much smaller
+    tagPaddingHorizontal: 8,
+    // Fixed padding.
+    tagBorderlessBg: token.defaultBg
+  });
+  return tagToken;
+};
+const prepareComponentToken = token => ({
+  defaultBg: new FastColor(token.colorFillQuaternary).onBackground(token.colorBgContainer).toHexString(),
+  defaultColor: token.colorText
+});
+var useStyle = genStyleHooks('Tag', token => {
+  const tagToken = prepareToken(token);
+  return genBaseStyle(tagToken);
+}, prepareComponentToken);
+
+var __rest$1 = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+const CheckableTag = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      prefixCls: customizePrefixCls,
+      style,
+      className,
+      checked,
+      onChange,
+      onClick
+    } = props,
+    restProps = __rest$1(props, ["prefixCls", "style", "className", "checked", "onChange", "onClick"]);
+  const {
+    getPrefixCls,
+    tag
+  } = React.useContext(ConfigContext);
+  const handleClick = e => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(!checked);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  const prefixCls = getPrefixCls('tag', customizePrefixCls);
+  // Style
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+  const cls = classNames(prefixCls, `${prefixCls}-checkable`, {
+    [`${prefixCls}-checkable-checked`]: checked
+  }, tag === null || tag === void 0 ? void 0 : tag.className, className, hashId, cssVarCls);
+  return wrapCSSVar(/*#__PURE__*/React.createElement("span", Object.assign({}, restProps, {
+    ref: ref,
+    style: Object.assign(Object.assign({}, style), tag === null || tag === void 0 ? void 0 : tag.style),
+    className: cls,
+    onClick: handleClick
+  })));
+});
+
+// Style as status component
+// ============================== Preset ==============================
+const genPresetStyle = token => genPresetColor(token, (colorKey, {
+  textColor,
+  lightBorderColor,
+  lightColor,
+  darkColor
+}) => ({
+  [`${token.componentCls}${token.componentCls}-${colorKey}`]: {
+    color: textColor,
+    background: lightColor,
+    borderColor: lightBorderColor,
+    // Inverse color
+    '&-inverse': {
+      color: token.colorTextLightSolid,
+      background: darkColor,
+      borderColor: darkColor
+    },
+    [`&${token.componentCls}-borderless`]: {
+      borderColor: 'transparent'
+    }
+  }
+}));
+// ============================== Export ==============================
+var PresetCmp = genSubStyleComponent(['Tag', 'preset'], token => {
+  const tagToken = prepareToken(token);
+  return genPresetStyle(tagToken);
+}, prepareComponentToken);
+
+function capitalize(str) {
+  if (typeof str !== 'string') {
+    return str;
+  }
+  const ret = str.charAt(0).toUpperCase() + str.slice(1);
+  return ret;
+}
+
+const genTagStatusStyle = (token, status, cssVariableType) => {
+  const capitalizedCssVariableType = capitalize(cssVariableType);
+  return {
+    [`${token.componentCls}${token.componentCls}-${status}`]: {
+      color: token[`color${cssVariableType}`],
+      background: token[`color${capitalizedCssVariableType}Bg`],
+      borderColor: token[`color${capitalizedCssVariableType}Border`],
+      [`&${token.componentCls}-borderless`]: {
+        borderColor: 'transparent'
+      }
+    }
+  };
+};
+// ============================== Export ==============================
+var StatusCmp = genSubStyleComponent(['Tag', 'status'], token => {
+  const tagToken = prepareToken(token);
+  return [genTagStatusStyle(tagToken, 'success', 'Success'), genTagStatusStyle(tagToken, 'processing', 'Info'), genTagStatusStyle(tagToken, 'error', 'Error'), genTagStatusStyle(tagToken, 'warning', 'Warning')];
+}, prepareComponentToken);
+
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+const InternalTag = /*#__PURE__*/React.forwardRef((tagProps, ref) => {
+  const {
+      prefixCls: customizePrefixCls,
+      className,
+      rootClassName,
+      style,
+      children,
+      icon,
+      color,
+      onClose,
+      bordered = true,
+      visible: deprecatedVisible
+    } = tagProps,
+    props = __rest(tagProps, ["prefixCls", "className", "rootClassName", "style", "children", "icon", "color", "onClose", "bordered", "visible"]);
+  const {
+    getPrefixCls,
+    direction,
+    tag: tagContext
+  } = React.useContext(ConfigContext);
+  const [visible, setVisible] = React.useState(true);
+  const domProps = omit(props, ['closeIcon', 'closable']);
+  // Warning for deprecated usage
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Tag');
+    warning.deprecated(!('visible' in tagProps), 'visible', 'visible && <Tag />');
+  }
+  React.useEffect(() => {
+    if (deprecatedVisible !== undefined) {
+      setVisible(deprecatedVisible);
+    }
+  }, [deprecatedVisible]);
+  const isPreset = isPresetColor(color);
+  const isStatus = isPresetStatusColor(color);
+  const isInternalColor = isPreset || isStatus;
+  const tagStyle = Object.assign(Object.assign({
+    backgroundColor: color && !isInternalColor ? color : undefined
+  }, tagContext === null || tagContext === void 0 ? void 0 : tagContext.style), style);
+  const prefixCls = getPrefixCls('tag', customizePrefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+  // Style
+  const tagClassName = classNames(prefixCls, tagContext === null || tagContext === void 0 ? void 0 : tagContext.className, {
+    [`${prefixCls}-${color}`]: isInternalColor,
+    [`${prefixCls}-has-color`]: color && !isInternalColor,
+    [`${prefixCls}-hidden`]: !visible,
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+    [`${prefixCls}-borderless`]: !bordered
+  }, className, rootClassName, hashId, cssVarCls);
+  const handleCloseClick = e => {
+    e.stopPropagation();
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    setVisible(false);
+  };
+  const [, mergedCloseIcon] = useClosable(pickClosable(tagProps), pickClosable(tagContext), {
+    closable: false,
+    closeIconRender: iconNode => {
+      const replacement = /*#__PURE__*/React.createElement("span", {
+        className: `${prefixCls}-close-icon`,
+        onClick: handleCloseClick
+      }, iconNode);
+      return replaceElement(iconNode, replacement, originProps => ({
+        onClick: e => {
+          var _a;
+          (_a = originProps === null || originProps === void 0 ? void 0 : originProps.onClick) === null || _a === void 0 ? void 0 : _a.call(originProps, e);
+          handleCloseClick(e);
+        },
+        className: classNames(originProps === null || originProps === void 0 ? void 0 : originProps.className, `${prefixCls}-close-icon`)
+      }));
+    }
+  });
+  const isNeedWave = typeof props.onClick === 'function' || children && children.type === 'a';
+  const iconNode = icon || null;
+  const kids = iconNode ? (/*#__PURE__*/React.createElement(React.Fragment, null, iconNode, children && /*#__PURE__*/React.createElement("span", null, children))) : children;
+  const tagNode = /*#__PURE__*/React.createElement("span", Object.assign({}, domProps, {
+    ref: ref,
+    className: tagClassName,
+    style: tagStyle
+  }), kids, mergedCloseIcon, isPreset && /*#__PURE__*/React.createElement(PresetCmp, {
+    key: "preset",
+    prefixCls: prefixCls
+  }), isStatus && /*#__PURE__*/React.createElement(StatusCmp, {
+    key: "status",
+    prefixCls: prefixCls
+  }));
+  return wrapCSSVar(isNeedWave ? /*#__PURE__*/React.createElement(Wave, {
+    component: "Tag"
+  }, tagNode) : tagNode);
+});
+const Tag$1 = InternalTag;
+if (process.env.NODE_ENV !== 'production') {
+  Tag$1.displayName = 'Tag';
+}
+Tag$1.CheckableTag = CheckableTag;
+
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-var classes$5 = {"button":"Button-module__button___18Bed","size_large":"Button-module__size_large___Gohrm","shape_circle":"Button-module__shape_circle___1CtM2","size_normal":"Button-module__size_normal___Ym8Ah","size_small":"Button-module__size_small___mGHht","type_primary":"Button-module__type_primary___WbRH0","variant_subtle":"Button-module__variant_subtle___G4bvs","variant_text":"Button-module__variant_text___r7oFS","variant_link":"Button-module__variant_link___mo-UB","type_secondary":"Button-module__type_secondary___HXHdT","type_critical":"Button-module__type_critical___Y0vJw","onHoverUnderline":"Button-module__onHoverUnderline___OyHzj"};
+var classes$6 = {"button":"Button-module__button___18Bed","size_large":"Button-module__size_large___Gohrm","shape_circle":"Button-module__shape_circle___1CtM2","size_normal":"Button-module__size_normal___Ym8Ah","size_small":"Button-module__size_small___mGHht","type_primary":"Button-module__type_primary___WbRH0","variant_subtle":"Button-module__variant_subtle___G4bvs","variant_text":"Button-module__variant_text___r7oFS","variant_link":"Button-module__variant_link___mo-UB","type_secondary":"Button-module__type_secondary___HXHdT","type_critical":"Button-module__type_critical___Y0vJw","onHoverUnderline":"Button-module__onHoverUnderline___OyHzj"};
 
 const Button = (props) => {
-    const { type = "primary", variant = "default", size = "normal", shape = "default", className = "", icon = null, iconPosition = "start", children, onClick = () => { }, href = "", disabled = false, loading = false, onHoverUnderline = false, id = "", name = "" } = props;
+    const { type = "primary", variant = "default", size = "normal", shape = "default", className = "", icon = null, iconPosition = "start", children, onClick = () => { }, href = "", disabled = false, loading = false, onHoverUnderline = false, } = props;
     const buttonMap = {
         default: "primary",
         subtle: "default",
@@ -22745,10 +23094,10 @@ const Button = (props) => {
         normal: "middle", // Map "default" to "middle"
         large: "large",
     };
-    return (jsx(Button$2, { id: id, name: name, className: clsx(classes$5.button, classes$5[`size_${size}`], classes$5[`variant_${variant}`], classes$5[`shape_${shape}`], classes$5[`type_${type}`], `size_${size}`, `variant_${variant}`, `shape_${shape}`, `type_${type}`, className, {
+    return (jsx(Button$2, { className: clsx(classes$6.button, classes$6[`size_${size}`], classes$6[`variant_${variant}`], classes$6[`shape_${shape}`], classes$6[`type_${type}`], `size_${size}`, `variant_${variant}`, `shape_${shape}`, `type_${type}`, className, {
             "tw-cursor-not-allowed": disabled,
             "tw-opacity-40": disabled,
-        }, disabled && classes$5.disabled, onHoverUnderline && classes$5.onHoverUnderline), icon: icon, iconPosition: iconPosition, onClick: onClick, size: sizeMap[size], shape: shape, type: buttonMap[variant], disabled: disabled, loading: loading, href: href || undefined, "data-testid": 'lumina-button', children: children }));
+        }, disabled && classes$6.disabled, onHoverUnderline && classes$6.onHoverUnderline), icon: icon, iconPosition: iconPosition, onClick: onClick, size: sizeMap[size], shape: shape, type: buttonMap[variant], disabled: disabled, loading: loading, href: href || undefined, "data-testid": 'lumina-button', children: children }));
 };
 Button.propTypes = {
     type: PropTypes.oneOf(["primary", "secondary", "critical"]),
@@ -22766,10 +23115,10 @@ Button.propTypes = {
 };
 Button.displayName = "Button";
 
-var classes$4 = {"switch":"Switch-module__switch___PKzsW"};
+var classes$5 = {"switch":"Switch-module__switch___PKzsW"};
 
 const Switch = ({ className, onChange = () => { }, size = "default", disabled = false, checked = false, ...rest }) => {
-    return (jsx(Switch$1, { className: clsx(className, classes$4.switch, classes$4[size]), onChange: onChange, size: size, disabled: disabled, checked: checked, ...rest }));
+    return (jsx(Switch$1, { className: clsx(className, classes$5.switch, classes$5[size]), onChange: onChange, size: size, disabled: disabled, checked: checked, ...rest }));
 };
 Switch.propTypes = {
     onChange: PropTypes.func,
@@ -22779,13 +23128,13 @@ Switch.propTypes = {
 };
 Switch.displayName = "Switch";
 
-var classes$3 = {"modal":"Modal-module__modal___yNG-7"};
+var classes$4 = {"modal":"Modal-module__modal___yNG-7"};
 
 const Close = ({ size = 14, color = "#B6BAC3", ...rest }) => {
     return (jsx("svg", { width: size, height: size, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsx("path", { d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L8.41421 7L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L7 8.41421L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z", fill: color }) }));
 };
 const Modal = ({ className = "", title = "", children, open = false, handleOk, handleCancel, okText = "", cancelText = "", closeIcon = jsx(Close, { color: "#6B7280" }), bodyClassName = "modalBody", outsideClickDisable = false, hideCross = false, okButtonLoading = false, okButtonDisabled = false, variant = "primary", okBtnClasses = "", cancelButtonAnalytics = {}, okButtonAnalytics = {}, footerMargintopDisable = true, ...rest }) => {
-    return (jsx("div", { onClick: (e) => e.stopPropagation(), children: jsx(Modal$1, { title: title, open: open, onOk: handleOk, onCancel: handleCancel, className: clsx(classes$3.modal, className, {
+    return (jsx("div", { onClick: (e) => e.stopPropagation(), children: jsx(Modal$1, { title: title, open: open, onOk: handleOk, onCancel: handleCancel, className: clsx(classes$4.modal, className, {
                 footerMargintopDisable: footerMargintopDisable,
             }), okText: okText, cancelText: cancelText, closeIcon: closeIcon, closable: !hideCross, maskClosable: !outsideClickDisable, footer: okText || cancelText ? (jsxs("div", { className: clsx({
                     primaryFooter: variant === "primary",
@@ -22793,17 +23142,17 @@ const Modal = ({ className = "", title = "", children, open = false, handleOk, h
                 }), children: [cancelText && (jsx(Button, { onClick: handleCancel, type: "secondary", className: "cancelBtn", variant: 'subtle', ...cancelButtonAnalytics, children: cancelText })), okText && (jsx(Button, { onClick: handleOk, className: clsx(okBtnClasses, "okBtn"), loading: okButtonLoading, disabled: okButtonDisabled, ...okButtonAnalytics, children: okText }))] })) : null, ...rest, children: jsx("div", { className: bodyClassName, children: children }) }) }));
 };
 
-var classes$2 = {"light":"Tooltip-module__light___KHW7i"};
+var classes$3 = {"light":"Tooltip-module__light___KHW7i"};
 
 const Tooltip = ({ children, title = "", placement = "top", color = "#1F2937", className, mode = "dark", ...rest }) => {
-    return (jsx(Tooltip$1, { className: className, color: color, title: title, placement: placement, overlayClassName: mode === "light" ? classes$2.light : "", ...rest, children: children }));
+    return (jsx(Tooltip$1, { className: className, color: color, title: title, placement: placement, overlayClassName: mode === "light" ? classes$3.light : "", ...rest, children: children }));
 };
 
-var classes$1 = {"checkbox":"Checkbox-module__checkbox___D0D4S","size_small":"Checkbox-module__size_small___xrnwa","size_medium":"Checkbox-module__size_medium___V0L7S","size_large":"Checkbox-module__size_large___3FuMo","type_checked":"Checkbox-module__type_checked___pQSFb","disabled":"Checkbox-module__disabled___WagIC","type_unchecked":"Checkbox-module__type_unchecked___nhedk","variant_normal":"Checkbox-module__variant_normal___2gugg","variant_emphasized":"Checkbox-module__variant_emphasized___tLXw0","variant_indeterminate":"Checkbox-module__variant_indeterminate___swxxo"};
+var classes$2 = {"checkbox":"Checkbox-module__checkbox___D0D4S","size_small":"Checkbox-module__size_small___xrnwa","size_medium":"Checkbox-module__size_medium___V0L7S","size_large":"Checkbox-module__size_large___3FuMo","type_checked":"Checkbox-module__type_checked___pQSFb","disabled":"Checkbox-module__disabled___WagIC","type_unchecked":"Checkbox-module__type_unchecked___nhedk","variant_normal":"Checkbox-module__variant_normal___2gugg","variant_emphasized":"Checkbox-module__variant_emphasized___tLXw0","variant_indeterminate":"Checkbox-module__variant_indeterminate___swxxo"};
 
 const Checkbox = (props) => {
     const { className = "", children = null, onChange = () => { }, checked = false, disabled = false, size = "small", variant = "normal", indeterminate = false, ...rest } = props;
-    return (jsx(Checkbox$1, { className: clsx(classes$1.checkbox, classes$1[`size_${size}`], classes$1[`variant_${variant}`], checked ? classes$1.type_checked : classes$1.type_unchecked, disabled && classes$1.disabled, indeterminate && classes$1[`variant_indeterminate`], className), onChange: onChange, checked: checked, disabled: disabled, indeterminate: indeterminate, ...rest, children: children }));
+    return (jsx(Checkbox$1, { className: clsx(classes$2.checkbox, classes$2[`size_${size}`], classes$2[`variant_${variant}`], checked ? classes$2.type_checked : classes$2.type_unchecked, disabled && classes$2.disabled, indeterminate && classes$2[`variant_indeterminate`], className), onChange: onChange, checked: checked, disabled: disabled, indeterminate: indeterminate, ...rest, children: children }));
 };
 Checkbox.propTypes = {
     checked: PropTypes.bool,
@@ -22817,9 +23166,9 @@ Checkbox.propTypes = {
 };
 Checkbox.displayName = "Checkbox";
 
-var classes = {"radio":"Radio-module__radio___qhO7H","size_small":"Radio-module__size_small___SUyKK","size_medium":"Radio-module__size_medium___ew0Kp","size_large":"Radio-module__size_large___DOsUo","type_checked":"Radio-module__type_checked___amYVs","disabled":"Radio-module__disabled___RZ0be","type_unchecked":"Radio-module__type_unchecked___GQtug","variant_normal":"Radio-module__variant_normal___fJgIP","variant_emphasized":"Radio-module__variant_emphasized___Ih1mU"};
+var classes$1 = {"radio":"Radio-module__radio___qhO7H","size_small":"Radio-module__size_small___SUyKK","size_medium":"Radio-module__size_medium___ew0Kp","size_large":"Radio-module__size_large___DOsUo","type_checked":"Radio-module__type_checked___amYVs","disabled":"Radio-module__disabled___RZ0be","type_unchecked":"Radio-module__type_unchecked___GQtug","variant_normal":"Radio-module__variant_normal___fJgIP","variant_emphasized":"Radio-module__variant_emphasized___Ih1mU"};
 
-const Radio = ({ checked = true, className = "", size = "small", variant = "normal", children, onChange = () => { }, disabled = false, extra = null, ...rest }) => (jsxs(Fragment, { children: [jsx(Radio$1, { className: clsx(classes.radio, classes[`size_${size}`], classes[`variant_${variant}`], checked ? classes.type_checked : classes.type_unchecked, disabled && classes.disabled, className), onChange: onChange, checked: checked, disabled: disabled, ...rest, children: children }), checked && extra] }));
+const Radio = ({ checked = true, className = "", size = "small", variant = "normal", children, onChange = () => { }, disabled = false, extra = null, ...rest }) => (jsxs(Fragment, { children: [jsx(Radio$1, { className: clsx(classes$1.radio, classes$1[`size_${size}`], classes$1[`variant_${variant}`], checked ? classes$1.type_checked : classes$1.type_unchecked, disabled && classes$1.disabled, className), onChange: onChange, checked: checked, disabled: disabled, ...rest, children: children }), checked && extra] }));
 Radio.propTypes = {
     checked: PropTypes.bool,
     className: PropTypes.string,
@@ -22832,5 +23181,13 @@ Radio.propTypes = {
 };
 Radio.displayName = "Radio";
 
-export { Button, Checkbox, Modal, Radio, Switch, Tooltip };
+var classes = {"tag":"Tag-module__tag___0Cfjz","small":"Tag-module__small___-vgjh","success":"Tag-module__success___Lq3l5","blue":"Tag-module__blue___OZprV","warning":"Tag-module__warning___QjEQv","processing":"Tag-module__processing___IKFXM","bookingConfirmed":"Tag-module__bookingConfirmed___j8eIs","bookingRescheduled":"Tag-module__bookingRescheduled___tZRjg","bookingRescheduledPending":"Tag-module__bookingRescheduledPending___4N6Vl","failed":"Tag-module__failed___3CqXv","bookingPending":"Tag-module__bookingPending___3i6Ai"};
+
+const Tag = (props) => {
+    const { type = "success", className = "", title = "", icon = null, size = "", ...rest } = props;
+    return (jsx(Tag$1, { className: clsx(classes.tag, size === "small" && classes.small, classes[type], className), icon: icon, ...rest, children: title }));
+};
+Tag.displayName = "Tag";
+
+export { Button, Checkbox, Modal, Radio, Switch, Tag, Tooltip };
 //# sourceMappingURL=index.js.map