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

package/src/tedi/components/overlays/modal/modal-header/modal-header.es.js

@@ -0,0 +1,25 @@
+import { jsx as a, jsxs as i, Fragment as B } from "react/jsx-runtime";
+import N from "../../../../../../external/classnames/index.es.js";
+import { useEffect as d } from "react";
+import { Heading as x } from "../../../base/typography/heading/heading.es.js";
+import { Text as C } from "../../../base/typography/text/text.es.js";
+import { ClosingButton as H } from "../../../buttons/closing-button/closing-button.es.js";
+import r from "../modal.module.scss.es.js";
+import { useModalContext as g } from "../modal-context.es.js";
+const M = (n) => {
+  const { title: o, description: t, closeButton: m = !0, closeButtonProps: c, children: e, className: f } = n, { onOpenChange: p, labelId: h, descriptionId: u, setHasTitle: s, setHasDescription: l } = g();
+  d(() => (s(!!o || !!e), () => s(!1)), [o, e, s]), d(() => (l(!!t || !!e), () => l(!1)), [t, e, l]);
+  const _ = () => p(!1);
+  return /* @__PURE__ */ a("div", { className: N(r["tedi-modal__header"], f), children: e ?? /* @__PURE__ */ i(B, { children: [
+    /* @__PURE__ */ i("div", { className: r["tedi-modal__header-row"], children: [
+      o && /* @__PURE__ */ a(x, { element: "h3", modifiers: "h3", id: h, className: r["tedi-modal__header-title"], children: o }),
+      m && /* @__PURE__ */ a(H, { size: "default", ...c, onClick: _ })
+    ] }),
+    t && /* @__PURE__ */ a(C, { id: u, className: r["tedi-modal__header-description"], children: t })
+  ] }) });
+};
+M.displayName = "Modal.Header";
+export {
+  M as ModalHeader,
+  M as default
+};

package/src/tedi/components/overlays/modal/modal-trigger/modal-trigger.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),c=require("../modal-context.cjs.js"),u=(...e)=>t=>{for(const r of e)r&&(typeof r=="function"?r(t):r.current=t)},o=({children:e})=>{const{getReferenceProps:t,reference:r}=c.useModalContext(),s=e.ref??e.props.ref,n=u(r,s);return f.cloneElement(e,t({ref:n,...e.props}))};o.displayName="Modal.Trigger";exports.ModalTrigger=o;exports.default=o;

package/src/tedi/components/overlays/modal/modal-trigger/modal-trigger.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'react';
+export interface ModalTriggerProps {
+    /**
+     * Element that opens the modal when clicked. The element is cloned and receives
+     * the `onClick` / `aria-*` props produced by floating-ui.
+     */
+    children: JSX.Element;
+}
+export declare const ModalTrigger: {
+    ({ children }: ModalTriggerProps): JSX.Element;
+    displayName: string;
+};
+export default ModalTrigger;

package/src/tedi/components/overlays/modal/modal-trigger/modal-trigger.es.js

@@ -0,0 +1,14 @@
+import { cloneElement as s } from "react";
+import { useModalContext as n } from "../modal-context.es.js";
+const p = (...e) => (r) => {
+  for (const o of e)
+    o && (typeof o == "function" ? o(r) : o.current = r);
+}, c = ({ children: e }) => {
+  const { getReferenceProps: r, reference: o } = n(), t = e.ref ?? e.props.ref, f = p(o, t);
+  return s(e, r({ ref: f, ...e.props }));
+};
+c.displayName = "Modal.Trigger";
+export {
+  c as ModalTrigger,
+  c as default
+};

