@phillips/seldon 1.7.1 → 1.7.2

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

@@ -1,31 +1,25 @@
-export interface ButtonProps {
+import { CommonProps } from '../../utils';
+export interface ButtonProps extends CommonProps {
     /**
-     * Is this the principal call to action on the page?
+     * Button contents
      */
-    primary?: boolean;
+    children: React.ReactNode;
     /**
-     * What background color to use
+     * True if button comes after text
      */
-    backgroundColor?: string;
+    iconLast?: boolean;
     /**
-     * How large should the button be?
+     * Optional click handler
      */
-    size?: 'sm' | 'md' | 'lg';
+    onClick?: () => void;
     /**
-     * Button contents
+     * Is this the principal call to action on the page?
      */
-    children: React.ReactNode;
-    /**
-    * Unique id for component
-    */
-    id?: string;
+    primary?: boolean;
     /**
-     * Optional click handler
+     * How large should the button be?
      */
-    onClick?: () => void;
+    size?: 'sm' | 'md' | 'lg';
 }
-/**
- * Primary UI component for user interaction
- */
-declare const Button: ({ primary, size, backgroundColor, children, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ primary, size, children, iconLast, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/Button/Button.js

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

package/dist/components/Header/Header.js

@@ -3,27 +3,9 @@ import i from "../Button/Button.js";
 const a = ({ user: n, onLogin: r, onLogout: h, onCreateAccount: c }) => /* @__PURE__ */ e("header", { children: /* @__PURE__ */ l("div", { className: "storybook-header", children: [
   /* @__PURE__ */ l("div", { children: [
     /* @__PURE__ */ e("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ l("g", { fill: "none", fillRule: "evenodd", children: [
-      /* @__PURE__ */ e(
-        "path",
-        {
-          d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",
-          fill: "#FFF"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "path",
-        {
-          d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",
-          fill: "#555AB9"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "path",
-        {
-          d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",
-          fill: "#91BAF8"
-        }
-      )
+      /* @__PURE__ */ e("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
+      /* @__PURE__ */ e("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }),
+      /* @__PURE__ */ e("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })
     ] }) }),
     /* @__PURE__ */ e("h1", { children: "Acme" })
   ] }),

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

@@ -16,16 +16,16 @@ interface HeroBannerProps {
      */
     subHeadText?: string;
     /**
-    * Is there an association related to this sale?
-    */
+     * Is there an association related to this sale?
+     */
     association?: string;
     /**
-    * What background image or color to use
-    */
+     * What background image or color to use
+     */
     background?: string;
     /**
-    * Unique id for component testing
-    */
+     * Unique id for component testing
+     */
     id?: string;
 }
 declare const HeroBanner: ({ prehead, date, headerText, subHeadText, association, background, id }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/HeroBanner/HeroBanner.js

@@ -1,14 +1,6 @@
 import { jsx as n, jsxs as s } from "react/jsx-runtime";
 import { px as t } from "../../utils/index.js";
-const r = `${t}-hero-banner`, m = ({
-  prehead: e,
-  date: l,
-  headerText: o,
-  subHeadText: c,
-  association: h,
-  background: p,
-  id: a
-}) => /* @__PURE__ */ n(
+const r = `${t}-hero-banner`, m = ({ prehead: e, date: l, headerText: o, subHeadText: c, association: h, background: p, id: a }) => /* @__PURE__ */ n(
   "header",
   {
     "data-testid": a ? `hero-banner-${a}` : "hero-banner",

package/dist/components/Input/Input.js

@@ -2,63 +2,60 @@ import { jsxs as P, jsx as r } from "react/jsx-runtime";
 import * as R from "react";
 import e from "../../node_modules/classnames/index.js";
 import { px as t, useNormalizedInputProps as y } from "../../utils/index.js";
-const z = R.forwardRef(({
-  className: p,
-  defaultValue: l,
-  disabled: u,
-  hideLabel: d,
-  id: n,
-  inline: o,
-  invalid: m,
-  invalidText: $,
-  labelText: c,
-  onChange: _,
-  onClick: b,
-  placeholder: f,
-  readOnly: a,
-  size: w = "md",
-  type: s = "text",
-  value: x,
-  warn: h,
-  warnText: v,
-  ...I
-}, N) => {
-  const i = y({ disabled: u, id: n, invalid: m, invalidText: $, readOnly: a, type: s, warn: h, warnText: v }), j = e(
-    `${t}-${s}-input`,
-    `${t}-input`,
-    `${t}-input--${w}`,
-    {
+const z = R.forwardRef(
+  ({
+    className: p,
+    defaultValue: l,
+    disabled: u,
+    hideLabel: d,
+    id: n,
+    inline: o,
+    invalid: m,
+    invalidText: $,
+    labelText: c,
+    onChange: _,
+    onClick: b,
+    placeholder: f,
+    readOnly: a,
+    size: w = "md",
+    type: s = "text",
+    value: x,
+    warn: h,
+    warnText: v,
+    ...I
+  }, N) => {
+    const i = y({ disabled: u, id: n, invalid: m, invalidText: $, readOnly: a, type: s, warn: h, warnText: v }), j = e(`${t}-${s}-input`, `${t}-input`, `${t}-input--${w}`, {
       [`${t}-input--inline`]: o,
       [`${t}-input--readonly`]: a,
       [`${t}-input--disabled`]: i.disabled,
       [`${t}-input--invalid`]: i.invalid,
       [`${t}-input--warn`]: i.warn,
       [`${p}__wrapper`]: p
-    }
-  );
-  return /* @__PURE__ */ P("div", { className: j, children: [
-    /* @__PURE__ */ r("label", { htmlFor: n, className: e(`${t}-input__label`, { [`${t}-input__label--hidden`]: d }), children: c }),
-    /* @__PURE__ */ r(
-      "input",
-      {
-        className: e(`${t}-input__input`, { className: p }),
-        "data-testid": n,
-        defaultValue: l,
-        disabled: i.disabled,
-        id: n,
-        onChange: _,
-        onClick: b,
-        placeholder: f,
-        readOnly: a,
-        ref: N,
-        type: i.type,
-        value: x,
-        ...I
-      }
-    ),
-    i.validation
-  ] });
-});
+    });
+    return /* @__PURE__ */ P("div", { className: j, children: [
+      /* @__PURE__ */ r("label", { htmlFor: n, className: e(`${t}-input__label`, { [`${t}-input__label--hidden`]: d }), children: c }),
+      /* @__PURE__ */ r(
+        "input",
+        {
+          className: e(`${t}-input__input`, { className: p }),
+          "data-testid": n,
+          defaultValue: l,
+          disabled: i.disabled,
+          id: n,
+          onChange: _,
+          onClick: b,
+          placeholder: f,
+          readOnly: a,
+          ref: N,
+          type: i.type,
+          value: x,
+          ...I
+        }
+      ),
+      i.validation
+    ] });
+  }
+);
 z.displayName = "Input";
 export {
   z as default

package/dist/components/Select/Select.js

@@ -2,60 +2,57 @@ import { jsxs as R, jsx as l } from "react/jsx-runtime";
 import * as y from "react";
 import a from "../../node_modules/classnames/index.js";
 import { px as t, useNormalizedInputProps as z } from "../../utils/index.js";
-const S = y.forwardRef(({
-  children: r,
-  className: n,
-  defaultValue: o,
-  disabled: d,
-  hideLabel: u,
-  id: e,
-  inline: m,
-  invalid: $,
-  invalidText: c,
-  labelText: _,
-  onChange: b,
-  onClick: f,
-  readOnly: p,
-  size: w = "md",
-  value: h,
-  warn: v,
-  warnText: x,
-  ...j
-}, N) => {
-  const s = "select", i = z({ disabled: d, id: e, invalid: $, invalidText: c, readOnly: p, type: s, warn: v, warnText: x }), P = a(
-    `${t}-${s}-input`,
-    `${t}-input`,
-    `${t}-input--${w}`,
-    {
+const S = y.forwardRef(
+  ({
+    children: r,
+    className: n,
+    defaultValue: o,
+    disabled: d,
+    hideLabel: u,
+    id: e,
+    inline: m,
+    invalid: $,
+    invalidText: c,
+    labelText: _,
+    onChange: b,
+    onClick: f,
+    readOnly: p,
+    size: w = "md",
+    value: h,
+    warn: v,
+    warnText: x,
+    ...j
+  }, N) => {
+    const s = "select", i = z({ disabled: d, id: e, invalid: $, invalidText: c, readOnly: p, type: s, warn: v, warnText: x }), P = a(`${t}-${s}-input`, `${t}-input`, `${t}-input--${w}`, {
       [`${t}-input--inline`]: m,
       [`${t}-input--readonly`]: p,
       [`${t}-input--disabled`]: i.disabled,
       [`${t}-input--invalid`]: i.invalid,
       [`${t}-input--warn`]: i.warn,
       [`${n}__wrapper`]: n
-    }
-  );
-  return /* @__PURE__ */ R("div", { className: P, children: [
-    /* @__PURE__ */ l("label", { htmlFor: e, className: a(`${t}-input__label`, { [`${t}-input__label--hidden`]: u }), children: _ }),
-    /* @__PURE__ */ l(
-      "select",
-      {
-        className: a(`${t}-input__input`, { className: n }),
-        "data-testid": e,
-        defaultValue: o,
-        disabled: i.disabled,
-        id: e,
-        onChange: b,
-        onClick: f,
-        ref: N,
-        value: h,
-        ...j,
-        children: r
-      }
-    ),
-    i.validation
-  ] });
-});
+    });
+    return /* @__PURE__ */ R("div", { className: P, children: [
+      /* @__PURE__ */ l("label", { htmlFor: e, className: a(`${t}-input__label`, { [`${t}-input__label--hidden`]: u }), children: _ }),
+      /* @__PURE__ */ l(
+        "select",
+        {
+          className: a(`${t}-input__input`, { className: n }),
+          "data-testid": e,
+          defaultValue: o,
+          disabled: i.disabled,
+          id: e,
+          onChange: b,
+          onClick: f,
+          ref: N,
+          value: h,
+          ...j,
+          children: r
+        }
+      ),
+      i.validation
+    ] });
+  }
+);
 export {
   S as default
 };

package/dist/scss/_reset.scss

@@ -1,4 +1,6 @@
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -11,19 +13,32 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
   max-width: 100%;
 }
 
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   overflow-wrap: break-word;
 }
 
 #root {
   isolation: isolate;
-}
+}

package/dist/scss/_typography.scss

@@ -1,17 +1,27 @@
 @import './vars';
 
 body {
-  font-family: SeroWebPro,"Helvetica Neue",Helvetica,-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,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);
-    -webkit-overflow-scrolling: touch;
+  font-family:
+    SeroWebPro,
+    'Helvetica Neue',
+    Helvetica,
+    -apple-system,
+    '.SFNSText-Regular',
+    'San Francisco',
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Helvetica Neue',
+    Helvetica,
+    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);
+  -webkit-overflow-scrolling: touch;
 }
 
-
-
 /** Fonts **/
 @font-face {
   font-family: 'DistinctDisplay';
@@ -56,7 +66,6 @@ body {
 
 @mixin bodyText {
   color: $soft-black;
-  @include DistinctText();
 }
 
 // @TODO: uncomment when site is able to be refactored
@@ -76,4 +85,4 @@ body {
 // button {
 //   color: $soft-black;
 //   @include DistinctText();
-// }
+// }

package/dist/scss/_utils.scss

@@ -5,7 +5,7 @@
   border: 0;
   margin: -1px;
   block-size: 1px;
-  clip: rect(0,0,0,0);
+  clip: rect(0, 0, 0, 0);
   inline-size: 1px;
   visibility: inherit;
   white-space: nowrap;
@@ -35,4 +35,4 @@
   top: 50px;
   text-align: center;
   line-height: 1;
-}
+}

package/dist/scss/_vars.scss

@@ -1,8 +1,6 @@
-
 // prefix
 $px: phillips;
 
-
 // Primary color palette
 $pure-black: #000000;
 $primary-black: #323232;
@@ -32,7 +30,6 @@ $articker-red: #fc1e2b;
 $articker-orange: #ff8201;
 $articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
 
-
 // Font-variables
 $DistinctDisplay: 'DistinctDisplay';
 $DistinctDisplayItalic: 'DistinctDisplayItalic';
@@ -43,4 +40,4 @@ $DistinctText: 'DistinctText';
 $header-color: $pure-black;
 $header-family: $DistinctDisplay;
 $text-color: $soft-black;
-$text-family: $DistinctText;
+$text-family: $DistinctText;

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

@@ -1,4 +1,5 @@
 @import '../../vars';
+@import '../../_utils';
 
 .#{$px}-button {
   @include bodyText;
@@ -12,17 +13,48 @@
   justify-content: center;
   min-width: 9rem;
   padding: 0.5em 1.75em;
-  transition: color 0.25s, background-color 0.25s, font-weight 0.25s;
+  transition:
+    color 0.25s,
+    background-color 0.25s,
+    font-weight 0.25s;
 
   &:hover,
   &:focus {
-    background-color: $soft-black;
+    background-color: $primary-black;
+
+    svg {
+      fill: $pure-white;
+    }
+  }
+  svg {
+    fill: $pure-white;
+    transition: fill 0.25s;
+    margin-inline-end: 0.5rem;
+    width: 1em;
   }
 
   &--secondary {
     color: $text-color;
     background-color: transparent;
     box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1px inset;
+
+    &:hover,
+    &:focus {
+      color: $pure-white;
+
+      svg {
+        fill: $pure-white;
+      }
+    }
+
+    svg {
+      fill: $text-color;
+    }
+  }
+
+  &.#{$px}-button--icon-last svg {
+    margin-inline-end: unset;
+    margin-inline-start: 0.5rem;
   }
 
   &--sm {
@@ -39,8 +71,6 @@
   }
 
   * {
-    margin: 0
+    margin: 0;
   }
-
 }
-

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

@@ -2,7 +2,6 @@
 @import '../../vars';
 @import '../../typography';
 
-
 .flatpickr-calendar {
   @include DistinctText;
 
@@ -67,9 +66,9 @@
     padding: 0.65rem 0 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)) {
+  .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;
   }

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

@@ -1,5 +1,5 @@
 .storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
   display: flex;

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

@@ -1,101 +1,101 @@
 @import '../../vars';
 
 .#{$px}-hero-banner {
-    align-items: center;
-    background: var(--background);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center center;
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    min-height: 25rem;
-    padding: 1rem;
-    width: 100%;
+  align-items: center;
+  background: var(--background);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  min-height: 25rem;
+  padding: 1rem;
+  width: 100%;
 
-    @media (max-width: 28.8125rem) {
-        flex-direction: column;
-        align-items: center;
-        gap: 1.875rem;
-        align-self: stretch;
-        padding: 1.875rem 0.9375rem;
-        background: $pure-black;
+  @media (max-width: 28.8125rem) {
+    flex-direction: column;
+    align-items: center;
+    gap: 1.875rem;
+    align-self: stretch;
+    padding: 1.875rem 0.9375rem;
+    background: $pure-black;
 
-        &::before{
-            content: '';
-            background: var(--background);
-            width: 100%;
-            height: 12rem;
-            background-size: cover;
-            background-repeat: no-repeat;
-            background-position: center center;
-        }
+    &::before {
+      content: '';
+      background: var(--background);
+      width: 100%;
+      height: 12rem;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
     }
+  }
 
-    h1 {
-        font-family: 'DistinctDisplay', sans-serif;
-    }
+  h1 {
+    font-family: 'DistinctDisplay', sans-serif;
+  }
 
-    h1 span,
-    p {
-        font-family: 'DistinctText', sans-serif;        
-    }
+  h1 span,
+  p {
+    font-family: 'DistinctText', sans-serif;
+  }
 
-    h1,
-    h1 span,
-    p {
-        color: $pure-white;
-        font-weight: 400;
-        margin: 0;
-        text-transform: uppercase;
-    }
+  h1,
+  h1 span,
+  p {
+    color: $pure-white;
+    font-weight: 400;
+    margin: 0;
+    text-transform: uppercase;
+  }
 
-    p {
-        font-size: 0.875rem;
-        line-height: 1;
-        letter-spacing: 0.125rem;
-        text-align: center;
-    }
+  p {
+    font-size: 0.875rem;
+    line-height: 1;
+    letter-spacing: 0.125rem;
+    text-align: center;
+  }
 
-    & .#{$px}-hero-banner__content-wrapper {
-        max-width: 1082px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
+  & .#{$px}-hero-banner__content-wrapper {
+    max-width: 1082px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 
-    & .#{$px}-hero-banner__pre-head {
-        align-items: flex-start;
-        display: flex;
-        font-size: 0.75rem;
-        gap: 1.875rem;
+  & .#{$px}-hero-banner__pre-head {
+    align-items: flex-start;
+    display: flex;
+    font-size: 0.75rem;
+    gap: 1.875rem;
 
-        @media (min-width: 28.8125rem) {
-            font-size: 0.875rem;
-        }
+    @media (min-width: 28.8125rem) {
+      font-size: 0.875rem;
+    }
 
-        @media (max-width: 28.8125rem) { 
-            flex-direction: column;
-            gap: 1rem;
-            align-items: center;
-        }
+    @media (max-width: 28.8125rem) {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: center;
     }
+  }
 
-    & .#{$px}-hero-banner__heading {
-        align-self: stretch;
-        display: flex;
-        flex-direction: column;
-        font-size: 2rem;
-        line-height: 1;
-        margin: 1.875rem 0;
-        text-align: center;
+  & .#{$px}-hero-banner__heading {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    font-size: 2rem;
+    line-height: 1;
+    margin: 1.875rem 0;
+    text-align: center;
 
-        @media (min-width: 28.8125rem) {
-            font-size: 2.375rem;
-        }
+    @media (min-width: 28.8125rem) {
+      font-size: 2.375rem;
+    }
 
-        span {
-            font-size: 1.625rem;
-        }
+    span {
+      font-size: 1.625rem;
     }
+  }
 }

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

@@ -129,7 +129,7 @@ $lg: #{$px}-input--lg;
 
 .#{$px}-input--inline.#{$px}-radio-input,
 .#{$px}-input--inline.#{$px}-checkbox-input,
-.#{$px}-input--inline.#{$px}-toggle-input  {
+.#{$px}-input--inline.#{$px}-toggle-input {
   flex-direction: row-reverse;
   justify-content: flex-end;
   position: relative;
@@ -142,7 +142,7 @@ $lg: #{$px}-input--lg;
     .#{$px}-input__validation {
       left: 0;
       position: absolute;
-      top: 0
+      top: 0;
     }
   }
 

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

@@ -28,19 +28,23 @@ $lg: #{$px}-input--lg;
     }
 
     &::before {
-      background-color: rgba(0,0,0, .4);
+      background-color: rgba(0, 0, 0, 0.4);
       border-radius: 1rem;
       width: $toggleBaseWidth;
       height: 1rem;
       left: 0;
-      transition: background-color 0.25s, color 0.25s;
+      transition:
+        background-color 0.25s,
+        color 0.25s;
     }
 
     &::after {
       // background-color: transparent;
-      background: #fff linear-gradient(transparent,rgba($pure-black, 0.05));
+      background: #fff linear-gradient(transparent, rgba($pure-black, 0.05));
       border-radius: 50%;
-      box-shadow: 0 1px 2px 0 rgba($pure-black,.15), 0 0 0 1px rgba($pure-black,.15) inset;
+      box-shadow:
+        0 1px 2px 0 rgba($pure-black, 0.15),
+        0 0 0 1px rgba($pure-black, 0.15) inset;
       color: white;
       height: 1rem;
       left: 0;
@@ -51,7 +55,6 @@ $lg: #{$px}-input--lg;
   }
 
   &.#{$inline} {
-
     .#{$px}-input__label {
       margin-bottom: 0.5rem;
       margin-left: 66px;
@@ -82,7 +85,6 @@ $lg: #{$px}-input--lg;
     padding-top: 2rem;
   }
 
