@tedi-design-system/react 18.0.0-rc.9 → 18.1.0-rc.1

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/form/toggle/toggle.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),R=require("../../base/icon/icon.cjs.js"),w=require("../../loaders/spinner/spinner.cjs.js"),M=require("../feedback-text/feedback-text.cjs.js"),P=require("../form-label/form-label.cjs.js"),e=require("./toggle.module.scss.cjs.js"),n=_.forwardRef((k,x)=>{const{id:i,label:l,hideLabel:j=!1,labelPosition:N="left",helper:a,className:v,checked:g,defaultChecked:u,onChange:o,size:C,color:q="primary",type:y="filled",icon:f,disabled:h=!1,isLoading:s=!1,tooltip:T,...$}=k,p=a?`${i}-helper`:void 0,[z,S]=_.useState(u??!1),d=typeof g<"u",c=d?g:z,b=C||(f?"large":"default"),L=m=>{s||(d||S(m.target.checked),o==null||o(m.target.checked))},F=r.default(e.default["tedi-toggle"],e.default[`tedi-toggle--${b}`],e.default[`tedi-toggle--${q}-${y}`],{[e.default["tedi-toggle--active"]]:c,[e.default["tedi-toggle--disabled"]]:h||s},v),I=r.default(e.default["tedi-toggle__control"],e.default[`tedi-toggle__control--label-${N}`]);return t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:I,children:[l&&t.jsx(P.FormLabel,{id:i,className:e.default["tedi-toggle__label"],hideLabel:j,label:l,tooltip:T}),t.jsxs("div",{className:F,children:[t.jsx("input",{...$,ref:x,id:i,type:"checkbox",role:"switch","aria-label":typeof l=="string"?l:void 0,"aria-describedby":p,className:e.default["tedi-toggle__input"],checked:d?c:void 0,defaultChecked:d?void 0:u,disabled:h||s,onChange:L}),t.jsx("span",{className:e.default["tedi-toggle__slider"],children:s?t.jsx(w.Spinner,{size:b==="large"?16:10,className:e.default["tedi-toggle__icon"]}):f?t.jsx(R.Icon,{name:c?"lock_open":"lock",size:16,color:"inherit"}):null})]})]}),a&&t.jsx(M.FeedbackText,{id:p,...a,className:r.default(e.default["tedi-toggle__helper"],a.className)})]})});n.displayName="Toggle";exports.Toggle=n;exports.default=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),R=require("../../base/icon/icon.cjs.js"),w=require("../../loaders/spinner/spinner.cjs.js"),P=require("../feedback-text/feedback-text.cjs.js"),M=require("../form-label/form-label.cjs.js"),e=require("./toggle.module.scss.cjs.js"),_=m.forwardRef((k,x)=>{const{id:o,label:l,hideLabel:j=!1,labelPosition:N="left",helper:a,className:y,checked:n,defaultChecked:g,onChange:d,size:C,color:q="primary",type:v="filled",icon:u,disabled:f=!1,isLoading:s=!1,tooltip:T,...$}=k,h=a?`${o}-helper`:void 0,[z,S]=m.useState(g??!1),i=typeof n<"u",c=i?n:z,p=C||(u?"large":"default"),L=b=>{s||(i||S(b.target.checked),d==null||d(b.target.checked))},F=r.default(e.default["tedi-toggle"],e.default[`tedi-toggle--${p}`],e.default[`tedi-toggle--${q}-${v}`],{[e.default["tedi-toggle--active"]]:c,[e.default["tedi-toggle--disabled"]]:f||s},y),I=r.default(e.default["tedi-toggle__control"],e.default[`tedi-toggle__control--label-${N}`]);return t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:I,children:[l&&t.jsx(M.FormLabel,{id:o,className:e.default["tedi-toggle__label"],hideLabel:j,label:l,tooltip:T}),t.jsxs("div",{className:F,children:[t.jsx("input",{...$,ref:x,id:o,type:"checkbox",role:"switch","aria-label":typeof l=="string"?l:void 0,"aria-describedby":h,className:e.default["tedi-toggle__input"],checked:i?c:void 0,defaultChecked:i?void 0:g,disabled:f||s,onChange:L}),t.jsx("span",{className:e.default["tedi-toggle__slider"],children:s?t.jsx(w.Spinner,{size:p==="large"?16:10,className:e.default["tedi-toggle__icon"]}):u?t.jsx(R.Icon,{name:c?"lock_open":"lock",size:16,color:"inherit"}):null})]})]}),a&&t.jsx(P.FeedbackText,{id:h,...a,className:r.default(e.default["tedi-toggle__helper"],a.className)})]})});_.displayName="Toggle";exports.Toggle=_;

