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

package/src/tedi/components/layout/top-nav/top-nav-context.es.js

@@ -1,5 +1,5 @@
-import { useContext as t, createContext as o } from "react";
-const e = o(null), x = () => t(e);
+import { createContext as t, useContext as o } from "react";
+const e = t(null), x = () => o(e);
 export {
   e as TopNavContext,
   x as useTopNavContext

package/src/tedi/components/layout/top-nav/top-nav.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),ne=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),oe=require("../mobile-nav/mobile-nav.cjs.js"),W=require("./components/top-nav-group/top-nav-group.cjs.js"),g=require("./components/top-nav-item/top-nav-item.cjs.js"),G=require("./components/top-nav-separator/top-nav-separator.cjs.js"),R=require("./components/top-nav-subitem/top-nav-subitem.cjs.js"),v=require("./top-nav.module.scss.cjs.js"),se=require("./top-nav-context.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),re=n=>{if(!(n===void 0||n==="none"||n===0))return typeof n=="string"&&n!=="xs"&&n in C.BREAKPOINT_WIDTHS?C.BREAKPOINT_WIDTHS[n]:n},L=n=>{const r=[];return t.Children.forEach(n,o=>{if(t.isValidElement(o)){if(o.type===t.Fragment){r.push(...L(o.props.children));return}(o.type===g.TopNavItem||o.type===G.TopNavSeparator)&&r.push(o)}}),r},A=n=>n.type===g.TopNavItem,ie=n=>({children:n.props.children,href:n.props.href,isActive:n.props.isActive,onClick:n.props.onClick}),P=n=>{if(!n)return;const r=[];return t.Children.forEach(n,o=>{if(!t.isValidElement(o))return;if(o.type===t.Fragment){const i=P(o.props.children);i&&r.push(...i);return}if(o.type!==W.TopNavGroup)return;const f=o.props,c=[];t.Children.forEach(f.children,i=>{t.isValidElement(i)&&i.type===R.TopNavSubItem&&c.push(ie(i))}),c.length>0&&r.push({subHeading:f.title,subItems:c})}),r.length>0?r:void 0},p=n=>{const{children:r,ariaLabel:o,mobileBreakpoint:f="md",isMobileOpen:c,onMenuToggle:i,showMobileOverlay:V=!0,className:O,id:D,submenuFit:F="full",maxWidth:H="xxl"}=n,K=C.useBreakpoint(),T=C.isBreakpointBelow(K,f),b=c!==void 0,[$,_]=t.useState(!1),z=b?c:$;t.useEffect(()=>{!b&&!T&&_(!1)},[T,b]);const J=e=>{b||_(e),i==null||i(e)},E=t.useMemo(()=>L(r),[r]),l=t.useMemo(()=>E.filter(A),[E]),k=e=>!e.props.href&&t.Children.count(e.props.submenu)>0,M=t.useMemo(()=>{const e=l.findIndex(s=>k(s)&&s.props.isActive);return e===-1?null:e},[l]),[N,d]=t.useState(M);t.useEffect(()=>{d(M)},[M]);const q=t.useCallback(()=>d(null),[]),Q=t.useMemo(()=>({closeSubmenu:q}),[q]),I=t.useRef(null),h=t.useId();t.useEffect(()=>{if(N===null)return;const e=u=>{I.current&&!I.current.contains(u.target)&&d(null)},s=u=>{var S;if(u.key!=="Escape")return;const m=(S=I.current)==null?void 0:S.querySelector(`[aria-controls="${CSS.escape(h)}"][aria-expanded="true"]`);m==null||m.focus(),d(null)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",s),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",s)}},[N,h]);const w=(e,s)=>k(e)?N===s:!!e.props.isActive,B=t.useMemo(()=>l.find((e,s)=>w(e,s)&&t.Children.count(e.props.submenu)>0),[l,N]),U=t.useMemo(()=>l.map(e=>({children:e.props.children,disabled:e.props.disabled,href:e.props.href,icon:e.props.icon,isActive:e.props.isActive,onClick:e.props.onClick,subItemGroups:P(e.props.submenu)})),[l]);if(T)return a.jsx(oe.MobileNav,{navItems:U,ariaLabel:o,isOpen:z,onClose:()=>J(!1),showOverlay:V,className:O});const j=F==="content",x=re(H);let X=0;return a.jsx(se.TopNavContext.Provider,{value:Q,children:a.jsxs("nav",{ref:I,id:D,className:ne.default(v.default["tedi-top-nav"],O),"aria-label":o,"data-name":"top-nav",children:[a.jsx("div",{className:v.default["tedi-top-nav__bar"],children:a.jsx("ul",{className:v.default["tedi-top-nav__list"],style:x!==void 0?{maxWidth:x}:void 0,children:E.map((e,s)=>{if(A(e)){const u=X++,m=t.Children.count(e.props.submenu)>0,S=k(e),Y=w(e,u),y=e.props.onClick,Z=S?ee=>{y==null||y(ee),d(te=>te===u?null:u)}:y;return t.cloneElement(e,{key:s,hasSubmenu:m,renderSubmenuInline:j,isSubmenuOpen:Y,panelId:h,onClick:Z})}return t.cloneElement(e,{key:s})})})}),!j&&B&&a.jsx("div",{id:h,className:v.default["tedi-top-nav__submenu"],"data-name":"top-nav-submenu",children:a.jsx("div",{className:v.default["tedi-top-nav__submenu-inner"],style:x!==void 0?{maxWidth:x}:void 0,children:B.props.submenu})})]})})};p.displayName="TopNav";p.Item=g.TopNavItem;p.Group=W.TopNavGroup;p.SubItem=R.TopNavSubItem;p.Separator=G.TopNavSeparator;exports.TopNav=p;exports.default=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ne=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),oe=require("../mobile-nav/mobile-nav.cjs.js"),W=require("./components/top-nav-group/top-nav-group.cjs.js"),g=require("./components/top-nav-item/top-nav-item.cjs.js"),G=require("./components/top-nav-separator/top-nav-separator.cjs.js"),R=require("./components/top-nav-subitem/top-nav-subitem.cjs.js"),v=require("./top-nav.module.scss.cjs.js"),se=require("./top-nav-context.cjs.js"),C=require("../../../helpers/hooks/use-breakpoint.cjs.js"),re=n=>{if(!(n===void 0||n==="none"||n===0))return typeof n=="string"&&n!=="xs"&&n in C.BREAKPOINT_WIDTHS?C.BREAKPOINT_WIDTHS[n]:n},L=n=>{const r=[];return t.Children.forEach(n,o=>{if(t.isValidElement(o)){if(o.type===t.Fragment){r.push(...L(o.props.children));return}(o.type===g.TopNavItem||o.type===G.TopNavSeparator)&&r.push(o)}}),r},A=n=>n.type===g.TopNavItem,ie=n=>({children:n.props.children,href:n.props.href,isActive:n.props.isActive,onClick:n.props.onClick}),P=n=>{if(!n)return;const r=[];return t.Children.forEach(n,o=>{if(!t.isValidElement(o))return;if(o.type===t.Fragment){const i=P(o.props.children);i&&r.push(...i);return}if(o.type!==W.TopNavGroup)return;const f=o.props,p=[];t.Children.forEach(f.children,i=>{t.isValidElement(i)&&i.type===R.TopNavSubItem&&p.push(ie(i))}),p.length>0&&r.push({subHeading:f.title,subItems:p})}),r.length>0?r:void 0},l=n=>{const{children:r,ariaLabel:o,mobileBreakpoint:f="md",isMobileOpen:p,onMenuToggle:i,showMobileOverlay:V=!0,className:O,id:D,submenuFit:F="full",maxWidth:H="xxl"}=n,K=C.default(),T=C.isBreakpointBelow(K,f),b=p!==void 0,[$,q]=t.useState(!1),z=b?p:$;t.useEffect(()=>{!b&&!T&&q(!1)},[T,b]);const J=e=>{b||q(e),i==null||i(e)},E=t.useMemo(()=>L(r),[r]),c=t.useMemo(()=>E.filter(A),[E]),k=e=>!e.props.href&&t.Children.count(e.props.submenu)>0,M=t.useMemo(()=>{const e=c.findIndex(s=>k(s)&&s.props.isActive);return e===-1?null:e},[c]),[N,d]=t.useState(M);t.useEffect(()=>{d(M)},[M]);const _=t.useCallback(()=>d(null),[]),Q=t.useMemo(()=>({closeSubmenu:_}),[_]),I=t.useRef(null),h=t.useId();t.useEffect(()=>{if(N===null)return;const e=u=>{I.current&&!I.current.contains(u.target)&&d(null)},s=u=>{var S;if(u.key!=="Escape")return;const m=(S=I.current)==null?void 0:S.querySelector(`[aria-controls="${CSS.escape(h)}"][aria-expanded="true"]`);m==null||m.focus(),d(null)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",s),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",s)}},[N,h]);const w=(e,s)=>k(e)?N===s:!!e.props.isActive,j=t.useMemo(()=>c.find((e,s)=>w(e,s)&&t.Children.count(e.props.submenu)>0),[c,N]),U=t.useMemo(()=>c.map(e=>({children:e.props.children,disabled:e.props.disabled,href:e.props.href,icon:e.props.icon,isActive:e.props.isActive,onClick:e.props.onClick,subItemGroups:P(e.props.submenu)})),[c]);if(T)return a.jsx(oe.MobileNav,{navItems:U,ariaLabel:o,isOpen:z,onClose:()=>J(!1),showOverlay:V,className:O});const B=F==="content",x=re(H);let X=0;return a.jsx(se.TopNavContext.Provider,{value:Q,children:a.jsxs("nav",{ref:I,id:D,className:ne.default(v.default["tedi-top-nav"],O),"aria-label":o,"data-name":"top-nav",children:[a.jsx("div",{className:v.default["tedi-top-nav__bar"],children:a.jsx("ul",{className:v.default["tedi-top-nav__list"],style:x!==void 0?{maxWidth:x}:void 0,children:E.map((e,s)=>{if(A(e)){const u=X++,m=t.Children.count(e.props.submenu)>0,S=k(e),Y=w(e,u),y=e.props.onClick,Z=S?ee=>{y==null||y(ee),d(te=>te===u?null:u)}:y;return t.cloneElement(e,{key:s,hasSubmenu:m,renderSubmenuInline:B,isSubmenuOpen:Y,panelId:h,onClick:Z})}return t.cloneElement(e,{key:s})})})}),!B&&j&&a.jsx("div",{id:h,className:v.default["tedi-top-nav__submenu"],"data-name":"top-nav-submenu",children:a.jsx("div",{className:v.default["tedi-top-nav__submenu-inner"],style:x!==void 0?{maxWidth:x}:void 0,children:j.props.submenu})})]})})};l.displayName="TopNav";l.Item=g.TopNavItem;l.Group=W.TopNavGroup;l.SubItem=R.TopNavSubItem;l.Separator=G.TopNavSeparator;exports.TopNav=l;

