@abdellatifui/react 3.2.16 → 3.2.17

package/dist/nextgen.js

@@ -4730,7 +4730,7 @@ function Tp(e) {
   var n = Ep(e, "string");
   return Pr(n) == "symbol" ? n : n + "";
 }
-function ht(e, n, t) {
+function gt(e, n, t) {
   return (n = Tp(n)) in e ? Object.defineProperty(e, n, {
     value: t,
     enumerable: !0,
@@ -4749,29 +4749,29 @@ function Ap(e, n) {
 var ct = /* @__PURE__ */ Np(function e() {
   Ap(this, e);
 });
-ht(ct, "ripple", !1);
-ht(ct, "inputStyle", "outlined");
-ht(ct, "locale", "en");
-ht(ct, "appendTo", null);
-ht(ct, "cssTransition", !0);
-ht(ct, "autoZIndex", !0);
-ht(ct, "hideOverlaysOnDocumentScrolling", !1);
-ht(ct, "nonce", null);
-ht(ct, "nullSortOrder", 1);
-ht(ct, "zIndex", {
+gt(ct, "ripple", !1);
+gt(ct, "inputStyle", "outlined");
+gt(ct, "locale", "en");
+gt(ct, "appendTo", null);
+gt(ct, "cssTransition", !0);
+gt(ct, "autoZIndex", !0);
+gt(ct, "hideOverlaysOnDocumentScrolling", !1);
+gt(ct, "nonce", null);
+gt(ct, "nullSortOrder", 1);
+gt(ct, "zIndex", {
   modal: 1100,
   overlay: 1e3,
   menu: 1e3,
   tooltip: 1100,
   toast: 1200
 });
-ht(ct, "pt", void 0);
-ht(ct, "filterMatchModeOptions", {
+gt(ct, "pt", void 0);
+gt(ct, "filterMatchModeOptions", {
   text: [Je.STARTS_WITH, Je.CONTAINS, Je.NOT_CONTAINS, Je.ENDS_WITH, Je.EQUALS, Je.NOT_EQUALS],
   numeric: [Je.EQUALS, Je.NOT_EQUALS, Je.LESS_THAN, Je.LESS_THAN_OR_EQUAL_TO, Je.GREATER_THAN, Je.GREATER_THAN_OR_EQUAL_TO],
   date: [Je.DATE_IS, Je.DATE_IS_NOT, Je.DATE_BEFORE, Je.DATE_AFTER]
 });
-ht(ct, "changeTheme", function(e, n, t, r) {
+gt(ct, "changeTheme", function(e, n, t, r) {
   var o, s = document.getElementById(t);
   if (!s)
     throw Error("Element with id ".concat(t, " not found."));
@@ -5711,7 +5711,7 @@ const la = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, ca = $e, y
     timeout: i,
     period: a,
     onAbort: l
-  } = e, { closeModel: u } = rt(pi), f = Ct(), p = Ct(), m = () => {
+  } = e, { closeModel: u } = rt(pi), f = dt(), p = dt(), m = () => {
     if (u(), l)
       return l();
   };
@@ -6118,7 +6118,7 @@ const mm = ({
 }, gm = (e) => /* @__PURE__ */ c.jsx(ui, { ...e, type: "main" }), ym = (e) => /* @__PURE__ */ c.jsx(ui, { ...e, type: "sub" }), go = (e) => /* @__PURE__ */ c.jsx(ui, { ...e, type: "normal" }), mw = (e) => {
   const { children: n } = e;
   return /* @__PURE__ */ c.jsx("div", { ...e, className: "custom-scroll-bar1", children: n });
-}, Ct = (e = 8) => "css-" + Math.random().toString(36).substr(2, e), ua = (e = 8, n = !0) => n ? "str-" + Math.random().toString(36).substr(2, e) : Math.random().toString(36).substr(2, e), it = (e = 8, n = !0, t = !1) => {
+}, dt = (e = 8) => "css-" + Math.random().toString(36).substr(2, e), ua = (e = 8, n = !0) => n ? "str-" + Math.random().toString(36).substr(2, e) : Math.random().toString(36).substr(2, e), it = (e = 8, n = !0, t = !1) => {
   const [r, o] = I("");
   return K(() => {
     e && t ? o("css-" + Math.random().toString(36).substr(2, e)) : e && n ? o("_" + Math.random().toString(36).substr(2, e)) : e && !n && o(Math.random().toString(36).substr(2, e));
@@ -7250,7 +7250,7 @@ const eh = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAA
     setSupressLinkHover: E = () => {
     },
     nodeIconMapperParentClassName: x = ""
-  } = e, k = ie(), v = ue(() => Ct(), []), [S, N] = I([n, t]), [A, P] = I(!1), [B, F] = I(1), [b, O] = I(null), _ = ue(() => /* @__PURE__ */ c.jsx("div", { ref: k, className: "w-[50px] h-[50px] hover:scale-[1.5] transition-all ease-in-out duration-300 bg-black/70 p-2 rounded-2xl outline-blue-600 outline z-300", children: /* @__PURE__ */ c.jsx("img", { className: "w-full h-full", src: eh, alt: "s" }) }), [r]);
+  } = e, k = ie(), v = ue(() => dt(), []), [S, N] = I([n, t]), [A, P] = I(!1), [B, F] = I(1), [b, O] = I(null), _ = ue(() => /* @__PURE__ */ c.jsx("div", { ref: k, className: "w-[50px] h-[50px] hover:scale-[1.5] transition-all ease-in-out duration-300 bg-black/70 p-2 rounded-2xl outline-blue-600 outline z-300", children: /* @__PURE__ */ c.jsx("img", { className: "w-full h-full", src: eh, alt: "s" }) }), [r]);
   K(() => {
     console.log("Mounting PinItem ", o);
   }, []), K(() => {
@@ -7314,6 +7314,7 @@ const eh = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAYAAADh5qNwAA
         "div",
         {
           "data-id": o?.elementId,
+          "data-view-id": o?.view_id,
           "data-active": o?.elementId == m?.elementId ? "true" : "false",
           onContextMenu: (L) => {
             C({ event: L, data: o, type: "node", id: v, mapApi: a, ref: k }), p(L);
@@ -8094,12 +8095,13 @@ const xh = (e) => {
     if (!me.current) return;
     const Ge = Q.map((pe) => ({
       ...pe,
-      connections: []
+      connections: [],
+      view_id: dt()
     }));
     console.log("processing connections again !! ");
     const tt = _e ? ve : ve?.map((pe) => ({
       ...pe,
-      u_id: pe.u_id || Ct(),
+      u_id: pe.u_id || dt(),
       linkColorHex: pe.linkColor || s,
       linkColor: Cr(pe?.linkColor),
       linkAnimationColorHex: pe.linkAnimationColor || i,
@@ -8110,7 +8112,7 @@ const xh = (e) => {
       sourcePort: pe?.sourcePort,
       destinationPort: pe?.destinationPort,
       data: pe,
-      connCountBoxId: Ct(),
+      connCountBoxId: dt(),
       timestamp: [0, 5, 10, 15],
       sourcesId: (pe.sourceId + pe.destinationId).toString().split("").sort().join(""),
       fullSourcesId: (pe.sourceId + pe?.sourcePort + pe.destinationId + pe?.destinationPort).toString().split("").sort().join("")
@@ -8122,28 +8124,28 @@ const xh = (e) => {
       const Qe = Et.get(pe?.sourcesId);
       pe.linkCount = Qe?.length || 0, pe.linksGroup = Qe;
     });
-    const mr = /* @__PURE__ */ new Set(), yt = [], Fi = [];
+    const mr = /* @__PURE__ */ new Set(), vt = [], Fi = [];
     for (const pe of tt || []) {
       if (mr.has(pe.sourcesId)) {
         Fi.push(pe.sourceId);
         continue;
       }
-      yt.push(pe), mr.add(pe.sourcesId);
+      vt.push(pe), mr.add(pe.sourcesId);
     }
     const us = /* @__PURE__ */ new Map();
     Ge.forEach((pe, Qe) => {
       us.set(pe?.elementId, Qe);
-    }), yt.forEach((pe, Qe) => {
+    }), vt.forEach((pe, Qe) => {
       const hr = us.get(pe?.sourceId), gr = us.get(pe?.destinationId);
       if (hr !== void 0) {
         const yr = Ge[hr];
-        yt[Qe].nodes || (yt[Qe].nodes = []), yt[Qe].nodes.push(yr), yt[Qe].source = yr?.location, Ge[hr].connections || (Ge[hr].connections = []), Ge[hr].connections.push(pe);
+        vt[Qe].nodes || (vt[Qe].nodes = []), vt[Qe].nodes.push(yr), vt[Qe].source = yr?.location, Ge[hr].connections || (Ge[hr].connections = []), Ge[hr].connections.push(pe);
       }
       if (gr !== void 0) {
         const yr = Ge[gr];
-        yt[Qe].nodes || (yt[Qe].nodes = []), yt[Qe].nodes.push(yr), yt[Qe].destination = yr?.location, Ge[gr].connections || (Ge[gr].connections = []), Ge[gr].connections.push(pe);
+        vt[Qe].nodes || (vt[Qe].nodes = []), vt[Qe].nodes.push(yr), vt[Qe].destination = yr?.location, Ge[gr].connections || (Ge[gr].connections = []), Ge[gr].connections.push(pe);
       }
-    }), _t(Ge), kt(yt), te && console.log(`Processed: seen=${mr.size}, f0=${yt.length}, ignored=${Fi.length}, all=${r.length}`);
+    }), _t(Ge), kt(vt), te && console.log(`Processed: seen=${mr.size}, f0=${vt.length}, ignored=${Fi.length}, all=${r.length}`);
   }, [me]), pr = (Q, ve) => {
     if (!X) return;
     jn(!0);
@@ -8185,7 +8187,7 @@ const xh = (e) => {
     Pn(Q), N(Q);
   }
   function yd(Q) {
-    Q.u_id = Ct(), _t((ve) => [...ve, Q]);
+    Q.u_id = dt(), _t((ve) => [...ve, Q]);
   }
   function vd(Q, ve = {}) {
     const _e = le?.find((Ge) => Ge?.elementId == Q);
@@ -8197,7 +8199,7 @@ const xh = (e) => {
     });
   }
   function bd(Q) {
-    Q.u_id = Ct(), kt((ve) => [...ve, Q]);
+    Q.u_id = dt(), kt((ve) => [...ve, Q]);
   }
   function xd(Q) {
     const ve = ut?.filter((_e) => _e?.id != Q);
@@ -8412,7 +8414,7 @@ const xh = (e) => {
                       setSupressLinkHover: hn,
                       nodeIconMapperParentClassName: se
                     },
-                    "_node_" + Q?.elementId
+                    Q?.view_id
                   )),
                   O && /* @__PURE__ */ c.jsx(
                     ph,
@@ -9657,7 +9659,7 @@ function Gc(e) {
     n[t] = Gc(e[t]);
   }), n;
 }
-function mt(e, n, t = {
+function ht(e, n, t = {
   clone: !0
 }) {
   const r = t.clone ? {
@@ -9665,7 +9667,7 @@ function mt(e, n, t = {
   } : e;
   return Ht(e) && Ht(n) && Object.keys(n).forEach((o) => {
     /* @__PURE__ */ R.isValidElement(n[o]) || vo.isValidElementType(n[o]) ? r[o] = n[o] : Ht(n[o]) && // Avoid prototype pollution
-    Object.prototype.hasOwnProperty.call(e, o) && Ht(e[o]) ? r[o] = mt(e[o], n[o], t) : t.clone ? r[o] = Ht(n[o]) ? Gc(n[o]) : n[o] : r[o] = n[o];
+    Object.prototype.hasOwnProperty.call(e, o) && Ht(e[o]) ? r[o] = ht(e[o], n[o], t) : t.clone ? r[o] = Ht(n[o]) ? Gc(n[o]) : n[o] : r[o] = n[o];
   }), r;
 }
 const Uh = (e) => {
@@ -9773,7 +9775,7 @@ const Xh = {
   borderRadius: 4
 }, ln = process.env.NODE_ENV !== "production" ? h.oneOfType([h.number, h.string, h.object, h.array]) : {};
 function Nr(e, n) {
-  return n ? mt(e, n, {
+  return n ? ht(e, n, {
     clone: !1
     // No need to clone deep, it's way faster.
   }) : e;
@@ -9968,7 +9970,7 @@ function Mo(...e) {
   }), r), {}), t = (r) => Object.keys(r).reduce((o, s) => n[s] ? Nr(o, n[s](r)) : o, {});
   return t.propTypes = process.env.NODE_ENV !== "production" ? e.reduce((r, o) => Object.assign(r, o.propTypes), {}) : {}, t.filterProps = e.reduce((r, o) => r.concat(o.filterProps), []), t;
 }
-function bt(e) {
+function xt(e) {
   return typeof e != "number" ? e : `${e}px solid`;
 }
 function wt(e, n) {
@@ -9978,7 +9980,7 @@ function wt(e, n) {
     transform: n
   });
 }
-const ig = wt("border", bt), ag = wt("borderTop", bt), lg = wt("borderRight", bt), cg = wt("borderBottom", bt), ug = wt("borderLeft", bt), dg = wt("borderColor"), fg = wt("borderTopColor"), pg = wt("borderRightColor"), mg = wt("borderBottomColor"), hg = wt("borderLeftColor"), gg = wt("outline", bt), yg = wt("outlineColor"), Do = (e) => {
+const ig = wt("border", xt), ag = wt("borderTop", xt), lg = wt("borderRight", xt), cg = wt("borderBottom", xt), ug = wt("borderLeft", xt), dg = wt("borderColor"), fg = wt("borderTopColor"), pg = wt("borderRightColor"), mg = wt("borderBottomColor"), hg = wt("borderLeftColor"), gg = wt("outline", xt), yg = wt("outlineColor"), Do = (e) => {
   if (e.borderRadius !== void 0 && e.borderRadius !== null) {
     const n = Fr(e.theme, "shape.borderRadius", 4, "borderRadius"), t = (r) => ({
       borderRadius: Lr(n, r)
@@ -10069,12 +10071,12 @@ const Ng = Be({
   transform: Hn
 });
 Mo(Ng, Ag, Rg);
-function dt(e) {
+function ft(e) {
   return e <= 1 && e !== 0 ? `${e * 100}%` : e;
 }
 const Pg = Be({
   prop: "width",
-  transform: dt
+  transform: ft
 }), xi = (e) => {
   if (e.maxWidth !== void 0 && e.maxWidth !== null) {
     const n = (t) => {
@@ -10084,7 +10086,7 @@ const Pg = Be({
       } : {
         maxWidth: r
       } : {
-        maxWidth: dt(t)
+        maxWidth: ft(t)
       };
     };
     return qt(e, e.maxWidth, n);
@@ -10094,26 +10096,26 @@ const Pg = Be({
 xi.filterProps = ["maxWidth"];
 const $g = Be({
   prop: "minWidth",
-  transform: dt
+  transform: ft
 }), jg = Be({
   prop: "height",
-  transform: dt
+  transform: ft
 }), Og = Be({
   prop: "maxHeight",
-  transform: dt
+  transform: ft
 }), _g = Be({
   prop: "minHeight",
-  transform: dt
+  transform: ft
 });
 Be({
   prop: "size",
   cssProperty: "width",
-  transform: dt
+  transform: ft
 });
 Be({
   prop: "size",
   cssProperty: "height",
-  transform: dt
+  transform: ft
 });
 const Ig = Be({
   prop: "boxSizing"
@@ -10123,23 +10125,23 @@ const Bo = {
   // borders
   border: {
     themeKey: "borders",
-    transform: bt
+    transform: xt
   },
   borderTop: {
     themeKey: "borders",
-    transform: bt
+    transform: xt
   },
   borderRight: {
     themeKey: "borders",
-    transform: bt
+    transform: xt
   },
   borderBottom: {
     themeKey: "borders",
-    transform: bt
+    transform: xt
   },
   borderLeft: {
     themeKey: "borders",
-    transform: bt
+    transform: xt
   },
   borderColor: {
     themeKey: "palette"
@@ -10158,7 +10160,7 @@ const Bo = {
   },
   outline: {
     themeKey: "borders",
-    transform: bt
+    transform: xt
   },
   outlineColor: {
     themeKey: "palette"
@@ -10364,22 +10366,22 @@ const Bo = {
   },
   // sizing
   width: {
-    transform: dt
+    transform: ft
   },
   maxWidth: {
     style: xi
   },
   minWidth: {
-    transform: dt
+    transform: ft
   },
   height: {
-    transform: dt
+    transform: ft
   },
   maxHeight: {
-    transform: dt
+    transform: ft
   },
   minHeight: {
-    transform: dt
+    transform: ft
   },
   boxSizing: {},
   // typography
@@ -10513,7 +10515,7 @@ function Ci(e = {}, ...n) {
     shape: s = {},
     ...i
   } = e, a = Yh(t), l = Kc(o);
-  let u = mt({
+  let u = ht({
     breakpoints: a,
     direction: "ltr",
     components: {},
@@ -10528,7 +10530,7 @@ function Ci(e = {}, ...n) {
       ...s
     }
   }, i);
-  return u = Kh(u), u.applyStyles = Fg, u = n.reduce((f, p) => mt(f, p), u), u.unstable_sxConfig = {
+  return u = Kh(u), u.applyStyles = Fg, u = n.reduce((f, p) => ht(f, p), u), u.unstable_sxConfig = {
     ...Bo,
     ...i?.unstable_sxConfig
   }, u.unstable_sx = function(p) {
@@ -11058,7 +11060,7 @@ function yy(e, n = {}) {
       css: N,
       varsWithDefaults: A
     } = Ss(v, n);
-    g = mt(g, A), y[k] = {
+    g = ht(g, A), y[k] = {
       css: N,
       vars: S
     };
@@ -11068,7 +11070,7 @@ function yy(e, n = {}) {
       vars: v,
       varsWithDefaults: S
     } = Ss(d, n);
-    g = mt(g, S), y[l] = {
+    g = ht(g, S), y[l] = {
       css: k,
       vars: v
     };
@@ -11096,7 +11098,7 @@ function yy(e, n = {}) {
       return Object.entries(y).forEach(([, {
         vars: v
       }]) => {
-        k = mt(k, v);
+        k = ht(k, v);
       }), k;
     },
     generateStyleSheets: () => {
@@ -11424,7 +11426,7 @@ const theme2 = createTheme({ palette: {
     return o ? (Qa(o, C, "light", x, r), Qa(o, C, "dark", k, r)) : (Xa(C, "light", x, r), Xa(C, "dark", k, r)), C.contrastText || (C.contrastText = m(C.main)), C;
   };
   let y;
-  return n === "light" ? y = tu() : n === "dark" && (y = ru()), process.env.NODE_ENV !== "production" && (y || console.error(`MUI: The palette mode \`${n}\` is not supported.`)), mt({
+  return n === "light" ? y = tu() : n === "dark" && (y = ru()), process.env.NODE_ENV !== "production" && (y || console.error(`MUI: The palette mode \`${n}\` is not supported.`)), ht({
     // A collection of common colors.
     common: {
       ...jr
@@ -11566,7 +11568,7 @@ function Py(e, n) {
       letterSpacing: "inherit"
     }
   };
-  return mt({
+  return ht({
     htmlFontSize: l,
     pxToRem: g,
     fontFamily: t,
@@ -11731,7 +11733,7 @@ function Us(e = {}, ...n) {
     ...s,
     colorSpace: u
   }), m = Ci(e);
-  let g = mt(m, {
+  let g = ht(m, {
     mixins: Ay(m.breakpoints, r),
     palette: p,
     // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
@@ -11742,7 +11744,7 @@ function Us(e = {}, ...n) {
       ...Fy
     }
   });
-  if (g = mt(g, f), g = n.reduce((y, d) => mt(y, d), g), process.env.NODE_ENV !== "production") {
+  if (g = ht(g, f), g = n.reduce((y, d) => ht(y, d), g), process.env.NODE_ENV !== "production") {
     const y = ["active", "checked", "completed", "disabled", "error", "expanded", "focused", "focusVisible", "required", "selected"], d = (C, w) => {
       let E;
       for (E in C) {
@@ -11992,7 +11994,7 @@ function Qy(e = {}, ...n) {
       const D = b[H];
       H !== "tonalOffset" && D && typeof D == "object" && (D.main && z(b[H], "mainChannel", kr(Er(D.main))), D.light && z(b[H], "lightChannel", kr(Er(D.light))), D.dark && z(b[H], "darkChannel", kr(Er(D.dark))), D.contrastText && z(b[H], "contrastTextChannel", kr(Er(D.contrastText))), H === "text" && (Vt(b[H], "primary"), Vt(b[H], "secondary")), H === "action" && (D.active && Vt(b[H], "active"), D.selected && Vt(b[H], "selected")));
     });
-  }), S = n.reduce((F, b) => mt(F, b), S);
+  }), S = n.reduce((F, b) => ht(F, b), S);
   const N = {
     prefix: s,
     disableCssColorScheme: o,
@@ -12802,7 +12804,7 @@ const yv = de((e, n) => {
 );
 function gu(e, n = null) {
   return e.map((t) => {
-    const r = Ct();
+    const r = dt();
     return {
       ...t,
       c_id: r,
@@ -15701,7 +15703,7 @@ function Xo(...e) {
   }), r), {}), t = (r) => Object.keys(r).reduce((o, s) => n[s] ? Ar(o, n[s](r)) : o, {});
   return t.propTypes = process.env.NODE_ENV !== "production" ? e.reduce((r, o) => Object.assign(r, o.propTypes), {}) : {}, t.filterProps = e.reduce((r, o) => r.concat(o.filterProps), []), t;
 }
-function xt(e) {
+function Ct(e) {
   return typeof e != "number" ? e : `${e}px solid`;
 }
 function St(e, n) {
@@ -15711,7 +15713,7 @@ function St(e, n) {
     transform: n
   });
 }
-const c0 = St("border", xt), u0 = St("borderTop", xt), d0 = St("borderRight", xt), f0 = St("borderBottom", xt), p0 = St("borderLeft", xt), m0 = St("borderColor"), h0 = St("borderTopColor"), g0 = St("borderRightColor"), y0 = St("borderBottomColor"), v0 = St("borderLeftColor"), b0 = St("outline", xt), x0 = St("outlineColor"), Qo = (e) => {
+const c0 = St("border", Ct), u0 = St("borderTop", Ct), d0 = St("borderRight", Ct), f0 = St("borderBottom", Ct), p0 = St("borderLeft", Ct), m0 = St("borderColor"), h0 = St("borderTopColor"), g0 = St("borderRightColor"), y0 = St("borderBottomColor"), v0 = St("borderLeftColor"), b0 = St("outline", Ct), x0 = St("outlineColor"), Qo = (e) => {
   if (e.borderRadius !== void 0 && e.borderRadius !== null) {
     const n = Br(e.theme, "shape.borderRadius", 4, "borderRadius"), t = (r) => ({
       borderRadius: Vr(n, r)
@@ -15802,12 +15804,12 @@ const P0 = Ve({
   transform: Un
 });
 Xo(P0, $0, j0);
-function ft(e) {
+function pt(e) {
   return e <= 1 && e !== 0 ? `${e * 100}%` : e;
 }
 const O0 = Ve({
   prop: "width",
-  transform: ft
+  transform: pt
 }), Oi = (e) => {
   if (e.maxWidth !== void 0 && e.maxWidth !== null) {
     const n = (t) => {
@@ -15818,7 +15820,7 @@ const O0 = Ve({
       } : {
         maxWidth: s
       } : {
-        maxWidth: ft(t)
+        maxWidth: pt(t)
       };
     };
     return Kt(e, e.maxWidth, n);
@@ -15828,26 +15830,26 @@ const O0 = Ve({
 Oi.filterProps = ["maxWidth"];
 const _0 = Ve({
   prop: "minWidth",
-  transform: ft
+  transform: pt
 }), I0 = Ve({
   prop: "height",
-  transform: ft
+  transform: pt
 }), M0 = Ve({
   prop: "maxHeight",
-  transform: ft
+  transform: pt
 }), D0 = Ve({
   prop: "minHeight",
-  transform: ft
+  transform: pt
 });
 Ve({
   prop: "size",
   cssProperty: "width",
-  transform: ft
+  transform: pt
 });
 Ve({
   prop: "size",
   cssProperty: "height",
-  transform: ft
+  transform: pt
 });
 const z0 = Ve({
   prop: "boxSizing"
@@ -15857,23 +15859,23 @@ const ts = {
   // borders
   border: {
     themeKey: "borders",
-    transform: xt
+    transform: Ct
   },
   borderTop: {
     themeKey: "borders",
-    transform: xt
+    transform: Ct
   },
   borderRight: {
     themeKey: "borders",
-    transform: xt
+    transform: Ct
   },
   borderBottom: {
     themeKey: "borders",
-    transform: xt
+    transform: Ct
   },
   borderLeft: {
     themeKey: "borders",
-    transform: xt
+    transform: Ct
   },
   borderColor: {
     themeKey: "palette"
@@ -15892,7 +15894,7 @@ const ts = {
   },
   outline: {
     themeKey: "borders",
-    transform: xt
+    transform: Ct
   },
   outlineColor: {
     themeKey: "palette"
@@ -16098,22 +16100,22 @@ const ts = {
   },
   // sizing
   width: {
-    transform: ft
+    transform: pt
   },
   maxWidth: {
     style: Oi
   },
   minWidth: {
-    transform: ft
+    transform: pt
   },
   height: {
-    transform: ft
+    transform: pt
   },
   maxHeight: {
-    transform: ft
+    transform: pt
   },
   minHeight: {
-    transform: ft
+    transform: pt
   },
   boxSizing: {},
   // typography
@@ -17183,7 +17185,7 @@ function xx(e) {
     colorScheme: "light"
   }), M.shouldSkipGeneratingVar = w, M.applyStyles = Vu, M;
 }
-const Uu = xx(), gt = rx({
+const Uu = xx(), yt = rx({
   defaultTheme: Uu,
   themeId: Du
 });
@@ -17201,7 +17203,7 @@ function os({
   });
 }
 const Cx = ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"], wx = ["component", "slots", "slotProps"], Sx = ["component"];
-function pt(e, n) {
+function mt(e, n) {
   const {
     className: t,
     elementType: r,
@@ -17257,7 +17259,7 @@ const Tx = ["children", "className", "color", "component", "fontSize", "htmlColo
   sm: "xl",
   md: "xl2",
   lg: "xl3"
-}, Ax = gt("svg", {
+}, Ax = yt("svg", {
   name: "JoySvgIcon",
   slot: "Root",
   overridesResolver: (e, n) => n.root
@@ -17321,7 +17323,7 @@ const Tx = ["children", "className", "color", "component", "fontSize", "htmlColo
     component: a,
     slots: y,
     slotProps: d
-  }), [v, S] = pt("root", {
+  }), [v, S] = mt("root", {
     ref: t,
     className: $e(x.root, s),
     elementType: Ax,
@@ -17465,21 +17467,21 @@ const _x = (e) => {
     endDecorator: ["endDecorator"]
   };
   return Bv(i, $x, {});
-}, Ix = gt("span", {
+}, Ix = yt("span", {
   name: "JoyTypography",
   slot: "StartDecorator",
   overridesResolver: (e, n) => n.startDecorator
 })({
   display: "inline-flex",
   marginInlineEnd: "clamp(4px, var(--Typography-gap, 0.375em), 0.75rem)"
-}), Mx = gt("span", {
+}), Mx = yt("span", {
   name: "JoyTypography",
   slot: "endDecorator",
   overridesResolver: (e, n) => n.endDecorator
 })({
   display: "inline-flex",
   marginInlineStart: "clamp(4px, var(--Typography-gap, 0.375em), 0.75rem)"
-}), Dx = gt("span", {
+}), Dx = yt("span", {
   name: "JoyTypography",
   slot: "Root",
   overridesResolver: (e, n) => n.root
@@ -17575,18 +17577,18 @@ const _x = (e) => {
     component: B,
     slots: k,
     slotProps: v
-  }), [_, H] = pt("root", {
+  }), [_, H] = mt("root", {
     ref: t,
     className: b.root,
     elementType: Dx,
     externalForwardedProps: O,
     ownerState: F
-  }), [D, L] = pt("startDecorator", {
+  }), [D, L] = mt("startDecorator", {
     className: b.startDecorator,
     elementType: Ix,
     externalForwardedProps: O,
     ownerState: F
-  }), [j, X] = pt("endDecorator", {
+  }), [j, X] = mt("endDecorator", {
     className: b.endDecorator,
     elementType: Mx,
     externalForwardedProps: O,
@@ -17734,7 +17736,7 @@ const zx = ["checked", "uncheckedIcon", "checkedIcon", "label", "defaultChecked"
     label: ["label"]
   };
   return si(u, kx, {});
-}, Lx = gt("span", {
+}, Lx = yt("span", {
   name: "JoyCheckbox",
   slot: "Root",
   overridesResolver: (e, n) => n.root
@@ -17781,7 +17783,7 @@ const zx = ["checked", "uncheckedIcon", "checkedIcon", "label", "defaultChecked"
       color: (o = n.variants[`${e.variant}Disabled`]) == null || (o = o[e.color]) == null ? void 0 : o.color
     }
   });
-}), Bx = gt("span", {
+}), Bx = yt("span", {
   name: "JoyCheckbox",
   slot: "Checkbox",
   overridesResolver: (e, n) => n.checkbox
@@ -17818,7 +17820,7 @@ const zx = ["checked", "uncheckedIcon", "checkedIcon", "label", "defaultChecked"
   }, {
     [`&.${Yn.disabled}`]: (i = e.variants[`${n.variant}Disabled`]) == null ? void 0 : i[n.color]
   }]];
-}), Vx = gt("span", {
+}), Vx = yt("span", {
   name: "JoyCheckbox",
   slot: "Action",
   overridesResolver: (e, n) => n.action
@@ -17847,7 +17849,7 @@ const zx = ["checked", "uncheckedIcon", "checkedIcon", "label", "defaultChecked"
   }, {
     [`&.${Yn.disabled}`]: (s = e.variants[`${n.variant}Disabled`]) == null ? void 0 : s[n.color]
   }] : []];
-}), Wx = gt("input", {
+}), Wx = yt("input", {
   name: "JoyCheckbox",
   slot: "Input",
   overridesResolver: (e, n) => n.input
@@ -17858,7 +17860,7 @@ const zx = ["checked", "uncheckedIcon", "checkedIcon", "label", "defaultChecked"
   width: "100%",
   height: "100%",
   cursor: "pointer"
-})), Hx = gt("label", {
+})), Hx = yt("label", {
   name: "JoyCheckbox",
   slot: "Label",
   overridesResolver: (e, n) => n.label
@@ -17937,23 +17939,23 @@ const zx = ["checked", "uncheckedIcon", "checkedIcon", "label", "defaultChecked"
     component: H,
     slots: D,
     slotProps: L
-  }), [Ae, Fe] = pt("root", {
+  }), [Ae, Fe] = mt("root", {
     ref: t,
     className: ot.root,
     elementType: Lx,
     externalForwardedProps: me,
     ownerState: ge
-  }), [ut, kt] = pt("checkbox", {
+  }), [ut, kt] = mt("checkbox", {
     className: ot.checkbox,
     elementType: Bx,
     externalForwardedProps: me,
     ownerState: ge
-  }), [le, _t] = pt("action", {
+  }), [le, _t] = mt("action", {
     className: ot.action,
     elementType: Vx,
     externalForwardedProps: me,
     ownerState: ge
-  }), [It, dn] = pt("input", {
+  }), [It, dn] = mt("input", {
     additionalProps: q({
       id: M,
       name: k,
@@ -17971,7 +17973,7 @@ const zx = ["checked", "uncheckedIcon", "checkedIcon", "label", "defaultChecked"
     externalForwardedProps: me,
     getSlotProps: G,
     ownerState: ge
-  }), [fn, Rn] = pt("label", {
+  }), [fn, Rn] = mt("label", {
     additionalProps: {
       htmlFor: M
     },
@@ -18865,7 +18867,7 @@ process.env.NODE_ENV !== "production" && (td.propTypes = {
    */
   timeout: h.number.isRequired
 });
-const vt = Nn("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), ei = 550, SC = 80, kC = Qn`
+const bt = Nn("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), ei = 550, SC = 80, kC = Qn`
   0% {
     transform: scale(0);
     opacity: 0.1;
@@ -18915,7 +18917,7 @@ const vt = Nn("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsa
   opacity: 0;
   position: absolute;
 
-  &.${vt.rippleVisible} {
+  &.${bt.rippleVisible} {
     opacity: 0.3;
     transform: scale(1);
     animation-name: ${kC};
@@ -18925,13 +18927,13 @@ const vt = Nn("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsa
 }) => e.transitions.easing.easeInOut};
   }
 
-  &.${vt.ripplePulsate} {
+  &.${bt.ripplePulsate} {
     animation-duration: ${({
   theme: e
 }) => e.transitions.duration.shorter}ms;
   }
 
-  & .${vt.child} {
+  & .${bt.child} {
     opacity: 1;
     display: block;
     width: 100%;
@@ -18940,7 +18942,7 @@ const vt = Nn("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsa
     background-color: currentColor;
   }
 
-  & .${vt.childLeaving} {
+  & .${bt.childLeaving} {
     opacity: 0;
     animation-name: ${EC};
     animation-duration: ${ei}ms;
@@ -18949,7 +18951,7 @@ const vt = Nn("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsa
 }) => e.transitions.easing.easeInOut};
   }
 
-  & .${vt.childPulsate} {
+  & .${bt.childPulsate} {
     position: absolute;
     /* @noflip */
     left: 0px;
@@ -18985,12 +18987,12 @@ const vt = Nn("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsa
     } = k;
     u((B) => [...B, /* @__PURE__ */ c.jsx(AC, {
       classes: {
-        ripple: $e(s.ripple, vt.ripple),
-        rippleVisible: $e(s.rippleVisible, vt.rippleVisible),
-        ripplePulsate: $e(s.ripplePulsate, vt.ripplePulsate),
-        child: $e(s.child, vt.child),
-        childLeaving: $e(s.childLeaving, vt.childLeaving),
-        childPulsate: $e(s.childPulsate, vt.childPulsate)
+        ripple: $e(s.ripple, bt.ripple),
+        rippleVisible: $e(s.rippleVisible, bt.rippleVisible),
+        ripplePulsate: $e(s.ripplePulsate, bt.ripplePulsate),
+        child: $e(s.child, bt.child),
+        childLeaving: $e(s.childLeaving, bt.childLeaving),
+        childPulsate: $e(s.childPulsate, bt.childPulsate)
       },
       timeout: ei,
       pulsate: v,
@@ -19068,7 +19070,7 @@ const vt = Nn("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsa
     start: w,
     stop: x
   }), [E, w, x]), /* @__PURE__ */ c.jsx(NC, {
-    className: $e(vt.root, s.root, i),
+    className: $e(bt.root, s.root, i),
     ref: d,
     ...a,
     children: /* @__PURE__ */ c.jsx(Ii, {
@@ -20473,7 +20475,7 @@ const s1 = (e) => {
     acceptButtonParams: s.acceptButtonParams || { variant: "primary" },
     declineButtonParams: s.declineButtonParams || { variant: "primary" },
     warning: s.warning || !1,
-    id: s.id || Ct(),
+    id: s.id || dt(),
     index: i,
     acceptLabel: s.acceptLabel || "OK",
     declineLabel: s.declineLabel || "Cancel",
@@ -20538,7 +20540,7 @@ const u1 = ["color", "backgroundColor"], d1 = ["children", "className", "color",
 function Vn(e, n) {
   return `var(--CircularProgress-${e}Thickness, var(--CircularProgress-thickness, ${n}))`;
 }
-const m1 = gt("span", {
+const m1 = yt("span", {
   name: "JoyCircularProgress",
   slot: "Root",
   overridesResolver: (e, n) => n.root
@@ -20623,7 +20625,7 @@ const m1 = gt("span", {
     "--CircularProgress-trackColor": (o = n.variants.softHover) == null ? void 0 : o[e.color].backgroundColor,
     "--CircularProgress-progressColor": (s = n.variants.solid) == null ? void 0 : s[e.color].backgroundColor
   });
-}), h1 = gt("svg", {
+}), h1 = yt("svg", {
   name: "JoyCircularProgress",
   slot: "Svg",
   overridesResolver: (e, n) => n.svg
@@ -20637,7 +20639,7 @@ const m1 = gt("span", {
   // centered align
   left: "calc(-1 * var(--variant-borderWidth, 0px))"
   // centered align
-}), g1 = gt("circle", {
+}), g1 = yt("circle", {
   name: "JoyCircularProgress",
   slot: "track",
   overridesResolver: (e, n) => n.track
@@ -20648,7 +20650,7 @@ const m1 = gt("span", {
   fill: "transparent",
   strokeWidth: "var(--_track-thickness)",
   stroke: "var(--CircularProgress-trackColor)"
-}), y1 = gt("circle", {
+}), y1 = yt("circle", {
   name: "JoyCircularProgress",
   slot: "progress",
   overridesResolver: (e, n) => n.progress
@@ -20703,7 +20705,7 @@ const m1 = gt("span", {
     component: m,
     slots: g,
     slotProps: y
-  }), [x, k] = pt("root", {
+  }), [x, k] = mt("root", {
     ref: t,
     className: $e(w.root, s),
     elementType: m1,
@@ -20720,17 +20722,17 @@ const m1 = gt("span", {
     }, p && f && {
       "aria-valuenow": Math.round(typeof p == "number" ? p : Number(p || 0))
     })
-  }), [v, S] = pt("svg", {
+  }), [v, S] = mt("svg", {
     className: w.svg,
     elementType: h1,
     externalForwardedProps: E,
     ownerState: C
-  }), [N, A] = pt("track", {
+  }), [N, A] = mt("track", {
     className: w.track,
     elementType: g1,
     externalForwardedProps: E,
     ownerState: C
-  }), [P, B] = pt("progress", {
+  }), [P, B] = mt("progress", {
     className: w.progress,
     elementType: y1,
     externalForwardedProps: E,
@@ -20903,7 +20905,7 @@ const ri = ye("rounded relative", {
   }, [t, o]), /* @__PURE__ */ c.jsx(gf, {});
 }), ld = En({ name: "", onChange: () => {
 } }), zw = (e) => {
-  const n = ie(null), t = Ct(), r = ie(null), { name: o, onChange: s } = rt(ld), {
+  const n = ie(null), t = dt(), r = ie(null), { name: o, onChange: s } = rt(ld), {
     children: i,
     header: a,
     onSelect: l = () => {
@@ -21009,7 +21011,7 @@ const ri = ye("rounded relative", {
     onContextMenu: o,
     className: s,
     style: i
-  } = e, a = Ct(), [l, u] = I();
+  } = e, a = dt(), [l, u] = I();
   K(() => {
     l && l.ref.current && (je("#" + a + " *").removeClass("css-c-233"), l.ref.current.classList.add("css-c-233"), r(l.event, l.checked, l));
   }, [l]);
@@ -21314,7 +21316,7 @@ const N1 = ye("relative w-fit data-[state=active]:font-medium group", {
     }) })
   ] });
 }), Vw = de((e, n) => {
-  const t = Ct(), [r, o] = I(null), [s, i] = I(null), [a, l] = I(null), [u, f] = I(null), {
+  const t = dt(), [r, o] = I(null), [s, i] = I(null), [a, l] = I(null), [u, f] = I(null), {
     resize: p = "both"
   } = e, m = (y, d) => {
     p == "both" && (d == "y" && (o(y.clientY), i(resizable.offsetHeight)), d == "x" && (l(y.clientX), f(resizable.offsetWidth)));
@@ -21781,7 +21783,7 @@ export {
   Lw as useApi,
   Dr as useBoxSize,
   it as useGeneratedId,
-  Ct as useRandomId,
+  dt as useRandomId,
   Yw as useStore,
   Gw as useVariable
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@abdellatifui/react",
   "private": false,
-  "version": "3.2.16",
+  "version": "3.2.17",
   "type": "module",
   "types": "dist/nextgen.d.ts",
   "files": [