@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

package/src/community/components/vertical-progress/vertical-progress-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),o=require("react"),p=require("../../../tedi/components/base/icon/icon.cjs.js"),j=require("../button/button.cjs.js"),b=require("../tag/tag.cjs.js"),v=require("./vertical-progress.cjs.js"),w=require("../card/card.cjs.js"),i=require("../card/card-content/card-content.cjs.js"),q=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),c=require("../../../tedi/components/layout/grid/row.cjs.js"),n=require("../../../tedi/components/layout/grid/col.cjs.js"),s=o.createContext({index:0,title:null}),a=r=>{const{children:t}=r;return e.jsx(s.Provider,{value:r,children:e.jsx(w.Card,{children:e.jsxs(i.CardContent,{padding:.75,lg:{padding:1.5},children:[e.jsx(I,{}),t&&e.jsx(i.CardContent,{padding:{top:1,right:0,bottom:0,left:0},lg:{padding:{top:2,right:2.5,bottom:0,left:2.5}},children:t})]})})})},I=()=>{const{title:r,state:t,index:l,isToggable:u=!0}=o.useContext(s),{onItemOpen:d}=o.useContext(v.VerticalProgressContext),{getLabel:g}=q.useLabels(),h=u&&!(t==="disabled")&&!(t==="active"),x=()=>{switch(t){case"active":return"primary";case"completed":return"positive";case"error":return"important";default:return"default"}},m=()=>{switch(t){case"active":case"completed":case"error":return"default";default:return"ghost"}},C=()=>{switch(t){case"completed":return"check";case"error":return"exclamation";default:return"chevron_right"}};return e.jsxs(c.Row,{alignItems:"center",justifyContent:"between",children:[e.jsx(n.Col,{width:"auto",children:e.jsxs(c.Row,{gutterX:3,gutterY:0,alignItems:"center",wrap:"nowrap",children:[e.jsx(n.Col,{width:"auto",children:e.jsx(b.Tag,{iconOnly:!0,rounded:!0,color:x(),type:m(),children:e.jsx(p.Icon,{name:C(),size:16,color:"inherit"})})}),e.jsx(n.Col,{width:"auto",children:r})]})}),h&&e.jsx(n.Col,{width:"auto",children:e.jsx(j.Button,{visualType:"link",iconRight:"edit",onClick:()=>d(l),children:g("vertical-progress.edit")})})]})};exports.VerticalProgressItem=a;exports.VerticalProgressItemContext=s;exports.default=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),C=require("../../../tedi/components/base/icon/icon.cjs.js"),p=require("../button/button.cjs.js"),j=require("../tag/tag.cjs.js"),b=require("./vertical-progress.cjs.js"),v=require("../card/card.cjs.js"),i=require("../card/card-content/card-content.cjs.js"),w=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),c=require("../../../tedi/components/layout/grid/row.cjs.js"),n=require("../../../tedi/components/layout/grid/col.cjs.js"),s=o.createContext({index:0,title:null}),q=r=>{const{children:t}=r;return e.jsx(s.Provider,{value:r,children:e.jsx(v.Card,{children:e.jsxs(i.CardContent,{padding:.75,lg:{padding:1.5},children:[e.jsx(I,{}),t&&e.jsx(i.CardContent,{padding:{top:1,right:0,bottom:0,left:0},lg:{padding:{top:2,right:2.5,bottom:0,left:2.5}},children:t})]})})})},I=()=>{const{title:r,state:t,index:a,isToggable:l=!0}=o.useContext(s),{onItemOpen:d}=o.useContext(b.VerticalProgressContext),{getLabel:u}=w.useLabels(),g=l&&!(t==="disabled")&&!(t==="active"),h=()=>{switch(t){case"active":return"primary";case"completed":return"positive";case"error":return"important";default:return"default"}},x=()=>{switch(t){case"active":case"completed":case"error":return"default";default:return"ghost"}},m=()=>{switch(t){case"completed":return"check";case"error":return"exclamation";default:return"chevron_right"}};return e.jsxs(c.Row,{alignItems:"center",justifyContent:"between",children:[e.jsx(n.Col,{width:"auto",children:e.jsxs(c.Row,{gutterX:3,gutterY:0,alignItems:"center",wrap:"nowrap",children:[e.jsx(n.Col,{width:"auto",children:e.jsx(j.Tag,{iconOnly:!0,rounded:!0,color:h(),type:x(),children:e.jsx(C.Icon,{name:m(),size:16,color:"inherit"})})}),e.jsx(n.Col,{width:"auto",children:r})]})}),g&&e.jsx(n.Col,{width:"auto",children:e.jsx(p.Button,{visualType:"link",iconRight:"edit",onClick:()=>d(a),children:u("vertical-progress.edit")})})]})};exports.VerticalProgressItem=q;exports.VerticalProgressItemContext=s;