-
   // Height changes
   &.#{$md},
   &.#{$lg} {
@@ -140,24 +142,24 @@ $lg: #{$px}-input--lg;
 
   // When in checked state
   &:has(input:checked) {
-
     .#{$px}-input__label {
       &::before {
         background-color: $pure-black;
       }
 
       &::after {
-        transform: translate($toggleBaseWidth - 1rem, 0)
+        transform: translate($toggleBaseWidth - 1rem, 0);
       }
     }
 
     &.#{$md} .#{$px}-input__label::after,
     &.#{$lg} .#{$px}-input__label::after {
-      transform: translate($toggleBaseWidth - 1.5rem, 0)
+      transform: translate($toggleBaseWidth - 1.5rem, 0);
     }
 
-
-    &.#{$inline} .#{$px}-input__label::after { transform: translate($toggleBaseWidth - 1rem, -50%); }
+    &.#{$inline} .#{$px}-input__label::after {
+      transform: translate($toggleBaseWidth - 1rem, -50%);
+    }
 
     &.#{$md}.#{$inline} .#{$px}-input__label::after,
     &.#{$lg}.#{$inline} .#{$px}-input__label::after {
@@ -165,10 +167,14 @@ $lg: #{$px}-input--lg;
     }
 
     // Error state checked
-    &.#{$invalid} .#{$px}-input__label::before { background-color: $error-red; }
+    &.#{$invalid} .#{$px}-input__label::before {
+      background-color: $error-red;
+    }
 
     // warn state checked
