@mailstep/design-system 0.6.35 → 0.6.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.35",
+  "version": "0.6.36",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Elements/Badge/Badge.d.ts

@@ -3,10 +3,9 @@ export type Props = {
     children?: React.ReactNode;
     label?: string | number | JSX.Element;
     color?: string;
-    size?: string | number;
+    size?: 'small' | 'default';
     childWidth?: string | number;
     topPosition?: boolean;
-    fontSize?: number;
 };
-declare const Badge: ({ children, color, size, fontSize, label, childWidth, topPosition }: Props) => JSX.Element;
+declare const Badge: ({ children, color, size, label, childWidth, topPosition }: Props) => JSX.Element;
 export default Badge;

package/ui/Elements/Badge/Badge.js

@@ -5,21 +5,25 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css, useTheme } from '@xstyled/styled-components';
 import { th } from '@xstyled/styled-components';
-var Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  color: white;\n  background-color: ", ";\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n\n  .label {\n    font-family: ", ";\n    font-weight: 600;\n    vertical-align: middle;\n    text-align: center;\n    font-size: ", ";\n  }\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(", ");\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  color: white;\n  background-color: ", ";\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n\n  .label {\n    font-family: ", ";\n    font-weight: 600;\n    vertical-align: middle;\n    text-align: center;\n    font-size: ", ";\n  }\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(", ");\n"])), function (_a) {
-    var color = _a.color;
-    return color;
-}, function (_a) {
+import { useMemo } from 'react';
+var Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ", ";\n  padding: ", ";\n  color: white;\n  gap: 10px;\n  background-color: ", ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  z-index: 1;\n"], ["\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ", ";\n  padding: ", ";\n  color: white;\n  gap: 10px;\n  background-color: ", ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  z-index: 1;\n"])), function (_a) {
     var size = _a.size;
-    return size;
+    return (size === 'small' ? '16px' : '24px');
 }, function (_a) {
     var size = _a.size;
-    return size;
+    return (size === 'small' ? '0 5px' : '3px 8px');
+}, function (_a) {
+    var color = _a.color;
+    return color;
 }, th('fonts.primary'), function (_a) {
-    var fontSize = _a.fontSize;
-    return "".concat(fontSize, "px");
+    var size = _a.size;
+    return (size === 'small' ? '12px' : '14px');
+}, function (_a) {
+    var topPosition = _a.topPosition;
+    return topPosition && '-15%';
 }, function (_a) {
     var topPosition = _a.topPosition;
-    return (topPosition ? '75%, -75%' : '50%, -50%');
+    return (topPosition ? '50%' : '100%');
 });
 var RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", ";\n"], ["\n  position: relative;\n  ", ";\n"])), function (_a) {
     var width = _a.width;
@@ -27,14 +31,16 @@ var RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemp
         ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), width) : '';
 });
 var Badge = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'red2' : _b, _c = _a.size, size = _c === void 0 ? 6 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 10 : _d, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition;
+    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'red1' : _b, _c = _a.size, size = _c === void 0 ? 'default' : _c, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition;
     var theme = useTheme();
     var themeColor = th.color(color)({ theme: theme });
-    var themeSize = th.fontSize(size)({ theme: theme });
+    var badgeLabel = useMemo(function () {
+        return typeof label === 'number' ? (label >= 100 ? '99+' : label) : label;
+    }, [label]);
     if (!label || (typeof label === 'number' && label <= 0)) {
         return _jsx(_Fragment, { children: children });
     }
-    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: themeSize, topPosition: topPosition, fontSize: fontSize, children: _jsx("div", { className: "label", children: label }) }), children] }));
+    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: size, topPosition: topPosition, children: _jsx("div", { className: "label", children: badgeLabel }) }), children] }));
 };
 export default Badge;
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/Badge/stories/Badge.stories.d.ts

@@ -2,11 +2,12 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ children, color, size, fontSize, label, childWidth, topPosition }: import("../Badge").Props) => JSX.Element;
+    component: ({ children, color, size, label, childWidth, topPosition }: import("../Badge").Props) => JSX.Element;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Colored: Story;
+export declare const Default: Story;
+export declare const DefaultWithLabel: Story;
+export declare const SmallWithLabel: Story;

package/ui/Elements/Badge/stories/Badge.stories.js

@@ -6,19 +6,28 @@ var meta = {
     argTypes: {},
 };
 export default meta;
