@livechat/design-system-react-components 1.0.0-alpha.30 → 1.0.0-alpha.32

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 } 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, Error as Error2, Search, LockBlack, Refresh } from "@livechat/design-system-icons/react/material";
 import debounce from "lodash.debounce";
 import { getContrast } from "polished";
 import ReactDayPicker from "react-day-picker";
@@ -49,52 +49,141 @@ import { css } from "@emotion/css";
 var index = "";
 const DesignToken = {
   Background: "--background",
+  Background01: "--background-01",
+  Background02: "--background-02",
+  Background03: "--background-03",
   SurfaceBasicDefault: "--surface-basic-default",
+  SurfacePrimaryDefault: "--surface-primary-default",
   SurfaceBasicSubtle: "--surface-basic-subtle",
+  SurfaceSecondaryDefault: "--surface-secondary-default",
+  SurfaceSecondaryHover: "--surface-secondary-hover",
+  SurfaceSecondaryActive: "--surface-secondary-active",
+  SurfaceSecondaryDisabled: "--surface-secondary-disabled",
   SurfaceBasicHover: "--surface-basic-hover",
+  SurfacePrimaryHover: "--surface-primary-hover",
   SurfaceBasicActive: "--surface-basic-active",
+  SurfacePrimaryActive: "--surface-primary-active",
+  SurfacePrimaryActiveColored: "--surface-primary-active-colored",
   SurfaceBasicDisabled: "--surface-basic-disabled",
-  SurfaceSecondaryDefault: "--surface-secondary-default",
+  SurfacePrimaryDisabled: "--surface-primary-disabled",
+  SurfaceTertiaryDefault: "--surface-tertiary-default",
   SurfaceSecondarySubtle: "--surface-secondary-subtle",
-  SurfaceSecondaryHover: "--surface-secondary-hover",
-  SurfaceSecondaryDisabled: "--surface-secondary-disabled",
+  SurfaceModerateDefault: "--surface-moderate-default",
+  SurfaceModerateHover: "--surface-moderate-hover",
+  SurfaceModerateActive: "--surface-moderate-active",
+  SurfaceTertiaryHover: "--surface-tertiary-hover",
+  SurfaceTertiaryActive: "--surface-tertiary-active",
+  SurfaceTertiaryDisabled: "--surface-tertiary-disabled",
   SurfaceFeedbackInfo: "--surface-feedback-info",
+  SurfaceAccentEmphasisLowInfo: "--surface-accent-emphasis-low-info",
   SurfaceFeedbackNegative: "--surface-feedback-negative",
+  SurfaceAccentEmphasisLowNegative: "--surface-accent-emphasis-low-negative",
   SurfaceFeedbackWarning: "--surface-feedback-warning",
+  SurfaceAccentEmphasisLowWarning: "--surface-accent-emphasis-low-warning",
   SurfaceFeedbackPositive: "--surface-feedback-positive",
+  SurfaceAccentEmphasisLowPositive: "--surface-accent-emphasis-low-positive",
+  SurfaceAccentEmphasisLowPurple: "--surface-accent-emphasis-low-purple",
+  SurfaceAccentEmphasisMinInfo: "--surface-accent-emphasis-min-info",
+  SurfaceAccentEmphasisMinNegative: "--surface-accent-emphasis-min-negative",
+  SurfaceAccentEmphasisMinWarning: "--surface-accent-emphasis-min-warning",
+  SurfaceAccentEmphasisMinPositive: "--surface-accent-emphasis-min-positive",
+  SurfaceAccentEmphasisMinPurple: "--surface-accent-emphasis-min-purple",
   SurfaceInvertDefault: "--surface-invert-default",
+  SurfaceInvertPrimary: "--surface-invert-primary",
   SurfaceInvertSubtle: "--surface-invert-subtle",
+  SurfaceInvertSecondary: "--surface-invert-secondary",
   SurfaceInvertDisabled: "--surface-invert-disabled",
+  SurfaceLockedDefault: "--surface-locked-default",
+  SurfaceLockedHover: "--surface-locked-hover",
+  SurfaceLockedActive: "--surface-locked-active",
+  SurfaceLockedDisabled: "--surface-locked-disabled",
+  SurfaceLockedWhite: "--surface-locked-white",
+  SurfaceLockedBlack: "--surface-locked-black",
+  SurfaceAccentEmphasisHighInfo: "--surface-accent-emphasis-high-info",
+  SurfaceAccentEmphasisHighNegative: "--surface-accent-emphasis-high-negative",
+  SurfaceAccentEmphasisHighWarning: "--surface-accent-emphasis-high-warning",
+  SurfaceAccentEmphasisHighPositive: "--surface-accent-emphasis-high-positive",
+  SurfaceAccentEmphasisHighPurple: "--surface-accent-emphasis-high-purple",
   SurfaceOverlay: "--surface-overlay",
+  SurfaceOtherOverlay: "--surface-other-overlay",
+  SurfaceOtherAgent: "--surface-other-agent",
+  SurfaceOtherSkeleton: "--surface-other-skeleton",
   ContentDefault: "--content-default",
+  ContentBasicPrimary: "--content-basic-primary",
   ContentSubtle: "--content-subtle",
+  ContentBasicSecondary: "--content-basic-secondary",
   ContentDisabled: "--content-disabled",
+  ContentBasicDisabled: "--content-basic-disabled",
+  ContentBasicNegative: "--content-basic-negative",
+  ContentBasicWarning: "--content-basic-warning",
+  ContentBasicPositive: "--content-basic-positive",
+  ContentBasicInfo: "--content-basic-info",
+  ContentBasicPurple: "--content-basic-purple",
   ContentWhiteLocked: "--content-white-locked",
+  ContentLockedWhite: "--content-locked-white",
+  ContentBlackLocked: "--content-black-locked",
+  ContentLockedBlack: "--content-locked-black",
+  ContentLockedDefault: "--content-locked-default",
+  ContentLockedHover: "--content-locked-hover",
+  ContentLockedActive: "--content-locked-active",
+  ContentLockedDisabled: "--content-locked-disabled",
   ContentInvertDefault: "--content-invert-default",
+  ContentInvertPrimary: "--content-invert-primary",
   ContentInvertSubtle: "--content-invert-subtle",
+  ContentInvertSecondary: "--content-invert-secondary",
   ContentInvertDisabled: "--content-invert-disabled",
   BorderDefault: "--border-default",
+  BorderBasicPrimary: "--border-basic-primary",
+  BorderBasicSecondary: "--border-basic-secondary",
   BorderSubtle: "--border-subtle",
+  BorderBasicTertiary: "--border-basic-tertiary",
   BorderHover: "--border-hover",
+  BorderBasicHover: "--border-basic-hover",
   BorderDisabled: "--border-disabled",
+  BorderBasicDisabled: "--border-basic-disabled",
+  BorderBasicNegative: "--border-basic-negative",
+  BorderBasicWarning: "--border-basic-warning",
+  BorderBasicPositive: "--border-basic-positive",
+  BorderBasicInfo: "--border-basic-info",
+  BorderBasicPurple: "--border-basic-purple",
   BorderInvertDefault: "--border-invert-default",
+  BorderInvertPrimary: "--border-invert-primary",
   BorderInvertSubtle: "--border-invert-subtle",
+  BorderInvertSecondary: "--border-invert-secondary",
   BorderInvertHover: "--border-invert-hover",
   BorderInvertDisabled: "--border-invert-disabled",
   ColorActionActive: "--color-action-active",
+  ActionPrimaryActive: "--action-primary-active",
   ColorActionHover: "--color-action-hover",
+  ActionPrimaryHover: "--action-primary-hover",
   ColorActionDefault: "--color-action-default",
+  ActionPrimaryDefault: "--action-primary-default",
+  ColorActionDefaultRgb: "--color-action-default-rgb",
   ColorActionDisabled: "--color-action-disabled",
+  ActionPrimaryDisabled: "--action-primary-disabled",
   ColorNegativeActive: "--color-negative-active",
+  ActionNegativeActive: "--action-negative-active",
   ColorNegativeHover: "--color-negative-hover",
+  ActionNegativeHover: "--action-negative-hover",
   ColorNegativeDefault: "--color-negative-default",
+  ActionNegativeDefault: "--action-negative-default",
   ColorNegativeDisabled: "--color-negative-disabled",
+  ActionNegativeDisabled: "--action-negative-disabled",
   ColorWarningDefault: "--color-warning-default",
+  ActionWarningDefault: "--action-warning-default",
   ColorWarningHover: "--color-warning-hover",
+  ActionWarningHover: "--action-warning-hover",
   ColorPositiveDefault: "--color-positive-default",
+  ActionPositiveDefault: "--action-positive-default",
   ColorPositiveHover: "--color-positive-hover",
+  ActionPositiveHover: "--action-positive-hover",
   ColorPositiveDisabled: "--color-positive-disabled",
+  ActionPositiveDisabled: "--action-positive-disabled",
+  ActionNeutralDefault: "--action-neutral-default",
+  ActionNeutralHover: "--action-neutral-hover",
+  ActionNeutralDisabled: "--action-neutral-disabled",
   ColorBot: "--color-bot",
+  SurfaceOtherBot: "--surface-other-bot",
   ColorBlack: "--color-black",
   ColorWhite: "--color-white",
   DecorBlue900: "--decor-blue900",
@@ -171,7 +260,16 @@ const DesignToken = {
   DecorPurple300: "--decor-purple300",
   DecorPurple200: "--decor-purple200",
   DecorPurple100: "--decor-purple100",
-  DecorPurple50: "--decor-purple50"
+  DecorPurple50: "--decor-purple50",
+  ProductsLivechat: "--products-livechat",
+  ProductsHelpdesk: "--products-helpdesk",
+  ProductsChatbot: "--products-chatbot",
+  ProductsKnowledgebase: "--products-knowledgebase",
+  IllustrationsPrimary: "--illustrations-primary",
+  IllustrationsSecondary: "--illustrations-secondary",
+  IllustrationsStroke: "--illustrations-stroke",
+  TagSurface01: "--tag-surface-01",
+  TagContent01: "--tag-content-01"
 };
 const SpacingToken = {
   Spacing0: "--spacing-0",
@@ -195,7 +293,7 @@ const ShadowToken = {
   Modal: "--shadow-modal"
 };
 const caps = "lc-Typography-module__caps___c3eNJ";
-var styles$B = {
+var styles$E = {
   "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",
@@ -231,7 +329,7 @@ const Heading = (_a) => {
     "children",
     "className"
   ]);
-  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$B[`heading-${size}`], className) }, props), children);
+  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$E[`heading-${size}`], className) }, props), children);
 };
 const Text = (_c) => {
   var _d = _c, {
@@ -256,15 +354,15 @@ const Text = (_c) => {
   const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
   return React.createElement(as, __spreadValues({
     className: cx({
-      [styles$B[`${baseClassPrefix}`]]: true,
-      [styles$B[`${baseClassPrefix}--bold`]]: bold,
-      [styles$B[`${baseClassPrefix}--strike`]]: strike,
-      [styles$B[`${baseClassPrefix}--underline`]]: underline
+      [styles$E[`${baseClassPrefix}`]]: true,
+      [styles$E[`${baseClassPrefix}--bold`]]: bold,
+      [styles$E[`${baseClassPrefix}--strike`]]: strike,
+      [styles$E[`${baseClassPrefix}--underline`]]: underline
     }, className)
   }, props), children);
 };
 const icon$1 = "lc-Icon-module__icon___tw31R";
-var styles$A = {
+var styles$D = {
   icon: icon$1,
   "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
   "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
@@ -305,7 +403,7 @@ const IconSizeMap = {
     height: 32
   }
 };
-const baseClass$K = "icon";
+const baseClass$M = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
@@ -325,7 +423,7 @@ const Icon = (props) => {
   const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$A[baseClass$K], kind && styles$A[`${baseClass$K}--${disabled ? "disabled--" : ""}${kind}`]);
+  const mergedClassNames = cx(className, styles$D[baseClass$M], kind && styles$D[`${baseClass$M}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -333,7 +431,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$z = {
+var styles$C = {
   alert,
   alert__content,
   "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
@@ -365,16 +463,22 @@ const IconConfig = {
     kind: "error"
   }
 };
-const baseClass$J = "alert";
-const Alert = ({
-  children,
-  className,
-  kind = "info",
-  onClose
-}) => {
+const baseClass$L = "alert";
+const Alert = (_e) => {
+  var _f = _e, {
+    children,
+    className,
+    kind = "info",
+    onClose
+  } = _f, props = __objRest(_f, [
+    "children",
+    "className",
+    "kind",
+    "onClose"
+  ]);
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$z[baseClass$J], styles$z[`${baseClass$J}--${kind}`], isSmallContainer && styles$z[`${baseClass$J}--small`], className);
+  const mergedClassNames = cx(styles$C[baseClass$L], styles$C[`${baseClass$L}--${kind}`], isSmallContainer && styles$C[`${baseClass$L}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -385,20 +489,20 @@ const Alert = ({
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
     ref: containerRef,
     className: mergedClassNames
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$z[`${baseClass$J}__content`]
+  }, props), /* @__PURE__ */ React.createElement("div", {
+    className: styles$C[`${baseClass$L}__content`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
     size: "large",
-    className: styles$z[`${baseClass$J}__content-icon`]
+    className: styles$C[`${baseClass$L}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$z[`${baseClass$J}__content-text`], onClose && styles$z[`${baseClass$J}__content-text--margin`])
+    className: cx(styles$C[`${baseClass$L}__content-text`], onClose && styles$C[`${baseClass$L}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$z[`${baseClass$J}__close-icon`],
+    className: styles$C[`${baseClass$L}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
@@ -416,7 +520,7 @@ const avatar = "lc-Avatar-module__avatar___1zTCE";
 const avatar__status = "lc-Avatar-module__avatar__status___nX2Ls";
 const avatar__rim = "lc-Avatar-module__avatar__rim___RCQ8Q";
 const avatar__image = "lc-Avatar-module__avatar__image___YqfqE";
-var styles$y = {
+var styles$B = {
   avatar,
   avatar__status,
   "avatar__status--available": "lc-Avatar-module__avatar__status--available___tcpFg",
@@ -462,7 +566,7 @@ var styles$y = {
   "avatar--xlarge": "lc-Avatar-module__avatar--xlarge___zwgeW",
   "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
 };
-const baseClass$I = "avatar";
+const baseClass$K = "avatar";
 const defaultBackgroundColor = "var(--surface-basic-disabled)";
 const defaultFontColor = "var(--content-subtle)";
 const Avatar = ({
@@ -486,15 +590,15 @@ const Avatar = ({
   const backgroundColor = color || defaultBackgroundColor;
   const fontColor = color ? getFontColor(color) : defaultFontColor;
   const mergedClassNames = cx({
-    [styles$y[baseClass$I]]: true,
-    [styles$y[`${baseClass$I}--${shape}`]]: true,
-    [styles$y[`${baseClass$I}--${size}`]]: true,
-    [styles$y[`${baseClass$I}--with-rim`]]: withRim,
+    [styles$B[baseClass$K]]: true,
+    [styles$B[`${baseClass$K}--${shape}`]]: true,
+    [styles$B[`${baseClass$K}--${size}`]]: true,
+    [styles$B[`${baseClass$K}--with-rim`]]: withRim,
     [`${className}`]: className
   });
-  const mergedStatusClassNames = cx(styles$y[`${baseClass$I}__status`], styles$y[`${baseClass$I}__status--${shape}`], styles$y[`${baseClass$I}__status--${size}`], styles$y[`${baseClass$I}__status--${status}`]);
-  const mergedIconClassNames = cx(styles$y[`${baseClass$I}__icon`], styles$y[`${baseClass$I}__icon--${size}`]);
-  const mergedRimClassNames = cx(styles$y[`${baseClass$I}__rim`], styles$y[`${baseClass$I}__rim--${size}`]);
+  const mergedStatusClassNames = cx(styles$B[`${baseClass$K}__status`], styles$B[`${baseClass$K}__status--${shape}`], styles$B[`${baseClass$K}__status--${size}`], styles$B[`${baseClass$K}__status--${status}`]);
+  const mergedIconClassNames = cx(styles$B[`${baseClass$K}__icon`], styles$B[`${baseClass$K}__icon--${size}`]);
+  const mergedRimClassNames = cx(styles$B[`${baseClass$K}__rim`], styles$B[`${baseClass$K}__rim--${size}`]);
   const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
   React.useEffect(() => {
     setShouldDisplayFallbackAvatar(isImproperImageSetup);
@@ -503,20 +607,20 @@ const Avatar = ({
     className: mergedClassNames,
     style: { backgroundColor }
   }, withRim && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$I}__rim`,
+    "data-testid": `${baseClass$K}__rim`,
     className: mergedRimClassNames
   }), status && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$I}__status`,
+    "data-testid": `${baseClass$K}__status`,
     className: mergedStatusClassNames
   }), shouldDisplayImage && /* @__PURE__ */ React.createElement("img", {
-    className: styles$y[`${baseClass$I}__image`],
+    className: styles$B[`${baseClass$K}__image`],
     src,
     alt,
     onError: handleError
   }), shouldDisplayInitials && /* @__PURE__ */ React.createElement("span", {
     style: { color: fontColor }
   }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
-    "data-testid": `${baseClass$I}__icon`,
+    "data-testid": `${baseClass$K}__icon`,
     className: mergedIconClassNames,
     source: Person,
     kind: "primary"
@@ -524,7 +628,7 @@ const Avatar = ({
 };
 const badge = "lc-Badge-module__badge___GhLnu";
 const badge__dot = "lc-Badge-module__badge__dot___z6RO6";
-var styles$x = {
+var styles$A = {
   badge,
   badge__dot,
   "badge--large": "lc-Badge-module__badge--large___B131q",
@@ -537,16 +641,16 @@ var styles$x = {
 function formatCount(count, max) {
   return count > max ? `${max}+` : `${count}`;
 }
-const baseClass$H = "badge";
-const Badge = (_e) => {
-  var _f = _e, {
+const baseClass$J = "badge";
+const Badge = (_g) => {
+  var _h = _g, {
     className,
     count = 0,
     max = 99,
     kind = "primary",
     size = "medium",
     type = "counter"
-  } = _f, spanProps = __objRest(_f, [
+  } = _h, spanProps = __objRest(_h, [
     "className",
     "count",
     "max",
@@ -554,12 +658,12 @@ const Badge = (_e) => {
     "size",
     "type"
   ]);
-  const mergedClassNames = cx(className, styles$x[baseClass$H], styles$x[`${baseClass$H}--${kind}`], styles$x[`${baseClass$H}--${size}`]);
+  const mergedClassNames = cx(className, styles$A[baseClass$J], styles$A[`${baseClass$J}--${kind}`], styles$A[`${baseClass$J}--${size}`]);
   const content = {
     ["counter"]: formatCount(count, max),
     ["alert"]: "!",
     ["dot"]: /* @__PURE__ */ React.createElement("span", {
-      className: styles$x[`${baseClass$H}__dot`]
+      className: styles$A[`${baseClass$J}__dot`]
     })
   }[type];
   return /* @__PURE__ */ React.createElement("span", __spreadValues({
@@ -570,7 +674,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$w = {
+var styles$z = {
   loader,
   loader__spinner,
   "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
@@ -580,8 +684,8 @@ var styles$w = {
   rotate,
   loader__label
 };
-const baseClass$G = "loader";
-const spinnerClass = `${baseClass$G}__spinner`;
+const baseClass$I = "loader";
+const spinnerClass = `${baseClass$I}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -590,11 +694,11 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$w[baseClass$G], className)
+    className: cx(styles$z[baseClass$I], className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$w[spinnerClass], styles$w[`${spinnerClass}--${size}`])
+    className: cx(styles$z[spinnerClass], styles$z[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$w["loader__spinner-circle"],
+    className: styles$z["loader__spinner-circle"],
     style: {
       borderColor: secondaryColor,
       borderTopColor: primaryColor
@@ -602,14 +706,14 @@ const Loader = ({
   })), label && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$w["loader__label"]
+    className: styles$z["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$v = {
+var styles$y = {
   btn: btn$1,
   "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
   "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
@@ -630,9 +734,9 @@ var styles$v = {
   btn__content,
   btn__icon
 };
-const baseClass$F = "btn";
-const Button = (_g) => {
-  var _h = _g, {
+const baseClass$H = "btn";
+const Button = (_i) => {
+  var _j = _i, {
     loading = false,
     disabled = false,
     type = "button",
@@ -646,7 +750,7 @@ const Button = (_g) => {
     children,
     href,
     onClick
-  } = _h, props = __objRest(_h, [
+  } = _j, props = __objRest(_j, [
     "loading",
     "disabled",
     "type",
@@ -663,11 +767,11 @@ const Button = (_g) => {
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$v[baseClass$F], styles$v[`${baseClass$F}--${kind}`], styles$v[`${baseClass$F}--${size}`], {
-    [styles$v[`${baseClass$F}--loading`]]: loading,
-    [styles$v[`${baseClass$F}--full-width`]]: fullWidth,
-    [styles$v[`${baseClass$F}--icon-only`]]: !children && icon2,
-    [styles$v[`${baseClass$F}--disabled`]]: isDisabled
+  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}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
@@ -678,16 +782,16 @@ const Button = (_g) => {
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$v[`${baseClass$F}__loader`]
+    className: styles$y[`${baseClass$H}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$v[`${baseClass$F}__icon`], styles$v[`${baseClass$F}__icon--${iconPosition}`]),
+    className: cx(styles$y[`${baseClass$H}__icon`], styles$y[`${baseClass$H}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$v[`${baseClass$F}__content`]
+    className: styles$y[`${baseClass$H}__content`]
   }, children));
 };
 const btn = "lc-SegmentedControl-module__btn___tfsvL";
-var styles$u = {
+var styles$x = {
   "segmented-control": "lc-SegmentedControl-module__segmented-control___LHWSk",
   btn,
   "btn--active": "lc-SegmentedControl-module__btn--active___Za-th",
@@ -697,7 +801,7 @@ var styles$u = {
 };
 function noop() {
 }
-const baseClass$E = "segmented-control";
+const baseClass$G = "segmented-control";
 const SegmentedControl = ({
   size = "medium",
   buttons,
@@ -707,7 +811,7 @@ const SegmentedControl = ({
   fullWidth = false,
   onButtonClick = noop
 }) => {
-  const mergedClassName = cx(styles$u[baseClass$E], className);
+  const mergedClassName = cx(styles$x[baseClass$G], className);
   const [currentStateId, setCurrentStateId] = React.useState(() => initialId);
   const isControlled = typeof currentId === "string";
   React.useEffect(() => {
@@ -721,7 +825,7 @@ const SegmentedControl = ({
   };
   const buttonSet = buttons.map(({ id, label, loading, disabled, icon: icon2 }) => {
     const isPressed = id === currentStateId;
-    const activityStyles = isPressed ? styles$u["btn--active"] : "";
+    const activityStyles = isPressed ? styles$x["btn--active"] : "";
     const loadingStatus = isPressed ? false : loading;
     return /* @__PURE__ */ React.createElement(Button, {
       key: id,
@@ -731,7 +835,7 @@ const SegmentedControl = ({
       "aria-pressed": isPressed,
       kind: "secondary",
       icon: icon2,
-      className: cx(styles$u["btn"], styles$u[`btn--${size}`], activityStyles),
+      className: cx(styles$x["btn"], styles$x[`btn--${size}`], activityStyles),
       onClick: (event) => {
         handleClick(id, event);
       }
@@ -752,7 +856,7 @@ 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$t = {
+var styles$w = {
   card,
   card__header,
   card__header__image,
@@ -767,13 +871,13 @@ var styles$t = {
   card__actions__buttons,
   "card__actions__buttons-expander": "lc-Card-module__card__actions__buttons-expander___lz4h-"
 };
-const baseClass$D = "card";
-const headerClass = `${baseClass$D}__header`;
+const baseClass$F = "card";
+const headerClass = `${baseClass$F}__header`;
 const headingClass = `${headerClass}__heading`;
-const actionsClass = `${baseClass$D}__actions`;
+const actionsClass = `${baseClass$F}__actions`;
 const noImageClass = `${headerClass}__no-image`;
-const Card = (_i) => {
-  var _j = _i, {
+const Card = (_k) => {
+  var _l = _k, {
     alt,
     buttonsOptions = [],
     children,
@@ -782,7 +886,7 @@ const Card = (_i) => {
     expandableContent,
     src,
     title
-  } = _j, divProps = __objRest(_j, [
+  } = _l, divProps = __objRest(_l, [
     "alt",
     "buttonsOptions",
     "children",
@@ -800,43 +904,43 @@ const Card = (_i) => {
   const shouldShowActions = shouldShowActionButtons || shouldShowExpandAction;
   const isTitleAvailable = title;
   const isImageAvailable = src;
-  const noImageAvailable = isImageAvailable ? "" : styles$t[noImageClass];
+  const noImageAvailable = isImageAvailable ? "" : styles$w[noImageClass];
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
-    className: cx(styles$t[baseClass$D], className)
+    className: cx(styles$w[baseClass$F], className)
   }, divProps), isTitleAvailable && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$t[headerClass], noImageAvailable)
+    className: cx(styles$w[headerClass], noImageAvailable)
   }, isImageAvailable && /* @__PURE__ */ React.createElement("img", {
     alt,
-    className: styles$t[`${headerClass}__image`],
+    className: styles$w[`${headerClass}__image`],
     src
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$t[headingClass]
+    className: styles$w[headingClass]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$t[`${headingClass}__title`]
+    className: styles$w[`${headingClass}__title`]
   }, title), /* @__PURE__ */ React.createElement(Text, {
     size: "sm",
-    className: styles$t[`${headingClass}__description`]
+    className: styles$w[`${headingClass}__description`]
   }, description))), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$t[`${baseClass$D}__content`]
+    className: styles$w[`${baseClass$F}__content`]
   }, children), isExpanded && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$t[`${baseClass$D}__expanded-content`]
+    className: styles$w[`${baseClass$F}__expanded-content`]
   }, expandableContent), shouldShowActions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$t[actionsClass]
+    className: styles$w[actionsClass]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$t[`${actionsClass}__line`]
+    className: styles$w[`${actionsClass}__line`]
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$t[`${actionsClass}__buttons`]
+    className: styles$w[`${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$t[`${actionsClass}__buttons-expander`],
+    className: styles$w[`${actionsClass}__buttons-expander`],
     kind: "plain",
     iconPosition: "right",
     icon: /* @__PURE__ */ React.createElement(Icon, {
@@ -845,19 +949,19 @@ const Card = (_i) => {
     onClick: () => setIsExpanded(!isExpanded)
   }, expandButtonText))));
 };
-var styles$s = {
+var styles$v = {
   "field-description": "lc-FieldDescription-module__field-description___IcRDH"
 };
-const baseClass$C = "field-description";
-const FieldDescription = (_k) => {
-  var _l = _k, {
+const baseClass$E = "field-description";
+const FieldDescription = (_m) => {
+  var _n = _m, {
     children,
     className = ""
-  } = _l, props = __objRest(_l, [
+  } = _n, props = __objRest(_n, [
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$s[baseClass$C], className);
+  const mergedClassNames = cx(styles$v[baseClass$E], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -872,7 +976,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$r = {
+var styles$u = {
   checkbox,
   checkbox__label,
   checkbox__square,
@@ -883,38 +987,38 @@ var styles$r = {
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
-const baseClass$B = "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 baseClass$D = "checkbox";
+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$r[baseClass$B], className, {
-      [styles$r[`${baseClass$B}--selected`]]: checked,
-      [styles$r[`${baseClass$B}--disabled`]]: disabled
+    className: cx(styles$u[baseClass$D], className, {
+      [styles$u[`${baseClass$D}--selected`]]: checked,
+      [styles$u[`${baseClass$D}--disabled`]]: disabled
     })
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$r[`${baseClass$B}__label`]
+    className: styles$u[`${baseClass$D}__label`]
   }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
     ref,
     checked,
     disabled,
-    className: styles$r[`${baseClass$B}__input`],
+    className: styles$u[`${baseClass$D}__input`],
     type: "checkbox"
   })), /* @__PURE__ */ React.createElement("div", {
-    className: styles$r[`${baseClass$B}__square`]
+    className: styles$u[`${baseClass$D}__square`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Check,
     kind: "inverted",
     size: "xsmall",
-    className: styles$r[`${baseClass$B}__checkmark`]
+    className: styles$u[`${baseClass$D}__checkmark`]
   }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$r[`${baseClass$B}__text`]
+    className: styles$u[`${baseClass$D}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$r[`${baseClass$B}__helper`]
+    className: styles$u[`${baseClass$D}__helper`]
   }, description));
 });
-var styles$q = {
+var styles$t = {
   "date-picker": "lc-DatePicker-module__date-picker___9AqJ2",
   "date-picker--interaction-disabled": "lc-DatePicker-module__date-picker--interaction-disabled___-zn8o",
   "date-picker__day": "lc-DatePicker-module__date-picker__day___ZTSw9",
@@ -950,7 +1054,7 @@ var styles$q = {
   "date-picker--range__calendars-wrapper": "lc-DatePicker-module__date-picker--range__calendars-wrapper___8nWaW",
   "date-picker__navbar-buttons-wrapper": "lc-DatePicker-module__date-picker__navbar-buttons-wrapper___Hnksb"
 };
-const baseClass$A = "date-picker";
+const baseClass$C = "date-picker";
 const DatePickerNavbar = (props) => {
   const {
     onPreviousClick,
@@ -999,7 +1103,7 @@ const DatePickerNavbar = (props) => {
   return /* @__PURE__ */ React.createElement("div", {
     className
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$q[`${baseClass$A}__navbar-buttons-wrapper`]
+    className: styles$t[`${baseClass$C}__navbar-buttons-wrapper`]
   }, /* @__PURE__ */ React.createElement("button", {
     "data-testid": "date-picker-prev-year-button",
     className: cx({
@@ -1021,7 +1125,7 @@ const DatePickerNavbar = (props) => {
     source: ChevronLeft,
     kind: "subtle"
   }))), /* @__PURE__ */ React.createElement("div", {
-    className: styles$q[`${baseClass$A}__navbar-buttons-wrapper`]
+    className: styles$t[`${baseClass$C}__navbar-buttons-wrapper`]
   }, /* @__PURE__ */ React.createElement("button", {
     "data-testid": "date-picker-next-month-button",
     className: cx({
@@ -1044,7 +1148,7 @@ const DatePickerNavbar = (props) => {
     kind: "subtle"
   }))));
 };
-const baseClass$z = "date-picker";
+const baseClass$B = "date-picker";
 const isDateWithinRange = (date, range) => {
   const { from, to } = range;
   if (to && !isSameDay(date, to) && isAfter(date, to)) {
@@ -1067,22 +1171,22 @@ const calculateDatePickerMonth = (initialFromDate, initialToDate, toMonth) => {
 };
 const getRangeDatePickerModifiers = (from, to) => {
   const base = {
-    [styles$q[`${baseClass$z}__day--monday`]]: { daysOfWeek: [1] },
-    [styles$q[`${baseClass$z}__day--sunday`]]: { daysOfWeek: [0] },
-    [styles$q[`${baseClass$z}__day--start`]]: from,
-    [styles$q[`${baseClass$z}__day--end`]]: from
+    [styles$t[`${baseClass$B}__day--monday`]]: { daysOfWeek: [1] },
+    [styles$t[`${baseClass$B}__day--sunday`]]: { daysOfWeek: [0] },
+    [styles$t[`${baseClass$B}__day--start`]]: from,
+    [styles$t[`${baseClass$B}__day--end`]]: from
   };
   if (!to || !from)
     return base;
   const diff = differenceInCalendarDays(to, from);
   if (diff > 0) {
     return __spreadProps(__spreadValues({}, base), {
-      [styles$q[`${baseClass$z}__day--end`]]: to
+      [styles$t[`${baseClass$B}__day--end`]]: to
     });
   }
   if (diff < 0) {
     return __spreadProps(__spreadValues({}, base), {
-      [styles$q[`${baseClass$z}__day--start`]]: to
+      [styles$t[`${baseClass$B}__day--start`]]: to
     });
   }
   return base;
@@ -1121,41 +1225,41 @@ const getInitialStateFromProps = (props) => {
 };
 const getDatePickerClassNames = (range, classNames) => __spreadValues({
   container: cx({
-    [styles$q[`${baseClass$z}`]]: true,
-    [styles$q[`${baseClass$z}--range`]]: range
+    [styles$t[`${baseClass$B}`]]: true,
+    [styles$t[`${baseClass$B}--range`]]: range
   }),
-  wrapper: styles$q[`${baseClass$z}__wrapper`],
-  interactionDisabled: styles$q[`${baseClass$z}--interaction-disabled`],
-  months: styles$q[`${baseClass$z}__months`],
-  month: styles$q[`${baseClass$z}__month`],
-  navBar: styles$q[`${baseClass$z}__nav-bar`],
-  navButtonPrev: cx(styles$q[`${baseClass$z}__nav-button`], styles$q[`${baseClass$z}__nav-button--prev`]),
-  navButtonNext: cx(styles$q[`${baseClass$z}__nav-button`], styles$q[`${baseClass$z}__nav-button--next`]),
-  navButtonInteractionDisabled: styles$q[`${baseClass$z}__nav-button--interaction-disabled`],
-  caption: styles$q[`${baseClass$z}__caption`],
-  weekdays: styles$q[`${baseClass$z}__weekdays`],
-  weekdaysRow: styles$q[`${baseClass$z}__weekdays-row`],
-  weekday: styles$q[`${baseClass$z}__weekday`],
-  body: styles$q[`${baseClass$z}__body`],
-  week: styles$q[`${baseClass$z}__week`],
-  weekNumber: styles$q[`${baseClass$z}__week-number`],
-  day: styles$q[`${baseClass$z}__day`],
-  footer: styles$q[`${baseClass$z}__footer`],
-  todayButton: styles$q[`${baseClass$z}__today-button`],
-  today: styles$q[`${baseClass$z}__day--today`],
-  selected: styles$q[`${baseClass$z}__day--selected`],
-  disabled: styles$q[`${baseClass$z}__day--disabled`],
-  outside: styles$q[`${baseClass$z}__day--outside`],
-  start: styles$q[`${baseClass$z}__day--start`],
-  end: styles$q[`${baseClass$z}__day--end`]
+  wrapper: styles$t[`${baseClass$B}__wrapper`],
+  interactionDisabled: styles$t[`${baseClass$B}--interaction-disabled`],
+  months: styles$t[`${baseClass$B}__months`],
+  month: styles$t[`${baseClass$B}__month`],
+  navBar: styles$t[`${baseClass$B}__nav-bar`],
+  navButtonPrev: cx(styles$t[`${baseClass$B}__nav-button`], styles$t[`${baseClass$B}__nav-button--prev`]),
+  navButtonNext: cx(styles$t[`${baseClass$B}__nav-button`], styles$t[`${baseClass$B}__nav-button--next`]),
+  navButtonInteractionDisabled: styles$t[`${baseClass$B}__nav-button--interaction-disabled`],
+  caption: styles$t[`${baseClass$B}__caption`],
+  weekdays: styles$t[`${baseClass$B}__weekdays`],
+  weekdaysRow: styles$t[`${baseClass$B}__weekdays-row`],
+  weekday: styles$t[`${baseClass$B}__weekday`],
+  body: styles$t[`${baseClass$B}__body`],
+  week: styles$t[`${baseClass$B}__week`],
+  weekNumber: styles$t[`${baseClass$B}__week-number`],
+  day: styles$t[`${baseClass$B}__day`],
+  footer: styles$t[`${baseClass$B}__footer`],
+  todayButton: styles$t[`${baseClass$B}__today-button`],
+  today: styles$t[`${baseClass$B}__day--today`],
+  selected: styles$t[`${baseClass$B}__day--selected`],
+  disabled: styles$t[`${baseClass$B}__day--disabled`],
+  outside: styles$t[`${baseClass$B}__day--outside`],
+  start: styles$t[`${baseClass$B}__day--start`],
+  end: styles$t[`${baseClass$B}__day--end`]
 }, classNames);
-const baseClass$y = "date-picker";
+const baseClass$A = "date-picker";
 const defaultDayRenderer = (day) => {
   const date = day.getDate();
   return /* @__PURE__ */ React.createElement("div", {
-    className: styles$q[`${baseClass$y}__day-wrapper`]
+    className: styles$t[`${baseClass$A}__day-wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$q[`${baseClass$y}__day-content`]
+    className: styles$t[`${baseClass$A}__day-content`]
   }, date));
 };
 const DatePickerComponent = (props) => {
@@ -1476,19 +1580,19 @@ RangeDatePicker.defaultProps = {
     }
   ]
 };
-var styles$p = {
+var styles$s = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
-const baseClass$x = "field-error";
-const FieldError = (_o) => {
-  var _p = _o, {
+const baseClass$z = "field-error";
+const FieldError = (_q) => {
+  var _r = _q, {
     children,
     className = ""
-  } = _p, props = __objRest(_p, [
+  } = _r, props = __objRest(_r, [
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$p[baseClass$x], className);
+  const mergedClassNames = cx(styles$s[baseClass$z], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -1496,21 +1600,21 @@ const FieldError = (_o) => {
     className: mergedClassNames
   }), children);
 };
-var styles$o = {
+var styles$r = {
   "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$w = "field-group";
-const FieldGroup = (_q) => {
-  var _r = _q, {
+const baseClass$y = "field-group";
+const FieldGroup = (_s) => {
+  var _t = _s, {
     className = "",
     children,
     description,
     error,
     inline,
     stretch
-  } = _r, props = __objRest(_r, [
+  } = _t, props = __objRest(_t, [
     "className",
     "children",
     "description",
@@ -1518,9 +1622,9 @@ const FieldGroup = (_q) => {
     "inline",
     "stretch"
   ]);
-  const mergedClassNames = cx(styles$o[baseClass$w], className, {
-    [styles$o[`${baseClass$w}--inline`]]: inline,
-    [styles$o[`${baseClass$w}--stretched`]]: stretch
+  const mergedClassNames = cx(styles$r[baseClass$y], className, {
+    [styles$r[`${baseClass$y}--inline`]]: inline,
+    [styles$r[`${baseClass$y}--stretched`]]: stretch
   });
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: mergedClassNames
@@ -1531,22 +1635,22 @@ 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$n = {
+var styles$q = {
   form,
   form__header,
   form__footer,
   form__label,
   form__helper
 };
-const baseClass$v = "form";
-const Form = (_s) => {
-  var _t = _s, {
+const baseClass$x = "form";
+const Form = (_u) => {
+  var _v = _u, {
     className,
     children,
     labelText,
     helperText,
     formFooter
-  } = _t, restProps = __objRest(_t, [
+  } = _v, restProps = __objRest(_v, [
     "className",
     "children",
     "labelText",
@@ -1554,21 +1658,21 @@ const Form = (_s) => {
     "formFooter"
   ]);
   return /* @__PURE__ */ React.createElement("form", __spreadValues({
-    className: cx(styles$n[baseClass$v], className)
+    className: cx(styles$q[baseClass$x], className)
   }, restProps), (labelText || helperText) && /* @__PURE__ */ React.createElement("div", {
-    className: styles$n[`${baseClass$v}__header`]
+    className: styles$q[`${baseClass$x}__header`]
   }, labelText && /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$n[`${baseClass$v}__label`]
+    className: styles$q[`${baseClass$x}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "p",
     size: "sm",
-    className: styles$n[`${baseClass$v}__helper`]
+    className: styles$q[`${baseClass$x}__helper`]
   }, helperText)), children, formFooter && /* @__PURE__ */ React.createElement("div", {
-    className: styles$n[`${baseClass$v}__footer`]
+    className: styles$q[`${baseClass$x}__footer`]
   }, formFooter));
 };
-var styles$m = {
+var styles$p = {
   "form-field": "lc-FormField-module__form-field___JqnX6",
   "form-field--inline": "lc-FormField-module__form-field--inline___4DgIq",
   "form-field__wrapper--inline": "lc-FormField-module__form-field__wrapper--inline___Ubvrn",
@@ -1583,7 +1687,7 @@ var styles$m = {
   "form-field__row-break": "lc-FormField-module__form-field__row-break___DCBjC",
   "form-field__content": "lc-FormField-module__form-field__content___XaOx3"
 };
-const baseClass$u = "form-field";
+const baseClass$w = "form-field";
 const FormField = ({
   inline,
   error,
@@ -1595,73 +1699,73 @@ const FormField = ({
   children,
   labelRightNode
 }) => {
-  const mergedClassNames = cx(styles$m[baseClass$u], {
-    [styles$m[`${baseClass$u}--inline`]]: inline
+  const mergedClassNames = cx(styles$p[baseClass$w], {
+    [styles$p[`${baseClass$w}--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$m[`${baseClass$u}__label-right-node`], styles$m[`${baseClass$u}__label-right-node--inline`])
+    className: cx(styles$p[`${baseClass$w}__label-right-node`], styles$p[`${baseClass$w}__label-right-node--inline`])
   }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
-    className: styles$m[`${baseClass$u}__row-break`]
+    className: styles$p[`${baseClass$w}__row-break`]
   })), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$m[`${baseClass$u}__wrapper`], inline && styles$m[`${baseClass$u}__wrapper--inline`])
+    className: cx(styles$p[`${baseClass$w}__wrapper`], inline && styles$p[`${baseClass$w}__wrapper--inline`])
   }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$m[`${baseClass$u}__label`], inline && styles$m[`${baseClass$u}__label--inline`], !labelText && styles$m[`${baseClass$u}__label--no-text`])
+    className: cx(styles$p[`${baseClass$w}__label`], inline && styles$p[`${baseClass$w}__label--inline`], !labelText && styles$p[`${baseClass$w}__label--no-text`])
   }, labelText && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$m[`${baseClass$u}__label-wrapper`])
+    className: cx(styles$p[`${baseClass$w}__label-wrapper`])
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$m[`${baseClass$u}__label-left-node`],
+    className: styles$p[`${baseClass$w}__label-left-node`],
     htmlFor: labelFor
   }, /* @__PURE__ */ React.createElement(Text, {
     as: "span",
     size: "sm"
   }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$m[`${baseClass$u}__label-adornment`])
+    className: cx(styles$p[`${baseClass$w}__label-adornment`])
   }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$m[`${baseClass$u}__label-right-node`])
+    className: cx(styles$p[`${baseClass$w}__label-right-node`])
   }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$m[`${baseClass$u}__content`])
+    className: cx(styles$p[`${baseClass$w}__content`])
   }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
 };
-var styles$l = {
+var styles$o = {
   "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$t = "form-group";
-const FormGroup = (_u) => {
-  var _v = _u, {
+const baseClass$v = "form-group";
+const FormGroup = (_w) => {
+  var _x = _w, {
     className = "",
     children,
     labelText,
     helperText
-  } = _v, props = __objRest(_v, [
+  } = _x, props = __objRest(_x, [
     "className",
     "children",
     "labelText",
     "helperText"
   ]);
-  const mergedClassNames = cx(styles$l[baseClass$t], className);
+  const mergedClassNames = cx(styles$o[baseClass$v], 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$l[`${baseClass$t}__header`]
+    className: styles$o[`${baseClass$v}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     as: "div",
     size: "sm",
-    className: styles$l[`${baseClass$t}__label`]
+    className: styles$o[`${baseClass$v}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "sm",
-    className: styles$l[`${baseClass$t}__helper`]
+    className: styles$o[`${baseClass$v}__helper`]
   }, helperText)), children);
 };
 const input = "lc-Input-module__input___qeMAQ";
-var styles$k = {
+var styles$n = {
   input,
   "input--focused": "lc-Input-module__input--focused___wQH5-",
   "input--disabled": "lc-Input-module__input--disabled___HidXX",
@@ -1674,21 +1778,21 @@ var styles$k = {
   "input__icon--right": "lc-Input-module__input__icon--right___VefSK",
   "input__visibility-button": "lc-Input-module__input__visibility-button___eWrVe"
 };
-const baseClass$s = "input";
+const baseClass$u = "input";
 const renderIcon = (icon2, disabled) => React.cloneElement(icon2.source, {
   ["data-testid"]: `input-icon-${icon2.place}`,
-  className: cx(styles$k[`${baseClass$s}__icon`], styles$k[`${baseClass$s}__icon--${icon2.place}`], {
-    [styles$k[`${baseClass$s}__icon--disabled`]]: disabled
+  className: cx(styles$n[`${baseClass$u}__icon`], styles$n[`${baseClass$u}__icon--${icon2.place}`], {
+    [styles$n[`${baseClass$u}__icon--disabled`]]: disabled
   })
 });
-const Input = React.forwardRef((_w, ref) => {
-  var _x = _w, {
+const Input = React.forwardRef((_y, ref) => {
+  var _z = _y, {
     inputSize = "medium",
     error = false,
     disabled,
     icon: icon2 = null,
     className
-  } = _x, inputProps = __objRest(_x, [
+  } = _z, inputProps = __objRest(_z, [
     "inputSize",
     "error",
     "disabled",
@@ -1698,10 +1802,10 @@ const Input = React.forwardRef((_w, ref) => {
   const [isFocused, setIsFocused] = React.useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
   const { type } = inputProps;
-  const mergedClassNames = cx(className, styles$k[baseClass$s], styles$k[`${baseClass$s}--${inputSize}`], {
-    [styles$k[`${baseClass$s}--disabled`]]: disabled,
-    [styles$k[`${baseClass$s}--focused`]]: isFocused,
-    [styles$k[`${baseClass$s}--error`]]: error
+  const mergedClassNames = cx(className, styles$n[baseClass$u], styles$n[`${baseClass$u}--${inputSize}`], {
+    [styles$n[`${baseClass$u}--disabled`]]: disabled,
+    [styles$n[`${baseClass$u}--focused`]]: isFocused,
+    [styles$n[`${baseClass$u}--error`]]: error
   });
   const iconCustomColor = !disabled ? "var(--content-default)" : "var(--content-disabled)";
   const iconSource = isPasswordVisible ? VisibilityOn : VisibilityOff;
@@ -1726,39 +1830,55 @@ const Input = React.forwardRef((_w, ref) => {
       source: iconSource
     }),
     onClick: () => setIsPasswordVisible((v) => !v),
-    className: styles$k[`${baseClass$s}__visibility-button`]
+    className: styles$n[`${baseClass$u}__visibility-button`]
   }));
 });
 const link = "lc-Link-module__link___kqx52";
-var styles$j = {
+var styles$m = {
   link,
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
-const baseClass$r = "link";
-const Link = (_y) => {
-  var _z = _y, {
+const baseClass$t = "link";
+const Link = (_A) => {
+  var _B = _A, {
     bold = false,
     className = ""
-  } = _z, rest = __objRest(_z, [
+  } = _B, rest = __objRest(_B, [
     "bold",
     "className"
   ]);
   return /* @__PURE__ */ React.createElement("a", __spreadValues({
-    className: cx(styles$j[baseClass$r], bold && styles$j[`${baseClass$r}--bold`], className)
+    className: cx(styles$m[baseClass$t], bold && styles$m[`${baseClass$t}--bold`], className)
   }, rest));
 };
+const KeyCodes = {
+  esc: "Escape",
+  enter: "Enter",
+  backspace: "Backspace",
+  delete: "Delete",
+  spacebar: " ",
+  tab: "Tab",
+  semicolon: ";",
+  comma: ",",
+  arrowUp: "ArrowUp",
+  arrowDown: "ArrowDown"
+};
 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$i = {
+var styles$l = {
   "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",
   "modal-base__close": "lc-Modal-module__modal-base__close___gJlgr",
+  "modal-base__close--label-type": "lc-Modal-module__modal-base__close--label-type___Om0Vb",
   modal__header,
+  "modal__label-header": "lc-Modal-module__modal__label-header___ZPtEy",
   modal__heading,
+  "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",
@@ -1766,45 +1886,22 @@ var styles$i = {
   "action-modal__actions": "lc-Modal-module__action-modal__actions___kpRXD",
   "action-modal__icon": "lc-Modal-module__action-modal__icon___MK5xt"
 };
-const ModalCloseButton = ({
-  onClick
-}) => /* @__PURE__ */ React.createElement("button", {
-  title: "Close modal",
-  className: styles$i["modal-base__close"],
-  onClick,
-  type: "button"
-}, /* @__PURE__ */ React.createElement(Icon, {
-  source: Close,
-  size: "large"
-}));
-const KeyCodes = {
-  esc: "Escape",
-  enter: "Enter",
-  backspace: "Backspace",
-  delete: "Delete",
-  spacebar: " ",
-  tab: "Tab",
-  semicolon: ";",
-  comma: ",",
-  arrowUp: "ArrowUp",
-  arrowDown: "ArrowDown"
-};
-const baseClass$q = "modal-base";
-const ModalBase = (_A) => {
-  var _B = _A, {
+const baseClass$s = "modal-base";
+const ModalBase = (_C) => {
+  var _D = _C, {
     children,
     className = "",
     onClose,
     closeOnEscPress = true,
     closeOnOverlayPress = true
-  } = _B, props = __objRest(_B, [
+  } = _D, props = __objRest(_D, [
     "children",
     "className",
     "onClose",
     "closeOnEscPress",
     "closeOnOverlayPress"
   ]);
-  const mergedClassNames = cx(styles$i[baseClass$q], className);
+  const mergedClassNames = cx(styles$l[baseClass$s], className);
   React.useEffect(() => {
     if (!closeOnEscPress) {
       return;
@@ -1822,75 +1919,81 @@ const ModalBase = (_A) => {
       onClose();
     }
   };
-  const onCloseButtonClick = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    onClose();
-  };
   return /* @__PURE__ */ React.createElement("div", {
     "data-testid": "lc-modal-overlay",
     onMouseDown: onOverlayClick,
-    className: cx(styles$i[`${baseClass$q}__overlay`], styles$i[`${baseClass$q}__overlay--visible`])
+    className: cx(styles$l[`${baseClass$s}__overlay`], styles$l[`${baseClass$s}__overlay--visible`])
   }, /* @__PURE__ */ React.createElement("div", __spreadValues({
+    role: "dialog",
+    "aria-modal": true,
     className: mergedClassNames
-  }, props), /* @__PURE__ */ React.createElement(ModalCloseButton, {
-    onClick: onCloseButtonClick
-  }), children));
+  }, props), children));
 };
-const baseClass$p = "action-modal";
-const ActionModal = (_C) => {
-  var _D = _C, {
-    children,
-    className = "",
-    icon: icon2,
-    heading,
-    actions
-  } = _D, props = __objRest(_D, [
-    "children",
-    "className",
-    "icon",
-    "heading",
-    "actions"
-  ]);
-  const mergedClassNames = cx(styles$i[baseClass$p], className);
-  return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
-    className: mergedClassNames
-  }, props), icon2 && /* @__PURE__ */ React.createElement("div", {
-    className: styles$i[`${baseClass$p}__icon`]
-  }, icon2), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$i[`${baseClass$p}__heading`]
-  }, heading), /* @__PURE__ */ React.createElement("div", {
-    className: styles$i[`${baseClass$p}__content`]
-  }, children), actions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$i[`${baseClass$p}__actions`]
-  }, actions));
-};
-const baseClass$o = "modal";
+const ModalCloseButton = ({
+  labelType,
+  customColor,
+  onClick
+}) => /* @__PURE__ */ React.createElement("button", {
+  title: "Close modal",
+  className: cx(styles$l["modal-base__close"], labelType && styles$l["modal-base__close--label-type"]),
+  onClick,
+  type: "button"
+}, /* @__PURE__ */ React.createElement(Icon, {
+  source: Close,
+  size: "large",
+  customColor
+}));
+const baseClass$r = "modal";
 const Modal = (_E) => {
   var _F = _E, {
     children,
     className = "",
     heading,
-    footer
+    labelHeading,
+    fullSpaceContent,
+    footer,
+    onClose
   } = _F, props = __objRest(_F, [
     "children",
     "className",
     "heading",
-    "footer"
+    "labelHeading",
+    "fullSpaceContent",
+    "footer",
+    "onClose"
   ]);
-  const mergedClassNames = cx(styles$i[baseClass$o], className);
+  const mergedClassNames = cx(styles$l[baseClass$r], className);
+  const onCloseButtonClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onClose();
+  };
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
-    className: mergedClassNames
-  }, props), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$i[`${baseClass$o}__header`]
+    className: mergedClassNames,
+    onClose
+  }, props), labelHeading && /* @__PURE__ */ React.createElement("div", {
+    className: styles$l[`${baseClass$r}__label-header`]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    size: "xs",
+    as: "div",
+    className: styles$l[`${baseClass$r}__label-heading`]
+  }, labelHeading), /* @__PURE__ */ React.createElement(ModalCloseButton, {
+    labelType: !!labelHeading,
+    customColor: `var(--color-white)`,
+    onClick: onCloseButtonClick
+  })), !labelHeading && heading && /* @__PURE__ */ React.createElement("div", {
+    className: styles$l[`${baseClass$r}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
     as: "div",
-    className: styles$i[`${baseClass$o}__heading`]
-  }, heading)), /* @__PURE__ */ React.createElement("div", {
-    className: styles$i[`${baseClass$o}__body`]
+    className: styles$l[`${baseClass$r}__heading`]
+  }, heading)), !labelHeading && /* @__PURE__ */ React.createElement(ModalCloseButton, {
+    onClick: onCloseButtonClick
+  }), /* @__PURE__ */ React.createElement("div", {
+    "data-testid": "modal-body",
+    className: cx(styles$l[`${baseClass$r}__body`], fullSpaceContent && styles$l[`${baseClass$r}__body--full-space`])
   }, children), footer && /* @__PURE__ */ React.createElement("div", {
-    className: styles$i[`${baseClass$o}__footer`]
+    className: styles$l[`${baseClass$r}__footer`]
   }, footer));
 };
 const ModalPortal = ({
@@ -1916,7 +2019,7 @@ const ModalPortal = ({
   }, [parentElementName]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, ReactDOM.createPortal(children, container));
 };
-var styles$h = {
+var styles$k = {
   "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",
@@ -1924,7 +2027,7 @@ var styles$h = {
   "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
-const baseClass$n = "numeric-input";
+const baseClass$q = "numeric-input";
 const NumericInput = (_G) => {
   var _H = _G, {
     className,
@@ -1948,10 +2051,10 @@ const NumericInput = (_G) => {
     "onChange"
   ]);
   const inputRef = React.useRef(null);
-  const mergedClassNames = cx(styles$h[baseClass$n], {
-    [styles$h[`${baseClass$n}--error`]]: error,
-    [styles$h[`${baseClass$n}--no-controls`]]: noControls,
-    [styles$h[`${baseClass$n}--disabled`]]: disabled
+  const mergedClassNames = cx(styles$k[baseClass$q], {
+    [styles$k[`${baseClass$q}--error`]]: error,
+    [styles$k[`${baseClass$q}--no-controls`]]: noControls,
+    [styles$k[`${baseClass$q}--disabled`]]: disabled
   }, className);
   const callOnChange = (val) => onChange(String(val));
   const calcValue = (val) => {
@@ -2016,7 +2119,7 @@ const NumericInput = (_G) => {
     disabled: disabled || hasReachedTheLimit(value, max),
     onClick: handleIncrementClick,
     "aria-label": "Increment value",
-    className: styles$h[`${baseClass$n}__increment`],
+    className: styles$k[`${baseClass$q}__increment`],
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: ChevronUp,
@@ -2026,7 +2129,7 @@ const NumericInput = (_G) => {
     tabIndex: -1,
     disabled: disabled || hasReachedTheLimit(value, min),
     "aria-label": "Decrement value",
-    className: styles$h[`${baseClass$n}__decrement`],
+    className: styles$k[`${baseClass$q}__decrement`],
     onClick: handleDecrementClick,
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
@@ -2035,7 +2138,7 @@ const NumericInput = (_G) => {
     disabled: disabled || hasReachedTheLimit(value, min)
   }))));
 };
-var styles$g = {
+var styles$j = {
   "picker-trigger": "lc-Trigger-module__picker-trigger___BIvTx",
   "picker-trigger--compact": "lc-Trigger-module__picker-trigger--compact___3i1DL",
   "picker-trigger--medium": "lc-Trigger-module__picker-trigger--medium___-fbEx",
@@ -2052,7 +2155,7 @@ var styles$g = {
   "picker-trigger--focused": "lc-Trigger-module__picker-trigger--focused___vTr39",
   "picker-trigger--error": "lc-Trigger-module__picker-trigger--error___Rh8Qd"
 };
-const baseClass$m = "picker-trigger";
+const baseClass$p = "picker-trigger";
 const Trigger = ({
   children,
   isSearchDisabled,
@@ -2067,7 +2170,7 @@ const Trigger = ({
   onClear
 }) => {
   const triggerRef = React.useRef(null);
-  const mergedClassNames = cx(styles$g[baseClass$m], styles$g[`${baseClass$m}--${size}`], isMultiSelect && styles$g[`${baseClass$m}--multi-select`], isMultiSelect && isItemSelected && styles$g[`${baseClass$m}--multi-select--with-items`], isDisabled && styles$g[`${baseClass$m}--disabled`], isOpen && styles$g[`${baseClass$m}--focused`], isError && styles$g[`${baseClass$m}--error`]);
+  const mergedClassNames = cx(styles$j[baseClass$p], styles$j[`${baseClass$p}--${size}`], isMultiSelect && styles$j[`${baseClass$p}--multi-select`], isMultiSelect && isItemSelected && styles$j[`${baseClass$p}--multi-select--with-items`], isDisabled && styles$j[`${baseClass$p}--disabled`], isOpen && styles$j[`${baseClass$p}--focused`], isError && styles$j[`${baseClass$p}--error`]);
   React.useEffect(() => {
     const onKeyDown = (e) => {
       const isFocused = document.activeElement === triggerRef.current;
@@ -2097,35 +2200,36 @@ const Trigger = ({
     onClick: handleTriggerClick,
     tabIndex: 0
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$g[`${baseClass$m}__content`]
+    className: styles$j[`${baseClass$p}__content`]
   }, children), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$g[`${baseClass$m}__controls`], styles$g[`${baseClass$m}__controls--${size}`])
+    className: cx(styles$j[`${baseClass$p}__controls`], styles$j[`${baseClass$p}__controls--${size}`])
   }, isItemSelected && !isDisabled && !isRequired && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$m}__clear-icon`,
-    className: styles$g[`${baseClass$m}__clear-icon`],
+    "data-testid": `${baseClass$p}__clear-icon`,
+    className: styles$j[`${baseClass$p}__clear-icon`],
     onClick: handleOnClearClick
   }, /* @__PURE__ */ React.createElement(Icon, {
     kind: "primary",
     size: "small",
     source: Close
   })), /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$g[`${baseClass$m}__chevron-icon`],
+    className: styles$j[`${baseClass$p}__chevron-icon`],
     source: !isOpen ? ChevronDown : ChevronUp,
     size: "large",
     disabled: isDisabled
   })));
 };
-var styles$f = {
+var styles$i = {
   "picker-list": "lc-PickerList-module__picker-list___FqdgZ",
   "picker-list__no-results": "lc-PickerList-module__picker-list__no-results___tX172",
   "picker-list__item": "lc-PickerList-module__picker-list__item___8QNS0",
   "picker-list__item--select-all": "lc-PickerList-module__picker-list__item--select-all___PlTHV",
   "picker-list__item__header": "lc-PickerList-module__picker-list__item__header___mxmg0",
+  "picker-list__item__content": "lc-PickerList-module__picker-list__item__content___D-tsE",
   "picker-list__item__custom": "lc-PickerList-module__picker-list__item__custom___kJEP6"
 };
 const SELECT_ALL_OPTION_KEY = "select-all";
-const baseClass$l = "picker-list";
-const itemClassName = `${baseClass$l}__item`;
+const baseClass$o = "picker-list";
+const itemClassName = `${baseClass$o}__item`;
 const PickerList = ({
   isOpen,
   items,
@@ -2137,8 +2241,8 @@ const PickerList = ({
   onSelect,
   onSelectAll
 }) => {
-  const mergedClassNames = cx(styles$f[baseClass$l], {
-    [styles$f[`${baseClass$l}__no-results`]]: items.length === 0
+  const mergedClassNames = cx(styles$i[baseClass$o], {
+    [styles$i[`${baseClass$o}__no-results`]]: items.length === 0
   });
   const [currentItemKey, setCurrentItemKey] = React.useState(null);
   const indexRef = React.useRef(-1);
@@ -2232,14 +2336,14 @@ const PickerList = ({
       "aria-current": currentItemKey === SELECT_ALL_OPTION_KEY,
       id: SELECT_ALL_OPTION_KEY,
       key: SELECT_ALL_OPTION_KEY,
-      className: cx(styles$f[itemClassName], styles$f[`${itemClassName}--select-all`]),
+      className: cx(styles$i[itemClassName], styles$i[`${itemClassName}--select-all`]),
       onClick: handleOnSelectAllClick
     }, selectAllOptionText);
   };
   const getOptionContent = (item) => {
     if (item == null ? void 0 : item.customElement) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: styles$f[`${itemClassName}__custom`]
+        className: styles$i[`${itemClassName}__custom`]
       }, item.customElement.listItemBody);
     }
     return item.name;
@@ -2262,10 +2366,11 @@ const PickerList = ({
       return /* @__PURE__ */ React.createElement("li", {
         role: "option",
         key: item.key,
-        className: styles$f[`${itemClassName}__header`]
+        className: styles$i[`${itemClassName}__header`]
       }, item.name);
     }
     return /* @__PURE__ */ React.createElement("li", {
+      "data-testid": item.key,
       ref: (element) => {
         if (currentItemKey === item.key) {
           element == null ? void 0 : element.scrollIntoView({ block: "nearest" });
@@ -2277,11 +2382,13 @@ const PickerList = ({
       "aria-disabled": item.disabled,
       id: item.key,
       key: item.key,
-      className: cx(styles$f[itemClassName], {
-        [styles$f[`${itemClassName}__custom`]]: item == null ? void 0 : item.customElement
+      className: cx(styles$i[itemClassName], {
+        [styles$i[`${itemClassName}__custom`]]: item == null ? void 0 : item.customElement
       }),
       onClick: () => !item.disabled && handleOnClick(item)
-    }, getOptionContent(item), isItemSelected(item.key) && /* @__PURE__ */ React.createElement(Icon, {
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: styles$i[`${itemClassName}__content`]
+    }, getOptionContent(item)), isItemSelected(item.key) && /* @__PURE__ */ React.createElement(Icon, {
       kind: "link",
       source: Check
     }));
@@ -2292,7 +2399,7 @@ 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$e = {
+var styles$h = {
   picker,
   picker__container,
   picker__label,
@@ -2305,7 +2412,7 @@ const tag__remove = "lc-Tag-module__tag__remove___UmtrW";
 const icon = "lc-Tag-module__icon___2Z-35";
 const tag__icon = "lc-Tag-module__tag__icon___tZoQ9";
 const tag__avatar = "lc-Tag-module__tag__avatar___U4c-P";
-var styles$d = {
+var styles$g = {
   tag,
   "tag--success": "lc-Tag-module__tag--success___P2hXQ",
   tag__remove,
@@ -2323,7 +2430,7 @@ var styles$d = {
   tag__icon,
   tag__avatar
 };
-const baseClass$k = "tag";
+const baseClass$n = "tag";
 const getCustomTextClass = (customColor) => {
   if (!customColor) {
     return "";
@@ -2336,6 +2443,7 @@ const Tag = (_I) => {
     children,
     dismissible = false,
     size = "medium",
+    iconSize = "medium",
     kind = "default",
     onRemove,
     outline = false,
@@ -2347,6 +2455,7 @@ const Tag = (_I) => {
     "children",
     "dismissible",
     "size",
+    "iconSize",
     "kind",
     "onRemove",
     "outline",
@@ -2354,11 +2463,11 @@ const Tag = (_I) => {
     "avatar",
     "customColor"
   ]);
-  const mergedClassNames = cx(styles$d[baseClass$k], className, styles$d[`${baseClass$k}--${size}`], styles$d[`${baseClass$k}--${kind}`], {
-    [styles$d[`${baseClass$k}--dismissible`]]: dismissible,
-    [styles$d[`${baseClass$k}--outline`]]: outline,
-    [styles$d[`${baseClass$k}--with-icon`]]: !!icon2 || !!avatar2,
-    [styles$d[`${baseClass$k}--${getCustomTextClass(customColor)}`]]: !!customColor
+  const mergedClassNames = cx(styles$g[baseClass$n], className, styles$g[`${baseClass$n}--${size}`], styles$g[`${baseClass$n}--${kind}`], {
+    [styles$g[`${baseClass$n}--dismissible`]]: dismissible,
+    [styles$g[`${baseClass$n}--outline`]]: outline,
+    [styles$g[`${baseClass$n}--with-icon`]]: !!icon2 || !!avatar2,
+    [styles$g[`${baseClass$n}--${getCustomTextClass(customColor)}`]]: !!customColor
   });
   const getCustomColorStyles = () => {
     if (!customColor) {
@@ -2390,13 +2499,13 @@ const Tag = (_I) => {
     as: "div",
     size: "md"
   }), avatar2 && /* @__PURE__ */ React.createElement("img", {
-    className: styles$d[`${baseClass$k}__avatar`],
+    className: styles$g[`${baseClass$n}__avatar`],
     src: avatar2,
     alt: "tag-avatar",
     "data-testid": "lc-tag-avatar"
   }), " ", icon2 && !avatar2 && /* @__PURE__ */ React.createElement(Icon, {
     "data-testid": "lc-tag-icon",
-    className: styles$d[`${baseClass$k}__icon`],
+    className: styles$g[`${baseClass$n}__icon`],
     source: icon2,
     size: "small",
     customColor: getIconCustomColor()
@@ -2404,25 +2513,28 @@ const Tag = (_I) => {
     title: "Remove",
     onClick: onRemove,
     type: "button",
-    className: styles$d[`${baseClass$k}__remove`]
+    className: styles$g[`${baseClass$n}__remove`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     "data-dismiss-icon": true,
     source: Close,
-    size: "medium",
+    size: iconSize,
     customColor: getIconCustomColor()
   })));
 };
-var styles$c = {
+var styles$f = {
   "picker-trigger-body": "lc-TriggerBody-module__picker-trigger-body___ZWjX9",
+  "picker-trigger-body__item": "lc-TriggerBody-module__picker-trigger-body__item___0DBg1",
   "picker-trigger-body__input": "lc-TriggerBody-module__picker-trigger-body__input___ezPyz"
 };
-const baseClass$j = "picker-trigger-body";
+const baseClass$m = "picker-trigger-body";
 const TriggerBody = ({
   isOpen,
   isSearchDisabled,
+  isDisabled,
   placeholder,
   items,
   type,
+  iconSize,
   onItemRemove,
   onFilter
 }) => {
@@ -2433,16 +2545,18 @@ const TriggerBody = ({
     }
     if (item == null ? void 0 : item.customElement) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: styles$c[`${baseClass$j}__custom`]
+        className: styles$f[`${baseClass$m}__custom`]
       }, item.customElement.selectedItemBody);
     }
-    return item.name;
+    return /* @__PURE__ */ React.createElement("div", {
+      className: styles$f[`${baseClass$m}__item`]
+    }, item.name);
   };
   const handleOnChange = (e) => {
     onFilter(e.target.value);
   };
   const getSearch = () => /* @__PURE__ */ React.createElement("input", {
-    className: styles$c[`${baseClass$j}__input`],
+    className: styles$f[`${baseClass$m}__input`],
     placeholder: "Select option",
     onChange: handleOnChange,
     autoFocus: true
@@ -2451,17 +2565,18 @@ const TriggerBody = ({
     return shouldDisplaySearch ? getSearch() : /* @__PURE__ */ React.createElement("div", null, placeholder);
   }
   return /* @__PURE__ */ React.createElement("div", {
-    className: styles$c[baseClass$j]
+    className: styles$f[baseClass$m]
   }, type === "single" ? getSingleItem(items[0]) : items.map((item) => {
     return /* @__PURE__ */ React.createElement(Tag, {
       key: item.name,
-      className: styles$c[`${baseClass$j}__tag`],
-      dismissible: true,
+      className: styles$f[`${baseClass$m}__tag`],
+      iconSize,
+      dismissible: !isDisabled,
       onRemove: () => onItemRemove(item)
     }, getSingleItem(item));
   }), shouldDisplaySearch && getSearch());
 };
-const baseClass$i = "picker";
+const baseClass$l = "picker";
 const Picker = ({
   className,
   disabled,
@@ -2470,6 +2585,7 @@ const Picker = ({
   options,
   selected,
   size = "medium",
+  tagIconSize = "medium",
   placeholder = "Select option",
   isRequired,
   noSearchResultText = "No results found",
@@ -2481,7 +2597,7 @@ const Picker = ({
   const [isListOpen, setIsListOpen] = React.useState(false);
   const [searchPhrase, setSearchPhrase] = React.useState(null);
   const triggerRef = React.useRef(null);
-  const mergedClassNames = cx(styles$e[baseClass$i], className);
+  const mergedClassNames = cx(styles$h[baseClass$l], className);
   React.useEffect(() => {
     if (isListOpen) {
       const onDocumentClick = (e) => {
@@ -2529,7 +2645,7 @@ const Picker = ({
     if ((newSelectedItemsKeys == null ? void 0 : newSelectedItemsKeys.length) === 0) {
       return onSelect(null);
     }
-    const newSelectedItems = items.filter((item2) => newSelectedItemsKeys.includes(item2.key));
+    const newSelectedItems = options.filter((item2) => newSelectedItemsKeys.includes(item2.key));
     onSelect(newSelectedItems);
   };
   const isItemSelectable = (item) => !item.disabled && !item.groupHeader && item.key !== SELECT_ALL_OPTION_KEY;
@@ -2573,11 +2689,11 @@ const Picker = ({
     ref: triggerRef,
     className: mergedClassNames
   }, label && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$e[`${baseClass$i}__label`], {
-      [styles$e[`${baseClass$i}__label--disabled`]]: disabled
+    className: cx(styles$h[`${baseClass$l}__label`], {
+      [styles$h[`${baseClass$l}__label--disabled`]]: disabled
     })
   }, label), /* @__PURE__ */ React.createElement("div", {
-    className: styles$e[`${baseClass$i}__container`]
+    className: styles$h[`${baseClass$l}__container`]
   }, /* @__PURE__ */ React.createElement(Trigger, {
     isSearchDisabled: searchDisabled,
     isError: !!error,
@@ -2592,7 +2708,9 @@ const Picker = ({
   }, /* @__PURE__ */ React.createElement(TriggerBody, {
     isOpen: isListOpen,
     isSearchDisabled: searchDisabled,
+    isDisabled: disabled,
     placeholder,
+    iconSize: tagIconSize,
     items: selected,
     type,
     onItemRemove: handleItemRemove,
@@ -2608,9 +2726,9 @@ const Picker = ({
     onSelect: handleSelect,
     onSelectAll: handleSelectAll
   })), error && /* @__PURE__ */ React.createElement("div", {
-    className: styles$e[`${baseClass$i}__error`]
+    className: styles$h[`${baseClass$l}__error`]
   }, /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$e[`${baseClass$i}__error__icon`],
+    className: styles$h[`${baseClass$l}__error__icon`],
     source: Error2,
     kind: "error",
     size: "small"
@@ -2624,6 +2742,7 @@ var cssStyles = {
 const Popover = (props) => {
   const {
     triggerRenderer,
+    onClose,
     children,
     className,
     placement,
@@ -2631,6 +2750,7 @@ const Popover = (props) => {
     isVisible = false
   } = props;
   const [visible, setVisibility] = React.useState(false);
+  const prevVisibleState = React.useRef(false);
   const {
     x,
     y,
@@ -2647,6 +2767,12 @@ const Popover = (props) => {
   React.useEffect(() => {
     setVisibility(isVisible);
   }, [isVisible]);
+  React.useEffect(() => {
+    if (onClose && prevVisibleState.current !== visible && !visible) {
+      onClose();
+    }
+    prevVisibleState.current = visible;
+  }, [visible]);
   React.useEffect(() => {
     if (!refs.reference.current || !refs.floating.current) {
       return;
@@ -2709,7 +2835,7 @@ function getProgressStatus(status, percent) {
   }
   return status || "normal";
 }
-var styles$b = {
+var styles$e = {
   "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",
@@ -2735,7 +2861,7 @@ const SIZE_VALUE_FROM_SIZE = {
   medium: 36,
   large: 56
 };
-const baseClass$h = "progress-circle";
+const baseClass$k = "progress-circle";
 const ProgressCircle = React.forwardRef((_K, ref) => {
   var _L = _K, {
     status = "normal",
@@ -2752,9 +2878,9 @@ const ProgressCircle = React.forwardRef((_K, ref) => {
   const percentNumber = getPercentNumber(progressStatus, progressValue);
   const thickness = THICKNESS_FROM_SIZE[size];
   const sizeValue = SIZE_VALUE_FROM_SIZE[size];
-  const mergedClassNames = cx(styles$b[baseClass$h], {
-    [styles$b[`${baseClass$h}--${size}`]]: size,
-    [styles$b[`${baseClass$h}--${status}`]]: status
+  const mergedClassNames = cx(styles$e[baseClass$k], {
+    [styles$e[`${baseClass$k}--${size}`]]: size,
+    [styles$e[`${baseClass$k}--${status}`]]: status
   }, className);
   const circumference = 2 * Math.PI * ((sizeValue - thickness) / 2);
   const indicatorStyle = {
@@ -2769,14 +2895,14 @@ const ProgressCircle = React.forwardRef((_K, ref) => {
   }, restProps), /* @__PURE__ */ React.createElement("svg", {
     viewBox: svgViewBox
   }, /* @__PURE__ */ React.createElement("circle", {
-    className: styles$b[`${baseClass$h}__bg-line--${status}`],
+    className: styles$e[`${baseClass$k}__bg-line--${status}`],
     cx: sizeValue,
     cy: sizeValue,
     r: (sizeValue - thickness) / 2,
     fill: "none",
     strokeWidth: thickness
   }), /* @__PURE__ */ React.createElement("circle", {
-    className: styles$b[`${baseClass$h}__indicator--${status}`],
+    className: styles$e[`${baseClass$k}__indicator--${status}`],
     style: indicatorStyle,
     cx: sizeValue,
     cy: sizeValue,
@@ -2785,7 +2911,7 @@ const ProgressCircle = React.forwardRef((_K, ref) => {
     strokeWidth: thickness
   })));
 });
-var styles$a = {
+var styles$d = {
   "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",
@@ -2796,7 +2922,7 @@ var styles$a = {
   "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$g = "progress-bar";
+const baseClass$j = "progress-bar";
 const ProgressBar = React.forwardRef((_M, ref) => {
   var _N = _M, {
     status = "normal",
@@ -2811,20 +2937,20 @@ const ProgressBar = React.forwardRef((_M, ref) => {
   ]);
   const progressStatus = getProgressStatus(status, percent);
   const percentNumber = getPercentNumber(progressStatus, percent);
-  const mergedClassNames = cx(styles$a[baseClass$g], {
-    [styles$a[`${baseClass$g}--${size}`]]: size,
-    [styles$a[`${baseClass$g}--${status}`]]: status
+  const mergedClassNames = cx(styles$d[baseClass$j], {
+    [styles$d[`${baseClass$j}--${size}`]]: size,
+    [styles$d[`${baseClass$j}--${status}`]]: status
   }, className);
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames,
     ref,
     role: "progressbar"
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$g}__indicator--${status}`],
+    className: styles$d[`${baseClass$j}__indicator--${status}`],
     style: { width: `${percentNumber}%` }
   }));
 });
-var styles$9 = {
+var styles$c = {
   "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",
@@ -2840,7 +2966,7 @@ var styles$9 = {
 const SMALL_CONTAINER_WIDTH_TRESHOLD = 400;
 const LARGE_CONTAINER_WIDTH_TRESHOLD = 800;
 const RESIZE_DEBOUNCE_TRESHOLD = 500;
-const baseClass$f = "promo-banner";
+const baseClass$i = "promo-banner";
 const PromoBanner = ({
   className,
   buttonText,
@@ -2855,10 +2981,10 @@ const PromoBanner = ({
 }) => {
   const containerRef = React.useRef(null);
   const [containerSize, setContainerSize] = React.useState("medium");
-  const mergedClassNames = cx(styles$9[baseClass$f], {
-    [styles$9[`${baseClass$f}--light`]]: light,
-    [styles$9[`${baseClass$f}--small`]]: containerSize === "small",
-    [styles$9[`${baseClass$f}--large`]]: containerSize === "large"
+  const mergedClassNames = cx(styles$c[baseClass$i], {
+    [styles$c[`${baseClass$i}--light`]]: light,
+    [styles$c[`${baseClass$i}--small`]]: containerSize === "small",
+    [styles$c[`${baseClass$i}--large`]]: containerSize === "large"
   }, className);
   React.useEffect(() => {
     const handleResize = () => {
@@ -2879,12 +3005,12 @@ const PromoBanner = ({
     };
   }, []);
   const footer = /* @__PURE__ */ React.createElement("div", {
-    className: styles$9[`${baseClass$f}__footer`]
+    className: styles$c[`${baseClass$i}__footer`]
   }, buttonText && /* @__PURE__ */ React.createElement(Button, {
     kind: "primary",
     size: "compact",
     onClick: onButtonClick,
-    className: styles$9[`${baseClass$f}__button-text`]
+    className: styles$c[`${baseClass$i}__button-text`]
   }, buttonText), linkText && /* @__PURE__ */ React.createElement(Button, {
     size: "compact",
     kind: "text",
@@ -2894,24 +3020,24 @@ const PromoBanner = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$9[`${baseClass$f}__content`]
+    className: styles$c[`${baseClass$i}__content`]
   }, img && /* @__PURE__ */ React.createElement("img", {
     src: img,
-    className: styles$9[`${baseClass$f}__img`]
+    className: styles$c[`${baseClass$i}__img`]
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$9[`${baseClass$f}__wrapper`]
+    className: styles$c[`${baseClass$i}__wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$9[`${baseClass$f}__header`]
+    className: styles$c[`${baseClass$i}__header`]
   }, header), /* @__PURE__ */ React.createElement("div", null, children), containerSize !== "large" && footer), containerSize === "large" && footer), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$9[`${baseClass$f}__close-icon`],
+    className: styles$c[`${baseClass$i}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
     size: "large"
   })));
 };
-var styles$8 = {
+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",
@@ -2922,23 +3048,23 @@ var styles$8 = {
   "radio-button--selected": "lc-RadioButton-module__radio-button--selected___s9lqj",
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
-const baseClass$e = "radio-button";
+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 mergedClassNames = cx(styles$8[baseClass$e], className, {
-    [styles$8[`${baseClass$e}--selected`]]: checked,
-    [styles$8[`${baseClass$e}--disabled`]]: disabled
+  const mergedClassNames = cx(styles$b[baseClass$h], className, {
+    [styles$b[`${baseClass$h}--selected`]]: checked,
+    [styles$b[`${baseClass$h}--disabled`]]: disabled
   });
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$8[`${baseClass$e}__label`]
+    className: styles$b[`${baseClass$h}__label`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$8[`${baseClass$e}__circle`]
+    className: styles$b[`${baseClass$h}__circle`]
   }, /* @__PURE__ */ React.createElement("span", {
-    className: styles$8[`${baseClass$e}__inner-circle`]
+    className: styles$b[`${baseClass$h}__inner-circle`]
   }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
-    className: styles$8[`${baseClass$e}__input`],
+    className: styles$b[`${baseClass$h}__input`],
     ref,
     type: "radio",
     checked,
@@ -2946,26 +3072,27 @@ const RadioButton = React.forwardRef((_O, ref) => {
   }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$8[`${baseClass$e}__text`]
+    className: styles$b[`${baseClass$h}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$8[`${baseClass$e}__helper`]
+    className: styles$b[`${baseClass$h}__helper`]
   }, description));
 });
-var styles$7 = {
+var styles$a = {
   "search-input": "lc-Search-module__search-input___FsbCk",
+  "search-input--compact": "lc-Search-module__search-input--compact___498To",
+  "search-input--medium": "lc-Search-module__search-input--medium___Hwteg",
+  "search-input--large": "lc-Search-module__search-input--large___-IBuC",
+  "search-input--focused": "lc-Search-module__search-input--focused___i2eul",
+  "search-input--disabled": "lc-Search-module__search-input--disabled___LSJ2e",
+  "search-input--collapsable": "lc-Search-module__search-input--collapsable___5GaIH",
   "search-input__search-icon": "lc-Search-module__search-input__search-icon___BBQoD",
+  "search-input--collapsable--open": "lc-Search-module__search-input--collapsable--open___vqTpD",
   "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$d = "search-input";
-const inputBaseClass = `${baseClass$d}__input`;
+  "search-input__input": "lc-Search-module__search-input__input___OhyTr"
+};
+const baseClass$g = "search-input";
+const inputBaseClass = `${baseClass$g}__input`;
 const SearchInput = ({
   isCollapsable,
   isDisabled,
@@ -2976,23 +3103,22 @@ const SearchInput = ({
   className,
   onChange
 }) => {
-  const [searchValue, setSearchValue] = React.useState(value || "");
   const [isCollapsed, setIsCollapsed] = React.useState(true);
+  const [isFocused, setIsFocused] = React.useState(false);
   const inputRef = React.useRef(null);
-  const isCloseIconVisible = !!searchValue && !isDisabled && !isLoading;
-  const mergedClassNames = cx(className, styles$7[`${inputBaseClass}`], styles$7[`${inputBaseClass}--${size}`], (isDisabled || isLoading) && styles$7[`${inputBaseClass}--disabled`], isCollapsable && styles$7[`${inputBaseClass}--collapsable`], !isCollapsed && styles$7[`${inputBaseClass}--collapsable--open`]);
+  const isCloseIconVisible = !!value && !isDisabled && !isLoading;
+  const ariaExpandedValue = isCollapsable && !isCollapsed && "true";
+  const mergedClassNames = cx(className, styles$a[baseClass$g], styles$a[`${baseClass$g}--${size}`], isFocused && styles$a[`${baseClass$g}--focused`], isDisabled && styles$a[`${baseClass$g}--disabled`], isCollapsable && styles$a[`${baseClass$g}--collapsable`], !isCollapsed && styles$a[`${baseClass$g}--collapsable--open`]);
   React.useEffect(() => {
-    if (typeof value === "string") {
-      setSearchValue(value);
+    if (isCollapsable && !!value) {
+      setIsCollapsed(false);
     }
-  }, [value]);
+  }, [isCollapsable]);
   const handleOnChange = (e) => {
     const value2 = e.currentTarget.value;
-    setSearchValue(value2);
     onChange(value2);
   };
   const handleClear = () => {
-    setSearchValue("");
     onChange("");
   };
   const handleClick = () => {
@@ -3003,47 +3129,53 @@ const SearchInput = ({
     if (isCollapsable) {
       setIsCollapsed(false);
     }
+    setIsFocused(true);
   };
   const handleBlur = () => {
-    if (isCollapsable && !searchValue) {
+    if (isCollapsable && !value) {
       setIsCollapsed(true);
     }
+    setIsFocused(false);
   };
   const handleKeyDown = (e) => {
     if (e.key === KeyCodes.enter) {
       e.preventDefault();
-      onChange(searchValue);
+      onChange(value);
     }
   };
   return /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$d}-container`,
-    className: styles$7[baseClass$d],
+    "aria-expanded": ariaExpandedValue,
+    role: "search",
+    className: mergedClassNames,
     onClick: handleClick
   }, /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$7[`${baseClass$d}__search-icon`],
+    className: styles$a[`${baseClass$g}__search-icon`],
     source: Search,
-    disabled: isDisabled || isLoading,
+    disabled: isDisabled,
     kind: "primary"
   }), /* @__PURE__ */ React.createElement("input", {
+    role: "searchbox",
     ref: inputRef,
-    className: mergedClassNames,
+    className: styles$a[inputBaseClass],
     type: "text",
-    value: searchValue,
+    value,
     placeholder,
     onChange: handleOnChange,
     onBlur: handleBlur,
     onFocus: handleFocus,
     onKeyDown: handleKeyDown,
-    disabled: isDisabled || isLoading
-  }), isCloseIconVisible && /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$d}__clear-icon`],
-    "data-testid": `${baseClass$d}-clear-icon`,
+    disabled: isDisabled
+  }), isCloseIconVisible && /* @__PURE__ */ React.createElement("button", {
+    "aria-label": "Clear search",
+    title: "Clear search",
+    className: styles$a[`${baseClass$g}__clear-icon`],
     onClick: handleClear
   }, /* @__PURE__ */ React.createElement(Icon, {
-    source: Close
+    source: Close,
+    kind: "primary"
   })), isLoading && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$d}-loader`,
-    className: styles$7[`${baseClass$d}__loader`]
+    "data-testid": `${baseClass$g}-loader`,
+    className: styles$a[`${baseClass$g}__loader`]
   }, /* @__PURE__ */ React.createElement(Loader, {
     size: "small"
   })));
@@ -3054,7 +3186,7 @@ const switch__track = "lc-Switch-module__switch__track___2wr2M";
 const switch__slider = "lc-Switch-module__switch__slider___WHd--";
 const switch__loader = "lc-Switch-module__switch__loader___FE-fA";
 const switch__icon = "lc-Switch-module__switch__icon___-O1qY";
-var styles$6 = {
+var styles$9 = {
   "switch": "lc-Switch-module__switch___AaA2k",
   "switch__track--enabled": "lc-Switch-module__switch__track--enabled___sy4Xl",
   "switch__track--on": "lc-Switch-module__switch__track--on___aOMWe",
@@ -3083,13 +3215,13 @@ var styles$6 = {
   "switch__loader--large": "lc-Switch-module__switch__loader--large___vLRFa",
   switch__icon
 };
-const baseClass$c = "switch";
+const baseClass$f = "switch";
 const Switch = (_Q) => {
   var _R = _Q, {
     className = "",
     defaultOn = false,
     disabled = false,
-    name = baseClass$c,
+    name = baseClass$f,
     on,
     onChange = noop,
     size = "large",
@@ -3120,7 +3252,7 @@ const Switch = (_Q) => {
   const toggleStyles = checked ? "on" : "off";
   const shouldBehaveAsDisabled = disabled || isLoading || isLocked;
   const availabilityStyles = shouldBehaveAsDisabled ? "disabled" : "enabled";
-  const mergedClassNames = cx(styles$6[baseClass$c], styles$6[`${baseClass$c}--${size}`], className);
+  const mergedClassNames = cx(styles$9[baseClass$f], styles$9[`${baseClass$f}--${size}`], className);
   const handleChange = (e) => {
     const hasOnChangePassed = onChange !== noop;
     if (hasOnChangePassed) {
@@ -3134,7 +3266,7 @@ const Switch = (_Q) => {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("input", __spreadValues({
     type: "checkbox",
-    className: cx(styles$6[`${baseClass$c}__input`], styles$6[`${baseClass$c}__input--${availabilityStyles}`]),
+    className: cx(styles$9[`${baseClass$f}__input`], styles$9[`${baseClass$f}__input--${availabilityStyles}`]),
     onChange: handleChange,
     checked,
     name,
@@ -3142,15 +3274,15 @@ const Switch = (_Q) => {
     disabled: shouldBehaveAsDisabled,
     "aria-label": ariaLabel
   }, props)), /* @__PURE__ */ React.createElement("span", {
-    className: styles$6[`${baseClass$c}__container`]
+    className: styles$9[`${baseClass$f}__container`]
   }, /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$6[`${baseClass$c}__track`], styles$6[`${baseClass$c}__track--${toggleStyles}`], styles$6[`${baseClass$c}__track--${availabilityStyles}`])
+    className: cx(styles$9[`${baseClass$f}__track`], styles$9[`${baseClass$f}__track--${toggleStyles}`], styles$9[`${baseClass$f}__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}`])
+    className: cx(styles$9[`${baseClass$f}__slider`], styles$9[`${baseClass$f}__slider--${size}`], styles$9[`${baseClass$f}__slider--${size}--${toggleStyles}`])
   }, isLoading && /* @__PURE__ */ React.createElement(Loader, {
-    className: cx(styles$6[`${baseClass$c}__loader`], styles$6[`${baseClass$c}__loader--${size}`])
+    className: cx(styles$9[`${baseClass$f}__loader`], styles$9[`${baseClass$f}__loader--${size}`])
   }), isLocked && /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$6[`${baseClass$c}__icon`],
+    className: styles$9[`${baseClass$f}__icon`],
     "data-testid": "lock-icon",
     size: iconSize,
     source: LockBlack,
@@ -3158,49 +3290,67 @@ const Switch = (_Q) => {
   }))));
 };
 const tab = "lc-Tab-module__tab___fME7u";
-const tab__description = "lc-Tab-module__tab__description___JGXU6";
-var styles$5 = {
+const tab__count = "lc-Tab-module__tab__count___gc8tA";
+const tab__badge = "lc-Tab-module__tab__badge___W9c-T";
+var styles$8 = {
   tab,
-  tab__description,
-  "tab--selected": "lc-Tab-module__tab--selected___c0EkL"
+  tab__count,
+  "tab--compact": "lc-Tab-module__tab--compact___4qead",
+  "tab--medium": "lc-Tab-module__tab--medium___bHnGV",
+  "tab--large": "lc-Tab-module__tab--large___JL30g",
+  tab__badge,
+  "tab--selected": "lc-Tab-module__tab--selected___c0EkL",
+  "tab--disabled": "lc-Tab-module__tab--disabled___URdTh"
 };
-const baseClass$b = "tab";
+const baseClass$e = "tab";
 const Tab = (_S) => {
   var _T = _S, {
     children,
     className,
-    description,
-    isSelected
+    count,
+    isSelected,
+    asBadge,
+    size = "medium"
   } = _T, restProps = __objRest(_T, [
     "children",
     "className",
-    "description",
-    "isSelected"
+    "count",
+    "isSelected",
+    "asBadge",
+    "size"
   ]);
+  const { disabled } = restProps;
+  const shouldDisplayAsCounter = count && !asBadge;
+  const shouldDisplayAsBadge = count && asBadge;
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({}, restProps), {
     as: restProps.href ? "a" : "button",
     size: "md",
     bold: isSelected,
-    className: cx(styles$5[baseClass$b], className, isSelected && styles$5[`${baseClass$b}--selected`])
-  }), children, description && /* @__PURE__ */ React.createElement(Text, {
+    className: cx(className, styles$8[baseClass$e], styles$8[`${baseClass$e}--${size}`], isSelected && styles$8[`${baseClass$e}--selected`], disabled && styles$8[`${baseClass$e}--disabled`])
+  }), children, shouldDisplayAsCounter && /* @__PURE__ */ React.createElement(Text, {
     as: "span",
     size: "md",
-    className: styles$5[`${baseClass$b}__description`]
-  }, "(", description, ")"));
+    className: styles$8[`${baseClass$e}__count`]
+  }, "(", count, ")"), shouldDisplayAsBadge && /* @__PURE__ */ React.createElement(Badge, {
+    "data-testid": "tab-badge",
+    count,
+    size: "compact",
+    className: styles$8[`${baseClass$e}__badge`]
+  }));
 };
 const tabs = "lc-TabsWrapper-module__tabs___Y2xyD";
 const tabs__list = "lc-TabsWrapper-module__tabs__list___i6tVO";
-var styles$4 = {
+var styles$7 = {
   tabs,
   tabs__list
 };
-const baseClass$a = "tabs";
+const baseClass$d = "tabs";
 const TabsWrapper = ({
   className,
   children
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$4[baseClass$a], className)
+    className: cx(styles$7[baseClass$d], className)
   }, children);
 };
 const TabsList = ({
@@ -3208,7 +3358,7 @@ const TabsList = ({
   children
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$4[`${baseClass$a}__list`], className)
+    className: cx(styles$7[`${baseClass$d}__list`], className)
   }, children);
 };
 const EditableTagContent = ({
@@ -3268,7 +3418,7 @@ const EditableTagContent = ({
     dangerouslySetInnerHTML: { __html: escape(value) }
   });
 };
-var styles$3 = {
+var styles$6 = {
   "tag-input": "lc-TagInput-module__tag-input___CLVY-",
   "tag-input--error": "lc-TagInput-module__tag-input--error___RP0SB",
   "tag-input__input": "lc-TagInput-module__tag-input__input___dgEYB",
@@ -3276,7 +3426,7 @@ var styles$3 = {
   "tag-input__input--large": "lc-TagInput-module__tag-input__input--large___G6iEO",
   "tag-input__tag__content": "lc-TagInput-module__tag-input__tag__content___x95-M"
 };
-const baseClass$9 = "tag-input__tag";
+const baseClass$c = "tag-input__tag";
 const EditableTag = ({
   children,
   index: index2,
@@ -3300,13 +3450,13 @@ const EditableTag = ({
     value: children,
     inputRef,
     innerEditableRef,
-    className: styles$3[`${baseClass$9}__content`],
+    className: styles$6[`${baseClass$c}__content`],
     change: (newValue) => update(index2, newValue),
     remove: removeTag,
     validator
   }));
 };
-const baseClass$8 = "tag-input";
+const baseClass$b = "tag-input";
 const tagSeparatorKeys = [
   KeyCodes.enter,
   KeyCodes.spacebar,
@@ -3324,10 +3474,10 @@ const TagInput = ({
   placeholder,
   size = "medium"
 }) => {
-  const mergedClassNames = cx(styles$3[baseClass$8], {
-    [styles$3[`${baseClass$8}--error`]]: error
+  const mergedClassNames = cx(styles$6[baseClass$b], {
+    [styles$6[`${baseClass$b}--error`]]: error
   });
-  const inputClassNames = cx(styles$3[`${baseClass$8}__input`], styles$3[`${baseClass$8}__input--${size}`]);
+  const inputClassNames = cx(styles$6[`${baseClass$b}__input`], styles$6[`${baseClass$b}__input--${size}`]);
   const [inputValue, setInputValue] = React.useState("");
   const inputRef = React.useRef(null);
   const addTag = (value) => {
@@ -3417,7 +3567,7 @@ 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";
-var styles$2 = {
+var styles$5 = {
   toast,
   toast__content,
   toast__actions,
@@ -3460,7 +3610,7 @@ const iconConfig = {
     source: Info$1
   }
 };
-const baseClass$7 = "toast";
+const baseClass$a = "toast";
 const Toast = (_U) => {
   var _V = _U, {
     action,
@@ -3477,7 +3627,7 @@ const Toast = (_U) => {
     "kind",
     "onClose"
   ]);
-  const mergedClassNames = cx(styles$2[baseClass$7], styles$2[`${baseClass$7}--${kind}`], className);
+  const mergedClassNames = cx(styles$5[baseClass$a], styles$5[`${baseClass$a}--${kind}`], className);
   const onActionClick = (action2) => {
     if (action2 && action2.closesOnClick && onClose) {
       action2.onClick();
@@ -3488,19 +3638,19 @@ const Toast = (_U) => {
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: mergedClassNames
   }, divProps), /* @__PURE__ */ React.createElement("div", {
-    className: styles$2[`${baseClass$7}__icon`]
+    className: styles$5[`${baseClass$a}__icon`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, iconConfig[kind]), {
     size: "medium"
   }))), /* @__PURE__ */ React.createElement("div", {
-    className: styles$2[`${baseClass$7}__content`]
+    className: styles$5[`${baseClass$a}__content`]
   }, children), (action || removable) && /* @__PURE__ */ React.createElement("div", {
-    className: styles$2[`${baseClass$7}__actions`]
+    className: styles$5[`${baseClass$a}__actions`]
   }, action && /* @__PURE__ */ React.createElement(Button, {
-    className: styles$2[`${baseClass$7}__actions--custom`],
+    className: styles$5[`${baseClass$a}__actions--custom`],
     kind: "plain",
     onClick: () => onActionClick(action)
   }, action.label), removable && /* @__PURE__ */ React.createElement("div", {
-    className: styles$2[`${baseClass$7}__actions--close`],
+    className: styles$5[`${baseClass$a}__actions--close`],
     "aria-label": "Close toast",
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
@@ -3510,7 +3660,7 @@ const Toast = (_U) => {
   }))));
 };
 const ANIMATION_TIME = 200;
-const baseClass$6 = "toast-wrapper";
+const baseClass$9 = "toast-wrapper";
 const ToastWrapper = ({
   className,
   toasts = [],
@@ -3520,11 +3670,11 @@ const ToastWrapper = ({
   verticalPosition = "top",
   horizontalPosition = "center"
 }) => {
-  const mergedClassNames = cx(styles$2[baseClass$6], {
-    [styles$2[`${baseClass$6}--fixed`]]: fixed,
-    [styles$2[`${baseClass$6}--block`]]: !fixed && block,
-    [styles$2[`${baseClass$6}--horizontal-${horizontalPosition}`]]: horizontalPosition,
-    [styles$2[`${baseClass$6}--vertical-${verticalPosition}`]]: verticalPosition
+  const mergedClassNames = cx(styles$5[baseClass$9], {
+    [styles$5[`${baseClass$9}--fixed`]]: fixed,
+    [styles$5[`${baseClass$9}--block`]]: !fixed && block,
+    [styles$5[`${baseClass$9}--horizontal-${horizontalPosition}`]]: horizontalPosition,
+    [styles$5[`${baseClass$9}--vertical-${verticalPosition}`]]: verticalPosition
   }, className);
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
@@ -3533,10 +3683,10 @@ const ToastWrapper = ({
   }, toasts.map(({ id, kind, content, removable, action, onClose }) => /* @__PURE__ */ React.createElement(CSSTransition, {
     key: id,
     classNames: {
-      enter: styles$2[`toast-appear--${animationType}`],
-      enterActive: styles$2[`toast-appear-active--${animationType}`],
-      exit: styles$2[`toast-exit--${animationType}`],
-      exitActive: styles$2[`toast-exit-active--${animationType}`]
+      enter: styles$5[`toast-appear--${animationType}`],
+      enterActive: styles$5[`toast-appear-active--${animationType}`],
+      exit: styles$5[`toast-exit--${animationType}`],
+      exitActive: styles$5[`toast-exit-active--${animationType}`]
     },
     timeout: ANIMATION_TIME
   }, /* @__PURE__ */ React.createElement(Toast, {
@@ -3548,7 +3698,7 @@ const ToastWrapper = ({
 };
 const tooltip = "lc-Tooltip-module__tooltip___QOOAr";
 const tooltip__arrow = "lc-Tooltip-module__tooltip__arrow___Ov1YW";
-var styles$1 = {
+var styles$4 = {
   tooltip,
   "tooltip--invert": "lc-Tooltip-module__tooltip--invert___PVjhE",
   "tooltip--important": "lc-Tooltip-module__tooltip--important___X-IMK",
@@ -3566,7 +3716,7 @@ var styles$1 = {
 const sleep = (milliseconds) => {
   return new Promise((resolve) => setTimeout(resolve, milliseconds));
 };
-const baseClass$5 = "tooltip";
+const baseClass$8 = "tooltip";
 const Tooltip = (props) => {
   const {
     triggerRenderer,
@@ -3676,9 +3826,9 @@ const Tooltip = (props) => {
   };
   const top = arrowOffsetY && arrowY ? arrowY + arrowOffsetY : arrowY;
   const left = arrowOffsetX && arrowX ? arrowX + arrowOffsetX : arrowX;
-  const mergedClassNames = cx(styles$1[baseClass$5], className, {
-    [styles$1[`${baseClass$5}--invert`]]: theme === "invert",
-    [styles$1[`${baseClass$5}--important`]]: theme === "important"
+  const mergedClassNames = cx(styles$4[baseClass$8], className, {
+    [styles$4[`${baseClass$8}--invert`]]: theme === "invert",
+    [styles$4[`${baseClass$8}--important`]]: theme === "important"
   });
   const floatingComponent = /* @__PURE__ */ React.createElement("div", {
     ref: floating,
@@ -3700,7 +3850,7 @@ const Tooltip = (props) => {
     return null;
   }), /* @__PURE__ */ React.createElement("div", {
     ref: arrowRef,
-    className: cx([styles$1[`${baseClass$5}__arrow`]]),
+    className: cx([styles$4[`${baseClass$8}__arrow`]]),
     "data-arrow-placement": updatedPlacement,
     style: { top, left }
   }));
@@ -3776,23 +3926,23 @@ function getIconType(theme) {
       return "primary";
   }
 }
-const baseClass$4 = "tooltip";
+const baseClass$7 = "tooltip";
 const Info = ({ header, text, closeWithX, theme, handleCloseAction }) => {
   return /* @__PURE__ */ React.createElement("div", {
     style: { position: "relative" }
   }, closeWithX && /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$4}-close`],
+    className: styles$4[`${baseClass$7}-close`],
     onClick: handleCloseAction
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
     kind: theme ? getIconType(theme) : "primary"
   })), header && /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$4}-header`]
+    className: styles$4[`${baseClass$7}-header`]
   }, header), /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$4}-text`]
+    className: styles$4[`${baseClass$7}-text`]
   }, text));
 };
-const baseClass$3 = "tooltip";
+const baseClass$6 = "tooltip";
 const Interactive = ({
   header,
   text,
@@ -3809,7 +3959,7 @@ const Interactive = ({
   }, /* @__PURE__ */ React.createElement("div", {
     style: { position: "relative", height: "25px", marginBottom: "10px" }
   }, closeWithX && /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$3}-close`]
+    className: styles$4[`${baseClass$6}-close`]
   }, /* @__PURE__ */ React.createElement("div", {
     onClick: handleCloseAction
   }, /* @__PURE__ */ React.createElement(Icon, {
@@ -3818,13 +3968,13 @@ const Interactive = ({
   })))), image && /* @__PURE__ */ React.createElement("div", {
     style: { margin: "0 4px" }
   }, /* @__PURE__ */ React.createElement("img", {
-    className: styles$1[`${baseClass$3}-image`],
+    className: styles$4[`${baseClass$6}-image`],
     src: image.src,
     alt: image.alt
   })), header && /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$3}-header`]
+    className: styles$4[`${baseClass$6}-header`]
   }, header), /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$3}-text`]
+    className: styles$4[`${baseClass$6}-text`]
   }, text), /* @__PURE__ */ React.createElement("div", {
     style: { margin: "4px" }
   }, /* @__PURE__ */ React.createElement(Button, {
@@ -3840,7 +3990,7 @@ const Interactive = ({
     }
   }, "Link")));
 };
-const baseClass$2 = "guide-tooltip";
+const baseClass$5 = "guide-tooltip";
 const SpotlightOverlay = ({
   gap,
   isVisible,
@@ -3882,37 +4032,37 @@ const SpotlightOverlay = ({
   };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     className: cx({
-      [styles$1[`${baseClass$2}__overlay`]]: true,
-      [styles$1[`${baseClass$2}__overlay--visible`]]: isVisible,
-      [styles$1[`${baseClass$2}__overlay--slide`]]: slide
+      [styles$4[`${baseClass$5}__overlay`]]: true,
+      [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
+      [styles$4[`${baseClass$5}__overlay--slide`]]: slide
     }),
     style: overlayLeft
   }), /* @__PURE__ */ React.createElement("div", {
     className: cx({
-      [styles$1[`${baseClass$2}__overlay`]]: true,
-      [styles$1[`${baseClass$2}__overlay--visible`]]: isVisible,
-      [styles$1[`${baseClass$2}__overlay--slide`]]: slide
+      [styles$4[`${baseClass$5}__overlay`]]: true,
+      [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
+      [styles$4[`${baseClass$5}__overlay--slide`]]: slide
     }),
     style: overlayTop
   }), /* @__PURE__ */ React.createElement("div", {
     className: cx({
-      [styles$1[`${baseClass$2}__overlay`]]: true,
-      [styles$1[`${baseClass$2}__overlay--visible`]]: isVisible,
-      [styles$1[`${baseClass$2}__overlay--slide`]]: slide
+      [styles$4[`${baseClass$5}__overlay`]]: true,
+      [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
+      [styles$4[`${baseClass$5}__overlay--slide`]]: slide
     }),
     style: overlayRight
   }), /* @__PURE__ */ React.createElement("div", {
     className: cx({
-      [styles$1[`${baseClass$2}__overlay`]]: true,
-      [styles$1[`${baseClass$2}__overlay--visible`]]: isVisible,
-      [styles$1[`${baseClass$2}__overlay--slide`]]: slide
+      [styles$4[`${baseClass$5}__overlay`]]: true,
+      [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
+      [styles$4[`${baseClass$5}__overlay--slide`]]: slide
     }),
     style: overlayBottom
   }), disablePointerEvents && /* @__PURE__ */ React.createElement("div", {
     className: cx({
-      [styles$1[`${baseClass$2}__overlay`]]: true,
-      [styles$1[`${baseClass$2}__overlay--visible`]]: isVisible,
-      [styles$1[`${baseClass$2}__overlay--slide`]]: slide
+      [styles$4[`${baseClass$5}__overlay`]]: true,
+      [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
+      [styles$4[`${baseClass$5}__overlay--slide`]]: slide
     }),
     style: spotlight
   }));
@@ -3955,7 +4105,7 @@ class VirtualReference {
   }
 }
 const spotlightPadding = 8;
-const baseClass$1 = "guide-tooltip";
+const baseClass$4 = "guide-tooltip";
 const virtualReference = (element, padding) => new VirtualReference(element, padding);
 const UserGuide = (props) => {
   const {
@@ -4007,28 +4157,28 @@ const UserGuide = (props) => {
     },
     arrowOffsetY: 25,
     className: cx({
-      [styles$1[baseClass$1]]: true,
-      [styles$1[`${baseClass$1}--slide`]]: isSliding,
+      [styles$4[baseClass$4]]: true,
+      [styles$4[`${baseClass$4}--slide`]]: isSliding,
       className
     })
   }), props.children)) : null;
 };
 const textarea = "lc-Textarea-module__textarea___g6U8F";
-var styles = {
+var styles$3 = {
   textarea,
   "textarea--focused": "lc-Textarea-module__textarea--focused___1vtEx",
   "textarea--disabled": "lc-Textarea-module__textarea--disabled___xXaGv",
   "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
 };
-const baseClass = "textarea";
+const baseClass$3 = "textarea";
 const Textarea = React.forwardRef((_W, ref) => {
   var _X = _W, { className, error } = _X, textareaProps = __objRest(_X, ["className", "error"]);
   const { disabled } = textareaProps;
   const [isFocused, setIsFocused] = React.useState(false);
-  const mergedClassNames = cx(className, styles[baseClass], {
-    [styles[`${baseClass}--disabled`]]: disabled,
-    [styles[`${baseClass}--focused`]]: isFocused,
-    [styles[`${baseClass}--error`]]: error
+  const mergedClassNames = cx(className, styles$3[baseClass$3], {
+    [styles$3[`${baseClass$3}--disabled`]]: disabled,
+    [styles$3[`${baseClass$3}--focused`]]: isFocused,
+    [styles$3[`${baseClass$3}--error`]]: error
   });
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
@@ -4038,4 +4188,219 @@ const Textarea = React.forwardRef((_W, ref) => {
     onBlur: () => setIsFocused(false)
   })));
 });
-export { ANIMATION_TIME, ActionModal, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, PickerList, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Textarea, Toast, ToastWrapper, Tooltip, UserGuide };
+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__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",
+  "file-upload-progress__wrapper__header__actions": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__actions___tvhB3",
+  "file-upload-progress__wrapper__header__title": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title___2IVuv",
+  "file-upload-progress__wrapper__header__title--success": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--success___E6DQl",
+  "file-upload-progress__wrapper__header__title--error": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--error___5BPpI"
+};
+var styles$1 = {
+  "file-upload-progress-actions": "lc-FileUploadProgressActions-module__file-upload-progress-actions___qOBr2",
+  "file-upload-progress-actions__close-button": "lc-FileUploadProgressActions-module__file-upload-progress-actions__close-button___Eh4um",
+  "file-upload-progress-actions__retry-button": "lc-FileUploadProgressActions-module__file-upload-progress-actions__retry-button___DqFEo"
+};
+const baseClass$2 = "file-upload-progress-actions";
+const FileUploadProgressActions = ({ status, onCloseButtonClick, onRetryButtonClick }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles$1[`${baseClass$2}`]
+  }, onRetryButtonClick && status === "error" && /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: styles$1[`${baseClass$2}__retry-button`],
+    "aria-label": "Retry",
+    onClick: onRetryButtonClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Refresh
+  })), onCloseButtonClick && status !== "success" && /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: styles$1[`${baseClass$2}__close-button`],
+    "aria-label": "Close",
+    onClick: onCloseButtonClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close
+  })));
+};
+const baseClass$1 = "file-upload-progress";
+const wrapperHeaderTitleClass = `${baseClass$1}__wrapper__header__title`;
+const FileUploadProgress = React.forwardRef(({
+  actionsVisibility = "hidden",
+  className,
+  icon: icon2,
+  title,
+  progressValue: percent,
+  size,
+  status = "normal",
+  onCloseButtonClick,
+  onRetryButtonClick
+}, ref) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles$2[baseClass$1],
+    ref
+  }, 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`]
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Check,
+    kind: "success"
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$2[`${baseClass$1}__wrapper`], {
+      [styles$2[`${baseClass$1}__wrapper--with-icon`]]: icon2
+    })
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$2[`${baseClass$1}__wrapper__header`]
+  }, title && /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$2[wrapperHeaderTitleClass], {
+      [styles$2[`${wrapperHeaderTitleClass}--success`]]: status === "success",
+      [styles$2[`${wrapperHeaderTitleClass}--error`]]: status === "error"
+    })
+  }, title), actionsVisibility !== "hidden" && /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles$2[`${baseClass$1}__wrapper__header__actions`]]: actionsVisibility === "hover"
+    })
+  }, /* @__PURE__ */ React.createElement(FileUploadProgressActions, {
+    status,
+    onCloseButtonClick,
+    onRetryButtonClick
+  }))), status !== "success" && /* @__PURE__ */ React.createElement(ProgressBar, {
+    className,
+    percent,
+    status,
+    size
+  })));
+});
+var styles = {
+  "upload-bar": "lc-UploadBar-module__upload-bar___6Or8h",
+  "upload-bar--error": "lc-UploadBar-module__upload-bar--error___MzvhT",
+  "upload-bar__wrapper": "lc-UploadBar-module__upload-bar__wrapper___MAUeH",
+  "upload-bar__wrapper__header": "lc-UploadBar-module__upload-bar__wrapper__header___x9fen",
+  "upload-bar__wrapper__header__icon": "lc-UploadBar-module__upload-bar__wrapper__header__icon___Aetm5",
+  "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__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",
+  "upload-bar__files--exit": "lc-UploadBar-module__upload-bar__files--exit___MXBRY",
+  "upload-bar__files--exit-active": "lc-UploadBar-module__upload-bar__files--exit-active___krGW5",
+  "upload-bar__files--exit-done": "lc-UploadBar-module__upload-bar__files--exit-done___2I72G",
+  "upload-bar__files-wrapper": "lc-UploadBar-module__upload-bar__files-wrapper___93bs8",
+  "upload-bar__files__list": "lc-UploadBar-module__upload-bar__files__list___QJFEq"
+};
+const baseClass = "upload-bar";
+const wrapperHeaderClass = `${baseClass}__wrapper__header`;
+const TRANSITION_TIMEOUT = 300;
+const getHeaderIcon = (status, progressValue) => {
+  if (status === "success") {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: styles[`${wrapperHeaderClass}__success-icon`]
+    }, /* @__PURE__ */ React.createElement(Icon, {
+      source: Check,
+      kind: "success"
+    }));
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: styles[`${wrapperHeaderClass}__error-icon`]
+    }, /* @__PURE__ */ React.createElement(Icon, {
+      source: Error2,
+      kind: "error"
+    }));
+  }
+  return /* @__PURE__ */ React.createElement(ProgressCircle, {
+    status,
+    progressValue,
+    size: "small"
+  });
+};
+const UploadBar = ({
+  children,
+  className,
+  progressValue,
+  title,
+  isExpanded,
+  errorMessage,
+  status = "normal",
+  icon: icon2,
+  size,
+  mode = "multiple",
+  onCloseButtonClick,
+  onRetryButtonClick
+}) => {
+  const [expanded, setExpanded] = React.useState(isExpanded || false);
+  const withError = status === "error";
+  const withSuccess = status === "success";
+  const mergedClassNames = cx(styles[baseClass], className, {
+    [styles[`${baseClass}--error`]]: withError,
+    [styles[`${baseClass}--success`]]: withSuccess
+  });
+  const shouldShowCollapseButton = !(withError && (onRetryButtonClick || onCloseButtonClick));
+  const handleOnWrapperClick = () => setExpanded(!expanded);
+  if (mode === "single") {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: mergedClassNames
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: styles[`${baseClass}__wrapper`]
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: styles[`${wrapperHeaderClass}`]
+    }, /* @__PURE__ */ React.createElement(FileUploadProgress, {
+      title: withError ? errorMessage || title : title,
+      progressValue,
+      status,
+      icon: icon2,
+      size
+    })), status === "error" && /* @__PURE__ */ React.createElement(FileUploadProgressActions, {
+      status,
+      onCloseButtonClick,
+      onRetryButtonClick
+    })));
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass}__wrapper`],
+    onClick: handleOnWrapperClick
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${wrapperHeaderClass}`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${wrapperHeaderClass}__icon`]
+  }, getHeaderIcon(status, progressValue)), /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${wrapperHeaderClass}__title`]
+  }, withError ? errorMessage || title : title), shouldShowCollapseButton && /* @__PURE__ */ React.createElement("button", {
+    className: styles[`${wrapperHeaderClass}__collapse-button`],
+    type: "button",
+    onClick: handleOnWrapperClick
+  }, expanded ? /* @__PURE__ */ React.createElement(Icon, {
+    source: ChevronUp
+  }) : /* @__PURE__ */ React.createElement(Icon, {
+    source: ChevronDown
+  })), status === "error" && /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${wrapperHeaderClass}__actions-container`]
+  }, /* @__PURE__ */ React.createElement(FileUploadProgressActions, {
+    status,
+    onCloseButtonClick,
+    onRetryButtonClick
+  })))), /* @__PURE__ */ React.createElement(TransitionGroup, {
+    component: null
+  }, expanded && /* @__PURE__ */ React.createElement(CSSTransition, {
+    timeout: TRANSITION_TIMEOUT,
+    classNames: {
+      enter: styles[`${baseClass}__files--enter`],
+      enterActive: styles[`${baseClass}__files--enter-active`],
+      exit: styles[`${baseClass}__files--exit`],
+      exitActive: styles[`${baseClass}__files--exit-active`],
+      exitDone: styles[`${baseClass}__files--exit-done`]
+    }
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass}__files`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass}__files-wrapper`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass}__files__list`]
+  }, children))))));
+};
+export { ANIMATION_TIME, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, FileUploadProgress, FileUploadProgressActions, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, PickerList, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Textarea, Toast, ToastWrapper, Tooltip, UploadBar, UserGuide };