@livechat/design-system-react-components 1.0.0-alpha.9 → 1.0.0-y.0

package/dist/dsrc.es.js

@@ -29,64 +29,163 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 import * as React from "react";
+import { useReducer, useRef, useEffect, useCallback, useMemo } from "react";
 import cx from "clsx";
-import { Info, Warning, CheckCircleSolid, Block, Close, Check, ChevronUp, ChevronDown, Error as Error2 } from "@livechat/design-system-icons/react/material";
-import { debounce } from "lodash";
-import * as ReactDOM from "react-dom";
-import { usePopper } from "react-popper";
+import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, Check, DoubleArrowLeft, ChevronLeft, ChevronRight, DoubleArrowRight, VisibilityOn, VisibilityOff, Error as Error2, Search, LockBlack, Refresh } from "@livechat/design-system-icons/react/material";
+import debounce from "lodash.debounce";
 import { getContrast } from "polished";
+import ReactDayPicker from "react-day-picker";
+import { subMonths, differenceInCalendarMonths, addMonths, isSameMonth, isSameDay, isAfter, differenceInCalendarDays } from "date-fns";
+import * as ReactDOM from "react-dom";
+import { useFloating, offset, flip, autoUpdate, arrow } from "@floating-ui/react-dom";
 import escape from "lodash.escape";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
+import { css } from "@emotion/css";
 var index = "";
