diginet-core-ui 1.4.39 → 1.4.40

package/components/popup/v2/index.js

@@ -1,398 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Button, ButtonIcon, Icon, Typography } from "../..";
-import { getGlobal } from "../../../global";
-import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { animations } from "../../../styles/animation";
-import { hexToRGBA } from "../../../styles/color-helper";
-import { bgColor, border, borderRadius, borderRadius50, boxBorder, breakWord, cursorPointer, displayBlock, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyCenter, justifyEnd, overflowAuto, overflowHidden, parseHeight, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, positionFixed, positionRelative, shadowSmall, textColor, textEllipsis, textUnderline, truncate, z } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import { classNames, getProp, useDelayUnmount } from "../../../utils";
-const colorMap = new Map([['yesno', 'semantic/info'], ['success', 'semantic/success'], ['warning', 'semantic/warning'], ['danger', 'semantic/danger'], ['info', 'semantic/info']]);
-const titleMap = new Map([['yesno', 'notify'], ['success', 'confirm'], ['warning', 'warning'], ['danger', 'error'], ['info', 'notify']]);
-const iconMap = new Map([['yesno', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'Failed'], ['info', 'Info']]);
-const fadeInDown = animations.fadeInDown;
-const fadeOutUp = animations.fadeOutUp;
-const Popup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  action = {},
-  cancelProps,
-  className,
-  confirmProps,
-  description,
-  icon,
-  noText,
-  onCancel,
-  onClose,
-  onConfirm,
-  open,
-  pressESCToClose,
-  style,
-  subtitle,
-  title,
-  top,
-  type,
-  width,
-  yesText,
-  ...props
-}, reference) => {
-  if (!reference) reference = useRef(null);
-  const ref = useRef(null);
-  const statusAction = useRef('');
-  const [openState, setOpenState] = useState(open);
-  const [custom, setCustom] = useState(null);
-  const [showMoreDescription, setShowMoreDescription] = useState(false);
-  const [descriptionLines, setDescriptionLines] = useState(0);
-  const showPopup = useDelayUnmount(openState, 200);
-  const theme = useTheme();
-  const _PopupRootCSS = PopupRootCSS(width, top, type, description, subtitle, showMoreDescription, descriptionLines, theme);
-  const pressESCHandler = event => {
-    if (event.key === 'Escape') {
-      onClosePopup('isClose');
-    }
-  };
-  const onShowPopup = (options, cb) => {
-    if (options && typeof options === 'object' && Object.keys(options).length) {
-      const newProps = {
-        type: options.type !== undefined ? options.type : type,
-        title: options.title !== undefined ? options.title : title,
-        icon: options.icon !== undefined ? options.icon : icon,
-        description: options.description !== undefined ? options.description : description,
-        yesText: options.yesText !== undefined ? options.yesText : yesText,
-        noText: options.noText !== undefined ? options.noText : noText,
-        confirmProps: options.confirmProps !== undefined ? options.confirmProps : confirmProps,
-        cancelProps: options.cancelProps !== undefined ? options.cancelProps : cancelProps,
-        onCancel: cb ? () => cb(false) : options.onCancel !== undefined ? options.onCancel : onCancel,
-        onConfirm: cb ? () => cb(true) : options.onConfirm !== undefined ? options.onConfirm : onConfirm
-      };
-      const popup = jsx(Fragment, null, PopupHeaderView(newProps.title, newProps.type), jsx("div", {
-        className: 'DGN-UI-Popup-Body'
-      }, newProps.icon !== false ? jsx("div", {
-        className: 'DGN-UI-Popup-Body-Icon'
-      }, jsx(Icon, {
-        name: newProps.icon === true ? iconMap.get(newProps.type) : newProps.icon,
-        width: 40,
-        height: 40,
-        color: colorMap.get(newProps.type)
-      })) : null, jsx("div", {
-        className: 'DGN-UI-Popup-Body-Description'
-      }, jsx(Typography, {
-        type: 'p2'
-      }, newProps.description))), PopupActionView(newProps.onConfirm, newProps.confirmProps, newProps.onCancel, newProps.cancelProps, newProps.type, newProps.yesText, newProps.noText));
-      setCustom(popup);
-    } else {
-      setCustom(false);
-    }
-    setOpenState(true);
-  };
-  const onClosePopup = mode => {
-    if (onClose) {
-      setOpenState(false);
-      statusAction.current = mode;
-    } else {
-      if (ref.current) {
-        setOpenState(false);
-      }
-    }
-  };
-  const onRefChange = useCallback(node => {
-    if (node) {
-      setDescriptionLines(Math.round((node === null || node === void 0 ? void 0 : node.offsetHeight) / 18)); //18 is line-height of Typography p2
-      setShowMoreDescription(false);
-    }
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setOpenState(open);
-      setShowMoreDescription(true);
-    } else if (openState) {
-      onClosePopup('isClose');
-    }
-  }, [open]);
-  useEffect(() => {
-    if (openState) {
-      if (pressESCToClose) {
-        document.addEventListener('keydown', pressESCHandler);
-      }
-    } else {
-      setCustom(null);
-      if (onClose) onClose({
-        action: statusAction.current
-      });
-    }
-    return () => {
-      document.removeEventListener('keydown', pressESCHandler);
-    };
-  }, [openState]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {
-      show: onShowPopup,
-      close: onClosePopup,
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    currentRef.show = onShowPopup;
-    currentRef.close = onClosePopup;
-    return currentRef;
-  });
-  const PopupHeaderView = (title, type) => {
-    return jsx("div", {
-      className: 'DGN-UI-Popup-Header'
-    }, jsx(Typography, {
-      className: 'DGN-UI-Popup-Header-Title',
-      type: 'h3',
-      color: 'inherit'
-    }, title !== null && title !== void 0 ? title : getGlobal(titleMap.get(type))), jsx(ButtonIcon, {
-      circular: true,
-      viewType: 'text',
-      color: type === 'yesno' ? 'info' : type,
-      name: 'Close',
-      onClick: () => onClosePopup('isClose')
-    }));
-  };
-  const PopupBodyView = (icon, type, subtitle, description) => {
-    return jsx("div", {
-      className: 'DGN-UI-Popup-Body'
-    }, icon !== false ? jsx("div", {
-      className: 'DGN-UI-Popup-Body-Icon'
-    }, jsx(Icon, {
-      name: icon === true ? iconMap.get(type) : icon,
-      width: 40,
-      height: 40,
-      color: colorMap.get(type)
-    })) : null, jsx("div", {
-      className: 'DGN-UI-Popup-Body-Description'
-    }, jsx(Typography, {
-      type: 'p2'
-    }, subtitle ? jsx(Typography, {
-      className: 'DGN-UI-Popup-Body-Subtitle',
-      fullWidth: true
-    }, subtitle) : null, jsx(Typography, {
-      ref: onRefChange,
-      type: 'p2',
-      className: 'DGN-UI-Popup-Body-Detail'
-    }, description), subtitle && descriptionLines > 1 || descriptionLines > 3 ? jsx("span", {
-      className: 'DGN-More-Action',
-      onClick: () => setShowMoreDescription(!showMoreDescription)
-    }, getGlobal(showMoreDescription ? 'showLess' : 'showMore')) : null)));
-  };
-  const PopupActionView = (onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText) => {
-    return onConfirm || onCancel || type === 'yesno' ? jsx("div", {
-      className: 'DGN-UI-Popup-Action'
-    }, onConfirm || type === 'yesno' ? jsx(Button, {
-      viewType: 'filled',
-      label: yesText || getGlobal('ok').toUpperCase(),
-      color: type === 'yesno' ? 'info' : type,
-      onClick: () => {
-        onClosePopup('isConfirm');
-        onConfirm && onConfirm();
-      },
-      ...confirmProps
-    }) : null, onCancel || type === 'yesno' ? jsx(Button, {
-      viewType: 'outlined',
-      label: noText || getGlobal('cancel').toUpperCase(),
-      color: type === 'yesno' ? 'info' : type,
-      onClick: () => {
-        onClosePopup('isCancel');
-        onCancel && onCancel();
-      },
-      ...cancelProps
-    }) : null) : null;
-  };
-  return showPopup && /*#__PURE__*/createPortal(jsx("div", {
-    css: _PopupRootCSS,
-    ref: ref,
-    style: style,
-    className: classNames('DGN-UI-Portal DGN-UI-Popup-Portal', className)
-  }, jsx("div", {
-    className: classNames('DGN-UI-Popup', openState ? 'DGN-Show' : 'DGN-Hide'),
-    ...props
-  }, custom ? custom : jsx(Fragment, null, PopupHeaderView(title, type), PopupBodyView(icon, type, subtitle, description), PopupActionView(onConfirm, confirmProps, onCancel, cancelProps, type, yesText, noText)))), document.body);
-}));
-const PopupRootCSS = (width, top, type, description, subtitle, showMoreDescription, descriptionLines, {
-  colors,
-  spacing
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${positionFixed};
-    ${justifyCenter};
-    ${breakWord};
-    ${parseWidthHeight('100%')};
-    ${inset(0)};
-    ${bgColor(hexToRGBA(getProp(colors, 'system/on-standard'), 0.5))};
-    ${z(2)};
-    .DGN-UI-Popup {
-        ${displayFlex};
-        ${flexCol};
-        ${boxBorder};
-        ${borderRadius(4)};
-        ${parseWidthHeight(width, 'fit-content')};
-        ${parseMaxWidthHeight('80%')};
-        ${bgColor(getProp(colors, 'system/standard'))};
-        margin: ${isNaN(top) ? top : top + 'px'} auto auto;
-        ${shadowSmall};
-        &.DGN-Show {
-            animation: ${fadeInDown} 0.2s ease;
-        }
-        &.DGN-Hide {
-            animation: ${fadeOutUp} 0.3s ease;
-            animation-fill-mode: forwards;
-        }
-        .DGN-UI-Popup-Header {
-            ${displayFlex};
-            ${flexRow};
-            ${itemsCenter};
-            ${parseMinHeight(40)};
-            padding: ${spacing([0, 2, 0, 4])};
-            ${borderRadius('4px 4px 0px 0px')};
-            .DGN-UI-Popup-Header-Title {
-                ${displayFlex};
-                ${flexRow};
-                ${truncate};
-                ${parseWidth('calc(100% - 24px)')};
-            }
-            ${textColor(getProp(colors, colorMap.get(type)))};
-            ${bgColor(hexToRGBA(getProp(colors, colorMap.get(type)), 0.15))};
-        }
-        .DGN-UI-Popup-Body {
-            ${displayFlex};
-            ${flexRow};
-            ${positionRelative};
-            ${overflowAuto};
-            padding: ${spacing([4])};
-            flex: 1 1 auto;
-            &::-webkit-scrollbar {
-                ${borderRadius(4)};
-                ${parseWidth(24)};
-                ${bgColor(getProp(colors, 'system/standard'))};
-            }
-            &::-webkit-scrollbar-thumb {
-                ${border(8, 'transparent')};
-                ${borderRadius(24)};
-                mix-blend-mode: normal;
-                ${bgColor(getProp(colors, 'fill/scrollbar_rest'))};
-                background-clip: content-box;
-            }
-            &::-webkit-scrollbar-thumb:hover {
-                ${border(8, 'transparent')};
-                ${borderRadius(24)};
-                mix-blend-mode: normal;
-                ${bgColor(getProp(colors, 'fill/hover'))};
-                background-clip: content-box;
-            }
-            .DGN-UI-Popup-Body-Icon {
-                ${displayBlock};
-                ${borderRadius50};
-                ${parseWidth(40)};
-                margin-right: ${spacing([4])};
-            }
-            .DGN-UI-Popup-Body-Description {
-                ${displayFlex};
-                ${flexRow};
-                ${positionRelative};
-                ${itemsCenter};
-                ${parseMinHeight(40)};
-                ${parseHeight('max-content')};
-                .DGN-UI-Popup-Body-Subtitle {
-                    margin-bottom: ${spacing([(description === null || description === void 0 ? void 0 : description.length) > 0 ? 2 : 0])};
-                }
-                .DGN-UI-Popup-Body-Detail {
-                    ${overflowHidden};
-                    ${textEllipsis};
-                    display: -webkit-box;
-                    -webkit-line-clamp: ${showMoreDescription ? 'none' : subtitle && descriptionLines > 1 ? 1 : descriptionLines > 3 ? 3 : 'none'};
-                    -webkit-box-orient: vertical;
-                }
-                .DGN-More-Action {
-                    ${displayBlock};
-                    ${cursorPointer};
-                    ${parseWidth('fit-content')};
-                    margin-top: ${spacing([4])};
-                    margin-bottom: ${spacing([type === 'yesno' ? 0 : 2])};
-                    ${textUnderline};
-                    ${textColor(getProp(colors, 'semantic/info'))};
-                }
-            }
-        }
-        .DGN-UI-Popup-Action {
-            ${displayFlex};
-            ${flexRow};
-            ${justifyEnd};
-            padding: ${spacing([2, 4, 4, 4])};
-            .DGN-UI-Button {
-                ${parseMinWidth(80)};
-                margin: ${spacing([0])};
-                &.filled {
-                    margin-right: ${spacing([2])};
-                }
-            }
-        }
-    }
-`;
-Popup.defaultProps = {
-  className: '',
-  description: '',
-  icon: true,
-  open: false,
-  pressESCToClose: false,
-  style: {},
-  top: 56,
-  type: 'info',
-  width: 480
-};
-Popup.propTypes = {
-  /** If `true`, the component is shown. */
-  open: PropTypes.bool,
-  /** [Props](https://core.diginet.com.vn/ui/?path=/story/button) applied to the cancel `Button`. */
-  cancelProps: PropTypes.object,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** [Props](https://core.diginet.com.vn/ui/?path=/story/button) applied to the confirm `Button`. */
-  confirmProps: PropTypes.object,
-  /** Details content of the component. */
-  description: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic) display before content. */
-  icon: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /** Label of cancel button. */
-  noText: PropTypes.string,
-  /** Callback fired when click on cancel button. */
-  onCancel: PropTypes.func,
-  /** Callback fired when click on confirm button. */
-  onConfirm: PropTypes.func,
-  /** If `true`, hitting escape will close component. */
-  pressESCToClose: PropTypes.bool,
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Main content of the component. */
-  subtitle: PropTypes.node,
-  /** Title of the component. */
-  title: PropTypes.node,
-  /** Top position of the component. */
-  top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Type of the component. */
-  type: PropTypes.oneOf(['info', 'success', 'warning', 'danger', 'yesno']),
-  /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Label of confirm button. */
-  yesText: PropTypes.string
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * show(options, callback): Show popup
-   *  * @param {options} - object
-   *      * {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}
-   *  * @param {callback} - func
-   *      * Callback fired after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options
-   * * close(): Close popup
-   */
-};
-export default Popup;

package/components/progress/circular.js

@@ -1,296 +0,0 @@
-/* eslint-disable no-unused-vars */
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx, keyframes } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { displayInlineBlock, fill, parseWidthHeight, userSelectNone } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { classNames, getProp } from "../../utils";
-const validatePercent = percent => {
-  let per = +percent.toString().replace('%', '');
-  return Math.max(Math.min(per, 100), 0);
-};
-const getDimensionOld = (size, theme) => {
-  let width, labelStyle, rect, strokeWidth;
-  switch (size) {
-    case 'xl':
-    case 'extraLarge':
-      labelStyle = theme.typography.heading1;
-      width = 240;
-      rect = 120;
-      strokeWidth = 16;
-      break;
-    case 'lg':
-    case 'large':
-      labelStyle = theme.typography.heading2;
-      width = 160;
-      rect = 80;
-      strokeWidth = 12;
-      break;
-    case 'md':
-    case 'medium':
-      labelStyle = theme.typography.paragraph1;
-      width = 120;
-      rect = 60;
-      strokeWidth = 8;
-      break;
-    case 'sm':
-    case 'small':
-      labelStyle = theme.typography.paragraph2;
-      width = 80;
-      rect = 40;
-      strokeWidth = 6;
-      break;
-    case 'xs':
-    case 'extraSmall':
-      labelStyle = theme.typography.paragraph3;
-      width = 40;
-      rect = 20;
-      strokeWidth = 4;
-      break;
-    default:
-      return null;
-  }
-  return {
-    labelStyle,
-    rect,
-    strokeWidth,
-    width
-  };
-};
-const getDimension = (size, theme) => {
-  const sizeObj = {
-    width: Number(size),
-    rect: size / 2
-  };
-  const designTemplate = [{
-    width: 16,
-    labelStyle: theme.typography.paragraph3,
-    rect: 8,
-    strokeWidth: 2
-  }, {
-    width: 24,
-    labelStyle: theme.typography.paragraph3,
-    rect: 12,
-    strokeWidth: 2
-  }, {
-    width: 40,
-    labelStyle: theme.typography.paragraph3,
-    rect: 20,
-    strokeWidth: 4
-  }, {
-    width: 80,
-    labelStyle: theme.typography.paragraph2,
-    rect: 40,
-    strokeWidth: 6
-  }, {
-    width: 120,
-    labelStyle: theme.typography.paragraph1,
-    rect: 60,
-    strokeWidth: 8
-  }, {
-    width: 160,
-    labelStyle: theme.typography.heading2,
-    rect: 80,
-    strokeWidth: 12
-  }, {
-    width: 240,
-    labelStyle: theme.typography.heading1,
-    rect: 120,
-    strokeWidth: 16
-  }];
-  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
-    };
-  }
-};
-const directionAngleMap = new Map([['top', -90], ['bottom', 90], ['right', 0], ['left', -180]]);
-const CircularProgress = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  action = {},
-  background: backgroundProp,
-  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 theme = useTheme();
-  const directionAngle = directionAngleMap.get(direction);
-  const dimension = getDimensionOld(size, theme) || getDimension(size, theme);
-  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 background = getProp(theme.colors, backgroundProp, backgroundProp);
-  const color = getProp(theme.colors, colorProp, colorProp);
-  const percentColor = getProp(theme.colors, percentColorProp, percentColorProp);
-  const _ContainerCSS = ContainerCSS(containerW, directionAngle);
-  const _CircleBackgroundCSS = CircleBackgroundCSS(background, !determinate, theme);
-  const _CircleMainCSS = CircleMainCSS(color, theme);
-  const _CircleMainIndeterminateCSS = CircleMainIndeterminateCSS(radiusX10);
-  const _CircleMainDeterminateCSS = CircleMainDeterminateCSS(circumference, percent, duration);
-  const _TextCSS = TextCSS(percentColor, color, dimension, directionAngle, theme);
-  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));
-  }, [backgroundProp, className, colorProp, determinate, direction, duration, id, percent, percentColorProp, showValue, size, strokeWidth, style, width, theme]);
-}));
-const keyframeRotate = keyframes`
-	100%{ transform: rotate(360deg);}
-`;
-const keyframeDash = r => keyframes`
-	0%{
-		stroke-dasharray: 1, ${r};
-		stroke-dashoffset: 0;
-	}
-	40%{
-		stroke-dasharray: ${r * 89 / 200}, ${r};
-		stroke-dashoffset: -${r * 35 / 200};
-	}
-	100%{
-		stroke-dasharray: ${r * 89 / 200}, ${r};
-		stroke-dashoffset: -${r * 124 / 200};
-	}
-`;
-const ContainerCSS = (containerW, directionAngle) => css`
-    ${displayInlineBlock};
-    ${parseWidthHeight(containerW)};
-    transform: rotate(${directionAngle}deg);
-    transform-origin: center;
-`;
-const AnimationRotateCSS = css`
-    animation: ${keyframeRotate} 2s linear infinite;
-`;
-const CircleBackgroundCSS = (background, isIndeterminate, theme) => css`
-    ${fill('transparent')};
-    stroke: ${background};
-    ${isIndeterminate && 'stroke-linecap: round'};
-`;
-const CircleMainCSS = (color, theme) => css`
-    ${fill('transparent')};
-    stroke: ${color};
-    stroke-linecap: round;
-`;
-const CircleMainDeterminateCSS = (circumference, percent, duration) => css`
-    stroke-dasharray: ${`${circumference} ${circumference}`};
-    stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
-    transition: stroke-dashoffset ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
-`;
-const CircleMainIndeterminateCSS = radiusX10 => css`
-    stroke-dasharray: 10, ${radiusX10};
-    stroke-dashoffset: 0;
-    animation: ${keyframeDash(radiusX10)} 2s ease-in-out infinite;
-`;
-const TextCSS = (percentColor, color, dimension, directionAngle, theme) => css`
-    ${userSelectNone};
-    ${fill(percentColor ? percentColor : color)};
-    ${dimension.labelStyle}
-    text-anchor: middle;
-    transform: rotate(${-directionAngle}deg);
-    transform-origin: center;
-`;
-CircularProgress.defaultProps = {
-  background: 'line/category',
-  className: '',
-  color: 'semantic/info',
-  determinate: false,
-  direction: 'top',
-  duration: 1,
-  percent: 25,
-  percentColor: 'semantic/info',
-  showValue: true,
-  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. */
-  determinate: PropTypes.bool,
-  /** Direction of the start point. */
-  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  /** Time to processing. */
-  duration: PropTypes.number,
-  /** The percent of the determinate progress. */
-  percent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Color percent-label of the progress. */
-  percentColor: PropTypes.string,
-  /** If `true, show the percent-label. */
-  showValue: PropTypes.bool,
-  /** 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;