@kvdbil/components 9.0.1 → 9.1.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "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;