Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_tokens_typography = require("../styles/tokens/typography.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_utils_toReactNodes_toReactNodes = require("../utils/toReactNodes/toReactNodes.cjs");
const require_utils_toReactNodes_setReactNodesTypography = require("../utils/toReactNodes/setReactNodesTypography.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react = require("@emotion/react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/PendingValue.tsx
const bgPosition = _emotion_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?.type || "Body",
		size: typographyProp?.size || "Small",
		color: typographyProp?.color || "text",
		hideOverflow: true
	};
	const content = require_utils_toReactNodes_toReactNodes.toReactNodes(require_utils_toReactNodes_setReactNodesTypography.setDefaultReactNodesTypography(contentProp, {
		link: defaultTypography,
		text: defaultTypography,
		nextLink: defaultTypography,
		currencyAmount: defaultTypography,
		clipboardTextField: defaultTypography
	}));
	const contentNode = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledPendingValueContent, {
		typographyType: defaultTypography.type,
		typographySize: defaultTypography.size,
		children: content
	});
	const nodes = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledPendingValueBgOuter, {
		typographyType: defaultTypography.type,
		typographySize: defaultTypography.size,
		widthProp: width,
		hasContent: !!contentProp,
		fullSizePending,
		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledPendingValueBg, {
			visible: !contentProp,
			fullSizePending,
			animate
		}), fullSizePending ? null : contentNode]
	}), fullSizePending ? contentNode : null] });
	return forceTheme ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react.ThemeProvider, {
		theme: require_styles_themes.themes[forceTheme],
		children: nodes
	}) : nodes;
}
const StyledPendingValueBgOuter = _emotion_styled.default.div`
  position: relative;
  height: ${({ typographyType, typographySize, theme }) => require_styles_tokens_typography.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 "";
}}
`;
const StyledPendingValueContent = _emotion_styled.default.div`
  position: relative;
  z-index: 1;
  overflow: hidden;

  height: ${({ typographyType, typographySize, theme }) => require_styles_tokens_typography.getLineHeightForTypographyType(typographyType, typographySize, theme)};
`;
const vSpacing = 2;
const StyledPendingValueBg = _emotion_styled.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,
    ${require_styles_themes.themeOrWithKey("c05Neutral", "c25Neutral")} 0%,
    ${require_styles_themes.themeOrWithKey("c1Neutral", "c3Neutral")} 50%,
    ${require_styles_themes.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 ? _emotion_react.css`
          animation: ${bgPosition} 2s linear infinite;
        ` : "";
}}
`;
//#endregion
exports.PendingValue = PendingValue;
exports.StyledPendingValueBg = StyledPendingValueBg;
exports.StyledPendingValueContent = StyledPendingValueContent;
