@kvdbil/components 9.0.0 → 9.1.1

package/cjs/components/Message/index.js

@@ -1,16 +1,20 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../typography/Heading/index.js"),n=require("../../icons/components/AlertIcon.js"),l=require("../../icons/components/CheckCircleIcon.js"),a=require("../../icons/components/CloseIcon.js"),o=require("../../icons/components/InfoIcon.js"),s=require("../../icons/components/WarningIcon.js");function c(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}require("../../shared/media-queries.js");var i=c(e),u=c(t);const d=u.default.div`
-  ${({isDeleted:x})=>x&&`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components"),r=require("../../typography/Heading/index.js"),n=require("../../icons/components/AlertIcon.js"),l=require("../../icons/components/CheckCircleIcon.js"),a=require("../../icons/components/CloseIcon.js"),o=require("../../icons/components/InfoIcon.js"),s=require("../../icons/components/WarningIcon.js");function c(h){return h&&typeof h=="object"&&"default"in h?h:{default:h}}require("../../shared/media-queries.js");var i=c(e),u=c(t);const d=u.default.div`
+  ${({isDeleted:h})=>h&&`
       opacity: 0;
       transition: opacity 0.3s;
     `}
 `,f=u.default.div`
-  display: ${({fullWidth:x})=>x?"flex":"inline-flex"};
-  ${({fullWidth:x})=>x&&"justify-content: space-between;"}
+  display: ${({fullWidth:h})=>h?"flex":"inline-flex"};
+  ${({fullWidth:h})=>h&&"justify-content: space-between;"}
   align-items: center;
   padding: 0 1.5rem;
-  box-shadow: ${({theme:x})=>x.elevations.elevation2};
+  box-shadow: ${({theme:h})=>h.elevations.elevation2};
 
-  ${({theme:x,messageType:E,inverted:j})=>{const{text:q,background:w}=((I,b,k)=>{const y=k.colors.text.dark,v=k.colors.background.light;switch(I){case"info":return{text:b?k.colors.info.dark:y,background:b?v:k.colors.info.lighter};case"success":return{text:b?k.colors.success.dark:y,background:b?v:k.colors.success.lighter};case"warning":return{text:b?k.colors.warning.dark:y,background:b?v:k.colors.warning.lighter};case"error":return{text:b?k.colors.error.dark:y,background:b?v:k.colors.error.lighter};case"text":default:return{text:b?k.colors.text.light:y,background:b?k.colors.background.dark:v}}})(E,j,x);return`
+  ${({textCenter:h})=>h&&`
+      justify-content: center;
+    `}
+
+  ${({theme:h,messageType:j,inverted:E})=>{const{text:q,background:w}=((C,y,k)=>{const b=k.colors.text.dark,v=k.colors.background.light;switch(C){case"info":return{text:y?k.colors.info.dark:b,background:y?v:k.colors.info.lighter};case"success":return{text:y?k.colors.success.dark:b,background:y?v:k.colors.success.lighter};case"warning":return{text:y?k.colors.warning.dark:b,background:y?v:k.colors.warning.lighter};case"error":return{text:y?k.colors.error.dark:b,background:y?v:k.colors.error.lighter};case"text":default:return{text:y?k.colors.text.light:b,background:y?k.colors.background.dark:v}}})(j,E,h);return`
       color: ${q};
       background-color: ${w};
     `}}
@@ -22,13 +26,13 @@
 `,p=u.default.span`
   display: flex;
   align-items: center;
-  margin-right: 1rem;
+  margin-right: 0.5rem;
   font-size: 1.5rem;
-`,h=u.default.span`
+`,x=u.default.span`
   display: flex;
   align-items: center;
   margin-left: 1rem;
   font-size: 2.5rem;
   cursor: pointer;
   }
-`;exports.default=({children:x,type:E,withIcon:j=!1,isDeletable:q=!1,fullWidth:w=!1,inverted:I=!1,...b})=>{const k=e.useRef(null),[y,v]=e.useState(!1);return i.default.createElement(d,{isDeleted:y},i.default.createElement(f,{messageType:E,fullWidth:w,inverted:I,role:"alert",ref:k,...b},i.default.createElement(m,null,j&&i.default.createElement(p,null,($=>{switch($){case"success":return i.default.createElement(l.default,null);case"warning":return i.default.createElement(s.default,null);case"error":return i.default.createElement(n.default,null);case"info":case"text":default:return i.default.createElement(o.default,null)}})(E)),i.default.createElement(g,null,x)),q&&i.default.createElement(h,{onClick:$=>{$.stopPropagation(),v(!0),setTimeout(()=>{k.current&&k.current.remove()},300)},"aria-label":"Close"},i.default.createElement(a.default,null))))};
+`;exports.default=({children:h,type:j,withIcon:E=!1,isDeletable:q=!1,fullWidth:w=!1,inverted:C=!1,textCenter:y=!1,...k})=>{const b=e.useRef(null),[v,I]=e.useState(!1);return i.default.createElement(d,{isDeleted:v},i.default.createElement(f,{messageType:j,fullWidth:w,inverted:C,textCenter:y,role:"alert",ref:b,...k},i.default.createElement(m,null,E&&i.default.createElement(p,null,($=>{switch($){case"success":return i.default.createElement(l.default,null);case"warning":return i.default.createElement(s.default,null);case"error":return i.default.createElement(n.default,null);case"info":case"text":default:return i.default.createElement(o.default,null)}})(j)),i.default.createElement(g,null,h)),q&&i.default.createElement(x,{onClick:$=>{$.stopPropagation(),I(!0),setTimeout(()=>{b.current&&b.current.remove()},300)},"aria-label":"Close"},i.default.createElement(a.default,null))))};

package/cjs/components/Spinner/index.js

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../theme.js");function l(u){return u&&typeof u=="object"&&"default"in u?u:{default:u}}var o=l(e),a=l(r);const s=u=>{const n={smaller:1,small:2,regular:3,large:4};return typeof u=="number"?u:n[u]||n.regular},i=r.keyframes`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../theme.js");function l(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}var a=l(e),o=l(r);const i=n=>{const u={smaller:1,small:2,regular:3,large:4};return typeof n=="number"?n:u[n]||u.regular},s=r.keyframes`
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
-`,d=a.default.div`
+`,d=o.default.div`
   display: inline-block;
   border-radius: 50%;
-  border-top: ${({theme:u,color:n,size:m})=>{var f,c,b;return`${s(m)/10}em solid ${(b=(c=(f=u.colors)==null?void 0:f[n])==null?void 0:c.main)!=null?b:n}`}};
-  border-bottom: ${({size:u})=>s(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
-  border-right: ${({size:u})=>s(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
-  border-left: ${({size:u})=>s(u)/10+"em solid rgba(0, 0, 0, 0.1);"};
-  width: ${({size:u})=>s(u)}em;
-  height: ${({size:u})=>s(u)}em;
-  animation: ${i} ${({speed:u})=>(n=>{const m={slow:"2s",default:"1s",fast:"0.5s"};return m[n]||m.default})(u)} infinite linear;
+  border-top: ${({theme:n,color:u,size:m})=>{var f,c,b;return`${i(m)/10}em solid ${(b=(c=(f=n.colors)==null?void 0:f[u])==null?void 0:c.main)!=null?b:u}`}};
+  border-bottom: ${({size:n})=>i(n)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  border-right: ${({size:n})=>i(n)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  border-left: ${({size:n})=>i(n)/10+"em solid rgba(0, 0, 0, 0.1);"};
+  width: ${({size:n})=>i(n)}em;
+  height: ${({size:n})=>i(n)}em;
+  animation: ${s} ${({speed:n})=>(u=>{const m={slow:"2s",default:"1s",fast:"0.5s"};return m[u]||m.default})(n)} infinite linear;
   will-change: transform;
-`;exports.default=({size:u="regular",color:n="primary",speed:m="default",...f})=>o.default.createElement(d,{...f,role:"status","aria-live":"polite","aria-busy":"true",size:u,speed:m,color:n,theme:t.default});
+`;exports.default=({size:n="regular",color:u="primary",speed:m="default",...f})=>a.default.createElement(d,{...f,"aria-label":"loading",role:"status","aria-live":"polite","aria-busy":"true",size:n,speed:m,color:u,theme:t.default});

package/cjs/components/Tabs/Tabs.js

@@ -12,10 +12,10 @@
   flex-wrap: wrap;
   border-bottom: 3px solid ${({theme:y})=>y.colors.gray.light6};
 
-  ${l.mq("mobileL")} {
+  ${l.mq("mobileM")} {
     flex-direction: row;
     justify-content: ${({justify:y})=>y};
   }
 `,u=s.default.div`
   padding: 0.5rem 0;
-`,p=s.default.div``,c=({activeColor:y="secondary",justify:R="end",initalActive:D,children:T=[],kbNavAutoOpen:q=!0,onTabClick:O=()=>{}})=>{var E,A;const v=e.Children.map(T,f=>f),[x,g]=e.useState(()=>D!=null?D:v.findIndex(f=>!f.props.isDisabled)),$=e.useRef([]),I=Boolean((A=(E=v[x])==null?void 0:E.props)==null?void 0:A.children),L=(f,m)=>{if(f.preventDefault(),f.key!=="Enter"||q||g(m),f.key==="ArrowLeft"||f.key==="ArrowRight"){const b=q?x:m,h=f.key==="ArrowRight",k=h?b+1:0,w=h?v.length:b,B=v.slice(k,w);h||B.reverse();const C=B.findIndex(j=>!j.props.isDisabled);if(C!==-1){const j=h?b+(C+1):b-(C+1);q&&g(j),$.current[j].focus()}}};return a.default.createElement(o,null,a.default.createElement(i.UnmountClosed,{isOpened:!0},a.default.createElement(d,{justify:R,role:"tablist"},v.map((f,m)=>f?a.default.createElement(t.default,{key:m,label:f.props.label,isDisabled:f.props.isDisabled,index:m,id:m,isActive:x===m,activeColor:y,onClick:(b,h)=>{f.props.isDisabled||(O(b,h),((k,w)=>{k.preventDefault(),g(w)})(b,h))},onKeyUp:L,ref:b=>$.current[m]=b}):null)),I&&a.default.createElement(u,null,v.map((f,m)=>{const b=f.props.children&&x===m;return a.default.createElement(p,{key:m,id:`tabpanel-${m}`,role:"tabpanel","aria-labelledby":`tab-${m}`,"aria-hidden":b?"false":"true"},b&&f.props.children)}))))};exports.Tabs=c,exports.default=c;
+`,p=s.default.div``,c=({activeColor:y="secondary",justify:R="end",initalActive:D,children:T=[],kbNavAutoOpen:q=!0,onTabClick:O=()=>{}})=>{var E,A;const v=e.Children.map(T,f=>f),[x,g]=e.useState(()=>D!=null?D:v.findIndex(f=>!f.props.isDisabled)),$=e.useRef([]),I=Boolean((A=(E=v[x])==null?void 0:E.props)==null?void 0:A.children),M=(f,m)=>{if(f.preventDefault(),f.key!=="Enter"||q||g(m),f.key==="ArrowLeft"||f.key==="ArrowRight"){const b=q?x:m,h=f.key==="ArrowRight",k=h?b+1:0,w=h?v.length:b,B=v.slice(k,w);h||B.reverse();const C=B.findIndex(j=>!j.props.isDisabled);if(C!==-1){const j=h?b+(C+1):b-(C+1);q&&g(j),$.current[j].focus()}}};return a.default.createElement(o,null,a.default.createElement(i.UnmountClosed,{isOpened:!0},a.default.createElement(d,{justify:R,role:"tablist"},v.map((f,m)=>f?a.default.createElement(t.default,{key:m,label:f.props.label,isDisabled:f.props.isDisabled,index:m,id:m,isActive:x===m,activeColor:y,onClick:(b,h)=>{f.props.isDisabled||(O(b,h),((k,w)=>{k.preventDefault(),g(w)})(b,h))},onKeyUp:M,ref:b=>$.current[m]=b}):null)),I&&a.default.createElement(u,null,v.map((f,m)=>{const b=f.props.children&&x===m;return a.default.createElement(p,{key:m,id:`tabpanel-${m}`,role:"tabpanel","aria-labelledby":`tab-${m}`,"aria-hidden":b?"false":"true"},b&&f.props.children)}))))};exports.Tabs=c,exports.default=c;

package/esm/components/Message/index.js

@@ -1,34 +1,38 @@
-import n,{useRef as f,useState as d}from"react";import s from"styled-components";import{TinyTitleRegular as k}from"../../typography/Heading/index.js";import x from"../../icons/components/AlertIcon.js";import I from"../../icons/components/CheckCircleIcon.js";import C from"../../icons/components/CloseIcon.js";import b from"../../icons/components/InfoIcon.js";import y from"../../icons/components/WarningIcon.js";import"../../shared/media-queries.js";const E=(r,o,e)=>{const t=e.colors.text.dark,c=e.colors.background.light;switch(r){case"info":return{text:o?e.colors.info.dark:t,background:o?c:e.colors.info.lighter};case"success":return{text:o?e.colors.success.dark:t,background:o?c:e.colors.success.lighter};case"warning":return{text:o?e.colors.warning.dark:t,background:o?c:e.colors.warning.lighter};case"error":return{text:o?e.colors.error.dark:t,background:o?c:e.colors.error.lighter};case"text":default:return{text:o?e.colors.text.light:t,background:o?e.colors.background.dark:c}}},j=r=>{switch(r){case"success":return n.createElement(I,null);case"warning":return n.createElement(y,null);case"error":return n.createElement(x,null);case"info":case"text":default:return n.createElement(b,null)}},w=s.div`
-  ${({isDeleted:r})=>r&&`
+import n,{useRef as d,useState as k}from"react";import s from"styled-components";import{TinyTitleRegular as x}from"../../typography/Heading/index.js";import I from"../../icons/components/AlertIcon.js";import C from"../../icons/components/CheckCircleIcon.js";import y from"../../icons/components/CloseIcon.js";import b from"../../icons/components/InfoIcon.js";import E from"../../icons/components/WarningIcon.js";import"../../shared/media-queries.js";const j=(e,o,r)=>{const t=r.colors.text.dark,c=r.colors.background.light;switch(e){case"info":return{text:o?r.colors.info.dark:t,background:o?c:r.colors.info.lighter};case"success":return{text:o?r.colors.success.dark:t,background:o?c:r.colors.success.lighter};case"warning":return{text:o?r.colors.warning.dark:t,background:o?c:r.colors.warning.lighter};case"error":return{text:o?r.colors.error.dark:t,background:o?c:r.colors.error.lighter};case"text":default:return{text:o?r.colors.text.light:t,background:o?r.colors.background.dark:c}}},w=e=>{switch(e){case"success":return n.createElement(C,null);case"warning":return n.createElement(E,null);case"error":return n.createElement(I,null);case"info":case"text":default:return n.createElement(b,null)}},$=s.div`
+  ${({isDeleted:e})=>e&&`
       opacity: 0;
       transition: opacity 0.3s;
     `}
 `,W=s.div`
-  display: ${({fullWidth:r})=>r?"flex":"inline-flex"};
-  ${({fullWidth:r})=>r&&"justify-content: space-between;"}
+  display: ${({fullWidth:e})=>e?"flex":"inline-flex"};
+  ${({fullWidth:e})=>e&&"justify-content: space-between;"}
   align-items: center;
   padding: 0 1.5rem;
-  box-shadow: ${({theme:r})=>r.elevations.elevation2};
+  box-shadow: ${({theme:e})=>e.elevations.elevation2};
 
-  ${({theme:r,messageType:o,inverted:e})=>{const{text:t,background:c}=E(o,e,r);return`
+  ${({textCenter:e})=>e&&`
+      justify-content: center;
+    `}
+
+  ${({theme:e,messageType:o,inverted:r})=>{const{text:t,background:c}=j(o,r,e);return`
       color: ${t};
       background-color: ${c};
     `}}
-`,$=s.div`
+`,h=s.div`
   display: flex;
-`,h=s(k)`
+`,T=s(x)`
   padding: 0.75rem 0;
   margin: 0;
-`,T=s.span`
+`,D=s.span`
   display: flex;
   align-items: center;
-  margin-right: 1rem;
+  margin-right: 0.5rem;
   font-size: 1.5rem;
-`,D=s.span`
+`,R=s.span`
   display: flex;
   align-items: center;
   margin-left: 1rem;
   font-size: 2.5rem;
   cursor: pointer;
   }
-`,R=({children:r,type:o,withIcon:e=!1,isDeletable:t=!1,fullWidth:c=!1,inverted:l=!1,...i})=>{const a=f(null),[u,p]=d(!1),g=m=>{m.stopPropagation(),p(!0),setTimeout(()=>{a.current&&a.current.remove()},300)};return n.createElement(w,{isDeleted:u},n.createElement(W,{messageType:o,fullWidth:c,inverted:l,role:"alert",ref:a,...i},n.createElement($,null,e&&n.createElement(T,null,j(o)),n.createElement(h,null,r)),t&&n.createElement(D,{onClick:g,"aria-label":"Close"},n.createElement(C,null))))};export{R as default};
+`,A=({children:e,type:o,withIcon:r=!1,isDeletable:t=!1,fullWidth:c=!1,inverted:l=!1,textCenter:i=!1,...u})=>{const a=d(null),[p,g]=k(!1),m=f=>{f.stopPropagation(),g(!0),setTimeout(()=>{a.current&&a.current.remove()},300)};return n.createElement($,{isDeleted:p},n.createElement(W,{messageType:o,fullWidth:c,inverted:l,textCenter:i,role:"alert",ref:a,...u},n.createElement(h,null,r&&n.createElement(D,null,w(o)),n.createElement(T,null,e)),t&&n.createElement(R,{onClick:m,"aria-label":"Close"},n.createElement(y,null))))};export{A as default};

package/esm/components/Spinner/index.js

@@ -1,14 +1,14 @@
-import i from"react";import s,{keyframes as m}from"styled-components";import d from"../../theme.js";const u=e=>{const r={slow:"2s",default:"1s",fast:"0.5s"};return r[e]||r.default},t=e=>{const r={smaller:1,small:2,regular:3,large:4};return typeof e=="number"?e:r[e]||r.regular},f=m`
+import n from"react";import s,{keyframes as m}from"styled-components";import d from"../../theme.js";const u=e=>{const r={slow:"2s",default:"1s",fast:"0.5s"};return r[e]||r.default},t=e=>{const r={smaller:1,small:2,regular:3,large:4};return typeof e=="number"?e:r[e]||r.regular},f=m`
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
-`,c=s.div`
+`,g=s.div`
   display: inline-block;
   border-radius: 50%;
-  border-top: ${({theme:e,color:r,size:a})=>{var o,l,n;return`${t(a)/10}em solid ${(n=(l=(o=e.colors)==null?void 0:o[r])==null?void 0:l.main)!=null?n:r}`}};
+  border-top: ${({theme:e,color:r,size:o})=>{var a,l,i;return`${t(o)/10}em solid ${(i=(l=(a=e.colors)==null?void 0:a[r])==null?void 0:l.main)!=null?i:r}`}};
   border-bottom: ${({size:e})=>`${t(e)/10}em solid rgba(0, 0, 0, 0.1);`};
   border-right: ${({size:e})=>`${t(e)/10}em solid rgba(0, 0, 0, 0.1);`};
   border-left: ${({size:e})=>`${t(e)/10}em solid rgba(0, 0, 0, 0.1);`};
@@ -16,4 +16,4 @@ import i from"react";import s,{keyframes as m}from"styled-components";import d f
   height: ${({size:e})=>t(e)}em;
   animation: ${f} ${({speed:e})=>u(e)} infinite linear;
   will-change: transform;
-`,g=({size:e="regular",color:r="primary",speed:a="default",...o})=>i.createElement(c,{...o,role:"status","aria-live":"polite","aria-busy":"true",size:e,speed:a,color:r,theme:d});export{g as default};
+`,b=({size:e="regular",color:r="primary",speed:o="default",...a})=>n.createElement(g,{...a,"aria-label":"loading",role:"status","aria-live":"polite","aria-busy":"true",size:e,speed:o,color:r,theme:d});export{b as default};

package/esm/components/Tabs/Tabs.js

@@ -12,7 +12,7 @@ import i,{Children as R,useState as k,useRef as I}from"react";import $ from"./Ta
   flex-wrap: wrap;
   border-bottom: 3px solid ${({theme:o})=>o.colors.gray.light6};
 
-  ${B("mobileL")} {
+  ${B("mobileM")} {
     flex-direction: row;
     justify-content: ${({justify:o})=>o};
   }

package/package.json

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

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

@@ -7,6 +7,7 @@ export declare type Props = {
     isDeletable?: boolean;
     fullWidth?: boolean;
     inverted?: boolean;
+    textCenter?: boolean;
 } & ComponentPropsWithoutRef<'div'>;
-declare const Message: ({ children, type, withIcon, isDeletable, fullWidth, inverted, ...props }: Props) => JSX.Element;
+declare const Message: ({ children, type, withIcon, isDeletable, fullWidth, inverted, textCenter, ...props }: Props) => JSX.Element;
 export default Message;

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

@@ -1,9 +1,11 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { Color, Size, Speed } from '../../Types';
-export interface SpinnerProps extends ComponentPropsWithoutRef<'div'> {
-    size?: Size | number;
-    color?: Color | string;
-    speed?: Speed;
+interface SpinnerBaseProps {
+    color: Color | string;
+    size: Size | number;
+    speed: Speed;
+}
+export interface SpinnerProps extends ComponentPropsWithoutRef<'div'>, Partial<SpinnerBaseProps> {
 }
 declare const Spinner: ({ size, color, speed, ...props }: SpinnerProps) => JSX.Element;
 export default Spinner;