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

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

@@ -0,0 +1,92 @@
+import { jsx as a, jsxs as r, Fragment as P } from "react/jsx-runtime";
+import N from "../../../../../external/classnames/index.es.js";
+import i, { forwardRef as R } from "react";
+import { Icon as y } from "../../base/icon/icon.es.js";
+import { Text as b } from "../../base/typography/text/text.es.js";
+import { Button as S } from "../../buttons/button/button.es.js";
+import { FeedbackText as $ } from "../../form/feedback-text/feedback-text.es.js";
+import { ProgressBar as M } from "../../loaders/progress-bar/progress-bar.es.js";
+import e from "./attachment.module.scss.es.js";
+import q, { isBreakpointBelow as D } from "../../../helpers/hooks/use-breakpoint.es.js";
+const G = R((g, k) => {
+  const {
+    name: c,
+    feedback: n,
+    fileSize: m,
+    icon: o,
+    actions: l,
+    isLoading: d = !1,
+    progress: B,
+    progressLabel: p,
+    isValid: x,
+    direction: h,
+    verticalBelow: w = "sm",
+    className: I,
+    id: z,
+    ...E
+  } = g, T = q(), A = h ? h === "vertical" : D(T, w), F = i.useId(), f = z ?? `tedi-attachment-${F}`, _ = n ? n.id ?? `${f}-feedback` : void 0, s = x === !1, L = N(
+    e["tedi-attachment"],
+    {
+      [e["tedi-attachment--invalid"]]: s,
+      [e["tedi-attachment--multi-line"]]: d,
+      [e["tedi-attachment--vertical"]]: A
+    },
+    I
+  ), V = /* @__PURE__ */ r(P, { children: [
+    o && /* @__PURE__ */ a("span", { className: e["tedi-attachment__icon"], "aria-hidden": "true", children: /* @__PURE__ */ a(y, { name: o, size: 18, color: s ? "danger" : "secondary" }) }),
+    /* @__PURE__ */ r("span", { className: e["tedi-attachment__body"], children: [
+      /* @__PURE__ */ r("span", { className: e["tedi-attachment__name"], children: [
+        /* @__PURE__ */ r(b, { element: "span", className: e["tedi-attachment__name-text"], children: [
+          c,
+          s && /* @__PURE__ */ a(
+            y,
+            {
+              name: "error",
+              color: "inherit",
+              display: "inline",
+              size: 18,
+              className: e["tedi-attachment__invalid-icon"]
+            }
+          )
+        ] }),
+        m && /* @__PURE__ */ a(b, { element: "span", modifiers: "small", color: "tertiary", className: e["tedi-attachment__file-size"], children: m })
+      ] }),
+      d && /* @__PURE__ */ a(
+        M,
+        {
+          value: B,
+          ariaLabel: c,
+          valuePosition: "bottom",
+          helper: p ? { text: p, type: "hint" } : void 0,
+          className: e["tedi-attachment__progress"]
+        }
+      )
+    ] })
+  ] }), u = (t) => {
+    if (!i.isValidElement(t))
+      return t;
+    if (t.type === i.Fragment) {
+      const C = t.props.children;
+      return i.cloneElement(t, void 0, i.Children.map(C, u));
+    }
+    return t.type === S && t.props.visualType === void 0 ? i.cloneElement(t, { visualType: "neutral" }) : t;
+  }, j = l ? /* @__PURE__ */ a("span", { className: e["tedi-attachment__actions"], "data-name": "attachment-actions", children: i.Children.map(l, u) }) : null, v = /* @__PURE__ */ r("div", { ref: k, id: f, className: L, "aria-describedby": _, ...E, children: [
+    V,
+    j
+  ] });
+  return n ? /* @__PURE__ */ r("div", { className: e["tedi-attachment-wrapper"], children: [
+    v,
+    /* @__PURE__ */ a(
+      $,
+      {
+        ...n,
+        id: _,
+        className: N(e["tedi-attachment__feedback"], n.className)
+      }
+    )
+  ] }) : v;
+});
+G.displayName = "Attachment";
+export {
+  G as Attachment
+};

