@livechat/design-system-react-components 1.0.0-alpha.11 → 1.0.0-alpha.12

package/dist/dsrc.es.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import cx from "clsx";
-import { Info, Warning, CheckCircleSolid, Block, Close, Check, ChevronUp, ChevronDown, Error as Error2 } from "@livechat/design-system-icons/react/material";
+import { Close, Info, Warning, CheckCircleSolid, Block, Check, ChevronUp, ChevronDown, Search, Error as Error2 } from "@livechat/design-system-icons/react/material";
 import debounce from "lodash.debounce";
 import * as ReactDOM from "react-dom";
 import { usePopper } from "react-popper";
@@ -166,7 +166,7 @@ const DesignTokens = {
   DecorPurple50: "--decor-purple50"
 };
 const caps = "lc-Typography-module__caps___c3eNJ";
-var styles$r = {
+var styles$t = {
   "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",
@@ -183,14 +183,13 @@ var styles$r = {
   "paragraph-xs": "lc-Typography-module__paragraph-xs___OUooD",
   "paragraph-xs--bold": "lc-Typography-module__paragraph-xs--bold___z7om7"
 };
-var sizeToElement = /* @__PURE__ */ ((sizeToElement2) => {
-  sizeToElement2["xl"] = "h1";
-  sizeToElement2["lg"] = "h2";
-  sizeToElement2["md"] = "h3";
-  sizeToElement2["sm"] = "h4";
-  sizeToElement2["xs"] = "h5";
-  return sizeToElement2;
-})(sizeToElement || {});
+const SIZE_TO_ELEMENT_MAP = {
+  xl: "h1",
+  lg: "h2",
+  md: "h3",
+  sm: "h4",
+  xs: "h5"
+};
 const Heading = (_a) => {
   var _b = _a, {
     as,
@@ -203,7 +202,7 @@ const Heading = (_a) => {
     "children",
     "className"
   ]);
-  return React.createElement(as || sizeToElement[size], __spreadValues({ className: cx(styles$r[`heading-${size}`], className) }, props), children);
+  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$t[`heading-${size}`], className) }, props), children);
 };
 const Text = (_c) => {
   var _d = _c, {
@@ -228,15 +227,15 @@ const Text = (_c) => {
   const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
   return React.createElement(as, __spreadValues({
     className: cx({
-      [styles$r[`${baseClassPrefix}`]]: true,
-      [styles$r[`${baseClassPrefix}--bold`]]: bold,
-      [styles$r[`${baseClassPrefix}--strike`]]: strike,
-      [styles$r[`${baseClassPrefix}--underline`]]: underline
+      [styles$t[`${baseClassPrefix}`]]: true,
+      [styles$t[`${baseClassPrefix}--bold`]]: bold,
+      [styles$t[`${baseClassPrefix}--strike`]]: strike,
+      [styles$t[`${baseClassPrefix}--underline`]]: underline
     }, className)
   }, props), children);
 };
 const icon$1 = "lc-Icon-module__icon___tw31R";
-var styles$q = {
+var styles$s = {
   icon: icon$1,
   "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
   "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
@@ -255,95 +254,49 @@ var styles$q = {
   "icon--disabled--warning": "lc-Icon-module__icon--disabled--warning___8ko1e",
   "icon--disabled--error": "lc-Icon-module__icon--disabled--error___9KbVo"
 };
-var IconSizeName = /* @__PURE__ */ ((IconSizeName2) => {
-  IconSizeName2["XSmall"] = "xsmall";
-  IconSizeName2["Small"] = "small";
-  IconSizeName2["Medium"] = "medium";
-  IconSizeName2["Large"] = "large";
-  IconSizeName2["XLarge"] = "xlarge";
-  return IconSizeName2;
-})(IconSizeName || {});
-const IconSize = {
-  ["xsmall"]: {
+const IconSizeMap = {
+  xsmall: {
     width: 12,
     height: 12
   },
-  ["small"]: {
+  small: {
     width: 16,
     height: 16
   },
-  ["medium"]: {
+  medium: {
     width: 20,
     height: 20
   },
-  ["large"]: {
+  large: {
     width: 24,
     height: 24
   },
-  ["xlarge"]: {
+  xlarge: {
     width: 32,
     height: 32
   }
 };
-var IconTypeName = /* @__PURE__ */ ((IconTypeName2) => {
-  IconTypeName2["Primary"] = "primary";
-  IconTypeName2["Subtle"] = "subtle";
-  IconTypeName2["Inverted"] = "inverted";
-  IconTypeName2["InvertedSubtle"] = "inverted_subtle";
-  IconTypeName2["Link"] = "link";
-  IconTypeName2["Success"] = "success";
-  IconTypeName2["Warning"] = "warning";
-  IconTypeName2["Error"] = "error";
-  return IconTypeName2;
-})(IconTypeName || {});
-const IconColorMapper = {
-  ["primary"]: "primary",
-  ["subtle"]: "subtle",
-  ["inverted"]: "inverted",
-  ["inverted_subtle"]: "inverted-subtle",
-  ["link"]: "link",
-  ["success"]: "success",
-  ["warning"]: "warning",
-  ["error"]: "error"
-};
-const IconColorDisabledMapper = {
-  ["primary"]: "disabled--primary",
-  ["subtle"]: "disabled--subtle",
-  ["inverted"]: "disabled--inverted",
-  ["inverted_subtle"]: "disabled--inverted-subtle",
-  ["link"]: "disabled--link",
-  ["success"]: "disabled--success",
-  ["warning"]: "disabled--warning",
-  ["error"]: "disabled--error"
-};
-const baseClass$t = "icon";
+const baseClass$v = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
     size = "medium",
-    iconType,
+    kind,
     disabled,
     className,
     customColor
   } = _a, restProps = __objRest(_a, [
     "source",
     "size",
-    "iconType",
+    "kind",
     "disabled",
     "className",
     "customColor"
   ]);
-  let filledColor;
-  if (iconType) {
-    filledColor = IconColorMapper[iconType];
-    if (disabled) {
-      filledColor = IconColorDisabledMapper[iconType];
-    }
-  }
-  const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSize[size]), {
+  const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$q[baseClass$t], filledColor && styles$q[`${baseClass$t}--${filledColor}`]);
+  const mergedClassNames = cx(className, styles$s[baseClass$v], kind && styles$s[`${baseClass$v}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -351,7 +304,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$p = {
+var styles$r = {
   alert,
   alert__content,
   "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
@@ -366,33 +319,33 @@ var styles$p = {
   alert__icon
 };
 const IconConfig$1 = {
-  ["info"]: {
+  info: {
     source: Info,
-    iconType: IconTypeName.Link
+    kind: "link"
   },
-  ["warning"]: {
+  warning: {
     source: Warning,
-    iconType: IconTypeName.Warning
+    kind: "warning"
   },
-  ["success"]: {
+  success: {
     source: CheckCircleSolid,
-    iconType: IconTypeName.Success
+    kind: "success"
   },
-  ["error"]: {
+  error: {
     source: Block,
-    iconType: IconTypeName.Error
+    kind: "error"
   }
 };
-const baseClass$s = "alert";
+const baseClass$u = "alert";
 const Alert = ({
   children,
   className,
-  type = "info",
+  kind = "info",
   onClose
 }) => {
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$p[baseClass$s], styles$p[`${baseClass$s}--${type}`], isSmallContainer && styles$p[`${baseClass$s}--small`], className);
+  const mergedClassNames = cx(styles$r[baseClass$u], styles$r[`${baseClass$u}--${kind}`], isSmallContainer && styles$r[`${baseClass$u}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -407,24 +360,24 @@ const Alert = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$p[`${baseClass$s}__content`]
-  }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig$1[type]), {
-    className: styles$p[`${baseClass$s}__content-icon`]
+    className: styles$r[`${baseClass$u}__content`]
+  }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig$1[kind]), {
+    className: styles$r[`${baseClass$u}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$p[`${baseClass$s}__content-text`], onClose && styles$p[`${baseClass$s}__content-text--margin`])
+    className: cx(styles$r[`${baseClass$u}__content-text`], onClose && styles$r[`${baseClass$u}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$p[`${baseClass$s}__close-icon`],
+    className: styles$r[`${baseClass$u}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
-    size: IconSizeName.Large,
-    iconType: IconTypeName.Primary
+    size: "large",
+    kind: "primary"
   })));
 };
 const badge = "lc-Badge-module__badge___GhLnu";
-var styles$o = {
+var styles$q = {
   badge,
   "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ"
 };
@@ -434,8 +387,8 @@ const Badge = ({
   secondary = false
 }) => {
   return /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$o.badge, className, {
-      [styles$o["badge--secondary"]]: secondary
+    className: cx(styles$q.badge, className, {
+      [styles$q["badge--secondary"]]: secondary
     })
   }, children);
 };
@@ -443,7 +396,7 @@ const loader = "lc-Loader-module__loader___LRflD";
 const loader__spinner = "lc-Loader-module__loader__spinner___l3C1g";
 const rotate = "lc-Loader-module__rotate___Tlni-";
 const loader__label = "lc-Loader-module__loader__label___R74f6";
-var styles$n = {
+var styles$p = {
   loader,
   loader__spinner,
   "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
@@ -453,8 +406,8 @@ var styles$n = {
   rotate,
   loader__label
 };
-const baseClass$r = "loader";
-const spinnerClass = `${baseClass$r}__spinner`;
+const baseClass$t = "loader";
+const spinnerClass = `${baseClass$t}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -463,11 +416,11 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$n[baseClass$r], className)
+    className: cx(styles$p[baseClass$t], className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$n[spinnerClass], styles$n[`${spinnerClass}--${size}`])
+    className: cx(styles$p[spinnerClass], styles$p[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$n["loader__spinner-circle"],
+    className: styles$p["loader__spinner-circle"],
     style: {
       borderColor: secondaryColor,
       borderTopColor: primaryColor
@@ -475,14 +428,14 @@ const Loader = ({
   })), label && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$n["loader__label"]
+    className: styles$p["loader__label"]
   }, label));
 };
 const btn$1 = "lc-Button-module__btn___aijZJ";
 const btn__loader = "lc-Button-module__btn__loader___c8zZz";
 const btn__content = "lc-Button-module__btn__content___wefl2";
 const btn__icon = "lc-Button-module__btn__icon___GVExB";
-var styles$m = {
+var styles$o = {
   btn: btn$1,
   "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
   "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
@@ -503,7 +456,7 @@ var styles$m = {
   btn__content,
   btn__icon
 };
-const baseClass$q = "btn";
+const baseClass$s = "btn";
 const Button = (_e) => {
   var _f = _e, {
     loading = false,
@@ -534,11 +487,11 @@ const Button = (_e) => {
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$m[baseClass$q], styles$m[`${baseClass$q}--${kind}`], styles$m[`${baseClass$q}--${size}`], {
-    [styles$m[`${baseClass$q}--loading`]]: loading,
-    [styles$m[`${baseClass$q}--full-width`]]: fullWidth,
-    [styles$m[`${baseClass$q}--icon-only`]]: !children && icon2,
-    [styles$m[`${baseClass$q}--disabled`]]: isDisabled
+  const mergedClassNames = cx(className, styles$o[baseClass$s], styles$o[`${baseClass$s}--${kind}`], styles$o[`${baseClass$s}--${size}`], {
+    [styles$o[`${baseClass$s}--loading`]]: loading,
+    [styles$o[`${baseClass$s}--full-width`]]: fullWidth,
+    [styles$o[`${baseClass$s}--icon-only`]]: !children && icon2,
+    [styles$o[`${baseClass$s}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
@@ -548,16 +501,16 @@ const Button = (_e) => {
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$m[`${baseClass$q}__loader`]
+    className: styles$o[`${baseClass$s}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$m[`${baseClass$q}__icon`], styles$m[`${baseClass$q}__icon--${iconPosition}`]),
+    className: cx(styles$o[`${baseClass$s}__icon`], styles$o[`${baseClass$s}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$m[`${baseClass$q}__content`]
+    className: styles$o[`${baseClass$s}__content`]
   }, children));
 };
 const btn = "lc-ButtonGroup-module__btn___bXPrU";
-var styles$l = {
+var styles$n = {
   "btn-group": "lc-ButtonGroup-module__btn-group___R-lZQ",
   btn,
   "btn--active": "lc-ButtonGroup-module__btn--active___VAc37",
@@ -567,7 +520,7 @@ var styles$l = {
 };
 function noop() {
 }
-const baseClass$p = "btn-group";
+const baseClass$r = "btn-group";
 const ButtonGroup = (_g) => {
   var _h = _g, {
     size = "medium",
@@ -586,7 +539,7 @@ const ButtonGroup = (_g) => {
     "currentIndex",
     "initialIndex"
   ]);
-  const mergedClassName = cx(styles$l[baseClass$p], className);
+  const mergedClassName = cx(styles$n[baseClass$r], className);
   const [currentStateIndex, setCurrentStateIndex] = React.useState(initialIndex);
   const isControlled = typeof currentIndex === "number";
   const _currentIndex = isControlled ? currentIndex : currentStateIndex;
@@ -610,14 +563,14 @@ const ButtonGroup = (_g) => {
         child.props.onClick(event);
       }
     },
-    className: cx(styles$l["btn"], styles$l[`btn--${size}`], i === _currentIndex && styles$l["btn--active"])
+    className: cx(styles$n["btn"], styles$n[`btn--${size}`], i === _currentIndex && styles$n["btn--active"])
   })));
 };
 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";
-var styles$k = {
+var styles$m = {
   card,
   card__title,
   card__text,
@@ -638,16 +591,16 @@ const Card = (_i) => {
   return /* @__PURE__ */ React.createElement(Text, __spreadValues({
     as: "div",
     size: "md",
-    className: cx(styles$k["card"], className)
+    className: cx(styles$m["card"], className)
   }, restProps), (img || title) && /* @__PURE__ */ React.createElement(Heading, {
     as: "div",
     size: "sm",
-    className: styles$k["card__title"]
+    className: styles$m["card__title"]
   }, img && /* @__PURE__ */ React.createElement("img", {
     src: img,
-    className: styles$k["card__img"]
+    className: styles$m["card__img"]
   }), title && /* @__PURE__ */ React.createElement("div", {
-    className: styles$k["card__text"]
+    className: styles$m["card__text"]
   }, title)), children);
 };
 const checkbox = "lc-Checkbox-module__checkbox___G7nTf";
@@ -657,7 +610,7 @@ const checkbox__checkmark = "lc-Checkbox-module__checkbox__checkmark___16pfY";
 const checkbox__input = "lc-Checkbox-module__checkbox__input___YLbVF";
 const checkbox__text = "lc-Checkbox-module__checkbox__text___P2SIq";
 const checkbox__helper = "lc-Checkbox-module__checkbox__helper___YSJ-n";
-var styles$j = {
+var styles$l = {
   checkbox,
   checkbox__label,
   checkbox__square,
@@ -668,30 +621,30 @@ var styles$j = {
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
-const baseClass$o = "checkbox";
+const baseClass$q = "checkbox";
 const Checkbox = (_k) => {
   var _l = _k, {
     className = ""
   } = _l, props = __objRest(_l, [
     "className"
   ]);
-  const mergedClassNames = cx(styles$j[`${baseClass$o}__square`], className);
+  const mergedClassNames = cx(styles$l[`${baseClass$q}__square`], className);
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
-    className: styles$j[`${baseClass$o}__input`],
+    className: styles$l[`${baseClass$q}__input`],
     type: "checkbox"
   })), /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Check,
-    iconType: IconTypeName.Inverted,
-    size: IconSizeName.XSmall,
-    className: styles$j[`${baseClass$o}__checkmark`]
+    kind: "inverted",
+    size: "xsmall",
+    className: styles$l[`${baseClass$q}__checkmark`]
   })));
 };
-var styles$i = {
+var styles$k = {
   "field-description": "lc-FieldDescription-module__field-description___IcRDH"
 };
-const baseClass$n = "field-description";
+const baseClass$p = "field-description";
 const FieldDescription = (_m) => {
   var _n = _m, {
     children,
@@ -700,7 +653,7 @@ const FieldDescription = (_m) => {
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$i[baseClass$n], className);
+  const mergedClassNames = cx(styles$k[baseClass$p], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -708,7 +661,7 @@ const FieldDescription = (_m) => {
     className: mergedClassNames
   }), children);
 };
-const baseClass$m = "checkbox";
+const baseClass$o = "checkbox";
 const CheckboxField = (_o) => {
   var _p = _o, {
     children,
@@ -723,29 +676,29 @@ const CheckboxField = (_o) => {
     "checked",
     "disabled"
   ]);
-  const mergedClassNames = cx(styles$j[baseClass$m], className, {
-    [styles$j[`${baseClass$m}--selected`]]: checked,
-    [styles$j[`${baseClass$m}--disabled`]]: disabled
+  const mergedClassNames = cx(styles$l[baseClass$o], className, {
+    [styles$l[`${baseClass$o}--selected`]]: checked,
+    [styles$l[`${baseClass$o}--disabled`]]: disabled
   });
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$j[`${baseClass$m}__label`]
+    className: styles$l[`${baseClass$o}__label`]
   }, /* @__PURE__ */ React.createElement(Checkbox, __spreadProps(__spreadValues({}, props), {
     checked,
     disabled
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$j[`${baseClass$m}__text`]
+    className: styles$l[`${baseClass$o}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$j[`${baseClass$m}__helper`]
+    className: styles$l[`${baseClass$o}__helper`]
   }, description));
 };
-var styles$h = {
+var styles$j = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
-const baseClass$l = "field-error";
+const baseClass$n = "field-error";
 const FieldError = (_q) => {
   var _r = _q, {
     children,
@@ -754,7 +707,7 @@ const FieldError = (_q) => {
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$h[baseClass$l], className);
+  const mergedClassNames = cx(styles$j[baseClass$n], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -762,12 +715,12 @@ const FieldError = (_q) => {
     className: mergedClassNames
   }), children);
 };
-var styles$g = {
+var styles$i = {
   "field-group": "lc-FieldGroup-module__field-group___gy8lp",
   "field-group--inline": "lc-FieldGroup-module__field-group--inline___or4qf",
   "field-group--stretched": "lc-FieldGroup-module__field-group--stretched___6rkuO"
 };
-const baseClass$k = "field-group";
+const baseClass$m = "field-group";
 const FieldGroup = (_s) => {
   var _t = _s, {
     className = "",
@@ -784,9 +737,9 @@ const FieldGroup = (_s) => {
     "inline",
     "stretch"
   ]);
-  const mergedClassNames = cx(styles$g[baseClass$k], className, {
-    [styles$g[`${baseClass$k}--inline`]]: inline,
-    [styles$g[`${baseClass$k}--stretched`]]: stretch
+  const mergedClassNames = cx(styles$i[baseClass$m], className, {
+    [styles$i[`${baseClass$m}--inline`]]: inline,
+    [styles$i[`${baseClass$m}--stretched`]]: stretch
   });
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: mergedClassNames
@@ -797,14 +750,14 @@ const form__header = "lc-Form-module__form__header___U4B7t";
 const form__footer = "lc-Form-module__form__footer___1-sUX";
 const form__label = "lc-Form-module__form__label___spg-J";
 const form__helper = "lc-Form-module__form__helper___bhfwS";
-var styles$f = {
+var styles$h = {
   form,
   form__header,
   form__footer,
   form__label,
   form__helper
 };
-const baseClass$j = "form";
+const baseClass$l = "form";
 const Form = (_u) => {
   var _v = _u, {
     className,
@@ -820,27 +773,27 @@ const Form = (_u) => {
     "formFooter"
   ]);
   return /* @__PURE__ */ React.createElement("form", __spreadValues({
-    className: cx(styles$f[baseClass$j], className)
+    className: cx(styles$h[baseClass$l], className)
   }, restProps), (labelText || helperText) && /* @__PURE__ */ React.createElement("div", {
-    className: styles$f[`${baseClass$j}__header`]
+    className: styles$h[`${baseClass$l}__header`]
   }, labelText && /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$f[`${baseClass$j}__label`]
+    className: styles$h[`${baseClass$l}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "p",
     size: "sm",
-    className: styles$f[`${baseClass$j}__helper`]
+    className: styles$h[`${baseClass$l}__helper`]
   }, helperText)), children, formFooter && /* @__PURE__ */ React.createElement("div", {
-    className: styles$f[`${baseClass$j}__footer`]
+    className: styles$h[`${baseClass$l}__footer`]
   }, formFooter));
 };
-var styles$e = {
+var styles$g = {
   "form-group": "lc-FormGroup-module__form-group___e2JHa",
   "form-group__header": "lc-FormGroup-module__form-group__header___DgGmR",
   "form-group__label": "lc-FormGroup-module__form-group__label___NC-JW",
   "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
 };
-const baseClass$i = "form-group";
+const baseClass$k = "form-group";
 const FormGroup = (_w) => {
   var _x = _w, {
     className = "",
@@ -853,24 +806,24 @@ const FormGroup = (_w) => {
     "labelText",
     "helperText"
   ]);
-  const mergedClassNames = cx(styles$e[baseClass$i], className);
+  const mergedClassNames = cx(styles$g[baseClass$k], className);
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
     role: "group"
   }), labelText && { "aria-label": labelText }), {
     className: mergedClassNames
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$e[`${baseClass$i}__header`]
+    className: styles$g[`${baseClass$k}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     as: "div",
     size: "sm",
-    className: styles$e[`${baseClass$i}__label`]
+    className: styles$g[`${baseClass$k}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "sm",
-    className: styles$e[`${baseClass$i}__helper`]
+    className: styles$g[`${baseClass$k}__helper`]
   }, helperText)), children);
 };
-var styles$d = {
+var styles$f = {
   "text-field": "lc-TextField-module__text-field___bis8c",
   "text-field--inline": "lc-TextField-module__text-field--inline___MPHqg",
   "text-field__wrapper--inline": "lc-TextField-module__text-field__wrapper--inline___-gOob",
@@ -885,7 +838,7 @@ var styles$d = {
   "text-field__content": "lc-TextField-module__text-field__content___dCkUW",
   "field-label": "lc-TextField-module__field-label___q8Y-p"
 };
-const baseClass$h = "text-field";
+const baseClass$j = "text-field";
 const TextField = ({
   inline,
   error,
@@ -897,21 +850,21 @@ const TextField = ({
   children,
   labelRightNode
 }) => {
-  const mergedClassNames = cx(styles$d[baseClass$h], {
-    [styles$d[`${baseClass$h}--inline`]]: inline
+  const mergedClassNames = cx(styles$f[baseClass$j], {
+    [styles$f[`${baseClass$j}--inline`]]: inline
   }, className);
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, labelRightNode && inline && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label-right-node`], styles$d[`${baseClass$h}__label-right-node--inline`])
+    className: cx(styles$f[`${baseClass$j}__label-right-node`], styles$f[`${baseClass$j}__label-right-node--inline`])
   }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
-    className: styles$d[`${baseClass$h}__row-break`]
+    className: styles$f[`${baseClass$j}__row-break`]
   })), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__wrapper`], inline && styles$d[`${baseClass$h}__wrapper--inline`])
+    className: cx(styles$f[`${baseClass$j}__wrapper`], inline && styles$f[`${baseClass$j}__wrapper--inline`])
   }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label`], inline && styles$d[`${baseClass$h}__label--inline`], !labelText && styles$d[`${baseClass$h}__label--no-text`])
+    className: cx(styles$f[`${baseClass$j}__label`], inline && styles$f[`${baseClass$j}__label--inline`], !labelText && styles$f[`${baseClass$j}__label--no-text`])
   }, labelText && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label-wrapper`])
+    className: cx(styles$f[`${baseClass$j}__label-wrapper`])
   }, /* @__PURE__ */ React.createElement("label", {
     className: "lc-field-label",
     htmlFor: labelFor
@@ -919,18 +872,18 @@ const TextField = ({
     as: "span",
     size: "sm"
   }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label-adornment`])
+    className: cx(styles$f[`${baseClass$j}__label-adornment`])
   }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label-right-node`])
+    className: cx(styles$f[`${baseClass$j}__label-right-node`])
   }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__content`])
+    className: cx(styles$f[`${baseClass$j}__content`])
   }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
 };
-var styles$c = {
+var styles$e = {
   "input-field": "lc-InputField-module__input-field___A-GHj",
   "input-field--error": "lc-InputField-module__input-field--error___MMchC"
 };
-const baseClass$g = "input-field";
+const baseClass$i = "input-field";
 const InputField = React.forwardRef((_y, ref) => {
   var _z = _y, {
     id,
@@ -957,8 +910,8 @@ const InputField = React.forwardRef((_y, ref) => {
     "style",
     "type"
   ]);
-  const mergedClassNames = cx(styles$c[baseClass$g], {
-    [styles$c[`${baseClass$g}--error`]]: error
+  const mergedClassNames = cx(styles$e[baseClass$i], {
+    [styles$e[`${baseClass$i}--error`]]: error
   }, fieldClassName);
   return /* @__PURE__ */ React.createElement(TextField, {
     inline,
@@ -978,11 +931,11 @@ const InputField = React.forwardRef((_y, ref) => {
   })));
 });
 const link = "lc-Link-module__link___kqx52";
-var styles$b = {
+var styles$d = {
   link,
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
-const baseClass$f = "link";
+const baseClass$h = "link";
 const Link = (_A) => {
   var _B = _A, {
     bold = false,
@@ -992,14 +945,14 @@ const Link = (_A) => {
     "className"
   ]);
   return /* @__PURE__ */ React.createElement("a", __spreadValues({
-    className: cx(styles$b[baseClass$f], bold && styles$b[`${baseClass$f}--bold`], className)
+    className: cx(styles$d[baseClass$h], bold && styles$d[`${baseClass$h}--bold`], className)
   }, rest));
 };
 const modal__header = "lc-Modal-module__modal__header___Fp5VE";
 const modal__heading = "lc-Modal-module__modal__heading___G9KVK";
 const modal__body = "lc-Modal-module__modal__body___M-jmN";
 const modal__footer = "lc-Modal-module__modal__footer___2LYdc";
-var styles$a = {
+var styles$c = {
   "modal-base": "lc-Modal-module__modal-base___hbL1U",
   "modal-base__overlay": "lc-Modal-module__modal-base__overlay___kCQ8t",
   "modal-base__overlay--visible": "lc-Modal-module__modal-base__overlay--visible___zUNJL",
@@ -1018,12 +971,12 @@ const ModalCloseButton = ({
   onClick
 }) => /* @__PURE__ */ React.createElement("button", {
   title: "Close modal",
-  className: styles$a["modal-base__close"],
+  className: styles$c["modal-base__close"],
   onClick,
   type: "button"
 }, /* @__PURE__ */ React.createElement(Icon, {
   source: Close,
-  size: IconSizeName.Large
+  size: "large"
 }));
 const KeyCodes = {
   esc: "Escape",
@@ -1037,7 +990,7 @@ const KeyCodes = {
   arrowUp: "ArrowUp",
   arrowDown: "ArrowDown"
 };
-const baseClass$e = "modal-base";
+const baseClass$g = "modal-base";
 const ModalBase = (_C) => {
   var _D = _C, {
     children,
@@ -1050,7 +1003,7 @@ const ModalBase = (_C) => {
     "onClose",
     "closeOnEscPress"
   ]);
-  const mergedClassNames = cx(styles$a[baseClass$e], className);
+  const mergedClassNames = cx(styles$c[baseClass$g], className);
   React.useEffect(() => {
     if (!closeOnEscPress) {
       return;
@@ -1076,14 +1029,14 @@ const ModalBase = (_C) => {
   return /* @__PURE__ */ React.createElement("div", {
     "data-testid": "lc-modal-overlay",
     onMouseDown: onOverlayClick,
-    className: cx(styles$a[`${baseClass$e}__overlay`], styles$a[`${baseClass$e}__overlay--visible`])
+    className: cx(styles$c[`${baseClass$g}__overlay`], styles$c[`${baseClass$g}__overlay--visible`])
   }, /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: mergedClassNames
   }, props), /* @__PURE__ */ React.createElement(ModalCloseButton, {
     onClick: onCloseButtonClick
   }), children));
 };
-const baseClass$d = "action-modal";
+const baseClass$f = "action-modal";
 const ActionModal = (_E) => {
   var _F = _E, {
     children,
@@ -1098,20 +1051,20 @@ const ActionModal = (_E) => {
     "heading",
     "actions"
   ]);
-  const mergedClassNames = cx(styles$a[baseClass$d], className);
+  const mergedClassNames = cx(styles$c[baseClass$f], className);
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
     className: mergedClassNames
   }, props), icon2 && /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$d}__icon`]
+    className: styles$c[`${baseClass$f}__icon`]
   }, icon2), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$d}__heading`]
+    className: styles$c[`${baseClass$f}__heading`]
   }, heading), /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$d}__content`]
+    className: styles$c[`${baseClass$f}__content`]
   }, children), actions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$d}__actions`]
+    className: styles$c[`${baseClass$f}__actions`]
   }, actions));
 };
-const baseClass$c = "modal";
+const baseClass$e = "modal";
 const Modal = (_G) => {
   var _H = _G, {
     children,
@@ -1124,19 +1077,19 @@ const Modal = (_G) => {
     "heading",
     "footer"
   ]);
-  const mergedClassNames = cx(styles$a[baseClass$c], className);
+  const mergedClassNames = cx(styles$c[baseClass$e], className);
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
     className: mergedClassNames
   }, props), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$c}__header`]
+    className: styles$c[`${baseClass$e}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
     as: "div",
-    className: styles$a[`${baseClass$c}__heading`]
+    className: styles$c[`${baseClass$e}__heading`]
   }, heading)), /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$c}__body`]
+    className: styles$c[`${baseClass$e}__body`]
   }, children), footer && /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$c}__footer`]
+    className: styles$c[`${baseClass$e}__footer`]
   }, footer));
 };
 const ModalPortal = ({
@@ -1159,10 +1112,10 @@ const ModalPortal = ({
       var _a2;
       (_a2 = document.querySelector(parentElementName)) == null ? void 0 : _a2.removeChild(container);
     };
-  }, []);
+  }, [parentElementName]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, ReactDOM.createPortal(children, container));
 };
