@daimo/pay 1.6.2 → 1.6.3

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

@@ -1,106 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { motion } from 'framer-motion';
-import { useEffect } from 'react';
-import { keyframes } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-import { usePayContext } from '../../DaimoPay.js';
-import { ScrollArea } from '../ScrollArea/index.js';
-import { OptionsContainer, OptionButton, OptionIcon, OptionLabel, OptionTitle, OptionSubtitle } from './styles.js';
-
-const OptionsList = ({ options, isLoading, requiredSkeletons, }) => {
-    const { triggerResize, log } = usePayContext();
-    const optionsLength = options.length;
-    useEffect(() => {
-        log(`[OPTIONS RESIZE]: ${optionsLength}, triggering resize`);
-        if (optionsLength > 0) {
-            triggerResize();
-        }
-    }, [optionsLength]);
-    if (isLoading) {
-        const skeletonCount = requiredSkeletons
-            ? Math.max(requiredSkeletons - optionsLength, 0)
-            : 0;
-        return (jsxs(OptionsContainer, { "$totalResults": options.length, children: [options.map((option) => (jsx(OptionItem, { option: option }, option.id))), isLoading &&
-                    Array.from({ length: skeletonCount }).map((_, index) => (jsx(SkeletonOptionItem, {}, index)))] }));
-    }
-    return (jsx(ScrollArea, { mobileDirection: "vertical", height: 300, children: jsx(OptionsContainer, { "$totalResults": options.length, children: options.map((option) => (jsx(OptionItem, { option: option }, option.id))) }) }));
-};
-const SkeletonOptionItem = () => {
-    return (jsxs(OptionButton, { type: "button", children: [jsx(SkeletonIcon, {}), jsx(SkeletonLabel, {})] }));
-};
-const pulse = keyframes `
-  0% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.6;
-  }
-`;
-const SkeletonIcon = styled.div `
-  position: absolute;
-  right: 20px;
-  width: 32px;
-  height: 32px;
-  border-radius: 22.5%;
-  background-color: rgba(0, 0, 0, 0.1);
-  animation: ${pulse} 1.5s ease-in-out infinite;
-`;
-const SkeletonLabel = styled.div `
-  width: 100px;
-  height: 16px;
-  border-radius: 8px;
-  background-color: rgba(0, 0, 0, 0.1);
-  animation: ${pulse} 1.5s ease-in-out infinite;
-`;
-const OptionItem = ({ option }) => {
-    const hydratedIcons = option.icons.map((icon) => {
-        if (typeof icon === "string") {
-            return jsx("img", { src: icon, alt: "" });
-        }
-        return icon;
-    });
-    const iconContent = (() => {
-        if (hydratedIcons.length === 1)
-            return jsx(OptionIcon, { children: hydratedIcons[0] });
-        else {
-            return (jsx(IconStackContainer, { children: hydratedIcons.map((icon, index) => (jsx(IconStackItem, { "$marginRight": index !== hydratedIcons.length - 1 ? -12 : 0, "$zIndex": hydratedIcons.length - index, children: icon }, index))) }));
-        }
-    })();
-    return (jsxs(OptionButton, { type: "button", onClick: option.onClick, disabled: option.disabled, children: [iconContent, jsxs(OptionLabel, { children: [jsx(OptionTitle, { children: option.title }), option.subtitle && jsx(OptionSubtitle, { children: option.subtitle })] })] }));
-};
-const IconStackContainer = styled(motion.div) `
-  position: absolute;
-  right: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const IconStackItem = styled(motion.div) `
-  display: block;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: ${(props) => props.$marginRight || 0}px;
-  z-index: ${(props) => props.$zIndex || 2};
-  width: 32px;
-  height: 32px;
-  overflow: hidden;
-  svg,
-  img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-  border-radius: 22.5%;
-`;
-
-export { OptionsList as default };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/OptionsList/index.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { motion } from \"framer-motion\";\nimport { useEffect } from \"react\";\nimport { keyframes } from \"styled-components\";\nimport styled from \"../../../styles/styled\";\nimport { usePayContext } from \"../../DaimoPay\";\nimport { ScrollArea } from \"../ScrollArea\";\nimport { OptionButton, OptionIcon, OptionLabel, OptionSubtitle, OptionTitle, OptionsContainer, } from \"./styles\";\nconst OptionsList = ({ options, isLoading, requiredSkeletons, }) => {\n    const { triggerResize, log } = usePayContext();\n    const optionsLength = options.length;\n    useEffect(() => {\n        log(`[OPTIONS RESIZE]: ${optionsLength}, triggering resize`);\n        if (optionsLength > 0) {\n            triggerResize();\n        }\n    }, [optionsLength]);\n    if (isLoading) {\n        const skeletonCount = requiredSkeletons\n            ? Math.max(requiredSkeletons - optionsLength, 0)\n            : 0;\n        return (_jsxs(OptionsContainer, { \"$totalResults\": options.length, children: [options.map((option) => (_jsx(OptionItem, { option: option }, option.id))), isLoading &&\n                    Array.from({ length: skeletonCount }).map((_, index) => (_jsx(SkeletonOptionItem, {}, index)))] }));\n    }\n    return (_jsx(ScrollArea, { mobileDirection: \"vertical\", height: 300, children: _jsx(OptionsContainer, { \"$totalResults\": options.length, children: options.map((option) => (_jsx(OptionItem, { option: option }, option.id))) }) }));\n};\nexport default OptionsList;\nconst SkeletonOptionItem = () => {\n    return (_jsxs(OptionButton, { type: \"button\", children: [_jsx(SkeletonIcon, {}), _jsx(SkeletonLabel, {})] }));\n};\nconst pulse = keyframes `\n  0% {\n    opacity: 0.6;\n  }\n  50% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0.6;\n  }\n`;\nconst SkeletonIcon = styled.div `\n  position: absolute;\n  right: 20px;\n  width: 32px;\n  height: 32px;\n  border-radius: 22.5%;\n  background-color: rgba(0, 0, 0, 0.1);\n  animation: ${pulse} 1.5s ease-in-out infinite;\n`;\nconst SkeletonLabel = styled.div `\n  width: 100px;\n  height: 16px;\n  border-radius: 8px;\n  background-color: rgba(0, 0, 0, 0.1);\n  animation: ${pulse} 1.5s ease-in-out infinite;\n`;\nconst OptionItem = ({ option }) => {\n    const hydratedIcons = option.icons.map((icon) => {\n        if (typeof icon === \"string\") {\n            return _jsx(\"img\", { src: icon, alt: \"\" });\n        }\n        return icon;\n    });\n    const iconContent = (() => {\n        if (hydratedIcons.length === 1)\n            return _jsx(OptionIcon, { children: hydratedIcons[0] });\n        else {\n            return (_jsx(IconStackContainer, { children: hydratedIcons.map((icon, index) => (_jsx(IconStackItem, { \"$marginRight\": index !== hydratedIcons.length - 1 ? -12 : 0, \"$zIndex\": hydratedIcons.length - index, children: icon }, index))) }));\n        }\n    })();\n    return (_jsxs(OptionButton, { type: \"button\", onClick: option.onClick, disabled: option.disabled, children: [iconContent, _jsxs(OptionLabel, { children: [_jsx(OptionTitle, { children: option.title }), option.subtitle && _jsx(OptionSubtitle, { children: option.subtitle })] })] }));\n};\nconst IconStackContainer = styled(motion.div) `\n  position: absolute;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\nconst IconStackItem = styled(motion.div) `\n  display: block;\n  overflow: hidden;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: ${(props) => props.$marginRight || 0}px;\n  z-index: ${(props) => props.$zIndex || 2};\n  width: 32px;\n  height: 32px;\n  overflow: hidden;\n  svg,\n  img {\n    display: block;\n    position: relative;\n    pointer-events: none;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n  border-radius: 22.5%;\n`;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAQK,MAAC,WAAW,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,GAAG,KAAK;AACpE,IAAI,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,aAAa,EAAE,CAAC;AACnD,IAAI,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC;AACzC,IAAI,SAAS,CAAC,MAAM;AACpB,QAAQ,GAAG,CAAC,CAAC,kBAAkB,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC;AACrE,QAAQ,IAAI,aAAa,GAAG,CAAC,EAAE;AAC/B,YAAY,aAAa,EAAE,CAAC;AAC5B,SAAS;AACT,KAAK,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AACxB,IAAI,IAAI,SAAS,EAAE;AACnB,QAAQ,MAAM,aAAa,GAAG,iBAAiB;AAC/C,cAAc,IAAI,CAAC,GAAG,CAAC,iBAAiB,GAAG,aAAa,EAAE,CAAC,CAAC;AAC5D,cAAc,CAAC,CAAC;AAChB,QAAQ,QAAQA,IAAK,CAAC,gBAAgB,EAAE,EAAE,eAAe,EAAE,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAAMC,GAAI,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS;AAC3K,oBAAoB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MAAMA,GAAI,CAAC,kBAAkB,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE;AACxH,KAAK;AACL,IAAI,QAAQA,GAAI,CAAC,UAAU,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAEA,GAAI,CAAC,gBAAgB,EAAE,EAAE,eAAe,EAAE,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAAMA,GAAI,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACzO,EAAE;AAEF,MAAM,kBAAkB,GAAG,MAAM;AACjC,IAAI,QAAQD,IAAK,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAACC,GAAI,CAAC,YAAY,EAAE,EAAE,CAAC,EAAEA,GAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAClH,CAAC,CAAC;AACF,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;AACF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AACjC;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,EAAE,KAAK,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AAClC;AACA;AACA;AACA;AACA,aAAa,EAAE,KAAK,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK;AACnC,IAAI,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK;AACrD,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AACtC,YAAY,OAAOA,GAAI,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC;AACvD,SAAS;AACT,QAAQ,OAAO,IAAI,CAAC;AACpB,KAAK,CAAC,CAAC;AACP,IAAI,MAAM,WAAW,GAAG,CAAC,MAAM;AAC/B,QAAQ,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC;AACtC,YAAY,OAAOA,GAAI,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACpE,aAAa;AACb,YAAY,QAAQA,GAAI,CAAC,kBAAkB,EAAE,EAAE,QAAQ,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAAMA,GAAI,CAAC,aAAa,EAAE,EAAE,cAAc,EAAE,KAAK,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,CAAC,MAAM,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE;AACzP,SAAS;AACT,KAAK,GAAG,CAAC;AACT,IAAI,QAAQD,IAAK,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,CAAC,WAAW,EAAEA,IAAK,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,CAACC,GAAI,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,QAAQ,IAAIA,GAAI,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAC7R,CAAC,CAAC;AACF,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AAC/C;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;AACF,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,IAAI,CAAC,CAAC;AACrD,WAAW,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;;"}

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

