@kvdbil/components 17.12.2 → 17.12.4

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.
Files changed (8) hide show
  1. package/cjs/components/FieldLabel.js +4 -4
  2. package/cjs/components/Textfield/index.js +12 -11
  3. package/esm/components/FieldLabel.js +17 -17
  4. package/esm/components/Message/index.js +1 -1
  5. package/esm/components/Textfield/index.js +16 -15
  6. package/package.json +9 -5
  7. package/package.json.tmp +9 -5
  8. package/types/components/FieldLabel.d.ts +1 -0
package/cjs/components/FieldLabel.js CHANGED
@@ -8,11 +8,11 @@
8
8
  right: 0;
9
9
  margin-right: auto;
10
10
  margin-left: auto;
11
- `,n=t.default.label`
11
+ `,l=t.default.label`
12
12
  ${r.BodyTextStyle}
13
13
  pointer-events: none;
14
14
  position: absolute;
15
- max-width: calc(100% - 2rem);
15
+ max-width: ${({suffixWidth:e,hasValue:r,isFocused:o})=>!e||r||o?"calc(100% - 2rem)":`calc(100% - 2rem - ${e}px)`};
16
16
  z-index: 1;
17
17
  top: ${({height:e})=>e?`calc(${e}rem - 5px)`:"12px"};
18
18
  left: calc(0.75rem + 2px);
@@ -23,7 +23,7 @@
23
23
  text-overflow: ellipsis;
24
24
  background: transparent;
25
25
 
26
- ${({theme:e,hasValue:r,isFocused:o})=>(r||o)&&`\n span {\n display: block;\n width: 100%;\n height: 8px;\n position: absolute;\n top: 6px;\n left: 0;\n background-color: ${e.colors.background.light};\n z-index: -1;\n }\n `}
26
+ ${({theme:e,hasValue:r,isFocused:o})=>(r||o)&&`\n span {\n display: block;\n width: 100%;\n height: 4px;\n position: absolute;\n top: 5px;\n left: 0;\n background-color: ${e.colors.background.light};\n z-index: -1;\n }\n `}
27
27
 
