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

package/src/tedi/components/misc/affix/affix.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),q=require("../../../../../external/classnames/index.cjs.js"),b=require("react"),g=require("../../../../../external/react-sticky-box/dist/index.cjs.js"),e=require("./affix.module.scss.cjs.js"),$=require("../../../../community/components/layout/layout-context.cjs.js"),j=require("../../../helpers/hooks/use-element-size.cjs.js"),l=c=>{const{children:n,relative:x=["header"],className:p,position:f="sticky",top:t=1.5,bottom:i,right:u,left:a}=c,{headerBottomElement:m}=b.useContext($.LayoutContext),o=j.useElementSize(m),d=q.default(e.default["tedi-affix"],p,e.default[`tedi-affix--${f}`],{[e.default[`tedi-affix--top-${t}`.replace(".","-")]]:typeof t<"u"&&f==="fixed",[e.default[`tedi-affix--bottom-${i}`.replace(".","-")]]:typeof i<"u",[e.default[`tedi-affix--left-${a}`.replace(".","-")]]:typeof a<"u",[e.default[`tedi-affix--right-${u}`.replace(".","-")]]:typeof u<"u"});if(f==="fixed")return r.jsx("div",{className:d,children:n});const s=(typeof t=="number"?t:0)*16,y=x.includes("header")?s+((o==null?void 0:o.height)||0):s,h=(typeof i=="number"?i:0)*16;return r.jsx(g.default,{offsetTop:y,offsetBottom:h,className:d,children:n})};exports.Affix=l;exports.default=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),q=require("react"),b=require("../../../../../external/react-sticky-box/dist/index.cjs.js"),e=require("./affix.module.scss.cjs.js"),g=require("../../../../community/components/layout/layout-context.cjs.js"),$=require("../../../helpers/hooks/use-element-size.cjs.js"),j=c=>{const{children:n,relative:l=["header"],className:x,position:f="sticky",top:t=1.5,bottom:i,right:a,left:d}=c,{headerBottomElement:p}=q.useContext(g.LayoutContext),o=$.useElementSize(p),r=h.default(e.default["tedi-affix"],x,e.default[`tedi-affix--${f}`],{[e.default[`tedi-affix--top-${t}`.replace(".","-")]]:typeof t<"u"&&f==="fixed",[e.default[`tedi-affix--bottom-${i}`.replace(".","-")]]:typeof i<"u",[e.default[`tedi-affix--left-${d}`.replace(".","-")]]:typeof d<"u",[e.default[`tedi-affix--right-${a}`.replace(".","-")]]:typeof a<"u"});if(f==="fixed")return u.jsx("div",{className:r,children:n});const s=(typeof t=="number"?t:0)*16,m=l.includes("header")?s+((o==null?void 0:o.height)||0):s,y=(typeof i=="number"?i:0)*16;return u.jsx(b.default,{offsetTop:m,offsetBottom:y,className:r,children:n})};exports.Affix=j;

package/src/tedi/components/misc/affix/affix.es.js

@@ -6,18 +6,17 @@ import e from "./affix.module.scss.es.js";
 import { LayoutContext as g } from "../../../../community/components/layout/layout-context.es.js";
 import { useElementSize as N } from "../../../helpers/hooks/use-element-size.es.js";
 const L = (d) => {
-  const { children: r, relative: c = ["header"], className: l, position: f = "sticky", top: t = 1.5, bottom: o, right: s, left: n } = d, { headerBottomElement: u } = $(g), i = N(u), a = h(e["tedi-affix"], l, e[`tedi-affix--${f}`], {
+  const { children: r, relative: c = ["header"], className: l, position: f = "sticky", top: t = 1.5, bottom: o, right: n, left: s } = d, { headerBottomElement: u } = $(g), i = N(u), m = h(e["tedi-affix"], l, e[`tedi-affix--${f}`], {
     [e[`tedi-affix--top-${t}`.replace(".", "-")]]: typeof t < "u" && f === "fixed",
     [e[`tedi-affix--bottom-${o}`.replace(".", "-")]]: typeof o < "u",
-    [e[`tedi-affix--left-${n}`.replace(".", "-")]]: typeof n < "u",
-    [e[`tedi-affix--right-${s}`.replace(".", "-")]]: typeof s < "u"
+    [e[`tedi-affix--left-${s}`.replace(".", "-")]]: typeof s < "u",
+    [e[`tedi-affix--right-${n}`.replace(".", "-")]]: typeof n < "u"
   });
   if (f === "fixed")
-    return /* @__PURE__ */ p("div", { className: a, children: r });
-  const m = (typeof t == "number" ? t : 0) * 16, x = c.includes("header") ? m + ((i == null ? void 0 : i.height) || 0) : m, y = (typeof o == "number" ? o : 0) * 16;
-  return /* @__PURE__ */ p(b, { offsetTop: x, offsetBottom: y, className: a, children: r });
+    return /* @__PURE__ */ p("div", { className: m, children: r });
+  const a = (typeof t == "number" ? t : 0) * 16, x = c.includes("header") ? a + ((i == null ? void 0 : i.height) || 0) : a, y = (typeof o == "number" ? o : 0) * 16;
+  return /* @__PURE__ */ p(b, { offsetTop: x, offsetBottom: y, className: m, children: r });
 };
 export {
-  L as Affix,
-  L as default
+  L as Affix
 };

package/src/tedi/components/misc/ellipsis/ellipsis.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),l=require("../../overlays/popover/popover.cjs.js"),g=require("./ellipsis.module.scss.cjs.js"),h=require("../../../helpers/hooks/use-element-size.cjs.js"),o=u=>{const{children:i,lineClamp:r=2,popover:c=!0,className:a,...p}=u,e=t.useRef(null),[d,f]=t.useState(!1),m=h.useElementSize(e);t.useEffect(()=>{e.current&&f(e.current.scrollHeight>e.current.clientHeight)},[e,m]);const n=s.jsx("div",{"data-name":"ellipsis",...p,ref:e,className:v.default(g.default["tedi-ellipsis"],a),style:{lineClamp:r,WebkitLineClamp:r},children:i});return d&&c?s.jsxs(l.Popover,{openWith:"hover",focusManager:{modal:!1},children:[s.jsx(l.Popover.Trigger,{children:n}),s.jsx(l.Popover.Content,{children:i})]}):n};exports.Ellipsis=o;exports.default=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),i=require("../../overlays/popover/popover.cjs.js"),v=require("./ellipsis.module.scss.cjs.js"),g=require("../../../helpers/hooks/use-element-size.cjs.js"),h=o=>{const{children:l,lineClamp:r=2,popover:c=!0,className:u,...p}=o,e=t.useRef(null),[a,d]=t.useState(!1),m=g.useElementSize(e);t.useEffect(()=>{e.current&&d(e.current.scrollHeight>e.current.clientHeight)},[e,m]);const n=s.jsx("div",{"data-name":"ellipsis",...p,ref:e,className:f.default(v.default["tedi-ellipsis"],u),style:{lineClamp:r,WebkitLineClamp:r},children:l});return a&&c?s.jsxs(i.Popover,{openWith:"hover",focusManager:{modal:!1},children:[s.jsx(i.Popover.Trigger,{children:n}),s.jsx(i.Popover.Content,{children:l})]}):n};exports.Ellipsis=h;

