@daimo/pay 0.3.21 → 1.0.0

package/build/src/components/Pages/Connectors/styles.js

@@ -0,0 +1,267 @@
+import { keyframes } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import { motion } from 'framer-motion';
+import { ModalBody } from '../../Common/Modal/styles.js';
+
+const Shimmer = keyframes `
+  0%{ transform: translate(-100%) rotate(-45deg); }
+  100%{ transform: translate(100%) rotate(-80deg); }
+`;
+const InfoBox = styled.div `
+  padding: 24px 24px 28px;
+  border-radius: var(--ck-tertiary-border-radius, 24px);
+  box-shadow: var(--ck-tertiary-box-shadow, none);
+  background: var(--ck-body-background-tertiary);
+  ${ModalBody} {
+    max-width: none;
+  }
+`;
+const InfoBoxButtons = styled.div `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin: 5px -8px -12px;
+  button {
+  }
+`;
+const LearnMoreContainer = styled(motion.div) `
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: -6px;
+`;
+const LearnMoreButton = 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);
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 500;
+  /* will-change: transform; */
+  transition:
+    color 200ms ease,
+    transform 100ms ease;
+  svg {
+    transition: all 100ms ease-out;
+    display: block;
+    position: relative;
+    top: 2px;
+    left: 2px;
+    transform: translateZ(0px);
+    path,
+    circle {
+      transition: all 100ms ease-out;
+    }
+    path:last-of-type {
+      transform-origin: 0 0;
+      transform: scaleX(1.3) skewY(-12deg);
+      opacity: 0;
+    }
+    circle {
+      transform: translate(20%, -15%);
+    }
+  }
+  &:hover {
+    color: var(--ck-body-color-muted-hover);
+    svg {
+      path,
+      circle {
+        opacity: 1;
+        transform: none;
+      }
+    }
+  }
+  &:active {
+    transform: scale(0.96);
+  }
+`;
+styled(motion.div) `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 0 16px;
+  overflow-y: scroll;
+  max-height: 20rem;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+styled(motion.button) `
+  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));
+    }
+  }
+`;
+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;
+  }
+`;
+styled(motion.span) `
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 2px 0;
+  padding-right: 38px;
+`;
+styled(motion.div) `
+  position: absolute;
+  right: 20px;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  svg,
+  img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: 27.5%;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export { InfoBox, InfoBoxButtons, LearnMoreButton, LearnMoreContainer };
+//# sourceMappingURL=styles.js.map

package/build/src/components/Pages/Connectors/styles.js.map

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

package/build/src/components/Pages/DownloadApp/index.js