package/src/tedi/components/overlays/modal/modal.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react/jsx-runtime"),n=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),o=require("react"),k=require("./modal-body/modal-body.cjs.js"),v=require("./modal-closer/modal-closer.cjs.js"),x=require("./modal-content/modal-content.cjs.js"),B=require("./modal-context.cjs.js"),j=require("./modal-footer/modal-footer.cjs.js"),D=require("./modal-header/modal-header.cjs.js"),_=require("./modal-trigger/modal-trigger.cjs.js"),e=b=>{const{children:I,defaultOpen:h=!1,open:c,onToggle:s,closeOnBackdropClick:d=!0,closeOnEscape:u=!0,role:y="dialog"}=b,[F,R]=o.useState(h),a=typeof c<"u",l=a?c:F,i=o.useCallback(q=>{a||R(q),s==null||s(q)},[a,s]),{refs:r,context:t}=n.useFloating({open:l,onOpenChange:i}),{getReferenceProps:p,getFloatingProps:g}=n.useInteractions([n.useClick(t),n.useRole(t,{role:y}),n.useDismiss(t,{enabled:d||u,escapeKey:u,outsidePress:d})]),f=o.useId(),C=`${f}-label`,M=`${f}-description`,[m,H]=o.useState(!1),[O,P]=o.useState(!1),S=o.useMemo(()=>({open:l,onOpenChange:i,reference:r.setReference,floating:r.setFloating,getReferenceProps:p,getFloatingProps:g,context:t,labelId:m?C:"",descriptionId:O?M:"",setHasTitle:H,setHasDescription:P}),[l,i,r.setReference,r.setFloating,p,g,t,m,O,C,M]);return T.jsx(B.ModalContext.Provider,{value:S,children:I})};e.Trigger=_.ModalTrigger;e.Content=x.ModalContent;e.Header=D.ModalHeader;e.Body=k.ModalBody;e.Footer=j.ModalFooter;e.Closer=v.ModalCloser;e.displayName="Modal";exports.Modal=e;exports.default=e;

