@daimo/pay 1.15.0 → 1.16.1

package/build/src/components/Common/Spinner/index.js

@@ -2,23 +2,63 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { SpinnerContainer } from './styles.js';
 
 const transition = {
-    duration: 0.4,
-    ease: [0.175, 0.885, 0.32, 0.98],
+  duration: 0.4,
+  ease: [0.175, 0.885, 0.32, 0.98]
 };
-const Spinner = () => (jsx(SpinnerContainer, { initial: { opacity: 0, rotate: 180 }, animate: {
-        opacity: 1,
-        rotate: 0,
-    }, exit: {
-        position: "absolute",
-        opacity: 0,
-        rotate: -180,
-        transition: {
-            ...transition,
-        },
-    }, transition: {
-        ...transition,
-        delay: 0.2,
-    }, children: jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "9", cy: "9", r: "7", stroke: "currentColor", strokeOpacity: "0.1", strokeWidth: "2.5" }), jsx("path", { d: "M16 9C16 5.13401 12.866 2 9 2", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })] }) }));
+const Spinner = () => /* @__PURE__ */ jsx(
+  SpinnerContainer,
+  {
+    initial: { opacity: 0, rotate: 180 },
+    animate: {
+      opacity: 1,
+      rotate: 0
+    },
+    exit: {
+      position: "absolute",
+      opacity: 0,
+      rotate: -180,
+      transition: {
+        ...transition
+      }
+    },
+    transition: {
+      ...transition,
+      delay: 0.2
+    },
+    children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "9",
+              cy: "9",
+              r: "7",
+              stroke: "currentColor",
+              strokeOpacity: "0.1",
+              strokeWidth: "2.5"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M16 9C16 5.13401 12.866 2 9 2",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round"
+            }
+          )
+        ]
+      }
+    )
+  }
+);
 
 export { Spinner };
 //# sourceMappingURL=index.js.map

package/build/src/components/Common/Spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/Spinner/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;AAEA,MAAM,UAAU,GAAG;AACjB,IAAA,QAAQ,EAAE,GAAG;IACb,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC;CACjC,CAAC;AAEW,MAAA,OAAO,GAAG,OACrBA,GAAC,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EACpC,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,MAAM,EAAE,CAAC;AACV,KAAA,EACD,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,CAAC,GAAG;AACZ,QAAA,UAAU,EAAE;AACV,YAAA,GAAG,UAAU;AACd,SAAA;AACF,KAAA,EACD,UAAU,EAAE;AACV,QAAA,GAAG,UAAU;AACb,QAAA,KAAK,EAAE,GAAG;AACX,KAAA,EAAA,QAAA,EAEDC,IACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAAA,QAAA,EAAA,CAElCD,gBACE,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,EACL,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,KAAK,EACnB,WAAW,EAAC,KAAK,EAAA,CACjB,EACFA,GAAA,CAAA,MAAA,EAAA,EACE,CAAC,EAAC,+BAA+B,EACjC,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,EAAA,CACrB,CACE,EAAA,CAAA,EAAA,CACW;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/Spinner/index.tsx"],"sourcesContent":["import { SpinnerContainer } from \"./styles\";\n\nconst transition = {\n  duration: 0.4,\n  ease: [0.175, 0.885, 0.32, 0.98],\n};\n\nexport const Spinner = () => (\n  <SpinnerContainer\n    initial={{ opacity: 0, rotate: 180 }}\n    animate={{\n      opacity: 1,\n      rotate: 0,\n    }}\n    exit={{\n      position: \"absolute\",\n      opacity: 0,\n      rotate: -180,\n      transition: {\n        ...transition,\n      },\n    }}\n    transition={{\n      ...transition,\n      delay: 0.2,\n    }}\n  >\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 18 18\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle\n        cx=\"9\"\n        cy=\"9\"\n        r=\"7\"\n        stroke=\"currentColor\"\n        strokeOpacity=\"0.1\"\n        strokeWidth=\"2.5\"\n      />\n      <path\n        d=\"M16 9C16 5.13401 12.866 2 9 2\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  </SpinnerContainer>\n);\n"],"names":[],"mappings":";;;AAEA,MAAM,UAAa,GAAA;AAAA,EACjB,QAAU,EAAA,GAAA;AAAA,EACV,IAAM,EAAA,CAAC,KAAO,EAAA,KAAA,EAAO,MAAM,IAAI,CAAA;AACjC,CAAA,CAAA;AAEO,MAAM,UAAU,sBACrB,GAAA;AAAA,EAAC,gBAAA;AAAA,EAAA;AAAA,IACC,OAAS,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,QAAQ,GAAI,EAAA;AAAA,IACnC,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,CAAA;AAAA,MACT,MAAQ,EAAA,CAAA;AAAA,KACV;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,QAAU,EAAA,UAAA;AAAA,MACV,OAAS,EAAA,CAAA;AAAA,MACT,MAAQ,EAAA,CAAA,GAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACV,GAAG,UAAA;AAAA,OACL;AAAA,KACF;AAAA,IACA,UAAY,EAAA;AAAA,MACV,GAAG,UAAA;AAAA,MACH,KAAO,EAAA,GAAA;AAAA,KACT;AAAA,IAEA,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,IAAA;AAAA,QACN,MAAO,EAAA,IAAA;AAAA,QACP,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,MAAA;AAAA,QACL,KAAM,EAAA,4BAAA;AAAA,QAEN,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,EAAG,EAAA,GAAA;AAAA,cACH,EAAG,EAAA,GAAA;AAAA,cACH,CAAE,EAAA,GAAA;AAAA,cACF,MAAO,EAAA,cAAA;AAAA,cACP,aAAc,EAAA,KAAA;AAAA,cACd,WAAY,EAAA,KAAA;AAAA,aAAA;AAAA,WACd;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,CAAE,EAAA,+BAAA;AAAA,cACF,MAAO,EAAA,cAAA;AAAA,cACP,WAAY,EAAA,KAAA;AAAA,cACZ,aAAc,EAAA,OAAA;AAAA,aAAA;AAAA,WAChB;AAAA,SAAA;AAAA,OAAA;AAAA,KACF;AAAA,GAAA;AACF;;;;"}

