@daimo/pay 1.19.5 → 1.19.6

package/build/pay/packages/connectkit/src/components/Common/CopyToClipboard/CopyToClipboardIcon.js

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import { CopyToClipboardIcon as CopyToClipboardIcon$1 } from '../../../assets/icons.js';
+
+const IconContainer = styled(motion.div)`
+  transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  svg {
+    display: block;
+  }
+  svg,
+  svg path,
+  svg rect {
+    transition: inherit;
+  }
+  svg path:first-child {
+    transform-origin: 50% 50%;
+    fill: var(--bg);
+    stroke: var(--color);
+  }
+  svg rect {
+    transform-origin: 53% 63%;
+    fill: var(--bg);
+    stroke: var(--color);
+  }
+  svg path:last-child {
+    opacity: 0;
+    stroke: var(--bg);
+    transform: translate(11.75px, 10px) rotate(90deg) scale(0.6);
+  }
+  ${(props) => props.$clipboard ? css`
+          --color: var(--ck-focus-color) !important;
+          --bg: var(--ck-body-background);
+          svg {
+            transition-delay: 0ms;
+            path:first-child {
+              opacity: 0;
+              transform: rotate(-90deg) scale(0.2);
+            }
+            rect {
+              rx: 10px;
+              fill: var(--color);
+              transform: rotate(-90deg) scale(1.45);
+            }
+            path:last-child {
+              transition-delay: 100ms;
+              opacity: 1;
+              transform: translate(7.75px, 9.5px);
+            }
+          }
+        ` : css`
+          &:hover {
+          }
+          &:hover:active {
+          }
+        `}
+`;
+const CopyToClipboardIcon = ({
+  copied,
+  small,
+  dark
+}) => /* @__PURE__ */ jsx(IconContainer, { $clipboard: copied, children: /* @__PURE__ */ jsx(
+  CopyToClipboardIcon$1,
+  {
+    style: {
+      transform: small ? "scale(1)" : "translateX(3px) scale(1.5)",
+      opacity: small || copied || dark ? 1 : 0.3
+    }
+  }
+) });
+
+export { CopyToClipboardIcon as default };
+//# sourceMappingURL=CopyToClipboardIcon.js.map

package/build/pay/packages/connectkit/src/components/Common/CopyToClipboard/CopyToClipboardIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyToClipboardIcon.js","sources":["../../../../../../../../src/components/Common/CopyToClipboard/CopyToClipboardIcon.tsx"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { css } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nimport { CopyToClipboardIcon as Icon } from \"../../../assets/icons\";\n\nconst IconContainer = styled(motion.div)<{ $clipboard?: boolean }>`\n  transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  svg {\n    display: block;\n  }\n  svg,\n  svg path,\n  svg rect {\n    transition: inherit;\n  }\n  svg path:first-child {\n    transform-origin: 50% 50%;\n    fill: var(--bg);\n    stroke: var(--color);\n  }\n  svg rect {\n    transform-origin: 53% 63%;\n    fill: var(--bg);\n    stroke: var(--color);\n  }\n  svg path:last-child {\n    opacity: 0;\n    stroke: var(--bg);\n    transform: translate(11.75px, 10px) rotate(90deg) scale(0.6);\n  }\n  ${(props) =>\n    props.$clipboard\n      ? css`\n          --color: var(--ck-focus-color) !important;\n          --bg: var(--ck-body-background);\n          svg {\n            transition-delay: 0ms;\n            path:first-child {\n              opacity: 0;\n              transform: rotate(-90deg) scale(0.2);\n            }\n            rect {\n              rx: 10px;\n              fill: var(--color);\n              transform: rotate(-90deg) scale(1.45);\n            }\n            path:last-child {\n              transition-delay: 100ms;\n              opacity: 1;\n              transform: translate(7.75px, 9.5px);\n            }\n          }\n        `\n      : css`\n          &:hover {\n          }\n          &:hover:active {\n          }\n        `}\n`;\n\nconst CopyToClipboardIcon = ({\n  copied,\n  small,\n  dark,\n}: {\n  copied?: boolean;\n  small?: boolean;\n  dark?: boolean;\n}) => (\n  <IconContainer $clipboard={copied}>\n    <Icon\n      style={{\n        transform: small ? \"scale(1)\" : \"translateX(3px) scale(1.5)\",\n        opacity: small || copied || dark ? 1 : 0.3,\n      }}\n    />\n  </IconContainer>\n);\nexport default CopyToClipboardIcon;\n"],"names":["Icon"],"mappings":";;;;;;AAMA,MAAM,aAAA,GAAgB,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,EA6BnC,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,UACF,GAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBA,CAAA,GAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKC,CAAA,CAAA;AAAA,CAAA,CAAA;AAGT,MAAM,sBAAsB,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AACF,CAKE,qBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,UAAA,EAAY,MACzB,EAAA,QAAA,kBAAA,GAAA;AAAA,EAACA,qBAAA;AAAA,EAAA;AAAA,IACC,KAAO,EAAA;AAAA,MACL,SAAA,EAAW,QAAQ,UAAa,GAAA,4BAAA;AAAA,MAChC,OAAS,EAAA,KAAA,IAAS,MAAU,IAAA,IAAA,GAAO,CAAI,GAAA,GAAA;AAAA,KACzC;AAAA,GAAA;AACF,CACF,EAAA;;;;"}

