@multiplatform.one/web3 5.0.27

package/dist/esm/connectkit/components/ConnectModal/ConnectWithInjector/index.native.js

@@ -0,0 +1,411 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { AnimatePresence } from "framer-motion";
+import { Container, ConnectingContainer, ConnectingAnimation, RetryButton, RetryIconContainer, Content } from "./styles.native.js";
+import { PageContent, ModalHeading, ModalBody, ModalH1, ModalContentContainer, ModalContent } from "../../Common/Modal/styles.native.js";
+import Button from "../../Common/Button/index.native.js";
+import Tooltip from "../../Common/Tooltip/index.native.js";
+import Alert from "../../Common/Alert/index.native.js";
+import SquircleSpinner from "./SquircleSpinner/index.native.js";
+import { RetryIconCircle } from "../../../assets/icons.native.js";
+import BrowserIcon from "../../Common/BrowserIcon/index.native.js";
+import { AlertIcon, TickIcon } from "../../../assets/icons.native.js";
+import { detectBrowser, isWalletConnectConnector } from "../../../utils/index.native.js";
+import useLocales from "../../../hooks/useLocales.native.js";
+import { useConnect } from "../../../hooks/useConnect.native.js";
+import { useContext } from "../../ConnectKit.native.js";
+import { useWallet } from "../../../wallets/useWallets.native.js";
+import CircleSpinner from "./CircleSpinner/index.native.js";
+var states = {
+  CONNECTED: "connected",
+  CONNECTING: "connecting",
+  EXPIRING: "expiring",
+  FAILED: "failed",
+  REJECTED: "rejected",
+  NOTCONNECTED: "notconnected",
+  UNAVAILABLE: "unavailable"
+};
+var contentVariants = {
+  initial: {
+    willChange: "transform,opacity",
+    position: "relative",
+    opacity: 0,
+    scale: 0.95
+  },
+  animate: {
+    position: "relative",
+    opacity: 1,
+    scale: 1,
+    transition: {
+      ease: [0.16, 1, 0.3, 1],
+      duration: 0.4,
+      delay: 0.05,
+      position: {
+        delay: 0
+      }
+    }
+  },
+  exit: {
+    position: "absolute",
+    opacity: 0,
+    scale: 0.95,
+    transition: {
+      ease: [0.16, 1, 0.3, 1],
+      duration: 0.3
+    }
+  }
+};
+var ConnectWithInjector = function ConnectWithInjector2(param) {
+  var {
+    switchConnectMethod,
+    forceState
+  } = param;
+  var _ref, _ref1, _ref2, _walletInfo_shortName, _ref3;
+  var _wallet_downloadUrls, _Object_keys_, _Object_keys_1;
+  var {
+    connect
+  } = useConnect({
+    mutation: {
+      onMutate: function onMutate(connector) {
+        if (connector.connector) {
+          setStatus(states.CONNECTING);
+        } else {
+          setStatus(states.UNAVAILABLE);
+        }
+      },
+      onError(err) {
+        console.error(err);
+      },
+      onSettled(data, error) {
+        if (error) {
+          setShowTryAgainTooltip(true);
+          setTimeout(function () {
+            return setShowTryAgainTooltip(false);
+          }, 3500);
+          if (error.code) {
+            switch (error.code) {
+              case -32002:
+                setStatus(states.NOTCONNECTED);
+                break;
+              case 4001:
+                setStatus(states.REJECTED);
+                break;
+              default:
+                setStatus(states.FAILED);
+                break;
+            }
+          } else {
+            if (error.message) {
+              switch (error.message) {
+                case "User rejected request":
+                  setStatus(states.REJECTED);
+                  break;
+                default:
+                  setStatus(states.FAILED);
+                  break;
+              }
+            }
+          }
+        } else if (data) {}
+        setTimeout(triggerResize, 100);
+      }
+    }
+  });
+  var {
+    triggerResize,
+    connector: c
+  } = useContext();
+  var id = c.id;
+  var wallet = useWallet(id);
+  var walletInfo = {
+    name: wallet === null || wallet === void 0 ? void 0 : wallet.name,
+    shortName: (_ref = wallet === null || wallet === void 0 ? void 0 : wallet.shortName) !== null && _ref !== void 0 ? _ref : wallet === null || wallet === void 0 ? void 0 : wallet.name,
+    icon: (_ref1 = wallet === null || wallet === void 0 ? void 0 : wallet.iconConnector) !== null && _ref1 !== void 0 ? _ref1 : wallet === null || wallet === void 0 ? void 0 : wallet.icon,
+    iconShape: (_ref2 = wallet === null || wallet === void 0 ? void 0 : wallet.iconShape) !== null && _ref2 !== void 0 ? _ref2 : "circle",
+    iconShouldShrink: wallet === null || wallet === void 0 ? void 0 : wallet.iconShouldShrink
+  };
+  var [showTryAgainTooltip, setShowTryAgainTooltip] = useState(false);
+  var expiryDefault = 9;
+  var [expiryTimer, setExpiryTimer] = useState(expiryDefault);
+  var browser = detectBrowser();
+  var extensionUrl = wallet === null || wallet === void 0 ? void 0 : (_wallet_downloadUrls = wallet.downloadUrls) === null || _wallet_downloadUrls === void 0 ? void 0 : _wallet_downloadUrls[browser];
+  var suggestedExtension = (wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls) ? {
+    name: Object.keys(wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls)[0],
+    label: ((_Object_keys_ = Object.keys(wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls)[0]) === null || _Object_keys_ === void 0 ? void 0 : _Object_keys_.charAt(0).toUpperCase()) + ((_Object_keys_1 = Object.keys(wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls)[0]) === null || _Object_keys_1 === void 0 ? void 0 : _Object_keys_1.slice(1)),
+    // Capitalise first letter, but this might be better suited as a lookup table
+    url: wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls[Object.keys(wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls)[0]]
+  } : void 0;
+  var [status, setStatus] = useState(forceState ? forceState : !(wallet === null || wallet === void 0 ? void 0 : wallet.isInstalled) ? states.UNAVAILABLE : states.CONNECTING);
+  var locales = useLocales({
+    CONNECTORNAME: walletInfo.name,
+    CONNECTORSHORTNAME: (_walletInfo_shortName = walletInfo.shortName) !== null && _walletInfo_shortName !== void 0 ? _walletInfo_shortName : walletInfo.name,
+    SUGGESTEDEXTENSIONBROWSER: (_ref3 = suggestedExtension === null || suggestedExtension === void 0 ? void 0 : suggestedExtension.label) !== null && _ref3 !== void 0 ? _ref3 : "your browser"
+  });
+  var runConnect = async function runConnect2() {
+    if ((wallet === null || wallet === void 0 ? void 0 : wallet.isInstalled) && (wallet === null || wallet === void 0 ? void 0 : wallet.connector)) {
+      connect({
+        connector: wallet === null || wallet === void 0 ? void 0 : wallet.connector
+      });
+    } else {
+      setStatus(states.UNAVAILABLE);
+    }
+  };
+  var connectTimeout;
+  useEffect(function () {
+    if (status === states.UNAVAILABLE) return;
+    connectTimeout = setTimeout(runConnect, 600);
+    return function () {
+      clearTimeout(connectTimeout);
+    };
+  }, []);
+  if (!wallet) {
+    return /* @__PURE__ */_jsx(PageContent, {
+      children: /* @__PURE__ */_jsxs(Container, {
+        children: [/* @__PURE__ */_jsx(ModalHeading, {
+          children: "Invalid State"
+        }), /* @__PURE__ */_jsx(ModalContent, {
+          children: /* @__PURE__ */_jsx(Alert, {
+            children: "No connectors match the id given. This state should never happen."
+          })
+        })]
+      })
+    });
+  }
+  if (isWalletConnectConnector(wallet === null || wallet === void 0 ? void 0 : wallet.connector.id)) {
+    return /* @__PURE__ */_jsx(PageContent, {
+      children: /* @__PURE__ */_jsxs(Container, {
+        children: [/* @__PURE__ */_jsx(ModalHeading, {
+          children: "Invalid State"
+        }), /* @__PURE__ */_jsx(ModalContent, {
+          children: /* @__PURE__ */_jsx(Alert, {
+            children: "WalletConnect does not have an injection flow. This state should never happen."
+          })
+        })]
+      })
+    });
+  }
+  return /* @__PURE__ */_jsx(PageContent, {
+    children: /* @__PURE__ */_jsxs(Container, {
+      children: [/* @__PURE__ */_jsx(ConnectingContainer, {
+        children: /* @__PURE__ */_jsxs(ConnectingAnimation, {
+          $shake: status === states.FAILED || status === states.REJECTED,
+          $circle: walletInfo.iconShape === "circle",
+          children: [/* @__PURE__ */_jsx(AnimatePresence, {
+            children: (status === states.FAILED || status === states.REJECTED) && /* @__PURE__ */_jsx(RetryButton, {
+              "aria-label": "Retry",
+              initial: {
+                opacity: 0,
+                scale: 0.8
+              },
+              animate: {
+                opacity: 1,
+                scale: 1
+              },
+              exit: {
+                opacity: 0,
+                scale: 0.8
+              },
+              whileTap: {
+                scale: 0.9
+              },
+              transition: {
+                duration: 0.1
+              },
+              onClick: runConnect,
+              children: /* @__PURE__ */_jsx(RetryIconContainer, {
+                children: /* @__PURE__ */_jsx(Tooltip, {
+                  open: showTryAgainTooltip && (status === states.FAILED || status === states.REJECTED),
+                  message: locales.tryAgainQuestion,
+                  xOffset: -6,
+                  children: /* @__PURE__ */_jsx(RetryIconCircle, {})
+                })
+              })
+            })
+          }), walletInfo.iconShape === "circle" ? /* @__PURE__ */_jsx(CircleSpinner, {
+            logo: status === states.UNAVAILABLE ? /* @__PURE__ */_jsx("div", {
+              style: {
+                transform: "scale(1.14)",
+                position: "relative",
+                width: "100%"
+              },
+              children: walletInfo.icon
+            }) : /* @__PURE__ */_jsx(_Fragment, {
+              children: walletInfo.icon
+            }),
+            smallLogo: walletInfo.iconShouldShrink,
+            connecting: status === states.CONNECTING,
+            unavailable: status === states.UNAVAILABLE
+          }) : /* @__PURE__ */_jsx(SquircleSpinner, {
+            logo: status === states.UNAVAILABLE ? /* @__PURE__ */_jsx("div", {
+              style: {
+                transform: "scale(1.14)",
+                position: "relative",
+                width: "100%"
+              },
+              children: walletInfo.icon
+            }) : /* @__PURE__ */_jsx(_Fragment, {
+              children: walletInfo.icon
+            }),
+            connecting: status === states.CONNECTING
+          })]
+        })
+      }),
+      //unavailable={status === states.UNAVAILABLE}
+      /* </Tooltip> */
+      /* @__PURE__ */
+      _jsx(ModalContentContainer, {
+        children: /* @__PURE__ */_jsxs(AnimatePresence, {
+          initial: false,
+          children: [status === states.FAILED && /* @__PURE__ */_jsx(Content, {
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            variants: contentVariants,
+            children: /* @__PURE__ */_jsxs(ModalContent, {
+              children: [/* @__PURE__ */_jsxs(ModalH1, {
+                $error: true,
+                children: [/* @__PURE__ */_jsx(AlertIcon, {}), locales.injectionScreen_failed_h1]
+              }), /* @__PURE__ */_jsx(ModalBody, {
+                children: locales.injectionScreen_failed_p
+              })]
+            })
+          }, states.FAILED), /* Reason: Coinbase Wallet does not expose a QRURI when extension is installed */
+          /* 
+          {wallet?.getWalletConnectDeeplink &&
+            wallet.id !== 'coinbaseWalletSDK' && (
+              <>
+                <OrDivider />
+                <Button
+                  icon={<Scan />}
+                  onClick={() => switchConnectMethod(id)}
+                >
+                  {locales.scanTheQRCode}
+                </Button>
+              </>
+            )}
+             */
+          status === states.REJECTED && /* @__PURE__ */_jsx(Content, {
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            variants: contentVariants,
+            children: /* @__PURE__ */_jsxs(ModalContent, {
+              children: [/* @__PURE__ */_jsx(ModalH1, {
+                children: locales.injectionScreen_rejected_h1
+              }), /* @__PURE__ */_jsx(ModalBody, {
+                children: locales.injectionScreen_rejected_p
+              })]
+            })
+          }, states.REJECTED), /* Reason: Coinbase Wallet does not expose a QRURI when extension is installed */
+          /* 
+          {wallet?.getWalletConnectDeeplink &&
+            wallet.id !== 'coinbaseWalletSDK' && (
+              <>
+                <OrDivider />
+                <Button
+                  icon={<Scan />}
+                  onClick={() => switchConnectMethod(id)}
+                >
+                  {locales.scanTheQRCode}
+                </Button>
+              </>
+            )}
+             */
+          (status === states.CONNECTING || status === states.EXPIRING) && /* @__PURE__ */_jsx(Content, {
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            variants: contentVariants,
+            children: /* @__PURE__ */_jsxs(ModalContent, {
+              style: {
+                paddingBottom: 28
+              },
+              children: [/* @__PURE__ */_jsx(ModalH1, {
+                children: wallet.connector.id === "injected" ? locales.injectionScreen_connecting_injected_h1 : locales.injectionScreen_connecting_h1
+              }), /* @__PURE__ */_jsx(ModalBody, {
+                children: wallet.connector.id === "injected" ? locales.injectionScreen_connecting_injected_p : locales.injectionScreen_connecting_p
+              })]
+            })
+          }, states.CONNECTING), status === states.CONNECTED && /* @__PURE__ */_jsx(Content, {
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            variants: contentVariants,
+            children: /* @__PURE__ */_jsxs(ModalContent, {
+              children: [/* @__PURE__ */_jsxs(ModalH1, {
+                $valid: true,
+                children: [/* @__PURE__ */_jsx(TickIcon, {}), " ", locales.injectionScreen_connected_h1]
+              }), /* @__PURE__ */_jsx(ModalBody, {
+                children: locales.injectionScreen_connected_p
+              })]
+            })
+          }, states.CONNECTED), status === states.NOTCONNECTED && /* @__PURE__ */_jsx(Content, {
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            variants: contentVariants,
+            children: /* @__PURE__ */_jsxs(ModalContent, {
+              children: [/* @__PURE__ */_jsx(ModalH1, {
+                children: locales.injectionScreen_notconnected_h1
+              }), /* @__PURE__ */_jsx(ModalBody, {
+                children: locales.injectionScreen_notconnected_p
+              })]
+            })
+          }, states.NOTCONNECTED), status === states.UNAVAILABLE && /* @__PURE__ */_jsx(Content, {
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            variants: contentVariants,
+            children: !extensionUrl ? /* @__PURE__ */_jsxs(_Fragment, {
+              children: [/* @__PURE__ */_jsxs(ModalContent, {
+                style: {
+                  paddingBottom: 12
+                },
+                children: [/* @__PURE__ */_jsx(ModalH1, {
+                  children: locales.injectionScreen_unavailable_h1
+                }), /* @__PURE__ */_jsx(ModalBody, {
+                  children: locales.injectionScreen_unavailable_p
+                })]
+              }), !wallet.isInstalled && suggestedExtension && /* @__PURE__ */_jsxs(Button, {
+                href: suggestedExtension === null || suggestedExtension === void 0 ? void 0 : suggestedExtension.url,
+                icon: /* @__PURE__ */_jsx(BrowserIcon, {
+                  browser: suggestedExtension === null || suggestedExtension === void 0 ? void 0 : suggestedExtension.name
+                }),
+                children: ["Install on ", suggestedExtension === null || suggestedExtension === void 0 ? void 0 : suggestedExtension.label]
+              })]
+            }) : /* @__PURE__ */_jsxs(_Fragment, {
+              children: [/* @__PURE__ */_jsxs(ModalContent, {
+                style: {
+                  paddingBottom: 18
+                },
+                children: [/* @__PURE__ */_jsx(ModalH1, {
+                  children: locales.injectionScreen_install_h1
+                }), /* @__PURE__ */_jsx(ModalBody, {
+                  children: locales.injectionScreen_install_p
+                })]
+              }),
+              /**
+                                  {(wallet.getWalletConnectDeeplink &&
+                                  (!wallet.isInstalled && extensionUrl)) && <OrDivider />}
+              
+                                  {wallet.getWalletConnectDeeplink && (
+                                    <Button icon={<Scan />} onClick={switchConnectMethod}>
+                                      {locales.scanTheQRCode}
+                                    </Button>
+                                  )}
+                                  */
+              !wallet.isInstalled && extensionUrl && /* @__PURE__ */_jsx(Button, {
+                href: extensionUrl,
+                icon: /* @__PURE__ */_jsx(BrowserIcon, {}),
+                children: locales.installTheExtension
+              })]
+            })
+          }, states.UNAVAILABLE)]
+        })
+      })]
+    })
+  });
+};
+var ConnectWithInjector_default = ConnectWithInjector;
+export { ConnectWithInjector_default as default, states };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/connectkit/components/ConnectModal/ConnectWithInjector/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","useEffect","useState","AnimatePresence","Container","ConnectingContainer","ConnectingAnimation","RetryButton","RetryIconContainer","Content","PageContent","ModalHeading","ModalBody","ModalH1","ModalContentContainer","ModalContent","Button","Tooltip","Alert","SquircleSpinner","RetryIconCircle","BrowserIcon","AlertIcon","TickIcon","detectBrowser","isWalletConnectConnector","useLocales","useConnect","useContext","useWallet","CircleSpinner","states","CONNECTED","CONNECTING","EXPIRING","FAILED","REJECTED","NOTCONNECTED","UNAVAILABLE","contentVariants","initial","willChange","position","opacity","scale","animate","transition","ease","duration","delay","exit","ConnectWithInjector","ConnectWithInjector2","param","switchConnectMethod","forceState","_ref","_ref1","_ref2","_walletInfo_shortName","_ref3","_wallet_downloadUrls","_Object_keys_","_Object_keys_1","connect","mutation","onMutate","connector","setStatus","onError","err","console","error","onSettled","data","setShowTryAgainTooltip","setTimeout","code","message","triggerResize","c","id","wallet","walletInfo","name","shortName","icon","iconConnector","iconShape","iconShouldShrink","showTryAgainTooltip","expiryDefault","expiryTimer","setExpiryTimer","browser","extensionUrl","downloadUrls","suggestedExtension","Object","keys","label","charAt","toUpperCase","slice","url","status","isInstalled","locales","CONNECTORNAME","CONNECTORSHORTNAME","SUGGESTEDEXTENSIONBROWSER","runConnect","runConnect2","connectTimeout","clearTimeout","children","$shake","$circle","whileTap","onClick","open","tryAgainQuestion","xOffset","logo","style","transform","width","smallLogo","connecting","unavailable","variants","$error","injectionScreen_failed_h1","injectionScreen_failed_p","injectionScreen_rejected_h1","injectionScreen_rejected_p","paddingBottom","injectionScreen_connecting_injected_h1","injectionScreen_connecting_h1","injectionScreen_connecting_injected_p","injectionScreen_connecting_p"],"sources":["../../../../../../src/connectkit/components/ConnectModal/ConnectWithInjector/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/connectkit/components/ConnectModal/ConnectWithInjector/styles.mjs

