@tedi-design-system/react 17.0.0 → 17.1.0-rc.10

package/src/tedi/components/layout/vertical-spacing/vertical-spacing.es.js

@@ -2,28 +2,29 @@ import { jsx as c } from "react/jsx-runtime";
 import m from "../../../../../external/classnames/index.es.js";
 import l from "./vertical-spacing.module.scss.es.js";
 import { VerticalSpacingItem as p } from "./vertical-spacing-item.es.js";
-import { useBreakpointProps as g } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const f = (e) => {
-  const { getCurrentBreakpointProps: r } = g(e.defaultServerBreakpoint), {
+import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const g = (e) => {
+  const { getCurrentBreakpointProps: r } = f(e.defaultServerBreakpoint), {
     children: a,
     className: i,
-    element: n = "div",
+    element: s = "div",
     size: t = 1,
-    ...s
+    ...n
   } = r(e), o = m(l["tedi-vertical-spacing"], i);
   return /* @__PURE__ */ c(
-    n,
+    s,
     {
       "data-name": "vertical-spacing",
       role: "presentation",
-      ...s,
+      ...n,
       className: o,
       style: { "--vertical-spacing-internal": t !== 0 ? `${t}em` : "0" },
       children: a
     }
   );
 };
-f.Item = p;
+g.Item = p;
 export {
-  f as VerticalSpacing
+  g as VerticalSpacing,
+  g as default
 };

package/src/tedi/components/loaders/skeleton/skeleton.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),S=require("../../../providers/accessibility-provider/accessibility-provider.cjs.js"),v=require("../../../providers/accessibility-provider/use-declare-loader.cjs.js"),y=require("./skeleton.module.scss.cjs.js"),L=require("./skeleton-block/skeleton-block.cjs.js"),g=require("../../../providers/label-provider/use-labels.cjs.js"),u=d=>{const{getLabel:o}=g.useLabels(),{children:m,className:k,label:e=o("skeleton.loading"),completedLabel:t=o("skeleton.loading-completed"),labelDelay:s=200,...b}=d,f=x.default(y.default["tedi-skeleton"],k),l=n.useContext(S.AccessibilityContext),[r,c]=n.useState(null);return v.useDeclareLoader(e,t,s),n.useEffect(()=>{if(!l){let a=!0;const q=setTimeout(()=>{a&&c(e)},s);return()=>{a=!1,clearTimeout(q),c(t)}}},[l,e,t,s]),i.jsxs("div",{"data-name":"skeleton",...b,className:f,children:[r&&i.jsx("span",{className:"sr-only",role:"status","aria-live":"assertive","aria-atomic":"true",children:r}),m]})};u.Block=L.SkeletonBlock;exports.Skeleton=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),x=require("../../../providers/accessibility-provider/accessibility-provider.cjs.js"),S=require("../../../providers/accessibility-provider/use-declare-loader.cjs.js"),L=require("./skeleton.module.scss.cjs.js"),g=require("./skeleton-block/skeleton-block.cjs.js"),y=require("../../../providers/label-provider/use-labels.cjs.js"),o=d=>{const{getLabel:l}=y.useLabels(),{children:m,className:k,label:e=l("skeleton.loading"),completedLabel:t=l("skeleton.loading-completed"),labelDelay:s=200,...b}=d,f=v.default(L.default["tedi-skeleton"],k),r=n.useContext(x.AccessibilityContext),[a,c]=n.useState(null);return S.useDeclareLoader(e,t,s),n.useEffect(()=>{if(!r){let i=!0;const q=setTimeout(()=>{i&&c(e)},s);return()=>{i=!1,clearTimeout(q),c(t)}}},[r,e,t,s]),u.jsxs("div",{"data-name":"skeleton",...b,className:f,children:[a&&u.jsx("span",{className:"sr-only",role:"status","aria-live":"assertive","aria-atomic":"true",children:a}),m]})};o.Block=g.SkeletonBlock;exports.Skeleton=o;exports.default=o;

