@tedi-design-system/react 18.0.0-rc.22 → 18.0.0-rc.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.22",
+  "version": "18.0.0-rc.24",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/content/label/label.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),x=require("../../buttons/info-button/info-button.cjs.js"),l=require("../../overlays/tooltip/tooltip.cjs.js"),t=require("./label.module.scss.cjs.js"),B=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),g=require("../../../providers/label-provider/use-labels.cjs.js"),i=j.forwardRef((r,s)=>{const{getCurrentBreakpointProps:n}=B.useBreakpointProps(r.defaultServerBreakpoint),{as:u="label",children:d,className:c,isBold:b,isSmall:o,required:p,tooltip:a,...f}=n(r),{getLabel:m}=g.useLabels(),q=h.default(t.default["tedi-label"],b&&t.default["tedi-label--bold"],o&&t.default["tedi-label--small"],c);return e.jsxs(u,{ref:s,className:q,...f,children:[d,p&&e.jsx("span",{className:t.default["tedi-label__required"],"aria-hidden":"true",children:"*"}),a&&e.jsx("span",{"aria-hidden":"true",children:e.jsxs(l.Tooltip,{children:[e.jsx(l.Tooltip.Trigger,{children:e.jsx(x.InfoButton,{isSmall:o,"aria-label":m("infoButton.moreInformation")})}),e.jsx(l.Tooltip.Content,{children:a})]})})]})});i.displayName="Label";exports.Label=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../../../../external/classnames/index.cjs.js"),j=require("react"),x=require("../../buttons/info-button/info-button.cjs.js"),l=require("../../overlays/tooltip/tooltip.cjs.js"),t=require("./label.module.scss.cjs.js"),B=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),g=require("../../../providers/label-provider/use-labels.cjs.js"),o=j.forwardRef((r,s)=>{const{getCurrentBreakpointProps:n}=B.useBreakpointProps(r.defaultServerBreakpoint),{as:d="label",children:u,className:c,isBold:b,isSmall:a,required:f,tooltip:i,...p}=n(r),{getLabel:m}=g.useLabels(),q=h.default(t.default["tedi-label"],b&&t.default["tedi-label--bold"],a&&t.default["tedi-label--small"],c);return e.jsxs(d,{ref:s,className:q,...p,children:[u,f&&e.jsx("span",{className:t.default["tedi-label__required"],"aria-hidden":"true",children:"*"}),i&&e.jsx("span",{"aria-hidden":"true",className:t.default["tedi-label__info"],children:e.jsxs(l.Tooltip,{children:[e.jsx(l.Tooltip.Trigger,{children:e.jsx(x.InfoButton,{isSmall:a,"aria-label":m("infoButton.moreInformation")})}),e.jsx(l.Tooltip.Content,{children:i})]})})]})});o.displayName="Label";exports.Label=o;

package/src/tedi/components/content/label/label.es.js

@@ -5,33 +5,33 @@ import { InfoButton as g } from "../../buttons/info-button/info-button.es.js";
 import { Tooltip as l } from "../../overlays/tooltip/tooltip.es.js";
 import r from "./label.module.scss.es.js";
 import { useBreakpointProps as L } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as k } from "../../../providers/label-provider/use-labels.es.js";