package/build/pay/packages/connectkit/src/components/Common/CustomQRCode/QRCode.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import QRCodeUtil from 'qrcode';
+import { useMemo } from 'react';
+
+const generateMatrix = (value, errorCorrectionLevel) => {
+  const arr = Array.prototype.slice.call(
+    QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data,
+    0
+  );
+  const sqrt = Math.sqrt(arr.length);
+  return arr.reduce(
+    (rows, key, index) => (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows,
+    []
+  );
+};
+function QRCode({
+  ecl = "M",
+  size: sizeProp = 200,
+  uri,
+  clearArea = false,
+  image,
+  imageBackground = "transparent"
+}) {
+  const logoSize = clearArea ? 168 : 0;
+  const size = sizeProp - 10 * 2;
+  const dots = useMemo(() => {
+    const dots2 = [];
+    const matrix = generateMatrix(uri, ecl);
+    const cellSize = size / matrix.length;
+    let qrList = [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 0, y: 1 }
+    ];
+    qrList.forEach(({ x, y }) => {
+      const x1 = (matrix.length - 7) * cellSize * x;
+      const y1 = (matrix.length - 7) * cellSize * y;
+      for (let i = 0; i < 3; i++) {
+        dots2.push(
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              fill: i % 2 !== 0 ? "var(--ck-qr-background, var(--ck-body-background))" : "var(--ck-qr-dot-color)",
+              rx: (i - 2) * -5 + (i === 0 ? 2 : 3),
+              ry: (i - 2) * -5 + (i === 0 ? 2 : 3),
+              width: cellSize * (7 - i * 2),
+              height: cellSize * (7 - i * 2),
+              x: x1 + cellSize * i,
+              y: y1 + cellSize * i
+            },
+            `${i}-${x}-${y}`
+          )
+        );
+      }
+    });
+    if (image) {
+      const x1 = (matrix.length - 7) * cellSize * 1;
+      const y1 = (matrix.length - 7) * cellSize * 1;
+      dots2.push(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              fill: imageBackground,
+              rx: (0 - 2) * -5 + 2,
+              ry: (0 - 2) * -5 + 2,
+              width: cellSize * (7 - 0 * 2),
+              height: cellSize * (7 - 0 * 2),
+              x: x1 + cellSize * 0,
+              y: y1 + cellSize * 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "foreignObject",
+            {
+              width: cellSize * (7 - 0 * 2),
+              height: cellSize * (7 - 0 * 2),
+              x: x1 + cellSize * 0,
+              y: y1 + cellSize * 0,
+              children: /* @__PURE__ */ jsx("div", { style: { borderRadius: (0 - 2) * -5 + 2, overflow: "hidden" }, children: image })
+            }
+          )
+        ] })
+      );
+    }
+    const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
+    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
+    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
+    matrix.forEach((row, i) => {
+      row.forEach((_, j) => {
+        if (matrix[i][j]) {
+          if (!(i < 7 && j < 7 || i > matrix.length - 8 && j < 7 || i < 7 && j > matrix.length - 8)) {
+            if (image || !(i > matrixMiddleStart && i < matrixMiddleEnd && j > matrixMiddleStart && j < matrixMiddleEnd)) {
+              dots2.push(
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: i * cellSize + cellSize / 2,
+                    cy: j * cellSize + cellSize / 2,
+                    fill: "var(--ck-qr-dot-color)",
+                    r: cellSize / 3
+                  },
+                  `circle-${i}-${j}`
+                )
+              );
+            }
+          }
+        }
+      });
+    });
+    return dots2;
+  }, [ecl, size, uri]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      height: size,
+      width: size,
+      viewBox: `0 0 ${size} ${size}`,
+      style: {
+        width: size,
+        height: size
+      },
+      children: [
+        /* @__PURE__ */ jsx("rect", { fill: "transparent", height: size, width: size }),
+        dots
+      ]
+    }
+  );
+}
+
+export { QRCode };
+//# sourceMappingURL=QRCode.js.map