package/src/tedi/components/loaders/skeleton/skeleton.es.js

@@ -14,15 +14,15 @@ const B = (c) => {
     completedLabel: t = s("skeleton.loading-completed"),
     labelDelay: o = 200,
     ...u
-  } = c, d = b(S["tedi-skeleton"], m), l = x.useContext(L), [n, r] = v(null);
+  } = c, d = b(S["tedi-skeleton"], m), l = x.useContext(L), [n, a] = v(null);
   return N(e, t, o), y(() => {
     if (!l) {
-      let a = !0;
+      let r = !0;
       const f = setTimeout(() => {
-        a && r(e);
+        r && a(e);
       }, o);
       return () => {
-        a = !1, clearTimeout(f), r(t);
+        r = !1, clearTimeout(f), a(t);
       };
     }
   }, [l, e, t, o]), /* @__PURE__ */ p("div", { "data-name": "skeleton", ...u, className: d, children: [
@@ -32,5 +32,6 @@ const B = (c) => {
 };
 B.Block = g;
 export {
-  B as Skeleton
+  B as Skeleton,
+  B as default
 };

package/src/tedi/components/loaders/spinner/spinner.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),e=require("./spinner.module.scss.cjs.js"),p=require("../../../providers/label-provider/use-labels.cjs.js"),f=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=s=>{const{getLabel:a}=p.useLabels(),{getCurrentBreakpointProps:l}=f.useBreakpointProps(s.defaultServerBreakpoint),{className:o,size:r=16,color:i="primary",label:c=a("spinner.loading"),position:t}=l(s),d=u.default(e.default["tedi-spinner"],o,t&&e.default[`tedi-spinner--${t}`],r&&e.default[`tedi-spinner--size-${r}`],i&&e.default[`tedi-spinner--color-${i}`]);return n.jsxs("span",{className:d,role:"status","aria-live":"polite","data-testid":"tedi-spinner",children:[n.jsx("svg",{viewBox:"22 22 44 44","aria-hidden":"true",children:n.jsx("circle",{className:e.default["tedi-spinner__inner"],cx:"44",cy:"44",r:"20",fill:"none"})}),n.jsx("span",{className:"sr-only",children:c})]})};exports.Spinner=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),e=require("./spinner.module.scss.cjs.js"),p=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),f=require("../../../providers/label-provider/use-labels.cjs.js"),m=s=>{const{getLabel:a}=f.useLabels(),{getCurrentBreakpointProps:l}=p.useBreakpointProps(s.defaultServerBreakpoint),{className:o,size:r=16,color:i="primary",label:c=a("spinner.loading"),position:t}=l(s),d=u.default(e.default["tedi-spinner"],o,t&&e.default[`tedi-spinner--${t}`],r&&e.default[`tedi-spinner--size-${r}`],i&&e.default[`tedi-spinner--color-${i}`]);return n.jsxs("span",{className:d,role:"status","aria-live":"polite","data-testid":"tedi-spinner",children:[n.jsx("svg",{viewBox:"22 22 44 44","aria-hidden":"true",children:n.jsx("circle",{className:e.default["tedi-spinner__inner"],cx:"44",cy:"44",r:"20",fill:"none"})}),n.jsx("span",{className:"sr-only",children:c})]})};exports.Spinner=m;

package/src/tedi/components/loaders/spinner/spinner.es.js

@@ -1,10 +1,10 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import d from "../../../../../external/classnames/index.es.js";
 import e from "./spinner.module.scss.es.js";
