@sproutsocial/racine 16.0.0 → 18.0.0

package/lib/Card/styles.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { border, color, flexbox, grid, layout, position, space } from 'styled-system';
+import { border, color, flexbox, grid, layout, position, space, typography } from 'styled-system';
 import { focusRing, disabled } from "../utils/mixins";
 import Icon from "../Icon";
 
@@ -58,10 +58,22 @@ export var StyledSelectedIcon = styled(Icon).withConfig({
   var $selected = _ref10.$selected;
   return $selected && "\n    opacity: 1;\n  ";
 });
+export var StyledCardLink = styled.a.withConfig({
+  displayName: "styles__StyledCardLink",
+  componentId: "sc-9tyqu4-5"
+})(["font-family:", ";font-weight:", ";color:", ";", ";", " ", ""], function (p) {
+  return p.theme.fontFamily;
+}, function (p) {
+  return p.theme.fontWeights.bold;
+}, function (p) {
+  return p.theme.colors.text.headline;
+}, function (p) {
+  return p.theme.typography[400];
+}, color, typography);
 export var StyledCard = styled.div.withConfig({
   displayName: "styles__StyledCard",
-  componentId: "sc-9tyqu4-5"
-})(["position:relative;display:flex;flex-direction:column;box-sizing:border-box;margin:0;background:", ";border:", " solid ", ";padding:", ";border-radius:", ";transition:box-shadow ", ",border ", ";&[role='link'],&[role='button'],&[role='checkbox']{cursor:pointer;}&:hover{box-shadow:", ";}&:focus{", "}", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref11) {
+  componentId: "sc-9tyqu4-6"
+})(["position:relative;display:flex;flex-direction:column;box-sizing:border-box;margin:0;background:", ";border:", " solid ", ";padding:", ";border-radius:", ";transition:box-shadow ", ",border ", ";&[role='button'],&[role='checkbox']{cursor:pointer;}", " &:hover{box-shadow:", ";}&:focus-within{", " ", ":focus{border:none;box-shadow:none;outline:none;}}&:focus{", "}", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref11) {
   var theme = _ref11.theme;
   return theme.colors.container.background.base;
 }, function (_ref12) {
@@ -84,15 +96,29 @@ export var StyledCard = styled.div.withConfig({
   var theme = _ref17.theme;
   return theme.duration.medium;
 }, function (_ref18) {
-  var theme = _ref18.theme,
-    _ref18$$elevation = _ref18.$elevation,
-    $elevation = _ref18$$elevation === void 0 ? 'low' : _ref18$$elevation;
+  var $isRoleLink = _ref18.$isRoleLink;
+  return $isRoleLink && "\n\t\tcursor: pointer;\n\t";
+}, function (_ref19) {
+  var theme = _ref19.theme,
+    _ref19$$elevation = _ref19.$elevation,
+    $elevation = _ref19$$elevation === void 0 ? 'low' : _ref19$$elevation;
   return theme.shadows[$elevation];
-}, focusRing, function (_ref19) {
-  var $disabled = _ref19.$disabled;
-  return $disabled && "\n    ".concat(disabled, "\n  ");
 }, function (_ref20) {
-  var $selected = _ref20.$selected,
-    theme = _ref20.theme;
+  var $isRoleLink = _ref20.$isRoleLink;
+  return $isRoleLink ? focusRing : null;
+}, StyledCardLink, focusRing, function (_ref21) {
+  var $disabled = _ref21.$disabled;
+  return $disabled && "\n    ".concat(disabled, "\n  ");
+}, function (_ref22) {
+  var $selected = _ref22.$selected,
+    theme = _ref22.theme;
   return $selected && "\n    border: ".concat(theme.borderWidths[500], " solid ").concat(theme.colors.container.border.selected, ";  \n  ");
-}, border, color, flexbox, grid, layout, position, space);
+}, border, color, flexbox, grid, layout, position, space);
+export var StyledCardAffordance = styled(Icon).withConfig({
+  displayName: "styles__StyledCardAffordance",
+  componentId: "sc-9tyqu4-7"
+})(["", ":hover &{transform:translateX(", ");}transition:", ";"], StyledCard, function (p) {
+  return p.theme.space[200];
+}, function (p) {
+  return p.theme.duration.medium;
+});

