@kvdbil/components 13.8.0 → 13.9.1

package/cjs/components/Hero/index.js

@@ -1,4 +1,4 @@
-"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`
+"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 a(w){return w&&typeof w=="object"&&"default"in w?w:{default:w}}require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js");var o=a(e),l=a(t);const d=l.default.div`
   position: relative;
   min-height: 440px;
   display: flex;
@@ -14,38 +14,38 @@
 
   100% {
     background-color:#f5f5f5;
-  }`,c=l.default.div`
+  }`,s=l.default.div`
   width: 100%;
   height: 440px;
   animation: ${u} 2s linear infinite;
-`,s=l.default.div`
-  pointer-events: ${({$pointerEvents:v})=>v};
+`,c=l.default.div`
+  pointer-events: ${({$pointerEvents:w})=>w};
   display: flex;
-  flex-direction: ${({$direction:v})=>v};
-  align-items: ${({$align:v})=>v};
-  justify-content: ${({$justify:v})=>v};
+  flex-direction: ${({$direction:w})=>w};
+  align-items: ${({$align:w})=>w};
+  justify-content: ${({$justify:w})=>w};
   padding: 3rem 1.5rem;
   z-index: 1;
   flex: 1;
-`,$=l.default.iframe`
+`,p=l.default.iframe`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-`,m=v=>typeof v=="number",f=v=>typeof v=="string",p=l.default.div`
+`,$=w=>typeof w=="number",m=w=>typeof w=="string",f=l.default.div`
   width: 100%;
   min-height: 440px;
   display: flex;
   flex-direction: column;
 
-  ${({$centered:v})=>v&&"justify-content: center;"}
+  ${({$centered:w})=>w&&"justify-content: center;"}
 
-  ${({$url:v,...w})=>v&&`
-    background: url('${v}');
+  ${({$url:w,...v})=>w&&`
+    background: url('${w}');
     background-repeat: no-repeat;
     background-size: cover;
-    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)};
+    background-position: ${(({$positionX:j,$positionY:q})=>$(j)&&$(q)?`${j}% ${q}%`:m(j)&&m(q)?`${j} ${q}`:j||q?`${($(j)?`${j}%`:j)||"50%"} ${($(q)?`${q}%`:q)||"50%"}`:"50% 50%")(v)};
   `}
 `,g=l.default.div`
   padding-left: 1rem;
@@ -55,46 +55,53 @@
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
-`,h=l.default.div`
-  ${({$centered:v})=>!v&&"margin-top: 3rem;"}
+`,x=l.default.div`
+  ${({$centered:w})=>!w&&"margin-top: 3rem;"}
 