-var styles$9 = {
+var styles$b = {
   "numeric-input": "lc-NumericInput-module__numeric-input___j1esc",
   "numeric-input__increment": "lc-NumericInput-module__numeric-input__increment___i3Tys",
   "numeric-input__decrement": "lc-NumericInput-module__numeric-input__decrement___3qgn0",
@@ -1170,7 +1123,7 @@ var styles$9 = {
   "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
-const baseClass$b = "numeric-input";
+const baseClass$d = "numeric-input";
 const NumericInput = (_I) => {
   var _J = _I, {
     className,
@@ -1194,10 +1147,10 @@ const NumericInput = (_I) => {
     "onChange"
   ]);
   const inputRef = React.useRef(null);
-  const mergedClassNames = cx(styles$9[baseClass$b], {
-    [styles$9[`${baseClass$b}--error`]]: error,
-    [styles$9[`${baseClass$b}--no-controls`]]: noControls,
-    [styles$9[`${baseClass$b}--disabled`]]: disabled
+  const mergedClassNames = cx(styles$b[baseClass$d], {
+    [styles$b[`${baseClass$d}--error`]]: error,
+    [styles$b[`${baseClass$d}--no-controls`]]: noControls,
+    [styles$b[`${baseClass$d}--disabled`]]: disabled
   }, className);
   const callOnChange = (val) => onChange(String(val));
   const calcValue = (val) => {
@@ -1262,22 +1215,22 @@ const NumericInput = (_I) => {
     disabled: disabled || hasReachedTheLimit(value, max),
     onClick: handleIncrementClick,
     "aria-label": "Increment value",
-    className: styles$9[`${baseClass$b}__increment`],
+    className: styles$b[`${baseClass$d}__increment`],
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: ChevronUp,
     disabled: disabled || hasReachedTheLimit(value, max),
-    iconType: IconTypeName.Primary
+    kind: "primary"
   })), /* @__PURE__ */ React.createElement("button", {
     tabIndex: -1,
     disabled: disabled || hasReachedTheLimit(value, min),
     "aria-label": "Decrement value",
-    className: styles$9[`${baseClass$b}__decrement`],
+    className: styles$b[`${baseClass$d}__decrement`],
     onClick: handleDecrementClick,
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: ChevronDown,
-    iconType: IconTypeName.Primary,
+    kind: "primary",
     disabled: disabled || hasReachedTheLimit(value, min)
   }))));
 };
@@ -1404,18 +1357,6 @@ const Popover = (props) => {
     style: styles2.popper
   }, attributes.popper), children));
 };
