welcome-ui 10.0.0-alpha.1 → 10.0.0-alpha.3

package/dist/Toggle.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs as z, jsx as e } from "react/jsx-runtime";
-import { C as v } from "./KPUWHTQJ-D2TPji47.js";
+import { C as v } from "./KPUWHTQJ-Byij2al4.js";
 import { forwardRef as f } from "react";
 import { useField as h } from "./Field.js";
 import { Icon as n } from "./Icon.js";
-import { c as w } from "./index-CdiHdiVB.js";
+import { c as w } from "./index-PAaZGbyz.js";
 const g = "_root_1czvn_2", k = "_wrapper_1czvn_100", u = "_checked_1czvn_120", x = "_disabled_1czvn_124", b = {
   root: g,
   "size-sm": "_size-sm_1czvn_82",

package/dist/Tooltip.css

@@ -1 +1 @@
-@layer components{._root_aoc8w_2{background-color:var(--color-background-neutral-primary-fixed);border:var(--components-dimensions-tooltip-border-width) solid var(--color-icon-neutral-subtle);border-radius:var(--border-radius-sm);box-sizing:border-box;color:var(--components-colors-tooltip-color-text);font-size:var(--components-dimensions-tooltip-padding-inline);font-weight:var(--font-weight-medium);max-width:12.5rem;padding:var(--border-radius-sm) var(--components-dimensions-tooltip-padding-block);transition-property:opacity,visibility;transition-duration:var(--duration-medium);z-index:10;visibility:var(--visibility, hidden);opacity:var(--opacity, 0)}._root_aoc8w_2[data-enter=true]{--visibility: visible;--opacity: 1}._childItem_aoc8w_22{display:inline-block}}
+@layer components{._root_11jvu_2{display:flex;flex-direction:column;gap:var(--components-dimensions-tooltip-gap-content);background-color:var(--components-colors-tooltip-color-background);border:var(--components-dimensions-tooltip-border-width) solid var(--components-colors-tooltip-color-border);border-radius:var(--components-dimensions-tooltip-border-radius);box-sizing:border-box;color:var(--components-colors-tooltip-color-text);max-width:12.5rem;padding:var(--components-dimensions-tooltip-padding-block) var(--components-dimensions-tooltip-padding-inline);transition-property:opacity,visibility;transition-duration:var(--duration-medium);z-index:10;visibility:var(--visibility, hidden);opacity:var(--opacity, 0);box-shadow:var(--elevation-20)}._root_11jvu_2[data-enter=true]{--visibility: visible;--opacity: 1}._childItem_11jvu_24{display:inline-block}}

package/dist/Tooltip.js

@@ -1,24 +1,25 @@
 "use client";
-import { jsx as T, jsxs as $, Fragment as Y } from "react/jsx-runtime";
-import { H as J, a as K, u as Q, c as U, b as X, d as Z, e as ee } from "./GVVKDT6A-bET6V7Py.js";
-import { e as te, f as x, c as H, b as A, _ as C, i as N, x as oe, a as b, d as z, z as y, q as re, S as ne, u as w, G as D, H as P, I as O } from "./OE2EFRVA-C3721cM3.js";
-import { c as se } from "./NI3IVY7K-Ztb3-XAv.js";
-import { a as F, c as L, b as ae, d as M, u as ie } from "./RTNCFSKZ-qpPg689E.js";
-import ue, { useRef as le, useEffect as g, forwardRef as ce, useState as pe, useCallback as de } from "react";
-import { c as ve } from "./index-CdiHdiVB.js";
-var k = te(
-  [K],
-  [J]
-), me = k.useContext, V = k.useProviderContext, fe = k.ScopedContextProvider, Se = "div", he = H(
-  function(r) {
-    var t = r, {
+import { jsx as h, jsxs as N, Fragment as J } from "react/jsx-runtime";
+import { H as K, a as Q, u as U, b as X, c as Z, d as ee } from "./GVVKDT6A-C66-lr0B.js";
+import { e as te, f as $, c as F, b as M, _ as B, i as D, x as oe, a as P, d as L, z as x, q as re, T as ne, u as g, G as V, H as E, I as y } from "./OE2EFRVA-DkdhQLJL.js";
+import { c as se } from "./NI3IVY7K-DpF3td-7.js";
+import { a as I, c as q, b as ae, d as A, u as ie } from "./RTNCFSKZ-LcIdBwa8.js";
+import ue, { useRef as le, useEffect as H, forwardRef as ce, useState as de, useCallback as pe } from "react";
+import { Text as R } from "./Text.js";
+import { c as ve } from "./index-PAaZGbyz.js";
+var z = te(
+  [Q],
+  [K]
+), w = z.useProviderContext, me = z.ScopedContextProvider, fe = "div", he = F(
+  function(n) {
+    var o = n, {
       store: e,
-      portal: c = !0,
+      portal: p = !0,
       gutter: s = 8,
-      preserveTabOrder: v = !1,
+      preserveTabOrder: m = !1,
       hideOnHoverOutside: d = !0,
       hideOnInteractOutside: f = !0
-    } = t, a = C(t, [
+    } = o, a = B(o, [
       "store",
       "portal",
       "gutter",
@@ -26,207 +27,195 @@ var k = te(
       "hideOnHoverOutside",
       "hideOnInteractOutside"
     ]);
-    const p = V();
-    e = e || p, N(
+    const c = w();
+    e = e || c, D(
       e,
       process.env.NODE_ENV !== "production" && "Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component."
     ), a = oe(
       a,
-      (i) => /* @__PURE__ */ T(fe, { value: e, children: i }),
+      (i) => /* @__PURE__ */ h(me, { value: e, children: i }),
       [e]
     );
     const S = e.useState(
       (i) => i.type === "description" ? "tooltip" : "none"
     );
-    return a = b({ role: S }, a), a = Q(z(b({}, a), {
+    return a = P({ role: S }, a), a = U(L(P({}, a), {
       store: e,
-      portal: c,
+      portal: p,
       gutter: s,
-      preserveTabOrder: v,
+      preserveTabOrder: m,
       hideOnHoverOutside(i) {
-        if (y(d, i)) return !1;
+        if (x(d, i)) return !1;
         const u = e == null ? void 0 : e.getState().anchorElement;
         return u ? !("focusVisible" in u.dataset) : !0;
       },
       hideOnInteractOutside: (i) => {
-        if (y(f, i)) return !1;
+        if (x(f, i)) return !1;
         const u = e == null ? void 0 : e.getState().anchorElement;
         return u ? !re(u, i.target) : !0;
       }
     })), a;
   }
-), Te = se(
-  x(function(r) {
-    const t = he(r);
-    return A(Se, t);
+), Se = se(
+  $(function(n) {
+    const o = he(n);
+    return M(fe, o);
   }),
-  V
-), be = "div", m = L({
+  w
+), Te = "div", v = q({
   activeStore: null
 });
-function j(o) {
+function j(t) {
   return () => {
-    const { activeStore: r } = m.getState();
-    r === o && m.setState("activeStore", null);
+    const { activeStore: n } = v.getState();
+    n === t && v.setState("activeStore", null);
   };
 }
-var _e = H(
-  function(r) {
-    var t = r, { store: e, showOnHover: c = !0 } = t, s = C(t, ["store", "showOnHover"]);
-    const v = V();
-    e = e || v, N(
+var be = F(
+  function(n) {
+    var o = n, { store: e, showOnHover: p = !0 } = o, s = B(o, ["store", "showOnHover"]);
+    const m = w();
+    e = e || m, D(
       e,
       process.env.NODE_ENV !== "production" && "TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component."
     );
     const d = le(!1);
-    g(() => F(e, ["mounted"], (n) => {
-      n.mounted || (d.current = !1);
-    }), [e]), g(() => {
+    H(() => I(e, ["mounted"], (r) => {
+      r.mounted || (d.current = !1);
+    }), [e]), H(() => {
       if (e)
         return ne(
           // Immediately remove the current store from the global store when
           // the component unmounts. This is useful, for example, to avoid
           // showing tooltips immediately on serial tests.
           j(e),
-          F(e, ["mounted", "skipTimeout"], (n) => {
+          I(e, ["mounted", "skipTimeout"], (r) => {
             if (!e) return;
-            if (n.mounted) {
-              const { activeStore: h } = m.getState();
-              return h !== e && (h == null || h.hide()), m.setState("activeStore", e);
+            if (r.mounted) {
+              const { activeStore: T } = v.getState();
+              return T !== e && (T == null || T.hide()), v.setState("activeStore", e);
             }
             const l = setTimeout(
               j(e),
-              n.skipTimeout
+              r.skipTimeout
             );
             return () => clearTimeout(l);
           })
         );
     }, [e]);
-    const f = s.onMouseEnter, a = w((n) => {
-      f == null || f(n), d.current = !0;
-    }), p = s.onFocusVisible, S = w((n) => {
-      p == null || p(n), !n.defaultPrevented && (e == null || e.setAnchorElement(n.currentTarget), e == null || e.show());
-    }), i = s.onBlur, u = w((n) => {
-      if (i == null || i(n), n.defaultPrevented) return;
-      const { activeStore: l } = m.getState();
-      d.current = !1, l === e && m.setState("activeStore", null);
-    }), _ = e.useState("type"), E = e.useState((n) => {
+    const f = s.onMouseEnter, a = g((r) => {
+      f == null || f(r), d.current = !0;
+    }), c = s.onFocusVisible, S = g((r) => {
+      c == null || c(r), !r.defaultPrevented && (e == null || e.setAnchorElement(r.currentTarget), e == null || e.show());
+    }), i = s.onBlur, u = g((r) => {
+      if (i == null || i(r), r.defaultPrevented) return;
+      const { activeStore: l } = v.getState();
+      d.current = !1, l === e && v.setState("activeStore", null);
+    }), b = e.useState("type"), _ = e.useState((r) => {
       var l;
-      return (l = n.contentElement) == null ? void 0 : l.id;
+      return (l = r.contentElement) == null ? void 0 : l.id;
     });
-    return s = z(b({
-      "aria-labelledby": _ === "label" ? E : void 0
+    return s = L(P({
+      "aria-labelledby": b === "label" ? _ : void 0
     }, s), {
       onMouseEnter: a,
       onFocusVisible: S,
       onBlur: u
-    }), s = U(b({
+    }), s = X(P({
       store: e,
-      showOnHover(n) {
-        if (!d.current || y(c, n)) return !1;
-        const { activeStore: l } = m.getState();
+      showOnHover(r) {
+        if (!d.current || x(p, r)) return !1;
+        const { activeStore: l } = v.getState();
         return l ? (e == null || e.show(), !1) : !0;
       }
     }, s)), s;
   }
-), Ee = x(function(r) {
-  const t = _e(r);
-  return A(be, t);
-}), Pe = "div", Oe = H(
-  function(r) {
-    var t = r, { store: e, size: c = 16 } = t, s = C(t, ["store", "size"]);
-    const v = me();
-    return e = e || v, N(
-      e,
-      process.env.NODE_ENV !== "production" && "TooltipArrow must be wrapped in a Tooltip component."
-    ), s = X(b({ store: e, size: c }, s)), s;
-  }
-), we = x(function(r) {
-  const t = Oe(r);
-  return A(Pe, t);
+), _e = $(function(n) {
+  const o = be(n);
+  return M(Te, o);
 });
-function ye(o = {}) {
-  var r;
-  process.env.NODE_ENV !== "production" && o.type === "label" && console.warn(
+function Ee(t = {}) {
+  var n;
+  process.env.NODE_ENV !== "production" && t.type === "label" && console.warn(
     "The `type` option on the tooltip store is deprecated.",
     "Render a visually hidden label or use the `aria-label` or `aria-labelledby` attributes on the anchor element instead.",
     "See https://ariakit.org/components/tooltip#tooltip-anchors-must-have-accessible-names"
   );
-  const t = (r = o.store) == null ? void 0 : r.getState(), e = Z(D(O({}, o), {
-    placement: P(
-      o.placement,
-      t == null ? void 0 : t.placement,
+  const o = (n = t.store) == null ? void 0 : n.getState(), e = Z(V(y({}, t), {
+    placement: E(
+      t.placement,
+      o == null ? void 0 : o.placement,
       "top"
     ),
-    hideTimeout: P(o.hideTimeout, t == null ? void 0 : t.hideTimeout, 0)
-  })), c = D(O({}, e.getState()), {
-    type: P(o.type, t == null ? void 0 : t.type, "description"),
-    skipTimeout: P(o.skipTimeout, t == null ? void 0 : t.skipTimeout, 300)
-  }), s = L(c, e, o.store);
-  return O(O({}, e), s);
+    hideTimeout: E(t.hideTimeout, o == null ? void 0 : o.hideTimeout, 0)
+  })), p = V(y({}, e.getState()), {
+    type: E(t.type, o == null ? void 0 : o.type, "description"),
+    skipTimeout: E(t.skipTimeout, o == null ? void 0 : o.skipTimeout, 300)
+  }), s = q(p, e, t.store);
+  return y(y({}, e), s);
 }
-function ge(o, r, t) {
-  return M(o, t, "type"), M(o, t, "skipTimeout"), ee(o, r, t);
+function ye(t, n, o) {
+  return A(t, o, "type"), A(t, o, "skipTimeout"), ee(t, n, o);
 }
-function xe(o = {}) {
-  const [r, t] = ae(ye, o);
-  return ge(r, t, o);
+function Pe(t = {}) {
+  const [n, o] = ae(Ee, t);
+  return ye(n, o, t);
 }
-const He = "_root_aoc8w_2", Ae = "_childItem_aoc8w_22", Ce = {
-  root: He,
-  childItem: Ae
-}, B = ve(Ce), Fe = ce(
+const ge = "_root_11jvu_2", Oe = "_childItem_11jvu_24", xe = {
+  root: ge,
+  childItem: Oe
+}, O = ve(xe), Re = ce(
   ({
-    children: o,
-    className: r = "",
-    content: t,
+    children: t,
+    className: n = "",
+    content: o,
     fixed: e = !1,
-    gutter: c = 8,
+    gutter: p = 8,
     placement: s = e ? "top" : "bottom",
-    withArrow: v = !1,
+    title: m,
     ...d
   }, f) => {
-    var I;
-    const a = xe({ animated: 300, placement: s }), { anchorElement: p, mounted: S, popoverElement: i } = ie(a), { render: u, setState: _ } = a, [E, n] = pe({ x: 0, y: 0 }), l = () => {
+    var k;
+    const a = Pe({ animated: 300, placement: s }), { anchorElement: c, mounted: S, popoverElement: i } = ie(a), { render: u, setState: b } = a, [_, r] = de({ x: 0, y: 0 }), l = () => {
       i && Object.assign(i.style, {
         display: S ? "block" : "none",
-        left: `${E.x}px`,
+        left: `${_.x}px`,
         position: "absolute",
-        top: `${E.y + window.scrollY + 20}px`
+        top: `${_.y + window.scrollY + 20}px`
       });
-    }, h = de(() => {
-      _("animating", !1);
-    }, [_]), q = (I = o == null ? void 0 : o.props) != null && I.disabled ? ue.Children.only(/* @__PURE__ */ T("span", { className: B("childItem"), children: o })) : o;
-    return g(() => {
-      function R({ clientX: G, clientY: W }) {
-        n({ x: G, y: W }), u();
+    }, T = pe(() => {
+      b("animating", !1);
+    }, [b]), G = (k = t == null ? void 0 : t.props) != null && k.disabled ? ue.Children.only(/* @__PURE__ */ h("span", { className: O("childItem"), children: t })) : t;
+    return H(() => {
+      function C({ clientX: W, clientY: Y }) {
+        r({ x: W, y: Y }), u();
       }
-      if (p && !e)
-        return p.addEventListener("mousemove", R), () => {
-          p.removeEventListener("mousemove", R);
+      if (c && !e)
+        return c.addEventListener("mousemove", C), () => {
+          c.removeEventListener("mousemove", C);
         };
-    }, [u, e, p]), t ? /* @__PURE__ */ $(Y, { children: [
-      /* @__PURE__ */ T(Ee, { render: q, store: a }),
-      /* @__PURE__ */ $(
-        Te,
+    }, [u, e, c]), o ? /* @__PURE__ */ N(J, { children: [
+      /* @__PURE__ */ h(_e, { render: G, store: a }),
+      /* @__PURE__ */ N(
+        Se,
         {
-          className: B("root", r),
+          className: O("root", n),
           fixed: e,
-          gutter: c,
-          onTransitionEnd: h,
+          gutter: p,
+          onTransitionEnd: T,
           ref: f,
-          render: /* @__PURE__ */ T("div", { ...d }),
+          render: /* @__PURE__ */ h("div", { ...d }),
           store: a,
           updatePosition: e ? void 0 : l,
           children: [
-            v ? /* @__PURE__ */ T(we, {}) : null,
-            t
+            m ? /* @__PURE__ */ h(R, { as: "span", className: O("title"), variant: "label-md-strong", children: m }) : null,
+            /* @__PURE__ */ h(R, { as: "span", variant: "body-md-strong", children: o })
           ]
         }
       )
-    ] }) : o;
+    ] }) : t;
   }
 );
 export {
-  Fe as Tooltip
+  Re as Tooltip
 };

package/dist/VariantIcon.js

@@ -2,7 +2,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
 import { Icon as e } from "./Icon.js";
-import { c as _ } from "./index-CdiHdiVB.js";
+import { c as _ } from "./index-PAaZGbyz.js";
 const m = "_root_iop02_2", p = {
   root: m,
   "variant-ai": "_variant-ai_iop02_9",

package/dist/VisuallyHidden.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import { c as a } from "./index-CdiHdiVB.js";
+import { c as a } from "./index-PAaZGbyz.js";
 import { f as c } from "./forwardRefWithAs-8eP3ZN15.js";
 import "react";
 const e = "_root_w3556_2", m = {

package/dist/WelcomeLoader.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as As } from "react/jsx-runtime";
-import { a as br, c as Ps } from "./index-CdiHdiVB.js";
+import { a as br, c as Ps } from "./index-PAaZGbyz.js";
 import ws, { forwardRef as Cs } from "react";
 var Ke = { exports: {} }, Es = Ke.exports, _r;
 function Ms() {

package/dist/{XCKGTAUF-DkxWCbaW.js → XCKGTAUF-CahZE721.js}

@@ -1,6 +1,6 @@
 "use client";
-import { u as f } from "./2W3RN7C5-bkX-rIa3.js";
-import { f as c, c as m, b as i, N as B, O as u, d as l, p as d, a as v } from "./OE2EFRVA-C3721cM3.js";
+import { u as f } from "./2W3RN7C5-uG7eBeTQ.js";
+import { f as c, c as m, b as i, O as B, P as u, d as l, p as d, a as v } from "./OE2EFRVA-DkdhQLJL.js";
 import { useRef as N, useState as g, useEffect as _ } from "react";
 var s = "button", b = m(
   function(t) {
@@ -15,11 +15,11 @@ var s = "button", b = m(
       ref: d(e, t.ref)
     }), t = f(t), t;
   }
-), P = c(function(t) {
+), E = c(function(t) {
   const e = b(t);
   return i(s, e);
 });
 export {
-  P as B,
+  E as B,
   b as u
 };

package/dist/{Y67KZUMI-DFEgrUv2.js → Y67KZUMI-BDyUNSJw.js}

@@ -1,6 +1,6 @@
 "use client";
-import { g as o, k as r } from "./T22PY7TE-C1N0q8Kn.js";
-import { e as t } from "./OE2EFRVA-C3721cM3.js";
+import { g as o, k as r } from "./T22PY7TE-CzEDuEn1.js";
+import { e as t } from "./OE2EFRVA-DkdhQLJL.js";
 var e = t(
   [r],
   [o]
@@ -9,7 +9,7 @@ e.useScopedContext;
 var i = e.useProviderContext, n = e.ContextProvider, s = e.ScopedContextProvider;
 export {
   s as P,
-  n as a,
-  x as b,
-  i as u
+  i as a,
+  n as b,
+  x as u
 };

package/dist/{ZTXFEM5L-CkrIQCN1.js → ZTXFEM5L-CjFLRObi.js}

@@ -1,7 +1,7 @@
 "use client";
-import { u } from "./NMGNQVTG-C6TqBngP.js";
-import { b as c } from "./T22PY7TE-C1N0q8Kn.js";
-import { f as l, c as p, b as D, _ as m, i as g, a, C as v } from "./OE2EFRVA-C3721cM3.js";
+import { u } from "./NMGNQVTG-BgAqqGOq.js";
+import { b as c } from "./T22PY7TE-CzEDuEn1.js";
+import { f as l, c as p, b as D, _ as m, i as g, a, C as v } from "./OE2EFRVA-DkdhQLJL.js";
 var f = "button", d = p(
   function(r) {
     var s = r, { store: o } = s, e = m(s, ["store"]);

package/dist/{downshift.esm-D_6pHXkq.js → downshift.esm-xtYanIDi.js}

@@ -1,5 +1,5 @@
 "use client";
-import { P as n, a as ve } from "./tslib.es6-DpB4Y59c.js";
+import { P as n, a as ve } from "./tslib.es6-C80jYMbM.js";
 import { cloneElement as et, Component as tt } from "react";
 function Z(t, o) {
   if (t == null) return {};

package/dist/scss/breakpoints.scss

@@ -0,0 +1,9 @@
+/* screens - auto-generated from token.ts - do not edit directly */
+$breakpoint-xs: 0px;
+$breakpoint-sm: 480px;
+$breakpoint-md: 736px;
+$breakpoint-lg: 980px;
+$breakpoint-xl: 1280px;
+$breakpoint-2xl: 1440px;
+$breakpoint-3xl: 1620px;
+$breakpoint-4xl: 1920px;

package/dist/scss/text-ellipsis.scss

@@ -0,0 +1,5 @@
+@mixin text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/scss/texts.scss

@@ -0,0 +1,108 @@
+@mixin h0 {
+  color: #000000;
+  font-family: welcome-font, sans-serif;
+  font-size: 4.0625rem;
+  font-weight: 600;
+  letter-spacing: -0.10625rem;
+  line-height: 4.5rem;
+}
+
+@mixin h1 {
+  color: #000000;
+  font-family: welcome-font, sans-serif;
+  font-size: 2.8125rem;
+  font-weight: 600;
+  letter-spacing: -0.075rem;
+  line-height: 3rem;
+}
+
+@mixin h2 {
+  color: #000000;
+  font-family: welcome-font, sans-serif;
+  font-size: 2.25rem;
+  font-weight: 600;
+  letter-spacing: -0.0625rem;
+  line-height: 2.5rem;
+}
+
+@mixin h3 {
+  color: #000000;
+  font-family: welcome-font, sans-serif;
+  font-size: 1.625rem;
+  font-weight: 600;
+  letter-spacing: -0.05625rem;
+  line-height: 2rem;
+}
+
+@mixin h4 {
+  color: #000000;
+  font-family: welcome-font, sans-serif;
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.0375rem;
+  line-height: 1.5rem;
+}
+
+@mixin h5 {
+  color: #000000;
+  font-family: welcome-font, sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.03125rem;
+  line-height: 1.125rem;
+}
+
+@mixin h6 {
+  color: #000000;
+  font-family: welcome-font, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.03125rem;
+  line-height: 1rem;
+}
+
+@mixin lg {
+  font-size: 1.125rem;
+  font-weight: 400;
+  letter-spacing: -0.019rem;
+  line-height: 1.5rem;
+}
+
+@mixin md {
+  font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: -0.019rem;
+  line-height: 1.125rem;
+}
+
+@mixin sm {
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: -0.019rem;
+  line-height: 1.125rem;
+}
+
+@mixin subtitle-md {
+  font-family: welcome-font, sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: -0.0125rem;
+  line-height: 1.15;
+  text-transform: uppercase;
+}
+
+@mixin subtitle-sm {
+  font-family: welcome-font, sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: -0.0125rem;
+  line-height: 1.15;
+  text-transform: uppercase;
+}
+
+@mixin xs {
+  font-size: 0.75rem;
+  font-weight: 400;
+  letter-spacing: -0.0125rem;
+  line-height: 0.875rem;
+}