@kvdbil/components 13.1.1 → 13.1.2

package/cjs/components/Button/index.js

@@ -1,34 +1,39 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../theme.js"),l=require("../Spinner/index.js"),s=require("../../typography/ButtonText/index.js"),i=require("./styles.js");function a(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}var o=a(e),n=a(t);const u=n.default.button`
-  ${s.BasicButtonFontStyle}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("../../theme.js"),r=require("../Spinner/index.js"),i=require("../../typography/ButtonText/index.js"),a=require("./styles.js");function s(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var o=s(e),n=s(t);const u=n.default.button`
+  ${i.BasicButtonFontStyle}
   box-sizing: border-box;
   outline: none;
   cursor: pointer;
   user-select: none;
   position: relative;
   border: none;
-  width: ${({fullWidth:y})=>y&&"100%"};
+  min-width: ${({minWidth:x})=>x||"auto"};
+  width: ${({fullWidth:x})=>x&&"100%"};
   display: flex;
   align-items: center;
-  justify-content: ${({sufixIcon:y,prefixIcon:x,isLoading:b})=>b||!y&&!x?"center":"space-between"};
+  justify-content: ${({sufixIcon:x,prefixIcon:b,isLoading:z})=>z||!x&&!b?"center":"space-between"};
 
-  ${({size:y="small"})=>i.fontSizes[y]||s.ButtonRegularTextStyle}
-  ${({size:y,isLoading:x,minWidth:b})=>t.css`
-    ${y==="smaller"&&i.smallerSizeStyles(x,b)}
-    ${y==="small"&&i.smallSizeStyles(x,b)}
-    ${y==="regular"&&i.regularSizeStyles(x,b)}
-    ${y==="large"&&i.largeSizeStyles(x,b)}
+  ${({size:x="small"})=>a.fontSizes[x]||i.ButtonRegularTextStyle}
+  ${({size:x})=>t.css`
+    ${(x==="smaller"||x==="small")&&a.smallerAndSmallSizeStyles()}
+    ${x==="regular"&&a.regularSizeStyles()}
+    ${x==="large"&&a.largeSizeStyles()}
   `}
   background-color: transparent;
   transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
-  ${({variant:y="solid",color:x="primary",disabled:b,theme:h})=>t.css`
-    ${b?i.disabledColorStyles(h,y):i.colorStyles[y](h,x)}
+  ${({variant:x="solid",color:b="primary",disabled:z,theme:S})=>t.css`
+    ${z?a.disabledColorStyles(S,x):a.colorStyles[x](S,b)}
   `}
   &:focus-visible {
-    box-shadow: 0px 0px 0px 1px ${({theme:y})=>y.colors.gray.light5};
+    box-shadow: 0px 0px 0px 1px ${({theme:x})=>x.colors.gray.light5};
   }
 `,d={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},f={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},c=n.default.span`
   display: flex;
-  margin-right: ${({type:y,size:x})=>y==="prefix"?f[x]:0};
-  margin-left: ${({type:y,size:x})=>y==="sufix"?f[x]:0};
-  font-size: ${({size:y})=>d[y]};
-`,m=n.default(l.default)``,p={smaller:1,small:1,regular:1.5,large:1.5},g=e.forwardRef(({size:y="small",color:x="primary",variant:b="solid",fullWidth:h=!1,isDisabled:j=!1,isLoading:z=!1,children:$,sufixIcon:S,prefixIcon:v,minWidth:q,as:B="button",...E},I)=>o.default.createElement(u,{...E,as:B,minWidth:q,color:x,disabled:j||z,fullWidth:h,theme:r.default,variant:b,size:y,isLoading:z,ref:I,prefixIcon:v,sufixIcon:S},z?o.default.createElement(m,{color:r.default.colors.gray.light1,size:p[y]}):o.default.createElement(o.default.Fragment,null,v&&o.default.createElement(c,{size:y,type:"prefix"},v),typeof $=="string"?o.default.createElement("span",null,$):$,S&&o.default.createElement(c,{size:y,type:"sufix"},S))));g.displayName="Button",exports.Button=g,exports.default=g;
+  margin-right: ${({type:x,size:b})=>x==="prefix"?f[b]:0};
+  margin-left: ${({type:x,size:b})=>x==="sufix"?f[b]:0};
+  font-size: ${({size:x})=>d[x]};
+  opacity: ${({isLoading:x})=>x?0:1};
+`,m=n.default(r.default)`
+  position: absolute;
+`,p=n.default.span`
+  opacity: ${({isLoading:x})=>x?0:1};
+`,g={smaller:1,small:1,regular:1.5,large:1.5},y=e.forwardRef(({size:x="small",color:b="primary",variant:z="solid",fullWidth:S=!1,isDisabled:j=!1,isLoading:$=!1,children:q,sufixIcon:v,prefixIcon:E,minWidth:B,as:I="button",...W},w)=>{return o.default.createElement(u,{...W,as:I,minWidth:B,color:b,disabled:j||$,fullWidth:S,theme:l.default,variant:z,size:x,isLoading:$,ref:w,prefixIcon:E,sufixIcon:v},o.default.createElement(o.default.Fragment,null,E&&o.default.createElement(c,{size:x,type:"prefix",isLoading:$},E),(L=$,typeof(h=q)=="string"||typeof h=="number"?o.default.createElement(p,{isLoading:L},h):o.default.isValidElement(h)?o.default.cloneElement(h,{style:{...h.props.style,opacity:L?0:1}}):h),v&&o.default.createElement(c,{size:x,type:"sufix",isLoading:$},v),$&&o.default.createElement(m,{color:l.default.colors.gray.light1,size:g[x]})));var h,L});y.displayName="Button",exports.Button=y,exports.default=y;

package/cjs/components/Button/styles.js

@@ -1,62 +1,55 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("../../typography/ButtonText/index.js");require("react"),require("styled-components");const r={smaller:o.ButtonSmallTextStyle,small:o.ButtonRegularTextStyle,regular:o.ButtonRegularTextStyle,large:o.ButtonLargeTextStyle},n=(s,i)=>`
-  color: ${s.colors[i].main};
-  border: 2px solid ${s.colors[i].main};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("../../typography/ButtonText/index.js");require("react"),require("styled-components");const r={smaller:o.ButtonSmallTextStyle,small:o.ButtonRegularTextStyle,regular:o.ButtonRegularTextStyle,large:o.ButtonLargeTextStyle},l=(s,a)=>`
+  color: ${s.colors[a].main};
+  border: 2px solid ${s.colors[a].main};
   background-color: transparent;
 
   :hover {
-      border: 2px solid ${s.colors[i].dark};
-      color: ${s.colors[i].dark};
+      border: 2px solid ${s.colors[a].dark};
+      color: ${s.colors[a].dark};
   }
 
   :active {
-    border: 2px solid ${s.colors[i].light};
-    color: ${s.colors[i].light};
+    border: 2px solid ${s.colors[a].light};
+    color: ${s.colors[a].light};
   }
-`,e=(s,i)=>`
-  color: ${i!=="neutral"?s.colors[i].main:s.colors.neutral.light};
+`,n=(s,a)=>`
+  color: ${a!=="neutral"?s.colors[a].main:s.colors.neutral.light};
   background-color: transparent;
 
   :hover {
-    color: ${s.colors[i].dark};
+    color: ${s.colors[a].dark};
   }
 
   :active {
-    color: ${s.colors[i].dark};
+    color: ${s.colors[a].dark};
   }
-`,l=s=>`
+`,e=s=>`
   color: ${s.colors.gray.light1};
   cursor: not-allowed;
-`,t={solid:(s,i)=>`
+`,t={solid:(s,a)=>`
   color: ${s.colors.text.light};
-  background-color: ${s.colors[i].main};
+  background-color: ${s.colors[a].main};
 
   :hover {
-    border-color: ${s.colors[i].dark};
-    background-color: ${s.colors[i].dark};
+    border-color: ${s.colors[a].dark};
+    background-color: ${s.colors[a].dark};
   }
 
   :active {
-    border-color: ${s.colors[i].light};
-    background-color: ${s.colors[i].light}
+    border-color: ${s.colors[a].light};
+    background-color: ${s.colors[a].light}
   }
-`,outline:n,flat:e};exports.colorStyles=t,exports.disabledColorStyles=(s,i)=>i==="solid"?`
-    ${l(s)};
-    background-color: ${s.colors.gray.light4};`:i==="outline"?`
-    ${l(s)};
-    border: 2px solid ${s.colors.gray.light1};`:l(s),exports.flatColorStyles=e,exports.fontSizes=r,exports.largeSizeStyles=(s,i="auto")=>`
-  min-width: ${s?"8.5rem":i};
-  padding: 0 1.5rem;
+`,outline:l,flat:n};exports.colorStyles=t,exports.disabledColorStyles=(s,a)=>a==="solid"?`
+    ${e(s)};
+    background-color: ${s.colors.gray.light4};`:a==="outline"?`
+    ${e(s)};
+    border: 2px solid ${s.colors.gray.light1};`:e(s),exports.flatColorStyles=n,exports.fontSizes=r,exports.largeSizeStyles=()=>`
+  padding: 0.25rem 1.5rem;
   min-height: 3.75rem;
-`,exports.outlineColorStyles=n,exports.regularSizeStyles=(s,i="auto")=>`
-  min-width: ${s?"6rem":i};
-  padding: 0 1.5rem;
+`,exports.outlineColorStyles=l,exports.regularSizeStyles=()=>`
+  padding: 0.25rem 1.5rem;
   min-height: 3rem;
-`,exports.smallSizeStyles=(s,i="auto")=>`
-  min-width: ${s?"4.5rem":i};
-  padding: 0 0.75rem;
-  min-height: 2.5rem;
-`,exports.smallerSizeStyles=(s,i="auto")=>`
-  min-width: ${s?"4rem":i};
-  padding: 0 0.75rem;
+`,exports.smallerAndSmallSizeStyles=()=>`
+  padding: 0.25rem 0.75rem;
   min-height: 2.5rem;
 `;

package/cjs/components/Textfield/index.js

@@ -12,7 +12,7 @@
   position: relative;
   padding: 0;
   display: block;
-`,m=s.default.div`
+`,h=s.default.div`
   display: flex;
   text-align: center;
   align-items: center;
@@ -30,7 +30,7 @@
   ${({disabled:y})=>y&&i}
   ${({hasError:y})=>y&&n}
   ${({centered:y})=>y&&"text-align: center;"}
-`,h=s.default.input`
+`,m=s.default.input`
   ${l.BodyTextStyle}
   width: 100%;
   cursor: text;
@@ -63,4 +63,4 @@
 `,x=s.default.span`
   display: block;
   color: ${({theme:y})=>y.colors.error.dark};
-`,g=({placeholder:y="",isDisabled:k=!1,centered:F=!1,hasError:w=!1,className:z,helperText:j,label:E="",onBlur:L=()=>null,onFocus:P=()=>null,forwardRef:_,suffix:T,name:v=a.generateNameHash("text-input"),errors:B,isAutoFocused:A=!1,...N})=>{const[q,S]=e.useState(!1),C=Boolean(N.value);return d.default.createElement(u,{className:z},d.default.createElement(m,{isFocused:q,disabled:k,centered:F,hasError:w,hasPlaceholder:!!y},d.default.createElement(h,{...N,id:v,name:v,"aria-label":E||v,ref:_,onFocus:$=>{S(!0),P($)},onBlur:$=>{S(!1),L($)},disabled:k,placeholder:E&&!q?"":y,autoFocus:A}),T&&d.default.createElement(f,null,T)),E&&d.default.createElement(t.Label,{htmlFor:v,isFocused:q,centered:F,hasError:w,hasValue:C,disabled:k},E),(j||B)&&d.default.createElement(p,{centered:F},j&&d.default.createElement(b,null,j),B&&B.map($=>d.default.createElement(x,{key:$},$))))};exports.TextField=g,exports.default=g;
+`,g=({placeholder:y="",isDisabled:k=!1,centered:B=!1,hasError:w=!1,className:z,helperText:F,label:E="",onBlur:L=()=>null,onFocus:P=()=>null,forwardRef:_,suffix:T,name:j=a.generateNameHash("text-input"),errors:v,isAutoFocused:C=!1,...A})=>{const[q,N]=e.useState(!1),D=Boolean(A.value),S=v&&Array.isArray(v)&&(v==null?void 0:v.length)>0;return d.default.createElement(u,{className:z},d.default.createElement(h,{isFocused:q,disabled:k,centered:B,hasError:w,hasPlaceholder:!!y},d.default.createElement(m,{...A,id:j,name:j,"aria-label":E||j,ref:_,onFocus:$=>{N(!0),P($)},onBlur:$=>{N(!1),L($)},disabled:k,placeholder:E&&!q?"":y,autoFocus:C}),T&&d.default.createElement(f,null,T)),E&&d.default.createElement(t.Label,{htmlFor:j,isFocused:q,centered:B,hasError:w,hasValue:D,disabled:k},E),(F||S)&&d.default.createElement(p,{centered:B},F&&d.default.createElement(b,null,F),S&&v.map($=>d.default.createElement(x,{key:$},$))))};exports.TextField=g,exports.default=g;

package/esm/components/Button/index.js

@@ -1,34 +1,39 @@
-import l,{forwardRef as x}from"react";import i,{css as c}from"styled-components";import u from"../../theme.js";import B from"../Spinner/index.js";import{BasicButtonFontStyle as E,ButtonRegularTextStyle as j}from"../../typography/ButtonText/index.js";import{fontSizes as h,smallerSizeStyles as w,smallSizeStyles as z,regularSizeStyles as R,largeSizeStyles as k,disabledColorStyles as C,colorStyles as F}from"./styles.js";const T=i.button`
-  ${E}
+import r,{forwardRef as w}from"react";import n,{css as y}from"styled-components";import f from"../../theme.js";import h from"../Spinner/index.js";import{BasicButtonFontStyle as C,ButtonRegularTextStyle as R}from"../../typography/ButtonText/index.js";import{fontSizes as T,smallerAndSmallSizeStyles as z,regularSizeStyles as A,largeSizeStyles as _,disabledColorStyles as k,colorStyles as F}from"./styles.js";const p=0,N=n.button`
+  ${C}
   box-sizing: border-box;
   outline: none;
   cursor: pointer;
   user-select: none;
   position: relative;
   border: none;
+  min-width: ${({minWidth:e})=>e||"auto"};
   width: ${({fullWidth:e})=>e&&"100%"};
   display: flex;
   align-items: center;
-  justify-content: ${({sufixIcon:e,prefixIcon:r,isLoading:t})=>!t&&(e||r)?"space-between":"center"};
+  justify-content: ${({sufixIcon:e,prefixIcon:t,isLoading:s})=>!s&&(e||t)?"space-between":"center"};
 
-  ${({size:e="small"})=>h[e]||j}
-  ${({size:e,isLoading:r,minWidth:t})=>c`
-    ${e==="smaller"&&w(r,t)}
-    ${e==="small"&&z(r,t)}
-    ${e==="regular"&&R(r,t)}
-    ${e==="large"&&k(r,t)}
+  ${({size:e="small"})=>T[e]||R}
+  ${({size:e})=>y`
+    ${(e==="smaller"||e==="small")&&z()}
+    ${e==="regular"&&A()}
+    ${e==="large"&&_()}
   `}
   background-color: transparent;
   transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
-  ${({variant:e="solid",color:r="primary",disabled:t,theme:o})=>c`
-    ${t?C(o,e):F[e](o,r)}
+  ${({variant:e="solid",color:t="primary",disabled:s,theme:a})=>y`
+    ${s?k(a,e):F[e](a,t)}
   `}
   &:focus-visible {
     box-shadow: 0px 0px 0px 1px ${({theme:e})=>e.colors.gray.light5};
   }
-`,_={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},y={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},g=i.span`
+`,O={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},g={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},S=n.span`
   display: flex;
-  margin-right: ${({type:e,size:r})=>e==="prefix"?y[r]:0};
-  margin-left: ${({type:e,size:r})=>e==="sufix"?y[r]:0};
-  font-size: ${({size:e})=>_[e]};
-`,v=i(B)``,M={smaller:1,small:1,regular:1.5,large:1.5},p=x(({size:e="small",color:r="primary",variant:t="solid",fullWidth:o=!1,isDisabled:f=!1,isLoading:s=!1,children:a,sufixIcon:n,prefixIcon:m,minWidth:S,as:$="button",...b},d)=>l.createElement(T,{...b,as:$,minWidth:S,color:r,disabled:f||s,fullWidth:o,theme:u,variant:t,size:e,isLoading:s,ref:d,prefixIcon:m,sufixIcon:n},s?l.createElement(v,{color:u.colors.gray.light1,size:M[e]}):l.createElement(l.Fragment,null,m&&l.createElement(g,{size:e,type:"prefix"},m),typeof a=="string"?l.createElement("span",null,a):a,n&&l.createElement(g,{size:e,type:"sufix"},n))));p.displayName="Button";export{p as Button,p as default};
+  margin-right: ${({type:e,size:t})=>e==="prefix"?g[t]:0};
+  margin-left: ${({type:e,size:t})=>e==="sufix"?g[t]:0};
+  font-size: ${({size:e})=>O[e]};
+  opacity: ${({isLoading:e})=>e?p:1};
+`,v=n(h)`
+  position: absolute;
+`,D=n.span`
+  opacity: ${({isLoading:e})=>e?p:1};
+`,G={smaller:1,small:1,regular:1.5,large:1.5},c=w(({size:e="small",color:t="primary",variant:s="solid",fullWidth:a=!1,isDisabled:$=!1,isLoading:o=!1,children:b,sufixIcon:m,prefixIcon:i,minWidth:d,as:x="button",...E},B)=>{const j=(l,u)=>typeof l=="string"||typeof l=="number"?r.createElement(D,{isLoading:u},l):r.isValidElement(l)?r.cloneElement(l,{style:{...l.props.style,opacity:u?p:1}}):l;return r.createElement(N,{...E,as:x,minWidth:d,color:t,disabled:$||o,fullWidth:a,theme:f,variant:s,size:e,isLoading:o,ref:B,prefixIcon:i,sufixIcon:m},r.createElement(r.Fragment,null,i&&r.createElement(S,{size:e,type:"prefix",isLoading:o},i),j(b,o),m&&r.createElement(S,{size:e,type:"sufix",isLoading:o},m),o&&r.createElement(v,{color:f.colors.gray.light1,size:G[e]})))});c.displayName="Button";export{c as Button,c as default};

package/esm/components/Button/styles.js

@@ -1,20 +1,13 @@
-import{ButtonSmallTextStyle as n,ButtonRegularTextStyle as t,ButtonLargeTextStyle as a}from"../../typography/ButtonText/index.js";import"react";import"styled-components";const c={smaller:n,small:t,regular:t,large:a},d=(o,r="auto")=>`
-  min-width: ${o?"4rem":r};
-  padding: 0 0.75rem;
+import{ButtonSmallTextStyle as a,ButtonRegularTextStyle as s,ButtonLargeTextStyle as c}from"../../typography/ButtonText/index.js";import"react";import"styled-components";const i={smaller:a,small:s,regular:s,large:c},d=()=>`
+  padding: 0.25rem 0.75rem;
   min-height: 2.5rem;
-`,e=(o,r="auto")=>`
-  min-width: ${o?"4.5rem":r};
-  padding: 0 0.75rem;
-  min-height: 2.5rem;
-`,g=(o,r="auto")=>`
-  min-width: ${o?"6rem":r};
-  padding: 0 1.5rem;
+`,e=()=>`
+  padding: 0.25rem 1.5rem;
   min-height: 3rem;
-`,u=(o,r="auto")=>`
-  min-width: ${o?"8.5rem":r};
-  padding: 0 1.5rem;
+`,g=()=>`
+  padding: 0.25rem 1.5rem;
   min-height: 3.75rem;
-`,$=(o,r)=>`
+`,u=(o,r)=>`
   color: ${o.colors.text.light};
   background-color: ${o.colors[r].main};
 
@@ -27,7 +20,7 @@ import{ButtonSmallTextStyle as n,ButtonRegularTextStyle as t,ButtonLargeTextStyl
     border-color: ${o.colors[r].light};
     background-color: ${o.colors[r].light}
   }
-`,s=(o,r)=>`
+`,t=(o,r)=>`
   color: ${o.colors[r].main};
   border: 2px solid ${o.colors[r].main};
   background-color: transparent;
@@ -41,7 +34,7 @@ import{ButtonSmallTextStyle as n,ButtonRegularTextStyle as t,ButtonLargeTextStyl
     border: 2px solid ${o.colors[r].light};
     color: ${o.colors[r].light};
   }
-`,i=(o,r)=>`
+`,n=(o,r)=>`
   color: ${r!=="neutral"?o.colors[r].main:o.colors.neutral.light};
   background-color: transparent;
 
@@ -55,8 +48,8 @@ import{ButtonSmallTextStyle as n,ButtonRegularTextStyle as t,ButtonLargeTextStyl
 `,l=o=>`
   color: ${o.colors.gray.light1};
   cursor: not-allowed;
-`,m=(o,r)=>r==="solid"?`
+`,$=(o,r)=>r==="solid"?`
     ${l(o)};
     background-color: ${o.colors.gray.light4};`:r==="outline"?`
     ${l(o)};
-    border: 2px solid ${o.colors.gray.light1};`:l(o),y={solid:$,outline:s,flat:i};export{y as colorStyles,m as disabledColorStyles,i as flatColorStyles,c as fontSizes,u as largeSizeStyles,s as outlineColorStyles,g as regularSizeStyles,e as smallSizeStyles,d as smallerSizeStyles};
+    border: 2px solid ${o.colors.gray.light1};`:l(o),y={solid:u,outline:t,flat:n};export{y as colorStyles,$ as disabledColorStyles,n as flatColorStyles,i as fontSizes,g as largeSizeStyles,t as outlineColorStyles,e as regularSizeStyles,d as smallerAndSmallSizeStyles};

package/esm/components/Textfield/index.js

@@ -1,4 +1,4 @@
-import o,{useState as v}from"react";import t,{css as p}from"styled-components";import{Label as B}from"../FieldLabel.js";import{BodyTextStyle as T,CaptionStyle as j}from"../../typography/BodyText/index.js";import{generateNameHash as w}from"../../shared/helpers.js";import"../../shared/media-queries.js";const H=p`
+import t,{useState as B}from"react";import o,{css as p}from"styled-components";import{Label as T}from"../FieldLabel.js";import{BodyTextStyle as j,CaptionStyle as w}from"../../typography/BodyText/index.js";import{generateNameHash as A}from"../../shared/helpers.js";import"../../shared/media-queries.js";const H=p`
   border: 1px solid ${({theme:e})=>e.colors.gray.light2};
   color: ${({theme:e})=>e.colors.text.disabled};
   fill: ${({theme:e})=>e.colors.text.disabled};
@@ -8,11 +8,11 @@ import o,{useState as v}from"react";import t,{css as p}from"styled-components";i
   border: 2px solid ${({theme:e})=>e.colors.gray.dark5};
   color: ${({theme:e})=>e.colors.text.dark};
   fill: ${({theme:e})=>e.colors.text.dark};
-`,C=t.div`
+`,C=o.div`
   position: relative;
   padding: 0;
   display: block;
-`,L=t.div`
+`,L=o.div`
   display: flex;
   text-align: center;
   align-items: center;
@@ -26,12 +26,12 @@ import o,{useState as v}from"react";import t,{css as p}from"styled-components";i
 
   padding: 0.75rem 0.6rem;
 
-  ${({hasError:e,isFocused:l})=>!e&&l&&z}
+  ${({hasError:e,isFocused:r})=>!e&&r&&z}
   ${({disabled:e})=>e&&H}
   ${({hasError:e})=>e&&I}
   ${({centered:e})=>e&&"text-align: center;"}
-`,W=t.input`
-  ${T}
+`,W=o.input`
+  ${j}
   width: 100%;
   cursor: text;
   outline: none;
@@ -42,7 +42,7 @@ import o,{useState as v}from"react";import t,{css as p}from"styled-components";i
     color: ${({theme:e})=>e.colors.text.disabled};
     fill: ${({theme:e})=>e.colors.text.disabled};
   }
-`,_=t.span`
+`,_=o.span`
   display: flex;
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   font-size: 1.25rem;
@@ -52,15 +52,15 @@ import o,{useState as v}from"react";import t,{css as p}from"styled-components";i
     width: 1.375rem;
     height: 1.375rem;
   }
-`,q=t.div`
-  ${j}
+`,q=o.div`
+  ${w}
   margin-top: 0.25rem;
 
   ${({centered:e})=>e&&"width: 100%; text-align: center;"}
-`,A=t.span`
+`,N=o.span`
   display: block;
   color: ${({theme:e})=>e.colors.text.disabled};
-`,N=t.span`
+`,P=o.span`
   display: block;
   color: ${({theme:e})=>e.colors.error.dark};
-`,y=({placeholder:e="",isDisabled:l=!1,centered:n=!1,hasError:m=!1,className:g,helperText:d,label:s="",onBlur:b=()=>null,onFocus:$=()=>null,forwardRef:h,suffix:u,name:a=w("text-input"),errors:i,isAutoFocused:k=!1,...x})=>{const[c,f]=v(!1),F=Boolean(x.value),E=r=>{f(!0),$(r)},S=r=>{f(!1),b(r)};return o.createElement(C,{className:g},o.createElement(L,{isFocused:c,disabled:l,centered:n,hasError:m,hasPlaceholder:!!e},o.createElement(W,{...x,id:a,name:a,"aria-label":s||a,ref:h,onFocus:E,onBlur:S,disabled:l,placeholder:s&&!c?"":e,autoFocus:k}),u&&o.createElement(_,null,u)),s&&o.createElement(B,{htmlFor:a,isFocused:c,centered:n,hasError:m,hasValue:F,disabled:l},s),(d||i)&&o.createElement(q,{centered:n},d&&o.createElement(A,null,d),i&&i.map(r=>o.createElement(N,{key:r},r))))};export{y as TextField,y as default};
+`,g=({placeholder:e="",isDisabled:r=!1,centered:d=!1,hasError:m=!1,className:b,helperText:i,label:a="",onBlur:h=()=>null,onFocus:$=()=>null,forwardRef:k,suffix:u,name:n=A("text-input"),errors:s,isAutoFocused:E=!1,...x})=>{const[c,y]=B(!1),F=Boolean(x.value),f=s&&Array.isArray(s)&&(s==null?void 0:s.length)>0,v=l=>{y(!0),$(l)},S=l=>{y(!1),h(l)};return t.createElement(C,{className:b},t.createElement(L,{isFocused:c,disabled:r,centered:d,hasError:m,hasPlaceholder:!!e},t.createElement(W,{...x,id:n,name:n,"aria-label":a||n,ref:k,onFocus:v,onBlur:S,disabled:r,placeholder:a&&!c?"":e,autoFocus:E}),u&&t.createElement(_,null,u)),a&&t.createElement(T,{htmlFor:n,isFocused:c,centered:d,hasError:m,hasValue:F,disabled:r},a),(i||f)&&t.createElement(q,{centered:d},i&&t.createElement(N,null,i),f&&s.map(l=>t.createElement(P,{key:l},l))))};export{g as TextField,g as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "13.1.1",
+  "version": "13.1.2",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/Button/index.d.ts

@@ -15,5 +15,5 @@ interface Props {
     as?: keyof JSX.IntrinsicElements;
 }
 export declare type ButtonProps = ComponentPropsWithRef<'button'> & Props;
-export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "slot" | "style" | "title" | "type" | "name" | "key" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "fullWidth" | "sufixIcon" | "prefixIcon" | "isLoading" | "minWidth" | "variant" | "isDisabled"> & React.RefAttributes<HTMLElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "slot" | "style" | "title" | "type" | "name" | "key" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "minWidth" | "fullWidth" | "sufixIcon" | "prefixIcon" | "isLoading" | "variant" | "isDisabled"> & React.RefAttributes<HTMLElement>>;
 export default Button;

package/types/components/Button/styles.d.ts

@@ -6,10 +6,9 @@ export declare const fontSizes: {
     regular: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
     large: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 };
-export declare const smallerSizeStyles: (isLoading?: boolean | undefined, minWidth?: string) => string;
-export declare const smallSizeStyles: (isLoading?: boolean | undefined, minWidth?: string) => string;
-export declare const regularSizeStyles: (isLoading?: boolean | undefined, minWidth?: string) => string;
-export declare const largeSizeStyles: (isLoading?: boolean | undefined, minWidth?: string) => string;
+export declare const smallerAndSmallSizeStyles: () => string;
+export declare const regularSizeStyles: () => string;
+export declare const largeSizeStyles: () => string;
 export declare const outlineColorStyles: (theme: Theme, color: Color) => string;
 export declare const flatColorStyles: (theme: Theme, color: Color) => string;
 export declare const disabledColorStyles: (theme: Theme, variant: Variant) => string;