@kvdbil/components 12.2.1 → 12.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,70 +1,69 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),n=require("../../typography/Heading/index.js"),i=require("../Button/index.js"),r=require("../../shared/media-queries.js");function o(v){return v&&typeof v=="object"&&"default"in v?v:{default:v}}require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js");var a=o(e),l=o(t);const d=l.default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),n=require("../../typography/Heading/index.js"),r=require("../Button/index.js"),i=require("../../shared/media-queries.js");function o(v){return v&&typeof v=="object"&&"default"in v?v:{default:v}}require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js");var a=o(e),l=o(t);const d=l.default.div`
2
2
  position: relative;
3
3
  min-height: 440px;
4
- background-size: cover;
5
4
  display: flex;
6
5
  flex-direction: column;
7
- ${({$centered:v})=>v&&"justify-content: center;"}
8
6
  `,u=t.keyframes`
9
7
  0% {
10
- background-color:#f5f5f5;
8
+ background-color:#f5f5f5;
11
9
  }
12
-
10
+
13
11
  50%{
14
12
  background-color: #e5e5e5
15
13
  }
16
-
14
+
17
15
  100% {
18
- background-color:#f5f5f5;
16
+ background-color:#f5f5f5;
19
17
  }`,c=l.default.div`
20
- position: absolute;
21
18
  width: 100%;
22
- height: 100%;
23
- top: 0;
24
- left: 0;
19
+ height: 440px;
25
20
  animation: ${u} 2s linear infinite;
26
21
  `,s=l.default.div`
27
22
  pointer-events: ${({$pointerEvents:v})=>v};
28
- position: relative;
29
23
  display: flex;
30
24
  flex-direction: ${({$direction:v})=>v};
31
25
  align-items: ${({$align:v})=>v};
32
26
  justify-content: ${({$justify:v})=>v};
33
- padding: 50px;
27
+ padding: 3rem 1.5rem;
34
28
  z-index: 1;
35
29
  flex: 1;
36
- `,f=l.default.iframe`
30
+ `,$=l.default.iframe`
37
31
  position: absolute;
38
32
  width: 100%;
39
33
  height: 100%;
40
34
  top: 0;
41
35
  left: 0;
42
- `,m=v=>typeof v=="number",$=v=>typeof v=="string",p=l.default.img`
43
- position: absolute;
44
- top: 0;
45
- left: 0;
46
- height: 100%;
36
+ `,m=v=>typeof v=="number",f=v=>typeof v=="string",p=l.default.div`
47
37
  width: 100%;
48
- object-fit: cover;
49
- object-position: ${({$positionX:v,$positionY:w})=>m(v)&&m(w)?`${v}% ${w}%`:$(v)&&$(w)?`${v} ${w}`:v||w?`${(m(v)?`${v}%`:v)||"50%"} ${(m(w)?`${w}%`:w)||"50%"}`:"50% 50%"};
38
+ min-height: 440px;
39
+ display: flex;
40
+ flex-direction: column;
41
+
42
+ ${({$centered:v})=>v&&"justify-content: center;"}
43
+
44
+ ${({$url:v,...w})=>v&&`
45
+ background: url('${v}');
46
+ background-repeat: no-repeat;
47
+ background-size: cover;
48
+ background-position: ${(({$positionX:j,$positionY:q})=>m(j)&&m(q)?`${j}% ${q}%`:f(j)&&f(q)?`${j} ${q}`:j||q?`${(m(j)?`${j}%`:j)||"50%"} ${(m(q)?`${q}%`:q)||"50%"}`:"50% 50%")(w)};
49
+ `}
50
50
  `,g=l.default.div`
51
- width: 100%;
52
- z-index: 1;
53
51
  padding-left: 1rem;
54
52
  padding-right: 1rem;
55
53
 
56
- ${r.mq("tablet")} {
54
+ ${i.mq("tablet")} {
57
55
  padding-left: 1.5rem;
58
56
  padding-right: 1.5rem;
59
57
  }
60
58
  `,h=l.default.div`
61
- ${({$centered:v})=>!v&&"margin-top: 3rem;"}
59
+ ${({$centered:v})=>!v&&"margin-top: 3rem;"}
62
60
 
63
61
  ${({$centered:v})=>v&&`
64
62
  display: flex;
65
63
  flex-direction: column;
66
64
  align-items: center;
67
- `}
65
+ text-align: center;
66
+ `}
68
67
 
69
68
  ${({$maxWidth:v,$dynamicGutter:w})=>!w&&`
70
69
  width: 100%;
@@ -74,18 +73,18 @@
74
73
  `}
