@livechat/design-system-react-components 1.0.0-alpha.58 → 1.0.0-alpha.59

package/dist/dsrc.es.js

@@ -5,7 +5,7 @@ import * as e from "react";
 import { useReducer as Vr, useRef as Yr, useEffect as Me, useCallback as rt, useMemo as at } from "react";
 import m from "clsx";
 import { useFloating as dr, offset as ur, flip as mr, autoUpdate as pr, arrow as qr } from "@floating-ui/react-dom";
-import { Close as ne, Info as gr, Warning as fr, CheckCircleSolid as br, Block as hr, Person as Kr, ChevronUp as bt, ChevronDown as ht, DoubleArrowLeft as Jr, ChevronLeft as Xr, ChevronRight as Zr, DoubleArrowRight as Qr, VisibilityOn as jr, VisibilityOff as ea, Search as ta, LockBlack as ra, Refresh as aa, Check as vr, Error as _a } from "@livechat/design-system-icons/react/material";
+import { Close as se, Info as gr, Warning as fr, CheckCircleSolid as br, Block as hr, Person as Kr, ChevronUp as bt, ChevronDown as ht, DoubleArrowLeft as Jr, ChevronLeft as Xr, ChevronRight as Zr, DoubleArrowRight as Qr, VisibilityOn as jr, VisibilityOff as ea, Search as ta, LockBlack as ra, Refresh as aa, Check as vr, Error as _a } from "@livechat/design-system-icons/react/material";
 import yr from "lodash.debounce";
 import { getContrast as Mt } from "polished";
 import oa from "react-day-picker";