package/lib/Card/subComponents.js

@@ -1,11 +1,14 @@
 var _excluded = ["children"],
   _excluded2 = ["children"],
-  _excluded3 = ["children"];
+  _excluded3 = ["children"],
+  _excluded4 = ["affordance", "children", "external", "color"];
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _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; }
-import React from 'react';
-import { useChildContext } from "./utils";
-import { StyledCardContent, StyledCardHeader, StyledCardFooter, StyledSelectedIcon, SelectedIconWrapper } from "./styles";
+import React, { useContext } from 'react';
+import { useChildContext, SubComponentContext } from "./utils";
+import { StyledCardContent, StyledCardHeader, StyledCardFooter, StyledSelectedIcon, SelectedIconWrapper, StyledCardAffordance, StyledCardLink } from "./styles";
 export var CardContent = function CardContent(_ref) {
   var children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -34,4 +37,38 @@ export var SelectedIcon = function SelectedIcon(_ref4) {
     name: "circle-check",
     $selected: $selected
   }));
+};
+export var CardAffordance = function CardAffordance(_ref5) {
+  var rest = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
+  return /*#__PURE__*/React.createElement(StyledCardAffordance, _extends({}, rest, {
+    size: "mini",
+    name: "arrow-right"
+    // TODO: probably need to make this available to the top level for external links https://sprout.atlassian.net/browse/DS-2223
+    ,
+    "aria-hidden": true
+  }));
+};
+export var CardLink = function CardLink(_ref6) {
+  var affordance = _ref6.affordance,
+    children = _ref6.children,
+    _ref6$external = _ref6.external,
+    external = _ref6$external === void 0 ? false : _ref6$external,
+    color = _ref6.color,
+    rest = _objectWithoutProperties(_ref6, _excluded4);
+  var _useContext = useContext(SubComponentContext),
+    href = _useContext.href,
+    linkRef = _useContext.linkRef;
+  return /*#__PURE__*/React.createElement(StyledCardLink, _extends({}, rest, {
+    target: external ? '_blank' : undefined,
+    rel: external ? 'noreferrer' : undefined,
+    href: href,
+    ref: linkRef
+    // 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
+    // @ts-ignore
+    ,
+    color: color
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, children, affordance ? /*#__PURE__*/React.createElement(CardAffordance, {
+    ml: 300
+  }) : null));
 };

package/lib/Card/utils.js

@@ -1,11 +1,15 @@
 import { createContext, useContext } from 'react';
 import { assertIsElement } from "../utils";
-export var SubComponentContext = /*#__PURE__*/createContext(
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function () {});
+export var SubComponentContext = /*#__PURE__*/createContext({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setHasSubComponent: function setHasSubComponent() {},
+  href: '',
+  linkRef: null
+});
 export function useChildContext() {
-  var setHasSubComponent = useContext(SubComponentContext);
-  setHasSubComponent(true);
+  var _useContext = useContext(SubComponentContext),
+    setHasSubComponent = _useContext.setHasSubComponent;
+  setHasSubComponent && setHasSubComponent(true);
 }
 export var navigateTo = function navigateTo(_ref) {
   var _ref$current, _window$open;

package/lib/ChartLegend/ChartLegend.js

@@ -3,38 +3,20 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 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; }
 import * as React from 'react';
-import { THEME_MAP } from "../utils/chartColors";
-import { Text } from "../Text";
-import Container, { Label, Swatch } from "./styles";
-function getSwatchColor(theme, index) {
-  return THEME_MAP[theme.toUpperCase()][index];
-}
-function getLabels(legendLabels, theme) {
-  return legendLabels.map(function (label, i) {
-    var labelColor = label.color ? label.color : getSwatchColor(theme, i);
-    return /*#__PURE__*/React.createElement(Label, {
-      key: label.name
-    }, /*#__PURE__*/React.createElement(Swatch, {
-      bg: labelColor,
-      "data-qa-swatch": ""
-    }), /*#__PURE__*/React.createElement(Text, {
-      as: "div",
-      fontSize: 200,
-      breakWord: true
-    }, label.name));
-  });
-}
+import Container from "./styles";
+import { useChartLabels } from "./useChartLabels";
 var ChartLegend = function ChartLegend(_ref) {
   var legendLabels = _ref.legendLabels,
     stacked = _ref.stacked,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'compare' : _ref$theme,
+    theme = _ref$theme === void 0 ? 'datavizRotation' : _ref$theme,
     qa = _ref.qa,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var chartLabels = useChartLabels(legendLabels, theme);
   return /*#__PURE__*/React.createElement(Container, _extends({
     inline: !stacked,
     "data-qa-chartlegend": "",
     qa: qa
-  }, rest), getLabels(legendLabels, theme));
+  }, rest), chartLabels);
 };
 export default ChartLegend;