package/src/tedi/components/misc/attachment/attachment.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-attachment-wrapper":"tedi-attachment-wrapper-dcfb5d64","tedi-attachment":"tedi-attachment-02d5f843","tedi-attachment--multi-line":"tedi-attachment--multi-line-6f305917","tedi-attachment--invalid":"tedi-attachment--invalid-e6248abb","tedi-attachment__feedback":"tedi-attachment__feedback-bc74bea5","tedi-attachment__icon":"tedi-attachment__icon-0eb17a7c","tedi-attachment__body":"tedi-attachment__body-3a026aed","tedi-attachment__actions":"tedi-attachment__actions-225799e0","tedi-attachment__name":"tedi-attachment__name-ab40704e","tedi-attachment__name-text":"tedi-attachment__name-text-a17b7fb9","tedi-attachment__invalid-icon":"tedi-attachment__invalid-icon-0d13ecad","tedi-attachment__progress":"tedi-attachment__progress-e454173e","tedi-attachment--vertical":"tedi-attachment--vertical-4a691e7c","tedi-attachment__file-size":"tedi-attachment__file-size-1728ef22"};exports.default=t;

package/src/tedi/components/misc/attachment/attachment.module.scss.es.js

@@ -0,0 +1,19 @@
+const t = {
+  "tedi-attachment-wrapper": "tedi-attachment-wrapper-dcfb5d64",
+  "tedi-attachment": "tedi-attachment-02d5f843",
+  "tedi-attachment--multi-line": "tedi-attachment--multi-line-6f305917",
+  "tedi-attachment--invalid": "tedi-attachment--invalid-e6248abb",
+  "tedi-attachment__feedback": "tedi-attachment__feedback-bc74bea5",
+  "tedi-attachment__icon": "tedi-attachment__icon-0eb17a7c",
+  "tedi-attachment__body": "tedi-attachment__body-3a026aed",
+  "tedi-attachment__actions": "tedi-attachment__actions-225799e0",
+  "tedi-attachment__name": "tedi-attachment__name-ab40704e",
+  "tedi-attachment__name-text": "tedi-attachment__name-text-a17b7fb9",
+  "tedi-attachment__invalid-icon": "tedi-attachment__invalid-icon-0d13ecad",
+  "tedi-attachment__progress": "tedi-attachment__progress-e454173e",
+  "tedi-attachment--vertical": "tedi-attachment--vertical-4a691e7c",
+  "tedi-attachment__file-size": "tedi-attachment__file-size-1728ef22"
+};
+export {
+  t as default
+};

package/src/tedi/components/misc/attachment/index.d.ts

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

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 e=require("react/jsx-runtime"),j=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),a=require("../../overlays/popover/popover.cjs.js"),i=require("./ellipsis.module.scss.cjs.js"),x=require("../../../helpers/hooks/use-element-size.cjs.js"),g=d=>{const{children:l,lineClamp:r=2,position:s="end",popover:p=!0,className:u,...m}=d,n=o.useRef(null),[f,h]=o.useState(!1),v=x.useElementSize(n);o.useEffect(()=>{const t=n.current;t&&h(s==="start"?t.scrollWidth>t.clientWidth:t.scrollHeight>t.clientHeight)},[v,s,r]);const c=e.jsx("div",{"data-name":"ellipsis",...m,ref:n,className:j.default(i.default["tedi-ellipsis"],{[i.default["tedi-ellipsis--start"]]:s==="start"},u),style:s==="end"?{lineClamp:r,WebkitLineClamp:r}:void 0,children:s==="start"?e.jsx("span",{className:i.default["tedi-ellipsis__inner"],children:l}):l});return f&&p?e.jsxs(a.Popover,{openWith:"hover",focusManager:{modal:!1},children:[e.jsx(a.Popover.Trigger,{children:c}),e.jsx(a.Popover.Content,{children:e.jsx("span",{className:i.default["tedi-ellipsis__overlay"],children:l})})]}):c};exports.Ellipsis=g;