-  ${({$centered:v})=>v&&`
+  ${({$centered:w})=>w&&`
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
   `}
 
-  ${({$maxWidth:v,$dynamicGutter:w})=>!w&&`
+  ${({$maxWidth:w,$dynamicGutter:v})=>!v&&`
     width: 100%;
     margin-left: auto;
     margin-right: auto;
-    max-width: ${v}rem;
+    max-width: ${w}rem;
   `}
 
-  ${({$dynamicGutter:v})=>v&&`
+  ${({$dynamicGutter:w})=>w&&`
     ${i.mq("tablet")} {
-      margin-left: ${v.tabletVw}vw;
-      margin-right: ${v.tabletVw}vw;
+      margin-left: ${w.tabletVw}vw;
+      margin-right: ${w.tabletVw}vw;
     }
 
     ${i.mq("laptop")} {
-      margin-left: ${v.laptopVw}vw;
-      margin-right: ${v.laptopVw}vw;
+      margin-left: ${w.laptopVw}vw;
+      margin-right: ${w.laptopVw}vw;
     }
   `}
 
   ${i.mq("laptop")} {
-    ${({$centered:v})=>!v&&"margin-top: 3.75rem;"}
+    ${({$centered:w})=>!w&&"margin-top: 3.75rem;"}
   }
-`,y=l.default(n.Display3)`
+`,h=l.default(n.Display3)`
   margin: 0;
-  color: ${({$color:v,theme:w})=>w.colors.text[v]};
-`,x=l.default(n.Title)`
+  color: ${({$color:w,theme:v})=>v.colors.text[w]};
+
+  ${({shadow:w})=>w&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
+`,y=l.default(n.Title)`
   margin: 0.25rem 0;
-  color: ${({$color:v,theme:w})=>w.colors.text[v]};
+  color: ${({$color:w,theme:v})=>v.colors.text[w]};
+
+  ${({shadow:w})=>w&&"text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);"}
 `,b=l.default.a`
   display: inline-block;
   margin-top: 3rem;
   text-decoration: none;
-`;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))))};
+
+  ${({shadow:w})=>w&&`box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1),
+  0px 3px 14px 0px rgba(0, 0, 0, 0.09), 0px 4px 5px 0px rgba(0, 0, 0, 0.15);`}
+`;exports.colorAnimation=u,exports.default=({imageProps:w,videoProps:v,children:j,align:q,direction:W,justify:B,contentMaxWidth:I=64,heading:k,headingColor:S="dark",subheading:G,buttonProps:E,dynamicGutter:M,isLoading:T=!1,contentCentered:V=!1,containerStyle:X,elementShadow:P=!1})=>{const{autoplay:Y=0,controls:_=0,disablekb:A=0,end:z,loop:D=0,modestbranding:F=1,start:H=0,showInfo:L=0}=(v==null?void 0:v.ytConfig)||{},{link:O,text:J,color:C,...K}=E!=null?E:{};return T?o.default.createElement(s,{"data-testid":"loader"}):o.default.createElement(d,{style:X},v?o.default.createElement(p,{"data-testid":"hero-video",title:"video-frame",src:`${v.src}?disabledkb=${A}&autoplay=${Y}&controls=${_}&loop=${D}&modestbranding=${F}&start=${H}&showInfo=${L}${z?`&end=${z}`:""}`,width:"100%",height:"100%",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}):o.default.createElement(f,{"data-testid":"hero-image",$positionX:w==null?void 0:w.x,$positionY:w==null?void 0:w.y,$url:w==null?void 0:w.src,$centered:V},o.default.createElement(g,null,(k||G||E)&&o.default.createElement(x,{$maxWidth:I,$dynamicGutter:M,$centered:V},k&&o.default.createElement(h,{as:"h1",$color:S,shadow:P},k),G&&o.default.createElement(y,{$color:S,shadow:P},G),E&&o.default.createElement(b,{href:O,shadow:P},o.default.createElement(r.Button,{size:"large",as:"span",color:C!=null?C:"secondary",...K},J))),j&&o.default.createElement(c,{$pointerEvents:v?"none":"auto",$align:q||"flex-start",$direction:W||"column",$justify:B||"flex-start"},j))))};

package/cjs/components/Tabs/Tabs.js

@@ -1,24 +1,28 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./Tab.js"),r=require("styled-components"),l=require("../../shared/media-queries.js"),i=require("react-collapse");function n(b){return b&&typeof b=="object"&&"default"in b?b:{default:b}}require("../Button/index.js"),require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("../../utils/utils.js");var a=n(e),o=n(r);const s=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./Tab.js"),r=require("styled-components"),l=require("../../shared/media-queries.js"),i=require("react-collapse"),n=require("../../typography/Heading/index.js");function a(v){return v&&typeof v=="object"&&"default"in v?v:{default:v}}require("../Button/index.js"),require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("../../utils/utils.js");var o=a(e),d=a(r);const s=d.default.div`
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`,d=o.default.ul`
+`,u=d.default.ul`
   width: 100%;
   padding: 0;
   margin: 0.5rem 0;
-  display: inline-flex;
-  flex-direction: column;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   align-items: center;
-  flex-wrap: wrap;
 