package/build/src/components/Common/Spinner/styles.js

@@ -2,11 +2,11 @@ import { motion } from 'framer-motion';
 import { keyframes } from 'styled-components';
 import styled from '../../../styles/styled/index.js';
 
-const Spin = keyframes `
+const Spin = keyframes`
   0%{ transform: rotate(0deg); }
   100%{ transform: rotate(360deg); }
 `;
-const SpinnerContainer = styled(motion.div) `
+const SpinnerContainer = styled(motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;

package/build/src/components/Common/Spinner/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/Spinner/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAIA,MAAM,IAAI,GAAG,SAAS,CAAA,CAAA;;;CAGrB,CAAC;AACW,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;eAInC,IAAI,CAAA;;;;iBAIF,IAAI,CAAA;;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/Spinner/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { keyframes } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nconst Spin = keyframes`\n  0%{ transform: rotate(0deg); }\n  100%{ transform: rotate(360deg); }\n`;\nexport const SpinnerContainer = styled(motion.div)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: ${Spin} 1s linear infinite;\n  svg {\n    display: block;\n    position: relative;\n    animation: ${Spin} 1s ease-in-out infinite;\n  }\n`;\n"],"names":[],"mappings":";;;;AAIA,MAAM,IAAO,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAIA,MAAA,gBAAA,GAAmB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,aAAA,EAIlC,IAAI,CAAA;AAAA;AAAA;AAAA;AAAA,eAAA,EAIF,IAAI,CAAA;AAAA;AAAA;;;;"}

package/build/src/components/Common/SwitchButton/index.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { SwitchIcon } from '../../../assets/icons.js';
 import styled from '../../../styles/styled/index.js';
 
-const Container = styled.button `
+const Container = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,9 +12,9 @@ const Container = styled.button `
   width: fit-content;
   background: transparent;
 `;
-const IconWrapper = styled.div `
-  opacity: ${({ $isFlipped }) => ($isFlipped ? 1 : 1)};
-  transform: scaleY(${({ $isFlipped }) => ($isFlipped ? -1 : 1)});
+const IconWrapper = styled.div`
+  opacity: ${({ $isFlipped }) => $isFlipped ? 1 : 1};
+  transform: scaleY(${({ $isFlipped }) => $isFlipped ? -1 : 1});
   transition: all 0.2s ease-in-out;
 
   &.fade {
@@ -23,17 +23,20 @@ const IconWrapper = styled.div `
   }
 `;
 const SwitchButton = ({ onClick, children }) => {
-    const [isFlipped, setIsFlipped] = useState(false);
-    const [isFading, setIsFading] = useState(false);
-    const handleClick = () => {
-        setIsFading(true);
-        setTimeout(() => {
-            setIsFlipped(!isFlipped);
-            setIsFading(false);
-        }, 150); // Match the transition duration
-        onClick();
-    };
-    return (jsxs(Container, { onClick: handleClick, children: [jsx(IconWrapper, { "$isFlipped": isFlipped, className: isFading ? "fade" : "", children: jsx(SwitchIcon, {}) }), children] }));
+  const [isFlipped, setIsFlipped] = useState(false);
+  const [isFading, setIsFading] = useState(false);
+  const handleClick = () => {
+    setIsFading(true);
+    setTimeout(() => {
+      setIsFlipped(!isFlipped);
+      setIsFading(false);
+    }, 150);
+    onClick();
+  };
+  return /* @__PURE__ */ jsxs(Container, { onClick: handleClick, children: [
+    /* @__PURE__ */ jsx(IconWrapper, { $isFlipped: isFlipped, className: isFading ? "fade" : "", children: /* @__PURE__ */ jsx(SwitchIcon, {}) }),
+    children
+  ] });
 };
 
 export { SwitchButton as default };

package/build/src/components/Common/SwitchButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/SwitchButton/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","Icon"],"mappings":";;;;;AAIA,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAA,CAAA;;;;;;;;CAQ9B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAA;AAC1C,WAAA,EAAA,CAAC,EAAE,UAAU,EAAE,MAAM,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AAC/B,oBAAA,EAAA,CAAC,EAAE,UAAU,EAAE,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;;;;;;;CAO9D,CAAC;AAEI,MAAA,YAAY,GAGb,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;IAC7B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,WAAW,GAAG,MAAK;QACvB,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,UAAU,CAAC,MAAK;AACd,YAAA,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;YACzB,WAAW,CAAC,KAAK,CAAC,CAAC;AACrB,SAAC,EAAE,GAAG,CAAC,CAAC;AACR,QAAA,OAAO,EAAE,CAAC;AACZ,KAAC,CAAC;AAEF,IAAA,QACEA,IAAA,CAAC,SAAS,EAAA,EAAC,OAAO,EAAE,WAAW,EAC7B,QAAA,EAAA,CAAAC,GAAA,CAAC,WAAW,EAAA,EAAA,YAAA,EAAa,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,MAAM,GAAG,EAAE,EAAA,QAAA,EACnEA,GAAC,CAAAC,UAAI,KAAG,EACI,CAAA,EACb,QAAQ,CAAA,EAAA,CACC,EACZ;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/SwitchButton/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { SwitchIcon as Icon } from \"../../../assets/icons\";\nimport styled from \"../../../styles/styled\";\n\nconst Container = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  cursor: pointer;\n  width: fit-content;\n  background: transparent;\n`;\n\nconst IconWrapper = styled.div<{ $isFlipped: boolean }>`\n  opacity: ${({ $isFlipped }) => ($isFlipped ? 1 : 1)};\n  transform: scaleY(${({ $isFlipped }) => ($isFlipped ? -1 : 1)});\n  transition: all 0.2s ease-in-out;\n\n  &.fade {\n    opacity: 0;\n    transform: scaleY(0);\n  }\n`;\n\nconst SwitchButton: React.FC<{\n  onClick: () => void;\n  children?: React.ReactNode;\n}> = ({ onClick, children }) => {\n  const [isFlipped, setIsFlipped] = useState(false);\n  const [isFading, setIsFading] = useState(false);\n\n  const handleClick = () => {\n    setIsFading(true);\n    setTimeout(() => {\n      setIsFlipped(!isFlipped);\n      setIsFading(false);\n    }, 150); // Match the transition duration\n    onClick();\n  };\n\n  return (\n    <Container onClick={handleClick}>\n      <IconWrapper $isFlipped={isFlipped} className={isFading ? \"fade\" : \"\"}>\n        <Icon />\n      </IconWrapper>\n      {children}\n    </Container>\n  );\n};\n\nexport default SwitchButton;\n"],"names":["Icon"],"mappings":";;;;;AAIA,MAAM,YAAY,MAAO,CAAA,MAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAUzB,MAAM,cAAc,MAAO,CAAA,GAAA,CAAA;AAAA,WAAA,EACd,CAAC,EAAE,UAAA,EAAkB,KAAA,UAAA,GAAa,IAAI,CAAE,CAAA;AAAA,oBAAA,EAC/B,CAAC,EAAE,UAAA,EAAkB,KAAA,UAAA,GAAa,KAAK,CAAE,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAS/D,MAAM,YAGD,GAAA,CAAC,EAAE,OAAA,EAAS,UAAe,KAAA;AAC9B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAChD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE9C,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,YAAA,CAAa,CAAC,SAAS,CAAA,CAAA;AACvB,MAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,OAChB,GAAG,CAAA,CAAA;AACN,IAAQ,OAAA,EAAA,CAAA;AAAA,GACV,CAAA;AAEA,EACE,uBAAA,IAAA,CAAC,SAAU,EAAA,EAAA,OAAA,EAAS,WAClB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,WAAA,EAAA,EAAY,YAAY,SAAW,EAAA,SAAA,EAAW,WAAW,MAAS,GAAA,EAAA,EACjE,QAAC,kBAAA,GAAA,CAAAA,UAAA,EAAA,EAAK,CACR,EAAA,CAAA;AAAA,IACC,QAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/build/src/components/Common/ThemedButton/index.js

@@ -3,22 +3,43 @@ import { Container } from './styles.js';
 export { ThemeContainer } from './styles.js';
 import useMeasure from 'react-use-measure';
 
-const ThemedButton = ({ children, variant = "primary", autoSize = true, duration = 0.3, style, }) => {
-    const [contentRef, bounds] = useMeasure();
-    return (jsx(Container, { className: variant, initial: false, animate: autoSize
-            ? {
-                width: bounds.width > 10 ? bounds.width : "auto",
-            }
-            : undefined, transition: {
-            duration: duration,
-            ease: [0.25, 1, 0.5, 1],
-            delay: 0.01,
-        }, style: style, children: jsx("div", { ref: contentRef, style: {
-                whiteSpace: "nowrap",
-                width: "fit-content",
-                position: "relative",
-                padding: "0 12px",
-            }, children: children }) }));
+const ThemedButton = ({
+  children,
+  variant = "primary",
+  autoSize = true,
+  duration = 0.3,
+  style
+}) => {
+  const [contentRef, bounds] = useMeasure();
+  return /* @__PURE__ */ jsx(
+    Container,
+    {
+      className: variant,
+      initial: false,
+      animate: autoSize ? {
+        width: bounds.width > 10 ? bounds.width : "auto"
+      } : void 0,
+      transition: {
+        duration,
+        ease: [0.25, 1, 0.5, 1],
+        delay: 0.01
+      },
+      style,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: contentRef,
+          style: {
+            whiteSpace: "nowrap",
+            width: "fit-content",
+            position: "relative",
+            padding: "0 12px"
+          },
+          children
+        }
+      )
+    }
+  );
 };
 
 export { ThemedButton as default };

