diginet-core-ui 1.4.14-beta.2 → 1.4.14-beta.3

package/components/button/index.js

@@ -5,12 +5,13 @@ import { CircularProgress, Icon, Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbaToHexA, rgbToHex } from "../../styles/color-helper";
+import { detectColor, fade, hexToRGBA, hslToRgb, isColor, isColorName, rgbToHex, rgbaToHexA } from "../../styles/color-helper";
 import * as allColors from "../../styles/colors";
-import { alphaPseudo, bgColor, border, borderColor, borderNone, borderRadius4px, boxBorder, cursorNotAllowed, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, mg, mgl, mgr, outlineNone, overflowHidden, parseHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pd, pointerEventsNone, positionRelative, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
-import { useColor as colors, useTheme } from "../../theme";
-import { classNames } from "../../utils";
+import { alphaPseudo, bgColor, border, borderColor, borderNone, borderRadius4px, boxBorder, cursorNotAllowed, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, outlineNone, overflowHidden, parseHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { classNames, getProp } from "../../utils";
 import Ripple from "./ripple-effect";
+import useThemeProps from "../../theme/utils/useThemeProps";
 const {
   spacing
 } = useTheme();
@@ -55,30 +56,41 @@ const typographySizeMap = new Map([['tiny', 'h5'], ['small', 'h5'], ['medium', '
 const minHeightSizeMap = new Map([['tiny', '24px'], ['small', '32px'], ['medium', '40px'], ['large', '48px'], ['giant', '56px']]);
 const minHeightSizeLinkMap = new Map([['tiny', '16px'], ['small', '20px'], ['medium', '24px'], ['large', '32px'], ['giant', '40px']]);
 const alphaLoading = 0.2;
-const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  color: colorProp,
-  disabled,
-  endIcon,
-  href,
-  id,
-  label,
-  labelProps,
-  loading,
-  onClick,
-  size,
-  startIcon,
-  stopPropagation,
-  text,
-  type,
-  urlParams,
-  viewType,
-  ...props
-}, reference) => {
+const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
-  label = label || text || '';
+  const theme = useTheme();
+  const {
+    colors
+  } = theme;
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'Button'
+  });
+  const {
+    action = {},
+    children,
+    className,
+    color: colorProp,
+    disabled,
+    endIcon,
+    href,
+    id,
+    label: labelProp,
+    labelProps,
+    loading,
+    onClick,
+    size,
+    startIcon,
+    stopPropagation,
+    text,
+    type,
+    urlParams,
+    viewType,
+    ...other
+  } = props;
+  const label = labelProp || text || '';
   const ref = useRef(null);
   const rippleRef = useRef(null);
   const [urlState, setUrlState] = useState(href);
@@ -89,13 +101,13 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const typographySize = typographySizeMap.get(size);
   const iconMarginSize = iconMarginSizeMap.get(size);
   const minHeightSize = isViewTypeLink ? minHeightSizeLinkMap.get(size) : minHeightSizeMap.get(size);
-  const color = colors[colorProp] || colorProp;
+  const color = getProp(colors, colorProp, colorProp);
   const TagName = href ? 'a' : 'button';
-  const _ButtonRootCSS = ButtonRootCSS(color, isColorDefault, viewType, loading);
-  const _ButtonIconCSS = ButtonIconCSS(endIcon, label, startIcon, iconMarginSize, iconSize);
-  const _NonStartIconCSS = NonStartIconCSS(iconSize);
+  const _ButtonRootCSS = ButtonRootCSS(color, isColorDefault, viewType, loading, theme);
+  const _ButtonIconCSS = ButtonIconCSS(endIcon, label, startIcon, iconMarginSize, iconSize, theme);
+  const _NonStartIconCSS = NonStartIconCSS(iconSize, theme);
   const _ButtonLabelCSS = ButtonLabelCSS(loading, iconMarginSize);
-  const _ButtonSizeCSS = ButtonSizeCSS(paddingSize, minHeightSize);
+  const _ButtonSizeCSS = ButtonSizeCSS(paddingSize, minHeightSize, theme);
   const _onClick = e => {
     if (href) e.preventDefault(); //Prevent open link when click
     onClick && stopPropagation && e.stopPropagation();
@@ -195,7 +207,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       type: type,
       className: classNames('DGN-UI-Button', disabled && 'disabled', viewType, size, className),
       href: urlState || null,
-      ...props
+      ...other
     }, start, jsx(Typography, {
       css: _ButtonLabelCSS,
       type: typographySize,
@@ -206,25 +218,29 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: rippleRef,
       color: getRippleColor(colorProp, viewType, allColors)
     }) : null);
-  }, [children, className, colorProp, disabled, endIcon, href, id, label, labelProps, loading, onClick, size, startIcon, stopPropagation, type, urlParams, viewType, urlState]);
+  }, [children, className, colorProp, disabled, endIcon, href, id, labelProp, labelProps, loading, onClick, size, startIcon, stopPropagation, type, urlParams, viewType, urlState, theme]);
 }));
