diginet-core-ui 1.3.79 → 1.3.80

package/components/form-control/date-range-picker/index.js

@@ -4,14 +4,14 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from '../..';
-import { getGlobal } from '../../../global';
-import locale from '../../../locale';
-import { alignCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexCol, flexRow, justifyEnd, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionFixed, textCenter, userSelectNone, whiteSpaceNoWrap } from '../../../styles/general';
-import { useTheme } from '../../../theme';
-import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from '../../../utils';
-import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from '../calendar/function';
-import ControlComp from '../control';
+import { Button, ButtonIcon, Divider, HelperText, InputBase, Label, Typography } from "../..";
+import { getGlobal } from "../../../global";
+import locale from "../../../locale";
+import { alignCenter, borderRadius4px, cursorPointer, displayBlock, displayNone, flexCol, flexRow, justifyEnd, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionFixed, textCenter, userSelectNone, whiteSpaceNoWrap } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from "../../../utils";
+import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
+import ControlComp from "../control";
 const {
   colors: {
     system: {

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

@@ -5,13 +5,13 @@ import ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon, Typography } from '../../';
-import { mapParent, randomString, updatePosition } from '../../../utils';
-import { getGlobal } from '../../../global';
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, breakWord, cursorPointer, displayBlock, flexColReverse, flexRow, flexWrap, justifyCenter, justifyStart, outlineNone, overflowAuto, overflowHidden, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, userSelectNone } from '../../../styles/general';
-import isMobile from '../../../utils/isMobile';
-import theme from '../../../theme/settings';
-import Avatar from '../../avatar';
+import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon, Typography } from "../../";
+import { mapParent, randomString, updatePosition } from "../../../utils";
+import { getGlobal } from "../../../global";
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, breakWord, cursorPointer, displayBlock, flexColReverse, flexRow, flexWrap, justifyCenter, justifyStart, outlineNone, overflowAuto, overflowHidden, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, userSelectNone } from "../../../styles/general";
+import isMobile from "../../../utils/isMobile";
+import theme from "../../../theme/settings";
+import Avatar from "../../avatar";
 const {
   colors: {
     system: {

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

@@ -4,12 +4,12 @@ import { memo, useState, useEffect, useRef, useImperativeHandle, forwardRef, Fra
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { ButtonIcon, InputBase, Label } from '../../';
-import { randomString } from '../../../utils';
-import { color as colors } from '../../../styles/colors';
-import { typography } from '../../../styles/typography';
-import { borderBox, borderRadius4px, displayBlock, positionFixed, positionRelative } from '../../../styles/general';
-import { useTheme } from '../../../theme';
+import { ButtonIcon, InputBase, Label } from "../../";
+import { randomString } from "../../../utils";
+import { color as colors } from "../../../styles/colors";
+import { typography } from "../../../styles/typography";
+import { borderBox, borderRadius4px, displayBlock, positionFixed, positionRelative } from "../../../styles/general";
+import { useTheme } from "../../../theme";
 const {
   paragraph1
 } = typography;

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { memo, useMemo, useRef, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import FormContext from './context';
+import FormContext from "./context";
 const Form = /*#__PURE__*/forwardRef(({
   onLoaded,
   onValidate,

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

@@ -3,7 +3,7 @@
 import { memo, useRef, useEffect, forwardRef, Children, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import theme from '../../../theme/settings';
+import theme from "../../../theme/settings";
 const {
   spacing
 } = theme;

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

@@ -3,10 +3,10 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
-import { Typography } from '../../';
-import { getGlobal } from '../../../global';
-import { useTheme } from '../../../theme';
-import { classNames } from '../../../utils';
+import { Typography } from "../../";
+import { getGlobal } from "../../../global";
+import { useTheme } from "../../../theme";
+import { classNames } from "../../../utils";
 const {
   colors: {
     system: {

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

@@ -1,15 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import useInput from '../../../utils/useInput';
+import useInput from "../../../utils/useInput";
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { getGlobal } from '../../../global';
-import Icon from '../../../icons';
-import { Typography } from '../..';
-import { useTheme, useColor as colors } from '../../../theme';
-import { classNames, refType as ref } from '../../../utils';
-import { alignCenter, border, borderBox, borderNone, borderRadius4px, displayBlock, flexRow, outlineNone, parseHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from '../../../styles/general';
+import { getGlobal } from "../../../global";
+import Icon from "../../../icons";
+import { Typography } from "../..";
+import { useTheme, useColor as colors } from "../../../theme";
+import { classNames, refType as ref } from "../../../utils";
+import { alignCenter, border, borderBox, borderNone, borderRadius4px, displayBlock, flexRow, outlineNone, parseHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../../styles/general";
 const {
   colors: {
     system: {

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

@@ -1,13 +1,13 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import { Typography } from "../..";
+import OptionWrapper from "../../others/option-wrapper";
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import OptionWrapper from '../../others/option-wrapper';
-import { Typography } from '../../';
-import { flexRow, typographyTypes } from '../../../styles/general';
-import { classNames } from '../../../utils';
-import { useTheme } from '../../../theme';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { flexRow, typographyTypes } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { classNames } from "../../../utils";
 const {
   colors: {
     system: {
@@ -21,16 +21,16 @@ const {
 } = useTheme();
 const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
+  children,
+  className,
+  color,
   disabled,
+  hoverTooltip,
+  id,
+  lineClamp,
   readOnly,
   required,
-  className,
-  children,
   type,
-  lineClamp,
-  hoverTooltip,
-  id,
-  color,
   ...props
 }, reference) => {
   const ref = useRef(null);

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

@@ -4,11 +4,11 @@
 import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import locale from '../../../locale';
-import { InputBase, Label, HelperText } from '../../';
-import { onValidate } from '../../../utils';
-import { displayBlock, positionRelative } from '../../../styles/general';
-import { getGlobal } from '../../../global';
+import locale from "../../../locale";
+import { InputBase, Label, HelperText } from "../../";
+import { onValidate } from "../../../utils";
+import { displayBlock, positionRelative } from "../../../styles/general";
+import { getGlobal } from "../../../global";
 const num2WordsVi = function () {
   let t = ['không', 'một', 'hai', 'ba', 'bốn', 'năm', 'sáu', 'bảy', 'tám', 'chín'],
     r = function (r, n) {

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

@@ -3,9 +3,9 @@
 import { memo, useEffect, useRef, forwardRef, useState, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import locale from '../../../locale';
-import { InputBase, Label, HelperText } from '../../';
-import { onValidate } from '../../../utils';
+import locale from "../../../locale";
+import { InputBase, Label, HelperText } from "../../";
+import { onValidate } from "../../../utils";
 const NumberInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   required,

package/components/form-control/number-input/index2.js

@@ -1,16 +1,16 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { useState, useRef, forwardRef, useMemo, useCallback, useEffect, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import locale from '../../../locale';
-import { InputBase, Label, HelperText } from '../..';
-import { classNames, onValidate, refType as ref } from '../../../utils';
-import { displayBlock, positionRelative } from '../../../styles/general';
-import theme from '../../../theme/settings';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { HelperText, InputBase, Label } from "../..";
+import locale from "../../../locale";
+import { cursorNotAllowed, displayBlock, positionRelative } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { classNames, onValidate, refType as ref } from "../../../utils";
 const {
   spacing
-} = theme;
+} = useTheme();
 const regexValidNumber = /[^0-9.,-]/g;
 const regexNumber = /[^0-9]/g;
 const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
@@ -18,6 +18,7 @@ const regexThousandNumber = /(\d)(?=(\d{3})+\b)/g;
 // Clamp number between two values with the following line:
 const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 const NumberInput = /*#__PURE__*/forwardRef(({
+  action = {},
   autoFocus,
   autoWidth,
   className,
@@ -51,6 +52,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   required,
   startIcon,
   step,
+  style,
   thousandSeparator: thousandSymbol,
   validates,
   value: valueProps,
@@ -61,6 +63,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const globalRef = useRef({});
   const [value, setValue] = useState(defaultValue);
+  const isError = !!error;
 
   // nếu không cho nhập số âm mà max là âm thì remove giá trị max
   if (max < 0 && disabledNegative) max = null;
@@ -255,7 +258,9 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {}; // methods
+    const _instance = {
+      ...action
+    }; // methods
     _instance.__proto__ = {}; // hidden methods
     currentRef.instance = _instance;
     return currentRef;
@@ -263,11 +268,12 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   return jsx("div", {
     ref: ref,
     css: NumberInputRoot,
-    className: classNames('DGN-UI-NumberInput', className)
+    className: classNames('DGN-UI-NumberInput', className, disabled && 'disabled'),
+    style: style
   }, !!label && jsx(Label, {
-    ...labelProps,
     required: required,
-    disabled: disabled
+    disabled: disabled,
+    ...labelProps
   }, label), jsx(InputBase, {
     inputRef: inputRef,
     viewType: viewType,
@@ -277,18 +283,19 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     autoFocus: autoFocus,
     disabled: disabled,
     readOnly: readOnly,
-    status: !!error || validateResult ? 'danger' : 'default',
-    inputProps: inputProps,
     autoWidth: autoWidth,
+    status: isError || validateResult ? 'danger' : 'default',
+    inputProps: inputProps,
     inputStyle: inputStyle,
     startIcon: startIcon,
     endIcon: endIcon,
-    nonStyle: nonStyle,
+    onBlur: e => _onBlur(e),
     onFocus: onFocus,
     onInput: _onInput,
+    onKeyDown: _onKeyDown,
     onKeyUp: onKeyUp,
     delayOnChange: delayOnChange,
-    onKeyDown: _onKeyDown,
+    nonStyle: nonStyle,
     onChange: e => {
       const target = e.target;
       target.value = globalRef.current.valueString;
@@ -298,12 +305,11 @@ const NumberInput = /*#__PURE__*/forwardRef(({
         value: globalRef.current.value,
         target
       });
-    },
-    onBlur: e => _onBlur(e)
-  }), !!error && jsx(HelperText, {
+    }
+  }), isError && jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
-  }, error), !error && validateResult && jsx(HelperText, {
+  }, error), !isError && validateResult && jsx(HelperText, {
     ...helperTextProps,
     disabled: disabled
   }, validateResult));
@@ -312,6 +318,9 @@ const NumberInputRoot = css`
     ${displayBlock};
     ${positionRelative};
     margin-bottom: ${spacing([5])};
+    &.disabled {
+        ${cursorNotAllowed};
+    }
 `;
 NumberInput.defaultProps = {
   autoFocus: false,
@@ -326,16 +335,16 @@ NumberInput.defaultProps = {
   label: '',
   max: Infinity,
   min: -Infinity,
-  nonStyle: false,
   readOnly: false,
   required: false,
   startIcon: '',
   step: 1,
+  style: {},
   thousandSeparator: false,
   viewType: 'underlined'
 };
 NumberInput.propTypes = {
-  /** If `true`, the `input` element is focused during the first mount. */
+  /** If `true`, the input element is focused during the first mount. */
   autoFocus: PropTypes.bool,
   /** If `true`, width of input will resize according to content. */
   autoWidth: PropTypes.bool,
@@ -345,7 +354,7 @@ NumberInput.propTypes = {
   decimalDigit: PropTypes.number,
   /** Separator symbol. */
   decimalSymbol: PropTypes.oneOf([',', '.']),
-  /** Default value of the component. */
+  /** The default value. Use when the component is not controlled. */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** The number of milliseconds to wait before call onChange. */
   delayOnChange: PropTypes.number,
@@ -357,7 +366,7 @@ NumberInput.propTypes = {
   endIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /** Error displayed below input. */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /** fixedDecimalDigit. */
+  /** If `true`, decimal digit is fixed. */
   fixedDecimalDigit: PropTypes.bool,
   /** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
   helperTextProps: PropTypes.object,
@@ -377,8 +386,6 @@ NumberInput.propTypes = {
   maxDigit: PropTypes.number,
   /** Minimal possible value. */
   min: PropTypes.number,
-  /** If `true`, component will have no style */
-  nonStyle: PropTypes.bool,
   /** Callback fired when the input is blurred. */
   onBlur: PropTypes.func,
   /** Callback fired when the value is changed. */
@@ -401,6 +408,8 @@ NumberInput.propTypes = {
   startIcon: PropTypes.any,
   /** Specify how much the values should increase/decrease upon clicking on up/down button. */
   step: PropTypes.number,
+  /** Style inline of component. */
+  style: PropTypes.object,
   /** Thousand separator character. */
   thousandSeparator: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['.', ','])]),
   /** Validation value, argument can:<br/>
@@ -412,6 +421,6 @@ NumberInput.propTypes = {
   /** The value of the input element, required for a controlled component. */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** The variant to use. */
-  viewType: PropTypes.oneOf(['underlined', 'outlined'])
+  viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
 };
 export default NumberInput;

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

@@ -3,8 +3,8 @@
 import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { InputBase, Label, HelperText, Typography } from '../../';
-import { Vietnam, England } from '../../../icons';
+import { InputBase, Label, HelperText, Typography } from "../../";
+import { Vietnam, England } from "../../../icons";
 const ensigns = {
   Vietnam: {
     icon: jsx(Vietnam, null),

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

@@ -3,10 +3,10 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useState, useRef, useEffect, useMemo, Fragment } from 'react';
-import theme from '../../../theme/settings';
-import { randomString } from '../../../utils';
-import Typography from './../../typography';
-import { cursorPointer, borderBox, positionAbsolute, positionRelative, displayNone, displayBlock, cursorNoDrop } from '../../../styles/general';
+import theme from "../../../theme/settings";
+import { randomString } from "../../../utils";
+import Typography from "./../../typography";
+import { cursorPointer, borderBox, positionAbsolute, positionRelative, displayNone, displayBlock, cursorNoDrop } from "../../../styles/general";
 const {
   spacing,
   colors: {

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

@@ -1,12 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { HelperText, InputBase, Label } from "../..";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { HelperText, InputBase, Label } from '../../';
-import { cursorNotAllowed, displayBlock, positionRelative } from '../../../styles/general';
-import { useTheme } from '../../../theme';
-import { classNames, onValidate, refType as ref } from '../../../utils';
+import { cursorNotAllowed, displayBlock, positionRelative } from "../../../styles/general";
+import { useTheme } from "../../../theme";
+import { classNames, onValidate, refType as ref } from "../../../utils";
 const {
   spacing
 } = useTheme();

package/components/form-control/time-picker/index.js

@@ -3,13 +3,13 @@
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
-import { Cancel as CancelIcon, Clock as ClockIcon } from '../../../icons';
-import HelperText from '../helper-text';
-import { randomString, useOnClickOutside } from '../../../utils';
-import theme from '../../../theme/settings';
-import Swiper from './swiper';
-import { typography } from '../../../styles/typography';
-import { useTheme } from '../../../theme';
+import { Cancel as CancelIcon, Clock as ClockIcon } from "../../../icons";
+import HelperText from "../helper-text";
+import { randomString, useOnClickOutside } from "../../../utils";
+import theme from "../../../theme/settings";
+import Swiper from "./swiper";
+import { typography } from "../../../styles/typography";
+import { useTheme } from "../../../theme";
 const {
   zIndex
 } = useTheme();

package/components/form-control/time-picker/swiper.js

@@ -5,7 +5,7 @@
 import { useEffect, useRef } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { randomString } from '../../../utils';
+import { randomString } from "../../../utils";
 const easing = {
   easingOutCubic: pos => {
     return Math.pow(pos - 1, 3) + 1;

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

@@ -3,10 +3,10 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useMemo, useRef, useState, Fragment } from 'react';
-import theme from '../../../theme/settings';
-import generateRandom from '../../../utils/randomString';
-import Typography from '../../typography';
-import { alignCenter, cursorNoDrop, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative } from '../../../styles/general';
+import theme from "../../../theme/settings";
+import generateRandom from "../../../utils/randomString";
+import Typography from "../../typography";
+import { alignCenter, cursorNoDrop, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative } from "../../../styles/general";
 const {
   colors: {
     system: {

package/components/form-view/helper-text.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { Typography } from '../';
+import { Typography } from "../";
 const HelperText = /*#__PURE__*/memo(({
   text,
   style,

package/components/form-view/index.js

@@ -2,10 +2,10 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import Input from '../form-view/input';
-import Label from '../form-view/label';
-import HelperText from '../form-view/helper-text';
-import { dark4 } from '../../styles/colors';
+import Input from "../form-view/input";
+import Label from "../form-view/label";
+import HelperText from "../form-view/helper-text";
+import { dark4 } from "../../styles/colors";
 const FormLabel = ({
   label,
   inputProps,

package/components/form-view/input.js

@@ -3,9 +3,9 @@
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, useRef, memo, useEffect, useMemo } from 'react';
-import { dark4 } from '../../styles/colors';
-import { typography } from '../../styles/typography';
-import { formatDate } from '../../utils';
+import { dark4 } from "../../styles/colors";
+import { typography } from "../../styles/typography";
+import { formatDate } from "../../utils";
 const InputView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   inputProps,
   inputStyleProps,

package/components/form-view/label.js

@@ -3,8 +3,8 @@
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { memo } from 'react';
-import { dark8 } from '../../styles/colors';
-import { typography } from '../../styles/typography';
+import { dark8 } from "../../styles/colors";
+import { typography } from "../../styles/typography";
 const Label = /*#__PURE__*/memo(({
   label,
   labelProps

package/components/grid/Col.js

@@ -3,8 +3,8 @@
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
-import { makeStyles } from '../../theme';
-import { classNames } from '../../utils';
+import { makeStyles } from "../../theme";
+import { classNames } from "../../utils";
 const useStyles = makeStyles({
   customCol: {
     '& .DGN-UI-Control': {

package/components/grid/Container.js

@@ -3,7 +3,7 @@
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
-import { classNames } from '../../utils';
+import { classNames } from "../../utils";
 const checkChildren = children => {
   if (!children) return false;
   if (Array.isArray(children)) {

package/components/grid/Row.js

@@ -3,7 +3,7 @@
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import Grid from '.';
-import { classNames } from '../../utils';
+import { classNames } from "../../utils";
 const checkChildren = children => {
   if (!children) return false;
   if (Array.isArray(children)) {

package/components/grid/index.js

@@ -3,11 +3,11 @@
 import { memo, useContext, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import GridContext from './context';
-import theme from '../../theme/settings';
-import { breakpointKeys } from '../../theme/createBreakpoints';
-import { borderBox } from '../../styles/general';
-import { classNames, handleBreakpoints } from '../../utils';
+import GridContext from "./context";
+import theme from "../../theme/settings";
+import { breakpointKeys } from "../../theme/createBreakpoints";
+import { borderBox } from "../../styles/general";
+import { classNames, handleBreakpoints } from "../../utils";
 const {
   breakpoints: themeBreakpoints,
   spacing: themeSpacing

package/components/image/index.js

@@ -3,11 +3,11 @@
 import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css, keyframes } from '@emotion/core';
-import OptionWrapper from '../others/option-wrapper';
-import { useIntersection } from '../../utils/intersectionObserver';
-import { classNames } from '../../utils';
-import AvatarDefault from '../../assets/avatar/default.svg';
-import { alignCenter, inlineFlex, overflowHidden, parseWidthHeight, positionRelative } from '../../styles/general';
+import OptionWrapper from "../others/option-wrapper";
+import { useIntersection } from "../../utils/intersectionObserver";
+import { classNames } from "../../utils";
+import AvatarDefault from "../../assets/avatar/default.svg";
+import { alignCenter, inlineFlex, overflowHidden, parseWidthHeight, positionRelative } from "../../styles/general";
 const blurKeyframe = keyframes`
     0% { -webkit-filter: blur(4px);}
     25% { -webkit-filter: blur(3px);}