28
28
  ${({hasValue:r,isFocused:o,height:t,hasError:s})=>(r||o)&&((r,o)=>e.css`
29
29
  transform: translateY(${r});
@@ -37,4 +37,4 @@
37
37
  ${({centered:e,hasValue:r,isFocused:o})=>(r||o)&&e&&i}
38
38
  ${({isFocused:e})=>e&&s}
39
39
  ${({disabled:e})=>e&&a}
40
- `;exports.Label=n;
40
+ `;exports.Label=l;
package/cjs/components/Textfield/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),l=require("styled-components"),o=require("../FieldLabel.js"),s=require("../../typography/BodyText/index.js"),a=require("../../hooks/useNameAndId.js");require("../../shared/media-queries.js"),require("../../shared/helpers.js");var d,t=(d=l)&&d.__esModule?d:{default:d};const i=l.css`
1
+ "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("../../hooks/useNameAndId.js");require("../../shared/media-queries.js"),require("../../shared/helpers.js");var a,d=(a=l)&&a.__esModule?a:{default:a};const i=l.css`
2
2
  border: 1px solid ${({theme:e})=>e.colors.grayscaleToned.light2};
3
3
  color: ${({theme:e})=>e.colors.text.disabled};
4
4
  fill: ${({theme:e})=>e.colors.text.disabled};
@@ -8,11 +8,11 @@
8
8
  border: 2px solid ${({theme:e})=>e.colors.grayscaleToned.dark5};
9
9
  color: ${({theme:e})=>e.colors.text.dark};
10
10
  fill: ${({theme:e})=>e.colors.text.dark};
11
- `,h=t.default.div`
11
+ `,u=d.default.div`
12
12
  position: relative;
13
13
  padding: 0;
14
14
  display: block;
15
- `,u=t.default.div`
15
+ `,h=d.default.div`
16
16
  display: flex;
17
17
  text-align: center;
18
18
  align-items: center;
@@ -30,8 +30,8 @@
30
30
  ${({disabled:e})=>e&&i}
31
31
  ${({hasError:e})=>e&&n}
32
32
  ${({centered:e})=>e&&"text-align: center;"}
33
- `,m=t.default.input`
34
- ${s.BodyTextStyle}
33
+ `,m=d.default.input`
34
+ ${o.BodyTextStyle}
35
35
  width: 100%;
36
36
  cursor: text;
37
37
  outline: none;
@@ -42,25 +42,26 @@
42
42
  color: ${({theme:e})=>e.colors.text.disabled};
43
43
  fill: ${({theme:e})=>e.colors.text.disabled};
44
44
  }
45
- `,x=t.default.span`
45
+ `,x=d.default.span`
46
46
  display: flex;
47
47
  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
48
48
  font-size: 1.25rem;
49
49
  line-height: 1.5rem;
50
+ white-space: nowrap;
50
51
 
51
52
  svg {
52
53
  width: 1.375rem;
53
54
  height: 1.375rem;
54
55
  }
55
- `,p=t.default.div`
56
- ${s.CaptionStyle}
56
+ `,p=d.default.div`
57
+ ${o.CaptionStyle}
57
58
  margin-top: 0.25rem;
58
59
 
59
60
  ${({centered:e})=>e&&"width: 100%; text-align: center;"}
60
- `,b=t.default.span`
61
+ `,b=d.default.span`
61
62
  display: block;
62
63
  color: ${({theme:e})=>e.colors.text.disabled};
63
- `,$=t.default.span`
64
+ `,f=d.default.span`
64
65
  display: block;
65
66
  color: ${({theme:e})=>e.colors.error.dark};
66
- `,f=({placeholder:l="",isDisabled:s=!1,centered:d=!1,hasError:t=!1,className:i,helperText:n,label:c="",onBlur:f=(()=>null),onFocus:g=(()=>null),forwardRef:y,suffix:j,name:v,errors:k,isAutoFocused:F=!1,...q})=>{const[T,B]=r.useState(!1),A=!!q.value,E=k&&Array.isArray(k)&&k?.length>0,{name:w,id:N}=a.useNameAndId("text-input",v),_=k?.map(((e,r)=>`${N}-error-${r}`))??[],S=[n?`${N}-helper`:null,..._].filter(Boolean).join(" ");return e.jsxs(h,{className:i,children:[e.jsxs(u,{isFocused:T,disabled:s,centered:d,hasError:t,hasPlaceholder:!!l,children:[e.jsx(m,{...q,id:N,name:w,"aria-labelledby":c?`${N}-label`:void 0,"aria-describedby":S||void 0,"aria-invalid":E||t,ref:y,onFocus:e=>{B(!0),g(e)},onBlur:e=>{B(!1),f(e)},disabled:s,placeholder:c&&!T?"":l,autoFocus:F}),j&&e.jsx(x,{children:j})]}),c&&e.jsx(o.Label,{id:`${N}-label`,htmlFor:N,isFocused:T,centered:d,hasError:t,hasValue:A,disabled:s,children:e.jsxs(e.Fragment,{children:[c,e.jsx("span",{})]})}),(n||E)&&e.jsxs(p,{centered:d,children:[n&&e.jsx(b,{id:`${N}-helper`,children:n}),E&&k.map(((r,l)=>e.jsx($,{id:`${N}-error-${l}`,role:"alert","aria-live":"assertive",children:r},`${N}-error-${l}`)))]})]})};exports.TextField=f,exports.default=f;
67
+ `,$=({placeholder:l="",isDisabled:o=!1,centered:a=!1,hasError:d=!1,className:i,helperText:n,label:c="",onBlur:$=(()=>null),onFocus:g=(()=>null),forwardRef:y,suffix:j,name:v,errors:k,isAutoFocused:F=!1,...q})=>{const[T,w]=r.useState(!1),[B,E]=r.useState(void 0),A=r.useRef(null),N=!!q.value,S=k&&Array.isArray(k)&&k?.length>0,{name:_,id:z}=t.useNameAndId("text-input",v),I=k?.map(((e,r)=>`${z}-error-${r}`))??[],L=[n?`${z}-helper`:null,...I].filter(Boolean).join(" ");return r.useEffect((()=>{A.current&&E(A.current.offsetWidth)}),[A.current]),e.jsxs(u,{className:i,children:[e.jsxs(h,{isFocused:T,disabled:o,centered:a,hasError:d,hasPlaceholder:!!l,children:[e.jsx(m,{...q,id:z,name:_,"aria-labelledby":c?`${z}-label`:void 0,"aria-describedby":L||void 0,"aria-invalid":S||d,ref:y,onFocus:e=>{w(!0),g(e)},onBlur:e=>{w(!1),$(e)},disabled:o,placeholder:c&&!T?"":l,autoFocus:F}),j&&e.jsx(x,{ref:A,children:j})]}),c&&e.jsx(s.Label,{id:`${z}-label`,htmlFor:z,isFocused:T,centered:a,hasError:d,hasValue:N,disabled:o,suffixWidth:B,children:e.jsxs(e.Fragment,{children:[c,e.jsx("span",{})]})}),(n||S)&&e.jsxs(p,{centered:a,children:[n&&e.jsx(b,{id:`${z}-helper`,children:n}),S&&k.map(((r,l)=>e.jsx(f,{id:`${z}-error-${l}`,role:"alert","aria-live":"assertive",children:r},`${z}-error-${l}`)))]})]})};exports.TextField=$,exports.default=$;
package/esm/components/FieldLabel.js CHANGED
@@ -1,51 +1,51 @@
1
- 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,e)=>t`
2
- transform: translateY(${o});
1
+ import a,{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=(e,o)=>t`
2
+ transform: translateY(${e});
3
3
  line-height: 0.875rem;
