@kvdbil/components 15.1.1 → 15.1.3

package/cjs/components/FieldLabel.js

@@ -1,15 +1,14 @@
-"use strict";var e=require("styled-components"),r=require("../typography/BodyText/index.js");require("react/jsx-runtime"),require("../shared/media-queries.js");var o,t=(o=e)&&o.__esModule?o:{default:o};const s="0.5rem",a=e.css`
+"use strict";var e=require("styled-components"),r=require("../typography/BodyText/index.js");require("react/jsx-runtime"),require("../shared/media-queries.js");var o,t=(o=e)&&o.__esModule?o:{default:o};const s=e.css`
   color: ${({theme:e,hasError:r})=>r?e.colors.error.dark:e.colors.text.dark};
-`,l=e.css`
+`,a=e.css`
   color: ${({theme:e})=>e.colors.gray.light1};
-  background-color: ${({theme:e})=>e.colors.background.light};
 `,i=e.css`
   width: max-content;
   left: 0;
   right: 0;
   margin-right: auto;
   margin-left: auto;
-`,c=t.default.label`
+`,n=t.default.label`
   ${r.BodyTextStyle}
   pointer-events: none;
   position: absolute;
@@ -22,18 +21,20 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  background: transparent;
 
-  ${({hasValue:r,isFocused:o,height:t=.7,hasError:a})=>(r||o)&&((r,o)=>e.css`
-  background-color: ${({theme:e})=>e.colors.background.light};
+  ${({theme:e,hasValue:r,isFocused:o})=>(r||o)&&`\n  span {\n    display: block;\n    width: 100%;\n    height: 8px;\n    position: absolute;\n    top: 5px;\n    left: 0;\n    background-color: ${e.colors.background.light};\n    z-index: -1;\n  }\n  `}
+
+  ${({hasValue:r,isFocused:o,height:t=.7,hasError:s})=>(r||o)&&((r,o)=>e.css`
   transform: translateY(${r});
   line-height: 0.875rem;
   font-size: 0.75rem;
   transform-origin: 0 0;
-  padding: 0 ${s};
-  left: ${s};
+  padding: 0 5px;
+  left: 0.5rem;
   color: ${({theme:e})=>o?e.colors.error.dark:e.colors.text.dark};
-`)(`-${t+.4}rem`,a)}
+`)(`-${t+.4}rem`,s)}
   ${({centered:e,hasValue:r,isFocused:o})=>(r||o)&&e&&i}
-  ${({isFocused:e})=>e&&a}
-  ${({disabled:e})=>e&&l}
-`;exports.Label=c;
+  ${({isFocused:e})=>e&&s}
+  ${({disabled:e})=>e&&a}
+`;exports.Label=n;

package/cjs/components/Select/index.js

@@ -1,23 +1,23 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("react-select"),t=require("styled-components"),i=require("../../shared/constants.js"),a=require("../../theme.js"),l=require("../../typography/BodyText/index.js"),s=require("../FieldLabel.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../../shared/media-queries.js");var n=d(o),c=d(t);const u=c.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("react-select"),t=require("styled-components"),a=require("../../shared/constants.js"),i=require("../../theme.js"),l=require("../../typography/BodyText/index.js"),s=require("../FieldLabel.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../../shared/media-queries.js");var n=d(o),c=d(t);const u=c.default.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
   position: relative;
-`,p=e=>e&&{paddingLeft:"2.5rem"},m=e=>e&&{border:`1px solid ${a.default.colors.gray.light1}`,color:a.default.colors.gray.dark1,fill:a.default.colors.gray.light1},f=e=>e&&{border:`2px solid ${a.default.colors.error.dark}`},g=c.default.div`
+`,p=e=>e&&{paddingLeft:"2.5rem"},m=e=>e&&{border:`1px solid ${i.default.colors.gray.light1}`,color:i.default.colors.gray.dark1,fill:i.default.colors.gray.light1},f=e=>e&&{border:`2px solid ${i.default.colors.error.dark}`},g=c.default.div`
   position: absolute;
   z-index: 1;
   top: 0.5rem;
   margin: 0.35rem 0.75rem;
 
-  fill: ${a.default.colors.gray.dark5};
-  transition: ${i.DEFAULT_TRANSITION_MS};
+  fill: ${i.default.colors.gray.dark5};
+  transition: ${a.DEFAULT_TRANSITION_MS};
 
