@livechat/design-system-react-components 1.28.1 → 1.28.2

package/dist/index.es.js

@@ -629,7 +629,7 @@ const mc = {
     r
   );
 }, I = (m) => {
-  var f = m, {
+  var b = m, {
     as: t = "p",
     size: a = "md",
     caps: r = !1,
@@ -641,7 +641,7 @@ const mc = {
     className: d,
     customColor: n,
     textAlign: s
-  } = f, p = F(f, [
+  } = b, p = F(b, [
     "as",
     "size",
     "caps",
@@ -717,7 +717,7 @@ const mc = {
   "action-menu__list--with-footer": "lc-ActionMenu-module__action-menu__list--with-footer___ghTxL",
   "action-menu__footer": "lc-ActionMenu-module__action-menu__footer___HxoOe"
 }, Re = "action-menu", b_ = (w) => {
-  var v = w, {
+  var f = w, {
     className: t,
     triggerClassName: a,
     options: r,
@@ -731,8 +731,8 @@ const mc = {
     onOpen: s,
     floatingStrategy: p,
     selectedOptions: m,
-    footer: f
-  } = v, g = F(v, [
+    footer: b
+  } = f, g = F(f, [
     "className",
     "triggerClassName",
     "options",
@@ -748,7 +748,7 @@ const mc = {
     "selectedOptions",
     "footer"
   ]);
-  const h = d !== void 0, [b, E] = e.useState(l), [N, $] = e.useState(null), y = e.useRef(-1), C = Ha(), D = aa(), L = e.useRef(null), G = h ? d : b, T = () => {
+  const h = d !== void 0, [v, E] = e.useState(l), [N, $] = e.useState(null), y = e.useRef(-1), C = Ha(), D = aa(), L = e.useRef(null), G = h ? d : v, T = () => {
     G ? (n == null || n(), !h && E(!1)) : (s == null || s(), !h && E(!0));
   }, { x: M, y: V, strategy: q, refs: he, context: oe } = ra({
     nodeId: D,
@@ -868,7 +868,7 @@ const mc = {
         className: u(
           Fe[`${Re}__list`],
           {
-            [Fe[`${Re}__list--with-footer`]]: f
+            [Fe[`${Re}__list--with-footer`]]: b
           },
           t
         ),
@@ -877,14 +877,14 @@ const mc = {
       }),
       r.map(vt)
     ),
-    f && /* @__PURE__ */ e.createElement(
+    b && /* @__PURE__ */ e.createElement(
       I,
       {
         size: "sm",
         as: "div",
         className: Fe[`${Re}__footer`]
       },
-      f
+      b
     )
   )));
   return C === null ? /* @__PURE__ */ e.createElement(za, null, Ie) : Ie;
@@ -991,7 +991,7 @@ const mc = {
   "btn--text-lock-black": "lc-Button-module__btn--text-lock-black___fy3zb"
 }, se = "btn", W = e.forwardRef(
   (w, g) => {
-    var v = w, {
+    var f = w, {
       loading: t = !1,
       disabled: a = !1,
       type: r = "button",
@@ -1005,7 +1005,7 @@ const mc = {
       children: s,
       href: p,
       onClick: m
-    } = v, f = F(v, [
+    } = f, b = F(f, [
       "loading",
       "disabled",
       "type",
@@ -1020,7 +1020,7 @@ const mc = {
       "href",
       "onClick"
     ]);
-    const h = t || a, b = !s && c, E = ["text", "link", "link-light"].includes(o), N = p ? "a" : "button", $ = u(
+    const h = t || a, v = !s && c, E = ["text", "link", "link-light"].includes(o), N = p ? "a" : "button", $ = u(
       n,
       ne[se],
       ne[`${se}--${o}`],
@@ -1028,9 +1028,9 @@ const mc = {
       {
         [ne[`${se}--loading`]]: t,
         [ne[`${se}--full-width`]]: _,
-        [ne[`${se}--with-${i}-icon`]]: c && !b && !E,
-        [ne[`${se}--icon-only`]]: b,
-        [ne[`${se}--icon-only--bg`]]: b && E,
+        [ne[`${se}--with-${i}-icon`]]: c && !v && !E,
+        [ne[`${se}--icon-only`]]: v,
+        [ne[`${se}--icon-only--bg`]]: v && E,
         [ne[`${se}--disabled`]]: h
       }
     );
@@ -1042,7 +1042,7 @@ const mc = {
         "aria-disabled": h,
         type: r,
         disabled: h
-      }, !h && { href: p, onClick: m }), f),
+      }, !h && { href: p, onClick: m }), b),
       t && /* @__PURE__ */ e.createElement(
         Wa,
         k({
@@ -1150,12 +1150,12 @@ const x_ = (t) => {
   onOpen: s,
   withFadeAnimation: p = !0,
   transitionDuration: m = 200,
-  hoverOnDuration: f,
+  hoverOnDuration: b,
   hoverOffDuration: g,
   transitionDelay: w = 0,
-  hoverOnDelay: v,
+  hoverOnDelay: f,
   hoverOffDelay: h,
-  triggerOnClick: b = !1,
+  triggerOnClick: v = !1,
   triggerOnHover: E = !0,
   offsetMainAxis: N = 8,
   referenceElement: $,
@@ -1197,16 +1197,16 @@ const x_ = (t) => {
     move: !1,
     restMs: y,
     delay: {
-      open: st(v),
+      open: st(f),
       close: st(h || L)
     },
     enabled: E,
     handleClose: M ? null : __()
   }), Ge = o_(S), ma = na(S, C), pa = sa(S, { role: "tooltip" }), ga = ca(S, k({
-    enabled: b
+    enabled: v
   }, D)), { isMounted: ba, styles: fa } = $r(S, {
     duration: {
-      open: He(f),
+      open: He(b),
       close: He(g)
     }
   }), { status: va } = l_(S), { getReferenceProps: ha, getFloatingProps: ka } = ia([
@@ -1617,16 +1617,16 @@ const er = 8, tr = "guide-tooltip", ar = (t, a) => new P_(t, a), Nc = (t) => {
 }) => {
   const [i, d] = e.useState(
     _.length
-  ), [n, s] = e.useState([]), [p, m] = e.useState(!1), f = r === "scroll", g = u(
+  ), [n, s] = e.useState([]), [p, m] = e.useState(!1), b = r === "scroll", g = u(
     U[zt],
     t,
     l && U[`${zt}--vertical`]
-  ), w = !f && n.length !== 0;
+  ), w = !b && n.length !== 0;
   e.useEffect(() => {
-    f || (_.length > i ? s(_.slice(i, _.length)) : s([]));
+    b || (_.length > i ? s(_.slice(i, _.length)) : s([]));
   }, [_, i]), e.useEffect(() => {
-    const b = !!window.ResizeObserver;
-    if (!f && b) {
+    const v = !!window.ResizeObserver;
+    if (!b && v) {
       const E = new ResizeObserver((N) => {
         const { width: $, height: y } = N[0].contentRect, C = l ? y : $, D = n.length > 0 ? 60 : 0, L = Math.floor(
           (C - D) / F_
@@ -1635,25 +1635,34 @@ const er = 8, tr = "guide-tooltip", ar = (t, a) => new P_(t, a), Nc = (t) => {
       });
       return E.observe(document.querySelector(`#${a}`)), () => E.disconnect();
     }
-  }, [n, f, i]);
-  const v = e.useCallback(() => n.map((b) => ({
-    key: b.key,
-    element: /* @__PURE__ */ e.createElement(f_, { leftNode: b.element }, b.label),
-    withDivider: b.withDivider,
-    onClick: b.onClick
-  })), [n]), h = n.find((b) => b.key === o);
+  }, [n, b, i]);
+  const f = e.useCallback(() => n.reduce(
+    (v, E) => {
+      if (!E.hideInMenu) {
+        const N = {
+          key: E.key,
+          element: /* @__PURE__ */ e.createElement(f_, { leftNode: E.element }, E.label),
+          withDivider: E.withDivider,
+          onClick: E.onClick
+        };
+        v.push(N);
+      }
+      return v;
+    },
+    []
+  ), [n]), h = n.find((v) => v.key === o);
   return /* @__PURE__ */ e.createElement("div", { id: a, className: g }, /* @__PURE__ */ e.createElement(
     "div",
     {
       className: u(U[`${zt}__items`], {
-        [U[`${zt}__items--scroll`]]: f
+        [U[`${zt}__items--scroll`]]: b
       })
     },
-    _.slice(0, i).map((b) => /* @__PURE__ */ e.createElement(
+    _.slice(0, i).map((v) => /* @__PURE__ */ e.createElement(
       I_,
       {
-        option: b,
-        isActive: b.key === o,
+        option: v,
+        isActive: v.key === o,
         vertical: l
       }
     ))
@@ -1674,7 +1683,7 @@ const er = 8, tr = "guide-tooltip", ar = (t, a) => new P_(t, a), Nc = (t) => {
         onClose: () => m(!1),
         floatingStrategy: "fixed",
         placement: l ? "left-start" : "bottom-end",
-        options: v(),
+        options: f(),
         triggerClassName: u(
           l && U[`${We}__trigger-vertical`]
         ),
@@ -1825,10 +1834,10 @@ const er = 8, tr = "guide-tooltip", ar = (t, a) => new P_(t, a), Nc = (t) => {
     a
   );
   return e.useEffect(() => {
-    const f = () => n.current && n.current.offsetWidth <= 400 ? p("small") : n.current && n.current.offsetWidth > 400 && n.current.offsetWidth <= 800 ? p("medium") : p("large"), g = xr(() => {
-      f();
+    const b = () => n.current && n.current.offsetWidth <= 400 ? p("small") : n.current && n.current.offsetWidth > 400 && n.current.offsetWidth <= 800 ? p("medium") : p("large"), g = xr(() => {
+      b();
     }, 500);
-    return window.addEventListener("resize", g), f(), () => window.removeEventListener("resize", g);
+    return window.addEventListener("resize", g), b(), () => window.removeEventListener("resize", g);
   }), /* @__PURE__ */ e.createElement("div", k({ ref: n, className: m }, c), /* @__PURE__ */ e.createElement("div", { className: ke[`${ye}__content`] }, /* @__PURE__ */ e.createElement("div", { className: ke[`${ye}__content__wrapper`] }, /* @__PURE__ */ e.createElement(
     P,
     x(k({}, U_[o]), {
@@ -1962,7 +1971,7 @@ const Y_ = "lc-Avatar-module__avatar___1zTCE", K_ = "lc-Avatar-module__avatar__s
     "type",
     "withRim"
   ]);
-  const f = d === "image" && !l, [g, w] = e.useState(f), v = d === "image" && !!l && !g, h = d === "text", b = ["xxxsmall", "xxsmall", "xsmall"].includes(o) ? 1 : 2, E = V_(i, b), N = ["xxxsmall", "xxsmall", "xsmall", "small"].includes(o), $ = r || W_(i), y = $ ? q_($) : void 0, C = h ? { backgroundColor: $ } : {}, D = u(k({
+  const b = d === "image" && !l, [g, w] = e.useState(b), f = d === "image" && !!l && !g, h = d === "text", v = ["xxxsmall", "xxsmall", "xsmall"].includes(o) ? 1 : 2, E = V_(i, v), N = ["xxxsmall", "xxsmall", "xsmall", "small"].includes(o), $ = r || W_(i), y = $ ? q_($) : void 0, C = h ? { backgroundColor: $ } : {}, D = u(k({
     [ge[Z]]: !0,
     [ge[`${Z}--${_}`]]: !0,
     [ge[`${Z}--${o}`]]: !0,
@@ -1980,8 +1989,8 @@ const Y_ = "lc-Avatar-module__avatar___1zTCE", K_ = "lc-Avatar-module__avatar__s
     ge[`${Z}__rim--${o}`]
   ), M = (q) => N ? "2xs" : ["medium"].includes(q) ? "xs" : ["large", "xlarge"].includes(q) ? "sm" : ["xxlarge"].includes(q) ? "lg" : "xl", V = e.useCallback(() => w(!0), []);
   return e.useEffect(() => {
-    w(f);
-  }, [f]), /* @__PURE__ */ e.createElement("div", k({ className: D, style: C }, s), n && /* @__PURE__ */ e.createElement(
+    w(b);
+  }, [b]), /* @__PURE__ */ e.createElement("div", k({ className: D, style: C }, s), n && /* @__PURE__ */ e.createElement(
     "div",
     {
       "data-testid": `${Z}__rim`,
@@ -1993,7 +2002,7 @@ const Y_ = "lc-Avatar-module__avatar___1zTCE", K_ = "lc-Avatar-module__avatar__s
       "data-testid": `${Z}__status`,
       className: L
     }
-  ), v && /* @__PURE__ */ e.createElement(
+  ), f && /* @__PURE__ */ e.createElement(
     "img",
     {
       className: ge[`${Z}__image`],
@@ -2082,23 +2091,23 @@ const ro = "lc-SegmentedControl-module__btn___tfsvL", Wt = {
   e.useEffect(() => {
     s && n(o);
   }, [o]);
-  const p = (f, g) => {
-    s || n(f), c(f, g);
-  }, m = a.map(({ id: f, label: g, loading: w, disabled: v, icon: h }) => {
-    const b = f === d, E = b ? Wt["btn--active"] : "", N = b ? !1 : w;
+  const p = (b, g) => {
+    s || n(b), c(b, g);
+  }, m = a.map(({ id: b, label: g, loading: w, disabled: f, icon: h }) => {
+    const v = b === d, E = v ? Wt["btn--active"] : "", N = v ? !1 : w;
     return /* @__PURE__ */ e.createElement(
       W,
       {
-        key: f,
+        key: b,
         fullWidth: l,
         loading: N,
-        disabled: v,
-        "aria-pressed": b,
+        disabled: f,
+        "aria-pressed": v,
         kind: "secondary",
         icon: h,
         className: u(Wt.btn, Wt[`btn--${t}`], E),
         onClick: ($) => {
-          p(f, $);
+          p(b, $);
         }
       },
       g
@@ -2139,8 +2148,8 @@ const ro = "lc-SegmentedControl-module__btn___tfsvL", Wt = {
     "src",
     "title"
   ]);
-  const [p, m] = e.useState(!1), f = p ? ta : Rt, g = p ? "Hide" : "Show more", w = (a == null ? void 0 : a.length) > 0, v = !!l, h = w || v, b = i, E = c, N = E ? "" : be[bo];
-  return /* @__PURE__ */ e.createElement("div", k({ className: u(be[Ft], _) }, d), b && /* @__PURE__ */ e.createElement("div", { className: u(be[Zt], N) }, E && /* @__PURE__ */ e.createElement(
+  const [p, m] = e.useState(!1), b = p ? ta : Rt, g = p ? "Hide" : "Show more", w = (a == null ? void 0 : a.length) > 0, f = !!l, h = w || f, v = i, E = c, N = E ? "" : be[bo];
+  return /* @__PURE__ */ e.createElement("div", k({ className: u(be[Ft], _) }, d), v && /* @__PURE__ */ e.createElement("div", { className: u(be[Zt], N) }, E && /* @__PURE__ */ e.createElement(
     "img",
     {
       alt: t,
@@ -2173,13 +2182,13 @@ const ro = "lc-SegmentedControl-module__btn___tfsvL", Wt = {
       },
       C
     )
-  ), v && /* @__PURE__ */ e.createElement(
+  ), f && /* @__PURE__ */ e.createElement(
     W,
     {
       className: be[`${Vt}__buttons-expander`],
       kind: "link",
       iconPosition: "right",
-      icon: /* @__PURE__ */ e.createElement(P, { source: f }),
+      icon: /* @__PURE__ */ e.createElement(P, { source: b }),
       onClick: () => m(!p)
     },
     g
@@ -2280,26 +2289,26 @@ const ro = "lc-SegmentedControl-module__btn___tfsvL", Wt = {
     toMonth: p
   } = t, m = () => {
     typeof a == "function" && a();
-  }, f = () => {
+  }, b = () => {
     typeof _ == "function" && _();
   }, g = () => {
     if (!s) {
-      const b = bt(n, 12);
-      return r(b);
+      const v = bt(n, 12);
+      return r(v);
     }
-    const v = Math.abs(Ka(n, s)), h = bt(
+    const f = Math.abs(Ka(n, s)), h = bt(
       n,
-      !Number.isNaN(v) && v > 12 ? 12 : v
+      !Number.isNaN(f) && f > 12 ? 12 : f
     );
     return r(h);
   }, w = () => {
     if (!p) {
-      const b = Ja(n, 12);
-      return r(b);
+      const v = Ja(n, 12);
+      return r(v);
     }
-    const v = Math.abs(Ka(p, n)), h = Ja(
+    const f = Math.abs(Ka(p, n)), h = Ja(
       n,
-      !Number.isNaN(v) && v > 12 ? 12 : v
+      !Number.isNaN(f) && f > 12 ? 12 : f
     );
     return d === 2 && Ia(h, p) ? r(bt(h, 1)) : r(h);
   };
@@ -2333,7 +2342,7 @@ const ro = "lc-SegmentedControl-module__btn___tfsvL", Wt = {
         [i.navButtonNext]: !0,
         [i.navButtonInteractionDisabled]: !o
       }),
-      onClick: f
+      onClick: b
     },
     /* @__PURE__ */ e.createElement(P, { source: wr, kind: "subtle" })
   ), /* @__PURE__ */ e.createElement(
@@ -2439,25 +2448,25 @@ const ro = "lc-SegmentedControl-module__btn___tfsvL", Wt = {
     "navbarElement",
     "renderDay",
     "innerRef"
-  ]), [m, f] = e.useState(o || /* @__PURE__ */ new Date());
+  ]), [m, b] = e.useState(o || /* @__PURE__ */ new Date());
   e.useEffect(() => {
-    o && o !== m && f(o);
+    o && o !== m && b(o);
   }, [o, m]), e.useEffect(() => {
-    _ && o !== m && (Fr(m, { from: l, to: _ }) || f(_));
+    _ && o !== m && (Fr(m, { from: l, to: _ }) || b(_));
   }, [o, m, _, l]);
   const g = e.useCallback(
-    (b) => {
-      if (t.onMonthChange && b) {
-        t.onMonthChange(b);
+    (v) => {
+      if (t.onMonthChange && v) {
+        t.onMonthChange(v);
         return;
       }
-      f(b);
+      b(v);
     },
     [o, t.onMonthChange]
   );
   let w = 1;
   (c === 0 || c && c < 7) && (w = c);
-  const v = e.useMemo(
+  const f = e.useMemo(
     () => Do(r, a),
     [r, a]
   );
@@ -2468,7 +2477,7 @@ const ro = "lc-SegmentedControl-module__btn___tfsvL", Wt = {
         xo,
         {
           month: m,
-          classNames: v,
+          classNames: f,
           numberOfMonths: i,
           onMonthChange: g,
           toMonth: _,
@@ -2476,7 +2485,7 @@ const ro = "lc-SegmentedControl-module__btn___tfsvL", Wt = {
         }
       ),
       ref: s,
-      classNames: v,
+      classNames: f,
       numberOfMonths: i,
       toMonth: _,
       fromMonth: l,
@@ -2591,11 +2600,11 @@ const Io = (t) => {
       payload: { date: w }
     });
   }, [o, r, _]), gt(() => {
-    const { from: w, selectedItem: v, to: h } = d;
+    const { from: w, selectedItem: f, to: h } = d;
     if (!(w && h))
       return;
-    const b = Pt(v, t);
-    b && (l == null || l(x(k({}, b), {
+    const v = Pt(f, t);
+    v && (l == null || l(x(k({}, v), {
       value: {
         from: w,
         to: h
@@ -2612,15 +2621,15 @@ const Io = (t) => {
     if (!Pt(w, t))
       return;
     const h = t.reduce(
-      (b, E) => x(k({}, b), { [E.id]: E }),
+      (v, E) => x(k({}, v), { [E.id]: E }),
       {}
     );
     l(h[w]);
   }, [l, d.selectedItem, t]);
   const s = Lt(
     (w) => {
-      const v = o ? Sr(o, w) >= 0 : !0;
-      !or(d.from, d.to) && v && n({
+      const f = o ? Sr(o, w) >= 0 : !0;
+      !or(d.from, d.to) && f && n({
         type: Y.NEW_TEMPORARY_TO_VALUE,
         payload: { date: w }
       });
@@ -2628,11 +2637,11 @@ const Io = (t) => {
     [o, d.from, d.to]
   ), p = Lt(
     (w) => {
-      const { from: v, to: h } = d;
-      Fr(w, { to: o }) && (or(v, h) ? n({
+      const { from: f, to: h } = d;
+      Fr(w, { to: o }) && (or(f, h) ? n({
         type: Y.SELECT_FIRST_DAY,
         payload: { date: w }
-      }) : v && Fa(w, v) || v && Ra(w, v) ? n({
+      }) : f && Fa(w, f) || f && Ra(w, f) ? n({
         type: Y.SELECT_SECOND_DAY_AS_TO,
         payload: { date: w }
       }) : n({
@@ -2656,24 +2665,24 @@ const Io = (t) => {
       });
     },
     [t]
-  ), f = Lt((w) => {
+  ), b = Lt((w) => {
     n({
       type: Y.CURRENT_MONTH_CHANGE,
       payload: { date: w }
     });
   }, []);
   return c((() => {
-    const { currentMonth: w, from: v, selectedItem: h, temporaryTo: b, to: E } = d, N = Ot(
-      () => So(v, b),
-      [v, b]
-    ), $ = Ot(() => Pt(h, t), [t, h]), y = Ot(() => [v, { from: v, to: b }], [v, b]), C = Ot(() => o ? { after: o } : void 0, [o]);
+    const { currentMonth: w, from: f, selectedItem: h, temporaryTo: v, to: E } = d, N = Ot(
+      () => So(f, v),
+      [f, v]
+    ), $ = Ot(() => Pt(h, t), [t, h]), y = Ot(() => [f, { from: f, to: v }], [f, v]), C = Ot(() => o ? { after: o } : void 0, [o]);
     return {
       select: {
         onItemSelect: m,
         selected: h || ""
       },
       inputs: {
-        fromDate: v,
+        fromDate: f,
         toDate: E
       },
       datepicker: {
@@ -2687,7 +2696,7 @@ const Io = (t) => {
         toMonth: o,
         disabledDays: C,
         onDayMouseEnter: s,
-        onMonthChange: f
+        onMonthChange: b
       },
       selectedOption: $
     };
@@ -2745,18 +2754,18 @@ const Ac = (t) => {
   hideLabelOnOpen: d,
   onClick: n
 }) => {
-  const [s, p] = e.useState(i), [m, f] = e.useState(0), g = e.useRef(null), w = u(
+  const [s, p] = e.useState(i), [m, b] = e.useState(0), g = e.useRef(null), w = u(
     O[H],
     l && O[`${H}--with-divider`],
     a
-  ), v = d && s, h = typeof o == "string", b = (E) => {
+  ), f = d && s, h = typeof o == "string", v = (E) => {
     p((N) => !N), E.currentTarget.blur(), n == null || n();
   };
   return e.useEffect(() => {
     const E = !!window.IntersectionObserver;
     if (g.current && E) {
       const N = new ResizeObserver(() => {
-        g.current && m !== g.current.offsetHeight && f(g.current.offsetHeight);
+        g.current && m !== g.current.offsetHeight && b(g.current.offsetHeight);
       });
       return N.observe(g.current), () => N.disconnect();
     }
@@ -2766,11 +2775,11 @@ const Ac = (t) => {
       className: u(
         O[`${H}__label-wrapper`],
         d && O[`${H}__label-wrapper--fading`],
-        v && O[`${H}__label-wrapper--hide`],
+        f && O[`${H}__label-wrapper--hide`],
         s && O[`${H}__label-wrapper--open`]
       ),
       "aria-expanded": s,
-      "aria-hidden": v,
+      "aria-hidden": f,
       "data-testid": "details-card-label"
     },
     /* @__PURE__ */ e.createElement(
@@ -2812,7 +2821,7 @@ const Ac = (t) => {
         s && O[`${H}__button--open`],
         d && O[`${H}__button--fading`]
       ),
-      onClick: b,
+      onClick: v,
       "aria-expanded": s
     }
   ), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
@@ -2948,8 +2957,8 @@ const Ac = (t) => {
     l
   );
   return e.useEffect(() => {
-    const f = n;
-    return t && f.current ? p(`${f.current.clientHeight}px`) : p("auto");
+    const b = n;
+    return t && b.current ? p(`${b.current.clientHeight}px`) : p("auto");
   }), /* @__PURE__ */ e.createElement("div", { className: m }, d && t && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
     I,
     {
@@ -3107,7 +3116,7 @@ const Ac = (t) => {
     ]);
     const s = e.useRef(null);
     e.useImperativeHandle(i, () => s.current, []);
-    const [p, m] = e.useState(!1), [f, g] = e.useState(!1), { type: w, onFocus: v, onBlur: h } = c, b = u(
+    const [p, m] = e.useState(!1), [b, g] = e.useState(!1), { type: w, onFocus: f, onBlur: h } = c, v = u(
       o,
       Te[De],
       Te[`${De}--${t}`],
@@ -3118,7 +3127,7 @@ const Ac = (t) => {
         [Te[`${De}--crop`]]: l,
         [Te[`${De}--read-only`]]: c.readOnly
       }
-    ), E = r ? "var(--content-disabled)" : "var(--content-default)", N = f ? Xr : Qr, $ = _ && _.place === "left", y = _ && w !== "password" && _.place === "right", C = () => {
+    ), E = r ? "var(--content-disabled)" : "var(--content-default)", N = b ? Xr : Qr, $ = _ && _.place === "left", y = _ && w !== "password" && _.place === "right", C = () => {
       var D;
       (D = s.current) == null || D.focus();
     };
@@ -3126,7 +3135,7 @@ const Ac = (t) => {
       I,
       {
         as: "div",
-        className: b,
+        className: v,
         "aria-disabled": r,
         "tab-index": "0",
         onClick: C
@@ -3137,13 +3146,13 @@ const Ac = (t) => {
         x(k({}, c), {
           ref: s,
           onFocus: (D) => {
-            m(!0), v == null || v(D);
+            m(!0), f == null || f(D);
           },
           onBlur: (D) => {
             m(!1), h == null || h(D);
           },
           disabled: r,
-          type: w && !f ? w : "text"
+          type: w && !b ? w : "text"
         })
       ),
       y && sr(_, r),
@@ -3223,8 +3232,8 @@ const Ac = (t) => {
   e.useEffect(() => {
     if (!_)
       return;
-    const m = (f) => {
-      f.key === _e.esc && r();
+    const m = (b) => {
+      b.key === _e.esc && r();
     };
     return document.addEventListener("keyup", m, !0), () => document.removeEventListener("keyup", m, !0);
   }, [_]);
@@ -3290,7 +3299,7 @@ const Ac = (t) => {
     "onClose",
     "contentClassName"
   ]);
-  const p = u(pe[at], a), m = typeof t == "string", f = (g) => {
+  const p = u(pe[at], a), m = typeof t == "string", b = (g) => {
     g.preventDefault(), g.stopPropagation(), c();
   };
   return /* @__PURE__ */ e.createElement(
@@ -3314,7 +3323,7 @@ const Ac = (t) => {
       {
         labelType: !!_,
         customColor: "var(--color-white)",
-        onClick: f
+        onClick: b
       }
     )),
     !_ && r && /* @__PURE__ */ e.createElement("div", { className: pe[`${at}__header`] }, /* @__PURE__ */ e.createElement(
@@ -3325,7 +3334,7 @@ const Ac = (t) => {
         className: pe[`${at}__heading`]
       },
       r
-    ), /* @__PURE__ */ e.createElement(ur, { onClick: f })),
+    ), /* @__PURE__ */ e.createElement(ur, { onClick: b })),
     /* @__PURE__ */ e.createElement(
       "div",
       {
@@ -3410,7 +3419,7 @@ const Ac = (t) => {
     "style",
     "onChange"
   ]);
-  const m = e.useRef(null), f = u(
+  const m = e.useRef(null), b = u(
     ut[mt],
     {
       [ut[`${mt}--error`]]: a,
@@ -3418,12 +3427,12 @@ const Ac = (t) => {
       [ut[`${mt}--disabled`]]: l
     },
     t
-  ), g = (y) => d(String(y)), w = (y) => _ !== void 0 && y > _ ? _ : o !== void 0 && y < o ? o : y, v = (y) => {
+  ), g = (y) => d(String(y)), w = (y) => _ !== void 0 && y > _ ? _ : o !== void 0 && y < o ? o : y, f = (y) => {
     const C = parseInt(r, 10) + y;
     return g(w(C));
   }, h = (y) => {
-    y.key === _e.arrowDown && (y.preventDefault(), v(-1)), y.key === _e.arrowUp && (y.preventDefault(), v(1));
-  }, b = (y, C) => C !== void 0 && parseInt(y, 10) === C, E = (y) => {
+    y.key === _e.arrowDown && (y.preventDefault(), f(-1)), y.key === _e.arrowUp && (y.preventDefault(), f(1));
+  }, v = (y, C) => C !== void 0 && parseInt(y, 10) === C, E = (y) => {
     y.preventDefault(), y.stopPropagation();
     const C = y.currentTarget.value.replace(
       /((?!([-]|([-]?\d+))).)/,
@@ -3435,12 +3444,12 @@ const Ac = (t) => {
     return g(w(D));
   }, N = () => {
     var y;
-    return (y = m.current) == null || y.focus(), v(1);
+    return (y = m.current) == null || y.focus(), f(1);
   }, $ = () => {
     var y;
-    return (y = m.current) == null || y.focus(), v(-1);
+    return (y = m.current) == null || y.focus(), f(-1);
   };
-  return /* @__PURE__ */ e.createElement("div", { className: f, style: i }, /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: b, style: i }, /* @__PURE__ */ e.createElement(
     "input",
     x(k({
       type: "text",
@@ -3457,7 +3466,7 @@ const Ac = (t) => {
     "button",
     {
       tabIndex: -1,
-      disabled: l || b(r, _),
+      disabled: l || v(r, _),
       onClick: N,
       "aria-label": "Increment value",
       className: ut[`${mt}__increment`],
@@ -3467,7 +3476,7 @@ const Ac = (t) => {
       P,
       {
         source: ta,
-        disabled: l || b(r, _),
+        disabled: l || v(r, _),
         kind: "primary"
       }
     )
@@ -3475,7 +3484,7 @@ const Ac = (t) => {
     "button",
     {
       tabIndex: -1,
-      disabled: l || b(r, o),
+      disabled: l || v(r, o),
       "aria-label": "Decrement value",
       className: ut[`${mt}__decrement`],
       onClick: $,
@@ -3486,7 +3495,7 @@ const Ac = (t) => {
       {
         source: Rt,
         kind: "primary",
-        disabled: l || b(r, o)
+        disabled: l || v(r, o)
       }
     )
   )));
@@ -3635,15 +3644,15 @@ const ft = "select-all", Qo = (t, a) => {
   getFloatingProps: s,
   getItemProps: p,
   emptyStateText: m = "No results found",
-  pickerType: f = "single",
+  pickerType: b = "single",
   listClassName: g,
   virtuosoProps: w
 }) => {
-  const [v, h] = e.useState(0), b = o.length, E = e.useCallback(
+  const [f, h] = e.useState(0), v = o.length, E = e.useCallback(
     ($) => {
-      $ !== v && ($ < _ ? h($ + (b - 1) * Ko) : h(_));
+      $ !== f && ($ < _ ? h($ + (v - 1) * Ko) : h(_));
     },
-    [b]
+    [v]
   );
   if (gt(() => {
     i.current = new Array(o.length);
@@ -3678,7 +3687,7 @@ const ft = "select-all", Qo = (t, a) => {
       "div",
       k({
         tabIndex: 0,
-        "aria-multiselectable": f === "multi",
+        "aria-multiselectable": b === "multi",
         className: pt["listbox-wrapper"]
       }, s({
         onKeyDown($) {
@@ -3695,7 +3704,7 @@ const ft = "select-all", Qo = (t, a) => {
         u_,
         x(k({
           totalListHeightChanged: E,
-          style: { height: `${v}px`, maxHeight: _ },
+          style: { height: `${f}px`, maxHeight: _ },
           totalCount: o.length,
           data: o,
           increaseViewportBy: 200
@@ -3710,7 +3719,7 @@ const ft = "select-all", Qo = (t, a) => {
               isSelected: N(y.key),
               onSelect: n,
               item: y,
-              numberOfItems: b
+              numberOfItems: v
             }
           )
         })
@@ -3749,7 +3758,7 @@ const ft = "select-all", Qo = (t, a) => {
   isError: s,
   onClear: p,
   children: m,
-  setTriggerFocus: f
+  setTriggerFocus: b
 }) => {
   const g = u(
     ie[re],
@@ -3759,7 +3768,7 @@ const ft = "select-all", Qo = (t, a) => {
     i && ie[`${re}--disabled`],
     n && ie[`${re}--focused`],
     s && ie[`${re}--error`]
-  ), w = !c && l && !i && !d, v = (h) => {
+  ), w = !c && l && !i && !d, f = (h) => {
     h.stopPropagation(), p();
   };
   return /* @__PURE__ */ e.createElement(
@@ -3773,8 +3782,8 @@ const ft = "select-all", Qo = (t, a) => {
       ref: t,
       type: "button"
     }, a()), {
-      onFocus: () => f(!0),
-      onBlur: () => f(!1)
+      onFocus: () => b(!0),
+      onBlur: () => b(!1)
     }),
     /* @__PURE__ */ e.createElement(
       I,
@@ -3801,7 +3810,7 @@ const ft = "select-all", Qo = (t, a) => {
         {
           "data-testid": `${re}__clear-icon`,
           className: ie[`${re}__clear-icon`],
-          onClick: v
+          onClick: f
         },
         /* @__PURE__ */ e.createElement(P, { kind: "primary", size: "small", source: Ae })
       ),
@@ -3851,7 +3860,7 @@ const ft = "select-all", Qo = (t, a) => {
   tag__node: _l,
   tag__content: ol
 }, ve = "tag", ll = (t) => t ? Ua(t, "#FFFFFF") > 4.5 ? "text-white" : "text-black" : "", Mr = (w) => {
-  var v = w, {
+  var f = w, {
     className: t = "",
     children: a,
     dismissible: r = !1,
@@ -3865,8 +3874,8 @@ const ft = "select-all", Qo = (t, a) => {
     rightNode: s,
     customColor: p,
     iconOnly: m = !1,
-    value: f
-  } = v, g = F(v, [
+    value: b
+  } = f, g = F(f, [
     "className",
     "children",
     "dismissible",
@@ -3882,7 +3891,7 @@ const ft = "select-all", Qo = (t, a) => {
     "iconOnly",
     "value"
   ]);
-  const h = _ || i && m, b = u(
+  const h = _ || i && m, v = u(
     fe[ve],
     t,
     fe[`${ve}--${l}`],
@@ -3906,7 +3915,7 @@ const ft = "select-all", Qo = (t, a) => {
   return /* @__PURE__ */ e.createElement(
     I,
     x(k(k({
-      className: b
+      className: v
     }, g), $()), {
       as: "div",
       size: N
@@ -3919,7 +3928,7 @@ const ft = "select-all", Qo = (t, a) => {
         style: { color: y() }
       },
       n
-    ), /* @__PURE__ */ e.createElement("div", { className: fe[`${ve}__content`] }, f || a), s && !m && /* @__PURE__ */ e.createElement(
+    ), /* @__PURE__ */ e.createElement("div", { className: fe[`${ve}__content`] }, b || a), s && !m && /* @__PURE__ */ e.createElement(
       "div",
       {
         "data-testid": "lc-tag-right-node",
@@ -3983,18 +3992,18 @@ const ft = "select-all", Qo = (t, a) => {
   onFilter: s,
   onClear: p,
   searchPhrase: m,
-  virtualItemRef: f,
+  virtualItemRef: b,
   isTriggerFocused: g
 }) => {
-  const w = t && !a, v = e.useRef(null);
+  const w = t && !a, f = e.useRef(null);
   e.useEffect(() => {
-    c && (s(""), v.current && (v.current.value = "", v.current.focus()));
+    c && (s(""), f.current && (f.current.value = "", f.current.focus()));
   }, [o, c]);
   const h = (y) => {
     y.key === "Backspace" && o && o.length > 0 && (y.preventDefault(), l === "multi" ? d(o[o.length - 1].key) : p()), y.key === "Delete" && (y.preventDefault(), p());
   };
   e.useEffect(() => (!t && g ? document.addEventListener("keydown", h) : document.removeEventListener("keydown", h), () => document.removeEventListener("keydown", h)), [t, o, g]);
-  const b = (y) => l === "single" && t && !a ? null : y != null && y.customElement ? /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__item`] }, y.customElement.selectedItemBody) : /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__item`] }, y.icon && /* @__PURE__ */ e.createElement(
+  const v = (y) => l === "single" && t && !a ? null : y != null && y.customElement ? /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__item`] }, y.customElement.selectedItemBody) : /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__item`] }, y.icon && /* @__PURE__ */ e.createElement(
     P,
     {
       source: y.icon,
@@ -4009,11 +4018,11 @@ const ft = "select-all", Qo = (t, a) => {
     }
   ), /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__item__content`] }, y.name)), E = (y) => s(y.target.value), N = (y) => {
     var C, D;
-    (C = f.current) != null && C.id && y.key === "Enter" && n((D = f.current) == null ? void 0 : D.id), l === "multi" && (y.key === "Backspace" || y.key === "Delete") && !m && o && (o == null ? void 0 : o.length) > 0 && d(o[o.length - 1].key);
+    (C = b.current) != null && C.id && y.key === "Enter" && n((D = b.current) == null ? void 0 : D.id), l === "multi" && (y.key === "Backspace" || y.key === "Delete") && !m && o && (o == null ? void 0 : o.length) > 0 && d(o[o.length - 1].key);
   }, $ = () => /* @__PURE__ */ e.createElement(
     "input",
     {
-      ref: v,
+      ref: f,
       className: u(
         de[`${ue}__input`],
         de[`${ue}__input--${i}`]
@@ -4041,7 +4050,7 @@ const ft = "select-all", Qo = (t, a) => {
         [de[`${ue}--single`]]: l === "single"
       })
     },
-    /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__item-container`] }, l === "single" ? b(o[0]) : o.map((y) => /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__item-container`] }, l === "single" ? v(o[0]) : o.map((y) => /* @__PURE__ */ e.createElement(
       Mr,
       {
         key: y.name,
@@ -4054,7 +4063,7 @@ const ft = "select-all", Qo = (t, a) => {
           C.stopPropagation(), d(y.key);
         }
       },
-      b(y)
+      v(y)
     ))),
     w && $()
   );
@@ -4070,7 +4079,7 @@ const ft = "select-all", Qo = (t, a) => {
   isOpen: d,
   onVisibilityChange: n
 }) => {
-  const s = aa(), [p, m] = e.useState(!1), [f, g] = e.useState(null), [w, v] = e.useState(o), h = e.useRef([]), b = e.useRef(null), { refs: E, floatingStyles: N, context: $, isPositioned: y } = ra({
+  const s = aa(), [p, m] = e.useState(!1), [b, g] = e.useState(null), [w, f] = e.useState(o), h = e.useRef([]), v = e.useRef(null), { refs: E, floatingStyles: N, context: $, isPositioned: y } = ra({
     nodeId: s,
     open: d,
     strategy: l,
@@ -4084,7 +4093,7 @@ const ft = "select-all", Qo = (t, a) => {
       Er({
         apply({ availableHeight: q, rects: he, elements: oe }) {
           Cr.flushSync(() => {
-            v(
+            f(
               Math.max(
                 Math.min(o, q),
                 _
@@ -4104,10 +4113,10 @@ const ft = "select-all", Qo = (t, a) => {
   }, i)), D = sa($, { role: "listbox" }), L = na($, c), G = s_($, {
     enabled: a.length > 0 && !t,
     listRef: h,
-    activeIndex: f,
+    activeIndex: b,
     onNavigate: g,
     virtual: !0,
-    virtualItemRef: b,
+    virtualItemRef: v,
     disabledIndices: Qo(
       a,
       (q) => !!q.disabled || !!q.groupHeader
@@ -4125,9 +4134,9 @@ const ft = "select-all", Qo = (t, a) => {
     context: $,
     nodeId: s,
     setFloating: E.setFloating,
-    activeIndex: f,
+    activeIndex: b,
     listElementsRef: h,
-    virtualItemRef: b,
+    virtualItemRef: v,
     maxHeight: w,
     pointer: p,
     setPointer: m
@@ -4144,25 +4153,25 @@ const ft = "select-all", Qo = (t, a) => {
     () => (t == null ? void 0 : t.map(Sa)) || []
   ), d = t !== void 0, n = d ? (t == null ? void 0 : t.map(Sa)) || [] : c, [s, p] = e.useState(""), m = e.useMemo(() => {
     const h = r === "multi" && _;
-    let b = a;
-    return s && (b = b.filter((E) => {
+    let v = a;
+    return s && (v = v.filter((E) => {
       var C;
       if (E.groupHeader)
         return !1;
       const N = s.toLowerCase(), $ = E.name.toLowerCase(), y = (C = E.secondaryText) == null ? void 0 : C.toLowerCase();
       return $.includes(N) || (y == null ? void 0 : y.includes(N));
-    })), h && b.length > 1 && (b = [
+    })), h && v.length > 1 && (v = [
       {
         key: ft,
         name: _
       },
-      ...b
-    ]), b;
-  }, [s, a, r, _]), f = (h) => {
-    const b = a.find((E) => E.key === h);
-    if (!((!b || b.disabled) && h !== ft))
+      ...v
+    ]), v;
+  }, [s, a, r, _]), b = (h) => {
+    const v = a.find((E) => E.key === h);
+    if (!((!v || v.disabled) && h !== ft))
       if (r === "single")
-        i(() => (b && o([b]), [h])), l(!1);
+        i(() => (v && o([v]), [h])), l(!1);
       else if (h === ft)
         n.length === Ma(a).length ? i(() => (o(null), [])) : i(() => {
           const E = Ma(a);
@@ -4181,9 +4190,9 @@ const ft = "select-all", Qo = (t, a) => {
     selectedKeys: n,
     items: m,
     searchPhrase: s,
-    handleSelect: f,
+    handleSelect: b,
     handleOnFilter: (h) => p(h),
-    handleItemRemove: (h) => f(h),
+    handleItemRemove: (h) => b(h),
     handleClear: () => {
       !d && i([]), o(null), p(""), l(!1);
     }
@@ -4205,12 +4214,12 @@ const ft = "select-all", Qo = (t, a) => {
     placeholder: s = "Select option",
     isRequired: p,
     noSearchResultText: m = "No results found",
-    selectAllOptionText: f,
+    selectAllOptionText: b,
     type: g = "single",
     searchDisabled: w = !1,
-    hideClearButton: v,
+    hideClearButton: f,
     isVisible: h,
-    onOpen: b,
+    onOpen: v,
     onClose: E,
     openedOnInit: N = !1,
     clearSearchAfterSelection: $,
@@ -4251,7 +4260,7 @@ const ft = "select-all", Qo = (t, a) => {
     "virtuosoProps"
   ]);
   const [he, oe] = e.useState(N), [Ee, Oe] = e.useState(!1), $e = h !== void 0, Pe = $e ? h : he, je = (ht, ce) => {
-    ht ? !Pe && (b == null || b(ce)) : Pe && (E == null || E(ce)), !$e && oe(ht);
+    ht ? !Pe && (v == null || v(ce)) : Pe && (E == null || E(ce)), !$e && oe(ht);
   }, {
     selectedKeys: lt,
     items: ct,
@@ -4264,7 +4273,7 @@ const ft = "select-all", Qo = (t, a) => {
     selected: d,
     options: i,
     type: g,
-    selectAllOptionText: f,
+    selectAllOptionText: b,
     onSelect: y,
     setOpen: je
   }), {
@@ -4303,7 +4312,7 @@ const ft = "select-all", Qo = (t, a) => {
       isItemSelected: lt.length > 0,
       isOpen: Pe,
       onClear: Ie,
-      hideClearButton: v,
+      hideClearButton: f,
       isDisabled: l,
       isError: c,
       isRequired: p,
@@ -4368,20 +4377,20 @@ const ft = "select-all", Qo = (t, a) => {
   openedOnInit: s,
   closeOnEsc: p = !0,
   useDismissHookProps: m,
-  useClickHookProps: f,
+  useClickHookProps: b,
   floatingStrategy: g
 }) => {
-  const [w, v] = e.useState(s), h = Ha(), b = aa(), E = n !== void 0, N = E ? n : w, $ = typeof _ == "string", y = typeof t == "function", C = (Oe, $e) => {
-    Oe ? r == null || r($e) : a == null || a($e), !E && v(Oe);
+  const [w, f] = e.useState(s), h = Ha(), v = aa(), E = n !== void 0, N = E ? n : w, $ = typeof _ == "string", y = typeof t == "function", C = (Oe, $e) => {
+    Oe ? r == null || r($e) : a == null || a($e), !E && f(Oe);
   }, { refs: D, context: L, floatingStyles: G } = ra({
-    nodeId: b,
+    nodeId: v,
     open: N,
     onOpenChange: C,
     middleware: [_a(d), oa(i), Ga()],
     placement: c,
     strategy: g,
     whileElementsMounted: la
-  }), T = ca(L, f), M = na(L, k({
+  }), T = ca(L, b), M = na(L, k({
     escapeKey: p
   }, m)), V = sa(L), { getReferenceProps: q, getFloatingProps: he } = ia([
     T,
@@ -4396,7 +4405,7 @@ const ft = "select-all", Qo = (t, a) => {
       className: l
     }),
     y ? t() : t
-  ), /* @__PURE__ */ e.createElement(da, { id: b }, N && /* @__PURE__ */ e.createElement(Pa, { context: L, modal: !1 }, /* @__PURE__ */ e.createElement(
+  ), /* @__PURE__ */ e.createElement(da, { id: v }, N && /* @__PURE__ */ e.createElement(Pa, { context: L, modal: !1 }, /* @__PURE__ */ e.createElement(
     "div",
     k({
       className: oe,
@@ -4449,7 +4458,7 @@ const Dt = {
         [Dt[`${Bt}--${t}`]]: t
       },
       r
-    ), m = 2 * Math.PI * ((s - n) / 2), f = {
+    ), m = 2 * Math.PI * ((s - n) / 2), b = {
       strokeDasharray: m.toFixed(3),
       strokeDashoffset: `${((100 - d) / 100 * m).toFixed(3)}px`
     }, g = `${s / 2} ${s / 2} ${s} ${s}`;
@@ -4474,7 +4483,7 @@ const Dt = {
         "circle",
         {
           className: Dt[`${Bt}__indicator--${t}`],
-          style: f,
+          style: b,
           cx: s,
           cy: s,
           r: (s - n) / 2,
@@ -4556,7 +4565,7 @@ const Dt = {
   onClose: d,
   onLinkClick: n
 }) => {
-  const s = e.useRef(null), [p, m] = e.useState("medium"), f = u(
+  const s = e.useRef(null), [p, m] = e.useState("medium"), b = u(
     Ne[Ce],
     {
       [Ne[`${Ce}--light`]]: l,
@@ -4566,12 +4575,12 @@ const Dt = {
     t
   );
   e.useEffect(() => {
-    const w = () => s.current && s.current.offsetWidth <= hl ? m("small") : s.current && s.current.offsetWidth >= kl ? m("large") : m("medium"), v = xr(
+    const w = () => s.current && s.current.offsetWidth <= hl ? m("small") : s.current && s.current.offsetWidth >= kl ? m("large") : m("medium"), f = xr(
       w,
       yl
     );
-    return window.addEventListener("resize", v), w(), () => {
-      v.cancel(), window.removeEventListener("resize", v);
+    return window.addEventListener("resize", f), w(), () => {
+      f.cancel(), window.removeEventListener("resize", f);
     };
   }, []);
   const g = /* @__PURE__ */ e.createElement("div", { className: Ne[`${Ce}__footer`] }, a && /* @__PURE__ */ e.createElement(
@@ -4584,7 +4593,7 @@ const Dt = {
     },
     a
   ), c && /* @__PURE__ */ e.createElement(W, { size: "compact", kind: "text", onClick: n }, c));
-  return /* @__PURE__ */ e.createElement("div", { ref: s, className: f }, /* @__PURE__ */ e.createElement("div", { className: Ne[`${Ce}__content`] }, o && /* @__PURE__ */ e.createElement("img", { src: o, className: Ne[`${Ce}__img`] }), /* @__PURE__ */ e.createElement("div", { className: Ne[`${Ce}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: Ne[`${Ce}__header`] }, _), /* @__PURE__ */ e.createElement(I, { as: "div" }, r), p !== "large" && g), p === "large" && g), d && /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { ref: s, className: b }, /* @__PURE__ */ e.createElement("div", { className: Ne[`${Ce}__content`] }, o && /* @__PURE__ */ e.createElement("img", { src: o, className: Ne[`${Ce}__img`] }), /* @__PURE__ */ e.createElement("div", { className: Ne[`${Ce}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: Ne[`${Ce}__header`] }, _), /* @__PURE__ */ e.createElement(I, { as: "div" }, r), p !== "large" && g), p === "large" && g), d && /* @__PURE__ */ e.createElement(
     "button",
     {
       type: "button",
@@ -4722,7 +4731,7 @@ const Dt = {
   cropOnBlur: i = !0,
   onChange: d
 }) => {
-  const [n, s] = e.useState(!0), [p, m] = e.useState(!1), f = e.useRef(null), g = !!l && !a && !r, w = t && !n && "true", v = u(
+  const [n, s] = e.useState(!0), [p, m] = e.useState(!1), b = e.useRef(null), g = !!l && !a && !r, w = t && !n && "true", f = u(
     c,
     xe[Me],
     xe[`${Me}--${o}`],
@@ -4737,11 +4746,11 @@ const Dt = {
   const h = (C) => {
     const D = C.currentTarget.value;
     d(D);
-  }, b = () => {
+  }, v = () => {
     d("");
   }, E = () => {
     var C;
-    (C = f.current) == null || C.focus();
+    (C = b.current) == null || C.focus();
   }, N = () => {
     t && s(!1), m(!0);
   }, $ = () => {
@@ -4754,7 +4763,7 @@ const Dt = {
     {
       "aria-expanded": w,
       role: "search",
-      className: v,
+      className: f,
       onClick: E
     },
     /* @__PURE__ */ e.createElement(
@@ -4779,7 +4788,7 @@ const Dt = {
         "input",
         {
           role: "searchbox",
-          ref: f,
+          ref: b,
           type: "text",
           value: l,
           placeholder: _,
@@ -4797,7 +4806,7 @@ const Dt = {
         "aria-label": "Clear search",
         title: "Clear search",
         className: xe[`${Me}__clear-icon`],
-        onClick: b,
+        onClick: v,
         icon: /* @__PURE__ */ e.createElement(P, { source: Ae, kind: "primary" }),
         kind: "text",
         size: "compact"
@@ -4922,17 +4931,17 @@ const Dt = {
     "innerRef",
     "ariaLabel"
   ]);
-  const f = o !== void 0, [g, w] = e.useState(
-    () => f ? o : a
-  ), [v, h] = e.useState(!1), b = f ? o : g, E = i === "loading", N = i === "locked", $ = c === "large" ? "small" : "xsmall", y = b ? "on" : "off", C = r || E || N, D = C ? "disabled" : "enabled", L = u(
+  const b = o !== void 0, [g, w] = e.useState(
+    () => b ? o : a
+  ), [f, h] = e.useState(!1), v = b ? o : g, E = i === "loading", N = i === "locked", $ = c === "large" ? "small" : "xsmall", y = v ? "on" : "off", C = r || E || N, D = C ? "disabled" : "enabled", L = u(
     Q[X],
     Q[`${X}--${c}`],
     {
-      [Q[`${X}--focused`]]: v
+      [Q[`${X}--focused`]]: f
     },
     t
   ), G = (T) => {
-    l == null || l(T, !b), f || (T.stopPropagation(), w((M) => !M));
+    l == null || l(T, !v), b || (T.stopPropagation(), w((M) => !M));
   };
   return /* @__PURE__ */ e.createElement("span", { className: L }, /* @__PURE__ */ e.createElement(
     "input",
@@ -4943,7 +4952,7 @@ const Dt = {
         Q[`${X}__input--${D}`]
       ),
       onChange: G,
-      checked: b,
+      checked: v,
       name: _,
       ref: d,
       disabled: C,
@@ -4956,7 +4965,7 @@ const Dt = {
     "span",
     {
       className: u(Q[`${X}__container`], {
-        [Q[`${X}__container--focused`]]: v
+        [Q[`${X}__container--focused`]]: f
       })
     },
     /* @__PURE__ */ e.createElement(
@@ -5102,7 +5111,7 @@ const Dt = {
       }
       _(g.innerText);
     }
-  }, f = (g) => {
+  }, b = (g) => {
     g.preventDefault();
     const w = g.clipboardData.getData("text/plain");
     document.execCommand("insertHTML", !1, Xa(w));
@@ -5113,7 +5122,7 @@ const Dt = {
       ref: a,
       className: t,
       contentEditable: !0,
-      onPaste: f,
+      onPaste: b,
       onBlur: m,
       onKeyDown: p,
       dangerouslySetInnerHTML: { __html: Xa(l) }
@@ -5149,7 +5158,7 @@ const Dt = {
   _e.semicolon,
   _e.comma
 ], Ll = [_e.backspace, _e.delete], Ol = (m) => {
-  var f = m, {
+  var b = m, {
     id: t,
     tags: a,
     onChange: r,
@@ -5161,7 +5170,7 @@ const Dt = {
     inputClassName: d,
     onBlur: n,
     addOnBlur: s = !0
-  } = f, p = F(f, [
+  } = b, p = F(b, [
     "id",
     "tags",
     "onChange",
@@ -5184,23 +5193,23 @@ const Dt = {
     d,
     It[`${Xt}__input`],
     It[`${Xt}__input--${c}`]
-  ), [v, h] = e.useState(""), b = e.useRef(null), E = (T) => {
+  ), [f, h] = e.useState(""), v = e.useRef(null), E = (T) => {
     T.trim() !== "" && (r([...a || [], T]), h(""));
   }, N = (T) => {
     const M = [...a || []];
     M.splice(T, 1), r(M);
   }, $ = (T) => h(T.target.value), y = (T) => {
     if (Ml.includes(T.key)) {
-      if (T.preventDefault(), v === "")
+      if (T.preventDefault(), f === "")
         return;
-      E(v);
+      E(f);
     } else if (Ll.includes(T.key)) {
-      if (v !== "" || !(a != null && a.length))
+      if (f !== "" || !(a != null && a.length))
         return;
       N(a.length - 1);
     }
   }, C = (T) => {
-    s && E(v), n == null || n(T);
+    s && E(f), n == null || n(T);
   }, D = (T, M) => {
     const V = [...a || []];
     V.reduce(
@@ -5218,7 +5227,7 @@ const Dt = {
       key: `${M}${T}`,
       update: D,
       remove: N,
-      inputRef: b,
+      inputRef: v,
       validator: _,
       size: c
     },
@@ -5230,7 +5239,7 @@ const Dt = {
       key: `${M}${T.children}`,
       update: D,
       remove: N,
-      inputRef: b,
+      inputRef: v,
       validator: _,
       size: c,
       tagProps: T
@@ -5241,10 +5250,10 @@ const Dt = {
     "input",
     x(k({}, p), {
       id: t,
-      ref: b,
+      ref: v,
       className: w,
       placeholder: l,
-      value: v,
+      value: f,
       onChange: $,
       onKeyDown: y,
       onPaste: L,
@@ -5362,7 +5371,7 @@ const Dt = {
     },
     t
   );
-  return /* @__PURE__ */ e.createElement("div", { className: i }, /* @__PURE__ */ e.createElement(Tr, { component: null }, a.map(({ id: d, kind: n, content: s, removable: p, action: m, onClose: f }) => /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: i }, /* @__PURE__ */ e.createElement(Tr, { component: null }, a.map(({ id: d, kind: n, content: s, removable: p, action: m, onClose: b }) => /* @__PURE__ */ e.createElement(
     Dr,
     {
       key: d,
@@ -5378,7 +5387,7 @@ const Dt = {
       Kl,
       {
         kind: n,
-        onClose: f,
+        onClose: b,
         removable: p,
         action: m
       },
@@ -5399,14 +5408,14 @@ const Dt = {
       [Qt[`${jt}--error`]]: a
     }), m = (g) => {
       s(!1), i == null || i(g);
-    }, f = (g) => {
+    }, b = (g) => {
       s(!0), d == null || d(g);
     };
     return /* @__PURE__ */ e.createElement(I, { as: "div", className: p }, /* @__PURE__ */ e.createElement(
       "textarea",
       x(k({}, r), {
         ref: _,
-        onFocus: f,
+        onFocus: b,
         onBlur: m
       })
     ));
@@ -5562,11 +5571,11 @@ const Dt = {
   onCloseButtonClick: s,
   onRetryButtonClick: p
 }) => {
-  const [m, f] = e.useState(o || !1), g = c === "error", w = c === "success", v = u(z[me], a, {
+  const [m, b] = e.useState(o || !1), g = c === "error", w = c === "success", f = u(z[me], a, {
     [z[`${me}--error`]]: g,
     [z[`${me}--success`]]: w
-  }), h = !(g && (p || s)), b = () => f(!m);
-  return n === "single" ? /* @__PURE__ */ e.createElement("div", { className: v }, /* @__PURE__ */ e.createElement("div", { className: z[`${me}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: z[`${Je}`] }, /* @__PURE__ */ e.createElement(
+  }), h = !(g && (p || s)), v = () => b(!m);
+  return n === "single" ? /* @__PURE__ */ e.createElement("div", { className: f }, /* @__PURE__ */ e.createElement("div", { className: z[`${me}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: z[`${Je}`] }, /* @__PURE__ */ e.createElement(
     Ql,
     {
       title: g && l || _,
@@ -5582,11 +5591,11 @@ const Dt = {
       onCloseButtonClick: s,
       onRetryButtonClick: p
     }
-  ))) : /* @__PURE__ */ e.createElement("div", { className: v }, /* @__PURE__ */ e.createElement(
+  ))) : /* @__PURE__ */ e.createElement("div", { className: f }, /* @__PURE__ */ e.createElement(
     "div",
     {
       className: z[`${me}__wrapper`],
-      onClick: b
+      onClick: v
     },
     /* @__PURE__ */ e.createElement("div", { className: z[`${Je}`] }, /* @__PURE__ */ e.createElement("div", { className: z[`${Je}__icon`] }, Zl(c, r)), /* @__PURE__ */ e.createElement("div", { className: z[`${Je}__title`] }, /* @__PURE__ */ e.createElement(I, { size: "sm", as: "div" }, g ? l : _)), h && /* @__PURE__ */ e.createElement(
       "button",
@@ -5594,7 +5603,7 @@ const Dt = {
         className: z[`${Je}__collapse-button`],
         type: "button",
         "aria-label": "Collapse button",
-        onClick: b
+        onClick: v
       },
       m ? /* @__PURE__ */ e.createElement(P, { source: ta }) : /* @__PURE__ */ e.createElement(P, { source: Rt })
     ), c === "error" && /* @__PURE__ */ e.createElement("div", { className: z[`${Je}__actions-container`] }, /* @__PURE__ */ e.createElement(