@livechat/design-system-react-components 1.22.0 → 1.22.1

package/dist/index.es.js

@@ -24,7 +24,7 @@ import * as e from "react";
 import { useReducer as Or, useRef as Hr, useEffect as nt, useCallback as Bt, useMemo as Pt } from "react";
 import { Check as qt, Close as Pe, ChevronDown as Tt, Info as Pa, Warning as ur, CheckCircle as mr, Block as pr, Person as zr, ChevronUp as Yt, DoubleArrowLeft as Gr, ChevronLeft as Ur, ChevronRight as gr, DoubleArrowRight as Wr, VisibilityOn as Vr, VisibilityOff as qr, Search as Yr, LockBlackFilled as Kr, Refresh as Jr, Error as Xr } from "@livechat/design-system-icons";
 import u from "clsx";
-import { useFloating as Kt, offset as Jt, flip as Xt, autoUpdate as Qt, useClick as jt, useDismiss as Zt, useRole as ea, useInteractions as ta, useTransitionStyles as br, shift as Aa, arrow as Qr, useHover as jr, safePolygon as Zr, useFocus as e_, useTransitionStatus as t_, FloatingPortal as fr, FloatingOverlay as a_, FloatingFocusManager as Ca, useFloatingNodeId as vr, size as r_, useListNavigation as __, FloatingNode as hr, useFloatingParentNodeId as o_, FloatingTree as l_ } from "@floating-ui/react";
+import { useFloating as Kt, offset as Jt, flip as Xt, autoUpdate as Qt, useClick as jt, useDismiss as Zt, useRole as ea, useInteractions as ta, useTransitionStyles as br, shift as Aa, arrow as Qr, useHover as jr, safePolygon as Zr, useFocus as e_, useTransitionStatus as t_, FloatingPortal as fr, FloatingOverlay as a_, FloatingFocusManager as Na, useFloatingNodeId as vr, size as r_, useListNavigation as __, FloatingNode as hr, useFloatingParentNodeId as o_, FloatingTree as l_ } from "@floating-ui/react";
 import kr from "lodash.debounce";
 import { getContrast as Ia } from "polished";
 import c_ from "react-day-picker";
