@kvdbil/components 8.1.0 → 8.3.0

package/cjs/components/CheckBox/index.js

@@ -78,4 +78,4 @@
   user-select: none;
   color: ${({theme:x,isDisabled:k})=>k?x.colors.text.disabled:x.colors.text.dark};
   margin-left: 0.5rem;
-`,g=({name:x=t.generateNameHash("check-box"),isDisabled:k=!1,size:j="regular",checked:v,color:y="secondary",onClick:q,label:$,...D})=>d.default.createElement(p,null,d.default.createElement(o.default,{onClick:q,isActive:v,isDisabled:k,color:y},d.default.createElement(b,{...D,"data-validate":"checked",name:x,id:x,color:y,disabled:k,isDisabled:k}),d.default.createElement(m,{size:j,color:y,isChecked:v,isDisabled:k},d.default.createElement(s.default,null))),$&&d.default.createElement(f,{as:"label",htmlFor:x,isDisabled:k},$));exports.CheckBox=g,exports.default=g;
+`,g=({name:x=t.generateNameHash("check-box"),isDisabled:k=!1,size:j="regular",checked:y=!1,color:v="secondary",onClick:q,label:$,...D})=>d.default.createElement(p,null,d.default.createElement(o.default,{noTabIndex:!0,onClick:q,isActive:y,isDisabled:k,color:v},d.default.createElement(b,{...D,checked:y,"data-validate":"checked",name:x,id:x,color:v,disabled:k,isDisabled:k}),d.default.createElement(m,{size:j,color:v,isChecked:y,isDisabled:k},d.default.createElement(s.default,null))),$&&d.default.createElement(f,{as:"label",htmlFor:x,isDisabled:k},$));exports.CheckBox=g,exports.default=g;

package/cjs/components/Dialog/index.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../shared/media-queries.js"),n=require("../Button/index.js"),i=require("../Modal/index.js"),l=require("../../typography/Heading/index.js");function o(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("react-dom"),require("react-transition-group"),require("../Icons/Close.js");var a=o(e),u=o(t);const s=u.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../shared/media-queries.js"),n=require("../Button/index.js"),l=require("../Modal/index.js"),i=require("../../typography/Heading/index.js");function o(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("react-dom"),require("react-transition-group"),require("../Icons/Close.js");var a=o(e),u=o(t);const s=u.default.div`
   padding-top: 1rem;
 `,d=u.default.div`
   top: 20px;
   left: 32px;
   position: absolute;
-`,c=u.default(l.TinyTitleBold)`
+`,c=u.default(i.TinyTitleBold)`
   font-weight: ${({theme:x})=>x.typography.fontAlternativeRegularWeight};
   margin: 0;
 `,f=u.default.div`
@@ -24,4 +24,4 @@
   justify-content: center;
   width: 100%;
   max-width: 245px;
-`,m=({isOpen:x,title:h,children:g,modalStyles:B,titleStyles:v,primaryButtonText:w,primaryButtonStyles:E,secondaryButtonStyles:S,secondaryButtonText:b,primaryButtonAction:q,secondaryButtonAction:j,onClose:C,withPortal:T})=>a.default.createElement(i.Modal,{contentStyles:B,isOpen:x,onClose:C,withPortal:T},h&&a.default.createElement(d,null,a.default.createElement(c,{style:v},h)),a.default.createElement(s,null,g),a.default.createElement(f,null,j&&a.default.createElement(y,{style:S,onClick:j,variant:"outline",color:"neutral"},b),q&&a.default.createElement(p,{style:E,onClick:q,variant:"solid",color:"success"},w)));exports.Dialog=m,exports.default=m;
+`,m=({isOpen:x,title:h,children:g,modalStyles:B,titleStyles:v,primaryButtonText:w,primaryButtonStyles:E,secondaryButtonStyles:S,secondaryButtonText:b,primaryButtonAction:q,secondaryButtonAction:j,onClose:C,withPortal:T,color:A="success"})=>a.default.createElement(l.Modal,{contentStyles:B,isOpen:x,onClose:C,withPortal:T},h&&a.default.createElement(d,null,a.default.createElement(c,{style:v},h)),a.default.createElement(s,null,g),a.default.createElement(f,null,j&&a.default.createElement(y,{style:S,onClick:j,variant:"outline",color:"neutral"},b),q&&a.default.createElement(p,{style:E,onClick:q,variant:"solid",color:A},w)));exports.Dialog=m,exports.default=m;

package/cjs/components/IconButton.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function o(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var i=o(e),r=o(t);const c=t.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function o(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var i=o(e),r=o(t);const n=t.css`
   background-color: transparent;
-`,n=t.css`
+`,c=t.css`
   background-color: ${({theme:s,color:b})=>s.colors[b].main};
   opacity: 0.1;
-  ${s=>s.isDisabled&&c};
+  ${s=>s.isDisabled&&n};
 `,a=r.default.div`
   cursor: ${s=>s.isDisabled?"default":"pointer"};
   outline: none;
@@ -20,7 +20,7 @@
   :hover {
     .button-background {
       transition: background-color ${"400ms"};
-      ${n}
+      ${c}
     }
   }
 
@@ -28,14 +28,14 @@
     .button-background {
       transition: background-color ${"400ms"};
       animation: FocusRipple ${"1500ms"} 0ms infinite alternate-reverse;
-      ${n}
+      ${c}
     }
   }
 
   :active {
     .button-background {
       animation: ActiveRipple ${"750ms"};
-      ${n}
+      ${c}
     }
   }
 
