@peculiar/react-components 0.3.15-alpha.1 → 0.3.15

package/dist/esnext/Chip/chip.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
+import { css, cx } from '../styles';
 import { Typography } from '../Typography';
 import { CloseSmallIcon } from '../icons';
 /**
@@ -9,9 +8,8 @@ import { CloseSmallIcon } from '../icons';
 /**
  * Styles.
  */
-const ChipRoot = styled('div', {
-    shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
-})((props) => ({
+const stylesBase = () => css({
+    label: 'Chip',
     display: 'inline-flex',
     maxWidth: '100%',
     fontFamily: 'inherit',
@@ -30,80 +28,102 @@ const ChipRoot = styled('div', {
     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 && {
-        pointerEvents: 'none',
+        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)',
+        },
     }),
-    ...(Boolean(props.onClick) && !props.disabled && {
-        cursor: 'pointer',
-        userSelect: 'none',
-        WebkitTapHighlightColor: 'transparent',
+    ...(props.disabled && {
+        color: 'var(--pv-color-gray-8)',
+        backgroundColor: 'var(--pv-color-gray-4)',
     }),
-}), (props) => {
-    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)`;
-            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 ChipDeleteIcon = styled('span')({
+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)',
+    }),
+});
+const stylesDeleteAction = () => css({
+    label: 'delete',
     width: '24px',
     height: '24px',
     cursor: 'pointer',
@@ -116,7 +136,8 @@ const ChipDeleteIcon = styled('span')({
         opacity: '1',
     },
 });
-const ChipStartContent = styled('span')({
+const stylesStartContent = () => css({
+    label: 'Chip-startIcon',
     marginRight: 'var(--pv-size-base)',
     display: 'inherit',
 });
@@ -124,11 +145,9 @@ const ChipStartContent = styled('span')({
  *
  */
 export const Chip = React.forwardRef((props, ref) => {
-    const { children, disabled, deleteIcon = CloseSmallIcon, startContent: startContentProp, component, onClick, onDelete, ...other } = props;
-    const Component = component || 'div';
+    const { children, disabled, deleteIcon, variant, color, className, startContent: startContentProp, component, onClick, onDelete, ...other } = props;
     const clickable = Boolean(onClick);
     const baseProps = {
-        disabled,
         role: clickable ? 'button' : undefined,
         'aria-disabled': disabled ? true : undefined,
         tabIndex: clickable && !disabled ? 0 : undefined,
@@ -145,10 +164,32 @@ export const Chip = React.forwardRef((props, ref) => {
         if (!onDelete) {
             return null;
         }
-        return (React.createElement(ChipDeleteIcon, { "aria-hidden": true, as: deleteIcon, onClick: handleDeleteClick }));
+        const baseIconProps = {
+            'aria-hidden': true,
+            className: cx(stylesDeleteAction()),
+            onClick: handleDeleteClick,
+        };
+        if (deleteIcon) {
+            return React.cloneElement(deleteIcon, baseIconProps);
+        }
+        return (React.createElement(CloseSmallIcon, { ...baseIconProps }));
     };
-    const startContent = startContentProp && (React.createElement(ChipStartContent, null, startContentProp));
-    return (React.createElement(ChipRoot, { as: Component, ref: ref, ...baseProps, ...other },
+    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,
+        }) },
         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,13 +1,10 @@
 import React from 'react';
-import { keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
-/**
- *
- */
+import { css, cx, keyframes } from '../styles';
 /**
  * Styles.
  */
+const SIZE = 44;
+const THICKNESS = 4;
 const circularRotateKeyframe = keyframes `
   0% {
     transform: rotate(0deg);
@@ -30,55 +27,60 @@ const circularDashKeyframe = keyframes `
     stroke-dashoffset: -125px;
   }
 `;
-const CircularProgressRoot = styled('div', {
-    shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
-})((props) => ({
+const stylesBase = (color, variant) => css({
     label: 'CircularProgress',
     overflow: 'hidden',
     position: 'relative',
     display: 'inline-block',
-    color: `var(--pv-color-${props.color})`,
-    ...(props.variant === 'indeterminate' ? {
+    color: `var(--pv-color-${color})`,
+    ...(variant === 'indeterminate' ? {
         animation: `${circularRotateKeyframe} 1.4s linear infinite`,
     } : {
         transform: 'rotate(-90deg)',
     }),
-    ...(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')({
+});
+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',
     display: 'block',
 });
-const CircularProgressCircle = styled('circle')((props) => ({
+const stylesProgressCircle = (variant) => css({
+    label: 'CircularProgress-circle',
     stroke: 'currentcolor',
     strokeDasharray: '80px, 200px',
     strokeDashoffset: 0,
-    ...(props.variant === 'indeterminate' && {
+    ...(variant === 'indeterminate' && {
         animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`,
     }),
-}));
+});
 /**
  *
  */
-const SIZE = 44;
-const THICKNESS = 4;
 export const CircularProgress = React.forwardRef((props, ref) => {
-    const { size, variant = 'indeterminate', value = 0, ...other } = props;
+    const { color, className, 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(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 }))));
+    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 }))));
 });
 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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,wBAAwB,CAAC;AAmCjD;;GAEG;AAEH;;GAEG;AACH,MAAM,sBAAsB,GAAG,SAAS,CAAA;;;;;;;CAOvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,SAAS,CAAA;;;;;;;;;;;;;CAarC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,EAAE;IACzC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,OAAO;CACnE,CAAC,CAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,kBAAkB,KAAK,CAAC,KAAK,GAAG;IACvC,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC;QACtC,SAAS,EAAE,GAAG,sBAAsB,uBAAuB;KAC5D,CAAC,CAAC,CAAC;QACF,SAAS,EAAE,gBAAgB;KAC5B,CAAC;IACF,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI;QAC5B,MAAM,EAAE,uBAAuB;QAC/B,KAAK,EAAE,uBAAuB;KAC/B,CAAC;IACF,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI;QAC5B,MAAM,EAAE,uBAAuB;QAC/B,KAAK,EAAE,uBAAuB;KAC/B,CAAC;CACH,CAAC,CAAC,CAAC;AAEJ,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,EAAE,OAAO;CACjB,CAAC,CAAC;AAEH,MAAM,sBAAsB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAA4C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACrG,MAAM,EAAE,cAAc;IACtB,eAAe,EAAE,aAAa;IAC9B,gBAAgB,EAAE,CAAC;IACnB,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,eAAe,IAAI;QACvC,SAAS,EAAE,GAAG,oBAAoB,4BAA4B;KAC/D,CAAC;CACH,CAAC,CAAC,CAAC;AACJ;;GAEG;AAEH,MAAM,IAAI,GAAG,EAAE,CAAC;AAChB,MAAM,SAAS,GAAG,CAAC,CAAC;AAEpB,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC9C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,IAAI,EACJ,OAAO,GAAG,eAAe,EACzB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAwB,EAAE,CAAC;IAE5C,IAAI,OAAO,KAAK,aAAa,EAAE;QAC7B,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;QAE7D,WAAW,CAAC,eAAe,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACvD,WAAW,CAAC,gBAAgB,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;KAC1F;IAED,OAAO,CACL,oBAAC,oBAAoB,IACnB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,KACN,KAAK;QAET,oBAAC,mBAAmB,IAClB,OAAO,EAAE,GAAG,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;YAElD,oBAAC,sBAAsB,IACrB,EAAE,EAAE,IAAI,EACR,EAAE,EAAE,IAAI,EACR,CAAC,EAAE,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,EACzB,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,SAAS,EACtB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,OAAO,GAChB,CACkB,CACD,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,gBAAgB,CAAC,YAAY,GAAG;IAC9B,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,CAAC;CACT,CAAC"}
+{"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,41 +1,32 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
 import { Transition } from 'react-transition-group';
-/**
- *
- */
-/**
- * Styles.
- */
-const CollapseRoot = styled('div', {
-    shouldForwardProp: (prop) => isPropValid(prop) && !['orientation', 'in'].includes(prop),
-})((props) => ({
+import { css, cx } from '../styles';
+const stylesBase = (timeout, isHorizontal) => css({
+    label: 'Collapse',
     overflow: 'hidden',
-    transition: `${props.orientation === 'horizontal' ? 'width' : 'height'} ${props.timeout}ms cubic-bezier(0.4, 0, 0.2, 1) 0ms`,
-    ...(props.orientation === 'horizontal' ? {
+    transition: `${isHorizontal ? 'width' : 'height'} ${timeout}ms cubic-bezier(0.4, 0, 0.2, 1) 0ms`,
+    ...(isHorizontal ? {
         height: 'auto',
         width: 0,
     } : {
         height: 0,
     }),
-    ...(props.state === 'entered' && {
-        overflow: 'visible',
-        ...(props.orientation === 'horizontal' ? {
-            width: 'auto',
-        } : {
-            height: 'auto',
-        }),
-    }),
-    ...(props.state === 'exited' && !props.in && {
-        visibility: 'hidden',
+});
+const stylesEntered = (isHorizontal) => css({
+    label: 'entered',
+    overflow: 'visible',
+    ...(isHorizontal ? {
+        width: 'auto',
+    } : {
+        height: 'auto',
     }),
-}));
-/**
- *
- */
+});
+const stylesHidden = () => css({
+    label: 'hidden',
+    visibility: 'hidden',
+});
 export const Collapse = (props) => {
-    const { timeout, in: inProp, children, orientation, onEnter, onEntered, onEntering, onExit, onExited, onExiting, ...other } = props;
+    const { timeout, in: inProp, children, orientation, onEnter, onEntered, onEntering, onExit, onExited, onExiting, className, ...other } = props;
     const wrapperRef = React.useRef(null);
     const nodeRef = React.useRef(null);
     const isHorizontal = orientation === 'horizontal';
@@ -92,7 +83,12 @@ 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(CollapseRoot, { timeout: timeout, orientation: orientation, state: state, in: inProp, ref: nodeRef, ...other },
+    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 },
         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,18 +1,11 @@
 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';
-/**
- *
- */
-/**
- * Styles.
- */
-const DialogRoot = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'loading',
-})((props) => ({
+import { css, cx } from '../styles';
+const stylesBase = (loading) => css({
+    label: 'Dialog',
     width: '100%',
     display: 'flex',
     maxHeight: 'calc(100% - 60px)',
@@ -24,7 +17,7 @@ const DialogRoot = styled(Box, {
     overflow: 'hidden',
     border: 0,
     padding: 0,
-    ...(props.loading && {
+    ...(loading && {
         '[data-key="dialog.content"]': {
             opacity: 0.5,
         },
@@ -32,48 +25,56 @@ const DialogRoot = styled(Box, {
             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',
-    }),
-}));
-const DialogModal = styled(Modal)({
+});
+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',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
 });
-const DialogLoading = styled(Box)({
+const stylesLoading = () => css({
+    label: 'Dialog-loading',
     position: 'absolute',
     inset: '0px',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
 });
-/**
- *
- */
 export const Dialog = React.forwardRef((props, ref) => {
-    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: {
+    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: {
             invisible: fullScreen,
         } },
         React.createElement(Fade, { in: open, timeout: transitionDuration },
-            React.createElement(DialogRoot, { role: "dialog", background: "white", borderRadius: fullScreen ? 0 : 4, loading: loading, fullScreen: fullScreen, tabIndex: -1, 
-                // @ts-ignore
-                component: "fieldset", disabled: loading, ...other },
+            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 },
                 children,
-                loading && (React.createElement(DialogLoading, null,
+                loading && (React.createElement(Box, { className: cx(stylesLoading()) },
                     React.createElement(CircularProgress, { color: loadingColor })))))));
 });
 Dialog.displayName = 'Dialog';

package/dist/esnext/Dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/Dialog/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA0DvD;;GAEG;AAEH;;GAEG;AACH,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,EAAE;IAC7B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,SAAS;CAChD,CAAC,CAAiB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,mBAAmB;IAC9B,aAAa,EAAE,QAAQ;IACvB,MAAM,EAAE,uBAAuB;IAC/B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,6BAA6B;IACxC,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IACV,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI;QACnB,6BAA6B,EAAE;YAC7B,OAAO,EAAE,GAAG;SACb;QACD,6BAA6B,EAAE;YAC7B,OAAO,EAAE,GAAG;SACb;KACF,CAAC;IACF,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI;QAC5B,QAAQ,EAAE,OAAO;KAClB,CAAC;IACF,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI;QAC7B,QAAQ,EAAE,OAAO;KAClB,CAAC;IACF,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI;QAC5B,QAAQ,EAAE,QAAQ;KACnB,CAAC;IACF,GAAG,CAAC,KAAK,CAAC,UAAU,IAAI;QACtB,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,MAAM;KAClB,CAAC;CACH,CAAC,CAAC,CAAC;AAEJ,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;CACzB,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAChC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;CACzB,CAAC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAA8B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACjF,MAAM,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACpB,OAAO,EACP,YAAY,EACZ,OAAO,EACP,aAAa,EAAE,UAAU,EACzB,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,iBACH,UAAU,EACvB,oBAAoB,EAAE,OAAO,IAAI,oBAAoB,EACrD,oBAAoB,EAAE,OAAO,IAAI,oBAAoB,EACrD,aAAa,EAAE;YACb,SAAS,EAAE,UAAU;SACtB;QAED,oBAAC,IAAI,IACH,EAAE,EAAE,IAAI,EACR,OAAO,EAAE,kBAAkB;YAE3B,oBAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,UAAU,EAAC,OAAO,EAClB,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,CAAC,CAAC;gBACZ,aAAa;gBACb,SAAS,EAAC,UAAU,EACpB,QAAQ,EAAE,OAAO,KACb,KAAK;gBAER,QAAQ;gBACR,OAAO,IAAI,CACV,oBAAC,aAAa;oBACZ,oBAAC,gBAAgB,IAAC,KAAK,EAAE,YAAY,GAAI,CAC3B,CACjB,CACU,CACR,CACK,CACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,MAAM,CAAC,YAAY,GAAG;IACpB,kBAAkB,EAAE,GAAG;IACvB,UAAU,EAAE,KAAK;IACjB,oBAAoB,EAAE,KAAK;IAC3B,oBAAoB,EAAE,KAAK;IAC3B,IAAI,EAAE,QAAQ;IACd,YAAY,EAAE,WAAW;CAC1B,CAAC"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/Dialog/dialog.tsx"],"names":[],"mappings":"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"}