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

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

// src/components/modal/styles.ts
import { motion } from "framer-motion";
import { keyframes, styled } from "styled-components";
var FadeIn, FadeOut, BoxIn, BoxOut, MobileBoxIn, MobileBoxOut, ModalRoot, ModalOverlay, ModalContainer, BoxContainer, PageContainer, PageContents, PageContent, ControllerContainer, BackButton, CloseButton, ModalHeading, ErrorContent, ErrorMessage, ModalContentContainer, FlexCenter, FlexLeft, FlexRight, FlexBetween;
var init_styles = __esm({
  "src/components/modal/styles.ts"() {
    "use strict";
    FadeIn = keyframes`
from { opacity: 0; }
  to { opacity: 1; }
`;
    FadeOut = keyframes`
from { opacity: 1; }
  to { opacity: 0; }
`;
    BoxIn = keyframes`
  from{ opacity: 0; transform: scale(0.97); }
  to{ opacity: 1; transform: scale(1); }
`;
    BoxOut = keyframes`
  from{ opacity: 1; transform: scale(1); }
  to{ opacity: 0; transform: scale(0.97); }
`;
    MobileBoxIn = keyframes`
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0%, 0); }
`;
    MobileBoxOut = keyframes`
  from { opacity: 1; }
  to { opacity: 0; }
`;
    ModalRoot = styled.div`
  z-index: 2147483646;
  position: fixed;
  inset: 0;
`;
    ModalOverlay = styled(motion.div)`
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--pcm-overlay-background, rgba(71, 88, 107, 0.24));
  backdrop-filter: var(--pcm-overlay-backdrop-filter, blur(6px));
  opacity: 0;
  animation: ${(props) => props.$active ? FadeIn : FadeOut} 150ms ease-out both;
`;
    ModalContainer = styled(motion.div)`
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 200ms;
  --transition: height var(--duration) var(--ease), width var(--duration) var(--ease);
  z-index: 3;
  display: block;
  pointer-events: none;
  position: ${(props) => props.$positionInside ? "unset" : "absolute"};
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  transform: ${(props) => {
      return props.$positionInside ? "none" : "translate(-50%, -50%)";
    }};
  backface-visibility: hidden;
  @media only screen and (max-width: 560px) {
    pointer-events: auto;
    left: 0;
    top: auto;
    bottom: -5px;
    transform: none;
  }
`;
    BoxContainer = styled(motion.div)`
  z-index: 2;
  position: relative;
  color: var(--pcm-body-color, black);
  animation: 150ms ease both;
  animation-name: ${(props) => props.$positionInside ? null : BoxOut};
  margin: auto;
  height: var(--height);
  width: 400px;
  border-radius: var(--pcm-rounded-xl);
  background: var(--pcm-body-background);
  box-shadow: var(--pcm-modal-box-shadow);
  transition: all 300ms ease;
  overflow: hidden;
  &.active {
    animation-name: ${(props) => props.$positionInside ? null : BoxIn};
  }

  @media only screen and (max-width: 560px) {
    animation-name: ${(props) => props.$positionInside ? null : MobileBoxOut};
    animation-duration: 130ms;
    animation-timing-function: ease;
    width: 100%;
    transition: 200ms height cubic-bezier(0.15, 1.15, 0.6, 1);
    will-change: height;
    border-bottom-left-radius: ${(props) => props.$positionInside ? null : 0};
    border-bottom-right-radius: ${(props) => props.$positionInside ? null : 0};

    &.active {
      animation-name: ${(props) => props.$positionInside ? null : MobileBoxIn};
      animation-duration: 300ms;
      animation-delay: 32ms;
      animation-timing-function: cubic-bezier(0.15, 1.15, 0.6, 1);
    }
  }
`;
    PageContainer = styled(motion.div)`
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
`;
    PageContents = styled(motion.div)`
  width: 100%;
  padding: 64px 0 24px 0;
  backface-visibility: hidden;
  box-sizing: border-box;
`;
    PageContent = styled(motion.div)`
  max-width: 100%;
  margin: 0 4px 22px;
  padding: 12px 20px 8px;
  overflow-x: visible;
  max-height: var(--pcm-modal-max-height, 65vh);
  overflow-y: auto;
  opacity: 0;
  animation: ${FadeIn} 300ms ease-out both;
`;
    ControllerContainer = styled(motion.div)`
  z-index: 3;
  position: absolute;
  top: 0;
  left: 50%;
  height: 64px;
  transform: translateX(-50%);
  backface-visibility: hidden;
  width: 100%;
  pointer-events: auto;
`;
    BackButton = styled(motion.button)`
  z-index: 3;
  cursor: pointer;
  position: absolute;
  top: 21px;
  left: 17px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  border-radius: 16px;
  padding: 0;
  margin: 0;
  color: var(--pcm-body-action-color);
  background: var(--pcm-body-background);
  transition: background-color 200ms ease;
  background: var(--pcm-body-background-secondary);
  border: none;
  svg {
    display: block;
    position: relative;
    left: -1px;
  }

  &:active {
    transform: scale(0.9);
    svg {
      left: 0px;
    }
  }
`;
    CloseButton = styled(motion.button)`
  z-index: 3;
  cursor: pointer;
  position: absolute;
  top: 21px;
  right: 17px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 0;
  margin: 0;
  color: var(--pcm-body-action-color);
  background: var(--pcm-body-background);
  transition: background-color 200ms ease;
  background: var(--pcm-body-background-secondary);
  border: none;
  svg {
    display: block;
  }
  &:active {
    transform: scale(0.9);
  }
`;
    ModalHeading = styled(motion.div)`
  z-index: 3;
  pointer-events: none;
  user-select: none;
  position: absolute;
  top: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-size: 17px;
  line-height: 20px;
  padding: 0 24px;
  font-weight: var(--pcm-modal-heading-font-weight, 600);
  color: var(--pcm-body-color);
  span {
    display: inline-block;
  }
`;
    ErrorContent = styled(motion.div)`
  background: var(--pcm-error-background);
  color: var(--pcm-error-color);
  text-align: center;
  height: 28px;
  margin: 0 24px;
  line-height: 28px;
  border-radius: 30px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  padding: 0 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  svg {
    display: inline-block;
    margin-right: 8px;
  }
`;
    ErrorMessage = styled(motion.div)`
  display: ${(props) => props.$display ? "flex" : "none"};
  width: 100%;
  margin: 16px auto;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: ${(props) => props.$display ? FadeIn : FadeOut} 200ms ease-out both;
`;
    ModalContentContainer = styled(motion.div)`
  position: relative;
  padding: 0;
`;
    FlexCenter = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  gap: ${(props) => props.gap || 0}px;
`;
    FlexLeft = styled.div`
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: ${(props) => props.gap || 0}px;
`;
    FlexRight = styled.div`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: ${(props) => props.gap || 0}px;
`;
    FlexBetween = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: ${(props) => props.gap || 0}px;
`;
  }
});

export {
  ModalRoot,
  ModalOverlay,
  ModalContainer,
  BoxContainer,
  PageContainer,
  PageContents,
  PageContent,
  ControllerContainer,
  BackButton,
  CloseButton,
  ModalHeading,
  ErrorContent,
  ErrorMessage,
  FlexCenter,
  FlexLeft,
  FlexBetween,
  init_styles
};
//# sourceMappingURL=chunk-QH6JFFQS.mjs.map