75
74
 
76
75
  ${({$dynamicGutter:v})=>v&&`
77
- ${r.mq("tablet")} {
76
+ ${i.mq("tablet")} {
78
77
  margin-left: ${v.tabletVw}vw;
79
78
  margin-right: ${v.tabletVw}vw;
80
79
  }
81
80
 
82
- ${r.mq("laptop")} {
81
+ ${i.mq("laptop")} {
83
82
  margin-left: ${v.laptopVw}vw;
84
83
  margin-right: ${v.laptopVw}vw;
85
84
  }
86
85
  `}
87
86
 
88
- ${r.mq("laptop")} {
87
+ ${i.mq("laptop")} {
89
88
  ${({$centered:v})=>!v&&"margin-top: 3.75rem;"}
90
89
  }
91
90
  `,y=l.default(n.Display3)`
@@ -98,4 +97,4 @@
98
97
  display: inline-block;
99
98
  margin-top: 3rem;
100
99
  text-decoration: none;
101
- `;exports.colorAnimation=u,exports.default=({imageProps:v,videoProps:w,children:k,align:V,direction:C,justify:S,contentMaxWidth:W=64,heading:q,headingColor:B="dark",subheading:E,buttonProps:j,dynamicGutter:F,isLoading:H=!1,contentCentered:z=!1,containerStyle:I})=>{const{autoplay:M=0,controls:T=0,disablekb:X=0,end:G,loop:Y=0,modestbranding:_=1,start:A=0,showInfo:D=0}=(w==null?void 0:w.ytConfig)||{},{link:L,text:O,color:P,...J}=j!=null?j:{};return a.default.createElement(d,{$centered:z,style:I},H?a.default.createElement(c,{"data-testid":"loader"}):a.default.createElement(a.default.Fragment,null,w?a.default.createElement(f,{"data-testid":"hero-video",title:"video-frame",src:`${w.src}?disabledkb=${X}&autoplay=${M}&controls=${T}&loop=${Y}&modestbranding=${_}&start=${A}&showInfo=${D}${G?`&end=${G}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):a.default.createElement(p,{$positionX:v==null?void 0:v.x,$positionY:v==null?void 0:v.y,src:v==null?void 0:v.src,alt:"Hero background"})),(q||E||j)&&a.default.createElement(g,null,a.default.createElement(h,{$maxWidth:W,$dynamicGutter:F,$centered:z},q&&a.default.createElement(y,{as:"h1",$color:B},q),E&&a.default.createElement(x,{$color:B},E),j&&a.default.createElement(b,{href:L},a.default.createElement(i.Button,{size:"large",as:"span",color:P!=null?P:"secondary",...J},O)))),k&&a.default.createElement(s,{$pointerEvents:w?"none":"auto",$align:V||"flex-start",$direction:C||"column",$justify:S||"flex-start"},k))};
100
+ `;exports.colorAnimation=u,exports.default=({imageProps:v,videoProps:w,children:j,align:q,direction:C,justify:S,contentMaxWidth:W=64,heading:k,headingColor:G="dark",subheading:B,buttonProps:E,dynamicGutter:I,isLoading:M=!1,contentCentered:P=!1,containerStyle:T})=>{const{autoplay:X=0,controls:Y=0,disablekb:_=0,end:V,loop:A=0,modestbranding:D=1,start:F=0,showInfo:H=0}=(w==null?void 0:w.ytConfig)||{},{link:L,text:O,color:z,...J}=E!=null?E:{};return M?a.default.createElement(c,{"data-testid":"loader"}):a.default.createElement(d,{style:T},w?a.default.createElement($,{"data-testid":"hero-video",title:"video-frame",src:`${w.src}?disabledkb=${_}&autoplay=${X}&controls=${Y}&loop=${A}&modestbranding=${D}&start=${F}&showInfo=${H}${V?`&end=${V}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):a.default.createElement(p,{"data-testid":"hero-image",$positionX:v==null?void 0:v.x,$positionY:v==null?void 0:v.y,$url:v==null?void 0:v.src,$centered:P},a.default.createElement(g,null,(k||B||E)&&a.default.createElement(h,{$maxWidth:W,$dynamicGutter:I,$centered:P},k&&a.default.createElement(y,{as:"h1",$color:G},k),B&&a.default.createElement(x,{$color:G},B),E&&a.default.createElement(b,{href:L},a.default.createElement(r.Button,{size:"large",as:"span",color:z!=null?z:"secondary",...J},O))),j&&a.default.createElement(s,{$pointerEvents:w?"none":"auto",$align:q||"flex-start",$direction:C||"column",$justify:S||"flex-start"},j))))};
@@ -1,11 +1,11 @@
1
1
  "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`
2
- border: 1px solid ${({theme:y})=>y.colors.gray.light2}};
2
+ border: 1px solid ${({theme:y})=>y.colors.gray.light2};
3
3
  color: ${({theme:y})=>y.colors.text.disabled};
4
4
  fill: ${({theme:y})=>y.colors.text.disabled};
5
5
  `,n=r.css`
6
6
  border: 2px solid ${({theme:y})=>y.colors.error.dark};
7
7
  `,c=r.css`
8
- border: 2px solid ${({theme:y})=>y.colors.gray.dark5}};
8
+ border: 2px solid ${({theme:y})=>y.colors.gray.dark5};
9
9
  color: ${({theme:y})=>y.colors.text.dark};
10
10
  fill: ${({theme:y})=>y.colors.text.dark};
11
11
  `,u=s.default.div`
@@ -63,4 +63,4 @@
63
63
  `,x=s.default.span`
64
64
  display: block;
65
65
  color: ${({theme:y})=>y.colors.error.dark};
66
- `,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;
66
+ `,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;
@@ -1,55 +1,53 @@
1
- import n from"react";import r,{keyframes as L}from"styled-components";import{Display3 as T,Title as q}from"../../typography/Heading/index.js";import{Button as F}from"../Button/index.js";import{mq as a}from"../../shared/media-queries.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const R=r.div`
1
+ import n from"react";import r,{keyframes as L}from"styled-components";import{Display3 as T,Title as q}from"../../typography/Heading/index.js";import{Button as R}from"../Button/index.js";import{mq as a}from"../../shared/media-queries.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const W=r.div`
2
2
  position: relative;
3
3
  min-height: 440px;
4
- background-size: cover;
5
4
  display: flex;
6
5
  flex-direction: column;
7
- ${({$centered:e})=>e&&"justify-content: center;"}
8
- `,g=L`
6
+ `,p=L`
9
7
  0% {
10
- background-color:#f5f5f5;
8
+ background-color:#f5f5f5;
11
9
  }
12
-
10
+
13
11
  50%{
14
12
  background-color: #e5e5e5
15
13
  }
16
-
14
+
17
15
  100% {
18
- background-color:#f5f5f5;
19
- }`,W=r.div`
20
- position: absolute;
16
+ background-color:#f5f5f5;
17
+ }`,_=r.div`
21
18
  width: 100%;