package/lib/ChartLegend/useChartLabels.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTheme } from 'styled-components';
+import { Label, Swatch } from "./styles";
+import { Text } from "../Text";
+var getSwatchColor = function getSwatchColor(theme, index, RacineThemeColors) {
+  var COMPARE_THEME = [RacineThemeColors.dataviz.map['1'], RacineThemeColors.dataviz.map['10'], RacineThemeColors.dataviz.map['11'], RacineThemeColors.dataviz.map['2']];
+  var CONTRAST_THEME = [RacineThemeColors.dataviz.map['1'], RacineThemeColors.dataviz.map['2'], RacineThemeColors.dataviz.map['3'], RacineThemeColors.dataviz.map['4'], RacineThemeColors.dataviz.map['5'], RacineThemeColors.dataviz.map['6'], RacineThemeColors.dataviz.map['4'], RacineThemeColors.dataviz.map['5'], RacineThemeColors.dataviz.map['6'], RacineThemeColors.dataviz.map['7'], RacineThemeColors.dataviz.map['8'], RacineThemeColors.dataviz.map['9'], RacineThemeColors.dataviz.map['10']];
+  var EXTENDED_THEME = [RacineThemeColors.dataviz.map['7'], RacineThemeColors.dataviz.map['1'], RacineThemeColors.dataviz.map['5'], RacineThemeColors.dataviz.map['11'], RacineThemeColors.dataviz.map['6'], RacineThemeColors.dataviz.map['3'], RacineThemeColors.dataviz.map['18'], RacineThemeColors.dataviz.map['8'], RacineThemeColors.dataviz.map['4'], RacineThemeColors.dataviz.map['13'], RacineThemeColors.dataviz.map['16'], RacineThemeColors.dataviz.map['10'], RacineThemeColors.dataviz.map['14'], RacineThemeColors.dataviz.map['2'], RacineThemeColors.dataviz.map['15'], RacineThemeColors.dataviz.map['12'], RacineThemeColors.dataviz.map['9'], RacineThemeColors.dataviz.map['17'], RacineThemeColors.dataviz.map['20'], RacineThemeColors.dataviz.map['19']];
+  var THEME_MAP = {
+    COMPARE: COMPARE_THEME,
+    CONTRAST: CONTRAST_THEME,
+    EXTENDED: EXTENDED_THEME,
+    DATAVIZROTATION: RacineThemeColors.dataviz.list
+  };
+  return THEME_MAP[theme.toUpperCase()][index];
+};
+export var useChartLabels = function useChartLabels(legendLabels, theme) {
+  var racineTheme = useTheme();
+  var colors = racineTheme.colors;
+  return legendLabels.map(function (label, i) {
+    var labelColor = label.color ? label.color : getSwatchColor(theme, i, colors);
+    return /*#__PURE__*/React.createElement(Label, {
+      key: label.name
+    }, /*#__PURE__*/React.createElement(Swatch, {
+      bg: labelColor,
+      "data-qa-swatch": ""
+    }), /*#__PURE__*/React.createElement(Text, {
+      as: "div",
+      fontSize: 200,
+      breakWord: true
+    }, label.name));
+  });
+};

package/lib/Icon/Icon.js

@@ -7,8 +7,9 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import iconViewBoxes from "../IconViewBoxes";
 import Box from "../Box";
-import PartnerLogo, { PartnerNames } from "../PartnerLogo";
+import PartnerLogo from "../PartnerLogo";
 import { includes } from "../utils";
+import PartnerLogoNames from "../logoNames";
 
 // TODO: get json file working in flow so this can be shared
 // import deprecatedIcons from './deprecatedIcons.json';
@@ -24,7 +25,7 @@ var Icon = function Icon(_ref) {
     color = _ref.color,
     svgProps = _ref.svgProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  if (includes(PartnerNames, name)) {
+  if (includes(PartnerLogoNames, name)) {
     // Icon's "default" size is equivalent to PartnerLogo's "small" size
     var logoSize = size === 'default' ? 'small' : size;
     var logoProps = {

package/lib/Link/Link.js

@@ -11,7 +11,8 @@ var Link = function Link(_ref) {
     disabled = _ref.disabled,
     onClick = _ref.onClick,
     as = _ref.as,
-    underline = _ref.underline,
+    _ref$underline = _ref.underline,
+    underline = _ref$underline === void 0 ? true : _ref$underline,
     _ref$qa = _ref.qa,
     qa = _ref$qa === void 0 ? {} : _ref$qa,
     rest = _objectWithoutProperties(_ref, _excluded);

package/lib/LogoViewBoxes.js

@@ -1,8 +1,12 @@
 module.exports = {
   "adobe-experience-manager-dark": "0 0 16 17",
   "adobe-experience-manager": "0 0 16 17",
+  "android-dark": "0 0 18 18",
+  "android": "0 0 18 18",
   "apple-app-store-dark": "0 0 140 140",
   "apple-app-store": "0 0 140 140",
+  "apple-dark": "0 0 18 18",
+  "apple": "0 0 18 18",
   "bigcommerce-dark": "0 0 140 140",
   "bigcommerce-lockup-dark": "0 0 291 66",
   "bigcommerce-lockup": "0 0 291 66",
@@ -29,6 +33,8 @@ module.exports = {
   "facebook": "0 0 141 139",
   "feedly-dark": "0 0 141 123",
   "feedly": "0 0 141 123",
+  "github-dark": "0 0 18 18",
+  "github": "0 0 18 18",
   "glassdoor-dark": "0 0 140 196",
   "glassdoor": "0 0 140 196",
   "google-analytics-dark": "0 0 140 160",
@@ -57,8 +63,12 @@ module.exports = {
   "microsoft-dynamics": "0 0 140 227",
   "pinterest-dark": "0 0 140 141",
   "pinterest": "0 0 140 141",
+  "reddit-alien-dark": "0 0 18 18",
+  "reddit-alien": "0 0 18 18",
   "reddit-dark": "0 0 140 140",
   "reddit": "0 0 140 140",
+  "salesforce-cloud-dark": "0 0 20 18",
+  "salesforce-cloud": "0 0 20 18",
   "salesforce-dark": "0 0 140 99",
   "salesforce": "0 0 140 99",
   "shopify-dark": "0 0 140 159",
@@ -71,6 +81,10 @@ module.exports = {
   "sproutsocial-wordmark-dark": "0 0 320 52",
   "sproutsocial-wordmark": "0 0 320 52",
   "sproutsocial": "0 0 140 174",
+  "tableau-dark": "0 0 18 18",
+  "tableau-lockup-dark": "0 0 291 56",
+  "tableau-lockup": "0 0 291 56",
+  "tableau": "0 0 18 18",
   "tiktok-dark": "0 0 140 159",
   "tiktok": "0 0 140 159",
   "tripadvisor-dark": "0 0 140 140",

package/lib/Menu/Menu.js

@@ -237,29 +237,49 @@ export var MenuRadio = function MenuRadio(props) {
     role: MENU_ITEM_ROLES.RADIO
   }, props));
 };
-export var MenuGroup = function MenuGroup(_ref2) {
-  var children = _ref2.children,
-    title = _ref2.title,
-    titleAs = _ref2.titleAs,
-    _ref2$disabled = _ref2.disabled,
-    isDisabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(Box, {
-    pl: 400,
+var MenuTitle = styled(Text).withConfig({
+  displayName: "Menu__MenuTitle",
+  componentId: "sc-1jmjosz-0"
+})(["font-weight:600;padding-left:", ";padding-top:", ";padding-bottom:", ";color:", ";"], function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.space[300];
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.space[200];
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.space[300];
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors.text.headline;
+});
+var _StyledMenuTitle = styled(MenuTitle).withConfig({
+  displayName: "Menu___StyledMenuTitle",
+  componentId: "sc-1jmjosz-1"
+})(["", ""], function (p) {
+  return p.$_css;
+});
+export var MenuGroup = function MenuGroup(_ref6) {
+  var children = _ref6.children,
+    title = _ref6.title,
+    titleAs = _ref6.titleAs,
+    _ref6$disabled = _ref6.disabled,
+    isDisabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
+    props = _objectWithoutProperties(_ref6, _excluded2);
+  var menuTitleId = uniqueId('menu-title-');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _extends({
+    p: 300,
+    role: "group",
+    "aria-labelledby": title ? menuTitleId : undefined,
     borderTop: "1px solid",
-    borderColor: "container.border.base",
-    mt: "-1px"
-  }, /*#__PURE__*/React.createElement(_StyledText, {
-    forwardedAs: titleAs || 'div',
+    borderColor: "container.border.base"
+  }, props), title && /*#__PURE__*/React.createElement(_StyledMenuTitle, {
+    id: menuTitleId,
+    role: "presentation",
     fontSize: 200,
-    fontWeight: 600,
-    mt: 350,
-    color: "text.headline",
+    forwardedAs: titleAs || 'li',
     $_css: isDisabled ? disabled : undefined
-  }, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
-    p: 300,
-    role: "group"
-  }), children));
+  }, title), children));
 };
 export var MenuDivider = function MenuDivider(props) {
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -302,12 +322,12 @@ var MenuFilterInput = function MenuFilterInput(props) {
     onBlur: handleOnBlur
   }));
 };