@@ -1,165 +0,0 @@
-import { css } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-import { motion } from 'framer-motion';
-
-const OptionButton = styled(motion.button) `
-  display: block;
-  text-decoration: none;
-  cursor: ${(props) => (props.disabled ? "default" : "pointer")};
-  user-select: none;
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-  height: 64px;
-  font-size: 17px;
-  font-weight: var(--ck-primary-button-font-weight, 500);
-  line-height: 20px;
-  text-align: var(--ck-body-button-text-align, left);
-  transition: 180ms ease;
-  transition-property: background, color, box-shadow, transform, opacity;
-  will-change: transform, box-shadow, background-color, color, opacity;
-
-  --fallback-color: var(--ck-primary-button-color);
-  --fallback-background: var(--ck-primary-button-background);
-  --fallback-box-shadow: var(--ck-primary-button-box-shadow);
-  --fallback-border-radius: var(--ck-primary-button-border-radius);
-
-  --color: var(--ck-primary-button-color, var(--fallback-color));
-  --background: var(--ck-primary-button-background, var(--fallback-background));
-  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));
-  --border-radius: var(
-    --ck-primary-button-border-radius,
-    var(--fallback-border-radius)
-  );
-
-  --hover-color: var(--ck-primary-button-hover-color, var(--color));
-  --hover-background: var(
-    --ck-primary-button-hover-background,
-    var(--background)
-  );
-  --hover-box-shadow: var(
-    --ck-primary-button-hover-box-shadow,
-    var(--box-shadow)
-  );
-  --hover-border-radius: var(
-    --ck-primary-button-hover-border-radius,
-    var(--border-radius)
-  );
-
-  --active-color: var(--ck-primary-button-active-color, var(--hover-color));
-  --active-background: var(
-    --ck-primary-button-active-background,
-    var(--hover-background)
-  );
-  --active-box-shadow: var(
-    --ck-primary-button-active-box-shadow,
-    var(--hover-box-shadow)
-  );
-  --active-border-radius: var(
-    --ck-primary-button-active-border-radius,
-    var(--hover-border-radius)
-  );
-
-  color: var(--color);
-  background: var(--background);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
-
-  &:disabled {
-    transition: 180ms ease;
-    opacity: 0.4;
-  }
-
-  --bg: var(--background);
-  &:not(:disabled) {
-    &:hover {
-      color: var(--hover-color);
-      background: var(--hover-background);
-      box-shadow: var(--hover-box-shadow);
-      border-radius: var(--hover-border-radius);
-      --bg: var(--hover-background, var(--background));
-    }
-    &:focus-visible {
-      transition-duration: 100ms;
-      color: var(--hover-color);
-      background: var(--hover-background);
-      box-shadow: var(--hover-box-shadow);
-      border-radius: var(--hover-border-radius);
-      --bg: var(--hover-background, var(--background));
-    }
-    &:active {
-      color: var(--active-color);
-      background: var(--active-background);
-      box-shadow: var(--active-box-shadow);
-      border-radius: var(--active-border-radius);
-      --bg: var(--active-background, var(--background));
-    }
-  }
-`;
-const OptionLabel = styled(motion.span) `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2px;
-  width: 100%;
-  overflow: hidden;
-  padding: 2px 0;
-  padding-right: 38px;
-`;
-const OptionTitle = styled(motion.span) `
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-`;
-const OptionSubtitle = styled(motion.span) `
-  font-size: 14px;
-  opacity: 0.6;
-  font-weight: 400;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-`;
-const OptionIcon = styled(motion.div) `
-  position: absolute;
-  right: 20px;
-  width: 32px;
-  height: 32px;
-  overflow: visible;
-  svg,
-  img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-
-  &[data-shape="squircle"] {
-    border-radius: 22.5%;
-  }
-  &[data-shape="circle"] {
-    border-radius: 100%;
-  }
-  &[data-shape="square"] {
-    border-radius: 0;
-  }
-`;
-const OptionsContainer = styled.div `
-  transition: opacity 300ms ease;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  ${(props) => props.$disabled &&
-    css `
-      pointer-events: none;
-      opacity: 0.4;
-    `}
-`;
-
-export { OptionButton, OptionIcon, OptionLabel, OptionSubtitle, OptionTitle, OptionsContainer };
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/OptionsList/styles.ts"],"sourcesContent":["import { css } from \"styled-components\";\nimport styled from \"../../../styles/styled\";\nimport { motion } from \"framer-motion\";\nexport const OptionButton = styled(motion.button) `\n  display: block;\n  text-decoration: none;\n  cursor: ${(props) => (props.disabled ? \"default\" : \"pointer\")};\n  user-select: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 20px;\n  height: 64px;\n  font-size: 17px;\n  font-weight: var(--ck-primary-button-font-weight, 500);\n  line-height: 20px;\n  text-align: var(--ck-body-button-text-align, left);\n  transition: 180ms ease;\n  transition-property: background, color, box-shadow, transform, opacity;\n  will-change: transform, box-shadow, background-color, color, opacity;\n\n  --fallback-color: var(--ck-primary-button-color);\n  --fallback-background: var(--ck-primary-button-background);\n  --fallback-box-shadow: var(--ck-primary-button-box-shadow);\n  --fallback-border-radius: var(--ck-primary-button-border-radius);\n\n  --color: var(--ck-primary-button-color, var(--fallback-color));\n  --background: var(--ck-primary-button-background, var(--fallback-background));\n  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));\n  --border-radius: var(\n    --ck-primary-button-border-radius,\n    var(--fallback-border-radius)\n  );\n\n  --hover-color: var(--ck-primary-button-hover-color, var(--color));\n  --hover-background: var(\n    --ck-primary-button-hover-background,\n    var(--background)\n  );\n  --hover-box-shadow: var(\n    --ck-primary-button-hover-box-shadow,\n    var(--box-shadow)\n  );\n  --hover-border-radius: var(\n    --ck-primary-button-hover-border-radius,\n    var(--border-radius)\n  );\n\n  --active-color: var(--ck-primary-button-active-color, var(--hover-color));\n  --active-background: var(\n    --ck-primary-button-active-background,\n    var(--hover-background)\n  );\n  --active-box-shadow: var(\n    --ck-primary-button-active-box-shadow,\n    var(--hover-box-shadow)\n  );\n  --active-border-radius: var(\n    --ck-primary-button-active-border-radius,\n    var(--hover-border-radius)\n  );\n\n  color: var(--color);\n  background: var(--background);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n\n  &:disabled {\n    transition: 180ms ease;\n    opacity: 0.4;\n  }\n\n  --bg: var(--background);\n  &:not(:disabled) {\n    &:hover {\n      color: var(--hover-color);\n      background: var(--hover-background);\n      box-shadow: var(--hover-box-shadow);\n      border-radius: var(--hover-border-radius);\n      --bg: var(--hover-background, var(--background));\n    }\n    &:focus-visible {\n      transition-duration: 100ms;\n      color: var(--hover-color);\n      background: var(--hover-background);\n      box-shadow: var(--hover-box-shadow);\n      border-radius: var(--hover-border-radius);\n      --bg: var(--hover-background, var(--background));\n    }\n    &:active {\n      color: var(--active-color);\n      background: var(--active-background);\n      box-shadow: var(--active-box-shadow);\n      border-radius: var(--active-border-radius);\n      --bg: var(--active-background, var(--background));\n    }\n  }\n`;\nexport const OptionLabel = styled(motion.span) `\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  width: 100%;\n  overflow: hidden;\n  padding: 2px 0;\n  padding-right: 38px;\n`;\nexport const OptionTitle = styled(motion.span) `\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n`;\nexport const OptionSubtitle = styled(motion.span) `\n  font-size: 14px;\n  opacity: 0.6;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n`;\nexport const OptionIcon = styled(motion.div) `\n  position: absolute;\n  right: 20px;\n  width: 32px;\n  height: 32px;\n  overflow: visible;\n  svg,\n  img {\n    display: block;\n    position: relative;\n    pointer-events: none;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  &[data-shape=\"squircle\"] {\n    border-radius: 22.5%;\n  }\n  &[data-shape=\"circle\"] {\n    border-radius: 100%;\n  }\n  &[data-shape=\"square\"] {\n    border-radius: 0;\n  }\n`;\nexport const OptionsContainer = styled.div `\n  transition: opacity 300ms ease;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n\n  ${(props) => props.$disabled &&\n    css `\n      pointer-events: none;\n      opacity: 0.4;\n    `}\n`;\n"],"names":[],"mappings":";;;;AAGY,MAAC,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AACnD;AACA;AACA,UAAU,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACU,MAAC,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACU,MAAC,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAChD;AACA;AACA;AACA;AACA,EAAE;AACU,MAAC,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACU,MAAC,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACU,MAAC,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AAC5C;AACA;AACA;AACA;AACA;AACA,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS;AAC9B,IAAI,GAAG,CAAC,CAAC;AACT;AACA;AACA,IAAI,CAAC,CAAC;AACN;;;;"}

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

