@phillips/seldon 1.19.3 → 1.20.0

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

@@ -4,13 +4,9 @@ export interface GridProps extends React.HTMLAttributes<HTMLElement> {
      */
     children: React.ReactNode;
     /**
-     * Optional element to render in place of a button e.g. 'div', 'span', CustomComponent, etc
+     * Optional element to render as the top-level component e.g. 'div', 'span', CustomComponent, etc.  Defaults to 'section'.
      */
     element?: React.ElementType<GridProps>;
-    /**
-     * Optional boolean to dictate if the grid has left and right margins
-     */
-    hasMargins?: boolean;
 }
-export declare function Grid({ children, className, element: Element, hasMargins, id, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ children, className, element: Element, id, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 export default Grid;

package/dist/components/Grid/Grid.js

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

package/dist/components/GridItem/GridItem.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { GridItemAlign } from './types';
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Alignment defaults to 'center'
+     */
+    align?: GridItemAlign;
+    /**
+     * column spans at different breakpoints, defaults to all columns.  If less than the total number of columns at the breakpoint it will be centered.
+     */
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    /**
+     * Optional element to render as the top-level component e.g. 'div', 'span', CustomComponent, etc.  Defaults to 'div'.
+     */
+    element?: React.ElementType;
+}
+/**
+ * ## Overview
+ *
+ * This item can be placed in a Grid and appropriately sized for the current breakpoint.  It can also be aligned within the grid cell.
+ * If you center multiple GridItems in a Grid, they will wrap to the next line and be centered on that line.
+ *
+ * [Figma Link](https://www.figma.com/design/Hp2FyltbOmRxTuw9kSwBAd/EPIC-About-Us?node-id=912-5904&t=WzvEYp5zbnGnRFUf-4)
+ */
+declare const GridItem: ({ children, xs, sm, md, lg, align, id, element: Element, className, ...props }: GridItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export default GridItem;

package/dist/components/GridItem/GridItem.js

@@ -0,0 +1,31 @@
+import { jsx as I } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import { px as g } from "../../utils/index.js";
+import j from "../../node_modules/classnames/index.js";
+import { determineColumnSpanClassName as v, validateColumnSpans as S } from "./gridItemUtils.js";
+import { GridItemAlign as b } from "./types.js";
+const B = ({
+  children: p,
+  xs: r = 2,
+  sm: m = 4,
+  md: o = 12,
+  lg: i = 12,
+  align: n = b.center,
+  id: e,
+  element: d = "div",
+  className: s,
+  ...l
+}) => {
+  const u = e ? `grid-item-${e}` : "grid-item", t = a(() => ({ xs: r, sm: m, md: o, lg: i }), [r, m, o, i]), c = a(() => [
+    `${g}-grid-item`,
+    // figure out the class names for each breakpoint
+    Object.entries(t).map(
+      ([f, C]) => v(f, C, n)
+    ),
+    s
+  ], [n, t, s]);
+  return S(Object.values(t)) ? /* @__PURE__ */ I(d, { ...l, "data-testid": u, id: e, className: j(c), children: p }) : null;
+};
+export {
+  B as default
+};

package/dist/components/GridItem/gridItemUtils.d.ts

@@ -0,0 +1,4 @@
+import { GridItemProps } from './GridItem';
+import { GridItemAlign } from './types';
+export declare const determineColumnSpanClassName: (breakpoint: GridItemAlign, columnSpan: number, align?: GridItemProps['align']) => string;
+export declare const validateColumnSpans: (columnSpans: number[]) => boolean;

package/dist/components/GridItem/gridItemUtils.js

@@ -0,0 +1,16 @@
+import { px as n } from "../../utils/index.js";
+import { GridItemAlign as s } from "./types.js";
+const l = (r, e, t = s.center) => `${n}-grid-item--span-${r}-${e} ${n}-grid-item--span-${r}-${e}-align-${t}`, i = (r) => {
+  for (let e = 0; e < r.length; e++) {
+    const t = r[e];
+    if (t > 12)
+      return console.warn("Column spans must be less than or equal to 12"), !1;
+    if (t < 1)
+      return console.warn("Column spans must be greater than or equal to 1"), !1;
+  }
+  return !0;
+};
+export {
+  l as determineColumnSpanClassName,
+  i as validateColumnSpans
+};

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

@@ -0,0 +1,5 @@
+export declare enum GridItemAlign {
+    center = "center",
+    left = "left",
+    right = "right"
+}

package/dist/components/GridItem/types.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((e) => (e.center = "center", e.left = "left", e.right = "right", e))(r || {});
+export {
+  r as GridItemAlign
+};

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

@@ -3,7 +3,7 @@ export interface LinkBlockProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Props for the Link component */
     linkProps: Omit<LinkProps, 'variant'>;
     /** Renders description under link */
-    description: string;
+    description: React.ReactNode;
 }
 /**
  * ## Overview

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

@@ -7,7 +7,7 @@ export interface LinkListProps extends React.HTMLAttributes<HTMLUListElement> {
 /**
  * ## 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.
+ * 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.
  *
  * [Figma Link](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?type=design&node-id=5709-8035&mode=design&t=jOnrmrqnE8lCQvGR-4)
  */

package/dist/components/Row/Row.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { PaddingTokens } from '../../utils';
+import GridItem, { GridItemProps } from '../GridItem/GridItem';
+export interface RowProps extends React.HTMLAttributes<HTMLElement> {
+    /** These children can be an array of GridItem components */
+    children: React.ReactElement<GridItemProps, typeof GridItem> | React.ReactElement<GridItemProps, typeof GridItem>[];
+    /**
+     * Optional element to render as the top-level component e.g. 'div', 'span', CustomComponent, etc.  Defaults to 'section'.
+     */
+    element?: React.ElementType;
+    /**
+     * Optional  padding override for the row.  Defaults to `lg`.  Horizontal padding is fixed for Row components at `lg`
+     */
+    padding?: {
+        top: PaddingTokens;
+        bottom: PaddingTokens;
+    };
+}
+/**
+ * ## Overview
+ *
+ * A page will usually contain multiple Rows.  The Row component will apply paddings to the contents within it.  Usually a Grid will be rendered within a Row to align to the grid, but other elements are supported.
+ *
+ * [Figma Link](https://www.figma.com/design/Hp2FyltbOmRxTuw9kSwBAd/EPIC-About-Us?node-id=912-5904&t=WzvEYp5zbnGnRFUf-4)
+ */
+declare const Row: ({ children, id, element: CustomElement, padding, className, ...props }: RowProps) => import("react/jsx-runtime").JSX.Element;
+export default Row;

package/dist/components/Row/Row.js

@@ -0,0 +1,31 @@
+import { jsx as p } from "react/jsx-runtime";
+import { generatePaddingClassName as e, PaddingTokens as s, px as b } from "../../utils/index.js";
+import f from "../../node_modules/classnames/index.js";
+const d = ({
+  children: a,
+  id: o,
+  element: m,
+  padding: t = { top: s.lg, bottom: s.lg },
+  className: n,
+  ...r
+}) => {
+  const l = o ? `row-${o}` : "row", c = `${b}-row`;
+  return /* @__PURE__ */ p(
+    m || "section",
+    {
+      ...r,
+      "data-testid": l,
+      id: o,
+      className: f(
+        c,
+        t.top && e(t.top, "start"),
+        t.bottom && e(t.bottom, "end"),
+        n
+      ),
+      children: a
+    }
+  );
+};
+export {
+  d as default
+};

package/dist/index.d.ts

@@ -9,6 +9,9 @@ export { default as Link, type LinkProps } from './components/Link/Link';
 export { LinkVariants } from './components/Link/utils';
 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';
+export { default as GridItem, type GridItemProps } from './components/GridItem/GridItem';
+export { GridItemAlign } from './components/GridItem/types';
 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';

package/dist/index.js

@@ -1,38 +1,44 @@
 import { default as t } from "./components/Button/Button.js";
 import { default as a } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as s } from "./components/Footer/Footer.js";
