@livechat/design-system-react-components 1.0.0-alpha.37 → 1.0.0-alpha.39

package/dist/dsrc.es.js

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 import * as React from "react";
 import { useReducer, useRef, useEffect, useCallback, useMemo } from "react";
 import cx from "clsx";
-import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, Check, DoubleArrowLeft, ChevronLeft, ChevronRight, DoubleArrowRight, VisibilityOn, VisibilityOff, Error as Error2, Search, LockBlack, Refresh } from "@livechat/design-system-icons/react/material";
+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";
@@ -569,8 +569,6 @@ var styles$B = {
   "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
 };
 const baseClass$K = "avatar";
-const defaultBackgroundColor = "var(--surface-basic-disabled)";
-const defaultFontColor = "var(--content-subtle)";
 const Avatar = ({
   alt,
   className,
@@ -589,8 +587,7 @@ const Avatar = ({
   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 fontColor = color && getFontColor(color);
   const mergedClassNames = cx({
     [styles$B[baseClass$K]]: true,
     [styles$B[`${baseClass$K}--${shape}`]]: true,
@@ -607,7 +604,7 @@ const Avatar = ({
   }, [isImproperImageSetup]);
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames,
-    style: { backgroundColor }
+    style: { backgroundColor: color }
   }, withRim && /* @__PURE__ */ React.createElement("div", {
     "data-testid": `${baseClass$K}__rim`,
     className: mergedRimClassNames
@@ -624,8 +621,7 @@ const Avatar = ({
   }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
     "data-testid": `${baseClass$K}__icon`,
     className: mergedIconClassNames,
-    source: Person,
-    kind: "primary"
+    source: Person
   }));
 };
 const badge = "lc-Badge-module__badge___GhLnu";
@@ -718,15 +714,13 @@ const btn__icon = "lc-Button-module__btn__icon___GVExB";
 var styles$y = {
   btn: btn$1,
   "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
-  "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
-  "btn__icon--left": "lc-Button-module__btn__icon--left___H68zu",
-  "btn__icon--right": "lc-Button-module__btn__icon--right___fHr3D",
   "btn--full-width": "lc-Button-module__btn--full-width___kdbAr",
   "btn--basic": "lc-Button-module__btn--basic___Jc2gD",
   "btn--primary": "lc-Button-module__btn--primary___ajbjQ",
   "btn--secondary": "lc-Button-module__btn--secondary___iWzE0",
   "btn--destructive": "lc-Button-module__btn--destructive___-kLCl",
   "btn--compact": "lc-Button-module__btn--compact___4eptQ",
+  "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
   "btn--large": "lc-Button-module__btn--large___lb-z6",
   "btn--text": "lc-Button-module__btn--text___WA8OL",
   "btn--plain": "lc-Button-module__btn--plain___eOPui",
@@ -734,7 +728,10 @@ var styles$y = {
   "btn--loading": "lc-Button-module__btn--loading___ZAgjv",
   btn__loader,
   btn__content,
-  btn__icon
+  btn__icon,
+  "btn__icon--left": "lc-Button-module__btn__icon--left___H68zu",
+  "btn__icon--right": "lc-Button-module__btn__icon--right___fHr3D",
+  "btn--icon-only--bg": "lc-Button-module__btn--icon-only--bg___X-4V2"
 };
 const baseClass$H = "btn";
 const Button = (_i) => {
@@ -768,11 +765,22 @@ const Button = (_i) => {
     "onClick"
   ]);
   const isDisabled = loading || disabled;
+  const isIconOnly = !children && icon2;
+  const isTextButton = ["text", "plain", "plain-light"].includes(kind);
   const Component = href ? "a" : "button";
+  const getSpinnerColors = () => {
+    if (kind === "primary" || kind === "destructive") {
+      return {
+        primaryColor: "var(--action-primary-default)",
+        secondaryColor: "var(--border-invert-primary)"
+      };
+    }
+  };
   const mergedClassNames = cx(className, styles$y[baseClass$H], styles$y[`${baseClass$H}--${kind}`], styles$y[`${baseClass$H}--${size}`], {
     [styles$y[`${baseClass$H}--loading`]]: loading,
     [styles$y[`${baseClass$H}--full-width`]]: fullWidth,
-    [styles$y[`${baseClass$H}--icon-only`]]: !children && icon2,
+    [styles$y[`${baseClass$H}--icon-only`]]: isIconOnly,
+    [styles$y[`${baseClass$H}--icon-only--bg`]]: isIconOnly && isTextButton,
     [styles$y[`${baseClass$H}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
@@ -780,12 +788,13 @@ const Button = (_i) => {
     "aria-disabled": isDisabled,
     type,
     href: isDisabled ? void 0 : href,
-    onClick: isDisabled ? void 0 : onClick
-  }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
+    onClick: isDisabled ? void 0 : onClick,
+    disabled: isDisabled
+  }, props), loading && /* @__PURE__ */ React.createElement(Loader, __spreadValues({
     size: "small",
     label: loaderLabel,
     className: styles$y[`${baseClass$H}__loader`]
-  }), icon2 && React.cloneElement(icon2, {
+  }, getSpinnerColors())), icon2 && React.cloneElement(icon2, {
     className: cx(styles$y[`${baseClass$H}__icon`], styles$y[`${baseClass$H}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
@@ -1888,12 +1897,7 @@ var styles$l = {
   "modal__label-heading": "lc-Modal-module__modal__label-heading___WnYcF",
   modal__body,
   "modal__body--full-space": "lc-Modal-module__modal__body--full-space___LsSNE",
-  modal__footer,
-  "action-modal": "lc-Modal-module__action-modal___CsRC7",
-  "action-modal__heading": "lc-Modal-module__action-modal__heading___m3MuG",
-  "action-modal__content": "lc-Modal-module__action-modal__content___gf-R2",
-  "action-modal__actions": "lc-Modal-module__action-modal__actions___kpRXD",
-  "action-modal__icon": "lc-Modal-module__action-modal__icon___MK5xt"
+  modal__footer
 };
 const baseClass$s = "modal-base";
 const ModalBase = (_C) => {
@@ -2405,16 +2409,9 @@ const PickerList = ({
 };
 const picker = "lc-Picker-module__picker___GRj9W";
 const picker__container = "lc-Picker-module__picker__container___s0PUc";
-const picker__label = "lc-Picker-module__picker__label___Ac7Vu";
-const picker__error = "lc-Picker-module__picker__error___H865k";
-const picker__error__icon = "lc-Picker-module__picker__error__icon___bbL7r";
 var styles$h = {
   picker,
-  picker__container,
-  picker__label,
-  "picker__label--disabled": "lc-Picker-module__picker__label--disabled___Opu7s",
-  picker__error,
-  picker__error__icon
+  picker__container
 };
 const tag = "lc-Tag-module__tag___1QRVY";
 const tag__remove = "lc-Tag-module__tag__remove___UmtrW";
@@ -2428,9 +2425,11 @@ var styles$g = {
   "tag--error": "lc-Tag-module__tag--error___1cjsm",
   "tag--warning": "lc-Tag-module__tag--warning___PstMG",
   "tag--info": "lc-Tag-module__tag--info___RTH0C",
+  "tag--purple": "lc-Tag-module__tag--purple___a0xaE",
+  "tag--black": "lc-Tag-module__tag--black___qWjfD",
+  "tag--outline": "lc-Tag-module__tag--outline___aZXtr",
   "tag--medium": "lc-Tag-module__tag--medium___l5-KI",
   "tag--large": "lc-Tag-module__tag--large___ytC6Y",
-  "tag--outline": "lc-Tag-module__tag--outline___aZXtr",
   icon,
   "tag--text-white": "lc-Tag-module__tag--text-white___x0fnD",
   "tag--text-black": "lc-Tag-module__tag--text-black___dUvmD",
@@ -2586,23 +2585,38 @@ const TriggerBody = ({
   }), shouldDisplaySearch && getSearch());
 };
 const baseClass$l = "picker";
-const Picker = ({
-  className,
-  disabled,
-  error,
-  label,
-  options,
-  selected,
-  size = "medium",
-  tagIconSize = "medium",
-  placeholder = "Select option",
-  isRequired,
-  noSearchResultText = "No results found",
-  selectAllOptionText,
-  type = "single",
-  searchDisabled = false,
-  onSelect
-}) => {
+const Picker = (_K) => {
+  var _L = _K, {
+    className,
+    disabled,
+    error,
+    options,
+    selected,
+    size = "medium",
+    tagIconSize = "medium",
+    placeholder = "Select option",
+    isRequired,
+    noSearchResultText = "No results found",
+    selectAllOptionText,
+    type = "single",
+    searchDisabled = false,
+    onSelect
+  } = _L, props = __objRest(_L, [
+    "className",
+    "disabled",
+    "error",
+    "options",
+    "selected",
+    "size",
+    "tagIconSize",
+    "placeholder",
+    "isRequired",
+    "noSearchResultText",
+    "selectAllOptionText",
+    "type",
+    "searchDisabled",
+    "onSelect"
+  ]);
   const [isListOpen, setIsListOpen] = React.useState(false);
   const [searchPhrase, setSearchPhrase] = React.useState(null);
   const triggerRef = React.useRef(null);
@@ -2694,18 +2708,14 @@ const Picker = ({
     }
     return selected.map((item) => item.key);
   }, [selected]);
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
     ref: triggerRef,
     className: mergedClassNames
-  }, label && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$h[`${baseClass$l}__label`], {
-      [styles$h[`${baseClass$l}__label--disabled`]]: disabled
-    })
-  }, label), /* @__PURE__ */ React.createElement("div", {
+  }, props), /* @__PURE__ */ React.createElement("div", {
     className: styles$h[`${baseClass$l}__container`]
   }, /* @__PURE__ */ React.createElement(Trigger, {
     isSearchDisabled: searchDisabled,
-    isError: !!error,
+    isError: error,
     isOpen: isListOpen,
     isDisabled: disabled,
     isItemSelected: !!selected,
@@ -2734,14 +2744,7 @@ const Picker = ({
     onClose: handleOnClose,
     onSelect: handleSelect,
     onSelectAll: handleSelectAll
-  })), error && /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$l}__error`]
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$h[`${baseClass$l}__error__icon`],
-    source: Error2,
-    kind: "error",
-    size: "small"
-  }), error));
+  })));
 };
 const popover = "lc-Popover-module__popover___8X1b2";
 var cssStyles = {
@@ -2871,13 +2874,13 @@ const SIZE_VALUE_FROM_SIZE = {
   large: 56
 };
 const baseClass$k = "progress-circle";
-const ProgressCircle = React.forwardRef((_K, ref) => {
-  var _L = _K, {
+const ProgressCircle = React.forwardRef((_M, ref) => {
+  var _N = _M, {
     status = "normal",
     progressValue,
     className,
     size = "medium"
-  } = _L, restProps = __objRest(_L, [
+  } = _N, restProps = __objRest(_N, [
     "status",
     "progressValue",
     "className",
@@ -2932,13 +2935,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((_M, ref) => {
-  var _N = _M, {
+const ProgressBar = React.forwardRef((_O, ref) => {
+  var _P = _O, {
     status = "normal",
     percent,
     size = "medium",
     className = ""
-  } = _N, restProps = __objRest(_N, [
+  } = _P, restProps = __objRest(_P, [
     "status",
     "percent",
     "size",
@@ -3043,13 +3046,14 @@ const PromoBanner = ({
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
-    size: "large"
+    size: "large",
+    kind: "primary"
   })));
 };
 var styles$b = {
   "radio-button": "lc-RadioButton-module__radio-button___WaToM",
-  "radio-button__label": "lc-RadioButton-module__radio-button__label___i7ygg",
   "radio-button__circle": "lc-RadioButton-module__radio-button__circle___wimWA",
+  "radio-button__label": "lc-RadioButton-module__radio-button__label___i7ygg",
   "radio-button__inner-circle": "lc-RadioButton-module__radio-button__inner-circle___qkRVf",
   "radio-button__text": "lc-RadioButton-module__radio-button__text___mT8c0",
   "radio-button__input": "lc-RadioButton-module__radio-button__input___7OTAK",
@@ -3058,8 +3062,8 @@ var styles$b = {
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
 const baseClass$h = "radio-button";
-const RadioButton = React.forwardRef((_O, ref) => {
-  var _P = _O, { children, className = "", description, checked, disabled } = _P, props = __objRest(_P, ["children", "className", "description", "checked", "disabled"]);
+const RadioButton = React.forwardRef((_Q, ref) => {
+  var _R = _Q, { children, className = "", description, checked, disabled } = _R, props = __objRest(_R, ["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
@@ -3225,8 +3229,8 @@ var styles$9 = {
   switch__icon
 };
 const baseClass$f = "switch";
-const Switch = (_Q) => {
-  var _R = _Q, {
+const Switch = (_S) => {
+  var _T = _S, {
     className = "",
     defaultOn = false,
     disabled = false,
@@ -3237,7 +3241,7 @@ const Switch = (_Q) => {
     state = "regular",
     innerRef,
     ariaLabel
-  } = _R, props = __objRest(_R, [
+  } = _T, props = __objRest(_T, [
     "className",
     "defaultOn",
     "disabled",
@@ -3312,15 +3316,15 @@ var styles$8 = {
   "tab--disabled": "lc-Tab-module__tab--disabled___URdTh"
 };
 const baseClass$e = "tab";
-const Tab = (_S) => {
-  var _T = _S, {
+const Tab = (_U) => {
+  var _V = _U, {
     children,
     className,
     count,
     isSelected,
     asBadge,
     size = "medium"
-  } = _T, restProps = __objRest(_T, [
+  } = _V, restProps = __objRest(_V, [
     "children",
     "className",
     "count",
@@ -3576,11 +3580,12 @@ const EmailTagInput = ({
 const toast = "lc-Toast-module__toast___j5Amn";
 const toast__content = "lc-Toast-module__toast__content___HjaNw";
 const toast__actions = "lc-Toast-module__toast__actions___JWu-1";
+const toast__actions__close = "lc-Toast-module__toast__actions__close___CRPrb";
 var styles$5 = {
   toast,
   toast__content,
   toast__actions,
-  "toast__actions--close": "lc-Toast-module__toast__actions--close___QuXHY",
+  toast__actions__close,
   "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",
@@ -3605,30 +3610,28 @@ var styles$5 = {
 };
 const iconConfig = {
   success: {
-    source: CheckCircleSolid,
-    kind: "inverted"
+    source: CheckCircleSolid
   },
   warning: {
     source: Warning
   },
   error: {
-    source: Block,
-    kind: "inverted"
+    source: Block
   },
   info: {
     source: Info$1
   }
 };
 const baseClass$a = "toast";
-const Toast = (_U) => {
-  var _V = _U, {
+const Toast = (_W) => {
+  var _X = _W, {
     action,
     className,
     children,
     removable,
     kind = "info",
     onClose
-  } = _V, divProps = __objRest(_V, [
+  } = _X, divProps = __objRest(_X, [
     "action",
     "className",
     "children",
@@ -3659,13 +3662,13 @@ const Toast = (_U) => {
     kind: "plain",
     onClick: () => onActionClick(action)
   }, action.label), removable && /* @__PURE__ */ React.createElement("div", {
-    className: styles$5[`${baseClass$a}__actions--close`],
+    className: styles$5[`${baseClass$a}__actions`],
     "aria-label": "Close toast",
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
+    className: styles$5[`${baseClass$a}__actions__close`],
     source: Close,
-    size: "medium",
-    kind: ["warning", "info"].includes(kind) ? "primary" : "inverted"
+    size: "medium"
   }))));
 };
 const ANIMATION_TIME = 200;
@@ -4180,8 +4183,8 @@ var styles$3 = {
   "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
 };
 const baseClass$3 = "textarea";
-const Textarea = React.forwardRef((_W, ref) => {
-  var _X = _W, { className, error } = _X, textareaProps = __objRest(_X, ["className", "error"]);
+const Textarea = React.forwardRef((_Y, ref) => {
+  var _Z = _Y, { className, error } = _Z, textareaProps = __objRest(_Z, ["className", "error"]);
   const { disabled } = textareaProps;
   const [isFocused, setIsFocused] = React.useState(false);
   const mergedClassNames = cx(className, styles$3[baseClass$3], {
@@ -4200,6 +4203,7 @@ const Textarea = React.forwardRef((_W, ref) => {
 var styles$2 = {
   "file-upload-progress": "lc-FileUploadProgress-module__file-upload-progress___xw8h8",
   "file-upload-progress__icon": "lc-FileUploadProgress-module__file-upload-progress__icon___p8Rfz",
+  "file-upload-progress__icon--success": "lc-FileUploadProgress-module__file-upload-progress__icon--success___X40uH",
   "file-upload-progress__wrapper": "lc-FileUploadProgress-module__file-upload-progress__wrapper___01Nkq",
   "file-upload-progress__wrapper--with-icon": "lc-FileUploadProgress-module__file-upload-progress__wrapper--with-icon___GSXmA",
   "file-upload-progress__wrapper__header": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header___mYBGK",
@@ -4252,10 +4256,9 @@ const FileUploadProgress = React.forwardRef(({
   }, icon2 && status !== "success" && /* @__PURE__ */ React.createElement("div", {
     className: styles$2[`${baseClass$1}__icon`]
   }, icon2), status === "success" && /* @__PURE__ */ React.createElement("div", {
-    className: styles$2[`${baseClass$1}__icon`]
+    className: cx(styles$2[`${baseClass$1}__icon`], styles$2[`${baseClass$1}__icon--success`])
   }, /* @__PURE__ */ React.createElement(Icon, {
-    source: Check,
-    kind: "success"
+    source: Check
   })), /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$2[`${baseClass$1}__wrapper`], {
       [styles$2[`${baseClass$1}__wrapper--with-icon`]]: icon2
@@ -4291,6 +4294,8 @@ var styles = {
   "upload-bar__wrapper__header__title": "lc-UploadBar-module__upload-bar__wrapper__header__title___BNuDu",
   "upload-bar__wrapper__header__collapse-button": "lc-UploadBar-module__upload-bar__wrapper__header__collapse-button___3khMy",
   "upload-bar__wrapper__header__actions-container": "lc-UploadBar-module__upload-bar__wrapper__header__actions-container___5Pj4y",
+  "upload-bar__wrapper__header__success-icon": "lc-UploadBar-module__upload-bar__wrapper__header__success-icon___ZLCdw",
+  "upload-bar__wrapper__header__error-icon": "lc-UploadBar-module__upload-bar__wrapper__header__error-icon___q-sZo",
   "upload-bar__files": "lc-UploadBar-module__upload-bar__files___3W4nx",
   "upload-bar__files--enter": "lc-UploadBar-module__upload-bar__files--enter___zGq19",
   "upload-bar__files--enter-active": "lc-UploadBar-module__upload-bar__files--enter-active___-dMVb",
@@ -4308,16 +4313,14 @@ const getHeaderIcon = (status, progressValue) => {
     return /* @__PURE__ */ React.createElement("div", {
       className: styles[`${wrapperHeaderClass}__success-icon`]
     }, /* @__PURE__ */ React.createElement(Icon, {
-      source: Check,
-      kind: "success"
+      source: Check
     }));
   }
   if (status === "error") {
     return /* @__PURE__ */ React.createElement("div", {
       className: styles[`${wrapperHeaderClass}__error-icon`]
     }, /* @__PURE__ */ React.createElement(Icon, {
-      source: Error2,
-      kind: "error"
+      source: Error2
     }));
   }
   return /* @__PURE__ */ React.createElement(ProgressCircle, {