package/src/tedi/components/misc/ellipsis/ellipsis.es.js

@@ -5,7 +5,7 @@ import { Popover as l } from "../../overlays/popover/popover.es.js";
 import g from "./ellipsis.module.scss.es.js";
 import { useElementSize as E } from "../../../helpers/hooks/use-element-size.es.js";
 const j = (n) => {
-  const { children: r, lineClamp: i = 2, popover: m = !0, className: a, ...c } = n, e = t.useRef(null), [p, f] = t.useState(!1), u = E(e);
+  const { children: r, lineClamp: i = 2, popover: m = !0, className: c, ...a } = n, e = t.useRef(null), [p, f] = t.useState(!1), u = E(e);
   t.useEffect(() => {
     e.current && f(e.current.scrollHeight > e.current.clientHeight);
   }, [e, u]);
@@ -13,9 +13,9 @@ const j = (n) => {
     "div",
     {
       "data-name": "ellipsis",
-      ...c,
+      ...a,
       ref: e,
-      className: h(g["tedi-ellipsis"], a),
+      className: h(g["tedi-ellipsis"], c),
       style: { lineClamp: i, WebkitLineClamp: i },
       children: r
     }
@@ -26,6 +26,5 @@ const j = (n) => {
   ] }) : o;
 };
 export {
-  j as Ellipsis,
-  j as default
+  j as Ellipsis
 };

package/src/tedi/components/misc/empty-state/empty-state.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),l=require("../../base/icon/icon.cjs.js"),f=require("../../base/typography/heading/heading.cjs.js"),y=require("../../base/typography/text/text.cjs.js"),t=require("./empty-state.module.scss.cjs.js"),r=({type:o="separate",size:c="default",icon:s="spa",heading:a,children:d,actions:i,className:u})=>{const m=p.default(t.default["tedi-empty-state"],t.default[`tedi-empty-state--${o}`],t.default[`tedi-empty-state--${c}`],u),n=s===null?null:typeof s=="string"?e.jsx(l.Icon,{name:s,size:36,color:"brand"}):e.jsx(l.Icon,{size:36,color:"brand",...s});return e.jsxs("div",{"data-name":"tedi-empty-state",className:m,children:[e.jsxs("div",{className:t.default["tedi-empty-state__text"],children:[n&&e.jsx("div",{className:t.default["tedi-empty-state__icon"],children:n}),(a||d)&&e.jsxs("div",{className:t.default["tedi-empty-state__content"],children:[a&&e.jsx(f.Heading,{className:t.default["tedi-empty-state__heading"],element:"h3",modifiers:"h3",color:"brand",children:a}),d&&e.jsx(y.Text,{className:t.default["tedi-empty-state__description"],color:"secondary",modifiers:"center",children:d})]})]}),i&&e.jsx("div",{className:t.default["tedi-empty-state__actions"],children:i})]})};r.displayName="EmptyState";exports.EmptyState=r;exports.default=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),n=require("../../base/icon/icon.cjs.js"),y=require("../../base/typography/heading/heading.cjs.js"),f=require("../../base/typography/text/text.cjs.js"),t=require("./empty-state.module.scss.cjs.js"),l=({type:c="separate",size:o="default",icon:s="spa",heading:a,children:d,actions:r,className:m})=>{const u=p.default(t.default["tedi-empty-state"],t.default[`tedi-empty-state--${c}`],t.default[`tedi-empty-state--${o}`],m),i=s===null?null:typeof s=="string"?e.jsx(n.Icon,{name:s,size:36,color:"brand"}):e.jsx(n.Icon,{size:36,color:"brand",...s});return e.jsxs("div",{"data-name":"tedi-empty-state",className:u,children:[e.jsxs("div",{className:t.default["tedi-empty-state__text"],children:[i&&e.jsx("div",{className:t.default["tedi-empty-state__icon"],children:i}),(a||d)&&e.jsxs("div",{className:t.default["tedi-empty-state__content"],children:[a&&e.jsx(y.Heading,{className:t.default["tedi-empty-state__heading"],element:"h3",modifiers:"h3",color:"brand",children:a}),d&&e.jsx(f.Text,{className:t.default["tedi-empty-state__description"],color:"secondary",modifiers:"center",children:d})]})]}),r&&e.jsx("div",{className:t.default["tedi-empty-state__actions"],children:r})]})};l.displayName="EmptyState";exports.EmptyState=l;

