@tedi-design-system/react 18.0.0-rc.2 → 18.0.0-rc.20

package/src/tedi/components/form/time-picker/components/time-grid/time-grid.es.js

@@ -1,101 +1,84 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useId as A, useRef as C, useEffect as I, createElement as N } from "react";
-import h from "../../../../../../../external/classnames/index.es.js";
-import { Button as $ } from "../../../../buttons/button/button.es.js";
-import { ChoiceGroup as R } from "../../../choice-group/choice-group.es.js";
+import { jsx as l } from "react/jsx-runtime";
+import A from "../../../../../../../external/classnames/index.es.js";
+import { useId as I, useRef as _, useEffect as N } from "react";
+import { ChoiceGroup as $ } from "../../../choice-group/choice-group.es.js";
 import d from "../../time-picker.module.scss.es.js";
-import { useLabels as D } from "../../../../../providers/label-provider/use-labels.es.js";
-import { Row as E } from "../../../../layout/grid/row.es.js";
-import { Col as G } from "../../../../layout/grid/col.es.js";
-const L = ({
-  times: l,
-  value: o,
-  onSelect: u,
-  className: k,
-  colWidth: a = { xs: 6, md: 4 },
-  variant: p = "button",
-  bordered: g = !0
+import { useLabels as v } from "../../../../../providers/label-provider/use-labels.es.js";
+const C = ({
+  times: p,
+  value: n,
+  onSelect: f,
+  className: b,
+  colWidth: s = { xs: 6, md: 4 },
+  variant: m = "button",
+  bordered: y = !0
 }) => {
-  const m = A(), { getLabel: w } = D(), s = C(null);
-  I(() => {
-    if (!o) return;
-    const e = s.current;
+  const c = I(), { getLabel: h } = v(), a = _(null);
+  N(() => {
+    if (!n) return;
+    const e = a.current;
     if (!e) return;
-    const r = e.querySelector(
-      `input[type="radio"][value="${o}"], button[data-time="${o}"]`
-    );
+    const r = e.querySelector(`input[type="radio"][value="${n}"]`);
     r == null || r.focus({ preventScroll: !0 });
   }, []);
-  const _ = (e) => {
-    var b;
-    if (p !== "radio") return;
-    const r = s.current;
+  const k = (e) => {
+    var u;
+    const r = a.current;
     if (!r) return;
     const t = Array.from(r.querySelectorAll('input[type="radio"]:not([disabled])'));
     if (t.length === 0) return;
-    const i = t.findIndex((x) => x === document.activeElement);
-    let n;
+    const o = t.findIndex((x) => x === document.activeElement);
+    let i;
     switch (e.key) {
       case "ArrowDown":
       case "ArrowRight":
-        n = i < 0 || i === t.length - 1 ? 0 : i + 1;
+        i = o < 0 || o === t.length - 1 ? 0 : o + 1;
         break;
       case "ArrowUp":
       case "ArrowLeft":
-        n = i <= 0 ? t.length - 1 : i - 1;
+        i = o <= 0 ? t.length - 1 : o - 1;
         break;
       case "Home":
-        n = 0;
+        i = 0;
         break;
       case "End":
-        n = t.length - 1;
+        i = t.length - 1;
         break;
       default:
         return;
     }
-    e.preventDefault(), (b = t[n]) == null || b.focus();
-  }, f = h(
+    e.preventDefault(), (u = t[i]) == null || u.focus();
+  }, w = A(
     d["tedi-time-picker__grid"],
     {
-      [d["tedi-time-picker__grid--borderless"]]: !g
+      [d["tedi-time-picker__grid--borderless"]]: !y
     },
-    k
-  ), y = typeof a == "object" ? a : { width: a };
-  return p === "radio" ? /* @__PURE__ */ c("div", { ref: s, className: f, onKeyDown: _, children: /* @__PURE__ */ c(
-    R,
+    b
+  ), g = typeof s == "object" ? s : { width: s };
+  return /* @__PURE__ */ l("div", { ref: a, className: w, onKeyDown: k, children: /* @__PURE__ */ l(
+    $,
     {
-      id: `time-picker-group-${m}`,
-      label: w("timePicker.pickTime"),
+      id: `time-picker-group-${c}`,
+      label: h("timePicker.pickTime"),
       inputType: "radio",
-      name: `time-grid-${m}`,
-      value: o,
-      onChange: (e) => u(e),
-      items: l.map((e) => ({
-        id: `time-${m}-${e}`,
-        label: e,
+      name: `time-grid-${c}`,
+      value: n,
+      onChange: (e) => f(e),
+      items: p.map((e) => ({
+        id: `time-${c}-${e}`,
+        label: m === "button" ? /* @__PURE__ */ l("span", { className: d["tedi-time-picker__slot-label"], children: e }) : e,
         value: e,
-        colProps: y
+        colProps: g
       })),
       direction: "row",
       variant: "card",
-      showIndicator: !0,
+      showIndicator: m === "radio",
       color: "secondary",
       hideLabel: !0
     }
-  ) }) : /* @__PURE__ */ c("div", { ref: s, className: f, children: /* @__PURE__ */ c(E, { gutter: 2, children: l.map((e) => /* @__PURE__ */ N(G, { ...y, key: e }, /* @__PURE__ */ c(
-    $,
-    {
-      noStyle: !0,
-      "data-time": e,
-      className: h(d["tedi-time-picker__grid-item"], {
-        [d["tedi-time-picker__grid-item--selected"]]: e === o
-      }),
-      onClick: () => u(e),
-      children: e
-    }
-  ))) }) });
+  ) });
 };
-L.displayName = "TimeGrid";
+C.displayName = "TimeGrid";
 export {
-  L as TimeGrid
+  C as TimeGrid
 };

package/src/tedi/components/form/time-picker/components/time-wheel/time-wheel.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),j=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),t=require("../../../time-field/time-field-helpers.cjs.js"),p=require("../../time-picker.module.scss.cjs.js"),F=({hours:c,minutes:l,selectedHour:a,selectedMinute:s,onChange:x,className:P,bordered:L=!0})=>{const I=n.useId(),i=n.useRef(null),d=n.useRef(null),f=n.useRef(!1),m=n.useRef(!1),g=n.useRef(),k=n.useRef(),v=n.useRef(-1),b=n.useRef(-1),[M,R]=n.useState(null),[C,$]=n.useState(null),N=(r,e)=>Math.max(0,Math.min(e-1,r)),A=(r,e,o)=>{const T=r.current;if(!T||e<0)return;const w=t.getScrollTopForIndex(e);o?f.current=!0:m.current=!0,T.scrollTo({top:w,behavior:"instant"}),requestAnimationFrame(()=>{o?f.current=!1:m.current=!1})};n.useLayoutEffect(()=>{const r=c.indexOf(a),e=l.indexOf(s);r!==v.current&&(v.current=r,A(i,r,!0)),e!==b.current&&(b.current=e,A(d,e,!1)),R(r),$(e)},[c,l,a,s]);const q=n.useRef(()=>{});q.current=()=>{const r=i.current;if(!r||f.current)return;t.clearScrollTimeout(g.current);const e=N(t.snapToNearestItem(r.scrollTop,c.length),c.length);R(e);const o=t.getScrollTopForIndex(e);t.needsScrollCorrection(r.scrollTop,o,8)&&(f.current=!0,t.scrollToIndex(r,e,"instant"),requestAnimationFrame(()=>{f.current=!1})),e!==v.current&&(v.current=e,x(c[e],s))};const y=n.useRef(()=>{});y.current=()=>{const r=d.current;if(!r||m.current)return;t.clearScrollTimeout(k.current);const e=N(t.snapToNearestItem(r.scrollTop,l.length),l.length);$(e);const o=t.getScrollTopForIndex(e);t.needsScrollCorrection(r.scrollTop,o,8)&&(m.current=!0,t.scrollToIndex(r,e,"instant"),requestAnimationFrame(()=>{m.current=!1})),e!==b.current&&(b.current=e,x(a,l[e]))},n.useEffect(()=>{const r=i.current,e=d.current;if(!r||!e)return;const o=()=>q.current(),T=()=>y.current();return r.addEventListener("scrollend",o),e.addEventListener("scrollend",T),()=>{r.removeEventListener("scrollend",o),e.removeEventListener("scrollend",T)}},[]);const H=()=>{if(!i.current||f.current)return;const r=N(t.snapToNearestItem(i.current.scrollTop,c.length),c.length);R(r),t.clearScrollTimeout(g.current),g.current=setTimeout(()=>q.current(),150)},K=()=>{if(!d.current||m.current)return;const r=N(t.snapToNearestItem(d.current.scrollTop,l.length),l.length);$(r),t.clearScrollTimeout(k.current),k.current=setTimeout(()=>y.current(),150)},W=r=>{const e=c[r];!e||!i.current||(t.clearScrollTimeout(g.current),v.current=r,R(r),x(e,s),f.current=!0,t.scrollToIndex(i.current,r,"smooth"),setTimeout(()=>{f.current=!1},300))},U=r=>{const e=l[r];!e||!d.current||(t.clearScrollTimeout(k.current),b.current=r,$(r),x(a,e),m.current=!0,t.scrollToIndex(d.current,r,"smooth"),setTimeout(()=>{m.current=!1},300))},D=(r,e,o,T)=>w=>{const u=e.indexOf(o);if(u===-1)return;let h=-1,_=!1;switch(w.key){case"ArrowDown":h=(u+1)%e.length,_=u===e.length-1;break;case"ArrowUp":h=(u-1+e.length)%e.length,_=u===0;break;case"Home":h=0;break;case"End":h=e.length-1;break;case"PageDown":h=(u+5)%e.length,_=u+5>=e.length;break;case"PageUp":h=(u-5+e.length)%e.length,_=u-5<0;break;case"Enter":case" ":w.preventDefault(),T(e[u]);return;default:return}w.preventDefault();const O=r==="hour"?i.current:d.current,S=O==null?void 0:O.querySelector(`#${CSS.escape(`${I}-${r}-${h}`)}`);S==null||S.focus(),S==null||S.scrollIntoView({block:"center",behavior:_?"auto":"smooth"})};return n.useEffect(()=>()=>{t.clearScrollTimeout(g.current),t.clearScrollTimeout(k.current)},[]),E.jsxs("div",{className:j.default(p.default["tedi-time-picker__wheel"],{[p.default["tedi-time-picker__wheel--borderless"]]:!L},P),children:[E.jsx("div",{ref:i,role:"listbox","aria-label":"Hours",tabIndex:0,"aria-activedescendant":`${I}-hour-${c.indexOf(a)}`,className:p.default["tedi-time-picker__wheel-column"],onScroll:H,onKeyDown:D("hour",c,a,r=>x(r,s)),children:c.map((r,e)=>E.jsx("div",{className:j.default(p.default["tedi-time-picker__wheel-item"],{[p.default["tedi-time-picker__wheel-item--selected"]]:e===(M??c.indexOf(a))}),onClick:()=>W(e),id:`${I}-hour-${e}`,role:"option","aria-selected":r===a,children:r},r))}),E.jsx("div",{ref:d,role:"listbox",className:p.default["tedi-time-picker__wheel-column"],onScroll:K,"aria-label":"Minutes",tabIndex:0,"aria-activedescendant":`${I}-minute-${l.indexOf(s)}`,onKeyDown:D("minute",l,s,r=>x(a,r)),children:l.map((r,e)=>E.jsx("div",{className:j.default(p.default["tedi-time-picker__wheel-item"],{[p.default["tedi-time-picker__wheel-item--selected"]]:e===(C??l.indexOf(s))}),onClick:()=>U(e),id:`${I}-minute-${e}`,role:"option","aria-selected":r===s,children:r},r))})]})};F.displayName="TimeWheel";exports.TimeWheel=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),j=require("../../../../../../../external/classnames/index.cjs.js"),n=require("react"),t=require("../../../time-field/time-field-helpers.cjs.js"),p=require("../../time-picker.module.scss.cjs.js"),F=({hours:c,minutes:l,selectedHour:s,selectedMinute:a,onChange:x,className:P,bordered:L=!0})=>{const I=n.useId(),i=n.useRef(null),d=n.useRef(null),f=n.useRef(!1),m=n.useRef(!1),g=n.useRef(),k=n.useRef(),v=n.useRef(-1),b=n.useRef(-1),[M,R]=n.useState(null),[C,$]=n.useState(null),N=(r,e)=>Math.max(0,Math.min(e-1,r)),A=(r,e,o)=>{const T=r.current;if(!T||e<0)return;const w=t.getScrollTopForIndex(e);o?f.current=!0:m.current=!0,T.scrollTo({top:w,behavior:"instant"}),requestAnimationFrame(()=>{o?f.current=!1:m.current=!1})};n.useLayoutEffect(()=>{const r=c.indexOf(s),e=l.indexOf(a);r!==v.current&&(v.current=r,A(i,r,!0)),e!==b.current&&(b.current=e,A(d,e,!1)),R(r),$(e)},[c,l,s,a]);const q=n.useRef(()=>{});q.current=()=>{const r=i.current;if(!r||f.current)return;t.clearScrollTimeout(g.current);const e=N(t.snapToNearestItem(r.scrollTop,c.length),c.length);R(e);const o=t.getScrollTopForIndex(e);t.needsScrollCorrection(r.scrollTop,o,8)&&(f.current=!0,t.scrollToIndex(r,e,"instant"),requestAnimationFrame(()=>{f.current=!1})),e!==v.current&&(v.current=e,x(c[e],a))};const y=n.useRef(()=>{});y.current=()=>{const r=d.current;if(!r||m.current)return;t.clearScrollTimeout(k.current);const e=N(t.snapToNearestItem(r.scrollTop,l.length),l.length);$(e);const o=t.getScrollTopForIndex(e);t.needsScrollCorrection(r.scrollTop,o,8)&&(m.current=!0,t.scrollToIndex(r,e,"instant"),requestAnimationFrame(()=>{m.current=!1})),e!==b.current&&(b.current=e,x(s,l[e]))},n.useEffect(()=>{const r=i.current,e=d.current;if(!r||!e)return;const o=()=>q.current(),T=()=>y.current();return r.addEventListener("scrollend",o),e.addEventListener("scrollend",T),()=>{r.removeEventListener("scrollend",o),e.removeEventListener("scrollend",T)}},[]);const H=()=>{if(!i.current||f.current)return;const r=N(t.snapToNearestItem(i.current.scrollTop,c.length),c.length);R(r),t.clearScrollTimeout(g.current),g.current=setTimeout(()=>q.current(),150)},K=()=>{if(!d.current||m.current)return;const r=N(t.snapToNearestItem(d.current.scrollTop,l.length),l.length);$(r),t.clearScrollTimeout(k.current),k.current=setTimeout(()=>y.current(),150)},W=r=>{const e=c[r];!e||!i.current||(t.clearScrollTimeout(g.current),v.current=r,R(r),x(e,a),f.current=!0,t.scrollToIndex(i.current,r,"smooth"),setTimeout(()=>{f.current=!1},300))},U=r=>{const e=l[r];!e||!d.current||(t.clearScrollTimeout(k.current),b.current=r,$(r),x(s,e),m.current=!0,t.scrollToIndex(d.current,r,"smooth"),setTimeout(()=>{m.current=!1},300))},D=(r,e,o,T)=>w=>{const u=e.indexOf(o);if(u===-1)return;let h=-1,_=!1;switch(w.key){case"ArrowDown":h=(u+1)%e.length,_=u===e.length-1;break;case"ArrowUp":h=(u-1+e.length)%e.length,_=u===0;break;case"Home":h=0;break;case"End":h=e.length-1;break;case"PageDown":h=(u+5)%e.length,_=u+5>=e.length;break;case"PageUp":h=(u-5+e.length)%e.length,_=u-5<0;break;case"Enter":case" ":w.preventDefault(),T(e[u]);return;default:return}w.preventDefault();const O=r==="hour"?i.current:d.current,S=O==null?void 0:O.querySelector(`#${CSS.escape(`${I}-${r}-${h}`)}`);S==null||S.focus(),S==null||S.scrollIntoView({block:"center",behavior:_?"instant":"smooth"})};return n.useEffect(()=>()=>{t.clearScrollTimeout(g.current),t.clearScrollTimeout(k.current)},[]),E.jsxs("div",{className:j.default(p.default["tedi-time-picker__wheel"],{[p.default["tedi-time-picker__wheel--borderless"]]:!L},P),children:[E.jsx("div",{ref:i,role:"listbox","aria-label":"Hours",tabIndex:0,"aria-activedescendant":`${I}-hour-${c.indexOf(s)}`,className:p.default["tedi-time-picker__wheel-column"],onScroll:H,onKeyDown:D("hour",c,s,r=>x(r,a)),children:c.map((r,e)=>E.jsx("div",{className:j.default(p.default["tedi-time-picker__wheel-item"],{[p.default["tedi-time-picker__wheel-item--selected"]]:e===(M??c.indexOf(s))}),onClick:()=>W(e),id:`${I}-hour-${e}`,role:"option","aria-selected":r===s,children:r},r))}),E.jsx("div",{ref:d,role:"listbox",className:p.default["tedi-time-picker__wheel-column"],onScroll:K,"aria-label":"Minutes",tabIndex:0,"aria-activedescendant":`${I}-minute-${l.indexOf(a)}`,onKeyDown:D("minute",l,a,r=>x(s,r)),children:l.map((r,e)=>E.jsx("div",{className:j.default(p.default["tedi-time-picker__wheel-item"],{[p.default["tedi-time-picker__wheel-item--selected"]]:e===(C??l.indexOf(a))}),onClick:()=>U(e),id:`${I}-minute-${e}`,role:"option","aria-selected":r===a,children:r},r))})]})};F.displayName="TimeWheel";exports.TimeWheel=F;

package/src/tedi/components/form/time-picker/components/time-wheel/time-wheel.es.js

@@ -107,7 +107,7 @@ const Y = ({
     }
     I.preventDefault();
     const q = r === "hour" ? a.current : s.current, T = q == null ? void 0 : q.querySelector(`#${CSS.escape(`${g}-${r}-${x}`)}`);
-    T == null || T.focus(), T == null || T.scrollIntoView({ block: "center", behavior: b ? "auto" : "smooth" });
+    T == null || T.focus(), T == null || T.scrollIntoView({ block: "center", behavior: b ? "instant" : "smooth" });
   };
   return j(() => () => {
     d(v.current), d(S.current);

package/src/tedi/components/form/time-picker/time-picker.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-time-picker__wheel":"tedi-time-picker__wheel-3c73e157","tedi-time-picker__wheel--borderless":"tedi-time-picker__wheel--borderless-42e8669c","tedi-time-picker__wheel-column":"tedi-time-picker__wheel-column-02048315","tedi-time-picker__wheel-item":"tedi-time-picker__wheel-item-78600fe1","tedi-time-picker__wheel-item--selected":"tedi-time-picker__wheel-item--selected-cc3c7194","tedi-time-picker__grid":"tedi-time-picker__grid-5cf42402","tedi-time-picker__grid--borderless":"tedi-time-picker__grid--borderless-805d6413","tedi-time-picker__grid-item":"tedi-time-picker__grid-item-53c9d41d","tedi-time-picker__grid-item--selected":"tedi-time-picker__grid-item--selected-32fb5e5d"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-time-picker__wheel":"tedi-time-picker__wheel-3c73e157","tedi-time-picker__wheel--borderless":"tedi-time-picker__wheel--borderless-42e8669c","tedi-time-picker__wheel-column":"tedi-time-picker__wheel-column-02048315","tedi-time-picker__wheel-item":"tedi-time-picker__wheel-item-78600fe1","tedi-time-picker__wheel-item--selected":"tedi-time-picker__wheel-item--selected-cc3c7194","tedi-time-picker__grid":"tedi-time-picker__grid-5cf42402","tedi-time-picker__grid--borderless":"tedi-time-picker__grid--borderless-805d6413","tedi-time-picker__slot-label":"tedi-time-picker__slot-label-87a1b0e8"};exports.default=e;

package/src/tedi/components/form/time-picker/time-picker.module.scss.es.js

@@ -6,8 +6,7 @@ const e = {
   "tedi-time-picker__wheel-item--selected": "tedi-time-picker__wheel-item--selected-cc3c7194",
   "tedi-time-picker__grid": "tedi-time-picker__grid-5cf42402",
   "tedi-time-picker__grid--borderless": "tedi-time-picker__grid--borderless-805d6413",
-  "tedi-time-picker__grid-item": "tedi-time-picker__grid-item-53c9d41d",
-  "tedi-time-picker__grid-item--selected": "tedi-time-picker__grid-item--selected-32fb5e5d"
+  "tedi-time-picker__slot-label": "tedi-time-picker__slot-label-87a1b0e8"
 };
 export {
   e as default

package/src/tedi/components/layout/footer/footer-body/footer-body.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),p=require("react"),o=require("../footer.module.scss.cjs.js"),B=require("../footer-context.cjs.js"),b=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),s=require("../../../../helpers/hooks/use-breakpoint.cjs.js"),t=r=>{const{getCurrentBreakpointProps:u}=b.useBreakpointProps(r.defaultServerBreakpoint),{children:a,className:d,columns:e}=u(r),l=s.useBreakpoint(),{mobileBreakpoint:c}=p.useContext(B.FooterContext),i=s.isBreakpointBelow(l,c),n=!i&&typeof e=="number"&&e>0;return f.jsx("div",{"data-name":"footer-body",className:m.default(o.default["tedi-footer-body"],{[o.default["tedi-footer-body--mobile"]]:i,[o.default["tedi-footer-body--grid"]]:n},d),style:n?{gridTemplateColumns:`repeat(${e}, minmax(0, 1fr))`}:void 0,children:a})};t.displayName="Footer.Body";exports.FooterBody=t;exports.default=t;

package/src/tedi/components/layout/footer/footer-body/footer-body.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { BreakpointSupport } from '../../../../helpers';
+type FooterBodyBreakpointProps = {
+    /**
+     * Number of equal-width columns laid out per row, controllable per breakpoint via the
+     * `sm`/`md`/`lg`/`xl`/`xxl` keys. The keys are **mobile-first** — a value applies at that
+     * breakpoint and up — so raise the count as the viewport widens
+     * (e.g. `columns={2} md={{ columns: 3 }} lg={{ columns: 4 }}`). When set, the body uses a CSS grid
+     * of `columns` equal tracks; when omitted, columns are content-sized and spread with
+     * `space-between` (the default). Ignored below the footer's `mobileBreakpoint`, where the body
+     * always stacks into a single column.
+     */
+    columns?: number;
+};
+export interface FooterBodyProps extends BreakpointSupport<FooterBodyBreakpointProps> {
+    /**
+     * `<Footer.Section>` children. Other nodes render verbatim but won't pick up the
+     * mobile-collapse behaviour.
+     */
+    children: ReactNode;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const FooterBody: {
+    (props: FooterBodyProps): JSX.Element;
+    displayName: string;
+};
+export default FooterBody;

package/src/tedi/components/layout/footer/footer-body/footer-body.es.js

@@ -0,0 +1,28 @@
+import { jsx as p } from "react/jsx-runtime";
+import l from "../../../../../../external/classnames/index.es.js";
+import { useContext as f } from "react";
+import e from "../footer.module.scss.es.js";
+import { FooterContext as c } from "../footer-context.es.js";
+import { useBreakpointProps as u } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useBreakpoint as y, isBreakpointBelow as b } from "../../../../helpers/hooks/use-breakpoint.es.js";
+const B = (t) => {
+  const { getCurrentBreakpointProps: s } = u(t.defaultServerBreakpoint), { children: m, className: a, columns: o } = s(t), n = y(), { mobileBreakpoint: d } = f(c), r = b(n, d), i = !r && typeof o == "number" && o > 0;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      "data-name": "footer-body",
+      className: l(
+        e["tedi-footer-body"],
+        { [e["tedi-footer-body--mobile"]]: r, [e["tedi-footer-body--grid"]]: i },
+        a
+      ),
+      style: i ? { gridTemplateColumns: `repeat(${o}, minmax(0, 1fr))` } : void 0,
+      children: m
+    }
+  );
+};
+B.displayName = "Footer.Body";
+export {
+  B as FooterBody,
+  B as default
+};

package/src/tedi/components/layout/footer/footer-bottom/footer-bottom.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),p=require("../../../../../../external/classnames/index.cjs.js"),o=require("react"),r=require("../footer.module.scss.cjs.js"),x=require("../footer-context.cjs.js"),d=require("../../../../helpers/hooks/use-breakpoint.cjs.js"),s=({children:a,separator:u=!1,className:m})=>{const c=d.useBreakpoint(),{mobileBreakpoint:f,maxWidth:n}=o.useContext(x.FooterContext),b=d.isBreakpointBelow(c,f),i=u?o.Children.toArray(a).filter(e=>o.isValidElement(e)||e):null;return t.jsx("div",{"data-name":"footer-bottom",className:p.default(r.default["tedi-footer-bottom"],{[r.default["tedi-footer-bottom--mobile"]]:b},m),children:t.jsx("div",{className:r.default["tedi-footer-bottom__inner"],style:n!==void 0?{maxWidth:n}:void 0,children:i?i.map((e,l)=>t.jsxs(o.Fragment,{children:[e,l<i.length-1&&t.jsx("span",{className:r.default["tedi-footer-bottom__dot"],"aria-hidden":"true"})]},l)):a})})};s.displayName="Footer.Bottom";exports.FooterBottom=s;exports.default=s;

package/src/tedi/components/layout/footer/footer-bottom/footer-bottom.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface FooterBottomProps {
+    /**
+     * Bottom-row content — typically a sequence of `<Link>` elements. On mobile the gap shrinks
+     * and items wrap to multiple lines.
+     */
+    children: ReactNode;
+    /**
+     * Insert a small dot between items (matches the Figma "with separator" bottom variant). When
+     * `false`, items are spaced only by the flex `gap`.
+     * @default false
+     */
+    separator?: boolean;
+    /**
+     * Additional class name on the bottom strip.
+     */
+    className?: string;
+}
+export declare const FooterBottom: {
+    ({ children, separator, className }: FooterBottomProps): JSX.Element;
+    displayName: string;
+};
+export default FooterBottom;

package/src/tedi/components/layout/footer/footer-bottom/footer-bottom.es.js

@@ -0,0 +1,25 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import c from "../../../../../../external/classnames/index.es.js";
+import { useContext as b, Children as u, isValidElement as B, Fragment as h } from "react";
+import t from "../footer.module.scss.es.js";
+import { FooterContext as x } from "../footer-context.es.js";
+import { useBreakpoint as N, isBreakpointBelow as k } from "../../../../helpers/hooks/use-breakpoint.es.js";
+const v = ({ children: i, separator: a = !1, className: n }) => {
+  const l = N(), { mobileBreakpoint: d, maxWidth: m } = b(x), f = k(l, d), e = a ? u.toArray(i).filter((o) => B(o) || o) : null;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-name": "footer-bottom",
+      className: c(t["tedi-footer-bottom"], { [t["tedi-footer-bottom--mobile"]]: f }, n),
+      children: /* @__PURE__ */ r("div", { className: t["tedi-footer-bottom__inner"], style: m !== void 0 ? { maxWidth: m } : void 0, children: e ? e.map((o, s) => /* @__PURE__ */ p(h, { children: [
+        o,
+        s < e.length - 1 && /* @__PURE__ */ r("span", { className: t["tedi-footer-bottom__dot"], "aria-hidden": "true" })
+      ] }, s)) : i })
+    }
+  );
+};
+v.displayName = "Footer.Bottom";
+export {
+  v as FooterBottom,
+  v as default
+};

package/src/tedi/components/layout/footer/footer-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({mobileBreakpoint:"sm"});exports.FooterContext=t;

package/src/tedi/components/layout/footer/footer-context.d.ts

@@ -0,0 +1,23 @@
+import { Breakpoint } from '../../../helpers';
+export interface FooterContextValue {
+    /**
+     * Viewport breakpoint at and below which every Footer subcomponent
+     * (`Footer.Body`, `Footer.Bottom`, `Footer.Side`, `Footer.Section`)
+     * switches to its stacked mobile layout — accordion sections, stacked
+     * sides, wrapped bottom strip.
+     *
+     * Set on `<Footer mobileBreakpoint="…">`. Subcomponents read from this
+     * context so all five sites agree on the threshold; without it they'd
+     * each hardcode their own value and drift apart on intermediate
+     * viewports (e.g. tablet 600–760px).
+     */
+    mobileBreakpoint: Breakpoint;
+    /**
+     * Optional cap for the inner content width (the column row and the bottom
+     * strip's content), centered inside the full-bleed backgrounds. Set on
+     * `<Footer maxWidth="…">`; subcomponents read it so the body row and the
+     * bottom strip align to the same width.
+     */
+    maxWidth?: number | string;
+}
+export declare const FooterContext: import('react').Context<FooterContextValue>;