4
4
  font-size: 0.75rem;
5
5
  transform-origin: 0 0;
6
6
  padding: 0 5px;
7
7
  left: 0.5rem;
8
- color: ${({theme:r})=>e?r.colors.error.dark:r.colors.text.dark};
8
+ color: ${({theme:r})=>o?r.colors.error.dark:r.colors.text.dark};
9
9
  `,c=t`
10
- color: ${({theme:o,hasError:e})=>e?o.colors.error.dark:o.colors.text.dark};
10
+ color: ${({theme:e,hasError:o})=>o?e.colors.error.dark:e.colors.text.dark};
11
11
  `,n=t`
12
- color: ${({theme:o})=>o.colors.text.disabled};
12
+ color: ${({theme:e})=>e.colors.text.disabled};
13
13
  `,d=t`
14
14
  width: max-content;
15
15
  left: 0;
16
16
  right: 0;
17
17
  margin-right: auto;
18
18
  margin-left: auto;
19
- `,h=s.label`
19
+ `,h=a.label`
20
20
  ${i}
21
21
  pointer-events: none;
22
22
  position: absolute;
23
- max-width: calc(100% - 2rem);
23
+ max-width: ${({suffixWidth:e,hasValue:o,isFocused:r})=>e&&!o&&!r?`calc(100% - 2rem - ${e}px)`:"calc(100% - 2rem)"};
24
24
  z-index: 1;
25
- top: ${({height:o})=>o?`calc(${o}rem - 5px)`:"12px"};
25
+ top: ${({height:e})=>e?`calc(${e}rem - 5px)`:"12px"};
26
26
  left: calc(0.75rem + 2px);
27
27
  transition: 150ms;
28
- color: ${({theme:o})=>o.colors.text.dark};
28
+ color: ${({theme:e})=>e.colors.text.dark};
29
29
  overflow: hidden;
30
30
  white-space: nowrap;
31
31
  text-overflow: ellipsis;
32
32
  background: transparent;
33
33
 