-    &.#{$warn} .#{$px}-input__label::before { background-color: $warn-yellow; }
+    &.#{$warn} .#{$px}-input__label::before {
+      background-color: $warn-yellow;
+    }
   }
   &.#{$warn} {
     &.#{$md},

package/dist/scss/pages/_page.scss

@@ -1,5 +1,5 @@
 .storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
   padding: 48px 20px;

package/dist/scss/styles.scss

@@ -11,4 +11,4 @@
 @import 'components/Input/input';
 @import 'components/Toggle/toggle';
 // 📑 Pages
-@import 'pages/page';
+@import 'pages/page';

package/dist/utils/index.d.ts

@@ -1,6 +1,16 @@
 import * as React from 'react';
 export declare const px = "phillips";
 export declare const noOP: () => void;
+export interface CommonProps {
+    /**
+     * Optional className to be applied to the outer most element
+     */
+    className?: string;
+    /**
+     * A custom `id`
+     */
+    id?: string;
+}
 export interface InputProps {
     /**
      * Specify whether the `<input>` should be disabled

package/dist/utils/index.js

@@ -19,21 +19,7 @@ function c({
     warnId: `${r}-warn-msg`,
     validation: null
   };
-  return i.invalid && (i.validation = /* @__PURE__ */ s(
-    "div",
-    {
-      className: `${n}-input__validation ${n}-${a}-input--invalid`,
-      id: i.invalidId,
-      children: t
-    }
-  )), i.warn && (i.validation = /* @__PURE__ */ s(
-    "div",
-    {
-      className: `${n}-input__validation ${n}-${a}-input--warn`,
-      id: i.warnId,
-      children: e
-    }
-  )), i;
+  return i.invalid && (i.validation = /* @__PURE__ */ s("div", { className: `${n}-input__validation ${n}-${a}-input--invalid`, id: i.invalidId, children: t })), i.warn && (i.validation = /* @__PURE__ */ s("div", { className: `${n}-input__validation ${n}-${a}-input--warn`, id: i.warnId, children: e })), i;
 }
 export {
   n as px,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -8,8 +8,8 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.js",
-        "default": "./dist/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
       }
     },
     "./dist/": {
@@ -28,6 +28,7 @@
     "preview": "npx http-server storybook-static",
     "clean": "rimraf './dist'",
     "clean:stories": "rimraf './storybook-static'",
+    "format": "prettier . --write",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prepare": "husky install"
   },
@@ -67,6 +68,7 @@
     "husky": "^8.0.3",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
+    "prettier": "3.0.3",
     "prop-types": "^15.8.1",
     "rimraf": "^5.0.1",
     "rollup-plugin-copy": "^3.4.0",
@@ -78,7 +80,8 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.0.2",
     "vite": "^4.3.9",
-    "vite-plugin-dts": "^2.3.0"
+    "vite-plugin-dts": "^2.3.0",
+    "vite-plugin-svgr": "^4.1.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",