@phillips/seldon 1.26.1 → 1.27.0

package/dist/components/UserManagement/UserManagement.js

@@ -0,0 +1,52 @@
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { getCommonProps as x, px as j, noOp as s } from "../../utils/index.js";
+import A from "../Input/Input.js";
+import E from "../../assets/account_circle.svg.js";
+import M from "../Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
+import P from "../Navigation/NavigationList/NavigationList.js";
+import S from "../Navigation/NavigationItem/NavigationItem.js";
+import { SupportedLanguages as o } from "../../types/commonTypes.js";
+import T from "../../node_modules/classnames/index.js";
+const H = ({
+  accountDetailsLink: m,
+  children: p,
+  className: v,
+  currentLanguage: n = o.en,
+  languageOptions: i = [
+    { label: "English", value: o.en },
+    { label: "中文", value: o.zh }
+  ],
+  onLanguageChange: d = s,
+  isLoggedIn: r = !1,
+  onLogin: f = s,
+  onLogout: h = s,
+  loginLabel: N = "Login",
+  logoutLabel: _ = "Logout",
+  ...t
+}) => {
+  var c, u;
+  const { className: l, ...b } = x(t, "UserManagement"), C = (u = (c = i.find((e) => e.value === n)) == null ? void 0 : c.label) != null ? u : "English", $ = m != null ? m : "a";
+  return /* @__PURE__ */ g("div", { ...b, className: T(l, v), ...t, children: [
+    /* @__PURE__ */ g("ul", { className: `${l}__account-wrapper`, children: [
+      r && /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(E, { className: `${l}__account-icon` }) }),
+      /* @__PURE__ */ a(S, { onClick: r ? h : f, label: r ? _ : N })
+    ] }),
+    /* @__PURE__ */ a(M, { className: `${l}__language`, label: C, children: /* @__PURE__ */ a(P, { id: `${j}-langauge-selection-list`, className: `${l}__language__selections`, children: i.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+      A,
+      {
+        type: "radio",
+        id: `radio-${e.value}`,
+        labelText: e.label,
+        value: e.value,
+        inline: !0,
+        name: "languages",
+        checked: e.value === n,
+        onChange: () => d(e.value)
+      }
+    ) }, e.value)) }) }),
+    p
+  ] });
+};
+export {
+  H as default
+};

package/dist/components/ViewingsList/ViewingsList.js

@@ -7,16 +7,16 @@ import P from "./ViewingsListCard.js";
 import R from "../Button/Button.js";
 const $ = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
   cardTitle: C = "Viewing Details",
-  className: N,
+  className: E,
   i18n: f = {},
   onAdd: r,
   onDelete: e,
-  onSave: O,
-  title: D,
+  onSave: N,
+  title: O,
   viewings: c,
   ...i
 }) => {
-  const [a, h] = d.useState(c), [m, n] = d.useState(""), [o, u] = d.useState(), { className: p, ...E } = M(i, "ViewingsList");
+  const [a, h] = d.useState(c), [m, n] = d.useState(""), [s, u] = d.useState(), { className: p, ...D } = M(i, "ViewingsList");
   d.useEffect(() => {
     h(c);
   }, [c]);
@@ -26,19 +26,19 @@ const $ = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
   }, V = (t) => {
     n(""), typeof e == "function" && e(t);
   }, k = (t) => {
-    n(t), u(a == null ? void 0 : a.find((s) => s.id === t));
+    n(t), u(a == null ? void 0 : a.find((o) => o.id === t));
   }, x = (t) => {
-    O(t) && n("");
+    N(t) && n("");
   }, B = () => {
-    typeof o == "string" ? typeof e == "function" && e(o) : m === (o == null ? void 0 : o.id) && h((t) => t == null ? void 0 : t.map((s) => s.id === o.id ? o : s)), n("");
+    typeof s == "string" ? typeof e == "function" && e(s) : m === (s == null ? void 0 : s.id) && h((t) => t == null ? void 0 : t.map((o) => o.id === s.id ? s : o)), n("");
   };