package/build/pay/packages/connectkit/src/components/Common/CustomQRCode/QRCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QRCode.js","sources":["../../../../../../../../src/components/Common/CustomQRCode/QRCode.tsx"],"sourcesContent":["import QRCodeUtil from \"qrcode\";\nimport React, { ReactElement, useMemo } from \"react\";\n\nconst generateMatrix = (\n  value: string,\n  errorCorrectionLevel: QRCodeUtil.QRCodeErrorCorrectionLevel,\n) => {\n  const arr = Array.prototype.slice.call(\n    QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data,\n    0,\n  );\n  const sqrt = Math.sqrt(arr.length);\n  return arr.reduce(\n    (rows, key, index) =>\n      (index % sqrt === 0\n        ? rows.push([key])\n        : rows[rows.length - 1].push(key)) && rows,\n    [],\n  );\n};\n\ntype Props = {\n  ecl?: QRCodeUtil.QRCodeErrorCorrectionLevel;\n  size?: number;\n  uri: string;\n  clearArea?: boolean;\n  image?: React.ReactNode;\n  imageBackground?: string;\n};\n\nexport function QRCode({\n  ecl = \"M\",\n  size: sizeProp = 200,\n  uri,\n  clearArea = false,\n  image,\n  imageBackground = \"transparent\",\n}: Props) {\n  const logoSize = clearArea ? 168 : 0;\n  const size = sizeProp - 10 * 2;\n\n  const dots = useMemo(() => {\n    const dots: ReactElement[] = [];\n    const matrix = generateMatrix(uri, ecl);\n    const cellSize = size / matrix.length;\n    let qrList = [\n      { x: 0, y: 0 },\n      { x: 1, y: 0 },\n      { x: 0, y: 1 },\n    ];\n\n    qrList.forEach(({ x, y }) => {\n      const x1 = (matrix.length - 7) * cellSize * x;\n      const y1 = (matrix.length - 7) * cellSize * y;\n      for (let i = 0; i < 3; i++) {\n        dots.push(\n          <rect\n            key={`${i}-${x}-${y}`}\n            fill={\n              i % 2 !== 0\n                ? \"var(--ck-qr-background, var(--ck-body-background))\"\n                : \"var(--ck-qr-dot-color)\"\n            }\n            rx={(i - 2) * -5 + (i === 0 ? 2 : 3)}\n            ry={(i - 2) * -5 + (i === 0 ? 2 : 3)}\n            width={cellSize * (7 - i * 2)}\n            height={cellSize * (7 - i * 2)}\n            x={x1 + cellSize * i}\n            y={y1 + cellSize * i}\n          />,\n        );\n      }\n    });\n\n    if (image) {\n      const x1 = (matrix.length - 7) * cellSize * 1;\n      const y1 = (matrix.length - 7) * cellSize * 1;\n      dots.push(\n        <>\n          <rect\n            fill={imageBackground}\n            rx={(0 - 2) * -5 + 2}\n            ry={(0 - 2) * -5 + 2}\n            width={cellSize * (7 - 0 * 2)}\n            height={cellSize * (7 - 0 * 2)}\n            x={x1 + cellSize * 0}\n            y={y1 + cellSize * 0}\n          />\n          <foreignObject\n            width={cellSize * (7 - 0 * 2)}\n            height={cellSize * (7 - 0 * 2)}\n            x={x1 + cellSize * 0}\n            y={y1 + cellSize * 0}\n          >\n            <div style={{ borderRadius: (0 - 2) * -5 + 2, overflow: \"hidden\" }}>\n              {image}\n            </div>\n          </foreignObject>\n        </>,\n      );\n    }\n\n    const clearArenaSize = Math.floor((logoSize + 25) / cellSize);\n    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;\n    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;\n\n    matrix.forEach((row: QRCodeUtil.QRCode[], i: number) => {\n      row.forEach((_: any, j: number) => {\n        if (matrix[i][j]) {\n          // Do not render dots under position squares\n          if (\n            !(\n              (i < 7 && j < 7) ||\n              (i > matrix.length - 8 && j < 7) ||\n              (i < 7 && j > matrix.length - 8)\n            )\n          ) {\n            //if (image && i > matrix.length - 9 && j > matrix.length - 9) return;\n            if (\n              image ||\n              !(\n                i > matrixMiddleStart &&\n                i < matrixMiddleEnd &&\n                j > matrixMiddleStart &&\n                j < matrixMiddleEnd\n              )\n            ) {\n              dots.push(\n                <circle\n                  key={`circle-${i}-${j}`}\n                  cx={i * cellSize + cellSize / 2}\n                  cy={j * cellSize + cellSize / 2}\n                  fill=\"var(--ck-qr-dot-color)\"\n                  r={cellSize / 3}\n                />,\n              );\n            }\n          }\n        }\n      });\n    });\n\n    return dots;\n  }, [ecl, size, uri]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <svg\n      height={size}\n      width={size}\n      viewBox={`0 0 ${size} ${size}`}\n      style={{\n        width: size,\n        height: size,\n      }}\n    >\n      <rect fill=\"transparent\" height={size} width={size} />\n      {dots}\n    </svg>\n  );\n}\n"],"names":["dots"],"mappings":"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"}