-const x = N((o, s) => {
+import { useLabels as _ } from "../../../providers/label-provider/use-labels.es.js";
+const k = N((o, s) => {
   const { getCurrentBreakpointProps: n } = L(o.defaultServerBreakpoint), {
     as: m = "label",
     children: d,
-    className: p,
-    isBold: c,
+    className: c,
+    isBold: p,
     isSmall: t,
     required: f,
     tooltip: a,
     ...b
-  } = n(o), { getLabel: u } = k(), h = B(
+  } = n(o), { getLabel: u } = _(), h = B(
     r["tedi-label"],
-    c && r["tedi-label--bold"],
+    p && r["tedi-label--bold"],
     t && r["tedi-label--small"],
-    p
+    c
   );
   return /* @__PURE__ */ i(m, { ref: s, className: h, ...b, children: [
     d,
     f && /* @__PURE__ */ e("span", { className: r["tedi-label__required"], "aria-hidden": "true", children: "*" }),
-    a && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: /* @__PURE__ */ i(l, { children: [
+    a && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: r["tedi-label__info"], children: /* @__PURE__ */ i(l, { children: [
       /* @__PURE__ */ e(l.Trigger, { children: /* @__PURE__ */ e(g, { isSmall: t, "aria-label": u("infoButton.moreInformation") }) }),
       /* @__PURE__ */ e(l.Content, { children: a })
     ] }) })
   ] });
 });
-x.displayName = "Label";
+k.displayName = "Label";
 export {
-  x as Label
+  k as Label
 };

package/src/tedi/components/content/label/label.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-label":"tedi-label-473ab627","tedi-label--small":"tedi-label--small-20e328dc","tedi-label--bold":"tedi-label--bold-9d758835","tedi-label__required":"tedi-label__required-414e3f9d"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-label":"tedi-label-473ab627","tedi-label--small":"tedi-label--small-20e328dc","tedi-label--bold":"tedi-label--bold-9d758835","tedi-label__required":"tedi-label__required-414e3f9d","tedi-label__info":"tedi-label__info-c9df19b4"};exports.default=e;

package/src/tedi/components/content/label/label.module.scss.es.js

@@ -2,7 +2,8 @@ const e = {
   "tedi-label": "tedi-label-473ab627",
   "tedi-label--small": "tedi-label--small-20e328dc",
   "tedi-label--bold": "tedi-label--bold-9d758835",
-  "tedi-label__required": "tedi-label__required-414e3f9d"
+  "tedi-label__required": "tedi-label__required-414e3f9d",
+  "tedi-label__info": "tedi-label__info-c9df19b4"
 };
 export {
   e as default

package/src/tedi/components/form/file-dropzone/file-dropzone.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),F=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),C=require("../../../helpers/hooks/use-file-upload.cjs.js"),u=require("../../base/icon/icon.cjs.js"),N=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../feedback-text/feedback-text.cjs.js"),D=require("../form-label/form-label.cjs.js"),t=require("./file-dropzone.module.scss.cjs.js"),I=require("../../../providers/label-provider/use-labels.cjs.js"),m=require("../../content/list/list.cjs.js"),L=require("../../cards/card/card.cjs.js"),S=require("../../cards/card/card-content/card-content.cjs.js"),k=require("../../layout/grid/row.cjs.js"),x=require("../../layout/grid/col.cjs.js"),w=o=>{const{getLabel:s}=I.useLabels(),{label:p=s("file-dropzone.label"),className:z,disabled:a=!1,helper:i,id:c,...b}=o,{innerFiles:d,uploadErrorHelper:n,onFileChange:j,onFileRemove:g}=C.useFileUpload(o),{getRootProps:v,getInputProps:q,isDragActive:h}=F.useDropzone({disabled:a,accept:o.accept?{"application/*":[o.accept]}:void 0,multiple:o.multiple,maxSize:o.maxSize?o.maxSize*1024**2:void 0,onDrop:l=>{if(a)return;j({target:{files:l}})}}),y=_.default(t.default["tedi-file-dropzone"],{[t.default["tedi-file-dropzone--disabled"]]:a},{[t.default["tedi-file-dropzone--invalid"]]:((n==null?void 0:n.type)||(i==null?void 0:i.type))==="error"},{[t.default["tedi-file-dropzone--valid"]]:((n==null?void 0:n.type)||(i==null?void 0:i.type))==="valid"},{[t.default["tedi-file-dropzone--drop-over"]]:h},z),r=i?(i==null?void 0:i.id)??`${c}-helper`:void 0;return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...v({tabIndex:a?-1:0,"aria-disabled":a,"aria-describedby":r}),className:y,children:[e.jsx("input",{...q(),disabled:a}),e.jsxs("div",{className:t.default["tedi-file-dropzone__label-wrapper"],children:[e.jsx(u.Icon,{color:a?"tertiary":"secondary",size:24,name:"attach_file"}),e.jsx(D.FormLabel,{...b,id:c,label:p,className:t.default["tedi-file-dropzone__label"]})]})]}),i?e.jsx(f.FeedbackText,{...i,id:r}):n?e.jsx(f.FeedbackText,{...n,id:r}):null,!!d.length&&e.jsx(m.List,{className:t.default["tedi-file-dropzone__file-list"],style:"none","aria-label":s("file-dropzone.selected-files"),children:d.map(l=>e.jsx(m.List.Item,{className:t.default["tedi-file-dropzone__file-list-item"],children:e.jsx(L.Card,{background:l.isValid===!1?"danger-primary":"tertiary",borderless:!0,className:t.default["tedi-file-dropzone__file-item"],children:e.jsx(S.CardContent,{padding:.5,children:e.jsxs(k.Row,{alignItems:"center",children:[e.jsxs(x.Col,{className:t.default["tedi-file-dropzone__file-name"],children:[l.name," ",l.isValid===!1&&e.jsx(u.Icon,{name:"info",color:"danger",display:"inline",size:18})]}),e.jsx(x.Col,{width:"auto",children:e.jsx(N.ClosingButton,{iconSize:18,title:s("remove")+" "+l.name,onClick:()=>g(l)})})]})})})},l.id||l.name))}),e.jsx("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:d.length===0?s("file-dropzone.no-file"):s("file-dropzone.files-selected",d.length)})]})};exports.FileDropzone=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),L=require("../../../../../external/classnames/index.cjs.js"),N=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),D=require("../../../helpers/hooks/use-file-upload.cjs.js"),$=require("../../base/icon/icon.cjs.js"),I=require("../../buttons/button/button.cjs.js"),S=require("../../misc/attachment/attachment.cjs.js"),f=require("../feedback-text/feedback-text.cjs.js"),T=require("../form-label/form-label.cjs.js"),n=require("./file-dropzone.module.scss.cjs.js"),k=require("../../../providers/label-provider/use-labels.cjs.js"),p=require("../../content/list/list.cjs.js"),P=s=>{const{getLabel:d}=k.useLabels(),{label:x=d("file-dropzone.label"),className:b,disabled:o=!1,helper:i,id:m,attachmentProps:c,...z}=s,{innerFiles:r,uploadErrorHelper:a,onFileChange:g,onFileRemove:j}=D.useFileUpload(s),{getRootProps:v,getInputProps:h,isDragActive:y}=N.useDropzone({disabled:o,accept:s.accept?{"application/*":[s.accept]}:void 0,multiple:s.multiple,maxSize:s.maxSize?s.maxSize*1024**2:void 0,onDrop:t=>{if(o)return;g({target:{files:t}})}}),F=L.default(n.default["tedi-file-dropzone"],{[n.default["tedi-file-dropzone--disabled"]]:o},{[n.default["tedi-file-dropzone--invalid"]]:((a==null?void 0:a.type)||(i==null?void 0:i.type))==="error"},{[n.default["tedi-file-dropzone--valid"]]:((a==null?void 0:a.type)||(i==null?void 0:i.type))==="valid"},{[n.default["tedi-file-dropzone--drop-over"]]:y},b),u=i?(i==null?void 0:i.id)??`${m}-helper`:void 0;return e.jsxs(e.Fragment,{children:[e.jsxs("div",{...v({tabIndex:o?-1:0,"aria-disabled":o,"aria-describedby":u}),className:F,children:[e.jsx("input",{...h(),disabled:o}),e.jsx("div",{className:n.default["tedi-file-dropzone__label-wrapper"],children:e.jsx(T.FormLabel,{...z,id:m,label:e.jsxs(e.Fragment,{children:[e.jsx($.Icon,{color:o?"tertiary":"secondary",size:24,name:"attach_file",display:"inline",className:n.default["tedi-file-dropzone__label-icon"]}),x]}),className:n.default["tedi-file-dropzone__label"]})})]}),i?e.jsx(f.FeedbackText,{...i,id:u}):a?e.jsx(f.FeedbackText,{...a,id:u}):null,!!r.length&&e.jsx(p.List,{className:n.default["tedi-file-dropzone__file-list"],style:"none","aria-label":d("file-dropzone.selected-files"),children:r.map(t=>{const l=typeof c=="function"?c(t):c,{actions:q,..._}=l??{};return e.jsx(p.List.Item,{className:n.default["tedi-file-dropzone__file-list-item"],children:e.jsx(S.Attachment,{..._,name:t.name??"",isValid:t.isValid??(l==null?void 0:l.isValid),isLoading:t.isLoading??(l==null?void 0:l.isLoading),actions:e.jsxs(e.Fragment,{children:[q,e.jsx(I.Button,{visualType:"neutral",icon:"delete",onClick:()=>j(t),children:`${d("remove")} ${t.name??""}`})]})})},t.id??`${t.name??"file"}-${t.size??""}-${t.lastModified??""}`)})}),e.jsx("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:r.length===0?d("file-dropzone.no-file"):d("file-dropzone.files-selected",r.length)})]})};exports.FileDropzone=P;

package/src/tedi/components/form/file-dropzone/file-dropzone.d.ts

@@ -1,12 +1,38 @@
-import { UseFileUploadProps } from '../../../helpers/hooks/use-file-upload';
+import { FileUploadFile, UseFileUploadProps } from '../../../helpers/hooks/use-file-upload';
+import { AttachmentProps } from '../../misc/attachment/attachment';
 import { FeedbackTextProps } from '../feedback-text/feedback-text';
 import { FormLabelProps } from '../form-label/form-label';
-export interface FileDropzoneProps extends Omit<FormLabelProps, 'size' | 'hideLabel'>, UseFileUploadProps {
+export type FileDropzoneAttachmentProps = Partial<Omit<AttachmentProps, 'name'>> | ((file: FileUploadFile) => Partial<Omit<AttachmentProps, 'name'>>);
+export interface FileDropzoneProps extends Omit<FormLabelProps, 'size' | 'hideLabel' | 'label'>, UseFileUploadProps {
+    /**
+     * Additional CSS class names to apply to the dropzone for custom styling
+     */
     className?: string;
+    /**
+     * The name attribute for the file input, used for form submission and identifying the field.
+     */
     name: string;
-    label: string;
+    /**
+     * The text label displayed for the file dropzone, providing context for users.
+     * Defaults to the `LabelProvider`'s localised `file-dropzone.label` (e.g. "Lohista
+     * failid siia või klõpsa, et sirvida" in Estonian).
+     */
+    label?: string;
+    /**
+     * Provides helper text or feedback (such as an error or instruction message) to guide the user.
+     */
     helper?: FeedbackTextProps;
+    /**
+     * Disables the file dropzone, preventing user interaction.
+     */
     disabled?: boolean;
+    /**
+     * Overrides forwarded to each rendered `Attachment` (e.g. `icon`, `fileSize`,
+     * `progress`, `feedback`). Pass a function to vary per file. `FileDropzone`
+     * sets `name`, `isValid` and `isLoading` itself, and always appends a remove
+     * button to the `actions` slot (after any `actions` you provide here).
+     */
+    attachmentProps?: FileDropzoneAttachmentProps;
 }
 export declare const FileDropzone: (props: FileDropzoneProps) => JSX.Element;
 export default FileDropzone;