22
- height: 100%;
23
- top: 0;
24
- left: 0;
25
- animation: ${g} 2s linear infinite;
26
- `,_=r.div`
19
+ height: 440px;
20
+ animation: ${p} 2s linear infinite;
21
+ `,A=r.div`
27
22
  pointer-events: ${({$pointerEvents:e})=>e};
28
- position: relative;
29
23
  display: flex;
30
24
  flex-direction: ${({$direction:e})=>e};
31
25
  align-items: ${({$align:e})=>e};
32
26
  justify-content: ${({$justify:e})=>e};
33
- padding: 50px;
27
+ padding: 3rem 1.5rem;
34
28
  z-index: 1;
35
29
  flex: 1;
36
- `,A=r.iframe`
30
+ `,D=r.iframe`
37
31
  position: absolute;
38
32
  width: 100%;
39
33
  height: 100%;
40
34
  top: 0;
41
35
  left: 0;
42
- `,i=e=>typeof e=="number",$=e=>typeof e=="string",D=({$positionX:e,$positionY:t})=>{if(i(e)&&i(t))return`${e}% ${t}%`;if($(e)&&$(t))return`${e} ${t}`;if(e||t){const o=i(e)?`${e}%`:e,c=i(t)?`${t}%`:t;return`${o||"50%"} ${c||"50%"}`}return"50% 50%"},N=r.img`
43
- position: absolute;
44
- top: 0;
45
- left: 0;
46
- height: 100%;
36
+ `,i=e=>typeof e=="number",$=e=>typeof e=="string",F=({$positionX:e,$positionY:t})=>{if(i(e)&&i(t))return`${e}% ${t}%`;if($(e)&&$(t))return`${e} ${t}`;if(e||t){const o=i(e)?`${e}%`:e,c=i(t)?`${t}%`:t;return`${o||"50%"} ${c||"50%"}`}return"50% 50%"},N=r.div`
47
37
  width: 100%;