package/src/community/components/vertical-progress/vertical-progress-item.es.js

@@ -66,6 +66,5 @@ const s = n.createContext({
 };
 export {
   H as VerticalProgressItem,
-  s as VerticalProgressItemContext,
-  H as default
+  s as VerticalProgressItemContext
 };

package/src/community/components/vertical-progress/vertical-progress.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("react"),i=require("../../../tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js"),r=c.createContext({onItemOpen:()=>null}),t=n=>{const{children:s,onItemOpen:o}=n;return e.jsx(r.Provider,{value:{onItemOpen:o},children:e.jsx(i.VerticalSpacing,{size:.5,children:s})})};exports.VerticalProgress=t;exports.VerticalProgressContext=r;exports.default=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),s=require("../../../tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js"),r=o.createContext({onItemOpen:()=>null}),i=t=>{const{children:n,onItemOpen:c}=t;return e.jsx(r.Provider,{value:{onItemOpen:c},children:e.jsx(s.VerticalSpacing,{size:.5,children:n})})};exports.VerticalProgress=i;exports.VerticalProgressContext=r;

package/src/community/components/vertical-progress/vertical-progress.es.js

@@ -9,6 +9,5 @@ const i = n.createContext({
 };
 export {
   m as VerticalProgress,
-  i as VerticalProgressContext,
-  m as default
+  i as VerticalProgressContext
 };

package/src/community/components/vertical-stepper/vertical-stepper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../../../../external/classnames/index.cjs.js"),t=require("./vertical-stepper.module.scss.cjs.js"),r=s=>{const{className:l,children:c,isCompact:a}=s,o=u.default(t.default.stepper,l,{[t.default["stepper--compact"]]:a});return e.jsx("nav",{children:e.jsx("ol",{role:"tree",className:o,children:c})})};exports.VerticalStepper=r;exports.default=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../../external/classnames/index.cjs.js"),t=require("./vertical-stepper.module.scss.cjs.js"),p=r=>{const{className:c,children:s,isCompact:l}=r,a=o.default(t.default.stepper,c,{[t.default["stepper--compact"]]:l});return e.jsx("nav",{children:e.jsx("ol",{role:"tree",className:a,children:s})})};exports.VerticalStepper=p;

package/src/community/components/vertical-stepper/vertical-stepper.es.js

@@ -1,11 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import c from "../../../../external/classnames/index.es.js";
+import m from "../../../../external/classnames/index.es.js";
 import r from "./vertical-stepper.module.scss.es.js";
 const n = (t) => {
-  const { className: s, children: o, isCompact: p } = t, a = c(r.stepper, s, { [r["stepper--compact"]]: p });
-  return /* @__PURE__ */ e("nav", { children: /* @__PURE__ */ e("ol", { role: "tree", className: a, children: o }) });
+  const { className: s, children: o, isCompact: p } = t, c = m(r.stepper, s, { [r["stepper--compact"]]: p });
+  return /* @__PURE__ */ e("nav", { children: /* @__PURE__ */ e("ol", { role: "tree", className: c, children: o }) });
 };
 export {
-  n as VerticalStepper,
-  n as default
+  n as VerticalStepper
 };

package/src/community/helpers/hooks/use-breakpoint-props.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),r=require("./use-breakpoint.cjs.js"),l=require("../../../../external/lodash-es/pickBy.cjs.js"),k=require("../../../../external/lodash-es/omit.cjs.js"),B=(i="xs")=>{const e=r.useBreakpoint(i),t=s.useMemo(()=>e?r.breakpoints.slice(0,r.breakpoints.indexOf(e)+1):[],[e]);return{getCurrentBreakpointProps:s.useCallback((o,a={})=>{const{sm:x,md:f,lg:g,xl:m,xxl:b,...u}=o,c=[...t.map(n=>l.default(n==="xs"?u:o[n],p=>p!==void 0))].filter(Boolean);return Object.assign(k.default(a,"defaultServerBreakpoint"),...c)},[t])}};exports.useBreakpointProps=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),t=require("./use-breakpoint.cjs.js"),l=require("../../../../external/lodash-es/pickBy.cjs.js"),k=require("../../../../external/lodash-es/omit.cjs.js"),B=(i="xs")=>{const e=t.default(i),r=s.useMemo(()=>e?t.breakpoints.slice(0,t.breakpoints.indexOf(e)+1):[],[e]);return{getCurrentBreakpointProps:s.useCallback((o,a={})=>{const{sm:f,md:x,lg:g,xl:m,xxl:b,...u}=o,c=[...r.map(n=>l.default(n==="xs"?u:o[n],p=>p!==void 0))].filter(Boolean);return Object.assign(k.default(a,"defaultServerBreakpoint"),...c)},[r])}};exports.useBreakpointProps=B;

