@hig/tabs - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

build/index.es.js

 import React, { useState, useEffect, Children } from 'react';
 import PropTypes from 'prop-types';
-import { CloseSUI, CloseXsUI } from '@hig/icons';
-import ThemeContext from '@hig/theme-context';
+import { cx, css } from 'emotion';
+import memoize from 'lodash.memoize';
+import { createCustomClassNames, createButtonEventHandlers } from '@hig/utils';
 import { ControlBehavior } from '@hig/behaviors';
-import { cx, css } from 'emotion';
 import Typography from '@hig/typography';
-import { createCustomClassNames, createButtonEventHandlers } from '@hig/utils';
-import memoize from 'lodash.memoize';
+import ThemeContext from '@hig/theme-context';
+import { CloseSUI, CloseXsUI } from '@hig/icons';
 
-var alignments = 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 _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 alignments = Object.freeze({
   LEFT: "left",
@@ -16,4 +93,3 @@ CENTER: "center",
 });
-
-var variants = Object.freeze({
+const variants = Object.freeze({
   BOX: "box",
@@ -23,24 +99,21 @@ CANVAS: "canvas",
 });
-
-var orientations = Object.freeze({
+const orientations = Object.freeze({
   HORIZONTAL: "horizontal",
   VERTICAL: "vertical"
 });
+const AVAILABLE_ALIGNMENTS = Object.freeze(Object.values(alignments));
+const AVAILABLE_VARIANTS = Object.freeze(Object.values(variants));
+const AVAILABLE_ORIENTATIONS = Object.freeze(Object.values(orientations));
 
-var AVAILABLE_ALIGNMENTS = Object.freeze(Object.values(alignments));
-var AVAILABLE_VARIANTS = Object.freeze(Object.values(variants));
-var AVAILABLE_ORIENTATIONS = Object.freeze(Object.values(orientations));
-
-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 getHaloStyles(_ref, themeData) {
-  var active = _ref.active,
-      hasHover = _ref.hasHover,
-      hasFocus = _ref.hasFocus,
-      isPressed = _ref.isPressed,
-      variant = _ref.variant,
-      orientation = _ref.orientation,
-      disabled = _ref.disabled;
-
-  var styles = {
+  let {
+    active,
+    hasHover,
+    hasFocus,
+    isPressed,
+    variant,
+    orientation,
+    disabled
+  } = _ref;
+  let styles = {
     position: "absolute",
@@ -55,3 +128,3 @@ left: 0,
   if (variant && variant === variants.UNDERLINE) {
-    styles = _extends({}, styles, {
+    styles = _objectSpread2(_objectSpread2({}, styles), {}, {
       bottom: 0,
@@ -66,3 +139,3 @@ width: "100%",
         backgroundColor: themeData["tabs.focus.haloColor"],
-        content: "\" \"",
+        content: `" "`,
         width: "100%",
@@ -76,3 +149,3 @@ height: !disabled && hasFocus ? themeData["tabs.focus.haloWidth"] : 0,
     if (!disabled && (hasHover || active || isPressed)) {
-      styles = _extends({}, styles, {
+      styles = _objectSpread2(_objectSpread2({}, styles), {}, {
         height: themeData["tabs.focus.haloWidth"]
@@ -84,3 +157,3 @@ }, (active || isPressed) && {
   } else if (variant && variant === variants.BOX) {
-    styles = _extends({}, styles, {
+    styles = _objectSpread2(_objectSpread2({}, styles), {}, {
       top: 0,
@@ -92,2 +165,3 @@ backgroundColor: themeData["tabs.focus.haloColor"]
       styles.height = "100%";
+
       if (!disabled && hasFocus) {
@@ -98,2 +172,3 @@ styles.width = themeData["tabs.focus.haloWidth"];
       styles.width = "100%";
+
       if (!disabled && hasFocus) {
@@ -109,16 +184,20 @@ styles.height = themeData["tabs.focus.haloWidth"];
 function getTabBackground(_ref2, themeData) {
-  var active = _ref2.active,
-      hasHover = _ref2.hasHover,
-      isPressed = _ref2.isPressed,
-      variant = _ref2.variant,
-      disabled = _ref2.disabled;
+  let {
+    active,
+    hasHover,
+    isPressed,
+    variant,
+    disabled
+  } = _ref2;
 
   if (!disabled && variant && variant !== variants.UNDERLINE) {
     if (active || isPressed) {
-      return themeData["tabs." + variant + ".tab.active.backgroundColor"];
+      return themeData[`tabs.${variant}.tab.active.backgroundColor`];
     }
+
     if (hasHover) {
-      return themeData["tabs." + variant + ".tab.hover.backgroundColor"];
+      return themeData[`tabs.${variant}.tab.hover.backgroundColor`];
     }
   }
+
   return "transparent";
@@ -128,12 +207,14 @@ }
 function getContentWrapperWidth(_ref3, themeData) {
-  var label = _ref3.label,
-      icon = _ref3.icon,
-      closable = _ref3.closable;
+  let {
+    label,
+    icon,
+    closable
+  } = _ref3;
+  if (label) return "auto";
 
-  if (label) return "auto";
   if (icon && closable) {
-    return "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + " + " + themeData["tabs.closeButton.minSize"] + ")";
+    return `calc(${themeData["tabs.iconSize"]} + ${themeData["tabs.iconGutter"]} + ${themeData["tabs.closeButton.minSize"]})`;
   }
+
   if (icon) return themeData["tabs.iconSize"];
-
   return "0";
@@ -143,5 +224,6 @@ }
 function getIconColor(_ref4, themeData) {
-  var hasHover = _ref4.hasHover,
-      isPressed = _ref4.isPressed;
-
+  let {
+    hasHover,
+    isPressed
+  } = _ref4;
   if (isPressed) return themeData["tabs.closeButton.pressed.iconColor"];
@@ -152,21 +234,20 @@ if (hasHover) return themeData["tabs.closeButton.hover.iconColor"];
 
-function stylesheet(props, themeData) {
-  var active = props.active,
-      hasHover = props.hasHover,
-      isPressed = props.isPressed,
-      label = props.label,
-      icon = props.icon,
-      variant = props.variant,
-      orientation = props.orientation,
-      disabled = props.disabled,
-      closable = props.closable,
-      customStylesheet = props.stylesheet;
-
-
-  var styles = {
-    tab: _extends({
+function stylesheet$1(props, themeData) {
+  const {
+    active,
+    hasHover,
+    isPressed,
+    label,
+    icon,
+    variant,
+    orientation,
+    disabled,
+    closable,
+    stylesheet: customStylesheet
+  } = props;
+  const styles = {
+    tab: _objectSpread2({
       position: "relative",
       display: "flex",
       margin: "0"
-
     }, variant && variant === variants.UNDERLINE && {
@@ -178,3 +259,3 @@ marginRight: themeData["tabs.underline.tab.gutter"],
     }),
-    buttonWrapper: _extends({
+    buttonWrapper: _objectSpread2(_objectSpread2(_objectSpread2({
       position: "relative",
@@ -189,14 +270,12 @@ display: "flex",
       backgroundColor: getTabBackground(props, themeData),
-
       "&:focus": {
         outline: "none"
       }
-
     }, variant && variant === variants.UNDERLINE && {
-      marginBottom: "-" + themeData["tabs.underline.wrapper.borderBottomWidth"],
-      padding: "0 0 " + themeData["tabs.underline.tab.paddingBottom"] + " 0"
-    }, variant && variant === variants.BOX && {
-      padding: themeData["tabs.box.tab.paddingVertical"] + " " + themeData["tabs.box.tab.paddingHorizontal"]
-    }, variant && variant === variants.CANVAS && {
-      padding: themeData["tabs.canvas.tab.paddingVertical"] + " " + themeData["tabs.canvas.tab.paddingHorizontal"],
+      marginBottom: `-${themeData["tabs.underline.wrapper.borderBottomWidth"]}`,
+      padding: `0 0 ${themeData["tabs.underline.tab.paddingBottom"]} 0`
+    }), variant && variant === variants.BOX && {
+      padding: `${themeData["tabs.box.tab.paddingVertical"]} ${themeData["tabs.box.tab.paddingHorizontal"]}`
+    }), variant && variant === variants.CANVAS && {
+      padding: `${themeData["tabs.canvas.tab.paddingVertical"]} ${themeData["tabs.canvas.tab.paddingHorizontal"]}`,
       transform: "skewX(-23deg)",
@@ -222,8 +301,5 @@ transformOrigin: "0 100%"
       textAlign: "center",
-      paddingLeft: icon && variant && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + ")" : "0",
-
-      paddingRight: closable && variant && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.closeButton.minSize"] + " + " + themeData["tabs.closeButton.gutter"] + ")" : "0",
-
+      paddingLeft: icon && variant && variant !== variants.UNDERLINE ? `calc(${themeData["tabs.iconSize"]} + ${themeData["tabs.iconGutter"]})` : "0",
+      paddingRight: closable && variant && variant !== variants.UNDERLINE ? `calc(${themeData["tabs.closeButton.minSize"]} + ${themeData["tabs.closeButton.gutter"]})` : "0",
       color: themeData["tabs.label.fontColor"],
-
       // keep same amount of space whether it's active (bold font weight)
@@ -233,3 +309,3 @@ // or not active (regular font weight)
         display: "block",
-        content: "\"" + label + "\"",
+        content: `"${label}"`,
         fontFamily: themeData["tabs.label.fontFamily"],
@@ -245,3 +321,3 @@ fontSize: themeData["tabs.label.fontSize"],
     halo: getHaloStyles(props, themeData),
-    divider: _extends({}, variant && variant !== variants.UNDERLINE && {
+    divider: _objectSpread2({}, variant && variant !== variants.UNDERLINE && {
       position: "absolute",
@@ -251,5 +327,5 @@ top: "50%",
       transform: "translateY(-50%)",
-      height: themeData["tabs." + variant + ".dividerHeight"],
-      width: themeData["tabs." + variant + ".dividerWidth"],
-      backgroundColor: themeData["tabs." + variant + ".divider.borderColor"]
+      height: themeData[`tabs.${variant}.dividerHeight`],
+      width: themeData[`tabs.${variant}.dividerWidth`],
+      backgroundColor: themeData[`tabs.${variant}.divider.borderColor`]
     }),
@@ -282,7 +358,9 @@ icon: {
       cursor: "pointer",
-
       "& svg *": {
-        fill: getIconColor({ hasHover: hasHover, isPressed: isPressed }, themeData),
-        transitionDuration: "0.3s",
-        transitionProperty: "fill"
+        fill: getIconColor({
+          hasHover,
+          isPressed
+        }, themeData),
+        transitionDuration: `0.3s`,
+        transitionProperty: `fill`
       }
@@ -303,15 +381,17 @@ },
 
-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 _excluded$4 = ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick", "stylesheet"];
 
-var TabCloseButtonPresenter = function TabCloseButtonPresenter(props) {
-  var disabled = props.disabled,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      onMouseDown = props.onMouseDown,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave,
-      onMouseUp = props.onMouseUp,
-      onClick = props.onClick,
-      customStylesheet = props.stylesheet,
-      otherProps = _objectWithoutProperties(props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick", "stylesheet"]);
+const TabCloseButtonPresenter = props => {
+  const {
+    disabled,
+    onBlur,
+    onFocus,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    onClick,
+    stylesheet: customStylesheet
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$4);
 
@@ -324,59 +404,55 @@ function handleClick(event) {
 
-  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(
-        ThemeContext.Consumer,
-        null,
-        function (_ref2) {
-          var resolvedRoles = _ref2.resolvedRoles,
-              metadata = _ref2.metadata;
-
-          var styles = stylesheet({ hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed, stylesheet: customStylesheet }, resolvedRoles, metadata);
-          var className = otherProps.className;
-
-          var CloseIcon = metadata.densityId === "medium-density" ? CloseSUI : CloseXsUI;
-
-          return React.createElement(
-            "button",
-            {
-              onBlur: handleBlur,
-              onFocus: handleFocus,
-              onMouseDown: handleMouseDown,
-              onMouseEnter: handleMouseEnter,
-              onMouseLeave: handleMouseLeave,
-              onMouseUp: handleMouseUp,
-              className: cx(css(styles.button), className),
-              tabIndex: "-1",
-              onClick: handleClick,
-              disabled: disabled,
-              title: "close"
-            },
-            React.createElement(CloseIcon, null)
-          );
-        }
-      );
-    }
-  );
+  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(ThemeContext.Consumer, null, _ref2 => {
+      let {
+        resolvedRoles,
+        metadata
+      } = _ref2;
+      const styles = stylesheet$1({
+        hasFocus,
+        hasHover,
+        isPressed,
+        stylesheet: customStylesheet
+      }, resolvedRoles);
+      const {
+        className
+      } = otherProps;
+      const CloseIcon = metadata.densityId === "medium-density" ? CloseSUI : CloseXsUI;
+      return /*#__PURE__*/React.createElement("button", {
+        className: cx(css(styles.button), className),
+        disabled: disabled,
+        onBlur: handleBlur,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onMouseDown: handleMouseDown,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseUp: handleMouseUp,
+        tabIndex: "-1",
+        title: "close",
+        type: "button"
+      }, /*#__PURE__*/React.createElement(CloseIcon, null));
+    });
+  });
 };
 
 TabCloseButtonPresenter.displayName = "TabCloseButtonPresenter";
-
 TabCloseButtonPresenter.propTypes = {
@@ -387,2 +463,3 @@ /**
   disabled: PropTypes.bool,
+
   /**
@@ -392,2 +469,3 @@ * Called when user moves focus away from the button
   onBlur: PropTypes.func,
+
   /**
@@ -397,2 +475,3 @@ * Called when user clicks the button
   onClick: PropTypes.func,
+
   /**
@@ -402,2 +481,3 @@ * Called when user moves focus onto the button
   onFocus: PropTypes.func,
+
   /**
@@ -407,2 +487,3 @@ * Called when mouse is pressed over the button
   onMouseDown: PropTypes.func,
+
   /**
@@ -412,2 +493,3 @@ * Called when mouse begins to move over the button
   onMouseEnter: PropTypes.func,
+
   /**
@@ -417,2 +499,3 @@ * Called when mouse stops moving over the button
   onMouseLeave: PropTypes.func,
+
   /**
@@ -422,2 +505,3 @@ * Called when mouse is released over the button
   onMouseUp: PropTypes.func,
+
   /**
@@ -498,113 +582,90 @@ * Function to modify the component's styles
 
-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 _excluded$3 = ["active", "hasFocus", "hasHover", "isPressed", "label", "icon", "disabled", "closable", "variant", "orientation", "showDivider", "onBlur", "onFocus", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onClose", "stylesheet"];
 function TabPresenter(_ref) {
-  var active = _ref.active,
-      hasFocus = _ref.hasFocus,
-      hasHover = _ref.hasHover,
-      isPressed = _ref.isPressed,
-      label = _ref.label,
-      icon = _ref.icon,
-      disabled = _ref.disabled,
-      closable = _ref.closable,
-      variant = _ref.variant,
-      orientation = _ref.orientation,
-      showDivider = _ref.showDivider,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown,
-      onMouseEnter = _ref.onMouseEnter,
-      onMouseLeave = _ref.onMouseLeave,
-      onClose = _ref.onClose,
-      customStylesheet = _ref.stylesheet,
-      otherProps = _objectWithoutProperties$1(_ref, ["active", "hasFocus", "hasHover", "isPressed", "label", "icon", "disabled", "closable", "variant", "orientation", "showDivider", "onBlur", "onFocus", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onClose", "stylesheet"]);
+  let {
+    active,
+    hasFocus,
+    hasHover,
+    isPressed,
+    label,
+    icon,
+    disabled,
+    closable,
+    variant,
+    orientation,
+    showDivider,
+    onBlur,
+    onFocus,
+    onClick,
+    onKeyDown,
+    onMouseEnter,
+    onMouseLeave,
+    onClose,
+    stylesheet: customStylesheet
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded$3);
 
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref2) {
-      var resolvedRoles = _ref2.resolvedRoles,
-          metadata = _ref2.metadata;
-
-      var styles = stylesheet({
-        active: active,
-        hasFocus: hasFocus,
-        hasHover: hasHover,
-        isPressed: isPressed,
-        label: label,
-        icon: icon,
-        variant: variant,
-        orientation: orientation,
-        disabled: disabled,
-        closable: closable,
-        stylesheet: customStylesheet
-      }, resolvedRoles, metadata);
-
-      var className = otherProps.className;
-
-
-      var showIcon = variant !== variants.UNDERLINE && icon;
-      var showClose = variant !== variants.UNDERLINE && closable;
-      var showHalo = variant !== variants.CANVAS;
-
-      var buttonClassName = createCustomClassNames(otherProps.className, "button");
-
-      var iconClassName = createCustomClassNames(otherProps.className, "icon");
-
-      var labelClassName = createCustomClassNames(otherProps.className, "label");
-
-      var closeButtonClassName = createCustomClassNames(otherProps.className, "close-button");
-
-      var haloClassName = createCustomClassNames(otherProps.className, "halo");
-
-      var dividerClassName = createCustomClassNames(otherProps.className, "divider");
-
-      return React.createElement(
-        "li",
-        { className: cx(css(styles.tab), className) },
-        React.createElement(
-          "div",
-          {
-            onBlur: onBlur,
-            onFocus: onFocus,
-            onClick: onClick,
-            onKeyDown: onKeyDown,
-            onMouseEnter: onMouseEnter,
-            onMouseLeave: onMouseLeave,
-            disabled: disabled,
-            tabIndex: disabled ? "-1" : "0",
-            role: "button",
-            className: cx(css(styles.buttonWrapper), buttonClassName)
-          },
-          React.createElement(
-            "div",
-            { className: css(styles.contentWrapper) },
-            showIcon && React.createElement(
-              "span",
-              { className: cx(css(styles.icon), iconClassName) },
-              icon
-            ),
-            React.createElement(
-              Typography,
-              { className: cx(css(styles.label), labelClassName) },
-              label
-            ),
-            showClose && React.createElement(TabCloseButtonPresenter, {
-              className: cx(css(styles.closeButton), closeButtonClassName),
-              onClick: onClose,
-              stylesheet: customStylesheet
-            })
-          ),
-          showHalo && React.createElement("div", { className: cx(css(styles.halo), haloClassName) }),
-          showDivider && React.createElement("div", { className: cx(css(styles.divider), dividerClassName) })
-        )
-      );
-    }
-  );
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref2 => {
+    let {
+      resolvedRoles,
+      metadata
+    } = _ref2;
+    const styles = stylesheet$1({
+      active,
+      hasFocus,
+      hasHover,
+      isPressed,
+      label,
+      icon,
+      variant,
+      orientation,
+      disabled,
+      closable,
+      stylesheet: customStylesheet
+    }, resolvedRoles);
+    const {
+      className
+    } = otherProps;
+    const showIcon = variant !== variants.UNDERLINE && icon;
+    const showClose = variant !== variants.UNDERLINE && closable;
+    const showHalo = variant !== variants.CANVAS;
+    const buttonClassName = createCustomClassNames(otherProps.className, "button");
+    const iconClassName = createCustomClassNames(otherProps.className, "icon");
+    const labelClassName = createCustomClassNames(otherProps.className, "label");
+    const closeButtonClassName = createCustomClassNames(otherProps.className, "close-button");
+    const haloClassName = createCustomClassNames(otherProps.className, "halo");
+    const dividerClassName = createCustomClassNames(otherProps.className, "divider");
+    return /*#__PURE__*/React.createElement("li", {
+      className: cx(css(styles.tab), className)
+    }, /*#__PURE__*/React.createElement("div", {
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      disabled: disabled,
+      tabIndex: disabled ? "-1" : "0",
+      role: "button",
+      className: cx(css(styles.buttonWrapper), buttonClassName)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: css(styles.contentWrapper)
+    }, showIcon && /*#__PURE__*/React.createElement("span", {
+      className: cx(css(styles.icon), iconClassName)
+    }, icon), /*#__PURE__*/React.createElement(Typography, {
+      className: cx(css(styles.label), labelClassName)
+    }, label), showClose && /*#__PURE__*/React.createElement(TabCloseButtonPresenter, {
+      className: cx(css(styles.closeButton), closeButtonClassName),
+      onClick: onClose,
+      stylesheet: customStylesheet
+    })), showHalo && /*#__PURE__*/React.createElement("div", {
+      className: cx(css(styles.halo), haloClassName)
+    }), showDivider && /*#__PURE__*/React.createElement("div", {
+      className: cx(css(styles.divider), dividerClassName)
+    })));
+  });
 }
-
 TabPresenter.propTypes = {
   active: PropTypes.bool,
-  label: PropTypes.string,
+  label: PropTypes.node,
   icon: PropTypes.node,
@@ -628,3 +689,2 @@ disabled: PropTypes.bool,
 };
-
 TabPresenter.defaultProps = {
@@ -648,3 +708,3 @@ variant: variants.UNDERLINE,
       "type": {
-        "name": "string"
+        "name": "node"
       },
@@ -792,70 +852,73 @@ "required": false,
 
-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$2 = ["active", "closable", "disabled", "icon", "label", "stylesheet"];
 
-function _objectWithoutProperties$2(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 Tab = props => {
+  const {
+    active,
+    closable,
+    disabled,
+    icon,
+    label,
+    stylesheet: customStylesheet
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$2);
 
-var Tab = function Tab(props) {
-  var active = props.active,
-      closable = props.closable,
-      disabled = props.disabled,
-      icon = props.icon,
-      label = props.label,
-      customStylesheet = props.stylesheet,
-      otherProps = _objectWithoutProperties$2(props, ["active", "closable", "disabled", "icon", "label", "stylesheet"]);
+  const {
+    className
+  } = otherProps;
+  const {
+    variant,
+    orientation,
+    showDivider,
+    onMouseEnter,
+    onMouseLeave,
+    handleClick,
+    handleKeyDown,
+    onClose,
+    render
+  } = otherProps;
 
-  var className = otherProps.className;
-  var variant = otherProps.variant,
-      orientation = otherProps.orientation,
-      showDivider = otherProps.showDivider,
-      onMouseEnter = otherProps.onMouseEnter,
-      onMouseLeave = otherProps.onMouseLeave,
-      handleClick = otherProps.handleClick,
-      handleKeyDown = otherProps.handleKeyDown,
-      onClose = otherProps.onClose,
-      render = otherProps.render;
-
-
   if (render) {
-    return render(_extends$1({}, props));
+    return render(_objectSpread2({}, props));
   }
 
-  return React.createElement(
-    ControlBehavior,
-    { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-    function (_ref) {
-      var hasFocus = _ref.hasFocus,
-          hasHover = _ref.hasHover,
-          isPressed = _ref.isPressed,
-          onBlur = _ref.onBlur,
-          onFocus = _ref.onFocus,
-          handleMouseEnter = _ref.onMouseEnter,
-          handleMouseLeave = _ref.onMouseLeave;
-      return React.createElement(TabPresenter, {
-        active: active,
-        disabled: disabled,
-        closable: closable,
-        hasFocus: hasFocus,
-        hasHover: hasHover,
-        isPressed: isPressed,
-        label: label,
-        icon: icon,
-        variant: variant,
-        orientation: orientation,
-        showDivider: showDivider,
-        onBlur: onBlur,
-        onFocus: onFocus,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        onClose: onClose,
-        className: className,
-        stylesheet: customStylesheet
-      });
-    }
-  );
+  return /*#__PURE__*/React.createElement(ControlBehavior, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, _ref => {
+    let {
+      hasFocus,
+      hasHover,
+      isPressed,
+      onBlur,
+      onFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    } = _ref;
+    return /*#__PURE__*/React.createElement(TabPresenter, {
+      active: active,
+      disabled: disabled,
+      closable: closable,
+      hasFocus: hasFocus,
+      hasHover: hasHover,
+      isPressed: isPressed,
+      label: label,
+      icon: icon,
+      variant: variant,
+      orientation: orientation,
+      showDivider: showDivider,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onClose: onClose,
+      className: className,
+      stylesheet: customStylesheet
+    });
+  });
 };
 
 Tab.displayName = "Tab";
-
 Tab.propTypes = {
@@ -870,2 +933,3 @@ /**
   active: PropTypes.bool,
+
   /**
@@ -876,2 +940,3 @@ * Specify if the tab will have a close button
   closable: PropTypes.bool,
+
   /**
@@ -881,2 +946,3 @@ * Specify if the tab is disabled
   disabled: PropTypes.bool,
+
   /**
@@ -887,6 +953,8 @@ * A @hig/icon element
   icon: PropTypes.node,
+
   /**
    * Sets the label of a tab
    */
-  label: PropTypes.string,
+  label: PropTypes.node,
+
   /**
@@ -897,3 +965,2 @@ * Function to modify the component's styles
 };
-
 Tab.defaultProps = {
@@ -950,3 +1017,3 @@ active: false,
       "type": {
-        "name": "string"
+        "name": "node"
       },
@@ -966,6 +1033,2 @@ "required": false,
 
-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; };
-
-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 getBackgroundColor(variant, themeData) {
@@ -975,20 +1038,23 @@ if (variant === variants.BOX) {
   }
+
   if (variant === variants.CANVAS) {
     return themeData["tabs.canvas.wrapper.backgroundColor"];
   }
+
   return "transparent";
 }
 
-function stylesheet$1(props, themeData) {
-  var _justifyContent;
-
-  var align = props.align,
-      orientation = props.orientation,
-      customStylesheet = props.stylesheet,
-      variant = props.variant;
-
-
-  var justifyContent = (_justifyContent = {}, _defineProperty(_justifyContent, alignments.LEFT, "flex-start"), _defineProperty(_justifyContent, alignments.CENTER, "center"), _defineProperty(_justifyContent, alignments.RIGHT, "flex-end"), _justifyContent);
-
-  var styles = {
+function stylesheet(props, themeData) {
+  const {
+    align,
+    orientation,
+    stylesheet: customStylesheet,
+    variant
+  } = props;
+  const justifyContent = {
+    [alignments.LEFT]: "flex-start",
+    [alignments.CENTER]: "center",
+    [alignments.RIGHT]: "flex-end"
+  };
+  const styles = {
     wrapper: {
@@ -1001,3 +1067,3 @@ display: "flex",
     },
-    tabsWrapper: _extends$2({
+    tabsWrapper: _objectSpread2({
       boxSizing: "border-box",
@@ -1010,5 +1076,4 @@ flexGrow: 0,
       justifyContent: justifyContent[align],
-      borderBottom: variant === variants.UNDERLINE ? themeData["tabs.underline.wrapper.borderBottomWidth"] + " solid " + themeData["tabs.underline.wrapper.borderBottomColor"] : 0,
+      borderBottom: variant === variants.UNDERLINE ? `${themeData["tabs.underline.wrapper.borderBottomWidth"]} solid ${themeData["tabs.underline.wrapper.borderBottomColor"]}` : 0,
       backgroundColor: getBackgroundColor(variant, themeData)
-
     }, orientation === orientations.VERTICAL && {
@@ -1028,33 +1093,32 @@ flexDirection: "column",
 
-function _objectWithoutProperties$3(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 _excluded$1 = ["align", "children", "orientation", "stylesheet", "variant"];
 function TabsPresenter(_ref) {
-  var align = _ref.align,
-      children = _ref.children,
-      orientation = _ref.orientation,
-      customStylesheet = _ref.stylesheet,
-      variant = _ref.variant,
-      otherProps = _objectWithoutProperties$3(_ref, ["align", "children", "orientation", "stylesheet", "variant"]);
+  let {
+    align,
+    children,
+    orientation,
+    stylesheet: customStylesheet,
+    variant
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded$1);
 
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref2) {
-      var resolvedRoles = _ref2.resolvedRoles;
-
-      var styles = stylesheet$1({ align: align, orientation: orientation, stylesheet: customStylesheet, variant: variant }, resolvedRoles);
-
-      var className = otherProps.className;
-
-      var customClassName = createCustomClassNames(className, "tabs");
-
-      return React.createElement(
-        "ul",
-        { className: cx(css(styles.tabsWrapper), customClassName) },
-        children
-      );
-    }
-  );
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref2 => {
+    let {
+      resolvedRoles
+    } = _ref2;
+    const styles = stylesheet({
+      align,
+      orientation,
+      stylesheet: customStylesheet,
+      variant
+    }, resolvedRoles);
+    const {
+      className
+    } = otherProps;
+    const customClassName = createCustomClassNames(className, "tabs");
+    return /*#__PURE__*/React.createElement("ul", {
+      className: cx(css(styles.tabsWrapper), customClassName)
+    }, children);
+  });
 }
-
 TabsPresenter.propTypes = {
@@ -1067,3 +1131,2 @@ align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
 };
-
 TabsPresenter.defaultProps = {
@@ -1134,20 +1197,21 @@ align: alignments.LEFT,
 
-function _objectWithoutProperties$4(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 _excluded = ["children", "stylesheet"];
 function ContentPresenter(_ref) {
-  var children = _ref.children,
-      customStylesheet = _ref.stylesheet,
-      otherProps = _objectWithoutProperties$4(_ref, ["children", "stylesheet"]);
+  let {
+    children,
+    stylesheet: customStylesheet
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  var className = otherProps.className;
-
-  var styles = stylesheet({ stylesheet: customStylesheet }, {});
-  var customClassName = createCustomClassNames(className, "content");
-  return React.createElement(
-    "div",
-    { className: cx(css(styles.content), customClassName) },
-    children
-  );
+  const {
+    className
+  } = otherProps;
+  const styles = stylesheet$1({
+    stylesheet: customStylesheet
+  }, {});
+  const customClassName = createCustomClassNames(className, "content");
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(css(styles.content), customClassName)
+  }, children);
 }
-
 ContentPresenter.propTypes = {
@@ -1178,9 +1242,4 @@ children: PropTypes.node,
 
-var _extends$3 = 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; };
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-var FIRST_TAB_INDEX = 0;
-var DEFAULT_HOVERED_TAB_INDEX = -1;
-
+const FIRST_TAB_INDEX = 0;
+const DEFAULT_HOVERED_TAB_INDEX = -1;
 /**
@@ -1218,12 +1277,16 @@ * @typedef {Object} TabMeta
  */
+
 function createTabs(children) {
-  return Children.toArray(children).reduce(function (result, child) {
-    var type = child.type,
-        key = child.key,
-        _child$props = child.props,
-        props = _child$props === undefined ? {} : _child$props;
+  return Children.toArray(children).reduce((result, child) => {
+    const {
+      type,
+      key,
+      props = {}
+    } = child;
 
-
     if (type === Tab) {
-      result.push({ key: key, props: props });
+      result.push({
+        key,
+        props
+      });
     }
@@ -1234,3 +1297,2 @@
 }
-
 /**
@@ -1240,2 +1302,4 @@ * @param {TabsProps} tabsProps
  */
+
+
 function findInitialStateActiveTab(tabsProps) {
@@ -1246,6 +1310,9 @@ if (tabsProps.defaultActiveTabIndex !== undefined) {
 
-  var tabIndexWithActiveProp = createTabs(tabsProps.children).findIndex(function (_ref) {
-    var props = _ref.props;
+  const tabIndexWithActiveProp = createTabs(tabsProps.children).findIndex(_ref => {
+    let {
+      props
+    } = _ref;
     return props.active;
   });
+
   if (tabIndexWithActiveProp >= 0) {
@@ -1258,28 +1325,8 @@ return tabIndexWithActiveProp;
 
-var Tabs = function Tabs(props) {
-  var _useState = useState(findInitialStateActiveTab(props)),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeTabIndex = _useState2[0],
-      setActiveTabIndex = _useState2[1];
-
-  var _useState3 = useState(DEFAULT_HOVERED_TAB_INDEX),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hoveredTabIndex = _useState4[0],
-      setHoveredTabIndex = _useState4[1];
-
-  var _useState5 = useState(alignments.LEFT),
-      _useState6 = _slicedToArray(_useState5, 2),
-      effectiveAlign = _useState6[0],
-      setEffectiveAlign = _useState6[1];
-
-  var _useState7 = useState(true),
-      _useState8 = _slicedToArray(_useState7, 2),
-      effectiveShowTabDivider = _useState8[0],
-      setEffectiveShowTabDivider = _useState8[1];
-
-  var _useState9 = useState(orientations.HORIZONTAL),
-      _useState10 = _slicedToArray(_useState9, 2),
-      effectiveOrientation = _useState10[0],
-      setEffectiveOrientation = _useState10[1];
-
+const Tabs = props => {
+  const [activeTabIndex, setActiveTabIndex] = useState(findInitialStateActiveTab(props));
+  const [hoveredTabIndex, setHoveredTabIndex] = useState(DEFAULT_HOVERED_TAB_INDEX);
+  const [effectiveAlign, setEffectiveAlign] = useState(alignments.LEFT);
+  const [effectiveShowTabDivider, setEffectiveShowTabDivider] = useState(true);
+  const [effectiveOrientation, setEffectiveOrientation] = useState(orientations.HORIZONTAL);
   /**
@@ -1290,9 +1337,10 @@ * @param {number} nextActiveTabIndex
 
+  const onTabSelection = (selectedTabIndex, _ref2) => {
+    let {
+      disabled
+    } = _ref2;
+    props.onTabChange(selectedTabIndex); // eslint-disable-next-line no-use-before-define
 
-  var onTabSelection = function onTabSelection(selectedTabIndex, _ref2) {
-    var disabled = _ref2.disabled;
+    const prevActiveTabIndex = getActiveTabIndex();
 
-    props.onTabChange(selectedTabIndex);
-    // eslint-disable-next-line no-use-before-define
-    var prevActiveTabIndex = getActiveTabIndex();
     if (!disabled && prevActiveTabIndex !== selectedTabIndex) {
@@ -1302,3 +1350,2 @@ setActiveTabIndex(selectedTabIndex);
   };
-
   /**
@@ -1309,16 +1356,13 @@ * If the activeTabIndex has been passed, use it. Otherwise, use our
    */
-  var getActiveTabIndex = function getActiveTabIndex() {
-    return props.activeTabIndex !== undefined ? props.activeTabIndex : activeTabIndex;
-  };
 
+
+  const getActiveTabIndex = () => props.activeTabIndex !== undefined ? props.activeTabIndex : activeTabIndex;
   /** @returns {TabMeta[]} */
-  var getTabs = function getTabs() {
-    return createTabs(props.children);
-  };
 
+
+  const getTabs = () => createTabs(props.children);
   /** @returns {TabMeta|undefined} */
-  var getActiveTab = function getActiveTab() {
-    return getTabs()[getActiveTabIndex()];
-  };
 
+
+  const getActiveTab = () => getTabs()[getActiveTabIndex()];
   /**
@@ -1328,14 +1372,18 @@ * @param {number} nextHoveredTabIndex
    */
-  var setHoveredTab = function setHoveredTab(nextHoveredTabIndex, _ref3) {
-    var disabled = _ref3.disabled;
 
-    var prevHoveredTabIndex = hoveredTabIndex;
+
+  const setHoveredTab = (nextHoveredTabIndex, _ref3) => {
+    let {
+      disabled
+    } = _ref3;
+    const prevHoveredTabIndex = hoveredTabIndex;
     if (disabled || prevHoveredTabIndex === nextHoveredTabIndex) return;
     setHoveredTabIndex(nextHoveredTabIndex);
   };
-
   /**
    * @param {number} index
    */
-  var removeHoveredTab = function removeHoveredTab(index) {
+
+
+  const removeHoveredTab = index => {
     if (hoveredTabIndex === index) {
@@ -1346,19 +1394,16 @@ setHoveredTabIndex(DEFAULT_HOVERED_TAB_INDEX);
 
-  var createTabEventHandlers = memoize(function (index, _ref4) {
-    var disabled = _ref4.disabled;
-    return _extends$3({}, createButtonEventHandlers(function () {
-      return onTabSelection(index, { disabled: disabled });
-    }), {
-      onMouseEnter: function onMouseEnter() {
-        return setHoveredTab(index, { disabled: disabled });
-      },
-      onMouseLeave: function onMouseLeave() {
-        return removeHoveredTab(index);
-      },
-      onClose: function onClose() {
-        return props.onTabClose(index);
-      }
+  const createTabEventHandlers = memoize((index, _ref4) => {
+    let {
+      disabled
+    } = _ref4;
+    return _objectSpread2(_objectSpread2({}, createButtonEventHandlers(() => onTabSelection(index, {
+      disabled
+    }))), {}, {
+      onMouseEnter: () => setHoveredTab(index, {
+        disabled
+      }),
+      onMouseLeave: () => removeHoveredTab(index),
+      onClose: () => props.onTabClose(index)
     });
   });
-
   /**
@@ -1369,17 +1414,24 @@ * @param {TabMeta} tab
    */
-  var renderTab = function renderTab(_ref5, index) {
-    var key = _ref5.key,
-        propsParams = _ref5.props;
-    var disabled = propsParams.disabled,
-        tabClassName = propsParams.className;
-    var variant = props.variant,
-        tabsClassName = props.className;
-    // eslint-disable-next-line no-shadow
 
-    var activeTabIndex = getActiveTabIndex();
+  const renderTab = (_ref5, index) => {
+    let {
+      key,
+      props: propsParams
+    } = _ref5;
+    const {
+      disabled,
+      className: tabClassName
+    } = propsParams;
+    const {
+      variant,
+      className: tabsClassName
+    } = props; // eslint-disable-next-line no-shadow
 
-    var showTabDivider = effectiveShowTabDivider;
+    const activeTabIndex = getActiveTabIndex();
+    let showTabDivider = effectiveShowTabDivider;
+
     if (index === activeTabIndex || index === activeTabIndex - 1) {
       showTabDivider = false;
     }
+
     if (index === hoveredTabIndex || index === hoveredTabIndex - 1) {
@@ -1389,8 +1441,8 @@ showTabDivider = false;
 
-    var className = cx(tabClassName, createCustomClassNames(tabsClassName, "tab"));
+    const className = cx(tabClassName, createCustomClassNames(tabsClassName, "tab"));
 
-    var payload = _extends$3({}, propsParams, {
-      key: key,
-      variant: variant,
-      className: className,
+    const payload = _objectSpread2(_objectSpread2({}, propsParams), {}, {
+      key,
+      variant,
+      className,
       showDivider: showTabDivider,
@@ -1400,100 +1452,101 @@ align: effectiveAlign,
       active: activeTabIndex === index
-    }, createTabEventHandlers(index, { disabled: disabled }));
+    }, createTabEventHandlers(index, {
+      disabled
+    }));
 
-    return React.createElement(Tab, payload);
+    return /*#__PURE__*/React.createElement(Tab, payload);
   };
-
   /**
    * @returns {JSX.Element}
    */
-  var renderTabs = function renderTabs() {
+
+
+  const renderTabs = () => {
     // eslint-disable-next-line react/prop-types
-    var className = props.className,
-        variant = props.variant,
-        customStylesheet = props.stylesheet;
-
-    return React.createElement(
-      TabsPresenter,
-      {
-        variant: variant,
-        align: effectiveAlign,
-        orientation: effectiveOrientation,
-        className: className,
-        stylesheet: customStylesheet
-      },
-      getTabs().map(renderTab)
-    );
+    const {
+      className,
+      variant,
+      stylesheet: customStylesheet
+    } = props;
+    return /*#__PURE__*/React.createElement(TabsPresenter, {
+      variant: variant,
+      align: effectiveAlign,
+      orientation: effectiveOrientation,
+      className: className,
+      stylesheet: customStylesheet
+    }, getTabs().map(renderTab));
   };
-
   /**
    * @returns {JSX.Element}
    */
-  var renderContent = function renderContent() {
-    // eslint-disable-next-line react/prop-types
-    var className = props.className,
-        customStylesheet = props.stylesheet;
 
-    var activeTab = getActiveTab();
 
-    return React.createElement(
-      ContentPresenter,
-      { className: className, stylesheet: customStylesheet },
-      activeTab ? activeTab.props.children : null
-    );
+  const renderContent = () => {
+    // eslint-disable-next-line react/prop-types
+    const {
+      className,
+      stylesheet: customStylesheet
+    } = props;
+    const activeTab = getActiveTab();
+    return /*#__PURE__*/React.createElement(ContentPresenter, {
+      className: className,
+      stylesheet: customStylesheet
+    }, activeTab ? activeTab.props.children : null);
   };
 
-  var styles = stylesheet$1({ orientation: effectiveOrientation });
-
-  useEffect(function () {
-    var children = props.children,
-        align = props.align,
-        variant = props.variant,
-        orientation = props.orientation,
-        showTabDivider = props.showTabDivider;
-
-    var prevActiveTabIndex = activeTabIndex;
-    var prevEffectiveAlign = effectiveAlign;
-    var prevEffectiveOrientation = effectiveOrientation;
-    var prevEffectiveShowTabDivider = effectiveShowTabDivider;
-
-    var nextTabs = createTabs(children);
-    var nextActiveTabIndex = nextTabs.findIndex(
-    // eslint-disable-next-line react/prop-types
-    function (_ref6) {
-      var props = _ref6.props;
+  const styles = stylesheet({
+    orientation: effectiveOrientation
+  });
+  useEffect(() => {
+    const {
+      children,
+      align,
+      variant,
+      orientation,
+      showTabDivider
+    } = props;
+    const prevActiveTabIndex = activeTabIndex;
+    const prevEffectiveAlign = effectiveAlign;
+    const prevEffectiveOrientation = effectiveOrientation;
+    const prevEffectiveShowTabDivider = effectiveShowTabDivider;
+    const nextTabs = createTabs(children);
+    const nextActiveTabIndex = nextTabs.findIndex( // eslint-disable-next-line react/prop-types
+    _ref6 => {
+      let {
+        props
+      } = _ref6;
       return props.active;
     });
+
     if (nextActiveTabIndex >= 0 && nextActiveTabIndex !== prevActiveTabIndex && props.defaultActiveTabIndex === undefined) {
-      setActiveTabIndex(nextActiveTabIndex);
-    }
+      setActiveTabIndex(nextActiveTabIndex); // newState.activeTabIndex = nextActiveTabIndex;
+    } // vertical tabs will only work when variant is "box"
 
-    // vertical tabs will only work when variant is "box"
-    var nextEffectiveOrientation = variant === variants.BOX ? orientation : orientations.HORIZONTAL;
+
+    const nextEffectiveOrientation = variant === variants.BOX ? orientation : orientations.HORIZONTAL;
+
     if (nextEffectiveOrientation !== prevEffectiveOrientation) {
-      setEffectiveOrientation(nextEffectiveOrientation);
-    }
+      setEffectiveOrientation(nextEffectiveOrientation); // newState.effectiveOrientation = nextEffectiveOrientation;
+    } // align prop will not take effect when orientation is "vertical" or variant is "canvas"
 
-    // align prop will not take effect when orientation is "vertical" or variant is "canvas"
-    var nextEffectiveAlign = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.CANVAS ? alignments.LEFT : align;
+
+    const nextEffectiveAlign = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.CANVAS ? alignments.LEFT : align;
+
     if (nextEffectiveAlign !== prevEffectiveAlign) {
-      setEffectiveAlign(nextEffectiveAlign);
-    }
+      setEffectiveAlign(nextEffectiveAlign); // newState.effectiveAlign = nextEffectiveAlign;
+    } // tab divider will not show when orientation is "vertical" or variant is "underline"
 
-    // tab divider will not show when orientation is "vertical" or variant is "underline"
-    var nextEffectiveShowTabDivider = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.UNDERLINE ? false : showTabDivider;
+
+    const nextEffectiveShowTabDivider = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.UNDERLINE ? false : showTabDivider;
+
     if (nextEffectiveShowTabDivider !== prevEffectiveShowTabDivider) {
-      setEffectiveShowTabDivider(nextEffectiveShowTabDivider);
+      setEffectiveShowTabDivider(nextEffectiveShowTabDivider); // newState.effectiveShowTabDivider = nextEffectiveShowTabDivider;
     }
   }, [props]);
-
-  return React.createElement(
-    "div",
-    { className: cx(css(styles.wrapper), props.className) },
-    renderTabs(),
-    renderContent()
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(css(styles.wrapper), props.className)
+  }, renderTabs(), renderContent());
 };
 
 Tabs.displayName = "Tabs";
-
 Tabs.propTypes = {
@@ -1505,2 +1558,3 @@ /**
   activeTabIndex: PropTypes.number,
+
   /**
@@ -1512,2 +1566,3 @@ * Specify how to justify the tabs within their container
   align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
+
   /**
@@ -1517,2 +1572,3 @@ * Accepts Tab components
   children: PropTypes.node,
+
   /**
@@ -1523,2 +1579,3 @@ * Sets the initial active tab.
   defaultActiveTabIndex: PropTypes.number,
+
   /**
@@ -1528,2 +1585,3 @@ * Called when user activates a tab
   onTabChange: PropTypes.func,
+
   /**
@@ -1533,2 +1591,3 @@ * Called when user closes a tab
   onTabClose: PropTypes.func,
+
   /**
@@ -1540,2 +1599,3 @@ * The list orientation of the tabs
   orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
+
   /**
@@ -1547,2 +1607,3 @@ * Show dividers between tabs
   showTabDivider: PropTypes.bool,
+
   /**
@@ -1553,2 +1614,3 @@ * Function to modify the component's styles
   stylesheet: PropTypes.func,
+
   /**
@@ -1560,7 +1622,6 @@ * The visual variant of the tabs
 };
-
 Tabs.defaultProps = {
   align: alignments.LEFT,
-  onTabChange: function onTabChange() {},
-  onTabClose: function onTabClose() {},
+  onTabChange: () => {},
+  onTabClose: () => {},
   variant: variants.UNDERLINE,
@@ -1677,3 +1738,2 @@ orientation: orientations.HORIZONTAL,
 
-export default Tabs;
-export { Tab, alignments, variants, orientations, AVAILABLE_ALIGNMENTS, AVAILABLE_VARIANTS, AVAILABLE_ORIENTATIONS };
+export { AVAILABLE_ALIGNMENTS, AVAILABLE_ORIENTATIONS, AVAILABLE_VARIANTS, Tab, alignments, Tabs as default, orientations, variants };

build/index.js

@@ -5,16 +5,98 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
-var icons = require('@hig/icons');
-var ThemeContext = _interopDefault(require('@hig/theme-context'));
-var behaviors = require('@hig/behaviors');
+var PropTypes = require('prop-types');
 var emotion = require('emotion');
-var Typography = _interopDefault(require('@hig/typography'));
+var memoize = require('lodash.memoize');
 var utils = require('@hig/utils');
-var memoize = _interopDefault(require('lodash.memoize'));
+var behaviors = require('@hig/behaviors');
+var Typography = require('@hig/typography');
+var ThemeContext = require('@hig/theme-context');
+var icons = require('@hig/icons');
 
-var alignments = 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 memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+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 _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 alignments = Object.freeze({
   LEFT: "left",
@@ -24,4 +106,3 @@ CENTER: "center",
 });
-
-var variants = Object.freeze({
+const variants = Object.freeze({
   BOX: "box",
@@ -31,24 +112,21 @@ CANVAS: "canvas",
 });
-
-var orientations = Object.freeze({
+const orientations = Object.freeze({
   HORIZONTAL: "horizontal",
   VERTICAL: "vertical"
 });
+const AVAILABLE_ALIGNMENTS = Object.freeze(Object.values(alignments));
+const AVAILABLE_VARIANTS = Object.freeze(Object.values(variants));
+const AVAILABLE_ORIENTATIONS = Object.freeze(Object.values(orientations));
 
-var AVAILABLE_ALIGNMENTS = Object.freeze(Object.values(alignments));
-var AVAILABLE_VARIANTS = Object.freeze(Object.values(variants));
-var AVAILABLE_ORIENTATIONS = Object.freeze(Object.values(orientations));
-
-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 getHaloStyles(_ref, themeData) {
-  var active = _ref.active,
-      hasHover = _ref.hasHover,
-      hasFocus = _ref.hasFocus,
-      isPressed = _ref.isPressed,
-      variant = _ref.variant,
-      orientation = _ref.orientation,
-      disabled = _ref.disabled;
-
-  var styles = {
+  let {
+    active,
+    hasHover,
+    hasFocus,
+    isPressed,
+    variant,
+    orientation,
+    disabled
+  } = _ref;
+  let styles = {
     position: "absolute",
@@ -63,3 +141,3 @@ left: 0,
   if (variant && variant === variants.UNDERLINE) {
-    styles = _extends({}, styles, {
+    styles = _objectSpread2(_objectSpread2({}, styles), {}, {
       bottom: 0,
@@ -74,3 +152,3 @@ width: "100%",
         backgroundColor: themeData["tabs.focus.haloColor"],
-        content: "\" \"",
+        content: `" "`,
         width: "100%",
@@ -84,3 +162,3 @@ height: !disabled && hasFocus ? themeData["tabs.focus.haloWidth"] : 0,
     if (!disabled && (hasHover || active || isPressed)) {
-      styles = _extends({}, styles, {
+      styles = _objectSpread2(_objectSpread2({}, styles), {}, {
         height: themeData["tabs.focus.haloWidth"]
@@ -92,3 +170,3 @@ }, (active || isPressed) && {
   } else if (variant && variant === variants.BOX) {
-    styles = _extends({}, styles, {
+    styles = _objectSpread2(_objectSpread2({}, styles), {}, {
       top: 0,
@@ -100,2 +178,3 @@ backgroundColor: themeData["tabs.focus.haloColor"]
       styles.height = "100%";
+
       if (!disabled && hasFocus) {
@@ -106,2 +185,3 @@ styles.width = themeData["tabs.focus.haloWidth"];
       styles.width = "100%";
+
       if (!disabled && hasFocus) {
@@ -117,16 +197,20 @@ styles.height = themeData["tabs.focus.haloWidth"];
 function getTabBackground(_ref2, themeData) {
-  var active = _ref2.active,
-      hasHover = _ref2.hasHover,
-      isPressed = _ref2.isPressed,
-      variant = _ref2.variant,
-      disabled = _ref2.disabled;
+  let {
+    active,
+    hasHover,
+    isPressed,
+    variant,
+    disabled
+  } = _ref2;
 
   if (!disabled && variant && variant !== variants.UNDERLINE) {
     if (active || isPressed) {
-      return themeData["tabs." + variant + ".tab.active.backgroundColor"];
+      return themeData[`tabs.${variant}.tab.active.backgroundColor`];
     }
+
     if (hasHover) {
-      return themeData["tabs." + variant + ".tab.hover.backgroundColor"];
+      return themeData[`tabs.${variant}.tab.hover.backgroundColor`];
     }
   }
+
   return "transparent";
@@ -136,12 +220,14 @@ }
 function getContentWrapperWidth(_ref3, themeData) {
-  var label = _ref3.label,
-      icon = _ref3.icon,
-      closable = _ref3.closable;
+  let {
+    label,
+    icon,
+    closable
+  } = _ref3;
+  if (label) return "auto";
 
-  if (label) return "auto";
   if (icon && closable) {
-    return "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + " + " + themeData["tabs.closeButton.minSize"] + ")";
+    return `calc(${themeData["tabs.iconSize"]} + ${themeData["tabs.iconGutter"]} + ${themeData["tabs.closeButton.minSize"]})`;
   }
+
   if (icon) return themeData["tabs.iconSize"];
-
   return "0";
@@ -151,5 +237,6 @@ }
 function getIconColor(_ref4, themeData) {
-  var hasHover = _ref4.hasHover,
-      isPressed = _ref4.isPressed;
-
+  let {
+    hasHover,
+    isPressed
+  } = _ref4;
   if (isPressed) return themeData["tabs.closeButton.pressed.iconColor"];
@@ -160,21 +247,20 @@ if (hasHover) return themeData["tabs.closeButton.hover.iconColor"];
 
-function stylesheet(props, themeData) {
-  var active = props.active,
-      hasHover = props.hasHover,
-      isPressed = props.isPressed,
-      label = props.label,
-      icon = props.icon,
-      variant = props.variant,
-      orientation = props.orientation,
-      disabled = props.disabled,
-      closable = props.closable,
-      customStylesheet = props.stylesheet;
-
-
-  var styles = {
-    tab: _extends({
+function stylesheet$1(props, themeData) {
+  const {
+    active,
+    hasHover,
+    isPressed,
+    label,
+    icon,
+    variant,
+    orientation,
+    disabled,
+    closable,
+    stylesheet: customStylesheet
+  } = props;
+  const styles = {
+    tab: _objectSpread2({
       position: "relative",
       display: "flex",
       margin: "0"
-
     }, variant && variant === variants.UNDERLINE && {
@@ -186,3 +272,3 @@ marginRight: themeData["tabs.underline.tab.gutter"],
     }),
-    buttonWrapper: _extends({
+    buttonWrapper: _objectSpread2(_objectSpread2(_objectSpread2({
       position: "relative",
@@ -197,14 +283,12 @@ display: "flex",
       backgroundColor: getTabBackground(props, themeData),
-
       "&:focus": {
         outline: "none"
       }
-
     }, variant && variant === variants.UNDERLINE && {
-      marginBottom: "-" + themeData["tabs.underline.wrapper.borderBottomWidth"],
-      padding: "0 0 " + themeData["tabs.underline.tab.paddingBottom"] + " 0"
-    }, variant && variant === variants.BOX && {
-      padding: themeData["tabs.box.tab.paddingVertical"] + " " + themeData["tabs.box.tab.paddingHorizontal"]
-    }, variant && variant === variants.CANVAS && {
-      padding: themeData["tabs.canvas.tab.paddingVertical"] + " " + themeData["tabs.canvas.tab.paddingHorizontal"],
+      marginBottom: `-${themeData["tabs.underline.wrapper.borderBottomWidth"]}`,
+      padding: `0 0 ${themeData["tabs.underline.tab.paddingBottom"]} 0`
+    }), variant && variant === variants.BOX && {
+      padding: `${themeData["tabs.box.tab.paddingVertical"]} ${themeData["tabs.box.tab.paddingHorizontal"]}`
+    }), variant && variant === variants.CANVAS && {
+      padding: `${themeData["tabs.canvas.tab.paddingVertical"]} ${themeData["tabs.canvas.tab.paddingHorizontal"]}`,
       transform: "skewX(-23deg)",
@@ -230,8 +314,5 @@ transformOrigin: "0 100%"
       textAlign: "center",
-      paddingLeft: icon && variant && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.iconSize"] + " + " + themeData["tabs.iconGutter"] + ")" : "0",
-
-      paddingRight: closable && variant && variant !== variants.UNDERLINE ? "calc(" + themeData["tabs.closeButton.minSize"] + " + " + themeData["tabs.closeButton.gutter"] + ")" : "0",
-
+      paddingLeft: icon && variant && variant !== variants.UNDERLINE ? `calc(${themeData["tabs.iconSize"]} + ${themeData["tabs.iconGutter"]})` : "0",
+      paddingRight: closable && variant && variant !== variants.UNDERLINE ? `calc(${themeData["tabs.closeButton.minSize"]} + ${themeData["tabs.closeButton.gutter"]})` : "0",
       color: themeData["tabs.label.fontColor"],
-
       // keep same amount of space whether it's active (bold font weight)
@@ -241,3 +322,3 @@ // or not active (regular font weight)
         display: "block",
-        content: "\"" + label + "\"",
+        content: `"${label}"`,
         fontFamily: themeData["tabs.label.fontFamily"],
@@ -253,3 +334,3 @@ fontSize: themeData["tabs.label.fontSize"],
     halo: getHaloStyles(props, themeData),
-    divider: _extends({}, variant && variant !== variants.UNDERLINE && {
+    divider: _objectSpread2({}, variant && variant !== variants.UNDERLINE && {
       position: "absolute",
@@ -259,5 +340,5 @@ top: "50%",
       transform: "translateY(-50%)",
-      height: themeData["tabs." + variant + ".dividerHeight"],
-      width: themeData["tabs." + variant + ".dividerWidth"],
-      backgroundColor: themeData["tabs." + variant + ".divider.borderColor"]
+      height: themeData[`tabs.${variant}.dividerHeight`],
+      width: themeData[`tabs.${variant}.dividerWidth`],
+      backgroundColor: themeData[`tabs.${variant}.divider.borderColor`]
     }),
@@ -290,7 +371,9 @@ icon: {
       cursor: "pointer",
-
       "& svg *": {
-        fill: getIconColor({ hasHover: hasHover, isPressed: isPressed }, themeData),
-        transitionDuration: "0.3s",
-        transitionProperty: "fill"
+        fill: getIconColor({
+          hasHover,
+          isPressed
+        }, themeData),
+        transitionDuration: `0.3s`,
+        transitionProperty: `fill`
       }
@@ -311,15 +394,17 @@ },
 
-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 _excluded$4 = ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick", "stylesheet"];
 
-var TabCloseButtonPresenter = function TabCloseButtonPresenter(props) {
-  var disabled = props.disabled,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      onMouseDown = props.onMouseDown,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave,
-      onMouseUp = props.onMouseUp,
-      onClick = props.onClick,
-      customStylesheet = props.stylesheet,
-      otherProps = _objectWithoutProperties(props, ["disabled", "onBlur", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onClick", "stylesheet"]);
+const TabCloseButtonPresenter = props => {
+  const {
+    disabled,
+    onBlur,
+    onFocus,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    onClick,
+    stylesheet: customStylesheet
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$4);
 
@@ -332,59 +417,55 @@ function handleClick(event) {
 
-  return React__default.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__default.createElement(
-        ThemeContext.Consumer,
-        null,
-        function (_ref2) {
-          var resolvedRoles = _ref2.resolvedRoles,
-              metadata = _ref2.metadata;
-
-          var styles = stylesheet({ hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed, stylesheet: customStylesheet }, resolvedRoles, metadata);
-          var className = otherProps.className;
-
-          var CloseIcon = metadata.densityId === "medium-density" ? icons.CloseSUI : icons.CloseXsUI;
-
-          return React__default.createElement(
-            "button",
-            {
-              onBlur: handleBlur,
-              onFocus: handleFocus,
-              onMouseDown: handleMouseDown,
-              onMouseEnter: handleMouseEnter,
-              onMouseLeave: handleMouseLeave,
-              onMouseUp: handleMouseUp,
-              className: emotion.cx(emotion.css(styles.button), className),
-              tabIndex: "-1",
-              onClick: handleClick,
-              disabled: disabled,
-              title: "close"
-            },
-            React__default.createElement(CloseIcon, null)
-          );
-        }
-      );
-    }
-  );
+  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(ThemeContext__default["default"].Consumer, null, _ref2 => {
+      let {
+        resolvedRoles,
+        metadata
+      } = _ref2;
+      const styles = stylesheet$1({
+        hasFocus,
+        hasHover,
+        isPressed,
+        stylesheet: customStylesheet
+      }, resolvedRoles);
+      const {
+        className
+      } = otherProps;
+      const CloseIcon = metadata.densityId === "medium-density" ? icons.CloseSUI : icons.CloseXsUI;
+      return /*#__PURE__*/React__default["default"].createElement("button", {
+        className: emotion.cx(emotion.css(styles.button), className),
+        disabled: disabled,
+        onBlur: handleBlur,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onMouseDown: handleMouseDown,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseUp: handleMouseUp,
+        tabIndex: "-1",
+        title: "close",
+        type: "button"
+      }, /*#__PURE__*/React__default["default"].createElement(CloseIcon, null));
+    });
+  });
 };
 
 TabCloseButtonPresenter.displayName = "TabCloseButtonPresenter";
-
 TabCloseButtonPresenter.propTypes = {
@@ -394,35 +475,43 @@ /**
    */
-  disabled: PropTypes.bool,
+  disabled: 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
 };
@@ -499,132 +588,108 @@ TabCloseButtonPresenter.__docgenInfo = {
 
-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 _excluded$3 = ["active", "hasFocus", "hasHover", "isPressed", "label", "icon", "disabled", "closable", "variant", "orientation", "showDivider", "onBlur", "onFocus", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onClose", "stylesheet"];
 function TabPresenter(_ref) {
-  var active = _ref.active,
-      hasFocus = _ref.hasFocus,
-      hasHover = _ref.hasHover,
-      isPressed = _ref.isPressed,
-      label = _ref.label,
-      icon = _ref.icon,
-      disabled = _ref.disabled,
-      closable = _ref.closable,
-      variant = _ref.variant,
-      orientation = _ref.orientation,
-      showDivider = _ref.showDivider,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown,
-      onMouseEnter = _ref.onMouseEnter,
-      onMouseLeave = _ref.onMouseLeave,
-      onClose = _ref.onClose,
-      customStylesheet = _ref.stylesheet,
-      otherProps = _objectWithoutProperties$1(_ref, ["active", "hasFocus", "hasHover", "isPressed", "label", "icon", "disabled", "closable", "variant", "orientation", "showDivider", "onBlur", "onFocus", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onClose", "stylesheet"]);
+  let {
+    active,
+    hasFocus,
+    hasHover,
+    isPressed,
+    label,
+    icon,
+    disabled,
+    closable,
+    variant,
+    orientation,
+    showDivider,
+    onBlur,
+    onFocus,
+    onClick,
+    onKeyDown,
+    onMouseEnter,
+    onMouseLeave,
+    onClose,
+    stylesheet: customStylesheet
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded$3);
 
-  return React__default.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref2) {
-      var resolvedRoles = _ref2.resolvedRoles,
-          metadata = _ref2.metadata;
-
-      var styles = stylesheet({
-        active: active,
-        hasFocus: hasFocus,
-        hasHover: hasHover,
-        isPressed: isPressed,
-        label: label,
-        icon: icon,
-        variant: variant,
-        orientation: orientation,
-        disabled: disabled,
-        closable: closable,
-        stylesheet: customStylesheet
-      }, resolvedRoles, metadata);
-
-      var className = otherProps.className;
-
-
-      var showIcon = variant !== variants.UNDERLINE && icon;
-      var showClose = variant !== variants.UNDERLINE && closable;
-      var showHalo = variant !== variants.CANVAS;
-
-      var buttonClassName = utils.createCustomClassNames(otherProps.className, "button");
-
-      var iconClassName = utils.createCustomClassNames(otherProps.className, "icon");
-
-      var labelClassName = utils.createCustomClassNames(otherProps.className, "label");
-
-      var closeButtonClassName = utils.createCustomClassNames(otherProps.className, "close-button");
-
-      var haloClassName = utils.createCustomClassNames(otherProps.className, "halo");
-
-      var dividerClassName = utils.createCustomClassNames(otherProps.className, "divider");
-
-      return React__default.createElement(
-        "li",
-        { className: emotion.cx(emotion.css(styles.tab), className) },
-        React__default.createElement(
-          "div",
-          {
-            onBlur: onBlur,
-            onFocus: onFocus,
-            onClick: onClick,
-            onKeyDown: onKeyDown,
-            onMouseEnter: onMouseEnter,
-            onMouseLeave: onMouseLeave,
-            disabled: disabled,
-            tabIndex: disabled ? "-1" : "0",
-            role: "button",
-            className: emotion.cx(emotion.css(styles.buttonWrapper), buttonClassName)
-          },
-          React__default.createElement(
-            "div",
-            { className: emotion.css(styles.contentWrapper) },
-            showIcon && React__default.createElement(
-              "span",
-              { className: emotion.cx(emotion.css(styles.icon), iconClassName) },
-              icon
-            ),
-            React__default.createElement(
-              Typography,
-              { className: emotion.cx(emotion.css(styles.label), labelClassName) },
-              label
-            ),
-            showClose && React__default.createElement(TabCloseButtonPresenter, {
-              className: emotion.cx(emotion.css(styles.closeButton), closeButtonClassName),
-              onClick: onClose,
-              stylesheet: customStylesheet
-            })
-          ),
-          showHalo && React__default.createElement("div", { className: emotion.cx(emotion.css(styles.halo), haloClassName) }),
-          showDivider && React__default.createElement("div", { className: emotion.cx(emotion.css(styles.divider), dividerClassName) })
-        )
-      );
-    }
-  );
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref2 => {
+    let {
+      resolvedRoles,
+      metadata
+    } = _ref2;
+    const styles = stylesheet$1({
+      active,
+      hasFocus,
+      hasHover,
+      isPressed,
+      label,
+      icon,
+      variant,
+      orientation,
+      disabled,
+      closable,
+      stylesheet: customStylesheet
+    }, resolvedRoles);
+    const {
+      className
+    } = otherProps;
+    const showIcon = variant !== variants.UNDERLINE && icon;
+    const showClose = variant !== variants.UNDERLINE && closable;
+    const showHalo = variant !== variants.CANVAS;
+    const buttonClassName = utils.createCustomClassNames(otherProps.className, "button");
+    const iconClassName = utils.createCustomClassNames(otherProps.className, "icon");
+    const labelClassName = utils.createCustomClassNames(otherProps.className, "label");
+    const closeButtonClassName = utils.createCustomClassNames(otherProps.className, "close-button");
+    const haloClassName = utils.createCustomClassNames(otherProps.className, "halo");
+    const dividerClassName = utils.createCustomClassNames(otherProps.className, "divider");
+    return /*#__PURE__*/React__default["default"].createElement("li", {
+      className: emotion.cx(emotion.css(styles.tab), className)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      disabled: disabled,
+      tabIndex: disabled ? "-1" : "0",
+      role: "button",
+      className: emotion.cx(emotion.css(styles.buttonWrapper), buttonClassName)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.css(styles.contentWrapper)
+    }, showIcon && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: emotion.cx(emotion.css(styles.icon), iconClassName)
+    }, icon), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+      className: emotion.cx(emotion.css(styles.label), labelClassName)
+    }, label), showClose && /*#__PURE__*/React__default["default"].createElement(TabCloseButtonPresenter, {
+      className: emotion.cx(emotion.css(styles.closeButton), closeButtonClassName),
+      onClick: onClose,
+      stylesheet: customStylesheet
+    })), showHalo && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.cx(emotion.css(styles.halo), haloClassName)
+    }), showDivider && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.cx(emotion.css(styles.divider), dividerClassName)
+    })));
+  });
 }
-
 TabPresenter.propTypes = {
-  active: PropTypes.bool,
-  label: PropTypes.string,
-  icon: PropTypes.node,
-  disabled: PropTypes.bool,
-  closable: PropTypes.bool,
-  variant: PropTypes.oneOf(AVAILABLE_VARIANTS),
-  orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
-  showDivider: PropTypes.bool,
-  hasFocus: PropTypes.bool,
-  hasHover: PropTypes.bool,
-  isPressed: PropTypes.bool,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-  onClick: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onClose: PropTypes.func,
-  stylesheet: PropTypes.func
+  active: PropTypes__default["default"].bool,
+  label: PropTypes__default["default"].node,
+  icon: PropTypes__default["default"].node,
+  disabled: PropTypes__default["default"].bool,
+  closable: PropTypes__default["default"].bool,
+  variant: PropTypes__default["default"].oneOf(AVAILABLE_VARIANTS),
+  orientation: PropTypes__default["default"].oneOf(AVAILABLE_ORIENTATIONS),
+  showDivider: PropTypes__default["default"].bool,
+  hasFocus: PropTypes__default["default"].bool,
+  hasHover: PropTypes__default["default"].bool,
+  isPressed: PropTypes__default["default"].bool,
+  onBlur: PropTypes__default["default"].func,
+  onFocus: PropTypes__default["default"].func,
+  onClick: PropTypes__default["default"].func,
+  onKeyDown: PropTypes__default["default"].func,
+  onMouseEnter: PropTypes__default["default"].func,
+  onMouseLeave: PropTypes__default["default"].func,
+  onClose: PropTypes__default["default"].func,
+  stylesheet: PropTypes__default["default"].func
 };
-
 TabPresenter.defaultProps = {
@@ -648,3 +713,3 @@ variant: variants.UNDERLINE,
       "type": {
-        "name": "string"
+        "name": "node"
       },
@@ -792,70 +857,73 @@ "required": false,
 
-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$2 = ["active", "closable", "disabled", "icon", "label", "stylesheet"];
 
-function _objectWithoutProperties$2(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 Tab = props => {
+  const {
+    active,
+    closable,
+    disabled,
+    icon,
+    label,
+    stylesheet: customStylesheet
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$2);
 
-var Tab = function Tab(props) {
-  var active = props.active,
-      closable = props.closable,
-      disabled = props.disabled,
-      icon = props.icon,
-      label = props.label,
-      customStylesheet = props.stylesheet,
-      otherProps = _objectWithoutProperties$2(props, ["active", "closable", "disabled", "icon", "label", "stylesheet"]);
+  const {
+    className
+  } = otherProps;
+  const {
+    variant,
+    orientation,
+    showDivider,
+    onMouseEnter,
+    onMouseLeave,
+    handleClick,
+    handleKeyDown,
+    onClose,
+    render
+  } = otherProps;
 
-  var className = otherProps.className;
-  var variant = otherProps.variant,
-      orientation = otherProps.orientation,
-      showDivider = otherProps.showDivider,
-      onMouseEnter = otherProps.onMouseEnter,
-      onMouseLeave = otherProps.onMouseLeave,
-      handleClick = otherProps.handleClick,
-      handleKeyDown = otherProps.handleKeyDown,
-      onClose = otherProps.onClose,
-      render = otherProps.render;
-
-
   if (render) {
-    return render(_extends$1({}, props));
+    return render(_objectSpread2({}, props));
   }
 
-  return React__default.createElement(
-    behaviors.ControlBehavior,
-    { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
-    function (_ref) {
-      var hasFocus = _ref.hasFocus,
-          hasHover = _ref.hasHover,
-          isPressed = _ref.isPressed,
-          onBlur = _ref.onBlur,
-          onFocus = _ref.onFocus,
-          handleMouseEnter = _ref.onMouseEnter,
-          handleMouseLeave = _ref.onMouseLeave;
-      return React__default.createElement(TabPresenter, {
-        active: active,
-        disabled: disabled,
-        closable: closable,
-        hasFocus: hasFocus,
-        hasHover: hasHover,
-        isPressed: isPressed,
-        label: label,
-        icon: icon,
-        variant: variant,
-        orientation: orientation,
-        showDivider: showDivider,
-        onBlur: onBlur,
-        onFocus: onFocus,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        onClose: onClose,
-        className: className,
-        stylesheet: customStylesheet
-      });
-    }
-  );
+  return /*#__PURE__*/React__default["default"].createElement(behaviors.ControlBehavior, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, _ref => {
+    let {
+      hasFocus,
+      hasHover,
+      isPressed,
+      onBlur,
+      onFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    } = _ref;
+    return /*#__PURE__*/React__default["default"].createElement(TabPresenter, {
+      active: active,
+      disabled: disabled,
+      closable: closable,
+      hasFocus: hasFocus,
+      hasHover: hasHover,
+      isPressed: isPressed,
+      label: label,
+      icon: icon,
+      variant: variant,
+      orientation: orientation,
+      showDivider: showDivider,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onClose: onClose,
+      className: className,
+      stylesheet: customStylesheet
+    });
+  });
 };
 
 Tab.displayName = "Tab";
-
 Tab.propTypes = {
@@ -869,3 +937,4 @@ /**
    */
-  active: PropTypes.bool,
+  active: PropTypes__default["default"].bool,
+
   /**
@@ -875,7 +944,9 @@ * Specify if the tab will have a close button
    */
-  closable: PropTypes.bool,
+  closable: PropTypes__default["default"].bool,
+
   /**
    * Specify if the tab is disabled
    */
-  disabled: PropTypes.bool,
+  disabled: PropTypes__default["default"].bool,
+
   /**
@@ -885,13 +956,14 @@ * A @hig/icon element
    */
-  icon: PropTypes.node,
+  icon: PropTypes__default["default"].node,
+
   /**
    * Sets the label of a tab
    */
-  label: PropTypes.string,
+  label: PropTypes__default["default"].node,
+
   /**
    * Function to modify the component's styles
    */
-  stylesheet: PropTypes.func
+  stylesheet: PropTypes__default["default"].func
 };
-
 Tab.defaultProps = {
@@ -948,3 +1020,3 @@ active: false,
       "type": {
-        "name": "string"
+        "name": "node"
       },
@@ -964,6 +1036,2 @@ "required": false,
 
-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; };
-
-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 getBackgroundColor(variant, themeData) {
@@ -973,20 +1041,23 @@ if (variant === variants.BOX) {
   }
+
   if (variant === variants.CANVAS) {
     return themeData["tabs.canvas.wrapper.backgroundColor"];
   }
+
   return "transparent";
 }
 
-function stylesheet$1(props, themeData) {
-  var _justifyContent;
-
-  var align = props.align,
-      orientation = props.orientation,
-      customStylesheet = props.stylesheet,
-      variant = props.variant;
-
-
-  var justifyContent = (_justifyContent = {}, _defineProperty(_justifyContent, alignments.LEFT, "flex-start"), _defineProperty(_justifyContent, alignments.CENTER, "center"), _defineProperty(_justifyContent, alignments.RIGHT, "flex-end"), _justifyContent);
-
-  var styles = {
+function stylesheet(props, themeData) {
+  const {
+    align,
+    orientation,
+    stylesheet: customStylesheet,
+    variant
+  } = props;
+  const justifyContent = {
+    [alignments.LEFT]: "flex-start",
+    [alignments.CENTER]: "center",
+    [alignments.RIGHT]: "flex-end"
+  };
+  const styles = {
     wrapper: {
@@ -999,3 +1070,3 @@ display: "flex",
     },
-    tabsWrapper: _extends$2({
+    tabsWrapper: _objectSpread2({
       boxSizing: "border-box",
@@ -1008,5 +1079,4 @@ flexGrow: 0,
       justifyContent: justifyContent[align],
-      borderBottom: variant === variants.UNDERLINE ? themeData["tabs.underline.wrapper.borderBottomWidth"] + " solid " + themeData["tabs.underline.wrapper.borderBottomColor"] : 0,
+      borderBottom: variant === variants.UNDERLINE ? `${themeData["tabs.underline.wrapper.borderBottomWidth"]} solid ${themeData["tabs.underline.wrapper.borderBottomColor"]}` : 0,
       backgroundColor: getBackgroundColor(variant, themeData)
-
     }, orientation === orientations.VERTICAL && {
@@ -1026,41 +1096,39 @@ flexDirection: "column",
 
-function _objectWithoutProperties$3(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 _excluded$1 = ["align", "children", "orientation", "stylesheet", "variant"];
 function TabsPresenter(_ref) {
-  var align = _ref.align,
-      children = _ref.children,
-      orientation = _ref.orientation,
-      customStylesheet = _ref.stylesheet,
-      variant = _ref.variant,
-      otherProps = _objectWithoutProperties$3(_ref, ["align", "children", "orientation", "stylesheet", "variant"]);
+  let {
+    align,
+    children,
+    orientation,
+    stylesheet: customStylesheet,
+    variant
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded$1);
 
-  return React__default.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref2) {
-      var resolvedRoles = _ref2.resolvedRoles;
-
-      var styles = stylesheet$1({ align: align, orientation: orientation, stylesheet: customStylesheet, variant: variant }, resolvedRoles);
-
-      var className = otherProps.className;
-
-      var customClassName = utils.createCustomClassNames(className, "tabs");
-
-      return React__default.createElement(
-        "ul",
-        { className: emotion.cx(emotion.css(styles.tabsWrapper), customClassName) },
-        children
-      );
-    }
-  );
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref2 => {
+    let {
+      resolvedRoles
+    } = _ref2;
+    const styles = stylesheet({
+      align,
+      orientation,
+      stylesheet: customStylesheet,
+      variant
+    }, resolvedRoles);
+    const {
+      className
+    } = otherProps;
+    const customClassName = utils.createCustomClassNames(className, "tabs");
+    return /*#__PURE__*/React__default["default"].createElement("ul", {
+      className: emotion.cx(emotion.css(styles.tabsWrapper), customClassName)
+    }, children);
+  });
 }
-
 TabsPresenter.propTypes = {
-  align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
-  variant: PropTypes.oneOf(AVAILABLE_VARIANTS),
-  orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
-  children: PropTypes.node,
-  stylesheet: PropTypes.func
+  align: PropTypes__default["default"].oneOf(AVAILABLE_ALIGNMENTS),
+  variant: PropTypes__default["default"].oneOf(AVAILABLE_VARIANTS),
+  orientation: PropTypes__default["default"].oneOf(AVAILABLE_ORIENTATIONS),
+  children: PropTypes__default["default"].node,
+  stylesheet: PropTypes__default["default"].func
 };
-
 TabsPresenter.defaultProps = {
@@ -1131,23 +1199,24 @@ align: alignments.LEFT,
 
-function _objectWithoutProperties$4(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 _excluded = ["children", "stylesheet"];
 function ContentPresenter(_ref) {
-  var children = _ref.children,
-      customStylesheet = _ref.stylesheet,
-      otherProps = _objectWithoutProperties$4(_ref, ["children", "stylesheet"]);
+  let {
+    children,
+    stylesheet: customStylesheet
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  var className = otherProps.className;
-
-  var styles = stylesheet({ stylesheet: customStylesheet }, {});
-  var customClassName = utils.createCustomClassNames(className, "content");
-  return React__default.createElement(
-    "div",
-    { className: emotion.cx(emotion.css(styles.content), customClassName) },
-    children
-  );
+  const {
+    className
+  } = otherProps;
+  const styles = stylesheet$1({
+    stylesheet: customStylesheet
+  }, {});
+  const customClassName = utils.createCustomClassNames(className, "content");
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: emotion.cx(emotion.css(styles.content), customClassName)
+  }, children);
 }
-
 ContentPresenter.propTypes = {
-  children: PropTypes.node,
-  stylesheet: PropTypes.func
+  children: PropTypes__default["default"].node,
+  stylesheet: PropTypes__default["default"].func
 };
@@ -1175,9 +1244,4 @@ ContentPresenter.__docgenInfo = {
 
-var _extends$3 = 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; };
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-var FIRST_TAB_INDEX = 0;
-var DEFAULT_HOVERED_TAB_INDEX = -1;
-
+const FIRST_TAB_INDEX = 0;
+const DEFAULT_HOVERED_TAB_INDEX = -1;
 /**
@@ -1215,12 +1279,16 @@ * @typedef {Object} TabMeta
  */
+
 function createTabs(children) {
-  return React.Children.toArray(children).reduce(function (result, child) {
-    var type = child.type,
-        key = child.key,
-        _child$props = child.props,
-        props = _child$props === undefined ? {} : _child$props;
+  return React.Children.toArray(children).reduce((result, child) => {
+    const {
+      type,
+      key,
+      props = {}
+    } = child;
 
-
     if (type === Tab) {
-      result.push({ key: key, props: props });
+      result.push({
+        key,
+        props
+      });
     }
@@ -1231,3 +1299,2 @@
 }
-
 /**
@@ -1237,2 +1304,4 @@ * @param {TabsProps} tabsProps
  */
+
+
 function findInitialStateActiveTab(tabsProps) {
@@ -1243,6 +1312,9 @@ if (tabsProps.defaultActiveTabIndex !== undefined) {
 
-  var tabIndexWithActiveProp = createTabs(tabsProps.children).findIndex(function (_ref) {
-    var props = _ref.props;
+  const tabIndexWithActiveProp = createTabs(tabsProps.children).findIndex(_ref => {
+    let {
+      props
+    } = _ref;
     return props.active;
   });
+
   if (tabIndexWithActiveProp >= 0) {
@@ -1255,28 +1327,8 @@ return tabIndexWithActiveProp;
 
-var Tabs = function Tabs(props) {
-  var _useState = React.useState(findInitialStateActiveTab(props)),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeTabIndex = _useState2[0],
-      setActiveTabIndex = _useState2[1];
-
-  var _useState3 = React.useState(DEFAULT_HOVERED_TAB_INDEX),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hoveredTabIndex = _useState4[0],
-      setHoveredTabIndex = _useState4[1];
-
-  var _useState5 = React.useState(alignments.LEFT),
-      _useState6 = _slicedToArray(_useState5, 2),
-      effectiveAlign = _useState6[0],
-      setEffectiveAlign = _useState6[1];
-
-  var _useState7 = React.useState(true),
-      _useState8 = _slicedToArray(_useState7, 2),
-      effectiveShowTabDivider = _useState8[0],
-      setEffectiveShowTabDivider = _useState8[1];
-
-  var _useState9 = React.useState(orientations.HORIZONTAL),
-      _useState10 = _slicedToArray(_useState9, 2),
-      effectiveOrientation = _useState10[0],
-      setEffectiveOrientation = _useState10[1];
-
+const Tabs = props => {
+  const [activeTabIndex, setActiveTabIndex] = React.useState(findInitialStateActiveTab(props));
+  const [hoveredTabIndex, setHoveredTabIndex] = React.useState(DEFAULT_HOVERED_TAB_INDEX);
+  const [effectiveAlign, setEffectiveAlign] = React.useState(alignments.LEFT);
+  const [effectiveShowTabDivider, setEffectiveShowTabDivider] = React.useState(true);
+  const [effectiveOrientation, setEffectiveOrientation] = React.useState(orientations.HORIZONTAL);
   /**
@@ -1287,9 +1339,10 @@ * @param {number} nextActiveTabIndex
 
+  const onTabSelection = (selectedTabIndex, _ref2) => {
+    let {
+      disabled
+    } = _ref2;
+    props.onTabChange(selectedTabIndex); // eslint-disable-next-line no-use-before-define
 
-  var onTabSelection = function onTabSelection(selectedTabIndex, _ref2) {
-    var disabled = _ref2.disabled;
+    const prevActiveTabIndex = getActiveTabIndex();
 
-    props.onTabChange(selectedTabIndex);
-    // eslint-disable-next-line no-use-before-define
-    var prevActiveTabIndex = getActiveTabIndex();
     if (!disabled && prevActiveTabIndex !== selectedTabIndex) {
@@ -1299,3 +1352,2 @@ setActiveTabIndex(selectedTabIndex);
   };
-
   /**
@@ -1306,16 +1358,13 @@ * If the activeTabIndex has been passed, use it. Otherwise, use our
    */
-  var getActiveTabIndex = function getActiveTabIndex() {
-    return props.activeTabIndex !== undefined ? props.activeTabIndex : activeTabIndex;
-  };
 
+
+  const getActiveTabIndex = () => props.activeTabIndex !== undefined ? props.activeTabIndex : activeTabIndex;
   /** @returns {TabMeta[]} */
-  var getTabs = function getTabs() {
-    return createTabs(props.children);
-  };
 
+
+  const getTabs = () => createTabs(props.children);
   /** @returns {TabMeta|undefined} */
-  var getActiveTab = function getActiveTab() {
-    return getTabs()[getActiveTabIndex()];
-  };
 
+
+  const getActiveTab = () => getTabs()[getActiveTabIndex()];
   /**
@@ -1325,14 +1374,18 @@ * @param {number} nextHoveredTabIndex
    */
-  var setHoveredTab = function setHoveredTab(nextHoveredTabIndex, _ref3) {
-    var disabled = _ref3.disabled;
 
-    var prevHoveredTabIndex = hoveredTabIndex;
+
+  const setHoveredTab = (nextHoveredTabIndex, _ref3) => {
+    let {
+      disabled
+    } = _ref3;
+    const prevHoveredTabIndex = hoveredTabIndex;
     if (disabled || prevHoveredTabIndex === nextHoveredTabIndex) return;
     setHoveredTabIndex(nextHoveredTabIndex);
   };
-
   /**
    * @param {number} index
    */
-  var removeHoveredTab = function removeHoveredTab(index) {
+
+
+  const removeHoveredTab = index => {
     if (hoveredTabIndex === index) {
@@ -1343,19 +1396,16 @@ setHoveredTabIndex(DEFAULT_HOVERED_TAB_INDEX);
 
-  var createTabEventHandlers = memoize(function (index, _ref4) {
-    var disabled = _ref4.disabled;
-    return _extends$3({}, utils.createButtonEventHandlers(function () {
-      return onTabSelection(index, { disabled: disabled });
-    }), {
-      onMouseEnter: function onMouseEnter() {
-        return setHoveredTab(index, { disabled: disabled });
-      },
-      onMouseLeave: function onMouseLeave() {
-        return removeHoveredTab(index);
-      },
-      onClose: function onClose() {
-        return props.onTabClose(index);
-      }
+  const createTabEventHandlers = memoize__default["default"]((index, _ref4) => {
+    let {
+      disabled
+    } = _ref4;
+    return _objectSpread2(_objectSpread2({}, utils.createButtonEventHandlers(() => onTabSelection(index, {
+      disabled
+    }))), {}, {
+      onMouseEnter: () => setHoveredTab(index, {
+        disabled
+      }),
+      onMouseLeave: () => removeHoveredTab(index),
+      onClose: () => props.onTabClose(index)
     });
   });
-
   /**
@@ -1366,17 +1416,24 @@ * @param {TabMeta} tab
    */
-  var renderTab = function renderTab(_ref5, index) {
-    var key = _ref5.key,
-        propsParams = _ref5.props;
-    var disabled = propsParams.disabled,
-        tabClassName = propsParams.className;
-    var variant = props.variant,
-        tabsClassName = props.className;
-    // eslint-disable-next-line no-shadow
 
-    var activeTabIndex = getActiveTabIndex();
+  const renderTab = (_ref5, index) => {
+    let {
+      key,
+      props: propsParams
+    } = _ref5;
+    const {
+      disabled,
+      className: tabClassName
+    } = propsParams;
+    const {
+      variant,
+      className: tabsClassName
+    } = props; // eslint-disable-next-line no-shadow
 
-    var showTabDivider = effectiveShowTabDivider;
+    const activeTabIndex = getActiveTabIndex();
+    let showTabDivider = effectiveShowTabDivider;
+
     if (index === activeTabIndex || index === activeTabIndex - 1) {
       showTabDivider = false;
     }
+
     if (index === hoveredTabIndex || index === hoveredTabIndex - 1) {
@@ -1386,8 +1443,8 @@ showTabDivider = false;
 
-    var className = emotion.cx(tabClassName, utils.createCustomClassNames(tabsClassName, "tab"));
+    const className = emotion.cx(tabClassName, utils.createCustomClassNames(tabsClassName, "tab"));
 
-    var payload = _extends$3({}, propsParams, {
-      key: key,
-      variant: variant,
-      className: className,
+    const payload = _objectSpread2(_objectSpread2({}, propsParams), {}, {
+      key,
+      variant,
+      className,
       showDivider: showTabDivider,
@@ -1397,100 +1454,101 @@ align: effectiveAlign,
       active: activeTabIndex === index
-    }, createTabEventHandlers(index, { disabled: disabled }));
+    }, createTabEventHandlers(index, {
+      disabled
+    }));
 
-    return React__default.createElement(Tab, payload);
+    return /*#__PURE__*/React__default["default"].createElement(Tab, payload);
   };
-
   /**
    * @returns {JSX.Element}
    */
-  var renderTabs = function renderTabs() {
+
+
+  const renderTabs = () => {
     // eslint-disable-next-line react/prop-types
-    var className = props.className,
-        variant = props.variant,
-        customStylesheet = props.stylesheet;
-
-    return React__default.createElement(
-      TabsPresenter,
-      {
-        variant: variant,
-        align: effectiveAlign,
-        orientation: effectiveOrientation,
-        className: className,
-        stylesheet: customStylesheet
-      },
-      getTabs().map(renderTab)
-    );
+    const {
+      className,
+      variant,
+      stylesheet: customStylesheet
+    } = props;
+    return /*#__PURE__*/React__default["default"].createElement(TabsPresenter, {
+      variant: variant,
+      align: effectiveAlign,
+      orientation: effectiveOrientation,
+      className: className,
+      stylesheet: customStylesheet
+    }, getTabs().map(renderTab));
   };
-
   /**
    * @returns {JSX.Element}
    */
-  var renderContent = function renderContent() {
-    // eslint-disable-next-line react/prop-types
-    var className = props.className,
-        customStylesheet = props.stylesheet;
 
-    var activeTab = getActiveTab();
 
-    return React__default.createElement(
-      ContentPresenter,
-      { className: className, stylesheet: customStylesheet },
-      activeTab ? activeTab.props.children : null
-    );
+  const renderContent = () => {
+    // eslint-disable-next-line react/prop-types
+    const {
+      className,
+      stylesheet: customStylesheet
+    } = props;
+    const activeTab = getActiveTab();
+    return /*#__PURE__*/React__default["default"].createElement(ContentPresenter, {
+      className: className,
+      stylesheet: customStylesheet
+    }, activeTab ? activeTab.props.children : null);
   };
 
-  var styles = stylesheet$1({ orientation: effectiveOrientation });
-
-  React.useEffect(function () {
-    var children = props.children,
-        align = props.align,
-        variant = props.variant,
-        orientation = props.orientation,
-        showTabDivider = props.showTabDivider;
-
-    var prevActiveTabIndex = activeTabIndex;
-    var prevEffectiveAlign = effectiveAlign;
-    var prevEffectiveOrientation = effectiveOrientation;
-    var prevEffectiveShowTabDivider = effectiveShowTabDivider;
-
-    var nextTabs = createTabs(children);
-    var nextActiveTabIndex = nextTabs.findIndex(
-    // eslint-disable-next-line react/prop-types
-    function (_ref6) {
-      var props = _ref6.props;
+  const styles = stylesheet({
+    orientation: effectiveOrientation
+  });
+  React.useEffect(() => {
+    const {
+      children,
+      align,
+      variant,
+      orientation,
+      showTabDivider
+    } = props;
+    const prevActiveTabIndex = activeTabIndex;
+    const prevEffectiveAlign = effectiveAlign;
+    const prevEffectiveOrientation = effectiveOrientation;
+    const prevEffectiveShowTabDivider = effectiveShowTabDivider;
+    const nextTabs = createTabs(children);
+    const nextActiveTabIndex = nextTabs.findIndex( // eslint-disable-next-line react/prop-types
+    _ref6 => {
+      let {
+        props
+      } = _ref6;
       return props.active;
     });
+
     if (nextActiveTabIndex >= 0 && nextActiveTabIndex !== prevActiveTabIndex && props.defaultActiveTabIndex === undefined) {
-      setActiveTabIndex(nextActiveTabIndex);
-    }
+      setActiveTabIndex(nextActiveTabIndex); // newState.activeTabIndex = nextActiveTabIndex;
+    } // vertical tabs will only work when variant is "box"
 
-    // vertical tabs will only work when variant is "box"
-    var nextEffectiveOrientation = variant === variants.BOX ? orientation : orientations.HORIZONTAL;
+
+    const nextEffectiveOrientation = variant === variants.BOX ? orientation : orientations.HORIZONTAL;
+
     if (nextEffectiveOrientation !== prevEffectiveOrientation) {
-      setEffectiveOrientation(nextEffectiveOrientation);
-    }
+      setEffectiveOrientation(nextEffectiveOrientation); // newState.effectiveOrientation = nextEffectiveOrientation;
+    } // align prop will not take effect when orientation is "vertical" or variant is "canvas"
 
-    // align prop will not take effect when orientation is "vertical" or variant is "canvas"
-    var nextEffectiveAlign = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.CANVAS ? alignments.LEFT : align;
+
+    const nextEffectiveAlign = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.CANVAS ? alignments.LEFT : align;
+
     if (nextEffectiveAlign !== prevEffectiveAlign) {
-      setEffectiveAlign(nextEffectiveAlign);
-    }
+      setEffectiveAlign(nextEffectiveAlign); // newState.effectiveAlign = nextEffectiveAlign;
+    } // tab divider will not show when orientation is "vertical" or variant is "underline"
 
-    // tab divider will not show when orientation is "vertical" or variant is "underline"
-    var nextEffectiveShowTabDivider = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.UNDERLINE ? false : showTabDivider;
+
+    const nextEffectiveShowTabDivider = nextEffectiveOrientation === orientations.VERTICAL || variant === variants.UNDERLINE ? false : showTabDivider;
+
     if (nextEffectiveShowTabDivider !== prevEffectiveShowTabDivider) {
-      setEffectiveShowTabDivider(nextEffectiveShowTabDivider);
+      setEffectiveShowTabDivider(nextEffectiveShowTabDivider); // newState.effectiveShowTabDivider = nextEffectiveShowTabDivider;
     }
   }, [props]);
-
-  return React__default.createElement(
-    "div",
-    { className: emotion.cx(emotion.css(styles.wrapper), props.className) },
-    renderTabs(),
-    renderContent()
-  );
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: emotion.cx(emotion.css(styles.wrapper), props.className)
+  }, renderTabs(), renderContent());
 };
 
 Tabs.displayName = "Tabs";
-
 Tabs.propTypes = {
@@ -1501,3 +1559,4 @@ /**
    */
-  activeTabIndex: PropTypes.number,
+  activeTabIndex: PropTypes__default["default"].number,
+
   /**
@@ -1508,7 +1567,9 @@ * Specify how to justify the tabs within their container
   // eslint-disable-next-line react/no-unused-prop-types
-  align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
+  align: PropTypes__default["default"].oneOf(AVAILABLE_ALIGNMENTS),
+
   /**
    * Accepts Tab components
    */
-  children: PropTypes.node,
+  children: PropTypes__default["default"].node,
+
   /**
@@ -1518,11 +1579,14 @@ * Sets the initial active tab.
    */
-  defaultActiveTabIndex: PropTypes.number,
+  defaultActiveTabIndex: PropTypes__default["default"].number,
+
   /**
    * Called when user activates a tab
    */
-  onTabChange: PropTypes.func,
+  onTabChange: PropTypes__default["default"].func,
+
   /**
    * Called when user closes a tab
    */
-  onTabClose: PropTypes.func,
+  onTabClose: PropTypes__default["default"].func,
+
   /**
@@ -1533,3 +1597,4 @@ * The list orientation of the tabs
   // eslint-disable-next-line react/no-unused-prop-types
-  orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
+  orientation: PropTypes__default["default"].oneOf(AVAILABLE_ORIENTATIONS),
+
   /**
@@ -1540,3 +1605,4 @@ * Show dividers between tabs
   // eslint-disable-next-line react/no-unused-prop-types
-  showTabDivider: PropTypes.bool,
+  showTabDivider: PropTypes__default["default"].bool,
+
   /**
@@ -1546,3 +1612,4 @@ * Function to modify the component's styles
   // eslint-disable-next-line react/no-unused-prop-types
-  stylesheet: PropTypes.func,
+  stylesheet: PropTypes__default["default"].func,
+
   /**
@@ -1552,9 +1619,8 @@ * The visual variant of the tabs
   // eslint-disable-next-line react/no-unused-prop-types
-  variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
+  variant: PropTypes__default["default"].oneOf(AVAILABLE_VARIANTS)
 };
-
 Tabs.defaultProps = {
   align: alignments.LEFT,
-  onTabChange: function onTabChange() {},
-  onTabClose: function onTabClose() {},
+  onTabChange: () => {},
+  onTabClose: () => {},
   variant: variants.UNDERLINE,
@@ -1671,9 +1737,9 @@ orientation: orientations.HORIZONTAL,
 
-exports.default = Tabs;
+exports.AVAILABLE_ALIGNMENTS = AVAILABLE_ALIGNMENTS;
+exports.AVAILABLE_ORIENTATIONS = AVAILABLE_ORIENTATIONS;
+exports.AVAILABLE_VARIANTS = AVAILABLE_VARIANTS;
 exports.Tab = Tab;
 exports.alignments = alignments;
+exports["default"] = Tabs;
+exports.orientations = orientations;
 exports.variants = variants;
-exports.orientations = orientations;
-exports.AVAILABLE_ALIGNMENTS = AVAILABLE_ALIGNMENTS;
-exports.AVAILABLE_VARIANTS = AVAILABLE_VARIANTS;
-exports.AVAILABLE_ORIENTATIONS = AVAILABLE_ORIENTATIONS;

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/tabs-v2.2.0](https://github.com/Autodesk/hig/compare/@hig/tabs@2.1.0...@hig/tabs@2.2.0) (2022-08-17)
+
+
+### Features
+
+* Tab label to accept a node ([b4c62e6](https://github.com/Autodesk/hig/commit/b4c62e6))
+
 # [@hig/tabs-v2.1.0](https://github.com/Autodesk/hig/compare/@hig/tabs@2.0.0...@hig/tabs@2.1.0) (2022-01-24)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/tabs",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "HIG Tabs",
@@ -21,3 +21,3 @@ "author": "Autodesk Inc.",
     "@hig/behaviors": "^2.1.0",
-    "@hig/icons": "^4.1.0",
+    "@hig/icons": "^4.1.2",
     "@hig/typography": "^2.1.0",
@@ -27,8 +27,7 @@ "@hig/utils": "^0.4.1",
     "lodash.memoize": "^4.1.2",
-    "prop-types": "^15.7.1",
-    "react-lifecycles-compat": "^3.0.4"
+    "prop-types": "^15.7.1"
   },
   "peerDependencies": {
-    "@hig/theme-context": "^4.1.0",
-    "@hig/theme-data": "^2.23.0",
+    "@hig/theme-context": "^4.2.0",
+    "@hig/theme-data": "^3.1.0",
     "react": "^17.0.0"
@@ -35,0 +34,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

Dependency count

10

decreased by-9.09%

Lines of code

3089

increased by4.78%

Worsened metrics

Total package byte prevSize

98052

decreased by-5.53%

Dependency changes

• - Removedreact-lifecycles-compat@^3.0.4

• - Removed@hig/theme-data@2.26.0(transitive)

• - Removedreact-lifecycles-compat@3.0.4(transitive)

• Updated@hig/icons@^4.1.2