@livechat/design-system-react-components 1.0.0-alpha.14 → 1.0.0-alpha.15

package/dist/dsrc.es.js

@@ -35,7 +35,7 @@ var __publicField = (obj, key, value) => {
 };
 import * as React from "react";
 import cx from "clsx";
-import { Close, Info as Info$1, 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, arrow } from "@floating-ui/react-dom";
@@ -171,7 +171,7 @@ const DesignTokens = {
   DecorPurple50: "--decor-purple50"
 };
 const caps = "lc-Typography-module__caps___c3eNJ";
-var styles$u = {
+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",
@@ -207,7 +207,7 @@ const Heading = (_a) => {
     "children",
     "className"
   ]);
-  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$u[`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, {
@@ -232,15 +232,15 @@ const Text = (_c) => {
   const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
   return React.createElement(as, __spreadValues({
     className: cx({
-      [styles$u[`${baseClassPrefix}`]]: true,
-      [styles$u[`${baseClassPrefix}--bold`]]: bold,
-      [styles$u[`${baseClassPrefix}--strike`]]: strike,
-      [styles$u[`${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$t = {
+var styles$w = {
   icon: icon$1,
   "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
   "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
@@ -281,7 +281,7 @@ const IconSizeMap = {
     height: 32
   }
 };
-const baseClass$A = "icon";
+const baseClass$D = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
@@ -301,7 +301,7 @@ const Icon = (props) => {
   const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$t[baseClass$A], kind && styles$t[`${baseClass$A}--${disabled ? "disabled--" : ""}${kind}`]);
+  const mergedClassNames = cx(className, styles$w[baseClass$D], kind && styles$w[`${baseClass$D}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -309,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$s = {
+var styles$v = {
   alert,
   alert__content,
   "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
@@ -341,7 +341,7 @@ const IconConfig$1 = {
     kind: "error"
   }
 };
-const baseClass$z = "alert";
+const baseClass$C = "alert";
 const Alert = ({
   children,
   className,
@@ -350,7 +350,7 @@ const Alert = ({
 }) => {
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$s[baseClass$z], styles$s[`${baseClass$z}--${kind}`], isSmallContainer && styles$s[`${baseClass$z}--small`], className);
+  const mergedClassNames = cx(styles$v[baseClass$C], styles$v[`${baseClass$C}--${kind}`], isSmallContainer && styles$v[`${baseClass$C}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -365,15 +365,15 @@ const Alert = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$s[`${baseClass$z}__content`]
+    className: styles$v[`${baseClass$C}__content`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig$1[kind]), {
-    className: styles$s[`${baseClass$z}__content-icon`]
+    className: styles$v[`${baseClass$C}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$s[`${baseClass$z}__content-text`], onClose && styles$s[`${baseClass$z}__content-text--margin`])
+    className: cx(styles$v[`${baseClass$C}__content-text`], onClose && styles$v[`${baseClass$C}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$s[`${baseClass$z}__close-icon`],
+    className: styles$v[`${baseClass$C}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
@@ -382,7 +382,7 @@ const Alert = ({
   })));
 };
 const badge = "lc-Badge-module__badge___GhLnu";
-var styles$r = {
+var styles$u = {
   badge,
   "badge--secondary": "lc-Badge-module__badge--secondary___JjNIJ"
 };
@@ -392,8 +392,8 @@ const Badge = ({
   secondary = false
 }) => {
   return /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$r.badge, className, {
-      [styles$r["badge--secondary"]]: secondary
+    className: cx(styles$u.badge, className, {
+      [styles$u["badge--secondary"]]: secondary
     })
   }, children);
 };
@@ -401,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$q = {
+var styles$t = {
   loader,
   loader__spinner,
   "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
@@ -411,8 +411,8 @@ var styles$q = {
   rotate,
   loader__label
 };
-const baseClass$y = "loader";
-const spinnerClass = `${baseClass$y}__spinner`;
+const baseClass$B = "loader";
+const spinnerClass = `${baseClass$B}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -421,11 +421,11 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$q[baseClass$y], className)
+    className: cx(styles$t[baseClass$B], className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$q[spinnerClass], styles$q[`${spinnerClass}--${size}`])
+    className: cx(styles$t[spinnerClass], styles$t[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$q["loader__spinner-circle"],
+    className: styles$t["loader__spinner-circle"],
     style: {
       borderColor: secondaryColor,
       borderTopColor: primaryColor
@@ -433,14 +433,14 @@ const Loader = ({
   })), label && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$q["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$p = {
+var styles$s = {
   btn: btn$1,
   "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
   "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
@@ -461,7 +461,7 @@ var styles$p = {
   btn__content,
   btn__icon
 };
-const baseClass$x = "btn";
+const baseClass$A = "btn";
 const Button = (_e) => {
   var _f = _e, {
     loading = false,
@@ -492,11 +492,11 @@ const Button = (_e) => {
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$p[baseClass$x], styles$p[`${baseClass$x}--${kind}`], styles$p[`${baseClass$x}--${size}`], {
-    [styles$p[`${baseClass$x}--loading`]]: loading,
-    [styles$p[`${baseClass$x}--full-width`]]: fullWidth,
-    [styles$p[`${baseClass$x}--icon-only`]]: !children && icon2,
-    [styles$p[`${baseClass$x}--disabled`]]: isDisabled
+  const mergedClassNames = cx(className, styles$s[baseClass$A], styles$s[`${baseClass$A}--${kind}`], styles$s[`${baseClass$A}--${size}`], {
+    [styles$s[`${baseClass$A}--loading`]]: loading,
+    [styles$s[`${baseClass$A}--full-width`]]: fullWidth,
+    [styles$s[`${baseClass$A}--icon-only`]]: !children && icon2,
+    [styles$s[`${baseClass$A}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
@@ -506,16 +506,16 @@ const Button = (_e) => {
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$p[`${baseClass$x}__loader`]
+    className: styles$s[`${baseClass$A}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$p[`${baseClass$x}__icon`], styles$p[`${baseClass$x}__icon--${iconPosition}`]),
+    className: cx(styles$s[`${baseClass$A}__icon`], styles$s[`${baseClass$A}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$p[`${baseClass$x}__content`]
+    className: styles$s[`${baseClass$A}__content`]
   }, children));
 };
 const btn = "lc-ButtonGroup-module__btn___bXPrU";
-var styles$o = {
+var styles$r = {
   "btn-group": "lc-ButtonGroup-module__btn-group___R-lZQ",
   btn,
   "btn--active": "lc-ButtonGroup-module__btn--active___VAc37",
@@ -525,7 +525,7 @@ var styles$o = {
 };
 function noop() {
 }
-const baseClass$w = "btn-group";
+const baseClass$z = "btn-group";
 const ButtonGroup = (_g) => {
   var _h = _g, {
     size = "medium",
@@ -544,7 +544,7 @@ const ButtonGroup = (_g) => {
     "currentIndex",
     "initialIndex"
   ]);
-  const mergedClassName = cx(styles$o[baseClass$w], className);
+  const mergedClassName = cx(styles$r[baseClass$z], className);
   const [currentStateIndex, setCurrentStateIndex] = React.useState(initialIndex);
   const isControlled = typeof currentIndex === "number";
   const _currentIndex = isControlled ? currentIndex : currentStateIndex;
@@ -568,14 +568,14 @@ const ButtonGroup = (_g) => {
         child.props.onClick(event);
       }
     },
-    className: cx(styles$o["btn"], styles$o[`btn--${size}`], i === _currentIndex && styles$o["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$n = {
+var styles$q = {
   card,
   card__title,
   card__text,
@@ -596,16 +596,16 @@ const Card = (_i) => {
   return /* @__PURE__ */ React.createElement(Text, __spreadValues({
     as: "div",
     size: "md",
-    className: cx(styles$n["card"], className)
+    className: cx(styles$q["card"], className)
   }, restProps), (img || title) && /* @__PURE__ */ React.createElement(Heading, {
     as: "div",
     size: "sm",
-    className: styles$n["card__title"]
+    className: styles$q["card__title"]
   }, img && /* @__PURE__ */ React.createElement("img", {
     src: img,
-    className: styles$n["card__img"]
+    className: styles$q["card__img"]
   }), title && /* @__PURE__ */ React.createElement("div", {
-    className: styles$n["card__text"]
+    className: styles$q["card__text"]
   }, title)), children);
 };
 const checkbox = "lc-Checkbox-module__checkbox___G7nTf";
@@ -615,7 +615,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$m = {
+var styles$p = {
   checkbox,
   checkbox__label,
   checkbox__square,
@@ -626,16 +626,16 @@ var styles$m = {
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
-const baseClass$v = "checkbox";
+const baseClass$y = "checkbox";
 const Checkbox = (_k) => {
   var _l = _k, {
     className = ""
   } = _l, props = __objRest(_l, [
     "className"
   ]);
-  const mergedClassNames = cx(styles$m[`${baseClass$v}__square`], className);
+  const mergedClassNames = cx(styles$p[`${baseClass$y}__square`], className);
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
-    className: styles$m[`${baseClass$v}__input`],
+    className: styles$p[`${baseClass$y}__input`],
     type: "checkbox"
   })), /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
@@ -643,13 +643,13 @@ const Checkbox = (_k) => {
     source: Check,
     kind: "inverted",
     size: "xsmall",
-    className: styles$m[`${baseClass$v}__checkmark`]
+    className: styles$p[`${baseClass$y}__checkmark`]
   })));
 };
-var styles$l = {
+var styles$o = {
   "field-description": "lc-FieldDescription-module__field-description___IcRDH"
 };
-const baseClass$u = "field-description";
+const baseClass$x = "field-description";
 const FieldDescription = (_m) => {
   var _n = _m, {
     children,
@@ -658,7 +658,7 @@ const FieldDescription = (_m) => {
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$l[baseClass$u], className);
+  const mergedClassNames = cx(styles$o[baseClass$x], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -666,7 +666,7 @@ const FieldDescription = (_m) => {
     className: mergedClassNames
   }), children);
 };
-const baseClass$t = "checkbox";
+const baseClass$w = "checkbox";
 const CheckboxField = (_o) => {
   var _p = _o, {
     children,
@@ -681,29 +681,29 @@ const CheckboxField = (_o) => {
     "checked",
     "disabled"
   ]);
-  const mergedClassNames = cx(styles$m[baseClass$t], className, {
-    [styles$m[`${baseClass$t}--selected`]]: checked,
-    [styles$m[`${baseClass$t}--disabled`]]: disabled
+  const mergedClassNames = cx(styles$p[baseClass$w], className, {
+    [styles$p[`${baseClass$w}--selected`]]: checked,
+    [styles$p[`${baseClass$w}--disabled`]]: disabled
   });
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$m[`${baseClass$t}__label`]
+    className: styles$p[`${baseClass$w}__label`]
   }, /* @__PURE__ */ React.createElement(Checkbox, __spreadProps(__spreadValues({}, props), {
     checked,
     disabled
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$m[`${baseClass$t}__text`]
+    className: styles$p[`${baseClass$w}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$m[`${baseClass$t}__helper`]
+    className: styles$p[`${baseClass$w}__helper`]
   }, description));
 };
-var styles$k = {
+var styles$n = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
-const baseClass$s = "field-error";
+const baseClass$v = "field-error";
 const FieldError = (_q) => {
   var _r = _q, {
     children,
@@ -712,7 +712,7 @@ const FieldError = (_q) => {
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$k[baseClass$s], className);
+  const mergedClassNames = cx(styles$n[baseClass$v], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -720,12 +720,12 @@ const FieldError = (_q) => {
     className: mergedClassNames
   }), children);
 };
-var styles$j = {
+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$r = "field-group";
+const baseClass$u = "field-group";
 const FieldGroup = (_s) => {
   var _t = _s, {
     className = "",
@@ -742,9 +742,9 @@ const FieldGroup = (_s) => {
     "inline",
     "stretch"
   ]);
-  const mergedClassNames = cx(styles$j[baseClass$r], className, {
-    [styles$j[`${baseClass$r}--inline`]]: inline,
-    [styles$j[`${baseClass$r}--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
@@ -755,14 +755,14 @@ const form__header = "lc-Form-module__form__header___U4B7t";
 const form__footer = "lc-Form-module__form__footer___1-sUX";
 const form__label = "lc-Form-module__form__label___spg-J";
 const form__helper = "lc-Form-module__form__helper___bhfwS";
-var styles$i = {
+var styles$l = {
   form,
   form__header,
   form__footer,
   form__label,
   form__helper
 };
-const baseClass$q = "form";
+const baseClass$t = "form";
 const Form = (_u) => {
   var _v = _u, {
     className,
@@ -778,27 +778,27 @@ const Form = (_u) => {
     "formFooter"
   ]);
   return /* @__PURE__ */ React.createElement("form", __spreadValues({
-    className: cx(styles$i[baseClass$q], className)
+    className: cx(styles$l[baseClass$t], className)
   }, restProps), (labelText || helperText) && /* @__PURE__ */ React.createElement("div", {
-    className: styles$i[`${baseClass$q}__header`]
+    className: styles$l[`${baseClass$t}__header`]
   }, labelText && /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$i[`${baseClass$q}__label`]
+    className: styles$l[`${baseClass$t}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "p",
     size: "sm",
-    className: styles$i[`${baseClass$q}__helper`]
+    className: styles$l[`${baseClass$t}__helper`]
   }, helperText)), children, formFooter && /* @__PURE__ */ React.createElement("div", {
-    className: styles$i[`${baseClass$q}__footer`]
+    className: styles$l[`${baseClass$t}__footer`]
   }, formFooter));
 };
-var styles$h = {
+var styles$k = {
   "form-group": "lc-FormGroup-module__form-group___e2JHa",
   "form-group__header": "lc-FormGroup-module__form-group__header___DgGmR",
   "form-group__label": "lc-FormGroup-module__form-group__label___NC-JW",
   "form-group__helper": "lc-FormGroup-module__form-group__helper___SRuxe"
 };
-const baseClass$p = "form-group";
+const baseClass$s = "form-group";
 const FormGroup = (_w) => {
   var _x = _w, {
     className = "",
@@ -811,24 +811,24 @@ const FormGroup = (_w) => {
     "labelText",
     "helperText"
   ]);
-  const mergedClassNames = cx(styles$h[baseClass$p], className);
+  const mergedClassNames = cx(styles$k[baseClass$s], className);
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
     role: "group"
   }), labelText && { "aria-label": labelText }), {
     className: mergedClassNames
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$p}__header`]
+    className: styles$k[`${baseClass$s}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     as: "div",
     size: "sm",
-    className: styles$h[`${baseClass$p}__label`]
+    className: styles$k[`${baseClass$s}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "sm",
-    className: styles$h[`${baseClass$p}__helper`]
+    className: styles$k[`${baseClass$s}__helper`]
   }, helperText)), children);
 };
-var styles$g = {
+var styles$j = {
   "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",
@@ -843,7 +843,7 @@ var styles$g = {
   "text-field__content": "lc-TextField-module__text-field__content___dCkUW",
   "field-label": "lc-TextField-module__field-label___q8Y-p"
 };
-const baseClass$o = "text-field";
+const baseClass$r = "text-field";
 const TextField = ({
   inline,
   error,
@@ -855,21 +855,21 @@ const TextField = ({
   children,
   labelRightNode
 }) => {
-  const mergedClassNames = cx(styles$g[baseClass$o], {
-    [styles$g[`${baseClass$o}--inline`]]: inline
+  const mergedClassNames = cx(styles$j[baseClass$r], {
+    [styles$j[`${baseClass$r}--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$g[`${baseClass$o}__label-right-node`], styles$g[`${baseClass$o}__label-right-node--inline`])
+    className: cx(styles$j[`${baseClass$r}__label-right-node`], styles$j[`${baseClass$r}__label-right-node--inline`])
   }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
-    className: styles$g[`${baseClass$o}__row-break`]
+    className: styles$j[`${baseClass$r}__row-break`]
   })), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$g[`${baseClass$o}__wrapper`], inline && styles$g[`${baseClass$o}__wrapper--inline`])
+    className: cx(styles$j[`${baseClass$r}__wrapper`], inline && styles$j[`${baseClass$r}__wrapper--inline`])
   }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$g[`${baseClass$o}__label`], inline && styles$g[`${baseClass$o}__label--inline`], !labelText && styles$g[`${baseClass$o}__label--no-text`])
+    className: cx(styles$j[`${baseClass$r}__label`], inline && styles$j[`${baseClass$r}__label--inline`], !labelText && styles$j[`${baseClass$r}__label--no-text`])
   }, labelText && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$g[`${baseClass$o}__label-wrapper`])
+    className: cx(styles$j[`${baseClass$r}__label-wrapper`])
   }, /* @__PURE__ */ React.createElement("label", {
     className: "lc-field-label",
     htmlFor: labelFor
@@ -877,18 +877,18 @@ const TextField = ({
     as: "span",
     size: "sm"
   }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$g[`${baseClass$o}__label-adornment`])
+    className: cx(styles$j[`${baseClass$r}__label-adornment`])
   }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$g[`${baseClass$o}__label-right-node`])
+    className: cx(styles$j[`${baseClass$r}__label-right-node`])
   }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$g[`${baseClass$o}__content`])
+    className: cx(styles$j[`${baseClass$r}__content`])
   }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
 };
-var styles$f = {
+var styles$i = {
   "input-field": "lc-InputField-module__input-field___A-GHj",
   "input-field--error": "lc-InputField-module__input-field--error___MMchC"
 };
-const baseClass$n = "input-field";
+const baseClass$q = "input-field";
 const InputField = React.forwardRef((_y, ref) => {
   var _z = _y, {
     id,
@@ -915,8 +915,8 @@ const InputField = React.forwardRef((_y, ref) => {
     "style",
     "type"
   ]);
-  const mergedClassNames = cx(styles$f[baseClass$n], {
-    [styles$f[`${baseClass$n}--error`]]: error
+  const mergedClassNames = cx(styles$i[baseClass$q], {
+    [styles$i[`${baseClass$q}--error`]]: error
   }, fieldClassName);
   return /* @__PURE__ */ React.createElement(TextField, {
     inline,
@@ -936,11 +936,11 @@ const InputField = React.forwardRef((_y, ref) => {
   })));
 });
 const link = "lc-Link-module__link___kqx52";
-var styles$e = {
+var styles$h = {
   link,
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
-const baseClass$m = "link";
+const baseClass$p = "link";
 const Link = (_A) => {
   var _B = _A, {
     bold = false,
@@ -950,14 +950,14 @@ const Link = (_A) => {
     "className"
   ]);
   return /* @__PURE__ */ React.createElement("a", __spreadValues({
-    className: cx(styles$e[baseClass$m], bold && styles$e[`${baseClass$m}--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$d = {
+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",
@@ -976,7 +976,7 @@ const ModalCloseButton = ({
   onClick
 }) => /* @__PURE__ */ React.createElement("button", {
   title: "Close modal",
-  className: styles$d["modal-base__close"],
+  className: styles$g["modal-base__close"],
   onClick,
   type: "button"
 }, /* @__PURE__ */ React.createElement(Icon, {
@@ -995,7 +995,7 @@ const KeyCodes = {
   arrowUp: "ArrowUp",
   arrowDown: "ArrowDown"
 };
-const baseClass$l = "modal-base";
+const baseClass$o = "modal-base";
 const ModalBase = (_C) => {
   var _D = _C, {
     children,
@@ -1008,7 +1008,7 @@ const ModalBase = (_C) => {
     "onClose",
     "closeOnEscPress"
   ]);
-  const mergedClassNames = cx(styles$d[baseClass$l], className);
+  const mergedClassNames = cx(styles$g[baseClass$o], className);
   React.useEffect(() => {
     if (!closeOnEscPress) {
       return;
@@ -1034,14 +1034,14 @@ const ModalBase = (_C) => {
   return /* @__PURE__ */ React.createElement("div", {
     "data-testid": "lc-modal-overlay",
     onMouseDown: onOverlayClick,
-    className: cx(styles$d[`${baseClass$l}__overlay`], styles$d[`${baseClass$l}__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$k = "action-modal";
+const baseClass$n = "action-modal";
 const ActionModal = (_E) => {
   var _F = _E, {
     children,
@@ -1056,20 +1056,20 @@ const ActionModal = (_E) => {
     "heading",
     "actions"
   ]);
-  const mergedClassNames = cx(styles$d[baseClass$k], 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$d[`${baseClass$k}__icon`]
+    className: styles$g[`${baseClass$n}__icon`]
   }, icon2), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$d[`${baseClass$k}__heading`]
+    className: styles$g[`${baseClass$n}__heading`]
   }, heading), /* @__PURE__ */ React.createElement("div", {
-    className: styles$d[`${baseClass$k}__content`]
+    className: styles$g[`${baseClass$n}__content`]
   }, children), actions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$d[`${baseClass$k}__actions`]
+    className: styles$g[`${baseClass$n}__actions`]
   }, actions));
 };
-const baseClass$j = "modal";
+const baseClass$m = "modal";
 const Modal = (_G) => {
   var _H = _G, {
     children,
@@ -1082,19 +1082,19 @@ const Modal = (_G) => {
     "heading",
     "footer"
   ]);
-  const mergedClassNames = cx(styles$d[baseClass$j], 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$d[`${baseClass$j}__header`]
+    className: styles$g[`${baseClass$m}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
     as: "div",
-    className: styles$d[`${baseClass$j}__heading`]
+    className: styles$g[`${baseClass$m}__heading`]
   }, heading)), /* @__PURE__ */ React.createElement("div", {
-    className: styles$d[`${baseClass$j}__body`]
+    className: styles$g[`${baseClass$m}__body`]
   }, children), footer && /* @__PURE__ */ React.createElement("div", {
-    className: styles$d[`${baseClass$j}__footer`]
+    className: styles$g[`${baseClass$m}__footer`]
   }, footer));
 };
 const ModalPortal = ({
@@ -1120,7 +1120,7 @@ const ModalPortal = ({
   }, [parentElementName]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, ReactDOM.createPortal(children, container));
 };
-var styles$c = {
+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",
@@ -1128,7 +1128,7 @@ var styles$c = {
   "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
-const baseClass$i = "numeric-input";
+const baseClass$l = "numeric-input";
 const NumericInput = (_I) => {
   var _J = _I, {
     className,
@@ -1152,10 +1152,10 @@ const NumericInput = (_I) => {
     "onChange"
   ]);
   const inputRef = React.useRef(null);
-  const mergedClassNames = cx(styles$c[baseClass$i], {
-    [styles$c[`${baseClass$i}--error`]]: error,
-    [styles$c[`${baseClass$i}--no-controls`]]: noControls,
-    [styles$c[`${baseClass$i}--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) => {
@@ -1220,7 +1220,7 @@ const NumericInput = (_I) => {
     disabled: disabled || hasReachedTheLimit(value, max),
     onClick: handleIncrementClick,
     "aria-label": "Increment value",
-    className: styles$c[`${baseClass$i}__increment`],
+    className: styles$f[`${baseClass$l}__increment`],
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: ChevronUp,
@@ -1230,7 +1230,7 @@ const NumericInput = (_I) => {
     tabIndex: -1,
     disabled: disabled || hasReachedTheLimit(value, min),
     "aria-label": "Decrement value",
-    className: styles$c[`${baseClass$i}__decrement`],
+    className: styles$f[`${baseClass$l}__decrement`],
     onClick: handleDecrementClick,
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
@@ -1279,6 +1279,332 @@ const NumericInputField = (_K) => {
     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,
+  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();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+  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 ? /* @__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,
+  size = "medium",
+  placeholder = "Select option",
+  isRequired,
+  noSearchResultText = "No results found",
+  onSelect
+}) => {
+  const [isListOpen, setIsListOpen] = React.useState(false);
+  const [selectedItem, setSelectedItem] = React.useState(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: 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, {
+    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 = {
   popover,
@@ -2761,4 +3087,4 @@ const UserGuide = (props) => {
     })
   }), props.children)) : null;
 };
-export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, CheckboxField, DesignTokens, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormGroup, Heading, Icon, Info, InputField, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, NumericInputField, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, SearchInput, Simple, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, TextField, Toast, ToastWrapper, Tooltip, UserGuide };
+export { ANIMATION_TIME, ActionModal, Alert, Badge, Button, ButtonGroup, Card, Checkbox, CheckboxField, DesignTokens, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormGroup, Heading, Icon, Info, InputField, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, NumericInputField, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, SearchInput, Simple, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, TextField, Toast, ToastWrapper, Tooltip, UserGuide };