package/src/tedi/components/overlays/modal/modal.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+export type ModalRole = 'dialog' | 'alertdialog';
+export interface ModalProps {
+    /**
+     * `<Modal.Trigger>` and `<Modal.Content>` children.
+     */
+    children: ReactNode;
+    /**
+     * Open state for uncontrolled mode. Use `open` + `onToggle` for controlled mode.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Open state for controlled mode. Pair with `onToggle`.
+     */
+    open?: boolean;
+    /**
+     * Called whenever the modal opens or closes. Pair with `open` for controlled mode.
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * Close the modal when the backdrop is clicked.
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Close the modal when the Escape key is pressed.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * ARIA role for the dialog. Use `'alertdialog'` for destructive confirmations
+     * (delete, cancel subscription) — screen readers announce alertdialogs with higher
+     * urgency and require an explicit user action to dismiss. Affects both the trigger's
+     * `aria-haspopup` and the floating element's `role`.
+     * @default dialog
+     */
+    role?: ModalRole;
+}
+export declare const Modal: {
+    (props: ModalProps): JSX.Element;
+    Trigger: {
+        ({ children }: import('./modal-trigger/modal-trigger').ModalTriggerProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: import('./modal-content/modal-content').ModalContentProps): JSX.Element | null;
+        displayName: string;
+    };
+    Header: {
+        (props: import('./modal-header/modal-header').ModalHeaderProps): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, noScroll, className }: import('./modal-body/modal-body').ModalBodyProps): JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, left, className }: import('./modal-footer/modal-footer').ModalFooterProps): JSX.Element;
+        displayName: string;
+    };
+    Closer: {
+        ({ children }: import('./modal-closer/modal-closer').ModalCloserProps): JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+export default Modal;

package/src/tedi/components/overlays/modal/modal.es.js

@@ -0,0 +1,76 @@
+import { jsx as x } from "react/jsx-runtime";
+import { useFloating as B, useInteractions as D, useClick as T, useRole as v, useDismiss as $ } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { useState as l, useCallback as j, useId as E, useMemo as K } from "react";
+import { ModalBody as N } from "./modal-body/modal-body.es.js";
+import { ModalCloser as S } from "./modal-closer/modal-closer.es.js";
+import { ModalContent as q } from "./modal-content/modal-content.es.js";
+import { ModalContext as w } from "./modal-context.es.js";
+import { ModalFooter as z } from "./modal-footer/modal-footer.es.js";
+import { ModalHeader as A } from "./modal-header/modal-header.es.js";
+import { ModalTrigger as G } from "./modal-trigger/modal-trigger.es.js";
+const e = (I) => {
+  const {
+    children: h,
+    defaultOpen: b = !1,
+    open: i,
+    onToggle: t,
+    closeOnBackdropClick: d = !0,
+    closeOnEscape: c = !0,
+    role: F = "dialog"
+  } = I, [y, k] = l(b), s = typeof i < "u", r = s ? i : y, a = j(
+    (O) => {
+      s || k(O), t == null || t(O);
+    },
+    [s, t]
+  ), { refs: n, context: o } = B({
+    open: r,
+    onOpenChange: a
+  }), { getReferenceProps: p, getFloatingProps: f } = D([
+    T(o),
+    v(o, { role: F }),
+    $(o, {
+      enabled: d || c,
+      escapeKey: c,
+      outsidePress: d
+    })
+  ]), m = E(), u = `${m}-label`, g = `${m}-description`, [C, H] = l(!1), [M, P] = l(!1), R = K(
+    () => ({
+      open: r,
+      onOpenChange: a,
+      reference: n.setReference,
+      floating: n.setFloating,
+      getReferenceProps: p,
+      getFloatingProps: f,
+      context: o,
+      labelId: C ? u : "",
+      descriptionId: M ? g : "",
+      setHasTitle: H,
+      setHasDescription: P
+    }),
+    [
+      r,
+      a,
+      n.setReference,
+      n.setFloating,
+      p,
+      f,
+      o,
+      C,
+      M,
+      u,
+      g
+    ]
+  );
+  return /* @__PURE__ */ x(w.Provider, { value: R, children: h });
+};
+e.Trigger = G;
+e.Content = q;
+e.Header = A;
+e.Body = N;
+e.Footer = z;
+e.Closer = S;
+e.displayName = "Modal";
+export {
+  e as Modal,
+  e as default
+};

package/src/tedi/components/overlays/modal/modal.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-modal__overlay":"tedi-modal__overlay-4ba27f12","tedi-modal-fade-in":"tedi-modal-fade-in-03b6ba7e","tedi-modal__overlay--no-overlay":"tedi-modal__overlay--no-overlay-4c0b9b0f","tedi-modal__container":"tedi-modal__container-f7f79f11","tedi-modal__overlay--position-center":"tedi-modal__overlay--position-center-db370559","tedi-modal__overlay--position-top":"tedi-modal__overlay--position-top-469a07ac","tedi-modal__overlay--position-bottom":"tedi-modal__overlay--position-bottom-f6c156b6","tedi-modal__overlay--position-right":"tedi-modal__overlay--position-right-57cb8cb7","tedi-modal__overlay--position-left":"tedi-modal__overlay--position-left-63802043","tedi-modal-slide-in-right":"tedi-modal-slide-in-right-52e8333d","tedi-modal-slide-in-left":"tedi-modal-slide-in-left-c5629074","tedi-modal__overlay--scroll-page":"tedi-modal__overlay--scroll-page-e6c42c19","tedi-modal__overlay--fullscreen-edge":"tedi-modal__overlay--fullscreen-edge-5b985472","tedi-modal__container--xs":"tedi-modal__container--xs-93a56d58","tedi-modal__container--sm":"tedi-modal__container--sm-74214c83","tedi-modal__container--md":"tedi-modal__container--md-3ba6debd","tedi-modal__container--lg":"tedi-modal__container--lg-4cecddbc","tedi-modal__container--xl":"tedi-modal__container--xl-4b756481","tedi-modal__container--fullscreen":"tedi-modal__container--fullscreen-5270a652","tedi-modal__container--fullscreen-edge":"tedi-modal__container--fullscreen-edge-875e4586","tedi-modal__header":"tedi-modal__header-991e3b5b","tedi-modal__header-row":"tedi-modal__header-row-344e6c2b","tedi-modal__header-title":"tedi-modal__header-title-844d9ea1","tedi-modal__header-description":"tedi-modal__header-description-32d28ecd","tedi-modal__body":"tedi-modal__body-ec279ff5","tedi-modal__body--scroll-page":"tedi-modal__body--scroll-page-4a4020dd","tedi-modal__footer":"tedi-modal__footer-29a01427","tedi-modal__footer--split":"tedi-modal__footer--split-6dd6e683","tedi-modal__footer--end":"tedi-modal__footer--end-fc399353","tedi-modal__footer-side":"tedi-modal__footer-side-928c643e","tedi-modal__footer-side--right":"tedi-modal__footer-side--right-e7945eee","tedi-modal--small":"tedi-modal--small-80da804f"};exports.default=e;

package/src/tedi/components/overlays/modal/modal.module.scss.es.js

@@ -0,0 +1,37 @@
+const e = {
+  "tedi-modal__overlay": "tedi-modal__overlay-4ba27f12",
+  "tedi-modal-fade-in": "tedi-modal-fade-in-03b6ba7e",
+  "tedi-modal__overlay--no-overlay": "tedi-modal__overlay--no-overlay-4c0b9b0f",
+  "tedi-modal__container": "tedi-modal__container-f7f79f11",
+  "tedi-modal__overlay--position-center": "tedi-modal__overlay--position-center-db370559",
+  "tedi-modal__overlay--position-top": "tedi-modal__overlay--position-top-469a07ac",
+  "tedi-modal__overlay--position-bottom": "tedi-modal__overlay--position-bottom-f6c156b6",
+  "tedi-modal__overlay--position-right": "tedi-modal__overlay--position-right-57cb8cb7",
+  "tedi-modal__overlay--position-left": "tedi-modal__overlay--position-left-63802043",
+  "tedi-modal-slide-in-right": "tedi-modal-slide-in-right-52e8333d",
+  "tedi-modal-slide-in-left": "tedi-modal-slide-in-left-c5629074",
+  "tedi-modal__overlay--scroll-page": "tedi-modal__overlay--scroll-page-e6c42c19",
+  "tedi-modal__overlay--fullscreen-edge": "tedi-modal__overlay--fullscreen-edge-5b985472",
+  "tedi-modal__container--xs": "tedi-modal__container--xs-93a56d58",
+  "tedi-modal__container--sm": "tedi-modal__container--sm-74214c83",
+  "tedi-modal__container--md": "tedi-modal__container--md-3ba6debd",
+  "tedi-modal__container--lg": "tedi-modal__container--lg-4cecddbc",
+  "tedi-modal__container--xl": "tedi-modal__container--xl-4b756481",
+  "tedi-modal__container--fullscreen": "tedi-modal__container--fullscreen-5270a652",
+  "tedi-modal__container--fullscreen-edge": "tedi-modal__container--fullscreen-edge-875e4586",
+  "tedi-modal__header": "tedi-modal__header-991e3b5b",
+  "tedi-modal__header-row": "tedi-modal__header-row-344e6c2b",
+  "tedi-modal__header-title": "tedi-modal__header-title-844d9ea1",
+  "tedi-modal__header-description": "tedi-modal__header-description-32d28ecd",
+  "tedi-modal__body": "tedi-modal__body-ec279ff5",
+  "tedi-modal__body--scroll-page": "tedi-modal__body--scroll-page-4a4020dd",
+  "tedi-modal__footer": "tedi-modal__footer-29a01427",
+  "tedi-modal__footer--split": "tedi-modal__footer--split-6dd6e683",
+  "tedi-modal__footer--end": "tedi-modal__footer--end-fc399353",
+  "tedi-modal__footer-side": "tedi-modal__footer-side-928c643e",
+  "tedi-modal__footer-side--right": "tedi-modal__footer-side--right-e7945eee",
+  "tedi-modal--small": "tedi-modal--small-80da804f"
+};
+export {
+  e as default
+};

package/src/tedi/components/overlays/overlay/overlay-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),d=require("react"),j=require("./overlay.cjs.js"),F=s=>{const{children:u,classNames:e,labelledBy:y,describedBy:f}=s,{open:l,x:m,y:h,strategy:g,focusManager:o,floating:b,arrowRef:v,getFloatingProps:x,placement:w,context:i,arrow:t,scrollLock:c,contentId:p}=d.useContext(j.OverlayContext);return d.useEffect(()=>{c&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,c]),l?n.jsx(r.FloatingPortal,{children:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:n.jsxs("div",{...x({ref:b,tabIndex:-1,id:p,"aria-labelledby":y,"aria-describedby":f,style:{position:g,left:m,top:h},className:e==null?void 0:e.content}),"data-placement":w,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:a=>v.current=a,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),u]})})}):null};exports.OverlayContent=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),q=require("./overlay.cjs.js"),C=u=>{const{children:y,classNames:e,labelledBy:f,describedBy:m}=u,{open:l,x:g,y:h,strategy:b,focusManager:o,floating:v,arrowRef:x,getFloatingProps:w,placement:p,context:i,arrow:t,scrollLock:c,contentId:j,role:F}=s.useContext(q.OverlayContext);if(s.useEffect(()=>{c&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,c]),!l)return null;const a=n.jsxs("div",{...w({ref:v,tabIndex:-1,id:j,"aria-labelledby":f,"aria-describedby":m,style:{position:b,left:g,top:h},className:e==null?void 0:e.content}),"data-placement":p,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:d=>x.current=d,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),y]});return n.jsx(r.FloatingPortal,{children:F==="tooltip"?a:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:a})})};exports.OverlayContent=C;