package/build/pay/packages/connectkit/src/components/Common/CustomQRCode/index.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { QRCodeContainer, QRCodeContent, LogoContainer, LogoIcon, QRPlaceholder } from './styles.js';
+import { AnimatePresence, motion } from 'framer-motion';
+import Tooltip from '../Tooltip/index.js';
+import useWindowSize from '../../../hooks/useWindowSize.js';
+import { QRCode } from './QRCode.js';
+
+function CustomQRCode({
+  value,
+  image,
+  imageBackground,
+  imagePosition = "center",
+  tooltipMessage,
+  contentPadding = 13
+}) {
+  const windowSize = useWindowSize();
+  const isLong = (value?.length ?? 0) > 200;
+  const Logo = windowSize.width > 920 && tooltipMessage ? /* @__PURE__ */ jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image }) : image;
+  const qrEmbeddedImage = isLong ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "75%",
+        height: "75%",
+        margin: "12.5%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: image
+    }
+  ) : image;
+  return /* @__PURE__ */ jsx(QRCodeContainer, { children: /* @__PURE__ */ jsxs(QRCodeContent, { style: { inset: contentPadding }, children: [
+    image && /* @__PURE__ */ jsx(LogoContainer, { children: /* @__PURE__ */ jsx(
+      LogoIcon,
+      {
+        style: {
+          background: imagePosition === "center" ? imageBackground : void 0,
+          width: imagePosition === "center" && isLong ? "21%" : void 0,
+          height: imagePosition === "center" && isLong ? "21%" : void 0
+        },
+        children: Logo
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: value ? /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0, position: "absolute", inset: [0, 0] },
+        transition: {
+          duration: 0.2
+        },
+        children: /* @__PURE__ */ jsx(
+          QRCode,
+          {
+            uri: value,
+            size: isLong ? 860 : 576,
+            ecl: isLong ? "L" : "H",
+            clearArea: !!(imagePosition === "center" && image),
+            image: imagePosition === "bottom right" ? qrEmbeddedImage : void 0,
+            imageBackground
+          }
+        )
+      },
+      value
+    ) : /* @__PURE__ */ jsxs(
+      QRPlaceholder,
+      {
+        initial: { opacity: 0.1 },
+        animate: { opacity: 0.1 },
+        exit: { opacity: 0, position: "absolute", inset: [0, 0] },
+        transition: {
+          duration: 0.2
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("div", {})
+        ]
+      }
+    ) })
+  ] }) });
+}
+CustomQRCode.displayName = "CustomQRCode";
+
+export { CustomQRCode as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Common/CustomQRCode/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Common/CustomQRCode/index.tsx"],"sourcesContent":["import {\n  LogoContainer,\n  LogoIcon,\n  QRCodeContainer,\n  QRCodeContent,\n  QRPlaceholder,\n} from \"./styles\";\nimport { CustomQRCodeProps } from \"./types\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport Tooltip from \"../Tooltip\";\n\nimport useWindowSize from \"../../../hooks/useWindowSize\";\nimport { QRCode } from \"./QRCode\";\n\nfunction CustomQRCode({\n  value,\n  image,\n  imageBackground,\n  imagePosition = \"center\",\n  tooltipMessage,\n  contentPadding = 13,\n}: CustomQRCodeProps) {\n  const windowSize = useWindowSize();\n  const isLong = (value?.length ?? 0) > 200;\n\n  const Logo =\n    windowSize.width > 920 && tooltipMessage ? (\n      <Tooltip xOffset={139} yOffset={5} delay={0.1} message={tooltipMessage}>\n        {image}\n      </Tooltip>\n    ) : (\n      image\n    );\n\n  // For bottom-right embedded image inside the QR SVG, shrink when content is long\n  const qrEmbeddedImage = isLong ? (\n    <div\n      style={{\n        width: \"75%\",\n        height: \"75%\",\n        margin: \"12.5%\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      {image}\n    </div>\n  ) : (\n    image\n  );\n\n  return (\n    <QRCodeContainer>\n      <QRCodeContent style={{ inset: contentPadding }}>\n        {image && (\n          <LogoContainer>\n            <LogoIcon\n              style={{\n                background:\n                  imagePosition === \"center\" ? imageBackground : undefined,\n                width: imagePosition === \"center\" && isLong ? \"21%\" : undefined,\n                height:\n                  imagePosition === \"center\" && isLong ? \"21%\" : undefined,\n              }}\n            >\n              {Logo}\n            </LogoIcon>\n          </LogoContainer>\n        )}\n\n        <AnimatePresence initial={false}>\n          {value ? (\n            <motion.div\n              key={value}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0, position: \"absolute\", inset: [0, 0] }}\n              transition={{\n                duration: 0.2,\n              }}\n            >\n              <QRCode\n                uri={value}\n                size={isLong ? 860 : 576}\n                ecl={isLong ? \"L\" : \"H\"}\n                clearArea={!!(imagePosition === \"center\" && image)}\n                image={\n                  imagePosition === \"bottom right\" ? qrEmbeddedImage : undefined\n                }\n                imageBackground={imageBackground}\n              />\n            </motion.div>\n          ) : (\n            <QRPlaceholder\n              initial={{ opacity: 0.1 }}\n              animate={{ opacity: 0.1 }}\n              exit={{ opacity: 0, position: \"absolute\", inset: [0, 0] }}\n              transition={{\n                duration: 0.2,\n              }}\n            >\n              <span />\n              <span />\n              <span />\n              <div />\n            </QRPlaceholder>\n          )}\n        </AnimatePresence>\n      </QRCodeContent>\n    </QRCodeContainer>\n  );\n}\nCustomQRCode.displayName = \"CustomQRCode\";\n\nexport default CustomQRCode;\n"],"names":[],"mappings":"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"}