-const NonStartIconCSS = iconSize => css`
-    ${mg(0)};
+const NonStartIconCSS = (iconSize, {
+  spacing
+}) => css`
+    margin: ${spacing([0])};
     ${parseHeight(iconSize)};
     ${parseMinWidth(0)};
 `;
-const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize) => css`
+const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize, {
+  spacing
+}) => css`
     ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     ${justifyCenter};
     ${positionRelative};
     ${boxBorder};
-    ${mgr(endIcon || label ? iconMarginSize : 0)};
+    margin-right: ${spacing(endIcon || label ? iconMarginSize : 0)};
     &.DGN-UI-Button-End-Icon,
     &.DGN-UI-Button-Custom-End-Icon {
-        ${mgr('unset')};
-        ${mgl(startIcon || label ? iconMarginSize : 0)};
+        margin-right: unset;
+        margin-left: ${spacing(startIcon || label ? iconMarginSize : 0)};
     }
     &.DGN-UI-Button-Start-Icon,
     &.DGN-UI-Button-End-Icon {
@@ -234,13 +250,17 @@ const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize) => c
 const ButtonLabelCSS = (loading, iconMarginSize) => css`
     ${whiteSpaceNoWrap};
     ${textColor('inherit')};
-    ${mgl(loading ? iconMarginSize : 0)};
+    margin-left: ${spacing(loading ? iconMarginSize : 0)};
 `;
-const ButtonSizeCSS = (paddingSize, minHeightSize) => css`
-    ${pd(paddingSize)};
+const ButtonSizeCSS = (paddingSize, minHeightSize, {
+  spacing
+}) => css`
+    padding: ${spacing(paddingSize)};
     ${parseMinWidthHeight('max-content', minHeightSize)};
 `;
-const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
+const ButtonRootCSS = (color, isColorDefault, viewType, loading, {
+  colors
+}) => css`
     ${displayInlineFlex};
     ${itemsCenter};
     ${justifyCenter};
@@ -266,29 +286,29 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
                     }
                 `)}
         ${isColorDefault && css`
-            ${border(1, 'system/rest')};
-            ${textColor('system/rest')};
+            ${border(1, getProp(colors, 'system.rest'))};
+            ${textColor(getProp(colors, 'system.rest'))};
             ${loading && css`
-                ${textColor('system/active')};
-                ${borderColor('system/active')};
-                ${bgColor(hexToRGBA('system/active', alphaLoading))};
+                ${textColor(getProp(colors, 'system.active'))};
+                ${borderColor(getProp(colors, 'system.active'))};
+                ${bgColor(hexToRGBA(getProp(colors, 'system.active'), alphaLoading))};
             `}
             ${Object.keys(alphaPseudo).map(key => css`
                         &: ${key} {
-                            ${textColor('system/active')};
-                            ${borderColor('system/active')};
-                            ${bgColor(hexToRGBA('system/active', alphaPseudo[key]))};
+                            ${textColor(getProp(colors, 'system.active'))};
+                            ${borderColor(getProp(colors, 'system.active'))};
+                            ${bgColor(hexToRGBA(getProp(colors, 'system.active'), alphaPseudo[key]))};
                         }
                     `)} // &:hover | &:focus | &:active
         `}
         &.disabled {
-            ${borderColor('system/disabled')};
+            ${borderColor(getProp(colors, 'system.disabled'))};
             ${bgColor('transparent')};
         }
     `}
     ${viewType === 'filled' && css`
         ${borderNone};
-        ${textColor('system/white')};
+        ${textColor(getProp(colors, 'system.standard'))};
         ${bgColor(color)};
         font-weight: bold;
         ${loading && css`
@@ -302,16 +322,16 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
             filter: brightness(0.7);
         }
         ${isColorDefault && css`
-            ${bgColor('system/rest')};
-            ${loading && bgColor('system/active')};
+            ${bgColor(getProp(colors, 'system.rest'))};
+            ${loading && bgColor(getProp(colors, 'system.active'))};
             &:hover,
             &:focus,
             &:active {
-                ${bgColor('system/active')};
+                ${bgColor(getProp(colors, 'system.active'))};
             }
         `}
         &.disabled {
-            ${bgColor('fill/disabled')};
+            ${bgColor(getProp(colors, 'fill.disabled'))};
         }
     `}
     ${viewType === 'text' && css`
@@ -325,15 +345,15 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
                     }
                 `)}
         ${isColorDefault && css`
-            ${textColor('system/rest')};
+            ${textColor(getProp(colors, 'system.rest'))};
             ${loading && css`
-                ${textColor('system/active')};
-                ${bgColor(hexToRGBA('system/active', alphaLoading))};
+                ${textColor(getProp(colors, 'system.active'))};
+                ${bgColor(hexToRGBA(getProp(colors, 'system.active'), alphaLoading))};
             `}
             ${Object.keys(alphaPseudo).map(key => css`
                         &: ${key} {
-                            ${textColor('system/active')};
-                            ${bgColor(hexToRGBA('system/active', alphaPseudo[key]))};
+                            ${textColor(getProp(colors, 'system.active'))};
+                            ${bgColor(hexToRGBA(getProp(colors, 'system.active'), alphaPseudo[key]))};
                         }
                     `)}
         `}
