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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),O=require("../textfield/textfield.cjs.js"),d=require("./textarea.module.scss.cjs.js"),M=a.forwardRef((N,o)=>{const{className:_,helper:p=[],characterLimit:s,onChange:n,onChangeEvent:g,value:l,defaultValue:b,autoGrow:t=!1,minRows:u=3,maxRows:y=12,height:H="7.5rem",maxHeight:i,...q}=N,[T,F]=a.useState(b??""),c=a.useRef(null),[v,E]=a.useState("auto"),j=a.useCallback(e=>{!l&&!(n||g)&&F(e),n==null||n(e)},[l,n,g]),m=a.useMemo(()=>l??T,[l,T]),r=a.useCallback(()=>{if(!t||!c.current)return;const e=c.current,$=e.style.overflow;e.style.overflow="hidden";const f=window.getComputedStyle(e);let h=parseFloat(f.lineHeight);isNaN(h)&&(h=(parseFloat(f.fontSize)||16)*1.5);const S=parseFloat(f.paddingTop),A=parseFloat(f.paddingBottom),B=e.scrollHeight-S-A;let x=Math.ceil(B/h);x=Math.min(Math.max(x,u),y);const R=`${x*h+S+A}px`;e.style.height=R,E(R),e.style.overflow=$,e.style.overflowY=e.scrollHeight>e.clientHeight?"auto":"hidden"},[t,u,y]);a.useEffect(()=>{t&&requestAnimationFrame(()=>{r()})},[m,t,r]),a.useEffect(()=>{t&&c.current&&r()},[t,r]);const k=a.useCallback(e=>{o&&(typeof o=="function"?o(e):o.current=e),e!=null&&e.input&&e.input instanceof HTMLTextAreaElement&&(c.current=e.input,t&&setTimeout(r,0))},[o,t,r]),z=a.useMemo(()=>t?{rows:u,style:{...i?{maxHeight:i}:{},overflow:"hidden",height:v}}:{style:{height:H,...i?{maxHeight:i}:{},overflow:"auto"}},[t,u,i,H,v]),C=m.length,I=s?`${C}/${s}`:"",V=[...Array.isArray(p)?p:[p],...s?[{type:C>s?"error":"hint",text:I,position:"right",className:w.default(d.default["tedi-textarea__character-count"])}]:[]];return L.jsx(O.TextField,{...q,ref:k,"data-name":"textarea",inputClassName:w.default(d.default["tedi-textarea__input"],{[d.default["tedi-textarea__input--auto-grow"]]:t}),isTextArea:!0,className:w.default(d.default["tedi-textarea"],_),value:m,onChange:j,onChangeEvent:g,helper:V,input:z})});M.displayName="TextArea";exports.TextArea=M;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react/jsx-runtime"),w=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),O=require("../textfield/textfield.cjs.js"),d=require("./textarea.module.scss.cjs.js"),H=a.forwardRef((R,o)=>{const{className:N,helper:p=[],characterLimit:i,onChange:n,onChangeEvent:g,value:l,defaultValue:b,autoGrow:t=!1,minRows:u=3,maxRows:y=12,height:v="7.5rem",maxHeight:s,...q}=R,[T,F]=a.useState(b??""),c=a.useRef(null),[C,E]=a.useState("auto"),j=a.useCallback(e=>{!l&&!(n||g)&&F(e),n==null||n(e)},[l,n,g]),m=a.useMemo(()=>l??T,[l,T]),r=a.useCallback(()=>{if(!t||!c.current)return;const e=c.current,$=e.style.overflow;e.style.overflow="hidden";const f=window.getComputedStyle(e);let h=parseFloat(f.lineHeight);isNaN(h)&&(h=(parseFloat(f.fontSize)||16)*1.5);const _=parseFloat(f.paddingTop),A=parseFloat(f.paddingBottom),B=e.scrollHeight-_-A;let x=Math.ceil(B/h);x=Math.min(Math.max(x,u),y);const M=`${x*h+_+A}px`;e.style.height=M,E(M),e.style.overflow=$,e.style.overflowY=e.scrollHeight>e.clientHeight?"auto":"hidden"},[t,u,y]);a.useEffect(()=>{t&&requestAnimationFrame(()=>{r()})},[m,t,r]),a.useEffect(()=>{t&&c.current&&r()},[t,r]);const k=a.useCallback(e=>{o&&(typeof o=="function"?o(e):o.current=e),e!=null&&e.input&&e.input instanceof HTMLTextAreaElement&&(c.current=e.input,t&&setTimeout(r,0))},[o,t,r]),z=a.useMemo(()=>t?{rows:u,style:{...s?{maxHeight:s}:{},overflow:"hidden",height:C}}:{style:{height:v,...s?{maxHeight:s}:{},overflow:"auto"}},[t,u,s,v,C]),S=m.length,I=i?`${S}/${i}`:"",V=[...Array.isArray(p)?p:[p],...i?[{type:S>i?"error":"hint",text:I,position:"right",className:w.default(d.default["tedi-textarea__character-count"])}]:[]];return L.jsx(O.TextField,{...q,ref:k,"data-name":"textarea",inputClassName:w.default(d.default["tedi-textarea__input"],{[d.default["tedi-textarea__input--auto-grow"]]:t}),isTextArea:!0,className:w.default(d.default["tedi-textarea"],N),value:m,onChange:j,onChangeEvent:g,helper:V,input:z})});H.displayName="TextArea";exports.TextArea=H;exports.default=H;

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

