import { jsx as f } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { DEFAULT_TYPOGRAPHY_CLASSNAME as o } from "./constants.js";
import R from "classnames";
import { useMemo as y } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { TypographyVariant as T, TypographyModifier as E } from "./types.js";
import { memo as C } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
/* empty css                */
function P({ el: B, id: D, className: N, stronger: I, strongest: L, variant: $, medium: O, large: p, testId: A, wide: m, children: S }) {
  const s = B || "p", Y = y(
    () => ({
      // Caption
      [`${o}--${T.CAPTION}`]: $ === T.CAPTION,
      [`${o}--${T.CAPTION}-${E.WIDE}`]: $ === T.CAPTION && m,
      [`${o}--${T.CAPTION}-${E.STRONGER}`]: $ === T.CAPTION && I,
      // Body
      [`${o}--${T.BODY}`]: $ === T.BODY,
      [`${o}--${T.BODY}-${E.WIDE}`]: $ === T.BODY && m,
      [`${o}--${T.BODY}-${E.STRONGER}`]: $ === T.BODY && I,
      [`${o}--${T.BODY}-${E.STRONGEST}`]: $ === T.BODY && L,
      // Subtitle
      [`${o}--${T.SUBTITLE}`]: $ === T.SUBTITLE,
      [`${o}--${T.SUBTITLE}-${E.STRONGER}`]: $ === T.SUBTITLE && I,
      // Title
      [`${o}--${T.TITLE}`]: $ === T.TITLE && !O && !p,
      [`${o}--${T.TITLE}-${E.MEDIUM}`]: $ === T.TITLE && O,
      [`${o}--${T.TITLE}-${E.LARGE}`]: $ === T.TITLE && p
    }),
    [$, m, I, O, p, L]
  );
  return /* @__PURE__ */ f(s, { id: D, className: R([`${o}`, Y, N]), "data-testid": A, children: S });
}
const l = C(P);
export {
  l as default
};
