diginet-core-ui 1.3.79-beta.1 → 1.3.79-beta.3

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

@@ -1,49 +1,45 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useEffect, useState, useRef, forwardRef, useImperativeHandle, Fragment } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { jsx, css } from '@emotion/core';
-import { ModalSample, Popup, Popover, List, ListItem, ListItemText, Slider, SliderItem, ScrollBar, LinearProgress, ButtonIcon, Notify } from '../../';
-import { Pdf, Word, Sheet, Presentation, Compressed, Image, Another, View, Download, Delete, Attachment as AttachmentIcon } from '../../../icons';
-import { classNames, date as moment, getFileType } from '../../../utils';
-import { getGlobal } from '../../../global';
-import { useTheme, makeStyles } from '../../../theme';
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, cursorPointer, displayBlock, displayInlineBlock, displayNone, ellipsis, flexCol, flexRow, flexWrap, justifyBetween, justifyCenter, justifyStart, parseHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textUppercase, userSelectNone } from '../../../styles/general';
-const theme = useTheme();
+import { ButtonIcon, HelperText, LinearProgress, List, ListItem, ListItemText, ModalSample, Notify, Popover, Popup, ScrollBar, Slider, SliderItem, Typography } from "../../";
+import { getGlobal } from "../../../global";
+import { Another, Compressed, Image, Pdf, Presentation, Sheet, Word } from "../../../icons";
+import { alignCenter, border, borderBox, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, displayInlineBlock, displayNone, ellipsis, flexCol, flexRow, flexWrap, justifyBetween, justifyCenter, justifyStart, parseHeight, parseMaxWidthHeight, parseMinHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
+import { makeStyles, useTheme } from "../../../theme";
+import { classNames, date as moment, getFileType } from "../../../utils";
+import Label from "../label";
 const {
   colors: {
     system: {
-      active,
-      rest,
-      white,
-      dark
+      rest: systemRest,
+      white: systemWhite,
+      dark: systemDark
     },
     semantic: {
-      success,
-      danger
+      success: semanticSuccess
     },
     fill: {
       hover: fillHover,
-      pressed,
-      focus
+      pressed: fillPressed,
+      focus: fillFocus
     },
     line: {
-      normal,
-      hover: lineHover
+      normal: lineNormal
     },
     text: {
-      sub
+      sub: textSub
     }
   },
   typography: {
-    heading5,
     paragraph1,
     paragraph2,
     paragraph3
   },
   spacing
-} = theme;
+} = useTheme();
 const useStyles = makeStyles({
   listItem: {
     '&.DGN-UI-List-Item': {
@@ -195,16 +191,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const classes = useStyles();
   const ref = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [popup, setPopup] = useState(false);
-  const [popover, setPopover] = useState(false);
-  const [viewTypeState, setViewTypeState] = useState(viewType);
   const attachTextRef = useRef(null);
   const attachmentHandleIconRef = useRef(null);
   const sortIconRef = useRef(null);
-  const attachmentImageIconRef = useRef(null);
   const attachmentInputRef = useRef(null);
-  const attachmentImageRef = useRef(null);
   const attachedRef = useRef(null);
   const newAttachedRef = useRef([]);
   const popupRef = useRef(null);
@@ -212,6 +202,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const isDeleteAll = useRef(false);
   const PushNotify = useRef(null);
   const removedAttachedRef = useRef([]);
+  const [open, setOpen] = useState(false);
+  const [popup, setPopup] = useState(false);
+  const [popover, setPopover] = useState(false);
+  const [viewTypeState, setViewTypeState] = useState(viewType);
+  const [isEmpty, setIsEmpty] = useState(null);
 
   // Start handler
   const onShowSortPopover = () => {
@@ -279,21 +274,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setPopover(false);
   };
   const afterChangeFile = (length = 0) => {
-    var _sortIconRef$current;
-    if (!length) {
-      if (!attachmentImageRef.current.classList.contains('hint-center')) {
-        attachmentImageRef.current.classList.add('hint-center');
-      }
-    } else {
-      attachmentImageRef.current.classList.remove('hint-center');
-    }
-    if ((_sortIconRef$current = sortIconRef.current) !== null && _sortIconRef$current !== void 0 && _sortIconRef$current.element) {
-      if (length > 1) {
-        sortIconRef.current.element.style.display = null;
-      } else {
-        sortIconRef.current.element.style.display = 'none';
-      }
-    }
+    setIsEmpty(!length);
   };
   const onChangeFiles = async e => {
     if (readOnly || disabled) return;
@@ -646,16 +627,21 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
     return false;
   };
-  const checkExistingFileInData = newFile => {
-    const files = data;
-    if (files && files.length) {
-      const length = files.length;
-      for (let i = 0; i < length; i++) {
-        if (parseStringify2(newFile) === parseStringify2(files[i], true)) return true;
-      }
-    }
-    return false;
-  };
+
+  // const checkExistingFileInData = newFile => {
+  //     const files = data;
+
+  //     if (files && files.length) {
+  //         const length = files.length;
+
+  //         for (let i = 0; i < length; i++) {
+  //             if (parseStringify2(newFile) === parseStringify2(files[i], true)) return true;
+  //         }
+  //     }
+
+  //     return false;
+  // };
+
   const checkAcceptFileType = newFile => {
     if (!accept || !accept.length) return true;
     const type = typeof accept === 'string' ? accept : accept.join('-');
@@ -859,10 +845,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     type: fileInfo.type,
     webkitRelativePath: fileInfo.webkitRelativePath
   });
-  const parseStringify2 = (fileInfo, inData) => JSON.stringify({
-    name: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo[inData ? 'FileName' : 'name'],
-    size: fileInfo === null || fileInfo === void 0 ? void 0 : fileInfo[inData ? 'FileSize' : 'size']
-  });
+
+  // const parseStringify2 = (fileInfo, inData) =>
+  //     JSON.stringify({
+  //         name: fileInfo?.[inData ? 'FileName' : 'name'],
+  //         size: fileInfo?.[inData ? 'FileSize' : 'size'],
+  //     });
+
   const mountDomain = item => {
     if (!item) return item;
     const cloneItem = JSON.parse(JSON.stringify(item));
@@ -897,26 +886,6 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       existClickOutOfItem = false;
     };
   }, []);
-  useEffect(() => {
-    let el = null;
-    if (error) {
-      attachTextRef.current.style.color = danger;
-      ref.current.style.borderColor = danger;
-      el = document.createElement('p');
-      el.classList.add('attachment-error');
-      el.innerHTML = error;
-      attachTextRef.current.parentNode.insertAdjacentElement('afterend', el);
-    }
-    return () => {
-      if (attachTextRef.current && ref.current) {
-        attachTextRef.current.style.color = null;
-        ref.current.style.borderColor = null;
-      }
-      if (el) {
-        el.remove();
-      }
-    };
-  }, [error]);
   useEffect(() => {
     setViewTypeState(viewType);
   }, [viewType]);
@@ -983,36 +952,38 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       // Load files data was uploaded
       const length = data.length;
       for (let i = 0; i < length; i++) {
-        const item = mountDomain(data[i]);
-        const newAttach = getItemHTMLFromData(item, i);
-        if (Object.prototype.toString.call(item) === '[object File]') {
-          allNewAttached.append('files', item);
-          newAttachedRef.current.push(item);
+        const newAttach = getItemHTMLFromData(data[i], i);
+        if (Object.prototype.toString.call(data[i]) === '[object File]') {
+          allNewAttached.append('files', data[i]);
+          newAttachedRef.current.push(data[i]);
+          attached.push(data[i]);
         } else {
+          const item = mountDomain(data[i]);
           oldAttached.push(item);
+          attached.push(item);
         }
-        attached.push(item);
         const newElement = document.createElement('div');
         newElement.className = 'attachment-row';
         ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
       }
     }
-    if (newAttachedRef.current) {
-      const length = newAttachedRef.current.length;
-      for (let i = length - 1; i >= 0; i--) {
-        const item = newAttachedRef.current[i];
-        if (checkExistingFileInData(item)) {
-          newAttachedRef.current.splice(i, 1);
-        } else {
-          const newAttach = getItemHTMLFromData(item, i);
-          allNewAttached.append('files', item);
-          attached.push(item);
-          const newElement = document.createElement('div');
-          newElement.className = 'attachment-row';
-          ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
-        }
-      }
-    }
+    // if (newAttachedRef.current) {
+    //     const length = newAttachedRef.current.length;
+
+    //     for (let i = length - 1; i >= 0; i--) {
+    //         const item = newAttachedRef.current[i];
+    //         if (checkExistingFileInData(item)) {
+    //             newAttachedRef.current.splice(i, 1);
+    //         } else {
+    //             const newAttach = getItemHTMLFromData(item, i);
+    //             allNewAttached.append('files', item);
+    //             attached.push(item);
+    //             const newElement = document.createElement('div');
+    //             newElement.className = 'attachment-row';
+    //             ReactDOM.render(newAttach, attachedRef.current.appendChild(newElement));
+    //         }
+    //     }
+    // }
     return () => {
       if (attachedRef.current) {
         attachedRef.current.innerHTML = null;
@@ -1065,66 +1036,61 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: 'DGN-UI-Attachment-Header'
   }, jsx("div", {
     css: AttachmentInfoCSS
-  }, jsx("p", {
-    css: AttachmentTextCSS,
+  }, jsx(Label, {
+    uppercase: true,
+    required: required,
+    disabled: disabled,
+    type: 'h5',
+    color: textSub,
     ref: attachTextRef
-  }, label, required && jsx("span", {
-    style: {
-      color: danger
-    }
-  }, " *"))), jsx("div", {
+  }, label), error ? jsx(HelperText, null, error) : null), jsx("div", {
     css: AttachmentHeaderIconCSS
   }, jsx("div", {
     css: AttachmentHandleIconCSS,
     ref: attachmentHandleIconRef
-  }, jsx("span", {
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
     className: 'view',
+    name: 'view',
     onClick: () => onGetViewItem()
-  }, jsx(View, {
-    color: 'currentColor',
-    viewBox: true
-  })), jsx("span", {
+  }), jsx(ButtonIcon, {
+    viewType: 'ghost',
     className: 'download',
+    name: 'download',
     onClick: onDownloadMultiple
-  }, jsx(Download, {
-    color: 'currentColor',
-    viewBox: true
-  })), !readOnly && jsx("span", {
+  }), !readOnly && jsx(ButtonIcon, {
+    viewType: 'ghost',
     className: 'delete',
+    name: 'delete',
     onClick: onShowPopup
-  }, jsx(Delete, {
-    color: 'currentColor',
-    viewBox: true
-  }))), jsx("div", {
-    css: AttachmentImageCSS,
-    ref: attachmentImageRef
+  })), jsx("div", {
+    css: isEmpty ? AttachmentImageEmptyCSS : AttachmentImageCSS
   }, !(readOnly || disabled) && jsx("div", {
     css: AttachmentImageCenterCSS
-  }, jsx("div", {
-    css: AttachmentImageContentCSS
-  }, jsx("span", {
-    css: AttachmentImageIconCSS,
-    ref: attachmentImageIconRef,
+  }, jsx(ButtonIcon, {
+    css: isEmpty && ButtonAttachmentCSS,
+    circular: isEmpty,
+    viewType: isEmpty ? 'text' : 'ghost',
+    name: 'Attachment',
+    size: isEmpty ? 'extraGiant' : 'medium',
     onClick: triggerClickInput
-  }, jsx(AttachmentIcon, {
-    viewBox: true,
-    color: 'currentColor'
-  })), jsx("span", {
-    css: AttachmentImageTextCSS
-  }, hintText)))), allowSort && jsx(ButtonIcon, {
+  }), isEmpty ? jsx(Typography, {
+    css: userSelectNone,
+    type: 'p3',
+    color: systemRest
+  }, hintText) : null)), allowSort && !isEmpty ? jsx(ButtonIcon, {
     viewType: 'ghost',
     name: 'Sort',
     ref: sortIconRef,
     style: {
-      marginRight: 8,
-      display: 'none'
+      marginRight: 8
     },
     onClick: onShowSortPopover
-  }), jsx(ButtonIcon, {
+  }) : null, jsx(ButtonIcon, {
     viewType: 'ghost',
     name: viewTypeState === 'detail' ? 'IconView' : 'ListView',
     onClick: () => setViewTypeState(viewTypeState === 'icon' ? 'detail' : 'icon')
-  }))), [allowSort, disabled, readOnly, label, required, hintText, viewTypeState]);
+  }))), [error, allowSort, disabled, readOnly, label, required, hintText, domain, viewTypeState, isEmpty]);
   const AttachmentInputView = useMemo(() => jsx("div", {
     css: AttachmentInputCSS,
     className: 'DGN-UI-Attachment-Input'
@@ -1254,26 +1220,13 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     color: 'danger'
   }));
 }));
