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

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.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),F=require("../../../../../external/classnames/index.cjs.js"),C=require("../../../../../external/react-dropzone/dist/es/index.cjs.js"),N=require("../../../helpers/hooks/use-file-upload.cjs.js"),u=require("../../base/icon/icon.cjs.js"),D=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../feedback-text/feedback-text.cjs.js"),I=require("../form-label/form-label.cjs.js"),t=require("./file-dropzone.module.scss.cjs.js"),L=require("../../cards/card/card.cjs.js"),S=require("../../cards/card/card-content/card-content.cjs.js"),k=require("../../../providers/label-provider/use-labels.cjs.js"),m=require("../../content/list/list.cjs.js"),w=require("../../layout/grid/row.cjs.js"),x=require("../../layout/grid/col.cjs.js"),p=o=>{const{getLabel:s}=k.useLabels(),{label:z=s("file-dropzone.label"),className:b,disabled:a=!1,helper:i,id:c,...j}=o,{innerFiles:d,uploadErrorHelper:n,onFileChange:g,onFileRemove:v}=N.useFileUpload(o),{getRootProps:_,getInputProps:q,isDragActive:h}=C.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;g({target:{files:l}})}}),y=F.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},b),r=i?(i==null?void 0:i.id)??`${c}-helper`:void 0;return e.jsxs(e.Fragment,{children:[e.jsxs("div",{..._({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(I.FormLabel,{...j,id:c,label:z,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(w.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(D.ClosingButton,{iconSize:18,title:s("remove")+" "+l.name,onClick:()=>v(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=p;exports.default=p;

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

@@ -7,27 +7,27 @@ import { ClosingButton as S } from "../../buttons/closing-button/closing-button.
 import { FeedbackText as p } 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 { Card as w } from "../../cards/card/card.es.js";