34
- ${({theme:o,hasValue:e,isFocused:r})=>(e||r)&&`
34
+ ${({theme:e,hasValue:o,isFocused:r})=>(o||r)&&`
35
35
  span {
36
36
  display: block;
37
37
  width: 100%;
38
- height: 8px;
38
+ height: 4px;
39
39
  position: absolute;
40
- top: 6px;
40
+ top: 5px;
41
41
  left: 0;
42
- background-color: ${o.colors.background.light};
42
+ background-color: ${e.colors.background.light};
43
43
  z-index: -1;
44
44
  }
45
45
  `}
46
46
 
47
- ${({hasValue:o,isFocused:e,height:r,hasError:a})=>(o||e)&&l(`${r?`calc(-${r}rem - 2px)`:"-18px"}`,a)}
48
- ${({centered:o,hasValue:e,isFocused:r})=>(e||r)&&o&&d}
49
- ${({isFocused:o})=>o&&c}
50
- ${({disabled:o})=>o&&n}
47
+ ${({hasValue:e,isFocused:o,height:r,hasError:s})=>(e||o)&&l(`${r?`calc(-${r}rem - 2px)`:"-18px"}`,s)}
48
+ ${({centered:e,hasValue:o,isFocused:r})=>(o||r)&&e&&d}
49
+ ${({isFocused:e})=>e&&c}
50
+ ${({disabled:e})=>e&&n}
51
51
  `;export{h as Label};
package/esm/components/Message/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import{jsx as o,jsxs as a}from"react/jsx-runtime";import{useRef as h,useState as x}from"react";import s from"styled-components";import{TinyTitleRegular as v}from"../../typography/Heading/index.js";import b from"../../icons/components/AlertIcon.js";import k from"../../icons/components/CheckCircleIcon.js";import y from"../../icons/components/CloseIcon.js";import $ from"../../icons/components/InfoIcon.js";import w from"../../icons/components/WarningIcon.js";import{resetButtonStyle as C}from"../../utils/utils.js";import"../../shared/media-queries.js";const T=(e,r,t)=>{const n=t.colors.text.dark,i=t.colors.background.light;switch(e){case"info":return{text:r?t.colors.info.dark:n,background:r?i:t.colors.info.lighter};case"success":return{text:r?t.colors.success.dark:n,background:r?i:t.colors.success.lighter};case"warning":return{text:r?t.colors.warning.dark:n,background:r?i:t.colors.warning.lighter};case"error":return{text:r?t.colors.error.dark:n,background:r?i:t.colors.error.lighter};case"text":default:return{text:r?t.colors.text.light:n,background:r?t.colors.background.dark:i}}},j=e=>{switch(e){case"success":return o(k,{});case"warning":return o(w,{});case"error":return o(b,{});case"info":case"text":default:return o($,{})}},D=s.div`
1
+ import{jsx as o,jsxs as a}from"react/jsx-runtime";import{useRef as h,useState as x}from"react";import s from"styled-components";import{TinyTitleRegular as v}from"../../typography/Heading/index.js";import b from"../../icons/components/AlertIcon.js";import k from"../../icons/components/CheckCircleIcon.js";import y from"../../icons/components/CloseIcon.js";import $ from"../../icons/components/InfoIcon.js";import w from"../../icons/components/WarningIcon.js";import{resetButtonStyle as C}from"../../utils/utils.js";import"../../shared/media-queries.js";const T=(e,r,t)=>{const n=t.colors.text.dark,i=t.colors.background.light;switch(e){case"info":return{text:r?t.colors.info.dark:n,background:r?i:t.colors.info.lighter};case"success":return{text:r?t.colors.success.dark:n,background:r?i:t.colors.success.lighter};case"warning":return{text:r?t.colors.warning.dark:n,background:r?i:t.colors.warning.lighter};case"error":return{text:r?t.colors.error.dark:n,background:r?i:t.colors.error.lighter};default:return{text:r?t.colors.text.light:n,background:r?t.colors.background.dark:i}}},j=e=>{switch(e){case"success":return o(k,{});case"warning":return o(w,{});case"error":return o(b,{});default:return o($,{})}},D=s.div`
2
2
  ${({isDeleted:e})=>e&&`
3
3
  opacity: 0;
4
4
  transition: opacity 0.3s;
package/esm/components/Textfield/index.js CHANGED
@@ -1,18 +1,18 @@
1
- import{jsxs as c,jsx as t,Fragment as z}from"react/jsx-runtime";import{useState as I}from"react";import o,{css as $}from"styled-components";import{Label as R}from"../FieldLabel.js";import{BodyTextStyle as V,CaptionStyle as q}from"../../typography/BodyText/index.js";import{useNameAndId as C}from"../../hooks/useNameAndId.js";import"../../shared/media-queries.js";import"../../shared/helpers.js";const D=$`
1
+ import{jsxs as m,jsx as t,Fragment as V}from"react/jsx-runtime";import{useState as y,useRef as q,useEffect as C}from"react";import o,{css as u}from"styled-components";import{Label as D}from"../FieldLabel.js";import{BodyTextStyle as G,CaptionStyle as H}from"../../typography/BodyText/index.js";import{useNameAndId as I}from"../../hooks/useNameAndId.js";import"../../shared/media-queries.js";import"../../shared/helpers.js";const J=u`
2
2
  border: 1px solid ${({theme:e})=>e.colors.grayscaleToned.light2};
3
3
  color: ${({theme:e})=>e.colors.text.disabled};
4
4
  fill: ${({theme:e})=>e.colors.text.disabled};
5
- `,G=$`
5
+ `,K=u`
6
6
  border: 2px solid ${({theme:e})=>e.colors.error.dark};
7
- `,H=$`
7
+ `,O=u`
8
8
  border: 2px solid ${({theme:e})=>e.colors.grayscaleToned.dark5};
9
9
  color: ${({theme:e})=>e.colors.text.dark};
10
10
  fill: ${({theme:e})=>e.colors.text.dark};
11
- `,L=o.div`
11
+ `,P=o.div`
12
12
  position: relative;
13
13
  padding: 0;
14
14
  display: block;
15
- `,M=o.div`
15
+ `,Q=o.div`
16
16
  display: flex;
17
17
  text-align: center;
18
18
  align-items: center;
@@ -26,12 +26,12 @@ import{jsxs as c,jsx as t,Fragment as z}from"react/jsx-runtime";import{useState
26
26
 
27
27
  padding: 0.75rem 0.6rem;
28
28
 
29
- ${({hasError:e,isFocused:a})=>!e&&a&&H}
30
- ${({disabled:e})=>e&&D}
31
- ${({hasError:e})=>e&&G}
29
+ ${({hasError:e,isFocused:i})=>!e&&i&&O}
30
+ ${({disabled:e})=>e&&J}
31
+ ${({hasError:e})=>e&&K}
32
32
  ${({centered:e})=>e&&"text-align: center;"}
33
- `,O=o.input`
34
- ${V}
33
+ `,U=o.input`
34
+ ${G}
35
35
  width: 100%;
36
36
  cursor: text;
37
37
  outline: none;
@@ -42,25 +42,26 @@ import{jsxs as c,jsx as t,Fragment as z}from"react/jsx-runtime";import{useState
42
42
  color: ${({theme:e})=>e.colors.text.disabled};
43
43
  fill: ${({theme:e})=>e.colors.text.disabled};
44
44
  }
45
- `,P=o.span`
45
+ `,X=o.span`
46
46
  display: flex;
47
47
  font-family: ${({theme:e})=>e.typography.fontBaseFamily};
48
48
  font-size: 1.25rem;
49
49
  line-height: 1.5rem;
50
+ white-space: nowrap;
50
51
 
51
52
  svg {
52
53
  width: 1.375rem;
53
54
  height: 1.375rem;
54
55
  }
55
56
  `,_=o.div`
56
- ${q}
57
+ ${H}
57
58
  margin-top: 0.25rem;
58
59
 
59
60
  ${({centered:e})=>e&&"width: 100%; text-align: center;"}
60
- `,J=o.span`
61
+ `,M=o.span`
61
62
  display: block;
62
63
  color: ${({theme:e})=>e.colors.text.disabled};
63
- `,K=o.span`
64
+ `,Y=o.span`
64
65
  display: block;
65
66
  color: ${({theme:e})=>e.colors.error.dark};
66
- `,g=({placeholder:e="",isDisabled:a=!1,centered:m=!1,hasError:h=!1,className:y,helperText:s,label:d="",onBlur:k=()=>null,onFocus:v=()=>null,forwardRef:F,suffix:f,name:B,errors:i,isAutoFocused:T=!1,...u})=>{const[p,x]=I(!1),w=!!u.value,b=i&&Array.isArray(i)&&i?.length>0,{name:E,id:r}=C("text-input",B),j=i?.map((l,n)=>`${r}-error-${n}`)??[],A=[s?`${r}-helper`:null,...j].filter(Boolean).join(" "),N=l=>{x(!0),v(l)},S=l=>{x(!1),k(l)};return c(L,{className:y,children:[c(M,{isFocused:p,disabled:a,centered:m,hasError:h,hasPlaceholder:!!e,children:[t(O,{...u,id:r,name:E,"aria-labelledby":d?`${r}-label`:void 0,"aria-describedby":A||void 0,"aria-invalid":b||h,ref:F,onFocus:N,onBlur:S,disabled:a,placeholder:d&&!p?"":e,autoFocus:T}),f&&t(P,{children:f})]}),d&&t(R,{id:`${r}-label`,htmlFor:r,isFocused:p,centered:m,hasError:h,hasValue:w,disabled:a,children:c(z,{children:[d,t("span",{})]})}),(s||b)&&c(_,{centered:m,children:[s&&t(J,{id:`${r}-helper`,children:s}),b&&i.map((l,n)=>t(K,{id:`${r}-error-${n}`,role:"alert","aria-live":"assertive",children:l},`${r}-error-${n}`))]})]})};export{g as TextField,g as default};
67
+ `,k=({placeholder:e="",isDisabled:i=!1,centered:h=!1,hasError:p=!1,className:v,helperText:s,label:d="",onBlur:F=()=>null,onFocus:w=()=>null,forwardRef:B,suffix:$,name:E,errors:a,isAutoFocused:T=!1,...x})=>{const[b,g]=y(!1),[A,S]=y(void 0),n=q(null),j=!!x.value,f=a&&Array.isArray(a)&&a?.length>0,{name:N,id:r}=I("text-input",E),R=a?.map((l,c)=>`${r}-error-${c}`)??[],W=[s?`${r}-helper`:null,...R].filter(Boolean).join(" "),z=l=>{g(!0),w(l)},L=l=>{g(!1),F(l)};return C(()=>{n.current&&S(n.current.offsetWidth)},[n.current]),m(P,{className:v,children:[m(Q,{isFocused:b,disabled:i,centered:h,hasError:p,hasPlaceholder:!!e,children:[t(U,{...x,id:r,name:N,"aria-labelledby":d?`${r}-label`:void 0,"aria-describedby":W||void 0,"aria-invalid":f||p,ref:B,onFocus:z,onBlur:L,disabled:i,placeholder:d&&!b?"":e,autoFocus:T}),$&&t(X,{ref:n,children:$})]}),d&&t(D,{id:`${r}-label`,htmlFor:r,isFocused:b,centered:h,hasError:p,hasValue:j,disabled:i,suffixWidth:A,children:m(V,{children:[d,t("span",{})]})}),(s||f)&&m(_,{centered:h,children:[s&&t(M,{id:`${r}-helper`,children:s}),f&&a.map((l,c)=>t(Y,{id:`${r}-error-${c}`,role:"alert","aria-live":"assertive",children:l},`${r}-error-${c}`))]})]})};export{k as TextField,k as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "17.12.2",
3
+ "version": "17.12.4",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -47,7 +47,11 @@
47
47
  "not op_mini all"
48
48
  ],
49
49
  "resolutions": {
50
- "**/@types/react": "^18.3.12"
50
+ "**/@types/react": "^18.3.12",
51
+ "**/minimatch": "^9.0.7",
52
+ "**/flatted": "^3.4.2",
53
+ "**/serialize-javascript": "^7.0.3",
54
+ "**/svgo": "^3.3.3"
51
55
  },
52
56
  "devDependencies": {
53
57
  "@babel/core": "^7.11.6",
@@ -62,7 +66,7 @@
62
66
  "@storybook/addon-themes": "^8.3.3",
63
67
  "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
64
68
  "@storybook/react": "^8.3.3",
65
- "@storybook/react-webpack5": "^8.3.3",
69
+ "@storybook/react-webpack5": "^8.6.18",
66
70
  "@svgr/cli": "^8.0.0",
67
71
  "@testing-library/dom": "^10.4.0",
68
72
  "@testing-library/jest-dom": "^6.9.1",
@@ -85,13 +89,13 @@
85
89
  "esbuild": "^0.27.0",
86
90
  "eslint": "^9.32.0",
87
91
  "eslint-config-prettier": "^10.0.1",
88
- "eslint-plugin-mdx": "^3.6.2",
92
+ "eslint-plugin-mdx": "^3.7.0",
89
93
  "eslint-plugin-react": "^7.36.1",
90
94
  "eslint-plugin-react-hooks": "^5.0.0",
91
95
  "globals": "^16.0.0",
92
96
  "husky": "^9.1.5",
93
97
  "identity-obj-proxy": "^3.0.0",
94
- "jest": "^30.2.0",
98
+ "jest": "^30.3.0",
95
99
  "jest-environment-jsdom": "^30.2.0",
96
100
  "jest-styled-components": "^7.2.0",
97
101
  "jest-watch-typeahead": "^3.0.1",
package/package.json.tmp CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "17.12.2",
3
+ "version": "17.12.4",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -46,7 +46,11 @@
46
46
  "not op_mini all"
47
47
  ],
48
48
  "resolutions": {
49
- "**/@types/react": "^18.3.12"
49
+ "**/@types/react": "^18.3.12",
50
+ "**/minimatch": "^9.0.7",
51
+ "**/flatted": "^3.4.2",
52
+ "**/serialize-javascript": "^7.0.3",
53
+ "**/svgo": "^3.3.3"
50
54
  },
51
55
  "devDependencies": {
52
56
  "@babel/core": "^7.11.6",
@@ -61,7 +65,7 @@
61
65
  "@storybook/addon-themes": "^8.3.3",
62
66
  "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
63
67
  "@storybook/react": "^8.3.3",
64
- "@storybook/react-webpack5": "^8.3.3",
68
+ "@storybook/react-webpack5": "^8.6.18",
65
69
  "@svgr/cli": "^8.0.0",
66
70
  "@testing-library/dom": "^10.4.0",
67
71
  "@testing-library/jest-dom": "^6.9.1",
@@ -84,13 +88,13 @@
84
88
  "esbuild": "^0.27.0",
85
89
  "eslint": "^9.32.0",
86
90
  "eslint-config-prettier": "^10.0.1",
87
- "eslint-plugin-mdx": "^3.6.2",
91
+ "eslint-plugin-mdx": "^3.7.0",
88
92
  "eslint-plugin-react": "^7.36.1",
89
93
  "eslint-plugin-react-hooks": "^5.0.0",
90
94
  "globals": "^16.0.0",
91
95
  "husky": "^9.1.5",
92
96
  "identity-obj-proxy": "^3.0.0",
93
- "jest": "^30.2.0",
97
+ "jest": "^30.3.0",
94
98
  "jest-environment-jsdom": "^30.2.0",
95
99
  "jest-styled-components": "^7.2.0",
96
100
  "jest-watch-typeahead": "^3.0.1",
package/types/components/FieldLabel.d.ts CHANGED
@@ -5,4 +5,5 @@ export declare const Label: import("styled-components/dist/types").IStyledCompon
5
5
  centered?: boolean;
6
6
  hasError: boolean;
7
7
  height?: number;
8
+ suffixWidth?: number;
8
9
  }>> & string;