-const ViewAttachTypeCSS = css`
-    ${cursorPointer};
-    ${parseHeight(24)};
-    color: ${rest};
-    &:hover {
-        color: ${active};
-    }
-`;
 const AttachmentHandleIconCSS = css`
     ${displayNone};
     ${parseHeight(24)};
-    margin-right: ${spacing([2.5])};
-    border-right: 1px solid ${normal};
-    span {
-        ${cursorPointer};
-        margin-right: ${spacing([2.5])};
-        color: ${rest};
-        &:hover {
-            color: ${active};
-        }
+    margin-right: ${spacing([2])};
+    border-right: 1px solid ${lineNormal};
+    button {
+        margin-right: ${spacing([2])};
     }
 `;
 const AttachmentHeaderCSS = css`
@@ -1281,26 +1234,11 @@ const AttachmentHeaderCSS = css`
     ${alignCenter};
     ${justifyBetween};
     ${borderBox};
-    ${parseHeight(48)};
     padding: ${spacing([4, 4])};
-    .css-${AttachmentHandleIconCSS.name}, .css-${ViewAttachTypeCSS.name} {
-        z-index: 1;
-    }
 `;
 const AttachmentInfoCSS = css`
     ${flexRow};
-    ${positionRelative};
-    ${alignCenter};
-    margin: 0;
-    & + p.attachment-error {
-        color: ${danger};
-    }
-`;
-const AttachmentTextCSS = css`
-    ${userSelectNone};
-    ${textUppercase};
-    ${heading5};
-    color: ${sub};
+    gap: ${spacing([2])};
 `;
 const AttachmentHeaderIconCSS = css`
     ${flexRow};