@@ -1,128 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { motion } from 'framer-motion';
-import { Ethereum, Optimism, Arbitrum, Base, Polygon, Solana } from '../../../assets/chains.js';
-import { USDC } from '../../../assets/coins.js';
-import defaultTheme from '../../../constants/defaultTheme.js';
-import styled from '../../../styles/styled/index.js';
-import { formatUsd } from '../../../utils/format.js';
-import { usePayContext, ROUTES } from '../../DaimoPay.js';
-
-/** Shows payment amount. */
-const OrderHeader = ({ minified = false }) => {
-    const { paymentState, route } = usePayContext();
-    const orderUsd = paymentState.daimoPayOrder?.destFinalCallTokenAmount.usd;
-    const titleAmountContent = (() => {
-        if (paymentState.isDepositFlow) {
-            return route === ROUTES.SELECT_TOKEN ||
-                route === ROUTES.SOLANA_SELECT_TOKEN ? (
-            // TODO: make this match `ModalH1` font size for mobile
-            jsx("span", { style: { fontSize: "19px", lineHeight: "22px" }, children: "Your balances" })) : null;
-        }
-        else {
-            return orderUsd != null ? (jsx("span", { children: formatUsd(orderUsd, "nearest") })) : null;
-        }
-    })();
-    if (minified) {
-        if (titleAmountContent != null) {
-            return (jsxs(MinifiedContainer, { children: [jsx(MinifiedTitleAmount, { children: titleAmountContent }), jsx(CoinLogos, { "$size": 32 })] }));
-        }
-        else {
-            return (jsxs(MinifiedContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: "1000+ tokens accepted" })] }));
-        }
-    }
-    else {
-        return (jsxs(Fragment, { children: [titleAmountContent && jsx(TitleAmount, { children: titleAmountContent }), jsxs(AnyChainAnyCoinContainer, { children: [jsx(CoinLogos, {}), jsx(Subtitle, { children: "1000+ tokens accepted" })] })] }));
-    }
-};
-function CoinLogos({ $size = 24 }) {
-    const logos = [
-        jsx(Ethereum, {}),
-        jsx(USDC, {}),
-        jsx(Optimism, {}),
-        jsx(Arbitrum, {}),
-        jsx(Base, {}),
-        jsx(Polygon, {}),
-        jsx(Solana, {}),
-    ];
-    const logoBlock = (element, index) => (jsx(LogoContainer, { "$marginLeft": index !== 0 ? -($size / 3) : 0, "$zIndex": logos.length - index, "$size": $size, transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: element }, index));
-    return (jsx(Logos, { children: logos.map((element, index) => logoBlock(element, index)) }));
-}
-const TitleAmount = styled(motion.h1) `
-  margin-bottom: 24px;
-  padding: 0;
-  line-height: 66px;
-  font-size: 64px;
-  font-weight: var(--ck-modal-h1-font-weight, 600);
-  color: ${(props) => {
-    if (props.$error)
-        return "var(--ck-body-color-danger)";
-    if (props.$valid)
-        return "var(--ck-body-color-valid)";
-    return "var(--ck-body-color)";
-}};
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    font-size: 64px;
-  }
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-`;
-const Subtitle = styled(motion.div) `
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 21px;
-  color: var(--ck-body-color-muted);
-`;
-const MinifiedTitleAmount = styled(motion.div) `
-  font-size: 32px;
-  font-weight: var(--ck-modal-h1-font-weight, 600);
-  line-height: 36px;
-  color: var(--ck-body-color);
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  gap: 8px;
-`;
-const MinifiedContainer = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: 24px;
-`;
-const AnyChainAnyCoinContainer = styled(motion.div) `
-  display: flex;
-  vertical-align: middle;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 8px;
-  margin-bottom: 24px;
-`;
-const LogoContainer = styled(motion.div) `
-  display: block;
-  overflow: hidden;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: ${(props) => props.$marginLeft || 0}px;
-  z-index: ${(props) => props.$zIndex || 2};
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  border-radius: 9999px;
-  svg {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-`;
-const Logos = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export { OrderHeader };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/OrderHeader/index.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { motion } from \"framer-motion\";\nimport { Arbitrum, Base, Ethereum, Optimism, Polygon, Solana, } from \"../../../assets/chains\";\nimport { USDC } from \"../../../assets/coins\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport styled from \"../../../styles/styled\";\nimport { formatUsd } from \"../../../utils/format\";\nimport { ROUTES, usePayContext } from \"../../DaimoPay\";\n/** Shows payment amount. */\nexport const OrderHeader = ({ minified = false }) => {\n    const { paymentState, route } = usePayContext();\n    const orderUsd = paymentState.daimoPayOrder?.destFinalCallTokenAmount.usd;\n    const titleAmountContent = (() => {\n        if (paymentState.isDepositFlow) {\n            return route === ROUTES.SELECT_TOKEN ||\n                route === ROUTES.SOLANA_SELECT_TOKEN ? (\n            // TODO: make this match `ModalH1` font size for mobile\n            _jsx(\"span\", { style: { fontSize: \"19px\", lineHeight: \"22px\" }, children: \"Your balances\" })) : null;\n        }\n        else {\n            return orderUsd != null ? (_jsx(\"span\", { children: formatUsd(orderUsd, \"nearest\") })) : null;\n        }\n    })();\n    if (minified) {\n        if (titleAmountContent != null) {\n            return (_jsxs(MinifiedContainer, { children: [_jsx(MinifiedTitleAmount, { children: titleAmountContent }), _jsx(CoinLogos, { \"$size\": 32 })] }));\n        }\n        else {\n            return (_jsxs(MinifiedContainer, { children: [_jsx(CoinLogos, {}), _jsx(Subtitle, { children: \"1000+ tokens accepted\" })] }));\n        }\n    }\n    else {\n        return (_jsxs(_Fragment, { children: [titleAmountContent && _jsx(TitleAmount, { children: titleAmountContent }), _jsxs(AnyChainAnyCoinContainer, { children: [_jsx(CoinLogos, {}), _jsx(Subtitle, { children: \"1000+ tokens accepted\" })] })] }));\n    }\n};\nfunction CoinLogos({ $size = 24 }) {\n    const logos = [\n        _jsx(Ethereum, {}),\n        _jsx(USDC, {}),\n        _jsx(Optimism, {}),\n        _jsx(Arbitrum, {}),\n        _jsx(Base, {}),\n        _jsx(Polygon, {}),\n        _jsx(Solana, {}),\n    ];\n    const logoBlock = (element, index) => (_jsx(LogoContainer, { \"$marginLeft\": index !== 0 ? -($size / 3) : 0, \"$zIndex\": logos.length - index, \"$size\": $size, transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: element }, index));\n    return (_jsx(Logos, { children: logos.map((element, index) => logoBlock(element, index)) }));\n}\nconst TitleAmount = styled(motion.h1) `\n  margin-bottom: 24px;\n  padding: 0;\n  line-height: 66px;\n  font-size: 64px;\n  font-weight: var(--ck-modal-h1-font-weight, 600);\n  color: ${(props) => {\n    if (props.$error)\n        return \"var(--ck-body-color-danger)\";\n    if (props.$valid)\n        return \"var(--ck-body-color-valid)\";\n    return \"var(--ck-body-color)\";\n}};\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    font-size: 64px;\n  }\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n`;\nconst Subtitle = styled(motion.div) `\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 21px;\n  color: var(--ck-body-color-muted);\n`;\nconst MinifiedTitleAmount = styled(motion.div) `\n  font-size: 32px;\n  font-weight: var(--ck-modal-h1-font-weight, 600);\n  line-height: 36px;\n  color: var(--ck-body-color);\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  gap: 8px;\n`;\nconst MinifiedContainer = styled(motion.div) `\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  margin-bottom: 24px;\n`;\nconst AnyChainAnyCoinContainer = styled(motion.div) `\n  display: flex;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 8px;\n  margin-bottom: 24px;\n`;\nconst LogoContainer = styled(motion.div) `\n  display: block;\n  overflow: hidden;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ${(props) => props.$marginLeft || 0}px;\n  z-index: ${(props) => props.$zIndex || 2};\n  width: ${(props) => props.$size}px;\n  height: ${(props) => props.$size}px;\n  border-radius: 9999px;\n  svg {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n`;\nconst Logos = styled(motion.div) `\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

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

@@ -1,48 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import defaultTheme from '../../../constants/defaultTheme.js';
-import styled from '../../../styles/styled/index.js';
-import { ModalBody } from '../Modal/styles.js';
-
-const PaymentBreakdown = ({ paymentOption }) => {
-    const subtotalUsd = paymentOption.required.usd;
-    const feesUsd = paymentOption.fees.usd;
-    const totalUsd = subtotalUsd + feesUsd;
-    return (jsxs(FeesContainer, { children: [feesUsd > 0 && (jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Subtotal" }), jsxs(ModalBody, { children: ["$", subtotalUsd.toFixed(2)] })] })), jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Fees" }), feesUsd === 0 ? (jsx(Badge, { children: "Free" })) : (jsxs(ModalBody, { children: ["$", feesUsd.toFixed(2)] }))] }), jsxs(FeeRow, { style: { marginTop: 8 }, children: [jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }), jsxs(ModalBody, { style: { fontWeight: 600 }, children: ["$", totalUsd.toFixed(2)] })] })] }));
-};
-const FeesContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  gap: 4px;
-  margin: 16px 0;
-
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    & ${ModalBody} {
-      margin: 0 !important;
-      max-width: 100% !important;
-      text-align: left !important;
-    }
-  }
-`;
-const FeeRow = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 50%;
-`;
-const Badge = styled.span `
-  display: inline-block;
-  padding: 3px 8px;
-  border-radius: var(--ck-primary-button-border-radius);
-  font-size: 14px;
-  font-weight: 400;
-  background: var(
-    --ck-secondary-button-background,
-    var(--ck-body-background-secondary)
-  );
-  color: var(--ck-body-color-muted);
-`;
-
-export { PaymentBreakdown as default };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/PaymentBreakdown/index.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport styled from \"../../../styles/styled\";\nimport { ModalBody } from \"../../Common/Modal/styles\";\nconst PaymentBreakdown = ({ paymentOption }) => {\n    const subtotalUsd = paymentOption.required.usd;\n    const feesUsd = paymentOption.fees.usd;\n    const totalUsd = subtotalUsd + feesUsd;\n    return (_jsxs(FeesContainer, { children: [feesUsd > 0 && (_jsxs(FeeRow, { children: [_jsx(ModalBody, { children: \"Subtotal\" }), _jsxs(ModalBody, { children: [\"$\", subtotalUsd.toFixed(2)] })] })), _jsxs(FeeRow, { children: [_jsx(ModalBody, { children: \"Fees\" }), feesUsd === 0 ? (_jsx(Badge, { children: \"Free\" })) : (_jsxs(ModalBody, { children: [\"$\", feesUsd.toFixed(2)] }))] }), _jsxs(FeeRow, { style: { marginTop: 8 }, children: [_jsx(ModalBody, { style: { fontWeight: 600 }, children: \"Total\" }), _jsxs(ModalBody, { style: { fontWeight: 600 }, children: [\"$\", totalUsd.toFixed(2)] })] })] }));\n};\nconst FeesContainer = styled.div `\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  gap: 4px;\n  margin: 16px 0;\n\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    & ${ModalBody} {\n      margin: 0 !important;\n      max-width: 100% !important;\n      text-align: left !important;\n    }\n  }\n`;\nconst FeeRow = styled.div `\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 50%;\n`;\nconst Badge = styled.span `\n  display: inline-block;\n  padding: 3px 8px;\n  border-radius: var(--ck-primary-button-border-radius);\n  font-size: 14px;\n  font-weight: 400;\n  background: var(\n    --ck-secondary-button-background,\n    var(--ck-body-background-secondary)\n  );\n  color: var(--ck-body-color-muted);\n`;\nexport default PaymentBreakdown;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAIK,MAAC,gBAAgB,GAAG,CAAC,EAAE,aAAa,EAAE,KAAK;AAChD,IAAI,MAAM,WAAW,GAAG,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC;AACnD,IAAI,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;AAC3C,IAAI,MAAM,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;AAC3C,IAAI,QAAQA,IAAK,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,CAAC,OAAO,GAAG,CAAC,KAAKA,IAAK,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAACC,GAAI,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAAED,IAAK,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEA,IAAK,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,CAACC,GAAI,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,KAAK,CAAC,IAAIA,GAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,KAAKD,IAAK,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAEA,IAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,CAACC,GAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAED,IAAK,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AACzlB,EAAE;AACF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC,EAAE,YAAY,CAAC,WAAW,CAAC;AAChE,MAAM,EAAE,SAAS,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;AACF,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AAC3B;AACA;AACA;AACA;AACA,CAAC,CAAC;AACF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;;"}

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