@@ -72,4 +72,4 @@
 
   position: absolute;
   border-radius: 10rem;
-`;exports.BackgroundStyles=n,exports.default=({children:s,isActive:b,isDisabled:p,onClick:d,color:f})=>i.default.createElement(a,{color:f,isActive:b,isDisabled:p,onClick:u=>{u.stopPropagation(),u.preventDefault(),u.persist(),p||typeof d!="function"||d(u)},onKeyDown:u=>{u.key!=="Enter"||p||typeof d!="function"||(u.persist(),d(u))},tabIndex:p?void 0:0},i.default.createElement(l,{className:"button-background"}),s);
+`;exports.BackgroundStyles=c,exports.default=({children:s,isActive:b,isDisabled:p,onClick:d,noTabIndex:f=!1,color:m})=>i.default.createElement(a,{color:m,isActive:b,isDisabled:p,onClick:u=>{u.stopPropagation(),u.preventDefault(),u.persist(),p||typeof d!="function"||d(u)},onKeyDown:u=>{u.key!=="Enter"||p||typeof d!="function"||(u.persist(),d(u))},tabIndex:p||f?void 0:0},i.default.createElement(l,{className:"button-background"}),s);

package/cjs/components/Message/index.js

@@ -31,4 +31,4 @@
   font-size: 2.5rem;
   cursor: pointer;
   }
