@tedi-design-system/react 14.4.0-rc.1 → 14.4.0-rc.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "14.4.0-rc.1",
+  "version": "14.4.0-rc.11",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/buttons/collapse/collapse.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),R=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),w=require("../../base/icon/icon.cjs.js"),T=require("../../base/typography/text/text.cjs.js"),D=require("../../misc/print/print.cjs.js"),t=require("./collapse.module.scss.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),$=require("../../../providers/label-provider/use-labels.cjs.js"),E=require("../../../helpers/hooks/use-print.cjs.js"),b=require("../../layout/grid/row.cjs.js"),i=require("../../layout/grid/col.cjs.js"),q=u=>{const{getCurrentBreakpointProps:C}=L.useBreakpointProps(u.defaultServerBreakpoint),{getLabel:p}=$.useLabels(),{id:a,children:x,className:m,openText:y=p("open"),closeText:v=p("close"),hideCollapseText:N=!1,title:h,titleRowProps:P,defaultOpen:g,open:r,onToggle:c,arrowType:k="neutral",underline:M=!0,...O}=C(u),[f,S]=o.useState(()=>g),d=E.usePrint(),s=o.useMemo(()=>d||(r!==void 0?r:f),[d,r,f]),B=o.useMemo(()=>n.default(t.default["tedi-collapse"],m,{[t.default["tedi-collapse--is-open"]]:s}),[m,s]),_=()=>{const l=!s;S(l),c==null||c(l)},I=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),_())},j=o.useMemo(()=>e.jsx("div",{className:t.default["tedi-collapse__content"],children:x}),[x]);return e.jsxs("div",{"data-name":"collapse",...O,className:B,children:[e.jsx("button",{type:"button","data-name":"collapse-trigger",className:t.default["tedi-collapse__title"],"aria-labelledby":`${a}-collapse-label`,"aria-expanded":s,"aria-controls":a,onKeyDown:I,onClick:_,children:e.jsxs(b.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...P,element:"span",children:[h&&e.jsx(i.Col,{"aria-hidden":"true",children:h}),e.jsx(i.Col,{width:"auto",children:e.jsxs(b.Row,{element:"span",alignItems:"center",gutter:1,children:[e.jsx(D.Print,{visibility:"hide",children:e.jsx(i.Col,{width:"auto",className:n.default({"visually-hidden":N}),children:e.jsx(T.Text,{element:"span",color:"brand",className:n.default(t.default["tedi-collapse__text"],{[t.default["tedi-collapse__text--underline"]]:M}),id:`${a}-collapse-label`,children:s?v:y})})}),e.jsx(i.Col,{width:"auto",children:k==="secondary"?e.jsx("div",{className:t.default["tedi-collapse__icon-wrapper"],children:e.jsx(w.Icon,{className:n.default(t.default["tedi-collapse__icon"]),name:"expand_more"})}):e.jsx(w.Icon,{className:n.default(t.default["tedi-collapse__icon"]),name:"expand_more"})})]})})]})}),d?j:e.jsx(R.default,{duration:300,id:a,height:s?"auto":0,"data-testid":"collapse-inner",children:j})]})};exports.Collapse=q;exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),z=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),E=require("../../base/icon/icon.cjs.js"),K=require("../../base/typography/text/text.cjs.js"),A=require("../../misc/print/print.cjs.js"),e=require("./collapse.module.scss.cjs.js"),F=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),G=require("../../../providers/label-provider/use-labels.cjs.js"),H=require("../../../helpers/hooks/use-print.cjs.js"),N=require("../../layout/grid/row.cjs.js"),o=require("../../layout/grid/col.cjs.js"),P=_=>{const{getCurrentBreakpointProps:k}=F.useBreakpointProps(_.defaultServerBreakpoint),{getLabel:x}=G.useLabels(),{id:r,children:h,className:I,openText:w=x("open"),closeText:j=x("close"),hideCollapseText:g=!1,title:b,titleRowProps:$,defaultOpen:O,open:c,onToggle:d,arrowType:n="default",size:i="default",underline:S=!0,toggleLabel:q,...B}=k(_),u=`${r}__trigger`,p=`${r}__content`,M=`${r}__animate`,[y,R]=f.useState(()=>O),m=H.usePrint(),a=f.useMemo(()=>m||(c!==void 0?c:y),[m,c,y]),T=s.default(e.default["tedi-collapse"],i==="small"&&e.default["tedi-collapse--small"],a&&e.default["tedi-collapse--is-open"],g&&e.default["tedi-collapse--icon-only"],e.default[`tedi-collapse--arrow-${n}`],I),C=()=>{const l=!a;R(l),d==null||d(l)},L=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),C())},D=q||(a?j:w),v=f.useMemo(()=>t.jsx("div",{id:p,role:"region","aria-labelledby":u,className:e.default["tedi-collapse__content"],children:h}),[h,p,u]);return t.jsxs("div",{"data-name":"collapse",...B,className:T,children:[t.jsx("button",{id:u,type:"button","data-name":"collapse-trigger",className:e.default["tedi-collapse__title"],"aria-label":D,"aria-expanded":a,"aria-controls":p,onKeyDown:L,onClick:C,children:t.jsxs(N.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...$,element:"span",children:[b&&t.jsx(o.Col,{"aria-hidden":"true",children:b}),t.jsx(o.Col,{width:"auto",children:t.jsxs(N.Row,{element:"span",alignItems:"center",gutter:0,wrap:"nowrap",children:[t.jsx(A.Print,{visibility:"hide",children:t.jsx(o.Col,{width:"auto",className:s.default({"visually-hidden":g}),children:t.jsx(K.Text,{element:"span",className:s.default(e.default["tedi-collapse__text"],{[e.default["tedi-collapse__text--underline"]]:S}),children:a?j:w})})}),t.jsx(o.Col,{width:"auto",children:t.jsx("div",{className:s.default(e.default["tedi-collapse__icon-wrapper"],e.default[`tedi-collapse__icon-wrapper--${n}`],i==="small"&&e.default["tedi-collapse__icon-wrapper--small"]),children:t.jsx(E.Icon,{className:s.default(e.default["tedi-collapse__icon"],e.default[`tedi-collapse__icon--${n}`],i==="small"&&e.default["tedi-collapse__icon--small"]),name:"expand_more",size:i==="small"||n==="secondary"?18:24})})})]})})]})}),m?v:t.jsx(z.default,{id:M,duration:300,height:a?"auto":0,"data-testid":"collapse-inner",children:v})]})};exports.Collapse=P;exports.default=P;

package/src/tedi/components/buttons/collapse/collapse.d.ts

@@ -3,31 +3,36 @@ import { BreakpointSupport } from '../../../helpers';
 import { RowProps } from '../../layout/grid';
 type CollapseBreakpointProps = {
     /**
-     * Whether the collapse should be initially open (uncontrolled mode).
-     * This is ignored when `open` and `onToggle` are provided.
+     * Whether the collapse should be initially open (uncontrolled mode)
+     * This is ignored when `open` and `onToggle` are provided
      * @default false
      */
     defaultOpen?: boolean;
     /**
-     * Controls the open/closed state of the collapse (controlled mode).
-     * Should be used together with `onToggle`.
+     * Controls the open/closed state of the collapse (controlled mode)
+     * Should be used together with `onToggle`
      */
     open?: boolean;
     /**
-     * Whether to visually hide the open/close text on the toggle button.
-     * Useful for icon-only toggles.
+     * Whether to visually hide the open/close text on the toggle button
+     * Useful for icon-only toggles
      * @default false
      */
     hideCollapseText?: boolean;
     /**
-     * Additional props to pass to the `Row` component used in the title area.
+     * Additional props to pass to the `Row` component used in the title area
      */
     titleRowProps?: RowProps;
     /**
-     * Custom class name for the root element.
+     * Custom class name for the root element
      */
     className?: string;
     arrowType?: 'default' | 'secondary';
+    /**
+     * Collapse text & icon size
+     * @default default
+     */
+    size?: 'default' | 'small';
     underline?: boolean;
 };
 export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps> {
@@ -60,6 +65,11 @@ export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps
      * Defaults to the result of `getLabel('close')`.
      */
     closeText?: string;
+    /**
+     * Descriptive label for screen readers (e.g. "Toggle Products submenu")
+     * If provided, overrides the default open/close text for the accessible name.
+     */
+    toggleLabel?: string;
 }
 export declare const Collapse: (props: CollapseProps) => JSX.Element;
 export default Collapse;

package/src/tedi/components/buttons/collapse/collapse.es.js

@@ -1,85 +1,109 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import n from "../../../../../external/classnames/index.es.js";
-import i from "react";
-import D from "../../../../../external/react-animate-height/dist/esm/index.es.js";
-import { Icon as b } from "../../base/icon/icon.es.js";
-import { Text as R } from "../../base/typography/text/text.es.js";
-import { Print as E } from "../../misc/print/print.es.js";
-import t from "./collapse.module.scss.es.js";
-import { useBreakpointProps as K } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as L } from "../../../providers/label-provider/use-labels.es.js";
-import { usePrint as $ } from "../../../helpers/hooks/use-print.es.js";
-import { Row as N } from "../../layout/grid/row.es.js";
-import { Col as r } from "../../layout/grid/col.es.js";
-const Z = (m) => {
-  const { getCurrentBreakpointProps: C } = K(m.defaultServerBreakpoint), { getLabel: u } = L(), {
-    id: l,
-    children: h,
-    className: f,
-    openText: v = u("open"),
-    closeText: g = u("close"),
-    hideCollapseText: k = !1,
-    title: _,
-    titleRowProps: P,
-    defaultOpen: O,
-    open: s,
-    onToggle: c,
-    arrowType: B = "neutral",
-    underline: I = !0,
-    ...M
-  } = C(m), [w, S] = i.useState(() => O), d = $(), o = i.useMemo(
-    () => d || (s !== void 0 ? s : w),
-    [d, s, w]
-  ), T = i.useMemo(
-    () => n(t["tedi-collapse"], f, {
-      [t["tedi-collapse--is-open"]]: o
-    }),
-    [f, o]
-  ), x = () => {
-    const a = !o;
-    S(a), c == null || c(a);
-  }, j = (a) => {
-    (a.key === "Enter" || a.key === " ") && !a.repeat && (a.preventDefault(), x());
-  }, y = i.useMemo(
-    () => /* @__PURE__ */ e("div", { className: t["tedi-collapse__content"], children: h }),
-    [h]
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import o from "../../../../../external/classnames/index.es.js";
+import h from "react";
+import E from "../../../../../external/react-animate-height/dist/esm/index.es.js";
+import { Icon as K } from "../../base/icon/icon.es.js";
+import { Text as A } from "../../base/typography/text/text.es.js";
+import { Print as H } from "../../misc/print/print.es.js";
+import e from "./collapse.module.scss.es.js";
+import { useBreakpointProps as q } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as F } from "../../../providers/label-provider/use-labels.es.js";
+import { usePrint as G } from "../../../helpers/hooks/use-print.es.js";
+import { Row as P } from "../../layout/grid/row.es.js";
+import { Col as s } from "../../layout/grid/col.es.js";
+const ie = (f) => {
+  const { getCurrentBreakpointProps: $ } = q(f.defaultServerBreakpoint), { getLabel: w } = F(), {
+    id: r,
+    children: g,
+    className: O,
+    openText: y = w("open"),
+    closeText: b = w("close"),
+    hideCollapseText: x = !1,
+    title: N,
+    titleRowProps: B,
+    defaultOpen: S,
+    open: c,
+    onToggle: d,
+    arrowType: i = "default",
+    size: n = "default",
+    underline: T = !0,
+    toggleLabel: C,
+    ...j
+  } = $(f), p = `${r}__trigger`, m = `${r}__content`, D = `${r}__animate`, [v, L] = h.useState(() => S), u = G(), l = h.useMemo(
+    () => u || (c !== void 0 ? c : v),
+    [u, c, v]
+  ), M = o(
+    e["tedi-collapse"],
+    n === "small" && e["tedi-collapse--small"],
+    l && e["tedi-collapse--is-open"],
+    x && e["tedi-collapse--icon-only"],
+    e[`tedi-collapse--arrow-${i}`],
+    O
+  ), k = () => {
+    const a = !l;
+    L(a), d == null || d(a);
+  }, R = (a) => {
+    (a.key === "Enter" || a.key === " ") && !a.repeat && (a.preventDefault(), k());
+  }, z = C || (l ? b : y), I = h.useMemo(
+    () => /* @__PURE__ */ t("div", { id: m, role: "region", "aria-labelledby": p, className: e["tedi-collapse__content"], children: g }),
+    [g, m, p]
   );
-  return /* @__PURE__ */ p("div", { "data-name": "collapse", ...M, className: T, children: [
-    /* @__PURE__ */ e(
+  return /* @__PURE__ */ _("div", { "data-name": "collapse", ...j, className: M, children: [
+    /* @__PURE__ */ t(
       "button",
       {
+        id: p,
         type: "button",
         "data-name": "collapse-trigger",
-        className: t["tedi-collapse__title"],
-        "aria-labelledby": `${l}-collapse-label`,
-        "aria-expanded": o,
-        "aria-controls": l,
-        onKeyDown: j,
-        onClick: x,
-        children: /* @__PURE__ */ p(N, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...P, element: "span", children: [
-          _ && /* @__PURE__ */ e(r, { "aria-hidden": "true", children: _ }),
-          /* @__PURE__ */ e(r, { width: "auto", children: /* @__PURE__ */ p(N, { element: "span", alignItems: "center", gutter: 1, children: [
-            /* @__PURE__ */ e(E, { visibility: "hide", children: /* @__PURE__ */ e(r, { width: "auto", className: n({ "visually-hidden": k }), children: /* @__PURE__ */ e(
-              R,
+        className: e["tedi-collapse__title"],
+        "aria-label": z,
+        "aria-expanded": l,
+        "aria-controls": m,
+        onKeyDown: R,
+        onClick: k,
+        children: /* @__PURE__ */ _(P, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...B, element: "span", children: [
+          N && /* @__PURE__ */ t(s, { "aria-hidden": "true", children: N }),
+          /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ _(P, { element: "span", alignItems: "center", gutter: 0, wrap: "nowrap", children: [
+            /* @__PURE__ */ t(H, { visibility: "hide", children: /* @__PURE__ */ t(s, { width: "auto", className: o({ "visually-hidden": x }), children: /* @__PURE__ */ t(
+              A,
               {
                 element: "span",
-                color: "brand",
-                className: n(t["tedi-collapse__text"], {
-                  [t["tedi-collapse__text--underline"]]: I
+                className: o(e["tedi-collapse__text"], {
+                  [e["tedi-collapse__text--underline"]]: T
                 }),
-                id: `${l}-collapse-label`,
-                children: o ? g : v
+                children: l ? b : y
               }
             ) }) }),
-            /* @__PURE__ */ e(r, { width: "auto", children: B === "secondary" ? /* @__PURE__ */ e("div", { className: t["tedi-collapse__icon-wrapper"], children: /* @__PURE__ */ e(b, { className: n(t["tedi-collapse__icon"]), name: "expand_more" }) }) : /* @__PURE__ */ e(b, { className: n(t["tedi-collapse__icon"]), name: "expand_more" }) })
+            /* @__PURE__ */ t(s, { width: "auto", children: /* @__PURE__ */ t(
+              "div",
+              {
+                className: o(
+                  e["tedi-collapse__icon-wrapper"],
+                  e[`tedi-collapse__icon-wrapper--${i}`],
+                  n === "small" && e["tedi-collapse__icon-wrapper--small"]
+                ),
+                children: /* @__PURE__ */ t(
+                  K,
+                  {
+                    className: o(
+                      e["tedi-collapse__icon"],
+                      e[`tedi-collapse__icon--${i}`],
+                      n === "small" && e["tedi-collapse__icon--small"]
+                    ),
+                    name: "expand_more",
+                    size: n === "small" || i === "secondary" ? 18 : 24
+                  }
+                )
+              }
+            ) })
           ] }) })
         ] })
       }
     ),
-    d ? y : /* @__PURE__ */ e(D, { duration: 300, id: l, height: o ? "auto" : 0, "data-testid": "collapse-inner", children: y })
+    u ? I : /* @__PURE__ */ t(E, { id: D, duration: 300, height: l ? "auto" : 0, "data-testid": "collapse-inner", children: I })
   ] });
 };
 export {
-  Z as Collapse,
-  Z as default
+  ie as Collapse,
+  ie as default
 };

package/src/tedi/components/buttons/collapse/collapse.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3","tedi-collapse__content":"tedi-collapse__content-350b91f8"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text":"tedi-collapse__text-d150fea1","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse__icon-wrapper--secondary":"tedi-collapse__icon-wrapper--secondary-3321348a","tedi-collapse__icon--secondary":"tedi-collapse__icon--secondary-f0f3125f","tedi-collapse__icon--default":"tedi-collapse__icon--default-9c7e19e4","tedi-collapse__icon-wrapper--default":"tedi-collapse__icon-wrapper--default-450808b2","tedi-collapse__icon-wrapper--small":"tedi-collapse__icon-wrapper--small-65e6d09a","tedi-collapse--icon-only":"tedi-collapse--icon-only-335962f8","tedi-collapse__content":"tedi-collapse__content-350b91f8","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3"};exports.default=e;

package/src/tedi/components/buttons/collapse/collapse.module.scss.es.js

@@ -1,10 +1,17 @@
 const e = {
   "tedi-collapse__title": "tedi-collapse__title-3e140e5c",
+  "tedi-collapse__text": "tedi-collapse__text-d150fea1",
   "tedi-collapse__text--underline": "tedi-collapse__text--underline-73ca86bd",
   "tedi-collapse__icon-wrapper": "tedi-collapse__icon-wrapper-d2b036ea",
   "tedi-collapse__icon": "tedi-collapse__icon-5156e480",
-  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3",
-  "tedi-collapse__content": "tedi-collapse__content-350b91f8"
+  "tedi-collapse__icon-wrapper--secondary": "tedi-collapse__icon-wrapper--secondary-3321348a",
+  "tedi-collapse__icon--secondary": "tedi-collapse__icon--secondary-f0f3125f",
+  "tedi-collapse__icon--default": "tedi-collapse__icon--default-9c7e19e4",
+  "tedi-collapse__icon-wrapper--default": "tedi-collapse__icon-wrapper--default-450808b2",
+  "tedi-collapse__icon-wrapper--small": "tedi-collapse__icon-wrapper--small-65e6d09a",
+  "tedi-collapse--icon-only": "tedi-collapse--icon-only-335962f8",
+  "tedi-collapse__content": "tedi-collapse__content-350b91f8",
+  "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3"
 };
 export {
   e as default

package/src/tedi/components/buttons/info-button/info-button.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),a=require("../button/button.cjs.js"),s=require("./info-button.module.scss.cjs.js"),e=r.forwardRef(({isSmall:n,...t},o)=>u.jsx(a.Button,{className:i.default(s.default["tedi-info-button"]),"data-name":"info-button",...t,type:"button",icon:{name:"info",size:n?16:18},visualType:"neutral",ref:o,children:t.children}));e.displayName="InfoButton";exports.InfoButton=e;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),s=require("../button/button.cjs.js"),f=require("./info-button.module.scss.cjs.js"),t=r.forwardRef(({isSmall:e,children:n,...o},u)=>i.jsx(s.Button,{className:a.default(f.default["tedi-info-button"]),"data-name":"info-button",...o,type:"button",icon:{name:"info",size:e?16:18},visualType:"neutral",ref:u,children:n}));t.displayName="InfoButton";exports.InfoButton=t;exports.default=t;

package/src/tedi/components/buttons/info-button/info-button.d.ts

@@ -1,11 +1,15 @@
 import { default as React } from 'react';
 import { ButtonProps } from '../button/button';
-export interface InfoButtonProps extends Omit<ButtonProps, 'size'> {
+export interface InfoButtonProps extends Omit<ButtonProps, 'size' | 'children'> {
     /**
      * If true, applies a small size to the InfoButton.
      * @default false
      */
     isSmall?: boolean;
+    /**
+     * Children elements to be rendered inside the InfoButton.
+     */
+    children?: React.ReactNode;
 }
 export declare const InfoButton: React.ForwardRefExoticComponent<Omit<InfoButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default InfoButton;

package/src/tedi/components/buttons/info-button/info-button.es.js

@@ -1,25 +1,25 @@
 import { jsx as n } from "react/jsx-runtime";
-import a from "../../../../../external/classnames/index.es.js";
-import i from "react";
-import { Button as m } from "../button/button.es.js";
-import r from "./info-button.module.scss.es.js";
-const f = i.forwardRef(
-  ({ isSmall: o, ...t }, e) => /* @__PURE__ */ n(
-    m,
+import m from "../../../../../external/classnames/index.es.js";
+import f from "react";
+import { Button as r } from "../button/button.es.js";
+import i from "./info-button.module.scss.es.js";
+const s = f.forwardRef(
+  ({ isSmall: t, children: o, ...a }, e) => /* @__PURE__ */ n(
+    r,
     {
-      className: a(r["tedi-info-button"]),
+      className: m(i["tedi-info-button"]),
       "data-name": "info-button",
-      ...t,
+      ...a,
       type: "button",
-      icon: { name: "info", size: o ? 16 : 18 },
+      icon: { name: "info", size: t ? 16 : 18 },
       visualType: "neutral",
       ref: e,
-      children: t.children
+      children: o
     }
   )
 );
-f.displayName = "InfoButton";
+s.displayName = "InfoButton";
 export {
-  f as InfoButton,
-  f as default
+  s as InfoButton,
+  s as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),j=require("../../buttons/info-button/info-button.cjs.js"),r=require("../../overlays/tooltip/tooltip.cjs.js"),t=require("./label.module.scss.cjs.js"),x=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),s=h.forwardRef((i,a)=>{const{getCurrentBreakpointProps:n}=x.useBreakpointProps(i.defaultServerBreakpoint),{as:d="label",children:u,className:c,isBold:p,isSmall:o,required:b,tooltip:l,...f}=n(i),m=q.default(t.default["tedi-label"],p&&t.default["tedi-label--bold"],o&&t.default["tedi-label--small"],c);return e.jsxs(d,{ref:a,className:m,...f,children:[u,b&&e.jsx("span",{className:t.default["tedi-label__required"],"aria-hidden":"true",children:"*"}),l&&e.jsxs(r.Tooltip,{children:[e.jsx(r.Tooltip.Trigger,{children:e.jsx(j.InfoButton,{isSmall:o,children:l})}),e.jsx(r.Tooltip.Content,{children:l})]})]})});s.displayName="Label";exports.Label=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),x=require("../../buttons/info-button/info-button.cjs.js"),l=require("../../overlays/tooltip/tooltip.cjs.js"),t=require("./label.module.scss.cjs.js"),B=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),g=require("../../../providers/label-provider/use-labels.cjs.js"),i=j.forwardRef((r,s)=>{const{getCurrentBreakpointProps:n}=B.useBreakpointProps(r.defaultServerBreakpoint),{as:u="label",children:d,className:c,isBold:b,isSmall:o,required:p,tooltip:a,...f}=n(r),{getLabel:m}=g.useLabels(),q=h.default(t.default["tedi-label"],b&&t.default["tedi-label--bold"],o&&t.default["tedi-label--small"],c);return e.jsxs(u,{ref:s,className:q,...f,children:[d,p&&e.jsx("span",{className:t.default["tedi-label__required"],"aria-hidden":"true",children:"*"}),a&&e.jsx("span",{"aria-hidden":"true",children:e.jsxs(l.Tooltip,{children:[e.jsx(l.Tooltip.Trigger,{children:e.jsx(x.InfoButton,{isSmall:o,"aria-label":m("infoButton.moreInformation")})}),e.jsx(l.Tooltip.Content,{children:a})]})})]})});i.displayName="Label";exports.Label=i;

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

@@ -1,36 +1,37 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import u from "../../../../../external/classnames/index.es.js";
-import { forwardRef as B } from "react";
-import { InfoButton as N } from "../../buttons/info-button/info-button.es.js";
-import { Tooltip as t } from "../../overlays/tooltip/tooltip.es.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import B from "../../../../../external/classnames/index.es.js";
+import { forwardRef as N } from "react";
+import { InfoButton as g } from "../../buttons/info-button/info-button.es.js";
+import { Tooltip as l } from "../../overlays/tooltip/tooltip.es.js";
 import r from "./label.module.scss.es.js";
-import { useBreakpointProps as g } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const k = B((o, s) => {
-  const { getCurrentBreakpointProps: n } = g(o.defaultServerBreakpoint), {
+import { useBreakpointProps as L } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as k } from "../../../providers/label-provider/use-labels.es.js";
+const x = N((o, s) => {
+  const { getCurrentBreakpointProps: n } = L(o.defaultServerBreakpoint), {
     as: m = "label",
     children: d,
-    className: c,
-    isBold: p,
-    isSmall: i,
+    className: p,
+    isBold: c,
+    isSmall: t,
     required: f,
-    tooltip: l,
+    tooltip: a,
     ...b
-  } = n(o), h = u(
+  } = n(o), { getLabel: u } = k(), h = B(
     r["tedi-label"],
-    p && r["tedi-label--bold"],
-    i && r["tedi-label--small"],
-    c
+    c && r["tedi-label--bold"],
+    t && r["tedi-label--small"],
+    p
   );
-  return /* @__PURE__ */ a(m, { ref: s, className: h, ...b, children: [
+  return /* @__PURE__ */ i(m, { ref: s, className: h, ...b, children: [
     d,
     f && /* @__PURE__ */ e("span", { className: r["tedi-label__required"], "aria-hidden": "true", children: "*" }),
-    l && /* @__PURE__ */ a(t, { children: [
-      /* @__PURE__ */ e(t.Trigger, { children: /* @__PURE__ */ e(N, { isSmall: i, children: l }) }),
-      /* @__PURE__ */ e(t.Content, { children: l })
-    ] })
+    a && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: /* @__PURE__ */ i(l, { children: [
+      /* @__PURE__ */ e(l.Trigger, { children: /* @__PURE__ */ e(g, { isSmall: t, "aria-label": u("infoButton.moreInformation") }) }),
+      /* @__PURE__ */ e(l.Content, { children: a })
+    ] }) })
   ] });
 });
-k.displayName = "Label";
+x.displayName = "Label";
 export {
-  k as Label
+  x 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"),i=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),j=require("../../base/icon/icon.cjs.js"),F=require("../feedback-text/feedback-text.cjs.js"),S=require("../form-label/form-label.cjs.js"),e=require("./checkbox.module.scss.cjs.js"),T=require("../../layout/grid/row.cjs.js"),p=require("../../layout/grid/col.cjs.js"),C=N=>{const{id:l,label:o,value:x,className:q,disabled:b=!1,onChange:a,hideLabel:g=!1,helper:d,checked:s,defaultChecked:y,indeterminate:n,hover:R,name:w,tooltip:z,invalid:I,size:r="default",...L}=N,[k,M]=f.useState(y||!1),u=f.useRef(null),h=f.useMemo(()=>n?"mixed":a&&typeof s<"u"?s:k,[n,a,s,k]),v=t=>{typeof s>"u"&&M(t==null?void 0:t.target.checked),a==null||a(x,t==null?void 0:t.target.checked)},m=d?(d==null?void 0:d.id)??`${l}-helper`:void 0,_=i.default(e.default["tedi-checkbox"],{[e.default["tedi-checkbox--disabled"]]:b});return c.jsxs("div",{"data-name":"check",...L,children:[c.jsxs(T.Row,{gutter:0,children:[c.jsx(p.Col,{width:"auto",children:c.jsxs("div",{className:e.default["tedi-checkbox__outer-indicator-wrapper"],children:[c.jsx("input",{id:l,value:x,name:w,type:"checkbox",disabled:b,checked:h!=="mixed"?h:!1,"aria-checked":h,onChange:v,className:e.default["tedi-checkbox__input"],"aria-describedby":m}),c.jsxs("div",{"aria-hidden":"true",onClick:()=>{var t;return(t=u.current)==null?void 0:t.click()},className:i.default(e.default["tedi-checkbox__indicator"],{[e.default["tedi-checkbox__indicator--hover"]]:R,[e.default["tedi-checkbox__indicator--indeterminate"]]:n,[e.default[`tedi-checkbox__indicator--size-${r}`]]:r,[e.default["tedi-checkbox__indicator--invalid"]]:I},q),"data-testid":"checkbox-indicator",children:[c.jsx(j.Icon,{size:r==="default"?16:18,name:"remove",className:i.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--indeterminate"])}),c.jsx(j.Icon,{size:r==="default"?16:18,name:"check",className:i.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--check"])})]})]})}),c.jsx(p.Col,{children:o&&typeof o=="string"?c.jsx(S.FormLabel,{ref:u,className:_,id:l,"data-testid":"checkbox-label",hideLabel:g,label:o,tooltip:z}):c.jsx("label",{ref:u,htmlFor:l,className:_,"data-testid":"checkbox-label",children:o})})]}),d&&c.jsx(F.FeedbackText,{id:m,...d,className:i.default(e.default["tedi-checkbox__helper"],d.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"),o=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),j=require("../../base/icon/icon.cjs.js"),S=require("../feedback-text/feedback-text.cjs.js"),T=require("../form-label/form-label.cjs.js"),e=require("./checkbox.module.scss.cjs.js"),$=require("../../layout/grid/row.cjs.js"),C=require("../../layout/grid/col.cjs.js"),N=q=>{const{id:d,label:l,value:x,className:g,disabled:b=!1,onChange:i,hideLabel:y=!1,helper:a,checked:s,defaultChecked:I,indeterminate:n,hover:R,name:v,tooltip:k,invalid:w,size:r="default",...z}=q,[m,L]=f.useState(I||!1),u=f.useRef(null),h=f.useMemo(()=>n?"mixed":i&&typeof s<"u"?s:m,[n,i,s,m]),M=t=>{typeof s>"u"&&L(t==null?void 0:t.target.checked),i==null||i(x,t==null?void 0:t.target.checked)},_=a?a.id??`${d}-helper`:void 0,F=k?`${d}-tooltip`:void 0,p=o.default(e.default["tedi-checkbox"],{[e.default["tedi-checkbox--disabled"]]:b});return c.jsxs("div",{"data-name":"check",...z,children:[c.jsxs($.Row,{gutter:0,children:[c.jsx(C.Col,{width:"auto",children:c.jsxs("div",{className:e.default["tedi-checkbox__outer-indicator-wrapper"],children:[c.jsx("input",{id:d,value:x,name:v,type:"checkbox",disabled:b,checked:h!=="mixed"?h:!1,"aria-checked":h,onChange:M,className:e.default["tedi-checkbox__input"],"aria-describedby":[_,F].filter(Boolean).join(" ")}),c.jsxs("div",{"aria-hidden":"true",onClick:()=>{var t;return(t=u.current)==null?void 0:t.click()},className:o.default(e.default["tedi-checkbox__indicator"],{[e.default["tedi-checkbox__indicator--hover"]]:R,[e.default["tedi-checkbox__indicator--indeterminate"]]:n,[e.default[`tedi-checkbox__indicator--size-${r}`]]:r,[e.default["tedi-checkbox__indicator--invalid"]]:w},g),"data-testid":"checkbox-indicator",children:[c.jsx(j.Icon,{size:r==="default"?16:18,name:"remove",className:o.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--indeterminate"])}),c.jsx(j.Icon,{size:r==="default"?16:18,name:"check",className:o.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--check"])})]})]})}),c.jsx(C.Col,{children:l&&typeof l=="string"?c.jsx(T.FormLabel,{ref:u,className:p,id:d,"data-testid":"checkbox-label",hideLabel:y,label:l,tooltip:k}):c.jsx("label",{ref:u,htmlFor:d,className:p,"data-testid":"checkbox-label",children:l})})]}),a&&c.jsx(S.FeedbackText,{id:_,...a,className:o.default(e.default["tedi-checkbox__helper"],a.className)})]})};exports.Checkbox=N;exports.default=N;

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

@@ -1,50 +1,50 @@
 import { jsxs as n, jsx as i } from "react/jsx-runtime";
 import d from "../../../../../external/classnames/index.es.js";
 import b from "react";
-import { Icon as N } from "../../base/icon/icon.es.js";
-import { FeedbackText as v } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as B } from "../form-label/form-label.es.js";
+import { Icon as C } from "../../base/icon/icon.es.js";
+import { FeedbackText as M } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as E } from "../form-label/form-label.es.js";
 import e from "./checkbox.module.scss.es.js";
-import { Row as E } from "../../layout/grid/row.es.js";
-import { Col as C } from "../../layout/grid/col.es.js";
-const O = (g) => {
+import { Row as H } from "../../layout/grid/row.es.js";
+import { Col as g } from "../../layout/grid/col.es.js";
+const P = (y) => {
   const {
-    id: o,
+    id: t,
     label: r,
     value: f,
-    className: y,
+    className: z,
     disabled: _ = !1,
-    onChange: t,
-    hideLabel: z = !1,
+    onChange: o,
+    hideLabel: I = !1,
     helper: a,
     checked: l,
     defaultChecked: R,
     indeterminate: h,
-    hover: w,
-    name: F,
-    tooltip: I,
-    invalid: L,
+    hover: j,
+    name: w,
+    tooltip: p,
+    invalid: F,
     size: s = "default",
-    ...j
-  } = g, [x, M] = b.useState(R || !1), m = b.useRef(null), k = b.useMemo(() => h ? "mixed" : t && typeof l < "u" ? l : x, [h, t, l, x]), $ = (c) => {
-    typeof l > "u" && M(c == null ? void 0 : c.target.checked), t == null || t(f, c == null ? void 0 : c.target.checked);
-  }, u = a ? (a == null ? void 0 : a.id) ?? `${o}-helper` : void 0, p = d(e["tedi-checkbox"], { [e["tedi-checkbox--disabled"]]: _ });
-  return /* @__PURE__ */ n("div", { "data-name": "check", ...j, children: [
-    /* @__PURE__ */ n(E, { gutter: 0, children: [
-      /* @__PURE__ */ i(C, { width: "auto", children: /* @__PURE__ */ n("div", { className: e["tedi-checkbox__outer-indicator-wrapper"], children: [
+    ...L
+  } = y, [x, $] = b.useState(R || !1), m = b.useRef(null), k = b.useMemo(() => h ? "mixed" : o && typeof l < "u" ? l : x, [h, o, l, x]), v = (c) => {
+    typeof l > "u" && $(c == null ? void 0 : c.target.checked), o == null || o(f, c == null ? void 0 : c.target.checked);
+  }, u = a ? a.id ?? `${t}-helper` : void 0, B = p ? `${t}-tooltip` : void 0, N = d(e["tedi-checkbox"], { [e["tedi-checkbox--disabled"]]: _ });
+  return /* @__PURE__ */ n("div", { "data-name": "check", ...L, children: [
+    /* @__PURE__ */ n(H, { gutter: 0, children: [
+      /* @__PURE__ */ i(g, { width: "auto", children: /* @__PURE__ */ n("div", { className: e["tedi-checkbox__outer-indicator-wrapper"], children: [
         /* @__PURE__ */ i(
           "input",
           {
-            id: o,
+            id: t,
             value: f,
-            name: F,
+            name: w,
             type: "checkbox",
             disabled: _,
             checked: k !== "mixed" ? k : !1,
             "aria-checked": k,
-            onChange: $,
+            onChange: v,
             className: e["tedi-checkbox__input"],
-            "aria-describedby": u
+            "aria-describedby": [u, B].filter(Boolean).join(" ")
           }
         ),
         /* @__PURE__ */ n(
@@ -58,17 +58,17 @@ const O = (g) => {
             className: d(
               e["tedi-checkbox__indicator"],
               {
-                [e["tedi-checkbox__indicator--hover"]]: w,
+                [e["tedi-checkbox__indicator--hover"]]: j,
                 [e["tedi-checkbox__indicator--indeterminate"]]: h,
                 [e[`tedi-checkbox__indicator--size-${s}`]]: s,
-                [e["tedi-checkbox__indicator--invalid"]]: L
+                [e["tedi-checkbox__indicator--invalid"]]: F
               },
-              y
+              z
             ),
             "data-testid": "checkbox-indicator",
             children: [
               /* @__PURE__ */ i(
-                N,
+                C,
                 {
                   size: s === "default" ? 16 : 18,
                   name: "remove",
@@ -76,7 +76,7 @@ const O = (g) => {
                 }
               ),
               /* @__PURE__ */ i(
-                N,
+                C,
                 {
                   size: s === "default" ? 16 : 18,
                   name: "check",
@@ -87,23 +87,23 @@ const O = (g) => {
           }
         )
       ] }) }),
-      /* @__PURE__ */ i(C, { children: r && typeof r == "string" ? /* @__PURE__ */ i(
-        B,
+      /* @__PURE__ */ i(g, { children: r && typeof r == "string" ? /* @__PURE__ */ i(
+        E,
         {
           ref: m,
-          className: p,
-          id: o,
+          className: N,
+          id: t,
           "data-testid": "checkbox-label",
-          hideLabel: z,
+          hideLabel: I,
           label: r,
-          tooltip: I
+          tooltip: p
         }
-      ) : /* @__PURE__ */ i("label", { ref: m, htmlFor: o, className: p, "data-testid": "checkbox-label", children: r }) })
+      ) : /* @__PURE__ */ i("label", { ref: m, htmlFor: t, className: N, "data-testid": "checkbox-label", children: r }) })
     ] }),
-    a && /* @__PURE__ */ i(v, { id: u, ...a, className: d(e["tedi-checkbox__helper"], a.className) })
+    a && /* @__PURE__ */ i(M, { id: u, ...a, className: d(e["tedi-checkbox__helper"], a.className) })
   ] });
 };
 export {
-  O as Checkbox,
-  O as default
+  P as Checkbox,
+  P as default
 };