@@ -1322,64 +1260,23 @@ const AttachmentInputCSS = css`
     }
 `;
 const AttachmentImageCenterCSS = css`
-    ${flexRow};
+    ${flexCol};
     ${justifyCenter};
     ${alignCenter};
     ${parseWidthHeight('100%', '100%')};
 `;
-const AttachmentImageContentCSS = css`
-    ${textCenter};
-    display: grid;
-`;
-const AttachmentImageIconCSS = css`
-    ${parseWidthHeight(24, 24)};
-    margin-bottom: 0;
-    z-index: 3;
-    svg {
-        color: ${rest};
-    }
-    &:hover {
-        border-color: ${lineHover};
-        svg {
-            color: ${active};
-        }
-    }
-`;
-const AttachmentImageTextCSS = css`
-    ${displayNone};
-    ${userSelectNone};
-    ${paragraph3};
-    color: ${rest};
+const ButtonAttachmentCSS = css`
+    border: 1px dashed ${lineNormal} !important;
+    margin: ${spacing([0, 'auto', 4])};
 `;
 const AttachmentImageCSS = css`
-    margin-right: 10px;
-    &.hint-center {
-        ${positionAbsolute};
-        ${parseWidthHeight('100%', '100%')};
-        top: 0;
-        left: 0;
-        margin-right: 0;
-        z-index: 1;
-        .css-${AttachmentImageTextCSS.name} {
-            ${displayBlock};
-        }
-        .css-${AttachmentImageIconCSS.name} {
-            ${flexRow};
-            ${justifyCenter};
-            ${alignCenter};
-            ${parseWidthHeight(64, 64)};
-            margin: 0 auto 8px auto;
-            border: 1px dashed ${normal};
-            border-radius: 50%;
-            svg {
-                ${parseWidthHeight(40, 40)};
-            }
-            &:hover {
-                border-color: ${lineHover};
-                background-color: ${fillHover};
-            }
-        }
-    }
+    margin-right: ${spacing([2])};
+`;
+const AttachmentImageEmptyCSS = css`
+    ${positionAbsolute};
+    ${parseWidthHeight('100%', '100%')};
+    top: 0;
+    left: 0;
 `;
 const AttachedItemInfoCSS = css`
     ${flexRow};