package/src/tedi/components/misc/ellipsis/ellipsis.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+export type EllipsisPosition = 'start' | 'end';
 export interface EllipsisProps {
     /**
      * The content to be displayed inside the ellipsis container.
@@ -6,10 +7,19 @@ export interface EllipsisProps {
     children: React.ReactNode;
     /**
      * The maximum number of lines before truncating the text with an ellipsis.
-     * If the content exceeds this limit, it will be truncated.
+     * If the content exceeds this limit, it will be truncated. Applies to the
+     * `end` (multi-line) position only.
      * @default 2
      */
     lineClamp?: number;
+    /**
+     * Where the ellipsis is placed.
+     * - `end` — trailing ellipsis, multi-line (clamped by `lineClamp`).
+     * - `start` — leading ellipsis, single-line (keeps the end of the text visible,
+     *   e.g. for file paths or IDs).
+     * @default end
+     */
+    position?: EllipsisPosition;
     /**
      * Determines whether a popover should be displayed when the text is truncated.
      * If `true`, hovering over the truncated text will show the full content in a popover.

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

@@ -1,31 +1,37 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-import h from "../../../../../external/classnames/index.es.js";
-import t from "react";
-import { Popover as l } from "../../overlays/popover/popover.es.js";
-import g from "./ellipsis.module.scss.es.js";
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
+import g from "../../../../../external/classnames/index.es.js";
+import o from "react";
+import { Popover as a } from "../../overlays/popover/popover.es.js";
+import i 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);
-  t.useEffect(() => {
-    e.current && f(e.current.scrollHeight > e.current.clientHeight);
-  }, [e, u]);
-  const o = /* @__PURE__ */ s(
+const S = (m) => {
+  const { children: l, lineClamp: r = 2, position: e = "end", popover: p = !0, className: d, ...f } = m, n = o.useRef(null), [h, u] = o.useState(!1), v = E(n);
+  o.useEffect(() => {
+    const s = n.current;
+    s && u(
+      e === "start" ? s.scrollWidth > s.clientWidth : s.scrollHeight > s.clientHeight
+    );
+  }, [v, e, r]);
+  const c = /* @__PURE__ */ t(
     "div",
     {
       "data-name": "ellipsis",
-      ...c,
-      ref: e,
-      className: h(g["tedi-ellipsis"], a),
-      style: { lineClamp: i, WebkitLineClamp: i },
-      children: r
+      ...f,
+      ref: n,
+      className: g(
+        i["tedi-ellipsis"],
+        { [i["tedi-ellipsis--start"]]: e === "start" },
+        d
+      ),
+      style: e === "end" ? { lineClamp: r, WebkitLineClamp: r } : void 0,
+      children: e === "start" ? /* @__PURE__ */ t("span", { className: i["tedi-ellipsis__inner"], children: l }) : l
     }
   );
-  return p && m ? /* @__PURE__ */ d(l, { openWith: "hover", focusManager: { modal: !1 }, children: [
-    /* @__PURE__ */ s(l.Trigger, { children: o }),
-    /* @__PURE__ */ s(l.Content, { children: r })
-  ] }) : o;
+  return h && p ? /* @__PURE__ */ _(a, { openWith: "hover", focusManager: { modal: !1 }, children: [
+    /* @__PURE__ */ t(a.Trigger, { children: c }),
+    /* @__PURE__ */ t(a.Content, { children: /* @__PURE__ */ t("span", { className: i["tedi-ellipsis__overlay"], children: l }) })
+  ] }) : c;
 };
 export {
-  j as Ellipsis,
-  j as default
+  S as Ellipsis
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-ellipsis":"tedi-ellipsis-d1aa2d79"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-ellipsis":"tedi-ellipsis-d1aa2d79","tedi-ellipsis--start":"tedi-ellipsis--start-550aca21","tedi-ellipsis__inner":"tedi-ellipsis__inner-47eb4adf","tedi-ellipsis__overlay":"tedi-ellipsis__overlay-7426462d"};exports.default=e;

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

@@ -1,6 +1,9 @@
-const s = {
-  "tedi-ellipsis": "tedi-ellipsis-d1aa2d79"
+const i = {
+  "tedi-ellipsis": "tedi-ellipsis-d1aa2d79",
+  "tedi-ellipsis--start": "tedi-ellipsis--start-550aca21",
+  "tedi-ellipsis__inner": "tedi-ellipsis__inner-47eb4adf",
+  "tedi-ellipsis__overlay": "tedi-ellipsis__overlay-7426462d"
 };
 export {
-  s as default
+  i as default
 };

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;