npm - @livechat/design-system-react-components - Versions diffs - 1.0.0-alpha.26 → 1.0.0-alpha.27 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/dsrc.cjs.js +7 -7
package/dist/dsrc.es.js +474 -384
package/dist/dsrc.umd.js +7 -7
package/dist/shadow/shadow.css +3 -3
package/dist/spacing/shadow.css +3 -3
package/dist/src/components/Button/Button.d.ts +2 -2
package/dist/src/components/Button/index.d.ts +1 -1
package/dist/src/components/Card/Card.d.ts +1 -1
package/dist/src/components/Input/Input.d.ts +10 -5
package/dist/src/components/Picker/Picker.d.ts +2 -2
package/dist/src/components/Picker/PickerList.d.ts +4 -0
package/dist/src/components/Picker/Trigger.d.ts +2 -2
package/dist/src/components/Textarea/Textarea.d.ts +6 -0
package/dist/src/components/Textarea/index.d.ts +1 -0
package/dist/src/index.d.ts +2 -0
package/dist/src/utils/constants.d.ts +1 -0
package/dist/src/utils/index.d.ts +1 -0
package/dist/style.css +1 -1
package/package.json +2 -2

package/dist/dsrc.es.js CHANGED Viewed

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 import * as React from "react";
 import { useReducer, useRef, useEffect, useCallback, useMemo } from "react";
 import cx from "clsx";
-import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, Check, DoubleArrowLeft, ChevronLeft, ChevronRight, DoubleArrowRight, Error as Error2, Search, LockBlack } from "@livechat/design-system-icons/react/material";
+import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, Check, DoubleArrowLeft, ChevronLeft, ChevronRight, DoubleArrowRight, VisibilityOn, VisibilityOff, Error as Error2, Search, LockBlack } from "@livechat/design-system-icons/react/material";
 import debounce from "lodash.debounce";
 import { getContrast } from "polished";
 import ReactDayPicker from "react-day-picker";
@@ -195,7 +195,7 @@ const ShadowToken = {
   Modal: "--shadow-modal"
 };
 const caps = "lc-Typography-module__caps___c3eNJ";
-var styles$A = {
+var styles$B = {
   "heading-xl": "lc-Typography-module__heading-xl___nhr-6",
   "heading-lg": "lc-Typography-module__heading-lg___XYF7l",
   "heading-md": "lc-Typography-module__heading-md___wHOIs",
@@ -231,7 +231,7 @@ const Heading = (_a) => {
     "children",
     "className"
   ]);
-  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$A[`heading-${size}`], className) }, props), children);
+  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$B[`heading-${size}`], className) }, props), children);
 };
 const Text = (_c) => {
   var _d = _c, {
@@ -256,15 +256,15 @@ const Text = (_c) => {
   const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
   return React.createElement(as, __spreadValues({
     className: cx({
-      [styles$A[`${baseClassPrefix}`]]: true,
-      [styles$A[`${baseClassPrefix}--bold`]]: bold,
-      [styles$A[`${baseClassPrefix}--strike`]]: strike,
-      [styles$A[`${baseClassPrefix}--underline`]]: underline
+      [styles$B[`${baseClassPrefix}`]]: true,
+      [styles$B[`${baseClassPrefix}--bold`]]: bold,
+      [styles$B[`${baseClassPrefix}--strike`]]: strike,
+      [styles$B[`${baseClassPrefix}--underline`]]: underline
     }, className)
   }, props), children);
 };
 const icon$1 = "lc-Icon-module__icon___tw31R";
-var styles$z = {
+var styles$A = {
   icon: icon$1,
   "icon--primary": "lc-Icon-module__icon--primary___JJnBV",
   "icon--subtle": "lc-Icon-module__icon--subtle___sZIzL",
@@ -305,7 +305,7 @@ const IconSizeMap = {
     height: 32
   }
 };
-const baseClass$J = "icon";
+const baseClass$K = "icon";
 const Icon = (props) => {
   const _a = props, {
     source,
@@ -325,7 +325,7 @@ const Icon = (props) => {
   const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
-  const mergedClassNames = cx(className, styles$z[baseClass$J], kind && styles$z[`${baseClass$J}--${disabled ? "disabled--" : ""}${kind}`]);
+  const mergedClassNames = cx(className, styles$A[baseClass$K], kind && styles$A[`${baseClass$K}--${disabled ? "disabled--" : ""}${kind}`]);
   return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, restProps), {
     className: mergedClassNames
   }), GeneratedIcon);
@@ -333,7 +333,7 @@ const Icon = (props) => {
 const alert = "lc-Alert-module__alert___HBTns";
 const alert__content = "lc-Alert-module__alert__content___9nZdf";
 const alert__icon = "lc-Alert-module__alert__icon___8TaAH";
-var styles$y = {
+var styles$z = {
   alert,
   alert__content,
   "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
@@ -365,7 +365,7 @@ const IconConfig = {
     kind: "error"
   }
 };
-const baseClass$I = "alert";
+const baseClass$J = "alert";
 const Alert = ({
   children,
   className,
@@ -374,7 +374,7 @@ const Alert = ({
 }) => {
   const containerRef = React.useRef(null);
   const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$y[baseClass$I], styles$y[`${baseClass$I}--${kind}`], isSmallContainer && styles$y[`${baseClass$I}--small`], className);
+  const mergedClassNames = cx(styles$z[baseClass$J], styles$z[`${baseClass$J}--${kind}`], isSmallContainer && styles$z[`${baseClass$J}--small`], className);
   React.useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
@@ -389,16 +389,16 @@ const Alert = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$y[`${baseClass$I}__content`]
+    className: styles$z[`${baseClass$J}__content`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
     size: "large",
-    className: styles$y[`${baseClass$I}__content-icon`]
+    className: styles$z[`${baseClass$J}__content-icon`]
   })), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$y[`${baseClass$I}__content-text`], onClose && styles$y[`${baseClass$I}__content-text--margin`])
+    className: cx(styles$z[`${baseClass$J}__content-text`], onClose && styles$z[`${baseClass$J}__content-text--margin`])
   }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$y[`${baseClass$I}__close-icon`],
+    className: styles$z[`${baseClass$J}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
@@ -416,7 +416,7 @@ const avatar = "lc-Avatar-module__avatar___1zTCE";
 const avatar__status = "lc-Avatar-module__avatar__status___nX2Ls";
 const avatar__rim = "lc-Avatar-module__avatar__rim___RCQ8Q";
 const avatar__image = "lc-Avatar-module__avatar__image___YqfqE";
-var styles$x = {
+var styles$y = {
   avatar,
   avatar__status,
   "avatar__status--available": "lc-Avatar-module__avatar__status--available___tcpFg",
@@ -462,7 +462,7 @@ var styles$x = {
   "avatar--xlarge": "lc-Avatar-module__avatar--xlarge___zwgeW",
   "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
 };
-const baseClass$H = "avatar";
+const baseClass$I = "avatar";
 const defaultBackgroundColor = "var(--surface-basic-disabled)";
 const defaultFontColor = "var(--content-subtle)";
 const Avatar = ({
@@ -486,15 +486,15 @@ const Avatar = ({
   const backgroundColor = color || defaultBackgroundColor;
   const fontColor = color ? getFontColor(color) : defaultFontColor;
   const mergedClassNames = cx({
-    [styles$x[baseClass$H]]: true,
-    [styles$x[`${baseClass$H}--${shape}`]]: true,
-    [styles$x[`${baseClass$H}--${size}`]]: true,
-    [styles$x[`${baseClass$H}--with-rim`]]: withRim,
+    [styles$y[baseClass$I]]: true,
+    [styles$y[`${baseClass$I}--${shape}`]]: true,
+    [styles$y[`${baseClass$I}--${size}`]]: true,
+    [styles$y[`${baseClass$I}--with-rim`]]: withRim,
     [`${className}`]: className
   });
-  const mergedStatusClassNames = cx(styles$x[`${baseClass$H}__status`], styles$x[`${baseClass$H}__status--${shape}`], styles$x[`${baseClass$H}__status--${size}`], styles$x[`${baseClass$H}__status--${status}`]);
-  const mergedIconClassNames = cx(styles$x[`${baseClass$H}__icon`], styles$x[`${baseClass$H}__icon--${size}`]);
-  const mergedRimClassNames = cx(styles$x[`${baseClass$H}__rim`], styles$x[`${baseClass$H}__rim--${size}`]);
+  const mergedStatusClassNames = cx(styles$y[`${baseClass$I}__status`], styles$y[`${baseClass$I}__status--${shape}`], styles$y[`${baseClass$I}__status--${size}`], styles$y[`${baseClass$I}__status--${status}`]);
+  const mergedIconClassNames = cx(styles$y[`${baseClass$I}__icon`], styles$y[`${baseClass$I}__icon--${size}`]);
+  const mergedRimClassNames = cx(styles$y[`${baseClass$I}__rim`], styles$y[`${baseClass$I}__rim--${size}`]);
   const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
   React.useEffect(() => {
     setShouldDisplayFallbackAvatar(isImproperImageSetup);
@@ -503,20 +503,20 @@ const Avatar = ({
     className: mergedClassNames,
     style: { backgroundColor }
   }, withRim && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$H}__rim`,
+    "data-testid": `${baseClass$I}__rim`,
     className: mergedRimClassNames
   }), status && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$H}__status`,
+    "data-testid": `${baseClass$I}__status`,
     className: mergedStatusClassNames
   }), shouldDisplayImage && /* @__PURE__ */ React.createElement("img", {
-    className: styles$x[`${baseClass$H}__image`],
+    className: styles$y[`${baseClass$I}__image`],
     src,
     alt,
     onError: handleError
   }), shouldDisplayInitials && /* @__PURE__ */ React.createElement("span", {
     style: { color: fontColor }
   }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
-    "data-testid": `${baseClass$H}__icon`,
+    "data-testid": `${baseClass$I}__icon`,
     className: mergedIconClassNames,
     source: Person,
     kind: "primary"
@@ -524,7 +524,7 @@ const Avatar = ({
 };
 const badge = "lc-Badge-module__badge___GhLnu";
 const badge__dot = "lc-Badge-module__badge__dot___z6RO6";
-var styles$w = {
+var styles$x = {
   badge,
   badge__dot,
   "badge--large": "lc-Badge-module__badge--large___B131q",
@@ -537,7 +537,7 @@ var styles$w = {
 function formatCount(count, max) {
   return count > max ? `${max}+` : `${count}`;
 }
-const baseClass$G = "badge";
+const baseClass$H = "badge";
 const Badge = (_e) => {
   var _f = _e, {
     className,
@@ -554,12 +554,12 @@ const Badge = (_e) => {
     "size",
     "type"
   ]);
-  const mergedClassNames = cx(className, styles$w[baseClass$G], styles$w[`${baseClass$G}--${kind}`], styles$w[`${baseClass$G}--${size}`]);
+  const mergedClassNames = cx(className, styles$x[baseClass$H], styles$x[`${baseClass$H}--${kind}`], styles$x[`${baseClass$H}--${size}`]);
   const content = {
     ["counter"]: formatCount(count, max),
     ["alert"]: "!",
     ["dot"]: /* @__PURE__ */ React.createElement("span", {
-      className: styles$w[`${baseClass$G}__dot`]
+      className: styles$x[`${baseClass$H}__dot`]
     })
   }[type];
   return /* @__PURE__ */ React.createElement("span", __spreadValues({
@@ -570,7 +570,7 @@ const loader = "lc-Loader-module__loader___LRflD";
 const loader__spinner = "lc-Loader-module__loader__spinner___l3C1g";
 const rotate = "lc-Loader-module__rotate___Tlni-";
 const loader__label = "lc-Loader-module__loader__label___R74f6";
-var styles$v = {
+var styles$w = {
   loader,
   loader__spinner,
   "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
@@ -580,8 +580,8 @@ var styles$v = {
   rotate,
   loader__label
 };
-const baseClass$F = "loader";
-const spinnerClass = `${baseClass$F}__spinner`;
+const baseClass$G = "loader";
+const spinnerClass = `${baseClass$G}__spinner`;
 const Loader = ({
   primaryColor,
   secondaryColor,
@@ -590,11 +590,11 @@ const Loader = ({
   size = "medium"
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$v[baseClass$F], className)
+    className: cx(styles$w[baseClass$G], className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$v[spinnerClass], styles$v[`${spinnerClass}--${size}`])
+    className: cx(styles$w[spinnerClass], styles$w[`${spinnerClass}--${size}`])
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$v["loader__spinner-circle"],
+    className: styles$w["loader__spinner-circle"],
     style: {
       borderColor: secondaryColor,
       borderTopColor: primaryColor
@@ -602,14 +602,14 @@ const Loader = ({
   })), label && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$v["loader__label"]
+    className: styles$w["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$u = {
+var styles$v = {
   btn: btn$1,
   "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
   "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
@@ -630,7 +630,7 @@ var styles$u = {
   btn__content,
   btn__icon
 };
-const baseClass$E = "btn";
+const baseClass$F = "btn";
 const Button = (_g) => {
   var _h = _g, {
     loading = false,
@@ -663,11 +663,11 @@ const Button = (_g) => {
   ]);
   const isDisabled = loading || disabled;
   const Component = href ? "a" : "button";
-  const mergedClassNames = cx(className, styles$u[baseClass$E], styles$u[`${baseClass$E}--${kind}`], styles$u[`${baseClass$E}--${size}`], {
-    [styles$u[`${baseClass$E}--loading`]]: loading,
-    [styles$u[`${baseClass$E}--full-width`]]: fullWidth,
-    [styles$u[`${baseClass$E}--icon-only`]]: !children && icon2,
-    [styles$u[`${baseClass$E}--disabled`]]: isDisabled
+  const mergedClassNames = cx(className, styles$v[baseClass$F], styles$v[`${baseClass$F}--${kind}`], styles$v[`${baseClass$F}--${size}`], {
+    [styles$v[`${baseClass$F}--loading`]]: loading,
+    [styles$v[`${baseClass$F}--full-width`]]: fullWidth,
+    [styles$v[`${baseClass$F}--icon-only`]]: !children && icon2,
+    [styles$v[`${baseClass$F}--disabled`]]: isDisabled
   });
   return /* @__PURE__ */ React.createElement(Component, __spreadValues({
     className: mergedClassNames,
@@ -678,16 +678,16 @@ const Button = (_g) => {
   }, props), loading && /* @__PURE__ */ React.createElement(Loader, {
     size: "small",
     label: loaderLabel,
-    className: styles$u[`${baseClass$E}__loader`]
+    className: styles$v[`${baseClass$F}__loader`]
   }), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$u[`${baseClass$E}__icon`], styles$u[`${baseClass$E}__icon--${iconPosition}`]),
+    className: cx(styles$v[`${baseClass$F}__icon`], styles$v[`${baseClass$F}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$u[`${baseClass$E}__content`]
+    className: styles$v[`${baseClass$F}__content`]
   }, children));
 };
 const btn = "lc-SegmentedControl-module__btn___tfsvL";
