diginet-core-ui 1.3.33 → 1.3.34

package/components/form-control/dropdown-box/index.js

@@ -132,7 +132,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClickOutsideOfInput = event => {
-    if ((!ref.current || !ref.current.contains(event.target)) && (!dropdownBoxRef.current || !dropdownBoxRef.current.contains(event.target))) {
+    if (ref.current && !ref.current.contains(event.target) && dropdownBoxRef.current && !dropdownBoxRef.current.contains(event.target)) {
       closeDropdownBox();
     }
   };
@@ -157,7 +157,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       dropdownBoxRef.current.style.opacity = 1; // window.addEventListener('resize', customizeWidthDropdown);
       // window.addEventListener('scroll', updatePositionDropdown);
 
-      document.addEventListener('click', onClickOutsideOfInput);
+      document.addEventListener('mousedown', onClickOutsideOfInput);
       document.addEventListener('keydown', pressESCHandler);
       !!onOpened && onOpened(ref.current);
     }, 10);
@@ -181,7 +181,7 @@ const DropdownBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       //     inputBaseRef.current.classList.remove('dropdown-focus');
       // }
 
-      document.removeEventListener('click', onClickOutsideOfInput);
+      document.removeEventListener('mousedown', onClickOutsideOfInput);
       timing[unique + 'Box'] = setTimeout(() => {
         clearTimeout(timing[unique + 'Box']);
         timing[unique + 'Box'] = null;

package/components/form-control/toggle/index.js

@@ -26,7 +26,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     inputRef = useRef(null);
   }
 
-  const [checkedState, setCheckedState] = useState(checked || defaultChecked);
+  const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
 
   if (size === 'small') {
     height = 10;
@@ -147,7 +147,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const handleChange = () => {
     if (disabled) return;
-    setChecked(checked !== undefined ? checked : !checkedState);
+    setCheckedState(checked !== undefined ? Boolean(checked) : !checkedState);
     const e = {
       value: !checkedState,
       target: { ...inputRef.current,
@@ -170,15 +170,8 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     };
   }, [disabled, onChange]);
-
-  const setChecked = check => {
-    if (typeof check === 'boolean') {
-      setCheckedState(check);
-    }
-  };
-
   useEffect(() => {
-    if (checked !== undefined) setChecked(checked);
+    if (checked !== undefined) setCheckedState(Boolean(checked));
   }, [checked]);
   return useMemo(() => jsx("div", {
     id: 'DGN-Core-Toggle-' + (id ? id : idDefault),
@@ -218,10 +211,10 @@ Toggle.propTypes = {
   disabled: PropTypes.bool,
 
   /** If `true`, the component is defaultChecked. */
-  defaultChecked: PropTypes.bool,
+  defaultChecked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
 
   /** If `true`, the component is checked. */
-  checked: PropTypes.bool,
+  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
 
   /** the size options default and small */
   size: PropTypes.string,

package/components/typography/index.js

@@ -1,13 +1,43 @@
 /** @jsxRuntime classic */
-import { memo, useRef, forwardRef } from 'react';
+import { memo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import { renderHTML } from '../../utils';
-import { useTheme } from '../../theme';
 import { typography } from '../../styles/typography';
+import { breakWord, displayBlock, displayInlineBlock, overflowHidden, positionRelative, textCapitalize, textCenter, textUppercase } from '../../styles/general';
+import { color as colors } from '../../styles/colors';
 const {
-  colors
-} = useTheme();
+  title1,
+  title2,
+  title3,
+  title4,
+  heading1,
+  heading2,
+  heading3,
+  heading4,
+  heading5,
+  heading6,
+  paragraph1,
+  paragraph2,
+  paragraph3
+} = typography;
+const {
+  system: {
+    active,
+    rest
+  },
+  semantic: {
+    success,
+    warning,
+    danger,
+    info
+  },
+  text: {
+    main
+  }
+} = colors;
+const typographyMap = new Map([['t1', title1], ['t2', title2], ['t3', title3], ['t4', title4], ['h1', heading1], ['h2', heading2], ['h3', heading3], ['h4', heading4], ['h5', heading5], ['h6', heading6], ['p1', paragraph1], ['p2', paragraph2], ['p3', paragraph3]]);
+const colorMap = new Map([['default', main], ['primary', active], ['secondary', rest], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
 const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   color,
@@ -17,42 +47,54 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   fullWidth,
   mapping,
   className,
+  lineClamp,
   children,
   ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
-  const typographyMap = new Map([['title1', typography.title1], ['title2', typography.title2], ['title3', typography.title3], ['title4', typography.title4], ['h1', typography.heading1], ['h2', typography.heading2], ['h3', typography.heading3], ['h4', typography.heading4], ['h5', typography.heading5], ['h6', typography.heading6], ['p1', typography.paragraph1], ['p2', typography.paragraph2], ['p3', typography.paragraph3]]);
+}, reference) => {
+  const typographyRef = useRef(null);
   const TextRoot = css`
-        display: inline-block;
-        position: relative;
-        color: ${colors[color] || color};
-        ${typography.paragraph1};
-        max-width: max-content;
-        word-break: break-word;
-        white-space: normal;
-        &.DGN-Typography-${type} {
-            ${typographyMap.get(type)};
-        }
-        &.DGN-Typography-center {
-            text-align: center;
-        }
-        &.DGN-Typography-fullWidth {
-            display: block;
-            max-width: initial;
-        }
-        &.DGN-Typography-Uppercase {
-            text-transform: uppercase;
-        }
-        &.DGN-Typography-Capitalize {
-            text-transform: capitalize;
-        }
-    `;
-  const classNames = ['DGN-UI-Typography', center ? 'DGN-Typography-center' : '', fullWidth ? 'DGN-Typography-fullWidth' : '', `DGN-Typography-${type}`, uppercase ? `DGN-Typography-Uppercase` : capitalize ? 'DGN-Typography-Capitalize' : '', className].join(' ').trim().replace(/\s+/g, ' ');
+                ${displayInlineBlock}
+                ${positionRelative}
+        ${breakWord}
+        ${paragraph1};
+                white-space: normal;
+                color: ${colorMap.get(color) || colors[color] || color};
+                max-width: max-content;
+                &.DGN-Typography-${type} {
+                    ${typographyMap.get(type.charAt(0) + type.slice(-1))}; //Get first and last character of type
+                }
+                &.DGN-Typography-center {
+                    ${textCenter}
+                }
+                &.DGN-Typography-fullWidth {
+                    ${displayBlock}
+                    max-width: initial;
+                }
+                &.DGN-Typography-Uppercase {
+                    ${textUppercase}
+                }
+                &.DGN-Typography-Capitalize {
+                    ${textCapitalize}
+                }
+                &.DGN-Typography-Clamp {
+                    ${overflowHidden}
+                    display: -webkit-box;
+                    -webkit-line-clamp: ${lineClamp};
+                    -webkit-box-orient: vertical;
+                }
+            `;
+  useImperativeHandle(reference, () => {
+    const currentRef = typographyRef.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  const classNames = ['DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', lineClamp && 'DGN-Typography-Clamp', className].join(' ').trim().replace(/\s+/g, ' ');
   return renderHTML(Array.isArray(children) && !children.some(node => node && String(node.$$typeof) === 'Symbol(react.element)') ? children.join('') : children, mapping, {
-    ref,
+    ref: typographyRef,
     css: TextRoot,
     className: classNames,
     ...props
@@ -66,19 +108,19 @@ Typography.defaultProps = {
   mapping: 'span',
   className: ''
 };
-/** type of text<br/>
- * h1: Title <br/>
- * h2: Header Popup <br/>
- * h3: Header popup <br/>
- * h4: Button, Tab, Title group <br/>
- * h5: Label column, Title group <br/>
- * h6: Label form <br/>
- * p1: Body text <br/>
- * p2: Body text <br/>
- * p3: Notice, Tooltip <br/>
+/** type of text<br/>
+ * h1: Title <br/>
+ * h2: Header Popup <br/>
+ * h3: Header popup <br/>
+ * h4: Button, Tab, Title group <br/>
+ * h5: Label column, Title group <br/>
+ * h6: Label form <br/>
+ * p1: Body text <br/>
+ * p2: Body text <br/>
+ * p3: Notice, Tooltip <br/>
  */
 
-export const arrTypeTypography = ['title1', 'title2', 'title3', 'title4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3'];
+export const arrTypeTypography = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 Typography.propTypes = {
   type: PropTypes.oneOf(arrTypeTypography),
 
@@ -100,6 +142,9 @@ Typography.propTypes = {
   /** text-transform is capitalize if true (and uppercase is false) */
   capitalize: PropTypes.bool,
 
+  /** The line-clamp property truncates text at a specific number of lines. */
+  lineClamp: PropTypes.number,
+
   /** allows maximum screen width if true */
   fullWidth: PropTypes.bool,
 

package/icons/basic.js

@@ -3862,6 +3862,52 @@ export const PaperView = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const PaperZoom = /*#__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: "M18.5763 17.5472H18.0343L17.8422 17.3619C18.5146 16.5798 18.9194 15.5643 18.9194 14.4597C18.9194 11.9966 16.9228 10 14.4597 10C11.9966 10 10 11.9966 10 14.4597C10 16.9228 11.9966 18.9194 14.4597 18.9194C15.5643 18.9194 16.5798 18.5146 17.3619 17.8422L17.5472 18.0343V18.5763L20.9777 22L22 20.9777L18.5763 17.5472ZM14.4597 17.5472C12.7513 17.5472 11.3722 16.1681 11.3722 14.4597C11.3722 12.7513 12.7513 11.3722 14.4597 11.3722C16.1681 11.3722 17.5472 12.7513 17.5472 14.4597C17.5472 16.1681 16.1681 17.5472 14.4597 17.5472ZM14.1166 14.1166V12.7444H14.8027V14.1166H16.175V14.8027H14.8027V16.175H14.1166V14.8027H12.7444V14.1166H14.1166Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17 4H5V20H17V19.443L18.6665 21.1062C18.3082 21.645 17.6956 22 17 22H5C3.89545 22 3 21.1046 3 20V4C3 2.89539 3.89545 2 5 2H17C18.1046 2 19 2.89539 19 4V11.4265C18.4951 10.6722 17.8073 10.0509 17 9.62573V4Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.3093 10H7V12H9.58411C9.98828 11.2004 10.5833 10.5138 11.3093 10Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 6H15V8H7V6Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 19,
+    height: height || 20,
+    viewBox: "0 0 19 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.5763 15.5472H15.0343L14.8422 15.3619C15.5146 14.5798 15.9194 13.5643 15.9194 12.4597C15.9194 9.99657 13.9228 8 11.4597 8C8.99657 8 7 9.99657 7 12.4597C7 14.9228 8.99657 16.9194 11.4597 16.9194C12.5643 16.9194 13.5798 16.5146 14.3619 15.8422L14.5472 16.0343V16.5763L17.9777 20L19 18.9777L15.5763 15.5472ZM11.4597 15.5472C9.75129 15.5472 8.37221 14.1681 8.37221 12.4597C8.37221 10.7513 9.75129 9.37221 11.4597 9.37221C13.1681 9.37221 14.5472 10.7513 14.5472 12.4597C14.5472 14.1681 13.1681 15.5472 11.4597 15.5472ZM11.1166 12.1166V10.7444H11.8027V12.1166H13.175V12.8027H11.8027V14.175H11.1166V12.8027H9.74443V12.1166H11.1166Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14 2H2V18H14V17.443L15.6665 19.1062C15.3082 19.645 14.6956 20 14 20H2C0.895447 20 0 19.1046 0 18V2C0 0.895386 0.895447 0 2 0H14C15.1046 0 16 0.895386 16 2V9.42651C15.4951 8.67224 14.8073 8.0509 14 7.62573V2Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8.30933 8H4V10H6.58411C6.98828 9.20044 7.58331 8.51379 8.30933 8Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4 4H12V6H4V4Z",
+    fill: colors[color] || color
+  }));
+});
 export const Pen = /*#__PURE__*/memo(({
   width,
   height,
@@ -5925,6 +5971,34 @@ export const ArrowUpFilled = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const ArrowSwapHoriz = /*#__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: "M17.01 5L21 9L17.01 13V10H10V8H17.01V5ZM3 15L6.99 11V14H14V16H6.99V19L3 15Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 14,
+    viewBox: "0 0 18 14",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.01 0L18 4L14.01 8V5H7V3H14.01V0ZM0 10L3.99 6V9H11V11H3.99V14L0 10Z",
+    fill: colors[color] || color
+  }));
+});
 export const BackFilled = /*#__PURE__*/memo(({
   width,
   height,

package/icons/effect.js

@@ -1,12 +1,14 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, useMemo, forwardRef } from 'react';
+import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
+import OptionWrapper from '../components/others/option-wrapper';
 import { color as colors } from '../styles/colors';
 import * as Icons from './basic';
 import { capitalize } from '../utils';
+import { alignCenter, borderBox, flexRow, justifyCenter, outlineNone, userSelectNone } from '../styles/general';
 const {
   system: {
     rest
@@ -24,30 +26,36 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   onClick,
   ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
-  const dgnIcon = css`
-        display: flex;
-        justify-content: center;
-        align-items: center;
+}, reference) => {
+  const ref = useRef(null);
+  const IconCss = css`
+        ${flexRow}
+        ${justifyCenter}
+        ${alignCenter}
+        ${borderBox}
+        ${outlineNone}
+        ${userSelectNone}
         width: max-content;
         height: max-content;
         min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
         min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
-        outline: none;
-        box-sizing: border-box;
-        user-select: none;
     `;
   const NotFoundIcon = css`
-        display: flex;
-        box-sizing: border-box;
+        ${flexRow}
+        ${borderBox}
         width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
         height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
         border: 1px dashed ${rest};
     `;
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     if (!name) return null;
     let node = null;
@@ -57,7 +65,7 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       node = jsx(IconComp, {
         width: width,
         height: height,
-        color: color,
+        color: colors[color] || color,
         viewBox: viewBox
       });
     } else {
@@ -69,7 +77,7 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("span", {
       className: 'DGN-UI-Icon ' + className,
       style: style,
-      css: dgnIcon,
+      css: IconCss,
       ref: ref,
       onClick: onClick,
       ...props
@@ -78,15 +86,16 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 Icon.defaultProps = {
   className: '',
-  color: rest,
-  viewBox: true
+  style: {},
+  color: 'dark6',
+  viewBox: true,
+  width: 24,
+  height: 24
 };
 Icon.propTypes = {
   /** name of icon in icons store */
   name: PropTypes.string.isRequired,
 
-  /** the width of icon */
-
   /** color of icon<br />
    * default: #7F828E
    */
@@ -108,6 +117,25 @@ Icon.propTypes = {
   viewBox: PropTypes.bool,
 
   /** have view box if true */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
+   */
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
-export default Icon;
+export { Icon };
+export default OptionWrapper(Icon);

package/package.json

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

package/readme.md

@@ -38,6 +38,27 @@ npm test
 ```
 
 ## Changelog
+## 1.3.34
+- \[Added\]: Icon - ArrowSwapHoriz, PaperZoom
+- \[Added\]: MenuIcon - ALL, D00, D09, D13, D15, D21, D25, D29, D38, D39, D51, D52, D77, D84, D89
+- \[Changed\]: Typography - Add case ellipsis, multiple lines
+- \[Changed\]: Badge - Phát triển lại component Badge
+- \[Changed\]: Typography - Add type options ( full & short)
+- \[Changed\]: ButtonIcon - Change UI color of viewType ghost (Design update)
+- \[Changed\]: Chip - startIcon, endIcon accept string as CORE icon
+- \[Changed\]: Dropdown - Allow use prop valueObjectDefault without prop onLoadMore
+- \[Changed\]: Icon - Allow using CORE colors, replace general css, add OptionWrapper
+- \[Changed\]: DropdownBox - Fix bug event onClickOutside
+- \[Fixed\]: Change css, typography, colors
+- \[Fixed\]: Avatar - Fix default svg viewBox
+- \[Fixed\]: ButtonIcon - Fix custom width height for viewType ghost
+- \[Fixed\]: ButtonIcon - Remove overflow hidden, fix Ripple when use circular ButtonIcon
+- \[Fixed\]: Button - Fix warning `ref` is not a prop
+- \[Fixed\]: Avatar - Fix actionIconWidth, actionIconHeight; Optimize code
+- \[Fixed\]: Toggle - Fix case value, defaultValue input is number 0,1
+- \[Fixed\]: ButtonIcon - Add min-width, min-height
+- \[Fixed\]: Dropdown - Fix bug cannot select data in editCellRender of DataGrid
+
 ## 1.3.33
 - \[Fixed\]: Dropdown - Fix show wrong when valueObjectDefault is empty object
 - \[Fixed\]: Button, ButtonIcon - Fix classname

package/styles/colors.js

@@ -104,7 +104,7 @@ export const warning4 = '#FFC53F';
 export const warning5 = '#FFAA00';
 export const warning6 = '#DB8A00';
 export const warning7 = '#B76D00';
-export const warning8 = '#B76D00';
+export const warning8 = '#935300';
 export const warning9 = '#7A4000'; //danger
 
 export const danger1 = '#FFDCD8';
@@ -210,7 +210,7 @@ export const color = {
   warning5: '#FFAA00',
   warning6: '#DB8A00',
   warning7: '#B76D00',
-  warning8: '#B76D00',
+  warning8: '#935300',
   warning9: '#7A4000',
   //danger
   danger1: '#FFDCD8',

package/styles/general.js

@@ -1,6 +1,6 @@
 import { css, jsx } from '@emotion/core';
-import { color } from "./colors";
-import { parseToPixel } from "./utils";
+import { color } from './colors';
+import { parseToPixel } from './utils';
 export const rootSpacing = 4;
 export const flexRow = css`
     display: flex;
@@ -98,6 +98,9 @@ export const pointerEventsNone = css`
 export const borderNone = css`
     border: none;
 `;
+export const displayNone = css`
+    display: none;
+`;
 export const textCenter = css`
     text-align: center;
 `;
@@ -112,4 +115,14 @@ export const noBorder = css`
 `;
 export const border = (withVl, colorVl) => css`
     border: ${parseToPixel(withVl)} solid ${colorVl || color.dark};
+`;
+export const parseWidth = width => css`
+    width: ${isNaN(width) ? width : width + 'px'};
+`;
+export const parseHeight = height => css`
+    height: ${isNaN(height) ? height : height + 'px'};
+`;
+export const parseWidthHeight = (width, height) => css`
+    width: ${isNaN(width) ? width : width + 'px'};
+    height: ${isNaN(height) ? height : height + 'px'};
 `;