import {
  setDefaultReactNodesTypography
} from "./chunk-EZI6E6UO.js";
import {
  toReactNodes
} from "./chunk-OYIPFTQC.js";
import {
  themeOrWithKey,
  themes
} from "./chunk-VAH342U2.js";
import {
  getLineHeightForTypographyType
} from "./chunk-KCUSJWDZ.js";

// src/components/PendingValue.tsx
import { css, keyframes, ThemeProvider } from "@emotion/react";
import styled from "@emotion/styled";
import { Fragment } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var bgPosition = keyframes`
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
`;
function PendingValue({
  animate = true,
  content: contentProp,
  typography: typographyProp,
  width,
  forceTheme,
  fullSizePending = false
}) {
  const defaultTypography = {
    type: (typographyProp == null ? void 0 : typographyProp.type) || "Body",
    size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
    color: (typographyProp == null ? void 0 : typographyProp.color) || "text",
    hideOverflow: true
  };
  const defaultTypographyMap = {
    link: defaultTypography,
    text: defaultTypography,
    nextLink: defaultTypography,
    currencyAmount: defaultTypography,
    clipboardTextField: defaultTypography
  };
  const nodesWithTypography = setDefaultReactNodesTypography(
    contentProp,
    defaultTypographyMap
  );
  const content = toReactNodes(nodesWithTypography);
  const contentNode = /* @__PURE__ */ jsx(
    StyledPendingValueContent,
    {
      typographyType: defaultTypography.type,
      typographySize: defaultTypography.size,
      children: content
    }
  );
  const nodes = /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      StyledPendingValueBgOuter,
      {
        typographyType: defaultTypography.type,
        typographySize: defaultTypography.size,
        widthProp: width,
        hasContent: !!contentProp,
        fullSizePending,
        children: [
          /* @__PURE__ */ jsx(
            StyledPendingValueBg,
            {
              visible: !contentProp,
              fullSizePending,
              animate
            }
          ),
          fullSizePending ? null : contentNode
        ]
      }
    ),
    fullSizePending ? contentNode : null
  ] });
  return forceTheme ? /* @__PURE__ */ jsx(ThemeProvider, { theme: themes[forceTheme], children: nodes }) : nodes;
}
var StyledPendingValueBgOuter = styled.div`
  position: relative;
  height: ${({ typographyType, typographySize, theme }) => getLineHeightForTypographyType(typographyType, typographySize, theme)};

  ${({ widthProp, hasContent }) => widthProp && !hasContent ? `width: ${widthProp}px;` : "width: 100%;"}
  overflow: hidden;
  max-width: 100%;

  ${({ fullSizePending }) => {
  if (fullSizePending) {
    return `
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
      `;
  }
  return "";
}}
`;
var StyledPendingValueContent = styled.div`
  position: relative;
  z-index: 1;
  overflow: hidden;

  height: ${({ typographyType, typographySize, theme }) => getLineHeightForTypographyType(typographyType, typographySize, theme)};
`;
var vSpacing = 2;
var StyledPendingValueBg = styled.div`
  z-index: 0;
  width: 100%;
  position: absolute;

  ${({ fullSizePending }) => {
  if (fullSizePending) {
    return `
        height: 100%;
        top: 0;
      `;
  }
  return `
      height: calc(100% - ${vSpacing * 2}px);
      top: ${vSpacing}px;
      border-radius: 999px;
    `;
}}

  ${({ visible }) => visible ? "opacity: 1;" : "opacity: 0;"}

  background: linear-gradient(
    90deg,
    ${themeOrWithKey("c05Neutral", "c25Neutral")} 0%,
    ${themeOrWithKey("c1Neutral", "c3Neutral")} 50%,
    ${themeOrWithKey("c05Neutral", "c25Neutral")} 100%
  );

  background-size: 200% 100%;
  background-position: 0% 0%;

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  ${({ animate }) => {
  return animate ? css`
          animation: ${bgPosition} 2s linear infinite;
        ` : "";
}}
`;

export {
  PendingValue,
  StyledPendingValueContent,
  StyledPendingValueBg
};
