@peculiar/react-components 0.3.14 → 0.4.0

package/dist/esnext/Chip/chip.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { css, cx } from '../styles';
+import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
 import { Typography } from '../Typography';
 import { CloseSmallIcon } from '../icons';
 /**
@@ -8,8 +9,9 @@ import { CloseSmallIcon } from '../icons';
 /**
  * Styles.
  */
-const stylesBase = () => css({
-    label: 'Chip',
+const ChipRoot = styled('div', {
+    shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
+})((props) => ({
     display: 'inline-flex',
     maxWidth: '100%',
     fontFamily: 'inherit',
@@ -28,102 +30,86 @@ const stylesBase = () => css({
     alignItems: 'center',
     whiteSpace: 'nowrap',
     textDecoration: 'none',
-});
-const stylesDisabled = () => css({
-    label: 'disabled',
-    pointerEvents: 'none',
-});
-const stylesClickable = () => css({
-    label: 'clickable',
-    cursor: 'pointer',
-    userSelect: 'none',
-    WebkitTapHighlightColor: 'transparent',
-});
-const stylesVariantContainedColorNotDefault = (props) => css({
-    label: 'contained',
-    backgroundColor: `var(--pv-color-${props.color})`,
-    color: 'var(--pv-color-white)',
-    ...(typeof props.onClick === 'function' && !props.disabled && {
-        '&:hover': {
-            backgroundColor: `var(--pv-color-${props.color}-tint-1)`,
-        },
-        '&:focus': {
-            backgroundColor: `var(--pv-color-${props.color}-tint-2)`,
-        },
-        '&:active': {
-            backgroundColor: `var(--pv-color-${props.color}-tint-2)`,
-            boxShadow: 'var(--pv-shadow-light-medium)',
-        },
-    }),
-    ...(props.disabled && {
-        color: 'var(--pv-color-gray-8)',
-        backgroundColor: 'var(--pv-color-gray-4)',
-    }),
-});
-const stylesVariantContainedColorDefault = (props) => css({
-    label: 'contained-default',
-    backgroundColor: 'var(--pv-color-gray-4)',
-    color: 'var(--pv-color-black)',
-    ...(typeof props.onClick === 'function' && !props.disabled && {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-7)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-6)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-5)',
-        },
-    }),
     ...(props.disabled && {
-        color: 'var(--pv-color-gray-8)',
-        backgroundColor: 'var(--pv-color-gray-4)',
+        pointerEvents: 'none',
     }),
-});
-const stylesVariantOutlinedColorNotDefault = (props) => css({
-    label: 'outlined',
-    backgroundColor: 'transparent',
-    color: `var(--pv-color-${props.color})`,
-    borderColor: `var(--pv-color-${props.color}-tint-2)`,
-    ...(typeof props.onClick === 'function' && !props.disabled && {
-        '&:hover': {
-            backgroundColor: `var(--pv-color-${props.color}-tint-5)`,
-        },
-        '&:focus': {
-            backgroundColor: `var(--pv-color-${props.color}-tint-4)`,
-        },
-        '&:active': {
-            backgroundColor: `var(--pv-color-${props.color}-tint-3)`,
-        },
-    }),
-    ...(props.disabled && {
-        color: 'var(--pv-color-gray-8)',
-        borderColor: 'var(--pv-color-gray-4)',
-    }),
-});
-const stylesVariantOutlinedColorDefault = (props) => css({
-    label: 'outlined-default',
-    backgroundColor: 'transparent',
-    color: 'var(--pv-color-gray-10)',
-    borderColor: 'var(--pv-color-gray-6)',
-    ...(typeof props.onClick === 'function' && !props.disabled && {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-4)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-5)',
-        },
-    }),
-    ...(props.disabled && {
-        color: 'var(--pv-color-gray-8)',
-        borderColor: 'var(--pv-color-gray-4)',
+    ...(Boolean(props.onClick) && !props.disabled && {
+        cursor: 'pointer',
+        userSelect: 'none',
+        WebkitTapHighlightColor: 'transparent',
     }),
+}), (props) => {
+    const isDark = props.theme.mode === 'dark';
+    let color;
+    let borderColor;
+    let backgroundColor;
+    let backgroundColorHover;
+    let backgroundColorFocus;
+    let backgroundColorActive;
+    let boxShadowActive;
+    if (props.variant === 'contained') {
+        if (props.color === 'default') {
+            color = 'var(--pv-color-black)';
+            backgroundColor = 'var(--pv-color-gray-4)';
+            backgroundColorHover = 'var(--pv-color-gray-7)';
+            backgroundColorFocus = 'var(--pv-color-gray-6)';
+            backgroundColorActive = 'var(--pv-color-gray-5)';
+        }
+        else {
+            color = 'var(--pv-color-white)';
+            backgroundColor = `var(--pv-color-${props.color})`;
+            backgroundColorHover = `var(--pv-color-${props.color}-tint-1)`;
+            backgroundColorFocus = `var(--pv-color-${props.color}-tint-2)`;
+            backgroundColorActive = `var(--pv-color-${props.color}-tint-2)`;
+            if (isDark) {
+                boxShadowActive = 'var(--pv-shadow-dark-hight)';
+            }
+            else {
+                boxShadowActive = 'var(--pv-shadow-light-medium)';
+            }
+        }
+    }
+    if (props.variant === 'outlined') {
+        if (props.color === 'default') {
+            color = 'var(--pv-color-gray-10)';
+            borderColor = 'var(--pv-color-gray-6)';
+            backgroundColor = 'transparent';
+            backgroundColorHover = 'var(--pv-color-gray-3)';
+            backgroundColorFocus = 'var(--pv-color-gray-4)';
+            backgroundColorActive = 'var(--pv-color-gray-5)';
+        }
+        else {
+            color = `var(--pv-color-${props.color})`;
+            borderColor = `var(--pv-color-${props.color}-tint-2)`;
+            backgroundColor = 'transparent';
+            backgroundColorHover = `var(--pv-color-${props.color}-tint-5)`;
+            backgroundColorFocus = `var(--pv-color-${props.color}-tint-4)`;
+            backgroundColorActive = `var(--pv-color-${props.color}-tint-3)`;
+        }
+    }
+    return {
+        borderColor,
+        backgroundColor,
+        color,
+        ...(typeof props.onClick === 'function' && !props.disabled && {
+            '&:hover': {
+                backgroundColor: backgroundColorHover,
+            },
+            '&:focus': {
+                backgroundColor: backgroundColorFocus,
+            },
+            '&:active': {
+                backgroundColor: backgroundColorActive,
+                boxShadow: boxShadowActive,
+            },
+        }),
+        ...(props.disabled && {
+            color: 'var(--pv-color-gray-8)',
+            borderColor: 'var(--pv-color-gray-4)',
+        }),
+    };
 });