-var ProgressStatus = /* @__PURE__ */ ((ProgressStatus2) => {
-  ProgressStatus2["Normal"] = "normal";
-  ProgressStatus2["Error"] = "error";
-  ProgressStatus2["Success"] = "success";
-  return ProgressStatus2;
-})(ProgressStatus || {});
-var ProgressSize = /* @__PURE__ */ ((ProgressSize2) => {
-  ProgressSize2["Small"] = "small";
-  ProgressSize2["Medium"] = "medium";
-  ProgressSize2["Large"] = "large";
-  return ProgressSize2;
-})(ProgressSize || {});
 const PROGRESS_STATUSES = [
   "normal",
   "error",
@@ -1423,18 +1364,18 @@ const PROGRESS_STATUSES = [
 ];
 const clampPercentage = (percent) => Math.min(Math.max(percent, 0), 100);
 function getPercentNumber(status, percent = 0) {
-  if (status === ProgressStatus.Error) {
+  if (status === "error") {
     return 0;
   }
   return clampPercentage(parseInt(percent.toString(), 10));
 }
 function getProgressStatus(status, percent) {
   if (!PROGRESS_STATUSES.includes(status) && percent >= 100) {
-    return ProgressStatus.Normal;
+    return "normal";
   }
-  return status || ProgressStatus.Normal;
+  return status || "normal";
 }
-var styles$8 = {
+var styles$a = {
   "progress-circle": "lc-ProgressCircle-module__progress-circle___NRHCi",
   "progress-circle--small": "lc-ProgressCircle-module__progress-circle--small___8FVwG",
   "progress-circle--medium": "lc-ProgressCircle-module__progress-circle--medium___XlzEX",
@@ -1451,37 +1392,25 @@ var styles$8 = {
   "progress-circle--normal": "lc-ProgressCircle-module__progress-circle--normal___dFneQ"
 };
 const THICKNESS_FROM_SIZE = {
-  [ProgressSize.Small]: 2,
-  [ProgressSize.Medium]: 3,
-  [ProgressSize.Large]: 4
+  small: 2,
+  medium: 3,
+  large: 4
 };
 const SIZE_VALUE_FROM_SIZE = {
-  [ProgressSize.Small]: 15,
-  [ProgressSize.Medium]: 36,
-  [ProgressSize.Large]: 56
+  small: 15,
+  medium: 36,
+  large: 56
 };
-const baseClass$a = "progress-circle";
+const baseClass$c = "progress-circle";
 const ProgressCircle = React.forwardRef((_M, ref) => {
-  var _N = _M, {
-    status = ProgressStatus.Normal,
-    percent,
-    className,
-    size = ProgressSize.Medium
-  } = _N, restProps = __objRest(_N, [
-    "status",
-    "percent",
-    "className",
-    "size"
-  ]);
+  var _N = _M, { status = "normal", percent, className, size = "medium" } = _N, restProps = __objRest(_N, ["status", "percent", "className", "size"]);
   const progressStatus = getProgressStatus(status, percent);
   const percentNumber = getPercentNumber(progressStatus, percent);
   const thickness = THICKNESS_FROM_SIZE[size];
   const sizeValue = SIZE_VALUE_FROM_SIZE[size];
-  const mergedClassNames = cx(styles$8[baseClass$a], {
-    [styles$8[`${baseClass$a}--${size}`]]: size,
-    [styles$8[`${baseClass$a}--error`]]: progressStatus === ProgressStatus.Error,
-    [styles$8[`${baseClass$a}--success`]]: progressStatus === ProgressStatus.Success,
-    [styles$8[`${baseClass$a}--normal`]]: progressStatus === ProgressStatus.Normal
+  const mergedClassNames = cx(styles$a[baseClass$c], {
+    [styles$a[`${baseClass$c}--${size}`]]: size,
+    [styles$a[`${baseClass$c}--${status}`]]: status
   }, className);
   const circumference = 2 * Math.PI * ((sizeValue - thickness) / 2);
   const indicatorStyle = {
@@ -1496,14 +1425,14 @@ const ProgressCircle = React.forwardRef((_M, ref) => {
   }, restProps), /* @__PURE__ */ React.createElement("svg", {
     viewBox: svgViewBox
   }, /* @__PURE__ */ React.createElement("circle", {
-    className: styles$8[`${baseClass$a}__bg-line--${status}`],
+    className: styles$a[`${baseClass$c}__bg-line--${status}`],
     cx: sizeValue,
     cy: sizeValue,
     r: (sizeValue - thickness) / 2,
     fill: "none",
     strokeWidth: thickness
   }), /* @__PURE__ */ React.createElement("circle", {
-    className: styles$8[`${baseClass$a}__indicator--${status}`],
+    className: styles$a[`${baseClass$c}__indicator--${status}`],
     style: indicatorStyle,
     cx: sizeValue,
     cy: sizeValue,
@@ -1512,7 +1441,46 @@ const ProgressCircle = React.forwardRef((_M, ref) => {
     strokeWidth: thickness
   })));
 });
-var styles$7 = {
+var styles$9 = {
+  "progress-bar": "lc-ProgressBar-module__progress-bar___3pa3d",
+  "progress-bar--small": "lc-ProgressBar-module__progress-bar--small___7nQKx",
+  "progress-bar--medium": "lc-ProgressBar-module__progress-bar--medium___cM44p",
+  "progress-bar--large": "lc-ProgressBar-module__progress-bar--large___UlzNR",
+  "progress-bar--error": "lc-ProgressBar-module__progress-bar--error___MulqI",
+  "progress-bar--success": "lc-ProgressBar-module__progress-bar--success___p7nB-",
+  "progress-bar--normal": "lc-ProgressBar-module__progress-bar--normal___ZwCb-",
+  "progress-bar__indicator--success": "lc-ProgressBar-module__progress-bar__indicator--success___wRjR3",
+  "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
+};
+const baseClass$b = "progress-bar";
+const ProgressBar = React.forwardRef((_O, ref) => {
+  var _P = _O, {
+    status = "normal",
+    percent,
+    size = "medium",
+    className = ""
+  } = _P, restProps = __objRest(_P, [
+    "status",
+    "percent",
+    "size",
+    "className"
+  ]);
+  const progressStatus = getProgressStatus(status, percent);
+  const percentNumber = getPercentNumber(progressStatus, percent);
+  const mergedClassNames = cx(styles$9[baseClass$b], {
+    [styles$9[`${baseClass$b}--${size}`]]: size,
+    [styles$9[`${baseClass$b}--${status}`]]: status
+  }, className);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, restProps), {
+    className: mergedClassNames,
+    ref,
+    role: "progressbar"
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$9[`${baseClass$b}__indicator--${status}`],
+    style: { width: `${percentNumber}%` }
+  }));
+});
+var styles$8 = {
   "promo-banner": "lc-PromoBanner-module__promo-banner___-mGpq",
   "promo-banner__content": "lc-PromoBanner-module__promo-banner__content___kRWar",
   "promo-banner__wrapper": "lc-PromoBanner-module__promo-banner__wrapper___I-8cl",
@@ -1520,13 +1488,15 @@ var styles$7 = {
   "promo-banner__img": "lc-PromoBanner-module__promo-banner__img___eaShb",
   "promo-banner__button-text": "lc-PromoBanner-module__promo-banner__button-text___taYKa",
   "promo-banner--light": "lc-PromoBanner-module__promo-banner--light___eJxOR",
-  "promo-banner--small": "lc-PromoBanner-module__promo-banner--small___7sWLV",
   "promo-banner__footer": "lc-PromoBanner-module__promo-banner__footer___8OjvH",
-  "promo-banner--medium": "lc-PromoBanner-module__promo-banner--medium___NeeoJ",
+  "promo-banner--small": "lc-PromoBanner-module__promo-banner--small___7sWLV",
   "promo-banner--large": "lc-PromoBanner-module__promo-banner--large___pMiCU",
   "promo-banner__close-icon": "lc-PromoBanner-module__promo-banner__close-icon___GowBL"
 };
-const baseClass$9 = "promo-banner";
+const SMALL_CONTAINER_WIDTH_TRESHOLD = 400;
+const LARGE_CONTAINER_WIDTH_TRESHOLD = 800;
+const RESIZE_DEBOUNCE_TRESHOLD = 500;
+const baseClass$a = "promo-banner";
 const PromoBanner = ({
   className,
   buttonText,
@@ -1535,50 +1505,69 @@ const PromoBanner = ({
   img,
   light = false,
   linkText,
-  size = "small",
   onButtonClick,
   onClose,
   onLinkClick
 }) => {
-  const mergedClassNames = cx(styles$7[baseClass$9], {
-    [styles$7[`${baseClass$9}--light`]]: light,
-    [styles$7[`${baseClass$9}--${size}`]]: size
+  const containerRef = React.useRef(null);
+  const [containerSize, setContainerSize] = React.useState("medium");
+  const mergedClassNames = cx(styles$8[baseClass$a], {
+    [styles$8[`${baseClass$a}--light`]]: light,
+    [styles$8[`${baseClass$a}--small`]]: containerSize === "small",
+    [styles$8[`${baseClass$a}--large`]]: containerSize === "large"
   }, className);
-  const shouldRenderLargeFooter = (buttonText || linkText) && size === "large";
-  const shouldRenderSmallOrMediumFooter = (buttonText || linkText) && size !== "large";
+  React.useEffect(() => {
+    const handleResize = () => {
+      if (containerRef.current && containerRef.current.offsetWidth <= SMALL_CONTAINER_WIDTH_TRESHOLD) {
+        return setContainerSize("small");
+      }
+      if (containerRef.current && containerRef.current.offsetWidth >= LARGE_CONTAINER_WIDTH_TRESHOLD) {
+        return setContainerSize("large");
+      }
+      return setContainerSize("medium");
+    };
+    const debouncedHandleResize = debounce(handleResize, RESIZE_DEBOUNCE_TRESHOLD);
+    window.addEventListener("resize", debouncedHandleResize);
+    handleResize();
+    return () => {
+      debouncedHandleResize.cancel();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   const footer = /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$9}__footer`]
+    className: styles$8[`${baseClass$a}__footer`]
   }, buttonText && /* @__PURE__ */ React.createElement(Button, {
     kind: "primary",
     size: "compact",
     onClick: onButtonClick,
-    className: styles$7[`${baseClass$9}__button-text`]
+    className: styles$8[`${baseClass$a}__button-text`]
   }, buttonText), linkText && /* @__PURE__ */ React.createElement(Button, {
     size: "compact",
     kind: "text",
     onClick: onLinkClick
   }, linkText));
   return /* @__PURE__ */ React.createElement("div", {
+    ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$9}__content`]
+    className: styles$8[`${baseClass$a}__content`]
   }, img && /* @__PURE__ */ React.createElement("img", {
     src: img,
-    className: styles$7[`${baseClass$9}__img`]
+    className: styles$8[`${baseClass$a}__img`]
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$9}__wrapper`]
+    className: styles$8[`${baseClass$a}__wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$9}__header`]
-  }, header), /* @__PURE__ */ React.createElement("div", null, children), shouldRenderSmallOrMediumFooter && footer), shouldRenderLargeFooter && footer), onClose && /* @__PURE__ */ React.createElement("button", {
+    className: styles$8[`${baseClass$a}__header`]
+  }, header), /* @__PURE__ */ React.createElement("div", null, children), containerSize !== "large" && footer), containerSize === "large" && footer), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$7[`${baseClass$9}__close-icon`],
+    className: styles$8[`${baseClass$a}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
-    size: IconSizeName.Large
+    size: "large"
   })));
 };
-var styles$6 = {
+var styles$7 = {
   "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",
@@ -1589,35 +1578,35 @@ var styles$6 = {
   "radio-button--selected": "lc-RadioButton-module__radio-button--selected___s9lqj",
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
-const baseClass$8 = "radio-button";
-const RadioButton = (_O) => {
-  var _P = _O, {
+const baseClass$9 = "radio-button";
+const RadioButton = (_Q) => {
+  var _R = _Q, {
     children,
     className = "",
     description,
     checked,
     disabled
-  } = _P, props = __objRest(_P, [
+  } = _R, props = __objRest(_R, [
     "children",
     "className",
     "description",
     "checked",
     "disabled"
   ]);
-  const mergedClassNames = cx(styles$6[baseClass$8], className, {
-    [styles$6[`${baseClass$8}--selected`]]: checked,
-    [styles$6[`${baseClass$8}--disabled`]]: disabled
+  const mergedClassNames = cx(styles$7[baseClass$9], className, {
+    [styles$7[`${baseClass$9}--selected`]]: checked,
+    [styles$7[`${baseClass$9}--disabled`]]: disabled
   });
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$6[`${baseClass$8}__label`]
+    className: styles$7[`${baseClass$9}__label`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$6[`${baseClass$8}__circle`]
+    className: styles$7[`${baseClass$9}__circle`]
   }, /* @__PURE__ */ React.createElement("span", {
-    className: styles$6[`${baseClass$8}__inner-circle`]
+    className: styles$7[`${baseClass$9}__inner-circle`]
   }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({
-    className: styles$6[`${baseClass$8}__input`]
+    className: styles$7[`${baseClass$9}__input`]
   }, props), {
     type: "radio",
     checked,
@@ -1625,11 +1614,107 @@ const RadioButton = (_O) => {
   }))), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$6[`${baseClass$8}__text`]
+    className: styles$7[`${baseClass$9}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$6[`${baseClass$8}__helper`]
+    className: styles$7[`${baseClass$9}__helper`]
   }, description));
 };
+var styles$6 = {
+  "search-input": "lc-Search-module__search-input___FsbCk",
+  "search-input__search-icon": "lc-Search-module__search-input__search-icon___BBQoD",
+  "search-input__clear-icon": "lc-Search-module__search-input__clear-icon___LoNkc",
+  "search-input__loader": "lc-Search-module__search-input__loader___pkpIG",
+  "search-input__input": "lc-Search-module__search-input__input___OhyTr",
+  "search-input__input--compact": "lc-Search-module__search-input__input--compact___yikdR",
+  "search-input__input--medium": "lc-Search-module__search-input__input--medium___u6tRA",
+  "search-input__input--large": "lc-Search-module__search-input__input--large___9jQ-s",
+  "search-input__input--collapsable": "lc-Search-module__search-input__input--collapsable___4VjS8",
+  "search-input__input--collapsable--open": "lc-Search-module__search-input__input--collapsable--open___a2rX2",
+  "search-input__input--disabled": "lc-Search-module__search-input__input--disabled___nfZau"
+};
+const baseClass$8 = "search-input";
+const inputBaseClass = `${baseClass$8}__input`;
+const SearchInput = ({
+  isCollapsable,
+  isDisabled,
+  isLoading,
+  placeholder = "Search ...",
+  size = "medium",
+  value,
+  onChange
+}) => {
+  const [searchValue, setSearchValue] = React.useState(value || "");
+  const [isCollapsed, setIsCollapsed] = React.useState(true);
+  const inputRef = React.useRef(null);
+  const isCloseIconVisible = !!searchValue && !isDisabled && !isLoading;
+  const mergedClassNames = cx(styles$6[`${inputBaseClass}`], styles$6[`${inputBaseClass}--${size}`], (isDisabled || isLoading) && styles$6[`${inputBaseClass}--disabled`], isCollapsable && styles$6[`${inputBaseClass}--collapsable`], !isCollapsed && styles$6[`${inputBaseClass}--collapsable--open`]);
+  React.useEffect(() => {
+    if (typeof value === "string") {
+      setSearchValue(value);
+    }
+  }, [value]);
+  const handleOnChange = (e) => {
+    const value2 = e.currentTarget.value;
+    setSearchValue(value2);
+    onChange(value2);
+  };
+  const handleClear = () => {
+    setSearchValue("");
+    onChange("");
+  };
+  const handleClick = () => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleFocus = () => {
+    if (isCollapsable) {
+      setIsCollapsed(false);
+    }
+  };
+  const handleBlur = () => {
+    if (isCollapsable && !searchValue) {
+      setIsCollapsed(true);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === KeyCodes.enter) {
+      e.preventDefault();
+      onChange(searchValue);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${baseClass$8}-container`,
+    className: styles$6[baseClass$8],
+    onClick: handleClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    className: styles$6[`${baseClass$8}__search-icon`],
+    source: Search,
+    disabled: isDisabled || isLoading,
+    kind: "primary"
+  }), /* @__PURE__ */ React.createElement("input", {
+    ref: inputRef,
+    className: mergedClassNames,
+    type: "text",
+    value: searchValue,
+    placeholder,
+    onChange: handleOnChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    disabled: isDisabled || isLoading
+  }), isCloseIconVisible && /* @__PURE__ */ React.createElement("div", {
+    className: styles$6[`${baseClass$8}__clear-icon`],
+    "data-testid": `${baseClass$8}-clear-icon`,
+    onClick: handleClear
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close
+  })), isLoading && /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${baseClass$8}-loader`,
+    className: styles$6[`${baseClass$8}__loader`]
+  }, /* @__PURE__ */ React.createElement(Loader, {
+    size: "small"
+  })));
+};
 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";
@@ -1652,8 +1737,8 @@ var styles$5 = {
   "switch__slider--compact--disabled": "lc-Switch-module__switch__slider--compact--disabled___Vqznr"
 };
 const baseClass$7 = "switch";
-const Switch = (_Q) => {
-  var _R = _Q, {
+const Switch = (_S) => {
+  var _T = _S, {
     className = "",
     defaultOn = false,
     disabled = false,
@@ -1662,7 +1747,7 @@ const Switch = (_Q) => {
     onChange = noop,
     size = "basic",
     innerRef
-  } = _R, props = __objRest(_R, [
+  } = _T, props = __objRest(_T, [
     "className",
     "defaultOn",
     "disabled",
@@ -1672,10 +1757,7 @@ const Switch = (_Q) => {
     "size",
     "innerRef"
   ]);
-  const getEnabledValue = () => {
-    return on !== void 0 ? on : defaultOn;
-  };
-  const [enabled, setEnabled] = React.useState(getEnabledValue());
+  const [enabled, setEnabled] = React.useState(() => on !== void 0 ? on : defaultOn);
   React.useEffect(() => {
     if (on !== void 0) {
       setEnabled(on);
@@ -1719,13 +1801,13 @@ var styles$4 = {
   "tab--selected": "lc-Tab-module__tab--selected___c0EkL"
 };
 const baseClass$6 = "tab";
-const Tab = (_S) => {
-  var _T = _S, {
+const Tab = (_U) => {
+  var _V = _U, {
     children,
     className,
     description,
     isSelected
-  } = _T, restProps = __objRest(_T, [
+  } = _V, restProps = __objRest(_V, [
     "children",
     "className",
     "description",
@@ -1795,8 +1877,8 @@ const getCustomTextClass = (customColor) => {
   }
   return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
 };
-const Tag = (_U) => {
-  var _V = _U, {
+const Tag = (_W) => {
+  var _X = _W, {
     className = "",
     children,
     dismissible = false,
@@ -1807,7 +1889,7 @@ const Tag = (_U) => {
     icon: icon2,
     avatar,
     customColor
-  } = _V, restProps = __objRest(_V, [
+  } = _X, restProps = __objRest(_X, [
     "className",
     "children",
     "dismissible",
@@ -1863,7 +1945,7 @@ const Tag = (_U) => {
     "data-testid": "lc-tag-icon",
     className: styles$2[`${baseClass$4}__icon`],
     source: icon2,
-    size: IconSizeName.Small,
+    size: "small",
     customColor: getIconCustomColor()
   }), children, dismissible && /* @__PURE__ */ React.createElement("button", {
     title: "Remove",
@@ -1872,7 +1954,7 @@ const Tag = (_U) => {
     className: styles$2[`${baseClass$4}__remove`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
-    size: IconSizeName.Medium,
+    size: "medium",
     customColor: getIconCustomColor()
   })));
 };
@@ -2111,33 +2193,25 @@ var styles = {
   "toast-exit-active--fade": "lc-Toast-module__toast-exit-active--fade___tL7sb"
 };
 const baseClass$1 = "toast";
-var Variants = /* @__PURE__ */ ((Variants2) => {
-  Variants2["Success"] = "success";
-  Variants2["Warning"] = "warning";
-  Variants2["Error"] = "error";
-  Variants2["Info"] = "info";
-  Variants2["Notification"] = "notification";
-  return Variants2;
-})(Variants || {});
 const IconConfig = {
-  ["success"]: {
+  success: {
     source: CheckCircleSolid,
-    iconType: IconTypeName.Inverted
+    kind: "inverted"
   },
-  ["warning"]: {
+  warning: {
     source: Warning
   },
-  ["error"]: {
+  error: {
     source: Error2,
-    iconType: IconTypeName.Inverted
+    kind: "inverted"
   },
-  ["info"]: {
+  info: {
     source: Info,
-    iconType: IconTypeName.Inverted
+    kind: "inverted"
   },
-  ["notification"]: {
+  notification: {
     source: Info,
-    iconType: IconTypeName.Link
+    kind: "link"
   }
 };
 const Toast = ({
@@ -2145,10 +2219,10 @@ const Toast = ({
   className,
   children,
   removable,
-  variant = "info",
+  kind = "info",
   onClose
 }) => {
-  const mergedClassNames = cx(styles[baseClass$1], styles[`${baseClass$1}--${variant}`], className);
+  const mergedClassNames = cx(styles[baseClass$1], styles[`${baseClass$1}--${kind}`], className);
   const onActionClick = (action2) => {
     if (action2 && action2.closeOnClick && onClose) {
       action2.handler();
@@ -2160,7 +2234,7 @@ const Toast = ({
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
     className: styles[`${baseClass$1}__icon`]
-  }, /* @__PURE__ */ React.createElement(Icon, __spreadValues({}, IconConfig[variant]))), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement(Icon, __spreadValues({}, IconConfig[kind]))), /* @__PURE__ */ React.createElement("div", {
     className: styles[`${baseClass$1}__content`]
   }, children), (action || removable) && /* @__PURE__ */ React.createElement("div", {
     className: styles[`${baseClass$1}__actions`]
@@ -2173,21 +2247,10 @@ const Toast = ({
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
-    size: IconSizeName.Small,
-    iconType: ["warning", "notification"].includes(variant) ? IconTypeName.Primary : IconTypeName.Inverted
+    size: "small",
+    kind: ["warning", "notification"].includes(kind) ? "primary" : "inverted"
   }))));
 };
-var HorizontalPosition = /* @__PURE__ */ ((HorizontalPosition2) => {
-  HorizontalPosition2["Left"] = "left";
-  HorizontalPosition2["Center"] = "center";
-  HorizontalPosition2["Right"] = "right";
-  return HorizontalPosition2;
-})(HorizontalPosition || {});
-var VerticalPosition = /* @__PURE__ */ ((VerticalPosition2) => {
-  VerticalPosition2["Top"] = "top";
-  VerticalPosition2["Bottom"] = "bottom";
-  return VerticalPosition2;
-})(VerticalPosition || {});
 const ANIMATION_TIME = 200;
 const baseClass = "toast-wrapper";
 const ToastWrapper = ({
@@ -2209,7 +2272,7 @@ const ToastWrapper = ({
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement(TransitionGroup, {
     component: null
-  }, toasts.map(({ id, variant, content, removable, action, onClose }) => /* @__PURE__ */ React.createElement(CSSTransition, {
+  }, toasts.map(({ id, kind, content, removable, action, onClose }) => /* @__PURE__ */ React.createElement(CSSTransition, {
     key: id,
     classNames: {
       enter: styles[`toast-appear--${animationType}`],
@@ -2219,10 +2282,10 @@ const ToastWrapper = ({
     },
     timeout: ANIMATION_TIME
   }, /* @__PURE__ */ React.createElement(Toast, {
-    variant,
+    kind,
     onClose,
     removable,
     action
   }, content)))));
 };
-export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, CheckboxField, DesignTokens, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormGroup, Heading, HorizontalPosition, Icon, IconSizeName, IconTypeName, InputField, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, NumericInputField, Popover, ProgressCircle, PromoBanner, RadioButton, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, TextField, Toast, ToastWrapper, Variants, VerticalPosition };
+export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, CheckboxField, DesignTokens, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormGroup, Heading, Icon, InputField, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, NumericInputField, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, SearchInput, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, TextField, Toast, ToastWrapper };