@daimo/pay 1.6.2 → 1.6.3

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

@@ -1,228 +0,0 @@
-import { motion } from 'framer-motion';
-import { css } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-import defaultTheme from '../../../constants/defaultTheme.js';
-
-const SwitchNetworksContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    flex-direction: column-reverse;
-  }
-`;
-const ChainIcon = styled(motion.div) `
-  display: block;
-  position: relative;
-  border-radius: 12px;
-  overflow: hidden;
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  min-height: 24px;
-  background: var(--ck-body-background);
-  svg {
-    border-radius: inherit;
-    display: block;
-    position: relative;
-    transform: translate3d(0, 0, 0);
-    width: 100%;
-    height: auto;
-  }
-  ${(props) => props.$empty &&
-    css `
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      &:before {
-        content: "?";
-        color: var(--ck-body-color-muted);
-        font-weight: bold;
-        font-family: var(--ck-font-family);
-      }
-    `}
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    border-radius: 16px;
-    width: 32px;
-    height: 32px;
-  }
-`;
-const ChainLogoContainer = styled(motion.div) `
-  position: relative;
-`;
-const ChainLogoSpinner = styled(motion.div) `
-  position: absolute;
-  inset: -6px;
-  animation: rotateSpinner 1200ms linear infinite;
-  pointer-events: none;
-  svg {
-    display: block;
-    position: relative;
-    transform: translate3d(0, 0, 0);
-    width: 100%;
-    height: auto;
-  }
-  @keyframes rotateSpinner {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-const ChainButtonContainer = styled.div `
-  position: relative;
-  margin: -8px -8px;
-  &:after {
-    border-radius: var(--border-radius, 0);
-    z-index: 2;
-    content: "";
-    pointer-events: none;
-    position: absolute;
-    inset: 0 2px;
-    box-shadow:
-      inset 0 16px 8px -12px var(--background, var(--ck-body-background)),
-      inset 0 -16px 8px -12px var(--background, var(--ck-body-background));
-  }
-`;
-const ChainButtons = styled(motion.div) `
-  padding: 8px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  max-height: 242px;
-
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
-  scrollbar-width: none; /* Firefox */
-  &::-webkit-scrollbar {
-    display: none; /* Safari and Chrome */
-  }
-
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    padding: 8px 14px;
-    margin: 2px -2px 0;
-    max-height: 60vh;
-  }
-`;
-const ChainButton = styled(motion.button) `
-  appearance: none;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  border-radius: 11px;
-  margin: 0 0 1px;
-  padding: 8px 0;
-  padding-right: 154px;
-  font-size: 15px;
-  line-height: 18px;
-  font-weight: 500;
-  text-decoration: none;
-  color: var(--ck-body-color);
-  background: none;
-  white-space: nowrap;
-  transition:
-    transform 100ms ease,
-    background-color 100ms ease;
-  transform: translateZ(0px);
-  &:before {
-    content: "";
-    background: currentColor;
-    position: absolute;
-    z-index: -1;
-    inset: 0 var(--ck-dropdown-active-inset, -8px);
-    border-radius: var(--ck-dropdown-active-border-radius, 12px);
-    opacity: 0;
-    transition: opacity 180ms ease;
-  }
-  &:after {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    inset: 0 var(--ck-dropdown-active-inset, -8px);
-    border-radius: 12px;
-    opacity: 0;
-    transition: opacity 180ms ease;
-    outline: 2px solid var(--ck-focus-color);
-  }
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    font-size: 17px;
-    padding: 8px 0;
-  }
-  @media only screen and (min-width: ${defaultTheme.mobileWidth}px) {
-    &:hover {
-      &:before {
-        transition-duration: 80ms;
-        opacity: 0.05;
-      }
-    }
-  }
-  &:active {
-    transform: scale(0.99) translateZ(0px);
-  }
-  &:disabled {
-    //opacity: 0.4;
-    pointer-events: none;
-  }
-  &:focus-visible {
-    outline: none !important;
-    &:after {
-      opacity: 1;
-    }
-  }
-  ${(props) => props.$variant === "secondary" &&
-    css `
-      padding: 12px 4px;
-      margin: 0 0 8px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-      &:before {
-        opacity: 0.05;
-      }
-      &:hover:before {
-        opacity: 0.1;
-      }
-    `}
-`;
-const ChainButtonStatus = styled(motion.div) `
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  color: var(--ck-body-color-muted);
-  font-size: 15px;
-  line-height: 18px;
-  font-weight: 500;
-  padding-right: 4px;
-  span {
-    display: block;
-    position: relative;
-  }
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    font-size: 17px;
-    padding: 0;
-  }
-`;
-const ChainButtonBg = styled(motion.div) `
-  position: absolute;
-  z-index: -1;
-  inset: 0 var(--ck-dropdown-active-inset, -8px);
-  background: var(--ck-dropdown-active-background, rgba(26, 136, 248, 0.1));
-  box-shadow var(--ck-dropdown-active-box-shadow);
-  border-radius: var(--ck-dropdown-active-border-radius, 12px);
-  
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    inset: 0 var(--ck-dropdown-active-inset, -8px);
-  }
-`;
-
-export { ChainButton, ChainButtonBg, ChainButtonContainer, ChainButtonStatus, ChainButtons, ChainIcon, ChainLogoContainer, ChainLogoSpinner, SwitchNetworksContainer };
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ChainSelectList/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { css } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nexport const SwitchNetworksContainer = styled.div `\n  display: flex;\n  flex-direction: column;\n\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    flex-direction: column-reverse;\n  }\n`;\nexport const ChainIcon = styled(motion.div) `\n  display: block;\n  position: relative;\n  border-radius: 12px;\n  overflow: hidden;\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  min-height: 24px;\n  background: var(--ck-body-background);\n  svg {\n    border-radius: inherit;\n    display: block;\n    position: relative;\n    transform: translate3d(0, 0, 0);\n    width: 100%;\n    height: auto;\n  }\n  ${(props) => props.$empty &&\n    css `\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &:before {\n        content: \"?\";\n        color: var(--ck-body-color-muted);\n        font-weight: bold;\n        font-family: var(--ck-font-family);\n      }\n    `}\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    border-radius: 16px;\n    width: 32px;\n    height: 32px;\n  }\n`;\nexport const ChainLogoContainer = styled(motion.div) `\n  position: relative;\n`;\nexport const ChainLogoSpinner = styled(motion.div) `\n  position: absolute;\n  inset: -6px;\n  animation: rotateSpinner 1200ms linear infinite;\n  pointer-events: none;\n  svg {\n    display: block;\n    position: relative;\n    transform: translate3d(0, 0, 0);\n    width: 100%;\n    height: auto;\n  }\n  @keyframes rotateSpinner {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\nexport const ChainButtonContainer = styled.div `\n  position: relative;\n  margin: -8px -8px;\n  &:after {\n    border-radius: var(--border-radius, 0);\n    z-index: 2;\n    content: \"\";\n    pointer-events: none;\n    position: absolute;\n    inset: 0 2px;\n    box-shadow:\n      inset 0 16px 8px -12px var(--background, var(--ck-body-background)),\n      inset 0 -16px 8px -12px var(--background, var(--ck-body-background));\n  }\n`;\nexport const ChainButtons = styled(motion.div) `\n  padding: 8px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 242px;\n\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n  &::-webkit-scrollbar {\n    display: none; /* Safari and Chrome */\n  }\n\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    padding: 8px 14px;\n    margin: 2px -2px 0;\n    max-height: 60vh;\n  }\n`;\nexport const ChainButton = styled(motion.button) `\n  appearance: none;\n  cursor: pointer;\n  user-select: none;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  border-radius: 11px;\n  margin: 0 0 1px;\n  padding: 8px 0;\n  padding-right: 154px;\n  font-size: 15px;\n  line-height: 18px;\n  font-weight: 500;\n  text-decoration: none;\n  color: var(--ck-body-color);\n  background: none;\n  white-space: nowrap;\n  transition:\n    transform 100ms ease,\n    background-color 100ms ease;\n  transform: translateZ(0px);\n  &:before {\n    content: \"\";\n    background: currentColor;\n    position: absolute;\n    z-index: -1;\n    inset: 0 var(--ck-dropdown-active-inset, -8px);\n    border-radius: var(--ck-dropdown-active-border-radius, 12px);\n    opacity: 0;\n    transition: opacity 180ms ease;\n  }\n  &:after {\n    content: \"\";\n    position: absolute;\n    z-index: -1;\n    inset: 0 var(--ck-dropdown-active-inset, -8px);\n    border-radius: 12px;\n    opacity: 0;\n    transition: opacity 180ms ease;\n    outline: 2px solid var(--ck-focus-color);\n  }\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    font-size: 17px;\n    padding: 8px 0;\n  }\n  @media only screen and (min-width: ${defaultTheme.mobileWidth}px) {\n    &:hover {\n      &:before {\n        transition-duration: 80ms;\n        opacity: 0.05;\n      }\n    }\n  }\n  &:active {\n    transform: scale(0.99) translateZ(0px);\n  }\n  &:disabled {\n    //opacity: 0.4;\n    pointer-events: none;\n  }\n  &:focus-visible {\n    outline: none !important;\n    &:after {\n      opacity: 1;\n    }\n  }\n  ${(props) => props.$variant === \"secondary\" &&\n    css `\n      padding: 12px 4px;\n      margin: 0 0 8px;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      &:before {\n        opacity: 0.05;\n      }\n      &:hover:before {\n        opacity: 0.1;\n      }\n    `}\n`;\nexport const ChainButtonStatus = styled(motion.div) `\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  color: var(--ck-body-color-muted);\n  font-size: 15px;\n  line-height: 18px;\n  font-weight: 500;\n  padding-right: 4px;\n  span {\n    display: block;\n    position: relative;\n  }\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    font-size: 17px;\n    padding: 0;\n  }\n`;\nexport const ChainButtonBg = styled(motion.div) `\n  position: absolute;\n  z-index: -1;\n  inset: 0 var(--ck-dropdown-active-inset, -8px);\n  background: var(--ck-dropdown-active-background, rgba(26, 136, 248, 0.1));\n  box-shadow var(--ck-dropdown-active-box-shadow);\n  border-radius: var(--ck-dropdown-active-border-radius, 12px);\n  \n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    inset: 0 var(--ck-dropdown-active-inset, -8px);\n  }\n`;\n"],"names":[],"mappings":";;;;;AAIY,MAAC,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AACnD;AACA;AACA;AACA,qCAAqC,EAAE,YAAY,CAAC,WAAW,CAAC;AAChE;AACA;AACA,EAAE;AACU,MAAC,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM;AAC3B,IAAI,GAAG,CAAC,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,CAAC,CAAC;AACN,qCAAqC,EAAE,YAAY,CAAC,WAAW,CAAC;AAChE;AACA;AACA;AACA;AACA,EAAE;AACU,MAAC,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AACtD;AACA,EAAE;AACU,MAAC,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACU,MAAC,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACU,MAAC,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC,EAAE,YAAY,CAAC,WAAW,CAAC;AAChE;AACA;AACA;AACA;AACA,EAAE;AACU,MAAC,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AAClD;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,qCAAqC,EAAE,YAAY,CAAC,WAAW,CAAC;AAChE;AACA;AACA;AACA,qCAAqC,EAAE,YAAY,CAAC,WAAW,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,KAAK,WAAW;AAC7C,IAAI,GAAG,CAAC,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,CAAC,CAAC;AACN,EAAE;AACU,MAAC,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC,EAAE,YAAY,CAAC,WAAW,CAAC;AAChE;AACA;AACA;AACA,EAAE;AACU,MAAC,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC,EAAE,YAAY,CAAC,WAAW,CAAC;AAChE;AACA;AACA;;;;"}

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

