@smartyweb/ui 2.0.0 → 2.2.0-max-storefront-handoff.g63afc43

package/README.md

@@ -59,13 +59,14 @@ If a variable is not set, components fall back to `system-ui` (headings/body) or
 
 <!-- When you add or remove a skill, update this catalog. -->
 
-| Skill              | What it does                                                                           |
-| ------------------ | -------------------------------------------------------------------------------------- |
-| `/new-component`   | Build a component from a Figma design — tokens, conventions, four files, gates.        |
-| `/validate-tokens` | Validate a Tokens Studio sync end-to-end — drift, math, Figma source-of-truth.         |
-| `/version-up`      | Cut a new version with changesets (bump, changelog, release prep).                     |
-| `/commit-push`     | Commit and push all changes with a summary commit message.                             |
-| `/link-ui`         | Live-link local `@smartyweb/ui` into storefront-2 so edits show up without publishing. |
+| Skill                | What it does                                                                                            |
+| -------------------- | ------------------------------------------------------------------------------------------------------- |
+| `/new-component`     | Build or align a component from its live Figma node — bindings, fidelity table, gates, measured report. |
+| `/validate-tokens`   | Check the library still mirrors Figma — recapture every component's bindings, run the mirror, repair.   |
+| `/version-up`        | Cut a new version with changesets (bump, changelog, release prep).                                      |
+| `/commit-push`       | Commit and push all changes with a summary commit message.                                              |
+| `/link-ui`           | Live-link local `@smartyweb/ui` into storefront-2 so edits show up without publishing.                  |
+| `/use-in-storefront` | Carry a component into a storefront-2 page — install, place, gates, preview.                            |
 
 Local commands, for the times you do need to run something by hand:
 

package/dist/forms/MultitagField/Chip.d.ts

