@livechat/design-system-react-components 1.0.0-alpha.13 → 1.0.0-alpha.16

package/dist/dsrc.es.js

@@ -29,15 +29,20 @@ 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 cx from "clsx";
-import { Close, Info, Warning, CheckCircleSolid, Block, Check, ChevronUp, ChevronDown, Search, Error as Error2 } from "@livechat/design-system-icons/react/material";
+import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Check, ChevronUp, ChevronDown, Error as Error2, Search } from "@livechat/design-system-icons/react/material";
 import debounce from "lodash.debounce";
 import * as ReactDOM from "react-dom";
-import { useFloating, offset, flip, autoUpdate } from "@floating-ui/react-dom";
+import { useFloating, offset, flip, autoUpdate, arrow } from "@floating-ui/react-dom";
 import { getContrast } from "polished";
 import escape from "lodash.escape";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
+import { css } from "@emotion/css";
 var index = "";
 const DesignTokens = {
   Background: "--background",
@@ -166,7 +171,7 @@ const DesignTokens = {
   DecorPurple50: "--decor-purple50"
 };
 const caps = "lc-Typography-module__caps___c3eNJ";
-var styles$t = {
+var styles$x = {
   "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",
@@ -202,7 +207,7 @@ const Heading = (_a) => {
     "children",
     "className"
   ]);
-  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$t[`heading-${size}`], className) }, props), children);
+  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$x[`heading-${size}`], className) }, props), children);
 };
 const Text = (_c) => {
   var _d = _c, {
@@ -227,15 +232,15 @@ const Text = (_c) => {
   const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
   return React.createElement(as, __spreadValues({
     className: cx({
-      [styles$t[`${baseClassPrefix}`]]: true,
-      [styles$t[`${baseClassPrefix}--bold`]]: bold,
-      [styles$t[`${baseClassPrefix}--strike`]]: strike,
-      [styles$t[`${baseClassPrefix}--underline`]]: underline
+      [styles$x[`${baseClassPrefix}`]]: true,
+      [styles$x[`${baseClassPrefix}--bold`]]: bold,
+      [styles$x[`${baseClassPrefix}--strike`]]: strike,
+      [styles$x[`${baseClassPrefix}--underline`]]: underline
     }, className)
   }, props), children);
 };
 const icon$1 = "lc-Icon-module__icon___tw31R";
-var styles$s = {
+var styles$w = {
   icon: icon$1,
   "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
   "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
@@ -276,7 +281,7 @@ const IconSizeMap = {
     height: 32
   }
 };
-const baseClass$v = "icon";
+const baseClass$C = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
@@ -296,7 +301,7 @@ const Icon = (props) => {
   const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$s[baseClass$v], kind && styles$s[`${baseClass$v}--${disabled ? "disabled--" : ""}${kind}`]);
+  const mergedClassNames = cx(className, styles$w[baseClass$C], kind && styles$w[`${baseClass$C}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -304,7 +309,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$r = {
+var styles$v = {
   alert,
   alert__content,
   "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
@@ -320,7 +325,7 @@ var styles$r = {
 };
 const IconConfig$1 = {
   info: {
-    source: Info,
+    source: Info$1,
     kind: "link"
   },
   warning: {
@@ -336,7 +341,7 @@ const IconConfig$1 = {
     kind: "error"
   }
 };
-const baseClass$u = "alert";
+const baseClass$B = "alert";
 const Alert = ({
   children,
   className,
@@ -345,7 +350,7 @@ const Alert = ({
 }) => {
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$r[baseClass$u], styles$r[`${baseClass$u}--${kind}`], isSmallContainer && styles$r[`${baseClass$u}--small`], className);
+  const mergedClassNames = cx(styles$v[baseClass$B], styles$v[`${baseClass$B}--${kind}`], isSmallContainer && styles$v[`${baseClass$B}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -360,15 +365,15 @@ const Alert = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$r[`${baseClass$u}__content`]
+    className: styles$v[`${baseClass$B}__content`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig$1[kind]), {
-    className: styles$r[`${baseClass$u}__content-icon`]
+    className: styles$v[`${baseClass$B}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$r[`${baseClass$u}__content-text`], onClose && styles$r[`${baseClass$u}__content-text--margin`])
+    className: cx(styles$v[`${baseClass$B}__content-text`], onClose && styles$v[`${baseClass$B}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$r[`${baseClass$u}__close-icon`],
+    className: styles$v[`${baseClass$B}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
@@ -377,7 +382,7 @@ const Alert = ({
   })));
 };
 const badge = "lc-Badge-module__badge___GhLnu";
-var styles$q = {
+var styles$u = {
   badge,
   "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ"
 };
@@ -387,8 +392,8 @@ const Badge = ({
   secondary = false
 }) => {
   return /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$q.badge, className, {
-      [styles$q["badge--secondary"]]: secondary
+    className: cx(styles$u.badge, className, {
+      [styles$u["badge--secondary"]]: secondary
     })
   }, children);
 };
@@ -396,7 +401,7 @@ const loader = "lc-Loader-module__loader___LRflD";
 const loader__spinner = "lc-Loader-module__loader__spinner___l3C1g";
 const rotate = "lc-Loader-module__rotate___Tlni-";
 const loader__label = "lc-Loader-module__loader__label___R74f6";
-var styles$p = {
+var styles$t = {
   loader,
   loader__spinner,
   "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
@@ -406,8 +411,8 @@ var styles$p = {
   rotate,
   loader__label
 };
-const baseClass$t = "loader";
-const spinnerClass = `${baseClass$t}__spinner`;
+const baseClass$A = "loader";
+const spinnerClass = `${baseClass$A}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -416,11 +421,11 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$p[baseClass$t], className)
+    className: cx(styles$t[baseClass$A], className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$p[spinnerClass], styles$p[`${spinnerClass}--${size}`])
+    className: cx(styles$t[spinnerClass], styles$t[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$p["loader__spinner-circle"],
+    className: styles$t["loader__spinner-circle"],
     style: {
       borderColor: secondaryColor,
       borderTopColor: primaryColor
@@ -428,14 +433,14 @@ const Loader = ({
   })), label && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$p["loader__label"]
+    className: styles$t["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$o = {
+var styles$s = {
   btn: btn$1,
   "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
   "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
@@ -456,7 +461,7 @@ var styles$o = {
   btn__content,
   btn__icon
 };
-const baseClass$s = "btn";
+const baseClass$z = "btn";
 const Button = (_e) => {
   var _f = _e, {
     loading = false,
@@ -487,11 +492,11 @@ const Button = (_e) => {
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$o[baseClass$s], styles$o[`${baseClass$s}--${kind}`], styles$o[`${baseClass$s}--${size}`], {
-    [styles$o[`${baseClass$s}--loading`]]: loading,
-    [styles$o[`${baseClass$s}--full-width`]]: fullWidth,
-    [styles$o[`${baseClass$s}--icon-only`]]: !children && icon2,
-    [styles$o[`${baseClass$s}--disabled`]]: isDisabled
+  const mergedClassNames = cx(className, styles$s[baseClass$z], styles$s[`${baseClass$z}--${kind}`], styles$s[`${baseClass$z}--${size}`], {
+    [styles$s[`${baseClass$z}--loading`]]: loading,
+    [styles$s[`${baseClass$z}--full-width`]]: fullWidth,
+    [styles$s[`${baseClass$z}--icon-only`]]: !children && icon2,
+    [styles$s[`${baseClass$z}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
@@ -501,16 +506,16 @@ const Button = (_e) => {
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$o[`${baseClass$s}__loader`]
+    className: styles$s[`${baseClass$z}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$o[`${baseClass$s}__icon`], styles$o[`${baseClass$s}__icon--${iconPosition}`]),
+    className: cx(styles$s[`${baseClass$z}__icon`], styles$s[`${baseClass$z}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$o[`${baseClass$s}__content`]
+    className: styles$s[`${baseClass$z}__content`]
   }, children));
 };
 const btn = "lc-ButtonGroup-module__btn___bXPrU";
-var styles$n = {
+var styles$r = {
   "btn-group": "lc-ButtonGroup-module__btn-group___R-lZQ",
   btn,
   "btn--active": "lc-ButtonGroup-module__btn--active___VAc37",
@@ -520,7 +525,7 @@ var styles$n = {
 };
 function noop() {
 }
-const baseClass$r = "btn-group";
+const baseClass$y = "btn-group";
 const ButtonGroup = (_g) => {
   var _h = _g, {
     size = "medium",
@@ -539,7 +544,7 @@ const ButtonGroup = (_g) => {
     "currentIndex",
     "initialIndex"
   ]);
-  const mergedClassName = cx(styles$n[baseClass$r], className);
+  const mergedClassName = cx(styles$r[baseClass$y], className);
   const [currentStateIndex, setCurrentStateIndex] = React.useState(initialIndex);
   const isControlled = typeof currentIndex === "number";
   const _currentIndex = isControlled ? currentIndex : currentStateIndex;
@@ -563,14 +568,14 @@ const ButtonGroup = (_g) => {
         child.props.onClick(event);
       }
     },
-    className: cx(styles$n["btn"], styles$n[`btn--${size}`], i === _currentIndex && styles$n["btn--active"])
+    className: cx(styles$r["btn"], styles$r[`btn--${size}`], i === _currentIndex && styles$r["btn--active"])
   })));
 };
 const card = "lc-Card-module__card___GqMm2";
 const card__title = "lc-Card-module__card__title___1YjAR";
 const card__text = "lc-Card-module__card__text___-jYlF";
 const card__img = "lc-Card-module__card__img___teLC8";
-var styles$m = {
+var styles$q = {
   card,
   card__title,
   card__text,
@@ -591,18 +596,38 @@ const Card = (_i) => {
   return /* @__PURE__ */ React.createElement(Text, __spreadValues({
     as: "div",
     size: "md",
-    className: cx(styles$m["card"], className)
+    className: cx(styles$q["card"], className)
   }, restProps), (img || title) && /* @__PURE__ */ React.createElement(Heading, {
     as: "div",
     size: "sm",
-    className: styles$m["card__title"]
+    className: styles$q["card__title"]
   }, img && /* @__PURE__ */ React.createElement("img", {
     src: img,
-    className: styles$m["card__img"]
+    className: styles$q["card__img"]
   }), title && /* @__PURE__ */ React.createElement("div", {
-    className: styles$m["card__text"]
+    className: styles$q["card__text"]
   }, title)), children);
 };
+var styles$p = {
+  "field-description": "lc-FieldDescription-module__field-description___IcRDH"
+};
+const baseClass$x = "field-description";
+const FieldDescription = (_k) => {
+  var _l = _k, {
+    children,
+    className = ""
+  } = _l, props = __objRest(_l, [
+    "children",
+    "className"
+  ]);
+  const mergedClassNames = cx(styles$p[baseClass$x], 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";
 const checkbox__square = "lc-Checkbox-module__checkbox__square___MHUyd";
@@ -610,7 +635,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$l = {
+var styles$o = {
   checkbox,
   checkbox__label,
   checkbox__square,
@@ -621,93 +646,50 @@ var styles$l = {
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
-const baseClass$q = "checkbox";
-const Checkbox = (_k) => {
-  var _l = _k, {
-    className = ""
-  } = _l, props = __objRest(_l, [
-    "className"
-  ]);
-  const mergedClassNames = cx(styles$l[`${baseClass$q}__square`], className);
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
-    className: styles$l[`${baseClass$q}__input`],
+const baseClass$w = "checkbox";
+const Checkbox = React.forwardRef((_m, ref) => {
+  var _n = _m, { checked, disabled, children, description, className } = _n, restInputProps = __objRest(_n, ["checked", "disabled", "children", "description", "className"]);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$o[baseClass$w], className, {
+      [styles$o[`${baseClass$w}--selected`]]: checked,
+      [styles$o[`${baseClass$w}--disabled`]]: disabled
+    })
+  }, /* @__PURE__ */ React.createElement("label", {
+    className: styles$o[`${baseClass$w}__label`]
+  }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
+    ref,
+    checked,
+    disabled,
+    className: styles$o[`${baseClass$w}__input`],
     type: "checkbox"
   })), /* @__PURE__ */ React.createElement("div", {
-    className: mergedClassNames
+    className: styles$o[`${baseClass$w}__square`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Check,
     kind: "inverted",
     size: "xsmall",
-    className: styles$l[`${baseClass$q}__checkmark`]
-  })));
-};
-var styles$k = {
-  "field-description": "lc-FieldDescription-module__field-description___IcRDH"
-};
-const baseClass$p = "field-description";
-const FieldDescription = (_m) => {
-  var _n = _m, {
-    children,
-    className = ""
-  } = _n, props = __objRest(_n, [
-    "children",
-    "className"
-  ]);
-  const mergedClassNames = cx(styles$k[baseClass$p], className);
-  return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
-    as: "span",
-    size: "sm"
-  }, props), {
-    className: mergedClassNames
-  }), children);
-};
-const baseClass$o = "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$l[baseClass$o], className, {
-    [styles$l[`${baseClass$o}--selected`]]: checked,
-    [styles$l[`${baseClass$o}--disabled`]]: disabled
-  });
-  return /* @__PURE__ */ React.createElement("div", {
-    className: mergedClassNames
-  }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$l[`${baseClass$o}__label`]
-  }, /* @__PURE__ */ React.createElement(Checkbox, __spreadProps(__spreadValues({}, props), {
-    checked,
-    disabled
-  })), /* @__PURE__ */ React.createElement(Text, {
+    className: styles$o[`${baseClass$w}__checkmark`]
+  }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$l[`${baseClass$o}__text`]
+    className: styles$o[`${baseClass$w}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$l[`${baseClass$o}__helper`]
+    className: styles$o[`${baseClass$w}__helper`]
   }, description));
-};
-var styles$j = {
+});
+var styles$n = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
-const baseClass$n = "field-error";
-const FieldError = (_q) => {
-  var _r = _q, {
+const baseClass$v = "field-error";
+const FieldError = (_o) => {
+  var _p = _o, {
     children,
     className = ""
-  } = _r, props = __objRest(_r, [
+  } = _p, props = __objRest(_p, [
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$j[baseClass$n], className);
+  const mergedClassNames = cx(styles$n[baseClass$v], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -715,21 +697,21 @@ const FieldError = (_q) => {
     className: mergedClassNames
   }), children);
 };
-var styles$i = {
+var styles$m = {
   "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$m = "field-group";
-const FieldGroup = (_s) => {
-  var _t = _s, {
+const baseClass$u = "field-group";
+const FieldGroup = (_q) => {
+  var _r = _q, {
     className = "",
     children,
     description,
     error,
     inline,
     stretch
-  } = _t, props = __objRest(_t, [
+  } = _r, props = __objRest(_r, [
     "className",
     "children",
     "description",
@@ -737,9 +719,9 @@ const FieldGroup = (_s) => {
     "inline",
     "stretch"
   ]);
-  const mergedClassNames = cx(styles$i[baseClass$m], className, {
-    [styles$i[`${baseClass$m}--inline`]]: inline,
-    [styles$i[`${baseClass$m}--stretched`]]: stretch
+  const mergedClassNames = cx(styles$m[baseClass$u], className, {
+    [styles$m[`${baseClass$u}--inline`]]: inline,
+    [styles$m[`${baseClass$u}--stretched`]]: stretch
   });
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: mergedClassNames
@@ -750,22 +732,22 @@ const form__header = "lc-Form-module__form__header___U4B7t";
 const form__footer = "lc-Form-module__form__footer___1-sUX";
 const form__label = "lc-Form-module__form__label___spg-J";
 const form__helper = "lc-Form-module__form__helper___bhfwS";
-var styles$h = {
+var styles$l = {
   form,
   form__header,
   form__footer,
   form__label,
   form__helper
 };
-const baseClass$l = "form";
-const Form = (_u) => {
-  var _v = _u, {
+const baseClass$t = "form";
+const Form = (_s) => {
+  var _t = _s, {
     className,
     children,
     labelText,
     helperText,
     formFooter
-  } = _v, restProps = __objRest(_v, [
+  } = _t, restProps = __objRest(_t, [
     "className",
     "children",
     "labelText",
@@ -773,73 +755,37 @@ const Form = (_u) => {
     "formFooter"
   ]);
   return /* @__PURE__ */ React.createElement("form", __spreadValues({
-    className: cx(styles$h[baseClass$l], className)
+    className: cx(styles$l[baseClass$t], className)
   }, restProps), (labelText || helperText) && /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$l}__header`]
+    className: styles$l[`${baseClass$t}__header`]
   }, labelText && /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$h[`${baseClass$l}__label`]
+    className: styles$l[`${baseClass$t}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "p",
     size: "sm",
-    className: styles$h[`${baseClass$l}__helper`]
+    className: styles$l[`${baseClass$t}__helper`]
   }, helperText)), children, formFooter && /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$l}__footer`]
+    className: styles$l[`${baseClass$t}__footer`]
   }, formFooter));
 };
-var styles$g = {
-  "form-group": "lc-FormGroup-module__form-group___e2JHa",
-  "form-group__header": "lc-FormGroup-module__form-group__header___DgGmR",
-  "form-group__label": "lc-FormGroup-module__form-group__label___NC-JW",
-  "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
-};
-const baseClass$k = "form-group";
-const FormGroup = (_w) => {
-  var _x = _w, {
-    className = "",
-    children,
-    labelText,
-    helperText
-  } = _x, props = __objRest(_x, [
-    "className",
-    "children",
-    "labelText",
-    "helperText"
-  ]);
-  const mergedClassNames = cx(styles$g[baseClass$k], className);
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
-    role: "group"
-  }), labelText && { "aria-label": labelText }), {
-    className: mergedClassNames
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$g[`${baseClass$k}__header`]
-  }, /* @__PURE__ */ React.createElement(Heading, {
-    as: "div",
-    size: "sm",
-    className: styles$g[`${baseClass$k}__label`]
-  }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
-    as: "div",
-    size: "sm",
-    className: styles$g[`${baseClass$k}__helper`]
-  }, helperText)), children);
-};
-var styles$f = {
-  "text-field": "lc-TextField-module__text-field___bis8c",
-  "text-field--inline": "lc-TextField-module__text-field--inline___MPHqg",
-  "text-field__wrapper--inline": "lc-TextField-module__text-field__wrapper--inline___-gOob",
-  "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$j = "text-field";
-const TextField = ({
+var styles$k = {
+  "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"
+};
+const baseClass$s = "form-field";
+const FormField = ({
   inline,
   error,
   description,
@@ -850,109 +796,114 @@ const TextField = ({
   children,
   labelRightNode
 }) => {
-  const mergedClassNames = cx(styles$f[baseClass$j], {
-    [styles$f[`${baseClass$j}--inline`]]: inline
+  const mergedClassNames = cx(styles$k[baseClass$s], {
+    [styles$k[`${baseClass$s}--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$f[`${baseClass$j}__label-right-node`], styles$f[`${baseClass$j}__label-right-node--inline`])
+    className: cx(styles$k[`${baseClass$s}__label-right-node`], styles$k[`${baseClass$s}__label-right-node--inline`])
   }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
-    className: styles$f[`${baseClass$j}__row-break`]
+    className: styles$k[`${baseClass$s}__row-break`]
   })), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$f[`${baseClass$j}__wrapper`], inline && styles$f[`${baseClass$j}__wrapper--inline`])
+    className: cx(styles$k[`${baseClass$s}__wrapper`], inline && styles$k[`${baseClass$s}__wrapper--inline`])
   }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$f[`${baseClass$j}__label`], inline && styles$f[`${baseClass$j}__label--inline`], !labelText && styles$f[`${baseClass$j}__label--no-text`])
+    className: cx(styles$k[`${baseClass$s}__label`], inline && styles$k[`${baseClass$s}__label--inline`], !labelText && styles$k[`${baseClass$s}__label--no-text`])
   }, labelText && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$f[`${baseClass$j}__label-wrapper`])
+    className: cx(styles$k[`${baseClass$s}__label-wrapper`])
   }, /* @__PURE__ */ React.createElement("label", {
-    className: "lc-field-label",
+    className: styles$k[`${baseClass$s}__label-left-node`],
     htmlFor: labelFor
   }, /* @__PURE__ */ React.createElement(Text, {
     as: "span",
     size: "sm"
   }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$f[`${baseClass$j}__label-adornment`])
+    className: cx(styles$k[`${baseClass$s}__label-adornment`])
   }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$f[`${baseClass$j}__label-right-node`])
+    className: cx(styles$k[`${baseClass$s}__label-right-node`])
   }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$f[`${baseClass$j}__content`])
+    className: cx(styles$k[`${baseClass$s}__content`])
   }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
 };
-var styles$e = {
-  "input-field": "lc-InputField-module__input-field___A-GHj",
-  "input-field--error": "lc-InputField-module__input-field--error___MMchC"
+var styles$j = {
+  "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 = "input-field";
-const InputField = React.forwardRef((_y, ref) => {
-  var _z = _y, {
-    id,
+const baseClass$r = "form-group";
+const FormGroup = (_u) => {
+  var _v = _u, {
+    className = "",
+    children,
     labelText,
-    labelAdornment,
-    className,
-    inline,
-    error,
-    description,
-    labelRightNode,
-    fieldClassName,
-    style,
-    type = "text"
-  } = _z, restProps = __objRest(_z, [
-    "id",
-    "labelText",
-    "labelAdornment",
+    helperText
+  } = _v, props = __objRest(_v, [
     "className",
-    "inline",
-    "error",
-    "description",
-    "labelRightNode",
-    "fieldClassName",
-    "style",
-    "type"
+    "children",
+    "labelText",
+    "helperText"
   ]);
-  const mergedClassNames = cx(styles$e[baseClass$i], {
-    [styles$e[`${baseClass$i}--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,
-    className: mergedClassNames,
-    style,
-    type
-  })));
+  const mergedClassNames = cx(styles$j[baseClass$r], className);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
+    role: "group"
+  }), labelText && { "aria-label": labelText }), {
+    className: mergedClassNames
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$j[`${baseClass$r}__header`]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    as: "div",
+    size: "sm",
+    className: styles$j[`${baseClass$r}__label`]
+  }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
+    as: "div",
+    size: "sm",
+    className: styles$j[`${baseClass$r}__helper`]
+  }, helperText)), children);
+};
+const input = "lc-Input-module__input___qeMAQ";
+var styles$i = {
+  input,
+  "input--error": "lc-Input-module__input--error___DlDbC",
+  "input--xsmall": "lc-Input-module__input--xsmall___9u99K",
+  "input--small": "lc-Input-module__input--small___elNtF",
+  "input--medium": "lc-Input-module__input--medium___3BjqQ",
+  "input--large": "lc-Input-module__input--large___jX5RW"
+};
+const baseClass$q = "input";
+const Input = React.forwardRef((_w, ref) => {
+  var _x = _w, { size = "medium", error = false, className } = _x, inputProps = __objRest(_x, ["size", "error", "className"]);
+  return /* @__PURE__ */ React.createElement("input", __spreadValues({
+    className: cx(className, styles$i[baseClass$q], styles$i[`${baseClass$q}--${size}`], {
+      [styles$i[`${baseClass$q}--error`]]: error
+    }),
+    type: "text",
+    ref
+  }, inputProps));
 });
 const link = "lc-Link-module__link___kqx52";
-var styles$d = {
+var styles$h = {
   link,
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
-const baseClass$h = "link";
-const Link = (_A) => {
-  var _B = _A, {
+const baseClass$p = "link";
+const Link = (_y) => {
+  var _z = _y, {
     bold = false,
     className = ""
-  } = _B, rest = __objRest(_B, [
+  } = _z, rest = __objRest(_z, [
     "bold",
     "className"
   ]);
   return /* @__PURE__ */ React.createElement("a", __spreadValues({
-    className: cx(styles$d[baseClass$h], bold && styles$d[`${baseClass$h}--bold`], className)
+    className: cx(styles$h[baseClass$p], bold && styles$h[`${baseClass$p}--bold`], className)
   }, rest));
 };
 const modal__header = "lc-Modal-module__modal__header___Fp5VE";
 const modal__heading = "lc-Modal-module__modal__heading___G9KVK";
 const modal__body = "lc-Modal-module__modal__body___M-jmN";
 const modal__footer = "lc-Modal-module__modal__footer___2LYdc";
-var styles$c = {
+var styles$g = {
   "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",
@@ -971,7 +922,7 @@ const ModalCloseButton = ({
   onClick
 }) => /* @__PURE__ */ React.createElement("button", {
   title: "Close modal",
-  className: styles$c["modal-base__close"],
+  className: styles$g["modal-base__close"],
   onClick,
   type: "button"
 }, /* @__PURE__ */ React.createElement(Icon, {
@@ -990,20 +941,20 @@ const KeyCodes = {
   arrowUp: "ArrowUp",
   arrowDown: "ArrowDown"
 };
-const baseClass$g = "modal-base";
-const ModalBase = (_C) => {
-  var _D = _C, {
+const baseClass$o = "modal-base";
+const ModalBase = (_A) => {
+  var _B = _A, {
     children,
     className = "",
     onClose,
     closeOnEscPress = true
-  } = _D, props = __objRest(_D, [
+  } = _B, props = __objRest(_B, [
     "children",
     "className",
     "onClose",
     "closeOnEscPress"
   ]);
-  const mergedClassNames = cx(styles$c[baseClass$g], className);
+  const mergedClassNames = cx(styles$g[baseClass$o], className);
   React.useEffect(() => {
     if (!closeOnEscPress) {
       return;
@@ -1029,67 +980,67 @@ const ModalBase = (_C) => {
   return /* @__PURE__ */ React.createElement("div", {
     "data-testid": "lc-modal-overlay",
     onMouseDown: onOverlayClick,
-    className: cx(styles$c[`${baseClass$g}__overlay`], styles$c[`${baseClass$g}__overlay--visible`])
+    className: cx(styles$g[`${baseClass$o}__overlay`], styles$g[`${baseClass$o}__overlay--visible`])
   }, /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: mergedClassNames
   }, props), /* @__PURE__ */ React.createElement(ModalCloseButton, {
     onClick: onCloseButtonClick
   }), children));
 };
-const baseClass$f = "action-modal";
-const ActionModal = (_E) => {
-  var _F = _E, {
+const baseClass$n = "action-modal";
+const ActionModal = (_C) => {
+  var _D = _C, {
     children,
     className = "",
     icon: icon2,
     heading,
     actions
-  } = _F, props = __objRest(_F, [
+  } = _D, props = __objRest(_D, [
     "children",
     "className",
     "icon",
     "heading",
     "actions"
   ]);
-  const mergedClassNames = cx(styles$c[baseClass$f], className);
+  const mergedClassNames = cx(styles$g[baseClass$n], className);
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
     className: mergedClassNames
   }, props), icon2 && /* @__PURE__ */ React.createElement("div", {
-    className: styles$c[`${baseClass$f}__icon`]
+    className: styles$g[`${baseClass$n}__icon`]
   }, icon2), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$c[`${baseClass$f}__heading`]
+    className: styles$g[`${baseClass$n}__heading`]
   }, heading), /* @__PURE__ */ React.createElement("div", {
-    className: styles$c[`${baseClass$f}__content`]
+    className: styles$g[`${baseClass$n}__content`]
   }, children), actions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$c[`${baseClass$f}__actions`]
+    className: styles$g[`${baseClass$n}__actions`]
   }, actions));
 };
-const baseClass$e = "modal";
-const Modal = (_G) => {
-  var _H = _G, {
+const baseClass$m = "modal";
+const Modal = (_E) => {
+  var _F = _E, {
     children,
     className = "",
     heading,
     footer
-  } = _H, props = __objRest(_H, [
+  } = _F, props = __objRest(_F, [
     "children",
     "className",
     "heading",
     "footer"
   ]);
-  const mergedClassNames = cx(styles$c[baseClass$e], className);
+  const mergedClassNames = cx(styles$g[baseClass$m], className);
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
     className: mergedClassNames
   }, props), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$c[`${baseClass$e}__header`]
+    className: styles$g[`${baseClass$m}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
     as: "div",
-    className: styles$c[`${baseClass$e}__heading`]
+    className: styles$g[`${baseClass$m}__heading`]
   }, heading)), /* @__PURE__ */ React.createElement("div", {
-    className: styles$c[`${baseClass$e}__body`]
+    className: styles$g[`${baseClass$m}__body`]
   }, children), footer && /* @__PURE__ */ React.createElement("div", {
-    className: styles$c[`${baseClass$e}__footer`]
+    className: styles$g[`${baseClass$m}__footer`]
   }, footer));
 };
 const ModalPortal = ({
@@ -1115,7 +1066,7 @@ const ModalPortal = ({
   }, [parentElementName]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, ReactDOM.createPortal(children, container));
 };
-var styles$b = {
+var styles$f = {
   "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",
@@ -1123,9 +1074,9 @@ var styles$b = {
   "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
-const baseClass$d = "numeric-input";
-const NumericInput = (_I) => {
-  var _J = _I, {
+const baseClass$l = "numeric-input";
+const NumericInput = (_G) => {
+  var _H = _G, {
     className,
     error,
     value,
@@ -1135,7 +1086,7 @@ const NumericInput = (_I) => {
     noControls,
     style,
     onChange
-  } = _J, restProps = __objRest(_J, [
+  } = _H, restProps = __objRest(_H, [
     "className",
     "error",
     "value",
@@ -1147,10 +1098,10 @@ const NumericInput = (_I) => {
     "onChange"
   ]);
   const inputRef = React.useRef(null);
-  const mergedClassNames = cx(styles$b[baseClass$d], {
-    [styles$b[`${baseClass$d}--error`]]: error,
-    [styles$b[`${baseClass$d}--no-controls`]]: noControls,
-    [styles$b[`${baseClass$d}--disabled`]]: disabled
+  const mergedClassNames = cx(styles$f[baseClass$l], {
+    [styles$f[`${baseClass$l}--error`]]: error,
+    [styles$f[`${baseClass$l}--no-controls`]]: noControls,
+    [styles$f[`${baseClass$l}--disabled`]]: disabled
   }, className);
   const callOnChange = (val) => onChange(String(val));
   const calcValue = (val) => {
@@ -1215,7 +1166,7 @@ const NumericInput = (_I) => {
     disabled: disabled || hasReachedTheLimit(value, max),
     onClick: handleIncrementClick,
     "aria-label": "Increment value",
-    className: styles$b[`${baseClass$d}__increment`],
+    className: styles$f[`${baseClass$l}__increment`],
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: ChevronUp,
@@ -1225,7 +1176,7 @@ const NumericInput = (_I) => {
     tabIndex: -1,
     disabled: disabled || hasReachedTheLimit(value, min),
     "aria-label": "Decrement value",
-    className: styles$b[`${baseClass$d}__decrement`],
+    className: styles$f[`${baseClass$l}__decrement`],
     onClick: handleDecrementClick,
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
@@ -1234,45 +1185,341 @@ const NumericInput = (_I) => {
     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
-  })));
+var styles$e = {
+  "picker-trigger": "lc-Trigger-module__picker-trigger___BIvTx",
+  "picker-trigger--compact": "lc-Trigger-module__picker-trigger--compact___3i1DL",
+  "picker-trigger--medium": "lc-Trigger-module__picker-trigger--medium___-fbEx",
+  "picker-trigger--large": "lc-Trigger-module__picker-trigger--large___C8qkZ",
+  "picker-trigger__text": "lc-Trigger-module__picker-trigger__text___9cWZO",
+  "picker-trigger--disabled": "lc-Trigger-module__picker-trigger--disabled___7H4tD",
+  "picker-trigger--focused": "lc-Trigger-module__picker-trigger--focused___vTr39",
+  "picker-trigger--error": "lc-Trigger-module__picker-trigger--error___Rh8Qd",
+  "picker-trigger__input": "lc-Trigger-module__picker-trigger__input___GGc12"
+};
+const baseClass$k = "picker-trigger";
+const Trigger = ({
+  children,
+  isSearchDisabled,
+  isDisabled,
+  isError,
+  isItemSelected,
+  isOpen,
+  isRequired,
+  size = "medium",
+  onClick,
+  onClearClick,
+  onFilter
+}) => {
+  const triggerRef = React.useRef(null);
+  const mergedClassNames = cx(styles$e[baseClass$k], styles$e[`${baseClass$k}--${size}`], isDisabled && styles$e[`${baseClass$k}--disabled`], isOpen && styles$e[`${baseClass$k}--focused`], isError && styles$e[`${baseClass$k}--error`]);
+  React.useEffect(() => {
+    const onKeyDown = (e) => {
+      const isFocused = document.activeElement === triggerRef.current;
+      if (isFocused && e.key !== KeyCodes.tab) {
+        onClick();
+      }
+    };
+    if (!isSearchDisabled) {
+      document.addEventListener("keydown", onKeyDown);
+    }
+    return () => {
+      if (!isSearchDisabled) {
+        document.removeEventListener("keydown", onKeyDown);
+      }
+    };
+  }, [isSearchDisabled]);
+  const handleTriggerClick = () => {
+    onClick();
+  };
+  const handleOnClearClick = (e) => {
+    e.stopPropagation();
+    onClearClick();
+  };
+  const handleOnChange = (e) => {
+    onFilter(e.target.value);
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: triggerRef,
+    className: mergedClassNames,
+    onClick: handleTriggerClick,
+    tabIndex: 0
+  }, isOpen && !isSearchDisabled ? /* @__PURE__ */ React.createElement("input", {
+    className: styles$e[`${baseClass$k}__input`],
+    placeholder: "Select option",
+    onChange: handleOnChange,
+    autoFocus: true
+  }) : /* @__PURE__ */ React.createElement("div", {
+    className: styles$e[`${baseClass$k}__text`]
+  }, children), isItemSelected && !isDisabled && !isRequired && /* @__PURE__ */ React.createElement("div", {
+    "data-testid": `${baseClass$k}__clear-icon`,
+    className: styles$e[`${baseClass$k}__clear-icon`],
+    onClick: handleOnClearClick
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    kind: "link",
+    source: Close
+  })), /* @__PURE__ */ React.createElement(Icon, {
+    className: styles$e[`${baseClass$k}__chevron-icon`],
+    source: !isOpen ? ChevronDown : ChevronUp,
+    size: "large",
+    disabled: isDisabled
+  }));
+};
+var styles$d = {
+  "picker-list": "lc-PickerList-module__picker-list___FqdgZ",
+  "picker-list--compact": "lc-PickerList-module__picker-list--compact___F-cAF",
+  "picker-list--medium": "lc-PickerList-module__picker-list--medium___9B1DT",
+  "picker-list--large": "lc-PickerList-module__picker-list--large___8-Q-N",
+  "picker-list__no-results": "lc-PickerList-module__picker-list__no-results___tX172",
+  "picker-list__item": "lc-PickerList-module__picker-list__item___8QNS0",
+  "picker-list__item__header": "lc-PickerList-module__picker-list__item__header___mxmg0"
+};
+const baseClass$j = "picker-list";
+const itemClassName = `${baseClass$j}__item`;
+const PickerList = ({
+  isOpen,
+  items,
+  selectedItem,
+  size = "medium",
+  emptyStateText = "No results found",
+  onClose,
+  onSelect
+}) => {
+  const mergedClassNames = cx(styles$d[baseClass$j], styles$d[`${baseClass$j}--${size}`], {
+    [styles$d[`${baseClass$j}__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);
+  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]);
+  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 onKeyDown = (e) => {
+    if (e.key === KeyCodes.esc) {
+      e.preventDefault();
+      onClose();
+    }
+    if (e.key === KeyCodes.arrowUp && indexRef.current > 0) {
+      e.preventDefault();
+      indexRef.current = getPrevItemIndex();
+      setCurrentItemKey(items[indexRef.current].key);
+    }
+    if (e.key === KeyCodes.arrowDown && indexRef.current + 1 < items.length) {
+      e.preventDefault();
+      indexRef.current = getNextItemIndex();
+      setCurrentItemKey(items[indexRef.current].key);
+    }
+    if (e.key === KeyCodes.enter && !items[indexRef.current].disabled) {
+      e.preventDefault();
+      onSelect(items[indexRef.current]);
+    }
+  };
+  const handleOnClick = (item) => onSelect(item);
+  const isItemSelected = (key) => !!selectedItem && key === selectedItem.key;
+  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
+  }, items.map((item) => {
+    if (item.groupHeader) {
+      return /* @__PURE__ */ React.createElement("li", {
+        role: "option",
+        key: item.key,
+        className: styles$d[`${itemClassName}__header`]
+      }, item.name);
+    }
+    return /* @__PURE__ */ React.createElement("li", {
+      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: styles$d[itemClassName],
+      onClick: () => !item.disabled && handleOnClick(item)
+    }, item.name, 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$c = {
+  picker,
+  picker__container,
+  picker__label,
+  "picker__label--disabled": "lc-Picker-module__picker__label--disabled___Opu7s",
+  picker__error,
+  picker__error__icon
+};
+const baseClass$i = "picker";
+const Picker = ({
+  disabled,
+  error,
+  label,
+  options,
+  selectedOption,
+  size = "medium",
+  placeholder = "Select option",
+  isRequired,
+  noSearchResultText = "No results found",
+  searchDisabled = false,
+  onSelect
+}) => {
+  const [isListOpen, setIsListOpen] = React.useState(false);
+  const [selectedItem, setSelectedItem] = React.useState(selectedOption || null);
+  const [searchPhrase, setSearchPhrase] = React.useState(null);
+  const triggerRef = React.useRef(null);
+  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 handleOnTriggerClick = () => {
+    if (disabled) {
+      return;
+    }
+    return setIsListOpen((prev) => !prev);
+  };
+  const handleOnClose = () => {
+    setIsListOpen(false);
+  };
+  const handleOnSelect = (item) => {
+    setIsListOpen(false);
+    setSelectedItem(item);
+    onSelect(item);
+  };
+  const handleOnClearClick = () => {
+    setIsListOpen(false);
+    setSelectedItem(null);
+    onSelect(null);
+  };
+  const handleOnFilter = (text) => setSearchPhrase(text);
+  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]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: triggerRef,
+    className: styles$c[baseClass$i]
+  }, label && /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$c[`${baseClass$i}__label`], {
+      [styles$c[`${baseClass$i}__label--disabled`]]: disabled
+    })
+  }, label), /* @__PURE__ */ React.createElement("div", {
+    className: styles$c[`${baseClass$i}__container`]
+  }, /* @__PURE__ */ React.createElement(Trigger, {
+    isSearchDisabled: searchDisabled,
+    isError: !!error,
+    isOpen: isListOpen,
+    isDisabled: disabled,
+    isItemSelected: !!selectedItem,
+    isRequired,
+    size,
+    onClick: handleOnTriggerClick,
+    onClearClick: handleOnClearClick,
+    onFilter: handleOnFilter
+  }, selectedItem ? selectedItem.name : placeholder), /* @__PURE__ */ React.createElement(PickerList, {
+    selectedItem,
+    items,
+    isOpen: isListOpen,
+    size,
+    emptyStateText: noSearchResultText,
+    onClose: handleOnClose,
+    onSelect: handleOnSelect
+  })), error && /* @__PURE__ */ React.createElement("div", {
+    className: styles$c[`${baseClass$i}__error`]
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    className: styles$c[`${baseClass$i}__error__icon`],
+    source: Error2,
+    kind: "error",
+    size: "small"
+  }), error));
 };
 const popover = "lc-Popover-module__popover___8X1b2";
 var cssStyles = {
@@ -1366,7 +1613,7 @@ function getProgressStatus(status, percent) {
   }
   return status || "normal";
 }
-var styles$a = {
+var styles$b = {
   "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",
@@ -1392,14 +1639,14 @@ const SIZE_VALUE_FROM_SIZE = {
   medium: 36,
   large: 56
 };
-const baseClass$c = "progress-circle";
-const ProgressCircle = React.forwardRef((_M, ref) => {
-  var _N = _M, {
+const baseClass$h = "progress-circle";
+const ProgressCircle = React.forwardRef((_I, ref) => {
+  var _J = _I, {
     status = "normal",
     progressValue,
     className,
     size = "medium"
-  } = _N, restProps = __objRest(_N, [
+  } = _J, restProps = __objRest(_J, [
     "status",
     "progressValue",
     "className",
@@ -1409,9 +1656,9 @@ const ProgressCircle = React.forwardRef((_M, ref) => {
   const percentNumber = getPercentNumber(progressStatus, progressValue);
   const thickness = THICKNESS_FROM_SIZE[size];
   const sizeValue = SIZE_VALUE_FROM_SIZE[size];
-  const mergedClassNames = cx(styles$a[baseClass$c], {
-    [styles$a[`${baseClass$c}--${size}`]]: size,
-    [styles$a[`${baseClass$c}--${status}`]]: status
+  const mergedClassNames = cx(styles$b[baseClass$h], {
+    [styles$b[`${baseClass$h}--${size}`]]: size,
+    [styles$b[`${baseClass$h}--${status}`]]: status
   }, className);
   const circumference = 2 * Math.PI * ((sizeValue - thickness) / 2);
   const indicatorStyle = {
@@ -1426,14 +1673,14 @@ const ProgressCircle = React.forwardRef((_M, ref) => {
   }, restProps), /* @__PURE__ */ React.createElement("svg", {
     viewBox: svgViewBox
   }, /* @__PURE__ */ React.createElement("circle", {
-    className: styles$a[`${baseClass$c}__bg-line--${status}`],
+    className: styles$b[`${baseClass$h}__bg-line--${status}`],
     cx: sizeValue,
     cy: sizeValue,
     r: (sizeValue - thickness) / 2,
     fill: "none",
     strokeWidth: thickness
   }), /* @__PURE__ */ React.createElement("circle", {
-    className: styles$a[`${baseClass$c}__indicator--${status}`],
+    className: styles$b[`${baseClass$h}__indicator--${status}`],
     style: indicatorStyle,
     cx: sizeValue,
     cy: sizeValue,
@@ -1442,7 +1689,7 @@ const ProgressCircle = React.forwardRef((_M, ref) => {
     strokeWidth: thickness
   })));
 });
-var styles$9 = {
+var styles$a = {
   "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",
@@ -1453,14 +1700,14 @@ var styles$9 = {
   "progress-bar__indicator--success": "lc-ProgressBar-module__progress-bar__indicator--success___wRjR3",
   "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
 };
-const baseClass$b = "progress-bar";
-const ProgressBar = React.forwardRef((_O, ref) => {
-  var _P = _O, {
+const baseClass$g = "progress-bar";
+const ProgressBar = React.forwardRef((_K, ref) => {
+  var _L = _K, {
     status = "normal",
     percent,
     size = "medium",
     className = ""
-  } = _P, restProps = __objRest(_P, [
+  } = _L, restProps = __objRest(_L, [
     "status",
     "percent",
     "size",
@@ -1468,20 +1715,20 @@ const ProgressBar = React.forwardRef((_O, ref) => {
   ]);
   const progressStatus = getProgressStatus(status, percent);
   const percentNumber = getPercentNumber(progressStatus, percent);
-  const mergedClassNames = cx(styles$9[baseClass$b], {
-    [styles$9[`${baseClass$b}--${size}`]]: size,
-    [styles$9[`${baseClass$b}--${status}`]]: status
+  const mergedClassNames = cx(styles$a[baseClass$g], {
+    [styles$a[`${baseClass$g}--${size}`]]: size,
+    [styles$a[`${baseClass$g}--${status}`]]: status
   }, className);
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames,
     ref,
     role: "progressbar"
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$9[`${baseClass$b}__indicator--${status}`],
+    className: styles$a[`${baseClass$g}__indicator--${status}`],
     style: { width: `${percentNumber}%` }
   }));
 });
-var styles$8 = {
+var styles$9 = {
   "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",
@@ -1497,7 +1744,7 @@ var styles$8 = {
 const SMALL_CONTAINER_WIDTH_TRESHOLD = 400;
 const LARGE_CONTAINER_WIDTH_TRESHOLD = 800;
 const RESIZE_DEBOUNCE_TRESHOLD = 500;
-const baseClass$a = "promo-banner";
+const baseClass$f = "promo-banner";
 const PromoBanner = ({
   className,
   buttonText,
@@ -1512,10 +1759,10 @@ const PromoBanner = ({
 }) => {
   const containerRef = React.useRef(null);
   const [containerSize, setContainerSize] = React.useState("medium");
-  const mergedClassNames = cx(styles$8[baseClass$a], {
-    [styles$8[`${baseClass$a}--light`]]: light,
-    [styles$8[`${baseClass$a}--small`]]: containerSize === "small",
-    [styles$8[`${baseClass$a}--large`]]: containerSize === "large"
+  const mergedClassNames = cx(styles$9[baseClass$f], {
+    [styles$9[`${baseClass$f}--light`]]: light,
+    [styles$9[`${baseClass$f}--small`]]: containerSize === "small",
+    [styles$9[`${baseClass$f}--large`]]: containerSize === "large"
   }, className);
   React.useEffect(() => {
     const handleResize = () => {
@@ -1536,12 +1783,12 @@ const PromoBanner = ({
     };
   }, []);
   const footer = /* @__PURE__ */ React.createElement("div", {
-    className: styles$8[`${baseClass$a}__footer`]
+    className: styles$9[`${baseClass$f}__footer`]
   }, buttonText && /* @__PURE__ */ React.createElement(Button, {
     kind: "primary",
     size: "compact",
     onClick: onButtonClick,
-    className: styles$8[`${baseClass$a}__button-text`]
+    className: styles$9[`${baseClass$f}__button-text`]
   }, buttonText), linkText && /* @__PURE__ */ React.createElement(Button, {
     size: "compact",
     kind: "text",
@@ -1551,24 +1798,24 @@ const PromoBanner = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$8[`${baseClass$a}__content`]
+    className: styles$9[`${baseClass$f}__content`]
   }, img && /* @__PURE__ */ React.createElement("img", {
     src: img,
-    className: styles$8[`${baseClass$a}__img`]
+    className: styles$9[`${baseClass$f}__img`]
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$8[`${baseClass$a}__wrapper`]
+    className: styles$9[`${baseClass$f}__wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$8[`${baseClass$a}__header`]
+    className: styles$9[`${baseClass$f}__header`]
   }, header), /* @__PURE__ */ React.createElement("div", null, children), containerSize !== "large" && footer), containerSize === "large" && footer), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$8[`${baseClass$a}__close-icon`],
+    className: styles$9[`${baseClass$f}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
     size: "large"
   })));
 };
-var styles$7 = {
+var styles$8 = {
   "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",
@@ -1579,48 +1826,36 @@ var styles$7 = {
   "radio-button--selected": "lc-RadioButton-module__radio-button--selected___s9lqj",
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
-const baseClass$9 = "radio-button";
-const RadioButton = (_Q) => {
-  var _R = _Q, {
-    children,
-    className = "",
-    description,
-    checked,
-    disabled
-  } = _R, props = __objRest(_R, [
-    "children",
-    "className",
-    "description",
-    "checked",
-    "disabled"
-  ]);
-  const mergedClassNames = cx(styles$7[baseClass$9], className, {
-    [styles$7[`${baseClass$9}--selected`]]: checked,
-    [styles$7[`${baseClass$9}--disabled`]]: disabled
+const baseClass$e = "radio-button";
+const RadioButton = React.forwardRef((_M, ref) => {
+  var _N = _M, { children, className = "", description, checked, disabled } = _N, props = __objRest(_N, ["children", "className", "description", "checked", "disabled"]);
+  const mergedClassNames = cx(styles$8[baseClass$e], className, {
+    [styles$8[`${baseClass$e}--selected`]]: checked,
+    [styles$8[`${baseClass$e}--disabled`]]: disabled
   });
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$7[`${baseClass$9}__label`]
+    className: styles$8[`${baseClass$e}__label`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$9}__circle`]
+    className: styles$8[`${baseClass$e}__circle`]
   }, /* @__PURE__ */ React.createElement("span", {
-    className: styles$7[`${baseClass$9}__inner-circle`]
-  }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({
-    className: styles$7[`${baseClass$9}__input`]
-  }, props), {
+    className: styles$8[`${baseClass$e}__inner-circle`]
+  }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
+    className: styles$8[`${baseClass$e}__input`],
+    ref,
     type: "radio",
     checked,
     disabled
-  }))), /* @__PURE__ */ React.createElement(Text, {
+  }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$7[`${baseClass$9}__text`]
+    className: styles$8[`${baseClass$e}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$7[`${baseClass$9}__helper`]
+    className: styles$8[`${baseClass$e}__helper`]
   }, description));
-};
-var styles$6 = {
+});
+var styles$7 = {
   "search-input": "lc-Search-module__search-input___FsbCk",
   "search-input__search-icon": "lc-Search-module__search-input__search-icon___BBQoD",
   "search-input__clear-icon": "lc-Search-module__search-input__clear-icon___LoNkc",
@@ -1633,8 +1868,8 @@ var styles$6 = {
   "search-input__input--collapsable--open": "lc-Search-module__search-input__input--collapsable--open___a2rX2",
   "search-input__input--disabled": "lc-Search-module__search-input__input--disabled___nfZau"
 };
-const baseClass$8 = "search-input";
-const inputBaseClass = `${baseClass$8}__input`;
+const baseClass$d = "search-input";
+const inputBaseClass = `${baseClass$d}__input`;
 const SearchInput = ({
   isCollapsable,
   isDisabled,
@@ -1648,7 +1883,7 @@ const SearchInput = ({
   const [isCollapsed, setIsCollapsed] = React.useState(true);
   const inputRef = React.useRef(null);
   const isCloseIconVisible = !!searchValue && !isDisabled && !isLoading;
-  const mergedClassNames = cx(styles$6[`${inputBaseClass}`], styles$6[`${inputBaseClass}--${size}`], (isDisabled || isLoading) && styles$6[`${inputBaseClass}--disabled`], isCollapsable && styles$6[`${inputBaseClass}--collapsable`], !isCollapsed && styles$6[`${inputBaseClass}--collapsable--open`]);
+  const mergedClassNames = cx(styles$7[`${inputBaseClass}`], styles$7[`${inputBaseClass}--${size}`], (isDisabled || isLoading) && styles$7[`${inputBaseClass}--disabled`], isCollapsable && styles$7[`${inputBaseClass}--collapsable`], !isCollapsed && styles$7[`${inputBaseClass}--collapsable--open`]);
   React.useEffect(() => {
     if (typeof value === "string") {
       setSearchValue(value);
@@ -1684,11 +1919,11 @@ const SearchInput = ({
     }
   };
   return /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$8}-container`,
-    className: styles$6[baseClass$8],
+    "data-testid": `${baseClass$d}-container`,
+    className: styles$7[baseClass$d],
     onClick: handleClick
   }, /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$6[`${baseClass$8}__search-icon`],
+    className: styles$7[`${baseClass$d}__search-icon`],
     source: Search,
     disabled: isDisabled || isLoading,
     kind: "primary"
@@ -1704,14 +1939,14 @@ const SearchInput = ({
     onKeyDown: handleKeyDown,
     disabled: isDisabled || isLoading
   }), isCloseIconVisible && /* @__PURE__ */ React.createElement("div", {
-    className: styles$6[`${baseClass$8}__clear-icon`],
-    "data-testid": `${baseClass$8}-clear-icon`,
+    className: styles$7[`${baseClass$d}__clear-icon`],
+    "data-testid": `${baseClass$d}-clear-icon`,
     onClick: handleClear
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close
   })), isLoading && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$8}-loader`,
-    className: styles$6[`${baseClass$8}__loader`]
+    "data-testid": `${baseClass$d}-loader`,
+    className: styles$7[`${baseClass$d}__loader`]
   }, /* @__PURE__ */ React.createElement(Loader, {
     size: "small"
   })));
@@ -1720,7 +1955,7 @@ 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 = {
+var styles$6 = {
   "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",
@@ -1737,18 +1972,18 @@ var styles$5 = {
   "switch__slider--compact--enabled": "lc-Switch-module__switch__slider--compact--enabled___04TFA",
   "switch__slider--compact--disabled": "lc-Switch-module__switch__slider--compact--disabled___Vqznr"
 };
-const baseClass$7 = "switch";
-const Switch = (_S) => {
-  var _T = _S, {
+const baseClass$c = "switch";
+const Switch = (_O) => {
+  var _P = _O, {
     className = "",
     defaultOn = false,
     disabled = false,
-    name = baseClass$7,
+    name = baseClass$c,
     on,
     onChange = noop,
     size = "basic",
     innerRef
-  } = _T, props = __objRest(_T, [
+  } = _P, props = __objRest(_P, [
     "className",
     "defaultOn",
     "disabled",
@@ -1765,7 +2000,7 @@ const Switch = (_S) => {
     }
   }, [on]);
   const valueStyles = enabled ? "enabled" : "disabled";
-  const mergedClassNames = cx(styles$5[baseClass$7], styles$5[`${baseClass$7}--${size}`], className);
+  const mergedClassNames = cx(styles$6[baseClass$c], styles$6[`${baseClass$c}--${size}`], className);
   const handleChange = (e) => {
     const hasOnChangePassed = onChange !== noop;
     if (hasOnChangePassed) {
@@ -1779,7 +2014,7 @@ const Switch = (_S) => {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("input", __spreadValues({
     type: "checkbox",
-    className: styles$5[`${baseClass$7}__input`],
+    className: styles$6[`${baseClass$c}__input`],
     onChange: handleChange,
     checked: enabled,
     name,
@@ -1787,28 +2022,28 @@ const Switch = (_S) => {
     disabled,
     "test-id": "foo"
   }, props)), /* @__PURE__ */ React.createElement("span", {
-    className: styles$5[`${baseClass$7}__container`]
+    className: styles$6[`${baseClass$c}__container`]
   }, /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$5[`${baseClass$7}__track`], styles$5[`${baseClass$7}__track--${valueStyles}`])
+    className: cx(styles$6[`${baseClass$c}__track`], styles$6[`${baseClass$c}__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}`])
+    className: cx(styles$6[`${baseClass$c}__slider`], styles$6[`${baseClass$c}__slider--${size}`], styles$6[`${baseClass$c}__slider--${size}--${valueStyles}`])
   })));
 };
 const tab = "lc-Tab-module__tab___fME7u";
 const tab__description = "lc-Tab-module__tab__description___JGXU6";
-var styles$4 = {
+var styles$5 = {
   tab,
   tab__description,
   "tab--selected": "lc-Tab-module__tab--selected___c0EkL"
 };
-const baseClass$6 = "tab";
-const Tab = (_U) => {
-  var _V = _U, {
+const baseClass$b = "tab";
+const Tab = (_Q) => {
+  var _R = _Q, {
     children,
     className,
     description,
     isSelected
-  } = _V, restProps = __objRest(_V, [
+  } = _R, restProps = __objRest(_R, [
     "children",
     "className",
     "description",
@@ -1818,26 +2053,26 @@ const Tab = (_U) => {
     as: restProps.href ? "a" : "button",
     size: "md",
     bold: isSelected,
-    className: cx(styles$4[baseClass$6], className, isSelected && styles$4[`${baseClass$6}--selected`])
+    className: cx(styles$5[baseClass$b], className, isSelected && styles$5[`${baseClass$b}--selected`])
   }), children, description && /* @__PURE__ */ React.createElement(Text, {
     as: "span",
     size: "md",
-    className: styles$4[`${baseClass$6}__description`]
+    className: styles$5[`${baseClass$b}__description`]
   }, "(", description, ")"));
 };
 const tabs = "lc-TabsWrapper-module__tabs___Y2xyD";
 const tabs__list = "lc-TabsWrapper-module__tabs__list___i6tVO";
-var styles$3 = {
+var styles$4 = {
   tabs,
   tabs__list
 };
-const baseClass$5 = "tabs";
+const baseClass$a = "tabs";
 const TabsWrapper = ({
   className,
   children
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$3[baseClass$5], className)
+    className: cx(styles$4[baseClass$a], className)
   }, children);
 };
 const TabsList = ({
@@ -1845,7 +2080,7 @@ const TabsList = ({
   children
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$3[`${baseClass$5}__list`], className)
+    className: cx(styles$4[`${baseClass$a}__list`], className)
   }, children);
 };
 const tag = "lc-Tag-module__tag___1QRVY";
@@ -1853,7 +2088,7 @@ const tag__remove = "lc-Tag-module__tag__remove___UmtrW";
 const icon = "lc-Tag-module__icon___2Z-35";
 const tag__icon = "lc-Tag-module__tag__icon___tZoQ9";
 const tag__avatar = "lc-Tag-module__tag__avatar___U4c-P";
-var styles$2 = {
+var styles$3 = {
   tag,
   "tag--success": "lc-Tag-module__tag--success___P2hXQ",
   tag__remove,
@@ -1871,15 +2106,15 @@ var styles$2 = {
   tag__icon,
   tag__avatar
 };
-const baseClass$4 = "tag";
+const baseClass$9 = "tag";
 const getCustomTextClass = (customColor) => {
   if (!customColor) {
     return "";
   }
   return getContrast(customColor, "#FFFFFF") > 4.5 ? "text-white" : "text-black";
 };
-const Tag = (_W) => {
-  var _X = _W, {
+const Tag = (_S) => {
+  var _T = _S, {
     className = "",
     children,
     dismissible = false,
@@ -1890,7 +2125,7 @@ const Tag = (_W) => {
     icon: icon2,
     avatar,
     customColor
-  } = _X, restProps = __objRest(_X, [
+  } = _T, restProps = __objRest(_T, [
     "className",
     "children",
     "dismissible",
@@ -1902,11 +2137,11 @@ const Tag = (_W) => {
     "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 mergedClassNames = cx(styles$3[baseClass$9], className, styles$3[`${baseClass$9}--${size}`], styles$3[`${baseClass$9}--${kind}`], {
+    [styles$3[`${baseClass$9}--dismissible`]]: dismissible,
+    [styles$3[`${baseClass$9}--outline`]]: outline,
+    [styles$3[`${baseClass$9}--with-icon`]]: !!icon2 || !!avatar,
+    [styles$3[`${baseClass$9}--${getCustomTextClass(customColor)}`]]: !!customColor
   });
   const getCustomColorStyles = () => {
     if (!customColor) {
@@ -1938,13 +2173,13 @@ const Tag = (_W) => {
     as: "div",
     size: "md"
   }), avatar && /* @__PURE__ */ React.createElement("img", {
-    className: styles$2[`${baseClass$4}__avatar`],
+    className: styles$3[`${baseClass$9}__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`],
+    className: styles$3[`${baseClass$9}__icon`],
     source: icon2,
     size: "small",
     customColor: getIconCustomColor()
@@ -1952,7 +2187,7 @@ const Tag = (_W) => {
     title: "Remove",
     onClick: onRemove,
     type: "button",
-    className: styles$2[`${baseClass$4}__remove`]
+    className: styles$3[`${baseClass$9}__remove`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
     size: "medium",
@@ -2016,7 +2251,7 @@ const EditableTagContent = ({
     dangerouslySetInnerHTML: { __html: escape(value) }
   });
 };
-var styles$1 = {
+var styles$2 = {
   "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",
@@ -2024,7 +2259,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$8 = "tag-input__tag";
 const EditableTag = ({
   children,
   index: index2,
@@ -2048,13 +2283,13 @@ const EditableTag = ({
     value: children,
     inputRef,
     innerEditableRef,
-    className: styles$1[`${baseClass$3}__content`],
+    className: styles$2[`${baseClass$8}__content`],
     change: (newValue) => update(index2, newValue),
     remove: removeTag,
     validator
   }));
 };
-const baseClass$2 = "tag-input";
+const baseClass$7 = "tag-input";
 const tagSeparatorKeys = [
   KeyCodes.enter,
   KeyCodes.spacebar,
@@ -2071,10 +2306,10 @@ const TagInput = ({
   placeholder,
   size = "medium"
 }) => {
-  const mergedClassNames = cx(styles$1[baseClass$2], {
-    [styles$1[`${baseClass$2}--error`]]: error
+  const mergedClassNames = cx(styles$2[baseClass$7], {
+    [styles$2[`${baseClass$7}--error`]]: error
   });
-  const inputClassNames = cx(styles$1[`${baseClass$2}__input`], styles$1[`${baseClass$2}__input--${size}`]);
+  const inputClassNames = cx(styles$2[`${baseClass$7}__input`], styles$2[`${baseClass$7}__input--${size}`]);
   const [inputValue, setInputValue] = React.useState("");
   const inputRef = React.useRef(null);
   const addTag = (value) => {
@@ -2163,7 +2398,7 @@ 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$1 = {
   toast,
   toast__content,
   toast__icon,
@@ -2193,7 +2428,7 @@ 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";
+const baseClass$6 = "toast";
 const IconConfig = {
   success: {
     source: CheckCircleSolid,
@@ -2207,11 +2442,11 @@ const IconConfig = {
     kind: "inverted"
   },
   info: {
-    source: Info,
+    source: Info$1,
     kind: "inverted"
   },
   notification: {
-    source: Info,
+    source: Info$1,
     kind: "link"
   }
 };
@@ -2223,7 +2458,7 @@ const Toast = ({
   kind = "info",
   onClose
 }) => {
-  const mergedClassNames = cx(styles[baseClass$1], styles[`${baseClass$1}--${kind}`], className);
+  const mergedClassNames = cx(styles$1[baseClass$6], styles$1[`${baseClass$6}--${kind}`], className);
   const onActionClick = (action2) => {
     if (action2 && action2.closeOnClick && onClose) {
       action2.handler();
@@ -2234,16 +2469,16 @@ const Toast = ({
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$1}__icon`]
+    className: styles$1[`${baseClass$6}__icon`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadValues({}, IconConfig[kind]))), /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$1}__content`]
+    className: styles$1[`${baseClass$6}__content`]
   }, children), (action || removable) && /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$1}__actions`]
+    className: styles$1[`${baseClass$6}__actions`]
   }, action && /* @__PURE__ */ React.createElement("button", {
-    className: styles[`${baseClass$1}__actions-custom`],
+    className: styles$1[`${baseClass$6}__actions-custom`],
     onClick: () => onActionClick(action)
   }, action.label), removable && /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$1}__actions-close`],
+    className: styles$1[`${baseClass$6}__actions-close`],
     "aria-label": "Close toast",
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
@@ -2253,7 +2488,7 @@ const Toast = ({
   }))));
 };
 const ANIMATION_TIME = 200;
-const baseClass = "toast-wrapper";
+const baseClass$5 = "toast-wrapper";
 const ToastWrapper = ({
   className,
   toasts = [],
@@ -2263,11 +2498,11 @@ 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$1[baseClass$5], {
+    [styles$1[`${baseClass$5}--fixed`]]: fixed,
+    [styles$1[`${baseClass$5}--block`]]: !fixed && block,
+    [styles$1[`${baseClass$5}--horizontal-${horizontalPosition}`]]: horizontalPosition,
+    [styles$1[`${baseClass$5}--vertical-${verticalPosition}`]]: verticalPosition
   }, className);
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
@@ -2276,10 +2511,10 @@ const ToastWrapper = ({
   }, 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$1[`toast-appear--${animationType}`],
+      enterActive: styles$1[`toast-appear-active--${animationType}`],
+      exit: styles$1[`toast-exit--${animationType}`],
+      exitActive: styles$1[`toast-exit-active--${animationType}`]
     },
     timeout: ANIMATION_TIME
   }, /* @__PURE__ */ React.createElement(Toast, {
@@ -2289,4 +2524,471 @@ const ToastWrapper = ({
     action
   }, content)))));
 };
-export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, CheckboxField, DesignTokens, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormGroup, Heading, Icon, InputField, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, NumericInputField, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, SearchInput, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, TextField, Toast, ToastWrapper };
+const tooltip = "lc-Tooltip-module__tooltip___QOOAr";
+const tooltip__arrow = "lc-Tooltip-module__tooltip__arrow___Ov1YW";
+var styles = {
+  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$4 = "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[baseClass$4], className, {
+    [styles[`${baseClass$4}--invert`]]: theme === "invert",
+    [styles[`${baseClass$4}--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[`${baseClass$4}__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$3 = "tooltip";
+const Info = ({ header, text, closeWithX, theme, handleCloseAction }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { position: "relative" }
+  }, closeWithX && /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass$3}-close`],
+    onClick: handleCloseAction
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    source: Close,
+    kind: theme ? getIconType(theme) : "primary"
+  })), header && /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass$3}-header`]
+  }, header), /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass$3}-text`]
+  }, text));
+};
+const baseClass$2 = "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[`${baseClass$2}-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[`${baseClass$2}-image`],
+    src: image.src,
+    alt: image.alt
+  })), header && /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass$2}-header`]
+  }, header), /* @__PURE__ */ React.createElement("div", {
+    className: styles[`${baseClass$2}-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$1 = "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[`${baseClass$1}__overlay`]]: true,
+      [styles[`${baseClass$1}__overlay--visible`]]: isVisible,
+      [styles[`${baseClass$1}__overlay--slide`]]: slide
+    }),
+    style: overlayLeft
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles[`${baseClass$1}__overlay`]]: true,
+      [styles[`${baseClass$1}__overlay--visible`]]: isVisible,
+      [styles[`${baseClass$1}__overlay--slide`]]: slide
+    }),
+    style: overlayTop
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles[`${baseClass$1}__overlay`]]: true,
+      [styles[`${baseClass$1}__overlay--visible`]]: isVisible,
+      [styles[`${baseClass$1}__overlay--slide`]]: slide
+    }),
+    style: overlayRight
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles[`${baseClass$1}__overlay`]]: true,
+      [styles[`${baseClass$1}__overlay--visible`]]: isVisible,
+      [styles[`${baseClass$1}__overlay--slide`]]: slide
+    }),
+    style: overlayBottom
+  }), disablePointerEvents && /* @__PURE__ */ React.createElement("div", {
+    className: cx({
+      [styles[`${baseClass$1}__overlay`]]: true,
+      [styles[`${baseClass$1}__overlay--visible`]]: isVisible,
+      [styles[`${baseClass$1}__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 = "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[baseClass]]: true,
+      [styles[`${baseClass}--slide`]]: isSliding,
+      className
+    })
+  }), props.children)) : null;
+};
+export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, DesignTokens, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, SearchInput, Simple, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };