@phillips/seldon 1.7.0 → 1.7.2

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

@@ -1,13 +1,12 @@
 import { jsx as s } from "react/jsx-runtime";
-const a = "phillips", p = () => {
-};
-function u({
+const n = "phillips";
+function c({
   disabled: l = !1,
   id: r,
   invalid: d = !1,
   invalidText: t = "invalid",
   readOnly: o = !1,
-  type: n,
+  type: a,
   warn: v = !1,
   warnText: e
 }) {
@@ -15,29 +14,14 @@ function u({
     disabled: !o && l,
     invalid: !o && !l && d,
     invalidId: `${r}-error-msg`,
-    type: n === "toggle" ? "checkbox" : n,
+    type: a === "toggle" ? "checkbox" : a,
     warn: !o && !l && !d && v,
     warnId: `${r}-warn-msg`,
     validation: null
   };
-  return i.invalid && (i.validation = /* @__PURE__ */ s(
-    "div",
-    {
-      className: `${a}-input__validation ${a}-${n}-input--invalid`,
-      id: i.invalidId,
-      children: t
-    }
-  )), i.warn && (i.validation = /* @__PURE__ */ s(
-    "div",
-    {
-      className: `${a}-input__validation ${a}-${n}-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 {
-  p as noOP,
-  a as px,
-  u as useNormalizedInputProps
+  n as px,
+  c as useNormalizedInputProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.7.0",
+  "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",

package/dist/_virtual/index2.js

@@ -1,4 +0,0 @@
-var e = { exports: {} };
-export {
-  e as __module
-};

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,90 +0,0 @@
-import * as React from 'react';
-import flatpickr from 'flatpickr';
-import { InputProps } from '../Input/Input';
-export interface DatePickerProps extends Omit<InputProps, 'defaultValue'>, Record<string, unknown> {
-    /**
-     * Optionally allow manual entry to the date input
-     */
-    allowInput?: boolean;
-    /**
-     * Optionally provide the default value of the `<input>`. Should not be passed into controlled input!
-     */
-    defaultValue?: (Date | string)[];
-    /**
-     * Booolean to specify whether the `<input>` should be disabled
-     */
-    disabled?: boolean;
-    /**
-     * Render time picker on dropdown
-     */
-    enableTime?: boolean;
-    /**
-     * Boolean to specify whether you want the underlying label to be visually hidden
-     */
-    hideLabel?: boolean;
-    /**
-     * A custom `id` for the `<input>`
-     */
-    id: string;
-    /**
-     * Boolean to dictate whether input is inline with the label or not. `true` to use the inline version.
-     */
-    inline?: boolean;
-    /**
-     * Boolean to specify whether the control is currently invalid
-     */
-    invalid?: boolean;
-    /**
-     * Validation text that is displayed when the control is in an invalid state
-     */
-    invalidText?: React.ReactNode;
-    /**
-     * Text that will be read by a screen reader when visiting this control
-     */
-    labelText: string;
-    /**
-     * Locatiion you want the calendar to render for
-     */
-    locale: string;
-    /**
-     * Optional `onChange` handler that is called whenever flatpickr is updated
-     * @param {array} selectedDates
-     * @param {string} dateStr
-     * @param {object} instance
-     */
-    onChange?: flatpickr.Options.Hook;
-    /**
-     * Optional `onClick` handler that is called whenever the `<input>` is clicked
-     */
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    /**
-     * Optional text to be used for the placeholder attribute of the `<input>`
-     */
-    placeholder?: string;
-    /**
-     * Boolean to deterimine whether the input should be read-only
-     */
-    readOnly?: boolean;
-    /**
-     * Enum to determine the height of the Text Input. Currently supports the following:
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Enum to determine whether component is a range or range and time
-     */
-    type?: 'single' | 'range';
-    /**
-     * Specify the value of the `<input>` for controlled inputs
-     */
-    value?: string | number | undefined;
-    /**
-     * Boolean to specify whether the control is currently in warning state
-     */
-    warn?: boolean;
-    /**
-     * Text that is displayed when the control is in warning state
-     */
-    warnText?: React.ReactNode;
-}
-declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -1,92 +0,0 @@
-import { jsx as G } from "react/jsx-runtime";
-import * as d from "react";
-import O from "../../node_modules/flatpickr/dist/esm/index.js";
-import k from "../../node_modules/flatpickr/dist/l10n/index.js";
-import { noOP as R, useNormalizedInputProps as J } from "../../utils/index.js";
-import Q from "../Input/Input.js";
-k.en.weekdays.shorthand.forEach((u, o) => {
-  const c = k.en.weekdays.shorthand;
-  c[o] === "Thu" || c[o] === "Th" ? c[o] = "Th" : c[o] = c[o].charAt(0);
-});
-const W = d.forwardRef(({
-  allowInput: u = !1,
-  className: o,
-  defaultValue: c = [],
-  disabled: S,
-  enableTime: p = !1,
-  hideLabel: z,
-  id: a,
-  inline: A,
-  invalid: y,
-  invalidText: g,
-  labelText: H,
-  locale: D = "en",
-  onChange: f = R,
-  onClick: M = R,
-  placeholder: U,
-  readOnly: P,
-  size: _ = "md",
-  type: l = "range",
-  value: $,
-  warn: b,
-  warnText: j,
-  ...q
-}, e) => {
-  const m = J({ disabled: S, id: a, invalid: y, invalidText: g, readOnly: P, type: l, warn: b, warnText: j }), t = d.useRef(), s = d.useRef(), r = d.useRef();
-  d.useEffect(
-    () => {
-      const n = {
-        allowInput: u,
-        clickOpens: !m.disabled,
-        defaultDate: c,
-        enableTime: p,
-        locale: k[D],
-        mode: l,
-        onChange: f
-      };
-      return typeof e == "object" && (e != null && e.current) && (t.current = O(e.current, n)), e === null && typeof s == "object" && s != null && s.current && (t.current = O(s == null ? void 0 : s.current, n)), () => {
-        t.current && t.current.destroy && t.current.destroy();
-      };
-    },
-    [u, c, m.disabled, p, a, D, f, e, l]
-  );
-  const v = (n) => {
-    var i;
-    u && /[0-9-/:]+/g.test(n.key) && (r.current = (i = t == null ? void 0 : t.current) == null ? void 0 : i.selectedDates);
-  }, F = (n) => {
-    var i, E, N, T, B, K, L;
-    if (!(!u || n.relatedTarget instanceof HTMLElement && ((i = n.relatedTarget) != null && i.classList.value.includes("flatpickr"))) && "current" in r && (E = r == null ? void 0 : r.current) != null && E.length && ((N = r == null ? void 0 : r.current) == null ? void 0 : N.length) > 0 && ((T = r == null ? void 0 : r.current) == null ? void 0 : T.join().toString()) !== ((B = t == null ? void 0 : t.current) == null ? void 0 : B.selectedDates.join().toString())) {
-      const h = (K = t.current) == null ? void 0 : K.element;
-      r.current = [], f((L = t.current) == null ? void 0 : L.selectedDates, h == null ? void 0 : h.value, t.current);
-    }
-  };
-  return /* @__PURE__ */ G(
-    Q,
-    {
-      className: `${o} flatpickr`,
-      "data-testid": a,
-      disabled: m.disabled,
-      hideLabel: z,
-      id: a,
-      inline: A,
-      invalid: y,
-      invalidText: g,
-      labelText: H,
-      onClick: M,
-      placeholder: U,
-      readOnly: P,
-      ref: e || s,
-      size: _,
-      value: $,
-      warn: b,
-      warnText: j,
-      onKeyUp: v,
-      onBlur: F,
-      ...q
-    }
-  );
-});
-W.displayName = "DatePicker";
-export {
-  W as default
-};