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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.2",
+  "version": "18.0.0-rc.4",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -39,7 +39,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@floating-ui/react": "^0.26.9",
+    "@floating-ui/react": "^0.27.19",
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^5.0.20",
     "@tanstack/react-table": "^8.13.2",
@@ -48,7 +48,7 @@
     "draft-js": "^0.11.7",
     "draftjs-md-converter": "^1.5.2",
     "formik": "^2.4.5",
-    "lodash-es": "^4.17.22",
+    "lodash-es": "^4.18.1",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "^9.13.2",
     "react-dropzone": "^14.3.5",
@@ -133,7 +133,7 @@
     "storybook": "8.4.2",
     "storybook-addon-pseudo-states": "^4.0.2",
     "stylelint": "^16.13.2",
-    "stylelint-config-recess-order": "^4.2.0",
+    "stylelint-config-recess-order": "^7.7.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-declaration-strict-value": "^1.9.2",
     "ts-jest": "29.1.2",

package/src/community/components/modal/modal-closer.d.ts

@@ -1,9 +1,15 @@
 import { default as React } from 'react';
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalCloserProps {
     /**
      * The element that closes the modal.
      */
     children: React.ReactElement;
 }
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ModalCloser: (props: ModalCloserProps) => JSX.Element;
 export default ModalCloser;

package/src/community/components/modal/modal-provider.d.ts

@@ -1,5 +1,8 @@
 import { FloatingContext, ReferenceType } from '@floating-ui/react';
 import { default as React } from 'react';
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalProviderProps {
     /**
      * ModalTrigger and Modal components
@@ -51,5 +54,8 @@ export interface IModalContext {
     outsidePress: boolean;
 }
 export declare const ModalContext: React.Context<IModalContext>;
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ModalProvider: (props: ModalProviderProps) => JSX.Element;
 export default ModalProvider;

package/src/community/components/modal/modal-trigger.d.ts

@@ -1,8 +1,14 @@
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalTriggerProps {
     /**
      * The element that opens the modal.
      */
     children: JSX.Element;
 }
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const ModalTrigger: (props: ModalTriggerProps) => JSX.Element;
 export default ModalTrigger;

package/src/community/components/modal/modal.d.ts

@@ -1,5 +1,8 @@
 import { default as React } from 'react';
 import { CardProps } from '../card/card';
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export interface ModalProps {
     /**
      * Content of the modal
@@ -58,5 +61,8 @@ export interface ModalProps {
      */
     overlay?: 'none';
 }
+/**
+ * @deprecated Use Modal from `@tedi-design-system/react/tedi` instead.
+ */
 export declare const Modal: (props: ModalProps) => JSX.Element | null;
 export default Modal;

package/src/tedi/components/form/time-field/time-field.es.js

@@ -5,7 +5,7 @@ import ce, { useState as V, useEffect as E } from "react";
 import { TextField as U } from "../textfield/textfield.es.js";
 import { TimePicker as de } from "../time-picker/time-picker.es.js";
 import l from "./time-field.module.scss.es.js";
-import { TIMEPICKER_OFFSET as fe, normalizeTime as ue } from "./time-field-helpers.es.js";
+import { normalizeTime as fe, TIMEPICKER_OFFSET as ue } from "./time-field-helpers.es.js";
 import { autoUpdate as me } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
 import { offset as pe, flip as ge, shift as he } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
 import { useBreakpointProps as ke } from "../../../helpers/hooks/use-breakpoint-props.es.js";
@@ -33,7 +33,7 @@ const ve = (k) => {
     open: x,
     onOpenChange: _,
     placement: F ? "bottom-start" : "bottom-end",
-    middleware: [pe(fe), ge(), he()],
+    middleware: [pe(ue), ge(), he()],
     whileElementsMounted: me
   }), { refs: b, context: m, x: J, y: L, strategy: Q } = H, W = ne(m), X = oe(m), Y = re(m, { role: "listbox" }), y = a && F && !d && !o, R = le([...y ? [W] : [], X, Y]), p = (e) => {
     const n = e.trim();
@@ -42,7 +42,7 @@ const ve = (k) => {
     var g;
     const n = e.target.value ?? "";
     (g = t == null ? void 0 : t.onBlur) == null || g.call(t, e);
-    const r = ue(n);
+    const r = fe(n);
     r !== null && r !== n && p(r);
   };
   E(() => {

package/src/tedi/components/notifications/alert/alert.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),M=require("../../base/icon/icon.cjs.js"),N=require("../../base/typography/heading/heading.cjs.js"),P=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),k=require("../../../helpers/hooks/use-is-mounted.cjs.js"),z=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),y=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),$=require("../../layout/grid/row.cjs.js"),f=require("../../layout/grid/col.cjs.js"),p=l=>{const{getCurrentBreakpointProps:g}=z.useBreakpointProps(l.defaultServerBreakpoint),{children:s,role:i="alert",title:r,className:m,type:n="info",icon:o,onClose:c,isGlobal:h=!1,noSideBorders:j=!1,titleElement:q="h3",size:x="default",...v}=g(l),_=w.default(t.default["tedi-alert"],t.default[`tedi-alert--${n}`],t.default[`tedi-alert--size-${x}`],{[t.default["tedi-alert--global"]]:h,[t.default["tedi-alert--no-side-borders"]]:j},m),b=k.useIsMounted(),B=a=>{const u={size:18},S=typeof a=="string"?{...u,name:a}:{...u,...a};return e.jsx(M.Icon,{...S,className:t.default["tedi-alert__icon"]})},I=i==="alert"?"assertive":i==="status"?"polite":"off",d=C.useId();return b?e.jsx("div",{role:i,"data-name":"alert","aria-label":`${n} alert`,"aria-live":I,"aria-labelledby":r?d:void 0,...v,className:_,children:e.jsxs(y.VerticalSpacing,{size:.25,children:[e.jsxs($.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(f.Col,{grow:1,className:t.default["tedi-alert__content"],children:[o&&B(o),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(N.Heading,{element:q,id:d,modifiers:["h5"],children:r}):s})]}),c&&e.jsx(f.Col,{width:"auto",children:e.jsx(P.ClosingButton,{onClick:c,iconSize:18})})]}),r&&s&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:s})]})}):null};exports.Alert=p;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),S=require("react"),M=require("../../base/icon/icon.cjs.js"),P=require("../../base/typography/heading/heading.cjs.js"),k=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),y=require("../../../helpers/hooks/use-is-mounted.cjs.js"),z=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),$=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),A=require("../../layout/grid/row.cjs.js"),n=require("../../layout/grid/col.cjs.js"),o=c=>{const{getCurrentBreakpointProps:h}=z.useBreakpointProps(c.defaultServerBreakpoint),{children:i,role:s="alert",title:r,className:m,type:d="info",icon:u,onClose:f,action:a,isGlobal:j=!1,noSideBorders:x=!1,titleElement:q="h3",size:v="default",..._}=h(c),B=N.default(t.default["tedi-alert"],t.default[`tedi-alert--${d}`],t.default[`tedi-alert--size-${v}`],{[t.default["tedi-alert--global"]]:j,[t.default["tedi-alert--no-side-borders"]]:x,[t.default["tedi-alert--has-action"]]:!!a},m),b=y.useIsMounted(),I=l=>{const g={size:18},C=typeof l=="string"?{...g,name:l}:{...g,...l};return e.jsx(M.Icon,{...C,className:t.default["tedi-alert__icon"]})},w=s==="alert"?"assertive":s==="status"?"polite":"off",p=S.useId();return b?e.jsx("div",{role:s,"data-name":"alert","aria-label":`${d} alert`,"aria-live":w,"aria-labelledby":r?p:void 0,..._,className:B,children:e.jsxs($.VerticalSpacing,{size:.25,children:[e.jsxs(A.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(n.Col,{grow:1,className:t.default["tedi-alert__content"],children:[u&&I(u),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(P.Heading,{element:q,id:p,modifiers:["h5"],children:r}):i})]}),a?e.jsx(n.Col,{width:"auto",children:a}):f&&e.jsx(n.Col,{width:"auto",children:e.jsx(k.ClosingButton,{onClick:f,iconSize:18})})]}),r&&i&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:i})]})}):null};o.displayName="Alert";exports.Alert=o;exports.default=o;

package/src/tedi/components/notifications/alert/alert.d.ts

@@ -54,8 +54,18 @@ export interface AlertProps extends BreakpointSupport<AlertBreakpointProps> {
      * Callback function triggered when the close button is clicked.
      * Adding this handler renders a close button in the alert.
      * Useful for dismissible alerts.
+     *
+     * Ignored when `action` is also set — the consumer's slot wins, and is
+     * responsible for any close affordance it wants to expose.
      */
     onClose?: () => void;
+    /**
+     * Custom content for the right-side slot of the alert (e.g. a CTA button,
+     * a link, or a small icon stack). Replaces the default close button when
+     * provided. Use this instead of squeezing buttons into `children` so the
+     * layout slot is reserved and aligned consistently.
+     */
+    action?: React.ReactNode;
     /**
      * The ARIA role of the alert, informing screen readers about the alert's purpose.
      * Options:
@@ -80,5 +90,8 @@ export interface AlertProps extends BreakpointSupport<AlertBreakpointProps> {
      */
     titleElement?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
-export declare const Alert: (props: AlertProps) => JSX.Element | null;
+export declare const Alert: {
+    (props: AlertProps): JSX.Element | null;
+    displayName: string;
+};
 export default Alert;

package/src/tedi/components/notifications/alert/alert.es.js

@@ -1,66 +1,69 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import k from "../../../../../external/classnames/index.es.js";
-import y from "react";
-import { Icon as P } from "../../base/icon/icon.es.js";
-import { Heading as S } from "../../base/typography/heading/heading.es.js";
-import { ClosingButton as x } from "../../buttons/closing-button/closing-button.es.js";
+import P from "react";
+import { Icon as S } from "../../base/icon/icon.es.js";
+import { Heading as x } from "../../base/typography/heading/heading.es.js";
+import { ClosingButton as M } from "../../buttons/closing-button/closing-button.es.js";
 import t from "./alert.module.scss.es.js";
-import { useIsMounted as M } from "../../../helpers/hooks/use-is-mounted.es.js";
-import { useBreakpointProps as $ } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { VerticalSpacing as j } from "../../layout/vertical-spacing/vertical-spacing.es.js";
+import { useIsMounted as $ } from "../../../helpers/hooks/use-is-mounted.es.js";
+import { useBreakpointProps as j } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { VerticalSpacing as A } from "../../layout/vertical-spacing/vertical-spacing.es.js";
 import { Row as E } from "../../layout/grid/row.es.js";
-import { Col as f } from "../../layout/grid/col.es.js";
-const O = (s) => {
-  const { getCurrentBreakpointProps: u } = $(s.defaultServerBreakpoint), {
+import { Col as n } from "../../layout/grid/col.es.js";
+const R = (d) => {
+  const { getCurrentBreakpointProps: h } = j(d.defaultServerBreakpoint), {
     children: o,
     role: i = "alert",
     title: r,
-    className: h,
-    type: n = "info",
-    icon: d,
-    onClose: c,
-    isGlobal: g = !1,
-    noSideBorders: _ = !1,
-    titleElement: v = "h3",
-    size: I = "default",
-    ...N
-  } = u(s), b = k(
+    className: g,
+    type: c = "info",
+    icon: m,
+    onClose: p,
+    action: a,
+    isGlobal: _ = !1,
+    noSideBorders: v = !1,
+    titleElement: N = "h3",
+    size: B = "default",
+    ...I
+  } = h(d), b = k(
     t["tedi-alert"],
-    t[`tedi-alert--${n}`],
-    t[`tedi-alert--size-${I}`],
+    t[`tedi-alert--${c}`],
+    t[`tedi-alert--size-${B}`],
     {
-      [t["tedi-alert--global"]]: g,
-      [t["tedi-alert--no-side-borders"]]: _
+      [t["tedi-alert--global"]]: _,
+      [t["tedi-alert--no-side-borders"]]: v,
+      [t["tedi-alert--has-action"]]: !!a
     },
-    h
-  ), B = M(), w = (a) => {
-    const p = { size: 18 }, C = typeof a == "string" ? { ...p, name: a } : { ...p, ...a };
-    return /* @__PURE__ */ e(P, { ...C, className: t["tedi-alert__icon"] });
-  }, z = i === "alert" ? "assertive" : i === "status" ? "polite" : "off", m = y.useId();
-  return B ? /* @__PURE__ */ e(
+    g
+  ), w = $(), y = (l) => {
+    const u = { size: 18 }, C = typeof l == "string" ? { ...u, name: l } : { ...u, ...l };
+    return /* @__PURE__ */ e(S, { ...C, className: t["tedi-alert__icon"] });
+  }, z = i === "alert" ? "assertive" : i === "status" ? "polite" : "off", f = P.useId();
+  return w ? /* @__PURE__ */ e(
     "div",
     {
       role: i,
       "data-name": "alert",
-      "aria-label": `${n} alert`,
+      "aria-label": `${c} alert`,
       "aria-live": z,
-      "aria-labelledby": r ? m : void 0,
-      ...N,
+      "aria-labelledby": r ? f : void 0,
+      ...I,
       className: b,
-      children: /* @__PURE__ */ l(j, { size: 0.25, children: [
-        /* @__PURE__ */ l(E, { gutterX: 2, alignItems: r ? "center" : "start", children: [
-          /* @__PURE__ */ l(f, { grow: 1, className: t["tedi-alert__content"], children: [
-            d && w(d),
-            /* @__PURE__ */ e("div", { className: "tedi-alert__content-wrapper", children: r ? /* @__PURE__ */ e(S, { element: v, id: m, modifiers: ["h5"], children: r }) : o })
+      children: /* @__PURE__ */ s(A, { size: 0.25, children: [
+        /* @__PURE__ */ s(E, { gutterX: 2, alignItems: r ? "center" : "start", children: [
+          /* @__PURE__ */ s(n, { grow: 1, className: t["tedi-alert__content"], children: [
+            m && y(m),
+            /* @__PURE__ */ e("div", { className: "tedi-alert__content-wrapper", children: r ? /* @__PURE__ */ e(x, { element: N, id: f, modifiers: ["h5"], children: r }) : o })
           ] }),
-          c && /* @__PURE__ */ e(f, { width: "auto", children: /* @__PURE__ */ e(x, { onClick: c, iconSize: 18 }) })
+          a ? /* @__PURE__ */ e(n, { width: "auto", children: a }) : p && /* @__PURE__ */ e(n, { width: "auto", children: /* @__PURE__ */ e(M, { onClick: p, iconSize: 18 }) })
         ] }),
         r && o && /* @__PURE__ */ e("div", { className: "tedi-alert__content-wrapper", children: o })
       ] })
     }
   ) : null;
 };
+R.displayName = "Alert";
 export {
-  O as Alert,
-  O as default
+  R as Alert,
+  R as default
 };

package/src/tedi/components/notifications/alert/alert.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-alert":"tedi-alert-8ca3e7b9","tedi-alert__content":"tedi-alert__content-d480ed20","tedi-alert__icon":"tedi-alert__icon-f9ab1feb","tedi-alert--size-default":"tedi-alert--size-default-6a9ebe2c","tedi-alert--size-small":"tedi-alert--size-small-4c763cad","tedi-alert--info":"tedi-alert--info-bcd40044","tedi-alert--success":"tedi-alert--success-e6d21f49","tedi-alert--warning":"tedi-alert--warning-88456526","tedi-alert--danger":"tedi-alert--danger-b9a2aa60","tedi-alert--global":"tedi-alert--global-14ff86d0","tedi-alert--no-side-borders":"tedi-alert--no-side-borders-a15a1df0"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-alert":"tedi-alert-8ca3e7b9","tedi-alert__content":"tedi-alert__content-d480ed20","tedi-alert__icon":"tedi-alert__icon-f9ab1feb","tedi-alert--size-default":"tedi-alert--size-default-6a9ebe2c","tedi-alert--size-small":"tedi-alert--size-small-4c763cad","tedi-alert--info":"tedi-alert--info-bcd40044","tedi-alert--success":"tedi-alert--success-e6d21f49","tedi-alert--warning":"tedi-alert--warning-88456526","tedi-alert--danger":"tedi-alert--danger-b9a2aa60","tedi-alert--global":"tedi-alert--global-14ff86d0","tedi-alert--no-side-borders":"tedi-alert--no-side-borders-a15a1df0","tedi-alert--has-action":"tedi-alert--has-action-0140d06a"};exports.default=e;

package/src/tedi/components/notifications/alert/alert.module.scss.es.js

@@ -9,7 +9,8 @@ const e = {
   "tedi-alert--warning": "tedi-alert--warning-88456526",
   "tedi-alert--danger": "tedi-alert--danger-b9a2aa60",
   "tedi-alert--global": "tedi-alert--global-14ff86d0",
-  "tedi-alert--no-side-borders": "tedi-alert--no-side-borders-a15a1df0"
+  "tedi-alert--no-side-borders": "tedi-alert--no-side-borders-a15a1df0",
+  "tedi-alert--has-action": "tedi-alert--has-action-0140d06a"
 };
 export {
   e as default

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

@@ -0,0 +1,8 @@
+export * from './modal';
+export * from './modal-trigger/modal-trigger';
+export * from './modal-content/modal-content';
+export * from './modal-header/modal-header';
+export * from './modal-body/modal-body';
+export * from './modal-footer/modal-footer';
+export * from './modal-closer/modal-closer';
+export * from './modal-context';

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../../external/classnames/index.cjs.js"),d=require("../modal.module.scss.cjs.js"),e=({children:o,noScroll:l=!1,className:a})=>t.jsx("div",{className:s.default(d.default["tedi-modal__body"],{[d.default["tedi-modal__body--scroll-page"]]:l},a),children:o});e.displayName="Modal.Body";exports.ModalBody=e;exports.default=e;

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface ModalBodyProps {
+    /**
+     * Body content.
+     */
+    children: ReactNode;
+    /**
+     * Disable the body's internal scroll. Use when the modal is wrapped in
+     * `<Modal.Content scrollBehavior="page">` and overflow is handled by the page.
+     * @default false
+     */
+    noScroll?: boolean;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const ModalBody: {
+    ({ children, noScroll, className }: ModalBodyProps): JSX.Element;
+    displayName: string;
+};
+export default ModalBody;

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

@@ -0,0 +1,21 @@
+import { jsx as l } from "react/jsx-runtime";
+import m from "../../../../../../external/classnames/index.es.js";
+import o from "../modal.module.scss.es.js";
+const e = ({ children: a, noScroll: d = !1, className: s }) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: m(
+      o["tedi-modal__body"],
+      {
+        [o["tedi-modal__body--scroll-page"]]: d
+      },
+      s
+    ),
+    children: a
+  }
+);
+e.displayName = "Modal.Body";
+export {
+  e as ModalBody,
+  e as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),r=require("../modal-context.cjs.js"),e=({children:o})=>{const{onOpenChange:n}=r.useModalContext();return a.cloneElement(o,{onClick:s=>{var l,t;(t=(l=o.props).onClick)==null||t.call(l,s),n(!1)}})};e.displayName="Modal.Closer";exports.ModalCloser=e;exports.default=e;

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

@@ -0,0 +1,15 @@
+import { MouseEvent, ReactElement } from 'react';
+export interface ModalCloserProps {
+    /**
+     * Element that closes the modal when clicked. The element is cloned and receives
+     * a wrapped `onClick` that calls the original handler first, then closes the modal.
+     */
+    children: ReactElement<{
+        onClick?: (event: MouseEvent<HTMLElement>) => void;
+    }>;
+}
+export declare const ModalCloser: {
+    ({ children }: ModalCloserProps): JSX.Element;
+    displayName: string;
+};
+export default ModalCloser;

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

@@ -0,0 +1,16 @@
+import { cloneElement as a } from "react";
+import { useModalContext as r } from "../modal-context.es.js";
+const s = ({ children: o }) => {
+  const { onOpenChange: n } = r();
+  return a(o, {
+    onClick: (t) => {
+      var e, l;
+      (l = (e = o.props).onClick) == null || l.call(e, t), n(!1);
+    }
+  });
+};
+s.displayName = "Modal.Closer";
+export {
+  s as ModalCloser,
+  s as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),d=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),f=require("../../../../../../external/classnames/index.cjs.js"),e=require("../modal.module.scss.cjs.js"),N=require("../modal-context.cjs.js"),O=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),W=require("../../../../providers/label-provider/use-labels.cjs.js"),H=["xs","sm","md","lg","xl"],T=l=>H.includes(l),r=l=>{const{getCurrentBreakpointProps:m}=O.useBreakpointProps(l.defaultServerBreakpoint),{width:t="md",maxWidth:s,position:_="center",fullscreen:o=!1}=m(l),{children:v,size:y="default",scrollBehavior:b="content",trapFocus:n=!0,returnFocus:g=!0,showOverlay:x=!0,lockScroll:h=!0,visuallyHiddenDismiss:C=!1,initialFocus:P,className:F}=l,{getLabel:p}=W.useLabels(),{open:q,floating:B,getFloatingProps:M,context:S,labelId:j,descriptionId:k}=N.useModalContext();if(!q)return null;const c=l["aria-labelledby"]??(j||void 0),L=l["aria-describedby"]??(k||void 0),w=c?void 0:l["aria-label"],u=T(t),i={};u||(i.width=t),s&&(i.maxWidth=s);const D=o===!0?e.default["tedi-modal__container--fullscreen"]:o==="edge"?e.default["tedi-modal__container--fullscreen-edge"]:void 0,I=o==="edge"?e.default["tedi-modal__overlay--fullscreen-edge"]:void 0;return a.jsx(d.FloatingPortal,{children:a.jsx(d.FloatingOverlay,{lockScroll:h,className:f.default(e.default["tedi-modal__overlay"],e.default[`tedi-modal__overlay--position-${_}`],I,{[e.default["tedi-modal__overlay--no-overlay"]]:!x,[e.default["tedi-modal__overlay--scroll-page"]]:b==="page"}),children:a.jsx(d.FloatingFocusManager,{context:S,modal:n,returnFocus:g,initialFocus:P,visuallyHiddenDismiss:C?p("modal.close"):void 0,children:a.jsx("div",{...M({ref:B,"aria-labelledby":c,"aria-describedby":L,"aria-label":w,"aria-modal":n,style:i,className:f.default(e.default["tedi-modal__container"],u&&e.default[`tedi-modal__container--${t}`],e.default[`tedi-modal--${y}`],D,F)}),children:v})})})})};r.displayName="Modal.Content";exports.ModalContent=r;exports.default=r;

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

@@ -0,0 +1,108 @@
+import { FloatingFocusManager } from '@floating-ui/react';
+import { ComponentProps, ReactNode } from 'react';
+import { BreakpointSupport } from '../../../../helpers';
+export type ModalWidthPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ModalWidth = ModalWidthPreset | (string & Record<never, never>);
+export type ModalSize = 'default' | 'small';
+export type ModalPosition = 'center' | 'top' | 'right' | 'left';
+export type ModalScrollBehavior = 'content' | 'page';
+export type ModalFullscreen = boolean | 'edge';
+type ModalContentBreakpointProps = {
+    /**
+     * Modal width — a Figma-aligned preset (`xs`–`xl`) or any CSS length.
+     * Use `maxWidth` when you only need to cap the width instead of set it.
+     * @default md
+     */
+    width?: ModalWidth;
+    /**
+     * Hard cap on width. Lightweight alternative to a custom `width`.
+     * @default calc(100vw - 16px * 2)
+     */
+    maxWidth?: string;
+    /**
+     * Placement on the viewport.
+     * @default center
+     */
+    position?: ModalPosition;
+    /**
+     * Fullscreen behaviour:
+     * - `false` — content-sized modal inside the 16px backdrop padding.
+     * - `true` — modal fills the overlay; 16px backdrop stays visible.
+     * - `'edge'` — edge-to-edge; overlay padding removed, no border/radius.
+     * @default false
+     */
+    fullscreen?: ModalFullscreen;
+};
+export interface ModalContentProps extends BreakpointSupport<ModalContentBreakpointProps> {
+    /**
+     * `<Modal.Header>`, `<Modal.Body>`, `<Modal.Footer>` and any other content.
+     */
+    children: ReactNode;
+    /**
+     * Size density — controls header/body/footer padding.
+     * @default default
+     */
+    size?: ModalSize;
+    /**
+     * Where overflow scrolls. `'content'` keeps the modal frame fixed and scrolls the body;
+     * `'page'` lets the modal grow with content and scrolls the overlay around it.
+     * @default content
+     */
+    scrollBehavior?: ModalScrollBehavior;
+    /**
+     * Trap focus inside the modal while open.
+     * @default true
+     */
+    trapFocus?: boolean;
+    /**
+     * Restore focus to the trigger after closing.
+     * @default true
+     */
+    returnFocus?: boolean;
+    /**
+     * Render the dimmed backdrop. `false` keeps portal + focus management but no overlay.
+     * @default true
+     */
+    showOverlay?: boolean;
+    /**
+     * Lock background scroll while open.
+     * @default true
+     */
+    lockScroll?: boolean;
+    /**
+     * Render visually-hidden dismiss buttons at the start and end of the dialog
+     * so touch screen-readers can escape without an Escape key.
+     * @default false
+     */
+    visuallyHiddenDismiss?: boolean;
+    /**
+     * Override the dialog's labelling element. Only needed when the label lives
+     * outside `<Modal.Header>` — the header wires this automatically.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Override the dialog's describing element. Only needed when the description
+     * lives outside `<Modal.Header>` — the header wires this automatically.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Plain-text accessible name. Use when there's no visible title (icon-only
+     * confirmation, etc.). Ignored when `aria-labelledby` is set.
+     */
+    'aria-label'?: string;
+    /**
+     * Element to focus on open. Tabbable index (`0` = first tabbable, `-1` = dialog
+     * container) or a ref. Override the default to focus a "Cancel" button on
+     * destructive prompts, or the first input on form-heavy modals.
+     */
+    initialFocus?: ComponentProps<typeof FloatingFocusManager>['initialFocus'];
+    /**
+     * Additional class name on the modal container.
+     */
+    className?: string;
+}
+export declare const ModalContent: {
+    (props: ModalContentProps): JSX.Element | null;
+    displayName: string;
+};
+export default ModalContent;

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

@@ -0,0 +1,81 @@
+import { jsx as a } from "react/jsx-runtime";
+import { FloatingPortal as M, FloatingOverlay as W, FloatingFocusManager as H } from "../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import c from "../../../../../../external/classnames/index.es.js";
+import e from "../modal.module.scss.es.js";
+import { useModalContext as O } from "../modal-context.es.js";
+import { useBreakpointProps as $ } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as E } from "../../../../providers/label-provider/use-labels.es.js";
+const T = ["xs", "sm", "md", "lg", "xl"], j = (l) => T.includes(l), z = (l) => {
+  const { getCurrentBreakpointProps: m } = $(l.defaultServerBreakpoint), {
+    width: o = "md",
+    maxWidth: r,
+    position: u = "center",
+    fullscreen: t = !1
+  } = m(l), {
+    children: f,
+    size: y = "default",
+    scrollBehavior: v = "content",
+    trapFocus: s = !0,
+    returnFocus: _ = !0,
+    showOverlay: b = !0,
+    lockScroll: g = !0,
+    visuallyHiddenDismiss: h = !1,
+    initialFocus: p,
+    className: x
+  } = l, { getLabel: F } = E(), { open: C, floating: P, getFloatingProps: B, context: N, labelId: S, descriptionId: k } = O();
+  if (!C) return null;
+  const d = l["aria-labelledby"] ?? (S || void 0), w = l["aria-describedby"] ?? (k || void 0), D = d ? void 0 : l["aria-label"], n = j(o), i = {};
+  n || (i.width = o), r && (i.maxWidth = r);
+  const I = t === !0 ? e["tedi-modal__container--fullscreen"] : t === "edge" ? e["tedi-modal__container--fullscreen-edge"] : void 0, L = t === "edge" ? e["tedi-modal__overlay--fullscreen-edge"] : void 0;
+  return /* @__PURE__ */ a(M, { children: /* @__PURE__ */ a(
+    W,
+    {
+      lockScroll: g,
+      className: c(
+        e["tedi-modal__overlay"],
+        e[`tedi-modal__overlay--position-${u}`],
+        L,
+        {
+          [e["tedi-modal__overlay--no-overlay"]]: !b,
+          [e["tedi-modal__overlay--scroll-page"]]: v === "page"
+        }
+      ),
+      children: /* @__PURE__ */ a(
+        H,
+        {
+          context: N,
+          modal: s,
+          returnFocus: _,
+          initialFocus: p,
+          visuallyHiddenDismiss: h ? F("modal.close") : void 0,
+          children: /* @__PURE__ */ a(
+            "div",
+            {
+              ...B({
+                ref: P,
+                "aria-labelledby": d,
+                "aria-describedby": w,
+                "aria-label": D,
+                "aria-modal": s,
+                style: i,
+                className: c(
+                  e["tedi-modal__container"],
+                  n && e[`tedi-modal__container--${o}`],
+                  e[`tedi-modal--${y}`],
+                  I,
+                  x
+                )
+              }),
+              children: f
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+z.displayName = "Modal.Content";
+export {
+  z as ModalContent,
+  z as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),o=t.createContext(null),n=()=>{const e=t.useContext(o);if(!e)throw new Error("Modal subcomponents must be rendered inside <Modal>.");return e},l=()=>{const{open:e,onOpenChange:r,labelId:s,descriptionId:d}=n();return{open:e,onOpenChange:r,labelId:s,descriptionId:d}};exports.ModalContext=o;exports.useModal=l;exports.useModalContext=n;