-var styles$t = {
+var styles$u = {
   "segmented-control": "lc-SegmentedControl-module__segmented-control___LHWSk",
   btn,
   "btn--active": "lc-SegmentedControl-module__btn--active___Za-th",
@@ -697,7 +697,7 @@ var styles$t = {
 };
 function noop() {
 }
-const baseClass$D = "segmented-control";
+const baseClass$E = "segmented-control";
 const SegmentedControl = ({
   size = "medium",
   buttons,
@@ -707,7 +707,7 @@ const SegmentedControl = ({
   fullWidth = false,
   onButtonClick = noop
 }) => {
-  const mergedClassName = cx(styles$t[baseClass$D], className);
+  const mergedClassName = cx(styles$u[baseClass$E], className);
   const [currentStateId, setCurrentStateId] = React.useState(() => initialId);
   const isControlled = typeof currentId === "string";
   React.useEffect(() => {
@@ -720,7 +720,7 @@ const SegmentedControl = ({
     onButtonClick(id, event);
   };
   const buttonSet = buttons.map(({ id, label, loading, disabled }) => {
-    const activityStyles = id === currentStateId ? styles$t["btn--active"] : "";
+    const activityStyles = id === currentStateId ? styles$u["btn--active"] : "";
     const loadingStatus = id === currentStateId ? false : loading;
     return /* @__PURE__ */ React.createElement(Button, {
       key: id,
@@ -728,7 +728,7 @@ const SegmentedControl = ({
       loading: loadingStatus,
       disabled,
       kind: "secondary",
-      className: cx(styles$t["btn"], styles$t[`btn--${size}`], activityStyles),
+      className: cx(styles$u["btn"], styles$u[`btn--${size}`], activityStyles),
       onClick: (event) => {
         handleClick(id, event);
       }
@@ -749,7 +749,7 @@ const card__content = "lc-Card-module__card__content___KuDcc";
 const card__actions = "lc-Card-module__card__actions___q9sAo";
 const card__actions__line = "lc-Card-module__card__actions__line___TF1bt";
 const card__actions__buttons = "lc-Card-module__card__actions__buttons___PDMMR";
-var styles$s = {
+var styles$t = {
   card,
   card__header,
   card__header__image,
@@ -763,10 +763,10 @@ var styles$s = {
   card__actions__buttons,
   "card__actions__buttons-expander": "lc-Card-module__card__actions__buttons-expander___lz4h-"
 };
-const baseClass$C = "card";
-const headerClass = `${baseClass$C}__header`;
+const baseClass$D = "card";
+const headerClass = `${baseClass$D}__header`;
 const headingClass = `${headerClass}__heading`;
-const actionsClass = `${baseClass$C}__actions`;
+const actionsClass = `${baseClass$D}__actions`;
 const Card = (_i) => {
   var _j = _i, {
     alt,
@@ -793,42 +793,43 @@ const Card = (_i) => {
   const shouldShowActionButtons = (buttonsOptions == null ? void 0 : buttonsOptions.length) > 0;
   const shouldShowExpandAction = !!expandableContent;
   const shouldShowActions = shouldShowActionButtons || shouldShowExpandAction;
+  const isTitleAvailable = title;
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
-    className: cx(styles$s[baseClass$C], className)
-  }, divProps), /* @__PURE__ */ React.createElement("div", {
-    className: styles$s[headerClass]
+    className: cx(styles$t[baseClass$D], className)
+  }, divProps), isTitleAvailable && /* @__PURE__ */ React.createElement("div", {
+    className: styles$t[headerClass]
   }, src && /* @__PURE__ */ React.createElement("img", {
     alt,
-    className: styles$s[`${headerClass}__image`],
+    className: styles$t[`${headerClass}__image`],
     src
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$s[headingClass]
+    className: styles$t[headingClass]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$s[`${headingClass}__title`]
+    className: styles$t[`${headingClass}__title`]
   }, title), /* @__PURE__ */ React.createElement(Text, {
     size: "sm",
-    className: styles$s[`${headingClass}__description`]
+    className: styles$t[`${headingClass}__description`]
   }, description))), /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$s[`${baseClass$C}__content`]
+    className: styles$t[`${baseClass$D}__content`]
   }, children), isExpanded && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$s[`${baseClass$C}__expanded-content`]
+    className: styles$t[`${baseClass$D}__expanded-content`]
   }, expandableContent), shouldShowActions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$s[actionsClass]
+    className: styles$t[actionsClass]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$s[`${actionsClass}__line`]
+    className: styles$t[`${actionsClass}__line`]
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$s[`${actionsClass}__buttons`]
+    className: styles$t[`${actionsClass}__buttons`]
   }, shouldShowActionButtons && buttonsOptions.map(({ kind, onClick, children: buttonChildren }) => /* @__PURE__ */ React.createElement(Button, {
     size: "compact",
     kind,
     onClick
   }, buttonChildren)), shouldShowExpandAction && /* @__PURE__ */ React.createElement(Button, {
-    className: styles$s[`${actionsClass}__buttons-expander`],
+    className: styles$t[`${actionsClass}__buttons-expander`],
     kind: "plain",
     iconPosition: "right",
     icon: /* @__PURE__ */ React.createElement(Icon, {
@@ -837,10 +838,10 @@ const Card = (_i) => {
     onClick: () => setIsExpanded(!isExpanded)
   }, expandButtonText))));
 };
-var styles$r = {
+var styles$s = {
   "field-description": "lc-FieldDescription-module__field-description___IcRDH"
 };
-const baseClass$B = "field-description";
+const baseClass$C = "field-description";
 const FieldDescription = (_k) => {
   var _l = _k, {
     children,
@@ -849,7 +850,7 @@ const FieldDescription = (_k) => {
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$r[baseClass$B], className);
+  const mergedClassNames = cx(styles$s[baseClass$C], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -864,7 +865,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$q = {
+var styles$r = {
   checkbox,
   checkbox__label,
   checkbox__square,
@@ -875,39 +876,45 @@ var styles$q = {
   "checkbox--disabled": "lc-Checkbox-module__checkbox--disabled___-lAqW",
   checkbox__helper
 };
-const baseClass$A = "checkbox";
+const baseClass$B = "checkbox";
 const Checkbox = React.forwardRef((_m, ref) => {
   var _n = _m, { checked, disabled, children, description, className } = _n, restInputProps = __objRest(_n, ["checked", "disabled", "children", "description", "className"]);
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$q[baseClass$A], className, {
-      [styles$q[`${baseClass$A}--selected`]]: checked,
-      [styles$q[`${baseClass$A}--disabled`]]: disabled
+    className: cx(styles$r[baseClass$B], className, {
+      [styles$r[`${baseClass$B}--selected`]]: checked,
+      [styles$r[`${baseClass$B}--disabled`]]: disabled
     })
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$q[`${baseClass$A}__label`]
+    className: styles$r[`${baseClass$B}__label`]
   }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, restInputProps), {
     ref,
     checked,
     disabled,
-    className: styles$q[`${baseClass$A}__input`],
+    className: styles$r[`${baseClass$B}__input`],
     type: "checkbox"
   })), /* @__PURE__ */ React.createElement("div", {
-    className: styles$q[`${baseClass$A}__square`]
+    className: styles$r[`${baseClass$B}__square`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Check,
     kind: "inverted",
     size: "xsmall",
-    className: styles$q[`${baseClass$A}__checkmark`]
+    className: styles$r[`${baseClass$B}__checkmark`]
   }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$q[`${baseClass$A}__text`]
+    className: styles$r[`${baseClass$B}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$q[`${baseClass$A}__helper`]
+    className: styles$r[`${baseClass$B}__helper`]
   }, description));
 });
-var styles$p = {
+var styles$q = {
   "date-picker": "lc-DatePicker-module__date-picker___9AqJ2",
+  "date-picker--interaction-disabled": "lc-DatePicker-module__date-picker--interaction-disabled___-zn8o",
+  "date-picker__day": "lc-DatePicker-module__date-picker__day___ZTSw9",
+  "date-picker__day--disabled": "lc-DatePicker-module__date-picker__day--disabled___4O6yW",
+  "date-picker__day--selected": "lc-DatePicker-module__date-picker__day--selected___1D1tC",
+  "date-picker__day--outside": "lc-DatePicker-module__date-picker__day--outside___ptNdC",
+  "date-picker__day-content": "lc-DatePicker-module__date-picker__day-content___rDIa0",
   "date-picker__wrapper": "lc-DatePicker-module__date-picker__wrapper___tNp4l",
   "date-picker__months": "lc-DatePicker-module__date-picker__months___QuPb0",
   "date-picker__month": "lc-DatePicker-module__date-picker__month___239nh",
@@ -920,14 +927,8 @@ var styles$p = {
   "date-picker__weekday": "lc-DatePicker-module__date-picker__weekday___3FCx8",
   "date-picker__body": "lc-DatePicker-module__date-picker__body___toP1u",
   "date-picker__week": "lc-DatePicker-module__date-picker__week___nZI1x",
-  "date-picker__day": "lc-DatePicker-module__date-picker__day___ZTSw9",
-  "date-picker__day-content": "lc-DatePicker-module__date-picker__day-content___rDIa0",
   "date-picker__day-wrapper": "lc-DatePicker-module__date-picker__day-wrapper___gGeeJ",
   "date-picker__day--today": "lc-DatePicker-module__date-picker__day--today___LL51c",
-  "date-picker__day--selected": "lc-DatePicker-module__date-picker__day--selected___1D1tC",
-  "date-picker__day--outside": "lc-DatePicker-module__date-picker__day--outside___ptNdC",
-  "date-picker__day--disabled": "lc-DatePicker-module__date-picker__day--disabled___4O6yW",
-  "date-picker--interaction-disabled": "lc-DatePicker-module__date-picker--interaction-disabled___-zn8o",
   "date-picker__footer": "lc-DatePicker-module__date-picker__footer___cXMQ5",
   "date-picker__input": "lc-DatePicker-module__date-picker__input___r6qih",
   "date-picker__input-overlay-wrapper": "lc-DatePicker-module__date-picker__input-overlay-wrapper___vmC0M",
@@ -942,7 +943,7 @@ var styles$p = {
   "date-picker--range__calendars-wrapper": "lc-DatePicker-module__date-picker--range__calendars-wrapper___8nWaW",
   "date-picker__navbar-buttons-wrapper": "lc-DatePicker-module__date-picker__navbar-buttons-wrapper___Hnksb"
 };
-const baseClass$z = "date-picker";
+const baseClass$A = "date-picker";
 const DatePickerNavbar = (props) => {
   const {
     onPreviousClick,
@@ -991,7 +992,7 @@ const DatePickerNavbar = (props) => {
   return /* @__PURE__ */ React.createElement("div", {
     className
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$p[`${baseClass$z}__navbar-buttons-wrapper`]
+    className: styles$q[`${baseClass$A}__navbar-buttons-wrapper`]
   }, /* @__PURE__ */ React.createElement("button", {
     "data-testid": "date-picker-prev-year-button",
     className: cx({
@@ -1013,7 +1014,7 @@ const DatePickerNavbar = (props) => {
     source: ChevronLeft,
     kind: "subtle"
   }))), /* @__PURE__ */ React.createElement("div", {
-    className: styles$p[`${baseClass$z}__navbar-buttons-wrapper`]
+    className: styles$q[`${baseClass$A}__navbar-buttons-wrapper`]
   }, /* @__PURE__ */ React.createElement("button", {
     "data-testid": "date-picker-next-month-button",
     className: cx({
@@ -1036,7 +1037,7 @@ const DatePickerNavbar = (props) => {
     kind: "subtle"
   }))));
 };
-const baseClass$y = "date-picker";
+const baseClass$z = "date-picker";
 const isDateWithinRange = (date, range) => {
   const { from, to } = range;
   if (to && !isSameDay(date, to) && isAfter(date, to)) {
@@ -1059,22 +1060,22 @@ const calculateDatePickerMonth = (initialFromDate, initialToDate, toMonth) => {
 };
 const getRangeDatePickerModifiers = (from, to) => {
   const base = {
-    [styles$p[`${baseClass$y}__day--monday`]]: { daysOfWeek: [1] },
-    [styles$p[`${baseClass$y}__day--sunday`]]: { daysOfWeek: [0] },
-    [styles$p[`${baseClass$y}__day--start`]]: from,
-    [styles$p[`${baseClass$y}__day--end`]]: from
+    [styles$q[`${baseClass$z}__day--monday`]]: { daysOfWeek: [1] },
+    [styles$q[`${baseClass$z}__day--sunday`]]: { daysOfWeek: [0] },
+    [styles$q[`${baseClass$z}__day--start`]]: from,
+    [styles$q[`${baseClass$z}__day--end`]]: from
   };
   if (!to || !from)
     return base;
   const diff = differenceInCalendarDays(to, from);
   if (diff > 0) {
     return __spreadProps(__spreadValues({}, base), {
-      [styles$p[`${baseClass$y}__day--end`]]: to
+      [styles$q[`${baseClass$z}__day--end`]]: to
     });
   }
   if (diff < 0) {
     return __spreadProps(__spreadValues({}, base), {
-      [styles$p[`${baseClass$y}__day--start`]]: to
+      [styles$q[`${baseClass$z}__day--start`]]: to
     });
   }
   return base;
@@ -1113,41 +1114,41 @@ const getInitialStateFromProps = (props) => {
 };
 const getDatePickerClassNames = (range, classNames) => __spreadValues({
   container: cx({
-    [styles$p[`${baseClass$y}`]]: true,
-    [styles$p[`${baseClass$y}--range`]]: range
+    [styles$q[`${baseClass$z}`]]: true,
+    [styles$q[`${baseClass$z}--range`]]: range
   }),
-  wrapper: styles$p[`${baseClass$y}__wrapper`],
-  interactionDisabled: styles$p[`${baseClass$y}--interaction-disabled`],
-  months: styles$p[`${baseClass$y}__months`],
-  month: styles$p[`${baseClass$y}__month`],
-  navBar: styles$p[`${baseClass$y}__nav-bar`],
-  navButtonPrev: cx(styles$p[`${baseClass$y}__nav-button`], styles$p[`${baseClass$y}__nav-button--prev`]),
-  navButtonNext: cx(styles$p[`${baseClass$y}__nav-button`], styles$p[`${baseClass$y}__nav-button--next`]),
-  navButtonInteractionDisabled: styles$p[`${baseClass$y}__nav-button--interaction-disabled`],
-  caption: styles$p[`${baseClass$y}__caption`],
-  weekdays: styles$p[`${baseClass$y}__weekdays`],
-  weekdaysRow: styles$p[`${baseClass$y}__weekdays-row`],
-  weekday: styles$p[`${baseClass$y}__weekday`],
-  body: styles$p[`${baseClass$y}__body`],
-  week: styles$p[`${baseClass$y}__week`],
-  weekNumber: styles$p[`${baseClass$y}__week-number`],
-  day: styles$p[`${baseClass$y}__day`],
-  footer: styles$p[`${baseClass$y}__footer`],
-  todayButton: styles$p[`${baseClass$y}__today-button`],
-  today: styles$p[`${baseClass$y}__day--today`],
-  selected: styles$p[`${baseClass$y}__day--selected`],
-  disabled: styles$p[`${baseClass$y}__day--disabled`],
-  outside: styles$p[`${baseClass$y}__day--outside`],
-  start: styles$p[`${baseClass$y}__day--start`],
-  end: styles$p[`${baseClass$y}__day--end`]
+  wrapper: styles$q[`${baseClass$z}__wrapper`],
+  interactionDisabled: styles$q[`${baseClass$z}--interaction-disabled`],
+  months: styles$q[`${baseClass$z}__months`],
+  month: styles$q[`${baseClass$z}__month`],
+  navBar: styles$q[`${baseClass$z}__nav-bar`],
+  navButtonPrev: cx(styles$q[`${baseClass$z}__nav-button`], styles$q[`${baseClass$z}__nav-button--prev`]),
+  navButtonNext: cx(styles$q[`${baseClass$z}__nav-button`], styles$q[`${baseClass$z}__nav-button--next`]),
+  navButtonInteractionDisabled: styles$q[`${baseClass$z}__nav-button--interaction-disabled`],
+  caption: styles$q[`${baseClass$z}__caption`],
+  weekdays: styles$q[`${baseClass$z}__weekdays`],
+  weekdaysRow: styles$q[`${baseClass$z}__weekdays-row`],
+  weekday: styles$q[`${baseClass$z}__weekday`],
+  body: styles$q[`${baseClass$z}__body`],
+  week: styles$q[`${baseClass$z}__week`],
+  weekNumber: styles$q[`${baseClass$z}__week-number`],
+  day: styles$q[`${baseClass$z}__day`],
+  footer: styles$q[`${baseClass$z}__footer`],
+  todayButton: styles$q[`${baseClass$z}__today-button`],
+  today: styles$q[`${baseClass$z}__day--today`],
+  selected: styles$q[`${baseClass$z}__day--selected`],
+  disabled: styles$q[`${baseClass$z}__day--disabled`],
+  outside: styles$q[`${baseClass$z}__day--outside`],
+  start: styles$q[`${baseClass$z}__day--start`],
+  end: styles$q[`${baseClass$z}__day--end`]
 }, classNames);
-const baseClass$x = "date-picker";
+const baseClass$y = "date-picker";
 const defaultDayRenderer = (day) => {
   const date = day.getDate();
   return /* @__PURE__ */ React.createElement("div", {
-    className: styles$p[`${baseClass$x}__day-wrapper`]
+    className: styles$q[`${baseClass$y}__day-wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$p[`${baseClass$x}__day-content`]
+    className: styles$q[`${baseClass$y}__day-content`]
   }, date));
 };
 const DatePickerComponent = (props) => {
@@ -1468,10 +1469,10 @@ RangeDatePicker.defaultProps = {
     }
   ]
 };
-var styles$o = {
+var styles$p = {
   "field-error": "lc-FieldError-module__field-error___IDkPT"
 };
-const baseClass$w = "field-error";
+const baseClass$x = "field-error";
 const FieldError = (_o) => {
   var _p = _o, {
     children,
@@ -1480,7 +1481,7 @@ const FieldError = (_o) => {
     "children",
     "className"
   ]);
-  const mergedClassNames = cx(styles$o[baseClass$w], className);
+  const mergedClassNames = cx(styles$p[baseClass$x], className);
   return /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({
     as: "span",
     size: "sm"
@@ -1488,12 +1489,12 @@ const FieldError = (_o) => {
     className: mergedClassNames
   }), children);
 };
-var styles$n = {
+var styles$o = {
   "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$v = "field-group";
+const baseClass$w = "field-group";
 const FieldGroup = (_q) => {
   var _r = _q, {
     className = "",
@@ -1510,9 +1511,9 @@ const FieldGroup = (_q) => {
     "inline",
     "stretch"
   ]);
-  const mergedClassNames = cx(styles$n[baseClass$v], className, {
-    [styles$n[`${baseClass$v}--inline`]]: inline,
-    [styles$n[`${baseClass$v}--stretched`]]: stretch
+  const mergedClassNames = cx(styles$o[baseClass$w], className, {
+    [styles$o[`${baseClass$w}--inline`]]: inline,
+    [styles$o[`${baseClass$w}--stretched`]]: stretch
   });
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: mergedClassNames
@@ -1523,14 +1524,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$m = {
+var styles$n = {
   form,
   form__header,
   form__footer,
   form__label,
   form__helper
 };
-const baseClass$u = "form";
+const baseClass$v = "form";
 const Form = (_s) => {
   var _t = _s, {
     className,
@@ -1546,21 +1547,21 @@ const Form = (_s) => {
     "formFooter"
   ]);
   return /* @__PURE__ */ React.createElement("form", __spreadValues({
-    className: cx(styles$m[baseClass$u], className)
+    className: cx(styles$n[baseClass$v], className)
   }, restProps), (labelText || helperText) && /* @__PURE__ */ React.createElement("div", {
-    className: styles$m[`${baseClass$u}__header`]
+    className: styles$n[`${baseClass$v}__header`]
   }, labelText && /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
-    className: styles$m[`${baseClass$u}__label`]
+    className: styles$n[`${baseClass$v}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "p",
     size: "sm",
-    className: styles$m[`${baseClass$u}__helper`]
+    className: styles$n[`${baseClass$v}__helper`]
   }, helperText)), children, formFooter && /* @__PURE__ */ React.createElement("div", {
-    className: styles$m[`${baseClass$u}__footer`]
+    className: styles$n[`${baseClass$v}__footer`]
   }, formFooter));
 };
-var styles$l = {
+var styles$m = {
   "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",
@@ -1575,7 +1576,7 @@ var styles$l = {
   "form-field__row-break": "lc-FormField-module__form-field__row-break___DCBjC",
   "form-field__content": "lc-FormField-module__form-field__content___XaOx3"
 };
-const baseClass$t = "form-field";
+const baseClass$u = "form-field";
 const FormField = ({
   inline,
   error,
@@ -1587,42 +1588,42 @@ const FormField = ({
   children,
   labelRightNode
 }) => {
-  const mergedClassNames = cx(styles$l[baseClass$t], {
-    [styles$l[`${baseClass$t}--inline`]]: inline
+  const mergedClassNames = cx(styles$m[baseClass$u], {
+    [styles$m[`${baseClass$u}--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$l[`${baseClass$t}__label-right-node`], styles$l[`${baseClass$t}__label-right-node--inline`])
+    className: cx(styles$m[`${baseClass$u}__label-right-node`], styles$m[`${baseClass$u}__label-right-node--inline`])
   }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
-    className: styles$l[`${baseClass$t}__row-break`]
+    className: styles$m[`${baseClass$u}__row-break`]
   })), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$l[`${baseClass$t}__wrapper`], inline && styles$l[`${baseClass$t}__wrapper--inline`])
+    className: cx(styles$m[`${baseClass$u}__wrapper`], inline && styles$m[`${baseClass$u}__wrapper--inline`])
   }, (labelText || labelRightNode) && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$l[`${baseClass$t}__label`], inline && styles$l[`${baseClass$t}__label--inline`], !labelText && styles$l[`${baseClass$t}__label--no-text`])
+    className: cx(styles$m[`${baseClass$u}__label`], inline && styles$m[`${baseClass$u}__label--inline`], !labelText && styles$m[`${baseClass$u}__label--no-text`])
   }, labelText && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$l[`${baseClass$t}__label-wrapper`])
+    className: cx(styles$m[`${baseClass$u}__label-wrapper`])
   }, /* @__PURE__ */ React.createElement("label", {
-    className: styles$l[`${baseClass$t}__label-left-node`],
+    className: styles$m[`${baseClass$u}__label-left-node`],
     htmlFor: labelFor
   }, /* @__PURE__ */ React.createElement(Text, {
     as: "span",
     size: "sm"
   }, labelText)), labelAdornment && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$l[`${baseClass$t}__label-adornment`])
+    className: cx(styles$m[`${baseClass$u}__label-adornment`])
   }, labelAdornment)), labelRightNode && !inline && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$l[`${baseClass$t}__label-right-node`])
+    className: cx(styles$m[`${baseClass$u}__label-right-node`])
   }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$l[`${baseClass$t}__content`])
+    className: cx(styles$m[`${baseClass$u}__content`])
   }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
 };
-var styles$k = {
+var styles$l = {
   "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$s = "form-group";
+const baseClass$t = "form-group";
 const FormGroup = (_u) => {
   var _v = _u, {
     className = "",
@@ -1635,49 +1636,98 @@ const FormGroup = (_u) => {
     "labelText",
     "helperText"
   ]);
-  const mergedClassNames = cx(styles$k[baseClass$s], className);
+  const mergedClassNames = cx(styles$l[baseClass$t], 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$k[`${baseClass$s}__header`]
+    className: styles$l[`${baseClass$t}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     as: "div",
     size: "sm",
-    className: styles$k[`${baseClass$s}__label`]
+    className: styles$l[`${baseClass$t}__label`]
   }, labelText), helperText && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "sm",
-    className: styles$k[`${baseClass$s}__helper`]
+    className: styles$l[`${baseClass$t}__helper`]
   }, helperText)), children);
 };
 const input = "lc-Input-module__input___qeMAQ";
-var styles$j = {
+var styles$k = {
   input,
+  "input--focused": "lc-Input-module__input--focused___wQH5-",
+  "input--disabled": "lc-Input-module__input--disabled___HidXX",
   "input--error": "lc-Input-module__input--error___DlDbC",
-  "input--xsmall": "lc-Input-module__input--xsmall___9u99K",
-  "input--small": "lc-Input-module__input--small___elNtF",
+  "input--compact": "lc-Input-module__input--compact___iKSQZ",
   "input--medium": "lc-Input-module__input--medium___3BjqQ",
-  "input--large": "lc-Input-module__input--large___jX5RW"
-};
-const baseClass$r = "input";
+  "input--large": "lc-Input-module__input--large___jX5RW",
+  "input__icon--disabled": "lc-Input-module__input__icon--disabled___XO3dc",
+  "input__icon--left": "lc-Input-module__input__icon--left___BcySs",
+  "input__icon--right": "lc-Input-module__input__icon--right___VefSK",
+  "input__visibility-button": "lc-Input-module__input__visibility-button___eWrVe"
+};
+const baseClass$s = "input";
+const renderIcon = (icon2, disabled) => React.cloneElement(icon2.source, {
+  ["data-testid"]: `input-icon-${icon2.place}`,
+  className: cx(styles$k[`${baseClass$s}__icon`], styles$k[`${baseClass$s}__icon--${icon2.place}`], {
+    [styles$k[`${baseClass$s}__icon--disabled`]]: disabled
+  })
+});
 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$j[baseClass$r], styles$j[`${baseClass$r}--${size}`], {
-      [styles$j[`${baseClass$r}--error`]]: error
+  var _x = _w, {
+    inputSize = "medium",
+    error = false,
+    disabled,
+    icon: icon2 = null,
+    className
+  } = _x, inputProps = __objRest(_x, [
+    "inputSize",
+    "error",
+    "disabled",
+    "icon",
+    "className"
+  ]);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
+  const { type } = inputProps;
+  const mergedClassNames = cx(className, styles$k[baseClass$s], styles$k[`${baseClass$s}--${inputSize}`], {
+    [styles$k[`${baseClass$s}--disabled`]]: disabled,
+    [styles$k[`${baseClass$s}--focused`]]: isFocused,
+    [styles$k[`${baseClass$s}--error`]]: error
+  });
+  const iconCustomColor = !disabled ? "var(--content-default)" : "var(--content-disabled)";
+  const iconSource = isPasswordVisible ? VisibilityOn : VisibilityOff;
+  const shouldRenderLeftIcon = icon2 && icon2.place === "left";
+  const shouldRenderRightIcon = icon2 && type !== "password" && icon2.place === "right";
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames,
+    "aria-disabled": disabled,
+    "tab-index": "0"
+  }, shouldRenderLeftIcon && renderIcon(icon2, disabled), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, inputProps), {
+    "data-testid": "input",
+    ref,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    disabled,
+    type: type && !isPasswordVisible ? type : "text"
+  })), shouldRenderRightIcon && renderIcon(icon2, disabled), type === "password" && /* @__PURE__ */ React.createElement(Button, {
+    disabled,
+    kind: "plain",
+    icon: /* @__PURE__ */ React.createElement(Icon, {
+      customColor: iconCustomColor,
+      source: iconSource
     }),
-    type: "text",
-    ref
-  }, inputProps));
+    onClick: () => setIsPasswordVisible((v) => !v),
+    className: styles$k[`${baseClass$s}__visibility-button`]
+  }));
 });
 const link = "lc-Link-module__link___kqx52";
-var styles$i = {
+var styles$j = {
   link,
   "link--bold": "lc-Link-module__link--bold___1rGdO"
 };
-const baseClass$q = "link";
+const baseClass$r = "link";
 const Link = (_y) => {
   var _z = _y, {
     bold = false,
@@ -1687,14 +1737,14 @@ const Link = (_y) => {
     "className"
   ]);
   return /* @__PURE__ */ React.createElement("a", __spreadValues({
-    className: cx(styles$i[baseClass$q], bold && styles$i[`${baseClass$q}--bold`], className)
+    className: cx(styles$j[baseClass$r], bold && styles$j[`${baseClass$r}--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$h = {
+var styles$i = {
   "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",
@@ -1713,7 +1763,7 @@ const ModalCloseButton = ({
   onClick
 }) => /* @__PURE__ */ React.createElement("button", {
   title: "Close modal",
-  className: styles$h["modal-base__close"],
+  className: styles$i["modal-base__close"],
   onClick,
   type: "button"
 }, /* @__PURE__ */ React.createElement(Icon, {
@@ -1732,7 +1782,7 @@ const KeyCodes = {
   arrowUp: "ArrowUp",
   arrowDown: "ArrowDown"
 };
-const baseClass$p = "modal-base";
+const baseClass$q = "modal-base";
 const ModalBase = (_A) => {
   var _B = _A, {
     children,
@@ -1747,7 +1797,7 @@ const ModalBase = (_A) => {
     "closeOnEscPress",
     "closeOnOverlayPress"
   ]);
-  const mergedClassNames = cx(styles$h[baseClass$p], className);
+  const mergedClassNames = cx(styles$i[baseClass$q], className);
   React.useEffect(() => {
     if (!closeOnEscPress) {
       return;
@@ -1773,14 +1823,14 @@ const ModalBase = (_A) => {
   return /* @__PURE__ */ React.createElement("div", {
     "data-testid": "lc-modal-overlay",
     onMouseDown: onOverlayClick,
-    className: cx(styles$h[`${baseClass$p}__overlay`], styles$h[`${baseClass$p}__overlay--visible`])
+    className: cx(styles$i[`${baseClass$q}__overlay`], styles$i[`${baseClass$q}__overlay--visible`])
   }, /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: mergedClassNames
   }, props), /* @__PURE__ */ React.createElement(ModalCloseButton, {
     onClick: onCloseButtonClick
   }), children));
 };
-const baseClass$o = "action-modal";
+const baseClass$p = "action-modal";
 const ActionModal = (_C) => {
   var _D = _C, {
     children,
@@ -1795,20 +1845,20 @@ const ActionModal = (_C) => {
     "heading",
     "actions"
   ]);
-  const mergedClassNames = cx(styles$h[baseClass$o], className);
+  const mergedClassNames = cx(styles$i[baseClass$p], className);
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
     className: mergedClassNames
   }, props), icon2 && /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$o}__icon`]
+    className: styles$i[`${baseClass$p}__icon`]
   }, icon2), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$o}__heading`]
+    className: styles$i[`${baseClass$p}__heading`]
   }, heading), /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$o}__content`]
+    className: styles$i[`${baseClass$p}__content`]
   }, children), actions && /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$o}__actions`]
+    className: styles$i[`${baseClass$p}__actions`]
   }, actions));
 };
-const baseClass$n = "modal";
+const baseClass$o = "modal";
 const Modal = (_E) => {
   var _F = _E, {
     children,
@@ -1821,19 +1871,19 @@ const Modal = (_E) => {
     "heading",
     "footer"
   ]);
-  const mergedClassNames = cx(styles$h[baseClass$n], className);
+  const mergedClassNames = cx(styles$i[baseClass$o], className);
   return /* @__PURE__ */ React.createElement(ModalBase, __spreadValues({
     className: mergedClassNames
   }, props), heading && /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$n}__header`]
+    className: styles$i[`${baseClass$o}__header`]
   }, /* @__PURE__ */ React.createElement(Heading, {
     size: "sm",
     as: "div",
-    className: styles$h[`${baseClass$n}__heading`]
+    className: styles$i[`${baseClass$o}__heading`]
   }, heading)), /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$n}__body`]
+    className: styles$i[`${baseClass$o}__body`]
   }, children), footer && /* @__PURE__ */ React.createElement("div", {
-    className: styles$h[`${baseClass$n}__footer`]
+    className: styles$i[`${baseClass$o}__footer`]
   }, footer));
 };
 const ModalPortal = ({
@@ -1859,7 +1909,7 @@ const ModalPortal = ({
   }, [parentElementName]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, ReactDOM.createPortal(children, container));
 };
-var styles$g = {
+var styles$h = {
   "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",
@@ -1867,7 +1917,7 @@ var styles$g = {
   "numeric-input--no-controls": "lc-NumericInput-module__numeric-input--no-controls___D90rG",
   "numeric-input--error": "lc-NumericInput-module__numeric-input--error___TMxRx"
 };
-const baseClass$m = "numeric-input";
+const baseClass$n = "numeric-input";
 const NumericInput = (_G) => {
   var _H = _G, {
     className,
@@ -1891,10 +1941,10 @@ const NumericInput = (_G) => {
     "onChange"
   ]);
   const inputRef = React.useRef(null);
-  const mergedClassNames = cx(styles$g[baseClass$m], {
-    [styles$g[`${baseClass$m}--error`]]: error,
-    [styles$g[`${baseClass$m}--no-controls`]]: noControls,
-    [styles$g[`${baseClass$m}--disabled`]]: disabled
+  const mergedClassNames = cx(styles$h[baseClass$n], {
+    [styles$h[`${baseClass$n}--error`]]: error,
+    [styles$h[`${baseClass$n}--no-controls`]]: noControls,
+    [styles$h[`${baseClass$n}--disabled`]]: disabled
   }, className);
   const callOnChange = (val) => onChange(String(val));
   const calcValue = (val) => {
@@ -1959,7 +2009,7 @@ const NumericInput = (_G) => {
     disabled: disabled || hasReachedTheLimit(value, max),
     onClick: handleIncrementClick,
     "aria-label": "Increment value",
-    className: styles$g[`${baseClass$m}__increment`],
+    className: styles$h[`${baseClass$n}__increment`],
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: ChevronUp,
@@ -1969,7 +2019,7 @@ const NumericInput = (_G) => {
     tabIndex: -1,
     disabled: disabled || hasReachedTheLimit(value, min),
     "aria-label": "Decrement value",
-    className: styles$g[`${baseClass$m}__decrement`],
+    className: styles$h[`${baseClass$n}__decrement`],
     onClick: handleDecrementClick,
     type: "button"
   }, /* @__PURE__ */ React.createElement(Icon, {
@@ -1978,7 +2028,7 @@ const NumericInput = (_G) => {
     disabled: disabled || hasReachedTheLimit(value, min)
   }))));
 };
-var styles$f = {
+var styles$g = {
   "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",
@@ -1995,7 +2045,7 @@ var styles$f = {
   "picker-trigger--focused": "lc-Trigger-module__picker-trigger--focused___vTr39",
   "picker-trigger--error": "lc-Trigger-module__picker-trigger--error___Rh8Qd"
 };
-const baseClass$l = "picker-trigger";
+const baseClass$m = "picker-trigger";
 const Trigger = ({
   children,
   isSearchDisabled,
@@ -2010,7 +2060,7 @@ const Trigger = ({
   onClear
 }) => {
   const triggerRef = React.useRef(null);
-  const mergedClassNames = cx(styles$f[baseClass$l], styles$f[`${baseClass$l}--${size}`], isMultiSelect && styles$f[`${baseClass$l}--multi-select`], isMultiSelect && isItemSelected && styles$f[`${baseClass$l}--multi-select--with-items`], isDisabled && styles$f[`${baseClass$l}--disabled`], isOpen && styles$f[`${baseClass$l}--focused`], isError && styles$f[`${baseClass$l}--error`]);
+  const mergedClassNames = cx(styles$g[baseClass$m], styles$g[`${baseClass$m}--${size}`], isMultiSelect && styles$g[`${baseClass$m}--multi-select`], isMultiSelect && isItemSelected && styles$g[`${baseClass$m}--multi-select--with-items`], isDisabled && styles$g[`${baseClass$m}--disabled`], isOpen && styles$g[`${baseClass$m}--focused`], isError && styles$g[`${baseClass$m}--error`]);
   React.useEffect(() => {
     const onKeyDown = (e) => {
       const isFocused = document.activeElement === triggerRef.current;
@@ -2040,34 +2090,35 @@ const Trigger = ({
     onClick: handleTriggerClick,
     tabIndex: 0
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$f[`${baseClass$l}__content`], isMultiSelect && styles$f[`${baseClass$l}__content--multi-select`])
+    className: styles$g[`${baseClass$m}__content`]
   }, children), /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$f[`${baseClass$l}__controls`], styles$f[`${baseClass$l}__controls--${size}`])
+    className: cx(styles$g[`${baseClass$m}__controls`], styles$g[`${baseClass$m}__controls--${size}`])
   }, isItemSelected && !isDisabled && !isRequired && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$l}__clear-icon`,
-    className: styles$f[`${baseClass$l}__clear-icon`],
+    "data-testid": `${baseClass$m}__clear-icon`,
+    className: styles$g[`${baseClass$m}__clear-icon`],
     onClick: handleOnClearClick
   }, /* @__PURE__ */ React.createElement(Icon, {
     kind: "primary",
     size: "small",
     source: Close
   })), /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$f[`${baseClass$l}__chevron-icon`],
+    className: styles$g[`${baseClass$m}__chevron-icon`],
     source: !isOpen ? ChevronDown : ChevronUp,
     size: "large",
     disabled: isDisabled
   })));
 };
-var styles$e = {
+var styles$f = {
   "picker-list": "lc-PickerList-module__picker-list___FqdgZ",
   "picker-list__no-results": "lc-PickerList-module__picker-list__no-results___tX172",
   "picker-list__item": "lc-PickerList-module__picker-list__item___8QNS0",
   "picker-list__item--select-all": "lc-PickerList-module__picker-list__item--select-all___PlTHV",
-  "picker-list__item__header": "lc-PickerList-module__picker-list__item__header___mxmg0"
+  "picker-list__item__header": "lc-PickerList-module__picker-list__item__header___mxmg0",
+  "picker-list__item__custom": "lc-PickerList-module__picker-list__item__custom___kJEP6"
 };
 const SELECT_ALL_OPTION_KEY = "select-all";
-const baseClass$k = "picker-list";
-const itemClassName = `${baseClass$k}__item`;
+const baseClass$l = "picker-list";
+const itemClassName = `${baseClass$l}__item`;
 const PickerList = ({
   isOpen,
   items,
@@ -2079,8 +2130,8 @@ const PickerList = ({
   onSelect,
   onSelectAll
 }) => {
-  const mergedClassNames = cx(styles$e[baseClass$k], {
-    [styles$e[`${baseClass$k}__no-results`]]: items.length === 0
+  const mergedClassNames = cx(styles$f[baseClass$l], {
+    [styles$f[`${baseClass$l}__no-results`]]: items.length === 0
   });
   const [currentItemKey, setCurrentItemKey] = React.useState(null);
   const indexRef = React.useRef(-1);
@@ -2174,10 +2225,18 @@ const PickerList = ({
       "aria-current": currentItemKey === SELECT_ALL_OPTION_KEY,
       id: SELECT_ALL_OPTION_KEY,
       key: SELECT_ALL_OPTION_KEY,
-      className: cx(styles$e[itemClassName], styles$e[`${itemClassName}--select-all`]),
+      className: cx(styles$f[itemClassName], styles$f[`${itemClassName}--select-all`]),
       onClick: handleOnSelectAllClick
     }, selectAllOptionText);
   };
+  const getOptionContent = (item) => {
+    if (item == null ? void 0 : item.customElement) {
+      return /* @__PURE__ */ React.createElement("div", {
+        className: styles$f[`${itemClassName}__custom`]
+      }, item.customElement.listItemBody);
+    }
+    return item.name;
+  };
   if (!isOpen) {
     return null;
   }
@@ -2196,7 +2255,7 @@ const PickerList = ({
       return /* @__PURE__ */ React.createElement("li", {
         role: "option",
         key: item.key,
-        className: styles$e[`${itemClassName}__header`]
+        className: styles$f[`${itemClassName}__header`]
       }, item.name);
     }
     return /* @__PURE__ */ React.createElement("li", {
@@ -2211,9 +2270,11 @@ const PickerList = ({
       "aria-disabled": item.disabled,
       id: item.key,
       key: item.key,
-      className: styles$e[itemClassName],
+      className: cx(styles$f[itemClassName], {
+        [styles$f[`${itemClassName}__custom`]]: item == null ? void 0 : item.customElement
+      }),
       onClick: () => !item.disabled && handleOnClick(item)
-    }, item.name, isItemSelected(item.key) && /* @__PURE__ */ React.createElement(Icon, {
+    }, getOptionContent(item), isItemSelected(item.key) && /* @__PURE__ */ React.createElement(Icon, {
       kind: "link",
       source: Check
     }));
@@ -2224,7 +2285,7 @@ const picker__container = "lc-Picker-module__picker__container___s0PUc";
 const picker__label = "lc-Picker-module__picker__label___Ac7Vu";
 const picker__error = "lc-Picker-module__picker__error___H865k";
 const picker__error__icon = "lc-Picker-module__picker__error__icon___bbL7r";
-var styles$d = {
+var styles$e = {
   picker,
   picker__container,
   picker__label,
@@ -2237,7 +2298,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$c = {
+var styles$d = {
   tag,
   "tag--success": "lc-Tag-module__tag--success___P2hXQ",
   tag__remove,
@@ -2255,7 +2316,7 @@ var styles$c = {
   tag__icon,
   tag__avatar
 };
-const baseClass$j = "tag";
+const baseClass$k = "tag";
 const getCustomTextClass = (customColor) => {
   if (!customColor) {
     return "";
@@ -2286,11 +2347,11 @@ const Tag = (_I) => {
     "avatar",
     "customColor"
   ]);
-  const mergedClassNames = cx(styles$c[baseClass$j], className, styles$c[`${baseClass$j}--${size}`], styles$c[`${baseClass$j}--${kind}`], {
-    [styles$c[`${baseClass$j}--dismissible`]]: dismissible,
-    [styles$c[`${baseClass$j}--outline`]]: outline,
-    [styles$c[`${baseClass$j}--with-icon`]]: !!icon2 || !!avatar2,
-    [styles$c[`${baseClass$j}--${getCustomTextClass(customColor)}`]]: !!customColor
+  const mergedClassNames = cx(styles$d[baseClass$k], className, styles$d[`${baseClass$k}--${size}`], styles$d[`${baseClass$k}--${kind}`], {
+    [styles$d[`${baseClass$k}--dismissible`]]: dismissible,
+    [styles$d[`${baseClass$k}--outline`]]: outline,
+    [styles$d[`${baseClass$k}--with-icon`]]: !!icon2 || !!avatar2,
+    [styles$d[`${baseClass$k}--${getCustomTextClass(customColor)}`]]: !!customColor
   });
   const getCustomColorStyles = () => {
     if (!customColor) {
@@ -2322,13 +2383,13 @@ const Tag = (_I) => {
     as: "div",
     size: "md"
   }), avatar2 && /* @__PURE__ */ React.createElement("img", {
-    className: styles$c[`${baseClass$j}__avatar`],
+    className: styles$d[`${baseClass$k}__avatar`],
     src: avatar2,
     alt: "tag-avatar",
     "data-testid": "lc-tag-avatar"
   }), " ", icon2 && !avatar2 && /* @__PURE__ */ React.createElement(Icon, {
     "data-testid": "lc-tag-icon",
-    className: styles$c[`${baseClass$j}__icon`],
+    className: styles$d[`${baseClass$k}__icon`],
     source: icon2,
     size: "small",
     customColor: getIconCustomColor()
@@ -2336,7 +2397,7 @@ const Tag = (_I) => {
     title: "Remove",
     onClick: onRemove,
     type: "button",
-    className: styles$c[`${baseClass$j}__remove`]
+    className: styles$d[`${baseClass$k}__remove`]
   }, /* @__PURE__ */ React.createElement(Icon, {
     "data-dismiss-icon": true,
     source: Close,
@@ -2344,11 +2405,11 @@ const Tag = (_I) => {
     customColor: getIconCustomColor()
   })));
 };
-var styles$b = {
+var styles$c = {
   "picker-trigger-body": "lc-TriggerBody-module__picker-trigger-body___ZWjX9",
   "picker-trigger-body__input": "lc-TriggerBody-module__picker-trigger-body__input___ezPyz"
 };
-const baseClass$i = "picker-trigger-body";
+const baseClass$j = "picker-trigger-body";
 const TriggerBody = ({
   isOpen,
   isSearchDisabled,
@@ -2359,17 +2420,22 @@ const TriggerBody = ({
   onFilter
 }) => {
   const shouldDisplaySearch = isOpen && !isSearchDisabled;
-  const getSingleItem = (name) => {
-    if (isOpen && !isSearchDisabled) {
+  const getSingleItem = (item) => {
+    if (type === "single" && isOpen && !isSearchDisabled) {
       return null;
     }
-    return name;
+    if (item == null ? void 0 : item.customElement) {
+      return /* @__PURE__ */ React.createElement("div", {
+        className: styles$c[`${baseClass$j}__custom`]
+      }, item.customElement.selectedItemBody);
+    }
+    return item.name;
   };
   const handleOnChange = (e) => {
     onFilter(e.target.value);
   };
   const getSearch = () => /* @__PURE__ */ React.createElement("input", {
-    className: styles$b[`${baseClass$i}__input`],
+    className: styles$c[`${baseClass$j}__input`],
     placeholder: "Select option",
     onChange: handleOnChange,
     autoFocus: true
@@ -2378,17 +2444,17 @@ const TriggerBody = ({
     return shouldDisplaySearch ? getSearch() : /* @__PURE__ */ React.createElement("div", null, placeholder);
   }
   return /* @__PURE__ */ React.createElement("div", {
-    className: styles$b[baseClass$i]
-  }, type === "single" ? getSingleItem(items[0].name) : items.map((item) => {
+    className: styles$c[baseClass$j]
+  }, type === "single" ? getSingleItem(items[0]) : items.map((item) => {
     return /* @__PURE__ */ React.createElement(Tag, {
       key: item.name,
-      className: styles$b[`${baseClass$i}__tag`],
+      className: styles$c[`${baseClass$j}__tag`],
       dismissible: true,
       onRemove: () => onItemRemove(item)
-    }, item.name);
+    }, getSingleItem(item));
   }), shouldDisplaySearch && getSearch());
 };
-const baseClass$h = "picker";
+const baseClass$i = "picker";
 const Picker = ({
   className,
   disabled,
@@ -2408,7 +2474,7 @@ const Picker = ({
   const [isListOpen, setIsListOpen] = React.useState(false);
   const [searchPhrase, setSearchPhrase] = React.useState(null);
   const triggerRef = React.useRef(null);
-  const mergedClassNames = cx(styles$d[baseClass$h], className);
+  const mergedClassNames = cx(styles$e[baseClass$i], className);
   React.useEffect(() => {
     if (isListOpen) {
       const onDocumentClick = (e) => {
@@ -2500,11 +2566,11 @@ const Picker = ({
     ref: triggerRef,
     className: mergedClassNames
   }, label && /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$d[`${baseClass$h}__label`], {
-      [styles$d[`${baseClass$h}__label--disabled`]]: disabled
+    className: cx(styles$e[`${baseClass$i}__label`], {
+      [styles$e[`${baseClass$i}__label--disabled`]]: disabled
     })
   }, label), /* @__PURE__ */ React.createElement("div", {
-    className: styles$d[`${baseClass$h}__container`]
+    className: styles$e[`${baseClass$i}__container`]
   }, /* @__PURE__ */ React.createElement(Trigger, {
     isSearchDisabled: searchDisabled,
     isError: !!error,
@@ -2535,9 +2601,9 @@ const Picker = ({
     onSelect: handleSelect,
     onSelectAll: handleSelectAll
   })), error && /* @__PURE__ */ React.createElement("div", {
-    className: styles$d[`${baseClass$h}__error`]
+    className: styles$e[`${baseClass$i}__error`]
   }, /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$d[`${baseClass$h}__error__icon`],
+    className: styles$e[`${baseClass$i}__error__icon`],
     source: Error2,
     kind: "error",
     size: "small"
@@ -2636,7 +2702,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",
@@ -2662,7 +2728,7 @@ const SIZE_VALUE_FROM_SIZE = {
   medium: 36,
   large: 56
 };
-const baseClass$g = "progress-circle";
+const baseClass$h = "progress-circle";
 const ProgressCircle = React.forwardRef((_K, ref) => {
   var _L = _K, {
     status = "normal",
@@ -2679,9 +2745,9 @@ const ProgressCircle = React.forwardRef((_K, ref) => {
   const percentNumber = getPercentNumber(progressStatus, progressValue);
   const thickness = THICKNESS_FROM_SIZE[size];
   const sizeValue = SIZE_VALUE_FROM_SIZE[size];
-  const mergedClassNames = cx(styles$a[baseClass$g], {
-    [styles$a[`${baseClass$g}--${size}`]]: size,
-    [styles$a[`${baseClass$g}--${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 = {
@@ -2696,14 +2762,14 @@ const ProgressCircle = React.forwardRef((_K, ref) => {
   }, restProps), /* @__PURE__ */ React.createElement("svg", {
     viewBox: svgViewBox
   }, /* @__PURE__ */ React.createElement("circle", {
-    className: styles$a[`${baseClass$g}__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$g}__indicator--${status}`],
+    className: styles$b[`${baseClass$h}__indicator--${status}`],
     style: indicatorStyle,
     cx: sizeValue,
     cy: sizeValue,
@@ -2712,7 +2778,7 @@ const ProgressCircle = React.forwardRef((_K, 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",
@@ -2723,7 +2789,7 @@ 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$f = "progress-bar";
+const baseClass$g = "progress-bar";
 const ProgressBar = React.forwardRef((_M, ref) => {
   var _N = _M, {
     status = "normal",
@@ -2738,20 +2804,20 @@ const ProgressBar = React.forwardRef((_M, ref) => {
   ]);
   const progressStatus = getProgressStatus(status, percent);
   const percentNumber = getPercentNumber(progressStatus, percent);
-  const mergedClassNames = cx(styles$9[baseClass$f], {
-    [styles$9[`${baseClass$f}--${size}`]]: size,
-    [styles$9[`${baseClass$f}--${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$f}__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",
@@ -2767,7 +2833,7 @@ var styles$8 = {
 const SMALL_CONTAINER_WIDTH_TRESHOLD = 400;
 const LARGE_CONTAINER_WIDTH_TRESHOLD = 800;
 const RESIZE_DEBOUNCE_TRESHOLD = 500;
-const baseClass$e = "promo-banner";
+const baseClass$f = "promo-banner";
 const PromoBanner = ({
   className,
   buttonText,
@@ -2782,10 +2848,10 @@ const PromoBanner = ({
 }) => {
   const containerRef = React.useRef(null);
   const [containerSize, setContainerSize] = React.useState("medium");
-  const mergedClassNames = cx(styles$8[baseClass$e], {
-    [styles$8[`${baseClass$e}--light`]]: light,
-    [styles$8[`${baseClass$e}--small`]]: containerSize === "small",
-    [styles$8[`${baseClass$e}--large`]]: containerSize === "large"
+  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 = () => {
@@ -2806,12 +2872,12 @@ const PromoBanner = ({
     };
   }, []);
   const footer = /* @__PURE__ */ React.createElement("div", {
-    className: styles$8[`${baseClass$e}__footer`]
+    className: styles$9[`${baseClass$f}__footer`]
   }, buttonText && /* @__PURE__ */ React.createElement(Button, {
     kind: "primary",
     size: "compact",
     onClick: onButtonClick,
-    className: styles$8[`${baseClass$e}__button-text`]
+    className: styles$9[`${baseClass$f}__button-text`]
   }, buttonText), linkText && /* @__PURE__ */ React.createElement(Button, {
     size: "compact",
     kind: "text",
@@ -2821,24 +2887,24 @@ const PromoBanner = ({
     ref: containerRef,
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$8[`${baseClass$e}__content`]
+    className: styles$9[`${baseClass$f}__content`]
   }, img && /* @__PURE__ */ React.createElement("img", {
     src: img,
-    className: styles$8[`${baseClass$e}__img`]
+    className: styles$9[`${baseClass$f}__img`]
   }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$8[`${baseClass$e}__wrapper`]
+    className: styles$9[`${baseClass$f}__wrapper`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$8[`${baseClass$e}__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$e}__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",
@@ -2849,23 +2915,23 @@ 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$d = "radio-button";
+const baseClass$e = "radio-button";
 const RadioButton = React.forwardRef((_O, ref) => {
   var _P = _O, { children, className = "", description, checked, disabled } = _P, props = __objRest(_P, ["children", "className", "description", "checked", "disabled"]);
-  const mergedClassNames = cx(styles$7[baseClass$d], className, {
-    [styles$7[`${baseClass$d}--selected`]]: checked,
-    [styles$7[`${baseClass$d}--disabled`]]: 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$d}__label`]
+    className: styles$8[`${baseClass$e}__label`]
   }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$7[`${baseClass$d}__circle`]
+    className: styles$8[`${baseClass$e}__circle`]
   }, /* @__PURE__ */ React.createElement("span", {
-    className: styles$7[`${baseClass$d}__inner-circle`]
+    className: styles$8[`${baseClass$e}__inner-circle`]
   }), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
-    className: styles$7[`${baseClass$d}__input`],
+    className: styles$8[`${baseClass$e}__input`],
     ref,
     type: "radio",
     checked,
@@ -2873,12 +2939,12 @@ const RadioButton = React.forwardRef((_O, ref) => {
   }))), children && /* @__PURE__ */ React.createElement(Text, {
     as: "div",
     size: "md",
-    className: styles$7[`${baseClass$d}__text`]
+    className: styles$8[`${baseClass$e}__text`]
   }, children)), description && /* @__PURE__ */ React.createElement(FieldDescription, {
-    className: styles$7[`${baseClass$d}__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",
@@ -2891,8 +2957,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$c = "search-input";
-const inputBaseClass = `${baseClass$c}__input`;
+const baseClass$d = "search-input";
+const inputBaseClass = `${baseClass$d}__input`;
 const SearchInput = ({
   isCollapsable,
   isDisabled,
@@ -2907,7 +2973,7 @@ const SearchInput = ({
   const [isCollapsed, setIsCollapsed] = React.useState(true);
   const inputRef = React.useRef(null);
   const isCloseIconVisible = !!searchValue && !isDisabled && !isLoading;
-  const mergedClassNames = cx(className, styles$6[`${inputBaseClass}`], styles$6[`${inputBaseClass}--${size}`], (isDisabled || isLoading) && styles$6[`${inputBaseClass}--disabled`], isCollapsable && styles$6[`${inputBaseClass}--collapsable`], !isCollapsed && styles$6[`${inputBaseClass}--collapsable--open`]);
+  const mergedClassNames = cx(className, styles$7[`${inputBaseClass}`], styles$7[`${inputBaseClass}--${size}`], (isDisabled || isLoading) && styles$7[`${inputBaseClass}--disabled`], isCollapsable && styles$7[`${inputBaseClass}--collapsable`], !isCollapsed && styles$7[`${inputBaseClass}--collapsable--open`]);
   React.useEffect(() => {
     if (typeof value === "string") {
       setSearchValue(value);
@@ -2943,11 +3009,11 @@ const SearchInput = ({
     }
   };
   return /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$c}-container`,
-    className: styles$6[baseClass$c],
+    "data-testid": `${baseClass$d}-container`,
+    className: styles$7[baseClass$d],
     onClick: handleClick
   }, /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$6[`${baseClass$c}__search-icon`],
+    className: styles$7[`${baseClass$d}__search-icon`],
     source: Search,
     disabled: isDisabled || isLoading,
     kind: "primary"
@@ -2963,14 +3029,14 @@ const SearchInput = ({
     onKeyDown: handleKeyDown,
     disabled: isDisabled || isLoading
   }), isCloseIconVisible && /* @__PURE__ */ React.createElement("div", {
-    className: styles$6[`${baseClass$c}__clear-icon`],
-    "data-testid": `${baseClass$c}-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$c}-loader`,
-    className: styles$6[`${baseClass$c}__loader`]
+    "data-testid": `${baseClass$d}-loader`,
+    className: styles$7[`${baseClass$d}__loader`]
   }, /* @__PURE__ */ React.createElement(Loader, {
     size: "small"
   })));
@@ -2981,7 +3047,7 @@ const switch__track = "lc-Switch-module__switch__track___2wr2M";
 const switch__slider = "lc-Switch-module__switch__slider___WHd--";
 const switch__loader = "lc-Switch-module__switch__loader___FE-fA";
 const switch__icon = "lc-Switch-module__switch__icon___-O1qY";
-var styles$5 = {
+var styles$6 = {
   "switch": "lc-Switch-module__switch___AaA2k",
   "switch__track--enabled": "lc-Switch-module__switch__track--enabled___sy4Xl",
   "switch__track--on": "lc-Switch-module__switch__track--on___aOMWe",
@@ -3010,13 +3076,13 @@ var styles$5 = {
   "switch__loader--large": "lc-Switch-module__switch__loader--large___vLRFa",
   switch__icon
 };
-const baseClass$b = "switch";
+const baseClass$c = "switch";
 const Switch = (_Q) => {
   var _R = _Q, {
     className = "",
     defaultOn = false,
     disabled = false,
-    name = baseClass$b,
+    name = baseClass$c,
     on,
     onChange = noop,
     size = "large",
@@ -3047,7 +3113,7 @@ const Switch = (_Q) => {
   const toggleStyles = checked ? "on" : "off";
   const shouldBehaveAsDisabled = disabled || isLoading || isLocked;
   const availabilityStyles = shouldBehaveAsDisabled ? "disabled" : "enabled";
-  const mergedClassNames = cx(styles$5[baseClass$b], styles$5[`${baseClass$b}--${size}`], className);
+  const mergedClassNames = cx(styles$6[baseClass$c], styles$6[`${baseClass$c}--${size}`], className);
   const handleChange = (e) => {
     const hasOnChangePassed = onChange !== noop;
     if (hasOnChangePassed) {
@@ -3061,7 +3127,7 @@ const Switch = (_Q) => {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("input", __spreadValues({
     type: "checkbox",
-    className: cx(styles$5[`${baseClass$b}__input`], styles$5[`${baseClass$b}__input--${availabilityStyles}`]),
+    className: cx(styles$6[`${baseClass$c}__input`], styles$6[`${baseClass$c}__input--${availabilityStyles}`]),
     onChange: handleChange,
     checked,
     name,
@@ -3069,15 +3135,15 @@ const Switch = (_Q) => {
     disabled: shouldBehaveAsDisabled,
     "aria-label": ariaLabel
   }, props)), /* @__PURE__ */ React.createElement("span", {
-    className: styles$5[`${baseClass$b}__container`]
+    className: styles$6[`${baseClass$c}__container`]
   }, /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$5[`${baseClass$b}__track`], styles$5[`${baseClass$b}__track--${toggleStyles}`], styles$5[`${baseClass$b}__track--${availabilityStyles}`])
+    className: cx(styles$6[`${baseClass$c}__track`], styles$6[`${baseClass$c}__track--${toggleStyles}`], styles$6[`${baseClass$c}__track--${availabilityStyles}`])
   }), /* @__PURE__ */ React.createElement("span", {
-    className: cx(styles$5[`${baseClass$b}__slider`], styles$5[`${baseClass$b}__slider--${size}`], styles$5[`${baseClass$b}__slider--${size}--${toggleStyles}`])
+    className: cx(styles$6[`${baseClass$c}__slider`], styles$6[`${baseClass$c}__slider--${size}`], styles$6[`${baseClass$c}__slider--${size}--${toggleStyles}`])
   }, isLoading && /* @__PURE__ */ React.createElement(Loader, {
-    className: cx(styles$5[`${baseClass$b}__loader`], styles$5[`${baseClass$b}__loader--${size}`])
+    className: cx(styles$6[`${baseClass$c}__loader`], styles$6[`${baseClass$c}__loader--${size}`])
   }), isLocked && /* @__PURE__ */ React.createElement(Icon, {
-    className: styles$5[`${baseClass$b}__icon`],
+    className: styles$6[`${baseClass$c}__icon`],
     "data-testid": "lock-icon",
     size: iconSize,
     source: LockBlack,
@@ -3086,12 +3152,12 @@ const Switch = (_Q) => {
 };
 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$a = "tab";
+const baseClass$b = "tab";
 const Tab = (_S) => {
   var _T = _S, {
     children,
@@ -3108,26 +3174,26 @@ const Tab = (_S) => {
     as: restProps.href ? "a" : "button",
     size: "md",
     bold: isSelected,
-    className: cx(styles$4[baseClass$a], className, isSelected && styles$4[`${baseClass$a}--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$a}__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$9 = "tabs";
+const baseClass$a = "tabs";
 const TabsWrapper = ({
   className,
   children
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$3[baseClass$9], className)
+    className: cx(styles$4[baseClass$a], className)
   }, children);
 };
 const TabsList = ({
@@ -3135,7 +3201,7 @@ const TabsList = ({
   children
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$3[`${baseClass$9}__list`], className)
+    className: cx(styles$4[`${baseClass$a}__list`], className)
   }, children);
 };
 const EditableTagContent = ({
@@ -3195,7 +3261,7 @@ const EditableTagContent = ({
     dangerouslySetInnerHTML: { __html: escape(value) }
   });
 };
-var styles$2 = {
+var styles$3 = {
   "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",
@@ -3203,7 +3269,7 @@ var styles$2 = {
   "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$8 = "tag-input__tag";
+const baseClass$9 = "tag-input__tag";
 const EditableTag = ({
   children,
   index: index2,
@@ -3227,13 +3293,13 @@ const EditableTag = ({
     value: children,
     inputRef,
     innerEditableRef,
-    className: styles$2[`${baseClass$8}__content`],
+    className: styles$3[`${baseClass$9}__content`],
     change: (newValue) => update(index2, newValue),
     remove: removeTag,
     validator
   }));
 };
-const baseClass$7 = "tag-input";
+const baseClass$8 = "tag-input";
 const tagSeparatorKeys = [
   KeyCodes.enter,
   KeyCodes.spacebar,
@@ -3251,10 +3317,10 @@ const TagInput = ({
   placeholder,
   size = "medium"
 }) => {
-  const mergedClassNames = cx(styles$2[baseClass$7], {
-    [styles$2[`${baseClass$7}--error`]]: error
+  const mergedClassNames = cx(styles$3[baseClass$8], {
+    [styles$3[`${baseClass$8}--error`]]: error
   });
-  const inputClassNames = cx(styles$2[`${baseClass$7}__input`], styles$2[`${baseClass$7}__input--${size}`]);
+  const inputClassNames = cx(styles$3[`${baseClass$8}__input`], styles$3[`${baseClass$8}__input--${size}`]);
   const [inputValue, setInputValue] = React.useState("");
   const inputRef = React.useRef(null);
   const addTag = (value) => {
@@ -3344,7 +3410,7 @@ const EmailTagInput = ({
 const toast = "lc-Toast-module__toast___j5Amn";
 const toast__content = "lc-Toast-module__toast__content___HjaNw";
 const toast__actions = "lc-Toast-module__toast__actions___JWu-1";
-var styles$1 = {
+var styles$2 = {
   toast,
   toast__content,
   toast__actions,
@@ -3380,15 +3446,14 @@ const iconConfig = {
     source: Warning
   },
   error: {
-    source: Error2,
+    source: Block,
     kind: "inverted"
   },
   info: {
-    source: Info$1,
-    kind: "inverted"
+    source: Info$1
   }
 };
-const baseClass$6 = "toast";
+const baseClass$7 = "toast";
 const Toast = (_U) => {
   var _V = _U, {
     action,
@@ -3405,7 +3470,7 @@ const Toast = (_U) => {
     "kind",
     "onClose"
   ]);
-  const mergedClassNames = cx(styles$1[baseClass$6], styles$1[`${baseClass$6}--${kind}`], className);
+  const mergedClassNames = cx(styles$2[baseClass$7], styles$2[`${baseClass$7}--${kind}`], className);
   const onActionClick = (action2) => {
     if (action2 && action2.closesOnClick && onClose) {
       action2.onClick();
@@ -3416,29 +3481,29 @@ const Toast = (_U) => {
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: mergedClassNames
   }, divProps), /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$6}__icon`]
+    className: styles$2[`${baseClass$7}__icon`]
   }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, iconConfig[kind]), {
     size: "medium"
   }))), /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$6}__content`]
+    className: styles$2[`${baseClass$7}__content`]
   }, children), (action || removable) && /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$6}__actions`]
+    className: styles$2[`${baseClass$7}__actions`]
   }, action && /* @__PURE__ */ React.createElement(Button, {
-    className: styles$1[`${baseClass$6}__actions--custom`],
+    className: styles$2[`${baseClass$7}__actions--custom`],
     kind: "plain",
     onClick: () => onActionClick(action)
   }, action.label), removable && /* @__PURE__ */ React.createElement("div", {
-    className: styles$1[`${baseClass$6}__actions--close`],
+    className: styles$2[`${baseClass$7}__actions--close`],
     "aria-label": "Close toast",
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
     size: "medium",
-    kind: ["warning"].includes(kind) ? "primary" : "inverted"
+    kind: ["warning", "info"].includes(kind) ? "primary" : "inverted"
   }))));
 };
 const ANIMATION_TIME = 200;
-const baseClass$5 = "toast-wrapper";
+const baseClass$6 = "toast-wrapper";
 const ToastWrapper = ({
   className,
   toasts = [],
@@ -3448,11 +3513,11 @@ const ToastWrapper = ({
   verticalPosition = "top",
   horizontalPosition = "center"
 }) => {
-  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
+  const mergedClassNames = cx(styles$2[baseClass$6], {
+    [styles$2[`${baseClass$6}--fixed`]]: fixed,
+    [styles$2[`${baseClass$6}--block`]]: !fixed && block,
+    [styles$2[`${baseClass$6}--horizontal-${horizontalPosition}`]]: horizontalPosition,
+    [styles$2[`${baseClass$6}--vertical-${verticalPosition}`]]: verticalPosition
   }, className);
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
@@ -3461,10 +3526,10 @@ const ToastWrapper = ({
   }, toasts.map(({ id, kind, content, removable, action, onClose }) => /* @__PURE__ */ React.createElement(CSSTransition, {
     key: id,
     classNames: {
-      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}`]
+      enter: styles$2[`toast-appear--${animationType}`],
+      enterActive: styles$2[`toast-appear-active--${animationType}`],
+      exit: styles$2[`toast-exit--${animationType}`],
+      exitActive: styles$2[`toast-exit-active--${animationType}`]
     },
     timeout: ANIMATION_TIME
   }, /* @__PURE__ */ React.createElement(Toast, {
@@ -3476,7 +3541,7 @@ const ToastWrapper = ({
 };
 const tooltip = "lc-Tooltip-module__tooltip___QOOAr";
 const tooltip__arrow = "lc-Tooltip-module__tooltip__arrow___Ov1YW";
-var styles = {
+var styles$1 = {
   tooltip,
   "tooltip--invert": "lc-Tooltip-module__tooltip--invert___PVjhE",
   "tooltip--important": "lc-Tooltip-module__tooltip--important___X-IMK",
@@ -3494,7 +3559,7 @@ var styles = {
 const sleep = (milliseconds) => {
   return new Promise((resolve) => setTimeout(resolve, milliseconds));
 };
-const baseClass$4 = "tooltip";
+const baseClass$5 = "tooltip";
 const Tooltip = (props) => {
   const {
     triggerRenderer,
@@ -3604,9 +3669,9 @@ const Tooltip = (props) => {
   };
   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 mergedClassNames = cx(styles$1[baseClass$5], className, {
+    [styles$1[`${baseClass$5}--invert`]]: theme === "invert",
+    [styles$1[`${baseClass$5}--important`]]: theme === "important"
   });
   const floatingComponent = /* @__PURE__ */ React.createElement("div", {
     ref: floating,
@@ -3628,7 +3693,7 @@ const Tooltip = (props) => {
     return null;
   }), /* @__PURE__ */ React.createElement("div", {
     ref: arrowRef,
-    className: cx([styles[`${baseClass$4}__arrow`]]),
+    className: cx([styles$1[`${baseClass$5}__arrow`]]),
     "data-arrow-placement": updatedPlacement,
     style: { top, left }
   }));
@@ -3704,23 +3769,23 @@ function getIconType(theme) {
       return "primary";
   }
 }
-const baseClass$3 = "tooltip";
+const baseClass$4 = "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`],
+    className: styles$1[`${baseClass$4}-close`],
     onClick: handleCloseAction
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
     kind: theme ? getIconType(theme) : "primary"
   })), header && /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$3}-header`]
+    className: styles$1[`${baseClass$4}-header`]
   }, header), /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$3}-text`]
+    className: styles$1[`${baseClass$4}-text`]
   }, text));
 };
-const baseClass$2 = "tooltip";
+const baseClass$3 = "tooltip";
 const Interactive = ({
   header,
   text,
@@ -3737,7 +3802,7 @@ const Interactive = ({
   }, /* @__PURE__ */ React.createElement("div", {
     style: { position: "relative", height: "25px", marginBottom: "10px" }
   }, closeWithX && /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$2}-close`]
+    className: styles$1[`${baseClass$3}-close`]
   }, /* @__PURE__ */ React.createElement("div", {
     onClick: handleCloseAction
   }, /* @__PURE__ */ React.createElement(Icon, {
@@ -3746,13 +3811,13 @@ const Interactive = ({
   })))), image && /* @__PURE__ */ React.createElement("div", {
     style: { margin: "0 4px" }
   }, /* @__PURE__ */ React.createElement("img", {
-    className: styles[`${baseClass$2}-image`],
+    className: styles$1[`${baseClass$3}-image`],
     src: image.src,
     alt: image.alt
   })), header && /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$2}-header`]
+    className: styles$1[`${baseClass$3}-header`]
   }, header), /* @__PURE__ */ React.createElement("div", {
-    className: styles[`${baseClass$2}-text`]
+    className: styles$1[`${baseClass$3}-text`]
   }, text), /* @__PURE__ */ React.createElement("div", {
     style: { margin: "4px" }
   }, /* @__PURE__ */ React.createElement(Button, {
@@ -3768,7 +3833,7 @@ const Interactive = ({
     }
   }, "Link")));
 };
-const baseClass$1 = "guide-tooltip";
+const baseClass$2 = "guide-tooltip";
 const SpotlightOverlay = ({
   gap,
   isVisible,
@@ -3810,37 +3875,37 @@ const SpotlightOverlay = ({
   };
   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
+      [styles$1[`${baseClass$2}__overlay`]]: true,
+      [styles$1[`${baseClass$2}__overlay--visible`]]: isVisible,
+      [styles$1[`${baseClass$2}__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
+      [styles$1[`${baseClass$2}__overlay`]]: true,
+      [styles$1[`${baseClass$2}__overlay--visible`]]: isVisible,
+      [styles$1[`${baseClass$2}__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
+      [styles$1[`${baseClass$2}__overlay`]]: true,
+      [styles$1[`${baseClass$2}__overlay--visible`]]: isVisible,
+      [styles$1[`${baseClass$2}__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
+      [styles$1[`${baseClass$2}__overlay`]]: true,
+      [styles$1[`${baseClass$2}__overlay--visible`]]: isVisible,
+      [styles$1[`${baseClass$2}__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
+      [styles$1[`${baseClass$2}__overlay`]]: true,
+      [styles$1[`${baseClass$2}__overlay--visible`]]: isVisible,
+      [styles$1[`${baseClass$2}__overlay--slide`]]: slide
     }),
     style: spotlight
   }));
@@ -3883,7 +3948,7 @@ class VirtualReference {
   }
 }
 const spotlightPadding = 8;
-const baseClass = "guide-tooltip";
+const baseClass$1 = "guide-tooltip";
 const virtualReference = (element, padding) => new VirtualReference(element, padding);
 const UserGuide = (props) => {
   const {
@@ -3935,10 +4000,35 @@ const UserGuide = (props) => {
     },
     arrowOffsetY: 25,
     className: cx({
-      [styles[baseClass]]: true,
-      [styles[`${baseClass}--slide`]]: isSliding,
+      [styles$1[baseClass$1]]: true,
+      [styles$1[`${baseClass$1}--slide`]]: isSliding,
       className
     })
   }), props.children)) : null;
 };
-export { ANIMATION_TIME, ActionModal, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Toast, ToastWrapper, Tooltip, UserGuide };
+const textarea = "lc-Textarea-module__textarea___g6U8F";
+var styles = {
+  textarea,
+  "textarea--focused": "lc-Textarea-module__textarea--focused___1vtEx",
+  "textarea--disabled": "lc-Textarea-module__textarea--disabled___xXaGv",
+  "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
+};
+const baseClass = "textarea";
+const Textarea = React.forwardRef((_W, ref) => {
+  var _X = _W, { className, error } = _X, textareaProps = __objRest(_X, ["className", "error"]);
+  const { disabled } = textareaProps;
+  const [isFocused, setIsFocused] = React.useState(false);
+  const mergedClassNames = cx(className, styles[baseClass], {
+    [styles[`${baseClass}--disabled`]]: disabled,
+    [styles[`${baseClass}--focused`]]: isFocused,
+    [styles[`${baseClass}--error`]]: error
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mergedClassNames
+  }, /* @__PURE__ */ React.createElement("textarea", __spreadProps(__spreadValues({}, textareaProps), {
+    ref,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false)
+  })));
+});
+export { ANIMATION_TIME, ActionModal, Alert, Avatar, Badge, Button, Card, Checkbox, DatePicker, DesignToken, EmailTagInput, FieldDescription, FieldError, FieldGroup, Form, FormField, FormGroup, Heading, Icon, Info, Input, Interactive, Link, Loader, Modal, ModalBase, ModalCloseButton, ModalPortal, NumericInput, Picker, Popover, ProgressBar, ProgressCircle, PromoBanner, RadioButton, RangeDatePicker, SearchInput, SegmentedControl, ShadowToken, Simple, SpacingToken, Switch, Tab, TabsList, TabsWrapper, Tag, TagInput, Text, Textarea, Toast, ToastWrapper, Tooltip, UserGuide };