package/build/src/components/Common/ThemedButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ThemedButton/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAoBM,MAAA,YAAY,GAAsC,CAAC,EACvD,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,GAAG,EACd,KAAK,GACN,KAAI;IACH,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;AAC1C,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EACR,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,KAAK,EACd,OAAO,EACL,QAAQ;AACN,cAAE;AACE,gBAAA,KAAK,EAAE,MAAM,CAAC,KAAK,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM;AACjD,aAAA;AACH,cAAE,SAAS,EAEf,UAAU,EAAE;AACV,YAAA,QAAQ,EAAE,QAAQ;YAClB,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;AACvB,YAAA,KAAK,EAAE,IAAI;SACZ,EACD,KAAK,EAAE,KAAK,EAEZ,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,KAAK,EAAE,aAAa;AACpB,gBAAA,QAAQ,EAAE,UAAU;AACpB,gBAAA,OAAO,EAAE,QAAQ;AAClB,aAAA,EAAA,QAAA,EAEA,QAAQ,EAAA,CACL,EACI,CAAA,EACZ;AACJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ThemedButton/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Container, ThemeContainer } from \"./styles\";\n\nimport useMeasure from \"react-use-measure\";\nimport { All } from \"./../../../types\";\n\ntype ThemedButtonProps = {\n  children?: React.ReactNode;\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  autoSize?: boolean;\n  duration?: number;\n  style?: React.CSSProperties;\n  onClick?: () => void;\n};\n\nexport const PlaceholderButton = () => {\n  return <div style={{ height: 40 }} />;\n};\n\nconst ThemedButton: React.FC<ThemedButtonProps & All> = ({\n  children,\n  variant = \"primary\",\n  autoSize = true,\n  duration = 0.3,\n  style,\n}) => {\n  const [contentRef, bounds] = useMeasure();\n  return (\n    <Container\n      className={variant}\n      initial={false}\n      animate={\n        autoSize\n          ? {\n              width: bounds.width > 10 ? bounds.width : \"auto\",\n            }\n          : undefined\n      }\n      transition={{\n        duration: duration,\n        ease: [0.25, 1, 0.5, 1],\n        delay: 0.01,\n      }}\n      style={style}\n    >\n      <div\n        ref={contentRef}\n        style={{\n          whiteSpace: \"nowrap\",\n          width: \"fit-content\",\n          position: \"relative\",\n          padding: \"0 12px\",\n        }}\n      >\n        {children}\n      </div>\n    </Container>\n  );\n};\nexport default ThemedButton;\nexport { ThemeContainer };\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,eAAkD,CAAC;AAAA,EACvD,QAAA;AAAA,EACA,OAAU,GAAA,SAAA;AAAA,EACV,QAAW,GAAA,IAAA;AAAA,EACX,QAAW,GAAA,GAAA;AAAA,EACX,KAAA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,CAAC,UAAA,EAAY,MAAM,CAAA,GAAI,UAAW,EAAA,CAAA;AACxC,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,OAAA;AAAA,MACX,OAAS,EAAA,KAAA;AAAA,MACT,SACE,QACI,GAAA;AAAA,QACE,KAAO,EAAA,MAAA,CAAO,KAAQ,GAAA,EAAA,GAAK,OAAO,KAAQ,GAAA,MAAA;AAAA,OAE5C,GAAA,KAAA,CAAA;AAAA,MAEN,UAAY,EAAA;AAAA,QACV,QAAA;AAAA,QACA,IAAM,EAAA,CAAC,IAAM,EAAA,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,QACtB,KAAO,EAAA,IAAA;AAAA,OACT;AAAA,MACA,KAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAK,EAAA,UAAA;AAAA,UACL,KAAO,EAAA;AAAA,YACL,UAAY,EAAA,QAAA;AAAA,YACZ,KAAO,EAAA,aAAA;AAAA,YACP,QAAU,EAAA,UAAA;AAAA,YACV,OAAS,EAAA,QAAA;AAAA,WACX;AAAA,UAEC,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/build/src/components/Common/ThemedButton/styles.js