package/src/tedi/components/layout/top-nav/top-nav.d.ts

@@ -84,7 +84,7 @@ export declare const TopNav: {
     };
     SubItem: <C extends React.ElementType = "a">(props: TopNavSubItemProps<C>) => React.ReactElement | null;
     Separator: {
-        ({ className }: import('./components/top-nav-separator/top-nav-separator').TopNavSeparatorProps): JSX.Element;
+        ({ className }: import('.').TopNavSeparatorProps): JSX.Element;
         displayName: string;
     };
 };

package/src/tedi/components/layout/top-nav/top-nav.es.js

@@ -8,19 +8,19 @@ import { TopNavSeparator as H } from "./components/top-nav-separator/top-nav-sep
 import { TopNavSubItem as K } from "./components/top-nav-subitem/top-nav-subitem.es.js";
 import f from "./top-nav.module.scss.es.js";
 import { TopNavContext as fe } from "./top-nav-context.es.js";
-import { useBreakpoint as ve, isBreakpointBelow as be, BREAKPOINT_WIDTHS as V } from "../../../helpers/hooks/use-breakpoint.es.js";
+import ve, { isBreakpointBelow as be, BREAKPOINT_WIDTHS as V } from "../../../helpers/hooks/use-breakpoint.es.js";
 const he = (n) => {
   if (!(n === void 0 || n === "none" || n === 0))
     return typeof n == "string" && n !== "xs" && n in V ? V[n] : n;
 }, q = (n) => {
   const r = [];
-  return l.forEach(n, (t) => {
-    if (w(t)) {
-      if (t.type === D) {
-        r.push(...q(t.props.children));
+  return l.forEach(n, (o) => {
+    if (w(o)) {
+      if (o.type === D) {
+        r.push(...q(o.props.children));
         return;
       }
-      (t.type === M || t.type === H) && r.push(t);
+      (o.type === M || o.type === H) && r.push(o);
     }
   }), r;
 }, j = (n) => n.type === M, Ie = (n) => ({
@@ -31,15 +31,15 @@ const he = (n) => {
 }), $ = (n) => {
   if (!n) return;
   const r = [];
-  return l.forEach(n, (t) => {
-    if (!w(t)) return;
-    if (t.type === D) {
-      const s = $(t.props.children);
+  return l.forEach(n, (o) => {
+    if (!w(o)) return;
+    if (o.type === D) {
+      const s = $(o.props.children);
       s && r.push(...s);
       return;
     }
-    if (t.type !== F) return;
-    const b = t.props, p = [];
+    if (o.type !== F) return;
+    const b = o.props, p = [];
     l.forEach(b.children, (s) => {
       w(s) && s.type === K && p.push(Ie(s));
     }), p.length > 0 && r.push({ subHeading: b.title, subItems: p });
@@ -47,7 +47,7 @@ const he = (n) => {
 }, v = (n) => {
   const {
     children: r,
-    ariaLabel: t,
+    ariaLabel: o,
     mobileBreakpoint: b = "md",
     isMobileOpen: p,
     onMenuToggle: s,
@@ -63,7 +63,7 @@ const he = (n) => {
   const ee = (e) => {
     h || B(e), s == null || s(e);
   }, E = c(() => q(r), [r]), a = c(() => E.filter(j), [E]), O = (e) => !e.props.href && l.count(e.props.submenu) > 0, _ = c(() => {
-    const e = a.findIndex((o) => O(o) && o.props.isActive);
+    const e = a.findIndex((t) => O(t) && t.props.isActive);
     return e === -1 ? null : e;
   }, [a]), [I, m] = P(_);
   g(() => {
@@ -74,7 +74,7 @@ const he = (n) => {
     if (I === null) return;
     const e = (i) => {
       x.current && !x.current.contains(i.target) && m(null);
-    }, o = (i) => {
+    }, t = (i) => {
       var S;
       if (i.key !== "Escape") return;
       const d = (S = x.current) == null ? void 0 : S.querySelector(
@@ -82,15 +82,15 @@ const he = (n) => {
       );
       d == null || d.focus(), m(null);
     };
-    return document.addEventListener("mousedown", e), document.addEventListener("keydown", o), () => {
-      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", o);
+    return document.addEventListener("mousedown", e), document.addEventListener("keydown", t), () => {
+      document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
     };
   }, [I, y]);
-  const W = (e, o) => O(e) ? I === o : !!e.props.isActive, L = c(
-    () => a.find((e, o) => W(e, o) && l.count(e.props.submenu) > 0),
+  const W = (e, t) => O(e) ? I === t : !!e.props.isActive, L = c(
+    () => a.find((e, t) => W(e, t) && l.count(e.props.submenu) > 0),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [a, I]
-  ), te = c(
+  ), oe = c(
     () => a.map((e) => ({
       children: e.props.children,
       disabled: e.props.disabled,
@@ -106,8 +106,8 @@ const he = (n) => {
     return /* @__PURE__ */ u(
       de,
       {
-        navItems: te,
-        ariaLabel: t,
+        navItems: oe,
+        ariaLabel: o,
         isOpen: Z,
         onClose: () => ee(!1),
         showOverlay: z,
@@ -115,14 +115,14 @@ const he = (n) => {
       }
     );
   const G = Q === "content", N = he(U);
-  let oe = 0;
+  let te = 0;
   return /* @__PURE__ */ u(fe.Provider, { value: ne, children: /* @__PURE__ */ ae(
     "nav",
     {
       ref: x,
       id: J,
       className: ue(f["tedi-top-nav"], T),
-      "aria-label": t,
+      "aria-label": o,
       "data-name": "top-nav",
       children: [
         /* @__PURE__ */ u("div", { className: f["tedi-top-nav__bar"], children: /* @__PURE__ */ u(
@@ -130,13 +130,13 @@ const he = (n) => {
           {
             className: f["tedi-top-nav__list"],
             style: N !== void 0 ? { maxWidth: N } : void 0,
-            children: E.map((e, o) => {
+            children: E.map((e, t) => {
               if (j(e)) {
-                const i = oe++, d = l.count(e.props.submenu) > 0, S = O(e), re = W(e, i), k = e.props.onClick, se = S ? (ie) => {
+                const i = te++, d = l.count(e.props.submenu) > 0, S = O(e), re = W(e, i), k = e.props.onClick, se = S ? (ie) => {
                   k == null || k(ie), m((pe) => pe === i ? null : i);
                 } : k;
                 return R.cloneElement(e, {
-                  key: o,
+                  key: t,
                   hasSubmenu: d,
                   renderSubmenuInline: G,
                   isSubmenuOpen: re,
@@ -144,7 +144,7 @@ const he = (n) => {
                   onClick: se
                 });
               }
-              return R.cloneElement(e, { key: o });
+              return R.cloneElement(e, { key: t });
             })
           }
         ) }),
@@ -166,6 +166,5 @@ v.Group = F;
 v.SubItem = K;
 v.Separator = H;
 export {
-  v as TopNav,
-  v as default
+  v as TopNav
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),p=require("./vertical-spacing.module.scss.cjs.js"),d=require("./vertical-spacing-item.cjs.js"),g=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),e=t=>{const{getCurrentBreakpointProps:i}=g.useBreakpointProps(t.defaultServerBreakpoint),{children:a,className:n,element:c="div",size:r=1,...s}=i(t),l=u.default(p.default["tedi-vertical-spacing"],n);return o.jsx(c,{"data-name":"vertical-spacing",role:"presentation",...s,className:l,style:{"--vertical-spacing-internal":r!==0?`${r}em`:"0"},children:a})};e.Item=d.VerticalSpacingItem;exports.VerticalSpacing=e;exports.default=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),p=require("./vertical-spacing.module.scss.cjs.js"),g=require("./vertical-spacing-item.cjs.js"),m=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),r=e=>{const{getCurrentBreakpointProps:i}=m.useBreakpointProps(e.defaultServerBreakpoint),{children:a,className:n,element:c="div",size:t=1,...s}=i(e),l=u.default(p.default["tedi-vertical-spacing"],n);return o.jsx(c,{"data-name":"vertical-spacing",role:"presentation",...s,className:l,style:{"--vertical-spacing-internal":t!==0?`${t}em`:"0"},children:a})};r.Item=g.VerticalSpacingItem;exports.VerticalSpacing=r;

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

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

package/src/tedi/components/loaders/progress-bar/index.d.ts

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

package/src/tedi/components/loaders/progress-bar/progress-bar.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),$=require("react"),z=require("../../form/feedback-text/feedback-text.cjs.js"),R=require("../../form/form-label/form-label.cjs.js"),e=require("./progress-bar.module.scss.cjs.js"),S=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),T=r=>r===void 0||Number.isNaN(r)||r<0?0:r>100?100:r,h=r=>{const{getCurrentBreakpointProps:x}=S.useBreakpointProps(r.defaultServerBreakpoint),{id:N,value:j,small:B=!1,label:l,labelPosition:d="top",required:P=!1,showValue:n=!0,valuePosition:u="horizontal",valueLabel:c,ariaLabel:b,helper:s,className:q}=x(r),k=$.useId(),t=N??`tedi-progress-bar-${k.replace(/[^a-zA-Z0-9-]/g,"")}`,i=`${t}__label`,p=s?s.id??`${t}__helper`:void 0,o=T(j),m=c??`${Math.round(o)}%`,_=l?a.jsx(R.FormLabel,{id:t,label:l,required:P,renderWithoutLabel:!0,className:e.default["tedi-progress-bar__label"]}):null,y=n&&u==="horizontal"?a.jsx("span",{className:e.default["tedi-progress-bar__value"],children:m}):null,L=a.jsx("div",{id:t,role:"progressbar","aria-valuenow":o,"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":c,"aria-labelledby":l&&!b?i:void 0,"aria-label":b||void 0,"aria-describedby":p,className:e.default["tedi-progress-bar__track"],children:a.jsx("div",{className:e.default["tedi-progress-bar__fill"],style:{width:`${o}%`}})}),f=n&&u==="bottom",w=a.jsxs("div",{className:e.default["tedi-progress-bar__row"],children:[L,y]}),I=s||f?a.jsxs("div",{className:e.default["tedi-progress-bar__hint-row"],children:[s?a.jsx(z.FeedbackText,{...s,id:p,className:v.default(e.default["tedi-progress-bar__hint"],s.className)}):null,f?a.jsx("span",{className:e.default["tedi-progress-bar__value"],children:m}):null]}):null,g=a.jsxs("div",{className:e.default["tedi-progress-bar__group"],children:[w,I]}),V=l&&d==="horizontal";return a.jsxs("div",{className:v.default(e.default["tedi-progress-bar"],{[e.default["tedi-progress-bar--small"]]:B},q),"data-name":"progress-bar",children:[l&&d==="top"?a.jsx("div",{id:i,className:e.default["tedi-progress-bar__label-wrapper"],children:_}):null,V?a.jsxs("div",{className:e.default["tedi-progress-bar__main"],children:[a.jsx("div",{id:i,className:e.default["tedi-progress-bar__inline-label"],children:_}),g]}):g]})};h.displayName="ProgressBar";exports.ProgressBar=h;

package/src/tedi/components/loaders/progress-bar/progress-bar.d.ts

@@ -0,0 +1,65 @@
+import { BreakpointSupport } from '../../../helpers';
+import { FeedbackTextProps } from '../../form/feedback-text/feedback-text';
+export type ProgressBarLabelPosition = 'top' | 'horizontal';
+export type ProgressBarValuePosition = 'horizontal' | 'bottom';
+type ProgressBarBreakpointProps = {
+    /**
+     * Use the 4px bar height instead of the 8px default.
+     * @default false
+     */
+    small?: boolean;
+    /**
+     * Label placement. Ignored without `label`.
+     * @default top
+     */
+    labelPosition?: ProgressBarLabelPosition;
+    /**
+     * Show the percentage value.
+     * @default true
+     */
+    showValue?: boolean;
+    /**
+     * Where the percentage sits relative to the bar / hint row.
+     * @default horizontal
+     */
+    valuePosition?: ProgressBarValuePosition;
+    /**
+     * Override the rendered value text (e.g. `"1 / 5"`) without affecting the fill.
+     */
+    valueLabel?: string;
+    /**
+     * Hint or error text rendered below the bar via `FeedbackText`.
+     */
+    helper?: FeedbackTextProps;
+    /** Class on the root wrapper. */
+    className?: string;
+};
+export interface ProgressBarProps extends BreakpointSupport<ProgressBarBreakpointProps> {
+    /**
+     * Id forwarded to the bar element so external `<label htmlFor>` can target it.
+     */
+    id?: string;
+    /**
+     * Progress value, clamped to `0..100`. `NaN` is treated as `0`.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Label rendered above or inline with the bar.
+     */
+    label?: string;
+    /**
+     * Renders a required indicator on the label. Ignored without `label`.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Accessible name. Falls back to `label`.
+     */
+    ariaLabel?: string;
+}
+export declare const ProgressBar: {
+    (props: ProgressBarProps): JSX.Element;
+    displayName: string;
+};
+export default ProgressBar;

package/src/tedi/components/loaders/progress-bar/progress-bar.es.js

@@ -0,0 +1,74 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import N from "../../../../../external/classnames/index.es.js";
+import { useId as j } from "react";
+import { FeedbackText as F } from "../../form/feedback-text/feedback-text.es.js";
+import { FormLabel as R } from "../../form/form-label/form-label.es.js";
+import e from "./progress-bar.module.scss.es.js";
+import { useBreakpointProps as q } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const A = (r) => r === void 0 || Number.isNaN(r) || r < 0 ? 0 : r > 100 ? 100 : r, C = (r) => {
+  const { getCurrentBreakpointProps: f } = q(r.defaultServerBreakpoint), {
+    id: w,
+    value: x,
+    small: y = !1,
+    label: l,
+    labelPosition: n = "top",
+    required: B = !1,
+    showValue: c = !0,
+    valuePosition: p = "horizontal",
+    valueLabel: b,
+    ariaLabel: m,
+    helper: s,
+    className: I
+  } = f(r), L = j(), o = w ?? `tedi-progress-bar-${L.replace(/[^a-zA-Z0-9-]/g, "")}`, t = `${o}__label`, u = s ? s.id ?? `${o}__helper` : void 0, d = A(x), _ = b ?? `${Math.round(d)}%`, v = l ? /* @__PURE__ */ a(
+    R,
+    {
+      id: o,
+      label: l,
+      required: B,
+      renderWithoutLabel: !0,
+      className: e["tedi-progress-bar__label"]
+    }
+  ) : null, P = c && p === "horizontal" ? /* @__PURE__ */ a("span", { className: e["tedi-progress-bar__value"], children: _ }) : null, V = /* @__PURE__ */ a(
+    "div",
+    {
+      id: o,
+      role: "progressbar",
+      "aria-valuenow": d,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuetext": b,
+      "aria-labelledby": l && !m ? t : void 0,
+      "aria-label": m || void 0,
+      "aria-describedby": u,
+      className: e["tedi-progress-bar__track"],
+      children: /* @__PURE__ */ a("div", { className: e["tedi-progress-bar__fill"], style: { width: `${d}%` } })
+    }
+  ), g = c && p === "bottom", k = /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__row"], children: [
+    V,
+    P
+  ] }), $ = s || g ? /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__hint-row"], children: [
+    s ? /* @__PURE__ */ a(F, { ...s, id: u, className: N(e["tedi-progress-bar__hint"], s.className) }) : null,
+    g ? /* @__PURE__ */ a("span", { className: e["tedi-progress-bar__value"], children: _ }) : null
+  ] }) : null, h = /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__group"], children: [
+    k,
+    $
+  ] }), z = l && n === "horizontal";
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: N(e["tedi-progress-bar"], { [e["tedi-progress-bar--small"]]: y }, I),
+      "data-name": "progress-bar",
+      children: [
+        l && n === "top" ? /* @__PURE__ */ a("div", { id: t, className: e["tedi-progress-bar__label-wrapper"], children: v }) : null,
+        z ? /* @__PURE__ */ i("div", { className: e["tedi-progress-bar__main"], children: [
+          /* @__PURE__ */ a("div", { id: t, className: e["tedi-progress-bar__inline-label"], children: v }),
+          h
+        ] }) : h
+      ]
+    }
+  );
+};
+C.displayName = "ProgressBar";
+export {
+  C as ProgressBar
+};

package/src/tedi/components/loaders/progress-bar/progress-bar.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r={"tedi-progress-bar":"tedi-progress-bar-770f14b0","tedi-progress-bar__main":"tedi-progress-bar__main-e6d028ee","tedi-progress-bar__inline-label":"tedi-progress-bar__inline-label-92e2bcb6","tedi-progress-bar__group":"tedi-progress-bar__group-03a58869","tedi-progress-bar__row":"tedi-progress-bar__row-89a78ec6","tedi-progress-bar__label":"tedi-progress-bar__label-af2d533b","tedi-progress-bar__track":"tedi-progress-bar__track-519efc0e","tedi-progress-bar__fill":"tedi-progress-bar__fill-5eaa3943","tedi-progress-bar__value":"tedi-progress-bar__value-f105b0d1","tedi-progress-bar__hint-row":"tedi-progress-bar__hint-row-7e6ce05b","tedi-progress-bar__hint":"tedi-progress-bar__hint-886a36f5","tedi-progress-bar--small":"tedi-progress-bar--small-fbdb4f60"};exports.default=r;

package/src/tedi/components/loaders/progress-bar/progress-bar.module.scss.es.js

@@ -0,0 +1,17 @@
+const r = {
+  "tedi-progress-bar": "tedi-progress-bar-770f14b0",
+  "tedi-progress-bar__main": "tedi-progress-bar__main-e6d028ee",
+  "tedi-progress-bar__inline-label": "tedi-progress-bar__inline-label-92e2bcb6",
+  "tedi-progress-bar__group": "tedi-progress-bar__group-03a58869",
+  "tedi-progress-bar__row": "tedi-progress-bar__row-89a78ec6",
+  "tedi-progress-bar__label": "tedi-progress-bar__label-af2d533b",
+  "tedi-progress-bar__track": "tedi-progress-bar__track-519efc0e",
+  "tedi-progress-bar__fill": "tedi-progress-bar__fill-5eaa3943",
+  "tedi-progress-bar__value": "tedi-progress-bar__value-f105b0d1",
+  "tedi-progress-bar__hint-row": "tedi-progress-bar__hint-row-7e6ce05b",
+  "tedi-progress-bar__hint": "tedi-progress-bar__hint-886a36f5",
+  "tedi-progress-bar--small": "tedi-progress-bar--small-fbdb4f60"
+};
+export {
+  r as default
+};

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

@@ -1 +1 @@
-"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;
+"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;

package/src/tedi/components/loaders/skeleton/skeleton.d.ts

@@ -31,6 +31,6 @@ export interface SkeletonProps {
 }
 export declare const Skeleton: {
     (props: SkeletonProps): JSX.Element;
-    Block: (props: import('./skeleton-block/skeleton-block').SkeletonBlockProps) => import("react/jsx-runtime").JSX.Element;
+    Block: (props: import('.').SkeletonBlockProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Skeleton;

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

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("../../../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;
+"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;

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 { useBreakpointProps as f } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as u } from "../../../providers/label-provider/use-labels.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";
 const v = (s) => {
-  const { getLabel: o } = u(), { getCurrentBreakpointProps: a } = f(s.defaultServerBreakpoint), {
+  const { getLabel: o } = f(), { getCurrentBreakpointProps: a } = u(s.defaultServerBreakpoint), {
     className: l,
     size: i = 16,
     color: n = "primary",

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

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

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

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

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

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

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

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { Breakpoint } from '../../../helpers';
+import { FeedbackTextProps } from '../../form/feedback-text/feedback-text';
+export type AttachmentDirection = 'horizontal' | 'vertical';
+export interface AttachmentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'color'> {
+    /**
+     * File name (required).
+     */
+    name: string;
+    /**
+     * Hint / error message shown below the card, wired via `aria-describedby`.
+     */
+    feedback?: FeedbackTextProps;
+    /**
+     * Pre-formatted file size (e.g. `'1.2 MB'`), shown after the name. Format it yourself.
+     */
+    fileSize?: string;
+    /**
+     * Material icon name for a leading file-type glyph.
+     */
+    icon?: string | null;
+    /**
+     * Action buttons (download, delete, …) shown on the right. `Button`s default to
+     * `visualType="neutral"`.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Show an upload progress bar.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Upload progress (0..100); only shown while `isLoading`.
+     * @default 0
+     */
+    progress?: number;
+    /**
+     * Hint text under the progress bar (e.g. `'Üleslaadimine'`); only shown while `isLoading`.
+     */
+    progressLabel?: string;
+    /**
+     * `false` switches the card to the error state (danger surface + warning glyph).
+     */
+    isValid?: boolean;
+    /**
+     * Force the layout: `'vertical'` stacks the content, `'horizontal'` keeps one row.
+     * When omitted, derived from the viewport via `verticalBelow`.
+     */
+    direction?: AttachmentDirection;
+    /**
+     * Breakpoint below which the layout auto-switches to vertical (when `direction` is unset).
+     * @default sm
+     */
+    verticalBelow?: Breakpoint;
+    /**
+     * Additional class name on the root element.
+     */
+    className?: string;
+}
+export declare const Attachment: React.ForwardRefExoticComponent<AttachmentProps & React.RefAttributes<HTMLDivElement>>;
+export default Attachment;