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

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

@@ -25,15 +25,15 @@ const he = (B) => {
     defaultFiles: T,
     onDelete: w,
     hasClearButton: z = !0,
-    files: m,
+    files: c,
     readOnly: h,
     disabled: o = !1,
     maxSize: I,
     validateIndividually: R = !1,
-    size: c = "default",
+    size: m = "default",
     helper: a,
-    ...U
-  } = B, { innerFiles: v, uploadErrorHelper: t, onFileChange: V, onFileRemove: j, handleClear: y, announcement: M } = A({
+    ...S
+  } = B, { innerFiles: v, uploadErrorHelper: t, onFileChange: U, onFileRemove: V, handleClear: y, announcement: j } = A({
     accept: g,
     maxSize: I,
     multiple: b,
@@ -41,14 +41,14 @@ const he = (B) => {
     defaultFiles: T,
     onChange: f,
     onDelete: w,
-    files: m
-  }), S = X(), D = p(l["tedi-file-upload"], { [l["tedi-file-upload--disabled"]]: o }, $), _ = a ? (a == null ? void 0 : a.id) ?? `${s}-helper` : void 0, d = q.useMemo(() => m && f ? m : v, [m, v, f]), O = (e, r) => {
+    files: c
+  }), M = X(), D = p(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,
       {
         color: e.isValid === !1 ? "danger" : "primary",
-        onClose: !e.isLoading && !o && !h ? () => j(e) : void 0,
+        onClose: !e.isLoading && !o && !h ? () => V(e) : void 0,
         isLoading: e.isLoading,
         "aria-label": W,
         children: e.name
@@ -75,13 +75,13 @@ const he = (B) => {
       J,
       {
         id: s,
-        ...U,
+        ...S,
         renderWithoutLabel: h,
         className: l["tedi-file-upload__label"],
-        size: c
+        size: m
       }
     ) }),
-    /* @__PURE__ */ i("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: M }),
+    /* @__PURE__ */ i("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: j }),
     h ? F() : /* @__PURE__ */ i(
       "div",
       {
@@ -92,7 +92,7 @@ const he = (B) => {
             [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"
           },
-          { [l[`tedi-file-upload__container--${c}`]]: c }
+          { [l[`tedi-file-upload__container--${m}`]]: m }
         ),
         children: /* @__PURE__ */ i("div", { className: l["tedi-file-upload__content"], children: /* @__PURE__ */ u(Z, { children: [
           /* @__PURE__ */ i(x, { className: "display-flex", children: F() }),
@@ -104,7 +104,7 @@ const he = (B) => {
                 type: "file",
                 name: k,
                 accept: g,
-                onChange: V,
+                onChange: U,
                 multiple: b,
                 disabled: o,
                 "aria-invalid": !!t && t.type === "error",
@@ -112,7 +112,7 @@ const he = (B) => {
               }
             ),
             z && d.length > 0 && !o && /* @__PURE__ */ u(N, { children: [
-              Y(S, "md") ? /* @__PURE__ */ i(
+              Y(M, "md") ? /* @__PURE__ */ i(
                 C,
                 {
                   visualType: "neutral",
@@ -122,7 +122,7 @@ const he = (B) => {
                   className: l["tedi-file-upload__button"],
                   children: n("clear")
                 }
-              ) : /* @__PURE__ */ i(G, { onClick: y, size: "medium", title: n("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__ */ i(
@@ -136,7 +136,7 @@ const he = (B) => {
                   return (e = document.getElementById(s)) == null ? void 0 : e.click();
                 },
                 className: l["tedi-file-upload__button"],
-                size: c,
+                size: m,
                 children: n("file-upload.add")
               }
             )

package/src/tedi/components/form/select/components/select-clear-indicator.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../buttons/closing-button/closing-button.cjs.js"),n=require("../../../misc/separator/separator.cjs.js"),o=require("../select.module.scss.cjs.js"),c=require("../../../../providers/label-provider/use-labels.cjs.js"),i=({isClearIndicatorVisible:r,innerProps:{ref:t,...s}})=>{const{getLabel:a}=c.useLabels();return r?e.jsxs(e.Fragment,{children:[e.jsx(l.ClosingButton,{tabIndex:0,ref:t,...s,children:a("clear")}),e.jsx(n.Separator,{color:"primary",axis:"vertical",className:o.default["tedi-select__separator"]})]}):null};exports.SelectClearIndicator=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../buttons/closing-button/closing-button.cjs.js"),a=require("../../../misc/separator/separator.cjs.js"),l=require("../select.module.scss.cjs.js"),c=require("../../../../providers/label-provider/use-labels.cjs.js"),i=({isClearIndicatorVisible:r,innerProps:{ref:t,...s}})=>{const{getLabel:n}=c.useLabels();return r?e.jsxs(e.Fragment,{children:[e.jsx(o.ClosingButton,{tabIndex:0,ref:t,iconSize:18,...s,children:n("clear")}),e.jsx(a.Separator,{color:"primary",axis:"vertical",className:l.default["tedi-select__separator"]})]}):null};exports.SelectClearIndicator=i;

package/src/tedi/components/form/select/components/select-clear-indicator.es.js

@@ -1,16 +1,16 @@
-import { jsxs as s, Fragment as l, jsx as r } from "react/jsx-runtime";
-import { ClosingButton as i } from "../../../buttons/closing-button/closing-button.es.js";
-import { Separator as m } from "../../../misc/separator/separator.es.js";
-import n from "../select.module.scss.es.js";
+import { jsxs as i, Fragment as s, jsx as r } from "react/jsx-runtime";
+import { ClosingButton as l } from "../../../buttons/closing-button/closing-button.es.js";
+import { Separator as n } from "../../../misc/separator/separator.es.js";
+import m from "../select.module.scss.es.js";
 import { useLabels as c } from "../../../../providers/label-provider/use-labels.es.js";
 const b = ({
   isClearIndicatorVisible: e,
-  innerProps: { ref: t, ...o }
+  innerProps: { ref: o, ...t }
 }) => {
   const { getLabel: a } = c();
-  return e ? /* @__PURE__ */ s(l, { children: [
-    /* @__PURE__ */ r(i, { tabIndex: 0, ref: t, ...o, children: a("clear") }),
-    /* @__PURE__ */ r(m, { color: "primary", axis: "vertical", className: n["tedi-select__separator"] })
+  return e ? /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ r(l, { tabIndex: 0, ref: o, iconSize: 18, ...t, children: a("clear") }),
+    /* @__PURE__ */ r(n, { color: "primary", axis: "vertical", className: m["tedi-select__separator"] })
   ] }) : null;
 };
 export {

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../../buttons/closing-button/closing-button.cjs.js"),n=require("../../../misc/separator/separator.cjs.js"),s=require("../select.module.scss.cjs.js"),u=require("../../../../providers/label-provider/use-labels.cjs.js"),d=({innerProps:l,data:a})=>{const{getLabel:r}=u.useLabels(),o=e=>{l.onClick&&l.onClick(e)},c=e=>{(e.key==="Enter"||e.key===" ")&&o(e)};return t.jsxs(t.Fragment,{children:[t.jsx(i.ClosingButton,{onMouseDown:e=>e.stopPropagation(),onClick:o,onKeyDown:c,className:s.default["tedi-select__multi-value-clear"],title:`${r("clear")} ${a.label}`}),t.jsx(n.Separator,{color:"primary",axis:"vertical",className:s.default["tedi-select__separator"]})]})};exports.SelectMultiValueRemove=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../../buttons/closing-button/closing-button.cjs.js"),n=require("../../../misc/separator/separator.cjs.js"),s=require("../select.module.scss.cjs.js"),u=require("../../../../providers/label-provider/use-labels.cjs.js"),d=({innerProps:l,data:a})=>{const{getLabel:r}=u.useLabels(),o=e=>{l.onClick&&l.onClick(e)},c=e=>{(e.key==="Enter"||e.key===" ")&&o(e)};return t.jsxs(t.Fragment,{children:[t.jsx(i.ClosingButton,{onMouseDown:e=>e.stopPropagation(),onClick:o,onKeyDown:c,className:s.default["tedi-select__multi-value-clear"],iconSize:18,title:`${r("clear")} ${a.label}`}),t.jsx(n.Separator,{color:"primary",axis:"vertical",className:s.default["tedi-select__separator"]})]})};exports.SelectMultiValueRemove=d;

package/src/tedi/components/form/select/components/select-multi-value-remove.es.js

@@ -17,6 +17,7 @@ const g = ({ innerProps: o, data: a }) => {
           (e.key === "Enter" || e.key === " ") && t(e);
         },
         className: r["tedi-select__multi-value-clear"],
+        iconSize: 18,
         title: `${i("clear")} ${a.label}`
       }
     ),

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),ce=require("../../base/icon/icon.cjs.js"),fe=require("../../buttons/closing-button/closing-button.cjs.js"),xe=require("../../misc/separator/separator.cjs.js"),U=require("../feedback-text/feedback-text.cjs.js"),pe=require("../form-label/form-label.cjs.js"),a=require("./textfield.module.scss.cjs.js"),me=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),be=require("../../../providers/label-provider/use-labels.cjs.js"),I=r.forwardRef((f,G)=>{const{getCurrentBreakpointProps:J}=me.useBreakpointProps(f.defaultServerBreakpoint),{id:u,label:g,className:Q,inputClassName:q,disabled:s,required:A,hideLabel:h,invalid:o,readOnly:B,icon:c,onIconClick:m,size:n,placeholder:T,isArrowsHidden:M=!0,isClearable:R,onClear:b,onChange:d,onChangeEvent:y,onKeyUp:X,onKeyDown:Y,onKeyPress:ye,defaultValue:Z,value:j,onFocus:w,onBlur:F,onClick:ee,helper:t,input:P,name:$,isTextArea:v,...te}=J(f)||{},{getLabel:L}=be.useLabels(),x=r.useRef(null),S=r.useRef(null),[V,z]=r.useState(j??Z??""),_=r.useMemo(()=>{var e;if(t)return Array.isArray(t)?((e=t[0])==null?void 0:e.id)??`${u}-helper`:t.id??`${u}-helper`},[t,u]),N=r.useMemo(()=>j??V,[j,V]),k=R&&N;r.useImperativeHandle(G,()=>({get input(){return x.current},get inner(){return S.current}}));const C=r.useMemo(()=>Array.isArray(t)?o||t.some(e=>e.type==="error"):o||(t==null?void 0:t.type)==="error",[o,t]),re=r.useMemo(()=>!t||Array.isArray(t)&&t.length===0?!1:Array.isArray(t)?!o&&t.every(e=>e.type==="valid"):!o&&t.type==="valid",[o,t]),ae=n==="large"?"default":n,H=r.useCallback(e=>{const i={size:n==="large"?24:n==="small"?16:18,className:p.default(a.default["tedi-textfield__icon"])},de=typeof e=="string"?{...i,name:e}:{...i,...e,className:p.default(i.className,e==null?void 0:e.className)},ue=l.jsx(ce.Icon,{...de}),oe=m?"button":"div";return l.jsx(oe,{className:a.default["tedi-textfield__icon-wrapper"],type:m?"button":void 0,onClick:s?void 0:m,disabled:s,tabIndex:s?-1:0,children:ue})},[s,m,n]),K=r.useCallback(e=>{const i=e.currentTarget.value;z(i),d==null||d(i),y==null||y(e)},[d,y]),E=r.useCallback(()=>{z(""),d==null||d(""),b==null||b()},[d,b]),O=r.useCallback((e,i)=>!!v,[v]),W=r.useCallback((e,i)=>!v,[v]),le=r.useMemo(()=>{const e={...P,id:u,name:$,...h?{"aria-label":g}:{},"aria-describedby":_,"aria-disabled":s||void 0,className:p.default(a.default["tedi-textfield__input"],q,{[a.default["tedi-textfield__input--hidden-arrows"]]:M}),disabled:s,required:A,"aria-invalid":C||void 0,placeholder:T,readOnly:B,onChange:K,value:N,onBlur:F,onFocus:w};return O(f,x)?l.jsx("textarea",{...e,ref:x}):W(f,x)?l.jsx("input",{...e,ref:x}):null},[P,u,$,h,g,_,s,q,M,A,C,T,B,K,N,F,w,O,f,W]),D=r.useMemo(()=>{const e={size:n==="large"?"large":"medium",onClick:s?()=>{}:E,disabled:s,"aria-disabled":s||void 0,title:`${L("clear")}`,className:p.default(a.default["tedi-textfield__clear-button"])};return l.jsx(fe.ClosingButton,{...e})},[E,s,L,n]),se=r.useMemo(()=>l.jsxs("div",{className:a.default["tedi-textfield__right-area"],children:[k&&D,k&&c?l.jsx(xe.Separator,{color:"primary",axis:"vertical",className:a.default["tedi-textfield__separator"]}):null,c&&H(c)]}),[H,c,D,k]),ie=p.default(a.default["tedi-textfield"],{[a.default[`tedi-textfield--${n}`]]:n},{[a.default["tedi-textfield--with-icon"]]:c},{[a.default["tedi-textfield--invalid"]]:C},{[a.default["tedi-textfield--valid"]]:re},{[a.default["tedi-textfield--clearable"]]:k},Q),ne=()=>!t||Array.isArray(t)&&t.length===0?null:l.jsx("div",{className:a.default["tedi-textfield__feedback-wrapper"],children:Array.isArray(t)?t.map((e,i)=>l.jsx(U.FeedbackText,{...e,id:`${_}-${i}`},i)):l.jsx(U.FeedbackText,{...t,id:_})});return l.jsxs("div",{"data-name":"textfield",...te,className:ie,children:[l.jsx(pe.FormLabel,{id:u,label:g,required:A,hideLabel:h,size:ae}),l.jsxs("div",{className:a.default["tedi-textfield__inner"],onKeyDown:Y,onKeyUp:X,onClick:ee,tabIndex:s?-1:0,ref:S,children:[le,R||c?se:null]}),ne()]})});I.displayName="TextField";exports.TextField=I;exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),ce=require("../../base/icon/icon.cjs.js"),fe=require("../../buttons/closing-button/closing-button.cjs.js"),xe=require("../../misc/separator/separator.cjs.js"),U=require("../feedback-text/feedback-text.cjs.js"),pe=require("../form-label/form-label.cjs.js"),a=require("./textfield.module.scss.cjs.js"),me=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),be=require("../../../providers/label-provider/use-labels.cjs.js"),ye={large:24,default:18},I=r.forwardRef((f,G)=>{const{getCurrentBreakpointProps:J}=me.useBreakpointProps(f.defaultServerBreakpoint),{id:u,label:k,className:Q,inputClassName:q,disabled:i,required:A,hideLabel:h,invalid:o,readOnly:B,icon:c,onIconClick:m,size:n,placeholder:T,isArrowsHidden:M=!0,isClearable:R,onClear:b,onChange:d,onChangeEvent:y,onKeyUp:X,onKeyDown:Y,onKeyPress:ve,defaultValue:Z,value:j,onFocus:w,onBlur:F,onClick:ee,helper:t,input:P,name:S,isTextArea:v,...te}=J(f)||{},{getLabel:$}=be.useLabels(),x=r.useRef(null),z=r.useRef(null),[L,V]=r.useState(j??Z??""),_=r.useMemo(()=>{var e;if(t)return Array.isArray(t)?((e=t[0])==null?void 0:e.id)??`${u}-helper`:t.id??`${u}-helper`},[t,u]),N=r.useMemo(()=>j??L,[j,L]),g=R&&N;r.useImperativeHandle(G,()=>({get input(){return x.current},get inner(){return z.current}}));const C=r.useMemo(()=>Array.isArray(t)?o||t.some(e=>e.type==="error"):o||(t==null?void 0:t.type)==="error",[o,t]),re=r.useMemo(()=>!t||Array.isArray(t)&&t.length===0?!1:Array.isArray(t)?!o&&t.every(e=>e.type==="valid"):!o&&t.type==="valid",[o,t]),ae=n==="large"?"default":n,H=r.useCallback(e=>{const s={size:n==="large"?24:n==="small"?16:18,className:p.default(a.default["tedi-textfield__icon"])},de=typeof e=="string"?{...s,name:e}:{...s,...e,className:p.default(s.className,e==null?void 0:e.className)},ue=l.jsx(ce.Icon,{...de}),oe=m?"button":"div";return l.jsx(oe,{className:a.default["tedi-textfield__icon-wrapper"],type:m?"button":void 0,onClick:i?void 0:m,disabled:i,tabIndex:i?-1:0,children:ue})},[i,m,n]),K=r.useCallback(e=>{const s=e.currentTarget.value;V(s),d==null||d(s),y==null||y(e)},[d,y]),E=r.useCallback(()=>{V(""),d==null||d(""),b==null||b()},[d,b]),O=r.useCallback((e,s)=>!!v,[v]),W=r.useCallback((e,s)=>!v,[v]),le=r.useMemo(()=>{const e={...P,id:u,name:S,...h?{"aria-label":k}:{},"aria-describedby":_,"aria-disabled":i||void 0,className:p.default(a.default["tedi-textfield__input"],q,{[a.default["tedi-textfield__input--hidden-arrows"]]:M}),disabled:i,required:A,"aria-invalid":C||void 0,placeholder:T,readOnly:B,onChange:K,value:N,onBlur:F,onFocus:w};return O(f,x)?l.jsx("textarea",{...e,ref:x}):W(f,x)?l.jsx("input",{...e,ref:x}):null},[P,u,S,h,k,_,i,q,M,A,C,T,B,K,N,F,w,O,f,W]),D=r.useMemo(()=>{const e={iconSize:ye[n==="large"?"large":"default"],onClick:i?()=>{}:E,disabled:i,"aria-disabled":i||void 0,title:`${$("clear")}`,className:p.default(a.default["tedi-textfield__clear-button"])};return l.jsx(fe.ClosingButton,{...e})},[E,i,$,n]),ie=r.useMemo(()=>l.jsxs("div",{className:a.default["tedi-textfield__right-area"],children:[g&&D,g&&c?l.jsx(xe.Separator,{color:"primary",axis:"vertical",className:a.default["tedi-textfield__separator"]}):null,c&&H(c)]}),[H,c,D,g]),se=p.default(a.default["tedi-textfield"],{[a.default[`tedi-textfield--${n}`]]:n},{[a.default["tedi-textfield--with-icon"]]:c},{[a.default["tedi-textfield--invalid"]]:C},{[a.default["tedi-textfield--valid"]]:re},{[a.default["tedi-textfield--clearable"]]:g},Q),ne=()=>!t||Array.isArray(t)&&t.length===0?null:l.jsx("div",{className:a.default["tedi-textfield__feedback-wrapper"],children:Array.isArray(t)?t.map((e,s)=>l.jsx(U.FeedbackText,{...e,id:`${_}-${s}`},s)):l.jsx(U.FeedbackText,{...t,id:_})});return l.jsxs("div",{"data-name":"textfield",...te,className:se,children:[l.jsx(pe.FormLabel,{id:u,label:k,required:A,hideLabel:h,size:ae}),l.jsxs("div",{className:a.default["tedi-textfield__inner"],onKeyDown:Y,onKeyUp:X,onClick:ee,tabIndex:i?-1:0,ref:z,children:[le,R||c?ie:null]}),ne()]})});I.displayName="TextField";exports.TextField=I;exports.default=I;

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

@@ -2,22 +2,25 @@ import { jsx as n, jsxs as w } from "react/jsx-runtime";
 import p from "../../../../../external/classnames/index.es.js";
 import t, { forwardRef as ue } from "react";
 import { Icon as ce } from "../../base/icon/icon.es.js";
-import { ClosingButton as me } from "../../buttons/closing-button/closing-button.es.js";
-import { Separator as fe } from "../../misc/separator/separator.es.js";
+import { ClosingButton as fe } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as me } from "../../misc/separator/separator.es.js";
 import { FeedbackText as U } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as pe } from "../form-label/form-label.es.js";
 import a from "./textfield.module.scss.es.js";
 import { useBreakpointProps as xe } from "../../../helpers/hooks/use-breakpoint-props.es.js";
 import { useLabels as be } from "../../../providers/label-provider/use-labels.es.js";
-const ye = ue((m, G) => {
-  const { getCurrentBreakpointProps: J } = xe(m.defaultServerBreakpoint), {
+const ye = {
+  large: 24,
+  default: 18
+}, ve = ue((f, G) => {
+  const { getCurrentBreakpointProps: J } = xe(f.defaultServerBreakpoint), {
     id: d,
     label: N,
     className: Q,
     inputClassName: B,
     disabled: i,
-    required: h,
-    hideLabel: k,
+    required: g,
+    hideLabel: h,
     invalid: u,
     readOnly: R,
     icon: c,
@@ -31,28 +34,28 @@ const ye = ue((m, G) => {
     onChangeEvent: y,
     onKeyUp: X,
     onKeyDown: Y,
-    onKeyPress: ve,
+    onKeyPress: _e,
     defaultValue: Z,
-    value: g,
+    value: k,
     onFocus: T,
-    onBlur: V,
+    onBlur: z,
     onClick: ee,
     helper: r,
-    input: $,
-    name: z,
+    input: S,
+    name: V,
     isTextArea: v,
     ...re
-  } = J(m) || {}, { getLabel: L } = be(), f = t.useRef(null), S = t.useRef(null), [E, H] = t.useState(g ?? Z ?? ""), _ = t.useMemo(() => {
+  } = J(f) || {}, { getLabel: $ } = be(), m = t.useRef(null), L = t.useRef(null), [E, H] = t.useState(k ?? Z ?? ""), _ = t.useMemo(() => {
     var e;
     if (r)
       return Array.isArray(r) ? ((e = r[0]) == null ? void 0 : e.id) ?? `${d}-helper` : r.id ?? `${d}-helper`;
-  }, [r, d]), C = t.useMemo(() => g ?? E, [g, E]), A = P && C;
+  }, [r, d]), C = t.useMemo(() => k ?? E, [k, E]), A = P && C;
   t.useImperativeHandle(G, () => ({
     get input() {
-      return f.current;
+      return m.current;
     },
     get inner() {
-      return S.current;
+      return L.current;
     }
   }));
   const I = t.useMemo(() => Array.isArray(r) ? u || r.some((e) => e.type === "error") : u || (r == null ? void 0 : r.type) === "error", [u, r]), te = t.useMemo(() => !r || Array.isArray(r) && r.length === 0 ? !1 : Array.isArray(r) ? !u && r.every((e) => e.type === "valid") : !u && r.type === "valid", [u, r]), ae = s === "large" ? "default" : s, K = t.useCallback(
@@ -90,61 +93,61 @@ const ye = ue((m, G) => {
     [v]
   ), ie = t.useMemo(() => {
     const e = {
-      ...$,
+      ...S,
       id: d,
-      name: z,
-      ...k ? { "aria-label": N } : {},
+      name: V,
+      ...h ? { "aria-label": N } : {},
       "aria-describedby": _,
       "aria-disabled": i || void 0,
       className: p(a["tedi-textfield__input"], B, {
         [a["tedi-textfield__input--hidden-arrows"]]: F
       }),
       disabled: i,
-      required: h,
+      required: g,
       "aria-invalid": I || void 0,
       placeholder: M,
       readOnly: R,
       onChange: W,
       value: C,
-      onBlur: V,
+      onBlur: z,
       onFocus: T
     };
-    return q(m, f) ? /* @__PURE__ */ n("textarea", { ...e, ref: f }) : D(m, f) ? /* @__PURE__ */ n("input", { ...e, ref: f }) : null;
+    return q(f, m) ? /* @__PURE__ */ n("textarea", { ...e, ref: m }) : D(f, m) ? /* @__PURE__ */ n("input", { ...e, ref: m }) : null;
   }, [
-    $,
+    S,
     d,
-    z,
-    k,
+    V,
+    h,
     N,
     _,
     i,
     B,
     F,
-    h,
+    g,
     I,
     M,
     R,
     W,
     C,
-    V,
+    z,
     T,
     q,
-    m,
+    f,
     D
   ]), O = t.useMemo(() => {
     const e = {
-      size: s === "large" ? "large" : "medium",
+      iconSize: ye[s === "large" ? "large" : "default"],
       onClick: i ? () => {
       } : j,
       disabled: i,
       "aria-disabled": i || void 0,
-      title: `${L("clear")}`,
+      title: `${$("clear")}`,
       className: p(a["tedi-textfield__clear-button"])
     };
-    return /* @__PURE__ */ n(me, { ...e });
-  }, [j, i, L, s]), le = t.useMemo(() => /* @__PURE__ */ w("div", { className: a["tedi-textfield__right-area"], children: [
+    return /* @__PURE__ */ n(fe, { ...e });
+  }, [j, i, $, s]), le = t.useMemo(() => /* @__PURE__ */ w("div", { className: a["tedi-textfield__right-area"], children: [
     A && O,
-    A && c ? /* @__PURE__ */ n(fe, { color: "primary", axis: "vertical", className: a["tedi-textfield__separator"] }) : null,
+    A && c ? /* @__PURE__ */ n(me, { color: "primary", axis: "vertical", className: a["tedi-textfield__separator"] }) : null,
     c && K(c)
   ] }), [K, c, O, A]), ne = p(
     a["tedi-textfield"],
@@ -156,7 +159,7 @@ const ye = ue((m, G) => {
     Q
   ), se = () => !r || Array.isArray(r) && r.length === 0 ? null : /* @__PURE__ */ n("div", { className: a["tedi-textfield__feedback-wrapper"], children: Array.isArray(r) ? r.map((e, l) => /* @__PURE__ */ n(U, { ...e, id: `${_}-${l}` }, l)) : /* @__PURE__ */ n(U, { ...r, id: _ }) });
   return /* @__PURE__ */ w("div", { "data-name": "textfield", ...re, className: ne, children: [
-    /* @__PURE__ */ n(pe, { id: d, label: N, required: h, hideLabel: k, size: ae }),
+    /* @__PURE__ */ n(pe, { id: d, label: N, required: g, hideLabel: h, size: ae }),
     /* @__PURE__ */ w(
       "div",
       {
@@ -165,7 +168,7 @@ const ye = ue((m, G) => {
         onKeyUp: X,
         onClick: ee,
         tabIndex: i ? -1 : 0,
-        ref: S,
+        ref: L,
         children: [
           ie,
           P || c ? le : null
@@ -175,8 +178,8 @@ const ye = ue((m, G) => {
     se()
   ] });
 });
-ye.displayName = "TextField";
+ve.displayName = "TextField";
 export {
-  ye as TextField,
-  ye as default
+  ve as TextField,
+  ve as default
 };

package/src/tedi/components/notifications/alert/alert.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),C=require("react"),M=require("../../base/icon/icon.cjs.js"),N=require("../../base/typography/heading/heading.cjs.js"),P=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),S=require("../../../helpers/hooks/use-is-mounted.cjs.js"),k=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),y=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),R=require("../../layout/grid/row.cjs.js"),f=require("../../layout/grid/col.cjs.js"),p=a=>{const{getCurrentBreakpointProps:g}=k.useBreakpointProps(a.defaultServerBreakpoint),{children:s,role:i="alert",title:r,className:m,type:l="info",icon:o,onClose:c,isGlobal:h=!1,noSideBorders:j=!1,titleElement:q="h3",...x}=g(a),v=w.default(t.default["tedi-alert"],t.default[`tedi-alert--${l}`],{[t.default["tedi-alert--global"]]:h,[t.default["tedi-alert--no-side-borders"]]:j},m),_=S.useIsMounted(),b=n=>{const u={size:18},I=typeof n=="string"?{...u,name:n}:{...u,...n};return e.jsx(M.Icon,{...I,className:t.default["tedi-alert__icon"]})},B=i==="alert"?"assertive":i==="status"?"polite":"off",d=C.useId();return _?e.jsx("div",{role:i,"data-name":"alert","aria-label":`${l} alert`,"aria-live":B,"aria-labelledby":r?d:void 0,...x,className:v,children:e.jsxs(y.VerticalSpacing,{size:.25,children:[e.jsxs(R.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(f.Col,{grow:1,className:t.default["tedi-alert__content"],children:[o&&b(o),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(N.Heading,{element:q,id:d,modifiers:["h5"],children:r}):s})]}),c&&e.jsx(f.Col,{width:"auto",children:e.jsx(P.ClosingButton,{onClick:c})})]}),r&&s&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:s})]})}):null};exports.Alert=p;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),S=require("../../../../../external/classnames/index.cjs.js"),w=require("react"),C=require("../../base/icon/icon.cjs.js"),M=require("../../base/typography/heading/heading.cjs.js"),N=require("../../buttons/closing-button/closing-button.cjs.js"),t=require("./alert.module.scss.cjs.js"),P=require("../../../helpers/hooks/use-is-mounted.cjs.js"),k=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),y=require("../../layout/vertical-spacing/vertical-spacing.cjs.js"),z=require("../../layout/grid/row.cjs.js"),f=require("../../layout/grid/col.cjs.js"),p=a=>{const{getCurrentBreakpointProps:g}=k.useBreakpointProps(a.defaultServerBreakpoint),{children:s,role:i="alert",title:r,className:m,type:l="info",icon:o,onClose:c,isGlobal:h=!1,noSideBorders:j=!1,titleElement:q="h3",...x}=g(a),v=S.default(t.default["tedi-alert"],t.default[`tedi-alert--${l}`],{[t.default["tedi-alert--global"]]:h,[t.default["tedi-alert--no-side-borders"]]:j},m),_=P.useIsMounted(),b=n=>{const u={size:18},I=typeof n=="string"?{...u,name:n}:{...u,...n};return e.jsx(C.Icon,{...I,className:t.default["tedi-alert__icon"]})},B=i==="alert"?"assertive":i==="status"?"polite":"off",d=w.useId();return _?e.jsx("div",{role:i,"data-name":"alert","aria-label":`${l} alert`,"aria-live":B,"aria-labelledby":r?d:void 0,...x,className:v,children:e.jsxs(y.VerticalSpacing,{size:.25,children:[e.jsxs(z.Row,{gutterX:2,alignItems:r?"center":"start",children:[e.jsxs(f.Col,{grow:1,className:t.default["tedi-alert__content"],children:[o&&b(o),e.jsx("div",{className:"tedi-alert__content-wrapper",children:r?e.jsx(M.Heading,{element:q,id:d,modifiers:["h5"],children:r}):s})]}),c&&e.jsx(f.Col,{width:"auto",children:e.jsx(N.ClosingButton,{onClick:c,iconSize:18})})]}),r&&s&&e.jsx("div",{className:"tedi-alert__content-wrapper",children:s})]})}):null};exports.Alert=p;exports.default=p;

package/src/tedi/components/notifications/alert/alert.es.js

@@ -2,18 +2,18 @@ import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import k from "../../../../../external/classnames/index.es.js";
 import y from "react";
 import { Icon as P } from "../../base/icon/icon.es.js";
-import { Heading as x } from "../../base/typography/heading/heading.es.js";
-import { ClosingButton as M } from "../../buttons/closing-button/closing-button.es.js";
+import { Heading as S } from "../../base/typography/heading/heading.es.js";
+import { ClosingButton as x } from "../../buttons/closing-button/closing-button.es.js";
 import t from "./alert.module.scss.es.js";
-import { useIsMounted as S } from "../../../helpers/hooks/use-is-mounted.es.js";
-import { useBreakpointProps as j } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { VerticalSpacing as z } from "../../layout/vertical-spacing/vertical-spacing.es.js";
+import { useIsMounted as z } from "../../../helpers/hooks/use-is-mounted.es.js";
+import { useBreakpointProps as M } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { VerticalSpacing as j } from "../../layout/vertical-spacing/vertical-spacing.es.js";
 import { Row as E } from "../../layout/grid/row.es.js";
 import { Col as f } from "../../layout/grid/col.es.js";
 const K = (s) => {
-  const { getCurrentBreakpointProps: u } = j(s.defaultServerBreakpoint), {
+  const { getCurrentBreakpointProps: u } = M(s.defaultServerBreakpoint), {
     children: o,
-    role: a = "alert",
+    role: i = "alert",
     title: r,
     className: h,
     type: n = "info",
@@ -31,27 +31,27 @@ const K = (s) => {
       [t["tedi-alert--no-side-borders"]]: _
     },
     h
-  ), b = S(), B = (i) => {
-    const p = { size: 18 }, C = typeof i == "string" ? { ...p, name: i } : { ...p, ...i };
+  ), b = z(), B = (a) => {
+    const p = { size: 18 }, C = typeof a == "string" ? { ...p, name: a } : { ...p, ...a };
     return /* @__PURE__ */ e(P, { ...C, className: t["tedi-alert__icon"] });
-  }, w = a === "alert" ? "assertive" : a === "status" ? "polite" : "off", m = y.useId();
+  }, w = i === "alert" ? "assertive" : i === "status" ? "polite" : "off", m = y.useId();
   return b ? /* @__PURE__ */ e(
     "div",
     {
-      role: a,
+      role: i,
       "data-name": "alert",
       "aria-label": `${n} alert`,
       "aria-live": w,
       "aria-labelledby": r ? m : void 0,
       ...I,
       className: N,
-      children: /* @__PURE__ */ l(z, { size: 0.25, children: [
+      children: /* @__PURE__ */ l(j, { size: 0.25, children: [
         /* @__PURE__ */ l(E, { gutterX: 2, alignItems: r ? "center" : "start", children: [
           /* @__PURE__ */ l(f, { grow: 1, className: t["tedi-alert__content"], children: [
             d && B(d),
-            /* @__PURE__ */ e("div", { className: "tedi-alert__content-wrapper", children: r ? /* @__PURE__ */ e(x, { element: v, id: m, modifiers: ["h5"], children: r }) : o })
+            /* @__PURE__ */ e("div", { className: "tedi-alert__content-wrapper", children: r ? /* @__PURE__ */ e(S, { element: v, id: m, modifiers: ["h5"], children: r }) : o })
           ] }),
-          c && /* @__PURE__ */ e(f, { width: "auto", children: /* @__PURE__ */ e(M, { onClick: c }) })
+          c && /* @__PURE__ */ e(f, { width: "auto", children: /* @__PURE__ */ e(x, { onClick: c, iconSize: 18 }) })
         ] }),
         r && o && /* @__PURE__ */ e("div", { className: "tedi-alert__content-wrapper", children: o })
       ] })

package/src/tedi/components/overlays/popover/popover-content.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),C=require("../../base/typography/text/text.cjs.js"),q=require("../../buttons/closing-button/closing-button.cjs.js"),y=require("../overlay/overlay.cjs.js"),g=require("../overlay/overlay-content.cjs.js"),o=require("./popover.module.scss.cjs.js"),j=f=>{const{children:r,width:l="small",className:x,title:e,titleProps:d={element:"h4"},close:a,closeProps:n={size:"large"}}=f,{onOpenChange:h}=i.useContext(y.OverlayContext),c=i.useId(),u=!!r,p=i.useId();return t.jsxs(g.OverlayContent,{classNames:{content:s.default(o.default["tedi-popover"],{[o.default[`tedi-popover--${l}`]]:l},x),arrow:o.default["tedi-popover__arrow"]},labelledBy:e?c:void 0,describedBy:u?p:void 0,children:[(e||a)&&t.jsxs("div",{className:s.default(o.default["tedi-popover__header"],{[o.default["tedi-popover__header--no-title"]]:!e}),children:[e&&t.jsx(C.Text,{...d,id:c,className:s.default("align-self-center",d.className),children:e}),a&&t.jsx(q.ClosingButton,{...n,onClick:m=>{var v;h(!1),(v=n.onClick)==null||v.call(n,m)}})]}),u?t.jsx("div",{id:p,children:r}):r]})};exports.PopoverContent=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),C=require("../../base/typography/text/text.cjs.js"),q=require("../../buttons/closing-button/closing-button.cjs.js"),y=require("../overlay/overlay.cjs.js"),j=require("../overlay/overlay-content.cjs.js"),o=require("./popover.module.scss.cjs.js"),_=f=>{const{children:r,width:l="small",className:x,title:e,titleProps:d={element:"h4"},close:a,closeProps:n={size:"default"}}=f,{onOpenChange:h}=i.useContext(y.OverlayContext),c=i.useId(),u=!!r,p=i.useId();return t.jsxs(j.OverlayContent,{classNames:{content:s.default(o.default["tedi-popover"],{[o.default[`tedi-popover--${l}`]]:l},x),arrow:o.default["tedi-popover__arrow"]},labelledBy:e?c:void 0,describedBy:u?p:void 0,children:[(e||a)&&t.jsxs("div",{className:s.default(o.default["tedi-popover__header"],{[o.default["tedi-popover__header--no-title"]]:!e}),children:[e&&t.jsx(C.Text,{...d,id:c,className:s.default("align-self-center",d.className),children:e}),a&&t.jsx(q.ClosingButton,{...n,onClick:m=>{var v;h(!1),(v=n.onClick)==null||v.call(n,m)}})]}),u?t.jsx("div",{id:p,children:r}):r]})};exports.PopoverContent=_;

package/src/tedi/components/overlays/popover/popover-content.es.js

@@ -1,10 +1,10 @@
 import { jsxs as v, jsx as i } from "react/jsx-runtime";
 import s from "../../../../../external/classnames/index.es.js";
 import { useContext as _, useId as f } from "react";
-import { Text as y } from "../../base/typography/text/text.es.js";
-import { ClosingButton as g } from "../../buttons/closing-button/closing-button.es.js";
-import { OverlayContext as u } from "../overlay/overlay.es.js";
-import { OverlayContent as B } from "../overlay/overlay-content.es.js";
+import { Text as u } from "../../base/typography/text/text.es.js";
+import { ClosingButton as y } from "../../buttons/closing-button/closing-button.es.js";
+import { OverlayContext as B } from "../overlay/overlay.es.js";
+import { OverlayContent as g } from "../overlay/overlay-content.es.js";
 import o from "./popover.module.scss.es.js";
 const P = (h) => {
   const {
@@ -14,10 +14,10 @@ const P = (h) => {
     title: e,
     titleProps: l = { element: "h4" },
     close: a,
-    closeProps: t = { size: "large" }
-  } = h, { onOpenChange: x } = _(u), d = f(), m = !!r, c = f();
+    closeProps: t = { size: "default" }
+  } = h, { onOpenChange: x } = _(B), d = f(), m = !!r, c = f();
   return /* @__PURE__ */ v(
-    B,
+    g,
     {
       classNames: {
         content: s(o["tedi-popover"], { [o[`tedi-popover--${n}`]]: n }, C),
@@ -27,9 +27,9 @@ const P = (h) => {
       describedBy: m ? c : void 0,
       children: [
         (e || a) && /* @__PURE__ */ v("div", { className: s(o["tedi-popover__header"], { [o["tedi-popover__header--no-title"]]: !e }), children: [
-          e && /* @__PURE__ */ i(y, { ...l, id: d, className: s("align-self-center", l.className), children: e }),
+          e && /* @__PURE__ */ i(u, { ...l, id: d, className: s("align-self-center", l.className), children: e }),
           a && /* @__PURE__ */ i(
-            g,
+            y,
             {
               ...t,
               onClick: (N) => {

package/src/tedi/components/tags/tag/tag.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),g=require("../../base/icon/icon.cjs.js"),p=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../../loaders/spinner/spinner.cjs.js"),e=require("./tag.module.scss.cjs.js"),_=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=i=>{const{getCurrentBreakpointProps:o}=_.useBreakpointProps(i.defaultServerBreakpoint),{children:n,className:l,onClose:a,isLoading:r=!1,color:s="primary",...c}=o(i),d=u.default(e.default["tedi-tag"],s&&e.default[`tedi-tag--color-${s}`],a&&!r&&e.default["tedi-tag__close"],l);return t.jsxs("div",{className:d,role:"status","aria-live":r?"polite":void 0,...c,children:[s==="danger"&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(g.Icon,{name:"info",color:"danger",size:16,className:e.default["tedi-tag__icon--error"]})}),t.jsx("div",{className:e.default["tedi-tag__content"],children:n}),r&&!a&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(f.Spinner,{className:e.default["tedi-tag__loader"]})}),!r&&a&&t.jsx(p.ClosingButton,{onClick:a})]})};exports.Tag=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../../../../../external/classnames/index.cjs.js"),g=require("../../base/icon/icon.cjs.js"),p=require("../../buttons/closing-button/closing-button.cjs.js"),f=require("../../loaders/spinner/spinner.cjs.js"),e=require("./tag.module.scss.cjs.js"),_=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),m=s=>{const{getCurrentBreakpointProps:o}=_.useBreakpointProps(s.defaultServerBreakpoint),{children:n,className:l,onClose:a,isLoading:r=!1,color:i="primary",...c}=o(s),d=u.default(e.default["tedi-tag"],i&&e.default[`tedi-tag--color-${i}`],a&&!r&&e.default["tedi-tag__close"],l);return t.jsxs("div",{className:d,role:"status","aria-live":r?"polite":void 0,...c,children:[i==="danger"&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(g.Icon,{name:"info",color:"danger",size:16,className:e.default["tedi-tag__icon--error"]})}),t.jsx("div",{className:e.default["tedi-tag__content"],children:n}),r&&!a&&t.jsx("div",{className:e.default["tedi-tag__icon-wrapper"],children:t.jsx(f.Spinner,{className:e.default["tedi-tag__loader"]})}),!r&&a&&t.jsx(p.ClosingButton,{iconSize:18,onClick:a})]})};exports.Tag=m;

package/src/tedi/components/tags/tag/tag.es.js

@@ -1,31 +1,31 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import p from "../../../../../external/classnames/index.es.js";
 import { Icon as g } from "../../base/icon/icon.es.js";
 import { ClosingButton as _ } from "../../buttons/closing-button/closing-button.es.js";
 import { Spinner as f } from "../../loaders/spinner/spinner.es.js";
 import e from "./tag.module.scss.es.js";
 import { useBreakpointProps as N } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-const j = (i) => {
-  const { getCurrentBreakpointProps: s } = N(i.defaultServerBreakpoint), {
+const S = (a) => {
+  const { getCurrentBreakpointProps: s } = N(a.defaultServerBreakpoint), {
     children: n,
     className: c,
-    onClose: o,
+    onClose: r,
     isLoading: t = !1,
-    color: a = "primary",
+    color: i = "primary",
     ...l
-  } = s(i), m = p(
+  } = s(a), m = p(
     e["tedi-tag"],
-    a && e[`tedi-tag--color-${a}`],
-    o && !t && e["tedi-tag__close"],
+    i && e[`tedi-tag--color-${i}`],
+    r && !t && e["tedi-tag__close"],
     c
   );
   return /* @__PURE__ */ d("div", { className: m, role: "status", "aria-live": t ? "polite" : void 0, ...l, children: [
-    a === "danger" && /* @__PURE__ */ r("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ r(g, { name: "info", color: "danger", size: 16, className: e["tedi-tag__icon--error"] }) }),
-    /* @__PURE__ */ r("div", { className: e["tedi-tag__content"], children: n }),
-    t && !o && /* @__PURE__ */ r("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ r(f, { className: e["tedi-tag__loader"] }) }),
-    !t && o && /* @__PURE__ */ r(_, { onClick: o })
+    i === "danger" && /* @__PURE__ */ o("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ o(g, { name: "info", color: "danger", size: 16, className: e["tedi-tag__icon--error"] }) }),
+    /* @__PURE__ */ o("div", { className: e["tedi-tag__content"], children: n }),
+    t && !r && /* @__PURE__ */ o("div", { className: e["tedi-tag__icon-wrapper"], children: /* @__PURE__ */ o(f, { className: e["tedi-tag__loader"] }) }),
+    !t && r && /* @__PURE__ */ o(_, { iconSize: 18, onClick: r })
   ] });
 };
 export {
-  j as Tag
+  S as Tag
 };