-const DesignTokens = {
+const DesignToken = {
   Background: "--background",
+  Background01: "--background-01",
+  Background02: "--background-02",
+  Background03: "--background-03",
   SurfaceBasicDefault: "--surface-basic-default",
+  SurfacePrimaryDefault: "--surface-primary-default",
   SurfaceBasicSubtle: "--surface-basic-subtle",
+  SurfaceSecondaryDefault: "--surface-secondary-default",
+  SurfaceSecondaryHover: "--surface-secondary-hover",
+  SurfaceSecondaryActive: "--surface-secondary-active",
+  SurfaceSecondaryDisabled: "--surface-secondary-disabled",
   SurfaceBasicHover: "--surface-basic-hover",
+  SurfacePrimaryHover: "--surface-primary-hover",
   SurfaceBasicActive: "--surface-basic-active",
+  SurfacePrimaryActive: "--surface-primary-active",
+  SurfacePrimaryActiveColored: "--surface-primary-active-colored",
   SurfaceBasicDisabled: "--surface-basic-disabled",
-  SurfaceSecondaryDefault: "--surface-secondary-default",
+  SurfacePrimaryDisabled: "--surface-primary-disabled",
+  SurfaceTertiaryDefault: "--surface-tertiary-default",
   SurfaceSecondarySubtle: "--surface-secondary-subtle",
-  SurfaceSecondaryHover: "--surface-secondary-hover",
-  SurfaceSecondaryDisabled: "--surface-secondary-disabled",
+  SurfaceModerateDefault: "--surface-moderate-default",
+  SurfaceModerateHover: "--surface-moderate-hover",
+  SurfaceModerateActive: "--surface-moderate-active",
+  SurfaceTertiaryHover: "--surface-tertiary-hover",
+  SurfaceTertiaryActive: "--surface-tertiary-active",
+  SurfaceTertiaryDisabled: "--surface-tertiary-disabled",
   SurfaceFeedbackInfo: "--surface-feedback-info",
+  SurfaceAccentEmphasisLowInfo: "--surface-accent-emphasis-low-info",
   SurfaceFeedbackNegative: "--surface-feedback-negative",
+  SurfaceAccentEmphasisLowNegative: "--surface-accent-emphasis-low-negative",
   SurfaceFeedbackWarning: "--surface-feedback-warning",
+  SurfaceAccentEmphasisLowWarning: "--surface-accent-emphasis-low-warning",
   SurfaceFeedbackPositive: "--surface-feedback-positive",
+  SurfaceAccentEmphasisLowPositive: "--surface-accent-emphasis-low-positive",
+  SurfaceAccentEmphasisLowPurple: "--surface-accent-emphasis-low-purple",
+  SurfaceAccentEmphasisMinInfo: "--surface-accent-emphasis-min-info",
+  SurfaceAccentEmphasisMinNegative: "--surface-accent-emphasis-min-negative",
+  SurfaceAccentEmphasisMinWarning: "--surface-accent-emphasis-min-warning",
+  SurfaceAccentEmphasisMinPositive: "--surface-accent-emphasis-min-positive",
+  SurfaceAccentEmphasisMinPurple: "--surface-accent-emphasis-min-purple",
   SurfaceInvertDefault: "--surface-invert-default",
+  SurfaceInvertPrimary: "--surface-invert-primary",
   SurfaceInvertSubtle: "--surface-invert-subtle",
+  SurfaceInvertSecondary: "--surface-invert-secondary",
   SurfaceInvertDisabled: "--surface-invert-disabled",
+  SurfaceLockedDefault: "--surface-locked-default",
+  SurfaceLockedHover: "--surface-locked-hover",
+  SurfaceLockedActive: "--surface-locked-active",
+  SurfaceLockedDisabled: "--surface-locked-disabled",
+  SurfaceLockedWhite: "--surface-locked-white",
+  SurfaceLockedBlack: "--surface-locked-black",
+  SurfaceAccentEmphasisHighInfo: "--surface-accent-emphasis-high-info",
+  SurfaceAccentEmphasisHighNegative: "--surface-accent-emphasis-high-negative",
+  SurfaceAccentEmphasisHighWarning: "--surface-accent-emphasis-high-warning",
+  SurfaceAccentEmphasisHighPositive: "--surface-accent-emphasis-high-positive",
+  SurfaceAccentEmphasisHighPurple: "--surface-accent-emphasis-high-purple",
   SurfaceOverlay: "--surface-overlay",
+  SurfaceOtherOverlay: "--surface-other-overlay",
+  SurfaceOtherAgent: "--surface-other-agent",
+  SurfaceOtherSkeleton: "--surface-other-skeleton",
   ContentDefault: "--content-default",
+  ContentBasicPrimary: "--content-basic-primary",
   ContentSubtle: "--content-subtle",
+  ContentBasicSecondary: "--content-basic-secondary",
   ContentDisabled: "--content-disabled",
+  ContentBasicDisabled: "--content-basic-disabled",
+  ContentBasicNegative: "--content-basic-negative",
+  ContentBasicWarning: "--content-basic-warning",
+  ContentBasicPositive: "--content-basic-positive",
+  ContentBasicInfo: "--content-basic-info",
+  ContentBasicPurple: "--content-basic-purple",
+  ContentBasicGradient01: "--content-basic-gradient-01",
   ContentWhiteLocked: "--content-white-locked",
+  ContentLockedWhite: "--content-locked-white",
+  ContentBlackLocked: "--content-black-locked",
+  ContentLockedBlack: "--content-locked-black",
+  ContentLockedDefault: "--content-locked-default",
+  ContentLockedHover: "--content-locked-hover",
+  ContentLockedActive: "--content-locked-active",
+  ContentLockedDisabled: "--content-locked-disabled",
   ContentInvertDefault: "--content-invert-default",
+  ContentInvertPrimary: "--content-invert-primary",
   ContentInvertSubtle: "--content-invert-subtle",
+  ContentInvertSecondary: "--content-invert-secondary",
   ContentInvertDisabled: "--content-invert-disabled",
+  ContentInvertGradient01: "--content-invert-gradient-01",
   BorderDefault: "--border-default",
+  BorderBasicPrimary: "--border-basic-primary",
+  BorderBasicSecondary: "--border-basic-secondary",
   BorderSubtle: "--border-subtle",
+  BorderBasicTertiary: "--border-basic-tertiary",
   BorderHover: "--border-hover",
+  BorderBasicHover: "--border-basic-hover",
   BorderDisabled: "--border-disabled",
+  BorderBasicDisabled: "--border-basic-disabled",
+  BorderBasicNegative: "--border-basic-negative",
+  BorderBasicWarning: "--border-basic-warning",
+  BorderBasicPositive: "--border-basic-positive",
+  BorderBasicInfo: "--border-basic-info",
+  BorderBasicPurple: "--border-basic-purple",
   BorderInvertDefault: "--border-invert-default",
+  BorderInvertPrimary: "--border-invert-primary",
   BorderInvertSubtle: "--border-invert-subtle",
+  BorderInvertSecondary: "--border-invert-secondary",
   BorderInvertHover: "--border-invert-hover",
   BorderInvertDisabled: "--border-invert-disabled",
   ColorActionActive: "--color-action-active",
+  ActionPrimaryActive: "--action-primary-active",
   ColorActionHover: "--color-action-hover",
+  ActionPrimaryHover: "--action-primary-hover",
   ColorActionDefault: "--color-action-default",
+  ActionPrimaryDefault: "--action-primary-default",
+  ColorActionDefaultRgb: "--color-action-default-rgb",
   ColorActionDisabled: "--color-action-disabled",
+  ActionPrimaryDisabled: "--action-primary-disabled",
   ColorNegativeActive: "--color-negative-active",
+  ActionNegativeActive: "--action-negative-active",
   ColorNegativeHover: "--color-negative-hover",
+  ActionNegativeHover: "--action-negative-hover",
   ColorNegativeDefault: "--color-negative-default",
+  ActionNegativeDefault: "--action-negative-default",
   ColorNegativeDisabled: "--color-negative-disabled",
+  ActionNegativeDisabled: "--action-negative-disabled",
   ColorWarningDefault: "--color-warning-default",
+  ActionWarningDefault: "--action-warning-default",
   ColorWarningHover: "--color-warning-hover",
+  ActionWarningHover: "--action-warning-hover",
   ColorPositiveDefault: "--color-positive-default",
+  ActionPositiveDefault: "--action-positive-default",
   ColorPositiveHover: "--color-positive-hover",
+  ActionPositiveHover: "--action-positive-hover",
   ColorPositiveDisabled: "--color-positive-disabled",
+  ActionPositiveDisabled: "--action-positive-disabled",
+  ActionNeutralDefault: "--action-neutral-default",
+  ActionNeutralHover: "--action-neutral-hover",
+  ActionNeutralDisabled: "--action-neutral-disabled",
   ColorBot: "--color-bot",
+  SurfaceOtherBot: "--surface-other-bot",
   ColorBlack: "--color-black",
   ColorWhite: "--color-white",
   DecorBlue900: "--decor-blue900",
@@ -163,10 +262,40 @@ const DesignTokens = {
   DecorPurple300: "--decor-purple300",
   DecorPurple200: "--decor-purple200",
   DecorPurple100: "--decor-purple100",
-  DecorPurple50: "--decor-purple50"
+  DecorPurple50: "--decor-purple50",
+  ProductsLivechat: "--products-livechat",
+  ProductsHelpdesk: "--products-helpdesk",
+  ProductsChatbot: "--products-chatbot",
+  ProductsKnowledgebase: "--products-knowledgebase",
+  IllustrationsPrimary: "--illustrations-primary",
+  IllustrationsSecondary: "--illustrations-secondary",
+  IllustrationsStroke: "--illustrations-stroke",
+  TagSurface01: "--tag-surface-01",
+  TagContent01: "--tag-content-01"
+};
+const SpacingToken = {
+  Spacing0: "--spacing-0",
+  Spacing05: "--spacing-05",
+  Spacing1: "--spacing-1",
+  Spacing2: "--spacing-2",
+  Spacing3: "--spacing-3",
+  Spacing4: "--spacing-4",
+  Spacing5: "--spacing-5",
+  Spacing6: "--spacing-6",
+  Spacing8: "--spacing-8",
+  Spacing12: "--spacing-12",
+  Spacing16: "--spacing-16",
+  Spacing18: "--spacing-18",
+  Spacing20: "--spacing-20",
+  Spacing24: "--spacing-24"
+};
+const ShadowToken = {
+  Float: "--shadow-float",
+  PopOver: "--shadow-pop-over",
+  Modal: "--shadow-modal"
 };
 const caps = "lc-Typography-module__caps___c3eNJ";
-var styles$r = {
+var styles$E = {
   "heading-xl": "lc-Typography-module__heading-xl___nhr-6",
   "heading-lg": "lc-Typography-module__heading-lg___XYF7l",
   "heading-md": "lc-Typography-module__heading-md___wHOIs",
@@ -183,14 +312,13 @@ var styles$r = {
   "paragraph-xs": "lc-Typography-module__paragraph-xs___OUooD",
   "paragraph-xs--bold": "lc-Typography-module__paragraph-xs--bold___z7om7"
 };
-var sizeToElement = /* @__PURE__ */ ((sizeToElement2) => {
-  sizeToElement2["xl"] = "h1";
-  sizeToElement2["lg"] = "h2";
-  sizeToElement2["md"] = "h3";
-  sizeToElement2["sm"] = "h4";
-  sizeToElement2["xs"] = "h5";
-  return sizeToElement2;
-})(sizeToElement || {});
+const SIZE_TO_ELEMENT_MAP = {
+  xl: "h1",
+  lg: "h2",
+  md: "h3",
+  sm: "h4",
+  xs: "h5"
+};
 const Heading = (_a) => {
   var _b = _a, {
     as,
@@ -203,7 +331,7 @@ const Heading = (_a) => {
     "children",
     "className"
   ]);
-  return React.createElement(as || sizeToElement[size], __spreadValues({ className: cx(styles$r[`heading-${size}`], className) }, props), children);
+  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$E[`heading-${size}`], className) }, props), children);
 };
 const Text = (_c) => {
   var _d = _c, {
@@ -228,15 +356,15 @@ const Text = (_c) => {
   const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
   return React.createElement(as, __spreadValues({
     className: cx({
-      [styles$r[`${baseClassPrefix}`]]: true,
-      [styles$r[`${baseClassPrefix}--bold`]]: bold,
-      [styles$r[`${baseClassPrefix}--strike`]]: strike,
-      [styles$r[`${baseClassPrefix}--underline`]]: underline
+      [styles$E[`${baseClassPrefix}`]]: true,
+      [styles$E[`${baseClassPrefix}--bold`]]: bold,
+      [styles$E[`${baseClassPrefix}--strike`]]: strike,
+      [styles$E[`${baseClassPrefix}--underline`]]: underline
     }, className)
   }, props), children);
 };
 const icon$1 = "lc-Icon-module__icon___tw31R";
-var styles$q = {
+var styles$D = {
   icon: icon$1,
   "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
   "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
@@ -255,95 +383,49 @@ var styles$q = {
   "icon--disabled--warning": "lc-Icon-module__icon--disabled--warning___8ko1e",
   "icon--disabled--error": "lc-Icon-module__icon--disabled--error___9KbVo"
 };
-var IconSizeName = /* @__PURE__ */ ((IconSizeName2) => {
-  IconSizeName2["XSmall"] = "xsmall";
-  IconSizeName2["Small"] = "small";
-  IconSizeName2["Medium"] = "medium";
-  IconSizeName2["Large"] = "large";
-  IconSizeName2["XLarge"] = "xlarge";
-  return IconSizeName2;
-})(IconSizeName || {});
-const IconSize = {
-  ["xsmall"]: {
+const IconSizeMap = {
+  xsmall: {
     width: 12,
     height: 12
   },
-  ["small"]: {
+  small: {
     width: 16,
     height: 16
   },
-  ["medium"]: {
+  medium: {
     width: 20,
     height: 20
   },
-  ["large"]: {
+  large: {
     width: 24,
     height: 24
   },
-  ["xlarge"]: {
+  xlarge: {
     width: 32,
     height: 32
   }
 };
-var IconTypeName = /* @__PURE__ */ ((IconTypeName2) => {
-  IconTypeName2["Primary"] = "primary";
-  IconTypeName2["Subtle"] = "subtle";
-  IconTypeName2["Inverted"] = "inverted";
-  IconTypeName2["InvertedSubtle"] = "inverted_subtle";
-  IconTypeName2["Link"] = "link";
-  IconTypeName2["Success"] = "success";
-  IconTypeName2["Warning"] = "warning";
-  IconTypeName2["Error"] = "error";
-  return IconTypeName2;
-})(IconTypeName || {});
-const IconColorMapper = {
-  ["primary"]: "primary",
-  ["subtle"]: "subtle",
-  ["inverted"]: "inverted",
-  ["inverted_subtle"]: "inverted-subtle",
-  ["link"]: "link",
-  ["success"]: "success",
-  ["warning"]: "warning",
-  ["error"]: "error"
-};
-const IconColorDisabledMapper = {
-  ["primary"]: "disabled--primary",
-  ["subtle"]: "disabled--subtle",
-  ["inverted"]: "disabled--inverted",
-  ["inverted_subtle"]: "disabled--inverted-subtle",
-  ["link"]: "disabled--link",
-  ["success"]: "disabled--success",
-  ["warning"]: "disabled--warning",
-  ["error"]: "disabled--error"
-};
-const baseClass$t = "icon";
+const baseClass$M = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
     size = "medium",
-    iconType,
+    kind,
     disabled,
     className,
     customColor
   } = _a, restProps = __objRest(_a, [
     "source",
     "size",
-    "iconType",
+    "kind",
     "disabled",
     "className",
     "customColor"
   ]);
-  let filledColor;
-  if (iconType) {
-    filledColor = IconColorMapper[iconType];
-    if (disabled) {
-      filledColor = IconColorDisabledMapper[iconType];
-    }
-  }
-  const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSize[size]), {
+  const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$q[baseClass$t], filledColor && styles$q[`${baseClass$t}--${filledColor}`]);
+  const mergedClassNames = cx(className, styles$D[baseClass$M], kind && styles$D[`${baseClass$M}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -351,7 +433,7 @@ const Icon = (props) => {
 const alert = "lc-Alert-module__alert___HBTns";
 const alert__content = "lc-Alert-module__alert__content___9nZdf";
 const alert__icon = "lc-Alert-module__alert__icon___8TaAH";
-var styles$p = {
+var styles$C = {
   alert,
   alert__content,
   "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
@@ -365,34 +447,40 @@ var styles$p = {
   "alert--error": "lc-Alert-module__alert--error___DKPo0",
   alert__icon
 };
-const IconConfig$1 = {
-  ["info"]: {
-    source: Info,
-    iconType: IconTypeName.Link
+const IconConfig = {
+  info: {
+    source: Info$1,
+    kind: "link"
   },
-  ["warning"]: {
+  warning: {
     source: Warning,
-    iconType: IconTypeName.Warning
+    kind: "warning"
   },
-  ["success"]: {
+  success: {
     source: CheckCircleSolid,
-    iconType: IconTypeName.Success
+    kind: "success"
   },
-  ["error"]: {
+  error: {
     source: Block,
-    iconType: IconTypeName.Error
+    kind: "error"
   }
 };
-const baseClass$s = "alert";
-const Alert = ({
-  children,
-  className,
-  type = "info",
-  onClose
-}) => {
+const baseClass$L = "alert";
+const Alert = (_e) => {
+  var _f = _e, {
+    children,
+    className,
+    kind = "info",
+    onClose
+  } = _f, props = __objRest(_f, [
+    "children",
+    "className",
+    "kind",
+    "onClose"
+  ]);
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$p[baseClass$s], styles$p[`${baseClass$s}--${type}`], isSmallContainer && styles$p[`${baseClass$s}--small`], className);
+  const mergedClassNames = cx(styles$C[baseClass$L], styles$C[`${baseClass$L}--${kind}`], isSmallContainer && styles$C[`${baseClass$L}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -403,47 +491,192 @@ const Alert = ({
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   });
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
     ref: containerRef,
     className: mergedClassNames
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$p[`${baseClass$s}__content`]
-  }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig$1[type]), {
-    className: styles$p[`${baseClass$s}__content-icon`]
+  }, props), /* @__PURE__ */ React.createElement("div", {
+    className: styles$C[`${baseClass$L}__content`]
+  }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
+    size: "large",
+    className: styles$C[`${baseClass$L}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$p[`${baseClass$s}__content-text`], onClose && styles$p[`${baseClass$s}__content-text--margin`])
+    className: cx(styles$C[`${baseClass$L}__content-text`], onClose && styles$C[`${baseClass$L}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$p[`${baseClass$s}__close-icon`],
+    className: styles$C[`${baseClass$L}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
-    size: IconSizeName.Large,
-    iconType: IconTypeName.Primary
+    size: "large",
+    kind: "primary"
   })));
 };
-const badge = "lc-Badge-module__badge___GhLnu";
-var styles$o = {
-  badge,
-  "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ"
+function getInitials(name = "", count = 2) {
+  return name.split(" ").map((el) => el.charAt(0)).join("").substring(0, count).toUpperCase();
+}
+function getFontColor(color) {
+  return getContrast(color, "#FFFFFF") > 4.5 ? "var(--color-white)" : "var(--color-black)";
+}
+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$B = {
+  avatar,
+  avatar__status,
+  "avatar__status--available": "lc-Avatar-module__avatar__status--available___tcpFg",
+  "avatar__status--unavailable": "lc-Avatar-module__avatar__status--unavailable___ciauF",
+  "avatar__status--unknown": "lc-Avatar-module__avatar__status--unknown___MBaGB",
+  "avatar__status--xxxsmall": "lc-Avatar-module__avatar__status--xxxsmall___8pkEO",
+  "avatar__status--circle": "lc-Avatar-module__avatar__status--circle___doV5H",
+  "avatar__status--xxsmall": "lc-Avatar-module__avatar__status--xxsmall___M69lx",
+  "avatar__status--xsmall": "lc-Avatar-module__avatar__status--xsmall___RKQiI",
+  "avatar__status--small": "lc-Avatar-module__avatar__status--small___cVrA7",
+  "avatar__status--medium": "lc-Avatar-module__avatar__status--medium___n5z1H",
+  "avatar__status--large": "lc-Avatar-module__avatar__status--large___Lt-0p",
+  "avatar__status--xlarge": "lc-Avatar-module__avatar__status--xlarge___RWIcJ",
+  "avatar__status--xxlarge": "lc-Avatar-module__avatar__status--xxlarge___crG9D",
+  "avatar__status--rounded-square": "lc-Avatar-module__avatar__status--rounded-square___-My1P",
+  avatar__rim,
+  "avatar__rim--xxxsmall": "lc-Avatar-module__avatar__rim--xxxsmall___0CH9D",
+  "avatar__rim--xxsmall": "lc-Avatar-module__avatar__rim--xxsmall___Mde0K",
+  "avatar__rim--xsmall": "lc-Avatar-module__avatar__rim--xsmall___LAN-b",
+  "avatar__rim--small": "lc-Avatar-module__avatar__rim--small___FT8LX",
+  "avatar__rim--medium": "lc-Avatar-module__avatar__rim--medium___Dy0pr",
+  "avatar__rim--large": "lc-Avatar-module__avatar__rim--large___FPvGp",
+  "avatar__rim--xlarge": "lc-Avatar-module__avatar__rim--xlarge___CY0kN",
+  "avatar__rim--xxlarge": "lc-Avatar-module__avatar__rim--xxlarge___tE053",
+  avatar__image,
+  "avatar__icon--xxxsmall": "lc-Avatar-module__avatar__icon--xxxsmall___KaoMa",
+  "avatar__icon--xxsmall": "lc-Avatar-module__avatar__icon--xxsmall___NJJNV",
+  "avatar__icon--xsmall": "lc-Avatar-module__avatar__icon--xsmall___yHEZK",
+  "avatar__icon--small": "lc-Avatar-module__avatar__icon--small___l6lBu",
+  "avatar__icon--medium": "lc-Avatar-module__avatar__icon--medium___LF4w2",
+  "avatar__icon--large": "lc-Avatar-module__avatar__icon--large___QntBf",
+  "avatar__icon--xlarge": "lc-Avatar-module__avatar__icon--xlarge___bcHbI",
+  "avatar__icon--xxlarge": "lc-Avatar-module__avatar__icon--xxlarge___sx8Fq",
+  "avatar--circle": "lc-Avatar-module__avatar--circle___XwEz-",
+  "avatar--rounded-square": "lc-Avatar-module__avatar--rounded-square___m7-4I",
+  "avatar--with-rim": "lc-Avatar-module__avatar--with-rim___pvFZR",
+  "avatar--xxxsmall": "lc-Avatar-module__avatar--xxxsmall___EHzpP",
+  "avatar--xxsmall": "lc-Avatar-module__avatar--xxsmall___EDOVp",
+  "avatar--xsmall": "lc-Avatar-module__avatar--xsmall___nI348",
+  "avatar--small": "lc-Avatar-module__avatar--small___UuQen",
+  "avatar--medium": "lc-Avatar-module__avatar--medium___Bt9Eo",
+  "avatar--large": "lc-Avatar-module__avatar--large___OU-08",
+  "avatar--xlarge": "lc-Avatar-module__avatar--xlarge___zwgeW",
+  "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
 };
-const Badge = ({
-  children,
+const baseClass$K = "avatar";
+const defaultBackgroundColor = "var(--surface-basic-disabled)";
+const defaultFontColor = "var(--content-subtle)";
+const Avatar = ({
+  alt,
   className,
-  secondary = false
+  color,
+  shape = "circle",
+  size = "medium",
+  src,
+  status,
+  text,
+  type,
+  withRim = false
 }) => {
-  return /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$o.badge, className, {
-      [styles$o["badge--secondary"]]: secondary
+  const isImproperImageSetup = type === "image" && !src;
+  const [shouldDisplayFallbackAvatar, setShouldDisplayFallbackAvatar] = React.useState(isImproperImageSetup);
+  const shouldDisplayImage = type === "image" && !!src && !shouldDisplayFallbackAvatar;
+  const shouldDisplayInitials = type === "text";
+  const letterCount = ["xxxsmall", "xxsmall", "xsmall"].includes(size) ? 1 : 2;
+  const initials = getInitials(text, letterCount);
+  const backgroundColor = color || defaultBackgroundColor;
+  const fontColor = color ? getFontColor(color) : defaultFontColor;
+  const mergedClassNames = cx({
+    [styles$B[baseClass$K]]: true,
+    [styles$B[`${baseClass$K}--${shape}`]]: true,
+    [styles$B[`${baseClass$K}--${size}`]]: true,
+    [styles$B[`${baseClass$K}--with-rim`]]: withRim,
+    [`${className}`]: className
+  });
+  const mergedStatusClassNames = cx(styles$B[`${baseClass$K}__status`], styles$B[`${baseClass$K}__status--${shape}`], styles$B[`${baseClass$K}__status--${size}`], styles$B[`${baseClass$K}__status--${status}`]);
+  const mergedIconClassNames = cx(styles$B[`${baseClass$K}__icon`], styles$B[`${baseClass$K}__icon--${size}`]);
+  const mergedRimClassNames = cx(styles$B[`${baseClass$K}__rim`], styles$B[`${baseClass$K}__rim--${size}`]);
+  const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
+  React.useEffect(() => {
+    setShouldDisplayFallbackAvatar(isImproperImageSetup);
+  }, [isImproperImageSetup]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames,
+    style: { backgroundColor }
+  }, withRim && /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${baseClass$K}__rim`,
+    className: mergedRimClassNames
+  }), status && /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${baseClass$K}__status`,
+    className: mergedStatusClassNames
+  }), shouldDisplayImage && /* @__PURE__ */ React.createElement("img", {
+    className: styles$B[`${baseClass$K}__image`],
+    src,
+    alt,
+    onError: handleError
+  }), shouldDisplayInitials && /* @__PURE__ */ React.createElement("span", {
+    style: { color: fontColor }
+  }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
+    "data-testid": `${baseClass$K}__icon`,
+    className: mergedIconClassNames,
+    source: Person,
+    kind: "primary"
+  }));
+};
+const badge = "lc-Badge-module__badge___GhLnu";
+const badge__dot = "lc-Badge-module__badge__dot___z6RO6";
+var styles$A = {
+  badge,
+  badge__dot,
+  "badge--large": "lc-Badge-module__badge--large___B131q",
+  "badge--medium": "lc-Badge-module__badge--medium___TDU8a",
+  "badge--compact": "lc-Badge-module__badge--compact___9xJ4y",
+  "badge--primary": "lc-Badge-module__badge--primary___8LRpp",
+  "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ",
+  "badge--tertiary": "lc-Badge-module__badge--tertiary___e83wV"
+};
+function formatCount(count, max) {
+  return count > max ? `${max}+` : `${count}`;
+}
+const baseClass$J = "badge";
+const Badge = (_g) => {
+  var _h = _g, {
+    className,
+    count = 0,
+    max = 99,
+    kind = "primary",
+    size = "medium",
+    type = "counter"
+  } = _h, spanProps = __objRest(_h, [
+    "className",
+    "count",
+    "max",
+    "kind",
+    "size",
+    "type"
+  ]);
+  const mergedClassNames = cx(className, styles$A[baseClass$J], styles$A[`${baseClass$J}--${kind}`], styles$A[`${baseClass$J}--${size}`]);
+  const content = {
+    ["counter"]: formatCount(count, max),
+    ["alert"]: "!",
+    ["dot"]: /* @__PURE__ */ React.createElement("span", {
+      className: styles$A[`${baseClass$J}__dot`]
     })
-  }, children);
+  }[type];
+  return /* @__PURE__ */ React.createElement("span", __spreadValues({
+    className: mergedClassNames
+  }, spanProps), content);
 };
 const loader = "lc-Loader-module__loader___LRflD";
 const loader__spinner = "lc-Loader-module__loader__spinner___l3C1g";
 const rotate = "lc-Loader-module__rotate___Tlni-";
 const loader__label = "lc-Loader-module__loader__label___R74f6";
-var styles$n = {
+var styles$z = {
   loader,
   loader__spinner,
   "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
@@ -453,8 +686,8 @@ var styles$n = {
   rotate,
   loader__label
 };
-const baseClass$r = "loader";
-const spinnerClass = `${baseClass$r}__spinner`;
+const baseClass$I = "loader";
+const spinnerClass = `${baseClass$I}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -463,11 +696,11 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$n[baseClass$r], className)
+    className: cx(styles$z[baseClass$I], className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$n[spinnerClass], styles$n[`${spinnerClass}--${size}`])
+    className: cx(styles$z[spinnerClass], styles$z[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$n["loader__spinner-circle"],
+    className: styles$z["loader__spinner-circle"],
     style: {
       borderColor: secondaryColor,
       borderTopColor: primaryColor
@@ -475,14 +708,14 @@ const Loader = ({
   })), label && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$n["loader__label"]
+    className: styles$z["loader__label"]
   }, label));
 };
 const btn$1 = "lc-Button-module__btn___aijZJ";
 const btn__loader = "lc-Button-module__btn__loader___c8zZz";
 const btn__content = "lc-Button-module__btn__content___wefl2";
 const btn__icon = "lc-Button-module__btn__icon___GVExB";
-var styles$m = {
+var styles$y = {
   btn: btn$1,
   "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
   "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
@@ -503,9 +736,9 @@ var styles$m = {
   btn__content,
   btn__icon
 };
-const baseClass$q = "btn";
-const Button = (_e) => {
-  var _f = _e, {
+const baseClass$H = "btn";
+const Button = (_i) => {
+  var _j = _i, {
     loading = false,
     disabled = false,
     type = "button",
@@ -517,8 +750,9 @@ const Button = (_e) => {
     loaderLabel,
     className,
     children,
-    href
-  } = _f, props = __objRest(_f, [
+    href,
+    onClick
+  } = _j, props = __objRest(_j, [
     "loading",
     "disabled",
     "type",
@@ -530,125 +764,212 @@ const Button = (_e) => {
     "loaderLabel",
     "className",
     "children",
-    "href"
+    "href",
+    "onClick"
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$m[baseClass$q], styles$m[`${baseClass$q}--${kind}`], styles$m[`${baseClass$q}--${size}`], {
-    [styles$m[`${baseClass$q}--loading`]]: loading,
-    [styles$m[`${baseClass$q}--full-width`]]: fullWidth,
-    [styles$m[`${baseClass$q}--icon-only`]]: !children && icon2,
-    [styles$m[`${baseClass$q}--disabled`]]: isDisabled
+  const mergedClassNames = cx(className, styles$y[baseClass$H], styles$y[`${baseClass$H}--${kind}`], styles$y[`${baseClass$H}--${size}`], {
+    [styles$y[`${baseClass$H}--loading`]]: loading,
+    [styles$y[`${baseClass$H}--full-width`]]: fullWidth,
+    [styles$y[`${baseClass$H}--icon-only`]]: !children && icon2,
+    [styles$y[`${baseClass$H}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
-    disabled: isDisabled,
+    "aria-disabled": isDisabled,
     type,
-    href: isDisabled ? void 0 : href
+    href: isDisabled ? void 0 : href,
+    onClick: isDisabled ? void 0 : onClick
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$m[`${baseClass$q}__loader`]
+    className: styles$y[`${baseClass$H}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$m[`${baseClass$q}__icon`], styles$m[`${baseClass$q}__icon--${iconPosition}`]),
+    className: cx(styles$y[`${baseClass$H}__icon`], styles$y[`${baseClass$H}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$m[`${baseClass$q}__content`]
+    className: styles$y[`${baseClass$H}__content`]
   }, children));
 };
-const btn = "lc-ButtonGroup-module__btn___bXPrU";
-var styles$l = {
-  "btn-group": "lc-ButtonGroup-module__btn-group___R-lZQ",
+const btn = "lc-SegmentedControl-module__btn___tfsvL";
+var styles$x = {
+  "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$p = "btn-group";
-const ButtonGroup = (_g) => {
-  var _h = _g, {
-    size = "medium",
-    fullWidth = false,
-    onIndexChange = noop,
-    className,
-    children,
-    currentIndex,
-    initialIndex = -1
-  } = _h, restProps = __objRest(_h, [
-    "size",
-    "fullWidth",
-    "onIndexChange",
-    "className",
-    "children",
-    "currentIndex",
-    "initialIndex"
-  ]);
-  const mergedClassName = cx(styles$l[baseClass$p], className);
-  const [currentStateIndex, setCurrentStateIndex] = React.useState(initialIndex);
-  const isControlled = typeof currentIndex === "number";
-  const _currentIndex = isControlled ? currentIndex : currentStateIndex;
-  const handleClick = (index2, event) => {
+const baseClass$G = "segmented-control";
+const SegmentedControl = ({
+  size = "medium",
+  buttons,
+  className,
+  initialId,
+  currentId,
+  fullWidth = false,
+  onButtonClick = noop
+}) => {
+  const mergedClassName = cx(styles$x[baseClass$G], 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, icon: icon2 }) => {
+    const isPressed = id === currentStateId;
+    const activityStyles = isPressed ? styles$x["btn--active"] : "";
+    const loadingStatus = isPressed ? false : loading;
+    return /* @__PURE__ */ React.createElement(Button, {
+      key: id,
+      fullWidth,
+      loading: loadingStatus,
+      disabled,
+      "aria-pressed": isPressed,
+      kind: "secondary",
+      icon: icon2,
+      className: cx(styles$x["btn"], styles$x[`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$l["btn"], styles$l[`btn--${size}`], i === _currentIndex && styles$l["btn--active"])
-  })));
+  }, buttonSet);
 };
 const card = "lc-Card-module__card___GqMm2";
-const card__title = "lc-Card-module__card__title___1YjAR";
-const card__text = "lc-Card-module__card__text___-jYlF";
-const card__img = "lc-Card-module__card__img___teLC8";
-var styles$k = {
+const card__header = "lc-Card-module__card__header___0ptfD";
+const card__header__image = "lc-Card-module__card__header__image___QMwSu";
+const card__header__heading = "lc-Card-module__card__header__heading___Wkikx";
+const card__header__heading__title = "lc-Card-module__card__header__heading__title___Uxi8s";
+const card__header__heading__description = "lc-Card-module__card__header__heading__description___6LnOK";
+const card__content = "lc-Card-module__card__content___KuDcc";
+const card__actions = "lc-Card-module__card__actions___q9sAo";
+const card__actions__line = "lc-Card-module__card__actions__line___TF1bt";
+const card__actions__buttons = "lc-Card-module__card__actions__buttons___PDMMR";
+var styles$w = {
   card,
-  card__title,
-  card__text,
-  card__img
+  card__header,
+  card__header__image,
+  card__header__heading,
+  card__header__heading__title,
+  card__header__heading__description,
+  "card__header__no-image": "lc-Card-module__card__header__no-image___UcnNY",
+  card__content,
+  "card__expanded-content": "lc-Card-module__card__expanded-content___yB-QL",
+  card__actions,
+  card__actions__line,
+  card__actions__buttons,
+  "card__actions__buttons-expander": "lc-Card-module__card__actions__buttons-expander___lz4h-"
 };
-const Card = (_i) => {
-  var _j = _i, {
-    img,
-    title,
+const baseClass$F = "card";
+const headerClass = `${baseClass$F}__header`;
+const headingClass = `${headerClass}__heading`;
+const actionsClass = `${baseClass$F}__actions`;
+const noImageClass = `${headerClass}__no-image`;
+const Card = (_k) => {
+  var _l = _k, {
+    alt,
+    buttonsOptions = [],
     children,
-    className
-  } = _j, restProps = __objRest(_j, [
-    "img",
-    "title",
+    className,
+    description,
+    expandableContent,
+    src,
+    title
+  } = _l, divProps = __objRest(_l, [
+    "alt",
+    "buttonsOptions",
     "children",
-    "className"
+    "className",
+    "description",
+    "expandableContent",
+    "src",
+    "title"
   ]);
-  return /* @__PURE__ */ React.createElement(Text, __spreadValues({
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const expandIcon = isExpanded ? ChevronUp : ChevronDown;
+  const expandButtonText = isExpanded ? "Hide" : "Show more";
+  const shouldShowActionButtons = (buttonsOptions == null ? void 0 : buttonsOptions.length) > 0;
+  const shouldShowExpandAction = !!expandableContent;
+  const shouldShowActions = shouldShowActionButtons || shouldShowExpandAction;
+  const isTitleAvailable = title;
+  const isImageAvailable = src;
+  const noImageAvailable = isImageAvailable ? "" : styles$w[noImageClass];
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
+    className: cx(styles$w[baseClass$F], className)
+  }, divProps), isTitleAvailable && /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$w[headerClass], noImageAvailable)
+  }, isImageAvailable && /* @__PURE__ */ React.createElement("img", {
+    alt,
+    className: styles$w[`${headerClass}__image`],
+    src
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$w[headingClass]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    size: "sm",
+    className: styles$w[`${headingClass}__title`]
+  }, title), /* @__PURE__ */ React.createElement(Text, {
+    size: "sm",
+    className: styles$w[`${headingClass}__description`]
+  }, description))), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: cx(styles$k["card"], className)
-  }, restProps), (img || title) && /* @__PURE__ */ React.createElement(Heading, {
+    className: styles$w[`${baseClass$F}__content`]
+  }, children), isExpanded && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    size: "sm",
-    className: styles$k["card__title"]
-  }, img && /* @__PURE__ */ React.createElement("img", {
-    src: img,
-    className: styles$k["card__img"]
-  }), title && /* @__PURE__ */ React.createElement("div", {
-    className: styles$k["card__text"]
-  }, title)), children);
+    size: "md",
+    className: styles$w[`${baseClass$F}__expanded-content`]
+  }, expandableContent), shouldShowActions && /* @__PURE__ */ React.createElement("div", {
+    className: styles$w[actionsClass]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$w[`${actionsClass}__line`]
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$w[`${actionsClass}__buttons`]
+  }, shouldShowActionButtons && buttonsOptions.map(({ kind, onClick, children: buttonChildren }) => /* @__PURE__ */ React.createElement(Button, {
+    size: "compact",
+    kind,
+    onClick
+  }, buttonChildren)), shouldShowExpandAction && /* @__PURE__ */ React.createElement(Button, {
+    className: styles$w[`${actionsClass}__buttons-expander`],
+    kind: "plain",
+    iconPosition: "right",
+    icon: /* @__PURE__ */ React.createElement(Icon, {
+      source: expandIcon
+    }),
+    onClick: () => setIsExpanded(!isExpanded)
+  }, expandButtonText))));
+};
+var styles$v = {
+  "field-description": "lc-FieldDescription-module__field-description___IcRDH"
+};
+const baseClass$E = "field-description";
+const FieldDescription = (_m) => {
+  var _n = _m, {
+    children,
+    className = ""
+  } = _n, props = __objRest(_n, [
+    "children",
+    "className"
+  ]);
+  const mergedClassNames = cx(styles$v[baseClass$E], className);
+  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
+    as: "span",
+    size: "sm"
+  }, props), {
+    className: mergedClassNames
+  }), children);
 };
 const checkbox = "lc-Checkbox-module__checkbox___G7nTf";
 const checkbox__label = "lc-Checkbox-module__checkbox__label___-o01x";
@@ -657,7 +978,7 @@ const checkbox__checkmark = "lc-Checkbox-module__checkbox__checkmark___16pfY";
 const checkbox__input = "lc-Checkbox-module__checkbox__input___YLbVF";
 const checkbox__text = "lc-Checkbox-module__checkbox__text___P2SIq";
 const checkbox__helper = "lc-Checkbox-module__checkbox__helper___YSJ-n";
-var styles$j = {
+var styles$u = {
   checkbox,
   checkbox__label,
   checkbox__square,
@@ -668,39 +989,612 @@ var styles$j = {
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
-const baseClass$o = "checkbox";
-const Checkbox = (_k) => {
-  var _l = _k, {
-    className = ""
-  } = _l, props = __objRest(_l, [
-    "className"
-  ]);
-  const mergedClassNames = cx(styles$j[`${baseClass$o}__square`], className);
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
-    className: styles$j[`${baseClass$o}__input`],
+const baseClass$D = "checkbox";
+const Checkbox = React.forwardRef((_o, ref) => {
+  var _p = _o, { checked, disabled, children, description, className } = _p, restInputProps = __objRest(_p, ["checked", "disabled", "children", "description", "className"]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$u[baseClass$D], className, {
+      [styles$u[`${baseClass$D}--selected`]]: checked,
+      [styles$u[`${baseClass$D}--disabled`]]: disabled
+    })
+  }, /* @__PURE__ */ React.createElement("label", {
+    className: styles$u[`${baseClass$D}__label`]
+  }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
+    ref,
+    checked,
+    disabled,
+    className: styles$u[`${baseClass$D}__input`],
     type: "checkbox"
   })), /* @__PURE__ */ React.createElement("div", {
-    className: mergedClassNames
+    className: styles$u[`${baseClass$D}__square`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Check,
-    iconType: IconTypeName.Inverted,
-    size: IconSizeName.XSmall,
-    className: styles$j[`${baseClass$o}__checkmark`]
-  })));
+    kind: "inverted",
+    size: "xsmall",
+    className: styles$u[`${baseClass$D}__checkmark`]
+  }))), children && /* @__PURE__ */ React.createElement(Text, {
+    as: "div",
+    size: "md",
+    className: styles$u[`${baseClass$D}__text`]
+  }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
+    className: styles$u[`${baseClass$D}__helper`]
+  }, description));
+});
+var styles$t = {
+  "date-picker": "lc-DatePicker-module__date-picker___9AqJ2",
+  "date-picker--interaction-disabled": "lc-DatePicker-module__date-picker--interaction-disabled___-zn8o",
+  "date-picker__day": "lc-DatePicker-module__date-picker__day___ZTSw9",
+  "date-picker__day--disabled": "lc-DatePicker-module__date-picker__day--disabled___4O6yW",
+  "date-picker__day--selected": "lc-DatePicker-module__date-picker__day--selected___1D1tC",
+  "date-picker__day--outside": "lc-DatePicker-module__date-picker__day--outside___ptNdC",
+  "date-picker__day-content": "lc-DatePicker-module__date-picker__day-content___rDIa0",
+  "date-picker__wrapper": "lc-DatePicker-module__date-picker__wrapper___tNp4l",
+  "date-picker__months": "lc-DatePicker-module__date-picker__months___QuPb0",
+  "date-picker__month": "lc-DatePicker-module__date-picker__month___239nh",
+  "date-picker__nav-bar": "lc-DatePicker-module__date-picker__nav-bar___u-l17",
+  "date-picker__nav-button": "lc-DatePicker-module__date-picker__nav-button___1Ysdp",
+  "date-picker__nav-button--interaction-disabled": "lc-DatePicker-module__date-picker__nav-button--interaction-disabled___Ivjrx",
+  "date-picker__caption": "lc-DatePicker-module__date-picker__caption___XPgZJ",
+  "date-picker__weekdays": "lc-DatePicker-module__date-picker__weekdays___kpTY9",
+  "date-picker__weekdays-row": "lc-DatePicker-module__date-picker__weekdays-row___tGgay",
+  "date-picker__weekday": "lc-DatePicker-module__date-picker__weekday___3FCx8",
+  "date-picker__body": "lc-DatePicker-module__date-picker__body___toP1u",
+  "date-picker__week": "lc-DatePicker-module__date-picker__week___nZI1x",
+  "date-picker__day-wrapper": "lc-DatePicker-module__date-picker__day-wrapper___gGeeJ",
+  "date-picker__day--today": "lc-DatePicker-module__date-picker__day--today___LL51c",
+  "date-picker__footer": "lc-DatePicker-module__date-picker__footer___cXMQ5",
+  "date-picker__input": "lc-DatePicker-module__date-picker__input___r6qih",
+  "date-picker__input-overlay-wrapper": "lc-DatePicker-module__date-picker__input-overlay-wrapper___vmC0M",
+  "date-picker__input-overlay": "lc-DatePicker-module__date-picker__input-overlay___eJ9D0",
+  "date-picker--range": "lc-DatePicker-module__date-picker--range___ZU-7k",
+  "date-picker__day--start": "lc-DatePicker-module__date-picker__day--start___-oB8U",
+  "date-picker__day--end": "lc-DatePicker-module__date-picker__day--end___TtN5P",
+  "date-picker__day--single": "lc-DatePicker-module__date-picker__day--single___biWcB",
+  "date-picker__day--sunday": "lc-DatePicker-module__date-picker__day--sunday___JEnhV",
+  "date-picker__day--monday": "lc-DatePicker-module__date-picker__day--monday___NXYIr",
+  "date-picker--range__select-input": "lc-DatePicker-module__date-picker--range__select-input___6pyj3",
+  "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"
 };
