@kvdbil/components 8.4.0 → 8.4.1

package/cjs/components/FieldLabel.js

@@ -1,34 +1,39 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../typography/BodyText/index.js");function o(i){return i&&typeof i=="object"&&"default"in i?i:{default:i}}require("react"),require("../shared/media-queries.js");var t=o(e);const s=e.css`
-  color: ${({theme:i,hasError:d})=>d?i.colors.error.dark:i.colors.text.dark};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../typography/BodyText/index.js");function o(c){return c&&typeof c=="object"&&"default"in c?c:{default:c}}require("react"),require("../shared/media-queries.js");var t=o(e);const s=e.css`
+  color: ${({theme:c,hasError:n})=>n?c.colors.error.dark:c.colors.text.dark};
 `,a=e.css`
-  color: ${({theme:i})=>i.colors.gray.light1};
-  background-color: ${({theme:i})=>i.colors.background.light};
+  color: ${({theme:c})=>c.colors.gray.light1};
+  background-color: ${({theme:c})=>c.colors.background.light};
 `,l=e.css`
-  text-align: center;
-  width: 100%;
+  width: max-content;
   left: 0;
-`,c=t.default.label`
-  ${r.CaptionStyle}
+  right: 0;
+  margin-right: auto;
+  margin-left: auto;
+`,i=t.default.label`
+  ${r.BodyTextStyle}
   pointer-events: none;
   position: absolute;
+  max-width: calc(100% - 2rem);
   z-index: 1;
-  top: ${({height:i})=>i?`${i}rem`:"1rem"};
+  top: ${({height:c})=>c?`${c}rem`:"0.75rem"};
   left: calc(0.75rem + 2px);
   transition: 150ms;
