@livechat/design-system-react-components 1.0.0-alpha.52 → 1.0.0-alpha.54

package/dist/dsrc.es.js

@@ -284,6 +284,7 @@ const SpacingToken = {
   Spacing6: "--spacing-6",
   Spacing8: "--spacing-8",
   Spacing12: "--spacing-12",
+  Spacing14: "--spacing-14",
   Spacing16: "--spacing-16",
   Spacing18: "--spacing-18",
   Spacing20: "--spacing-20",
@@ -299,16 +300,16 @@ var cssStyles = {
   popover,
   "popover--visible": "lc-Popover-module__popover--visible___u5NXB"
 };
-const Popover = (props) => {
-  const {
-    triggerRenderer,
-    onClose,
-    children,
-    className,
-    placement,
-    flipOptions,
-    isVisible = false
-  } = props;
+const Popover = ({
+  triggerRenderer,
+  onClose,
+  children,
+  className,
+  placement,
+  flipOptions,
+  isVisible = false,
+  closeOnEsc = true
+}) => {
   const [visible, setVisibility] = React.useState(false);
   const prevVisibleState = React.useRef(false);
   const {
@@ -354,8 +355,10 @@ const Popover = (props) => {
     }
   };
   React.useEffect(() => {
-    document.addEventListener("keydown", handleHideOnEscape);
     document.addEventListener("mousedown", handleDocumentClick);
+    if (closeOnEsc) {
+      document.addEventListener("keydown", handleHideOnEscape);
+    }
     return () => {
       document.removeEventListener("keydown", handleHideOnEscape);
       document.removeEventListener("mousedown", handleDocumentClick);
@@ -612,22 +615,161 @@ const Icon = (props) => {
     className: mergedClassNames
   }), GeneratedIcon);
 };
+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$C = {
+  loader,
+  loader__spinner,
+  "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
+  "loader__spinner--medium": "lc-Loader-module__loader__spinner--medium___J-ki0",
+  "loader__spinner--large": "lc-Loader-module__loader__spinner--large___Poqq7",
+  "loader__spinner-circle": "lc-Loader-module__loader__spinner-circle___ApBUO",
+  rotate,
+  loader__label
+};
+const baseClass$L = "loader";
+const spinnerClass = `${baseClass$L}__spinner`;
+const Loader = ({
+  primaryColor,
+  secondaryColor,
+  label,
+  className,
+  size = "medium"
+}) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$C[baseClass$L], className)
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: cx(styles$C[spinnerClass], styles$C[`${spinnerClass}--${size}`])
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: styles$C["loader__spinner-circle"],
+    style: {
+      borderColor: secondaryColor,
+      borderTopColor: primaryColor
+    }
+  })), label && /* @__PURE__ */ React.createElement(Text, {
+    as: "div",
+    size: "md",
+    className: styles$C["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$B = {
+  btn: btn$1,
+  "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
+  "btn--full-width": "lc-Button-module__btn--full-width___kdbAr",
+  "btn--basic": "lc-Button-module__btn--basic___Jc2gD",
+  "btn--primary": "lc-Button-module__btn--primary___ajbjQ",
+  "btn--secondary": "lc-Button-module__btn--secondary___iWzE0",
+  "btn--destructive": "lc-Button-module__btn--destructive___-kLCl",
+  "btn--compact": "lc-Button-module__btn--compact___4eptQ",
+  "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
+  "btn--large": "lc-Button-module__btn--large___lb-z6",
+  "btn--text": "lc-Button-module__btn--text___WA8OL",
+  "btn--plain": "lc-Button-module__btn--plain___eOPui",
+  "btn--plain-light": "lc-Button-module__btn--plain-light___eS9em",
+  "btn--subtle": "lc-Button-module__btn--subtle___s22xR",
+  "btn--float": "lc-Button-module__btn--float___J4lTs",
+  "btn--dotted": "lc-Button-module__btn--dotted___y1EEP",
+  "btn--loading": "lc-Button-module__btn--loading___ZAgjv",
+  btn__loader,
+  btn__content,
+  btn__icon,
+  "btn__icon--left": "lc-Button-module__btn__icon--left___H68zu",
+  "btn__icon--right": "lc-Button-module__btn__icon--right___fHr3D",
+  "btn--icon-only--bg": "lc-Button-module__btn--icon-only--bg___X-4V2"
+};
+const baseClass$K = "btn";
+const Button = React.forwardRef((_g, ref) => {
+  var _h = _g, {
+    loading = false,
+    disabled = false,
+    type = "button",
+    fullWidth = false,
+    kind = "basic",
+    size = "medium",
+    icon: icon2 = null,
+    iconPosition = "left",
+    loaderLabel,
+    className,
+    children,
+    href,
+    onClick
+  } = _h, props = __objRest(_h, [
+    "loading",
+    "disabled",
+    "type",
+    "fullWidth",
+    "kind",
+    "size",
+    "icon",
+    "iconPosition",
+    "loaderLabel",
+    "className",
+    "children",
+    "href",
+    "onClick"
+  ]);
+  const isDisabled = loading || disabled;
+  const isIconOnly = !children && icon2;
+  const isTextButton = ["text", "plain", "plain-light"].includes(kind);
+  const Component = href ? "a" : "button";
+  const getSpinnerColors = () => {
+    if (kind === "primary" || kind === "destructive") {
+      return {
+        primaryColor: "var(--action-primary-default)",
+        secondaryColor: "var(--border-invert-primary)"
+      };
+    }
+  };
+  const mergedClassNames = cx(className, styles$B[baseClass$K], styles$B[`${baseClass$K}--${kind}`], styles$B[`${baseClass$K}--${size}`], {
+    [styles$B[`${baseClass$K}--loading`]]: loading,
+    [styles$B[`${baseClass$K}--full-width`]]: fullWidth,
+    [styles$B[`${baseClass$K}--icon-only`]]: isIconOnly,
+    [styles$B[`${baseClass$K}--icon-only--bg`]]: isIconOnly && isTextButton,
+    [styles$B[`${baseClass$K}--disabled`]]: isDisabled
+  });
+  return /* @__PURE__ */ React.createElement(Component, __spreadValues({
+    ref,
+    className: mergedClassNames,
+    "aria-disabled": isDisabled,
+    type,
+    href: isDisabled ? void 0 : href,
+    onClick: isDisabled ? void 0 : onClick,
+    disabled: isDisabled
+  }, props), loading && /* @__PURE__ */ React.createElement(Loader, __spreadValues({
+    size: "small",
+    label: loaderLabel,
+    className: styles$B[`${baseClass$K}__loader`]
+  }, getSpinnerColors())), icon2 && React.cloneElement(icon2, {
+    className: cx(styles$B[`${baseClass$K}__icon`], styles$B[`${baseClass$K}__icon--${iconPosition}`]),
+    disabled
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: styles$B[`${baseClass$K}__content`]
+  }, children));
+});
 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$C = {
+const alert__content = "lc-Alert-module__alert__content___9nZdf";
+const alert__content__text = "lc-Alert-module__alert__content__text___7nx1p";
+const alert__content__cta = "lc-Alert-module__alert__content__cta___gTWPt";
+var styles$A = {
   alert,
+  alert__icon,
   alert__content,
-  "alert__content-text": "lc-Alert-module__alert__content-text___x2Un5",
-  "alert__content-text--margin": "lc-Alert-module__alert__content-text--margin___whVzG",
-  "alert__content-icon": "lc-Alert-module__alert__content-icon___-EXJm",
-  "alert--small": "lc-Alert-module__alert--small___Fyk-v",
+  alert__content__text,
+  alert__content__cta,
   "alert__close-icon": "lc-Alert-module__alert__close-icon___rYxVy",
+  "alert--small": "lc-Alert-module__alert--small___Fyk-v",
+  "alert--medium": "lc-Alert-module__alert--medium___ItZWT",
   "alert--info": "lc-Alert-module__alert--info___GmIGN",
   "alert--warning": "lc-Alert-module__alert--warning___MubhD",
   "alert--success": "lc-Alert-module__alert--success___fPtlZ",
-  "alert--error": "lc-Alert-module__alert--error___DKPo0",
-  alert__icon
+  "alert--error": "lc-Alert-module__alert--error___DKPo0"
 };
 const IconConfig = {
   info: {
@@ -647,46 +789,65 @@ const IconConfig = {
     kind: "error"
   }
 };
-const baseClass$L = "alert";
-const Alert = (_g) => {
-  var _h = _g, {
+const baseClass$J = "alert";
+const Alert = (_i) => {
+  var _j = _i, {
     children,
     className,
+    primaryButton,
+    secondaryButton,
     kind = "info",
     onClose
-  } = _h, props = __objRest(_h, [
+  } = _j, props = __objRest(_j, [
     "children",
     "className",
+    "primaryButton",
+    "secondaryButton",
     "kind",
     "onClose"
   ]);
   const containerRef = React.useRef(null);
-  const [isSmallContainer, setIsSmallContainer] = React.useState(false);
-  const mergedClassNames = cx(styles$C[baseClass$L], styles$C[`${baseClass$L}--${kind}`], isSmallContainer && styles$C[`${baseClass$L}--small`], className);
+  const [containerSize, setContainerSize] = React.useState(null);
+  const mergedClassNames = cx(styles$A[baseClass$J], styles$A[`${baseClass$J}--${kind}`], containerSize === "medium" && styles$A[`${baseClass$J}--medium`], containerSize === "small" && styles$A[`${baseClass$J}--small`], className);
   React.useEffect(() => {
-    const handleResize = debounce(() => {
+    const resize = () => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
-        return setIsSmallContainer(true);
+        return setContainerSize("small");
       }
-      return setIsSmallContainer(false);
+      if (containerRef.current && containerRef.current.offsetWidth > 400 && containerRef.current.offsetWidth <= 800) {
+        return setContainerSize("medium");
+      }
+      return setContainerSize(null);
+    };
+    const handleResize = debounce(() => {
+      resize();
     }, 500);
     window.addEventListener("resize", handleResize);
+    resize();
     return () => window.removeEventListener("resize", handleResize);
   });
   return /* @__PURE__ */ React.createElement("div", __spreadValues({
     ref: containerRef,
     className: mergedClassNames
-  }, props), /* @__PURE__ */ React.createElement("div", {
-    className: styles$C[`${baseClass$L}__content`]
-  }, /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
+  }, props), /* @__PURE__ */ React.createElement(Icon, __spreadProps(__spreadValues({}, IconConfig[kind]), {
     size: "large",
-    className: styles$C[`${baseClass$L}__content-icon`]
-  })), /* @__PURE__ */ React.createElement(Text, {
+    className: styles$A[`${baseClass$J}__icon`]
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: styles$A[`${baseClass$J}__content`]
+  }, /* @__PURE__ */ React.createElement(Text, {
     as: "div",
-    className: cx(styles$C[`${baseClass$L}__content-text`], onClose && styles$C[`${baseClass$L}__content-text--margin`])
-  }, children)), onClose && /* @__PURE__ */ React.createElement("button", {
+    className: styles$A[`${baseClass$J}__content__text`]
+  }, children), (primaryButton || secondaryButton) && /* @__PURE__ */ React.createElement("div", {
+    className: styles$A[`${baseClass$J}__content__cta`]
+  }, primaryButton && /* @__PURE__ */ React.createElement(Button, {
+    kind: "primary",
+    onClick: primaryButton.handleClick
+  }, primaryButton.label), secondaryButton && /* @__PURE__ */ React.createElement(Button, {
+    kind: "text",
+    onClick: secondaryButton.handleClick
+  }, secondaryButton.label))), onClose && /* @__PURE__ */ React.createElement("button", {
     type: "button",
-    className: styles$C[`${baseClass$L}__close-icon`],
+    className: styles$A[`${baseClass$J}__close-icon`],
     onClick: onClose
   }, /* @__PURE__ */ React.createElement(Icon, {
     source: Close,
@@ -704,7 +865,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$B = {
+var styles$z = {
   avatar,
   avatar__status,
   "avatar__status--available": "lc-Avatar-module__avatar__status--available___tcpFg",
@@ -750,7 +911,7 @@ var styles$B = {
   "avatar--xlarge": "lc-Avatar-module__avatar--xlarge___zwgeW",
   "avatar--xxlarge": "lc-Avatar-module__avatar--xxlarge___Ur0ul"
 };
-const baseClass$K = "avatar";
+const baseClass$I = "avatar";
 const Avatar = ({
   alt,
   className,
@@ -771,15 +932,15 @@ const Avatar = ({
   const initials = getInitials(text, letterCount);
   const fontColor = color && getFontColor(color);
   const mergedClassNames = cx({
-    [styles$B[baseClass$K]]: true,
-    [styles$B[`${baseClass$K}--${shape}`]]: true,
-    [styles$B[`${baseClass$K}--${size}`]]: true,
-    [styles$B[`${baseClass$K}--with-rim`]]: withRim,
+    [styles$z[baseClass$I]]: true,
+    [styles$z[`${baseClass$I}--${shape}`]]: true,
+    [styles$z[`${baseClass$I}--${size}`]]: true,
+    [styles$z[`${baseClass$I}--with-rim`]]: withRim,
     [`${className}`]: className
   });
-  const mergedStatusClassNames = cx(styles$B[`${baseClass$K}__status`], styles$B[`${baseClass$K}__status--${shape}`], styles$B[`${baseClass$K}__status--${size}`], styles$B[`${baseClass$K}__status--${status}`]);
-  const mergedIconClassNames = cx(styles$B[`${baseClass$K}__icon`], styles$B[`${baseClass$K}__icon--${size}`]);
-  const mergedRimClassNames = cx(styles$B[`${baseClass$K}__rim`], styles$B[`${baseClass$K}__rim--${size}`]);
+  const mergedStatusClassNames = cx(styles$z[`${baseClass$I}__status`], styles$z[`${baseClass$I}__status--${shape}`], styles$z[`${baseClass$I}__status--${size}`], styles$z[`${baseClass$I}__status--${status}`]);
+  const mergedIconClassNames = cx(styles$z[`${baseClass$I}__icon`], styles$z[`${baseClass$I}__icon--${size}`]);
+  const mergedRimClassNames = cx(styles$z[`${baseClass$I}__rim`], styles$z[`${baseClass$I}__rim--${size}`]);
   const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
   React.useEffect(() => {
     setShouldDisplayFallbackAvatar(isImproperImageSetup);
@@ -788,27 +949,27 @@ const Avatar = ({
     className: mergedClassNames,
     style: { backgroundColor: color }
   }, withRim && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$K}__rim`,
+    "data-testid": `${baseClass$I}__rim`,
     className: mergedRimClassNames
   }), status && /* @__PURE__ */ React.createElement("div", {
-    "data-testid": `${baseClass$K}__status`,
+    "data-testid": `${baseClass$I}__status`,
     className: mergedStatusClassNames
   }), shouldDisplayImage && /* @__PURE__ */ React.createElement("img", {
-    className: styles$B[`${baseClass$K}__image`],
+    className: styles$z[`${baseClass$I}__image`],
     src,
     alt,
     onError: handleError
   }), shouldDisplayInitials && /* @__PURE__ */ React.createElement("span", {
     style: { color: fontColor }
   }, initials), shouldDisplayFallbackAvatar && /* @__PURE__ */ React.createElement(Icon, {
-    "data-testid": `${baseClass$K}__icon`,
+    "data-testid": `${baseClass$I}__icon`,
     className: mergedIconClassNames,
     source: Person
   }));
 };
 const badge = "lc-Badge-module__badge___GhLnu";
 const badge__dot = "lc-Badge-module__badge__dot___z6RO6";
-var styles$A = {
+var styles$y = {
   badge,
   badge__dot,
   "badge--large": "lc-Badge-module__badge--large___B131q",
@@ -821,16 +982,16 @@ var styles$A = {
 function formatCount(count, max) {
   return count > max ? `${max}+` : `${count}`;
 }
-const baseClass$J = "badge";
-const Badge = (_i) => {
-  var _j = _i, {
+const baseClass$H = "badge";
+const Badge = (_k) => {
+  var _l = _k, {
     className,
     count = 0,
     max = 99,
     kind = "primary",
     size = "medium",
     type = "counter"
-  } = _j, spanProps = __objRest(_j, [
+  } = _l, spanProps = __objRest(_l, [
     "className",
     "count",
     "max",
@@ -838,153 +999,18 @@ const Badge = (_i) => {
     "size",
     "type"
   ]);
-  const mergedClassNames = cx(className, styles$A[baseClass$J], styles$A[`${baseClass$J}--${kind}`], styles$A[`${baseClass$J}--${size}`]);
+  const mergedClassNames = cx(className, styles$y[baseClass$H], styles$y[`${baseClass$H}--${kind}`], styles$y[`${baseClass$H}--${size}`]);
   const content = {
     ["counter"]: formatCount(count, max),
     ["alert"]: "!",
     ["dot"]: /* @__PURE__ */ React.createElement("span", {
-      className: styles$A[`${baseClass$J}__dot`]
+      className: styles$y[`${baseClass$H}__dot`]
     })
   }[type];
   return /* @__PURE__ */ React.createElement("span", __spreadValues({
     className: mergedClassNames
   }, spanProps), content);
 };
-const loader = "lc-Loader-module__loader___LRflD";
-const loader__spinner = "lc-Loader-module__loader__spinner___l3C1g";
-const rotate = "lc-Loader-module__rotate___Tlni-";
-const loader__label = "lc-Loader-module__loader__label___R74f6";
-var styles$z = {
-  loader,
-  loader__spinner,
-  "loader__spinner--small": "lc-Loader-module__loader__spinner--small___dGFFt",
-  "loader__spinner--medium": "lc-Loader-module__loader__spinner--medium___J-ki0",
-  "loader__spinner--large": "lc-Loader-module__loader__spinner--large___Poqq7",
-  "loader__spinner-circle": "lc-Loader-module__loader__spinner-circle___ApBUO",
-  rotate,
-  loader__label
-};
-const baseClass$I = "loader";
-const spinnerClass = `${baseClass$I}__spinner`;
-const Loader = ({
-  primaryColor,
-  secondaryColor,
-  label,
-  className,
-  size = "medium"
-}) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$z[baseClass$I], className)
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: cx(styles$z[spinnerClass], styles$z[`${spinnerClass}--${size}`])
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: styles$z["loader__spinner-circle"],
-    style: {
-      borderColor: secondaryColor,
-      borderTopColor: primaryColor
-    }
-  })), label && /* @__PURE__ */ React.createElement(Text, {
-    as: "div",
-    size: "md",
-    className: styles$z["loader__label"]
-  }, label));
-};
-const btn$1 = "lc-Button-module__btn___aijZJ";
-const btn__loader = "lc-Button-module__btn__loader___c8zZz";
-const btn__content = "lc-Button-module__btn__content___wefl2";
-const btn__icon = "lc-Button-module__btn__icon___GVExB";
-var styles$y = {
-  btn: btn$1,
-  "btn--disabled": "lc-Button-module__btn--disabled___lXBav",
-  "btn--full-width": "lc-Button-module__btn--full-width___kdbAr",
-  "btn--basic": "lc-Button-module__btn--basic___Jc2gD",
-  "btn--primary": "lc-Button-module__btn--primary___ajbjQ",
-  "btn--secondary": "lc-Button-module__btn--secondary___iWzE0",
-  "btn--destructive": "lc-Button-module__btn--destructive___-kLCl",
-  "btn--compact": "lc-Button-module__btn--compact___4eptQ",
-  "btn--icon-only": "lc-Button-module__btn--icon-only___bF5pW",
-  "btn--large": "lc-Button-module__btn--large___lb-z6",
-  "btn--text": "lc-Button-module__btn--text___WA8OL",
-  "btn--plain": "lc-Button-module__btn--plain___eOPui",
-  "btn--plain-light": "lc-Button-module__btn--plain-light___eS9em",
-  "btn--subtle": "lc-Button-module__btn--subtle___s22xR",
-  "btn--loading": "lc-Button-module__btn--loading___ZAgjv",
-  btn__loader,
-  btn__content,
-  btn__icon,
-  "btn__icon--left": "lc-Button-module__btn__icon--left___H68zu",
-  "btn__icon--right": "lc-Button-module__btn__icon--right___fHr3D",
-  "btn--icon-only--bg": "lc-Button-module__btn--icon-only--bg___X-4V2"
-};
-const baseClass$H = "btn";
-const Button = React.forwardRef((_k, ref) => {
-  var _l = _k, {
-    loading = false,
-    disabled = false,
-    type = "button",
-    fullWidth = false,
-    kind = "basic",
-    size = "medium",
-    icon: icon2 = null,
-    iconPosition = "left",
-    loaderLabel,
-    className,
-    children,
-    href,
-    onClick
-  } = _l, props = __objRest(_l, [
-    "loading",
-    "disabled",
-    "type",
-    "fullWidth",
-    "kind",
-    "size",
-    "icon",
-    "iconPosition",
-    "loaderLabel",
-    "className",
-    "children",
-    "href",
-    "onClick"
-  ]);
-  const isDisabled = loading || disabled;
-  const isIconOnly = !children && icon2;
-  const isTextButton = ["text", "plain", "plain-light"].includes(kind);
-  const Component = href ? "a" : "button";
-  const getSpinnerColors = () => {
-    if (kind === "primary" || kind === "destructive") {
-      return {
-        primaryColor: "var(--action-primary-default)",
-        secondaryColor: "var(--border-invert-primary)"
-      };
-    }
-  };
-  const mergedClassNames = cx(className, styles$y[baseClass$H], styles$y[`${baseClass$H}--${kind}`], styles$y[`${baseClass$H}--${size}`], {
-    [styles$y[`${baseClass$H}--loading`]]: loading,
-    [styles$y[`${baseClass$H}--full-width`]]: fullWidth,
-    [styles$y[`${baseClass$H}--icon-only`]]: isIconOnly,
-    [styles$y[`${baseClass$H}--icon-only--bg`]]: isIconOnly && isTextButton,
-    [styles$y[`${baseClass$H}--disabled`]]: isDisabled
-  });
-  return /* @__PURE__ */ React.createElement(Component, __spreadValues({
-    ref,
-    className: mergedClassNames,
-    "aria-disabled": isDisabled,
-    type,
-    href: isDisabled ? void 0 : href,
-    onClick: isDisabled ? void 0 : onClick,
-    disabled: isDisabled
-  }, props), loading && /* @__PURE__ */ React.createElement(Loader, __spreadValues({
-    size: "small",
-    label: loaderLabel,
-    className: styles$y[`${baseClass$H}__loader`]
-  }, getSpinnerColors())), icon2 && React.cloneElement(icon2, {
-    className: cx(styles$y[`${baseClass$H}__icon`], styles$y[`${baseClass$H}__icon--${iconPosition}`]),
-    disabled
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: styles$y[`${baseClass$H}__content`]
-  }, children));
-});
 const btn = "lc-SegmentedControl-module__btn___tfsvL";
 var styles$x = {
   "segmented-control": "lc-SegmentedControl-module__segmented-control___LHWSk",
@@ -1921,7 +1947,7 @@ const FormField = ({
     className: cx(styles$p[`${baseClass$w}__label-right-node`])
   }, labelRightNode)), /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$p[`${baseClass$w}__content`])
-  }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
+  }, children, error && /* @__PURE__ */ React.createElement(FieldError, null, error), !error && description && /* @__PURE__ */ React.createElement(FieldDescription, null, description))));
 };
 var styles$o = {
   "form-group": "lc-FormGroup-module__form-group___e2JHa",
@@ -2351,6 +2377,7 @@ const Trigger = ({
   isRequired,
   isMultiSelect,
   size = "medium",
+  hideClearButton,
   onTrigger,
   onClear
 }) => {
@@ -2379,6 +2406,7 @@ const Trigger = ({
     e.stopPropagation();
     onClear();
   };
+  const shouldShowClearButton = !hideClearButton && isItemSelected && !isDisabled && !isRequired;
   return /* @__PURE__ */ React.createElement("div", {
     ref: triggerRef,
     className: mergedClassNames,
@@ -2388,7 +2416,7 @@ const Trigger = ({
     className: styles$j[`${baseClass$p}__content`]
   }, children), /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$j[`${baseClass$p}__controls`], styles$j[`${baseClass$p}__controls--${size}`])
-  }, isItemSelected && !isDisabled && !isRequired && /* @__PURE__ */ React.createElement("div", {
+  }, shouldShowClearButton && /* @__PURE__ */ React.createElement("div", {
     "data-testid": `${baseClass$p}__clear-icon`,
     className: styles$j[`${baseClass$p}__clear-icon`],
     onClick: handleOnClearClick
@@ -2772,6 +2800,7 @@ const Picker = (_M) => {
     selectAllOptionText,
     type = "single",
     searchDisabled = false,
+    hideClearButton,
     onSelect
   } = _N, props = __objRest(_N, [
     "className",
@@ -2787,6 +2816,7 @@ const Picker = (_M) => {
     "selectAllOptionText",
     "type",
     "searchDisabled",
+    "hideClearButton",
     "onSelect"
   ]);
   const [isListOpen, setIsListOpen] = React.useState(false);
@@ -2873,7 +2903,7 @@ const Picker = (_M) => {
       const itemName = item.name.toLowerCase();
       return itemName.includes(search);
     });
-  }, [searchPhrase]);
+  }, [searchPhrase, options]);
   const selectedItemsKeys = React.useMemo(() => {
     if (!selected) {
       return null;
@@ -2894,6 +2924,7 @@ const Picker = (_M) => {
     isRequired,
     isMultiSelect: type === "multi",
     size,
+    hideClearButton,
     onTrigger: handleTrigger,
     onClear: handleClear
   }, /* @__PURE__ */ React.createElement(TriggerBody, {
@@ -4267,19 +4298,27 @@ var styles$3 = {
 const baseClass$3 = "textarea";
 const Textarea = React.forwardRef((__, ref) => {
   var _$ = __, { className, error } = _$, textareaProps = __objRest(_$, ["className", "error"]);
-  const { disabled } = textareaProps;
+  const { disabled, onBlur, onFocus } = textareaProps;
   const [isFocused, setIsFocused] = React.useState(false);
   const mergedClassNames = cx(className, styles$3[baseClass$3], {
     [styles$3[`${baseClass$3}--disabled`]]: disabled,
     [styles$3[`${baseClass$3}--focused`]]: isFocused,
     [styles$3[`${baseClass$3}--error`]]: error
   });
+  const handleOnBlur = (e) => {
+    setIsFocused(false);
+    onBlur == null ? void 0 : onBlur(e);
+  };
+  const handleOnFocus = (e) => {
+    setIsFocused(true);
+    onFocus == null ? void 0 : onFocus(e);
+  };
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
   }, /* @__PURE__ */ React.createElement("textarea", __spreadProps(__spreadValues({}, textareaProps), {
     ref,
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false)
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur
   })));
 });
 var styles$2 = {