-var styles$i = {
-  "field-description": "lc-FieldDescription-module__field-description___IcRDH"
+const baseClass$C = "date-picker";
+const DatePickerNavbar = (props) => {
+  const {
+    onPreviousClick,
+    onMonthChange,
+    onNextClick,
+    showNextButton,
+    showPreviousButton,
+    className,
+    classNames,
+    numberOfMonths,
+    month,
+    fromMonth,
+    toMonth
+  } = props;
+  const handlePrevClick = () => {
+    if (typeof onPreviousClick === "function") {
+      onPreviousClick();
+    }
+  };
+  const handleNextClick = () => {
+    if (typeof onNextClick === "function") {
+      onNextClick();
+    }
+  };
+  const handlePrevYearClick = () => {
+    if (!fromMonth) {
+      const newMonth2 = subMonths(month, 12);
+      return onMonthChange(newMonth2);
+    }
+    const diff = Math.abs(differenceInCalendarMonths(month, fromMonth));
+    const newMonth = subMonths(month, !Number.isNaN(diff) && diff > 12 ? 12 : diff);
+    return onMonthChange(newMonth);
+  };
+  const handleNextYearClick = () => {
+    if (!toMonth) {
+      const newMonth2 = addMonths(month, 12);
+      return onMonthChange(newMonth2);
+    }
+    const diff = Math.abs(differenceInCalendarMonths(toMonth, month));
+    const newMonth = addMonths(month, !Number.isNaN(diff) && diff > 12 ? 12 : diff);
+    if (numberOfMonths === 2 && isSameMonth(newMonth, toMonth)) {
+      return onMonthChange(subMonths(newMonth, 1));
+    }
+    return onMonthChange(newMonth);
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$t[`${baseClass$C}__navbar-buttons-wrapper`]
+  }, /* @__PURE__ */ React.createElement("button", {
+    "data-testid": "date-picker-prev-year-button",
+    className: cx({
+      [classNames.navButtonPrev]: true,
+      [classNames.navButtonInteractionDisabled]: !showPreviousButton
+    }),
+    onClick: handlePrevYearClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: DoubleArrowLeft,
+    kind: "subtle"
+  })), /* @__PURE__ */ React.createElement("button", {
+    "data-testid": "date-picker-prev-month-button",
+    className: cx({
+      [classNames.navButtonPrev]: true,
+      [classNames.navButtonInteractionDisabled]: !showPreviousButton
+    }),
+    onClick: handlePrevClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: ChevronLeft,
+    kind: "subtle"
+  }))), /* @__PURE__ */ React.createElement("div", {
+    className: styles$t[`${baseClass$C}__navbar-buttons-wrapper`]
+  }, /* @__PURE__ */ React.createElement("button", {
+    "data-testid": "date-picker-next-month-button",
+    className: cx({
+      [classNames.navButtonNext]: true,
+      [classNames.navButtonInteractionDisabled]: !showNextButton
+    }),
+    onClick: handleNextClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: ChevronRight,
+    kind: "subtle"
+  })), /* @__PURE__ */ React.createElement("button", {
+    "data-testid": "date-picker-next-year-button",
+    className: cx({
+      [classNames.navButtonNext]: true,
+      [classNames.navButtonInteractionDisabled]: !showNextButton
+    }),
+    onClick: handleNextYearClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: DoubleArrowRight,
+    kind: "subtle"
+  }))));
 };
-const baseClass$n = "field-description";
-const FieldDescription = (_m) => {
-  var _n = _m, {
+const baseClass$B = "date-picker";
+const isDateWithinRange = (date, range) => {
+  const { from, to } = range;
+  if (to && !isSameDay(date, to) && isAfter(date, to)) {
+    return false;
+  }
+  if (from && !isSameDay(date, from) && !isAfter(date, from)) {
+    return false;
+  }
+  return true;
+};
+const calculateDatePickerMonth = (initialFromDate, initialToDate, toMonth) => {
+  if (!initialToDate) {
+    return subMonths(toMonth || new Date(), 1);
+  }
+  const forcePreviousMonth = initialFromDate && !isSameMonth(initialFromDate, initialToDate);
+  if (forcePreviousMonth || toMonth && isSameMonth(initialToDate, toMonth)) {
+    return subMonths(initialToDate, 1);
+  }
+  return initialToDate;
+};
+const getRangeDatePickerModifiers = (from, to) => {
+  const base = {
+    [styles$t[`${baseClass$B}__day--monday`]]: { daysOfWeek: [1] },
+    [styles$t[`${baseClass$B}__day--sunday`]]: { daysOfWeek: [0] },
+    [styles$t[`${baseClass$B}__day--start`]]: from,
+    [styles$t[`${baseClass$B}__day--end`]]: from
+  };
+  if (!to || !from)
+    return base;
+  const diff = differenceInCalendarDays(to, from);
+  if (diff > 0) {
+    return __spreadProps(__spreadValues({}, base), {
+      [styles$t[`${baseClass$B}__day--end`]]: to
+    });
+  }
+  if (diff < 0) {
+    return __spreadProps(__spreadValues({}, base), {
+      [styles$t[`${baseClass$B}__day--start`]]: to
+    });
+  }
+  return base;
+};
+const getSelectedOption = (itemId, options) => {
+  const selectedOption = options.find((item) => {
+    return item.id === itemId;
+  });
+  return selectedOption ? selectedOption : void 0;
+};
+const isSelectingFirstDay = (from, to) => {
+  const isRangeSelected = from && to;
+  return Boolean(!from || isRangeSelected);
+};
+const getInitialStateFromProps = (props) => {
+  const state = {};
+  if (!props.initialSelectedItemKey) {
+    return state;
+  }
+  const selectedOption = getSelectedOption(props.initialSelectedItemKey, props.options);
+  if (!selectedOption) {
+    return {};
+  }
+  state.selectedItem = props.initialSelectedItemKey;
+  if (!selectedOption.isManual) {
+    return state;
+  }
+  if (props.initialFromDate) {
+    state.from = props.initialFromDate;
+  }
+  if (props.initialToDate) {
+    state.to = props.initialToDate;
+    state.temporaryTo = props.initialToDate;
+  }
+  return state;
+};
+const getDatePickerClassNames = (range, classNames) => __spreadValues({
+  container: cx({
+    [styles$t[`${baseClass$B}`]]: true,
+    [styles$t[`${baseClass$B}--range`]]: range
+  }),
+  wrapper: styles$t[`${baseClass$B}__wrapper`],
+  interactionDisabled: styles$t[`${baseClass$B}--interaction-disabled`],
+  months: styles$t[`${baseClass$B}__months`],
+  month: styles$t[`${baseClass$B}__month`],
+  navBar: styles$t[`${baseClass$B}__nav-bar`],
+  navButtonPrev: cx(styles$t[`${baseClass$B}__nav-button`], styles$t[`${baseClass$B}__nav-button--prev`]),
+  navButtonNext: cx(styles$t[`${baseClass$B}__nav-button`], styles$t[`${baseClass$B}__nav-button--next`]),
+  navButtonInteractionDisabled: styles$t[`${baseClass$B}__nav-button--interaction-disabled`],
+  caption: styles$t[`${baseClass$B}__caption`],
+  weekdays: styles$t[`${baseClass$B}__weekdays`],
+  weekdaysRow: styles$t[`${baseClass$B}__weekdays-row`],
+  weekday: styles$t[`${baseClass$B}__weekday`],
+  body: styles$t[`${baseClass$B}__body`],
+  week: styles$t[`${baseClass$B}__week`],
+  weekNumber: styles$t[`${baseClass$B}__week-number`],
+  day: styles$t[`${baseClass$B}__day`],
+  footer: styles$t[`${baseClass$B}__footer`],
+  todayButton: styles$t[`${baseClass$B}__today-button`],
+  today: styles$t[`${baseClass$B}__day--today`],
+  selected: styles$t[`${baseClass$B}__day--selected`],
+  disabled: styles$t[`${baseClass$B}__day--disabled`],
+  outside: styles$t[`${baseClass$B}__day--outside`],
+  start: styles$t[`${baseClass$B}__day--start`],
+  end: styles$t[`${baseClass$B}__day--end`]
+}, classNames);
+const baseClass$A = "date-picker";
+const defaultDayRenderer = (day) => {
+  const date = day.getDate();
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles$t[`${baseClass$A}__day-wrapper`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$t[`${baseClass$A}__day-content`]
+  }, date));
+};
+const DatePickerComponent = (props) => {
+  const _a = props, {
+    classNames,
+    range,
+    toMonth,
+    month,
+    fromMonth,
+    firstDayOfWeek: propsFirstDayOfWeek,
+    numberOfMonths,
+    navbarElement,
+    renderDay,
+    innerRef
+  } = _a, restProps = __objRest(_a, [
+    "classNames",
+    "range",
+    "toMonth",
+    "month",
+    "fromMonth",
+    "firstDayOfWeek",
+    "numberOfMonths",
+    "navbarElement",
+    "renderDay",
+    "innerRef"
+  ]);
+  const [currentMonth, setCurrentMonth] = React.useState(month || new Date());
+  React.useEffect(() => {
+    if (month && month !== currentMonth) {
+      setCurrentMonth(month);
+    }
+  }, [month, currentMonth]);
+  React.useEffect(() => {
+    if (toMonth) {
+      if (!isDateWithinRange(currentMonth, { from: fromMonth, to: toMonth })) {
+        setCurrentMonth(toMonth);
+      }
+    }
+  }, [currentMonth, props.toMonth, props.fromMonth]);
+  const handleMonthChange = React.useCallback((month2) => {
+    if (props.onMonthChange && month2) {
+      props.onMonthChange(month2);
+      return;
+    }
+    setCurrentMonth(month2);
+  }, [month, props.onMonthChange]);
+  let firstDayOfWeek = 1;
+  if (propsFirstDayOfWeek === 0 || propsFirstDayOfWeek && propsFirstDayOfWeek < 7) {
+    firstDayOfWeek = propsFirstDayOfWeek;
+  }
+  const datePickerClassNames = React.useMemo(() => getDatePickerClassNames(range, classNames), [range, classNames]);
+  return /* @__PURE__ */ React.createElement(ReactDayPicker, __spreadValues({
+    navbarElement: navbarElement || /* @__PURE__ */ React.createElement(DatePickerNavbar, {
+      month: currentMonth,
+      classNames: datePickerClassNames,
+      numberOfMonths,
+      onMonthChange: handleMonthChange,
+      toMonth,
+      fromMonth
+    }),
+    ref: innerRef,
+    classNames: datePickerClassNames,
+    numberOfMonths,
+    toMonth,
+    fromMonth,
+    firstDayOfWeek,
+    month: currentMonth,
+    renderDay: renderDay || defaultDayRenderer
+  }, restProps));
+};
+const DatePicker = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(DatePickerComponent, __spreadValues({
+  innerRef: ref
+}, props)));
+DatePicker.displayName = "DatePicker";
+var RangeDatePickerAction = /* @__PURE__ */ ((RangeDatePickerAction2) => {
+  RangeDatePickerAction2["NEW_SELECTED_ITEM"] = "NEW_SELECTED_ITEM";
+  RangeDatePickerAction2["NEW_TEMPORARY_TO_VALUE"] = "NEW_TEMPORARY_TO_VALUE";
+  RangeDatePickerAction2["CLEAR"] = "CLEAR";
+  RangeDatePickerAction2["SET_FROM"] = "SET_FROM";
+  RangeDatePickerAction2["SET_TO"] = "SET_TO";
+  RangeDatePickerAction2["SELECT_FIRST_DAY"] = "SELECT_FIRST_DAY";
+  RangeDatePickerAction2["SELECT_SECOND_DAY_AS_FROM"] = "SELECT_SECOND_DAY_AS_FROM";
+  RangeDatePickerAction2["SELECT_SECOND_DAY_AS_TO"] = "SELECT_SECOND_DAY_AS_TO";
+  RangeDatePickerAction2["CURRENT_MONTH_CHANGE"] = "CURRENT_MONTH_CHANGE";
+  return RangeDatePickerAction2;
+})(RangeDatePickerAction || {});
+const useRangeDatePickerState = (props) => {
+  const initialCurrentMonth = calculateDatePickerMonth(props.initialFromDate, props.initialToDate, props.toMonth);
+  const defaultInitialState = {
+    selectedItem: null,
+    from: void 0,
+    to: void 0,
+    temporaryTo: void 0,
+    currentMonth: initialCurrentMonth
+  };
+  const initialState = __spreadValues(__spreadValues({}, defaultInitialState), getInitialStateFromProps(props));
+  function reducer(state, action) {
+    switch (action.type) {
+      case RangeDatePickerAction.NEW_SELECTED_ITEM:
+        return {
+          selectedItem: action.payload.selectedItem,
+          from: void 0,
+          to: void 0,
+          temporaryTo: void 0,
+          currentMonth: initialCurrentMonth
+        };
+      case RangeDatePickerAction.NEW_TEMPORARY_TO_VALUE:
+        return __spreadProps(__spreadValues({}, state), {
+          temporaryTo: action.payload.date
+        });
+      case RangeDatePickerAction.SELECT_FIRST_DAY:
+        return __spreadProps(__spreadValues({}, state), {
+          from: action.payload.date,
+          to: void 0,
+          temporaryTo: void 0
+        });
+      case RangeDatePickerAction.SELECT_SECOND_DAY_AS_FROM:
+        return __spreadProps(__spreadValues({}, state), {
+          from: action.payload.date,
+          to: state.from,
+          temporaryTo: state.from
+        });
+      case RangeDatePickerAction.SELECT_SECOND_DAY_AS_TO:
+        return __spreadProps(__spreadValues({}, state), {
+          to: action.payload.date,
+          temporaryTo: action.payload.date
+        });
+      case RangeDatePickerAction.CURRENT_MONTH_CHANGE:
+        return __spreadProps(__spreadValues({}, state), {
+          currentMonth: action.payload.date
+        });
+      case RangeDatePickerAction.SET_FROM:
+        return __spreadProps(__spreadValues({}, state), {
+          from: action.payload.date
+        });
+      case RangeDatePickerAction.SET_TO:
+        return __spreadProps(__spreadValues({}, state), {
+          to: action.payload.date
+        });
+      default:
+        return state;
+    }
+  }
+  return useReducer(reducer, initialState);
+};
+const RangeDatePicker = ({
+  options,
+  initialSelectedItemKey,
+  initialFromDate,
+  initialToDate,
+  toMonth,
+  onChange,
+  children
+}) => {
+  const prevSelectedItem = useRef(initialSelectedItemKey || null);
+  const [state, dispatch] = useRangeDatePickerState({
+    options,
+    initialSelectedItemKey,
+    initialFromDate,
+    initialToDate,
+    toMonth,
+    onChange,
+    children
+  });
+  useEffect(() => {
+    dispatch({
+      type: RangeDatePickerAction.SET_FROM,
+      payload: { date: initialFromDate }
+    });
+  }, [initialFromDate]);
+  useEffect(() => {
+    dispatch({
+      type: RangeDatePickerAction.SET_TO,
+      payload: { date: initialToDate }
+    });
+  }, [initialToDate]);
+  useEffect(() => {
+    const currentMonth = calculateDatePickerMonth(initialFromDate, initialToDate, toMonth);
+    dispatch({
+      type: RangeDatePickerAction.CURRENT_MONTH_CHANGE,
+      payload: { date: currentMonth }
+    });
+  }, [toMonth, initialFromDate, initialToDate]);
+  useEffect(() => {
+    const { from, selectedItem, to } = state;
+    if (!(from && to)) {
+      return;
+    }
+    const selectedOption = getSelectedOption(selectedItem, options);
+    if (!selectedOption)
+      return;
+    onChange && onChange(__spreadProps(__spreadValues({}, selectedOption), {
+      value: {
+        from,
+        to
+      }
+    }));
+  }, [state.from, state.to, state.selectedItem, options, onChange]);
+  useEffect(() => {
+    const { selectedItem } = state;
+    if (selectedItem === prevSelectedItem.current) {
+      return;
+    }
+    if (!selectedItem) {
+      onChange(null);
+      return;
+    }
+    const selectedOption = getSelectedOption(selectedItem, options);
+    if (!selectedOption) {
+      return;
+    }
+    const optionsHash = options.reduce((acc, option) => __spreadProps(__spreadValues({}, acc), { [option.id]: option }), {});
+    onChange(optionsHash[selectedItem]);
+  }, [onChange, state.selectedItem, options]);
+  const handleDayMouseEnter = useCallback((day) => {
+    const isInRange = toMonth ? differenceInCalendarDays(toMonth, day) >= 0 : true;
+    if (!isSelectingFirstDay(state.from, state.to) && isInRange) {
+      dispatch({
+        type: RangeDatePickerAction.NEW_TEMPORARY_TO_VALUE,
+        payload: { date: day }
+      });
+    }
+  }, [toMonth, state.from, state.to]);
+  const handleDayClick = useCallback((day) => {
+    const { from, to } = state;
+    if (!isDateWithinRange(day, { to: toMonth })) {
+      return;
+    }
+    if (isSelectingFirstDay(from, to)) {
+      dispatch({
+        type: RangeDatePickerAction.SELECT_FIRST_DAY,
+        payload: { date: day }
+      });
+    } else if (from && isSameDay(day, from) || from && isAfter(day, from)) {
+      dispatch({
+        type: RangeDatePickerAction.SELECT_SECOND_DAY_AS_TO,
+        payload: { date: day }
+      });
+    } else {
+      dispatch({
+        type: RangeDatePickerAction.SELECT_SECOND_DAY_AS_FROM,
+        payload: { date: day }
+      });
+    }
+  }, [toMonth, state.from, state.to]);
+  const handleItemSelect = useCallback((itemKey) => {
+    if (itemKey === null) {
+      dispatch({
+        type: RangeDatePickerAction.NEW_SELECTED_ITEM,
+        payload: { selectedItem: null }
+      });
+      return;
+    }
+    const selectedOption = getSelectedOption(itemKey, options);
+    if (!selectedOption) {
+      return;
+    }
+    dispatch({
+      type: RangeDatePickerAction.NEW_SELECTED_ITEM,
+      payload: { selectedItem: itemKey }
+    });
+  }, [options]);
+  const handleMonthChange = useCallback((date) => {
+    dispatch({
+      type: RangeDatePickerAction.CURRENT_MONTH_CHANGE,
+      payload: { date }
+    });
+  }, []);
+  const getRangeDatePickerApi = () => {
+    const { currentMonth, from, selectedItem, temporaryTo, to } = state;
+    const modifiers = useMemo(() => getRangeDatePickerModifiers(from, temporaryTo), [from, temporaryTo]);
+    const selectedOption = useMemo(() => {
+      return getSelectedOption(selectedItem, options);
+    }, [options, selectedItem]);
+    const selectedDays = useMemo(() => {
+      return [from, { from, to: temporaryTo }];
+    }, [from, temporaryTo]);
+    const disabledDays = useMemo(() => {
+      return toMonth ? { after: toMonth } : void 0;
+    }, [toMonth]);
+    return {
+      select: {
+        onItemSelect: handleItemSelect,
+        selected: selectedItem || ""
+      },
+      inputs: {
+        fromDate: from,
+        toDate: to
+      },
+      datepicker: {
+        range: true,
+        month: currentMonth,
+        numberOfMonths: 2,
+        onDayClick: handleDayClick,
+        selectedDays,
+        modifiers,
+        initialMonth: toMonth && subMonths(toMonth, 1),
+        toMonth,
+        disabledDays,
+        onDayMouseEnter: handleDayMouseEnter,
+        onMonthChange: handleMonthChange
+      },
+      selectedOption
+    };
+  };
+  return children(getRangeDatePickerApi());
+};
+RangeDatePicker.defaultProps = {
+  options: [
+    {
+      id: "default",
+      label: "Default option",
+      isManual: true,
+      value: {
+        from: void 0,
+        to: void 0
+      }
+    }
+  ]
+};
+var styles$s = {
+  "field-error": "lc-FieldError-module__field-error___IDkPT"
+};
+const baseClass$z = "field-error";
+const FieldError = (_q) => {
+  var _r = _q, {
     children,
     className = ""
-  } = _n, props = __objRest(_n, [
+  } = _r, props = __objRest(_r, [
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$i[baseClass$n], className);
+  const mergedClassNames = cx(styles$s[baseClass$z], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -708,66 +1602,12 @@ const FieldDescription = (_m) => {
     className: mergedClassNames
   }), children);
 };
-const baseClass$m = "checkbox";
-const CheckboxField = (_o) => {
-  var _p = _o, {
-    children,
-    className = "",
-    description,
-    checked,
-    disabled
-  } = _p, props = __objRest(_p, [
-    "children",
-    "className",
-    "description",
-    "checked",
-    "disabled"
-  ]);
-  const mergedClassNames = cx(styles$j[baseClass$m], className, {
-    [styles$j[`${baseClass$m}--selected`]]: checked,
-    [styles$j[`${baseClass$m}--disabled`]]: disabled
-  });
-  return /* @__PURE__ */ React.createElement("div", {
-    className: mergedClassNames
-  }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$j[`${baseClass$m}__label`]
-  }, /* @__PURE__ */ React.createElement(Checkbox, __spreadProps(__spreadValues({}, props), {
-    checked,
-    disabled
-  })), /* @__PURE__ */ React.createElement(Text, {
-    as: "div",
-    size: "md",
-    className: styles$j[`${baseClass$m}__text`]
-  }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$j[`${baseClass$m}__helper`]
-  }, description));
-};
-var styles$h = {
-  "field-error": "lc-FieldError-module__field-error___IDkPT"
-};
-const baseClass$l = "field-error";
-const FieldError = (_q) => {
-  var _r = _q, {
-    children,
-    className = ""
-  } = _r, props = __objRest(_r, [
-    "children",
-    "className"
-  ]);
-  const mergedClassNames = cx(styles$h[baseClass$l], className);
-  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
-    as: "span",
-    size: "sm"
-  }, props), {
-    className: mergedClassNames
-  }), children);
-};
-var styles$g = {
+var styles$r = {
   "field-group": "lc-FieldGroup-module__field-group___gy8lp",
   "field-group--inline": "lc-FieldGroup-module__field-group--inline___or4qf",
   "field-group--stretched": "lc-FieldGroup-module__field-group--stretched___6rkuO"
 };
-const baseClass$k = "field-group";
+const baseClass$y = "field-group";
 const FieldGroup = (_s) => {
   var _t = _s, {
     className = "",
@@ -784,9 +1624,9 @@ const FieldGroup = (_s) => {
     "inline",
     "stretch"
   ]);
-  const mergedClassNames = cx(styles$g[baseClass$k], className, {
-    [styles$g[`${baseClass$k}--inline`]]: inline,
-    [styles$g[`${baseClass$k}--stretched`]]: stretch
+  const mergedClassNames = cx(styles$r[baseClass$y], className, {
+    [styles$r[`${baseClass$y}--inline`]]: inline,
+    [styles$r[`${baseClass$y}--stretched`]]: stretch
   });
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: mergedClassNames
@@ -797,14 +1637,14 @@ const form__header = "lc-Form-module__form__header___U4B7t";
 const form__footer = "lc-Form-module__form__footer___1-sUX";
 const form__label = "lc-Form-module__form__label___spg-J";
 const form__helper = "lc-Form-module__form__helper___bhfwS";
-var styles$f = {
+var styles$q = {
   form,
   form__header,
   form__footer,
   form__label,
   form__helper
 };
-const baseClass$j = "form";
+const baseClass$x = "form";
 const Form = (_u) => {
   var _v = _u, {
     className,
@@ -820,73 +1660,37 @@ const Form = (_u) => {
     "formFooter"
   ]);
   return /* @__PURE__ */ React.createElement("form", __spreadValues({
-    className: cx(styles$f[baseClass$j], className)
+    className: cx(styles$q[baseClass$x], className)
   }, restProps), (labelText || helperText) && /* @__PURE__ */ React.createElement("div", {
-    className: styles$f[`${baseClass$j}__header`]
+    className: styles$q[`${baseClass$x}__header`]
   }, labelText && /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$f[`${baseClass$j}__label`]
+    className: styles$q[`${baseClass$x}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "p",
     size: "sm",
-    className: styles$f[`${baseClass$j}__helper`]
+    className: styles$q[`${baseClass$x}__helper`]
   }, helperText)), children, formFooter && /* @__PURE__ */ React.createElement("div", {
-    className: styles$f[`${baseClass$j}__footer`]
+    className: styles$q[`${baseClass$x}__footer`]
   }, formFooter));
 };
-var styles$e = {
-  "form-group": "lc-FormGroup-module__form-group___e2JHa",
-  "form-group__header": "lc-FormGroup-module__form-group__header___DgGmR",
-  "form-group__label": "lc-FormGroup-module__form-group__label___NC-JW",
-  "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
-};
-const baseClass$i = "form-group";
-const FormGroup = (_w) => {
-  var _x = _w, {
-    className = "",
-    children,
-    labelText,
-    helperText
-  } = _x, props = __objRest(_x, [
-    "className",
-    "children",
-    "labelText",
-    "helperText"
-  ]);
-  const mergedClassNames = cx(styles$e[baseClass$i], className);
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
-    role: "group"
-  }), labelText && { "aria-label": labelText }), {
-    className: mergedClassNames
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$e[`${baseClass$i}__header`]
-  }, /* @__PURE__ */ React.createElement(Heading, {
-    as: "div",
-    size: "sm",
-    className: styles$e[`${baseClass$i}__label`]
-  }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
-    as: "div",
-    size: "sm",
-    className: styles$e[`${baseClass$i}__helper`]
-  }, helperText)), children);
+var styles$p = {
+  "form-field": "lc-FormField-module__form-field___JqnX6",
+  "form-field--inline": "lc-FormField-module__form-field--inline___4DgIq",
+  "form-field__wrapper--inline": "lc-FormField-module__form-field__wrapper--inline___Ubvrn",
+  "form-field__label": "lc-FormField-module__form-field__label___hNCFS",
+  "form-field__label--inline": "lc-FormField-module__form-field__label--inline___QxyM6",
+  "form-field__label--no-text": "lc-FormField-module__form-field__label--no-text___Ohs-I",
+  "form-field__label-wrapper": "lc-FormField-module__form-field__label-wrapper___61-NO",
+  "form-field__label-adornment": "lc-FormField-module__form-field__label-adornment___HB0z7",
+  "form-field__label-left-node": "lc-FormField-module__form-field__label-left-node___dvipB",
+  "form-field__label-right-node": "lc-FormField-module__form-field__label-right-node___LR-03",
+  "form-field__label-right-node--inline": "lc-FormField-module__form-field__label-right-node--inline___BkiPG",
+  "form-field__row-break": "lc-FormField-module__form-field__row-break___DCBjC",
+  "form-field__content": "lc-FormField-module__form-field__content___XaOx3"
 };
-var styles$d = {
-  "text-field": "lc-TextField-module__text-field___bis8c",
-  "text-field--inline": "lc-TextField-module__text-field--inline___MPHqg",
-  "text-field__wrapper--inline": "lc-TextField-module__text-field__wrapper--inline___-gOob",
-  "text-field__label": "lc-TextField-module__text-field__label___vpNdg",
-  "text-field__label--inline": "lc-TextField-module__text-field__label--inline___YSRYX",
-  "text-field__label--no-text": "lc-TextField-module__text-field__label--no-text___XSyn2",
-  "text-field__label-wrapper": "lc-TextField-module__text-field__label-wrapper___SNCct",
-  "text-field__label-adornment": "lc-TextField-module__text-field__label-adornment___--pgp",
-  "text-field__label-right-node": "lc-TextField-module__text-field__label-right-node___sdnWg",
-  "text-field__label-right-node--inline": "lc-TextField-module__text-field__label-right-node--inline___vMBP2",
-  "text-field__row-break": "lc-TextField-module__text-field__row-break___AnNrI",
-  "text-field__content": "lc-TextField-module__text-field__content___dCkUW",
-  "field-label": "lc-TextField-module__field-label___q8Y-p"
-};
-const baseClass$h = "text-field";
-const TextField = ({
+const baseClass$w = "form-field";
+const FormField = ({
   inline,
   error,
   description,
@@ -897,92 +1701,153 @@ const TextField = ({
   children,
   labelRightNode
 }) => {
-  const mergedClassNames = cx(styles$d[baseClass$h], {
-    [styles$d[`${baseClass$h}--inline`]]: inline
+  const mergedClassNames = cx(styles$p[baseClass$w], {
+    [styles$p[`${baseClass$w}--inline`]]: inline
   }, className);
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, labelRightNode && inline && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label-right-node`], styles$d[`${baseClass$h}__label-right-node--inline`])
+    className: cx(styles$p[`${baseClass$w}__label-right-node`], styles$p[`${baseClass$w}__label-right-node--inline`])
   }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
-    className: styles$d[`${baseClass$h}__row-break`]
+    className: styles$p[`${baseClass$w}__row-break`]
   })), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__wrapper`], inline && styles$d[`${baseClass$h}__wrapper--inline`])
+    className: cx(styles$p[`${baseClass$w}__wrapper`], inline && styles$p[`${baseClass$w}__wrapper--inline`])
   }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label`], inline && styles$d[`${baseClass$h}__label--inline`], !labelText && styles$d[`${baseClass$h}__label--no-text`])
+    className: cx(styles$p[`${baseClass$w}__label`], inline && styles$p[`${baseClass$w}__label--inline`], !labelText && styles$p[`${baseClass$w}__label--no-text`])
   }, labelText && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label-wrapper`])
+    className: cx(styles$p[`${baseClass$w}__label-wrapper`])
   }, /* @__PURE__ */ React.createElement("label", {
-    className: "lc-field-label",
+    className: styles$p[`${baseClass$w}__label-left-node`],
     htmlFor: labelFor
   }, /* @__PURE__ */ React.createElement(Text, {
     as: "span",
     size: "sm"
   }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label-adornment`])