-  return /* @__PURE__ */ L("div", { ...E, className: S(p, N), key: m, ...i }, /* @__PURE__ */ l("h2", { className: S(`${p}__title`), children: D }), a == null ? void 0 : a.map((t, s) => /* @__PURE__ */ l(
+  return /* @__PURE__ */ L("div", { ...D, className: S(p, E), key: m, ...i }, /* @__PURE__ */ l("h2", { className: S(`${p}__title`), children: O }), a == null ? void 0 : a.map((t, o) => /* @__PURE__ */ l(
     P,
     {
       ...t,
       ...f,
-      cardTitle: t.location ? `${C} ${s + 1}` : void 0,
-      editState: m === t.id,
+      cardTitle: t.location ? `${C} ${o + 1}` : void 0,
+      isEditState: m === t.id,
       onCancel: B,
       onDelete: V,
       onEdit: () => k(t.id),

package/dist/components/ViewingsList/ViewingsListCard.d.ts

@@ -20,7 +20,7 @@ export interface ViewingsListCardProps extends ViewingsListCardFormProps, Record
     /**
      * Location of viewing
      */
-    editState?: boolean;
+    isEditState?: boolean;
     /**
      * Default boolean to determine whether viewing is enabled on site
      */
@@ -108,5 +108,5 @@ export interface ViewingsListCardProps extends ViewingsListCardFormProps, Record
      */
     saveBtnLabel?: string;
 }
-declare const ViewingsListCard: ({ address1, address1Label, addressUrl, addressUrlLabel, address2, address2Label, address3, address3Label, cancelBtnLabel, cardTitle, deleteBtnLabel, editBtnLabel, editState, enableOnSite, enableOnSiteToggleLabel, email, emailLabel, emailLink, emailLinkLabel, emailOn, emailToggleLabel, id, invalidFields, location, locationLabel, onCancel, onEdit, onDelete, onSave, previewDates, previewDatesLabel, previewHours1, previewHours1Label, previewHours2, previewHours2Label, previewLabel, previewLabelValue, previewOn, previewToggleLabel, saveBtnLabel, viewingLabel, viewingLabelValue, viewingDates, viewingDatesLabel, viewingHours1, viewingHours1Label, viewingHours2, viewingHours2Label, }: ViewingsListCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const ViewingsListCard: ({ address1, address1Label, addressUrl, addressUrlLabel, address2, address2Label, address3, address3Label, cancelBtnLabel, cardTitle, deleteBtnLabel, editBtnLabel, isEditState: editState, enableOnSite, enableOnSiteToggleLabel, email, emailLabel, emailLink, emailLinkLabel, emailOn, emailToggleLabel, id, invalidFields, location, locationLabel, onCancel, onEdit, onDelete, onSave, previewDates, previewDatesLabel, previewHours1, previewHours1Label, previewHours2, previewHours2Label, previewLabel, previewLabelValue, previewOn, previewToggleLabel, saveBtnLabel, viewingLabel, viewingLabelValue, viewingDates, viewingDatesLabel, viewingHours1, viewingHours1Label, viewingHours2, viewingHours2Label, }: ViewingsListCardProps) => import("react/jsx-runtime").JSX.Element;
 export default ViewingsListCard;

package/dist/components/ViewingsList/ViewingsListCard.js

@@ -1,13 +1,13 @@
-import { jsxs as a, jsx as e, Fragment as y } from "react/jsx-runtime";
+import { jsxs as a, jsx as t, Fragment as y } from "react/jsx-runtime";
 import * as r from "react";
-import ie from "../../node_modules/classnames/index.js";
+import it from "../../node_modules/classnames/index.js";
 import { px as E } from "../../utils/index.js";
 import g from "../Input/Input.js";
 import l from "../Button/Button.js";
-import pe from "./ViewingsListCardForm.js";
-const u = `${E}-viewings-list-card`, Ee = ({
-  address1: $,
-  address1Label: d,
+import pt from "./ViewingsListCardForm.js";
+const u = `${E}-viewings-list-card`, Et = ({
+  address1: d,
+  address1Label: $,
   addressUrl: C,
   addressUrlLabel: T,
   address2: O,
@@ -18,16 +18,16 @@ const u = `${E}-viewings-list-card`, Ee = ({
   cardTitle: L = "Add New Viewing",
   deleteBtnLabel: _ = "DELETE",
   editBtnLabel: k = "EDIT",
-  editState: o,
+  isEditState: o,
   enableOnSite: i = "false",
   enableOnSiteToggleLabel: I = "Enabled on website",
   email: N,
-  emailLabel: V = "Email",
-  emailLink: S,
+  emailLabel: S = "Email",
+  emailLink: V,
   emailLinkLabel: v = "Email Address",
   emailOn: j = "false",
   emailToggleLabel: D = "Include Email Address",
-  id: t,
+  id: e,
   invalidFields: n,
   location: R,
   locationLabel: q = "Location",
@@ -49,40 +49,40 @@ const u = `${E}-viewings-list-card`, Ee = ({
   viewingLabel: Y,
   viewingLabelValue: Z,
   viewingDates: F,
-  viewingDatesLabel: ee,
-  viewingHours1: te,
-  viewingHours1Label: ne,
-  viewingHours2: oe,
-  viewingHours2Label: se
+  viewingDatesLabel: tt,
+  viewingHours1: et,
+  viewingHours1Label: nt,
+  viewingHours2: ot,
+  viewingHours2Label: st
 }) => {
-  const [ce, re] = r.useState(i === "true"), c = r.useRef(null);
+  const [ct, rt] = r.useState(i === "true"), c = r.useRef(null);
   r.useEffect(() => {
     o && c.current && c.current.focus();
   }, [o]), r.useEffect(() => {
     var s, b;
     n && c.current && ((b = (s = c.current.closest(".phillips-viewings-list-card")) == null ? void 0 : s.querySelector(".phillips-input--invalid input")) == null || b.focus());
   }, [n]);
-  const le = () => {
+  const lt = () => {
     typeof p == "function" && p();
-  }, ue = () => {
+  }, ut = () => {
     typeof m == "function" && m();
-  }, ae = (s) => {
+  }, at = (s) => {
     typeof h == "function" && h(s);
   };
   return /* @__PURE__ */ a(
     "section",
     {
-      "data-testid": `viewings-list-card-${t}`,
-      id: t,
-      className: ie(`${u}`, { [`${u}--edit-state`]: o }),
+      "data-testid": `viewings-list-card-${e}`,
+      id: e,
+      className: it(`${u}`, { [`${u}--edit-state`]: o }),
       children: [
-        /* @__PURE__ */ e("h3", { className: `${u}__title`, children: L }),
-        /* @__PURE__ */ e("input", { type: "hidden", name: "id", value: t }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t("h3", { className: `${u}__title`, children: L }),
+        /* @__PURE__ */ t("input", { type: "hidden", name: "id", value: e }),
+        /* @__PURE__ */ t(
           g,
           {
             ref: c,
-            id: `location-${t}`,
+            id: `location-${e}`,
             defaultValue: R,
             labelText: q,
             size: "sm",
@@ -92,11 +92,11 @@ const u = `${E}-viewings-list-card`, Ee = ({
             readOnly: !o
           }
         ),
-        o ? /* @__PURE__ */ e(
-          pe,
+        o ? /* @__PURE__ */ t(
+          pt,
           {
-            address1: $,
-            address1Label: d,
+            address1: d,
+            address1Label: $,
             addressUrl: C,
             addressUrlLabel: T,
             address2: O,
@@ -104,12 +104,12 @@ const u = `${E}-viewings-list-card`, Ee = ({
             address3: x,
             address3Label: z,
             email: N,
-            emailLabel: V,
-            emailLink: S,
+            emailLabel: S,
+            emailLink: V,
             emailLinkLabel: v,
             emailOn: j,
             emailToggleLabel: D,
-            id: t,
+            id: e,
             invalidFields: n,
             previewDates: B,
             previewDatesLabel: G,
@@ -124,17 +124,17 @@ const u = `${E}-viewings-list-card`, Ee = ({
             viewingLabel: Y,
             viewingLabelValue: Z,
             viewingDates: F,
-            viewingDatesLabel: ee,
-            viewingHours1: te,
-            viewingHours1Label: ne,
-            viewingHours2: oe,
-            viewingHours2Label: se
+            viewingDatesLabel: tt,
+            viewingHours1: et,
+            viewingHours1Label: nt,
+            viewingHours2: ot,
+            viewingHours2Label: st
           }
         ) : null,
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           g,
           {
-            id: `enableOnSite-${t}`,
+            id: `enableOnSite-${e}`,
             type: "toggle",
             defaultChecked: i === "true",
             labelText: I,
@@ -142,25 +142,25 @@ const u = `${E}-viewings-list-card`, Ee = ({
             inline: !0,
             value: "true",
             name: "enableOnSite",
-            onChange: () => re((s) => !s),
+            onChange: () => rt((s) => !s),
             readOnly: !o
           }
         ),
-        ce ? null : /* @__PURE__ */ e("input", { type: "hidden", name: "enableOnSite", value: "false" }),
-        /* @__PURE__ */ e("hr", {}),
-        /* @__PURE__ */ e("div", { className: `${u}__btn-group ${E}-button__group`, children: o ? /* @__PURE__ */ a(y, { children: [
-          /* @__PURE__ */ e(l, { id: `vlc-save-btn-${t}`, buttonType: "ghost", type: "submit", size: "sm", onClick: ae, children: X }),
-          /* @__PURE__ */ e(l, { id: `vlc-cancel-btn-${t}`, buttonType: "ghost", type: "button", size: "sm", onClick: le, children: A })
+        ct ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
+        /* @__PURE__ */ t("hr", {}),
+        /* @__PURE__ */ t("div", { className: `${u}__btn-group ${E}-button__group`, children: o ? /* @__PURE__ */ a(y, { children: [
+          /* @__PURE__ */ t(l, { id: `vlc-save-btn-${e}`, buttonType: "ghost", type: "submit", size: "sm", onClick: at, children: X }),
+          /* @__PURE__ */ t(l, { id: `vlc-cancel-btn-${e}`, buttonType: "ghost", type: "button", size: "sm", onClick: lt, children: A })
         ] }) : /* @__PURE__ */ a(y, { children: [
-          /* @__PURE__ */ e(l, { id: `vlc-edit-btn-${t}`, buttonType: "ghost", type: "button", size: "sm", onClick: ue, children: k }),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(l, { id: `vlc-edit-btn-${e}`, buttonType: "ghost", type: "button", size: "sm", onClick: ut, children: k }),
+          /* @__PURE__ */ t(
             l,
             {
-              id: `vlc-delete-btn-${t}`,
+              id: `vlc-delete-btn-${e}`,
               buttonType: "ghost",
               type: "button",
               size: "sm",
-              onClick: () => typeof f == "function" && f(t),
+              onClick: () => typeof f == "function" && f(e),
               children: _
             }
           )
@@ -170,5 +170,5 @@ const u = `${E}-viewings-list-card`, Ee = ({
   );
 };
 export {
-  Ee as default
+  Et as default
 };

package/dist/index.d.ts

@@ -6,6 +6,10 @@ export { default as ErrorBoundary, type ErrorBoundaryProps } from './components/
 export { default as Footer, type FooterProps } from './components/Footer/Footer';
 export { default as Grid, type GridProps } from './components/Grid/Grid';
 export { default as Header, type HeaderProps } from './components/Header/Header';
+export { default as Navigation, type NavigationProps } from './components/Navigation/Navigation';
+export { default as NavigationItem, type NavigationItemProps, } from './components/Navigation/NavigationItem/NavigationItem';
+export { default as NavigationItemTrigger, type NavigationItemTriggerProps, } from './components/Navigation/NavigationItemTrigger/NavigationItemTrigger';
+export { default as NavigationList, type NavigationListProps, } from './components/Navigation/NavigationList/NavigationList';
 export { default as HeroBanner, type HeroBannerProps } from './components/HeroBanner/HeroBanner';
 export { default as Input, type InputProps } from './components/Input/Input';
 export { default as Link, type LinkProps } from './components/Link/Link';
@@ -15,6 +19,7 @@ export { default as LinkList, type LinkListProps } from './components/LinkList/L
 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 Search, type SearchProps } from './components/Search/Search';
 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';
@@ -24,3 +29,5 @@ export { default as ViewingsList, type ViewingsListProps } from './components/Vi
 export { default as Modal, type ModalProps } from './components/Modal/Modal';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './components/ViewingsList/StatefulViewingsList';
 export * from './components/Text';
+export { default as UserManagement, type UserManagementProps } from './components/UserManagement/UserManagement';
+export * from './types/commonTypes';

package/dist/index.js

@@ -1,63 +1,77 @@
-import { PaddingTokens as t, defaultYear as r, emailValidation as a, generatePaddingClassName as f, getCommonProps as s, noOp as p, px as d, useNormalizedInputProps as l } from "./utils/index.js";
+import { PaddingTokens as o, defaultYear as r, emailValidation as a, generatePaddingClassName as f, getCommonProps as s, noOp as m, px as p, useNormalizedInputProps as d } from "./utils/index.js";
 import { default as u } from "./pages/Page.js";
-import { default as i } from "./components/Button/Button.js";
+import { default as x } from "./components/Button/Button.js";
 import { default as g } from "./components/IconButton/IconButton.js";
 import { default as S } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as k } from "./components/Footer/Footer.js";
-import { Grid as B } from "./components/Grid/Grid.js";
-import { default as V } from "./components/Header/Header.js";
-import { default as w } from "./components/HeroBanner/HeroBanner.js";
-import { default as T } from "./components/Input/Input.js";
-import { default as H } from "./components/Link/Link.js";
-import { LinkVariants as y } from "./components/Link/utils.js";
-import { default as A } from "./components/LinkBlock/LinkBlock.js";
-import { default as F } from "./components/LinkList/LinkList.js";
-import { default as O } from "./components/Row/Row.js";
-import { default as Y } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as j } from "./components/GridItem/types.js";
-import { default as v } from "./components/Select/Select.js";
-import { default as J } from "./components/SplitPanel/SplitPanel.js";
-import { default as Q } from "./components/Subscribe/Subscribe.js";
-import { SubscriptionState as W } from "./components/Subscribe/types.js";
-import { default as Z } from "./components/Social/Social.js";
-import { default as $ } from "./components/ViewingsList/ViewingsList.js";
-import { default as oe } from "./components/Modal/Modal.js";
-import { default as re } from "./components/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as fe } from "./components/Text/types.js";
-import { default as pe } from "./components/Text/Text.js";
+import { default as I } from "./components/Footer/Footer.js";
+import { Grid as N } from "./components/Grid/Grid.js";
+import { default as B } from "./components/Header/Header.js";
+import { default as v } from "./components/Navigation/Navigation.js";
+import { default as b } from "./components/Navigation/NavigationItem/NavigationItem.js";
+import { default as G } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
+import { default as H } from "./components/Navigation/NavigationList/NavigationList.js";
+import { default as h } from "./components/HeroBanner/HeroBanner.js";
+import { default as z } from "./components/Input/Input.js";
+import { default as E } from "./components/Link/Link.js";
+import { LinkVariants as O } from "./components/Link/utils.js";
+import { default as U } from "./components/LinkBlock/LinkBlock.js";
+import { default as j } from "./components/LinkList/LinkList.js";
+import { default as D } from "./components/Row/Row.js";
+import { default as K } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as W } from "./components/GridItem/types.js";
+import { default as Z } from "./components/Search/Search.js";
+import { default as $ } from "./components/Select/Select.js";
+import { default as te } from "./components/SplitPanel/SplitPanel.js";
+import { default as re } from "./components/Subscribe/Subscribe.js";
+import { SubscriptionState as fe } from "./components/Subscribe/types.js";
+import { default as me } from "./components/Social/Social.js";
+import { default as de } from "./components/ViewingsList/ViewingsList.js";
+import { default as ue } from "./components/Modal/Modal.js";
+import { default as xe } from "./components/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as ge } from "./components/Text/types.js";
+import { default as Se } from "./components/Text/Text.js";
+import { default as Ie } from "./components/UserManagement/UserManagement.js";
+import { SupportedLanguages as Ne } from "./types/commonTypes.js";
 export {
-  i as Button,
+  x as Button,
   S as ErrorBoundary,
-  k as Footer,
-  B as Grid,
-  Y as GridItem,
-  j as GridItemAlign,
-  V as Header,
-  w as HeroBanner,
+  I as Footer,
+  N as Grid,
+  K as GridItem,
+  W as GridItemAlign,
+  B as Header,
+  h as HeroBanner,
   g as IconButton,
-  T as Input,
-  H as Link,
-  A as LinkBlock,
-  F as LinkList,
-  y as LinkVariants,
-  oe as Modal,
-  t as PaddingTokens,
+  z as Input,
+  E as Link,
+  U as LinkBlock,
+  j as LinkList,
+  O as LinkVariants,
+  ue as Modal,
+  v as Navigation,
+  b as NavigationItem,
+  G as NavigationItemTrigger,
+  H as NavigationList,
+  o as PaddingTokens,
   u as Page,
-  O as Row,
-  v as Select,
-  Z as Social,
-  J as SplitPanel,
-  re as StatefulViewingsList,
-  Q as Subscribe,
-  W as SubscriptionState,
-  pe as Text,
-  fe as TextVariants,
-  $ as ViewingsList,
+  D as Row,
+  Z as Search,
+  $ as Select,
+  me as Social,
+  te as SplitPanel,
+  xe as StatefulViewingsList,
+  re as Subscribe,
+  fe as SubscriptionState,
+  Ne as SupportedLanguages,
+  Se as Text,
+  ge as TextVariants,
+  Ie as UserManagement,
+  de as ViewingsList,
   r as defaultYear,
   a as emailValidation,
   f as generatePaddingClassName,
   s as getCommonProps,
-  p as noOp,
-  d as px,
-  l as useNormalizedInputProps
+  m as noOp,
+  p as px,
+  d as useNormalizedInputProps
 };

package/dist/pages/Page.js

@@ -1,58 +1,42 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import * as n from "react";
-import a from "../components/Header/Header.js";
-const h = () => {
-  const [r, t] = n.useState();
-  return /* @__PURE__ */ o("article", { children: [
-    /* @__PURE__ */ e(
-      a,
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+const r = () => /* @__PURE__ */ e("article", { children: /* @__PURE__ */ o("section", { className: "storybook-page", children: [
+  /* @__PURE__ */ e("h2", { children: "Pages in Storybook" }),
+  /* @__PURE__ */ o("p", { children: [
+    "We recommend building UIs with a",
+    " ",
+    /* @__PURE__ */ e("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e("strong", { children: "component-driven" }) }),
+    " ",
+    "process starting with atomic components and ending with pages."
+  ] }),
+  /* @__PURE__ */ e("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }),
+  /* @__PURE__ */ o("ul", { children: [
+    /* @__PURE__ */ e("li", { children: 'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories' }),
+    /* @__PURE__ */ e("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })
+  ] }),
+  /* @__PURE__ */ o("p", { children: [
+    "Get a guided tutorial on component-driven development at",
+    " ",
+    /* @__PURE__ */ e("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }),
+    ". Read more in the",
+    " ",
+    /* @__PURE__ */ e("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }),
+    "."
+  ] }),
+  /* @__PURE__ */ o("div", { className: "tip-wrapper", children: [
+    /* @__PURE__ */ e("span", { className: "tip", children: "Tip" }),
+    " Adjust the width of the canvas with the",
+    " ",
+    /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ e(
+      "path",
       {
-        user: r,
-        onLogin: () => t({ name: "Jane Doe" }),
-        onLogout: () => t(void 0),
-        onCreateAccount: () => t({ name: "Jane Doe" })
+        d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",
+        id: "a",
+        fill: "#999"
       }
-    ),
-    /* @__PURE__ */ o("section", { className: "storybook-page", children: [
-      /* @__PURE__ */ e("h2", { children: "Pages in Storybook" }),
-      /* @__PURE__ */ o("p", { children: [
-        "We recommend building UIs with a",
-        " ",
-        /* @__PURE__ */ e("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e("strong", { children: "component-driven" }) }),
-        " ",
-        "process starting with atomic components and ending with pages."
-      ] }),
-      /* @__PURE__ */ e("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }),
-      /* @__PURE__ */ o("ul", { children: [
-        /* @__PURE__ */ e("li", { children: 'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories' }),
-        /* @__PURE__ */ e("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })
-      ] }),
-      /* @__PURE__ */ o("p", { children: [
-        "Get a guided tutorial on component-driven development at",
-        " ",
-        /* @__PURE__ */ e("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }),
-        ". Read more in the",
-        " ",
-        /* @__PURE__ */ e("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }),
-        "."
-      ] }),
-      /* @__PURE__ */ o("div", { className: "tip-wrapper", children: [
-        /* @__PURE__ */ e("span", { className: "tip", children: "Tip" }),
-        " Adjust the width of the canvas with the",
-        " ",
-        /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ e(
-          "path",
-          {
-            d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",
-            id: "a",
-            fill: "#999"
-          }
-        ) }) }),
-        "Viewports addon in the toolbar"
-      ] })
-    ] })
-  ] });
-};
+    ) }) }),
+    "Viewports addon in the toolbar"
+  ] })
+] }) });
 export {
-  h as default
+  r as default
 };

package/dist/scss/_vars.scss

@@ -219,7 +219,7 @@ $margin-xl: var(--spacing-xl);
 /// Breakpoint TOKENS that map to minimum pixels
 ///////////////////////
 $breakpoint-sm: 461px;
-$breakpoint-md: 961px;
+$breakpoint-md: 1301px;
 $breakpoint-lg: 1401px;
 $breakpoint-xl: 1801px;
 

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

@@ -1,6 +1,6 @@
-@import '../../vars';
-@import '../../typography';
-@import '../../utils';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/typography';
+@import '@phillips/seldon/dist/scss/utils';
 
 .#{$px}-button {
   @include bodyText;

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

@@ -1,7 +1,7 @@
 /* stylelint-disable selector-class-pattern */
 @import 'flatpickr/dist/flatpickr.css';
-@import '../../vars';
-@import '../../typography';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/typography';
 
 .flatpickr-calendar {
   @include DistinctText;

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

@@ -1,7 +1,7 @@
-@import '../../vars';
-@import '../../utils';
-@import '../../type';
-@import '../../typography';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
+@import '@phillips/seldon/dist/scss/type';
+@import '@phillips/seldon/dist/scss/typography';
 
 .#{$px}-footer {
   background-color: $off-white;

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

@@ -1,5 +1,5 @@
-@import '../../vars';
-@import '../../utils';
+@import '@phillips/seldon/dist/scss/vars';
+@import '@phillips/seldon/dist/scss/utils';
 
 .#{$px}-grid {
   @include gridContainer(false);

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

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import '../../_utils';
+@import '@phillips/seldon/dist/scss/_utils';
 
 @mixin gridItemColumnSpan($span: 1, $total-cols: 12) {
   grid-column: span $span;