diginet-core-ui 1.3.32-beta.5 → 1.3.33

package/components/button/icon.js

@@ -108,7 +108,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             ${justifyCenter}
             ${alignCenter}
         }
-        &.disabled {
+        &.button-icon--disabled {
             cursor: not-allowed !important;
             color: ${systemDisabled} !important;
             &.outlined {
@@ -123,7 +123,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 background-color: transparent !important;
             }
         }
-        &.loading {
+        &.button-icon--loading {
             ${pointerEventsNone}
         }
         &.${size} {
@@ -139,14 +139,14 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             &.default {
                 ${border(1, rest)}
                 color: ${rest};
-                &.loading,
+                &.button-icon--loading,
                 &:hover,
                 &:focus,
                 &:active {
                     color: ${colorHover};
                     border-color: ${colorHover};
                 }
-                &.loading {
+                &.button-icon--loading {
                     background-color: ${hexToRGBA(colorHover, alphaLoading)};
                 }
                 ${Object.keys(alphaArr).map(key => `&:${key} {
@@ -156,7 +156,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             &.${color} {
                 ${color !== 'default' && border(1, colorMap.get(color))}
                 color: ${colorMap.get(color)};
-                &.loading {
+                &.button-icon--loading {
                     background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
                 }
                 ${Object.keys(alphaArr).map(key => `&:${key} {
@@ -166,7 +166,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             &.custom-color {
                 ${border(1, color)}
                 color: ${color};
-                &.loading {
+                &.button-icon--loading {
                     background-color: ${hexToRGBA(color, alphaLoading)};
                 }
                 ${Object.keys(alphaArr).map(key => `&:${key} {
@@ -178,7 +178,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             ${borderNone}
             color: ${white};
             font-weight: bold;
-            &.loading,
+            &.button-icon--loading,
             &:hover,
             &:focus {
                 filter: brightness(0.85);
@@ -188,7 +188,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             }
             &.default {
                 background-color: ${rest};
-                &.loading,
+                &.button-icon--loading,
                 &:hover,
                 &:focus,
                 &:active {
@@ -212,7 +212,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 &:active {
                     color: ${colorHover};
                 }
-                &.loading {
+                &.button-icon--loading {
                     color: ${active};
                     background-color: ${hexToRGBA(colorHover, alphaLoading)};
                 }
@@ -222,7 +222,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             }
             &.${color} {
                 color: ${colorMap.get(color)};
-                &.loading {
+                &.button-icon--loading {
                     background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
                 }
                 ${Object.keys(alphaArr).map(key => `&:${key} {
@@ -231,7 +231,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             }
             &.custom-color {
                 color: ${color};
-                &.loading {
+                &.button-icon--loading {
                     background-color: ${hexToRGBA(color, alphaLoading)};
                 }
                 ${Object.keys(alphaArr).map(key => `&:${key} {
@@ -315,7 +315,7 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       type: type,
       onClick: _onClick,
-      className: ['DGN-UI-ButtonIcon', viewType, getClassNameFromColor(color), size, loading && 'loading', disabled && 'disabled', className].join(' ').trim().replace(/\s+/g, ' '),
+      className: ['DGN-UI-ButtonIcon', viewType, getClassNameFromColor(color), size, loading && 'button-icon--loading', disabled && 'button-icon--disabled', className].join(' ').trim().replace(/\s+/g, ' '),
       ...props
     }, loading && iconLoading(), !loading && jsx("span", {
       className: 'DGN-UI-ButtonIcon-Icon'

package/components/button/index.js

@@ -149,7 +149,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         ${userSelectNone}
         height: max-content;
         transition: all 0.5s;
-        &.disabled {
+        &.button--disabled {
             cursor: not-allowed !important;
             color: ${systemDisabled} !important;
             &.outlined {
@@ -167,7 +167,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         /* &:not(:disabled):focus {
             box-shadow: ${viewType === 'outlined' ? '0 0 0 2px ' + hexToRGBA(active, 0.13) : 'none'};
         } */
-        &.loading {
+        &.button--loading {
             ${pointerEventsNone}
         }
         &.${size} {
@@ -204,14 +204,14 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             &.default {
                 border: 1px solid ${rest};
                 color: ${rest};
-                &.loading,
+                &.button--loading,
                 &:hover,
                 &:focus,
                 &:active {
                     color: ${active};
                     border-color: ${active};
                 }
-                &.loading {
+                &.button--loading {
                     background-color: ${hexToRGBA(active, alphaLoading)};
                 }
                 ${Object.keys(alphaArr).map(key => `&:${key} {
@@ -221,7 +221,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             &.${color} {
                 border: 1px solid ${colorMap.get(color)};
                 color: ${colorMap.get(color)};
-                &.loading {
+                &.button--loading {
                     background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
                 }
                 ${Object.keys(alphaArr).map(key => `&:${key} {
@@ -231,7 +231,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             &.custom-color {
                 border: 1px solid ${color};
                 color: ${color};
-                &.loading {
+                &.button--loading {
                     background-color: ${hexToRGBA(color, alphaLoading)};
                 }
                 ${Object.keys(alphaArr).map(key => `&:${key} {
@@ -243,7 +243,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             border: none;
             color: ${white};
             font-weight: bold;
-            &.loading,
+            &.button--loading,
             &:hover,
             &:focus {
                 filter: brightness(0.85);
@@ -253,7 +253,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             }
             &.default {
                 background-color: ${rest};
-                &.loading {
+                &.button--loading {
                     background-color: ${active};
                 }
                 &:hover,
@@ -279,7 +279,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 &:active {
                     color: ${active};
                 }
-                &.loading {
+                &.button--loading {
                     color: ${active};
                     background-color: ${hexToRGBA(active, alphaLoading)};
                 }
@@ -289,7 +289,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             }
             &.${color} {
                 color: ${colorMap.get(color)};
-                &.loading {
+                &.button--loading {
                     background-color: ${hexToRGBA(colorMap.get(color), alphaLoading)};
                 }
                 ${Object.keys(alphaArr).map(key => `&:${key} {
@@ -298,7 +298,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             }
             &.custom-color {
                 color: ${color};
-                &.loading {
+                &.button--loading {
                     background-color: ${hexToRGBA(color, alphaLoading)};
                 }
                 ${Object.keys(alphaArr).map(key => `&:${key} {
@@ -311,7 +311,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             ${noBorder}
             ${noPadding}
             color: ${info};
-            &.loading,
+            &.button--loading,
             &:hover,
             &:focus {
                 filter: brightness(0.85);
@@ -424,7 +424,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onClick: _onClick,
       ref: ref,
       type: type,
-      className: ['DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'loading', disabled && 'disabled', className].join(' ').trim().replace(/\s+/g, ' '),
+      className: ['DGN-UI-Button', viewType, getClassNameFromColor(color), size, loading && 'button--loading', disabled && 'button--disabled', className].join(' ').trim().replace(/\s+/g, ' '),
       ...props
     }, start, jsx(Typography, {
       css: ButtonText,

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

@@ -1374,7 +1374,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setShowClear(clearAble && checkHasValue(valueProp) && !disabled && !readOnly && !loading);
   }, [clearAble, valueProp, disabled, readOnly, loading]);
   useEffect(() => {
-    currentObjectDefault[unique] = onLoadMore && valueObjectDefault ? Array.isArray(valueObjectDefault) ? [...valueObjectDefault] : [valueObjectDefault] : [];
+    if (onLoadMore && valueObjectDefault) {
+      if (Array.isArray(valueObjectDefault)) {
+        currentObjectDefault[unique] = [...valueObjectDefault];
+      } else if (typeof valueObjectDefault === 'object') {
+        currentObjectDefault[unique] = Object.keys(valueObjectDefault).length !== 0 ? [valueObjectDefault] : [];
+      }
+    } else {
+      currentObjectDefault[unique] = [];
+    }
+
     return () => {
       currentObjectDefault[unique] = null;
     };

package/components/form-control/input-base/index.js

@@ -2,7 +2,6 @@
 
 /** @jsx jsx */
 import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
-import useInput from '../../../utils/useInput';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { renderIcon } from '../../../utils';
@@ -16,7 +15,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   viewType,
   defaultValue,
-  value: valueProp,
+  value,
   placeholder,
   resize,
   status,
@@ -44,17 +43,8 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onInput,
   onKeyDown,
   onKeyUp,
-  delayOnChange,
   ...props
 }, reference) => {
-  const {
-    bind
-  } = useInput({
-    defaultValue,
-    valueProp,
-    onChange,
-    delayOnChange
-  });
   const ref = useRef(null);
   const inputBaseRef = useRef(null);
   const valueArray = useRef([]);
@@ -489,9 +479,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     const defaultHeight = 24;
 
-    if (valueProp !== undefined) {
-      valueArray.current.push(valueProp);
-      inputBaseRef.current.value = valueProp;
+    if (value !== undefined) {
+      valueArray.current.push(value);
+      inputBaseRef.current.value = value;
 
       if (multiline && !/\d+/.test(rows)) {
         inputBaseRef.current.style.height = 0;
@@ -500,11 +490,11 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     return () => {
-      if (valueProp !== undefined && multiline && !/\d+/.test(rows) && inputBaseRef.current) {
+      if (value !== undefined && multiline && !/\d+/.test(rows) && inputBaseRef.current) {
         inputBaseRef.current.style.height = defaultHeight + 'px';
       }
     };
-  }, [valueProp]);
+  }, [value]);
   useEffect(() => {
     if (disabled) {
       if (ref.current) {
@@ -542,9 +532,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     onInput: onInputTextArea,
+    onChange: onChange,
     onBlur: onBlur,
-    onFocus: onFocus,
-    ...bind
+    onFocus: onFocus
   }));
   const InputComp = jsx("div", {
     css: inputBaseRoot,
@@ -579,9 +569,9 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     onInput: onInput,
+    onChange: onChange,
     onBlur: onBlur,
-    onFocus: onFocus,
-    ...bind
+    onFocus: onFocus
   })), !!endIcon && jsx("div", {
     css: inputBaseIconCSS,
     ...endIconProps,
@@ -729,9 +719,6 @@ InputBase.propTypes = {
   onFocus: PropTypes.func,
 
   /** inputRef of InputBase component */
-  inputRef: PropTypes.any,
-
-  /** delayOnChange of InputBase component */
-  delayOnChange: PropTypes.number
+  inputRef: PropTypes.any
 };
 export default InputBase;

package/components/form-control/text-input/index.js

@@ -1,12 +1,11 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef, useState, useImperativeHandle } from 'react';
+import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
 import { renderIcon, onValidate } from '../../../utils';
-import { displayBlock, flexRow, positionRelative } from '../../../styles/general';
 const icons = {
   default: `<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fillRule="evenodd" clipRule="evenodd" d="M15.5616 19.0007C15.4036 19.0007 15.2446 18.9637 15.0986 18.8877L9.99962 16.2237L4.90162 18.8877C4.56362 19.0627 4.15562 19.0327 3.84962 18.8087C3.54162 18.5847 3.38862 18.2057 3.45362 17.8307L4.42462 12.2027L0.304623 8.21765C0.030623 7.95265 -0.068377 7.55465 0.048623 7.19065C0.165623 6.82865 0.478623 6.56365 0.856623 6.50965L6.55662 5.68165L9.10462 0.555654C9.44262 -0.124346 10.5576 -0.124346 10.8956 0.555654L13.4436 5.68165L19.1436 6.50965C19.5216 6.56365 19.8346 6.82865 19.9516 7.19065C20.0686 7.55465 19.9696 7.95265 19.6956 8.21765L15.5756 12.2027L16.5466 17.8307C16.6116 18.2057 16.4576 18.5847 16.1506 18.8087C15.9766 18.9367 15.7696 19.0007 15.5616 19.0007Z" fill="#7F828E"/>
@@ -34,7 +33,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   label,
   defaultValue,
-  value: valueProp,
+  value,
   placeholder,
   resize,
   startIcon,
@@ -78,20 +77,19 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const iconRef = useRef(null);
   let currentValue = '';
-  const [value, setValue] = useState(valueProp || defaultValue);
   const isError = !!error && !value && value !== 0;
   /* Start styled */
 
   const TextInputRoot = css`
-        ${displayBlock}
-        ${positionRelative}
+        display: block;
+        position: relative;
         margin-bottom: 20px;
     `;
   const TextInputIcon = css`
-        ${flexRow}
+        display: flex;
         color: inherit;
         .edit-icon-pen {
-            ${flexRow}
+            display: flex;
         }
         .edit-icon-confirm {
             display: none;
@@ -181,12 +179,12 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     inputRef.current.disabled = false;
   };
 
-  useEffect(() => {
-    setValue(valueProp);
-  }, [valueProp]);
   useEffect(() => {
     !!refs && refs(ref);
-    currentValue = defaultValue || "";
+
+    if (defaultValue !== undefined && defaultValue !== '') {
+      currentValue = defaultValue;
+    }
   }, []);
   useEffect(() => {
     if (/^(quick)?Edit/i.test(type) && !multiline) {
@@ -331,7 +329,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return jsx("div", {
     ref: ref,
     css: TextInputRoot,
-    className: ['DGN-UI-TextInput', className].join(' ').trim().replace(/\s+/g, ' '),
+    className: ['DGN-UI-TextInput', className].join(' ').trim(),
     style: style,
     ...props
   }, !!label && jsx(Label, {
@@ -344,6 +342,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     inputRef: inputRef,
     viewType: viewType,
     defaultValue: defaultValue,
+    value: value,
     placeholder: placeholder,
     autoFocus: autoFocus,
     disabled: disabled,
@@ -364,8 +363,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onInput: onInput,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
-    onPaste: onPaste,
-    value: valueProp
+    onPaste: onPaste
   }), isError && jsx(HelperText, {
     disabled: disabled,
     status: status

package/icons/basic.js

@@ -1289,15 +1289,19 @@ export const ChatBubble = /*#__PURE__*/memo(({
     viewBox: "0 0 24 24",
     fill: "none"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M18.4 4H5.6C4.72 4 4 4.72 4 5.6V20L7.2 16.8H18.4C19.28 16.8 20 16.08 20 15.2V5.6C20 4.72 19.28 4 18.4 4ZM18.4 15.2H7.2L5.6 16.8V5.6H18.4V15.2Z",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4 2H20C21.1 2 22 2.9 22 4V16C22 17.1 21.1 18 20 18H6L2 22V4C2 2.9 2.9 2 4 2ZM6 16H20V4H4V18L6 16Z",
     fill: colors[color] || color
   })) : /*#__PURE__*/React.createElement("svg", {
-    width: width || 16,
-    height: height || 16,
-    viewBox: "0 0 16 16",
+    width: width || 20,
+    height: height || 20,
+    viewBox: "0 0 20 20",
     fill: "none"
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M14.4 0H1.6C0.72 0 0 0.72 0 1.6V16L3.2 12.8H14.4C15.28 12.8 16 12.08 16 11.2V1.6C16 0.72 15.28 0 14.4 0ZM14.4 11.2H3.2L1.6 12.8V1.6H14.4V11.2Z",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 0H18C19.1 0 20 0.9 20 2V14C20 15.1 19.1 16 18 16H4L0 20V2C0 0.9 0.9 0 2 0ZM4 14H18V2H2V16L4 14Z",
     fill: colors[color] || color
   }));
 });
@@ -3454,6 +3458,30 @@ export const Monetization = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Money = /*#__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: "M11.8001 10.9C9.53007 10.31 8.80007 9.7 8.80007 8.75C8.80007 7.66 9.81007 6.9 11.5001 6.9C13.2801 6.9 13.9401 7.75 14.0001 9H16.2101C16.1401 7.28 15.0901 5.7 13.0001 5.19V3H10.0001V5.16C8.06007 5.58 6.50007 6.84 6.50007 8.77C6.50007 11.08 8.41007 12.23 11.2001 12.9C13.7001 13.5 14.2001 14.38 14.2001 15.31C14.2001 16 13.7101 17.1 11.5001 17.1C9.44007 17.1 8.63007 16.18 8.52007 15H6.32007C6.44007 17.19 8.08007 18.42 10.0001 18.83V21H13.0001V18.85C14.9501 18.48 16.5001 17.35 16.5001 15.3C16.5001 12.46 14.0701 11.49 11.8001 10.9Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 11,
+    height: height || 18,
+    viewBox: "0 0 11 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M5.80007 7.9C3.53007 7.31 2.80007 6.7 2.80007 5.75C2.80007 4.66 3.81007 3.9 5.50007 3.9C7.28007 3.9 7.94007 4.75 8.00007 6H10.2101C10.1401 4.28 9.09007 2.7 7.00007 2.19V0H4.00007V2.16C2.06007 2.58 0.500068 3.84 0.500068 5.77C0.500068 8.08 2.41007 9.23 5.20007 9.9C7.70007 10.5 8.20007 11.38 8.20007 12.31C8.20007 13 7.71007 14.1 5.50007 14.1C3.44007 14.1 2.63007 13.18 2.52007 12H0.320068C0.440068 14.19 2.08007 15.42 4.00007 15.83V18H7.00007V15.85C8.95007 15.48 10.5001 14.35 10.5001 12.3C10.5001 9.46 8.07007 8.49 5.80007 7.9Z",
+    fill: colors[color] || color
+  }));
+});
 export const More = /*#__PURE__*/memo(({
   width,
   height,
@@ -5925,6 +5953,30 @@ export const BackFilled = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Bookmark = /*#__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: "M17 3H7C5.9 3 5 3.9 5 5V21L12 18L19 21V5C19 3.9 18.1 3 17 3Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 14,
+    height: height || 18,
+    viewBox: "0 0 14 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 0H2C0.9 0 0 0.9 0 2V18L7 15L14 18V2C14 0.9 13.1 0 12 0Z",
+    fill: colors[color] || color
+  }));
+});
 export const CancelFilled = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,49 +1,45 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.32-beta.5",
-  "description": "",
+  "version": "1.3.33",
+  "description": "The DigiNet core ui",
+  "homepage": "https://diginet.com.vn",
   "main": "index.js",
-  "license": "UNLICENSED",
   "scripts": {
-    "start": "start-storybook -p 9050",
-    "build-storybook": "build-storybook -c .storybook -s src",
-    "build": "run-script-os",
-    "build:windows": "rimraf dist && mkdirp dist/components && npm run compile && sass --style=compressed src/scss:dist/css && xcopy src\\\\assets dist\\\\assets\\ /e /y",
-    "build:darwin:linux:default": "rm -rf dist && npm run compile && sass --style=compressed src/scss:dist/css && cp -rf src/assets dist/assets",
-    "compile": "babel src --out-dir dist --ignore **/*.stories.js",
-    "pack": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm pack",
-    "production-keep-version": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish",
-    "beta": "npm run build && cp *.md dist/ && cp package.json dist/ && cd dist && npm publish --tag beta",
-    "production": "npm run build && cp *.md dist/ && npm run version:bump --silent && npm run version:add --silent && cd dist && npm publish",
-    "version:add": "run-script-os",
-    "version:add:windows": "cat package.json.tmp | sed \"s/0.0.0/%npm_package_version%/g\" > dist/package.json",
-    "version:add:darwin:linux:default": "VERSION=$(npm run version:extract --silent) && cat package.json.tmp | sed \"s/0.0.0/${VERSION}/g\" > dist/package.json",
-    "version:bump": "npm version patch --no-git-tag-version --silent",
-    "version:extract": "cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]'",
+    "start-js": "react-scripts start --max_old_space_size=4096",
+    "start": "npx npm-run-all -p start-js",
+    "build": "GENERATE_SOURCEMAP=false && react-scripts build --env=production --max_old_space_size=8192",
+    "eject": "react-scripts eject",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
     "@emotion/core": "^10.0.35",
+    "@emotion/styled": "^10.0.27",
     "prop-types": "^15.7.2",
-    "sass": "^1.37.0"
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   },
-  "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
-    "@babel/preset-react": "^7.13.13",
-    "@storybook/addon-actions": "6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "6.2.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "6.2.9",
-    "autoprefixer": "^10.3.1",
-    "babel-loader": "^8.2.2",
-    "mkdirp": "^1.0.4",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rimraf": "^3.0.2",
-    "run-script-os": "^1.1.6"
-  }
+  "repository": {
+    "type": "git",
+    "url": "git+https://diginetvn@bitbucket.org/diginetvn/diginet-core-ui.git"
+  },
+  "keywords": [
+    "core ui",
+    "diginet"
+  ],
+  "author": "rocachien",
+  "contributors": [
+    {
+      "name": "Chien Do",
+      "email": "rocachien@gmail.com"
+    },
+    {
+      "name": "Nhat Tran",
+      "email": "tranminhnhat1005@gmail.com"
+    },
+    {
+      "name": "Thuan Nguyen",
+      "email": "nt.thuan.hutech@gmail.com"
+    }
+  ],
+  "license": "MIT"
 }

package/readme.md

@@ -38,6 +38,18 @@ npm test
 ```
 
 ## Changelog
+## 1.3.33
+- \[Fixed\]: Dropdown - Fix show wrong when valueObjectDefault is empty object
+- \[Fixed\]: Button, ButtonIcon - Fix classname
+
+## 1.3.32
+- \[Added\]: SYSTEM - Add color text/disabled
+- \[Added\]: Icon - Bookmark, Money
+- \[Changed\]: Icon - ChatBubble
+- \[Fixed\]: Popover - Fix bug not close popover on Modal
+- \[Fixed\]: DropdownBox - Return element in onChangeInput prop
+- \[Fixed\]: InputBase, Dropdown - Change default placeholder
+
 ## 1.3.31
 - \[Added\]: MenuIcon - W05F0011N0000
 - \[Changed\]: SYSTEM - Replace color text from string to object

package/styles/color-helper.js

@@ -264,6 +264,8 @@ export const fade = (color, value) => {
  */
 
 export const darken = (color, coefficient) => {
+  if (isColorName(color)) color = isColorName(color);
+  if (!isColor(color)) return;
   color = decomposeColor(color);
   coefficient = clamp(coefficient);
 

package/styles/colors.js

@@ -290,7 +290,8 @@ color.text = {
   sub: color.dark6,
   normal_label: color.dark8,
   "hover-active-focus": color.brand,
-  tooltip: color.white
+  tooltip: color.white,
+  disabled: color.dark4
 };
 color.line = {
   normal: color.dark6,

package/styles/general.js

@@ -36,6 +36,9 @@ export const justifyCenter = css`
 export const justifyEnd = css`
     justify-content: flex-end;
 `;
+export const justifyBetween = css`
+    justify-content: space-between;
+`;
 export const displayBlock = css`
     display: block;
 `;

package/utils/useInput.js

@@ -15,11 +15,11 @@ const useInput = props => {
     e.persist();
     if (timer.current) clearTimeout(timer.current);
     timer.current = setTimeout(() => {
-      const value = e.value || e.target.value;
-      setValue(value);
+      const valueInput = e.target.value || e.value;
+      setValue(valueInput);
 
       e.reset = () => {
-        setValue(value);
+        setValue(valueProp);
         e.target.value = valueProp;
       };