package/build/pay/packages/connectkit/src/components/Common/CustomQRCode/styles.js

@@ -0,0 +1,142 @@
+import { motion } from 'framer-motion';
+import { keyframes } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const QRCodeContainer = styled(motion.div)`
+  z-index: 3;
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 100% !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1px 0 2px;
+  border-radius: var(--ck-qr-border-radius, 24px);
+  background: var(--ck-qr-background, transparent);
+  box-shadow: 0 0 0 1px var(--ck-qr-border-color);
+  backface-visibility: hidden;
+  svg {
+    display: block;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+  }
+`;
+const QRCodeContent = styled(motion.div)`
+  position: absolute;
+  inset: 13px;
+  svg {
+    width: 100% !important;
+    height: auto !important;
+  }
+`;
+const PlaceholderKeyframes = keyframes`
+  0%{ background-position: 100% 0; }
+  100%{ background-position: -100% 0; }
+`;
+const QRPlaceholder = styled(motion.div)`
+  --color: var(--ck-qr-dot-color);
+  --bg: var(--ck-qr-background, var(--ck-body-background));
+
+  position: absolute;
+  inset: 0;
+  border-radius: var(--ck-qr-border-radius, 10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  > div {
+    z-index: 4;
+    position: relative;
+    width: 28%;
+    height: 28%;
+    border-radius: 20px;
+    background: var(--bg);
+    box-shadow: 0 0 0 7px var(--bg);
+  }
+  > span {
+    z-index: 4;
+    position: absolute;
+    background: var(--color);
+    border-radius: 12px;
+    width: 13.25%;
+    height: 13.25%;
+    box-shadow: 0 0 0 4px var(--bg);
+    &:before {
+      content: "";
+      position: absolute;
+      inset: 9px;
+      border-radius: 3px;
+      box-shadow: 0 0 0 4px var(--bg);
+    }
+    &:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+    }
+    &:nth-child(3) {
+      bottom: 0;
+      left: 0;
+    }
+  }
+  &:before {
+    z-index: 3;
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: repeat;
+    background-size: 1.888% 1.888%;
+    background-image: radial-gradient(var(--color) 41%, transparent 41%);
+  }
+  &:after {
+    z-index: 5;
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    transform: scale(1.7) rotate(45deg);
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 50%,
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0)
+    );
+    background-size: 200% 100%;
+    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
+  }
+`;
+const LogoContainer = styled(motion.div)`
+  z-index: 6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateY(50%) scale(0.9999); // Shifting fix
+`;
+const LogoIcon = styled(motion.div)`
+  z-index: 6;
+  position: absolute;
+  left: 50%;
+  overflow: hidden;
+
+  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix
+
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  width: 28%;
+  height: 28%;
+`;
+
+export { LogoContainer, LogoIcon, PlaceholderKeyframes, QRCodeContainer, QRCodeContent, QRPlaceholder };
+//# sourceMappingURL=styles.js.map

