@livechat/design-system-react-components 1.0.0-alpha.51 → 1.0.0-alpha.52

package/dist/dsrc.es.js

@@ -36,13 +36,13 @@ var __publicField = (obj, key, value) => {
 import * as React from "react";
 import { useReducer, useRef, useEffect, useCallback, useMemo } from "react";
 import cx from "clsx";
+import { useFloating, offset, flip, autoUpdate, arrow } from "@floating-ui/react-dom";
 import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, Check, DoubleArrowLeft, ChevronLeft, ChevronRight, DoubleArrowRight, VisibilityOn, VisibilityOff, Search, LockBlack, Refresh, Error as Error2 } from "@livechat/design-system-icons/react/material";
 import debounce from "lodash.debounce";
 import { getContrast } from "polished";
 import ReactDayPicker from "react-day-picker";
 import { subMonths, differenceInCalendarMonths, addMonths, isSameMonth, isSameDay, isAfter, differenceInCalendarDays } from "date-fns";
 import * as ReactDOM from "react-dom";
-import { useFloating, offset, flip, autoUpdate, arrow } from "@floating-ui/react-dom";
 import escape from "lodash.escape";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { css } from "@emotion/css";
@@ -294,6 +294,188 @@ const ShadowToken = {
   PopOver: "--shadow-pop-over",
   Modal: "--shadow-modal"
 };