-`;exports.default=({content:x,type:E,withIcon:j=!1,isDeletable:q=!1,fullWidth:w=!1,inverted:I=!1,...b})=>{const k=e.useRef(null),[y,v]=e.useState(!1);return i.default.createElement(d,{isDeleted:y},i.default.createElement(f,{messageType:E,fullWidth:w,inverted:I,role:"alert",ref:k,...b},i.default.createElement(m,null,j&&i.default.createElement(p,null,($=>{switch($){case"success":return i.default.createElement(l.default,null);case"warning":return i.default.createElement(s.default,null);case"error":return i.default.createElement(n.default,null);case"info":case"text":default:return i.default.createElement(o.default,null)}})(E)),i.default.createElement(g,null,x)),q&&i.default.createElement(h,{onClick:$=>{$.stopPropagation(),v(!0),setTimeout(()=>{k.current&&k.current.remove()},300)},"aria-label":"Close"},i.default.createElement(a.default,null))))};
+`;exports.default=({children:x,type:E,withIcon:j=!1,isDeletable:q=!1,fullWidth:w=!1,inverted:I=!1,...b})=>{const k=e.useRef(null),[y,v]=e.useState(!1);return i.default.createElement(d,{isDeleted:y},i.default.createElement(f,{messageType:E,fullWidth:w,inverted:I,role:"alert",ref:k,...b},i.default.createElement(m,null,j&&i.default.createElement(p,null,($=>{switch($){case"success":return i.default.createElement(l.default,null);case"warning":return i.default.createElement(s.default,null);case"error":return i.default.createElement(n.default,null);case"info":case"text":default:return i.default.createElement(o.default,null)}})(E)),i.default.createElement(g,null,x)),q&&i.default.createElement(h,{onClick:$=>{$.stopPropagation(),v(!0),setTimeout(()=>{k.current&&k.current.remove()},300)},"aria-label":"Close"},i.default.createElement(a.default,null))))};

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"),o=require("../../theme.js"),a=require("../IconButton.js");function i(b){return b&&typeof b=="object"&&"default"in b?b:{default:b}}var l=i(e),s=i(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"),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`
   .circle {
     &--outer {
       height: 24px;
@@ -24,65 +24,74 @@
       transform: scale(0.6);
     }
   }
-`},d=r.css`
+`},n=r.css`
   cursor: default;
 
   .circle {
     &--inner {
-      background-color: ${o.default.colors.gray.light1};
+      background-color: ${a.default.colors.gray.light1};
     }
 
     &--outer {
-      border: 2px solid ${o.default.colors.gray.light1};
+      border: 2px solid ${a.default.colors.gray.light1};
     }
   }
-`,n=r.css`
+`,u=r.css`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${o.default.colors.gray.light1};
+      background-color: ${a.default.colors.gray.light1};
     }
   }
-`,u=s.default.label`
+`,f=d.default.div`
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+`,b=d.default.span`
   cursor: pointer;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
 
-  ${b=>c[b.size]};
+  ${y=>c[y.size]};
 
-  ${b=>{return!b.isDisabled&&b.isChecked&&(m=b.color,r.css`
+  ${y=>{return!y.isDisabled&&y.isChecked&&($=y.color,r.css`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${o.default.colors[m].main};
+      background-color: ${a.default.colors[$].main};
     }
 
     &--outer {
-      border: 2px solid ${o.default.colors[m].main};
+      border: 2px solid ${a.default.colors[$].main};
     }
   }
-`);var m}};
-  ${b=>b.isDisabled&&d};
+`);var $}};
+  ${y=>y.isDisabled&&n};
 
-  ${b=>b.isChecked&&b.isDisabled&&n};
-`,f=s.default.input`
+  ${y=>y.isChecked&&y.isDisabled&&u};
+`,p=d.default.input`
   display: none;
-`,h=s.default.span`
+`,g=d.default.span`
   display: flex;
   box-sizing: border-box;
   border-radius: 50%;
 
-  border: 2px solid ${o.default.colors.gray.light1};
-`,g=s.default.span`
+  border: 2px solid ${a.default.colors.gray.light1};
+`,h=d.default.span`
   box-sizing: border-box;
   opacity: 0;
   margin: auto;
   border-radius: 50%;
-  background-color: ${o.default.colors.gray.light1};
+  background-color: ${a.default.colors.gray.light1};
 
   position: absolute;
   top: 0;
   left: 0;
-`,p=({name:b=t.generateNameHash("radio-button"),size:m="regular",checked:x=!1,isDisabled:y=!1,color:$="secondary",onChange:k,...v})=>l.default.createElement(a.default,{onClick:k,isActive:x,isDisabled:y,color:$},l.default.createElement(f,{"data-validate":"checked",type:"radio",name:b,id:b,onChange:k,disabled:y,...v}),l.default.createElement(u,{htmlFor:b,size:m,color:$,isChecked:x,isDisabled:y},l.default.createElement(h,{className:"circle circle--outer"},l.default.createElement(g,{className:"circle circle--inner"}))));exports.RadioButton=p,exports.default=p;
+`,m=d.default(i.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;

package/esm/components/CheckBox/index.js

@@ -1,4 +1,4 @@
-import o from"react";import c,{css as r}from"styled-components";import{generateNameHash as p}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as g}from"../../typography/BodyText/index.js";import x,{BackgroundStyles as u}from"../IconButton.js";import b from"../../icons/components/CheckmarkIcon.js";import"../../shared/media-queries.js";const k=r`
+import o from"react";import s,{css as r}from"styled-components";import{generateNameHash as p}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as g}from"../../typography/BodyText/index.js";import x,{BackgroundStyles as u}from"../IconButton.js";import b from"../../icons/components/CheckmarkIcon.js";import"../../shared/media-queries.js";const y=r`
   width: 24px;
   height: 24px;
 
@@ -6,7 +6,7 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
     width: 15px;
     height: 15px;
   }
-`,y=r`
+`,f=r`
   width: 32px;
   height: 32px;
 
@@ -14,7 +14,7 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
     width: 22px;
     height: 22px;
   }
-`,f={regular:k,large:y},$=r`
+`,k={regular:y,large:f},$=r`
   cursor: default;
   border: 2px solid ${i.colors.gray.light2};
 `,v=e=>r`
@@ -29,11 +29,11 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
   border: 2px solid ${i.colors[e].main};
 `,C=r`
   background: ${i.colors.gray.light2};
-`,j=c.div`
+`,j=s.div`
   display: flex;
   align-items: center;
   box-sizing: border-box;
-`,w=c.input.attrs({type:"checkbox"})`
+`,w=s.input.attrs({type:"checkbox"})`
   position: absolute;
   appearance: none;
   width: 100%;
@@ -52,7 +52,7 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
     transition: background-color 400ms;
     ${u}
   }
-`,z=c.span`
+`,z=s.span`
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -62,7 +62,7 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
 
   border: 2px solid ${i.colors.gray.dark5};
 
-  ${e=>f[e.size]};
+  ${e=>k[e.size]};
 
   svg {
     opacity: 0;
@@ -73,9 +73,9 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
   ${e=>e.isDisabled&&$};
 
   ${e=>e.isChecked&&e.isDisabled&&C};
-`,B=c(g)`
+`,B=s(g)`
   cursor: ${({isDisabled:e})=>e?"default":"pointer"};
   user-select: none;
   color: ${({theme:e,isDisabled:t})=>t?e.colors.text.disabled:e.colors.text.dark};
   margin-left: 0.5rem;
-`,l=({name:e=p("check-box"),isDisabled:t=!1,size:d="regular",checked:a,color:s="secondary",onClick:m,label:n,...h})=>o.createElement(j,null,o.createElement(x,{onClick:m,isActive:a,isDisabled:t,color:s},o.createElement(w,{...h,"data-validate":"checked",name:e,id:e,color:s,disabled:t,isDisabled:t}),o.createElement(z,{size:d,color:s,isChecked:a,isDisabled:t},o.createElement(b,null))),n&&o.createElement(B,{as:"label",htmlFor:e,isDisabled:t},n));export{l as CheckBox,l as default};
+`,l=({name:e=p("check-box"),isDisabled:t=!1,size:d="regular",checked:a=!1,color:c="secondary",onClick:m,label:n,...h})=>o.createElement(j,null,o.createElement(x,{noTabIndex:!0,onClick:m,isActive:a,isDisabled:t,color:c},o.createElement(w,{...h,checked:a,"data-validate":"checked",name:e,id:e,color:c,disabled:t,isDisabled:t}),o.createElement(z,{size:d,color:c,isChecked:a,isDisabled:t},o.createElement(b,null))),n&&o.createElement(B,{as:"label",htmlFor:e,isDisabled:t},n));export{l as CheckBox,l as default};

package/esm/components/Dialog/index.js

@@ -1,27 +1,27 @@
-import t from"react";import e from"styled-components";import{mq as h}from"../../shared/media-queries.js";import{Button as l}from"../Button/index.js";import{Modal as g}from"../Modal/index.js";import{TinyTitleBold as j}from"../../typography/Heading/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"react-dom";import"react-transition-group";import"../Icons/Close.js";const v=e.div`
+import t from"react";import e from"styled-components";import{mq as g}from"../../shared/media-queries.js";import{Button as l}from"../Button/index.js";import{Modal as j}from"../Modal/index.js";import{TinyTitleBold as v}from"../../typography/Heading/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"react-dom";import"react-transition-group";import"../Icons/Close.js";const w=e.div`
   padding-top: 1rem;
