diginet-core-ui 1.3.80 → 1.3.81

package/components/popup/v2/index.js

@@ -1,61 +1,60 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useEffect, useRef, useState, forwardRef, useImperativeHandle, Fragment, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import useDelayUnmount from "../../../utils/useDelayUnmount";
-import Icon from "../../../icons";
-import { Button, ButtonIcon, Typography } from "../../";
+import { css, jsx } from '@emotion/core';
+import { Button, ButtonIcon, Icon, Typography } from "../..";
 import { getGlobal } from "../../../global";
-import { hexToRGBA } from "../../../styles/color-helper";
-import { capitalize } from "../../../utils";
+import PropTypes from 'prop-types';
+import { forwardRef, Fragment, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { animations } from "../../../styles/animation";
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, cursorPointer, displayBlock, ellipsis, flexCol, flexRow, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../../styles/general";
-import theme from "../../../theme/settings";
+import { hexToRGBA } from "../../../styles/color-helper";
+import { alignCenter, border, borderBox, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, ellipsis, flexCol, flexRow, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { classNames, refType as ref, useDelayUnmount } from "../../../utils";
 const {
   colors: {
     system: {
-      white
+      white: systemWhite
     },
     semantic: {
-      success,
-      warning,
-      danger,
-      info
+      success: semanticSuccess,
+      warning: semanticWarning,
+      danger: semanticDanger,
+      info: semanticInfo
     },
     fill: {
-      'scrollbar-tabbar': scrollbar,
-      hover
+      'scrollbar-tabbar': fillScrollbarTabbar,
+      hover: fillHover
     }
   },
   spacing,
   zIndex: zIndexCORE
-} = theme;
-const colorMap = new Map([['yesno', info], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+} = useTheme();
+const colorMap = new Map([['yesno', semanticInfo], ['success', semanticSuccess], ['warning', semanticWarning], ['danger', semanticDanger], ['info', semanticInfo]]);
 const titleMap = new Map([['yesno', 'notify'], ['success', 'confirm'], ['warning', 'warning'], ['danger', 'error'], ['info', 'notify']]);
 const iconMap = new Map([['yesno', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'Failed'], ['info', 'Info']]);
 const fadeInDown = animations.fadeInDown;
 const fadeOutUp = animations.fadeOutUp;
 const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  open,
-  type,
-  icon,
-  title,
-  subtitle,
-  description,
-  pressESCToClose,
+  action = {},
+  cancelProps,
   className,
-  style,
+  confirmProps,
+  description,
+  icon,
+  noText,
+  onCancel,
   onClose,
   onConfirm,
-  onCancel,
-  confirmProps,
-  cancelProps,
-  width,
+  open,
+  pressESCToClose,
+  style,
+  subtitle,
+  title,
   top,
+  type,
+  width,
   yesText,
-  noText,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -73,7 +72,6 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const onShowPopup = (options, cb) => {
     if (options && typeof options === 'object' && Object.keys(options).length) {
-      var _newProps$title;
       const newProps = {
         type: options.type !== undefined ? options.type : type,
         title: options.title !== undefined ? options.title : title,
@@ -86,19 +84,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         onCancel: cb ? () => cb(false) : options.onCancel !== undefined ? options.onCancel : onCancel,
         onConfirm: cb ? () => cb(true) : options.onConfirm !== undefined ? options.onConfirm : onConfirm
       };
-      const popup = jsx(Fragment, null, jsx("div", {
-        className: 'DGN-UI-Popup-Header ' + 'DGN-' + capitalize(newProps.type)
-      }, jsx(Typography, {
-        className: 'DGN-UI-Popup-Header-Title',
-        type: 'h3',
-        color: 'inherit'
-      }, (_newProps$title = newProps.title) !== null && _newProps$title !== void 0 ? _newProps$title : getGlobal(titleMap.get(newProps.type))), jsx(ButtonIcon, {
-        circular: true,
-        viewType: 'text',
-        color: type === 'yesno' ? 'info' : type,
-        name: 'Close',
-        onClick: () => onClosePopup('isClose')
-      })), jsx("div", {
+      const popup = jsx(Fragment, null, PopupHeaderView(newProps.title, newProps.type), jsx("div", {
         className: 'DGN-UI-Popup-Body'
       }, newProps.icon !== false && jsx("div", {
         className: 'DGN-UI-Popup-Body-Icon'
@@ -111,21 +97,7 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         className: 'DGN-UI-Popup-Body-Description'
       }, jsx(Typography, {
         type: 'p2'
-      }, newProps.description))), (newProps.onConfirm || newProps.onCancel || newProps.type === 'yesno') && jsx("div", {
-        className: 'DGN-UI-Popup-Action'
-      }, (newProps.onConfirm || newProps.type === 'yesno') && jsx(Button, {
-        viewType: 'filled',
-        label: newProps.yesText || getGlobal('ok').toUpperCase(),
-        color: newProps.type,
-        onClick: newProps.onConfirm,
-        ...newProps.confirmProps
-      }), (newProps.onCancel || newProps.type === 'yesno') && jsx(Button, {
-        viewType: 'outlined',
-        label: newProps.noText || getGlobal('cancel').toUpperCase(),
-        color: newProps.type,
-        onClick: newProps.onCancel,
-        ...newProps.cancelProps
-      })));
+      }, newProps.description))), PopupActionView(newProps.onConfirm, newProps.confirmProps, newProps.onCancel, newProps.cancelProps, newProps.type, newProps.yesText, newProps.noText));
       setCustom(popup);
     } else {
       setCustom(false);
@@ -175,7 +147,8 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const currentRef = ref.current || {};
     const _instance = {
       show: onShowPopup,
-      close: onClosePopup
+      close: onClosePopup,
+      ...action
     }; // methods
     _instance.__proto__ = {}; // hidden methods
     currentRef.instance = _instance;
@@ -183,77 +156,86 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.close = onClosePopup;
     return currentRef;
   });
+  const PopupHeaderView = (title, type) => {
+    return jsx("div", {
+      className: 'DGN-UI-Popup-Header'
+    }, jsx(Typography, {
+      className: 'DGN-UI-Popup-Header-Title',
+      type: 'h3',
+      color: 'inherit'
+    }, title !== null && title !== void 0 ? title : getGlobal(titleMap.get(type))), jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      color: type === 'yesno' ? 'info' : type,
+      name: 'Close',
+      onClick: () => onClosePopup('isClose')
+    }));
+  };
+  const PopupBodyView = (icon, type, subtitle, description) => {
+    return jsx("div", {
+      className: 'DGN-UI-Popup-Body'
+    }, icon !== false && jsx("div", {
+      className: 'DGN-UI-Popup-Body-Icon'
+    }, jsx(Icon, {
+      name: icon === true ? iconMap.get(type) : icon,
+      width: 40,
+      height: 40,
+      color: colorMap.get(type)
+    })), jsx("div", {
+      className: 'DGN-UI-Popup-Body-Description'
+    }, jsx(Typography, {
+      type: 'p2'
+    }, subtitle && jsx(Typography, {
+      className: 'DGN-UI-Popup-Body-Subtitle',
+      fullWidth: true
+    }, subtitle), jsx(Typography, {
+      ref: onRefChange,
+      type: 'p2',
+      className: 'DGN-UI-Popup-Body-Detail'
+    }, description), (subtitle && descriptionLines > 1 || descriptionLines > 3) && jsx("span", {
+      className: 'DGN-More-Action',
+      onClick: () => setShowMoreDescription(!showMoreDescription)
+    }, getGlobal(showMoreDescription ? 'showLess' : 'showMore')))));
+  };
+  const PopupActionView = (onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText) => {
+    return onConfirm || onCancel || type === 'yesno' ? jsx("div", {
+      className: 'DGN-UI-Popup-Action'
+    }, onConfirm || type === 'yesno' ? jsx(Button, {
+      viewType: 'filled',
+      label: yesText || getGlobal('ok').toUpperCase(),
+      color: type === 'yesno' ? 'info' : type,
+      onClick: () => {
+        onClosePopup('isConfirm');
+        onConfirm && onConfirm();
+      },
+      ...confirmProps
+    }) : null, onCancel || type === 'yesno' ? jsx(Button, {
+      viewType: 'outlined',
+      label: noText || getGlobal('cancel').toUpperCase(),
+      color: type === 'yesno' ? 'info' : type,
+      onClick: () => {
+        onClosePopup('isCancel');
+        onCancel && onCancel();
+      },
+      ...cancelProps
+    }) : null) : null;
+  };
   return showPopup && /*#__PURE__*/createPortal(jsx("div", {
     css: _PopupRootCSS,
     ref: ref,
     style: style,
-    className: ['DGN-UI-Portal DGN-UI-Popup-Portal', className].join(' ').trim().replace(/\s+/g, ' ')
+    className: classNames('DGN-UI-Portal DGN-UI-Popup-Portal', className)
   }, jsx("div", {
     className: `DGN-UI-Popup ${openState ? 'DGN-Show' : 'DGN-Hide'}`,
     ...props
-  }, custom ? custom : jsx(Fragment, null, jsx("div", {
-    className: 'DGN-UI-Popup-Header ' + 'DGN-' + capitalize(type)
-  }, jsx(Typography, {
-    className: 'DGN-UI-Popup-Header-Title',
-    type: 'h3',
-    color: 'inherit'
-  }, title !== null && title !== void 0 ? title : getGlobal(titleMap.get(type))), jsx(ButtonIcon, {
-    circular: true,
-    viewType: 'text',
-    color: type === 'yesno' ? 'info' : type,
-    name: 'Close',
-    onClick: () => onClosePopup('isClose')
-  })), jsx("div", {
-    className: 'DGN-UI-Popup-Body'
-  }, icon !== false && jsx("div", {
-    className: 'DGN-UI-Popup-Body-Icon'
-  }, jsx(Icon, {
-    name: icon === true ? iconMap.get(type) : icon,
-    width: 40,
-    height: 40,
-    color: colorMap.get(type)
-  })), jsx("div", {
-    className: 'DGN-UI-Popup-Body-Description'
-  }, jsx(Typography, {
-    type: 'p2'
-  }, subtitle && jsx(Typography, {
-    className: 'DGN-UI-Popup-Body-Subtitle',
-    fullWidth: true
-  }, subtitle), jsx(Typography, {
-    ref: onRefChange,
-    type: 'p2',
-    className: 'DGN-UI-Popup-Body-Detail'
-  }, description), (subtitle && descriptionLines > 1 || descriptionLines > 3) && jsx("span", {
-    className: 'DGN-More-Action',
-    onClick: () => setShowMoreDescription(!showMoreDescription)
-  }, getGlobal(showMoreDescription ? 'showLess' : 'showMore'))))), (onConfirm || onCancel || type === 'yesno') && jsx("div", {
-    className: 'DGN-UI-Popup-Action'
-  }, (onConfirm || type === 'yesno') && jsx(Button, {
-    viewType: 'filled',
-    label: yesText || getGlobal('ok'),
-    color: type === 'yesno' ? 'info' : type,
-    onClick: () => {
-      onClosePopup('isConfirm');
-      onConfirm && onConfirm();
-    },
-    ...confirmProps
-  }), (onCancel || type === 'yesno') && jsx(Button, {
-    viewType: 'outlined',
-    label: noText || getGlobal('cancel'),
-    color: type === 'yesno' ? 'info' : type,
-    onClick: () => {
-      onClosePopup('isCancel');
-      onCancel && onCancel();
-    },
-    ...cancelProps
-  }))))), document.body);
+  }, custom ? custom : jsx(Fragment, null, PopupHeaderView(title, type), PopupBodyView(icon, type, subtitle, description), PopupActionView(onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText)))), document.body);
 }));
 const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescription, descriptionLines) => css`
     ${flexRow};
     ${positionFixed};
     ${justifyCenter};
     ${breakWord};
-    ${parseWidthHeight('100%')}
+    ${parseWidthHeight('100%')};
     top: 0;
     left: 0;
     inset: 0;
@@ -263,12 +245,10 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
         ${flexCol};
         ${borderRadius4px};
         ${borderBox};
-        ${parseWidth(width)};
-        height: fit-content;
-        max-width: 80%;
-        max-height: 80%;
+        ${parseWidthHeight(width, 'fit-content')};
+        ${parseMaxWidthHeight('80%')};
         margin: ${isNaN(top) ? top : top + 'px'} auto auto;
-        background-color: ${white};
+        background-color: ${systemWhite};
         box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
         &.DGN-Show {
             animation: ${fadeInDown} 0.2s ease;
@@ -280,13 +260,13 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
         .DGN-UI-Popup-Header {
             ${flexRow};
             ${alignCenter};
-            min-height: 40px;
+            ${parseMinHeight(40)};
             padding: ${spacing([0, 2, 0, 4])};
             border-radius: 4px 4px 0px 0px;
             .DGN-UI-Popup-Header-Title {
                 ${flexRow};
                 ${ellipsis};
-                width: calc(100% - 24px);
+                ${parseWidth('calc(100% - 24px)')};
             }
             color: ${colorMap.get(type)};
             background-color: ${hexToRGBA(colorMap.get(type), 0.15)};
@@ -300,34 +280,34 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
             &::-webkit-scrollbar {
                 ${borderRadius4px};
                 ${parseWidth(24)};
-                background-color: ${white} !important;
+                background-color: ${systemWhite} !important;
             }
             &::-webkit-scrollbar-thumb {
                 ${border(8, 'transparent')};
                 border-radius: 24px;
                 mix-blend-mode: normal;
-                background-color: ${scrollbar} !important;
+                background-color: ${fillScrollbarTabbar} !important;
                 background-clip: content-box;
             }
             &::-webkit-scrollbar-thumb:hover {
                 ${border(8, 'transparent')};
                 border-radius: 24px;
                 mix-blend-mode: normal;
-                background-color: ${hover} !important;
+                background-color: ${fillHover} !important;
                 background-clip: content-box;
             }
             .DGN-UI-Popup-Body-Icon {
                 ${displayBlock};
+                ${borderRadius50};
                 ${parseWidth(40)};
                 margin-right: ${spacing([4])};
-                border-radius: 50%;
             }
             .DGN-UI-Popup-Body-Description {
                 ${flexRow};
                 ${positionRelative};
                 ${alignCenter};
-                min-height: 40px;
-                height: max-content;
+                ${parseMinHeight(40)};
+                ${parseHeight('max-content')};
                 .DGN-UI-Popup-Body-Subtitle {
                     margin-bottom: ${(description === null || description === void 0 ? void 0 : description.length) > 0 ? spacing([2]) : spacing([0])};
                 }
@@ -345,7 +325,7 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
                     margin-top: ${spacing([4])};
                     margin-bottom: ${type === 'yesno' ? spacing([0]) : spacing([2])};
                     text-decoration: underline;
-                    color: ${info};
+                    color: ${semanticInfo};
                 }
             }
         }
@@ -354,8 +334,8 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
             ${justifyEnd};
             padding: ${spacing([2, 4, 4, 4])};
             .DGN-UI-Button {
+                ${parseMinWidth(80)};
                 margin: 0;
-                min-width: 80px;
                 &.filled {
                     margin-right: ${spacing([2])};
                 }
@@ -364,14 +344,14 @@ const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescripti
     }
 `;
 Popup.defaultProps = {
+  className: '',
+  icon: true,
   open: false,
   pressESCToClose: false,
-  icon: true,
-  width: 480,
+  style: {},
   top: 56,
   type: 'info',
-  className: '',
-  style: {}
+  width: 480
 };
 Popup.propTypes = {
   /** If `true`, the component is shown. */
@@ -383,7 +363,7 @@ Popup.propTypes = {
   /** [Props](https://core.diginet.com.vn/ui/?path=/story/button) applied to the confirm `Button`. */
   confirmProps: PropTypes.object,
   /** Details content of the component. */
-  description: PropTypes.string,
+  description: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic) display before content. */
   icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Label of cancel button. */
@@ -422,8 +402,6 @@ Popup.propTypes = {
    *      * Callback fired after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options
    * * close(): Close popup
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  reference: ref
 };
 export default Popup;

package/components/progress/circular.js

@@ -254,7 +254,7 @@ const CircleMainCSS = color => css`
 const CircleMainDeterminateCSS = (circumference, percent, directionAngle, duration) => css`
     stroke-dasharray: ${`${circumference} ${circumference}`};
     stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
-    transform: rotate(${directionAngle}deg);
+    // transform: rotate(${directionAngle}deg);
     transform-origin: center;
     transition: stroke-dashoffset ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
 `;

package/global/index.js

@@ -16,7 +16,7 @@ const globalObject = {
     yes: 'Có',
     warning: 'Cảnh Báo',
     // attachment
-    dropFileHere: 'Kéo và thả tập tin vào đây',
+    dropFileHere: 'Kéo và thả tập tin đính kèm vào đây',
     deleteNotifyText: 'Bạn có chắc muốn xóa (những) đính kèm này?',
     attachText: 'Đính kèm',
     errorDefault: {

package/icons/basic.js

@@ -2191,6 +2191,34 @@ export const FastRewind = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Feedback = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20 2H4C2.9 2 2.01 2.9 2.01 4L2 22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM13 14H11V12H13V14ZM11 10H13V6H11V10Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 20,
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M18 0H2C0.9 0 0.01 0.9 0.01 2L0 20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM11 12H9V10H11V12ZM9 8H11V4H9V8Z",
+    fill: colors[color] || color
+  }));
+});
 export const Filter = /*#__PURE__*/memo(({
   width,
   height,
@@ -3773,6 +3801,30 @@ export const NearMe = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Newspaper = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M22 3L20.33 4.67L18.67 3L17 4.67L15.33 3L13.67 4.67L12 3L10.33 4.67L8.67 3L7 4.67L5.33 3L3.67 4.67L2 3V19C2 20.1 2.9 21 4 21H20C21.1 21 22 20.1 22 19V3ZM11 19H4V13H11V19ZM20 19H13V17H20V19ZM20 15H13V13H20V15ZM20 11H4V8H20V11Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 18,
+    viewBox: "0 0 20 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M20 0L18.33 1.67L16.67 0L15 1.67L13.33 0L11.67 1.67L10 0L8.33 1.67L6.67 0L5 1.67L3.33 0L1.67 1.67L0 0V16C0 17.1 0.9 18 2 18H18C19.1 18 20 17.1 20 16V0ZM9 16H2V10H9V16ZM18 16H11V14H18V16ZM18 12H11V10H18V12ZM18 8H2V5H18V8Z",
+    fill: colors[color] || color
+  }));
+});
 export const Ninedot = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.80",
+  "version": "1.3.81",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,16 @@ npm test
 ```
 
 ## Changelog
+## 1.3.81
+- \[Added\]: Icon – Feedback, Newspaper
+- \[Changed\]: Button – Add prop href, urlParams
+- \[Changed\]: Divider – Allow using CORE colors
+- \[Fixed\]: Attachment – Fix callback return attached items not file type; Optimize code
+- \[Fixed\]: PopupV2 – Fix warning prop description
+- \[Fixed\]: Popover – Fix backdrop scroll when show popover
+- \[Fixed\]: DateRangePicker – Fix cannot click end icon
+- \[Fixed\]: CircularProgress – Temporary fix transform rotate inside flex column
+
 ## 1.3.80
 - \[Changed\]: ButtonMore – Update Button More with new design
 - \[Changed\]: BABEL – Add babel-plugin-module-resolver

package/components/divider/style.js

@@ -1,12 +0,0 @@
-export default ((width, height) => ({
-  vertical: `
-        width: ${isNaN(width) ? width : width + 'px'};
-        height: 100%;
-        margin: auto 5px;
-    `,
-  horizontal: `
-        width: 100%;
-        height: ${isNaN(height) ? height : height + 'px'};
-        margin: 5px auto;
-    `
-}));