@sproutsocial/racine 20.16.0 → 21.0.0

package/lib/Input/styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 import { focusRing } from "../utils/mixins";
 import { COMMON } from "../utils/system-props";
 var Container = styled.div.withConfig({
@@ -24,33 +24,33 @@ var Container = styled.div.withConfig({
   return props.theme.fontWeights.normal;
 }, function (props) {
   switch (props.size) {
-    case 'large':
+    case "large":
       return "".concat(props.theme.space[350], " ").concat(props.theme.space[400]);
-    case 'small':
+    case "small":
       return props.theme.space[200];
-    case 'default':
+    case "default":
     default:
       return props.theme.space[300];
   }
 }, function (props) {
   switch (props.size) {
-    case 'large':
+    case "large":
       return props.theme.typography[300].fontSize;
-    case 'small':
-    case 'default':
+    case "small":
+    case "default":
     default:
       return props.theme.typography[200].fontSize;
   }
 }, function (props) {
   switch (props.size) {
-    case 'large':
+    case "large":
       return props.theme.typography[300].lineHeight;
 
     /* 16px was the value prior to this change to 'large'. Leaving as-is but it is a non-Seeds typography line-height. It may have a big impact though */
-    case 'small':
-    case 'default':
+    case "small":
+    case "default":
     default:
-      return '16px';
+      return "16px";
   }
 }, focusRing, function (props) {
   return props.theme.colors.form.placeholder.base;
@@ -61,7 +61,7 @@ var Container = styled.div.withConfig({
 }, function (props) {
   return props.disabled && css(["opacity:0.4;input{cursor:not-allowed;}"]);
 }, function (props) {
-  return props.appearance === 'primary' && css(["input{border:1px solid ", ";}"], function (props) {
+  return props.appearance === "primary" && css(["input{border:1px solid ", ";}"], function (props) {
     return props.theme.colors.form.border.base;
   });
 }, function (props) {
@@ -83,6 +83,6 @@ export var Accessory = styled.div.withConfig({
 }, function (props) {
   return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[300]);
 });
-Container.displayName = 'InputContainer';
-Accessory.displayName = 'InputAccessory';
+Container.displayName = "InputContainer";
+Accessory.displayName = "InputAccessory";
 export default Container;

package/lib/KeyboardKey/KeyboardKey.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/KeyboardKey/KeyboardKey.js

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-import * as React from 'react';
+import * as React from "react";
 import Text from "../Text";
 import Container from "./styles";
 var KeyboardKey = /*#__PURE__*/function (_React$Component) {

package/lib/KeyboardKey/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 import { COMMON } from "../utils/system-props";
 var Container = styled.div.withConfig({
   displayName: "styles__Container",

package/lib/Label/Label.flow.js

@@ -1,2 +1,2 @@
-import * as React from 'react';
+import * as React from "react";
 import Text from "../Text/index.flow";

package/lib/Label/Label.js

@@ -15,12 +15,12 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Objec
 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 * as React from 'react';
-import styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
 import Text from "../Text";
 var LabelBase = function LabelBase(_ref) {
   var _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'label' : _ref$as,
+    as = _ref$as === void 0 ? "label" : _ref$as,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Text, _extends({}, rest, {
     as: as

package/lib/Link/Link.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/Link/Link.js

@@ -2,7 +2,7 @@ var _excluded = ["href", "external", "children", "disabled", "onClick", "as", "u
 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 * as React from 'react';
+import * as React from "react";
 import Container from "./styles";
 var Link = function Link(_ref) {
   var href = _ref.href,
@@ -18,14 +18,14 @@ var Link = function Link(_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");
   }
-  var type = as || (href ? 'a' : 'button');
+  var type = as || (href ? "a" : "button");
   return /*#__PURE__*/React.createElement(Container, _extends({
     href: href,
-    target: external ? '_blank' : undefined,
-    type: type === 'button' ? 'button' : undefined,
-    rel: external ? 'noopener noreferrer' : undefined,
+    target: external ? "_blank" : undefined,
+    type: type === "button" ? "button" : undefined,
+    rel: external ? "noopener noreferrer" : undefined,
     forwardedAs: type,
     "aria-disabled": disabled ? disabled : undefined,
     disabled: disabled,

package/lib/Link/constants.js

@@ -1,9 +1,9 @@
-import { COLOR_BLUE_900 } from '@sproutsocial/seeds-color';
+import { COLOR_BLUE_900 } from "@sproutsocial/seeds-color";
 var defaultLink = {
-  color: 'link',
-  hoverColor: 'link.hover',
+  color: "link",
+  hoverColor: "link.hover",
   activeColor: COLOR_BLUE_900,
-  fontWeight: 'semibold'
+  fontWeight: "semibold"
 };
 var linkTheme = {
   default: defaultLink

package/lib/Link/styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 import { focusRing, disabled } from "../utils/mixins";
 import { TYPOGRAPHY, COMMON, FLEXBOX } from "../utils/system-props";
 import Text from "../Text";
@@ -8,7 +8,7 @@ var Container = styled(Text).withConfig({
 })(["border:0;font-family:", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", " ", ""], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
-  return props.underline ? 'underline' : 'none';
+  return props.underline ? "underline" : "none";
 }, function (props) {
   return props.disabled && css(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {

package/lib/Listbox/Listbox.flow.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 import Button from "../Button/index.flow";
 import Popout from "../Popout/index.flow";
 import Menu from "../Menu/index.flow";

package/lib/Listbox/Listbox.js

@@ -9,8 +9,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 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 * as React from 'react';
-import styled, { css } from 'styled-components';
+import * as React from "react";
+import styled, { css } from "styled-components";
 import { MENU_ROLES } from "../Menu/utils/constants";
 import { Arrow } from "../Select/styles";
 import Icon from "../Icon";
@@ -41,7 +41,7 @@ export var ListboxButtonContainer = styled(MenuButton).withConfig({
 }, function (props) {
   return props.theme.colors.text.body;
 }, function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
+  return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
@@ -56,20 +56,20 @@ export var ListboxButtonContainer = styled(MenuButton).withConfig({
   return props.theme.fontWeights.normal;
 }, function (props) {
   switch (props.size) {
-    case 'large':
+    case "large":
       return "".concat(props.theme.space[400], " ").concat(props.theme.space[600], " ").concat(props.theme.space[400], " ").concat(props.theme.space[400]);
-    case 'small':
+    case "small":
       return "".concat(props.theme.space[200], " ").concat(props.theme.space[500], " ").concat(props.theme.space[200], " ").concat(props.theme.space[200]);
-    case 'default':
+    case "default":
     default:
       return "".concat(props.theme.space[300], " ").concat(props.theme.space[500], " ").concat(props.theme.space[300], " ").concat(props.theme.space[300]);
   }
 }, function (props) {
   switch (props.size) {
-    case 'large':
+    case "large":
       return props.theme.typography[300].fontSize;
-    case 'small':
-    case 'default':
+    case "small":
+    case "default":
     default:
       return props.theme.typography[200].fontSize;
   }
@@ -85,7 +85,7 @@ export var ListboxButton = function ListboxButton(_ref2) {
     restProps = _objectWithoutProperties(_ref2, _excluded2);
   return /*#__PURE__*/React.createElement(ListboxButtonContainer, _extends({}, restProps, {
     popoutProps: _objectSpread({
-      placement: 'bottom-start'
+      placement: "bottom-start"
     }, restProps.popoutProps || {})
   }), children, /*#__PURE__*/React.createElement(Arrow, {
     size: restProps.size

package/lib/Loader/Loader.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/Loader/Loader.js

@@ -16,7 +16,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Objec
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import * as React from 'react';
+import * as React from "react";
 import Container, { Text } from "./styles";
 var Loader = /*#__PURE__*/function (_React$Component) {
   _inherits(Loader, _React$Component);
@@ -35,19 +35,19 @@ var Loader = /*#__PURE__*/function (_React$Component) {
         qa = _this$props.qa,
         rest = _objectWithoutProperties(_this$props, _excluded);
       return /*#__PURE__*/React.createElement(Container, _extends({
-        small: size === 'small',
-        dark: color === 'dark',
+        small: size === "small",
+        dark: color === "dark",
         delay: delay,
         "data-qa-loader": ""
-      }, qa, rest), /*#__PURE__*/React.createElement(Text, null, text || 'Loading'));
+      }, qa, rest), /*#__PURE__*/React.createElement(Text, null, text || "Loading"));
     }
   }]);
   return Loader;
 }(React.Component);
 _defineProperty(Loader, "defaultProps", {
-  size: 'large',
-  text: '',
+  size: "large",
+  text: "",
   delay: true,
-  color: 'dark'
+  color: "dark"
 });
 export { Loader as default };

package/lib/Loader/styles.js

@@ -1,4 +1,4 @@
-import styled, { css, keyframes } from 'styled-components';
+import styled, { css, keyframes } from "styled-components";
 import { visuallyHidden } from "../utils/mixins";
 import { COMMON } from "../utils/system-props";
 var getSize = function getSize(size) {
@@ -12,12 +12,12 @@ var getSize = function getSize(size) {
 var spin = keyframes(["from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}"]);
 var delayAnimation = keyframes(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
 var Container = styled.div.attrs({
-  className: 'Loader'
+  className: "Loader"
 }).withConfig({
   displayName: "styles__Container",
   componentId: "sc-1edimrk-0"
-})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:'';transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (props) {
-  return props.delay ? css(["", " 2s 1;"], delayAnimation) : 'none';
+})(["position:relative;margin:0 auto;padding:0;overflow:hidden;border-radius:100%;animation:", ";&:after{position:absolute;top:50%;left:50%;background:transparent;border-style:solid;border-radius:100%;content:\"\";transition:opacity 250ms;border-color:", ";animation:", ";}", " ", ""], function (props) {
+  return props.delay ? css(["", " 2s 1;"], delayAnimation) : "none";
 }, function (_ref2) {
   var theme = _ref2.theme;
   return "".concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[0], " ").concat(theme.colors.neutral[600], " ").concat(theme.colors.neutral[600]);

package/lib/LoaderButton/LoaderButton.flow.js

@@ -1 +1 @@
-import * as React from 'react';
+import * as React from "react";

package/lib/LoaderButton/LoaderButton.js

@@ -2,8 +2,8 @@ var _excluded = ["isLoading", "disabled", "loaderLabel", "children", "appearance
 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 * as React from 'react';
-import styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
 import Box from "../Box";
 import Button from "../Button";
 import Loader from "../Loader";
@@ -16,13 +16,13 @@ var StyledLoaderButton = styled(Button).withConfig({
     appearance = _ref.appearance,
     disabled = _ref.disabled;
   var buttonBackgroundColor = (_theme$colors$button = theme.colors.button[appearance]) === null || _theme$colors$button === void 0 || (_theme$colors$button = _theme$colors$button.background) === null || _theme$colors$button === void 0 ? void 0 : _theme$colors$button.base;
-  var isBackgroundColorTransparent = buttonBackgroundColor === 'transparent';
+  var isBackgroundColorTransparent = buttonBackgroundColor === "transparent";
 
   // If the button is disabled we want to check what the buttonBackgroundColor is, if it is transparent we want to return transparent, otherwise we want to return the buttonBackgroundColor with an opacity of 0.4. If the button is not disabled we want to return the buttonBackgroundColor.
-  return disabled ? isBackgroundColorTransparent ? 'transparent' : "".concat(buttonBackgroundColor, "66") : buttonBackgroundColor;
+  return disabled ? isBackgroundColorTransparent ? "transparent" : "".concat(buttonBackgroundColor, "66") : buttonBackgroundColor;
 }, function (_ref2) {
   var disabled = _ref2.disabled;
-  return disabled && 'opacity: 1;';
+  return disabled && "opacity: 1;";
 });
 export var LoaderButton = function LoaderButton(_ref3) {
   var _ref3$isLoading = _ref3.isLoading,
@@ -31,7 +31,7 @@ export var LoaderButton = function LoaderButton(_ref3) {
     loaderLabel = _ref3.loaderLabel,
     children = _ref3.children,
     _ref3$appearance = _ref3.appearance,
-    appearance = _ref3$appearance === void 0 ? 'unstyled' : _ref3$appearance,
+    appearance = _ref3$appearance === void 0 ? "unstyled" : _ref3$appearance,
     rest = _objectWithoutProperties(_ref3, _excluded);
   return /*#__PURE__*/React.createElement(StyledLoaderButton, _extends({
     disabled: disabled || isLoading,

package/lib/Menu/Menu.flow.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 import Box from "../Box/index.flow";
 import Button from "../Button/index.flow";
 import Popout from "../Popout/index.flow";

package/lib/Menu/Menu.js

@@ -21,10 +21,10 @@ 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; }
-import * as React from 'react';
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
-import uniqueId from 'lodash.uniqueid';
+import * as React from "react";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import styled from "styled-components";
+import uniqueId from "lodash.uniqueid";
 import { useTextContent } from "../utils/hooks";
 import innerText from "../utils/innerText";
 import { disabled } from "../utils/mixins";
@@ -55,7 +55,7 @@ var getMenuItemRole = function getMenuItemRole(menuRole) {
 };
 function isValueSelected(menuValue, value) {
   if (!menuValue) return false;
-  if (typeof menuValue === 'string') {
+  if (typeof menuValue === "string") {
     return Boolean(menuValue && value && menuValue === value);
   } else if (Array.isArray(menuValue)) {
     return menuValue.includes(value);
@@ -95,9 +95,9 @@ export var MenuItem = function MenuItem(_ref) {
   var shouldClosePopout = closeOnItemClick && !multiselect;
   var itemRole = roleProp || getMenuItemRole(menuRole);
   var id = useMemo(function () {
-    return idProp || uniqueId('MenuItem-');
+    return idProp || uniqueId("MenuItem-");
   }, [idProp]);
-  var textContent = useTextContent('');
+  var textContent = useTextContent("");
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   var label = labelProp || textContent.current;
@@ -131,7 +131,7 @@ export var MenuItem = function MenuItem(_ref) {
    */
   useEffect(function () {
     if (isCheckboxOrRadio && ref.current) {
-      var input = ref.current.querySelector('input');
+      var input = ref.current.querySelector("input");
       if (input) {
         input.tabIndex = -1;
       }
@@ -195,7 +195,7 @@ export var MenuItem = function MenuItem(_ref) {
     "aria-label": labelProp,
     value: valueProp,
     "data-value": valueProp,
-    forwardedAs: as || 'li',
+    forwardedAs: as || "li",
     "aria-checked": isCheckboxOrRadio ? isSelected : undefined,
     "aria-selected": itemRole === MENU_ITEM_ROLES.OPTION ? isSelected : undefined,
     disabled: disabled,
@@ -214,14 +214,14 @@ export var MenuItem = function MenuItem(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: {
-      display: 'flex',
-      alignItems: props.alignItems || 'center',
-      justifyContent: 'space-between'
+      display: "flex",
+      alignItems: props.alignItems || "center",
+      justifyContent: "space-between"
     }
   }, before, /*#__PURE__*/React.createElement("div", {
     style: {
       flexGrow: 1,
-      wordBreak: 'break-word',
+      wordBreak: "break-word",
       minWidth: 0
     }
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -253,7 +253,7 @@ export var MenuSwitch = function MenuSwitch(props) {
     label = props.label,
     rest = _objectWithoutProperties(props, _excluded2);
   var menuItemId = useMemo(function () {
-    return id || uniqueId('MenuItem-');
+    return id || uniqueId("MenuItem-");
   }, [id]);
   var labelId = "".concat(menuItemId, "-label");
   var switchElement = /*#__PURE__*/React.createElement(Switch, _extends({
@@ -262,7 +262,7 @@ export var MenuSwitch = function MenuSwitch(props) {
     "aria-hidden": "true",
     tabIndex: -1,
     "aria-labelledby": labelId
-  }, placement === 'before' ? {
+  }, placement === "before" ? {
     mr: 300
   } : {
     ml: 300
@@ -273,9 +273,9 @@ export var MenuSwitch = function MenuSwitch(props) {
   var menuItemProps = _objectSpread({
     id: menuItemId,
     label: label,
-    elemBefore: placement === 'before' ? switchElement : undefined,
+    elemBefore: placement === "before" ? switchElement : undefined,
     // Empty fragment prevents a check icon in elemAfter when the switch is checked. Can be overridden.
-    elemAfter: placement === 'before' ? /*#__PURE__*/React.createElement(React.Fragment, null) : switchElement
+    elemAfter: placement === "before" ? /*#__PURE__*/React.createElement(React.Fragment, null) : switchElement
   }, rest);
   return /*#__PURE__*/React.createElement(MenuItem, menuItemProps, /*#__PURE__*/React.createElement(Text, _extends({
     id: labelId
@@ -315,7 +315,7 @@ export var MenuGroup = function MenuGroup(_ref6) {
     isDisabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
     props = _objectWithoutProperties(_ref6, _excluded3);
   var menuTitleId = useMemo(function () {
-    return uniqueId('menu-title-');
+    return uniqueId("menu-title-");
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, _extends({
     p: 300,
@@ -327,7 +327,7 @@ export var MenuGroup = function MenuGroup(_ref6) {
     id: menuTitleId,
     role: "presentation",
     fontSize: 200,
-    forwardedAs: titleAs || 'li',
+    forwardedAs: titleAs || "li",
     $_css: isDisabled ? disabled : undefined
   }, title), children));
 };
@@ -341,7 +341,7 @@ export var MenuDivider = function MenuDivider(props) {
 };
 var MenuFilterInput = function MenuFilterInput(_ref7) {
   var _ref7$type = _ref7.type,
-    type = _ref7$type === void 0 ? 'search' : _ref7$type,
+    type = _ref7$type === void 0 ? "search" : _ref7$type,
     props = _objectWithoutProperties(_ref7, _excluded4);
   var onChange = props.onChange,
     onFocus = props.onFocus,
@@ -435,7 +435,7 @@ export var Menu = function Menu(_ref10) {
     setDescendants = _useDescendants2[1];
   var _useState3 = useState({
       selectionIndex: 0,
-      filterQuery: '',
+      filterQuery: "",
       filteredItems: null,
       isFilterInputFocused: false,
       isFooterFocused: false
@@ -471,14 +471,14 @@ export var Menu = function Menu(_ref10) {
     innerRef: menuRef
   }), children), footerContent ? /*#__PURE__*/React.createElement(MenuFooter, null, footerContent) : null));
 };
-MenuGroup.displayName = 'Menu.Group';
-MenuItem.displayName = 'Menu.Item';
-MenuCheckbox.displayName = 'Menu.Checkbox';
-MenuRadio.displayName = 'Menu.Radio';
-MenuSwitch.displayName = 'Menu.Switch';
-MenuDivider.displayName = 'Menu.Divider';
-MenuFilterInput.displayName = 'Menu.FilterInput';
-Menu.displayName = 'Menu';
+MenuGroup.displayName = "Menu.Group";
+MenuItem.displayName = "Menu.Item";
+MenuCheckbox.displayName = "Menu.Checkbox";
+MenuRadio.displayName = "Menu.Radio";
+MenuSwitch.displayName = "Menu.Switch";
+MenuDivider.displayName = "Menu.Divider";
+MenuFilterInput.displayName = "Menu.FilterInput";
+Menu.displayName = "Menu";
 Menu.Group = MenuGroup;
 Menu.Item = MenuItem;
 Menu.Checkbox = MenuCheckbox;
@@ -498,9 +498,9 @@ export var MenuButton = function MenuButton(_ref11) {
     _ref11$closeOnItemCli = _ref11.closeOnItemClick,
     closeOnItemClick = _ref11$closeOnItemCli === void 0 ? true : _ref11$closeOnItemCli,
     _ref11$id = _ref11.id,
-    id = _ref11$id === void 0 ? uniqueId('MenuButton-') : _ref11$id,
+    id = _ref11$id === void 0 ? uniqueId("MenuButton-") : _ref11$id,
     _ref11$placement = _ref11.placement,
-    placement = _ref11$placement === void 0 ? 'bottom' : _ref11$placement,
+    placement = _ref11$placement === void 0 ? "bottom" : _ref11$placement,
     isOpen = _ref11.isOpen,
     setIsOpen = _ref11.setIsOpen,
     props = _objectWithoutProperties(_ref11, _excluded7);
@@ -508,7 +508,7 @@ export var MenuButton = function MenuButton(_ref11) {
     _useState6 = _slicedToArray(_useState5, 2),
     isInternalShown = _useState6[0],
     setIsInternalShown = _useState6[1];
-  var isControlled = typeof isOpen === 'boolean';
+  var isControlled = typeof isOpen === "boolean";
   var isShown = isControlled ? isOpen : isInternalShown;
   var setIsShown = useMemo(function () {
     return isControlled && setIsOpen ? setIsOpen : function (nextIsShown) {
@@ -518,8 +518,8 @@ export var MenuButton = function MenuButton(_ref11) {
   var closePopout = useCallback(function () {
     return setIsShown(false);
   }, [setIsShown]);
-  var ariaLabelledBy = props['aria-labelledby'] ? "".concat(props['aria-labelledby'], " ").concat(id) : undefined;
-  var ariaLabel = props['aria-label'] ? "".concat(props['aria-label'], " ").concat(innerText(children)) : undefined;
+  var ariaLabelledBy = props["aria-labelledby"] ? "".concat(props["aria-labelledby"], " ").concat(id) : undefined;
+  var ariaLabel = props["aria-label"] ? "".concat(props["aria-label"], " ").concat(innerText(children)) : undefined;
   return /*#__PURE__*/React.createElement(MenuButtonContext.Provider, {
     value: {
       closePopout: closePopout,
@@ -538,7 +538,7 @@ export var MenuButton = function MenuButton(_ref11) {
     "aria-label": ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim(),
     active: isShown,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _onClick && _onClick(e); // @ts-notes unfortunately we're passing in a keyboard event here and not the mouse event it expects, so no way to coerce it
         setIsShown(true);

package/lib/Menu/styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 import { disabled, focusRing } from "../utils/mixins";
 import Box from "../Box";
 import { StyledSwitchButton as Switch } from "../Switch/styles";
@@ -49,4 +49,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{", "}& > div[role='group']:first-of-type{border-top:none;}"], focusRing);
+})(["list-style-type:none;&:focus{", "}& > div[role=\"group\"]:first-of-type{border-top:none;}"], focusRing);

package/lib/Menu/utils/constants.flow.js

@@ -1,12 +1,12 @@
 export var MENU_ROLES = Object.freeze({
-  MENU: 'menu',
-  LIST: 'list',
-  LISTBOX: 'listbox'
+  MENU: "menu",
+  LIST: "list",
+  LISTBOX: "listbox"
 });
 export var MENU_ITEM_ROLES = Object.freeze({
-  MENUITEM: 'menuitem',
-  LISTITEM: 'listitem',
-  OPTION: 'option',
-  RADIO: 'menuitemradio',
-  CHECKBOX: 'menuitemcheckbox'
+  MENUITEM: "menuitem",
+  LISTITEM: "listitem",
+  OPTION: "option",
+  RADIO: "menuitemradio",
+  CHECKBOX: "menuitemcheckbox"
 });

package/lib/Menu/utils/constants.js

@@ -1,12 +1,12 @@
 export var MENU_ROLES = Object.freeze({
-  MENU: 'menu',
-  LIST: 'list',
-  LISTBOX: 'listbox'
+  MENU: "menu",
+  LIST: "list",
+  LISTBOX: "listbox"
 });
 export var MENU_ITEM_ROLES = Object.freeze({
-  MENUITEM: 'menuitem',
-  LISTITEM: 'listitem',
-  OPTION: 'option',
-  RADIO: 'menuitemradio',
-  CHECKBOX: 'menuitemcheckbox'
+  MENUITEM: "menuitem",
+  LISTITEM: "listitem",
+  OPTION: "option",
+  RADIO: "menuitemradio",
+  CHECKBOX: "menuitemcheckbox"
 });