@livechat/design-system-react-components 1.0.0-alpha.40 → 1.0.0-alpha.42

package/dist/dsrc.es.js

@@ -33,11 +33,10 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import * as React from "react";
-import { useReducer, useRef, useEffect, useCallback, useMemo } from "react";
 import cx from "clsx";
 import { Close, Info as Info$1, Warning, CheckCircleSolid, Block, Person, ChevronUp, ChevronDown, Check, DoubleArrowLeft, ChevronLeft, ChevronRight, DoubleArrowRight, VisibilityOn, VisibilityOff, Search, LockBlack, Refresh, Error as Error2 } from "@livechat/design-system-icons/react/material";
 import debounce from "lodash.debounce";
+import { createElement, useRef, useState, useEffect, useCallback, cloneElement, forwardRef, useMemo, useReducer, Fragment, Children, isValidElement } from "react";
 import { getContrast } from "polished";
 import ReactDayPicker from "react-day-picker";
 import { subMonths, differenceInCalendarMonths, addMonths, isSameMonth, isSameDay, isAfter, differenceInCalendarDays } from "date-fns";
@@ -331,7 +330,7 @@ const Heading = (_a) => {
     "children",
     "className"
   ]);
-  return React.createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$E[`heading-${size}`], className) }, props), children);
+  return createElement(as || SIZE_TO_ELEMENT_MAP[size], __spreadValues({ className: cx(styles$E[`heading-${size}`], className) }, props), children);
 };
 const Text = (_c) => {
   var _d = _c, {
@@ -354,7 +353,7 @@ const Text = (_c) => {
     "className"
   ]);
   const baseClassPrefix = caps2 ? "caps" : `paragraph-${size}`;
-  return React.createElement(as, __spreadValues({
+  return createElement(as, __spreadValues({
     className: cx({
       [styles$E[`${baseClassPrefix}`]]: true,
       [styles$E[`${baseClassPrefix}--bold`]]: bold,
@@ -422,7 +421,7 @@ const Icon = (props) => {
     "className",
     "customColor"
   ]);
-  const GeneratedIcon = React.createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
+  const GeneratedIcon = createElement(source, __spreadProps(__spreadValues({}, IconSizeMap[size]), {
     color: customColor
   }));
   const mergedClassNames = cx(className, styles$D[baseClass$M], kind && styles$D[`${baseClass$M}--${disabled ? "disabled--" : ""}${kind}`]);
@@ -478,10 +477,10 @@ const Alert = (_e) => {
     "kind",
     "onClose"
   ]);
-  const containerRef = React.useRef(null);
-  const [isSmallContainer, setIsSmallContainer] = React.useState(false);
+  const containerRef = useRef(null);
+  const [isSmallContainer, setIsSmallContainer] = useState(false);
   const mergedClassNames = cx(styles$C[baseClass$L], styles$C[`${baseClass$L}--${kind}`], isSmallContainer && styles$C[`${baseClass$L}--small`], className);
-  React.useEffect(() => {
+  useEffect(() => {
     const handleResize = debounce(() => {
       if (containerRef.current && containerRef.current.offsetWidth <= 400) {
         return setIsSmallContainer(true);
@@ -582,7 +581,7 @@ const Avatar = ({
   withRim = false
 }) => {
   const isImproperImageSetup = type === "image" && !src;
-  const [shouldDisplayFallbackAvatar, setShouldDisplayFallbackAvatar] = React.useState(isImproperImageSetup);
+  const [shouldDisplayFallbackAvatar, setShouldDisplayFallbackAvatar] = useState(isImproperImageSetup);
   const shouldDisplayImage = type === "image" && !!src && !shouldDisplayFallbackAvatar;
   const shouldDisplayInitials = type === "text";
   const letterCount = ["xxxsmall", "xxsmall", "xsmall"].includes(size) ? 1 : 2;
@@ -598,8 +597,8 @@ const Avatar = ({
   const mergedStatusClassNames = cx(styles$B[`${baseClass$K}__status`], styles$B[`${baseClass$K}__status--${shape}`], styles$B[`${baseClass$K}__status--${size}`], styles$B[`${baseClass$K}__status--${status}`]);
   const mergedIconClassNames = cx(styles$B[`${baseClass$K}__icon`], styles$B[`${baseClass$K}__icon--${size}`]);
   const mergedRimClassNames = cx(styles$B[`${baseClass$K}__rim`], styles$B[`${baseClass$K}__rim--${size}`]);
-  const handleError = React.useCallback(() => setShouldDisplayFallbackAvatar(true), []);
-  React.useEffect(() => {
+  const handleError = useCallback(() => setShouldDisplayFallbackAvatar(true), []);
+  useEffect(() => {
     setShouldDisplayFallbackAvatar(isImproperImageSetup);
   }, [isImproperImageSetup]);
   return /* @__PURE__ */ React.createElement("div", {
@@ -794,7 +793,7 @@ const Button = (_i) => {
     size: "small",
     label: loaderLabel,
     className: styles$y[`${baseClass$H}__loader`]
-  }, getSpinnerColors())), icon2 && React.cloneElement(icon2, {
+  }, getSpinnerColors())), icon2 && cloneElement(icon2, {
     className: cx(styles$y[`${baseClass$H}__icon`], styles$y[`${baseClass$H}__icon--${iconPosition}`]),
     disabled
   }), /* @__PURE__ */ React.createElement("div", {
@@ -823,9 +822,9 @@ const SegmentedControl = ({
   onButtonClick = noop
 }) => {
   const mergedClassName = cx(styles$x[baseClass$G], className);
-  const [currentStateId, setCurrentStateId] = React.useState(() => initialId);
+  const [currentStateId, setCurrentStateId] = useState(() => initialId);
   const isControlled = typeof currentId === "string";
-  React.useEffect(() => {
+  useEffect(() => {
     isControlled && setCurrentStateId(currentId);
   }, [currentId]);
   const handleClick = (id, event) => {
@@ -907,7 +906,7 @@ const Card = (_k) => {
     "src",
     "title"
   ]);
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
   const expandIcon = isExpanded ? ChevronUp : ChevronDown;
   const expandButtonText = isExpanded ? "Hide" : "Show more";
   const shouldShowActionButtons = (buttonsOptions == null ? void 0 : buttonsOptions.length) > 0;
@@ -999,7 +998,7 @@ var styles$u = {
   checkbox__helper
 };
 const baseClass$D = "checkbox";
-const Checkbox = React.forwardRef((_o, ref) => {
+const Checkbox = forwardRef((_o, ref) => {
   var _p = _o, { checked, disabled, children, description, className } = _p, restInputProps = __objRest(_p, ["checked", "disabled", "children", "description", "className"]);
   return /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$u[baseClass$D], className, {
@@ -1297,20 +1296,20 @@ const DatePickerComponent = (props) => {
     "renderDay",
     "innerRef"
   ]);
-  const [currentMonth, setCurrentMonth] = React.useState(month || new Date());
-  React.useEffect(() => {
+  const [currentMonth, setCurrentMonth] = useState(month || new Date());
+  useEffect(() => {
     if (month && month !== currentMonth) {
       setCurrentMonth(month);
     }
   }, [month, currentMonth]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (toMonth) {
       if (!isDateWithinRange(currentMonth, { from: fromMonth, to: toMonth })) {
         setCurrentMonth(toMonth);
       }
     }
   }, [currentMonth, props.toMonth, props.fromMonth]);
-  const handleMonthChange = React.useCallback((month2) => {
+  const handleMonthChange = useCallback((month2) => {
     if (props.onMonthChange && month2) {
       props.onMonthChange(month2);
       return;
@@ -1321,7 +1320,7 @@ const DatePickerComponent = (props) => {
   if (propsFirstDayOfWeek === 0 || propsFirstDayOfWeek && propsFirstDayOfWeek < 7) {
     firstDayOfWeek = propsFirstDayOfWeek;
   }
-  const datePickerClassNames = React.useMemo(() => getDatePickerClassNames(range, classNames), [range, classNames]);
+  const datePickerClassNames = useMemo(() => getDatePickerClassNames(range, classNames), [range, classNames]);
   return /* @__PURE__ */ React.createElement(ReactDayPicker, __spreadValues({
     navbarElement: navbarElement || /* @__PURE__ */ React.createElement(DatePickerNavbar, {
       month: currentMonth,
@@ -1341,7 +1340,7 @@ const DatePickerComponent = (props) => {
     renderDay: renderDay || defaultDayRenderer
   }, restProps));
 };
-const DatePicker = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(DatePickerComponent, __spreadValues({
+const DatePicker = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(DatePickerComponent, __spreadValues({
   innerRef: ref
 }, props)));
 DatePicker.displayName = "DatePicker";
@@ -1715,7 +1714,7 @@ const FormField = ({
   }, className);
   return /* @__PURE__ */ React.createElement("div", {
     className: mergedClassNames
-  }, labelRightNode && inline && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+  }, labelRightNode && inline && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement("div", {
     className: cx(styles$p[`${baseClass$w}__label-right-node`], styles$p[`${baseClass$w}__label-right-node--inline`])
   }, labelRightNode), /* @__PURE__ */ React.createElement("div", {
     className: styles$p[`${baseClass$w}__row-break`]
@@ -1790,13 +1789,13 @@ var styles$n = {
   "input__visibility-button": "lc-Input-module__input__visibility-button___eWrVe"
 };
 const baseClass$u = "input";
-const renderIcon = (icon2, disabled) => React.cloneElement(icon2.source, {
+const renderIcon = (icon2, disabled) => cloneElement(icon2.source, {
   ["data-testid"]: `input-icon-${icon2.place}`,
   className: cx(styles$n[`${baseClass$u}__icon`], styles$n[`${baseClass$u}__icon--${icon2.place}`], {
     [styles$n[`${baseClass$u}__icon--disabled`]]: disabled
   })
 });
-const Input = React.forwardRef((_y, ref) => {
+const Input = forwardRef((_y, ref) => {
   var _z = _y, {
     inputSize = "medium",
     error = false,
@@ -1810,8 +1809,8 @@ const Input = React.forwardRef((_y, ref) => {
     "icon",
     "className"
   ]);
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const { type, onFocus, onBlur } = inputProps;
   const mergedClassNames = cx(className, styles$n[baseClass$u], styles$n[`${baseClass$u}--${inputSize}`], {
     [styles$n[`${baseClass$u}--disabled`]]: disabled,
@@ -1915,7 +1914,7 @@ const ModalBase = (_C) => {
     "closeOnOverlayPress"
   ]);
   const mergedClassNames = cx(styles$l[baseClass$s], className);
-  React.useEffect(() => {
+  useEffect(() => {
     if (!closeOnEscPress) {
       return;
     }
@@ -2015,14 +2014,14 @@ const ModalPortal = ({
   parentElementName = "body",
   zIndex
 }) => {
-  const [container] = React.useState(() => document.createElement("div"));
+  const [container] = useState(() => document.createElement("div"));
   if (className) {
     container.classList.add(className);
   }
   if (zIndex) {
     container.style.zIndex = zIndex.toString();
   }
-  React.useEffect(() => {
+  useEffect(() => {
     var _a;
     (_a = document.querySelector(parentElementName)) == null ? void 0 : _a.appendChild(container);
     return () => {
@@ -2063,7 +2062,7 @@ const NumericInput = (_G) => {
     "style",
     "onChange"
   ]);
-  const inputRef = React.useRef(null);
+  const inputRef = useRef(null);
   const mergedClassNames = cx(styles$k[baseClass$q], {
     [styles$k[`${baseClass$q}--error`]]: error,
     [styles$k[`${baseClass$q}--no-controls`]]: noControls,
@@ -2182,9 +2181,9 @@ const Trigger = ({
   onTrigger,
   onClear
 }) => {
-  const triggerRef = React.useRef(null);
+  const triggerRef = useRef(null);
   const mergedClassNames = cx(styles$j[baseClass$p], styles$j[`${baseClass$p}--${size}`], isMultiSelect && styles$j[`${baseClass$p}--multi-select`], isMultiSelect && isItemSelected && styles$j[`${baseClass$p}--multi-select--with-items`], isDisabled && styles$j[`${baseClass$p}--disabled`], isOpen && styles$j[`${baseClass$p}--focused`], isError && styles$j[`${baseClass$p}--error`]);
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e) => {
       const isFocused = document.activeElement === triggerRef.current;
       if (isFocused && e.key !== KeyCodes.tab) {
@@ -2257,10 +2256,10 @@ const PickerList = ({
   const mergedClassNames = cx(styles$i[baseClass$o], {
     [styles$i[`${baseClass$o}__no-results`]]: items.length === 0
   });
-  const [currentItemKey, setCurrentItemKey] = React.useState(null);
-  const indexRef = React.useRef(-1);
-  const lastIndexRef = React.useRef(0);
-  const listRef = React.useRef(null);
+  const [currentItemKey, setCurrentItemKey] = useState(null);
+  const indexRef = useRef(-1);
+  const lastIndexRef = useRef(0);
+  const listRef = useRef(null);
   const onKeyDown = (e) => {
     if (e.key === KeyCodes.esc) {
       e.preventDefault();
@@ -2284,7 +2283,7 @@ const PickerList = ({
       onSelect(items[indexRef.current]);
     }
   };
-  React.useEffect(() => {
+  useEffect(() => {
     if (indexRef.current > -1 && items.length > 0) {
       setCurrentItemKey(items[indexRef.current].key);
     }
@@ -2617,11 +2616,11 @@ const Picker = (_K) => {
     "searchDisabled",
     "onSelect"
   ]);
-  const [isListOpen, setIsListOpen] = React.useState(false);
-  const [searchPhrase, setSearchPhrase] = React.useState(null);
-  const triggerRef = React.useRef(null);
+  const [isListOpen, setIsListOpen] = useState(false);
+  const [searchPhrase, setSearchPhrase] = useState(null);
+  const triggerRef = useRef(null);
   const mergedClassNames = cx(styles$h[baseClass$l], className);
-  React.useEffect(() => {
+  useEffect(() => {
     if (isListOpen) {
       const onDocumentClick = (e) => {
         var _a;
@@ -2689,7 +2688,7 @@ const Picker = (_K) => {
     }
     onSelect(newSelectedItems);
   };
-  const items = React.useMemo(() => {
+  const items = useMemo(() => {
     if (!searchPhrase) {
       return options;
     }
@@ -2702,7 +2701,7 @@ const Picker = (_K) => {
       return itemName.includes(search);
     });
   }, [searchPhrase]);
-  const selectedItemsKeys = React.useMemo(() => {
+  const selectedItemsKeys = useMemo(() => {
     if (!selected) {
       return null;
     }
@@ -2761,8 +2760,8 @@ const Popover = (props) => {
     flipOptions,
     isVisible = false
   } = props;
-  const [visible, setVisibility] = React.useState(false);
-  const prevVisibleState = React.useRef(false);
+  const [visible, setVisibility] = useState(false);
+  const prevVisibleState = useRef(false);
   const {
     x,
     y,
@@ -2776,16 +2775,16 @@ const Popover = (props) => {
     middleware: [offset(4), flip(flipOptions)],
     placement
   });
-  React.useEffect(() => {
+  useEffect(() => {
     setVisibility(isVisible);
   }, [isVisible]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (onClose && prevVisibleState.current !== visible && !visible) {
       onClose();
     }
     prevVisibleState.current = visible;
   }, [visible]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (!refs.reference.current || !refs.floating.current) {
       return;
     }
@@ -2805,7 +2804,7 @@ const Popover = (props) => {
       setVisibility(false);
     }
   };
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener("keydown", handleHideOnEscape);
     document.addEventListener("mousedown", handleDocumentClick);
     return () => {
@@ -2874,7 +2873,7 @@ const SIZE_VALUE_FROM_SIZE = {
   large: 56
 };
 const baseClass$k = "progress-circle";
-const ProgressCircle = React.forwardRef((_M, ref) => {
+const ProgressCircle = forwardRef((_M, ref) => {
   var _N = _M, {
     status = "normal",
     progressValue,
@@ -2935,7 +2934,7 @@ var styles$d = {
   "progress-bar__indicator--normal": "lc-ProgressBar-module__progress-bar__indicator--normal___0Uhle"
 };
 const baseClass$j = "progress-bar";
-const ProgressBar = React.forwardRef((_O, ref) => {
+const ProgressBar = forwardRef((_O, ref) => {
   var _P = _O, {
     status = "normal",
     percent,
@@ -2991,14 +2990,14 @@ const PromoBanner = ({
   onClose,
   onLinkClick
 }) => {
-  const containerRef = React.useRef(null);
-  const [containerSize, setContainerSize] = React.useState("medium");
+  const containerRef = useRef(null);
+  const [containerSize, setContainerSize] = useState("medium");
   const mergedClassNames = cx(styles$c[baseClass$i], {
     [styles$c[`${baseClass$i}--light`]]: light,
     [styles$c[`${baseClass$i}--small`]]: containerSize === "small",
     [styles$c[`${baseClass$i}--large`]]: containerSize === "large"
   }, className);
-  React.useEffect(() => {
+  useEffect(() => {
     const handleResize = () => {
       if (containerRef.current && containerRef.current.offsetWidth <= SMALL_CONTAINER_WIDTH_TRESHOLD) {
         return setContainerSize("small");
@@ -3062,7 +3061,7 @@ var styles$b = {
   "radio-button--disabled": "lc-RadioButton-module__radio-button--disabled___wHSA7"
 };
 const baseClass$h = "radio-button";
-const RadioButton = React.forwardRef((_Q, ref) => {
+const RadioButton = forwardRef((_Q, ref) => {
   var _R = _Q, { children, className = "", description, checked, disabled } = _R, props = __objRest(_R, ["children", "className", "description", "checked", "disabled"]);
   const mergedClassNames = cx(styles$b[baseClass$h], className, {
     [styles$b[`${baseClass$h}--selected`]]: checked,
@@ -3116,13 +3115,13 @@ const SearchInput = ({
   className,
   onChange
 }) => {
-  const [isCollapsed, setIsCollapsed] = React.useState(true);
-  const [isFocused, setIsFocused] = React.useState(false);
-  const inputRef = React.useRef(null);
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef(null);
   const isCloseIconVisible = !!value && !isDisabled && !isLoading;
   const ariaExpandedValue = isCollapsable && !isCollapsed && "true";
   const mergedClassNames = cx(className, styles$a[baseClass$g], styles$a[`${baseClass$g}--${size}`], isFocused && styles$a[`${baseClass$g}--focused`], isDisabled && styles$a[`${baseClass$g}--disabled`], isCollapsable && styles$a[`${baseClass$g}--collapsable`], !isCollapsed && styles$a[`${baseClass$g}--collapsable--open`]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (isCollapsable && !!value) {
       setIsCollapsed(false);
     }
@@ -3253,8 +3252,8 @@ const Switch = (_S) => {
     "innerRef",
     "ariaLabel"
   ]);
-  const [checked, setChecked] = React.useState(() => on !== void 0 ? on : defaultOn);
-  React.useEffect(() => {
+  const [checked, setChecked] = useState(() => on !== void 0 ? on : defaultOn);
+  useEffect(() => {
     if (on !== void 0) {
       setChecked(on);
     }
@@ -3382,7 +3381,7 @@ const EditableTagContent = ({
   remove,
   value
 }) => {
-  const [removed, setRemoved] = React.useState(false);
+  const [removed, setRemoved] = useState(false);
   const getRef = () => innerEditableRef.current;
   const getValue = () => {
     const ref = getRef();
@@ -3449,10 +3448,10 @@ const EditableTag = ({
   update,
   size
 }) => {
-  const isValid = React.useMemo(() => {
+  const isValid = useMemo(() => {
     return validator !== void 0 ? validator(children) : true;
   }, [children, validator]);
-  const innerEditableRef = React.useRef(null);
+  const innerEditableRef = useRef(null);
   const removeTag = () => remove(index2);
   return /* @__PURE__ */ React.createElement(Tag, {
     kind: isValid ? "default" : "error",
@@ -3491,8 +3490,8 @@ const TagInput = ({
     [styles$6[`${baseClass$b}--error`]]: error
   });
   const inputClassNames = cx(styles$6[`${baseClass$b}__input`], styles$6[`${baseClass$b}__input--${size}`]);
-  const [inputValue, setInputValue] = React.useState("");
-  const inputRef = React.useRef(null);
+  const [inputValue, setInputValue] = useState("");
+  const inputRef = useRef(null);
   const addTag = (value) => {
     onChange([...tags || [], value]);
     setInputValue("");
@@ -3720,6 +3719,7 @@ var styles$4 = {
   "tooltip-text": "lc-Tooltip-module__tooltip-text___FB8OV",
   "tooltip-close": "lc-Tooltip-module__tooltip-close___3r3h9",
   "tooltip-step": "lc-Tooltip-module__tooltip-step___-j0n8",
+  "tooltip-footer": "lc-Tooltip-module__tooltip-footer___9hxFq",
   "guide-tooltip--slide": "lc-Tooltip-module__guide-tooltip--slide___Uawm2",
   "guide-tooltip__overlay": "lc-Tooltip-module__guide-tooltip__overlay___IyrKK",
   "guide-tooltip__overlay--slide": "lc-Tooltip-module__guide-tooltip__overlay--slide___VW8oq",
@@ -3750,9 +3750,9 @@ const Tooltip = (props) => {
     onClose
   } = props;
   const isManaged = isVisible !== void 0;
-  const arrowRef = React.useRef(null);
-  const [visible, setVisibility] = React.useState(isVisible);
-  const isHovered = React.useRef(false);
+  const arrowRef = useRef(null);
+  const [visible, setVisibility] = useState(isVisible);
+  const isHovered = useRef(false);
   const {
     x,
     y,
@@ -3771,19 +3771,19 @@ const Tooltip = (props) => {
     ],
     placement
   });
-  React.useEffect(() => {
+  useEffect(() => {
     referenceElement && reference(referenceElement);
   }, [reference, referenceElement]);
-  React.useEffect(() => {
+  useEffect(() => {
     setVisibility(isVisible);
   }, [isVisible]);
-  React.useEffect(() => {
+  useEffect(() => {
     document.addEventListener("keydown", handleCloseAction);
     return () => {
       document.removeEventListener("keydown", handleCloseAction);
     };
   }, []);
-  React.useEffect(() => {
+  useEffect(() => {
     if (!refs.reference.current || !refs.floating.current) {
       return;
     }
@@ -3852,9 +3852,9 @@ const Tooltip = (props) => {
     className: mergedClassNames,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, __spreadValues({
+  }, Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, __spreadValues({
         handleCloseAction,
         theme
       }, child.props));
@@ -3962,46 +3962,38 @@ const Interactive = ({
   closeWithX,
   theme,
   handleCloseAction,
-  handleClickPrimary,
-  handleClickSecondary
-}) => {
-  const decoration = theme === "invert" ? "underline" : "none";
-  return /* @__PURE__ */ React.createElement("div", {
-    style: { width: "270px" }
-  }, /* @__PURE__ */ React.createElement("div", {
-    style: { position: "relative", height: "25px", marginBottom: "10px" }
-  }, closeWithX && /* @__PURE__ */ React.createElement("div", {
-    className: styles$4[`${baseClass$6}-close`]
-  }, /* @__PURE__ */ React.createElement("div", {
-    onClick: handleCloseAction
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    source: Close,
-    kind: theme ? getIconType(theme) : "primary"
-  })))), image && /* @__PURE__ */ React.createElement("div", {
-    style: { margin: "0 4px" }
-  }, /* @__PURE__ */ React.createElement("img", {
-    className: styles$4[`${baseClass$6}-image`],
-    src: image.src,
-    alt: image.alt
-  })), header && /* @__PURE__ */ React.createElement("div", {
-    className: styles$4[`${baseClass$6}-header`]
-  }, header), /* @__PURE__ */ React.createElement("div", {
-    className: styles$4[`${baseClass$6}-text`]
-  }, text), /* @__PURE__ */ React.createElement("div", {
-    style: { margin: "4px" }
-  }, /* @__PURE__ */ React.createElement(Button, {
-    kind: "primary",
-    onClick: handleClickPrimary
-  }, "Primary button"), /* @__PURE__ */ React.createElement("div", {
-    onClick: handleClickSecondary,
-    style: {
-      cursor: "pointer",
-      display: "inline-block",
-      marginLeft: "16px",
-      textDecoration: decoration
-    }
-  }, "Link")));
-};
+  primaryButton,
+  secondaryButton
+}) => /* @__PURE__ */ React.createElement("div", {
+  style: { width: "270px" }
+}, /* @__PURE__ */ React.createElement("div", {
+  style: { position: "relative", height: "25px", marginBottom: "10px" }
+}, closeWithX && /* @__PURE__ */ React.createElement("div", {
+  className: styles$4[`${baseClass$6}-close`]
+}, /* @__PURE__ */ React.createElement("div", {
+  onClick: handleCloseAction
+}, /* @__PURE__ */ React.createElement(Icon, {
+  source: Close,
+  kind: theme ? getIconType(theme) : "primary"
+})))), image && /* @__PURE__ */ React.createElement("div", {
+  style: { margin: "0 4px" }
+}, /* @__PURE__ */ React.createElement("img", {
+  className: styles$4[`${baseClass$6}-image`],
+  src: image.src,
+  alt: image.alt
+})), header && /* @__PURE__ */ React.createElement("div", {
+  className: styles$4[`${baseClass$6}-header`]
+}, header), /* @__PURE__ */ React.createElement("div", {
+  className: styles$4[`${baseClass$6}-text`]
+}, text), /* @__PURE__ */ React.createElement("div", {
+  className: styles$4[`${baseClass$6}-footer`]
+}, /* @__PURE__ */ React.createElement(Button, {
+  kind: primaryButton.kind || "primary",
+  onClick: primaryButton.handleClick
+}, primaryButton.label), /* @__PURE__ */ React.createElement(Button, {
+  kind: secondaryButton.kind || "secondary",
+  onClick: secondaryButton.handleClick
+}, secondaryButton.label)));
 const baseClass$5 = "guide-tooltip";
 const SpotlightOverlay = ({
   gap,
@@ -4126,16 +4118,16 @@ const UserGuide = (props) => {
     isVisible = false,
     shouldSlide = true
   } = props;
-  const [parentElement, setParentElement] = React.useState(null);
-  const [rect, setRect] = React.useState(null);
-  const [isSliding, setIsSliding] = React.useState(shouldSlide);
+  const [parentElement, setParentElement] = useState(null);
+  const [rect, setRect] = useState(null);
+  const [isSliding, setIsSliding] = useState(shouldSlide);
   const handleViewportChange = () => {
     if (parentElement) {
       setRect(virtualReference(parentElement, spotlightPadding).getBoundingClientRect());
       setIsSliding(false);
     }
   };
-  React.useEffect(() => {
+  useEffect(() => {
     if (parentElement !== null) {
       window.addEventListener("resize", handleViewportChange);
       window.addEventListener("scroll", handleViewportChange);
@@ -4145,13 +4137,13 @@ const UserGuide = (props) => {
       };
     }
   }, [parentElement, parentElementName]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (parentElementName) {
       const element = document.querySelector(parentElementName);
       setParentElement(element);
     }
   }, [parentElementName]);
-  React.useEffect(() => {
+  useEffect(() => {
     parentElement && setRect(virtualReference(parentElement, spotlightPadding).getBoundingClientRect());
     setIsSliding(true);
   }, [parentElement]);
@@ -4183,10 +4175,10 @@ var styles$3 = {
   "textarea--error": "lc-Textarea-module__textarea--error___0EGuq"
 };
 const baseClass$3 = "textarea";
-const Textarea = React.forwardRef((_Y, ref) => {
+const Textarea = forwardRef((_Y, ref) => {
   var _Z = _Y, { className, error } = _Z, textareaProps = __objRest(_Z, ["className", "error"]);
   const { disabled } = textareaProps;
-  const [isFocused, setIsFocused] = React.useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const mergedClassNames = cx(className, styles$3[baseClass$3], {
     [styles$3[`${baseClass$3}--disabled`]]: disabled,
     [styles$3[`${baseClass$3}--focused`]]: isFocused,
@@ -4218,7 +4210,11 @@ var styles$1 = {
   "file-upload-progress-actions__retry-button": "lc-FileUploadProgressActions-module__file-upload-progress-actions__retry-button___DqFEo"
 };
 const baseClass$2 = "file-upload-progress-actions";
-const FileUploadProgressActions = ({ status, onCloseButtonClick, onRetryButtonClick }) => {
+const FileUploadProgressActions = ({
+  status,
+  onCloseButtonClick,
+  onRetryButtonClick
+}) => {
   return /* @__PURE__ */ React.createElement("div", {
     className: styles$1[`${baseClass$2}`]
   }, onRetryButtonClick && status === "error" && /* @__PURE__ */ React.createElement("button", {
@@ -4239,7 +4235,7 @@ const FileUploadProgressActions = ({ status, onCloseButtonClick, onRetryButtonCl
 };
 const baseClass$1 = "file-upload-progress";
 const wrapperHeaderTitleClass = `${baseClass$1}__wrapper__header__title`;
-const FileUploadProgress = React.forwardRef(({
+const FileUploadProgress = forwardRef(({
   actionsVisibility = "hidden",
   className,
   icon: icon2,
@@ -4343,7 +4339,7 @@ const UploadBar = ({
   onCloseButtonClick,
   onRetryButtonClick
 }) => {
-  const [expanded, setExpanded] = React.useState(isExpanded || false);
+  const [expanded, setExpanded] = useState(isExpanded || false);
   const withError = status === "error";
   const withSuccess = status === "success";
   const mergedClassNames = cx(styles[baseClass], className, {