@kvdbil/components 11.10.2 → 12.0.0

package/cjs/components/Dialog/index.js

@@ -1,27 +1,9 @@
-"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(i.TinyTitleBold)`
-  font-weight: ${({theme:x})=>x.typography.fontAlternativeRegularWeight};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../Modal/index.js"),l=require("../../theme.js"),i=require("../../typography/Heading/index.js");function n(f){return f&&typeof f=="object"&&"default"in f?f:{default:f}}require("react-dom"),require("react-transition-group"),require("../Icons/Close.js"),require("../../shared/media-queries.js");var o=n(e),a=n(t);const u=a.default(i.TinyTitleBold)`
+  font-weight: ${l.default.typography.fontAlternativeRegularWeight};
   margin: 0;
-`,f=u.default.div`
+`,d=a.default.div`
   display: flex;
-  justify-content: space-between;
-  ${r.mq("tablet")} {
-    justify-content: flex-start;
-  }
+  justify-content: flex-end;
+  gap: 1rem;
   overflow-x: hidden;
-`,y=u.default(n.Button)`
-  overflow-x: hidden;
-  margin-right: 2rem;
-  justify-content: center;
-  width: 100%;
-  max-width: 110px;
-`,p=u.default(n.Button)`
-  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,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;
+`,s=({isOpen:f,title:c,children:h,actions:p,onClose:g,withPortal:y,withCloseIcon:m=!0})=>o.default.createElement(r.Modal,{onClose:g,withPortal:y,isOpen:f,withCloseIcon:m},typeof c=="string"?o.default.createElement(u,null,c):c,o.default.createElement("div",null,h),p&&o.default.createElement(d,null,p));exports.Dialog=s,exports.default=s;

package/cjs/components/Hero/index.js

@@ -1,9 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),i=require("../../typography/Heading/index.js"),n=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`
+"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`
   position: relative;
   min-height: 440px;
   background-size: cover;
   display: flex;
   flex-direction: column;
+  ${({$centered:v})=>v&&"justify-content: center;"}
 `,u=t.keyframes`
   0% {
     background-color:#f5f5f5; 
@@ -15,14 +16,14 @@
   
   100% {
     background-color:#f5f5f5; 
-  }`,s=l.default.div`
+  }`,c=l.default.div`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   animation: ${u} 2s linear infinite;
-`,c=l.default.div`
+`,s=l.default.div`
   pointer-events: ${({$pointerEvents:v})=>v};
   position: relative;
   display: flex;
@@ -38,14 +39,14 @@
   height: 100%;
   top: 0;
   left: 0;
-`,m=v=>typeof v=="number",p=v=>typeof v=="string",$=l.default.img`
+`,m=v=>typeof v=="number",$=v=>typeof v=="string",p=l.default.img`
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   object-fit: cover;
-  object-position: ${({$positionX:v,$positionY:w})=>m(v)&&m(w)?`${v}% ${w}%`:p(v)&&p(w)?`${v} ${w}`:v||w?`${(m(v)?`${v}%`:v)||"50%"} ${(m(w)?`${w}%`:w)||"50%"}`:"50% 50%"};
+  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%"};
 `,g=l.default.div`
   width: 100%;
   z-index: 1;
@@ -57,7 +58,13 @@
     padding-right: 1.5rem;
   }
 `,h=l.default.div`
-  margin-top: 3rem;
+  ${({$centered:v})=>!v&&"margin-top: 3rem;"} 
+
+  ${({$centered:v})=>v&&`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `} 
 
   ${({$maxWidth:v,$dynamicGutter:w})=>!w&&`
     width: 100%;
@@ -79,16 +86,16 @@
   `}
 
   ${r.mq("laptop")} {
-    margin-top: 3.75rem;
+    ${({$centered:v})=>!v&&"margin-top: 3.75rem;"}
   }
-`,y=l.default(i.Display3)`
+`,y=l.default(n.Display3)`
   margin: 0;
   color: ${({$color:v,theme:w})=>w.colors.text[v]};
-`,x=l.default(i.Title)`
+`,x=l.default(n.Title)`
   margin: 0.25rem 0;
   color: ${({$color:v,theme:w})=>w.colors.text[v]};
 `,b=l.default.a`
   display: inline-block;
   margin-top: 3rem;
   text-decoration: none;
