@phillips/seldon 1.279.1 → 1.280.0

package/README.md

@@ -20,19 +20,99 @@ yarn add @phillips/seldon
 
 ### Styling
 
-The project contains a `scss` folder. Here you will find the main export of our sass styles for our components. There's also a scss export that contains our mixins, tokens, and other utilities.
+There are two ways to get Seldon's CSS. **Pick one** — combining them double-loads styles.
+
+- **React apps (recommended):** import the components you use and wrap your app in `SeldonProvider`. Each component imports its own **pre-compiled CSS** from its built JS (e.g. `Button.js` does `import './_button.css'`), so styling follows the JavaScript graph and you only ship what you use; `SeldonProvider` loads the shared `foundation` CSS (fonts, `:root` tokens, padding utilities) exactly once. You do **not** need `componentStyles` — or any Sass toolchain — on this path; the package ships plain CSS.
+
+  ```jsx
+  import { SeldonProvider, Button } from '@phillips/seldon';
+
+  <SeldonProvider>
+    <Button>…</Button>
+  </SeldonProvider>;
+  ```
+
+  Foundation, component, pattern, and site-furniture CSS is wrapped in `@layer seldon.foundation`, `seldon.components`, `seldon.patterns`, and `seldon.site` (later layers win). Third-party CSS (flatpickr) lives in a lower `vendor` layer so Seldon can override it. Every emitting sheet restates that full order so whichever Seldon file the bundler evaluates first still establishes it — JS import order does not decide equal-specificity ties. Unlayered CSS in your app still beats all Seldon layers, which is what you want for overrides.
+
+- **Compiling Seldon SCSS yourself:** use the published Sass entry points below instead. Do this only if you are _not_ relying on the JavaScript imports to deliver CSS — otherwise every component's CSS ships twice (once from JS, once from Sass), and `foundation` loads twice.
+
+> Do not use `SeldonProvider` (or the React component imports) **and** `componentStyles` together. `SeldonProvider` loads `foundation` and each component supplies its own CSS via JS; `componentStyles` bundles `foundation` plus every component's CSS. Loading both duplicates all of it.
+
+##### CSS imports are side effects — don't let your bundler drop them
+
+The component CSS arrives via bare `import './_button.css'` statements that export nothing, so an aggressive bundler can tree-shake them away and render Seldon unstyled. Seldon guards against this by declaring its CSS side-effectful in `package.json` (`"sideEffects": ["**/*.scss", "**/*.css"]`), which is all a normal app needs.
+
+For a standard **Vite app** no extra config is required — Vite bundles CSS imported from dependencies automatically. If styles ever go missing, check `vite.config.ts` for these:
+
+- **`build.rollupOptions.external`** — do **not** externalize `@phillips/seldon` (or `/^@phillips/`). Externalizing it drops the components' CSS imports from your output. Leave Seldon bundled, or extract its CSS yourself.
+- **`optimizeDeps.exclude`** — excluding `@phillips/seldon` can stop its CSS being picked up in dev; remove it or add the package to `optimizeDeps.include` instead.
+- **`build.lib`** (only if you are building your own library, not an app) — a `lib` build treats deps as external and won't emit their CSS. Keep your own `package.json` `sideEffects` honest (don't set `false`) so downstream consumers of _your_ library retain the CSS, and re-export or bundle Seldon's CSS as needed.
+- **`css.preprocessorOptions.scss`** — irrelevant on this path; you can leave Sass unconfigured because the package ships compiled CSS.
+
+#### Compiling Seldon SCSS yourself
+
+Pick **one** CSS source — `componentStyles` already `@use`s `foundation`, so loading both duplicates the shared CSS when you code-split:
 
 ```scss
-@use '@phillips/seldon/dist/scss/componentStyles'; // our component tyles
-@use '@phillips/seldon/dist/scss/allPartials'; // our scss utilities
+// Option A — full component bundle (includes foundation: tokens, type, padding utilities):
+@use '@phillips/seldon/dist/scss/componentStyles';
 ```
 
-If you wish to only import specific component styles you can find them in their respective directories inside the `scss` folder.
-
 ```scss
+// Option B — foundation plus specific component styles, à la carte:
+@use '@phillips/seldon/dist/scss/foundation';
 @use '@phillips/seldon/dist/scss/components/Button/button';
 ```
 
+For SCSS authoring, `allPartials` exposes mixins and variables only and emits no CSS, so every component stylesheet `@use`s it for shared mixins/variables — safe even when code-splitting, because it adds no duplicated rules:
+
+```scss
+@use '@phillips/seldon/dist/scss/allPartials' as *;
+```
+
+Because `allPartials` emits no CSS, importing it does **not** pull in the shared utility CSS (padding utilities, `:root` tokens, fonts). Those load once from `foundation` — via `SeldonProvider`, or via Option A/B above if you compile Seldon SCSS yourself.
+
+#### Using shared mixins and variables
+
+`allPartials` forwards Seldon's mixins, functions, and variables (breakpoints, spacing, colors, typography). `@use` it with the global namespace and reference them directly in your own component SCSS:
+
+```scss
+@use '@phillips/seldon/dist/scss/allPartials' as *;
+
+.my-card {
+  gap: $spacing-md;
+
+  @include media($breakpoint-md) {
+    gap: $spacing-lg;
+  }
+
+  &__button {
+    @include hoverOrActive {
+      color: $pure-black;
+    }
+
+    &:focus-visible {
+      @include focus-ring($border-radius: 4px);
+    }
+  }
+}
+```
+
+Commonly used helpers:
+
+| Helper                                           | Kind      | Notes                                                            |
+| ------------------------------------------------ | --------- | ---------------------------------------------------------------- |
+| `$spacing-*`, `$breakpoint-*`, color tokens      | variables | Scale/layout tokens; no CSS until referenced.                    |
+| `media($breakpoint, $type: 'min' \| 'max')`      | mixin     | Wraps `@content` in a Seldon breakpoint media query.             |
+| `hoverOrActive`                                  | mixin     | Pointer-aware `:hover`/`:active` — avoids sticky hover on touch. |
+| `focus-ring(...)`                                | mixin     | Consistent focus outline; pair with `:focus-visible`.            |
+| `grid(...)`, `gridContainer(...)`, `gridMargins` | mixins    | Seldon grid layout.                                              |
+| `hidden`                                         | mixin     | Visually-hidden (accessible) content.                            |
+
+**Code splitting is safe.** Importing these adds no CSS to your bundles — a mixin only produces output where you `@include` it, so each chunk contains exactly the CSS it generates and nothing is duplicated by the import. The one exception is helpers that emit a whole selector rather than properties — notably `padding()`, which generates `.seldon-padding-*` utility classes. `foundation` already emits those once, so consume them from `foundation` (or `SeldonProvider`); don't re-`@include padding()` per chunk or you will duplicate the utility classes across every bundle.
+
+> To render text, prefer the `<Text variant="…">` component over the typography mixins (`text()`, `hText`, `labelText`, …); the mixins remain available for styling your own elements where a component isn't practical.
+
 ### Components
 
 Each component can be imported in your project by referencing the named exports from main index file.

package/dist/_virtual/index3.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;

package/dist/_virtual/index3.js

@@ -1,4 +1,4 @@
-var r = {};
+var s = { exports: {} };
 export {
-  r as __exports
+  s as __module
 };

package/dist/_virtual/index4.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
+"use strict";const e=require("../node_modules/lodash.debounce/index.cjs");e.__require();

package/dist/_virtual/index4.js

@@ -1,4 +1,2 @@
-var s = { exports: {} };
-export {
-  s as __module
-};
+import { __require as e } from "../node_modules/lodash.debounce/index.js";
+e();

package/dist/_virtual/index5.cjs

@@ -1 +1 @@
-"use strict";const e=require("../node_modules/lodash.debounce/index.cjs");e.__require();
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;

package/dist/_virtual/index5.js

@@ -1,2 +1,4 @@
-import { __require as e } from "../node_modules/lodash.debounce/index.js";
-e();
+var r = {};
+export {
+  r as __exports
+};