-import { useLabels as f } from "../../../providers/label-provider/use-labels.es.js";
-import { useBreakpointProps as u } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as u } from "../../../providers/label-provider/use-labels.es.js";
 const v = (s) => {
-  const { getLabel: o } = f(), { getCurrentBreakpointProps: a } = u(s.defaultServerBreakpoint), {
+  const { getLabel: o } = u(), { getCurrentBreakpointProps: a } = f(s.defaultServerBreakpoint), {
     className: l,
     size: i = 16,
     color: n = "primary",

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

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

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

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

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

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

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

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

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

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

package/src/tedi/components/misc/empty-state/empty-state.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { IconWithoutBackgroundProps } from '../../base/icon/icon';
+export type EmptyStateType = 'separate' | 'attached' | 'inside';
+export type EmptyStateSize = 'default' | 'small';
+export interface EmptyStateProps {
+    /**
+     * Container variant — matches the Figma "Types" section.
+     * - `'separate'` (default) — full border + radius, stands on its own.
+     * - `'attached'` — top border omitted so the block sits flush beneath a
+     *   preceding card or table (same width + same bottom-radius).
+     * - `'inside'` — no border, no radius; intended to be placed inside another
+     *   container such as a `<Card>` or `<Table>`.
+     * @default separate
+     */
+    type?: EmptyStateType;
+    /**
+     * Padding scale. `default` = 24px, `small` = 16px.
+     * @default default
+     */
+    size?: EmptyStateSize;
+    /**
+     * Icon rendered above the text block. Pass a Material icon name, a full
+     * `IconWithoutBackgroundProps` object to configure the underlying `Icon`,
+     * or `null` to hide the icon.
+     * @default spa
+     */
+    icon?: string | IconWithoutBackgroundProps | null;
+    /**
+     * Optional heading rendered above the description — appears as an H3 in
+     * brand-primary text color.
+     */
+    heading?: React.ReactNode;
+    /**
+     * Main body text describing why there is nothing to show.
+     */
+    children?: React.ReactNode;
+    /**
+     * Call-to-action slot. Typically a `<Button>` (or two) or a `<Link>`.
+     * Rendered below the text block.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Additional class name on the root element.
+     */
+    className?: string;
+}
+export declare const EmptyState: {
+    ({ type, size, icon, heading, children, actions, className, }: EmptyStateProps): JSX.Element;
+    displayName: string;
+};
+export default EmptyState;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-empty-state":"tedi-empty-state-fa18a0c7","tedi-empty-state--small":"tedi-empty-state--small-cd55192d","tedi-empty-state--attached":"tedi-empty-state--attached-34f9494f","tedi-empty-state--inside":"tedi-empty-state--inside-59a35f4a","tedi-empty-state__text":"tedi-empty-state__text-3356405a","tedi-empty-state__icon":"tedi-empty-state__icon-b7c0b65c","tedi-empty-state__content":"tedi-empty-state__content-8f9e9b61","tedi-empty-state__heading":"tedi-empty-state__heading-a8adf6aa","tedi-empty-state__description":"tedi-empty-state__description-4c540947","tedi-empty-state__actions":"tedi-empty-state__actions-bff9b270"};exports.default=t;

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

@@ -0,0 +1,15 @@
+const t = {
+  "tedi-empty-state": "tedi-empty-state-fa18a0c7",
+  "tedi-empty-state--small": "tedi-empty-state--small-cd55192d",
+  "tedi-empty-state--attached": "tedi-empty-state--attached-34f9494f",
+  "tedi-empty-state--inside": "tedi-empty-state--inside-59a35f4a",
+  "tedi-empty-state__text": "tedi-empty-state__text-3356405a",
+  "tedi-empty-state__icon": "tedi-empty-state__icon-b7c0b65c",
+  "tedi-empty-state__content": "tedi-empty-state__content-8f9e9b61",
+  "tedi-empty-state__heading": "tedi-empty-state__heading-a8adf6aa",
+  "tedi-empty-state__description": "tedi-empty-state__description-4c540947",
+  "tedi-empty-state__actions": "tedi-empty-state__actions-bff9b270"
+};
+export {
+  t as default
+};

package/src/tedi/components/misc/empty-state/index.d.ts

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

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, isValidElement as x, cloneElement as I } from "react";
+import { useState as S, useRef as V, useEffect as w, cloneElement as x, isValidElement 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 x(t) ? I(t, { className: y(t.props.className, b) }) : /* @__PURE__ */ M("div", { className: b, children: t });
+  return I(t) ? x(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.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;
+"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;

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

@@ -1,17 +1,18 @@
-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";
+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";
 const B = (t) => {
-  const { getCurrentBreakpointProps: e } = l(t.defaultServerBreakpoint), {
+  const { getCurrentBreakpointProps: e } = p(t.defaultServerBreakpoint), {
     children: r,
     role: o,
     direction: s = "both",
     className: n,
     ...c
-  } = e(t), i = a(p[`tedi-stretch-content--${s}`], n);
-  return /* @__PURE__ */ m("div", { className: i, role: o, ...c, children: r });
+  } = e(t), a = m(l[`tedi-stretch-content--${s}`], n);
+  return /* @__PURE__ */ i("div", { className: a, role: o, ...c, children: r });
 };
 export {
-  B as StretchContent
+  B as StretchContent,
+  B as default
 };

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, isValidElement as d, cloneElement as u } from "react";
+import { useRef as a, useEffect as l, cloneElement as d, isValidElement 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]), d(o) ? u(o, { id: t }) : /* @__PURE__ */ h("div", { id: t, children: o });
+  }, [t, i, e]), u(o) ? d(o, { id: t }) : /* @__PURE__ */ h("div", { id: t, children: o });
 };
 export {
   p as HashTrigger

package/src/tedi/components/navigation/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pagination';
+export * from './use-pagination';

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),s=require("react"),U=require("../../base/icon/icon.cjs.js"),y=require("../../base/typography/text/text.cjs.js"),N=require("../../buttons/button/button.cjs.js"),D=require("../../form/select/select.cjs.js"),a=require("./pagination.module.scss.cjs.js"),E=require("./use-pagination.cjs.js"),F=require("../../../providers/label-provider/use-labels.cjs.js"),m=s.forwardRef((S,j)=>{const{pageCount:u,page:f,defaultPage:z=1,onPageChange:d,totalItems:h,pageSize:b,pageSizeOptions:l,onPageSizeChange:c,boundaryCount:L=1,siblingCount:q=1,labels:v,className:A}=S,{getLabel:i}=F.useLabels(),n=s.useMemo(()=>({ariaLabel:i("pagination.title"),previous:i("pagination.prev-page"),next:i("pagination.next-page"),pageAriaLabel:e=>i("pagination.page",e,!1),currentPageAriaLabel:e=>i("pagination.page",e,!0),results:e=>i("pagination.results",e),pageSize:i("pagination.page-size"),...v}),[i,v]),[C,P]=s.useState(z),_=f??C,w=E.usePagination({page:_,pageCount:u,boundaryCount:L,siblingCount:q}),x=s.useCallback(e=>{e===_||e<1||e>u||(f===void 0&&P(e),d==null||d(e))},[_,d,f,u]),k=s.useId(),p=s.useMemo(()=>Array.isArray(l)?l.map(e=>({value:String(e),label:String(e)})):[],[l]),M=s.useMemo(()=>b===void 0?p[0]??null:p.find(e=>e.value===String(b))??null,[b,p]),I=s.useCallback(e=>{const r=Array.isArray(e)?e[0]:e;r&&"value"in r&&(c==null||c(Number(r.value)))},[c]),O=g.default(a.default["tedi-pagination"],A),R=h!==void 0,T=Array.isArray(l)&&l.length>0;return t.jsxs("div",{ref:j,className:O,"data-name":"tedi-pagination",children:[t.jsx("div",{className:a.default["tedi-pagination__slot-start"],children:R&&t.jsx(y.Text,{className:a.default["tedi-pagination__results"],color:"secondary",modifiers:"small",children:n.results(h)})}),t.jsx("div",{className:a.default["tedi-pagination__slot-center"],children:u>1&&t.jsx("nav",{"aria-label":n.ariaLabel,className:a.default["tedi-pagination__nav"],children:t.jsx("ul",{className:a.default["tedi-pagination__list"],children:w.map((e,r)=>{if(e.type==="ellipsis")return t.jsx("li",{className:g.default(a.default["tedi-pagination__item"],a.default["tedi-pagination__item--ellipsis"]),"aria-hidden":"true",children:"…"},`ellipsis-${r}`);if(e.type==="previous"||e.type==="next"){if(e.disabled)return null;const B=e.type==="previous"?n.previous:n.next,$=e.type==="previous"?"arrow_back":"arrow_forward";return t.jsx("li",{className:a.default["tedi-pagination__item"],children:t.jsx(N.Button,{type:"button",className:g.default(a.default["tedi-pagination__button"],a.default["tedi-pagination__button--nav"]),"aria-label":B,onClick:()=>e.page!==null&&x(e.page),noStyle:!0,children:t.jsx(U.Icon,{name:$,size:18,color:"brand"})})},e.type)}const o=e.page;return t.jsx("li",{className:a.default["tedi-pagination__item"],children:t.jsx(N.Button,{type:"button",className:g.default(a.default["tedi-pagination__button"],{[a.default["tedi-pagination__button--selected"]]:e.selected}),"aria-label":e.selected?n.currentPageAriaLabel(o):n.pageAriaLabel(o),"aria-current":e.selected?"page":void 0,onClick:()=>x(o),noStyle:!0,children:o})},o)})})})}),t.jsx("div",{className:a.default["tedi-pagination__slot-end"],children:T&&t.jsxs("div",{className:a.default["tedi-pagination__page-size"],children:[t.jsx(y.Text,{className:a.default["tedi-pagination__page-size-label"],color:"secondary",modifiers:"small",element:"span",children:n.pageSize}),t.jsx(D.Select,{id:`tedi-pagination-page-size-${k}`,className:a.default["tedi-pagination__select"],label:n.pageSize,hideLabel:!0,size:"small",options:p,value:M,onChange:I,isSearchable:!1,isClearable:!1})]})})]})});m.displayName="Pagination";exports.Pagination=m;exports.default=m;