package/src/tedi/components/misc/empty-state/empty-state.es.js

@@ -1,12 +1,12 @@
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import y from "../../../../../external/classnames/index.es.js";
-import { Icon as o } from "../../base/icon/icon.es.js";
+import { Icon as d } from "../../base/icon/icon.es.js";
 import { Heading as f } from "../../base/typography/heading/heading.es.js";
 import { Text as _ } from "../../base/typography/text/text.es.js";
 import e from "./empty-state.module.scss.es.js";
 const N = ({
-  type: l = "separate",
-  size: n = "default",
+  type: n = "separate",
+  size: l = "default",
   icon: s = "spa",
   heading: a,
   children: r,
@@ -15,13 +15,13 @@ const N = ({
 }) => {
   const c = y(
     e["tedi-empty-state"],
-    e[`tedi-empty-state--${l}`],
     e[`tedi-empty-state--${n}`],
+    e[`tedi-empty-state--${l}`],
     p
-  ), d = s === null ? null : typeof s == "string" ? /* @__PURE__ */ t(o, { name: s, size: 36, color: "brand" }) : /* @__PURE__ */ t(o, { size: 36, color: "brand", ...s });
+  ), o = s === null ? null : typeof s == "string" ? /* @__PURE__ */ t(d, { name: s, size: 36, color: "brand" }) : /* @__PURE__ */ t(d, { size: 36, color: "brand", ...s });
   return /* @__PURE__ */ m("div", { "data-name": "tedi-empty-state", className: c, children: [
     /* @__PURE__ */ m("div", { className: e["tedi-empty-state__text"], children: [
-      d && /* @__PURE__ */ t("div", { className: e["tedi-empty-state__icon"], children: d }),
+      o && /* @__PURE__ */ t("div", { className: e["tedi-empty-state__icon"], children: o }),
       (a || r) && /* @__PURE__ */ m("div", { className: e["tedi-empty-state__content"], children: [
         a && /* @__PURE__ */ t(f, { className: e["tedi-empty-state__heading"], element: "h3", modifiers: "h3", color: "brand", children: a }),
         r && /* @__PURE__ */ t(_, { className: e["tedi-empty-state__description"], color: "secondary", modifiers: "center", children: r })
@@ -32,6 +32,5 @@ const N = ({
 };
 N.displayName = "EmptyState";
 export {
-  N as EmptyState,
-  N as default
+  N as EmptyState
 };

package/src/tedi/components/misc/option-content/option-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),f=require("../../base/icon/icon.cjs.js"),t=require("./option-content.module.scss.cjs.js"),s=o.forwardRef(({children:e,className:n,id:i},c)=>a.jsx("span",{ref:c,id:i,className:l.default(t.default["tedi-option-content__label"],n),children:e}));s.displayName="OptionContentLabel";const m=o.forwardRef(({children:e,className:n},i)=>a.jsx("span",{ref:i,className:l.default(t.default["tedi-option-content__meta"],n),children:e}));m.displayName="OptionContentMeta";const I=(e,n)=>{const i=typeof e=="string"?{name:e}:e;return a.jsx(f.Icon,{size:18,...i,className:l.default(n,i.className)})},k=o.forwardRef(({children:e,type:n="default",layout:i="horizontal",selected:c=!1,indeterminate:r=!1,disabled:u=!1,icon:_,indicatorSemantics:C="presentation",className:N},j)=>{const b=o.useId(),p=C==="control",x=p&&n!=="default"&&o.Children.toArray(e).some(d=>o.isValidElement(d)&&d.type===s),h=x?b:void 0,O=p?{role:"checkbox","aria-checked":r?"mixed":c,"aria-disabled":u||void 0,"aria-labelledby":h}:{"aria-hidden":!0},y=p?{role:"radio","aria-checked":c,"aria-disabled":u||void 0,"aria-labelledby":h}:{"aria-hidden":!0},v=x?o.Children.map(e,d=>o.isValidElement(d)&&d.type===s?o.cloneElement(d,{id:b}):d):e;return a.jsxs("div",{ref:j,className:l.default(t.default["tedi-option-content"],t.default[`tedi-option-content--${i}`],{[t.default["tedi-option-content--checkbox"]]:n==="checkbox",[t.default["tedi-option-content--radio"]]:n==="radio",[t.default["tedi-option-content--disabled"]]:u},N),children:[n==="checkbox"&&a.jsx("span",{...O,className:l.default(t.default["tedi-option-content__indicator"],t.default["tedi-option-content__checkbox"],{[t.default["tedi-option-content__checkbox--checked"]]:c||r}),children:r?a.jsx(f.Icon,{name:"remove",size:16,className:t.default["tedi-option-content__check-icon"]}):c?a.jsx(f.Icon,{name:"check",size:16,className:t.default["tedi-option-content__check-icon"]}):null}),n==="radio"&&a.jsx("span",{...y,className:l.default(t.default["tedi-option-content__indicator"],t.default["tedi-option-content__radio"],{[t.default["tedi-option-content__radio--checked"]]:c})}),_&&I(_,t.default["tedi-option-content__icon"]),a.jsx("div",{className:t.default["tedi-option-content__content"],children:v})]})});k.displayName="OptionContent";const q=Object.assign(k,{Label:s,Meta:m});exports.OptionContent=q;exports.OptionContentLabel=s;exports.OptionContentMeta=m;

package/src/tedi/components/misc/option-content/option-content.d.ts

@@ -0,0 +1,71 @@
+import { IconProps } from '../../base/icon/icon';
+export type OptionContentType = 'default' | 'checkbox' | 'radio';
+export type OptionContentLayout = 'horizontal' | 'vertical';
+export interface OptionContentSlotProps {
+    children?: React.ReactNode;
+    /** Additional class name. */
+    className?: string;
+    /** @internal id wired up by `OptionContent` to link the indicator's `aria-labelledby`. */
+    id?: string;
+}
+export declare const OptionContentLabel: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const OptionContentMeta: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+export interface OptionContentProps {
+    /**
+     * Content of the value row — typically `OptionContent.Label` and
+     * optionally `OptionContent.Meta`, but any node is allowed.
+     */
+    children?: React.ReactNode;
+    /**
+     * Selection-indicator type:
+     * - `default` — no indicator
+     * - `checkbox` — checkbox indicator (multi-select)
+     * - `radio` — radio indicator (single-select listbox)
+     * @default default
+     */
+    type?: OptionContentType;
+    /**
+     * Arrange the label and meta side-by-side (`horizontal`) or stacked
+     * (`vertical`, e.g. a title with a description below).
+     * @default horizontal
+     */
+    layout?: OptionContentLayout;
+    /**
+     * Whether the indicator renders as selected (checked).
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the checkbox indicator renders as indeterminate. Ignored for other types.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether the row renders as disabled (dims the indicator and text).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Leading icon, rendered before the content. Accepts an icon name or full `IconProps`.
+     */
+    icon?: string | IconProps;
+    /**
+     * How the selection indicator is exposed to assistive tech:
+     * - `presentation` (default) — the indicator is `aria-hidden`; the interactive
+     *   parent owns selection (menu pattern: `aria-checked` on the `DropdownItem`).
+     * - `control` — the indicator itself carries `role="checkbox"`/`"radio"`,
+     *   `aria-checked` and is named via `aria-labelledby` from `OptionContent.Label`
+     *   (listbox pattern, e.g. inside a `Select` option). Requires a `Label` child.
+     * @default presentation
+     */
+    indicatorSemantics?: 'presentation' | 'control';
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const OptionContent: import('react').ForwardRefExoticComponent<OptionContentProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Label: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Meta: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+};
+export default OptionContent;

package/src/tedi/components/misc/option-content/option-content.es.js

@@ -0,0 +1,91 @@
+import { jsx as a, jsxs as j } from "react/jsx-runtime";
+import s from "../../../../../external/classnames/index.es.js";
+import { forwardRef as _, useId as A, Children as f, isValidElement as x, cloneElement as M } from "react";
+import { Icon as m } from "../../base/icon/icon.es.js";
+import o from "./option-content.module.scss.es.js";
+const r = _(
+  ({ children: t, className: n, id: e }, i) => /* @__PURE__ */ a("span", { ref: i, id: e, className: s(o["tedi-option-content__label"], n), children: t })
+);
+r.displayName = "OptionContentLabel";
+const C = _(({ children: t, className: n }, e) => /* @__PURE__ */ a("span", { ref: e, className: s(o["tedi-option-content__meta"], n), children: t }));
+C.displayName = "OptionContentMeta";
+const g = (t, n) => {
+  const e = typeof t == "string" ? { name: t } : t;
+  return /* @__PURE__ */ a(m, { size: 18, ...e, className: s(n, e.className) });
+}, u = _(
+  ({
+    children: t,
+    type: n = "default",
+    layout: e = "horizontal",
+    selected: i = !1,
+    indeterminate: d = !1,
+    disabled: l = !1,
+    icon: b,
+    indicatorSemantics: O = "presentation",
+    className: y
+  }, v) => {
+    const h = A(), p = O === "control", k = p && n !== "default" && f.toArray(t).some((c) => x(c) && c.type === r), N = k ? h : void 0, I = p ? {
+      role: "checkbox",
+      "aria-checked": d ? "mixed" : i,
+      "aria-disabled": l || void 0,
+      "aria-labelledby": N
+    } : { "aria-hidden": !0 }, z = p ? {
+      role: "radio",
+      "aria-checked": i,
+      "aria-disabled": l || void 0,
+      "aria-labelledby": N
+    } : { "aria-hidden": !0 }, L = k ? f.map(
+      t,
+      (c) => x(c) && c.type === r ? M(c, { id: h }) : c
+    ) : t;
+    return /* @__PURE__ */ j(
+      "div",
+      {
+        ref: v,
+        className: s(
+          o["tedi-option-content"],
+          o[`tedi-option-content--${e}`],
+          {
+            [o["tedi-option-content--checkbox"]]: n === "checkbox",
+            [o["tedi-option-content--radio"]]: n === "radio",
+            [o["tedi-option-content--disabled"]]: l
+          },
+          y
+        ),
+        children: [
+          n === "checkbox" && /* @__PURE__ */ a(
+            "span",
+            {
+              ...I,
+              className: s(o["tedi-option-content__indicator"], o["tedi-option-content__checkbox"], {
+                [o["tedi-option-content__checkbox--checked"]]: i || d
+              }),
+              children: d ? /* @__PURE__ */ a(m, { name: "remove", size: 16, className: o["tedi-option-content__check-icon"] }) : i ? /* @__PURE__ */ a(m, { name: "check", size: 16, className: o["tedi-option-content__check-icon"] }) : null
+            }
+          ),
+          n === "radio" && /* @__PURE__ */ a(
+            "span",
+            {
+              ...z,
+              className: s(o["tedi-option-content__indicator"], o["tedi-option-content__radio"], {
+                [o["tedi-option-content__radio--checked"]]: i
+              })
+            }
+          ),
+          b && g(b, o["tedi-option-content__icon"]),
+          /* @__PURE__ */ a("div", { className: o["tedi-option-content__content"], children: L })
+        ]
+      }
+    );
+  }
+);
+u.displayName = "OptionContent";
+const $ = Object.assign(u, {
+  Label: r,
+  Meta: C
+});
+export {
+  $ as OptionContent,
+  r as OptionContentLabel,
+  C as OptionContentMeta
+};

package/src/tedi/components/misc/option-content/option-content.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-option-content":"tedi-option-content-a433cd53","tedi-option-content--radio":"tedi-option-content--radio-63324c27","tedi-option-content--vertical":"tedi-option-content--vertical-f90f3336","tedi-option-content--checkbox":"tedi-option-content--checkbox-6d08b76f","tedi-option-content__indicator":"tedi-option-content__indicator-cbae42a3","tedi-option-content__icon":"tedi-option-content__icon-919cf745","tedi-option-content--disabled":"tedi-option-content--disabled-947cc3ca","tedi-option-content__label":"tedi-option-content__label-db712a00","tedi-option-content__meta":"tedi-option-content__meta-22706c1d","tedi-option-content__checkbox":"tedi-option-content__checkbox-114cba52","tedi-option-content__checkbox--checked":"tedi-option-content__checkbox--checked-dc7bff22","tedi-option-content__check-icon":"tedi-option-content__check-icon-2c8a9173","tedi-option-content__radio":"tedi-option-content__radio-05184514","tedi-option-content__radio--checked":"tedi-option-content__radio--checked-1980c552","tedi-option-content__content":"tedi-option-content__content-202040f6","tedi-option-content--horizontal":"tedi-option-content--horizontal-292043e8"};exports.default=t;

package/src/tedi/components/misc/option-content/option-content.module.scss.es.js

@@ -0,0 +1,21 @@
+const t = {
+  "tedi-option-content": "tedi-option-content-a433cd53",
+  "tedi-option-content--radio": "tedi-option-content--radio-63324c27",
+  "tedi-option-content--vertical": "tedi-option-content--vertical-f90f3336",
+  "tedi-option-content--checkbox": "tedi-option-content--checkbox-6d08b76f",
+  "tedi-option-content__indicator": "tedi-option-content__indicator-cbae42a3",
+  "tedi-option-content__icon": "tedi-option-content__icon-919cf745",
+  "tedi-option-content--disabled": "tedi-option-content--disabled-947cc3ca",
+  "tedi-option-content__label": "tedi-option-content__label-db712a00",
+  "tedi-option-content__meta": "tedi-option-content__meta-22706c1d",
+  "tedi-option-content__checkbox": "tedi-option-content__checkbox-114cba52",
+  "tedi-option-content__checkbox--checked": "tedi-option-content__checkbox--checked-dc7bff22",
+  "tedi-option-content__check-icon": "tedi-option-content__check-icon-2c8a9173",
+  "tedi-option-content__radio": "tedi-option-content__radio-05184514",
+  "tedi-option-content__radio--checked": "tedi-option-content__radio--checked-1980c552",
+  "tedi-option-content__content": "tedi-option-content__content-202040f6",
+  "tedi-option-content--horizontal": "tedi-option-content--horizontal-292043e8"
+};
+export {
+  t as default
+};

package/src/tedi/components/misc/scroll-visibility/scroll-visibility.es.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as M } from "react/jsx-runtime";
 import y from "../../../../../external/classnames/index.es.js";
-import { useState as S, useRef as V, useEffect as w, cloneElement as x, isValidElement as I } from "react";
+import { useState as S, useRef as V, useEffect as w, isValidElement as x, cloneElement as I } from "react";
 import { useScroll as T } from "../../../helpers/hooks/use-scroll.es.js";
 import f from "./scroll-visibility.module.scss.es.js";
 const k = (H) => {
@@ -44,7 +44,7 @@ const k = (H) => {
     },
     v
   );
-  return I(t) ? x(t, { className: y(t.props.className, b) }) : /* @__PURE__ */ M("div", { className: b, children: t });
+  return x(t) ? I(t, { className: y(t.props.className, b) }) : /* @__PURE__ */ M("div", { className: b, children: t });
 };
 export {
   k as ScrollVisibility,

package/src/tedi/components/misc/stretch-content/stretch-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),d=require("./stretch-content.module.scss.cjs.js"),h=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),t=e=>{const{getCurrentBreakpointProps:r}=h.useBreakpointProps(e.defaultServerBreakpoint),{children:n,role:o,direction:s="both",className:c,...u}=r(e),i=l.default(d.default[`tedi-stretch-content--${s}`],c);return a.jsx("div",{className:i,role:o,...u,children:n})};exports.StretchContent=t;exports.default=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),d=require("./stretch-content.module.scss.cjs.js"),l=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),h=e=>{const{getCurrentBreakpointProps:t}=l.useBreakpointProps(e.defaultServerBreakpoint),{children:r,role:n,direction:o="both",className:s,...c}=t(e),i=a.default(d.default[`tedi-stretch-content--${o}`],s);return u.jsx("div",{className:i,role:n,...c,children:r})};exports.StretchContent=h;

package/src/tedi/components/misc/stretch-content/stretch-content.es.js

@@ -1,18 +1,17 @@
-import { jsx as i } from "react/jsx-runtime";
-import m from "../../../../../external/classnames/index.es.js";
-import l from "./stretch-content.module.scss.es.js";
-import { useBreakpointProps as p } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { jsx as m } from "react/jsx-runtime";
+import a from "../../../../../external/classnames/index.es.js";
+import p from "./stretch-content.module.scss.es.js";
+import { useBreakpointProps as l } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 const B = (t) => {
-  const { getCurrentBreakpointProps: e } = p(t.defaultServerBreakpoint), {
+  const { getCurrentBreakpointProps: e } = l(t.defaultServerBreakpoint), {
     children: r,
     role: o,
     direction: s = "both",
     className: n,
     ...c
-  } = e(t), a = m(l[`tedi-stretch-content--${s}`], n);
-  return /* @__PURE__ */ i("div", { className: a, role: o, ...c, children: r });
+  } = e(t), i = a(p[`tedi-stretch-content--${s}`], n);
+  return /* @__PURE__ */ m("div", { className: i, role: o, ...c, children: r });
 };
 export {
-  B as StretchContent,
-  B as default
+  B as StretchContent
 };

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),I=require("../../base/icon/icon.cjs.js"),M=require("../../buttons/button/button.cjs.js"),t=require("./breadcrumbs.module.scss.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),S=require("../../../providers/label-provider/use-labels.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),k=n=>{const l=[];return o.Children.forEach(n,a=>{if(o.isValidElement(a)){if(a.type===o.Fragment){l.push(...k(a.props.children));return}l.push(a)}}),l},D=e.jsx(I.Icon,{name:"chevron_right",size:16,color:"brand"}),h=n=>{const{children:l,ariaLabel:a,showMoreLabel:v,separator:w=D,className:p}=n,{getCurrentBreakpointProps:B}=P.useBreakpointProps(n.defaultServerBreakpoint),{variant:C="long",maxItems:f,itemsBeforeCollapse:q=1,itemsAfterCollapse:y=1}=B(n),{getLabel:x}=S.useLabels(),_=a??x("breadcrumbs"),L=v??x("breadcrumbs.show-more"),s=k(l);if(s.length===0)return null;if(C==="short"){if(s.length<2)return null;const r=s[s.length-2],i=r.props,c=typeof r.type!="string"&&i.iconLeft===void 0?o.cloneElement(r,{iconLeft:"arrow_back"}):r;return e.jsx("nav",{"aria-label":_,className:b.default(t.default["tedi-breadcrumbs"],p),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:c})})})}const u=Math.max(0,q),m=Math.max(1,y),g=f!==void 0&&s.length>f&&s.length>u+m?[...s.slice(0,u).map(r=>({kind:"item",element:r})),{kind:"ellipsis",hidden:s.slice(u,s.length-m)},...s.slice(s.length-m).map(r=>({kind:"item",element:r}))]:s.map(r=>({kind:"item",element:r})),j=g.length-1;return e.jsx("nav",{"aria-label":_,className:b.default(t.default["tedi-breadcrumbs"],p),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:g.map((r,i)=>e.jsxs(o.Fragment,{children:[r.kind==="item"?e.jsx("li",{className:b.default(t.default["tedi-breadcrumbs__item"],{[t.default["tedi-breadcrumbs__current"]]:i===j}),children:r.element}):e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:e.jsxs(d.Dropdown,{children:[e.jsx(d.Dropdown.Trigger,{children:e.jsxs(M.Button,{noStyle:!0,className:t.default["tedi-breadcrumbs__ellipsis"],children:[e.jsx("span",{"aria-hidden":"true",children:"…"}),e.jsx("span",{className:"sr-only",children:L})]})}),e.jsx(d.Dropdown.Content,{children:r.hidden.map((c,N)=>e.jsx(d.Dropdown.Item,{index:N,asChild:!0,children:c},c.key??N))})]})}),i<j&&e.jsx("li",{className:t.default["tedi-breadcrumbs__separator"],"aria-hidden":"true",children:w})]},i))})})};h.displayName="Breadcrumbs";exports.Breadcrumbs=h;exports.default=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),I=require("../../base/icon/icon.cjs.js"),M=require("../../buttons/button/button.cjs.js"),t=require("./breadcrumbs.module.scss.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),S=require("../../../providers/label-provider/use-labels.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),N=n=>{const l=[];return o.Children.forEach(n,a=>{if(o.isValidElement(a)){if(a.type===o.Fragment){l.push(...N(a.props.children));return}l.push(a)}}),l},D=e.jsx(I.Icon,{name:"chevron_right",size:16,color:"brand"}),k=n=>{const{children:l,ariaLabel:a,showMoreLabel:w,separator:B=D,className:h}=n,{getCurrentBreakpointProps:C}=P.useBreakpointProps(n.defaultServerBreakpoint),{variant:q="long",maxItems:p,itemsBeforeCollapse:v=1,itemsAfterCollapse:y=1}=C(n),{getLabel:f}=S.useLabels(),x=a??f("breadcrumbs"),L=w??f("breadcrumbs.show-more"),s=N(l);if(s.length===0)return null;if(q==="short"){if(s.length<2)return null;const r=s[s.length-2],i=r.props,c=typeof r.type!="string"&&i.iconLeft===void 0?o.cloneElement(r,{iconLeft:"arrow_back"}):r;return e.jsx("nav",{"aria-label":x,className:b.default(t.default["tedi-breadcrumbs"],h),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:c})})})}const u=Math.max(0,v),m=Math.max(1,y),g=p!==void 0&&s.length>p&&s.length>u+m?[...s.slice(0,u).map(r=>({kind:"item",element:r})),{kind:"ellipsis",hidden:s.slice(u,s.length-m)},...s.slice(s.length-m).map(r=>({kind:"item",element:r}))]:s.map(r=>({kind:"item",element:r})),j=g.length-1;return e.jsx("nav",{"aria-label":x,className:b.default(t.default["tedi-breadcrumbs"],h),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:g.map((r,i)=>e.jsxs(o.Fragment,{children:[r.kind==="item"?e.jsx("li",{className:b.default(t.default["tedi-breadcrumbs__item"],{[t.default["tedi-breadcrumbs__current"]]:i===j}),children:r.element}):e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:e.jsxs(d.Dropdown,{children:[e.jsx(d.Dropdown.Trigger,{children:e.jsxs(M.Button,{noStyle:!0,className:t.default["tedi-breadcrumbs__ellipsis"],children:[e.jsx("span",{"aria-hidden":"true",children:"…"}),e.jsx("span",{className:"sr-only",children:L})]})}),e.jsx(d.Dropdown.Content,{children:r.hidden.map((c,_)=>e.jsx(d.Dropdown.Item,{index:_,asChild:!0,children:c},c.key??_))})]})}),i<j&&e.jsx("li",{className:t.default["tedi-breadcrumbs__separator"],"aria-hidden":"true",children:B})]},i))})})};k.displayName="Breadcrumbs";exports.Breadcrumbs=k;

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.es.js

@@ -60,6 +60,5 @@ const v = (l) => {
 };
 F.displayName = "Breadcrumbs";
 export {
-  F as Breadcrumbs,
-  F as default
+  F as Breadcrumbs
 };

package/src/tedi/components/navigation/hash-trigger/hash-trigger.es.js

@@ -1,5 +1,5 @@
 import { jsx as h } from "react/jsx-runtime";
-import { useRef as a, useEffect as l, cloneElement as d, isValidElement as u } from "react";
+import { useRef as a, useEffect as l, isValidElement as d, cloneElement as u } from "react";
 function m(n) {
   const e = n.getBoundingClientRect();
   return e.top >= 0 && e.left >= 0 && e.bottom <= (window.innerHeight || document.documentElement.clientHeight) && e.right <= (window.innerWidth || document.documentElement.clientWidth);
@@ -20,7 +20,7 @@ const p = (n) => {
     return r.current && (s(), r.current = !1), window.addEventListener("hashchange", s), () => {
       window.removeEventListener("hashchange", s);
     };
-  }, [t, i, e]), u(o) ? d(o, { id: t }) : /* @__PURE__ */ h("div", { id: t, children: o });
+  }, [t, i, e]), d(o) ? u(o, { id: t }) : /* @__PURE__ */ h("div", { id: t, children: o });
 };
 export {
   p as HashTrigger

package/src/tedi/components/navigation/horizontal-stepper/horizontal-stepper-context.cjs.js

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

package/src/tedi/components/navigation/horizontal-stepper/horizontal-stepper-context.d.ts

@@ -0,0 +1,2 @@
+/** @internal Step number provided by the parent `HorizontalStepper` to each item. */
+export declare const HorizontalStepperStepNumberContext: import('react').Context<number>;

package/src/tedi/components/navigation/horizontal-stepper/horizontal-stepper-context.es.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+const o = t(0);
+export {
+  o as HorizontalStepperStepNumberContext
+};

package/src/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),x=require("react"),p=require("../../base/icon/icon.cjs.js"),e=require("./horizontal-stepper.module.scss.cjs.js"),_=require("./horizontal-stepper-context.cjs.js"),j=require("../../../providers/label-provider/use-labels.cjs.js"),d=c=>{const{label:m,description:a,completed:u,error:r,selected:i,disabled:s,onSelect:o,className:h}=c,{getLabel:l}=j.useLabels(),z=x.useContext(_.HorizontalStepperStepNumberContext),n=!!u&&!r,b=()=>{i||s||o==null||o()};return t.jsx("li",{"data-name":"horizontal-stepper-item",className:f.default(e.default["tedi-horizontal-stepper-item"],{[e.default["tedi-horizontal-stepper-item--selected"]]:i,[e.default["tedi-horizontal-stepper-item--completed"]]:n,[e.default["tedi-horizontal-stepper-item--error"]]:r,[e.default["tedi-horizontal-stepper-item--disabled"]]:s},h),children:t.jsxs("button",{type:"button",className:e.default["tedi-horizontal-stepper-item__step"],disabled:s,"aria-current":i?"step":void 0,onClick:b,children:[t.jsx("span",{className:e.default["tedi-horizontal-stepper-item__indicator"],children:n?t.jsx(p.Icon,{name:"check",color:"white",size:18,label:l("stepper.completed")}):r?t.jsx(p.Icon,{name:"priority_high",color:"white",size:18,label:l("stepper.error")}):t.jsx("span",{className:e.default["tedi-horizontal-stepper-item__number"],children:z})}),t.jsxs("span",{className:e.default["tedi-horizontal-stepper-item__content"],children:[t.jsx("span",{className:e.default["tedi-horizontal-stepper-item__label"],children:m}),a&&t.jsx("span",{className:e.default["tedi-horizontal-stepper-item__description"],children:a})]})]})})};d.displayName="HorizontalStepperItem";exports.HorizontalStepperItem=d;