@@ -0,0 +1,30 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { PageContent, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
+import CustomQRCode from '../../Common/CustomQRCode/index.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { useWallet } from '../../../wallets/useWallets.js';
+import { usePayContext } from '../../DaimoPay.js';
+
+const DownloadApp = () => {
+    const context = usePayContext();
+    const wallet = useWallet(context.connector.id);
+    const locales = useLocales({
+        CONNECTORNAME: wallet?.name,
+    });
+    if (!wallet)
+        return jsx(Fragment, { children: "Wallet not found" });
+    const downloads = {
+        ios: wallet.downloadUrls?.ios,
+        android: wallet.downloadUrls?.android,
+        redirect: wallet.downloadUrls?.download,
+    };
+    const bodycopy = downloads.ios && downloads.android
+        ? locales.downloadAppScreen_iosAndroid
+        : downloads.ios
+            ? locales.downloadAppScreen_ios
+            : locales.downloadAppScreen_android;
+    return (jsx(PageContent, { children: jsxs(ModalContent, { style: { paddingBottom: 4, gap: 14 }, children: [downloads.redirect && jsx(CustomQRCode, { value: downloads.redirect }), !downloads.redirect && jsx(Fragment, { children: "No download link available" }), jsx(ModalBody, { style: { fontSize: 15, lineHeight: "20px", padding: "0 12px" }, children: bodycopy })] }) }));
+};
+
+export { DownloadApp as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/DownloadApp/index.js.map

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

package/build/src/components/Pages/MobileConnectors/index.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Container, WalletList, WalletItem, WalletIcon, WalletLabel } from './styles.js';
+import { PageContent, ModalContent } from '../../Common/Modal/styles.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { useWalletConnectModal } from '../../../hooks/useWalletConnectModal.js';
+import { useWallets } from '../../../wallets/useWallets.js';
+import { walletConfigs } from '../../../wallets/walletConfigs.js';
+import CopyToClipboard from '../../Common/CopyToClipboard/index.js';
+import { ScrollArea } from '../../Common/ScrollArea/index.js';
+import { Spinner } from '../../Common/Spinner/index.js';
+import { useWeb3 } from '../../contexts/web3/index.js';
+import { usePayContext } from '../../DaimoPay.js';
+
+const MoreIcon = (jsx("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M30 42V19M19 30.5H42", stroke: "var(--ck-body-color-muted)", strokeWidth: "3", strokeLinecap: "round" }) }));
+const MobileConnectors = () => {
+    const context = usePayContext();
+    const locales = useLocales();
+    const { connect: { getUri }, } = useWeb3();
+    const wcUri = getUri();
+    const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
+    const wallets = useWallets();
+    // filter out installed wallets
+    const walletsIdsToDisplay = Object.keys(walletConfigs).filter((walletId) => {
+        const wallet = walletConfigs[walletId];
+        if (wallets.find((w) => w.connector.id === walletId))
+            return false;
+        if (!wallet.getWalletConnectDeeplink)
+            return false;
+        return true;
+    }) ?? [];
+    const connectWallet = (wallet) => {
+        const uri = wallet.getWalletConnectDeeplink?.(wcUri);
+        if (uri)
+            window.location.href = uri;
+        //if (uri) window.open(uri, '_blank');
+    };
+    return (jsx(PageContent, { style: { width: 312 }, children: jsxs(Container, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { "$disabled": !wcUri, children: [walletsIdsToDisplay
+                                    .sort(
+                                // sort by name
+                                (a, b) => {
+                                    const walletA = walletConfigs[a];
+                                    const walletB = walletConfigs[b];
+                                    const nameA = walletA.name ?? walletA.shortName ?? a;
+                                    const nameB = walletB.name ?? walletB.shortName ?? b;
+                                    return nameA.localeCompare(nameB);
+                                })
+                                    .filter((walletId) => !(walletId === "coinbaseWallet" ||
+                                    walletId === "com.coinbase.wallet"))
+                                    .map((walletId, i) => {
+                                    const wallet = walletConfigs[walletId];
+                                    const { name, shortName, iconConnector, icon } = wallet;
+                                    return (jsxs(WalletItem, { onClick: () => connectWallet(wallet), style: {
+                                            animationDelay: `${i * 50}ms`,
+                                        }, children: [jsx(WalletIcon, { "$outline": true, children: iconConnector ?? icon }), jsx(WalletLabel, { children: shortName ?? name })] }, i));
+                                }), jsxs(WalletItem, { onClick: openW3M, "$waiting": isOpenW3M, children: [jsx(WalletIcon, { style: { background: "var(--ck-body-background-secondary)" }, children: isOpenW3M ? (jsx("div", { style: {
+                                                    position: "absolute",
+                                                    inset: 0,
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                }, children: jsx("div", { style: {
+                                                        width: "50%",
+                                                    }, children: jsx(Spinner, {}) }) })) : (MoreIcon) }), jsx(WalletLabel, { children: locales.more })] })] }) }) }), context.options?.walletConnectCTA !== "modal" && (jsx("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        gap: 14,
+                        paddingTop: 8,
+                    }, children: jsx(CopyToClipboard, { variant: "button", string: wcUri, children: locales.copyToClipboard }) }))] }) }));
+};
+
+export { MobileConnectors as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/MobileConnectors/index.js.map

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

package/build/src/components/Pages/MobileConnectors/styles.js

@@ -0,0 +1,65 @@
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const WalletItem = styled.div `
+  text-align: center;
+  transition: opacity 100ms ease;
+  opacity: ${(props) => (props.$waiting ? 0.4 : 1)};
+`;
+const WalletIcon = styled.div `
+  z-index: 9;
+  position: relative;
+  margin: 0 auto 10px;
+  border-radius: 16px;
+  width: 60px;
+  height: 60px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.04);
+  ${(props) => props.$outline &&
+    `
+  &:before {
+    content: '';
+    z-index: 2;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
+  }`}
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
+`;
+const WalletLabel = styled.div `
+  color: var(--ck-body-color);
+  font-size: 13px;
+  line-height: 15px;
+  font-weight: 500;
+  opacity: 0.75;
+`;
+const PulseKeyframes = keyframes `
+  0%,100% { opacity:1; }
+  50% { opacity:0.5; }
+`;
+const WalletList = styled.div `
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 22px 8px;
+  margin: 0 -10px;
+  padding: 4px 0 0;
+  transition: opacity 300ms ease;
+  ${(props) => props.$disabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.4;
+      ${WalletItem} {
+        animation: ${PulseKeyframes} 1s infinite ease-in-out;
+      }
+    `}
+`;
+const Container = styled.div ``;
+
+export { Container, WalletIcon, WalletItem, WalletLabel, WalletList };
+//# sourceMappingURL=styles.js.map

package/build/src/components/Pages/MobileConnectors/styles.js.map

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

package/build/src/components/Pages/Onboarding/index.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Graphic, LogoGroup, Logo, LogoPosition, LogoInner, FloatWrapper, RotateWrapper, LogoGraphic, GraphicBackground } from './styles.js';
+import Logos from '../../../assets/logos.js';
+import wave from '../../../assets/wave.js';
+import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import useLocales from '../../../hooks/useLocales.js';
+import Button from '../../Common/Button/index.js';
+import { usePayContext } from '../../DaimoPay.js';
+
+const Introduction = () => {
+    const context = usePayContext();
+    const locales = useLocales({});
+    const ctaUrl = context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
+    return (jsxs(PageContent, { children: [jsxs(Graphic, { children: [jsxs(LogoGroup, { children: [jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Coinbase, { background: true }) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.MetaMask, { background: true }) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Trust, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.Argent, {}) }) }) }) }) }) }), jsx(Logo, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic, { children: jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), jsx(ModalBody, { children: locales.onboardingScreen_p })] }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
+};
+
+export { Introduction as default };
+//# sourceMappingURL=index.js.map

package/build/src/components/Pages/Onboarding/index.js.map

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

package/build/src/components/Pages/Onboarding/styles.js

@@ -0,0 +1,229 @@
+import { motion } from 'framer-motion';
+import { keyframes } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+
+const Graphic = styled(motion.div) `
+  position: relative;
+  margin: 16px auto 20px;
+  height: 190px;
+  max-width: 295px;
+  pointer-events: none;
+  user-select: none;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    height: 200px;
+    max-width: 100%;
+    margin-bottom: 32px;
+  }
+`;
+const LogoGroup = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+`;
+const graphicIn = keyframes `
+  0%{
+    opacity:0;
+    transform:scale(0.9);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+const GraphicBackground = styled(motion.div) `
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  top: -2px;
+  overflow: hidden;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--ck-body-background);
+    background: radial-gradient(
+      closest-side,
+      var(--ck-body-background-transparent, transparent) 18.75%,
+      var(--ck-body-background) 100%
+    );
+    background-size: 100%;
+  }
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  animation: ${graphicIn} 1000ms 100ms ease both;
+  // @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+  //   animation: none;
+  // }
+`;
+const logoIn = keyframes `
+  0%{
+    opacity:0;
+    transform:scale(0) translateY(40%);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+const LogoPosition = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-delay: inherit;
+`;
+const LogoInner = styled(motion.div) `
+  position: absolute;
+`;
+const LogoGraphic = styled(motion.div) `
+  position: relative;
+  overflow: hidden;
+  height: 58px;
+  width: 58px;
+  border-radius: 13.84px;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 2px 20px 0 rgba(0, 0, 0, 0.03);
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const float = keyframes `
+  0%,100%{ transform:none; }
+  50%{ transform: translateY(-10%) }
+`;
+const FloatWrapper = styled(motion.div) `
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${float};
+  animation-duration: 3600ms;
+`;
+const rotate = keyframes `
+  0%,100%{ transform:rotate(-3deg); }
+  50%{ transform:rotate(3deg); }
+`;
+const RotateWrapper = styled(motion.div) `
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${rotate};
+  animation-duration: 3200ms;
+`;
+const Logo = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+
+  animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;
+  &:nth-child(1) {
+    z-index: 2;
+    animation-delay: 0ms;
+  }
+  &:nth-child(2) {
+    z-index: 1;
+    animation-delay: 60ms;
+  }
+  &:nth-child(3) {
+    z-index: 1;
+    animation-delay: 30ms;
+  }
+  &:nth-child(4) {
+    z-index: 1;
+    animation-delay: 90ms;
+  }
+  &:nth-child(5) {
+    z-index: 1;
+    animation-delay: 120ms;
+  }
+
+  &:nth-child(1) {
+    ${RotateWrapper} {
+      animation-delay: 0ms;
+    }
+  }
+  &:nth-child(2) {
+    ${RotateWrapper} {
+      animation-delay: -600ms;
+    }
+  }
+  &:nth-child(3) {
+    ${RotateWrapper} {
+      animation-delay: -1200ms;
+    }
+  }
+  &:nth-child(4) {
+    ${RotateWrapper} {
+      animation-delay: -1800ms;
+    }
+  }
+  &:nth-child(5) {
+    ${RotateWrapper} {
+      animation-delay: -2400ms;
+    }
+  }
+
+  &:nth-child(1) {
+    ${FloatWrapper} {
+      animation-delay: -200ms;
+    }
+  }
+  &:nth-child(2) {
+    ${FloatWrapper} {
+      animation-delay: -600ms;
+    }
+  }
+  &:nth-child(3) {
+    ${FloatWrapper} {
+      animation-delay: -800ms;
+    }
+  }
+  &:nth-child(4) {
+    ${FloatWrapper} {
+      animation-delay: -300ms;
+    }
+  }
+  &:nth-child(5) {
+    ${FloatWrapper} {
+      animation-delay: -3200ms;
+    }
+  }
+
+  // @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+  //   animation: none !important;
+  //   ${RotateWrapper},${FloatWrapper} {
+  //     animation: none !important;
+  //   }
+  }
+
+  ${LogoInner} {
+    transform: translate(-50%, -50%);
+  }
+
+  &:nth-child(1) ${LogoPosition} {
+    transform: translate(50%, 50%);
+    ${LogoGraphic} {
+      border-radius: 17.2px;
+      width: 72px;
+      height: 72px;
+    }
+  }
+  &:nth-child(2) ${LogoPosition} {
+    transform: translate(21%, 21.5%);
+  }
+  &:nth-child(3) ${LogoPosition} {
+    transform: translate(78%, 14%);
+  }
+  &:nth-child(4) ${LogoPosition} {
+    transform: translate(22.5%, 76%);
+  }
+  &:nth-child(5) ${LogoPosition} {
+    transform: translate(76%, 80%);
+  }
+`;
+
+export { FloatWrapper, Graphic, GraphicBackground, Logo, LogoGraphic, LogoGroup, LogoInner, LogoPosition, RotateWrapper };
+//# sourceMappingURL=styles.js.map