@tedi-design-system/react 19.2.0-rc.5 → 19.2.0-rc.7

package/src/tedi/components/content/carousel/use-carousel.es.js

@@ -1,230 +1,244 @@
-import { useState as S, useRef as u, useEffect as K, useMemo as I, useCallback as c } from "react";
-import Xt from "../../../helpers/hooks/use-breakpoint.es.js";
-import { resolveBreakpointValue as at } from "./carousel-utils.es.js";
-import { useLabels as Lt } from "../../../providers/label-provider/use-labels.es.js";
-const Nt = {
+import { useState as k, useRef as p, useEffect as K, useMemo as b, useCallback as f, useLayoutEffect as Vt } from "react";
+import Wt from "../../../helpers/hooks/use-breakpoint.es.js";
+import { resolveBreakpointValue as ht } from "./carousel-utils.es.js";
+import { useLabels as vt } from "../../../providers/label-provider/use-labels.es.js";
+const Ot = {
   slidesPerView: { xs: 1 },
   gap: { xs: 1 },
   fade: !1,
   transitionMs: 400,
   loop: !0,
   centered: !1
-}, L = (F, x) => (F % x + x) % x, vt = (F) => {
-  const { getLabel: x } = Lt(), N = Xt(), [l, it] = S(Nt), [e, ut] = S(0), [d, g] = S(0), [p, Q] = S(0), [Z, w] = S(!1), [C, lt] = S(0), [tt, ft] = S(16), [dt, mt] = S(""), W = u(null), et = u(null), rt = u([]), y = u(!1), V = u(!1), O = u(!1), Y = u(0), A = u(0), nt = u(0), U = u(0), j = u(0), H = u(), z = u(0), ot = u(!0), m = u(d), st = u(p);
+}, zt = 0.3, $t = 1e-6, v = (T, x) => (T % x + x) % x, rt = (T, x) => T.reduce(
+  (D, d, U) => Math.abs(d - x) < Math.abs(T[D] - x) ? U : D,
+  0
+), Ut = (T) => {
+  const { getLabel: x } = vt(), D = Wt(), [d, U] = k(Ot), [n, pt] = k(0), [m, R] = k(0), [w, nt] = k(0), [st, C] = k(!1), [N, Mt] = k(0), [ot, gt] = k(16), [xt, wt] = k(""), O = p(null), ct = p(null), at = p([]), F = p(!1), X = p(!1), Y = p(!1), j = p(0), z = p(0), it = p(0), q = p(0), J = p(0), $ = p(), V = p(0), ut = p(!0), h = p(m), lt = p(w);
   K(() => {
-    m.current = d;
-  }, [d]), K(() => {
-    st.current = p;
-  }, [p]);
-  const a = I(
-    () => at(l.slidesPerView, N),
-    [l.slidesPerView, N]
-  ), b = I(() => at(l.gap, N), [l.gap, N]), T = I(() => b * tt, [b, tt]), n = l.loop, M = I(
-    () => Math.max(0, e - Math.ceil(a)),
+    h.current = m;
+  }, [m]), K(() => {
+    lt.current = w;
+  }, [w]);
+  const u = b(
+    () => ht(d.slidesPerView, D),
+    [d.slidesPerView, D]
+  ), A = b(() => ht(d.gap, D), [d.gap, D]), y = b(() => A * ot, [A, ot]), e = d.loop, a = b(() => {
+    const t = Math.max(0, n - u), r = Math.round(t);
+    return Math.abs(t - r) < $t ? r : t;
+  }, [n, u]), l = b(() => {
+    if (!n) return [];
+    if (e) return Array.from({ length: n }, (s, o) => o);
+    const t = Math.floor(a), r = Array.from({ length: t + 1 }, (s, o) => o);
+    return a > t && r.push(a), r;
+  }, [n, e, a]), E = f(
+    (t) => e ? t : Math.min(Math.max(t, 0), a),
     [e, a]
-  ), R = c(
-    (t) => n ? t : Math.min(Math.max(t, 0), M),
-    [n, M]
-  ), h = n ? e : 0, ht = I(() => e === 0 ? 0 : n ? L(Math.floor(d), e) : Math.min(Math.max(Math.round(d), 0), e - 1), [d, e, n]), E = n ? d - p + h : d, pt = n || d > 1e-3, Mt = n || d < M - 1e-3, xt = I(() => {
-    if (!e) return [];
-    if (!n) return Array.from({ length: e }, (o, s) => s);
-    const t = 2 * h + Math.ceil(a), r = p - h;
-    return Array.from({ length: t }, (o, s) => L(r + s, e));
-  }, [e, h, a, p, n]), gt = I(
-    () => `0 0 calc((100% - ${(a - 1) * b}rem) / ${a})`,
-    [a, b]
-  ), wt = I(() => {
-    if (!C)
-      return { gap: `${b}rem`, transform: "translate3d(0,0,0)", transition: "none" };
-    const t = T * (a - 1), r = (C - t) / a, o = n ? d - p + h : d, s = l.centered ? (C - r) / 2 : 0, i = -o * (r + T) + s;
+  ), g = e ? n : 0, It = b(() => l.length ? e ? v(Math.floor(m), n) : rt(l, m) : 0, [l, m, n, e]), B = e ? m - w + g : Math.ceil(m), Rt = n > 0 && (e || m > 0), St = n > 0 && (e || m < a);
+  Vt(() => {
+    e || (clearTimeout($.current), V.current = 0, h.current = E(h.current), R((t) => E(t)));
+  }, [e, a, E]);
+  const bt = b(() => {
+    if (!n) return [];
+    if (!e) return Array.from({ length: n }, (s, o) => o);
+    const t = 2 * g + Math.ceil(u), r = w - g;
+    return Array.from({ length: t }, (s, o) => v(r + o, n));
+  }, [n, g, u, w, e]), Tt = b(
+    () => `0 0 calc((100% - ${(u - 1) * A}rem) / ${u})`,
+    [u, A]
+  ), Ct = b(() => {
+    if (!N)
+      return { gap: `${A}rem`, transform: "translate3d(0,0,0)", transition: "none" };
+    const t = y * (u - 1), r = (N - t) / u, s = e ? m - w + g : m, o = d.centered ? (N - r) / 2 : 0, i = -s * (r + y) + o;
     return {
-      gap: `${b}rem`,
+      gap: `${A}rem`,
       transform: `translate3d(${i}px, 0, 0)`,
-      transition: Z ? `transform ${l.transitionMs}ms ease` : "none"
+      transition: st ? `transform ${d.transitionMs}ms ease` : "none"
     };
   }, [
-    C,
-    b,
-    T,
-    a,
-    d,
-    p,
-    h,
-    Z,
-    l.transitionMs,
-    l.centered,
-    n
-  ]), Rt = c(
+    N,
+    A,
+    y,
+    u,
+    m,
+    w,
+    g,
+    st,
+    d.transitionMs,
+    d.centered,
+    e
+  ]), Pt = f(
     (t) => {
-      const r = Math.ceil(a);
-      return t >= E && t < E + r;
+      if (!e) return t + 1 > m && t < m + u;
+      const r = Math.ceil(u);
+      return t >= B && t < B + r;
     },
-    [a, E]
-  ), St = c(
-    (t, r, o) => {
-      const s = [t];
-      if (l.fade) {
-        const i = l.fade === "both" || l.fade !== "right" && a <= 1;
-        s.push(i ? o : r);
+    [u, B, e, m]
+  ), kt = f(
+    (t, r, s) => {
+      const o = [t];
+      if (d.fade) {
+        const i = d.fade === "both" || d.fade !== "right" && u <= 1;
+        o.push(i ? s : r);
       }
-      return s.join(" ");
+      return o.join(" ");
     },
-    [l.fade, a]
-  ), It = c((t, r) => {
-    rt.current[t] = r;
-  }, []), P = c(() => {
+    [d.fade, u]
+  ), Dt = f((t, r) => {
+    at.current[t] = r;
+  }, []), L = f(() => {
     setTimeout(() => {
-      if (!ot.current || !e) return;
-      const t = n ? L(Math.floor(m.current), e) : Math.min(Math.max(Math.round(m.current), 0), e - 1);
-      mt(x("carousel.slide", t + 1, e));
+      if (!ut.current || !n) return;
+      const t = e ? v(Math.floor(h.current), n) : Math.min(Math.max(Math.ceil(h.current), 0), n - 1);
+      wt(x("carousel.slide", t + 1, n));
     }, 100);
-  }, [x, e, n]), $ = c(() => {
-    y.current = !0, setTimeout(() => {
-      y.current = !1;
-    }, l.transitionMs);
-  }, [l.transitionMs]), ct = c(() => {
+  }, [x, n, e]), G = f(() => {
+    F.current = !0, setTimeout(() => {
+      F.current = !1;
+    }, d.transitionMs);
+  }, [d.transitionMs]), ft = f(() => {
     setTimeout(() => {
       var r;
-      const t = m.current - st.current + h;
-      (r = rt.current[t]) == null || r.focus({ preventScroll: !0 });
+      const t = e ? h.current - lt.current + g : Math.ceil(h.current);
+      (r = at.current[t]) == null || r.focus({ preventScroll: !0 });
     });
-  }, [h]), q = c(() => {
-    !e || y.current || !n && m.current >= M - 1e-3 || (w(!0), g((t) => R(t + 1)), $(), P());
-  }, [e, n, M, R, $, P]), J = c(() => {
-    !e || y.current || !n && m.current <= 1e-3 || (w(!0), g((t) => R(t - 1)), $(), P());
-  }, [e, n, R, $, P]), v = c(
+  }, [g, e]), Q = f(() => {
+    !n || F.current || !e && h.current >= a || (C(!0), R((t) => e ? t + 1 : l.find((r) => r > t) ?? a), G(), L());
+  }, [n, e, a, l, G, L]), Z = f(() => {
+    !n || F.current || !e && h.current <= 0 || (C(!0), R((t) => e ? t - 1 : [...l].reverse().find((r) => r < t) ?? 0), G(), L());
+  }, [n, e, l, G, L]), H = f(
     (t, r) => {
-      if (!(!e || y.current)) {
-        if (w(!0), n) {
-          const o = L(Math.floor(m.current), e), i = L(t, e) - o;
-          g((f) => f + i);
+      if (!(!n || F.current)) {
+        if (C(!0), e) {
+          const s = v(Math.floor(h.current), n), i = v(t, n) - s;
+          R((c) => c + i);
         } else
-          g(R(t));
-        r != null && r.focusSlide ? O.current = !0 : P();
+          R(E(t));
+        r != null && r.focusSlide ? Y.current = !0 : L();
       }
     },
-    [e, n, R, P]
-  ), bt = c(
+    [n, e, E, L]
+  ), At = f(
     (t) => {
-      t.target !== et.current || t.propertyName !== "transform" || V.current || (w(!1), Q(Math.floor(m.current)), O.current && (O.current = !1, ct()));
+      t.target !== ct.current || t.propertyName !== "transform" || X.current || (C(!1), nt(Math.floor(h.current)), Y.current && (Y.current = !1, ft()));
     },
-    [ct]
-  ), kt = c(() => {
-    const t = W.current;
+    [ft]
+  ), Et = f(() => {
+    const t = O.current;
     t && (t.scrollLeft = 0, t.scrollTop = 0);
-  }, []), D = c(() => (C - T * (a - 1)) / a + T, [C, T, a]), Ct = c(
+  }, []), _ = f(() => (N - y * (u - 1)) / u + y, [N, y, u]), Nt = f(
     (t) => {
-      if (!e) return;
+      if (!n) return;
       const r = Math.abs(t.deltaX) > Math.abs(t.deltaY) ? t.deltaX : t.shiftKey ? t.deltaY : 0;
       if (!r) return;
-      const o = D();
-      if (!o) return;
-      const s = r / o;
-      z.current += s;
-      const i = h * 0.9, f = n ? p - i : 0, k = n ? p + i : M, B = m.current + s, _ = Math.min(Math.max(B, f), k), yt = _ !== B;
-      w(!1), g(_), clearTimeout(H.current), H.current = setTimeout(() => {
-        w(!0);
-        const Vt = Math.sign(z.current), X = m.current;
-        let G = Math.round(X);
-        Math.abs(z.current) > 0.3 && (G = Vt > 0 ? Math.ceil(X) : Math.floor(X)), yt && (X <= f && (G = Math.ceil(f)), X >= k && (G = Math.floor(k)));
-        const At = Math.min(Math.max(G, f), k);
-        g(At), z.current = 0;
+      const s = _();
+      if (!s) return;
+      const o = r / s;
+      V.current += o;
+      const i = g * 0.9, c = e ? w - i : 0, M = e ? w + i : a, W = h.current + o, P = Math.min(Math.max(W, c), M), tt = P !== W;
+      C(!1), R(P), clearTimeout($.current), $.current = setTimeout(() => {
+        C(!0);
+        const dt = Math.sign(V.current), mt = Math.abs(V.current) > zt, I = h.current;
+        let S;
+        e ? (S = Math.round(I), mt && (S = dt > 0 ? Math.ceil(I) : Math.floor(I)), tt && (I <= c && (S = Math.ceil(c)), I >= M && (S = Math.floor(M)))) : tt && I >= M ? S = M : tt && I <= c ? S = c : mt ? S = dt > 0 ? l.find((et) => et >= I) ?? M : [...l].reverse().find((et) => et <= I) ?? c : S = l[rt(l, I)];
+        const Xt = Math.min(Math.max(S, c), M);
+        R(Xt), V.current = 0;
       }, 120);
     },
-    [e, D, h, p, n, M]
-  ), Tt = c(
+    [n, _, g, w, e, a, l]
+  ), yt = f(
     (t) => {
       switch (t.key) {
         case "ArrowRight":
         case "PageDown":
-          t.preventDefault(), q();
+          t.preventDefault(), Q();
           break;
         case "ArrowLeft":
         case "PageUp":
-          t.preventDefault(), J();
+          t.preventDefault(), Z();
           break;
         case "Home":
-          t.preventDefault(), v(0);
+          t.preventDefault(), H(0);
           break;
         case "End":
-          t.preventDefault(), v(e - 1);
+          t.preventDefault(), H(e ? n - 1 : a);
           break;
       }
     },
-    [q, J, v, e]
-  ), Pt = c(
+    [Q, Z, H, n, e, a]
+  ), Lt = f(
     (t) => {
       var r;
-      e && ((r = W.current) == null || r.setPointerCapture(t.pointerId), V.current = !0, w(!1), Y.current = t.clientX, A.current = m.current, nt.current = t.timeStamp, U.current = t.clientX, j.current = t.timeStamp, n && Q(Math.floor(m.current)));
+      n && ((r = O.current) == null || r.setPointerCapture(t.pointerId), X.current = !0, C(!1), j.current = t.clientX, z.current = h.current, it.current = t.timeStamp, q.current = t.clientX, J.current = t.timeStamp, e && nt(Math.floor(h.current)));
     },
-    [e, n]
-  ), Dt = c(
+    [n, e]
+  ), _t = f(
     (t) => {
-      if (!V.current) return;
-      const r = D();
+      if (!X.current) return;
+      const r = _();
       if (!r) return;
-      const o = t.clientX - Y.current;
-      if (Number.isNaN(o)) return;
-      U.current = t.clientX, j.current = t.timeStamp;
-      const s = o / r, i = A.current - s, f = h * 0.9, k = Math.floor(A.current), B = n ? k - f : 0, _ = n ? k + f : M;
-      g(Math.min(Math.max(i, B), _));
+      const s = t.clientX - j.current;
+      if (Number.isNaN(s)) return;
+      q.current = t.clientX, J.current = t.timeStamp;
+      const o = s / r, i = z.current - o, c = g * 0.9, M = Math.floor(z.current), W = e ? M - c : 0, P = e ? M + c : a;
+      R(Math.min(Math.max(i, W), P));
     },
-    [D, h, n, M]
-  ), Ft = c(() => {
-    if (!V.current) return;
-    V.current = !1, w(!0);
-    const t = D(), r = Math.round(m.current);
-    let o = r;
-    const s = j.current - nt.current, i = s > 0 && t ? -(U.current - Y.current) / t / s : 0;
-    Math.abs(i) > 15e-4 && r === Math.round(A.current) && (o = Math.round(A.current) + (i > 0 ? 1 : -1)), g(R(o));
-  }, [D, R]);
+    [_, g, e, a]
+  ), Ft = f(() => {
+    if (!X.current) return;
+    X.current = !1, C(!0);
+    const t = _(), r = h.current, s = z.current, o = e ? Math.round(s) : s;
+    let i = e ? Math.round(r) : l[rt(l, r)];
+    const c = J.current - it.current, M = c > 0 && t ? -(q.current - j.current) / t / c : 0;
+    Math.abs(M) > 15e-4 && i === o && (e ? i = o + Math.sign(M) : M > 0 ? i = l.find((P) => P > s) ?? a : i = [...l].reverse().find((P) => P < s) ?? 0), R(E(i));
+  }, [_, E, e, l, a]);
   return K(() => {
-    const t = W.current;
+    const t = O.current;
     if (!t) return;
-    const r = (f) => {
-      lt(f), ft(parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
-    }, o = getComputedStyle(t), s = (parseFloat(o.paddingLeft) || 0) + (parseFloat(o.paddingRight) || 0);
-    r(t.clientWidth - s);
-    const i = new ResizeObserver(([f]) => {
-      f && r(f.contentRect.width);
+    const r = (c) => {
+      Mt(c), gt(parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+    }, s = getComputedStyle(t), o = (parseFloat(s.paddingLeft) || 0) + (parseFloat(s.paddingRight) || 0);
+    r(t.clientWidth - o);
+    const i = new ResizeObserver(([c]) => {
+      c && r(c.contentRect.width);
     });
     return i.observe(t), () => i.disconnect();
   }, []), K(
     () => () => {
-      ot.current = !1, clearTimeout(H.current);
+      ut.current = !1, clearTimeout($.current);
     },
     []
   ), {
-    viewportRef: W,
-    trackRef: et,
-    setSlideRef: It,
-    setConfig: it,
-    setSlidesCount: ut,
-    slidesCount: e,
-    slideIndex: ht,
-    canPrev: pt,
-    canNext: Mt,
-    renderedIndices: xt,
-    renderedActiveIndex: E,
-    slideFlex: gt,
-    trackStyle: wt,
-    contentClassName: St,
-    isSlideVisible: Rt,
-    announcement: dt,
-    regionLabel: (F == null ? void 0 : F.trim()) || x("carousel"),
-    slideLabel: (t) => x("carousel.slide", t, e),
-    next: q,
-    prev: J,
-    goToIndex: v,
-    onTransitionEnd: bt,
-    onScroll: kt,
-    onWheel: Ct,
-    onKeyDown: Tt,
-    onPointerDown: Pt,
-    onPointerMove: Dt,
+    viewportRef: O,
+    trackRef: ct,
+    setSlideRef: Dt,
+    setConfig: U,
+    setSlidesCount: pt,
+    slidesCount: n,
+    positions: l,
+    activePositionIndex: It,
+    canPrev: Rt,
+    canNext: St,
+    renderedIndices: bt,
+    renderedActiveIndex: B,
+    slideFlex: Tt,
+    trackStyle: Ct,
+    contentClassName: kt,
+    isSlideVisible: Pt,
+    announcement: xt,
+    regionLabel: (T == null ? void 0 : T.trim()) || x("carousel"),
+    slideLabel: (t) => x("carousel.slide", t, n),
+    next: Q,
+    prev: Z,
+    goToIndex: H,
+    onTransitionEnd: At,
+    onScroll: Et,
+    onWheel: Nt,
+    onKeyDown: yt,
+    onPointerDown: Lt,
+    onPointerMove: _t,
     onPointerUp: Ft
   };
 };
 export {
-  vt as useCarousel
+  Ut as useCarousel
 };

package/src/tedi/components/content/label/label.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),j=require("../../overlays/tooltip/info-tooltip.cjs.js"),e=require("./label.module.scss.cjs.js"),x=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),i=h.forwardRef((a,n)=>{const{getCurrentBreakpointProps:o}=x.useBreakpointProps(a.defaultServerBreakpoint),{as:d="label",children:u,className:c,isBold:b,isSmall:t,required:f,tooltip:r,...p}=o(a),m=q.default(e.default["tedi-label"],b&&e.default["tedi-label--bold"],t&&e.default["tedi-label--small"],c),s=l.jsxs(d,{ref:n,className:m,...p,children:[u,f&&l.jsx("span",{className:e.default["tedi-label__required"],"aria-hidden":"true",children:"*"})]});return r?l.jsxs("span",{className:e.default["tedi-label__wrapper"],children:[s,l.jsx("span",{className:e.default["tedi-label__info"],children:l.jsx(j.InfoTooltip,{isSmall:t,children:r})})]}):s});i.displayName="Label";exports.Label=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),B=require("../../overlays/tooltip/info-tooltip.cjs.js"),e=require("./label.module.scss.cjs.js"),N=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),o=_.forwardRef((r,d)=>{const{getCurrentBreakpointProps:u}=N.useBreakpointProps(r.defaultServerBreakpoint),{as:c="label",children:p,className:b,isBold:f,isSmall:s,modifiers:t,required:m,tooltip:i,...q}=u(r),a=typeof t=="string"?[t]:t,x=j.default(e.default["tedi-label"],f&&e.default["tedi-label--bold"],s&&e.default["tedi-label--small"],a==null?void 0:a.map(h=>`text-${h}`),b),n=l.jsxs(c,{ref:d,className:x,...q,children:[p,m&&l.jsx("span",{className:e.default["tedi-label__required"],"aria-hidden":"true",children:"*"})]});return i?l.jsxs("span",{className:e.default["tedi-label__wrapper"],children:[n,l.jsx("span",{className:e.default["tedi-label__info"],children:l.jsx(B.InfoTooltip,{isSmall:s,children:i})})]}):n});o.displayName="Label";exports.Label=o;

package/src/tedi/components/content/label/label.d.ts

@@ -1,5 +1,20 @@
 import { ElementType, LabelHTMLAttributes, ReactNode } from 'react';
 import { BreakpointSupport } from '../../../helpers';
+import { TextModifiers } from '../../base/typography/text/text';
+/**
+ * Subset of {@link TextModifiers} that is meaningful for a label. `.tedi-label` is
+ * `display: inline`, so text-alignment (`center`/`left`/`right`) and `::first-letter`
+ * (`capitalize-first`) have no effect and are intentionally excluded — only wrapping,
+ * text-transform and italic controls that actually apply to inline text remain.
+ */
+export type LabelModifiers = Extract<TextModifiers, 'nowrap' | 'break-all' | 'break-word' | 'break-spaces' | 'italic' | 'uppercase' | 'lowercase' | 'capitalize'>;
+/**
+ * Breakpoint-aware `modifiers` for a label, so consumers can vary wrapping responsively
+ * (e.g. `{ modifiers: 'nowrap', sm: { modifiers: 'break-word' } }`).
+ */
+export type LabelModifierProps = BreakpointSupport<{
+    modifiers?: LabelModifiers[] | LabelModifiers;
+}>;
 type LabelBreakpointProps = {
     /**
      * If true, applies a bold font weight to the label text.
@@ -11,6 +26,13 @@ type LabelBreakpointProps = {
      * @default false
      */
     isSmall?: boolean;
+    /**
+     * Text modifiers that control how the label text is rendered, e.g. wrapping and
+     * line-breaking behavior (`'nowrap'`, `'break-word'`, `'break-all'`, `'break-spaces'`).
+     * Reuses the same modifiers as the `Text` component. Useful to prevent long labels
+     * from breaking across multiple lines and distorting form layouts.
+     */
+    modifiers?: LabelModifiers[] | LabelModifiers;
 };
 export interface LabelProps extends BreakpointSupport<LabelBreakpointProps>, LabelHTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
     /**

package/src/tedi/components/content/label/label.es.js

@@ -1,34 +1,36 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import h from "../../../../../external/classnames/index.es.js";
-import { forwardRef as N } from "react";
-import { InfoTooltip as _ } from "../../overlays/tooltip/info-tooltip.es.js";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import B from "../../../../../external/classnames/index.es.js";
+import { forwardRef as x } from "react";
+import { InfoTooltip as k } from "../../overlays/tooltip/info-tooltip.es.js";
 import e from "./label.module.scss.es.js";
-import { useBreakpointProps as B } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const k = N((r, o) => {
-  const { getCurrentBreakpointProps: n } = B(r.defaultServerBreakpoint), {
-    as: m = "label",
-    children: d,
-    className: p,
-    isBold: c,
-    isSmall: a,
-    required: b,
-    tooltip: s,
-    ...f
-  } = n(r), u = h(
+import { useBreakpointProps as E } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const g = x((t, m) => {
+  const { getCurrentBreakpointProps: d } = E(t.defaultServerBreakpoint), {
+    as: p = "label",
+    children: c,
+    className: f,
+    isBold: b,
+    isSmall: s,
+    modifiers: l,
+    required: u,
+    tooltip: i,
+    ...h
+  } = d(t), r = typeof l == "string" ? [l] : l, N = B(
     e["tedi-label"],
-    c && e["tedi-label--bold"],
-    a && e["tedi-label--small"],
-    p
-  ), t = /* @__PURE__ */ i(m, { ref: o, className: u, ...f, children: [
-    d,
-    b && /* @__PURE__ */ l("span", { className: e["tedi-label__required"], "aria-hidden": "true", children: "*" })
+    b && e["tedi-label--bold"],
+    s && e["tedi-label--small"],
+    r == null ? void 0 : r.map((_) => `text-${_}`),
+    f
+  ), o = /* @__PURE__ */ n(p, { ref: m, className: N, ...h, children: [
+    c,
+    u && /* @__PURE__ */ a("span", { className: e["tedi-label__required"], "aria-hidden": "true", children: "*" })
   ] });
-  return s ? /* @__PURE__ */ i("span", { className: e["tedi-label__wrapper"], children: [
-    t,
-    /* @__PURE__ */ l("span", { className: e["tedi-label__info"], children: /* @__PURE__ */ l(_, { isSmall: a, children: s }) })
-  ] }) : t;
+  return i ? /* @__PURE__ */ n("span", { className: e["tedi-label__wrapper"], children: [
+    o,
+    /* @__PURE__ */ a("span", { className: e["tedi-label__info"], children: /* @__PURE__ */ a(k, { isSmall: s, children: i }) })
+  ] }) : o;
 });
-k.displayName = "Label";
+g.displayName = "Label";
 export {
-  k as Label
+  g as Label
 };

package/src/tedi/components/form/checkbox/checkbox.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),d=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),j=require("../../base/icon/icon.cjs.js"),B=require("../feedback-text/feedback-text.cjs.js"),E=require("../form-label/form-label.cjs.js"),e=require("./checkbox.module.scss.cjs.js"),F=require("../../layout/grid/row.cjs.js"),q=require("../../layout/grid/col.cjs.js"),C=N=>{const{id:a,label:h,value:b,className:R,disabled:n=!1,onChange:l,hideLabel:g=!1,helper:i,checked:u,defaultChecked:v,indeterminate:o,hover:y,name:I,tooltip:k,invalid:x,size:s="default",required:_,...w}=N,[z,L]=r.useState(v||!1),m=r.useRef(null),f=r.useRef(null),M=l&&typeof u<"u"?u:z;r.useEffect(()=>{f.current&&(f.current.indeterminate=!!o)},[o]);const S=t=>{typeof u>"u"&&L(t==null?void 0:t.target.checked),l==null||l(b,t==null?void 0:t.target.checked)},p=i?i.id??`${a}-helper`:void 0,T=k?`${a}-tooltip`:void 0,$=d.default(e.default["tedi-checkbox__label"],{[e.default["tedi-checkbox--disabled"]]:n});return c.jsxs("div",{className:d.default(e.default["tedi-checkbox"],{[e.default["tedi-checkbox--disabled"]]:n}),"data-name":"check",...w,children:[c.jsxs(F.Row,{gutter:0,children:[c.jsx(q.Col,{width:"auto",children:c.jsxs("div",{className:e.default["tedi-checkbox__outer-indicator-wrapper"],children:[c.jsx("input",{ref:f,id:a,value:b,name:I,type:"checkbox",disabled:n,checked:o?!1:M,onChange:S,className:e.default["tedi-checkbox__input"],"aria-describedby":[p,T].filter(Boolean).join(" "),required:_,"aria-invalid":x||void 0}),c.jsxs("div",{"aria-hidden":"true",onClick:()=>{var t;return(t=m.current)==null?void 0:t.click()},className:d.default(e.default["tedi-checkbox__indicator"],{[e.default["tedi-checkbox__indicator--hover"]]:y,[e.default["tedi-checkbox__indicator--indeterminate"]]:o,[e.default[`tedi-checkbox__indicator--size-${s}`]]:s,[e.default["tedi-checkbox__indicator--invalid"]]:x},R),"data-testid":"checkbox-indicator",children:[c.jsx(j.Icon,{size:s==="default"?16:18,name:"remove",className:d.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--indeterminate"])}),c.jsx(j.Icon,{size:s==="default"?16:18,name:"check",className:d.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--check"])})]})]})}),h&&c.jsx(q.Col,{children:c.jsx(E.FormLabel,{ref:m,className:$,id:a,"data-testid":"checkbox-label",hideLabel:g,label:h,tooltip:k,required:_})})]}),i&&c.jsx(B.FeedbackText,{id:p,...i,className:d.default(e.default["tedi-checkbox__helper"],i.className)})]})};exports.Checkbox=C;exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),d=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),j=require("../../base/icon/icon.cjs.js"),E=require("../feedback-text/feedback-text.cjs.js"),F=require("../form-label/form-label.cjs.js"),e=require("./checkbox.module.scss.cjs.js"),P=require("../../layout/grid/row.cjs.js"),q=require("../../layout/grid/col.cjs.js"),C=N=>{const{id:a,label:h,value:b,className:R,disabled:n=!1,onChange:l,hideLabel:g=!1,helper:i,checked:u,defaultChecked:v,indeterminate:o,hover:y,name:I,tooltip:k,labelProps:w,invalid:x,size:s="default",required:_,...z}=N,[L,M]=r.useState(v||!1),m=r.useRef(null),f=r.useRef(null),S=l&&typeof u<"u"?u:L;r.useEffect(()=>{f.current&&(f.current.indeterminate=!!o)},[o]);const T=t=>{typeof u>"u"&&M(t==null?void 0:t.target.checked),l==null||l(b,t==null?void 0:t.target.checked)},p=i?i.id??`${a}-helper`:void 0,$=k?`${a}-tooltip`:void 0,B=d.default(e.default["tedi-checkbox__label"],{[e.default["tedi-checkbox--disabled"]]:n});return c.jsxs("div",{className:d.default(e.default["tedi-checkbox"],{[e.default["tedi-checkbox--disabled"]]:n}),"data-name":"check",...z,children:[c.jsxs(P.Row,{gutter:0,children:[c.jsx(q.Col,{width:"auto",children:c.jsxs("div",{className:e.default["tedi-checkbox__outer-indicator-wrapper"],children:[c.jsx("input",{ref:f,id:a,value:b,name:I,type:"checkbox",disabled:n,checked:o?!1:S,onChange:T,className:e.default["tedi-checkbox__input"],"aria-describedby":[p,$].filter(Boolean).join(" "),required:_,"aria-invalid":x||void 0}),c.jsxs("div",{"aria-hidden":"true",onClick:()=>{var t;return(t=m.current)==null?void 0:t.click()},className:d.default(e.default["tedi-checkbox__indicator"],{[e.default["tedi-checkbox__indicator--hover"]]:y,[e.default["tedi-checkbox__indicator--indeterminate"]]:o,[e.default[`tedi-checkbox__indicator--size-${s}`]]:s,[e.default["tedi-checkbox__indicator--invalid"]]:x},R),"data-testid":"checkbox-indicator",children:[c.jsx(j.Icon,{size:s==="default"?16:18,name:"remove",className:d.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--indeterminate"])}),c.jsx(j.Icon,{size:s==="default"?16:18,name:"check",className:d.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--check"])})]})]})}),h&&c.jsx(q.Col,{children:c.jsx(F.FormLabel,{ref:m,className:B,id:a,"data-testid":"checkbox-label",hideLabel:g,label:h,tooltip:k,required:_,labelProps:w})})]}),i&&c.jsx(E.FeedbackText,{id:p,...i,className:d.default(e.default["tedi-checkbox__helper"],i.className)})]})};exports.Checkbox=C;exports.default=C;