48
- object-fit: cover;
49
- object-position: ${D};
38
+ min-height: 440px;
39
+ display: flex;
40
+ flex-direction: column;
41
+
42
+ ${({$centered:e})=>e&&"justify-content: center;"}
43
+
44
+ ${({$url:e,...t})=>e&&`
45
+ background: url('${e}');
46
+ background-repeat: no-repeat;
47
+ background-size: cover;
48
+ background-position: ${F(t)};
49
+ `}
50
50
  `,O=r.div`
51
- width: 100%;
52
- z-index: 1;
53
51
  padding-left: 1rem;
54
52
  padding-right: 1rem;
55
53
 
@@ -58,13 +56,14 @@ import n from"react";import r,{keyframes as L}from"styled-components";import{Dis
58
56
  padding-right: 1.5rem;
59
57
  }
60
58
  `,J=r.div`
61
- ${({$centered:e})=>!e&&"margin-top: 3rem;"}
59
+ ${({$centered:e})=>!e&&"margin-top: 3rem;"}
62
60
 
63
61
  ${({$centered:e})=>e&&`
64
62
  display: flex;
65
63
  flex-direction: column;
66
64
  align-items: center;
67
- `}
65
+ text-align: center;
66
+ `}
68
67
 
69
68
  ${({$maxWidth:e,$dynamicGutter:t})=>!t&&`
70
69
  width: 100%;
@@ -98,4 +97,4 @@ import n from"react";import r,{keyframes as L}from"styled-components";import{Dis
98
97
  display: inline-block;
99
98
  margin-top: 3rem;
100
99
  text-decoration: none;
101
- `,U=({imageProps:e,videoProps:t,children:o,align:c,direction:h,justify:x,contentMaxWidth:b=64,heading:d,headingColor:m="dark",subheading:s,buttonProps:l,dynamicGutter:y,isLoading:w=!1,contentCentered:f=!1,containerStyle:v})=>{const{autoplay:j=0,controls:k=0,disablekb:E=0,end:u,loop:B=0,modestbranding:V=1,start:z=0,showInfo:C=0}=(t==null?void 0:t.ytConfig)||{},{link:H,text:S,color:p,...I}=l!=null?l:{};return n.createElement(R,{$centered:f,style:v},w?n.createElement(W,{"data-testid":"loader"}):n.createElement(n.Fragment,null,t?n.createElement(A,{"data-testid":"hero-video",title:"video-frame",src:`${t.src}?disabledkb=${E}&autoplay=${j}&controls=${k}&loop=${B}&modestbranding=${V}&start=${z}&showInfo=${C}${u?`&end=${u}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):n.createElement(N,{$positionX:e==null?void 0:e.x,$positionY:e==null?void 0:e.y,src:e==null?void 0:e.src,alt:"Hero background"})),(d||s||l)&&n.createElement(O,null,n.createElement(J,{$maxWidth:b,$dynamicGutter:y,$centered:f},d&&n.createElement(K,{as:"h1",$color:m},d),s&&n.createElement(M,{$color:m},s),l&&n.createElement(Q,{href:H},n.createElement(F,{size:"large",as:"span",color:p!=null?p:"secondary",...I},S)))),o&&n.createElement(_,{$pointerEvents:t?"none":"auto",$align:c||"flex-start",$direction:h||"column",$justify:x||"flex-start"},o))};export{g as colorAnimation,U as default};
100
+ `,U=({imageProps:e,videoProps:t,children:o,align:c,direction:x,justify:h,contentMaxWidth:y=64,heading:d,headingColor:s="dark",subheading:m,buttonProps:l,dynamicGutter:b,isLoading:w=!1,contentCentered:f=!1,containerStyle:v})=>{const{autoplay:k=0,controls:E=0,disablekb:j=0,end:u,loop:B=0,modestbranding:C=1,start:V=0,showInfo:S=0}=(t==null?void 0:t.ytConfig)||{},{link:z,text:H,color:g,...I}=l!=null?l:{};return w?n.createElement(_,{"data-testid":"loader"}):n.createElement(W,{style:v},t?n.createElement(D,{"data-testid":"hero-video",title:"video-frame",src:`${t.src}?disabledkb=${j}&autoplay=${k}&controls=${E}&loop=${B}&modestbranding=${C}&start=${V}&showInfo=${S}${u?`&end=${u}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):n.createElement(N,{"data-testid":"hero-image",$positionX:e==null?void 0:e.x,$positionY:e==null?void 0:e.y,$url:e==null?void 0:e.src,$centered:f},n.createElement(O,null,(d||m||l)&&n.createElement(J,{$maxWidth:y,$dynamicGutter:b,$centered:f},d&&n.createElement(K,{as:"h1",$color:s},d),m&&n.createElement(M,{$color:s},m),l&&n.createElement(Q,{href:z},n.createElement(R,{size:"large",as:"span",color:g!=null?g:"secondary",...I},H))),o&&n.createElement(A,{$pointerEvents:t?"none":"auto",$align:c||"flex-start",$direction:x||"column",$justify:h||"flex-start"},o))))};export{p as colorAnimation,U as default};
@@ -1,18 +1,18 @@
1
- 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`
2
- border: 1px solid ${({theme:e})=>e.colors.gray.light2}};
1
+ 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`
2
+ border: 1px solid ${({theme:e})=>e.colors.gray.light2};
3
3
  color: ${({theme:e})=>e.colors.text.disabled};
4
4
  fill: ${({theme:e})=>e.colors.text.disabled};
5
- `,H=p`
6
- border: 2px solid ${({theme:e})=>e.colors.error.dark};
7
5
  `,I=p`
8
- border: 2px solid ${({theme:e})=>e.colors.gray.dark5}};
6
+ border: 2px solid ${({theme:e})=>e.colors.error.dark};
7
+ `,z=p`
8
+ border: 2px solid ${({theme:e})=>e.colors.gray.dark5};
9
9
  color: ${({theme:e})=>e.colors.text.dark};
10
10
  fill: ${({theme:e})=>e.colors.text.dark};
11
- `,z=o.div`
11
+ `,C=t.div`
12
12
  position: relative;
13
13
  padding: 0;
14
14
  display: block;
15
- `,C=o.div`
15
+ `,L=t.div`
16
16
  display: flex;
17
17
  text-align: center;
18
18
  align-items: center;
@@ -26,12 +26,12 @@ import t,{useState as S}from"react";import o,{css as p}from"styled-components";i
26
26
 
27
27
  padding: 0.75rem 0.6rem;
28
28
 
29
- ${({hasError:e,isFocused:l})=>!e&&l&&I}
30
- ${({disabled:e})=>e&&w}
31
- ${({hasError:e})=>e&&H}
29
+ ${({hasError:e,isFocused:l})=>!e&&l&&z}
30
+ ${({disabled:e})=>e&&H}
31
+ ${({hasError:e})=>e&&I}
32
32
  ${({centered:e})=>e&&"text-align: center;"}
33
- `,L=o.input`
34
- ${B}
33
+ `,W=t.input`
34
+ ${T}
35
35
  width: 100%;
36
36
  cursor: text;
37
37
  outline: none;
@@ -42,7 +42,7 @@ import t,{useState as S}from"react";import o,{css as p}from"styled-components";i
42
42
  color: ${({theme:e})=>e.colors.text.disabled};
43
43
  fill: ${({theme:e})=>e.colors.text.disabled};
44
44
  }
45
- `,W=o.span`
45
+ `,_=t.span`
46
46
  display: flex;
47
47
  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
48
48
  font-size: 1.25rem;
@@ -52,15 +52,15 @@ import t,{useState as S}from"react";import o,{css as p}from"styled-components";i
52
52
  width: 1.375rem;
53
53
  height: 1.375rem;
54
54
  }