package/src/community/helpers/hooks/use-breakpoint-props.es.js

@@ -1,5 +1,5 @@
 import n from "react";
-import { useBreakpoint as u, breakpoints as s } from "./use-breakpoint.es.js";
+import u, { breakpoints as s } from "./use-breakpoint.es.js";
 import k from "../../../../external/lodash-es/pickBy.es.js";
 import l from "../../../../external/lodash-es/omit.es.js";
 const O = (i = "xs") => {

package/src/community/helpers/hooks/use-layout.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./use-breakpoint.cjs.js"),o=["xs","sm"],r=["md"],i=["lg","xl","xxl"],a=t=>{const s=k.useBreakpoint(),p=t==null?void 0:t.reduce((e,n)=>{switch(n){case"desktop":return[...e,...i];case"tablet":return[...e,...r];case"mobile":return[...e,...o];default:return[...e,n]}},[]);return s?p.includes(s):!1};exports.default=a;exports.desktopBreakpoints=i;exports.mobileBreakpoints=o;exports.tabletBreakpoints=r;exports.useLayout=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./use-breakpoint.cjs.js"),o=["xs","sm"],r=["md"],i=["lg","xl","xxl"],a=t=>{const s=d.default(),p=t==null?void 0:t.reduce((e,n)=>{switch(n){case"desktop":return[...e,...i];case"tablet":return[...e,...r];case"mobile":return[...e,...o];default:return[...e,n]}},[]);return s?p.includes(s):!1};exports.default=a;exports.desktopBreakpoints=i;exports.mobileBreakpoints=o;exports.tabletBreakpoints=r;exports.useLayout=a;

package/src/community/helpers/hooks/use-layout.es.js