-`,w=e.div`
+`,E=e.div`
   top: 20px;
   left: 32px;
   position: absolute;
-`,E=e(j)`
+`,B=e(v)`
   font-weight: ${({theme:o})=>o.typography.fontAlternativeRegularWeight};
   margin: 0;
-`,B=e.div`
+`,C=e.div`
   display: flex;
   justify-content: space-between;
-  ${h("tablet")} {
+  ${g("tablet")} {
     justify-content: flex-start;
   }
   overflow-x: hidden;
-`,C=e(l)`
+`,T=e(l)`
   overflow-x: hidden;
   margin-right: 2rem;
   justify-content: center;
   width: 100%;
   max-width: 110px;
-`,T=e(l)`
+`,b=e(l)`
   justify-content: center;
   width: 100%;
   max-width: 245px;
-`,a=({isOpen:o,title:n,children:s,modalStyles:m,titleStyles:c,primaryButtonText:p,primaryButtonStyles:d,secondaryButtonStyles:u,secondaryButtonText:f,primaryButtonAction:r,secondaryButtonAction:i,onClose:y,withPortal:x})=>t.createElement(g,{contentStyles:m,isOpen:o,onClose:y,withPortal:x},n&&t.createElement(w,null,t.createElement(E,{style:c},n)),t.createElement(v,null,s),t.createElement(B,null,i&&t.createElement(C,{style:u,onClick:i,variant:"outline",color:"neutral"},f),r&&t.createElement(T,{style:d,onClick:r,variant:"solid",color:"success"},p)));export{a as Dialog,a as default};
+`,a=({isOpen:o,title:n,children:s,modalStyles:m,titleStyles:p,primaryButtonText:c,primaryButtonStyles:d,secondaryButtonStyles:u,secondaryButtonText:f,primaryButtonAction:r,secondaryButtonAction:i,onClose:y,withPortal:x,color:h="success"})=>t.createElement(j,{contentStyles:m,isOpen:o,onClose:y,withPortal:x},n&&t.createElement(E,null,t.createElement(B,{style:p},n)),t.createElement(w,null,s),t.createElement(C,null,i&&t.createElement(T,{style:u,onClick:i,variant:"outline",color:"neutral"},f),r&&t.createElement(b,{style:d,onClick:r,variant:"solid",color:h},c)));export{a as Dialog,a as default};

package/esm/components/IconButton.js

@@ -1,10 +1,10 @@
-import i from"react";import a,{css as s}from"styled-components";const m=s`
+import a from"react";import i,{css as s}from"styled-components";const f=s`
   background-color: transparent;
-`,l="400ms",f="1500ms",b="750ms",c=s`
+`,l="400ms",b="1500ms",k="750ms",c=s`
   background-color: ${({theme:o,color:r})=>o.colors[r].main};
   opacity: 0.1;
-  ${o=>o.isDisabled&&m};
-`,k=a.div`
+  ${o=>o.isDisabled&&f};
+`,g=i.div`
   cursor: ${o=>o.isDisabled?"default":"pointer"};
   outline: none;
 
@@ -27,14 +27,14 @@ import i from"react";import a,{css as s}from"styled-components";const m=s`
   :focus {
     .button-background {
       transition: background-color ${l};
-      animation: FocusRipple ${f} 0ms infinite alternate-reverse;
+      animation: FocusRipple ${b} 0ms infinite alternate-reverse;
       ${c}
     }
   }
 
   :active {
     .button-background {
-      animation: ActiveRipple ${b};
+      animation: ActiveRipple ${k};
       ${c}
     }
   }
@@ -62,7 +62,7 @@ import i from"react";import a,{css as s}from"styled-components";const m=s`
       clip-path: circle(50%);
     }
   }
