@commercetools-uikit/icon-button 12.2.0 → 12.2.5

package/dist/commercetools-uikit-icon-button.cjs.prod.js

@@ -12,12 +12,12 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 require('prop-types');
-var React = require('react');
+var react$1 = require('react');
 var react = require('@emotion/react');
-require('lodash/isNil');
 var designSystem = require('@commercetools-uikit/design-system');
 var utils = require('@commercetools-uikit/utils');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -29,7 +29,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var React__default = /*#__PURE__*/_interopDefault(React);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
 
 var buttonSizes = {
@@ -59,14 +58,14 @@ var getIconThemeColor = function getIconThemeColor(props) {
 
 var getStateStyles = function getStateStyles(isDisabled, isActive, theme) {
   if (isDisabled) {
-    var disabledStyle = /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorAccent98, ";border-color:", designSystem.customProperties.colorNeutral, ";color:", designSystem.customProperties.colorNeutral60, ";box-shadow:none;" + ("" ));
+    var disabledStyle = /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorAccent98, ";border-color:", designSystem.customProperties.colorNeutral, ";color:", designSystem.customProperties.colorNeutral60, ";box-shadow:none;" + ("" ), "" );
 
     switch (theme) {
       case 'info':
-        return [disabledStyle, /*#__PURE__*/react.css("&:hover{border-color:", designSystem.customProperties.colorInfo85, ";background-color:", designSystem.customProperties.colorInfo85, ";}" + ("" ))];
+        return [disabledStyle, /*#__PURE__*/react.css("&:hover{border-color:", designSystem.customProperties.colorInfo85, ";background-color:", designSystem.customProperties.colorInfo85, ";}" + ("" ), "" )];
 
       case 'primary':
-        return [disabledStyle, /*#__PURE__*/react.css("&:hover{border-color:", designSystem.customProperties.colorPrimary85, ";background-color:", designSystem.customProperties.colorPrimary85, ";}" + ("" ))];
+        return [disabledStyle, /*#__PURE__*/react.css("&:hover{border-color:", designSystem.customProperties.colorPrimary85, ";background-color:", designSystem.customProperties.colorPrimary85, ";}" + ("" ), "" )];
 
       default:
         return disabledStyle;
@@ -74,7 +73,7 @@ var getStateStyles = function getStateStyles(isDisabled, isActive, theme) {
   }
 
   if (isActive) {
-    var activeStyle = /*#__PURE__*/react.css("box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorSurface, ";border-color:", designSystem.customProperties.colorSurface, ";&:hover{box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorNeutral95, ";border-color:", designSystem.customProperties.colorNeutral95, ";}" + ("" ));
+    var activeStyle = /*#__PURE__*/react.css("box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorSurface, ";border-color:", designSystem.customProperties.colorSurface, ";&:hover{box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorNeutral95, ";border-color:", designSystem.customProperties.colorNeutral95, ";}" + ("" ), "" );
 
     switch (theme) {
       case 'info':
@@ -82,19 +81,19 @@ var getStateStyles = function getStateStyles(isDisabled, isActive, theme) {
         /*#__PURE__*/
         // When the button is active and somehow is disabled it should have
         // a different color to indicate that it's active but can't receive any actions
-        react.css("background-color:", designSystem.customProperties.colorInfo85, ";border-color:", designSystem.customProperties.colorInfo85, ";color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow9, ";" + ("" )), /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorInfo, ";border-color:", designSystem.customProperties.colorInfo, ";color:", designSystem.customProperties.colorSurface, ";&:hover{background-color:", designSystem.customProperties.colorInfo85, ";border-color:", designSystem.customProperties.colorInfo85, ";}" + ("" ))];
+        react.css("background-color:", designSystem.customProperties.colorInfo85, ";border-color:", designSystem.customProperties.colorInfo85, ";color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow9, ";" + ("" ), "" ), /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorInfo, ";border-color:", designSystem.customProperties.colorInfo, ";color:", designSystem.customProperties.colorSurface, ";&:hover{background-color:", designSystem.customProperties.colorInfo85, ";border-color:", designSystem.customProperties.colorInfo85, ";}" + ("" ), "" )];
 
       case 'primary':
         return [activeStyle, // When the button is active and somehow is disabled it should have
         // a different color to indicate that it's active but can't receive any actions
-        isDisabled && /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorPrimary85, ";border-color:", designSystem.customProperties.colorPrimary85, ";color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow9, ";" + ("" )), /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorPrimary, ";color:", designSystem.customProperties.colorSurface, ";&:hover{background-color:", designSystem.customProperties.colorPrimary85, ";border-color:", designSystem.customProperties.colorPrimary85, ";}" + ("" ))];
+        isDisabled && /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorPrimary85, ";border-color:", designSystem.customProperties.colorPrimary85, ";color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow9, ";" + ("" ), "" ), /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorPrimary, ";color:", designSystem.customProperties.colorSurface, ";&:hover{background-color:", designSystem.customProperties.colorPrimary85, ";border-color:", designSystem.customProperties.colorPrimary85, ";}" + ("" ), "" )];
 
       default:
         return activeStyle;
     }
   }
 
-  return /*#__PURE__*/react.css("&:hover{box-shadow:", designSystem.customProperties.shadow8, ";}&:active{box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorSurface, ";border-color:", designSystem.customProperties.colorSurface, ";}" + ("" ));
+  return /*#__PURE__*/react.css("&:hover{box-shadow:", designSystem.customProperties.shadow8, ";}&:active{box-shadow:", designSystem.customProperties.shadow9, ";background-color:", designSystem.customProperties.colorSurface, ";border-color:", designSystem.customProperties.colorSurface, ";}" + ("" ), "" );
 };
 
 var _ref = {
@@ -110,65 +109,65 @@ var getShapeStyles = function getShapeStyles(shape, size) {
     case 'square':
       switch (size) {
         case 'small':
-          return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius2, ";" + ("" ));
+          return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius2, ";" + ("" ), "" );
 
         case 'medium':
-          return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius4, ";" + ("" ));
+          return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius4, ";" + ("" ), "" );
 
         case 'big':
-          return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius6, ";" + ("" ));
+          return /*#__PURE__*/react.css("border-radius:", designSystem.customProperties.borderRadius6, ";" + ("" ), "" );
 
         default:
-          return /*#__PURE__*/react.css("" );
+          return /*#__PURE__*/react.css("" , "" );
       }
 
     default:
-      return /*#__PURE__*/react.css("" );
+      return /*#__PURE__*/react.css("" , "" );
   }
 };
 
 var getSizeStyles = function getSizeStyles(size) {
   switch (size) {
     case 'small':
-      return /*#__PURE__*/react.css("height:", buttonSizes.small, ";width:", buttonSizes.small, ";" + ("" ));
+      return /*#__PURE__*/react.css("height:", buttonSizes.small, ";width:", buttonSizes.small, ";" + ("" ), "" );
 
     case 'medium':
-      return /*#__PURE__*/react.css("height:", buttonSizes.medium, ";width:", buttonSizes.medium, ";" + ("" ));
+      return /*#__PURE__*/react.css("height:", buttonSizes.medium, ";width:", buttonSizes.medium, ";" + ("" ), "" );
 
     case 'big':
-      return /*#__PURE__*/react.css("height:", buttonSizes.big, ";width:", buttonSizes.big, ";" + ("" ));
+      return /*#__PURE__*/react.css("height:", buttonSizes.big, ";width:", buttonSizes.big, ";" + ("" ), "" );
 
     default:
-      return /*#__PURE__*/react.css("" );
+      return /*#__PURE__*/react.css("" , "" );
   }
 };
 
 var getThemeStyles = function getThemeStyles(theme) {
-  if (!theme) return /*#__PURE__*/react.css("" );
-  if (theme === 'default') return /*#__PURE__*/react.css("" );
+  if (!theme) return /*#__PURE__*/react.css("" , "" );
+  if (theme === 'default') return /*#__PURE__*/react.css("" , "" );
 
   switch (theme) {
     case 'primary':
-      return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.customProperties.colorPrimary, ";border-color:", designSystem.customProperties.colorPrimary, ";color:", designSystem.customProperties.colorSurface, ";}" + ("" ));
+      return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.customProperties.colorPrimary, ";border-color:", designSystem.customProperties.colorPrimary, ";color:", designSystem.customProperties.colorSurface, ";}" + ("" ), "" );
 
     case 'info':
-      return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.customProperties.colorInfo, ";border-color:", designSystem.customProperties.colorInfo, ";color:", designSystem.customProperties.colorSurface, ";}" + ("" ));
+      return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.customProperties.colorInfo, ";border-color:", designSystem.customProperties.colorInfo, ";color:", designSystem.customProperties.colorSurface, ";}" + ("" ), "" );
 
     default:
       {
-        return /*#__PURE__*/react.css("" );
+        return /*#__PURE__*/react.css("" , "" );
       }
   }
 };
 
 var getHoverStyles = function getHoverStyles(isDisabled, theme) {
-  if (theme === 'default' || isDisabled) return /*#__PURE__*/react.css("" );
-  return /*#__PURE__*/react.css("&:hover{*{fill:", designSystem.customProperties.colorSurface, ";}}" + ("" ));
+  if (theme === 'default' || isDisabled) return /*#__PURE__*/react.css("" , "" );
+  return /*#__PURE__*/react.css("&:hover{*{fill:", designSystem.customProperties.colorSurface, ";}}" + ("" ), "" );
 };
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
 var defaultProps = {
   type: 'button',
   theme: 'default',
@@ -178,35 +177,36 @@ var defaultProps = {
 };
 
 var IconButton = function IconButton(props) {
-  if (props.isToggleButton) ; // the type defaults to `button`, so we don't need to handle undefined
 
-  var attributes = _objectSpread({
+  var buttonAttributes = _objectSpread({
     'data-track-component': 'IconButton'
   }, utils.filterInvalidAttributes(props));
 
   var isActive = Boolean(props.isToggleButton && props.isToggled);
-  return react.jsx(AccessibleButton__default['default'], {
+  return jsxRuntime.jsx(AccessibleButton__default["default"], {
     as: props.as,
-    buttonAttributes: attributes,
+    buttonAttributes: buttonAttributes,
     type: props.type,
     label: props.label,
     onClick: props.onClick,
     isToggleButton: props.isToggleButton,
     isToggled: props.isToggled,
     isDisabled: props.isDisabled,
-    css: [/*#__PURE__*/react.css("width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid ", designSystem.customProperties.colorSurface, ";background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow7, ";color:", designSystem.customProperties.colorSolid, ";transition:background-color ", designSystem.customProperties.transitionLinear80Ms, ",box-shadow 150ms ease-in-out;" + ("" )), getStateStyles(props.isDisabled, isActive, props.theme), getShapeStyles(props.shape, props.size), getSizeStyles(props.size), getThemeStyles(props.theme), getHoverStyles(props.isDisabled, props.theme), "" ]
-  }, props.icon && /*#__PURE__*/React__default['default'].cloneElement(props.icon, {
-    size: props.size,
-    color: getIconThemeColor(props)
-  }));
+    css: [/*#__PURE__*/react.css("width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid ", designSystem.customProperties.colorSurface, ";background-color:", designSystem.customProperties.colorSurface, ";box-shadow:", designSystem.customProperties.shadow7, ";color:", designSystem.customProperties.colorSolid, ";transition:background-color ", designSystem.customProperties.transitionLinear80Ms, ",box-shadow 150ms ease-in-out;" + ("" ), "" ), getStateStyles(props.isDisabled, isActive, props.theme), getShapeStyles(props.shape, props.size), getSizeStyles(props.size), getThemeStyles(props.theme), getHoverStyles(props.isDisabled, props.theme), "" , "" ],
+    children: props.icon && /*#__PURE__*/react$1.cloneElement(props.icon, {
+      size: props.size,
+      color: getIconThemeColor(props)
+    })
+  });
 };
 
 IconButton.propTypes = {};
 IconButton.defaultProps = defaultProps;
 IconButton.displayName = 'IconButton';
+var IconButton$1 = IconButton;
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.0';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.5";
 
-exports.default = IconButton;
+exports["default"] = IconButton$1;
 exports.version = version;