package/src/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item.d.ts

@@ -0,0 +1,45 @@
+export interface HorizontalStepperItemProps {
+    /**
+     * Step label shown next to the indicator.
+     */
+    label: string;
+    /**
+     * Secondary text rendered below the label.
+     */
+    description?: string;
+    /**
+     * Marks the step as completed — the indicator shows a check glyph. Ignored
+     * while `error` is set.
+     */
+    completed?: boolean;
+    /**
+     * Marks the step as invalid — the indicator shows a warning glyph and the
+     * step uses the danger colours. Takes precedence over `completed`.
+     */
+    error?: boolean;
+    /**
+     * Marks the step as the current one. Sets `aria-current="step"` and renders
+     * the selected (filled) treatment; the step is not clickable while selected.
+     */
+    selected?: boolean;
+    /**
+     * Prevents the step from being clicked or focused. Use for future steps the
+     * user shouldn't reach yet (e.g. when validation runs step-by-step). Leave
+     * completed steps enabled so users can navigate back to them.
+     */
+    disabled?: boolean;
+    /**
+     * Fired when the user activates the step. Does not fire when the step is
+     * `selected` (already current) or `disabled`.
+     */
+    onSelect?: () => void;
+    /**
+     * Additional class name on the item's root element.
+     */
+    className?: string;
+}
+export declare const HorizontalStepperItem: {
+    (props: HorizontalStepperItemProps): JSX.Element;
+    displayName: string;
+};
+export default HorizontalStepperItem;