@@ -623,7 +623,7 @@ const Yo = {
   "btn__icon--left": "lc-Button-module__btn__icon--left___H68zu",
   "btn__icon--right": "lc-Button-module__btn__icon--right___fHr3D",
   "btn--icon-only--bg": "lc-Button-module__btn--icon-only--bg___X-4V2"
-}, Q = "btn", _e = e.forwardRef(
+}, Q = "btn", oe = e.forwardRef(
   ({
     loading: t = !1,
     disabled: r = !1,
@@ -748,14 +748,14 @@ const Yo = {
       size: "large",
       className: de[`${ue}__icon`]
     }
-  ), /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__content`] }, /* @__PURE__ */ e.createElement(H, { as: "div", className: de[`${ue}__content__text`] }, t), (a || _) && /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__content__cta`] }, a && /* @__PURE__ */ e.createElement(_e, { kind: "primary", onClick: a.handleClick }, a.label), _ && /* @__PURE__ */ e.createElement(_e, { kind: "text", onClick: _.handleClick }, _.label))), l && /* @__PURE__ */ e.createElement(
+  ), /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__content`] }, /* @__PURE__ */ e.createElement(H, { as: "div", className: de[`${ue}__content__text`] }, t), (a || _) && /* @__PURE__ */ e.createElement("div", { className: de[`${ue}__content__cta`] }, a && /* @__PURE__ */ e.createElement(oe, { kind: "primary", onClick: a.handleClick }, a.label), _ && /* @__PURE__ */ e.createElement(oe, { kind: "text", onClick: _.handleClick }, _.label))), l && /* @__PURE__ */ e.createElement(
     "button",
     {
       type: "button",
       className: de[`${ue}__close-icon`],
       onClick: l
     },
-    /* @__PURE__ */ e.createElement(x, { source: ne, size: "large", kind: "primary" })
+    /* @__PURE__ */ e.createElement(x, { source: se, size: "large", kind: "primary" })
   ));
 };
 function Da(t = "", r = 2) {
@@ -930,7 +930,7 @@ const Ha = "segmented-control", Qo = ({
   }, i = r.map(({ id: f, label: h, loading: b, disabled: p, icon: v }) => {
     const k = f === d, y = k ? lt["btn--active"] : "", E = k ? !1 : b;
     return /* @__PURE__ */ e.createElement(
-      _e,
+      oe,
       {
         key: f,
         fullWidth: l,
@@ -990,9 +990,9 @@ const Ha = "segmented-control", Qo = ({
     },
     l
   ), b && /* @__PURE__ */ e.createElement("div", { className: q[ct] }, /* @__PURE__ */ e.createElement("div", { className: q[`${ct}__line`] }), /* @__PURE__ */ e.createElement("div", { className: q[`${ct}__buttons`] }, f && r.map(
-    ({ kind: y, onClick: E, children: w }) => /* @__PURE__ */ e.createElement(_e, { size: "compact", kind: y, onClick: E }, w)
+    ({ kind: y, onClick: E, children: w }) => /* @__PURE__ */ e.createElement(oe, { size: "compact", kind: y, onClick: E }, w)
   ), h && /* @__PURE__ */ e.createElement(
-    _e,
+    oe,
     {
       className: q[`${ct}__buttons-expander`],
       kind: "plain",
@@ -1756,7 +1756,7 @@ const er = {
         type: g && !n ? g : "text"
       }
     ), k && rr(_, a), g === "password" && /* @__PURE__ */ e.createElement(
-      _e,
+      oe,
       {
         disabled: a,
         kind: "subtle",
@@ -1852,7 +1852,7 @@ const er = {
     onClick: a,
     type: "button"
   },
-  /* @__PURE__ */ e.createElement(x, { source: ne, size: "large", customColor: r })
+  /* @__PURE__ */ e.createElement(x, { source: se, size: "large", customColor: r })
 ), ke = "modal", cl = ({
   children: t,
   className: r = "",
@@ -2091,7 +2091,7 @@ const er = {
           className: j[`${K}__clear-icon`],
           onClick: p
         },
-        /* @__PURE__ */ e.createElement(x, { kind: "primary", size: "small", source: ne })
+        /* @__PURE__ */ e.createElement(x, { kind: "primary", size: "small", source: se })
       ),
       /* @__PURE__ */ e.createElement(
         x,
@@ -2183,8 +2183,8 @@ const er = {
     "li",
     {
       "data-testid": $.key,
-      ref: (se) => {
-        u === $.key && (se == null || se.scrollIntoView({ block: "nearest" }));
+      ref: (ee) => {
+        u === $.key && (ee == null || ee.scrollIntoView({ block: "nearest" }));
       },
       role: "option",
       "aria-current": u === $.key,
@@ -2210,7 +2210,7 @@ const er = {
 }, T_ = "lc-Picker-module__picker___GRj9W", I_ = "lc-Picker-module__picker__container___s0PUc", lr = {
   picker: T_,
   picker__container: I_
-}, B_ = "lc-Tag-module__tag___1QRVY", P_ = "lc-Tag-module__tag__remove___UmtrW", A_ = "lc-Tag-module__icon___2Z-35", F_ = "lc-Tag-module__tag__icon___tZoQ9", R_ = "lc-Tag-module__tag__avatar___U4c-P", oe = {
+}, B_ = "lc-Tag-module__tag___1QRVY", P_ = "lc-Tag-module__tag__remove___UmtrW", A_ = "lc-Tag-module__icon___2Z-35", F_ = "lc-Tag-module__tag__icon___tZoQ9", R_ = "lc-Tag-module__tag__avatar___U4c-P", le = {
   tag: B_,
   "tag--success": "lc-Tag-module__tag--success___P2hXQ",
   tag__remove: P_,
@@ -2229,7 +2229,7 @@ const er = {
   "tag--dismissible": "lc-Tag-module__tag--dismissible___Qobyr",
   tag__icon: F_,
   tag__avatar: R_
-}, le = "tag", L_ = (t) => t ? Mt(t, "#FFFFFF") > 4.5 ? "text-white" : "text-black" : "", Nr = ({
+}, ce = "tag", L_ = (t) => t ? Mt(t, "#FFFFFF") > 4.5 ? "text-white" : "text-black" : "", Nr = ({
   className: t = "",
   children: r,
   dismissible: a = !1,
@@ -2244,15 +2244,15 @@ const er = {
   ...g
 }) => {
   const i = m(
-    oe[le],
+    le[ce],
     t,
-    oe[`${le}--${_}`],
-    oe[`${le}--${l}`],
+    le[`${ce}--${_}`],
+    le[`${ce}--${l}`],
     {
-      [oe[`${le}--dismissible`]]: a,
-      [oe[`${le}--outline`]]: s,
-      [oe[`${le}--with-icon`]]: !!d || !!n,
-      [oe[`${le}--${L_(u)}`]]: !!u
+      [le[`${ce}--dismissible`]]: a,
+      [le[`${ce}--outline`]]: s,
+      [le[`${ce}--with-icon`]]: !!d || !!n,
+      [le[`${ce}--${L_(u)}`]]: !!u
     }
   ), f = () => u ? s ? {
     style: {
@@ -2276,7 +2276,7 @@ const er = {
     n && /* @__PURE__ */ e.createElement(
       "img",
       {
-        className: oe[`${le}__avatar`],
+        className: le[`${ce}__avatar`],
         src: n,
         alt: "tag-avatar",
         "data-testid": "lc-tag-avatar"
@@ -2287,7 +2287,7 @@ const er = {
       x,
       {
         "data-testid": "lc-tag-icon",
-        className: oe[`${le}__icon`],
+        className: le[`${ce}__icon`],
         source: d,
         size: "small",
         customColor: h()
@@ -2300,13 +2300,13 @@ const er = {
         title: "Remove",
         onClick: c,
         type: "button",
-        className: oe[`${le}__remove`]
+        className: le[`${ce}__remove`]
       },
       /* @__PURE__ */ e.createElement(
         x,
         {
           "data-dismiss-icon": !0,
-          source: ne,
+          source: se,
           size: o,
           customColor: h()
         }
@@ -2389,7 +2389,7 @@ const er = {
     r || P.getAttribute("data-dismiss-icon") || k((M) => !M);
   }, $ = () => {
     k(!1);
-  }, se = (D) => {
+  }, ee = (D) => {
     if (g === "single")
       return k(!1), b([D]);
     const P = D.key, M = Ne;
@@ -2461,7 +2461,7 @@ const er = {
       emptyStateText: n,
       selectAllOptionText: u,
       onClose: $,
-      onSelect: se,
+      onSelect: ee,
       onSelectAll: yt
     }
   )));
@@ -2593,7 +2593,7 @@ const qe = {
       )
     );
   }
-), ee = {
+), te = {
   "promo-banner": "lc-PromoBanner-module__promo-banner___-mGpq",
   "promo-banner__content": "lc-PromoBanner-module__promo-banner__content___kRWar",
   "promo-banner__wrapper": "lc-PromoBanner-module__promo-banner__wrapper___I-8cl",
@@ -2605,7 +2605,7 @@ const qe = {
   "promo-banner--small": "lc-PromoBanner-module__promo-banner--small___7sWLV",
   "promo-banner--large": "lc-PromoBanner-module__promo-banner--large___pMiCU",
   "promo-banner__close-icon": "lc-PromoBanner-module__promo-banner__close-icon___GowBL"
-}, V_ = 400, Y_ = 800, q_ = 500, te = "promo-banner", dl = ({
+}, V_ = 400, Y_ = 800, q_ = 500, re = "promo-banner", dl = ({
   className: t,
   buttonText: r,
   children: a,
@@ -2618,11 +2618,11 @@ const qe = {
   onLinkClick: n
 }) => {
   const u = e.useRef(null), [g, i] = e.useState("medium"), f = m(
-    ee[te],
+    te[re],
     {
-      [ee[`${te}--light`]]: l,
-      [ee[`${te}--small`]]: g === "small",
-      [ee[`${te}--large`]]: g === "large"
+      [te[`${re}--light`]]: l,
+      [te[`${re}--small`]]: g === "small",
+      [te[`${re}--large`]]: g === "large"
     },
     t
   );
@@ -2635,24 +2635,24 @@ const qe = {
       p.cancel(), window.removeEventListener("resize", b);
     };
   }, []);
-  const h = /* @__PURE__ */ e.createElement("div", { className: ee[`${te}__footer`] }, r && /* @__PURE__ */ e.createElement(
-    _e,
+  const h = /* @__PURE__ */ e.createElement("div", { className: te[`${re}__footer`] }, r && /* @__PURE__ */ e.createElement(
+    oe,
     {
       kind: "primary",
       size: "compact",
       onClick: s,
-      className: ee[`${te}__button-text`]
+      className: te[`${re}__button-text`]
     },
     r
-  ), c && /* @__PURE__ */ e.createElement(_e, { size: "compact", kind: "text", onClick: n }, c));
-  return /* @__PURE__ */ e.createElement("div", { ref: u, className: f }, /* @__PURE__ */ e.createElement("div", { className: ee[`${te}__content`] }, o && /* @__PURE__ */ e.createElement("img", { src: o, className: ee[`${te}__img`] }), /* @__PURE__ */ e.createElement("div", { className: ee[`${te}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: ee[`${te}__header`] }, _), /* @__PURE__ */ e.createElement(H, { as: "div" }, a), g !== "large" && h), g === "large" && h), d && /* @__PURE__ */ e.createElement(
+  ), c && /* @__PURE__ */ e.createElement(oe, { size: "compact", kind: "text", onClick: n }, c));
+  return /* @__PURE__ */ e.createElement("div", { ref: u, className: f }, /* @__PURE__ */ e.createElement("div", { className: te[`${re}__content`] }, o && /* @__PURE__ */ e.createElement("img", { src: o, className: te[`${re}__img`] }), /* @__PURE__ */ e.createElement("div", { className: te[`${re}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: te[`${re}__header`] }, _), /* @__PURE__ */ e.createElement(H, { as: "div" }, a), g !== "large" && h), g === "large" && h), d && /* @__PURE__ */ e.createElement(
     "button",
     {
       type: "button",
-      className: ee[`${te}__close-icon`],
+      className: te[`${re}__close-icon`],
       onClick: d
     },
-    /* @__PURE__ */ e.createElement(x, { source: ne, size: "large", kind: "primary" })
+    /* @__PURE__ */ e.createElement(x, { source: se, size: "large", kind: "primary" })
   ));
 }, pe = {
   "radio-button": "lc-RadioButton-module__radio-button___WaToM",
@@ -2682,7 +2682,7 @@ const qe = {
       }
     )), t && /* @__PURE__ */ e.createElement(H, { as: "div", size: "md", className: pe[`${ge}__text`] }, t)), a && /* @__PURE__ */ e.createElement(vt, { className: pe[`${ge}__helper`] }, a));
   }
-), ce = {
+), ne = {
   "search-input": "lc-Search-module__search-input___FsbCk",
   "search-input--compact": "lc-Search-module__search-input--compact___498To",
   "search-input--medium": "lc-Search-module__search-input--medium___Hwteg",
@@ -2695,7 +2695,7 @@ const qe = {
   "search-input__clear-icon": "lc-Search-module__search-input__clear-icon___LoNkc",
   "search-input__loader": "lc-Search-module__search-input__loader___pkpIG",
   "search-input__input": "lc-Search-module__search-input__input___OhyTr"
-}, ae = "search-input", K_ = `${ae}__input`, ml = ({
+}, _e = "search-input", K_ = `${_e}__input`, ml = ({
   isCollapsable: t,
   isDisabled: r,
   isLoading: a,
@@ -2707,12 +2707,12 @@ const qe = {
 }) => {
   const [d, n] = e.useState(!0), [u, g] = e.useState(!1), i = e.useRef(null), f = !!l && !r && !a, h = t && !d && "true", b = m(
     c,
-    ce[ae],
-    ce[`${ae}--${o}`],
-    u && ce[`${ae}--focused`],
-    r && ce[`${ae}--disabled`],
-    t && ce[`${ae}--collapsable`],
-    !d && ce[`${ae}--collapsable--open`]
+    ne[_e],
+    ne[`${_e}--${o}`],
+    u && ne[`${_e}--focused`],
+    r && ne[`${_e}--disabled`],
+    t && ne[`${_e}--collapsable`],
+    !d && ne[`${_e}--collapsable--open`]
   );
   e.useEffect(() => {
     t && l && n(!1);
@@ -2743,7 +2743,7 @@ const qe = {
     /* @__PURE__ */ e.createElement(
       x,
       {
-        className: ce[`${ae}__search-icon`],
+        className: ne[`${_e}__search-icon`],
         source: ta,
         disabled: r,
         kind: "primary"
@@ -2754,7 +2754,7 @@ const qe = {
       {
         role: "searchbox",
         ref: i,
-        className: ce[K_],
+        className: ne[K_],
         type: "text",
         value: l,
         placeholder: _,
@@ -2770,16 +2770,16 @@ const qe = {
       {
         "aria-label": "Clear search",
         title: "Clear search",
-        className: ce[`${ae}__clear-icon`],
+        className: ne[`${_e}__clear-icon`],
         onClick: v
       },
-      /* @__PURE__ */ e.createElement(x, { source: ne, kind: "primary" })
+      /* @__PURE__ */ e.createElement(x, { source: se, kind: "primary" })
     ),
     a && /* @__PURE__ */ e.createElement(
       "div",
       {
-        "data-testid": `${ae}-loader`,
-        className: ce[`${ae}__loader`]
+        "data-testid": `${_e}-loader`,
+        className: ne[`${_e}__loader`]
       },
       /* @__PURE__ */ e.createElement(Ht, { size: "small" })
     )
@@ -3073,7 +3073,7 @@ const qe = {
   }, v = (y, E) => {
     const w = [...r || []];
     w.reduce(
-      (G, $, se) => G + ($ === E && se !== y ? 1 : 0),
+      (G, $, ee) => G + ($ === E && ee !== y ? 1 : 0),
       0
     ) > 0 ? w.splice(y, 1) : w[y] = E, a(w);
   }, k = (y) => {
@@ -3179,7 +3179,7 @@ const qe = {
     r
   ), d = (n) => n && n.closesOnClick && l ? (n.onClick(), l()) : n.onClick();
   return /* @__PURE__ */ e.createElement("div", { className: s, ...c }, /* @__PURE__ */ e.createElement("div", { className: L[`${Ee}__icon`] }, /* @__PURE__ */ e.createElement(x, { ...yo[o], size: "medium" })), /* @__PURE__ */ e.createElement("div", { className: L[`${Ee}__content`] }, a), (t || _) && /* @__PURE__ */ e.createElement("div", { className: L[`${Ee}__actions`] }, t && /* @__PURE__ */ e.createElement(
-    _e,
+    oe,
     {
       className: L[`${Ee}__actions--custom`],
       kind: "plain",
@@ -3197,7 +3197,7 @@ const qe = {
       x,
       {
         className: L[`${Ee}__actions__close`],
-        source: ne,
+        source: se,
         size: "medium"
       }
     )
@@ -3281,7 +3281,7 @@ const qe = {
     onClose: v
   } = t, k = e.useRef(!0), y = s !== void 0, E = e.useRef(null), [w, T] = e.useState(s), G = e.useRef(!1), {
     x: $,
-    y: se,
+    y: ee,
     reference: Fe,
     floating: yt,
     strategy: kt,
@@ -3336,7 +3336,7 @@ const qe = {
       ref: yt,
       style: {
         position: kt,
-        top: se ?? "",
+        top: ee ?? "",
         left: $ ?? ""
       },
       className: Fr,
@@ -3430,7 +3430,7 @@ const St = "tooltip", kl = ({ header: t, text: r, closeWithX: a, theme: _, handl
   /* @__PURE__ */ e.createElement(
     x,
     {
-      source: ne,
+      source: se,
       kind: _ ? Ir(_) : "primary"
     }
   )
@@ -3449,7 +3449,7 @@ const St = "tooltip", kl = ({ header: t, text: r, closeWithX: a, theme: _, handl
     className: S[`${Be}-close-button`],
     onClick: l
   },
-  /* @__PURE__ */ e.createElement(x, { source: ne, kind: o ? Ir(o) : "primary" })
+  /* @__PURE__ */ e.createElement(x, { source: se, kind: o ? Ir(o) : "primary" })
 )), a && /* @__PURE__ */ e.createElement("div", { style: { margin: "0 4px" } }, /* @__PURE__ */ e.createElement(
   "img",
   {
@@ -3458,14 +3458,14 @@ const St = "tooltip", kl = ({ header: t, text: r, closeWithX: a, theme: _, handl
     alt: a.alt
   }
 )), t && /* @__PURE__ */ e.createElement("div", { className: S[`${Be}-header`] }, t), /* @__PURE__ */ e.createElement("div", { className: S[`${Be}-text`] }, r), /* @__PURE__ */ e.createElement("div", { className: S[`${Be}-footer`] }, /* @__PURE__ */ e.createElement(
-  _e,
+  oe,
   {
     kind: c.kind || "primary",
     onClick: c.handleClick
   },
   c.label
 ), /* @__PURE__ */ e.createElement(
-  _e,
+  oe,
   {
     kind: s.kind || "secondary",
     onClick: s.handleClick
@@ -3671,7 +3671,7 @@ const nr = 8, sr = "guide-tooltip", ir = (t, r) => new So(t, r), $l = (t) => {
       }
     ));
   }
-), re = {
+), ae = {
   "file-upload-progress": "lc-FileUploadProgress-module__file-upload-progress___xw8h8",
   "file-upload-progress__icon": "lc-FileUploadProgress-module__file-upload-progress__icon___p8Rfz",
   "file-upload-progress__icon--success": "lc-FileUploadProgress-module__file-upload-progress__icon--success___X40uH",
@@ -3703,7 +3703,7 @@ const nr = 8, sr = "guide-tooltip", ir = (t, r) => new So(t, r), $l = (t) => {
     "aria-label": "Close",
     onClick: r
   },
-  /* @__PURE__ */ e.createElement(x, { source: ne })
+  /* @__PURE__ */ e.createElement(x, { source: se })
 )), fe = "file-upload-progress", It = `${fe}__wrapper__header__title`, To = e.forwardRef(
   ({
     actionsVisibility: t = "hidden",
@@ -3715,28 +3715,28 @@ const nr = 8, sr = "guide-tooltip", ir = (t, r) => new So(t, r), $l = (t) => {
     status: c = "normal",
     onCloseButtonClick: s,
     onRetryButtonClick: d
-  }, n) => /* @__PURE__ */ e.createElement("div", { className: re[fe], ref: n }, a && c !== "success" && /* @__PURE__ */ e.createElement("div", { className: re[`${fe}__icon`] }, a), c === "success" && /* @__PURE__ */ e.createElement(
+  }, n) => /* @__PURE__ */ e.createElement("div", { className: ae[fe], ref: n }, a && c !== "success" && /* @__PURE__ */ e.createElement("div", { className: ae[`${fe}__icon`] }, a), c === "success" && /* @__PURE__ */ e.createElement(
     "div",
     {
       className: m(
-        re[`${fe}__icon`],
-        re[`${fe}__icon--success`]
+        ae[`${fe}__icon`],
+        ae[`${fe}__icon--success`]
       )
     },
     /* @__PURE__ */ e.createElement(x, { source: vr })
   ), /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: m(re[`${fe}__wrapper`], {
-        [re[`${fe}__wrapper--with-icon`]]: a
+      className: m(ae[`${fe}__wrapper`], {
+        [ae[`${fe}__wrapper--with-icon`]]: a
       })
     },
-    /* @__PURE__ */ e.createElement("div", { className: re[`${fe}__wrapper__header`] }, _ && /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement("div", { className: ae[`${fe}__wrapper__header`] }, _ && /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: m(re[It], {
-          [re[`${It}--success`]]: c === "success",
-          [re[`${It}--error`]]: c === "error"
+        className: m(ae[It], {
+          [ae[`${It}--success`]]: c === "success",
+          [ae[`${It}--error`]]: c === "error"
         })
       },
       _
@@ -3744,7 +3744,7 @@ const nr = 8, sr = "guide-tooltip", ir = (t, r) => new So(t, r), $l = (t) => {
       "div",
       {
         className: m({
-          [re[`${fe}__wrapper__header__actions`]]: t === "hover"
+          [ae[`${fe}__wrapper__header__actions`]]: t === "hover"
         })
       },
       /* @__PURE__ */ e.createElement(
@@ -3871,7 +3871,7 @@ export {
   Xo as Alert,
   Zo as Avatar,
   Ma as Badge,
-  _e as Button,
+  oe as Button,
   jo as Card,
   el as Checkbox,
   m_ as DatePicker,