diginet-core-ui 1.3.84-beta.1 → 1.3.85-beta.1

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 { itemsCenter, bgTransparent, boxBorder, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, displayInlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
 const {
   colors: {
     system: {
@@ -24,9 +24,9 @@ export const SummaryRootCSS = background => css`
     ${flexRow};
     ${positionRelative};
     ${justifyBetween};
-    ${alignCenter};
+    ${itemsCenter};
     ${cursorPointer};
-    ${borderBox};
+    ${boxBorder};
     ${borderRadius4px};
     width: 100%;
     min-height: 56px;
@@ -39,14 +39,14 @@ export const SummaryRootCSS = background => css`
         &:active,
         &:focus,
         &:hover {
-            ${backgroundTransparent};
+            ${bgTransparent};
             color: ${active};
         }
     }
     .Accordion-Icon-Root {
         ${flexRow};
         .Accordion-Icon.rotate-able {
-            ${borderBox};
+            ${boxBorder};
             ${parseWidthHeight(24, 24)};
             &:not(.TreeView) {
                 transform: rotateZ(0deg);
@@ -117,7 +117,7 @@ export const SummaryRootCSS = background => css`
     &.treeview-disabled {
         ${pointerEventsNone};
         &:hover {
-            ${backgroundTransparent};
+            ${bgTransparent};
         }
         .TreeView-Item {
             color: ${systemDisabled};
@@ -133,8 +133,8 @@ export const SummaryRootCSS = background => css`
         ${positionRelative};
         ${breakWord};
         ${userSelectNone};
-        ${borderBox}
-        ${alignCenter};
+        ${boxBorder}
+        ${itemsCenter};
         color: ${active};
         width: 100%;
         min-height: 24px;
@@ -159,9 +159,9 @@ export const SummaryRootCSS = background => css`
             transition: transform 200ms linear;
         }
         .effect {
-            ${inlineFlex};
+            ${displayInlineFlex};
             ${justifyCenter};
-            ${alignCenter};
+            ${itemsCenter};
             ${cursorPointer};
             min-width: 24px;
             max-width: 34px;

package/components/accordion/details.js

@@ -3,7 +3,7 @@
 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 { boxBorder, displayBlock, overflowHidden, parseHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
 import { classNames } from "../../utils";
 import theme from "../../theme/settings";
 const {
@@ -54,7 +54,7 @@ const DetailsRootCSS = css`
     ${parseHeight(0)};
     transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     .DGN-UI-Accordion-Details-Content {
-        ${borderBox};
+        ${boxBorder};
         ${paragraph1};
         padding: ${spacing([0, 6, 4, 6])};
         color: ${main};

package/components/alert/index.js

@@ -9,7 +9,7 @@ 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 { itemsCenter, border, boxBorder, borderRadius4px, breakWord, displayBlock, flexRow, justifyStart, positionRelative, userSelectNone } from "../../styles/general";
 import { useTheme, useColor as colors } from "../../theme";
 const {
   colors: {
@@ -167,7 +167,7 @@ const AlertContainerCSS = size => css`
 const AlertInfoCSS = (mainColor, opacityColor) => css`
     ${flexRow};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${borderRadius4px};
     ${breakWord};
     ${border(1, mainColor)};
@@ -193,7 +193,7 @@ const AlertTextCSS = clearAble => css`
 const AlertPrimaryCSS = (secondary, size) => css`
     ${flexRow};
     ${positionRelative};
-    ${alignCenter};
+    ${itemsCenter};
     ${justifyStart};
     ${userSelectNone};
     ${secondary ? primaryTypoMap.get(size) : paragraph1};

package/components/alert/notify.js

@@ -7,7 +7,7 @@ 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 { bgTransparent, pointerEventsNone, positionFixed } from "../../styles/general";
 const {
   zIndex: zIndexCORE
 } = theme;
@@ -90,7 +90,7 @@ const Notify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const AlertCSS = css`
     ${positionFixed};
     ${pointerEventsNone};
-    ${backgroundTransparent};
+    ${bgTransparent};
     z-index: ${zIndexCORE(2)};
 `;
 Notify.defaultProps = {
@@ -104,9 +104,9 @@ Notify.defaultProps = {
 Notify.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
-  /**
-   * used to set position of Alert (is a string or an object)
-   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
+  /**
+   * used to set position of Alert (is a string or an object)
+   * string is center (obligatory) as {vertical: 'center', horizontal: 'center'}
    */
   position: PropTypes.oneOfType([PropTypes.oneOf(['center']), PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
@@ -116,13 +116,13 @@ Notify.propTypes = {
   style: PropTypes.object,
   /** Any [props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) of Alert */
   props: PropTypes.any,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show(message, option): Show notify
-   *  * @param {message} - number
-   *  * @param {options} - object
-   *      * {[Props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) applied to the `Alert`.}
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show(message, option): Show notify
+   *  * @param {message} - number
+   *  * @param {options} - object
+   *      * {[Props](https://core.diginet.com.vn/ui/?path=/docs/alert--basic) applied to the `Alert`.}
    */
   reference: ref
 };

package/components/avatar/index.js

@@ -6,7 +6,7 @@ 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 { itemsCenter, borderNone, displayBlock, displayNone, flexCol, displayInlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, isMobile, randomString } from "../../utils";
 import { useIntersection } from "../../utils/intersectionObserver";
@@ -323,9 +323,9 @@ const AvatarPreviewCSS = readOnly => css`
     cursor: ${readOnly ? 'initial' : 'pointer'};
 `;
 const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
-    ${inlineFlex};
+    ${displayInlineFlex};
     ${positionRelative};
-    ${alignCenter};
+    ${itemsCenter};
     &.disabled {
         .css-${AvatarPreviewCSSName} {
             ${pointerEventsNone}
@@ -398,14 +398,14 @@ Avatar.propTypes = {
   className: PropTypes.string,
   /** If `true`, display remove avatar icon. */
   clearAble: PropTypes.bool,
-  /**
-   * data to display when hoverAble is true<br />
-   * data is an object or function return a jsx element
+  /**
+   * data to display when hoverAble is true<br />
+   * data is an object or function return a jsx element
    */
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.node]),
-  /**
-   * it is used to display the default if there is no src<br />
-   * if undefined, will display icons available in the icons store
+  /**
+   * it is used to display the default if there is no src<br />
+   * if undefined, will display icons available in the icons store
    */
   defaultSrc: PropTypes.string,
   /** the direction to display more info */
@@ -442,19 +442,19 @@ Avatar.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** the error to show on wrong type */
   wrongTypeError: PropTypes.string,
-  /**
-   * ref methods
-   *
-   * * 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
+   *
+   * * 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: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/badge/index.js

@@ -5,7 +5,7 @@ import { Icon } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { alignCenter, borderBox, borderRadius4px, flexRow, flexWrap, inlineFlex, justifyCenter, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
+import { itemsCenter, boxBorder, borderRadius4px, flexRow, flexWrap, displayInlineFlex, justifyCenter, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
 const {
@@ -137,10 +137,10 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => css`
     ${typographySize};
     ${flexRow};
-    ${alignCenter};
+    ${itemsCenter};
     ${justifyCenter};
     ${flexWrap};
-    ${borderBox};
+    ${boxBorder};
     ${pointerEventsNone};
     ${children || name ? positionAbsolute : positionRelative};
     color: ${systemWhite};
@@ -150,11 +150,11 @@ const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => cs
     padding: ${spacing([0, 1])};
 `;
 const BadgeRootCSS = (children, name, dotPos, BadgeNumberCSSName) => css`
-    ${inlineFlex};
-    ${alignCenter};
+    ${displayInlineFlex};
+    ${itemsCenter};
     ${justifyCenter};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${borderRadius4px};
     ${parseWidthHeight('max-content')};
     ${parseMinWidthHeight('max-content')};
@@ -201,28 +201,28 @@ Badge.propTypes = {
   name: PropTypes.string,
   /** Controls whether the badge is hidden when `content` is zero. */
   showZero: PropTypes.bool,
-  /** Size of the components.
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+  /** Size of the components.
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
   /** 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
+  /**
+   * 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
 };

package/components/button/icon.js

@@ -11,7 +11,7 @@ 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, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { itemsCenter, bgTransparent, border, boxBorder, borderNone, borderRadius4px, borderRadius50, cursorPointer, flexRow, displayInlineFlex, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
 import { useColor as colors, useTheme } from "../../theme";
 const {
   colors: {
@@ -146,9 +146,9 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const ButtonIconCSS = iconSize => css`
     ${flexRow};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${justifyCenter};
-    ${alignCenter};
+    ${itemsCenter};
     ${parseWidthHeight(iconSize)};
     ${parseMinWidthHeight(iconSize)};
 `;
@@ -176,12 +176,12 @@ const ButtonSizeCSS = (width, height, buttonSize, iconSize) => css`
     }
 `;
 const ButtonRootCSS = (circular, colorHover, color, name) => css`
-    ${inlineFlex};
+    ${displayInlineFlex};
     ${positionRelative};
     ${justifyCenter};
-    ${alignCenter};
+    ${itemsCenter};
     ${outlineNone};
-    ${borderBox};
+    ${boxBorder};
     ${cursorPointer};
     ${userSelectNone};
     ${circular ? borderRadius50 : borderRadius4px};
@@ -191,7 +191,7 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
         ${pointerEventsNone};
     }
     &.outlined {
-        ${backgroundTransparent};
+        ${bgTransparent};
         ${border(1, color)}
         color: ${color};
         &.button-icon--loading {
@@ -243,7 +243,7 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
     }
     &.text {
         ${borderNone};
-        ${backgroundTransparent};
+        ${bgTransparent};
         color: ${color};
         &.button-icon--loading {
             background-color: ${hexToRGBA(color, alphaLoading)};
@@ -268,7 +268,7 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
         }
     }
     &.ghost {
-        ${backgroundTransparent};
+        ${bgTransparent};
         ${borderNone};
         color: ${color};
         &.loading,
@@ -320,14 +320,14 @@ ButtonIcon.propTypes = {
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
@@ -338,19 +338,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, 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
    */
   reference: ref
 };

package/components/button/index.js

@@ -7,7 +7,7 @@ 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 * as allColors from "../../styles/colors";
-import { alignCenter, backgroundTransparent, border, borderBox, borderNone, borderRadius4px, cursorPointer, flexRow, inlineFlex, justifyCenter, outlineNone, overflowHidden, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { itemsCenter, bgTransparent, border, boxBorder, borderNone, borderRadius4px, cursorPointer, flexRow, displayInlineFlex, justifyCenter, 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 Ripple from "./ripple-effect";
@@ -234,10 +234,10 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const ButtonIconCSS = (endIcon, label, startIcon, iconMarginSize, iconSize) => css`
     ${flexRow};
-    ${alignCenter};
+    ${itemsCenter};
     ${justifyCenter};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     margin-right: ${endIcon || label ? iconMarginSize : 0};
     &.DGN-UI-Button-End-Icon,
     &.DGN-UI-Button-Custom-End-Icon {
@@ -285,12 +285,12 @@ const ButtonSizeCSS = (paddingSize, minHeightSize, minHeightSizeLink, outlinedPa
     }
 `;
 const ButtonRootCSS = color => css`
-    ${inlineFlex};
-    ${alignCenter};
+    ${displayInlineFlex};
+    ${itemsCenter};
     ${justifyCenter};
     ${positionRelative};
     ${borderRadius4px};
-    ${borderBox};
+    ${boxBorder};
     ${uppercase};
     ${cursorPointer};
     ${overflowHidden};
@@ -303,7 +303,7 @@ const ButtonRootCSS = color => css`
         ${pointerEventsNone};
     }
     &.outlined {
-        ${backgroundTransparent};
+        ${bgTransparent};
         ${border(1, color)};
         color: ${color};
         &.button--loading {
@@ -356,7 +356,7 @@ const ButtonRootCSS = color => css`
         }
     }
     &.text {
-        ${backgroundTransparent};
+        ${bgTransparent};
         ${borderNone};
         color: ${color};
         &.button--loading {
@@ -382,7 +382,7 @@ const ButtonRootCSS = color => css`
         }
     }
     &.link {
-        ${backgroundTransparent};
+        ${bgTransparent};
         ${borderNone};
         padding: 0;
         color: ${color};
@@ -438,19 +438,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
    */
   reference: ref
 };

package/components/button/more.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 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 { itemsCenter, 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";
@@ -125,7 +125,7 @@ const PopoverCSS = isOptionFull => css`
 `;
 const OptionFullCSS = css`
     ${flexRow};
-    ${alignCenter};
+    ${itemsCenter};
     ${cursorPointer};
     ${outlineNone};
     ${borderNone}
@@ -174,19 +174,19 @@ ButtonMore.propTypes = {
   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
+  /**
+   * 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
 };

package/components/card/index.js

@@ -5,7 +5,7 @@ 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 { boxBorder, borderRadius4px, flexCol, flexRow, justifyEnd, overflowHidden, parseWidth, parseWidthHeight, positionAbsolute, positionRelative } from "../../styles/general";
 import CardHeader from "./header";
 import { CardFooter } from "./footer";
 import { CardBody } from "./body";
@@ -80,7 +80,7 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, direction) => css`
     ${direction === 'vertical' ? flexCol : flexRow};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${borderRadius4px};
     ${overflowHidden}
     ${parseWidthHeight(width || spacing([64.5]), height || 'max-content')};
@@ -89,7 +89,7 @@ const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, dire
     .DGN-UI-Card-Header {
         ${flexRow};
         ${positionRelative};
-        ${borderBox};
+        ${boxBorder};
         order: 1;
         padding: ${spacing([4])};
         &:after {
@@ -105,7 +105,7 @@ const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, dire
     .DGN-UI-Card-Body {
         ${flexCol};
         ${positionRelative};
-        ${borderBox};
+        ${boxBorder};
         order: 2;
         padding: ${headerDivider ? spacing([4]) : spacing([0, 4, 4])};
     }
@@ -113,7 +113,7 @@ const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, dire
         ${flexRow};
         ${justifyEnd};
         ${positionRelative};
-        ${borderBox};
+        ${boxBorder};
         order: 3;
         padding: ${footerDivider ? spacing([4]) : spacing([0, 4, 4])};
         &:before {
@@ -129,7 +129,7 @@ const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, dire
     .DGN-UI-Card-Extra {
         ${flexCol};
         ${positionRelative};
-        ${borderBox};
+        ${boxBorder};
     }
 `;
 Card.defaultProps = {