diginet-core-ui 1.3.79 → 1.3.80

package/components/popup/v2/index.js

@@ -4,15 +4,15 @@ import { memo, useEffect, useRef, useState, forwardRef, useImperativeHandle, Fra
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import useDelayUnmount from '../../../utils/useDelayUnmount';
-import Icon from '../../../icons';
-import { Button, ButtonIcon, Typography } from '../../';
-import { getGlobal } from '../../../global';
-import { hexToRGBA } from '../../../styles/color-helper';
-import { capitalize } from '../../../utils';
-import { animations } from '../../../styles/animation';
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, cursorPointer, displayBlock, ellipsis, flexCol, flexRow, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseWidth, parseWidthHeight, positionFixed, positionRelative } from '../../../styles/general';
-import theme from '../../../theme/settings';
+import useDelayUnmount from "../../../utils/useDelayUnmount";
+import Icon from "../../../icons";
+import { Button, ButtonIcon, Typography } from "../../";
+import { getGlobal } from "../../../global";
+import { hexToRGBA } from "../../../styles/color-helper";
+import { capitalize } from "../../../utils";
+import { animations } from "../../../styles/animation";
+import { alignCenter, border, borderBox, borderRadius4px, breakWord, cursorPointer, displayBlock, ellipsis, flexCol, flexRow, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseWidth, parseWidthHeight, positionFixed, positionRelative } from "../../../styles/general";
+import theme from "../../../theme/settings";
 const {
   colors: {
     system: {

package/components/progress/circular.js

@@ -3,9 +3,10 @@
 /** @jsx jsx */
 import { css, jsx, keyframes } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useMemo, useRef, useImperativeHandle } from 'react';
-import { borderRadius50, overflowHidden, parseWidthHeight, positionRelative, userSelectNone } from '../../styles/general';
-import { useColor as colors, useTheme } from '../../theme';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { displayInlineBlock, parseWidthHeight, userSelectNone } from "../../styles/general";
+import { useColor as colors, useTheme } from "../../theme";
+import { classNames } from "../../utils";
 const {
   colors: {
     semantic: {
@@ -27,68 +28,195 @@ const validatePercent = percent => {
   let per = +percent.toString().replace('%', '');
   return Math.max(Math.min(per, 100), 0);
 };
-const getDimension = size => {
-  let rect, strokeWidth, labelStyle;
+const getDimensionOld = size => {
+  let width, labelStyle, rect, strokeWidth;
   switch (size) {
     case 'xl':
     case 'extraLarge':
       labelStyle = heading1;
+      width = 240;
       rect = 120;
       strokeWidth = 16;
       break;
     case 'lg':
     case 'large':
       labelStyle = heading2;
+      width = 160;
       rect = 80;
       strokeWidth = 12;
       break;
     case 'md':
     case 'medium':
       labelStyle = paragraph1;
+      width = 120;
       rect = 60;
       strokeWidth = 8;
       break;
     case 'sm':
     case 'small':
       labelStyle = paragraph2;
+      width = 80;
       rect = 40;
       strokeWidth = 6;
       break;
     case 'xs':
     case 'extraSmall':
       labelStyle = paragraph3;
+      width = 40;
       rect = 20;
       strokeWidth = 4;
       break;
     default:
-      labelStyle = heading2;
-      rect = 80;
-      strokeWidth = 8;
+      return null;
   }
   return {
     labelStyle,
     rect,
-    strokeWidth
+    strokeWidth,
+    width
   };
 };
-const getDirection = direction => {
-  let angle;
-  switch (direction) {
-    case 'right':
-      angle = 0;
-      break;
-    case 'left':
-      angle = -180;
-      break;
-    case 'bottom':
-      angle = 90;
-      break;
-    case 'top':
-      angle = -90;
-      break;
+const designTemplate = [{
+  width: 16,
+  labelStyle: paragraph3,
+  rect: 8,
+  strokeWidth: 2
+}, {
+  width: 24,
+  labelStyle: paragraph3,
+  rect: 12,
+  strokeWidth: 2
+}, {
+  width: 40,
+  labelStyle: paragraph3,
+  rect: 20,
+  strokeWidth: 4
+}, {
+  width: 80,
+  labelStyle: paragraph2,
+  rect: 40,
+  strokeWidth: 6
+}, {
+  width: 120,
+  labelStyle: paragraph1,
+  rect: 60,
+  strokeWidth: 8
+}, {
+  width: 160,
+  labelStyle: heading2,
+  rect: 80,
+  strokeWidth: 12
+}, {
+  width: 240,
+  labelStyle: heading1,
+  rect: 120,
+  strokeWidth: 16
+}];
+const getDimension = size => {
+  const sizeObj = {
+    width: Number(size),
+    rect: size / 2
+  };
+  if (size <= 16) {
+    return {
+      ...designTemplate[0],
+      ...sizeObj
+    };
+  } else if (size >= 240) {
+    return {
+      ...designTemplate[designTemplate.length - 1],
+      ...sizeObj
+    };
+  } else {
+    const templateObj = designTemplate.reduce((acc, obj) =>
+    // Math.abs(size - obj.width) < Math.abs(size - acc.width) ? obj : acc
+    size > obj.width ? obj : acc);
+    return {
+      ...templateObj,
+      ...sizeObj
+    };
   }
-  return angle;
 };
+const directionAngleMap = new Map([['top', -90], ['bottom', 90], ['right', 0], ['left', -180]]);
+const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  background,
+  circleRef,
+  className,
+  color: colorProp,
+  determinate,
+  direction,
+  duration,
+  id,
+  percent,
+  percentColor: percentColorProp,
+  showValue,
+  size,
+  strokeWidth,
+  style,
+  width
+}, reference) => {
+  const ref = useRef(null);
+  if (!circleRef) circleRef = useRef(null);
+  const color = colors[colorProp] || colorProp;
+  const percentColor = colors[percentColorProp] || percentColorProp;
+  const directionAngle = directionAngleMap.get(direction);
+  const dimension = getDimensionOld(size) || getDimension(size);
+  const containerW = width ? Math.max(determinate ? 24 : 16, width) : dimension.width;
+  const circleStrokeW = strokeWidth ? Math.max(2, strokeWidth) : dimension.strokeWidth;
+  const radius = Math.max(0, (containerW - circleStrokeW) / 2);
+  const radiusX10 = radius * 10;
+  const circumference = radius * 2 * Math.PI;
+  const _ContainerCSS = ContainerCSS(containerW);
+  const _CircleBackgroundCSS = CircleBackgroundCSS(background, !determinate);
+  const _CircleMainCSS = CircleMainCSS(color);
+  const _CircleMainIndeterminateCSS = CircleMainIndeterminateCSS(radiusX10);
+  const _CircleMainDeterminateCSS = CircleMainDeterminateCSS(circumference, percent, directionAngle, duration);
+  const _TextCSS = TextCSS(percentColor, color, dimension);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  const CircleBackgroundView = jsx("circle", {
+    css: _CircleBackgroundCSS,
+    cx: containerW / 2,
+    cy: containerW / 2,
+    r: radius,
+    strokeWidth: circleStrokeW
+  });
+  const CircleMainView = jsx("circle", {
+    css: [_CircleMainCSS, determinate ? _CircleMainDeterminateCSS : _CircleMainIndeterminateCSS],
+    cx: containerW / 2,
+    cy: containerW / 2,
+    r: radius,
+    strokeWidth: circleStrokeW,
+    ref: circleRef
+  });
+  const PercentTextView = showValue && determinate && containerW >= 40 ? jsx("text", {
+    css: _TextCSS,
+    dominantBaseline: 'middle',
+    x: containerW / 2,
+    y: containerW / 2 + containerW / 80
+  }, validatePercent(percent), "%") : null;
+  return useMemo(() => {
+    return jsx("span", {
+      ref: ref,
+      css: [_ContainerCSS, !determinate && AnimationRotateCSS],
+      id: id,
+      style: style,
+      className: classNames('DGN-UI-Circular-Progress', className)
+    }, jsx("svg", {
+      width: '100%',
+      height: '100%'
+    }, CircleBackgroundView, CircleMainView, PercentTextView));
+  }, [background, className, colorProp, determinate, direction, duration, id, percent, percentColorProp, showValue, size, strokeWidth, style, width]);
+}));
 const keyframeRotate = keyframes`
 	100%{ transform: rotate(360deg);}
 `;
@@ -107,35 +235,27 @@ const keyframeDash = r => keyframes`
 	}
 `;
 const ContainerCSS = containerW => css`
+    ${displayInlineBlock};
     ${parseWidthHeight(containerW)};
-    ${overflowHidden};
-    ${positionRelative};
-    ${borderRadius50};
 `;
 const AnimationRotateCSS = css`
     animation: ${keyframeRotate} 2s linear infinite;
 `;
-const CircleBackgroundCSS = (background, circleStrokeW, isIndeterminate) => css`
-    ${overflowHidden};
-    ${borderRadius50};
+const CircleBackgroundCSS = (background, isIndeterminate) => css`
     fill: transparent;
     stroke: ${background};
-    stroke-width: ${circleStrokeW}px;
     ${isIndeterminate && 'stroke-linecap: round'};
 `;
-const CircleMainCSS = (color, circleStrokeW) => css`
-    ${overflowHidden};
-    ${borderRadius50};
+const CircleMainCSS = color => css`
     fill: transparent;
     stroke: ${color};
     stroke-linecap: round;
-    stroke-width: ${circleStrokeW}px;
 `;
-const CircleMainDeterminateCSS = (circumference, percent, direction, duration) => css`
+const CircleMainDeterminateCSS = (circumference, percent, directionAngle, duration) => css`
     stroke-dasharray: ${`${circumference} ${circumference}`};
     stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
-    transform: rotate(${getDirection(direction)}deg);
-    transform-origin: 50% 50%;
+    transform: rotate(${directionAngle}deg);
+    transform-origin: center;
     transition: stroke-dashoffset ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
 `;
 const CircleMainIndeterminateCSS = radiusX10 => css`
@@ -149,221 +269,9 @@ const TextCSS = (percentColor, color, dimension) => css`
     ${dimension.labelStyle}
     text-anchor: middle;
 `;
-
-/**
- * Determinate circular progress
- */
-const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  background,
-  circleRef,
-  color,
-  direction,
-  duration,
-  percentColor,
-  percent,
-  showValue,
-  size,
-  strokeWidth,
-  width,
-  ...props
-}, reference) => {
-  const ref = useRef(null);
-  if (!circleRef) circleRef = useRef(null);
-  const dimension = getDimension(size);
-  const containerW = width ? Math.max(24, width) : dimension.rect * 2;
-  const circleStrokeW = strokeWidth ? Math.max(2, strokeWidth) : dimension.strokeWidth;
-  const radius = containerW / 2 - circleStrokeW;
-  const circumference = radius * 2 * Math.PI;
-  const _ContainerCSS = ContainerCSS(containerW);
-  const _CircleBackgroundCSS = CircleBackgroundCSS(background, circleStrokeW);
-  const _CircleMainCSS = CircleMainCSS(color, circleStrokeW);
-  const _CircleMainDeterminateCSS = CircleMainDeterminateCSS(circumference, percent, direction, duration);
-  const _TextCSS = TextCSS(percentColor, color, dimension);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const CircleBackgroundMemo = useMemo(() => jsx("circle", {
-    css: _CircleBackgroundCSS,
-    cx: containerW / 2,
-    cy: containerW / 2,
-    r: radius
-  }), [background, size, strokeWidth, width]);
-  const CircleMainMemo = useMemo(() => jsx("circle", {
-    css: [_CircleMainCSS, _CircleMainDeterminateCSS],
-    cx: containerW / 2,
-    cy: containerW / 2,
-    r: radius,
-    ref: circleRef
-  }), [color, direction, duration, percent, size, strokeWidth, width]);
-  const PercentTextMemo = useMemo(() => showValue && jsx("text", {
-    css: _TextCSS,
-    dominantBaseline: 'middle',
-    x: containerW / 2,
-    y: containerW / 2 + containerW / 80
-  }, validatePercent(percent), "%"), [color, percentColor, percent, size, strokeWidth, showValue, width]);
-  return jsx("svg", {
-    ...props,
-    css: _ContainerCSS,
-    ref: ref
-  }, CircleBackgroundMemo, CircleMainMemo, PercentTextMemo);
-}));
-Determinate.defaultProps = {
-  background: lineCategory,
-  color: semanticInfo,
-  direction: 'top',
-  duration: 2,
-  percent: 25,
-  showValue: false,
-  size: 'medium'
-};
-Determinate.propTypes = {
-  /** Color for background stroke of the circular progress. */
-  background: PropTypes.string,
-  /** Color for main stroke of the circular progress. */
-  color: PropTypes.string,
-  /** Direction of the start point. */
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  /** Time to processing. */
-  duration: PropTypes.number,
-  /** The percent of the progress. */
-  percent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Color percent-label of the progress. */
-  percentColor: PropTypes.string,
-  /** It's boolean to show the percent-label. */
-  showValue: PropTypes.bool,
-  /** Static dimensions default. */
-  size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs', 'extraLarge', 'large', 'medium', 'small', 'extraSmall']),
-  /** Dynamic width dimensions of the progress circle. */
-  strokeWidth: PropTypes.number,
-  /** Dynamic width and height dimensions of the container. */
-  width: PropTypes.number
-};
-export const DeterminateCircularProgress = Determinate;
-
-/**
- * Indeterminate circular progress
- */
-const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  background,
-  circleRef,
-  color,
-  size,
-  strokeWidth,
-  width,
-  ...props
-}, reference) => {
-  const ref = useRef(null);
-  if (!circleRef) circleRef = useRef(null);
-  const dimension = getDimension(size);
-  const containerW = width ? Math.max(16, width) : dimension.rect * 2;
-  const circleStrokeW = strokeWidth ? Math.max(2, strokeWidth) : dimension.strokeWidth;
-  const radius = containerW / 2 - circleStrokeW;
-  const radiusX10 = radius * 10;
-  const _ContainerCSS = ContainerCSS(containerW);
-  const _CircleBackgroundCSS = CircleBackgroundCSS(background, circleStrokeW, true);
-  const _CircleMainCSS = CircleMainCSS(color, circleStrokeW);
-  const _CircleMainIndeterminateCSS = CircleMainIndeterminateCSS(radiusX10);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const CircleBackgroundMemo = useMemo(() => jsx("circle", {
-    css: _CircleBackgroundCSS,
-    cx: containerW / 2,
-    cy: containerW / 2,
-    r: radius
-  }), [background, size, strokeWidth, width]);
-  const CircleMainMemo = useMemo(() => jsx("circle", {
-    css: [_CircleMainCSS, _CircleMainIndeterminateCSS],
-    cx: containerW / 2,
-    cy: containerW / 2,
-    r: radius,
-    ref: circleRef
-  }), [color, size, strokeWidth, width]);
-  return jsx("svg", {
-    ...props,
-    css: [_ContainerCSS, AnimationRotateCSS],
-    ref: ref
-  }, CircleBackgroundMemo, CircleMainMemo);
-}));
-Indeterminate.defaultProps = {
-  background: lineCategory,
-  color: semanticInfo,
-  size: 'medium'
-};
-Indeterminate.propTypes = {
-  /** Color for background stroke of the circular progress. */
-  background: PropTypes.string,
-  /** Color for main stroke of the circular progress. */
-  color: PropTypes.string,
-  /** Static dimensions default. */
-  size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs', 'extraLarge', 'large', 'medium', 'small', 'extraSmall']),
-  /** Dynamic width dimensions of the progress circle. */
-  strokeWidth: PropTypes.number,
-  /** Dynamic width and height dimensions of the container. */
-  width: PropTypes.number
-};
-export const IndeterminateCircularProgress = Indeterminate;
-
-/**
- * Circular progress
- */
-const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  determinate,
-  direction,
-  duration,
-  percent,
-  percentColor: percentColorProp,
-  showValue,
-  color: colorProp,
-  ...props
-}, reference) => {
-  const ref = useRef(null);
-  const color = colors[colorProp] || colorProp;
-  const percentColor = colors[percentColorProp] || percentColorProp;
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return determinate ? jsx(DeterminateCircularProgress, {
-    ref: ref,
-    color: color,
-    direction: direction,
-    duration: duration,
-    percent: percent,
-    percentColor: percentColor,
-    showValue: true,
-    ...props
-  }) : jsx(IndeterminateCircularProgress, {
-    ref: ref,
-    color: color,
-    ...props
-  });
-}));
 CircularProgress.defaultProps = {
   background: lineCategory,
+  className: '',
   color: semanticInfo,
   determinate: false,
   direction: 'top',
@@ -371,11 +279,14 @@ CircularProgress.defaultProps = {
   percent: 25,
   percentColor: semanticInfo,
   showValue: false,
-  size: 'medium'
+  size: 'medium',
+  style: {}
 };
 CircularProgress.propTypes = {
   /** Color for background stroke of the circular progress. */
   background: PropTypes.string,
+  /** Class for component. */
+  className: PropTypes.string,
   /** Color for main stroke of the circular progress. */
   color: PropTypes.string,
   /** Determinate or Indeterminate. */
@@ -388,13 +299,11 @@ CircularProgress.propTypes = {
   percent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** Color percent-label of the progress. */
   percentColor: PropTypes.string,
-  /** It's boolean to show the percent-label. */
+  /** If `true, show the percent-label. */
   showValue: PropTypes.bool,
-  /** Static dimensions default. */
-  size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs', 'extraLarge', 'large', 'medium', 'small', 'extraSmall']),
-  /** Dynamic width dimensions of the progress circle. */
-  strokeWidth: PropTypes.number,
-  /** Dynamic width and height dimensions of the container. */
-  width: PropTypes.number
+  /** The size of the component. */
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs', 'extraLarge', 'large', 'medium', 'small', 'extraSmall'])]),
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default CircularProgress;

package/components/progress/linear.js

@@ -3,8 +3,8 @@
 import { jsx, css, keyframes } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
-import theme from '../../theme/settings';
-import { Typography } from '../';
+import theme from "../../theme/settings";
+import { Typography } from "../";
 const cutPX = x => {
   return isNaN(x) ? x : x + 'px';
 };

package/components/rating/index.js

@@ -3,12 +3,12 @@
 import { memo, useMemo, useRef, useState, useEffect, forwardRef, Fragment, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { StarHalf, StarOutline } from '../../icons';
-import { randomString } from '../../utils';
-import { hexToRGBA } from '../../styles/color-helper';
-import { color as colors } from '../../styles/colors';
-import theme from '../../theme/settings';
-import { alignCenter, border, cursorPointer, flexRow, flexRowReverse, inlineFlex, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative } from '../../styles/general';
+import { StarHalf, StarOutline } from "../../icons";
+import { randomString } from "../../utils";
+import { hexToRGBA } from "../../styles/color-helper";
+import { color as colors } from "../../styles/colors";
+import theme from "../../theme/settings";
+import { alignCenter, border, cursorPointer, flexRow, flexRowReverse, inlineFlex, outlineNone, overflowHidden, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
 const {
   colors: {
     system: {

package/components/slider/slider-container.js

@@ -4,10 +4,10 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { ButtonIcon } from '..';
-import { randomString } from '../../utils';
-import SliderItem from './slider-item';
-import { color as colors } from '../../styles/colors';
-import { alignCenter, backgroundTransparent, borderBox, cursorPointer, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import { randomString } from "../../utils";
+import SliderItem from "./slider-item";
+import { color as colors } from "../../styles/colors";
+import { alignCenter, backgroundTransparent, borderBox, cursorPointer, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
 const {
   system: {
     active,

package/components/slider/slider-item.js

@@ -2,11 +2,11 @@
 /** @jsx jsx */
 import { forwardRef, memo, useEffect, useState, useRef, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
-import { randomString, getFileType } from '../../utils';
+import { randomString, getFileType } from "../../utils";
 import PropTypes from 'prop-types';
-import { IndeterminateCircularProgress } from '../progress/circular';
-import { animations } from '../../styles/animation';
-import { displayBlock, displayNone, justifyCenter, positionAbsolute } from '../../styles/general';
+import CircularProgress from "../progress/circular";
+import { animations } from "../../styles/animation";
+import { displayBlock, displayNone, justifyCenter, positionAbsolute } from "../../styles/general";
 const fadeIn = animations.fadeIn;
 const regex = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&/=]*)/g;
 const googleDriveRegex = /(http(s)?:\/\/.)?(drive\.google\.com\/file\/d\/)/;
@@ -152,7 +152,7 @@ const SliderItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: ref
   }, iframeTimeoutId && getFileType(url, undefined, false) === 'pdf' && jsx("div", {
     css: loadingCSS
-  }, jsx(IndeterminateCircularProgress, {
+  }, jsx(CircularProgress, {
     size: 'xs'
   })), getViewer(url, getFileType(url, undefined, false)));
 }));

package/components/status/index.js

@@ -3,11 +3,11 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { Typography } from '../';
-import Icon from '../../icons';
-import { alignCenter, backgroundTransparent, borderBox, flexRow } from '../../styles/general';
-import theme from '../../theme/settings';
-import OptionWrapper from '../others/option-wrapper';
+import { Typography } from "../";
+import Icon from "../../icons";
+import { alignCenter, backgroundTransparent, borderBox, flexRow } from "../../styles/general";
+import theme from "../../theme/settings";
+import OptionWrapper from "../others/option-wrapper";
 const {
   colors: {
     system: {

package/components/tab/tab-container.js

@@ -3,10 +3,10 @@
 import React, { forwardRef, useState, memo, useEffect, useRef, useImperativeHandle, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { classNames, randomString, refType as ref } from '../../utils';
-import TabContext from './context';
-import { isNumeric } from '../../utils/type';
-import { flexCol, flexRow, positionRelative, parseWidth, typographyTypes } from '../../styles/general';
+import { classNames, randomString, refType as ref } from "../../utils";
+import TabContext from "./context";
+import { isNumeric } from "../../utils/type";
+import { flexCol, flexRow, positionRelative, parseWidth, typographyTypes } from "../../styles/general";
 const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,