"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _chunkYPB3YRAGcjs = require('./chunk-YPB3YRAG.cjs');


var _chunkDDGSFIWAcjs = require('./chunk-DDGSFIWA.cjs');



var _chunkOBHJBBPCcjs = require('./chunk-OBHJBBPC.cjs');


var _chunkN6HLM4KCcjs = require('./chunk-N6HLM4KC.cjs');

// src/components/PendingValue.tsx
var _react = require('@emotion/react');
var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
var _react3 = require('react');
var _jsxruntime = require('@emotion/react/jsx-runtime');
var bgPosition = _react.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 = _chunkYPB3YRAGcjs.setDefaultReactNodesTypography.call(void 0, 
    contentProp,
    defaultTypographyMap
  );
  const content = _chunkDDGSFIWAcjs.toReactNodes.call(void 0, nodesWithTypography);
  const contentNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
    StyledPendingValueContent,
    {
      typographyType: defaultTypography.type,
      typographySize: defaultTypography.size,
      children: content
    }
  );
  const nodes = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react3.Fragment, { children: [
    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
      StyledPendingValueBgOuter,
      {
        typographyType: defaultTypography.type,
        typographySize: defaultTypography.size,
        widthProp: width,
        hasContent: !!contentProp,
        fullSizePending,
        children: [
          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
            StyledPendingValueBg,
            {
              visible: !contentProp,
              fullSizePending,
              animate
            }
          ),
          fullSizePending ? null : contentNode
        ]
      }
    ),
    fullSizePending ? contentNode : null
  ] });
  return forceTheme ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.ThemeProvider, { theme: _chunkOBHJBBPCcjs.themes[forceTheme], children: nodes }) : nodes;
}
var StyledPendingValueBgOuter = _styled2.default.div`
  position: relative;
  height: ${({ typographyType, typographySize, theme }) => _chunkN6HLM4KCcjs.getLineHeightForTypographyType.call(void 0, 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 = _styled2.default.div`
  position: relative;
  z-index: 1;
  overflow: hidden;

  height: ${({ typographyType, typographySize, theme }) => _chunkN6HLM4KCcjs.getLineHeightForTypographyType.call(void 0, typographyType, typographySize, theme)};
`;
var vSpacing = 2;
var StyledPendingValueBg = _styled2.default.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,
    ${_chunkOBHJBBPCcjs.themeOrWithKey.call(void 0, "c05Neutral", "c25Neutral")} 0%,
    ${_chunkOBHJBBPCcjs.themeOrWithKey.call(void 0, "c1Neutral", "c3Neutral")} 50%,
    ${_chunkOBHJBBPCcjs.themeOrWithKey.call(void 0, "c05Neutral", "c25Neutral")} 100%
  );

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

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

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





exports.PendingValue = PendingValue; exports.StyledPendingValueContent = StyledPendingValueContent; exports.StyledPendingValueBg = StyledPendingValueBg;