-import { Grid as u } from "./components/Grid/Grid.js";
-import { default as d } from "./components/Header/Header.js";
+import { default as l } from "./components/Footer/Footer.js";
+import { Grid as d } 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 k } from "./components/Link/Link.js";
 import { LinkVariants as c } from "./components/Link/utils.js";
-import { default as g } from "./components/LinkBlock/LinkBlock.js";
-import { default as b } from "./components/LinkList/LinkList.js";
-import { default as H } from "./components/Select/Select.js";
-import { default as y } from "./components/SplitPanel/SplitPanel.js";
-import { default as F } from "./components/Subscribe/Subscribe.js";
-import { default as I } from "./components/Social/Social.js";
-import { default as j } from "./components/ViewingsList/ViewingsList.js";
-import { default as v } from "./components/ViewingsList/StatefulViewingsList.js";
-import { default as A } from "./pages/Page.js";
+import { default as B } from "./components/LinkBlock/LinkBlock.js";
+import { default as G } from "./components/LinkList/LinkList.js";
+import { default as V } from "./components/Row/Row.js";
+import { default as H } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as y } from "./components/GridItem/types.js";
+import { default as E } from "./components/Select/Select.js";
+import { default as R } from "./components/SplitPanel/SplitPanel.js";
+import { default as j } from "./components/Subscribe/Subscribe.js";
+import { default as v } from "./components/Social/Social.js";
+import { default as C } from "./components/ViewingsList/ViewingsList.js";
+import { default as J } from "./components/ViewingsList/StatefulViewingsList.js";
+import { default as M } from "./pages/Page.js";
 export {
   t as Button,
   a as ErrorBoundary,
-  s as Footer,
-  u as Grid,
-  d as Header,
+  l as Footer,
+  d as Grid,
+  H as GridItem,
+  y as GridItemAlign,
+  p as Header,
   x as HeroBanner,
   n as Input,
   k as Link,
-  g as LinkBlock,
-  b as LinkList,
+  B as LinkBlock,
+  G as LinkList,
   c as LinkVariants,
-  A as Page,
-  H as Select,
-  I as Social,
-  y as SplitPanel,
-  v as StatefulViewingsList,
-  F as Subscribe,
-  j as ViewingsList
+  M as Page,
+  V as Row,
+  E as Select,
+  v as Social,
+  R as SplitPanel,
+  J as StatefulViewingsList,
+  j as Subscribe,
+  C as ViewingsList
 };