package/src/tedi/components/overlays/overlay/overlay-content.es.js

@@ -1,48 +1,50 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import { FloatingPortal as x, FloatingFocusManager as F, FloatingArrow as E } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { useContext as C, useEffect as j } from "react";
-import { OverlayContext as B } from "./overlay.es.js";
-const S = (a) => {
-  const { children: c, classNames: e, labelledBy: s, describedBy: m } = a, {
+import { jsxs as F, jsx as n } from "react/jsx-runtime";
+import { FloatingArrow as E, FloatingPortal as C, FloatingFocusManager as j } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { useContext as B, useEffect as H } from "react";
+import { OverlayContext as I } from "./overlay.es.js";
+const A = (c) => {
+  const { children: s, classNames: e, labelledBy: m, describedBy: f } = c, {
     open: l,
-    x: f,
-    y,
-    strategy: h,
+    x: y,
+    y: h,
+    strategy: u,
     focusManager: o,
-    floating: u,
-    arrowRef: b,
-    getFloatingProps: g,
-    placement: p,
+    floating: g,
+    arrowRef: p,
+    getFloatingProps: b,
+    placement: v,
     context: r,
     arrow: t,
-    scrollLock: d,
-    contentId: v
-  } = C(B);
-  return j(() => {
-    d && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
-  }, [l, d]), l ? /* @__PURE__ */ n(x, { children: /* @__PURE__ */ n(F, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: /* @__PURE__ */ w(
+    scrollLock: i,
+    contentId: w,
+    role: x
+  } = B(I);
+  if (H(() => {
+    i && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
+  }, [l, i]), !l) return null;
+  const d = /* @__PURE__ */ F(
     "div",
     {
-      ...g({
-        ref: u,
+      ...b({
+        ref: g,
         tabIndex: -1,
-        id: v,
-        "aria-labelledby": s,
-        "aria-describedby": m,
+        id: w,
+        "aria-labelledby": m,
+        "aria-describedby": f,
         style: {
-          position: h,
-          left: f,
-          top: y
+          position: u,
+          left: y,
+          top: h
         },
         className: e == null ? void 0 : e.content
       }),
-      "data-placement": p,
+      "data-placement": v,
       "data-testid": "overlay-content",
       children: [
         /* @__PURE__ */ n(
           E,
           {
-            ref: (i) => b.current = i,
+            ref: (a) => p.current = a,
             context: r,
             className: e == null ? void 0 : e.arrow,
             height: t == null ? void 0 : t.height,
@@ -50,11 +52,12 @@ const S = (a) => {
             "data-testid": "overlay-arrow"
           }
         ),
-        c
+        s
       ]
     }
-  ) }) }) : null;
+  );
+  return /* @__PURE__ */ n(C, { children: x === "tooltip" ? d : /* @__PURE__ */ n(j, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: d }) });
 };
 export {
-  S as OverlayContent
+  A as OverlayContent
 };

package/src/tedi/components/overlays/tooltip/tooltip.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),s=require("../overlay/overlay.cjs.js"),l=require("./tooltip-content.cjs.js"),u=require("./tooltip-trigger.cjs.js"),c=7,a=14,e=o=>{const{openWith:t="hover",focusManager:r,...n}=o;return i.jsx(s.Overlay,{arrowDimensions:{width:a,height:c},openWith:t,role:"tooltip",focusManager:{modal:!1,order:["reference","content"],returnFocus:!0,...r},...n})};e.Trigger=u.TooltipTrigger;e.Content=l.TooltipContent;exports.Tooltip=e;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),s=require("../overlay/overlay.cjs.js"),l=require("./tooltip-content.cjs.js"),u=require("./tooltip-trigger.cjs.js"),c=7,a=14,e=o=>{const{openWith:t="hover",focusManager:r,...n}=o;return i.jsx(s.Overlay,{arrowDimensions:{width:a,height:c},openWith:t,role:"tooltip",focusManager:{modal:!1,order:["reference","content"],initialFocus:-1,returnFocus:!1,...r},...n})};e.Trigger=u.TooltipTrigger;e.Content=l.TooltipContent;exports.Tooltip=e;exports.default=e;

