@daimo/pay 1.19.0 → 1.19.1

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

@@ -1,145 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { motion } from 'framer-motion';
-import { useEffect } from 'react';
-import { keyframes } from 'styled-components';
-import { usePayContext } from '../../../hooks/usePayContext.js';
-import styled from '../../../styles/styled/index.js';
-import { OrDivider } from '../Modal/index.js';
-import { ScrollArea } from '../ScrollArea/index.js';
-import { OptionsContainer, OptionButton, OptionLabel, OptionTitle, OptionSubtitle } from './styles.js';
-
-const OptionsList = ({
-  options,
-  isLoading,
-  requiredSkeletons,
-  scrollHeight = 300,
-  orDivider = false,
-  hideBottomLine = false
-}) => {
-  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 /* @__PURE__ */ jsxs(OptionsContainer, { $totalResults: options.length, children: [
-      options.map((option) => /* @__PURE__ */ jsx(OptionItem, { option }, option.id)),
-      isLoading && Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsx(SkeletonOptionItem, {}, index))
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ScrollArea,
-      {
-        mobileDirection: "vertical",
-        height: scrollHeight,
-        hideBottomLine: orDivider || hideBottomLine,
-        totalItems: options.length,
-        children: /* @__PURE__ */ jsx(OptionsContainer, { $totalResults: options.length, children: options.map((option) => /* @__PURE__ */ jsx(OptionItem, { option }, option.id)) })
-      }
-    ),
-    orDivider && /* @__PURE__ */ jsx(OrDivider, {})
-  ] });
-};
-const SkeletonOptionItem = () => {
-  return /* @__PURE__ */ jsxs(OptionButton, { type: "button", children: [
-    /* @__PURE__ */ jsx(SkeletonIcon, {}),
-    /* @__PURE__ */ 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 /* @__PURE__ */ jsx("img", { src: icon, alt: "" }, option.id);
-    }
-    return icon;
-  });
-  const iconContent = (() => {
-    return /* @__PURE__ */ jsx(IconStackContainer, { children: hydratedIcons.map((icon, index) => /* @__PURE__ */ jsx(
-      IconStackItem,
-      {
-        $marginRight: index !== hydratedIcons.length - 1 ? -12 : 0,
-        $zIndex: hydratedIcons.length - index,
-        children: icon
-      },
-      index
-    )) });
-  })();
-  return /* @__PURE__ */ jsxs(
-    OptionButton,
-    {
-      type: "button",
-      onClick: option.onClick,
-      disabled: option.disabled,
-      children: [
-        iconContent,
-        /* @__PURE__ */ jsxs(OptionLabel, { children: [
-          /* @__PURE__ */ jsx(OptionTitle, { children: option.title }),
-          option.subtitle && /* @__PURE__ */ 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 };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/OptionsList/index.tsx"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { useEffect } from \"react\";\nimport { keyframes } from \"styled-components\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport styled from \"../../../styles/styled\";\nimport { OrDivider } from \"../Modal\";\nimport { ScrollArea } from \"../ScrollArea\";\nimport {\n  OptionButton,\n  OptionLabel,\n  OptionSubtitle,\n  OptionTitle,\n  OptionsContainer,\n} from \"./styles\";\n\nexport interface Option {\n  id: string;\n  sortValue?: number;\n  title: string;\n  subtitle?: string;\n  icons: (React.ReactNode | string)[];\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport const OptionsList = ({\n  options,\n  isLoading,\n  requiredSkeletons,\n  scrollHeight = 300,\n  orDivider = false,\n  hideBottomLine = false,\n}: {\n  options: Option[];\n  isLoading?: boolean;\n  requiredSkeletons?: number;\n  scrollHeight?: number;\n  orDivider?: boolean;\n  hideBottomLine?: boolean;\n}) => {\n  const { triggerResize, log } = usePayContext();\n  const optionsLength = options.length;\n\n  useEffect(() => {\n    log(`[OPTIONS RESIZE]: ${optionsLength}, triggering resize`);\n    if (optionsLength > 0) triggerResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [optionsLength]);\n\n  if (isLoading) {\n    const skeletonCount = requiredSkeletons\n      ? Math.max(requiredSkeletons - optionsLength, 0)\n      : 0;\n\n    return (\n      <OptionsContainer $totalResults={options.length}>\n        {options.map((option) => (\n          <OptionItem key={option.id} option={option} />\n        ))}\n        {isLoading &&\n          Array.from({ length: skeletonCount }).map((_, index) => (\n            <SkeletonOptionItem key={index} />\n          ))}\n      </OptionsContainer>\n    );\n  }\n\n  return (\n    <>\n      <ScrollArea\n        mobileDirection={\"vertical\"}\n        height={scrollHeight}\n        hideBottomLine={orDivider || hideBottomLine}\n        totalItems={options.length}\n      >\n        <OptionsContainer $totalResults={options.length}>\n          {options.map((option) => (\n            <OptionItem key={option.id} option={option} />\n          ))}\n        </OptionsContainer>\n      </ScrollArea>\n      {orDivider && <OrDivider />}\n    </>\n  );\n};\n\nconst SkeletonOptionItem = () => {\n  return (\n    <OptionButton type=\"button\">\n      <SkeletonIcon />\n      <SkeletonLabel />\n    </OptionButton>\n  );\n};\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`;\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`;\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`;\n\nconst OptionItem = ({ option }: { option: Option }) => {\n  const hydratedIcons = option.icons.map((icon) => {\n    if (typeof icon === \"string\") {\n      return <img key={option.id} src={icon} alt=\"\" />;\n    }\n    return icon;\n  });\n\n  const iconContent = (() => {\n    return (\n      <IconStackContainer>\n        {hydratedIcons.map((icon, index) => (\n          <IconStackItem\n            key={index}\n            $marginRight={index !== hydratedIcons.length - 1 ? -12 : 0}\n            $zIndex={hydratedIcons.length - index}\n          >\n            {icon}\n          </IconStackItem>\n        ))}\n      </IconStackContainer>\n    );\n  })();\n\n  return (\n    <OptionButton\n      type=\"button\"\n      onClick={option.onClick}\n      disabled={option.disabled}\n    >\n      {iconContent}\n      <OptionLabel>\n        <OptionTitle>{option.title}</OptionTitle>\n        {option.subtitle && <OptionSubtitle>{option.subtitle}</OptionSubtitle>}\n      </OptionLabel>\n    </OptionButton>\n  );\n};\n\nconst IconStackContainer = styled(motion.div)`\n  position: absolute;\n  right: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst IconStackItem = styled(motion.div)<{\n  $marginRight?: number;\n  $zIndex?: number;\n}>`\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":[],"mappings":"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"}

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

@@ -1,138 +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 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, OptionLabel, OptionSubtitle, OptionTitle, OptionsContainer };
-//# sourceMappingURL=styles.js.map

package/build/connectkit/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\";\n\nimport { motion } from \"framer-motion\";\n\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`;\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`;\n\nexport const OptionTitle = styled(motion.span)`\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n`;\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`;\n\nexport const OptionsContainer = styled.div<{\n  $disabled?: boolean;\n}>`\n  transition: opacity 300ms ease;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.4;\n    `}\n`;\n"],"names":[],"mappings":";;;;AAKa,MAAA,YAAA,GAAe,MAAO,CAAA,MAAA,CAAO,MAAM,CAAA,CAAA;AAAA;AAAA;AAAA,UAAA,EAGpC,CAAC,KAAA,KAAW,KAAM,CAAA,QAAA,GAAW,YAAY,SAAU,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AA6FlD,MAAA,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAWhC,MAAA,WAAA,GAAc,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOhC,MAAA,cAAA,GAAiB,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAUzC,MAAM,mBAAmB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQnC,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,SACN,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA,IAGC,CAAA,CAAA;AAAA;;;;"}

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

@@ -1,192 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { getAddressContraction } from '@daimo/pay-common';
-import { useWallet } from '@solana/wallet-adapter-react';
-import { motion } from 'framer-motion';
-import { useAccount } from 'wagmi';
-import { Solana, Ethereum, Optimism, Arbitrum, Base, Polygon } from '../../../assets/chains.js';
-import { USDC } from '../../../assets/coins.js';
-import defaultTheme from '../../../constants/defaultTheme.js';
-import { ROUTES } from '../../../constants/routes.js';
-import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
-import useLocales from '../../../hooks/useLocales.js';
-import { usePayContext } from '../../../hooks/usePayContext.js';
-import styled from '../../../styles/styled/index.js';
-import { formatUsd } from '../../../utils/format.js';
-
-const OrderHeader = ({
-  minified = false,
-  show = "all"
-}) => {
-  const { paymentState, route } = usePayContext();
-  const { isConnected: isEthConnected, address, connector } = useAccount();
-  const {
-    connected: isSolanaConnected,
-    publicKey,
-    wallet: solanaWallet
-  } = useWallet();
-  const { senderEnsName } = paymentState;
-  const { order } = useDaimoPay();
-  const ethWalletDisplayName = senderEnsName ?? (address ? getAddressContraction(address) : "wallet");
-  const solWalletDisplayName = getAddressContraction(
-    publicKey?.toBase58() ?? ""
-  );
-  const orderUsd = order?.destFinalCallTokenAmount.usd;
-  const locales = useLocales();
-  const titleAmountContent = (() => {
-    if (paymentState.isDepositFlow) {
-      return route === ROUTES.SELECT_TOKEN ? (
-        // TODO: make this match `ModalH1` font size for mobile
-        /* @__PURE__ */ jsx("span", { style: { fontSize: "19px", lineHeight: "22px" }, children: locales.yourBalances })
-      ) : null;
-    } else {
-      return orderUsd != null ? /* @__PURE__ */ jsx("span", { children: formatUsd(orderUsd, "nearest") }) : null;
-    }
-  })();
-  const renderIcon = (icon, name, size = 32) => {
-    if (!icon) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(LogoContainer, { $size: size, $zIndex: 1, style: { borderRadius: "22.5%" }, children: typeof icon === "string" ? /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: icon,
-        alt: name || "wallet",
-        style: { maxWidth: "100%", maxHeight: "100%" }
-      }
-    ) : icon });
-  };
-  let walletIcon = renderIcon(connector?.icon);
-  let solanaIcon = renderIcon(
-    solanaWallet?.adapter.icon || /* @__PURE__ */ jsx(Solana, {}),
-    solanaWallet?.adapter.name
-  );
-  if (minified) {
-    if (titleAmountContent != null) {
-      return /* @__PURE__ */ jsxs(MinifiedContainer, { children: [
-        /* @__PURE__ */ jsx(MinifiedTitleAmount, { children: titleAmountContent }),
-        show === "evm" && isEthConnected && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(SubtitleContainer, { children: [
-          /* @__PURE__ */ jsx(Subtitle, { children: ethWalletDisplayName }),
-          walletIcon
-        ] }) }),
-        show === "solana" && isSolanaConnected && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(SubtitleContainer, { children: [
-          /* @__PURE__ */ jsx(Subtitle, { children: solWalletDisplayName }),
-          solanaIcon
-        ] }) })
-      ] });
-    }
-  } else {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      titleAmountContent && /* @__PURE__ */ jsx(TitleAmount, { children: titleAmountContent }),
-      /* @__PURE__ */ jsxs(AnyChainAnyCoinContainer, { children: [
-        /* @__PURE__ */ jsx(CoinLogos, {}),
-        /* @__PURE__ */ jsx(Subtitle, { children: locales.tokensAccepted })
-      ] })
-    ] });
-  }
-};
-function CoinLogos({ $size = 24 }) {
-  const logos = [
-    /* @__PURE__ */ jsx(Ethereum, {}, "eth"),
-    /* @__PURE__ */ jsx(USDC, {}, "usdc"),
-    /* @__PURE__ */ jsx(Optimism, {}, "optimism"),
-    /* @__PURE__ */ jsx(Arbitrum, {}, "arbitrum"),
-    /* @__PURE__ */ jsx(Base, {}, "base"),
-    /* @__PURE__ */ jsx(Polygon, {}, "polygon"),
-    /* @__PURE__ */ jsx(Solana, {}, "solana")
-  ];
-  const logoBlock = (element, index) => /* @__PURE__ */ jsx(
-    LogoContainer,
-    {
-      $marginLeft: index !== 0 ? -($size / 3) : 0,
-      $zIndex: logos.length - index,
-      $size,
-      transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] },
-      children: element
-    },
-    index
-  );
-  return /* @__PURE__ */ 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;
-`;
-const SubtitleContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-`;
-
-export { OrderHeader };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/OrderHeader/index.tsx"],"sourcesContent":["import { getAddressContraction } from \"@daimo/pay-common\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { motion } from \"framer-motion\";\nimport React from \"react\";\nimport { useAccount } from \"wagmi\";\nimport {\n  Arbitrum,\n  Base,\n  Ethereum,\n  Optimism,\n  Polygon,\n  Solana,\n} from \"../../../assets/chains\";\nimport { USDC } from \"../../../assets/coins\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport styled from \"../../../styles/styled\";\nimport { formatUsd } from \"../../../utils/format\";\n\n/** Shows payment amount. */\nexport const OrderHeader = ({\n  minified = false,\n  show = \"all\",\n}: {\n  minified?: boolean;\n  show?: \"evm\" | \"solana\" | \"zkp2p\" | \"all\";\n}) => {\n  const { paymentState, route } = usePayContext();\n  const { isConnected: isEthConnected, address, connector } = useAccount();\n  const {\n    connected: isSolanaConnected,\n    publicKey,\n    wallet: solanaWallet,\n  } = useWallet();\n  const { senderEnsName } = paymentState;\n  const { order } = useDaimoPay();\n\n  const ethWalletDisplayName =\n    senderEnsName ?? (address ? getAddressContraction(address) : \"wallet\");\n  const solWalletDisplayName = getAddressContraction(\n    publicKey?.toBase58() ?? \"\",\n  );\n  const orderUsd = order?.destFinalCallTokenAmount.usd;\n\n  const locales = useLocales();\n\n  const titleAmountContent = (() => {\n    if (paymentState.isDepositFlow) {\n      return route === ROUTES.SELECT_TOKEN ? (\n        // TODO: make this match `ModalH1` font size for mobile\n        <span style={{ fontSize: \"19px\", lineHeight: \"22px\" }}>\n          {locales.yourBalances}\n        </span>\n      ) : null;\n    } else {\n      return orderUsd != null ? (\n        <span>{formatUsd(orderUsd, \"nearest\")}</span>\n      ) : null;\n    }\n  })();\n\n  const renderIcon = (\n    icon: React.ReactNode | string | undefined,\n    name?: string,\n    size = 32,\n  ): JSX.Element | null => {\n    if (!icon) {\n      return null;\n    }\n\n    return (\n      <LogoContainer $size={size} $zIndex={1} style={{ borderRadius: \"22.5%\" }}>\n        {typeof icon === \"string\" ? (\n          <img\n            src={icon}\n            alt={name || \"wallet\"}\n            style={{ maxWidth: \"100%\", maxHeight: \"100%\" }}\n          />\n        ) : (\n          icon\n        )}\n      </LogoContainer>\n    );\n  };\n  let walletIcon = renderIcon(connector?.icon);\n  let solanaIcon = renderIcon(\n    solanaWallet?.adapter.icon || <Solana />,\n    solanaWallet?.adapter.name,\n  );\n\n  if (minified) {\n    if (titleAmountContent != null) {\n      return (\n        <MinifiedContainer>\n          <MinifiedTitleAmount>{titleAmountContent}</MinifiedTitleAmount>\n          {show === \"evm\" && isEthConnected && (\n            <>\n              <SubtitleContainer>\n                <Subtitle>{ethWalletDisplayName}</Subtitle>\n                {walletIcon}\n              </SubtitleContainer>\n            </>\n          )}\n          {show === \"solana\" && isSolanaConnected && (\n            <>\n              <SubtitleContainer>\n                <Subtitle>{solWalletDisplayName}</Subtitle>\n                {solanaIcon}\n              </SubtitleContainer>\n            </>\n          )}\n        </MinifiedContainer>\n      );\n    }\n  } else {\n    return (\n      <>\n        {titleAmountContent && <TitleAmount>{titleAmountContent}</TitleAmount>}\n        <AnyChainAnyCoinContainer>\n          <CoinLogos />\n          <Subtitle>{locales.tokensAccepted}</Subtitle>\n        </AnyChainAnyCoinContainer>\n      </>\n    );\n  }\n};\n\nfunction CoinLogos({ $size = 24 }: { $size?: number }) {\n  const logos = [\n    <Ethereum key=\"eth\" />,\n    <USDC key=\"usdc\" />,\n    <Optimism key=\"optimism\" />,\n    <Arbitrum key=\"arbitrum\" />,\n    <Base key=\"base\" />,\n    <Polygon key=\"polygon\" />,\n    <Solana key=\"solana\" />,\n  ];\n\n  const logoBlock = (element: React.ReactElement, index: number) => (\n    <LogoContainer\n      key={index}\n      $marginLeft={index !== 0 ? -($size / 3) : 0}\n      $zIndex={logos.length - index}\n      $size={$size}\n      transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}\n    >\n      {element}\n    </LogoContainer>\n  );\n\n  return (\n    <Logos>{logos.map((element, index) => logoBlock(element, index))}</Logos>\n  );\n}\n\nconst TitleAmount = styled(motion.h1)<{\n  $error?: boolean;\n  $valid?: boolean;\n}>`\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) return \"var(--ck-body-color-danger)\";\n    if (props.$valid) 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`;\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`;\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`;\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`;\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`;\n\nconst LogoContainer = styled(motion.div)<{\n  $marginLeft?: number;\n  $zIndex?: number;\n  $size: number;\n}>`\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`;\n\nconst Logos = styled(motion.div)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst SubtitleContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n`;\n"],"names":[],"mappings":"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"}

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

