@wix/editor-react-components 1.2310.0 → 1.2312.0

package/dist/site/components/chunks/Button2.js

@@ -1,299 +1,365 @@
-import { c as $bbaa08b3cd72f041$export$9d1611c77c2fe928, w as $2c9edc598a03d523$export$420e68273165f4ec, A as $0c4a58759813079a$export$4e328f61c538687f, B as $e969f22b6713ca4a$export$ae780daf29e6d456, x as $390e54f620492c70$export$f680877a34711e37 } from "./Group.js";
-import React__default, { useState, useMemo, createContext, useRef, useEffect } from "react";
-import { $ as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, a as $f39a9eba43920ace$export$86427a43e3e48ebb, b as $64fa3d84918910a7$export$29f1550f4b0d4415, f as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps.js";
-import { $ as $d1116acdf220c2da$export$4c014de7c8940b4c } from "./useFocusable.js";
-import { a as $d27d541f9569d26d$export$45712eceda6fad21 } from "./usePress.js";
-const $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY = 7e3;
-let $319e236875307eab$var$liveAnnouncer = null;
-function $319e236875307eab$export$a9b970dcc4ae71a9(message, assertiveness = "assertive", timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
-  if (!$319e236875307eab$var$liveAnnouncer) {
-    $319e236875307eab$var$liveAnnouncer = new $319e236875307eab$var$LiveAnnouncer();
-    if (!(typeof IS_REACT_ACT_ENVIRONMENT === "boolean" ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== "undefined")) setTimeout(() => {
-      if ($319e236875307eab$var$liveAnnouncer === null || $319e236875307eab$var$liveAnnouncer === void 0 ? void 0 : $319e236875307eab$var$liveAnnouncer.isAttached()) $319e236875307eab$var$liveAnnouncer === null || $319e236875307eab$var$liveAnnouncer === void 0 ? void 0 : $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
-    }, 100);
-    else $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
-  } else $319e236875307eab$var$liveAnnouncer.announce(message, assertiveness, timeout);
-}
-class $319e236875307eab$var$LiveAnnouncer {
-  isAttached() {
-    var _this_node;
-    return (_this_node = this.node) === null || _this_node === void 0 ? void 0 : _this_node.isConnected;
-  }
-  createLog(ariaLive) {
-    let node = document.createElement("div");
-    node.setAttribute("role", "log");
-    node.setAttribute("aria-live", ariaLive);
-    node.setAttribute("aria-relevant", "additions");
-    return node;
-  }
-  destroy() {
-    if (!this.node) return;
-    document.body.removeChild(this.node);
-    this.node = null;
-  }
-  announce(message, assertiveness = "assertive", timeout = $319e236875307eab$var$LIVEREGION_TIMEOUT_DELAY) {
-    var _this_assertiveLog, _this_politeLog;
-    if (!this.node) return;
-    let node = document.createElement("div");
-    if (typeof message === "object") {
-      node.setAttribute("role", "img");
-      node.setAttribute("aria-labelledby", message["aria-labelledby"]);
-    } else node.textContent = message;
-    if (assertiveness === "assertive") (_this_assertiveLog = this.assertiveLog) === null || _this_assertiveLog === void 0 ? void 0 : _this_assertiveLog.appendChild(node);
-    else (_this_politeLog = this.politeLog) === null || _this_politeLog === void 0 ? void 0 : _this_politeLog.appendChild(node);
-    if (message !== "") setTimeout(() => {
-      node.remove();
-    }, timeout);
-  }
-  clear(assertiveness) {
-    if (!this.node) return;
-    if ((!assertiveness || assertiveness === "assertive") && this.assertiveLog) this.assertiveLog.innerHTML = "";
-    if ((!assertiveness || assertiveness === "polite") && this.politeLog) this.politeLog.innerHTML = "";
-  }
-  constructor() {
-    this.node = null;
-    this.assertiveLog = null;
-    this.politeLog = null;
-    if (typeof document !== "undefined") {
-      this.node = document.createElement("div");
-      this.node.dataset.liveAnnouncer = "true";
-      Object.assign(this.node.style, {
-        border: 0,
-        clip: "rect(0 0 0 0)",
-        clipPath: "inset(50%)",
-        height: "1px",
-        margin: "-1px",
-        overflow: "hidden",
-        padding: 0,
-        position: "absolute",
-        width: "1px",
-        whiteSpace: "nowrap"
-      });
-      this.assertiveLog = this.createLog("assertive");
-      this.node.appendChild(this.assertiveLog);
-      this.politeLog = this.createLog("polite");
-      this.node.appendChild(this.politeLog);
-      document.body.prepend(this.node);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useCallback, useState, useEffect, useMemo } from "react";
+import { c as clsx } from "./clsx.js";
+import { d as directionStyles } from "./direction.module.js";
+import { p as presetWrapperStyles } from "./presetWrapper.module.js";
+import { a as getDataAttributes, g as getQaDataAttributes } from "./dataUtils.js";
+import { f as formatClassNames } from "./classNames.js";
+import { I as IconAnimationTriggers } from "./Button.types.js";
+import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
+import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants20.js";
+import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
+import { i as isValidLink } from "./Link.js";
+const root = "root__IB9QF";
+const active = "active__lpoVO";
+const label = "label__EtLji";
+const link = "link__0rDnC";
+const icon = "icon__ZzsS5";
+const button = "button__i8gkO";
+const styles = {
+  root,
+  active,
+  label,
+  link,
+  icon,
+  button
+};
+const AnimatedButtonIcon = forwardRef(
+  ({ svg, duration }, ref) => /* @__PURE__ */ jsx(
+    AnimatedIconWithReducedMotion,
+    {
+      id: "animated-icon",
+      duration,
+      svg,
+      className: clsx("animated-icon", styles.icon),
+      ref
     }
-  }
+  )
+);
+function useIconAnimation(isDisabled) {
+  const iconAnimatedRef = useRef(null);
+  const onAnimationForward = useCallback(() => {
+    var _a;
+    !isDisabled && ((_a = iconAnimatedRef.current) == null ? void 0 : _a.runAnimationForward());
+  }, [isDisabled]);
+  const onAnimationBackward = useCallback(() => {
+    var _a;
+    !isDisabled && ((_a = iconAnimatedRef.current) == null ? void 0 : _a.runAnimationBackward());
+  }, [isDisabled]);
+  return { iconAnimatedRef, onAnimationForward, onAnimationBackward };
 }
-function $ac4318a9c075bb9f$export$ea18c227d4417cc3(props, ref) {
-  let { elementType = "button", isDisabled, onPress, onPressStart, onPressEnd, onPressUp, onPressChange, preventFocusOnPress, allowFocusWhenDisabled, onClick, href, target, rel, type = "button" } = props;
-  let additionalProps;
-  if (elementType === "button") additionalProps = {
-    type,
-    disabled: isDisabled,
-    form: props.form,
-    formAction: props.formAction,
-    formEncType: props.formEncType,
-    formMethod: props.formMethod,
-    formNoValidate: props.formNoValidate,
-    formTarget: props.formTarget,
-    name: props.name,
-    value: props.value
-  };
-  else additionalProps = {
-    role: "button",
-    href: elementType === "a" && !isDisabled ? href : void 0,
-    target: elementType === "a" ? target : void 0,
-    type: elementType === "input" ? type : void 0,
-    disabled: elementType === "input" ? isDisabled : void 0,
-    "aria-disabled": !isDisabled || elementType === "input" ? void 0 : isDisabled,
-    rel: elementType === "a" ? rel : void 0
-  };
-  let { pressProps, isPressed } = $d27d541f9569d26d$export$45712eceda6fad21({
-    onPressStart,
-    onPressEnd,
-    onPressChange,
-    onPress,
-    onPressUp,
-    onClick,
-    isDisabled,
-    preventFocusOnPress,
-    ref
-  });
-  let { focusableProps } = $d1116acdf220c2da$export$4c014de7c8940b4c(props, ref);
-  if (allowFocusWhenDisabled) focusableProps.tabIndex = isDisabled ? -1 : focusableProps.tabIndex;
-  let buttonProps = $bbaa08b3cd72f041$export$9d1611c77c2fe928(focusableProps, pressProps, $8e9d2fae0ecb9001$export$457c3d6518dd4c6f(props, {
-    labelable: true
-  }));
+function useButtonInteractionState(iconAnimationTriggers, onAnimationForward, onAnimationBackward, propsOnMouseEnter, propsOnMouseLeave) {
+  const [active2, setActive] = useState(false);
+  const animationTimeoutRef = useRef(
+    null
+  );
+  const isForwardRef = useRef(false);
+  const hasHoverTrigger = iconAnimationTriggers.includes(
+    IconAnimationTriggers.HOVER
+  );
+  const hasClickTrigger = iconAnimationTriggers.includes(
+    IconAnimationTriggers.CLICK
+  );
+  useEffect(() => {
+    isForwardRef.current = false;
+  }, [hasClickTrigger, hasHoverTrigger]);
+  useEffect(() => {
+    return () => {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+      }
+    };
+  }, []);
+  const onMouseEnter = useCallback(
+    (event) => {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+        animationTimeoutRef.current = null;
+      }
+      setActive(true);
+      if (hasHoverTrigger) {
+        onAnimationForward();
+      }
+      propsOnMouseEnter == null ? void 0 : propsOnMouseEnter(event);
+    },
+    [hasHoverTrigger, onAnimationForward, propsOnMouseEnter]
+  );
+  const onMouseLeave = useCallback(
+    (event) => {
+      animationTimeoutRef.current = setTimeout(() => {
+        setActive(false);
+      }, TRANSITION_DURATION);
+      if (hasHoverTrigger) {
+        onAnimationBackward();
+      }
+      propsOnMouseLeave == null ? void 0 : propsOnMouseLeave(event);
+    },
+    [hasHoverTrigger, onAnimationBackward, propsOnMouseLeave]
+  );
+  const onIconAnimationClick = useCallback(() => {
+    if (!hasClickTrigger) {
+      return;
+    }
+    if (isForwardRef.current) {
+      onAnimationBackward();
+    } else {
+      onAnimationForward();
+    }
+    isForwardRef.current = !isForwardRef.current;
+  }, [hasClickTrigger, onAnimationBackward, onAnimationForward]);
   return {
-    isPressed,
-    buttonProps: $bbaa08b3cd72f041$export$9d1611c77c2fe928(additionalProps, buttonProps, {
-      "aria-haspopup": props["aria-haspopup"],
-      "aria-expanded": props["aria-expanded"],
-      "aria-controls": props["aria-controls"],
-      "aria-pressed": props["aria-pressed"],
-      "aria-current": props["aria-current"],
-      "aria-disabled": props["aria-disabled"]
-    })
+    active: active2,
+    onMouseEnter,
+    onMouseLeave,
+    onIconAnimationClick: hasClickTrigger ? onIconAnimationClick : void 0
   };
 }
-function $240e9101ba2842f5$export$7d15b64cf5a3a4c4(value, min = -Infinity, max = Infinity) {
-  let newValue = Math.min(Math.max(value, min), max);
-  return newValue;
-}
-function $240e9101ba2842f5$export$e1a7b8e69ef6c52f(value, step) {
-  let roundedValue = value;
-  let precision = 0;
-  let stepString = step.toString();
-  let eIndex = stepString.toLowerCase().indexOf("e-");
-  if (eIndex > 0) precision = Math.abs(Math.floor(Math.log10(Math.abs(step)))) + eIndex;
-  else {
-    let pointIndex = stepString.indexOf(".");
-    if (pointIndex >= 0) precision = stepString.length - pointIndex;
-  }
-  if (precision > 0) {
-    let pow = Math.pow(10, precision);
-    roundedValue = Math.round(roundedValue * pow) / pow;
-  }
-  return roundedValue;
-}
-function $240e9101ba2842f5$export$cb6e0bb50bc19463(value, min, max, step) {
-  min = Number(min);
-  max = Number(max);
-  let remainder = (value - (isNaN(min) ? 0 : min)) % step;
-  let snappedValue = $240e9101ba2842f5$export$e1a7b8e69ef6c52f(Math.abs(remainder) * 2 >= step ? value + Math.sign(remainder) * (step - Math.abs(remainder)) : value - remainder, step);
-  if (!isNaN(min)) {
-    if (snappedValue < min) snappedValue = min;
-    else if (!isNaN(max) && snappedValue > max) snappedValue = min + Math.floor($240e9101ba2842f5$export$e1a7b8e69ef6c52f((max - min) / step, step)) * step;
-  } else if (!isNaN(max) && snappedValue > max) snappedValue = Math.floor($240e9101ba2842f5$export$e1a7b8e69ef6c52f(max / step, step)) * step;
-  snappedValue = $240e9101ba2842f5$export$e1a7b8e69ef6c52f(snappedValue, step);
-  return snappedValue;
-}
-const $ea3928288112382f$var$styles = {
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: 0,
-  position: "absolute",
-  width: "1px",
-  whiteSpace: "nowrap"
+const useAnalyticsReportClicks = ({
+  reportBiOnClick,
+  onClick: propsOnClick
+}) => {
+  return useCallback(
+    (event) => {
+      reportBiOnClick == null ? void 0 : reportBiOnClick(event);
+      propsOnClick == null ? void 0 : propsOnClick(event);
+    },
+    [reportBiOnClick, propsOnClick]
+  );
 };
-function $ea3928288112382f$export$a966af930f325cab(props = {}) {
-  let { style, isFocusable } = props;
-  let [isFocused, setFocused] = useState(false);
-  let { focusWithinProps } = $2c9edc598a03d523$export$420e68273165f4ec({
-    isDisabled: !isFocusable,
-    onFocusWithinChange: (val) => setFocused(val)
+function useButtonEventHandlers({
+  isDisabled,
+  link: link2,
+  propsOnClick,
+  preventLinkNavigation,
+  reportBiOnClick,
+  onMouseEnter,
+  onMouseLeave,
+  onIconAnimationClick,
+  onDblClick,
+  onFocus,
+  onBlur
+}) {
+  const isLink = isValidLink(link2);
+  const shouldPreventLinkNavigation = preventLinkNavigation && isLink;
+  const shouldHaveOnClick = !isDisabled && propsOnClick || shouldPreventLinkNavigation;
+  const onClick = useAnalyticsReportClicks({
+    reportBiOnClick,
+    onClick: shouldHaveOnClick || onIconAnimationClick ? (event) => {
+      onIconAnimationClick == null ? void 0 : onIconAnimationClick(event);
+      if (shouldHaveOnClick) {
+        shouldPreventLinkNavigation && event.preventDefault();
+        !isDisabled && (propsOnClick == null ? void 0 : propsOnClick());
+      }
+    } : void 0
   });
-  let combinedStyles = useMemo(() => {
-    if (isFocused) return style;
-    else if (style) return {
-      ...$ea3928288112382f$var$styles,
-      ...style
-    };
-    else return $ea3928288112382f$var$styles;
-  }, [
-    isFocused
-  ]);
-  return {
-    visuallyHiddenProps: {
-      ...focusWithinProps,
-      style: combinedStyles
-    }
-  };
+  const eventHandlers = useMemo(
+    () => ({
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onKeyDown: isLink ? activateByEnterButton : activateBySpaceOrEnterButton,
+      onDoubleClick: !isDisabled && onDblClick ? onDblClick : void 0,
+      onFocus: !isDisabled && onFocus ? onFocus : void 0,
+      onBlur: !isDisabled && onBlur ? onBlur : void 0
+    }),
+    [
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      isLink,
+      isDisabled,
+      onDblClick,
+      onFocus,
+      onBlur
+    ]
+  );
+  return { isLink, eventHandlers };
 }
-function $ea3928288112382f$export$439d29a4e110a164(props) {
-  let { children, elementType: Element = "div", isFocusable, style, ...otherProps } = props;
-  let { visuallyHiddenProps } = $ea3928288112382f$export$a966af930f325cab(props);
-  return /* @__PURE__ */ React__default.createElement(Element, $bbaa08b3cd72f041$export$9d1611c77c2fe928(otherProps, visuallyHiddenProps), children);
+function useButtonA11y({
+  propsA11y,
+  ariaAttributes,
+  label: label2
+}) {
+  const normalizedA11y = useMemo(
+    () => removeAriaPrefix(propsA11y ?? {}),
+    [propsA11y]
+  );
+  const a11yAttr = useMemo(
+    () => getAccessibilityAttributesSpread({
+      ariaAttributes: {
+        ...ariaAttributes,
+        ...normalizedA11y,
+        label: (ariaAttributes == null ? void 0 : ariaAttributes.label) ?? (normalizedA11y.label || label2)
+      },
+      tabindex: normalizedA11y == null ? void 0 : normalizedA11y.tabindex
+    }),
+    [normalizedA11y, label2, ariaAttributes]
+  );
+  return a11yAttr;
 }
-const $0393f8ab869a0f1a$export$e9f3bf65a26ce129 = /* @__PURE__ */ createContext(null);
-const $d2b4bc8c273e7be6$export$24d547caef80ccd1 = /* @__PURE__ */ createContext({});
-const $d2b4bc8c273e7be6$export$353f5b6fc5456de1 = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function Button(props, ref) {
-  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $d2b4bc8c273e7be6$export$24d547caef80ccd1);
-  props = $d2b4bc8c273e7be6$var$disablePendingProps(props);
-  let ctx = props;
-  let { isPending } = ctx;
-  let { buttonProps, isPressed } = $ac4318a9c075bb9f$export$ea18c227d4417cc3(props, ref);
-  let { focusProps, isFocused, isFocusVisible } = $0c4a58759813079a$export$4e328f61c538687f(props);
-  let { hoverProps, isHovered } = $e969f22b6713ca4a$export$ae780daf29e6d456({
-    ...props,
-    isDisabled: props.isDisabled || isPending
+const Button = (props) => {
+  const {
+    id,
+    link: link2,
+    type = "button",
+    label: label2 = "",
+    labelContent,
+    disabled: isDisabled = false,
+    onClick: propsOnClick,
+    className,
+    corvid,
+    a11y: propsA11y,
+    direction,
+    elementProps,
+    compPreviewState,
+    isQaMode,
+    fullNameCompType,
+    lang,
+    ariaAttributes,
+    onDblClick,
+    onFocus,
+    onBlur,
+    reportBiOnClick,
+    preventLinkNavigation,
+    onMouseEnter: propsOnMouseEnter,
+    onMouseLeave: propsOnMouseLeave,
+    wix
+  } = props;
+  const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
+  const animatedIconProps = elementProps == null ? void 0 : elementProps.animatedIcon;
+  const corvidIconAnimationTriggers = (corvid == null ? void 0 : corvid.iconAnimationTriggers) ?? [];
+  const defaultTrigger = (animatedIconProps == null ? void 0 : animatedIconProps.trigger) === IconAnimationTriggers.CLICK ? IconAnimationTriggers.CLICK : IconAnimationTriggers.HOVER;
+  const iconAnimationTriggers = corvidIconAnimationTriggers.length > 0 ? corvidIconAnimationTriggers : [defaultTrigger];
+  const { iconAnimatedRef, onAnimationForward, onAnimationBackward } = useIconAnimation(isDisabled);
+  const { active: active2, onMouseEnter, onMouseLeave, onIconAnimationClick } = useButtonInteractionState(
+    iconAnimationTriggers,
+    onAnimationForward,
+    onAnimationBackward,
+    propsOnMouseEnter,
+    propsOnMouseLeave
+  );
+  const buttonOrLinkRef = useRef(null);
+  const semanticClassNames = SEMANTIC_CLASS_NAMES;
+  const rootClassName = clsx(
+    styles.root,
+    className,
+    styles.button,
+    "button",
+    !direction && directionStyles.fallbackDirection,
+    formatClassNames(semanticClassNames.root),
+    {
+      disabled: isDisabled,
+      [styles.active]: active2
+    }
+  );
+  const labelClassName = clsx(
+    "label",
+    styles.label,
+    formatClassNames(semanticClassNames.buttonLabel)
+  );
+  const linkClassName = styles.link;
+  const { isLink, eventHandlers } = useButtonEventHandlers({
+    isDisabled,
+    link: link2,
+    propsOnClick,
+    preventLinkNavigation,
+    reportBiOnClick,
+    onMouseEnter,
+    onMouseLeave,
+    onIconAnimationClick,
+    onDblClick,
+    onFocus,
+    onBlur
   });
-  let renderValues = {
-    isHovered,
-    isPressed: (ctx.isPressed || isPressed) && !isPending,
-    isFocused,
-    isFocusVisible,
-    isDisabled: props.isDisabled || false,
-    isPending: isPending !== null && isPending !== void 0 ? isPending : false
+  const a11yAttr = useButtonA11y({ propsA11y, ariaAttributes, label: label2 });
+  const renderedLabel = labelContent ?? label2;
+  const wrapperAttributes = {
+    id,
+    ...getDataAttributes(props),
+    ...getQaDataAttributes(isQaMode, fullNameCompType),
+    "data-semantic-classname": semanticClassNames.root,
+    lang,
+    ...direction && { dir: direction }
   };
-  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    ...props,
-    values: renderValues,
-    defaultClassName: "react-aria-Button"
-  });
-  let buttonId = $390e54f620492c70$export$f680877a34711e37(buttonProps.id);
-  let progressId = $390e54f620492c70$export$f680877a34711e37();
-  let ariaLabelledby = buttonProps["aria-labelledby"];
-  if (isPending) {
-    if (ariaLabelledby) ariaLabelledby = `${ariaLabelledby} ${progressId}`;
-    else if (buttonProps["aria-label"]) ariaLabelledby = `${buttonId} ${progressId}`;
-  }
-  let wasPending = useRef(isPending);
-  useEffect(() => {
-    let message = {
-      "aria-labelledby": ariaLabelledby || buttonId
-    };
-    if (!wasPending.current && isFocused && isPending) $319e236875307eab$export$a9b970dcc4ae71a9(message, "assertive");
-    else if (wasPending.current && isFocused && !isPending) $319e236875307eab$export$a9b970dcc4ae71a9(message, "assertive");
-    wasPending.current = isPending;
-  }, [
-    isPending,
-    isFocused,
-    ariaLabelledby,
-    buttonId
-  ]);
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
-    global: true
-  });
-  delete DOMProps.onClick;
-  return /* @__PURE__ */ React__default.createElement("button", {
-    ...$bbaa08b3cd72f041$export$9d1611c77c2fe928(DOMProps, renderProps, buttonProps, focusProps, hoverProps),
-    // When the button is in a pending state, we want to stop implicit form submission (ie. when the user presses enter on a text input).
-    // We do this by changing the button's type to button.
-    type: buttonProps.type === "submit" && isPending ? "button" : buttonProps.type,
-    id: buttonId,
-    ref,
-    "aria-labelledby": ariaLabelledby,
-    slot: props.slot || void 0,
-    "aria-disabled": isPending ? "true" : buttonProps["aria-disabled"],
-    "data-disabled": props.isDisabled || void 0,
-    "data-pressed": renderValues.isPressed || void 0,
-    "data-hovered": isHovered || void 0,
-    "data-focused": isFocused || void 0,
-    "data-pending": isPending || void 0,
-    "data-focus-visible": isFocusVisible || void 0
-  }, /* @__PURE__ */ React__default.createElement($0393f8ab869a0f1a$export$e9f3bf65a26ce129.Provider, {
-    value: {
-      id: progressId
+  const renderButtonContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderedLabel && /* @__PURE__ */ jsx("span", { className: labelClassName, "data-testid": TestIds.buttonLabel, children: renderedLabel }),
+    /* @__PURE__ */ jsx(
+      AnimatedButtonIcon,
+      {
+        ref: iconAnimatedRef,
+        svg: animatedIconProps == null ? void 0 : animatedIconProps.svg,
+        duration: animatedIconProps == null ? void 0 : animatedIconProps.duration
+      }
+    )
+  ] });
+  const renderButton = () => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      className: rootClassName,
+      "data-testid": TestIds.buttonContent,
+      ...wrapperAttributes,
+      ...a11yAttr,
+      ...eventHandlers,
+      ref: buttonOrLinkRef,
+      "data-preview": compPreviewState,
+      children: renderButtonContent()
     }
-  }, renderProps.children));
-});
-function $d2b4bc8c273e7be6$var$disablePendingProps(props) {
-  if (props.isPending) {
-    props.onPress = void 0;
-    props.onPressStart = void 0;
-    props.onPressEnd = void 0;
-    props.onPressChange = void 0;
-    props.onPressUp = void 0;
-    props.onKeyDown = void 0;
-    props.onKeyUp = void 0;
-    props.onClick = void 0;
-    props.href = void 0;
-  }
-  return props;
-}
+  );
+  const renderLinkedButton = () => {
+    const linkHref = isDisabled ? void 0 : link2.href;
+    const linkRel = link2.rel;
+    const linkTarget = link2.target;
+    const linkPopupId = link2.linkPopupId;
+    const anchorDataId = link2.anchorDataId;
+    const anchorCompId = link2.anchorCompId;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: linkHref,
+        rel: linkRel,
+        target: linkTarget,
+        "data-popupid": linkPopupId,
+        "data-anchor": anchorDataId,
+        "data-anchor-comp-id": anchorCompId,
+        className: clsx(linkClassName, rootClassName),
+        "data-testid": TestIds.buttonContent,
+        ...wrapperAttributes,
+        ...a11yAttr,
+        ...eventHandlers,
+        role: a11yAttr.role,
+        tabIndex: a11yAttr.tabIndex,
+        ref: buttonOrLinkRef,
+        "data-preview": compPreviewState,
+        children: renderButtonContent()
+      }
+    );
+  };
+  const renderDisabledLinkAsButton = () => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      className: clsx(rootClassName),
+      "data-testid": TestIds.buttonContent,
+      ...wrapperAttributes,
+      ...a11yAttr,
+      ...eventHandlers,
+      role: "link",
+      ref: buttonOrLinkRef,
+      "data-preview": compPreviewState,
+      children: renderButtonContent()
+    }
+  );
+  const renderContent = () => {
+    if (isDisabled && isLink) {
+      return renderDisabledLinkAsButton();
+    }
+    return isLink ? renderLinkedButton() : renderButton();
+  };
+  return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: renderContent() });
+};
 export {
-  $ea3928288112382f$export$439d29a4e110a164 as $,
-  $240e9101ba2842f5$export$7d15b64cf5a3a4c4 as a,
-  $d2b4bc8c273e7be6$export$24d547caef80ccd1 as b,
-  $ea3928288112382f$export$a966af930f325cab as c,
-  $d2b4bc8c273e7be6$export$353f5b6fc5456de1 as d,
-  $240e9101ba2842f5$export$cb6e0bb50bc19463 as e
+  Button as B
 };