@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion';
 import styled from '../../../styles/styled/index.js';
 
-const Container = styled(motion.div) `
+const Container = styled(motion.div)`
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -96,7 +96,7 @@ const Container = styled(motion.div) `
     );
   }
 `;
-const ThemeContainer = styled.button `
+const ThemeContainer = styled.button`
   all: initial;
   appearance: none;
   user-select: none;

package/build/src/components/Common/ThemedButton/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ThemedButton/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGa,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAEzC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FA;AAEW,MAAA,cAAc,GAAG,MAAM,CAAC,MAAM,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;MAuBrC,SAAS,CAAA;;;;;;;;MAQT,SAAS,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ThemedButton/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport styled from \"./../../../styles/styled\";\n\nexport const Container = styled(motion.div)<{\n  $variant?: string;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  height: 40px;\n  padding: 0;\n  line-height: 0;\n  letter-spacing: -0.2px;\n  font-size: var(--ck-connectbutton-font-size, 16px);\n  font-weight: var(--ck-connectbutton-font-weight, 500);\n  text-align: center;\n  transition: 100ms ease;\n  transition-property: color, background, box-shadow, border-radius;\n\n  color: var(--color);\n  background: var(--background);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n\n  &.primary {\n    --color: var(--ck-connectbutton-color);\n    --background: var(--ck-connectbutton-background);\n    --box-shadow: var(--ck-connectbutton-box-shadow);\n    --border-radius: var(--ck-connectbutton-border-radius, 12px);\n\n    --hover-color: var(--ck-connectbutton-hover-color, var(--color));\n    --hover-background: var(\n      --ck-connectbutton-hover-background,\n      var(--background)\n    );\n    --hover-box-shadow: var(\n      --ck-connectbutton-hover-box-shadow,\n      var(--box-shadow)\n    );\n    --hover-border-radius: var(\n      --ck-connectbutton-hover-border-radius,\n      var(--border-radius)\n    );\n\n    --active-color: var(--ck-connectbutton-active-color, var(--hover-color));\n    --active-background: var(\n      --ck-connectbutton-active-background,\n      var(--hover-background)\n    );\n    --active-box-shadow: var(\n      --ck-connectbutton-active-box-shadow,\n      var(--hover-box-shadow)\n    );\n    --active-border-radius: var(\n      --ck-connectbutton-active-border-radius,\n      var(--hover-border-radius)\n    );\n  }\n  &.secondary {\n    --color: var(--ck-connectbutton-balance-color);\n    --background: var(--ck-connectbutton-balance-background);\n    --box-shadow: var(--ck-connectbutton-balance-box-shadow);\n    --border-radius: var(\n      --ck-connectbutton-balance-border-radius,\n      var(--ck-connectbutton-border-radius, 12px)\n    );\n\n    --hover-color: var(--ck-connectbutton-balance-hover-color, var(--color));\n    --hover-background: var(\n      --ck-connectbutton-balance-hover-background,\n      var(--background)\n    );\n    --hover-box-shadow: var(\n      --ck-connectbutton-balance-hover-box-shadow,\n      var(--box-shadow)\n    );\n    --hover-border-radius: var(\n      --ck-connectbutton-balance-hover-border-radius,\n      var(--border-radius)\n    );\n\n    --active-color: var(\n      --ck-connectbutton-balance-active-color,\n      var(--hover-color)\n    );\n    --active-background: var(\n      --ck-connectbutton-balance-active-background,\n      var(--hover-background)\n    );\n    --active-box-shadow: var(\n      --ck-connectbutton-balance-active-box-shadow,\n      var(--hover-box-shadow)\n    );\n    --active-border-radius: var(\n      --ck-connectbutton-balance-active-border-radius,\n      var(--hover-border-radius)\n    );\n  }\n`;\n\nexport const ThemeContainer = styled.button`\n  all: initial;\n  appearance: none;\n  user-select: none;\n  position: relative;\n  padding: 0;\n  margin: 0;\n  background: none;\n  border-radius: var(--ck-border-radius);\n\n  &:disabled {\n    pointer-events: none;\n    opacity: 0.3;\n  }\n\n  display: flex;\n  flex-wrap: nowrap;\n  background: none;\n  cursor: pointer;\n  * {\n    cursor: pointer;\n  }\n  &:hover {\n    ${Container} {\n      color: var(--hover-color, var(--color));\n      background: var(--hover-background, var(--background));\n      box-shadow: var(--hover-box-shadow, var(--box-shadow));\n      border-radius: var(--hover-border-radius, var(--border-radius));\n    }\n  }\n  &:active {\n    ${Container} {\n      color: var(--active-color, var(--hover-color, var(--color)));\n      background: var(\n        --active-background,\n        var(--hover-background, var(--background))\n      );\n      box-shadow: var(\n        --active-box-shadow,\n        var(--hover-box-shadow, var(--box-shadow))\n      );\n      border-radius: var(\n        --active-border-radius,\n        var(--hover-border-radius, var(--border-radius))\n      );\n    }\n  }\n  &:focus-visible {\n    outline: 2px solid var(--ck-family-brand);\n  }\n`;\n"],"names":[],"mappings":";;;AAGa,MAAA,SAAA,GAAY,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAkGnC,MAAM,iBAAiB,MAAO,CAAA,MAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,EAuB/B,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,EAQT,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/build/src/components/Common/TokenChainLogo/index.js

