@deframe-sdk/components 0.1.55 → 0.1.56

package/dist/index.mjs

@@ -90,7 +90,7 @@ function ActionButton(_a) {
   );
 }
 var CloseButton = ({ onClick, testId, ariaLabel = "Close", className }) => {
-  const baseClasses = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-full)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:text-[color:var(--deframe-widget-color-brand-primary)] transition-colors cursor-pointer";
+  const baseClasses = "w-12 h-12 rounded-[var(--deframe-widget-size-radius-sm)] flex items-center justify-center text-[color:var(--deframe-widget-color-text-secondary)] hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)] transition-[background] duration-150 cursor-pointer";
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -6438,8 +6438,8 @@ var SwapFromCardViewSimple = ({
     {
       "data-test-id": "swap-from-card-simple",
       className: wrapperClasses,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
+      onMouseEnter: selectedToken ? handleMouseEnter : void 0,
+      onMouseLeave: selectedToken ? handleMouseLeave : void 0,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -11394,7 +11394,7 @@ var EarnTokenSelectorSimpleView = ({
     "flex-shrink-0"
   ].join(" ");
   const stateClasses = {
-    interactive: "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_72%,transparent)]",
+    interactive: "cursor-pointer hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]",
     static: "cursor-default"
   };
   const selectorClasses = twMerge(
@@ -11833,15 +11833,20 @@ var EarnDepositFormViewSimple = ({
   const hasError = !!insufficientBalanceMessage || !!bytecodeErrorMessage;
   const isSubmitDisabled = !hasToken || submitDisabled || !amountValue || amountValue === "0" || amountValue === "";
   const [cardHovered, setCardHovered] = React6__default.useState(false);
-  const hideTimerRef = React6__default.useRef(void 0);
-  function handleHoverStart() {
-    clearTimeout(hideTimerRef.current);
+  const hideTimerRef = React6__default.useRef(null);
+  const handleHoverStart = React6__default.useCallback(() => {
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current);
+      hideTimerRef.current = null;
+    }
     setCardHovered(true);
-  }
-  function handleHoverEnd() {
+  }, []);
+  const handleHoverEnd = React6__default.useCallback(() => {
     hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
-  }
-  React6__default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
+  }, []);
+  React6__default.useEffect(() => () => {
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+  }, []);
   const panelBaseClasses = [
     "relative flex flex-col overflow-hidden w-[420px]",
     "rounded-[var(--deframe-widget-size-radius-md)]",
@@ -12013,13 +12018,11 @@ var EarnDepositFormViewSimple = ({
                       {
                         "data-slot": "deposit-simple-chips-row",
                         "data-test-id": "earn-deposit-form-view-simple-chips-row",
-                        initial: { opacity: 0, height: 0, marginTop: 0 },
-                        animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
-                        exit: { opacity: 0, height: 0, marginTop: 0 },
+                        initial: { opacity: 0, height: 0 },
+                        animate: { opacity: 1, height: "auto" },
+                        exit: { opacity: 0, height: 0 },
                         transition: { duration: 0.15, ease: "easeOut" },
-                        style: { overflow: "hidden" },
-                        onMouseEnter: handleHoverStart,
-                        onMouseLeave: handleHoverEnd,
+                        className: "overflow-hidden mt-[var(--deframe-widget-size-gap-sm)]",
                         children: /* @__PURE__ */ jsx(
                           EarnPercentageButtonsSimpleView,
                           {
@@ -12050,10 +12053,8 @@ var EarnDepositFormViewSimple = ({
                       "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
                       "border-[color:var(--deframe-widget-color-border-secondary)]",
                       "outline-none",
-                      "transition-[background,color,border-color] duration-150",
-                      "hover:opacity-100",
-                      "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
-                      "hover:text-[color:var(--deframe-widget-color-text-primary)]"
+                      "transition-[background] duration-150",
+                      "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]"
                     ].join(" "),
                     onClick: onBack,
                     "aria-label": cancelLabel,
@@ -14300,10 +14301,8 @@ var OnchainDepositFormSimpleView = ({
                   "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
                   "border-[color:var(--deframe-widget-color-border-secondary)]",
                   "outline-none",
-                  "transition-[background,color,border-color] duration-150",
-                  "hover:opacity-100",
-                  "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
-                  "hover:text-[color:var(--deframe-widget-color-text-primary)]"
+                  "transition-[background] duration-150",
+                  "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]"
                 ].join(" "),
                 onClick: onBack,
                 "aria-label": labels.backLabel,
@@ -14848,15 +14847,20 @@ var OnchainWithdrawFormSimpleView = ({
   const hasAddressError = !!transferError;
   const isSubmitDisabledInternal = !hasToken || isSubmitDisabled || isProcessing || !amount || amount === "0" || amount === "" || !destinationAddress.trim();
   const [cardHovered, setCardHovered] = React6__default.useState(false);
-  const hideTimerRef = React6__default.useRef(void 0);
-  function handleHoverStart() {
-    clearTimeout(hideTimerRef.current);
+  const hideTimerRef = React6__default.useRef(null);
+  const handleHoverStart = React6__default.useCallback(() => {
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current);
+      hideTimerRef.current = null;
+    }
     setCardHovered(true);
-  }
-  function handleHoverEnd() {
+  }, []);
+  const handleHoverEnd = React6__default.useCallback(() => {
     hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
-  }
-  React6__default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
+  }, []);
+  React6__default.useEffect(() => () => {
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+  }, []);
   const panelBaseClasses = [
     "relative flex flex-col overflow-hidden w-[420px]",
     "rounded-[var(--deframe-widget-size-radius-md)]",
@@ -17150,15 +17154,20 @@ var OfframpInputFormSimpleView = ({
     localStorage.setItem(STORAGE_KEY, type);
   }
   const [cardHovered, setCardHovered] = React6__default.useState(false);
-  const hideTimerRef = React6__default.useRef(void 0);
-  function handleHoverStart() {
-    clearTimeout(hideTimerRef.current);
+  const hideTimerRef = React6__default.useRef(null);
+  const handleHoverStart = React6__default.useCallback(() => {
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current);
+      hideTimerRef.current = null;
+    }
     setCardHovered(true);
-  }
-  function handleHoverEnd() {
+  }, []);
+  const handleHoverEnd = React6__default.useCallback(() => {
     hideTimerRef.current = setTimeout(() => setCardHovered(false), 150);
-  }
-  React6__default.useEffect(() => () => clearTimeout(hideTimerRef.current), []);
+  }, []);
+  React6__default.useEffect(() => () => {
+    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+  }, []);
   const hasAmountError = !!amountWarningMessage;
   const hasPixKeyError = !!error || !!offrampError;
   const isSubmitDisabledInternal = submitDisabled || !amount || amount === "0" || !pixKey.trim();
@@ -17210,10 +17219,8 @@ var OfframpInputFormSimpleView = ({
     "text-[15px] text-[color:var(--deframe-widget-color-text-secondary)]",
     "border-[color:var(--deframe-widget-color-border-secondary)]",
     "outline-none",
-    "transition-[background,color,border-color] duration-150",
-    "hover:opacity-100",
-    "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]",
-    "hover:text-[color:var(--deframe-widget-color-text-primary)]"
+    "transition-[background] duration-150",
+    "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_92%,transparent)]"
   ].join(" ");
   const submitButtonClasses = [
     "flex-1 h-12 rounded-[var(--deframe-widget-size-radius-sm)]",
@@ -17358,13 +17365,11 @@ var OfframpInputFormSimpleView = ({
                       {
                         "data-slot": "offramp-input-form-simple-chips-row",
                         "data-test-id": "offramp-input-form-simple-view-chips-row",
-                        initial: { opacity: 0, height: 0, marginTop: 0 },
-                        animate: { opacity: 1, height: "auto", marginTop: "var(--deframe-widget-size-gap-sm)" },
-                        exit: { opacity: 0, height: 0, marginTop: 0 },
+                        initial: { opacity: 0, height: 0 },
+                        animate: { opacity: 1, height: "auto" },
+                        exit: { opacity: 0, height: 0 },
                         transition: { duration: 0.15, ease: "easeOut" },
-                        style: { overflow: "hidden" },
-                        onMouseEnter: handleHoverStart,
-                        onMouseLeave: handleHoverEnd,
+                        className: "overflow-hidden mt-[var(--deframe-widget-size-gap-sm)]",
                         children: /* @__PURE__ */ jsx(
                           EarnPercentageButtonsSimpleView,
                           {