-var MenuItems = function MenuItems(_ref3) {
-  var children = _ref3.children,
-    role = _ref3.role,
-    multiselect = _ref3.multiselect,
-    innerRef = _ref3.innerRef,
-    props = _objectWithoutProperties(_ref3, _excluded3);
+var MenuItems = function MenuItems(_ref7) {
+  var children = _ref7.children,
+    role = _ref7.role,
+    multiselect = _ref7.multiselect,
+    innerRef = _ref7.innerRef,
+    props = _objectWithoutProperties(_ref7, _excluded3);
   var _useMenuKeyDown = useMenuKeyDown(),
     handleKeyDown = _useMenuKeyDown.handleKeyDown,
     activeDescendent = _useMenuKeyDown.activeDescendent;
@@ -327,15 +347,15 @@ var MenuItems = function MenuItems(_ref3) {
     overflow: "hidden"
   }), children);
 };
-export var Menu = function Menu(_ref4) {
-  var _ref4$role = _ref4.role,
-    role = _ref4$role === void 0 ? MENU_ROLES.MENU : _ref4$role,
-    children = _ref4.children,
-    onChange = _ref4.onChange,
-    value = _ref4.value,
-    multiselect = _ref4.multiselect,
-    innerRef = _ref4.innerRef,
-    props = _objectWithoutProperties(_ref4, _excluded4);
+export var Menu = function Menu(_ref8) {
+  var _ref8$role = _ref8.role,
+    role = _ref8$role === void 0 ? MENU_ROLES.MENU : _ref8$role,
+    children = _ref8.children,
+    onChange = _ref8.onChange,
+    value = _ref8.value,
+    multiselect = _ref8.multiselect,
+    innerRef = _ref8.innerRef,
+    props = _objectWithoutProperties(_ref8, _excluded4);
   var _useDescendants = useDescendants(),
     _useDescendants2 = _slicedToArray(_useDescendants, 2),
     descendants = _useDescendants2[0],
@@ -392,20 +412,20 @@ Menu.Divider = MenuDivider;
 Menu.FilterInput = MenuFilterInput;
 var CustomPopoutContent = styled(Popout.Content).withConfig({
   displayName: "Menu__CustomPopoutContent",
-  componentId: "sc-1jmjosz-0"
+  componentId: "sc-1jmjosz-2"
 })(["padding:0;margin-left:0;margin-right:0;"]);
-export var MenuButton = function MenuButton(_ref5) {
-  var content = _ref5.content,
-    popoutProps = _ref5.popoutProps,
-    children = _ref5.children,
-    _onClick = _ref5.onClick,
-    _ref5$closeOnItemClic = _ref5.closeOnItemClick,
-    closeOnItemClick = _ref5$closeOnItemClic === void 0 ? true : _ref5$closeOnItemClic,
-    _ref5$id = _ref5.id,
-    id = _ref5$id === void 0 ? uniqueId('MenuButton-') : _ref5$id,
-    _ref5$placement = _ref5.placement,
-    placement = _ref5$placement === void 0 ? 'bottom' : _ref5$placement,
-    props = _objectWithoutProperties(_ref5, _excluded5);
+export var MenuButton = function MenuButton(_ref9) {
+  var content = _ref9.content,
+    popoutProps = _ref9.popoutProps,
+    children = _ref9.children,
+    _onClick = _ref9.onClick,
+    _ref9$closeOnItemClic = _ref9.closeOnItemClick,
+    closeOnItemClick = _ref9$closeOnItemClic === void 0 ? true : _ref9$closeOnItemClic,
+    _ref9$id = _ref9.id,
+    id = _ref9$id === void 0 ? uniqueId('MenuButton-') : _ref9$id,
+    _ref9$placement = _ref9.placement,
+    placement = _ref9$placement === void 0 ? 'bottom' : _ref9$placement,
+    props = _objectWithoutProperties(_ref9, _excluded5);
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isOpen = _useState6[0],
@@ -445,10 +465,4 @@ export var MenuButton = function MenuButton(_ref5) {
     }
   }), children)));
 };
