@pushengineering/umg-web-components 2.0.0

package/dist/packages/web-components/components/vertical-stack/vertical-stack.js

@@ -0,0 +1,95 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as u } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as c } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { styleMap as f } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { classMap as g } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { customElement as n } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as r } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { settings as y } from "../../scripts/settings.js";
+import { global as h } from "../../styles/global.js";
+import { groupMobileAlign as v, groupMobileJustify as b, groupAlign as d, groupJustify as j } from "../../styles/group.js";
+import { mergeStyles as k } from "../../scripts/mergeStyles.js";
+import { css as x } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var _ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (t, o, a, l) => {
+  for (var e = l > 1 ? void 0 : l ? A(o, a) : o, p = t.length - 1, m; p >= 0; p--)
+    (m = t[p]) && (e = (l ? m(o, a, e) : m(e)) || e);
+  return l && e && _(o, a, e), e;
+};
+const { prefix: J } = y;
+let s = class extends c {
+  constructor() {
+    super(...arguments), this.align = "stretch", this.justify = "start";
+  }
+  stackStyles() {
+    let t = {};
+    return this.gap !== void 0 && (t = {
+      ...t,
+      "--um-space-vertical-stack-gap": this.gap / 16 + "rem"
+    }), t;
+  }
+  stackClasses() {
+    const t = {};
+    return t["group-justify--" + this.justify] = !0, t["group-align--" + this.align] = !0, this.mobileJustify ? t["group-mobile-justify--" + this.mobileJustify] = !0 : t["group-mobile-justify--" + this.justify] = !0, this.mobileAlign ? t["group-mobile-align--" + this.mobileAlign] = !0 : t["group-mobile-align--" + this.align] = !0, t;
+  }
+  render() {
+    return u`
+            <div
+                class="vertical-stack${g(this.stackClasses())}"
+                style="${f(this.stackStyles())}"
+                >
+                <slot></slot>
+            </div>
+        `;
+  }
+};
+s.styles = k([
+  h,
+  x`
+            :host {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+            ::slotted(*) {
+                flex-shrink: 1;
+                height: auto;
+            }
+
+            .vertical-stack {
+                display: flex;
+                flex-direction: column;
+                gap: var(--um-space-vertical-stack-gap, var(--um-space-grid-desktop-vertical, 1rem));
+                height: 100%;
+            }
+
+            .vertical-stack.group-justify--stretch ::slotted(*) {
+                flex-grow: 1;
+                flex-shrink: 0;
+            }
+        `,
+  v,
+  b,
+  d,
+  j
+]);
+i([
+  r({ type: Number })
+], s.prototype, "gap", 2);
+i([
+  r()
+], s.prototype, "align", 2);
+i([
+  r()
+], s.prototype, "justify", 2);
+i([
+  r()
+], s.prototype, "mobileAlign", 2);
+i([
+  r()
+], s.prototype, "mobileJustify", 2);
+s = i([
+  n(`${J}-vertical-stack`)
+], s);
+export {
+  s as VerticalStack
+};

package/dist/packages/web-components/components/video/video.js

@@ -0,0 +1,185 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as r } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as d } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as m } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as o } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
+import { query as u } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query.js";
+import { classMap as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { ifDefined as v } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
+import { global as f } from "../../styles/global.js";
+import { placeholderMedia as g } from "../../styles/placeholder-media.js";
+import { settings as $ } from "../../scripts/settings.js";
+import { mergeStyles as w } from "../../scripts/mergeStyles.js";
+import { css as _ } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var P = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (e, a, p, h) => {
+  for (var s = h > 1 ? void 0 : h ? C(a, p) : a, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (s = (h ? n(a, p, s) : n(s)) || s);
+  return h && s && P(a, p, s), s;
+};
+const { prefix: b } = $;
+let t = class extends d {
+  constructor() {
+    super(), this.sources = [], this.posterSource = void 0, this.width = 100, this.height = 100, this.fit = "adapt", this.inBackground = !1, this.autoplay = !0, this.muted = !0, this.loop = !1, this.controls = !1, this._hasPlayed = !1, this.initialise();
+  }
+  containerClasses() {
+    const e = {};
+    return e["image-fit--" + this.fit] = !0, e;
+  }
+  async initialise() {
+    var e;
+    await this.updateComplete, this._hasPlayed || ((e = this._videoElement) == null || e.play(), this._hasPlayed = !0);
+  }
+  handleFirstPlay() {
+    this._hasPlayed || (this._hasPlayed = !0);
+  }
+  videoType() {
+    return this.inBackground ? r`
+                <video
+                    width="${this.width}"
+                    height="${this.height}"
+                    playsinline
+                    autoplay
+                    loop
+                    muted
+                    @play=${this.handleFirstPlay}
+                    >
+                    ${this.sources.map((e) => r`
+                        <source
+                            .src="${e.src}"
+                            .type="video/${e.type}"
+                            width="${this.width}"
+                            height="${this.height}"
+                            >
+                        </source>
+                    `)}
+                </video>
+            ` : r`
+            <video
+                width="${this.width}"
+                height="${this.height}"
+                poster="${v(this.posterSource)}"
+                ?controls="${this.controls}"
+                ?autoplay="${this.autoplay}"
+                ?loop="${this.loop}"
+                ?muted="${this.muted}"
+                @play=${this.handleFirstPlay}
+                >
+                ${this.sources.map((e) => r`
+                    <source
+                        .src="${e.src}"
+                        .type="video/${e.type}"
+                        width="${this.width}"
+                        height="${this.height}"
+                        >
+                    </source>
+                `)}
+            </video>
+        `;
+  }
+  video() {
+    return Array.isArray(this.sources) && this.sources.length ? r`
+                ${this.videoType()}
+            ` : r`
+            <div class="placeholder image image--desktop${c(this.containerClasses())}" style="aspect-ratio: ${this.width / this.height}">
+                <div class="placeholder-inner">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512" fill="currentcolor">
+                        <path d="M70.5 138.1C31 172.2 16 219.1 16 272c0 52 18.4 91.6 46.9 118.3C91.6 417.2 131.5 432 176 432h8.4c18.2 0 34.8-10.3 42.9-26.5l23.2-46.3C257.6 345 272.1 336 288 336s30.4 9 37.5 23.2l23.2 46.3c8.1 16.3 24.8 26.5 42.9 26.5H400c44.5 0 84.4-14.8 113.1-41.7C541.6 363.6 560 324 560 272c0-52.9-15-99.8-54.5-133.9C465.6 103.6 398.1 80 288 80s-177.6 23.6-217.5 58.1zM0 272C0 160 64 64 288 64s288 96 288 208s-80 176-176 176h-8.4c-24.2 0-46.4-13.7-57.2-35.4l-23.2-46.3c-4.4-8.8-13.3-14.3-23.2-14.3s-18.8 5.5-23.2 14.3l-23.2 46.3c-10.8 21.7-33 35.4-57.2 35.4H176C80 448 0 384 0 272zm160 32a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm0-112a64 64 0 1 1 0 128 64 64 0 1 1 0-128zm304 64a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm-112 0a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/>
+                    </svg>
+                </div>
+            </div>
+        `;
+  }
+  render() {
+    return r`
+        <div
+            class="video-container${c(this.containerClasses())}"
+            part="video-container"
+            >
+            ${this.video()}
+        </div>
+        `;
+  }
+};
+t.styles = w([
+  f,
+  g,
+  _`
+            :host {
+                display: block;
+            }
+            :host([fit=cover]),
+            :host([fit=contain]) {
+                height: 100%;
+            }
+
+            .video-container.image-fit--cover,
+            .video-container.image-fit--contain {
+                height: 100%;
+                position: relative;
+            }
+
+            .image-fit--cover video,
+            .image-fit--contain video {
+                position: absolute;
+                height: 100%;
+                width: 100%;
+            }
+
+            video, .image {
+                display: block;
+                height: auto;
+                width: 100%;
+            }
+
+            /* Image fit */
+            .image-fit--cover video {
+                object-fit: cover;
+            }
+            .image-fit--contain video {
+                object-fit: contain;
+            }
+        `
+]);
+i([
+  o({ type: Array })
+], t.prototype, "sources", 2);
+i([
+  o()
+], t.prototype, "posterSource", 2);
+i([
+  o({ type: Number })
+], t.prototype, "width", 2);
+i([
+  o({ type: Number })
+], t.prototype, "height", 2);
+i([
+  o({ type: String })
+], t.prototype, "fit", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "inBackground", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "autoplay", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "muted", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "loop", 2);
+i([
+  o({ type: Boolean })
+], t.prototype, "controls", 2);
+i([
+  y()
+], t.prototype, "_hasPlayed", 2);
+i([
+  u("video")
+], t.prototype, "_videoElement", 2);
+t = i([
+  m(`${b}-video`)
+], t);
+export {
+  t as Video
+};

package/dist/packages/web-components/scripts/mergeStyles.js

@@ -0,0 +1,8 @@
+import { themeStyleSheet as t } from "./themeStyleSheet.js";
+function l(e) {
+  const r = t(), o = Array.isArray(e) ? e : [e];
+  return r && o.push(r), o;
+}
+export {
+  l as mergeStyles
+};

package/dist/packages/web-components/scripts/polyfills/scrollyfills.js

@@ -0,0 +1,43 @@
+const u = "onscrollend" in window;
+if (!u) {
+  let s = function(r, e, l) {
+    let t = r[e];
+    r[e] = function() {
+      let n = Array.prototype.slice.apply(arguments, [0]);
+      t.apply(this, n), n.unshift(t), l.apply(this, n);
+    };
+  }, i = function(r, e) {
+    if (e != "scroll" && e != "scrollend")
+      return;
+    let l = this, t = o.get(l);
+    if (t === void 0) {
+      let n = 0;
+      t = {
+        scrollListener: (p) => {
+          clearTimeout(n), n = setTimeout(() => {
+            c.size ? setTimeout(t.scrollListener, 100) : (l.dispatchEvent(a), n = 0);
+          }, 100);
+        },
+        listeners: 0
+        // Count of number of listeners.
+      }, r.apply(l, ["scroll", t.scrollListener]), o.set(l, t);
+    }
+    t.listeners++;
+  }, d = function(r, e, l) {
+    if (e != "scroll" && e != "scrollend")
+      return;
+    let t = this, n = o.get(t);
+    n !== void 0 && (n[e]--, !(--n.listeners > 0) && (r.apply(t, ["scroll", n.scrollListener]), o.delete(t)));
+  };
+  var f = s, v = i, h = d;
+  const a = new Event("scrollend"), c = /* @__PURE__ */ new Set();
+  document.addEventListener("touchstart", (r) => {
+    for (let e of r.changedTouches)
+      c.add(e.identifier);
+  }, { passive: !0 }), document.addEventListener("touchend", (r) => {
+    for (let e of r.changedTouches)
+      c.delete(e.identifier);
+  }, { passive: !0 });
+  let o = /* @__PURE__ */ new WeakMap();
+  s(Element.prototype, "addEventListener", i), s(window, "addEventListener", i), s(document, "addEventListener", i), s(Element.prototype, "removeEventListener", d), s(window, "removeEventListener", d), s(document, "removeEventListener", d);
+}

package/dist/packages/web-components/scripts/settings.js

@@ -0,0 +1,7 @@
+const e = {
+  prefix: "umg",
+  globalConstructedStyleSheet: "umgtheme"
+};
+export {
+  e as settings
+};

package/dist/packages/web-components/scripts/themeStyleSheet.js

@@ -0,0 +1,9 @@
+import { settings as e } from "./settings.js";
+function n() {
+  const t = e.globalConstructedStyleSheet;
+  if (window.constructibleStyleSheets !== void 0 && window.constructibleStyleSheets[t] !== void 0)
+    return window.constructibleStyleSheets[t];
+}
+export {
+  n as themeStyleSheet
+};

package/dist/packages/web-components/scripts/utilities/debounce.js

@@ -0,0 +1,9 @@
+function o(t, i) {
+  let e = 0;
+  return function(...n) {
+    clearTimeout(e), e = setTimeout(() => t.apply(this, n), i);
+  };
+}
+export {
+  o as debounce
+};

package/dist/packages/web-components/scripts/utilities/paddingTransformations.js

@@ -0,0 +1,46 @@
+function n(t) {
+  const r = t == null ? void 0 : t.split(",");
+  if (r !== void 0 && Array.isArray(r) && r.length && r.length <= 4)
+    return r.length === 1 ? Array(4).fill(r[0]).flat() : r.length === 2 ? Array(2).fill(r).flat() : (r.length === 3 && r.push(r[1]), r);
+  if (r !== void 0 && Array.isArray(r) && r.length > 4) {
+    console.log("Maximum 4 values required in padding array.");
+    return;
+  }
+}
+function l(t) {
+  let r = [];
+  if (Array.isArray(t) && t && t.length) {
+    t.forEach((e) => {
+      e.map((o) => o === "" ? "0" : o);
+    }), r = t[0];
+    for (let e = 1; e < t.length; e++)
+      if (Array.isArray(t[e]) && t[e] !== void 0)
+        for (let o = 0; o < t[e].length; o++)
+          t[e][o] !== "" && (r[o] = t[e][o]);
+    const i = r.map((e) => (Number(e) / 16).toString() + "rem");
+    return {
+      unitless: {
+        top: r[0],
+        right: r[1],
+        bottom: r[2],
+        left: r[3]
+      },
+      rem: {
+        top: (Number(r[0]) / 16).toString() + "rem",
+        right: (Number(r[1]) / 16).toString() + "rem",
+        bottom: (Number(r[2]) / 16).toString() + "rem",
+        left: (Number(r[3]) / 16).toString() + "rem"
+      },
+      cssRem: i.join(" ")
+    };
+  }
+}
+function m(t) {
+  if (t)
+    return t.split(",").map((e) => e !== "0" ? (Number(e) / 16).toString() + "rem" : "0").join(" ");
+}
+export {
+  l as mergePaddingArrays,
+  n as paddingToCssShorthandArray,
+  m as paddingToRem
+};

package/dist/packages/web-components/styles/button.js

@@ -0,0 +1,55 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+const a = o`
+    .button {
+        cursor: pointer;
+        font-family: var(--um-font-family-button, --um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
+        font-weight: var(--um-font-weight-button, --um-font-weight-regular, 400);
+        font-size: var( --um-font-size-button-default, --um-font-size-body-sm, 0.875rem);
+        letter-spacing: 0.06rem;
+        color: rgb(var(--um-color-button-primary-text, var(--um-color-page-bg, 255,255,255)),1);
+        background-color: rgba(var(--um-color-button-primary-bg, var(--um-color-page-text, 62,62,62)),var(--um-opacity-button-bg, 1));
+        background-clip:padding-box;
+        border-color: rgba(var(--um-color-button-primary-bg, var(--um-color-page-text, 62,62,62)), var(--um-opacity-button-bg, 1));
+        border-radius: var(--um-border-button-radius, 0);
+        border-width: var(--um-border-button-width, 0.0625rem);
+        border-style: solid;
+        outline: none;
+        appearance: none;
+        text-decoration: none;
+        appearance: none;
+        --webkit-appearance: none;
+    }
+    a.button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: normal;
+    }
+    .button:not(.btn--plain):not(.btn--plain-underline):not(.btn--outline):hover {
+        box-shadow: 0 0 0 0.0625rem rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62,62,62)));
+    }
+    .button[disabled],
+    .button[disabled]:hover {
+        cursor: default;
+        color: rgb(var(--um-color-button-primary-text, var(--um-color-page-bg, 255,255,255)),0.5);
+    }
+    .button[disabled]:not(.btn--plain):not(.btn--plain-underline):not(.btn--outline),
+    .button[disabled]:not(.btn--plain):not(.btn--plain-underline):not(.btn--outline):hover {
+        background-color: rgba(var(--um-color-button-primary-bg, var(--um-color-page-text, 62,62,62)),var(--um-opacity-button-bg, 0.5));
+        border: none;
+        box-shadow: none;
+    }
+    .button:active {
+        outline: none;
+    }
+    .button:focus-visible {
+        outline-offset: 0.1875rem;
+        outline: 0.125rem solid rgba(var(--um-color-button-primary-bg, var(--um-color-page-text, 62,62,62)),1);
+    }
+`;
+export {
+  a as buttonState
+};

package/dist/packages/web-components/styles/fonts.js

@@ -0,0 +1,181 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+const n = t`
+  .txt--headingXs,
+  .txt--headingSm,
+  .txt--headingMd,
+  .txt--headingLg,
+  .txt--headingXl,
+  .txt--heading2xl,
+  .txt--heading3xl,
+  .txt--heading4xl,
+  .txt--heading5xl {
+    font-family: var(--um-font-family-heading, 'Roboto Serif', Times, 'Times New Roman', Georgia, serif);
+  }
+  .txt--bodyXs,
+  .txt--bodySm,
+  .txt--bodyMd,
+  .txt--bodyLg,
+  .txt--bodyXl,
+  .txt--body2xl,
+  .txt--body3xl,
+  .txt--body4xl,
+  .txt--body5xl {
+    font-family: var(--um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
+  }
+  .txt--headingXs {
+    font-size: var(--um-font-size-heading-xs, 0.75rem);
+    line-height: calc(1 + 0.2 / max(1, var(--um-font-size-heading-scale, 1)));
+  }
+  .txt--headingSm {
+    font-size: var(--um-font-size-heading-sm, 0.875rem);
+    line-height: calc(1 + 0.2 / max(1, var(--um-font-size-heading-scale, 1)));
+  }
+  .txt--headingMd {
+    font-size: var(--um-font-size-heading-md, 1rem);
+    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
+  }
+  .txt--headingLg {
+    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-lg, 1.25rem));
+    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
+  }
+  .txt--headingXl {
+    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-xl, 1.5rem));
+    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
+  }
+  .txt--heading2xl {
+    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-2xl, 1.75rem));
+    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
+  }
+  .txt--heading3xl {
+    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-3xl, 2rem));
+    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
+  }
+  .txt--heading4xl {
+    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-4xl, 3rem));
+    line-height: calc(1 + 0 / max(1, var(--um-font-size-heading-scale, 1)));
+  }
+  .txt--heading5xl {
+    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-5xl, 4rem));
+    line-height: calc(1 + 0 / max(1, var(--um-font-size-heading-scale, 1)));
+  }
+  .txt--bodyXs {
+    font-size: var(--um-font-size-body-xs, 0.75rem);
+    line-height: calc(1 + 0.2 / max(1, var(--um-font-size-body-scale, 1)));
+  }
+  .txt--bodySm {
+    font-size: var(--um-font-size-body-sm, 0.875rem);
+    line-height: calc(1 + 0.2 / max(1, var(--um-font-size-body-scale, 1)));
+  }
+  .txt--bodyMd {
+    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-md, 1rem));
+    line-height: calc(1 + 0.3 / max(1, var(--um-font-size-body-scale, 1)));
+  }
+  .txt--bodyLg {
+    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-lg, 1.25rem));
+    line-height: calc(1 + 0.25 / max(1, var(--um-font-size-body-scale, 1)));
+  }
+  .txt--bodyXl {
+    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-xl, 1.5rem));
+    line-height: calc(1 + 0.25 / max(1, var(--um-font-size-body-scale, 1)));
+  }
+  .txt--body2xl {
+    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-2xl, 1.75rem));
+    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-body-scale, 1)));
+  }
+  .txt--body3xl {
+    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-3xl, 2rem));
+    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-body-scale, 1)));
+  }
+  .txt--body4xl {
+    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-4xl, 3rem));
+    line-height: calc(1 + 0 / max(1, var(--um-font-size-body-scale, 1)));
+  }
+  .txt--body5xl {
+    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-5xl, 4rem));
+    line-height: calc(1 + 0 / max(1, var(--um-font-size-body-scale, 1)));
+  }
+`, m = t`
+.txt--light {
+  font-weight: var(--um-font-weight-light, 300);
+}
+.txt--regular {
+  font-weight: var(--um-font-weight-regular, 400);
+}
+.txt--medium {
+  font-weight: var(--um-font-weight-medium, 500);
+}
+.txt--semibold {
+  font-weight: var(--um-font-weight-semibold, 600);
+}
+.txt--bold {
+  font-weight: var(--um-font-weight-bold, 700);
+}
+.txt--extrabold {
+  font-weight: var(--um-font-weight-extrabold, 800);
+}
+.txt--black {
+  font-weight: var(--um-font-weight-black, 900);
+}
+`, l = t`
+    .txt--headingXs {
+      margin-bottom: var(--um-space-4, 0.25rem);
+    }
+    .txt--headingSm {
+      margin-bottom: var(--um-space-8, 0.5rem);
+    }
+    .txt--headingMd {
+      margin-bottom: var(--um-space-12, 0.75rem);
+    }
+    .txt--headingLg {
+      margin-bottom: var(--um-space-12, 0.75rem);
+    }
+    .txt--headingXl {
+      margin-bottom: var(--um-space-16, 1rem);
+    }
+    .txt--heading2xl {
+      margin-bottom: var(--um-space-16, 1rem);
+    }
+    .txt--heading3xl {
+      margin-bottom: var(--um-space-16, 1rem);
+    }
+    .txt--heading4xl {
+      margin-bottom: var(--um-space-20, 1.25rem);
+    }
+    .txt--heading5xl {
+      margin-bottom: var(--um-space-24, 1.5rem);
+    }
+    .txt--bodyXs {
+      margin-bottom: var(--um-space-4, 0.25rem);
+    }
+    .txt--bodySm {
+      margin-bottom: var(--um-space-8, 0.5rem);
+    }
+    .txt--bodyMd,
+    .txt--bodyLg,
+    .txt--bodyXl,
+    .txt--body2xl,
+    .txt--body3xl,
+    .txt--body4xl,
+    .txt--body5xl {
+      margin-bottom: var(--pu-space-12, 0.75rem);
+    }
+`, s = t`
+    .txt--italic {
+      font-style: italic;
+    }
+    .txt--oblique {
+      font-style: oblique;
+    }
+    .txt--normal {
+      font-style: normal;
+    }
+`;
+export {
+  l as fontMargins,
+  n as fontSizes,
+  s as fontStyle,
+  m as fontWeights
+};