@phillips/seldon 1.17.5 → 1.19.0

package/README.md

@@ -6,6 +6,8 @@
 
 Seldon is the source for design guidelines, component documentation, and resources for building apps with the Phillips.com Design System.
 
+We use Storybook to document the components. Our storybook is hosted in Netlify at [here](https://phillips-seldon.netlify.app/?path=/docs/welcome--overview).
+
 ## Installation
 
 ```
@@ -16,38 +18,6 @@ npm install @phillips/seldon
 yarn add @phillips/seldon
 ```
 
-## What's included
-
-```
-@phillips/seldon/
-├── components
-│   └── HeroBanner
-│       └── HeroBanner.d.ts
-│       └── HeroBanner.js
-│   └── ...
-├── Pages
-│   └── HomePage
-│       └── HomePage.d.ts
-│       └── HomePage.js
-│   └── ...
-├── scss
-│   └── components
-│       └── HeroBanner
-│           └── _HeroBanner.scss
-│       └── ...
-│   └── Pages
-│       └── HomePage
-│           └── _HomePage.scss
-│       └── ...
-│   └── _reset.scss
-│   └── _typography_.scss
-│   └── _vars.scss
-│   └── styles.scss (sass entrypoint)
-├── utils
-├── index.d.ts
-├── index.js
-```
-
 ### Styling
 
 The project contains a `scss` folder. Here you will find the main export of our sass styles. This will include all the styles bundled with this package, including resets and typography styles.

package/dist/components/Button/Button.d.ts

@@ -1,9 +1,8 @@
-import { CommonProps } from '../../utils';
-export interface ButtonProps extends CommonProps, Record<string, unknown> {
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * Button contents
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * True if button comes after text
      */
@@ -11,7 +10,7 @@ export interface ButtonProps extends CommonProps, Record<string, unknown> {
     /**
      * Optional click handler
      */
-    onClick?: (e: React.MouseEvent<HTMLElement>) => void | unknown;
+    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     /**
      * Is this the principal call to action on the page?
      */
@@ -20,6 +19,10 @@ export interface ButtonProps extends CommonProps, Record<string, unknown> {
      * How large should the button be?
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * The type of the button.
+     */
+    type?: 'button' | 'submit' | 'reset';
 }
-declare const Button: ({ buttonType, size, children, iconLast, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ buttonType, size, children, className, iconLast, id, type, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

@@ -1,19 +1,34 @@
-import { jsx as m } from "react/jsx-runtime";
-import b from "../../node_modules/classnames/index.js";
+import { jsx as e } from "react/jsx-runtime";
+import $ from "../../node_modules/classnames/index.js";
 import { px as t } from "../../utils/index.js";
-const f = ({ buttonType: n = "primary", size: a = "md", children: r, iconLast: s = !1, id: o, ...u }) => /* @__PURE__ */ m(
+const c = ({
+  buttonType: n = "primary",
+  size: a = "md",
+  children: r,
+  className: s,
+  iconLast: u = !1,
+  id: o,
+  type: m = "button",
+  ...b
+}) => /* @__PURE__ */ e(
   "button",
   {
     "data-testid": o ? `button-${o}` : "button",
     id: o,
-    type: "button",
-    className: b(`${t}-button`, `${t}-button--${a}`, `${t}-button--${n}`, {
-      [`${t}-button--icon-last`]: s
-    }),
-    ...u,
+    type: m,
+    className: $(
+      `${t}-button`,
+      `${t}-button--${a}`,
+      `${t}-button--${n}`,
+      {
+        [`${t}-button--icon-last`]: u
+      },
+      s
+    ),
+    ...b,
     children: r
   }
 );
 export {
-  f as default
+  c as default
 };

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,20 @@
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+    chidlren?: React.ReactNode;
+    /**
+     * Copyright data added to bottom of site
+     */
+    copyright?: string;
+    /**
+     * Navigation items
+     */
+    navigationComponent: React.ReactElement;
+}
+/**
+ * ## Overview
+ *
+ * A component for adding a footer to the bottom of the site.
+ *
+ * [Figma Link](https://www.figma.com/file/npS5ECbNut8hevUkGWSzUN/Site-Furniture-(Navigation)---SP24?type=design&node-id=4346-1981&mode=design&t=D7PpghvLOEpBYd3n-0)
+ */
+declare const Footer: ({ children, className, copyright, id, navigationComponent, }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export default Footer;

package/dist/components/Footer/Footer.js

@@ -0,0 +1,18 @@
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import i from "../../node_modules/classnames/index.js";
+import { px as o, defaultYear as m } from "../../utils/index.js";
+import n from "../SplitPanel/SplitPanel.js";
+const _ = ({
+  children: t,
+  className: a,
+  copyright: s = `© ${m} Phillips Auctioneers, LLC`,
+  id: e,
+  navigationComponent: l
+}) => /* @__PURE__ */ f("footer", { "data-testid": e || "footer", id: e, className: i(`${o}-footer`, { className: a }), children: [
+  /* @__PURE__ */ r("nav", { className: `${o}-footer__navigation`, children: l }),
+  /* @__PURE__ */ r(n, { className: `${o}-footer__content`, hasBorder: !1, children: t }),
+  /* @__PURE__ */ r("p", { className: `${o}-footer__copyright`, children: s })
+] });
+export {
+  _ as default
+};

package/dist/components/Grid/Grid.d.ts

@@ -1,14 +1,12 @@
-import { ElementType } from 'react';
-import { CommonProps } from '../../utils';
-export interface GridProps extends CommonProps {
+export interface GridProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Button contents
      */
     children: React.ReactNode;
     /**
-     * Optional element to render in place of a button e.g. React-Router, etc
+     * Optional element to render in place of a button e.g. 'div', 'span', CustomComponent, etc
      */
-    element?: ElementType;
+    element?: React.ElementType<GridProps>;
     /**
      * Optional boolean to dictate if the grid has left and right margins
      */

package/dist/components/Grid/Grid.js

@@ -1,24 +1,23 @@
-import { jsx as m } from "react/jsx-runtime";
-import s from "../../node_modules/classnames/index.js";
-import { px as n } from "../../utils/index.js";
+import { jsx as s } from "react/jsx-runtime";
+import m from "../../node_modules/classnames/index.js";
+import { px as t } from "../../utils/index.js";
 function g({
   children: e,
-  className: t,
-  element: i = "section",
-  hasMargins: o = !0,
+  className: n,
+  element: a = "section",
+  hasMargins: i = !0,
   id: r,
-  ...a
+  ...o
 }) {
-  return /* @__PURE__ */ m(
-    i,
+  return /* @__PURE__ */ s(
+    a,
     {
       "data-testid": r ? `grid-container-${r}` : "grid-container",
       id: r,
-      className: s(`${n}-grid__container`, {
-        [`${t}`]: t,
-        [`${n}-grid__container--has-margins`]: o
+      className: m(`${t}-grid__container`, n, {
+        [`${t}-grid__container--has-margins`]: i
       }),
-      ...a,
+      ...o,
       children: e
     }
   );

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,44 @@
+import React, { HTMLAttributes } from 'react';
+export declare const LinkVariants: {
+    /** Default variant, used */
+    readonly standalone: "standalone";
+    /** link rendering emailto: */
+    readonly email: "email";
+    /** these links are being rendered in a list */
+    readonly list: "list";
+    /** link is being rendered within body copy */
+    readonly inline: "inline";
+};
+export interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Describes where the link is used. It controls the styling of the link so we apply consistent styles. Defaults to `standalone`.  See the documentation [here](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?type=design&node-id=5731-12815) to see where each variant is used.
+     *
+     * @default standalone
+     * @see LinkVariants
+     */
+    variant?: keyof typeof LinkVariants;
+    /**
+     * The text of the link
+     */
+    children: React.ReactNode;
+    /**
+     * URL to navigate to when clicked
+     */
+    href: string;
+    /**
+     * Can be used to render alternative link components like the prefetching `Link` from `@remix-run/react`.
+     * This component should handle the `children`, `data-testid`, `id`, `className`, and `href` props.
+     */
+    element?: React.ElementType<LinkProps & {
+        'data-testid': string;
+    }>;
+}
+/**
+ * ## Overview
+ *
+ * A component that can be used to navigate to different pages or external websites. Renders a standard anchor tag by default.
+ *
+ * [Figma Link](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?node-id=5736%3A13364&mode=dev)
+ */
+declare const Link: ({ children, id, className, element: Element, variant, href, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export default Link;

package/dist/components/Link/Link.js

@@ -0,0 +1,40 @@
+import { jsx as c } from "react/jsx-runtime";
+import k from "../../node_modules/classnames/index.js";
+import { px as p } from "../../utils/index.js";
+import { getLinkVariantClassName as d, isLinkExternal as f } from "./utils.js";
+const x = {
+  /** Default variant, used */
+  standalone: "standalone",
+  /** link rendering emailto: */
+  email: "email",
+  /** these links are being rendered in a list */
+  list: "list",
+  /** link is being rendered within body copy */
+  inline: "inline"
+}, V = ({
+  children: s,
+  id: a,
+  className: e,
+  element: n = "a",
+  variant: i = x.standalone,
+  href: t,
+  ...l
+}) => {
+  const r = k(`${p}-link`, d(i), e), o = a ? `link-${a}` : "link", m = f(t);
+  return /* @__PURE__ */ c(
+    n,
+    {
+      ...l,
+      href: t,
+      "data-testid": o,
+      id: a,
+      className: r,
+      ...m && n === "a" ? { rel: "noopener noreferrer", target: "_blank" } : {},
+      children: s
+    }
+  );
+};
+export {
+  x as LinkVariants,
+  V as default
+};

package/dist/components/Link/utils.d.ts

@@ -0,0 +1,3 @@
+import { LinkVariants } from './Link';
+export declare const getLinkVariantClassName: (variant: keyof typeof LinkVariants) => string;
+export declare const isLinkExternal: (href: string) => boolean;

package/dist/components/Link/utils.js

@@ -0,0 +1,8 @@
+import { px as a } from "../../utils/index.js";
+const n = (t) => `${a}-link--${t}`, s = (t) => !!t.match(
+  /(http[s]?:\/\/)(?!.*phillips\.com)([a-zA-Z0-9\-.]+)(:[0-9]{1,4})?([a-zA-Z0-9/\-._~:?#[\]@!$&'()*+,;=]*)/g
+);
+export {
+  n as getLinkVariantClassName,
+  s as isLinkExternal
+};

package/dist/components/LinkBlock/LinkBlock.d.ts

@@ -0,0 +1,17 @@
+import { LinkProps } from '../Link/Link';
+export interface LinkBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Props for the Link component */
+    linkProps: Omit<LinkProps, 'variant'>;
+    /** Renders description under link */
+    description: string;
+}
+/**
+ * ## Overview
+ *
+ * The LinkBlock component is used to render a link with a description underneath it. Usually this is used in a list of links.
+ *
+ * [Figma Link](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?type=design&node-id=5709-8035&mode=design&t=CTNssP89Nrnt6Jkw-0)
+ *
+ */
+declare const LinkBlock: ({ linkProps, description, className: classNameProp, id, ...props }: LinkBlockProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkBlock;

package/dist/components/LinkBlock/LinkBlock.js

@@ -0,0 +1,14 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import k from "../../node_modules/classnames/index.js";
+import { px as d } from "../../utils/index.js";
+import p, { LinkVariants as f } from "../Link/Link.js";
+const $ = ({ linkProps: t, description: e, className: i, id: s, ...l }) => {
+  const a = `${d}-link-block`, c = k(a, i), m = t.element ?? p, n = s ? `link-block-${s}` : "link-block";
+  return /* @__PURE__ */ r("div", { ...l, className: c, id: s, "data-testid": n, children: [
+    /* @__PURE__ */ o(m, { ...t, "data-testid": `${n}-link`, variant: f.list }),
+    /* @__PURE__ */ o("p", { className: `${a}__description`, children: e })
+  ] });
+};
+export {
+  $ as default
+};

package/dist/components/LinkList/LinkList.d.ts

@@ -0,0 +1,15 @@
+import LinkBlock, { type LinkBlockProps } from '../LinkBlock/LinkBlock';
+import React from 'react';
+export interface LinkListProps extends React.HTMLAttributes<HTMLUListElement> {
+    /** These children should be an array of LinkBlock components */
+    children: React.ReactElement<LinkBlockProps, typeof LinkBlock>[];
+}
+/**
+ * ## Overview
+ *
+ * The LinkList component is used to display a list of LinkBlocks in a 3 column list on some breakpoints and 1 column list on others.  Because of the 3 column design, the set of LinkBlocks should be divisible by 3.
+ *
+ * [Figma Link](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?type=design&node-id=5709-8035&mode=design&t=jOnrmrqnE8lCQvGR-4)
+ */
+declare const LinkList: ({ children, id, ...props }: LinkListProps) => import("react/jsx-runtime").JSX.Element;
+export default LinkList;

package/dist/components/LinkList/LinkList.js

@@ -0,0 +1,15 @@
+import { jsx as i } from "react/jsx-runtime";
+import f from "../LinkBlock/LinkBlock.js";
+import c from "react";
+import { px as u } from "../../utils/index.js";
+import { Grid as p } from "../Grid/Grid.js";
+const y = ({ children: a, id: s, ...m }) => {
+  const d = s ? `link-list-${s}` : "link-list", t = `${u}-link-list`;
+  return /* @__PURE__ */ i(p, { ...m, "data-testid": d, id: s, className: t, element: "ul", role: "list", children: a.map((r) => {
+    var l, e;
+    return c.isValidElement(r) && r.type !== f ? (console.warn("LinkList only accepts LinkBlock children"), null) : /* @__PURE__ */ i("li", { className: `${t}--item`, children: r }, (e = (l = r == null ? void 0 : r.props) == null ? void 0 : l.linkProps) == null ? void 0 : e.href);
+  }) });
+};
+export {
+  y as default
+};

package/dist/components/Social/Social.d.ts

@@ -0,0 +1,15 @@
+export interface SocialProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Title text for the social section
+     */
+    titleText?: string;
+}
+/**
+ * ## Overview
+ *
+ * A component for displaying our social icons. Expects children to be an unordered list of social icons.
+ *
+ * [Figma Link](https://www.figma.com/file/npS5ECbNut8hevUkGWSzUN/Site-Furniture-(Navigation)---SP24?type=design&node-id=4357-7418&mode=design&t=D7PpghvLOEpBYd3n-0)
+ */
+declare const Social: ({ className, children, id, titleText }: SocialProps) => import("react/jsx-runtime").JSX.Element;
+export default Social;

package/dist/components/Social/Social.js

@@ -0,0 +1,10 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import r from "../../node_modules/classnames/index.js";
+import { px as o } from "../../utils/index.js";
+const n = ({ className: s, children: l, id: a, titleText: c = "Follow on Social" }) => /* @__PURE__ */ i("div", { "data-testid": a || "social", className: r(`${o}-social`, s), children: [
+  /* @__PURE__ */ e("h3", { className: `${o}-social__header`, children: c }),
+  l
+] });
+export {
+  n as default
+};

package/dist/components/SplitPanel/SplitPanel.d.ts

@@ -0,0 +1,19 @@
+export interface SplitPanelProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Optional element to render in place of a section e.g. div, span, etc
+     */
+    element?: React.ElementType;
+    /**
+     * Boolean that will determine if the split panel has a border between panels at large screens
+     */
+    hasBorder?: boolean;
+}
+/**
+ * ## Overview
+ *
+ * A component for splitting content into two sections. The sections are split 50/50 that stack on the default and 'sm' break points and are side by side at bigger screen sizes.
+ *
+ * [Figma Link](https://www.figma.com/file/Hp2FyltbOmRxTuw9kSwBAd/EPIC-About-Us?type=design&node-id=635-34713&mode=design&t=wKZW1vKP8WePUjrH-0)
+ */
+declare const SplitPanel: ({ children, className, element: Element, hasBorder, id, ...props }: SplitPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default SplitPanel;

package/dist/components/SplitPanel/SplitPanel.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import m from "../../node_modules/classnames/index.js";
+import { px as t } from "../../utils/index.js";
+const f = ({
+  children: s,
+  className: l,
+  element: a = "section",
+  hasBorder: p = !0,
+  id: e,
+  ...r
+}) => /* @__PURE__ */ o(
+  a,
+  {
+    "data-testid": e || "split-panel",
+    id: e,
+    className: m(`${t}-split-panel`, l, { [`${t}-split-panel--borderless`]: !p }),
+    ...r,
+    children: s
+  }
+);
+export {
+  f as default
+};

package/dist/components/Subscribe/Subscribe.d.ts

@@ -0,0 +1,40 @@
+import { ButtonProps } from '../Button/Button';
+export interface SubscribeProps extends React.HTMLAttributes<HTMLFormElement> {
+    /**
+     * Subscribe blurb
+     */
+    blurb?: string;
+    /**
+     * Subscribe button extra props to spread
+     */
+    buttonProps?: ButtonProps;
+    /**
+     * Subscribe button text
+     */
+    buttonText?: string;
+    /**
+     * Optional element to render in place of a form e.g. Remix Form, etc
+     */
+    element?: React.ElementType<SubscribeProps>;
+    /**
+     * Subscribe input label
+     */
+    inputLabelText?: string;
+    /**
+     * Subscribe input label
+     */
+    inputPlaceholder?: string;
+    /**
+     * Subscribe title text
+     */
+    title?: string;
+}
+/**
+ * ## Overview
+ *
+ * A component for adding an email signup form.
+ *
+ * [Figma Link](https://www.figma.com/file/npS5ECbNut8hevUkGWSzUN/Site-Furniture-(Navigation)---SP24?node-id=4347%3A4194&mode=dev)
+ */
+declare const Subscribe: ({ blurb, buttonText, buttonProps, className, element: Element, id, inputLabelText, inputPlaceholder, title, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
+export default Subscribe;

package/dist/components/Subscribe/Subscribe.js

@@ -0,0 +1,42 @@
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import p from "../../node_modules/classnames/index.js";
+import { px as e } from "../../utils/index.js";
+import f from "../Input/Input.js";
+import _ from "../Button/Button.js";
+const y = ({
+  blurb: t,
+  buttonText: i = "Sign Up",
+  buttonProps: l,
+  className: m,
+  element: a = "form",
+  id: r,
+  inputLabelText: c = "Email*",
+  inputPlaceholder: o = "example@email.com",
+  title: b = "Subscribe to Newsletter",
+  ...u
+}) => /* @__PURE__ */ n(
+  a,
+  {
+    "data-testid": r || "subscribe-form",
+    id: r,
+    className: p(`${e}-subscribe`, m),
+    ...u,
+    children: [
+      /* @__PURE__ */ s("h3", { className: `${e}-subscribe__title`, children: b }),
+      t ? /* @__PURE__ */ s("p", { className: `${e}-subscribe__blurb`, children: t }) : null,
+      /* @__PURE__ */ s(
+        f,
+        {
+          className: `${e}-subscribe__input`,
+          type: "email",
+          placeholder: o,
+          labelText: c
+        }
+      ),
+      /* @__PURE__ */ s(_, { className: `${e}-subscribe__button ${m}`, buttonType: "secondary", type: "submit", ...l, children: i })
+    ]
+  }
+);
+export {
+  y as default
+};

package/dist/index.d.ts

@@ -1,10 +1,17 @@
 export { default as Button, type ButtonProps } from './components/Button/Button';
 export { default as ErrorBoundary, type ErrorBoundaryProps } from './components/ErrorBoundary/ErrorBoundary';
+export { default as Footer, type FooterProps } from './components/Footer/Footer';
 export { default as Grid, type GridProps } from './components/Grid/Grid';
 export { default as Header, type HeaderProps } from './components/Header/Header';
 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 { default as LinkBlock, type LinkBlockProps } from './components/LinkBlock/LinkBlock';
+export { default as LinkList, type LinkListProps } from './components/LinkList/LinkList';
 export { default as Select, type SelectProps } from './components/Select/Select';
+export { default as SplitPanel, type SplitPanelProps } from './components/SplitPanel/SplitPanel';
+export { default as Subscribe, type SubscribeProps } from './components/Subscribe/Subscribe';
+export { default as Social, type SocialProps } from './components/Social/Social';
 export { default as ViewingsList, type ViewingsListProps } from './components/ViewingsList/ViewingsList';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './components/ViewingsList/StatefulViewingsList';
 export { default as Page } from './pages/Page';

package/dist/index.js

@@ -1,22 +1,36 @@
 import { default as t } from "./components/Button/Button.js";
 import { default as a } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { Grid as s } from "./components/Grid/Grid.js";
-import { default as d } from "./components/Header/Header.js";
-import { default as p } from "./components/HeroBanner/HeroBanner.js";
-import { default as x } from "./components/Input/Input.js";
-import { default as n } from "./components/Select/Select.js";
-import { default as B } from "./components/ViewingsList/ViewingsList.js";
-import { default as H } from "./components/ViewingsList/StatefulViewingsList.js";
-import { default as S } from "./pages/Page.js";
+import { default as l } from "./components/Footer/Footer.js";
+import { Grid as u } from "./components/Grid/Grid.js";
+import { default as p } from "./components/Header/Header.js";
+import { default as x } from "./components/HeroBanner/HeroBanner.js";
+import { default as n } from "./components/Input/Input.js";
+import { default as S } from "./components/Link/Link.js";
+import { default as k } from "./components/LinkBlock/LinkBlock.js";
+import { default as g } from "./components/LinkList/LinkList.js";
+import { default as w } from "./components/Select/Select.js";
+import { default as P } from "./components/SplitPanel/SplitPanel.js";
+import { default as y } from "./components/Subscribe/Subscribe.js";
+import { default as F } from "./components/Social/Social.js";
+import { default as I } from "./components/ViewingsList/ViewingsList.js";
+import { default as j } from "./components/ViewingsList/StatefulViewingsList.js";
+import { default as v } from "./pages/Page.js";
 export {
   t as Button,
   a as ErrorBoundary,
-  s as Grid,
-  d as Header,
-  p as HeroBanner,
-  x as Input,
-  S as Page,
-  n as Select,
-  H as StatefulViewingsList,
-  B as ViewingsList
+  l as Footer,
+  u as Grid,
+  p as Header,
+  x as HeroBanner,
+  n as Input,
+  S as Link,
+  k as LinkBlock,
+  g as LinkList,
+  v as Page,
+  w as Select,
+  F as Social,
+  P as SplitPanel,
+  j as StatefulViewingsList,
+  y as Subscribe,
+  I as ViewingsList
 };

package/dist/scss/_reset.scss

@@ -39,6 +39,20 @@ h6 {
   overflow-wrap: break-word;
 }
 
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  list-style: none;
+}
+
 #root {
   isolation: isolate;
 }

package/dist/scss/_type.scss

@@ -1,4 +1,9 @@
-@use './vars' as *;
+@import './vars';
+
+@mixin underline($padding: 0, $width: 0.0625rem, $color: $cta-blue) {
+  border-bottom: $width solid $color;
+  padding-bottom: $padding;
+}
 
 @mixin hText($size: $heading-size1, $color: $primary-black, $transform-style: capitalize) {
   color: $color;