-`;exports.colorAnimation=u,exports.default=({imageProps:v,containerStyle:w,videoProps:q,children:B,align:V,direction:S,justify:W,contentMaxWidth:C=64,heading:j,headingColor:z="dark",subheading:k,buttonProps:E,dynamicGutter:F,isLoading:H=!1})=>{const{autoplay:I=0,controls:M=0,disablekb:T=0,end:G,loop:X=0,modestbranding:Y=1,start:_=0,showInfo:A=0}=(q==null?void 0:q.ytConfig)||{},{link:D,text:L,color:P,...O}=E!=null?E:{};return a.default.createElement(d,{style:w},H?a.default.createElement(s,{"data-testid":"loader"}):a.default.createElement(a.default.Fragment,null,q?a.default.createElement(f,{"data-testid":"hero-video",title:"video-frame",src:`${q.src}?disabledkb=${T}&autoplay=${I}&controls=${M}&loop=${X}&modestbranding=${Y}&start=${_}&showInfo=${A}${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($,{$positionX:v==null?void 0:v.x,$positionY:v==null?void 0:v.y,src:v==null?void 0:v.src,alt:"Hero background"})),(j||k||E)&&a.default.createElement(g,null,a.default.createElement(h,{$maxWidth:C,$dynamicGutter:F},j&&a.default.createElement(y,{as:"h1",$color:z},j),k&&a.default.createElement(x,{$color:z},k),E&&a.default.createElement(b,{href:D},a.default.createElement(n.Button,{size:"large",as:"span",color:P!=null?P:"secondary",...O},L)))),B&&a.default.createElement(c,{$pointerEvents:q?"none":"auto",$align:V||"flex-start",$direction:S||"column",$justify:W||"flex-start"},B))};
+`;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))};

package/cjs/components/Modal/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom"),n=require("react-transition-group"),i=require("styled-components"),r=require("../Icons/Close.js");function o(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var a=o(e),d=o(i);const l=i.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom"),n=require("react-transition-group"),i=require("styled-components"),r=require("../Icons/Close.js");function o(h){return h&&typeof h=="object"&&"default"in h?h:{default:h}}var a=o(e),d=o(i);const l=i.css`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -33,7 +33,7 @@
 `,s=d.default.div`
   position: relative;
   max-width: 512px;
-  padding: 24px 32px 24px 32px;
+  padding: 1rem;
   background-color: white;
   border-radius: 3px;
   box-shadow: 0px 24px 38px rgba(0, 0, 0, 0.1), 0px 9px 46px rgba(0, 0, 0, 0.09),
@@ -53,8 +53,8 @@
   }
 `,p=d.default.div`
   position: absolute;
-  top: 24px;
-  right: 32px;
+  top: 1rem;
+  right: 1rem;
 
   :hover {
     cursor: pointer;
@@ -74,4 +74,4 @@
   }
 `,f=i.createGlobalStyle`
   ${l}
-`,g=({children:x,isOpen:h,contentStyles:v,withPortal:E=!1,onClose:w})=>{e.useEffect(()=>{const y=T=>{T.key==="Escape"&&h&&w()};return window.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y)}},[w,h]);const k=!(typeof window=="undefined"||!window.document||!window.document.createElement),b=a.default.createElement(n.CSSTransition,{in:h,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},a.default.createElement(a.default.Fragment,null,a.default.createElement(f,null),a.default.createElement(u,null,a.default.createElement(c,{"data-testid":"background",onClick:w}),a.default.createElement(s,{style:v},a.default.createElement(p,{onClick:w,"data-testid":"close"},a.default.createElement(r.default,null)),x),a.default.createElement(m,null))));return E&&k?t.createPortal(b,document.body):b};exports.Modal=g,exports.default=g;
+`,g=({children:h,isOpen:w,contentStyles:v,withPortal:E=!1,withCloseIcon:k=!0,onClose:x})=>{e.useEffect(()=>{const y=C=>{C.key==="Escape"&&w&&x()};return window.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y)}},[x,w]);const T=!(typeof window=="undefined"||!window.document||!window.document.createElement),b=a.default.createElement(n.CSSTransition,{in:w,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},a.default.createElement(a.default.Fragment,null,a.default.createElement(f,null),a.default.createElement(u,null,a.default.createElement(c,{"data-testid":"background",onClick:x}),a.default.createElement(s,{style:v},k&&a.default.createElement(p,{onClick:x,"data-testid":"close"},a.default.createElement(r.default,null)),h),a.default.createElement(m,null))));return E&&T?t.createPortal(b,document.body):b};exports.Modal=g,exports.default=g;