-const stylesDeleteAction = () => css({
-    label: 'delete',
+const ChipDeleteIcon = styled('span')({
     width: '24px',
     height: '24px',
     cursor: 'pointer',
@@ -136,8 +122,7 @@ const stylesDeleteAction = () => css({
         opacity: '1',
     },
 });
-const stylesStartContent = () => css({
-    label: 'Chip-startIcon',
+const ChipStartContent = styled('span')({
     marginRight: 'var(--pv-size-base)',
     display: 'inherit',
 });
@@ -145,9 +130,11 @@ const stylesStartContent = () => css({
  *
  */
 export const Chip = React.forwardRef((props, ref) => {
-    const { children, disabled, deleteIcon, variant, color, className, startContent: startContentProp, component, onClick, onDelete, ...other } = props;
+    const { children, disabled, deleteIcon = CloseSmallIcon, startContent: startContentProp, component, onClick, onDelete, ...other } = props;
+    const Component = component || 'div';
     const clickable = Boolean(onClick);
     const baseProps = {
+        disabled,
         role: clickable ? 'button' : undefined,
         'aria-disabled': disabled ? true : undefined,
         tabIndex: clickable && !disabled ? 0 : undefined,
@@ -164,32 +151,10 @@ export const Chip = React.forwardRef((props, ref) => {
         if (!onDelete) {
             return null;
         }
-        const baseIconProps = {
-            'aria-hidden': true,
-            className: cx(stylesDeleteAction()),
-            onClick: handleDeleteClick,
-        };
-        if (deleteIcon) {
-            return React.cloneElement(deleteIcon, baseIconProps);
-        }
-        return (React.createElement(CloseSmallIcon, { ...baseIconProps }));
+        return (React.createElement(ChipDeleteIcon, { "aria-hidden": true, as: deleteIcon, onClick: handleDeleteClick }));
     };
-    const startContent = startContentProp && (React.createElement("span", { className: cx(stylesStartContent()) }, startContentProp));
-    const Component = component || 'div';
-    return (React.createElement(Component, { ...other, ...baseProps, ref: ref, className: cx({
-            [stylesBase()]: true,
-            [stylesDisabled()]: disabled,
-            [stylesClickable()]: clickable && !disabled,
-            ...(color !== 'default' && {
-                [stylesVariantContainedColorNotDefault(props)]: variant === 'contained',
-                [stylesVariantOutlinedColorNotDefault(props)]: variant === 'outlined',
-            }),
-            ...(color === 'default' && {
-                [stylesVariantContainedColorDefault(props)]: variant === 'contained',
-                [stylesVariantOutlinedColorDefault(props)]: variant === 'outlined',
-            }),
-            [className]: !!className,
-        }) },
+    const startContent = startContentProp && (React.createElement(ChipStartContent, null, startContentProp));
+    return (React.createElement(ChipRoot, { as: Component, ref: ref, ...baseProps, ...other },
         startContent,
         React.createElement(Typography, { variant: "b3", component: "span", color: "inherit", noWrap: true }, children),
         renderDeleteAction()));

package/dist/esnext/Chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/Chip/chip.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/Chip/chip.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/CircularProgress/circular_progress.js

@@ -1,10 +1,13 @@
 import React from 'react';
-import { css, cx, keyframes } from '../styles';
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
+/**
+ *
+ */
 /**
  * Styles.
  */
-const SIZE = 44;
-const THICKNESS = 4;
 const circularRotateKeyframe = keyframes `
   0% {
     transform: rotate(0deg);
@@ -27,60 +30,55 @@ const circularDashKeyframe = keyframes `
     stroke-dashoffset: -125px;
   }
 `;
-const stylesBase = (color, variant) => css({
+const CircularProgressRoot = styled('div', {
+    shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
+})((props) => ({
     label: 'CircularProgress',
     overflow: 'hidden',
     position: 'relative',
     display: 'inline-block',
-    color: `var(--pv-color-${color})`,
-    ...(variant === 'indeterminate' ? {
+    color: `var(--pv-color-${props.color})`,
+    ...(props.variant === 'indeterminate' ? {
         animation: `${circularRotateKeyframe} 1.4s linear infinite`,
     } : {
         transform: 'rotate(-90deg)',
     }),
-});
-const stylesBaseSmall = () => css({
-    label: 'small',
-    height: 'var(--pv-size-base-3)',
-    width: 'var(--pv-size-base-3)',
-});
-const stylesBaseLarge = () => css({
-    label: 'large',
-    height: 'var(--pv-size-base-6)',
-    width: 'var(--pv-size-base-6)',
-});
-const stylesProgressSvg = () => css({
-    label: 'CircularProgress-svg',
+    ...(props.size === 'small' && {
+        height: 'var(--pv-size-base-3)',
+        width: 'var(--pv-size-base-3)',
+    }),
+    ...(props.size === 'large' && {
+        height: 'var(--pv-size-base-6)',
+        width: 'var(--pv-size-base-6)',
+    }),
+}));
+const CircularProgressSvg = styled('svg')({
     display: 'block',
 });
-const stylesProgressCircle = (variant) => css({
-    label: 'CircularProgress-circle',
+const CircularProgressCircle = styled('circle')((props) => ({
     stroke: 'currentcolor',
     strokeDasharray: '80px, 200px',
     strokeDashoffset: 0,
-    ...(variant === 'indeterminate' && {
+    ...(props.variant === 'indeterminate' && {
         animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`,
     }),
-});
+}));
 /**
  *
  */
+const SIZE = 44;
+const THICKNESS = 4;
 export const CircularProgress = React.forwardRef((props, ref) => {
-    const { color, className, size, variant = 'indeterminate', value = 0, ...other } = props;
+    const { size, variant = 'indeterminate', value = 0, ...other } = props;
     const circleStyle = {};
     if (variant === 'determinate') {
         const circumference = 2 * Math.PI * ((SIZE - THICKNESS) / 2);
         circleStyle.strokeDasharray = circumference.toFixed(3);
         circleStyle.strokeDashoffset = `${(((100 - value) / 100) * circumference).toFixed(3)}px`;
     }
-    return (React.createElement("div", { ...other, ref: ref, className: cx({
-            [stylesBase(color, variant)]: true,
-            [stylesBaseSmall()]: size === 'small',
-            [stylesBaseLarge()]: size === 'large',
-            [className]: !!className,
-        }), role: "progressbar" },
-        React.createElement("svg", { viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`, className: stylesProgressSvg() },
-            React.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle(variant), style: circleStyle }))));
+    return (React.createElement(CircularProgressRoot, { ref: ref, role: "progressbar", variant: variant, size: size, ...other },
+        React.createElement(CircularProgressSvg, { viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}` },
+            React.createElement(CircularProgressCircle, { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, style: circleStyle, variant: variant }))));
 });
 CircularProgress.displayName = 'CircularProgress';
 CircularProgress.defaultProps = {

package/dist/esnext/CircularProgress/circular_progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Collapse/collapse.js

@@ -1,32 +1,41 @@
 import * as React from 'react';
+import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
 import { Transition } from 'react-transition-group';
-import { css, cx } from '../styles';
-const stylesBase = (timeout, isHorizontal) => css({
-    label: 'Collapse',
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+const CollapseRoot = styled('div', {
+    shouldForwardProp: (prop) => isPropValid(prop) && !['orientation', 'in'].includes(prop),
+})((props) => ({
     overflow: 'hidden',
-    transition: `${isHorizontal ? 'width' : 'height'} ${timeout}ms cubic-bezier(0.4, 0, 0.2, 1) 0ms`,
-    ...(isHorizontal ? {
+    transition: `${props.orientation === 'horizontal' ? 'width' : 'height'} ${props.timeout}ms cubic-bezier(0.4, 0, 0.2, 1) 0ms`,
+    ...(props.orientation === 'horizontal' ? {
         height: 'auto',
         width: 0,
     } : {
         height: 0,
     }),
-});
-const stylesEntered = (isHorizontal) => css({
-    label: 'entered',
-    overflow: 'visible',
-    ...(isHorizontal ? {
-        width: 'auto',
-    } : {
-        height: 'auto',
+    ...(props.state === 'entered' && {
+        overflow: 'visible',
+        ...(props.orientation === 'horizontal' ? {
+            width: 'auto',
+        } : {
+            height: 'auto',
+        }),
+    }),
+    ...(props.state === 'exited' && !props.in && {
+        visibility: 'hidden',
     }),
-});
-const stylesHidden = () => css({
-    label: 'hidden',
-    visibility: 'hidden',
-});
+}));
+/**
+ *
+ */
 export const Collapse = (props) => {
-    const { timeout, in: inProp, children, orientation, onEnter, onEntered, onEntering, onExit, onExited, onExiting, className, ...other } = props;
+    const { timeout, in: inProp, children, orientation, onEnter, onEntered, onEntering, onExit, onExited, onExiting, ...other } = props;
     const wrapperRef = React.useRef(null);
     const nodeRef = React.useRef(null);
     const isHorizontal = orientation === 'horizontal';
@@ -83,12 +92,7 @@ export const Collapse = (props) => {
             onExiting();
         }
     };
-    return (React.createElement(Transition, { in: inProp, timeout: timeout, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: onExited }, (state) => (React.createElement("div", { ...other, className: cx({
-            [stylesBase(timeout, isHorizontal)]: true,
-            [stylesEntered(isHorizontal)]: state === 'entered',
-            [stylesHidden()]: state === 'exited' && !inProp,
-            [className]: !!className,
-        }), ref: nodeRef },
+    return (React.createElement(Transition, { in: inProp, timeout: timeout, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: onExited }, (state) => (React.createElement(CollapseRoot, { timeout: timeout, orientation: orientation, state: state, in: inProp, ref: nodeRef, ...other },
         React.createElement("div", { ref: wrapperRef }, children)))));
 };
 Collapse.displayName = 'Collapse';

package/dist/esnext/Collapse/collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../src/Collapse/collapse.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../src/Collapse/collapse.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Dialog/dialog.js

@@ -1,11 +1,18 @@
 import React from 'react';
+import styled from '@emotion/styled';
 import { Modal } from '../Modal';
 import { Box } from '../Box';
 import { Fade } from '../Fade';
 import { CircularProgress } from '../CircularProgress';
-import { css, cx } from '../styles';
-const stylesBase = (loading) => css({
-    label: 'Dialog',
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+const DialogRoot = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'loading',
+})((props) => ({
     width: '100%',
     display: 'flex',
     maxHeight: 'calc(100% - 60px)',
@@ -13,11 +20,11 @@ const stylesBase = (loading) => css({
     margin: 'var(--pv-size-base-6)',
     position: 'relative',
     outline: 'none',
-    boxShadow: 'var(--pv-shadow-dark-hight)',
     overflow: 'hidden',
     border: 0,
     padding: 0,
-    ...(loading && {
+    boxShadow: 'var(--pv-shadow-dark-hight)',
+    ...(props.loading && {
         '[data-key="dialog.content"]': {
             opacity: 0.5,
         },
@@ -25,56 +32,60 @@ const stylesBase = (loading) => css({
             opacity: 0.5,
         },
     }),
+    ...(props.size === 'small' && {
+        maxWidth: '310px',
+    }),
+    ...(props.size === 'medium' && {
+        maxWidth: '640px',
+    }),
+    ...(props.size === 'large' && {
+        maxWidth: '1024px',
+    }),
+    ...(props.fullScreen && {
+        height: '100%',
+        margin: 0,
+        maxWidth: '100%',
+        maxHeight: 'none',
+    }),
+}), (props) => {
+    const isDark = props.theme.mode === 'dark';
+    let color = 'var(--pv-color-black)';
+    let backgroundColor = 'var(--pv-color-white)';
+    if (isDark) {
+        color = 'var(--pv-color-white)';
+        backgroundColor = 'var(--pv-color-gray-2)';
+    }
+    return {
+        color,
+        backgroundColor,
+    };
 });
-const stylesSizeSmall = () => css({
-    label: 'small',
-    maxWidth: '310px',
-});
-const stylesSizeMedium = () => css({
-    label: 'medium',
-    maxWidth: '640px',
-});
-const stylesSizeLarge = () => css({
-    label: 'large',
-    maxWidth: '1024px',
-});
-const stylesFullScreen = () => css({
-    label: 'fullScreen',
-    height: '100%',
-    margin: 0,
-    maxWidth: '100%',
-    maxHeight: 'none',
-});
-const stylesModal = () => css({
-    label: 'Dialog-modal',
+const DialogModal = styled(Modal)({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
 });
-const stylesLoading = () => css({
-    label: 'Dialog-loading',
+const DialogLoading = styled(Box)({
     position: 'absolute',
     inset: '0px',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
 });
+/**
+ *
+ */
 export const Dialog = React.forwardRef((props, ref) => {
-    const { open, children, className, fullScreen, transitionDuration, disableBackdropClick, disableEscapeKeyDown, size, loading, loadingColor, onClose, 'data-testid': dataTestId, ...other } = props;
-    return (React.createElement(Modal, { ref: ref, open: open, transitionDuration: transitionDuration, onClose: onClose, "data-testid": dataTestId, className: cx(stylesModal()), disableBackdropClick: loading || disableBackdropClick, disableEscapeKeyDown: loading || disableEscapeKeyDown, backdropProps: {
+    const { open, children, fullScreen, transitionDuration, disableBackdropClick, disableEscapeKeyDown, loading, loadingColor, onClose, 'data-testid': dataTestId, ...other } = props;
+    return (React.createElement(DialogModal, { ref: ref, open: open, transitionDuration: transitionDuration, onClose: onClose, "data-testid": dataTestId, disableBackdropClick: loading || disableBackdropClick, disableEscapeKeyDown: loading || disableEscapeKeyDown, backdropProps: {
             invisible: fullScreen,
         } },
         React.createElement(Fade, { in: open, timeout: transitionDuration },
-            React.createElement(Box, { ...other, role: "dialog", background: "white", borderRadius: fullScreen ? 0 : 4, className: cx({
-                    [stylesBase(loading)]: true,
-                    [stylesSizeSmall()]: size === 'small',
-                    [stylesSizeMedium()]: size === 'medium',
-                    [stylesSizeLarge()]: size === 'large',
-                    [stylesFullScreen()]: fullScreen,
-                    [className]: !!className,
-                }), tabIndex: -1, component: "fieldset", disabled: loading },
+            React.createElement(DialogRoot, { role: "dialog", borderRadius: fullScreen ? 0 : 4, loading: loading, fullScreen: fullScreen, tabIndex: -1, 
+                // @ts-ignore
+                component: "fieldset", disabled: loading, ...other },
                 children,
-                loading && (React.createElement(Box, { className: cx(stylesLoading()) },
+                loading && (React.createElement(DialogLoading, null,
                     React.createElement(CircularProgress, { color: loadingColor })))))));
 });
 Dialog.displayName = 'Dialog';