-export default Menu;
-var _StyledText = styled(Text).withConfig({
-  displayName: "Menu___StyledText",
-  componentId: "sc-1jmjosz-1"
-})(["", ""], function (p) {
-  return p.$_css;
-});
+export default Menu;

package/lib/Menu/styles.js

@@ -44,4 +44,4 @@ export var MenuItemContainer = styled(Box).withConfig({
 export var MenuItemsContainer = styled(Box).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "sc-168zlb1-1"
-})(["list-style-type:none;&:focus{", "}"], focusRing);
+})(["list-style-type:none;&:focus{", "}& > div[role='group']:first-of-type{border-top:none;}"], focusRing);

package/lib/Numeral/Numeral.js

@@ -1,4 +1,4 @@
-var _excluded = ["number", "locale", "format", "currency", "abbreviate", "precision", "qa"];
+var _excluded = ["number", "locale", "format", "currency", "abbreviate", "invalidNumberLabel", "precision", "qa"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -12,6 +12,7 @@ import * as React from 'react';
 import memoize from 'lru-memoize';
 import { EM_DASH } from "../utils/constants";
 import Tooltip from "../Tooltip";
+import { VisuallyHidden } from "../VisuallyHidden";
 import { DEFAULT_THRESHOLD, MEMO_CACHE_SIZE, COMPARE_OBJECTS, MAX_PRECISION, ABBREV_PRECISION, DefaultPrecisions } from "./constants";
 import { AbbrContainer, Container } from "./styles";
 var _getNumberFormatters = function _getNumberFormatters(options) {
@@ -76,6 +77,7 @@ var normalizeArgs = function normalizeArgs(props) {
     currency = _props$currency === void 0 ? 'USD' : _props$currency,
     _props$abbreviate = props.abbreviate,
     abbreviate = _props$abbreviate === void 0 ? true : _props$abbreviate,
+    invalidNumberLabel = props.invalidNumberLabel,
     precision = props.precision,
     qa = props.qa,
     rest = _objectWithoutProperties(props, _excluded);
@@ -97,6 +99,7 @@ var normalizeArgs = function normalizeArgs(props) {
   return {
     value: value,
     canAbbreviate: canAbbreviate,
+    invalidNumberLabel: invalidNumberLabel,
     options: options,
     qa: qa,
     rest: rest
@@ -106,10 +109,16 @@ var Numeral = function Numeral(props) {
   var _normalizeArgs = normalizeArgs(props),
     value = _normalizeArgs.value,
     canAbbreviate = _normalizeArgs.canAbbreviate,
+    invalidNumberLabel = _normalizeArgs.invalidNumberLabel,
     options = _normalizeArgs.options,
     qa = _normalizeArgs.qa,
     rest = _normalizeArgs.rest;
-  if (!isValidNumber(props.number)) return /*#__PURE__*/React.createElement(Container, qa, EM_DASH);
+  if (!isValidNumber(props.number)) return /*#__PURE__*/React.createElement(React.Fragment, null, invalidNumberLabel &&
+  /*#__PURE__*/
+  // Give screen readers something useful to read off + hide the em dash
+  React.createElement(VisuallyHidden, null, invalidNumberLabel), /*#__PURE__*/React.createElement(Container, _extends({
+    "aria-hidden": true
+  }, qa), EM_DASH));
   var formatters = getNumberFormatters(options);
   var fullText = formatters.standard.format(value);
   if (canAbbreviate) {

package/lib/PartnerLogo/PartnerLogo.js

@@ -4,35 +4,42 @@ 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; }
 import React from 'react';
 import { useTheme } from 'styled-components';
-// eslint-disable-next-line no-restricted-syntax
-import * as logoViewBoxes from "../LogoViewBoxes";
+import logoViewBoxes from "../LogoViewBoxes";
 import Container from "./styles";
-var PartnerLogo = function PartnerLogo(_ref) {
-  var partnerName = _ref.partnerName,
-    backgroundType = _ref.backgroundType,
-    _ref$logoType = _ref.logoType,
-    logoType = _ref$logoType === void 0 ? 'symbol' : _ref$logoType,
-    height = _ref.height,
-    width = _ref.width,
-    size = _ref.size,
-    ariaLabel = _ref['aria-label'],
-    svgProps = _ref.svgProps,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var whichLogo = function whichLogo(_ref, mode) {
+  var backgroundType = _ref.backgroundType,
+    logoType = _ref.logoType,
+    partnerName = _ref.partnerName;
+  var logo = logoType && logoType !== 'symbol' ? partnerName + '-' + logoType : partnerName;
+  if (backgroundType && backgroundType === 'dark') {
+    return "".concat(logo, "-dark");
+  } else if (backgroundType && backgroundType === 'light') {
+    return logo;
+  } else if (mode === 'dark') {
+    return "".concat(logo, "-dark");
+  } else {
+    return logo;
+  }
+};
+var PartnerLogo = function PartnerLogo(_ref2) {
+  var partnerName = _ref2.partnerName,
+    backgroundType = _ref2.backgroundType,
+    _ref2$logoType = _ref2.logoType,
+    logoType = _ref2$logoType === void 0 ? 'symbol' : _ref2$logoType,
+    height = _ref2.height,
+    width = _ref2.width,
+    size = _ref2.size,
+    ariaLabel = _ref2['aria-label'],
+    svgProps = _ref2.svgProps,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useTheme = useTheme(),
     mode = _useTheme.mode;
-  var whichLogo = function whichLogo(type) {
-    var logo = logoType && logoType !== 'symbol' ? partnerName + '-' + logoType : partnerName;
-    if (type && type === 'dark') {
-      return "".concat(logo, "-dark");
-    } else if (type && type === 'light') {
-      return logo;
-    } else if (mode === 'dark') {
-      return "".concat(logo, "-dark");
-    } else {
-      return logo;
-    }
-  };
-  var logoViewBox = logoViewBoxes[whichLogo(backgroundType)];
+  var logo = whichLogo({
+    backgroundType: backgroundType,
+    logoType: logoType,
+    partnerName: partnerName
+  }, mode);
+  var logoViewBox = logoViewBoxes[logo];
   var viewBoxCoordinates = (logoViewBox === null || logoViewBox === void 0 ? void 0 : logoViewBox.split(' ')) || [];
   var defaultWidth = viewBoxCoordinates[2];
   var defaultHeight = viewBoxCoordinates[3];
@@ -52,7 +59,7 @@ var PartnerLogo = function PartnerLogo(_ref) {
     "data-qa-logo-svg": "".concat(partnerName, "-svg")
   }, svgProps), /*#__PURE__*/React.createElement("use", {
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    xlinkHref: "#sslogosvg-".concat(whichLogo(backgroundType))
+    xlinkHref: "#sslogosvg-".concat(logo)
   })));
 };
 export default PartnerLogo;

package/lib/PartnerLogo/PartnerLogoTypes.js

@@ -1,8 +1,19 @@
-export var PartnerNames = ['apple-app-store', 'bigcommerce', 'bitly', 'bynder', 'canva', 'dropbox', 'facebook', 'facebook-audience-network', 'facebook-groups', 'facebook-shops', 'feedly', 'glassdoor', 'google-analytics', 'google-business-messages', 'google-drive', 'google-my-business', 'google-play-store', 'hubspot', 'instagram', 'linkedin', 'linkedin-audience-network', 'marketo', 'messenger', 'microsoft-dynamics', 'pinterest', 'reddit', 'salesforce', 'shopify', 'slack', 'sproutsocial', 'tiktok', 'tripadvisor', 'tumblr', 'twitter', 'twitter-audience-network', 'whatsapp', 'woocommerce', 'yelp', 'youtube', 'zendesk'];
+import PartnerLogoNames from "../logoNames";
+
+/**
+ * @deprecated Use PartnerLogoNames instead
+ */
+export var PartnerNames = PartnerLogoNames;
+
+/**
+ * @deprecated Use EnumLogoNames instead
+ */
+
 export var PartnerLogoSizes = {
   mini: '12px',
   small: '16px',
   medium: '24px',
   large: '32px',
   jumbo: '64px'
-};
+};
+export var PartnerLogoTypes = ['symbol', 'wordmark', 'lockup'];

package/lib/PartnerLogo/index.flow.js

@@ -1,2 +1 @@
-export * from "./PartnerLogo.flow";
-export * from "./TypePartnerNames.flow";
+export * from "./PartnerLogo.flow";