@daimo/pay 1.18.3 → 1.19.0

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

@@ -0,0 +1,66 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { useState, useEffect } from 'react';
+import { keyframes } from 'styled-components';
+import useLocales from '../../../hooks/useLocales.js';
+import styled from '../../../styles/styled/index.js';
+
+const PoweredByFooter = ({
+  supportUrl,
+  showNeedHelpImmediately
+} = {}) => {
+  const [supportVisible, setSupportVisible] = useState(showNeedHelpImmediately);
+  const locales = useLocales();
+  useEffect(() => {
+    if (supportUrl == null) return;
+    const timer = setTimeout(() => {
+      setSupportVisible(true);
+    }, 2500);
+    return () => clearTimeout(timer);
+  }, [supportUrl]);
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(TextLink, { href: supportVisible ? supportUrl : void 0, children: /* @__PURE__ */ jsx("span", { children: supportVisible ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    "Need help? ",
+    /* @__PURE__ */ jsx(Underline, { children: "Contact support" })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    locales.poweredBy,
+    " Daimo Pay"
+  ] }) }) }) });
+};
+const Container = styled(motion.div)`
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: -4px;
+`;
+keyframes`
+  0%{ opacity:0; }
+  100%{ opacity:1; }
+`;
+const TextLink = styled.a`
+  appearance: none;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 42px;
+  padding: 0 16px;
+  border-radius: 6px;
+  background: none;
+  color: var(--ck-body-color-muted);
+  text-decoration-color: var(--ck-body-color-muted);
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 400;
+
+  span {
+    opacity: 1;
+    transition: opacity 300ms ease;
+  }
+`;
+const Underline = styled(motion.span)`
+  text-underline-offset: 2px;
+  text-decoration: underline;
+`;
+
+export { PoweredByFooter as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/PoweredByFooter/index.tsx"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\nimport { keyframes } from \"styled-components\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport styled from \"../../../styles/styled\";\n\nconst PoweredByFooter = ({\n  supportUrl,\n  showNeedHelpImmediately,\n}: { supportUrl?: string; showNeedHelpImmediately?: boolean } = {}) => {\n  const [supportVisible, setSupportVisible] = useState(showNeedHelpImmediately);\n  const locales = useLocales();\n  useEffect(() => {\n    if (supportUrl == null) return;\n    // Show the support link after delay\n    const timer = setTimeout(() => {\n      setSupportVisible(true);\n    }, 2500);\n    return () => clearTimeout(timer);\n  }, [supportUrl]);\n\n  return (\n    <Container>\n      <TextLink href={supportVisible ? supportUrl : undefined}>\n        <span>\n          {supportVisible ? (\n            <>\n              Need help? <Underline>Contact support</Underline>\n            </>\n          ) : (\n            <>{locales.poweredBy} Daimo Pay</>\n          )}\n        </span>\n      </TextLink>\n    </Container>\n  );\n};\n\nconst Container = styled(motion.div)`\n  text-align: center;\n  margin-top: 16px;\n  margin-bottom: -4px;\n`;\n\nconst fadeIn = keyframes`\n  0%{ opacity:0; }\n  100%{ opacity:1; }\n`;\n\nconst TextLink = styled.a`\n  appearance: none;\n  user-select: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  height: 42px;\n  padding: 0 16px;\n  border-radius: 6px;\n  background: none;\n  color: var(--ck-body-color-muted);\n  text-decoration-color: var(--ck-body-color-muted);\n  font-size: 15px;\n  line-height: 18px;\n  font-weight: 400;\n\n  span {\n    opacity: 1;\n    transition: opacity 300ms ease;\n  }\n`;\n\nconst Underline = styled(motion.span)`\n  text-underline-offset: 2px;\n  text-decoration: underline;\n`;\n\nexport default PoweredByFooter;\n"],"names":[],"mappings":";;;;;;;AAMA,MAAM,kBAAkB,CAAC;AAAA,EACvB,UAAA;AAAA,EACA,uBAAA;AACF,CAAA,GAAgE,EAAO,KAAA;AACrE,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,uBAAuB,CAAA,CAAA;AAC5E,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAC3B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,cAAc,IAAM,EAAA,OAAA;AAExB,IAAM,MAAA,KAAA,GAAQ,WAAW,MAAM;AAC7B,MAAA,iBAAA,CAAkB,IAAI,CAAA,CAAA;AAAA,OACrB,IAAI,CAAA,CAAA;AACP,IAAO,OAAA,MAAM,aAAa,KAAK,CAAA,CAAA;AAAA,GACjC,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EACE,uBAAA,GAAA,CAAC,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,IAAA,EAAM,cAAiB,GAAA,UAAA,GAAa,KAC5C,CAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,MACE,EAAA,EAAA,QAAA,EAAA,cAAA,mBACG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,aAAA;AAAA,oBACW,GAAA,CAAC,aAAU,QAAe,EAAA,iBAAA,EAAA,CAAA;AAAA,GAAA,EACvC,oBAEG,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAQ,OAAA,CAAA,SAAA;AAAA,IAAU,YAAA;AAAA,GAAU,EAAA,CAAA,EAEnC,GACF,CACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,SAAA,GAAY,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMpB,SAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKf,MAAM,WAAW,MAAO,CAAA,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAuBxB,MAAM,SAAA,GAAY,MAAO,CAAA,MAAA,CAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

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

