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

package/dist/cjs/Checkbox/checkbox.js

@@ -44,28 +44,27 @@ 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.Checkbox = void 0;
 var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
 var icons_1 = require("../icons");
 var hooks_1 = require("../hooks");
+var styles_1 = require("../styles");
 /**
  *
  */
 /**
  * Styles.
  */
-var CheckboxRoot = (0, styled_1.default)('label')({
+var stylesBase = function () { return (0, styles_1.css)({
+    label: 'Checkbox',
     display: 'inline-flex',
     width: 'var(--pv-size-base-4)',
     height: 'var(--pv-size-base-4)',
     position: 'relative',
-});
-var CheckboxInput = (0, styled_1.default)('input')({
+}); };
+var stylesInput = function () { return (0, styles_1.css)({
+    label: 'Checkbox-input',
     width: '100%',
     height: '100%',
     margin: 0,
@@ -125,8 +124,9 @@ var CheckboxInput = (0, styled_1.default)('input')({
             backgroundColor: 'var(--pv-color-gray-6)',
         },
     },
-});
-var CheckboxIcon = (0, styled_1.default)('svg')({
+}); };
+var stylesIcon = function () { return (0, styles_1.css)({
+    label: 'Checkbox-icon',
     display: 'block',
     position: 'absolute',
     top: 0,
@@ -136,16 +136,30 @@ var CheckboxIcon = (0, styled_1.default)('svg')({
     opacity: 0,
     color: 'var(--pv-color-white)',
     pointerEvents: 'none',
-});
+}); };
 /**
  *
  */
 exports.Checkbox = React.forwardRef(function (props, ref) {
-    var checked = props.checked, defaultChecked = props.defaultChecked, required = props.required, inputProps = props.inputProps, disabled = props.disabled, idProp = props.id, _a = props.checkedIcon, checkedIcon = _a === void 0 ? icons_1.CheckIcon : _a, onChange = props.onChange, other = __rest(props, ["checked", "defaultChecked", "required", "inputProps", "disabled", "id", "checkedIcon", "onChange"]);
+    var _a;
+    var checked = props.checked, defaultChecked = props.defaultChecked, required = props.required, inputProps = props.inputProps, className = props.className, disabled = props.disabled, idProp = props.id, checkedIcon = props.checkedIcon, onChange = props.onChange, other = __rest(props, ["checked", "defaultChecked", "required", "inputProps", "className", "disabled", "id", "checkedIcon", "onChange"]);
     var id = (0, hooks_1.useId)(idProp);
-    return (React.createElement(CheckboxRoot, __assign({ ref: ref, htmlFor: id }, other),
-        React.createElement(CheckboxInput, __assign({}, inputProps, { type: "checkbox", id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, onChange: onChange })),
-        React.createElement(CheckboxIcon, { as: checkedIcon, "aria-hidden": true })));
+    var renderIcon = function () {
+        var baseIconProps = {
+            'aria-hidden': true,
+            className: (0, styles_1.cx)(stylesIcon()),
+        };
+        if (checkedIcon) {
+            return React.cloneElement(checkedIcon, baseIconProps);
+        }
+        return (React.createElement(icons_1.CheckIcon, __assign({}, baseIconProps)));
+    };
+    return (React.createElement("label", __assign({}, other, { ref: ref, htmlFor: id, className: (0, styles_1.cx)((_a = {},
+            _a[stylesBase()] = true,
+            _a[className] = !!className,
+            _a)) }),
+        React.createElement("input", __assign({}, inputProps, { type: "checkbox", id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, className: stylesInput(), onChange: onChange })),
+        renderIcon()));
 });
 exports.Checkbox.displayName = 'Checkbox';
 exports.Checkbox.defaultProps = {};

package/dist/cjs/Checkbox/checkbox.js.map

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

package/dist/cjs/Chip/chip.js

@@ -44,14 +44,10 @@ 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 styled_1 = __importDefault(require("@emotion/styled"));
-var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+var styles_1 = require("../styles");
 var Typography_1 = require("../Typography");
 var icons_1 = require("../icons");
 /**
@@ -60,74 +56,96 @@ var icons_1 = require("../icons");
 /**
  * Styles.
  */
-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 && {
+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',
     pointerEvents: 'none',
-})), (Boolean(props.onClick) && !props.disabled && {
+}); };
+var stylesClickable = function () { return (0, styles_1.css)({
+    label: 'clickable',
     cursor: 'pointer',
     userSelect: 'none',
     WebkitTapHighlightColor: 'transparent',
-}))); }, function (props) {
-    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)");
-            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')({
+}); };
+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',
     width: '24px',
     height: '24px',
     cursor: 'pointer',