package/build/pay/packages/connectkit/src/components/Common/CustomQRCode/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../../src/components/Common/CustomQRCode/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { keyframes } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nexport const QRCodeContainer = styled(motion.div)`\n  z-index: 3;\n  position: relative;\n  overflow: hidden;\n  height: 0;\n  padding-bottom: 100% !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 1px 0 2px;\n  border-radius: var(--ck-qr-border-radius, 24px);\n  background: var(--ck-qr-background, transparent);\n  box-shadow: 0 0 0 1px var(--ck-qr-border-color);\n  backface-visibility: hidden;\n  svg {\n    display: block;\n    max-width: 100%;\n    width: 100%;\n    height: auto;\n  }\n`;\nexport const QRCodeContent = styled(motion.div)`\n  position: absolute;\n  inset: 13px;\n  svg {\n    width: 100% !important;\n    height: auto !important;\n  }\n`;\nexport const PlaceholderKeyframes = keyframes`\n  0%{ background-position: 100% 0; }\n  100%{ background-position: -100% 0; }\n`;\nexport const QRPlaceholder = styled(motion.div)`\n  --color: var(--ck-qr-dot-color);\n  --bg: var(--ck-qr-background, var(--ck-body-background));\n\n  position: absolute;\n  inset: 0;\n  border-radius: var(--ck-qr-border-radius, 10px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  > div {\n    z-index: 4;\n    position: relative;\n    width: 28%;\n    height: 28%;\n    border-radius: 20px;\n    background: var(--bg);\n    box-shadow: 0 0 0 7px var(--bg);\n  }\n  > span {\n    z-index: 4;\n    position: absolute;\n    background: var(--color);\n    border-radius: 12px;\n    width: 13.25%;\n    height: 13.25%;\n    box-shadow: 0 0 0 4px var(--bg);\n    &:before {\n      content: \"\";\n      position: absolute;\n      inset: 9px;\n      border-radius: 3px;\n      box-shadow: 0 0 0 4px var(--bg);\n    }\n    &:nth-child(1) {\n      top: 0;\n      left: 0;\n    }\n    &:nth-child(2) {\n      top: 0;\n      right: 0;\n    }\n    &:nth-child(3) {\n      bottom: 0;\n      left: 0;\n    }\n  }\n  &:before {\n    z-index: 3;\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    background: repeat;\n    background-size: 1.888% 1.888%;\n    background-image: radial-gradient(var(--color) 41%, transparent 41%);\n  }\n  &:after {\n    z-index: 5;\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    transform: scale(1.7) rotate(45deg);\n    background-image: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 50%,\n      rgba(255, 255, 255, 1),\n      rgba(255, 255, 255, 0)\n    );\n    background-size: 200% 100%;\n    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;\n  }\n`;\n\nexport const LogoContainer = styled(motion.div)`\n  z-index: 6;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transform: translateY(50%) scale(0.9999); // Shifting fix\n`;\nexport const LogoIcon = styled(motion.div)`\n  z-index: 6;\n  position: absolute;\n  left: 50%;\n  overflow: hidden;\n\n  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix\n\n  svg {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  width: 28%;\n  height: 28%;\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,eAAA,GAAkB,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,EAAA;AAqBnC,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQvC,MAAM,oBAAuB,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAIvB,MAAA,aAAA,GAAgB,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,eAAA,EAwE7B,oBAAoB,CAAA;AAAA;AAAA,EAAA;AAIxB,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AASjC,MAAA,QAAA,GAAW,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/build/pay/packages/connectkit/src/components/Common/FitText/index.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import useFitText from '../../../hooks/useFitText.js';
+
+const FitText = ({ children }) => {
+  const [ready, setReady] = React.useState(false);
+  const { fontSize, ref: textRef } = useFitText({
+    logLevel: "none",
+    maxFontSize: 100,
+    minFontSize: 70,
+    onStart: () => setReady(true),
+    onFinish: () => setReady(true)
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: textRef,
+      style: {
+        visibility: ready ? "visible" : "hidden",
+        fontSize: `${fontSize}%`,
+        maxHeight: "100%",
+        maxWidth: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children
+    }
+  );
+};
+FitText.displayName = "FitText";
+
+export { FitText as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Common/FitText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Common/FitText/index.tsx"],"sourcesContent":["import React from \"react\";\nimport useFitText from \"../../../hooks/useFitText\";\n\nconst FitText = ({ children }: { children: React.ReactNode }) => {\n  const [ready, setReady] = React.useState(false);\n  const { fontSize, ref: textRef } = useFitText({\n    logLevel: \"none\",\n    maxFontSize: 100,\n    minFontSize: 70,\n    onStart: () => setReady(true),\n    onFinish: () => setReady(true),\n  });\n  return (\n    <div\n      ref={textRef}\n      style={{\n        visibility: ready ? \"visible\" : \"hidden\",\n        fontSize: `${fontSize}%`,\n        maxHeight: \"100%\",\n        maxWidth: \"100%\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n      }}\n    >\n      {children}\n    </div>\n  );\n};\nFitText.displayName = \"FitText\";\n\nexport default FitText;\n"],"names":[],"mappings":";;;;AAGA,MAAM,OAAU,GAAA,CAAC,EAAE,QAAA,EAA8C,KAAA;AAC/D,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AAC9C,EAAA,MAAM,EAAE,QAAA,EAAU,GAAK,EAAA,OAAA,KAAY,UAAW,CAAA;AAAA,IAC5C,QAAU,EAAA,MAAA;AAAA,IACV,WAAa,EAAA,GAAA;AAAA,IACb,WAAa,EAAA,EAAA;AAAA,IACb,OAAA,EAAS,MAAM,QAAA,CAAS,IAAI,CAAA;AAAA,IAC5B,QAAA,EAAU,MAAM,QAAA,CAAS,IAAI,CAAA;AAAA,GAC9B,CAAA,CAAA;AACD,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,OAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,UAAA,EAAY,QAAQ,SAAY,GAAA,QAAA;AAAA,QAChC,QAAA,EAAU,GAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,QACrB,SAAW,EAAA,MAAA;AAAA,QACX,QAAU,EAAA,MAAA;AAAA,QACV,OAAS,EAAA,MAAA;AAAA,QACT,cAAgB,EAAA,QAAA;AAAA,QAChB,UAAY,EAAA,QAAA;AAAA,OACd;AAAA,MAEC,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,EAAA;AACA,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}