@@ -1,71 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { usePayContext, ROUTES } from '../../DaimoPay.js';
-import { ConnectorsContainer, ConnectorButton, ConnectorIcon, ConnectorLabel, RecentlyUsedTag } from './styles.js';
-import { useWeb3 } from '../../contexts/web3/index.js';
-import useIsMobile from '../../../hooks/useIsMobile.js';
-import { ScrollArea } from '../ScrollArea/index.js';
-import Alert from '../Alert/index.js';
-import { useConnect } from '../../../hooks/useConnect.js';
-import { useLastConnector } from '../../../hooks/useLastConnector.js';
-import { isWalletConnectConnector, detectBrowser, isCoinbaseWalletConnector } from '../../../utils/index.js';
-import { useWallets } from '../../../wallets/useWallets.js';
-
-const ConnectorList = () => {
-    const context = usePayContext();
-    const isMobile = useIsMobile();
-    const wallets = useWallets();
-    const { lastConnectorId } = useLastConnector();
-    const walletsToDisplay = context.options?.hideRecentBadge || lastConnectorId === "walletConnect" // do not hoist walletconnect to top of list
-        ? wallets
-        : [
-            // move last used wallet to top of list
-            // using .filter and spread to avoid mutating original array order with .sort
-            ...wallets.filter((wallet) => lastConnectorId === wallet.connector.id),
-            ...wallets.filter((wallet) => lastConnectorId !== wallet.connector.id),
-        ];
-    return (jsxs(ScrollArea, { mobileDirection: "horizontal", children: [walletsToDisplay.length === 0 && (jsx(Alert, { error: true, children: "No connectors found in ConnectKit config." })), walletsToDisplay.length > 0 && (jsx(ConnectorsContainer, { "$mobile": isMobile, "$totalResults": walletsToDisplay.length, children: walletsToDisplay.map((wallet) => (jsx(ConnectorItem, { wallet: wallet, isRecent: wallet.id === lastConnectorId }, wallet.id))) }))] }));
-};
-const ConnectorItem = ({ wallet, isRecent, }) => {
-    const { connect: { getUri }, } = useWeb3();
-    const uri = getUri();
-    const isMobile = useIsMobile();
-    const context = usePayContext();
-    const { connect } = useConnect();
-    /*
-    const [ready, setReady] = useState(false);
-    useEffect(() => {
-      (async () => {
-        const provider = await wallet.connector.getProvider();
-        setReady(!!provider);
-      })();
-    }, [wallet, setReady]);
-    */
-    let deeplink = (!wallet.isInstalled && isMobile) ||
-        (wallet.shouldDeeplinkDesktop && !isMobile)
-        ? wallet.getWalletConnectDeeplink?.(uri ?? "")
-        : undefined;
-    const redirectToMoreWallets = isMobile && isWalletConnectConnector(wallet.id);
-    // Safari requires opening popup on user gesture, so we connect immediately here
-    const shouldConnectImmediately = (detectBrowser() === "safari" || detectBrowser() === "ios") &&
-        isCoinbaseWalletConnector(wallet.connector.id);
-    if (redirectToMoreWallets || shouldConnectImmediately)
-        deeplink = undefined; // mobile redirects to more wallets page
-    return (jsxs(ConnectorButton, { type: "button", as: deeplink ? "a" : undefined, href: deeplink ? deeplink : undefined, disabled: context.route !== ROUTES.CONNECTORS, onClick: deeplink
-            ? undefined
-            : () => {
-                if (redirectToMoreWallets) {
-                    context.setRoute(ROUTES.MOBILECONNECTORS);
-                }
-                else {
-                    if (shouldConnectImmediately) {
-                        connect({ connector: wallet?.connector });
-                    }
-                    context.setRoute(ROUTES.CONNECT);
-                    context.setConnector({ id: wallet.id });
-                    context.setWcWallet(wallet);
-                }
-            }, children: [jsx(ConnectorIcon, { "data-small": wallet.iconShouldShrink, "data-shape": wallet.iconShape, children: wallet.iconConnector ?? wallet.icon }), jsxs(ConnectorLabel, { children: [isMobile ? (wallet.shortName ?? wallet.name) : wallet.name, !context.options?.hideRecentBadge && isRecent && (jsx(RecentlyUsedTag, { children: jsx("span", { children: "Recent" }) }))] })] }));
-};
-
-export { ConnectorList as default };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ConnectorList/index.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { ROUTES, usePayContext } from \"../../DaimoPay\";\nimport { ConnectorButton, ConnectorIcon, ConnectorLabel, ConnectorsContainer, RecentlyUsedTag, } from \"./styles\";\nimport { useWeb3 } from \"../../contexts/web3\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport { ScrollArea } from \"../../Common/ScrollArea\";\nimport Alert from \"../Alert\";\nimport { useConnect } from \"../../../hooks/useConnect\";\nimport { useLastConnector } from \"../../../hooks/useLastConnector\";\nimport { detectBrowser, isCoinbaseWalletConnector, isWalletConnectConnector, } from \"../../../utils\";\nimport { useWallets } from \"../../../wallets/useWallets\";\nconst ConnectorList = () => {\n    const context = usePayContext();\n    const isMobile = useIsMobile();\n    const wallets = useWallets();\n    const { lastConnectorId } = useLastConnector();\n    const walletsToDisplay = context.options?.hideRecentBadge || lastConnectorId === \"walletConnect\" // do not hoist walletconnect to top of list\n        ? wallets\n        : [\n            // move last used wallet to top of list\n            // using .filter and spread to avoid mutating original array order with .sort\n            ...wallets.filter((wallet) => lastConnectorId === wallet.connector.id),\n            ...wallets.filter((wallet) => lastConnectorId !== wallet.connector.id),\n        ];\n    return (_jsxs(ScrollArea, { mobileDirection: \"horizontal\", children: [walletsToDisplay.length === 0 && (_jsx(Alert, { error: true, children: \"No connectors found in ConnectKit config.\" })), walletsToDisplay.length > 0 && (_jsx(ConnectorsContainer, { \"$mobile\": isMobile, \"$totalResults\": walletsToDisplay.length, children: walletsToDisplay.map((wallet) => (_jsx(ConnectorItem, { wallet: wallet, isRecent: wallet.id === lastConnectorId }, wallet.id))) }))] }));\n};\nexport default ConnectorList;\nconst ConnectorItem = ({ wallet, isRecent, }) => {\n    const { connect: { getUri }, } = useWeb3();\n    const uri = getUri();\n    const isMobile = useIsMobile();\n    const context = usePayContext();\n    const { connect } = useConnect();\n    /*\n    const [ready, setReady] = useState(false);\n    useEffect(() => {\n      (async () => {\n        const provider = await wallet.connector.getProvider();\n        setReady(!!provider);\n      })();\n    }, [wallet, setReady]);\n    */\n    let deeplink = (!wallet.isInstalled && isMobile) ||\n        (wallet.shouldDeeplinkDesktop && !isMobile)\n        ? wallet.getWalletConnectDeeplink?.(uri ?? \"\")\n        : undefined;\n    const redirectToMoreWallets = isMobile && isWalletConnectConnector(wallet.id);\n    // Safari requires opening popup on user gesture, so we connect immediately here\n    const shouldConnectImmediately = (detectBrowser() === \"safari\" || detectBrowser() === \"ios\") &&\n        isCoinbaseWalletConnector(wallet.connector.id);\n    if (redirectToMoreWallets || shouldConnectImmediately)\n        deeplink = undefined; // mobile redirects to more wallets page\n    return (_jsxs(ConnectorButton, { type: \"button\", as: deeplink ? \"a\" : undefined, href: deeplink ? deeplink : undefined, disabled: context.route !== ROUTES.CONNECTORS, onClick: deeplink\n            ? undefined\n            : () => {\n                if (redirectToMoreWallets) {\n                    context.setRoute(ROUTES.MOBILECONNECTORS);\n                }\n                else {\n                    if (shouldConnectImmediately) {\n                        connect({ connector: wallet?.connector });\n                    }\n                    context.setRoute(ROUTES.CONNECT);\n                    context.setConnector({ id: wallet.id });\n                    context.setWcWallet(wallet);\n                }\n            }, children: [_jsx(ConnectorIcon, { \"data-small\": wallet.iconShouldShrink, \"data-shape\": wallet.iconShape, children: wallet.iconConnector ?? wallet.icon }), _jsxs(ConnectorLabel, { children: [isMobile ? (wallet.shortName ?? wallet.name) : wallet.name, !context.options?.hideRecentBadge && isRecent && (_jsx(RecentlyUsedTag, { children: _jsx(\"span\", { children: \"Recent\" }) }))] })] }));\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,314 +0,0 @@
-import { keyframes, css } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-import { motion } from 'framer-motion';
-
-const Shimmer = keyframes `
-  0%{ transform: translate(-100%) rotate(-45deg); }
-  100%{ transform: translate(100%) rotate(-80deg); }
-`;
-const ConnectorButton = styled(motion.button) `
-  display: block;
-  text-decoration: none;
-`;
-const ConnectorLabel = styled(motion.span) ``;
-const ConnectorIcon = styled(motion.div) ``;
-// This is a bit of a hack to not share styles between mobile and desktop
-const styles = {
-    desktop: {
-        ConnectorButton: css `
-      cursor: pointer;
-      user-select: none;
-      position: relative;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-      width: 100%;
-      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));
-        }
-      }
-    `,
-        ConnectorLabel: css `
-      display: flex;
-      align-items: center;
-      gap: 9px;
-      width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      padding: 2px 0;
-      padding-right: 38px;
-    `,
-        ConnectorIcon: css `
-      position: absolute;
-      right: 20px;
-      width: 32px;
-      height: 32px;
-      overflow: hidden;
-      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;
-      }
-    `,
-    },
-    mobile: {
-        ConnectorButton: css `
-      text-align: center;
-      background: none;
-      max-width: 100%;
-      overflow: hidden;
-    `,
-        ConnectorLabel: css `
-      display: block;
-      text-overflow: ellipsis;
-      max-width: 100%;
-      overflow: hidden;
-      padding: 10px 0 0;
-      color: var(--ck-body-color);
-      font-size: 13px;
-      line-height: 15px;
-      font-weight: 500;
-      opacity: 0.75;
-    `,
-        ConnectorIcon: css `
-      position: relative;
-      margin: 0 auto;
-      width: 60px;
-      height: 60px;
-      overflow: hidden;
-      svg,
-      img {
-        display: block;
-        position: relative;
-        width: 100%;
-        height: auto;
-      }
-      &[data-small="true"] {
-        svg,
-        img {
-          transform: scale(0.8);
-        }
-      }
-
-      &[data-shape="squircle"] {
-        border-radius: 22.5%;
-        &:before {
-          content: "";
-          z-index: -1;
-          position: absolute;
-          inset: 0;
-          border-radius: inherit;
-          box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
-        }
-      }
-      &[data-shape="circle"] {
-        border-radius: 100%;
-      }
-      &[data-shape="square"] {
-        border-radius: 0;
-      }
-    `,
-    },
-};
-const RecentlyUsedTag = styled(motion.span) `
-  position: relative;
-  top: var(--ck-recent-badge-top-offset, 0.5px);
-  display: inline-block;
-  padding: 10px 7px;
-  line-height: 0;
-  font-size: 13px;
-  font-weight: 400;
-  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));
-  color: var(
-    --ck-recent-badge-color,
-    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))
-  );
-  background: var(--ck-recent-badge-background, transparent);
-  overflow: hidden;
-  span {
-    display: inline-block;
-    position: relative;
-  }
-  &:before {
-    z-index: 1;
-    content: "";
-    position: absolute;
-    inset: 0;
-    opacity: 0.4;
-    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);
-    border-radius: inherit;
-  }
-  &:after {
-    z-index: 2;
-    content: "";
-    position: absolute;
-    inset: -10%;
-    top: -110%;
-    aspect-ratio: 1/1;
-    opacity: 0.7;
-    background: linear-gradient(
-      170deg,
-      transparent 10%,
-      var(--ck-recent-badge-background, var(--bg)) 50%,
-      transparent 90%
-    );
-    animation: ${Shimmer} 2s linear infinite;
-  }
-`;
-const ConnectorsContainer = styled.div `
-  transition: opacity 300ms ease;
-  min-width: fit-content;
-
-  ${(props) => props.$disabled &&
-    css `
-      pointer-events: none;
-      opacity: 0.4;
-    `}
-
-  ${(props) => !props.$mobile
-    ? css `
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-
-          ${ConnectorButton} {
-            ${styles.desktop.ConnectorButton}
-            ${ConnectorLabel} {
-              ${styles.desktop.ConnectorLabel}
-            }
-            ${ConnectorIcon} {
-              ${styles.desktop.ConnectorIcon}
-            }
-          }
-        `
-    : css `
-          display: flex;
-          align-items: flex-start;
-          justify-content: space-around;
-          gap: 22px 6px;
-          //margin: 0px -10px -20px;
-          padding: 14px 0px 28px;
-
-          ${ConnectorButton} {
-            flex-shrink: 0;
-            width: 80px;
-            ${styles.mobile.ConnectorButton}
-            ${ConnectorLabel} {
-              ${styles.mobile.ConnectorLabel}
-              ${RecentlyUsedTag} {
-                display: none;
-                width: fit-content;
-                margin: 0 auto;
-              }
-            }
-            ${ConnectorIcon} {
-              ${styles.mobile.ConnectorIcon}
-            }
-          }
-        `}
-`;
-
-export { ConnectorButton, ConnectorIcon, ConnectorLabel, ConnectorsContainer, RecentlyUsedTag };
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ConnectorList/styles.ts"],"sourcesContent":["import { css, keyframes } from \"styled-components\";\nimport styled from \"../../../styles/styled\";\nimport { motion } from \"framer-motion\";\nconst Shimmer = keyframes `\n  0%{ transform: translate(-100%) rotate(-45deg); }\n  100%{ transform: translate(100%) rotate(-80deg); }\n`;\nexport const ConnectorButton = styled(motion.button) `\n  display: block;\n  text-decoration: none;\n`;\nexport const ConnectorLabel = styled(motion.span) ``;\nexport const ConnectorIcon = styled(motion.div) ``;\n// This is a bit of a hack to not share styles between mobile and desktop\nconst styles = {\n    desktop: {\n        ConnectorButton: css `\n      cursor: pointer;\n      user-select: none;\n      position: relative;\n      display: flex;\n      align-items: center;\n      padding: 0 20px;\n      width: 100%;\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(\n        --ck-primary-button-background,\n        var(--fallback-background)\n      );\n      --box-shadow: var(\n        --ck-primary-button-box-shadow,\n        var(--fallback-box-shadow)\n      );\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        ConnectorLabel: css `\n      display: flex;\n      align-items: center;\n      gap: 9px;\n      width: 100%;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      padding: 2px 0;\n      padding-right: 38px;\n    `,\n        ConnectorIcon: css `\n      position: absolute;\n      right: 20px;\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\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    `,\n    },\n    mobile: {\n        ConnectorButton: css `\n      text-align: center;\n      background: none;\n      max-width: 100%;\n      overflow: hidden;\n    `,\n        ConnectorLabel: css `\n      display: block;\n      text-overflow: ellipsis;\n      max-width: 100%;\n      overflow: hidden;\n      padding: 10px 0 0;\n      color: var(--ck-body-color);\n      font-size: 13px;\n      line-height: 15px;\n      font-weight: 500;\n      opacity: 0.75;\n    `,\n        ConnectorIcon: css `\n      position: relative;\n      margin: 0 auto;\n      width: 60px;\n      height: 60px;\n      overflow: hidden;\n      svg,\n      img {\n        display: block;\n        position: relative;\n        width: 100%;\n        height: auto;\n      }\n      &[data-small=\"true\"] {\n        svg,\n        img {\n          transform: scale(0.8);\n        }\n      }\n\n      &[data-shape=\"squircle\"] {\n        border-radius: 22.5%;\n        &:before {\n          content: \"\";\n          z-index: -1;\n          position: absolute;\n          inset: 0;\n          border-radius: inherit;\n          box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);\n        }\n      }\n      &[data-shape=\"circle\"] {\n        border-radius: 100%;\n      }\n      &[data-shape=\"square\"] {\n        border-radius: 0;\n      }\n    `,\n    },\n};\nexport const RecentlyUsedTag = styled(motion.span) `\n  position: relative;\n  top: var(--ck-recent-badge-top-offset, 0.5px);\n  display: inline-block;\n  padding: 10px 7px;\n  line-height: 0;\n  font-size: 13px;\n  font-weight: 400;\n  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));\n  color: var(\n    --ck-recent-badge-color,\n    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))\n  );\n  background: var(--ck-recent-badge-background, transparent);\n  overflow: hidden;\n  span {\n    display: inline-block;\n    position: relative;\n  }\n  &:before {\n    z-index: 1;\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    opacity: 0.4;\n    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);\n    border-radius: inherit;\n  }\n  &:after {\n    z-index: 2;\n    content: \"\";\n    position: absolute;\n    inset: -10%;\n    top: -110%;\n    aspect-ratio: 1/1;\n    opacity: 0.7;\n    background: linear-gradient(\n      170deg,\n      transparent 10%,\n      var(--ck-recent-badge-background, var(--bg)) 50%,\n      transparent 90%\n    );\n    animation: ${Shimmer} 2s linear infinite;\n  }\n`;\nexport const ConnectorsContainer = styled.div `\n  transition: opacity 300ms ease;\n  min-width: fit-content;\n\n  ${(props) => props.$disabled &&\n    css `\n      pointer-events: none;\n      opacity: 0.4;\n    `}\n\n  ${(props) => !props.$mobile\n    ? css `\n          display: flex;\n          flex-direction: column;\n          gap: 12px;\n\n          ${ConnectorButton} {\n            ${styles.desktop.ConnectorButton}\n            ${ConnectorLabel} {\n              ${styles.desktop.ConnectorLabel}\n            }\n            ${ConnectorIcon} {\n              ${styles.desktop.ConnectorIcon}\n            }\n          }\n        `\n    : css `\n          display: flex;\n          align-items: flex-start;\n          justify-content: space-around;\n          gap: 22px 6px;\n          //margin: 0px -10px -20px;\n          padding: 14px 0px 28px;\n\n          ${ConnectorButton} {\n            flex-shrink: 0;\n            width: 80px;\n            ${styles.mobile.ConnectorButton}\n            ${ConnectorLabel} {\n              ${styles.mobile.ConnectorLabel}\n              ${RecentlyUsedTag} {\n                display: none;\n                width: fit-content;\n                margin: 0 auto;\n              }\n            }\n            ${ConnectorIcon} {\n              ${styles.mobile.ConnectorIcon}\n            }\n          }\n        `}\n`;\n"],"names":[],"mappings":";;;;AAGA,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC;AAC3B;AACA;AACA,CAAC,CAAC;AACU,MAAC,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AACtD;AACA;AACA,EAAE;AACU,MAAC,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;AACzC,MAAC,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;AACnD;AACA,MAAM,MAAM,GAAG;AACf,IAAI,OAAO,EAAE;AACb,QAAQ,eAAe,EAAE,GAAG,CAAC,CAAC;AAC9B;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,CAAC;AACL,QAAQ,cAAc,EAAE,GAAG,CAAC,CAAC;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,CAAC;AACL,QAAQ,aAAa,EAAE,GAAG,CAAC,CAAC;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,CAAC;AACL,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,QAAQ,eAAe,EAAE,GAAG,CAAC,CAAC;AAC9B;AACA;AACA;AACA;AACA,IAAI,CAAC;AACL,QAAQ,cAAc,EAAE,GAAG,CAAC,CAAC;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,CAAC;AACL,QAAQ,aAAa,EAAE,GAAG,CAAC,CAAC;AAC5B;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,IAAI,CAAC;AACL,KAAK;AACL,CAAC,CAAC;AACU,MAAC,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AACpD;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,EAAE,OAAO,CAAC;AACzB;AACA,EAAE;AACU,MAAC,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;AAC/C;AACA;AACA;AACA,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS;AAC9B,IAAI,GAAG,CAAC,CAAC;AACT;AACA;AACA,IAAI,CAAC,CAAC;AACN;AACA,EAAE,EAAE,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO;AAC7B,MAAM,GAAG,CAAC,CAAC;AACX;AACA;AACA;AACA;AACA,UAAU,EAAE,eAAe,CAAC;AAC5B,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC;AAC7C,YAAY,EAAE,cAAc,CAAC;AAC7B,cAAc,EAAE,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC;AAC9C;AACA,YAAY,EAAE,aAAa,CAAC;AAC5B,cAAc,EAAE,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC;AAC7C;AACA;AACA,QAAQ,CAAC;AACT,MAAM,GAAG,CAAC,CAAC;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,EAAE,eAAe,CAAC;AAC5B;AACA;AACA,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;AAC5C,YAAY,EAAE,cAAc,CAAC;AAC7B,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;AAC7C,cAAc,EAAE,eAAe,CAAC;AAChC;AACA;AACA;AACA;AACA;AACA,YAAY,EAAE,aAAa,CAAC;AAC5B,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC;AAC5C;AACA;AACA,QAAQ,CAAC,CAAC;AACV;;;;"}