@hig/icon-button - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

build/index.es.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { css, cx } from 'emotion';
+import { ControlBehavior } from '@hig/behaviors';
+import { cx, css } from 'emotion';
 import ThemeContext from '@hig/theme-context';
 import { createCustomClassNames } from '@hig/utils';
-import { ControlBehavior } from '@hig/behaviors';
 
-var surfaces = Object.freeze({
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+const surfaces = Object.freeze({
   SURFACELEVEL100: 100,
@@ -15,18 +110,13 @@ SURFACELEVEL200: 200,
 });
-
-var AVAILABLE_SURFACES = Object.freeze(Object.values(surfaces));
-
-var variants = Object.freeze({
+const AVAILABLE_SURFACES = Object.freeze(Object.values(surfaces));
+const variants = Object.freeze({
   DYNAMIC: "dynamic",
   STATIC: "static"
 });
+const AVAILABLE_VARIANTS = Object.freeze(Object.values(variants));
 
-var AVAILABLE_VARIANTS = Object.freeze(Object.values(variants));
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 function getDefaultIconTransitionProperties() {
   return {
-    transitionDuration: "0.3s",
-    transitionProperty: "fill"
+    transitionDuration: `0.3s`,
+    transitionProperty: `fill`
   };
@@ -36,17 +126,16 @@ }
 function getStylesByHover(themeData, surface, on, variant) {
-  var surfaceLevel = Number(surface);
-  var isDynamic = variant === "dynamic";
-  var dynamicHoverIconColor = on ? themeData["iconButton.dynamic.on.hover.iconColor"] : themeData["iconButton.dynamic.hover.iconColor"];
-  var hoverIconColor = isDynamic ? dynamicHoverIconColor : "";
-  var staticSurfaceLevelBackgroundColor = surfaceLevel <= 250 ? themeData["iconButton.static.hover.100To250BackgroundColor"] : themeData["iconButton.static.hover.300To350BackgroundColor"];
-  var staticHoverBackgroundColor = on ? themeData["iconButton.static.on.hover.100To250BackgroundColor"] : staticSurfaceLevelBackgroundColor;
-  var backgroundColor = !isDynamic ? staticHoverBackgroundColor : "transparent";
-  var staticBorderColor = on ? themeData["iconButton.static.on.hover.borderColor"] : "transparent";
-  var borderColor = !isDynamic ? staticBorderColor : "transparent";
-
+  const surfaceLevel = Number(surface);
+  const isDynamic = variant === `dynamic`;
+  const dynamicHoverIconColor = on ? themeData["iconButton.dynamic.on.hover.iconColor"] : themeData["iconButton.dynamic.hover.iconColor"];
+  const hoverIconColor = isDynamic ? dynamicHoverIconColor : "";
+  const staticSurfaceLevelBackgroundColor = surfaceLevel <= 250 ? themeData["iconButton.static.hover.100To250BackgroundColor"] : themeData["iconButton.static.hover.300To350BackgroundColor"];
+  const staticHoverBackgroundColor = on ? themeData["iconButton.static.on.hover.100To250BackgroundColor"] : staticSurfaceLevelBackgroundColor;
+  const backgroundColor = !isDynamic ? staticHoverBackgroundColor : `transparent`;
+  const staticBorderColor = on ? themeData["iconButton.static.on.hover.borderColor"] : `transparent`;
+  const borderColor = !isDynamic ? staticBorderColor : `transparent`;
   return {
-    backgroundColor: backgroundColor,
-    borderColor: borderColor,
-    boxShadow: "none",
-    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+    backgroundColor,
+    borderColor,
+    boxShadow: `none`,
+    "& svg *": _objectSpread2(_objectSpread2({}, getDefaultIconTransitionProperties()), {}, {
       fill: hoverIconColor
@@ -58,13 +147,12 @@ })
 function getStylesByFocus(themeData, on, variant) {
-  var isDynamic = variant === "dynamic";
-  var dynamicFocusIconColor = on ? themeData["iconButton.dynamic.on.focus.iconColor"] : themeData["iconButton.dynamic.focus.iconColor"];
-  var focusIconColor = isDynamic ? dynamicFocusIconColor : "";
-  var staticBorderColor = on ? themeData["iconButton.static.on.focus.borderColor"] : "transparent";
-  var borderColor = !isDynamic ? staticBorderColor : "transparent";
-
+  const isDynamic = variant === `dynamic`;
+  const dynamicFocusIconColor = on ? themeData["iconButton.dynamic.on.focus.iconColor"] : themeData["iconButton.dynamic.focus.iconColor"];
+  const focusIconColor = isDynamic ? dynamicFocusIconColor : "";
+  const staticBorderColor = on ? themeData["iconButton.static.on.focus.borderColor"] : `transparent`;
+  const borderColor = !isDynamic ? staticBorderColor : `transparent`;
   return {
-    borderColor: borderColor,
-    boxShadow: "0 0 0 " + themeData["iconButton.focus.haloWidth"] + " " + themeData["iconButton.focus.haloColor"],
-    transitionDuration: "0.3s, 0.3s",
-    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+    borderColor,
+    boxShadow: `0 0 0 ${themeData["iconButton.focus.haloWidth"]} ${themeData["iconButton.focus.haloColor"]}`,
+    transitionDuration: `0.3s, 0.3s`,
+    "& svg *": _objectSpread2(_objectSpread2({}, getDefaultIconTransitionProperties()), {}, {
       fill: focusIconColor
@@ -76,13 +164,12 @@ })
 function getStylesByPressed(themeData, surface, on, variant) {
-  var surfaceLevel = Number(surface);
-  var dynamicPressedIconColor = on ? themeData["iconButton.dynamic.on.pressed.iconColor"] : themeData["iconButton.dynamic.pressed.iconColor"];
-  var pressedIconColor = variant === "dynamic" ? dynamicPressedIconColor : "";
-
-  var dynamicPressedBackgroundColor = surfaceLevel <= 250 ? themeData["iconButton.dynamic.pressed.100To250BackgroundColor"] : themeData["iconButton.dynamic.pressed.300To350BackgroundColor"];
-  var staticPressedBackgroundColor = themeData["iconButton.static.on.pressed.backgroundColor"];
+  const surfaceLevel = Number(surface);
+  const dynamicPressedIconColor = on ? themeData["iconButton.dynamic.on.pressed.iconColor"] : themeData["iconButton.dynamic.pressed.iconColor"];
+  const pressedIconColor = variant === "dynamic" ? dynamicPressedIconColor : "";
+  const dynamicPressedBackgroundColor = surfaceLevel <= 250 ? themeData["iconButton.dynamic.pressed.100To250BackgroundColor"] : themeData["iconButton.dynamic.pressed.300To350BackgroundColor"];
+  const staticPressedBackgroundColor = themeData["iconButton.static.on.pressed.backgroundColor"];
   return {
-    backgroundColor: variant === "dynamic" ? dynamicPressedBackgroundColor : staticPressedBackgroundColor,
-    borderColor: variant === "dynamic" ? "transparent" : themeData["iconButton.static.on.pressed.borderColor"],
-    transitionDuration: "0.3s, 0.3s",
-    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+    backgroundColor: variant === `dynamic` ? dynamicPressedBackgroundColor : staticPressedBackgroundColor,
+    borderColor: variant === `dynamic` ? `transparent` : themeData["iconButton.static.on.pressed.borderColor"],
+    transitionDuration: `0.3s, 0.3s`,
+    "& svg *": _objectSpread2(_objectSpread2({}, getDefaultIconTransitionProperties()), {}, {
       fill: pressedIconColor
@@ -96,3 +183,3 @@ })
     opacity: themeData["colorScheme.opacity.disabled"],
-    pointerEvents: "none"
+    pointerEvents: `none`
   };
@@ -102,125 +189,119 @@ }
 function stylesheet(props, themeData, density) {
-  var disabled = props.disabled,
-      hasFocus = props.hasFocus,
-      hasHover = props.hasHover,
-      isPressed = props.isPressed,
-      on = props.on,
-      customStylesheet = props.stylesheet,
-      surface = props.surface,
-      variant = props.variant;
-
-  var contentHeight = density === "medium-density" ? "20px" : "16px";
-  var isDynamic = variant === "dynamic";
-  var dynamicIconColor = on ? themeData["iconButton.dynamic.on.default.iconColor"] : themeData["iconButton.dynamic.default.iconColor"];
-  var iconColor = isDynamic ? dynamicIconColor : "";
-
-  var styles = {
-    iconButton: _extends({
-      backgroundColor: !isDynamic && on ? themeData["iconButton.static.on.default.backgroundColor"] : "transparent",
-      borderColor: !isDynamic && on ? themeData["iconButton.static.on.default.borderColor"] : "transparent",
-      borderStyle: "solid",
-      borderWidth: "1px",
-      display: "inline-block",
-      position: "relative",
-      cursor: "pointer",
-      boxSizing: "border-box",
+  const {
+    disabled,
+    hasFocus,
+    hasHover,
+    isPressed,
+    on,
+    stylesheet: customStylesheet,
+    surface,
+    variant
+  } = props;
+  const contentHeight = density === `medium-density` ? `20px` : `16px`;
+  const isDynamic = variant === `dynamic`;
+  const dynamicIconColor = on ? themeData["iconButton.dynamic.on.default.iconColor"] : themeData["iconButton.dynamic.default.iconColor"];
+  const iconColor = isDynamic ? dynamicIconColor : ``;
+  const iconStyles = {
+    position: `absolute`,
+    left: 0,
+    right: 0,
+    margin: `0 auto`,
+    top: `50%`,
+    transform: `translateY(-50%)`,
+    pointerEvents: `none`
+  };
+  const styles = {
+    iconButton: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+      backgroundColor: !isDynamic && on ? themeData["iconButton.static.on.default.backgroundColor"] : `transparent`,
+      borderColor: !isDynamic && on ? themeData["iconButton.static.on.default.borderColor"] : `transparent`,
+      borderStyle: `solid`,
+      borderWidth: `1px`,
+      display: `inline-block`,
+      position: `relative`,
+      cursor: `pointer`,
+      boxSizing: `border-box`,
       borderRadius: themeData["iconButton.borderRadius"],
-      padding: "0",
-      height: "calc(" + contentHeight + " + (" + themeData["density.spacings.extraSmall"] + " * 2))",
-      lineHeight: "calc(" + contentHeight + " + (" + themeData["density.spacings.extraSmall"] + " * 2))",
-      width: "calc(" + contentHeight + " + (" + themeData["density.spacings.extraSmall"] + " * 2))",
+      padding: `0`,
+      height: `calc(${contentHeight} + (${themeData["density.spacings.extraSmall"]} * 2))`,
+      lineHeight: `calc(${contentHeight} + (${themeData["density.spacings.extraSmall"]} * 2))`,
+      width: `calc(${contentHeight} + (${themeData["density.spacings.extraSmall"]} * 2))`,
       outline: 0,
-      transitionProperty: "box-shadow, background-color",
-      transitionDuration: "0.3s, 0.3s",
-      transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1)",
+      transitionProperty: `box-shadow, background-color`,
+      transitionDuration: `0.3s, 0.3s`,
+      transitionTimingFunction: `cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1)`,
       "& svg *": {
         fill: iconColor,
-        transitionDuration: "0.3s",
-        transitionProperty: "fill"
+        transitionDuration: `0.3s`,
+        transitionProperty: `fill`
       }
-    }, hasFocus ? getStylesByFocus(themeData, on, variant) : {}, hasHover ? getStylesByHover(themeData, surface, on, variant) : {}, isPressed ? getStylesByPressed(themeData, surface, on, variant) : {}, disabled ? getStylesByDisabled(themeData) : {}),
+    }, !isDynamic ? {
+      "& > svg": iconStyles
+    } : {}), hasFocus ? getStylesByFocus(themeData, on, variant) : {}), hasHover ? getStylesByHover(themeData, surface, on, variant) : {}), isPressed ? getStylesByPressed(themeData, surface, on, variant) : {}), disabled ? getStylesByDisabled(themeData) : {}),
     iconSpacer: {
-      width: "24px"
+      width: `24px`
     },
-    iconButtonIcon: {
-      position: "absolute",
-      left: 0,
-      right: 0,
-      margin: "0 auto",
-      top: "50%",
-      transform: "translateY(-50%)",
-      pointerEvents: "none"
-    }
+    iconButtonIcon: iconStyles
   };
-
   return customStylesheet ? customStylesheet(styles, props, themeData, density) : styles;
 }
 
-var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+const _excluded$1 = ["className", "disabled", "hasFocus", "hasHover", "icon", "isPressed", "link", "on", "onClick", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "stylesheet", "surface", "title", "variant"];
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+const IconButtonPresenter = props => {
+  const {
+    className,
+    disabled,
+    hasFocus,
+    hasHover,
+    icon: higIcon,
+    isPressed,
+    link,
+    on,
+    onClick,
+    onBlur,
+    onFocus,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    stylesheet: customStylesheet,
+    surface,
+    title,
+    variant
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$1);
 
-var IconButtonPresenter = function IconButtonPresenter(props) {
-  var className = props.className,
-      disabled = props.disabled,
-      hasFocus = props.hasFocus,
-      hasHover = props.hasHover,
-      higIcon = props.icon,
-      isPressed = props.isPressed,
-      link = props.link,
-      on = props.on,
-      onClick = props.onClick,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      onMouseDown = props.onMouseDown,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave,
-      onMouseUp = props.onMouseUp,
-      customStylesheet = props.stylesheet,
-      surface = props.surface,
-      title = props.title,
-      variant = props.variant,
-      otherProps = _objectWithoutProperties(props, ["className", "disabled", "hasFocus", "hasHover", "icon", "isPressed", "link", "on", "onClick", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "stylesheet", "surface", "title", "variant"]);
-
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref) {
-      var resolvedRoles = _ref.resolvedRoles,
-          metadata = _ref.metadata;
-
-      var linkProps = link ? {
-        tabIndex: disabled ? "-1" : "0",
-        href: link
-      } : {};
-      var iconButtonIconClassName = createCustomClassNames(className, "icon-button-icon");
-      var Element = props.link ? "a" : "button";
-      var styles = stylesheet(props, resolvedRoles, metadata.densityId);
-      var icon = React.cloneElement(higIcon, {
-        className: cx(css(styles.iconButtonIcon), iconButtonIconClassName)
-      });
-      var tabIndex = disabled ? "-1" : "0";
-      return React.createElement(
-        Element,
-        _extends$1({}, otherProps, {
-          className: cx(css(styles.iconButton), className),
-          disabled: disabled,
-          onClick: onClick,
-          onBlur: onBlur,
-          onFocus: onFocus,
-          onMouseDown: onMouseDown,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
-          onMouseUp: onMouseUp,
-          tabIndex: tabIndex,
-          title: title
-        }, linkProps),
-        icon
-      );
-    }
-  );
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref => {
+    let {
+      resolvedRoles,
+      metadata
+    } = _ref;
+    const linkProps = link ? {
+      tabIndex: disabled ? "-1" : "0",
+      href: link
+    } : {};
+    const iconButtonIconClassName = createCustomClassNames(className, "icon-button-icon");
+    const Element = props.link ? "a" : "button";
+    const styles = stylesheet(props, resolvedRoles, metadata.densityId);
+    const icon = /*#__PURE__*/React.cloneElement(higIcon, {
+      className: cx(css(styles.iconButtonIcon), iconButtonIconClassName)
+    });
+    const tabIndex = disabled ? "-1" : "0";
+    return /*#__PURE__*/React.createElement(Element, _extends({}, otherProps, {
+      className: cx(css(styles.iconButton), className),
+      disabled: disabled,
+      onClick: onClick,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseDown: onMouseDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onMouseUp: onMouseUp,
+      tabIndex: tabIndex,
+      title: title
+    }, linkProps), icon);
+  });
 };
 
 IconButtonPresenter.displayName = "IconButtonPresenter";