@@ -1,31 +0,0 @@
-import { useRef, useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import packageJson from '../../../../package.json.js';
-
-const Portal = (props) => {
-    props = {
-        selector: "__DAIMOPAY__",
-        ...props,
-    };
-    const { selector, children } = props;
-    const ref = useRef(null);
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => {
-        const selectorPrefixed = "#" + selector.replace(/^#/, "");
-        ref.current = document.querySelector(selectorPrefixed);
-        if (!ref.current) {
-            const div = document.createElement("div");
-            div.setAttribute("id", selector);
-            div.setAttribute("data-daimopay", `${packageJson.version}`);
-            document.body.appendChild(div);
-            ref.current = div;
-        }
-        setMounted(true);
-    }, [selector]);
-    if (!ref.current)
-        return null;
-    return mounted ? createPortal(children, ref.current) : null;
-};
-
-export { Portal as default };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/Portal/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport packageJson from \"../../../../package.json\";\nconst Portal = (props) => {\n    props = {\n        selector: \"__DAIMOPAY__\",\n        ...props,\n    };\n    const { selector, children } = props;\n    const ref = useRef(null);\n    const [mounted, setMounted] = useState(false);\n    useEffect(() => {\n        const selectorPrefixed = \"#\" + selector.replace(/^#/, \"\");\n        ref.current = document.querySelector(selectorPrefixed);\n        if (!ref.current) {\n            const div = document.createElement(\"div\");\n            div.setAttribute(\"id\", selector);\n            div.setAttribute(\"data-daimopay\", `${packageJson.version}`);\n            document.body.appendChild(div);\n            ref.current = div;\n        }\n        setMounted(true);\n    }, [selector]);\n    if (!ref.current)\n        return null;\n    return mounted ? createPortal(children, ref.current) : null;\n};\nexport default Portal;\n"],"names":[],"mappings":";;;;AAGK,MAAC,MAAM,GAAG,CAAC,KAAK,KAAK;AAC1B,IAAI,KAAK,GAAG;AACZ,QAAQ,QAAQ,EAAE,cAAc;AAChC,QAAQ,GAAG,KAAK;AAChB,KAAK,CAAC;AACN,IAAI,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AACzC,IAAI,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAC7B,IAAI,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAClD,IAAI,SAAS,CAAC,MAAM;AACpB,QAAQ,MAAM,gBAAgB,GAAG,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAClE,QAAQ,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAC/D,QAAQ,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;AAC1B,YAAY,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACtD,YAAY,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC7C,YAAY,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AACxE,YAAY,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC3C,YAAY,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC;AAC9B,SAAS;AACT,QAAQ,UAAU,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AACnB,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO;AACpB,QAAQ,OAAO,IAAI,CAAC;AACpB,IAAI,OAAO,OAAO,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;AAChE;;;;"}

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

