diginet-core-ui 1.3.79 → 1.3.80

package/components/accordion/css.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/core';
-import theme from '../../theme/settings';
-import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import theme from "../../theme/settings";
+import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
 const {
   colors: {
     system: {

package/components/accordion/details.js

@@ -3,9 +3,9 @@
 import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { borderBox, displayBlock, overflowHidden, parseHeight, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
-import { classNames } from '../../utils';
-import theme from '../../theme/settings';
+import { borderBox, displayBlock, overflowHidden, parseHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { classNames } from "../../utils";
+import theme from "../../theme/settings";
 const {
   colors: {
     text: {

package/components/accordion/group.js

@@ -3,9 +3,9 @@
 import { memo, useRef, forwardRef, Children, cloneElement, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { borderRadius4px } from '../../styles/general';
-import classNames from '../../utils/classNames';
-import theme from '../../theme/settings';
+import { borderRadius4px } from "../../styles/general";
+import classNames from "../../utils/classNames";
+import theme from "../../theme/settings";
 const {
   spacing
 } = theme;

package/components/accordion/index.js

@@ -3,11 +3,11 @@
 import { memo, useEffect, useRef, forwardRef, useState, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import AccordionContext from './context';
-import Divider from '../divider';
-import { borderRadius4px, displayBlock, parseWidth, positionRelative } from '../../styles/general';
-import classNames from '../../utils/classNames';
-import theme from '../../theme/settings';
+import AccordionContext from "./context";
+import Divider from "../divider";
+import { borderRadius4px, displayBlock, parseWidth, positionRelative } from "../../styles/general";
+import classNames from "../../utils/classNames";
+import theme from "../../theme/settings";
 const {
   colors: {
     line: {

package/components/accordion/summary.js

@@ -3,11 +3,11 @@
 import { memo, useEffect, useRef, useContext, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import { SummaryRootCSS } from './css';
-import AccordionContext from './context';
+import { SummaryRootCSS } from "./css";
+import AccordionContext from "./context";
 import { ButtonIcon, Typography } from '..';
-import { classNames } from '../../utils';
-import theme from '../../theme/settings';
+import { classNames } from "../../utils";
+import theme from "../../theme/settings";
 const {
   colors: {
     system: {

package/components/alert/index.js

@@ -3,14 +3,14 @@
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import LinearProgress from '../progress/linear';
-import ButtonIcon from '../button/icon';
-import Icon from '../../icons';
-import { hexToRGBA } from '../../styles/color-helper';
-import { animations } from '../../styles/animation';
-import { classNames, useDelayUnmount } from '../../utils';
-import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from '../../styles/general';
-import { useTheme, useColor as colors } from '../../theme';
+import LinearProgress from "../progress/linear";
+import ButtonIcon from "../button/icon";
+import Icon from "../../icons";
+import { hexToRGBA } from "../../styles/color-helper";
+import { animations } from "../../styles/animation";
+import { classNames, useDelayUnmount } from "../../utils";
+import { alignCenter, border, borderBox, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from "../../styles/general";
+import { useTheme, useColor as colors } from "../../theme";
 const {
   colors: {
     system: {

package/components/alert/notify.js

@@ -4,10 +4,10 @@ import { memo, useEffect, forwardRef, useImperativeHandle, useRef, useState } fr
 import ReactDOM, { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import Alert from './';
-import theme from '../../theme/settings';
-import { classNames, refType as ref } from '../../utils';
-import { backgroundTransparent, pointerEventsNone, positionFixed } from '../../styles/general';
+import Alert from "./";
+import theme from "../../theme/settings";
+import { classNames, refType as ref } from "../../utils";
+import { backgroundTransparent, pointerEventsNone, positionFixed } from "../../styles/general";
 const {
   zIndex: zIndexCORE
 } = theme;

package/components/avatar/index.js

@@ -1,17 +1,16 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { Fragment, memo, useRef, forwardRef, useState, useEffect, useMemo, useImperativeHandle, isValidElement } 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 { ButtonIcon, ModalSample, Popover, Popup, Typography } from '../';
-import { classNames, randomString } from '../../utils';
-import { getGlobal } from '../../global';
-import AvatarDefault from '../../assets/avatar/default.svg';
-import { alignCenter, borderNone, displayBlock, displayNone, flexCol, inlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
-import isMobile from '../../utils/isMobile';
-import theme from '../../theme/settings';
+import AvatarDefault from "../../assets/avatar/default.svg";
+import { ButtonIcon, ModalSample, Popover, Popup, Typography } from "./..";
+import { getGlobal } from "../../global";
+import PropTypes from 'prop-types';
+import { forwardRef, Fragment, isValidElement, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { alignCenter, borderNone, displayBlock, displayNone, flexCol, inlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { classNames, isMobile, randomString } from "../../utils";
+import { useIntersection } from "../../utils/intersectionObserver";
+import OptionWrapper from "../others/option-wrapper";
 const {
   colors: {
     system: {
@@ -26,7 +25,7 @@ const {
   },
   spacing,
   zIndex: zIndexCORE
-} = theme;
+} = useTheme();
 const existed = {},
   urlAvatar = {},
   popupHandler = {};

package/components/badge/index.js

@@ -3,11 +3,11 @@
 import { memo, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import OptionWrapper from '../others/option-wrapper';
-import { color as colors } from '../../styles/colors';
-import { typography } from '../../styles/typography';
-import { alignCenter, borderBox, borderRadius4px, flexRow, flexWrap, inlineFlex, justifyCenter, pointerEventsNone, positionAbsolute, positionRelative } from '../../styles/general';
-import Icon from '../../icons';
+import OptionWrapper from "../others/option-wrapper";
+import { color as colors } from "../../styles/colors";
+import { typography } from "../../styles/typography";
+import { alignCenter, borderBox, borderRadius4px, flexRow, flexWrap, inlineFlex, justifyCenter, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
+import Icon from "../../icons";
 const {
   paragraph1,
   paragraph2,

package/components/button/icon.js

@@ -3,16 +3,16 @@
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import OptionWrapper from '../others/option-wrapper';
-import * as allColors from '../../styles/colors';
-import { hexToRGBA } from '../../styles/color-helper';
-import { capitalize, classNames, refType as ref } from '../../utils';
-import Icon from '../../icons';
-import Ripple from './ripple-effect';
+import OptionWrapper from "../others/option-wrapper";
+import * as allColors from "../../styles/colors";
+import { hexToRGBA } from "../../styles/color-helper";
+import { capitalize, classNames, refType as ref } from "../../utils";
+import Icon from "../../icons";
+import Ripple from "./ripple-effect";
 import { getClassNameFromColor, getRippleColor } from '.';
-import CircularProgress from '../progress/circular';
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, borderRadius50, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
-import { useColor as colors, useTheme } from '../../theme';
+import CircularProgress from "../progress/circular";
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, borderRadius50, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { useColor as colors, useTheme } from "../../theme";
 const {
   colors: {
     system: {

package/components/button/index.js

@@ -3,16 +3,16 @@
 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 { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex } from '../../styles/color-helper';
-import * as allColors from '../../styles/colors';
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, noMargin, noPadding, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
-import { useColor as colors, useTheme } from '../../theme';
-import { classNames, refType as ref } from '../../utils';
-import OptionWrapper from '../others/option-wrapper';
-import CircularProgress from '../progress/circular';
-import Ripple from './ripple-effect';
+import { Typography } from "../";
+import Icon from "../../icons";
+import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex } from "../../styles/color-helper";
+import * as allColors from "../../styles/colors";
+import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, noBorder, noMargin, noPadding, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { useColor as colors, useTheme } from "../../theme";
+import { classNames, refType as ref } from "../../utils";
+import OptionWrapper from "../others/option-wrapper";
+import CircularProgress from "../progress/circular";
+import Ripple from "./ripple-effect";
 const {
   colors: {
     system: {

package/components/button/more.js

@@ -1,122 +1,194 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, useState, useEffect, forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import Button from './';
-import Icon from './icon';
-import { ArrowDown, Close } from '../../icons';
-import { Popover } from '../';
+import { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { ButtonIcon, Icon, Popover, Typography } from "../";
+import { alignCenter, borderNone, cursorPointer, flexCol, flexRow, outlineNone, parseHeight } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { classNames, refType as ref } from "../../utils";
+import OptionWrapper from "../others/option-wrapper";
+const {
+  colors: {
+    system: {
+      dark: systemDark,
+      white: systemWhite
+    },
+    fill: {
+      hover: fillHover,
+      pressed: fillPressed
+    }
+  },
+  spacing
+} = useTheme();
 const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  viewType,
-  color,
-  size,
+  action = {},
+  buttonProps,
+  className,
   disabled,
-  children,
-  loading,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-  const [open, setOpen] = useState(false);
-  const ButtonMoreStyle = css`
-            display: inline-flex;
-            button {
-                :first-of-type {
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
-                    margin-right: 1px;
-                }
-                :last-of-type {
-                    border-top-left-radius: 0;
-                    border-bottom-left-radius: 0;
-                    margin-left: 0;
-                }
-            }
-            .more-icon-close {
-                display: none;
-            }
-        `;
-  const showMoreOption = () => {
-    if (!open) {
-      setOpen(true);
-    }
+  id,
+  labelProp,
+  options,
+  optionType,
+  popoverProp,
+  style
+}, reference) => {
+  const isOptionFull = optionType === 'full';
+  const ref = useRef(null);
+  const [openState, setOpenState] = useState(false);
+  const [iconState, setIconState] = useState(false);
+  const _PopoverCSS = PopoverCSS(isOptionFull);
+  const openPopover = () => {
+    setOpenState(true);
   };
-  useEffect(() => {
-    const iconCloseEl = ref.current.querySelector('.more-icon-close');
-    const iconDownEl = ref.current.querySelector('.more-icon-down');
-    if (open) {
-      iconCloseEl.style.display = 'block';
-      iconDownEl.style.display = 'none';
-    }
-    return () => {
-      if (open) {
-        iconCloseEl.style.display = null;
-        iconDownEl.style.display = null;
+  const closePopover = () => {
+    setOpenState(false);
+  };
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  const renderOptions = () => {
+    return options.map((item, idx) => {
+      if ( /*#__PURE__*/isValidElement(item)) return item;else {
+        const icon = item === null || item === void 0 ? void 0 : item.icon;
+        const label = item === null || item === void 0 ? void 0 : item.label;
+        const action = () => {
+          closePopover();
+          if (typeof (item === null || item === void 0 ? void 0 : item.action) === 'function') item === null || item === void 0 ? void 0 : item.action();
+        };
+        if (icon && !iconState) setIconState(true);
+        return isOptionFull ? jsx("button", {
+          key: idx,
+          css: OptionFullCSS,
+          className: 'DGN-UI-ButtonMore-Option',
+          onClick: action
+        }, icon ? jsx(Icon, {
+          className: 'DGN-UI-ButtonMore-Option-Icon',
+          name: icon,
+          width: 20,
+          height: 20,
+          color: systemDark
+        }) : null, jsx(Typography, {
+          css: !icon && iconState && ExtraPaddingCSS,
+          className: 'DGN-UI-ButtonMore-Label',
+          ...labelProp
+        }, label)) : jsx(ButtonIcon, {
+          key: idx,
+          className: 'DGN-UI-ButtonMore-Option',
+          circular: true,
+          name: icon,
+          onClick: action,
+          viewType: 'text'
+        });
       }
-    };
-  }, [open]);
-  return jsx("div", {
-    css: ButtonMoreStyle,
-    ref: ref
-  }, jsx(Button, {
-    viewType: viewType,
-    color: color,
-    size: size,
-    disabled: disabled,
-    loading: loading,
-    ...props
-  }), jsx(Icon, {
-    viewType: viewType,
-    color: color,
-    size: size,
-    disabled: disabled,
-    onClick: showMoreOption
-  }, jsx("span", {
-    className: 'more-icon-down'
-  }, jsx(ArrowDown, {
-    color: 'currentColor'
-  })), jsx("span", {
-    className: 'more-icon-close'
-  }, jsx(Close, {
-    color: 'currentColor',
-    viewBox: true
-  }))), jsx(Popover, {
-    open: open,
-    anchor: ref,
-    fullScreen: false,
-    onClose: () => setOpen(false),
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'left'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'left'
-    }
-  }, children));
+    });
+  };
+  return useMemo(() => {
+    return jsx(Popover, {
+      css: _PopoverCSS,
+      open: openState,
+      onClose: closePopover,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      anchor: jsx(ButtonIcon, {
+        ref: ref,
+        circular: true,
+        name: 'more',
+        viewType: 'text',
+        id: id,
+        style: style,
+        className: classNames('DGN-UI-ButtonMore', className),
+        disabled: disabled,
+        onClick: openPopover,
+        ...buttonProps
+      }),
+      ...popoverProp
+    }, renderOptions());
+  }, [buttonProps, className, disabled, id, options, optionType, popoverProp, style, iconState, openState]);
 }));
+const PopoverCSS = isOptionFull => css`
+    ${isOptionFull ? flexCol : flexRow};
+    padding: ${isOptionFull ? spacing([1, 0]) : spacing([0, 2])};
+`;
+const OptionFullCSS = css`
+    ${flexRow};
+    ${alignCenter};
+    ${cursorPointer};
+    ${outlineNone};
+    ${borderNone}
+    ${parseHeight(28)};
+    padding: ${spacing([0, 4])};
+    gap: ${spacing([0, 1])};
+    background-color: ${systemWhite};
+    transition: all 0.5s ease;
+    &:hover,
+    &:focus {
+        background-color: ${fillHover};
+    }
+    &:active {
+        background-color: ${fillPressed};
+    }
+`;
+const ExtraPaddingCSS = css`
+    padding-left: ${spacing([6])};
+`;
 ButtonMore.defaultProps = {
-  viewType: 'filled',
-  color: 'primary',
-  size: 'medium',
-  disabled: false
+  buttonProps: {},
+  className: '',
+  disabled: false,
+  options: [],
+  optionType: 'full',
+  style: {}
 };
 ButtonMore.propTypes = {
-  /** used to fill background for button */
-  viewType: PropTypes.oneOf(['text', 'outlined', 'filled']),
-  /** color for button */
-  color: PropTypes.string,
-  /** size button */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
-  /** prevent all event if true */
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) applied to the main `ButtonIcon`. */
+  buttonProps: PropTypes.object,
+  /** Class for component. */
+  className: PropTypes.string,
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** more options element to display */
-  children: PropTypes.node,
-  /** any props else for Button component */
-  props: PropTypes.any,
-  /** status loading of button */
-  loading: PropTypes.bool
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography) applied to the `Typography` label. */
+  labelProp: PropTypes.object,
+  /** Option(s) in popover. */
+  option: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    icon: PropTypes.string,
+    action: PropTypes.func
+  })),
+  /** The variant of option's type. */
+  optionType: PropTypes.oneOf(['full', 'icon']),
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/overplay-popover) applied to the main `Popover`. */
+  popoverProp: PropTypes.object,
+  /** Style inline of component. */
+  style: PropTypes.object,
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
+   */
+  reference: ref
 };
-export default ButtonMore;
+export { ButtonMore };
+export default OptionWrapper(ButtonMore);

package/components/button/ripple-effect.js

@@ -3,8 +3,8 @@
 /** @jsx jsx */
 import { css, jsx, keyframes } from '@emotion/core';
 import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useState } from 'react';
-import { borderRadius100, borderRadius50, overflowHidden, positionAbsolute } from '../../styles/general';
-import { useTheme } from '../../theme';
+import { borderRadius100, borderRadius50, overflowHidden, positionAbsolute } from "../../styles/general";
+import { useTheme } from "../../theme";
 const {
   colors: {
     system: {

package/components/card/body.js

@@ -3,8 +3,8 @@
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import OptionWrapper from '../others/option-wrapper';
-import { classNames } from '../../utils';
+import OptionWrapper from "../others/option-wrapper";
+import { classNames } from "../../utils";
 const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,

package/components/card/extra.js

@@ -3,8 +3,8 @@
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import OptionWrapper from '../others/option-wrapper';
-import { classNames } from '../../utils';
+import OptionWrapper from "../others/option-wrapper";
+import { classNames } from "../../utils";
 const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,

package/components/card/footer.js

@@ -3,8 +3,8 @@
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import OptionWrapper from '../others/option-wrapper';
-import { classNames } from '../../utils';
+import OptionWrapper from "../others/option-wrapper";
+import { classNames } from "../../utils";
 const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,

package/components/card/header.js

@@ -3,9 +3,9 @@
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import OptionWrapper from '../others/option-wrapper';
-import Typography from '../typography';
-import { classNames } from '../../utils';
+import OptionWrapper from "../others/option-wrapper";
+import Typography from "../typography";
+import { classNames } from "../../utils";
 const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,

package/components/card/index.js

@@ -3,14 +3,14 @@
 import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import OptionWrapper from '../others/option-wrapper';
-import theme from '../../theme/settings';
-import { borderBox, borderRadius4px, flexCol, flexRow, justifyEnd, overflowHidden, parseWidth, parseWidthHeight, positionAbsolute, positionRelative } from '../../styles/general';
-import CardHeader from './header';
-import { CardFooter } from './footer';
-import { CardBody } from './body';
-import { getColor } from '../../styles/utils';
-import { classNames } from '../../utils';
+import OptionWrapper from "../others/option-wrapper";
+import theme from "../../theme/settings";
+import { borderBox, borderRadius4px, flexCol, flexRow, justifyEnd, overflowHidden, parseWidth, parseWidthHeight, positionAbsolute, positionRelative } from "../../styles/general";
+import CardHeader from "./header";
+import { CardFooter } from "./footer";
+import { CardBody } from "./body";
+import { getColor } from "../../styles/utils";
+import { classNames } from "../../utils";
 const {
   colors: {
     system: {