-  height: 16px;
-  line-height: 16px;
-  font-size: 16px;
-  color: ${({theme:i})=>i.colors.gray.dark5};
+  color: ${({theme:c})=>c.colors.gray.dark5};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 
-  ${({centered:i})=>i&&l}
-  ${({hasValue:i,isFocused:d,height:h,hasError:u})=>(i||d)&&((m,g)=>e.css`
-  background-color: ${({theme:n})=>n.colors.background.light};
-  transform: scale(0.75) translateY(${m});
+  ${({hasValue:c,isFocused:n,height:h=.7,hasError:u})=>(c||n)&&((m,g)=>e.css`
+  background-color: ${({theme:d})=>d.colors.background.light};
+  transform: translateY(${m});
+  line-height: 0.875rem;
+  font-size: 0.75rem;
   transform-origin: 0 0;
   padding: 0 ${"0.5rem"};
   left: ${"0.5rem"};
-  color: ${({theme:n})=>g?n.colors.error.dark:n.colors.text.dark};
-`)(h?`-${1.35*(h+.25)}rem`:"-1.8rem",u)}
-  ${({isFocused:i})=>i&&s}
-  ${({disabled:i})=>i&&a}
-`;exports.Label=c;
+  color: ${({theme:d})=>g?d.colors.error.dark:d.colors.text.dark};
+`)(`-${h+.4}rem`,u)}
+  ${({centered:c,hasValue:n,isFocused:h})=>(n||h)&&c&&l}
+  ${({isFocused:c})=>c&&s}
+  ${({disabled:c})=>c&&a}
+`;exports.Label=i;

package/cjs/components/Select/index.js

@@ -41,4 +41,4 @@
 
   transform: ${y=>y.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
   transform-origin: 50% 60%;
-`,g=({selectProps:{menuIsOpen:y=!1},isFocused:D=!1,isDisabled:I})=>d.default.createElement(h,{$isDisabled:I,$isFocused:D,$isMenuOpen:y,$theme:a.default}),b=({className:y,color:D="primary",forwardRef:I,hasError:L=!1,height:v,helperText:C,isDisabled:S=!1,onBlur:M=()=>null,onFocus:N=()=>null,onInputChange:O=()=>null,placeholder:_="",name:B,...$})=>{var q;const[k,T]=e.useState(!1),[R,z]=e.useState(""),E=({isSelected:x,isFocused:F,isDisabled:w})=>x?a.default.colors[D].main:w?a.default.colors.background.light:F?a.default.colors.background.gray:a.default.colors.background.light,A=((x,F)=>F?a.default.colors.error.main:x?a.default.colors.text.dark:a.default.colors.gray.light1)(k,L);return d.default.createElement(u,{className:y},$.label&&d.default.createElement(l.Label,{htmlFor:B,height:v,isFocused:k,hasValue:Boolean($.value||R),disabled:S,theme:a.default,hasError:L},$.label),$.prefix&&d.default.createElement(m,{isDisabled:S,isFocused:k},$.prefix),d.default.createElement(s.default,{...$,inputId:B,name:B,ref:I,isDisabled:S,onInputChange:(x,F)=>{O(x,F),z(x)},placeholder:_,onFocus:x=>{T(!0),N(x)},onBlur:x=>{T(!1),M(x)},styles:{control:x=>({...x,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:a.default.colors.background.light,borderColor:A,boxShadow:"none","&:hover":{borderColor:"none"},...f(S),...c(Boolean($.prefix))}),placeholder:x=>({...x,display:k?"static":"none"}),singleValue:x=>({...x,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:x=>({...x,padding:"8px 0"}),menu:x=>({...x,borderRadius:0,boxShadow:a.default.elevations.elevation2,zIndex:2,padding:"0"}),option:(x,{isSelected:F,isFocused:w,isDisabled:j})=>({...x,padding:"1rem",cursor:j?"not-allowed":"pointer","&:hover":{background:E({isSelected:F,isFocused:!0,isDisabled:j})},background:E({isSelected:F,isFocused:w}),...c(Boolean($.prefix))}),valueContainer:x=>({...x,position:"static",padding:v?v-1+"rem 0 ":0,height:v?"auto":"21px"}),clearIndicator:x=>({...x,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:g,...(q=$.components)!=null?q:{}}}),C&&d.default.createElement(p,{hasError:L},C))};exports.Select=b,exports.default=b;
+`,g=({selectProps:{menuIsOpen:y=!1},isFocused:D=!1,isDisabled:I})=>d.default.createElement(h,{$isDisabled:I,$isFocused:D,$isMenuOpen:y,$theme:a.default}),b=({className:y,color:D="primary",forwardRef:I,hasError:L=!1,height:v,helperText:C,isDisabled:S=!1,onBlur:M=()=>null,onFocus:N=()=>null,onInputChange:O=()=>null,placeholder:_="",name:B,...$})=>{var q;const[k,T]=e.useState(!1),[R,z]=e.useState(""),E=({isSelected:x,isFocused:F,isDisabled:w})=>x?a.default.colors[D].main:w?a.default.colors.background.light:F?a.default.colors.background.gray:a.default.colors.background.light,A=((x,F)=>F?a.default.colors.error.main:x?a.default.colors.text.dark:a.default.colors.gray.light1)(k,L);return d.default.createElement(u,{className:y},$.label&&d.default.createElement(l.Label,{htmlFor:B,height:v,isFocused:k,hasValue:Boolean($.value||R),disabled:S,theme:a.default,hasError:L},$.label),$.prefix&&d.default.createElement(m,{isDisabled:S,isFocused:k},$.prefix),d.default.createElement(s.default,{...$,inputId:B,name:B,ref:I,isDisabled:S,onInputChange:(x,F)=>{O(x,F),z(x)},placeholder:_,onFocus:x=>{T(!0),N(x)},onBlur:x=>{T(!1),M(x)},styles:{control:x=>({...x,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:a.default.colors.background.light,borderColor:A,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...f(S),...c(Boolean($.prefix))}),placeholder:x=>({...x,display:k?"static":"none"}),singleValue:x=>({...x,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:x=>({...x,padding:"8px 0"}),menu:x=>({...x,borderRadius:0,boxShadow:a.default.elevations.elevation2,zIndex:2,padding:"0"}),option:(x,{isSelected:F,isFocused:w,isDisabled:j})=>({...x,padding:"1rem",cursor:j?"not-allowed":"pointer","&:hover":{background:E({isSelected:F,isFocused:!0,isDisabled:j})},background:E({isSelected:F,isFocused:w}),...c(Boolean($.prefix))}),valueContainer:x=>({...x,position:"static",padding:v?v-1+"rem 0 ":0,height:v?"auto":"21px"}),clearIndicator:x=>({...x,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:g,...(q=$.components)!=null?q:{}}}),C&&d.default.createElement(p,{hasError:L},C))};exports.Select=b,exports.default=b;

package/cjs/components/Textfield/index.js

@@ -1,36 +1,36 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../FieldLabel.js"),l=require("../../typography/BodyText/index.js"),a=require("../../shared/helpers.js");function o(g){return g&&typeof g=="object"&&"default"in g?g:{default:g}}require("../../shared/media-queries.js");var d=o(e),s=o(r);const i=r.css`
-  border: 1px solid ${({theme:g})=>g.colors.gray.light2}};
-  color: ${({theme:g})=>g.colors.text.disabled};
-  fill: ${({theme:g})=>g.colors.text.disabled};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../FieldLabel.js"),l=require("../../typography/BodyText/index.js"),a=require("../../shared/helpers.js");function o(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../../shared/media-queries.js");var d=o(e),s=o(r);const i=r.css`
+  border: 1px solid ${({theme:y})=>y.colors.gray.light2}};
+  color: ${({theme:y})=>y.colors.text.disabled};
+  fill: ${({theme:y})=>y.colors.text.disabled};
 `,n=r.css`
-  border: 2px solid ${({theme:g})=>g.colors.error.dark};
+  border: 2px solid ${({theme:y})=>y.colors.error.dark};
 `,c=r.css`
-  border: 2px solid ${({theme:g})=>g.colors.gray.dark5}};
-  color: ${({theme:g})=>g.colors.text.dark};
-  fill: ${({theme:g})=>g.colors.text.dark};
+  border: 2px solid ${({theme:y})=>y.colors.gray.dark5}};
+  color: ${({theme:y})=>y.colors.text.dark};
+  fill: ${({theme:y})=>y.colors.text.dark};
 `,u=s.default.div`
   position: relative;
   padding: 0;
   display: block;
-`,h=s.default.div`
+`,m=s.default.div`
   display: flex;
   text-align: center;
   align-items: center;
   box-sizing: border-box;
   height: 3rem;
 
-  background-color: ${({theme:g})=>g.colors.background.light};
+  background-color: ${({theme:y})=>y.colors.background.light};
 
-  border: 1px solid ${({theme:g})=>g.colors.gray.dark5};
+  border: 1px solid ${({theme:y})=>y.colors.gray.dark5};
   transition: all 150ms;
 
-  padding: 0.7rem 0.75rem 0.6rem;
+  padding: 0.75rem 0.6rem;
 
-  ${({hasError:g,isFocused:y})=>!g&&y&&c}
-  ${({disabled:g})=>g&&i}
-  ${({hasError:g})=>g&&n}
-  ${({centered:g})=>g&&"text-align: center;"}
-`,m=s.default.input`
+  ${({hasError:y,isFocused:k})=>!y&&k&&c}
+  ${({disabled:y})=>y&&i}
+  ${({hasError:y})=>y&&n}
+  ${({centered:y})=>y&&"text-align: center;"}
+`,h=s.default.input`
   ${l.BodyTextStyle}
   width: 100%;
   cursor: text;
@@ -39,12 +39,12 @@
   background-color: transparent;
 
   :disabled {
-    color: ${({theme:g})=>g.colors.text.disabled};
-    fill: ${({theme:g})=>g.colors.text.disabled};
+    color: ${({theme:y})=>y.colors.text.disabled};
+    fill: ${({theme:y})=>y.colors.text.disabled};
   }
 `,f=s.default.span`
   display: flex;
-  font-family: ${({theme:g})=>g.typography.fontBaseFamily};
+  font-family: ${({theme:y})=>y.typography.fontBaseFamily};
   font-size: 1.25rem;
   line-height: 1.5rem;
 
@@ -56,9 +56,11 @@
   ${l.CaptionStyle}
   margin-top: 0.25rem;
 
-  color: ${({hasError:g,theme:y})=>g?y.colors.error.dark:y.colors.text.disabled};
-
-  ${({centered:g})=>g&&"width: 100%; text-align: center;"}
+  ${({centered:y})=>y&&"width: 100%; text-align: center;"}
 `,b=s.default.span`
   display: block;
-`,x=({placeholder:g="",isDisabled:y=!1,centered:F=!1,hasError:q=!1,className:S,helperText:v,label:E="",onBlur:z=()=>null,onFocus:L=()=>null,forwardRef:P,suffix:w,name:k=a.generateNameHash("text-input"),errors:j,...T})=>{const[B,N]=e.useState(!1),_=Boolean(T.value);return d.default.createElement(u,{className:S},d.default.createElement(h,{isFocused:B,disabled:y,centered:F,hasError:q,hasPlaceholder:!!g},d.default.createElement(m,{...T,id:k,name:k,"aria-label":E||k,ref:P,onFocus:$=>{N(!0),L($)},onBlur:$=>{N(!1),z($)},disabled:y,placeholder:E&&!B?"":g}),w&&d.default.createElement(f,null,w)),E&&d.default.createElement(t.Label,{htmlFor:k,isFocused:B,centered:F,hasError:q,hasValue:_,disabled:y},E),(v||j)&&d.default.createElement(p,{centered:F,hasError:q},v&&d.default.createElement(b,null,v),j&&j.map($=>d.default.createElement(b,{key:$},$))))};exports.TextField=x,exports.default=x;
+  color: ${({theme:y})=>y.colors.text.disabled};
+`,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:q=a.generateNameHash("text-input"),errors:v,...N})=>{const[B,S]=e.useState(!1),C=Boolean(N.value);return d.default.createElement(u,{className:z},d.default.createElement(m,{isFocused:B,disabled:k,centered:F,hasError:w,hasPlaceholder:!!y},d.default.createElement(h,{...N,id:q,name:q,"aria-label":E||q,ref:_,onFocus:$=>{S(!0),P($)},onBlur:$=>{S(!1),L($)},disabled:k,placeholder:E&&!B?"":y}),T&&d.default.createElement(f,null,T)),E&&d.default.createElement(t.Label,{htmlFor:q,isFocused:B,centered:F,hasError:w,hasValue:C,disabled:k},E),(j||v)&&d.default.createElement(p,{centered:F},j&&d.default.createElement(b,null,j),v&&v.map($=>d.default.createElement(x,{key:$},$))))};exports.TextField=g,exports.default=g;

package/esm/components/FieldLabel.js

@@ -1,34 +1,39 @@
-import c,{css as e}from"styled-components";import{CaptionStyle as n}from"../typography/BodyText/index.js";import"react";import"../shared/media-queries.js";const s="0.5rem",a=(o,t)=>e`
+import a,{css as e}from"styled-components";import{BodyTextStyle as c}from"../typography/BodyText/index.js";import"react";import"../shared/media-queries.js";const l="0.5rem",n=(o,t)=>e`
   background-color: ${({theme:r})=>r.colors.background.light};
-  transform: scale(0.75) translateY(${o});
+  transform: translateY(${o});
+  line-height: 0.875rem;
+  font-size: 0.75rem;
   transform-origin: 0 0;
-  padding: 0 ${s};
-  left: ${s};
+  padding: 0 ${l};
+  left: ${l};
   color: ${({theme:r})=>t?r.colors.error.dark:r.colors.text.dark};
 `,i=e`
   color: ${({theme:o,hasError:t})=>t?o.colors.error.dark:o.colors.text.dark};
 `,d=e`
   color: ${({theme:o})=>o.colors.gray.light1};
   background-color: ${({theme:o})=>o.colors.background.light};
-`,p=e`
-  text-align: center;
-  width: 100%;
+`,m=e`
+  width: max-content;
   left: 0;
-`,$=c.label`
-  ${n}
+  right: 0;
+  margin-right: auto;
+  margin-left: auto;
+`,g=a.label`
+  ${c}
   pointer-events: none;
   position: absolute;
+  max-width: calc(100% - 2rem);
   z-index: 1;
-  top: ${({height:o})=>o?`${o}rem`:"1rem"};
+  top: ${({height:o})=>o?`${o}rem`:"0.75rem"};
   left: calc(0.75rem + 2px);
   transition: 150ms;
-  height: 16px;
-  line-height: 16px;
-  font-size: 16px;
   color: ${({theme:o})=>o.colors.gray.dark5};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 
-  ${({centered:o})=>o&&p}
-  ${({hasValue:o,isFocused:t,height:r,hasError:l})=>(o||t)&&a(r?`-${(r+.25)*1.35}rem`:"-1.8rem",l)}
+  ${({hasValue:o,isFocused:t,height:r=.7,hasError:s})=>(o||t)&&n(`-${r+.4}rem`,s)}
+  ${({centered:o,hasValue:t,isFocused:r})=>(t||r)&&o&&m}
   ${({isFocused:o})=>o&&i}
   ${({disabled:o})=>o&&d}
-`;export{$ as Label};
+`;export{g as Label};

package/esm/components/Select/index.js

@@ -24,7 +24,7 @@ import t,{useState as x}from"react";import T from"react-select";import d from"st
   margin-top: 0.25rem;
   margin-left: 0.85rem;
   color: ${({hasError:e})=>e?r.colors.error.main:r.colors.text.disabled};
-`,V=e=>t.createElement("svg",{...e},t.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},t.createElement("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})),t.createElement("use",{xlinkHref:"#icon-arrow"})),H=d(V)`
+`,H=e=>t.createElement("svg",{...e},t.createElement("symbol",{id:"icon-arrow",viewBox:"0 0 19 19"},t.createElement("path",{d:"M2.03039 7.95496L9.80856 15.7331C9.90619 15.8308 10.0645 15.8308 10.1621 15.7331L17.9403 7.95496L19.0009 9.01562L11.2228 16.7938C10.5394 17.4772 9.43132 17.4772 8.7479 16.7938L0.969727 9.01562L2.03039 7.95496Z"})),t.createElement("use",{xlinkHref:"#icon-arrow"})),V=d(H)`
   width: 0.8rem;
   height: 0.8rem;
   margin: 0 0.5rem;
@@ -41,4 +41,4 @@ import t,{useState as x}from"react";import T from"react-select";import d from"st
 
   transform: ${e=>e.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
   transform-origin: 50% 60%;
-`,N=(e,l)=>l?r.colors.error.main:e?r.colors.text.dark:r.colors.gray.light1,P=({selectProps:{menuIsOpen:e=!1},isFocused:l=!1,isDisabled:m})=>t.createElement(H,{$isDisabled:m,$isFocused:l,$isMenuOpen:e,$theme:r}),C=({className:e,color:l="primary",forwardRef:m,hasError:u=!1,height:i,helperText:p,isDisabled:s=!1,onBlur:v=()=>null,onFocus:B=()=>null,onInputChange:w=()=>null,placeholder:I="",name:f,...n})=>{var h;const[c,y]=x(!1),[L,S]=x(""),E=(o,a)=>{w(o,a),S(o)},b=({isSelected:o,isFocused:a,isDisabled:g})=>o?r.colors[l].main:g?r.colors.background.light:a?r.colors.background.gray:r.colors.background.light,j=o=>{y(!0),B(o)},D=o=>{y(!1),v(o)},R=N(c,u);return t.createElement(z,{className:e},n.label&&t.createElement(_,{htmlFor:f,height:i,isFocused:c,hasValue:Boolean(n.value||L),disabled:s,theme:r,hasError:u},n.label),n.prefix&&t.createElement(M,{isDisabled:s,isFocused:c},n.prefix),t.createElement(T,{...n,inputId:f,name:f,ref:m,isDisabled:s,onInputChange:E,placeholder:I,onFocus:j,onBlur:D,styles:{control:o=>({...o,borderRadius:0,color:r.colors.text.dark,fontFamily:r.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:r.colors.background.light,borderColor:R,boxShadow:"none","&:hover":{borderColor:"none"},...A(s),...k(Boolean(n.prefix))}),placeholder:o=>({...o,display:c?"static":"none"}),singleValue:o=>({...o,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:o=>({...o,padding:"8px 0"}),menu:o=>({...o,borderRadius:0,boxShadow:r.elevations.elevation2,zIndex:2,padding:"0"}),option:(o,{isSelected:a,isFocused:g,isDisabled:$})=>({...o,padding:"1rem",cursor:$?"not-allowed":"pointer","&:hover":{background:b({isSelected:a,isFocused:!0,isDisabled:$})},background:b({isSelected:a,isFocused:g}),...k(Boolean(n.prefix))}),valueContainer:o=>({...o,position:"static",padding:i?`${i-1}rem 0 `:0,height:i?"auto":"21px"}),clearIndicator:o=>({...o,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:P,...(h=n.components)!=null?h:{}}}),p&&t.createElement(O,{hasError:u},p))};export{C as Select,C as default};
+`,N=(e,l)=>l?r.colors.error.main:e?r.colors.text.dark:r.colors.gray.light1,P=({selectProps:{menuIsOpen:e=!1},isFocused:l=!1,isDisabled:m})=>t.createElement(V,{$isDisabled:m,$isFocused:l,$isMenuOpen:e,$theme:r}),C=({className:e,color:l="primary",forwardRef:m,hasError:u=!1,height:i,helperText:p,isDisabled:s=!1,onBlur:v=()=>null,onFocus:B=()=>null,onInputChange:w=()=>null,placeholder:I="",name:g,...n})=>{var h;const[c,y]=x(!1),[L,S]=x(""),E=(o,a)=>{w(o,a),S(o)},b=({isSelected:o,isFocused:a,isDisabled:f})=>o?r.colors[l].main:f?r.colors.background.light:a?r.colors.background.gray:r.colors.background.light,j=o=>{y(!0),B(o)},D=o=>{y(!1),v(o)},R=N(c,u);return t.createElement(z,{className:e},n.label&&t.createElement(_,{htmlFor:g,height:i,isFocused:c,hasValue:Boolean(n.value||L),disabled:s,theme:r,hasError:u},n.label),n.prefix&&t.createElement(M,{isDisabled:s,isFocused:c},n.prefix),t.createElement(T,{...n,inputId:g,name:g,ref:m,isDisabled:s,onInputChange:E,placeholder:I,onFocus:j,onBlur:D,styles:{control:o=>({...o,borderRadius:0,color:r.colors.text.dark,fontFamily:r.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.75rem",backgroundColor:r.colors.background.light,borderColor:R,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...A(s),...k(Boolean(n.prefix))}),placeholder:o=>({...o,display:c?"static":"none"}),singleValue:o=>({...o,maxWidth:"calc(100% - 3.3rem)",width:"calc(100% - 3.3rem)"}),menuList:o=>({...o,padding:"8px 0"}),menu:o=>({...o,borderRadius:0,boxShadow:r.elevations.elevation2,zIndex:2,padding:"0"}),option:(o,{isSelected:a,isFocused:f,isDisabled:$})=>({...o,padding:"1rem",cursor:$?"not-allowed":"pointer","&:hover":{background:b({isSelected:a,isFocused:!0,isDisabled:$})},background:b({isSelected:a,isFocused:f}),...k(Boolean(n.prefix))}),valueContainer:o=>({...o,position:"static",padding:i?`${i-1}rem 0 `:0,height:i?"auto":"21px"}),clearIndicator:o=>({...o,paddingTop:0,paddingBottom:0})},components:{IndicatorSeparator:()=>null,DropdownIndicator:P,...(h=n.components)!=null?h:{}}}),p&&t.createElement(O,{hasError:u},p))};export{C as Select,C as default};

package/esm/components/Textfield/index.js

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

package/package.json

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