@tedi-design-system/react 17.1.0-rc.3 → 17.1.0-rc.5

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

@@ -0,0 +1,303 @@
+import { jsxs as He, Fragment as Je, jsx as y } from "react/jsx-runtime";
+import { useFloating as Ke, useClick as Qe, useInteractions as Xe, useDismiss as Ze, useRole as et, FloatingPortal as tt, FloatingFocusManager as rt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import Q from "../../../../../external/classnames/index.es.js";
+import X, { useState as w, useCallback as Z, useEffect as A, useMemo as ee } from "react";
+import { Calendar as it } from "../../content/calendar/calendar.es.js";
+import { MultiValueField as at } from "../multi-value-field/multi-value-field.es.js";
+import { TextField as nt } from "../textfield/textfield.es.js";
+import b from "./date-field.module.scss.es.js";
+import { et as ot } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
+import { autoUpdate as st } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as lt, flip as ft, shift as ct, size as dt } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useBreakpointProps as ut } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useBreakpoint as mt, isBreakpointBelow as pt } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { dateMatchModifiers as ht } from "../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
+const gt = 4, de = 8, yt = X.forwardRef((v, C) => {
+  const { getCurrentBreakpointProps: ue } = ut(v.defaultServerBreakpoint), {
+    useNativePicker: me = !1,
+    enableCalendar: f = !0,
+    calendarTrigger: I = "button",
+    numberOfMonths: $
+  } = ue(v), {
+    id: te,
+    mode: c = "single",
+    label: re,
+    selected: F,
+    onSelect: i,
+    disabled: N,
+    placeholder: pe,
+    className: he,
+    formatDate: l,
+    required: V,
+    showOutsideDays: ge = !0,
+    parseDate: ye,
+    monthYearSelectType: be,
+    selectionLevel: P = "days",
+    locale: De = ot,
+    localeCode: E = "et-EE",
+    initialMonth: j,
+    closeOnSelect: xe,
+    footer: _e,
+    defaultValue: O,
+    minDate: W,
+    maxDate: S,
+    disablePast: ie,
+    disableFuture: ae,
+    shouldDisableMonth: Y,
+    shouldDisableYear: L,
+    readOnly: U,
+    availableDays: Ce,
+    inputProps: m,
+    useNativePicker: bt,
+    enableCalendar: Dt,
+    calendarTrigger: xt,
+    numberOfMonths: _t,
+    defaultServerBreakpoint: Ct,
+    sm: Ft,
+    md: Nt,
+    lg: kt,
+    xl: Mt,
+    xxl: wt,
+    ...Fe
+  } = v, d = me && c === "single", Ne = mt(v.defaultServerBreakpoint), ke = pt(Ne, "md") && typeof $ == "number" && $ > 1 ? 1 : $, [Me, h] = w(F ?? O), [u, D] = w(!1), [we, ne] = w(P), [Ae, x] = w(""), n = F !== void 0, o = n ? F : Me, oe = X.useRef(null), ve = X.useCallback(
+    (e) => {
+      oe.current = e, typeof C == "function" ? C(e) : C && (C.current = e);
+    },
+    [C]
+  ), Pe = (e) => {
+    if (!e) return "";
+    const r = e.getFullYear(), t = String(e.getMonth() + 1).padStart(2, "0"), a = String(e.getDate()).padStart(2, "0");
+    return `${r}-${t}-${a}`;
+  }, Oe = d && o instanceof Date ? Pe(o) : "", q = Z((e, r) => e instanceof Date ? e : Array.isArray(e) && e.length > 0 ? [...e].sort((t, a) => t.getTime() - a.getTime())[0] : e && typeof e == "object" && "from" in e && e.from instanceof Date ? e.from : e && typeof e == "object" && "to" in e && e.to instanceof Date ? e.to : r ?? /* @__PURE__ */ new Date(), []), [Re, z] = w(() => q(o, j));
+  A(() => {
+    u || z(q(o, j));
+  }, [o, j, u, q]), A(() => {
+    u && ne(P);
+  }, [u, P]), A(() => {
+    n && h(F);
+  }, [F, n]);
+  const g = ee(
+    () => new Intl.DateTimeFormat(E, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric"
+    }),
+    [E]
+  ), _ = Z(
+    (e) => {
+      if (!e) return "";
+      if (e instanceof Date) return g.format(e);
+      if (Array.isArray(e)) return e.map((r) => g.format(r)).join(", ");
+      if (e.from) {
+        const r = g.format(e.from);
+        return e.to ? `${r} – ${g.format(e.to)}` : r;
+      }
+      return "";
+    },
+    [g]
+  ), G = xe ?? c === "single", se = c === "multiple" && Array.isArray(o) ? o.map((e, r) => ({
+    id: r,
+    label: l ? l(e) : _(e),
+    date: e
+  })) : [], H = ee(() => {
+    const e = [];
+    return N && (Array.isArray(N) ? e.push(...N) : e.push(N)), W && e.push({ before: W }), S && e.push({ after: S }), ie && e.push({ before: /* @__PURE__ */ new Date() }), ae && e.push({ after: /* @__PURE__ */ new Date() }), Y && e.push((r) => Y(r)), L && e.push((r) => L(r)), e;
+  }, [N, W, S, ie, ae, Y, L]), le = Z(
+    (e) => ht(e, H),
+    [H]
+  ), Te = (e, r, t, a) => {
+    if (n || h(e), i == null || i(e, r, t, a), e) {
+      const p = l ? l(e) : _(e);
+      x(p);
+    } else
+      x("");
+    G && D(!1);
+  }, Be = (e) => {
+    if (le(e)) return;
+    n || h(e), i == null || i(e, e, {}, {});
+    const r = l ? l(e) : _(e);
+    x(r), G && D(!1);
+  }, Ie = ee(() => {
+    const e = new Date(2099, 11, 31), r = g.formatToParts(e), t = [], a = [];
+    for (const s of r)
+      s.type === "day" || s.type === "month" || s.type === "year" ? t.push(s.type) : s.type === "literal" && t.length > 0 && a.length < 2 && a.push(s.value);
+    const p = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), Ue = t.map((s, k) => {
+      const T = s === "year" ? "\\d{4}" : "\\d{2}";
+      return `${k > 0 ? p(a[k - 1] ?? "") : ""}(${T})`;
+    }).join(""), qe = new RegExp(`^${Ue}$`);
+    return (s) => {
+      const k = s.match(qe);
+      if (!k) return;
+      const T = {};
+      t.forEach((ze, Ge) => {
+        T[ze] = Number(k[Ge + 1]);
+      });
+      const { day: B, month: J, year: K } = T;
+      if (B === void 0 || J === void 0 || K === void 0) return;
+      const M = new Date(K, J - 1, B);
+      if (!(isNaN(M.getTime()) || M.getFullYear() !== K || M.getMonth() !== J - 1 || M.getDate() !== B))
+        return M;
+    };
+  }, [g]), $e = (e) => {
+    x(e);
+    const t = (ye ?? (c === "single" ? Ie : () => {
+    }))(e);
+    (c === "single" && t instanceof Date || c === "multiple" && Array.isArray(t) || c === "range" && t && !Array.isArray(t) && "from" in t) && (t instanceof Date && le(t) || (n || h(t), i == null || i(t, t, {}, {}), t instanceof Date && z(t), G && D(!1)));
+  };
+  A(() => {
+    if (n) {
+      const e = l ? l(o) : _(o);
+      x(e);
+    }
+  }, [o, n, l, _]), A(() => {
+    if (!n && O) {
+      const e = l ? l(O) : _(O);
+      x(e);
+    }
+  }, []);
+  const Ve = Ke({
+    open: u,
+    onOpenChange: D,
+    placement: I === "input" ? "bottom-start" : "bottom-end",
+    middleware: [
+      lt(gt),
+      ft(),
+      ct({ padding: de }),
+      dt({
+        padding: de,
+        apply({ availableWidth: e, elements: r }) {
+          const t = r.floating;
+          t.style.width = "max-content", t.style.maxWidth = "", t.getBoundingClientRect().width > e ? (t.style.width = "min-content", t.style.maxWidth = `${e}px`) : (t.style.width = "", t.style.maxWidth = "");
+        }
+      })
+    ],
+    whileElementsMounted: st
+  }), { refs: fe, context: R, x: Ee, y: je, strategy: We } = Ve, Se = Qe(R), ce = Xe([
+    ...f && !d && I === "input" ? [Se] : [],
+    Ze(R),
+    et(R, { role: "dialog" })
+  ]), Ye = () => {
+    var r;
+    const e = (r = oe.current) == null ? void 0 : r.input;
+    if (e) {
+      if (typeof e.showPicker == "function")
+        try {
+          e.showPicker();
+          return;
+        } catch {
+        }
+      e.focus();
+    }
+  }, Le = (e) => {
+    if (!e) {
+      n || h(void 0), i == null || i(void 0, void 0, {}, {});
+      return;
+    }
+    const [r, t, a] = e.split("-").map(Number);
+    if (!r || !t || !a) return;
+    const p = new Date(r, t - 1, a);
+    Number.isNaN(p.getTime()) || (n || h(p), i == null || i(p, p, {}, {}));
+  };
+  return /* @__PURE__ */ He(Je, { children: [
+    /* @__PURE__ */ y(
+      "div",
+      {
+        className: Q(b["tedi-date-field__container"], he),
+        ...ce.getReferenceProps(),
+        ref: fe.setReference,
+        children: c === "multiple" ? /* @__PURE__ */ y(
+          at,
+          {
+            ...m,
+            id: te,
+            label: re,
+            values: se.map((e) => e.label),
+            icon: "calendar_today",
+            onIconClick: () => f && D((e) => !e),
+            iconButtonProps: f ? { "aria-expanded": u, "aria-haspopup": "dialog" } : void 0,
+            isClearable: !0,
+            required: V,
+            onChange: (e) => {
+              if (!Array.isArray(o)) return;
+              const r = se.filter((t) => e.includes(t.label)).map((t) => t.date);
+              n || h(r), i == null || i(r, {}, {}, {});
+            },
+            className: Q(b["tedi-date-field__textfield"], {
+              [b["tedi-date-field__icon--disabled"]]: !f || U
+            })
+          }
+        ) : /* @__PURE__ */ y(
+          nt,
+          {
+            ...m,
+            ref: ve,
+            id: te,
+            label: re,
+            readOnly: U,
+            value: d ? Oe : Ae,
+            placeholder: pe,
+            icon: "calendar_today",
+            isClearable: !0,
+            onIconClick: () => {
+              f && (d ? Ye() : D((e) => !e));
+            },
+            iconButtonProps: f && !d ? { "aria-expanded": u, "aria-haspopup": "dialog" } : void 0,
+            onChange: (e) => d ? Le(e) : $e(e),
+            required: V,
+            className: Q(b["tedi-date-field__textfield"], {
+              [b["tedi-date-field__textfield--disabled"]]: m == null ? void 0 : m.disabled,
+              [b["tedi-date-field__icon--disabled"]]: !f || U
+            }),
+            input: {
+              ...m == null ? void 0 : m.input,
+              ...d && { type: "date" },
+              ...f && !d && I === "input" ? { "aria-haspopup": "dialog", "aria-expanded": u } : {}
+            }
+          }
+        )
+      }
+    ),
+    f && !d && /* @__PURE__ */ y(tt, { children: u && /* @__PURE__ */ y(rt, { context: R, modal: !1, initialFocus: -1, children: /* @__PURE__ */ y(
+      "div",
+      {
+        ref: fe.setFloating,
+        ...ce.getFloatingProps({
+          style: {
+            position: We,
+            top: je ?? 0,
+            left: Ee ?? 0
+          }
+        }),
+        children: /* @__PURE__ */ y(
+          it,
+          {
+            ...Fe,
+            numberOfMonths: ke,
+            view: we,
+            selectionLevel: P,
+            currentMonth: Re,
+            setCurrentMonth: z,
+            setView: ne,
+            mode: c,
+            value: o,
+            locale: De,
+            localeCode: E,
+            showOutsideDays: ge,
+            disabledMatchers: H,
+            required: V,
+            availableDays: Ce,
+            footer: _e,
+            monthYearSelectType: be,
+            handleSelect: Te,
+            applyValue: Be,
+            className: b["tedi-date-field__calendar"]
+          }
+        )
+      }
+    ) }) })
+  ] });
+});
+yt.displayName = "DateField";
+export {
+  yt as DateField
+};