-  ${({theme:b,fullWidthBorder:w})=>w?`border-bottom: 3px solid ${b.colors.gray.light6};`:`& > li {
-          border-bottom: 3px solid ${b.colors.gray.light6};
+  ${({theme:v,fullWidthBorder:A,borderColor:g})=>A?`border-bottom: 3px solid ${v.colors.gray[g]};`:`& > li {
+          border-bottom: 3px solid ${v.colors.gray[g]};
         }`}
 
-  ${l.mq("mobileM")} {
-    flex-direction: row;
-    justify-content: ${({justify:b})=>b};
+  ${l.mq(null,"mobileL")} {
+    flex-direction: column;
+    justify-content: ${({justify:v})=>v};
   }
-`,u=o.default.div`
+`,c=d.default(n.Title)`
+  margin: 0;
+`,p=d.default.div`
+  display: flex;
+`,f=d.default.div`
   padding: 0.5rem 0;
-`,c=o.default.div``,p=({activeColor:b="secondary",justify:w="end",activeIndex:B,initalActive:$,children:O=[],kbNavAutoOpen:D=!0,onTabClick:A,fullWidthBorder:W=!0})=>{var R,T;const v=e.Children.map(O,f=>f),[j,C]=e.useState(()=>$!=null?$:v.findIndex(f=>!f.props.isDisabled)),I=e.useRef([]),M=Boolean((T=(R=v[j])==null?void 0:R.props)==null?void 0:T.children);e.useEffect(()=>{B!==void 0&&C(B)},[B]);const S=(f,m)=>{if(f.preventDefault(),f.key!=="Enter"||D||C(m),f.key==="ArrowLeft"||f.key==="ArrowRight"){const h=D?j:m,y=f.key==="ArrowRight",g=y?h+1:0,E=y?v.length:h,q=v.slice(g,E);y||q.reverse();const k=q.findIndex(x=>!x.props.isDisabled);if(k!==-1){const x=y?h+(k+1):h-(k+1);D&&C(x),I.current[x].focus()}}};return a.default.createElement(s,null,a.default.createElement(i.UnmountClosed,{isOpened:!0},a.default.createElement(d,{fullWidthBorder:W,justify:w,role:"tablist"},v.map((f,m)=>{if(!f)return null;const h=j===m;return a.default.createElement(t.default,{key:m,label:f.props.label,isDisabled:f.props.isDisabled,index:m,id:m,isActive:j===m,activeColor:b,onClick:(y,g)=>{var E,q;h||f.props.isDisabled||((q=(E=f.props).onClick)==null||q.call(E,y,g),A==null||A(y,g),((k,x)=>{k.preventDefault(),C(x)})(y,g))},onKeyUp:S,ref:y=>I.current[m]=y})})),M&&a.default.createElement(u,null,v.map((f,m)=>{const h=f.props.children&&j===m;return a.default.createElement(c,{key:m,id:`tabpanel-${m}`,role:"tabpanel","aria-labelledby":`tab-${m}`,"aria-hidden":h?"false":"true"},h&&f.props.children)}))))};exports.Tabs=p,exports.default=p;
+`,b=d.default.div``,m=({activeColor:v="secondary",justify:A="end",activeIndex:g,initalActive:R,children:U=[],kbNavAutoOpen:T=!0,onTabClick:I,fullWidthBorder:_=!0,borderColor:H="light6",headline:O})=>{var W,L;const q=e.Children.map(U,y=>y),[k,$]=e.useState(()=>R!=null?R:q.findIndex(y=>!y.props.isDisabled)),S=e.useRef([]),K=Boolean((L=(W=q[k])==null?void 0:W.props)==null?void 0:L.children);e.useEffect(()=>{g!==void 0&&$(g)},[g]);const M=(y,h)=>{if(y.preventDefault(),y.key!=="Enter"||T||$(h),y.key==="ArrowLeft"||y.key==="ArrowRight"){const x=T?k:h,j=y.key==="ArrowRight",E=j?x+1:0,w=j?q.length:x,B=q.slice(E,w);j||B.reverse();const D=B.findIndex(C=>!C.props.isDisabled);if(D!==-1){const C=j?x+(D+1):x-(D+1);T&&$(C),S.current[C].focus()}}};return o.default.createElement(s,null,o.default.createElement(i.UnmountClosed,{isOpened:!0},o.default.createElement(u,{fullWidthBorder:_,justify:A,role:"tablist",borderColor:H},O&&o.default.createElement(c,null,O),o.default.createElement(p,null,q.map((y,h)=>{if(!y)return null;const x=k===h;return o.default.createElement(t.default,{key:h,label:y.props.label,isDisabled:y.props.isDisabled,index:h,id:h,isActive:k===h,activeColor:v,onClick:(j,E)=>{var w,B;x||y.props.isDisabled||((B=(w=y.props).onClick)==null||B.call(w,j,E),I==null||I(j,E),((D,C)=>{D.preventDefault(),$(C)})(j,E))},onKeyUp:M,ref:j=>S.current[h]=j})}))),K&&o.default.createElement(f,null,q.map((y,h)=>{const x=y.props.children&&k===h;return o.default.createElement(b,{key:h,id:`tabpanel-${h}`,role:"tabpanel","aria-labelledby":`tab-${h}`,"aria-hidden":x?"false":"true"},x&&y.props.children)}))))};exports.Tabs=m,exports.default=m;

package/cjs/components/Tabs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Tabs.js"),r=require("./Tab.js");require("react"),require("styled-components"),require("../../shared/media-queries.js"),require("react-collapse"),require("../Button/index.js"),require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("../../utils/utils.js"),exports.Tabs=e.Tabs,exports.Tab=r.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Tabs.js"),r=require("./Tab.js");require("react"),require("styled-components"),require("../../shared/media-queries.js"),require("react-collapse"),require("../../typography/Heading/index.js"),require("../Button/index.js"),require("../../theme.js"),require("../Spinner/index.js"),require("../../typography/ButtonText/index.js"),require("../Button/styles.js"),require("../../utils/utils.js"),exports.Tabs=e.Tabs,exports.Tab=r.default;

package/esm/components/Hero/index.js

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

package/esm/components/Tabs/Tabs.js

@@ -1,24 +1,28 @@
-import n,{Children as _,useState as x,useRef as A,useEffect as B}from"react";import I from"./Tab.js";import u from"styled-components";import{mq as P}from"../../shared/media-queries.js";import{UnmountClosed as S}from"react-collapse";import"../Button/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../utils/utils.js";const U=u.div`
+import l,{Children as A,useState as B,useRef as S,useEffect as H}from"react";import I from"./Tab.js";import a from"styled-components";import{mq as P}from"../../shared/media-queries.js";import{UnmountClosed as U}from"react-collapse";import{Title as q}from"../../typography/Heading/index.js";import"../Button/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../utils/utils.js";const F=a.div`
   .ReactCollapse--collapse {
     transition: height 300ms;
   }
-`,q=u.ul`
+`,K=a.ul`
   width: 100%;
   padding: 0;
   margin: 0.5rem 0;
-  display: inline-flex;
-  flex-direction: column;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   align-items: center;
-  flex-wrap: wrap;
 
-  ${({theme:s,fullWidthBorder:f})=>f?`border-bottom: 3px solid ${s.colors.gray.light6};`:`& > li {
-          border-bottom: 3px solid ${s.colors.gray.light6};
+  ${({theme:o,fullWidthBorder:b,borderColor:s})=>b?`border-bottom: 3px solid ${o.colors.gray[s]};`:`& > li {
+          border-bottom: 3px solid ${o.colors.gray[s]};
         }`}
 
-  ${P("mobileM")} {
-    flex-direction: row;
-    justify-content: ${({justify:s})=>s};
+  ${P(null,"mobileL")} {
+    flex-direction: column;
+    justify-content: ${({justify:o})=>o};
   }
-`,F=u.div`
+`,L=a(q)`
+  margin: 0;
+`,z=a.div`
+  display: flex;
+`,G=a.div`
   padding: 0.5rem 0;
-`,K=u.div``,C=({activeColor:s="secondary",justify:f="end",activeIndex:b,initalActive:g,children:D=[],kbNavAutoOpen:y=!0,onTabClick:v,fullWidthBorder:w=!0})=>{var T,E;const l=_.map(D,e=>e),[i,d]=x(()=>g!=null?g:l.findIndex(e=>!e.props.isDisabled)),j=A([]),R=Boolean((E=(T=l[i])==null?void 0:T.props)==null?void 0:E.children),$=(e,t)=>{e.preventDefault(),d(t)};B(()=>{typeof b!="undefined"&&d(b)},[b]);const k=(e,t)=>{if(e.preventDefault(),e.key==="Enter"&&!y&&d(t),e.key==="ArrowLeft"||e.key==="ArrowRight"){const o=y?i:t,r=e.key==="ArrowRight",a=r?o+1:0,p=r?l.length:o,c=l.slice(a,p);r||c.reverse();const h=c.findIndex(m=>!m.props.isDisabled);if(h!==-1){const m=r?o+(h+1):o-(h+1);y&&d(m),j.current[m].focus()}}};return n.createElement(U,null,n.createElement(S,{isOpened:!0},n.createElement(q,{fullWidthBorder:w,justify:f,role:"tablist"},l.map((e,t)=>{if(!e)return null;const o=i===t;return n.createElement(I,{key:t,label:e.props.label,isDisabled:e.props.isDisabled,index:t,id:t,isActive:i===t,activeColor:s,onClick:(r,a)=>{var p,c;!o&&!e.props.isDisabled&&((c=(p=e.props).onClick)==null||c.call(p,r,a),v==null||v(r,a),$(r,a))},onKeyUp:k,ref:r=>j.current[t]=r})})),R&&n.createElement(F,null,l.map((e,t)=>{const o=e.props.children&&i===t;return n.createElement(K,{key:t,id:`tabpanel-${t}`,role:"tabpanel","aria-labelledby":`tab-${t}`,"aria-hidden":o?"false":"true"},o&&e.props.children)}))))};export{C as Tabs,C as default};
+`,J=a.div``,D=({activeColor:o="secondary",justify:b="end",activeIndex:s,initalActive:g,children:R=[],kbNavAutoOpen:y=!0,onTabClick:T,fullWidthBorder:$=!0,borderColor:k="light6",headline:v})=>{var E,j;const i=A.map(R,e=>e),[c,m]=B(()=>g!=null?g:i.findIndex(e=>!e.props.isDisabled)),C=S([]),w=Boolean((j=(E=i[c])==null?void 0:E.props)==null?void 0:j.children),_=(e,t)=>{e.preventDefault(),m(t)};H(()=>{typeof s!="undefined"&&m(s)},[s]);const x=(e,t)=>{if(e.preventDefault(),e.key==="Enter"&&!y&&m(t),e.key==="ArrowLeft"||e.key==="ArrowRight"){const n=y?c:t,r=e.key==="ArrowRight",d=r?n+1:0,u=r?i.length:n,p=i.slice(d,u);r||p.reverse();const h=p.findIndex(f=>!f.props.isDisabled);if(h!==-1){const f=r?n+(h+1):n-(h+1);y&&m(f),C.current[f].focus()}}};return l.createElement(F,null,l.createElement(U,{isOpened:!0},l.createElement(K,{fullWidthBorder:$,justify:b,role:"tablist",borderColor:k},v&&l.createElement(L,null,v),l.createElement(z,null,i.map((e,t)=>{if(!e)return null;const n=c===t;return l.createElement(I,{key:t,label:e.props.label,isDisabled:e.props.isDisabled,index:t,id:t,isActive:c===t,activeColor:o,onClick:(r,d)=>{var u,p;!n&&!e.props.isDisabled&&((p=(u=e.props).onClick)==null||p.call(u,r,d),T==null||T(r,d),_(r,d))},onKeyUp:x,ref:r=>C.current[t]=r})}))),w&&l.createElement(G,null,i.map((e,t)=>{const n=e.props.children&&c===t;return l.createElement(J,{key:t,id:`tabpanel-${t}`,role:"tabpanel","aria-labelledby":`tab-${t}`,"aria-hidden":n?"false":"true"},n&&e.props.children)}))))};export{D as Tabs,D as default};

package/esm/components/Tabs/index.js

@@ -1 +1 @@
-export{Tabs}from"./Tabs.js";export{default as Tab}from"./Tab.js";import"react";import"styled-components";import"../../shared/media-queries.js";import"react-collapse";import"../Button/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../utils/utils.js";
+export{Tabs}from"./Tabs.js";export{default as Tab}from"./Tab.js";import"react";import"styled-components";import"../../shared/media-queries.js";import"react-collapse";import"../../typography/Heading/index.js";import"../Button/index.js";import"../../theme.js";import"../Spinner/index.js";import"../../typography/ButtonText/index.js";import"../Button/styles.js";import"../../utils/utils.js";

package/package.json

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

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

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

package/types/components/Tabs/Tabs.d.ts

@@ -3,6 +3,7 @@ import { Color } from '../../Types';
 import { ReactElement } from 'react';
 import { TabProps } from './Tab';
 import { CSSProperties } from 'styled-components';
+import theme from '../../theme';
 declare type TabElement = ReactElement<TabProps>;
 export interface TabsProps {
     activeColor?: Color;
@@ -13,6 +14,8 @@ export interface TabsProps {
     kbNavAutoOpen?: boolean;
     onTabClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, index: number) => void;
     fullWidthBorder?: boolean;
+    borderColor?: keyof typeof theme.colors.gray;
+    headline?: string;
 }
-export declare const Tabs: ({ activeColor, justify, activeIndex, initalActive, children, kbNavAutoOpen, onTabClick, fullWidthBorder, }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ activeColor, justify, activeIndex, initalActive, children, kbNavAutoOpen, onTabClick, fullWidthBorder, borderColor, headline, }: TabsProps) => JSX.Element;
 export default Tabs;