package/src/tedi/components/overlays/tooltip/tooltip.es.js

@@ -1,29 +1,37 @@
 import { jsx as i } from "react/jsx-runtime";
 import { Overlay as s } from "../overlay/overlay.es.js";
 import { TooltipContent as a } from "./tooltip-content.es.js";
-import { TooltipTrigger as m } from "./tooltip-trigger.es.js";
-const p = 7, c = 14, o = (r) => {
+import { TooltipTrigger as l } from "./tooltip-trigger.es.js";
+const c = 7, f = 14, o = (r) => {
   const { openWith: t = "hover", focusManager: e, ...n } = r;
   return /* @__PURE__ */ i(
     s,
     {
       arrowDimensions: {
-        width: c,
-        height: p
+        width: f,
+        height: c
       },
       openWith: t,
       role: "tooltip",
       focusManager: {
         modal: !1,
         order: ["reference", "content"],
-        returnFocus: !0,
+        // Tooltips are non-interactive (just descriptive text), so the focus
+        // manager must not move focus on open or close. `initialFocus: -1`
+        // skips the programmatic `.focus()` on the trigger when the tooltip
+        // mounts — that programmatic focus is what the browser's
+        // `:focus-visible` heuristic was upgrading to a "keyboard-style" ring,
+        // leaving the trigger painted with the focus border after a plain
+        // hover or mouse click.
+        initialFocus: -1,
+        returnFocus: !1,
         ...e
       },
       ...n
     }
   );
 };
-o.Trigger = m;
+o.Trigger = l;
 o.Content = a;
 export {
   o as Tooltip,

package/src/tedi/helpers/hooks/use-breakpoint.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),d=require("../../../../external/lodash-es/debounce.cjs.js"),n=["xs","sm","md","lg","xl","xxl"],o=(e="xs")=>{const[t,r]=a.useState(e);return a.useLayoutEffect(()=>{const s=()=>window.matchMedia("(min-width: 87.5rem)").matches?"xxl":window.matchMedia("(min-width: 75rem)").matches?"xl":window.matchMedia("(min-width: 62rem)").matches?"lg":window.matchMedia("(min-width: 48rem)").matches?"md":window.matchMedia("(min-width: 36rem)").matches?"sm":"xs",i=d.default(()=>{r(s())},20);return r(s()),window.addEventListener("resize",i),()=>{i.cancel(),window.removeEventListener("resize",i)}},[]),t},m=(e,t)=>e?n.indexOf(e)<n.indexOf(t):!1;exports.breakpoints=n;exports.default=o;exports.isBreakpointBelow=m;exports.useBreakpoint=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),m=require("../../../../external/lodash-es/debounce.cjs.js"),r=["xs","sm","md","lg","xl","xxl"],e={xs:"0",sm:"36rem",md:"48rem",lg:"62rem",xl:"75rem",xxl:"87.5rem"},d=(t="xs")=>{const[i,s]=o.useState(t);return o.useLayoutEffect(()=>{const a=()=>window.matchMedia(`(min-width: ${e.xxl})`).matches?"xxl":window.matchMedia(`(min-width: ${e.xl})`).matches?"xl":window.matchMedia(`(min-width: ${e.lg})`).matches?"lg":window.matchMedia(`(min-width: ${e.md})`).matches?"md":window.matchMedia(`(min-width: ${e.sm})`).matches?"sm":"xs",n=m.default(()=>{s(a())},20);return s(a()),window.addEventListener("resize",n),()=>{n.cancel(),window.removeEventListener("resize",n)}},[]),i},l=(t,i)=>t?r.indexOf(t)<r.indexOf(i):!1;exports.BREAKPOINT_WIDTHS=e;exports.breakpoints=r;exports.default=d;exports.isBreakpointBelow=l;exports.useBreakpoint=d;

