diginet-core-ui 1.3.85 → 1.3.86

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 = {

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}

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')};

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,

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};

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}

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 = {

package/components/chip/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, Typography } from "../";
 import Icon from "../../icons";
-import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, cursorNotAllowed, positionAbsolute, overflowHidden } from "../../styles/general";
+import { itemsCenter, border, boxBorder, flexRow, displayInlineFlex, justifyCenter, positionRelative, userSelectNone, cursorNotAllowed, positionAbsolute, overflowHidden } from "../../styles/general";
 import { hexToRGBA } from "../../styles/color-helper";
 import { useTheme, useColor as colors } from "../../theme";
 const {
@@ -152,15 +152,15 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 const ChipLabelCSS = css`
     ${flexRow};
-    ${alignCenter};
+    ${itemsCenter};
     ${positionRelative};
     ${userSelectNone};
 `;
 const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
-    ${inlineFlex};
-    ${alignCenter};
+    ${displayInlineFlex};
+    ${itemsCenter};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${border('1px', info.border)};
     width: max-content;
     padding: ${info === null || info === void 0 ? void 0 : info.paddingSize};
@@ -221,9 +221,9 @@ const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
 const ChipIconCSS = info => css`
     ${flexRow};
     ${justifyCenter};
-    ${alignCenter};
+    ${itemsCenter};
     ${positionRelative};
-    ${borderBox};
+    ${boxBorder};
     ${overflowHidden};
     width: ${info === null || info === void 0 ? void 0 : info.iconSize};
     min-width: ${info === null || info === void 0 ? void 0 : info.iconSize};