package/esm/components/Dialog/index.js

@@ -1,27 +1,9 @@
-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;
-`,E=e.div`
-  top: 20px;
-  left: 32px;
-  position: absolute;
-`,B=e(v)`
-  font-weight: ${({theme:o})=>o.typography.fontAlternativeRegularWeight};
+import e from"react";import r from"styled-components";import{Modal as d}from"../Modal/index.js";import p from"../../theme.js";import{TinyTitleBold as c}from"../../typography/Heading/index.js";import"react-dom";import"react-transition-group";import"../Icons/Close.js";import"../../shared/media-queries.js";const f=r(c)`
+  font-weight: ${p.typography.fontAlternativeRegularWeight};
   margin: 0;
-`,C=e.div`
+`,g=r.div`
   display: flex;
-  justify-content: space-between;
-  ${g("tablet")} {
-    justify-content: flex-start;
-  }
+  justify-content: flex-end;
+  gap: 1rem;
   overflow-x: hidden;
-`,T=e(l)`
-  overflow-x: hidden;
-  margin-right: 2rem;
-  justify-content: center;
-  width: 100%;
-  max-width: 110px;
-`,b=e(l)`
-  justify-content: center;
-  width: 100%;
-  max-width: 245px;
-`,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};
+`,n=({isOpen:i,title:t,children:l,actions:o,onClose:m,withPortal:a,withCloseIcon:s=!0})=>e.createElement(d,{onClose:m,withPortal:a,isOpen:i,withCloseIcon:s},typeof t=="string"?e.createElement(f,null,t):t,e.createElement("div",null,l),o&&e.createElement(g,null,o));export{n as Dialog,n as default};

package/esm/components/Hero/index.js

@@ -1,10 +1,11 @@
-import n from"react";import r,{keyframes as I}from"styled-components";import{Display3 as L,Title as T}from"../../typography/Heading/index.js";import{Button as q}from"../Button/index.js";import{mq as i}from"../../shared/media-queries.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";const F=r.div`
+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`
   position: relative;
   min-height: 440px;
   background-size: cover;
   display: flex;
   flex-direction: column;
-`,u=I`
+  ${({$centered:e})=>e&&"justify-content: center;"}
+`,g=L`
   0% {
     background-color:#f5f5f5; 
   }
@@ -15,80 +16,86 @@ import n from"react";import r,{keyframes as I}from"styled-components";import{Dis
   
   100% {
     background-color:#f5f5f5; 
-  }`,R=r.div`
+  }`,W=r.div`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-  animation: ${u} 2s linear infinite;
-`,W=r.div`
-  pointer-events: ${({$pointerEvents:t})=>t};
+  animation: ${g} 2s linear infinite;
+`,_=r.div`
+  pointer-events: ${({$pointerEvents:e})=>e};
   position: relative;
   display: flex;
-  flex-direction: ${({$direction:t})=>t};
-  align-items: ${({$align:t})=>t};
-  justify-content: ${({$justify:t})=>t};
+  flex-direction: ${({$direction:e})=>e};
+  align-items: ${({$align:e})=>e};
+  justify-content: ${({$justify:e})=>e};
   padding: 50px;
   z-index: 1;
   flex: 1;
-`,_=r.iframe`
+`,A=r.iframe`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-`,c=t=>typeof t=="number",g=t=>typeof t=="string",A=({$positionX:t,$positionY:e})=>{if(c(t)&&c(e))return`${t}% ${e}%`;if(g(t)&&g(e))return`${t} ${e}`;if(t||e){const o=c(t)?`${t}%`:t,l=c(e)?`${e}%`:e;return`${o||"50%"} ${l||"50%"}`}return"50% 50%"},D=r.img`
+`,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`
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   object-fit: cover;
-  object-position: ${A};
-`,N=r.div`
+  object-position: ${D};
+`,O=r.div`
   width: 100%;
   z-index: 1;
   padding-left: 1rem;
   padding-right: 1rem;
 
-  ${i("tablet")} {
+  ${a("tablet")} {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
-`,O=r.div`
-  margin-top: 3rem;
+`,J=r.div`
+  ${({$centered:e})=>!e&&"margin-top: 3rem;"} 
 
-  ${({$maxWidth:t,$dynamicGutter:e})=>!e&&`
+  ${({$centered:e})=>e&&`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `} 
+
+  ${({$maxWidth:e,$dynamicGutter:t})=>!t&&`
     width: 100%;
     margin-left: auto;
     margin-right: auto;
-    max-width: ${t}rem;
+    max-width: ${e}rem;
   `}
 