@@ -343,7 +363,7 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
     `}
     ${viewType === 'link' && css`
         ${borderNone};
-        ${textColor(isColorDefault ? 'semantic/info' : color)};
+        ${textColor(isColorDefault ? getProp(colors, 'semantic.info') : color)};
         ${bgColor('transparent')};
         ${loading && css`
             filter: brightness(0.85);
@@ -358,20 +378,22 @@ const ButtonRootCSS = (color, isColorDefault, viewType, loading) => css`
     `}
     &.disabled {
         ${cursorNotAllowed};
-        ${textColor('system/disabled')};
+        ${textColor(getProp(colors, 'system.disabled'))};
         filter: brightness(1);
     }
 `;
-Button.defaultProps = {
-  className: '',
-  color: 'default',
-  disabled: false,
-  label: '',
-  loading: false,
-  size: 'medium',
-  stopPropagation: true,
-  viewType: 'text'
-};
+
+// Button.defaultProps = {
+//     className: '',
+//     color: 'default',
+//     disabled: false,
+//     label: '',
+//     loading: false,
+//     size: 'medium',
+//     stopPropagation: true,
+//     viewType: 'text',
+// };
+
 Button.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
@@ -401,19 +423,19 @@ Button.propTypes = {
   urlParams: PropTypes.object,
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link'])
-  /**
-   * 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
+  /**
+   * 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
    */
 };
 

package/components/button/more.js

@@ -5,27 +5,39 @@ import { ButtonIcon, Icon, Popover, Tooltip, Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import React, { forwardRef, isValidElement, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { bgColor, borderNone, cursorPointer, displayFlex, flexCol, flexRow, gap, itemsCenter, outlineNone, parseHeight, pd, pdl } from "../../styles/general";
-import { classNames } from "../../utils";
-const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  anchor,
-  buttonProps,
-  className,
-  disabled,
-  id,
-  labelProp,
-  options,
-  optionType,
-  popoverProp,
-  style
-}, reference) => {
+import { bgColor, borderNone, cursorPointer, displayFlex, flexCol, flexRow, itemsCenter, outlineNone, parseHeight } from "../../styles/general";
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames, getProp } from "../../utils";
+const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
+  const theme = useTheme();
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'ButtonMore'
+  });
+  const {
+    action = {},
+    anchor: anchorProp,
+    buttonProps,
+    className,
+    disabled,
+    id,
+    labelProp,
+    options,
+    optionType,
+    popoverProp,
+    style
+  } = props;
   const isOptionFull = optionType === 'full';
+  let anchor = anchorProp;
   const ref = useRef(null);
   const [openState, setOpenState] = useState(false);
   const [iconState, setIconState] = useState(false);
-  const _PopoverCSS = PopoverCSS(isOptionFull);
+  const _OptionFullCSS = OptionFullCSS(theme);
+  const _PopoverCSS = PopoverCSS(isOptionFull, theme);
   const openPopover = () => {
     setOpenState(true);
   };
@@ -44,7 +56,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   const renderOptions = () => {
     return options.map((item, idx) => {
-      if (item !== null && item !== void 0 && item.hidden) return;else if ( /*#__PURE__*/isValidElement(item)) return item;else {
+      if (item !== null && item !== void 0 && item.hidden) return null;else 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 = () => {
@@ -54,7 +66,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (icon && !iconState) setIconState(true);
         return isOptionFull ? jsx("button", {
           key: idx,
-          css: OptionFullCSS,
+          css: _OptionFullCSS,
           className: 'DGN-UI-ButtonMore-Option',
           onClick: action
         }, icon ? jsx(Icon, {
@@ -62,9 +74,9 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           name: icon,
           width: 20,
           height: 20,
-          color: 'system/dark'
+          color: 'system/on-standard'
         }) : null, jsx(Typography, {
-          css: !icon && iconState && ExtraPaddingCSS,
+          css: !icon && iconState && ExtraPaddingCSS(theme),
           className: 'DGN-UI-ButtonMore-Label',
           ...labelProp
         }, label)) : jsx(Tooltip, {
@@ -124,14 +136,19 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }),
       ...popoverProp
     }, renderOptions());
-  }, [buttonProps, className, disabled, id, options, optionType, popoverProp, style, iconState, openState]);
+  }, [buttonProps, className, disabled, id, options, optionType, popoverProp, style, iconState, openState, theme]);
 }));
