@tedi-design-system/react 15.0.0 → 16.0.0-rc.10

package/src/tedi/components/buttons/info-button/info-button.d.ts

@@ -1,15 +1,16 @@
 import { default as React } from 'react';
 import { ButtonProps } from '../button/button';
-export interface InfoButtonProps extends Omit<ButtonProps, 'size' | 'children'> {
+export interface InfoButtonProps extends Omit<ButtonProps, 'size' | 'children' | 'color'> {
     /**
-     * If true, applies a small size to the InfoButton.
+     * If true, applies a small size to the InfoButton
      * @default false
      */
     isSmall?: boolean;
     /**
-     * Children elements to be rendered inside the InfoButton.
+     * Children elements to be rendered inside the InfoButton
      */
     children?: React.ReactNode;
+    color?: 'default' | 'inverted';
 }
 export declare const InfoButton: React.ForwardRefExoticComponent<Omit<InfoButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default InfoButton;

package/src/tedi/components/buttons/info-button/info-button.es.js

@@ -1,25 +1,26 @@
-import { jsx as n } from "react/jsx-runtime";
-import m from "../../../../../external/classnames/index.es.js";
+import { jsx as i } from "react/jsx-runtime";
+import r from "../../../../../external/classnames/index.es.js";
 import f from "react";
-import { Button as r } from "../button/button.es.js";
-import i from "./info-button.module.scss.es.js";
-const s = f.forwardRef(
-  ({ isSmall: t, children: o, ...a }, e) => /* @__PURE__ */ n(
-    r,
+import { Button as m } from "../button/button.es.js";
+import s from "./info-button.module.scss.es.js";
+const d = f.forwardRef(
+  ({ isSmall: o, children: a, color: t = "default", ...e }, n) => /* @__PURE__ */ i(
+    m,
     {
-      className: m(i["tedi-info-button"]),
+      className: r(s["tedi-info-button"]),
+      "data-variant": t === "inverted" ? "inverted" : void 0,
       "data-name": "info-button",
-      ...a,
-      type: "button",
-      icon: { name: "info", size: t ? 16 : 18 },
+      ...e,
+      icon: { name: "info", size: o ? 16 : 18 },
       visualType: "neutral",
-      ref: e,
-      children: o
+      color: t,
+      ref: n,
+      children: a
     }
   )
 );
-s.displayName = "InfoButton";
+d.displayName = "InfoButton";
 export {
-  s as InfoButton,
-  s as default
+  d as InfoButton,
+  d as default
 };

package/src/tedi/components/form/checkbox/checkbox.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),o=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),j=require("../../base/icon/icon.cjs.js"),S=require("../feedback-text/feedback-text.cjs.js"),T=require("../form-label/form-label.cjs.js"),e=require("./checkbox.module.scss.cjs.js"),$=require("../../layout/grid/row.cjs.js"),C=require("../../layout/grid/col.cjs.js"),N=q=>{const{id:d,label:l,value:x,className:g,disabled:b=!1,onChange:i,hideLabel:y=!1,helper:a,checked:s,defaultChecked:I,indeterminate:n,hover:R,name:v,tooltip:k,invalid:w,size:r="default",...z}=q,[m,L]=f.useState(I||!1),u=f.useRef(null),h=f.useMemo(()=>n?"mixed":i&&typeof s<"u"?s:m,[n,i,s,m]),M=t=>{typeof s>"u"&&L(t==null?void 0:t.target.checked),i==null||i(x,t==null?void 0:t.target.checked)},_=a?a.id??`${d}-helper`:void 0,F=k?`${d}-tooltip`:void 0,p=o.default(e.default["tedi-checkbox"],{[e.default["tedi-checkbox--disabled"]]:b});return c.jsxs("div",{"data-name":"check",...z,children:[c.jsxs($.Row,{gutter:0,children:[c.jsx(C.Col,{width:"auto",children:c.jsxs("div",{className:e.default["tedi-checkbox__outer-indicator-wrapper"],children:[c.jsx("input",{id:d,value:x,name:v,type:"checkbox",disabled:b,checked:h!=="mixed"?h:!1,"aria-checked":h,onChange:M,className:e.default["tedi-checkbox__input"],"aria-describedby":[_,F].filter(Boolean).join(" ")}),c.jsxs("div",{"aria-hidden":"true",onClick:()=>{var t;return(t=u.current)==null?void 0:t.click()},className:o.default(e.default["tedi-checkbox__indicator"],{[e.default["tedi-checkbox__indicator--hover"]]:R,[e.default["tedi-checkbox__indicator--indeterminate"]]:n,[e.default[`tedi-checkbox__indicator--size-${r}`]]:r,[e.default["tedi-checkbox__indicator--invalid"]]:w},g),"data-testid":"checkbox-indicator",children:[c.jsx(j.Icon,{size:r==="default"?16:18,name:"remove",className:o.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--indeterminate"])}),c.jsx(j.Icon,{size:r==="default"?16:18,name:"check",className:o.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--check"])})]})]})}),c.jsx(C.Col,{children:l&&typeof l=="string"?c.jsx(T.FormLabel,{ref:u,className:p,id:d,"data-testid":"checkbox-label",hideLabel:y,label:l,tooltip:k}):c.jsx("label",{ref:u,htmlFor:d,className:p,"data-testid":"checkbox-label",children:l})})]}),a&&c.jsx(S.FeedbackText,{id:_,...a,className:o.default(e.default["tedi-checkbox__helper"],a.className)})]})};exports.Checkbox=N;exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),u=require("react"),p=require("../../base/icon/icon.cjs.js"),$=require("../feedback-text/feedback-text.cjs.js"),B=require("../form-label/form-label.cjs.js"),e=require("./checkbox.module.scss.cjs.js"),F=require("../../layout/grid/row.cjs.js"),j=require("../../layout/grid/col.cjs.js"),q=C=>{const{id:o,label:h,value:f,className:N,disabled:x=!1,onChange:d,hideLabel:g=!1,helper:i,checked:l,defaultChecked:y,indeterminate:s,hover:I,name:R,tooltip:b,invalid:v,size:r="default",required:w,...z}=C,[k,L]=u.useState(y||!1),_=u.useRef(null),n=u.useMemo(()=>s?"mixed":d&&typeof l<"u"?l:k,[s,d,l,k]),M=t=>{typeof l>"u"&&L(t==null?void 0:t.target.checked),d==null||d(f,t==null?void 0:t.target.checked)},m=i?i.id??`${o}-helper`:void 0,S=b?`${o}-tooltip`:void 0,T=a.default(e.default["tedi-checkbox__label"],{[e.default["tedi-checkbox--disabled"]]:x});return c.jsxs("div",{"data-name":"check",...z,children:[c.jsxs(F.Row,{gutter:0,children:[c.jsx(j.Col,{width:"auto",children:c.jsxs("div",{className:e.default["tedi-checkbox__outer-indicator-wrapper"],children:[c.jsx("input",{id:o,value:f,name:R,type:"checkbox",disabled:x,checked:n!=="mixed"?n:!1,"aria-checked":n,onChange:M,className:e.default["tedi-checkbox__input"],"aria-describedby":[m,S].filter(Boolean).join(" ")}),c.jsxs("div",{"aria-hidden":"true",onClick:()=>{var t;return(t=_.current)==null?void 0:t.click()},className:a.default(e.default["tedi-checkbox__indicator"],{[e.default["tedi-checkbox__indicator--hover"]]:I,[e.default["tedi-checkbox__indicator--indeterminate"]]:s,[e.default[`tedi-checkbox__indicator--size-${r}`]]:r,[e.default["tedi-checkbox__indicator--invalid"]]:v},N),"data-testid":"checkbox-indicator",children:[c.jsx(p.Icon,{size:r==="default"?16:18,name:"remove",className:a.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--indeterminate"])}),c.jsx(p.Icon,{size:r==="default"?16:18,name:"check",className:a.default(e.default["tedi-checkbox__icon"],e.default["tedi-checkbox__icon--check"])})]})]})}),h&&c.jsx(j.Col,{children:c.jsx(B.FormLabel,{ref:_,className:T,id:o,"data-testid":"checkbox-label",hideLabel:g,label:h,tooltip:b,required:w})})]}),i&&c.jsx($.FeedbackText,{id:m,...i,className:a.default(e.default["tedi-checkbox__helper"],i.className)})]})};exports.Checkbox=q;exports.default=q;

package/src/tedi/components/form/checkbox/checkbox.es.js

@@ -1,84 +1,85 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import d from "../../../../../external/classnames/index.es.js";
-import b from "react";
-import { Icon as C } from "../../base/icon/icon.es.js";
-import { FeedbackText as M } from "../feedback-text/feedback-text.es.js";
+import m from "react";
+import { Icon as N } from "../../base/icon/icon.es.js";
+import { FeedbackText as q } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as E } from "../form-label/form-label.es.js";
 import e from "./checkbox.module.scss.es.js";
 import { Row as H } from "../../layout/grid/row.es.js";
-import { Col as g } from "../../layout/grid/col.es.js";
-const P = (y) => {
+import { Col as C } from "../../layout/grid/col.es.js";
+const Q = (g) => {
   const {
-    id: t,
-    label: r,
-    value: f,
-    className: z,
-    disabled: _ = !1,
-    onChange: o,
-    hideLabel: I = !1,
-    helper: a,
-    checked: l,
-    defaultChecked: R,
-    indeterminate: h,
-    hover: j,
-    name: w,
-    tooltip: p,
-    invalid: F,
-    size: s = "default",
-    ...L
-  } = y, [x, $] = b.useState(R || !1), m = b.useRef(null), k = b.useMemo(() => h ? "mixed" : o && typeof l < "u" ? l : x, [h, o, l, x]), v = (c) => {
-    typeof l > "u" && $(c == null ? void 0 : c.target.checked), o == null || o(f, c == null ? void 0 : c.target.checked);
-  }, u = a ? a.id ?? `${t}-helper` : void 0, B = p ? `${t}-tooltip` : void 0, N = d(e["tedi-checkbox"], { [e["tedi-checkbox--disabled"]]: _ });
-  return /* @__PURE__ */ n("div", { "data-name": "check", ...L, children: [
-    /* @__PURE__ */ n(H, { gutter: 0, children: [
-      /* @__PURE__ */ i(g, { width: "auto", children: /* @__PURE__ */ n("div", { className: e["tedi-checkbox__outer-indicator-wrapper"], children: [
+    id: a,
+    label: k,
+    value: b,
+    className: y,
+    disabled: f = !1,
+    onChange: t,
+    hideLabel: z = !1,
+    helper: o,
+    checked: r,
+    defaultChecked: I,
+    indeterminate: n,
+    hover: R,
+    name: j,
+    tooltip: _,
+    invalid: w,
+    size: l = "default",
+    required: L,
+    ...$
+  } = g, [p, v] = m.useState(I || !1), x = m.useRef(null), h = m.useMemo(() => n ? "mixed" : t && typeof r < "u" ? r : p, [n, t, r, p]), B = (c) => {
+    typeof r > "u" && v(c == null ? void 0 : c.target.checked), t == null || t(b, c == null ? void 0 : c.target.checked);
+  }, u = o ? o.id ?? `${a}-helper` : void 0, F = _ ? `${a}-tooltip` : void 0, M = d(e["tedi-checkbox__label"], { [e["tedi-checkbox--disabled"]]: f });
+  return /* @__PURE__ */ s("div", { "data-name": "check", ...$, children: [
+    /* @__PURE__ */ s(H, { gutter: 0, children: [
+      /* @__PURE__ */ i(C, { width: "auto", children: /* @__PURE__ */ s("div", { className: e["tedi-checkbox__outer-indicator-wrapper"], children: [
         /* @__PURE__ */ i(
           "input",
           {
-            id: t,
-            value: f,
-            name: w,
+            id: a,
+            value: b,
+            name: j,
             type: "checkbox",
-            disabled: _,
-            checked: k !== "mixed" ? k : !1,
-            "aria-checked": k,
-            onChange: v,
+            disabled: f,
+            checked: h !== "mixed" ? h : !1,
+            "aria-checked": h,
+            onChange: B,
             className: e["tedi-checkbox__input"],
-            "aria-describedby": [u, B].filter(Boolean).join(" ")
+            "aria-describedby": [u, F].filter(Boolean).join(" ")
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ s(
           "div",
           {
             "aria-hidden": "true",
             onClick: () => {
               var c;
-              return (c = m.current) == null ? void 0 : c.click();
+              return (c = x.current) == null ? void 0 : c.click();
             },
             className: d(
               e["tedi-checkbox__indicator"],
               {
-                [e["tedi-checkbox__indicator--hover"]]: j,
-                [e["tedi-checkbox__indicator--indeterminate"]]: h,
-                [e[`tedi-checkbox__indicator--size-${s}`]]: s,
-                [e["tedi-checkbox__indicator--invalid"]]: F
+                [e["tedi-checkbox__indicator--hover"]]: R,
+                [e["tedi-checkbox__indicator--indeterminate"]]: n,
+                [e[`tedi-checkbox__indicator--size-${l}`]]: l,
+                [e["tedi-checkbox__indicator--invalid"]]: w
               },
-              z
+              y
             ),
             "data-testid": "checkbox-indicator",
             children: [
               /* @__PURE__ */ i(
-                C,
+                N,
                 {
-                  size: s === "default" ? 16 : 18,
+                  size: l === "default" ? 16 : 18,
                   name: "remove",
                   className: d(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--indeterminate"])
                 }
               ),
               /* @__PURE__ */ i(
-                C,
+                N,
                 {
-                  size: s === "default" ? 16 : 18,
+                  size: l === "default" ? 16 : 18,
                   name: "check",
                   className: d(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--check"])
                 }
@@ -87,23 +88,24 @@ const P = (y) => {
           }
         )
       ] }) }),
-      /* @__PURE__ */ i(g, { children: r && typeof r == "string" ? /* @__PURE__ */ i(
+      k && /* @__PURE__ */ i(C, { children: /* @__PURE__ */ i(
         E,
         {
-          ref: m,
-          className: N,
-          id: t,
+          ref: x,
+          className: M,
+          id: a,
           "data-testid": "checkbox-label",
-          hideLabel: I,
-          label: r,
-          tooltip: p
+          hideLabel: z,
+          label: k,
+          tooltip: _,
+          required: L
         }
-      ) : /* @__PURE__ */ i("label", { ref: m, htmlFor: t, className: N, "data-testid": "checkbox-label", children: r }) })
+      ) })
     ] }),
-    a && /* @__PURE__ */ i(M, { id: u, ...a, className: d(e["tedi-checkbox__helper"], a.className) })
+    o && /* @__PURE__ */ i(q, { id: u, ...o, className: d(e["tedi-checkbox__helper"], o.className) })
   ] });
 };
 export {
-  P as Checkbox,
-  P as default
+  Q as Checkbox,
+  Q as default
 };

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("../../../../../../../external/classnames/index.cjs.js"),E=require("react"),F=require("../../../checkbox/checkbox.cjs.js"),L=require("../../../feedback-text/feedback-text.cjs.js"),R=require("../../../radio/radio.cjs.js"),S=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),H=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),O=require("../../../../layout/grid/col.cjs.js"),j=r=>{const{getCurrentBreakpointProps:q}=H.useBreakpointProps(r.defaultServerBreakpoint),{id:u,label:k,value:o,className:v,direction:m,disabled:l,colProps:y=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:N,helper:a,tooltip:B,type:s="radio",variant:n="default",color:$="primary",layout:G,showIndicator:C,justifyContent:x="start"}=q(r),{currentValue:d,name:b,onChange:f,inputType:I}=E.useContext(S.ChoiceGroupContext),i=Array.isArray(d)?d.includes(o):o===d,P=d===void 0?r.defaultChecked:i,g=(c,_)=>{f==null||f(c,_),p==null||p(c,_)},M=h.default(e.default[`tedi-choice-group-item--${G==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),T=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${n}`],e.default[`tedi-choice-group-item--${n}-${$}`],C&&e.default["tedi-choice-group-item--indicator"],s&&e.default[`tedi-choice-group-item--${s}`],{[e.default["tedi-choice-group-item--disabled"]]:l},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),w=s==="radio"?R.Radio:F.Checkbox,A=c=>{c.target.tagName!=="LABEL"&&!l&&n==="card"&&g(o,!i)};return t.jsx(O.Col,{...y,className:M,children:t.jsx("div",{className:T,onClick:A,children:n==="default"||C?t.jsx(w,{id:u,label:k,value:o,name:b,className:h.default(e.default["tedi-choice-group-item__indicator"],v),disabled:l,checked:i,defaultChecked:P,onChange:g,hideLabel:N,helper:a?{...a,className:h.default(e.default["tedi-choice-group-item__feedback-text"],a.className)}:void 0,tooltip:B,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:u,value:o,name:b,type:I,disabled:l,checked:i,defaultChecked:d===void 0?r.defaultChecked:void 0,onChange:c=>g(o,c.target.checked),className:e.default["tedi-choice-group-item__input"],role:s==="radio"?"radio":void 0,"aria-checked":i}),t.jsxs("label",{htmlFor:u,className:e.default["tedi-choice-group-item__label"],children:[k,a&&t.jsx(L.FeedbackText,{...a,id:u,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=j;exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("../../../../../../../external/classnames/index.cjs.js"),R=require("react"),S=require("../../../checkbox/checkbox.cjs.js"),A=require("../../../feedback-text/feedback-text.cjs.js"),H=require("../../../radio/radio.cjs.js"),L=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),O=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../../layout/grid/col.cjs.js"),y=l=>{const{getCurrentBreakpointProps:q}=O.useBreakpointProps(l.defaultServerBreakpoint),{id:c,label:k,value:a,className:v,direction:m,disabled:n,colProps:N=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:B,helper:r,tooltip:$,type:d="radio",variant:s="default",color:G="primary",layout:I,showIndicator:C,justifyContent:x="start"}=q(l),{currentValue:u,name:b,onChange:f,inputType:P}=R.useContext(L.ChoiceGroupContext),i=Array.isArray(u)?u.includes(a):a===u,M=u===void 0?l.defaultChecked:i,_=(o,g)=>{f==null||f(o,g),p==null||p(o,g)},T=h.default(e.default[`tedi-choice-group-item--${I==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),w=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${s}`],e.default[`tedi-choice-group-item--${s}-${G}`],C&&e.default["tedi-choice-group-item--indicator"],d&&e.default[`tedi-choice-group-item--${d}`],{[e.default["tedi-choice-group-item--disabled"]]:n},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),E=d==="radio"?H.Radio:S.Checkbox,F=o=>{var j;n||s!=="card"||o.target.closest("input, label")||(j=document.getElementById(c))==null||j.click()};return t.jsx(V.Col,{...N,className:T,children:t.jsx("div",{className:w,onClick:F,role:d,"aria-checked":i,children:s==="default"||C?t.jsx(E,{id:c,label:k,value:a,name:b,className:h.default(e.default["tedi-choice-group-item__indicator"],v),disabled:n,checked:i,defaultChecked:M,onChange:_,hideLabel:B,helper:r?{...r,className:h.default(e.default["tedi-choice-group-item__feedback-text"],r.className)}:void 0,tooltip:$,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:c,value:a,name:b,type:P,disabled:n,checked:i,defaultChecked:u===void 0?l.defaultChecked:void 0,onChange:o=>{_(a,o.target.checked)},className:e.default["tedi-choice-group-item__input"],role:d==="radio"?"radio":void 0,"aria-checked":i}),t.jsxs("label",{htmlFor:c,className:e.default["tedi-choice-group-item__label"],children:[k,r&&t.jsx(A.FeedbackText,{...r,id:c,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=y;exports.default=y;

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.es.js

@@ -1,91 +1,94 @@
-import { jsx as a, jsxs as y, Fragment as L } from "react/jsx-runtime";
+import { jsx as n, jsxs as x, Fragment as M } from "react/jsx-runtime";
 import u from "../../../../../../../external/classnames/index.es.js";
-import P from "react";
-import { Checkbox as M } from "../../../checkbox/checkbox.es.js";
-import { FeedbackText as R } from "../../../feedback-text/feedback-text.es.js";
-import { Radio as T } from "../../../radio/radio.es.js";
-import { ChoiceGroupContext as H } from "../../choice-group-context.es.js";
+import R from "react";
+import { Checkbox as T } from "../../../checkbox/checkbox.es.js";
+import { FeedbackText as H } from "../../../feedback-text/feedback-text.es.js";
+import { Radio as L } from "../../../radio/radio.es.js";
+import { ChoiceGroupContext as S } from "../../choice-group-context.es.js";
 import e from "./choice-group-item.module.scss.es.js";
-import { useBreakpointProps as S } from "../../../../../helpers/hooks/use-breakpoint-props.es.js";
-import { Col as V } from "../../../../layout/grid/col.es.js";
-const ee = (d) => {
-  const { getCurrentBreakpointProps: x } = S(d.defaultServerBreakpoint), {
-    id: n,
-    label: C,
-    value: o,
-    className: v,
+import { useBreakpointProps as V } from "../../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { Col as q } from "../../../../layout/grid/col.es.js";
+const te = (l) => {
+  const { getCurrentBreakpointProps: v } = V(l.defaultServerBreakpoint), {
+    id: i,
+    label: k,
+    value: c,
+    className: $,
     direction: p,
     disabled: m,
-    colProps: $ = p === "column" ? { width: 12 } : { width: "auto" },
+    colProps: B = p === "column" ? { width: 12 } : { width: "auto" },
     onChange: h,
-    hideLabel: B,
-    helper: c,
+    hideLabel: I,
+    helper: r,
     tooltip: j,
-    type: s = "radio",
-    variant: l = "default",
-    color: I = "primary",
-    layout: w,
-    showIndicator: k,
+    type: a = "radio",
+    variant: s = "default",
+    color: w = "primary",
+    layout: E,
+    showIndicator: C,
     justifyContent: _ = "start"
-  } = x(d), { currentValue: r, name: N, onChange: f, inputType: A } = P.useContext(H), t = Array.isArray(r) ? r.includes(o) : o === r, E = r === void 0 ? d.defaultChecked : t, g = (i, b) => {
-    f == null || f(i, b), h == null || h(i, b);
-  }, F = u(
-    e[`tedi-choice-group-item--${w === "separated" ? "separated" : "segmented"}`],
+  } = v(l), { currentValue: d, name: b, onChange: f, inputType: F } = R.useContext(S), t = Array.isArray(d) ? d.includes(c) : c === d, G = d === void 0 ? l.defaultChecked : t, y = (o, g) => {
+    f == null || f(o, g), h == null || h(o, g);
+  }, P = u(
+    e[`tedi-choice-group-item--${E === "separated" ? "separated" : "segmented"}`],
     p && e[`tedi-choice-group-item--${p}`]
-  ), G = u(
+  ), A = u(
     e["tedi-choice-group-item"],
-    e[`tedi-choice-group-item--${l}`],
-    e[`tedi-choice-group-item--${l}-${I}`],
-    k && e["tedi-choice-group-item--indicator"],
-    s && e[`tedi-choice-group-item--${s}`],
+    e[`tedi-choice-group-item--${s}`],
+    e[`tedi-choice-group-item--${s}-${w}`],
+    C && e["tedi-choice-group-item--indicator"],
+    a && e[`tedi-choice-group-item--${a}`],
     { [e["tedi-choice-group-item--disabled"]]: m },
     { [e["tedi-choice-group-item--checked"]]: t },
     { [`justify-content-${_}`]: _ }
   );
-  return /* @__PURE__ */ a(V, { ...$, className: F, children: /* @__PURE__ */ a("div", { className: G, onClick: (i) => {
-    i.target.tagName !== "LABEL" && !m && l === "card" && g(o, !t);
-  }, children: l === "default" || k ? /* @__PURE__ */ a(
-    s === "radio" ? T : M,
+  return /* @__PURE__ */ n(q, { ...B, className: P, children: /* @__PURE__ */ n("div", { className: A, onClick: (o) => {
+    var N;
+    m || s !== "card" || o.target.closest("input, label") || (N = document.getElementById(i)) == null || N.click();
+  }, role: a, "aria-checked": t, children: s === "default" || C ? /* @__PURE__ */ n(
+    a === "radio" ? L : T,
     {
-      id: n,
-      label: C,
-      value: o,
-      name: N,
-      className: u(e["tedi-choice-group-item__indicator"], v),
+      id: i,
+      label: k,
+      value: c,
+      name: b,
+      className: u(e["tedi-choice-group-item__indicator"], $),
       disabled: m,
       checked: t,
-      defaultChecked: E,
-      onChange: g,
-      hideLabel: B,
-      helper: c ? { ...c, className: u(e["tedi-choice-group-item__feedback-text"], c.className) } : void 0,
+      defaultChecked: G,
+      onChange: y,
+      hideLabel: I,
+      helper: r ? { ...r, className: u(e["tedi-choice-group-item__feedback-text"], r.className) } : void 0,
       tooltip: j,
       "data-testid": "choice-group-item-indicator",
       "aria-checked": t
     }
-  ) : /* @__PURE__ */ y(L, { children: [
-    /* @__PURE__ */ a(
+  ) : /* @__PURE__ */ x(M, { children: [
+    /* @__PURE__ */ n(
       "input",
       {
-        id: n,
-        value: o,
-        name: N,
-        type: A,
+        id: i,
+        value: c,
+        name: b,
+        type: F,
         disabled: m,
         checked: t,
-        defaultChecked: r === void 0 ? d.defaultChecked : void 0,
-        onChange: (i) => g(o, i.target.checked),
+        defaultChecked: d === void 0 ? l.defaultChecked : void 0,
+        onChange: (o) => {
+          y(c, o.target.checked);
+        },
         className: e["tedi-choice-group-item__input"],
-        role: s === "radio" ? "radio" : void 0,
+        role: a === "radio" ? "radio" : void 0,
         "aria-checked": t
       }
     ),
-    /* @__PURE__ */ y("label", { htmlFor: n, className: e["tedi-choice-group-item__label"], children: [
-      C,
-      c && /* @__PURE__ */ a(R, { ...c, id: n, className: e["tedi-choice-group-item__feedback-text"] })
+    /* @__PURE__ */ x("label", { htmlFor: i, className: e["tedi-choice-group-item__label"], children: [
+      k,
+      r && /* @__PURE__ */ n(H, { ...r, id: i, className: e["tedi-choice-group-item__feedback-text"] })
     ] })
   ] }) }) });
 };
 export {
-  ee as ChoiceGroupItem,
-  ee as default
+  te as ChoiceGroupItem,
+  te as default
 };

package/src/tedi/components/form/choice-input.types.d.ts

@@ -7,7 +7,7 @@ export interface ChoiceInputProps {
     /**
      * Label text
      */
-    label: string | React.ReactNode;
+    label: React.ReactNode;
     /**
      * Additional classes.
      */
@@ -60,4 +60,8 @@ export interface ChoiceInputProps {
      * Whether the input is marked as invalid.
      */
     invalid?: boolean;
+    /**
+     * Whether the input is marked as required.
+     */
+    required?: boolean;
 }

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),y=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("../../cards/card/card.cjs.js"),L=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"),S=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}=o,{innerFiles:d,uploadErrorHelper:n,onFileChange:j,onFileRemove:g}=C.useFileUpload(o),{getRootProps:v,getInputProps:_,isDragActive:q}=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}})}}),h=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"]]:q},b),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:h,children:[e.jsx("input",{..._(),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,{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(I.Card,{background:l.isValid===!1?"danger-primary":"tertiary",borderless:!0,className:t.default["tedi-file-dropzone__file-item"],children:e.jsx(L.CardContent,{padding:.5,children:e.jsxs(S.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,{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=p;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),y=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("../../cards/card/card.cjs.js"),L=require("../../cards/card/card-content/card-content.cjs.js"),S=require("../../../providers/label-provider/use-labels.cjs.js"),m=require("../../content/list/list.cjs.js"),k=require("../../layout/grid/row.cjs.js"),x=require("../../layout/grid/col.cjs.js"),p=o=>{const{getLabel:s}=S.useLabels(),{label:z=s("file-dropzone.label"),className:b,disabled:a=!1,helper:i,id:c}=o,{innerFiles:d,uploadErrorHelper:n,onFileChange:j,onFileRemove:g}=C.useFileUpload(o),{getRootProps:v,getInputProps:_,isDragActive:q}=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}})}}),h=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"]]:q},b),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:h,children:[e.jsx("input",{..._(),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,{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(I.Card,{background:l.isValid===!1?"danger-primary":"tertiary",borderless:!0,className:t.default["tedi-file-dropzone__file-item"],children:e.jsx(L.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=p;exports.default=p;

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

@@ -5,16 +5,16 @@ import { useFileUpload as D } from "../../../helpers/hooks/use-file-upload.es.js
 import { Icon as f } from "../../base/icon/icon.es.js";
 import { ClosingButton as L } from "../../buttons/closing-button/closing-button.es.js";
 import { FeedbackText as p } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as k } from "../form-label/form-label.es.js";
+import { FormLabel as S } from "../form-label/form-label.es.js";
 import o from "./file-dropzone.module.scss.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 S } from "../../../providers/label-provider/use-labels.es.js";
+import { Card as k } from "../../cards/card/card.es.js";
+import { CardContent as w } from "../../cards/card/card-content/card-content.es.js";
+import { useLabels as R } from "../../../providers/label-provider/use-labels.es.js";
 import { List as z } from "../../content/list/list.es.js";
 import { Row as j } from "../../layout/grid/row.es.js";
 import { Col as b } from "../../layout/grid/col.es.js";
 const Y = (a) => {
-  const { getLabel: n } = S(), { label: g = n("file-dropzone.label"), className: v, disabled: r = !1, helper: i, id: c } = a, { innerFiles: s, uploadErrorHelper: l, onFileChange: h, onFileRemove: u } = D(a), { getRootProps: y, getInputProps: _, isDragActive: N } = I({
+  const { getLabel: n } = R(), { label: g = n("file-dropzone.label"), className: v, disabled: r = !1, helper: i, id: c } = a, { innerFiles: s, uploadErrorHelper: l, onFileChange: h, onFileRemove: u } = D(a), { getRootProps: y, getInputProps: _, isDragActive: N } = I({
     disabled: r,
     accept: a.accept ? { "application/*": [a.accept] } : void 0,
     multiple: a.multiple,
@@ -47,7 +47,7 @@ const Y = (a) => {
           /* @__PURE__ */ e("input", { ..._(), disabled: r }),
           /* @__PURE__ */ d("div", { className: o["tedi-file-dropzone__label-wrapper"], children: [
             /* @__PURE__ */ e(f, { color: r ? "tertiary" : "secondary", size: 24, name: "attach_file" }),
-            /* @__PURE__ */ e(k, { id: c, label: g, className: o["tedi-file-dropzone__label"] })
+            /* @__PURE__ */ e(S, { id: c, label: g, className: o["tedi-file-dropzone__label"] })
           ] })
         ]
       }
@@ -60,18 +60,25 @@ const Y = (a) => {
         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(
-          w,
+          k,
           {
             background: t.isValid === !1 ? "danger-primary" : "tertiary",
             borderless: !0,
             className: o["tedi-file-dropzone__file-item"],
-            children: /* @__PURE__ */ e(R, { padding: 0.5, children: /* @__PURE__ */ d(j, { alignItems: "center", children: [
+            children: /* @__PURE__ */ e(w, { padding: 0.5, children: /* @__PURE__ */ d(j, { 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(L, { title: n("remove") + " " + t.name, onClick: () => u(t) }) })
+              /* @__PURE__ */ e(b, { width: "auto", children: /* @__PURE__ */ e(
+                L,
+                {
+                  iconSize: 18,
+                  title: n("remove") + " " + t.name,
+                  onClick: () => u(t)
+                }
+              ) })
             ] }) })
           }
         ) }, t.id || t.name))

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

@@ -1 +1 @@
-"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"),P=require("react"),W=require("../../../helpers/hooks/use-file-upload.cjs.js"),A=require("../../base/typography/text/text.cjs.js"),v=require("../../buttons/button/button.cjs.js"),E=require("../../buttons/closing-button/closing-button.cjs.js"),G=require("../form-label/form-label.cjs.js"),J=require("../../misc/separator/separator.cjs.js"),K=require("../../tags/tag/tag.cjs.js"),y=require("../feedback-text/feedback-text.cjs.js"),a=require("./file-upload.module.scss.cjs.js"),Q=require("../../../providers/label-provider/use-labels.cjs.js"),F=require("../../../helpers/hooks/use-breakpoint.cjs.js"),X=require("../../layout/grid/row.cjs.js"),q=require("../../layout/grid/col.cjs.js"),L=B=>{const{getLabel:d}=Q.useLabels(),{id:r,name:C,accept:g,multiple:_,onChange:m,className:N,defaultFiles:k,onDelete:T,hasClearButton:U=!0,files:u,readOnly:p,disabled:s=!1,maxSize:$,validateIndividually:w=!1,size:c="default",helper:i,...M}=B,{innerFiles:b,uploadErrorHelper:t,onFileChange:R,onFileRemove:S,handleClear:h,announcement:z}=W.useFileUpload({accept:g,maxSize:$,multiple:_,validateIndividually:w,defaultFiles:k,onChange:m,onDelete:T,files:u}),I=F.useBreakpoint(),V=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,n=P.useMemo(()=>u&&m?u:b,[u,b,m]),O=(l,o)=>{const D=l.isValid===!1?`${l.name} (${d("file-upload.failed")})`:l.name;return e.jsx("li",{children:e.jsx(K.Tag,{color:l.isValid===!1?"danger":"primary",onClose:!l.isLoading&&!s&&!p?()=>S(l):void 0,isLoading:l.isLoading,"aria-label":D,children:l.name})},o)},j=()=>{if(n.length>1)return e.jsx("ul",{className:f.default(a.default["tedi-file-upload__items"],a.default["tedi-file-upload__truncate-list"]),children:n.map((l,o)=>O(l,o))});if(n.length===1){const l=n[0],o=l.isValid===!1?`${l.name} (${d("file-upload.failed")})`:l.name;return e.jsx(A.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(G.FormLabel,{id:r,...M,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?j():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(X.Row,{children:[e.jsx(q.Col,{className:"display-flex",children:j()}),e.jsx(q.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:V,children:[e.jsx("input",{id:r,type:"file",name:C,accept:g,onChange:R,multiple:_,disabled:s,"aria-invalid":!!t&&t.type==="error","aria-describedby":x}),U&&n.length>0&&!s&&e.jsxs(e.Fragment,{children:[F.isBreakpointBelow(I,"md")?e.jsx(v.Button,{visualType:"neutral",iconLeft:"close",disabled:s,onClick:h,className:a.default["tedi-file-upload__button"],children:d("clear")}):e.jsx(E.ClosingButton,{onClick:h,size:"medium",title:d("clear")}),e.jsx(J.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:d("file-upload.add")})]})})]})})}),i?e.jsx(y.FeedbackText,{...i,id:x}):t?e.jsx(y.FeedbackText,{...t,id:x}):null]})};exports.FileUpload=L;exports.default=L;
+"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"),P=require("react"),W=require("../../../helpers/hooks/use-file-upload.cjs.js"),A=require("../../base/typography/text/text.cjs.js"),v=require("../../buttons/button/button.cjs.js"),E=require("../../buttons/closing-button/closing-button.cjs.js"),G=require("../form-label/form-label.cjs.js"),J=require("../../misc/separator/separator.cjs.js"),K=require("../../tags/tag/tag.cjs.js"),y=require("../feedback-text/feedback-text.cjs.js"),a=require("./file-upload.module.scss.cjs.js"),Q=require("../../../providers/label-provider/use-labels.cjs.js"),F=require("../../../helpers/hooks/use-breakpoint.cjs.js"),X=require("../../layout/grid/row.cjs.js"),q=require("../../layout/grid/col.cjs.js"),L=B=>{const{getLabel:n}=Q.useLabels(),{id:r,name:C,accept:g,multiple:_,onChange:p,className:N,defaultFiles:k,onDelete:T,hasClearButton:U=!0,files:u,readOnly:m,disabled:s=!1,maxSize:$,validateIndividually:w=!1,size:c="default",helper:i,...S}=B,{innerFiles:b,uploadErrorHelper:t,onFileChange:M,onFileRemove:R,handleClear:h,announcement:z}=W.useFileUpload({accept:g,maxSize:$,multiple:_,validateIndividually:w,defaultFiles:k,onChange:p,onDelete:T,files:u}),I=F.useBreakpoint(),V=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=P.useMemo(()=>u&&p?u:b,[u,b,p]),O=(l,o)=>{const D=l.isValid===!1?`${l.name} (${n("file-upload.failed")})`:l.name;return e.jsx("li",{children:e.jsx(K.Tag,{color:l.isValid===!1?"danger":"primary",onClose:!l.isLoading&&!s&&!m?()=>R(l):void 0,isLoading:l.isLoading,"aria-label":D,children:l.name})},o)},j=()=>{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)=>O(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(A.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(G.FormLabel,{id:r,...S,renderWithoutLabel:m,className:a.default["tedi-file-upload__label"],size:c})}),e.jsx("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:z}),m?j():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(X.Row,{children:[e.jsx(q.Col,{className:"display-flex",children:j()}),e.jsx(q.Col,{xs:12,md:"auto",children:e.jsxs("div",{className:V,children:[e.jsx("input",{id:r,type:"file",name:C,accept:g,onChange:M,multiple:_,disabled:s,"aria-invalid":!!t&&t.type==="error","aria-describedby":x}),U&&d.length>0&&!s&&e.jsxs(e.Fragment,{children:[F.isBreakpointBelow(I,"md")?e.jsx(v.Button,{visualType:"neutral",iconLeft:"close",disabled:s,onClick:h,className:a.default["tedi-file-upload__button"],children:n("clear")}):e.jsx(E.ClosingButton,{onClick:h,iconSize:18,title:n("clear")}),e.jsx(J.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=L;exports.default=L;