@@ -0,0 +1,129 @@
+import styled from "./../../../styles/styled/index.mjs";
+import { css, keyframes } from "styled-components";
+import { motion } from "framer-motion";
+import { ModalContent } from "../../Common/Modal/styles.mjs";
+const Content = styled(motion.div)`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+  left: 0;
+  right: 0;
+  ${ModalContent} {
+    padding: 0 8px 32px;
+    gap: 12px;
+  }
+`;
+const dist = 2;
+const shakeKeyframes = keyframes`
+  0%{ transform:none; }
+  25%{ transform:translateX(${dist}px); }
+  50%{ transform:translateX(-${dist}px); }
+  75%{ transform:translateX(${dist}px); }
+  100%{ transform:none; }
+`;
+const outlineKeyframes = keyframes`
+  0%{ opacity:1; }
+  100%{ opacity:0; }
+`;
+const Container = styled(motion.div)`
+  /*
+  background: var(
+    --ck-body-background
+  ); // To stop the overlay issue during transition for the squircle spinner
+  */
+`;
+const ConnectingContainer = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto 16px;
+  height: 120px;
+  //transform: scale(1.001); // fixes shifting issue between states
+`;
+const ConnectingAnimation = styled(motion.div)`
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: var(--ck-body-color-danger);
+    ${props => props.$circle && css`
+        inset: -5px;
+        border-radius: 50%;
+        background: none;
+        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
+      `}
+  }
+  ${props => props.$shake && css`
+      animation: ${shakeKeyframes} 220ms ease-out both;
+      &:before {
+        animation: ${outlineKeyframes} 220ms ease-out 750ms both;
+      }
+    `}
+`;
+const RetryButton = styled(motion.button)`
+  z-index: 5;
+  appearance: none;
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  cursor: pointer;
+  overflow: hidden;
+  background: none;
+
+  color: var(--ck-body-background);
+  transition: color 200ms ease;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
+
+  &:before {
+    z-index: 3;
+    content: '';
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity 200ms ease;
+    background: var(--ck-body-color);
+  }
+
+  &:hover:before {
+    opacity: 0.1;
+  }
+`;
+const RetryIconContainer = styled(motion.div)`
+  position: absolute;
+  inset: 0;
+
+  &:before {
+    z-index: 1;
+    content: '';
+    position: absolute;
+    inset: 3px;
+    border-radius: 16px;
+    background: conic-gradient(
+      from 90deg,
+      currentColor 10%,
+      var(--ck-body-color) 80%
+    );
+  }
+
+  svg {
+    z-index: 2;
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+`;
+export { ConnectingAnimation, ConnectingContainer, Container, Content, RetryButton, RetryIconContainer };
+//# sourceMappingURL=styles.mjs.map

package/dist/esm/connectkit/components/ConnectModal/ConnectWithInjector/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["styled","css","keyframes","motion","ModalContent","Content","div","dist","shakeKeyframes","outlineKeyframes","Container","ConnectingContainer","ConnectingAnimation","props","$circle","$shake","RetryButton","button","RetryIconContainer"],"sources":["../../../../../../src/connectkit/components/ConnectModal/ConnectWithInjector/styles.ts"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,MAAA,MAAY;AACnB,SAASC,GAAA,EAAKC,SAAA,QAAiB;AAC/B,SAASC,MAAA,QAAc;AAEvB,SAASC,YAAA,QAAoB;AAEtB,MAAMC,OAAA,GAAUL,MAAA,CAAOG,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOpCF,YAAY;AAAA;AAAA;AAAA;AAAA;AAMhB,MAAMG,IAAA,GAAO;AACb,MAAMC,cAAA,GAAiBN,SAAA;AAAA;AAAA,8BAEOK,IAAI;AAAA,+BACHA,IAAI;AAAA,8BACLA,IAAI;AAAA;AAAA;AAGlC,MAAME,gBAAA,GAAmBP,SAAA;AAAA;AAAA;AAAA;AAIlB,MAAMQ,SAAA,GAAYV,MAAA,CAAOG,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAMK,mBAAA,GAAsBX,MAAA,CAAOG,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7C,MAAMM,mBAAA,GAAsBZ,MAAA,CAAOG,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAa7CO,KAAA,IACDA,KAAA,CAAMC,OAAA,IACNb,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAKC;AAAA;AAAA,IAEFY,KAAA,IACDA,KAAA,CAAME,MAAA,IACNd,GAAA;AAAA,mBACeO,cAAc;AAAA;AAAA,qBAEZC,gBAAgB;AAAA;AAAA,KAEhC;AAAA;AAGE,MAAMO,WAAA,GAAchB,MAAA,CAAOG,MAAA,CAAOc,MAAM;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;AAmCxC,MAAMC,kBAAA,GAAqBlB,MAAA,CAAOG,MAAA,CAAOG,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","ignoreList":[]}