package/src/tedi/components/navigation/pagination/pagination.d.ts

@@ -0,0 +1,102 @@
+export type PaginationItemType = 'page' | 'previous' | 'next' | 'ellipsis';
+export interface PaginationItem {
+    type: PaginationItemType;
+    page: number | null;
+    selected: boolean;
+    disabled: boolean;
+}
+export interface PaginationLabels {
+    /**
+     * Accessible label for the nav wrapper.
+     * @default 'Pagination'
+     */
+    ariaLabel: string;
+    /**
+     * Previous button label (icon-only, used as aria-label).
+     * @default 'Previous page'
+     */
+    previous: string;
+    /**
+     * Next button label (icon-only, used as aria-label).
+     * @default 'Next page'
+     */
+    next: string;
+    /**
+     * Function that builds the aria-label for a numeric page button.
+     * @default (page) => `Go to page ${page}`
+     */
+    pageAriaLabel: (page: number) => string;
+    /**
+     * Function that builds the aria-label for the currently active page.
+     * @default (page) => `Current page, page ${page}`
+     */
+    currentPageAriaLabel: (page: number) => string;
+    /**
+     * Rendered to the left of the pagination nav when `totalItems` is set.
+     * @default (count) => `${count} results`
+     */
+    results: (count: number) => string;
+    /**
+     * Prefix label for the page-size select.
+     * @default 'Show per page'
+     */
+    pageSize: string;
+}
+export interface PaginationProps {
+    /**
+     * Total number of pages.
+     */
+    pageCount: number;
+    /**
+     * Controlled current page (1-based). Pair with `onPageChange`.
+     */
+    page?: number;
+    /**
+     * Initial page for uncontrolled mode (1-based).
+     * @default 1
+     */
+    defaultPage?: number;
+    /**
+     * Fires whenever the user navigates to a different page.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Total number of items across all pages. Renders a "{count} results" label
+     * to the left of the nav when set.
+     */
+    totalItems?: number;
+    /**
+     * Current page size. Shown in the page-size select when
+     * `pageSizeOptions` is provided.
+     */
+    pageSize?: number;
+    /**
+     * Options for the page-size select. Omit to hide the select.
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Fires when the user picks a different page size.
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Number of pages always shown at the start and end of the range before
+     * ellipsis kicks in.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /**
+     * Number of sibling pages shown on either side of the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Override any of the default text labels / aria labels.
+     */
+    labels?: Partial<PaginationLabels>;
+    /**
+     * Additional class name on the root element.
+     */
+    className?: string;
+}
+export declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Pagination;

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

