@livechat/design-system-react-components 1.0.0-alpha.24 → 1.0.0-alpha.26

package/dist/dsrc.es.js

@@ -195,7 +195,7 @@ const ShadowToken = {
   Modal: "--shadow-modal"
 };
 const caps = "lc-Typography-module__caps___c3eNJ";
-var styles$z = {
+var styles$A = {
   "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 +231,7 @@ const Heading = (_a) => {
     "children",
     "className"
   ]);
-  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$z[`heading-${size}`], className) }, props), children);
+  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$A[`heading-${size}`], className) }, props), children);
 };
 const Text = (_c) => {
   var _d = _c, {
@@ -256,15 +256,15 @@ const Text = (_c) => {
   const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
   return React.createElement(as, __spreadValues({
     className: cx({
-      [styles$z[`${baseClassPrefix}`]]: true,
-      [styles$z[`${baseClassPrefix}--bold`]]: bold,
-      [styles$z[`${baseClassPrefix}--strike`]]: strike,
-      [styles$z[`${baseClassPrefix}--underline`]]: underline
+      [styles$A[`${baseClassPrefix}`]]: true,
+      [styles$A[`${baseClassPrefix}--bold`]]: bold,
+      [styles$A[`${baseClassPrefix}--strike`]]: strike,
+      [styles$A[`${baseClassPrefix}--underline`]]: underline
     }, className)
   }, props), children);
 };
 const icon$1 = "lc-Icon-module__icon___tw31R";
-var styles$y = {
+var styles$z = {
   icon: icon$1,
   "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
   "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
@@ -305,7 +305,7 @@ const IconSizeMap = {
     height: 32
   }
 };
-const baseClass$I = "icon";
+const baseClass$J = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
@@ -325,7 +325,7 @@ const Icon = (props) => {
   const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$y[baseClass$I], kind && styles$y[`${baseClass$I}--${disabled ? "disabled--" : ""}${kind}`]);
+  const mergedClassNames = cx(className, styles$z[baseClass$J], kind && styles$z[`${baseClass$J}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -333,7 +333,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$x = {
+var styles$y = {
   alert,
   alert__content,
   "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
@@ -365,7 +365,7 @@ const IconConfig = {
     kind: "error"
   }
 };
-const baseClass$H = "alert";
+const baseClass$I = "alert";
 const Alert = ({
   children,
   className,
@@ -374,7 +374,7 @@ const Alert = ({
 }) => {
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$x[baseClass$H], styles$x[`${baseClass$H}--${kind}`], isSmallContainer && styles$x[`${baseClass$H}--small`], className);
+  const mergedClassNames = cx(styles$y[baseClass$I], styles$y[`${baseClass$I}--${kind}`], isSmallContainer && styles$y[`${baseClass$I}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -389,16 +389,16 @@ const Alert = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$x[`${baseClass$H}__content`]
+    className: styles$y[`${baseClass$I}__content`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
     size: "large",
-    className: styles$x[`${baseClass$H}__content-icon`]
+    className: styles$y[`${baseClass$I}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$x[`${baseClass$H}__content-text`], onClose && styles$x[`${baseClass$H}__content-text--margin`])
+    className: cx(styles$y[`${baseClass$I}__content-text`], onClose && styles$y[`${baseClass$I}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$x[`${baseClass$H}__close-icon`],
+    className: styles$y[`${baseClass$I}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
@@ -416,7 +416,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$w = {
+var styles$x = {
   avatar,
   avatar__status,
   "avatar__status--available": "lc-Avatar-module__avatar__status--available___tcpFg",
@@ -462,7 +462,7 @@ var styles$w = {
   "avatar--xlarge": "lc-Avatar-module__avatar--xlarge___zwgeW",
   "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
 };
-const baseClass$G = "avatar";
+const baseClass$H = "avatar";
 const defaultBackgroundColor = "var(--surface-basic-disabled)";
 const defaultFontColor = "var(--content-subtle)";
 const Avatar = ({
@@ -486,15 +486,15 @@ const Avatar = ({
   const backgroundColor = color || defaultBackgroundColor;
   const fontColor = color ? getFontColor(color) : defaultFontColor;
   const mergedClassNames = cx({
-    [styles$w[baseClass$G]]: true,
-    [styles$w[`${baseClass$G}--${shape}`]]: true,
-    [styles$w[`${baseClass$G}--${size}`]]: true,
-    [styles$w[`${baseClass$G}--with-rim`]]: withRim,
+    [styles$x[baseClass$H]]: true,
+    [styles$x[`${baseClass$H}--${shape}`]]: true,
+    [styles$x[`${baseClass$H}--${size}`]]: true,
+    [styles$x[`${baseClass$H}--with-rim`]]: withRim,
     [`${className}`]: className
   });
-  const mergedStatusClassNames = cx(styles$w[`${baseClass$G}__status`], styles$w[`${baseClass$G}__status--${shape}`], styles$w[`${baseClass$G}__status--${size}`], styles$w[`${baseClass$G}__status--${status}`]);
-  const mergedIconClassNames = cx(styles$w[`${baseClass$G}__icon`], styles$w[`${baseClass$G}__icon--${size}`]);
-  const mergedRimClassNames = cx(styles$w[`${baseClass$G}__rim`], styles$w[`${baseClass$G}__rim--${size}`]);
+  const mergedStatusClassNames = cx(styles$x[`${baseClass$H}__status`], styles$x[`${baseClass$H}__status--${shape}`], styles$x[`${baseClass$H}__status--${size}`], styles$x[`${baseClass$H}__status--${status}`]);
+  const mergedIconClassNames = cx(styles$x[`${baseClass$H}__icon`], styles$x[`${baseClass$H}__icon--${size}`]);
+  const mergedRimClassNames = cx(styles$x[`${baseClass$H}__rim`], styles$x[`${baseClass$H}__rim--${size}`]);
   const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
   React.useEffect(() => {
     setShouldDisplayFallbackAvatar(isImproperImageSetup);
@@ -503,20 +503,20 @@ const Avatar = ({
     className: mergedClassNames,
     style: { backgroundColor }
   }, withRim && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$G}__rim`,
+    "data-testid": `${baseClass$H}__rim`,
     className: mergedRimClassNames
   }), status && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$G}__status`,
+    "data-testid": `${baseClass$H}__status`,
     className: mergedStatusClassNames
   }), shouldDisplayImage && /* @__PURE__ */ React.createElement("img", {
-    className: styles$w[`${baseClass$G}__image`],
+    className: styles$x[`${baseClass$H}__image`],
     src,
     alt,
     onError: handleError
   }), shouldDisplayInitials && /* @__PURE__ */ React.createElement("span", {
     style: { color: fontColor }
   }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
-    "data-testid": `${baseClass$G}__icon`,
+    "data-testid": `${baseClass$H}__icon`,
     className: mergedIconClassNames,
     source: Person,
     kind: "primary"
@@ -524,7 +524,7 @@ const Avatar = ({
 };
 const badge = "lc-Badge-module__badge___GhLnu";
 const badge__dot = "lc-Badge-module__badge__dot___z6RO6";
-var styles$v = {
+var styles$w = {
   badge,
   badge__dot,
   "badge--large": "lc-Badge-module__badge--large___B131q",
@@ -537,7 +537,7 @@ var styles$v = {
 function formatCount(count, max) {
   return count > max ? `${max}+` : `${count}`;
 }
-const baseClass$F = "badge";
+const baseClass$G = "badge";
 const Badge = (_e) => {
   var _f = _e, {
     className,
@@ -554,12 +554,12 @@ const Badge = (_e) => {
     "size",
     "type"
   ]);
-  const mergedClassNames = cx(className, styles$v[baseClass$F], styles$v[`${baseClass$F}--${kind}`], styles$v[`${baseClass$F}--${size}`]);
+  const mergedClassNames = cx(className, styles$w[baseClass$G], styles$w[`${baseClass$G}--${kind}`], styles$w[`${baseClass$G}--${size}`]);
   const content = {
     ["counter"]: formatCount(count, max),
     ["alert"]: "!",
     ["dot"]: /* @__PURE__ */ React.createElement("span", {
-      className: styles$v[`${baseClass$F}__dot`]
+      className: styles$w[`${baseClass$G}__dot`]
     })
   }[type];
   return /* @__PURE__ */ React.createElement("span", __spreadValues({
@@ -570,7 +570,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$u = {
+var styles$v = {
   loader,
   loader__spinner,
   "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
@@ -580,8 +580,8 @@ var styles$u = {
   rotate,
   loader__label
 };
-const baseClass$E = "loader";
-const spinnerClass = `${baseClass$E}__spinner`;
+const baseClass$F = "loader";
+const spinnerClass = `${baseClass$F}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -590,11 +590,11 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$u[baseClass$E], className)
+    className: cx(styles$v[baseClass$F], className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$u[spinnerClass], styles$u[`${spinnerClass}--${size}`])
+    className: cx(styles$v[spinnerClass], styles$v[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$u["loader__spinner-circle"],
+    className: styles$v["loader__spinner-circle"],
     style: {
       borderColor: secondaryColor,
       borderTopColor: primaryColor
@@ -602,14 +602,14 @@ const Loader = ({
   })), label && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$u["loader__label"]
+    className: styles$v["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$t = {
+var styles$u = {
   btn: btn$1,
   "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
   "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
@@ -630,7 +630,7 @@ var styles$t = {
   btn__content,
   btn__icon
 };
-const baseClass$D = "btn";
+const baseClass$E = "btn";
 const Button = (_g) => {
   var _h = _g, {
     loading = false,
@@ -663,11 +663,11 @@ const Button = (_g) => {
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$t[baseClass$D], styles$t[`${baseClass$D}--${kind}`], styles$t[`${baseClass$D}--${size}`], {
-    [styles$t[`${baseClass$D}--loading`]]: loading,
-    [styles$t[`${baseClass$D}--full-width`]]: fullWidth,
-    [styles$t[`${baseClass$D}--icon-only`]]: !children && icon2,
-    [styles$t[`${baseClass$D}--disabled`]]: isDisabled
+  const mergedClassNames = cx(className, styles$u[baseClass$E], styles$u[`${baseClass$E}--${kind}`], styles$u[`${baseClass$E}--${size}`], {
+    [styles$u[`${baseClass$E}--loading`]]: loading,
+    [styles$u[`${baseClass$E}--full-width`]]: fullWidth,
+    [styles$u[`${baseClass$E}--icon-only`]]: !children && icon2,
+    [styles$u[`${baseClass$E}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
@@ -678,70 +678,66 @@ const Button = (_g) => {
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$t[`${baseClass$D}__loader`]
+    className: styles$u[`${baseClass$E}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$t[`${baseClass$D}__icon`], styles$t[`${baseClass$D}__icon--${iconPosition}`]),
+    className: cx(styles$u[`${baseClass$E}__icon`], styles$u[`${baseClass$E}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$t[`${baseClass$D}__content`]
+    className: styles$u[`${baseClass$E}__content`]
   }, children));
 };
-const btn = "lc-ButtonGroup-module__btn___bXPrU";
-var styles$s = {
-  "btn-group": "lc-ButtonGroup-module__btn-group___R-lZQ",
+const btn = "lc-SegmentedControl-module__btn___tfsvL";
+var styles$t = {
+  "segmented-control": "lc-SegmentedControl-module__segmented-control___LHWSk",
   btn,
-  "btn--active": "lc-ButtonGroup-module__btn--active___VAc37",
-  "btn--compact": "lc-ButtonGroup-module__btn--compact___t1whe",
-  "btn--medium": "lc-ButtonGroup-module__btn--medium___XFRBP",
-  "btn--large": "lc-ButtonGroup-module__btn--large___OtNUz"
+  "btn--active": "lc-SegmentedControl-module__btn--active___Za-th",
+  "btn--compact": "lc-SegmentedControl-module__btn--compact___gcSwq",
+  "btn--medium": "lc-SegmentedControl-module__btn--medium___w3UzC",
+  "btn--large": "lc-SegmentedControl-module__btn--large___yHPw4"
 };
 function noop() {
 }
-const baseClass$C = "btn-group";
-const ButtonGroup = (_i) => {
-  var _j = _i, {
-    size = "medium",
-    fullWidth = false,
-    onIndexChange = noop,
-    className,
-    children,
-    currentIndex,
-    initialIndex = -1
-  } = _j, restProps = __objRest(_j, [
-    "size",
-    "fullWidth",
-    "onIndexChange",
-    "className",
-    "children",
-    "currentIndex",
-    "initialIndex"
-  ]);
-  const mergedClassName = cx(styles$s[baseClass$C], className);
-  const [currentStateIndex, setCurrentStateIndex] = React.useState(initialIndex);
-  const isControlled = typeof currentIndex === "number";
-  const _currentIndex = isControlled ? currentIndex : currentStateIndex;
-  const handleClick = (index2, event) => {
+const baseClass$D = "segmented-control";
+const SegmentedControl = ({
+  size = "medium",
+  buttons,
+  className,
+  initialId,
+  currentId,
+  fullWidth = false,
+  onButtonClick = noop
+}) => {
+  const mergedClassName = cx(styles$t[baseClass$D], className);
+  const [currentStateId, setCurrentStateId] = React.useState(() => initialId);
+  const isControlled = typeof currentId === "string";
+  React.useEffect(() => {
+    isControlled && setCurrentStateId(currentId);
+  }, [currentId]);
+  const handleClick = (id, event) => {
     if (!isControlled) {
-      setCurrentStateIndex(index2);
+      setCurrentStateId(id);
     }
-    onIndexChange(index2, event);
+    onButtonClick(id, event);
   };
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+  const buttonSet = buttons.map(({ id, label, loading, disabled }) => {
+    const activityStyles = id === currentStateId ? styles$t["btn--active"] : "";
+    const loadingStatus = id === currentStateId ? false : loading;
+    return /* @__PURE__ */ React.createElement(Button, {
+      key: id,
+      fullWidth,
+      loading: loadingStatus,
+      disabled,
+      kind: "secondary",
+      className: cx(styles$t["btn"], styles$t[`btn--${size}`], activityStyles),
+      onClick: (event) => {
+        handleClick(id, event);
+      }
+    }, label);
+  });
+  return /* @__PURE__ */ React.createElement("div", {
     role: "group",
     className: mergedClassName
-  }, restProps), React.Children.map(children, (child, i) => React.cloneElement(child, {
-    fullWidth,
-    size,
-    kind: "secondary",
-    type: "button",
-    onClick: (event) => {
-      handleClick(i, event);
-      if (child.props.onClick) {
-        child.props.onClick(event);
-      }
-    },
-    className: cx(styles$s["btn"], styles$s[`btn--${size}`], i === _currentIndex && styles$s["btn--active"])
-  })));
+  }, buttonSet);
 };
 const card = "lc-Card-module__card___GqMm2";
 const card__header = "lc-Card-module__card__header___0ptfD";
@@ -753,7 +749,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$r = {
+var styles$s = {
   card,
   card__header,
   card__header__image,
@@ -767,12 +763,12 @@ var styles$r = {
   card__actions__buttons,
   "card__actions__buttons-expander": "lc-Card-module__card__actions__buttons-expander___lz4h-"
 };
-const baseClass$B = "card";
-const headerClass = `${baseClass$B}__header`;
+const baseClass$C = "card";
+const headerClass = `${baseClass$C}__header`;
 const headingClass = `${headerClass}__heading`;
-const actionsClass = `${baseClass$B}__actions`;
-const Card = (_k) => {
-  var _l = _k, {
+const actionsClass = `${baseClass$C}__actions`;
+const Card = (_i) => {
+  var _j = _i, {
     alt,
     buttonsOptions = [],
     children,
@@ -781,7 +777,7 @@ const Card = (_k) => {
     expandableContent,
     src,
     title
-  } = _l, divProps = __objRest(_l, [
+  } = _j, divProps = __objRest(_j, [
     "alt",
     "buttonsOptions",
     "children",
@@ -798,41 +794,41 @@ const Card = (_k) => {
   const shouldShowExpandAction = !!expandableContent;
   const shouldShowActions = shouldShowActionButtons || shouldShowExpandAction;
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
-    className: cx(styles$r[baseClass$B], className)
+    className: cx(styles$s[baseClass$C], className)
   }, divProps), /* @__PURE__ */ React.createElement("div", {
-    className: styles$r[headerClass]
+    className: styles$s[headerClass]
   }, src && /* @__PURE__ */ React.createElement("img", {
     alt,
-    className: styles$r[`${headerClass}__image`],
+    className: styles$s[`${headerClass}__image`],
     src
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$r[headingClass]
+    className: styles$s[headingClass]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$r[`${headingClass}__title`]
+    className: styles$s[`${headingClass}__title`]
   }, title), /* @__PURE__ */ React.createElement(Text, {
     size: "sm",
-    className: styles$r[`${headingClass}__description`]
+    className: styles$s[`${headingClass}__description`]
   }, description))), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$r[`${baseClass$B}__content`]
+    className: styles$s[`${baseClass$C}__content`]
   }, children), isExpanded && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$r[`${baseClass$B}__expanded-content`]
+    className: styles$s[`${baseClass$C}__expanded-content`]
   }, expandableContent), shouldShowActions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$r[actionsClass]
+    className: styles$s[actionsClass]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$r[`${actionsClass}__line`]
+    className: styles$s[`${actionsClass}__line`]
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$r[`${actionsClass}__buttons`]
+    className: styles$s[`${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$r[`${actionsClass}__buttons-expander`],
+    className: styles$s[`${actionsClass}__buttons-expander`],
     kind: "plain",
     iconPosition: "right",
     icon: /* @__PURE__ */ React.createElement(Icon, {
@@ -841,19 +837,19 @@ const Card = (_k) => {
     onClick: () => setIsExpanded(!isExpanded)
   }, expandButtonText))));
 };
-var styles$q = {
+var styles$r = {
   "field-description": "lc-FieldDescription-module__field-description___IcRDH"
 };
-const baseClass$A = "field-description";
-const FieldDescription = (_m) => {
-  var _n = _m, {
+const baseClass$B = "field-description";
+const FieldDescription = (_k) => {
+  var _l = _k, {
     children,
     className = ""
-  } = _n, props = __objRest(_n, [
+  } = _l, props = __objRest(_l, [
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$q[baseClass$A], className);
+  const mergedClassNames = cx(styles$r[baseClass$B], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -868,7 +864,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$p = {
+var styles$q = {
   checkbox,
   checkbox__label,
   checkbox__square,
@@ -879,38 +875,38 @@ var styles$p = {
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
-const baseClass$z = "checkbox";
-const Checkbox = React.forwardRef((_o, ref) => {
-  var _p = _o, { checked, disabled, children, description, className } = _p, restInputProps = __objRest(_p, ["checked", "disabled", "children", "description", "className"]);
+const baseClass$A = "checkbox";
+const Checkbox = React.forwardRef((_m, ref) => {
+  var _n = _m, { checked, disabled, children, description, className } = _n, restInputProps = __objRest(_n, ["checked", "disabled", "children", "description", "className"]);
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$p[baseClass$z], className, {
-      [styles$p[`${baseClass$z}--selected`]]: checked,
-      [styles$p[`${baseClass$z}--disabled`]]: disabled
+    className: cx(styles$q[baseClass$A], className, {
+      [styles$q[`${baseClass$A}--selected`]]: checked,
+      [styles$q[`${baseClass$A}--disabled`]]: disabled
     })
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$p[`${baseClass$z}__label`]
+    className: styles$q[`${baseClass$A}__label`]
   }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
     ref,
     checked,
     disabled,
-    className: styles$p[`${baseClass$z}__input`],
+    className: styles$q[`${baseClass$A}__input`],
     type: "checkbox"
   })), /* @__PURE__ */ React.createElement("div", {
-    className: styles$p[`${baseClass$z}__square`]
+    className: styles$q[`${baseClass$A}__square`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Check,
     kind: "inverted",
     size: "xsmall",
-    className: styles$p[`${baseClass$z}__checkmark`]
+    className: styles$q[`${baseClass$A}__checkmark`]
   }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$p[`${baseClass$z}__text`]
+    className: styles$q[`${baseClass$A}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$p[`${baseClass$z}__helper`]
+    className: styles$q[`${baseClass$A}__helper`]
   }, description));
 });
-var styles$o = {
+var styles$p = {
   "date-picker": "lc-DatePicker-module__date-picker___9AqJ2",
   "date-picker__wrapper": "lc-DatePicker-module__date-picker__wrapper___tNp4l",
   "date-picker__months": "lc-DatePicker-module__date-picker__months___QuPb0",
@@ -946,7 +942,7 @@ var styles$o = {
   "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$y = "date-picker";
+const baseClass$z = "date-picker";
 const DatePickerNavbar = (props) => {
   const {
     onPreviousClick,
@@ -995,7 +991,7 @@ const DatePickerNavbar = (props) => {
   return /* @__PURE__ */ React.createElement("div", {
     className
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$o[`${baseClass$y}__navbar-buttons-wrapper`]
+    className: styles$p[`${baseClass$z}__navbar-buttons-wrapper`]
   }, /* @__PURE__ */ React.createElement("button", {
     "data-testid": "date-picker-prev-year-button",
     className: cx({
@@ -1017,7 +1013,7 @@ const DatePickerNavbar = (props) => {
     source: ChevronLeft,
     kind: "subtle"
   }))), /* @__PURE__ */ React.createElement("div", {
-    className: styles$o[`${baseClass$y}__navbar-buttons-wrapper`]
+    className: styles$p[`${baseClass$z}__navbar-buttons-wrapper`]
   }, /* @__PURE__ */ React.createElement("button", {
     "data-testid": "date-picker-next-month-button",
     className: cx({
@@ -1040,7 +1036,7 @@ const DatePickerNavbar = (props) => {
     kind: "subtle"
   }))));
 };
-const baseClass$x = "date-picker";
+const baseClass$y = "date-picker";
 const isDateWithinRange = (date, range) => {
   const { from, to } = range;
   if (to && !isSameDay(date, to) && isAfter(date, to)) {
@@ -1063,22 +1059,22 @@ const calculateDatePickerMonth = (initialFromDate, initialToDate, toMonth) => {
 };
 const getRangeDatePickerModifiers = (from, to) => {
   const base = {
-    [styles$o[`${baseClass$x}__day--monday`]]: { daysOfWeek: [1] },
-    [styles$o[`${baseClass$x}__day--sunday`]]: { daysOfWeek: [0] },
-    [styles$o[`${baseClass$x}__day--start`]]: from,
-    [styles$o[`${baseClass$x}__day--end`]]: from
+    [styles$p[`${baseClass$y}__day--monday`]]: { daysOfWeek: [1] },
+    [styles$p[`${baseClass$y}__day--sunday`]]: { daysOfWeek: [0] },
+    [styles$p[`${baseClass$y}__day--start`]]: from,
+    [styles$p[`${baseClass$y}__day--end`]]: from
   };
   if (!to || !from)
     return base;
   const diff = differenceInCalendarDays(to, from);
   if (diff > 0) {
     return __spreadProps(__spreadValues({}, base), {
-      [styles$o[`${baseClass$x}__day--end`]]: to
+      [styles$p[`${baseClass$y}__day--end`]]: to
     });
   }
   if (diff < 0) {
     return __spreadProps(__spreadValues({}, base), {
-      [styles$o[`${baseClass$x}__day--start`]]: to
+      [styles$p[`${baseClass$y}__day--start`]]: to
     });
   }
   return base;
@@ -1117,41 +1113,41 @@ const getInitialStateFromProps = (props) => {
 };
 const getDatePickerClassNames = (range, classNames) => __spreadValues({
   container: cx({
-    [styles$o[`${baseClass$x}`]]: true,
-    [styles$o[`${baseClass$x}--range`]]: range
+    [styles$p[`${baseClass$y}`]]: true,
+    [styles$p[`${baseClass$y}--range`]]: range
   }),
-  wrapper: styles$o[`${baseClass$x}__wrapper`],
-  interactionDisabled: styles$o[`${baseClass$x}--interaction-disabled`],
-  months: styles$o[`${baseClass$x}__months`],
-  month: styles$o[`${baseClass$x}__month`],
-  navBar: styles$o[`${baseClass$x}__nav-bar`],
-  navButtonPrev: cx(styles$o[`${baseClass$x}__nav-button`], styles$o[`${baseClass$x}__nav-button--prev`]),
-  navButtonNext: cx(styles$o[`${baseClass$x}__nav-button`], styles$o[`${baseClass$x}__nav-button--next`]),
-  navButtonInteractionDisabled: styles$o[`${baseClass$x}__nav-button--interaction-disabled`],
-  caption: styles$o[`${baseClass$x}__caption`],
-  weekdays: styles$o[`${baseClass$x}__weekdays`],
-  weekdaysRow: styles$o[`${baseClass$x}__weekdays-row`],
-  weekday: styles$o[`${baseClass$x}__weekday`],
-  body: styles$o[`${baseClass$x}__body`],
-  week: styles$o[`${baseClass$x}__week`],
-  weekNumber: styles$o[`${baseClass$x}__week-number`],
-  day: styles$o[`${baseClass$x}__day`],
-  footer: styles$o[`${baseClass$x}__footer`],
-  todayButton: styles$o[`${baseClass$x}__today-button`],
-  today: styles$o[`${baseClass$x}__day--today`],
-  selected: styles$o[`${baseClass$x}__day--selected`],
-  disabled: styles$o[`${baseClass$x}__day--disabled`],
-  outside: styles$o[`${baseClass$x}__day--outside`],
-  start: styles$o[`${baseClass$x}__day--start`],
-  end: styles$o[`${baseClass$x}__day--end`]
+  wrapper: styles$p[`${baseClass$y}__wrapper`],
+  interactionDisabled: styles$p[`${baseClass$y}--interaction-disabled`],
+  months: styles$p[`${baseClass$y}__months`],
+  month: styles$p[`${baseClass$y}__month`],
+  navBar: styles$p[`${baseClass$y}__nav-bar`],
+  navButtonPrev: cx(styles$p[`${baseClass$y}__nav-button`], styles$p[`${baseClass$y}__nav-button--prev`]),
+  navButtonNext: cx(styles$p[`${baseClass$y}__nav-button`], styles$p[`${baseClass$y}__nav-button--next`]),
+  navButtonInteractionDisabled: styles$p[`${baseClass$y}__nav-button--interaction-disabled`],
+  caption: styles$p[`${baseClass$y}__caption`],
+  weekdays: styles$p[`${baseClass$y}__weekdays`],
+  weekdaysRow: styles$p[`${baseClass$y}__weekdays-row`],
+  weekday: styles$p[`${baseClass$y}__weekday`],
+  body: styles$p[`${baseClass$y}__body`],
+  week: styles$p[`${baseClass$y}__week`],
+  weekNumber: styles$p[`${baseClass$y}__week-number`],
+  day: styles$p[`${baseClass$y}__day`],
+  footer: styles$p[`${baseClass$y}__footer`],
+  todayButton: styles$p[`${baseClass$y}__today-button`],
+  today: styles$p[`${baseClass$y}__day--today`],
+  selected: styles$p[`${baseClass$y}__day--selected`],
+  disabled: styles$p[`${baseClass$y}__day--disabled`],
+  outside: styles$p[`${baseClass$y}__day--outside`],
+  start: styles$p[`${baseClass$y}__day--start`],
+  end: styles$p[`${baseClass$y}__day--end`]
 }, classNames);
-const baseClass$w = "date-picker";
+const baseClass$x = "date-picker";
 const defaultDayRenderer = (day) => {
   const date = day.getDate();
   return /* @__PURE__ */ React.createElement("div", {
-    className: styles$o[`${baseClass$w}__day-wrapper`]
+    className: styles$p[`${baseClass$x}__day-wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$o[`${baseClass$w}__day-content`]
+    className: styles$p[`${baseClass$x}__day-content`]
   }, date));
 };
 const DatePickerComponent = (props) => {
@@ -1472,19 +1468,19 @@ RangeDatePicker.defaultProps = {
     }
   ]
 };
-var styles$n = {
+var styles$o = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
-const baseClass$v = "field-error";
-const FieldError = (_q) => {
-  var _r = _q, {
+const baseClass$w = "field-error";
+const FieldError = (_o) => {
+  var _p = _o, {
     children,
     className = ""
-  } = _r, props = __objRest(_r, [
+  } = _p, props = __objRest(_p, [
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$n[baseClass$v], className);
+  const mergedClassNames = cx(styles$o[baseClass$w], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -1492,21 +1488,21 @@ const FieldError = (_q) => {
     className: mergedClassNames
   }), children);
 };
-var styles$m = {
+var styles$n = {
   "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$u = "field-group";
-const FieldGroup = (_s) => {
-  var _t = _s, {
+const baseClass$v = "field-group";
+const FieldGroup = (_q) => {
+  var _r = _q, {
     className = "",
     children,
     description,
     error,
     inline,
     stretch
-  } = _t, props = __objRest(_t, [
+  } = _r, props = __objRest(_r, [
     "className",
     "children",
     "description",
@@ -1514,9 +1510,9 @@ const FieldGroup = (_s) => {
     "inline",
     "stretch"
   ]);
-  const mergedClassNames = cx(styles$m[baseClass$u], className, {
-    [styles$m[`${baseClass$u}--inline`]]: inline,
-    [styles$m[`${baseClass$u}--stretched`]]: stretch
+  const mergedClassNames = cx(styles$n[baseClass$v], className, {
+    [styles$n[`${baseClass$v}--inline`]]: inline,
+    [styles$n[`${baseClass$v}--stretched`]]: stretch
   });
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: mergedClassNames
@@ -1527,22 +1523,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$l = {
+var styles$m = {
   form,
   form__header,
   form__footer,
   form__label,
   form__helper
 };
-const baseClass$t = "form";
-const Form = (_u) => {
-  var _v = _u, {
+const baseClass$u = "form";
+const Form = (_s) => {
+  var _t = _s, {
     className,
     children,
     labelText,
     helperText,
     formFooter
-  } = _v, restProps = __objRest(_v, [
+  } = _t, restProps = __objRest(_t, [
     "className",
     "children",
     "labelText",
@@ -1550,21 +1546,21 @@ const Form = (_u) => {
     "formFooter"
   ]);
   return /* @__PURE__ */ React.createElement("form", __spreadValues({
-    className: cx(styles$l[baseClass$t], className)
+    className: cx(styles$m[baseClass$u], className)
   }, restProps), (labelText || helperText) && /* @__PURE__ */ React.createElement("div", {
-    className: styles$l[`${baseClass$t}__header`]
+    className: styles$m[`${baseClass$u}__header`]
   }, labelText && /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$l[`${baseClass$t}__label`]
+    className: styles$m[`${baseClass$u}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "p",
     size: "sm",
-    className: styles$l[`${baseClass$t}__helper`]
+    className: styles$m[`${baseClass$u}__helper`]
   }, helperText)), children, formFooter && /* @__PURE__ */ React.createElement("div", {
-    className: styles$l[`${baseClass$t}__footer`]
+    className: styles$m[`${baseClass$u}__footer`]
   }, formFooter));
 };
-var styles$k = {
+var styles$l = {
   "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",
@@ -1579,7 +1575,7 @@ var styles$k = {
   "form-field__row-break": "lc-FormField-module__form-field__row-break___DCBjC",
   "form-field__content": "lc-FormField-module__form-field__content___XaOx3"
 };
-const baseClass$s = "form-field";
+const baseClass$t = "form-field";
 const FormField = ({
   inline,
   error,
@@ -1591,73 +1587,73 @@ const FormField = ({
   children,
   labelRightNode
 }) => {
-  const mergedClassNames = cx(styles$k[baseClass$s], {
-    [styles$k[`${baseClass$s}--inline`]]: inline
+  const mergedClassNames = cx(styles$l[baseClass$t], {
+    [styles$l[`${baseClass$t}--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$k[`${baseClass$s}__label-right-node`], styles$k[`${baseClass$s}__label-right-node--inline`])
+    className: cx(styles$l[`${baseClass$t}__label-right-node`], styles$l[`${baseClass$t}__label-right-node--inline`])
   }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
-    className: styles$k[`${baseClass$s}__row-break`]
+    className: styles$l[`${baseClass$t}__row-break`]
   })), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$k[`${baseClass$s}__wrapper`], inline && styles$k[`${baseClass$s}__wrapper--inline`])
+    className: cx(styles$l[`${baseClass$t}__wrapper`], inline && styles$l[`${baseClass$t}__wrapper--inline`])
   }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$k[`${baseClass$s}__label`], inline && styles$k[`${baseClass$s}__label--inline`], !labelText && styles$k[`${baseClass$s}__label--no-text`])
+    className: cx(styles$l[`${baseClass$t}__label`], inline && styles$l[`${baseClass$t}__label--inline`], !labelText && styles$l[`${baseClass$t}__label--no-text`])
   }, labelText && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$k[`${baseClass$s}__label-wrapper`])
+    className: cx(styles$l[`${baseClass$t}__label-wrapper`])
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$k[`${baseClass$s}__label-left-node`],
+    className: styles$l[`${baseClass$t}__label-left-node`],
     htmlFor: labelFor
   }, /* @__PURE__ */ React.createElement(Text, {
     as: "span",
     size: "sm"
   }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$k[`${baseClass$s}__label-adornment`])
+    className: cx(styles$l[`${baseClass$t}__label-adornment`])
   }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$k[`${baseClass$s}__label-right-node`])
+    className: cx(styles$l[`${baseClass$t}__label-right-node`])
   }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$k[`${baseClass$s}__content`])
+    className: cx(styles$l[`${baseClass$t}__content`])
   }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
 };
-var styles$j = {
+var styles$k = {
   "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$r = "form-group";
-const FormGroup = (_w) => {
-  var _x = _w, {
+const baseClass$s = "form-group";
+const FormGroup = (_u) => {
+  var _v = _u, {
     className = "",
     children,
     labelText,
     helperText
-  } = _x, props = __objRest(_x, [
+  } = _v, props = __objRest(_v, [
     "className",
     "children",
     "labelText",
     "helperText"
   ]);
-  const mergedClassNames = cx(styles$j[baseClass$r], className);
+  const mergedClassNames = cx(styles$k[baseClass$s], 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$j[`${baseClass$r}__header`]
+    className: styles$k[`${baseClass$s}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     as: "div",
     size: "sm",
-    className: styles$j[`${baseClass$r}__label`]
+    className: styles$k[`${baseClass$s}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "sm",
-    className: styles$j[`${baseClass$r}__helper`]
+    className: styles$k[`${baseClass$s}__helper`]
   }, helperText)), children);
 };
 const input = "lc-Input-module__input___qeMAQ";
-var styles$i = {
+var styles$j = {
   input,
   "input--error": "lc-Input-module__input--error___DlDbC",
   "input--xsmall": "lc-Input-module__input--xsmall___9u99K",
@@ -1665,40 +1661,40 @@ var styles$i = {
   "input--medium": "lc-Input-module__input--medium___3BjqQ",
   "input--large": "lc-Input-module__input--large___jX5RW"
 };
-const baseClass$q = "input";
-const Input = React.forwardRef((_y, ref) => {
-  var _z = _y, { size = "medium", error = false, className } = _z, inputProps = __objRest(_z, ["size", "error", "className"]);
+const baseClass$r = "input";
+const Input = React.forwardRef((_w, ref) => {
+  var _x = _w, { size = "medium", error = false, className } = _x, inputProps = __objRest(_x, ["size", "error", "className"]);
   return /* @__PURE__ */ React.createElement("input", __spreadValues({
-    className: cx(className, styles$i[baseClass$q], styles$i[`${baseClass$q}--${size}`], {
-      [styles$i[`${baseClass$q}--error`]]: error
+    className: cx(className, styles$j[baseClass$r], styles$j[`${baseClass$r}--${size}`], {
+      [styles$j[`${baseClass$r}--error`]]: error
     }),
     type: "text",
     ref
   }, inputProps));
 });
 const link = "lc-Link-module__link___kqx52";
-var styles$h = {
+var styles$i = {
   link,
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
-const baseClass$p = "link";
-const Link = (_A) => {
-  var _B = _A, {
+const baseClass$q = "link";
+const Link = (_y) => {
+  var _z = _y, {
     bold = false,
     className = ""
-  } = _B, rest = __objRest(_B, [
+  } = _z, rest = __objRest(_z, [
     "bold",
     "className"
   ]);
   return /* @__PURE__ */ React.createElement("a", __spreadValues({
-    className: cx(styles$h[baseClass$p], bold && styles$h[`${baseClass$p}--bold`], className)
+    className: cx(styles$i[baseClass$q], bold && styles$i[`${baseClass$q}--bold`], className)
   }, rest));
 };
 const modal__header = "lc-Modal-module__modal__header___Fp5VE";
 const modal__heading = "lc-Modal-module__modal__heading___G9KVK";
 const modal__body = "lc-Modal-module__modal__body___M-jmN";
 const modal__footer = "lc-Modal-module__modal__footer___2LYdc";
-var styles$g = {
+var styles$h = {
   "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",
@@ -1717,7 +1713,7 @@ const ModalCloseButton = ({
   onClick
 }) => /* @__PURE__ */ React.createElement("button", {
   title: "Close modal",
-  className: styles$g["modal-base__close"],
+  className: styles$h["modal-base__close"],
   onClick,
   type: "button"
 }, /* @__PURE__ */ React.createElement(Icon, {
@@ -1736,22 +1732,22 @@ const KeyCodes = {
   arrowUp: "ArrowUp",
   arrowDown: "ArrowDown"
 };
-const baseClass$o = "modal-base";
-const ModalBase = (_C) => {
-  var _D = _C, {
+const baseClass$p = "modal-base";
+const ModalBase = (_A) => {
+  var _B = _A, {
     children,
     className = "",
     onClose,
     closeOnEscPress = true,
     closeOnOverlayPress = true
-  } = _D, props = __objRest(_D, [
+  } = _B, props = __objRest(_B, [
     "children",
     "className",
     "onClose",
     "closeOnEscPress",
     "closeOnOverlayPress"
   ]);
-  const mergedClassNames = cx(styles$g[baseClass$o], className);
+  const mergedClassNames = cx(styles$h[baseClass$p], className);
   React.useEffect(() => {
     if (!closeOnEscPress) {
       return;
@@ -1777,67 +1773,67 @@ const ModalBase = (_C) => {
   return /* @__PURE__ */ React.createElement("div", {
     "data-testid": "lc-modal-overlay",
     onMouseDown: onOverlayClick,
-    className: cx(styles$g[`${baseClass$o}__overlay`], styles$g[`${baseClass$o}__overlay--visible`])
+    className: cx(styles$h[`${baseClass$p}__overlay`], styles$h[`${baseClass$p}__overlay--visible`])
   }, /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: mergedClassNames
   }, props), /* @__PURE__ */ React.createElement(ModalCloseButton, {
     onClick: onCloseButtonClick
   }), children));
 };
-const baseClass$n = "action-modal";
-const ActionModal = (_E) => {
-  var _F = _E, {
+const baseClass$o = "action-modal";
+const ActionModal = (_C) => {
+  var _D = _C, {
     children,
     className = "",
     icon: icon2,
     heading,
     actions
-  } = _F, props = __objRest(_F, [
+  } = _D, props = __objRest(_D, [
     "children",
     "className",
     "icon",
     "heading",
     "actions"
   ]);
-  const mergedClassNames = cx(styles$g[baseClass$n], className);
+  const mergedClassNames = cx(styles$h[baseClass$o], className);
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
     className: mergedClassNames
   }, props), icon2 && /* @__PURE__ */ React.createElement("div", {
-    className: styles$g[`${baseClass$n}__icon`]
+    className: styles$h[`${baseClass$o}__icon`]
   }, icon2), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$g[`${baseClass$n}__heading`]
+    className: styles$h[`${baseClass$o}__heading`]
   }, heading), /* @__PURE__ */ React.createElement("div", {
-    className: styles$g[`${baseClass$n}__content`]
+    className: styles$h[`${baseClass$o}__content`]
   }, children), actions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$g[`${baseClass$n}__actions`]
+    className: styles$h[`${baseClass$o}__actions`]
   }, actions));
 };
-const baseClass$m = "modal";
-const Modal = (_G) => {
-  var _H = _G, {
+const baseClass$n = "modal";
+const Modal = (_E) => {
+  var _F = _E, {
     children,
     className = "",
     heading,
     footer
-  } = _H, props = __objRest(_H, [
+  } = _F, props = __objRest(_F, [
     "children",
     "className",
     "heading",
     "footer"
   ]);
-  const mergedClassNames = cx(styles$g[baseClass$m], className);
+  const mergedClassNames = cx(styles$h[baseClass$n], className);
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
     className: mergedClassNames
   }, props), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$g[`${baseClass$m}__header`]
+    className: styles$h[`${baseClass$n}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
     as: "div",
-    className: styles$g[`${baseClass$m}__heading`]
+    className: styles$h[`${baseClass$n}__heading`]
   }, heading)), /* @__PURE__ */ React.createElement("div", {
-    className: styles$g[`${baseClass$m}__body`]
+    className: styles$h[`${baseClass$n}__body`]
   }, children), footer && /* @__PURE__ */ React.createElement("div", {
-    className: styles$g[`${baseClass$m}__footer`]
+    className: styles$h[`${baseClass$n}__footer`]
   }, footer));
 };
 const ModalPortal = ({
@@ -1863,7 +1859,7 @@ const ModalPortal = ({
   }, [parentElementName]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, ReactDOM.createPortal(children, container));
 };
-var styles$f = {
+var styles$g = {
   "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",
@@ -1871,9 +1867,9 @@ var styles$f = {
   "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
-const baseClass$l = "numeric-input";
-const NumericInput = (_I) => {
-  var _J = _I, {
+const baseClass$m = "numeric-input";
+const NumericInput = (_G) => {
+  var _H = _G, {
     className,
     error,
     value,
@@ -1883,7 +1879,7 @@ const NumericInput = (_I) => {
     noControls,
     style,
     onChange
-  } = _J, restProps = __objRest(_J, [
+  } = _H, restProps = __objRest(_H, [
     "className",
     "error",
     "value",
@@ -1895,10 +1891,10 @@ const NumericInput = (_I) => {
     "onChange"
   ]);
   const inputRef = React.useRef(null);
-  const mergedClassNames = cx(styles$f[baseClass$l], {
-    [styles$f[`${baseClass$l}--error`]]: error,
-    [styles$f[`${baseClass$l}--no-controls`]]: noControls,
-    [styles$f[`${baseClass$l}--disabled`]]: disabled
+  const mergedClassNames = cx(styles$g[baseClass$m], {
+    [styles$g[`${baseClass$m}--error`]]: error,
+    [styles$g[`${baseClass$m}--no-controls`]]: noControls,
+    [styles$g[`${baseClass$m}--disabled`]]: disabled
   }, className);
   const callOnChange = (val) => onChange(String(val));
   const calcValue = (val) => {
@@ -1963,7 +1959,7 @@ const NumericInput = (_I) => {
     disabled: disabled || hasReachedTheLimit(value, max),
     onClick: handleIncrementClick,
     "aria-label": "Increment value",
-    className: styles$f[`${baseClass$l}__increment`],
+    className: styles$g[`${baseClass$m}__increment`],
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: ChevronUp,
@@ -1973,7 +1969,7 @@ const NumericInput = (_I) => {
     tabIndex: -1,
     disabled: disabled || hasReachedTheLimit(value, min),
     "aria-label": "Decrement value",
-    className: styles$f[`${baseClass$l}__decrement`],
+    className: styles$g[`${baseClass$m}__decrement`],
     onClick: handleDecrementClick,
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
@@ -1982,18 +1978,24 @@ const NumericInput = (_I) => {
     disabled: disabled || hasReachedTheLimit(value, min)
   }))));
 };
-var styles$e = {
+var styles$f = {
   "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",
   "picker-trigger--large": "lc-Trigger-module__picker-trigger--large___C8qkZ",
-  "picker-trigger__text": "lc-Trigger-module__picker-trigger__text___9cWZO",
+  "picker-trigger--multi-select": "lc-Trigger-module__picker-trigger--multi-select___rLpTy",
+  "picker-trigger--multi-select--with-items": "lc-Trigger-module__picker-trigger--multi-select--with-items___QFhY2",
+  "picker-trigger__controls": "lc-Trigger-module__picker-trigger__controls___EsSeM",
+  "picker-trigger__controls--compact": "lc-Trigger-module__picker-trigger__controls--compact___g3P6e",
+  "picker-trigger__controls--medium": "lc-Trigger-module__picker-trigger__controls--medium___G4OYQ",
+  "picker-trigger__controls--large": "lc-Trigger-module__picker-trigger__controls--large___h-egq",
+  "picker-trigger__clear-icon": "lc-Trigger-module__picker-trigger__clear-icon___8H-4T",
+  "picker-trigger__content": "lc-Trigger-module__picker-trigger__content___bYnCH",
   "picker-trigger--disabled": "lc-Trigger-module__picker-trigger--disabled___7H4tD",
   "picker-trigger--focused": "lc-Trigger-module__picker-trigger--focused___vTr39",
-  "picker-trigger--error": "lc-Trigger-module__picker-trigger--error___Rh8Qd",
-  "picker-trigger__input": "lc-Trigger-module__picker-trigger__input___GGc12"
+  "picker-trigger--error": "lc-Trigger-module__picker-trigger--error___Rh8Qd"
 };
-const baseClass$k = "picker-trigger";
+const baseClass$l = "picker-trigger";
 const Trigger = ({
   children,
   isSearchDisabled,
@@ -2002,18 +2004,18 @@ const Trigger = ({
   isItemSelected,
   isOpen,
   isRequired,
+  isMultiSelect,
   size = "medium",
-  onClick,
-  onClearClick,
-  onFilter
+  onTrigger,
+  onClear
 }) => {
   const triggerRef = React.useRef(null);
-  const mergedClassNames = cx(styles$e[baseClass$k], styles$e[`${baseClass$k}--${size}`], isDisabled && styles$e[`${baseClass$k}--disabled`], isOpen && styles$e[`${baseClass$k}--focused`], isError && styles$e[`${baseClass$k}--error`]);
+  const mergedClassNames = cx(styles$f[baseClass$l], styles$f[`${baseClass$l}--${size}`], isMultiSelect && styles$f[`${baseClass$l}--multi-select`], isMultiSelect && isItemSelected && styles$f[`${baseClass$l}--multi-select--with-items`], isDisabled && styles$f[`${baseClass$l}--disabled`], isOpen && styles$f[`${baseClass$l}--focused`], isError && styles$f[`${baseClass$l}--error`]);
   React.useEffect(() => {
     const onKeyDown = (e) => {
       const isFocused = document.activeElement === triggerRef.current;
       if (isFocused && e.key !== KeyCodes.tab) {
-        onClick();
+        onTrigger(e);
       }
     };
     if (!isSearchDisabled) {
@@ -2025,69 +2027,88 @@ const Trigger = ({
       }
     };
   }, [isSearchDisabled]);
-  const handleTriggerClick = () => {
-    onClick();
+  const handleTriggerClick = (e) => {
+    onTrigger(e);
   };
   const handleOnClearClick = (e) => {
     e.stopPropagation();
-    onClearClick();
-  };
-  const handleOnChange = (e) => {
-    onFilter(e.target.value);
+    onClear();
   };
   return /* @__PURE__ */ React.createElement("div", {
     ref: triggerRef,
     className: mergedClassNames,
     onClick: handleTriggerClick,
     tabIndex: 0
-  }, isOpen && !isSearchDisabled ? /* @__PURE__ */ React.createElement("input", {
-    className: styles$e[`${baseClass$k}__input`],
-    placeholder: "Select option",
-    onChange: handleOnChange,
-    autoFocus: true
-  }) : /* @__PURE__ */ React.createElement("div", {
-    className: styles$e[`${baseClass$k}__text`]
-  }, children), isItemSelected && !isDisabled && !isRequired && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$k}__clear-icon`,
-    className: styles$e[`${baseClass$k}__clear-icon`],
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$f[`${baseClass$l}__content`], isMultiSelect && styles$f[`${baseClass$l}__content--multi-select`])
+  }, children), /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$f[`${baseClass$l}__controls`], styles$f[`${baseClass$l}__controls--${size}`])
+  }, isItemSelected && !isDisabled && !isRequired && /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${baseClass$l}__clear-icon`,
+    className: styles$f[`${baseClass$l}__clear-icon`],
     onClick: handleOnClearClick
   }, /* @__PURE__ */ React.createElement(Icon, {
-    kind: "link",
+    kind: "primary",
+    size: "small",
     source: Close
   })), /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$e[`${baseClass$k}__chevron-icon`],
+    className: styles$f[`${baseClass$l}__chevron-icon`],
     source: !isOpen ? ChevronDown : ChevronUp,
     size: "large",
     disabled: isDisabled
-  }));
+  })));
 };
-var styles$d = {
+var styles$e = {
   "picker-list": "lc-PickerList-module__picker-list___FqdgZ",
-  "picker-list--compact": "lc-PickerList-module__picker-list--compact___F-cAF",
-  "picker-list--medium": "lc-PickerList-module__picker-list--medium___9B1DT",
-  "picker-list--large": "lc-PickerList-module__picker-list--large___8-Q-N",
   "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"
 };
-const baseClass$j = "picker-list";
-const itemClassName = `${baseClass$j}__item`;
+const SELECT_ALL_OPTION_KEY = "select-all";
+const baseClass$k = "picker-list";
+const itemClassName = `${baseClass$k}__item`;
 const PickerList = ({
   isOpen,
   items,
-  selectedItem,
-  size = "medium",
+  selectedItemsKeys,
   emptyStateText = "No results found",
+  selectAllOptionText,
+  isMultiSelect,
   onClose,
-  onSelect
+  onSelect,
+  onSelectAll
 }) => {
-  const mergedClassNames = cx(styles$d[baseClass$j], styles$d[`${baseClass$j}--${size}`], {
-    [styles$d[`${baseClass$j}__no-results`]]: items.length === 0
+  const mergedClassNames = cx(styles$e[baseClass$k], {
+    [styles$e[`${baseClass$k}__no-results`]]: items.length === 0
   });
   const [currentItemKey, setCurrentItemKey] = React.useState(null);
   const indexRef = React.useRef(-1);
   const lastIndexRef = React.useRef(0);
   const listRef = React.useRef(null);
+  const onKeyDown = (e) => {
+    if (e.key === KeyCodes.esc) {
+      e.preventDefault();
+      onClose();
+    }
+    if (e.key === KeyCodes.arrowUp && indexRef.current > 0) {
+      e.preventDefault();
+      indexRef.current = getPrevItemIndex();
+      setCurrentItemKey(items[indexRef.current].key);
+    }
+    if (e.key === KeyCodes.arrowDown && indexRef.current + 1 < items.length) {
+      e.preventDefault();
+      indexRef.current = getNextItemIndex();
+      setCurrentItemKey(items[indexRef.current].key);
+    }
+    if (e.key === KeyCodes.enter && !items[indexRef.current].disabled) {
+      e.preventDefault();
+      if (items[indexRef.current].key === SELECT_ALL_OPTION_KEY) {
+        return onSelectAll();
+      }
+      onSelect(items[indexRef.current]);
+    }
+  };
   React.useEffect(() => {
     if (indexRef.current > -1 && items.length > 0) {
       setCurrentItemKey(items[indexRef.current].key);
@@ -2100,7 +2121,7 @@ const PickerList = ({
       lastIndexRef.current = 0;
       setCurrentItemKey(null);
     }
-  }, [items, isOpen]);
+  }, [items, isOpen, onKeyDown]);
   const isHeaderOrDisabled = (i) => !!items[i] && (items[i].disabled || items[i].groupHeader);
   const getPrevItemIndex = () => {
     indexRef.current = indexRef.current - 1;
@@ -2131,28 +2152,32 @@ const PickerList = ({
     lastIndexRef.current = indexRef.current;
     return indexRef.current;
   };
-  const onKeyDown = (e) => {
-    if (e.key === KeyCodes.esc) {
-      e.preventDefault();
-      onClose();
-    }
-    if (e.key === KeyCodes.arrowUp && indexRef.current > 0) {
-      e.preventDefault();
-      indexRef.current = getPrevItemIndex();
-      setCurrentItemKey(items[indexRef.current].key);
-    }
-    if (e.key === KeyCodes.arrowDown && indexRef.current + 1 < items.length) {
-      e.preventDefault();
-      indexRef.current = getNextItemIndex();
-      setCurrentItemKey(items[indexRef.current].key);
+  const handleOnClick = (item) => onSelect(item);
+  const handleOnSelectAllClick = () => onSelectAll();
+  const isItemSelected = (key) => {
+    if (!selectedItemsKeys) {
+      return false;
     }
-    if (e.key === KeyCodes.enter && !items[indexRef.current].disabled) {
-      e.preventDefault();
-      onSelect(items[indexRef.current]);
+    return selectedItemsKeys.includes(key);
+  };
+  const getSelectAllOption = () => {
+    if (!isMultiSelect || isMultiSelect && !selectAllOptionText) {
+      return null;
     }
+    return /* @__PURE__ */ React.createElement("li", {
+      ref: (element) => {
+        if (currentItemKey === SELECT_ALL_OPTION_KEY) {
+          element == null ? void 0 : element.scrollIntoView({ block: "nearest" });
+        }
+      },
+      role: "option",
+      "aria-current": currentItemKey === SELECT_ALL_OPTION_KEY,
+      id: SELECT_ALL_OPTION_KEY,
+      key: SELECT_ALL_OPTION_KEY,
+      className: cx(styles$e[itemClassName], styles$e[`${itemClassName}--select-all`]),
+      onClick: handleOnSelectAllClick
+    }, selectAllOptionText);
   };
-  const handleOnClick = (item) => onSelect(item);
-  const isItemSelected = (key) => !!selectedItem && key === selectedItem.key;
   if (!isOpen) {
     return null;
   }
@@ -2166,12 +2191,12 @@ const PickerList = ({
     className: mergedClassNames,
     role: "listbox",
     tabIndex: -1
-  }, items.map((item) => {
+  }, getSelectAllOption(), items.map((item) => {
     if (item.groupHeader) {
       return /* @__PURE__ */ React.createElement("li", {
         role: "option",
         key: item.key,
-        className: styles$d[`${itemClassName}__header`]
+        className: styles$e[`${itemClassName}__header`]
       }, item.name);
     }
     return /* @__PURE__ */ React.createElement("li", {
@@ -2186,7 +2211,7 @@ const PickerList = ({
       "aria-disabled": item.disabled,
       id: item.key,
       key: item.key,
-      className: styles$d[itemClassName],
+      className: styles$e[itemClassName],
       onClick: () => !item.disabled && handleOnClick(item)
     }, item.name, isItemSelected(item.key) && /* @__PURE__ */ React.createElement(Icon, {
       kind: "link",
@@ -2199,7 +2224,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$c = {
+var styles$d = {
   picker,
   picker__container,
   picker__label,
@@ -2207,24 +2232,183 @@ var styles$c = {
   picker__error,
   picker__error__icon
 };
-const baseClass$i = "picker";
+const tag = "lc-Tag-module__tag___1QRVY";
+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$c = {
+  tag,
+  "tag--success": "lc-Tag-module__tag--success___P2hXQ",
+  tag__remove,
+  "tag--error": "lc-Tag-module__tag--error___1cjsm",
+  "tag--warning": "lc-Tag-module__tag--warning___PstMG",
+  "tag--info": "lc-Tag-module__tag--info___RTH0C",
+  "tag--medium": "lc-Tag-module__tag--medium___l5-KI",
+  "tag--large": "lc-Tag-module__tag--large___ytC6Y",
+  "tag--outline": "lc-Tag-module__tag--outline___aZXtr",
+  icon,
+  "tag--text-white": "lc-Tag-module__tag--text-white___x0fnD",
+  "tag--text-black": "lc-Tag-module__tag--text-black___dUvmD",
+  "tag--with-icon": "lc-Tag-module__tag--with-icon___ZlkvT",
+  "tag--dismissible": "lc-Tag-module__tag--dismissible___Qobyr",
+  tag__icon,
+  tag__avatar
+};
+const baseClass$j = "tag";
+const getCustomTextClass = (customColor) => {
+  if (!customColor) {
+    return "";
+  }
+  return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
+};
+const Tag = (_I) => {
+  var _J = _I, {
+    className = "",
+    children,
+    dismissible = false,
+    size = "medium",
+    kind = "default",
+    onRemove,
+    outline = false,
+    icon: icon2,
+    avatar: avatar2,
+    customColor
+  } = _J, restProps = __objRest(_J, [
+    "className",
+    "children",
+    "dismissible",
+    "size",
+    "kind",
+    "onRemove",
+    "outline",
+    "icon",
+    "avatar",
+    "customColor"
+  ]);
+  const mergedClassNames = cx(styles$c[baseClass$j], className, styles$c[`${baseClass$j}--${size}`], styles$c[`${baseClass$j}--${kind}`], {
+    [styles$c[`${baseClass$j}--dismissible`]]: dismissible,
+    [styles$c[`${baseClass$j}--outline`]]: outline,
+    [styles$c[`${baseClass$j}--with-icon`]]: !!icon2 || !!avatar2,
+    [styles$c[`${baseClass$j}--${getCustomTextClass(customColor)}`]]: !!customColor
+  });
+  const getCustomColorStyles = () => {
+    if (!customColor) {
+      return {};
+    }
+    if (outline) {
+      return {
+        style: {
+          backgroundColor: "transparent",
+          color: customColor,
+          borderColor: customColor
+        }
+      };
+    }
+    return { style: { backgroundColor: customColor } };
+  };
+  const getIconCustomColor = () => {
+    if (!customColor) {
+      return void 0;
+    }
+    if (outline) {
+      return customColor;
+    }
+    return getContrast(customColor, "#FFFFFF") > 4.5 ? "#FFFFFF" : "#000000";
+  };
+  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues(__spreadValues({
+    className: mergedClassNames
+  }, restProps), getCustomColorStyles()), {
+    as: "div",
+    size: "md"
+  }), avatar2 && /* @__PURE__ */ React.createElement("img", {
+    className: styles$c[`${baseClass$j}__avatar`],
+    src: avatar2,
+    alt: "tag-avatar",
+    "data-testid": "lc-tag-avatar"
+  }), " ", icon2 && !avatar2 && /* @__PURE__ */ React.createElement(Icon, {
+    "data-testid": "lc-tag-icon",
+    className: styles$c[`${baseClass$j}__icon`],
+    source: icon2,
+    size: "small",
+    customColor: getIconCustomColor()
+  }), children, dismissible && /* @__PURE__ */ React.createElement("button", {
+    title: "Remove",
+    onClick: onRemove,
+    type: "button",
+    className: styles$c[`${baseClass$j}__remove`]
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    "data-dismiss-icon": true,
+    source: Close,
+    size: "medium",
+    customColor: getIconCustomColor()
+  })));
+};
+var styles$b = {
+  "picker-trigger-body": "lc-TriggerBody-module__picker-trigger-body___ZWjX9",
+  "picker-trigger-body__input": "lc-TriggerBody-module__picker-trigger-body__input___ezPyz"
+};
+const baseClass$i = "picker-trigger-body";
+const TriggerBody = ({
+  isOpen,
+  isSearchDisabled,
+  placeholder,
+  items,
+  type,
+  onItemRemove,
+  onFilter
+}) => {
+  const shouldDisplaySearch = isOpen && !isSearchDisabled;
+  const getSingleItem = (name) => {
+    if (isOpen && !isSearchDisabled) {
+      return null;
+    }
+    return name;
+  };
+  const handleOnChange = (e) => {
+    onFilter(e.target.value);
+  };
+  const getSearch = () => /* @__PURE__ */ React.createElement("input", {
+    className: styles$b[`${baseClass$i}__input`],
+    placeholder: "Select option",
+    onChange: handleOnChange,
+    autoFocus: true
+  });
+  if (!items || items.length === 0) {
+    return shouldDisplaySearch ? getSearch() : /* @__PURE__ */ React.createElement("div", null, placeholder);
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles$b[baseClass$i]
+  }, type === "single" ? getSingleItem(items[0].name) : items.map((item) => {
+    return /* @__PURE__ */ React.createElement(Tag, {
+      key: item.name,
+      className: styles$b[`${baseClass$i}__tag`],
+      dismissible: true,
+      onRemove: () => onItemRemove(item)
+    }, item.name);
+  }), shouldDisplaySearch && getSearch());
+};
+const baseClass$h = "picker";
 const Picker = ({
+  className,
   disabled,
   error,
   label,
   options,
-  selectedOption,
+  selected,
   size = "medium",
   placeholder = "Select option",
   isRequired,
   noSearchResultText = "No results found",
+  selectAllOptionText,
+  type = "single",
   searchDisabled = false,
   onSelect
 }) => {
   const [isListOpen, setIsListOpen] = React.useState(false);
-  const [selectedItem, setSelectedItem] = React.useState(selectedOption || null);
   const [searchPhrase, setSearchPhrase] = React.useState(null);
   const triggerRef = React.useRef(null);
+  const mergedClassNames = cx(styles$d[baseClass$h], className);
   React.useEffect(() => {
     if (isListOpen) {
       const onDocumentClick = (e) => {
@@ -2248,26 +2432,51 @@ const Picker = ({
       setSearchPhrase(null);
     }
   }, [isListOpen]);
-  const handleOnTriggerClick = () => {
-    if (disabled) {
+  const handleTrigger = (e) => {
+    const target = e.target;
+    if (disabled || target.getAttribute("data-dismiss-icon")) {
       return;
     }
-    return setIsListOpen((prev) => !prev);
+    setIsListOpen((prev) => !prev);
   };
   const handleOnClose = () => {
     setIsListOpen(false);
   };
-  const handleOnSelect = (item) => {
+  const handleSelect = (item) => {
+    if (type === "single") {
+      setIsListOpen(false);
+      return onSelect([item]);
+    }
+    const selectedItemKey = item.key;
+    const currentSelectedItemsKeys = selectedItemsKeys;
+    if (!currentSelectedItemsKeys) {
+      return onSelect([item]);
+    }
+    const newSelectedItemsKeys = currentSelectedItemsKeys.includes(selectedItemKey) ? currentSelectedItemsKeys.filter((key) => key !== selectedItemKey) : currentSelectedItemsKeys.concat(selectedItemKey);
+    if ((newSelectedItemsKeys == null ? void 0 : newSelectedItemsKeys.length) === 0) {
+      return onSelect(null);
+    }
+    const newSelectedItems = items.filter((item2) => newSelectedItemsKeys.includes(item2.key));
+    onSelect(newSelectedItems);
+  };
+  const isItemSelectable = (item) => !item.disabled && !item.groupHeader && item.key !== SELECT_ALL_OPTION_KEY;
+  const handleSelectAll = () => {
     setIsListOpen(false);
-    setSelectedItem(item);
-    onSelect(item);
+    const itemsToSelect = items.filter(isItemSelectable);
+    onSelect(itemsToSelect);
   };
-  const handleOnClearClick = () => {
+  const handleClear = () => {
     setIsListOpen(false);
-    setSelectedItem(null);
     onSelect(null);
   };
   const handleOnFilter = (text) => setSearchPhrase(text);
+  const handleItemRemove = (item) => {
+    const newSelectedItems = selected ? selected.filter((selectedItem) => selectedItem !== item) : null;
+    if ((newSelectedItems == null ? void 0 : newSelectedItems.length) === 0) {
+      return onSelect(null);
+    }
+    onSelect(newSelectedItems);
+  };
   const items = React.useMemo(() => {
     if (!searchPhrase) {
       return options;
@@ -2281,38 +2490,54 @@ const Picker = ({
       return itemName.includes(search);
     });
   }, [searchPhrase]);
+  const selectedItemsKeys = React.useMemo(() => {
+    if (!selected) {
+      return null;
+    }
+    return selected.map((item) => item.key);
+  }, [selected]);
   return /* @__PURE__ */ React.createElement("div", {
     ref: triggerRef,
-    className: styles$c[baseClass$i]
+    className: mergedClassNames
   }, label && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$c[`${baseClass$i}__label`], {
-      [styles$c[`${baseClass$i}__label--disabled`]]: disabled
+    className: cx(styles$d[`${baseClass$h}__label`], {
+      [styles$d[`${baseClass$h}__label--disabled`]]: disabled
     })
   }, label), /* @__PURE__ */ React.createElement("div", {
-    className: styles$c[`${baseClass$i}__container`]
+    className: styles$d[`${baseClass$h}__container`]
   }, /* @__PURE__ */ React.createElement(Trigger, {
     isSearchDisabled: searchDisabled,
     isError: !!error,
     isOpen: isListOpen,
     isDisabled: disabled,
-    isItemSelected: !!selectedItem,
+    isItemSelected: !!selected,
     isRequired,
+    isMultiSelect: type === "multi",
     size,
-    onClick: handleOnTriggerClick,
-    onClearClick: handleOnClearClick,
+    onTrigger: handleTrigger,
+    onClear: handleClear
+  }, /* @__PURE__ */ React.createElement(TriggerBody, {
+    isOpen: isListOpen,
+    isSearchDisabled: searchDisabled,
+    placeholder,
+    items: selected,
+    type,
+    onItemRemove: handleItemRemove,
     onFilter: handleOnFilter
-  }, selectedItem ? selectedItem.name : placeholder), /* @__PURE__ */ React.createElement(PickerList, {
-    selectedItem,
+  })), /* @__PURE__ */ React.createElement(PickerList, {
+    selectedItemsKeys,
     items,
     isOpen: isListOpen,
-    size,
+    isMultiSelect: type === "multi",
     emptyStateText: noSearchResultText,
+    selectAllOptionText,
     onClose: handleOnClose,
-    onSelect: handleOnSelect
+    onSelect: handleSelect,
+    onSelectAll: handleSelectAll
   })), error && /* @__PURE__ */ React.createElement("div", {
-    className: styles$c[`${baseClass$i}__error`]
+    className: styles$d[`${baseClass$h}__error`]
   }, /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$c[`${baseClass$i}__error__icon`],
+    className: styles$d[`${baseClass$h}__error__icon`],
     source: Error2,
     kind: "error",
     size: "small"
@@ -2329,6 +2554,7 @@ const Popover = (props) => {
     children,
     className,
     placement,
+    flipOptions,
     isVisible = false
   } = props;
   const [visible, setVisibility] = React.useState(false);
@@ -2342,7 +2568,7 @@ const Popover = (props) => {
     update,
     placement: updatedPlacement
   } = useFloating({
-    middleware: [offset(4), flip()],
+    middleware: [offset(4), flip(flipOptions)],
     placement
   });
   React.useEffect(() => {
@@ -2410,7 +2636,7 @@ function getProgressStatus(status, percent) {
   }
   return status || "normal";
 }
-var styles$b = {
+var styles$a = {
   "progress-circle": "lc-ProgressCircle-module__progress-circle___NRHCi",
   "progress-circle--small": "lc-ProgressCircle-module__progress-circle--small___8FVwG",
   "progress-circle--medium": "lc-ProgressCircle-module__progress-circle--medium___XlzEX",
@@ -2436,7 +2662,7 @@ const SIZE_VALUE_FROM_SIZE = {
   medium: 36,
   large: 56
 };
-const baseClass$h = "progress-circle";
+const baseClass$g = "progress-circle";
 const ProgressCircle = React.forwardRef((_K, ref) => {
   var _L = _K, {
     status = "normal",
@@ -2453,9 +2679,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$a[baseClass$g], {
+    [styles$a[`${baseClass$g}--${size}`]]: size,
+    [styles$a[`${baseClass$g}--${status}`]]: status
   }, className);
   const circumference = 2 * Math.PI * ((sizeValue - thickness) / 2);
   const indicatorStyle = {
@@ -2470,14 +2696,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$a[`${baseClass$g}__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$a[`${baseClass$g}__indicator--${status}`],
     style: indicatorStyle,
     cx: sizeValue,
     cy: sizeValue,
@@ -2486,7 +2712,7 @@ const ProgressCircle = React.forwardRef((_K, ref) => {
     strokeWidth: thickness
   })));
 });
-var styles$a = {
+var styles$9 = {
   "progress-bar": "lc-ProgressBar-module__progress-bar___3pa3d",
   "progress-bar--small": "lc-ProgressBar-module__progress-bar--small___7nQKx",
   "progress-bar--medium": "lc-ProgressBar-module__progress-bar--medium___cM44p",
@@ -2497,7 +2723,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$f = "progress-bar";
 const ProgressBar = React.forwardRef((_M, ref) => {
   var _N = _M, {
     status = "normal",
@@ -2512,20 +2738,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$9[baseClass$f], {
+    [styles$9[`${baseClass$f}--${size}`]]: size,
+    [styles$9[`${baseClass$f}--${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$9[`${baseClass$f}__indicator--${status}`],
     style: { width: `${percentNumber}%` }
   }));
 });
-var styles$9 = {
+var styles$8 = {
   "promo-banner": "lc-PromoBanner-module__promo-banner___-mGpq",
   "promo-banner__content": "lc-PromoBanner-module__promo-banner__content___kRWar",
   "promo-banner__wrapper": "lc-PromoBanner-module__promo-banner__wrapper___I-8cl",
@@ -2541,7 +2767,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$e = "promo-banner";
 const PromoBanner = ({
   className,
   buttonText,
@@ -2556,10 +2782,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$8[baseClass$e], {
+    [styles$8[`${baseClass$e}--light`]]: light,
+    [styles$8[`${baseClass$e}--small`]]: containerSize === "small",
+    [styles$8[`${baseClass$e}--large`]]: containerSize === "large"
   }, className);
   React.useEffect(() => {
     const handleResize = () => {
@@ -2580,12 +2806,12 @@ const PromoBanner = ({
     };
   }, []);
   const footer = /* @__PURE__ */ React.createElement("div", {
-    className: styles$9[`${baseClass$f}__footer`]
+    className: styles$8[`${baseClass$e}__footer`]
   }, buttonText && /* @__PURE__ */ React.createElement(Button, {
     kind: "primary",
     size: "compact",
     onClick: onButtonClick,
-    className: styles$9[`${baseClass$f}__button-text`]
+    className: styles$8[`${baseClass$e}__button-text`]
   }, buttonText), linkText && /* @__PURE__ */ React.createElement(Button, {
     size: "compact",
     kind: "text",
@@ -2595,24 +2821,24 @@ const PromoBanner = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$9[`${baseClass$f}__content`]
+    className: styles$8[`${baseClass$e}__content`]
   }, img && /* @__PURE__ */ React.createElement("img", {
     src: img,
-    className: styles$9[`${baseClass$f}__img`]
+    className: styles$8[`${baseClass$e}__img`]
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$9[`${baseClass$f}__wrapper`]
+    className: styles$8[`${baseClass$e}__wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$9[`${baseClass$f}__header`]
+    className: styles$8[`${baseClass$e}__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$8[`${baseClass$e}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
     size: "large"
   })));
 };
-var styles$8 = {
+var styles$7 = {
   "radio-button": "lc-RadioButton-module__radio-button___WaToM",
   "radio-button__label": "lc-RadioButton-module__radio-button__label___i7ygg",
   "radio-button__circle": "lc-RadioButton-module__radio-button__circle___wimWA",
@@ -2623,23 +2849,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$d = "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$7[baseClass$d], className, {
+    [styles$7[`${baseClass$d}--selected`]]: checked,
+    [styles$7[`${baseClass$d}--disabled`]]: disabled
   });
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$8[`${baseClass$e}__label`]
+    className: styles$7[`${baseClass$d}__label`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$8[`${baseClass$e}__circle`]
+    className: styles$7[`${baseClass$d}__circle`]
   }, /* @__PURE__ */ React.createElement("span", {
-    className: styles$8[`${baseClass$e}__inner-circle`]
+    className: styles$7[`${baseClass$d}__inner-circle`]
   }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
-    className: styles$8[`${baseClass$e}__input`],
+    className: styles$7[`${baseClass$d}__input`],
     ref,
     type: "radio",
     checked,
@@ -2647,12 +2873,12 @@ const RadioButton = React.forwardRef((_O, ref) => {
   }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$8[`${baseClass$e}__text`]
+    className: styles$7[`${baseClass$d}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$8[`${baseClass$e}__helper`]
+    className: styles$7[`${baseClass$d}__helper`]
   }, description));
 });
-var styles$7 = {
+var styles$6 = {
   "search-input": "lc-Search-module__search-input___FsbCk",
   "search-input__search-icon": "lc-Search-module__search-input__search-icon___BBQoD",
   "search-input__clear-icon": "lc-Search-module__search-input__clear-icon___LoNkc",
@@ -2665,8 +2891,8 @@ var styles$7 = {
   "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`;
+const baseClass$c = "search-input";
+const inputBaseClass = `${baseClass$c}__input`;
 const SearchInput = ({
   isCollapsable,
   isDisabled,
@@ -2674,13 +2900,14 @@ const SearchInput = ({
   placeholder = "Search ...",
   size = "medium",
   value,
+  className,
   onChange
 }) => {
   const [searchValue, setSearchValue] = React.useState(value || "");
   const [isCollapsed, setIsCollapsed] = React.useState(true);
   const inputRef = React.useRef(null);
   const isCloseIconVisible = !!searchValue && !isDisabled && !isLoading;
-  const mergedClassNames = cx(styles$7[`${inputBaseClass}`], styles$7[`${inputBaseClass}--${size}`], (isDisabled || isLoading) && styles$7[`${inputBaseClass}--disabled`], isCollapsable && styles$7[`${inputBaseClass}--collapsable`], !isCollapsed && styles$7[`${inputBaseClass}--collapsable--open`]);
+  const mergedClassNames = cx(className, styles$6[`${inputBaseClass}`], styles$6[`${inputBaseClass}--${size}`], (isDisabled || isLoading) && styles$6[`${inputBaseClass}--disabled`], isCollapsable && styles$6[`${inputBaseClass}--collapsable`], !isCollapsed && styles$6[`${inputBaseClass}--collapsable--open`]);
   React.useEffect(() => {
     if (typeof value === "string") {
       setSearchValue(value);
@@ -2716,11 +2943,11 @@ const SearchInput = ({
     }
   };
   return /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$d}-container`,
-    className: styles$7[baseClass$d],
+    "data-testid": `${baseClass$c}-container`,
+    className: styles$6[baseClass$c],
     onClick: handleClick
   }, /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$7[`${baseClass$d}__search-icon`],
+    className: styles$6[`${baseClass$c}__search-icon`],
     source: Search,
     disabled: isDisabled || isLoading,
     kind: "primary"
@@ -2736,14 +2963,14 @@ const SearchInput = ({
     onKeyDown: handleKeyDown,
     disabled: isDisabled || isLoading
   }), isCloseIconVisible && /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$d}__clear-icon`],
-    "data-testid": `${baseClass$d}-clear-icon`,
+    className: styles$6[`${baseClass$c}__clear-icon`],
+    "data-testid": `${baseClass$c}-clear-icon`,
     onClick: handleClear
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close
   })), isLoading && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$d}-loader`,
-    className: styles$7[`${baseClass$d}__loader`]
+    "data-testid": `${baseClass$c}-loader`,
+    className: styles$6[`${baseClass$c}__loader`]
   }, /* @__PURE__ */ React.createElement(Loader, {
     size: "small"
   })));
@@ -2754,7 +2981,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$5 = {
   "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",
@@ -2783,18 +3010,19 @@ var styles$6 = {
   "switch__loader--large": "lc-Switch-module__switch__loader--large___vLRFa",
   switch__icon
 };
-const baseClass$c = "switch";
+const baseClass$b = "switch";
 const Switch = (_Q) => {
   var _R = _Q, {
     className = "",
     defaultOn = false,
     disabled = false,
-    name = baseClass$c,
+    name = baseClass$b,
     on,
     onChange = noop,
     size = "large",
     state = "regular",
-    innerRef
+    innerRef,
+    ariaLabel
   } = _R, props = __objRest(_R, [
     "className",
     "defaultOn",
@@ -2804,7 +3032,8 @@ const Switch = (_Q) => {
     "onChange",
     "size",
     "state",
-    "innerRef"
+    "innerRef",
+    "ariaLabel"
   ]);
   const [checked, setChecked] = React.useState(() => on !== void 0 ? on : defaultOn);
   React.useEffect(() => {
@@ -2818,7 +3047,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$5[baseClass$b], styles$5[`${baseClass$b}--${size}`], className);
   const handleChange = (e) => {
     const hasOnChangePassed = onChange !== noop;
     if (hasOnChangePassed) {
@@ -2832,23 +3061,23 @@ 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$5[`${baseClass$b}__input`], styles$5[`${baseClass$b}__input--${availabilityStyles}`]),
     onChange: handleChange,
     checked,
     name,
     ref: innerRef,
     disabled: shouldBehaveAsDisabled,
-    "test-id": "foo"
+    "aria-label": ariaLabel
   }, props)), /* @__PURE__ */ React.createElement("span", {
-    className: styles$6[`${baseClass$c}__container`]
+    className: styles$5[`${baseClass$b}__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$5[`${baseClass$b}__track`], styles$5[`${baseClass$b}__track--${toggleStyles}`], styles$5[`${baseClass$b}__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$5[`${baseClass$b}__slider`], styles$5[`${baseClass$b}__slider--${size}`], styles$5[`${baseClass$b}__slider--${size}--${toggleStyles}`])
   }, isLoading && /* @__PURE__ */ React.createElement(Loader, {
-    className: cx(styles$6[`${baseClass$c}__loader`], styles$6[`${baseClass$c}__loader--${size}`])
+    className: cx(styles$5[`${baseClass$b}__loader`], styles$5[`${baseClass$b}__loader--${size}`])
   }), isLocked && /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$6[`${baseClass$c}__icon`],
+    className: styles$5[`${baseClass$b}__icon`],
     "data-testid": "lock-icon",
     size: iconSize,
     source: LockBlack,
@@ -2857,12 +3086,12 @@ const Switch = (_Q) => {
 };
 const tab = "lc-Tab-module__tab___fME7u";
 const tab__description = "lc-Tab-module__tab__description___JGXU6";
-var styles$5 = {
+var styles$4 = {
   tab,
   tab__description,
   "tab--selected": "lc-Tab-module__tab--selected___c0EkL"
 };
-const baseClass$b = "tab";
+const baseClass$a = "tab";
 const Tab = (_S) => {
   var _T = _S, {
     children,
@@ -2879,26 +3108,26 @@ const Tab = (_S) => {
     as: restProps.href ? "a" : "button",
     size: "md",
     bold: isSelected,
-    className: cx(styles$5[baseClass$b], className, isSelected && styles$5[`${baseClass$b}--selected`])
+    className: cx(styles$4[baseClass$a], className, isSelected && styles$4[`${baseClass$a}--selected`])
   }), children, description && /* @__PURE__ */ React.createElement(Text, {
     as: "span",
     size: "md",
-    className: styles$5[`${baseClass$b}__description`]
+    className: styles$4[`${baseClass$a}__description`]
   }, "(", description, ")"));
 };
 const tabs = "lc-TabsWrapper-module__tabs___Y2xyD";
 const tabs__list = "lc-TabsWrapper-module__tabs__list___i6tVO";
-var styles$4 = {
+var styles$3 = {
   tabs,
   tabs__list
 };
-const baseClass$a = "tabs";
+const baseClass$9 = "tabs";
 const TabsWrapper = ({
   className,
   children
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$4[baseClass$a], className)
+    className: cx(styles$3[baseClass$9], className)
   }, children);
 };
 const TabsList = ({
@@ -2906,120 +3135,9 @@ const TabsList = ({
   children
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$4[`${baseClass$a}__list`], className)
+    className: cx(styles$3[`${baseClass$9}__list`], className)
   }, children);
 };
-const tag = "lc-Tag-module__tag___1QRVY";
-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$3 = {
-  tag,
-  "tag--success": "lc-Tag-module__tag--success___P2hXQ",
-  tag__remove,
-  "tag--error": "lc-Tag-module__tag--error___1cjsm",
-  "tag--warning": "lc-Tag-module__tag--warning___PstMG",
-  "tag--info": "lc-Tag-module__tag--info___RTH0C",
-  "tag--medium": "lc-Tag-module__tag--medium___l5-KI",
-  "tag--large": "lc-Tag-module__tag--large___ytC6Y",
-  "tag--outline": "lc-Tag-module__tag--outline___aZXtr",
-  icon,
-  "tag--text-white": "lc-Tag-module__tag--text-white___x0fnD",
-  "tag--text-black": "lc-Tag-module__tag--text-black___dUvmD",
-  "tag--with-icon": "lc-Tag-module__tag--with-icon___ZlkvT",
-  "tag--dismissible": "lc-Tag-module__tag--dismissible___Qobyr",
-  tag__icon,
-  tag__avatar
-};
-const baseClass$9 = "tag";
-const getCustomTextClass = (customColor) => {
-  if (!customColor) {
-    return "";
-  }
-  return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
-};
-const Tag = (_U) => {
-  var _V = _U, {
-    className = "",
-    children,
-    dismissible = false,
-    size = "medium",
-    kind = "default",
-    onRemove,
-    outline = false,
-    icon: icon2,
-    avatar: avatar2,
-    customColor
-  } = _V, restProps = __objRest(_V, [
-    "className",
-    "children",
-    "dismissible",
-    "size",
-    "kind",
-    "onRemove",
-    "outline",
-    "icon",
-    "avatar",
-    "customColor"
-  ]);
-  const mergedClassNames = cx(styles$3[baseClass$9], className, styles$3[`${baseClass$9}--${size}`], styles$3[`${baseClass$9}--${kind}`], {
-    [styles$3[`${baseClass$9}--dismissible`]]: dismissible,
-    [styles$3[`${baseClass$9}--outline`]]: outline,
-    [styles$3[`${baseClass$9}--with-icon`]]: !!icon2 || !!avatar2,
-    [styles$3[`${baseClass$9}--${getCustomTextClass(customColor)}`]]: !!customColor
-  });
-  const getCustomColorStyles = () => {
-    if (!customColor) {
-      return {};
-    }
-    if (outline) {
-      return {
-        style: {
-          backgroundColor: "transparent",
-          color: customColor,
-          borderColor: customColor
-        }
-      };
-    }
-    return { style: { backgroundColor: customColor } };
-  };
-  const getIconCustomColor = () => {
-    if (!customColor) {
-      return void 0;
-    }
-    if (outline) {
-      return customColor;
-    }
-    return getContrast(customColor, "#FFFFFF") > 4.5 ? "#FFFFFF" : "#000000";
-  };
-  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues(__spreadValues({
-    className: mergedClassNames
-  }, restProps), getCustomColorStyles()), {
-    as: "div",
-    size: "md"
-  }), avatar2 && /* @__PURE__ */ React.createElement("img", {
-    className: styles$3[`${baseClass$9}__avatar`],
-    src: avatar2,
-    alt: "tag-avatar",
-    "data-testid": "lc-tag-avatar"
-  }), " ", icon2 && !avatar2 && /* @__PURE__ */ React.createElement(Icon, {
-    "data-testid": "lc-tag-icon",
-    className: styles$3[`${baseClass$9}__icon`],
-    source: icon2,
-    size: "small",
-    customColor: getIconCustomColor()
-  }), children, dismissible && /* @__PURE__ */ React.createElement("button", {
-    title: "Remove",
-    onClick: onRemove,
-    type: "button",
-    className: styles$3[`${baseClass$9}__remove`]
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    source: Close,
-    size: "medium",
-    customColor: getIconCustomColor()
-  })));
-};
 const EditableTagContent = ({
   className = "",
   innerEditableRef,
@@ -3271,15 +3389,15 @@ const iconConfig = {
   }
 };
 const baseClass$6 = "toast";
-const Toast = (_W) => {
-  var _X = _W, {
+const Toast = (_U) => {
+  var _V = _U, {
     action,
     className,
     children,
     removable,
     kind = "info",
     onClose
-  } = _X, divProps = __objRest(_X, [
+  } = _V, divProps = __objRest(_V, [
     "action",
     "className",
     "children",
@@ -3823,4 +3941,4 @@ const UserGuide = (props) => {
     })
   }), props.children)) : null;
 };
-export { ANIMATION_TIME, ActionModal, Alert, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };
+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, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };