@phillips/seldon 1.40.0 → 1.42.0

package/dist/components/Search/Search.js

@@ -1,113 +1,131 @@
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import * as v from "react";
-import { getCommonProps as L, encodeURLSearchParams as k } from "../../utils/index.js";
-import o from "../../node_modules/classnames/index.js";
-import E from "../Input/Input.js";
-import $ from "../../assets/search.svg.js";
-import P from "../Link/Link.js";
-import j from "./SearchResults/SearchResults.js";
-const V = ({
-  useIcon: i = !0,
-  onSearch: d,
-  searchResults: b = [],
-  state: m = "idle",
-  defaultValue: N = "",
-  className: S,
-  placeholder: y = "Type to search",
-  searchButtonText: n = "Search",
-  loadingText: g = "Loading...",
-  invalidText: w = "Invalid search",
-  getAllResultsText: R = (e) => `View all results for ${e}`,
-  getAllResultsLink: C = (e) => `/Search?Search=${e}`,
-  ...u
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
+import * as d from "react";
+import { getCommonProps as P, encodeURLSearchParams as N } from "../../utils/index.js";
+import f from "../../node_modules/classnames/index.js";
+import T from "../Input/Input.js";
+import j from "../../assets/search.svg.js";
+import D from "../../assets/close.svg.js";
+import V from "../../assets/loading_spinner.svg.js";
+import A from "../Link/Link.js";
+import F from "./SearchResults/SearchResults.js";
+import { TextVariants as H } from "../Text/types.js";
+import K from "../Text/Text.js";
+const Z = ({
+  onSearch: h,
+  searchResults: R = [],
+  state: s = "idle",
+  defaultValue: C = "",
+  className: w,
+  placeholder: l,
+  searchButtonText: c = "Search",
+  loadingText: x = "Search In Progress...",
+  invalidText: k = "Invalid search",
+  getAllResultsText: y = (e) => `View all results for ${e}`,
+  getAllResultsLink: _ = (e) => `/Search?Search=${e}`,
+  ...p
 }) => {
-  var _;
-  const { className: e, "data-testid": t, ...x } = L(u, "Search"), [s, p] = v.useState(!1), c = v.useRef(null), l = (_ = c.current) == null ? void 0 : _.value, h = () => {
-    var r;
-    p(!s), s || (r = c.current) == null || r.focus();
+  var g;
+  const { className: e, "data-testid": r, ...L } = P(p, "Search"), [n, b] = d.useState(!1), m = d.useRef(null), u = d.useRef(null), o = (g = m.current) == null ? void 0 : g.value, E = s === "loading" || s === "submitting", $ = () => {
+    var t, i;
+    if (b(!n), n) {
+      (t = u.current) == null || t.reset();
+      return;
+    }
+    (i = m.current) == null || i.focus();
+  }, S = (t) => {
+    var i;
+    if (t.stopPropagation(), t.key === "Enter") {
+      if (t.preventDefault(), o && o.length > 2) {
+        const I = N(_(o));
+        window.location.href = I;
+      }
+      t.currentTarget instanceof HTMLAnchorElement && t.currentTarget.click();
+    }
+    t.key === "Escape" && (b(!1), (i = u.current) == null || i.reset());
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ v(
     "div",
     {
-      ...x,
-      className: o(e, S),
-      "data-testid": t,
+      ...L,
+      className: f(e, w),
+      "data-testid": r,
       role: "search",
-      ...u,
+      ...p,
       children: [
-        /* @__PURE__ */ a(
-          "div",
+        /* @__PURE__ */ a(K, { variant: H.heading3, className: `${e}__label`, children: c }),
+        n ? null : /* @__PURE__ */ a(
+          "button",
           {
-            "data-testid": `${t}-overlay`,
-            className: o(`${e}__overlay`, { [`${e}__overlay--active`]: s }),
-            onClick: h
+            type: "button",
+            "data-testid": `${r}-button`,
+            "aria-label": c,
+            className: `${e}__button ${e}__button--search`,
+            onClick: $,
+            children: /* @__PURE__ */ a(j, { "data-testid": `${r}-button-icon`, className: `${e}__button__icon` })
           }
         ),
-        /* @__PURE__ */ a(
+        n && s === "idle" ? /* @__PURE__ */ a(
           "button",
           {
-            "data-testid": `${t}-button`,
-            "aria-label": n,
-            className: `${e}__button`,
-            onClick: h,
-            children: i ? /* @__PURE__ */ a($, { "data-testid": `${t}-button-icon`, className: `${e}__button__icon` }) : n
+            type: "button",
+            "data-testid": `${r}-close-button`,
+            "aria-label": "Close Search",
+            className: `${e}__button ${e}__button--close`,
+            onClick: $,
+            children: /* @__PURE__ */ a(D, { "data-testid": `${r}-form-icon`, className: `${e}__button__icon` })
           }
-        ),
+        ) : null,
+        n && E ? /* @__PURE__ */ a(
+          V,
+          {
+            "data-testid": `${r}-form-icon`,
+            className: `${e}__button__icon ${e}__input-status-icon`
+          }
+        ) : null,
         /* @__PURE__ */ a(
           "form",
           {
-            "data-testid": `${t}-form`,
-            className: o(`${e}__form`, { [`${e}__form--active`]: s }),
-            "aria-hidden": !s,
-            children: /* @__PURE__ */ f(
-              "div",
-              {
-                className: o(`${e}__input-wrapper`, {
-                  [`${e}__input-wrapper--use-icon`]: i
-                }),
-                role: "combobox",
-                "aria-haspopup": "listbox",
-                children: [
-                  i ? /* @__PURE__ */ a($, { "data-testid": `${t}-form-icon`, className: `${e}__input-wrapper__icon` }) : null,
-                  /* @__PURE__ */ a(
-                    E,
-                    {
-                      className: `${e}__input`,
-                      id: "search-input",
-                      hideLabel: !0,
-                      labelText: n,
-                      placeholder: y,
-                      type: "text",
-                      defaultValue: N,
-                      invalid: m === "invalid",
-                      invalidText: w,
-                      onKeyDown: (r) => {
-                        r.key === "Escape" && p(!1);
-                      },
-                      onChange: d ? (r) => {
-                        d(r.target.value);
-                      } : void 0,
-                      ref: c
-                    }
-                  ),
-                  l && l.length > 2 ? /* @__PURE__ */ a(
-                    j,
+            "data-testid": `${r}-form`,
+            className: f(`${e}__form`, { [`${e}__form--active`]: n }),
+            "aria-hidden": !n,
+            ref: u,
+            children: /* @__PURE__ */ v("div", { className: f(`${e}__content-wrapper`), role: "combobox", "aria-haspopup": "listbox", children: [
+              /* @__PURE__ */ a(
+                T,
+                {
+                  className: `${e}__input`,
+                  id: "search-input",
+                  hideLabel: !0,
+                  labelText: c,
+                  placeholder: l != null ? l : null,
+                  type: "text",
+                  defaultValue: C,
+                  invalid: s === "invalid",
+                  invalidText: k,
+                  onKeyDown: S,
+                  onChange: h ? (t) => {
+                    h(t.target.value);
+                  } : void 0,
+                  ref: m
+                }
+              ),
+              o && o.length > 2 ? /* @__PURE__ */ a(
+                F,
+                {
+                  autoCompleteResults: R,
+                  isLoading: s === "loading",
+                  loadingText: x,
+                  onKeyDown: S,
+                  children: /* @__PURE__ */ a("li", { className: `${e}__result`, children: /* @__PURE__ */ a(
+                    A,
                     {
-                      autoCompleteResults: b,
-                      isLoading: m === "loading",
-                      loadingText: g,
-                      children: /* @__PURE__ */ a("li", { className: `${e}__result`, children: /* @__PURE__ */ a(
-                        P,
-                        {
-                          href: ((r) => k(C(r)))(l),
-                          children: /* @__PURE__ */ a("p", { children: R(l) })
-                        }
-                      ) }, "viewAllSearchResults")
+                      href: ((t) => N(_(t)))(o),
+                      children: /* @__PURE__ */ a("p", { children: y(o) })
                     }
-                  ) : null
-                ]
-              }
-            )
+                  ) }, "viewAllSearchResults")
+                }
+              ) : null
+            ] })
           }
         )
       ]
@@ -115,5 +133,5 @@ const V = ({
   );
 };
 export {
-  V as default
+  Z as default
 };

package/dist/components/Search/SearchResults/SearchResults.d.ts

@@ -1,13 +1,15 @@
 import * as React from 'react';
+export interface SearchResult {
+    id: string;
+    url: string;
+    label: string;
+}
 export interface SearchResultsProps extends React.HTMLAttributes<HTMLElement> {
-    autoCompleteResults?: {
-        id: string;
-        url: string;
-        label: string;
-    }[];
+    autoCompleteResults?: SearchResult[];
     isLoading?: boolean;
     children?: React.ReactNode;
     loadingText?: string;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
 }
-declare const SearchResults: ({ autoCompleteResults, isLoading, children, loadingText, }: React.PropsWithChildren<SearchResultsProps>) => import("react/jsx-runtime").JSX.Element;
+declare const SearchResults: ({ autoCompleteResults, isLoading, children, loadingText, onKeyDown, }: React.PropsWithChildren<SearchResultsProps>) => import("react/jsx-runtime").JSX.Element;
 export default SearchResults;

package/dist/components/Search/SearchResults/SearchResults.js

@@ -1,16 +1,20 @@
-import { jsxs as h, jsx as r } from "react/jsx-runtime";
-import { px as e } from "../../../utils/index.js";
-import n from "../../Link/Link.js";
-const _ = ({
-  autoCompleteResults: s = [],
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { px as s } from "../../../utils/index.js";
+import d from "../../Link/Link.js";
+const u = ({
+  autoCompleteResults: e = [],
   isLoading: l,
-  children: i,
-  loadingText: c = "Loading..."
-}) => /* @__PURE__ */ h("ul", { "data-testid": "search-results", className: `${e}-search__results`, children: [
-  l ? /* @__PURE__ */ r("li", { className: `${e}-search__result`, children: c }) : null,
-  Array.isArray(s) && s.length > 0 && s.map((a) => /* @__PURE__ */ r("li", { className: `${e}-search__result`, children: /* @__PURE__ */ r(n, { href: a.url, children: /* @__PURE__ */ r("p", { children: a.label }) }) }, a.id)),
-  i
-] });
+  children: c,
+  loadingText: i = "Loading...",
+  onKeyDown: n
+}) => {
+  const h = Array.isArray(e) && e.length > 0;
+  return /* @__PURE__ */ r("div", { className: `${s}-search__results`, children: /* @__PURE__ */ t("ul", { "data-testid": "search-results", className: `${s}-search__results-container`, children: [
+    l ? /* @__PURE__ */ r("li", { className: `${s}-search__result`, children: i }) : null,
+    h && e.map((a) => /* @__PURE__ */ r("li", { className: `${s}-search__result`, children: /* @__PURE__ */ r(d, { href: a.url, onKeyDown: n, children: /* @__PURE__ */ r("p", { children: a.label }) }) }, a.id)),
+    c
+  ] }) });
+};
 export {
-  _ as default
+  u as default
 };

package/dist/components/Text/types.d.ts

@@ -1,14 +1,10 @@
 export declare enum TextVariants {
-    display0 = "display0",
-    display1 = "display1",
-    display2 = "display2",
-    display3 = "display3",
-    display4 = "display4",
     blockquote = "blockquote",
     heading1 = "heading1",
     heading2 = "heading2",
     heading3 = "heading3",
     heading4 = "heading4",
+    heading5 = "heading5",
     title1 = "title1",
     title2 = "title2",
     title3 = "title3",
@@ -20,9 +16,10 @@ export declare enum TextVariants {
     string2 = "string2",
     string3 = "string3",
     button = "button",
-    ctaLg = "ctaLg",
-    ctaSm = "ctaSm",
     email = "email",
     label = "label",
-    badge = "badge"
+    link = "link",
+    badge = "badge",
+    snwFlyoutLink = "snwFlyoutLink",
+    snwHeaderLink = "snwHeaderLink"
 }

package/dist/components/Text/types.js

@@ -1,4 +1,4 @@
-var l = /* @__PURE__ */ ((d) => (d.display0 = "display0", d.display1 = "display1", d.display2 = "display2", d.display3 = "display3", d.display4 = "display4", d.blockquote = "blockquote", d.heading1 = "heading1", d.heading2 = "heading2", d.heading3 = "heading3", d.heading4 = "heading4", d.title1 = "title1", d.title2 = "title2", d.title3 = "title3", d.title4 = "title4", d.body1 = "body1", d.body2 = "body2", d.body3 = "body3", d.string1 = "string1", d.string2 = "string2", d.string3 = "string3", d.button = "button", d.ctaLg = "ctaLg", d.ctaSm = "ctaSm", d.email = "email", d.label = "label", d.badge = "badge", d))(l || {});
+var l = /* @__PURE__ */ ((d) => (d.blockquote = "blockquote", d.heading1 = "heading1", d.heading2 = "heading2", d.heading3 = "heading3", d.heading4 = "heading4", d.heading5 = "heading5", d.title1 = "title1", d.title2 = "title2", d.title3 = "title3", d.title4 = "title4", d.body1 = "body1", d.body2 = "body2", d.body3 = "body3", d.string1 = "string1", d.string2 = "string2", d.string3 = "string3", d.button = "button", d.email = "email", d.label = "label", d.link = "link", d.badge = "badge", d.snwFlyoutLink = "snwFlyoutLink", d.snwHeaderLink = "snwHeaderLink", d))(l || {});
 export {
   l as TextVariants
 };

package/dist/components/Text/utils.js

@@ -1,10 +1,7 @@
-import { px as s } from "../../utils/index.js";
+import { px as r } from "../../utils/index.js";
 import { TextVariants as t } from "./types.js";
-const n = (e = t.body1) => {
-  const r = e.replace("ctaSm", "cta-sm").replace("ctaLg", "cta-lg");
-  return `${s}-text--${r.charAt(0).toLowerCase() + r.slice(1)}`;
-}, c = (e = t.body1) => [t.display0, t.display1].includes(e) ? "h1" : [t.display2, t.display3, t.display4].includes(e) ? "h3" : e === t.blockquote ? "blockquote" : e.includes("body") ? "p" : e === t.label ? "label" : e.includes("heading") ? `h${isNaN(parseInt(e.slice(-1))) ? 3 : parseInt(e.slice(-1))}` : "span";
+const o = (e = t.body1) => `${r}-text--${e.charAt(0).toLowerCase() + e.slice(1)}`, u = (e = t.body1) => e === t.blockquote ? "blockquote" : e.includes("body") ? "p" : e.includes("string") || e.includes("title") ? "span" : e === t.label ? "label" : e.includes("heading") ? `h${isNaN(parseInt(e.slice(-1))) ? 3 : parseInt(e.slice(-1))}` : "span";
 export {
-  c as determineDefaultTextElement,
-  n as determineTextClassName
+  u as determineDefaultTextElement,
+  o as determineTextClassName
 };

package/dist/components/Video/Video.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps } from 'react';
+export interface VideoProps extends ComponentProps<'div'> {
+    /**
+     * Aspect ratio of the video
+     * Defaults to 1.777 (16/9)
+     */
+    aspectRatio?: number;
+    /**
+     * The url of the video source
+     */
+    videoSource: string;
+}
+/**
+ * ## Overview
+ *
+ * A component for rendering a video iframe with a specified aspect ratio and height.
+ *
+ * [Figma Link](https://www.figma.com/design/Hp2FyltbOmRxTuw9kSwBAd/EPIC-About-Us?node-id=1103-5014)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-video--overview)
+ */
+declare const Video: ({ aspectRatio, className, videoSource, ...props }: VideoProps) => import("react/jsx-runtime").JSX.Element;
+export default Video;

package/dist/components/Video/Video.js

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import { getCommonProps as d } from "../../utils/index.js";
+import l from "../../node_modules/classnames/index.js";
+const u = ({ aspectRatio: s = 16 / 9, className: o, videoSource: m, ...e }) => {
+  const { className: a, "data-testid": r, ...i } = d(e, "Video"), c = {
+    className: l(a, o),
+    "data-testid": r,
+    style: { "--aspect-ratio": s },
+    ...i,
+    ...e
+  };
+  return /* @__PURE__ */ t("div", { ...c, children: /* @__PURE__ */ t(
+    "iframe",
+    {
+      "data-testid": `${r}-iframe`,
+      className: `${a}__iframe`,
+      src: m,
+      allowFullScreen: !0,
+      allow: "encrypted-media",
+      referrerPolicy: "no-referrer"
+    }
+  ) });
+};
+export {
+  u as default
+};

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { default as NavigationList, type NavigationListProps, } from './componen
 export { default as HeroBanner, type HeroBannerProps } from './components/HeroBanner/HeroBanner';
 export { default as Input, type InputProps } from './components/Input/Input';
 export { default as Link, type LinkProps } from './components/Link/Link';
-export { LinkVariants } from './components/Link/utils';
+export { LinkVariants } from './components/Link/types';
 export { default as LinkBlock, type LinkBlockProps } from './components/LinkBlock/LinkBlock';
 export { default as LinkList, type LinkListProps } from './components/LinkList/LinkList';
 export { default as Row, type RowProps } from './components/Row/Row';
@@ -36,3 +36,4 @@ export { default as UserManagement, type UserManagementProps } from './component
 export { AuthState } from './components/UserManagement/types';
 export * from './types/commonTypes';
 export { Breadcrumb, type BreadcrumbProps } from './components/Breadcrumb';
+export { default as Video, type VideoProps } from './components/Video/Video';

package/dist/index.js

@@ -3,7 +3,7 @@ import { default as g } from "./pages/Page.js";
 import { default as S } from "./components/Button/Button.js";
 import { ButtonVariants as I } from "./components/Button/types.js";
 import { default as P } from "./components/IconButton/IconButton.js";
-import { default as N } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as k } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { default as T } from "./components/Footer/Footer.js";
 import { Grid as h } from "./components/Grid/Grid.js";
 import { default as w } from "./components/Header/Header.js";
@@ -14,7 +14,7 @@ import { default as R } from "./components/Navigation/NavigationList/NavigationL
 import { default as z } from "./components/HeroBanner/HeroBanner.js";
 import { default as E } from "./components/Input/Input.js";
 import { default as Y } from "./components/Link/Link.js";
-import { LinkVariants as q } from "./components/Link/utils.js";
+import { LinkVariants as q } from "./components/Link/types.js";
 import { default as K } from "./components/LinkBlock/LinkBlock.js";
 import { default as W } from "./components/LinkList/LinkList.js";
 import { default as Z } from "./components/Row/Row.js";
@@ -30,7 +30,7 @@ import { default as ge } from "./components/ViewingsList/ViewingsList.js";
 import { default as Se } from "./components/Modal/Modal.js";
 import { default as Ie } from "./components/Drawer/Drawer.js";
 import { default as Pe } from "./components/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as Ne } from "./components/Text/types.js";
+import { TextVariants as ke } from "./components/Text/types.js";
 import { default as Te } from "./components/Text/Text.js";
 import { default as he } from "./components/Accordion/Accordion.js";
 import { default as we } from "./components/Accordion/AccordionItem.js";
@@ -40,6 +40,7 @@ import { SupportedLanguages as Me } from "./types/commonTypes.js";
 import { default as Re } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
+import { default as ze } from "./components/Video/Video.js";
 export {
   he as Accordion,
   we as AccordionItem,
@@ -48,7 +49,7 @@ export {
   S as Button,
   I as ButtonVariants,
   Ie as Drawer,
-  N as ErrorBoundary,
+  k as ErrorBoundary,
   T as Footer,
   h as Grid,
   $ as GridItem,
@@ -78,8 +79,9 @@ export {
   ie as SubscriptionState,
   Me as SupportedLanguages,
   Te as Text,
-  Ne as TextVariants,
+  ke as TextVariants,
   Ce as UserManagement,
+  ze as Video,
   ge as ViewingsList,
   f as defaultYear,
   m as emailValidation,

package/dist/scss/_type.scss

@@ -7,6 +7,10 @@
   font-weight: 400;
 }
 
+@mixin titleText {
+  @include DistinctDisplay;
+}
+
 @mixin bodyText {
   color: $soft-black;
 }
@@ -33,7 +37,7 @@
   font-family: Distinct, sans-serif;
 }
 
-@mixin underline($padding: 0, $width: 0.0625rem, $color: $cta-blue) {
+@mixin underline($padding: 0, $width: 0.0625rem, $color: $pure-black) {
   border-bottom: $width solid $color;
   padding-bottom: $padding;
 }
@@ -44,8 +48,9 @@
   $transform-style: capitalize,
   $line-height: $heading-line-height-size1
 ) {
+  @include DistinctDisplay;
+
   color: $color;
-  font-family: DistinctDisplay, sans-serif;
   font-size: $size;
   font-weight: 400;
   line-height: $line-height;
@@ -54,49 +59,32 @@
 }
 
 @mixin pText($size: $body-size1, $color: $pure-black, $line-height: 1.5) {
+  @include Montserrat;
+
   color: $color;
-  font-family: Montserrat, sans-serif;
   font-size: $size;
   line-height: $line-height;
 }
 
 @mixin labelText($label) {
-  font-family: Montserrat, sans-serif;
+  @include Montserrat;
 
   @if $label == 'link' {
-    color: $pure-black;
-    font-size: $link-button-label-size;
-    line-height: $link-label-line-height;
+    font-size: $link-label-size;
     font-weight: 600;
     letter-spacing: 1px;
+    line-height: $link-label-line-height;
     text-transform: uppercase;
-    text-decoration: underline;
   }
 
   @if $label == 'button' {
-    font-size: $link-button-label-size;
-    line-height: $button-label-line-height;
+    font-size: $button-label-size;
     font-weight: 600;
     letter-spacing: 0;
+    line-height: $button-label-line-height;
     text-transform: capitalize;
   }
 
-  @if $label == 'cta-sm' {
-    font-size: $cta-sm-label-size;
-    font-weight: 600;
-    letter-spacing: 0.0625rem;
-    line-height: 1.25;
-    text-transform: uppercase;
-  }
-
-  @if $label == 'cta-lg' {
-    font-size: $cta-lg-label-size;
-    font-weight: 700;
-    letter-spacing: 0.125rem;
-    line-height: 1.25;
-    text-transform: uppercase;
-  }
-
   @if $label == 'email' {
     font-size: $email-label-size;
     font-weight: 600;
@@ -114,9 +102,9 @@
 
   @if $label == 'badge' {
     font-size: $badge-label-size;
-    line-height: $badge-label-line-height;
     font-weight: 500;
     letter-spacing: 0;
+    line-height: $badge-label-line-height;
     text-transform: uppercase;
   }
 }
@@ -131,14 +119,6 @@
     @include labelText($link);
   }
 
-  @if $token == 'cta-sm' {
-    @include labelText($cta-sm);
-  }
-
-  @if $token == 'cta-lg' {
-    @include labelText($cta-lg);
-  }
-
   @if $token == 'email' {
     @include labelText($email);
   }
@@ -151,27 +131,6 @@
     @include labelText($badge);
   }
 
-  // Displays
-  @if $token == 'display0' {
-    @include hText($display-size0, null, uppercase);
-  }
-
-  @if $token == 'display1' {
-    @include hText($display-size1, null, uppercase);
-  }
-
-  @if $token == 'display2' {
-    @include hText($display-size2, null, uppercase);
-  }
-
-  @if $token == 'display3' {
-    @include hText($display-size3, null, uppercase);
-  }
-
-  @if $token == 'display4' {
-    @include hText($display-size4, null, uppercase);
-  }
-
   // Headings
   @if $token == 'blockquote' {
     @include hText(
@@ -198,20 +157,25 @@
     @include hText($heading-size4, $line-height: $heading-line-height-size4, $transform-style: capitalize);
   }
 
+  @if $token == 'heading5' {
+    @include hText($heading-size5, $line-height: $heading-line-height-size5, $transform-style: capitalize);
+  }
+
   @if $token == 'title1' {
     @include hText($heading-size1, $line-height: $heading-line-height-size1, $transform-style: uppercase);
   }
 
+  // the title2 token skips heading 2 because it's the same size currently as heading1
   @if $token == 'title2' {
-    @include hText($heading-size2, $line-height: $heading-line-height-size2, $transform-style: uppercase);
+    @include hText($heading-size3, $line-height: $heading-line-height-size3, $transform-style: uppercase);
   }
 
   @if $token == 'title3' {
-    @include hText($heading-size3, $line-height: $heading-line-height-size3, $transform-style: uppercase);
+    @include hText($heading-size4, $line-height: $heading-line-height-size4, $transform-style: uppercase);
   }
 
   @if $token == 'title4' {
-    @include hText($heading-size4, $line-height: $heading-line-height-size4, $transform-style: uppercase);
+    @include hText($heading-size5, $line-height: $heading-line-height-size5, $transform-style: uppercase);
   }
 
   // Body
@@ -242,18 +206,21 @@
 
   // SNW
   @if $token == 'snwHeaderLink' {
-    font-family: $DistinctDisplay;
+    @include DistinctDisplay;
+
+    font-size: $snw-header-link-size;
     font-weight: 400;
     letter-spacing: 1px;
-    font-size: $snw-header-link-size;
     line-height: $snw-header-link-line-height;
     text-transform: uppercase;
   }
 
   @if $token == 'snwFlyoutLink' {
+    @include Montserrat;
+
+    font-size: $snw-flyout-link-size;
     font-weight: 400;
     letter-spacing: 1px;
-    font-size: $snw-flyout-link-size;
     line-height: $snw-flyout-link-line-height;
     text-transform: capitalize;
   }