@peculiar/react-components 0.3.14 → 0.4.0

package/dist/cjs/Chip/chip.js

@@ -44,10 +44,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = void 0;
 var React = __importStar(require("react"));
-var styles_1 = require("../styles");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var Typography_1 = require("../Typography");
 var icons_1 = require("../icons");
 /**
@@ -56,96 +60,80 @@ var icons_1 = require("../icons");
 /**
  * Styles.
  */
-var stylesBase = function () { return (0, styles_1.css)({
-    label: 'Chip',
-    display: 'inline-flex',
-    maxWidth: '100%',
-    fontFamily: 'inherit',
-    outline: '0',
-    boxSizing: 'border-box',
-    borderRadius: 'var(--pv-size-base-3)',
-    padding: '0 var(--pv-size-base-2)',
-    height: 'var(--pv-size-base-6)',
-    backgroundColor: 'transparent',
-    transition: 'background-color 200ms, color 200ms, border-color 200ms, box-shadow 200ms',
-    margin: '0 var(--pv-size-base)',
-    cursor: 'default',
-    border: '1px solid transparent',
-    verticalAlign: 'middle',
-    justifyContent: 'center',
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
-    textDecoration: 'none',
-}); };
-var stylesDisabled = function () { return (0, styles_1.css)({
-    label: 'disabled',
+var ChipRoot = (0, styled_1.default)('div', {
+    shouldForwardProp: function (prop) { return (0, is_prop_valid_1.default)(prop) && prop !== 'color'; },
+})(function (props) { return (__assign(__assign({ display: 'inline-flex', maxWidth: '100%', fontFamily: 'inherit', outline: '0', boxSizing: 'border-box', borderRadius: 'var(--pv-size-base-3)', padding: '0 var(--pv-size-base-2)', height: 'var(--pv-size-base-6)', backgroundColor: 'transparent', transition: 'background-color 200ms, color 200ms, border-color 200ms, box-shadow 200ms', margin: '0 var(--pv-size-base)', cursor: 'default', border: '1px solid transparent', verticalAlign: 'middle', justifyContent: 'center', alignItems: 'center', whiteSpace: 'nowrap', textDecoration: 'none' }, (props.disabled && {
     pointerEvents: 'none',
-}); };
-var stylesClickable = function () { return (0, styles_1.css)({
-    label: 'clickable',
+})), (Boolean(props.onClick) && !props.disabled && {
     cursor: 'pointer',
     userSelect: 'none',
     WebkitTapHighlightColor: 'transparent',
-}); };
-var stylesVariantContainedColorNotDefault = function (props) { return (0, styles_1.css)(__assign(__assign({ label: 'contained', backgroundColor: "var(--pv-color-".concat(props.color, ")"), color: 'var(--pv-color-white)' }, (typeof props.onClick === 'function' && !props.disabled && {
-    '&:hover': {
-        backgroundColor: "var(--pv-color-".concat(props.color, "-tint-1)"),
-    },
-    '&:focus': {
-        backgroundColor: "var(--pv-color-".concat(props.color, "-tint-2)"),
-    },
-    '&:active': {
-        backgroundColor: "var(--pv-color-".concat(props.color, "-tint-2)"),
-        boxShadow: 'var(--pv-shadow-light-medium)',
-    },
-})), (props.disabled && {
-    color: 'var(--pv-color-gray-8)',
-    backgroundColor: 'var(--pv-color-gray-4)',
-}))); };
-var stylesVariantContainedColorDefault = function (props) { return (0, styles_1.css)(__assign(__assign({ 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)',
-}))); };
-var stylesVariantOutlinedColorNotDefault = function (props) { return (0, styles_1.css)(__assign(__assign({ label: 'outlined', backgroundColor: 'transparent', color: "var(--pv-color-".concat(props.color, ")"), borderColor: "var(--pv-color-".concat(props.color, "-tint-2)") }, (typeof props.onClick === 'function' && !props.disabled && {
-    '&:hover': {
-        backgroundColor: "var(--pv-color-".concat(props.color, "-tint-5)"),
-    },
-    '&:focus': {
-        backgroundColor: "var(--pv-color-".concat(props.color, "-tint-4)"),
-    },
-    '&:active': {
-        backgroundColor: "var(--pv-color-".concat(props.color, "-tint-3)"),
-    },
-})), (props.disabled && {
-    color: 'var(--pv-color-gray-8)',
-    borderColor: 'var(--pv-color-gray-4)',
-}))); };
-var stylesVariantOutlinedColorDefault = function (props) { return (0, styles_1.css)(__assign(__assign({ 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)',
-}))); };
-var stylesDeleteAction = function () { return (0, styles_1.css)({
-    label: 'delete',
+}))); }, function (props) {
+    var isDark = props.theme.mode === 'dark';
+    var color;
+    var borderColor;
+    var backgroundColor;
+    var backgroundColorHover;
+    var backgroundColorFocus;
+    var backgroundColorActive;
+    var 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-".concat(props.color, ")");
+            backgroundColorHover = "var(--pv-color-".concat(props.color, "-tint-1)");
+            backgroundColorFocus = "var(--pv-color-".concat(props.color, "-tint-2)");
+            backgroundColorActive = "var(--pv-color-".concat(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-".concat(props.color, ")");
+            borderColor = "var(--pv-color-".concat(props.color, "-tint-2)");
+            backgroundColor = 'transparent';
+            backgroundColorHover = "var(--pv-color-".concat(props.color, "-tint-5)");
+            backgroundColorFocus = "var(--pv-color-".concat(props.color, "-tint-4)");
+            backgroundColorActive = "var(--pv-color-".concat(props.color, "-tint-3)");
+        }
+    }
+    return __assign(__assign({ borderColor: borderColor, backgroundColor: backgroundColor, color: 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)',
+    }));
+});
+var ChipDeleteIcon = (0, styled_1.default)('span')({
     width: '24px',
     height: '24px',
     cursor: 'pointer',
@@ -157,20 +145,20 @@ var stylesDeleteAction = function () { return (0, styles_1.css)({
     '&:hover': {
         opacity: '1',
     },
-}); };
-var stylesStartContent = function () { return (0, styles_1.css)({
-    label: 'Chip-startIcon',
+});
+var ChipStartContent = (0, styled_1.default)('span')({
     marginRight: 'var(--pv-size-base)',
     display: 'inherit',
-}); };
+});
 /**
  *
  */
 exports.Chip = React.forwardRef(function (props, ref) {
-    var _a, _b, _c, _d;
-    var children = props.children, disabled = props.disabled, deleteIcon = props.deleteIcon, variant = props.variant, color = props.color, className = props.className, startContentProp = props.startContent, component = props.component, onClick = props.onClick, onDelete = props.onDelete, other = __rest(props, ["children", "disabled", "deleteIcon", "variant", "color", "className", "startContent", "component", "onClick", "onDelete"]);
+    var children = props.children, disabled = props.disabled, _a = props.deleteIcon, deleteIcon = _a === void 0 ? icons_1.CloseSmallIcon : _a, startContentProp = props.startContent, component = props.component, onClick = props.onClick, onDelete = props.onDelete, other = __rest(props, ["children", "disabled", "deleteIcon", "startContent", "component", "onClick", "onDelete"]);
+    var Component = component || 'div';
     var clickable = Boolean(onClick);
     var baseProps = {
+        disabled: disabled,
         role: clickable ? 'button' : undefined,
         'aria-disabled': disabled ? true : undefined,
         tabIndex: clickable && !disabled ? 0 : undefined,
@@ -187,25 +175,10 @@ exports.Chip = React.forwardRef(function (props, ref) {
         if (!onDelete) {
             return null;
         }
-        var baseIconProps = {
-            'aria-hidden': true,
-            className: (0, styles_1.cx)(stylesDeleteAction()),
-            onClick: handleDeleteClick,
-        };
-        if (deleteIcon) {
-            return React.cloneElement(deleteIcon, baseIconProps);
-        }
-        return (React.createElement(icons_1.CloseSmallIcon, __assign({}, baseIconProps)));
+        return (React.createElement(ChipDeleteIcon, { "aria-hidden": true, as: deleteIcon, onClick: handleDeleteClick }));
     };
-    var startContent = startContentProp && (React.createElement("span", { className: (0, styles_1.cx)(stylesStartContent()) }, startContentProp));
-    var Component = component || 'div';
-    return (React.createElement(Component, __assign({}, other, baseProps, { ref: ref, className: (0, styles_1.cx)(__assign(__assign(__assign((_a = {}, _a[stylesBase()] = true, _a[stylesDisabled()] = disabled, _a[stylesClickable()] = clickable && !disabled, _a), (color !== 'default' && (_b = {},
-            _b[stylesVariantContainedColorNotDefault(props)] = variant === 'contained',
-            _b[stylesVariantOutlinedColorNotDefault(props)] = variant === 'outlined',
-            _b))), (color === 'default' && (_c = {},
-            _c[stylesVariantContainedColorDefault(props)] = variant === 'contained',
-            _c[stylesVariantOutlinedColorDefault(props)] = variant === 'outlined',
-            _c))), (_d = {}, _d[className] = !!className, _d))) }),
+    var startContent = startContentProp && (React.createElement(ChipStartContent, null, startContentProp));
+    return (React.createElement(ChipRoot, __assign({ as: Component, ref: ref }, baseProps, other),
         startContent,
         React.createElement(Typography_1.Typography, { variant: "b3", component: "span", color: "inherit", noWrap: true }, children),
         renderDeleteAction()));

package/dist/cjs/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/cjs/CircularProgress/circular_progress.js

@@ -31,56 +31,52 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CircularProgress = void 0;
 var react_1 = __importDefault(require("react"));
-var styles_1 = require("../styles");
+var react_2 = require("@emotion/react");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+/**
+ *
+ */
 /**
  * Styles.
  */
-var SIZE = 44;
-var THICKNESS = 4;
-var circularRotateKeyframe = (0, styles_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
-var circularDashKeyframe = (0, styles_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
-var stylesBase = function (color, variant) { return (0, styles_1.css)(__assign({ label: 'CircularProgress', overflow: 'hidden', position: 'relative', display: 'inline-block', color: "var(--pv-color-".concat(color, ")") }, (variant === 'indeterminate' ? {
+var circularRotateKeyframe = (0, react_2.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
+var circularDashKeyframe = (0, react_2.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
+var CircularProgressRoot = (0, styled_1.default)('div', {
+    shouldForwardProp: function (prop) { return (0, is_prop_valid_1.default)(prop) && prop !== 'color'; },
+})(function (props) { return (__assign(__assign(__assign({ label: 'CircularProgress', overflow: 'hidden', position: 'relative', display: 'inline-block', color: "var(--pv-color-".concat(props.color, ")") }, (props.variant === 'indeterminate' ? {
     animation: "".concat(circularRotateKeyframe, " 1.4s linear infinite"),
 } : {
     transform: 'rotate(-90deg)',
-}))); };
-var stylesBaseSmall = function () { return (0, styles_1.css)({
-    label: 'small',
+})), (props.size === 'small' && {
     height: 'var(--pv-size-base-3)',
     width: 'var(--pv-size-base-3)',
-}); };
-var stylesBaseLarge = function () { return (0, styles_1.css)({
-    label: 'large',
+})), (props.size === 'large' && {
     height: 'var(--pv-size-base-6)',
     width: 'var(--pv-size-base-6)',
-}); };
-var stylesProgressSvg = function () { return (0, styles_1.css)({
-    label: 'CircularProgress-svg',
+}))); });
+var CircularProgressSvg = (0, styled_1.default)('svg')({
     display: 'block',
-}); };
-var stylesProgressCircle = function (variant) { return (0, styles_1.css)(__assign({ label: 'CircularProgress-circle', stroke: 'currentcolor', strokeDasharray: '80px, 200px', strokeDashoffset: 0 }, (variant === 'indeterminate' && {
+});
+var CircularProgressCircle = (0, styled_1.default)('circle')(function (props) { return (__assign({ stroke: 'currentcolor', strokeDasharray: '80px, 200px', strokeDashoffset: 0 }, (props.variant === 'indeterminate' && {
     animation: "".concat(circularDashKeyframe, " 1.4s ease-in-out infinite"),
-}))); };
+}))); });
 /**
  *
  */
+var SIZE = 44;
+var THICKNESS = 4;
 exports.CircularProgress = react_1.default.forwardRef(function (props, ref) {
-    var _a;
-    var color = props.color, className = props.className, size = props.size, _b = props.variant, variant = _b === void 0 ? 'indeterminate' : _b, _c = props.value, value = _c === void 0 ? 0 : _c, other = __rest(props, ["color", "className", "size", "variant", "value"]);
+    var size = props.size, _a = props.variant, variant = _a === void 0 ? 'indeterminate' : _a, _b = props.value, value = _b === void 0 ? 0 : _b, other = __rest(props, ["size", "variant", "value"]);
     var circleStyle = {};
     if (variant === 'determinate') {
         var circumference = 2 * Math.PI * ((SIZE - THICKNESS) / 2);
         circleStyle.strokeDasharray = circumference.toFixed(3);
         circleStyle.strokeDashoffset = "".concat((((100 - value) / 100) * circumference).toFixed(3), "px");
     }
-    return (react_1.default.createElement("div", __assign({}, other, { ref: ref, className: (0, styles_1.cx)((_a = {},
-            _a[stylesBase(color, variant)] = true,
-            _a[stylesBaseSmall()] = size === 'small',
-            _a[stylesBaseLarge()] = size === 'large',
-            _a[className] = !!className,
-            _a)), role: "progressbar" }),
-        react_1.default.createElement("svg", { viewBox: "".concat(SIZE / 2, " ").concat(SIZE / 2, " ").concat(SIZE, " ").concat(SIZE), className: stylesProgressSvg() },
-            react_1.default.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle(variant), style: circleStyle }))));
+    return (react_1.default.createElement(CircularProgressRoot, __assign({ ref: ref, role: "progressbar", variant: variant, size: size }, other),
+        react_1.default.createElement(CircularProgressSvg, { viewBox: "".concat(SIZE / 2, " ").concat(SIZE / 2, " ").concat(SIZE, " ").concat(SIZE) },
+            react_1.default.createElement(CircularProgressCircle, { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, style: circleStyle, variant: variant }))));
 });
 exports.CircularProgress.displayName = 'CircularProgress';
 exports.CircularProgress.defaultProps = {

package/dist/cjs/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/cjs/Collapse/collapse.js

@@ -44,28 +44,40 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Collapse = void 0;
 var React = __importStar(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
+var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
 var react_transition_group_1 = require("react-transition-group");
-var styles_1 = require("../styles");
-var stylesBase = function (timeout, isHorizontal) { return (0, styles_1.css)(__assign({ label: 'Collapse', overflow: 'hidden', transition: "".concat(isHorizontal ? 'width' : 'height', " ").concat(timeout, "ms cubic-bezier(0.4, 0, 0.2, 1) 0ms") }, (isHorizontal ? {
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var CollapseRoot = (0, styled_1.default)('div', {
+    shouldForwardProp: function (prop) { return (0, is_prop_valid_1.default)(prop) && !['orientation', 'in'].includes(prop); },
+})(function (props) { return (__assign(__assign(__assign({ overflow: 'hidden', transition: "".concat(props.orientation === 'horizontal' ? 'width' : 'height', " ").concat(props.timeout, "ms cubic-bezier(0.4, 0, 0.2, 1) 0ms") }, (props.orientation === 'horizontal' ? {
     height: 'auto',
     width: 0,
 } : {
     height: 0,
-}))); };
-var stylesEntered = function (isHorizontal) { return (0, styles_1.css)(__assign({ label: 'entered', overflow: 'visible' }, (isHorizontal ? {
+})), (props.state === 'entered' && __assign({ overflow: 'visible' }, (props.orientation === 'horizontal' ? {
     width: 'auto',
 } : {
     height: 'auto',
-}))); };
-var stylesHidden = function () { return (0, styles_1.css)({
-    label: 'hidden',
+})))), (props.state === 'exited' && !props.in && {
     visibility: 'hidden',
-}); };
+}))); });
+/**
+ *
+ */
 var Collapse = function (props) {
-    var timeout = props.timeout, inProp = props.in, children = props.children, orientation = props.orientation, onEnter = props.onEnter, onEntered = props.onEntered, onEntering = props.onEntering, onExit = props.onExit, onExited = props.onExited, onExiting = props.onExiting, className = props.className, other = __rest(props, ["timeout", "in", "children", "orientation", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "className"]);
+    var timeout = props.timeout, inProp = props.in, children = props.children, orientation = props.orientation, onEnter = props.onEnter, onEntered = props.onEntered, onEntering = props.onEntering, onExit = props.onExit, onExited = props.onExited, onExiting = props.onExiting, other = __rest(props, ["timeout", "in", "children", "orientation", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting"]);
     var wrapperRef = React.useRef(null);
     var nodeRef = React.useRef(null);
     var isHorizontal = orientation === 'horizontal';
@@ -122,16 +134,8 @@ var Collapse = function (props) {
             onExiting();
         }
     };
-    return (React.createElement(react_transition_group_1.Transition, { in: inProp, timeout: timeout, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: onExited }, function (state) {
-        var _a;
-        return (React.createElement("div", __assign({}, other, { className: (0, styles_1.cx)((_a = {},
-                _a[stylesBase(timeout, isHorizontal)] = true,
-                _a[stylesEntered(isHorizontal)] = state === 'entered',
-                _a[stylesHidden()] = state === 'exited' && !inProp,
-                _a[className] = !!className,
-                _a)), ref: nodeRef }),
-            React.createElement("div", { ref: wrapperRef }, children)));
-    }));
+    return (React.createElement(react_transition_group_1.Transition, { in: inProp, timeout: timeout, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: onExited }, function (state) { return (React.createElement(CollapseRoot, __assign({ timeout: timeout, orientation: orientation, state: state, in: inProp, ref: nodeRef }, other),
+        React.createElement("div", { ref: wrapperRef }, children))); }));
 };
 exports.Collapse = Collapse;
 exports.Collapse.displayName = 'Collapse';

package/dist/cjs/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/cjs/Dialog/dialog.js

@@ -27,69 +27,76 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = void 0;
 var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
 var Modal_1 = require("../Modal");
 var Box_1 = require("../Box");
 var Fade_1 = require("../Fade");
 var CircularProgress_1 = require("../CircularProgress");
-var styles_1 = require("../styles");
-var stylesBase = function (loading) { return (0, styles_1.css)(__assign({ label: 'Dialog', width: '100%', display: 'flex', maxHeight: 'calc(100% - 60px)', flexDirection: 'column', margin: 'var(--pv-size-base-6)', position: 'relative', outline: 'none', boxShadow: 'var(--pv-shadow-dark-hight)', overflow: 'hidden', border: 0, padding: 0 }, (loading && {
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+var DialogRoot = (0, styled_1.default)(Box_1.Box, {
+    shouldForwardProp: function (prop) { return prop !== 'loading'; },
+})(function (props) { return (__assign(__assign(__assign(__assign(__assign({ width: '100%', display: 'flex', maxHeight: 'calc(100% - 60px)', flexDirection: 'column', margin: 'var(--pv-size-base-6)', position: 'relative', outline: 'none', overflow: 'hidden', border: 0, padding: 0, boxShadow: 'var(--pv-shadow-dark-hight)' }, (props.loading && {
     '[data-key="dialog.content"]': {
         opacity: 0.5,
     },
     '[data-key="dialog.actions"]': {
         opacity: 0.5,
     },
-}))); };
-var stylesSizeSmall = function () { return (0, styles_1.css)({
-    label: 'small',
+})), (props.size === 'small' && {
     maxWidth: '310px',
-}); };
-var stylesSizeMedium = function () { return (0, styles_1.css)({
-    label: 'medium',
+})), (props.size === 'medium' && {
     maxWidth: '640px',
-}); };
-var stylesSizeLarge = function () { return (0, styles_1.css)({
-    label: 'large',
+})), (props.size === 'large' && {
     maxWidth: '1024px',
-}); };
-var stylesFullScreen = function () { return (0, styles_1.css)({
-    label: 'fullScreen',
+})), (props.fullScreen && {
     height: '100%',
     margin: 0,
     maxWidth: '100%',
     maxHeight: 'none',
-}); };
-var stylesModal = function () { return (0, styles_1.css)({
-    label: 'Dialog-modal',
+}))); }, function (props) {
+    var isDark = props.theme.mode === 'dark';
+    var color = 'var(--pv-color-black)';
+    var backgroundColor = 'var(--pv-color-white)';
+    if (isDark) {
+        color = 'var(--pv-color-white)';
+        backgroundColor = 'var(--pv-color-gray-2)';
+    }
+    return {
+        color: color,
+        backgroundColor: backgroundColor,
+    };
+});
+var DialogModal = (0, styled_1.default)(Modal_1.Modal)({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-}); };
-var stylesLoading = function () { return (0, styles_1.css)({
-    label: 'Dialog-loading',
+});
+var DialogLoading = (0, styled_1.default)(Box_1.Box)({
     position: 'absolute',
     inset: '0px',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-}); };
+});
+/**
+ *
+ */
 exports.Dialog = react_1.default.forwardRef(function (props, ref) {
-    var _a;
-    var open = props.open, children = props.children, className = props.className, fullScreen = props.fullScreen, transitionDuration = props.transitionDuration, disableBackdropClick = props.disableBackdropClick, disableEscapeKeyDown = props.disableEscapeKeyDown, size = props.size, loading = props.loading, loadingColor = props.loadingColor, onClose = props.onClose, dataTestId = props["data-testid"], other = __rest(props, ["open", "children", "className", "fullScreen", "transitionDuration", "disableBackdropClick", "disableEscapeKeyDown", "size", "loading", "loadingColor", "onClose", 'data-testid']);
-    return (react_1.default.createElement(Modal_1.Modal, { ref: ref, open: open, transitionDuration: transitionDuration, onClose: onClose, "data-testid": dataTestId, className: (0, styles_1.cx)(stylesModal()), disableBackdropClick: loading || disableBackdropClick, disableEscapeKeyDown: loading || disableEscapeKeyDown, backdropProps: {
+    var open = props.open, children = props.children, fullScreen = props.fullScreen, transitionDuration = props.transitionDuration, disableBackdropClick = props.disableBackdropClick, disableEscapeKeyDown = props.disableEscapeKeyDown, loading = props.loading, loadingColor = props.loadingColor, onClose = props.onClose, dataTestId = props["data-testid"], other = __rest(props, ["open", "children", "fullScreen", "transitionDuration", "disableBackdropClick", "disableEscapeKeyDown", "loading", "loadingColor", "onClose", 'data-testid']);
+    return (react_1.default.createElement(DialogModal, { ref: ref, open: open, transitionDuration: transitionDuration, onClose: onClose, "data-testid": dataTestId, disableBackdropClick: loading || disableBackdropClick, disableEscapeKeyDown: loading || disableEscapeKeyDown, backdropProps: {
             invisible: fullScreen,
         } },
         react_1.default.createElement(Fade_1.Fade, { in: open, timeout: transitionDuration },
-            react_1.default.createElement(Box_1.Box, __assign({}, other, { role: "dialog", background: "white", borderRadius: fullScreen ? 0 : 4, className: (0, styles_1.cx)((_a = {},
-                    _a[stylesBase(loading)] = true,
-                    _a[stylesSizeSmall()] = size === 'small',
-                    _a[stylesSizeMedium()] = size === 'medium',
-                    _a[stylesSizeLarge()] = size === 'large',
-                    _a[stylesFullScreen()] = fullScreen,
-                    _a[className] = !!className,
-                    _a)), tabIndex: -1, component: "fieldset", disabled: loading }),
+            react_1.default.createElement(DialogRoot, __assign({ role: "dialog", borderRadius: fullScreen ? 0 : 4, loading: loading, fullScreen: fullScreen, tabIndex: -1, 
+                // @ts-ignore
+                component: "fieldset", disabled: loading }, other),
                 children,
-                loading && (react_1.default.createElement(Box_1.Box, { className: (0, styles_1.cx)(stylesLoading()) },
+                loading && (react_1.default.createElement(DialogLoading, null,
                     react_1.default.createElement(CircularProgress_1.CircularProgress, { color: loadingColor })))))));
 });
 exports.Dialog.displayName = 'Dialog';