package/src/tedi/helpers/hooks/use-breakpoint.d.ts

@@ -1,5 +1,12 @@
 export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export declare const breakpoints: Breakpoint[];
+/**
+ * Minimum viewport width (as a CSS length string) at which each TEDI breakpoint
+ * activates. `xs` starts at 0 — i.e. anything below `sm`. Used by `useBreakpoint`
+ * for `matchMedia` checks and by other components (e.g. `TopNav`) that
+ * need to translate a breakpoint name into a pixel/rem width.
+ */
+export declare const BREAKPOINT_WIDTHS: Record<Breakpoint, string>;
 /**
  * @param defaultServerBreakpoint - Default breakpoint for SSR, the hook returns this breakpoint in the SSR.
  * @returns User's current breakpoint

package/src/tedi/helpers/hooks/use-breakpoint.es.js

@@ -1,19 +1,27 @@
-import { useState as m, useLayoutEffect as a } from "react";
-import o from "../../../../external/lodash-es/debounce.es.js";
-const s = ["xs", "sm", "md", "lg", "xl", "xxl"], c = (e = "xs") => {
-  const [t, n] = m(e);
+import { useState as o, useLayoutEffect as a } from "react";
+import d from "../../../../external/lodash-es/debounce.es.js";
+const m = ["xs", "sm", "md", "lg", "xl", "xxl"], e = {
+  xs: "0",
+  sm: "36rem",
+  md: "48rem",
+  lg: "62rem",
+  xl: "75rem",
+  xxl: "87.5rem"
+}, w = (t = "xs") => {
+  const [i, r] = o(t);
   return a(() => {
-    const r = () => window.matchMedia("(min-width: 87.5rem)").matches ? "xxl" : window.matchMedia("(min-width: 75rem)").matches ? "xl" : window.matchMedia("(min-width: 62rem)").matches ? "lg" : window.matchMedia("(min-width: 48rem)").matches ? "md" : window.matchMedia("(min-width: 36rem)").matches ? "sm" : "xs", i = o(() => {
-      n(r());
+    const s = () => window.matchMedia(`(min-width: ${e.xxl})`).matches ? "xxl" : window.matchMedia(`(min-width: ${e.xl})`).matches ? "xl" : window.matchMedia(`(min-width: ${e.lg})`).matches ? "lg" : window.matchMedia(`(min-width: ${e.md})`).matches ? "md" : window.matchMedia(`(min-width: ${e.sm})`).matches ? "sm" : "xs", n = d(() => {
+      r(s());
     }, 20);
-    return n(r()), window.addEventListener("resize", i), () => {
-      i.cancel(), window.removeEventListener("resize", i);
+    return r(s()), window.addEventListener("resize", n), () => {
+      n.cancel(), window.removeEventListener("resize", n);
     };
-  }, []), t;
-}, h = (e, t) => e ? s.indexOf(e) < s.indexOf(t) : !1;
+  }, []), i;
+}, x = (t, i) => t ? m.indexOf(t) < m.indexOf(i) : !1;
 export {
-  s as breakpoints,
-  c as default,
-  h as isBreakpointBelow,
-  c as useBreakpoint
+  e as BREAKPOINT_WIDTHS,
+  m as breakpoints,
+  w as default,
+  x as isBreakpointBelow,
+  w as useBreakpoint
 };

package/src/tedi/helpers/hooks/use-sidenav-state.d.ts

@@ -16,7 +16,7 @@ export declare const useSidenavState: (initialOpen?: boolean) => {
         events: import('@floating-ui/react').FloatingEvents;
         dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
         nodeId: string | undefined;
-        floatingId: string;
+        floatingId: string | undefined;
         refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
         elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
     };

package/src/tedi/index.d.ts

@@ -1,32 +1,41 @@
 export * from './components/base/typography/text/text';
 export * from './components/base/typography/heading/heading';
 export * from './components/base/icon/icon';
+export * from './components/content/carousel';
 export * from './components/content/list';
 export * from './components/content/label/label';
 export * from './components/content/section/section';
 export * from './components/content/heading-with-icon/heading-with-icon';
 export * from './components/content/truncate/truncate';
+export * from './components/content/table';
 export * from './components/content/text-group';
 export * from './components/content/calendar/calendar';
 export * from './components/loaders/spinner/spinner';
 export * from './components/loaders/skeleton';
+export * from './components/loaders/progress-bar';
 export * from './components/tags/tag/tag';
 export * from './components/tags/status-badge/status-badge';
 export * from './components/tags/status-indicator/status-indicator';
 export * from './components/buttons/closing-button/closing-button';
 export * from './components/buttons/button/button';
+export * from './components/buttons/card-button/card-button';
 export * from './components/buttons/info-button/info-button';
 export * from './components/buttons/floating-button/floating-button';
 export * from './components/buttons/button-group/button-group';
 export * from './components/buttons/collapse/collapse';
+export * from './components/buttons/collapse-button/collapse-button';
 export * from './components/layout/vertical-spacing';
 export * from './components/layout/grid';
+export * from './components/layout/top-nav';
+export * from './components/layout/mobile-nav';
 export * from './components/notifications/alert/alert';
 export * from './components/misc/empty-state';
 export * from './components/notifications/toast/toast';
 export * from './components/cards/card';
+export * from './components/content/accordion';
 export * from './components/navigation/breadcrumbs';
 export * from './components/navigation/hash-trigger/hash-trigger';
+export * from './components/navigation/horizontal-stepper';
 export * from './components/navigation/link/link';
 export * from './components/navigation/pagination';
 export * from './components/navigation/tabs';
@@ -46,11 +55,14 @@ export * from './components/form/time-picker/time-picker';
 export * from './components/form/checkbox/checkbox';
 export * from './components/form/slider/slider';
 export * from './components/form/date-field/date-field';
+export * from './components/filter/filter';
+export * from './components/form/date-time-field/date-time-field';
 export * from './components/form/input-group';
 export * from './components/form/field/field';
 export * from './components/overlays/tooltip';
 export * from './components/overlays/popover';
 export * from './components/overlays/dropdown';
+export * from './components/overlays/modal';
 export * from './components/misc/separator/separator';
 export * from './components/misc/print/print';
 export * from './components/misc/stretch-content/stretch-content';
@@ -58,7 +70,9 @@ export * from './components/misc/scroll-visibility/scroll-visibility';
 export * from './components/misc/scroll-fade/scroll-fade';
 export * from './components/misc/affix/affix';
 export * from './components/misc/ellipsis/ellipsis';
+export * from './components/misc/option-content/option-content';
 export * from './components/layout/sidenav';
+export * from './components/layout/footer';
 export * from './helpers';
 export * from './providers/label-provider';
 export * from './providers/style-provider/style-provider';