import { jsx, jsxs } from 'react/jsx-runtime';
import { c as cx } from './index-De1g9FRV.js';
import { forwardRef } from 'react';
import { A as AiMark } from './AiMark-DINVII8-.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';

import './Text.css';const headline = "_headline_1p7vt_2";
const eyebrow = "_eyebrow_1p7vt_15";
const bodytext = "_bodytext_1p7vt_28";
const xlarge = "_xlarge_1p7vt_87";
const large = "_large_1p7vt_94";
const medium = "_medium_1p7vt_101";
const small = "_small_1p7vt_107";
const subdued = "_subdued_1p7vt_137";
const inline = "_inline_1p7vt_140";
const styles = {
	headline: headline,
	eyebrow: eyebrow,
	bodytext: bodytext,
	"headline-with-ai-mark": "_headline-with-ai-mark_1p7vt_43",
	xlarge: xlarge,
	"headline-ai-mark": "_headline-ai-mark_1p7vt_91",
	large: large,
	medium: medium,
	small: small,
	subdued: subdued,
	inline: inline
};

const Text = forwardRef((props, ref) => {
  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
  if (props.variant === "headline") {
    const {
      variant: _,
      children,
      className,
      el: HeadlineElement,
      size = "medium",
      style,
      aiMark,
      ...rest
    } = componentProps;
    const TextClasses = cx(styles["headline"], className, {
      [styles[`${size}`]]: size
    });
    const styleCombined = { ...style, ...layoutStyles };
    const aiMarkSize = size === "small" ? "medium" : size;
    const aiMarkNode = aiMark && /* @__PURE__ */ jsx(
      AiMark,
      {
        className: styles["headline-ai-mark"],
        type: "gradient",
        collapsePadding: "block",
        size: aiMarkSize,
        popoverOrTooltipConfig: typeof aiMark === "object" ? aiMark : void 0
      }
    );
    return (
      // @ts-expect-error ts(2604) HeadlineElement will work as element tag
      /* @__PURE__ */ jsx(
        HeadlineElement,
        {
          ref,
          className: TextClasses,
          "data-anv": "text",
          style: styleCombined,
          ...rest,
          children: aiMarkNode ? /* @__PURE__ */ jsxs("span", { className: styles["headline-with-ai-mark"], children: [
            children,
            aiMarkNode
          ] }) : children
        }
      )
    );
  } else if (props.variant === "eyebrow") {
    const {
      variant: _,
      children,
      className,
      size = "medium",
      style,
      ...rest
    } = componentProps;
    const TextClasses = cx(styles["eyebrow"], className, {
      [styles[`${size}`]]: size
    });
    const styleCombined = { ...style, ...layoutStyles };
    return /* @__PURE__ */ jsx(
      "span",
      {
        ref,
        className: TextClasses,
        "data-anv": "text",
        style: styleCombined,
        ...rest,
        children
      }
    );
  } else {
    const {
      variant: _,
      children,
      className,
      subdued,
      inline,
      style,
      size = "medium",
      ...rest
    } = componentProps;
    const TextClasses = cx(styles["bodytext"], className, {
      [styles[`${size}`]]: size,
      [styles["subdued"]]: subdued,
      [styles["inline"]]: inline
    });
    const styleCombined = { ...style, ...layoutStyles };
    if (inline) {
      return /* @__PURE__ */ jsx(
        "span",
        {
          ref,
          className: TextClasses,
          "data-anv": "text",
          style: styleCombined,
          ...rest,
          children
        }
      );
    } else {
      return /* @__PURE__ */ jsx(
        "p",
        {
          ref,
          className: TextClasses,
          "data-anv": "text",
          style: styleCombined,
          ...rest,
          children
        }
      );
    }
  }
});
Text.displayName = "Text";

export { Text as T };
//# sourceMappingURL=Text-3Tbp9SGi.js.map