-
 IconButtonPresenter.propTypes = {
@@ -391,56 +472,53 @@ className: PropTypes.string,
 
-var _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+const _excluded = ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "stylesheet"];
 
-function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+const IconButton = props => {
+  const {
+    disabled,
+    onBlur,
+    onFocus,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    stylesheet
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded);
 
-var IconButton = function IconButton(props) {
-  var disabled = props.disabled,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      onMouseDown = props.onMouseDown,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave,
-      onMouseUp = props.onMouseUp,
-      stylesheet = props.stylesheet,
-      otherProps = _objectWithoutProperties$1(props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "stylesheet"]);
-
-  return React.createElement(
-    ControlBehavior,
-    {
-      onBlur: onBlur,
-      onFocus: onFocus,
-      onMouseDown: onMouseDown,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onMouseUp: onMouseUp
-    },
-    function (_ref) {
-      var hasFocus = _ref.hasFocus,
-          hasHover = _ref.hasHover,
-          isPressed = _ref.isPressed,
-          handleBlur = _ref.onBlur,
-          handleFocus = _ref.onFocus,
-          handleMouseDown = _ref.onMouseDown,
-          handleMouseEnter = _ref.onMouseEnter,
-          handleMouseLeave = _ref.onMouseLeave,
-          handleMouseUp = _ref.onMouseUp;
-      return React.createElement(IconButtonPresenter, _extends$2({
-        disabled: disabled,
-        hasFocus: hasFocus && !disabled,
-        hasHover: hasHover && !disabled,
-        isPressed: isPressed && !disabled,
-        onBlur: handleBlur,
-        onFocus: handleFocus,
-        onMouseDown: handleMouseDown,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onMouseUp: handleMouseUp,
-        stylesheet: stylesheet
-      }, otherProps));
-    }
-  );
+  return /*#__PURE__*/React.createElement(ControlBehavior, {
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseUp: onMouseUp
+  }, _ref => {
+    let {
+      hasFocus,
+      hasHover,
+      isPressed,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseDown: handleMouseDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onMouseUp: handleMouseUp
+    } = _ref;
+    return /*#__PURE__*/React.createElement(IconButtonPresenter, _extends({
+      disabled: disabled,
+      hasFocus: hasFocus && !disabled,
+      hasHover: hasHover && !disabled,
+      isPressed: isPressed && !disabled,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseDown: handleMouseDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onMouseUp: handleMouseUp,
+      stylesheet: stylesheet
+    }, otherProps));
+  });
 };
 
 IconButton.displayName = "IconButton";