package/dist/scss/_sharedClasses.scss

@@ -0,0 +1,10 @@
+@import './_utils';
+
+// I think this is pretty tailwindy to generate these common classes
+@each $direction in 'vertical', 'horizontal' {
+  @each $padding in $padding-tokens {
+    @each $side in 'start', 'end', 'both' {
+      @include padding($padding, $direction, $side);
+    }
+  }
+}

package/dist/scss/_utils.scss

@@ -1,3 +1,4 @@
+@use 'sass:string';
 @import './vars';
 
 @mixin hidden {
@@ -40,10 +41,10 @@
 }
 
 @mixin gridMargins {
-  margin: 0 $spacing-medium;
+  margin: 0 $spacing-md;
 
   @media (min-width: $breakpoint3) {
-    margin: 0 $spacing-large;
+    margin: 0 $spacing-lg;
   }
 
   @media (min-width: $breakpoint4) {
@@ -53,7 +54,7 @@
 
 @mixin grid($columns: 2, $margins-on: true) {
   display: grid;
-  gap: $spacing-medium;
+  gap: $spacing-md;
   grid-template-columns: repeat($columns, 1fr);
 
   @if $margins-on {
@@ -63,7 +64,7 @@
 
 @mixin gridContainer($margins-on: true) {
   display: grid;
-  gap: $spacing-medium;
+  gap: $spacing-md;
   grid-template-columns: repeat(2, 1fr);
 
   @media (min-width: $breakpoint2) {
@@ -126,3 +127,37 @@
     }
   }
 }
+
+// prepends the parent class name to the child class name for BEM
+@mixin padding($padding: $padding-lg, $direction: 'all', $side: 'both') {
+  $parsed-padding: string.slice(#{$padding}, 15, -2); // Parse the padding value by removing "-var(--spacing-" and ")".
+
+  .#{$px}-padding-#{$direction}-#{$parsed-padding}-#{$side} {
+    // Use the parsed padding value.
+    @if $direction == 'all' {
+      @if $side == 'both' {
+        padding: $padding;
+      }
+    }
+
+    @if $direction == 'vertical' {
+      @if $side == 'start' or $side == 'both' {
+        padding-top: $padding;
+      }
+
+      @if $side == 'end' or $side == 'both' {
+        padding-bottom: $padding;
+      }
+    }
+
+    @if $direction == 'horizontal' {
+      @if $side == 'start' or $side == 'both' {
+        padding-left: $padding;
+      }
+
+      @if $side == 'end' or $side == 'both' {
+        padding-right: $padding;
+      }
+    }
+  }
+}

package/dist/scss/_vars.scss

@@ -165,51 +165,52 @@ $text-badge-label-size: var(--label-size3);
 :root {
   --spacing-micro: 0.25rem;
   --spacing-xsm: 0.5rem;
-  --spacing-small: 1rem;
-  --spacing-medium: 2rem;
-  --spacing-large: 3rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 2rem;
+  --spacing-lg: 3rem;
   --spacing-xl: 6rem;
 
   @media (max-width: 960px) {
     --spacing-micro: 0.19rem;
     --spacing-xsm: 0.38rem;
-    --spacing-small: 0.75rem;
-    --spacing-medium: 1.5rem;
-    --spacing-large: 2.25rem;
+    --spacing-sm: 0.75rem;
+    --spacing-md: 1.5rem;
+    --spacing-lg: 2.25rem;
     --spacing-xl: 4.8rem;
   }
 
   @media (min-width: 1801px) {
     --spacing-micro: 0.31rem;
     --spacing-xsm: 0.63rem;
-    --spacing-small: 1.25rem;
-    --spacing-medium: 2.5rem;
-    --spacing-large: 3.75rem;
+    --spacing-sm: 1.25rem;
+    --spacing-md: 2.5rem;
+    --spacing-lg: 3.75rem;
     --spacing-xl: 7.5rem;
   }
 }
 
 $spacing-micro: var(--spacing-micro);
 $spacing-xsm: var(--spacing-xsm);
-$spacing-small: var(--spacing-small);
-$spacing-medium: var(--spacing-medium);
-$spacing-large: var(--spacing-large);
+$spacing-sm: var(--spacing-sm);
+$spacing-md: var(--spacing-md);
+$spacing-lg: var(--spacing-lg);
 $spacing-xl: var(--spacing-xl);
 
 // PADDING
 $padding-micro: var(--spacing-micro);
 $padding-xsm: var(--spacing-xsm);
-$padding-small: var(--spacing-small);
-$padding-medium: var(--spacing-medium);
-$padding-large: var(--spacing-large);
+$padding-sm: var(--spacing-sm);
+$padding-md: var(--spacing-md);
+$padding-lg: var(--spacing-lg);
 $padding-xl: var(--spacing-xl);
+$padding-tokens: $padding-micro, $padding-xsm, $padding-sm, $padding-md, $padding-lg, $padding-xl;
 
 // MARGIN
 $margin-micro: var(--spacing-micro);
 $margin-xsm: var(--spacing-xsm);
-$margin-small: var(--spacing-small);
-$margin-medium: var(--spacing-medium);
-$margin-large: var(--spacing-large);
+$margin-sm: var(--spacing-sm);
+$margin-md: var(--spacing-md);
+$margin-lg: var(--spacing-lg);
 $margin-xl: var(--spacing-xl);
 
 ////////////////////////
@@ -229,6 +230,8 @@ $max-site-width: 1560px;
 /// Media breakpoint tokens:
 ///////////////////////////
 
+$breakpoint-xs: 'xs';
 $breakpoint-sm: 'sm';
 $breakpoint-md: 'md';
 $breakpoint-lg: 'lg';
+$breakpoint-xl: 'xl';

package/dist/scss/components/Button/_button.scss

@@ -14,7 +14,7 @@
   display: inline-flex;
   justify-content: center;
   min-width: 3rem;
-  padding: 0.5em $spacing-medium;
+  padding: 0.5em $spacing-md;
   transition:
     color 0.25s,
     background-color 0.25s,

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

@@ -15,21 +15,21 @@
 
   &__navigation {
     background-color: $white;
-    padding: $spacing-medium $spacing-medium $spacing-small;
+    padding: $spacing-md $spacing-md $spacing-sm;
     text-align: right;
 
     @include media($breakpoint-md) {
-      padding: $spacing-medium $spacing-large $spacing-small;
+      padding: $spacing-md $spacing-lg $spacing-sm;
     }
 
     @include media($breakpoint-lg) {
-      padding: $spacing-medium $spacing-xl $spacing-small;
+      padding: $spacing-md $spacing-xl $spacing-sm;
     }
 
     ul {
       display: inline-flex;
       flex-wrap: wrap;
-      gap: $spacing-medium;
+      gap: $spacing-md;
       justify-content: center;
       list-style: none;
       padding: 0;
@@ -48,7 +48,7 @@
     align-items: center;
     display: flex;
     flex-direction: column;
-    padding: $spacing-large $spacing-medium 0;
+    padding: $spacing-lg $spacing-md 0;
 
     @include media($breakpoint-sm) {
       align-items: flex-start;
@@ -57,7 +57,7 @@
     }
 
     @include media($breakpoint-md) {
-      padding: 3.75rem $spacing-large;
+      padding: 3.75rem $spacing-lg;
     }
 
     @include media($breakpoint-lg) {
@@ -66,7 +66,7 @@
   }
 
   &__content-split-panel__left {
-    margin-bottom: $spacing-medium;
+    margin-bottom: $spacing-md;
 
     @include media($breakpoint-sm) {
       margin-bottom: 0;

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

@@ -7,10 +7,10 @@
   }
 
   &__container--has-margins {
-    margin: 0 $spacing-medium;
+    margin: 0 $spacing-md;
 
     @media (min-width: 1401px) {
-      margin: 0 $spacing-large;
+      margin: 0 $spacing-lg;
     }
 
     @media (min-width: 1801px) {

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

@@ -0,0 +1,50 @@
+@import '../../_utils';
+
+@mixin gridItemColumnSpan($span: 1, $total-cols: 12) {
+  grid-column: span $span;
+
+  &-align-right {
+    grid-column-end: $total-cols + 1;
+    justify-self: end;
+  }
+
+  &-align-center {
+    grid-column: calc((#{$total-cols} + 1 - #{$span}) / 2) / span #{$span};
+  }
+}
+
+.#{$px}-grid-item {
+  justify-self: center;
+  text-align: center;
+  width: 100%;
+
+  @for $i from 1 through 2 {
+    &--span-xs-#{$i} {
+      @include gridItemColumnSpan(#{$i}, 2);
+    }
+  }
+
+  @include media($breakpoint-sm) {
+    @for $i from 1 through 4 {
+      &--span-sm-#{$i} {
+        @include gridItemColumnSpan(#{$i}, 4);
+      }
+    }
+  }
+
+  @include media($breakpoint-md) {
+    @for $i from 1 through 12 {
+      &--span-md-#{$i} {
+        @include gridItemColumnSpan(#{$i}, 12);
+      }
+    }
+  }
+
+  @include media($breakpoint-lg) {
+    @for $i from 1 through 12 {
+      &--span-lg-#{$i} {
+        @include gridItemColumnSpan(#{$i}, 12);
+      }
+    }
+  }
+}

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

@@ -5,7 +5,7 @@
     // mobile first
     grid-column: span 2;
 
-    @include media($breakpoint-sm) {
+    @include media($breakpoint-md) {
       grid-column: span 4;
     }
   }

package/dist/scss/components/Row/_row.scss

@@ -0,0 +1,7 @@
+@import '../../_vars';
+
+.#{$px}-row {
+  // horizontal padding is fixed
+  padding-left: $spacing-lg;
+  padding-right: $spacing-lg;
+}

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

@@ -22,7 +22,7 @@
     display: flex;
     gap: 0 1.25rem;
     list-style: none;
-    margin: 0 0 $spacing-medium;
+    margin: 0 0 $spacing-md;
     padding: 0;
 
     @include media($breakpoint-sm) {

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

@@ -5,11 +5,7 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: $spacing-medium;
-
-  &:not(.#{$px}-split-panel--borderless) {
-    padding: 2.5rem $spacing-medium;
-  }
+  gap: $spacing-md;
 
   > * {
     flex: 1 1 0px;
@@ -26,7 +22,7 @@
 
     & > :not(:last-child) {
       border-right: 1px solid $medium-gray;
-      padding-right: $spacing-medium;
+      padding-right: $spacing-md;
     }
 
     &--borderless {

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

@@ -13,6 +13,6 @@
   }
 
   & .split-panel-story__text:not(:last-child) {
-    margin-bottom: $spacing-medium;
+    margin-bottom: $spacing-md;
   }
 }

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

@@ -28,10 +28,10 @@
 
   &__blurb,
   .#{$px}-input__input {
-    margin-bottom: $spacing-medium;
+    margin-bottom: $spacing-md;
   }
 
   &__button {
-    margin: 0 0 $spacing-medium;
+    margin: 0 0 $spacing-md;
   }
 }

package/dist/scss/styles.scss

@@ -5,6 +5,7 @@
 
 // @use 'reset';
 @import './typography';
+@import './sharedClasses';
 
 // ⚛️ Components
 @import 'components/Button/button';
@@ -15,6 +16,8 @@
 @import 'components/Header/header';
 @import 'components/HeroBanner/heroBanner';
 @import 'components/Input/input';
+@import 'components/Row/row';
+@import 'components/GridItem/gridItem';
 @import 'components/Social/social';
 @import 'components/SplitPanel/splitPanel';
 @import 'components/Subscribe/subscribe';

package/dist/utils/index.d.ts

@@ -1,5 +1,12 @@
 import * as React from 'react';
 export declare const px = "phillips";
+export declare enum PaddingTokens {
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl"
+}
 export declare const noOp: () => void;
 export interface CommonProps {
     /**
@@ -65,4 +72,5 @@ interface NormalizedProps {
  */
 export declare function useNormalizedInputProps({ disabled, id, invalid, invalidText, readOnly, type, warn, warnText, }: InputProps): NormalizedProps;
 export declare const defaultYear: number;
+export declare const generatePaddingClassName: (padding: PaddingTokens, side?: 'start' | 'end', direction?: 'vertical' | 'horizontal') => string;
 export {};

package/dist/utils/index.js

@@ -1,29 +1,32 @@
-import { jsx as d } from "react/jsx-runtime";
-const n = "phillips";
+import { jsx as s } from "react/jsx-runtime";
+const l = "phillips";
+var m = /* @__PURE__ */ ((a) => (a.xs = "xs", a.sm = "sm", a.md = "md", a.lg = "lg", a.xl = "xl", a))(m || {});
 function c({
-  disabled: l = !1,
-  id: o,
-  invalid: t = !1,
-  invalidText: e = "invalid",
-  readOnly: r = !1,
-  type: a,
-  warn: s = !1,
+  disabled: a = !1,
+  id: n,
+  invalid: r = !1,
+  invalidText: d = "invalid",
+  readOnly: e = !1,
+  type: t,
+  warn: o = !1,
   warnText: v
 }) {
   const i = {
-    disabled: !r && l,
-    invalid: !r && !l && t,
-    invalidId: `${o}-error-msg`,
-    type: a === "toggle" ? "checkbox" : a,
-    warn: !r && !l && !t && s,
-    warnId: `${o}-warn-msg`,
+    disabled: !e && a,
+    invalid: !e && !a && r,
+    invalidId: `${n}-error-msg`,
+    type: t === "toggle" ? "checkbox" : t,
+    warn: !e && !a && !r && o,
+    warnId: `${n}-warn-msg`,
     validation: null
   };
-  return i.invalid && (i.validation = /* @__PURE__ */ d("div", { className: `${n}-input__validation ${n}-${a}-input--invalid`, id: i.invalidId, children: e })), i.warn && (i.validation = /* @__PURE__ */ d("div", { className: `${n}-input__validation ${n}-${a}-input--warn`, id: i.warnId, children: v })), i;
+  return i.invalid && (i.validation = /* @__PURE__ */ s("div", { className: `${l}-input__validation ${l}-${t}-input--invalid`, id: i.invalidId, children: d })), i.warn && (i.validation = /* @__PURE__ */ s("div", { className: `${l}-input__validation ${l}-${t}-input--warn`, id: i.warnId, children: v })), i;
 }
-const p = (/* @__PURE__ */ new Date()).getFullYear();
+const $ = (/* @__PURE__ */ new Date()).getFullYear(), p = (a, n = "end", r = "vertical") => `${l}-padding-${r}-${a}-${n}`;
 export {
-  p as defaultYear,
-  n as px,
+  m as PaddingTokens,
+  $ as defaultYear,
+  p as generatePaddingClassName,
+  l as px,
   c as useNormalizedInputProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.19.3",
+  "version": "1.20.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -25,14 +25,15 @@
   ],
   "scripts": {
     "start": "storybook dev -p 6006",
-    "test": "jest",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
     "build": "npm run clean && tsc && vite build",
     "build:storybook": "storybook build",
     "preview": "npx http-server storybook-static",
     "clean": "rimraf './dist'",
     "clean:stories": "rimraf './storybook-static'",
     "format": "prettier . --write",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && npm run lint:styles",
+    "lint": "tsc && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && npm run lint:styles",
     "lint:styles": "stylelint \"src/**/*.scss\" --fix",
     "prepare": "husky install"
   },
@@ -43,35 +44,33 @@
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@figma/code-connect": "^0.1.1",
+    "@figma/code-connect": "^0.1.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.0.3",
     "@storybook/addon-essentials": "^7.6.18",
-    "@storybook/addon-interactions": "^7.0.22",
+    "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.0.22",
+    "@storybook/blocks": "^7.6.19",
     "@storybook/react": "^7.0.22",
     "@storybook/react-vite": "^7.6.19",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/color": "^3.0.6",
-    "@types/jest": "^29.5.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.6.0",
     "color": "^4.2.3",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.6.1",
     "prettier": "3.2.5",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
@@ -80,20 +79,20 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "sass": "^1.77.0",
-    "semantic-release": "^23.0.8",
+    "semantic-release": "^23.1.1",
     "storybook": "^7.6.19",
     "stylelint": "^16.4.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.2.1",
-    "ts-jest": "^29.1.2",
+    "stylelint-scss": "^6.3.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.0.2",
-    "vite": "^4.5.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",