@@ -1,70 +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 /* @__PURE__ */ jsxs(FeesContainer, { children: [
-    feesUsd > 0 && /* @__PURE__ */ jsxs(FeeRow, { children: [
-      /* @__PURE__ */ jsx(ModalBody, { children: "Subtotal" }),
-      /* @__PURE__ */ jsxs(ModalBody, { children: [
-        "$",
-        subtotalUsd.toFixed(2)
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(FeeRow, { children: [
-      /* @__PURE__ */ jsx(ModalBody, { children: "Fees" }),
-      feesUsd === 0 ? /* @__PURE__ */ jsx(Badge, { children: "Free" }) : /* @__PURE__ */ jsxs(ModalBody, { children: [
-        "$",
-        feesUsd.toFixed(2)
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(FeeRow, { style: { marginTop: 8 }, children: [
-      /* @__PURE__ */ jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }),
-      /* @__PURE__ */ 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/connectkit/src/components/Common/PaymentBreakdown/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/PaymentBreakdown/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { WalletPaymentOption } from \"@daimo/pay-common\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport styled from \"../../../styles/styled\";\nimport { ModalBody } from \"../../Common/Modal/styles\";\n\nconst PaymentBreakdown: React.FC<{\n  paymentOption: WalletPaymentOption;\n}> = ({ paymentOption }) => {\n  const subtotalUsd = paymentOption.required.usd;\n  const feesUsd = paymentOption.fees.usd;\n  const totalUsd = subtotalUsd + feesUsd;\n\n  return (\n    <FeesContainer>\n      {feesUsd > 0 && (\n        <FeeRow>\n          <ModalBody>Subtotal</ModalBody>\n          <ModalBody>${subtotalUsd.toFixed(2)}</ModalBody>\n        </FeeRow>\n      )}\n      <FeeRow>\n        <ModalBody>Fees</ModalBody>\n        {feesUsd === 0 ? (\n          <Badge>Free</Badge>\n        ) : (\n          <ModalBody>${feesUsd.toFixed(2)}</ModalBody>\n        )}\n      </FeeRow>\n      <FeeRow style={{ marginTop: 8 }}>\n        <ModalBody style={{ fontWeight: 600 }}>Total</ModalBody>\n        <ModalBody style={{ fontWeight: 600 }}>\n          ${totalUsd.toFixed(2)}\n        </ModalBody>\n      </FeeRow>\n    </FeesContainer>\n  );\n};\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`;\n\nexport default PaymentBreakdown;\n"],"names":[],"mappings":";;;;;AAOA,MAAM,gBAED,GAAA,CAAC,EAAE,aAAA,EAAoB,KAAA;AAC1B,EAAM,MAAA,WAAA,GAAc,cAAc,QAAS,CAAA,GAAA,CAAA;AAC3C,EAAM,MAAA,OAAA,GAAU,cAAc,IAAK,CAAA,GAAA,CAAA;AACnC,EAAA,MAAM,WAAW,WAAc,GAAA,OAAA,CAAA;AAE/B,EAAA,4BACG,aACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAU,OAAA,GAAA,CAAA,yBACR,MACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAU,QAAQ,EAAA,UAAA,EAAA,CAAA;AAAA,2BAClB,SAAU,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE,WAAA,CAAY,QAAQ,CAAC,CAAA;AAAA,OAAE,EAAA,CAAA;AAAA,KACtC,EAAA,CAAA;AAAA,yBAED,MACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAU,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,MACd,YAAY,CACX,mBAAA,GAAA,CAAC,SAAM,QAAI,EAAA,MAAA,EAAA,CAAA,wBAEV,SAAU,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QAAE,OAAA,CAAQ,QAAQ,CAAC,CAAA;AAAA,OAAE,EAAA,CAAA;AAAA,KAEpC,EAAA,CAAA;AAAA,yBACC,MAAO,EAAA,EAAA,KAAA,EAAO,EAAE,SAAA,EAAW,GAC1B,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAU,KAAO,EAAA,EAAE,UAAY,EAAA,GAAA,IAAO,QAAK,EAAA,OAAA,EAAA,CAAA;AAAA,2BAC3C,SAAU,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,KAAO,EAAA,QAAA,EAAA;AAAA,QAAA,GAAA;AAAA,QACnC,QAAA,CAAS,QAAQ,CAAC,CAAA;AAAA,OACtB,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,gBAAgB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAA,EAQU,aAAa,WAAW,CAAA;AAAA,MAAA,EACvD,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAOjB,MAAM,SAAS,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMtB,MAAM,QAAQ,MAAO,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

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

@@ -1,30 +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/connectkit/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\";\n\nconst Portal = (props: any) => {\n  props = {\n    selector: \"__DAIMOPAY__\",\n    ...props,\n  };\n\n  const { selector, children } = props;\n\n  const ref = useRef<Element | null>(null);\n  const [mounted, setMounted] = useState<boolean>(false);\n\n  useEffect(() => {\n    const selectorPrefixed = \"#\" + selector.replace(/^#/, \"\");\n    ref.current = document.querySelector(selectorPrefixed);\n\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\n    setMounted(true);\n  }, [selector]);\n\n  if (!ref.current) return null;\n  return mounted ? createPortal(children, ref.current) : null;\n};\n\nexport default Portal;\n"],"names":[],"mappings":";;;;AAIM,MAAA,MAAA,GAAS,CAAC,KAAe,KAAA;AAC7B,EAAQ,KAAA,GAAA;AAAA,IACN,QAAU,EAAA,cAAA;AAAA,IACV,GAAG,KAAA;AAAA,GACL,CAAA;AAEA,EAAM,MAAA,EAAE,QAAU,EAAA,QAAA,EAAa,GAAA,KAAA,CAAA;AAE/B,EAAM,MAAA,GAAA,GAAM,OAAuB,IAAI,CAAA,CAAA;AACvC,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,KAAK,CAAA,CAAA;AAErD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,gBAAmB,GAAA,GAAA,GAAM,QAAS,CAAA,OAAA,CAAQ,MAAM,EAAE,CAAA,CAAA;AACxD,IAAI,GAAA,CAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,gBAAgB,CAAA,CAAA;AAErD,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAM,MAAA,GAAA,GAAM,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACxC,MAAI,GAAA,CAAA,YAAA,CAAa,MAAM,QAAQ,CAAA,CAAA;AAC/B,MAAA,GAAA,CAAI,YAAa,CAAA,eAAA,EAAiB,CAAG,EAAA,WAAA,CAAY,OAAO,CAAE,CAAA,CAAA,CAAA;AAC1D,MAAS,QAAA,CAAA,IAAA,CAAK,YAAY,GAAG,CAAA,CAAA;AAC7B,MAAA,GAAA,CAAI,OAAU,GAAA,GAAA,CAAA;AAAA,KAChB;AAEA,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAI,IAAA,CAAC,GAAI,CAAA,OAAA,EAAgB,OAAA,IAAA,CAAA;AACzB,EAAA,OAAO,OAAU,GAAA,YAAA,CAAa,QAAU,EAAA,GAAA,CAAI,OAAO,CAAI,GAAA,IAAA,CAAA;AACzD;;;;"}