+    className: cx(styles$p[`${baseClass$w}__label-adornment`])
   }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label-right-node`])
+    className: cx(styles$p[`${baseClass$w}__label-right-node`])
   }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__content`])
+    className: cx(styles$p[`${baseClass$w}__content`])
   }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
 };
-var styles$c = {
-  "input-field": "lc-InputField-module__input-field___A-GHj",
-  "input-field--error": "lc-InputField-module__input-field--error___MMchC"
+var styles$o = {
+  "form-group": "lc-FormGroup-module__form-group___e2JHa",
+  "form-group__header": "lc-FormGroup-module__form-group__header___DgGmR",
+  "form-group__label": "lc-FormGroup-module__form-group__label___NC-JW",
+  "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
 };
-const baseClass$g = "input-field";
-const InputField = React.forwardRef((_y, ref) => {
-  var _z = _y, {
-    id,
+const baseClass$v = "form-group";
+const FormGroup = (_w) => {
+  var _x = _w, {
+    className = "",
+    children,
     labelText,
-    labelAdornment,
-    className,
-    inline,
-    error,
-    description,
-    labelRightNode,
-    fieldClassName,
-    style,
-    type = "text"
-  } = _z, restProps = __objRest(_z, [
-    "id",
-    "labelText",
-    "labelAdornment",
+    helperText
+  } = _x, props = __objRest(_x, [
     "className",
-    "inline",
+    "children",
+    "labelText",
+    "helperText"
+  ]);
+  const mergedClassNames = cx(styles$o[baseClass$v], className);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+    role: "group"
+  }), labelText && { "aria-label": labelText }), {
+    className: mergedClassNames
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$o[`${baseClass$v}__header`]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    as: "div",
+    size: "sm",
+    className: styles$o[`${baseClass$v}__label`]
+  }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
+    as: "div",
+    size: "sm",
+    className: styles$o[`${baseClass$v}__helper`]
+  }, helperText)), children);
+};
+const input = "lc-Input-module__input___qeMAQ";
+var styles$n = {
+  input,
+  "input--focused": "lc-Input-module__input--focused___wQH5-",
+  "input--disabled": "lc-Input-module__input--disabled___HidXX",
+  "input--error": "lc-Input-module__input--error___DlDbC",
+  "input--compact": "lc-Input-module__input--compact___iKSQZ",
+  "input--medium": "lc-Input-module__input--medium___3BjqQ",
+  "input--large": "lc-Input-module__input--large___jX5RW",
+  "input__icon--disabled": "lc-Input-module__input__icon--disabled___XO3dc",
+  "input__icon--left": "lc-Input-module__input__icon--left___BcySs",
+  "input__icon--right": "lc-Input-module__input__icon--right___VefSK",
+  "input__visibility-button": "lc-Input-module__input__visibility-button___eWrVe"
+};
+const baseClass$u = "input";
+const renderIcon = (icon2, disabled) => React.cloneElement(icon2.source, {
+  ["data-testid"]: `input-icon-${icon2.place}`,
+  className: cx(styles$n[`${baseClass$u}__icon`], styles$n[`${baseClass$u}__icon--${icon2.place}`], {
+    [styles$n[`${baseClass$u}__icon--disabled`]]: disabled
+  })
+});
+const Input = React.forwardRef((_y, ref) => {
+  var _z = _y, {
+    inputSize = "medium",
+    error = false,
+    disabled,
+    icon: icon2 = null,
+    className
+  } = _z, inputProps = __objRest(_z, [
+    "inputSize",
     "error",
-    "description",
-    "labelRightNode",
-    "fieldClassName",
-    "style",
-    "type"
+    "disabled",
+    "icon",
+    "className"
   ]);
-  const mergedClassNames = cx(styles$c[baseClass$g], {
-    [styles$c[`${baseClass$g}--error`]]: error
-  }, fieldClassName);
-  return /* @__PURE__ */ React.createElement(TextField, {
-    inline,
-    error,
-    description,
-    labelText,
-    labelAdornment,
-    className,
-    labelFor: id,
-    labelRightNode
-  }, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restProps), {
-    id,
-    ref,
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
+  const { type, onFocus, onBlur } = inputProps;
+  const mergedClassNames = cx(className, styles$n[baseClass$u], styles$n[`${baseClass$u}--${inputSize}`], {
+    [styles$n[`${baseClass$u}--disabled`]]: disabled,
+    [styles$n[`${baseClass$u}--focused`]]: isFocused,
+    [styles$n[`${baseClass$u}--error`]]: error
+  });
+  const iconCustomColor = !disabled ? "var(--content-default)" : "var(--content-disabled)";
+  const iconSource = isPasswordVisible ? VisibilityOn : VisibilityOff;
+  const shouldRenderLeftIcon = icon2 && icon2.place === "left";
+  const shouldRenderRightIcon = icon2 && type !== "password" && icon2.place === "right";
+  return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames,
-    style,
-    type
-  })));
+    "aria-disabled": disabled,
+    "tab-index": "0"
+  }, shouldRenderLeftIcon && renderIcon(icon2, disabled), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({
+    "data-testid": "input"
+  }, inputProps), {
+    ref,
+    onFocus: (e) => {
+      setIsFocused(true);
+      onFocus == null ? void 0 : onFocus(e);
+    },
+    onBlur: (e) => {
+      setIsFocused(false);
+      onBlur == null ? void 0 : onBlur(e);
+    },
+    disabled,
+    type: type && !isPasswordVisible ? type : "text"
+  })), shouldRenderRightIcon && renderIcon(icon2, disabled), type === "password" && /* @__PURE__ */ React.createElement(Button, {
+    disabled,
+    kind: "plain",
+    icon: /* @__PURE__ */ React.createElement(Icon, {
+      customColor: iconCustomColor,
+      source: iconSource
+    }),
+    onClick: () => setIsPasswordVisible((v) => !v),
+    className: styles$n[`${baseClass$u}__visibility-button`]
+  }));
 });
 const link = "lc-Link-module__link___kqx52";
-var styles$b = {
+var styles$m = {
   link,
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
-const baseClass$f = "link";
+const baseClass$t = "link";
 const Link = (_A) => {
   var _B = _A, {
     bold = false,
@@ -992,21 +1857,37 @@ const Link = (_A) => {
     "className"
   ]);
   return /* @__PURE__ */ React.createElement("a", __spreadValues({
-    className: cx(styles$b[baseClass$f], bold && styles$b[`${baseClass$f}--bold`], className)
+    className: cx(styles$m[baseClass$t], bold && styles$m[`${baseClass$t}--bold`], className)
   }, rest));
 };
+const KeyCodes = {
+  esc: "Escape",
+  enter: "Enter",
+  backspace: "Backspace",
+  delete: "Delete",
+  spacebar: " ",
+  tab: "Tab",
+  semicolon: ";",
+  comma: ",",
+  arrowUp: "ArrowUp",
+  arrowDown: "ArrowDown"
+};
 const modal__header = "lc-Modal-module__modal__header___Fp5VE";
 const modal__heading = "lc-Modal-module__modal__heading___G9KVK";
 const modal__body = "lc-Modal-module__modal__body___M-jmN";
 const modal__footer = "lc-Modal-module__modal__footer___2LYdc";
-var styles$a = {
+var styles$l = {
   "modal-base": "lc-Modal-module__modal-base___hbL1U",
   "modal-base__overlay": "lc-Modal-module__modal-base__overlay___kCQ8t",
   "modal-base__overlay--visible": "lc-Modal-module__modal-base__overlay--visible___zUNJL",
   "modal-base__close": "lc-Modal-module__modal-base__close___gJlgr",
+  "modal-base__close--label-type": "lc-Modal-module__modal-base__close--label-type___Om0Vb",
   modal__header,
+  "modal__label-header": "lc-Modal-module__modal__label-header___ZPtEy",
   modal__heading,
+  "modal__label-heading": "lc-Modal-module__modal__label-heading___WnYcF",
   modal__body,
+  "modal__body--full-space": "lc-Modal-module__modal__body--full-space___LsSNE",
   modal__footer,
   "action-modal": "lc-Modal-module__action-modal___CsRC7",
   "action-modal__heading": "lc-Modal-module__action-modal__heading___m3MuG",
@@ -1014,43 +1895,22 @@ var styles$a = {
   "action-modal__actions": "lc-Modal-module__action-modal__actions___kpRXD",
   "action-modal__icon": "lc-Modal-module__action-modal__icon___MK5xt"
 };
-const ModalCloseButton = ({
-  onClick
-}) => /* @__PURE__ */ React.createElement("button", {
-  title: "Close modal",
-  className: styles$a["modal-base__close"],
-  onClick,
-  type: "button"
-}, /* @__PURE__ */ React.createElement(Icon, {
-  source: Close,
-  size: IconSizeName.Large
-}));
-const KeyCodes = {
-  esc: "Escape",
-  enter: "Enter",
-  backspace: "Backspace",
-  delete: "Delete",
-  spacebar: " ",
-  tab: "Tab",
-  semicolon: ";",
-  comma: ",",
-  arrowUp: "ArrowUp",
-  arrowDown: "ArrowDown"
-};
-const baseClass$e = "modal-base";
+const baseClass$s = "modal-base";
 const ModalBase = (_C) => {
   var _D = _C, {
     children,
     className = "",
     onClose,
-    closeOnEscPress = true
+    closeOnEscPress = true,
+    closeOnOverlayPress = true
   } = _D, props = __objRest(_D, [
     "children",
     "className",
     "onClose",
-    "closeOnEscPress"
+    "closeOnEscPress",
+    "closeOnOverlayPress"
   ]);
-  const mergedClassNames = cx(styles$a[baseClass$e], className);
+  const mergedClassNames = cx(styles$l[baseClass$s], className);
   React.useEffect(() => {
     if (!closeOnEscPress) {
       return;
@@ -1064,79 +1924,85 @@ const ModalBase = (_C) => {
     return () => document.removeEventListener("keyup", onKeyUp, true);
   }, [closeOnEscPress]);
   const onOverlayClick = (event) => {
-    if (event.target === event.currentTarget) {
+    if (closeOnOverlayPress && event.target === event.currentTarget) {
       onClose();
     }
   };
-  const onCloseButtonClick = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    onClose();
-  };
   return /* @__PURE__ */ React.createElement("div", {
     "data-testid": "lc-modal-overlay",
     onMouseDown: onOverlayClick,
-    className: cx(styles$a[`${baseClass$e}__overlay`], styles$a[`${baseClass$e}__overlay--visible`])
+    className: cx(styles$l[`${baseClass$s}__overlay`], styles$l[`${baseClass$s}__overlay--visible`])
   }, /* @__PURE__ */ React.createElement("div", __spreadValues({
+    role: "dialog",
+    "aria-modal": true,
     className: mergedClassNames
-  }, props), /* @__PURE__ */ React.createElement(ModalCloseButton, {
-    onClick: onCloseButtonClick
-  }), children));
+  }, props), children));
 };
-const baseClass$d = "action-modal";
-const ActionModal = (_E) => {
+const ModalCloseButton = ({
+  labelType,
+  customColor,
+  onClick
+}) => /* @__PURE__ */ React.createElement("button", {
+  title: "Close modal",
+  className: cx(styles$l["modal-base__close"], labelType && styles$l["modal-base__close--label-type"]),
+  onClick,
+  type: "button"
+}, /* @__PURE__ */ React.createElement(Icon, {
+  source: Close,
+  size: "large",
+  customColor
+}));
+const baseClass$r = "modal";
+const Modal = (_E) => {
   var _F = _E, {
     children,
     className = "",
-    icon: icon2,
     heading,
-    actions
+    labelHeading,
+    fullSpaceContent,
+    footer,
+    onClose
   } = _F, props = __objRest(_F, [
-    "children",
-    "className",
-    "icon",
-    "heading",
-    "actions"
-  ]);
-  const mergedClassNames = cx(styles$a[baseClass$d], className);
-  return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
-    className: mergedClassNames
-  }, props), icon2 && /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$d}__icon`]
-  }, icon2), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$d}__heading`]
-  }, heading), /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$d}__content`]
-  }, children), actions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$d}__actions`]
-  }, actions));
-};
-const baseClass$c = "modal";
-const Modal = (_G) => {
-  var _H = _G, {
-    children,
-    className = "",
-    heading,
-    footer
-  } = _H, props = __objRest(_H, [
     "children",
     "className",
     "heading",
-    "footer"
+    "labelHeading",
+    "fullSpaceContent",
+    "footer",
+    "onClose"
   ]);
-  const mergedClassNames = cx(styles$a[baseClass$c], className);
+  const mergedClassNames = cx(styles$l[baseClass$r], className);
+  const onCloseButtonClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onClose();
+  };
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
-    className: mergedClassNames
-  }, props), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$c}__header`]
+    className: mergedClassNames,
+    onClose
+  }, props), labelHeading && /* @__PURE__ */ React.createElement("div", {
+    className: styles$l[`${baseClass$r}__label-header`]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    size: "xs",
+    as: "div",
+    className: styles$l[`${baseClass$r}__label-heading`]
+  }, labelHeading), /* @__PURE__ */ React.createElement(ModalCloseButton, {
+    labelType: !!labelHeading,
+    customColor: `var(--color-white)`,
+    onClick: onCloseButtonClick
+  })), !labelHeading && heading && /* @__PURE__ */ React.createElement("div", {
+    className: styles$l[`${baseClass$r}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
     as: "div",
