@sproutsocial/racine 20.15.0 → 20.17.0

package/codemods/migrate-2.x-to-3.x.js

@@ -2,7 +2,7 @@ module.exports = function transformer(file, api) {
   const j = api.jscodeshift;
   const t = j(file.source).find(j.JSXOpeningElement, {
     name: {
-      name: 'Text',
+      name: "Text",
     },
   });
 
@@ -10,11 +10,12 @@ module.exports = function transformer(file, api) {
     const attrs = j(textPath).find(j.JSXAttribute);
     const hasTagOrAsAttribute =
       !!attrs.length &&
-      !!attrs.filter(({node}) => ['as', 'tag'].includes(node.name.name)).length;
+      !!attrs.filter(({ node }) => ["as", "tag"].includes(node.name.name))
+        .length;
 
     // Insert as="div" if as/tag prop is missing
     if (!hasTagOrAsAttribute) {
-      const asProp = j.jsxAttribute(j.jsxIdentifier('as'), j.literal('div'));
+      const asProp = j.jsxAttribute(j.jsxIdentifier("as"), j.literal("div"));
 
       if (!attrs.length) {
         textPath.node.attributes = [asProp];
@@ -24,19 +25,19 @@ module.exports = function transformer(file, api) {
     }
 
     attrs.forEach((path) => {
-      const {node} = path;
+      const { node } = path;
 
       // Rename tag -> as
-      if (node.name.name === 'tag') {
-        node.name.name = 'as';
+      if (node.name.name === "tag") {
+        node.name.name = "as";
       }
 
       // Rename size -> fontSize
-      if (node.name.name === 'size' || node.name.name === 'fontSize') {
-        node.name.name = 'fontSize';
+      if (node.name.name === "size" || node.name.name === "fontSize") {
+        node.name.name = "fontSize";
         if (
           node.value.type === j.Literal.name &&
-          node.value.value !== 'inherit'
+          node.value.value !== "inherit"
         ) {
           node.value = j.jsxExpressionContainer(
             j.literal(Number(node.value.value))
@@ -45,38 +46,38 @@ module.exports = function transformer(file, api) {
       }
 
       // Rename weight -> fontWeight
-      if (node.name.name === 'weight') {
-        node.name.name = 'fontWeight';
+      if (node.name.name === "weight") {
+        node.name.name = "fontWeight";
         if (
-          node.value.value === '600' ||
-          node.value.value === 'bold' ||
-          node.value.value === 'semibold'
+          node.value.value === "600" ||
+          node.value.value === "bold" ||
+          node.value.value === "semibold"
         ) {
-          node.value = j.literal('semibold');
+          node.value = j.literal("semibold");
         } else {
-          node.value = j.literal('normal');
+          node.value = j.literal("normal");
         }
       }
 
       // Rename isTruncated -> truncated
-      if (node.name.name === 'isTruncated') {
-        node.name.name = 'truncated';
+      if (node.name.name === "isTruncated") {
+        node.name.name = "truncated";
       }
 
       // Rename overflow='breakWord' -> breakWord
-      if (node.name.name === 'overflow') {
-        if (node.value.value === 'breakWord') {
-          node.name.name = 'breakWord';
-          node.value = '';
+      if (node.name.name === "overflow") {
+        if (node.value.value === "breakWord") {
+          node.name.name = "breakWord";
+          node.value = "";
         } else {
           path.prune();
         }
       }
 
       // Rename isItalicized -> fontStyle='italics'
-      if (node.name.name === 'isItalicized') {
-        const italicValue = 'italic';
-        node.name.name = 'fontStyle';
+      if (node.name.name === "isItalicized") {
+        const italicValue = "italic";
+        node.name.name = "fontStyle";
 
         if (node.value) {
           if (node.value.type === j.Literal.name) {
@@ -93,7 +94,7 @@ module.exports = function transformer(file, api) {
                 j.conditionalExpression(
                   node.value.expression,
                   j.literal(italicValue),
-                  j.identifier('undefined')
+                  j.identifier("undefined")
                 )
               );
             } else {
@@ -110,11 +111,11 @@ module.exports = function transformer(file, api) {
     const updatedAttrs = j(textPath).find(j.JSXAttribute);
     const hasFontSizeAttribute =
       !!updatedAttrs.length &&
-      !!updatedAttrs.filter(({node}) => node.name.name === 'fontSize').length;
+      !!updatedAttrs.filter(({ node }) => node.name.name === "fontSize").length;
 
     if (!hasFontSizeAttribute) {
       const fontSizeProp = j.jsxAttribute(
-        j.jsxIdentifier('fontSize'),
+        j.jsxIdentifier("fontSize"),
         j.jsxExpressionContainer(j.literal(200))
       );
       if (!updatedAttrs.length) {
@@ -128,5 +129,5 @@ module.exports = function transformer(file, api) {
     }
   });
 
-  return t.toSource({quote: 'single'});
+  return t.toSource({ quote: "single" });
 };

package/commonjs/Avatar/Avatar.js

@@ -26,7 +26,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
 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; }
-var defaultType = 'neutral';
+var defaultType = "neutral";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 var AvatarText = (0, _styledComponents.default)(function (_ref) {
@@ -53,45 +53,45 @@ var Container = (0, _styledComponents.default)(_Box.default).withConfig({
     bg = _ref3.bg,
     $src = _ref3.$src,
     borderColor = _ref3.borderColor;
-  return (0, _styledComponents.css)(["background:", ";border:", ";border-color:", ";color:", ";"], bg ? bg : theme.colors.container.background.decorative[type], $src ? 'none' : "1px solid", borderColor ? borderColor : theme.colors.container.border.decorative[type], theme.colors.text.decorative[type]);
+  return (0, _styledComponents.css)(["background:", ";border:", ";border-color:", ";color:", ";"], bg ? bg : theme.colors.container.background.decorative[type], $src ? "none" : "1px solid", borderColor ? borderColor : theme.colors.container.border.decorative[type], theme.colors.text.decorative[type]);
 });
 var getInitials = function getInitials(name) {
-  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '?';
-  if (!name || typeof name !== 'string') return fallback;
-  return name.replace(/\s+/, ' ').split(' ') // Repeated spaces results in empty strings
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "?";
+  if (!name || typeof name !== "string") return fallback;
+  return name.replace(/\s+/, " ").split(" ") // Repeated spaces results in empty strings
   .slice(0, 2).map(function (v) {
     return v && v[0].toUpperCase();
   }) // Watch out for empty strings
-  .join('');
+  .join("");
 };
 var getAvatarColor = exports.getAvatarColor = function getAvatarColor(name, type) {
-  if (type !== 'auto') {
+  if (type !== "auto") {
     return type;
   }
-  var colors = ['purple', 'green', 'blue', 'yellow', 'red', 'orange'];
+  var colors = ["purple", "green", "blue", "yellow", "red", "orange"];
 
   // Condense the avatar name down into a number
-  var seed = name.split('').reduce(function (seed, char) {
+  var seed = name.split("").reduce(function (seed, char) {
     return seed + char.charCodeAt(0);
   }, 0);
 
   // Use that seed modulo the number of available colors to generate
   // a "random" color value which will always be consistent
   // for a given string. As a failsafe, return neutral (this should never happen).
-  return colors[seed % colors.length] || 'neutral';
+  return colors[seed % colors.length] || "neutral";
 };
 var Avatar = exports.Avatar = function Avatar(_ref4) {
   var _ref4$appearance = _ref4.appearance,
-    appearance = _ref4$appearance === void 0 ? 'circle' : _ref4$appearance,
+    appearance = _ref4$appearance === void 0 ? "circle" : _ref4$appearance,
     _ref4$name = _ref4.name,
-    name = _ref4$name === void 0 ? '' : _ref4$name,
+    name = _ref4$name === void 0 ? "" : _ref4$name,
     src = _ref4.src,
     _ref4$variant = _ref4.variant,
-    variant = _ref4$variant === void 0 ? 'light' : _ref4$variant,
+    variant = _ref4$variant === void 0 ? "light" : _ref4$variant,
     _ref4$type = _ref4.type,
     type = _ref4$type === void 0 ? defaultType : _ref4$type,
     _ref4$size = _ref4.size,
-    size = _ref4$size === void 0 ? '40px' : _ref4$size,
+    size = _ref4$size === void 0 ? "40px" : _ref4$size,
     bg = _ref4.bg,
     color = _ref4.color,
     rest = _objectWithoutProperties(_ref4, _excluded2);
@@ -108,12 +108,12 @@ var Avatar = exports.Avatar = function Avatar(_ref4) {
   }, [setImageFailedLoading]);
 
   // Font size for initials is half the size of the avatar, rounded down.
-  var fontSize = Math.floor(Number(size.replace('px', '')) * 0.4);
+  var fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
   return /*#__PURE__*/React.createElement(Container, _extends({
     className: (0, _classnames.default)(variant),
     size: size,
     overflow: "hidden",
-    borderRadius: appearance === 'leaf' ? '40% 0 40% 0' : '50%',
+    borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
     position: "relative",
     display: "flex",
     flexShrink: 0,

package/commonjs/Avatar/constants.flow.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AvatarColorOptions = void 0;
 var AvatarColorOptions = exports.AvatarColorOptions = Object.freeze({
-  auto: 'auto',
-  neutral: 'neutral',
-  purple: 'purple',
-  green: 'green',
-  blue: 'blue',
-  yellow: 'yellow',
-  red: 'red',
-  orange: 'orange'
+  auto: "auto",
+  neutral: "neutral",
+  purple: "purple",
+  green: "green",
+  blue: "blue",
+  yellow: "yellow",
+  red: "red",
+  orange: "orange"
 });

package/commonjs/Avatar/constants.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AvatarColorOptions = void 0;
 var AvatarColorOptions = exports.AvatarColorOptions = {
-  auto: 'auto',
-  neutral: 'neutral',
-  purple: 'purple',
-  green: 'green',
-  blue: 'blue',
-  yellow: 'yellow',
-  red: 'red',
-  orange: 'orange'
+  auto: "auto",
+  neutral: "neutral",
+  purple: "purple",
+  green: "green",
+  blue: "blue",
+  yellow: "yellow",
+  red: "red",
+  orange: "orange"
 };

package/commonjs/Badge/Badge.js

@@ -23,9 +23,9 @@ var Badge = function Badge(_ref) {
     type = _ref.type,
     tip = _ref.tip,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
+    size = _ref$size === void 0 ? "small" : _ref$size,
     _ref$badgeColor = _ref.badgeColor,
-    badgeColor = _ref$badgeColor === void 0 ? 'blue' : _ref$badgeColor,
+    badgeColor = _ref$badgeColor === void 0 ? "blue" : _ref$badgeColor,
     color = _ref.color,
     rest = _objectWithoutProperties(_ref, _excluded);
   if (children && text) {
@@ -33,12 +33,12 @@ var Badge = function Badge(_ref) {
   }
   return /*#__PURE__*/React.createElement(_styles.default, _extends({}, rest, {
     // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
-    size: size === 'default' ? 'large' : size,
+    size: size === "default" ? "large" : size,
     badgeColor: badgeColor,
     "data-tip": tip,
-    "data-qa-badge": text || '',
+    "data-qa-badge": text || "",
     "data-qa-badge-type": type,
-    "data-qa-badge-tip": tip || '',
+    "data-qa-badge-tip": tip || "",
     type: type
     // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -52,7 +52,7 @@ var Badge = function Badge(_ref) {
   }, iconName ? /*#__PURE__*/React.createElement(_Icon.default, {
     mr: 200,
     name: iconName,
-    size: size === 'small' ? 'mini' : 'small',
+    size: size === "small" ? "mini" : "small",
     "aria-hidden": true
   }) : null, children || text));
 };

package/commonjs/Badge/constants.flow.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.badgeColors = void 0;
 var badgeColors = exports.badgeColors = Object.freeze({
-  green: 'green',
-  blue: 'blue',
-  purple: 'purple',
-  yellow: 'yellow',
-  orange: 'orange',
-  red: 'red',
-  neutral: 'neutral',
-  magenta: 'magenta',
-  pink: 'pink',
-  aqua: 'aqua',
-  teal: 'teal'
+  green: "green",
+  blue: "blue",
+  purple: "purple",
+  yellow: "yellow",
+  orange: "orange",
+  red: "red",
+  neutral: "neutral",
+  magenta: "magenta",
+  pink: "pink",
+  aqua: "aqua",
+  teal: "teal"
 });

package/commonjs/Badge/constants.js

@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.legacyBadgeColors = exports.badgeColors = void 0;
 var defaultPurple = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.purple'
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.purple"
 };
 var suggestion = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.blue'
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.blue"
 };
 var passive = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.neutral'
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.neutral"
 };
 var primary = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.blue'
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.blue"
 };
 var secondary = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.yellow'
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.yellow"
 };
 var common = {
-  color: 'colors.text.inverse',
-  background: 'colors.aqua.600'
+  color: "colors.text.inverse",
+  background: "colors.aqua.600"
 };
 var approval = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.orange'
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.orange"
 };
 
 //Deprecated former "types"
@@ -48,15 +48,15 @@ var legacyBadgeColors = exports.legacyBadgeColors = {
   suggestion: suggestion
 };
 var badgeColors = exports.badgeColors = {
-  green: 'green',
-  blue: 'blue',
-  purple: 'purple',
-  yellow: 'yellow',
-  orange: 'orange',
-  red: 'red',
-  neutral: 'neutral',
-  magenta: 'magenta',
-  pink: 'pink',
-  aqua: 'aqua',
-  teal: 'teal'
+  green: "green",
+  blue: "blue",
+  purple: "purple",
+  yellow: "yellow",
+  orange: "orange",
+  red: "red",
+  neutral: "neutral",
+  magenta: "magenta",
+  pink: "pink",
+  aqua: "aqua",
+  teal: "teal"
 };

package/commonjs/Badge/styles.js

@@ -15,12 +15,12 @@ var Container = _styledComponents.default.span.withConfig({
 })(["font-family:", ";", ";border-radius:9999px;line-height:16px;display:inline-block;color:", ";background:", ";padding:", ";", ";"], function (p) {
   return p.theme.fontFamily;
 }, function (p) {
-  return p.size === 'small' ? p.theme.typography[100] : p.theme.typography[200];
+  return p.size === "small" ? p.theme.typography[100] : p.theme.typography[200];
 }, function (p) {
   return p.type ? (0, _themeGet.themeGet)(_constants.legacyBadgeColors[p.type].color) : p.theme.colors.text.body;
 }, function (p) {
   return p.type ? (0, _themeGet.themeGet)(_constants.legacyBadgeColors[p.type].background) : p.theme.colors.container.background.decorative[p.badgeColor];
 }, function (p) {
-  return p.size === 'small' ? "".concat(p.theme.space[0], " ").concat(p.theme.space[200]) : "".concat(p.theme.space[300]);
+  return p.size === "small" ? "".concat(p.theme.space[0], " ").concat(p.theme.space[200]) : "".concat(p.theme.space[300]);
 }, _systemProps.COMMON);
 var _default = exports.default = Container;

package/commonjs/Banner/Banner.js

@@ -19,43 +19,43 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 var getBannerIconName = function getBannerIconName(type) {
   switch (type) {
-    case 'success':
-      return 'circle-check-outline';
-    case 'error':
-      return 'triangle-exclamation-outline';
-    case 'warning':
-      return 'triangle-exclamation-outline';
-    case 'opportunity':
-      return 'sparkle-outline';
-    case 'info':
+    case "success":
+      return "circle-check-outline";
+    case "error":
+      return "triangle-exclamation-outline";
+    case "warning":
+      return "triangle-exclamation-outline";
+    case "opportunity":
+      return "sparkle-outline";
+    case "info":
     default:
-      return 'circle-i-outline';
+      return "circle-i-outline";
   }
 };
 var getBannerIconColor = function getBannerIconColor(type) {
   switch (type) {
-    case 'success':
-      return 'icon.success';
-    case 'error':
-      return 'icon.error';
-    case 'warning':
-      return 'icon.warning';
-    case 'opportunity':
-      return 'icon.opportunity';
-    case 'info':
+    case "success":
+      return "icon.success";
+    case "error":
+      return "icon.error";
+    case "warning":
+      return "icon.warning";
+    case "opportunity":
+      return "icon.opportunity";
+    case "info":
     default:
-      return 'icon.info';
+      return "icon.info";
   }
 };
 
 /** TODO: change to 'info' type by default in future version */
 var Banner = function Banner(_ref) {
   var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'info' : _ref$type,
+    type = _ref$type === void 0 ? "info" : _ref$type,
     text = _ref.text,
     onClose = _ref.onClose,
     _ref$closeButtonLabel = _ref.closeButtonLabel,
-    closeButtonLabel = _ref$closeButtonLabel === void 0 ? 'Close' : _ref$closeButtonLabel,
+    closeButtonLabel = _ref$closeButtonLabel === void 0 ? "Close" : _ref$closeButtonLabel,
     typeIconProps = _ref.typeIconProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_styles.default, _extends({

package/commonjs/Box/Box.js

@@ -26,5 +26,5 @@ var Box = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     color: color
   }));
 });
-Box.displayName = 'Box';
+Box.displayName = "Box";
 var _default = exports.default = Box;

package/commonjs/Breadcrumb/Breadcrumb.js

@@ -53,12 +53,12 @@ var Breadcrumb = function Breadcrumb(_ref2) {
     "aria-hidden": true
   }))), listItems.map(function (item, i) {
     // @ts-notes - item is a childNode which can be a string or number but `cloneElement` requires props
-    var itemElem = _typeof(item) === 'object' && 'props' in item ? item : /*#__PURE__*/React.createElement("span", null, "item");
+    var itemElem = _typeof(item) === "object" && "props" in item ? item : /*#__PURE__*/React.createElement("span", null, "item");
     return /*#__PURE__*/React.cloneElement(itemElem, _objectSpread(_objectSpread({}, itemElem.props), {}, {
-      'aria-current': listItems[i] === lastItem ? 'page' : undefined
+      "aria-current": listItems[i] === lastItem ? "page" : undefined
     }));
   })));
 };
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
+BreadcrumbItem.displayName = "Breadcrumb.Item";
 Breadcrumb.Item = BreadcrumbItem;
 var _default = exports.default = Breadcrumb;

package/commonjs/Breadcrumb/styles.js

@@ -9,7 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var Nav = _styledComponents.default.nav.withConfig({
   displayName: "styles__Nav",
   componentId: "sc-1d7ypr1-0"
-})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:'/';margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)::after{content:'/';color:", ";margin-left:", ";}"], function (props) {
+})(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
   return props.theme.typography[200];
 }, function (props) {
   return props.theme.fontFamily;

package/commonjs/Button/Button.js

@@ -14,14 +14,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Button = function Button(_ref) {
   var href = _ref.href,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'unstyled' : _ref$appearance,
+    appearance = _ref$appearance === void 0 ? "unstyled" : _ref$appearance,
     _ref$active = _ref.active,
     active = _ref$active === void 0 ? false : _ref$active,
     disabled = _ref.disabled,
     external = _ref.external,
     children = _ref.children,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'default' : _ref$size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
     innerRef = _ref.innerRef,
     onClick = _ref.onClick,
     title = _ref.title,
@@ -32,26 +32,26 @@ var Button = function Button(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   if (!href && external) {
     // eslint-disable-next-line no-console
-    console.warn('Warning: external prop cannot be set without a href declaration');
+    console.warn("Warning: external prop cannot be set without a href declaration");
   }
   return /*#__PURE__*/_react.default.createElement(_styles.default, _extends({
     title: title,
     active: active,
     href: href,
-    target: external ? '_blank' : undefined,
-    rel: external ? 'noopener noreferrer' : undefined,
-    as: as || (href ? 'a' : 'button'),
-    type: href ? undefined : 'button',
+    target: external ? "_blank" : undefined,
+    rel: external ? "noopener noreferrer" : undefined,
+    as: as || (href ? "a" : "button"),
+    type: href ? undefined : "button",
     "aria-disabled": disabled ? disabled : undefined,
     disabled: disabled,
     buttonSize: size,
-    appearance: appearance || 'unstyled',
+    appearance: appearance || "unstyled",
     ref: innerRef,
     onClick: onClick,
-    "data-qa-button": title || '',
+    "data-qa-button": title || "",
     "data-qa-button-isdisabled": disabled === true,
     "aria-label": ariaLabel
   }, qa, rest), children);
 };
-Button.displayName = 'Button';
+Button.displayName = "Button";
 var _default = exports.default = Button;

package/commonjs/Button/styles.js

@@ -22,7 +22,7 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.appearance === 'placeholder' ? 'dashed' : 'solid';
+  return props.appearance === "placeholder" ? "dashed" : "solid";
 }, function (props) {
   return props.theme.colors.button[props.appearance].background.base;
 }, function (props) {
@@ -32,27 +32,27 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
-  return props.buttonSize === 'default' ? "".concat(props.theme.space[300]) : "".concat(props.theme.space[350]);
+  return props.buttonSize === "default" ? "".concat(props.theme.space[300]) : "".concat(props.theme.space[350]);
 }, function (props) {
-  return props.buttonSize === 'default' ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize;
+  return props.buttonSize === "default" ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize;
 }, function (props) {
   return props.theme.colors.button[props.appearance].text.base;
 }, function (props) {
   return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {
-  return props.appearance !== 'unstyled' && "background: ".concat(props.theme.colors.button[props.appearance].background.hover);
+  return props.appearance !== "unstyled" && "background: ".concat(props.theme.colors.button[props.appearance].background.hover);
 }, function (props) {
-  return props.appearance === 'placeholder' ? props.theme.shadows.low : 'none';
+  return props.appearance === "placeholder" ? props.theme.shadows.low : "none";
 }, function (props) {
   return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {
-  return props.appearance !== 'unstyled' && "background: ".concat(props.theme.colors.button[props.appearance].background.active);
+  return props.appearance !== "unstyled" && "background: ".concat(props.theme.colors.button[props.appearance].background.active);
 }, _mixins.focusRing, function (props) {
-  return props.active && (0, _styledComponents.css)(["color:", " !important;", ";"], props.theme.colors.button[props.appearance].text.hover, props.appearance !== 'unstyled' && "background: ".concat(props.theme.colors.button[props.appearance].background.active, " !important"));
+  return props.active && (0, _styledComponents.css)(["color:", " !important;", ";"], props.theme.colors.button[props.appearance].text.hover, props.appearance !== "unstyled" && "background: ".concat(props.theme.colors.button[props.appearance].background.active, " !important"));
 }, function (props) {
   return props.disabled && _mixins.disabled;
 }, function (props) {
-  return props.appearance === 'pill' && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;background-color:transparent;", " &:focus:active,&:hover{background-color:transparent;box-shadow:inset 0px 0px 0px 1px ", ";}"], _mixins.pill, props.theme.colors.button.pill.border.hover);
+  return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;background-color:transparent;", " &:focus:active,&:hover{background-color:transparent;box-shadow:inset 0px 0px 0px 1px ", ";}"], _mixins.pill, props.theme.colors.button.pill.border.hover);
 }, _styles.default, _systemProps.LAYOUT, _systemProps.COMMON, _systemProps.FLEXBOX, _systemProps.GRID);
-Container.displayName = 'Button-Container';
+Container.displayName = "Button-Container";
 var _default = exports.default = Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}