@@ -376,10 +376,14 @@ const _c = {
   SurfaceAvatar9: "--surface-avatar-9",
   SurfaceAvatar10: "--surface-avatar-10",
   NavbarBackground: "--navbar-background",
+  TooltipBackgroundBasic: "--tooltip-background-basic",
+  TooltipBackgroundInvert: "--tooltip-background-invert",
   TooltipBorder: "--tooltip-border",
   AnimatedGradientValue1: "--animated-gradient-value-1",
   AnimatedGradientValue2: "--animated-gradient-value-2",
-  AnimatedGradientValue3: "--animated-gradient-value-3"
+  AnimatedGradientValue3: "--animated-gradient-value-3",
+  ContentBasicInternalNote: "--content-basic-internal-note",
+  ContentBasicBot: "--content-basic-bot"
 }, oc = {
   Spacing0: "--spacing-0",
   Spacing05: "--spacing-05",
@@ -417,7 +421,11 @@ const _c = {
   DividerTopLeft: "--shadow-divider-top-left",
   DividerTopRight: "--shadow-divider-top-right",
   DividerBottomRight: "--shadow-divider-bottom-right",
-  MessageBox: "--shadow-message-box"
+  MessageBox: "--shadow-message-box",
+  FixedRight: "--shadow-fixed-right",
+  FixedLeft: "--shadow-fixed-left",
+  FixedTop: "--shadow-fixed-top",
+  FixedBottom: "--shadow-fixed-bottom"
 }, cc = {
   Radius0: "--radius-0",
   Radius1: "--radius-1",
@@ -705,9 +713,9 @@ const _c = {
     "selectedOptions",
     "footer"
   ]);
-  const k = i !== void 0, [y, E] = e.useState(l), $ = e.useRef(-1), N = e.useRef(null), w = k ? i : y, S = () => {
+  const k = i !== void 0, [y, E] = e.useState(l), $ = e.useRef(-1), C = e.useRef(null), w = k ? i : y, S = () => {
     w ? (d == null || d(), !k && E(!1)) : (s == null || s(), !k && E(!0));
-  }, { x: C, y: M, strategy: X, refs: D, context: L } = Kt({
+  }, { x: N, y: M, strategy: X, refs: D, context: L } = Kt({
     middleware: [Jt(4), Xt(n)],
     placement: o,
     open: w,
@@ -745,7 +753,7 @@ const _c = {
   }, Je = (F) => {
     var Le, Oe;
     $.current = Me(F);
-    const Y = (Le = N.current) == null ? void 0 : Le.children, U = Y && ((Oe = Y[$.current]) == null ? void 0 : Oe.children[0]);
+    const Y = (Le = C.current) == null ? void 0 : Le.children, U = Y && ((Oe = Y[$.current]) == null ? void 0 : Oe.children[0]);
     return U == null ? void 0 : U.focus();
   }, Xe = (F) => {
     F.key === re.arrowUp && $.current > 0 && (F.preventDefault(), Je(-1)), F.key === re.arrowDown && $.current + 1 < r.length && (F.preventDefault(), Je(1));
@@ -801,7 +809,7 @@ const _c = {
       style: v({
         position: X,
         top: M != null ? M : "",
-        left: C != null ? C : ""
+        left: N != null ? N : ""
       }, Ae)
     }, oe()),
     r.length > 0 && /* @__PURE__ */ e.createElement(
@@ -815,7 +823,7 @@ const _c = {
           t
         ),
         role: "menu",
-        ref: N
+        ref: C
       }),
       r.map(at)
     ),
@@ -846,13 +854,13 @@ const _c = {
   "loader__spinner-circle": "lc-Loader-module__loader__spinner-circle___ApBUO",
   rotate: b_,
   loader__label: f_
-}, Nr = "loader", qa = `${Nr}__spinner`, Fa = ({
+}, Cr = "loader", qa = `${Cr}__spinner`, Fa = ({
   primaryColor: t,
   secondaryColor: a,
   label: r,
   className: _,
   size: o = "medium"
-}) => /* @__PURE__ */ e.createElement("div", { className: u(ut[Nr], _) }, /* @__PURE__ */ e.createElement(
+}) => /* @__PURE__ */ e.createElement("div", { className: u(ut[Cr], _) }, /* @__PURE__ */ e.createElement(
   "div",
   {
     className: u(ut[qa], ut[`${qa}--${o}`])
@@ -940,7 +948,7 @@ const _c = {
       "href",
       "onClick"
     ]);
-    const k = t || a, y = !s && c, E = ["text", "link", "link-light"].includes(o), $ = m ? "a" : "button", N = u(
+    const k = t || a, y = !s && c, E = ["text", "link", "link-light"].includes(o), $ = m ? "a" : "button", C = u(
       d,
       me[pe],
       me[`${pe}--${o}`],
@@ -958,7 +966,7 @@ const _c = {
       $,
       v(v({
         ref: b,
-        className: N,
+        className: C,
         "aria-disabled": k,
         type: r,
         disabled: k
@@ -983,7 +991,7 @@ const _c = {
     );
   }
 );
-function Cr(t) {
+function Nr(t) {
   switch (t) {
     case "invert":
       return "inverted";
@@ -1001,12 +1009,12 @@ function E_(t, a, r, _) {
       left: a ? _ + a : _
     };
 }
-const w_ = "lc-Tooltip-module__tooltip___QOOAr", $_ = "lc-Tooltip-module__tooltip__arrow___Ov1YW", N_ = "lc-Tooltip-module__tooltip__interactive___0JawB", T = {
+const w_ = "lc-Tooltip-module__tooltip___QOOAr", $_ = "lc-Tooltip-module__tooltip__arrow___Ov1YW", C_ = "lc-Tooltip-module__tooltip__interactive___0JawB", T = {
   tooltip: w_,
   tooltip__arrow: $_,
   "tooltip--invert": "lc-Tooltip-module__tooltip--invert___PVjhE",
   "tooltip--important": "lc-Tooltip-module__tooltip--important___X-IMK",
-  tooltip__interactive: N_,
+  tooltip__interactive: C_,
   "tooltip__user-guide-step": "lc-Tooltip-module__tooltip__user-guide-step___evexI",
   "tooltip--full-space": "lc-Tooltip-module__tooltip--full-space___wmbaw",
   "tooltip-header": "lc-Tooltip-module__tooltip-header___QV0Vd",
@@ -1053,10 +1061,10 @@ const w_ = "lc-Tooltip-module__tooltip___QOOAr", $_ = "lc-Tooltip-module__toolti
   triggerOnClick: y = !1,
   offsetMainAxis: E = 8,
   referenceElement: $,
-  activationThreshold: N = 0,
+  activationThreshold: C = 0,
   useDismissHookProps: w,
   useClickHookProps: S,
-  hoverOutDelayTimeout: C = 100,
+  hoverOutDelayTimeout: N = 100,
   arrowOffsetY: M,
   arrowOffsetX: X,
   closeOnTriggerBlur: D = !1,
@@ -1089,10 +1097,10 @@ const w_ = "lc-Tooltip-module__tooltip___QOOAr", $_ = "lc-Tooltip-module__toolti
     whileElementsMounted: Qt
   }), _a = jr(U, {
     move: !1,
-    restMs: N,
+    restMs: C,
     delay: {
       open: at(f),
-      close: at(k || C)
+      close: at(k || N)
     },
     enabled: !y,
     handleClose: D ? null : Zr()
@@ -1151,7 +1159,7 @@ const w_ = "lc-Tooltip-module__tooltip___QOOAr", $_ = "lc-Tooltip-module__toolti
     className: T[`${mt}-close`],
     onClick: l
   },
-  /* @__PURE__ */ e.createElement(P, { source: Pe, kind: o ? Cr(o) : "primary" })
+  /* @__PURE__ */ e.createElement(P, { source: Pe, kind: o ? Nr(o) : "primary" })
 ), a && /* @__PURE__ */ e.createElement(
   Be,
   {
@@ -1192,7 +1200,7 @@ const w_ = "lc-Tooltip-module__tooltip___QOOAr", $_ = "lc-Tooltip-module__toolti
       className: T[`${Re}-close`],
       onClick: l
     },
-    /* @__PURE__ */ e.createElement(P, { source: Pe, kind: o ? Cr(o) : "primary" })
+    /* @__PURE__ */ e.createElement(P, { source: Pe, kind: o ? Nr(o) : "primary" })
   ), r && /* @__PURE__ */ e.createElement("div", { className: T[`${Re}-image-container`] }, /* @__PURE__ */ e.createElement(
     "img",
     {
@@ -1228,7 +1236,7 @@ const w_ = "lc-Tooltip-module__tooltip___QOOAr", $_ = "lc-Tooltip-module__toolti
       n.label
     )
   ));
-}, Z = "guide-tooltip", C_ = ({
+}, Z = "guide-tooltip", N_ = ({
   gap: t,
   isVisible: a,
   slide: r,
@@ -1378,7 +1386,7 @@ const Ya = 8, Ka = "guide-tooltip", Ja = (t, a) => new S_(t, a), bc = (t) => {
       ).getBoundingClientRect()
     ), s(!0);
   }, [l]), l && _ && n ? /* @__PURE__ */ e.createElement(fr, null, /* @__PURE__ */ e.createElement(
-    C_,
+    N_,
     {
       gap: n,
       isVisible: _,
@@ -1503,44 +1511,44 @@ const Ya = 8, Ka = "guide-tooltip", Ja = (t, a) => new S_(t, a), bc = (t) => {
   e.useEffect(() => {
     if (g)
       return;
-    const N = 44, w = 4, S = _.length, C = n.length, X = (S - C) * N + w;
+    const C = 44, w = 4, S = _.length, N = n.length, X = (S - N) * C + w;
     s(X);
   }, [n, _, g]);
-  const k = (N) => {
-    N.map((w) => {
+  const k = (C) => {
+    C.map((w) => {
       const S = n.includes(w.target.id);
       if (!w.isIntersecting) {
-        w.target.setAttribute("tabindex", "-1"), S || i((C) => [
-          ...C,
+        w.target.setAttribute("tabindex", "-1"), S || i((N) => [
+          ...N,
           w.target.id
         ]);
         return;
       }
-      w.target.removeAttribute("tabindex"), S && i(n.filter((C) => C !== w.target.id));
+      w.target.removeAttribute("tabindex"), S && i(n.filter((N) => N !== w.target.id));
     });
   };
   e.useEffect(() => {
-    const N = !!window.IntersectionObserver;
-    if (!g && N) {
+    const C = !!window.IntersectionObserver;
+    if (!g && C) {
       const w = document.querySelectorAll(
         `button[data-actionBarId='${a}']`
       ), S = new IntersectionObserver(
         k,
         h
       );
-      return w.forEach((C) => S.observe(C)), () => S.disconnect();
+      return w.forEach((N) => S.observe(N)), () => S.disconnect();
     }
   }, [n, g]);
-  const y = (N) => _.filter(
-    (S) => N.find((C) => C === S.key && !S.hideInMenu)
+  const y = (C) => _.filter(
+    (S) => C.find((N) => N === S.key && !S.hideInMenu)
   ).map((S) => ({
     key: S.key,
     element: /* @__PURE__ */ e.createElement(m_, { leftNode: S.element }, S.label),
     onClick: S.onClick
-  })), E = _.filter((N) => n.find((w) => w === N.key)).find((N) => N.key === o), $ = (N, w) => w ? {
-    top: N
+  })), E = _.filter((C) => n.find((w) => w === C.key)).find((C) => C.key === o), $ = (C, w) => w ? {
+    top: C
   } : {
-    left: N
+    left: C
   };
   return /* @__PURE__ */ e.createElement("div", { id: a, className: b }, /* @__PURE__ */ e.createElement(
     "div",
@@ -1550,13 +1558,13 @@ const Ya = 8, Ka = "guide-tooltip", Ja = (t, a) => new S_(t, a), bc = (t) => {
         [W[`${bt}__items--with-menu`]]: f
       })
     },
-    _.map((N) => /* @__PURE__ */ e.createElement(
+    _.map((C) => /* @__PURE__ */ e.createElement(
       x_,
       {
         id: a,
-        option: N,
+        option: C,
         menuItemsKeys: n,
-        isActive: N.key === o,
+        isActive: C.key === o,
         vertical: l
       }
     ))
@@ -1813,7 +1821,7 @@ const H_ = "lc-Avatar-module__avatar___1zTCE", z_ = "lc-Avatar-module__avatar__s
     "type",
     "withRim"
   ]);
-  const g = i === "image" && !l, [b, h] = e.useState(g), f = i === "image" && !!l && !b, k = i === "text", y = ["xxxsmall", "xxsmall", "xsmall"].includes(o) ? 1 : 2, E = L_(n, y), $ = ["xxxsmall", "xxsmall", "xsmall", "small"].includes(o), N = r || M_(n), w = N ? O_(N) : void 0, S = k ? { backgroundColor: N } : {}, C = u(v({
+  const g = i === "image" && !l, [b, h] = e.useState(g), f = i === "image" && !!l && !b, k = i === "text", y = ["xxxsmall", "xxsmall", "xsmall"].includes(o) ? 1 : 2, E = L_(n, y), $ = ["xxxsmall", "xxsmall", "xsmall", "small"].includes(o), C = r || M_(n), w = C ? O_(C) : void 0, S = k ? { backgroundColor: C } : {}, N = u(v({
     [ge[j]]: !0,
     [ge[`${j}--${_}`]]: !0,
     [ge[`${j}--${o}`]]: !0,
@@ -1832,7 +1840,7 @@ const H_ = "lc-Avatar-module__avatar___1zTCE", z_ = "lc-Avatar-module__avatar__s
   ), L = (_e) => $ ? "2xs" : ["medium"].includes(_e) ? "xs" : ["large", "xlarge"].includes(_e) ? "sm" : ["xxlarge"].includes(_e) ? "lg" : "xl", O = e.useCallback(() => h(!0), []);
   return e.useEffect(() => {
     h(g);
-  }, [g]), /* @__PURE__ */ e.createElement("div", v({ className: C, style: S }, s), d && /* @__PURE__ */ e.createElement(
+  }, [g]), /* @__PURE__ */ e.createElement("div", v({ className: N, style: S }, s), d && /* @__PURE__ */ e.createElement(
     "div",
     {
       "data-testid": `${j}__rim`,
@@ -1948,8 +1956,8 @@ const X_ = "lc-SegmentedControl-module__btn___tfsvL", Rt = {
         kind: "secondary",
         icon: k,
         className: u(Rt.btn, Rt[`btn--${t}`], E),
-        onClick: (N) => {
-          m(g, N);
+        onClick: (C) => {
+          m(g, C);
         }
       },
       b
@@ -2007,7 +2015,7 @@ const X_ = "lc-SegmentedControl-module__btn___tfsvL", Rt = {
     },
     l
   ), k && /* @__PURE__ */ e.createElement("div", { className: be[Mt] }, /* @__PURE__ */ e.createElement("div", { className: be[`${Mt}__line`] }), /* @__PURE__ */ e.createElement("div", { className: be[`${Mt}__buttons`] }, h && a.map(
-    ({ kind: N, onClick: w, children: S }) => /* @__PURE__ */ e.createElement(V, { size: "compact", kind: N, onClick: w }, S)
+    ({ kind: C, onClick: w, children: S }) => /* @__PURE__ */ e.createElement(V, { size: "compact", kind: C, onClick: w }, S)
   ), f && /* @__PURE__ */ e.createElement(
     V,
     {
@@ -2201,14 +2209,14 @@ const X_ = "lc-SegmentedControl-module__btn___tfsvL", Rt = {
   }) : _ < 0 ? x(v({}, r), {
     [B[`${R}__day--start`]]: a
   }) : r;
-}, Nt = (t, a) => {
+}, Ct = (t, a) => {
   const r = a.find((_) => _.id === t);
   return r || void 0;
 }, ja = (t, a) => !!(!t || t && a), Eo = (t) => {
   const a = {};
   if (!t.initialSelectedItemKey)
     return a;
-  const r = Nt(
+  const r = Ct(
     t.initialSelectedItemKey,
     t.options
   );
@@ -2251,7 +2259,7 @@ const X_ = "lc-SegmentedControl-module__btn___tfsvL", Rt = {
 }, a), Za = "date-picker", $o = (t) => {
   const a = t.getDate();
   return /* @__PURE__ */ e.createElement("div", { className: B[`${Za}__day-wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: B[`${Za}__day-content`] }, a));
-}, No = (t) => {
+}, Co = (t) => {
   const k = t, {
     classNames: a,
     range: r,
@@ -2320,10 +2328,10 @@ const X_ = "lc-SegmentedControl-module__btn___tfsvL", Rt = {
       renderDay: d || $o
     }, m)
   );
-}, Co = e.forwardRef(
-  (t, a) => /* @__PURE__ */ e.createElement(No, v({ innerRef: a }, t))
+}, No = e.forwardRef(
+  (t, a) => /* @__PURE__ */ e.createElement(Co, v({ innerRef: a }, t))
 );
-Co.displayName = "DatePicker";
+No.displayName = "DatePicker";
 var q = /* @__PURE__ */ ((t) => (t.NEW_SELECTED_ITEM = "NEW_SELECTED_ITEM", t.NEW_TEMPORARY_TO_VALUE = "NEW_TEMPORARY_TO_VALUE", t.CLEAR = "CLEAR", t.SET_FROM = "SET_FROM", t.SET_TO = "SET_TO", t.SELECT_FIRST_DAY = "SELECT_FIRST_DAY", t.SELECT_SECOND_DAY_AS_FROM = "SELECT_SECOND_DAY_AS_FROM", t.SELECT_SECOND_DAY_AS_TO = "SELECT_SECOND_DAY_AS_TO", t.CURRENT_MONTH_CHANGE = "CURRENT_MONTH_CHANGE", t))(q || {});
 const So = (t) => {
   const a = Dr(
@@ -2429,7 +2437,7 @@ const So = (t) => {
     const { from: h, selectedItem: f, to: k } = i;
     if (!(h && k))
       return;
-    const y = Nt(f, t);
+    const y = Ct(f, t);
     y && (l == null || l(x(v({}, y), {
       value: {
         from: h,
@@ -2444,7 +2452,7 @@ const So = (t) => {
       l(null);
       return;
     }
-    if (!Nt(h, t))
+    if (!Ct(h, t))
       return;
     const k = t.reduce(
       (y, E) => x(v({}, y), { [E.id]: E }),
@@ -2485,7 +2493,7 @@ const So = (t) => {
         });
         return;
       }
-      Nt(h, t) && d({
+      Ct(h, t) && d({
         type: q.NEW_SELECTED_ITEM,
         payload: { selectedItem: h }
       });
@@ -2501,7 +2509,7 @@ const So = (t) => {
     const { currentMonth: h, from: f, selectedItem: k, temporaryTo: y, to: E } = i, $ = Pt(
       () => yo(f, y),
       [f, y]
-    ), N = Pt(() => Nt(k, t), [t, k]), w = Pt(() => [f, { from: f, to: y }], [f, y]), S = Pt(() => o ? { after: o } : void 0, [o]);
+    ), C = Pt(() => Ct(k, t), [t, k]), w = Pt(() => [f, { from: f, to: y }], [f, y]), S = Pt(() => o ? { after: o } : void 0, [o]);
     return {
       select: {
         onItemSelect: p,
@@ -2524,7 +2532,7 @@ const So = (t) => {
         onDayMouseEnter: s,
         onMonthChange: g
       },
-      selectedOption: N
+      selectedOption: C
     };
   })());
 };
@@ -2705,7 +2713,7 @@ const Ec = (t) => {
   "field-group": "lc-FieldGroup-module__field-group___gy8lp",
   "field-group--inline": "lc-FieldGroup-module__field-group--inline___or4qf",
   "field-group--stretched": "lc-FieldGroup-module__field-group--stretched___6rkuO"
-}, ka = "field-group", Nc = (n) => {
+}, ka = "field-group", Cc = (n) => {
   var i = n, {
     className: t = "",
     children: a,
@@ -2732,7 +2740,7 @@ const Ec = (t) => {
   form__footer: Bo,
   form__label: Po,
   form__helper: Ao
-}, vt = "form", Cc = (c) => {
+}, vt = "form", Nc = (c) => {
   var n = c, {
     className: t,
     children: a,
@@ -2945,9 +2953,9 @@ const Ec = (t) => {
         [Te[`${De}--crop`]]: l,
         [Te[`${De}--read-only`]]: c.readOnly
       }
-    ), E = r ? "var(--content-disabled)" : "var(--content-default)", $ = g ? Vr : qr, N = _ && _.place === "left", w = _ && h !== "password" && _.place === "right", S = () => {
-      var C;
-      (C = s.current) == null || C.focus();
+    ), E = r ? "var(--content-disabled)" : "var(--content-default)", $ = g ? Vr : qr, C = _ && _.place === "left", w = _ && h !== "password" && _.place === "right", S = () => {
+      var N;
+      (N = s.current) == null || N.focus();
     };
     return /* @__PURE__ */ e.createElement(
       A,
@@ -2958,16 +2966,16 @@ const Ec = (t) => {
         "tab-index": "0",
         onClick: S
       },
-      N && ar(_, r),
+      C && ar(_, r),
       /* @__PURE__ */ e.createElement(
         "input",
         x(v({}, c), {
           ref: s,
-          onFocus: (C) => {
-            p(!0), f == null || f(C);
+          onFocus: (N) => {
+            p(!0), f == null || f(N);
           },
-          onBlur: (C) => {
-            p(!1), k == null || k(C);
+          onBlur: (N) => {
+            p(!1), k == null || k(N);
           },
           disabled: r,
           type: h && !g ? h : "text"
@@ -2981,7 +2989,7 @@ const Ec = (t) => {
           kind: "text",
           size: "compact",
           icon: /* @__PURE__ */ e.createElement(P, { customColor: E, source: $ }),
-          onClick: () => b((C) => !C),
+          onClick: () => b((N) => !N),
           className: Te[`${De}__visibility-button`]
         }
       )
@@ -3258,12 +3266,12 @@ const Ec = (t) => {
     );
     if (S === "" || S === "-")
       return b(S);
-    const C = parseInt(S, 10);
-    return b(h(C));
+    const N = parseInt(S, 10);
+    return b(h(N));
   }, $ = () => {
     var w;
     return (w = p.current) == null || w.focus(), f(1);
-  }, N = () => {
+  }, C = () => {
     var w;
     return (w = p.current) == null || w.focus(), f(-1);
   };
@@ -3305,7 +3313,7 @@ const Ec = (t) => {
       disabled: l || y(r, o),
       "aria-label": "Decrement value",
       className: rt[`${_t}__decrement`],
-      onClick: N,
+      onClick: C,
       type: "button"
     },
     /* @__PURE__ */ e.createElement(
@@ -3467,24 +3475,24 @@ const xt = "select-all", Uo = (t, a) => {
   listClassName: f,
   virtuosoProps: k
 }) => {
-  const y = e.useRef(null), [E, $] = e.useState(_), N = o.length;
+  const y = e.useRef(null), [E, $] = e.useState(_), C = o.length;
   e.useLayoutEffect(() => {
-    var C;
-    l && !c && n !== null && ((C = y.current) == null || C.focus({ preventScroll: !0 }));
+    var N;
+    l && !c && n !== null && ((N = y.current) == null || N.focus({ preventScroll: !0 }));
   }, [l, n, c, y]);
   const w = e.useCallback(
-    (C) => {
-      C !== E && (C < _ ? $(C + (N - 1) * zo) : $(_));
+    (N) => {
+      N !== E && (N < _ ? $(N + (C - 1) * zo) : $(_));
     },
-    [N]
+    [C]
   );
   if (nt(() => {
     d.current = new Array(o.length);
   }, [o.length]), o.length === 0) {
-    const C = u(ot[cr], {
+    const N = u(ot[cr], {
       [ot[`${cr}__no-results`]]: o.length === 0
     });
-    return /* @__PURE__ */ e.createElement(Ca, { context: t, modal: !1, initialFocus: -1 }, /* @__PURE__ */ e.createElement(
+    return /* @__PURE__ */ e.createElement(Na, { context: t, modal: !1, initialFocus: -1 }, /* @__PURE__ */ e.createElement(
       "div",
       {
         className: u(ot.listbox, ot["no-results"]),
@@ -3492,11 +3500,11 @@ const xt = "select-all", Uo = (t, a) => {
         tabIndex: -1,
         style: r
       },
-      /* @__PURE__ */ e.createElement("div", { className: C }, b)
+      /* @__PURE__ */ e.createElement("div", { className: N }, b)
     ));
   }
-  const S = (C) => i.includes(C) || C === xt && i.length === Da(o).length;
-  return /* @__PURE__ */ e.createElement(Ca, { context: t, modal: !1, initialFocus: -1 }, /* @__PURE__ */ e.createElement(
+  const S = (N) => i.includes(N) || N === xt && i.length === Da(o).length;
+  return /* @__PURE__ */ e.createElement(Na, { context: t, modal: !1, initialFocus: -1 }, /* @__PURE__ */ e.createElement(
     "div",
     {
       ref: a,
@@ -3514,11 +3522,11 @@ const xt = "select-all", Uo = (t, a) => {
         className: ot["listbox-wrapper"],
         ref: y
       }, p({
-        onKeyDown(C) {
-          s(!1), C.key === "Enter" && n !== null && m(o[n].key), C.key === " " && C.preventDefault();
+        onKeyDown(N) {
+          s(!1), N.key === "Enter" && n !== null && m(o[n].key), N.key === " " && N.preventDefault();
         },
-        onKeyUp(C) {
-          C.key === " " && n !== null && m(o[n].key);
+        onKeyUp(N) {
+          N.key === " " && n !== null && m(o[n].key);
         },
         onPointerMove() {
           s(!0);
@@ -3533,17 +3541,17 @@ const xt = "select-all", Uo = (t, a) => {
           data: o,
           increaseViewportBy: 200
         }, k), {
-          itemContent: (C, M) => /* @__PURE__ */ e.createElement(
+          itemContent: (N, M) => /* @__PURE__ */ e.createElement(
             Wo,
             {
-              index: C,
+              index: N,
               getItemProps: g,
               listElementsRef: d,
-              isActive: n === C,
+              isActive: n === N,
               isSelected: S(M.key),
               onSelect: m,
               item: M,
-              numberOfItems: N
+              numberOfItems: C
             }
           )
         })
@@ -3720,7 +3728,7 @@ const xt = "select-all", Uo = (t, a) => {
       [fe[`${ve}--icon-only`]]: p,
       [fe[`${ve}--dismissible-on-hover`]]: k
     }
-  ), E = l === "small" ? "small" : "medium", $ = l === "small" ? "sm" : "md", N = () => m ? i ? {
+  ), E = l === "small" ? "small" : "medium", $ = l === "small" ? "sm" : "md", C = () => m ? i ? {
     style: {
       backgroundColor: "transparent",
       color: m,
@@ -3734,7 +3742,7 @@ const xt = "select-all", Uo = (t, a) => {
     A,
     x(v(v({
       className: y
-    }, b), N()), {
+    }, b), C()), {
       as: "div",
       size: $
     }),
@@ -3829,8 +3837,8 @@ const xt = "select-all", Uo = (t, a) => {
       className: ce[`${ne}__item__avatar`]
     }
   ), /* @__PURE__ */ e.createElement("div", { className: ce[`${ne}__item__content`] }, E.name)), f = (E) => s(E.target.value), k = (E) => {
-    var $, N;
-    ($ = p.current) != null && $.id && E.key === "Enter" && d((N = p.current) == null ? void 0 : N.id), l === "multi" && (E.key === "Backspace" || E.key === "Delete") && !m && o && (o == null ? void 0 : o.length) > 0 && i(o[o.length - 1].key);
+    var $, C;
+    ($ = p.current) != null && $.id && E.key === "Enter" && d((C = p.current) == null ? void 0 : C.id), l === "multi" && (E.key === "Backspace" || E.key === "Delete") && !m && o && (o == null ? void 0 : o.length) > 0 && i(o[o.length - 1].key);
   }, y = () => /* @__PURE__ */ e.createElement(
     "input",
     {
@@ -3890,7 +3898,7 @@ const xt = "select-all", Uo = (t, a) => {
   isOpen: n,
   onVisibilityChange: i
 }) => {
-  const d = vr(), [s, m] = e.useState(!1), [p, g] = e.useState(null), [b, h] = e.useState(_), f = e.useRef([]), k = e.useRef(null), { refs: y, floatingStyles: E, context: $, isPositioned: N } = Kt({
+  const d = vr(), [s, m] = e.useState(!1), [p, g] = e.useState(null), [b, h] = e.useState(_), f = e.useRef([]), k = e.useRef(null), { refs: y, floatingStyles: E, context: $, isPositioned: C } = Kt({
     nodeId: d,
     open: n,
     strategy: o,
@@ -3916,7 +3924,7 @@ const xt = "select-all", Uo = (t, a) => {
     enabled: !t,
     keyboardHandlers: !1,
     toggle: !1
-  }, c)), S = ea($, { role: "listbox" }), C = Zt($, l), M = __($, {
+  }, c)), S = ea($, { role: "listbox" }), N = Zt($, l), M = __($, {
     enabled: a.length > 0 && !t,
     listRef: f,
     activeIndex: p,
@@ -3928,7 +3936,7 @@ const xt = "select-all", Uo = (t, a) => {
       (O) => !!O.disabled || !!O.groupHeader
     )
   }), { getReferenceProps: X, getFloatingProps: D, getItemProps: L } = ta(
-    [w, C, S, M]
+    [w, N, S, M]
   );
   return !n && s && m(!1), {
     getReferenceProps: X,
@@ -3936,7 +3944,7 @@ const xt = "select-all", Uo = (t, a) => {
     getItemProps: L,
     setReference: y.setReference,
     floatingStyles: E,
-    isPositioned: N,
+    isPositioned: C,
     context: $,
     nodeId: d,
     setFloating: y.setFloating,
@@ -3984,11 +3992,11 @@ const xt = "select-all", Uo = (t, a) => {
         });
       else if (i) {
         const E = (t == null ? void 0 : t.map(ya)) || [], $ = lr(E, k);
-        o(a.filter(({ key: N }) => $.includes(N)));
+        o(a.filter(({ key: C }) => $.includes(C)));
       } else
         n((E) => {
           const $ = lr(E, k);
-          return o(a.filter(({ key: N }) => $.includes(N))), $;
+          return o(a.filter(({ key: C }) => $.includes(C))), $;
         });
   };
   return {
@@ -4027,10 +4035,10 @@ const xt = "select-all", Uo = (t, a) => {
     onClose: y,
     openedOnInit: E = !1,
     clearSearchAfterSelection: $,
-    onSelect: N,
+    onSelect: C,
     placement: w,
     floatingStrategy: S,
-    useDismissHookProps: C,
+    useDismissHookProps: N,
     useClickHookProps: M,
     virtuosoProps: X
   } = O, D = I(O, [
@@ -4077,7 +4085,7 @@ const xt = "select-all", Uo = (t, a) => {
     options: c,
     type: g,
     selectAllOptionText: p,
-    onSelect: N,
+    onSelect: C,
     setOpen: Ae
   }), {
     context: U,
@@ -4103,7 +4111,7 @@ const xt = "select-all", Uo = (t, a) => {
     maxListHeight: _,
     floatingStrategy: S,
     useClickHookProps: M,
-    useDismissHookProps: C,
+    useDismissHookProps: N,
     isOpen: oe,
     onVisibilityChange: Ae
   });
@@ -4183,9 +4191,9 @@ const xt = "select-all", Uo = (t, a) => {
   useClickHookProps: g,
   floatingStrategy: b
 }) => {
-  const [h, f] = e.useState(s), k = o_(), y = vr(), E = d !== void 0, $ = E ? d : h, N = typeof _ == "string", w = typeof t == "function", S = (Ae, Me) => {
+  const [h, f] = e.useState(s), k = o_(), y = vr(), E = d !== void 0, $ = E ? d : h, C = typeof _ == "string", w = typeof t == "function", S = (Ae, Me) => {
     Ae ? r == null || r(Me) : a == null || a(Me), !E && f(Ae);
-  }, { refs: C, context: M, floatingStyles: X } = Kt({
+  }, { refs: N, context: M, floatingStyles: X } = Kt({
     nodeId: y,
     open: $,
     onOpenChange: S,
@@ -4203,19 +4211,19 @@ const xt = "select-all", Uo = (t, a) => {
     "div",
     x(v({
       "data-testid": "popover-trigger-button",
-      ref: C.setReference
+      ref: N.setReference
     }, _e()), {
       className: l
     }),
     w ? t() : t
-  ), /* @__PURE__ */ e.createElement(hr, { id: y }, $ && /* @__PURE__ */ e.createElement(Ca, { context: M, modal: !1 }, /* @__PURE__ */ e.createElement(
+  ), /* @__PURE__ */ e.createElement(hr, { id: y }, $ && /* @__PURE__ */ e.createElement(Na, { context: M, modal: !1 }, /* @__PURE__ */ e.createElement(
     "div",
     v({
       className: we,
-      ref: C.setFloating,
+      ref: N.setFloating,
       style: X
     }, Ee()),
-    N ? /* @__PURE__ */ e.createElement(A, { as: "div" }, _) : _
+    C ? /* @__PURE__ */ e.createElement(A, { as: "div" }, _) : _
   ))));
   return k === null ? /* @__PURE__ */ e.createElement(l_, null, oe) : oe;
 }, ll = [
@@ -4362,7 +4370,7 @@ const Et = {
   "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"
-}, ul = 400, ml = 800, pl = 500, Ne = "promo-banner", Mc = ({
+}, ul = 400, ml = 800, pl = 500, Ce = "promo-banner", Mc = ({
   className: t,
   buttonText: a,
   children: r,
@@ -4375,11 +4383,11 @@ const Et = {
   onLinkClick: d
 }) => {
   const s = e.useRef(null), [m, p] = e.useState("medium"), g = u(
-    $e[Ne],
+    $e[Ce],
     {
-      [$e[`${Ne}--light`]]: l,
-      [$e[`${Ne}--small`]]: m === "small",
-      [$e[`${Ne}--large`]]: m === "large"
+      [$e[`${Ce}--light`]]: l,
+      [$e[`${Ce}--small`]]: m === "small",
+      [$e[`${Ce}--large`]]: m === "large"
     },
     t
   );
@@ -4392,21 +4400,21 @@ const Et = {
       f.cancel(), window.removeEventListener("resize", f);
     };
   }, []);
-  const b = /* @__PURE__ */ e.createElement("div", { className: $e[`${Ne}__footer`] }, a && /* @__PURE__ */ e.createElement(
+  const b = /* @__PURE__ */ e.createElement("div", { className: $e[`${Ce}__footer`] }, a && /* @__PURE__ */ e.createElement(
     V,
     {
       kind: "primary",
       size: "compact",
       onClick: n,
-      className: $e[`${Ne}__button-text`]
+      className: $e[`${Ce}__button-text`]
     },
     a
   ), c && /* @__PURE__ */ e.createElement(V, { size: "compact", kind: "text", onClick: d }, c));
-  return /* @__PURE__ */ e.createElement("div", { ref: s, className: g }, /* @__PURE__ */ e.createElement("div", { className: $e[`${Ne}__content`] }, o && /* @__PURE__ */ e.createElement("img", { src: o, className: $e[`${Ne}__img`] }), /* @__PURE__ */ e.createElement("div", { className: $e[`${Ne}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: $e[`${Ne}__header`] }, _), /* @__PURE__ */ e.createElement(A, { as: "div" }, r), m !== "large" && b), m === "large" && b), i && /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("div", { ref: s, className: g }, /* @__PURE__ */ e.createElement("div", { className: $e[`${Ce}__content`] }, o && /* @__PURE__ */ e.createElement("img", { src: o, className: $e[`${Ce}__img`] }), /* @__PURE__ */ e.createElement("div", { className: $e[`${Ce}__wrapper`] }, /* @__PURE__ */ e.createElement("div", { className: $e[`${Ce}__header`] }, _), /* @__PURE__ */ e.createElement(A, { as: "div" }, r), m !== "large" && b), m === "large" && b), i && /* @__PURE__ */ e.createElement(
     "button",
     {
       type: "button",
-      className: $e[`${Ne}__close-icon`],
+      className: $e[`${Ce}__close-icon`],
       onClick: i
     },
     /* @__PURE__ */ e.createElement(P, { source: Pe, size: "large", kind: "primary" })
@@ -4506,7 +4514,7 @@ const Et = {
       })
     )), t && /* @__PURE__ */ e.createElement(A, { as: "div", size: "md", className: Ge[`${Ue}__text`] }, t)), r && /* @__PURE__ */ e.createElement(aa, { className: Ge[`${Ue}__helper`] }, r));
   }
-), 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",
@@ -4533,19 +4541,19 @@ const Et = {
 }) => {
   const [d, s] = e.useState(!0), [m, p] = e.useState(!1), g = e.useRef(null), b = !!l && !a && !r, h = t && !d && "true", f = u(
     c,
-    Ce[xe],
-    Ce[`${xe}--${o}`],
-    m && Ce[`${xe}--focused`],
-    a && Ce[`${xe}--disabled`],
-    t && Ce[`${xe}--collapsable`],
-    !d && Ce[`${xe}--collapsable--open`]
+    Ne[xe],
+    Ne[`${xe}--${o}`],
+    m && Ne[`${xe}--focused`],
+    a && Ne[`${xe}--disabled`],
+    t && Ne[`${xe}--collapsable`],
+    !d && Ne[`${xe}--collapsable--open`]
   );
   e.useEffect(() => {
     t && l && s(!1);
   }, [t]);
   const k = (S) => {
-    const C = S.currentTarget.value;
-    i(C);
+    const N = S.currentTarget.value;
+    i(N);
   }, y = () => {
     i("");
   }, E = () => {
@@ -4553,7 +4561,7 @@ const Et = {
     (S = g.current) == null || S.focus();
   }, $ = () => {
     t && s(!1), p(!0);
-  }, N = () => {
+  }, C = () => {
     t && !l && s(!0), p(!1);
   }, w = (S) => {
     S.key === re.enter && (S.preventDefault(), i(l));
@@ -4569,7 +4577,7 @@ const Et = {
     /* @__PURE__ */ e.createElement(
       P,
       {
-        className: Ce[`${xe}__search-icon`],
+        className: Ne[`${xe}__search-icon`],
         source: Yr,
         disabled: a,
         kind: "primary"
@@ -4580,8 +4588,8 @@ const Et = {
       {
         as: "div",
         className: u(
-          Ce[nr],
-          n && Ce[`${nr}--crop`]
+          Ne[nr],
+          n && Ne[`${nr}--crop`]
         )
       },
       /* @__PURE__ */ e.createElement(
@@ -4593,7 +4601,7 @@ const Et = {
           value: l,
           placeholder: _,
           onChange: k,
-          onBlur: N,
+          onBlur: C,
           onFocus: $,
           onKeyDown: w,
           disabled: a
@@ -4605,7 +4613,7 @@ const Et = {
       {
         "aria-label": "Clear search",
         title: "Clear search",
-        className: Ce[`${xe}__clear-icon`],
+        className: Ne[`${xe}__clear-icon`],
         onClick: y,
         icon: /* @__PURE__ */ e.createElement(P, { source: Pe, kind: "primary" }),
         kind: "text",
@@ -4616,7 +4624,7 @@ const Et = {
       "div",
       {
         "data-testid": `${xe}-loader`,
-        className: Ce[`${xe}__loader`]
+        className: Ne[`${xe}__loader`]
       },
       /* @__PURE__ */ e.createElement(Fa, { size: "small" })
     )
@@ -4737,11 +4745,11 @@ const Et = {
   ]);
   const g = o !== void 0, [b, h] = e.useState(
     () => g ? o : a
-  ), f = g ? o : b, k = n === "loading", y = n === "locked", E = c === "large" ? "small" : "xsmall", $ = f ? "on" : "off", N = r || k || y, w = N ? "disabled" : "enabled", S = u(
+  ), f = g ? o : b, k = n === "loading", y = n === "locked", E = c === "large" ? "small" : "xsmall", $ = f ? "on" : "off", C = r || k || y, w = C ? "disabled" : "enabled", S = u(
     se[ae],
     se[`${ae}--${c}`],
     t
-  ), C = (M) => {
+  ), N = (M) => {
     l == null || l(M, !f), g || (M.stopPropagation(), h((X) => !X));
   };
   return /* @__PURE__ */ e.createElement("span", { className: S }, /* @__PURE__ */ e.createElement(
@@ -4752,11 +4760,11 @@ const Et = {
         se[`${ae}__input`],
         se[`${ae}__input--${w}`]
       ),
-      onChange: C,
+      onChange: N,
       checked: f,
       name: _,
       ref: i,
-      disabled: N,
+      disabled: C,
       "aria-label": d
     }, s)
   ), /* @__PURE__ */ e.createElement("span", { className: se[`${ae}__container`] }, /* @__PURE__ */ e.createElement(
@@ -4849,16 +4857,16 @@ const Et = {
       }
     )
   );
-}, Nl = "lc-TabsWrapper-module__tabs___Y2xyD", Cl = "lc-TabsWrapper-module__tabs__list___i6tVO", Ir = {
-  tabs: Nl,
-  tabs__list: Cl
+}, Cl = "lc-TabsWrapper-module__tabs___Y2xyD", Nl = "lc-TabsWrapper-module__tabs__list___i6tVO", Ir = {
+  tabs: Cl,
+  tabs__list: Nl
 }, Fr = "tabs", qc = ({
   className: t,
   children: a
 }) => /* @__PURE__ */ e.createElement("div", { className: u(Ir[Fr], t) }, a), Yc = ({
   className: t,
   children: a
-}) => /* @__PURE__ */ e.createElement("div", { className: u(Ir[`${Fr}__list`], t) }, a), Ct = {
+}) => /* @__PURE__ */ e.createElement("div", { className: u(Ir[`${Fr}__list`], t) }, a), Nt = {
   "tag-input": "lc-TagInput-module__tag-input___CLVY-",
   "tag-input--error": "lc-TagInput-module__tag-input--error___RP0SB",
   "tag-input__input": "lc-TagInput-module__tag-input__input___dgEYB",
@@ -4927,7 +4935,7 @@ const Et = {
       value: t,
       inputRef: o,
       innerEditableRef: d,
-      className: Ct[`${xl}__content`],
+      className: Nt[`${xl}__content`],
       change: (p) => l(a, p),
       remove: s,
       validator: _
@@ -4966,21 +4974,21 @@ const Et = {
     "addOnBlur"
   ]);
   const b = u(
-    Ct[Gt],
+    Nt[Gt],
     {
-      [Ct[`${Gt}--error`]]: o
+      [Nt[`${Gt}--error`]]: o
     },
     n
   ), h = u(
     i,
-    Ct[`${Gt}__input`],
-    Ct[`${Gt}__input--${c}`]
+    Nt[`${Gt}__input`],
+    Nt[`${Gt}__input--${c}`]
   ), [f, k] = e.useState(""), y = e.useRef(null), E = (D) => {
     D.trim() !== "" && (r([...a || [], D]), k(""));
   }, $ = (D) => {
     const L = [...a || []];
     L.splice(D, 1), r(L);
-  }, N = (D) => k(D.target.value), w = (D) => {
+  }, C = (D) => k(D.target.value), w = (D) => {
     if (Tl.includes(D.key)) {
       if (D.preventDefault(), f === "")
         return;
@@ -4992,7 +5000,7 @@ const Et = {
     }
   }, S = (D) => {
     s && E(f), d == null || d(D);
-  }, C = (D, L) => {
+  }, N = (D, L) => {
     const O = [...a || []];
     O.reduce(
       (Ee, we, oe) => Ee + (we === L && oe !== D ? 1 : 0),
@@ -5007,7 +5015,7 @@ const Et = {
     {
       index: L,
       key: `${L}${D}`,
-      update: C,
+      update: N,
       remove: $,
       inputRef: y,
       validator: _,
@@ -5019,7 +5027,7 @@ const Et = {
     {
       index: L,
       key: `${L}${D.children}`,
-      update: C,
+      update: N,
       remove: $,
       inputRef: y,
       validator: _,
@@ -5036,7 +5044,7 @@ const Et = {
       className: h,
       placeholder: l,
       value: f,
-      onChange: N,
+      onChange: C,
       onKeyDown: w,
       onPaste: M,
       onBlur: S
@@ -5235,7 +5243,7 @@ const Et = {
   "file-upload-progress__wrapper__header__title": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title___2IVuv",
   "file-upload-progress__wrapper__header__title--success": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--success___E6DQl",
   "file-upload-progress__wrapper__header__title--error": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--error___5BPpI"
-}, We = "file-upload-progress", Na = `${We}__wrapper__header__title`, Ul = e.forwardRef(
+}, We = "file-upload-progress", Ca = `${We}__wrapper__header__title`, Ul = e.forwardRef(
   ({
     actionsVisibility: t = "hidden",
     className: a,
@@ -5265,9 +5273,9 @@ const Et = {
     /* @__PURE__ */ e.createElement("div", { className: Se[`${We}__wrapper__header`] }, _ && /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: u(Se[Na], {
-          [Se[`${Na}--success`]]: c === "success",
-          [Se[`${Na}--error`]]: c === "error"
+        className: u(Se[Ca], {
+          [Se[`${Ca}--success`]]: c === "success",
+          [Se[`${Ca}--error`]]: c === "error"
         })
       },
       /* @__PURE__ */ e.createElement(A, { size: "sm", as: "div" }, _),
@@ -5409,7 +5417,7 @@ export {
   V as Button,
   yc as Card,
   ho as Checkbox,
-  Co as DatePicker,
+  No as DatePicker,
   Ec as DatePickerRangeCalendarsWrapper,
   _c as DesignToken,
   wc as DetailsCard,
@@ -5418,10 +5426,10 @@ export {
   Kc as EmailTagInput,
   aa as FieldDescription,
   Ra as FieldError,
-  Nc as FieldGroup,
+  Cc as FieldGroup,
   Ul as FileUploadProgress,
   Ba as FileUploadProgressActions,
-  Cc as Form,
+  Nc as Form,
   Sc as FormField,
   xc as FormGroup,
   Be as Heading,