+const popover = "lc-Popover-module__popover___8X1b2";
+var cssStyles = {
+  popover,
+  "popover--visible": "lc-Popover-module__popover--visible___u5NXB"
+};
+const Popover = (props) => {
+  const {
+    triggerRenderer,
+    onClose,
+    children,
+    className,
+    placement,
+    flipOptions,
+    isVisible = false
+  } = props;
+  const [visible, setVisibility] = React.useState(false);
+  const prevVisibleState = React.useRef(false);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    refs,
+    update,
+    placement: updatedPlacement
+  } = useFloating({
+    middleware: [offset(4), flip(flipOptions)],
+    placement
+  });
+  React.useEffect(() => {
+    setVisibility(isVisible);
+  }, [isVisible]);
+  React.useEffect(() => {
+    if (onClose && prevVisibleState.current !== visible && !visible) {
+      onClose();
+    }
+    prevVisibleState.current = visible;
+  }, [visible]);
+  React.useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) {
+      return;
+    }
+    return autoUpdate(refs.reference.current, refs.floating.current, update);
+  }, [refs.reference, refs.floating, update, updatedPlacement, visible]);
+  function handleDocumentClick(event) {
+    if (refs.floating.current && refs.floating.current.contains(event.target)) {
+      return;
+    } else if (refs.reference.current && refs.reference.current.contains(event.target)) {
+      setVisibility((prevVisible) => !prevVisible);
+    } else {
+      setVisibility(false);
+    }
+  }
+  const handleHideOnEscape = (event) => {
+    if (event.key === "Escape") {
+      setVisibility(false);
+    }
+  };
+  React.useEffect(() => {
+    document.addEventListener("keydown", handleHideOnEscape);
+    document.addEventListener("mousedown", handleDocumentClick);
+    return () => {
+      document.removeEventListener("keydown", handleHideOnEscape);
+      document.removeEventListener("mousedown", handleDocumentClick);
+    };
+  }, []);
+  const mergedClassNames = cx(cssStyles["popover"], className, {
+    [cssStyles["popover--visible"]]: visible
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    style: { width: "fit-content" },
+    ref: reference
+  }, triggerRenderer()), /* @__PURE__ */ React.createElement("div", {
+    ref: floating,
+    className: mergedClassNames,
+    style: {
+      position: strategy,
+      top: y != null ? y : "",
+      left: x != null ? x : ""
+    }
+  }, children));
+};
+var styles$F = {
+  "action-menu__trigger-button": "lc-ActionMenu-module__action-menu__trigger-button___tBrz5",
+  "action-menu__list": "lc-ActionMenu-module__action-menu__list___9pNUX",
+  "action-menu__list__item": "lc-ActionMenu-module__action-menu__list__item___n-OgH",
+  "action-menu__list__item--with-divider": "lc-ActionMenu-module__action-menu__list__item--with-divider___2H3Vm",
+  "action-menu__list__item--disabled": "lc-ActionMenu-module__action-menu__list__item--disabled___MgaX8"
+};
+const KeyCodes = {
+  esc: "Escape",
+  enter: "Enter",
+  backspace: "Backspace",
+  delete: "Delete",
+  spacebar: " ",
+  tab: "Tab",
+  semicolon: ";",
+  comma: ",",
+  arrowUp: "ArrowUp",
+  arrowDown: "ArrowDown"
+};
+const baseClass$N = "action-menu";
+const ActionMenu = (_a) => {
+  var _b = _a, {
+    className,
+    options,
+    triggerRenderer,
+    placement = "bottom-end"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "options",
+    "triggerRenderer",
+    "placement"
+  ]);
+  const [isVisible, setIsVisible] = React.useState(false);
+  const indexRef = React.useRef(-1);
+  const getIndex = (val) => {
+    indexRef.current = indexRef.current + val;
+    while (options[indexRef.current].disabled) {
+      indexRef.current = indexRef.current + val;
+    }
+    return indexRef.current;
+  };
+  const onKeyDown = (e) => {
+    var _a2, _b2;
+    if (e.key === KeyCodes.arrowUp && indexRef.current > 0) {
+      e.preventDefault();
+      indexRef.current = getIndex(-1);
+      (_a2 = document.getElementById(`list-item-${indexRef.current}`)) == null ? void 0 : _a2.focus();
+    }
+    if (e.key === KeyCodes.arrowDown && indexRef.current + 1 < options.length) {
+      e.preventDefault();
+      indexRef.current = getIndex(1);
+      (_b2 = document.getElementById(`list-item-${indexRef.current}`)) == null ? void 0 : _b2.focus();
+    }
+  };
+  React.useEffect(() => {
+    if (isVisible) {
+      document.addEventListener("keydown", onKeyDown);
+      return () => document.removeEventListener("keydown", onKeyDown);
+    } else {
+      indexRef.current = -1;
+    }
+  }, [isVisible, onKeyDown]);
+  const handleTriggerClick = () => {
+    setIsVisible(true);
+  };
+  const handleItemClick = (itemOnClick) => {
+    itemOnClick();
+    setIsVisible(false);
+  };
+  return /* @__PURE__ */ React.createElement(Popover, {
+    isVisible,
+    placement,
+    onClose: () => setIsVisible(false),
+    triggerRenderer: () => /* @__PURE__ */ React.createElement("button", {
+      "data-testid": "action-menu-trigger-button",
+      className: styles$F[`${baseClass$N}__trigger-button`],
+      onClick: handleTriggerClick
+    }, triggerRenderer)
+  }, /* @__PURE__ */ React.createElement("ul", __spreadProps(__spreadValues({}, props), {
+    className: cx(styles$F[`${baseClass$N}__list`], className),
+    role: "menu",
+    "aria-hidden": !isVisible
+  }), options.map((o, i) => /* @__PURE__ */ React.createElement("li", {
+    key: o.key,
+    role: "none"
+  }, /* @__PURE__ */ React.createElement("button", {
+    id: `list-item-${i}`,
+    "data-testid": o.key,
+    tabIndex: -1,
+    key: o.key,
+    disabled: o.disabled,
+    onClick: () => handleItemClick(o.onClick),
+    role: "menuitem",
+    className: cx(styles$F[`${baseClass$N}__list__item`], {
+      [styles$F[`${baseClass$N}__list__item--disabled`]]: o.disabled,
+      [styles$F[`${baseClass$N}__list__item--with-divider`]]: o.withDivider
+    })
+  }, o.element)))));
+};
 const caps = "lc-Typography-module__caps___c3eNJ";
 var styles$E = {
   "heading-xl": "lc-Typography-module__heading-xl___nhr-6",
@@ -319,13 +501,13 @@ const SIZE_TO_ELEMENT_MAP = {
   sm: "h4",
   xs: "h5"
 };
-const Heading = (_a) => {
-  var _b = _a, {
+const Heading = (_c) => {
+  var _d = _c, {
     as,
     size = "md",
     children,
     className
-  } = _b, props = __objRest(_b, [
+  } = _d, props = __objRest(_d, [
     "as",
     "size",
     "children",
@@ -333,8 +515,8 @@ const Heading = (_a) => {
   ]);
   return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$E[`heading-${size}`], className) }, props), children);
 };
-const Text = (_c) => {
-  var _d = _c, {
+const Text = (_e) => {
+  var _f = _e, {
     as = "p",
     size = "md",
     caps: caps2 = false,
@@ -343,7 +525,7 @@ const Text = (_c) => {
     strike = false,
     children,
     className
-  } = _d, props = __objRest(_d, [
+  } = _f, props = __objRest(_f, [
     "as",
     "size",
     "caps",
@@ -466,13 +648,13 @@ const IconConfig = {
   }
 };
 const baseClass$L = "alert";
-const Alert = (_e) => {
-  var _f = _e, {
+const Alert = (_g) => {
+  var _h = _g, {
     children,
     className,
     kind = "info",
     onClose
-  } = _f, props = __objRest(_f, [
+  } = _h, props = __objRest(_h, [
     "children",
     "className",
     "kind",
@@ -640,15 +822,15 @@ function formatCount(count, max) {
   return count > max ? `${max}+` : `${count}`;
 }
 const baseClass$J = "badge";
-const Badge = (_g) => {
-  var _h = _g, {
+const Badge = (_i) => {
+  var _j = _i, {
     className,
     count = 0,
     max = 99,
     kind = "primary",
     size = "medium",
     type = "counter"
-  } = _h, spanProps = __objRest(_h, [
+  } = _j, spanProps = __objRest(_j, [
     "className",
     "count",
     "max",
@@ -735,8 +917,8 @@ var styles$y = {
   "btn--icon-only--bg": "lc-Button-module__btn--icon-only--bg___X-4V2"
 };
 const baseClass$H = "btn";
-const Button = React.forwardRef((_i, ref) => {
-  var _j = _i, {
+const Button = React.forwardRef((_k, ref) => {
+  var _l = _k, {
     loading = false,
     disabled = false,
     type = "button",
@@ -750,7 +932,7 @@ const Button = React.forwardRef((_i, ref) => {
     children,
     href,
     onClick
-  } = _j, props = __objRest(_j, [
+  } = _l, props = __objRest(_l, [
     "loading",
     "disabled",
     "type",
@@ -889,8 +1071,8 @@ const headerClass = `${baseClass$F}__header`;
 const headingClass = `${headerClass}__heading`;
 const actionsClass = `${baseClass$F}__actions`;
 const noImageClass = `${headerClass}__no-image`;
-const Card = (_k) => {
-  var _l = _k, {
+const Card = (_m) => {
+  var _n = _m, {
     alt,
     buttonsOptions = [],
     children,
@@ -899,7 +1081,7 @@ const Card = (_k) => {
     expandableContent,
     src,
     title
-  } = _l, divProps = __objRest(_l, [
+  } = _n, divProps = __objRest(_n, [
     "alt",
     "buttonsOptions",
     "children",
@@ -966,11 +1148,11 @@ var styles$v = {
   "field-description": "lc-FieldDescription-module__field-description___IcRDH"
 };
 const baseClass$E = "field-description";
-const FieldDescription = (_m) => {
-  var _n = _m, {
+const FieldDescription = (_o) => {
+  var _p = _o, {
     children,
     className = ""
-  } = _n, props = __objRest(_n, [
+  } = _p, props = __objRest(_p, [
     "children",
     "className"
   ]);
@@ -1001,8 +1183,8 @@ var styles$u = {
   checkbox__helper
 };
 const baseClass$D = "checkbox";
-const Checkbox = React.forwardRef((_o, ref) => {
-  var _p = _o, { checked, disabled, children, description, className } = _p, restInputProps = __objRest(_p, ["checked", "disabled", "children", "description", "className"]);
+const Checkbox = React.forwardRef((_q, ref) => {
+  var _r = _q, { checked, disabled, children, description, className } = _r, restInputProps = __objRest(_r, ["checked", "disabled", "children", "description", "className"]);
   return /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$u[baseClass$D], className, {
       [styles$u[`${baseClass$D}--selected`]]: checked,
@@ -1597,11 +1779,11 @@ var styles$s = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
 const baseClass$z = "field-error";
-const FieldError = (_q) => {
-  var _r = _q, {
+const FieldError = (_s) => {
+  var _t = _s, {
     children,
     className = ""
-  } = _r, props = __objRest(_r, [
+  } = _t, props = __objRest(_t, [
     "children",
     "className"
   ]);
@@ -1619,15 +1801,15 @@ var styles$r = {
   "field-group--stretched": "lc-FieldGroup-module__field-group--stretched___6rkuO"
 };
 const baseClass$y = "field-group";
-const FieldGroup = (_s) => {
-  var _t = _s, {
+const FieldGroup = (_u) => {
+  var _v = _u, {
     className = "",
     children,
     description,
     error,
     inline,
     stretch
-  } = _t, props = __objRest(_t, [
+  } = _v, props = __objRest(_v, [
     "className",
     "children",
     "description",
@@ -1656,14 +1838,14 @@ var styles$q = {
   form__helper
 };
 const baseClass$x = "form";
-const Form = (_u) => {
-  var _v = _u, {
+const Form = (_w) => {
+  var _x = _w, {
     className,
     children,
     labelText,
     helperText,
     formFooter
-  } = _v, restProps = __objRest(_v, [
+  } = _x, restProps = __objRest(_x, [
     "className",
     "children",
     "labelText",
@@ -1748,13 +1930,13 @@ var styles$o = {
   "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
 };
 const baseClass$v = "form-group";
-const FormGroup = (_w) => {
-  var _x = _w, {
+const FormGroup = (_y) => {
+  var _z = _y, {
     className = "",
     children,
     labelText,
     helperText
-  } = _x, props = __objRest(_x, [
+  } = _z, props = __objRest(_z, [
     "className",
     "children",
     "labelText",
@@ -1798,14 +1980,14 @@ const renderIcon = (icon2, disabled) => React.cloneElement(icon2.source, {
     [styles$n[`${baseClass$u}__icon--disabled`]]: disabled
   })
 });
-const Input = React.forwardRef((_y, ref) => {
-  var _z = _y, {
+const Input = React.forwardRef((_A, ref) => {
+  var _B = _A, {
     inputSize = "medium",
     error = false,
     disabled,
     icon: icon2 = null,
     className
-  } = _z, inputProps = __objRest(_z, [
+  } = _B, inputProps = __objRest(_B, [
     "inputSize",
     "error",
     "disabled",
@@ -1859,11 +2041,11 @@ var styles$m = {
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
 const baseClass$t = "link";
-const Link = (_A) => {
-  var _B = _A, {
+const Link = (_C) => {
+  var _D = _C, {
     bold = false,
     className = ""
-  } = _B, rest = __objRest(_B, [
+  } = _D, rest = __objRest(_D, [
     "bold",
     "className"
   ]);
@@ -1871,18 +2053,6 @@ const Link = (_A) => {
     className: cx(styles$m[baseClass$t], bold && styles$m[`${baseClass$t}--bold`], className)
   }, rest));
 };
-const KeyCodes = {
-  esc: "Escape",
-  enter: "Enter",
-  backspace: "Backspace",
-  delete: "Delete",
-  spacebar: " ",
-  tab: "Tab",
-  semicolon: ";",
-  comma: ",",
-  arrowUp: "ArrowUp",
-  arrowDown: "ArrowDown"
-};
 const modal__header = "lc-Modal-module__modal__header___Fp5VE";
 const modal__heading = "lc-Modal-module__modal__heading___G9KVK";
 const modal__body = "lc-Modal-module__modal__body___M-jmN";
@@ -1902,14 +2072,14 @@ var styles$l = {
   modal__footer
 };
 const baseClass$s = "modal-base";
-const ModalBase = (_C) => {
-  var _D = _C, {
+const ModalBase = (_E) => {
+  var _F = _E, {
     children,
     className = "",
     onClose,
     closeOnEscPress = true,
     closeOnOverlayPress = true
-  } = _D, props = __objRest(_D, [
+  } = _F, props = __objRest(_F, [
     "children",
     "className",
     "onClose",
@@ -1959,8 +2129,8 @@ const ModalCloseButton = ({
   customColor
 }));
 const baseClass$r = "modal";
-const Modal = (_E) => {
-  var _F = _E, {
+const Modal = (_G) => {
+  var _H = _G, {
     children,
     className = "",
     heading,
@@ -1968,7 +2138,7 @@ const Modal = (_E) => {
     fullSpaceContent,
     footer,
     onClose
-  } = _F, props = __objRest(_F, [
+  } = _H, props = __objRest(_H, [
     "children",
     "className",
     "heading",
@@ -2043,8 +2213,8 @@ var styles$k = {
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
 const baseClass$q = "numeric-input";
-const NumericInput = (_G) => {
-  var _H = _G, {
+const NumericInput = (_I) => {
+  var _J = _I, {
     className,
     error,
     value,
@@ -2054,7 +2224,7 @@ const NumericInput = (_G) => {
     noControls,
     style,
     onChange
-  } = _H, restProps = __objRest(_H, [
+  } = _J, restProps = __objRest(_J, [
     "className",
     "error",
     "value",
@@ -2447,8 +2617,8 @@ const getCustomTextClass = (customColor) => {
   }
   return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
 };
-const Tag = (_I) => {
-  var _J = _I, {
+const Tag = (_K) => {
+  var _L = _K, {
     className = "",
     children,
     dismissible = false,
@@ -2460,7 +2630,7 @@ const Tag = (_I) => {
     icon: icon2,
     avatar: avatar2,
     customColor
-  } = _J, restProps = __objRest(_J, [
+  } = _L, restProps = __objRest(_L, [
     "className",
     "children",
     "dismissible",
@@ -2587,8 +2757,8 @@ const TriggerBody = ({
   }), shouldDisplaySearch && getSearch());
 };
 const baseClass$l = "picker";
-const Picker = (_K) => {
-  var _L = _K, {
+const Picker = (_M) => {
+  var _N = _M, {
     className,
     disabled,
     error,
@@ -2603,7 +2773,7 @@ const Picker = (_K) => {
     type = "single",
     searchDisabled = false,
     onSelect
-  } = _L, props = __objRest(_L, [
+  } = _N, props = __objRest(_N, [
     "className",
     "disabled",
     "error",
@@ -2748,89 +2918,6 @@ const Picker = (_K) => {
     onSelectAll: handleSelectAll
   })));
 };
-const popover = "lc-Popover-module__popover___8X1b2";
-var cssStyles = {
-  popover,
-  "popover--visible": "lc-Popover-module__popover--visible___u5NXB"
-};
-const Popover = (props) => {
-  const {
-    triggerRenderer,
-    onClose,
-    children,
-    className,
-    placement,
-    flipOptions,
-    isVisible = false
-  } = props;
-  const [visible, setVisibility] = React.useState(false);
-  const prevVisibleState = React.useRef(false);
-  const {
-    x,
-    y,
-    reference,
-    floating,
-    strategy,
-    refs,
-    update,
-    placement: updatedPlacement
-  } = useFloating({
-    middleware: [offset(4), flip(flipOptions)],
-    placement
-  });
-  React.useEffect(() => {
-    setVisibility(isVisible);
-  }, [isVisible]);
-  React.useEffect(() => {
-    if (onClose && prevVisibleState.current !== visible && !visible) {
-      onClose();
-    }
-    prevVisibleState.current = visible;
-  }, [visible]);
-  React.useEffect(() => {
-    if (!refs.reference.current || !refs.floating.current) {
-      return;
-    }
-    return autoUpdate(refs.reference.current, refs.floating.current, update);
-  }, [refs.reference, refs.floating, update, updatedPlacement, visible]);
-  function handleDocumentClick(event) {
-    if (refs.floating.current && refs.floating.current.contains(event.target)) {
-      return;
-    } else if (refs.reference.current && refs.reference.current.contains(event.target)) {
-      setVisibility((prevVisible) => !prevVisible);
-    } else {
-      setVisibility(false);
-    }
-  }
-  const handleHideOnEscape = (event) => {
-    if (event.key === "Escape") {
-      setVisibility(false);
-    }
-  };
-  React.useEffect(() => {
-    document.addEventListener("keydown", handleHideOnEscape);
-    document.addEventListener("mousedown", handleDocumentClick);
-    return () => {
-      document.removeEventListener("keydown", handleHideOnEscape);
-      document.removeEventListener("mousedown", handleDocumentClick);
-    };
-  }, []);
-  const mergedClassNames = cx(cssStyles["popover"], className, {
-    [cssStyles["popover--visible"]]: visible
-  });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    style: { width: "fit-content" },
-    ref: reference
-  }, triggerRenderer()), /* @__PURE__ */ React.createElement("div", {
-    ref: floating,
-    className: mergedClassNames,
-    style: {
-      position: strategy,
-      top: y != null ? y : "",
-      left: x != null ? x : ""
-    }
-  }, children));
-};
 const PROGRESS_STATUSES = [
   "normal",
   "error",
@@ -2876,13 +2963,13 @@ const SIZE_VALUE_FROM_SIZE = {
   large: 56
 };
 const baseClass$k = "progress-circle";
-const ProgressCircle = React.forwardRef((_M, ref) => {
-  var _N = _M, {
+const ProgressCircle = React.forwardRef((_O, ref) => {
+  var _P = _O, {
     status = "normal",
     progressValue,
     className,
     size = "medium"
-  } = _N, restProps = __objRest(_N, [
+  } = _P, restProps = __objRest(_P, [
     "status",
     "progressValue",
     "className",
@@ -2937,13 +3024,13 @@ var styles$d = {
   "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
 };
 const baseClass$j = "progress-bar";
-const ProgressBar = React.forwardRef((_O, ref) => {
-  var _P = _O, {
+const ProgressBar = React.forwardRef((_Q, ref) => {
+  var _R = _Q, {
     status = "normal",
     percent,
     size = "medium",
     className = ""
-  } = _P, restProps = __objRest(_P, [
+  } = _R, restProps = __objRest(_R, [
     "status",
     "percent",
     "size",
@@ -3064,8 +3151,8 @@ var styles$b = {
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
 const baseClass$h = "radio-button";
-const RadioButton = React.forwardRef((_Q, ref) => {
-  var _R = _Q, { children, className = "", description, checked, disabled } = _R, props = __objRest(_R, ["children", "className", "description", "checked", "disabled"]);
+const RadioButton = React.forwardRef((_S, ref) => {
+  var _T = _S, { children, className = "", description, checked, disabled } = _T, props = __objRest(_T, ["children", "className", "description", "checked", "disabled"]);
   const mergedClassNames = cx(styles$b[baseClass$h], className, {
     [styles$b[`${baseClass$h}--selected`]]: checked,
     [styles$b[`${baseClass$h}--disabled`]]: disabled
@@ -3231,8 +3318,8 @@ var styles$9 = {
   switch__icon
 };
 const baseClass$f = "switch";
-const Switch = (_S) => {
-  var _T = _S, {
+const Switch = (_U) => {
+  var _V = _U, {
     className = "",
     defaultOn = false,
     disabled = false,
@@ -3243,7 +3330,7 @@ const Switch = (_S) => {
     state = "regular",
     innerRef,
     ariaLabel
-  } = _T, props = __objRest(_T, [
+  } = _V, props = __objRest(_V, [
     "className",
     "defaultOn",
     "disabled",
@@ -3318,15 +3405,15 @@ var styles$8 = {
   "tab--disabled": "lc-Tab-module__tab--disabled___URdTh"
 };
 const baseClass$e = "tab";
-const Tab = (_U) => {
-  var _V = _U, {
+const Tab = (_W) => {
+  var _X = _W, {
     children,
     className,
     count,
     isSelected,
     asBadge,
     size = "medium"
-  } = _V, restProps = __objRest(_V, [
+  } = _X, restProps = __objRest(_X, [
     "children",
     "className",
     "count",
@@ -3625,15 +3712,15 @@ const iconConfig = {
   }
 };
 const baseClass$a = "toast";
-const Toast = (_W) => {
-  var _X = _W, {
+const Toast = (_Y) => {
+  var _Z = _Y, {
     action,
     className,
     children,
     removable,
     kind = "info",
     onClose
-  } = _X, divProps = __objRest(_X, [
+  } = _Z, divProps = __objRest(_Z, [
     "action",
     "className",
     "children",
@@ -4178,8 +4265,8 @@ var styles$3 = {
   "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
 };
 const baseClass$3 = "textarea";
-const Textarea = React.forwardRef((_Y, ref) => {
-  var _Z = _Y, { className, error } = _Z, textareaProps = __objRest(_Z, ["className", "error"]);
+const Textarea = React.forwardRef((__, ref) => {
+  var _$ = __, { className, error } = _$, textareaProps = __objRest(_$, ["className", "error"]);
   const { disabled } = textareaProps;
   const [isFocused, setIsFocused] = React.useState(false);
   const mergedClassNames = cx(className, styles$3[baseClass$3], {
@@ -4410,4 +4497,4 @@ const UploadBar = ({
     className: styles[`${baseClass}__files__list`]
   }, children))))));
 };
-export { ANIMATION_TIME, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, FileUploadProgress, FileUploadProgressActions, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, PickerList, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Textarea, Toast, ToastWrapper, Tooltip, UploadBar, UserGuide };
+export { ANIMATION_TIME, ActionMenu, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, FileUploadProgress, FileUploadProgressActions, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, PickerList, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Textarea, Toast, ToastWrapper, Tooltip, UploadBar, UserGuide };