+import { CardContent as R } from "../../cards/card/card-content/card-content.es.js";
+import { useLabels as j } 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,
+const Z = (a) => {
+  const { getLabel: n } = j(), { label: g = n("file-dropzone.label"), className: v, disabled: r = !1, helper: i, id: c, ...h } = a, { innerFiles: s, uploadErrorHelper: l, onFileChange: u, onFileRemove: y } = L(a), { getRootProps: _, getInputProps: N, isDragActive: x } = D({
+    disabled: r,
+    accept: a.accept ? { "application/*": [a.accept] } : void 0,
+    multiple: a.multiple,
+    maxSize: a.maxSize ? a.maxSize * 1024 ** 2 : void 0,
     onDrop: (t) => {
-      if (a) return;
+      if (r) return;
       u({
         target: { files: t }
       });
     }
   }), F = I(
     o["tedi-file-dropzone"],
-    { [o["tedi-file-dropzone--disabled"]]: a },
+    { [o["tedi-file-dropzone--disabled"]]: r },
     { [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 },
@@ -38,15 +38,15 @@ const Z = (r) => {
       "div",
       {
         ..._({
-          tabIndex: a ? -1 : 0,
-          "aria-disabled": a,
+          tabIndex: r ? -1 : 0,
+          "aria-disabled": r,
           "aria-describedby": m
         }),
         className: F,
         children: [
-          /* @__PURE__ */ e("input", { ...N(), disabled: a }),
+          /* @__PURE__ */ e("input", { ...N(), disabled: r }),
           /* @__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(f, { color: r ? "tertiary" : "secondary", size: 24, name: "attach_file" }),
             /* @__PURE__ */ e(k, { ...h, id: c, label: g, className: o["tedi-file-dropzone__label"] })
           ] })
         ]
@@ -60,12 +60,12 @@ const Z = (r) => {
         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,
+          w,
           {
             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: [
+            children: /* @__PURE__ */ e(R, { padding: 0.5, children: /* @__PURE__ */ d(B, { alignItems: "center", children: [
               /* @__PURE__ */ d(b, { className: o["tedi-file-dropzone__file-name"], children: [
                 t.name,
                 " ",
@@ -88,5 +88,6 @@ const Z = (r) => {
   ] });
 };
 export {
-  Z as FileDropzone
+  Z as FileDropzone,
+  Z as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),D=require("react"),P=require("../../../helpers/hooks/use-file-upload.cjs.js"),W=require("../../base/typography/text/text.cjs.js"),v=require("../../buttons/button/button.cjs.js"),A=require("../../buttons/closing-button/closing-button.cjs.js"),E=require("../form-label/form-label.cjs.js"),G=require("../../misc/separator/separator.cjs.js"),J=require("../../tags/tag/tag.cjs.js"),y=require("../feedback-text/feedback-text.cjs.js"),a=require("./file-upload.module.scss.cjs.js"),K=require("../../../providers/label-provider/use-labels.cjs.js"),F=require("../../../helpers/hooks/use-breakpoint.cjs.js"),Q=require("../../layout/grid/row.cjs.js"),q=require("../../layout/grid/col.cjs.js"),X=L=>{const{getLabel:n}=K.useLabels(),{id:r,name:C,accept:g,multiple:b,onChange:m,className:N,defaultFiles:B,onDelete:k,hasClearButton:T=!0,files:u,readOnly:p,disabled:s=!1,maxSize:U,validateIndividually:$=!1,size:c="default",helper:i,...w}=L,{innerFiles:h,uploadErrorHelper:t,onFileChange:S,onFileRemove:R,handleClear:j,announcement:z}=P.useFileUpload({accept:g,maxSize:U,multiple:b,validateIndividually:$,defaultFiles:B,onChange:m,onDelete:k,files:u}),I=F.default(),M=f.default(a.default["tedi-file-upload"],{[a.default["tedi-file-upload--disabled"]]:s},N),x=i?(i==null?void 0:i.id)??`${r}-helper`:void 0,d=D.useMemo(()=>u&&m?u:h,[u,h,m]),V=(l,o)=>{const O=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx("li",{children:e.jsx(J.Tag,{color:l.isValid===!1?"danger":"primary",onClose:!l.isLoading&&!s&&!p?()=>R(l):void 0,isLoading:l.isLoading,"aria-label":O,children:l.name})},o)},_=()=>{if(d.length>1)return e.jsx("ul",{className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate-list"]),children:d.map((l,o)=>V(l,o))});if(d.length===1){const l=d[0],o=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx(W.Text,{"aria-label":o,className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate"]),children:l.name})}return null};return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["tedi-file-upload__label-wrapper"],children:e.jsx(E.FormLabel,{id:r,...w,renderWithoutLabel:p,className:a.default["tedi-file-upload__label"],size:c})}),e.jsx("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:z}),p?_():e.jsx("div",{className:f.default(a.default["tedi-file-upload__container"],{[a.default["tedi-file-upload--disabled"]]:s,[a.default["tedi-file-upload--error"]]:((t==null?void 0:t.type)||(i==null?void 0:i.type))==="error",[a.default["tedi-file-upload--valid"]]:((t==null?void 0:t.type)||(i==null?void 0:i.type))==="valid"},{[a.default[`tedi-file-upload__container--${c}`]]:c}),children:e.jsx("div",{className:a.default["tedi-file-upload__content"],children:e.jsxs(Q.Row,{children:[e.jsx(q.Col,{className:"display-flex",children:_()}),e.jsx(q.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:M,children:[e.jsx("input",{id:r,type:"file",name:C,accept:g,onChange:S,multiple:b,disabled:s,"aria-invalid":!!t&&t.type==="error","aria-describedby":x}),T&&d.length>0&&!s&&e.jsxs(e.Fragment,{children:[F.isBreakpointBelow(I,"md")?e.jsx(v.Button,{visualType:"neutral",iconLeft:"close",disabled:s,onClick:j,className:a.default["tedi-file-upload__button"],children:n("clear")}):e.jsx(A.ClosingButton,{onClick:j,iconSize:18,title:n("clear")}),e.jsx(G.Separator,{axis:"vertical",height:1.5,spacing:.5,color:"primary"})]}),e.jsx(v.Button,{visualType:"neutral",iconLeft:"file_upload",disabled:s,onClick:()=>{var l;return(l=document.getElementById(r))==null?void 0:l.click()},className:a.default["tedi-file-upload__button"],size:c,children:n("file-upload.add")})]})})]})})}),i?e.jsx(y.FeedbackText,{...i,id:x}):t?e.jsx(y.FeedbackText,{...t,id:x}):null]})};exports.FileUpload=X;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),Z=require("../../../helpers/hooks/use-file-upload.cjs.js"),H=require("../../base/typography/text/text.cjs.js"),k=require("../../buttons/button/button.cjs.js"),G=require("../../buttons/closing-button/closing-button.cjs.js"),ee=require("../form-label/form-label.cjs.js"),le=require("../../misc/separator/separator.cjs.js"),ae=require("../../tags/tag/tag.cjs.js"),B=require("../feedback-text/feedback-text.cjs.js"),g=require("../input-group/input-group.cjs.js"),a=require("./file-upload.module.scss.cjs.js"),ie=require("../../../providers/label-provider/use-labels.cjs.js"),T=require("../../../helpers/hooks/use-breakpoint.cjs.js"),te=require("../../layout/grid/row.cjs.js"),I=require("../../layout/grid/col.cjs.js"),w=_=>{var N;const{getLabel:n}=ie.useLabels(),{id:se,name:R,label:j,accept:v,multiple:q,onChange:m,className:U,wrapperClassName:S,defaultFiles:M,onDelete:z,hasClearButton:O=!0,files:u,readOnly:p,disabled:s=!1,maxSize:V,validateIndividually:$=!1,size:c="default",helper:i,...D}=_,{innerFiles:F,uploadErrorHelper:t,onFileChange:P,onFileRemove:W,handleClear:y,announcement:A}=Z.useFileUpload({accept:v,maxSize:V,multiple:q,validateIndividually:$,defaultFiles:M,onChange:m,onDelete:z,files:u}),E=T.useBreakpoint(),J=h.useId(),d=(N=g.useOptionalInputGroup)==null?void 0:N.call(g),K=d==null?void 0:d.hasExternalLabel,x=_.id??(d==null?void 0:d.inputId)??J,L=h.useRef(null),Q=f.default(a.default["tedi-file-upload"],{[a.default["tedi-file-upload--disabled"]]:s},U),b=(i==null?void 0:i.id)??(i||t?`${x}-helper`:void 0),o=h.useMemo(()=>u&&m?u:F,[u,F,m]),X=(l,r)=>{const Y=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx("li",{children:e.jsx(ae.Tag,{color:l.isValid===!1?"danger":"primary",onClose:!l.isLoading&&!s&&!p?()=>W(l):void 0,isLoading:l.isLoading,"aria-label":Y,children:l.name})},r)},C=()=>{if(o.length>1)return e.jsx("ul",{className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate-list"]),children:o.map((l,r)=>X(l,r))});if(o.length===1){const l=o[0],r=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx(H.Text,{"aria-label":r,className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate"]),children:l.name})}return null};return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:a.default["tedi-file-upload__label-wrapper"],children:!K&&j&&e.jsx(ee.FormLabel,{id:x,label:j??"",...D,renderWithoutLabel:p,className:a.default["tedi-file-upload__label"],size:c})}),e.jsx("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:A}),p?C():e.jsx("div",{className:f.default(a.default["tedi-file-upload__container"],{[a.default["tedi-file-upload--disabled"]]:s,[a.default["tedi-file-upload--error"]]:((t==null?void 0:t.type)||(i==null?void 0:i.type))==="error",[a.default["tedi-file-upload--valid"]]:((t==null?void 0:t.type)||(i==null?void 0:i.type))==="valid"},{[a.default[`tedi-file-upload__container--${c}`]]:c},S),children:e.jsx("div",{className:a.default["tedi-file-upload__content"],children:e.jsxs(te.Row,{children:[e.jsx(I.Col,{className:"display-flex",children:C()}),e.jsx(I.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:Q,children:[e.jsx("input",{ref:L,id:x,type:"file",name:R,accept:v,onChange:P,multiple:q,disabled:s,"aria-invalid":!!t&&t.type==="error","aria-describedby":b}),O&&o.length>0&&!s&&e.jsxs(e.Fragment,{children:[T.isBreakpointBelow(E,"md")?e.jsx(k.Button,{visualType:"neutral",iconLeft:"close",disabled:s,onClick:y,className:a.default["tedi-file-upload__button"],children:n("clear")}):e.jsx(G.ClosingButton,{onClick:y,iconSize:18,title:n("clear")}),e.jsx(le.Separator,{axis:"vertical",height:1.5,spacing:.5,color:"primary"})]}),e.jsx(k.Button,{visualType:"neutral",iconLeft:"file_upload",disabled:s,onClick:()=>{var l;return(l=L.current)==null?void 0:l.click()},className:a.default["tedi-file-upload__button"],size:c,children:n("file-upload.add")})]})})]})})}),i?e.jsx(B.FeedbackText,{...i,id:b}):t?e.jsx(B.FeedbackText,{...t,id:b}):null]})};exports.FileUpload=w;exports.default=w;

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

