ctc-component-library 0.1.76 → 0.1.77

package/dist/index.es.js

@@ -722,16 +722,16 @@ var ap = { exports: {} };
   })();
 })(ap);
 var Ix = ap.exports;
-const J = /* @__PURE__ */ so(Ix), _x = "p", ln = Ln(
+const J = /* @__PURE__ */ so(Ix), _x = "p", rn = Ln(
   ({
     variant: e,
     customStyles: t,
-    className: n = "",
-    underline: r = !1,
-    dataTestid: o = "typography-test-id",
-    asTag: a,
-    children: i,
-    bolder: l,
+    underline: n = !1,
+    dataTestid: r = "typography-test-id",
+    asTag: o = _x,
+    children: a,
+    bolder: i,
+    className: l,
     ...c
   }, u) => {
     const f = {
@@ -740,28 +740,30 @@ const J = /* @__PURE__ */ so(Ix), _x = "p", ln = Ln(
       h3: "h3",
       h4: "h4",
       h5: "h5"
-    }[e] || a || _x;
+    }[e] || o;
     return /* @__PURE__ */ fe.jsx(
       f,
       {
         ref: u,
-        "data-testid": o,
+        "data-testid": r,
         className: J(
           "typography",
           `typography--${e}`,
           {
-            "typography--underline": r,
-            "typography--bolder": l
+            "typography--underline": n,
+            "typography--bolder": i
           },
-          n
+          l
         ),
         style: t,
         ...c,
-        children: i
+        children: a
       }
     );
   }
-), lV = ({
+);
+rn.displayName = "Typography";
+const lV = ({
   type: e,
   icon: t,
   text: n,
@@ -810,7 +812,7 @@ const J = /* @__PURE__ */ so(Ix), _x = "p", ln = Ln(
             iconName: d[r]
           }
         ),
-        o !== "dot" && /* @__PURE__ */ fe.jsx("span", { className: "badge__text", children: /* @__PURE__ */ fe.jsxs(ln, { variant: p, children: [
+        o !== "dot" && /* @__PURE__ */ fe.jsx("span", { className: "badge__text", children: /* @__PURE__ */ fe.jsxs(rn, { variant: p, children: [
           h || "",
           " "
         ] }) })
@@ -870,7 +872,7 @@ const Kf = ({
           }
         ),
         n && /* @__PURE__ */ fe.jsx("span", { className: "btn__text", children: /* @__PURE__ */ fe.jsx(
-          ln,
+          rn,
           {
             underline: l,
             variant: h[g],
@@ -925,7 +927,7 @@ const tc = (e) => ({
   ) : null, p = (v) => v ? l ? g() : Wf(v, tc(e)) : null, h = () => {
     const v = n || r, b = typeof i == "string";
     return l && !v ? g() : c ? Wf(i, tc(e)) : b ? /* @__PURE__ */ fe.jsx(
-      ln,
+      rn,
       {
         variant: Px(e),
         className: "btn__text",
@@ -971,7 +973,7 @@ const sV = ({
     "data-testid": o,
     style: { backgroundColor: n },
     className: `avatar ${r}`,
-    children: /* @__PURE__ */ fe.jsx(ln, { customStyles: { color: t }, variant: "body2", children: e })
+    children: /* @__PURE__ */ fe.jsx(rn, { customStyles: { color: t }, variant: "body2", children: e })
   }
 );
 function ye() {
@@ -5041,7 +5043,7 @@ const la = {
     color: e.colorLinkActive
   }
 }), {
-  genStyleHooks: rn,
+  genStyleHooks: on,
   genComponentStyleHook: _E,
   genSubStyleComponent: Xl
 } = SE({
@@ -7793,7 +7795,7 @@ const os = Yh, RN = (e) => {
       }
     }
   };
-}, Xh = rn("Space", (e) => {
+}, Xh = on("Space", (e) => {
   const t = Ft(e, {
     spaceGapSmallSize: e.paddingXS,
     spaceGapMiddleSize: e.padding,
@@ -9534,7 +9536,7 @@ const ci = ib, gO = (e) => ({
       }
     }
   };
-}, uI = rn("Button", (e) => {
+}, uI = on("Button", (e) => {
   const t = sb(e);
   return [
     // Shared
@@ -12836,7 +12838,7 @@ const A_ = () => Tn() && window.document.documentElement, L_ = (e) => {
     paragraphMarginTop: e.marginLG + e.marginXXS,
     paragraphLiHeight: e.controlHeight / 2
   };
-}, ga = rn("Skeleton", (e) => {
+}, ga = on("Skeleton", (e) => {
   const {
     componentCls: t,
     calc: n
@@ -13288,7 +13290,7 @@ const Ob = (e) => {
 }, Ju = (e, t) => CP(e, t), SP = (e, t, n) => ({
   [`@media (min-width: ${re(t)})`]: Object.assign({}, Ju(e, n))
 }), xP = () => ({}), $P = () => ({});
-rn("Grid", bP, xP);
+on("Grid", bP, xP);
 const Ib = (e) => ({
   xs: e.screenXSMin,
   sm: e.screenSMMin,
@@ -13297,7 +13299,7 @@ const Ib = (e) => ({
   xl: e.screenXLMin,
   xxl: e.screenXXLMin
 });
-rn("Grid", (e) => {
+on("Grid", (e) => {
   const t = Ft(e, {
     gridColumns: 24
     // Row is divided into 24 parts in Grid
@@ -13579,7 +13581,7 @@ const wP = (e) => {
   confirmBodyPadding: e.wireframe ? `${re(e.padding * 2)} ${re(e.padding * 2)} ${re(e.paddingLG)}` : 0,
   confirmIconMarginInlineEnd: e.wireframe ? e.margin : e.marginSM,
   confirmBtnsMarginTop: e.wireframe ? e.marginLG : e.marginSM
-}), Rb = rn("Modal", (e) => {
+}), Rb = on("Modal", (e) => {
   const t = _b(e);
   return [EP(t), NP(t), wP(t), yi(t, "zoom"), OP(t)];
 }, Pb, {
@@ -14557,7 +14559,7 @@ const zP = (e) => {
     notificationProgressHeight: 2,
     notificationProgressBg: `linear-gradient(90deg, ${e.colorPrimaryBorderHover}, ${e.colorPrimary})`
   });
-}, Wb = rn("Notification", (e) => {
+}, Wb = on("Notification", (e) => {
   const t = Kb(e);
   return [QP(t), VP(t), XP(t)];
 }, Vb), ZP = Xl(["Notification", "PurePanel"], (e) => {
@@ -15882,11 +15884,11 @@ function WR(e, t, n, r, o, a, i) {
         dn >= St) ? (g.current.lr = !0, Fe = $t, _e = -_e, ze.points = [Yr(Nt, 1), Yr(at, 1)]) : g.current.lr = !1;
       }
       Mt();
-      var on = se === !0 ? 0 : se;
-      typeof on == "number" && (Qe < ge.left && (Fe -= Qe - ge.left - _e, B.x + oe < ge.left + on && (Fe += B.x - ge.left + oe - on)), st > ge.right && (Fe -= st - ge.right - _e, B.x > ge.right - on && (Fe += B.x - ge.right + on)));
+      var an = se === !0 ? 0 : se;
+      typeof an == "number" && (Qe < ge.left && (Fe -= Qe - ge.left - _e, B.x + oe < ge.left + an && (Fe += B.x - ge.left + oe - an)), st > ge.right && (Fe -= st - ge.right - _e, B.x > ge.right - an && (Fe += B.x - ge.right + an)));
       var hn = $e === !0 ? 0 : $e;
       typeof hn == "number" && (Ae < ge.top && (Be -= Ae - ge.top - ue, B.y + W < ge.top + hn && (Be += B.y - ge.top + W - hn)), Xe > ge.bottom && (Be -= Xe - ge.bottom - ue, B.y > ge.bottom - hn && (Be += B.y - ge.bottom + hn)));
-      var jn = L.x + Fe, Bn = jn + ne, mn = L.y + Be, Fn = mn + q, On = B.x, Rt = On + oe, rt = B.y, wt = rt + W, Ue = Math.max(jn, On), qe = Math.min(Bn, Rt), Et = (Ue + qe) / 2, Kt = Et - jn, an = Math.max(mn, rt), Sn = Math.min(Fn, wt), In = (an + Sn) / 2, _n = In - mn;
+      var jn = L.x + Fe, Bn = jn + ne, mn = L.y + Be, Fn = mn + q, On = B.x, Rt = On + oe, rt = B.y, wt = rt + W, Ue = Math.max(jn, On), qe = Math.min(Bn, Rt), Et = (Ue + qe) / 2, Kt = Et - jn, ln = Math.max(mn, rt), Sn = Math.min(Fn, wt), In = (ln + Sn) / 2, _n = In - mn;
       i == null || i(t, ze);
       var bt = Ne.right - L.x - (Fe + L.width), He = Ne.bottom - L.y - (Be + L.height);
       ke === 1 && (Fe = Math.round(Fe), bt = Math.round(bt)), Le === 1 && (Be = Math.round(Be), He = Math.round(He));
@@ -16022,7 +16024,7 @@ function YR() {
     }, [nt]);
     var ee = s.useState(null), se = U(ee, 2), $e = se[0], je = se[1], Ae = s.useState(null), Xe = U(Ae, 2), Qe = Xe[0], st = Xe[1], ft = function(_t) {
       st([_t.clientX, _t.clientY]);
-    }, Ot = WR(nt, Ne, H && Qe !== null ? Qe : ce, P, O, R, L), Te = U(Ot, 11), Ke = Te[0], lt = Te[1], ht = Te[2], xt = Te[3], Yt = Te[4], zt = Te[5], tn = Te[6], un = Te[7], sn = Te[8], ct = Te[9], $t = Te[10], jt = zR(me, c, u, d), dn = U(jt, 2), on = dn[0], hn = dn[1], jn = on.has("click"), Bn = hn.has("click") || hn.has("contextMenu"), mn = Pt(function() {
+    }, Ot = WR(nt, Ne, H && Qe !== null ? Qe : ce, P, O, R, L), Te = U(Ot, 11), Ke = Te[0], lt = Te[1], ht = Te[2], xt = Te[3], Yt = Te[4], zt = Te[5], tn = Te[6], un = Te[7], sn = Te[8], ct = Te[9], $t = Te[10], jt = zR(me, c, u, d), dn = U(jt, 2), an = dn[0], hn = dn[1], jn = an.has("click"), Bn = hn.has("click") || hn.has("contextMenu"), mn = Pt(function() {
       Je || $t();
     }), Fn = function() {
       Fe.current && H && Bn && Me(!1);
@@ -16043,10 +16045,10 @@ function YR() {
         forceAlign: mn
       };
     });
-    var Rt = s.useState(0), rt = U(Rt, 2), wt = rt[0], Ue = rt[1], qe = s.useState(0), Et = U(qe, 2), Kt = Et[0], an = Et[1], Sn = function() {
+    var Rt = s.useState(0), rt = U(Rt, 2), wt = rt[0], Ue = rt[1], qe = s.useState(0), Et = U(qe, 2), Kt = Et[0], ln = Et[1], Sn = function() {
       if (j && ce) {
         var _t = ce.getBoundingClientRect();
-        Ue(_t.width), an(_t.height);
+        Ue(_t.width), ln(_t.height);
       }
     }, In = function() {
       Sn(), mn();
@@ -16078,7 +16080,7 @@ function YR() {
         wn[vn - 1] = arguments[vn];
       (_t = be.onClick) === null || _t === void 0 || _t.call.apply(_t, [be, gt].concat(wn));
     });
-    var it = UR(nt, Bn, ce, Ne, x, S, Ye, Me), vt = on.has("hover"), Mt = hn.has("hover"), Ut, Pn;
+    var it = UR(nt, Bn, ce, Ne, x, S, Ye, Me), vt = an.has("hover"), Mt = hn.has("hover"), Ut, Pn;
     vt && (He("onMouseEnter", !0, h, function(gt) {
       ft(gt);
     }), He("onPointerEnter", !0, h, function(gt) {
@@ -16090,7 +16092,7 @@ function YR() {
       (_t = be.onMouseMove) === null || _t === void 0 || _t.call(be, gt);
     })), Mt && (He("onMouseLeave", !1, b), He("onPointerLeave", !1, b), Pn = function() {
       Me(!1, b);
-    }), on.has("focus") && He("onFocus", !0, y), hn.has("focus") && He("onBlur", !1, C), on.has("contextMenu") && (Re.onContextMenu = function(gt) {
+    }), an.has("focus") && He("onFocus", !0, y), hn.has("focus") && He("onBlur", !1, C), an.has("contextMenu") && (Re.onContextMenu = function(gt) {
       var _t;
       Fe.current && hn.has("contextMenu") ? Me(!1) : (ft(gt), Me(!0)), gt.preventDefault();
       for (var fn = arguments.length, wn = new Array(fn > 1 ? fn - 1 : 0), vn = 1; vn < fn; vn++)
@@ -16379,8 +16381,8 @@ var nM = ["id", "prefixCls", "className", "showSearch", "tagRender", "direction"
     if (!(Se && nd(Ze) && (Je == null ? void 0 : Je.size) >= Ze)) {
       var qe = !0, Et = rt;
       w == null || w(null);
-      var Kt = eM(rt, I, nd(Ze) ? Ze - Je.size : void 0), an = Ue ? null : Kt;
-      return v !== "combobox" && an && (Et = "", P == null || P(an), Ve(!1), qe = !1), D && be !== Et && D(Et, {
+      var Kt = eM(rt, I, nd(Ze) ? Ze - Je.size : void 0), ln = Ue ? null : Kt;
+      return v !== "combobox" && ln && (Et = "", P == null || P(ln), Ve(!1), qe = !1), D && be !== Et && D(Et, {
         source: wt ? "typing" : "effect"
       }), qe;
     }
@@ -16397,10 +16399,10 @@ var nM = ["id", "prefixCls", "className", "showSearch", "tagRender", "direction"
   var se = Qb(), $e = U(se, 2), je = $e[0], Ae = $e[1], Xe = s.useRef(!1), Qe = function(rt) {
     var wt = je(), Ue = rt.key, qe = Ue === "Enter";
     if (qe && (v !== "combobox" && rt.preventDefault(), Be || Ve(!0)), Ae(!!be), Ue === "Backspace" && !wt && Se && !be && d.length) {
-      for (var Et = we(d), Kt = null, an = Et.length - 1; an >= 0; an -= 1) {
-        var Sn = Et[an];
+      for (var Et = we(d), Kt = null, ln = Et.length - 1; ln >= 0; ln -= 1) {
+        var Sn = Et[ln];
         if (!Sn.disabled) {
-          Et.splice(an, 1), Kt = Sn;
+          Et.splice(ln, 1), Kt = Sn;
           break;
         }
       }
@@ -16464,9 +16466,9 @@ var nM = ["id", "prefixCls", "className", "showSearch", "tagRender", "direction"
       });
       ht.push(Et);
     }
-    for (var Kt = arguments.length, an = new Array(Kt > 1 ? Kt - 1 : 0), Sn = 1; Sn < Kt; Sn++)
-      an[Sn - 1] = arguments[Sn];
-    de == null || de.apply(void 0, [rt].concat(an));
+    for (var Kt = arguments.length, ln = new Array(Kt > 1 ? Kt - 1 : 0), Sn = 1; Sn < Kt; Sn++)
+      ln[Sn - 1] = arguments[Sn];
+    de == null || de.apply(void 0, [rt].concat(ln));
   }, Yt = s.useState({}), zt = U(Yt, 2), tn = zt[1];
   function un() {
     tn({});
@@ -16506,7 +16508,7 @@ var nM = ["id", "prefixCls", "className", "showSearch", "tagRender", "direction"
       type: "clear",
       values: d
     }), mt("", !1, !1);
-  }, on = vR(o, dn, d, O, j, b, be, v), hn = on.allowClear, jn = on.clearIcon, Bn = /* @__PURE__ */ s.createElement(B, {
+  }, an = vR(o, dn, d, O, j, b, be, v), hn = an.allowClear, jn = an.clearIcon, Bn = /* @__PURE__ */ s.createElement(B, {
     ref: Oe
   }), mn = J(o, a, F(F(F(F(F(F(F(F(F(F({}, "".concat(o, "-focused"), ue), "".concat(o, "-multiple"), Se), "".concat(o, "-single"), !Se), "".concat(o, "-allow-clear"), O), "".concat(o, "-show-arrow"), $t), "".concat(o, "-disabled"), b), "".concat(o, "-loading"), y), "".concat(o, "-open"), Be), "".concat(o, "-customize-input"), Re), "".concat(o, "-show-search"), Ee)), Fn = /* @__PURE__ */ s.createElement(i0, {
     ref: Le,
@@ -18080,7 +18082,7 @@ const AM = v0, LM = (e) => {
       }
     }
   };
-}, FM = rn("Empty", (e) => {
+}, FM = on("Empty", (e) => {
   const {
     componentCls: t,
     controlHeightLG: n,
@@ -19229,7 +19231,7 @@ const JM = (e) => {
       focusElCls: `${t}-focused`
     })
   ];
-}, u2 = rn("Select", (e, t) => {
+}, u2 = on("Select", (e, t) => {
   let {
     rootPrefixCls: n
   } = t;
@@ -20128,7 +20130,7 @@ const j2 = (e) => {
   borderRadiusOuter: Math.min(e.borderRadiusOuter, 4)
 }))), j0 = function(e) {
   let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0;
-  return rn("Tooltip", (r) => {
+  return on("Tooltip", (r) => {
     const {
       borderRadius: o,
       colorTextLightSolid: a,
@@ -20441,7 +20443,7 @@ const da = af, K2 = (e) => {
     titleBorderBottom: a ? `${t}px ${u} ${d}` : "none",
     innerContentPadding: a ? `${f}px ${h}px` : 0
   });
-}, A0 = rn("Popover", (e) => {
+}, A0 = on("Popover", (e) => {
   const {
     colorBgElevated: t,
     colorText: n
@@ -21543,9 +21545,9 @@ var GT = ["prefixCls", "rootClassName", "style", "className", "tabIndex", "items
     return {
       list: Ce.current,
       focus: function(wt) {
-        var Ue, qe = Te(), Et = cd(qe, ce), Kt = Et.elements, an = Et.key2element, Sn = Et.element2key, In = cf(Ce.current, Kt), _n = zt ?? (In[0] ? Sn.get(In[0]) : (Ue = xe.find(function(it) {
+        var Ue, qe = Te(), Et = cd(qe, ce), Kt = Et.elements, ln = Et.key2element, Sn = Et.element2key, In = cf(Ce.current, Kt), _n = zt ?? (In[0] ? Sn.get(In[0]) : (Ue = xe.find(function(it) {
           return !it.props.disabled;
-        })) === null || Ue === void 0 ? void 0 : Ue.key), bt = an.get(_n);
+        })) === null || Ue === void 0 ? void 0 : Ue.key), bt = ln.get(_n);
         if (_n && bt) {
           var He;
           bt == null || (He = bt.focus) === null || He === void 0 || He.call(bt, wt);
@@ -21559,11 +21561,11 @@ var GT = ["prefixCls", "rootClassName", "style", "className", "tabIndex", "items
     postState: function(wt) {
       return Array.isArray(wt) ? wt : wt == null ? vo : [wt];
     }
-  }), $t = U(ct, 2), jt = $t[0], dn = $t[1], on = function(wt) {
+  }), $t = U(ct, 2), jt = $t[0], dn = $t[1], an = function(wt) {
     if (P) {
       var Ue = wt.key, qe = jt.includes(Ue), Et;
-      O ? qe ? Et = jt.filter(function(an) {
-        return an !== Ue;
+      O ? qe ? Et = jt.filter(function(ln) {
+        return ln !== Ue;
       }) : Et = [].concat(we(jt), [Ue]) : Et = [Ue], dn(Et);
       var Kt = z(z({}, wt), {}, {
         selectedKeys: Et
@@ -21572,7 +21574,7 @@ var GT = ["prefixCls", "rootClassName", "style", "className", "tabIndex", "items
     }
     !O && Ie.length && St !== "inline" && Re(vo);
   }, hn = za(function(rt) {
-    W == null || W(_l(rt)), on(rt);
+    W == null || W(_l(rt)), an(rt);
   }), jn = za(function(rt, wt) {
     var Ue = Ie.filter(function(Et) {
       return Et !== rt;
@@ -21803,7 +21805,7 @@ const QT = Z0, ZT = /* @__PURE__ */ s.createContext({
     lightTriggerColor: o
   };
 }, ey = [["colorBgBody", "bodyBg"], ["colorBgHeader", "headerBg"], ["colorBgTrigger", "triggerBg"]];
-rn("Layout", (e) => [JT(e)], J0, {
+on("Layout", (e) => [JT(e)], J0, {
   deprecatedTokens: ey
 });
 const eD = (e) => {
@@ -21912,7 +21914,7 @@ const eD = (e) => {
       }
     }
   };
-}, tD = rn(["Layout", "Sider"], (e) => [eD(e)], J0, {
+}, tD = on(["Layout", "Sider"], (e) => [eD(e)], J0, {
   deprecatedTokens: ey
 });
 var nD = globalThis && globalThis.__rest || function(e, t) {
@@ -23041,7 +23043,7 @@ const Rl = /* @__PURE__ */ s.createContext(null), ay = /* @__PURE__ */ s.forward
   };
 }, $D = function(e) {
   let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : e, n = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !0;
-  return rn("Menu", (o) => {
+  return on("Menu", (o) => {
     const {
       colorBgElevated: a,
       controlHeightLG: i,
@@ -23571,7 +23573,7 @@ const ly = ba, _D = (e) => {
 }, Is({
   contentRadius: e.borderRadiusLG,
   limitVerticalRadius: !0
-})), Os(e)), TD = rn("Dropdown", (e) => {
+})), Os(e)), TD = on("Dropdown", (e) => {
   const {
     marginXXS: t,
     sizePopupArrow: n,
@@ -26943,7 +26945,7 @@ function Fk(e, t) {
   }, [Z]);
   var un = s.useState([0, 0, 0]), sn = U(un, 2), ct = sn[0], $t = sn[1], jt = My(Y, te), dn = function(it) {
     zt(it), lt("preset");
-  }, on = function(it) {
+  }, an = function(it) {
     var vt = Ve(it);
     vt && me(!1, {
       force: !0
@@ -26997,7 +26999,7 @@ function Fk(e, t) {
     onOk: xe,
     presets: jt,
     onPresetHover: dn,
-    onPresetSubmit: on,
+    onPresetSubmit: an,
     onNow: hn,
     cellRender: Rt
   })), Et = function(it, vt) {
@@ -27005,7 +27007,7 @@ function Fk(e, t) {
     he(Mt);
   }, Kt = function() {
     Ce("input");
-  }, an = function(it, vt) {
+  }, ln = function(it, vt) {
     var Mt = ve.length, Ut = ve[Mt - 1];
     if (Mt && Ut !== vt && h && // Not change index if is not filled
     !y[Ut] && !be(Ut) && Ne[Ut]) {
@@ -27070,7 +27072,7 @@ function Fk(e, t) {
       activeHelp: !!Yt,
       allHelp: !!Yt && Ke === "preset",
       focused: De,
-      onFocus: an,
+      onFocus: ln,
       onBlur: Sn,
       onKeyDown: In,
       onSubmit: Qe,
@@ -27236,8 +27238,8 @@ function Kk(e, t) {
   }
   var me = Hy(k, M, a), Se = Py(w, N, [x], _), Ee = U(Se, 2), le = Ee[0], pe = Ee[1], ge = function(qe, Et, Kt) {
     if (j) {
-      var an = z({}, Kt);
-      delete an.range, j(de(qe), de(Et), an);
+      var ln = z({}, Kt);
+      delete ln.range, j(de(qe), de(Et), ln);
     }
   }, he = function(qe) {
     B == null || B(de(qe));
@@ -27336,7 +27338,7 @@ function Kk(e, t) {
       var Et = A ? me(De(), qe) : [qe];
       Oe(Et), !b && !i && a === Ct && Ae();
     }
-  }, on = function() {
+  }, an = function() {
     pe(!1);
   }, hn = pf(q, ne, W), jn = s.useMemo(function() {
     var Ue = Dn(o, !1), qe = Cn(o, [].concat(we(Object.keys(Ue)), ["onChange", "onCalendarChange", "style", "className", "onPanelChange"]));
@@ -27404,7 +27406,7 @@ function Kk(e, t) {
     popupStyle: m.popup,
     popupClassName: g.popup,
     visible: le,
-    onClose: on
+    onClose: an
   }), /* @__PURE__ */ s.createElement(
     qy,
     ye({}, o, {
@@ -27927,7 +27929,7 @@ const qk = (e) => {
     radioColor: t ? f : p,
     radioBgColor: t ? l : f
   };
-}, eC = rn("Radio", (e) => {
+}, eC = on("Radio", (e) => {
   const {
     controlOutline: t,
     controlOutlineWidth: n
@@ -29060,12 +29062,12 @@ const xa = (e) => {
       }
     }
   };
-}, uC = rn(["Input", "Shared"], (e) => {
+}, uC = on(["Input", "Shared"], (e) => {
   const t = Ft(e, Sa(e));
   return [cj(t), dj(t)];
 }, xa, {
   resetFont: !1
-}), dC = rn(["Input", "Component"], (e) => {
+}), dC = on(["Input", "Component"], (e) => {
   const t = Ft(e, Sa(e));
   return [
     fj(t),
@@ -30245,7 +30247,7 @@ const xa = (e) => {
     sa(e, "move-up"),
     sa(e, "move-down")
   ];
-}, fC = rn("DatePicker", (e) => {
+}, fC = on("DatePicker", (e) => {
   const t = Ft(Sa(e), Sj(e), {
     inputPaddingHorizontalBase: e.calc(e.paddingSM).sub(1).equal(),
     multipleSelectItemHeight: e.multipleItemHeight,
@@ -30788,7 +30790,7 @@ function pC(e, t) {
   });
   return [Bj(n)];
 }
-const hC = rn("Checkbox", (e, t) => {
+const hC = on("Checkbox", (e, t) => {
   let {
     prefixCls: n
   } = t;
@@ -31901,7 +31903,7 @@ const zB = (e) => {
       }
     }
   };
-}, WB = rn(["Input", "OTP"], (e) => {
+}, WB = on(["Input", "OTP"], (e) => {
   const t = Ft(e, Sa(e));
   return [KB(t)];
 }, xa);
@@ -32563,7 +32565,7 @@ const hA = (e) => {
       }
     }
   };
-}, bA = rn(["Input", "TextArea"], (e) => {
+}, bA = on(["Input", "TextArea"], (e) => {
   const t = Ft(e, Sa(e));
   return [hA(t)];
 }, xa, {
@@ -32911,8 +32913,8 @@ var YC = function(t) {
   }
   function pt(ct, $t) {
     if (ct.key === "Enter" || ct.charCode === Pe.ENTER || ct.keyCode === Pe.ENTER) {
-      for (var jt = arguments.length, dn = new Array(jt > 2 ? jt - 2 : 0), on = 2; on < jt; on++)
-        dn[on - 2] = arguments[on];
+      for (var jt = arguments.length, dn = new Array(jt > 2 ? jt - 2 : 0), an = 2; an < jt; an++)
+        dn[an - 2] = arguments[an];
       $t.apply(void 0, dn);
     }
   }
@@ -33580,7 +33582,7 @@ const MA = (e) => {
   paginationSlashMarginInlineEnd: e.marginSM,
   paginationEllipsisTextIndent: "0.13em"
   // magic for ui experience
-}, Sa(e)), LA = rn("Pagination", (e) => {
+}, Sa(e)), LA = on("Pagination", (e) => {
   const t = QC(e);
   return [BA(t), AA(t)];
 }, XC), FA = (e) => {
@@ -34141,7 +34143,7 @@ const qA = new Lt("antSpinMove", {
     dotSizeSM: t * 0.35,
     dotSizeLG: n
   };
-}, ZA = rn("Spin", (e) => {
+}, ZA = on("Spin", (e) => {
   const t = Ft(e, {
     spinDotDefault: e.colorTextDescription
   });
@@ -34864,7 +34866,7 @@ const eF = (e) => {
     innerMinMarginSM: u / 2,
     innerMaxMarginSM: u + l + l * 2
   };
-}, iF = rn("Switch", (e) => {
+}, iF = on("Switch", (e) => {
   const t = Ft(e, {
     switchDuration: e.motionDurationMid,
     switchColor: e.colorPrimary,
@@ -36184,9 +36186,9 @@ function rH(e, t) {
   }, [Be, l, le.length]), s.useEffect(function() {
     zt.current = !0;
   }, []);
-  var tn = s.useState(0), un = U(tn, 2), sn = un[0], ct = un[1], $t = s.useState(!0), jt = U($t, 2), dn = jt[0], on = jt[1];
+  var tn = s.useState(0), un = U(tn, 2), sn = un[0], ct = un[1], $t = s.useState(!0), jt = U($t, 2), dn = jt[0], an = jt[1];
   s.useEffect(function() {
-    (!_ || !R) && (De.current instanceof Element ? ct(zu(De.current).width) : ct(zu(Oe.current).width)), on(B_("position", "sticky"));
+    (!_ || !R) && (De.current instanceof Element ? ct(zu(De.current).width) : ct(zu(Oe.current).width)), an(B_("position", "sticky"));
   }, []), s.useEffect(function() {
     R && w && (w.body.current = De.current);
   });
@@ -36246,7 +36248,7 @@ function rH(e, t) {
       stickyOffsets: ze,
       flattenColumns: pe
     }, se)));
-    var an = z(z(z({
+    var ln = z(z(z({
       noData: !I.length,
       maxContentScroll: Be && xe === "max-content"
     }, On), Ne), {}, {
@@ -36254,11 +36256,11 @@ function rH(e, t) {
       stickyClassName: mt,
       onScroll: lt
     });
-    Fn = /* @__PURE__ */ s.createElement(s.Fragment, null, b !== !1 && /* @__PURE__ */ s.createElement(Ng, ye({}, an, {
+    Fn = /* @__PURE__ */ s.createElement(s.Fragment, null, b !== !1 && /* @__PURE__ */ s.createElement(Ng, ye({}, ln, {
       stickyTopOffset: Ge,
       className: "".concat(r, "-header"),
       ref: Le
-    }), hn), Kt, $e && $e !== "top" && /* @__PURE__ */ s.createElement(Ng, ye({}, an, {
+    }), hn), Kt, $e && $e !== "top" && /* @__PURE__ */ s.createElement(Ng, ye({}, ln, {
       stickyBottomOffset: Ze,
       className: "".concat(r, "-summary"),
       ref: Ce
@@ -38695,7 +38697,7 @@ const AH = (e) => {
     directoryNodeSelectedColor: t,
     directoryNodeSelectedBg: n
   });
-}, GH = rn("Tree", (e, t) => {
+}, GH = on("Tree", (e, t) => {
   let {
     prefixCls: n
   } = t;
@@ -41033,7 +41035,7 @@ const gl = "ascend", Xc = "descend", Fl = (e) => typeof e.sorter == "object" &&
     expandIconSize: D,
     expandIconScale: S / D
   };
-}, Jg = 2, J3 = rn("Table", (e) => {
+}, Jg = 2, J3 = on("Table", (e) => {
   const {
     colorTextHeading: t,
     colorSplit: n,
@@ -41467,7 +41469,7 @@ const ax = Ln(
         children: "*"
       }
     ) : null, u = () => n ? typeof n != "string" ? n : /* @__PURE__ */ fe.jsx(
-      ln,
+      rn,
       {
         asTag: "span",
         variant: e,
@@ -41476,7 +41478,7 @@ const ax = Ln(
       }
     ) : null;
     return /* @__PURE__ */ fe.jsxs(
-      ln,
+      rn,
       {
         asTag: "label",
         variant: e,
@@ -41535,7 +41537,7 @@ const iz = {
         children: t
       }
     ) : null, p = () => !n || f ? null : /* @__PURE__ */ fe.jsx(
-      ln,
+      rn,
       {
         asTag: "p",
         variant: e === Ir.small ? "body5" : "body3",
@@ -41545,7 +41547,7 @@ const iz = {
         children: n
       }
     ), h = () => f ? /* @__PURE__ */ fe.jsx(
-      ln,
+      rn,
       {
         asTag: "p",
         variant: e === Ir.small ? "body6" : "body4",
@@ -42263,7 +42265,7 @@ const bV = ({
               } : () => u(g),
               children: [
                 /* @__PURE__ */ fe.jsx(
-                  ln,
+                  rn,
                   {
                     variant: "body4",
                     className: `${d(h, "label")} ${f(p, "label")}`,
@@ -42410,8 +42412,8 @@ const CV = ({
       style: { maxWidth: "475px", padding: "0px", ...l },
       ...C,
       children: [
-        /* @__PURE__ */ fe.jsx("span", { className: "modal-container__title", children: /* @__PURE__ */ fe.jsx(ln, { variant: "h4", children: e }) }),
-        t && /* @__PURE__ */ fe.jsx("span", { className: "modal-container__description", children: /* @__PURE__ */ fe.jsx(ln, { variant: "body3", children: /* @__PURE__ */ fe.jsx($, { text: t }) }) }),
+        /* @__PURE__ */ fe.jsx("span", { className: "modal-container__title", children: /* @__PURE__ */ fe.jsx(rn, { variant: "h4", children: e }) }),
+        t && /* @__PURE__ */ fe.jsx("span", { className: "modal-container__description", children: /* @__PURE__ */ fe.jsx(rn, { variant: "body3", children: /* @__PURE__ */ fe.jsx($, { text: t }) }) }),
         a && /* @__PURE__ */ fe.jsx("span", { className: "modal-container__body-content", children: a }),
         /* @__PURE__ */ fe.jsx(
           Kf,
@@ -42471,7 +42473,7 @@ const SV = ({
               onClick: () => u(m),
               style: o,
               children: /* @__PURE__ */ fe.jsx(
-                ln,
+                rn,
                 {
                   variant: "body4",
                   className: `tab-button--label${p}`,
@@ -42535,7 +42537,7 @@ const Iz = (e, t) => {
     $(y);
   }, [y]);
   const _ = (I, O) => `dropdown--${O} dropdown--${O}--${I ? "selected" : "no-selected"}`, M = (I, O) => `dropdown--${O}--${I ? "disabled" : "enabled"}`, k = (I, O) => O === "label" || O === "placeholder" ? `dropdown--${O}--${I ? "focus" : "onblur"}` : `dropdown--${O}--${I ? "open" : "close"}`, D = typeof e == "function" ? e(Mz) : e, P = () => h ? /* @__PURE__ */ fe.jsx(
-    ln,
+    rn,
     {
       asTag: "p",
       variant: o === Ir.small ? "body6" : "body4",
@@ -42580,14 +42582,14 @@ const Iz = (e, t) => {
               } : () => b(!v),
               children: [
                 x ? /* @__PURE__ */ fe.jsx(
-                  ln,
+                  rn,
                   {
                     variant: tp[o],
                     className: `dropdown--label dropdown--label--${o} ${k(v, "label")} ${M(r, "label")} dropdown--label--enabled--${h ? "error" : "no-error"}`,
                     children: x.label
                   }
                 ) : /* @__PURE__ */ fe.jsx(
-                  ln,
+                  rn,
                   {
                     variant: tp[o],
                     className: `dropdown--placeholder dropdown--label--${o} ${k(v, "placeholder")} ${M(r, "placeholder")}  dropdown--placeholder--enabled--${h ? "error" : "no-error"}`,
@@ -42621,7 +42623,7 @@ const Iz = (e, t) => {
                     onClick: () => w(I),
                     className: `${_(R, "option")} dropdown--option--${o} ${M(r || !!T, "option")}`,
                     children: /* @__PURE__ */ fe.jsx(
-                      ln,
+                      rn,
                       {
                         variant: _z[o],
                         className: `${_(R, "text")} dropdown--text--${o} ${M(r || !!T, "text")}`,
@@ -42694,7 +42696,7 @@ const xV = ({
     n || ($(null), M(""), d == null || d());
   }, K = () => /* @__PURE__ */ fe.jsxs("div", { className: "dropdown-filter--option-selected", children: [
     f ? null : /* @__PURE__ */ fe.jsx(
-      ln,
+      rn,
       {
         variant: g[o],
         className: `dropdown-filter--text dropdown-filter--text--bold dropdown-filter--text--${o} dropdown-filter--text--selected--${w ? "error" : "no-error"}`,
@@ -42702,7 +42704,7 @@ const xV = ({
       }
     ),
     /* @__PURE__ */ fe.jsx(
-      ln,
+      rn,
       {
         variant: p[o],
         className: `dropdown-filter--text--${o} dropdown-filter--text--selected--${w ? "error" : "no-error"}`,
@@ -42711,7 +42713,7 @@ const xV = ({
     ),
     S == null ? void 0 : S.component
   ] }), L = () => w ? /* @__PURE__ */ fe.jsx(
-    ln,
+    rn,
     {
       asTag: "p",
       variant: o === Ir.small ? "body6" : "body4",
@@ -42813,7 +42815,7 @@ const xV = ({
                     className: `${j(Y, "option")} dropdown-filter--option--${o} ${B(n || !!(V != null && V.disabled), "option")}`,
                     children: [
                       f ? null : /* @__PURE__ */ fe.jsx(
-                        ln,
+                        rn,
                         {
                           variant: p[o],
                           className: `dropdown-filter--text dropdown-filter--text--bold dropdown-filter--text--${o} ${B(n || !!(V != null && V.disabled), "text")}`,
@@ -42821,7 +42823,7 @@ const xV = ({
                         }
                       ),
                       /* @__PURE__ */ fe.jsx(
-                        ln,
+                        rn,
                         {
                           variant: p[o],
                           className: `dropdown-filter--text dropdown-filter--text--${o} ${B(n || !!(V != null && V.disabled), "text")}`,
@@ -42843,7 +42845,7 @@ const xV = ({
                   }
                 ),
                 /* @__PURE__ */ fe.jsx(
-                  ln,
+                  rn,
                   {
                     variant: p[o],
                     className: "dropdown-filter--empty-text",
@@ -42957,7 +42959,7 @@ const $V = ({
               }
             ),
             /* @__PURE__ */ fe.jsx(
-              ln,
+              rn,
               {
                 variant: "body3",
                 className: "dropdown-multiple__items-list--empty-text",
@@ -43023,7 +43025,11 @@ const jz = Q.forwardRef(
         open: l,
         onCancel: c,
         footer: null,
-        style: { maxWidth: "475px", padding: "0px", ...n },
+        style: {
+          maxWidth: a.width ? "fit-content" : "475px",
+          padding: "0px",
+          ...n
+        },
         panelRef: i,
         ...a,
         children: o
@@ -43039,7 +43045,7 @@ const Bz = Q.forwardRef(
       className: `modal-container__title ${t}`.trim(),
       ...n,
       ref: r,
-      children: /* @__PURE__ */ fe.jsx(ln, { variant: "h4", children: e })
+      children: /* @__PURE__ */ fe.jsx(rn, { variant: "h4", children: e })
     }
   )
 );
@@ -43213,7 +43219,7 @@ const hx = Eo({
   const { size: n } = Wz(), r = {
     small: "body6",
     big: "body4"
-  }, o = () => typeof e == "string" ? /* @__PURE__ */ fe.jsx(ln, { variant: r[n], children: e }) : e;
+  }, o = () => typeof e == "string" ? /* @__PURE__ */ fe.jsx(rn, { variant: r[n], children: e }) : e;
   return /* @__PURE__ */ fe.jsx("div", { className: "alert__description", ...t, children: o() });
 }, PV = ({ children: e, ...t }) => /* @__PURE__ */ fe.jsx("span", { className: "alert__icon", ...t, children: e });
 function Hl() {
@@ -44992,7 +44998,7 @@ const Jz = 0, RV = ({
 }) => {
   const i = nn(() => n ? { opacity: 0.5, filter: "grayscale(1)" } : {}, [n]), l = Zz.map((c) => ({
     value: c.phone_code,
-    label: /* @__PURE__ */ fe.jsx(fe.Fragment, { children: /* @__PURE__ */ fe.jsxs(ln, { variant: "body4", children: [
+    label: /* @__PURE__ */ fe.jsx(fe.Fragment, { children: /* @__PURE__ */ fe.jsxs(rn, { variant: "body4", children: [
       /* @__PURE__ */ fe.jsx(
         Qz,
         {
@@ -45059,7 +45065,7 @@ export {
   cV as Toggle,
   fV as Tooltip,
   hV as TooltipWrapper,
-  ln as Typography,
+  rn as Typography,
   oV as colorTokens,
   Jt as colors,
   aV as shapeTokens,

package/dist/src/components/atoms/Typography/Typography.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TypographyProps } from './types';
-type PolymorphicProps<E extends React.ElementType> = TypographyProps & {
-    asTag?: E;
-} & Omit<React.ComponentPropsWithoutRef<E>, keyof TypographyProps>;
-export declare const Typography: React.ForwardRefExoticComponent<Omit<PolymorphicProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLElement>>;
-export {};
+export declare const Typography: React.ForwardRefExoticComponent<{
+    asTag?: string | undefined;
+} & TypographyProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;

package/dist/src/components/atoms/Typography/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export interface TypographyProps {
+export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
     /**
      *
      *  h1      - font-family: "Roca One", serif; font-weight: lighter; font-size: 56px; letter-spacing: 0,2px; line-height: 60px
@@ -30,10 +30,9 @@ export interface TypographyProps {
      *
      */
     variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'body1' | 'body2' | 'body3' | 'body4' | 'body5' | 'body6' | 'button1' | 'button2';
-    className?: string;
     dataTestid?: string;
     underline?: boolean;
-    children: React.ReactNode;
+    className?: string;
     customStyles?: React.CSSProperties;
     bolder?: boolean;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ctc-component-library",
   "private": false,
-  "version": "0.1.76",
+  "version": "0.1.77",
   "type": "module",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",