-    className: styles$a[`${baseClass$c}__heading`]
-  }, heading)), /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$c}__body`]
+    className: styles$l[`${baseClass$r}__heading`]
+  }, heading)), !labelHeading && /* @__PURE__ */ React.createElement(ModalCloseButton, {
+    onClick: onCloseButtonClick
+  }), /* @__PURE__ */ React.createElement("div", {
+    "data-testid": "modal-body",
+    className: cx(styles$l[`${baseClass$r}__body`], fullSpaceContent && styles$l[`${baseClass$r}__body--full-space`])
   }, children), footer && /* @__PURE__ */ React.createElement("div", {
-    className: styles$a[`${baseClass$c}__footer`]
+    className: styles$l[`${baseClass$r}__footer`]
   }, footer));
 };
 const ModalPortal = ({
@@ -1159,10 +2025,10 @@ const ModalPortal = ({
       var _a2;
       (_a2 = document.querySelector(parentElementName)) == null ? void 0 : _a2.removeChild(container);
     };
-  }, []);
+  }, [parentElementName]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, ReactDOM.createPortal(children, container));
 };
-var styles$9 = {
+var styles$k = {
   "numeric-input": "lc-NumericInput-module__numeric-input___j1esc",
   "numeric-input__increment": "lc-NumericInput-module__numeric-input__increment___i3Tys",
   "numeric-input__decrement": "lc-NumericInput-module__numeric-input__decrement___3qgn0",
@@ -1170,9 +2036,9 @@ var styles$9 = {
   "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
-const baseClass$b = "numeric-input";
-const NumericInput = (_I) => {
-  var _J = _I, {
+const baseClass$q = "numeric-input";
+const NumericInput = (_G) => {
+  var _H = _G, {
     className,
     error,
     value,
@@ -1182,7 +2048,7 @@ const NumericInput = (_I) => {
     noControls,
     style,
     onChange
-  } = _J, restProps = __objRest(_J, [
+  } = _H, restProps = __objRest(_H, [
     "className",
     "error",
     "value",
@@ -1194,10 +2060,10 @@ const NumericInput = (_I) => {
     "onChange"
   ]);
   const inputRef = React.useRef(null);
-  const mergedClassNames = cx(styles$9[baseClass$b], {
-    [styles$9[`${baseClass$b}--error`]]: error,
-    [styles$9[`${baseClass$b}--no-controls`]]: noControls,
-    [styles$9[`${baseClass$b}--disabled`]]: disabled
+  const mergedClassNames = cx(styles$k[baseClass$q], {
+    [styles$k[`${baseClass$q}--error`]]: error,
+    [styles$k[`${baseClass$q}--no-controls`]]: noControls,
+    [styles$k[`${baseClass$q}--disabled`]]: disabled
   }, className);
   const callOnChange = (val) => onChange(String(val));
   const calcValue = (val) => {
@@ -1262,115 +2128,670 @@ const NumericInput = (_I) => {
     disabled: disabled || hasReachedTheLimit(value, max),
     onClick: handleIncrementClick,
     "aria-label": "Increment value",
-    className: styles$9[`${baseClass$b}__increment`],
+    className: styles$k[`${baseClass$q}__increment`],
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: ChevronUp,
     disabled: disabled || hasReachedTheLimit(value, max),
-    iconType: IconTypeName.Primary
+    kind: "primary"
   })), /* @__PURE__ */ React.createElement("button", {
     tabIndex: -1,
     disabled: disabled || hasReachedTheLimit(value, min),
     "aria-label": "Decrement value",
-    className: styles$9[`${baseClass$b}__decrement`],
+    className: styles$k[`${baseClass$q}__decrement`],
     onClick: handleDecrementClick,
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: ChevronDown,
-    iconType: IconTypeName.Primary,
+    kind: "primary",
     disabled: disabled || hasReachedTheLimit(value, min)
   }))));
 };
-const NumericInputField = (_K) => {
-  var _L = _K, {
-    id,
-    labelText,
-    labelAdornment,
-    className,
-    inline,
-    error,
-    description,
-    labelRightNode,
-    fieldClassName,
-    style
-  } = _L, restProps = __objRest(_L, [
-    "id",
-    "labelText",
-    "labelAdornment",
-    "className",
-    "inline",
-    "error",
-    "description",
-    "labelRightNode",
-    "fieldClassName",
-    "style"
-  ]);
-  return /* @__PURE__ */ React.createElement(TextField, {
-    inline,
-    error,
-    description,
-    labelText,
-    labelAdornment,
-    className,
-    labelFor: id,
-    labelRightNode
-  }, /* @__PURE__ */ React.createElement(NumericInput, __spreadProps(__spreadValues({}, restProps), {
-    id,
-    className: fieldClassName,
-    style,
-    error
-  })));
-};
-const popover = "lc-Popover-module__popover___8X1b2";
-var cssStyles = {
-  popover,
-  "popover--visible": "lc-Popover-module__popover--visible___u5NXB"
+var styles$j = {
+  "picker-trigger": "lc-Trigger-module__picker-trigger___BIvTx",
+  "picker-trigger--compact": "lc-Trigger-module__picker-trigger--compact___3i1DL",
+  "picker-trigger--medium": "lc-Trigger-module__picker-trigger--medium___-fbEx",
+  "picker-trigger--large": "lc-Trigger-module__picker-trigger--large___C8qkZ",
+  "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"
 };
-const buildPopperModifiers = (modifiers) => {
-  const { offset, flip, preventOverflow } = modifiers;
-  const calculatedOffset = [
-    {
-      name: "offset",
-      options: __spreadValues({
-        offset: [0, 4]
-      }, (offset == null ? void 0 : offset.options) || {})
+const baseClass$p = "picker-trigger";
+const Trigger = ({
+  children,
+  isSearchDisabled,
+  isDisabled,
+  isError,
+  isItemSelected,
+  isOpen,
+  isRequired,
+  isMultiSelect,
+  size = "medium",
+  onTrigger,
+  onClear
+}) => {
+  const triggerRef = React.useRef(null);
+  const mergedClassNames = cx(styles$j[baseClass$p], styles$j[`${baseClass$p}--${size}`], isMultiSelect && styles$j[`${baseClass$p}--multi-select`], isMultiSelect && isItemSelected && styles$j[`${baseClass$p}--multi-select--with-items`], isDisabled && styles$j[`${baseClass$p}--disabled`], isOpen && styles$j[`${baseClass$p}--focused`], isError && styles$j[`${baseClass$p}--error`]);
+  React.useEffect(() => {
+    const onKeyDown = (e) => {
+      const isFocused = document.activeElement === triggerRef.current;
+      if (isFocused && e.key !== KeyCodes.tab) {
+        onTrigger(e);
+      }
+    };
+    if (!isSearchDisabled) {
+      document.addEventListener("keydown", onKeyDown);
     }
-  ];
-  const calculateFlip = [
-    {
-      name: "flip",
-      options: __spreadValues({}, (flip == null ? void 0 : flip.options) || {})
+    return () => {
+      if (!isSearchDisabled) {
+        document.removeEventListener("keydown", onKeyDown);
+      }
+    };
+  }, [isSearchDisabled]);
+  const handleTriggerClick = (e) => {
+    onTrigger(e);
+  };
+  const handleOnClearClick = (e) => {
+    e.stopPropagation();
+    onClear();
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: triggerRef,
+    className: mergedClassNames,
+    onClick: handleTriggerClick,
+    tabIndex: 0
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$j[`${baseClass$p}__content`]
+  }, children), /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$j[`${baseClass$p}__controls`], styles$j[`${baseClass$p}__controls--${size}`])
+  }, isItemSelected && !isDisabled && !isRequired && /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${baseClass$p}__clear-icon`,
+    className: styles$j[`${baseClass$p}__clear-icon`],
+    onClick: handleOnClearClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    kind: "primary",
+    size: "small",
+    source: Close
+  })), /* @__PURE__ */ React.createElement(Icon, {
+    className: styles$j[`${baseClass$p}__chevron-icon`],
+    source: !isOpen ? ChevronDown : ChevronUp,
+    size: "large",
+    disabled: isDisabled
+  })));
+};
+var styles$i = {
+  "picker-list": "lc-PickerList-module__picker-list___FqdgZ",
+  "picker-list__no-results": "lc-PickerList-module__picker-list__no-results___tX172",
+  "picker-list__item": "lc-PickerList-module__picker-list__item___8QNS0",
+  "picker-list__item--select-all": "lc-PickerList-module__picker-list__item--select-all___PlTHV",
+  "picker-list__item__header": "lc-PickerList-module__picker-list__item__header___mxmg0",
+  "picker-list__item__content": "lc-PickerList-module__picker-list__item__content___D-tsE",
+  "picker-list__item__custom": "lc-PickerList-module__picker-list__item__custom___kJEP6"
+};
+const SELECT_ALL_OPTION_KEY = "select-all";
+const baseClass$o = "picker-list";
+const itemClassName = `${baseClass$o}__item`;
+const PickerList = ({
+  isOpen,
+  items,
+  selectedItemsKeys,
+  emptyStateText = "No results found",
+  selectAllOptionText,
+  isMultiSelect,
+  onClose,
+  onSelect,
+  onSelectAll
+}) => {
+  const mergedClassNames = cx(styles$i[baseClass$o], {
+    [styles$i[`${baseClass$o}__no-results`]]: items.length === 0
+  });
+  const [currentItemKey, setCurrentItemKey] = React.useState(null);
+  const indexRef = React.useRef(-1);
+  const lastIndexRef = React.useRef(0);
+  const listRef = React.useRef(null);
+  const onKeyDown = (e) => {
+    if (e.key === KeyCodes.esc) {
+      e.preventDefault();
+      onClose();
     }
-  ];
-  const calculatePreventOverflow = [
-    {
-      name: "preventOverlow",
-      options: __spreadValues({
-        rootBoundary: "viewport"
-      }, preventOverflow || {})
+    if (e.key === KeyCodes.arrowUp && indexRef.current > 0) {
+      e.preventDefault();
+      indexRef.current = getPrevItemIndex();
+      setCurrentItemKey(items[indexRef.current].key);
     }
-  ];
-  return [...calculatedOffset, ...calculateFlip, ...calculatePreventOverflow];
+    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);
+    }
+    if (isOpen) {
+      document.addEventListener("keydown", onKeyDown);
+      return () => document.removeEventListener("keydown", onKeyDown);
+    } else {
+      indexRef.current = -1;
+      lastIndexRef.current = 0;
+      setCurrentItemKey(null);
+    }
+  }, [items, isOpen, onKeyDown]);
+  const isHeaderOrDisabled = (i) => !!items[i] && (items[i].disabled || items[i].groupHeader);
+  const getPrevItemIndex = () => {
+    indexRef.current = indexRef.current - 1;
+    while (isHeaderOrDisabled(indexRef.current)) {
+      indexRef.current = indexRef.current - 1;
+      if (!isHeaderOrDisabled(indexRef.current)) {
+        break;
+      }
+    }
+    lastIndexRef.current = indexRef.current;
+    return indexRef.current;
+  };
+  const getNextItemIndex = () => {
+    indexRef.current = indexRef.current + 1;
+    if (!isHeaderOrDisabled(indexRef.current)) {
+      lastIndexRef.current = indexRef.current;
+      return indexRef.current;
+    }
+    while (isHeaderOrDisabled(indexRef.current)) {
+      indexRef.current = indexRef.current + 1;
+      if (indexRef.current === items.length && !isHeaderOrDisabled(indexRef.current)) {
+        return lastIndexRef.current;
+      }
+      if (!isHeaderOrDisabled(indexRef.current)) {
+        break;
+      }
+    }
+    lastIndexRef.current = indexRef.current;
+    return indexRef.current;
+  };
+  const handleOnClick = (item) => onSelect(item);
+  const handleOnSelectAllClick = () => onSelectAll();
+  const isItemSelected = (key) => {
+    if (!selectedItemsKeys) {
+      return false;
+    }
+    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$i[itemClassName], styles$i[`${itemClassName}--select-all`]),
+      onClick: handleOnSelectAllClick
+    }, selectAllOptionText);
+  };
+  const getOptionContent = (item) => {
+    if (item == null ? void 0 : item.customElement) {
+      return /* @__PURE__ */ React.createElement("div", {
+        className: styles$i[`${itemClassName}__custom`]
+      }, item.customElement.listItemBody);
+    }
+    return item.name;
+  };
+  if (!isOpen) {
+    return null;
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: mergedClassNames
+    }, emptyStateText);
+  }
+  return /* @__PURE__ */ React.createElement("ul", {
+    ref: listRef,
+    className: mergedClassNames,
+    role: "listbox",
+    tabIndex: -1
+  }, getSelectAllOption(), items.map((item) => {
+    if (item.groupHeader) {
+      return /* @__PURE__ */ React.createElement("li", {
+        role: "option",
+        key: item.key,
+        className: styles$i[`${itemClassName}__header`]
+      }, item.name);
+    }
+    return /* @__PURE__ */ React.createElement("li", {
+      "data-testid": item.key,
+      ref: (element) => {
+        if (currentItemKey === item.key) {
+          element == null ? void 0 : element.scrollIntoView({ block: "nearest" });
+        }
+      },
+      role: "option",
+      "aria-current": currentItemKey === item.key,
+      "aria-selected": isItemSelected(item.key),
+      "aria-disabled": item.disabled,
+      id: item.key,
+      key: item.key,
+      className: cx(styles$i[itemClassName], {
+        [styles$i[`${itemClassName}__custom`]]: item == null ? void 0 : item.customElement
+      }),
+      onClick: () => !item.disabled && handleOnClick(item)
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: styles$i[`${itemClassName}__content`]
+    }, getOptionContent(item)), isItemSelected(item.key) && /* @__PURE__ */ React.createElement(Icon, {
+      kind: "link",
+      source: Check
+    }));
+  }));
+};
+const picker = "lc-Picker-module__picker___GRj9W";
+const picker__container = "lc-Picker-module__picker__container___s0PUc";
+const picker__label = "lc-Picker-module__picker__label___Ac7Vu";
+const picker__error = "lc-Picker-module__picker__error___H865k";
+const picker__error__icon = "lc-Picker-module__picker__error__icon___bbL7r";
+var styles$h = {
+  picker,
+  picker__container,
+  picker__label,
+  "picker__label--disabled": "lc-Picker-module__picker__label--disabled___Opu7s",
+  picker__error,
+  picker__error__icon
+};
+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$g = {
+  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$n = "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",
+    iconSize = "medium",
+    kind = "default",
+    onRemove,
+    outline = false,
+    icon: icon2,
+    avatar: avatar2,
+    customColor
+  } = _J, restProps = __objRest(_J, [
+    "className",
+    "children",
+    "dismissible",
+    "size",
+    "iconSize",
+    "kind",
+    "onRemove",
+    "outline",
+    "icon",
+    "avatar",
+    "customColor"
+  ]);
+  const mergedClassNames = cx(styles$g[baseClass$n], className, styles$g[`${baseClass$n}--${size}`], styles$g[`${baseClass$n}--${kind}`], {
+    [styles$g[`${baseClass$n}--dismissible`]]: dismissible,
+    [styles$g[`${baseClass$n}--outline`]]: outline,
+    [styles$g[`${baseClass$n}--with-icon`]]: !!icon2 || !!avatar2,
+    [styles$g[`${baseClass$n}--${getCustomTextClass(customColor)}`]]: !!customColor
+  });
+  const getCustomColorStyles = () => {
+    if (!customColor) {
+      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$g[`${baseClass$n}__avatar`],
+    src: avatar2,
+    alt: "tag-avatar",
+    "data-testid": "lc-tag-avatar"
+  }), " ", icon2 && !avatar2 && /* @__PURE__ */ React.createElement(Icon, {
+    "data-testid": "lc-tag-icon",
+    className: styles$g[`${baseClass$n}__icon`],
+    source: icon2,
+    size: "small",
+    customColor: getIconCustomColor()
+  }), children, dismissible && /* @__PURE__ */ React.createElement("button", {
+    title: "Remove",
+    onClick: onRemove,
+    type: "button",
+    className: styles$g[`${baseClass$n}__remove`]
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    "data-dismiss-icon": true,
+    source: Close,
+    size: iconSize,
+    customColor: getIconCustomColor()
+  })));
+};
+var styles$f = {
+  "picker-trigger-body": "lc-TriggerBody-module__picker-trigger-body___ZWjX9",
+  "picker-trigger-body__item": "lc-TriggerBody-module__picker-trigger-body__item___0DBg1",
+  "picker-trigger-body__input": "lc-TriggerBody-module__picker-trigger-body__input___ezPyz"
+};
+const baseClass$m = "picker-trigger-body";
+const TriggerBody = ({
+  isOpen,
+  isSearchDisabled,
+  isDisabled,
+  placeholder,
+  items,
+  type,
+  iconSize,
+  onItemRemove,
+  onFilter
+}) => {
+  const shouldDisplaySearch = isOpen && !isSearchDisabled;
+  const getSingleItem = (item) => {
+    if (type === "single" && isOpen && !isSearchDisabled) {
+      return null;
+    }
+    if (item == null ? void 0 : item.customElement) {
+      return /* @__PURE__ */ React.createElement("div", {
+        className: styles$f[`${baseClass$m}__custom`]
+      }, item.customElement.selectedItemBody);
+    }
+    return /* @__PURE__ */ React.createElement("div", {
+      className: styles$f[`${baseClass$m}__item`]
+    }, item.name);
+  };
+  const handleOnChange = (e) => {
+    onFilter(e.target.value);
+  };
+  const getSearch = () => /* @__PURE__ */ React.createElement("input", {
+    className: styles$f[`${baseClass$m}__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$f[baseClass$m]
+  }, type === "single" ? getSingleItem(items[0]) : items.map((item) => {
+    return /* @__PURE__ */ React.createElement(Tag, {
+      key: item.name,
+      className: styles$f[`${baseClass$m}__tag`],
+      iconSize,
+      dismissible: !isDisabled,
+      onRemove: () => onItemRemove(item)
+    }, getSingleItem(item));
+  }), shouldDisplaySearch && getSearch());
+};
+const baseClass$l = "picker";
+const Picker = ({
+  className,
+  disabled,
+  error,
+  label,
+  options,
+  selected,
+  size = "medium",
+  tagIconSize = "medium",
+  placeholder = "Select option",
+  isRequired,
+  noSearchResultText = "No results found",
+  selectAllOptionText,
+  type = "single",
+  searchDisabled = false,
+  onSelect
+}) => {
+  const [isListOpen, setIsListOpen] = React.useState(false);
+  const [searchPhrase, setSearchPhrase] = React.useState(null);
+  const triggerRef = React.useRef(null);
+  const mergedClassNames = cx(styles$h[baseClass$l], className);
+  React.useEffect(() => {
+    if (isListOpen) {
+      const onDocumentClick = (e) => {
+        var _a;
+        if (!((_a = triggerRef.current) == null ? void 0 : _a.contains(e.target))) {
+          setIsListOpen(false);
+        }
+      };
+      const onKeyDown = (e) => {
+        if (e.key === KeyCodes.tab) {
+          setIsListOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onDocumentClick);
+      document.addEventListener("keydown", onKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", onDocumentClick);
+        document.addEventListener("keydown", onKeyDown);
+      };
+    } else {
+      setSearchPhrase(null);
+    }
+  }, [isListOpen]);
+  const handleTrigger = (e) => {
+    const target = e.target;
+    if (disabled || target.getAttribute("data-dismiss-icon")) {
+      return;
+    }
+    setIsListOpen((prev) => !prev);
+  };
+  const handleOnClose = () => {
+    setIsListOpen(false);
+  };
+  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 = options.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);
+    const itemsToSelect = items.filter(isItemSelectable);
+    onSelect(itemsToSelect);
+  };
+  const handleClear = () => {
+    setIsListOpen(false);
+    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;
+    }
+    return options.filter((item) => {
+      if (item.groupHeader) {
+        return false;
+      }
+      const search = searchPhrase.toLowerCase();
+      const itemName = item.name.toLowerCase();
+      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: mergedClassNames
+  }, label && /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$h[`${baseClass$l}__label`], {
+      [styles$h[`${baseClass$l}__label--disabled`]]: disabled
+    })
+  }, label), /* @__PURE__ */ React.createElement("div", {
+    className: styles$h[`${baseClass$l}__container`]
+  }, /* @__PURE__ */ React.createElement(Trigger, {
+    isSearchDisabled: searchDisabled,
+    isError: !!error,
+    isOpen: isListOpen,
+    isDisabled: disabled,
+    isItemSelected: !!selected,
+    isRequired,
+    isMultiSelect: type === "multi",
+    size,
+    onTrigger: handleTrigger,
+    onClear: handleClear
+  }, /* @__PURE__ */ React.createElement(TriggerBody, {
+    isOpen: isListOpen,
+    isSearchDisabled: searchDisabled,
+    isDisabled: disabled,
+    placeholder,
+    iconSize: tagIconSize,
+    items: selected,
+    type,
+    onItemRemove: handleItemRemove,
+    onFilter: handleOnFilter
+  })), /* @__PURE__ */ React.createElement(PickerList, {
+    selectedItemsKeys,
+    items,
+    isOpen: isListOpen,
+    isMultiSelect: type === "multi",
+    emptyStateText: noSearchResultText,
+    selectAllOptionText,
+    onClose: handleOnClose,
+    onSelect: handleSelect,
+    onSelectAll: handleSelectAll
+  })), error && /* @__PURE__ */ React.createElement("div", {
+    className: styles$h[`${baseClass$l}__error`]
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    className: styles$h[`${baseClass$l}__error__icon`],
+    source: Error2,
+    kind: "error",
+    size: "small"
+  }), error));
+};
+const popover = "lc-Popover-module__popover___8X1b2";
+var cssStyles = {
+  popover,
+  "popover--visible": "lc-Popover-module__popover--visible___u5NXB"
 };
 const Popover = (props) => {
   const {
     triggerRenderer,
+    onClose,
     children,
     className,
     placement,
+    flipOptions,
     isVisible = false
   } = props;
-  const rendererRef = React.useRef(null);
-  const popperRef = React.useRef(null);
   const [visible, setVisibility] = React.useState(false);
+  const prevVisibleState = React.useRef(false);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    refs,
+    update,
+    placement: updatedPlacement
+  } = useFloating({
+    middleware: [offset(4), flip(flipOptions)],
+    placement
+  });
   React.useEffect(() => {
     setVisibility(isVisible);
   }, [isVisible]);
+  React.useEffect(() => {
+    if (onClose && prevVisibleState.current !== visible && !visible) {
+      onClose();
+    }
+    prevVisibleState.current = visible;
+  }, [visible]);
+  React.useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) {
+      return;
+    }
+    return autoUpdate(refs.reference.current, refs.floating.current, update);
+  }, [refs.reference, refs.floating, update, updatedPlacement, visible]);
   function handleDocumentClick(event) {
-    var _a, _b;
-    if ((_a = popperRef.current) == null ? void 0 : _a.contains(event.target)) {
+    if (refs.floating.current && refs.floating.current.contains(event.target)) {
       return;
-    } else if ((_b = rendererRef.current) == null ? void 0 : _b.contains(event.target)) {
+    } else if (refs.reference.current && refs.reference.current.contains(event.target)) {
       setVisibility((prevVisible) => !prevVisible);
     } else {
       setVisibility(false);
@@ -1389,33 +2810,22 @@ const Popover = (props) => {
       document.removeEventListener("mousedown", handleDocumentClick);
     };
   }, []);
-  const { styles: styles2, attributes } = usePopper(rendererRef.current, popperRef.current, {
-    modifiers: props.modifiers ? buildPopperModifiers(props.modifiers) : [],
-    placement
-  });
   const mergedClassNames = cx(cssStyles["popover"], className, {
     [cssStyles["popover--visible"]]: visible
   });
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    ref: rendererRef
-  }, triggerRenderer()), /* @__PURE__ */ React.createElement("div", __spreadValues({
-    ref: popperRef,
+    style: { width: "fit-content" },
+    ref: reference
+  }, triggerRenderer()), /* @__PURE__ */ React.createElement("div", {
+    ref: floating,
     className: mergedClassNames,
-    style: styles2.popper
-  }, attributes.popper), children));
-};
-var ProgressStatus = /* @__PURE__ */ ((ProgressStatus2) => {
-  ProgressStatus2["Normal"] = "normal";
-  ProgressStatus2["Error"] = "error";
-  ProgressStatus2["Success"] = "success";
-  return ProgressStatus2;
-})(ProgressStatus || {});
-var ProgressSize = /* @__PURE__ */ ((ProgressSize2) => {
-  ProgressSize2["Small"] = "small";
-  ProgressSize2["Medium"] = "medium";
-  ProgressSize2["Large"] = "large";
-  return ProgressSize2;
-})(ProgressSize || {});
+    style: {
+      position: strategy,
+      top: y != null ? y : "",
+      left: x != null ? x : ""
+    }
+  }, children));
+};
 const PROGRESS_STATUSES = [
   "normal",
   "error",
@@ -1423,18 +2833,18 @@ const PROGRESS_STATUSES = [
 ];
 const clampPercentage = (percent) => Math.min(Math.max(percent, 0), 100);
 function getPercentNumber(status, percent = 0) {
-  if (status === ProgressStatus.Error) {
+  if (status === "error") {
     return 0;
   }
   return clampPercentage(parseInt(percent.toString(), 10));
 }
 function getProgressStatus(status, percent) {
   if (!PROGRESS_STATUSES.includes(status) && percent >= 100) {
-    return ProgressStatus.Normal;
+    return "normal";
   }
-  return status || ProgressStatus.Normal;
+  return status || "normal";
 }
-var styles$8 = {
+var styles$e = {
   "progress-circle": "lc-ProgressCircle-module__progress-circle___NRHCi",
   "progress-circle--small": "lc-ProgressCircle-module__progress-circle--small___8FVwG",
   "progress-circle--medium": "lc-ProgressCircle-module__progress-circle--medium___XlzEX",
@@ -1451,37 +2861,35 @@ var styles$8 = {
   "progress-circle--normal": "lc-ProgressCircle-module__progress-circle--normal___dFneQ"
 };
 const THICKNESS_FROM_SIZE = {
-  [ProgressSize.Small]: 2,
-  [ProgressSize.Medium]: 3,
-  [ProgressSize.Large]: 4
+  small: 2,
+  medium: 3,
+  large: 4
 };
 const SIZE_VALUE_FROM_SIZE = {
-  [ProgressSize.Small]: 15,
-  [ProgressSize.Medium]: 36,
-  [ProgressSize.Large]: 56
+  small: 15,
+  medium: 36,
+  large: 56
 };
-const baseClass$a = "progress-circle";
-const ProgressCircle = React.forwardRef((_M, ref) => {
-  var _N = _M, {
-    status = ProgressStatus.Normal,
-    percent,
+const baseClass$k = "progress-circle";
+const ProgressCircle = React.forwardRef((_K, ref) => {
+  var _L = _K, {
+    status = "normal",
+    progressValue,
     className,
-    size = ProgressSize.Medium
-  } = _N, restProps = __objRest(_N, [
+    size = "medium"
+  } = _L, restProps = __objRest(_L, [
     "status",
-    "percent",
+    "progressValue",
     "className",
     "size"
   ]);
-  const progressStatus = getProgressStatus(status, percent);
-  const percentNumber = getPercentNumber(progressStatus, percent);
+  const progressStatus = getProgressStatus(status, progressValue);
+  const percentNumber = getPercentNumber(progressStatus, progressValue);
   const thickness = THICKNESS_FROM_SIZE[size];
   const sizeValue = SIZE_VALUE_FROM_SIZE[size];
-  const mergedClassNames = cx(styles$8[baseClass$a], {
-    [styles$8[`${baseClass$a}--${size}`]]: size,
-    [styles$8[`${baseClass$a}--error`]]: progressStatus === ProgressStatus.Error,
-    [styles$8[`${baseClass$a}--success`]]: progressStatus === ProgressStatus.Success,
-    [styles$8[`${baseClass$a}--normal`]]: progressStatus === ProgressStatus.Normal
+  const mergedClassNames = cx(styles$e[baseClass$k], {
+    [styles$e[`${baseClass$k}--${size}`]]: size,
+    [styles$e[`${baseClass$k}--${status}`]]: status
   }, className);
   const circumference = 2 * Math.PI * ((sizeValue - thickness) / 2);
   const indicatorStyle = {
@@ -1496,14 +2904,14 @@ const ProgressCircle = React.forwardRef((_M, ref) => {
   }, restProps), /* @__PURE__ */ React.createElement("svg", {
     viewBox: svgViewBox
   }, /* @__PURE__ */ React.createElement("circle", {
-    className: styles$8[`${baseClass$a}__bg-line--${status}`],
+    className: styles$e[`${baseClass$k}__bg-line--${status}`],
     cx: sizeValue,
     cy: sizeValue,
     r: (sizeValue - thickness) / 2,
     fill: "none",
     strokeWidth: thickness
   }), /* @__PURE__ */ React.createElement("circle", {
-    className: styles$8[`${baseClass$a}__indicator--${status}`],
+    className: styles$e[`${baseClass$k}__indicator--${status}`],
     style: indicatorStyle,
     cx: sizeValue,
     cy: sizeValue,
@@ -1512,7 +2920,46 @@ const ProgressCircle = React.forwardRef((_M, ref) => {
     strokeWidth: thickness
   })));
 });
-var styles$7 = {
+var styles$d = {
+  "progress-bar": "lc-ProgressBar-module__progress-bar___3pa3d",
+  "progress-bar--small": "lc-ProgressBar-module__progress-bar--small___7nQKx",
+  "progress-bar--medium": "lc-ProgressBar-module__progress-bar--medium___cM44p",
+  "progress-bar--large": "lc-ProgressBar-module__progress-bar--large___UlzNR",
+  "progress-bar--error": "lc-ProgressBar-module__progress-bar--error___MulqI",
+  "progress-bar--success": "lc-ProgressBar-module__progress-bar--success___p7nB-",
+  "progress-bar--normal": "lc-ProgressBar-module__progress-bar--normal___ZwCb-",
+  "progress-bar__indicator--success": "lc-ProgressBar-module__progress-bar__indicator--success___wRjR3",
+  "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
+};
+const baseClass$j = "progress-bar";
+const ProgressBar = React.forwardRef((_M, ref) => {
+  var _N = _M, {
+    status = "normal",
+    percent,
+    size = "medium",
+    className = ""
+  } = _N, restProps = __objRest(_N, [
+    "status",
+    "percent",
+    "size",
+    "className"
+  ]);
+  const progressStatus = getProgressStatus(status, percent);
+  const percentNumber = getPercentNumber(progressStatus, percent);
+  const mergedClassNames = cx(styles$d[baseClass$j], {
+    [styles$d[`${baseClass$j}--${size}`]]: size,
+    [styles$d[`${baseClass$j}--${status}`]]: status
+  }, className);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, restProps), {
+    className: mergedClassNames,
+    ref,
+    role: "progressbar"
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$d[`${baseClass$j}__indicator--${status}`],
+    style: { width: `${percentNumber}%` }
+  }));
+});
+var styles$c = {
   "promo-banner": "lc-PromoBanner-module__promo-banner___-mGpq",
   "promo-banner__content": "lc-PromoBanner-module__promo-banner__content___kRWar",
   "promo-banner__wrapper": "lc-PromoBanner-module__promo-banner__wrapper___I-8cl",
@@ -1520,13 +2967,15 @@ var styles$7 = {
   "promo-banner__img": "lc-PromoBanner-module__promo-banner__img___eaShb",
   "promo-banner__button-text": "lc-PromoBanner-module__promo-banner__button-text___taYKa",
   "promo-banner--light": "lc-PromoBanner-module__promo-banner--light___eJxOR",
-  "promo-banner--small": "lc-PromoBanner-module__promo-banner--small___7sWLV",
   "promo-banner__footer": "lc-PromoBanner-module__promo-banner__footer___8OjvH",
-  "promo-banner--medium": "lc-PromoBanner-module__promo-banner--medium___NeeoJ",
+  "promo-banner--small": "lc-PromoBanner-module__promo-banner--small___7sWLV",
   "promo-banner--large": "lc-PromoBanner-module__promo-banner--large___pMiCU",
   "promo-banner__close-icon": "lc-PromoBanner-module__promo-banner__close-icon___GowBL"
 };
-const baseClass$9 = "promo-banner";
+const SMALL_CONTAINER_WIDTH_TRESHOLD = 400;
+const LARGE_CONTAINER_WIDTH_TRESHOLD = 800;
+const RESIZE_DEBOUNCE_TRESHOLD = 500;
+const baseClass$i = "promo-banner";
 const PromoBanner = ({
   className,
   buttonText,
@@ -1535,50 +2984,69 @@ const PromoBanner = ({
   img,
   light = false,
   linkText,
-  size = "small",
   onButtonClick,
   onClose,
   onLinkClick
 }) => {
-  const mergedClassNames = cx(styles$7[baseClass$9], {
-    [styles$7[`${baseClass$9}--light`]]: light,
-    [styles$7[`${baseClass$9}--${size}`]]: size
+  const containerRef = React.useRef(null);
+  const [containerSize, setContainerSize] = React.useState("medium");
+  const mergedClassNames = cx(styles$c[baseClass$i], {
+    [styles$c[`${baseClass$i}--light`]]: light,
+    [styles$c[`${baseClass$i}--small`]]: containerSize === "small",
+    [styles$c[`${baseClass$i}--large`]]: containerSize === "large"
   }, className);
-  const shouldRenderLargeFooter = (buttonText || linkText) && size === "large";
-  const shouldRenderSmallOrMediumFooter = (buttonText || linkText) && size !== "large";
+  React.useEffect(() => {
+    const handleResize = () => {
+      if (containerRef.current && containerRef.current.offsetWidth <= SMALL_CONTAINER_WIDTH_TRESHOLD) {
+        return setContainerSize("small");
+      }
+      if (containerRef.current && containerRef.current.offsetWidth >= LARGE_CONTAINER_WIDTH_TRESHOLD) {
+        return setContainerSize("large");
+      }
+      return setContainerSize("medium");
+    };
+    const debouncedHandleResize = debounce(handleResize, RESIZE_DEBOUNCE_TRESHOLD);
+    window.addEventListener("resize", debouncedHandleResize);
+    handleResize();
+    return () => {
+      debouncedHandleResize.cancel();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   const footer = /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$9}__footer`]
+    className: styles$c[`${baseClass$i}__footer`]
   }, buttonText && /* @__PURE__ */ React.createElement(Button, {
     kind: "primary",
     size: "compact",
     onClick: onButtonClick,
-    className: styles$7[`${baseClass$9}__button-text`]
+    className: styles$c[`${baseClass$i}__button-text`]
   }, buttonText), linkText && /* @__PURE__ */ React.createElement(Button, {
     size: "compact",
     kind: "text",
     onClick: onLinkClick
   }, linkText));
   return /* @__PURE__ */ React.createElement("div", {
+    ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$9}__content`]
+    className: styles$c[`${baseClass$i}__content`]
   }, img && /* @__PURE__ */ React.createElement("img", {
     src: img,
-    className: styles$7[`${baseClass$9}__img`]
+    className: styles$c[`${baseClass$i}__img`]
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$9}__wrapper`]
+    className: styles$c[`${baseClass$i}__wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$9}__header`]
-  }, header), /* @__PURE__ */ React.createElement("div", null, children), shouldRenderSmallOrMediumFooter && footer), shouldRenderLargeFooter && footer), onClose && /* @__PURE__ */ React.createElement("button", {
+    className: styles$c[`${baseClass$i}__header`]
+  }, header), /* @__PURE__ */ React.createElement("div", null, children), containerSize !== "large" && footer), containerSize === "large" && footer), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$7[`${baseClass$9}__close-icon`],
+    className: styles$c[`${baseClass$i}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
-    size: IconSizeName.Large
+    size: "large"
   })));
 };
-var styles$6 = {
+var styles$b = {
   "radio-button": "lc-RadioButton-module__radio-button___WaToM",
   "radio-button__label": "lc-RadioButton-module__radio-button__label___i7ygg",
   "radio-button__circle": "lc-RadioButton-module__radio-button__circle___wimWA",
@@ -1589,79 +3057,186 @@ var styles$6 = {
   "radio-button--selected": "lc-RadioButton-module__radio-button--selected___s9lqj",
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
-const baseClass$8 = "radio-button";
-const RadioButton = (_O) => {
-  var _P = _O, {
-    children,
-    className = "",
-    description,
-    checked,
-    disabled
-  } = _P, props = __objRest(_P, [
-    "children",
-    "className",
-    "description",
-    "checked",
-    "disabled"
-  ]);
-  const mergedClassNames = cx(styles$6[baseClass$8], className, {
-    [styles$6[`${baseClass$8}--selected`]]: checked,
-    [styles$6[`${baseClass$8}--disabled`]]: disabled
+const baseClass$h = "radio-button";
+const RadioButton = React.forwardRef((_O, ref) => {
+  var _P = _O, { children, className = "", description, checked, disabled } = _P, props = __objRest(_P, ["children", "className", "description", "checked", "disabled"]);
+  const mergedClassNames = cx(styles$b[baseClass$h], className, {
+    [styles$b[`${baseClass$h}--selected`]]: checked,
+    [styles$b[`${baseClass$h}--disabled`]]: disabled
   });
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$6[`${baseClass$8}__label`]
+    className: styles$b[`${baseClass$h}__label`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$6[`${baseClass$8}__circle`]
+    className: styles$b[`${baseClass$h}__circle`]
   }, /* @__PURE__ */ React.createElement("span", {
-    className: styles$6[`${baseClass$8}__inner-circle`]
-  }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({
-    className: styles$6[`${baseClass$8}__input`]
-  }, props), {
+    className: styles$b[`${baseClass$h}__inner-circle`]
+  }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
+    className: styles$b[`${baseClass$h}__input`],
+    ref,
     type: "radio",
     checked,
     disabled
-  }))), /* @__PURE__ */ React.createElement(Text, {
+  }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$6[`${baseClass$8}__text`]
+    className: styles$b[`${baseClass$h}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$6[`${baseClass$8}__helper`]
+    className: styles$b[`${baseClass$h}__helper`]
   }, description));
