welcome-ui/dist/Text.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as p } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { forwardRef as x } from "./System.mjs";
import b, { th as d, system as f, css as i } from "@xstyled/styled-components";
const g = {
  h0: "h1",
  h1: "h2",
  h2: "h3",
  h3: "h4",
  h4: "h5",
  h5: "h6",
  h6: "h6"
}, k = (e) => i`
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-orient: vertical;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-line-clamp: ${e || "none"};
  line-height: normal;
  overflow: hidden;
  word-break: ${e === 1 ? "break-all" : null};
`, y = b.pBox(({ lines: e, theme: n, variant: t, withDash: l, wordBreak: o }) => {
  const h = g[t], r = t == null ? void 0 : t.startsWith("h"), s = e && e !== 1 / 0 && t.startsWith("h") && n.fonts.headings.includes("welcome-font");
  return i`
    ${d(`texts.${h || t}`)};
    word-break: ${o};

    /* Start fallback for non-webkit */
    display: block;
    ${e && e !== 1 / 0 && k(e)};
    /* End fallback for non-webkit */

    ${l && r && i`
      display: flex;

      &:before {
        content: '';
        width: 16;
        height: 4;
        display: flex;
        align-self: center;
        flex-shrink: 0;
        background-color: primary-40;
        margin-right: md;
      }
    `}

    @media (min-width: lg) {
      ${d(`texts.${t}`)};
      ${f}
    }

    ${s && i`
      & {
        line-height: 1.4;
      }
    `}
  `;
}), w = {
  h0: "h1",
  h1: "h1",
  h2: "h2",
  h3: "h3",
  h4: "h4",
  h5: "h5",
  h6: "h6",
  lg: "p",
  md: "p",
  sm: "p",
  "subtitle-md": "span",
  "subtitle-sm": "span",
  xs: "p"
}, $ = x(
  ({
    as: e,
    children: n,
    dataTestId: t,
    lines: l,
    variant: o = "md",
    withDash: h,
    wordBreak: r = "break-word",
    ...s
  }, a) => {
    const c = e || w[o], m = s.className || "";
    return /* @__PURE__ */ p.jsx(
      y,
      {
        as: c,
        "data-testid": t,
        lines: l,
        ref: a,
        variant: o,
        withDash: h,
        wordBreak: r,
        ...s,
        className: `${m} wui-text`,
        children: n
      }
    );
  }
);
$.displayName = "Text";
export {
  $ as Text
};