@@ -1393,25 +1290,24 @@ const AttachedItemInfoIconCSS = css`
     ${flexRow};
     ${positionRelative};
     ${cursorPointer};
-    max-height: 16px;
-    max-width: 14px;
+    ${parseMaxWidthHeight(14, 16)};
     padding: ${spacing([1, 1.25])};
     box-sizing: content-box;
     &.new-file:after {
         content: '';
         ${positionAbsolute};
+        ${borderRadius50};
         ${parseWidthHeight(4, 4)}
         top: 4.5px;
         left: -2px;
-        border-radius: 50%;
-        background: ${success};
+        background: ${semanticSuccess};
     }
 `;
 const AttachedItemInfoNameCSS = css`
     ${paragraph1};
     ${cursorPointer};
     ${ellipsis};
-    color: ${dark};
+    color: ${systemDark};
     margin-left: ${spacing([3])};
     padding-top: ${spacing([0.25])};
     box-sizing: content-box;
@@ -1424,7 +1320,7 @@ const AttachedItemOwnerCSS = css`
     ${cursorPointer};
     ${userSelectNone};
     height: 100%;
-    color: ${sub};
+    color: ${textSub};
     .detail-info {
         ${flexRow};
         min-width: 333px;
@@ -1452,7 +1348,7 @@ const AttachedLinearCSS = css`
     ${alignCenter};
     ${parseWidthHeight('100%', '100%')};
     top: 0;
-    background: ${white};
+    background: ${systemWhite};
 `;
 const AttachedItemCSS = css`
     ${flexRow};
@@ -1562,15 +1458,10 @@ const AttachmentRootCSS = css`
     ${justifyStart};
     ${positionRelative};
     ${borderRadius4px};
-    ${border(1, normal)};
-    min-height: 165px;
-    padding-bottom: ${spacing([5])};
-    background-color: ${white};
-    &:hover:not(.disabled) {
-        .css-${AttachmentImageIconCSS.name} {
-            ${cursorPointer};
-        }
-    }
+    ${borderBox};
+    ${border(1, lineNormal)};
+    ${parseMinHeight(280)};
+    background-color: ${systemWhite};
     .css-${AttachedCSS.name} {
         &:not(.disabled) {
             .css-${AttachedItemCSS.name} {
@@ -1581,15 +1472,15 @@ const AttachmentRootCSS = css`
                     }
                 }
                 &:active {
-                    background-color: ${pressed};
+                    background-color: ${fillPressed};
                     .css-${AttachedLinearCSS.name} {
-                        background-color: ${pressed};
+                        background-color: ${fillPressed};
                     }
                 }
                 &.chosen {
-                    background-color: ${focus};
+                    background-color: ${fillFocus};
                     .css-${AttachedItemInfoCSS.name}, .css-${AttachedItemOwnerCSS.name} {
-                        background-color: ${focus};
+                        background-color: ${fillFocus};
                     }
                 }
             }

package/components/form-control/calendar/function.js

@@ -3,14 +3,14 @@
 
 import { css, jsx } from '@emotion/core';
 import { render } from 'react-dom';
-import { Button, ButtonIcon, Typography } from '../..';
-import { getGlobal } from '../../../global';
-import locale from '../../../locale';
-import theme from '../../../theme/settings';
-import { date as moment } from '../../../utils';
-import { color as colors } from '../../../styles/colors';
-import { typography } from '../../../styles/typography';
-import { alignCenter, border, borderBox, borderRadius4px, cursorPointer, flexCol, flexRow, inlineFlex, justifyBetween, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from '../../../styles/general';
+import { Button, ButtonIcon, Typography } from "../..";
+import { getGlobal } from "../../../global";
+import locale from "../../../locale";
+import theme from "../../../theme/settings";
+import { date as moment } from "../../../utils";
+import { color as colors } from "../../../styles/colors";
+import { typography } from "../../../styles/typography";
+import { alignCenter, border, borderBox, borderRadius4px, cursorPointer, flexCol, flexRow, inlineFlex, justifyBetween, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
 const {
   heading6
 } = typography;

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

@@ -4,8 +4,8 @@
 import { jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { date as moment } from '../../../utils';
-import { isAfterLimit, isBeforeLimit, onUpdateCalendar, renderHeader, renderNavigator, isValidDate, generateCalendarCSS } from './function';
+import { date as moment } from "../../../utils";
+import { isAfterLimit, isBeforeLimit, onUpdateCalendar, renderHeader, renderNavigator, isValidDate, generateCalendarCSS } from "./function";
 const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actions,
   className,

package/components/form-control/calendar/range.js

@@ -4,9 +4,9 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Divider } from '../..';
-import theme from '../../../theme/settings';
-import { generateCalendarCSS, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from './function';
+import { Divider } from "../..";
+import theme from "../../../theme/settings";
+import { generateCalendarCSS, isValidDate, onUpdateCalendar, renderHeader, renderNavigator } from "./function";
 const CalendarRange = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   actions,
   defaultValue,

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

@@ -3,11 +3,11 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useRef, useState, useImperativeHandle, Fragment } from 'react';
-import { Typography } from '../..';
-import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight, border } from '../../../styles/general';
-import { classNames, randomString, refType as ref } from '../../../utils';
-import { color as colors } from '../../../styles/colors';
-import theme from '../../../theme/settings';
+import { Typography } from "../..";
+import { alignCenter, alignStart, borderBox, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative, cursorNoDrop, parseWidthHeight, border } from "../../../styles/general";
+import { classNames, randomString, refType as ref } from "../../../utils";
+import { color as colors } from "../../../styles/colors";
+import theme from "../../../theme/settings";
 const {
   colors: {
     system: {

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

@@ -4,8 +4,8 @@
 import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { displayBlock, pointerEventsNone, positionRelative, userSelectNone } from '../../../styles/general';
-import { color as colors } from '../../../styles/colors';
+import { displayBlock, pointerEventsNone, positionRelative, userSelectNone } from "../../../styles/general";
+import { color as colors } from "../../../styles/colors";
 const {
   semantic: {
     danger