-`,g=a.div`
+`,h=i.div`
   top: 0;
   left: 0;
 
@@ -72,4 +72,4 @@ import i from"react";import a,{css as s}from"styled-components";const m=s`
 
   position: absolute;
   border-radius: 10rem;
-`,h=({children:o,isActive:r,isDisabled:e,onClick:n,color:p})=>{const u=t=>{t.key==="Enter"&&!e&&typeof n=="function"&&(t.persist(),n(t))},d=t=>{t.stopPropagation(),t.preventDefault(),t.persist(),!e&&typeof n=="function"&&n(t)};return i.createElement(k,{color:p,isActive:r,isDisabled:e,onClick:d,onKeyDown:u,tabIndex:e?void 0:0},i.createElement(g,{className:"button-background"}),o)};export{c as BackgroundStyles,h as default};
+`,y=({children:o,isActive:r,isDisabled:e,onClick:n,noTabIndex:p=!1,color:u})=>{const d=t=>{t.key==="Enter"&&!e&&typeof n=="function"&&(t.persist(),n(t))},m=t=>{t.stopPropagation(),t.preventDefault(),t.persist(),!e&&typeof n=="function"&&n(t)};return a.createElement(g,{color:u,isActive:r,isDisabled:e,onClick:m,onKeyDown:d,tabIndex:e||p?void 0:0},a.createElement(h,{className:"button-background"}),o)};export{c as BackgroundStyles,y as default};

package/esm/components/Message/index.js

@@ -31,4 +31,4 @@ import n,{useRef as f,useState as d}from"react";import s from"styled-components"
   font-size: 2.5rem;
   cursor: pointer;
   }
-`,R=({content:r,type:o,withIcon:e=!1,isDeletable:t=!1,fullWidth:c=!1,inverted:l=!1,...i})=>{const a=f(null),[u,p]=d(!1),g=m=>{m.stopPropagation(),p(!0),setTimeout(()=>{a.current&&a.current.remove()},300)};return n.createElement(w,{isDeleted:u},n.createElement(W,{messageType:o,fullWidth:c,inverted:l,role:"alert",ref:a,...i},n.createElement($,null,e&&n.createElement(T,null,j(o)),n.createElement(h,null,r)),t&&n.createElement(D,{onClick:g,"aria-label":"Close"},n.createElement(C,null))))};export{R as default};
+`,R=({children:r,type:o,withIcon:e=!1,isDeletable:t=!1,fullWidth:c=!1,inverted:l=!1,...i})=>{const a=f(null),[u,p]=d(!1),g=m=>{m.stopPropagation(),p(!0),setTimeout(()=>{a.current&&a.current.remove()},300)};return n.createElement(w,{isDeleted:u},n.createElement(W,{messageType:o,fullWidth:c,inverted:l,role:"alert",ref:a,...i},n.createElement($,null,e&&n.createElement(T,null,j(o)),n.createElement(h,null,r)),t&&n.createElement(D,{onClick:g,"aria-label":"Close"},n.createElement(C,null))))};export{R as default};

package/esm/components/RadioButton/index.js

@@ -1,4 +1,4 @@
-import t from"react";import i,{css as o}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import r from"../../theme.js";import h from"../IconButton.js";const m=o`
+import r from"react";import o,{css as i}from"styled-components";import{generateNameHash as p}from"../../shared/helpers.js";import t from"../../theme.js";import g from"../IconButton.js";import{BodyText as h}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const b=i`
   .circle {
     &--outer {
       height: 24px;
@@ -11,7 +11,7 @@ import t from"react";import i,{css as o}from"styled-components";import{generateN
       transform: scale(0.6);
     }
   }
-`,p=o`
+`,y=i`
   .circle {
     &--outer {
       height: 32px;
@@ -24,65 +24,74 @@ import t from"react";import i,{css as o}from"styled-components";import{generateN
       transform: scale(0.6);
     }
   }
-`,b={regular:m,large:p},y=o`
+`,x={regular:b,large:y},f=i`
   cursor: default;
 
   .circle {
     &--inner {
-      background-color: ${r.colors.gray.light1};
+      background-color: ${t.colors.gray.light1};
     }
 
     &--outer {
-      border: 2px solid ${r.colors.gray.light1};
+      border: 2px solid ${t.colors.gray.light1};
     }
   }
-`,f=o`
+`,$=i`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${r.colors.gray.light1};
+      background-color: ${t.colors.gray.light1};
     }
   }
-`,x=e=>o`
+`,k=e=>i`
   .circle {
     &--inner {
       opacity: 1;
-      background-color: ${r.colors[e].main};
+      background-color: ${t.colors[e].main};
     }
 
     &--outer {
-      border: 2px solid ${r.colors[e].main};
+      border: 2px solid ${t.colors[e].main};
     }
   }
-`,$=i.label`
+`,z=o.div`
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+`,B=o.span`
   cursor: pointer;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
 
-  ${e=>b[e.size]};
+  ${e=>x[e.size]};
 
-  ${e=>!e.isDisabled&&e.isChecked&&x(e.color)};
-  ${e=>e.isDisabled&&y};
+  ${e=>!e.isDisabled&&e.isChecked&&k(e.color)};
+  ${e=>e.isDisabled&&f};
 
-  ${e=>e.isChecked&&e.isDisabled&&f};
-`,k=i.input`
+  ${e=>e.isChecked&&e.isDisabled&&$};
+`,E=o.input`
   display: none;
-`,z=i.span`
+`,j=o.span`
   display: flex;
   box-sizing: border-box;
   border-radius: 50%;
 
-  border: 2px solid ${r.colors.gray.light1};
-`,B=i.span`
+  border: 2px solid ${t.colors.gray.light1};
+`,C=o.span`
   box-sizing: border-box;
   opacity: 0;
   margin: auto;
   border-radius: 50%;
-  background-color: ${r.colors.gray.light1};
+  background-color: ${t.colors.gray.light1};
 
   position: absolute;
   top: 0;
   left: 0;
-`,n=({name:e=g("radio-button"),size:d="regular",checked:l=!1,isDisabled:c=!1,color:a="secondary",onChange:s,...u})=>t.createElement(h,{onClick:s,isActive:l,isDisabled:c,color:a},t.createElement(k,{"data-validate":"checked",type:"radio",name:e,id:e,onChange:s,disabled:c,...u}),t.createElement($,{htmlFor:e,size:d,color:a,isChecked:l,isDisabled:c},t.createElement(z,{className:"circle circle--outer"},t.createElement(B,{className:"circle circle--inner"}))));export{n as RadioButton,n as default};
+`,S=o(h)`
+  cursor: ${({isDisabled:e})=>e?"default":"pointer"};
+  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};