55
- `,_=o.div`
56
- ${T}
55
+ `,q=t.div`
56
+ ${j}
57
57
  margin-top: 0.25rem;
58
58
 
59
59
  ${({centered:e})=>e&&"width: 100%; text-align: center;"}
60
- `,q=o.span`
60
+ `,A=t.span`
61
61
  display: block;
62
62
  color: ${({theme:e})=>e.colors.text.disabled};
63
- `,A=o.span`
63
+ `,N=t.span`
64
64
  display: block;
65
65
  color: ${({theme:e})=>e.colors.error.dark};
66
- `,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};
66
+ `,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};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "12.2.1",
3
+ "version": "12.3.1",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -8,7 +8,8 @@ export interface TextFieldProps extends ComponentPropsWithoutRef<'input'> {
8
8
  suffix?: ReactNode;
9
9
  forwardRef?: RefObject<HTMLInputElement>;
10
10
  errors?: string[];
11
+ isAutoFocused?: boolean;
11
12
  }
12
13
  /** The main text field used */
13
- export declare const TextField: ({ placeholder, isDisabled, centered, hasError, className, helperText, label, onBlur, onFocus, forwardRef, suffix, name, errors, ...props }: TextFieldProps) => JSX.Element;
14
+ export declare const TextField: ({ placeholder, isDisabled, centered, hasError, className, helperText, label, onBlur, onFocus, forwardRef, suffix, name, errors, isAutoFocused, ...props }: TextFieldProps) => JSX.Element;
14
15
  export default TextField;