package/src/tedi/components/layout/footer/footer-context.es.js

@@ -0,0 +1,7 @@
+import { createContext as o } from "react";
+const e = o({
+  mobileBreakpoint: "sm"
+});
+export {
+  e as FooterContext
+};

package/src/tedi/components/layout/footer/footer-section/footer-section.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("../../../../../../external/classnames/index.cjs.js"),u=require("react"),g=require("../../../base/icon/icon.cjs.js"),q=require("../../../base/typography/heading/heading.cjs.js"),b=require("../../../buttons/collapse/collapse.cjs.js"),t=require("../footer.module.scss.cjs.js"),v=require("../footer-context.cjs.js"),s=require("../../../../helpers/hooks/use-breakpoint.cjs.js"),i=({heading:o,icon:n,collapsible:f=!1,defaultOpen:p=!1,iconBreakpoint:m="lg",children:r,className:_})=>{const l=s.useBreakpoint(),{mobileBreakpoint:x}=u.useContext(v.FooterContext),c=s.isBreakpointBelow(l,x),j=s.isBreakpointBelow(l,m),a=f&&c,h=u.useId();return e.jsxs("div",{"data-name":"footer-section",className:d.default(t.default["tedi-footer-section"],{[t.default["tedi-footer-section--collapsible"]]:a},_),children:[n&&!j&&e.jsx("span",{className:t.default["tedi-footer-section__icon"],children:e.jsx(g.Icon,{name:n,color:"white",size:24})}),e.jsx("div",{className:d.default(t.default["tedi-footer-section__container"],{[t.default["tedi-footer-section__container--mobile"]]:c}),children:a?e.jsx(b.Collapse,{id:`tedi-footer-section-${h}`,title:e.jsx(q.Heading,{element:"h6",color:"white",children:o}),size:"small",inverted:!0,hideCollapseText:!0,defaultOpen:p,toggleLabel:typeof o=="string"?o:void 0,className:t.default["tedi-footer-section__collapse"],titleRowProps:{gutter:0},children:e.jsx("div",{className:t.default["tedi-footer-section__content-inner"],children:r})}):e.jsxs(e.Fragment,{children:[e.jsx("strong",{className:t.default["tedi-footer-section__heading"],children:o}),e.jsx("div",{className:t.default["tedi-footer-section__content"],children:r})]})})]})};i.displayName="Footer.Section";exports.FooterSection=i;exports.default=i;