@@ -1,11 +1,23 @@
 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 FormLabelProps {
+export interface FileUploadProps extends Omit<FormLabelProps, 'id' | 'label'> {
+    id?: string;
+    label?: string;
     /**
-     * Additional class names for styling the component.
+     * Additional class names appended to the inner dropzone element
+     * (`tedi-file-upload`) — the content area that holds the file list and the
+     * upload button. Use this to tweak the dropzone itself (border, padding,
+     * background) without affecting the surrounding container.
      */
     className?: string;
+    /**
+     * Additional class names appended to the outer container element
+     * (`tedi-file-upload__container`) that wraps the dropzone, file list, and
+     * helper/error states. Use this to tweak the component's outer shell
+     * (radius, outline, max-width) or to override size/state modifiers.
+     */
+    wrapperClassName?: string;
     /**
      * The name of the file input field, used for form submission and accessibility.
      */

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

@@ -1,152 +1,160 @@
-import { jsxs as p, Fragment as N, jsx as i } from "react/jsx-runtime";
-import u from "../../../../../external/classnames/index.es.js";
-import q from "react";
-import { useFileUpload as A } from "../../../helpers/hooks/use-file-upload.es.js";
-import { Text as E } from "../../base/typography/text/text.es.js";
-import { Button as C } from "../../buttons/button/button.es.js";
+import { jsxs as u, Fragment as I, jsx as l } from "react/jsx-runtime";
+import p from "../../../../../external/classnames/index.es.js";
+import g from "react";
+import { useFileUpload as Y } from "../../../helpers/hooks/use-file-upload.es.js";
+import { Text as Z } from "../../base/typography/text/text.es.js";
+import { Button as $ } from "../../buttons/button/button.es.js";
 import { ClosingButton as G } from "../../buttons/closing-button/closing-button.es.js";
-import { FormLabel as J } from "../form-label/form-label.es.js";
-import { Separator as K } from "../../misc/separator/separator.es.js";
-import { Tag as P } from "../../tags/tag/tag.es.js";
-import { FeedbackText as L } from "../feedback-text/feedback-text.es.js";
-import l from "./file-upload.module.scss.es.js";
-import { useLabels as Q } from "../../../providers/label-provider/use-labels.es.js";
-import X, { isBreakpointBelow as Y } from "../../../helpers/hooks/use-breakpoint.es.js";
-import { Row as Z } from "../../layout/grid/row.es.js";
-import { Col as x } from "../../layout/grid/col.es.js";
-const he = (B) => {
-  const { getLabel: n } = Q(), {
-    id: s,
-    name: k,
-    accept: g,
-    multiple: b,
+import { FormLabel as H } from "../form-label/form-label.es.js";
+import { Separator as ee } from "../../misc/separator/separator.es.js";
+import { Tag as le } from "../../tags/tag/tag.es.js";
+import { FeedbackText as w } from "../feedback-text/feedback-text.es.js";
+import { useOptionalInputGroup as ie } from "../input-group/input-group.es.js";
+import i from "./file-upload.module.scss.es.js";
+import { useLabels as ae } from "../../../providers/label-provider/use-labels.es.js";
+import { useBreakpoint as te, isBreakpointBelow as oe } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { Row as ne } from "../../layout/grid/row.es.js";
+import { Col as R } from "../../layout/grid/col.es.js";
+const xe = (v) => {
+  var B;
+  const { getLabel: d } = ae(), {
+    id: de,
+    name: T,
+    label: y,
+    accept: N,
+    multiple: F,
     onChange: f,
-    className: $,
-    defaultFiles: T,
-    onDelete: w,
-    hasClearButton: z = !0,
+    className: z,
+    wrapperClassName: S,
+    defaultFiles: U,
+    onDelete: V,
+    hasClearButton: j = !0,
     files: c,
     readOnly: h,
     disabled: o = !1,
-    maxSize: I,
-    validateIndividually: R = !1,
+    maxSize: M,
+    validateIndividually: O = !1,
     size: m = "default",
     helper: a,
-    ...S
-  } = B, { innerFiles: v, uploadErrorHelper: t, onFileChange: U, onFileRemove: V, handleClear: y, announcement: j } = A({
-    accept: g,
-    maxSize: I,
-    multiple: b,
-    validateIndividually: R,
-    defaultFiles: T,
+    ...D
+  } = v, { innerFiles: L, uploadErrorHelper: t, onFileChange: W, onFileRemove: q, handleClear: C, announcement: A } = Y({
+    accept: N,
+    maxSize: M,
+    multiple: F,
+    validateIndividually: O,
+    defaultFiles: U,
     onChange: f,
-    onDelete: w,
+    onDelete: V,
     files: c
-  }), M = X(), D = u(l["tedi-file-upload"], { [l["tedi-file-upload--disabled"]]: o }, $), _ = a ? (a == null ? void 0 : a.id) ?? `${s}-helper` : void 0, d = q.useMemo(() => c && f ? c : v, [c, v, f]), O = (e, r) => {
-    const W = e.isValid === !1 ? `${e.name} (${n("file-upload.failed")})` : e.name;
-    return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
-      P,
+  }), E = te(), J = g.useId(), n = (B = ie) == null ? void 0 : B(), K = n == null ? void 0 : n.hasExternalLabel, _ = v.id ?? (n == null ? void 0 : n.inputId) ?? J, x = g.useRef(null), P = p(i["tedi-file-upload"], { [i["tedi-file-upload--disabled"]]: o }, z), b = (a == null ? void 0 : a.id) ?? (a || t ? `${_}-helper` : void 0), r = g.useMemo(() => c && f ? c : L, [c, L, f]), Q = (e, s) => {
+    const X = e.isValid === !1 ? `${e.name} (${d("file-upload.failed")})` : e.name;
+    return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+      le,
       {
         color: e.isValid === !1 ? "danger" : "primary",
-        onClose: !e.isLoading && !o && !h ? () => V(e) : void 0,
+        onClose: !e.isLoading && !o && !h ? () => q(e) : void 0,
         isLoading: e.isLoading,
-        "aria-label": W,
+        "aria-label": X,
         children: e.name
       }
-    ) }, r);
-  }, F = () => {
-    if (d.length > 1)
-      return /* @__PURE__ */ i("ul", { className: u(l["tedi-file-upload__items"], l["tedi-file-upload__truncate-list"]), children: d.map((e, r) => O(e, r)) });
-    if (d.length === 1) {
-      const e = d[0], r = e.isValid === !1 ? `${e.name} (${n("file-upload.failed")})` : e.name;
-      return /* @__PURE__ */ i(
-        E,
+    ) }, s);
+  }, k = () => {
+    if (r.length > 1)
+      return /* @__PURE__ */ l("ul", { className: p(i["tedi-file-upload__items"], i["tedi-file-upload__truncate-list"]), children: r.map((e, s) => Q(e, s)) });
+    if (r.length === 1) {
+      const e = r[0], s = e.isValid === !1 ? `${e.name} (${d("file-upload.failed")})` : e.name;
+      return /* @__PURE__ */ l(
+        Z,
         {
-          "aria-label": r,
-          className: u(l["tedi-file-upload__items"], l["tedi-file-upload__truncate"]),
+          "aria-label": s,
+          className: p(i["tedi-file-upload__items"], i["tedi-file-upload__truncate"]),
           children: e.name
         }
       );
     }
     return null;
   };
-  return /* @__PURE__ */ p(N, { children: [
-    /* @__PURE__ */ i("div", { className: l["tedi-file-upload__label-wrapper"], children: /* @__PURE__ */ i(
-      J,
+  return /* @__PURE__ */ u(I, { children: [
+    /* @__PURE__ */ l("div", { className: i["tedi-file-upload__label-wrapper"], children: !K && y && /* @__PURE__ */ l(
+      H,
       {
-        id: s,
-        ...S,
+        id: _,
+        label: y ?? "",
+        ...D,
         renderWithoutLabel: h,
-        className: l["tedi-file-upload__label"],
+        className: i["tedi-file-upload__label"],
         size: m
       }
     ) }),
-    /* @__PURE__ */ i("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: j }),
-    h ? F() : /* @__PURE__ */ i(
+    /* @__PURE__ */ l("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: A }),
+    h ? k() : /* @__PURE__ */ l(
       "div",
       {
-        className: u(
-          l["tedi-file-upload__container"],
+        className: p(
+          i["tedi-file-upload__container"],
           {
-            [l["tedi-file-upload--disabled"]]: o,
-            [l["tedi-file-upload--error"]]: ((t == null ? void 0 : t.type) || (a == null ? void 0 : a.type)) === "error",
-            [l["tedi-file-upload--valid"]]: ((t == null ? void 0 : t.type) || (a == null ? void 0 : a.type)) === "valid"
+            [i["tedi-file-upload--disabled"]]: o,
+            [i["tedi-file-upload--error"]]: ((t == null ? void 0 : t.type) || (a == null ? void 0 : a.type)) === "error",
+            [i["tedi-file-upload--valid"]]: ((t == null ? void 0 : t.type) || (a == null ? void 0 : a.type)) === "valid"
           },
-          { [l[`tedi-file-upload__container--${m}`]]: m }
+          { [i[`tedi-file-upload__container--${m}`]]: m },
+          S
         ),
-        children: /* @__PURE__ */ i("div", { className: l["tedi-file-upload__content"], children: /* @__PURE__ */ p(Z, { children: [
-          /* @__PURE__ */ i(x, { className: "display-flex", children: F() }),
-          /* @__PURE__ */ i(x, { xs: 12, md: "auto", children: /* @__PURE__ */ p("div", { className: D, children: [
-            /* @__PURE__ */ i(
+        children: /* @__PURE__ */ l("div", { className: i["tedi-file-upload__content"], children: /* @__PURE__ */ u(ne, { children: [
+          /* @__PURE__ */ l(R, { className: "display-flex", children: k() }),
+          /* @__PURE__ */ l(R, { xs: 12, md: "auto", children: /* @__PURE__ */ u("div", { className: P, children: [
+            /* @__PURE__ */ l(
               "input",
               {
-                id: s,
+                ref: x,
+                id: _,
                 type: "file",
-                name: k,
-                accept: g,
-                onChange: U,
-                multiple: b,
+                name: T,
+                accept: N,
+                onChange: W,
+                multiple: F,
                 disabled: o,
                 "aria-invalid": !!t && t.type === "error",
-                "aria-describedby": _
+                "aria-describedby": b
               }
             ),
-            z && d.length > 0 && !o && /* @__PURE__ */ p(N, { children: [
-              Y(M, "md") ? /* @__PURE__ */ i(
-                C,
+            j && r.length > 0 && !o && /* @__PURE__ */ u(I, { children: [
+              oe(E, "md") ? /* @__PURE__ */ l(
+                $,
                 {
                   visualType: "neutral",
                   iconLeft: "close",
                   disabled: o,
-                  onClick: y,
-                  className: l["tedi-file-upload__button"],
-                  children: n("clear")
+                  onClick: C,
+                  className: i["tedi-file-upload__button"],
+                  children: d("clear")
                 }
-              ) : /* @__PURE__ */ i(G, { onClick: y, iconSize: 18, title: n("clear") }),
-              /* @__PURE__ */ i(K, { axis: "vertical", height: 1.5, spacing: 0.5, color: "primary" })
+              ) : /* @__PURE__ */ l(G, { onClick: C, iconSize: 18, title: d("clear") }),
+              /* @__PURE__ */ l(ee, { axis: "vertical", height: 1.5, spacing: 0.5, color: "primary" })
             ] }),
-            /* @__PURE__ */ i(
-              C,
+            /* @__PURE__ */ l(
+              $,
               {
                 visualType: "neutral",
                 iconLeft: "file_upload",
                 disabled: o,
                 onClick: () => {
                   var e;
-                  return (e = document.getElementById(s)) == null ? void 0 : e.click();
+                  return (e = x.current) == null ? void 0 : e.click();
                 },
-                className: l["tedi-file-upload__button"],
+                className: i["tedi-file-upload__button"],
                 size: m,
-                children: n("file-upload.add")
+                children: d("file-upload.add")
               }
             )
           ] }) })
         ] }) })
       }
     ),
-    a ? /* @__PURE__ */ i(L, { ...a, id: _ }) : t ? /* @__PURE__ */ i(L, { ...t, id: _ }) : null
+    a ? /* @__PURE__ */ l(w, { ...a, id: b }) : t ? /* @__PURE__ */ l(w, { ...t, id: b }) : null
   ] });
 };
 export {
-  he as FileUpload
+  xe as FileUpload,
+  xe as default
 };

package/src/tedi/components/form/input-group/components/input/input.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../../../../external/classnames/index.cjs.js"),p=require("react"),a=require("../../input-group.cjs.js"),s=require("../../input-group.module.scss.cjs.js"),n=({children:t})=>{const{disabled:u,inputId:r}=a.useInputGroup();if(!p.isValidElement(t))return t;const o=typeof t.type=="string",i={disabled:u||t.props.disabled,id:t.props.id??r,className:e.default(t.props.className,s.default["tedi-input-group__input"]),...!o&&{wrapperClassName:e.default(t.props.wrapperClassName,s.default["tedi-input-group__input"])}};return p.cloneElement(t,i)};exports.Input=n;

package/src/tedi/components/form/input-group/components/input/input.d.ts

@@ -0,0 +1,19 @@
+import { default as React, ReactNode } from 'react';
+export interface InputProps {
+    /**
+     * The form control rendered inside the input slot — must be a single React
+     * element (e.g. `TextField`, `Select`, native `<input>`). The element is
+     * cloned with extra props from the surrounding `InputGroup`:
+     * - `disabled` is OR-ed with the group's disabled state
+     * - `id` falls back to the group's `inputId` so an external `Label` can
+     *   target it via `htmlFor`
+     * - `className` (or `wrapperClassName` for non-intrinsic components) is
+     *   merged with `tedi-input-group__input` to align borders/radii with
+     *   adjacent prefix/suffix slots
+     *
+     * Non-element children (text, fragments, `null`) are returned as-is and
+     * receive none of these props.
+     */
+    children: ReactNode;
+}
+export declare const Input: ({ children }: InputProps) => string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;

package/src/tedi/components/form/input-group/components/input/input.es.js

@@ -0,0 +1,20 @@
+import t from "../../../../../../../external/classnames/index.es.js";
+import s from "react";
+import { useInputGroup as u } from "../../input-group.es.js";
+import o from "../../input-group.module.scss.es.js";
+const f = ({ children: p }) => {
+  const { disabled: r, inputId: e } = u();
+  if (!s.isValidElement(p)) return p;
+  const a = typeof p.type == "string", i = {
+    disabled: r || p.props.disabled,
+    id: p.props.id ?? e,
+    className: t(p.props.className, o["tedi-input-group__input"]),
+    ...!a && {
+      wrapperClassName: t(p.props.wrapperClassName, o["tedi-input-group__input"])
+    }
+  };
+  return s.cloneElement(p, i);
+};
+export {
+  f as Input
+};

package/src/tedi/components/form/input-group/components/prefix/prefix.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),f=require("../../../../../../../external/classnames/index.cjs.js"),d=require("react"),a=require("../../input-group.cjs.js"),i=require("../../input-group.module.scss.cjs.js"),c=({children:e,className:u,...n})=>{const{registerPrefix:r,unregisterPrefix:t,disabled:s}=a.useInputGroup();d.useEffect(()=>(r(),()=>t()),[r,t]);const o=typeof e=="string"||typeof e=="number";return p.jsx("div",{...n,className:f.default(i.default["tedi-input-group__prefix"],{[i.default["tedi-input-group__prefix--no-inner-div"]]:o},u),"aria-disabled":s,children:e})};exports.Prefix=c;

package/src/tedi/components/form/input-group/components/prefix/prefix.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export interface PrefixProps {
+    /**
+     * Content rendered inside the prefix slot. Typically a short text label,
+     * an `Icon`, a `Button`, or any other inline element. When `children` is a
+     * plain string or number, the prefix automatically applies the
+     * `--no-inner-div` modifier so the wrapper itself receives the correct
+     * padding instead of relying on a child element.
+     */
+    children: ReactNode;
+    /**
+     * Additional class name appended to the wrapper `div`. Useful for one-off
+     * tweaks; the default `tedi-input-group__prefix` BEM class is always
+     * applied.
+     */
+    className?: string;
+}
+export declare const Prefix: ({ children, className, ...props }: PrefixProps) => import("react/jsx-runtime").JSX.Element;

package/src/tedi/components/form/input-group/components/prefix/prefix.es.js

@@ -0,0 +1,26 @@
+import { jsx as u } from "react/jsx-runtime";
+import m from "../../../../../../../external/classnames/index.es.js";
+import { useEffect as n } from "react";
+import { useInputGroup as a } from "../../input-group.es.js";
+import i from "../../input-group.module.scss.es.js";
+const b = ({ children: r, className: o, ...p }) => {
+  const { registerPrefix: e, unregisterPrefix: t, disabled: s } = a();
+  n(() => (e(), () => t()), [e, t]);
+  const f = typeof r == "string" || typeof r == "number";
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ...p,
+      className: m(
+        i["tedi-input-group__prefix"],
+        { [i["tedi-input-group__prefix--no-inner-div"]]: f },
+        o
+      ),
+      "aria-disabled": s,
+      children: r
+    }
+  );
+};
+export {
+  b as Prefix
+};

package/src/tedi/components/form/input-group/components/suffix/suffix.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),d=require("../../../../../../../external/classnames/index.cjs.js"),p=require("react"),a=require("../../input-group.cjs.js"),i=require("../../input-group.module.scss.cjs.js"),c=({children:e,className:r,...s})=>{const{registerSuffix:t,unregisterSuffix:u,disabled:n}=a.useInputGroup();p.useEffect(()=>(t(),()=>u()),[t,u]);const o=typeof e=="string"||typeof e=="number";return f.jsx("div",{...s,className:d.default(i.default["tedi-input-group__suffix"],{[i.default["tedi-input-group__suffix--no-inner-div"]]:o},r),"aria-disabled":n,children:e})};exports.Suffix=c;

package/src/tedi/components/form/input-group/components/suffix/suffix.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export interface SuffixProps {
+    /**
+     * Content rendered inside the suffix slot. Typically a short text label,
+     * an `Icon`, a `Button`, or any other inline element. When `children` is a
+     * plain string or number, the suffix automatically applies the
+     * `--no-inner-div` modifier so the wrapper itself receives the correct
+     * padding instead of relying on a child element.
+     */
+    children: ReactNode;
+    /**
+     * Additional class name appended to the wrapper `div`. Useful for one-off
+     * tweaks; the default `tedi-input-group__suffix` BEM class is always
+     * applied.
+     */
+    className?: string;
+}
+export declare const Suffix: ({ children, className, ...props }: SuffixProps) => import("react/jsx-runtime").JSX.Element;

package/src/tedi/components/form/input-group/components/suffix/suffix.es.js

@@ -0,0 +1,26 @@
+import { jsx as p } from "react/jsx-runtime";
+import m from "../../../../../../../external/classnames/index.es.js";
+import { useEffect as n } from "react";
+import { useInputGroup as a } from "../../input-group.es.js";
+import o from "../../input-group.module.scss.es.js";
+const _ = ({ children: r, className: e, ...s }) => {
+  const { registerSuffix: t, unregisterSuffix: i, disabled: f } = a();
+  n(() => (t(), () => i()), [t, i]);
+  const u = typeof r == "string" || typeof r == "number";
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      ...s,
+      className: m(
+        o["tedi-input-group__suffix"],
+        { [o["tedi-input-group__suffix--no-inner-div"]]: u },
+        e
+      ),
+      "aria-disabled": f,
+      children: r
+    }
+  );
+};
+export {
+  _ as Suffix
+};

package/src/tedi/components/form/input-group/index.d.ts

@@ -0,0 +1,4 @@
+export * from './input-group';
+export * from './components/prefix/prefix';
+export * from './components/suffix/suffix';
+export * from './components/input/input';

package/src/tedi/components/form/input-group/input-group.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),k=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),m=require("../feedback-text/feedback-text.cjs.js"),R=require("../form-label/form-label.cjs.js"),_=require("./components/input/input.cjs.js"),w=require("./components/prefix/prefix.cjs.js"),A=require("./components/suffix/suffix.cjs.js"),u=require("./input-group.module.scss.cjs.js"),d=e.createContext(null),F=()=>{const s=e.useContext(d);if(!s)throw new Error("InputGroupContext missing");return s},N=()=>e.useContext(d),c=e.forwardRef(({className:s,addons:G=!0,helper:t,label:n,children:S,disabled:i,id:q,...j},P)=>{const x=e.useRef(null),v=e.useId(),a=q??v,[p,l]=e.useState(!1),[f,g]=e.useState(!1);e.useImperativeHandle(P,()=>({get root(){return x.current}}));const b=e.useMemo(()=>({hasPrefix:p,hasSuffix:f,disabled:i,hasExternalLabel:!!n,inputId:a,registerPrefix:()=>l(!0),unregisterPrefix:()=>l(!1),registerSuffix:()=>g(!0),unregisterSuffix:()=>g(!1)}),[a,p,f,i,n]),h=k.default(u.default["tedi-input-group"],{[u.default["tedi-input-group--addons"]]:G,[u.default["tedi-input-group--has-prefix"]]:p,[u.default["tedi-input-group--has-suffix"]]:f,[u.default["tedi-input-group--disabled"]]:i},s),y=()=>!t||Array.isArray(t)&&t.length===0?null:r.jsx("div",{className:u.default["tedi-input-group__feedback-wrapper"],children:Array.isArray(t)?t.map((C,I)=>r.jsx(m.FeedbackText,{...C,id:`group-helper-${I}`},I)):r.jsx(m.FeedbackText,{...t,id:"group-helper"})});return r.jsxs(d.Provider,{value:b,children:[n&&r.jsx(R.FormLabel,{...j,label:n,id:a}),r.jsx("div",{ref:x,className:h,"data-name":"tedi-input-group","aria-disabled":i,children:S}),y()]})});c.displayName="InputGroup";const o=c;o.Prefix=w.Prefix;o.Suffix=A.Suffix;o.Input=_.Input;exports.InputGroupBase=c;exports.default=o;exports.useInputGroup=F;exports.useOptionalInputGroup=N;