@daimo/pay 0.3.21 → 1.0.0

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

@@ -0,0 +1,168 @@
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const ScrollContainer = styled.div `
+  position: relative;
+`;
+const fadeIn = keyframes `
+0%{ opacity:0; }
+100%{ opacity:1; }
+`;
+const MoreIndicator = styled.div `
+  z-index: 9;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0.75rem;
+  display: flex;
+  justify-content: center;
+
+  transition: opacity 300ms ease;
+
+  span {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.3075rem 0.9375rem 0.375rem;
+    border-radius: 6rem;
+    background: var(--ck-tooltip-background);
+    color: var(--ck-tooltip-color);
+    font-weight: 500;
+    font-size: 0.8125rem;
+    letter-spacing: -0.01rem;
+    box-shadow: var(--ck-tooltip-shadow);
+    animation: ${fadeIn} 300ms ease 1000ms both;
+
+    transition: transform 100ms ease;
+
+    &:hover {
+      transform: scale(1.02);
+    }
+    &:active {
+      transform: scale(0.98);
+    }
+    svg {
+      display: block;
+      transform: translateX(-0.1875rem);
+    }
+  }
+
+  &.hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+`;
+const ScrollAreaContainer = styled.div `
+  --bg: ${({ $backgroundColor }) => $backgroundColor || "var(--ck-body-background)"};
+  --fade-height: 1px;
+  position: relative;
+  z-index: 1;
+
+  ${({ $mobile, $height, $mobileDirection }) => $mobile && $mobileDirection === "horizontal"
+    ? css `
+          overflow-x: scroll;
+          margin: 0 -24px;
+          padding: 0 24px;
+
+          &:before,
+          &:after {
+            pointer-events: none;
+            z-index: 10;
+            content: "";
+            display: block;
+            position: sticky;
+            top: 0;
+            bottom: 0;
+            width: var(--fade-height);
+            background: var(
+              --ck-body-divider-secondary,
+              var(--ck-body-divider)
+            );
+            box-shadow: var(--ck-body-divider-box-shadow);
+            transition: opacity 300ms ease;
+          }
+          &:before {
+            left: 0;
+          }
+          &:after {
+            right: 0;
+          }
+
+          &.scroll-start {
+            &:before {
+              opacity: 0;
+            }
+          }
+
+          &.scroll-end {
+            &:after {
+              opacity: 0;
+            }
+          }
+        `
+    : css `
+          max-height: ${$height ? `${$height}px` : "310px"};
+          overflow-y: scroll;
+          padding: 0 10px;
+          margin: calc(var(--fade-height) * -1) -16px 0 -10px;
+
+          &:before,
+          &:after {
+            pointer-events: none;
+            z-index: 10;
+            content: "";
+            display: block;
+            position: sticky;
+            left: 0;
+            right: 0;
+            height: var(--fade-height);
+            background: var(
+              --ck-body-divider-secondary,
+              var(--ck-body-divider)
+            );
+            box-shadow: var(--ck-body-divider-box-shadow);
+            transition: opacity 300ms ease;
+          }
+          &:before {
+            top: 0;
+          }
+          &:after {
+            bottom: 0;
+          }
+
+          &.scroll-start {
+            &:before {
+              opacity: 0;
+            }
+          }
+
+          &.scroll-end {
+            &:after {
+              opacity: 0;
+            }
+          }
+        `}
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0);
+    border-radius: 100px;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background: var(--ck-body-color-muted);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--ck-body-color-muted-hover);
+  }
+`;
+
+export { MoreIndicator, ScrollAreaContainer, ScrollContainer };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,24 @@
+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],
+};
+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" })] }) }));
+
+export { Spinner };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,22 @@
+import { motion } from 'framer-motion';
+import { keyframes } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const Spin = keyframes `
+  0%{ transform: rotate(0deg); }
+  100%{ transform: rotate(360deg); }
+`;
+const SpinnerContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${Spin} 1s linear infinite;
+  svg {
+    display: block;
+    position: relative;
+    animation: ${Spin} 1s ease-in-out infinite;
+  }
+`;
+
+export { SpinnerContainer };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,25 @@
+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 (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 }) }));
+};
+
+export { ThemedButton as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/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/src/components/Common/ThemedButton/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,97 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import useMeasure from 'react-use-measure';
+import { usePayContext } from '../../DaimoPay.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();
+    if (context.options?.hideTooltips)
+        return jsx(Fragment, { children: children });
+    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]);
+    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 })] }) }) })) }) })] }));
+};
+
+export { Tooltip as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/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/src/components/Common/Tooltip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}