-  ${e=>e.isDisabled&&` fill: ${a.default.colors.gray.light1}; `}
+  ${e=>e.isDisabled&&` fill: ${i.default.colors.gray.light1}; `}
 
   ${e=>e.isFocused&&` fill: ${e.theme.colors.text.dark}; `}
 `,h=c.default.span`
   ${l.CaptionStyle}
   display: block;
   margin-top: 0.25rem;
-  color: ${({hasError:e})=>e?a.default.colors.error.dark:a.default.colors.text.disabled};
+  color: ${({hasError:e})=>e?i.default.colors.error.dark:i.default.colors.text.disabled};
 `,x=c.default((r=>e.jsxs("svg",{...r,children:[e.jsx("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:e.jsx("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"})}),e.jsx("use",{xlinkHref:"#icon-arrow"})]})))`
   width: 0.75rem;
   height: 0.75rem;
@@ -31,9 +31,9 @@
     stroke: currentColor;
   }
 
-  transition: transform ${i.DEFAULT_TRANSITION_MS};
+  transition: transform ${a.DEFAULT_TRANSITION_MS};
 
   transform: ${e=>e.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
 
   transform-origin: 50% 60%;
-`,b=({selectProps:{menuIsOpen:r=!1},isFocused:o=!1,isDisabled:t})=>e.jsx(x,{$isDisabled:t,$isFocused:o,$isMenuOpen:r,$theme:a.default});function y({className:o,color:t="primary",forwardRef:i,hasError:l=!1,height:d,helperText:c,isDisabled:x=!1,onBlur:y=(()=>null),onFocus:$=(()=>null),onInputChange:k=(()=>null),placeholder:F="",name:S,...j}){const[v,D]=r.useState(!1),[w,L]=r.useState(""),I=({isSelected:e,isFocused:r,isDisabled:o})=>e?a.default.colors[t].main:o?a.default.colors.background.light:r?a.default.colors.background.gray:a.default.colors.background.light,T=((e,r)=>r?a.default.colors.error.main:e?a.default.colors.text.dark:a.default.colors.gray.light1)(v,l),C=!j.label;return e.jsxs(u,{className:o,children:[!C&&j.label&&e.jsx(s.Label,{htmlFor:S,height:d,isFocused:v,hasValue:!(!j.value&&!w),disabled:x,theme:a.default,hasError:l,children:j.label}),j.prefix&&e.jsx(g,{isDisabled:x,isFocused:v,children:j.prefix}),e.jsx(n.default,{...j,id:"react-select",inputId:S,name:S,ref:i,isDisabled:x,onInputChange:(e,r)=>{k(e,r),L(e)},placeholder:F,onFocus:e=>{D(!0),$(e)},onBlur:e=>{D(!1),y(e)},styles:{control:e=>({...e,borderRadius:0,color:a.default.colors.text.dark,fontFamily:a.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:a.default.colors.background.light,borderColor:T,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...m(x),...f(l),...p(!!j.prefix)}),input:e=>({...e,height:"auto",margin:0,padding:0}),placeholder:e=>{const r={...e,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return C?{...r,color:a.default.colors.text.dark,fontWeight:600}:{...r,display:v?"static":"none"}},menuList:e=>({...e,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${T}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:e=>({...e,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(e,{isSelected:r,isFocused:o,isDisabled:t})=>({...e,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:t?"not-allowed":"pointer","&:hover":{background:I({isSelected:r,isFocused:!0,isDisabled:t})},background:I({isSelected:r,isFocused:o}),...p(!!j.prefix)}),valueContainer:e=>({...e,position:"static",padding:d?d-1+"rem 0 ":0,height:d?"auto":"1.5rem"}),clearIndicator:e=>({...e,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:b,...j.components??{}}}),c&&e.jsx(h,{hasError:l,children:c})]})}exports.Select=y,exports.default=y;
+`,b=({selectProps:{menuIsOpen:r=!1},isFocused:o=!1,isDisabled:t})=>e.jsx(x,{$isDisabled:t,$isFocused:o,$isMenuOpen:r,$theme:i.default});function y({className:o,color:t="primary",forwardRef:a,hasError:l=!1,height:d,helperText:c,isDisabled:x=!1,onBlur:y=(()=>null),onFocus:$=(()=>null),onInputChange:k=(()=>null),placeholder:F="",name:j,...S}){const[v,D]=r.useState(!1),[w,L]=r.useState(""),I=({isSelected:e,isFocused:r,isDisabled:o})=>e?i.default.colors[t].main:o?i.default.colors.background.light:r?i.default.colors.background.gray:i.default.colors.background.light,T=((e,r)=>r?i.default.colors.error.main:e?i.default.colors.text.dark:i.default.colors.gray.light1)(v,l),C=!S.label;return e.jsxs(u,{className:o,children:[!C&&S.label&&e.jsx(s.Label,{htmlFor:j,height:d,isFocused:v,hasValue:!(!S.value&&!w),disabled:x,theme:i.default,hasError:l,children:e.jsxs(e.Fragment,{children:[S.label,e.jsx("span",{})]})}),S.prefix&&e.jsx(g,{isDisabled:x,isFocused:v,children:S.prefix}),e.jsx(n.default,{...S,id:"react-select",inputId:j,name:j,ref:a,isDisabled:x,onInputChange:(e,r)=>{k(e,r),L(e)},placeholder:F,onFocus:e=>{D(!0),$(e)},onBlur:e=>{D(!1),y(e)},styles:{control:e=>({...e,borderRadius:0,color:i.default.colors.text.dark,fontFamily:i.default.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:i.default.colors.background.light,borderColor:T,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...m(x),...f(l),...p(!!S.prefix)}),input:e=>({...e,height:"auto",margin:0,padding:0}),placeholder:e=>{const r={...e,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return C?{...r,color:i.default.colors.text.dark,fontWeight:600}:{...r,display:v?"static":"none"}},menuList:e=>({...e,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${T}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:e=>({...e,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(e,{isSelected:r,isFocused:o,isDisabled:t})=>({...e,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:t?"not-allowed":"pointer","&:hover":{background:I({isSelected:r,isFocused:!0,isDisabled:t})},background:I({isSelected:r,isFocused:o}),...p(!!S.prefix)}),valueContainer:e=>({...e,position:"static",padding:d?d-1+"rem 0 ":0,height:d?"auto":"1.5rem"}),clearIndicator:e=>({...e,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:b,...S.components??{}}}),c&&e.jsx(h,{hasError:l,children:c})]})}exports.Select=y,exports.default=y;

package/cjs/components/TextArea/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("styled-components"),a=require("../../theme.js"),o=require("../FieldLabel.js"),s=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var t,d=(t=l)&&t.__esModule?t:{default:t};const i=l.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("styled-components"),a=require("../../theme.js"),s=require("../FieldLabel.js"),o=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var t,d=(t=l)&&t.__esModule?t:{default:t};const i=l.css`
   border: 1px solid ${a.default.colors.gray.light1};
   color: ${a.default.colors.gray.dark1};
   fill: ${a.default.colors.gray.light1};
@@ -29,7 +29,7 @@
   ${({hasError:e})=>e&&c}
   ${({centered:e})=>e&&"text-align: center;"}
 `,f=d.default.textarea`
-  ${s.BodyTextStyle}
+  ${o.BodyTextStyle}
 
   width: 100%;
   cursor: text;
@@ -41,14 +41,14 @@
 `,x=d.default.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
 `,p=d.default.div`
-  ${s.CaptionStyle}
+  ${o.CaptionStyle}
   margin-top: 0.25rem;
 
   ${({centered:e})=>e&&"width: 100%; text-align: center;"}
-`,b=d.default.span`
+`,m=d.default.span`
   display: block;
   color: ${({theme:e})=>e.colors.text.disabled};
-`,m=d.default.span`
+`,b=d.default.span`
   display: block;
   color: ${({theme:e})=>e.colors.error.dark};
-`,g=({placeholder:l="",isDisabled:s=!1,centered:t=!1,hasError:d=!1,className:i,helperText:c,label:n="",resize:g=!0,name:y,errors:$,...j})=>{const[k,v]=r.useState(!1),q=!!j.value;return e.jsxs(u,{className:i,children:[e.jsxs(h,{isFocused:k,disabled:s,centered:t,hasError:d,hasPlaceholder:!!l,children:[e.jsx(f,{...j,name:y,"aria-label":n||y,resize:g,onFocus:()=>v(!0),onBlur:()=>v(!1),disabled:s,theme:a.default,placeholder:n&&!k?"":l}),j.suffix&&e.jsx(x,{children:j.suffix})]}),n&&e.jsx(o.Label,{htmlFor:y,isFocused:k,centered:t,hasError:d,hasValue:q,disabled:s,theme:a.default,children:n}),(c||$)&&e.jsxs(p,{centered:t,children:[c&&e.jsx(b,{children:c}),$&&$.map((r=>e.jsx(m,{children:r},r)))]})]})};exports.TextArea=g,exports.default=g;
+`,g=({placeholder:l="",isDisabled:o=!1,centered:t=!1,hasError:d=!1,className:i,helperText:c,label:n="",resize:g=!0,name:y,errors:$,...j})=>{const[k,v]=r.useState(!1),q=!!j.value;return e.jsxs(u,{className:i,children:[e.jsxs(h,{isFocused:k,disabled:o,centered:t,hasError:d,hasPlaceholder:!!l,children:[e.jsx(f,{...j,name:y,"aria-label":n||y,resize:g,onFocus:()=>v(!0),onBlur:()=>v(!1),disabled:o,theme:a.default,placeholder:n&&!k?"":l}),j.suffix&&e.jsx(x,{children:j.suffix})]}),n&&e.jsx(s.Label,{htmlFor:y,isFocused:k,centered:t,hasError:d,hasValue:q,disabled:o,theme:a.default,children:e.jsxs(e.Fragment,{children:[n,e.jsx("span",{})]})}),(c||$)&&e.jsxs(p,{centered:t,children:[c&&e.jsx(m,{children:c}),$&&$.map((r=>e.jsx(b,{children:r},r)))]})]})};exports.TextArea=g,exports.default=g;

package/cjs/components/Textfield/index.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("styled-components"),s=require("../FieldLabel.js"),o=require("../../typography/BodyText/index.js"),t=require("../../shared/helpers.js");require("../../shared/media-queries.js");var a,d=(a=l)&&a.__esModule?a:{default:a};const i=l.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),s=require("styled-components"),l=require("../FieldLabel.js"),o=require("../../typography/BodyText/index.js"),t=require("../../shared/helpers.js");require("../../shared/media-queries.js");var a,d=(a=s)&&a.__esModule?a:{default:a};const i=s.css`
   border: 1px solid ${({theme:e})=>e.colors.gray.light2};
   color: ${({theme:e})=>e.colors.text.disabled};
   fill: ${({theme:e})=>e.colors.text.disabled};
-`,c=l.css`
+`,n=s.css`
   border: 2px solid ${({theme:e})=>e.colors.error.dark};
-`,n=l.css`
+`,c=s.css`
   border: 2px solid ${({theme:e})=>e.colors.gray.dark5};
   color: ${({theme:e})=>e.colors.text.dark};
   fill: ${({theme:e})=>e.colors.text.dark};
@@ -26,9 +26,9 @@
 
   padding: 0.75rem 0.6rem;
 
-  ${({hasError:e,isFocused:r})=>!e&&r&&n}
+  ${({hasError:e,isFocused:r})=>!e&&r&&c}
   ${({disabled:e})=>e&&i}
-  ${({hasError:e})=>e&&c}
+  ${({hasError:e})=>e&&n}
   ${({centered:e})=>e&&"text-align: center;"}
 `,x=d.default.input`
   ${o.BodyTextStyle}
@@ -60,7 +60,7 @@
 `,b=d.default.span`
   display: block;
   color: ${({theme:e})=>e.colors.text.disabled};
-`,f=d.default.span`
+`,g=d.default.span`
   display: block;
   color: ${({theme:e})=>e.colors.error.dark};
-`,g=({placeholder:l="",isDisabled:o=!1,centered:a=!1,hasError:d=!1,className:i,helperText:c,label:n="",onBlur:g=(()=>null),onFocus:y=(()=>null),forwardRef:$,suffix:j,name:k=t.generateNameHash("text-input"),errors:F,isAutoFocused:v=!1,...q})=>{const[B,E]=r.useState(!1),w=!!q.value,T=F&&Array.isArray(F)&&F?.length>0;return e.jsxs(h,{className:i,children:[e.jsxs(u,{isFocused:B,disabled:o,centered:a,hasError:d,hasPlaceholder:!!l,children:[e.jsx(x,{...q,id:k,name:k,"aria-label":n||k,ref:$,onFocus:e=>{E(!0),y(e)},onBlur:e=>{E(!1),g(e)},disabled:o,placeholder:n&&!B?"":l,autoFocus:v}),j&&e.jsx(m,{children:j})]}),n&&e.jsx(s.Label,{htmlFor:k,isFocused:B,centered:a,hasError:d,hasValue:w,disabled:o,children:n}),(c||T)&&e.jsxs(p,{centered:a,children:[c&&e.jsx(b,{children:c}),T&&F.map((r=>e.jsx(f,{children:r},r)))]})]})};exports.TextField=g,exports.default=g;
+`,f=({placeholder:s="",isDisabled:o=!1,centered:a=!1,hasError:d=!1,className:i,helperText:n,label:c="",onBlur:f=(()=>null),onFocus:y=(()=>null),forwardRef:$,suffix:j,name:F=t.generateNameHash("text-input"),errors:k,isAutoFocused:v=!1,...q})=>{const[B,E]=r.useState(!1),w=!!q.value,T=k&&Array.isArray(k)&&k?.length>0;return console.log("isFocused",B),e.jsxs(h,{className:i,children:[e.jsxs(u,{isFocused:B,disabled:o,centered:a,hasError:d,hasPlaceholder:!!s,children:[e.jsx(x,{...q,id:F,name:F,"aria-label":c||F,ref:$,onFocus:e=>{E(!0),y(e)},onBlur:e=>{E(!1),f(e)},disabled:o,placeholder:c&&!B?"":s,autoFocus:v}),j&&e.jsx(m,{children:j})]}),c&&e.jsx(l.Label,{htmlFor:F,isFocused:B,centered:a,hasError:d,hasValue:w,disabled:o,children:e.jsxs(e.Fragment,{children:[c,e.jsx("span",{})]})}),(n||T)&&e.jsxs(p,{centered:a,children:[n&&e.jsx(b,{children:n}),T&&k.map((r=>e.jsx(g,{children:r},r)))]})]})};exports.TextField=f,exports.default=f;

package/esm/components/FieldLabel.js

@@ -1,25 +1,23 @@
-import i,{css as t}from"styled-components";import{BodyTextStyle as s}from"../typography/BodyText/index.js";import"react/jsx-runtime";import"../shared/media-queries.js";const l="0.5rem",c=(o,e)=>t`
-  background-color: ${({theme:r})=>r.colors.background.light};
+import s,{css as t}from"styled-components";import{BodyTextStyle as i}from"../typography/BodyText/index.js";import"react/jsx-runtime";import"../shared/media-queries.js";const l=(o,r)=>t`
   transform: translateY(${o});
   line-height: 0.875rem;
   font-size: 0.75rem;
   transform-origin: 0 0;
-  padding: 0 ${l};
-  left: ${l};
-  color: ${({theme:r})=>e?r.colors.error.dark:r.colors.text.dark};
+  padding: 0 5px;
+  left: 0.5rem;
+  color: ${({theme:e})=>r?e.colors.error.dark:e.colors.text.dark};
 `,n=t`
-  color: ${({theme:o,hasError:e})=>e?o.colors.error.dark:o.colors.text.dark};
-`,m=t`
+  color: ${({theme:o,hasError:r})=>r?o.colors.error.dark:o.colors.text.dark};
+`,c=t`
   color: ${({theme:o})=>o.colors.gray.light1};
-  background-color: ${({theme:o})=>o.colors.background.light};
-`,h=t`
+`,d=t`
   width: max-content;
   left: 0;
   right: 0;
   margin-right: auto;
   margin-left: auto;
-`,d=i.label`
-  ${s}
+`,h=s.label`
+  ${i}
   pointer-events: none;
   position: absolute;
   max-width: calc(100% - 2rem);
@@ -31,9 +29,23 @@ import i,{css as t}from"styled-components";import{BodyTextStyle as s}from"../typ
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  background: transparent;
 
-  ${({hasValue:o,isFocused:e,height:r=.7,hasError:a})=>(o||e)&&c(`-${r+.4}rem`,a)}
-  ${({centered:o,hasValue:e,isFocused:r})=>(e||r)&&o&&h}
+  ${({theme:o,hasValue:r,isFocused:e})=>(r||e)&&`
+  span {
+    display: block;
+    width: 100%;
+    height: 8px;
+    position: absolute;
+    top: 5px;
+    left: 0;
+    background-color: ${o.colors.background.light};
+    z-index: -1;
+  }
+  `}
+
+  ${({hasValue:o,isFocused:r,height:e=.7,hasError:a})=>(o||r)&&l(`-${e+.4}rem`,a)}
+  ${({centered:o,hasValue:r,isFocused:e})=>(r||e)&&o&&d}
   ${({isFocused:o})=>o&&n}
-  ${({disabled:o})=>o&&m}
-`;export{d as Label};
+  ${({disabled:o})=>o&&c}
+`;export{h as Label};

package/esm/components/Select/index.js

@@ -1,7 +1,7 @@
-import{jsxs as k,jsx as l}from"react/jsx-runtime";import{useState as F}from"react";import O from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as S}from"../../shared/constants.js";import e from"../../theme.js";import{CaptionStyle as R}from"../../typography/BodyText/index.js";import{Label as H}from"../FieldLabel.js";import"../../shared/media-queries.js";const M=m.div`
+import{jsxs as u,jsx as t,Fragment as N}from"react/jsx-runtime";import{useState as F}from"react";import R from"react-select";import m from"styled-components";import{DEFAULT_TRANSITION_MS as S}from"../../shared/constants.js";import e from"../../theme.js";import{CaptionStyle as H}from"../../typography/BodyText/index.js";import{Label as M}from"../FieldLabel.js";import"../../shared/media-queries.js";const W=m.div`
   font-family: ${({theme:o})=>o.typography.fontBaseFamily};
   position: relative;
-`,D=o=>o&&{paddingLeft:"2.5rem"},W=o=>o&&{border:`1px solid ${e.colors.gray.light1}`,color:e.colors.gray.dark1,fill:e.colors.gray.light1},j=o=>o&&{border:`2px solid ${e.colors.error.dark}`},A=m.div`
+`,D=o=>o&&{paddingLeft:"2.5rem"},j=o=>o&&{border:`1px solid ${e.colors.gray.light1}`,color:e.colors.gray.dark1,fill:e.colors.gray.light1},A=o=>o&&{border:`2px solid ${e.colors.error.dark}`},_=m.div`
   position: absolute;
   z-index: 1;
   top: 0.5rem;
@@ -13,12 +13,12 @@ import{jsxs as k,jsx as l}from"react/jsx-runtime";import{useState as F}from"reac
   ${o=>o.isDisabled&&` fill: ${e.colors.gray.light1}; `}
 
   ${o=>o.isFocused&&` fill: ${o.theme.colors.text.dark}; `}
-`,_=m.span`
-  ${R}
+`,P=m.span`
+  ${H}
   display: block;
   margin-top: 0.25rem;
   color: ${({hasError:o})=>o?e.colors.error.dark:e.colors.text.disabled};
-`,P=o=>k("svg",{...o,children:[l("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:l("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"})}),l("use",{xlinkHref:"#icon-arrow"})]}),V=m(P)`
+`,V=o=>u("svg",{...o,children:[t("symbol",{id:"icon-arrow",viewBox:"0 0 19 19",children:t("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("use",{xlinkHref:"#icon-arrow"})]}),G=m(V)`
   width: 0.75rem;
   height: 0.75rem;
   margin: 0;
@@ -36,4 +36,4 @@ import{jsxs as k,jsx as l}from"react/jsx-runtime";import{useState as F}from"reac
   transform: ${o=>o.$isMenuOpen?"rotate(-180deg)":"rotate(0deg)"};
 
   transform-origin: 50% 60%;
-`,G=(o,t)=>t?e.colors.error.main:o?e.colors.text.dark:e.colors.gray.light1,U=({selectProps:{menuIsOpen:o=!1},isFocused:t=!1,isDisabled:p})=>l(V,{$isDisabled:p,$isFocused:t,$isMenuOpen:o,$theme:e});function w({className:o,color:t="primary",forwardRef:p,hasError:s=!1,height:n,helperText:u,isDisabled:d=!1,onBlur:L=()=>null,onFocus:v=()=>null,onInputChange:C=()=>null,placeholder:I="",name:g,...i}){const[c,f]=F(!1),[T,B]=F(""),z=(r,a)=>{C(r,a),B(r)},b=({isSelected:r,isFocused:a,isDisabled:h})=>r?e.colors[t].main:h?e.colors.background.light:a?e.colors.background.gray:e.colors.background.light,E=r=>{f(!0),v(r)},N=r=>{f(!1),L(r)},x=G(c,s),$=!i.label;return k(M,{className:o,children:[!$&&i.label&&l(H,{htmlFor:g,height:n,isFocused:c,hasValue:!!(i.value||T),disabled:d,theme:e,hasError:s,children:i.label}),i.prefix&&l(A,{isDisabled:d,isFocused:c,children:i.prefix}),l(O,{...i,id:"react-select",inputId:g,name:g,ref:p,isDisabled:d,onInputChange:z,placeholder:I,onFocus:E,onBlur:N,styles:{control:r=>({...r,borderRadius:0,color:e.colors.text.dark,fontFamily:e.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:e.colors.background.light,borderColor:x,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...W(d),...j(s),...D(!!i.prefix)}),input:r=>({...r,height:"auto",margin:0,padding:0}),placeholder:r=>{const a={...r,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return $?{...a,color:e.colors.text.dark,fontWeight:600}:{...a,display:c?"static":"none"}},menuList:r=>({...r,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${x}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:r=>({...r,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(r,{isSelected:a,isFocused:h,isDisabled:y})=>({...r,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:y?"not-allowed":"pointer","&:hover":{background:b({isSelected:a,isFocused:!0,isDisabled:y})},background:b({isSelected:a,isFocused:h}),...D(!!i.prefix)}),valueContainer:r=>({...r,position:"static",padding:n?`${n-1}rem 0 `:0,height:n?"auto":"1.5rem"}),clearIndicator:r=>({...r,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:U,...i.components??{}}}),u&&l(_,{hasError:s,children:u})]})}export{w as Select,w as default};
+`,U=(o,l)=>l?e.colors.error.main:o?e.colors.text.dark:e.colors.gray.light1,Z=({selectProps:{menuIsOpen:o=!1},isFocused:l=!1,isDisabled:p})=>t(G,{$isDisabled:p,$isFocused:l,$isMenuOpen:o,$theme:e});function w({className:o,color:l="primary",forwardRef:p,hasError:s=!1,height:n,helperText:f,isDisabled:d=!1,onBlur:L=()=>null,onFocus:v=()=>null,onInputChange:C=()=>null,placeholder:I="",name:g,...i}){const[c,b]=F(!1),[T,B]=F(""),z=(r,a)=>{C(r,a),B(r)},$=({isSelected:r,isFocused:a,isDisabled:h})=>r?e.colors[l].main:h?e.colors.background.light:a?e.colors.background.gray:e.colors.background.light,E=r=>{b(!0),v(r)},O=r=>{b(!1),L(r)},x=U(c,s),y=!i.label;return u(W,{className:o,children:[!y&&i.label&&t(M,{htmlFor:g,height:n,isFocused:c,hasValue:!!(i.value||T),disabled:d,theme:e,hasError:s,children:u(N,{children:[i.label,t("span",{})]})}),i.prefix&&t(_,{isDisabled:d,isFocused:c,children:i.prefix}),t(R,{...i,id:"react-select",inputId:g,name:g,ref:p,isDisabled:d,onInputChange:z,placeholder:I,onFocus:E,onBlur:O,styles:{control:r=>({...r,borderRadius:0,color:e.colors.text.dark,fontFamily:e.typography.fontBaseFamily,fontSize:"1rem",fontWeight:400,cursor:"pointer",padding:"0.7rem 0.5rem",backgroundColor:e.colors.background.light,borderColor:x,boxShadow:"none",minHeight:"3rem","&:hover":{borderColor:"none"},...j(d),...A(s),...D(!!i.prefix)}),input:r=>({...r,height:"auto",margin:0,padding:0}),placeholder:r=>{const a={...r,fontSize:"1rem",lineHeight:"1.5rem",whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",margin:0};return y?{...a,color:e.colors.text.dark,fontWeight:600}:{...a,display:c?"static":"none"}},menuList:r=>({...r,padding:"0.5rem 0",paddingBottom:"5rem",marginTop:0,border:`1px solid ${x}`,borderTop:"none",display:"flex",flexDirection:"column",gap:"0.5rem"}),menu:r=>({...r,borderRadius:0,boxShadow:"none",zIndex:5,padding:"0",marginTop:"-0.1rem"}),option:(r,{isSelected:a,isFocused:h,isDisabled:k})=>({...r,padding:"0.5rem",lineHeight:"1.5rem",fontSize:"1rem",fontWeight:400,cursor:k?"not-allowed":"pointer","&:hover":{background:$({isSelected:a,isFocused:!0,isDisabled:k})},background:$({isSelected:a,isFocused:h}),...D(!!i.prefix)}),valueContainer:r=>({...r,position:"static",padding:n?`${n-1}rem 0 `:0,height:n?"auto":"1.5rem"}),clearIndicator:r=>({...r,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:"0.2rem"})},components:{IndicatorSeparator:()=>null,DropdownIndicator:Z,...i.components??{}}}),f&&t(P,{hasError:s,children:f})]})}export{w as Select,w as default};

package/esm/components/TextArea/index.js

@@ -1,18 +1,18 @@
-import{jsxs as m,jsx as a}from"react/jsx-runtime";import{useState as k}from"react";import o,{css as p}from"styled-components";import e from"../../theme.js";import{Label as v}from"../FieldLabel.js";import{BodyTextStyle as F,CaptionStyle as E}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const z=p`
+import{jsxs as i,jsx as l,Fragment as k}from"react/jsx-runtime";import{useState as F}from"react";import o,{css as p}from"styled-components";import e from"../../theme.js";import{Label as v}from"../FieldLabel.js";import{BodyTextStyle as E,CaptionStyle as z}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const S=p`
   border: 1px solid ${e.colors.gray.light1};
   color: ${e.colors.gray.dark1};
   fill: ${e.colors.gray.light1};
-`,S=p`
-  border: 1px solid ${e.colors.error.main};
 `,B=p`
+  border: 1px solid ${e.colors.error.main};
+`,T=p`
   color: ${e.colors.text.dark};
   border: 1px solid ${e.colors.text.dark};
   fill: ${e.colors.text.dark};
-`,T=o.div`
+`,j=o.div`
   position: relative;
   padding: 0;
   display: inline-block;
-`,j=o.div`
+`,w=o.div`
   display: inline-black;
 
   color: ${e.colors.gray.light1};
@@ -24,12 +24,12 @@ import{jsxs as m,jsx as a}from"react/jsx-runtime";import{useState as k}from"reac
 
   padding: 0.7rem 0.75rem;
 
-  ${({hasError:r,isFocused:l})=>!r&&l&&B}
-  ${({disabled:r})=>r&&z}
-  ${({hasError:r})=>r&&S}
+  ${({hasError:r,isFocused:a})=>!r&&a&&T}
+  ${({disabled:r})=>r&&S}
+  ${({hasError:r})=>r&&B}
   ${({centered:r})=>r&&"text-align: center;"}
-`,w=o.textarea`
-  ${F}
+`,C=o.textarea`
+  ${E}
 
   width: 100%;
   cursor: text;
@@ -38,17 +38,17 @@ import{jsxs as m,jsx as a}from"react/jsx-runtime";import{useState as k}from"reac
   background-color: transparent;
 
   ${({resize:r})=>!r&&"resize: none;"}
-`,C=o.div`
-  font-family: ${({theme:r})=>r.typography.fontBaseFamily};
 `,N=o.div`
-  ${E}
+  font-family: ${({theme:r})=>r.typography.fontBaseFamily};
+`,P=o.div`
+  ${z}
   margin-top: 0.25rem;
 
   ${({centered:r})=>r&&"width: 100%; text-align: center;"}
-`,P=o.span`
+`,A=o.span`
   display: block;
   color: ${({theme:r})=>r.colors.text.disabled};
-`,A=o.span`
+`,D=o.span`
   display: block;
   color: ${({theme:r})=>r.colors.error.dark};
-`,g=({placeholder:r="",isDisabled:l=!1,centered:t=!1,hasError:f=!1,className:u,helperText:d,label:s="",resize:x=!0,name:c,errors:n,...i})=>{const[h,$]=k(!1),y=!!i.value;return m(T,{className:u,children:[m(j,{isFocused:h,disabled:l,centered:t,hasError:f,hasPlaceholder:!!r,children:[a(w,{...i,name:c,"aria-label":s||c,resize:x,onFocus:()=>$(!0),onBlur:()=>$(!1),disabled:l,theme:e,placeholder:s&&!h?"":r}),i.suffix&&a(C,{children:i.suffix})]}),s&&a(v,{htmlFor:c,isFocused:h,centered:t,hasError:f,hasValue:y,disabled:l,theme:e,children:s}),(d||n)&&m(N,{centered:t,children:[d&&a(P,{children:d}),n&&n.map(b=>a(A,{children:b},b))]})]})};export{g as TextArea,g as default};
+`,u=({placeholder:r="",isDisabled:a=!1,centered:d=!1,hasError:f=!1,className:$,helperText:n,label:s="",resize:x=!0,name:c,errors:h,...t})=>{const[m,g]=F(!1),y=!!t.value;return i(j,{className:$,children:[i(w,{isFocused:m,disabled:a,centered:d,hasError:f,hasPlaceholder:!!r,children:[l(C,{...t,name:c,"aria-label":s||c,resize:x,onFocus:()=>g(!0),onBlur:()=>g(!1),disabled:a,theme:e,placeholder:s&&!m?"":r}),t.suffix&&l(N,{children:t.suffix})]}),s&&l(v,{htmlFor:c,isFocused:m,centered:d,hasError:f,hasValue:y,disabled:a,theme:e,children:i(k,{children:[s,l("span",{})]})}),(n||h)&&i(P,{centered:d,children:[n&&l(A,{children:n}),h&&h.map(b=>l(D,{children:b},b))]})]})};export{u as TextArea,u as default};

package/esm/components/Textfield/index.js

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

package/package.json

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

package/package.json.tmp

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