@particle-network/connectkit/dist/esm/chunk-LPKOMA4X.mjs

"use client";
import {
  __esm
} from "./chunk-Y7A564BU.mjs";

// src/components/circleSpinner/styles.ts
import { motion } from "framer-motion";
import { css, styled } from "styled-components";
var LogoContainer, Logo, SpinnerContainer, ExpiringSpinner, Spinner;
var init_styles = __esm({
  "src/components/circleSpinner/styles.ts"() {
    "use strict";
    LogoContainer = styled(motion.div)`
  z-index: 4;
  position: relative;
  width: ${(props) => props.width ?? 60}px;
  height: ${(props) => props.height ?? 60}px;
  svg {
    z-index: 3;
    position: relative;
    display: block;
  }
`;
    Logo = styled(motion.div)`
  z-index: 2;
  position: absolute;
  overflow: hidden;
  inset: ${(props) => props.inset ?? 6}px;
  border-radius: 50px;
  background: var(--pcm-body-background);
  display: flex;
  align-items: center;
  justify-content: center;
  svg,
  img {
    pointer-events: none;
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    ${(props) => props.$small && css`
        width: 85%;
        height: 85%;
      `}
  }
`;
    SpinnerContainer = styled(motion.div)`
  position: absolute;
  inset: -5px;
`;
    ExpiringSpinner = styled(motion.div)`
  pointer-events: none;
  user-select: none;
  z-index: 1;
  position: absolute;
  inset: -25%;
  background: var(--pcm-body-background);
  div:first-child {
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    &:before {
      position: absolute;
      content: '';
      inset: 0;
      background: var(--pcm-accent-color);
      transform-origin: 0% 50%;
      animation: rotateExpiringSpinner 5000ms ease-in both;
    }
  }
  div:last-child {
    position: absolute;
    left: 0;
    right: 50%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    &:before {
      position: absolute;
      content: '';
      inset: 0;
      background: var(--pcm-accent-color);
      transform-origin: 100% 50%;
      animation: rotateExpiringSpinner 5000ms ease-out 5000ms both;
    }
  }
  @keyframes rotateExpiringSpinner {
    0% {
      transform: rotate(-180deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
`;
    Spinner = styled(motion.div)`
  pointer-events: none;
  user-select: none;
  z-index: 1;
  position: absolute;
  inset: 0;
  svg {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: rotateSpinner 1200ms linear infinite;
  }
  @keyframes rotateSpinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;
  }
});

// src/components/circleSpinner/index.tsx
import { AnimatePresence } from "framer-motion";
import { jsx, jsxs } from "react/jsx-runtime";
var CircleSpinner, circleSpinner_default;
var init_circleSpinner = __esm({
  "src/components/circleSpinner/index.tsx"() {
    "use strict";
    init_styles();
    CircleSpinner = ({
      logo,
      smallLogo,
      connecting = true,
      unavailable = false,
      countdown = false,
      width = 60,
      height = 60,
      inset = 4
    }) => {
      return /* @__PURE__ */ jsxs(LogoContainer, { transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, width, height, children: [
        /* @__PURE__ */ jsx(
          Logo,
          {
            $small: !unavailable && smallLogo,
            style: {
              background: "none",
              ...unavailable ? { borderRadius: 0 } : {}
            },
            inset,
            children: logo
          }
        ),
        /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
          connecting && /* @__PURE__ */ jsx(
            Spinner,
            {
              initial: { opacity: 0 },
              animate: { opacity: 1 },
              exit: {
                opacity: 0,
                transition: {
                  duration: countdown ? 1 : 0
                }
              },
              children: /* @__PURE__ */ jsxs(
                "svg",
                {
                  "aria-hidden": "true",
                  width: width + 2,
                  height: height + 2,
                  viewBox: "0 0 102 102",
                  fill: "none",
                  xmlns: "http://www.w3.org/2000/svg",
                  children: [
                    /* @__PURE__ */ jsx(
                      "path",
                      {
                        d: "M52 100C24.3858 100 2 77.6142 2 50",
                        stroke: "url(#paint0_linear_1943_4139)",
                        strokeWidth: "3.5",
                        strokeLinecap: "round",
                        strokeLinejoin: "round"
                      }
                    ),
                    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
                      "linearGradient",
                      {
                        id: "paint0_linear_1943_4139",
                        x1: "2",
                        y1: "48.5",
                        x2: "53",
                        y2: "100",
                        gradientUnits: "userSpaceOnUse",
                        children: [
                          /* @__PURE__ */ jsx("stop", { stopColor: "var(--pcm-accent-color)" }),
                          /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "var(--pcm-accent-color)", stopOpacity: "0" })
                        ]
                      }
                    ) })
                  ]
                }
              )
            },
            "Spinner"
          ),
          countdown && /* @__PURE__ */ jsxs(
            ExpiringSpinner,
            {
              initial: { opacity: 0 },
              animate: { opacity: 1 },
              exit: { opacity: 0 },
              transition: { duration: 0.25 },
              children: [
                /* @__PURE__ */ jsx("div", {}),
                /* @__PURE__ */ jsx("div", {})
              ]
            },
            "ExpiringSpinner"
          )
        ] }) })
      ] });
    };
    circleSpinner_default = CircleSpinner;
  }
});

export {
  circleSpinner_default,
  init_circleSpinner
};
//# sourceMappingURL=chunk-LPKOMA4X.mjs.map