@phillips/seldon 1.46.0 → 1.47.0

package/dist/components/Footer/Footer.js

@@ -1,9 +1,9 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import l from "../../node_modules/classnames/index.js";
 import { px as r, defaultYear as m } from "../../utils/index.js";
-import d from "../../assets/PhillipsLogo.svg.js";
-import { TextVariants as f } from "../Text/types.js";
-import c from "../Text/Text.js";
+import f from "../../assets/PhillipsLogo.svg.js";
+import { TextVariants as c } from "../Text/types.js";
+import d from "../Text/Text.js";
 const $ = ({
   children: a,
   className: i,
@@ -12,8 +12,8 @@ const $ = ({
 }) => /* @__PURE__ */ t("footer", { "data-testid": e || "footer", id: e, className: l(`${r}-footer`, { className: i }), children: [
   /* @__PURE__ */ o("div", { className: `${r}-footer__links`, children: a }),
   /* @__PURE__ */ t("div", { className: `${r}-footer__copyright`, children: [
-    /* @__PURE__ */ o("h3", { "data-testid": "header-logo", className: `${r}-header__logo`, children: /* @__PURE__ */ o("a", { href: "/", "aria-label": "logo", children: /* @__PURE__ */ o(d, {}) }) }),
-    /* @__PURE__ */ o(c, { variant: f.body3, children: s })
+    /* @__PURE__ */ o("h3", { "data-testid": "footer-logo", className: `${r}-footer__logo`, children: /* @__PURE__ */ o("a", { href: "/", "aria-label": "logo", children: /* @__PURE__ */ o(f, {}) }) }),
+    /* @__PURE__ */ o(d, { variant: c.body3, children: s })
   ] })
 ] });
 export {

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

@@ -1,4 +1,5 @@
-export interface GridProps extends React.HTMLAttributes<HTMLElement> {
+import { SpacingTokens } from '../../utils';
+export interface GridProps<ElementType = HTMLElement> extends React.HTMLAttributes<ElementType> {
     /**
      * A Grid must have children
      */
@@ -6,7 +7,15 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Optional element to render as the top-level component e.g. 'div', 'span', CustomComponent, etc.  Defaults to 'section'.
      */
-    element?: React.ElementType<GridProps>;
+    element?: React.ElementType<GridProps<ElementType>>;
+    /**
+     * The gap between the rows in the grid.  Defaults to 'md'.
+     */
+    columnGap?: SpacingTokens;
+    /**
+     * The gap between the columns in the grid.  Defaults to 'lg'.
+     */
+    rowGap?: SpacingTokens;
 }
 /**
  * ## Overview
@@ -17,5 +26,5 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-layouts-grid--overview)
  */
-export declare function Grid({ children, className, element: Element, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ children, className, element: Element, columnGap, rowGap, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 export default Grid;

package/dist/components/Grid/Grid.js

@@ -1,11 +1,27 @@
-import { jsx as t } from "react/jsx-runtime";
-import n from "../../node_modules/classnames/index.js";
-import { getCommonProps as c } from "../../utils/index.js";
-function p({ children: o, className: s, element: e = "section", ...m }) {
-  const { className: r, ...a } = c(m, "Grid");
-  return /* @__PURE__ */ t(e, { ...a, className: n(r, s), ...m, children: o });
+import { jsx as c } from "react/jsx-runtime";
+import l from "../../node_modules/classnames/index.js";
+import { getCommonProps as d, SpacingTokens as e } from "../../utils/index.js";
+import { determineGridClassName as f } from "./utils.js";
+function C({
+  children: o,
+  className: s,
+  element: r = "section",
+  columnGap: a = e.md,
+  rowGap: t = e.lg,
+  ...m
+}) {
+  const { className: n, ...i } = d(m, "Grid");
+  return /* @__PURE__ */ c(
+    r,
+    {
+      ...i,
+      className: l(f(n, a, t), s),
+      ...m,
+      children: o
+    }
+  );
 }
 export {
-  p as Grid,
-  p as default
+  C as Grid,
+  C as default
 };

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

@@ -0,0 +1,2 @@
+import { SpacingTokens } from '../../utils';
+export declare const determineGridClassName: (baseClassName: string, columnGap: SpacingTokens, rowGap: SpacingTokens) => string;

package/dist/components/Grid/utils.js

@@ -0,0 +1,8 @@
+import t from "../../node_modules/classnames/index.js";
+const m = (r, o, n) => t(
+  `${r} ${r}--column-gap-${o}`,
+  `${r}--row-gap-${n}`
+);
+export {
+  m as determineGridClassName
+};

package/dist/components/GridItem/GridItem.js

@@ -7,8 +7,8 @@ import { GridItemAlign as N } from "./types.js";
 const A = ({
   children: p,
   xs: m = 2,
-  sm: r = 4,
-  md: t = 12,
+  sm: r = 2,
+  md: t = 6,
   lg: o = 12,
   align: s = N.center,
   element: c = "div",

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

@@ -1,6 +1,7 @@
 import LinkBlock, { type LinkBlockProps } from '../LinkBlock/LinkBlock';
 import React from 'react';
-export interface LinkListProps extends React.HTMLAttributes<HTMLUListElement> {
+import { GridProps } from '../Grid/Grid';
+export interface LinkListProps extends GridProps<HTMLUListElement> {
     /** These children should be an array of LinkBlock components */
     children: React.ReactElement<LinkBlockProps, typeof LinkBlock>[];
 }

package/dist/components/Social/Social.js

@@ -15,7 +15,7 @@ const S = ({
 }) => {
   const { className: o, ...n } = f(r, "Social");
   return /* @__PURE__ */ c("div", { ...n, className: l(o, s), ...r, children: [
-    /* @__PURE__ */ t(N, { variant: u.heading3, className: `${o}__header`, children: e }),
+    /* @__PURE__ */ t(N, { variant: u.heading4, className: `${o}__header`, children: e }),
     /* @__PURE__ */ t(p, { onClick: i, variant: d.ghost, className: `${o}__button`, children: m }),
     a
   ] });

package/dist/index.js

@@ -1,97 +1,98 @@
-import { PaddingTokens as a, defaultYear as f, emailValidation as m, encodeURLSearchParams as p, findChildrenOfType as d, generatePaddingClassName as s, getCommonProps as u, noOp as l, px as i, useNormalizedInputProps as x } from "./utils/index.js";
-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 { PaddingTokens as a, SpacingTokens as f, defaultYear as m, emailValidation as p, encodeURLSearchParams as d, findChildrenOfType as s, generatePaddingClassName as u, getCommonProps as i, noOp as l, px as x, useNormalizedInputProps as n } from "./utils/index.js";
+import { default as c } from "./pages/Page.js";
+import { default as L } from "./components/Button/Button.js";
+import { ButtonVariants as k } from "./components/Button/types.js";
 import { default as P } from "./components/IconButton/IconButton.js";
-import { default as k } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as N } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { default as w } from "./components/Footer/Footer.js";
-import { Grid as b } from "./components/Grid/Grid.js";
-import { default as v } from "./components/Header/Header.js";
-import { default as C } from "./components/Navigation/Navigation.js";
-import { default as y } from "./components/Navigation/NavigationItem/NavigationItem.js";
-import { default as H } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
-import { default as O } from "./components/Navigation/NavigationList/NavigationList.js";
-import { default as U } 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/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";
-import { default as $ } from "./components/GridItem/GridItem.js";
+import { Grid as h } from "./components/Grid/Grid.js";
+import { default as A } from "./components/Header/Header.js";
+import { default as G } from "./components/Navigation/Navigation.js";
+import { default as D } from "./components/Navigation/NavigationItem/NavigationItem.js";
+import { default as M } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
+import { default as R } from "./components/Navigation/NavigationList/NavigationList.js";
+import { default as z } from "./components/HeroBanner/HeroBanner.js";
+import { default as F } from "./components/Input/Input.js";
+import { default as j } from "./components/Link/Link.js";
+import { LinkVariants as J } from "./components/Link/types.js";
+import { default as Q } from "./components/LinkBlock/LinkBlock.js";
+import { default as X } from "./components/LinkList/LinkList.js";
+import { default as _ } from "./components/Row/Row.js";
+import { default as ee } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as re } from "./components/GridItem/types.js";
-import { default as te } from "./components/Search/Search.js";
-import { default as fe } from "./components/Select/Select.js";
-import { default as pe } from "./components/SplitPanel/SplitPanel.js";
-import { default as se } from "./components/Subscribe/Subscribe.js";
+import { default as ae } from "./components/Search/Search.js";
+import { default as me } from "./components/Select/Select.js";
+import { default as de } from "./components/SplitPanel/SplitPanel.js";
+import { default as ue } from "./components/Subscribe/Subscribe.js";
 import { SubscriptionState as le } from "./components/Subscribe/types.js";
-import { default as xe } from "./components/Social/Social.js";
-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 ne } from "./components/Social/Social.js";
+import { default as ce } from "./components/ViewingsList/ViewingsList.js";
+import { default as Le } from "./components/Modal/Modal.js";
+import { default as ke } from "./components/Drawer/Drawer.js";
 import { default as Pe } from "./components/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as ke } from "./components/Text/types.js";
+import { TextVariants as Ne } from "./components/Text/types.js";
 import { default as we } from "./components/Text/Text.js";
-import { default as be } from "./components/Accordion/Accordion.js";
-import { default as ve } from "./components/Accordion/AccordionItem.js";
-import { default as Ce } from "./components/UserManagement/UserManagement.js";
-import { AuthState as ye } from "./components/UserManagement/types.js";
-import { SupportedLanguages as He } from "./types/commonTypes.js";
-import { default as Oe } from "./components/Breadcrumb/Breadcrumb.js";
+import { default as he } from "./components/Accordion/Accordion.js";
+import { default as Ae } from "./components/Accordion/AccordionItem.js";
+import { default as Ge } from "./components/UserManagement/UserManagement.js";
+import { AuthState as De } from "./components/UserManagement/types.js";
+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 Ue } from "./components/Dropdown/Dropdown.js";
-import { default as Ee } from "./components/Video/Video.js";
+import { default as ze } from "./components/Dropdown/Dropdown.js";
+import { default as Fe } from "./components/Video/Video.js";
 export {
-  be as Accordion,
-  ve as AccordionItem,
-  ye as AuthState,
-  Oe as Breadcrumb,
-  S as Button,
-  I as ButtonVariants,
-  Ie as Drawer,
-  Ue as Dropdown,
-  k as ErrorBoundary,
+  he as Accordion,
+  Ae as AccordionItem,
+  De as AuthState,
+  Re as Breadcrumb,
+  L as Button,
+  k as ButtonVariants,
+  ke as Drawer,
+  ze as Dropdown,
+  N as ErrorBoundary,
   w as Footer,
-  b as Grid,
-  $ as GridItem,
+  h as Grid,
+  ee as GridItem,
   re as GridItemAlign,
-  v as Header,
-  U as HeroBanner,
+  A as Header,
+  z as HeroBanner,
   P as IconButton,
-  E as Input,
-  Y as Link,
-  K as LinkBlock,
-  W as LinkList,
-  q as LinkVariants,
-  Se as Modal,
-  C as Navigation,
-  y as NavigationItem,
-  H as NavigationItemTrigger,
-  O as NavigationList,
+  F as Input,
+  j as Link,
+  Q as LinkBlock,
+  X as LinkList,
+  J as LinkVariants,
+  Le as Modal,
+  G as Navigation,
+  D as NavigationItem,
+  M as NavigationItemTrigger,
+  R as NavigationList,
   a as PaddingTokens,
-  g as Page,
-  Z as Row,
-  te as Search,
-  fe as Select,
-  xe as Social,
-  pe as SplitPanel,
+  c as Page,
+  _ as Row,
+  ae as Search,
+  me as Select,
+  ne as Social,
+  f as SpacingTokens,
+  de as SplitPanel,
   Pe as StatefulViewingsList,
-  se as Subscribe,
+  ue as Subscribe,
   le as SubscriptionState,
-  He as SupportedLanguages,
+  Me as SupportedLanguages,
   we as Text,
-  ke as TextVariants,
-  Ce as UserManagement,
-  Ee as Video,
-  ge as ViewingsList,
-  f as defaultYear,
-  m as emailValidation,
-  p as encodeURLSearchParams,
-  d as findChildrenOfType,
-  s as generatePaddingClassName,
-  u as getCommonProps,
+  Ne as TextVariants,
+  Ge as UserManagement,
+  Fe as Video,
+  ce as ViewingsList,
+  m as defaultYear,
+  p as emailValidation,
+  d as encodeURLSearchParams,
+  s as findChildrenOfType,
+  u as generatePaddingClassName,
+  i as getCommonProps,
   l as noOp,
-  i as px,
-  x as useNormalizedInputProps
+  x as px,
+  n as useNormalizedInputProps
 };

package/dist/scss/_utils.scss

@@ -70,7 +70,7 @@
   row-gap: $spacing-lg;
 
   @media (min-width: $breakpoint-md) {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(6, 1fr);
   }
 
   @media (min-width: $breakpoint-lg) {
@@ -84,6 +84,21 @@
 
 @mixin media($breakpoint, $type: 'min') {
   @if $breakpoint == $size-sm {
+    // $breakpoint-sm: 360px;
+    @if $type == 'min' {
+      @media (min-width: $breakpoint-sm) {
+        @content;
+      }
+    }
+
+    @if $type == 'max' {
+      @media (max-width: calc($breakpoint-sm - 1px)) {
+        @content;
+      }
+    }
+  }
+
+  @if $breakpoint == $size-md {
     // $breakpoint-md: 961px;
     @if $type == 'min' {
       @media (min-width: $breakpoint-md) {
@@ -92,13 +107,13 @@
     }
 
     @if $type == 'max' {
-      @media (max-width: $breakpoint-md) {
+      @media (max-width: calc($breakpoint-md - 1px)) {
         @content;
       }
     }
   }
 
-  @if $breakpoint == $size-md {
+  @if $breakpoint == $size-lg {
     // $breakpoint-lg: 1401px;
 
     @if $type == 'min' {
@@ -108,13 +123,13 @@
     }
 
     @if type == 'max' {
-      @media (max-width: $breakpoint-lg) {
+      @media (max-width: calc($breakpoint-lg - 1px)) {
         @content;
       }
     }
   }
 
-  @if $breakpoint == $size-lg {
+  @if $breakpoint == $size-xl {
     // $breakpoint-xl: 1801px;
     @if type == 'min' {
       @media (min-width: $breakpoint-xl) {
@@ -123,7 +138,7 @@
     }
 
     @if type == 'max' {
-      @media (max-width: $breakpoint-xl) {
+      @media (max-width: calc($breakpoint-xl - 1px)) {
         @content;
       }
     }

package/dist/scss/_vars.scss

@@ -99,91 +99,99 @@ $text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $h
   $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
   $snwHeaderLink;
 
+////////////////////////
+/// Breakpoint TOKENS to be used for min-width comparisons
+///////////////////////
+$breakpoint-sm: 361px;
+$breakpoint-md: 961px;
+$breakpoint-lg: 1401px;
+$breakpoint-xl: 1801px;
+
 ////////////////////////
 /// FONT SIZE TOKENS:
 ///////////////////////
 
 :root {
   --desktop-max-width: 120rem;
-  --quote-size: 1.75rem;
-  --quote-line-height: 2.25rem;
-  --heading-size1: 1.75rem;
-  --heading-line-height-size1: 2rem;
-  --heading-size2: 1.75rem;
-  --heading-line-height-size2: 2rem;
-  --heading-size3: 1.5rem;
-  --heading-line-height-size3: 1.75rem;
-  --heading-size4: 1.25rem;
-  --heading-line-height-size4: 1.5rem;
-  --heading-size5: 1rem;
-  --heading-line-height-size5: 1.25rem;
-  --string-size1: 1.25rem;
-  --string-line-height-size1: 1.5rem;
-  --string-size2: 1rem;
-  --string-line-height-size2: 1.25rem;
-  --string-size3: 0.75rem;
-  --string-line-height-size3: 1rem;
-  --body-size1: 1.25rem;
-  --body-line-height-size1: 1.75rem;
-  --body-size2: 1rem;
-  --body-line-height-size2: 1.5rem;
-  --body-size3: 0.75rem;
-  --body-line-height-size3: 1.25rem;
-  --label-size1: 1.25rem;
-  --label-size2: 1rem;
-  --label-size3: 0.75rem;
-  --link-label-size: 1rem;
-  --link-label-line-height: 1rem;
-  --button-label-size: 1rem;
-  --button-label-line-height: 1.25rem;
-  --badge-label-size: 0.75rem;
-  --badge-label-line-height: 1rem;
+  --quote-size: 1.5rem;
+  --quote-line-height: 2rem;
+  --heading-size1: 1.5rem;
+  --heading-line-height-size1: 1.75rem;
+  --heading-size2: 1.5rem;
+  --heading-line-height-size2: 1.75rem;
+  --heading-size3: 1.25rem;
+  --heading-line-height-size3: 1.5rem;
+  --heading-size4: 1rem;
+  --heading-line-height-size4: 1.25rem;
+  --heading-size5: 0.75rem;
+  --heading-line-height-size5: 1rem;
+  --string-size1: 1rem;
+  --string-line-height-size1: 1.25rem;
+  --string-size2: 0.75rem;
+  --string-line-height-size2: 1rem;
+  --string-size3: 0.5rem;
+  --string-line-height-size3: 0.75rem;
+  --body-size1: 1rem;
+  --body-line-height-size1: 1.5rem;
+  --body-size2: 0.75rem;
+  --body-line-height-size2: 1.25rem;
+  --body-size3: 0.5rem;
+  --body-line-height-size3: 1rem;
+  --label-size1: 1rem;
+  --label-size2: 0.75rem;
+  --label-size3: 0.56rem;
+  --link-label-size: 0.75rem;
+  --link-label-line-height: 0.75rem;
+  --button-label-size: 0.75rem;
+  --button-label-line-height: 1rem;
+  --badge-label-size: 0.5rem;
+  --badge-label-line-height: 0.67rem;
   --snw-header-link-size: 1rem;
   --snw-header-link-line-height: 1.5rem;
   --snw-flyout-link-size: 1rem;
   --snw-flyout-link-line-height: 1.75rem;
 
-  @media (max-width: 960px) {
-    --quote-size: 1.5rem;
-    --quote-line-height: 2rem;
-    --heading-size1: 1.5rem;
-    --heading-line-height-size1: 1.75rem;
-    --heading-size2: 1.5rem;
-    --heading-line-height-size2: 1.75rem;
-    --heading-size3: 1.25rem;
-    --heading-line-height-size3: 1.5rem;
-    --heading-size4: 1rem;
-    --heading-line-height-size4: 1.25rem;
-    --heading-size5: 0.75rem;
-    --heading-line-height-size5: 1rem;
-    --string-size1: 1rem;
-    --string-line-height-size1: 1.25rem;
-    --string-size2: 0.75rem;
-    --string-line-height-size2: 1rem;
-    --string-size3: 0.5rem;
-    --string-line-height-size3: 0.75rem;
-    --body-size1: 1rem;
-    --body-line-height-size1: 1.5rem;
-    --body-size2: 0.75rem;
-    --body-line-height-size2: 1.25rem;
-    --body-size3: 0.5rem;
-    --body-line-height-size3: 1rem;
-    --label-size1: 1rem;
-    --label-size2: 0.75rem;
-    --label-size3: 0.56rem;
-    --link-label-size: 0.75rem;
-    --link-label-line-height: 0.75rem;
-    --button-label-size: 0.75rem;
-    --button-label-line-height: 1rem;
-    --badge-label-size: 0.5rem;
-    --badge-label-line-height: 0.67rem;
+  @media (min-width: $breakpoint-md) {
+    --quote-size: 1.75rem;
+    --quote-line-height: 2.25rem;
+    --heading-size1: 1.75rem;
+    --heading-line-height-size1: 2rem;
+    --heading-size2: 1.75rem;
+    --heading-line-height-size2: 2rem;
+    --heading-size3: 1.5rem;
+    --heading-line-height-size3: 1.75rem;
+    --heading-size4: 1.25rem;
+    --heading-line-height-size4: 1.5rem;
+    --heading-size5: 1rem;
+    --heading-line-height-size5: 1.25rem;
+    --string-size1: 1.25rem;
+    --string-line-height-size1: 1.5rem;
+    --string-size2: 1rem;
+    --string-line-height-size2: 1.25rem;
+    --string-size3: 0.75rem;
+    --string-line-height-size3: 1rem;
+    --body-size1: 1.25rem;
+    --body-line-height-size1: 1.75rem;
+    --body-size2: 1rem;
+    --body-line-height-size2: 1.5rem;
+    --body-size3: 0.75rem;
+    --body-line-height-size3: 1.25rem;
+    --label-size1: 1.25rem;
+    --label-size2: 1rem;
+    --label-size3: 0.75rem;
+    --link-label-size: 1rem;
+    --link-label-line-height: 1rem;
+    --button-label-size: 1rem;
+    --button-label-line-height: 1.25rem;
+    --badge-label-size: 0.75rem;
+    --badge-label-line-height: 1rem;
     --snw-header-link-size: 1rem;
     --snw-header-link-line-height: 1.5rem;
     --snw-flyout-link-size: 1rem;
-    --snw-flyout-link-line-height: 1.75rem;
+    --snw-flyout-link-line-height: 1.875rem;
   }
 
-  @media (min-width: 1801px) {
+  @media (min-width: $breakpoint-xl) {
     --quote-size: 2rem;
     --quote-line-height: 2.5rem;
     --heading-size1: 2rem;
@@ -280,23 +288,23 @@ $snw-flyout-link-line-height: var(--snw-flyout-link-line-height);
 :root {
   --spacing-micro: 0.25rem;
   --spacing-xsm: 0.5rem;
-  --spacing-sm: 1rem;
-  --spacing-md: 2rem;
-  --spacing-lg: 3rem;
-  --spacing-xl: 4rem;
-  --spacing-xxl: 5rem;
-
-  @media (max-width: 960px) {
-    --spacing-micro: 0.25;
+  --spacing-sm: 0.75rem;
+  --spacing-md: 1.75rem;
+  --spacing-lg: 2.75rem;
+  --spacing-xl: 3.75rem;
+  --spacing-xxl: 4.75rem;
+
+  @media (min-width: $breakpoint-md) {
+    --spacing-micro: 0.25rem;
     --spacing-xsm: 0.5rem;
-    --spacing-sm: 0.75rem;
-    --spacing-md: 1.75rem;
-    --spacing-lg: 2.75rem;
-    --spacing-xl: 3.75rem;
-    --spacing-xxl: 4.75rem;
+    --spacing-sm: 1rem;
+    --spacing-md: 2rem;
+    --spacing-lg: 3rem;
+    --spacing-xl: 4rem;
+    --spacing-xxl: 5rem;
   }
 
-  @media (min-width: 1801px) {
+  @media (min-width: $breakpoint-xl) {
     --spacing-micro: 0.5rem;
     --spacing-xsm: 0.75rem;
     --spacing-sm: 1.25rem;
@@ -314,6 +322,7 @@ $spacing-md: var(--spacing-md);
 $spacing-lg: var(--spacing-lg);
 $spacing-xl: var(--spacing-xl);
 $spacing-xxl: var(--spacing-xl);
+$spacing-sizes: micro, xsm, sm, md, lg, xl, xxl;
 
 // PADDING
 $padding-micro: var(--spacing-micro);
@@ -334,14 +343,6 @@ $margin-lg: var(--spacing-lg);
 $margin-xl: var(--spacing-xl);
 $margin-xxl: var(--spacing-xxl);
 
-////////////////////////
-/// Breakpoint TOKENS that map to minimum pixels
-///////////////////////
-$breakpoint-sm: 461px;
-$breakpoint-md: 1301px;
-$breakpoint-lg: 1401px;
-$breakpoint-xl: 1801px;
-
 ////////////////////////
 /// max-site-width TOKEN:
 ///////////////////////

package/dist/scss/components/Footer/_footer.scss

@@ -8,6 +8,10 @@
   margin: $spacing-lg 0 0;
   max-width: 100%;
 
+  &__logo svg {
+    height: 10px;
+  }
+
   &__links {
     display: flex;
     flex-direction: column;
@@ -16,10 +20,21 @@
     padding: $spacing-lg $spacing-md $spacing-md $spacing-md;
     width: 100%;
 
-    @include media($size-sm) {
-      flex-direction: row;
+    @include media($size-md) {
+      flex-flow: row wrap;
+      gap: $spacing-lg;
       max-width: $desktop-max-width;
       padding: $spacing-lg $spacing-md $spacing-lg $spacing-md;
+
+      .#{$px}-social {
+        flex-basis: 100%; // force this to wrap
+      }
+    }
+
+    @include media($size-lg) {
+      .#{$px}-social {
+        flex-basis: 0;
+      }
     }
 
     div {
@@ -50,12 +65,12 @@
   &-desktop {
     display: none;
 
-    @include media($size-sm) {
+    @include media($size-md) {
       display: block;
     }
   }
 
-  @include media($size-sm) {
+  @include media($size-md) {
     &-mobile {
       display: none;
     }
@@ -84,7 +99,7 @@
         opacity: 1;
         padding: $spacing-sm 0;
 
-        @include media($size-sm) {
+        @include media($size-md) {
           cursor: unset;
         }
 

package/dist/scss/components/Grid/_grid.scss

@@ -14,4 +14,15 @@
       margin: 0 $spacing-xl;
     }
   }
+
+  // Generate unique classes for column and row gaps with all spacings
+  @each $spacing-size in $spacing-sizes {
+    &--column-gap-#{$spacing-size} {
+      column-gap: var(--spacing-#{$spacing-size});
+    }
+
+    &--row-gap-#{$spacing-size} {
+      row-gap: var(--spacing-#{$spacing-size});
+    }
+  }
 }

package/dist/scss/components/GridItem/_gridItem.scss

@@ -27,17 +27,17 @@
   }
 
   @include media($size-sm) {
-    @for $i from 1 through 4 {
+    @for $i from 1 through 2 {
       &--span-sm-#{$i} {
-        @include gridItemColumnSpan($i, 4);
+        @include gridItemColumnSpan($i, 2);
       }
     }
   }
 
   @include media($size-md) {
-    @for $i from 1 through 12 {
+    @for $i from 1 through 6 {
       &--span-md-#{$i} {
-        @include gridItemColumnSpan($i, 12);
+        @include gridItemColumnSpan($i, 6);
       }
     }
   }

package/dist/scss/components/HeroBanner/_heroBanner.scss

@@ -13,13 +13,14 @@
   padding: 1rem;
   width: 100%;
 
-  @media (max-width: $breakpoint-sm) {
+  @include media($size-md, $type: 'max') {
     align-items: center;
     align-self: stretch;
     background: transparent;
     flex-direction: column;
     gap: 1.875rem;
-    padding: 1.875rem 0.9375rem;
+    min-height: unset;
+    padding: 1.875rem 0 0;
 
     &::after {
       background: var(--background);
@@ -47,7 +48,7 @@
     color: $pure-white;
     text-align: center;
 
-    @media (max-width: $breakpoint-sm) {
+    @include media($size-md, $type: 'max') {
       color: $pure-black;
     }
   }
@@ -72,11 +73,11 @@
     font-size: 0.75rem;
     gap: 1.875rem;
 
-    @media (min-width: $breakpoint-sm) {
+    @include media($size-md) {
       font-size: 0.875rem;
     }
 
-    @media (max-width: $breakpoint-sm) {
+    @include media($size-md, $type: 'max') {
       align-items: center;
       flex-direction: column;
       gap: 1rem;

package/dist/scss/components/LinkList/_linkList.scss

@@ -6,6 +6,10 @@
     grid-column: span 2;
 
     @include media($size-md) {
+      grid-column: span 3;
+    }
+
+    @include media($size-lg) {
       grid-column: span 4;
     }
   }

package/dist/scss/components/Social/_social.scss

@@ -8,19 +8,19 @@
   padding: 0;
   width: 100%;
 
-  @include media($size-sm) {
+  @include media($size-md) {
     margin-top: 0;
   }
 
   .#{$px}-text {
     margin-bottom: $spacing-sm;
 
-    @include media($size-sm) {
+    @include media($size-md) {
       margin-bottom: $spacing-sm;
     }
   }
 
-  @include media($size-sm) {
+  @include media($size-md) {
     align-items: flex-start;
   }
 
@@ -55,7 +55,7 @@
     padding: $spacing-sm 0 0;
     width: 100%;
 
-    @include media($size-sm) {
+    @include media($size-md) {
       gap: 0 1rem;
       justify-content: flex-start;
       margin: $spacing-sm 0 $spacing-md;

package/dist/scss/components/SplitPanel/_splitPanel.scss

@@ -10,7 +10,7 @@
     flex: 1 1 0px;
   }
 
-  @include media($size-sm) {
+  @include media($size-md) {
     align-items: stretch;
     flex-direction: row;
 

package/dist/scss/components/Subscribe/_subscribe.scss

@@ -24,7 +24,7 @@
     margin: $spacing-sm 0 $spacing-md;
     width: 100%;
 
-    @include media($size-sm) {
+    @include media($size-md) {
       width: 240px;
     }
   }
@@ -36,7 +36,7 @@
     font-size: 0.75rem;
     margin-top: $spacing-sm;
 
-    @include media($size-sm) {
+    @include media($size-md) {
       margin-top: $spacing-xl;
     }
   }

package/dist/utils/index.d.ts

@@ -17,6 +17,15 @@ export declare enum PaddingTokens {
     xl = "xl",
     xxl = "xxl"
 }
+export declare enum SpacingTokens {
+    micro = "micro",
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    xxl = "xxl"
+}
 export declare const noOp: () => void;
 export interface InputProps {
     /**

package/dist/utils/index.js

@@ -1,54 +1,55 @@
-import { jsx as m } from "react/jsx-runtime";
-import { kebabCase as d } from "../node_modules/change-case/dist/index.js";
+import { jsx as d } from "react/jsx-runtime";
+import { kebabCase as c } from "../node_modules/change-case/dist/index.js";
 import * as u from "react";
-const s = "seldon", x = ({ id: e, ...n }, a) => {
-  const t = d(a);
+const o = "seldon", v = ({ id: e, ...r }, t) => {
+  const n = c(t);
   return {
-    ...n,
-    "data-testid": e ? `${t}-${e}` : `${t}`,
-    className: `${s}-${t}`
+    ...r,
+    "data-testid": e ? `${n}-${e}` : `${n}`,
+    className: `${o}-${n}`
   };
 };
-var $ = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))($ || {});
-const v = () => {
+var x = /* @__PURE__ */ ((e) => (e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))(x || {}), $ = /* @__PURE__ */ ((e) => (e.micro = "micro", e.xs = "xs", e.sm = "sm", e.md = "md", e.lg = "lg", e.xl = "xl", e.xxl = "xxl", e))($ || {});
+const C = () => {
 };
-function g({
+function w({
   disabled: e = !1,
-  id: n,
-  invalid: a = !1,
-  invalidText: t = "invalid",
-  readOnly: r = !1,
-  type: i,
-  warn: l = !1,
-  warnText: c
+  id: r,
+  invalid: t = !1,
+  invalidText: n = "invalid",
+  readOnly: a = !1,
+  type: s,
+  warn: i = !1,
+  warnText: m
 }) {
-  const o = {
-    disabled: !r && e,
-    invalid: !r && !e && a,
-    invalidId: `${n}-error-msg`,
-    type: i === "toggle" ? "checkbox" : i,
-    warn: !r && !e && !a && l,
-    warnId: `${n}-warn-msg`,
+  const l = {
+    disabled: !a && e,
+    invalid: !a && !e && t,
+    invalidId: `${r}-error-msg`,
+    type: s === "toggle" ? "checkbox" : s,
+    warn: !a && !e && !t && i,
+    warnId: `${r}-warn-msg`,
     validation: null
   };
-  return o.invalid && (o.validation = /* @__PURE__ */ m("div", { className: `${s}-input__validation ${s}-${i}-input--invalid`, id: o.invalidId, children: t })), o.warn && (o.validation = /* @__PURE__ */ m("div", { className: `${s}-input__validation ${s}-${i}-input--warn`, id: o.warnId, children: c })), o;
+  return l.invalid && (l.validation = /* @__PURE__ */ d("div", { className: `${o}-input__validation ${o}-${s}-input--invalid`, id: l.invalidId, children: n })), l.warn && (l.validation = /* @__PURE__ */ d("div", { className: `${o}-input__validation ${o}-${s}-input--warn`, id: l.warnId, children: m })), l;
 }
-const C = (/* @__PURE__ */ new Date()).getFullYear(), w = (e, n = "end", a = "vertical") => `${s}-padding-${a}-${e}-${n}`, h = (e) => /(.+)@(.+){2,}\.(.+){2,}/i.test(e), I = function(e, n, a = !1) {
-  const t = u.Children.toArray(e).filter((r) => r && r.type === n && !a ? r : r && r.type !== n && a);
-  return t.length > 0 ? t : null;
-}, N = (e) => {
-  const n = e.split("?"), a = new URLSearchParams(n[1]), r = Array.from(a.entries()).map(([l, c]) => [l, encodeURIComponent(c)]).map(([l, c]) => `${l}=${c}`).join("&");
-  return `${n[0]}?${r}`;
+const g = (/* @__PURE__ */ new Date()).getFullYear(), h = (e, r = "end", t = "vertical") => `${o}-padding-${t}-${e}-${r}`, I = (e) => /(.+)@(.+){2,}\.(.+){2,}/i.test(e), N = function(e, r, t = !1) {
+  const n = u.Children.toArray(e).filter((a) => a && a.type === r && !t ? a : a && a.type !== r && t);
+  return n.length > 0 ? n : null;
+}, R = (e) => {
+  const r = e.split("?"), t = new URLSearchParams(r[1]), a = Array.from(t.entries()).map(([i, m]) => [i, encodeURIComponent(m)]).map(([i, m]) => `${i}=${m}`).join("&");
+  return `${r[0]}?${a}`;
 };
 export {
-  $ as PaddingTokens,
-  C as defaultYear,
-  h as emailValidation,
-  N as encodeURLSearchParams,
-  I as findChildrenOfType,
-  w as generatePaddingClassName,
-  x as getCommonProps,
-  v as noOp,
-  s as px,
-  g as useNormalizedInputProps
+  x as PaddingTokens,
+  $ as SpacingTokens,
+  g as defaultYear,
+  I as emailValidation,
+  R as encodeURLSearchParams,
+  N as findChildrenOfType,
+  h as generatePaddingClassName,
+  v as getCommonProps,
+  C as noOp,
+  o as px,
+  w as useNormalizedInputProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.46.0",
+  "version": "1.47.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"