@@ -139,20 +157,20 @@ var ChipDeleteIcon = (0, styled_1.default)('span')({
     '&:hover': {
         opacity: '1',
     },
-});
-var ChipStartContent = (0, styled_1.default)('span')({
+}); };
+var stylesStartContent = function () { return (0, styles_1.css)({
+    label: 'Chip-startIcon',
     marginRight: 'var(--pv-size-base)',
     display: 'inherit',
-});
+}); };
 /**
  *
  */
 exports.Chip = React.forwardRef(function (props, ref) {
-    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 _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 clickable = Boolean(onClick);
     var baseProps = {
-        disabled: disabled,
         role: clickable ? 'button' : undefined,
         'aria-disabled': disabled ? true : undefined,
         tabIndex: clickable && !disabled ? 0 : undefined,
@@ -169,10 +187,25 @@ exports.Chip = React.forwardRef(function (props, ref) {
         if (!onDelete) {
             return null;
         }
-        return (React.createElement(ChipDeleteIcon, { "aria-hidden": true, as: deleteIcon, onClick: handleDeleteClick }));
+        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)));
     };
-    var startContent = startContentProp && (React.createElement(ChipStartContent, null, startContentProp));
-    return (React.createElement(ChipRoot, __assign({ as: Component, ref: ref }, baseProps, other),
+    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))) }),
         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,52 +31,56 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CircularProgress = void 0;
 var react_1 = __importDefault(require("react"));
-var react_2 = require("@emotion/react");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
-/**
- *
- */
+var styles_1 = require("../styles");
 /**
  * Styles.
  */
-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' ? {
+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' ? {
     animation: "".concat(circularRotateKeyframe, " 1.4s linear infinite"),
 } : {
     transform: 'rotate(-90deg)',
-})), (props.size === 'small' && {
+}))); };
+var stylesBaseSmall = function () { return (0, styles_1.css)({
+    label: 'small',
     height: 'var(--pv-size-base-3)',
     width: 'var(--pv-size-base-3)',
-})), (props.size === 'large' && {
+}); };
+var stylesBaseLarge = function () { return (0, styles_1.css)({
+    label: 'large',
     height: 'var(--pv-size-base-6)',
     width: 'var(--pv-size-base-6)',
-}))); });
-var CircularProgressSvg = (0, styled_1.default)('svg')({
+}); };
+var stylesProgressSvg = function () { return (0, styles_1.css)({
+    label: 'CircularProgress-svg',
     display: 'block',
-});
-var CircularProgressCircle = (0, styled_1.default)('circle')(function (props) { return (__assign({ stroke: 'currentcolor', strokeDasharray: '80px, 200px', strokeDashoffset: 0 }, (props.variant === 'indeterminate' && {
+}); };
+var stylesProgressCircle = function (variant) { return (0, styles_1.css)(__assign({ label: 'CircularProgress-circle', stroke: 'currentcolor', strokeDasharray: '80px, 200px', strokeDashoffset: 0 }, (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 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 _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 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(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 }))));
+    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 }))));
 });
 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,40 +44,28 @@ 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");
-/**
- *
- */
-/**
- * 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' ? {
+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 ? {
     height: 'auto',
     width: 0,
 } : {
     height: 0,
-})), (props.state === 'entered' && __assign({ overflow: 'visible' }, (props.orientation === 'horizontal' ? {
+}))); };
+var stylesEntered = function (isHorizontal) { return (0, styles_1.css)(__assign({ label: 'entered', overflow: 'visible' }, (isHorizontal ? {
     width: 'auto',
 } : {
     height: 'auto',
-})))), (props.state === 'exited' && !props.in && {
+}))); };
+var stylesHidden = function () { return (0, styles_1.css)({
+    label: 'hidden',
     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, other = __rest(props, ["timeout", "in", "children", "orientation", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting"]);
+    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 wrapperRef = React.useRef(null);
     var nodeRef = React.useRef(null);
     var isHorizontal = orientation === 'horizontal';
@@ -134,8 +122,16 @@ 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) { return (React.createElement(CollapseRoot, __assign({ timeout: timeout, orientation: orientation, state: state, in: inProp, ref: nodeRef }, other),
-        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) {
+        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)));
+    }));
 };
 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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"}