@livechat/design-system-react-components 1.0.0-alpha.18 → 1.0.0-alpha.20

package/dist/dsrc.es.js

@@ -35,11 +35,11 @@ var __publicField = (obj, key, value) => {
 };
 import * as React from "react";
 import cx from "clsx";
-import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Check, ChevronUp, ChevronDown, Error as Error2, Search, LockBlack } from "@livechat/design-system-icons/react/material";
+import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, Check, ChevronUp, ChevronDown, Error as Error2, Search, LockBlack } from "@livechat/design-system-icons/react/material";
 import debounce from "lodash.debounce";
+import { getContrast } from "polished";
 import * as ReactDOM from "react-dom";
 import { useFloating, offset, flip, autoUpdate, arrow } from "@floating-ui/react-dom";
-import { getContrast } from "polished";
 import escape from "lodash.escape";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { css } from "@emotion/css";
@@ -186,8 +186,13 @@ const SpacingToken = {
   Spacing20: "--spacing-20",
   Spacing24: "--spacing-24"
 };
+const ShadowToken = {
+  Float: "--shadow-float",
+  PopOver: "--shadow-pop-over",
+  Modal: "--shadow-modal"
+};
 const caps = "lc-Typography-module__caps___c3eNJ";
-var styles$x = {
+var styles$y = {
   "heading-xl": "lc-Typography-module__heading-xl___nhr-6",
   "heading-lg": "lc-Typography-module__heading-lg___XYF7l",
   "heading-md": "lc-Typography-module__heading-md___wHOIs",
@@ -223,7 +228,7 @@ const Heading = (_a) => {
     "children",
     "className"
   ]);
-  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$x[`heading-${size}`], className) }, props), children);
+  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$y[`heading-${size}`], className) }, props), children);
 };
 const Text = (_c) => {
   var _d = _c, {
@@ -248,15 +253,15 @@ const Text = (_c) => {
   const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
   return React.createElement(as, __spreadValues({
     className: cx({
-      [styles$x[`${baseClassPrefix}`]]: true,
-      [styles$x[`${baseClassPrefix}--bold`]]: bold,
-      [styles$x[`${baseClassPrefix}--strike`]]: strike,
-      [styles$x[`${baseClassPrefix}--underline`]]: underline
+      [styles$y[`${baseClassPrefix}`]]: true,
+      [styles$y[`${baseClassPrefix}--bold`]]: bold,
+      [styles$y[`${baseClassPrefix}--strike`]]: strike,
+      [styles$y[`${baseClassPrefix}--underline`]]: underline
     }, className)
   }, props), children);
 };
 const icon$1 = "lc-Icon-module__icon___tw31R";
-var styles$w = {
+var styles$x = {
   icon: icon$1,
   "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
   "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
@@ -297,7 +302,7 @@ const IconSizeMap = {
     height: 32
   }
 };
-const baseClass$D = "icon";
+const baseClass$E = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
@@ -317,7 +322,7 @@ const Icon = (props) => {
   const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$w[baseClass$D], kind && styles$w[`${baseClass$D}--${disabled ? "disabled--" : ""}${kind}`]);
+  const mergedClassNames = cx(className, styles$x[baseClass$E], kind && styles$x[`${baseClass$E}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -325,7 +330,7 @@ const Icon = (props) => {
 const alert = "lc-Alert-module__alert___HBTns";
 const alert__content = "lc-Alert-module__alert__content___9nZdf";
 const alert__icon = "lc-Alert-module__alert__icon___8TaAH";
-var styles$v = {
+var styles$w = {
   alert,
   alert__content,
   "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
@@ -339,7 +344,7 @@ var styles$v = {
   "alert--error": "lc-Alert-module__alert--error___DKPo0",
   alert__icon
 };
-const IconConfig$1 = {
+const IconConfig = {
   info: {
     source: Info$1,
     kind: "link"
@@ -357,7 +362,7 @@ const IconConfig$1 = {
     kind: "error"
   }
 };
-const baseClass$C = "alert";
+const baseClass$D = "alert";
 const Alert = ({
   children,
   className,
@@ -366,7 +371,7 @@ const Alert = ({
 }) => {
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$v[baseClass$C], styles$v[`${baseClass$C}--${kind}`], isSmallContainer && styles$v[`${baseClass$C}--small`], className);
+  const mergedClassNames = cx(styles$w[baseClass$D], styles$w[`${baseClass$D}--${kind}`], isSmallContainer && styles$w[`${baseClass$D}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -381,15 +386,16 @@ const Alert = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$v[`${baseClass$C}__content`]
-  }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig$1[kind]), {
-    className: styles$v[`${baseClass$C}__content-icon`]
+    className: styles$w[`${baseClass$D}__content`]
+  }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
+    size: "large",
+    className: styles$w[`${baseClass$D}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$v[`${baseClass$C}__content-text`], onClose && styles$v[`${baseClass$C}__content-text--margin`])
+    className: cx(styles$w[`${baseClass$D}__content-text`], onClose && styles$w[`${baseClass$D}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$v[`${baseClass$C}__close-icon`],
+    className: styles$w[`${baseClass$D}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
@@ -397,6 +403,122 @@ const Alert = ({
     kind: "primary"
   })));
 };
+function getInitials(name = "", count = 2) {
+  return name.split(" ").map((el) => el.charAt(0)).join("").substring(0, count).toUpperCase();
+}
+function getFontColor(color) {
+  return getContrast(color, "#FFFFFF") > 4.5 ? "var(--color-white)" : "var(--color-black)";
+}
+const avatar = "lc-Avatar-module__avatar___1zTCE";
+const avatar__status = "lc-Avatar-module__avatar__status___nX2Ls";
+const avatar__rim = "lc-Avatar-module__avatar__rim___RCQ8Q";
+const avatar__image = "lc-Avatar-module__avatar__image___YqfqE";
+var styles$v = {
+  avatar,
+  avatar__status,
+  "avatar__status--available": "lc-Avatar-module__avatar__status--available___tcpFg",
+  "avatar__status--unavailable": "lc-Avatar-module__avatar__status--unavailable___ciauF",
+  "avatar__status--unknown": "lc-Avatar-module__avatar__status--unknown___MBaGB",
+  "avatar__status--xxxsmall": "lc-Avatar-module__avatar__status--xxxsmall___8pkEO",
+  "avatar__status--circle": "lc-Avatar-module__avatar__status--circle___doV5H",
+  "avatar__status--xxsmall": "lc-Avatar-module__avatar__status--xxsmall___M69lx",
+  "avatar__status--xsmall": "lc-Avatar-module__avatar__status--xsmall___RKQiI",
+  "avatar__status--small": "lc-Avatar-module__avatar__status--small___cVrA7",
+  "avatar__status--medium": "lc-Avatar-module__avatar__status--medium___n5z1H",
+  "avatar__status--large": "lc-Avatar-module__avatar__status--large___Lt-0p",
+  "avatar__status--xlarge": "lc-Avatar-module__avatar__status--xlarge___RWIcJ",
+  "avatar__status--xxlarge": "lc-Avatar-module__avatar__status--xxlarge___crG9D",
+  "avatar__status--rounded-square": "lc-Avatar-module__avatar__status--rounded-square___-My1P",
+  avatar__rim,
+  "avatar__rim--xxxsmall": "lc-Avatar-module__avatar__rim--xxxsmall___0CH9D",
+  "avatar__rim--xxsmall": "lc-Avatar-module__avatar__rim--xxsmall___Mde0K",
+  "avatar__rim--xsmall": "lc-Avatar-module__avatar__rim--xsmall___LAN-b",
+  "avatar__rim--small": "lc-Avatar-module__avatar__rim--small___FT8LX",
+  "avatar__rim--medium": "lc-Avatar-module__avatar__rim--medium___Dy0pr",
+  "avatar__rim--large": "lc-Avatar-module__avatar__rim--large___FPvGp",
+  "avatar__rim--xlarge": "lc-Avatar-module__avatar__rim--xlarge___CY0kN",
+  "avatar__rim--xxlarge": "lc-Avatar-module__avatar__rim--xxlarge___tE053",
+  avatar__image,
+  "avatar__icon--xxxsmall": "lc-Avatar-module__avatar__icon--xxxsmall___KaoMa",
+  "avatar__icon--xxsmall": "lc-Avatar-module__avatar__icon--xxsmall___NJJNV",
+  "avatar__icon--xsmall": "lc-Avatar-module__avatar__icon--xsmall___yHEZK",
+  "avatar__icon--small": "lc-Avatar-module__avatar__icon--small___l6lBu",
+  "avatar__icon--medium": "lc-Avatar-module__avatar__icon--medium___LF4w2",
+  "avatar__icon--large": "lc-Avatar-module__avatar__icon--large___QntBf",
+  "avatar__icon--xlarge": "lc-Avatar-module__avatar__icon--xlarge___bcHbI",
+  "avatar__icon--xxlarge": "lc-Avatar-module__avatar__icon--xxlarge___sx8Fq",
+  "avatar--circle": "lc-Avatar-module__avatar--circle___XwEz-",
+  "avatar--rounded-square": "lc-Avatar-module__avatar--rounded-square___m7-4I",
+  "avatar--with-rim": "lc-Avatar-module__avatar--with-rim___pvFZR",
+  "avatar--xxxsmall": "lc-Avatar-module__avatar--xxxsmall___EHzpP",
+  "avatar--xxsmall": "lc-Avatar-module__avatar--xxsmall___EDOVp",
+  "avatar--xsmall": "lc-Avatar-module__avatar--xsmall___nI348",
+  "avatar--small": "lc-Avatar-module__avatar--small___UuQen",
+  "avatar--medium": "lc-Avatar-module__avatar--medium___Bt9Eo",
+  "avatar--large": "lc-Avatar-module__avatar--large___OU-08",
+  "avatar--xlarge": "lc-Avatar-module__avatar--xlarge___zwgeW",
+  "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
+};
+const baseClass$C = "avatar";
+const defaultBackgroundColor = "var(--surface-basic-disabled)";
+const defaultFontColor = "var(--content-subtle)";
+const Avatar = ({
+  alt,
+  className,
+  color,
+  shape = "circle",
+  size = "medium",
+  src,
+  status,
+  text,
+  type,
+  withRim = false
+}) => {
+  const isImproperImageSetup = type === "image" && !src;
+  const [shouldDisplayFallbackAvatar, setShouldDisplayFallbackAvatar] = React.useState(isImproperImageSetup);
+  const shouldDisplayImage = type === "image" && !!src && !shouldDisplayFallbackAvatar;
+  const shouldDisplayInitials = type === "text";
+  const letterCount = ["xxxsmall", "xxsmall", "xsmall"].includes(size) ? 1 : 2;
+  const initials = getInitials(text, letterCount);
+  const backgroundColor = color || defaultBackgroundColor;
+  const fontColor = color ? getFontColor(color) : defaultFontColor;
+  const mergedClassNames = cx({
+    [styles$v[baseClass$C]]: true,
+    [styles$v[`${baseClass$C}--${shape}`]]: true,
+    [styles$v[`${baseClass$C}--${size}`]]: true,
+    [styles$v[`${baseClass$C}--with-rim`]]: withRim,
+    [`${className}`]: className
+  });
+  const mergedStatusClassNames = cx(styles$v[`${baseClass$C}__status`], styles$v[`${baseClass$C}__status--${shape}`], styles$v[`${baseClass$C}__status--${size}`], styles$v[`${baseClass$C}__status--${status}`]);
+  const mergedIconClassNames = cx(styles$v[`${baseClass$C}__icon`], styles$v[`${baseClass$C}__icon--${size}`]);
+  const mergedRimClassNames = cx(styles$v[`${baseClass$C}__rim`], styles$v[`${baseClass$C}__rim--${size}`]);
+  const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
+  React.useEffect(() => {
+    setShouldDisplayFallbackAvatar(isImproperImageSetup);
+  }, [isImproperImageSetup]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames,
+    style: { backgroundColor }
+  }, withRim && /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${baseClass$C}__rim`,
+    className: mergedRimClassNames
+  }), status && /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${baseClass$C}__status`,
+    className: mergedStatusClassNames
+  }), shouldDisplayImage && /* @__PURE__ */ React.createElement("img", {
+    className: styles$v[`${baseClass$C}__image`],
+    src,
+    alt,
+    onError: handleError
+  }), shouldDisplayInitials && /* @__PURE__ */ React.createElement("span", {
+    style: { color: fontColor }
+  }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
+    "data-testid": `${baseClass$C}__icon`,
+    className: mergedIconClassNames,
+    source: Person,
+    kind: "primary"
+  }));
+};
 const badge = "lc-Badge-module__badge___GhLnu";
 const badge__dot = "lc-Badge-module__badge__dot___z6RO6";
 var styles$u = {
@@ -409,25 +531,37 @@ var styles$u = {
   "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ",
   "badge--tertiary": "lc-Badge-module__badge--tertiary___e83wV"
 };
+function formatCount(count, max) {
+  return count > max ? `${max}+` : `${count}`;
+}
 const baseClass$B = "badge";
-const Badge = ({
-  children,
-  className,
-  kind = "primary",
-  size = "medium",
-  type = "content"
-}) => {
+const Badge = (_e) => {
+  var _f = _e, {
+    className,
+    count = 0,
+    max = 99,
+    kind = "primary",
+    size = "medium",
+    type = "counter"
+  } = _f, spanProps = __objRest(_f, [
+    "className",
+    "count",
+    "max",
+    "kind",
+    "size",
+    "type"
+  ]);
   const mergedClassNames = cx(className, styles$u[baseClass$B], styles$u[`${baseClass$B}--${kind}`], styles$u[`${baseClass$B}--${size}`]);
   const content = {
-    ["content"]: children,
+    ["counter"]: formatCount(count, max),
     ["alert"]: "!",
     ["dot"]: /* @__PURE__ */ React.createElement("span", {
       className: styles$u[`${baseClass$B}__dot`]
     })
   }[type];
-  return /* @__PURE__ */ React.createElement("span", {
+  return /* @__PURE__ */ React.createElement("span", __spreadValues({
     className: mergedClassNames
-  }, content);
+  }, spanProps), content);
 };
 const loader = "lc-Loader-module__loader___LRflD";
 const loader__spinner = "lc-Loader-module__loader__spinner___l3C1g";
@@ -494,8 +628,8 @@ var styles$s = {
   btn__icon
 };
 const baseClass$z = "btn";
-const Button = (_e) => {
-  var _f = _e, {
+const Button = (_g) => {
+  var _h = _g, {
     loading = false,
     disabled = false,
     type = "button",
@@ -508,7 +642,7 @@ const Button = (_e) => {
     className,
     children,
     href
-  } = _f, props = __objRest(_f, [
+  } = _h, props = __objRest(_h, [
     "loading",
     "disabled",
     "type",
@@ -558,8 +692,8 @@ var styles$r = {
 function noop() {
 }
 const baseClass$y = "btn-group";
-const ButtonGroup = (_g) => {
-  var _h = _g, {
+const ButtonGroup = (_i) => {
+  var _j = _i, {
     size = "medium",
     fullWidth = false,
     onIndexChange = noop,
@@ -567,7 +701,7 @@ const ButtonGroup = (_g) => {
     children,
     currentIndex,
     initialIndex = -1
-  } = _h, restProps = __objRest(_h, [
+  } = _j, restProps = __objRest(_j, [
     "size",
     "fullWidth",
     "onIndexChange",
@@ -613,13 +747,13 @@ var styles$q = {
   card__text,
   card__img
 };
-const Card = (_i) => {
-  var _j = _i, {
+const Card = (_k) => {
+  var _l = _k, {
     img,
     title,
     children,
     className
-  } = _j, restProps = __objRest(_j, [
+  } = _l, restProps = __objRest(_l, [
     "img",
     "title",
     "children",
@@ -644,11 +778,11 @@ var styles$p = {
   "field-description": "lc-FieldDescription-module__field-description___IcRDH"
 };
 const baseClass$x = "field-description";
-const FieldDescription = (_k) => {
-  var _l = _k, {
+const FieldDescription = (_m) => {
+  var _n = _m, {
     children,
     className = ""
-  } = _l, props = __objRest(_l, [
+  } = _n, props = __objRest(_n, [
     "children",
     "className"
   ]);
@@ -679,8 +813,8 @@ var styles$o = {
   checkbox__helper
 };
 const baseClass$w = "checkbox";
-const Checkbox = React.forwardRef((_m, ref) => {
-  var _n = _m, { checked, disabled, children, description, className } = _n, restInputProps = __objRest(_n, ["checked", "disabled", "children", "description", "className"]);
+const Checkbox = React.forwardRef((_o, ref) => {
+  var _p = _o, { checked, disabled, children, description, className } = _p, restInputProps = __objRest(_p, ["checked", "disabled", "children", "description", "className"]);
   return /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$o[baseClass$w], className, {
       [styles$o[`${baseClass$w}--selected`]]: checked,
@@ -713,11 +847,11 @@ var styles$n = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
 const baseClass$v = "field-error";
-const FieldError = (_o) => {
-  var _p = _o, {
+const FieldError = (_q) => {
+  var _r = _q, {
     children,
     className = ""
-  } = _p, props = __objRest(_p, [
+  } = _r, props = __objRest(_r, [
     "children",
     "className"
   ]);
@@ -735,15 +869,15 @@ var styles$m = {
   "field-group--stretched": "lc-FieldGroup-module__field-group--stretched___6rkuO"
 };
 const baseClass$u = "field-group";
-const FieldGroup = (_q) => {
-  var _r = _q, {
+const FieldGroup = (_s) => {
+  var _t = _s, {
     className = "",
     children,
     description,
     error,
     inline,
     stretch
-  } = _r, props = __objRest(_r, [
+  } = _t, props = __objRest(_t, [
     "className",
     "children",
     "description",
@@ -772,14 +906,14 @@ var styles$l = {
   form__helper
 };
 const baseClass$t = "form";
-const Form = (_s) => {
-  var _t = _s, {
+const Form = (_u) => {
+  var _v = _u, {
     className,
     children,
     labelText,
     helperText,
     formFooter
-  } = _t, restProps = __objRest(_t, [
+  } = _v, restProps = __objRest(_v, [
     "className",
     "children",
     "labelText",
@@ -864,13 +998,13 @@ var styles$j = {
   "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
 };
 const baseClass$r = "form-group";
-const FormGroup = (_u) => {
-  var _v = _u, {
+const FormGroup = (_w) => {
+  var _x = _w, {
     className = "",
     children,
     labelText,
     helperText
-  } = _v, props = __objRest(_v, [
+  } = _x, props = __objRest(_x, [
     "className",
     "children",
     "labelText",
@@ -903,8 +1037,8 @@ var styles$i = {
   "input--large": "lc-Input-module__input--large___jX5RW"
 };
 const baseClass$q = "input";
-const Input = React.forwardRef((_w, ref) => {
-  var _x = _w, { size = "medium", error = false, className } = _x, inputProps = __objRest(_x, ["size", "error", "className"]);
+const Input = React.forwardRef((_y, ref) => {
+  var _z = _y, { size = "medium", error = false, className } = _z, inputProps = __objRest(_z, ["size", "error", "className"]);
   return /* @__PURE__ */ React.createElement("input", __spreadValues({
     className: cx(className, styles$i[baseClass$q], styles$i[`${baseClass$q}--${size}`], {
       [styles$i[`${baseClass$q}--error`]]: error
@@ -919,11 +1053,11 @@ var styles$h = {
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
 const baseClass$p = "link";
-const Link = (_y) => {
-  var _z = _y, {
+const Link = (_A) => {
+  var _B = _A, {
     bold = false,
     className = ""
-  } = _z, rest = __objRest(_z, [
+  } = _B, rest = __objRest(_B, [
     "bold",
     "className"
   ]);
@@ -974,13 +1108,13 @@ const KeyCodes = {
   arrowDown: "ArrowDown"
 };
 const baseClass$o = "modal-base";
-const ModalBase = (_A) => {
-  var _B = _A, {
+const ModalBase = (_C) => {
+  var _D = _C, {
     children,
     className = "",
     onClose,
     closeOnEscPress = true
-  } = _B, props = __objRest(_B, [
+  } = _D, props = __objRest(_D, [
     "children",
     "className",
     "onClose",
@@ -1020,14 +1154,14 @@ const ModalBase = (_A) => {
   }), children));
 };
 const baseClass$n = "action-modal";
-const ActionModal = (_C) => {
-  var _D = _C, {
+const ActionModal = (_E) => {
+  var _F = _E, {
     children,
     className = "",
     icon: icon2,
     heading,
     actions
-  } = _D, props = __objRest(_D, [
+  } = _F, props = __objRest(_F, [
     "children",
     "className",
     "icon",
@@ -1048,13 +1182,13 @@ const ActionModal = (_C) => {
   }, actions));
 };
 const baseClass$m = "modal";
-const Modal = (_E) => {
-  var _F = _E, {
+const Modal = (_G) => {
+  var _H = _G, {
     children,
     className = "",
     heading,
     footer
-  } = _F, props = __objRest(_F, [
+  } = _H, props = __objRest(_H, [
     "children",
     "className",
     "heading",
@@ -1107,8 +1241,8 @@ var styles$f = {
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
 const baseClass$l = "numeric-input";
-const NumericInput = (_G) => {
-  var _H = _G, {
+const NumericInput = (_I) => {
+  var _J = _I, {
     className,
     error,
     value,
@@ -1118,7 +1252,7 @@ const NumericInput = (_G) => {
     noControls,
     style,
     onChange
-  } = _H, restProps = __objRest(_H, [
+  } = _J, restProps = __objRest(_J, [
     "className",
     "error",
     "value",
@@ -1672,13 +1806,13 @@ const SIZE_VALUE_FROM_SIZE = {
   large: 56
 };
 const baseClass$h = "progress-circle";
-const ProgressCircle = React.forwardRef((_I, ref) => {
-  var _J = _I, {
+const ProgressCircle = React.forwardRef((_K, ref) => {
+  var _L = _K, {
     status = "normal",
     progressValue,
     className,
     size = "medium"
-  } = _J, restProps = __objRest(_J, [
+  } = _L, restProps = __objRest(_L, [
     "status",
     "progressValue",
     "className",
@@ -1733,13 +1867,13 @@ var styles$a = {
   "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
 };
 const baseClass$g = "progress-bar";
-const ProgressBar = React.forwardRef((_K, ref) => {
-  var _L = _K, {
+const ProgressBar = React.forwardRef((_M, ref) => {
+  var _N = _M, {
     status = "normal",
     percent,
     size = "medium",
     className = ""
-  } = _L, restProps = __objRest(_L, [
+  } = _N, restProps = __objRest(_N, [
     "status",
     "percent",
     "size",
@@ -1859,8 +1993,8 @@ var styles$8 = {
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
 const baseClass$e = "radio-button";
-const RadioButton = React.forwardRef((_M, ref) => {
-  var _N = _M, { children, className = "", description, checked, disabled } = _N, props = __objRest(_N, ["children", "className", "description", "checked", "disabled"]);
+const RadioButton = React.forwardRef((_O, ref) => {
+  var _P = _O, { children, className = "", description, checked, disabled } = _P, props = __objRest(_P, ["children", "className", "description", "checked", "disabled"]);
   const mergedClassNames = cx(styles$8[baseClass$e], className, {
     [styles$8[`${baseClass$e}--selected`]]: checked,
     [styles$8[`${baseClass$e}--disabled`]]: disabled
@@ -1987,38 +2121,48 @@ const switch__input = "lc-Switch-module__switch__input___NiiOR";
 const switch__container = "lc-Switch-module__switch__container___79F7W";
 const switch__track = "lc-Switch-module__switch__track___2wr2M";
 const switch__slider = "lc-Switch-module__switch__slider___WHd--";
+const switch__loader = "lc-Switch-module__switch__loader___FE-fA";
 var styles$6 = {
   "switch": "lc-Switch-module__switch___AaA2k",
   "switch__track--enabled": "lc-Switch-module__switch__track--enabled___sy4Xl",
   "switch__track--on": "lc-Switch-module__switch__track--on___aOMWe",
   "switch__track--off": "lc-Switch-module__switch__track--off___NAisj",
-  "switch--basic": "lc-Switch-module__switch--basic___jKO4n",
+  "switch--large": "lc-Switch-module__switch--large___pSoJ7",
   "switch--compact": "lc-Switch-module__switch--compact___OGFIX",
+  "switch--medium": "lc-Switch-module__switch--medium___EcZwT",
   switch__input,
   "switch__input--disabled": "lc-Switch-module__switch__input--disabled___Po8gh",
   switch__container,
   switch__track,
   "switch__track--disabled": "lc-Switch-module__switch__track--disabled___HkDhl",
   switch__slider,
-  "switch__slider--basic": "lc-Switch-module__switch__slider--basic___OMKTp",
-  "switch__slider--basic--on": "lc-Switch-module__switch__slider--basic--on___mn3f9",
-  "switch__slider--basic--off": "lc-Switch-module__switch__slider--basic--off___MRoBu",
+  "switch__slider--large": "lc-Switch-module__switch__slider--large___WoEgi",
+  "switch__slider--large--on": "lc-Switch-module__switch__slider--large--on___7Qp3G",
+  "switch__slider--large--off": "lc-Switch-module__switch__slider--large--off___iRMmD",
   "switch__slider--compact": "lc-Switch-module__switch__slider--compact___uZ-lS",
   "switch__slider--compact--on": "lc-Switch-module__switch__slider--compact--on___FykE3",
-  "switch__slider--compact--off": "lc-Switch-module__switch__slider--compact--off___s5yR8"
+  "switch__slider--compact--off": "lc-Switch-module__switch__slider--compact--off___s5yR8",
+  "switch__slider--medium": "lc-Switch-module__switch__slider--medium___uhptz",
+  "switch__slider--medium--on": "lc-Switch-module__switch__slider--medium--on___SfeAV",
+  "switch__slider--medium--off": "lc-Switch-module__switch__slider--medium--off___eXJJz",
+  switch__loader,
+  "switch__loader--compact": "lc-Switch-module__switch__loader--compact___3imUh",
+  "switch__loader--medium": "lc-Switch-module__switch__loader--medium___2zi05",
+  "switch__loader--large": "lc-Switch-module__switch__loader--large___vLRFa"
 };
 const baseClass$c = "switch";
-const Switch = (_O) => {
-  var _P = _O, {
+const Switch = (_Q) => {
+  var _R = _Q, {
     className = "",
     defaultOn = false,
     disabled = false,
     name = baseClass$c,
     on,
     onChange = noop,
-    size = "basic",
+    size = "large",
+    state = "regular",
     innerRef
-  } = _P, props = __objRest(_P, [
+  } = _R, props = __objRest(_R, [
     "className",
     "defaultOn",
     "disabled",
@@ -2026,6 +2170,7 @@ const Switch = (_O) => {
     "on",
     "onChange",
     "size",
+    "state",
     "innerRef"
   ]);
   const [checked, setChecked] = React.useState(() => on !== void 0 ? on : defaultOn);
@@ -2034,9 +2179,12 @@ const Switch = (_O) => {
       setChecked(on);
     }
   }, [on]);
-  const iconSize = size === "basic" ? "small" : "xsmall";
+  const isLoading = state === "loading";
+  const isLocked = state === "locked";
+  const iconSize = size === "large" ? "small" : "xsmall";
   const toggleStyles = checked ? "on" : "off";
-  const availabilityStyles = disabled ? "disabled" : "enabled";
+  const shouldBehaveAsDisabled = disabled || isLoading || isLocked;
+  const availabilityStyles = shouldBehaveAsDisabled ? "disabled" : "enabled";
   const mergedClassNames = cx(styles$6[baseClass$c], styles$6[`${baseClass$c}--${size}`], className);
   const handleChange = (e) => {
     const hasOnChangePassed = onChange !== noop;
@@ -2056,7 +2204,7 @@ const Switch = (_O) => {
     checked,
     name,
     ref: innerRef,
-    disabled,
+    disabled: shouldBehaveAsDisabled,
     "test-id": "foo"
   }, props)), /* @__PURE__ */ React.createElement("span", {
     className: styles$6[`${baseClass$c}__container`]
@@ -2064,7 +2212,10 @@ const Switch = (_O) => {
     className: cx(styles$6[`${baseClass$c}__track`], styles$6[`${baseClass$c}__track--${toggleStyles}`], styles$6[`${baseClass$c}__track--${availabilityStyles}`])
   }), /* @__PURE__ */ React.createElement("span", {
     className: cx(styles$6[`${baseClass$c}__slider`], styles$6[`${baseClass$c}__slider--${size}`], styles$6[`${baseClass$c}__slider--${size}--${toggleStyles}`])
-  }, disabled && /* @__PURE__ */ React.createElement(Icon, {
+  }, isLoading && /* @__PURE__ */ React.createElement(Loader, {
+    className: cx(styles$6[`${baseClass$c}__loader`], styles$6[`${baseClass$c}__loader--${size}`])
+  }), isLocked && /* @__PURE__ */ React.createElement(Icon, {
+    "data-testid": "lock-icon",
     size: iconSize,
     source: LockBlack,
     kind: "primary"
@@ -2078,13 +2229,13 @@ var styles$5 = {
   "tab--selected": "lc-Tab-module__tab--selected___c0EkL"
 };
 const baseClass$b = "tab";
-const Tab = (_Q) => {
-  var _R = _Q, {
+const Tab = (_S) => {
+  var _T = _S, {
     children,
     className,
     description,
     isSelected
-  } = _R, restProps = __objRest(_R, [
+  } = _T, restProps = __objRest(_T, [
     "children",
     "className",
     "description",
@@ -2154,8 +2305,8 @@ const getCustomTextClass = (customColor) => {
   }
   return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
 };
-const Tag = (_S) => {
-  var _T = _S, {
+const Tag = (_U) => {
+  var _V = _U, {
     className = "",
     children,
     dismissible = false,
@@ -2164,9 +2315,9 @@ const Tag = (_S) => {
     onRemove,
     outline = false,
     icon: icon2,
-    avatar,
+    avatar: avatar2,
     customColor
-  } = _T, restProps = __objRest(_T, [
+  } = _V, restProps = __objRest(_V, [
     "className",
     "children",
     "dismissible",
@@ -2181,7 +2332,7 @@ const Tag = (_S) => {
   const mergedClassNames = cx(styles$3[baseClass$9], className, styles$3[`${baseClass$9}--${size}`], styles$3[`${baseClass$9}--${kind}`], {
     [styles$3[`${baseClass$9}--dismissible`]]: dismissible,
     [styles$3[`${baseClass$9}--outline`]]: outline,
-    [styles$3[`${baseClass$9}--with-icon`]]: !!icon2 || !!avatar,
+    [styles$3[`${baseClass$9}--with-icon`]]: !!icon2 || !!avatar2,
     [styles$3[`${baseClass$9}--${getCustomTextClass(customColor)}`]]: !!customColor
   });
   const getCustomColorStyles = () => {
@@ -2213,12 +2364,12 @@ const Tag = (_S) => {
   }, restProps), getCustomColorStyles()), {
     as: "div",
     size: "md"
-  }), avatar && /* @__PURE__ */ React.createElement("img", {
+  }), avatar2 && /* @__PURE__ */ React.createElement("img", {
     className: styles$3[`${baseClass$9}__avatar`],
-    src: avatar,
+    src: avatar2,
     alt: "tag-avatar",
     "data-testid": "lc-tag-avatar"
-  }), " ", icon2 && !avatar && /* @__PURE__ */ React.createElement(Icon, {
+  }), " ", icon2 && !avatar2 && /* @__PURE__ */ React.createElement(Icon, {
     "data-testid": "lc-tag-icon",
     className: styles$3[`${baseClass$9}__icon`],
     source: icon2,
@@ -2436,18 +2587,13 @@ const EmailTagInput = ({
 };
 const toast = "lc-Toast-module__toast___j5Amn";
 const toast__content = "lc-Toast-module__toast__content___HjaNw";
-const toast__icon = "lc-Toast-module__toast__icon___wLbLu";
-const toast__close = "lc-Toast-module__toast__close___O18Lh";
 const toast__actions = "lc-Toast-module__toast__actions___JWu-1";
 var styles$1 = {
   toast,
   toast__content,
-  toast__icon,
-  toast__close,
   toast__actions,
-  "toast__actions-close": "lc-Toast-module__toast__actions-close___xN8YT",
-  "toast__actions-custom": "lc-Toast-module__toast__actions-custom___z1UUf",
-  "toast--notification": "lc-Toast-module__toast--notification___pDXnc",
+  "toast__actions--close": "lc-Toast-module__toast__actions--close___QuXHY",
+  "toast__actions--custom": "lc-Toast-module__toast__actions--custom___lm-pM",
   "toast--success": "lc-Toast-module__toast--success___7UC6m",
   "toast--warning": "lc-Toast-module__toast--warning___pteb7",
   "toast--error": "lc-Toast-module__toast--error___trg--",
@@ -2469,8 +2615,7 @@ var styles$1 = {
   "toast-exit--fade": "lc-Toast-module__toast-exit--fade___iDA1p",
   "toast-exit-active--fade": "lc-Toast-module__toast-exit-active--fade___tL7sb"
 };
-const baseClass$6 = "toast";
-const IconConfig = {
+const iconConfig = {
   success: {
     source: CheckCircleSolid,
     kind: "inverted"
@@ -2485,47 +2630,55 @@ const IconConfig = {
   info: {
     source: Info$1,
     kind: "inverted"
-  },
-  notification: {
-    source: Info$1,
-    kind: "link"
   }
 };
-const Toast = ({
-  action,
-  className,
-  children,
-  removable,
-  kind = "info",
-  onClose
-}) => {
+const baseClass$6 = "toast";
+const Toast = (_W) => {
+  var _X = _W, {
+    action,
+    className,
+    children,
+    removable,
+    kind = "info",
+    onClose
+  } = _X, divProps = __objRest(_X, [
+    "action",
+    "className",
+    "children",
+    "removable",
+    "kind",
+    "onClose"
+  ]);
   const mergedClassNames = cx(styles$1[baseClass$6], styles$1[`${baseClass$6}--${kind}`], className);
   const onActionClick = (action2) => {
-    if (action2 && action2.closeOnClick && onClose) {
-      action2.handler();
+    if (action2 && action2.closesOnClick && onClose) {
+      action2.onClick();
       return onClose();
     }
-    return action2.handler();
+    return action2.onClick();
   };
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: mergedClassNames
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, divProps), /* @__PURE__ */ React.createElement("div", {
     className: styles$1[`${baseClass$6}__icon`]
-  }, /* @__PURE__ */ React.createElement(Icon, __spreadValues({}, IconConfig[kind]))), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, iconConfig[kind]), {
+    size: "medium"
+  }))), /* @__PURE__ */ React.createElement("div", {
     className: styles$1[`${baseClass$6}__content`]
   }, children), (action || removable) && /* @__PURE__ */ React.createElement("div", {
     className: styles$1[`${baseClass$6}__actions`]
-  }, action && /* @__PURE__ */ React.createElement("button", {
-    className: styles$1[`${baseClass$6}__actions-custom`],
+  }, action && /* @__PURE__ */ React.createElement(Button, {
+    className: styles$1[`${baseClass$6}__actions--custom`],
+    kind: "plain",
     onClick: () => onActionClick(action)
   }, action.label), removable && /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$6}__actions-close`],
+    className: styles$1[`${baseClass$6}__actions--close`],
     "aria-label": "Close toast",
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
-    size: "small",
-    kind: ["warning", "notification"].includes(kind) ? "primary" : "inverted"
+    size: "medium",
+    kind: ["warning"].includes(kind) ? "primary" : "inverted"
   }))));
 };
 const ANIMATION_TIME = 200;
@@ -3032,4 +3185,4 @@ const UserGuide = (props) => {
     })
   }), props.children)) : null;
 };
-export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, SearchInput, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };
+export { ANIMATION_TIME, ActionModal, Alert, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, SearchInput, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };