@micromag/element-call-to-action 0.4.71 → 0.4.76

package/es/index.js

@@ -1,34 +1,25 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import { c } from 'react/compiler-runtime';
 import { useGesture } from '@use-gesture/react';
 import classNames from 'classnames';
 import isString from 'lodash/isString';
-import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { useTrackEvent } from '@micromag/core/hooks';
 import { isValidUrl, getStyleFromColor, isIos } from '@micromag/core/utils';
 import Button from '@micromag/element-button';
 import Text from '@micromag/element-text';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function Arrow(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsx("svg", {
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    x: "0",
-    y: "0px",
-    width: "48.53px",
-    height: "12.38px",
-    viewBox: "0 0 48.53 12.38",
-    className: className,
-    xmlSpace: "preserve",
-    children: /*#__PURE__*/jsx("g", {
+function Arrow(t0) {
+  const $ = c(5);
+  const {
+    color: t1,
+    className: t2
+  } = t0;
+  const color = t1 === undefined ? "currentColor" : t1;
+  const className = t2 === undefined ? null : t2;
+  let t3;
+  if ($[0] !== color) {
+    t3 = /*#__PURE__*/jsx("g", {
       transform: "matrix(1, 0, 0, 1, 0, 0)",
       children: /*#__PURE__*/jsx("path", {
         id: "b",
@@ -39,190 +30,483 @@ function Arrow(_ref) {
         strokeLinecap: "round",
         d: "M1.5,10.88L24.26,1.5l22.77,9.38"
       })
-    })
-  });
+    });
+    $[0] = color;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== className || $[3] !== t3) {
+    t4 = /*#__PURE__*/jsx("svg", {
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      x: "0",
+      y: "0px",
+      width: "48.53px",
+      height: "12.38px",
+      viewBox: "0 0 48.53 12.38",
+      className: className,
+      xmlSpace: "preserve",
+      children: t3
+    });
+    $[2] = className;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  return t4;
 }
 
 var styles = {"container":"micromag-element-call-to-action-container","arrow":"micromag-element-call-to-action-arrow","button":"micromag-element-call-to-action-button","withoutLinkStyle":"micromag-element-call-to-action-withoutLinkStyle","label":"micromag-element-call-to-action-label","icon":"micromag-element-call-to-action-icon","text":"micromag-element-call-to-action-text","selfTargetLink":"micromag-element-call-to-action-selfTargetLink","leavingFrame":"micromag-element-call-to-action-leavingFrame","animationDisabled":"micromag-element-call-to-action-animationDisabled","invalidUrl":"micromag-element-call-to-action-invalidUrl"};
 
-var _excluded = ["ref"];
-function CallToAction(_ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? null : _ref$type,
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? null : _ref$url,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? null : _ref$label,
-    _ref$boxStyle = _ref.boxStyle,
-    boxStyle = _ref$boxStyle === void 0 ? null : _ref$boxStyle,
-    _ref$inWebView = _ref.inWebView,
-    inWebView = _ref$inWebView === void 0 ? false : _ref$inWebView,
-    _ref$elRef = _ref.elRef,
-    elRef = _ref$elRef === void 0 ? null : _ref$elRef,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$animationDisable = _ref.animationDisabled,
-    animationDisabled = _ref$animationDisable === void 0 ? false : _ref$animationDisable,
-    _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? null : _ref$icon,
-    _ref$arrow = _ref.arrow,
-    arrow = _ref$arrow === void 0 ? null : _ref$arrow,
-    _ref$dragAmount = _ref.dragAmount,
-    dragAmount = _ref$dragAmount === void 0 ? 50 : _ref$dragAmount,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$buttonClassName = _ref.buttonClassName,
-    buttonClassName = _ref$buttonClassName === void 0 ? null : _ref$buttonClassName,
-    _ref$buttonBorderClas = _ref.buttonBorderClassName,
-    buttonBorderClassName = _ref$buttonBorderClas === void 0 ? null : _ref$buttonBorderClas,
-    _ref$labelClassName = _ref.labelClassName,
-    labelClassName = _ref$labelClassName === void 0 ? null : _ref$labelClassName,
-    _ref$arrowClassName = _ref.arrowClassName,
-    arrowClassName = _ref$arrowClassName === void 0 ? null : _ref$arrowClassName,
-    _ref$focusable = _ref.focusable,
-    focusable = _ref$focusable === void 0 ? true : _ref$focusable,
-    _ref$external = _ref.external,
-    external = _ref$external === void 0 ? true : _ref$external,
-    _ref$openWebView = _ref.openWebView,
-    openWebView = _ref$openWebView === void 0 ? null : _ref$openWebView,
-    _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? null : _ref$onClick;
-  var trackEvent = useTrackEvent();
-  var swipeUpEnabled = type === null || type === 'swipe-up';
-  var validUrl = useMemo(function () {
-    return isValidUrl(url);
-  }, [url]);
-  var buttonRef = useRef(null);
-  var _ref2 = label || {},
-    _ref2$textStyle = _ref2.textStyle,
-    textStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
-  var _ref3 = textStyle || {},
-    _ref3$fontSize = _ref3.fontSize,
-    fontSize = _ref3$fontSize === void 0 ? null : _ref3$fontSize,
-    _ref3$color = _ref3.color,
-    color = _ref3$color === void 0 ? null : _ref3$color,
-    _ref3$lineHeight = _ref3.lineHeight,
-    lineHeight = _ref3$lineHeight === void 0 ? null : _ref3$lineHeight;
-  var _ref4 = boxStyle || {},
-    _ref4$backgroundColor = _ref4.backgroundColor,
-    backgroundColor = _ref4$backgroundColor === void 0 ? null : _ref4$backgroundColor;
-  var arrowStyle = useMemo(function () {
-    return _objectSpread(_objectSpread({}, {
-      fontSize: fontSize
-    }), backgroundColor === null ? getStyleFromColor(color, 'color') : getStyleFromColor(backgroundColor, 'color'));
-  }, [fontSize, backgroundColor, color]);
-
-  // MobileSafari blocks popup no matter what
-  var selfTargetLinkRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    leaving = _useState2[0],
-    setLeaving = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    toggled = _useState4[0],
-    setToggled = _useState4[1];
-
-  // On click
-  var onClickLink = useCallback(function (e) {
-    var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'click';
-    setToggled(!toggled);
-    if (inWebView && openWebView !== null) {
-      openWebView({
-        url: url
-      });
-    }
-    if (onClick !== null && action === 'click') {
-      onClick(e);
-    }
-    if (trackEvent !== null) {
-      trackEvent('call_to_action', isString(action) ? action : 'click', url);
-    }
-  }, [toggled, url, onClick, trackEvent, inWebView, openWebView]);
-  var onDrag = useCallback(function (_ref5) {
-    var event = _ref5.event;
-    // fix firefox https://use-gesture.netlify.app/docs/faq/#why-cant-i-properly-drag-an-image-or-a-link
-    event.preventDefault();
-  }, []);
-  var onDragEnd = useCallback(function (_ref6) {
-    var _ref6$movement = _slicedToArray(_ref6.movement, 2),
-      my = _ref6$movement[1];
-    if (my < -dragAmount) {
-      if (inWebView) {
-        onClickLink(null, 'swipe');
-      } else if (isIos() && selfTargetLinkRef.current !== null) {
-        selfTargetLinkRef.current.click();
-        setLeaving(true);
-        onClickLink(null, 'swipe');
-      } else if (buttonRef.current) {
-        buttonRef.current.click();
-        onClickLink(null, 'swipe');
+function CallToAction(t0) {
+  const $ = c(92);
+  const {
+    type: t1,
+    url: t2,
+    label: t3,
+    boxStyle: t4,
+    inWebView: t5,
+    elRef: t6,
+    disabled: t7,
+    animationDisabled: t8,
+    icon: t9,
+    arrow: t10,
+    dragAmount: t11,
+    className: t12,
+    buttonClassName: t13,
+    buttonBorderClassName: t14,
+    labelClassName: t15,
+    arrowClassName: t16,
+    focusable: t17,
+    external: t18,
+    openWebView: t19,
+    onClick: t20
+  } = t0;
+  const type = t1 === undefined ? null : t1;
+  const url = t2 === undefined ? null : t2;
+  const label = t3 === undefined ? null : t3;
+  const boxStyle = t4 === undefined ? null : t4;
+  const inWebView = t5 === undefined ? false : t5;
+  const elRef = t6 === undefined ? null : t6;
+  const disabled = t7 === undefined ? false : t7;
+  const animationDisabled = t8 === undefined ? false : t8;
+  const icon = t9 === undefined ? null : t9;
+  const arrow = t10 === undefined ? null : t10;
+  const dragAmount = t11 === undefined ? 50 : t11;
+  const className = t12 === undefined ? null : t12;
+  const buttonClassName = t13 === undefined ? null : t13;
+  const buttonBorderClassName = t14 === undefined ? null : t14;
+  const labelClassName = t15 === undefined ? null : t15;
+  const arrowClassName = t16 === undefined ? null : t16;
+  const focusable = t17 === undefined ? true : t17;
+  const external = t18 === undefined ? true : t18;
+  const openWebView = t19 === undefined ? null : t19;
+  const onClick = t20 === undefined ? null : t20;
+  const trackEvent = useTrackEvent();
+  const swipeUpEnabled = type === null || type === "swipe-up";
+  let t21;
+  if ($[0] !== url) {
+    t21 = isValidUrl(url);
+    $[0] = url;
+    $[1] = t21;
+  } else {
+    t21 = $[1];
+  }
+  const validUrl = t21;
+  const buttonRef = useRef(null);
+  let t22;
+  if ($[2] !== label) {
+    t22 = label || {};
+    $[2] = label;
+    $[3] = t22;
+  } else {
+    t22 = $[3];
+  }
+  const {
+    textStyle: t23
+  } = t22;
+  const textStyle = t23 === undefined ? null : t23;
+  let t24;
+  if ($[4] !== textStyle) {
+    t24 = textStyle || {};
+    $[4] = textStyle;
+    $[5] = t24;
+  } else {
+    t24 = $[5];
+  }
+  const {
+    fontSize: t25,
+    color: t26,
+    lineHeight: t27
+  } = t24;
+  const fontSize = t25 === undefined ? null : t25;
+  const color = t26 === undefined ? null : t26;
+  const lineHeight = t27 === undefined ? null : t27;
+  let t28;
+  if ($[6] !== boxStyle) {
+    t28 = boxStyle || {};
+    $[6] = boxStyle;
+    $[7] = t28;
+  } else {
+    t28 = $[7];
+  }
+  const {
+    backgroundColor: t29
+  } = t28;
+  const backgroundColor = t29 === undefined ? null : t29;
+  let t30;
+  if ($[8] !== fontSize) {
+    t30 = {
+      fontSize
+    };
+    $[8] = fontSize;
+    $[9] = t30;
+  } else {
+    t30 = $[9];
+  }
+  let t31;
+  if ($[10] !== backgroundColor || $[11] !== color) {
+    t31 = backgroundColor === null ? getStyleFromColor(color, "color") : getStyleFromColor(backgroundColor, "color");
+    $[10] = backgroundColor;
+    $[11] = color;
+    $[12] = t31;
+  } else {
+    t31 = $[12];
+  }
+  let t32;
+  if ($[13] !== t30 || $[14] !== t31) {
+    t32 = {
+      ...t30,
+      ...t31
+    };
+    $[13] = t30;
+    $[14] = t31;
+    $[15] = t32;
+  } else {
+    t32 = $[15];
+  }
+  const arrowStyle = t32;
+  const selfTargetLinkRef = useRef(null);
+  const [leaving, setLeaving] = useState(false);
+  const [toggled, setToggled] = useState(false);
+  let t33;
+  if ($[16] !== inWebView || $[17] !== onClick || $[18] !== openWebView || $[19] !== toggled || $[20] !== trackEvent || $[21] !== url) {
+    t33 = (e, t34) => {
+      const action = t34 === undefined ? "click" : t34;
+      setToggled(!toggled);
+      if (inWebView && openWebView !== null) {
+        openWebView({
+          url
+        });
+      }
+      if (onClick !== null && action === "click") {
+        onClick(e);
+      }
+      if (trackEvent !== null) {
+        trackEvent("call_to_action", isString(action) ? action : "click", url);
       }
-    }
-  }, [dragAmount, inWebView, onClickLink, setLeaving]);
-  var bind = useGesture({
-    onDrag: onDrag,
-    onDragEnd: onDragEnd
-  });
-  useEffect(function () {
-    var onPageHide = function onPageHide() {
-      setLeaving(false);
     };
-    window.addEventListener('pagehide', onPageHide);
-    return function () {
-      window.removeEventListener('pagehide', onPageHide);
+    $[16] = inWebView;
+    $[17] = onClick;
+    $[18] = openWebView;
+    $[19] = toggled;
+    $[20] = trackEvent;
+    $[21] = url;
+    $[22] = t33;
+  } else {
+    t33 = $[22];
+  }
+  const onClickLink = t33;
+  const onDrag = _temp;
+  let t34;
+  if ($[23] !== dragAmount || $[24] !== inWebView || $[25] !== onClickLink) {
+    t34 = t35 => {
+      const {
+        movement: t36
+      } = t35;
+      const [, my] = t36;
+      if (my < -dragAmount) {
+        if (inWebView) {
+          onClickLink(null, "swipe");
+        } else {
+          if (isIos() && selfTargetLinkRef.current !== null) {
+            selfTargetLinkRef.current.click();
+            setLeaving(true);
+            onClickLink(null, "swipe");
+          } else {
+            if (buttonRef.current) {
+              buttonRef.current.click();
+              onClickLink(null, "swipe");
+            }
+          }
+        }
+      }
+    };
+    $[23] = dragAmount;
+    $[24] = inWebView;
+    $[25] = onClickLink;
+    $[26] = t34;
+  } else {
+    t34 = $[26];
+  }
+  const onDragEnd = t34;
+  let t35;
+  if ($[27] !== onDragEnd) {
+    t35 = {
+      onDrag,
+      onDragEnd
+    };
+    $[27] = onDragEnd;
+    $[28] = t35;
+  } else {
+    t35 = $[28];
+  }
+  const bind = useGesture(t35);
+  let t36;
+  let t37;
+  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+    t36 = () => {
+      const onPageHide = () => {
+        setLeaving(false);
+      };
+      window.addEventListener("pagehide", onPageHide);
+      return () => {
+        window.removeEventListener("pagehide", onPageHide);
+      };
     };
-  }, [setLeaving]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.disabled, disabled), styles.animationDisabled, animationDisabled), styles.invalidUrl, !validUrl), styles.inWebView, inWebView)]),
-    ref: elRef,
-    children: [leaving ? /*#__PURE__*/jsx("div", {
+    t37 = [setLeaving];
+    $[29] = t36;
+    $[30] = t37;
+  } else {
+    t36 = $[29];
+    t37 = $[30];
+  }
+  useEffect(t36, t37);
+  const t38 = !validUrl;
+  let t39;
+  if ($[31] !== animationDisabled || $[32] !== className || $[33] !== disabled || $[34] !== inWebView || $[35] !== t38) {
+    t39 = classNames([styles.container, className, {
+      [styles.disabled]: disabled,
+      [styles.animationDisabled]: animationDisabled,
+      [styles.invalidUrl]: t38,
+      [styles.inWebView]: inWebView
+    }]);
+    $[31] = animationDisabled;
+    $[32] = className;
+    $[33] = disabled;
+    $[34] = inWebView;
+    $[35] = t38;
+    $[36] = t39;
+  } else {
+    t39 = $[36];
+  }
+  let t40;
+  if ($[37] !== leaving) {
+    t40 = leaving ? /*#__PURE__*/jsx("div", {
       className: styles.leavingFrame
-    }) : null, !inWebView && swipeUpEnabled ? /*#__PURE__*/jsx("a", {
+    }) : null;
+    $[37] = leaving;
+    $[38] = t40;
+  } else {
+    t40 = $[38];
+  }
+  let t41;
+  if ($[39] !== focusable || $[40] !== inWebView || $[41] !== swipeUpEnabled || $[42] !== url) {
+    t41 = !inWebView && swipeUpEnabled ? /*#__PURE__*/jsx("a", {
       className: styles.selfTargetLink,
       href: url,
       ref: selfTargetLinkRef,
-      tabIndex: focusable ? '0' : '-1'
-    }) : null, swipeUpEnabled ? /*#__PURE__*/jsx("div", {
+      tabIndex: focusable ? "0" : "-1"
+    }) : null;
+    $[39] = focusable;
+    $[40] = inWebView;
+    $[41] = swipeUpEnabled;
+    $[42] = url;
+    $[43] = t41;
+  } else {
+    t41 = $[43];
+  }
+  let t42;
+  if ($[44] !== arrow || $[45] !== arrowClassName || $[46] !== arrowStyle || $[47] !== swipeUpEnabled) {
+    t42 = swipeUpEnabled ? /*#__PURE__*/jsx("div", {
       className: classNames([styles.arrow, arrowClassName]),
       style: arrowStyle,
       children: arrow || /*#__PURE__*/jsx(Arrow, {})
-    }) : null, /*#__PURE__*/jsx("div", {
-      className: classNames([styles.buttonBorder, buttonBorderClassName]),
-      children: /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
-        className: classNames([styles.button, buttonClassName, _defineProperty({}, styles.withoutLinkStyle, !inWebView)]),
-        refButton: buttonRef,
-        focusable: focusable,
-        buttonStyle: boxStyle,
-        inline: true,
-        "aria-pressed": toggled,
-        href: !inWebView ? url : null,
-        external: !inWebView ? external : false,
-        onClick: onClickLink
-      }, swipeUpEnabled && !disabled ? bind() : null), {}, {
-        children: /*#__PURE__*/jsxs("span", {
-          className: classNames([styles.label, labelClassName]),
-          children: [icon !== null ? /*#__PURE__*/jsx("div", {
-            className: styles.icon,
-            children: icon
-          }) : null, /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, label), {}, {
-            className: styles.text,
-            textStyle: _objectSpread(_objectSpread({}, textStyle), {}, {
-              lineHeight: lineHeight || 1
-            }),
-            inline: true
-          }))]
-        })
-      }))
-    })]
-  });
+    }) : null;
+    $[44] = arrow;
+    $[45] = arrowClassName;
+    $[46] = arrowStyle;
+    $[47] = swipeUpEnabled;
+    $[48] = t42;
+  } else {
+    t42 = $[48];
+  }
+  let t43;
+  if ($[49] !== buttonBorderClassName) {
+    t43 = classNames([styles.buttonBorder, buttonBorderClassName]);
+    $[49] = buttonBorderClassName;
+    $[50] = t43;
+  } else {
+    t43 = $[50];
+  }
+  const t44 = !inWebView;
+  let t45;
+  if ($[51] !== buttonClassName || $[52] !== t44) {
+    t45 = classNames([styles.button, buttonClassName, {
+      [styles.withoutLinkStyle]: t44
+    }]);
+    $[51] = buttonClassName;
+    $[52] = t44;
+    $[53] = t45;
+  } else {
+    t45 = $[53];
+  }
+  const t46 = !inWebView ? url : null;
+  const t47 = !inWebView ? external : false;
+  let t48;
+  if ($[54] !== bind || $[55] !== disabled || $[56] !== swipeUpEnabled) {
+    t48 = swipeUpEnabled && !disabled ? bind() : null;
+    $[54] = bind;
+    $[55] = disabled;
+    $[56] = swipeUpEnabled;
+    $[57] = t48;
+  } else {
+    t48 = $[57];
+  }
+  let t49;
+  if ($[58] !== labelClassName) {
+    t49 = classNames([styles.label, labelClassName]);
+    $[58] = labelClassName;
+    $[59] = t49;
+  } else {
+    t49 = $[59];
+  }
+  let t50;
+  if ($[60] !== icon) {
+    t50 = icon !== null ? /*#__PURE__*/jsx("div", {
+      className: styles.icon,
+      children: icon
+    }) : null;
+    $[60] = icon;
+    $[61] = t50;
+  } else {
+    t50 = $[61];
+  }
+  const t51 = lineHeight || 1;
+  let t52;
+  if ($[62] !== t51 || $[63] !== textStyle) {
+    t52 = {
+      ...textStyle,
+      lineHeight: t51
+    };
+    $[62] = t51;
+    $[63] = textStyle;
+    $[64] = t52;
+  } else {
+    t52 = $[64];
+  }
+  let t53;
+  if ($[65] !== label || $[66] !== t52) {
+    t53 = /*#__PURE__*/jsx(Text, {
+      ...label,
+      className: styles.text,
+      textStyle: t52,
+      inline: true
+    });
+    $[65] = label;
+    $[66] = t52;
+    $[67] = t53;
+  } else {
+    t53 = $[67];
+  }
+  let t54;
+  if ($[68] !== t49 || $[69] !== t50 || $[70] !== t53) {
+    t54 = /*#__PURE__*/jsxs("span", {
+      className: t49,
+      children: [t50, t53]
+    });
+    $[68] = t49;
+    $[69] = t50;
+    $[70] = t53;
+    $[71] = t54;
+  } else {
+    t54 = $[71];
+  }
+  let t55;
+  if ($[72] !== boxStyle || $[73] !== focusable || $[74] !== onClickLink || $[75] !== t45 || $[76] !== t46 || $[77] !== t47 || $[78] !== t48 || $[79] !== t54 || $[80] !== toggled) {
+    t55 = /*#__PURE__*/jsx(Button, {
+      className: t45,
+      refButton: buttonRef,
+      focusable: focusable,
+      buttonStyle: boxStyle,
+      inline: true,
+      "aria-pressed": toggled,
+      href: t46,
+      external: t47,
+      onClick: onClickLink,
+      ...t48,
+      children: t54
+    });
+    $[72] = boxStyle;
+    $[73] = focusable;
+    $[74] = onClickLink;
+    $[75] = t45;
+    $[76] = t46;
+    $[77] = t47;
+    $[78] = t48;
+    $[79] = t54;
+    $[80] = toggled;
+    $[81] = t55;
+  } else {
+    t55 = $[81];
+  }
+  let t56;
+  if ($[82] !== t43 || $[83] !== t55) {
+    t56 = /*#__PURE__*/jsx("div", {
+      className: t43,
+      children: t55
+    });
+    $[82] = t43;
+    $[83] = t55;
+    $[84] = t56;
+  } else {
+    t56 = $[84];
+  }
+  let t57;
+  if ($[85] !== elRef || $[86] !== t39 || $[87] !== t40 || $[88] !== t41 || $[89] !== t42 || $[90] !== t56) {
+    t57 = /*#__PURE__*/jsxs("div", {
+      className: t39,
+      ref: elRef,
+      children: [t40, t41, t42, t56]
+    });
+    $[85] = elRef;
+    $[86] = t39;
+    $[87] = t40;
+    $[88] = t41;
+    $[89] = t42;
+    $[90] = t56;
+    $[91] = t57;
+  } else {
+    t57 = $[91];
+  }
+  return t57;
+}
+function _temp(t0) {
+  const {
+    event
+  } = t0;
+  event.preventDefault();
 }
-var CallToAction_default = (function (_ref9) {
-  var ref = _ref9.ref,
-    props = _objectWithoutProperties(_ref9, _excluded);
-  return /*#__PURE__*/jsx(CallToAction, _objectSpread({
-    elRef: ref
-  }, props));
+var CallToAction_default = ({
+  ref,
+  ...props
+}) => /*#__PURE__*/jsx(CallToAction, {
+  elRef: ref,
+  ...props
 });
 
 export { CallToAction_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-call-to-action",
-    "version": "0.4.71",
+    "version": "0.4.76",
     "private": false,
     "description": "",
     "keywords": [
@@ -32,9 +32,11 @@
     "license": "ISC",
     "type": "module",
     "module": "es/index.js",
+    "style": "./assets/css/styles.css",
     "exports": {
         ".": {
             "types": "./es/index.d.ts",
+            "style": "./assets/css/styles.css",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -51,22 +53,22 @@
         "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@fortawesome/fontawesome-svg-core": "^7.2.0",
         "@fortawesome/free-solid-svg-icons": "^7.2.0",
         "@fortawesome/react-fontawesome": "^3.2.0",
-        "@micromag/core": "^0.4.71",
-        "@micromag/element-button": "^0.4.71",
-        "@micromag/element-text": "^0.4.71",
-        "@micromag/element-webview": "^0.4.71",
+        "@micromag/core": "^0.4.74",
+        "@micromag/element-button": "^0.4.76",
+        "@micromag/element-text": "^0.4.74",
+        "@micromag/element-webview": "^0.4.76",
         "@react-spring/core": "^10.0.3",
         "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
@@ -79,6 +81,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
+    "gitHead": "42a24f578994b23090271013f136b7f78956b632",
     "types": "es/index.d.ts"
 }