@phillips/seldon 1.17.0 → 1.17.2

package/dist/components/Header/Header.d.ts

@@ -1,7 +1,7 @@
 type User = {
     name: string;
 };
-interface HeaderProps {
+export interface HeaderProps {
     user?: User;
     onLogin?: () => void;
     onLogout?: () => void;

package/dist/components/HeroBanner/HeroBanner.d.ts

@@ -1,4 +1,4 @@
-interface HeroBannerProps {
+export interface HeroBannerProps {
     /**
      * informational text above the header (e.g. region label or "buy now")
      */

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-export { default as Button } from './components/Button/Button';
-export { default as ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
-export { default as Grid } from './components/Grid/Grid';
-export { default as Header } from './components/Header/Header';
-export { default as HeroBanner } from './components/HeroBanner/HeroBanner';
-export { default as Input } from './components/Input/Input';
-export { default as Select } from './components/Select/Select';
-export { default as ViewingsList } from './components/ViewingsList/ViewingsList';
-export { default as StatefulViewingsList } from './components/ViewingsList/StatefulViewingsList';
+export { default as Button, type ButtonProps } from './components/Button/Button';
+export { default as ErrorBoundary, type ErrorBoundaryProps } from './components/ErrorBoundary/ErrorBoundary';
+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 Select, type SelectProps } from './components/Select/Select';
+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/scss/_reset.scss

@@ -9,8 +9,8 @@
 }
 
 body {
-  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
+  line-height: 1.5;
 }
 
 img,

package/dist/scss/_type.scss

@@ -2,7 +2,7 @@
 
 @mixin hText($size: $heading-size1, $color: $primary-black, $transform-style: capitalize) {
   color: $color;
-  font-family: 'DistinctDisplay';
+  font-family: DistinctDisplay, sans-serif;
   font-size: $size;
   font-weight: 400;
   line-height: 1.25;
@@ -11,14 +11,14 @@
 
 @mixin pText($size: $body-size1, $color: $soft-black) {
   color: $color;
-  font-family: 'Montserrat';
+  font-family: Montserrat, sans-serif;
   font-size: $size;
-  line-height: 1.5;
   letter-spacing: 0.0625rem;
+  line-height: 1.5;
 }
 
 @mixin labelText($label) {
-  font-family: 'Montserrat';
+  font-family: Montserrat, sans-serif;
 
   @if $label == 'button' {
     font-size: $button-label-size;
@@ -26,6 +26,7 @@
     letter-spacing: 0.0625rem;
     text-transform: capitalize;
   }
+
   @if $label == 'cta-sm' {
     font-size: $cta-sm-label-size;
     font-weight: 600;
@@ -33,6 +34,7 @@
     line-height: 1.25;
     text-transform: uppercase;
   }
+
   @if $label == 'cta-lg' {
     font-size: $cta-lg-label-size;
     font-weight: 700;
@@ -40,6 +42,7 @@
     line-height: 1.25;
     text-transform: uppercase;
   }
+
   @if $label == 'email' {
     font-size: $email-label-size;
     font-weight: 600;
@@ -47,12 +50,14 @@
     line-height: 1.25;
     text-transform: lowercase;
   }
+
   @if $label == 'text' {
     font-size: $text-label-size;
     font-weight: 500;
     letter-spacing: 0.0625rem;
     line-height: 1.25;
   }
+
   @if $label == 'text-badge' {
     font-size: $text-badge-label-size;
     font-weight: 500;
@@ -67,57 +72,74 @@
   @if $token == 'button' {
     @include labelText($button);
   }
+
   @if $token == 'cta-sm' {
     @include labelText($cta-sm);
   }
+
   @if $token == 'cta-lg' {
     @include labelText($cta-lg);
   }
+
   @if $token == 'email' {
     @include labelText($email);
   }
+
   @if $token == 'text' {
     @include labelText($text);
   }
+
   @if $token == 'text-badge' {
     @include labelText($text-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 == 'heading1' {
     @include hText($heading-size1);
   }
+
   @if $token == 'heading2' {
     @include hText($heading-size2);
   }
+
   @if $token == 'heading3' {
     @include hText($heading-size3);
   }
+
   @if $token == 'heading4' {
     @include hText($heading-size4);
   }
+
   // Body
   @if $token == 'body1' {
     @include pText($body-size1);
   }
+
   @if $token == 'body2' {
     @include pText($body-size2);
   }
+
   @if $token == 'body3' {
     @include pText($body-size3);
   }

package/dist/scss/_typography.scss

@@ -3,13 +3,13 @@
 html,
 body {
   font-family:
-    'Montserrat',
+    Montserrat,
     -apple-system,
     BlinkMacSystemFont,
-    avenir next,
+    'avenir next',
     avenir,
-    segoe ui,
-    helvetica neue,
+    'segoe ui',
+    'helvetica neue',
     helvetica,
     Cantarell,
     Ubuntu,
@@ -18,57 +18,61 @@ body {
     arial,
     sans-serif;
   font-size: 16px;
-  margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  margin: 0;
   -webkit-overflow-scrolling: touch;
+  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
 }
 
 /** Fonts **/
 @font-face {
-  font-family: 'DistinctDisplay';
+  font-family: DistinctDisplay;
   src: url('../fonts/Distinct-Display.woff') format('woff');
   src: url('../fonts/Distinct-Display.woff2') format('woff2');
 }
+
 @mixin DistinctDisplay {
-  font-family: 'DistinctDisplay';
+  font-family: DistinctDisplay, sans-serif;
 }
 
 @font-face {
-  font-family: 'DistinctDisplay';
+  font-family: DistinctDisplay;
+  font-style: italic;
   src: url('../fonts/Distinct-DisplayItalic.woff') format('woff');
   src: url('../fonts/Distinct-DisplayItalic.woff2') format('woff2');
-  font-style: italic;
 }
 
 @mixin DistinctDisplayItalic {
-  font-family: 'DistinctDisplay';
+  font-family: DistinctDisplay, sans-serif;
   font-style: italic;
 }
 
 @font-face {
-  font-family: 'Distinct';
+  font-family: Distinct;
   src: url('../fonts/Distinct-Text.woff') format('woff');
   src: url('../fonts/Distinct-Text.woff2') format('woff2');
 }
+
 @mixin DistinctText {
-  font-family: 'Distinct';
+  font-family: Distinct, sans-serif;
 }
+
 @font-face {
-  font-family: 'Distinct';
+  font-family: Distinct;
+  font-style: italic;
   src: url('../fonts/Distinct-Italic.woff') format('woff');
   src: url('../fonts/Distinct-Italic.woff2') format('woff2');
-  font-style: italic;
 }
 
 @mixin DistinctItalic {
-  font-family: 'Distinct';
+  font-family: Distinct, sans-serif;
   font-style: italic;
 }
 
 @mixin headerText {
-  @include DistinctDisplay();
+  @include DistinctDisplay;
+
   color: $primary-black;
   font-weight: 400;
 }

package/dist/scss/_utils.scss

@@ -1,20 +1,20 @@
 @mixin hidden {
-  position: absolute;
-  overflow: hidden;
-  padding: 0;
-  border: 0;
-  margin: -1px;
   block-size: 1px;
+  border: 0;
   clip-path: inset(100%);
   inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
   visibility: inherit;
   white-space: nowrap;
 }
 
 @mixin warning-icon-before {
+  border-bottom: 1.25rem solid #d6d141;
   border-left: 0.75rem solid transparent;
   border-right: 0.75rem solid transparent;
-  border-bottom: 1.25rem solid #d6d141;
   content: '';
   height: 0;
   position: absolute;
@@ -26,27 +26,27 @@
 @mixin warning-icon-after {
   color: $pure-black;
   content: '!';
-  font-family: arial;
-  font-size: 0.85vrem;
+  font-family: arial, sans-serif;
+  font-size: 0.85rem;
   height: 2rem;
-  width: 2rem;
+  line-height: 1;
   position: absolute;
   right: 10px;
-  top: 50px;
   text-align: center;
-  line-height: 1;
+  top: 50px;
+  width: 2rem;
 }
 
 @mixin grid($columns: 2) {
   display: grid;
-  grid-template-columns: repeat($columns, 1fr);
   gap: $spacing-medium;
+  grid-template-columns: repeat($columns, 1fr);
 }
 
 @mixin gridContainer($margins-on: true) {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
   gap: $spacing-medium;
+  grid-template-columns: repeat(2, 1fr);
 
   @if $margins-on {
     margin: 0 $spacing-medium;
@@ -58,6 +58,7 @@
 
   @media (min-width: $breakpoint3) {
     grid-template-columns: repeat(12, 1fr);
+
     @if $margins-on {
       margin: 0 $spacing-large;
     }

package/dist/scss/_vars.scss

@@ -6,24 +6,27 @@ $px: phillips;
 ///////////////////////
 
 // Primary color palette
-$pure-black: #000000;
+$pure-black: #000;
 $primary-black: #323232;
-$white: #ffffff;
+$white: #fff;
 
 // Secondary color palette
 $soft-black: #545454;
 $dark-gray: #7b7474;
+
 // Utilititarian color palette
 $keyline-gray: #949494;
 $medium-gray: #c3bebb;
 $light-gray: #eceae7;
 $off-white: #f4f2f1;
+
 // Notification color palette
-$error-red: #ff0000;
-$error-pink: rgba(255, 229, 229, 0.9);
+$error-red: #f00;
+$error-pink: rgb(255 229 229 / 90%);
 $warn-yellow: #d6d141;
 $post-sale-pink: #ff0086;
 $cta-blue: #4a90e2;
+
 // AM color palette
 $widget-blue: #4a90e2;
 $widget-green: #6a9c53;
@@ -33,10 +36,12 @@ $clock-widget-blue: $widget-blue;
 $clock-widget-green: $widget-green;
 $clock-widget-maroon: $widget-maroon;
 $clock-widget-red: $widget-red;
+
 // Articker color palette
 $articker-red: #fc1e2b;
 $articker-orange: #ff8201;
 $articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
+
 // Legacy mapping
 $pure-white: $white;
 $post-sale-magenta: $post-sale-pink;
@@ -69,18 +74,15 @@ $cta-lg: 'cta-lg';
 $email: 'email';
 $text: 'text';
 $text-badge: 'text-badge';
-
 $display0: 'display0';
 $display1: 'display1';
 $display2: 'display2';
 $display3: 'display3';
 $display4: 'display4';
-
 $heading1: 'heading1';
 $heading2: 'heading2';
 $heading3: 'heading3';
 $heading4: 'heading4';
-
 $body1: 'body1';
 $body2: 'body2';
 $body3: 'body3';
@@ -95,41 +97,35 @@ $body3: 'body3';
   --heading-size2: 1.95rem;
   --heading-size3: 1.56rem;
   --heading-size4: 1.56rem;
-
   --body-size1: 1.25rem;
   --body-size2: 1rem;
   --body-size3: 0.75rem;
-
   --label-size1: 1.25rem;
   --label-size2: 1rem;
-  --label-size2: 0.75rem;
+  --label-size3: 0.75rem;
 
-  @media (max-width: 960px) {
+  @media (width <= 960px) {
     --heading-size0: 2.59rem;
     --heading-size1: 1.83rem;
     --heading-size2: 1.46rem;
     --heading-size3: 1.17rem;
     --heading-size4: 0.94rem;
-
     --body-size1: 0.94rem;
     --body-size2: 0.75rem;
     --body-size3: 0.56rem;
-
     --label-size1: 1rem;
     --label-size2: 0.75rem;
-    --label-size2: 0.56rem;
+    --label-size3: 0.56rem;
   }
 
-  @media (min-width: 1800px) {
+  @media (width >= 1800px) {
     --heading-size0: 4.06rem;
     --heading-size1: 3.05rem;
     --heading-size2: 2.44rem;
     --heading-size3: 1.95rem;
-
     --body-size1: 1.56rem;
     --body-size2: 1.25rem;
     --body-size3: 0.94rem;
-
     --label-size1: 1.56rem;
     --label-size2: 1.25rem;
     --label-size3: 1rem;
@@ -142,15 +138,18 @@ $display-size1: var(--heading-size1);
 $display-size2: var(--heading-size2);
 $display-size3: var(--heading-size3);
 $display-size4: var(--heading-size4);
+
 // HEADING
 $heading-size1: var(--heading-size1);
 $heading-size2: var(--heading-size2);
 $heading-size3: var(--heading-size3);
 $heading-size4: var(--heading-size4);
+
 // BODY
 $body-size1: var(--body-size1);
 $body-size2: var(--body-size2);
 $body-size3: var(--body-size3);
+
 // LABELS
 $button-label-size: var(--label-size2);
 $cta-sm-label-size: var(--label-size2);
@@ -162,7 +161,7 @@ $text-badge-label-size: var(--label-size3);
 ////////////////////////
 /// SPACING TOKENS:
 ///////////////////////
-
+/* stylelint-disable-next-line no-duplicate-selectors */
 :root {
   --spacing-micro: 0.25rem;
   --spacing-xsm: 0.5rem;
@@ -171,7 +170,7 @@ $text-badge-label-size: var(--label-size3);
   --spacing-large: 3rem;
   --spacing-xl: 6rem;
 
-  @media (max-width: 960px) {
+  @media (width <= 960px) {
     --spacing-micro: 0.19rem;
     --spacing-xsm: 0.38rem;
     --spacing-small: 0.75rem;
@@ -180,7 +179,7 @@ $text-badge-label-size: var(--label-size3);
     --spacing-xl: 4.8rem;
   }
 
-  @media (min-width: 1800px) {
+  @media (width >= 1800px) {
     --spacing-micro: 0.31rem;
     --spacing-xsm: 0.63rem;
     --spacing-small: 1.25rem;

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

@@ -3,6 +3,7 @@
 
 .#{$px}-button {
   @include bodyText;
+
   align-items: center;
   background-color: $pure-black;
   border: 0;
@@ -26,18 +27,19 @@
       fill: $pure-white;
     }
   }
+
   svg {
     fill: $pure-white;
-    transition: fill 0.25s;
     margin-inline-end: 0.5rem;
+    transition: fill 0.25s;
     width: 1em;
   }
 
   &--secondary,
   &--ghost {
-    color: $text-color;
     background-color: transparent;
     border: 1px solid;
+    color: $text-color;
 
     &:hover,
     &:focus {

package/dist/scss/components/DatePicker/_datePicker.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 @import 'flatpickr/dist/flatpickr.css';
 @import '../../vars';
 @import '../../typography';
@@ -13,6 +14,7 @@
   .flatpickr-day.endRange {
     border-radius: 0;
   }
+
   .flatpickr-day.selected,
   .flatpickr-day:hover,
   .flatpickr-day:focus,
@@ -25,25 +27,27 @@
 
   .flatpickr-day.today {
     border-color: transparent;
-    @include DistinctDisplay;
     font-weight: bold;
     position: relative;
 
+    @include DistinctDisplay;
+
     &::after {
       background-color: $pure-black;
       bottom: 2px;
       content: '';
       height: 0.25rem;
-      width: 0.25rem;
-      position: absolute;
       left: 50%;
+      position: absolute;
       transform: translateX(-50%);
+      width: 0.25rem;
     }
   }
 
   .flatpickr-months .flatpickr-prev-month:hover,
   .flatpickr-months .flatpickr-next-month:hover {
     background-color: $pure-black;
+
     svg {
       fill: $pure-white;
     }
@@ -53,28 +57,29 @@
   .flatpickr-monthDropdown-months,
   .flatpickr-current-month input.cur-year {
     @include DistinctDisplay;
+
     font-size: 1rem;
     text-transform: uppercase;
   }
 
   .flatpickr-weekday {
     @include DistinctDisplay;
+
     font-weight: bold;
   }
 
   .flatpickr-current-month {
-    padding: 0.65rem 0 0 0;
+    padding: 0.65rem 0 0;
   }
 
   .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
   .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
   .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
-    -webkit-box-shadow: -10px 0 0 #e6e6e6;
     box-shadow: -10px 0 0 #e6e6e6;
   }
 
-  &.arrowTop:before,
-  &.arrowTop:after {
+  &.arrowTop::before,
+  &.arrowTop::after {
     content: unset;
   }
 }

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

@@ -9,11 +9,11 @@
   &__container--has-margins {
     margin: 0 $spacing-medium;
 
-    @media (min-width: 1401px) {
+    @media (width >= 1401px) {
       margin: 0 $spacing-large;
     }
 
-    @media (min-width: 1801px) {
+    @media (width >= 1801px) {
       margin: 0 $spacing-xl;
     }
   }

package/dist/scss/components/Header/_header.scss

@@ -1,10 +1,10 @@
 .storybook-header {
-  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  display: flex;
   align-items: center;
+  border-bottom: 1px solid rgb(0 0 0 / 10%);
+  display: flex;
+  font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   justify-content: space-between;
+  padding: 15px 20px;
 }
 
 .storybook-header svg {
@@ -13,11 +13,11 @@
 }
 
 .storybook-header h1 {
-  font-weight: 700;
+  display: inline-block;
   font-size: 20px;
+  font-weight: 700;
   line-height: 1;
   margin: 6px 0 6px 10px;
-  display: inline-block;
   vertical-align: top;
 }
 

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

@@ -3,9 +3,9 @@
 .#{$px}-hero-banner {
   align-items: center;
   background: var(--background);
+  background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
-  background-position: center center;
   display: flex;
   flex-flow: column;
   justify-content: center;
@@ -13,32 +13,32 @@
   padding: 1rem;
   width: 100%;
 
-  @media (max-width: 28.8125rem) {
-    flex-direction: column;
+  @media (width <= 28.8125rem) {
     align-items: center;
-    gap: 1.875rem;
     align-self: stretch;
-    padding: 1.875rem 0.9375rem;
     background: $pure-black;
+    flex-direction: column;
+    gap: 1.875rem;
+    padding: 1.875rem 0.9375rem;
 
     &::before {
-      content: '';
       background: var(--background);
-      width: 100%;
-      height: 12rem;
-      background-size: cover;
-      background-repeat: no-repeat;
       background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      content: '';
+      height: 12rem;
+      width: 100%;
     }
   }
 
   h1 {
-    font-family: 'DistinctDisplay', sans-serif;
+    font-family: DistinctDisplay, sans-serif;
   }
 
   h1 span,
   p {
-    font-family: 'DistinctText', sans-serif;
+    font-family: DistinctText, sans-serif;
   }
 
   h1,
@@ -52,16 +52,16 @@
 
   p {
     font-size: 0.875rem;
-    line-height: 1;
     letter-spacing: 0.125rem;
+    line-height: 1;
     text-align: center;
   }
 
   & .#{$px}-hero-banner__content-wrapper {
-    max-width: 1082px;
+    align-items: center;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    max-width: 1082px;
   }
 
   & .#{$px}-hero-banner__pre-head {
@@ -70,14 +70,14 @@
     font-size: 0.75rem;
     gap: 1.875rem;
 
-    @media (min-width: 28.8125rem) {
+    @media (width >= 28.8125rem) {
       font-size: 0.875rem;
     }
 
-    @media (max-width: 28.8125rem) {
+    @media (width <= 28.8125rem) {
+      align-items: center;
       flex-direction: column;
       gap: 1rem;
-      align-items: center;
     }
   }
 
@@ -90,7 +90,7 @@
     margin: 1.875rem 0;
     text-align: center;
 
-    @media (min-width: 28.8125rem) {
+    @media (width >= 28.8125rem) {
       font-size: 2.375rem;
     }
 

package/dist/scss/components/Input/_input.scss

@@ -11,7 +11,7 @@ $lg: #{$px}-input--lg;
   width: 100%;
 
   &--hidden {
-    @include hidden();
+    @include hidden;
   }
 
   &__label {
@@ -23,7 +23,7 @@ $lg: #{$px}-input--lg;
     word-break: break-word;
 
     &--hidden {
-      @include hidden();
+      @include hidden;
     }
   }
 
@@ -34,15 +34,16 @@ $lg: #{$px}-input--lg;
     font-size: 0.8125rem;
     margin-bottom: 0.5rem;
     padding: 0.5rem;
+
     // width: 100%;
   }
 
   &__validation {
+    -webkit-box-orient: vertical;
     display: -webkit-box;
+    -webkit-line-clamp: 2;
     line-height: 1.25;
     overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
   }
 
   // Small input size
@@ -62,8 +63,7 @@ $lg: #{$px}-input--lg;
   // Inline
   &--inline {
     align-items: center;
-    flex-direction: row;
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     gap: 1rem;
 
     .#{$px}-input__input {
@@ -97,7 +97,7 @@ $lg: #{$px}-input--lg;
     }
 
     .#{$px}-input__input {
-      background-color: rgba(239, 239, 239, 0.3);
+      background-color: rgb(239 239 239 / 30%);
     }
   }
 
@@ -113,7 +113,7 @@ $lg: #{$px}-input--lg;
 
     .#{$px}-input__input {
       border: 1px solid $error-red;
-      box-shadow: inset 0px 0px 3px 3px $error-pink;
+      box-shadow: inset 0 0 3px 3px $error-pink;
     }
   }
 
@@ -175,6 +175,7 @@ $lg: #{$px}-input--lg;
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }

package/dist/scss/components/Toggle/_toggle.scss

@@ -8,6 +8,7 @@ $invalid: #{$px}-input--invalid;
 $warn: #{$px}-input--warn;
 $md: #{$px}-input--md;
 $lg: #{$px}-input--lg;
+
 // Shared Input styles
 .#{$px}-toggle-input {
   position: relative;
@@ -16,6 +17,7 @@ $lg: #{$px}-input--lg;
   .#{$px}-input__label {
     line-height: 1;
     margin-bottom: 2.5rem;
+
     // margin-left: 66px;
     position: relative;
 
@@ -28,14 +30,14 @@ $lg: #{$px}-input--lg;
     }
 
     &::before {
-      background-color: rgba(0, 0, 0, 0.4);
+      background-color: rgb(0 0 0 / 40%);
       border-radius: 1rem;
-      width: $toggleBaseWidth;
       height: 1rem;
       left: 0;
       transition:
         background-color 0.25s,
         color 0.25s;
+      width: $toggleBaseWidth;
     }
 
     &::after {
@@ -48,9 +50,9 @@ $lg: #{$px}-input--lg;
       color: white;
       height: 1rem;
       left: 0;
-      width: 1rem;
       transform: translate(0, 0);
       transition: transform 0.25s;
+      width: 1rem;
     }
   }
 
@@ -78,6 +80,7 @@ $lg: #{$px}-input--lg;
   // Hide actual checkbox input
   .#{$px}-input__input {
     @include hidden;
+
     margin-bottom: 0;
   }
 
@@ -117,8 +120,8 @@ $lg: #{$px}-input--lg;
       margin-bottom: 3.5rem;
 
       &::before {
-        width: 3.5rem;
         height: 2rem;
+        width: 3.5rem;
       }
 
       &::after {
@@ -130,16 +133,11 @@ $lg: #{$px}-input--lg;
     &.#{$inline} {
       .#{$px}-input__label {
         margin-bottom: 0.5rem;
+        margin-left: 4.375rem;
       }
     }
   }
 
-  &.#{$lg}.#{$inline} {
-    .#{$px}-input__label {
-      margin-left: 4.375rem;
-    }
-  }
-
   // When in checked state
   &:has(input:checked) {
     .#{$px}-input__label {

package/dist/scss/components/ViewingsList/_viewingsList.scss

@@ -8,8 +8,8 @@
   display: flex;
   flex-direction: column;
   gap: 2.5rem;
-  padding: 1rem;
   max-width: 38rem;
+  padding: 1rem;
 
   &__title {
     @include headerText;
@@ -30,6 +30,7 @@
 
   &__title {
     @include headerText;
+
     color: $soft-black;
   }
 

package/dist/scss/pages/_page.scss

@@ -1,19 +1,19 @@
 .storybook-page {
-  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #333;
+  font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
-  padding: 48px 20px;
   margin: 0 auto;
   max-width: 600px;
-  color: #333;
+  padding: 48px 20px;
 }
 
 .storybook-page h2 {
-  font-weight: 700;
+  display: inline-block;
   font-size: 32px;
+  font-weight: 700;
   line-height: 1;
   margin: 0 0 4px;
-  display: inline-block;
   vertical-align: top;
 }
 
@@ -22,13 +22,13 @@
 }
 
 .storybook-page a {
-  text-decoration: none;
   color: #1ea7fd;
+  text-decoration: none;
 }
 
 .storybook-page ul {
-  padding-left: 30px;
   margin: 1em 0;
+  padding-left: 30px;
 }
 
 .storybook-page li {
@@ -36,32 +36,32 @@
 }
 
 .storybook-page .tip {
-  display: inline-block;
+  background: #e7fdd8;
   border-radius: 1em;
+  color: #66bf3c;
+  display: inline-block;
   font-size: 11px;
-  line-height: 12px;
   font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
+  line-height: 12px;
   margin-right: 10px;
+  padding: 4px 12px;
   vertical-align: top;
 }
 
 .storybook-page .tip-wrapper {
   font-size: 13px;
   line-height: 20px;
-  margin-top: 40px;
   margin-bottom: 40px;
+  margin-top: 40px;
 }
 
 .storybook-page .tip-wrapper svg {
   display: inline-block;
   height: 12px;
-  width: 12px;
   margin-right: 4px;
-  vertical-align: top;
   margin-top: 3px;
+  vertical-align: top;
+  width: 12px;
 }
 
 .storybook-page .tip-wrapper svg path {

package/dist/scss/styles.scss

@@ -1,10 +1,13 @@
 // 🌎 Globals
 @import './vars';
+
 // @TODO: add styles when we can do a site wide regressions QA
 // @use 'reset';
 @import './typography';
+
 // ⚛️ Components
 @import 'components/Button/button';
+
 // @import 'components/DatePicker/datePicker';
 @import 'components/Header/header';
 @import 'components/HeroBanner/heroBanner';
@@ -12,5 +15,6 @@
 @import 'components/Toggle/toggle';
 @import 'components/ViewingsList/viewingsList';
 @import 'components/Grid/grid';
+
 // 📑 Pages
 @import 'pages/page';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.17.0",
+  "version": "1.17.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -29,7 +29,8 @@
     "clean": "rimraf './dist'",
     "clean:stories": "rimraf './storybook-static'",
     "format": "prettier . --write",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && npm run lint:styles",
+    "lint:styles": "stylelint \"src/**/*.scss\" --fix",
     "prepare": "husky install"
   },
   "dependencies": {
@@ -76,6 +77,11 @@
     "sass": "^1.63.4",
     "semantic-release": "^21.0.5",
     "storybook": "^7.0.22",
+    "stylelint": "^16.3.1",
+    "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.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.2",