package/src/tedi/components/layout/footer/footer-section/footer-section.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { Breakpoint } from '../../../../helpers';
+export interface FooterSectionProps {
+    /**
+     * Section heading text. Rendered as `<strong>` on desktop or as the trigger label of a
+     * `<Collapse>` on mobile (when `collapsible` is true).
+     */
+    heading: ReactNode;
+    /**
+     * Optional Material Symbols icon name shown in a circular tinted background next to
+     * the heading on desktop. Automatically hidden below the `lg` breakpoint to save space.
+     */
+    icon?: string;
+    /**
+     * When `true`, the section's link list collapses into an accordion below the
+     * footer's `mobileBreakpoint` (`sm` by default) — the heading turns into a
+     * toggle button (wired via the shared `<Collapse>` component for keyboard,
+     * focus, and aria-expanded handling). Desktop layout is unaffected.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Initial open state of the collapse — only relevant when `collapsible` is true and the
+     * viewport is below the footer's mobile breakpoint.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Viewport breakpoint at and below which the section's icon is hidden to save
+     * horizontal space. Separate from the footer-wide `mobileBreakpoint` because
+     * icons are typically dropped one tier earlier than the layout flips.
+     * @default lg
+     */
+    iconBreakpoint?: Breakpoint;
+    /**
+     * Section content — typically a sequence of `<Link>` elements.
+     */
+    children: ReactNode;
+    /**
+     * Additional class name on the section root.
+     */
+    className?: string;
+}
+export declare const FooterSection: {
+    ({ heading, icon, collapsible, defaultOpen, iconBreakpoint, children, className, }: FooterSectionProps): JSX.Element;
+    displayName: string;
+};
+export default FooterSection;