@@ -3,11 +3,18 @@ import { motion } from 'framer-motion';
 import { chainToLogo } from '../../../assets/chains.js';
 import styled from '../../../styles/styled/index.js';
 
-const TokenChainLogo = ({ token, size = 32, offset = 0, }) => {
-    const chainLogoSize = Math.round((size * 30) / 64);
-    return (jsxs(TokenChainContainer, { "$size": size, children: [jsx(TokenImage, { src: token.logoURI, alt: token.symbol, "$size": size }), jsx(ChainContainer, { "$size": chainLogoSize, "$offset": offset, children: chainToLogo[token.chainId] })] }));
+const TokenChainLogo = ({
+  token,
+  size = 32,
+  offset = 0
+}) => {
+  const chainLogoSize = Math.round(size * 30 / 64);
+  return /* @__PURE__ */ jsxs(TokenChainContainer, { $size: size, children: [
+    /* @__PURE__ */ jsx(TokenImage, { src: token.logoURI, alt: token.symbol, $size: size }),
+    /* @__PURE__ */ jsx(ChainContainer, { $size: chainLogoSize, $offset: offset, children: chainToLogo[token.chainId] })
+  ] });
 };
-const TokenChainContainer = styled(motion.div) `
+const TokenChainContainer = styled(motion.div)`
   position: relative;
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
@@ -15,19 +22,18 @@ const TokenChainContainer = styled(motion.div) `
   align-items: center;
   justify-content: center;
 `;
-const TokenImage = styled.img `
+const TokenImage = styled.img`
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
   border-radius: 50%;
   object-fit: cover;
   transition: transform 0.2s ease;
 
-  ${(props) => props.$showBorder &&
-    `
+  ${(props) => props.$showBorder && `
     border: 2px solid var(--ck-body-background, #fff);
   `}
 `;
-const ChainContainer = styled(motion.div) `
+const ChainContainer = styled(motion.div)`
   position: absolute;
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;

package/build/src/components/Common/TokenChainLogo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/TokenChainLogo/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,CAAC,GAKX,KAAI;AACH,IAAA,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;AAEnD,IAAA,QACEA,IAAC,CAAA,mBAAmB,aAAQ,IAAI,EAAA,QAAA,EAAA,CAC9BC,IAAC,UAAU,EAAA,EAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,EAAS,OAAA,EAAA,IAAI,GAAI,EAClEA,GAAA,CAAC,cAAc,EAAQ,EAAA,OAAA,EAAA,aAAa,aAAW,MAAM,EAAA,QAAA,EAClD,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,EACZ,CAAA,CAAA,EAAA,CACG,EACtB;AACJ,EAAE;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAmB,CAAA;;AAEtD,SAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACrB,UAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAyC,CAAA;AAC3D,SAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACrB,UAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;;;;;AAK9B,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,WAAW;AACjB,IAAA,CAAA;;AAED,EAAA,CAAA,CAAA;CACF,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAIvC,CAAA;;AAES,SAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACrB,UAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACnB,aAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;AACrB,cAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,CAAA;;AAE3B,SAAA,EAAA,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAA;;;;AAInB,cAAA,EAAA,CAAC,KAAK,KAClB,KAAK,CAAC,WAAW,GAAG,iCAAiC,GAAG,aAAa,CAAA;;;;;;;;;;;;CAYxE;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/TokenChainLogo/index.tsx"],"sourcesContent":["import { Token } from \"@daimo/pay-common\";\nimport { motion } from \"framer-motion\";\nimport { chainToLogo } from \"../../../assets/chains\";\nimport styled from \"../../../styles/styled\";\n\nconst TokenChainLogo = ({\n  token,\n  size = 32,\n  offset = 0,\n}: {\n  token: Token;\n  size?: number;\n  offset?: number;\n}) => {\n  const chainLogoSize = Math.round((size * 30) / 64);\n\n  return (\n    <TokenChainContainer $size={size}>\n      <TokenImage src={token.logoURI} alt={token.symbol} $size={size} />\n      <ChainContainer $size={chainLogoSize} $offset={offset}>\n        {chainToLogo[token.chainId]}\n      </ChainContainer>\n    </TokenChainContainer>\n  );\n};\n\nconst TokenChainContainer = styled(motion.div)<{ $size: number }>`\n  position: relative;\n  width: ${(props) => props.$size}px;\n  height: ${(props) => props.$size}px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst TokenImage = styled.img<{ $size: number; $showBorder: boolean }>`\n  width: ${(props) => props.$size}px;\n  height: ${(props) => props.$size}px;\n  border-radius: 50%;\n  object-fit: cover;\n  transition: transform 0.2s ease;\n\n  ${(props) =>\n    props.$showBorder &&\n    `\n    border: 2px solid var(--ck-body-background, #fff);\n  `}\n`;\n\nconst ChainContainer = styled(motion.div)<{\n  $size: number;\n  $offset: number;\n  $showBorder: boolean;\n}>`\n  position: absolute;\n  width: ${(props) => props.$size}px;\n  height: ${(props) => props.$size}px;\n  min-width: ${(props) => props.$size}px;\n  min-height: ${(props) => props.$size}px;\n  bottom: 0px;\n  right: ${(props) => props.$offset}px;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  overflow: hidden;\n  background: ${(props) =>\n    props.$showBorder ? \"var(--ck-body-background, #fff)\" : \"transparent\"};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    flex-shrink: 0;\n  }\n`;\n\nexport default TokenChainLogo;\n"],"names":[],"mappings":";;;;;AAKA,MAAM,iBAAiB,CAAC;AAAA,EACtB,KAAA;AAAA,EACA,IAAO,GAAA,EAAA;AAAA,EACP,MAAS,GAAA,CAAA;AACX,CAIM,KAAA;AACJ,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,KAAO,CAAA,IAAA,GAAO,KAAM,EAAE,CAAA,CAAA;AAEjD,EACE,uBAAA,IAAA,CAAC,mBAAoB,EAAA,EAAA,KAAA,EAAO,IAC1B,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAW,KAAK,KAAM,CAAA,OAAA,EAAS,KAAK,KAAM,CAAA,MAAA,EAAQ,OAAO,IAAM,EAAA,CAAA;AAAA,oBAChE,GAAA,CAAC,kBAAe,KAAO,EAAA,aAAA,EAAe,SAAS,MAC5C,EAAA,QAAA,EAAA,WAAA,CAAY,KAAM,CAAA,OAAO,CAC5B,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,mBAAA,GAAsB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA,SAElC,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA,UACrB,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMlC,MAAM,aAAa,MAAO,CAAA,GAAA,CAAA;AAAA,SACf,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA,UACrB,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9B,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,WACN,IAAA,CAAA;AAAA;AAAA,EAED,CAAA,CAAA;AAAA,CAAA,CAAA;AAGH,MAAM,cAAA,GAAiB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA,SAM7B,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA,UACrB,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA,aACnB,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA,cACrB,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA;AAAA;AAAA,SAE3B,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA,cAAA,EAInB,CAAC,KAAA,KACb,KAAM,CAAA,WAAA,GAAc,oCAAoC,aAAa,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

package/build/src/components/Common/Tooltip/index.js

@@ -8,89 +8,121 @@ import { ResetContainer } from '../../../styles/index.js';
 import { useThemeContext } from '../../DaimoPayThemeProvider/DaimoPayThemeProvider.js';
 import Portal from '../Portal/index.js';
 
-const Tooltip = ({ children, message, open, xOffset = 0, yOffset = 0, delay, }) => {
-    const context = usePayContext();
-    const themeContext = useThemeContext();
-    const [isOpen, setIsOpen] = useState(false);
-    const [outOfBounds, setOutOfBounds] = useState(false);
-    const [size, setSize] = useState("small");
-    const [ready, setReady] = useState(false);
-    const [currentRoute] = useState(context.route);
-    const targetRef = useRef(null);
-    const [ref, bounds] = useMeasure({
-        debounce: !ready ? 220 : 0, // fix alignment initial state
-        offsetSize: true,
-        scroll: true,
-    });
-    const checkBounds = () => {
-        let flag = false;
-        const x = xOffset + bounds.left + bounds.width;
-        const y = yOffset + bounds.top + bounds.height * 0.5;
-        if (x > window.innerWidth || x < 0 || y > window.innerHeight || y < 0) {
-            flag = true;
-        }
-        return flag;
-    };
-    const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-    const refreshLayout = () => {
-        if (!targetRef.current ||
-            bounds.top +
-                bounds.bottom +
-                bounds.left +
-                bounds.right +
-                bounds.height +
-                bounds.width ===
-                0)
-            return;
-        const x = xOffset + bounds.left + bounds.width;
-        const y = yOffset + bounds.top + bounds.height * 0.5;
-        if (!ready && x !== 0 && y !== 0)
-            setReady(true);
-        targetRef.current.style.left = `${x}px`;
-        targetRef.current.style.top = `${y}px`;
-        setSize(targetRef.current.offsetHeight <= 40 ? "small" : "large");
-        setOutOfBounds(checkBounds());
-    };
-    useIsomorphicLayoutEffect(refreshLayout, [bounds, open, isOpen]);
-    useEffect(() => {
-        if (!context.open)
-            setIsOpen(false);
-    }, [context.open]);
-    useEffect(() => {
-        setIsOpen(!!open);
-    }, [open]);
-    if (context.options?.hideTooltips)
-        return jsx(Fragment, { children: children });
-    return (jsxs(Fragment, { children: [jsx(motion.div, { ref: ref, style: open === undefined
-                    ? {
-                        cursor: "help",
-                    }
-                    : {}, onHoverStart: () => setIsOpen(true), onHoverEnd: () => setIsOpen(false), onClick: () => setIsOpen(false), children: children }), jsx(Portal, { children: jsx(AnimatePresence, { children: currentRoute === context.route && !outOfBounds && isOpen && (jsx(ResetContainer, { "$useTheme": themeContext.theme, "$useMode": themeContext.mode, "$customTheme": themeContext.customTheme, children: jsx(TooltipWindow, { children: jsxs(TooltipContainer, { role: "tooltip", "$size": size, ref: targetRef, initial: "collapsed", animate: ready ? "open" : {}, exit: "collapsed", variants: {
-                                    collapsed: {
-                                        transformOrigin: "20px 50%",
-                                        opacity: 0,
-                                        scale: 0.9,
-                                        z: 0.01,
-                                        y: "-50%",
-                                        x: 20,
-                                        transition: {
-                                            duration: 0.1,
-                                        },
-                                    },
-                                    open: {
-                                        willChange: "opacity,transform",
-                                        opacity: 1,
-                                        scale: 1,
-                                        z: 0.01,
-                                        y: "-50%",
-                                        x: 20,
-                                        transition: {
-                                            ease: [0.76, 0, 0.24, 1],
-                                            duration: 0.15,
-                                            delay: delay ? delay : 0.5,
-                                        },
-                                    },
-                                }, children: [message, jsx(TooltipTail, { "$size": size })] }) }) })) }) })] }));
+const Tooltip = ({
+  children,
+  message,
+  open,
+  xOffset = 0,
+  yOffset = 0,
+  delay
+}) => {
+  const context = usePayContext();
+  const themeContext = useThemeContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const [outOfBounds, setOutOfBounds] = useState(false);
+  const [size, setSize] = useState("small");
+  const [ready, setReady] = useState(false);
+  const [currentRoute] = useState(context.route);
+  const targetRef = useRef(null);
+  const [ref, bounds] = useMeasure({
+    debounce: !ready ? 220 : 0,
+    // fix alignment initial state
+    offsetSize: true,
+    scroll: true
+  });
+  const checkBounds = () => {
+    let flag = false;
+    const x = xOffset + bounds.left + bounds.width;
+    const y = yOffset + bounds.top + bounds.height * 0.5;
+    if (x > window.innerWidth || x < 0 || y > window.innerHeight || y < 0) {
+      flag = true;
+    }
+    return flag;
+  };
+  const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+  const refreshLayout = () => {
+    if (!targetRef.current || bounds.top + bounds.bottom + bounds.left + bounds.right + bounds.height + bounds.width === 0)
+      return;
+    const x = xOffset + bounds.left + bounds.width;
+    const y = yOffset + bounds.top + bounds.height * 0.5;
+    if (!ready && x !== 0 && y !== 0) setReady(true);
+    targetRef.current.style.left = `${x}px`;
+    targetRef.current.style.top = `${y}px`;
+    setSize(targetRef.current.offsetHeight <= 40 ? "small" : "large");
+    setOutOfBounds(checkBounds());
+  };
+  useIsomorphicLayoutEffect(refreshLayout, [bounds, open, isOpen]);
+  useEffect(() => {
+    if (!context.open) setIsOpen(false);
+  }, [context.open]);
+  useEffect(() => {
+    setIsOpen(!!open);
+  }, [open]);
+  if (context.options?.hideTooltips) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref,
+        style: open === void 0 ? {
+          cursor: "help"
+        } : {},
+        onHoverStart: () => setIsOpen(true),
+        onHoverEnd: () => setIsOpen(false),
+        onClick: () => setIsOpen(false),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: currentRoute === context.route && !outOfBounds && isOpen && /* @__PURE__ */ jsx(
+      ResetContainer,
+      {
+        $useTheme: themeContext.theme,
+        $useMode: themeContext.mode,
+        $customTheme: themeContext.customTheme,
+        children: /* @__PURE__ */ jsx(TooltipWindow, { children: /* @__PURE__ */ jsxs(
+          TooltipContainer,
+          {
+            role: "tooltip",
+            $size: size,
+            ref: targetRef,
+            initial: "collapsed",
+            animate: ready ? "open" : {},
+            exit: "collapsed",
+            variants: {
+              collapsed: {
+                transformOrigin: "20px 50%",
+                opacity: 0,
+                scale: 0.9,
+                z: 0.01,
+                y: "-50%",
+                x: 20,
+                transition: {
+                  duration: 0.1
+                }
+              },
+              open: {
+                willChange: "opacity,transform",
+                opacity: 1,
+                scale: 1,
+                z: 0.01,
+                y: "-50%",
+                x: 20,
+                transition: {
+                  ease: [0.76, 0, 0.24, 1],
+                  duration: 0.15,
+                  delay: delay ? delay : 0.5
+                }
+              }
+            },
+            children: [
+              message,
+              /* @__PURE__ */ jsx(TooltipTail, { $size: size })
+            ]
+          }
+        ) })
+      }
+    ) }) })
+  ] });
 };
 
 export { Tooltip as default };