package/src/tedi/components/form/date-field/date-field.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-date-field__calendar":"tedi-date-field__calendar-56bdb86f","tedi-date-field__textfield":"tedi-date-field__textfield-c80668a6","tedi-date-field__textfield--disabled":"tedi-date-field__textfield--disabled-5f79b37d","tedi-date-field__icon--disabled":"tedi-date-field__icon--disabled-0e13b2f6","tedi-date-field__container":"tedi-date-field__container-78414b07"};exports.default=e;

package/src/tedi/components/form/date-field/date-field.module.scss.es.js

@@ -0,0 +1,10 @@
+const e = {
+  "tedi-date-field__calendar": "tedi-date-field__calendar-56bdb86f",
+  "tedi-date-field__textfield": "tedi-date-field__textfield-c80668a6",
+  "tedi-date-field__textfield--disabled": "tedi-date-field__textfield--disabled-5f79b37d",
+  "tedi-date-field__icon--disabled": "tedi-date-field__icon--disabled-0e13b2f6",
+  "tedi-date-field__container": "tedi-date-field__container-78414b07"
+};
+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.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"),h=require("react"),Y=require("../../../helpers/hooks/use-file-upload.cjs.js"),Z=require("../../base/typography/text/text.cjs.js"),k=require("../../buttons/button/button.cjs.js"),H=require("../../buttons/closing-button/closing-button.cjs.js"),G=require("../form-label/form-label.cjs.js"),ee=require("../../misc/separator/separator.cjs.js"),le=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"),ae=require("../../../providers/label-provider/use-labels.cjs.js"),T=require("../../../helpers/hooks/use-breakpoint.cjs.js"),ie=require("../../layout/grid/row.cjs.js"),I=require("../../layout/grid/col.cjs.js"),te=j=>{var N;const{getLabel:n}=ae.useLabels(),{id:se,name:w,label:_,accept:v,multiple:q,onChange:m,className:R,wrapperClassName:U,defaultFiles:S,onDelete:z,hasClearButton:M=!0,files:u,readOnly:p,disabled:s=!1,maxSize:O,validateIndividually:V=!1,size:c="default",helper:i,...$}=j,{innerFiles:y,uploadErrorHelper:t,onFileChange:D,onFileRemove:P,handleClear:F,announcement:W}=Y.useFileUpload({accept:v,maxSize:O,multiple:q,validateIndividually:V,defaultFiles:S,onChange:m,onDelete:z,files:u}),A=T.default(),E=h.useId(),d=(N=g.useOptionalInputGroup)==null?void 0:N.call(g),J=d==null?void 0:d.hasExternalLabel,x=j.id??(d==null?void 0:d.inputId)??E,L=h.useRef(null),K=f.default(a.default["tedi-file-upload"],{[a.default["tedi-file-upload--disabled"]]:s},R),b=(i==null?void 0:i.id)??(i||t?`${x}-helper`:void 0),o=h.useMemo(()=>u&&m?u:y,[u,y,m]),Q=(l,r)=>{const X=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx("li",{children:e.jsx(le.Tag,{color:l.isValid===!1?"danger":"primary",onClose:!l.isLoading&&!s&&!p?()=>P(l):void 0,isLoading:l.isLoading,"aria-label":X,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)=>Q(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(Z.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:!J&&_&&e.jsx(G.FormLabel,{id:x,label:_??"",...$,renderWithoutLabel:p,className:a.default["tedi-file-upload__label"],size:c})}),e.jsx("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:W}),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},U),children:e.jsx("div",{className:a.default["tedi-file-upload__content"],children:e.jsxs(ie.Row,{children:[e.jsx(I.Col,{className:"display-flex",children:C()}),e.jsx(I.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:K,children:[e.jsx("input",{ref:L,id:x,type:"file",name:w,accept:v,onChange:D,multiple:q,disabled:s,"aria-invalid":!!t&&t.type==="error","aria-describedby":b}),M&&o.length>0&&!s&&e.jsxs(e.Fragment,{children:[T.isBreakpointBelow(A,"md")?e.jsx(k.Button,{visualType:"neutral",iconLeft:"close",disabled:s,onClick:F,className:a.default["tedi-file-upload__button"],children:n("clear")}):e.jsx(H.ClosingButton,{onClick:F,iconSize:18,title:n("clear")}),e.jsx(ee.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=te;
+"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.es.js

@@ -12,7 +12,7 @@ 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 te, { isBreakpointBelow as oe } from "../../../helpers/hooks/use-breakpoint.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) => {
@@ -155,5 +155,6 @@ const xe = (v) => {
   ] });
 };
 export {
-  xe as FileUpload
+  xe as FileUpload,
+  xe as default
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,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"),w=require("./components/input/input.cjs.js"),A=require("./components/prefix/prefix.cjs.js"),F=require("./components/suffix/suffix.cjs.js"),u=require("./input-group.module.scss.cjs.js"),f=e.createContext(null),N=()=>{const n=e.useContext(f);if(!n)throw new Error("InputGroupContext missing");return n},T=()=>e.useContext(f),c=e.forwardRef(({className:n,addons:G=!0,helper:t,label:s,children:S,disabled:i,id:q,...j},P)=>{const x=e.useRef(null),y=e.useId(),o=q??y,[a,l]=e.useState(!1),[p,g]=e.useState(!1);e.useImperativeHandle(P,()=>({get root(){return x.current}}));const b=e.useMemo(()=>({hasPrefix:a,hasSuffix:p,disabled:i,hasExternalLabel:!!s,inputId:o,registerPrefix:()=>l(!0),unregisterPrefix:()=>l(!1),registerSuffix:()=>g(!0),unregisterSuffix:()=>g(!1)}),[o,a,p,i,s]),h=k.default(u.default["tedi-input-group"],{[u.default["tedi-input-group--addons"]]:G,[u.default["tedi-input-group--has-prefix"]]:a,[u.default["tedi-input-group--has-suffix"]]:p,[u.default["tedi-input-group--disabled"]]:i},n),v=()=>!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(f.Provider,{value:b,children:[s&&r.jsx(R.FormLabel,{...j,label:s,id:o}),r.jsx("div",{ref:x,className:h,"data-name":"tedi-input-group","aria-disabled":i,children:S}),v()]})});c.displayName="InputGroup";const d=c;d.Prefix=A.Prefix;d.Suffix=F.Suffix;d.Input=w.Input;exports.InputGroupBase=c;exports.useInputGroup=N;exports.useOptionalInputGroup=T;
+"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;

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

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

package/src/tedi/components/form/multi-value-field/multi-value-field.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),j=require("../../base/icon/icon.cjs.js"),w=require("../../buttons/closing-button/closing-button.cjs.js"),k=require("../../misc/separator/separator.cjs.js"),z=require("../../tags/tag/tag.cjs.js"),R=require("../form-label/form-label.cjs.js"),i=require("./multi-value-field.module.scss.cjs.js"),$=require("../../../providers/label-provider/use-labels.cjs.js"),c=_.forwardRef((h,O)=>{const{id:b,label:d,name:m,values:f,onChange:n,tagColor:q="primary",className:N,icon:t,onIconClick:v,iconButtonProps:s,isClearable:V=!0,required:p,disabled:u}=h,{getLabel:y}=$.useLabels(),[C,S]=_.useState(f??[]),a=f??C,g=l=>{S(l),n==null||n(l)},F=l=>{const r=a.filter((T,M)=>M!==l);g(r)},o=!u&&V&&a.length>0,I=()=>{g([])},L=()=>{if(!t)return null;const l=typeof t=="string"?{name:t}:t;return v?e.jsx("button",{...s,className:x.default(i.default["tedi-multi-value-field__icon-wrapper"],s==null?void 0:s.className),onClick:v,type:"button",children:e.jsx(j.Icon,{...l,size:18})}):e.jsx("div",{className:i.default["tedi-multi-value-field__icon-wrapper"],children:e.jsx(j.Icon,{...l,size:18})})};return e.jsxs("div",{className:x.default(i.default["tedi-multi-value-field"],N),children:[d&&e.jsx(R.FormLabel,{id:b,label:d,required:p}),e.jsxs("div",{className:i.default["tedi-multi-value-field__inner"],children:[a.length>0&&e.jsx("div",{className:i.default["tedi-multi-value-field__tags"],children:a.map((l,r)=>e.jsx(z.Tag,{color:q,onClose:u?void 0:()=>F(r),children:l},`${l}-${r}`))}),(o||t)&&e.jsxs("div",{className:i.default["tedi-multi-value-field__right-area"],children:[o&&e.jsx(w.ClosingButton,{onClick:I,title:y("clear"),className:i.default["tedi-multi-value-field__clear-button"],iconSize:18}),o&&t&&e.jsx(k.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),t&&L()]})]}),m&&e.jsx("input",{type:"hidden",name:m,value:a.length?JSON.stringify(a):"",required:p,disabled:u})]})});c.displayName="MultiValueField";exports.MultiValueField=c;exports.default=c;

package/src/tedi/components/form/multi-value-field/multi-value-field.d.ts

@@ -0,0 +1,73 @@
+import { default as React } from 'react';
+import { IconWithoutBackgroundProps } from '../../base/icon/icon';
+export interface MultiValueFieldProps {
+    /**
+     * Unique identifier for the field. Used to associate the label with the input.
+     */
+    id: string;
+    /**
+     * Optional label displayed above the field.
+     */
+    label?: string;
+    /**
+     * Name attribute for the hidden input. When provided, the field value
+     * will be submitted as a JSON string in forms.
+     */
+    name?: string;
+    /**
+     * List of values to display as tags.
+     * If provided, the component acts as a controlled component.
+     */
+    values?: string[];
+    /**
+     * Callback fired whenever the values change
+     * (e.g. removing a tag or clearing all values).
+     */
+    onChange?: (values: string[]) => void;
+    /**
+     * Visual style of the tags.
+     * @default 'primary'
+     */
+    tagColor?: 'primary' | 'secondary' | 'danger';
+    /**
+     * Additional CSS class names applied to the root element.
+     */
+    className?: string;
+    /**
+     * Optional icon displayed on the right side.
+     * Can be a string (icon name) or full icon props.
+     */
+    icon?: string | IconWithoutBackgroundProps;
+    /**
+     * Click handler for the icon.
+     * If provided, the icon will be rendered as a button.
+     */
+    onIconClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    /**
+     * Extra HTML attributes spread on the icon `<button>` element. Use this to
+     * wire ARIA state (e.g. `aria-expanded`, `aria-controls`) directly to the
+     * icon trigger when it opens a popover / dialog. Only applied when
+     * `onIconClick` is set.
+     */
+    iconButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    /**
+     * Whether the clear button should be shown when values exist.
+     * @default true
+     */
+    isClearable?: boolean;
+    /**
+     * Marks the field as required.
+     * Adds required indicator to label and applies native required validation to the hidden input.
+     */
+    required?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled?: boolean;
+}
+export interface MultiValueFieldRef {
+    input: HTMLInputElement | null;
+    wrapper: HTMLDivElement | null;
+}
+export declare const MultiValueField: React.ForwardRefExoticComponent<MultiValueFieldProps & React.RefAttributes<MultiValueFieldRef>>;
+export default MultiValueField;