@kvdbil/components 13.7.1 → 13.9.0

package/cjs/components/Button/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("../../theme.js"),r=require("../Spinner/index.js"),i=require("../../typography/ButtonText/index.js"),a=require("./styles.js");function s(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var o=s(e),n=s(t);const u=n.default.button`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),l=require("../../theme.js"),r=require("../Spinner/index.js"),i=require("../../typography/ButtonText/index.js"),a=require("./styles.js");function s(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var o=s(e),n=s(t);const d=n.default.button`
   ${i.BasicButtonFontStyle}
   box-sizing: border-box;
   outline: none;
@@ -10,7 +10,7 @@
   width: ${({fullWidth:x})=>x&&"100%"};
   display: flex;
   align-items: center;
-  justify-content: ${({sufixIcon:x,prefixIcon:b,isLoading:z})=>z||!x&&!b?"center":"space-between"};
+  justify-content: ${({sufixIcon:x,prefixIcon:h,isLoading:S})=>S||!x&&!h?"center":"space-between"};
 
   ${({size:x="small"})=>a.fontSizes[x]||i.ButtonRegularTextStyle}
   ${({size:x})=>t.css`
@@ -19,21 +19,22 @@
     ${x==="large"&&a.largeSizeStyles()}
   `}
   background-color: transparent;
-  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
-  ${({variant:x="solid",color:b="primary",disabled:z,theme:S})=>t.css`
-    ${z?a.disabledColorStyles(S,x):a.colorStyles[x](S,b)}
+  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease,
+    filter 0.3s;
+  ${({variant:x="solid",color:h="primary",colorShade:S="main",disabled:v,theme:$})=>t.css`
+    ${v?a.disabledColorStyles($,x):a.colorStyles[x]($,h,S)}
   `}
   &:focus-visible {
     box-shadow: 0px 0px 0px 1px ${({theme:x})=>x.colors.gray.light5};
   }
-`,d={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},f={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},c=n.default.span`
+`,u={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},c={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},f=n.default.span`
   display: flex;
-  margin-right: ${({type:x,size:b})=>x==="prefix"?f[b]:0};
-  margin-left: ${({type:x,size:b})=>x==="sufix"?f[b]:0};
-  font-size: ${({size:x})=>d[x]};
+  margin-right: ${({type:x,size:h})=>x==="prefix"?c[h]:0};
+  margin-left: ${({type:x,size:h})=>x==="sufix"?c[h]:0};
+  font-size: ${({size:x})=>u[x]};
   opacity: ${({isLoading:x})=>x?0:1};
 `,m=n.default(r.default)`
   position: absolute;
 `,p=n.default.span`
   opacity: ${({isLoading:x})=>x?0:1};
-`,g={smaller:1,small:1,regular:1.5,large:1.5},y=e.forwardRef(({size:x="small",color:b="primary",variant:z="solid",fullWidth:S=!1,isDisabled:j=!1,isLoading:$=!1,children:q,sufixIcon:v,prefixIcon:E,minWidth:B,as:I="button",...W},w)=>{return o.default.createElement(u,{...W,as:I,minWidth:B,color:b,disabled:j||$,fullWidth:S,theme:l.default,variant:z,size:x,isLoading:$,ref:w,prefixIcon:E,sufixIcon:v},o.default.createElement(o.default.Fragment,null,E&&o.default.createElement(c,{size:x,type:"prefix",isLoading:$},E),(L=$,typeof(h=q)=="string"||typeof h=="number"?o.default.createElement(p,{isLoading:L},h):o.default.isValidElement(h)?o.default.cloneElement(h,{style:{...h.props.style,opacity:L?0:1}}):h),v&&o.default.createElement(c,{size:x,type:"sufix",isLoading:$},v),$&&o.default.createElement(m,{color:l.default.colors.gray.light1,size:g[x]})));var h,L});y.displayName="Button",exports.Button=y,exports.default=y;
+`,g={smaller:1,small:1,regular:1.5,large:1.5},y=e.forwardRef(({size:x="small",color:h="primary",colorShade:S="main",variant:v="solid",fullWidth:$=!1,isDisabled:q=!1,isLoading:z=!1,children:B,sufixIcon:E,prefixIcon:L,minWidth:I,as:W="button",...w},k)=>{return o.default.createElement(d,{...w,as:W,minWidth:I,color:h,colorShade:S,disabled:q||z,fullWidth:$,theme:l.default,variant:v,size:x,isLoading:z,ref:k,prefixIcon:L,sufixIcon:E},o.default.createElement(o.default.Fragment,null,L&&o.default.createElement(f,{size:x,type:"prefix",isLoading:z},L),(j=z,typeof(b=B)=="string"||typeof b=="number"?o.default.createElement(p,{isLoading:j},b):o.default.isValidElement(b)?o.default.cloneElement(b,{style:{...b.props.style,opacity:j?0:1}}):b),E&&o.default.createElement(f,{size:x,type:"sufix",isLoading:z},E),z&&o.default.createElement(m,{color:l.default.colors.gray.light1,size:g[x]})));var b,j});y.displayName="Button",exports.Button=y,exports.default=y;

package/cjs/components/Button/styles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("../../typography/ButtonText/index.js");require("react"),require("styled-components");const r={smaller:o.ButtonSmallTextStyle,small:o.ButtonRegularTextStyle,regular:o.ButtonRegularTextStyle,large:o.ButtonLargeTextStyle},l=(s,a)=>`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("../../typography/ButtonText/index.js");require("react"),require("styled-components");const r={smaller:o.ButtonSmallTextStyle,small:o.ButtonRegularTextStyle,regular:o.ButtonRegularTextStyle,large:o.ButtonLargeTextStyle},e=(s,a)=>`
   color: ${s.colors[a].main};
   border: 2px solid ${s.colors[a].main};
   background-color: transparent;
@@ -12,7 +12,7 @@
     border: 2px solid ${s.colors[a].light};
     color: ${s.colors[a].light};
   }
-`,n=(s,a)=>`
+`,l=(s,a)=>`
   color: ${a!=="neutral"?s.colors[a].main:s.colors.neutral.light};
   background-color: transparent;
 
@@ -23,30 +23,30 @@
   :active {
     color: ${s.colors[a].dark};
   }
-`,e=s=>`
+`,n=s=>`
   color: ${s.colors.gray.light1};
   cursor: not-allowed;
-`,t={solid:(s,a)=>`
+`,t={solid:(s,a,i)=>`
   color: ${s.colors.text.light};
-  background-color: ${s.colors[a].main};
+  background-color: ${s.colors[a][i]};
 
   :hover {
     border-color: ${s.colors[a].dark};
-    background-color: ${s.colors[a].dark};
+    filter: brightness(0.9)
   }
 
   :active {
     border-color: ${s.colors[a].light};
-    background-color: ${s.colors[a].light}
+    filter: brightness(1.1)
   }
-`,outline:l,flat:n};exports.colorStyles=t,exports.disabledColorStyles=(s,a)=>a==="solid"?`
-    ${e(s)};
+`,outline:e,flat:l};exports.colorStyles=t,exports.disabledColorStyles=(s,a)=>a==="solid"?`
+    ${n(s)};
     background-color: ${s.colors.gray.light4};`:a==="outline"?`
-    ${e(s)};
-    border: 2px solid ${s.colors.gray.light1};`:e(s),exports.flatColorStyles=n,exports.fontSizes=r,exports.largeSizeStyles=()=>`
+    ${n(s)};
+    border: 2px solid ${s.colors.gray.light1};`:n(s),exports.flatColorStyles=l,exports.fontSizes=r,exports.largeSizeStyles=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3.75rem;
-`,exports.outlineColorStyles=l,exports.regularSizeStyles=()=>`
+`,exports.outlineColorStyles=e,exports.regularSizeStyles=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3rem;
 `,exports.smallerAndSmallSizeStyles=()=>`

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/Button/index.js

@@ -1,5 +1,5 @@
-import r,{forwardRef as w}from"react";import n,{css as y}from"styled-components";import f from"../../theme.js";import h from"../Spinner/index.js";import{BasicButtonFontStyle as C,ButtonRegularTextStyle as R}from"../../typography/ButtonText/index.js";import{fontSizes as T,smallerAndSmallSizeStyles as z,regularSizeStyles as A,largeSizeStyles as _,disabledColorStyles as k,colorStyles as F}from"./styles.js";const p=0,N=n.button`
-  ${C}
+import r,{forwardRef as h}from"react";import n,{css as f}from"styled-components";import g from"../../theme.js";import C from"../Spinner/index.js";import{BasicButtonFontStyle as R,ButtonRegularTextStyle as T}from"../../typography/ButtonText/index.js";import{fontSizes as z,smallerAndSmallSizeStyles as A,regularSizeStyles as _,largeSizeStyles as k,disabledColorStyles as F,colorStyles as N}from"./styles.js";const c=0,O=n.button`
+  ${R}
   box-sizing: border-box;
   outline: none;
   cursor: pointer;
@@ -12,28 +12,29 @@ import r,{forwardRef as w}from"react";import n,{css as y}from"styled-components"
   align-items: center;
   justify-content: ${({sufixIcon:e,prefixIcon:t,isLoading:s})=>!s&&(e||t)?"space-between":"center"};
 
-  ${({size:e="small"})=>T[e]||R}
-  ${({size:e})=>y`
-    ${(e==="smaller"||e==="small")&&z()}
-    ${e==="regular"&&A()}
-    ${e==="large"&&_()}
+  ${({size:e="small"})=>z[e]||T}
+  ${({size:e})=>f`
+    ${(e==="smaller"||e==="small")&&A()}
+    ${e==="regular"&&_()}
+    ${e==="large"&&k()}
   `}
   background-color: transparent;
-  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
-  ${({variant:e="solid",color:t="primary",disabled:s,theme:a})=>y`
-    ${s?k(a,e):F[e](a,t)}
+  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease,
+    filter 0.3s;
+  ${({variant:e="solid",color:t="primary",colorShade:s="main",disabled:m,theme:a})=>f`
+    ${m?F(a,e):N[e](a,t,s)}
   `}
   &:focus-visible {
     box-shadow: 0px 0px 0px 1px ${({theme:e})=>e.colors.gray.light5};
   }
-`,O={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},g={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},S=n.span`
+`,v={smaller:"1rem",small:"1rem",regular:"1.5rem",large:"1.5rem"},S={smaller:"0.5rem",small:"0.5rem",regular:"1rem",large:"1rem"},$=n.span`
   display: flex;
-  margin-right: ${({type:e,size:t})=>e==="prefix"?g[t]:0};
-  margin-left: ${({type:e,size:t})=>e==="sufix"?g[t]:0};
-  font-size: ${({size:e})=>O[e]};
-  opacity: ${({isLoading:e})=>e?p:1};
-`,v=n(h)`
+  margin-right: ${({type:e,size:t})=>e==="prefix"?S[t]:0};
+  margin-left: ${({type:e,size:t})=>e==="sufix"?S[t]:0};
+  font-size: ${({size:e})=>v[e]};
+  opacity: ${({isLoading:e})=>e?c:1};
+`,D=n(C)`
   position: absolute;
-`,D=n.span`
-  opacity: ${({isLoading:e})=>e?p:1};
-`,G={smaller:1,small:1,regular:1.5,large:1.5},c=w(({size:e="small",color:t="primary",variant:s="solid",fullWidth:a=!1,isDisabled:$=!1,isLoading:o=!1,children:b,sufixIcon:m,prefixIcon:i,minWidth:d,as:x="button",...E},B)=>{const j=(l,u)=>typeof l=="string"||typeof l=="number"?r.createElement(D,{isLoading:u},l):r.isValidElement(l)?r.cloneElement(l,{style:{...l.props.style,opacity:u?p:1}}):l;return r.createElement(N,{...E,as:x,minWidth:d,color:t,disabled:$||o,fullWidth:a,theme:f,variant:s,size:e,isLoading:o,ref:B,prefixIcon:i,sufixIcon:m},r.createElement(r.Fragment,null,i&&r.createElement(S,{size:e,type:"prefix",isLoading:o},i),j(b,o),m&&r.createElement(S,{size:e,type:"sufix",isLoading:o},m),o&&r.createElement(v,{color:f.colors.gray.light1,size:G[e]})))});c.displayName="Button";export{c as Button,c as default};
+`,G=n.span`
+  opacity: ${({isLoading:e})=>e?c:1};
+`,M={smaller:1,small:1,regular:1.5,large:1.5},u=h(({size:e="small",color:t="primary",colorShade:s="main",variant:m="solid",fullWidth:a=!1,isDisabled:b=!1,isLoading:o=!1,children:d,sufixIcon:i,prefixIcon:p,minWidth:x,as:E="button",...B},j)=>{const w=(l,y)=>typeof l=="string"||typeof l=="number"?r.createElement(G,{isLoading:y},l):r.isValidElement(l)?r.cloneElement(l,{style:{...l.props.style,opacity:y?c:1}}):l;return r.createElement(O,{...B,as:E,minWidth:x,color:t,colorShade:s,disabled:b||o,fullWidth:a,theme:g,variant:m,size:e,isLoading:o,ref:j,prefixIcon:p,sufixIcon:i},r.createElement(r.Fragment,null,p&&r.createElement($,{size:e,type:"prefix",isLoading:o},p),w(d,o),i&&r.createElement($,{size:e,type:"sufix",isLoading:o},i),o&&r.createElement(D,{color:g.colors.gray.light1,size:M[e]})))});u.displayName="Button";export{u as Button,u as default};

package/esm/components/Button/styles.js

@@ -1,26 +1,26 @@
-import{ButtonSmallTextStyle as a,ButtonRegularTextStyle as s,ButtonLargeTextStyle as c}from"../../typography/ButtonText/index.js";import"react";import"styled-components";const i={smaller:a,small:s,regular:s,large:c},d=()=>`
+import{ButtonSmallTextStyle as e,ButtonRegularTextStyle as t,ButtonLargeTextStyle as a}from"../../typography/ButtonText/index.js";import"react";import"styled-components";const c={smaller:e,small:t,regular:t,large:a},d=()=>`
   padding: 0.25rem 0.75rem;
   min-height: 2.5rem;
-`,e=()=>`
+`,g=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3rem;
-`,g=()=>`
+`,u=()=>`
   padding: 0.25rem 1.5rem;
   min-height: 3.75rem;
-`,u=(o,r)=>`
+`,y=(o,r,n)=>`
   color: ${o.colors.text.light};
-  background-color: ${o.colors[r].main};
+  background-color: ${o.colors[r][n]};
 
   :hover {
     border-color: ${o.colors[r].dark};
-    background-color: ${o.colors[r].dark};
+    filter: brightness(0.9)
   }
 
   :active {
     border-color: ${o.colors[r].light};
-    background-color: ${o.colors[r].light}
+    filter: brightness(1.1)
   }
-`,t=(o,r)=>`
+`,s=(o,r)=>`
   color: ${o.colors[r].main};
   border: 2px solid ${o.colors[r].main};
   background-color: transparent;
@@ -34,7 +34,7 @@ import{ButtonSmallTextStyle as a,ButtonRegularTextStyle as s,ButtonLargeTextStyl
     border: 2px solid ${o.colors[r].light};
     color: ${o.colors[r].light};
   }
-`,n=(o,r)=>`
+`,i=(o,r)=>`
   color: ${r!=="neutral"?o.colors[r].main:o.colors.neutral.light};
   background-color: transparent;
 
@@ -48,8 +48,8 @@ import{ButtonSmallTextStyle as a,ButtonRegularTextStyle as s,ButtonLargeTextStyl
 `,l=o=>`
   color: ${o.colors.gray.light1};
   cursor: not-allowed;
-`,$=(o,r)=>r==="solid"?`
+`,S=(o,r)=>r==="solid"?`
     ${l(o)};
     background-color: ${o.colors.gray.light4};`:r==="outline"?`
     ${l(o)};
-    border: 2px solid ${o.colors.gray.light1};`:l(o),y={solid:u,outline:t,flat:n};export{y as colorStyles,$ as disabledColorStyles,n as flatColorStyles,i as fontSizes,g as largeSizeStyles,t as outlineColorStyles,e as regularSizeStyles,d as smallerAndSmallSizeStyles};
+    border: 2px solid ${o.colors.gray.light1};`:l(o),$={solid:y,outline:s,flat:i};export{$ as colorStyles,S as disabledColorStyles,i as flatColorStyles,c as fontSizes,u as largeSizeStyles,s as outlineColorStyles,g as regularSizeStyles,d as smallerAndSmallSizeStyles};

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.7.1",
+  "version": "13.9.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

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

@@ -1,8 +1,9 @@
 import React, { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
-import { Color, Variant, Size } from '../../Types';
+import { Color, Variant, Size, ColorShade } from '../../Types';
 interface Props {
     size?: Size;
     color?: Color;
+    colorShade?: ColorShade;
     variant?: Variant;
     fullWidth?: boolean;
     style?: CSSProperties;
@@ -15,5 +16,5 @@ interface Props {
     as?: keyof JSX.IntrinsicElements;
 }
 export declare type ButtonProps = ComponentPropsWithRef<'button'> & Props;
-export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "slot" | "style" | "title" | "type" | "name" | "key" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "minWidth" | "fullWidth" | "sufixIcon" | "prefixIcon" | "isLoading" | "variant" | "isDisabled"> & React.RefAttributes<HTMLElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "slot" | "style" | "title" | "type" | "name" | "key" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "minWidth" | "fullWidth" | "sufixIcon" | "prefixIcon" | "isLoading" | "variant" | "colorShade" | "isDisabled"> & React.RefAttributes<HTMLElement>>;
 export default Button;

package/types/components/Button/styles.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from '../../theme';
-import { Color, Variant } from '../../Types';
+import { Color, ColorShade, Variant } from '../../Types';
 export declare const fontSizes: {
     smaller: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
     small: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
@@ -13,7 +13,7 @@ export declare const outlineColorStyles: (theme: Theme, color: Color) => string;
 export declare const flatColorStyles: (theme: Theme, color: Color) => string;
 export declare const disabledColorStyles: (theme: Theme, variant: Variant) => string;
 export declare const colorStyles: {
-    solid: (theme: Theme, color: Color) => string;
+    solid: (theme: Theme, color: Color, colorShade: ColorShade) => string;
     outline: (theme: Theme, color: Color) => string;
     flat: (theme: Theme, color: Color) => string;
 };

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;