package/src/tedi/components/form/toggle/toggle.es.js

@@ -6,17 +6,17 @@ import { Spinner as A } from "../../loaders/spinner/spinner.es.js";
 import { FeedbackText as B } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as D } from "../form-label/form-label.es.js";
 import e from "./toggle.module.scss.es.js";
-const E = P((k, u) => {
+const E = P((k, N) => {
   const {
     id: a,
     label: t,
-    hideLabel: N = !1,
+    hideLabel: u = !1,
     labelPosition: C = "left",
     helper: o,
     className: y,
     checked: g,
     defaultChecked: m,
-    onChange: d,
+    onChange: r,
     size: v,
     color: x = "primary",
     type: z = "filled",
@@ -25,14 +25,14 @@ const E = P((k, u) => {
     isLoading: i = !1,
     tooltip: $,
     ...F
-  } = k, h = o ? `${a}-helper` : void 0, [I, L] = R(m ?? !1), s = typeof g < "u", r = s ? g : I, _ = v || (p ? "large" : "default"), S = (b) => {
-    i || (s || L(b.target.checked), d == null || d(b.target.checked));
+  } = k, h = o ? `${a}-helper` : void 0, [I, L] = R(m ?? !1), s = typeof g < "u", d = s ? g : I, _ = v || (p ? "large" : "default"), S = (b) => {
+    i || (s || L(b.target.checked), r == null || r(b.target.checked));
   }, T = n(
     e["tedi-toggle"],
     e[`tedi-toggle--${_}`],
     e[`tedi-toggle--${x}-${z}`],
     {
-      [e["tedi-toggle--active"]]: r,
+      [e["tedi-toggle--active"]]: d,
       [e["tedi-toggle--disabled"]]: f || i
     },
     y
@@ -44,7 +44,7 @@ const E = P((k, u) => {
         {
           id: a,
           className: e["tedi-toggle__label"],
-          hideLabel: N,
+          hideLabel: u,
           label: t,
           tooltip: $
         }
@@ -54,20 +54,20 @@ const E = P((k, u) => {
           "input",
           {
             ...F,
-            ref: u,
+            ref: N,
             id: a,
             type: "checkbox",
             role: "switch",
             "aria-label": typeof t == "string" ? t : void 0,
             "aria-describedby": h,
             className: e["tedi-toggle__input"],
-            checked: s ? r : void 0,
+            checked: s ? d : void 0,
             defaultChecked: s ? void 0 : m,
             disabled: f || i,
             onChange: S
           }
         ),
-        /* @__PURE__ */ l("span", { className: e["tedi-toggle__slider"], children: i ? /* @__PURE__ */ l(A, { size: _ === "large" ? 16 : 10, className: e["tedi-toggle__icon"] }) : p ? /* @__PURE__ */ l(q, { name: r ? "lock_open" : "lock", size: 16, color: "inherit" }) : null })
+        /* @__PURE__ */ l("span", { className: e["tedi-toggle__slider"], children: i ? /* @__PURE__ */ l(A, { size: _ === "large" ? 16 : 10, className: e["tedi-toggle__icon"] }) : p ? /* @__PURE__ */ l(q, { name: d ? "lock_open" : "lock", size: 16, color: "inherit" }) : null })
       ] })
     ] }),
     o && /* @__PURE__ */ l(B, { id: h, ...o, className: n(e["tedi-toggle__helper"], o.className) })
@@ -75,6 +75,5 @@ const E = P((k, u) => {
 });
 E.displayName = "Toggle";
 export {
-  E as Toggle,
-  E as default
+  E as Toggle
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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"),y=require("../footer-context.cjs.js"),b=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),i=require("../../../../helpers/hooks/use-breakpoint.cjs.js"),s=t=>{const{getCurrentBreakpointProps:a}=b.useBreakpointProps(t.defaultServerBreakpoint),{children:d,className:u,columns:e}=a(t),l=i.default(),{mobileBreakpoint:c}=p.useContext(y.FooterContext),r=i.isBreakpointBelow(l,c),n=!r&&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"]]:r,[o.default["tedi-footer-body--grid"]]:n},u),style:n?{gridTemplateColumns:`repeat(${e}, minmax(0, 1fr))`}:void 0,children:d})};s.displayName="Footer.Body";exports.FooterBody=s;

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,27 @@
+import { jsx as d } 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 y, { isBreakpointBelow as b } from "../../../../helpers/hooks/use-breakpoint.es.js";
+const B = (t) => {
+  const { getCurrentBreakpointProps: s } = u(t.defaultServerBreakpoint), { children: m, className: n, columns: o } = s(t), a = y(), { mobileBreakpoint: p } = f(c), r = b(a, p), i = !r && typeof o == "number" && o > 0;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      "data-name": "footer-body",
+      className: l(
+        e["tedi-footer-body"],
+        { [e["tedi-footer-body--mobile"]]: r, [e["tedi-footer-body--grid"]]: i },
+        n
+      ),
+      style: i ? { gridTemplateColumns: `repeat(${o}, minmax(0, 1fr))` } : void 0,
+      children: m
+    }
+  );
+};
+B.displayName = "Footer.Body";
+export {
+  B as FooterBody
+};

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

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

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,24 @@
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import c from "../../../../../../external/classnames/index.es.js";
+import { useContext as b, Children as B, isValidElement as h, Fragment as u } from "react";
+import t from "../footer.module.scss.es.js";
+import { FooterContext as x } from "../footer-context.es.js";
+import 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), p = k(l, d), e = a ? B.toArray(i).filter((o) => h(o) || o) : null;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-name": "footer-bottom",
+      className: c(t["tedi-footer-bottom"], { [t["tedi-footer-bottom--mobile"]]: p }, 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__ */ f(u, { 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
+};

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.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../../../../external/classnames/index.cjs.js"),d=require("react"),h=require("../../../base/icon/icon.cjs.js"),q=require("../../../base/typography/heading/heading.cjs.js"),b=require("../../../content/collapse/collapse.cjs.js"),t=require("../footer.module.scss.cjs.js"),N=require("../footer-context.cjs.js"),i=require("../../../../helpers/hooks/use-breakpoint.cjs.js"),u=({heading:o,icon:s,collapsible:f=!1,defaultOpen:p=!1,iconBreakpoint:m="lg",children:n,className:x})=>{const l=i.default(),{mobileBreakpoint:_}=d.useContext(N.FooterContext),r=i.isBreakpointBelow(l,_),g=i.isBreakpointBelow(l,m),c=f&&r,j=d.useId();return e.jsxs("div",{"data-name":"footer-section",className:a.default(t.default["tedi-footer-section"],{[t.default["tedi-footer-section--collapsible"]]:c},x),children:[s&&!g&&e.jsx("span",{className:t.default["tedi-footer-section__icon"],children:e.jsx(h.Icon,{name:s,color:"white",size:24})}),e.jsx("div",{className:a.default(t.default["tedi-footer-section__container"],{[t.default["tedi-footer-section__container--mobile"]]:r}),children:c?e.jsx(b.Collapse,{id:`tedi-footer-section-${j}`,title:e.jsx(q.Heading,{element:"h6",color:"white",children:o}),size:"small",inverted:!0,hideCollapseText:!0,fullRowToggle:!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:n})}):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:n})]})})]})};u.displayName="Footer.Section";exports.FooterSection=u;

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 g } from "react/jsx-runtime";
+import a from "../../../../../../external/classnames/index.es.js";
+import { useContext as b, useId as v } from "react";
+import { Icon as x } from "../../../base/icon/icon.es.js";
+import { Heading as w } from "../../../base/typography/heading/heading.es.js";
+import { Collapse as C } from "../../../content/collapse/collapse.es.js";
+import e from "../footer.module.scss.es.js";
+import { FooterContext as k } from "../footer-context.es.js";
+import 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 } = b(k), n = m(r, h), u = m(r, f), l = d && n, N = v();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-name": "footer-section",
+      className: a(
+        e["tedi-footer-section"],
+        { [e["tedi-footer-section--collapsible"]]: l },
+        _
+      ),
+      children: [
+        i && !u && /* @__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(
+              C,
+              {
+                id: `tedi-footer-section-${N}`,
+                title: /* @__PURE__ */ o(w, { element: "h6", color: "white", children: t }),
+                size: "small",
+                inverted: !0,
+                hideCollapseText: !0,
+                fullRowToggle: !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(g, { 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
+};

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

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

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;