@@ -1,79 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { motion } from 'framer-motion';
-import { useState, useEffect } from 'react';
-import { keyframes } from 'styled-components';
-import CrepeIcon from '../../../assets/crepe.js';
-import styled from '../../../styles/styled/index.js';
-import { daimoPayVersion } from '../../../utils/exports.js';
-
-const PoweredByFooter = ({ supportUrl } = {}) => {
-    const [supportVisible, setSupportVisible] = useState(false);
-    useEffect(() => {
-        if (supportUrl == null)
-            return;
-        // Show the support link after delay
-        const timer = setTimeout(() => {
-            setSupportVisible(true);
-        }, 2500);
-        return () => clearTimeout(timer);
-    }, []);
-    return (jsx(Container, { children: jsxs(TextButton, { onClick: () => {
-                window.open(supportVisible
-                    ? supportUrl
-                    : `https://pay.daimo.com?ref=sdk-v${daimoPayVersion}`, "_blank");
-            }, className: supportVisible ? "support" : "", children: [!supportVisible && jsx(CrepeIcon, {}), jsx("span", { children: supportVisible ? (jsxs(Fragment, { children: ["Need help? ", jsx(Underline, { children: "Contact support" })] })) : (jsx(Fragment, { children: "Powered by Daimo Pay" })) })] }) }));
-};
-const Container = styled(motion.div) `
-  text-align: center;
-  margin-top: 16px;
-  margin-bottom: -4px;
-`;
-const fadeIn = keyframes `
-0%{ opacity:0; }
-100%{ opacity:1; }
-`;
-const TextButton = styled(motion.button) `
-  appearance: none;
-  user-select: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  height: 42px;
-  padding: 0 16px;
-  border-radius: 6px;
-  background: none;
-  color: var(--ck-body-color-muted);
-  text-decoration-color: var(--ck-body-color-muted);
-  font-size: 15px;
-  line-height: 18px;
-  font-weight: 500;
-
-  transition:
-    color 200ms ease,
-    transform 100ms ease;
-  &:hover {
-    color: var(--ck-body-color-muted-hover);
-    text-decoration-color: var(--ck-body-color-muted-hover);
-  }
-  &:active {
-    transform: scale(0.96);
-  }
-
-  span {
-    opacity: 1;
-    transition: opacity 300ms ease;
-  }
-
-  &.support span {
-    animation: ${fadeIn} 300ms ease both;
-  }
-`;
-const Underline = styled(motion.span) `
-  text-underline-offset: 2px;
-  text-decoration: underline;
-`;
-
-export { PoweredByFooter as default };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/PoweredByFooter/index.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\nimport { keyframes } from \"styled-components\";\nimport CrepeIcon from \"../../../assets/crepe\";\nimport styled from \"../../../styles/styled\";\nimport { daimoPayVersion } from \"../../../utils/exports\";\nconst PoweredByFooter = ({ supportUrl } = {}) => {\n    const [supportVisible, setSupportVisible] = useState(false);\n    useEffect(() => {\n        if (supportUrl == null)\n            return;\n        // Show the support link after delay\n        const timer = setTimeout(() => {\n            setSupportVisible(true);\n        }, 2500);\n        return () => clearTimeout(timer);\n    }, []);\n    return (_jsx(Container, { children: _jsxs(TextButton, { onClick: () => {\n                window.open(supportVisible\n                    ? supportUrl\n                    : `https://pay.daimo.com?ref=sdk-v${daimoPayVersion}`, \"_blank\");\n            }, className: supportVisible ? \"support\" : \"\", children: [!supportVisible && _jsx(CrepeIcon, {}), _jsx(\"span\", { children: supportVisible ? (_jsxs(_Fragment, { children: [\"Need help? \", _jsx(Underline, { children: \"Contact support\" })] })) : (_jsx(_Fragment, { children: \"Powered by Daimo Pay\" })) })] }) }));\n};\nconst Container = styled(motion.div) `\n  text-align: center;\n  margin-top: 16px;\n  margin-bottom: -4px;\n`;\nconst fadeIn = keyframes `\n0%{ opacity:0; }\n100%{ opacity:1; }\n`;\nconst TextButton = styled(motion.button) `\n  appearance: none;\n  user-select: none;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  height: 42px;\n  padding: 0 16px;\n  border-radius: 6px;\n  background: none;\n  color: var(--ck-body-color-muted);\n  text-decoration-color: var(--ck-body-color-muted);\n  font-size: 15px;\n  line-height: 18px;\n  font-weight: 500;\n\n  transition:\n    color 200ms ease,\n    transform 100ms ease;\n  &:hover {\n    color: var(--ck-body-color-muted-hover);\n    text-decoration-color: var(--ck-body-color-muted-hover);\n  }\n  &:active {\n    transform: scale(0.96);\n  }\n\n  span {\n    opacity: 1;\n    transition: opacity 300ms ease;\n  }\n\n  &.support span {\n    animation: ${fadeIn} 300ms ease both;\n  }\n`;\nconst Underline = styled(motion.span) `\n  text-underline-offset: 2px;\n  text-decoration: underline;\n`;\nexport default PoweredByFooter;\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;AAOK,MAAC,eAAe,GAAG,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK;AACjD,IAAI,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAChE,IAAI,SAAS,CAAC,MAAM;AACpB,QAAQ,IAAI,UAAU,IAAI,IAAI;AAC9B,YAAY,OAAO;AACnB;AACA,QAAQ,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM;AACvC,YAAY,iBAAiB,CAAC,IAAI,CAAC,CAAC;AACpC,SAAS,EAAE,IAAI,CAAC,CAAC;AACjB,QAAQ,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC,CAAC;AACzC,KAAK,EAAE,EAAE,CAAC,CAAC;AACX,IAAI,QAAQA,GAAI,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAEC,IAAK,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,MAAM;AAC3E,gBAAgB,MAAM,CAAC,IAAI,CAAC,cAAc;AAC1C,sBAAsB,UAAU;AAChC,sBAAsB,CAAC,+BAA+B,EAAE,eAAe,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;AACrF,aAAa,EAAE,SAAS,EAAE,cAAc,GAAG,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,cAAc,IAAID,GAAI,CAAC,SAAS,EAAE,EAAE,CAAC,EAAEA,GAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,cAAc,IAAIC,IAAK,CAACC,QAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,aAAa,EAAEF,GAAI,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC,CAAC,EAAE,CAAC,KAAKA,GAAI,CAACE,QAAS,EAAE,EAAE,QAAQ,EAAE,sBAAsB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACjU,EAAE;AACF,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AACtC;AACA;AACA;AACA,CAAC,CAAC;AACF,MAAM,MAAM,GAAG,SAAS,CAAC,CAAC;AAC1B;AACA;AACA,CAAC,CAAC;AACF,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,EAAE,MAAM,CAAC;AACxB;AACA,CAAC,CAAC;AACF,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AACvC;AACA;AACA,CAAC;;;;"}