-
 IconButton.propTypes = {
@@ -451,2 +529,3 @@ /**
   disabled: PropTypes.bool,
+
   /**
@@ -456,2 +535,3 @@ * Icon or svg to be rendered
   icon: PropTypes.element,
+
   /**
@@ -461,2 +541,3 @@ * Url button will navigate to when clicked
   link: PropTypes.string,
+
   /**
@@ -466,2 +547,3 @@ * The icon-button is toggled to on when this is set
   on: PropTypes.bool,
+
   /**
@@ -471,2 +553,3 @@ * Called when user moves focus away from the button
   onBlur: PropTypes.func,
+
   /**
@@ -476,2 +559,3 @@ * Called when user clicks the button
   onClick: PropTypes.func,
+
   /**
@@ -481,2 +565,3 @@ * Called when user moves focus onto the button
   onFocus: PropTypes.func,
+
   /**
@@ -486,2 +571,3 @@ * Called when mouse is pressed over the button
   onMouseDown: PropTypes.func,
+
   /**
@@ -491,2 +577,3 @@ * Called when mouse begins to move over the button
   onMouseEnter: PropTypes.func,
+
   /**
@@ -496,2 +583,3 @@ * Called when mouse stops moving over the button
   onMouseLeave: PropTypes.func,
+
   /**
@@ -501,2 +589,3 @@ * Called when mouse is released over the button
   onMouseUp: PropTypes.func,
+
   /**
@@ -506,2 +595,3 @@ * Function to modify the component's styles
   stylesheet: PropTypes.func,
+
   /**
@@ -511,2 +601,3 @@ * Surface color level that the icon-button will be sitting on
   surface: PropTypes.oneOf(AVAILABLE_SURFACES),
+
   /**
@@ -516,2 +607,3 @@ * Title of the button for accessibility purposes
   title: PropTypes.string,
+
   /**
@@ -522,3 +614,2 @@ * The visual variant of the icon-button
 };
-
 IconButton.defaultProps = {
@@ -652,3 +743,2 @@ surface: surfaces.SURFACELEVEL100,
 
-export default IconButton;
-export { surfaces, AVAILABLE_SURFACES, variants, AVAILABLE_VARIANTS };
+export { AVAILABLE_SURFACES, AVAILABLE_VARIANTS, IconButton as default, surfaces, variants };

build/index.js

@@ -5,12 +5,111 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
-var PropTypes = _interopDefault(require('prop-types'));
+var React = require('react');
+var PropTypes = require('prop-types');
+var behaviors = require('@hig/behaviors');
 var emotion = require('emotion');
-var ThemeContext = _interopDefault(require('@hig/theme-context'));
+var ThemeContext = require('@hig/theme-context');
 var utils = require('@hig/utils');
-var behaviors = require('@hig/behaviors');
 
-var surfaces = Object.freeze({
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var ThemeContext__default = /*#__PURE__*/_interopDefaultLegacy(ThemeContext);
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+const surfaces = Object.freeze({
   SURFACELEVEL100: 100,
@@ -22,18 +121,13 @@ SURFACELEVEL200: 200,
 });
-
-var AVAILABLE_SURFACES = Object.freeze(Object.values(surfaces));
-
-var variants = Object.freeze({
+const AVAILABLE_SURFACES = Object.freeze(Object.values(surfaces));
+const variants = Object.freeze({
   DYNAMIC: "dynamic",
   STATIC: "static"
 });
+const AVAILABLE_VARIANTS = Object.freeze(Object.values(variants));
 
-var AVAILABLE_VARIANTS = Object.freeze(Object.values(variants));
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 function getDefaultIconTransitionProperties() {
   return {
-    transitionDuration: "0.3s",
-    transitionProperty: "fill"
+    transitionDuration: `0.3s`,
+    transitionProperty: `fill`
   };
@@ -43,17 +137,16 @@ }
 function getStylesByHover(themeData, surface, on, variant) {
-  var surfaceLevel = Number(surface);
-  var isDynamic = variant === "dynamic";
-  var dynamicHoverIconColor = on ? themeData["iconButton.dynamic.on.hover.iconColor"] : themeData["iconButton.dynamic.hover.iconColor"];
-  var hoverIconColor = isDynamic ? dynamicHoverIconColor : "";
-  var staticSurfaceLevelBackgroundColor = surfaceLevel <= 250 ? themeData["iconButton.static.hover.100To250BackgroundColor"] : themeData["iconButton.static.hover.300To350BackgroundColor"];
-  var staticHoverBackgroundColor = on ? themeData["iconButton.static.on.hover.100To250BackgroundColor"] : staticSurfaceLevelBackgroundColor;
-  var backgroundColor = !isDynamic ? staticHoverBackgroundColor : "transparent";
-  var staticBorderColor = on ? themeData["iconButton.static.on.hover.borderColor"] : "transparent";
-  var borderColor = !isDynamic ? staticBorderColor : "transparent";
-
+  const surfaceLevel = Number(surface);
+  const isDynamic = variant === `dynamic`;
+  const dynamicHoverIconColor = on ? themeData["iconButton.dynamic.on.hover.iconColor"] : themeData["iconButton.dynamic.hover.iconColor"];
+  const hoverIconColor = isDynamic ? dynamicHoverIconColor : "";
+  const staticSurfaceLevelBackgroundColor = surfaceLevel <= 250 ? themeData["iconButton.static.hover.100To250BackgroundColor"] : themeData["iconButton.static.hover.300To350BackgroundColor"];
+  const staticHoverBackgroundColor = on ? themeData["iconButton.static.on.hover.100To250BackgroundColor"] : staticSurfaceLevelBackgroundColor;
+  const backgroundColor = !isDynamic ? staticHoverBackgroundColor : `transparent`;
+  const staticBorderColor = on ? themeData["iconButton.static.on.hover.borderColor"] : `transparent`;
+  const borderColor = !isDynamic ? staticBorderColor : `transparent`;
   return {
-    backgroundColor: backgroundColor,
-    borderColor: borderColor,
-    boxShadow: "none",
-    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+    backgroundColor,
+    borderColor,
+    boxShadow: `none`,
+    "& svg *": _objectSpread2(_objectSpread2({}, getDefaultIconTransitionProperties()), {}, {
       fill: hoverIconColor
@@ -65,13 +158,12 @@ })
 function getStylesByFocus(themeData, on, variant) {
-  var isDynamic = variant === "dynamic";
-  var dynamicFocusIconColor = on ? themeData["iconButton.dynamic.on.focus.iconColor"] : themeData["iconButton.dynamic.focus.iconColor"];
-  var focusIconColor = isDynamic ? dynamicFocusIconColor : "";
-  var staticBorderColor = on ? themeData["iconButton.static.on.focus.borderColor"] : "transparent";
-  var borderColor = !isDynamic ? staticBorderColor : "transparent";
-
+  const isDynamic = variant === `dynamic`;
+  const dynamicFocusIconColor = on ? themeData["iconButton.dynamic.on.focus.iconColor"] : themeData["iconButton.dynamic.focus.iconColor"];
+  const focusIconColor = isDynamic ? dynamicFocusIconColor : "";
+  const staticBorderColor = on ? themeData["iconButton.static.on.focus.borderColor"] : `transparent`;
+  const borderColor = !isDynamic ? staticBorderColor : `transparent`;
   return {
-    borderColor: borderColor,
-    boxShadow: "0 0 0 " + themeData["iconButton.focus.haloWidth"] + " " + themeData["iconButton.focus.haloColor"],
-    transitionDuration: "0.3s, 0.3s",
-    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+    borderColor,
+    boxShadow: `0 0 0 ${themeData["iconButton.focus.haloWidth"]} ${themeData["iconButton.focus.haloColor"]}`,
+    transitionDuration: `0.3s, 0.3s`,
+    "& svg *": _objectSpread2(_objectSpread2({}, getDefaultIconTransitionProperties()), {}, {
       fill: focusIconColor
@@ -83,13 +175,12 @@ })
 function getStylesByPressed(themeData, surface, on, variant) {
-  var surfaceLevel = Number(surface);
-  var dynamicPressedIconColor = on ? themeData["iconButton.dynamic.on.pressed.iconColor"] : themeData["iconButton.dynamic.pressed.iconColor"];
-  var pressedIconColor = variant === "dynamic" ? dynamicPressedIconColor : "";
-
-  var dynamicPressedBackgroundColor = surfaceLevel <= 250 ? themeData["iconButton.dynamic.pressed.100To250BackgroundColor"] : themeData["iconButton.dynamic.pressed.300To350BackgroundColor"];
-  var staticPressedBackgroundColor = themeData["iconButton.static.on.pressed.backgroundColor"];
+  const surfaceLevel = Number(surface);
+  const dynamicPressedIconColor = on ? themeData["iconButton.dynamic.on.pressed.iconColor"] : themeData["iconButton.dynamic.pressed.iconColor"];
+  const pressedIconColor = variant === "dynamic" ? dynamicPressedIconColor : "";
+  const dynamicPressedBackgroundColor = surfaceLevel <= 250 ? themeData["iconButton.dynamic.pressed.100To250BackgroundColor"] : themeData["iconButton.dynamic.pressed.300To350BackgroundColor"];
+  const staticPressedBackgroundColor = themeData["iconButton.static.on.pressed.backgroundColor"];
   return {
-    backgroundColor: variant === "dynamic" ? dynamicPressedBackgroundColor : staticPressedBackgroundColor,
-    borderColor: variant === "dynamic" ? "transparent" : themeData["iconButton.static.on.pressed.borderColor"],
-    transitionDuration: "0.3s, 0.3s",
-    "& svg *": _extends({}, getDefaultIconTransitionProperties(), {
+    backgroundColor: variant === `dynamic` ? dynamicPressedBackgroundColor : staticPressedBackgroundColor,
+    borderColor: variant === `dynamic` ? `transparent` : themeData["iconButton.static.on.pressed.borderColor"],
+    transitionDuration: `0.3s, 0.3s`,
+    "& svg *": _objectSpread2(_objectSpread2({}, getDefaultIconTransitionProperties()), {}, {
       fill: pressedIconColor
@@ -103,3 +194,3 @@ })
     opacity: themeData["colorScheme.opacity.disabled"],
-    pointerEvents: "none"
+    pointerEvents: `none`
   };
@@ -109,145 +200,139 @@ }
 function stylesheet(props, themeData, density) {
-  var disabled = props.disabled,
-      hasFocus = props.hasFocus,
-      hasHover = props.hasHover,
-      isPressed = props.isPressed,
-      on = props.on,
-      customStylesheet = props.stylesheet,
-      surface = props.surface,
-      variant = props.variant;
-
-  var contentHeight = density === "medium-density" ? "20px" : "16px";
-  var isDynamic = variant === "dynamic";
-  var dynamicIconColor = on ? themeData["iconButton.dynamic.on.default.iconColor"] : themeData["iconButton.dynamic.default.iconColor"];
-  var iconColor = isDynamic ? dynamicIconColor : "";
-
-  var styles = {
-    iconButton: _extends({
-      backgroundColor: !isDynamic && on ? themeData["iconButton.static.on.default.backgroundColor"] : "transparent",
-      borderColor: !isDynamic && on ? themeData["iconButton.static.on.default.borderColor"] : "transparent",
-      borderStyle: "solid",
-      borderWidth: "1px",
-      display: "inline-block",
-      position: "relative",
-      cursor: "pointer",
-      boxSizing: "border-box",
+  const {
+    disabled,
+    hasFocus,
+    hasHover,
+    isPressed,
+    on,
+    stylesheet: customStylesheet,
+    surface,
+    variant
+  } = props;
+  const contentHeight = density === `medium-density` ? `20px` : `16px`;
+  const isDynamic = variant === `dynamic`;
+  const dynamicIconColor = on ? themeData["iconButton.dynamic.on.default.iconColor"] : themeData["iconButton.dynamic.default.iconColor"];
+  const iconColor = isDynamic ? dynamicIconColor : ``;
+  const iconStyles = {
+    position: `absolute`,
+    left: 0,
+    right: 0,
+    margin: `0 auto`,
+    top: `50%`,
+    transform: `translateY(-50%)`,
+    pointerEvents: `none`
+  };
+  const styles = {
+    iconButton: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+      backgroundColor: !isDynamic && on ? themeData["iconButton.static.on.default.backgroundColor"] : `transparent`,
+      borderColor: !isDynamic && on ? themeData["iconButton.static.on.default.borderColor"] : `transparent`,
+      borderStyle: `solid`,
+      borderWidth: `1px`,
+      display: `inline-block`,
+      position: `relative`,
+      cursor: `pointer`,
+      boxSizing: `border-box`,
       borderRadius: themeData["iconButton.borderRadius"],
-      padding: "0",
-      height: "calc(" + contentHeight + " + (" + themeData["density.spacings.extraSmall"] + " * 2))",
-      lineHeight: "calc(" + contentHeight + " + (" + themeData["density.spacings.extraSmall"] + " * 2))",
-      width: "calc(" + contentHeight + " + (" + themeData["density.spacings.extraSmall"] + " * 2))",
+      padding: `0`,
+      height: `calc(${contentHeight} + (${themeData["density.spacings.extraSmall"]} * 2))`,
+      lineHeight: `calc(${contentHeight} + (${themeData["density.spacings.extraSmall"]} * 2))`,
+      width: `calc(${contentHeight} + (${themeData["density.spacings.extraSmall"]} * 2))`,
       outline: 0,
-      transitionProperty: "box-shadow, background-color",
-      transitionDuration: "0.3s, 0.3s",
-      transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1)",
+      transitionProperty: `box-shadow, background-color`,
+      transitionDuration: `0.3s, 0.3s`,
+      transitionTimingFunction: `cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1)`,
       "& svg *": {
         fill: iconColor,
-        transitionDuration: "0.3s",
-        transitionProperty: "fill"
+        transitionDuration: `0.3s`,
+        transitionProperty: `fill`
       }
-    }, hasFocus ? getStylesByFocus(themeData, on, variant) : {}, hasHover ? getStylesByHover(themeData, surface, on, variant) : {}, isPressed ? getStylesByPressed(themeData, surface, on, variant) : {}, disabled ? getStylesByDisabled(themeData) : {}),
+    }, !isDynamic ? {
+      "& > svg": iconStyles
+    } : {}), hasFocus ? getStylesByFocus(themeData, on, variant) : {}), hasHover ? getStylesByHover(themeData, surface, on, variant) : {}), isPressed ? getStylesByPressed(themeData, surface, on, variant) : {}), disabled ? getStylesByDisabled(themeData) : {}),
     iconSpacer: {
-      width: "24px"
+      width: `24px`
     },
-    iconButtonIcon: {
-      position: "absolute",
-      left: 0,
-      right: 0,
-      margin: "0 auto",
-      top: "50%",
-      transform: "translateY(-50%)",
-      pointerEvents: "none"
-    }
+    iconButtonIcon: iconStyles
   };
-
   return customStylesheet ? customStylesheet(styles, props, themeData, density) : styles;
 }
 
-var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+const _excluded$1 = ["className", "disabled", "hasFocus", "hasHover", "icon", "isPressed", "link", "on", "onClick", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "stylesheet", "surface", "title", "variant"];
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+const IconButtonPresenter = props => {
+  const {
+    className,
+    disabled,
+    hasFocus,
+    hasHover,
+    icon: higIcon,
+    isPressed,
+    link,
+    on,
+    onClick,
+    onBlur,
+    onFocus,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    stylesheet: customStylesheet,
+    surface,
+    title,
+    variant
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$1);
 
-var IconButtonPresenter = function IconButtonPresenter(props) {
-  var className = props.className,
-      disabled = props.disabled,
-      hasFocus = props.hasFocus,
-      hasHover = props.hasHover,
-      higIcon = props.icon,
-      isPressed = props.isPressed,
-      link = props.link,
-      on = props.on,
-      onClick = props.onClick,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      onMouseDown = props.onMouseDown,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave,
-      onMouseUp = props.onMouseUp,
-      customStylesheet = props.stylesheet,
-      surface = props.surface,
-      title = props.title,
-      variant = props.variant,
-      otherProps = _objectWithoutProperties(props, ["className", "disabled", "hasFocus", "hasHover", "icon", "isPressed", "link", "on", "onClick", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "stylesheet", "surface", "title", "variant"]);
-
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref) {
-      var resolvedRoles = _ref.resolvedRoles,
-          metadata = _ref.metadata;
-
-      var linkProps = link ? {
-        tabIndex: disabled ? "-1" : "0",
-        href: link
-      } : {};
-      var iconButtonIconClassName = utils.createCustomClassNames(className, "icon-button-icon");
-      var Element = props.link ? "a" : "button";
-      var styles = stylesheet(props, resolvedRoles, metadata.densityId);
-      var icon = React.cloneElement(higIcon, {
-        className: emotion.cx(emotion.css(styles.iconButtonIcon), iconButtonIconClassName)
-      });
-      var tabIndex = disabled ? "-1" : "0";
-      return React.createElement(
-        Element,
-        _extends$1({}, otherProps, {
-          className: emotion.cx(emotion.css(styles.iconButton), className),
-          disabled: disabled,
-          onClick: onClick,
-          onBlur: onBlur,
-          onFocus: onFocus,
-          onMouseDown: onMouseDown,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
-          onMouseUp: onMouseUp,
-          tabIndex: tabIndex,
-          title: title
-        }, linkProps),
-        icon
-      );
-    }
-  );
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref => {
+    let {
+      resolvedRoles,
+      metadata
+    } = _ref;
+    const linkProps = link ? {
+      tabIndex: disabled ? "-1" : "0",
+      href: link
+    } : {};
+    const iconButtonIconClassName = utils.createCustomClassNames(className, "icon-button-icon");
+    const Element = props.link ? "a" : "button";
+    const styles = stylesheet(props, resolvedRoles, metadata.densityId);
+    const icon = /*#__PURE__*/React__default["default"].cloneElement(higIcon, {
+      className: emotion.cx(emotion.css(styles.iconButtonIcon), iconButtonIconClassName)
+    });
+    const tabIndex = disabled ? "-1" : "0";
+    return /*#__PURE__*/React__default["default"].createElement(Element, _extends({}, otherProps, {
+      className: emotion.cx(emotion.css(styles.iconButton), className),
+      disabled: disabled,
+      onClick: onClick,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseDown: onMouseDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onMouseUp: onMouseUp,
+      tabIndex: tabIndex,
+      title: title
+    }, linkProps), icon);
+  });
 };
 
 IconButtonPresenter.displayName = "IconButtonPresenter";
-
 IconButtonPresenter.propTypes = {
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  hasFocus: PropTypes.bool,
-  hasHover: PropTypes.bool,
-  icon: PropTypes.element,
-  isPressed: PropTypes.bool,
-  link: PropTypes.string,
-  on: PropTypes.bool,
-  onBlur: PropTypes.func,
-  onClick: PropTypes.func,
-  onFocus: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onMouseUp: PropTypes.func,
-  stylesheet: PropTypes.func,
-  surface: PropTypes.oneOf(AVAILABLE_SURFACES),
-  title: PropTypes.string.isRequired,
-  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
+  className: PropTypes__default["default"].string,
+  disabled: PropTypes__default["default"].bool,
+  hasFocus: PropTypes__default["default"].bool,
+  hasHover: PropTypes__default["default"].bool,
+  icon: PropTypes__default["default"].element,
+  isPressed: PropTypes__default["default"].bool,
+  link: PropTypes__default["default"].string,
+  on: PropTypes__default["default"].bool,
+  onBlur: PropTypes__default["default"].func,
+  onClick: PropTypes__default["default"].func,
+  onFocus: PropTypes__default["default"].func,
+  onMouseDown: PropTypes__default["default"].func,
+  onMouseEnter: PropTypes__default["default"].func,
+  onMouseLeave: PropTypes__default["default"].func,
+  onMouseUp: PropTypes__default["default"].func,
+  stylesheet: PropTypes__default["default"].func,
+  surface: PropTypes__default["default"].oneOf(AVAILABLE_SURFACES),
+  title: PropTypes__default["default"].string.isRequired,
+  variant: PropTypes__default["default"].oneOf(AVAILABLE_VARIANTS)
 };
@@ -398,56 +483,53 @@ IconButtonPresenter.__docgenInfo = {
 
-var _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+const _excluded = ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "stylesheet"];
 
-function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+const IconButton = props => {
+  const {
+    disabled,
+    onBlur,
+    onFocus,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    stylesheet
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded);
 
-var IconButton = function IconButton(props) {
-  var disabled = props.disabled,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      onMouseDown = props.onMouseDown,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave,
-      onMouseUp = props.onMouseUp,
-      stylesheet = props.stylesheet,
-      otherProps = _objectWithoutProperties$1(props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "stylesheet"]);
-
-  return React.createElement(
-    behaviors.ControlBehavior,
-    {
-      onBlur: onBlur,
-      onFocus: onFocus,
-      onMouseDown: onMouseDown,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onMouseUp: onMouseUp
-    },
-    function (_ref) {
-      var hasFocus = _ref.hasFocus,
-          hasHover = _ref.hasHover,
-          isPressed = _ref.isPressed,
-          handleBlur = _ref.onBlur,
-          handleFocus = _ref.onFocus,
-          handleMouseDown = _ref.onMouseDown,
-          handleMouseEnter = _ref.onMouseEnter,
-          handleMouseLeave = _ref.onMouseLeave,
-          handleMouseUp = _ref.onMouseUp;
-      return React.createElement(IconButtonPresenter, _extends$2({
-        disabled: disabled,
-        hasFocus: hasFocus && !disabled,
-        hasHover: hasHover && !disabled,
-        isPressed: isPressed && !disabled,
-        onBlur: handleBlur,
-        onFocus: handleFocus,
-        onMouseDown: handleMouseDown,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onMouseUp: handleMouseUp,
-        stylesheet: stylesheet
-      }, otherProps));
-    }
-  );
+  return /*#__PURE__*/React__default["default"].createElement(behaviors.ControlBehavior, {
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseUp: onMouseUp
+  }, _ref => {
+    let {
+      hasFocus,
+      hasHover,
+      isPressed,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseDown: handleMouseDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onMouseUp: handleMouseUp
+    } = _ref;
+    return /*#__PURE__*/React__default["default"].createElement(IconButtonPresenter, _extends({
+      disabled: disabled,
+      hasFocus: hasFocus && !disabled,
+      hasHover: hasHover && !disabled,
+      isPressed: isPressed && !disabled,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseDown: handleMouseDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onMouseUp: handleMouseUp,
+      stylesheet: stylesheet
+    }, otherProps));
+  });
 };
 
 IconButton.displayName = "IconButton";
-
 IconButton.propTypes = {
@@ -457,61 +539,74 @@ /**
    */
-  disabled: PropTypes.bool,
+  disabled: PropTypes__default["default"].bool,
+
   /**
    * Icon or svg to be rendered
    */
-  icon: PropTypes.element,
+  icon: PropTypes__default["default"].element,
+
   /**
    * Url button will navigate to when clicked
    */
-  link: PropTypes.string,
+  link: PropTypes__default["default"].string,
+
   /**
    * The icon-button is toggled to on when this is set
    */
-  on: PropTypes.bool,
+  on: PropTypes__default["default"].bool,
+
   /**
    * Called when user moves focus away from the button
    */
-  onBlur: PropTypes.func,
+  onBlur: PropTypes__default["default"].func,
+
   /**
    * Called when user clicks the button
    */
-  onClick: PropTypes.func,
+  onClick: PropTypes__default["default"].func,
+
   /**
    * Called when user moves focus onto the button
    */
-  onFocus: PropTypes.func,
+  onFocus: PropTypes__default["default"].func,
+
   /**
    * Called when mouse is pressed over the button
    */
-  onMouseDown: PropTypes.func,
+  onMouseDown: PropTypes__default["default"].func,
+
   /**
    * Called when mouse begins to move over the button
    */
-  onMouseEnter: PropTypes.func,
+  onMouseEnter: PropTypes__default["default"].func,
+
   /**
    * Called when mouse stops moving over the button
    */
-  onMouseLeave: PropTypes.func,
+  onMouseLeave: PropTypes__default["default"].func,
+
   /**
    * Called when mouse is released over the button
    */
-  onMouseUp: PropTypes.func,
+  onMouseUp: PropTypes__default["default"].func,
+
   /**
    * Function to modify the component's styles
    */
-  stylesheet: PropTypes.func,
+  stylesheet: PropTypes__default["default"].func,
+
   /**
    * Surface color level that the icon-button will be sitting on
    */
-  surface: PropTypes.oneOf(AVAILABLE_SURFACES),
+  surface: PropTypes__default["default"].oneOf(AVAILABLE_SURFACES),
+
   /**
    * Title of the button for accessibility purposes
    */
-  title: PropTypes.string,
+  title: PropTypes__default["default"].string,
+
   /**
    * The visual variant of the icon-button
    */
-  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
+  variant: PropTypes__default["default"].oneOf(AVAILABLE_VARIANTS)
 };
-
 IconButton.defaultProps = {
@@ -645,6 +740,6 @@ surface: surfaces.SURFACELEVEL100,
 
-exports.default = IconButton;
+exports.AVAILABLE_SURFACES = AVAILABLE_SURFACES;
+exports.AVAILABLE_VARIANTS = AVAILABLE_VARIANTS;
+exports["default"] = IconButton;
 exports.surfaces = surfaces;
-exports.AVAILABLE_SURFACES = AVAILABLE_SURFACES;
 exports.variants = variants;
-exports.AVAILABLE_VARIANTS = AVAILABLE_VARIANTS;

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/icon-button-v3.1.1](https://github.com/Autodesk/hig/compare/@hig/icon-button@3.1.0...@hig/icon-button@3.1.1) (2022-08-24)
+
+
+### Bug Fixes
+
+* static icon positioning to match dynamic ([4afc1e9](https://github.com/Autodesk/hig/commit/4afc1e9))
+
 # [@hig/icon-button-v3.1.0](https://github.com/Autodesk/hig/compare/@hig/icon-button@3.0.0...@hig/icon-button@3.1.0) (2022-01-24)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/icon-button",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "HIG IconButton component",
@@ -34,4 +34,4 @@ "author": "Autodesk Inc.",
   "peerDependencies": {
-    "@hig/theme-context": "^4.1.0",
-    "@hig/theme-data": "^2.22.1",
+    "@hig/theme-context": "^4.2.0",
+    "@hig/theme-data": "^3.1.0",
     "react": "^17.0.0"
@@ -38,0 +38,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53246

increased by4.85%

Lines of code

1352

increased by12.29%

No dependency changes