@@ -0,0 +1,120 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { isMobile } from '../../../utils/index.js';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import { ScrollContainer, ScrollAreaContainer, MoreIndicator } from './styles.js';
+
+const ArrowDown = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "11",
+    height: "12",
+    viewBox: "0 0 11 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7",
+        stroke: "currentColor",
+        strokeWidth: "1.75",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+const ScrollArea = ({
+  children,
+  height,
+  backgroundColor,
+  mobileDirection,
+  hideBottomLine = false,
+  totalItems
+}) => {
+  const locales = useLocales();
+  const { log } = usePayContext();
+  const ref = useRef(null);
+  const moreRef = useRef(null);
+  const isMobileFormat = isMobile() || window?.innerWidth < defaultTheme.mobileWidth;
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (el.scrollHeight > el.clientHeight) {
+      if (moreRef.current) {
+        moreRef.current.classList.remove("hide");
+      }
+    }
+    log(`[SCROLL AREA]: ${el.scrollHeight}, ${el.clientHeight}`);
+    const handleScroll = (e) => {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+        scrollLeft,
+        scrollWidth,
+        clientWidth
+      } = e.target;
+      if (moreRef.current) {
+        if (scrollTop > 0) {
+          moreRef.current.classList.add("hide");
+        }
+      }
+      if (scrollTop === 0 && scrollLeft === 0) {
+        el.classList.add("scroll-start");
+      } else {
+        el.classList.remove("scroll-start");
+      }
+      if (scrollHeight - scrollTop === clientHeight && scrollWidth - scrollLeft === clientWidth) {
+        el.classList.add("scroll-end");
+      } else {
+        el.classList.remove("scroll-end");
+      }
+    };
+    el.addEventListener("scroll", handleScroll);
+    handleScroll({ target: el });
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  }, [ref.current]);
+  return /* @__PURE__ */ jsxs(ScrollContainer, { children: [
+    /* @__PURE__ */ jsx(
+      ScrollAreaContainer,
+      {
+        ref,
+        $mobile: isMobileFormat,
+        $height: height,
+        $backgroundColor: backgroundColor,
+        $mobileDirection: mobileDirection,
+        $hideBottomLine: hideBottomLine,
+        $totalItems: totalItems,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MoreIndicator,
+      {
+        ref: moreRef,
+        className: "hide",
+        onClick: () => {
+          if (ref.current) {
+            ref.current.scrollTo({
+              top: ref.current.scrollHeight,
+              behavior: "smooth"
+            });
+          }
+        },
+        children: /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx(ArrowDown, {}),
+          " ",
+          locales.moreAvailable
+        ] })
+      }
+    )
+  ] });
+};
+
+export { ScrollArea };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/ScrollArea/index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport { isMobile } from \"../../../utils\";\nimport defaultTheme from \"./../../../constants/defaultTheme\";\nimport { MoreIndicator, ScrollAreaContainer, ScrollContainer } from \"./styles\";\n\nconst ArrowDown = () => (\n  <svg\n    width=\"11\"\n    height=\"12\"\n    viewBox=\"0 0 11 12\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\nexport const ScrollArea = ({\n  children,\n  height,\n  backgroundColor,\n  mobileDirection,\n  hideBottomLine = false,\n  totalItems,\n}: {\n  children: React.ReactNode;\n  height?: number;\n  backgroundColor?: string;\n  mobileDirection?: \"horizontal\" | \"vertical\";\n  hideBottomLine?: boolean;\n  totalItems?: number;\n}) => {\n  const locales = useLocales();\n  const { log } = usePayContext();\n  const ref = useRef<HTMLDivElement>(null);\n  const moreRef = useRef<HTMLDivElement>(null);\n\n  const isMobileFormat =\n    isMobile() || window?.innerWidth < defaultTheme.mobileWidth;\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    // if ref is not scrollable, hide the more indicator\n    if (el.scrollHeight > el.clientHeight) {\n      if (moreRef.current) {\n        moreRef.current.classList.remove(\"hide\");\n      }\n    }\n    log(`[SCROLL AREA]: ${el.scrollHeight}, ${el.clientHeight}`);\n\n    const handleScroll = (e: any) => {\n      const {\n        scrollTop,\n        scrollHeight,\n        clientHeight,\n        scrollLeft,\n        scrollWidth,\n        clientWidth,\n      } = e.target;\n\n      if (moreRef.current) {\n        if (scrollTop > 0) {\n          moreRef.current.classList.add(\"hide\");\n        }\n      }\n\n      if (scrollTop === 0 && scrollLeft === 0) {\n        el.classList.add(\"scroll-start\");\n      } else {\n        el.classList.remove(\"scroll-start\");\n      }\n\n      if (\n        scrollHeight - scrollTop === clientHeight &&\n        scrollWidth - scrollLeft === clientWidth\n      ) {\n        el.classList.add(\"scroll-end\");\n      } else {\n        el.classList.remove(\"scroll-end\");\n      }\n    };\n\n    el.addEventListener(\"scroll\", handleScroll);\n    handleScroll({ target: el });\n\n    return () => {\n      el.removeEventListener(\"scroll\", handleScroll);\n    };\n  }, [ref.current]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <ScrollContainer>\n      <ScrollAreaContainer\n        ref={ref}\n        $mobile={isMobileFormat}\n        $height={height}\n        $backgroundColor={backgroundColor}\n        $mobileDirection={mobileDirection}\n        $hideBottomLine={hideBottomLine}\n        $totalItems={totalItems}\n      >\n        {children}\n      </ScrollAreaContainer>\n      <MoreIndicator\n        ref={moreRef}\n        className=\"hide\"\n        onClick={() => {\n          if (ref.current) {\n            ref.current.scrollTo({\n              top: ref.current.scrollHeight,\n              behavior: \"smooth\",\n            });\n          }\n        }}\n      >\n        <span>\n          <ArrowDown /> {locales.moreAvailable}\n        </span>\n      </MoreIndicator>\n    </ScrollContainer>\n  );\n};\n"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Common/ScrollArea/styles.ts"],"sourcesContent":["import { css, keyframes } from \"styled-components\";\nimport styled from \"../../../styles/styled\";\n\nexport const ScrollContainer = styled.div`\n  position: relative;\n`;\nconst fadeIn = keyframes`\n0%{ opacity:0; }\n100%{ opacity:1; }\n`;\n\nexport const MoreIndicator = styled.div`\n  z-index: 9;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0.75rem;\n  display: flex;\n  justify-content: center;\n\n  transition: opacity 300ms ease;\n\n  span {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n    padding: 0.3075rem 0.9375rem 0.375rem;\n    border-radius: 6rem;\n    background: var(--ck-tooltip-background);\n    color: var(--ck-tooltip-color);\n    font-weight: 500;\n    font-size: 0.8125rem;\n    letter-spacing: -0.01rem;\n    box-shadow: var(--ck-tooltip-shadow);\n    animation: ${fadeIn} 300ms ease 1000ms both;\n\n    transition: transform 100ms ease;\n\n    &:hover {\n      transform: scale(1.02);\n    }\n    &:active {\n      transform: scale(0.98);\n    }\n    svg {\n      display: block;\n      transform: translateX(-0.1875rem);\n    }\n  }\n\n  &.hide {\n    opacity: 0;\n    pointer-events: none;\n  }\n`;\n\nexport const ScrollAreaContainer = styled.div<{\n  $mobile?: boolean;\n  $height?: number;\n  $backgroundColor?: string;\n  $hideBottomLine?: boolean;\n  $totalItems: number;\n}>`\n  --bg: ${({ $backgroundColor }) =>\n    $backgroundColor || \"var(--ck-body-background)\"};\n  --fade-height-top: 1px;\n  --fade-height-bottom: ${(props) =>\n    props.$hideBottomLine && props.$totalItems > 2 ? \"32px\" : \"1px\"};\n  position: relative;\n  z-index: 1;\n\n  ${({ $mobile, $height, $mobileDirection, $hideBottomLine }) =>\n    $mobile && $mobileDirection === \"horizontal\"\n      ? css`\n          overflow-x: scroll;\n          margin: 0 -24px;\n          padding: 0 24px;\n\n          &:before,\n          &:after {\n            pointer-events: none;\n            z-index: 10;\n            content: \"\";\n            display: block;\n            position: sticky;\n            top: 0;\n            bottom: 0;\n            width: var(--fade-height-bottom);\n            background: var(\n              --ck-body-divider-secondary,\n              var(--ck-body-divider)\n            );\n            box-shadow: var(--ck-body-divider-box-shadow);\n            transition: opacity 300ms ease;\n          }\n          &:before {\n            left: 0;\n          }\n          &:after {\n            right: 0;\n          }\n\n          &.scroll-start {\n            &:before {\n              opacity: 0;\n            }\n          }\n\n          &.scroll-end {\n            &:after {\n              opacity: 0;\n            }\n          }\n        `\n      : css`\n          max-height: ${$height ? `${$height}px` : \"310px\"};\n          overflow-y: scroll;\n          padding: 0 10px;\n          margin: calc(var(--fade-height-top) * -1) -16px 0 -10px;\n\n          &:before,\n          &:after {\n            pointer-events: none;\n            z-index: 10;\n            content: \"\";\n            display: block;\n            position: sticky;\n            left: 0;\n            right: 0;\n          }\n          &:before {\n            top: 0;\n            height: var(--fade-height-top);\n            background: var(\n              --ck-body-divider-secondary,\n              var(--ck-body-divider)\n            );\n            box-shadow: var(--ck-body-divider-box-shadow);\n          }\n          &:after {\n            bottom: 0;\n            height: var(--fade-height-bottom);\n            background: ${$hideBottomLine\n              ? \"linear-gradient(to bottom, transparent, var(--bg))\"\n              : \"var(--ck-body-divider-secondary, var(--ck-body-divider))\"};\n            box-shadow: none;\n          }\n\n          &.scroll-start {\n            &:before {\n              opacity: 0;\n            }\n          }\n\n          &.scroll-end {\n            &:after {\n              opacity: 0;\n            }\n          }\n        `}\n\n  &::-webkit-scrollbar {\n    width: 6px;\n    height: 6px;\n  }\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: rgba(0, 0, 0, 0);\n    border-radius: 100px;\n  }\n  &:hover::-webkit-scrollbar-thumb {\n    background: var(--ck-body-color-muted);\n  }\n  &::-webkit-scrollbar-thumb:hover {\n    background: var(--ck-body-color-muted-hover);\n  }\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,kBAAkB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA,EAAA;AAGtC,MAAM,MAAS,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAKR,MAAM,gBAAgB,MAAO,CAAA,GAAA,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,eAAA,EAyBnB,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAsBhB,MAAM,sBAAsB,MAAO,CAAA,GAAA,CAAA;AAAA,QAAA,EAOhC,CAAC,EAAE,gBAAiB,EAAA,KAC1B,oBAAoB,2BAA2B,CAAA;AAAA;AAAA,wBAEzB,EAAA,CAAC,UACvB,KAAM,CAAA,eAAA,IAAmB,MAAM,WAAc,GAAA,CAAA,GAAI,SAAS,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA,EAI/D,EAAA,CAAC,EAAE,OAAS,EAAA,OAAA,EAAS,kBAAkB,eAAgB,EAAA,KACvD,OAAW,IAAA,gBAAA,KAAqB,YAC5B,GAAA,GAAA,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,QAyCA,CAAA,GAAA,GAAA,CAAA;AAAA,sBAAA,EACgB,OAAU,GAAA,CAAA,EAAG,OAAO,CAAA,EAAA,CAAA,GAAO,OAAO,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,wBA2BhC,EAAA,eAAA,GACV,uDACA,0DAA0D,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAejE,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1,96 @@
+import { jsx } from 'react/jsx-runtime';
+import { ExternalPaymentOptions } from '@daimo/pay-common';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useAccount, useDisconnect } from 'wagmi';
+import { Phantom, MetaMask, Rainbow, Rabby } from '../../../assets/logos.js';
+import { ROUTES } from '../../../constants/routes.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import styled from '../../../styles/styled/index.js';
+import { OptionsList } from '../OptionsList/index.js';
+
+const OptionsContainer = styled.div`
+  width: 100%;
+  margin-top: 1rem;
+`;
+function SelectAnotherMethodButton() {
+  const locales = useLocales();
+  const { paymentState, setRoute } = usePayContext();
+  const { externalPaymentOptions } = paymentState;
+  const { connector } = useAccount();
+  const { disconnectAsync } = useDisconnect();
+  const { disconnect: disconnectSolana } = useWallet();
+  const allPaymentOptions = Array.from(
+    externalPaymentOptions.options.values()
+  ).flat();
+  const uniquePaymentOption = paymentState.buttonProps?.uniquePaymentOption;
+  const createIconDiv = (content, key) => /* @__PURE__ */ jsx("div", { style: { borderRadius: "22.5%", overflow: "hidden" }, children: content }, key);
+  const getWalletIcons = (connector2) => {
+    const connectorId = connector2?.id.toLowerCase();
+    const walletTypes = [
+      { component: /* @__PURE__ */ jsx(MetaMask, {}), id: "metamask" },
+      { component: /* @__PURE__ */ jsx(Rainbow, {}), id: "rainbow" },
+      { component: /* @__PURE__ */ jsx(Rabby, {}), id: "rabby" }
+    ];
+    const icons = walletTypes.filter(({ id }) => !connectorId?.includes(id)).map(({ component }) => component);
+    if (icons.length < 3) icons.push(/* @__PURE__ */ jsx(Phantom, {}));
+    return icons;
+  };
+  const getPaymentMethodIcons = () => {
+    const icons = [];
+    icons.push(
+      createIconDiv(
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: "https://pay.daimo.com/chain-logos/tronusdt.svg",
+            alt: "TRON USDT"
+          }
+        ),
+        "tron-usdt"
+      )
+    );
+    const externalIcons = allPaymentOptions.filter((option) => option.id !== ExternalPaymentOptions.Daimo).slice(0, 1).map(
+      (option) => createIconDiv(
+        typeof option.logoURI === "string" ? /* @__PURE__ */ jsx("img", { src: option.logoURI, alt: option.id }) : option.logoURI,
+        option.id
+      )
+    );
+    icons.push(...externalIcons);
+    if (icons.length < 3) {
+      const walletIcons = getWalletIcons(connector);
+      const remainingSlots = 3 - icons.length;
+      icons.push(...walletIcons.slice(0, remainingSlots));
+    }
+    return icons.slice(0, 3);
+  };
+  const selectMethodOption = {
+    id: "select-method",
+    title: locales.payWithAnotherMethod,
+    icons: getPaymentMethodIcons(),
+    onClick: () => setRoute(ROUTES.SELECT_METHOD)
+  };
+  const selectWalletOption = {
+    id: "select-wallet",
+    title: locales.payWithAnotherWallet,
+    icons: getWalletIcons(connector),
+    onClick: async () => {
+      await disconnectAsync();
+      await disconnectSolana();
+      setRoute(ROUTES.CONNECTORS);
+    }
+  };
+  return /* @__PURE__ */ jsx(OptionsContainer, { children: /* @__PURE__ */ jsx(
+    OptionsList,
+    {
+      options: (
+        // If there are non-wallet payment options, show the full select
+        // method menu. Otherwise, show the wallet menu.
+        allPaymentOptions.length > 0 && uniquePaymentOption !== "Wallets" ? [selectMethodOption] : [selectWalletOption]
+      )
+    }
+  ) });
+}
+
+export { SelectAnotherMethodButton as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/SelectAnotherMethodButton/index.tsx"],"sourcesContent":["import { ExternalPaymentOptions } from \"@daimo/pay-common\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { Connector, useAccount, useDisconnect } from \"wagmi\";\nimport { MetaMask, Phantom, Rabby, Rainbow } from \"../../../assets/logos\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport styled from \"../../../styles/styled\";\nimport { OptionsList } from \"../OptionsList\";\n\nconst OptionsContainer = styled.div`\n  width: 100%;\n  margin-top: 1rem;\n`;\n\nexport default function SelectAnotherMethodButton() {\n  const locales = useLocales();\n  const { paymentState, setRoute } = usePayContext();\n  const { externalPaymentOptions } = paymentState;\n  const { connector } = useAccount();\n  const { disconnectAsync } = useDisconnect();\n  const { disconnect: disconnectSolana } = useWallet();\n\n  const allPaymentOptions = Array.from(\n    externalPaymentOptions.options.values(),\n  ).flat();\n  const uniquePaymentOption = paymentState.buttonProps?.uniquePaymentOption;\n\n  const createIconDiv = (content: React.ReactNode, key: string) => (\n    <div key={key} style={{ borderRadius: \"22.5%\", overflow: \"hidden\" }}>\n      {content}\n    </div>\n  );\n\n  const getWalletIcons = (connector: Connector | undefined) => {\n    const connectorId = connector?.id.toLowerCase();\n    const walletTypes = [\n      { component: <MetaMask />, id: \"metamask\" },\n      { component: <Rainbow />, id: \"rainbow\" },\n      { component: <Rabby />, id: \"rabby\" },\n    ];\n\n    const icons = walletTypes\n      .filter(({ id }) => !connectorId?.includes(id))\n      .map(({ component }) => component);\n\n    if (icons.length < 3) icons.push(<Phantom />);\n    return icons;\n  };\n\n  const getPaymentMethodIcons = () => {\n    const icons: JSX.Element[] = [];\n\n    // Add TRON USDT as first priority\n    icons.push(\n      createIconDiv(\n        <img\n          src=\"https://pay.daimo.com/chain-logos/tronusdt.svg\"\n          alt=\"TRON USDT\"\n        />,\n        \"tron-usdt\",\n      ),\n    );\n\n    // Add external payment options\n    const externalIcons = allPaymentOptions\n      .filter((option) => option.id !== ExternalPaymentOptions.Daimo)\n      .slice(0, 1)\n      .map((option) =>\n        createIconDiv(\n          typeof option.logoURI === \"string\" ? (\n            <img src={option.logoURI} alt={option.id} />\n          ) : (\n            option.logoURI\n          ),\n          option.id,\n        ),\n      );\n\n    icons.push(...externalIcons);\n\n    // Fill remaining slots with wallet icons\n    if (icons.length < 3) {\n      const walletIcons = getWalletIcons(connector);\n      const remainingSlots = 3 - icons.length;\n      icons.push(...walletIcons.slice(0, remainingSlots));\n    }\n\n    return icons.slice(0, 3);\n  };\n\n  const selectMethodOption = {\n    id: \"select-method\",\n    title: locales.payWithAnotherMethod,\n    icons: getPaymentMethodIcons(),\n    onClick: () => setRoute(ROUTES.SELECT_METHOD),\n  };\n\n  const selectWalletOption = {\n    id: \"select-wallet\",\n    title: locales.payWithAnotherWallet,\n    icons: getWalletIcons(connector),\n    onClick: async () => {\n      await disconnectAsync();\n      await disconnectSolana();\n      setRoute(ROUTES.CONNECTORS);\n    },\n  };\n\n  return (\n    <OptionsContainer>\n      <OptionsList\n        options={\n          // If there are non-wallet payment options, show the full select\n          // method menu. Otherwise, show the wallet menu.\n          allPaymentOptions.length > 0 && uniquePaymentOption !== \"Wallets\"\n            ? [selectMethodOption]\n            : [selectWalletOption]\n        }\n      />\n    </OptionsContainer>\n  );\n}\n"],"names":["connector"],"mappings":"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"}

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

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SpinnerContainer } from './styles.js';
+
+const transition = {
+  duration: 0.4,
+  ease: [0.175, 0.885, 0.32, 0.98]
+};
+const Spinner = () => /* @__PURE__ */ jsx(
+  SpinnerContainer,
+  {
+    initial: { opacity: 0, rotate: 180 },
+    animate: {
+      opacity: 1,
+      rotate: 0
+    },
+    exit: {
+      position: "absolute",
+      opacity: 0,
+      rotate: -180,
+      transition: {
+        ...transition
+      }
+    },
+    transition: {
+      ...transition,
+      delay: 0.2
+    },
+    children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "9",
+              cy: "9",
+              r: "7",
+              stroke: "currentColor",
+              strokeOpacity: "0.1",
+              strokeWidth: "2.5"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M16 9C16 5.13401 12.866 2 9 2",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round"
+            }
+          )
+        ]
+      }
+    )
+  }
+);
+
+export { Spinner };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/Spinner/index.tsx"],"sourcesContent":["import { SpinnerContainer } from \"./styles\";\n\nconst transition = {\n  duration: 0.4,\n  ease: [0.175, 0.885, 0.32, 0.98],\n};\n\nexport const Spinner = () => (\n  <SpinnerContainer\n    initial={{ opacity: 0, rotate: 180 }}\n    animate={{\n      opacity: 1,\n      rotate: 0,\n    }}\n    exit={{\n      position: \"absolute\",\n      opacity: 0,\n      rotate: -180,\n      transition: {\n        ...transition,\n      },\n    }}\n    transition={{\n      ...transition,\n      delay: 0.2,\n    }}\n  >\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 18 18\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle\n        cx=\"9\"\n        cy=\"9\"\n        r=\"7\"\n        stroke=\"currentColor\"\n        strokeOpacity=\"0.1\"\n        strokeWidth=\"2.5\"\n      />\n      <path\n        d=\"M16 9C16 5.13401 12.866 2 9 2\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  </SpinnerContainer>\n);\n"],"names":[],"mappings":";;;AAEA,MAAM,UAAa,GAAA;AAAA,EACjB,QAAU,EAAA,GAAA;AAAA,EACV,IAAM,EAAA,CAAC,KAAO,EAAA,KAAA,EAAO,MAAM,IAAI,CAAA;AACjC,CAAA,CAAA;AAEO,MAAM,UAAU,sBACrB,GAAA;AAAA,EAAC,gBAAA;AAAA,EAAA;AAAA,IACC,OAAS,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,QAAQ,GAAI,EAAA;AAAA,IACnC,OAAS,EAAA;AAAA,MACP,OAAS,EAAA,CAAA;AAAA,MACT,MAAQ,EAAA,CAAA;AAAA,KACV;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,QAAU,EAAA,UAAA;AAAA,MACV,OAAS,EAAA,CAAA;AAAA,MACT,MAAQ,EAAA,CAAA,GAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACV,GAAG,UAAA;AAAA,OACL;AAAA,KACF;AAAA,IACA,UAAY,EAAA;AAAA,MACV,GAAG,UAAA;AAAA,MACH,KAAO,EAAA,GAAA;AAAA,KACT;AAAA,IAEA,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,IAAA;AAAA,QACN,MAAO,EAAA,IAAA;AAAA,QACP,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,MAAA;AAAA,QACL,KAAM,EAAA,4BAAA;AAAA,QAEN,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,EAAG,EAAA,GAAA;AAAA,cACH,EAAG,EAAA,GAAA;AAAA,cACH,CAAE,EAAA,GAAA;AAAA,cACF,MAAO,EAAA,cAAA;AAAA,cACP,aAAc,EAAA,KAAA;AAAA,cACd,WAAY,EAAA,KAAA;AAAA,aAAA;AAAA,WACd;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,CAAE,EAAA,+BAAA;AAAA,cACF,MAAO,EAAA,cAAA;AAAA,cACP,WAAY,EAAA,KAAA;AAAA,cACZ,aAAc,EAAA,OAAA;AAAA,aAAA;AAAA,WAChB;AAAA,SAAA;AAAA,OAAA;AAAA,KACF;AAAA,GAAA;AACF;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Common/Spinner/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { keyframes } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nconst Spin = keyframes`\n  0%{ transform: rotate(0deg); }\n  100%{ transform: rotate(360deg); }\n`;\nexport const SpinnerContainer = styled(motion.div)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  animation: ${Spin} 1s linear infinite;\n  svg {\n    display: block;\n    position: relative;\n    animation: ${Spin} 1s ease-in-out infinite;\n  }\n`;\n"],"names":[],"mappings":";;;;AAIA,MAAM,IAAO,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAIA,MAAA,gBAAA,GAAmB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,aAAA,EAIlC,IAAI,CAAA;AAAA;AAAA;AAAA;AAAA,eAAA,EAIF,IAAI,CAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { SwitchIcon } from '../../../assets/icons.js';
+import styled from '../../../styles/styled/index.js';
+
+const Container = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  width: fit-content;
+  background: transparent;
+`;
+const IconWrapper = styled.div`
+  opacity: ${({ $isFlipped }) => $isFlipped ? 1 : 1};
+  transform: scaleY(${({ $isFlipped }) => $isFlipped ? -1 : 1});
+  transition: all 0.2s ease-in-out;
+
+  &.fade {
+    opacity: 0;
+    transform: scaleY(0);
+  }
+`;
+const SwitchButton = ({ onClick, children }) => {
+  const [isFlipped, setIsFlipped] = useState(false);
+  const [isFading, setIsFading] = useState(false);
+  const handleClick = () => {
+    setIsFading(true);
+    setTimeout(() => {
+      setIsFlipped(!isFlipped);
+      setIsFading(false);
+    }, 150);
+    onClick();
+  };
+  return /* @__PURE__ */ jsxs(Container, { onClick: handleClick, children: [
+    /* @__PURE__ */ jsx(IconWrapper, { $isFlipped: isFlipped, className: isFading ? "fade" : "", children: /* @__PURE__ */ jsx(SwitchIcon, {}) }),
+    children
+  ] });
+};
+
+export { SwitchButton as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/SwitchButton/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { SwitchIcon as Icon } from \"../../../assets/icons\";\nimport styled from \"../../../styles/styled\";\n\nconst Container = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  cursor: pointer;\n  width: fit-content;\n  background: transparent;\n`;\n\nconst IconWrapper = styled.div<{ $isFlipped: boolean }>`\n  opacity: ${({ $isFlipped }) => ($isFlipped ? 1 : 1)};\n  transform: scaleY(${({ $isFlipped }) => ($isFlipped ? -1 : 1)});\n  transition: all 0.2s ease-in-out;\n\n  &.fade {\n    opacity: 0;\n    transform: scaleY(0);\n  }\n`;\n\nconst SwitchButton: React.FC<{\n  onClick: () => void;\n  children?: React.ReactNode;\n}> = ({ onClick, children }) => {\n  const [isFlipped, setIsFlipped] = useState(false);\n  const [isFading, setIsFading] = useState(false);\n\n  const handleClick = () => {\n    setIsFading(true);\n    setTimeout(() => {\n      setIsFlipped(!isFlipped);\n      setIsFading(false);\n    }, 150); // Match the transition duration\n    onClick();\n  };\n\n  return (\n    <Container onClick={handleClick}>\n      <IconWrapper $isFlipped={isFlipped} className={isFading ? \"fade\" : \"\"}>\n        <Icon />\n      </IconWrapper>\n      {children}\n    </Container>\n  );\n};\n\nexport default SwitchButton;\n"],"names":["Icon"],"mappings":";;;;;AAIA,MAAM,YAAY,MAAO,CAAA,MAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAUzB,MAAM,cAAc,MAAO,CAAA,GAAA,CAAA;AAAA,WAAA,EACd,CAAC,EAAE,UAAA,EAAkB,KAAA,UAAA,GAAa,IAAI,CAAE,CAAA;AAAA,oBAAA,EAC/B,CAAC,EAAE,UAAA,EAAkB,KAAA,UAAA,GAAa,KAAK,CAAE,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAS/D,MAAM,YAGD,GAAA,CAAC,EAAE,OAAA,EAAS,UAAe,KAAA;AAC9B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAChD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE9C,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,YAAA,CAAa,CAAC,SAAS,CAAA,CAAA;AACvB,MAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,OAChB,GAAG,CAAA,CAAA;AACN,IAAQ,OAAA,EAAA,CAAA;AAAA,GACV,CAAA;AAEA,EACE,uBAAA,IAAA,CAAC,SAAU,EAAA,EAAA,OAAA,EAAS,WAClB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,WAAA,EAAA,EAAY,YAAY,SAAW,EAAA,SAAA,EAAW,WAAW,MAAS,GAAA,EAAA,EACjE,QAAC,kBAAA,GAAA,CAAAA,UAAA,EAAA,EAAK,CACR,EAAA,CAAA;AAAA,IACC,QAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}