@daimo/pay 1.19.2 → 1.19.4

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

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+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 /* @__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 };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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/connectkit/src/components/Common/ThemedButton/styles.js

@@ -0,0 +1,152 @@
+import { motion } from 'framer-motion';
+import styled from '../../../styles/styled/index.js';
+
+const Container = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  height: 40px;
+  padding: 0;
+  line-height: 0;
+  letter-spacing: -0.2px;
+  font-size: var(--ck-connectbutton-font-size, 16px);
+  font-weight: var(--ck-connectbutton-font-weight, 500);
+  text-align: center;
+  transition: 100ms ease;
+  transition-property: color, background, box-shadow, border-radius;
+
+  color: var(--color);
+  background: var(--background);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+
+  &.primary {
+    --color: var(--ck-connectbutton-color);
+    --background: var(--ck-connectbutton-background);
+    --box-shadow: var(--ck-connectbutton-box-shadow);
+    --border-radius: var(--ck-connectbutton-border-radius, 12px);
+
+    --hover-color: var(--ck-connectbutton-hover-color, var(--color));
+    --hover-background: var(
+      --ck-connectbutton-hover-background,
+      var(--background)
+    );
+    --hover-box-shadow: var(
+      --ck-connectbutton-hover-box-shadow,
+      var(--box-shadow)
+    );
+    --hover-border-radius: var(
+      --ck-connectbutton-hover-border-radius,
+      var(--border-radius)
+    );
+
+    --active-color: var(--ck-connectbutton-active-color, var(--hover-color));
+    --active-background: var(
+      --ck-connectbutton-active-background,
+      var(--hover-background)
+    );
+    --active-box-shadow: var(
+      --ck-connectbutton-active-box-shadow,
+      var(--hover-box-shadow)
+    );
+    --active-border-radius: var(
+      --ck-connectbutton-active-border-radius,
+      var(--hover-border-radius)
+    );
+  }
+  &.secondary {
+    --color: var(--ck-connectbutton-balance-color);
+    --background: var(--ck-connectbutton-balance-background);
+    --box-shadow: var(--ck-connectbutton-balance-box-shadow);
+    --border-radius: var(
+      --ck-connectbutton-balance-border-radius,
+      var(--ck-connectbutton-border-radius, 12px)
+    );
+
+    --hover-color: var(--ck-connectbutton-balance-hover-color, var(--color));
+    --hover-background: var(
+      --ck-connectbutton-balance-hover-background,
+      var(--background)
+    );
+    --hover-box-shadow: var(
+      --ck-connectbutton-balance-hover-box-shadow,
+      var(--box-shadow)
+    );
+    --hover-border-radius: var(
+      --ck-connectbutton-balance-hover-border-radius,
+      var(--border-radius)
+    );
+
+    --active-color: var(
+      --ck-connectbutton-balance-active-color,
+      var(--hover-color)
+    );
+    --active-background: var(
+      --ck-connectbutton-balance-active-background,
+      var(--hover-background)
+    );
+    --active-box-shadow: var(
+      --ck-connectbutton-balance-active-box-shadow,
+      var(--hover-box-shadow)
+    );
+    --active-border-radius: var(
+      --ck-connectbutton-balance-active-border-radius,
+      var(--hover-border-radius)
+    );
+  }
+`;
+const ThemeContainer = styled.button`
+  all: initial;
+  appearance: none;
+  user-select: none;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border-radius: var(--ck-border-radius);
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.3;
+  }
+
+  display: flex;
+  flex-wrap: nowrap;
+  background: none;
+  cursor: pointer;
+  * {
+    cursor: pointer;
+  }
+  &:hover {
+    ${Container} {
+      color: var(--hover-color, var(--color));
+      background: var(--hover-background, var(--background));
+      box-shadow: var(--hover-box-shadow, var(--box-shadow));
+      border-radius: var(--hover-border-radius, var(--border-radius));
+    }
+  }
+  &:active {
+    ${Container} {
+      color: var(--active-color, var(--hover-color, var(--color)));
+      background: var(
+        --active-background,
+        var(--hover-background, var(--background))
+      );
+      box-shadow: var(
+        --active-box-shadow,
+        var(--hover-box-shadow, var(--box-shadow))
+      );
+      border-radius: var(
+        --active-border-radius,
+        var(--hover-border-radius, var(--border-radius))
+      );
+    }
+  }
+  &:focus-visible {
+    outline: 2px solid var(--ck-family-brand);
+  }
+`;
+
+export { Container, ThemeContainer };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"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/connectkit/src/components/Common/TokenChainLogo/index.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 /* @__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)`
+  position: relative;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+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 && `
+    border: 2px solid var(--ck-body-background, #fff);
+  `}
+`;
+const ChainContainer = styled(motion.div)`
+  position: absolute;
+  width: ${(props) => props.$size}px;
+  height: ${(props) => props.$size}px;
+  min-width: ${(props) => props.$size}px;
+  min-height: ${(props) => props.$size}px;
+  bottom: 0px;
+  right: ${(props) => props.$offset}px;
+  border-radius: 50%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  background: ${(props) => props.$showBorder ? "var(--ck-body-background, #fff)" : "transparent"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+`;
+
+export { TokenChainLogo as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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/connectkit/src/components/Common/Tooltip/index.js

@@ -0,0 +1,129 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import useMeasure from 'react-use-measure';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { TooltipWindow, TooltipContainer, TooltipTail } from './styles.js';
+import { motion, AnimatePresence } from 'framer-motion';
+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 /* @__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 };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/Tooltip/index.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport useMeasure from \"react-use-measure\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport { TooltipContainer, TooltipTail, TooltipWindow } from \"./styles\";\nimport { TooltipProps, TooltipSizeProps } from \"./types\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { ResetContainer } from \"../../../styles\";\nimport { useThemeContext } from \"../../DaimoPayThemeProvider/DaimoPayThemeProvider\";\nimport Portal from \"../Portal\";\n\nconst Tooltip: React.FC<TooltipProps> = ({\n  children,\n  message,\n  open,\n  xOffset = 0,\n  yOffset = 0,\n  delay,\n}) => {\n  const context = usePayContext();\n  const themeContext = useThemeContext();\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [outOfBounds, setOutOfBounds] = useState(false);\n  const [size, setSize] = useState<TooltipSizeProps>(\"small\");\n\n  const [ready, setReady] = useState(false);\n\n  const [currentRoute] = useState(context.route);\n\n  const targetRef = useRef<any>(null);\n  const [ref, bounds] = useMeasure({\n    debounce: !ready ? 220 : 0, // fix alignment initial state\n    offsetSize: true,\n    scroll: true,\n  });\n\n  const checkBounds = () => {\n    let flag = false;\n    const x = xOffset + bounds.left + bounds.width;\n    const y = yOffset + bounds.top + bounds.height * 0.5;\n    if (x > window.innerWidth || x < 0 || y > window.innerHeight || y < 0) {\n      flag = true;\n    }\n    return flag;\n  };\n\n  const useIsomorphicLayoutEffect =\n    typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\n  const refreshLayout = () => {\n    if (\n      !targetRef.current ||\n      bounds.top +\n        bounds.bottom +\n        bounds.left +\n        bounds.right +\n        bounds.height +\n        bounds.width ===\n        0\n    )\n      return;\n    const x = xOffset + bounds.left + bounds.width;\n    const y = yOffset + bounds.top + bounds.height * 0.5;\n    if (!ready && x !== 0 && y !== 0) setReady(true);\n    targetRef.current.style.left = `${x}px`;\n    targetRef.current.style.top = `${y}px`;\n    setSize(targetRef.current.offsetHeight <= 40 ? \"small\" : \"large\");\n    setOutOfBounds(checkBounds());\n  };\n  useIsomorphicLayoutEffect(refreshLayout, [bounds, open, isOpen]);\n\n  useEffect(() => {\n    if (!context.open) setIsOpen(false);\n  }, [context.open]);\n\n  useEffect(() => {\n    setIsOpen(!!open);\n  }, [open]);\n\n  if (context.options?.hideTooltips) return <>{children}</>;\n\n  return (\n    <>\n      <motion.div\n        ref={ref}\n        style={\n          open === undefined\n            ? {\n                cursor: \"help\",\n              }\n            : {}\n        }\n        onHoverStart={() => setIsOpen(true)}\n        onHoverEnd={() => setIsOpen(false)}\n        onClick={() => setIsOpen(false)}\n      >\n        {children}\n      </motion.div>\n      <Portal>\n        <AnimatePresence>\n          {currentRoute === context.route && !outOfBounds && isOpen && (\n            <ResetContainer\n              $useTheme={themeContext.theme}\n              $useMode={themeContext.mode}\n              $customTheme={themeContext.customTheme}\n            >\n              <TooltipWindow>\n                <TooltipContainer\n                  role=\"tooltip\"\n                  $size={size}\n                  ref={targetRef}\n                  initial={\"collapsed\"}\n                  animate={ready ? \"open\" : {}}\n                  exit={\"collapsed\"}\n                  variants={{\n                    collapsed: {\n                      transformOrigin: \"20px 50%\",\n                      opacity: 0,\n                      scale: 0.9,\n                      z: 0.01,\n                      y: \"-50%\",\n                      x: 20,\n                      transition: {\n                        duration: 0.1,\n                      },\n                    },\n                    open: {\n                      willChange: \"opacity,transform\",\n                      opacity: 1,\n                      scale: 1,\n                      z: 0.01,\n                      y: \"-50%\",\n                      x: 20,\n                      transition: {\n                        ease: [0.76, 0, 0.24, 1],\n                        duration: 0.15,\n                        delay: delay ? delay : 0.5,\n                      },\n                    },\n                  }}\n                >\n                  {message}\n                  <TooltipTail $size={size} />\n                </TooltipContainer>\n              </TooltipWindow>\n            </ResetContainer>\n          )}\n        </AnimatePresence>\n      </Portal>\n    </>\n  );\n};\nexport default Tooltip;\n"],"names":[],"mappings":"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"}

package/build/connectkit/src/components/Common/Tooltip/styles.js

@@ -0,0 +1,81 @@
+import { motion } from 'framer-motion';
+import styled from '../../../styles/styled/index.js';
+
+const TooltipWindow = styled(motion.div)`
+  z-index: 2147483647;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+`;
+const TooltipContainer = styled(motion.div)`
+  --shadow: var(--ck-tooltip-shadow);
+  z-index: 2147483647;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  gap: 8px;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(
+    --ck-tooltip-border-radius,
+    ${(props) => props.$size === "small" ? 11 : 14}px
+  );
+  border-radius:;
+  padding: 10px 16px 10px 12px;
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 500;
+  letter-spacing: -0.1px;
+  color: var(--ck-tooltip-color);
+  background: var(--ck-tooltip-background);
+  box-shadow: var(--shadow);
+  > span {
+    z-index: 3;
+    position: relative;
+  }
+  > div {
+    margin: -4px 0; // offset for icon
+  }
+  strong {
+    color: var(--ck-spinner-color);
+  }
+
+  .ck-tt-logo {
+    display: inline-block;
+    vertical-align: text-bottom;
+    height: 1em;
+    width: 1.25em;
+    svg {
+      display: block;
+      height: 100%;
+      transform: translate(0.5px, -1px) scale(1.75);
+    }
+  }
+`;
+const TooltipTail = styled(motion.div)`
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => props.$size === "small" ? 14 : 18}px;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+  &:before {
+    content: "";
+    position: absolute;
+    box-shadow: var(--shadow);
+    width: ${(props) => props.$size === "small" ? 14 : 18}px;
+    height: ${(props) => props.$size === "small" ? 14 : 18}px;
+    transform: translate(75%, 0) rotate(45deg);
+    background: var(--ck-tooltip-background);
+    border-radius: ${(props) => props.$size === "small" ? 2 : 3}px 0 0 0;
+  }
+`;
+
+export { TooltipContainer, TooltipTail, TooltipWindow };
+//# sourceMappingURL=styles.js.map

package/build/connectkit/src/components/Common/Tooltip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Common/Tooltip/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport styled from \"./../../../styles/styled\";\nimport { TooltipSizeProps } from \"./types\";\n\nexport const TooltipWindow = styled(motion.div)`\n  z-index: 2147483647;\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n`;\nexport const TooltipContainer = styled(motion.div)<{ $size: TooltipSizeProps }>`\n  --shadow: var(--ck-tooltip-shadow);\n  z-index: 2147483647;\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  gap: 8px;\n  width: fit-content;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(\n    --ck-tooltip-border-radius,\n    ${(props) => (props.$size === \"small\" ? 11 : 14)}px\n  );\n  border-radius:;\n  padding: 10px 16px 10px 12px;\n  font-size: 14px;\n  line-height: 19px;\n  font-weight: 500;\n  letter-spacing: -0.1px;\n  color: var(--ck-tooltip-color);\n  background: var(--ck-tooltip-background);\n  box-shadow: var(--shadow);\n  > span {\n    z-index: 3;\n    position: relative;\n  }\n  > div {\n    margin: -4px 0; // offset for icon\n  }\n  strong {\n    color: var(--ck-spinner-color);\n  }\n\n  .ck-tt-logo {\n    display: inline-block;\n    vertical-align: text-bottom;\n    height: 1em;\n    width: 1.25em;\n    svg {\n      display: block;\n      height: 100%;\n      transform: translate(0.5px, -1px) scale(1.75);\n    }\n  }\n`;\n\nexport const TooltipTail = styled(motion.div)<{ $size: TooltipSizeProps }>`\n  z-index: 2;\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${(props) => (props.$size === \"small\" ? 14 : 18)}px;\n  right: 100%;\n  top: 0;\n  bottom: 0;\n  overflow: hidden;\n  &:before {\n    content: \"\";\n    position: absolute;\n    box-shadow: var(--shadow);\n    width: ${(props) => (props.$size === \"small\" ? 14 : 18)}px;\n    height: ${(props) => (props.$size === \"small\" ? 14 : 18)}px;\n    transform: translate(75%, 0) rotate(45deg);\n    background: var(--ck-tooltip-background);\n    border-radius: ${(props) => (props.$size === \"small\" ? 2 : 3)}px 0 0 0;\n  }\n`;\n"],"names":[],"mappings":";;;AAIa,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMjC,MAAA,gBAAA,GAAmB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,EAa3C,CAAC,KAAW,KAAA,KAAA,CAAM,KAAU,KAAA,OAAA,GAAU,KAAK,EAAG,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,EAAA;AAmCvC,MAAA,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAA,EAMjC,CAAC,KAAW,KAAA,KAAA,CAAM,KAAU,KAAA,OAAA,GAAU,KAAK,EAAG,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAAA,EAS5C,CAAC,KAAW,KAAA,KAAA,CAAM,KAAU,KAAA,OAAA,GAAU,KAAK,EAAG,CAAA;AAAA,YAAA,EAC7C,CAAC,KAAW,KAAA,KAAA,CAAM,KAAU,KAAA,OAAA,GAAU,KAAK,EAAG,CAAA;AAAA;AAAA;AAAA,mBAAA,EAGvC,CAAC,KAAW,KAAA,KAAA,CAAM,KAAU,KAAA,OAAA,GAAU,IAAI,CAAE,CAAA;AAAA;AAAA;;;;"}

package/build/connectkit/src/components/Common/WalletChainLogo/index.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import styled from '../../../styles/styled/index.js';
+
+const WalletChainLogo = ({
+  walletIcon,
+  walletName,
+  chainLogo
+}) => {
+  const walletIconElement = typeof walletIcon === "string" ? /* @__PURE__ */ jsx("img", { src: walletIcon, alt: walletName }) : walletIcon;
+  return /* @__PURE__ */ jsxs(WalletChainContainer, { children: [
+    walletIconElement,
+    /* @__PURE__ */ jsx(ChainContainer, { children: chainLogo })
+  ] });
+};
+const WalletChainContainer = styled(motion.div)`
+  width: 100%;
+  height: 100%;
+`;
+const ChainContainer = styled(motion.div)`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+  overflow: hidden;
+  bottom: -4px;
+  right: -4px;
+`;
+
+export { WalletChainLogo as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Common/WalletChainLogo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/WalletChainLogo/index.tsx"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport styled from \"../../../styles/styled\";\n\nconst WalletChainLogo = ({\n  walletIcon,\n  walletName,\n  chainLogo,\n}: {\n  walletIcon: React.ReactNode | string;\n  walletName: string;\n  chainLogo: React.ReactNode;\n}) => {\n  const walletIconElement =\n    typeof walletIcon === \"string\" ? (\n      <img src={walletIcon} alt={walletName} />\n    ) : (\n      walletIcon\n    );\n  return (\n    <WalletChainContainer>\n      {walletIconElement}\n      <ChainContainer>{chainLogo}</ChainContainer>\n    </WalletChainContainer>\n  );\n};\n\nconst WalletChainContainer = styled(motion.div)`\n  width: 100%;\n  height: 100%;\n`;\nconst ChainContainer = styled(motion.div)`\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  border-radius: 9999px;\n  overflow: hidden;\n  bottom: -4px;\n  right: -4px;\n`;\n\nexport default WalletChainLogo;\n"],"names":[],"mappings":";;;;AAGA,MAAM,kBAAkB,CAAC;AAAA,EACvB,UAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AACF,CAIM,KAAA;AACJ,EAAM,MAAA,iBAAA,GACJ,OAAO,UAAA,KAAe,QACpB,mBAAA,GAAA,CAAC,SAAI,GAAK,EAAA,UAAA,EAAY,GAAK,EAAA,UAAA,EAAY,CAEvC,GAAA,UAAA,CAAA;AAEJ,EAAA,4BACG,oBACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,iBAAA;AAAA,oBACD,GAAA,CAAC,kBAAgB,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,GAC7B,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,oBAAA,GAAuB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAI9C,MAAM,cAAA,GAAiB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}