package/src/tedi/components/layout/footer/footer-section/footer-section.es.js

@@ -0,0 +1,65 @@
+import { jsxs as c, jsx as o, Fragment as b } from "react/jsx-runtime";
+import a from "../../../../../../external/classnames/index.es.js";
+import { useContext as g, useId as v } from "react";
+import { Icon as x } from "../../../base/icon/icon.es.js";
+import { Heading as C } from "../../../base/typography/heading/heading.es.js";
+import { Collapse as k } from "../../../buttons/collapse/collapse.es.js";
+import e from "../footer.module.scss.es.js";
+import { FooterContext as w } from "../footer-context.es.js";
+import { useBreakpoint as y, isBreakpointBelow as m } from "../../../../helpers/hooks/use-breakpoint.es.js";
+const B = ({
+  heading: t,
+  icon: i,
+  collapsible: d = !1,
+  defaultOpen: p = !1,
+  iconBreakpoint: f = "lg",
+  children: s,
+  className: _
+}) => {
+  const r = y(), { mobileBreakpoint: h } = g(w), n = m(r, h), N = m(r, f), l = d && n, u = v();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-name": "footer-section",
+      className: a(
+        e["tedi-footer-section"],
+        { [e["tedi-footer-section--collapsible"]]: l },
+        _
+      ),
+      children: [
+        i && !N && /* @__PURE__ */ o("span", { className: e["tedi-footer-section__icon"], children: /* @__PURE__ */ o(x, { name: i, color: "white", size: 24 }) }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: a(e["tedi-footer-section__container"], {
+              [e["tedi-footer-section__container--mobile"]]: n
+            }),
+            children: l ? /* @__PURE__ */ o(
+              k,
+              {
+                id: `tedi-footer-section-${u}`,
+                title: /* @__PURE__ */ o(C, { element: "h6", color: "white", children: t }),
+                size: "small",
+                inverted: !0,
+                hideCollapseText: !0,
+                defaultOpen: p,
+                toggleLabel: typeof t == "string" ? t : void 0,
+                className: e["tedi-footer-section__collapse"],
+                titleRowProps: { gutter: 0 },
+                children: /* @__PURE__ */ o("div", { className: e["tedi-footer-section__content-inner"], children: s })
+              }
+            ) : /* @__PURE__ */ c(b, { children: [
+              /* @__PURE__ */ o("strong", { className: e["tedi-footer-section__heading"], children: t }),
+              /* @__PURE__ */ o("div", { className: e["tedi-footer-section__content"], children: s })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+B.displayName = "Footer.Section";
+export {
+  B as FooterSection,
+  B as default
+};

package/src/tedi/components/layout/footer/footer-side/footer-side.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),f=require("../../../../../../external/classnames/index.cjs.js"),m=require("react"),e=require("../footer.module.scss.cjs.js"),k=require("../footer-context.cjs.js"),B=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),r=require("../../../../helpers/hooks/use-breakpoint.cjs.js"),t=o=>{const{getCurrentBreakpointProps:i}=B.useBreakpointProps(o.defaultServerBreakpoint),s=r.useBreakpoint(),{mobileBreakpoint:n}=m.useContext(k.FooterContext),a=r.isBreakpointBelow(s,n),{placement:u="start",position:d="center",children:c,className:l}=i(o,{placement:"start",position:"center"});return p.jsx("div",{"data-name":"footer-side",className:f.default(e.default["tedi-footer-side"],e.default[`tedi-footer-side--${u}`],e.default[`tedi-footer-side--vertical-${d}`],{[e.default["tedi-footer-side--mobile"]]:a},l),children:c})};t.displayName="Footer.Side";exports.FooterSide=t;exports.default=t;

package/src/tedi/components/layout/footer/footer-side/footer-side.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { BreakpointSupport } from '../../../../helpers';
+export type FooterSidePlacement = 'start' | 'end';
+export type FooterSidePosition = 'start' | 'center' | 'end';
+export interface FooterSideBaseProps {
+    /**
+     * Where the side slot sits relative to `<Footer.Body>`. `'start'` renders before the body
+     * (left on LTR, and first — above the sections — once the footer stacks on mobile); `'end'`
+     * renders after the body (right on LTR, and last — below the sections — when stacked).
+     *
+     * Accepts breakpoint props, so the logo can sit on the side on desktop and drop to the bottom
+     * on mobile — e.g. `placement="end" sm={{ placement: 'start' }}` keeps the logo on the left
+     * from `sm` up and moves it to the last position once the footer collapses to its stacked layout.
+     * @default start
+     */
+    placement?: FooterSidePlacement;
+    /**
+     * Vertical alignment of the contents inside the side slot. Accepts breakpoint props.
+     * @default center
+     */
+    position?: FooterSidePosition;
+    /**
+     * Side content — typically a `<img>` logo.
+     */
+    children: ReactNode;
+    /**
+     * Additional class name on the side wrapper.
+     */
+    className?: string;
+}
+export type FooterSideProps = BreakpointSupport<FooterSideBaseProps>;
+export declare const FooterSide: {
+    (props: FooterSideProps): JSX.Element;
+    displayName: string;
+};
+export default FooterSide;

package/src/tedi/components/layout/footer/footer-side/footer-side.es.js

@@ -0,0 +1,34 @@
+import { jsx as d } from "react/jsx-runtime";
+import c from "../../../../../../external/classnames/index.es.js";
+import { useContext as l } from "react";
+import e from "../footer.module.scss.es.js";
+import { FooterContext as f } from "../footer-context.es.js";
+import { useBreakpointProps as k } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useBreakpoint as u, isBreakpointBelow as B } from "../../../../helpers/hooks/use-breakpoint.es.js";
+const b = (o) => {
+  const { getCurrentBreakpointProps: t } = k(o.defaultServerBreakpoint), r = u(), { mobileBreakpoint: i } = l(f), s = B(r, i), {
+    placement: a = "start",
+    position: n = "center",
+    children: m,
+    className: p
+  } = t(o, { placement: "start", position: "center" });
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      "data-name": "footer-side",
+      className: c(
+        e["tedi-footer-side"],
+        e[`tedi-footer-side--${a}`],
+        e[`tedi-footer-side--vertical-${n}`],
+        { [e["tedi-footer-side--mobile"]]: s },
+        p
+      ),
+      children: m
+    }
+  );
+};
+b.displayName = "Footer.Side";
+export {
+  b as FooterSide,
+  b as default
+};

package/src/tedi/components/layout/footer/footer.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),n=require("./footer.module.scss.cjs.js"),B=require("./footer-body/footer-body.cjs.js"),q=require("./footer-bottom/footer-bottom.cjs.js"),g=require("./footer-context.cjs.js"),k=require("./footer-section/footer-section.cjs.js"),F=require("./footer-side/footer-side.cjs.js"),m=require("../../../helpers/hooks/use-breakpoint.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),o=({children:y,className:v,mobileBreakpoint:s="sm",maxWidth:t})=>{const S=m.useBreakpoint(),_=m.isBreakpointBelow(S,s),{getCurrentBreakpointProps:j}=P.useBreakpointProps(),x=l.useMemo(()=>({mobileBreakpoint:s,maxWidth:t}),[s,t]),c=[],d=[];let u=null,f=null;const i=[];return l.Children.forEach(y,e=>{if(!l.isValidElement(e)){e!=null&&e!==!1&&i.push(e);return}const a=e.type;if(a===F.FooterSide){const{placement:b="start"}=j(e.props);(b==="end"?d:c).push(e);return}if(a===B.FooterBody){u=e;return}if(a===q.FooterBottom){f=e;return}i.push(e)}),r.jsx(g.FooterContext.Provider,{value:x,children:r.jsxs("footer",{"data-name":"footer",className:p.default(n.default["tedi-footer"],v),children:[r.jsxs("div",{className:p.default(n.default["tedi-footer__container"],{[n.default["tedi-footer__container--mobile"]]:_}),style:t!==void 0?{maxWidth:t,marginInline:"auto"}:void 0,children:[c,u!==null&&r.jsx("div",{className:n.default["tedi-footer__center"],children:u}),i,d]}),f]})})};o.Side=F.FooterSide;o.Body=B.FooterBody;o.Section=k.FooterSection;o.Bottom=q.FooterBottom;o.displayName="Footer";exports.Footer=o;exports.default=o;

package/src/tedi/components/layout/footer/footer.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { Breakpoint } from '../../../helpers';
+import { FooterSideProps } from './footer-side/footer-side';
+export interface FooterProps {
+    /**
+     * `<Footer.Side>`, `<Footer.Body>` (with `<Footer.Section>` children), and `<Footer.Bottom>` slots.
+     *
+     * Recognised arrangement:
+     * 1. Zero or more `<Footer.Side placement="start">` elements (logos on the left).
+     * 2. Exactly one `<Footer.Body>`.
+     * 3. Zero or more `<Footer.Side placement="end">` elements (logos on the right).
+     * 4. Optional `<Footer.Bottom>` rendered below the main row as a strip with separator dots.
+     *
+     * Other nodes are rendered verbatim where the consumer placed them.
+     */
+    children: ReactNode;
+    /**
+     * Viewport breakpoint at and below which the footer switches to its stacked
+     * mobile layout — sections collapse into accordions, sides stack, the bottom
+     * strip wraps. Propagated to every Footer subcomponent via context so they
+     * agree on the threshold.
+     * @default sm
+     */
+    mobileBreakpoint?: Breakpoint;
+    /**
+     * Caps the inner content — the column row and the bottom strip's content — to a maximum width
+     * and centers it, while the dark backgrounds stay full-bleed. Pass any CSS length (e.g. `1280`,
+     * `'1280px'`, `'80rem'`). Omit to let the content fill the full width (with the 40px padding).
+     */
+    maxWidth?: number | string;
+    /**
+     * Additional class name on the `<footer>` root.
+     */
+    className?: string;
+}
+export declare const Footer: {
+    ({ children, className, mobileBreakpoint, maxWidth }: FooterProps): JSX.Element;
+    Side: {
+        (props: FooterSideProps): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        (props: import('./footer-body/footer-body').FooterBodyProps): JSX.Element;
+        displayName: string;
+    };
+    Section: {
+        ({ heading, icon, collapsible, defaultOpen, iconBreakpoint, children, className, }: import('./footer-section/footer-section').FooterSectionProps): JSX.Element;
+        displayName: string;
+    };
+    Bottom: {
+        ({ children, separator, className }: import('./footer-bottom/footer-bottom').FooterBottomProps): JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+export default Footer;