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

"use client";
import {
  FlexCenter,
  init_styles
} from "./chunk-QH6JFFQS.mjs";
import {
  ButtonLoadingIcon_default,
  init_ButtonLoadingIcon
} from "./chunk-Q3DUJHH3.mjs";
import {
  __esm
} from "./chunk-Y7A564BU.mjs";

// src/components/button/styles.ts
import { motion } from "framer-motion";
import { css, styled } from "styled-components";
var ButtonContainer, InlineBox, IconContainer;
var init_styles2 = __esm({
  "src/components/button/styles.ts"() {
    "use strict";
    ButtonContainer = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  cursor: pointer;
  width: 100%;

  border-radius: var(--pcm-rounded-lg);
  font-weight: var(--pcm-button-font-weight);
  height: 47px;
  border: none;

  ${({ $color }) => {
      if ($color === "primary") {
        return css`
        background: var(--pcm-primary-button-bankground);
        color: var(--pcm-primary-button-color);
        &:hover {
          background: var(--pcm-primary-button-hover-background);
        }
      `;
      } else if ($color === "secondary") {
        return css`
        background: var(--pcm-secondary-button-bankground);
        color: var(--pcm-secondary-button-color);
        &:hover {
          background: var(--pcm-secondary-button-hover-background);
        }
      `;
      }
      return void 0;
    }}

  ${({ $disabled, $loading }) => ($disabled || $loading) && css`
      cursor: not-allowed;
      pointer-events: none;
      opacity: 0.5;
      div {
        opacity: 0.5;
      }
    `}

  &:hover {
    box-shadow: var(--pcm-button-hover-shadow);
  }
`;
    InlineBox = styled.div`
  display: inline-block;
  margin-right: 8px;
`;
    IconContainer = styled(motion.div)`
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 20px;
  max-height: 20px;
  margin: 0 10px;
  &:first-child {
    margin-left: 0;
  }
  &:last-child {
    margin-right: 0;
  }
  ${(props) => {
      return props.$rounded && css`
        overflow: hidden;
        border-radius: var(--pcm-rounded-sm);
      `;
    }}
  svg {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;
  }
`;
  }
});

// src/components/button/index.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var Button, button_default;
var init_button = __esm({
  "src/components/button/index.tsx"() {
    "use strict";
    init_ButtonLoadingIcon();
    init_styles();
    init_styles2();
    Button = ({
      children,
      style,
      loading = false,
      disabled = false,
      color = "primary",
      roundedIcon,
      onClick,
      icon,
      ...rest
    }) => {
      return /* @__PURE__ */ jsxs(
        ButtonContainer,
        {
          style,
          onClick: (event) => {
            if (!disabled && !loading && onClick)
              onClick(event);
          },
          $loading: Boolean(loading),
          $disabled: disabled,
          $color: color,
          ...rest,
          children: [
            loading && /* @__PURE__ */ jsx(ButtonLoadingIcon_default, { style: { width: "20px", marginRight: "6px" } }),
            /* @__PURE__ */ jsxs(FlexCenter, { gap: 6, children: [
              icon && /* @__PURE__ */ jsx(IconContainer, { $rounded: roundedIcon, children: icon }),
              children
            ] })
          ]
        }
      );
    };
    button_default = Button;
  }
});

export {
  button_default,
  init_button
};
//# sourceMappingURL=chunk-G4I34CN4.mjs.map