package/src/tedi/components/navigation/horizontal-stepper/horizontal-stepper-item.es.js

@@ -0,0 +1,49 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import N from "../../../../../external/classnames/index.es.js";
+import { useContext as u } from "react";
+import { Icon as m } from "../../base/icon/icon.es.js";
+import e from "./horizontal-stepper.module.scss.es.js";
+import { HorizontalStepperStepNumberContext as f } from "./horizontal-stepper-context.es.js";
+import { useLabels as x } from "../../../providers/label-provider/use-labels.es.js";
+const C = (c) => {
+  const { label: d, description: p, completed: h, error: r, selected: i, disabled: o, onSelect: s, className: z } = c, { getLabel: a } = x(), b = u(f), l = !!h && !r, _ = () => {
+    i || o || s == null || s();
+  };
+  return /* @__PURE__ */ t(
+    "li",
+    {
+      "data-name": "horizontal-stepper-item",
+      className: N(
+        e["tedi-horizontal-stepper-item"],
+        {
+          [e["tedi-horizontal-stepper-item--selected"]]: i,
+          [e["tedi-horizontal-stepper-item--completed"]]: l,
+          [e["tedi-horizontal-stepper-item--error"]]: r,
+          [e["tedi-horizontal-stepper-item--disabled"]]: o
+        },
+        z
+      ),
+      children: /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: e["tedi-horizontal-stepper-item__step"],
+          disabled: o,
+          "aria-current": i ? "step" : void 0,
+          onClick: _,
+          children: [
+            /* @__PURE__ */ t("span", { className: e["tedi-horizontal-stepper-item__indicator"], children: l ? /* @__PURE__ */ t(m, { name: "check", color: "white", size: 18, label: a("stepper.completed") }) : r ? /* @__PURE__ */ t(m, { name: "priority_high", color: "white", size: 18, label: a("stepper.error") }) : /* @__PURE__ */ t("span", { className: e["tedi-horizontal-stepper-item__number"], children: b }) }),
+            /* @__PURE__ */ n("span", { className: e["tedi-horizontal-stepper-item__content"], children: [
+              /* @__PURE__ */ t("span", { className: e["tedi-horizontal-stepper-item__label"], children: d }),
+              p && /* @__PURE__ */ t("span", { className: e["tedi-horizontal-stepper-item__description"], children: p })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+C.displayName = "HorizontalStepperItem";
+export {
+  C as HorizontalStepperItem
+};

package/src/tedi/components/navigation/horizontal-stepper/horizontal-stepper.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),e=require("./horizontal-stepper.module.scss.cjs.js"),S=require("./horizontal-stepper-context.cjs.js"),i=require("./horizontal-stepper-item.cjs.js"),p=a.forwardRef(({children:l,"aria-label":s,background:u="default",compact:r="sm",className:d},m)=>{let n=0;const z=a.Children.map(l,t=>a.isValidElement(t)&&t.type===i.HorizontalStepperItem?(n+=1,o.jsx(S.HorizontalStepperStepNumberContext.Provider,{value:n,children:t})):t);return o.jsx("nav",{ref:m,"aria-label":s,"data-name":"horizontal-stepper",className:c.default(e.default["tedi-horizontal-stepper"],{[e.default["tedi-horizontal-stepper--transparent"]]:u==="transparent",[e.default["tedi-horizontal-stepper--compact"]]:r===!0},typeof r=="string"&&e.default[`tedi-horizontal-stepper--compact-${r}`],d),children:o.jsx("ol",{className:e.default["tedi-horizontal-stepper__list"],children:z})})});p.displayName="HorizontalStepper";const f=Object.assign(p,{Item:i.HorizontalStepperItem});exports.HorizontalStepper=f;

package/src/tedi/components/navigation/horizontal-stepper/horizontal-stepper.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+export type HorizontalStepperBackground = 'default' | 'transparent';
+export type HorizontalStepperCompact = boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export interface HorizontalStepperProps {
+    /**
+     * `HorizontalStepper.Item` elements, one per step.
+     */
+    children: ReactNode;
+    /**
+     * Accessible name for the navigation landmark.
+     */
+    'aria-label'?: string;
+    /**
+     * Background style of the stepper track.
+     * @default default
+     */
+    background?: HorizontalStepperBackground;
+    /**
+     * Collapse labels so only the indicators plus the selected step's label are
+     * visible. `true` collapses at every width; a breakpoint (`'sm'`, `'md'`,
+     * `'lg'`, `'xl'`, `'xxl'`) collapses only below that breakpoint.
+     * @default sm
+     */
+    compact?: HorizontalStepperCompact;
+    /**
+     * Additional class name on the root element.
+     */
+    className?: string;
+}
+export declare const HorizontalStepper: import('react').ForwardRefExoticComponent<HorizontalStepperProps & import('react').RefAttributes<HTMLElement>> & {
+    Item: {
+        (props: import('./horizontal-stepper-item').HorizontalStepperItemProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default HorizontalStepper;