-  ${({$dynamicGutter:t})=>t&&`
-    ${i("tablet")} {
-      margin-left: ${t.tabletVw}vw;
-      margin-right: ${t.tabletVw}vw;
+  ${({$dynamicGutter:e})=>e&&`
+    ${a("tablet")} {
+      margin-left: ${e.tabletVw}vw;
+      margin-right: ${e.tabletVw}vw;
     }
 
-    ${i("laptop")} {
-      margin-left: ${t.laptopVw}vw;
-      margin-right: ${t.laptopVw}vw;
+    ${a("laptop")} {
+      margin-left: ${e.laptopVw}vw;
+      margin-right: ${e.laptopVw}vw;
     }
   `}
 
-  ${i("laptop")} {
-    margin-top: 3.75rem;
+  ${a("laptop")} {
+    ${({$centered:e})=>!e&&"margin-top: 3.75rem;"}
   }
-`,J=r(L)`
-  margin: 0;
-  color: ${({$color:t,theme:e})=>e.colors.text[t]};
 `,K=r(T)`
+  margin: 0;
+  color: ${({$color:e,theme:t})=>t.colors.text[e]};
+`,M=r(q)`
   margin: 0.25rem 0;
-  color: ${({$color:t,theme:e})=>e.colors.text[t]};
-`,M=r.a`
+  color: ${({$color:e,theme:t})=>t.colors.text[e]};
+`,Q=r.a`
   display: inline-block;
   margin-top: 3rem;
   text-decoration: none;
-`,Q=({imageProps:t,containerStyle:e,videoProps:o,children:l,align:$,direction:h,justify:x,contentMaxWidth:b=64,heading:d,headingColor:m="dark",subheading:s,buttonProps:a,dynamicGutter:y,isLoading:w=!1})=>{const{autoplay:v=0,controls:k=0,disablekb:E=0,end:f,loop:j=0,modestbranding:B=1,start:C=0,showInfo:V=0}=(o==null?void 0:o.ytConfig)||{},{link:z,text:H,color:p,...S}=a!=null?a:{};return n.createElement(F,{style:e},w?n.createElement(R,{"data-testid":"loader"}):n.createElement(n.Fragment,null,o?n.createElement(_,{"data-testid":"hero-video",title:"video-frame",src:`${o.src}?disabledkb=${E}&autoplay=${v}&controls=${k}&loop=${j}&modestbranding=${B}&start=${C}&showInfo=${V}${f?`&end=${f}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):n.createElement(D,{$positionX:t==null?void 0:t.x,$positionY:t==null?void 0:t.y,src:t==null?void 0:t.src,alt:"Hero background"})),(d||s||a)&&n.createElement(N,null,n.createElement(O,{$maxWidth:b,$dynamicGutter:y},d&&n.createElement(J,{as:"h1",$color:m},d),s&&n.createElement(K,{$color:m},s),a&&n.createElement(M,{href:z},n.createElement(q,{size:"large",as:"span",color:p!=null?p:"secondary",...S},H)))),l&&n.createElement(W,{$pointerEvents:o?"none":"auto",$align:$||"flex-start",$direction:h||"column",$justify:x||"flex-start"},l))};export{u as colorAnimation,Q as default};
+`,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};

package/esm/components/Modal/index.js

@@ -1,4 +1,4 @@
-import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";import{CSSTransition as w}from"react-transition-group";import n,{css as h,createGlobalStyle as a}from"styled-components";import f from"../Icons/Close.js";const d=h`
+import t,{useEffect as w}from"react";import{createPortal as h}from"react-dom";import{CSSTransition as x}from"react-transition-group";import n,{css as f,createGlobalStyle as a}from"styled-components";import b from"../Icons/Close.js";const d=f`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -16,7 +16,7 @@ import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";im
     opacity: 0;
     transition: opacity 0.25s ease-in-out;
   }
-`,b=n.div`
+`,y=n.div`
   ${d}
   position: fixed;
   width: 100%;
@@ -24,16 +24,16 @@ import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";im
   top: 0;
   left: 0;
   z-index: 200;
-`,y=n.div`
+`,k=n.div`
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(34, 34, 34, 0.3);
-`,k=n.div`
+`,E=n.div`
   position: relative;
   max-width: 512px;
-  padding: 24px 32px 24px 32px;
+  padding: 1rem;
   background-color: white;
   border-radius: 3px;
   box-shadow: 0px 24px 38px rgba(0, 0, 0, 0.1), 0px 9px 46px rgba(0, 0, 0, 0.09),
@@ -51,10 +51,10 @@ import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";im
     margin-right: auto;
     min-width: 355px;
   }
-`,E=n.div`
+`,v=n.div`
   position: absolute;
-  top: 24px;
-  right: 32px;
+  top: 1rem;
+  right: 1rem;
 
   :hover {
     cursor: pointer;
@@ -64,7 +64,7 @@ import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";im
     width: 1rem;
     height: 1rem;
   }
-`,v=a`
+`,T=a`
   body {
     overflow: hidden;
 
@@ -72,6 +72,6 @@ import t,{useEffect as g}from"react";import{createPortal as x}from"react-dom";im
         padding-right: 15px !important;
     `}
   }
-`,T=a`
+`,C=a`
   ${d}
-`,c=({children:s,isOpen:o,contentStyles:m,withPortal:l=!1,onClose:e})=>{g(()=>{const r=u=>{u.key==="Escape"&&o&&e()};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[e,o]);const p=!!(typeof window!="undefined"&&window.document&&window.document.createElement),i=t.createElement(w,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},t.createElement(t.Fragment,null,t.createElement(T,null),t.createElement(b,null,t.createElement(y,{"data-testid":"background",onClick:e}),t.createElement(k,{style:m},t.createElement(E,{onClick:e,"data-testid":"close"},t.createElement(f,null)),s),t.createElement(v,null))));return l&&p?x(i,document.body):i};export{c as Modal,c as default};
+`,c=({children:s,isOpen:o,contentStyles:m,withPortal:l=!1,withCloseIcon:u=!0,onClose:e})=>{w(()=>{const r=g=>{g.key==="Escape"&&o&&e()};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[e,o]);const p=!!(typeof window!="undefined"&&window.document&&window.document.createElement),i=t.createElement(x,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},t.createElement(t.Fragment,null,t.createElement(C,null),t.createElement(y,null,t.createElement(k,{"data-testid":"background",onClick:e}),t.createElement(E,{style:m},u&&t.createElement(v,{onClick:e,"data-testid":"close"},t.createElement(b,null)),s),t.createElement(T,null))));return l&&p?h(i,document.body):i};export{c as Modal,c as default};

package/package.json

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

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

@@ -1,21 +1,12 @@
 import { ReactNode } from 'react';
-import { Color } from '../../Types';
 export interface DialogProps {
-    title?: string;
-    children: ReactNode;
+    title?: ReactNode;
     isOpen: boolean;
-    hideCloseButton?: boolean;
+    children: ReactNode;
+    actions?: ReactNode;
     withPortal?: boolean;
-    primaryButtonText?: string;
-    secondaryButtonText?: string;
-    modalStyles?: {};
-    titleStyles?: {};
-    primaryButtonStyles?: {};
-    secondaryButtonStyles?: {};
+    withCloseIcon?: boolean;
     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, color, }: DialogProps) => JSX.Element;
+export declare const Dialog: ({ isOpen, title, children, actions, onClose, withPortal, withCloseIcon, }: DialogProps) => JSX.Element;
 export default Dialog;

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

@@ -49,6 +49,7 @@ export interface HeroProps {
     };
     dynamicGutter?: DynamicGutter;
     isLoading?: boolean;
+    contentCentered?: boolean;
 }
-declare const Hero: ({ imageProps, containerStyle, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, buttonProps, dynamicGutter, isLoading, }: HeroProps) => JSX.Element;
+declare const Hero: ({ imageProps, videoProps, children, align, direction, justify, contentMaxWidth, heading, headingColor, subheading, buttonProps, dynamicGutter, isLoading, contentCentered, containerStyle, }: HeroProps) => JSX.Element;
 export default Hero;

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

@@ -6,6 +6,7 @@ export interface ModalProps {
     withPortal?: boolean;
     onClose(): void;
     contentStyles?: {};
+    withCloseIcon?: boolean;
 }
-export declare const Modal: ({ children, isOpen, contentStyles, withPortal, onClose, }: ModalProps) => JSX.Element;
+export declare const Modal: ({ children, isOpen, contentStyles, withPortal, withCloseIcon, onClose, }: ModalProps) => JSX.Element;
 export default Modal;