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

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,15 @@ 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]), {
+    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 +402,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 = {
@@ -1987,25 +2108,34 @@ 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) => {
@@ -2013,15 +2143,17 @@ const Switch = (_O) => {
     className = "",
     defaultOn = false,
     disabled = false,
+    loading = false,
     name = baseClass$c,
     on,
     onChange = noop,
-    size = "basic",
+    size = "large",
     innerRef
   } = _P, props = __objRest(_P, [
     "className",
     "defaultOn",
     "disabled",
+    "loading",
     "name",
     "on",
     "onChange",
@@ -2034,10 +2166,12 @@ const Switch = (_O) => {
       setChecked(on);
     }
   }, [on]);
-  const iconSize = size === "basic" ? "small" : "xsmall";
+  const iconSize = size === "large" ? "small" : "xsmall";
   const toggleStyles = checked ? "on" : "off";
-  const availabilityStyles = disabled ? "disabled" : "enabled";
+  const shouldBehaveAsDisabled = disabled || loading;
+  const availabilityStyles = shouldBehaveAsDisabled ? "disabled" : "enabled";
   const mergedClassNames = cx(styles$6[baseClass$c], styles$6[`${baseClass$c}--${size}`], className);
+  const shouldShowDisabledIcon = disabled && !loading;
   const handleChange = (e) => {
     const hasOnChangePassed = onChange !== noop;
     if (hasOnChangePassed) {
@@ -2056,7 +2190,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 +2198,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, {
+  }, loading && /* @__PURE__ */ React.createElement(Loader, {
+    className: cx(styles$6[`${baseClass$c}__loader`], styles$6[`${baseClass$c}__loader--${size}`])
+  }), shouldShowDisabledIcon && /* @__PURE__ */ React.createElement(Icon, {
+    "data-testid": "disabled-icon",
     size: iconSize,
     source: LockBlack,
     kind: "primary"
@@ -2164,7 +2301,7 @@ const Tag = (_S) => {
     onRemove,
     outline = false,
     icon: icon2,
-    avatar,
+    avatar: avatar2,
     customColor
   } = _T, restProps = __objRest(_T, [
     "className",
@@ -2181,7 +2318,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 +2350,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 +2573,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 +2601,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 +2616,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 = (_U) => {
+  var _V = _U, {
+    action,
+    className,
+    children,
+    removable,
+    kind = "info",
+    onClose
+  } = _V, divProps = __objRest(_V, [
+    "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 +3171,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 };