@@ -1,4 +1,4 @@
-import { useBreakpoint as o } from "./use-breakpoint.es.js";
+import o from "./use-breakpoint.es.js";
 const i = ["xs", "sm"], p = ["md"], k = ["lg", "xl", "xxl"], a = (t) => {
   const s = o(), r = t == null ? void 0 : t.reduce((e, n) => {
     switch (n) {

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),n=require("../../base/icon/icon.cjs.js"),x=require("../button/button.cjs.js"),r=require("./button-group.module.scss.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint.cjs.js"),C=require("../../../providers/label-provider/use-labels.cjs.js"),l=require("../../overlays/dropdown/dropdown.cjs.js"),b=k=>{const{getLabel:j}=C.useLabels(),{children:q,className:w,type:c="primary",onSelectionChange:i,stretch:v=!1,ariaLabel:I,size:f="default",enableMobileDropdown:A=!1,mobileBreakpoint:N="md",dropdownLabel:y=j("sidenav.submenu"),dropdownLabelMode:R="static"}=k,B=L.useBreakpoint(),D=L.isBreakpointBelow(B,N),m=_.Children.toArray(q).filter(e=>_.isValidElement(e)&&e.type===x.Button),s=m.find(e=>e.props.isActive),M=R==="static"?y:(s==null?void 0:s.props.children)??y,a=s==null?void 0:s.props.iconLeft,d=s==null?void 0:s.props.icon;return D&&A?o.jsxs(l.Dropdown,{width:"trigger",children:[o.jsx(l.Dropdown.Trigger,{children:o.jsxs(x.Button,{visualType:c,className:g.default(r.default["tedi-button-group__dropdown-trigger"],r.default[`tedi-button-group__dropdown-trigger--${c}`],w),noStyle:!0,fullWidth:!0,children:[a?o.jsx(n.Icon,{name:typeof a=="string"?a:a.name,color:"inherit"}):d?o.jsx(n.Icon,{name:typeof d=="string"?d:d.name,color:"inherit"}):o.jsx(n.Icon,{name:"menu",color:"inherit"}),M]})}),o.jsx(l.Dropdown.Content,{children:m.map((e,u)=>o.jsxs(l.Dropdown.Item,{index:u,active:e==null?void 0:e.props.isActive,disabled:e==null?void 0:e.props.disabled,onClick:t=>{var p,h;e.props.disabled||(t.type==="click"&&((h=(p=e.props).onClick)==null||h.call(p,t)),e.props.id&&(i==null||i(e.props.id)))},className:r.default["tedi-button-group__dropdown-item"],children:[e.props.iconLeft&&o.jsx(n.Icon,{name:typeof e.props.iconLeft=="string"?e.props.iconLeft:e.props.iconLeft.name,color:"inherit"}),e.props.children,e.props.iconRight&&o.jsx(n.Icon,{name:typeof e.props.iconRight=="string"?e.props.iconRight:e.props.iconRight.name,color:"inherit"}),e.props.isActive&&o.jsx("span",{className:"sr-only",children:j("button-group.selected")})]},e.props.id||u))})]}):o.jsx("div",{className:g.default(r.default["tedi-button-group"],r.default[`tedi-button-group--${c}`],{[r.default["tedi-button-group--stretch"]]:v},w),role:"group","aria-label":I,children:m.map(e=>_.cloneElement(e,{className:g.default(r.default["tedi-button-group__item"],{[r.default["tedi-button-group__item--active"]]:e.props.isActive,[r.default["tedi-button-group__item--disabled"]]:e.props.disabled,[r.default[`tedi-button-group__item--size-${f}`]]:f},e.props.className),size:f,"aria-pressed":!!e.props.isActive,onClick:u=>{var t,p;(p=(t=e.props).onClick)==null||p.call(t,u),e.props.id&&(i==null||i(e.props.id))}}))})};exports.ButtonGroup=b;exports.default=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),y=require("react"),n=require("../../base/icon/icon.cjs.js"),x=require("../button/button.cjs.js"),r=require("./button-group.module.scss.cjs.js"),M=require("../../../providers/label-provider/use-labels.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint.cjs.js"),u=require("../../overlays/dropdown/dropdown.cjs.js"),C=b=>{const{getLabel:_}=M.useLabels(),{children:k,className:j,type:c="primary",onSelectionChange:s,stretch:q=!1,ariaLabel:v,size:f="default",enableMobileDropdown:I=!1,mobileBreakpoint:A="md",dropdownLabel:w=_("sidenav.submenu"),dropdownLabelMode:N="static"}=b,R=L.default(),D=L.isBreakpointBelow(R,A),m=y.Children.toArray(k).filter(e=>y.isValidElement(e)&&e.type===x.Button),i=m.find(e=>e.props.isActive),B=N==="static"?w:(i==null?void 0:i.props.children)??w,a=i==null?void 0:i.props.iconLeft,d=i==null?void 0:i.props.icon;return D&&I?o.jsxs(u.Dropdown,{width:"trigger",children:[o.jsx(u.Dropdown.Trigger,{children:o.jsxs(x.Button,{visualType:c,className:g.default(r.default["tedi-button-group__dropdown-trigger"],r.default[`tedi-button-group__dropdown-trigger--${c}`],j),noStyle:!0,fullWidth:!0,children:[a?o.jsx(n.Icon,{name:typeof a=="string"?a:a.name,color:"inherit"}):d?o.jsx(n.Icon,{name:typeof d=="string"?d:d.name,color:"inherit"}):o.jsx(n.Icon,{name:"menu",color:"inherit"}),B]})}),o.jsx(u.Dropdown.Content,{children:m.map((e,l)=>o.jsxs(u.Dropdown.Item,{index:l,active:e==null?void 0:e.props.isActive,disabled:e==null?void 0:e.props.disabled,onClick:t=>{var p,h;e.props.disabled||(t.type==="click"&&((h=(p=e.props).onClick)==null||h.call(p,t)),e.props.id&&(s==null||s(e.props.id)))},className:r.default["tedi-button-group__dropdown-item"],children:[e.props.iconLeft&&o.jsx(n.Icon,{name:typeof e.props.iconLeft=="string"?e.props.iconLeft:e.props.iconLeft.name,color:"inherit"}),e.props.children,e.props.iconRight&&o.jsx(n.Icon,{name:typeof e.props.iconRight=="string"?e.props.iconRight:e.props.iconRight.name,color:"inherit"}),e.props.isActive&&o.jsx("span",{className:"sr-only",children:_("button-group.selected")})]},e.props.id||l))})]}):o.jsx("div",{className:g.default(r.default["tedi-button-group"],r.default[`tedi-button-group--${c}`],{[r.default["tedi-button-group--stretch"]]:q},j),role:"group","aria-label":v,children:m.map(e=>y.cloneElement(e,{className:g.default(r.default["tedi-button-group__item"],{[r.default["tedi-button-group__item--active"]]:e.props.isActive,[r.default["tedi-button-group__item--disabled"]]:e.props.disabled,[r.default[`tedi-button-group__item--size-${f}`]]:f},e.props.className),size:f,"aria-pressed":!!e.props.isActive,onClick:l=>{var t,p;(p=(t=e.props).onClick)==null||p.call(t,l),e.props.id&&(s==null||s(e.props.id))}}))})};exports.ButtonGroup=C;

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

@@ -4,11 +4,11 @@ import { Children as x, isValidElement as z, cloneElement as B } from "react";
 import { Icon as a } from "../../base/icon/icon.es.js";
 import { Button as k } from "../button/button.es.js";
 import r from "./button-group.module.scss.es.js";
-import { useBreakpoint as D, isBreakpointBelow as E } from "../../../helpers/hooks/use-breakpoint.es.js";
-import { useLabels as T } from "../../../providers/label-provider/use-labels.es.js";
+import { useLabels as D } from "../../../providers/label-provider/use-labels.es.js";
+import E, { isBreakpointBelow as T } from "../../../helpers/hooks/use-breakpoint.es.js";
 import { Dropdown as d } from "../../overlays/dropdown/dropdown.es.js";
 const P = (N) => {
-  const { getLabel: _ } = T(), {
+  const { getLabel: _ } = D(), {
     children: v,
     className: h,
     type: m = "primary",
@@ -20,7 +20,7 @@ const P = (N) => {
     mobileBreakpoint: R = "md",
     dropdownLabel: L = _("sidenav.submenu"),
     dropdownLabelMode: C = "static"
-  } = N, M = D(), $ = E(M, R), f = x.toArray(v).filter(
+  } = N, M = E(), $ = T(M, R), f = x.toArray(v).filter(
     (o) => z(o) && o.type === k
   ), e = f.find((o) => o.props.isActive), j = C === "static" ? L : (e == null ? void 0 : e.props.children) ?? L, n = e == null ? void 0 : e.props.iconLeft, l = e == null ? void 0 : e.props.icon;
   return $ && I ? /* @__PURE__ */ g(d, { width: "trigger", children: [
@@ -107,6 +107,5 @@ const P = (N) => {
   );
 };
 export {
-  P as ButtonGroup,
-  P as default
+  P as ButtonGroup
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),m=require("./card-button.module.scss.cjs.js"),n=l.forwardRef((o,r)=>{const{as:a,children:u,className:s,...t}=o,e=a||"button",c=e==="button";return d.jsx(e,{"data-name":"card-button",...t,...c?{type:t.type??"button"}:{},ref:r,className:i.default(m.default["tedi-card-button"],s),children:u})});n.displayName="CardButton";const b=n;exports.CardButton=b;

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { PolymorphicComponentPropWithRef } from '../../../helpers/polymorphic/types';
+export interface CardButtonBaseProps {
+    /**
+     * A single `<Card>` to render as the interactive surface. The host element provides the
+     * interaction semantics and applies the hover / active / focus / disabled states to the
+     * card and its blocks. Keep it to one card and avoid nested interactive elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name on the host element.
+     */
+    className?: string;
+}
+export type CardButtonProps<C extends React.ElementType = 'button'> = PolymorphicComponentPropWithRef<C, CardButtonBaseProps>;
+export declare const CardButton: <C extends React.ElementType = "button">(props: CardButtonProps<C>) => React.ReactElement | null;
+export default CardButton;

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

@@ -0,0 +1,25 @@
+import { jsx as c } from "react/jsx-runtime";
+import u from "../../../../../external/classnames/index.es.js";
+import { forwardRef as d } from "react";
+import i from "./card-button.module.scss.es.js";
+const n = d(
+  (r, s) => {
+    const { as: a, children: e, className: m, ...t } = r, o = a || "button";
+    return /* @__PURE__ */ c(
+      o,
+      {
+        "data-name": "card-button",
+        ...t,
+        ...o === "button" ? { type: t.type ?? "button" } : {},
+        ref: s,
+        className: u(i["tedi-card-button"], m),
+        children: e
+      }
+    );
+  }
+);
+n.displayName = "CardButton";
+const y = n;
+export {
+  y as CardButton
+};

package/src/tedi/components/buttons/card-button/card-button.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-card-button":"tedi-card-button-57ad7420"};exports.default=e;

package/src/tedi/components/buttons/card-button/card-button.module.scss.es.js

@@ -0,0 +1,6 @@
+const t = {
+  "tedi-card-button": "tedi-card-button-57ad7420"
+};
+export {
+  t as default
+};

package/src/tedi/components/buttons/card-button/index.d.ts

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

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

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

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

@@ -84,6 +84,21 @@ export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps
      * If provided, overrides the default open/close text for the accessible name.
      */
     toggleLabel?: string;
+    /**
+     * Use Collapse purely as a toggle trigger for content rendered elsewhere.
+     *
+     * When set, the toggle button's `aria-controls` points at the supplied id
+     * instead of Collapse's internal content panel, and the internal panel is
+     * **not rendered**. Useful when the disclosed region must live outside
+     * Collapse's DOM subtree (e.g. a table row whose details live in a
+     * sibling `<tr>`). The consumer is responsible for rendering the target
+     * element with the matching `id` and an appropriate `role` (typically
+     * `region`).
+     *
+     * When omitted (default), Collapse renders its own `children` inside a
+     * built-in `role="region"` panel.
+     */
+    controlsId?: string;
 }
 export declare const Collapse: (props: CollapseProps) => JSX.Element;
 export default Collapse;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),L=require("../../../../../external/classnames/index.cjs.js"),T=require("react"),c=require("../../base/icon/icon.cjs.js"),e=require("./collapse-button.module.scss.cjs.js"),v=require("../../../providers/label-provider/use-labels.cjs.js"),p=T.forwardRef((b,f)=>{const{open:a,onOpenChange:s,openText:m,closeText:x,hideText:t=!1,arrowType:o="default",size:_="default",inverted:y=!1,underline:h=!0,className:j,onClick:n,"aria-label":d,...N}=b,{getLabel:i}=v.useLabels(),r=a?x??i("close"):m??i("open"),q=t?d??r:d,C=u=>{n==null||n(u),!u.defaultPrevented&&(s==null||s(!a))},B=L.default(e.default["tedi-collapse-button"],{[e.default["tedi-collapse-button--open"]]:a,[e.default["tedi-collapse-button--small"]]:_==="small",[e.default["tedi-collapse-button--inverted"]]:y&&o!=="secondary",[e.default["tedi-collapse-button--icon-only"]]:t,[e.default["tedi-collapse-button--neutral"]]:t&&o!=="secondary",[e.default["tedi-collapse-button--secondary"]]:t&&o==="secondary",[e.default["tedi-collapse-button--no-underline"]]:!t&&!h},j);return l.jsxs("button",{ref:f,type:"button",...N,className:B,onClick:C,"aria-expanded":a,"aria-label":q,children:[!t&&l.jsx("span",{className:e.default["tedi-collapse-button__text"],children:r}),t?o==="secondary"?l.jsx("span",{className:e.default["tedi-collapse-button__icon-wrapper"],children:l.jsx(c.Icon,{className:e.default["tedi-collapse-button__icon"],name:"expand_more",color:"inherit",filled:!0,size:24})}):l.jsx(c.Icon,{className:e.default["tedi-collapse-button__icon"],name:"expand_more",color:"inherit",filled:!0,size:24}):l.jsx("span",{className:e.default["tedi-collapse-button__icon-pad"],children:l.jsx(c.Icon,{className:e.default["tedi-collapse-button__icon"],name:"expand_more",color:"inherit",size:16})})]})});p.displayName="CollapseButton";const z=p;exports.CollapseButton=z;

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

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+export type CollapseButtonArrowType = 'default' | 'secondary';
+export type CollapseButtonSize = 'default' | 'small';
+export interface CollapseButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'onChange' | 'children'> {
+    /**
+     * Current open state. Bind alongside `onOpenChange` to keep in sync.
+     */
+    open: boolean;
+    /**
+     * Called when the user toggles the button. Receives the next open state.
+     * Standard native `onClick` still fires too; if it calls `preventDefault`
+     * the toggle is suppressed.
+     */
+    onOpenChange?: (next: boolean) => void;
+    /**
+     * Label shown when collapsed. Rendered literally — translate at the call
+     * site if needed. When omitted, falls back to the `LabelProvider`'s
+     * translated `'open'` label.
+     */
+    openText?: string;
+    /**
+     * Label shown when expanded. Rendered literally — translate at the call
+     * site if needed. When omitted, falls back to the `LabelProvider`'s
+     * translated `'close'` label.
+     */
+    closeText?: string;
+    /**
+     * Hide the label and render the chevron only.
+     * @default false
+     */
+    hideText?: boolean;
+    /**
+     * Chevron style. Only takes effect with `hideText` (icon-only mode).
+     * @default default
+     */
+    arrowType?: CollapseButtonArrowType;
+    /**
+     * Visual size.
+     * @default default
+     */
+    size?: CollapseButtonSize;
+    /**
+     * Light text and icon for placement on a dark / brand background. Ignored
+     * when `arrowType` is `secondary` (no inverted form in the design).
+     * @default false
+     */
+    inverted?: boolean;
+    /**
+     * Underline the text label. Set `false` in contexts where the chevron is
+     * the sole affordance (e.g. inside an accordion header). Has no effect in
+     * icon-only mode.
+     * @default true
+     */
+    underline?: boolean;
+    /**
+     * Accessible label. Required when `hideText` is `true`.
+     */
+    'aria-label'?: string;
+}
+export declare const CollapseButton: React.ForwardRefExoticComponent<CollapseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default CollapseButton;

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

@@ -0,0 +1,67 @@
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import w from "../../../../../external/classnames/index.es.js";
+import B from "react";
+import { Icon as r } from "../../base/icon/icon.es.js";
+import e from "./collapse-button.module.scss.es.js";
+import { useLabels as j } from "../../../providers/label-provider/use-labels.es.js";
+const u = B.forwardRef((m, b) => {
+  const {
+    open: l,
+    onOpenChange: s,
+    openText: f,
+    closeText: _,
+    hideText: t = !1,
+    arrowType: a = "default",
+    size: x = "default",
+    inverted: y = !1,
+    underline: N = !0,
+    className: h,
+    onClick: n,
+    "aria-label": i,
+    ...C
+  } = m, { getLabel: c } = j(), d = l ? _ ?? c("close") : f ?? c("open"), z = t ? i ?? d : i, L = (p) => {
+    n == null || n(p), !p.defaultPrevented && (s == null || s(!l));
+  }, T = w(
+    e["tedi-collapse-button"],
+    {
+      [e["tedi-collapse-button--open"]]: l,
+      [e["tedi-collapse-button--small"]]: x === "small",
+      [e["tedi-collapse-button--inverted"]]: y && a !== "secondary",
+      [e["tedi-collapse-button--icon-only"]]: t,
+      [e["tedi-collapse-button--neutral"]]: t && a !== "secondary",
+      [e["tedi-collapse-button--secondary"]]: t && a === "secondary",
+      [e["tedi-collapse-button--no-underline"]]: !t && !N
+    },
+    h
+  );
+  return /* @__PURE__ */ v(
+    "button",
+    {
+      ref: b,
+      type: "button",
+      ...C,
+      className: T,
+      onClick: L,
+      "aria-expanded": l,
+      "aria-label": z,
+      children: [
+        !t && /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__text"], children: d }),
+        t ? a === "secondary" ? /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__icon-wrapper"], children: /* @__PURE__ */ o(
+          r,
+          {
+            className: e["tedi-collapse-button__icon"],
+            name: "expand_more",
+            color: "inherit",
+            filled: !0,
+            size: 24
+          }
+        ) }) : /* @__PURE__ */ o(r, { className: e["tedi-collapse-button__icon"], name: "expand_more", color: "inherit", filled: !0, size: 24 }) : /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__icon-pad"], children: /* @__PURE__ */ o(r, { className: e["tedi-collapse-button__icon"], name: "expand_more", color: "inherit", size: 16 }) })
+      ]
+    }
+  );
+});
+u.displayName = "CollapseButton";
+const q = u;
+export {
+  q as CollapseButton
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-collapse-button":"tedi-collapse-button-ae05875b","tedi-collapse-button__text":"tedi-collapse-button__text-6763f718","tedi-collapse-button--no-underline":"tedi-collapse-button--no-underline-26e3e8f3","tedi-collapse-button__icon":"tedi-collapse-button__icon-343170a2","tedi-collapse-button__icon-pad":"tedi-collapse-button__icon-pad-352e26ef","tedi-collapse-button__icon-wrapper":"tedi-collapse-button__icon-wrapper-8eda7a8b","tedi-collapse-button--open":"tedi-collapse-button--open-2f66bdca","tedi-collapse-button--small":"tedi-collapse-button--small-2e823f5a","tedi-collapse-button--icon-only":"tedi-collapse-button--icon-only-65e88949","tedi-collapse-button--neutral":"tedi-collapse-button--neutral-16b6a760","tedi-collapse-button--secondary":"tedi-collapse-button--secondary-f3a0b2c7","tedi-collapse-button--inverted":"tedi-collapse-button--inverted-288a9527"};exports.default=t;

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

@@ -0,0 +1,17 @@
+const t = {
+  "tedi-collapse-button": "tedi-collapse-button-ae05875b",
+  "tedi-collapse-button__text": "tedi-collapse-button__text-6763f718",
+  "tedi-collapse-button--no-underline": "tedi-collapse-button--no-underline-26e3e8f3",
+  "tedi-collapse-button__icon": "tedi-collapse-button__icon-343170a2",
+  "tedi-collapse-button__icon-pad": "tedi-collapse-button__icon-pad-352e26ef",
+  "tedi-collapse-button__icon-wrapper": "tedi-collapse-button__icon-wrapper-8eda7a8b",
+  "tedi-collapse-button--open": "tedi-collapse-button--open-2f66bdca",
+  "tedi-collapse-button--small": "tedi-collapse-button--small-2e823f5a",
+  "tedi-collapse-button--icon-only": "tedi-collapse-button--icon-only-65e88949",
+  "tedi-collapse-button--neutral": "tedi-collapse-button--neutral-16b6a760",
+  "tedi-collapse-button--secondary": "tedi-collapse-button--secondary-f3a0b2c7",
+  "tedi-collapse-button--inverted": "tedi-collapse-button--inverted-288a9527"
+};
+export {
+  t as default
+};

package/src/tedi/components/cards/card/card-stories-templates.d.ts

@@ -1,4 +1,4 @@
-import { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react-vite';
 import { CardStory } from './card.stories';
 export declare const HeaderTypesTemplate: StoryFn<CardStory>;
 export declare const DefaultCardTemplates: StoryFn<CardStory>;

package/src/tedi/components/cards/card/card.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),B=require("../../../../../external/classnames/index.cjs.js"),P=require("react"),e=require("./card.module.scss.cjs.js"),R=require("./card-content/card-content.cjs.js"),x=require("./card-context.cjs.js"),N=require("./card-header/card-header.cjs.js"),j=require("./card-notification/card-notification.cjs.js"),i=require("./utility.cjs.js"),k=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),n=P.forwardRef((t,c)=>{const{getCurrentBreakpointProps:u}=k.useBreakpointProps(t.defaultServerBreakpoint),{children:l,className:f,padding:C,background:b,borderRadius:m,borderless:p,border:g,...q}=u(t,{padding:1}),[d,a]=i.getCardBorderPlacementColor(g),r=i.resolveBorderRadius(m),v=B.default(e.default["tedi-card"],{[e.default[`tedi-card--border-${d}`]]:d,[e.default[`tedi-card--border--${a}`]]:a,[e.default["tedi-card--borderless"]]:p,[e.default["tedi-card--no-radius-tl"]]:!r.topLeft,[e.default["tedi-card--no-radius-tr"]]:!r.topRight,[e.default["tedi-card--no-radius-br"]]:!r.bottomRight,[e.default["tedi-card--no-radius-bl"]]:!r.bottomLeft},f);return o.jsx(x.CardContext.Provider,{value:{padding:C,background:b},children:o.jsx("div",{"data-name":"card","data-testid":"tedi-card",...q,className:v,ref:c,children:l})})});n.displayName="Card";const s=Object.assign(n,{Content:R.CardContent,Header:N.CardHeader,Notification:j.CardNotification});exports.Card=s;exports.default=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),B=require("../../../../../external/classnames/index.cjs.js"),P=require("react"),e=require("./card.module.scss.cjs.js"),R=require("./card-content/card-content.cjs.js"),v=require("./card-context.cjs.js"),x=require("./card-header/card-header.cjs.js"),N=require("./card-notification/card-notification.cjs.js"),i=require("./utility.cjs.js"),j=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),n=P.forwardRef((t,c)=>{const{getCurrentBreakpointProps:s}=j.useBreakpointProps(t.defaultServerBreakpoint),{children:u,className:l,padding:f,background:C,borderRadius:b,borderless:m,border:p,...g}=s(t,{padding:1}),[d,a]=i.getCardBorderPlacementColor(p),r=i.resolveBorderRadius(b),q=B.default(e.default["tedi-card"],{[e.default[`tedi-card--border-${d}`]]:d,[e.default[`tedi-card--border--${a}`]]:a,[e.default["tedi-card--borderless"]]:m,[e.default["tedi-card--no-radius-tl"]]:!r.topLeft,[e.default["tedi-card--no-radius-tr"]]:!r.topRight,[e.default["tedi-card--no-radius-br"]]:!r.bottomRight,[e.default["tedi-card--no-radius-bl"]]:!r.bottomLeft},l);return o.jsx(v.CardContext.Provider,{value:{padding:f,background:C},children:o.jsx("div",{"data-name":"card","data-testid":"tedi-card",...g,className:q,ref:c,children:u})})});n.displayName="Card";const k=Object.assign(n,{Content:R.CardContent,Header:x.CardHeader,Notification:N.CardNotification});exports.Card=k;