+});
+var styles$a = {
+  "search-input": "lc-Search-module__search-input___FsbCk",
+  "search-input--compact": "lc-Search-module__search-input--compact___498To",
+  "search-input--medium": "lc-Search-module__search-input--medium___Hwteg",
+  "search-input--large": "lc-Search-module__search-input--large___-IBuC",
+  "search-input--focused": "lc-Search-module__search-input--focused___i2eul",
+  "search-input--disabled": "lc-Search-module__search-input--disabled___LSJ2e",
+  "search-input--collapsable": "lc-Search-module__search-input--collapsable___5GaIH",
+  "search-input__search-icon": "lc-Search-module__search-input__search-icon___BBQoD",
+  "search-input--collapsable--open": "lc-Search-module__search-input--collapsable--open___vqTpD",
+  "search-input__clear-icon": "lc-Search-module__search-input__clear-icon___LoNkc",
+  "search-input__loader": "lc-Search-module__search-input__loader___pkpIG",
+  "search-input__input": "lc-Search-module__search-input__input___OhyTr"
+};
+const baseClass$g = "search-input";
+const inputBaseClass = `${baseClass$g}__input`;
+const SearchInput = ({
+  isCollapsable,
+  isDisabled,
+  isLoading,
+  placeholder = "Search ...",
+  size = "medium",
+  value,
+  className,
+  onChange
+}) => {
+  const [isCollapsed, setIsCollapsed] = React.useState(true);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const isCloseIconVisible = !!value && !isDisabled && !isLoading;
+  const ariaExpandedValue = isCollapsable && !isCollapsed && "true";
+  const mergedClassNames = cx(className, styles$a[baseClass$g], styles$a[`${baseClass$g}--${size}`], isFocused && styles$a[`${baseClass$g}--focused`], isDisabled && styles$a[`${baseClass$g}--disabled`], isCollapsable && styles$a[`${baseClass$g}--collapsable`], !isCollapsed && styles$a[`${baseClass$g}--collapsable--open`]);
+  React.useEffect(() => {
+    if (isCollapsable && !!value) {
+      setIsCollapsed(false);
+    }
+  }, [isCollapsable]);
+  const handleOnChange = (e) => {
+    const value2 = e.currentTarget.value;
+    onChange(value2);
+  };
+  const handleClear = () => {
+    onChange("");
+  };
+  const handleClick = () => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleFocus = () => {
+    if (isCollapsable) {
+      setIsCollapsed(false);
+    }
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    if (isCollapsable && !value) {
+      setIsCollapsed(true);
+    }
+    setIsFocused(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === KeyCodes.enter) {
+      e.preventDefault();
+      onChange(value);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    "aria-expanded": ariaExpandedValue,
+    role: "search",
+    className: mergedClassNames,
+    onClick: handleClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    className: styles$a[`${baseClass$g}__search-icon`],
+    source: Search,
+    disabled: isDisabled,
+    kind: "primary"
+  }), /* @__PURE__ */ React.createElement("input", {
+    role: "searchbox",
+    ref: inputRef,
+    className: styles$a[inputBaseClass],
+    type: "text",
+    value,
+    placeholder,
+    onChange: handleOnChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    disabled: isDisabled
+  }), isCloseIconVisible && /* @__PURE__ */ React.createElement("button", {
+    "aria-label": "Clear search",
+    title: "Clear search",
+    className: styles$a[`${baseClass$g}__clear-icon`],
+    onClick: handleClear
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close,
+    kind: "primary"
+  })), isLoading && /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${baseClass$g}-loader`,
+    className: styles$a[`${baseClass$g}__loader`]
+  }, /* @__PURE__ */ React.createElement(Loader, {
+    size: "small"
+  })));
 };
 const switch__input = "lc-Switch-module__switch__input___NiiOR";
 const switch__container = "lc-Switch-module__switch__container___79F7W";
 const switch__track = "lc-Switch-module__switch__track___2wr2M";
 const switch__slider = "lc-Switch-module__switch__slider___WHd--";
-var styles$5 = {
+const switch__loader = "lc-Switch-module__switch__loader___FE-fA";
+const switch__icon = "lc-Switch-module__switch__icon___-O1qY";
+var styles$9 = {
   "switch": "lc-Switch-module__switch___AaA2k",
   "switch__track--enabled": "lc-Switch-module__switch__track--enabled___sy4Xl",
-  "switch__track--disabled": "lc-Switch-module__switch__track--disabled___HkDhl",
-  "switch--basic": "lc-Switch-module__switch--basic___jKO4n",
+  "switch__track--on": "lc-Switch-module__switch__track--on___aOMWe",
+  "switch__track--off": "lc-Switch-module__switch__track--off___NAisj",
+  "switch--large": "lc-Switch-module__switch--large___pSoJ7",
   "switch--compact": "lc-Switch-module__switch--compact___OGFIX",
+  "switch--medium": "lc-Switch-module__switch--medium___EcZwT",
   switch__input,
+  "switch__input--disabled": "lc-Switch-module__switch__input--disabled___Po8gh",
   switch__container,
   switch__track,
+  "switch__track--disabled": "lc-Switch-module__switch__track--disabled___HkDhl",
   switch__slider,
-  "switch__slider--basic": "lc-Switch-module__switch__slider--basic___OMKTp",
-  "switch__slider--basic--enabled": "lc-Switch-module__switch__slider--basic--enabled___sh9jo",
-  "switch__slider--basic--disabled": "lc-Switch-module__switch__slider--basic--disabled___GSTO9",
+  "switch__slider--large": "lc-Switch-module__switch__slider--large___WoEgi",
+  "switch__slider--large--on": "lc-Switch-module__switch__slider--large--on___7Qp3G",
+  "switch__slider--large--off": "lc-Switch-module__switch__slider--large--off___iRMmD",
   "switch__slider--compact": "lc-Switch-module__switch__slider--compact___uZ-lS",
-  "switch__slider--compact--enabled": "lc-Switch-module__switch__slider--compact--enabled___04TFA",
-  "switch__slider--compact--disabled": "lc-Switch-module__switch__slider--compact--disabled___Vqznr"
+  "switch__slider--compact--on": "lc-Switch-module__switch__slider--compact--on___FykE3",
+  "switch__slider--compact--off": "lc-Switch-module__switch__slider--compact--off___s5yR8",
+  "switch__slider--medium": "lc-Switch-module__switch__slider--medium___uhptz",
+  "switch__slider--medium--on": "lc-Switch-module__switch__slider--medium--on___SfeAV",
+  "switch__slider--medium--off": "lc-Switch-module__switch__slider--medium--off___eXJJz",
+  switch__loader,
+  "switch__loader--compact": "lc-Switch-module__switch__loader--compact___3imUh",
+  "switch__loader--medium": "lc-Switch-module__switch__loader--medium___2zi05",
+  "switch__loader--large": "lc-Switch-module__switch__loader--large___vLRFa",
+  switch__icon
 };
-const baseClass$7 = "switch";
+const baseClass$f = "switch";
 const Switch = (_Q) => {
   var _R = _Q, {
     className = "",
     defaultOn = false,
     disabled = false,
-    name = baseClass$7,
+    name = baseClass$f,
     on,
     onChange = noop,
-    size = "basic",
-    innerRef
+    size = "large",
+    state = "regular",
+    innerRef,
+    ariaLabel
   } = _R, props = __objRest(_R, [
     "className",
     "defaultOn",
@@ -1670,211 +3245,130 @@ const Switch = (_Q) => {
     "on",
     "onChange",
     "size",
-    "innerRef"
+    "state",
+    "innerRef",
+    "ariaLabel"
   ]);
-  const getEnabledValue = () => {
-    return on !== void 0 ? on : defaultOn;
-  };
-  const [enabled, setEnabled] = React.useState(getEnabledValue());
+  const [checked, setChecked] = React.useState(() => on !== void 0 ? on : defaultOn);
   React.useEffect(() => {
     if (on !== void 0) {
-      setEnabled(on);
+      setChecked(on);
     }
   }, [on]);
-  const valueStyles = enabled ? "enabled" : "disabled";
-  const mergedClassNames = cx(styles$5[baseClass$7], styles$5[`${baseClass$7}--${size}`], className);
+  const isLoading = state === "loading";
+  const isLocked = state === "locked";
+  const iconSize = size === "large" ? "small" : "xsmall";
+  const toggleStyles = checked ? "on" : "off";
+  const shouldBehaveAsDisabled = disabled || isLoading || isLocked;
+  const availabilityStyles = shouldBehaveAsDisabled ? "disabled" : "enabled";
+  const mergedClassNames = cx(styles$9[baseClass$f], styles$9[`${baseClass$f}--${size}`], className);
   const handleChange = (e) => {
     const hasOnChangePassed = onChange !== noop;
-    if (hasOnChangePassed) {
-      onChange(e, enabled);
-      return;
-    }
-    e.stopPropagation();
-    setEnabled((prevEnabled) => !prevEnabled);
-  };
-  return /* @__PURE__ */ React.createElement("span", {
-    className: mergedClassNames
-  }, /* @__PURE__ */ React.createElement("input", __spreadValues({
-    type: "checkbox",
-    className: styles$5[`${baseClass$7}__input`],
-    onChange: handleChange,
-    checked: enabled,
-    name,
-    ref: innerRef,
-    disabled,
-    "test-id": "foo"
-  }, props)), /* @__PURE__ */ React.createElement("span", {
-    className: styles$5[`${baseClass$7}__container`]
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$5[`${baseClass$7}__track`], styles$5[`${baseClass$7}__track--${valueStyles}`])
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$5[`${baseClass$7}__slider`], styles$5[`${baseClass$7}__slider--${size}`], styles$5[`${baseClass$7}__slider--${size}--${valueStyles}`])
-  })));
-};
-const tab = "lc-Tab-module__tab___fME7u";
-const tab__description = "lc-Tab-module__tab__description___JGXU6";
-var styles$4 = {
-  tab,
-  tab__description,
-  "tab--selected": "lc-Tab-module__tab--selected___c0EkL"
-};
-const baseClass$6 = "tab";
-const Tab = (_S) => {
-  var _T = _S, {
-    children,
-    className,
-    description,
-    isSelected
-  } = _T, restProps = __objRest(_T, [
-    "children",
-    "className",
-    "description",
-    "isSelected"
-  ]);
-  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({}, restProps), {
-    as: restProps.href ? "a" : "button",
-    size: "md",
-    bold: isSelected,
-    className: cx(styles$4[baseClass$6], className, isSelected && styles$4[`${baseClass$6}--selected`])
-  }), children, description && /* @__PURE__ */ React.createElement(Text, {
-    as: "span",
-    size: "md",
-    className: styles$4[`${baseClass$6}__description`]
-  }, "(", description, ")"));
-};
-const tabs = "lc-TabsWrapper-module__tabs___Y2xyD";
-const tabs__list = "lc-TabsWrapper-module__tabs__list___i6tVO";
-var styles$3 = {
-  tabs,
-  tabs__list
-};
-const baseClass$5 = "tabs";
-const TabsWrapper = ({
-  className,
-  children
-}) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$3[baseClass$5], className)
-  }, children);
-};
-const TabsList = ({
-  className,
-  children
-}) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$3[`${baseClass$5}__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$2 = {
-  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$4 = "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,
-    customColor
-  } = _V, restProps = __objRest(_V, [
-    "className",
-    "children",
-    "dismissible",
-    "size",
-    "kind",
-    "onRemove",
-    "outline",
-    "icon",
-    "avatar",
-    "customColor"
-  ]);
-  const mergedClassNames = cx(styles$2[baseClass$4], className, styles$2[`${baseClass$4}--${size}`], styles$2[`${baseClass$4}--${kind}`], {
-    [styles$2[`${baseClass$4}--dismissible`]]: dismissible,
-    [styles$2[`${baseClass$4}--outline`]]: outline,
-    [styles$2[`${baseClass$4}--with-icon`]]: !!icon2 || !!avatar,
-    [styles$2[`${baseClass$4}--${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"
-  }), avatar && /* @__PURE__ */ React.createElement("img", {
-    className: styles$2[`${baseClass$4}__avatar`],
-    src: avatar,
-    alt: "tag-avatar",
-    "data-testid": "lc-tag-avatar"
-  }), " ", icon2 && !avatar && /* @__PURE__ */ React.createElement(Icon, {
-    "data-testid": "lc-tag-icon",
-    className: styles$2[`${baseClass$4}__icon`],
-    source: icon2,
-    size: IconSizeName.Small,
-    customColor: getIconCustomColor()
-  }), children, dismissible && /* @__PURE__ */ React.createElement("button", {
-    title: "Remove",
-    onClick: onRemove,
-    type: "button",
-    className: styles$2[`${baseClass$4}__remove`]
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    source: Close,
-    size: IconSizeName.Medium,
-    customColor: getIconCustomColor()
-  })));
+    if (hasOnChangePassed) {
+      onChange(e, checked);
+      return;
+    }
+    e.stopPropagation();
+    setChecked((prevEnabled) => !prevEnabled);
+  };
+  return /* @__PURE__ */ React.createElement("span", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("input", __spreadValues({
+    type: "checkbox",
+    className: cx(styles$9[`${baseClass$f}__input`], styles$9[`${baseClass$f}__input--${availabilityStyles}`]),
+    onChange: handleChange,
+    checked,
+    name,
+    ref: innerRef,
+    disabled: shouldBehaveAsDisabled,
+    "aria-label": ariaLabel
+  }, props)), /* @__PURE__ */ React.createElement("span", {
+    className: styles$9[`${baseClass$f}__container`]
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: cx(styles$9[`${baseClass$f}__track`], styles$9[`${baseClass$f}__track--${toggleStyles}`], styles$9[`${baseClass$f}__track--${availabilityStyles}`])
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: cx(styles$9[`${baseClass$f}__slider`], styles$9[`${baseClass$f}__slider--${size}`], styles$9[`${baseClass$f}__slider--${size}--${toggleStyles}`])
+  }, isLoading && /* @__PURE__ */ React.createElement(Loader, {
+    className: cx(styles$9[`${baseClass$f}__loader`], styles$9[`${baseClass$f}__loader--${size}`])
+  }), isLocked && /* @__PURE__ */ React.createElement(Icon, {
+    className: styles$9[`${baseClass$f}__icon`],
+    "data-testid": "lock-icon",
+    size: iconSize,
+    source: LockBlack,
+    kind: "primary"
+  }))));
+};
+const tab = "lc-Tab-module__tab___fME7u";
+const tab__count = "lc-Tab-module__tab__count___gc8tA";
+const tab__badge = "lc-Tab-module__tab__badge___W9c-T";
+var styles$8 = {
+  tab,
+  tab__count,
+  "tab--compact": "lc-Tab-module__tab--compact___4qead",
+  "tab--medium": "lc-Tab-module__tab--medium___bHnGV",
+  "tab--large": "lc-Tab-module__tab--large___JL30g",
+  tab__badge,
+  "tab--selected": "lc-Tab-module__tab--selected___c0EkL",
+  "tab--disabled": "lc-Tab-module__tab--disabled___URdTh"
+};
+const baseClass$e = "tab";
+const Tab = (_S) => {
+  var _T = _S, {
+    children,
+    className,
+    count,
+    isSelected,
+    asBadge,
+    size = "medium"
+  } = _T, restProps = __objRest(_T, [
+    "children",
+    "className",
+    "count",
+    "isSelected",
+    "asBadge",
+    "size"
+  ]);
+  const { disabled } = restProps;
+  const shouldDisplayAsCounter = count !== void 0 && !asBadge;
+  const shouldDisplayAsBadge = count !== void 0 && asBadge;
+  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({}, restProps), {
+    as: restProps.href ? "a" : "button",
+    size: "md",
+    bold: isSelected,
+    className: cx(className, styles$8[baseClass$e], styles$8[`${baseClass$e}--${size}`], isSelected && styles$8[`${baseClass$e}--selected`], disabled && styles$8[`${baseClass$e}--disabled`])
+  }), children, shouldDisplayAsCounter && /* @__PURE__ */ React.createElement(Text, {
+    as: "span",
+    size: "md",
+    className: styles$8[`${baseClass$e}__count`]
+  }, "(", count, ")"), shouldDisplayAsBadge && /* @__PURE__ */ React.createElement(Badge, {
+    "data-testid": "tab-badge",
+    count,
+    size: "compact",
+    className: styles$8[`${baseClass$e}__badge`]
+  }));
+};
+const tabs = "lc-TabsWrapper-module__tabs___Y2xyD";
+const tabs__list = "lc-TabsWrapper-module__tabs__list___i6tVO";
+var styles$7 = {
+  tabs,
+  tabs__list
+};
+const baseClass$d = "tabs";
+const TabsWrapper = ({
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$7[baseClass$d], className)
+  }, children);
+};
+const TabsList = ({
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$7[`${baseClass$d}__list`], className)
+  }, children);
 };
 const EditableTagContent = ({
   className = "",
@@ -1933,7 +3427,7 @@ const EditableTagContent = ({
     dangerouslySetInnerHTML: { __html: escape(value) }
   });
 };
-var styles$1 = {
+var styles$6 = {
   "tag-input": "lc-TagInput-module__tag-input___CLVY-",
   "tag-input--error": "lc-TagInput-module__tag-input--error___RP0SB",
   "tag-input__input": "lc-TagInput-module__tag-input__input___dgEYB",
@@ -1941,7 +3435,7 @@ var styles$1 = {
   "tag-input__input--large": "lc-TagInput-module__tag-input__input--large___G6iEO",
   "tag-input__tag__content": "lc-TagInput-module__tag-input__tag__content___x95-M"
 };
-const baseClass$3 = "tag-input__tag";
+const baseClass$c = "tag-input__tag";
 const EditableTag = ({
   children,
   index: index2,
@@ -1965,13 +3459,13 @@ const EditableTag = ({
     value: children,
     inputRef,
     innerEditableRef,
-    className: styles$1[`${baseClass$3}__content`],
+    className: styles$6[`${baseClass$c}__content`],
     change: (newValue) => update(index2, newValue),
     remove: removeTag,
     validator
   }));
 };
-const baseClass$2 = "tag-input";
+const baseClass$b = "tag-input";
 const tagSeparatorKeys = [
   KeyCodes.enter,
   KeyCodes.spacebar,
@@ -1981,6 +3475,7 @@ const tagSeparatorKeys = [
 ];
 const tagRemoveKeys = [KeyCodes.backspace, KeyCodes.delete];
 const TagInput = ({
+  id,
   tags,
   onChange,
   validator,
@@ -1988,10 +3483,10 @@ const TagInput = ({
   placeholder,
   size = "medium"
 }) => {
-  const mergedClassNames = cx(styles$1[baseClass$2], {
-    [styles$1[`${baseClass$2}--error`]]: error
+  const mergedClassNames = cx(styles$6[baseClass$b], {
+    [styles$6[`${baseClass$b}--error`]]: error
   });
-  const inputClassNames = cx(styles$1[`${baseClass$2}__input`], styles$1[`${baseClass$2}__input--${size}`]);
+  const inputClassNames = cx(styles$6[`${baseClass$b}__input`], styles$6[`${baseClass$b}__input--${size}`]);
   const [inputValue, setInputValue] = React.useState("");
   const inputRef = React.useRef(null);
   const addTag = (value) => {
@@ -2045,6 +3540,7 @@ const TagInput = ({
     validator,
     size
   }, tag2)), /* @__PURE__ */ React.createElement("input", {
+    id,
     ref: inputRef,
     className: inputClassNames,
     placeholder,
@@ -2060,6 +3556,7 @@ const emailValidator = (value) => {
   return emailRegex.test(value);
 };
 const EmailTagInput = ({
+  id,
   tags,
   onChange,
   error,
@@ -2067,6 +3564,7 @@ const EmailTagInput = ({
   size
 }) => {
   return /* @__PURE__ */ React.createElement(TagInput, {
+    id,
     tags,
     error,
     onChange,
@@ -2077,18 +3575,13 @@ const EmailTagInput = ({
 };
 const toast = "lc-Toast-module__toast___j5Amn";
 const toast__content = "lc-Toast-module__toast__content___HjaNw";
-const toast__icon = "lc-Toast-module__toast__icon___wLbLu";
-const toast__close = "lc-Toast-module__toast__close___O18Lh";
 const toast__actions = "lc-Toast-module__toast__actions___JWu-1";
-var styles = {
+var styles$5 = {
   toast,
   toast__content,
-  toast__icon,
-  toast__close,
   toast__actions,
-  "toast__actions-close": "lc-Toast-module__toast__actions-close___xN8YT",
-  "toast__actions-custom": "lc-Toast-module__toast__actions-custom___z1UUf",
-  "toast--notification": "lc-Toast-module__toast--notification___pDXnc",
+  "toast__actions--close": "lc-Toast-module__toast__actions--close___QuXHY",
+  "toast__actions--custom": "lc-Toast-module__toast__actions--custom___lm-pM",
   "toast--success": "lc-Toast-module__toast--success___7UC6m",
   "toast--warning": "lc-Toast-module__toast--warning___pteb7",
   "toast--error": "lc-Toast-module__toast--error___trg--",
@@ -2110,86 +3603,73 @@ var styles = {
   "toast-exit--fade": "lc-Toast-module__toast-exit--fade___iDA1p",
   "toast-exit-active--fade": "lc-Toast-module__toast-exit-active--fade___tL7sb"
 };
-const baseClass$1 = "toast";
-var Variants = /* @__PURE__ */ ((Variants2) => {
-  Variants2["Success"] = "success";
-  Variants2["Warning"] = "warning";
-  Variants2["Error"] = "error";
-  Variants2["Info"] = "info";
-  Variants2["Notification"] = "notification";
-  return Variants2;
-})(Variants || {});
-const IconConfig = {
-  ["success"]: {
+const iconConfig = {
+  success: {
     source: CheckCircleSolid,
-    iconType: IconTypeName.Inverted
+    kind: "inverted"
   },
-  ["warning"]: {
+  warning: {
     source: Warning
   },
-  ["error"]: {
-    source: Error2,
-    iconType: IconTypeName.Inverted
-  },
-  ["info"]: {
-    source: Info,
-    iconType: IconTypeName.Inverted
+  error: {
+    source: Block,
+    kind: "inverted"
   },
-  ["notification"]: {
-    source: Info,
-    iconType: IconTypeName.Link
+  info: {
+    source: Info$1
   }
 };
-const Toast = ({
-  action,
-  className,
-  children,
-  removable,
-  variant = "info",
-  onClose
-}) => {
-  const mergedClassNames = cx(styles[baseClass$1], styles[`${baseClass$1}--${variant}`], className);
+const baseClass$a = "toast";
+const Toast = (_U) => {
+  var _V = _U, {
+    action,
+    className,
+    children,
+    removable,
+    kind = "info",
+    onClose
+  } = _V, divProps = __objRest(_V, [
+    "action",
+    "className",
+    "children",
+    "removable",
+    "kind",
+    "onClose"
+  ]);
+  const mergedClassNames = cx(styles$5[baseClass$a], styles$5[`${baseClass$a}--${kind}`], className);
   const onActionClick = (action2) => {
-    if (action2 && action2.closeOnClick && onClose) {
-      action2.handler();
+    if (action2 && action2.closesOnClick && onClose) {
+      action2.onClick();
       return onClose();
     }
-    return action2.handler();
+    return action2.onClick();
   };
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: mergedClassNames
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$1}__icon`]
-  }, /* @__PURE__ */ React.createElement(Icon, __spreadValues({}, IconConfig[variant]))), /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$1}__content`]
+  }, divProps), /* @__PURE__ */ React.createElement("div", {
+    className: styles$5[`${baseClass$a}__icon`]
+  }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, iconConfig[kind]), {
+    size: "medium"
+  }))), /* @__PURE__ */ React.createElement("div", {
+    className: styles$5[`${baseClass$a}__content`]
   }, children), (action || removable) && /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$1}__actions`]
