@livechat/design-system-react-components 1.34.0 → 1.34.1

package/dist/index.es.js

@@ -22,7 +22,7 @@ var D = (t, a) => {
 var er = (t, a, r) => (Qa(t, typeof a != "symbol" ? a + "" : a, r), r);
 import * as e from "react";
 import { useReducer as B_, useRef as I_, useEffect as Ft, useCallback as ka, useMemo as Ea, useState as T_ } from "react";
-import { Check as ia, Close as Ie, ChevronDown as Ot, Info as ca, Warning as r_, CheckCircle as vr, Block as __, ChevronRight as La, Person as D_, ChevronUp as Oa, DoubleArrowLeft as P_, ChevronLeft as A_, DoubleArrowRight as F_, VisibilityOn as R_, VisibilityOff as M_, TextLogoFull as L_, LiveChatMono as O_, ChatBotMono as G_, HelpDeskMono as U_, KnowledgeBaseMono as H_, OpenWidgetMono as z_, HelloMono as W_, TextAccounts as V_, Search as K_, LockBlack as Y_, Refresh as q_, Error as Z_ } from "@livechat/design-system-icons";
+import { Check as ia, Close as Ie, ChevronDown as Ot, Info as ca, Warning as r_, CheckCircle as vr, Block as __, ChevronRight as La, Person as D_, ChevronUp as Oa, DoubleArrowLeft as A_, ChevronLeft as P_, DoubleArrowRight as F_, VisibilityOn as R_, VisibilityOff as M_, TextLogoFull as L_, LiveChatMono as O_, ChatBotMono as G_, HelpDeskMono as U_, KnowledgeBaseMono as H_, OpenWidgetMono as z_, HelloMono as W_, TextAccounts as V_, Search as K_, LockBlack as Y_, Refresh as q_, Error as Z_ } from "@livechat/design-system-icons";
 import u from "clsx";
 import { useFloatingParentNodeId as Ga, useFloatingNodeId as sa, useFloating as da, offset as ua, flip as Ua, size as o_, autoUpdate as ma, useClick as pa, useDismiss as ga, useRole as fa, useInteractions as ba, useTransitionStyles as kr, FloatingNode as ha, FloatingTree as Ha, shift as Er, arrow as X_, useHover as J_, safePolygon as j_, useFocus as Q_, useTransitionStatus as eo, FloatingArrow as to, FloatingPortal as l_, FloatingOverlay as ao, FloatingFocusManager as mr, useListNavigation as ro } from "@floating-ui/react";
 import * as n_ from "react-dom";
@@ -32,7 +32,7 @@ import { getContrast as yr } from "polished";
 import oo from "react-day-picker";
 import { subMonths as Rt, differenceInCalendarMonths as Tr, addMonths as Dr, isSameMonth as pr, isSameDay as gr, isAfter as fr, differenceInCalendarDays as wr, isPast as lo } from "date-fns";
 import { Virtuoso as no } from "react-virtuoso";
-import Pr from "lodash.escape";
+import Ar from "lodash.escape";
 import { TransitionGroup as i_, CSSTransition as s_ } from "react-transition-group";
 const Lc = {
   /** @deprecated */
@@ -505,7 +505,7 @@ const Lc = {
   comma: ",",
   arrowUp: "ArrowUp",
   arrowDown: "ArrowDown"
-}, so = "lc-Icon-module__icon___tw31R", Ar = {
+}, so = "lc-Icon-module__icon___tw31R", Pr = {
   icon: so,
   "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
   "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
@@ -586,8 +586,8 @@ const Lc = {
     "customColor"
   ]), d = e.createElement(a, k(k({}, uo[r]), n ? { color: n } : {})), i = u(
     l,
-    Ar[Fr],
-    _ && Ar[`${Fr}--${o ? "disabled--" : ""}${_}`]
+    Pr[Fr],
+    _ && Pr[`${Fr}--${o ? "disabled--" : ""}${_}`]
   );
   return /* @__PURE__ */ e.createElement("span", T(k({}, c), { className: i }), d);
 }, Ge = {
@@ -786,8 +786,8 @@ const Lc = {
       ua(4),
       Ua(c),
       o_({
-        apply({ availableHeight: P }) {
-          _o(() => C(P));
+        apply({ availableHeight: A }) {
+          _o(() => C(A));
         }
       })
     ],
@@ -803,70 +803,70 @@ const Lc = {
     Ke,
     Ue
   ]), { styles: ft } = kr(U, {
-    initial: ({ side: P }) => k({
+    initial: ({ side: A }) => k({
       opacity: 0
-    }, P === "bottom" && {
+    }, A === "bottom" && {
       marginTop: -10
-    } || P === "top" && {
+    } || A === "top" && {
       marginTop: 10
-    } || P === "left" && {
+    } || A === "left" && {
       marginLeft: 10
-    } || P === "right" && {
+    } || A === "right" && {
       marginLeft: -10
     })
-  }), Nt = (P) => {
+  }), Nt = (A) => {
     var Ye, qe;
     const V = g.current;
-    let ue = V + P;
+    let ue = V + A;
     for (; (Ye = r[ue]) != null && Ye.disabled || (qe = r[ue]) != null && qe.groupHeader; )
-      if (ue += P, ue === -1) {
+      if (ue += A, ue === -1) {
         ue = V;
         break;
       }
     return ue;
-  }, bt = (P) => {
+  }, bt = (A) => {
     var Ye, qe;
-    g.current = Nt(P);
+    g.current = Nt(A);
     const V = (Ye = M.current) == null ? void 0 : Ye.children, ue = V && ((qe = V[g.current]) == null ? void 0 : qe.children[0]);
     return ue == null ? void 0 : ue.focus();
-  }, lt = (P) => {
-    P.key === de.arrowUp && g.current > 0 && (P.preventDefault(), bt(-1)), P.key === de.arrowDown && g.current + 1 < r.length && (P.preventDefault(), bt(1));
+  }, lt = (A) => {
+    A.key === de.arrowUp && g.current > 0 && (A.preventDefault(), bt(-1)), A.key === de.arrowDown && g.current + 1 < r.length && (A.preventDefault(), bt(1));
   };
   e.useEffect(() => {
     if (G)
       return document.addEventListener("keydown", lt), () => document.removeEventListener("keydown", lt);
     g.current = -1;
   }, [G, lt]);
-  const ht = (P, V) => {
-    g.current = P, V == null || V(), !y && !n && ($(!1), i == null || i());
-  }, St = (P, V) => P.groupHeader ? /* @__PURE__ */ e.createElement(
+  const ht = (A, V) => {
+    g.current = A, V == null || V(), !y && !n && ($(!1), i == null || i());
+  }, St = (A, V) => A.groupHeader ? /* @__PURE__ */ e.createElement(
     "li",
     {
-      key: P.key,
+      key: A.key,
       role: "none",
       className: He[`${ze}__list__group-header`]
     },
-    P.element
-  ) : /* @__PURE__ */ e.createElement("li", { key: P.key, role: "none" }, /* @__PURE__ */ e.createElement(
+    A.element
+  ) : /* @__PURE__ */ e.createElement("li", { key: A.key, role: "none" }, /* @__PURE__ */ e.createElement(
     "button",
     {
-      "data-testid": P.key,
+      "data-testid": A.key,
       tabIndex: -1,
-      key: P.key,
-      disabled: P.disabled,
-      onClick: () => ht(V, P.onClick),
+      key: A.key,
+      disabled: A.disabled,
+      onClick: () => ht(V, A.onClick),
       role: "menuitem",
       className: u(He[`${ze}__list__item`], {
-        [He[`${ze}__list__item--disabled`]]: P.disabled,
-        [He[`${ze}__list__item--with-divider`]]: P.withDivider,
-        [He[`${ze}__list__item--selected`]]: m == null ? void 0 : m.includes(P.key)
+        [He[`${ze}__list__item--disabled`]]: A.disabled,
+        [He[`${ze}__list__item--with-divider`]]: A.withDivider,
+        [He[`${ze}__list__item--selected`]]: m == null ? void 0 : m.includes(A.key)
       })
     },
-    P.element,
-    (m == null ? void 0 : m.includes(P.key)) && /* @__PURE__ */ e.createElement(
+    A.element,
+    (m == null ? void 0 : m.includes(A.key)) && /* @__PURE__ */ e.createElement(
       "div",
       {
-        "data-testid": `${P.key}-selected-icon`,
+        "data-testid": `${A.key}-selected-icon`,
         className: He[`${ze}__list__item__icon`]
       },
       /* @__PURE__ */ e.createElement(x, { source: ia, kind: "action-primary" })
@@ -1136,7 +1136,7 @@ const $o = (t) => {
         fill: "var(--tooltip-background-basic)"
       };
   }
-}, No = "lc-Tooltip-module__tooltip___QOOAr", So = "lc-Tooltip-module__tooltip__content___RuamE", xo = "lc-Tooltip-module__tooltip__arrow___Ov1YW", Bo = "lc-Tooltip-module__tooltip__interactive___0JawB", A = {
+}, No = "lc-Tooltip-module__tooltip___QOOAr", So = "lc-Tooltip-module__tooltip__content___RuamE", xo = "lc-Tooltip-module__tooltip__arrow___Ov1YW", Bo = "lc-Tooltip-module__tooltip__interactive___0JawB", P = {
   tooltip: No,
   tooltip__content: So,
   "tooltip--invert": "lc-Tooltip-module__tooltip--invert___PVjhE",
@@ -1200,15 +1200,15 @@ const $o = (t) => {
   floatingStrategy: j
 }) => {
   const L = c !== void 0, [U, $e] = e.useState(!1), Ke = e.useRef(null), Ue = L ? c : U, Ne = l || o, $t = Ga(), ft = sa(), Nt = u(
-    A[ya],
+    P[ya],
     a,
-    Ne && A[`${ya}--${Ne}`],
-    d && A[`${ya}--full-space`]
+    Ne && P[`${ya}--${Ne}`],
+    d && P[`${ya}--full-space`]
   ), bt = typeof _ == "function", lt = (me) => {
     me !== Ue && (me ? s == null || s() : i == null || i(), !L && $e(me));
   }, ht = (me) => p ? me != null ? me : m : 0, St = (me) => me != null ? me : v, {
     floatingStyles: xt,
-    refs: P,
+    refs: A,
     context: V,
     middlewareData: { arrow: { x: ue, y: Ye } = {} }
   } = da({
@@ -1248,13 +1248,13 @@ const $o = (t) => {
     Ya
   ]);
   e.useEffect(() => {
-    g && P.setReference(g);
-  }, [P.setReference, g]);
+    g && A.setReference(g);
+  }, [A.setReference, g]);
   const Gt = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
     "div",
     T(k({
       "data-testid": "tooltip-trigger",
-      ref: P.setReference
+      ref: A.setReference
     }, Ja()), {
       className: r
     }),
@@ -1262,13 +1262,13 @@ const $o = (t) => {
   ), /* @__PURE__ */ e.createElement(ha, { id: ft }, qa && /* @__PURE__ */ e.createElement(
     "div",
     T(k({
-      ref: P.setFloating,
+      ref: A.setFloating,
       style: k(k({}, xt), Za),
       className: Nt
     }, ja()), {
       "data-status": Xa
     }),
-    /* @__PURE__ */ e.createElement(B, { as: "div", className: A[`${ya}__content`] }, t),
+    /* @__PURE__ */ e.createElement(B, { as: "div", className: P[`${ya}__content`] }, t),
     /* @__PURE__ */ e.createElement(
       to,
       k({
@@ -1299,7 +1299,7 @@ const $o = (t) => {
   {
     type: "button",
     "aria-label": "Close tooltip",
-    className: A[`${Wt}-close`],
+    className: P[`${Wt}-close`],
     onClick: l
   },
   /* @__PURE__ */ e.createElement(x, { source: Ie, kind: o ? m_(o) : "primary" })
@@ -1308,8 +1308,8 @@ const $o = (t) => {
   {
     as: "div",
     size: "xs",
-    className: u(A[`${Wt}-header`], {
-      [A[`${Wt}-header--info`]]: _
+    className: u(P[`${Wt}-header`], {
+      [P[`${Wt}-header--info`]]: _
     })
   },
   a
@@ -1318,8 +1318,8 @@ const $o = (t) => {
   {
     as: "div",
     className: u({
-      [A[`${Wt}-text`]]: _,
-      [A[`${Wt}-text--info`]]: _
+      [P[`${Wt}-text`]]: _,
+      [P[`${Wt}-text--info`]]: _
     })
   },
   r
@@ -1334,28 +1334,28 @@ const $o = (t) => {
   secondaryButton: c
 }) => {
   const d = (s) => s === "invert" ? "secondary" : s === "important" ? "plain-lock-black" : "high-contrast", i = (s) => s === "invert" ? "link-inverted" : s === "important" ? "text-lock-black" : "text";
-  return /* @__PURE__ */ e.createElement("div", { className: A[`${Ze}__interactive`] }, _ && /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { className: P[`${Ze}__interactive`] }, _ && /* @__PURE__ */ e.createElement(
     "button",
     {
       type: "button",
       "aria-label": "Close tooltip",
-      className: A[`${Ze}-close`],
+      className: P[`${Ze}-close`],
       onClick: l
     },
     /* @__PURE__ */ e.createElement(x, { source: Ie, kind: o ? m_(o) : "primary" })
-  ), r && /* @__PURE__ */ e.createElement("div", { className: A[`${Ze}-image-container`] }, /* @__PURE__ */ e.createElement(
+  ), r && /* @__PURE__ */ e.createElement("div", { className: P[`${Ze}-image-container`] }, /* @__PURE__ */ e.createElement(
     "img",
     {
-      className: A[`${Ze}-image`],
+      className: P[`${Ze}-image`],
       src: r.src,
       alt: r.alt
     }
-  )), t && /* @__PURE__ */ e.createElement(ne, { as: "div", size: "xs", className: A[`${Ze}-header`] }, t), /* @__PURE__ */ e.createElement("div", { className: A[`${Ze}-text`] }, a), /* @__PURE__ */ e.createElement(
+  )), t && /* @__PURE__ */ e.createElement(ne, { as: "div", size: "xs", className: P[`${Ze}-header`] }, t), /* @__PURE__ */ e.createElement("div", { className: P[`${Ze}-text`] }, a), /* @__PURE__ */ e.createElement(
     "div",
     {
       className: u(
-        A[`${Ze}-footer`],
-        A[`${Ze}-footer--interactive`]
+        P[`${Ze}-footer`],
+        P[`${Ze}-footer--interactive`]
       )
     },
     /* @__PURE__ */ e.createElement(
@@ -1370,7 +1370,7 @@ const $o = (t) => {
       W,
       T(k({}, c), {
         className: u(
-          A[`${Ze}-footer-secondary`],
+          P[`${Ze}-footer-secondary`],
           c.className
         ),
         kind: c.kind || i(o),
@@ -1418,9 +1418,9 @@ const $o = (t) => {
     "div",
     {
       className: u({
-        [A[`${ce}__overlay`]]: !0,
-        [A[`${ce}__overlay--visible`]]: a,
-        [A[`${ce}__overlay--slide`]]: r
+        [P[`${ce}__overlay`]]: !0,
+        [P[`${ce}__overlay--visible`]]: a,
+        [P[`${ce}__overlay--slide`]]: r
       }),
       style: o
     }
@@ -1428,9 +1428,9 @@ const $o = (t) => {
     "div",
     {
       className: u({
-        [A[`${ce}__overlay`]]: !0,
-        [A[`${ce}__overlay--visible`]]: a,
-        [A[`${ce}__overlay--slide`]]: r
+        [P[`${ce}__overlay`]]: !0,
+        [P[`${ce}__overlay--visible`]]: a,
+        [P[`${ce}__overlay--slide`]]: r
       }),
       style: n
     }
@@ -1438,9 +1438,9 @@ const $o = (t) => {
     "div",
     {
       className: u({
-        [A[`${ce}__overlay`]]: !0,
-        [A[`${ce}__overlay--visible`]]: a,
-        [A[`${ce}__overlay--slide`]]: r
+        [P[`${ce}__overlay`]]: !0,
+        [P[`${ce}__overlay--visible`]]: a,
+        [P[`${ce}__overlay--slide`]]: r
       }),
       style: l
     }
@@ -1448,9 +1448,9 @@ const $o = (t) => {
     "div",
     {
       className: u({
-        [A[`${ce}__overlay`]]: !0,
-        [A[`${ce}__overlay--visible`]]: a,
-        [A[`${ce}__overlay--slide`]]: r
+        [P[`${ce}__overlay`]]: !0,
+        [P[`${ce}__overlay--visible`]]: a,
+        [P[`${ce}__overlay--slide`]]: r
       }),
       style: c
     }
@@ -1458,9 +1458,9 @@ const $o = (t) => {
     "div",
     {
       className: u({
-        [A[`${ce}__overlay`]]: !0,
-        [A[`${ce}__overlay--visible`]]: a,
-        [A[`${ce}__overlay--slide`]]: r
+        [P[`${ce}__overlay`]]: !0,
+        [P[`${ce}__overlay--visible`]]: a,
+        [P[`${ce}__overlay--slide`]]: r
       }),
       style: d
     }
@@ -1545,8 +1545,8 @@ const Mr = 8, Lr = "guide-tooltip", Or = (t, a) => new To(t, a), Xc = (t) => {
         contextElement: l
       },
       className: u({
-        [A[Lr]]: !0,
-        [A[`${Lr}--slide`]]: i,
+        [P[Lr]]: !0,
+        [P[`${Lr}--slide`]]: i,
         className: a
       })
     }),
@@ -1556,15 +1556,15 @@ const Mr = 8, Lr = "guide-tooltip", Or = (t, a) => new To(t, a), Xc = (t) => {
   title: t,
   description: a,
   children: r
-}) => /* @__PURE__ */ e.createElement("div", { className: A[Vt] }, /* @__PURE__ */ e.createElement("div", { className: A[`${Vt}__heading`] }, /* @__PURE__ */ e.createElement(B, { as: "div", className: A[`${Vt}__heading__title`] }, t), /* @__PURE__ */ e.createElement(
+}) => /* @__PURE__ */ e.createElement("div", { className: P[Vt] }, /* @__PURE__ */ e.createElement("div", { className: P[`${Vt}__heading`] }, /* @__PURE__ */ e.createElement(B, { as: "div", className: P[`${Vt}__heading__title`] }, t), /* @__PURE__ */ e.createElement(
   B,
   {
     as: "div",
     size: "xs",
-    className: A[`${Vt}__heading__description`]
+    className: P[`${Vt}__heading__description`]
   },
   a
-)), /* @__PURE__ */ e.createElement("div", { className: A[`${Vt}__content`] }, /* @__PURE__ */ e.createElement(B, { as: "div" }, r))), q = {
+)), /* @__PURE__ */ e.createElement("div", { className: P[`${Vt}__content`] }, /* @__PURE__ */ e.createElement(B, { as: "div" }, r))), q = {
   "action-bar": "lc-ActionBar-module__action-bar___TJitF",
   "action-bar__items": "lc-ActionBar-module__action-bar__items___uhoQA",
   "action-bar__items--scroll": "lc-ActionBar-module__action-bar__items--scroll___f--dN",
@@ -1637,7 +1637,7 @@ const Mr = 8, Lr = "guide-tooltip", Or = (t, a) => new To(t, a), Xc = (t) => {
       /* @__PURE__ */ e.createElement("div", null, t.label)
     )
   ) : /* @__PURE__ */ e.createElement("div", { "data-testid": t.key, className: _ }, o);
-}, wa = "action-bar", Xe = "action-bar__menu-wrapper", Po = 44, jc = ({
+}, wa = "action-bar", Xe = "action-bar__menu-wrapper", Ao = 44, jc = ({
   className: t,
   id: a = "action-bar-area",
   type: r = "menu",
@@ -1660,7 +1660,7 @@ const Mr = 8, Lr = "guide-tooltip", Or = (t, a) => new To(t, a), Xc = (t) => {
     if (!f && E) {
       const $ = new ResizeObserver((w) => {
         const { width: C, height: g } = w[0].contentRect, N = l ? g : C, S = i.length > 0 ? 60 : 0, M = Math.floor(
-          (N - S) / Po
+          (N - S) / Ao
         );
         M >= 0 && M !== c && d(M);
       });
@@ -1807,8 +1807,8 @@ const Mr = 8, Lr = "guide-tooltip", Or = (t, a) => new To(t, a), Xc = (t) => {
       r
     )
   ));
-}, Ao = "lc-Alert-module__alert___HBTns", Fo = "lc-Alert-module__alert__icon___8TaAH", Ro = "lc-Alert-module__alert__content___9nZdf", Mo = "lc-Alert-module__alert__content__wrapper___aLBkP", Lo = "lc-Alert-module__alert__content__wrapper__text___HDMbR", Oo = "lc-Alert-module__alert__content__wrapper__cta___9L-oE", Go = "lc-Alert-module__alert__content__wrapper__cta__link___D9Igz", Se = {
-  alert: Ao,
+}, Po = "lc-Alert-module__alert___HBTns", Fo = "lc-Alert-module__alert__icon___8TaAH", Ro = "lc-Alert-module__alert__content___9nZdf", Mo = "lc-Alert-module__alert__content__wrapper___aLBkP", Lo = "lc-Alert-module__alert__content__wrapper__text___HDMbR", Oo = "lc-Alert-module__alert__content__wrapper__cta___9L-oE", Go = "lc-Alert-module__alert__content__wrapper__cta__link___D9Igz", Se = {
+  alert: Po,
   alert__icon: Fo,
   alert__content: Ro,
   alert__content__wrapper: Mo,
@@ -2781,7 +2781,7 @@ const ll = "lc-Avatar-module__avatar___1zTCE", nl = "lc-Avatar-module__avatar__s
   checkbox__square: Tl,
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper: Dl
-}, Et = "checkbox", Pl = e.forwardRef(
+}, Et = "checkbox", Al = e.forwardRef(
   (c, n) => {
     var d = c, { checked: t, disabled: a, children: r, description: _, className: o } = d, l = D(d, ["checked", "disabled", "children", "description", "className"]);
     return /* @__PURE__ */ e.createElement(
@@ -2840,7 +2840,7 @@ const ll = "lc-Avatar-module__avatar___1zTCE", nl = "lc-Avatar-module__avatar__s
   "date-picker--range__select-input": "lc-DatePicker-module__date-picker--range__select-input___6pyj3",
   "date-picker--range__calendars-wrapper": "lc-DatePicker-module__date-picker--range__calendars-wrapper___8nWaW",
   "date-picker__navbar-buttons-wrapper": "lc-DatePicker-module__date-picker__navbar-buttons-wrapper___Hnksb"
-}, zr = "date-picker", Al = (t) => {
+}, zr = "date-picker", Pl = (t) => {
   const {
     onPreviousClick: a,
     onMonthChange: r,
@@ -2888,7 +2888,7 @@ const ll = "lc-Avatar-module__avatar___1zTCE", nl = "lc-Avatar-module__avatar__s
       }),
       onClick: b
     },
-    /* @__PURE__ */ e.createElement(x, { source: P_, kind: "subtle" })
+    /* @__PURE__ */ e.createElement(x, { source: A_, kind: "subtle" })
   ), /* @__PURE__ */ e.createElement(
     "button",
     {
@@ -2899,7 +2899,7 @@ const ll = "lc-Avatar-module__avatar___1zTCE", nl = "lc-Avatar-module__avatar__s
       }),
       onClick: m
     },
-    /* @__PURE__ */ e.createElement(x, { source: A_, kind: "subtle" })
+    /* @__PURE__ */ e.createElement(x, { source: P_, kind: "subtle" })
   )), /* @__PURE__ */ e.createElement("div", { className: F[`${zr}__navbar-buttons-wrapper`] }, /* @__PURE__ */ e.createElement(
     "button",
     {
@@ -3040,7 +3040,7 @@ const ll = "lc-Avatar-module__avatar___1zTCE", nl = "lc-Avatar-module__avatar__s
     oo,
     k({
       navbarElement: d || /* @__PURE__ */ e.createElement(
-        Al,
+        Pl,
         {
           month: m,
           classNames: h,
@@ -3999,14 +3999,14 @@ const ii = (t) => {
     },
     t
   ), o && /* @__PURE__ */ e.createElement("div", { className: Jt[`${jt}__actions`] }, o));
-}, Pt = {
+}, At = {
   "numeric-input": "lc-NumericInput-module__numeric-input___j1esc",
   "numeric-input__increment": "lc-NumericInput-module__numeric-input__increment___i3Tys",
   "numeric-input__decrement": "lc-NumericInput-module__numeric-input__decrement___3qgn0",
   "numeric-input--disabled": "lc-NumericInput-module__numeric-input--disabled___yaRvQ",
   "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
-}, At = "numeric-input", yi = (s) => {
+}, Pt = "numeric-input", yi = (s) => {
   var p = s, {
     className: t,
     error: a,
@@ -4029,11 +4029,11 @@ const ii = (t) => {
     "onChange"
   ]);
   const m = e.useRef(null), f = u(
-    Pt[At],
+    At[Pt],
     {
-      [Pt[`${At}--error`]]: a,
-      [Pt[`${At}--no-controls`]]: n,
-      [Pt[`${At}--disabled`]]: l
+      [At[`${Pt}--error`]]: a,
+      [At[`${Pt}--no-controls`]]: n,
+      [At[`${Pt}--disabled`]]: l
     },
     t
   ), b = (g) => d(String(g)), v = (g) => _ !== void 0 && g > _ ? _ : o !== void 0 && g < o ? o : g, h = (g) => {
@@ -4078,7 +4078,7 @@ const ii = (t) => {
       disabled: l || E(r, _),
       onClick: w,
       "aria-label": "Increment value",
-      className: Pt[`${At}__increment`],
+      className: At[`${Pt}__increment`],
       type: "button"
     },
     /* @__PURE__ */ e.createElement(
@@ -4095,7 +4095,7 @@ const ii = (t) => {
       tabIndex: -1,
       disabled: l || E(r, o),
       "aria-label": "Decrement value",
-      className: Pt[`${At}__decrement`],
+      className: At[`${Pt}__decrement`],
       onClick: C,
       type: "button"
     },
@@ -4398,7 +4398,7 @@ const Mt = "select-all", nn = (t, a) => {
   "picker-list__item__label": "lc-PickerListItem-module__picker-list__item__label___e0uwB",
   "picker-list__item__main-label": "lc-PickerListItem-module__picker-list__item__main-label___YfUhr",
   "picker-list__item__secondary-label": "lc-PickerListItem-module__picker-list__item__secondary-label___6xcMD"
-}, Pe = "picker-list__item", cn = ({
+}, Ae = "picker-list__item", cn = ({
   index: t,
   isActive: a,
   isSelected: r,
@@ -4408,37 +4408,37 @@ const Mt = "select-all", nn = (t, a) => {
   item: n,
   numberOfItems: c
 }) => {
-  const d = (s) => s != null && s.customElement ? /* @__PURE__ */ e.createElement("div", { className: fe[`${Pe}__custom`] }, s.customElement.listItemBody) : /* @__PURE__ */ e.createElement(e.Fragment, null, s.showCheckbox && /* @__PURE__ */ e.createElement(
-    Pl,
+  const d = (s) => s != null && s.customElement ? /* @__PURE__ */ e.createElement("div", { className: fe[`${Ae}__custom`] }, s.customElement.listItemBody) : /* @__PURE__ */ e.createElement(e.Fragment, null, s.showCheckbox && /* @__PURE__ */ e.createElement(
+    Al,
     {
-      className: fe[`${Pe}__checkbox`],
+      className: fe[`${Ae}__checkbox`],
       checked: r
     }
   ), s.icon && /* @__PURE__ */ e.createElement(
     x,
     {
-      className: fe[`${Pe}__icon`],
+      className: fe[`${Ae}__icon`],
       kind: "link",
       source: s.icon
     }
   ), s.avatarSrc && /* @__PURE__ */ e.createElement(
     "img",
     {
-      className: u(fe[`${Pe}__avatar`]),
+      className: u(fe[`${Ae}__avatar`]),
       src: s.avatarSrc,
       alt: s.name
     }
-  ), /* @__PURE__ */ e.createElement("div", { className: fe[`${Pe}__label-container`] }, /* @__PURE__ */ e.createElement(
+  ), /* @__PURE__ */ e.createElement("div", { className: fe[`${Ae}__label-container`] }, /* @__PURE__ */ e.createElement(
     B,
     {
       as: "span",
-      className: u([fe[`${Pe}__label`]], {
-        [fe[`${Pe}__main-label`]]: s.secondaryText
+      className: u([fe[`${Ae}__label`]], {
+        [fe[`${Ae}__main-label`]]: s.secondaryText
       }),
       "aria-disabled": s.disabled
     },
     s.name
-  ), s.secondaryText && /* @__PURE__ */ e.createElement("span", { className: fe[`${Pe}__secondary-label`] }, s.secondaryText)));
+  ), s.secondaryText && /* @__PURE__ */ e.createElement("span", { className: fe[`${Ae}__secondary-label`] }, s.secondaryText)));
   if (n.groupHeader)
     return /* @__PURE__ */ e.createElement(
       "div",
@@ -4446,7 +4446,7 @@ const Mt = "select-all", nn = (t, a) => {
         id: `item-${t}`,
         key: n.key,
         role: "group",
-        className: fe[`${Pe}__header`]
+        className: fe[`${Ae}__header`]
       }, l()),
       /* @__PURE__ */ e.createElement(ne, { size: "2xs", uppercase: !0, bold: !0, as: "div" }, n.name)
     );
@@ -4479,8 +4479,8 @@ const Mt = "select-all", nn = (t, a) => {
         "aria-selected": r,
         "aria-disabled": n.disabled,
         "aria-current": a && !n.disabled,
-        className: u(fe[Pe], {
-          [fe[`${Pe}--select-all`]]: n.key === Mt
+        className: u(fe[Ae], {
+          [fe[`${Ae}--select-all`]]: n.key === Mt
         })
       },
       d(n),
@@ -5148,7 +5148,7 @@ const Mt = "select-all", nn = (t, a) => {
     handleSelect: ht,
     handleOnFilter: St,
     handleItemRemove: xt,
-    handleClear: P
+    handleClear: A
   } = En({
     selected: d,
     options: c,
@@ -5194,7 +5194,7 @@ const Mt = "select-all", nn = (t, a) => {
       testId: O["data-testid"],
       isItemSelected: Nt.length > 0,
       isOpen: Ne,
-      onClear: P,
+      onClear: A,
       hideClearButton: h,
       isDisabled: l,
       isError: n,
@@ -5218,7 +5218,7 @@ const Mt = "select-all", nn = (t, a) => {
         onItemRemove: xt,
         onSelect: ht,
         onFilter: St,
-        onClear: P,
+        onClear: A,
         searchPhrase: lt,
         virtualItemRef: Za,
         isTriggerFocused: $e
@@ -5324,59 +5324,66 @@ const Be = {
   notificationCount: o,
   withBorder: l = !1,
   isMainProduct: n = !1
-}) => /* @__PURE__ */ e.createElement("div", { className: u({ [Be["outer-border"]]: l }) }, /* @__PURE__ */ e.createElement(
+}) => /* @__PURE__ */ e.createElement(
   "div",
   {
-    className: u(Be["product-tile-wrapper"], {
-      [Be["product-tile-wrapper__animated"]]: n
-    })
+    className: u({ [Be["outer-border"]]: l }),
+    tabIndex: n ? 0 : -1
   },
-  n && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: Be[`${je}__third-layer`],
-      style: { background: _.third }
-    }
-  ), /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: Be[`${je}__second-layer`],
-      style: { background: _.second }
-    }
-  )),
   /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: u(Be[je], {
-        [Be[`${je}__main-product`]]: n
-      }),
-      style: {
-        background: r ? "var(--surface-moderate-default)" : _.main
-      }
+      className: u(Be["product-tile-wrapper"], {
+        [Be["product-tile-wrapper__animated"]]: n
+      })
     },
-    o && !r ? /* @__PURE__ */ e.createElement(
-      Ra,
+    n && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+      "div",
       {
-        size: "compact",
-        count: o,
-        className: u(Be[`${je}__badge`], {
-          [Be[`${je}__badge--bordered`]]: n
-        })
+        className: Be[`${je}__third-layer`],
+        style: { background: _.third }
       }
-    ) : null,
+    ), /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: Be[`${je}__second-layer`],
+        style: { background: _.second }
+      }
+    )),
     /* @__PURE__ */ e.createElement(
-      x,
+      "div",
       {
-        source: t,
-        className: u(Be[`${je}__icon`], {
-          [Be[`${je}__icon--large`]]: n,
-          [Be[`${je}__icon--expired`]]: r
+        className: u(Be[je], {
+          [Be[`${je}__main-product`]]: n
         }),
-        customColor: a
-      }
+        style: {
+          background: r ? "var(--surface-moderate-default)" : _.main
+        }
+      },
+      o && !r ? /* @__PURE__ */ e.createElement(
+        Ra,
+        {
+          size: "compact",
+          count: o,
+          className: u(Be[`${je}__badge`], {
+            [Be[`${je}__badge--bordered`]]: n
+          })
+        }
+      ) : null,
+      /* @__PURE__ */ e.createElement(
+        x,
+        {
+          source: t,
+          className: u(Be[`${je}__icon`], {
+            [Be[`${je}__icon--large`]]: n,
+            [Be[`${je}__icon--expired`]]: r
+          }),
+          customColor: a
+        }
+      )
     )
   )
-)), Qe = {
+), Qe = {
   "product-row": "lc-ProductRow-module__product-row___NgyzG",
   "product-row--expired": "lc-ProductRow-module__product-row--expired___I9IPB",
   "product-row__divider": "lc-ProductRow-module__product-row__divider___Blym6",
@@ -5777,10 +5784,10 @@ const Be = {
     a
   )}&response_type=token&organization_id=${r}`;
   return n ? `${c}&utm_source=${n}&utm_medium=referral&utm_campaign=productswitcher` : c;
-}, Pn = (t) => {
+}, An = (t) => {
   const a = new Date(t), r = /* @__PURE__ */ new Date();
   return lo(a) ? 0 : wr(a, r);
-}, An = (t, a) => Tn.includes(t) || a.some(
+}, Pn = (t, a) => Tn.includes(t) || a.some(
   (r) => r.product === xr[t]
 ), Fn = (t, a, r, _, o, l) => {
   var c, d, i, s, p;
@@ -5790,7 +5797,7 @@ const Be = {
   if (!n)
     throw new Error(`Product data for ${t.id} not found`);
   return T(k({}, t), {
-    trialDaysLeft: r[t.id] && ((c = r[t.id]) == null ? void 0 : c.status) === "trial" && ((d = r[t.id]) != null && d.next_charge_at) ? Pn((s = (i = r[t.id]) == null ? void 0 : i.next_charge_at) != null ? s : "") : void 0,
+    trialDaysLeft: r[t.id] && ((c = r[t.id]) == null ? void 0 : c.status) === "trial" && ((d = r[t.id]) != null && d.next_charge_at) ? An((s = (i = r[t.id]) == null ? void 0 : i.next_charge_at) != null ? s : "") : void 0,
     expired: ((p = r[t.id]) == null ? void 0 : p.status) === "expired",
     url: Dn(
       n.clientId,
@@ -5828,7 +5835,7 @@ const Be = {
   const l = t ? y_(t) : E_;
   return {
     products: xn.reduce(
-      (n, c) => (An(c.id, a) && n.push(
+      (n, c) => (Pn(c.id, a) && n.push(
         Fn(
           c,
           l,
@@ -5967,7 +5974,7 @@ const aa = {
       )
     );
   }
-), Ae = {
+), Pe = {
   "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",
@@ -5992,11 +5999,11 @@ const aa = {
   onLinkClick: i
 }) => {
   const s = e.useRef(null), [p, m] = e.useState("medium"), f = u(
-    Ae[Fe],
+    Pe[Fe],
     {
-      [Ae[`${Fe}--light`]]: l,
-      [Ae[`${Fe}--small`]]: p === "small",
-      [Ae[`${Fe}--large`]]: p === "large"
+      [Pe[`${Fe}--light`]]: l,
+      [Pe[`${Fe}--small`]]: p === "small",
+      [Pe[`${Fe}--large`]]: p === "large"
     },
     t
   );
@@ -6009,21 +6016,21 @@ const aa = {
       h.cancel(), window.removeEventListener("resize", h);
     };
   }, []);
-  const b = /* @__PURE__ */ e.createElement("div", { className: Ae[`${Fe}__footer`] }, a && /* @__PURE__ */ e.createElement(
+  const b = /* @__PURE__ */ e.createElement("div", { className: Pe[`${Fe}__footer`] }, a && /* @__PURE__ */ e.createElement(
     W,
     {
       kind: "primary",
       size: "compact",
       onClick: c,
-      className: Ae[`${Fe}__button-text`]
+      className: Pe[`${Fe}__button-text`]
     },
     a
   ), n && /* @__PURE__ */ e.createElement(W, { size: "compact", kind: "text", onClick: i }, n));
-  return /* @__PURE__ */ e.createElement("div", { ref: s, className: f }, /* @__PURE__ */ e.createElement("div", { className: Ae[`${Fe}__content`] }, o && /* @__PURE__ */ e.createElement("img", { src: o, className: Ae[`${Fe}__img`] }), /* @__PURE__ */ e.createElement("div", { className: Ae[`${Fe}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: Ae[`${Fe}__header`] }, _), /* @__PURE__ */ e.createElement(B, { as: "div" }, r), p !== "large" && b), p === "large" && b), d && /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { ref: s, className: f }, /* @__PURE__ */ e.createElement("div", { className: Pe[`${Fe}__content`] }, o && /* @__PURE__ */ e.createElement("img", { src: o, className: Pe[`${Fe}__img`] }), /* @__PURE__ */ e.createElement("div", { className: Pe[`${Fe}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: Pe[`${Fe}__header`] }, _), /* @__PURE__ */ e.createElement(B, { as: "div" }, r), p !== "large" && b), p === "large" && b), d && /* @__PURE__ */ e.createElement(
     "button",
     {
       type: "button",
-      className: Ae[`${Fe}__close-icon`],
+      className: Pe[`${Fe}__close-icon`],
       onClick: d
     },
     /* @__PURE__ */ e.createElement(x, { source: Ie, size: "large", kind: "primary" })
@@ -6271,7 +6278,7 @@ const aa = {
     }, _),
     n
   );
-}, nr = "skeleton-avatar", Pi = ({
+}, nr = "skeleton-avatar", Ai = ({
   square: t = !1,
   size: a = 16,
   animated: r
@@ -6287,7 +6294,7 @@ const aa = {
       height: a
     }
   }
-), t_ = "skeleton-text", Ai = ({
+), t_ = "skeleton-text", Pi = ({
   height: t = 13,
   width: a,
   animated: r
@@ -6571,7 +6578,7 @@ const aa = {
   }, f = (b) => {
     b.preventDefault();
     const v = b.clipboardData.getData("text/plain");
-    document.execCommand("insertHTML", !1, Pr(v));
+    document.execCommand("insertHTML", !1, Ar(v));
   };
   return /* @__PURE__ */ e.createElement(
     "div",
@@ -6582,7 +6589,7 @@ const aa = {
       onPaste: f,
       onBlur: m,
       onKeyDown: p,
-      dangerouslySetInnerHTML: { __html: Pr(l) }
+      dangerouslySetInnerHTML: { __html: Ar(l) }
     }
   );
 }, oc = "tag-input__tag", a_ = ({
@@ -6851,18 +6858,18 @@ const aa = {
       s
     )
   ))));
-}, vc = "lc-Textarea-module__textarea___g6U8F", Pa = {
+}, vc = "lc-Textarea-module__textarea___g6U8F", Aa = {
   textarea: vc,
   "textarea--focused": "lc-Textarea-module__textarea--focused___1vtEx",
   "textarea--disabled": "lc-Textarea-module__textarea--disabled___xXaGv",
   "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
-}, Aa = "textarea", Hi = e.forwardRef(
+}, Pa = "textarea", Hi = e.forwardRef(
   (o, _) => {
     var l = o, { className: t, error: a } = l, r = D(l, ["className", "error"]);
-    const { disabled: n, onBlur: c, onFocus: d } = r, [i, s] = e.useState(!1), p = u(t, Pa[Aa], {
-      [Pa[`${Aa}--disabled`]]: n,
-      [Pa[`${Aa}--focused`]]: i,
-      [Pa[`${Aa}--error`]]: a
+    const { disabled: n, onBlur: c, onFocus: d } = r, [i, s] = e.useState(!1), p = u(t, Aa[Pa], {
+      [Aa[`${Pa}--disabled`]]: n,
+      [Aa[`${Pa}--focused`]]: i,
+      [Aa[`${Pa}--error`]]: a
     }), m = (b) => {
       s(!1), c == null || c(b);
     }, f = (b) => {
@@ -7102,7 +7109,7 @@ export {
   Ra as Badge,
   W as Button,
   ci as Card,
-  Pl as Checkbox,
+  Al as Checkbox,
   Gl as DatePicker,
   ii as DatePickerRangeCalendarsWrapper,
   Lc as DesignToken,
@@ -7161,8 +7168,8 @@ export {
   ri as SideNavigationGroup,
   Ko as SideNavigationItem,
   Yc as Simple,
-  Pi as SkeletonAvatar,
-  Ai as SkeletonText,
+  Ai as SkeletonAvatar,
+  Pi as SkeletonText,
   Di as SkeletonWrapper,
   Oc as SpacingToken,
   Fi as StatusBadge,