@phillips/seldon 1.279.2 → 1.280.0

package/dist/patterns/Subscribe/Subscribe.js

@@ -1,3 +1,4 @@
+import './_subscribe.css';
 import { jsxs as L, jsx as o } from "react/jsx-runtime";
 import * as M from "react";
 import V from "../../_virtual/index2.js";
@@ -6,7 +7,8 @@ import D from "../../components/Input/Input.js";
 import R from "../../components/Button/Button.js";
 import { SubscriptionState as r } from "./types.js";
 import { ButtonVariants as U } from "../../components/Button/types.js";
-import i from "../../components/Text/Text.js";
+
+import n from "../../components/Text/Text.js";
 import { TextVariants as d } from "../../components/Text/types.js";
 const q = M.forwardRef(
   ({
@@ -26,10 +28,10 @@ const q = M.forwardRef(
     successText: S,
     privacyText: s = "By signing up, you agree to receive email communications from Phillips.",
     subscriptionState: e = r.Default,
-    id: n,
+    id: i,
     ...l
   }, T) => {
-    const { className: a, ...$ } = j({ id: n, ...l }, "Subscribe"), E = e === r.Invalid, P = e === r.Loading, w = e === r.Success, A = e === r.Error, B = {
+    const { className: a, ...$ } = j({ id: i, ...l }, "Subscribe"), E = e === r.Invalid, P = e === r.Loading, w = e === r.Success, A = e === r.Error, B = {
       invalid: _,
       success: S,
       loading: N,
@@ -38,15 +40,15 @@ const q = M.forwardRef(
     return /* @__PURE__ */ L(
       g,
       {
-        id: n,
+        id: i,
         ...$,
         className: V(a, m),
         noValidate: !0,
         ref: T,
         ...l,
         children: [
-          /* @__PURE__ */ o(i, { variant: d.headingSmall, className: `${a}__title`, children: y }),
-          t ? /* @__PURE__ */ o(i, { variant: d.bodyMedium, children: t }) : null,
+          /* @__PURE__ */ o(n, { variant: d.headingSmall, className: `${a}__title`, children: y }),
+          t ? /* @__PURE__ */ o(n, { variant: d.bodyMedium, children: t }) : null,
           /* @__PURE__ */ o(
             D,
             {
@@ -61,7 +63,7 @@ const q = M.forwardRef(
               warn: C,
               warnText: c,
               required: !0,
-              id: `${n}-input`,
+              id: `${i}-input`,
               ...h
             }
           ),
@@ -75,7 +77,7 @@ const q = M.forwardRef(
               children: p
             }
           ),
-          s ? /* @__PURE__ */ o(i, { element: "p", children: s }) : null
+          s ? /* @__PURE__ */ o(n, { element: "p", children: s }) : null
         ]
       }
     );

package/dist/patterns/Subscribe/_subscribe.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.patterns{.seldon-subscribe{max-width:600px;width:100%}.seldon-subscribe__title{margin-bottom:var(--spacing-xsm)}.seldon-subscribe__input__wrapper{margin-top:var(--spacing-md)}.seldon-subscribe__button{margin:.25rem 0 var(--spacing-sm);max-width:240px;width:100%}}

package/dist/patterns/TextBanner/TextBanner.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("react"),m=require("../../utils/index.cjs"),s=require("../../_virtual/index2.cjs"),n=require("../../components/Text/Text.cjs"),x=require("../../components/Text/types.cjs"),l=d.forwardRef(({headerText:c,className:u,description:a,...r},i)=>{const{className:t,...o}=m.getCommonProps(r,"TextBanner");return e.jsx("header",{...o,className:s.default(t,u),ref:i,...r,children:e.jsxs("span",{className:s.default(`${t}__content-wrapper`),children:[e.jsx(n.default,{className:`${t}__header-text`,variant:x.TextVariants.displaySmall,children:c}),a?e.jsx(n.default,{element:"p",children:a}):null]})})});l.displayName="TextBanner";exports.default=l;
+require('./_textBanner.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("react"),m=require("../../utils/index.cjs"),s=require("../../_virtual/index2.cjs");;const n=require("../../components/Text/Text.cjs"),x=require("../../components/Text/types.cjs"),l=d.forwardRef(({headerText:u,className:c,description:t,...a},i)=>{const{className:r,...o}=m.getCommonProps(a,"TextBanner");return e.jsx("header",{...o,className:s.default(r,c),ref:i,...a,children:e.jsxs("span",{className:s.default(`${r}__content-wrapper`),children:[e.jsx(n.default,{className:`${r}__header-text`,variant:x.TextVariants.displaySmall,children:u}),t?e.jsx(n.default,{element:"p",children:t}):null]})})});l.displayName="TextBanner";exports.default=l;

package/dist/patterns/TextBanner/TextBanner.js

@@ -1,15 +1,17 @@
-import { jsx as a, jsxs as i } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
+import './_textBanner.css';
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
 import { getCommonProps as d } from "../../utils/index.js";
 import s from "../../_virtual/index2.js";
+
 import t from "../../components/Text/Text.js";
 import { TextVariants as f } from "../../components/Text/types.js";
-const x = p(
-  ({ headerText: n, className: o, description: r, ...m }, l) => {
-    const { className: e, ...c } = d(m, "TextBanner");
-    return /* @__PURE__ */ a("header", { ...c, className: s(e, o), ref: l, ...m, children: /* @__PURE__ */ i("span", { className: s(`${e}__content-wrapper`), children: [
-      /* @__PURE__ */ a(t, { className: `${e}__header-text`, variant: f.displaySmall, children: n }),
-      r ? /* @__PURE__ */ a(t, { element: "p", children: r }) : null
+const x = c(
+  ({ headerText: n, className: o, description: a, ...m }, l) => {
+    const { className: e, ...i } = d(m, "TextBanner");
+    return /* @__PURE__ */ r("header", { ...i, className: s(e, o), ref: l, ...m, children: /* @__PURE__ */ p("span", { className: s(`${e}__content-wrapper`), children: [
+      /* @__PURE__ */ r(t, { className: `${e}__header-text`, variant: f.displaySmall, children: n }),
+      a ? /* @__PURE__ */ r(t, { element: "p", children: a }) : null
     ] }) });
   }
 );

package/dist/patterns/TextBanner/_textBanner.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.patterns{.seldon-text-banner__header-text{align-items:center;display:flex;text-transform:none}.seldon-text-banner__content-wrapper{align-items:flex-start;display:flex;flex-direction:column;justify-content:space-between;max-width:none;padding:var(--spacing-lg) 0}.seldon-text-banner__content-wrapper h1{white-space:nowrap}.seldon-text-banner__content-wrapper h1,.seldon-text-banner__content-wrapper p,.seldon-text-banner__content-wrapper span{color:#000;margin:0;max-width:100%;min-height:48px;text-align:left;text-transform:none}@media(min-width:961px){.seldon-text-banner__content-wrapper{flex-direction:row}.seldon-text-banner__content-wrapper h1,.seldon-text-banner__content-wrapper p,.seldon-text-banner__content-wrapper span{max-width:50%;width:50%}}}

package/dist/patterns/UserManagement/UserManagement.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),y=require("react"),r=require("../../utils/index.cjs"),A=require("../../_virtual/index2.cjs"),a=require("./types.cjs"),u=require("../../components/Icon/Icon.cjs"),l=require("../../components/Text/Text.cjs"),d=require("../../components/Text/types.cjs"),m=y.forwardRef(({accountDetailsLinkComponent:g="a",className:h,onLogin:x=r.noOp,authState:o=a.AuthState.LoggedOut,loginLabel:n="Login",accountLabel:s="Account",href:f="/account",disabled:c=!1,...i},j)=>{const{className:t,..._}=r.getCommonProps(i,"UserManagement"),p=o===a.AuthState.LoggedIn,q=o!==a.AuthState.Loading;return e.jsx("div",{..._,className:A.default(t,h),...i,ref:j,children:q&&e.jsx(e.Fragment,{children:p?e.jsxs(g,{"aria-label":typeof s=="string"?s:"Account",className:`${t}__login`,href:f,disabled:c,children:[e.jsx(u.default,{icon:"Account",className:`${t}__account-icon`,height:"100%",width:"100%"}),e.jsx(l.default,{variant:d.TextVariants.bodySmall,children:s})]}):e.jsxs("button",{"aria-label":typeof n=="string"?n:"Login",className:`${t}__login`,onClick:x,disabled:c,children:[e.jsx(u.default,{icon:"Account",className:`${t}__account-icon`,height:"100%",width:"100%"}),e.jsx(l.default,{variant:d.TextVariants.bodySmall,children:n})]})})})});m.displayName="UserManagement";exports.default=m;
+require('./_userManagement.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),y=require("react"),r=require("../../utils/index.cjs"),A=require("../../_virtual/index2.cjs"),a=require("./types.cjs");;const u=require("../../components/Icon/Icon.cjs"),l=require("../../components/Text/Text.cjs"),d=require("../../components/Text/types.cjs"),m=y.forwardRef(({accountDetailsLinkComponent:g="a",className:h,onLogin:x=r.noOp,authState:o=a.AuthState.LoggedOut,loginLabel:n="Login",accountLabel:s="Account",href:f="/account",disabled:c=!1,...i},j)=>{const{className:t,..._}=r.getCommonProps(i,"UserManagement"),q=o===a.AuthState.LoggedIn,p=o!==a.AuthState.Loading;return e.jsx("div",{..._,className:A.default(t,h),...i,ref:j,children:p&&e.jsx(e.Fragment,{children:q?e.jsxs(g,{"aria-label":typeof s=="string"?s:"Account",className:`${t}__login`,href:f,disabled:c,children:[e.jsx(u.default,{icon:"Account",className:`${t}__account-icon`,height:"100%",width:"100%"}),e.jsx(l.default,{variant:d.TextVariants.bodySmall,children:s})]}):e.jsxs("button",{"aria-label":typeof n=="string"?n:"Login",className:`${t}__login`,onClick:x,disabled:c,children:[e.jsx(u.default,{icon:"Account",className:`${t}__account-icon`,height:"100%",width:"100%"}),e.jsx(l.default,{variant:d.TextVariants.bodySmall,children:n})]})})})});m.displayName="UserManagement";exports.default=m;

package/dist/patterns/UserManagement/UserManagement.js

@@ -1,31 +1,33 @@
+import './_userManagement.css';
 import { jsx as o, Fragment as x, jsxs as s } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
 import { getCommonProps as w, noOp as C } from "../../utils/index.js";
 import $ from "../../_virtual/index2.js";
 import { AuthState as e } from "./types.js";
+
 import m from "../../components/Icon/Icon.js";
 import l from "../../components/Text/Text.js";
 import { TextVariants as g } from "../../components/Text/types.js";
 const v = y(
   ({
     accountDetailsLinkComponent: d = "a",
-    className: f,
-    onLogin: h = C,
+    className: p,
+    onLogin: f = C,
     authState: r = e.LoggedOut,
     loginLabel: t = "Login",
     accountLabel: a = "Account",
-    href: p = "/account",
-    disabled: c = !1,
-    ...i
+    href: h = "/account",
+    disabled: i = !1,
+    ...c
   }, u) => {
-    const { className: n, ...N } = w(i, "UserManagement"), _ = r === e.LoggedIn, A = r !== e.Loading;
-    return /* @__PURE__ */ o("div", { ...N, className: $(n, f), ...i, ref: u, children: A && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ s(
+    const { className: n, ...N } = w(c, "UserManagement"), _ = r === e.LoggedIn, A = r !== e.Loading;
+    return /* @__PURE__ */ o("div", { ...N, className: $(n, p), ...c, ref: u, children: A && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ s(
       d,
       {
         "aria-label": typeof a == "string" ? a : "Account",
         className: `${n}__login`,
-        href: p,
-        disabled: c,
+        href: h,
+        disabled: i,
         children: [
           /* @__PURE__ */ o(m, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
           /* @__PURE__ */ o(l, { variant: g.bodySmall, children: a })
@@ -36,8 +38,8 @@ const v = y(
       {
         "aria-label": typeof t == "string" ? t : "Login",
         className: `${n}__login`,
-        onClick: h,
-        disabled: c,
+        onClick: f,
+        disabled: i,
         children: [
           /* @__PURE__ */ o(m, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
           /* @__PURE__ */ o(l, { variant: g.bodySmall, children: t })

package/dist/patterns/UserManagement/_userManagement.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.patterns{.seldon-user-management{align-items:center;display:flex;gap:0 var(--spacing-xsm);justify-content:flex-end;min-height:49px;min-width:92px;padding-top:var(--spacing-xsm)}@media(max-width:960px){.seldon-user-management{min-width:44px}}.seldon-user-management__login{align-items:center;background-color:unset;border:unset;border-bottom:1px solid transparent;cursor:pointer;display:flex;gap:0 var(--spacing-xsm);justify-content:center;margin-bottom:var(--spacing-xsm);padding:0}.seldon-user-management__login:disabled{cursor:default;opacity:.5;pointer-events:none}.seldon-user-management__login:focus-visible{border-radius:4px;outline:2px solid #07c;outline-offset:4px}.seldon-user-management__login:hover:not(:disabled){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--spacing-micro)}@media(max-width:960px){.seldon-user-management__login{justify-content:flex-end;padding-right:0}}.seldon-user-management__login>.seldon-text{margin:0}@media(max-width:960px){.seldon-user-management__login>.seldon-text{display:none;min-height:2rem}}.seldon-user-management__account-icon{height:1.5rem;width:1.5rem}}

package/dist/patterns/ViewingDetails/ViewingDetails.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),$=require("../../_virtual/index2.cjs"),g=require("react"),v=require("../../utils/index.cjs"),s=require("../../components/Text/Text.cjs"),t=require("../../components/Text/types.cjs"),q=require("../../components/Link/Link.cjs"),V=require("../../components/Link/types.cjs"),o=g.forwardRef(({className:x,children:r,label:h,sessionTimesLabel:d,sessionTimes:i,viewingTimes:n,viewingTimesLabel:c,location:u,mapLink:m,onClose:p,linkElement:f=q.default,..._},j)=>{const{className:a,...N}=v.getCommonProps(_,"ViewingDetails");return e.jsx("div",{...N,..._,className:$.default(a,x),ref:j,children:e.jsxs("div",{className:`${a}__content`,children:[e.jsx(s.default,{variant:t.TextVariants.headingMedium,className:`${a}__title`,children:h}),r&&e.jsx("div",{className:`${a}__children`,children:r}),d&&e.jsx(s.default,{variant:t.TextVariants.headingSmall,className:`${a}__heading`,children:d}),i&&i.length>0&&i.map(l=>e.jsxs("div",{className:`${a}__session`,children:[l.sessionLabel&&e.jsx(s.default,{variant:t.TextVariants.labelMedium,className:`${a}__label`,children:l.sessionLabel}),l.sessionTime&&e.jsx(s.default,{className:`${a}__text`,children:l.sessionTime})]},`${l.sessionLabel??""}-${l.sessionTime??""}`)),c&&e.jsx(s.default,{variant:t.TextVariants.headingSmall,className:`${a}__heading`,children:c}),n&&n.length>0&&n.map(l=>e.jsx(s.default,{className:`${a}__viewing-time`,children:l},l)),u&&e.jsx(s.default,{className:`${a}__location`,children:u}),m&&e.jsx(s.default,{className:`${a}__map-link`,children:e.jsx(f,{href:m,variant:V.LinkVariants.linkMedium,children:"(Map)"})})]})})});o.displayName="ViewingDetails";exports.default=o;
+require('./_viewingDetails.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),$=require("../../_virtual/index2.cjs"),g=require("react"),q=require("../../utils/index.cjs");;const s=require("../../components/Text/Text.cjs"),t=require("../../components/Text/types.cjs"),v=require("../../components/Link/Link.cjs"),V=require("../../components/Link/types.cjs"),o=g.forwardRef(({className:x,children:r,label:h,sessionTimesLabel:d,sessionTimes:i,viewingTimes:n,viewingTimesLabel:c,location:u,mapLink:m,onClose:p,linkElement:f=v.default,..._},j)=>{const{className:a,...N}=q.getCommonProps(_,"ViewingDetails");return e.jsx("div",{...N,..._,className:$.default(a,x),ref:j,children:e.jsxs("div",{className:`${a}__content`,children:[e.jsx(s.default,{variant:t.TextVariants.headingMedium,className:`${a}__title`,children:h}),r&&e.jsx("div",{className:`${a}__children`,children:r}),d&&e.jsx(s.default,{variant:t.TextVariants.headingSmall,className:`${a}__heading`,children:d}),i&&i.length>0&&i.map(l=>e.jsxs("div",{className:`${a}__session`,children:[l.sessionLabel&&e.jsx(s.default,{variant:t.TextVariants.labelMedium,className:`${a}__label`,children:l.sessionLabel}),l.sessionTime&&e.jsx(s.default,{className:`${a}__text`,children:l.sessionTime})]},`${l.sessionLabel??""}-${l.sessionTime??""}`)),c&&e.jsx(s.default,{variant:t.TextVariants.headingSmall,className:`${a}__heading`,children:c}),n&&n.length>0&&n.map(l=>e.jsx(s.default,{className:`${a}__viewing-time`,children:l},l)),u&&e.jsx(s.default,{className:`${a}__location`,children:u}),m&&e.jsx(s.default,{className:`${a}__map-link`,children:e.jsx(f,{href:m,variant:V.LinkVariants.linkMedium,children:"(Map)"})})]})})});o.displayName="ViewingDetails";exports.default=o;

package/dist/patterns/ViewingDetails/ViewingDetails.js

@@ -1,7 +1,9 @@
+import './_viewingDetails.css';
 import { jsx as e, jsxs as h } from "react/jsx-runtime";
 import v from "../../_virtual/index2.js";
 import { forwardRef as x } from "react";
 import { getCommonProps as u } from "../../utils/index.js";
+
 import i from "../../components/Text/Text.js";
 import { TextVariants as r } from "../../components/Text/types.js";
 import V from "../../components/Link/Link.js";
@@ -15,8 +17,8 @@ const k = x(
     sessionTimes: m,
     viewingTimes: n,
     viewingTimesLabel: c,
-    location: d,
-    mapLink: o,
+    location: o,
+    mapLink: d,
     onClose: M,
     linkElement: $ = V,
     ..._
@@ -39,8 +41,8 @@ const k = x(
       )),
       c && /* @__PURE__ */ e(i, { variant: r.headingSmall, className: `${a}__heading`, children: c }),
       n && n.length > 0 && n.map((l) => /* @__PURE__ */ e(i, { className: `${a}__viewing-time`, children: l }, l)),
-      d && /* @__PURE__ */ e(i, { className: `${a}__location`, children: d }),
-      o && /* @__PURE__ */ e(i, { className: `${a}__map-link`, children: /* @__PURE__ */ e($, { href: o, variant: b.linkMedium, children: "(Map)" }) })
+      o && /* @__PURE__ */ e(i, { className: `${a}__location`, children: o }),
+      d && /* @__PURE__ */ e(i, { className: `${a}__map-link`, children: /* @__PURE__ */ e($, { href: d, variant: b.linkMedium, children: "(Map)" }) })
     ] }) });
   }
 );

package/dist/patterns/ViewingDetails/_viewingDetails.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.patterns{.seldon-viewing-details__content{position:relative}.seldon-viewing-details__title{padding-bottom:var(--spacing-sm)}.seldon-viewing-details__children{margin-bottom:var(--spacing-md)}.seldon-viewing-details__center-align{text-align:center}.seldon-viewing-details__label{display:block;font-variation-settings:"wght" 600;margin-bottom:0}.seldon-viewing-details__heading{padding-bottom:var(--spacing-xsm)}.seldon-viewing-details__session{margin-bottom:var(--spacing-sm)}.seldon-viewing-details__viewing-time{display:block}.seldon-viewing-details__close-icon{cursor:pointer;position:absolute;right:var(--spacing-sm);top:var(--spacing-sm)}.seldon-viewing-details__text{margin-bottom:var(--spacing-sm)}.seldon-viewing-details__location{display:block;margin-top:var(--spacing-sm)}.seldon-viewing-details__map-link{margin-bottom:var(--spacing-md)}.seldon-viewing-details__content .seldon-viewing-details__label{margin-bottom:0}.seldon-viewing-details__content .seldon-viewing-details__text{margin-bottom:var(--spacing-sm)}.seldon-viewing-details__content{margin-bottom:var(--spacing-xsm);margin-top:var(--spacing-md)}}

package/dist/patterns/ViewingsList/ViewingsList.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),m=require("react"),b=require("../../_virtual/index2.cjs"),E=require("../../utils/index.cjs"),M=require("./ViewingsListCard.cjs"),P=require("../../components/Button/Button.cjs");function R(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const d=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(s,n,d.get?d:{enumerable:!0,get:()=>t[n]})}}return s.default=t,Object.freeze(s)}const r=R(m),D=()=>Math.floor(Math.random()*100)+Date.now(),j=m.forwardRef((t,s)=>{const{cardTitle:n="Viewing Details",className:d,i18n:S={},onAdd:p,onDelete:c,onSave:y,title:N,viewings:u,...h}=t,[l,v]=r.useState(u),[f,a]=r.useState(""),[o,w]=r.useState(),{className:O,...V}=E.getCommonProps(h,"ViewingsList");r.useEffect(()=>{v(u)},[u]);const{addViewingsBtnLabel:$="ADD VIEWINGS"}=S,L=()=>{const e=`${D()}${l?"-"+l.length:""}`;a(e),w(e),p&&p(e)},_=e=>{a(""),typeof c=="function"&&c(e)},q=e=>{a(e),w(l?.find(i=>i.id===e))},x=e=>{y(e)&&a("")},C=()=>{typeof o=="string"?typeof c=="function"&&c(o):f===o?.id&&v(e=>e?.map(i=>i.id===o.id?o:i)),a("")};return m.createElement("div",{ref:s,...V,className:b.default(O,d),key:f,...h},g.jsx("h2",{className:b.default(`${O}__title`),children:N}),l?.map((e,i)=>g.jsx(M.default,{...e,...S,cardTitle:e.location?`${n} ${i+1}`:void 0,isEditState:f===e.id,onCancel:C,onDelete:_,onEdit:()=>q(e.id),onSave:x},`${e.id}`)),g.jsx(P.default,{id:`viewings-list-add-btn-${t.id||D()}`,onClick:L,children:$}))});j.displayName="ViewingsList";exports.default=j;
+require('./_viewingsList.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),m=require("react");;const b=require("../../_virtual/index2.cjs"),E=require("../../utils/index.cjs"),M=require("./ViewingsListCard.cjs"),P=require("../../components/Button/Button.cjs");function R(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const d=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(s,n,d.get?d:{enumerable:!0,get:()=>t[n]})}}return s.default=t,Object.freeze(s)}const r=R(m),D=()=>Math.floor(Math.random()*100)+Date.now(),j=m.forwardRef((t,s)=>{const{cardTitle:n="Viewing Details",className:d,i18n:S={},onAdd:p,onDelete:c,onSave:y,title:N,viewings:u,...h}=t,[l,v]=r.useState(u),[f,a]=r.useState(""),[o,w]=r.useState(),{className:O,...V}=E.getCommonProps(h,"ViewingsList");r.useEffect(()=>{v(u)},[u]);const{addViewingsBtnLabel:$="ADD VIEWINGS"}=S,q=()=>{const e=`${D()}${l?"-"+l.length:""}`;a(e),w(e),p&&p(e)},L=e=>{a(""),typeof c=="function"&&c(e)},_=e=>{a(e),w(l?.find(i=>i.id===e))},x=e=>{y(e)&&a("")},C=()=>{typeof o=="string"?typeof c=="function"&&c(o):f===o?.id&&v(e=>e?.map(i=>i.id===o.id?o:i)),a("")};return m.createElement("div",{ref:s,...V,className:b.default(O,d),key:f,...h},g.jsx("h2",{className:b.default(`${O}__title`),children:N}),l?.map((e,i)=>g.jsx(M.default,{...e,...S,cardTitle:e.location?`${n} ${i+1}`:void 0,isEditState:f===e.id,onCancel:C,onDelete:L,onEdit:()=>_(e.id),onSave:x},`${e.id}`)),g.jsx(P.default,{id:`viewings-list-add-btn-${t.id||D()}`,onClick:q,children:$}))});j.displayName="ViewingsList";exports.default=j;

package/dist/patterns/ViewingsList/ViewingsList.js

@@ -1,6 +1,8 @@
+import './_viewingsList.css';
 import { jsx as c } from "react/jsx-runtime";
 import * as o from "react";
 import { forwardRef as R, createElement as k } from "react";
+
 import w from "../../_virtual/index2.js";
 import { getCommonProps as x } from "../../utils/index.js";
 import B from "./ViewingsListCard.js";

package/dist/patterns/ViewingsList/ViewingsListCard.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),ue=require("react"),ce=require("../../_virtual/index2.cjs"),p=require("../../utils/index.cjs"),h=require("../../components/Input/Input.cjs"),c=require("../../components/Button/Button.cjs"),o=require("../../components/Button/types.cjs"),oe=require("./ViewingsListCardForm.cjs");function de(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,u.get?u:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const d=de(ue),f=`${p.px}-viewings-list-card`,fe=({address1:n,address1Label:i,addressUrl:r,addressUrlLabel:u,address2:v,address2Label:$,address3:E,address3Label:O,cancelBtnLabel:C="CANCEL",cardTitle:_="Add New Viewing",deleteBtnLabel:q="DELETE",editBtnLabel:w="EDIT",isEditState:a,enableOnSite:x="false",enableOnSiteToggleLabel:S="Enabled on website",email:V,emailLabel:T="Email",emailLink:k,emailLinkLabel:A="Email Address",emailOn:L="false",emailToggleLabel:N="Include Email Address",id:t,invalidFields:s,location:B,locationLabel:I="Location",onCancel:y,onEdit:m,onDelete:j,onSave:g,previewDates:D,previewDatesLabel:R,previewHours1:z,previewHours1Label:M,previewHours2:P,previewHours2Label:G,previewLabel:H,previewLabelValue:J,previewOn:K,previewToggleLabel:Q,saveBtnLabel:U="SAVE DETAILS",viewingLabel:W,viewingLabelValue:X,viewingDates:Y,viewingDatesLabel:Z,viewingHours1:F,viewingHours1Label:ee,viewingHours2:te,viewingHours2Label:ne})=>{const[ae,re]=d.useState(x==="true"),l=d.useRef(null);d.useEffect(()=>{a&&l.current&&l.current.focus()},[a]),d.useEffect(()=>{s&&l.current&&l.current.closest(`.${p.px}-viewings-list-card`)?.querySelector(`.${p.px}-input--invalid input`)?.focus()},[s]);const ie=()=>{typeof y=="function"&&y()},se=()=>{typeof m=="function"&&m()},le=b=>{typeof g=="function"&&g(b)};return e.jsxs("section",{"data-testid":`viewings-list-card-${t}`,id:t,className:ce.default(`${f}`,{[`${f}--edit-state`]:a}),children:[e.jsx("h3",{className:`${f}__title`,children:_}),e.jsx("input",{type:"hidden",name:"id",value:t}),e.jsx(h.default,{ref:l,id:`location-${t}`,defaultValue:B,labelText:I,size:"sm",name:"location",invalid:!!s?.location,invalidText:s?.location,readOnly:!a}),a?e.jsx(oe.default,{address1:n,address1Label:i,addressUrl:r,addressUrlLabel:u,address2:v,address2Label:$,address3:E,address3Label:O,email:V,emailLabel:T,emailLink:k,emailLinkLabel:A,emailOn:L,emailToggleLabel:N,id:t,invalidFields:s,previewDates:D,previewDatesLabel:R,previewHours1:z,previewHours1Label:M,previewHours2:P,previewHours2Label:G,previewLabel:H,previewLabelValue:J,previewOn:K,previewToggleLabel:Q,viewingLabel:W,viewingLabelValue:X,viewingDates:Y,viewingDatesLabel:Z,viewingHours1:F,viewingHours1Label:ee,viewingHours2:te,viewingHours2Label:ne}):null,e.jsx(h.default,{id:`enableOnSite-${t}`,type:"toggle",defaultChecked:x==="true",labelText:S,size:"md",inline:!0,value:"true",name:"enableOnSite",onChange:()=>re(b=>!b),readOnly:!a}),ae?null:e.jsx("input",{type:"hidden",name:"enableOnSite",value:"false"}),e.jsx("hr",{}),e.jsx("div",{className:`${f}__btn-group ${p.px}-button__group`,children:a?e.jsxs(e.Fragment,{children:[e.jsx(c.default,{id:`vlc-save-btn-${t}`,variant:o.ButtonVariants.tertiary,type:"submit",onClick:le,children:U}),e.jsx(c.default,{id:`vlc-cancel-btn-${t}`,variant:o.ButtonVariants.tertiary,type:"button",onClick:ie,children:C})]}):e.jsxs(e.Fragment,{children:[e.jsx(c.default,{id:`vlc-edit-btn-${t}`,variant:o.ButtonVariants.tertiary,type:"button",onClick:se,children:w}),e.jsx(c.default,{id:`vlc-delete-btn-${t}`,variant:o.ButtonVariants.tertiary,type:"button",onClick:()=>typeof j=="function"&&j(t),children:q})]})})]})};exports.default=fe;
+require('./_viewingsList.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");;const ue=require("react"),ce=require("../../_virtual/index2.cjs"),p=require("../../utils/index.cjs"),h=require("../../components/Input/Input.cjs"),c=require("../../components/Button/Button.cjs"),o=require("../../components/Button/types.cjs"),oe=require("./ViewingsListCardForm.cjs");function de(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,u.get?u:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const d=de(ue),f=`${p.px}-viewings-list-card`,fe=({address1:n,address1Label:i,addressUrl:r,addressUrlLabel:u,address2:v,address2Label:$,address3:E,address3Label:O,cancelBtnLabel:C="CANCEL",cardTitle:_="Add New Viewing",deleteBtnLabel:q="DELETE",editBtnLabel:w="EDIT",isEditState:a,enableOnSite:x="false",enableOnSiteToggleLabel:S="Enabled on website",email:V,emailLabel:T="Email",emailLink:k,emailLinkLabel:A="Email Address",emailOn:L="false",emailToggleLabel:N="Include Email Address",id:t,invalidFields:s,location:B,locationLabel:I="Location",onCancel:y,onEdit:m,onDelete:j,onSave:g,previewDates:D,previewDatesLabel:R,previewHours1:z,previewHours1Label:M,previewHours2:P,previewHours2Label:G,previewLabel:H,previewLabelValue:J,previewOn:K,previewToggleLabel:Q,saveBtnLabel:U="SAVE DETAILS",viewingLabel:W,viewingLabelValue:X,viewingDates:Y,viewingDatesLabel:Z,viewingHours1:F,viewingHours1Label:ee,viewingHours2:te,viewingHours2Label:ne})=>{const[ae,re]=d.useState(x==="true"),l=d.useRef(null);d.useEffect(()=>{a&&l.current&&l.current.focus()},[a]),d.useEffect(()=>{s&&l.current&&l.current.closest(`.${p.px}-viewings-list-card`)?.querySelector(`.${p.px}-input--invalid input`)?.focus()},[s]);const ie=()=>{typeof y=="function"&&y()},se=()=>{typeof m=="function"&&m()},le=b=>{typeof g=="function"&&g(b)};return e.jsxs("section",{"data-testid":`viewings-list-card-${t}`,id:t,className:ce.default(`${f}`,{[`${f}--edit-state`]:a}),children:[e.jsx("h3",{className:`${f}__title`,children:_}),e.jsx("input",{type:"hidden",name:"id",value:t}),e.jsx(h.default,{ref:l,id:`location-${t}`,defaultValue:B,labelText:I,size:"sm",name:"location",invalid:!!s?.location,invalidText:s?.location,readOnly:!a}),a?e.jsx(oe.default,{address1:n,address1Label:i,addressUrl:r,addressUrlLabel:u,address2:v,address2Label:$,address3:E,address3Label:O,email:V,emailLabel:T,emailLink:k,emailLinkLabel:A,emailOn:L,emailToggleLabel:N,id:t,invalidFields:s,previewDates:D,previewDatesLabel:R,previewHours1:z,previewHours1Label:M,previewHours2:P,previewHours2Label:G,previewLabel:H,previewLabelValue:J,previewOn:K,previewToggleLabel:Q,viewingLabel:W,viewingLabelValue:X,viewingDates:Y,viewingDatesLabel:Z,viewingHours1:F,viewingHours1Label:ee,viewingHours2:te,viewingHours2Label:ne}):null,e.jsx(h.default,{id:`enableOnSite-${t}`,type:"toggle",defaultChecked:x==="true",labelText:S,size:"md",inline:!0,value:"true",name:"enableOnSite",onChange:()=>re(b=>!b),readOnly:!a}),ae?null:e.jsx("input",{type:"hidden",name:"enableOnSite",value:"false"}),e.jsx("hr",{}),e.jsx("div",{className:`${f}__btn-group ${p.px}-button__group`,children:a?e.jsxs(e.Fragment,{children:[e.jsx(c.default,{id:`vlc-save-btn-${t}`,variant:o.ButtonVariants.tertiary,type:"submit",onClick:le,children:U}),e.jsx(c.default,{id:`vlc-cancel-btn-${t}`,variant:o.ButtonVariants.tertiary,type:"button",onClick:ie,children:C})]}):e.jsxs(e.Fragment,{children:[e.jsx(c.default,{id:`vlc-edit-btn-${t}`,variant:o.ButtonVariants.tertiary,type:"button",onClick:se,children:w}),e.jsx(c.default,{id:`vlc-delete-btn-${t}`,variant:o.ButtonVariants.tertiary,type:"button",onClick:()=>typeof j=="function"&&j(t),children:q})]})})]})};exports.default=fe;

package/dist/patterns/ViewingsList/ViewingsListCard.js

@@ -1,4 +1,6 @@
+import './_viewingsList.css';
 import { jsxs as f, jsx as t, Fragment as y } from "react/jsx-runtime";
+
 import * as a from "react";
 import ut from "../../_virtual/index2.js";
 import { px as c } from "../../utils/index.js";
@@ -6,7 +8,7 @@ import v from "../../components/Input/Input.js";
 import l from "../../components/Button/Button.js";
 import { ButtonVariants as o } from "../../components/Button/types.js";
 import ft from "./ViewingsListCardForm.js";
-const s = `${c}-viewings-list-card`, Et = ({
+const s = `${c}-viewings-list-card`, $t = ({
   address1: E,
   address1Label: $,
   addressUrl: g,
@@ -32,8 +34,8 @@ const s = `${c}-viewings-list-card`, Et = ({
   invalidFields: i,
   location: D,
   locationLabel: R = "Location",
-  onCancel: d,
-  onEdit: p,
+  onCancel: p,
+  onEdit: d,
   onDelete: b,
   onSave: h,
   previewDates: q,
@@ -63,9 +65,9 @@ const s = `${c}-viewings-list-card`, Et = ({
     i && r.current && r.current.closest(`.${c}-viewings-list-card`)?.querySelector(`.${c}-input--invalid input`)?.focus();
   }, [i]);
   const ot = () => {
-    typeof d == "function" && d();
-  }, st = () => {
     typeof p == "function" && p();
+  }, st = () => {
+    typeof d == "function" && d();
   }, ct = (u) => {
     typeof h == "function" && h(u);
   };
@@ -178,5 +180,5 @@ const s = `${c}-viewings-list-card`, Et = ({
   );
 };
 export {
-  Et as default
+  $t as default
 };

package/dist/patterns/ViewingsList/_viewingsList.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.patterns{.seldon-viewings-list{align-items:center;background-color:#fff;display:flex;flex-direction:column;gap:2.5rem;max-width:38rem;padding:1rem}.seldon-viewings-list__title{font-family:DistinctDisplay,sans-serif;color:#000000bf;font-variation-settings:"wght" 400}.seldon-viewings-list-card{align-items:flex-start;background-color:#fff;border:1px solid;display:flex;flex-direction:column;gap:1.5rem;max-width:34rem;padding:2rem;width:100%}.seldon-viewings-list-card__title{font-family:DistinctDisplay,sans-serif;color:#000000bf;font-variation-settings:"wght" 400;color:#545454}.seldon-viewings-list-card__location{font-size:1.25rem}.seldon-viewings-list-card-form__preview-set{display:flex;flex-direction:column;gap:2rem;padding-inline-start:1rem;width:100%}.seldon-viewings-list-card-form__preview-set--hidden{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}.seldon-viewings-list-card hr{width:100%}}

package/dist/providers/SeldonProvider/SeldonProvider.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./utils.cjs"),t=({children:i})=>e.jsxs(r.SSRMediaQuery.MediaContextProvider,{children:[e.jsx("style",{children:r.ssrMediaQueryStyle}),i]});exports.SeldonProvider=t;
+require('../../scss/_foundation.css');
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;const r=require("./utils.cjs"),o=({children:i})=>e.jsxs(r.SSRMediaQuery.MediaContextProvider,{children:[e.jsx("style",{children:`@layer seldon.foundation {${r.ssrMediaQueryStyle}}`}),i]});exports.SeldonProvider=o;

package/dist/providers/SeldonProvider/SeldonProvider.js

@@ -1,7 +1,9 @@
+import '../../scss/_foundation.css';
 import { jsxs as r, jsx as o } from "react/jsx-runtime";
+
 import { SSRMediaQuery as i, ssrMediaQueryStyle as d } from "./utils.js";
 const l = ({ children: e }) => /* @__PURE__ */ r(i.MediaContextProvider, { children: [
-  /* @__PURE__ */ o("style", { children: d }),
+  /* @__PURE__ */ o("style", { children: `@layer seldon.foundation {${d}}` }),
   e
 ] });
 export {

package/dist/scss/_allPartials.scss

@@ -1,4 +1,5 @@
-@forward './sharedClasses';
+// Mixins and variables only. CSS-emitting sheets (sharedClasses, typography,
+// :root tokens) live in foundation.scss so consumers can load them once.
 @forward './type';
 @forward './utils';
 @forward './vars';

package/dist/scss/_foundation.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.foundation{html,body{font-family:Montserrat,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(0,0,0,0)}@font-face{font-display:swap;font-family:DistinctDisplay;src:url(../fonts/Distinct-Display.woff2) format("woff2"),url(../fonts/Distinct-Display.woff) format("woff")}@font-face{font-display:swap;font-family:DistinctDisplay;font-style:italic;src:url(../fonts/Distinct-DisplayItalic.woff2) format("woff2"),url(../fonts/Distinct-DisplayItalic.woff) format("woff")}@font-face{font-display:swap;font-family:Montserrat;src:url(../fonts/Montserrat.woff2) format("woff2"),url(../fonts/Montserrat.woff) format("woff")}@font-face{font-display:swap;font-family:Distinct;src:url(../fonts/Distinct-Text.woff2) format("woff2"),url(../fonts/Distinct-Text.woff) format("woff")}@font-face{font-display:swap;font-family:Distinct;font-style:italic;src:url(../fonts/Distinct-Italic.woff2) format("woff2"),url(../fonts/Distinct-Italic.woff) format("woff")}}@layer seldon.foundation{.seldon-padding-vertical-micro-start{padding-top:var(--spacing-micro)}.seldon-padding-vertical-micro-end{padding-bottom:var(--spacing-micro)}.seldon-padding-vertical-micro-both{padding-top:var(--spacing-micro);padding-bottom:var(--spacing-micro)}.seldon-padding-vertical-xsm-start{padding-top:var(--spacing-xsm)}.seldon-padding-vertical-xsm-end{padding-bottom:var(--spacing-xsm)}.seldon-padding-vertical-xsm-both{padding-top:var(--spacing-xsm);padding-bottom:var(--spacing-xsm)}.seldon-padding-vertical-sm-start{padding-top:var(--spacing-sm)}.seldon-padding-vertical-sm-end{padding-bottom:var(--spacing-sm)}.seldon-padding-vertical-sm-both{padding-top:var(--spacing-sm);padding-bottom:var(--spacing-sm)}.seldon-padding-vertical-md-start{padding-top:var(--spacing-md)}.seldon-padding-vertical-md-end{padding-bottom:var(--spacing-md)}.seldon-padding-vertical-md-both{padding-top:var(--spacing-md);padding-bottom:var(--spacing-md)}.seldon-padding-vertical-lg-start{padding-top:var(--spacing-lg)}.seldon-padding-vertical-lg-end{padding-bottom:var(--spacing-lg)}.seldon-padding-vertical-lg-both{padding-top:var(--spacing-lg);padding-bottom:var(--spacing-lg)}.seldon-padding-vertical-xl-start{padding-top:var(--spacing-xl)}.seldon-padding-vertical-xl-end{padding-bottom:var(--spacing-xl)}.seldon-padding-vertical-xl-both{padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}.seldon-padding-vertical-xxl-start{padding-top:var(--spacing-xxl)}.seldon-padding-vertical-xxl-end{padding-bottom:var(--spacing-xxl)}.seldon-padding-vertical-xxl-both{padding-top:var(--spacing-xxl);padding-bottom:var(--spacing-xxl)}.seldon-padding-horizontal-micro-start{padding-left:var(--spacing-micro)}.seldon-padding-horizontal-micro-end{padding-right:var(--spacing-micro)}.seldon-padding-horizontal-micro-both{padding-left:var(--spacing-micro);padding-right:var(--spacing-micro)}.seldon-padding-horizontal-xsm-start{padding-left:var(--spacing-xsm)}.seldon-padding-horizontal-xsm-end{padding-right:var(--spacing-xsm)}.seldon-padding-horizontal-xsm-both{padding-left:var(--spacing-xsm);padding-right:var(--spacing-xsm)}.seldon-padding-horizontal-sm-start{padding-left:var(--spacing-sm)}.seldon-padding-horizontal-sm-end{padding-right:var(--spacing-sm)}.seldon-padding-horizontal-sm-both{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm)}.seldon-padding-horizontal-md-start{padding-left:var(--spacing-md)}.seldon-padding-horizontal-md-end{padding-right:var(--spacing-md)}.seldon-padding-horizontal-md-both{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}.seldon-padding-horizontal-lg-start{padding-left:var(--spacing-lg)}.seldon-padding-horizontal-lg-end{padding-right:var(--spacing-lg)}.seldon-padding-horizontal-lg-both{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.seldon-padding-horizontal-xl-start{padding-left:var(--spacing-xl)}.seldon-padding-horizontal-xl-end{padding-right:var(--spacing-xl)}.seldon-padding-horizontal-xl-both{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl)}.seldon-padding-horizontal-xxl-start{padding-left:var(--spacing-xxl)}.seldon-padding-horizontal-xxl-end{padding-right:var(--spacing-xxl)}.seldon-padding-horizontal-xxl-both{padding-left:var(--spacing-xxl);padding-right:var(--spacing-xxl)}.seldon-skeleton,.seldon-skeleton:before,.seldon-skeleton:after{animation:skeleton-pulse 1s infinite alternate-reverse!important;background-image:none!important;background-clip:initial!important;border-radius:4px!important;border-color:#0000!important;box-shadow:none!important;-webkit-box-decoration-break:clone!important;box-decoration-break:clone!important;color:#0000!important;outline:none!important;pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important;cursor:default!important}input[type=checkbox].seldon-skeleton,input[type=radio].seldon-skeleton{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0!important;width:13px!important;height:13px!important}button.seldon-skeleton{border-radius:4px!important}button.seldon-skeleton svg path{fill:transparent!important}.seldon-toggle-input .seldon-skeleton:before,.seldon-toggle-input .seldon-skeleton:after{border-radius:4px!important}.seldon-toggle-input .seldon-skeleton:after{display:none!important}@keyframes skeleton-pulse{0%{background-color:#eae9e6}to{background-color:#00000040}}}@layer seldon.foundation{:root{--desktop-max-width: 120rem;--quote-size: 1.5rem;--quote-line-height: 2rem;--heading-size1: 1.5rem;--heading-line-height-size1: 1.75rem;--heading-size2: 1.5rem;--heading-line-height-size2: 1.75rem;--heading-size3: 1.25rem;--heading-line-height-size3: 1.5rem;--heading-size4: 1rem;--heading-line-height-size4: 1.25rem;--heading-size5: .75rem;--heading-line-height-size5: 1rem;--string-size1: 1rem;--string-line-height-size1: 1.25rem;--string-size2: .75rem;--string-line-height-size2: 1rem;--string-size3: .5rem;--string-line-height-size3: .75rem;--body-size1: 1rem;--body-line-height-size1: 1.5rem;--body-size2: .75rem;--body-line-height-size2: 1.25rem;--body-size3: .5rem;--body-line-height-size3: 1rem;--label-size1: 1rem;--label-size2: .75rem;--label-size3: .56rem;--label-size4: .56rem;--link-label-size: .75rem;--link-label-line-height: .75rem;--button-label-size: .75rem;--button-label-line-height: 1rem;--button-tertiary-height: 1.75rem;--badge-label-size: .5rem;--badge-label-line-height: .67rem;--snw-header-link-size: 1rem;--snw-header-link-line-height: 1.5rem;--snw-flyout-link-size: 1rem;--snw-flyout-link-line-height: 1.75rem;--snw-heading-hero-size1: 2rem;--snw-heading-hero-line-height-size1: 2.375rem;--snw-heading-hero-size2: 1.625rem;--snw-heading-hero-line-height-size2: 1.9375rem;--snw-button-padding: .5rem;--spacing-micro: .25rem;--spacing-xsm: .5rem;--spacing-sm: .75rem;--spacing-md: 1.75rem;--spacing-lg: 2.75rem;--spacing-xl: 3.75rem;--spacing-xxl: 4.75rem;--spacing-xxxl: 5.75rem;--header-height: 56px;--search-size: 2.32rem;--banner-height: 0px;--font-size-display-medium: 2.5rem;--font-size-display-small: 2rem;--font-size-heading-large: 1.5rem;--font-size-heading-medium: 1.25rem;--font-size-heading-small: 1rem;--font-size-heading-extra-small: .75rem;--font-size-body-large: 1rem;--font-size-body-medium: .875rem;--font-size-body-small: .75rem;--font-size-label-large: 1rem;--font-size-label-medium: .875rem;--font-size-label-small: .75rem;--font-size-link-stylised: 1rem;--font-size-link-large: 1rem;--font-size-link-medium: .875rem;--font-size-link-small: .75rem;--font-size-badge-small: .75rem;--font-size-badge-medium: .875rem}}

package/dist/scss/_foundation.scss

@@ -0,0 +1,69 @@
+@use './typography' as *;
+@use './vars' as *;
+@use './sharedClasses';
+@use './layers';
+
+@layer seldon.foundation {
+  :root {
+    --desktop-max-width: 120rem;
+    --quote-size: 1.5rem;
+    --quote-line-height: 2rem;
+    --heading-size1: 1.5rem;
+    --heading-line-height-size1: 1.75rem;
+    --heading-size2: 1.5rem;
+    --heading-line-height-size2: 1.75rem;
+    --heading-size3: 1.25rem;
+    --heading-line-height-size3: 1.5rem;
+    --heading-size4: 1rem;
+    --heading-line-height-size4: 1.25rem;
+    --heading-size5: 0.75rem;
+    --heading-line-height-size5: 1rem;
+    --string-size1: 1rem;
+    --string-line-height-size1: 1.25rem;
+    --string-size2: 0.75rem;
+    --string-line-height-size2: 1rem;
+    --string-size3: 0.5rem;
+    --string-line-height-size3: 0.75rem;
+    --body-size1: 1rem;
+    --body-line-height-size1: 1.5rem;
+    --body-size2: 0.75rem;
+    --body-line-height-size2: 1.25rem;
+    --body-size3: 0.5rem;
+    --body-line-height-size3: 1rem;
+    --label-size1: 1rem;
+    --label-size2: 0.75rem;
+    --label-size3: 0.56rem;
+    --label-size4: 0.56rem;
+    --link-label-size: 0.75rem;
+    --link-label-line-height: 0.75rem;
+    --button-label-size: 0.75rem;
+    --button-label-line-height: 1rem;
+    --button-tertiary-height: 1.75rem;
+    --badge-label-size: 0.5rem;
+    --badge-label-line-height: 0.67rem;
+    --snw-header-link-size: 1rem;
+    --snw-header-link-line-height: 1.5rem;
+    --snw-flyout-link-size: 1rem;
+    --snw-flyout-link-line-height: 1.75rem;
+    --snw-heading-hero-size1: 2rem;
+    --snw-heading-hero-line-height-size1: 2.375rem;
+    --snw-heading-hero-size2: 1.625rem;
+    --snw-heading-hero-line-height-size2: 1.9375rem;
+    --snw-button-padding: 0.5rem;
+    --spacing-micro: 0.25rem;
+    --spacing-xsm: 0.5rem;
+    --spacing-sm: 0.75rem;
+    --spacing-md: 1.75rem;
+    --spacing-lg: 2.75rem;
+    --spacing-xl: 3.75rem;
+    --spacing-xxl: 4.75rem;
+    --spacing-xxxl: 5.75rem;
+    --header-height: 56px; // Set dynamically by Header component on mount
+    --search-size: 2.32rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
+    --banner-height: 0px;
+
+    // FONT SIZES
+
+    @include font-size-vars;
+  }
+}

package/dist/scss/_layers.scss

@@ -0,0 +1,12 @@
+// Repeated at the top of every CSS-emitting sheet on purpose. CSS records
+// layer order from the first `@layer` statement in the document; later
+// restatements of names that already exist are ignored. Whichever Seldon
+// file the consumer evaluates first therefore has to list the full order.
+// `vendor` is reserved for third-party CSS (e.g. flatpickr) so Seldon can
+// override it. Unlayered consumer CSS still beats every named layer.
+@layer vendor, seldon.foundation, seldon.components, seldon.patterns, seldon.site;
+
+// These tiers order CSS across tiers only. Two sheets in the same tier that style
+// the same element at the same specificity still tie, and a tie inside one layer
+// falls back to source order -- i.e. to JS import order. Keep each component's own
+// stylesheet import last so it wins those ties; see Button.tsx for the live case.

package/dist/scss/_reset.scss

@@ -1,64 +1,68 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+@use './layers';
 
-* {
-  margin: 0;
-}
+@layer seldon.foundation {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 
-body {
-  -webkit-font-smoothing: antialiased;
-  line-height: 1.5;
-}
+  * {
+    margin: 0;
+  }
 
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
+  body {
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.5;
+  }
 
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
 
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  font-weight: unset;
-  overflow-wrap: break-word;
-}
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
 
-a {
-  color: inherit;
-  text-decoration: none;
-}
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    font-weight: unset;
+    overflow-wrap: break-word;
+  }
 
-ul {
-  list-style: none;
-  padding: 0;
-}
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
 
-li {
-  list-style: none;
-}
+  ul {
+    list-style: none;
+    padding: 0;
+  }
 
-#root {
-  isolation: isolate;
-}
+  li {
+    list-style: none;
+  }
+
+  #root {
+    isolation: isolate;
+  }
 
-label {
-  cursor: inherit;
+  label {
+    cursor: inherit;
+  }
 }