-  }, action && /* @__PURE__ */ React.createElement("button", {
-    className: styles[`${baseClass$1}__actions-custom`],
+    className: styles$5[`${baseClass$a}__actions`]
+  }, action && /* @__PURE__ */ React.createElement(Button, {
+    className: styles$5[`${baseClass$a}__actions--custom`],
+    kind: "plain",
     onClick: () => onActionClick(action)
   }, action.label), removable && /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$1}__actions-close`],
+    className: styles$5[`${baseClass$a}__actions--close`],
     "aria-label": "Close toast",
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
-    size: IconSizeName.Small,
-    iconType: ["warning", "notification"].includes(variant) ? IconTypeName.Primary : IconTypeName.Inverted
+    size: "medium",
+    kind: ["warning", "info"].includes(kind) ? "primary" : "inverted"
   }))));
 };
-var HorizontalPosition = /* @__PURE__ */ ((HorizontalPosition2) => {
-  HorizontalPosition2["Left"] = "left";
-  HorizontalPosition2["Center"] = "center";
-  HorizontalPosition2["Right"] = "right";
-  return HorizontalPosition2;
-})(HorizontalPosition || {});
-var VerticalPosition = /* @__PURE__ */ ((VerticalPosition2) => {
-  VerticalPosition2["Top"] = "top";
-  VerticalPosition2["Bottom"] = "bottom";
-  return VerticalPosition2;
-})(VerticalPosition || {});
 const ANIMATION_TIME = 200;
-const baseClass = "toast-wrapper";
+const baseClass$9 = "toast-wrapper";
 const ToastWrapper = ({
   className,
   toasts = [],
@@ -2199,30 +3679,737 @@ const ToastWrapper = ({
   verticalPosition = "top",
   horizontalPosition = "center"
 }) => {
-  const mergedClassNames = cx(styles[baseClass], {
-    [styles[`${baseClass}--fixed`]]: fixed,
-    [styles[`${baseClass}--block`]]: !fixed && block,
-    [styles[`${baseClass}--horizontal-${horizontalPosition}`]]: horizontalPosition,
-    [styles[`${baseClass}--vertical-${verticalPosition}`]]: verticalPosition
+  const mergedClassNames = cx(styles$5[baseClass$9], {
+    [styles$5[`${baseClass$9}--fixed`]]: fixed,
+    [styles$5[`${baseClass$9}--block`]]: !fixed && block,
+    [styles$5[`${baseClass$9}--horizontal-${horizontalPosition}`]]: horizontalPosition,
+    [styles$5[`${baseClass$9}--vertical-${verticalPosition}`]]: verticalPosition
   }, className);
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement(TransitionGroup, {
     component: null
-  }, toasts.map(({ id, variant, content, removable, action, onClose }) => /* @__PURE__ */ React.createElement(CSSTransition, {
+  }, toasts.map(({ id, kind, content, removable, action, onClose }) => /* @__PURE__ */ React.createElement(CSSTransition, {
     key: id,
     classNames: {
-      enter: styles[`toast-appear--${animationType}`],
-      enterActive: styles[`toast-appear-active--${animationType}`],
-      exit: styles[`toast-exit--${animationType}`],
-      exitActive: styles[`toast-exit-active--${animationType}`]
+      enter: styles$5[`toast-appear--${animationType}`],
+      enterActive: styles$5[`toast-appear-active--${animationType}`],
+      exit: styles$5[`toast-exit--${animationType}`],
+      exitActive: styles$5[`toast-exit-active--${animationType}`]
     },
     timeout: ANIMATION_TIME
   }, /* @__PURE__ */ React.createElement(Toast, {
-    variant,
+    kind,
     onClose,
     removable,
     action
   }, content)))));
 };
-export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, CheckboxField, DesignTokens, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormGroup, Heading, HorizontalPosition, Icon, IconSizeName, IconTypeName, InputField, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, NumericInputField, Popover, ProgressCircle, PromoBanner, RadioButton, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, TextField, Toast, ToastWrapper, Variants, VerticalPosition };
+const tooltip = "lc-Tooltip-module__tooltip___QOOAr";
+const tooltip__arrow = "lc-Tooltip-module__tooltip__arrow___Ov1YW";
+var styles$4 = {
+  tooltip,
+  "tooltip--invert": "lc-Tooltip-module__tooltip--invert___PVjhE",
+  "tooltip--important": "lc-Tooltip-module__tooltip--important___X-IMK",
+  tooltip__arrow,
+  "tooltip-header": "lc-Tooltip-module__tooltip-header___QV0Vd",
+  "tooltip-image": "lc-Tooltip-module__tooltip-image___Aorwg",
+  "tooltip-text": "lc-Tooltip-module__tooltip-text___FB8OV",
+  "tooltip-close": "lc-Tooltip-module__tooltip-close___3r3h9",
+  "tooltip-step": "lc-Tooltip-module__tooltip-step___-j0n8",
+  "guide-tooltip--slide": "lc-Tooltip-module__guide-tooltip--slide___Uawm2",
+  "guide-tooltip__overlay": "lc-Tooltip-module__guide-tooltip__overlay___IyrKK",
+  "guide-tooltip__overlay--slide": "lc-Tooltip-module__guide-tooltip__overlay--slide___VW8oq",
+  "guide-tooltip__overlay--visible": "lc-Tooltip-module__guide-tooltip__overlay--visible___dbdsZ"
+};
+const sleep = (milliseconds) => {
+  return new Promise((resolve) => setTimeout(resolve, milliseconds));
+};
+const baseClass$8 = "tooltip";
+const Tooltip = (props) => {
+  const {
+    triggerRenderer,
+    referenceElement,
+    children,
+    className,
+    theme,
+    placement,
+    isVisible,
+    withFadeAnimation = true,
+    transitionDuration = 200,
+    transitionDelay = 0,
+    hoverOutDelayTimeout = 100,
+    offsetMainAxis = 8,
+    triggerOnClick = false,
+    arrowOffsetY,
+    arrowOffsetX,
+    onOpen,
+    onClose
+  } = props;
+  const isManaged = isVisible !== void 0;
+  const arrowRef = React.useRef(null);
+  const [visible, setVisibility] = React.useState(isVisible);
+  const isHovered = React.useRef(false);
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    update,
+    refs,
+    placement: updatedPlacement,
+    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }
+  } = useFloating({
+    middleware: [
+      offset({ mainAxis: offsetMainAxis }),
+      arrow({ element: arrowRef }),
+      flip()
+    ],
+    placement
+  });
+  React.useEffect(() => {
+    referenceElement && reference(referenceElement);
+  }, [reference, referenceElement]);
+  React.useEffect(() => {
+    setVisibility(isVisible);
+  }, [isVisible]);
+  React.useEffect(() => {
+    document.addEventListener("keydown", handleCloseAction);
+    return () => {
+      document.removeEventListener("keydown", handleCloseAction);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) {
+      return;
+    }
+    return autoUpdate(refs.reference.current, refs.floating.current, update);
+  }, [refs.reference, refs.floating, update, updatedPlacement, visible]);
+  const handleMouseLeave = () => {
+    if (triggerOnClick || isManaged)
+      return;
+    isHovered.current = false;
+    void sleep(hoverOutDelayTimeout).then(() => {
+      if (!isHovered.current) {
+        setVisibility(false);
+      }
+    });
+  };
+  const handleOpen = () => {
+    if (onOpen)
+      onOpen();
+    if (!isManaged) {
+      setVisibility(true);
+    }
+  };
+  const handleClose = () => {
+    if (onClose)
+      onClose();
+    if (!isManaged) {
+      setVisibility(false);
+    }
+  };
+  const handleMouseEnter = () => {
+    if (triggerOnClick || isManaged)
+      return;
+    isHovered.current = true;
+    setVisibility(true);
+  };
+  const handleCloseAction = (event) => {
+    if (event instanceof KeyboardEvent && event.key === "Escape") {
+      handleClose();
+    }
+    if (event.type === "click") {
+      handleClose();
+    }
+  };
+  const handleClick = () => {
+    if (isManaged)
+      return;
+    if (visible) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  };
+  const top = arrowOffsetY && arrowY ? arrowY + arrowOffsetY : arrowY;
+  const left = arrowOffsetX && arrowX ? arrowX + arrowOffsetX : arrowX;
+  const mergedClassNames = cx(styles$4[baseClass$8], className, {
+    [styles$4[`${baseClass$8}--invert`]]: theme === "invert",
+    [styles$4[`${baseClass$8}--important`]]: theme === "important"
+  });
+  const floatingComponent = /* @__PURE__ */ React.createElement("div", {
+    ref: floating,
+    style: {
+      position: strategy,
+      top: y != null ? y : "",
+      left: x != null ? x : ""
+    },
+    className: mergedClassNames,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, __spreadValues({
+        handleCloseAction,
+        theme
+      }, child.props));
+    }
+    return null;
+  }), /* @__PURE__ */ React.createElement("div", {
+    ref: arrowRef,
+    className: cx([styles$4[`${baseClass$8}__arrow`]]),
+    "data-arrow-placement": updatedPlacement,
+    style: { top, left }
+  }));
+  function renderFloatingComponent() {
+    if (withFadeAnimation) {
+      const enter = css`
+        opacity: 0;
+      `;
+      const enterActive = css`
+        opacity: 1;
+        transition-property: opacity;
+        transition-duration: ${transitionDuration}ms;
+        transition-delay: ${transitionDelay}ms;
+      `;
+      const exit = css`
+        opacity: 1;
+      `;
+      const exitActive = css`
+        opacity: 0;
+        transition-property: opacity;
+        transition-duration: ${transitionDuration}ms;
+        transition-delay: ${transitionDelay}ms;
+      `;
+      const timeout = transitionDuration + transitionDelay;
+      return /* @__PURE__ */ React.createElement(CSSTransition, {
+        in: visible,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        timeout,
+        classNames: {
+          enter,
+          enterActive,
+          exit,
+          exitActive
+        }
+      }, floatingComponent);
+    } else {
+      return visible && floatingComponent;
+    }
+  }
+  if (referenceElement) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, renderFloatingComponent());
+  }
+  const referenceOptions = () => {
+    if (!isManaged) {
+      if (triggerOnClick) {
+        return {
+          onClick: handleClick
+        };
+      } else {
+        return {
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave
+        };
+      }
+    }
+  };
+  const triggerElement = /* @__PURE__ */ React.createElement("div", __spreadValues({
+    ref: reference
+  }, referenceOptions()), triggerRenderer());
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, triggerElement, renderFloatingComponent());
+};
+const Simple = ({ text }) => {
+  return /* @__PURE__ */ React.createElement("div", null, text);
+};
+function getIconType(theme) {
+  switch (theme) {
+    case "invert":
+      return "inverted";
+    case "important":
+      return "subtle";
+    default:
+      return "primary";
+  }
+}
+const baseClass$7 = "tooltip";
+const Info = ({ header, text, closeWithX, theme, handleCloseAction }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { position: "relative" }
+  }, closeWithX && /* @__PURE__ */ React.createElement("div", {
+    className: styles$4[`${baseClass$7}-close`],
+    onClick: handleCloseAction
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close,
+    kind: theme ? getIconType(theme) : "primary"
+  })), header && /* @__PURE__ */ React.createElement("div", {
+    className: styles$4[`${baseClass$7}-header`]
+  }, header), /* @__PURE__ */ React.createElement("div", {
+    className: styles$4[`${baseClass$7}-text`]
+  }, text));
+};
+const baseClass$6 = "tooltip";
+const Interactive = ({
+  header,
+  text,
+  image,
+  closeWithX,
+  theme,
+  handleCloseAction,
+  handleClickPrimary,
+  handleClickSecondary
+}) => {
+  const decoration = theme === "invert" ? "underline" : "none";
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { width: "270px" }
+  }, /* @__PURE__ */ React.createElement("div", {
+    style: { position: "relative", height: "25px", marginBottom: "10px" }
+  }, closeWithX && /* @__PURE__ */ React.createElement("div", {
+    className: styles$4[`${baseClass$6}-close`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    onClick: handleCloseAction
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close,
+    kind: theme ? getIconType(theme) : "primary"
+  })))), image && /* @__PURE__ */ React.createElement("div", {
+    style: { margin: "0 4px" }
+  }, /* @__PURE__ */ React.createElement("img", {
+    className: styles$4[`${baseClass$6}-image`],
+    src: image.src,
+    alt: image.alt
+  })), header && /* @__PURE__ */ React.createElement("div", {
+    className: styles$4[`${baseClass$6}-header`]
+  }, header), /* @__PURE__ */ React.createElement("div", {
+    className: styles$4[`${baseClass$6}-text`]
+  }, text), /* @__PURE__ */ React.createElement("div", {
+    style: { margin: "4px" }
+  }, /* @__PURE__ */ React.createElement(Button, {
+    kind: "primary",
+    onClick: handleClickPrimary
+  }, "Primary button"), /* @__PURE__ */ React.createElement("div", {
+    onClick: handleClickSecondary,
+    style: {
+      cursor: "pointer",
+      display: "inline-block",
+      marginLeft: "16px",
+      textDecoration: decoration
+    }
+  }, "Link")));
+};
+const baseClass$5 = "guide-tooltip";
+const SpotlightOverlay = ({
+  gap,
+  isVisible,
+  slide,
+  disablePointerEvents
+}) => {
+  if (!gap)
+    return null;
+  const overlayLeft = {
+    top: `${gap.top}px`,
+    left: "0",
+    width: `${gap.left}px`,
+    height: `${gap.height}px`
+  };
+  const overlayRight = {
+    top: `${gap.top}px`,
+    left: `${gap.right}px`,
+    width: `calc(100% - ${gap.right}px)`,
+    height: `${gap.height}px`
+  };
+  const overlayTop = {
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: `${gap.top}px`
+  };
+  const overlayBottom = {
+    top: `${gap.bottom}px`,
+    left: "0",
+    width: "100%",
+    height: `calc(100% - ${gap.bottom}px)`
+  };
+  const spotlight = {
+    top: `${gap.top}px`,
+    left: `${gap.left}px`,
+    width: `${gap.width}px`,
+    height: `${gap.height}px`,
+    backgroundColor: "transparent"
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles$4[`${baseClass$5}__overlay`]]: true,
+      [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
+      [styles$4[`${baseClass$5}__overlay--slide`]]: slide
+    }),
+    style: overlayLeft
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles$4[`${baseClass$5}__overlay`]]: true,
+      [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
+      [styles$4[`${baseClass$5}__overlay--slide`]]: slide
+    }),
+    style: overlayTop
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles$4[`${baseClass$5}__overlay`]]: true,
+      [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
+      [styles$4[`${baseClass$5}__overlay--slide`]]: slide
+    }),
+    style: overlayRight
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles$4[`${baseClass$5}__overlay`]]: true,
+      [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
+      [styles$4[`${baseClass$5}__overlay--slide`]]: slide
+    }),
+    style: overlayBottom
+  }), disablePointerEvents && /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles$4[`${baseClass$5}__overlay`]]: true,
+      [styles$4[`${baseClass$5}__overlay--visible`]]: isVisible,
+      [styles$4[`${baseClass$5}__overlay--slide`]]: slide
+    }),
+    style: spotlight
+  }));
+};
+class VirtualReference {
+  constructor(element, padding) {
+    __publicField(this, "element");
+    __publicField(this, "padding");
+    this.element = element;
+    this.padding = padding;
+  }
+  addPadding(rect) {
+    const x = Math.round(rect.left) - this.padding;
+    const y = Math.round(rect.top) - this.padding;
+    const width = Math.round(rect.width) + 2 * this.padding;
+    const height = Math.round(rect.height) + 2 * this.padding;
+    const top = y;
+    const left = x;
+    const bottom = top + height;
+    const right = left + width;
+    return {
+      x,
+      y,
+      width,
+      height,
+      top,
+      left,
+      bottom,
+      right
+    };
+  }
+  getBoundingClientRect() {
+    return this.addPadding(this.element.getBoundingClientRect());
+  }
+  get clientWidth() {
+    return this.getBoundingClientRect().width;
+  }
+  get clientHeight() {
+    return this.getBoundingClientRect().height;
+  }
+}
+const spotlightPadding = 8;
+const baseClass$4 = "guide-tooltip";
+const virtualReference = (element, padding) => new VirtualReference(element, padding);
+const UserGuide = (props) => {
+  const {
+    className,
+    parentElementName,
+    isVisible = false,
+    shouldSlide = true
+  } = props;
+  const [parentElement, setParentElement] = React.useState(null);
+  const [rect, setRect] = React.useState(null);
+  const [isSliding, setIsSliding] = React.useState(shouldSlide);
+  const handleViewportChange = () => {
+    if (parentElement) {
+      setRect(virtualReference(parentElement, spotlightPadding).getBoundingClientRect());
+      setIsSliding(false);
+    }
+  };
+  React.useEffect(() => {
+    if (parentElement !== null) {
+      window.addEventListener("resize", handleViewportChange);
+      window.addEventListener("scroll", handleViewportChange);
+      return () => {
+        window.addEventListener("resize", handleViewportChange);
+        window.addEventListener("resize", handleViewportChange);
+      };
+    }
+  }, [parentElement, parentElementName]);
+  React.useEffect(() => {
+    if (parentElementName) {
+      const element = document.querySelector(parentElementName);
+      setParentElement(element);
+    }
+  }, [parentElementName]);
+  React.useEffect(() => {
+    parentElement && setRect(virtualReference(parentElement, spotlightPadding).getBoundingClientRect());
+    setIsSliding(true);
+  }, [parentElement]);
+  return parentElement && isVisible ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(SpotlightOverlay, {
+    gap: rect,
+    isVisible,
+    slide: isSliding,
+    disablePointerEvents: true
+  }), /* @__PURE__ */ React.createElement(Tooltip, __spreadProps(__spreadValues({}, props), {
+    referenceElement: {
+      getBoundingClientRect: () => {
+        return rect;
+      },
+      contextElement: parentElement
+    },
+    arrowOffsetY: 25,
+    className: cx({
+      [styles$4[baseClass$4]]: true,
+      [styles$4[`${baseClass$4}--slide`]]: isSliding,
+      className
+    })
+  }), props.children)) : null;
+};
+const textarea = "lc-Textarea-module__textarea___g6U8F";
+var styles$3 = {
+  textarea,
+  "textarea--focused": "lc-Textarea-module__textarea--focused___1vtEx",
+  "textarea--disabled": "lc-Textarea-module__textarea--disabled___xXaGv",
+  "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
+};
+const baseClass$3 = "textarea";
+const Textarea = React.forwardRef((_W, ref) => {
+  var _X = _W, { className, error } = _X, textareaProps = __objRest(_X, ["className", "error"]);
+  const { disabled } = textareaProps;
+  const [isFocused, setIsFocused] = React.useState(false);
+  const mergedClassNames = cx(className, styles$3[baseClass$3], {
+    [styles$3[`${baseClass$3}--disabled`]]: disabled,
+    [styles$3[`${baseClass$3}--focused`]]: isFocused,
+    [styles$3[`${baseClass$3}--error`]]: error
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("textarea", __spreadProps(__spreadValues({}, textareaProps), {
+    ref,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false)
+  })));
+});
+var styles$2 = {
+  "file-upload-progress": "lc-FileUploadProgress-module__file-upload-progress___xw8h8",
+  "file-upload-progress__icon": "lc-FileUploadProgress-module__file-upload-progress__icon___p8Rfz",
+  "file-upload-progress__wrapper": "lc-FileUploadProgress-module__file-upload-progress__wrapper___01Nkq",
+  "file-upload-progress__wrapper--with-icon": "lc-FileUploadProgress-module__file-upload-progress__wrapper--with-icon___GSXmA",
+  "file-upload-progress__wrapper__header": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header___mYBGK",
+  "file-upload-progress__wrapper__header__actions": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__actions___tvhB3",
+  "file-upload-progress__wrapper__header__title": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title___2IVuv",
+  "file-upload-progress__wrapper__header__title--success": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--success___E6DQl",
+  "file-upload-progress__wrapper__header__title--error": "lc-FileUploadProgress-module__file-upload-progress__wrapper__header__title--error___5BPpI"
+};
+var styles$1 = {
+  "file-upload-progress-actions": "lc-FileUploadProgressActions-module__file-upload-progress-actions___qOBr2",
+  "file-upload-progress-actions__close-button": "lc-FileUploadProgressActions-module__file-upload-progress-actions__close-button___Eh4um",
+  "file-upload-progress-actions__retry-button": "lc-FileUploadProgressActions-module__file-upload-progress-actions__retry-button___DqFEo"
+};
+const baseClass$2 = "file-upload-progress-actions";
+const FileUploadProgressActions = ({ status, onCloseButtonClick, onRetryButtonClick }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles$1[`${baseClass$2}`]
+  }, onRetryButtonClick && status === "error" && /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: styles$1[`${baseClass$2}__retry-button`],
+    "aria-label": "Retry",
+    onClick: onRetryButtonClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Refresh
+  })), onCloseButtonClick && status !== "success" && /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    className: styles$1[`${baseClass$2}__close-button`],
+    "aria-label": "Close",
+    onClick: onCloseButtonClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close
+  })));
+};
+const baseClass$1 = "file-upload-progress";
+const wrapperHeaderTitleClass = `${baseClass$1}__wrapper__header__title`;
+const FileUploadProgress = React.forwardRef(({
+  actionsVisibility = "hidden",
+  className,
+  icon: icon2,
+  title,
+  progressValue: percent,
+  size,
+  status = "normal",
+  onCloseButtonClick,
+  onRetryButtonClick
+}, ref) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: styles$2[baseClass$1],
+    ref
+  }, icon2 && status !== "success" && /* @__PURE__ */ React.createElement("div", {
+    className: styles$2[`${baseClass$1}__icon`]
+  }, icon2), status === "success" && /* @__PURE__ */ React.createElement("div", {
+    className: styles$2[`${baseClass$1}__icon`]
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Check,
+    kind: "success"
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$2[`${baseClass$1}__wrapper`], {
+      [styles$2[`${baseClass$1}__wrapper--with-icon`]]: icon2
+    })
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$2[`${baseClass$1}__wrapper__header`]
+  }, title && /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$2[wrapperHeaderTitleClass], {
+      [styles$2[`${wrapperHeaderTitleClass}--success`]]: status === "success",
+      [styles$2[`${wrapperHeaderTitleClass}--error`]]: status === "error"
+    })
+  }, title), actionsVisibility !== "hidden" && /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles$2[`${baseClass$1}__wrapper__header__actions`]]: actionsVisibility === "hover"
+    })
+  }, /* @__PURE__ */ React.createElement(FileUploadProgressActions, {
+    status,
+    onCloseButtonClick,
+    onRetryButtonClick
+  }))), status !== "success" && /* @__PURE__ */ React.createElement(ProgressBar, {
+    className,
+    percent,
+    status,
+    size
+  })));
+});
+var styles = {
+  "upload-bar": "lc-UploadBar-module__upload-bar___6Or8h",
+  "upload-bar--error": "lc-UploadBar-module__upload-bar--error___MzvhT",
+  "upload-bar__wrapper": "lc-UploadBar-module__upload-bar__wrapper___MAUeH",
+  "upload-bar__wrapper__header": "lc-UploadBar-module__upload-bar__wrapper__header___x9fen",
+  "upload-bar__wrapper__header__icon": "lc-UploadBar-module__upload-bar__wrapper__header__icon___Aetm5",
+  "upload-bar__wrapper__header__title": "lc-UploadBar-module__upload-bar__wrapper__header__title___BNuDu",
+  "upload-bar__wrapper__header__collapse-button": "lc-UploadBar-module__upload-bar__wrapper__header__collapse-button___3khMy",
+  "upload-bar__wrapper__header__actions-container": "lc-UploadBar-module__upload-bar__wrapper__header__actions-container___5Pj4y",
+  "upload-bar__files": "lc-UploadBar-module__upload-bar__files___3W4nx",
+  "upload-bar__files--enter": "lc-UploadBar-module__upload-bar__files--enter___zGq19",
+  "upload-bar__files--enter-active": "lc-UploadBar-module__upload-bar__files--enter-active___-dMVb",
+  "upload-bar__files--exit": "lc-UploadBar-module__upload-bar__files--exit___MXBRY",
+  "upload-bar__files--exit-active": "lc-UploadBar-module__upload-bar__files--exit-active___krGW5",
+  "upload-bar__files--exit-done": "lc-UploadBar-module__upload-bar__files--exit-done___2I72G",
+  "upload-bar__files-wrapper": "lc-UploadBar-module__upload-bar__files-wrapper___93bs8",
+  "upload-bar__files__list": "lc-UploadBar-module__upload-bar__files__list___QJFEq"
+};
+const baseClass = "upload-bar";
+const wrapperHeaderClass = `${baseClass}__wrapper__header`;
+const TRANSITION_TIMEOUT = 300;
+const getHeaderIcon = (status, progressValue) => {
+  if (status === "success") {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: styles[`${wrapperHeaderClass}__success-icon`]
+    }, /* @__PURE__ */ React.createElement(Icon, {
+      source: Check,
+      kind: "success"
+    }));
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: styles[`${wrapperHeaderClass}__error-icon`]
+    }, /* @__PURE__ */ React.createElement(Icon, {
+      source: Error2,
+      kind: "error"
+    }));
+  }
+  return /* @__PURE__ */ React.createElement(ProgressCircle, {
+    status,
+    progressValue,
+    size: "small"
+  });
+};
+const UploadBar = ({
+  children,
+  className,
+  progressValue,
+  title,
+  isExpanded,
+  errorMessage,
+  status = "normal",
+  icon: icon2,
+  size,
+  mode = "multiple",
+  onCloseButtonClick,
+  onRetryButtonClick
+}) => {
+  const [expanded, setExpanded] = React.useState(isExpanded || false);
+  const withError = status === "error";
+  const withSuccess = status === "success";
+  const mergedClassNames = cx(styles[baseClass], className, {
+    [styles[`${baseClass}--error`]]: withError,
+    [styles[`${baseClass}--success`]]: withSuccess
+  });
+  const shouldShowCollapseButton = !(withError && (onRetryButtonClick || onCloseButtonClick));
+  const handleOnWrapperClick = () => setExpanded(!expanded);
+  if (mode === "single") {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: mergedClassNames
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: styles[`${baseClass}__wrapper`]
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: styles[`${wrapperHeaderClass}`]
+    }, /* @__PURE__ */ React.createElement(FileUploadProgress, {
+      title: withError ? errorMessage || title : title,
+      progressValue,
+      status,
+      icon: icon2,
+      size
+    })), status === "error" && /* @__PURE__ */ React.createElement(FileUploadProgressActions, {
+      status,
+      onCloseButtonClick,
+      onRetryButtonClick
+    })));
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass}__wrapper`],
+    onClick: handleOnWrapperClick
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${wrapperHeaderClass}`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${wrapperHeaderClass}__icon`]
+  }, getHeaderIcon(status, progressValue)), /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${wrapperHeaderClass}__title`]
+  }, withError ? errorMessage || title : title), shouldShowCollapseButton && /* @__PURE__ */ React.createElement("button", {
+    className: styles[`${wrapperHeaderClass}__collapse-button`],
+    type: "button",
+    onClick: handleOnWrapperClick
+  }, expanded ? /* @__PURE__ */ React.createElement(Icon, {
+    source: ChevronUp
+  }) : /* @__PURE__ */ React.createElement(Icon, {
+    source: ChevronDown
+  })), status === "error" && /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${wrapperHeaderClass}__actions-container`]
+  }, /* @__PURE__ */ React.createElement(FileUploadProgressActions, {
+    status,
+    onCloseButtonClick,
+    onRetryButtonClick
+  })))), /* @__PURE__ */ React.createElement(TransitionGroup, {
+    component: null
+  }, expanded && /* @__PURE__ */ React.createElement(CSSTransition, {
+    timeout: TRANSITION_TIMEOUT,
+    classNames: {
+      enter: styles[`${baseClass}__files--enter`],
+      enterActive: styles[`${baseClass}__files--enter-active`],
+      exit: styles[`${baseClass}__files--exit`],
+      exitActive: styles[`${baseClass}__files--exit-active`],
+      exitDone: styles[`${baseClass}__files--exit-done`]
+    }
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass}__files`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass}__files-wrapper`]
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass}__files__list`]
+  }, children))))));
+};
+export { ANIMATION_TIME, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, FileUploadProgress, FileUploadProgressActions, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, PickerList, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Textarea, Toast, ToastWrapper, Tooltip, UploadBar, UserGuide };