package/package.json

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

package/types/components/CheckBox/index.d.ts

@@ -5,7 +5,7 @@ export interface CheckBoxProps {
     size?: CheckboxSize;
     value?: string;
     color?: Color;
-    checked: boolean;
+    checked?: boolean;
     isDisabled?: boolean;
     onClick?(): void;
     label?: ReactNode;

package/types/components/Dialog/index.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Color } from '../../Types';
 export interface DialogProps {
     title?: string;
     children: ReactNode;
@@ -14,6 +15,7 @@ export interface DialogProps {
     onClose(): void;
     primaryButtonAction?(): void;
     secondaryButtonAction?(): void;
+    color?: Color;
 }
-export declare const Dialog: ({ isOpen, title, children, modalStyles, titleStyles, primaryButtonText, primaryButtonStyles, secondaryButtonStyles, secondaryButtonText, primaryButtonAction, secondaryButtonAction, onClose, withPortal, }: DialogProps) => JSX.Element;
+export declare const Dialog: ({ isOpen, title, children, modalStyles, titleStyles, primaryButtonText, primaryButtonStyles, secondaryButtonStyles, secondaryButtonText, primaryButtonAction, secondaryButtonAction, onClose, withPortal, color, }: DialogProps) => JSX.Element;
 export default Dialog;

package/types/components/IconButton.d.ts

@@ -9,7 +9,8 @@ interface Props {
     children: ReactNode;
     isActive: boolean;
     isDisabled: boolean;
+    noTabIndex?: boolean;
     onClick?(event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void;
 }
-declare const IconButton: ({ children, isActive, isDisabled, onClick, color, }: Props) => JSX.Element;
+declare const IconButton: ({ children, isActive, isDisabled, onClick, noTabIndex, color, }: Props) => JSX.Element;
 export default IconButton;

package/types/components/Message/index.d.ts

@@ -1,12 +1,12 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 declare type MessageType = 'text' | 'info' | 'success' | 'warning' | 'error';
 export declare type Props = {
-    content: ReactNode;
+    children: ReactNode;
     type: MessageType;
     withIcon?: boolean;
     isDeletable?: boolean;
     fullWidth?: boolean;
     inverted?: boolean;
 } & ComponentPropsWithoutRef<'div'>;
-declare const Message: ({ content, type, withIcon, isDeletable, fullWidth, inverted, ...props }: Props) => JSX.Element;
+declare const Message: ({ children, type, withIcon, isDeletable, fullWidth, inverted, ...props }: Props) => JSX.Element;
 export default Message;

package/types/components/RadioButton/index.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { RadioButtonSize, Color } from '../../Types';
 export interface RadioButtonProps {
     name?: string;
@@ -6,6 +7,7 @@ export interface RadioButtonProps {
     checked?: boolean;
     isDisabled?: boolean;
     onChange?(): void;
+    label?: ReactNode;
 }
-export declare const RadioButton: ({ name, size, checked, isDisabled, color, onChange, ...props }: RadioButtonProps) => JSX.Element;
+export declare const RadioButton: ({ name, size, checked, isDisabled, color, onChange, label, ...props }: RadioButtonProps) => JSX.Element;
 export default RadioButton;