-const PopoverCSS = isOptionFull => css`
+const PopoverCSS = (isOptionFull, {
+  spacing
+}) => css`
     ${displayFlex};
     ${isOptionFull ? flexCol : flexRow};
-    ${pd(isOptionFull ? [1, 0] : [0, 2])}
+    padding: ${spacing(isOptionFull ? [1, 0] : [0, 2])};
 `;
-const OptionFullCSS = css`
+const OptionFullCSS = ({
+  colors,
+  spacing
+}) => css`
     ${displayFlex};
     ${flexRow};
     ${itemsCenter};
@@ -139,29 +156,33 @@ const OptionFullCSS = css`
     ${outlineNone};
     ${borderNone}
     ${parseHeight(28)};
-    ${pd([0, 4])};
-    ${gap([0, 1])};
-    ${bgColor('system/white')};
+    padding: ${spacing([0, 4])};
+    gap: ${spacing([0, 1])};
+    ${bgColor(getProp(colors, 'system/standard'))};
     transition: all 0.5s ease;
     &:hover,
     &:focus {
-        ${bgColor('fill/hover')};
+        ${bgColor(getProp(colors, 'fill/hover'))};
     }
     &:active {
-        ${bgColor('fill/pressed')};
+        ${bgColor(getProp(colors, 'fill/pressed'))};
     }
 `;
-const ExtraPaddingCSS = css`
-    ${pdl([6])};
+const ExtraPaddingCSS = ({
+  spacing
+}) => css`
+    padding-left: ${spacing([6])};
 `;
-ButtonMore.defaultProps = {
-  buttonProps: {},
-  className: '',
-  disabled: false,
-  options: [],
-  optionType: 'full',
-  style: {}
-};
+
+// ButtonMore.defaultProps = {
+//     buttonProps: {},
+//     className: '',
+//     disabled: false,
+//     options: [],
+//     optionType: 'full',
+//     style: {},
+// };
+
 ButtonMore.propTypes = {
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/components-buttonicon) applied to the main `ButtonIcon`. */
   buttonProps: PropTypes.object,

package/components/button/ripple-effect.js

@@ -15,7 +15,7 @@ const useDebouncedRippleCleanUp = (rippleCount, duration, cleanUpFunction) => {
 };
 const Ripple = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   duration = 850,
-  color = 'system.white',
+  color = 'system/standard',
   circular = false,
   ...props
 }, ref) => {

package/components/card/body.js

@@ -1,18 +1,26 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-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 PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, refType as ref } from "../../utils";
-const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  id,
-  style,
-  title
-}, reference) => {
+const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  if (!reference) reference = useRef(null);
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'CardBody'
+  });
+  const {
+    action = {},
+    children,
+    className,
+    id,
+    style
+  } = props;
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -31,12 +39,14 @@ const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       className: classNames(`DGN-UI-Card-Body`, className)
     }, children);
-  }, [children, className, id, style, title]);
+  }, [children, className, id, style]);
 }));
-CardBody.defaultProps = {
-  className: '',
-  style: {}
-};
+
+// CardBody.defaultProps = {
+//     className: '',
+//     style: {},
+// };
+
 CardBody.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
@@ -46,19 +56,19 @@ CardBody.propTypes = {
   style: PropTypes.object,
   /** The title of the component's header. */
   title: PropTypes.string,
-  /**
-   * 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
+  /**
+   * 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
    */
   ref: ref
 };

package/components/card/extra.js

@@ -1,18 +1,26 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-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 PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, refType as ref } from "../../utils";
-const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  id,
-  style,
-  title
-}, reference) => {
+const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  if (!reference) reference = useRef(null);
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'CardExtra'
+  });
+  const {
+    action = {},
+    children,
+    className,
+    id,
+    style
+  } = props;
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -31,12 +39,14 @@ const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       className: classNames(`DGN-UI-Card-Extra`, className)
     }, children);
-  }, [children, className, id, style, title]);
+  }, [children, className, id, style]);
 }));
-CardExtra.defaultProps = {
-  className: '',
-  style: {}
-};
+
+// CardExtra.defaultProps = {
+//     className: '',
+//     style: {},
+// };
+
 CardExtra.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
@@ -46,19 +56,19 @@ CardExtra.propTypes = {
   style: PropTypes.object,
   /** The title of the component's header. */
   title: PropTypes.string,
-  /**
-   * 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
+  /**
+   * 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
    */
   ref: ref
 };