@kvdbil/components 8.3.2 → 8.3.6

package/cjs/components/RadioButton/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/helpers.js"),a=require("../../theme.js"),l=require("../IconButton.js"),i=require("../../typography/BodyText/index.js");function o(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../../shared/media-queries.js");var s=o(e),d=o(r);const c={regular:r.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/helpers.js"),a=require("../../theme.js"),i=require("../IconButton.js"),l=require("../../typography/BodyText/index.js");function o(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../../shared/media-queries.js");var s=o(e),c=o(r);const d={regular:r.css`
   .circle {
     &--outer {
       height: 24px;
@@ -43,18 +43,18 @@
       background-color: ${a.default.colors.gray.light1};
     }
   }
-`,f=d.default.div`
+`,f=c.default.div`
   display: flex;
   align-items: center;
   box-sizing: border-box;
-`,b=d.default.span`
+`,b=c.default.span`
   cursor: pointer;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
 
-  ${y=>c[y.size]};
+  ${y=>d[y.size]};
 
   ${y=>{return!y.isDisabled&&y.isChecked&&($=y.color,r.css`
   .circle {
@@ -71,15 +71,16 @@
   ${y=>y.isDisabled&&n};
 
   ${y=>y.isChecked&&y.isDisabled&&u};
-`,p=d.default.input`
-  display: none;
-`,g=d.default.span`
+`,p=c.default.input`
+  position: fixed;
+  opacity: 0;
+`,h=c.default.span`
   display: flex;
   box-sizing: border-box;
   border-radius: 50%;
 
   border: 2px solid ${a.default.colors.gray.light1};
-`,h=d.default.span`
+`,g=c.default.span`
   box-sizing: border-box;
   opacity: 0;
   margin: auto;
@@ -89,9 +90,9 @@
   position: absolute;
   top: 0;
   left: 0;
-`,m=d.default(i.BodyText)`
+`,m=c.default(l.BodyText)`
   cursor: ${({isDisabled:y})=>y?"default":"pointer"};
   user-select: none;
   color: ${({theme:y,isDisabled:$})=>$?y.colors.text.disabled:y.colors.text.dark};
   margin-left: 0.5rem;
-`,x=({name:y=t.generateNameHash("radio-button"),size:$="regular",checked:D=!1,isDisabled:k=!1,color:j="secondary",onChange:q,label:v,...E})=>s.default.createElement(f,null,s.default.createElement(l.default,{onClick:q,isActive:D,isDisabled:k,color:j},s.default.createElement(p,{"data-validate":"checked",type:"radio",name:y,id:y,onChange:q,disabled:k,...E}),s.default.createElement(b,{size:$,color:j,isChecked:D,isDisabled:k},s.default.createElement(g,{className:"circle circle--outer"},s.default.createElement(h,{className:"circle circle--inner"})))),v&&s.default.createElement(m,{as:"label",htmlFor:y,isDisabled:k},v));exports.RadioButton=x,exports.default=x;
+`,x=({name:y=t.generateNameHash("radio-button"),size:$="regular",checked:D=!1,isDisabled:k=!1,color:j="secondary",onChange:q,label:v,...E})=>s.default.createElement(f,null,s.default.createElement(i.default,{onClick:q,isActive:D,isDisabled:k,color:j},s.default.createElement(p,{"data-validate":"checked",checked:D,type:"radio",name:y,id:y,onChange:q,disabled:k,"aria-label":y,...E}),s.default.createElement(b,{size:$,color:j,isChecked:D,isDisabled:k},s.default.createElement(h,{className:"circle circle--outer"},s.default.createElement(g,{className:"circle circle--inner"})))),v&&s.default.createElement(m,{as:"label",htmlFor:y,isDisabled:k},v));exports.RadioButton=x,exports.default=x;

package/cjs/components/Textfield/index.js

@@ -61,4 +61,4 @@
   ${({centered:g})=>g&&"width: 100%; text-align: center;"}
 `,b=s.default.span`
   display: block;
-`,x=({placeholder:g="",isDisabled:y=!1,centered:E=!1,hasError:k=!1,className:S,helperText:F,label:q="",onBlur:z=()=>null,onFocus:L=()=>null,forwardRef:P,suffix:w,name:v=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:E,hasError:k,hasPlaceholder:!!g},d.default.createElement(m,{...T,id:v,name:v,ref:P,onFocus:$=>{N(!0),L($)},onBlur:$=>{N(!1),z($)},disabled:y,placeholder:q&&!B?"":g}),w&&d.default.createElement(f,null,w)),q&&d.default.createElement(t.Label,{htmlFor:v,isFocused:B,centered:E,hasError:k,hasValue:_,disabled:y},q),(F||j)&&d.default.createElement(p,{centered:E,hasError:k},F&&d.default.createElement(b,null,F),j&&j.map($=>d.default.createElement(b,{key:$},$))))};exports.TextField=x,exports.default=x;
+`,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;

package/cjs/shared/helpers.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.fadedColor=(e,a)=>{if(!/^#?([0-9A-F]{3}){1,2}$/i.test(e))return console.error("Failed to get faded color.",e),e;const t=e.match(e.length<=4?/\w/g:/\w\w/g);if(t){const o=t.map(r=>parseInt(r.length<2?`${r}${r}`:r,16));if(o.every(Number.isInteger)){const[r,s,n]=o;return`rgba(${r}, ${s}, ${n}, ${a||1})`}}return console.error("Failed to get faded color.",e),e},exports.generateNameHash=e=>`${e}-${Math.random().toString(36).replace(/[^a-z]+/g,"").substr(2,10)}`;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.fadedColor=(r,n)=>{if(!/^#?([0-9A-F]{3}){1,2}$/i.test(r))return r;const e=r.match(r.length<=4?/\w/g:/\w\w/g);if(e){const s=e.map(t=>parseInt(t.length<2?`${t}${t}`:t,16));if(s.every(Number.isInteger)){const[t,a,o]=s;return`rgba(${t}, ${a}, ${o}, ${n||1})`}}return r},exports.generateNameHash=r=>`${r}-${Math.random().toString(36).replace(/[^a-z]+/g,"").substr(2,10)}`;

package/esm/components/RadioButton/index.js

@@ -72,7 +72,8 @@ import r from"react";import o,{css as i}from"styled-components";import{generateN
 
   ${e=>e.isChecked&&e.isDisabled&&$};
 `,E=o.input`
-  display: none;
+  position: fixed;
+  opacity: 0;
 `,j=o.span`
   display: flex;
   box-sizing: border-box;
@@ -94,4 +95,4 @@ import r from"react";import o,{css as i}from"styled-components";import{generateN
   user-select: none;
   color: ${({theme:e,isDisabled:l})=>l?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,m=({name:e=p("radio-button"),size:l="regular",checked:s=!1,isDisabled:c=!1,color:a="secondary",onChange:n,label:d,...u})=>r.createElement(z,null,r.createElement(g,{onClick:n,isActive:s,isDisabled:c,color:a},r.createElement(E,{"data-validate":"checked",type:"radio",name:e,id:e,onChange:n,disabled:c,...u}),r.createElement(B,{size:l,color:a,isChecked:s,isDisabled:c},r.createElement(j,{className:"circle circle--outer"},r.createElement(C,{className:"circle circle--inner"})))),d&&r.createElement(S,{as:"label",htmlFor:e,isDisabled:c},d));export{m as RadioButton,m as default};
+`,u=({name:e=p("radio-button"),size:l="regular",checked:a=!1,isDisabled:c=!1,color:s="secondary",onChange:n,label:d,...m})=>r.createElement(z,null,r.createElement(g,{onClick:n,isActive:a,isDisabled:c,color:s},r.createElement(E,{"data-validate":"checked",checked:a,type:"radio",name:e,id:e,onChange:n,disabled:c,"aria-label":e,...m}),r.createElement(B,{size:l,color:s,isChecked:a,isDisabled:c},r.createElement(j,{className:"circle circle--outer"},r.createElement(C,{className:"circle circle--inner"})))),d&&r.createElement(S,{as:"label",htmlFor:e,isDisabled:c},d));export{u as RadioButton,u as default};

package/esm/components/Textfield/index.js

@@ -61,4 +61,4 @@ import o,{useState as B}from"react";import r,{css as m}from"styled-components";i
   ${({centered:e})=>e&&"width: 100%; text-align: center;"}
 `,g=r.span`
   display: block;
-`,y=({placeholder:e="",isDisabled:t=!1,centered:s=!1,hasError:a=!1,className:b,helperText:n,label:d="",onBlur:$=()=>null,onFocus:h=()=>null,forwardRef:k,suffix:u,name:i=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:s,hasError:a,hasPlaceholder:!!e},o.createElement(W,{...x,id:i,name:i,ref:k,onFocus:S,onBlur:v,disabled:t,placeholder:d&&!p?"":e}),u&&o.createElement(_,null,u)),d&&o.createElement(E,{htmlFor:i,isFocused:p,centered:s,hasError:a,hasValue:F,disabled:t},d),(n||c)&&o.createElement(q,{centered:s,hasError:a},n&&o.createElement(g,null,n),c&&c.map(l=>o.createElement(g,{key:l},l))))};export{y as TextField,y as default};
+`,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};

package/esm/shared/helpers.js

@@ -1 +1 @@
-const l=r=>{const e=Math.random().toString(36).replace(/[^a-z]+/g,"").substr(2,10);return`${r}-${e}`},c=(r,e)=>{if(!/^#?([0-9A-F]{3}){1,2}$/i.test(r))return console.error("Failed to get faded color.",r),r;const o=r.match(r.length<=4?/\w/g:/\w\w/g);if(o){const a=o.map(t=>parseInt(t.length<2?`${t}${t}`:t,16));if(a.every(Number.isInteger)){const[t,n,s]=a;return`rgba(${t}, ${n}, ${s}, ${e||1})`}}return console.error("Failed to get faded color.",r),r};export{c as fadedColor,l as generateNameHash};
+const c=t=>{const e=Math.random().toString(36).replace(/[^a-z]+/g,"").substr(2,10);return`${t}-${e}`},g=(t,e)=>{if(!/^#?([0-9A-F]{3}){1,2}$/i.test(t))return t;const n=t.match(t.length<=4?/\w/g:/\w\w/g);if(n){const s=n.map(r=>parseInt(r.length<2?`${r}${r}`:r,16));if(s.every(Number.isInteger)){const[r,a,o]=s;return`rgba(${r}, ${a}, ${o}, ${e||1})`}}return t};export{g as fadedColor,c as generateNameHash};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "8.3.2",
+  "version": "8.3.6",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -19,7 +19,7 @@
     "build-storybook": "build-storybook -s ./public",
     "updateSnapshots": "yarn test -u",
     "analyze": "rollup -c rollup.config.analyze.js",
-    "create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types "
+    "create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types"
   },
   "peerDependencies": {
     "react": ">= 17.0.0",