package/src/tedi/components/form/file-dropzone/file-dropzone.es.js

@@ -1,92 +1,114 @@
-import { jsxs as d, Fragment as C, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, Fragment as f, jsx as t } from "react/jsx-runtime";
 import I from "../../../../../external/classnames/index.es.js";
-import { useDropzone as D } from "../../../../../external/react-dropzone/dist/es/index.es.js";
-import { useFileUpload as L } from "../../../helpers/hooks/use-file-upload.es.js";
-import { Icon as f } from "../../base/icon/icon.es.js";
-import { ClosingButton as S } from "../../buttons/closing-button/closing-button.es.js";
-import { FeedbackText as p } from "../feedback-text/feedback-text.es.js";
+import { useDropzone as A } from "../../../../../external/react-dropzone/dist/es/index.es.js";
+import { useFileUpload as P } from "../../../helpers/hooks/use-file-upload.es.js";
+import { Icon as S } from "../../base/icon/icon.es.js";
+import { Button as V } from "../../buttons/button/button.es.js";
+import { Attachment as j } from "../../misc/attachment/attachment.es.js";
+import { FeedbackText as b } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as k } from "../form-label/form-label.es.js";
 import o from "./file-dropzone.module.scss.es.js";
-import { useLabels as w } from "../../../providers/label-provider/use-labels.es.js";
-import { List as z } from "../../content/list/list.es.js";
-import { Card as R } from "../../cards/card/card.es.js";
-import { CardContent as j } from "../../cards/card/card-content/card-content.es.js";
-import { Row as B } from "../../layout/grid/row.es.js";
-import { Col as b } from "../../layout/grid/col.es.js";
-const Z = (r) => {
-  const { getLabel: n } = w(), { label: g = n("file-dropzone.label"), className: v, disabled: a = !1, helper: i, id: c, ...h } = r, { innerFiles: s, uploadErrorHelper: l, onFileChange: u, onFileRemove: y } = L(r), { getRootProps: _, getInputProps: N, isDragActive: x } = D({
-    disabled: a,
-    accept: r.accept ? { "application/*": [r.accept] } : void 0,
-    multiple: r.multiple,
-    maxSize: r.maxSize ? r.maxSize * 1024 ** 2 : void 0,
-    onDrop: (t) => {
-      if (a) return;
-      u({
-        target: { files: t }
+import { useLabels as B } from "../../../providers/label-provider/use-labels.es.js";
+import { List as v } from "../../content/list/list.es.js";
+const W = (l) => {
+  const { getLabel: s } = B(), {
+    label: h = s("file-dropzone.label"),
+    className: u,
+    disabled: d = !1,
+    helper: e,
+    id: z,
+    attachmentProps: m,
+    ...g
+  } = l, { innerFiles: r, uploadErrorHelper: a, onFileChange: y, onFileRemove: _ } = P(l), { getRootProps: N, getInputProps: x, isDragActive: F } = A({
+    disabled: d,
+    accept: l.accept ? { "application/*": [l.accept] } : void 0,
+    multiple: l.multiple,
+    maxSize: l.maxSize ? l.maxSize * 1024 ** 2 : void 0,
+    onDrop: (i) => {
+      if (d) return;
+      y({
+        target: { files: i }
       });
     }
-  }), F = I(
+  }), L = I(
     o["tedi-file-dropzone"],
-    { [o["tedi-file-dropzone--disabled"]]: a },
-    { [o["tedi-file-dropzone--invalid"]]: ((l == null ? void 0 : l.type) || (i == null ? void 0 : i.type)) === "error" },
-    { [o["tedi-file-dropzone--valid"]]: ((l == null ? void 0 : l.type) || (i == null ? void 0 : i.type)) === "valid" },
-    { [o["tedi-file-dropzone--drop-over"]]: x },
-    v
-  ), m = i ? (i == null ? void 0 : i.id) ?? `${c}-helper` : void 0;
-  return /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ d(
+    { [o["tedi-file-dropzone--disabled"]]: d },
+    { [o["tedi-file-dropzone--invalid"]]: ((a == null ? void 0 : a.type) || (e == null ? void 0 : e.type)) === "error" },
+    { [o["tedi-file-dropzone--valid"]]: ((a == null ? void 0 : a.type) || (e == null ? void 0 : e.type)) === "valid" },
+    { [o["tedi-file-dropzone--drop-over"]]: F },
+    u
+  ), p = e ? (e == null ? void 0 : e.id) ?? `${z}-helper` : void 0;
+  return /* @__PURE__ */ c(f, { children: [
+    /* @__PURE__ */ c(
       "div",
       {
-        ..._({
-          tabIndex: a ? -1 : 0,
-          "aria-disabled": a,
-          "aria-describedby": m
+        ...N({
+          tabIndex: d ? -1 : 0,
+          "aria-disabled": d,
+          "aria-describedby": p
         }),
-        className: F,
+        className: L,
         children: [
-          /* @__PURE__ */ e("input", { ...N(), disabled: a }),
-          /* @__PURE__ */ d("div", { className: o["tedi-file-dropzone__label-wrapper"], children: [
-            /* @__PURE__ */ e(f, { color: a ? "tertiary" : "secondary", size: 24, name: "attach_file" }),
-            /* @__PURE__ */ e(k, { ...h, id: c, label: g, className: o["tedi-file-dropzone__label"] })
-          ] })
+          /* @__PURE__ */ t("input", { ...x(), disabled: d }),
+          /* @__PURE__ */ t("div", { className: o["tedi-file-dropzone__label-wrapper"], children: /* @__PURE__ */ t(
+            k,
+            {
+              ...g,
+              id: z,
+              label: /* @__PURE__ */ c(f, { children: [
+                /* @__PURE__ */ t(
+                  S,
+                  {
+                    color: d ? "tertiary" : "secondary",
+                    size: 24,
+                    name: "attach_file",
+                    display: "inline",
+                    className: o["tedi-file-dropzone__label-icon"]
+                  }
+                ),
+                h
+              ] }),
+              className: o["tedi-file-dropzone__label"]
+            }
+          ) })
         ]
       }
     ),
-    i ? /* @__PURE__ */ e(p, { ...i, id: m }) : l ? /* @__PURE__ */ e(p, { ...l, id: m }) : null,
-    !!s.length && /* @__PURE__ */ e(
-      z,
+    e ? /* @__PURE__ */ t(b, { ...e, id: p }) : a ? /* @__PURE__ */ t(b, { ...a, id: p }) : null,
+    !!r.length && /* @__PURE__ */ t(
+      v,
       {
         className: o["tedi-file-dropzone__file-list"],
         style: "none",
-        "aria-label": n("file-dropzone.selected-files"),
-        children: s.map((t) => /* @__PURE__ */ e(z.Item, { className: o["tedi-file-dropzone__file-list-item"], children: /* @__PURE__ */ e(
-          R,
-          {
-            background: t.isValid === !1 ? "danger-primary" : "tertiary",
-            borderless: !0,
-            className: o["tedi-file-dropzone__file-item"],
-            children: /* @__PURE__ */ e(j, { padding: 0.5, children: /* @__PURE__ */ d(B, { alignItems: "center", children: [
-              /* @__PURE__ */ d(b, { className: o["tedi-file-dropzone__file-name"], children: [
-                t.name,
-                " ",
-                t.isValid === !1 && /* @__PURE__ */ e(f, { name: "info", color: "danger", display: "inline", size: 18 })
-              ] }),
-              /* @__PURE__ */ e(b, { width: "auto", children: /* @__PURE__ */ e(
-                S,
+        "aria-label": s("file-dropzone.selected-files"),
+        children: r.map((i) => {
+          const n = typeof m == "function" ? m(i) : m, { actions: $, ...D } = n ?? {};
+          return /* @__PURE__ */ t(
+            v.Item,
+            {
+              className: o["tedi-file-dropzone__file-list-item"],
+              children: /* @__PURE__ */ t(
+                j,
                 {
-                  iconSize: 18,
-                  title: n("remove") + " " + t.name,
-                  onClick: () => y(t)
+                  ...D,
+                  name: i.name ?? "",
+                  isValid: i.isValid ?? (n == null ? void 0 : n.isValid),
+                  isLoading: i.isLoading ?? (n == null ? void 0 : n.isLoading),
+                  actions: /* @__PURE__ */ c(f, { children: [
+                    $,
+                    /* @__PURE__ */ t(V, { visualType: "neutral", icon: "delete", onClick: () => _(i), children: `${s("remove")} ${i.name ?? ""}` })
+                  ] })
                 }
-              ) })
-            ] }) })
-          }
-        ) }, t.id || t.name))
+              )
+            },
+            i.id ?? `${i.name ?? "file"}-${i.size ?? ""}-${i.lastModified ?? ""}`
+          );
+        })
       }
     ),
-    /* @__PURE__ */ e("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: s.length === 0 ? n("file-dropzone.no-file") : n("file-dropzone.files-selected", s.length) })
+    /* @__PURE__ */ t("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: r.length === 0 ? s("file-dropzone.no-file") : s("file-dropzone.files-selected", r.length) })
   ] });
 };
 export {
-  Z as FileDropzone
+  W as FileDropzone
 };

package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-dropzone":"tedi-file-dropzone-70698e52","tedi-file-dropzone__label-wrapper":"tedi-file-dropzone__label-wrapper-78360685","tedi-file-dropzone__label":"tedi-file-dropzone__label-5c15bc34","tedi-file-dropzone--disabled":"tedi-file-dropzone--disabled-0e01143d","tedi-file-dropzone--invalid":"tedi-file-dropzone--invalid-159cce6d","tedi-file-dropzone--valid":"tedi-file-dropzone--valid-d2d3ef3d","tedi-file-dropzone--drop-over":"tedi-file-dropzone--drop-over-3e31af77","tedi-file-dropzone__file-list":"tedi-file-dropzone__file-list-c1ededa3","tedi-file-dropzone__file-list-item":"tedi-file-dropzone__file-list-item-3ad71621","tedi-file-dropzone__file-name":"tedi-file-dropzone__file-name-f9bf2a63"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-file-dropzone":"tedi-file-dropzone-70698e52","tedi-file-dropzone__label-wrapper":"tedi-file-dropzone__label-wrapper-78360685","tedi-file-dropzone__label":"tedi-file-dropzone__label-5c15bc34","tedi-file-dropzone__label-icon":"tedi-file-dropzone__label-icon-180ef5ad","tedi-file-dropzone--disabled":"tedi-file-dropzone--disabled-0e01143d","tedi-file-dropzone--invalid":"tedi-file-dropzone--invalid-159cce6d","tedi-file-dropzone--valid":"tedi-file-dropzone--valid-d2d3ef3d","tedi-file-dropzone--drop-over":"tedi-file-dropzone--drop-over-3e31af77","tedi-file-dropzone__file-list":"tedi-file-dropzone__file-list-c1ededa3","tedi-file-dropzone__file-list-item":"tedi-file-dropzone__file-list-item-3ad71621"};exports.default=e;

package/src/tedi/components/form/file-dropzone/file-dropzone.module.scss.es.js

@@ -2,13 +2,13 @@ const e = {
   "tedi-file-dropzone": "tedi-file-dropzone-70698e52",
   "tedi-file-dropzone__label-wrapper": "tedi-file-dropzone__label-wrapper-78360685",
   "tedi-file-dropzone__label": "tedi-file-dropzone__label-5c15bc34",
+  "tedi-file-dropzone__label-icon": "tedi-file-dropzone__label-icon-180ef5ad",
   "tedi-file-dropzone--disabled": "tedi-file-dropzone--disabled-0e01143d",
   "tedi-file-dropzone--invalid": "tedi-file-dropzone--invalid-159cce6d",
   "tedi-file-dropzone--valid": "tedi-file-dropzone--valid-d2d3ef3d",
   "tedi-file-dropzone--drop-over": "tedi-file-dropzone--drop-over-3e31af77",
   "tedi-file-dropzone__file-list": "tedi-file-dropzone__file-list-c1ededa3",
-  "tedi-file-dropzone__file-list-item": "tedi-file-dropzone__file-list-item-3ad71621",
-  "tedi-file-dropzone__file-name": "tedi-file-dropzone__file-name-f9bf2a63"
+  "tedi-file-dropzone__file-list-item": "tedi-file-dropzone__file-list-item-3ad71621"
 };
 export {
   e as default

package/src/tedi/components/form/file-upload/file-upload.d.ts

@@ -2,7 +2,16 @@ import { FileUploadFile } from '../../../helpers/hooks/use-file-upload';
 import { FormLabelProps } from '../../form/form-label/form-label';
 import { FeedbackTextProps } from '../feedback-text/feedback-text';
 export interface FileUploadProps extends Omit<FormLabelProps, 'id' | 'label'> {
+    /**
+     * Unique HTML id for the file input, also used to associate the label and
+     * helper/error text for accessibility. When omitted, falls back to the
+     * surrounding `InputGroup`'s id or a generated one.
+     */
     id?: string;
+    /**
+     * Visible label for the field. May be omitted when the surrounding
+     * `InputGroup` provides its own label.
+     */
     label?: string;
     /**
      * Additional class names appended to the inner dropzone element

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;

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

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

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

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

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

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

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

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

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

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

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

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