@@ -2,11 +2,11 @@ import { jsx as q } from "react/jsx-runtime";
 import w from "../../../../../external/classnames/index.es.js";
 import a, { forwardRef as G, useRef as O, useEffect as R } from "react";
 import { TextField as P } from "../textfield/textfield.es.js";
-import p from "./textarea.module.scss.es.js";
+import m from "./textarea.module.scss.es.js";
 const Y = G((S, r) => {
   const {
     className: F,
-    helper: f = [],
+    helper: p = [],
     characterLimit: i,
     onChange: s,
     onChangeEvent: g,
@@ -23,24 +23,24 @@ const Y = G((S, r) => {
       !l && !(s || g) && k(t), s == null || s(t);
     },
     [l, s, g]
-  ), x = a.useMemo(() => l ?? v, [l, v]), o = a.useCallback(() => {
+  ), d = a.useMemo(() => l ?? v, [l, v]), o = a.useCallback(() => {
     if (!e || !u.current) return;
     const t = u.current, L = t.style.overflow;
     t.style.overflow = "hidden";
     const h = window.getComputedStyle(t);
-    let m = parseFloat(h.lineHeight);
-    isNaN(m) && (m = (parseFloat(h.fontSize) || 16) * 1.5);
+    let f = parseFloat(h.lineHeight);
+    isNaN(f) && (f = (parseFloat(h.fontSize) || 16) * 1.5);
     const N = parseFloat(h.paddingTop), _ = parseFloat(h.paddingBottom), j = t.scrollHeight - N - _;
-    let d = Math.ceil(j / m);
-    d = Math.min(Math.max(d, c), H);
-    const A = `${d * m + N + _}px`;
+    let x = Math.ceil(j / f);
+    x = Math.min(Math.max(x, c), H);
+    const A = `${x * f + N + _}px`;
     t.style.height = A, z(A), t.style.overflow = L, t.style.overflowY = t.scrollHeight > t.clientHeight ? "auto" : "hidden";
   }, [e, c, H]);
   R(() => {
     e && requestAnimationFrame(() => {
       o();
     });
-  }, [x, e, o]), R(() => {
+  }, [d, e, o]), R(() => {
     e && u.current && o();
   }, [e, o]);
   const I = a.useCallback(
@@ -61,14 +61,14 @@ const Y = G((S, r) => {
       ...n ? { maxHeight: n } : {},
       overflow: "auto"
     }
-  }, [e, c, n, y, C]), T = x.length, $ = i ? `${T}/${i}` : "", B = [
-    ...Array.isArray(f) ? f : [f],
+  }, [e, c, n, y, C]), T = d.length, $ = i ? `${T}/${i}` : "", B = [
+    ...Array.isArray(p) ? p : [p],
     ...i ? [
       {
         type: T > i ? "error" : "hint",
         text: $,
         position: "right",
-        className: w(p["tedi-textarea__character-count"])
+        className: w(m["tedi-textarea__character-count"])
       }
     ] : []
   ];
@@ -78,12 +78,12 @@ const Y = G((S, r) => {
       ...b,
       ref: I,
       "data-name": "textarea",
-      inputClassName: w(p["tedi-textarea__input"], {
-        [p["tedi-textarea__input--auto-grow"]]: e
+      inputClassName: w(m["tedi-textarea__input"], {
+        [m["tedi-textarea__input--auto-grow"]]: e
       }),
       isTextArea: !0,
-      className: w(p["tedi-textarea"], F),
-      value: x,
+      className: w(m["tedi-textarea"], F),
+      value: d,
       onChange: E,
       onChangeEvent: g,
       helper: B,
@@ -93,5 +93,6 @@ const Y = G((S, r) => {
 });
 Y.displayName = "TextArea";
 export {
-  Y as TextArea
+  Y as TextArea,
+  Y as default
 };

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

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

package/src/tedi/components/form/textfield/textfield.d.ts

@@ -128,6 +128,17 @@ export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointPro
      * @param event - Mouse event from the icon wrapper
      */
     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`,
+     * `aria-haspopup`) directly to the icon trigger, so screen readers announce
+     * disclosure state correctly when the icon opens a popover / dialog.
+     *
+     * Only applied when `onIconClick` is set (i.e. the icon is rendered as a
+     * `<button>`).
+     */
+    iconButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
     /**
      * Click handler for the entire inner container (the area around the input).
      *
@@ -198,6 +209,11 @@ export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointPro
      * Additional attributes for the input element.
      */
     input?: React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    startSlot?: React.ReactNode;
+    /**
+     * Optional end slot element to render inside the input container, after the input field.
+     */
+    endSlot?: React.ReactNode;
 }
 export interface TextFieldForwardRef {
     input: FieldElement | null;

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textfield":"tedi-textfield-376bbeed","tedi-textfield__inner":"tedi-textfield__inner-98791cdd","tedi-textfield__input":"tedi-textfield__input-ade0f9a6","tedi-textfield--invalid":"tedi-textfield--invalid-290ce18d","tedi-textfield--valid":"tedi-textfield--valid-273af8c0","tedi-textfield--clearable":"tedi-textfield--clearable-f47f0508","tedi-textfield--with-icon":"tedi-textfield--with-icon-db2c6f01","tedi-textfield--small":"tedi-textfield--small-4ffcc517","tedi-textfield--large":"tedi-textfield--large-0e4d788c","tedi-textfield__right-area":"tedi-textfield__right-area-6ac81c6b","tedi-textfield__icon-wrapper":"tedi-textfield__icon-wrapper-4935814e","tedi-textfield--inline":"tedi-textfield--inline-7ed55c4e","tedi-textfield__icon":"tedi-textfield__icon-05d4adc8","tedi-textfield__feedback-wrapper":"tedi-textfield__feedback-wrapper-9d47f9c6"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-textfield":"tedi-textfield-376bbeed","tedi-textfield__inner":"tedi-textfield__inner-98791cdd","tedi-textfield__input":"tedi-textfield__input-ade0f9a6","tedi-textfield--invalid":"tedi-textfield--invalid-290ce18d","tedi-textfield--valid":"tedi-textfield--valid-273af8c0","tedi-textfield--clearable":"tedi-textfield--clearable-f47f0508","tedi-textfield--with-icon":"tedi-textfield--with-icon-db2c6f01","tedi-textfield--small":"tedi-textfield--small-4ffcc517","tedi-textfield--large":"tedi-textfield--large-0e4d788c","tedi-textfield__right-area":"tedi-textfield__right-area-6ac81c6b","tedi-textfield__icon-wrapper":"tedi-textfield__icon-wrapper-4935814e","tedi-textfield--inline":"tedi-textfield--inline-7ed55c4e","tedi-textfield__icon":"tedi-textfield__icon-05d4adc8","tedi-textfield__feedback-wrapper":"tedi-textfield__feedback-wrapper-9d47f9c6","tedi-textfield__separator":"tedi-textfield__separator-63d1ba14"};exports.default=e;

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

@@ -12,7 +12,8 @@ const e = {
   "tedi-textfield__icon-wrapper": "tedi-textfield__icon-wrapper-4935814e",
   "tedi-textfield--inline": "tedi-textfield--inline-7ed55c4e",
   "tedi-textfield__icon": "tedi-textfield__icon-05d4adc8",
-  "tedi-textfield__feedback-wrapper": "tedi-textfield__feedback-wrapper-9d47f9c6"
+  "tedi-textfield__feedback-wrapper": "tedi-textfield__feedback-wrapper-9d47f9c6",
+  "tedi-textfield__separator": "tedi-textfield__separator-63d1ba14"
 };
 export {
   e as default

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),m=require("react"),R=require("../../base/icon/icon.cjs.js"),w=require("../../loaders/spinner/spinner.cjs.js"),P=require("../feedback-text/feedback-text.cjs.js"),M=require("../form-label/form-label.cjs.js"),e=require("./toggle.module.scss.cjs.js"),_=m.forwardRef((k,x)=>{const{id:o,label:l,hideLabel:j=!1,labelPosition:N="left",helper:a,className:y,checked:n,defaultChecked:g,onChange:d,size:C,color:q="primary",type:v="filled",icon:u,disabled:f=!1,isLoading:s=!1,tooltip:T,...$}=k,h=a?`${o}-helper`:void 0,[z,S]=m.useState(g??!1),i=typeof n<"u",c=i?n:z,p=C||(u?"large":"default"),L=b=>{s||(i||S(b.target.checked),d==null||d(b.target.checked))},F=r.default(e.default["tedi-toggle"],e.default[`tedi-toggle--${p}`],e.default[`tedi-toggle--${q}-${v}`],{[e.default["tedi-toggle--active"]]:c,[e.default["tedi-toggle--disabled"]]:f||s},y),I=r.default(e.default["tedi-toggle__control"],e.default[`tedi-toggle__control--label-${N}`]);return t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:I,children:[l&&t.jsx(M.FormLabel,{id:o,className:e.default["tedi-toggle__label"],hideLabel:j,label:l,tooltip:T}),t.jsxs("div",{className:F,children:[t.jsx("input",{...$,ref:x,id:o,type:"checkbox",role:"switch","aria-label":typeof l=="string"?l:void 0,"aria-describedby":h,className:e.default["tedi-toggle__input"],checked:i?c:void 0,defaultChecked:i?void 0:g,disabled:f||s,onChange:L}),t.jsx("span",{className:e.default["tedi-toggle__slider"],children:s?t.jsx(w.Spinner,{size:p==="large"?16:10,className:e.default["tedi-toggle__icon"]}):u?t.jsx(R.Icon,{name:c?"lock_open":"lock",size:16,color:"inherit"}):null})]})]}),a&&t.jsx(P.FeedbackText,{id:h,...a,className:r.default(e.default["tedi-toggle__helper"],a.className)})]})});_.displayName="Toggle";exports.Toggle=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),R=require("../../base/icon/icon.cjs.js"),w=require("../../loaders/spinner/spinner.cjs.js"),M=require("../feedback-text/feedback-text.cjs.js"),P=require("../form-label/form-label.cjs.js"),e=require("./toggle.module.scss.cjs.js"),n=_.forwardRef((k,x)=>{const{id:i,label:l,hideLabel:j=!1,labelPosition:N="left",helper:a,className:v,checked:g,defaultChecked:u,onChange:o,size:C,color:q="primary",type:y="filled",icon:f,disabled:h=!1,isLoading:s=!1,tooltip:T,...$}=k,p=a?`${i}-helper`:void 0,[z,S]=_.useState(u??!1),d=typeof g<"u",c=d?g:z,b=C||(f?"large":"default"),L=m=>{s||(d||S(m.target.checked),o==null||o(m.target.checked))},F=r.default(e.default["tedi-toggle"],e.default[`tedi-toggle--${b}`],e.default[`tedi-toggle--${q}-${y}`],{[e.default["tedi-toggle--active"]]:c,[e.default["tedi-toggle--disabled"]]:h||s},v),I=r.default(e.default["tedi-toggle__control"],e.default[`tedi-toggle__control--label-${N}`]);return t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:I,children:[l&&t.jsx(P.FormLabel,{id:i,className:e.default["tedi-toggle__label"],hideLabel:j,label:l,tooltip:T}),t.jsxs("div",{className:F,children:[t.jsx("input",{...$,ref:x,id:i,type:"checkbox",role:"switch","aria-label":typeof l=="string"?l:void 0,"aria-describedby":p,className:e.default["tedi-toggle__input"],checked:d?c:void 0,defaultChecked:d?void 0:u,disabled:h||s,onChange:L}),t.jsx("span",{className:e.default["tedi-toggle__slider"],children:s?t.jsx(w.Spinner,{size:b==="large"?16:10,className:e.default["tedi-toggle__icon"]}):f?t.jsx(R.Icon,{name:c?"lock_open":"lock",size:16,color:"inherit"}):null})]})]}),a&&t.jsx(M.FeedbackText,{id:p,...a,className:r.default(e.default["tedi-toggle__helper"],a.className)})]})});n.displayName="Toggle";exports.Toggle=n;exports.default=n;

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

@@ -6,17 +6,17 @@ import { Spinner as A } from "../../loaders/spinner/spinner.es.js";
 import { FeedbackText as B } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as D } from "../form-label/form-label.es.js";
 import e from "./toggle.module.scss.es.js";
-const E = P((k, N) => {
+const E = P((k, u) => {
   const {
     id: a,
     label: t,
-    hideLabel: u = !1,
+    hideLabel: N = !1,
     labelPosition: C = "left",
     helper: o,
     className: y,
     checked: g,
     defaultChecked: m,
-    onChange: r,
+    onChange: d,
     size: v,
     color: x = "primary",
     type: z = "filled",
@@ -25,14 +25,14 @@ const E = P((k, N) => {
     isLoading: i = !1,
     tooltip: $,
     ...F
-  } = k, h = o ? `${a}-helper` : void 0, [I, L] = R(m ?? !1), s = typeof g < "u", d = s ? g : I, _ = v || (p ? "large" : "default"), S = (b) => {
-    i || (s || L(b.target.checked), r == null || r(b.target.checked));
+  } = k, h = o ? `${a}-helper` : void 0, [I, L] = R(m ?? !1), s = typeof g < "u", r = s ? g : I, _ = v || (p ? "large" : "default"), S = (b) => {
+    i || (s || L(b.target.checked), d == null || d(b.target.checked));
   }, T = n(
     e["tedi-toggle"],
     e[`tedi-toggle--${_}`],
     e[`tedi-toggle--${x}-${z}`],
     {
-      [e["tedi-toggle--active"]]: d,
+      [e["tedi-toggle--active"]]: r,
       [e["tedi-toggle--disabled"]]: f || i
     },
     y
@@ -44,7 +44,7 @@ const E = P((k, N) => {
         {
           id: a,
           className: e["tedi-toggle__label"],
-          hideLabel: u,
+          hideLabel: N,
           label: t,
           tooltip: $
         }
@@ -54,20 +54,20 @@ const E = P((k, N) => {
           "input",
           {
             ...F,
-            ref: N,
+            ref: u,
             id: a,
             type: "checkbox",
             role: "switch",
             "aria-label": typeof t == "string" ? t : void 0,
             "aria-describedby": h,
             className: e["tedi-toggle__input"],
-            checked: s ? d : void 0,
+            checked: s ? r : void 0,
             defaultChecked: s ? void 0 : m,
             disabled: f || i,
             onChange: S
           }
         ),
-        /* @__PURE__ */ l("span", { className: e["tedi-toggle__slider"], children: i ? /* @__PURE__ */ l(A, { size: _ === "large" ? 16 : 10, className: e["tedi-toggle__icon"] }) : p ? /* @__PURE__ */ l(q, { name: d ? "lock_open" : "lock", size: 16, color: "inherit" }) : null })
+        /* @__PURE__ */ l("span", { className: e["tedi-toggle__slider"], children: i ? /* @__PURE__ */ l(A, { size: _ === "large" ? 16 : 10, className: e["tedi-toggle__icon"] }) : p ? /* @__PURE__ */ l(q, { name: r ? "lock_open" : "lock", size: 16, color: "inherit" }) : null })
       ] })
     ] }),
     o && /* @__PURE__ */ l(B, { id: h, ...o, className: n(e["tedi-toggle__helper"], o.className) })
@@ -75,5 +75,6 @@ const E = P((k, N) => {
 });
 E.displayName = "Toggle";
 export {
-  E as Toggle
+  E as Toggle,
+  E as default
 };

package/src/tedi/components/layout/grid/col.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),B=require("react"),N=require("../../../types/commonTypes.cjs.js"),o=require("./grid.module.scss.cjs.js"),T=require("./row-context.cjs.js"),_=m=>{const{className:$,children:g,element:d,width:w,offset:h,order:p,align:x,grow:C,shrink:S,onClick:E,xs:k,sm:q,md:v,lg:b,xl:j,xxl:y,...I}=m,{element:M}=B.useContext(T.RowContext);let l;if(d)l=d;else switch(M){case"ol":case"ul":l="li";break;case"span":l="span";break;default:l="div"}const n=(a,e="")=>{const{align:c,offset:s,order:t,width:r,grow:i,shrink:u}=a;return f.default(o.default.col,{[o.default[`align-self${e}-${c}`]]:c},{[o.default[`offset${e}-${s}`]]:s},{[o.default[`order${e}-${t}`]]:t},{[o.default[`col${e}-${r}`]]:r},{[o.default[`flex${e}-grow-${i}`]]:i},{[o.default[`flex${e}-shrink-${u}`]]:u})},R=()=>{const a={xs:k,sm:q,md:v,lg:b,xl:j,xxl:y},e=N.DEVICE_SIZES.map(s=>{const t=a[s],r=s!=="xs"?`-${s}`:"";return t?n(typeof t=="object"?{...t}:{width:t},r):void 0}),c={width:w,offset:h,order:p,align:x,grow:C,shrink:S};return f.default(...e,$,n(c))};return V.jsx(l,{"data-name":"col",...I,className:R(),onClick:E,children:g})};exports.Col=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const V=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),B=require("react"),N=require("../../../types/commonTypes.cjs.js"),o=require("./grid.module.scss.cjs.js"),T=require("./row-context.cjs.js"),m=$=>{const{className:g,children:w,element:d,width:h,offset:p,order:x,align:C,grow:S,shrink:v,onClick:E,xs:k,sm:q,md:b,lg:j,xl:M,xxl:_,...y}=$,{element:I}=B.useContext(T.RowContext);let l;if(d)l=d;else switch(I){case"ol":case"ul":l="li";break;case"span":l="span";break;default:l="div"}const n=(a,e="")=>{const{align:c,offset:s,order:t,width:r,grow:u,shrink:i}=a;return f.default(o.default.col,{[o.default[`align-self${e}-${c}`]]:c},{[o.default[`offset${e}-${s}`]]:s},{[o.default[`order${e}-${t}`]]:t},{[o.default[`col${e}-${r}`]]:r},{[o.default[`flex${e}-grow-${u}`]]:u},{[o.default[`flex${e}-shrink-${i}`]]:i})},R=()=>{const a={xs:k,sm:q,md:b,lg:j,xl:M,xxl:_},e=N.DEVICE_SIZES.map(s=>{const t=a[s],r=s!=="xs"?`-${s}`:"";return t?n(typeof t=="object"?{...t}:{width:t},r):void 0}),c={width:h,offset:p,order:x,align:C,grow:S,shrink:v};return f.default(...e,g,n(c))};return V.jsx(l,{"data-name":"col",...y,className:R(),onClick:E,children:w})};exports.Col=m;exports.default=m;

package/src/tedi/components/layout/grid/col.es.js

@@ -39,26 +39,27 @@ const H = (p) => {
       default:
         r = "div";
     }
-  const n = (a, e = "") => {
-    const { align: l, offset: s, order: o, width: c, grow: m, shrink: f } = a;
+  const a = (n, e = "") => {
+    const { align: c, offset: s, order: o, width: l, grow: m, shrink: f } = n;
     return d(
       t.col,
-      { [t[`align-self${e}-${l}`]]: l },
+      { [t[`align-self${e}-${c}`]]: c },
       { [t[`offset${e}-${s}`]]: s },
       { [t[`order${e}-${o}`]]: o },
-      { [t[`col${e}-${c}`]]: c },
+      { [t[`col${e}-${l}`]]: l },
       { [t[`flex${e}-grow-${m}`]]: m },
       { [t[`flex${e}-shrink-${f}`]]: f }
     );
   };
   return /* @__PURE__ */ b(r, { "data-name": "col", ...V, className: (() => {
-    const a = { xs: S, sm: v, md: B, lg: I, xl: M, xxl: N }, e = y.map((s) => {
-      const o = a[s], c = s !== "xs" ? `-${s}` : "";
-      return o ? n(typeof o == "object" ? { ...o } : { width: o }, c) : void 0;
-    }), l = { width: h, offset: w, order: g, align: E, grow: x, shrink: k };
-    return d(...e, $, n(l));
+    const n = { xs: S, sm: v, md: B, lg: I, xl: M, xxl: N }, e = y.map((s) => {
+      const o = n[s], l = s !== "xs" ? `-${s}` : "";
+      return o ? a(typeof o == "object" ? { ...o } : { width: o }, l) : void 0;
+    }), c = { width: h, offset: w, order: g, align: E, grow: x, shrink: k };
+    return d(...e, $, a(c));
   })(), onClick: C, children: u });
 };
 export {
-  H as Col
+  H as Col,
+  H as default
 };

package/src/tedi/components/layout/grid/row.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),T=require("../../../types/commonTypes.cjs.js"),t=require("./grid.module.scss.cjs.js"),_=require("./row-context.cjs.js"),D=p=>{const{children:w,className:j,element:g="div",cols:y,alignItems:v,justifyContent:S,gap:x,gutter:C,gutterY:E,gutterX:I,wrap:q,direction:R,xs:M,sm:V,md:X,lg:Y,xl:b,xxl:h,...B}=p,u=(l,e="")=>{const{cols:c,justifyContent:r,alignItems:o,gap:s,direction:i,wrap:m,gutter:n,gutterX:a,gutterY:d}=l;return f.default(t.default.row,{[t.default[`row-cols${e}-${c}`]]:c},{[t.default[`justify-content${e}-${r}`]]:r},{[t.default[`align-items${e}-${o}`]]:o},{[t.default[`gap${e}-${s}`]]:s||s===0},{[t.default[`g${e}-${n}`]]:n||n===0},{[t.default[`gx${e}-${a}`]]:a||a===0},{[t.default[`gy${e}-${d}`]]:d||d===0},{[`flex${e}-${i}`]:i},{[t.default[`flex${e}-${m}`]]:m})},N=()=>{const l={xs:M,sm:V,md:X,lg:Y,xl:b,xxl:h},e=T.DEVICE_SIZES.map(r=>{const o=l[r],s=r!=="xs"?`-${r}`:"";return o?u(typeof o=="object"?{...o}:{cols:o},s):void 0}),c={cols:y,justifyContent:S,alignItems:v,gap:x,direction:R,wrap:q,gutter:C,gutterX:I,gutterY:E};return f.default(...e,j,u(c))};return $.jsx(_.RowContext.Provider,{value:{element:g},children:$.jsx(g,{"data-name":"row",...B,className:N(),children:w})})};exports.Row=D;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const $=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),T=require("../../../types/commonTypes.cjs.js"),t=require("./grid.module.scss.cjs.js"),D=require("./row-context.cjs.js"),p=w=>{const{children:j,className:v,element:i="div",cols:y,alignItems:S,justifyContent:x,gap:C,gutter:E,gutterY:I,gutterX:q,wrap:M,direction:R,xs:_,sm:V,md:X,lg:Y,xl:b,xxl:h,...B}=w,l=(c,e="")=>{const{cols:u,justifyContent:o,alignItems:s,gap:r,direction:g,wrap:m,gutter:n,gutterX:a,gutterY:d}=c;return f.default(t.default.row,{[t.default[`row-cols${e}-${u}`]]:u},{[t.default[`justify-content${e}-${o}`]]:o},{[t.default[`align-items${e}-${s}`]]:s},{[t.default[`gap${e}-${r}`]]:r||r===0},{[t.default[`g${e}-${n}`]]:n||n===0},{[t.default[`gx${e}-${a}`]]:a||a===0},{[t.default[`gy${e}-${d}`]]:d||d===0},{[`flex${e}-${g}`]:g},{[t.default[`flex${e}-${m}`]]:m})},N=()=>{const c={xs:_,sm:V,md:X,lg:Y,xl:b,xxl:h},e=T.DEVICE_SIZES.map(o=>{const s=c[o],r=o!=="xs"?`-${o}`:"";return s?l(typeof s=="object"?{...s}:{cols:s},r):void 0}),u={cols:y,justifyContent:x,alignItems:S,gap:C,direction:R,wrap:M,gutter:E,gutterX:q,gutterY:I};return f.default(...e,v,l(u))};return $.jsx(D.RowContext.Provider,{value:{element:i},children:$.jsx(i,{"data-name":"row",...B,className:N(),children:j})})};exports.Row=p;exports.default=p;