package/dist/components/Accordion/Accordion.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),m=require("react"),q=require("../../_virtual/index2.cjs"),f=require("../../utils/index.cjs"),g=require("../../node_modules/@radix-ui/react-accordion/dist/index.cjs"),p=require("./utils.cjs"),r=m.forwardRef(({className:n,children:t,variant:s,value:e,onValueChanged:i,...o},c)=>{const{className:a,...u}=f.getCommonProps(o,"Accordion"),d=p.getAccordionVariantProps(s,e);return l.jsx(g.Root,{className:q.default(`${a}`,n),...u,...d,id:o?.id,ref:c,value:e,onValueChange:i,children:t})});r.displayName="Accordion";exports.default=r;
+require('./_accordion.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),m=require("react"),q=require("../../_virtual/index2.cjs"),f=require("../../utils/index.cjs"),g=require("../../node_modules/@radix-ui/react-accordion/dist/index.cjs"),p=require("./utils.cjs");;const r=m.forwardRef(({className:n,children:t,variant:s,value:e,onValueChanged:i,...o},c)=>{const{className:a,...u}=f.getCommonProps(o,"Accordion"),d=p.getAccordionVariantProps(s,e);return l.jsx(g.Root,{className:q.default(`${a}`,n),...u,...d,id:o?.id,ref:c,value:e,onValueChange:i,children:t})});r.displayName="Accordion";exports.default=r;

package/dist/components/Accordion/Accordion.js

@@ -1,19 +1,21 @@
+import './_accordion.css';
 import { jsx as p } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
 import f from "../../_virtual/index2.js";
 import { getCommonProps as l } from "../../utils/index.js";
 import { Root as A } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
 import { getAccordionVariantProps as C } from "./utils.js";
+
 const N = d(
   ({ className: m, children: a, variant: s, value: o, onValueChanged: t, ...r }, n) => {
-    const { className: c, ...i } = l(r, "Accordion"), e = C(s, o);
+    const { className: i, ...c } = l(r, "Accordion"), e = C(s, o);
     return (
       // @ts-expect-error radix-ui type checking is too aggressive ans we know the values are valid
       /* @__PURE__ */ p(
         A,
         {
-          className: f(`${c}`, m),
-          ...i,
+          className: f(`${i}`, m),
+          ...c,
           ...e,
           id: r?.id,
           ref: n,

package/dist/components/Accordion/_accordion.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.components{.seldon-accordion{border-top:1px solid #eae9e6;width:100%}.seldon-accordion-item{width:100%}.seldon-accordion-item svg{max-width:unset}.seldon-accordion-item__border-bottom{border-bottom:1px solid #eae9e6}.seldon-accordion-item__content{display:block}.seldon-accordion-item__content .radix-accordion-content,.seldon-accordion-item__content--locked{padding-bottom:var(--spacing-sm)}.seldon-accordion-item--transition{overflow:hidden}.seldon-accordion-item--transition[data-state=open]{animation:slide-down var(--seldon-accordion-transition-time) ease-out}.seldon-accordion-item--transition[data-state=closed]{animation:slide-up var(--seldon-accordion-transition-time) ease-out forwards}.seldon-accordion-item[data-state=open] .seldon-accordion-item-label-plus__icon{display:none}.seldon-accordion-item[data-state=open] .seldon-accordion-item-label-minus__icon,.seldon-accordion-item[data-state=closed] .seldon-accordion-item-label-plus__icon{display:block}.seldon-accordion-item[data-state=closed] .seldon-accordion-item-label-minus__icon{display:none}@keyframes slide-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes slide-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}.seldon-accordion-item-label{align-items:center;background:none;border:none;display:flex;flex-direction:row;font:inherit;justify-content:space-between;padding:var(--spacing-sm) 0;text-align:inherit;width:100%}.seldon-accordion-item-label[data-disabled]{color:inherit;opacity:1}.seldon-accordion-item-label--hoverable{cursor:pointer}.seldon-accordion-item-label--hoverable:hover{opacity:.75}.seldon-accordion-item-label:focus-visible{outline:2px solid #07c;outline-offset:4px}.seldon-accordion-item-label__text{flex:auto;font-variation-settings:"wght" 600;text-align:left}.seldon-accordion-item-label__icon{flex:initial;height:.875rem;width:1.5rem}@media(min-width:961px){.seldon-accordion-item-label__icon{flex:initial;height:1rem;width:1.5rem}}.seldon-accordion-item-label--blue-fill{filter:brightness(0) saturate(100%) invert(51%) sepia(72%) saturate(1698%) hue-rotate(191deg) brightness(95%) contrast(86%)}}

package/dist/components/AddToCalendar/AddToCalendar.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"),g=require("../../utils/index.cjs"),j=require("../../_virtual/index2.cjs"),l=require("../../node_modules/@radix-ui/react-dropdown-menu/dist/index.cjs"),i=require("./calendarLinks.cjs"),q=require("../IconButton/IconButton.cjs"),O=require("../Button/types.cjs"),p=require("../Icon/Icon.cjs"),N=require("../Link/Link.cjs"),T=require("../Text/Text.cjs"),u=d.forwardRef(({className:k,event:t,label:o="Add to calendar",linkElement:b=N.default,...r},f)=>{const{className:a,...m}=g.getCommonProps(r,"AddToCalendar"),[s,C]=d.useState(!1),h=(n,c)=>{n==="file"?i.generateCalendarFile(t):n==="link"&&c&&window.open(c,"_blank")},x=[{label:"iCalendar",action:"file"},{label:"Google Calendar",action:"link",link:i.generateGoogleCalendarLink(t)},{label:"Outlook",action:"file"},{label:"Outlook Online",action:"link",link:i.generateOutlookOnlineLink(t)},{label:"Yahoo Calendar",action:"link",link:i.generateYahooCalendarLink(t)}];return e.jsx("div",{...m,className:j.default(a,k),...r,ref:f,children:e.jsxs(l.Root,{open:s,onOpenChange:C,children:[e.jsx(l.Trigger,{asChild:!0,children:e.jsx(q.default,{"aria-label":o,variant:O.ButtonVariants.tertiary,children:e.jsx(p.default,{icon:s?"CloseX":"Calendar",title:o})})}),e.jsx(l.Portal,{children:e.jsx(l.Content,{sideOffset:5,align:"start",side:"bottom","data-side":"bottom",avoidCollisions:!1,className:`${a}-atcb-list`,children:x.map(n=>e.jsx(l.Item,{className:`${a}-atcb-item`,onSelect:()=>h(n.action,n.link),children:n.action==="link"?e.jsx(b,{className:`${a}-atcb-item-link`,href:n.link,children:n.label}):e.jsx("button",{className:`${a}-atcb-item-link`,children:e.jsx(T.default,{children:n.label})})},n.label))})})]})})});u.displayName="AddToCalendar";exports.default=u;
+require('./_addToCalendar.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("react"),g=require("../../utils/index.cjs"),j=require("../../_virtual/index2.cjs"),l=require("../../node_modules/@radix-ui/react-dropdown-menu/dist/index.cjs"),i=require("./calendarLinks.cjs"),q=require("../IconButton/IconButton.cjs"),O=require("../Button/types.cjs");;const p=require("../Icon/Icon.cjs"),N=require("../Link/Link.cjs"),T=require("../Text/Text.cjs"),u=d.forwardRef(({className:k,event:t,label:o="Add to calendar",linkElement:b=N.default,...r},f)=>{const{className:a,...m}=g.getCommonProps(r,"AddToCalendar"),[s,C]=d.useState(!1),h=(n,c)=>{n==="file"?i.generateCalendarFile(t):n==="link"&&c&&window.open(c,"_blank")},x=[{label:"iCalendar",action:"file"},{label:"Google Calendar",action:"link",link:i.generateGoogleCalendarLink(t)},{label:"Outlook",action:"file"},{label:"Outlook Online",action:"link",link:i.generateOutlookOnlineLink(t)},{label:"Yahoo Calendar",action:"link",link:i.generateYahooCalendarLink(t)}];return e.jsx("div",{...m,className:j.default(a,k),...r,ref:f,children:e.jsxs(l.Root,{open:s,onOpenChange:C,children:[e.jsx(l.Trigger,{asChild:!0,children:e.jsx(q.default,{"aria-label":o,variant:O.ButtonVariants.tertiary,children:e.jsx(p.default,{icon:s?"CloseX":"Calendar",title:o})})}),e.jsx(l.Portal,{children:e.jsx(l.Content,{sideOffset:5,align:"start",side:"bottom","data-side":"bottom",avoidCollisions:!1,className:`${a}-atcb-list`,children:x.map(n=>e.jsx(l.Item,{className:`${a}-atcb-item`,onSelect:()=>h(n.action,n.link),children:n.action==="link"?e.jsx(b,{className:`${a}-atcb-item-link`,href:n.link,children:n.label}):e.jsx("button",{className:`${a}-atcb-item-link`,children:e.jsx(T.default,{children:n.label})})},n.label))})})]})})});u.displayName="AddToCalendar";exports.default=u;

package/dist/components/AddToCalendar/AddToCalendar.js

@@ -1,3 +1,4 @@
+import './_addToCalendar.css';
 import { jsx as e, jsxs as C } from "react/jsx-runtime";
 import { forwardRef as b, useState as h } from "react";
 import { getCommonProps as g } from "../../utils/index.js";
@@ -6,6 +7,7 @@ import { Root as N, Trigger as O, Portal as I, Content as T, Item as x } from ".
 import { generateGoogleCalendarLink as A, generateOutlookOnlineLink as L, generateYahooCalendarLink as P, generateCalendarFile as $ } from "./calendarLinks.js";
 import w from "../IconButton/IconButton.js";
 import { ButtonVariants as R } from "../Button/types.js";
+
 import S from "../Icon/Icon.js";
 import j from "../Link/Link.js";
 import y from "../Text/Text.js";

package/dist/components/AddToCalendar/_addToCalendar.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.components{.seldon-add-to-calendar svg{height:var(--spacing-md);width:var(--spacing-md)}.seldon-add-to-calendar .seldon-icon-button{background:transparent;border:none;cursor:pointer}.seldon-add-to-calendar .seldon-icon-button.seldon-button{height:var(--spacing-md);padding:0;width:var(--spacing-md)}.seldon-add-to-calendar .seldon-icon-button.seldon-button svg{height:var(--spacing-md);max-width:none;width:var(--spacing-md)}.seldon-add-to-calendar .seldon-icon-button:hover{background:transparent}.seldon-add-to-calendar .seldon-icon-button svg path{transition:fill .25s ease-in-out}.seldon-add-to-calendar .seldon-icon-button svg:hover path{fill:#75716f}.seldon-add-to-calendar .seldon-icon-button:focus-visible{border-radius:4px;outline:2px solid #07c;outline-offset:4px}.seldon-add-to-calendar-atcb-list{background:#fff;border:1px solid #eae9e6}.seldon-add-to-calendar-atcb-item{padding:var(--spacing-xsm) var(--spacing-sm)}.seldon-add-to-calendar-atcb-item:hover,.seldon-add-to-calendar-atcb-item:focus-visible{background-color:#eae9e6;cursor:pointer;outline:none}.seldon-add-to-calendar-atcb-item-link{background:none;border:none;cursor:pointer;font-variation-settings:"wght" 400;outline:none;padding:0;text-decoration:none}.seldon-add-to-calendar-atcb-item-link p{margin-bottom:0}.seldon-add-to-calendar-atcb-item-link:hover{border:none;outline:none;text-decoration:none}.seldon-add-to-calendar-atcb-item-link span{font-variation-settings:"wght" 400;text-decoration:none}.seldon-add-to-calendar-atcb-item-link span:hover,.seldon-add-to-calendar-atcb-item-link span:focus-visible{color:#000;outline:none;text-decoration:none}}

package/dist/components/Article/Article.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("react"),j=require("../../utils/index.cjs"),p=require("../../_virtual/index2.cjs"),N=require("../SeldonImage/SeldonImage.cjs"),$=require("../SeldonImage/types.cjs"),s=require("../Text/Text.cjs"),u=require("../Text/types.cjs"),h=require("../Link/Link.cjs"),v=require("../Link/types.cjs"),o=q.forwardRef(({className:d,imageSrc:l,label:a,header:n,description:r,linkElement:m=h.default,linkLabel:i,linkHref:x,...c},_)=>{const{className:t,...f}=j.getCommonProps(c,"Article");return e.jsxs("article",{...f,className:p.default(t,d),...c,ref:_,children:[l?e.jsx(N.default,{aspectRatio:$.AspectRatio.Landscape,src:l,alt:n??""}):null,e.jsxs("div",{className:`${t}__content`,children:[a?e.jsx(s.default,{variant:u.TextVariants.labelSmall,className:`${t}__content-label`,children:a}):null,n?e.jsx(s.default,{variant:u.TextVariants.headingMedium,className:`${t}__content-title`,children:n}):null,r?e.jsx(s.default,{className:`${t}__content-description`,element:"p",children:r}):null,i?e.jsx(m,{href:x,variant:v.LinkVariants.linkMedium,className:`${t}__content-link`,children:i}):null]})]})});o.displayName="Article";exports.default=o;
+require('./_article.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("react"),j=require("../../utils/index.cjs"),p=require("../../_virtual/index2.cjs");;const N=require("../SeldonImage/SeldonImage.cjs"),$=require("../SeldonImage/types.cjs"),s=require("../Text/Text.cjs"),u=require("../Text/types.cjs"),h=require("../Link/Link.cjs"),v=require("../Link/types.cjs"),o=q.forwardRef(({className:d,imageSrc:l,label:a,header:n,description:r,linkElement:m=h.default,linkLabel:i,linkHref:x,...c},_)=>{const{className:t,...f}=j.getCommonProps(c,"Article");return e.jsxs("article",{...f,className:p.default(t,d),...c,ref:_,children:[l?e.jsx(N.default,{aspectRatio:$.AspectRatio.Landscape,src:l,alt:n??""}):null,e.jsxs("div",{className:`${t}__content`,children:[a?e.jsx(s.default,{variant:u.TextVariants.labelSmall,className:`${t}__content-label`,children:a}):null,n?e.jsx(s.default,{variant:u.TextVariants.headingMedium,className:`${t}__content-title`,children:n}):null,r?e.jsx(s.default,{className:`${t}__content-description`,element:"p",children:r}):null,i?e.jsx(m,{href:x,variant:v.LinkVariants.linkMedium,className:`${t}__content-link`,children:i}):null]})]})});o.displayName="Article";exports.default=o;

package/dist/components/Article/Article.js

@@ -1,7 +1,9 @@
+import './_article.css';
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { forwardRef as N } from "react";
 import { getCommonProps as h } from "../../utils/index.js";
 import x from "../../_virtual/index2.js";
+
 import $ from "../SeldonImage/SeldonImage.js";
 import { AspectRatio as k } from "../SeldonImage/types.js";
 import l from "../Text/Text.js";

package/dist/components/Article/_article.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.components{.seldon-article{border-bottom:1px solid #000;border-top:1px solid #000;display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md)}@media(min-width:961px){.seldon-article{flex-direction:row}}.seldon-article__content{display:flex;flex-direction:column;justify-content:center}.seldon-article__content-label,.seldon-article__content-description{color:#545454}.seldon-article__content-label{margin-bottom:var(--spacing-xsm)}}

package/dist/components/Banner/Banner.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),i=require("../../_virtual/index2.cjs"),o=require("react"),_=require("../../utils/index.cjs"),l=require("./types.cjs"),c=require("../Text/Text.cjs"),m=require("../Text/types.cjs"),t=`${_.px}-banner`,f=o.forwardRef(({children:n,className:r,variant:e=l.BannerVariants.top,id:a,...d},u)=>{const{className:B,...R}=_.getCommonProps({id:a,...d},"Banner");return s.jsx("article",{...R,...d,id:a,ref:u,className:i.default(B,r,{[`${B}--${e}`]:e}),children:s.jsx("div",{className:`${t}__inner`,children:n})})}),N=o.forwardRef(({children:n,className:r,size:e=l.BannerMediaSize.third,...a},d)=>{const u=e===l.BannerMediaSize.half?"1-2":"1-3";return s.jsx("div",{...a,ref:d,className:i.default(`${t}__media`,`${t}__media--${u}`,r),children:n})}),x=o.forwardRef(({children:n,className:r,...e},a)=>s.jsx("div",{...e,ref:a,className:i.default(`${t}__body`,r),children:n})),p=o.forwardRef(({className:n,variant:r=m.TextVariants.labelSmall,...e},a)=>s.jsx(c.default,{...e,ref:a,variant:r,className:i.default(`${t}__eyebrow`,n)})),y=o.forwardRef(({className:n,element:r="h3",variant:e=m.TextVariants.headingMedium,...a},d)=>s.jsx(c.default,{...a,ref:d,variant:e,element:r,className:i.default(`${t}__title`,n)})),$=o.forwardRef(({className:n,variant:r=m.TextVariants.bodyMedium,...e},a)=>s.jsx(c.default,{...e,ref:a,variant:r,className:i.default(`${t}__description`,n)})),b=o.forwardRef(({className:n,variant:r=m.TextVariants.linkMedium,...e},a)=>s.jsx(c.default,{...e,ref:a,variant:r,className:i.default(`${t}__cta`,n)})),M=o.forwardRef(({className:n,alt:r="",...e},a)=>s.jsx("img",{...e,ref:a,alt:r,className:i.default(`${t}__media-img`,n)}));f.displayName="Banner.Root";N.displayName="Banner.Media";x.displayName="Banner.Content";p.displayName="Banner.Eyebrow";y.displayName="Banner.Title";$.displayName="Banner.Description";b.displayName="Banner.Cta";M.displayName="Banner.Image";const j=Object.assign(f,{Root:f,Media:N,Content:x,Eyebrow:p,Title:y,Description:$,Cta:b,Image:M});exports.BannerMediaSize=l.BannerMediaSize;exports.BannerVariants=l.BannerVariants;exports.default=j;
+require('./_banner.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),i=require("../../_virtual/index2.cjs"),o=require("react"),_=require("../../utils/index.cjs"),l=require("./types.cjs");;const c=require("../Text/Text.cjs"),m=require("../Text/types.cjs"),t=`${_.px}-banner`,f=o.forwardRef(({children:n,className:r,variant:e=l.BannerVariants.top,id:a,...d},u)=>{const{className:B,...R}=_.getCommonProps({id:a,...d},"Banner");return s.jsx("article",{...R,...d,id:a,ref:u,className:i.default(B,r,{[`${B}--${e}`]:e}),children:s.jsx("div",{className:`${t}__inner`,children:n})})}),N=o.forwardRef(({children:n,className:r,size:e=l.BannerMediaSize.third,...a},d)=>{const u=e===l.BannerMediaSize.half?"1-2":"1-3";return s.jsx("div",{...a,ref:d,className:i.default(`${t}__media`,`${t}__media--${u}`,r),children:n})}),x=o.forwardRef(({children:n,className:r,...e},a)=>s.jsx("div",{...e,ref:a,className:i.default(`${t}__body`,r),children:n})),p=o.forwardRef(({className:n,variant:r=m.TextVariants.labelSmall,...e},a)=>s.jsx(c.default,{...e,ref:a,variant:r,className:i.default(`${t}__eyebrow`,n)})),y=o.forwardRef(({className:n,element:r="h3",variant:e=m.TextVariants.headingMedium,...a},d)=>s.jsx(c.default,{...a,ref:d,variant:e,element:r,className:i.default(`${t}__title`,n)})),$=o.forwardRef(({className:n,variant:r=m.TextVariants.bodyMedium,...e},a)=>s.jsx(c.default,{...e,ref:a,variant:r,className:i.default(`${t}__description`,n)})),b=o.forwardRef(({className:n,variant:r=m.TextVariants.linkMedium,...e},a)=>s.jsx(c.default,{...e,ref:a,variant:r,className:i.default(`${t}__cta`,n)})),M=o.forwardRef(({className:n,alt:r="",...e},a)=>s.jsx("img",{...e,ref:a,alt:r,className:i.default(`${t}__media-img`,n)}));f.displayName="Banner.Root";N.displayName="Banner.Media";x.displayName="Banner.Content";p.displayName="Banner.Eyebrow";y.displayName="Banner.Title";$.displayName="Banner.Description";b.displayName="Banner.Cta";M.displayName="Banner.Image";const j=Object.assign(f,{Root:f,Media:N,Content:x,Eyebrow:p,Title:y,Description:$,Cta:b,Image:M});exports.BannerMediaSize=l.BannerMediaSize;exports.BannerVariants=l.BannerVariants;exports.default=j;

package/dist/components/Banner/Banner.js

@@ -1,8 +1,10 @@
+import './_banner.css';
 import { jsx as r } from "react/jsx-runtime";
 import t from "../../_virtual/index2.js";
 import { forwardRef as i } from "react";
 import { getCommonProps as u, px as h } from "../../utils/index.js";
 import { BannerVariants as w, BannerMediaSize as N } from "./types.js";
+
 import l from "../Text/Text.js";
 import { TextVariants as c } from "../Text/types.js";
 const o = `${h}-banner`, p = i(
@@ -53,7 +55,7 @@ b.displayName = "Banner.Title";
 f.displayName = "Banner.Description";
 g.displayName = "Banner.Cta";
 C.displayName = "Banner.Image";
-const v = Object.assign(p, {
+const P = Object.assign(p, {
   Root: p,
   Media: _,
   Content: y,
@@ -66,5 +68,5 @@ const v = Object.assign(p, {
 export {
   N as BannerMediaSize,
   w as BannerVariants,
-  v as default
+  P as default
 };

package/dist/components/Banner/_banner.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.components{.seldon-banner{min-width:0;width:100%}.seldon-banner__inner{align-items:center;display:flex;flex-direction:column;gap:16px}.seldon-banner__inner>.seldon-banner__media{order:0}.seldon-banner__inner>.seldon-banner__column-gap{order:1}.seldon-banner__inner>.seldon-banner__body{order:2}@media(min-width:768px){.seldon-banner__inner{flex-direction:row}.seldon-banner__inner>.seldon-banner__media,.seldon-banner__inner>.seldon-banner__column-gap,.seldon-banner__inner>.seldon-banner__body{order:unset}}.seldon-banner__media{flex-shrink:0;position:relative;width:100%}@media(min-width:768px){.seldon-banner__media{width:auto}.seldon-banner__media--1-3{flex-basis:33.333%}.seldon-banner__media--1-2{flex-basis:50%}}.seldon-banner__column-gap{align-self:stretch;background:#eae9e6;flex-shrink:0;margin:0 var(--spacing-xsm);width:1px}.seldon-banner__body{display:flex;flex-direction:column;gap:var(--spacing-xsm);min-width:0;width:100%}.seldon-banner__description{-webkit-box-orient:vertical;color:#545454;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}@media(min-width:768px){.seldon-banner__description{-webkit-line-clamp:2;line-clamp:2}}.seldon-banner__cta{text-decoration:underline}.seldon-banner__media-frame{aspect-ratio:16/9;overflow:hidden;width:100%}.seldon-banner__media-img{display:block;height:100%;object-fit:cover;width:100%}.seldon-banner--inline{border-bottom:1px solid #eae9e6;border-top:1px solid #eae9e6;padding:16px}.seldon-banner--top .seldon-banner__body .fresnel-container{width:100%}.seldon-banner--top .seldon-banner__body{justify-content:center;padding-left:0}@media(min-width:961px){.seldon-banner--top .seldon-banner__body{padding:var(--spacing-md) 0;padding-left:var(--spacing-lg)}}.seldon-banner--top .seldon-banner__inner{align-items:stretch;column-gap:0}@media(min-width:768px){.seldon-banner--top .seldon-banner__inner{flex-direction:column}.seldon-banner--top .seldon-banner__inner>.seldon-banner__media{order:0}.seldon-banner--top .seldon-banner__inner>.seldon-banner__column-gap{order:1}.seldon-banner--top .seldon-banner__inner>.seldon-banner__body{order:2}}@media(min-width:961px){.seldon-banner--top .seldon-banner__inner{flex-direction:row}.seldon-banner--top .seldon-banner__inner>.seldon-banner__media,.seldon-banner--top .seldon-banner__inner>.seldon-banner__column-gap,.seldon-banner--top .seldon-banner__inner>.seldon-banner__body{order:unset}}@media(min-width:768px){.seldon-banner--top .seldon-banner__media{width:100%}.seldon-banner--top .seldon-banner__media--1-3,.seldon-banner--top .seldon-banner__media--1-2{flex-basis:unset}}@media(min-width:961px){.seldon-banner--top .seldon-banner__media{width:auto}.seldon-banner--top .seldon-banner__media--1-3{flex-basis:33.333%}.seldon-banner--top .seldon-banner__media--1-2{flex-basis:50%}}@media(min-width:961px){.seldon-banner--top .seldon-banner__body>.seldon-page-content-wrapper{padding-inline-start:0}}}

package/dist/components/Breadcrumb/Breadcrumb.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../../utils/index.cjs"),h=require("../../_virtual/index2.cjs"),x=require("./BreadcrumbItem.cjs"),u=require("../../providers/SeldonProvider/utils.cjs"),o=require("../../utils/constants.cjs"),f=require("../Icon/Icon.cjs"),j=({className:i,items:r=[],truncateIndex:d,linkElement:s="a",...a})=>{const{className:c,...b}=t.getCommonProps(a,"Breadcrumb"),{id:m}=a;return e.jsxs("nav",{"aria-label":"Breadcrumb",className:h.default(c,i),...b,...a,children:[e.jsx(u.SSRMediaQuery.Media,{lessThan:o.Breakpoints.md,children:e.jsx(s,{href:r[1].href?r[1].href:"/",className:`${t.px}-icon-button ${t.px}-icon-button--primary ${c}__back-button`,"data-testid":`${m}-back-button`,children:e.jsx(f.default,{icon:"ArrowLeft"})})}),e.jsx(u.SSRMediaQuery.Media,{greaterThanOrEqual:o.Breakpoints.md,children:e.jsx("ol",{children:r.map((n,l)=>e.jsx(x.default,{href:n.href,label:n.label,element:s,isCurrent:r.length-1===l,isTruncateText:d===l},n.label))})})]})};exports.default=j;
+require('./_breadcrumb.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../../utils/index.cjs"),h=require("../../_virtual/index2.cjs"),x=require("./BreadcrumbItem.cjs"),u=require("../../providers/SeldonProvider/utils.cjs");;const i=require("../../utils/constants.cjs"),f=require("../Icon/Icon.cjs"),j=({className:o,items:r=[],truncateIndex:d,linkElement:s="a",...a})=>{const{className:c,...b}=t.getCommonProps(a,"Breadcrumb"),{id:m}=a;return e.jsxs("nav",{"aria-label":"Breadcrumb",className:h.default(c,o),...b,...a,children:[e.jsx(u.SSRMediaQuery.Media,{lessThan:i.Breakpoints.md,children:e.jsx(s,{href:r[1].href?r[1].href:"/",className:`${t.px}-icon-button ${t.px}-icon-button--primary ${c}__back-button`,"data-testid":`${m}-back-button`,children:e.jsx(f.default,{icon:"ArrowLeft"})})}),e.jsx(u.SSRMediaQuery.Media,{greaterThanOrEqual:i.Breakpoints.md,children:e.jsx("ol",{children:r.map((n,l)=>e.jsx(x.default,{href:n.href,label:n.label,element:s,isCurrent:r.length-1===l,isTruncateText:d===l},n.label))})})]})};exports.default=j;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,41 +1,43 @@
+import './_breadcrumb.css';
 import { jsxs as h, jsx as r } from "react/jsx-runtime";
 import { getCommonProps as u, px as l } from "../../utils/index.js";
 import p from "../../_virtual/index2.js";
 import B from "./BreadcrumbItem.js";
 import { SSRMediaQuery as c } from "../../providers/SeldonProvider/utils.js";
-import { Breakpoints as s } from "../../utils/constants.js";
+
+import { Breakpoints as i } from "../../utils/constants.js";
 import k from "../Icon/Icon.js";
-const y = ({
-  className: i,
+const C = ({
+  className: s,
   items: a = [],
   truncateIndex: d,
-  linkElement: n = "a",
+  linkElement: t = "a",
   ...e
 }) => {
-  const { className: t, ...b } = u(e, "Breadcrumb"), { id: f } = e;
-  return /* @__PURE__ */ h("nav", { "aria-label": "Breadcrumb", className: p(t, i), ...b, ...e, children: [
-    /* @__PURE__ */ r(c.Media, { lessThan: s.md, children: /* @__PURE__ */ r(
-      n,
+  const { className: m, ...b } = u(e, "Breadcrumb"), { id: f } = e;
+  return /* @__PURE__ */ h("nav", { "aria-label": "Breadcrumb", className: p(m, s), ...b, ...e, children: [
+    /* @__PURE__ */ r(c.Media, { lessThan: i.md, children: /* @__PURE__ */ r(
+      t,
       {
         href: a[1].href ? a[1].href : "/",
-        className: `${l}-icon-button ${l}-icon-button--primary ${t}__back-button`,
+        className: `${l}-icon-button ${l}-icon-button--primary ${m}__back-button`,
         "data-testid": `${f}-back-button`,
         children: /* @__PURE__ */ r(k, { icon: "ArrowLeft" })
       }
     ) }),
-    /* @__PURE__ */ r(c.Media, { greaterThanOrEqual: s.md, children: /* @__PURE__ */ r("ol", { children: a.map((o, m) => /* @__PURE__ */ r(
+    /* @__PURE__ */ r(c.Media, { greaterThanOrEqual: i.md, children: /* @__PURE__ */ r("ol", { children: a.map((o, n) => /* @__PURE__ */ r(
       B,
       {
         href: o.href,
         label: o.label,
-        element: n,
-        isCurrent: a.length - 1 === m,
-        isTruncateText: d === m
+        element: t,
+        isCurrent: a.length - 1 === n,
+        isTruncateText: d === n
       },
       o.label
     )) }) })
   ] });
 };
 export {
-  y as default
+  C as default
 };

package/dist/components/Breadcrumb/_breadcrumb.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.components{.seldon-breadcrumb{font-family:Montserrat,sans-serif;font-size:var(--font-size-label-medium);font-style:unset;font-variation-settings:"wght" 400;letter-spacing:0;line-height:1.2;text-transform:unset;color:#000}.seldon-breadcrumb__back-button:hover svg path{fill:#000}.seldon-breadcrumb__item{align-items:center;display:flex;flex-direction:row;flex-shrink:0}.seldon-breadcrumb__item a{margin:var(--spacing-sm);outline:none;text-decoration:none;text-wrap:nowrap}.seldon-breadcrumb__item a:hover{color:#75716f;text-decoration:none}.seldon-breadcrumb__item a:focus-visible{border-radius:4px;outline:2px solid #07c;outline-offset:4px}.seldon-breadcrumb__item span{margin:var(--spacing-sm)}.seldon-breadcrumb ol{display:flex;flex-direction:row;padding:0}.seldon-breadcrumb--truncate{flex-shrink:1;overflow:hidden}.seldon-breadcrumb--truncate a{flex-shrink:1;overflow:hidden;text-overflow:ellipsis}.seldon-breadcrumb--truncate .seldon-icon-chevron-right{flex-shrink:0}.seldon-breadcrumb--current{color:#000000bf;font-variation-settings:"wght" 700;white-space:nowrap}}

package/dist/components/Button/Button.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),V=require("../../_virtual/index2.cjs"),p=require("../../utils/index.cjs"),s=require("./types.cjs"),q=require("react"),i=require("../Link/types.cjs"),C=require("../Link/Link.cjs"),y=q.forwardRef(({variant:a=s.ButtonVariants.primary,size:c=s.ButtonSizes.default,children:d,className:k,isIconLast:m=!1,type:L="button",isDisabled:l=!1,href:n,target:$,prefetch:f="none",isSkeletonLoading:o,linkSize:v="md",...u},x)=>{const{className:t,...b}=p.getCommonProps(u,"Button"),[M,g]=q.useState(!1);if(n){const j=()=>e.jsx(e.Fragment,{children:e.jsx("link",{"data-testid":"prefetch-link",rel:"prefetch",href:n})});let r=i.LinkVariants.linkMedium;switch(v){case"lg":r=i.LinkVariants.linkLarge;break;case"md":r=i.LinkVariants.linkMedium;break;case"sm":r=i.LinkVariants.linkSmall;break}return e.jsxs(e.Fragment,{children:[e.jsx(C.default,{...b,variant:r,ref:x,href:n,className:V.default(`${t}`,{[`${t}--${a}`]:a!==s.ButtonVariants.link},{[`${t}--link`]:a===s.ButtonVariants.link},{[`${t}--icon-last`]:m},k),target:$,rel:$==="_blank"?"noopener noreferrer":void 0,onMouseOver:()=>{l||g(!0)},onClick:B=>{l?B.preventDefault():u.onClick?.(B)},children:d}),f==="intent"&&n&&M&&e.jsx(j,{}),f==="render"&&n&&e.jsx(j,{})]})}else return e.jsx("button",{...b,ref:x,type:L,"aria-busy":o,className:V.default(`${t}`,`${t}--${a}`,{[`${t}--${c}`]:c!==s.ButtonSizes.default},{[`${t}--icon-last`]:m,[`${p.px}-skeleton`]:o},k),disabled:o||l,...u,children:d})});y.displayName="Button";exports.default=y;
+require('./_button.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");;const B=require("../../_virtual/index2.cjs"),V=require("../../utils/index.cjs"),s=require("./types.cjs"),p=require("react"),i=require("../Link/types.cjs"),C=require("../Link/Link.cjs"),y=p.forwardRef(({variant:r=s.ButtonVariants.primary,size:c=s.ButtonSizes.default,children:d,className:k,isIconLast:m=!1,type:L="button",isDisabled:l=!1,href:n,target:$,prefetch:f="none",isSkeletonLoading:o,linkSize:v="md",...u},x)=>{const{className:t,...b}=V.getCommonProps(u,"Button"),[M,g]=p.useState(!1);if(n){const j=()=>e.jsx(e.Fragment,{children:e.jsx("link",{"data-testid":"prefetch-link",rel:"prefetch",href:n})});let a=i.LinkVariants.linkMedium;switch(v){case"lg":a=i.LinkVariants.linkLarge;break;case"md":a=i.LinkVariants.linkMedium;break;case"sm":a=i.LinkVariants.linkSmall;break}return e.jsxs(e.Fragment,{children:[e.jsx(C.default,{...b,variant:a,ref:x,href:n,className:B.default(`${t}`,{[`${t}--${r}`]:r!==s.ButtonVariants.link},{[`${t}--link`]:r===s.ButtonVariants.link},{[`${t}--icon-last`]:m},k),target:$,rel:$==="_blank"?"noopener noreferrer":void 0,onMouseOver:()=>{l||g(!0)},onClick:q=>{l?q.preventDefault():u.onClick?.(q)},children:d}),f==="intent"&&n&&M&&e.jsx(j,{}),f==="render"&&n&&e.jsx(j,{})]})}else return e.jsx("button",{...b,ref:x,type:L,"aria-busy":o,className:B.default(`${t}`,`${t}--${r}`,{[`${t}--${c}`]:c!==s.ButtonSizes.default},{[`${t}--icon-last`]:m,[`${V.px}-skeleton`]:o},k),disabled:o||l,...u,children:d})});y.displayName="Button";exports.default=y;

package/dist/components/Button/Button.js

@@ -1,4 +1,6 @@
+import './_button.css';
 import { jsxs as V, Fragment as C, jsx as t } from "react/jsx-runtime";
+
 import N from "../../_virtual/index2.js";
 import { getCommonProps as j, px as w } from "../../utils/index.js";
 import { ButtonVariants as m, ButtonSizes as v } from "./types.js";

package/dist/components/Button/_button.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.components{.seldon-button{align-items:center;background-color:#000;border:2px solid transparent;border-radius:4px;color:#fff;cursor:pointer;display:inline-flex;gap:var(--spacing-xsm);height:44px;justify-content:center;padding:0 var(--spacing-sm);position:relative;transition:color .25s ease-out,background-color .25s ease-out,border-color .25s ease-out,box-shadow .25s ease-out}.seldon-button--small{height:32px;max-width:160px;min-width:72px;padding:0 var(--spacing-sm)}.seldon-button--small svg{height:calc(var(--font-size-label-small) * 1.1);width:calc(var(--font-size-label-small) * 1.1)}@media(min-width:961px){.seldon-button--small svg{height:calc(var(--font-size-label-small) * 1.2);width:calc(var(--font-size-label-small) * 1.2)}}.seldon-button svg{fill:#fff;height:calc(var(--font-size-label-small) * 1.3);width:calc(var(--font-size-label-small) * 1.3)}@media(min-width:961px){.seldon-button svg{height:calc(var(--font-size-label-small) * 1.4);width:calc(var(--font-size-label-small) * 1.4)}}.seldon-button svg path{fill:#fff;transition:fill .25s ease-out}.seldon-button:not(.seldon-link):not(.seldon-button--link){font-family:Montserrat,sans-serif;font-size:var(--font-size-label-medium);font-style:unset;font-variation-settings:"wght" 400;letter-spacing:0;line-height:1.2;text-transform:unset;font-variation-settings:"wght" 600}.seldon-button--primary.seldon-link,.seldon-button--secondary.seldon-link,.seldon-button--tertiary.seldon-link,.seldon-button--destructive.seldon-link{text-decoration:none}.seldon-button--primary.seldon-link:not(.seldon-icon-button),.seldon-button--secondary.seldon-link:not(.seldon-icon-button),.seldon-button--destructive.seldon-link:not(.seldon-icon-button){font-variation-settings:"wght" 600}.seldon-button--primary.seldon-link:not(.seldon-icon-button) .seldon-text,.seldon-button--secondary.seldon-link:not(.seldon-icon-button) .seldon-text,.seldon-button--destructive.seldon-link:not(.seldon-icon-button) .seldon-text{font-variation-settings:"wght" 600}.seldon-button--destructive.seldon-link{color:#ea0404}.seldon-button:not(.seldon-button--link).seldon-button--primary{color:#fff}.seldon-button:not(.seldon-button--link) .seldon-text{color:inherit;font-variation-settings:inherit}@media(pointer:fine)and (hover:hover){.seldon-button:hover{background-color:#75716f}.seldon-button:hover svg{fill:#fff}}@media(pointer:coarse){.seldon-button:active{background-color:#75716f}.seldon-button:active svg{fill:#fff}}.seldon-button:focus-visible{border-radius:4px;outline:2px solid #07c;outline-offset:4px}.seldon-button:focus-visible svg{fill:#fff}.seldon-button--link{font-family:Montserrat,sans-serif;font-size:var(--font-size-label-medium);font-style:unset;letter-spacing:0;line-height:1.2;text-transform:unset;background-color:transparent;border:0;color:#000;font-variation-settings:"wght" 400;height:auto;padding:0;text-decoration:underline}.seldon-button--link .seldon-text{font-variation-settings:"wght" 400}.seldon-button--link:focus-visible{border-radius:4px;outline:2px solid #07c;outline-offset:4px}.seldon-button--link:hover{background-color:transparent;color:#000}.seldon-button--link:hover .seldon-text{cursor:pointer}.seldon-button--secondary{background-color:#fff;border:2px solid #000;color:#000;transition:border .3s ease-out;z-index:0}.seldon-button--secondary:before{border-radius:4px;box-sizing:border-box;content:"";display:inline-block;height:0;left:50%;position:absolute;top:50%;transition:all .25s ease;width:0;z-index:-2}.seldon-button--secondary:focus-visible{border-radius:4px;outline:2px solid #07c;outline-offset:4px;background-color:#fff}.seldon-button--secondary svg{fill:#000}.seldon-button--secondary svg path{fill:#000}.seldon-button--secondary{transition:box-shadow .25s}@media(pointer:fine)and (hover:hover){.seldon-button--secondary:hover{background-color:transparent;box-shadow:0 0 0 1px #000}.seldon-button--secondary:hover:disabled{box-shadow:none}}@media(pointer:coarse){.seldon-button--secondary:active{background-color:transparent;box-shadow:0 0 0 1px #000}.seldon-button--secondary:active:disabled{box-shadow:none}}.seldon-button--destructive{background-color:#fff;border:2px solid #ea0404;color:#ea0404}.seldon-button--destructive:focus-visible{background-color:#fff;border-radius:4px;outline:2px solid #ea0404;outline-offset:4px}.seldon-button--destructive .seldon-loader{border-color:#ea0404;border-bottom-color:transparent}.seldon-button--destructive svg{fill:#ea0404}.seldon-button--destructive svg path{fill:#ea0404}@media(pointer:fine)and (hover:hover){.seldon-button--destructive:hover{background-color:#fff;border-color:#ea040480;color:#ea040480}.seldon-button--destructive:hover svg{fill:#ea040480}.seldon-button--destructive:hover svg path{fill:#ea040480}.seldon-button--destructive:hover:disabled{box-shadow:none}}@media(pointer:coarse){.seldon-button--destructive:active{background-color:#fff;border-color:#ea040480;color:#ea040480}.seldon-button--destructive:active svg{fill:#ea040480}.seldon-button--destructive:active svg path{fill:#ea040480}.seldon-button--destructive:active:disabled{box-shadow:none}}.seldon-button--tertiary{background-color:transparent;color:#000}.seldon-button--tertiary svg{fill:#000}.seldon-button--tertiary svg path{fill:#000}@media(pointer:fine)and (hover:hover){.seldon-button--tertiary:hover{background-color:transparent;color:#75716f}.seldon-button--tertiary:hover svg{fill:#75716f}.seldon-button--tertiary:hover svg path{fill:#75716f}}@media(pointer:coarse){.seldon-button--tertiary:active{background-color:transparent;color:#75716f}.seldon-button--tertiary:active svg{fill:#75716f}.seldon-button--tertiary:active svg path{fill:#75716f}}.seldon-button--tertiary:focus-visible{border-radius:4px;outline:2px solid #07c;outline-offset:4px;background-color:#fff}.seldon-button:disabled{background-color:#eae9e6;border:2px solid #eae9e6;color:#75716f;cursor:default}.seldon-button:disabled:hover:before{all:unset}.seldon-button:disabled svg{fill:#75716f}.seldon-button:disabled svg path{fill:#75716f}.seldon-button--tertiary:disabled{background-color:transparent;border-color:transparent}.seldon-button--destructive:disabled{background-color:#fff;border-color:#ea040480;color:#ea040480}.seldon-button--destructive:disabled svg{fill:#ea040480}.seldon-button--destructive:disabled svg path{fill:#ea040480}.seldon-button--link:disabled{border:0}.seldon-button *{margin:0}.seldon-button__group{display:flex;gap:.25rem;justify-content:center;width:100%}}

package/dist/components/Card/Card.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),l=require("../../_virtual/index2.cjs"),s=require("react"),d=require("../../utils/index.cjs"),q=require("./types.cjs"),V=require("../Link/Link.cjs"),v=require("../Link/types.cjs"),i=require("../Text/Text.cjs"),n=require("../Text/types.cjs"),T=require("../Video/Video.cjs"),S=require("../SeldonImage/SeldonImage.cjs"),M=require("../SeldonImage/types.cjs"),c=s.forwardRef(({element:e="div",className:t,id:a,variant:o=q.CardVariants.default,...m},w)=>{const{className:f,...j}=d.getCommonProps({id:a,...m},"Card"),b=l.default(f,t,{[`${f}--${o}`]:o});return r.jsx(e,{className:b,id:a,ref:w,...j,...m})}),u=s.forwardRef(({aspectRatio:e=M.AspectRatio.Landscape,...t},a)=>r.jsx(S.default,{...t,aspectRatio:e,className:`${d.px}-card__image`,ref:a})),C=s.forwardRef(({aspectRatio:e=16/9,className:t,...a},o)=>r.jsx(T.default,{...a,ref:o,aspectRatio:e,className:l.default(`${d.px}-card__video`,t)})),p=s.forwardRef(({className:e,...t},a)=>r.jsx("div",{...t,className:l.default(`${d.px}-card__details`,e),ref:a})),x=s.forwardRef(({className:e,...t},a)=>r.jsx(i.default,{...t,className:l.default(`${d.px}-card__eyebrow`,e),ref:a,variant:n.TextVariants.labelSmall})),N=s.forwardRef(({className:e,...t},a)=>r.jsx(i.default,{...t,className:l.default(`${d.px}-card__title`,e),ref:a,variant:n.TextVariants.headingSmall})),_=s.forwardRef(({className:e,...t},a)=>r.jsx(i.default,{...t,className:l.default(`${d.px}-card__description`,e),ref:a,variant:n.TextVariants.bodySmall})),y=s.forwardRef(({className:e,...t},a)=>r.jsx(i.default,{...t,className:l.default(`${d.px}-card__badge`,e),ref:a,variant:n.TextVariants.badgeSmall})),R=s.forwardRef(({className:e,...t},a)=>r.jsx("div",{...t,className:l.default(`${d.px}-card__meta`,e),ref:a})),$=s.forwardRef(({className:e,...t},a)=>r.jsx(i.default,{...t,className:l.default(`${d.px}-card__meta-item`,e),ref:a,variant:n.TextVariants.labelSmall})),g=s.forwardRef(({className:e,variant:t=v.LinkVariants.linkSmall,...a},o)=>r.jsx(V.default,{...a,ref:o,className:l.default(`${d.px}-card__cta`,e),variant:t}));c.displayName="Card.Root";u.displayName="Card.Image";C.displayName="Card.Video";p.displayName="Card.Content";x.displayName="Card.Eyebrow";N.displayName="Card.Title";_.displayName="Card.Description";y.displayName="Card.Badge";R.displayName="Card.Meta";$.displayName="Card.MetaItem";g.displayName="Card.Cta";const I=Object.assign(c,{Root:c,Image:u,Video:C,Content:p,Eyebrow:x,Title:N,Description:_,Badge:y,Meta:R,MetaItem:$,Cta:g});exports.default=I;
+require('./_card.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),l=require("../../_virtual/index2.cjs"),s=require("react"),d=require("../../utils/index.cjs"),q=require("./types.cjs");;const V=require("../Link/Link.cjs"),v=require("../Link/types.cjs"),i=require("../Text/Text.cjs"),n=require("../Text/types.cjs"),T=require("../Video/Video.cjs"),S=require("../SeldonImage/SeldonImage.cjs"),M=require("../SeldonImage/types.cjs"),c=s.forwardRef(({element:e="div",className:t,id:a,variant:o=q.CardVariants.default,...m},w)=>{const{className:f,...j}=d.getCommonProps({id:a,...m},"Card"),b=l.default(f,t,{[`${f}--${o}`]:o});return r.jsx(e,{className:b,id:a,ref:w,...j,...m})}),u=s.forwardRef(({aspectRatio:e=M.AspectRatio.Landscape,...t},a)=>r.jsx(S.default,{...t,aspectRatio:e,className:`${d.px}-card__image`,ref:a})),C=s.forwardRef(({aspectRatio:e=16/9,className:t,...a},o)=>r.jsx(T.default,{...a,ref:o,aspectRatio:e,className:l.default(`${d.px}-card__video`,t)})),p=s.forwardRef(({className:e,...t},a)=>r.jsx("div",{...t,className:l.default(`${d.px}-card__details`,e),ref:a})),x=s.forwardRef(({className:e,...t},a)=>r.jsx(i.default,{...t,className:l.default(`${d.px}-card__eyebrow`,e),ref:a,variant:n.TextVariants.labelSmall})),N=s.forwardRef(({className:e,...t},a)=>r.jsx(i.default,{...t,className:l.default(`${d.px}-card__title`,e),ref:a,variant:n.TextVariants.headingSmall})),_=s.forwardRef(({className:e,...t},a)=>r.jsx(i.default,{...t,className:l.default(`${d.px}-card__description`,e),ref:a,variant:n.TextVariants.bodySmall})),y=s.forwardRef(({className:e,...t},a)=>r.jsx(i.default,{...t,className:l.default(`${d.px}-card__badge`,e),ref:a,variant:n.TextVariants.badgeSmall})),R=s.forwardRef(({className:e,...t},a)=>r.jsx("div",{...t,className:l.default(`${d.px}-card__meta`,e),ref:a})),$=s.forwardRef(({className:e,...t},a)=>r.jsx(i.default,{...t,className:l.default(`${d.px}-card__meta-item`,e),ref:a,variant:n.TextVariants.labelSmall})),g=s.forwardRef(({className:e,variant:t=v.LinkVariants.linkSmall,...a},o)=>r.jsx(V.default,{...a,ref:o,className:l.default(`${d.px}-card__cta`,e),variant:t}));c.displayName="Card.Root";u.displayName="Card.Image";C.displayName="Card.Video";p.displayName="Card.Content";x.displayName="Card.Eyebrow";N.displayName="Card.Title";_.displayName="Card.Description";y.displayName="Card.Badge";R.displayName="Card.Meta";$.displayName="Card.MetaItem";g.displayName="Card.Cta";const I=Object.assign(c,{Root:c,Image:u,Video:C,Content:p,Eyebrow:x,Title:N,Description:_,Badge:y,Meta:R,MetaItem:$,Cta:g});exports.default=I;

package/dist/components/Card/Card.js

@@ -1,8 +1,10 @@
+import './_card.css';
 import { jsx as t } from "react/jsx-runtime";
 import m from "../../_virtual/index2.js";
 import { forwardRef as s } from "react";
 import { getCommonProps as w, px as o } from "../../utils/index.js";
 import { CardVariants as x } from "./types.js";
+
 import R from "../Link/Link.js";
 import { LinkVariants as T } from "../Link/types.js";
 import i from "../Text/Text.js";
@@ -65,7 +67,7 @@ $.displayName = "Card.Badge";
 b.displayName = "Card.Meta";
 v.displayName = "Card.MetaItem";
 I.displayName = "Card.Cta";
-const H = Object.assign(c, {
+const J = Object.assign(c, {
   Root: c,
   Image: p,
   Video: N,
@@ -79,5 +81,5 @@ const H = Object.assign(c, {
   Cta: I
 });
 export {
-  H as default
+  J as default
 };

package/dist/components/Card/_card.css

@@ -0,0 +1 @@
+@layer vendor,seldon.foundation,seldon.components,seldon.patterns,seldon.site;@layer seldon.components{.seldon-card{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-md)}@media(min-width:768px){.seldon-card{flex-direction:row}}.seldon-card--stacked{align-items:flex-start;flex-direction:column}.seldon-card--stacked .seldon-card__image,.seldon-card--stacked .seldon-card__video{flex:1 1 100%;min-width:100%}.seldon-card--stacked .seldon-card__details{align-self:stretch}.seldon-card__image,.seldon-card__video{align-items:center;border-radius:4px;display:flex;flex:none;justify-content:center;min-width:0;width:100%}@media(min-width:768px){.seldon-card__image,.seldon-card__video{flex:0 0 30%;min-width:auto;width:auto}}.seldon-card__image img{height:auto;object-fit:cover;width:100%}.seldon-card__video{width:100%}.seldon-card__details{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;gap:var(--spacing-micro)}@media(max-width:767px){.seldon-card__details{align-self:stretch}}.seldon-card__title.seldon-text{text-transform:uppercase}.seldon-card__title a{color:inherit;text-decoration:none}.seldon-card__title a:hover,.seldon-card__title a:focus-visible{color:inherit;text-decoration:underline}.seldon-card__cta{align-self:flex-start}.seldon-card__description.seldon-text{color:#000}.seldon-card__badge{border:1px solid #0065fc;color:#0065fc;padding:var(--spacing-micro) 8px;text-transform:unset}.seldon-card__meta{display:flex;flex-direction:column;gap:var(--spacing-micro)}.seldon-card__meta-item.seldon-text{color:#545454}}

package/dist/components/Carousel/Carousel.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react/jsx-runtime"),t=require("react"),K=require("../../utils/index.cjs"),L=require("../../_virtual/index2.cjs"),W=require("../../node_modules/embla-carousel-autoplay/esm/embla-carousel-autoplay.esm.cjs"),B=require("../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.cjs"),F=require("../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.cjs"),G=require("../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.cjs"),T=require("../../utils/useReducedMotion.cjs"),C=t.createContext(null),v=t.forwardRef(({element:w,loop:b=!1,startIndex:N=0,onSlideChange:n,className:g,children:h,columnGap:k,useWheelGestures:f=!1,disableDrag:d=!1,disableNavigationDrag:P=null,inViewThreshold:S=.99,autoAdvanceDelay:a,duration:q,...m},E)=>{const c=w||"div",p=c==="ul"||c==="ol",{className:I,...R}=K.getCommonProps(m,"Carousel");let l={};switch(P){case"mobile":l={breakpoints:{"(max-width: 960px)":{watchDrag:!1}}};break;case"desktop":l={breakpoints:{"(min-width: 961px)":{watchDrag:!1}}};break;case"all":l={watchDrag:!1};break;default:l={}}const[y,D]=t.useState(!1),[M,_]=t.useState(!1),A=T.useReducedMotion(),r=!!a&&!A,j=t.useMemo(()=>[...r?[W.default({delay:a,stopOnInteraction:!1,stopOnMouseEnter:!0,stopOnFocusIn:!0})]:[],...f?[G.WheelGesturesPlugin({forceWheelAxis:"x"})]:[],B.default({snapped:"carousel-item-in-view"})],[r,a,f]),[O,e]=F.default({loop:b,startIndex:N,inViewThreshold:S,duration:q,...l},j);t.useEffect(()=>{d?e?.reInit({watchDrag:()=>!1}):e?.reInit({watchDrag:()=>!0})},[d,e]);const V=t.useCallback(s=>{if(s.key==="ArrowLeft"){s.preventDefault(),e?.scrollPrev();const o=e?.slideNodes().filter(u=>u===document.activeElement)[0]?.previousElementSibling;o&&o?.focus()}else if(s.key==="ArrowRight"){s.preventDefault(),e?.scrollNext();const o=e?.slideNodes().filter(u=>u===document.activeElement)[0]?.nextElementSibling;o&&o?.focus()}},[e]),i=t.useCallback(s=>{if(!s)return;D(s?.canScrollPrev()),_(s?.canScrollNext());const o=s.slidesInView()?.[0];o!==void 0&&n?.(o)},[n]);return t.useEffect(()=>{if(e)return e.on("slidesInView",i),()=>{e.off("slidesInView",i)}},[e,i]),t.useEffect(()=>{if(!e||!r)return;const s=()=>e.plugins().autoplay?.reset();return e.on("select",s),()=>{e.off("select",s)}},[e,r]),x.jsx(C.Provider,{value:{carouselRef:O,api:e,scrollPrev:()=>e?.scrollPrev(),scrollNext:()=>e?.scrollNext(),canScrollPrev:y,canScrollNext:M,columnGap:k,onSlideChange:n},children:x.jsx(c,{ref:E,onKeyDownCapture:V,className:L.default(I,g),role:p?void 0:"region","aria-roledescription":p?void 0:"carousel",...m,...R,children:h})})});v.displayName="Carousel";exports.CarouselContext=C;exports.default=v;
+require('./_carousel.css');
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react/jsx-runtime"),s=require("react"),L=require("../../utils/index.cjs"),W=require("../../_virtual/index2.cjs"),B=require("../../node_modules/embla-carousel-autoplay/esm/embla-carousel-autoplay.esm.cjs"),F=require("../../node_modules/embla-carousel-class-names/esm/embla-carousel-class-names.esm.cjs"),G=require("../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.cjs"),T=require("../../node_modules/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.esm.cjs");;const $=require("../../utils/useReducedMotion.cjs"),C=s.createContext(null),v=s.forwardRef(({element:N,loop:b=!1,startIndex:g=0,onSlideChange:n,className:w,children:S,columnGap:h,useWheelGestures:f=!1,disableDrag:d=!1,disableNavigationDrag:k=null,inViewThreshold:P=.99,autoAdvanceDelay:c,duration:q,...m},E)=>{const u=N||"div",p=u==="ul"||u==="ol",{className:R,...y}=L.getCommonProps(m,"Carousel");let o={};switch(k){case"mobile":o={breakpoints:{"(max-width: 960px)":{watchDrag:!1}}};break;case"desktop":o={breakpoints:{"(min-width: 961px)":{watchDrag:!1}}};break;case"all":o={watchDrag:!1};break;default:o={}}const[D,M]=s.useState(!1),[I,_]=s.useState(!1),j=$.useReducedMotion(),a=!!c&&!j,O=s.useMemo(()=>[...a?[B.default({delay:c,stopOnInteraction:!1,stopOnMouseEnter:!0,stopOnFocusIn:!0})]:[],...f?[T.WheelGesturesPlugin({forceWheelAxis:"x"})]:[],F.default({snapped:"carousel-item-in-view"})],[a,c,f]),[A,e]=G.default({loop:b,startIndex:g,inViewThreshold:P,duration:q,...o},O);s.useEffect(()=>{d?e?.reInit({watchDrag:()=>!1}):e?.reInit({watchDrag:()=>!0})},[d,e]);const K=s.useCallback(t=>{if(t.key==="ArrowLeft"){t.preventDefault(),e?.scrollPrev();const l=e?.slideNodes().filter(i=>i===document.activeElement)[0]?.previousElementSibling;l&&l?.focus()}else if(t.key==="ArrowRight"){t.preventDefault(),e?.scrollNext();const l=e?.slideNodes().filter(i=>i===document.activeElement)[0]?.nextElementSibling;l&&l?.focus()}},[e]),r=s.useCallback(t=>{t&&(M(t.canScrollPrev()),_(t.canScrollNext()),n?.(t.selectedScrollSnap()))},[n]);return s.useEffect(()=>{if(e)return r(e),e.on("select",r),e.on("reInit",r),()=>{e.off("select",r),e.off("reInit",r)}},[e,r]),s.useEffect(()=>{if(!e||!a)return;const t=()=>e.plugins().autoplay?.reset();return e.on("select",t),()=>{e.off("select",t)}},[e,a]),x.jsx(C.Provider,{value:{carouselRef:A,api:e,scrollPrev:()=>e?.scrollPrev(),scrollNext:()=>e?.scrollNext(),canScrollPrev:D,canScrollNext:I,columnGap:h,onSlideChange:n},children:x.jsx(u,{ref:E,onKeyDownCapture:K,className:W.default(R,w),role:p?void 0:"region","aria-roledescription":p?void 0:"carousel",...m,...y,children:S})})});v.displayName="Carousel";exports.CarouselContext=C;exports.default=v;