-export var Primary = {
+export var Default = {
     args: {
         children: '😀',
-        size: 1,
+        size: 'default',
         childWidth: '30px',
     },
 };
-export var Colored = {
+export var DefaultWithLabel = {
+    args: {
+        children: '😀',
+        label: '10',
+        size: 'default',
+        childWidth: '30px',
+    },
+};
+export var SmallWithLabel = {
     args: {
         children: '😃',
         label: '10',
-        size: 4,
+        size: 'small',
         color: 'darkGreen',
+        topPosition: true,
         childWidth: '50px',
     },
 };

package/ui/index.es.js

@@ -2,7 +2,7 @@ var Gj = Object.defineProperty;
 var zj = (e, t, r) => t in e ? Gj(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
 var Ux = (e, t, r) => (zj(e, typeof t != "symbol" ? t + "" : t, r), r);
 import * as Le from "react";
-import fe, { useState as He, useEffect as bt, useMemo as at, useContext as Mc, useRef as Ve, useLayoutEffect as Ud, createContext as hm, useCallback as ke, memo as xw, forwardRef as pm, useId as xM, createElement as Yj, Component as EM, Fragment as G7, useReducer as Zj } from "react";
+import fe, { useState as He, useEffect as bt, useMemo as it, useContext as Mc, useRef as Ve, useLayoutEffect as Ud, createContext as hm, useCallback as ke, memo as xw, forwardRef as pm, useId as xM, createElement as Yj, Component as EM, Fragment as G7, useReducer as Zj } from "react";
 import * as Jj from "react-dom";
 import SM, { findDOMNode as Uj, createPortal as Xj, unstable_batchedUpdates as $j } from "react-dom";
 import Ti, { createGlobalStyle as Ew, ThemeContext as qj, css as Qj, keyframes as gm, ThemeProvider as Kj } from "styled-components";
@@ -2532,7 +2532,7 @@ const EE = (e) => (t) => (r) => {
   return i.push(t.slice(n, t.length)), i;
 }, gr = (e, t) => (r, n) => {
   const i = t();
-  return at(
+  return it(
     () => e(r, n)({ theme: i }),
     [r, n, i]
   );
@@ -12160,7 +12160,7 @@ const to = /* @__PURE__ */ ho(Oae), Rd = (e, t) => {
 }) => {
   const _ = ke(() => {
     m ? m() : n && n();
-  }, [m, n]), V = at(() => ({
+  }, [m, n]), V = it(() => ({
     width: Fae[v]
   }), [v]), F = tf({
     onClose: _,
@@ -16877,38 +16877,35 @@ const Hle = Ti(ft.div)`
   hoverColorBack: o,
   ...l
 }) => /* @__PURE__ */ b.jsx(b.Fragment, { children: /* @__PURE__ */ b.jsx(tce, { size: t || 34, className: i, $colorBack: n || "neutral20", $colorFront: r || "blue2", $hoverColorBack: o || "lightGray7", ...l, children: e ? /* @__PURE__ */ b.jsx("img", { src: e, width: t, height: t }) : /* @__PURE__ */ b.jsx(aU, {}) }) }), rce = ie.div`
+  min-width: 12px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 2px;
+  height: ${({
+  size: e
+}) => e === "small" ? "16px" : "24px"};
+  padding: ${({
+  size: e
+}) => e === "small" ? "0 5px" : "3px 8px"};
   color: white;
+  gap: 10px;
   background-color: ${({
   color: e
 }) => e};
-  border-radius: 50%;
-  width: ${({
-  size: e
-}) => e};
-  height: ${({
+  border-radius: 29px;
+  line-height: 15.6px;
+  font-family: ${te("fonts.primary")};
+  font-size: ${({
   size: e
-}) => e};
-
-  .label {
-    font-family: ${te("fonts.primary")};
-    font-weight: 600;
-    vertical-align: middle;
-    text-align: center;
-    font-size: ${({
-  fontSize: e
-}) => `${e}px`};
-  }
-
+}) => e === "small" ? "12px" : "14px"};
+  font-weight: semiBold;
   position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(${({
+  top: ${({
+  topPosition: e
+}) => e && "-15%"};
+  left: ${({
   topPosition: e
-}) => e ? "75%, -75%" : "50%, -50%"});
+}) => e ? "50%" : "100%"};
+  z-index: 1;
 `, nce = ie.div`
   position: relative;
   ${({
@@ -16918,20 +16915,17 @@ const Hle = Ti(ft.div)`
         ` : ""};
 `, _Se = ({
   children: e,
-  color: t = "red2",
-  size: r = 6,
-  fontSize: n = 10,
-  label: i,
-  childWidth: o,
-  topPosition: l
+  color: t = "red1",
+  size: r = "default",
+  label: n,
+  childWidth: i,
+  topPosition: o
 }) => {
-  const c = xt(), u = te.color(t)({
-    theme: c
-  }), f = te.fontSize(r)({
-    theme: c
-  });
-  return !i || typeof i == "number" && i <= 0 ? /* @__PURE__ */ b.jsx(b.Fragment, { children: e }) : /* @__PURE__ */ b.jsxs(nce, { width: o, children: [
-    /* @__PURE__ */ b.jsx(rce, { color: u, size: f, topPosition: l, fontSize: n, children: /* @__PURE__ */ b.jsx("div", { className: "label", children: i }) }),
+  const l = xt(), c = te.color(t)({
+    theme: l
+  }), u = it(() => typeof n == "number" && n >= 100 ? "99+" : n, [n]);
+  return !n || typeof n == "number" && n <= 0 ? /* @__PURE__ */ b.jsx(b.Fragment, { children: e }) : /* @__PURE__ */ b.jsxs(nce, { width: i, children: [
+    /* @__PURE__ */ b.jsx(rce, { color: c, size: r, topPosition: o, children: /* @__PURE__ */ b.jsx("div", { className: "label", children: u }) }),
     e
   ] });
 }, ice = ie(ft.div)`
@@ -17459,7 +17453,7 @@ const Ice = (e, t) => Object.entries(e).map(([r, n]) => `${n} ${r}`).join(", "),
       return;
     }
     e && e(p, t);
-  }, [t, e, l]), u = n ?? 1, f = Math.max(Math.ceil(r / t), 1), h = at(() => {
+  }, [t, e, l]), u = n ?? 1, f = Math.max(Math.ceil(r / t), 1), h = it(() => {
     const p = Array.from({
       length: f
     }, (v, m) => m + 1);
@@ -22486,7 +22480,7 @@ const lhe = ohe(she), che = ie(ft.div)`
       window.removeEventListener("resize", f);
     };
   }, []), {
-    gridHeight: at(() => {
+    gridHeight: it(() => {
       const f = e - r - i;
       if (f !== e && f > 360)
         return f - 25;
@@ -28873,7 +28867,7 @@ const Y2e = (e, t) => e && e.getTime && t && t.getTime && e.getTime() === t.getT
   } = e, [f, h] = He((i == null ? void 0 : i[0]) ?? void 0), [p, v] = He((i == null ? void 0 : i[1]) ?? void 0), m = o ? "HH:mm" : !1, w = vt._({
     id: "dataGrid.filterCell",
     message: "Type to filter"
-  }), C = fe.useMemo(() => [typeof (i == null ? void 0 : i[0]) == "string" ? new Date(i[0]) : (i == null ? void 0 : i[0]) || void 0, typeof (i == null ? void 0 : i[1]) == "string" ? new Date(i[1]) : (i == null ? void 0 : i[1]) || void 0], [i]), S = at(() => {
+  }), C = fe.useMemo(() => [typeof (i == null ? void 0 : i[0]) == "string" ? new Date(i[0]) : (i == null ? void 0 : i[0]) || void 0, typeof (i == null ? void 0 : i[1]) == "string" ? new Date(i[1]) : (i == null ? void 0 : i[1]) || void 0], [i]), S = it(() => {
     if (C[0] && C[1])
       return C;
     const V = /* @__PURE__ */ new Date();
@@ -30878,7 +30872,7 @@ var TF = function(t) {
     zIndex: 1
   };
 }, ome = function(t) {
-  var r = t.appendTo, n = t.children, i = t.controlElement, o = t.innerProps, l = t.menuPlacement, c = t.menuPosition, u = Ve(null), f = Ve(null), h = He(TF(l)), p = gn(h, 2), v = p[0], m = p[1], w = at(function() {
+  var r = t.appendTo, n = t.children, i = t.controlElement, o = t.innerProps, l = t.menuPlacement, c = t.menuPosition, u = Ve(null), f = Ve(null), h = He(TF(l)), p = gn(h, 2), v = p[0], m = p[1], w = it(function() {
     return {
       setPortalPlacement: m
     };
@@ -31485,9 +31479,9 @@ var u3e = process.env.NODE_ENV === "production" ? {
     return "".concat(n).concat(r ? " for search term " + r : "", ".");
   }
 }, h3e = function(t) {
-  var r = t.ariaSelection, n = t.focusedOption, i = t.focusedValue, o = t.focusableOptions, l = t.isFocused, c = t.selectValue, u = t.selectProps, f = t.id, h = t.isAppleDevice, p = u.ariaLiveMessages, v = u.getOptionLabel, m = u.inputValue, w = u.isMulti, C = u.isOptionDisabled, S = u.isSearchable, x = u.menuIsOpen, I = u.options, O = u.screenReaderStatus, T = u.tabSelectsValue, M = u.isLoading, L = u["aria-label"], B = u["aria-live"], j = at(function() {
+  var r = t.ariaSelection, n = t.focusedOption, i = t.focusedValue, o = t.focusableOptions, l = t.isFocused, c = t.selectValue, u = t.selectProps, f = t.id, h = t.isAppleDevice, p = u.ariaLiveMessages, v = u.getOptionLabel, m = u.inputValue, w = u.isMulti, C = u.isOptionDisabled, S = u.isSearchable, x = u.menuIsOpen, I = u.options, O = u.screenReaderStatus, T = u.tabSelectsValue, M = u.isLoading, L = u["aria-label"], B = u["aria-live"], j = it(function() {
     return ze(ze({}, f3e), p || {});
-  }, [p]), H = at(function() {
+  }, [p]), H = it(function() {
     var z = "";
     if (r && j.onChange) {
       var re = r.option, de = r.options, me = r.removedValue, ue = r.removedValues, Y = r.value, U = function(ce) {
@@ -31502,7 +31496,7 @@ var u3e = process.env.NODE_ENV === "production" ? {
       z = j.onChange(q);
     }
     return z;
-  }, [r, j, C, c, v]), Z = at(function() {
+  }, [r, j, C, c, v]), Z = it(function() {
     var z = "", re = n || i, de = !!(n && c && c.includes(n));
     if (re && j.onFocus) {
       var me = {
@@ -31518,7 +31512,7 @@ var u3e = process.env.NODE_ENV === "production" ? {
       z = j.onFocus(me);
     }
     return z;
-  }, [n, i, v, C, j, o, c, h]), _ = at(function() {
+  }, [n, i, v, C, j, o, c, h]), _ = it(function() {
     var z = "";
     if (x && I.length && !M && j.onFilter) {
       var re = O({
@@ -31530,7 +31524,7 @@ var u3e = process.env.NODE_ENV === "production" ? {
       });
     }
     return z;
-  }, [o, m, x, j, I, O, M]), V = (r == null ? void 0 : r.action) === "initial-input-focus", F = at(function() {
+  }, [o, m, x, j, I, O, M]), V = (r == null ? void 0 : r.action) === "initial-input-focus", F = it(function() {
     var z = "";
     if (j.guidance) {
       var re = i ? "value" : x ? "menu" : "input";
@@ -33679,7 +33673,7 @@ const n4e = ie.div`
   });
 }, A4e = (e = "form", t = "default", r = "default", n = "default", i, o, l) => {
   const c = xt();
-  return at(() => {
+  return it(() => {
     const u = {
       ValueContainer: c4e
     };
@@ -33735,9 +33729,9 @@ const n4e = ie.div`
     typeof l == "function" && (l == null || l(jT));
   }, [l]), ue = j === "search" ? "search" : Z || void 0, Y = T && O && V ? V - 30 : V, [U, se, oe] = A4e(M, L, B, j, I, O, T), ge = re ? a4e : i4e;
   let ae;
-  const q = at(() => F || ((pe) => pe == null ? void 0 : pe.value), [F]);
+  const q = it(() => F || ((pe) => pe == null ? void 0 : pe.value), [F]);
   Array.isArray(r) ? (ae = (i || n).filter((pe) => r.includes(q(pe))), ae = ae != null && ae.length ? ae : null) : r !== void 0 && (ae = (i || n).find((pe) => q(pe) === r) || null);
-  const ne = xt(), ce = at(() => o ? (pe) => o(pe) : void 0, [o]);
+  const ne = xt(), ce = it(() => o ? (pe) => o(pe) : void 0, [o]);
   return /* @__PURE__ */ b.jsxs(Th, { spaceAround: v, className: x, children: [
     /* @__PURE__ */ b.jsxs(n4e, { children: [
       e && /* @__PURE__ */ b.jsx(Vm, { htmlFor: t, children: e }),
@@ -33917,7 +33911,7 @@ const nw = `_create_${N4e()}_`, _4e = tW(), L4e = (e, t) => (e == null ? void 0
         value: v7(z)
       }
     });
-  }, [t, n]), _ = ["onValueChange", "placeholder", "options", "loadOptions", "asyncLoadMinChars"], F = c && !f ? u : h, Q = at(() => {
+  }, [t, n]), _ = ["onValueChange", "placeholder", "options", "loadOptions", "asyncLoadMinChars"], F = c && !f ? u : h, Q = it(() => {
     if (!I)
       return;
     const z = m ? w : M;
@@ -33956,7 +33950,7 @@ const nw = `_create_${N4e()}_`, _4e = tW(), L4e = (e, t) => (e == null ? void 0
 }], W4e = ({
   ...e
 }) => {
-  const t = at(() => j4e(), []);
+  const t = it(() => j4e(), []);
   return /* @__PURE__ */ b.jsx($F, { options: t, ...e });
 }, JT = (e) => typeof e < "u", ah = (e) => ({
   flexBasis: e.flexBasis,
@@ -35418,7 +35412,7 @@ qv.exports;
       }
       function g4(a, s, d) {
         function g() {
-          for (var A = arguments.length, k = Ft(A), P = A, N = it(g); P--; )
+          for (var A = arguments.length, k = Ft(A), P = A, N = at(g); P--; )
             k[P] = arguments[P];
           var X = A < 3 && k[0] !== N && k[A - 1] !== N ? [] : ce(k, N);
           return A -= X.length, A < d ? c1(a, s, yu, g.placeholder, W, k, X, W, W, d - A) : r(this && this !== Qr && this instanceof g ? y : a, this, k);
@@ -35469,7 +35463,7 @@ qv.exports;
           for (var Re = arguments.length, _e = Ft(Re), Gt = Re; Gt--; )
             _e[Gt] = arguments[Gt];
           if (Ce)
-            var zt = it(J), Dr = Y(_e, zt);
+            var zt = at(J), Dr = Y(_e, zt);
           if (g && (_e = o1(_e, g, y, Ce)), A && (_e = sn(_e, A, k, Ce)), Re -= Dr, Ce && Re < X)
             return c1(a, s, yu, J.placeholder, d, _e, ce(_e, zt), P, N, X - Re);
           var st = he ? d : this, Sr = be ? st[a] : a;
@@ -35698,7 +35692,7 @@ qv.exports;
         }
         return s;
       }
-      function it(a) {
+      function at(a) {
         return (Vt.call(E, "placeholder") ? E : a).placeholder;
       }
       function Xe() {
@@ -37164,14 +37158,14 @@ function print() { __p += __j.call(arguments, '') }
       }, Q1 = pt(function(a, s, d) {
         var g = lr;
         if (d.length) {
-          var y = ce(d, it(Q1));
+          var y = ce(d, at(Q1));
           g |= li;
         }
         return Ha(a, g, s, d, y);
       }), q2 = pt(function(a, s, d) {
         var g = lr | Fr;
         if (d.length) {
-          var y = ce(d, it(q2));
+          var y = ce(d, at(q2));
           g |= li;
         }
         return Ha(s, g, a, d, y);
@@ -37190,9 +37184,9 @@ function print() { __p += __j.call(arguments, '') }
           return r(a, this, g);
         });
       }), K1 = pt(function(a, s) {
-        return Ha(a, li, W, s, ce(s, it(K1)));
+        return Ha(a, li, W, s, ce(s, at(K1)));
       }), Q2 = pt(function(a, s) {
-        return Ha(a, la, W, s, ce(s, it(Q2)));
+        return Ha(a, la, W, s, ce(s, at(Q2)));
       }), $5 = ma(function(a, s) {
         return Ha(a, Zn, W, W, W, s);
       }), q5 = Hl(Uo), Q5 = Hl(function(a, s) {
@@ -37582,7 +37576,7 @@ const Cs = /* @__PURE__ */ ho(q4e), YSe = ({
   appearanceMap: r,
   size: n
 }) => {
-  const i = at(() => t[e] ? t[e]() : e, [t, e]), o = at(() => ({
+  const i = it(() => t[e] ? t[e]() : e, [t, e]), o = it(() => ({
     appearance: r[e]
   }), [r, e]);
   return i ? /* @__PURE__ */ b.jsx(f6e, { children: /* @__PURE__ */ b.jsx(d6e, { className: "cell", ...o, size: n, prefix: "grid", children: i }) }) : null;
@@ -37646,7 +37640,7 @@ const Cs = /* @__PURE__ */ ho(q4e), YSe = ({
 }) => {
   const n = ke(() => {
     oh.isFunction(t) && t();
-  }, [t]), i = at(() => {
+  }, [t]), i = it(() => {
     const o = [];
     return e ? o.push(/* @__PURE__ */ b.jsx(XT, { icon: "pen", onClick: n, linkTo: r }, "edit")) : o.push(/* @__PURE__ */ b.jsx(XT, { icon: "chevronRight", onClick: n, linkTo: r }, "read")), o;
   }, [e, n, r]);
@@ -37675,7 +37669,7 @@ const Cs = /* @__PURE__ */ ho(q4e), YSe = ({
   const i = oh.isFunction(e == null ? void 0 : e.canRowEdit) ? e == null ? void 0 : e.canRowEdit(r) : e == null ? void 0 : e.canRowEdit, o = oh.isFunction(e == null ? void 0 : e.canRowRead) ? e == null ? void 0 : e.canRowRead(r) : e == null ? void 0 : e.canRowRead, l = ke(() => {
     const u = i ? "row_edit" : "row_read";
     n && n(r == null ? void 0 : r.id, u, r);
-  }, [i, n, r]), c = at(() => {
+  }, [i, n, r]), c = it(() => {
     var f;
     const u = i ? "edit" : "read";
     return (f = e == null ? void 0 : e.createLink) == null ? void 0 : f.call(e, {
@@ -37691,7 +37685,7 @@ const Cs = /* @__PURE__ */ ho(q4e), YSe = ({
     columnsDefinitions: n,
     onRowEditClick: i,
     onRowReadClick: o
-  } = e, l = at(() => {
+  } = e, l = it(() => {
     var h;
     return r != null && r.forceCheckboxes || (h = r == null ? void 0 : r.actionOptions) != null && h.length ? {
       flexBasis: 40,
@@ -37707,9 +37701,9 @@ const Cs = /* @__PURE__ */ ho(q4e), YSe = ({
       p === "row_edit" && i && i(h, v), p === "row_read" && o && o(h, v);
     else if (t)
       return t(h, p, v);
-  }, [t, i, o]), u = at(() => m6e(r), [r]);
+  }, [t, i, o]), u = it(() => m6e(r), [r]);
   return {
-    columnsDefinitions: at(() => (r == null ? void 0 : r.canRowEdit) !== void 0 || (r == null ? void 0 : r.canRowRead) !== void 0 ? [...n, {
+    columnsDefinitions: it(() => (r == null ? void 0 : r.canRowEdit) !== void 0 || (r == null ? void 0 : r.canRowRead) !== void 0 ? [...n, {
       name: "sticky",
       flexBasis: 88,
       filtering: !1,
@@ -37735,9 +37729,9 @@ const Cs = /* @__PURE__ */ ho(q4e), YSe = ({
   } = r, {
     columnConfig: c,
     columnsOrder: u
-  } = t, f = at(() => e == null ? void 0 : e.map((B) => B.name), [e]), h = u != null && u.length ? u : f, [p, v] = He({
+  } = t, f = it(() => e == null ? void 0 : e.map((B) => B.name), [e]), h = u != null && u.length ? u : f, [p, v] = He({
     ...c ?? {}
-  }), [m, w] = He(h), C = at(() => e == null ? void 0 : e.filter((B) => {
+  }), [m, w] = He(h), C = it(() => e == null ? void 0 : e.filter((B) => {
     var H;
     const j = (H = p == null ? void 0 : p[B.name]) == null ? void 0 : H.isHidden;
     return B != null && B.alwaysOn || typeof j == "boolean" ? !j : B.defaultHidden && (p != null && p[B.name]) ? !0 : !(B != null && B.defaultHidden);
@@ -37750,7 +37744,7 @@ const Cs = /* @__PURE__ */ ho(q4e), YSe = ({
   }, [h, n]), O = ke((B, j) => (j ? e : e.filter((H) => G4e(H, p))).toSorted((H, Z) => {
     const _ = (B || []).indexOf(H.name), V = (B || []).indexOf(Z.name);
     return _ > V ? 1 : _ < V ? -1 : 0;
-  }), [c, e]), T = at(() => O(h, !1), [h, e]), M = at(() => O(m, !0), [m]), L = ke((B = !1) => (j) => {
+  }), [c, e]), T = it(() => O(h, !1), [h, e]), M = it(() => O(m, !0), [m]), L = ke((B = !1) => (j) => {
     const {
       destination: H,
       source: Z
@@ -37950,7 +37944,7 @@ const Z6e = /* @__PURE__ */ ho(Y6e), KF = (e) => ke((t, r) => {
   };
   return /* @__PURE__ */ b.jsx(Pi, { className: f, ...l, children: /* @__PURE__ */ b.jsx(ft.div, { className: "test", children: /* @__PURE__ */ b.jsx(v, { "data-test": i.name, name: i.name, onChange: u, value: t, OverlayComponent: U6e, ...m }) }) });
 }, eV = (e, t, r) => {
-  const n = at(() => (e || []).length >= 1 && e.every((o) => {
+  const n = it(() => (e || []).length >= 1 && e.every((o) => {
     var l;
     return (l = t.checkedRows) == null ? void 0 : l[o.id];
   }), [e, t.checkedRows]), i = ke(() => {
@@ -38462,13 +38456,13 @@ function aV(e, t) {
 }
 var oV = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u" ? Ud : bt;
 function sV(e) {
-  var t = e.store, r = e.context, n = e.children, i = at(function() {
+  var t = e.store, r = e.context, n = e.children, i = it(function() {
     var c = aV(t);
     return {
       store: t,
       subscription: c
     };
-  }, [t]), o = at(function() {
+  }, [t]), o = it(function() {
     return t.getState();
   }, [t]);
   oV(function() {
@@ -38753,26 +38747,26 @@ function O5e(e, t) {
     function V(de) {
       return e(de.dispatch, Z);
     }
-    var F = _ ? at : function(de) {
+    var F = _ ? it : function(de) {
       return de();
     };
     function Q(de) {
-      var me = at(function() {
+      var me = it(function() {
         var ct = de.reactReduxForwardedRef, an = Kv(de, w5e);
         return [de.context, ct, an];
-      }, [de]), ue = me[0], Y = me[1], U = me[2], se = at(function() {
+      }, [de]), ue = me[0], Y = me[1], U = me[2], se = it(function() {
         return ue && ue.Consumer && oP.isContextConsumer(/* @__PURE__ */ fe.createElement(ue.Consumer, null)) ? ue : M;
       }, [ue, M]), oe = Mc(se), ge = !!de.store && !!de.store.getState && !!de.store.dispatch, ae = !!oe && !!oe.store;
       if (process.env.NODE_ENV !== "production" && !ge && !ae)
         throw new Error('Could not find "store" in the context of ' + ('"' + H + '". Either wrap the root component in a <Provider>, ') + "or pass a custom React context provider to <Provider> and the corresponding " + ("React context consumer to " + H + " in connect options."));
-      var q = ge ? de.store : oe.store, ne = at(function() {
+      var q = ge ? de.store : oe.store, ne = it(function() {
         return V(q);
-      }, [q]), ce = at(function() {
+      }, [q]), ce = it(function() {
         if (!h)
           return C5e;
         var ct = aV(q, ge ? null : oe.subscription), an = ct.notifyNestedSubs.bind(ct);
         return [ct, an];
-      }, [q, ge, oe]), pe = ce[0], Te = ce[1], Ae = at(function() {
+      }, [q, ge, oe]), pe = ce[0], Te = ce[1], Ae = it(function() {
         return ge ? oe : Qe({}, oe, {
           subscription: pe
         });
@@ -38783,11 +38777,11 @@ function O5e(e, t) {
         return or.current && U === Ue.current ? or.current : ne(q.getState(), U);
       }, [q, Ke, U]);
       sP(S5e, [Ue, Br, W, U, wt, or, Te]), sP(I5e, [h, q, pe, ne, Ue, Br, W, or, Te, Ze], [q, pe, ne]);
-      var Tt = at(function() {
+      var Tt = it(function() {
         return /* @__PURE__ */ fe.createElement(B, Qe({}, wt, {
           ref: Y
         }));
-      }, [Y, B, wt]), Ut = at(function() {
+      }, [Y, B, wt]), Ut = it(function() {
         return h ? /* @__PURE__ */ fe.createElement(se.Provider, {
           value: Ae
         }, Tt) : Tt;
@@ -46469,7 +46463,7 @@ const oCe = ie.div`
     e && (e == null ? void 0 : e.length) > 0 && i((h) => !h), r == null || r();
   }, [r, e]), u = ke((h) => {
     i(!1), t == null || t(h.value);
-  }, [t]), f = at(() => e == null ? void 0 : e.map((h) => ({
+  }, [t]), f = it(() => e == null ? void 0 : e.map((h) => ({
     title: h.label,
     onClick: () => u(h),
     link: "#",
@@ -48191,7 +48185,7 @@ dm.exports;
         while (s);
         return d;
       }
-      function it(a, s) {
+      function at(a, s) {
         return M1(d2(a, s, en), a + "");
       }
       function Xe(a) {
@@ -48358,7 +48352,7 @@ dm.exports;
       function Eo(a, s) {
         return tt(a) ? a : k1(a, s) ? [a] : N1(It(a));
       }
-      var A4 = it;
+      var A4 = at;
       function So(a, s, d) {
         var g = a.length;
         return d = d === r ? g : d, !s && d >= g ? a : bi(a, s, d);
@@ -48459,7 +48453,7 @@ dm.exports;
         };
       }
       function Ws(a) {
-        return it(function(s, d) {
+        return at(function(s, d) {
           var g = -1, y = d.length, A = y > 1 ? d[y - 1] : r, k = y > 2 ? d[2] : r;
           for (A = a.length > 3 && typeof A == "function" ? (y--, A) : r, k && xn(d[0], d[1], k) && (A = y < 3 ? r : A, y = 1), s = Lt(s); ++g < y; ) {
             var P = d[g];
@@ -48643,7 +48637,7 @@ dm.exports;
       }
       function w1(a) {
         return za(function(s) {
-          return s = Kt(s, $n($e())), it(function(d) {
+          return s = Kt(s, $n($e())), at(function(d) {
             var g = this;
             return a(s, function(y) {
               return _n(y, g, d);
@@ -49202,12 +49196,12 @@ dm.exports;
           s[g - 1] = arguments[g];
         return Xn(tt(d) ? An(d) : [d], jr(s, 1));
       }
-      var J4 = it(function(a, s) {
+      var J4 = at(function(a, s) {
         return Or(a) ? Xo(a, jr(s, 1, Or, !0)) : [];
-      }), U4 = it(function(a, s) {
+      }), U4 = at(function(a, s) {
         var d = Sn(s);
         return Or(d) && (d = r), Or(a) ? Xo(a, jr(s, 1, Or, !0), $e(d, 2)) : [];
-      }), X4 = it(function(a, s) {
+      }), X4 = at(function(a, s) {
         var d = Sn(s);
         return Or(d) && (d = r), Or(a) ? Xo(a, jr(s, 1, Or, !0), r, d) : [];
       });
@@ -49276,13 +49270,13 @@ dm.exports;
         var s = a == null ? 0 : a.length;
         return s ? bi(a, 0, -1) : [];
       }
-      var _1 = it(function(a) {
+      var _1 = at(function(a) {
         var s = Kt(a, Pu);
         return s.length && s[0] === a[0] ? _s(s) : [];
-      }), a6 = it(function(a) {
+      }), a6 = at(function(a) {
         var s = Sn(a), d = Kt(a, Pu);
         return s === Sn(d) ? s = r : d.pop(), d.length && d[0] === a[0] ? _s(d, $e(s, 2)) : [];
-      }), Za = it(function(a) {
+      }), Za = at(function(a) {
         var s = Sn(a), d = Kt(a, Pu);
         return s = typeof s == "function" ? s : r, s && d.pop(), d.length && d[0] === a[0] ? _s(d, r, s) : [];
       });
@@ -49303,7 +49297,7 @@ dm.exports;
       function Er(a, s) {
         return a && a.length ? u1(a, We(s)) : r;
       }
-      var o6 = it(m2);
+      var o6 = at(m2);
       function m2(a, s) {
         return a && a.length && s && s.length ? h1(a, s) : a;
       }
@@ -49390,12 +49384,12 @@ dm.exports;
       function g6(a, s) {
         return a && a.length ? Ou(a, $e(s, 3)) : [];
       }
-      var Rt = it(function(a) {
+      var Rt = at(function(a) {
         return cn(jr(a, 1, Or, !0));
-      }), v6 = it(function(a) {
+      }), v6 = at(function(a) {
         var s = Sn(a);
         return Or(s) && (s = r), cn(jr(a, 1, Or, !0), $e(s, 2));
-      }), m6 = it(function(a) {
+      }), m6 = at(function(a) {
         var s = Sn(a);
         return s = typeof s == "function" ? s : r, cn(jr(a, 1, Or, !0), r, s);
       });
@@ -49427,24 +49421,24 @@ dm.exports;
           return _n(s, r, g);
         });
       }
-      var A6 = it(function(a, s) {
+      var A6 = at(function(a, s) {
         return Or(a) ? Xo(a, s) : [];
-      }), C6 = it(function(a) {
+      }), C6 = at(function(a) {
         return g1(bo(a, Or));
-      }), B1 = it(function(a) {
+      }), B1 = at(function(a) {
         var s = Sn(a);
         return Or(s) && (s = r), g1(bo(a, Or), $e(s, 2));
-      }), x6 = it(function(a) {
+      }), x6 = at(function(a) {
         var s = Sn(a);
         return s = typeof s == "function" ? s : r, g1(bo(a, Or), r, s);
-      }), F1 = it(L1);
+      }), F1 = at(L1);
       function Jr(a, s) {
         return js(a || [], s || [], on);
       }
       function Vn(a, s) {
         return js(a || [], s || [], qo);
       }
-      var E6 = it(function(a) {
+      var E6 = at(function(a) {
         var s = a.length, d = s > 1 ? a[s - 1] : r;
         return d = typeof d == "function" ? (a.pop(), d) : r, A2(a, d);
       });
@@ -49545,7 +49539,7 @@ dm.exports;
         var y = a.length;
         return d < 0 && (d = Vr(y + d, 0)), nd(a) ? d <= y && a.indexOf(s, d) > -1 : !!y && Os(a, s, d) > -1;
       }
-      var W6 = it(function(a, s, d) {
+      var W6 = at(function(a, s, d) {
         var g = -1, y = typeof s == "function", A = fn(a) ? E(a.length) : [];
         return Wa(a, function(k) {
           A[++g] = y ? _n(s, k, d) : Bs(k, s, d);
@@ -49602,7 +49596,7 @@ dm.exports;
         var g = tt(a) ? _f : Yp;
         return d && xn(a, s, d) && (s = r), g(a, $e(s, 3));
       }
-      var k2 = it(function(a, s) {
+      var k2 = at(function(a, s) {
         if (a == null)
           return [];
         var d = s.length;
@@ -49629,14 +49623,14 @@ dm.exports;
           return --a > 0 && (d = s.apply(this, arguments)), a <= 1 && (s = r), d;
         };
       }
-      var dn = it(function(a, s, d) {
+      var dn = at(function(a, s, d) {
         var g = S;
         if (d.length) {
           var y = ca(d, Gs(dn));
           g |= M;
         }
         return Ga(a, g, s, d, y);
-      }), Zu = it(function(a, s, d) {
+      }), Zu = at(function(a, s, d) {
         var g = S | x;
         if (d.length) {
           var y = ca(d, Gs(Zu));
@@ -49701,9 +49695,9 @@ dm.exports;
         }
         return Dr.cancel = Gt, Dr.flush = zt, Dr;
       }
-      var e5 = it(function(a, s) {
+      var e5 = at(function(a, s) {
         return r1(a, 1, s);
-      }), V1 = it(function(a, s, d) {
+      }), V1 = at(function(a, s, d) {
         return r1(a, xi(s) || 0, d);
       });
       function t5(a) {
@@ -49746,15 +49740,15 @@ dm.exports;
       var W1 = A4(function(a, s) {
         s = s.length == 1 && tt(s[0]) ? Kt(s[0], $n($e())) : Kt(jr(s, 1), $n($e()));
         var d = s.length;
-        return it(function(g) {
+        return at(function(g) {
           for (var y = -1, A = hr(g.length, d); ++y < A; )
             g[y] = s[y].call(this, g[y]);
           return _n(a, this, g);
         });
-      }), H1 = it(function(a, s) {
+      }), H1 = at(function(a, s) {
         var d = ca(s, Gs(H1));
         return Ga(a, M, r, s, d);
-      }), M2 = it(function(a, s) {
+      }), M2 = at(function(a, s) {
         var d = ca(s, Gs(M2));
         return Ga(a, L, r, s, d);
       }), r5 = za(function(a, s) {
@@ -49763,12 +49757,12 @@ dm.exports;
       function n5(a, s) {
         if (typeof a != "function")
           throw new pi(l);
-        return s = s === r ? s : We(s), it(a, s);
+        return s = s === r ? s : We(s), at(a, s);
       }
       function i5(a, s) {
         if (typeof a != "function")
           throw new pi(l);
-        return s = s == null ? 0 : Vr(We(s), 0), it(function(d) {
+        return s = s == null ? 0 : Vr(We(s), 0), at(function(d) {
           var g = d[s], y = So(d, 0, s);
           return g && Xn(y, g), _n(a, this, y);
         });
@@ -50009,7 +50003,7 @@ dm.exports;
         var d = Rs(a);
         return s == null ? d : gu(d, s);
       }
-      var Js = it(function(a, s) {
+      var Js = at(function(a, s) {
         a = Lt(a);
         var d = -1, g = s.length, y = g > 2 ? s[2] : r;
         for (y && xn(s[0], s[1], y) && (g = 1); ++d < g; )
@@ -50018,7 +50012,7 @@ dm.exports;
             (J === r || Ft(J, Ps[X]) && !Bt.call(a, X)) && (a[X] = A[X]);
           }
         return a;
-      }), b5 = it(function(a) {
+      }), b5 = at(function(a) {
         return a.push(r, a2), _n($1, r, a);
       });
       function y5(a, s) {
@@ -50059,7 +50053,7 @@ dm.exports;
         s != null && typeof s.toString != "function" && (s = iu.call(s)), a[s] = d;
       }, r0(en)), z2 = t2(function(a, s, d) {
         s != null && typeof s.toString != "function" && (s = iu.call(s)), Bt.call(a, s) ? a[s].push(d) : a[s] = [d];
-      }, $e), x5 = it(Bs);
+      }, $e), x5 = at(Bs);
       function Ur(a) {
         return fn(a) ? pt(a) : Fs(a);
       }
@@ -50347,7 +50341,7 @@ function print() { __p += __j.call(arguments, '') }
       function K2(a, s, d) {
         return a = It(a), s = d ? r : s, s === r ? Qr(a) ? Z3(a) : dp(a) : a.match(s) || [];
       }
-      var e0 = it(function(a, s) {
+      var e0 = at(function(a, s) {
         try {
           return _n(a, r, s);
         } catch (d) {
@@ -50364,7 +50358,7 @@ function print() { __p += __j.call(arguments, '') }
           if (typeof g[1] != "function")
             throw new pi(l);
           return [d(g[0]), g[1]];
-        }) : [], it(function(g) {
+        }) : [], at(function(g) {
           for (var y = -1; ++y < s; ) {
             var A = a[y];
             if (_n(A[0], this, g))
@@ -50396,11 +50390,11 @@ function print() { __p += __j.call(arguments, '') }
       function nb(a, s) {
         return xu(a, Fn(s, p));
       }
-      var ib = it(function(a, s) {
+      var ib = at(function(a, s) {
         return function(d) {
           return Bs(d, a, s);
         };
-      }), ab = it(function(a, s) {
+      }), ab = at(function(a, s) {
         return function(d) {
           return Bs(a, d, s);
         };
@@ -50427,7 +50421,7 @@ function print() { __p += __j.call(arguments, '') }
       function a0() {
       }
       function rg(a) {
-        return a = We(a), it(function(s) {
+        return a = We(a), at(function(s) {
           return u1(s, a);
         });
       }
@@ -50549,7 +50543,7 @@ function print() { __p += __j.call(arguments, '') }
         return this.filter(a).head();
       }, ht.prototype.findLast = function(a) {
         return this.reverse().find(a);
-      }, ht.prototype.invokeMap = it(function(a, s) {
+      }, ht.prototype.invokeMap = at(function(a, s) {
         return typeof a == "function" ? new ht(this) : this.map(function(d) {
           return Bs(d, a, s);
         });
@@ -50766,10 +50760,10 @@ function XCe(e, t, r) {
 }
 var $Ce = XCe, qCe = zCe, QCe = $Ce, KCe = qCe(QCe), exe = KCe;
 const txe = /* @__PURE__ */ ho(exe), rxe = (e, t, r = [], n) => {
-  const i = at(() => (e || []).filter((c) => {
+  const i = it(() => (e || []).filter((c) => {
     var u;
     return (u = t.checkedRows) == null ? void 0 : u[c.id];
-  }), [t, e]), o = at(() => (r || []).filter((u) => u.isEnabled ? u.isEnabled(i) : t.checkedRows && txe(t.checkedRows, Boolean)), [t, i, r]), l = ke((c) => {
+  }), [t, e]), o = it(() => (r || []).filter((u) => u.isEnabled ? u.isEnabled(i) : t.checkedRows && txe(t.checkedRows, Boolean)), [t, i, r]), l = ke((c) => {
     const f = (r || []).find((h) => h.value == c);
     f && n && n(f, i);
   }, [r, n, i]);
@@ -50826,7 +50820,7 @@ const txe = /* @__PURE__ */ ho(exe), rxe = (e, t, r = [], n) => {
     uxState: u = {}
   } = t || {}, [f, h] = eV(i, u, c), [p, v] = rxe(i, u, r == null ? void 0 : r.actionOptions, n), m = Object.keys((u == null ? void 0 : u.checkedRows) || []).length, w = ke(() => {
     f || h();
-  }, [f, h]), C = at(() => {
+  }, [f, h]), C = it(() => {
     var x;
     return (x = r == null ? void 0 : r.actionOptions) != null && x.length ? r.actionOptions.map((I) => ({
       title: I.label,
@@ -50873,7 +50867,7 @@ const txe = /* @__PURE__ */ ho(exe), rxe = (e, t, r = [], n) => {
     page: i
   } = t, o = ke((c) => {
     c && "value" in c && (n == null || n(Number(c.value)), r == null || r(i ?? 1, Number(c.value)));
-  }, [n, i, r]), l = at(() => dxe.map((c) => ({
+  }, [n, i, r]), l = it(() => dxe.map((c) => ({
     value: c,
     label: c
   })), []);
@@ -50903,7 +50897,7 @@ const txe = /* @__PURE__ */ ho(exe), rxe = (e, t, r = [], n) => {
   dragHandleProps: l
 }) => {
   var m, w, C, S;
-  const [c, u] = He((t == null ? void 0 : t.includes(e.name)) ?? !1), f = at(() => ({
+  const [c, u] = He((t == null ? void 0 : t.includes(e.name)) ?? !1), f = it(() => ({
     ...o == null ? void 0 : o.style
   }), [o]), h = Pj.isObject(e == null ? void 0 : e.title) && "props" in e.title && ((m = e.title) == null ? void 0 : m.props) && vt._({
     id: (C = (w = e.title) == null ? void 0 : w.props) == null ? void 0 : C.id,
@@ -50972,7 +50966,7 @@ const txe = /* @__PURE__ */ ho(exe), rxe = (e, t, r = [], n) => {
       U && ((Y = m.setRowsPerPage) == null || Y.call(m, U));
     }
   }, [O, m, h]);
-  const L = b6e(v), B = at(() => J4e(t), [t]), j = L.columnsDefinitions, {
+  const L = b6e(v), B = it(() => J4e(t), [t]), j = L.columnsDefinitions, {
     onOpen: H,
     isOpen: Z,
     onClose: _
@@ -51776,7 +51770,7 @@ const oIe = (e, t = "grid") => {
       setColumnsOrder: r.setColumnsOrder
     }, i)
   }));
-}, sIe = (e, t, r, n) => at(() => {
+}, sIe = (e, t, r, n) => it(() => {
   if (e)
     return {
       onClick: t,

package/ui/index.umd.js

@@ -1646,34 +1646,29 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     background-color: ${e=>e.$hoverColorBack?re.color(e.$hoverColorBack):"auto"};
   }
 `,zue=({src:e,size:t=Hue,colorFront:r,colorBack:n,className:i,hoverColorBack:o,...l})=>b.jsx(b.Fragment,{children:b.jsx(Gue,{size:t||34,className:i,$colorBack:n||"neutral20",$colorFront:r||"blue2",$hoverColorBack:o||"lightGray7",...l,children:e?b.jsx("img",{src:e,width:t,height:t}):b.jsx(tO,{})})}),Yue=ae.div`
+  min-width: 12px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 2px;
+  height: ${({size:e})=>e==="small"?"16px":"24px"};
+  padding: ${({size:e})=>e==="small"?"0 5px":"3px 8px"};
   color: white;
+  gap: 10px;
   background-color: ${({color:e})=>e};
-  border-radius: 50%;
-  width: ${({size:e})=>e};
-  height: ${({size:e})=>e};
-
-  .label {
-    font-family: ${re("fonts.primary")};
-    font-weight: 600;
-    vertical-align: middle;
-    text-align: center;
-    font-size: ${({fontSize:e})=>`${e}px`};
-  }
-
+  border-radius: 29px;
+  line-height: 15.6px;
+  font-family: ${re("fonts.primary")};
+  font-size: ${({size:e})=>e==="small"?"12px":"14px"};
+  font-weight: semiBold;
   position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(${({topPosition:e})=>e?"75%, -75%":"50%, -50%"});
+  top: ${({topPosition:e})=>e&&"-15%"};
+  left: ${({topPosition:e})=>e?"50%":"100%"};
+  z-index: 1;
 `,Zue=ae.div`
   position: relative;
   ${({width:e})=>e?wt`
           width: ${e};
         `:""};
-`,Uue=({children:e,color:t="red2",size:r=6,fontSize:n=10,label:i,childWidth:o,topPosition:l})=>{const u=mt(),c=re.color(t)({theme:u}),f=re.fontSize(r)({theme:u});return!i||typeof i=="number"&&i<=0?b.jsx(b.Fragment,{children:e}):b.jsxs(Zue,{width:o,children:[b.jsx(Yue,{color:c,size:f,topPosition:l,fontSize:n,children:b.jsx("div",{className:"label",children:i})}),e]})},Jue=ae(ot.div)`
+`,Uue=({children:e,color:t="red1",size:r="default",label:n,childWidth:i,topPosition:o})=>{const l=mt(),u=re.color(t)({theme:l}),c=I.useMemo(()=>typeof n=="number"&&n>=100?"99+":n,[n]);return!n||typeof n=="number"&&n<=0?b.jsx(b.Fragment,{children:e}):b.jsxs(Zue,{width:i,children:[b.jsx(Yue,{color:u,size:r,topPosition:o,children:b.jsx("div",{className:"label",children:c})}),e]})},Jue=ae(ot.div)`
   display: flex;
   box-sizing: border-box;
   flex-direction: column;