@@ -0,0 +1,132 @@
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import g from "../../../../../external/classnames/index.es.js";
+import { forwardRef as D, useMemo as b, useState as E, useCallback as y, useId as F } from "react";
+import { Icon as G } from "../../base/icon/icon.es.js";
+import { Text as S } from "../../base/typography/text/text.es.js";
+import { Button as z } from "../../buttons/button/button.es.js";
+import { Select as H } from "../../form/select/select.es.js";
+import a from "./pagination.module.scss.es.js";
+import { usePagination as J } from "./use-pagination.es.js";
+import { useLabels as K } from "../../../providers/label-provider/use-labels.es.js";
+const Q = D((A, L) => {
+  const {
+    pageCount: o,
+    page: u,
+    defaultPage: C = 1,
+    onPageChange: p,
+    totalItems: f,
+    pageSize: m,
+    pageSizeOptions: s,
+    onPageSizeChange: c,
+    boundaryCount: P = 1,
+    siblingCount: w = 1,
+    labels: h,
+    className: k
+  } = A, { getLabel: t } = K(), n = b(
+    () => ({
+      ariaLabel: t("pagination.title"),
+      previous: t("pagination.prev-page"),
+      next: t("pagination.next-page"),
+      pageAriaLabel: (e) => t("pagination.page", e, !1),
+      currentPageAriaLabel: (e) => t("pagination.page", e, !0),
+      results: (e) => t("pagination.results", e),
+      pageSize: t("pagination.page-size"),
+      ...h
+    }),
+    [t, h]
+  ), [x, I] = E(C), _ = u ?? x, O = J({ page: _, pageCount: o, boundaryCount: P, siblingCount: w }), N = y(
+    (e) => {
+      e === _ || e < 1 || e > o || (u === void 0 && I(e), p == null || p(e));
+    },
+    [_, p, u, o]
+  ), j = F(), d = b(
+    () => Array.isArray(s) ? s.map((e) => ({
+      value: String(e),
+      label: String(e)
+    })) : [],
+    [s]
+  ), R = b(() => m === void 0 ? d[0] ?? null : d.find((e) => e.value === String(m)) ?? null, [m, d]), $ = y(
+    (e) => {
+      const l = Array.isArray(e) ? e[0] : e;
+      l && "value" in l && (c == null || c(Number(l.value)));
+    },
+    [c]
+  ), B = g(a["tedi-pagination"], k), M = f !== void 0, T = Array.isArray(s) && s.length > 0;
+  return /* @__PURE__ */ v("div", { ref: L, className: B, "data-name": "tedi-pagination", children: [
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-start"], children: M && /* @__PURE__ */ i(S, { className: a["tedi-pagination__results"], color: "secondary", modifiers: "small", children: n.results(f) }) }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-center"], children: o > 1 && /* @__PURE__ */ i("nav", { "aria-label": n.ariaLabel, className: a["tedi-pagination__nav"], children: /* @__PURE__ */ i("ul", { className: a["tedi-pagination__list"], children: O.map((e, l) => {
+      if (e.type === "ellipsis")
+        return /* @__PURE__ */ i(
+          "li",
+          {
+            className: g(a["tedi-pagination__item"], a["tedi-pagination__item--ellipsis"]),
+            "aria-hidden": "true",
+            children: "…"
+          },
+          `ellipsis-${l}`
+        );
+      if (e.type === "previous" || e.type === "next") {
+        if (e.disabled) return null;
+        const U = e.type === "previous" ? n.previous : n.next, q = e.type === "previous" ? "arrow_back" : "arrow_forward";
+        return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
+          z,
+          {
+            type: "button",
+            className: g(a["tedi-pagination__button"], a["tedi-pagination__button--nav"]),
+            "aria-label": U,
+            onClick: () => e.page !== null && N(e.page),
+            noStyle: !0,
+            children: /* @__PURE__ */ i(G, { name: q, size: 18, color: "brand" })
+          }
+        ) }, e.type);
+      }
+      const r = e.page;
+      return /* @__PURE__ */ i("li", { className: a["tedi-pagination__item"], children: /* @__PURE__ */ i(
+        z,
+        {
+          type: "button",
+          className: g(a["tedi-pagination__button"], {
+            [a["tedi-pagination__button--selected"]]: e.selected
+          }),
+          "aria-label": e.selected ? n.currentPageAriaLabel(r) : n.pageAriaLabel(r),
+          "aria-current": e.selected ? "page" : void 0,
+          onClick: () => N(r),
+          noStyle: !0,
+          children: r
+        }
+      ) }, r);
+    }) }) }) }),
+    /* @__PURE__ */ i("div", { className: a["tedi-pagination__slot-end"], children: T && /* @__PURE__ */ v("div", { className: a["tedi-pagination__page-size"], children: [
+      /* @__PURE__ */ i(
+        S,
+        {
+          className: a["tedi-pagination__page-size-label"],
+          color: "secondary",
+          modifiers: "small",
+          element: "span",
+          children: n.pageSize
+        }
+      ),
+      /* @__PURE__ */ i(
+        H,
+        {
+          id: `tedi-pagination-page-size-${j}`,
+          className: a["tedi-pagination__select"],
+          label: n.pageSize,
+          hideLabel: !0,
+          size: "small",
+          options: d,
+          value: R,
+          onChange: $,
+          isSearchable: !1,
+          isClearable: !1
+        }
+      )
+    ] }) })
+  ] });
+});
+Q.displayName = "Pagination";
+export {
+  Q as Pagination,
+  Q as default
+};

package/src/tedi/components/navigation/pagination/pagination.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i={"tedi-pagination":"tedi-pagination-96c6fc62","tedi-pagination__slot-start":"tedi-pagination__slot-start-846e7900","tedi-pagination__slot-center":"tedi-pagination__slot-center-e489623b","tedi-pagination__slot-end":"tedi-pagination__slot-end-3f4f5848","tedi-pagination__results":"tedi-pagination__results-29d9108c","tedi-pagination__nav":"tedi-pagination__nav-5f414114","tedi-pagination__list":"tedi-pagination__list-03467ce1","tedi-pagination__item":"tedi-pagination__item-46985c58","tedi-pagination__item--ellipsis":"tedi-pagination__item--ellipsis-85f798f5","tedi-pagination__button":"tedi-pagination__button-d06c27d4","tedi-pagination__button--selected":"tedi-pagination__button--selected-cb151c7f","tedi-pagination__button--nav":"tedi-pagination__button--nav-2f74eea2","tedi-pagination__page-size":"tedi-pagination__page-size-d1fa6f9d","tedi-pagination__page-size-label":"tedi-pagination__page-size-label-3dc2d141","tedi-pagination__select":"tedi-pagination__select-435e167e"};exports.default=i;