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

package/dist/dsrc.es.js

@@ -35,7 +35,7 @@ var __publicField = (obj, key, value) => {
 };
 import * as React from "react";
 import cx from "clsx";
-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 { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, Check, 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";
@@ -302,7 +302,7 @@ const IconSizeMap = {
     height: 32
   }
 };
-const baseClass$E = "icon";
+const baseClass$F = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
@@ -322,7 +322,7 @@ const Icon = (props) => {
   const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$x[baseClass$E], kind && styles$x[`${baseClass$E}--${disabled ? "disabled--" : ""}${kind}`]);
+  const mergedClassNames = cx(className, styles$x[baseClass$F], kind && styles$x[`${baseClass$F}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -362,7 +362,7 @@ const IconConfig = {
     kind: "error"
   }
 };
-const baseClass$D = "alert";
+const baseClass$E = "alert";
 const Alert = ({
   children,
   className,
@@ -371,7 +371,7 @@ const Alert = ({
 }) => {
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$w[baseClass$D], styles$w[`${baseClass$D}--${kind}`], isSmallContainer && styles$w[`${baseClass$D}--small`], className);
+  const mergedClassNames = cx(styles$w[baseClass$E], styles$w[`${baseClass$E}--${kind}`], isSmallContainer && styles$w[`${baseClass$E}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -386,15 +386,16 @@ const Alert = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$w[`${baseClass$D}__content`]
+    className: styles$w[`${baseClass$E}__content`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
-    className: styles$w[`${baseClass$D}__content-icon`]
+    size: "large",
+    className: styles$w[`${baseClass$E}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$w[`${baseClass$D}__content-text`], onClose && styles$w[`${baseClass$D}__content-text--margin`])
+    className: cx(styles$w[`${baseClass$E}__content-text`], onClose && styles$w[`${baseClass$E}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$w[`${baseClass$D}__close-icon`],
+    className: styles$w[`${baseClass$E}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
@@ -458,7 +459,7 @@ var styles$v = {
   "avatar--xlarge": "lc-Avatar-module__avatar--xlarge___zwgeW",
   "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
 };
-const baseClass$C = "avatar";
+const baseClass$D = "avatar";
 const defaultBackgroundColor = "var(--surface-basic-disabled)";
 const defaultFontColor = "var(--content-subtle)";
 const Avatar = ({
@@ -482,15 +483,15 @@ const Avatar = ({
   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,
+    [styles$v[baseClass$D]]: true,
+    [styles$v[`${baseClass$D}--${shape}`]]: true,
+    [styles$v[`${baseClass$D}--${size}`]]: true,
+    [styles$v[`${baseClass$D}--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 mergedStatusClassNames = cx(styles$v[`${baseClass$D}__status`], styles$v[`${baseClass$D}__status--${shape}`], styles$v[`${baseClass$D}__status--${size}`], styles$v[`${baseClass$D}__status--${status}`]);
+  const mergedIconClassNames = cx(styles$v[`${baseClass$D}__icon`], styles$v[`${baseClass$D}__icon--${size}`]);
+  const mergedRimClassNames = cx(styles$v[`${baseClass$D}__rim`], styles$v[`${baseClass$D}__rim--${size}`]);
   const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
   React.useEffect(() => {
     setShouldDisplayFallbackAvatar(isImproperImageSetup);
@@ -499,20 +500,20 @@ const Avatar = ({
     className: mergedClassNames,
     style: { backgroundColor }
   }, withRim && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$C}__rim`,
+    "data-testid": `${baseClass$D}__rim`,
     className: mergedRimClassNames
   }), status && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$C}__status`,
+    "data-testid": `${baseClass$D}__status`,
     className: mergedStatusClassNames
   }), shouldDisplayImage && /* @__PURE__ */ React.createElement("img", {
-    className: styles$v[`${baseClass$C}__image`],
+    className: styles$v[`${baseClass$D}__image`],
     src,
     alt,
     onError: handleError
   }), shouldDisplayInitials && /* @__PURE__ */ React.createElement("span", {
     style: { color: fontColor }
   }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
-    "data-testid": `${baseClass$C}__icon`,
+    "data-testid": `${baseClass$D}__icon`,
     className: mergedIconClassNames,
     source: Person,
     kind: "primary"
@@ -530,25 +531,37 @@ var styles$u = {
   "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ",
   "badge--tertiary": "lc-Badge-module__badge--tertiary___e83wV"
 };
-const baseClass$B = "badge";
-const Badge = ({
-  children,
-  className,
-  kind = "primary",
-  size = "medium",
-  type = "content"
-}) => {
-  const mergedClassNames = cx(className, styles$u[baseClass$B], styles$u[`${baseClass$B}--${kind}`], styles$u[`${baseClass$B}--${size}`]);
+function formatCount(count, max) {
+  return count > max ? `${max}+` : `${count}`;
+}
+const baseClass$C = "badge";
+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$C], styles$u[`${baseClass$C}--${kind}`], styles$u[`${baseClass$C}--${size}`]);
   const content = {
-    ["content"]: children,
+    ["counter"]: formatCount(count, max),
     ["alert"]: "!",
     ["dot"]: /* @__PURE__ */ React.createElement("span", {
-      className: styles$u[`${baseClass$B}__dot`]
+      className: styles$u[`${baseClass$C}__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";
@@ -564,8 +577,8 @@ var styles$t = {
   rotate,
   loader__label
 };
-const baseClass$A = "loader";
-const spinnerClass = `${baseClass$A}__spinner`;
+const baseClass$B = "loader";
+const spinnerClass = `${baseClass$B}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -574,7 +587,7 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$t[baseClass$A], className)
+    className: cx(styles$t[baseClass$B], className)
   }, /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$t[spinnerClass], styles$t[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
@@ -614,9 +627,9 @@ var styles$s = {
   btn__content,
   btn__icon
 };
-const baseClass$z = "btn";
-const Button = (_e) => {
-  var _f = _e, {
+const baseClass$A = "btn";
+const Button = (_g) => {
+  var _h = _g, {
     loading = false,
     disabled = false,
     type = "button",
@@ -629,7 +642,7 @@ const Button = (_e) => {
     className,
     children,
     href
-  } = _f, props = __objRest(_f, [
+  } = _h, props = __objRest(_h, [
     "loading",
     "disabled",
     "type",
@@ -645,11 +658,11 @@ const Button = (_e) => {
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$s[baseClass$z], styles$s[`${baseClass$z}--${kind}`], styles$s[`${baseClass$z}--${size}`], {
-    [styles$s[`${baseClass$z}--loading`]]: loading,
-    [styles$s[`${baseClass$z}--full-width`]]: fullWidth,
-    [styles$s[`${baseClass$z}--icon-only`]]: !children && icon2,
-    [styles$s[`${baseClass$z}--disabled`]]: isDisabled
+  const mergedClassNames = cx(className, styles$s[baseClass$A], styles$s[`${baseClass$A}--${kind}`], styles$s[`${baseClass$A}--${size}`], {
+    [styles$s[`${baseClass$A}--loading`]]: loading,
+    [styles$s[`${baseClass$A}--full-width`]]: fullWidth,
+    [styles$s[`${baseClass$A}--icon-only`]]: !children && icon2,
+    [styles$s[`${baseClass$A}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
@@ -659,12 +672,12 @@ const Button = (_e) => {
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$s[`${baseClass$z}__loader`]
+    className: styles$s[`${baseClass$A}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$s[`${baseClass$z}__icon`], styles$s[`${baseClass$z}__icon--${iconPosition}`]),
+    className: cx(styles$s[`${baseClass$A}__icon`], styles$s[`${baseClass$A}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$s[`${baseClass$z}__content`]
+    className: styles$s[`${baseClass$A}__content`]
   }, children));
 };
 const btn = "lc-ButtonGroup-module__btn___bXPrU";
@@ -678,9 +691,9 @@ var styles$r = {
 };
 function noop() {
 }
-const baseClass$y = "btn-group";
-const ButtonGroup = (_g) => {
-  var _h = _g, {
+const baseClass$z = "btn-group";
+const ButtonGroup = (_i) => {
+  var _j = _i, {
     size = "medium",
     fullWidth = false,
     onIndexChange = noop,
@@ -688,7 +701,7 @@ const ButtonGroup = (_g) => {
     children,
     currentIndex,
     initialIndex = -1
-  } = _h, restProps = __objRest(_h, [
+  } = _j, restProps = __objRest(_j, [
     "size",
     "fullWidth",
     "onIndexChange",
@@ -697,7 +710,7 @@ const ButtonGroup = (_g) => {
     "currentIndex",
     "initialIndex"
   ]);
-  const mergedClassName = cx(styles$r[baseClass$y], className);
+  const mergedClassName = cx(styles$r[baseClass$z], className);
   const [currentStateIndex, setCurrentStateIndex] = React.useState(initialIndex);
   const isControlled = typeof currentIndex === "number";
   const _currentIndex = isControlled ? currentIndex : currentStateIndex;
@@ -725,51 +738,112 @@ const ButtonGroup = (_g) => {
   })));
 };
 const card = "lc-Card-module__card___GqMm2";
-const card__title = "lc-Card-module__card__title___1YjAR";
-const card__text = "lc-Card-module__card__text___-jYlF";
-const card__img = "lc-Card-module__card__img___teLC8";
+const card__header = "lc-Card-module__card__header___0ptfD";
+const card__header__image = "lc-Card-module__card__header__image___QMwSu";
+const card__header__heading = "lc-Card-module__card__header__heading___Wkikx";
+const card__header__heading__title = "lc-Card-module__card__header__heading__title___Uxi8s";
+const card__header__heading__description = "lc-Card-module__card__header__heading__description___6LnOK";
+const card__content = "lc-Card-module__card__content___KuDcc";
+const card__actions = "lc-Card-module__card__actions___q9sAo";
+const card__actions__line = "lc-Card-module__card__actions__line___TF1bt";
+const card__actions__buttons = "lc-Card-module__card__actions__buttons___PDMMR";
 var styles$q = {
   card,
-  card__title,
-  card__text,
-  card__img
-};
-const Card = (_i) => {
-  var _j = _i, {
-    img,
-    title,
+  card__header,
+  card__header__image,
+  card__header__heading,
+  card__header__heading__title,
+  card__header__heading__description,
+  card__content,
+  "card__expanded-content": "lc-Card-module__card__expanded-content___yB-QL",
+  card__actions,
+  card__actions__line,
+  card__actions__buttons,
+  "card__actions__buttons-expander": "lc-Card-module__card__actions__buttons-expander___lz4h-"
+};
+const baseClass$y = "card";
+const headerClass = `${baseClass$y}__header`;
+const headingClass = `${headerClass}__heading`;
+const actionsClass = `${baseClass$y}__actions`;
+const Card = (_k) => {
+  var _l = _k, {
+    alt,
+    buttonsOptions = [],
     children,
-    className
-  } = _j, restProps = __objRest(_j, [
-    "img",
-    "title",
+    className,
+    description,
+    expandableContent,
+    src,
+    title
+  } = _l, divProps = __objRest(_l, [
+    "alt",
+    "buttonsOptions",
     "children",
-    "className"
+    "className",
+    "description",
+    "expandableContent",
+    "src",
+    "title"
   ]);
-  return /* @__PURE__ */ React.createElement(Text, __spreadValues({
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const expandIcon = isExpanded ? ChevronUp : ChevronDown;
+  const expandButtonText = isExpanded ? "Hide" : "Show more";
+  const shouldShowActionButtons = (buttonsOptions == null ? void 0 : buttonsOptions.length) > 0;
+  const shouldShowExpandAction = !!expandableContent;
+  const shouldShowActions = shouldShowActionButtons || shouldShowExpandAction;
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+    className: cx(styles$q[baseClass$y], className)
+  }, divProps), /* @__PURE__ */ React.createElement("div", {
+    className: styles$q[headerClass]
+  }, src && /* @__PURE__ */ React.createElement("img", {
+    alt,
+    className: styles$q[`${headerClass}__image`],
+    src
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$q[headingClass]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    size: "sm",
+    className: styles$q[`${headingClass}__title`]
+  }, title), /* @__PURE__ */ React.createElement(Text, {
+    size: "sm",
+    className: styles$q[`${headingClass}__description`]
+  }, description))), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: cx(styles$q["card"], className)
-  }, restProps), (img || title) && /* @__PURE__ */ React.createElement(Heading, {
+    className: styles$q[`${baseClass$y}__content`]
+  }, children), isExpanded && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    size: "sm",
-    className: styles$q["card__title"]
-  }, img && /* @__PURE__ */ React.createElement("img", {
-    src: img,
-    className: styles$q["card__img"]
-  }), title && /* @__PURE__ */ React.createElement("div", {
-    className: styles$q["card__text"]
-  }, title)), children);
+    size: "md",
+    className: styles$q[`${baseClass$y}__expanded-content`]
+  }, expandableContent), shouldShowActions && /* @__PURE__ */ React.createElement("div", {
+    className: styles$q[actionsClass]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$q[`${actionsClass}__line`]
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$q[`${actionsClass}__buttons`]
+  }, shouldShowActionButtons && buttonsOptions.map(({ kind, onClick, children: buttonChildren }) => /* @__PURE__ */ React.createElement(Button, {
+    size: "compact",
+    kind,
+    onClick
+  }, buttonChildren)), shouldShowExpandAction && /* @__PURE__ */ React.createElement(Button, {
+    className: styles$q[`${actionsClass}__buttons-expander`],
+    kind: "plain",
+    iconPosition: "right",
+    icon: /* @__PURE__ */ React.createElement(Icon, {
+      source: expandIcon
+    }),
+    onClick: () => setIsExpanded(!isExpanded)
+  }, expandButtonText))));
 };
 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"
   ]);
@@ -800,8 +874,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,
@@ -834,11 +908,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"
   ]);
@@ -856,15 +930,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",
@@ -893,14 +967,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",
@@ -985,13 +1059,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",
@@ -1024,8 +1098,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
@@ -1040,11 +1114,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"
   ]);
@@ -1095,13 +1169,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",
@@ -1141,14 +1215,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",
@@ -1169,13 +1243,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",
@@ -1228,8 +1302,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,
@@ -1239,7 +1313,7 @@ const NumericInput = (_G) => {
     noControls,
     style,
     onChange
-  } = _H, restProps = __objRest(_H, [
+  } = _J, restProps = __objRest(_J, [
     "className",
     "error",
     "value",
@@ -1793,13 +1867,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",
@@ -1854,13 +1928,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",
@@ -1980,8 +2054,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
@@ -2138,26 +2212,26 @@ var styles$6 = {
   "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,
-    loading = false,
     name = baseClass$c,
     on,
     onChange = noop,
     size = "large",
+    state = "regular",
     innerRef
-  } = _P, props = __objRest(_P, [
+  } = _R, props = __objRest(_R, [
     "className",
     "defaultOn",
     "disabled",
-    "loading",
     "name",
     "on",
     "onChange",
     "size",
+    "state",
     "innerRef"
   ]);
   const [checked, setChecked] = React.useState(() => on !== void 0 ? on : defaultOn);
@@ -2166,12 +2240,13 @@ const Switch = (_O) => {
       setChecked(on);
     }
   }, [on]);
+  const isLoading = state === "loading";
+  const isLocked = state === "locked";
   const iconSize = size === "large" ? "small" : "xsmall";
   const toggleStyles = checked ? "on" : "off";
-  const shouldBehaveAsDisabled = disabled || loading;
+  const shouldBehaveAsDisabled = disabled || isLoading || isLocked;
   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) {
@@ -2198,10 +2273,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}`])
-  }, loading && /* @__PURE__ */ React.createElement(Loader, {
+  }, isLoading && /* @__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",
+  }), isLocked && /* @__PURE__ */ React.createElement(Icon, {
+    "data-testid": "lock-icon",
     size: iconSize,
     source: LockBlack,
     kind: "primary"
@@ -2215,13 +2290,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",
@@ -2291,8 +2366,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,
@@ -2303,7 +2378,7 @@ const Tag = (_S) => {
     icon: icon2,
     avatar: avatar2,
     customColor
-  } = _T, restProps = __objRest(_T, [
+  } = _V, restProps = __objRest(_V, [
     "className",
     "children",
     "dismissible",
@@ -2619,15 +2694,15 @@ const iconConfig = {
   }
 };
 const baseClass$6 = "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",