@@ -0,0 +1,8 @@
+interface ChipProps {
+    children: string;
+    invalid: boolean;
+    /** Undefined, the chip has no remove button — Figma's disabled chip. */
+    onRemove: (() => void) | undefined;
+}
+export declare function Chip({ children, invalid, onRemove }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/MultitagField/CloseIcon.d.ts

@@ -0,0 +1 @@
+export declare function CloseIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/forms/MultitagField/MultitagField.d.ts

@@ -0,0 +1,13 @@
+export interface MultitagFieldProps {
+    label: string;
+    value: string[];
+    onChange: (tags: string[]) => void;
+    disabled?: boolean;
+    /** Tags it returns true for render as Figma's negative chip. */
+    isTagInvalid?: (tag: string, index: number) => boolean;
+    /** The text typed but not yet a tag. */
+    onInputChange?: (text: string) => void;
+    /** Figma's Error + Helper Text: the error stroke, and this message below the field. */
+    error?: string;
+}
+export declare function MultitagField({ label, value, onChange, disabled, isTagInvalid, onInputChange, error, }: MultitagFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/MultitagField/index.d.ts

@@ -0,0 +1,2 @@
+export { MultitagField } from './MultitagField';
+export type { MultitagFieldProps } from './MultitagField';

package/dist/forms/index.d.ts

@@ -0,0 +1 @@
+export * from './MultitagField';

package/dist/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),g="_h1_1765w_1",N={h1:g};function y({children:s,className:n}){const r=[N.h1,n].filter(Boolean).join(" ");return t.jsx("h1",{className:r,children:s})}const f="_h2_3zke8_1",b={h2:f};function v({children:s}){return t.jsx("h2",{className:b.h2,children:s})}const B="_paragraph_11t85_1",L={paragraph:B};function k({children:s}){return t.jsx("p",{className:L.paragraph,children:s})}const H="_list_1p627_1",$="_item_1p627_14",j={list:H,item:$};function W({children:s}){return t.jsx("ul",{role:"list",className:j.list,children:s})}function A({children:s}){return t.jsx("li",{className:j.item,children:s})}const I="_button_bko6s_1",P="_sm_bko6s_26",C="_primary_bko6s_33",M="_secondary_bko6s_49",S="_negative_bko6s_68",h={button:I,sm:P,primary:C,secondary:M,negative:S};function U({as:s="button",variant:n="primary",size:r="default",href:l,openInNewTab:i,disabled:c,type:_,onClick:m,children:d}){const o=[h.button,h[n],r==="sm"&&h.sm].filter(Boolean).join(" ");return t.jsx(s,{className:o,href:l,target:i?"_blank":void 0,rel:i?"noopener noreferrer":void 0,disabled:c,type:_,onClick:m,children:d})}const q="_hero_hos23_11",w="_layout_hos23_16",z="_content_hos23_21",O="_titleLine_hos23_25",R="_titleWord_hos23_29",D="_description_hos23_35",E="_actions_hos23_48",F="_action_hos23_48",G="_media_hos23_65",J="_layoutBare_hos23_79",e={hero:q,layout:w,content:z,titleLine:O,titleWord:R,description:D,actions:E,action:F,media:G,layoutBare:J};function K(s){return s.replace(/([- ])/g,n=>`${n===" "?" ":n}|split|`).split("|split|")}const p=s=>({"--hero-index":s});function Q({title:s,description:n,media:r,actions:l}){const i=Array.isArray(s),c=l??[];let _=0;const m=(i?s:[s]).map(a=>K(a).map(o=>({word:o,index:_++}))),d=[e.layout,c.length===0&&e.layoutBare].filter(Boolean).join(" ");return t.jsx("section",{className:e.hero,children:t.jsxs("div",{className:d,children:[t.jsx("div",{className:e.media,children:r}),t.jsxs("div",{className:e.content,children:[t.jsx(y,{children:m.map((a,o)=>t.jsx("span",{className:i?e.titleLine:void 0,children:a.map(({word:x,index:u})=>t.jsx("span",{className:e.titleWord,style:p(u),children:x},u))},o))}),t.jsx("p",{className:e.description,children:n}),c.length>0&&t.jsx("div",{className:e.actions,children:c.map((a,o)=>t.jsx("div",{className:e.action,style:p(o),children:a},o))})]})]})})}exports.Button=U;exports.H1=y;exports.H2=v;exports.Hero=Q;exports.ListItem=A;exports.Paragraph=k;exports.UnorderedList=W;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),P="_h1_1765w_1",R={h1:P};function k({children:e,className:n}){const s=[R.h1,n].filter(Boolean).join(" ");return t.jsx("h1",{className:s,children:e})}const T="_h2_1eque_1",U={h2:T};function F({children:e}){return t.jsx("h2",{className:U.h2,children:e})}const V="_paragraph_11t85_1",K={paragraph:V};function z({children:e}){return t.jsx("p",{className:K.paragraph,children:e})}const S=typeof process<"u"&&process.env.NODE_ENV!=="production",w=new Set;function g(e){w.has(e)||(w.add(e),console.warn(`[@smartyweb/ui] ${e}`))}function G(e){if(typeof e=="string")return`<${e}>`;if(typeof e=="function")return`<${e.name||"Component"}>`;if(typeof e=="object"&&e!==null&&"displayName"in e){const{displayName:n}=e;if(typeof n=="string")return`<${n}>`}return"an unknown element"}function C(e,n){for(const s of c.Children.toArray(e)){if(!c.isValidElement(s)){if(typeof s!="string"&&typeof s!="number")continue;const r=String(s).trim();if(r==="")continue;g(`<UnorderedList> received the text ${JSON.stringify(r.slice(0,40))} as a direct child. A <ul> may only contain list items — wrap it in <ListItem>.`);continue}if(s.type===c.Fragment){const{children:r}=s.props;C(r,n);continue}n(s.type)||s.type==="li"||g(`<UnorderedList> received ${G(s.type)} as a direct child. A <ul> may only contain list items — wrap it in <ListItem>.`)}}function J(){g("<ListItem> was rendered outside of an <UnorderedList>. It renders an <li>, which browsers only style correctly inside a list.")}const X="_list_1p627_1",Z="_item_1p627_14",D={list:X,item:Z},I=c.createContext(!1);function L({children:e}){const n=c.useContext(I);return S&&!n&&J(),t.jsx("li",{className:D.item,children:e})}L.isSmartyListItem=!0;function Q(e){return e===L?!0:typeof e=="function"&&e.isSmartyListItem===!0}function Y({children:e}){return S&&C(e,Q),t.jsx(I,{value:!0,children:t.jsx("ul",{role:"list",className:D.list,children:e})})}const ee="_button_81qo0_1",te="_sm_81qo0_26",ne="_primary_81qo0_33",se="_secondary_81qo0_49",ie="_negative_81qo0_68",j={button:ee,sm:te,primary:ne,secondary:se,negative:ie};function re({as:e="button",variant:n="primary",size:s="default",href:r,openInNewTab:d,disabled:m,type:a,onClick:l,children:u}){const f=[j.button,j[n],s==="sm"&&j.sm].filter(Boolean).join(" ");return t.jsx(e,{className:f,href:r,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0,disabled:m,type:a,onClick:l,children:u})}const oe=typeof process<"u"&&process.env.NODE_ENV!=="production",$=new Set;function ae(e){$.has(e)||($.add(e),console.warn(`[@smartyweb/ui] ${e}`))}function le(){ae("<SideNav> was rendered with no accessible name. Pass `label` so screen reader users can tell this nav apart from the other navigation landmarks on the page.")}const ce="_nav_dxkjl_3",de="_list_dxkjl_7",ue="_item_dxkjl_16",me="_link_dxkjl_20",_e="_current_dxkjl_48",x={nav:ce,list:de,item:ue,link:me,current:_e},O=c.createContext(null);function pe({label:e,current:n,children:s}){return oe&&!e?.trim()&&le(),t.jsx("nav",{className:x.nav,"aria-label":e,children:t.jsx(O,{value:n??null,children:t.jsx("ul",{className:x.list,children:s})})})}function fe({as:e="a",href:n,current:s,openInNewTab:r,onClick:d,children:m}){const a=c.useContext(O),l=s??(a!==null&&a===n),u=[x.link,l&&x.current].filter(Boolean).join(" ");return t.jsx("li",{className:x.item,children:t.jsx(e,{className:u,href:n,target:r?"_blank":void 0,rel:r?"noopener noreferrer":void 0,onClick:d,"aria-current":l?"location":void 0,children:m})})}const he="_hero_93692_11",xe="_layout_93692_16",ye="_content_93692_21",ve="_titleLine_93692_25",je="_titleWord_93692_29",Ne="_description_93692_35",ge="_media_93692_48",p={hero:he,layout:xe,content:ye,titleLine:ve,titleWord:je,description:Ne,media:ge};function Le(e){return e.replace(/([- ])/g,n=>`${n===" "?" ":n}|split|`).split("|split|")}const be=e=>({"--hero-index":e});function we({title:e,description:n,media:s}){const r=Array.isArray(e);let d=0;const m=(r?e:[e]).map(a=>Le(a).map(l=>({word:l,index:d++})));return t.jsx("section",{className:p.hero,children:t.jsxs("div",{className:p.layout,children:[t.jsx("div",{className:p.media,children:s}),t.jsxs("div",{className:p.content,children:[t.jsx(k,{children:m.map((a,l)=>t.jsx("span",{className:r?p.titleLine:void 0,children:a.map(({word:u,index:_})=>t.jsx("span",{className:p.titleWord,style:be(_),children:u},_))},l))}),t.jsx("p",{className:p.description,children:n})]})]})})}function $e(){return t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:t.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6.58586 8L1.29297 2.70711L2.70718 1.29289L8.00008 6.58579L13.293 1.29289L14.7072 2.70711L9.41429 8L14.7072 13.2929L13.293 14.7071L8.00008 9.41421L2.70718 14.7071L1.29297 13.2929L6.58586 8Z",fill:"currentColor"})})}const ke="_field_1l94m_17",Se="_error_1l94m_33",Ce="_message_1l94m_38",De="_content_1l94m_54",Ie="_reveal_1l94m_61",Oe="_label_1l94m_71",Be="_tags_1l94m_82",Me="_input_1l94m_89",qe="_counter_1l94m_106",Ae="_empty_1l94m_118",He="_disabled_1l94m_145",We="_chip_1l94m_150",Ee="_chipText_1l94m_173",Pe="_remove_1l94m_178",Re="_invalid_1l94m_189",o={field:ke,error:Se,message:Ce,content:De,reveal:Ie,label:Oe,tags:Be,input:Me,counter:qe,empty:Ae,disabled:He,chip:We,chipText:Ee,remove:Pe,invalid:Re};function Te({children:e,invalid:n,onRemove:s}){return t.jsxs("span",{className:[o.chip,n&&o.invalid].filter(Boolean).join(" "),children:[t.jsx("span",{className:o.chipText,children:e}),s&&t.jsx("button",{type:"button",className:o.remove,"aria-label":`Remove ${e}`,onClick:s,children:t.jsx($e,{})})]})}const N=100;function Ue({label:e,value:n,onChange:s,disabled:r=!1,isTagInvalid:d,onInputChange:m,error:a}){const l=c.useId(),u=`${l}-message`,_=c.useRef(null),[f,B]=c.useState(""),M=n.length>=N,b=i=>{B(i),m?.(i)},y=i=>{const h=N-n.length,v=i.filter(Boolean).slice(0,h);v.length&&s([...n,...v]),b("")},q=i=>{["Enter",","," "].includes(i.key)?(i.preventDefault(),y([f.trim()])):i.key==="Backspace"&&!f&&n.length&&s(n.slice(0,-1))},A=i=>{i.preventDefault(),y(i.clipboardData.getData("text").split(/[\s,]+/))},H=i=>{r||i.target===_.current||i.target.closest("button")||(i.preventDefault(),_.current?.focus())},W=[o.field,!n.length&&o.empty,r&&o.disabled,a&&o.error].filter(Boolean).join(" ");return t.jsxs("div",{children:[t.jsxs("div",{className:W,onMouseDown:H,children:[t.jsxs("div",{className:o.content,children:[t.jsx("label",{htmlFor:l,className:o.label,children:e}),t.jsx("div",{className:o.reveal,children:t.jsxs("div",{className:o.tags,children:[n.map((i,h)=>t.jsx(Te,{invalid:d?.(i,h)??!1,onRemove:r?void 0:()=>{s(n.filter((v,E)=>E!==h))},children:i},h)),t.jsx("input",{ref:_,id:l,className:o.input,size:1,value:f,disabled:r,readOnly:M,"aria-invalid":a?!0:void 0,"aria-describedby":a?u:void 0,onChange:i=>{b(i.target.value)},onKeyDown:q,onPaste:A,onBlur:()=>{y([f.trim()])}})]})})]}),t.jsx("div",{className:o.reveal,children:t.jsxs("p",{className:o.counter,children:[n.length," / ",N]})})]}),t.jsx("p",{id:u,className:o.message,"aria-live":"polite",children:a})]})}exports.Button=re;exports.H1=k;exports.H2=F;exports.Hero=we;exports.ListItem=L;exports.MultitagField=Ue;exports.Paragraph=z;exports.SideNav=pe;exports.SideNavLink=fe;exports.UnorderedList=Y;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export * from './text';
 export * from './buttons';
+export * from './navigation';
 export * from './sections';
+export * from './forms';

package/dist/index.js

@@ -1,104 +1,308 @@
 "use client";
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
-const g = "_h1_1765w_1", v = {
-  h1: g
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { Children as T, isValidElement as U, Fragment as F, createContext as k, useContext as j, useId as P, useRef as V, useState as K } from "react";
+const z = "_h1_1765w_1", G = {
+  h1: z
 };
-function b({ children: t, className: e }) {
-  const c = [v.h1, e].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("h1", { className: c, children: t });
+function J({ children: e, className: t }) {
+  const s = [G.h1, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("h1", { className: s, children: e });
 }
-const B = "_h2_3zke8_1", k = {
-  h2: B
+const X = "_h2_1eque_1", Z = {
+  h2: X
 };
-function O({ children: t }) {
-  return /* @__PURE__ */ s("h2", { className: k.h2, children: t });
+function Ke({ children: e }) {
+  return /* @__PURE__ */ n("h2", { className: Z.h2, children: e });
 }
-const L = "_paragraph_11t85_1", $ = {
-  paragraph: L
+const Q = "_paragraph_11t85_1", Y = {
+  paragraph: Q
 };
-function Q({ children: t }) {
-  return /* @__PURE__ */ s("p", { className: $.paragraph, children: t });
+function ze({ children: e }) {
+  return /* @__PURE__ */ n("p", { className: Y.paragraph, children: e });
 }
-const j = "_list_1p627_1", W = "_item_1p627_14", N = {
-  list: j,
-  item: W
-};
-function R({ children: t }) {
-  return /* @__PURE__ */ s("ul", { role: "list", className: N.list, children: t });
-}
-function S({ children: t }) {
-  return /* @__PURE__ */ s("li", { className: N.item, children: t });
-}
-const x = "_button_bko6s_1", A = "_sm_bko6s_26", H = "_primary_bko6s_33", C = "_secondary_bko6s_49", I = "_negative_bko6s_68", d = {
-  button: x,
-  sm: A,
-  primary: H,
-  secondary: C,
-  negative: I
+const D = typeof process < "u" && process.env.NODE_ENV !== "production", $ = /* @__PURE__ */ new Set();
+function b(e) {
+  $.has(e) || ($.add(e), console.warn(`[@smartyweb/ui] ${e}`));
+}
+function ee(e) {
+  if (typeof e == "string") return `<${e}>`;
+  if (typeof e == "function") return `<${e.name || "Component"}>`;
+  if (typeof e == "object" && e !== null && "displayName" in e) {
+    const { displayName: t } = e;
+    if (typeof t == "string") return `<${t}>`;
+  }
+  return "an unknown element";
+}
+function I(e, t) {
+  for (const s of T.toArray(e)) {
+    if (!U(s)) {
+      if (typeof s != "string" && typeof s != "number") continue;
+      const r = String(s).trim();
+      if (r === "") continue;
+      b(
+        `<UnorderedList> received the text ${JSON.stringify(r.slice(0, 40))} as a direct child. A <ul> may only contain list items — wrap it in <ListItem>.`
+      );
+      continue;
+    }
+    if (s.type === F) {
+      const { children: r } = s.props;
+      I(r, t);
+      continue;
+    }
+    t(s.type) || s.type === "li" || b(
+      `<UnorderedList> received ${ee(s.type)} as a direct child. A <ul> may only contain list items — wrap it in <ListItem>.`
+    );
+  }
+}
+function te() {
+  b(
+    "<ListItem> was rendered outside of an <UnorderedList>. It renders an <li>, which browsers only style correctly inside a list."
+  );
+}
+const ne = "_list_1p627_1", se = "_item_1p627_14", C = {
+  list: ne,
+  item: se
+}, O = k(!1);
+function S({ children: e }) {
+  const t = j(O);
+  return D && !t && te(), /* @__PURE__ */ n("li", { className: C.item, children: e });
+}
+S.isSmartyListItem = !0;
+function ie(e) {
+  return e === S ? !0 : typeof e == "function" && e.isSmartyListItem === !0;
+}
+function Ge({ children: e }) {
+  return D && I(e, ie), /* @__PURE__ */ n(O, { value: !0, children: /* @__PURE__ */ n("ul", { role: "list", className: C.list, children: e }) });
+}
+const re = "_button_81qo0_1", oe = "_sm_81qo0_26", ae = "_primary_81qo0_33", le = "_secondary_81qo0_49", ce = "_negative_81qo0_68", g = {
+  button: re,
+  sm: oe,
+  primary: ae,
+  secondary: le,
+  negative: ce
 };
-function V({
-  as: t = "button",
-  variant: e = "primary",
-  size: c = "default",
-  href: l,
-  openInNewTab: i,
-  disabled: r,
-  type: _,
-  onClick: m,
-  children: h
+function Je({
+  as: e = "button",
+  variant: t = "primary",
+  size: s = "default",
+  href: r,
+  openInNewTab: c,
+  disabled: m,
+  type: a,
+  onClick: l,
+  children: d
 }) {
-  const n = [d.button, d[e], c === "sm" && d.sm].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s(
-    t,
+  const f = [g.button, g[t], s === "sm" && g.sm].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    e,
     {
-      className: n,
-      href: l,
-      target: i ? "_blank" : void 0,
-      rel: i ? "noopener noreferrer" : void 0,
-      disabled: r,
-      type: _,
-      onClick: m,
-      children: h
+      className: f,
+      href: r,
+      target: c ? "_blank" : void 0,
+      rel: c ? "noopener noreferrer" : void 0,
+      disabled: m,
+      type: a,
+      onClick: l,
+      children: d
     }
   );
 }
-const w = "_hero_hos23_11", z = "_layout_hos23_16", M = "_content_hos23_21", P = "_titleLine_hos23_25", U = "_titleWord_hos23_29", q = "_description_hos23_35", D = "_actions_hos23_48", E = "_action_hos23_48", F = "_media_hos23_65", G = "_layoutBare_hos23_79", o = {
-  hero: w,
-  layout: z,
-  content: M,
-  titleLine: P,
-  titleWord: U,
-  description: q,
-  actions: D,
-  action: E,
-  media: F,
-  layoutBare: G
+const de = typeof process < "u" && process.env.NODE_ENV !== "production", x = /* @__PURE__ */ new Set();
+function ue(e) {
+  x.has(e) || (x.add(e), console.warn(`[@smartyweb/ui] ${e}`));
+}
+function me() {
+  ue(
+    "<SideNav> was rendered with no accessible name. Pass `label` so screen reader users can tell this nav apart from the other navigation landmarks on the page."
+  );
+}
+const _e = "_nav_dxkjl_3", pe = "_list_dxkjl_7", fe = "_item_dxkjl_16", he = "_link_dxkjl_20", ye = "_current_dxkjl_48", y = {
+  nav: _e,
+  list: pe,
+  item: fe,
+  link: he,
+  current: ye
+}, B = k(null);
+function Xe({ label: e, current: t, children: s }) {
+  return de && !e?.trim() && me(), /* @__PURE__ */ n("nav", { className: y.nav, "aria-label": e, children: /* @__PURE__ */ n(B, { value: t ?? null, children: /* @__PURE__ */ n("ul", { className: y.list, children: s }) }) });
+}
+function Ze({
+  as: e = "a",
+  href: t,
+  current: s,
+  openInNewTab: r,
+  onClick: c,
+  children: m
+}) {
+  const a = j(B), l = s ?? (a !== null && a === t), d = [y.link, l && y.current].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("li", { className: y.item, children: /* @__PURE__ */ n(
+    e,
+    {
+      className: d,
+      href: t,
+      target: r ? "_blank" : void 0,
+      rel: r ? "noopener noreferrer" : void 0,
+      onClick: c,
+      "aria-current": l ? "location" : void 0,
+      children: m
+    }
+  ) });
+}
+const ve = "_hero_93692_11", Ne = "_layout_93692_16", ge = "_content_93692_21", Le = "_titleLine_93692_25", be = "_titleWord_93692_29", we = "_description_93692_35", $e = "_media_93692_48", p = {
+  hero: ve,
+  layout: Ne,
+  content: ge,
+  titleLine: Le,
+  titleWord: be,
+  description: we,
+  media: $e
 };
-function J(t) {
-  return t.replace(/([- ])/g, (e) => `${e === " " ? " " : e}|split|`).split("|split|");
-}
-const y = (t) => ({ "--hero-index": t });
-function X({ title: t, description: e, media: c, actions: l }) {
-  const i = Array.isArray(t), r = l ?? [];
-  let _ = 0;
-  const m = (i ? t : [t]).map(
-    (a) => J(a).map((n) => ({ word: n, index: _++ }))
-  ), h = [o.layout, r.length === 0 && o.layoutBare].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("section", { className: o.hero, children: /* @__PURE__ */ p("div", { className: h, children: [
-    /* @__PURE__ */ s("div", { className: o.media, children: c }),
-    /* @__PURE__ */ p("div", { className: o.content, children: [
-      /* @__PURE__ */ s(b, { children: m.map((a, n) => /* @__PURE__ */ s("span", { className: i ? o.titleLine : void 0, children: a.map(({ word: f, index: u }) => /* @__PURE__ */ s("span", { className: o.titleWord, style: y(u), children: f }, u)) }, n)) }),
-      /* @__PURE__ */ s("p", { className: o.description, children: e }),
-      r.length > 0 && /* @__PURE__ */ s("div", { className: o.actions, children: r.map((a, n) => /* @__PURE__ */ s("div", { className: o.action, style: y(n), children: a }, n)) })
+function xe(e) {
+  return e.replace(/([- ])/g, (t) => `${t === " " ? " " : t}|split|`).split("|split|");
+}
+const ke = (e) => ({ "--hero-index": e });
+function Qe({ title: e, description: t, media: s }) {
+  const r = Array.isArray(e);
+  let c = 0;
+  const m = (r ? e : [e]).map(
+    (a) => xe(a).map((l) => ({ word: l, index: c++ }))
+  );
+  return /* @__PURE__ */ n("section", { className: p.hero, children: /* @__PURE__ */ u("div", { className: p.layout, children: [
+    /* @__PURE__ */ n("div", { className: p.media, children: s }),
+    /* @__PURE__ */ u("div", { className: p.content, children: [
+      /* @__PURE__ */ n(J, { children: m.map((a, l) => /* @__PURE__ */ n("span", { className: r ? p.titleLine : void 0, children: a.map(({ word: d, index: _ }) => /* @__PURE__ */ n("span", { className: p.titleWord, style: ke(_), children: d }, _)) }, l)) }),
+      /* @__PURE__ */ n("p", { className: p.description, children: t })
     ] })
   ] }) });
 }
+function je() {
+  return /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.58586 8L1.29297 2.70711L2.70718 1.29289L8.00008 6.58579L13.293 1.29289L14.7072 2.70711L9.41429 8L14.7072 13.2929L13.293 14.7071L8.00008 9.41421L2.70718 14.7071L1.29297 13.2929L6.58586 8Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+const De = "_field_1l94m_17", Ie = "_error_1l94m_33", Ce = "_message_1l94m_38", Oe = "_content_1l94m_54", Se = "_reveal_1l94m_61", Be = "_label_1l94m_71", Ae = "_tags_1l94m_82", Me = "_input_1l94m_89", We = "_counter_1l94m_106", qe = "_empty_1l94m_118", Ee = "_disabled_1l94m_145", He = "_chip_1l94m_150", Re = "_chipText_1l94m_173", Te = "_remove_1l94m_178", Ue = "_invalid_1l94m_189", o = {
+  field: De,
+  error: Ie,
+  message: Ce,
+  content: Oe,
+  reveal: Se,
+  label: Be,
+  tags: Ae,
+  input: Me,
+  counter: We,
+  empty: qe,
+  disabled: Ee,
+  chip: He,
+  chipText: Re,
+  remove: Te,
+  invalid: Ue
+};
+function Fe({ children: e, invalid: t, onRemove: s }) {
+  return /* @__PURE__ */ u("span", { className: [o.chip, t && o.invalid].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ n("span", { className: o.chipText, children: e }),
+    s && /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: o.remove,
+        "aria-label": `Remove ${e}`,
+        onClick: s,
+        children: /* @__PURE__ */ n(je, {})
+      }
+    )
+  ] });
+}
+const L = 100;
+function Ye({
+  label: e,
+  value: t,
+  onChange: s,
+  disabled: r = !1,
+  isTagInvalid: c,
+  onInputChange: m,
+  error: a
+}) {
+  const l = P(), d = `${l}-message`, _ = V(null), [f, A] = K(""), M = t.length >= L, w = (i) => {
+    A(i), m?.(i);
+  }, v = (i) => {
+    const h = L - t.length, N = i.filter(Boolean).slice(0, h);
+    N.length && s([...t, ...N]), w("");
+  }, W = (i) => {
+    ["Enter", ",", " "].includes(i.key) ? (i.preventDefault(), v([f.trim()])) : i.key === "Backspace" && !f && t.length && s(t.slice(0, -1));
+  }, q = (i) => {
+    i.preventDefault(), v(i.clipboardData.getData("text").split(/[\s,]+/));
+  }, E = (i) => {
+    r || i.target === _.current || i.target.closest("button") || (i.preventDefault(), _.current?.focus());
+  }, H = [
+    o.field,
+    !t.length && o.empty,
+    r && o.disabled,
+    a && o.error
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u("div", { children: [
+    /* @__PURE__ */ u("div", { className: H, onMouseDown: E, children: [
+      /* @__PURE__ */ u("div", { className: o.content, children: [
+        /* @__PURE__ */ n("label", { htmlFor: l, className: o.label, children: e }),
+        /* @__PURE__ */ n("div", { className: o.reveal, children: /* @__PURE__ */ u("div", { className: o.tags, children: [
+          t.map((i, h) => /* @__PURE__ */ n(
+            Fe,
+            {
+              invalid: c?.(i, h) ?? !1,
+              onRemove: r ? void 0 : () => {
+                s(t.filter((N, R) => R !== h));
+              },
+              children: i
+            },
+            h
+          )),
+          /* @__PURE__ */ n(
+            "input",
+            {
+              ref: _,
+              id: l,
+              className: o.input,
+              size: 1,
+              value: f,
+              disabled: r,
+              readOnly: M,
+              "aria-invalid": a ? !0 : void 0,
+              "aria-describedby": a ? d : void 0,
+              onChange: (i) => {
+                w(i.target.value);
+              },
+              onKeyDown: W,
+              onPaste: q,
+              onBlur: () => {
+                v([f.trim()]);
+              }
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ n("div", { className: o.reveal, children: /* @__PURE__ */ u("p", { className: o.counter, children: [
+        t.length,
+        " / ",
+        L
+      ] }) })
+    ] }),
+    /* @__PURE__ */ n("p", { id: d, className: o.message, "aria-live": "polite", children: a })
+  ] });
+}
 export {
-  V as Button,
-  b as H1,
-  O as H2,
-  X as Hero,
+  Je as Button,
+  J as H1,
+  Ke as H2,
+  Qe as Hero,
   S as ListItem,
-  Q as Paragraph,
-  R as UnorderedList
+  Ye as MultitagField,
+  ze as Paragraph,
+  Xe as SideNav,
+  Ze as SideNavLink,
+  Ge as UnorderedList
 };

package/dist/navigation/SideNav/SideNav.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+/**
+ * The root element is the <nav> and nothing more: <nav> says what this is, while
+ * <aside> would say where it sits in the page outline — and only the page knows
+ * that. Place it inside your own <aside>, grid cell or <header> as the layout
+ * requires; wrapping it here would nest a second complementary landmark inside
+ * the consumer's own sidebar.
+ */
+export interface SideNavProps {
+    /**
+     * Accessible name for the <nav> — a page with more than one nav landmark needs
+     * it to tell them apart ("On this page", "Documentation"). No visible heading is
+     * rendered; pass one above the component if the design calls for it.
+     *
+     * Optional, but a <nav> with no name is announced as bare "navigation" — <SideNav>
+     * warns in development when it is omitted.
+     */
+    label?: string;
+    /**
+     * href of the current page. Any <SideNavLink> with a matching href renders as
+     * current, so the consumer sets this once instead of per link. A link may still
+     * override it with its own `current` prop.
+     */
+    current?: string;
+    children: React.ReactNode;
+}
+export declare function SideNav({ label, current, children }: SideNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/navigation/SideNav/SideNavContext.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The href <SideNav> was told is the current page, or null when the consumer
+ * marks the current link itself. Read by <SideNavLink> to decide aria-current.
+ */
+export declare const CurrentHref: import('react').Context<string | null>;

package/dist/navigation/SideNav/SideNavLink.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+interface SharedProps {
+    /**
+     * Marks this link as the one currently in view (aria-current="location").
+     * An in-page table of contents links within the page the reader is already
+     * on, so "location" is the accurate value — "page" would claim every entry
+     * points somewhere else. Wins over the `current` href on <SideNav>, so a
+     * consumer can mix the two.
+     */
+    current?: boolean;
+    onClick?: React.MouseEventHandler;
+    children?: React.ReactNode;
+}
+type AsAnchor = SharedProps & {
+    as?: "a";
+    href: string;
+    openInNewTab?: boolean;
+};
+/** For a router link — e.g. `as={NextLink}` — which takes href like an anchor. */
+type AsCustom = SharedProps & {
+    as: React.ElementType;
+    href: string;
+    openInNewTab?: boolean;
+};
+export type SideNavLinkProps = AsAnchor | AsCustom;
+/**
+ * One nav entry. Renders its own <li>, so it drops straight into <SideNav>
+ * without a wrapper.
+ */
+export declare function SideNavLink({ as: Tag, href, current, openInNewTab, onClick, children, }: SideNavLinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/navigation/SideNav/devWarnings.d.ts

@@ -0,0 +1,7 @@
+export declare const isDev: boolean;
+/**
+ * Warns when <SideNav> renders without an accessible name. <nav> is a landmark, and
+ * an unnamed one is announced as bare "navigation" — indistinguishable from every
+ * other nav on the page in a screen reader's landmark list.
+ */
+export declare function warnOnMissingLabel(): void;

package/dist/navigation/SideNav/index.d.ts

@@ -0,0 +1,4 @@
+export { SideNav } from './SideNav';
+export type { SideNavProps } from './SideNav';
+export { SideNavLink } from './SideNavLink';
+export type { SideNavLinkProps } from './SideNavLink';

package/dist/navigation/index.d.ts

@@ -0,0 +1 @@
+export * from './SideNav';

package/dist/sections/Hero/Hero.d.ts

@@ -4,7 +4,5 @@ export interface HeroProps {
     title: string | string[];
     description: React.ReactNode;
     media: React.ReactNode;
-    /** omit or pass [] for the no-buttons variation */
-    actions?: React.ReactNode[];
 }
-export declare function Hero({ title, description, media, actions }: HeroProps): import("react/jsx-runtime").JSX.Element;
+export declare function Hero({ title, description, media }: HeroProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/UnorderedList/ListItem.d.ts

@@ -3,3 +3,6 @@ export interface ListItemProps {
     children: React.ReactNode;
 }
 export declare function ListItem({ children }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ListItem {
+    var isSmartyListItem: true;
+}

package/dist/text/UnorderedList/UnorderedListContext.d.ts

@@ -0,0 +1,2 @@
+/** True while rendering inside an <UnorderedList>. Used only for dev warnings. */
+export declare const InsideUnorderedList: import('react').Context<boolean>;

package/dist/text/UnorderedList/devWarnings.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare const isDev: boolean;
+/**
+ * Warns when <UnorderedList> is handed anything other than <ListItem> (or a raw
+ * <li>). A <ul> may only contain <li>, so other children are invalid HTML and
+ * lose the bullet + spacing styles.
+ *
+ * Note: a custom wrapper that renders a <ListItem> internally will trip this —
+ * see the escape hatch in ListItem.tsx.
+ */
+export declare function warnOnNonListItemChildren(children: ReactNode, isListItem: (type: unknown) => boolean): void;
+/** Warns when <ListItem> is rendered outside of an <UnorderedList>. */
+export declare function warnOnOrphanListItem(): void;

package/dist/ui.css

@@ -1 +1 @@
-:root{--font-desktop-heading: TT Hoves Pro;--font-desktop-paragraph: TT Hoves Pro;--font-desktop-buttons: Inter;--font-desktop-body-inter: Inter;--font-desktop-body-tt-hoves: TT Hoves Pro;--font-desktop-caption: Inter;--font-desktop-numbers: TT Hoves Pro;--font-desktop-code: Hack;--h-extra-desktop-font-size: 6rem;--h-extra-desktop-line-height: 6.625rem;--h-extra-desktop-letter-spacing: -.03em;--h1-desktop-letter-spacing: -.02em;--h1-desktop-line-height: 4rem;--h1-desktop-font-size: 4rem;--h2-desktop-font-size: 3.25rem;--h2-desktop-letter-spacing: -.02em;--h2-desktop-line-height: 3.5625rem;--h3-desktop-letter-spacing: -.02em;--h3-desktop-font-size: 2.75rem;--h3-desktop-line-height: 3rem;--h4-desktop-letter-spacing: -.01em;--h4-desktop-font-size: 2.25rem;--h4-desktop-line-height: 2.6875rem;--h5-desktop-letter-spacing: -.01em;--h5-desktop-font-size: 1.875rem;--h5-desktop-line-height: 2.0625rem;--h6-desktop-font-size: 1.75rem;--h6-desktop-letter-spacing: -.01em;--h6-desktop-line-height: 1.9375rem;--h7-desktop-font-size: 1.5rem;--h7-desktop-letter-spacing: -.01em;--h7-desktop-line-height: 1.75rem;--paragraph-desktop-font-size: 1.5rem;--paragraph-desktop-line-height: 2.25rem;--paragraph-desktop-letter-spacing: -.01em;--button-lg-desktop-font-size: 1.25rem;--button-lg-desktop-line-height: 1.5rem;--button-lg-desktop-letter-spacing: -.02em;--button-md-desktop-font-size: 1.0625rem;--button-md-desktop-line-height: 1.5rem;--button-md-desktop-letter-spacing: -.02em;--button-sm-desktop-font-size: .875rem;--button-sm-desktop-line-height: 1.5rem;--button-sm-desktop-letter-spacing: -.01em;--body-lg-tt-hoves-desktop-font-size: 1.125rem;--body-lg-tt-hoves-desktop-line-height: 1.5rem;--body-lg-tt-hoves-desktop-letter-spacing: -.01em;--body-lg-inter-desktop-font-size: 1.25rem;--body-lg-inter-desktop-line-height: 1.875rem;--body-lg-inter-desktop-letter-spacing: -.02em;--body-md-tt-hoves-desktop-letter-spacing: -.01em;--body-md-tt-hoves-desktop-font-size: 1rem;--body-md-tt-hoves-desktop-line-height: 1.375rem;--body-md-inter-desktop-letter-spacing: -.02em;--body-md-inter-desktop-font-size: 1rem;--body-md-inter-desktop-line-height: 1.5rem;--body-sm-desktop-letter-spacing: -.01em;--body-sm-desktop-font-size: .875rem;--body-sm-desktop-line-height: 1.25rem;--caption-lg-desktop-font-size: 1rem;--caption-lg-desktop-letter-spacing: -.01em;--caption-lg-desktop-line-height: 1.5rem;--caption-sm-desktop-font-size: .75rem;--caption-sm-desktop-line-height: 1.125rem;--caption-sm-desktop-letter-spacing: -.02em;--caption-sm-bold-desktop-font-size: .75rem;--caption-sm-bold-desktop-line-height: 1rem;--caption-sm-bold-desktop-letter-spacing: -.01em;--caption-uppercase-desktop-line-height: 1rem;--caption-uppercase-desktop-letter-spacing: .04em;--caption-uppercase-desktop-font-size: .8125rem;--numbers-desktop-line-height: 1.375rem;--numbers-desktop-letter-spacing: .04em;--numbers-desktop-font-size: 1rem;--special-styles-code-desktop-line-height: 1.5625rem;--special-styles-code-desktop-font-size: 1.125rem;--special-styles-code-desktop-letter-spacing: 0;--font-tablet-heading: TT Hoves Pro;--font-tablet-paragraph: TT Hoves Pro;--font-tablet-buttons: Inter;--font-tablet-body-inter: Inter;--font-tablet-body-tt-hoves: TT Hoves Pro;--font-tablet-caption: Inter;--font-tablet-numbers: TT Hoves Pro;--font-tablet-code: Hack;--h-extra-tablet-font-size: 6.875rem;--h-extra-tablet-line-height: 7.5625rem;--h-extra-tablet-letter-spacing: -.03em;--h1-tablet-letter-spacing: -.02em;--h1-tablet-line-height: 4.4rem;--h1-tablet-font-size: 4rem;--h2-tablet-font-size: 3rem;--h2-tablet-letter-spacing: -.02em;--h2-tablet-line-height: 3.3125rem;--h3-tablet-letter-spacing: -.02em;--h3-tablet-font-size: 2.5rem;--h3-tablet-line-height: 2.75rem;--h4-tablet-letter-spacing: -.02em;--h4-tablet-font-size: 2.25rem;--h4-tablet-line-height: 2.6875rem;--h5-tablet-letter-spacing: -.01em;--h5-tablet-font-size: 2rem;--h5-tablet-line-height: 2.1875rem;--h6-tablet-font-size: 1.5rem;--h6-tablet-letter-spacing: -.01em;--h6-tablet-line-height: 1.625rem;--h7-tablet-font-size: 1.375rem;--h7-tablet-letter-spacing: -.01em;--h7-tablet-line-height: 1.625rem;--paragraph-tablet-font-size: 1.375rem;--paragraph-tablet-line-height: 2.0625rem;--paragraph-tablet-letter-spacing: -.01em;--button-lg-tablet-font-size: 1.125rem;--button-lg-tablet-line-height: 1.5rem;--button-lg-tablet-letter-spacing: -.02em;--button-md-tablet-font-size: 1rem;--button-md-tablet-line-height: 1.5rem;--button-md-tablet-letter-spacing: -.02em;--button-sm-tablet-font-size: .875rem;--button-sm-tablet-line-height: 1.5rem;--button-sm-tablet-letter-spacing: -.01em;--body-lg-tt-hoves-tablet-font-size: 1rem;--body-lg-tt-hoves-tablet-line-height: 1.375rem;--body-lg-tt-hoves-tablet-letter-spacing: -.01em;--body-lg-inter-tablet-font-size: 1.125rem;--body-lg-inter-tablet-line-height: 1.6875rem;--body-lg-inter-tablet-letter-spacing: -.02em;--body-md-tt-hoves-tablet-letter-spacing: -.01em;--body-md-tt-hoves-tablet-font-size: 1rem;--body-md-tt-hoves-tablet-line-height: 1.375rem;--body-md-inter-tablet-letter-spacing: -.02em;--body-md-inter-tablet-font-size: 1rem;--body-md-inter-tablet-line-height: 1.5rem;--body-sm-tablet-letter-spacing: -.01em;--body-sm-tablet-font-size: .875rem;--body-sm-tablet-line-height: 1.25rem;--caption-lg-tablet-font-size: 1rem;--caption-lg-tablet-letter-spacing: -.02em;--caption-lg-tablet-line-height: 1.5rem;--caption-sm-tablet-font-size: .75rem;--caption-sm-tablet-line-height: 1.125rem;--caption-sm-tablet-letter-spacing: -.02em;--caption-sm-bold-tablet-font-size: .75rem;--caption-sm-bold-tablet-line-height: 1rem;--caption-sm-bold-tablet-letter-spacing: -.01em;--caption-uppercase-tablet-line-height: 1rem;--caption-uppercase-tablet-letter-spacing: .04em;--caption-uppercase-tablet-font-size: .8125rem;--numbers-tablet-line-height: 1.375rem;--numbers-tablet-letter-spacing: .04em;--numbers-tablet-font-size: 1rem;--special-styles-code-tablet-line-height: 1.5625rem;--special-styles-code-tablet-font-size: 1.125rem;--special-styles-code-tablet-letter-spacing: 0;--font-mobile-heading: TT Hoves Pro;--font-mobile-paragraph: TT Hoves Pro;--font-mobile-buttons: Inter;--font-mobile-body-inter: Inter;--font-mobile-body-tt-hoves: TT Hoves Pro;--font-mobile-caption: Inter;--font-mobile-numbers: TT Hoves Pro;--font-mobile-code: Hack;--h-extra-mobile-font-size: 3.5rem;--h-extra-mobile-line-height: 3.875rem;--h-extra-mobile-letter-spacing: -.02em;--h1-mobile-letter-spacing: -.01em;--h1-mobile-line-height: 2.75rem;--h1-mobile-font-size: 2.75rem;--h2-mobile-font-size: 2.5rem;--h2-mobile-letter-spacing: -.01em;--h2-mobile-line-height: 2.75rem;--h3-mobile-letter-spacing: -.01em;--h3-mobile-font-size: 2.25rem;--h3-mobile-line-height: 2.5rem;--h4-mobile-letter-spacing: -.01em;--h4-mobile-font-size: 2rem;--h4-mobile-line-height: 2.625rem;--h5-mobile-letter-spacing: -.01em;--h5-mobile-font-size: 1.375rem;--h5-mobile-line-height: 1.5rem;--h6-mobile-font-size: 1.25rem;--h6-mobile-letter-spacing: -.01em;--h6-mobile-line-height: 1.375rem;--h7-mobile-font-size: 1.25rem;--h7-mobile-letter-spacing: -.01em;--h7-mobile-line-height: 1.5rem;--paragraph-mobile-font-size: 1.125rem;--paragraph-mobile-line-height: 1.6875rem;--paragraph-mobile-letter-spacing: -.01em;--button-lg-mobile-font-size: 1rem;--button-lg-mobile-line-height: 1.5rem;--button-lg-mobile-letter-spacing: -.01em;--button-md-mobile-font-size: .875rem;--button-md-mobile-line-height: 1.5rem;--button-md-mobile-letter-spacing: -.01em;--button-sm-mobile-font-size: .75rem;--button-sm-mobile-line-height: 1.5rem;--button-sm-mobile-letter-spacing: -.01em;--body-lg-tt-hoves-mobile-font-size: .875rem;--body-lg-tt-hoves-mobile-line-height: 1.1875rem;--body-lg-tt-hoves-mobile-letter-spacing: -.01em;--body-lg-inter-mobile-font-size: 1rem;--body-lg-inter-mobile-line-height: 1.5rem;--body-lg-inter-mobile-letter-spacing: -.01em;--body-md-tt-hoves-mobile-letter-spacing: -.01em;--body-md-tt-hoves-mobile-font-size: 1rem;--body-md-tt-hoves-mobile-line-height: 1.375rem;--body-md-inter-mobile-letter-spacing: -.01em;--body-md-inter-mobile-font-size: .875rem;--body-md-inter-mobile-line-height: 1.3125rem;--body-sm-mobile-letter-spacing: -.01em;--body-sm-mobile-font-size: .875rem;--body-sm-mobile-line-height: 1.25rem;--caption-lg-mobile-font-size: 1rem;--caption-lg-mobile-letter-spacing: -.02em;--caption-lg-mobile-line-height: 1.5rem;--caption-sm-mobile-font-size: .75rem;--caption-sm-mobile-line-height: 1.125rem;--caption-sm-mobile-letter-spacing: -.02em;--caption-sm-bold-mobile-font-size: .75rem;--caption-sm-bold-mobile-line-height: 1rem;--caption-sm-bold-mobile-letter-spacing: -.01em;--caption-uppercase-mobile-line-height: 1rem;--caption-uppercase-mobile-letter-spacing: .04em;--caption-uppercase-mobile-font-size: .75rem;--numbers-mobile-line-height: 1.375rem;--numbers-mobile-letter-spacing: .04em;--numbers-mobile-font-size: 1rem;--special-styles-code-mobile-line-height: 1.375rem;--special-styles-code-mobile-font-size: 1rem;--special-styles-code-mobile-letter-spacing: 0;--surface-invert-fill-disabled: #c7ccd4;--surface-invert-secondary: #262c36;--surface-invert-primary: #151b23;--surface-invert-fill-deep: #6e7580;--surface-base-fill: #e6e9ed;--overlay-fill-dark: #151b23b3;--surface-invert-fill-pressed: #a8b0ba;--overlay-fill-medium: #151b23a3;--surface-base-fill-light: #eff7ff;--surface-base-secondary: #f5f7fa;--surface-base-primary: #ffffff;--surface-cell-disabled: #f5f7fa80;--surface-invert-fill-dark: #a8b0ba;--surface-invert-fill-hovered: #e6e9ed;--overlay-fill: #001d7a66;--surface-invert-dark: #151b23;--surface-invert-fill-medium: #c7ccd4;--surface-invert-fill-light: #e6e9ed;--text-invert-label: #939ba6;--text-link: #0066ff;--info-text: #00546b;--text-invert-secondary: #e6e9ed;--negative-text: #8f1150;--positive-text-dark: #005925;--text-base-label: #002ea3;--text-invert-pressed: #6e7580;--premium-text: #431878;--text-link-pressed: #001d7a;--text-base-secondary-light: #939ba6;--text-invert-primary: #ffffff;--positive-text: #147536;--negative-text-dark: #6b0039;--text-invert-disabled: #49505b;--warning-text: #6b1000;--text-disabled: #001d7a66;--text-link-hovered: #004cda;--text-invert-hovered: #b7bec7;--text-base-secondary: #49505b;--text-link-light: #2d84ff;--text-link-light-hovered: #5aa1ff;--caution-text: #505900;--text-base-primary: #151b23;--border-primary-light: #5aa1ff;--border-primary-active: #001d7a;--border-invert-secondary: #d6dbe0;--border-primary-medium: #2d84ff;--border-primary: #0066ff;--border-invert-primary: #ffffff;--border-primary-hovered: #004cda;--border-base-secondary: #d6dbe0;--border-base-secondary-light: #e6e9ed;--border-base-primary: #151b23;--border-primary-disabled: #002ea31a;--border-base-light: #e2f0ff;--accent-fill-hovered: #004cda;--accent-primary-hovered: #004cda;--accent-fill: #0066ff;--accent-fill-dark: #001d7a;--accent-fill-medium-disabled: #c7ccd4;--accent-fill-pressed: #002ea3;--accent-primary-dark: #001d7a;--accent-fill-medium-hovered: #a8b0ba;--accent-primary: #0066ff;--accent-fill-disabled: #002ea31a;--accent-fill-medium: #b7bec7;--accent-fill-medium-pressed: #939ba6;--accent-link: #0039b5;--accent-fill-focused: #8fc1ff;--accent-fill-light-hovered: #001d7a12;--accent-fill-light: #e2f0ff;--positive-icon: #29954b;--negative-icon-light: #b22265;--negative-icon: #8f1150;--icon-disabled: #001d7a66;--icon-invert: #c7ccd4;--icon-primary-light-hovered: #5aa1ff;--icon-base-secondary: #6e7580;--icon-primary: #383e48;--negative-fill-light-pressed: #ffafc8;--negative-fill: #f55591;--negative-fill-dark: #6b0039;--negative-fill-medium: #ff76a6;--negative-fill-light-hovered: #ffcbdb;--negative-fill-light: #ffe8ef;--warning-fill-dark: #6b1000;--warning-fill-medium: #f89364;--warning-primary: #f5804e;--warning-fill: #ffbc98;--warning-fill-light: #ffebde;--positive-fill-dark: #005925;--positive-fill: #47cc69;--positive-fill-medium: #81eb96;--positive-fill-light: #cffad6;--premium-fill: #9560ff;--premium-fill-medium: #b292fc;--premium-fill-light: #ece5ff;--info-fill: #3dc9d1;--info-fill-medium: #63dfe5;--info-fill-light: #b0f7f7;--caution-fill: #fcf58c;--caution-fill-dark: #e4e40d;--caution-fill-light: #fcf9d7;--disabled-progress-bar-right-gradient: #c7ccd4;--primary-progress-bar-left-gradient: #f55591;--primary-progress-bar-track: #e6e9ed;--disabled-progress-bar-track: #e6e9ed;--primary-progress-bar-right-gradient: #ffbc98;--disabled-progress-bar-left-gradient: #e6e9ed;--borderradius-none: 0;--borderradius-focusedstroke: 4px;--borderradius-muistroke: 4px;--borderradius-pill: 360px;--borderradius-cardsm: 12px;--borderradius-cardlg: 24px;--borderradius-button: 360px;--strokewidth-none: 0;--strokewidth-xs: 1px;--strokewidth-sm: 2px;--strokewidth-md: 4px;--strokewidth-lg: 8px;--insetspacing-5xs: .25rem;--insetspacing-4xs: .5rem;--insetspacing-3xs: .75rem;--insetspacing-2xs: 1rem;--insetspacing-xs: 1.25rem;--insetspacing-s: 1.5rem;--insetspacing-m: 1.75rem;--insetspacing-l: 2rem;--insetspacing-xl: 2.5rem;--insetspacing-2xl: 2.75rem;--insetspacing-3xl: 3rem;--insetspacing-4xl: 3.5rem;--insetspacing-5xl: 4rem;--insetspacing-6xl: 4.5rem;--insetspacing-7xl: 5rem;--insetspacing-8xl: 6rem;--insetspacing-9xl: 7.5rem;--insetspacing-10xl: 10rem;--stackspacing-5xs: .25rem;--stackspacing-4xs: .5rem;--stackspacing-3xs: .75rem;--stackspacing-2xs: 1rem;--stackspacing-xs: 1.25rem;--stackspacing-s: 1.5rem;--stackspacing-m: 1.75rem;--stackspacing-l: 2rem;--stackspacing-xl: 2.5rem;--stackspacing-2xl: 2.75rem;--stackspacing-3xl: 3rem;--stackspacing-4xl: 3.5rem;--stackspacing-5xl: 4rem;--stackspacing-6xl: 4.5rem;--stackspacing-7xl: 5rem;--stackspacing-8xl: 6rem;--stackspacing-9xl: 7.5rem;--stackspacing-10xl: 10rem;--inlinespacing-5xs: .25rem;--inlinespacing-4xs: .5rem;--inlinespacing-3xs: .75rem;--inlinespacing-2xs: 1rem;--inlinespacing-xs: 1.25rem;--inlinespacing-s: 1.5rem;--inlinespacing-m: 1.75rem;--inlinespacing-l: 2rem;--inlinespacing-xl: 2.5rem;--inlinespacing-2xl: 2.75rem;--inlinespacing-3xl: 3rem;--inlinespacing-4xl: 3.5rem;--inlinespacing-5xl: 4rem;--inlinespacing-6xl: 4.5rem;--inlinespacing-7xl: 5rem;--inlinespacing-8xl: 6rem;--inlinespacing-9xl: 7.5rem;--inlinespacing-10xl: 10rem}._h1_1765w_1{font-size:clamp(2.75rem,1.8779vw + 2.3099rem,4rem);line-height:clamp(2.75rem,1.8779vw + 2.3099rem,4rem);letter-spacing:-.02em;font-family:var(--ui-font-primary);font-weight:500;font-feature-settings:"ss01" 1,"ss02" 1,"ss04" 1;margin:0}._h2_3zke8_1{font-size:clamp(2.5rem,1.1268vw + 2.2359rem,3.25rem);line-height:clamp(2.75rem,1.2207vw + 2.4639rem,3.5625rem);letter-spacing:-.02em;font-family:var(--ui-font-primary);font-weight:500;font-feature-settings:"ss01" 1,"ss02" 1,"ss04" 1;margin:0;padding-top:clamp(4.5rem,1.5023vw + 3.6479rem,5rem)}._paragraph_11t85_1{font-size:clamp(1rem,.3756vw + .912rem,1.25rem);line-height:clamp(1.5rem,.5634vw + 1.368rem,1.875rem);letter-spacing:-.02em;font-family:var(--ui-font-body);font-weight:400;font-feature-settings:"dlig" 1;margin:0}._list_1p627_1{display:flex;flex-direction:column;gap:clamp(.75rem,.3756vw + .662rem,1rem);margin:clamp(1rem,.7512vw + .8239rem,1.5rem) 0 0;padding:0;list-style:none}._list_1p627_1 ._list_1p627_1{margin-top:clamp(.75rem,.3756vw + .662rem,1rem);margin-left:calc(clamp(1rem,.7512vw + .8239rem,1.5rem) - (clamp(.25rem,.3756vw + .162rem,.5rem) + 8px))}._item_1p627_14{position:relative;font-size:clamp(1rem,.3756vw + .912rem,1.25rem);line-height:clamp(1.5rem,.5634vw + 1.368rem,1.875rem);letter-spacing:-.02em;font-family:var(--ui-font-body);font-weight:400;font-feature-settings:"dlig" 1}._list_1p627_1 ._item_1p627_14{padding-left:calc(clamp(.25rem,.3756vw + .162rem,.5rem) + 8px)}._list_1p627_1 ._item_1p627_14:before{content:"";position:absolute;top:.4lh;left:0;box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:var(--accent-primary)}._list_1p627_1 ._list_1p627_1 ._item_1p627_14:before{border:var(--strokewidth-xs) solid var(--accent-primary);background:transparent}._list_1p627_1 ._list_1p627_1 ._list_1p627_1 ._item_1p627_14:before{border:0;border-radius:0;background:var(--accent-primary)}._list_1p627_1 ._list_1p627_1 ._list_1p627_1 ._list_1p627_1 ._item_1p627_14:before{border-radius:50%}._button_bko6s_1{appearance:none;border:none;background:none;display:inline-block;text-decoration:none;cursor:pointer;border-radius:var(--borderradius-button);padding:clamp(1rem,.7512vw + .8239rem,1.5rem) clamp(1.75rem,1.1268vw + 1.4859rem,2.5rem);font-size:clamp(1rem,.3756vw + .912rem,1.25rem);line-height:1.5rem;letter-spacing:-.02em;font-family:var(--ui-font-body);font-weight:500;font-feature-settings:"dlig" 1;transition:background-color .15s ease,color .15s ease}._button_bko6s_1:focus-visible{outline:var(--strokewidth-sm) solid var(--accent-fill-focused);outline-offset:2px}._button_bko6s_1:disabled{cursor:not-allowed}._sm_bko6s_26{font-size:clamp(.875rem,.2817vw + .809rem,1.0625rem);line-height:1.5rem;letter-spacing:-.02em;padding:clamp(.75rem,.3756vw + .662rem,1rem) clamp(1rem,.7512vw + .8239rem,1.5rem)}._primary_bko6s_33{background-color:var(--accent-fill);color:var(--text-invert-primary)}._primary_bko6s_33:hover:not(:disabled){background-color:var(--accent-fill-hovered);color:var(--text-invert-primary)}._primary_bko6s_33:active:not(:disabled){background-color:var(--accent-fill-dark)}._primary_bko6s_33:disabled{background-color:var(--surface-invert-fill-disabled);color:var(--text-invert-primary)}._secondary_bko6s_49{background-color:transparent;color:var(--text-base-primary);box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--border-base-primary);transition:box-shadow .15s ease,color .15s ease}._secondary_bko6s_49:hover:not(:disabled){box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--accent-primary-hovered);color:var(--text-link-hovered)}._secondary_bko6s_49:active:not(:disabled){box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--accent-primary-dark);color:var(--text-link-pressed)}._secondary_bko6s_49:disabled{box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--border-base-secondary);color:var(--text-invert-hovered)}._negative_bko6s_68{background-color:var(--negative-fill-light);color:var(--negative-text)}._negative_bko6s_68:hover:not(:disabled){background-color:var(--negative-fill-light-hovered);color:var(--negative-text)}._negative_bko6s_68:active:not(:disabled){background-color:var(--negative-fill-light-pressed)}._negative_bko6s_68:disabled{background-color:var(--accent-fill-disabled);color:var(--text-disabled)}@keyframes _hero-rise_hos23_1{0%{opacity:0;transform:translateY(var(--hero-rise, 50px))}to{opacity:1;transform:none}}._hero_hos23_11{container-type:inline-size;background-color:var(--surface-base-secondary)}._layout_hos23_16{display:grid;padding:clamp(2.75rem,.7512vw + 2.3239rem,3rem) 0}._content_hos23_21{min-width:0}._titleLine_hos23_25{display:block}._titleWord_hos23_29{animation:_hero-rise_hos23_1 .67s cubic-bezier(.16,1,.03,1) both;display:inline-block;animation-delay:calc(.03s + var(--hero-index, 0) * 15ms)}._description_hos23_35{font-size:clamp(1rem,.3756vw + .912rem,1.25rem);line-height:clamp(1.5rem,.5634vw + 1.368rem,1.875rem);letter-spacing:-.02em;animation:_hero-rise_hos23_1 .67s cubic-bezier(.16,1,.03,1) both;margin:max(clamp(1.5rem,.7512vw + 1.3239rem,2rem),1.75rem) 0 0;font-family:var(--ui-font-body);font-weight:400;font-feature-settings:"dlig" 1;color:var(--text-base-secondary);animation-delay:.03s}._actions_hos23_48{display:flex;flex-direction:column;gap:max(clamp(1.5rem,.7512vw + 1.3239rem,2rem),1.75rem);margin:max(clamp(1.5rem,.7512vw + 1.3239rem,2rem),1.75rem) 0 0}._action_hos23_48{animation:_hero-rise_hos23_1 .67s cubic-bezier(.16,1,.03,1) both;--hero-rise: 100px;animation-delay:calc(.06s + var(--hero-index, 0) * .03s)}._action_hos23_48>:where(a,button){width:100%;text-align:center}._media_hos23_65{animation:_hero-rise_hos23_1 .67s cubic-bezier(.16,1,.03,1) both;--hero-rise: 100px;order:2;width:100%;margin-top:clamp(1.75rem,1.1268vw + 1.4859rem,2.5rem);animation-delay:.13s}._media_hos23_65 :where(img,svg){display:block;max-width:100%;height:auto}._layoutBare_hos23_79 ._media_hos23_65{margin-top:clamp(2.75rem,.7512vw + 2.3239rem,3rem)}@container (min-width: 768px){._actions_hos23_48{flex-direction:row;gap:clamp(1rem,.7512vw + .8239rem,1.5rem)}._action_hos23_48>:where(a,button){width:auto}}@container (min-width: 1089px){._layout_hos23_16{display:flow-root}._content_hos23_21{max-width:700px}._media_hos23_65{float:right;width:auto;max-width:620px;margin-top:0;shape-outside:circle(30%);shape-margin:clamp(1.75rem,1.1268vw + 1.4859rem,2.5rem)}._layoutBare_hos23_79 ._media_hos23_65{margin-top:0}}@media(prefers-reduced-motion:reduce){@keyframes _hero-rise_hos23_1{0%{opacity:0}to{opacity:1}}}
+:root{--font-desktop-heading: TT Hoves Pro;--font-desktop-paragraph: TT Hoves Pro;--font-desktop-buttons: Inter;--font-desktop-body-inter: Inter;--font-desktop-body-tt-hoves: TT Hoves Pro;--font-desktop-caption: Inter;--font-desktop-numbers: TT Hoves Pro;--font-desktop-code: Hack;--h-extra-desktop-font-size: 6rem;--h-extra-desktop-line-height: 6.625rem;--h-extra-desktop-letter-spacing: -.03em;--h1-desktop-letter-spacing: -.02em;--h1-desktop-line-height: 4rem;--h1-desktop-font-size: 4rem;--h2-desktop-font-size: 3.25rem;--h2-desktop-letter-spacing: -.02em;--h2-desktop-line-height: 3.5625rem;--h3-desktop-letter-spacing: -.02em;--h3-desktop-font-size: 2.75rem;--h3-desktop-line-height: 3rem;--h4-desktop-letter-spacing: -.01em;--h4-desktop-font-size: 2.25rem;--h4-desktop-line-height: 2.6875rem;--h5-desktop-letter-spacing: -.01em;--h5-desktop-font-size: 1.875rem;--h5-desktop-line-height: 2.0625rem;--h6-desktop-font-size: 1.75rem;--h6-desktop-letter-spacing: -.01em;--h6-desktop-line-height: 1.9375rem;--h7-desktop-font-size: 1.5rem;--h7-desktop-letter-spacing: -.01em;--h7-desktop-line-height: 1.75rem;--paragraph-desktop-font-size: 1.5rem;--paragraph-desktop-line-height: 2.25rem;--paragraph-desktop-letter-spacing: -.01em;--button-lg-desktop-font-size: 1.25rem;--button-lg-desktop-line-height: 1.5rem;--button-lg-desktop-letter-spacing: -.02em;--button-md-desktop-font-size: 1.0625rem;--button-md-desktop-line-height: 1.5rem;--button-md-desktop-letter-spacing: -.02em;--button-sm-desktop-font-size: .875rem;--button-sm-desktop-line-height: 1.5rem;--button-sm-desktop-letter-spacing: -.01em;--body-lg-tt-hoves-desktop-font-size: 1.125rem;--body-lg-tt-hoves-desktop-line-height: 1.5rem;--body-lg-tt-hoves-desktop-letter-spacing: -.01em;--body-lg-inter-desktop-font-size: 1.25rem;--body-lg-inter-desktop-line-height: 1.875rem;--body-lg-inter-desktop-letter-spacing: -.02em;--body-md-tt-hoves-desktop-letter-spacing: -.01em;--body-md-tt-hoves-desktop-font-size: 1rem;--body-md-tt-hoves-desktop-line-height: 1.375rem;--body-md-inter-desktop-letter-spacing: -.02em;--body-md-inter-desktop-font-size: 1rem;--body-md-inter-desktop-line-height: 1.5rem;--body-sm-desktop-letter-spacing: -.01em;--body-sm-desktop-font-size: .875rem;--body-sm-desktop-line-height: 1.25rem;--caption-lg-desktop-font-size: 1rem;--caption-lg-desktop-letter-spacing: -.01em;--caption-lg-desktop-line-height: 1.5rem;--caption-sm-desktop-font-size: .75rem;--caption-sm-desktop-line-height: 1.125rem;--caption-sm-desktop-letter-spacing: -.02em;--caption-sm-bold-desktop-font-size: .75rem;--caption-sm-bold-desktop-line-height: 1rem;--caption-sm-bold-desktop-letter-spacing: -.01em;--caption-uppercase-desktop-line-height: 1rem;--caption-uppercase-desktop-letter-spacing: .04em;--caption-uppercase-desktop-font-size: .8125rem;--numbers-desktop-line-height: 1.375rem;--numbers-desktop-letter-spacing: .04em;--numbers-desktop-font-size: 1rem;--special-styles-code-desktop-line-height: 1.5625rem;--special-styles-code-desktop-font-size: 1.125rem;--special-styles-code-desktop-letter-spacing: 0;--font-tablet-heading: TT Hoves Pro;--font-tablet-paragraph: TT Hoves Pro;--font-tablet-buttons: Inter;--font-tablet-body-inter: Inter;--font-tablet-body-tt-hoves: TT Hoves Pro;--font-tablet-caption: Inter;--font-tablet-numbers: TT Hoves Pro;--font-tablet-code: Hack;--h-extra-tablet-font-size: 6.875rem;--h-extra-tablet-line-height: 7.5625rem;--h-extra-tablet-letter-spacing: -.03em;--h1-tablet-letter-spacing: -.02em;--h1-tablet-line-height: 4.4rem;--h1-tablet-font-size: 4rem;--h2-tablet-font-size: 3rem;--h2-tablet-letter-spacing: -.02em;--h2-tablet-line-height: 3.3125rem;--h3-tablet-letter-spacing: -.02em;--h3-tablet-font-size: 2.5rem;--h3-tablet-line-height: 2.75rem;--h4-tablet-letter-spacing: -.02em;--h4-tablet-font-size: 2.25rem;--h4-tablet-line-height: 2.6875rem;--h5-tablet-letter-spacing: -.01em;--h5-tablet-font-size: 2rem;--h5-tablet-line-height: 2.1875rem;--h6-tablet-font-size: 1.5rem;--h6-tablet-letter-spacing: -.01em;--h6-tablet-line-height: 1.625rem;--h7-tablet-font-size: 1.375rem;--h7-tablet-letter-spacing: -.01em;--h7-tablet-line-height: 1.625rem;--paragraph-tablet-font-size: 1.375rem;--paragraph-tablet-line-height: 2.0625rem;--paragraph-tablet-letter-spacing: -.01em;--button-lg-tablet-font-size: 1.125rem;--button-lg-tablet-line-height: 1.5rem;--button-lg-tablet-letter-spacing: -.02em;--button-md-tablet-font-size: 1rem;--button-md-tablet-line-height: 1.5rem;--button-md-tablet-letter-spacing: -.02em;--button-sm-tablet-font-size: .875rem;--button-sm-tablet-line-height: 1.5rem;--button-sm-tablet-letter-spacing: -.01em;--body-lg-tt-hoves-tablet-font-size: 1rem;--body-lg-tt-hoves-tablet-line-height: 1.375rem;--body-lg-tt-hoves-tablet-letter-spacing: -.01em;--body-lg-inter-tablet-font-size: 1.125rem;--body-lg-inter-tablet-line-height: 1.6875rem;--body-lg-inter-tablet-letter-spacing: -.02em;--body-md-tt-hoves-tablet-letter-spacing: -.01em;--body-md-tt-hoves-tablet-font-size: 1rem;--body-md-tt-hoves-tablet-line-height: 1.375rem;--body-md-inter-tablet-letter-spacing: -.02em;--body-md-inter-tablet-font-size: 1rem;--body-md-inter-tablet-line-height: 1.5rem;--body-sm-tablet-letter-spacing: -.01em;--body-sm-tablet-font-size: .875rem;--body-sm-tablet-line-height: 1.25rem;--caption-lg-tablet-font-size: 1rem;--caption-lg-tablet-letter-spacing: -.02em;--caption-lg-tablet-line-height: 1.5rem;--caption-sm-tablet-font-size: .75rem;--caption-sm-tablet-line-height: 1.125rem;--caption-sm-tablet-letter-spacing: -.02em;--caption-sm-bold-tablet-font-size: .75rem;--caption-sm-bold-tablet-line-height: 1rem;--caption-sm-bold-tablet-letter-spacing: -.01em;--caption-uppercase-tablet-line-height: 1rem;--caption-uppercase-tablet-letter-spacing: .04em;--caption-uppercase-tablet-font-size: .8125rem;--numbers-tablet-line-height: 1.375rem;--numbers-tablet-letter-spacing: .04em;--numbers-tablet-font-size: 1rem;--special-styles-code-tablet-line-height: 1.5625rem;--special-styles-code-tablet-font-size: 1.125rem;--special-styles-code-tablet-letter-spacing: 0;--font-mobile-heading: TT Hoves Pro;--font-mobile-paragraph: TT Hoves Pro;--font-mobile-buttons: Inter;--font-mobile-body-inter: Inter;--font-mobile-body-tt-hoves: TT Hoves Pro;--font-mobile-caption: Inter;--font-mobile-numbers: TT Hoves Pro;--font-mobile-code: Hack;--h-extra-mobile-font-size: 3.5rem;--h-extra-mobile-line-height: 3.875rem;--h-extra-mobile-letter-spacing: -.02em;--h1-mobile-letter-spacing: -.01em;--h1-mobile-line-height: 2.75rem;--h1-mobile-font-size: 2.75rem;--h2-mobile-font-size: 2.5rem;--h2-mobile-letter-spacing: -.01em;--h2-mobile-line-height: 2.75rem;--h3-mobile-letter-spacing: -.01em;--h3-mobile-font-size: 2.25rem;--h3-mobile-line-height: 2.5rem;--h4-mobile-letter-spacing: -.01em;--h4-mobile-font-size: 2rem;--h4-mobile-line-height: 2.625rem;--h5-mobile-letter-spacing: -.01em;--h5-mobile-font-size: 1.375rem;--h5-mobile-line-height: 1.5rem;--h6-mobile-font-size: 1.25rem;--h6-mobile-letter-spacing: -.01em;--h6-mobile-line-height: 1.375rem;--h7-mobile-font-size: 1.25rem;--h7-mobile-letter-spacing: -.01em;--h7-mobile-line-height: 1.5rem;--paragraph-mobile-font-size: 1.125rem;--paragraph-mobile-line-height: 1.6875rem;--paragraph-mobile-letter-spacing: -.01em;--button-lg-mobile-font-size: 1rem;--button-lg-mobile-line-height: 1.5rem;--button-lg-mobile-letter-spacing: -.01em;--button-md-mobile-font-size: .875rem;--button-md-mobile-line-height: 1.5rem;--button-md-mobile-letter-spacing: -.01em;--button-sm-mobile-font-size: .75rem;--button-sm-mobile-line-height: 1.5rem;--button-sm-mobile-letter-spacing: -.01em;--body-lg-tt-hoves-mobile-font-size: .875rem;--body-lg-tt-hoves-mobile-line-height: 1.1875rem;--body-lg-tt-hoves-mobile-letter-spacing: -.01em;--body-lg-inter-mobile-font-size: 1rem;--body-lg-inter-mobile-line-height: 1.5rem;--body-lg-inter-mobile-letter-spacing: -.01em;--body-md-tt-hoves-mobile-letter-spacing: -.01em;--body-md-tt-hoves-mobile-font-size: 1rem;--body-md-tt-hoves-mobile-line-height: 1.375rem;--body-md-inter-mobile-letter-spacing: -.01em;--body-md-inter-mobile-font-size: .875rem;--body-md-inter-mobile-line-height: 1.3125rem;--body-sm-mobile-letter-spacing: -.01em;--body-sm-mobile-font-size: .875rem;--body-sm-mobile-line-height: 1.25rem;--caption-lg-mobile-font-size: 1rem;--caption-lg-mobile-letter-spacing: -.02em;--caption-lg-mobile-line-height: 1.5rem;--caption-sm-mobile-font-size: .75rem;--caption-sm-mobile-line-height: 1.125rem;--caption-sm-mobile-letter-spacing: -.02em;--caption-sm-bold-mobile-font-size: .75rem;--caption-sm-bold-mobile-line-height: 1rem;--caption-sm-bold-mobile-letter-spacing: -.01em;--caption-uppercase-mobile-line-height: 1rem;--caption-uppercase-mobile-letter-spacing: .04em;--caption-uppercase-mobile-font-size: .75rem;--numbers-mobile-line-height: 1.375rem;--numbers-mobile-letter-spacing: .04em;--numbers-mobile-font-size: 1rem;--special-styles-code-mobile-line-height: 1.375rem;--special-styles-code-mobile-font-size: 1rem;--special-styles-code-mobile-letter-spacing: 0;--surface-invert-fill-disabled: #c7ccd4;--surface-invert-secondary: #262c36;--surface-invert-primary: #151b23;--surface-invert-fill-deep: #6e7580;--surface-base-fill: #e6e9ed;--overlay-fill-dark: #151b23b3;--surface-invert-fill-pressed: #a8b0ba;--overlay-fill-medium: #151b23a3;--surface-base-fill-light: #eff7ff;--surface-base-secondary: #f5f7fa;--surface-base-primary: #ffffff;--surface-cell-disabled: #f5f7fa80;--surface-invert-fill-dark: #a8b0ba;--surface-invert-fill-hovered: #e6e9ed;--overlay-fill: #001d7a66;--surface-invert-dark: #151b23;--surface-invert-fill-medium: #c7ccd4;--surface-invert-fill-light: #e6e9ed;--text-invert-label: #939ba6;--text-link: #0066ff;--info-text: #00546b;--text-invert-secondary: #e6e9ed;--negative-text: #8f1150;--positive-text-dark: #005925;--text-base-label: #002ea3;--text-invert-pressed: #6e7580;--premium-text: #431878;--text-link-pressed: #001d7a;--text-base-secondary-light: #939ba6;--text-invert-primary: #ffffff;--positive-text: #147536;--negative-text-dark: #6b0039;--text-invert-disabled: #49505b;--warning-text: #6b1000;--text-disabled: #001d7a66;--text-link-hovered: #004cda;--text-invert-hovered: #b7bec7;--text-base-secondary: #49505b;--text-link-light: #2d84ff;--text-link-light-hovered: #5aa1ff;--caution-text: #505900;--text-base-primary: #151b23;--border-primary-light: #5aa1ff;--border-primary-active: #001d7a;--border-invert-secondary: #d6dbe0;--border-primary-medium: #2d84ff;--border-primary: #0066ff;--border-invert-primary: #ffffff;--border-primary-hovered: #004cda;--border-base-secondary: #d6dbe0;--border-base-secondary-light: #e6e9ed;--border-base-primary: #151b23;--border-primary-disabled: #002ea31a;--border-base-light: #e2f0ff;--accent-fill-hovered: #004cda;--accent-primary-hovered: #004cda;--accent-fill: #0066ff;--accent-fill-dark: #001d7a;--accent-fill-medium-disabled: #c7ccd4;--accent-fill-pressed: #002ea3;--accent-primary-dark: #001d7a;--accent-fill-medium-hovered: #a8b0ba;--accent-primary: #0066ff;--accent-fill-disabled: #002ea31a;--accent-fill-medium: #b7bec7;--accent-fill-medium-pressed: #939ba6;--accent-link: #0039b5;--accent-fill-focused: #8fc1ff;--accent-fill-light-hovered: #001d7a12;--accent-fill-light: #e2f0ff;--positive-icon: #29954b;--negative-icon-light: #b22265;--negative-icon: #8f1150;--icon-disabled: #001d7a66;--icon-invert: #c7ccd4;--icon-primary-light-hovered: #5aa1ff;--icon-base-secondary: #6e7580;--icon-primary: #383e48;--negative-fill-light-pressed: #ffafc8;--negative-fill: #f55591;--negative-fill-dark: #6b0039;--negative-fill-medium: #ff76a6;--negative-fill-light-hovered: #ffcbdb;--negative-fill-light: #ffe8ef;--warning-fill-dark: #6b1000;--warning-fill-medium: #f89364;--warning-primary: #f5804e;--warning-fill: #ffbc98;--warning-fill-light: #ffebde;--positive-fill-dark: #005925;--positive-fill: #47cc69;--positive-fill-medium: #81eb96;--positive-fill-light: #cffad6;--premium-fill: #9560ff;--premium-fill-medium: #b292fc;--premium-fill-light: #ece5ff;--info-fill: #3dc9d1;--info-fill-medium: #63dfe5;--info-fill-light: #b0f7f7;--caution-fill: #fcf58c;--caution-fill-dark: #e4e40d;--caution-fill-light: #fcf9d7;--disabled-progress-bar-right-gradient: #c7ccd4;--primary-progress-bar-left-gradient: #f55591;--primary-progress-bar-track: #e6e9ed;--disabled-progress-bar-track: #e6e9ed;--primary-progress-bar-right-gradient: #ffbc98;--disabled-progress-bar-left-gradient: #e6e9ed;--borderradius-none: 0;--borderradius-focusedstroke: 4px;--borderradius-muistroke: 4px;--borderradius-pill: 360px;--borderradius-cardsm: 12px;--borderradius-cardlg: 24px;--borderradius-button: 360px;--strokewidth-none: 0;--strokewidth-xs: 1px;--strokewidth-sm: 2px;--strokewidth-md: 4px;--strokewidth-lg: 8px;--insetspacing-5xs: .25rem;--insetspacing-4xs: .5rem;--insetspacing-3xs: .75rem;--insetspacing-2xs: 1rem;--insetspacing-xs: 1.25rem;--insetspacing-s: 1.5rem;--insetspacing-m: 1.75rem;--insetspacing-l: 2rem;--insetspacing-xl: 2.5rem;--insetspacing-2xl: 2.75rem;--insetspacing-3xl: 3rem;--insetspacing-4xl: 3.5rem;--insetspacing-5xl: 4rem;--insetspacing-6xl: 4.5rem;--insetspacing-7xl: 5rem;--insetspacing-8xl: 6rem;--insetspacing-9xl: 7.5rem;--insetspacing-10xl: 10rem;--stackspacing-5xs: .25rem;--stackspacing-4xs: .5rem;--stackspacing-3xs: .75rem;--stackspacing-2xs: 1rem;--stackspacing-xs: 1.25rem;--stackspacing-s: 1.5rem;--stackspacing-m: 1.75rem;--stackspacing-l: 2rem;--stackspacing-xl: 2.5rem;--stackspacing-2xl: 2.75rem;--stackspacing-3xl: 3rem;--stackspacing-4xl: 3.5rem;--stackspacing-5xl: 4rem;--stackspacing-6xl: 4.5rem;--stackspacing-7xl: 5rem;--stackspacing-8xl: 6rem;--stackspacing-9xl: 7.5rem;--stackspacing-10xl: 10rem;--inlinespacing-5xs: .25rem;--inlinespacing-4xs: .5rem;--inlinespacing-3xs: .75rem;--inlinespacing-2xs: 1rem;--inlinespacing-xs: 1.25rem;--inlinespacing-s: 1.5rem;--inlinespacing-m: 1.75rem;--inlinespacing-l: 2rem;--inlinespacing-xl: 2.5rem;--inlinespacing-2xl: 2.75rem;--inlinespacing-3xl: 3rem;--inlinespacing-4xl: 3.5rem;--inlinespacing-5xl: 4rem;--inlinespacing-6xl: 4.5rem;--inlinespacing-7xl: 5rem;--inlinespacing-8xl: 6rem;--inlinespacing-9xl: 7.5rem;--inlinespacing-10xl: 10rem}._h1_1765w_1{font-size:clamp(2.75rem,1.8779vw + 2.3099rem,4rem);line-height:clamp(2.75rem,1.8779vw + 2.3099rem,4rem);letter-spacing:-.02em;font-family:var(--ui-font-primary);font-weight:500;font-feature-settings:"ss01" 1,"ss02" 1,"ss04" 1;margin:0}._h2_1eque_1{font-size:clamp(2.5rem,1.1268vw + 2.2359rem,3.25rem);line-height:clamp(2.75rem,1.2207vw + 2.4639rem,3.5625rem);letter-spacing:-.02em;font-family:var(--ui-font-primary);font-weight:500;font-feature-settings:"ss01" 1,"ss02" 1,"ss04" 1;margin:0}._paragraph_11t85_1{font-size:clamp(1rem,.3756vw + .912rem,1.25rem);line-height:clamp(1.5rem,.5634vw + 1.368rem,1.875rem);letter-spacing:-.02em;font-family:var(--ui-font-body);font-weight:400;font-feature-settings:"dlig" 1;margin:0}._list_1p627_1{display:flex;flex-direction:column;gap:clamp(.75rem,.3756vw + .662rem,1rem);margin:clamp(1rem,.7512vw + .8239rem,1.5rem) 0 0;padding:0;list-style:none}._list_1p627_1 ._list_1p627_1{margin-top:clamp(.75rem,.3756vw + .662rem,1rem);margin-left:calc(clamp(1rem,.7512vw + .8239rem,1.5rem) - (clamp(.25rem,.3756vw + .162rem,.5rem) + 8px))}._item_1p627_14{position:relative;font-size:clamp(1rem,.3756vw + .912rem,1.25rem);line-height:clamp(1.5rem,.5634vw + 1.368rem,1.875rem);letter-spacing:-.02em;font-family:var(--ui-font-body);font-weight:400;font-feature-settings:"dlig" 1}._list_1p627_1 ._item_1p627_14{padding-left:calc(clamp(.25rem,.3756vw + .162rem,.5rem) + 8px)}._list_1p627_1 ._item_1p627_14:before{content:"";position:absolute;top:.4lh;left:0;box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:var(--accent-primary)}._list_1p627_1 ._list_1p627_1 ._item_1p627_14:before{border:var(--strokewidth-xs) solid var(--accent-primary);background:transparent}._list_1p627_1 ._list_1p627_1 ._list_1p627_1 ._item_1p627_14:before{border:0;border-radius:0;background:var(--accent-primary)}._list_1p627_1 ._list_1p627_1 ._list_1p627_1 ._list_1p627_1 ._item_1p627_14:before{border-radius:50%}._button_81qo0_1{appearance:none;border:none;background:none;display:inline-block;text-decoration:none;cursor:pointer;border-radius:var(--borderradius-button);padding:clamp(1rem,.3756vw + .912rem,1.25rem) clamp(1.5rem,.7512vw + 1.3239rem,2rem);font-size:clamp(1rem,.3756vw + .912rem,1.25rem);line-height:1.5rem;letter-spacing:-.02em;font-family:var(--ui-font-body);font-weight:500;font-feature-settings:"dlig" 1;transition:background-color .15s ease,color .15s ease}._button_81qo0_1:focus-visible{outline:var(--strokewidth-sm) solid var(--accent-fill-focused);outline-offset:2px}._button_81qo0_1:disabled{cursor:not-allowed}._sm_81qo0_26{font-size:clamp(.875rem,.2817vw + .809rem,1.0625rem);line-height:1.5rem;letter-spacing:-.02em;padding:clamp(.5rem,.3756vw + .412rem,.75rem) clamp(1rem,.3756vw + .912rem,1.25rem)}._primary_81qo0_33{background-color:var(--accent-fill);color:var(--text-invert-primary)}._primary_81qo0_33:hover:not(:disabled){background-color:var(--accent-fill-hovered);color:var(--text-invert-primary)}._primary_81qo0_33:active:not(:disabled){background-color:var(--accent-fill-dark)}._primary_81qo0_33:disabled{background-color:var(--surface-invert-fill-disabled);color:var(--text-invert-primary)}._secondary_81qo0_49{background-color:transparent;color:var(--text-base-primary);box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--border-base-primary);transition:box-shadow .15s ease,color .15s ease}._secondary_81qo0_49:hover:not(:disabled){box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--accent-primary-hovered);color:var(--text-link-hovered)}._secondary_81qo0_49:active:not(:disabled){box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--accent-primary-dark);color:var(--text-link-pressed)}._secondary_81qo0_49:disabled{box-shadow:inset 0 0 0 var(--strokewidth-sm) var(--border-base-secondary);color:var(--text-invert-hovered)}._negative_81qo0_68{background-color:var(--negative-fill-light);color:var(--negative-text)}._negative_81qo0_68:hover:not(:disabled){background-color:var(--negative-fill-light-hovered);color:var(--negative-text)}._negative_81qo0_68:active:not(:disabled){background-color:var(--negative-fill-light-pressed)}._negative_81qo0_68:disabled{background-color:var(--accent-fill-disabled);color:var(--text-disabled)}._nav_dxkjl_3{min-width:0}._list_dxkjl_7{display:flex;flex-direction:column;gap:clamp(.5rem,.3756vw + .412rem,.75rem);margin:0;padding:0;list-style:none}._item_dxkjl_16{min-width:0}._link_dxkjl_20{font-size:1rem;line-height:1.5rem;letter-spacing:-.01em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-family:var(--ui-font-body);font-weight:500;font-feature-settings:"dlig" 1;color:var(--text-base-primary);text-decoration:none;cursor:pointer;overflow-wrap:break-word;transition:color .15s ease}._link_dxkjl_20:hover{-webkit-line-clamp:none;line-clamp:none;color:var(--text-link)}._link_dxkjl_20:focus-visible{-webkit-line-clamp:none;line-clamp:none}._current_dxkjl_48{-webkit-line-clamp:none;line-clamp:none;color:var(--text-link)}@media(hover:none){._link_dxkjl_20{-webkit-line-clamp:none;line-clamp:none}}@keyframes _hero-rise_93692_1{0%{opacity:0;transform:translateY(var(--hero-rise, 50px))}to{opacity:1;transform:none}}._hero_93692_11{container-type:inline-size;background-color:var(--surface-base-secondary)}._layout_93692_16{display:grid;padding:clamp(2.75rem,.7512vw + 2.3239rem,3rem) 0}._content_93692_21{min-width:0}._titleLine_93692_25{display:block}._titleWord_93692_29{animation:_hero-rise_93692_1 .67s cubic-bezier(.16,1,.03,1) both;display:inline-block;animation-delay:calc(.03s + var(--hero-index, 0) * 15ms)}._description_93692_35{font-size:clamp(1rem,.3756vw + .912rem,1.25rem);line-height:clamp(1.5rem,.5634vw + 1.368rem,1.875rem);letter-spacing:-.02em;animation:_hero-rise_93692_1 .67s cubic-bezier(.16,1,.03,1) both;margin:max(clamp(1.5rem,.7512vw + 1.3239rem,2rem),1.75rem) 0 0;font-family:var(--ui-font-body);font-weight:400;font-feature-settings:"dlig" 1;color:var(--text-base-secondary);animation-delay:.03s}._media_93692_48{animation:_hero-rise_93692_1 .67s cubic-bezier(.16,1,.03,1) both;--hero-rise: 100px;order:2;width:100%;margin-top:clamp(1.75rem,1.1268vw + 1.4859rem,2.5rem);animation-delay:.13s}._media_93692_48 :where(img,svg){display:block;max-width:100%;height:auto}@container (min-width: 1089px){._layout_93692_16{display:flow-root}._content_93692_21{max-width:700px}._media_93692_48{float:right;width:auto;max-width:620px;margin-top:0;shape-outside:circle(30%);shape-margin:clamp(1.75rem,1.1268vw + 1.4859rem,2.5rem)}}@media(prefers-reduced-motion:reduce){@keyframes _hero-rise_93692_1{0%{opacity:0}to{opacity:1}}}@keyframes _chip-in_1l94m_1{0%{opacity:0;transform:scale(.8)}}@keyframes _stroke-in_1l94m_1{0%{outline-color:transparent}}@keyframes _message-in_1l94m_1{0%{opacity:0}}._field_1l94m_17{position:relative;display:flex;flex-direction:column;gap:clamp(.25rem,.3756vw + .162rem,.5rem);padding:clamp(.5rem,.3756vw + .412rem,.75rem) clamp(1rem,.3756vw + .912rem,1.25rem);border-radius:var(--borderradius-cardsm);background-color:var(--surface-base-secondary);font-feature-settings:"dlig" 1;cursor:text;transition:padding .2s cubic-bezier(0,0,.2,1),gap .2s cubic-bezier(0,0,.2,1)}._field_1l94m_17:focus-within{outline:var(--strokewidth-sm) solid var(--accent-fill-focused)}._field_1l94m_17._error_1l94m_33{outline:var(--strokewidth-sm) solid var(--negative-fill);animation:_stroke-in_1l94m_1 .15s ease}._message_1l94m_38{font-size:.875rem;line-height:1.25rem;letter-spacing:-.01em;margin:0;padding-inline:clamp(1rem,.3756vw + .912rem,1.25rem);font-family:var(--ui-font-body);font-weight:400;font-feature-settings:"dlig" 1;color:var(--negative-text)}._message_1l94m_38:not(:empty){margin-top:clamp(.25rem,.3756vw + .162rem,.5rem);animation:_message-in_1l94m_1 .15s ease}._content_1l94m_54{display:flex;flex-direction:column;gap:clamp(.125rem,.1878vw + .081rem,.25rem);transition:gap .2s cubic-bezier(0,0,.2,1)}._reveal_1l94m_61{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s cubic-bezier(0,0,.2,1)}._reveal_1l94m_61>*{min-height:0;overflow:clip}._label_1l94m_71{font-size:.875rem;line-height:1.25rem;letter-spacing:-.01em;font-family:var(--ui-font-primary);font-weight:400;color:var(--text-base-secondary);overflow-wrap:break-word;transition:font-size .2s cubic-bezier(0,0,.2,1),line-height .2s cubic-bezier(0,0,.2,1),letter-spacing .2s cubic-bezier(0,0,.2,1)}._tags_1l94m_82{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.25rem,.3756vw + .162rem,.5rem)}._input_1l94m_89{font-size:clamp(.875rem,.1878vw + .831rem,1rem);line-height:clamp(1.3125rem,.2817vw + 1.2465rem,1.5rem);letter-spacing:-.02em;flex:1 0 auto;margin:0;padding:0;border:0;outline:0;background:transparent;font-family:var(--ui-font-body);font-weight:400;font-feature-settings:inherit;color:var(--text-base-primary);caret-color:var(--negative-fill)}._counter_1l94m_106{font-size:.75rem;line-height:1.125rem;letter-spacing:-.02em;margin:0;font-family:var(--ui-font-body);font-weight:400;color:var(--text-base-secondary);text-align:right;transition:opacity .2s cubic-bezier(0,0,.2,1),visibility .2s}._field_1l94m_17:not(:focus-within,._empty_1l94m_118) ._input_1l94m_89{position:absolute;width:1px;opacity:0}._empty_1l94m_118:not(:focus-within){gap:0;padding-block:clamp(1rem,.7512vw + .8239rem,1.5rem)}._empty_1l94m_118:not(:focus-within) ._content_1l94m_54{gap:0}._empty_1l94m_118:not(:focus-within) ._reveal_1l94m_61{grid-template-rows:0fr}._empty_1l94m_118:not(:focus-within) ._label_1l94m_71{font-size:clamp(.875rem,.1878vw + .831rem,1rem);line-height:clamp(1.3125rem,.2817vw + 1.2465rem,1.5rem);letter-spacing:-.02em;font-family:var(--ui-font-body)}._empty_1l94m_118:not(:focus-within) ._counter_1l94m_106{visibility:hidden;opacity:0}._disabled_1l94m_145{cursor:default}._disabled_1l94m_145 ._label_1l94m_71,._disabled_1l94m_145 ._counter_1l94m_106,._disabled_1l94m_145 ._chip_1l94m_150{color:var(--text-disabled)}._chip_1l94m_150{font-size:clamp(.875rem,.1878vw + .831rem,1rem);line-height:clamp(1.3125rem,.2817vw + 1.2465rem,1.5rem);letter-spacing:-.02em;display:flex;align-items:center;gap:clamp(.25rem,.3756vw + .162rem,.5rem);max-width:100%;padding:clamp(.125rem,.1878vw + .081rem,.25rem) clamp(.75rem,.3756vw + .662rem,1rem);border-radius:var(--borderradius-pill);background-color:var(--surface-base-fill);font-family:var(--ui-font-body);font-weight:400;color:var(--text-base-primary);cursor:default;animation:_chip-in_1l94m_1 .15s cubic-bezier(0,0,.2,1);transition:background-color .15s ease,color .15s ease}._chipText_1l94m_173{min-width:0;overflow-wrap:anywhere}._remove_1l94m_178{display:flex;flex-shrink:0;margin:0;padding:0;border:0;background:none;color:var(--icon-base-secondary);cursor:pointer}._invalid_1l94m_189{background-color:var(--negative-fill-light);color:var(--negative-text)}._invalid_1l94m_189 ._remove_1l94m_178{color:var(--negative-icon)}@media(prefers-reduced-motion:reduce){._field_1l94m_17,._content_1l94m_54,._label_1l94m_71,._reveal_1l94m_61{transition:none}@keyframes _chip-in_1l94m_1{0%{opacity:0}}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@smartyweb/ui",
-	"version": "2.0.0",
+	"version": "2.2.0-max-storefront-handoff.g63afc43",
 	"type": "module",
 	"main": "dist/index.cjs",
 	"module": "dist/index.js",
@@ -29,6 +29,7 @@
 		"lint": "node scripts/check-use-client.mjs && eslint src --max-warnings 0 && stylelint 'src/**/*.scss'",
 		"mirror": "node scripts/mirror-check.mjs",
 		"mirror:selftest": "node scripts/mirror-selftest.mjs",
+		"visual": "node scripts/visual-measure.mjs",
 		"format:check": "prettier --check ."
 	},
 	"peerDependencies": {
@@ -44,6 +45,9 @@
 		"@vitejs/plugin-react": "^5.1.3",
 		"eslint": "^10.0.0",
 		"eslint-plugin-react-hooks": "^7.1.1",
+		"pixelmatch": "^7.2.0",
+		"playwright-core": "^1.63.0",
+		"pngjs": "^7.0.0",
 		"prettier": "^3.8.1",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",