@sproutsocial/racine 20.16.0 → 20.17.0

package/commonjs/Input/Input.js

@@ -57,35 +57,35 @@ var ClearButton = function ClearButton() {
   // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
   if (!clearButtonLabel) {
     // eslint-disable-next-line no-console
-    console.warn('Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.');
+    console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.");
   }
 
   // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
   // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
-  var py = inputSize === 'small' ? 100 : undefined;
-  var px = inputSize === 'small' ? 200 : undefined;
-  var buttonSize = inputSize === 'small' ? 'default' : inputSize;
+  var py = inputSize === "small" ? 100 : undefined;
+  var px = inputSize === "small" ? 200 : undefined;
+  var buttonSize = inputSize === "small" ? "default" : inputSize;
   return /*#__PURE__*/React.createElement(StyledButton, {
     onClick: handleClear,
     size: buttonSize,
     py: py,
     px: px,
-    title: clearButtonLabel || 'Clear',
-    ariaLabel: clearButtonLabel || 'Clear',
+    title: clearButtonLabel || "Clear",
+    ariaLabel: clearButtonLabel || "Clear",
     color: "icon.base"
   }, /*#__PURE__*/React.createElement(_Icon.default, {
     name: "circle-x-outline",
     "aria-hidden": true
   }));
 };
-ClearButton.displayName = 'Input.ClearButton';
+ClearButton.displayName = "Input.ClearButton";
 
 // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
 // regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var isClearButton = function isClearButton(elem) {
   if (elem !== null && elem !== void 0 && elem.type) {
-    return elem.type.displayName === 'Input.ClearButton';
+    return elem.type.displayName === "Input.ClearButton";
   }
   return false;
 };
@@ -107,9 +107,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
       if (input) {
         var _Object$getOwnPropert, _this$props$onClear, _this$props2;
         // Clear the value via the input prototype, then dispatch an input event in order to trigger handleChange
-        var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
-        nativeInputValueSetter === null || nativeInputValueSetter === void 0 || nativeInputValueSetter.call(input, '');
-        var inputEvent = new Event('input', {
+        var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
+        nativeInputValueSetter === null || nativeInputValueSetter === void 0 || nativeInputValueSetter.call(input, "");
+        var inputEvent = new Event("input", {
           bubbles: true
         });
         input.dispatchEvent(inputEvent);
@@ -146,7 +146,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return (_this$props$onPaste = (_this$props7 = _this.props).onPaste) === null || _this$props$onPaste === void 0 ? void 0 : _this$props$onPaste.call(_this$props7, e, e.currentTarget.value);
     });
     _defineProperty(_assertThisInitialized(_this), "updateState", function (inputValue) {
-      var hasValue = inputValue !== '';
+      var hasValue = inputValue !== "";
       var previousHasValue = _this.state.hasValue;
 
       // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
@@ -170,7 +170,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
       // Update hasValue state whenever props value changes
       var value = this.props.value;
       if (value !== prevValue) {
-        this.updateState(value || '');
+        this.updateState(value || "");
       }
     }
   }, {
@@ -214,18 +214,18 @@ var Input = /*#__PURE__*/function (_React$Component) {
       // Convert autoComplete from a boolean prop to a string value.
       var autoCompleteValue;
       if (autoComplete !== undefined) {
-        autoCompleteValue = autoComplete ? 'on' : 'off';
+        autoCompleteValue = autoComplete ? "on" : "off";
       }
 
       // Add default elemBefore and elemAfter elements if type is search.
-      var elementBefore = type === 'search' && !elemBefore ? /*#__PURE__*/React.createElement(_Icon.default, {
+      var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(_Icon.default, {
         name: "magnifying-glass-outline",
         "aria-hidden": true,
         color: "icon.base"
       }) : elemBefore;
 
       // Do not add a ClearButton if an elemAfter prop was passed.
-      var elementAfter = type === 'search' && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
+      var elementAfter = type === "search" && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
       return /*#__PURE__*/React.createElement(_styles.default, _extends({
         hasBeforeElement: !!elementBefore,
         hasAfterElement: !!elementAfter,
@@ -265,7 +265,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
         onKeyUp: this.handleKeyUp,
         onPaste: this.handlePaste,
         ref: (0, _utils.mergeRefs)([innerRef !== null && innerRef !== void 0 ? innerRef : null, this.inputRef]),
-        "data-qa-input": name || '',
+        "data-qa-input": name || "",
         "data-qa-input-isdisabled": disabled === true,
         "data-qa-input-isrequired": required === true
       }, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(_styles.Accessory, {
@@ -279,9 +279,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Input, "defaultProps", {
   autoFocus: false,
   disabled: false,
-  type: 'text',
-  size: 'default',
-  appearance: 'primary'
+  type: "text",
+  size: "default",
+  appearance: "primary"
 });
 _defineProperty(Input, "ClearButton", ClearButton);
 var _default = exports.default = Input;

package/commonjs/Input/styles.js

@@ -33,33 +33,33 @@ var Container = _styledComponents.default.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";
   }
 }, _mixins.focusRing, function (props) {
   return props.theme.colors.form.placeholder.base;
@@ -70,7 +70,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;input{cursor:not-allowed;}"]);
 }, function (props) {
-  return props.appearance === 'primary' && (0, _styledComponents.css)(["input{border:1px solid ", ";}"], function (props) {
+  return props.appearance === "primary" && (0, _styledComponents.css)(["input{border:1px solid ", ";}"], function (props) {
     return props.theme.colors.form.border.base;
   });
 }, function (props) {
@@ -92,6 +92,6 @@ var Accessory = exports.Accessory = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.after && (0, _styledComponents.css)(["right:", ";"], props.isClearButton ? 0 : props.theme.space[300]);
 });
-Container.displayName = 'InputContainer';
-Accessory.displayName = 'InputAccessory';
+Container.displayName = "InputContainer";
+Accessory.displayName = "InputAccessory";
 var _default = exports.default = Container;

package/commonjs/Label/Label.js

@@ -29,7 +29,7 @@ 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 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.default, _extends({}, rest, {
     as: as

package/commonjs/Link/Link.js

@@ -28,14 +28,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(_styles.default, _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/commonjs/Link/constants.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _seedsColor = require("@sproutsocial/seeds-color");
 var defaultLink = {
-  color: 'link',
-  hoverColor: 'link.hover',
+  color: "link",
+  hoverColor: "link.hover",
   activeColor: _seedsColor.COLOR_BLUE_900,
-  fontWeight: 'semibold'
+  fontWeight: "semibold"
 };
 var linkTheme = {
   default: defaultLink

package/commonjs/Link/styles.js

@@ -18,7 +18,7 @@ var Container = (0, _styledComponents.default)(_Text.default).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 && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {

package/commonjs/Listbox/Listbox.js

@@ -50,7 +50,7 @@ var ListboxButtonContainer = exports.ListboxButtonContainer = (0, _styledCompone
 }, 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) {
@@ -65,20 +65,20 @@ var ListboxButtonContainer = exports.ListboxButtonContainer = (0, _styledCompone
   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;
   }
@@ -94,7 +94,7 @@ var ListboxButton = exports.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(_styles.Arrow, {
     size: restProps.size

package/commonjs/Loader/Loader.js

@@ -43,18 +43,18 @@ var Loader = exports.default = /*#__PURE__*/function (_React$Component) {
         qa = _this$props.qa,
         rest = _objectWithoutProperties(_this$props, _excluded);
       return /*#__PURE__*/React.createElement(_styles.default, _extends({
-        small: size === 'small',
-        dark: color === 'dark',
+        small: size === "small",
+        dark: color === "dark",
         delay: delay,
         "data-qa-loader": ""
-      }, qa, rest), /*#__PURE__*/React.createElement(_styles.Text, null, text || 'Loading'));
+      }, qa, rest), /*#__PURE__*/React.createElement(_styles.Text, null, text || "Loading"));
     }
   }]);
   return Loader;
 }(React.Component);
 _defineProperty(Loader, "defaultProps", {
-  size: 'large',
-  text: '',
+  size: "large",
+  text: "",
   delay: true,
-  color: 'dark'
+  color: "dark"
 });

package/commonjs/Loader/styles.js

@@ -21,12 +21,12 @@ var getSize = function getSize(size) {
 var spin = (0, _styledComponents.keyframes)(["from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}"]);
 var delayAnimation = (0, _styledComponents.keyframes)(["0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}"]);
 var Container = _styledComponents.default.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 ? (0, _styledComponents.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 ? (0, _styledComponents.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/commonjs/LoaderButton/LoaderButton.js

@@ -26,13 +26,13 @@ var StyledLoaderButton = (0, _styledComponents.default)(_Button.default).withCon
     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;";
 });
 var LoaderButton = exports.LoaderButton = function LoaderButton(_ref3) {
   var _ref3$isLoading = _ref3.isLoading,
@@ -41,7 +41,7 @@ var LoaderButton = exports.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/commonjs/Menu/Menu.js

@@ -62,7 +62,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);
@@ -102,9 +102,9 @@ var MenuItem = exports.MenuItem = function MenuItem(_ref) {
   var shouldClosePopout = closeOnItemClick && !multiselect;
   var itemRole = roleProp || getMenuItemRole(menuRole);
   var id = (0, _react.useMemo)(function () {
-    return idProp || (0, _lodash.default)('MenuItem-');
+    return idProp || (0, _lodash.default)("MenuItem-");
   }, [idProp]);
-  var textContent = (0, _hooks.useTextContent)('');
+  var textContent = (0, _hooks.useTextContent)("");
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   var label = labelProp || textContent.current;
@@ -138,7 +138,7 @@ var MenuItem = exports.MenuItem = function MenuItem(_ref) {
    */
   (0, _react.useEffect)(function () {
     if (isCheckboxOrRadio && ref.current) {
-      var input = ref.current.querySelector('input');
+      var input = ref.current.querySelector("input");
       if (input) {
         input.tabIndex = -1;
       }
@@ -202,7 +202,7 @@ var MenuItem = exports.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 === _utils.MENU_ITEM_ROLES.OPTION ? isSelected : undefined,
     disabled: disabled,
@@ -221,14 +221,14 @@ var MenuItem = exports.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
@@ -260,7 +260,7 @@ var MenuSwitch = exports.MenuSwitch = function MenuSwitch(props) {
     label = props.label,
     rest = _objectWithoutProperties(props, _excluded2);
   var menuItemId = (0, _react.useMemo)(function () {
-    return id || (0, _lodash.default)('MenuItem-');
+    return id || (0, _lodash.default)("MenuItem-");
   }, [id]);
   var labelId = "".concat(menuItemId, "-label");
   var switchElement = /*#__PURE__*/React.createElement(_Switch.default, _extends({
@@ -269,7 +269,7 @@ var MenuSwitch = exports.MenuSwitch = function MenuSwitch(props) {
     "aria-hidden": "true",
     tabIndex: -1,
     "aria-labelledby": labelId
-  }, placement === 'before' ? {
+  }, placement === "before" ? {
     mr: 300
   } : {
     ml: 300
@@ -280,9 +280,9 @@ var MenuSwitch = exports.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.default, _extends({
     id: labelId
@@ -322,7 +322,7 @@ var MenuGroup = exports.MenuGroup = function MenuGroup(_ref6) {
     isDisabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
     props = _objectWithoutProperties(_ref6, _excluded3);
   var menuTitleId = (0, _react.useMemo)(function () {
-    return (0, _lodash.default)('menu-title-');
+    return (0, _lodash.default)("menu-title-");
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Box.default, _extends({
     p: 300,
@@ -334,7 +334,7 @@ var MenuGroup = exports.MenuGroup = function MenuGroup(_ref6) {
     id: menuTitleId,
     role: "presentation",
     fontSize: 200,
-    forwardedAs: titleAs || 'li',
+    forwardedAs: titleAs || "li",
     $_css: isDisabled ? _mixins.disabled : undefined
   }, title), children));
 };
@@ -348,7 +348,7 @@ var MenuDivider = exports.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,
@@ -442,7 +442,7 @@ var Menu = exports.Menu = function Menu(_ref10) {
     setDescendants = _useDescendants2[1];
   var _useState3 = (0, _react.useState)({
       selectionIndex: 0,
-      filterQuery: '',
+      filterQuery: "",
       filteredItems: null,
       isFilterInputFocused: false,
       isFooterFocused: false
@@ -478,14 +478,14 @@ var Menu = exports.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;
@@ -505,9 +505,9 @@ var MenuButton = exports.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 ? (0, _lodash.default)('MenuButton-') : _ref11$id,
+    id = _ref11$id === void 0 ? (0, _lodash.default)("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);
@@ -515,7 +515,7 @@ var MenuButton = exports.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 = (0, _react.useMemo)(function () {
     return isControlled && setIsOpen ? setIsOpen : function (nextIsShown) {
@@ -525,8 +525,8 @@ var MenuButton = exports.MenuButton = function MenuButton(_ref11) {
   var closePopout = (0, _react.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((0, _innerText.default)(children)) : undefined;
+  var ariaLabelledBy = props["aria-labelledby"] ? "".concat(props["aria-labelledby"], " ").concat(id) : undefined;
+  var ariaLabel = props["aria-label"] ? "".concat(props["aria-label"], " ").concat((0, _innerText.default)(children)) : undefined;
   return /*#__PURE__*/React.createElement(_utils.MenuButtonContext.Provider, {
     value: {
       closePopout: closePopout,
@@ -545,7 +545,7 @@ var MenuButton = exports.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/commonjs/Menu/styles.js

@@ -59,4 +59,4 @@ var MenuItemContainer = exports.MenuItemContainer = (0, _styledComponents.defaul
 var MenuItemsContainer = exports.MenuItemsContainer = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "styles__MenuItemsContainer",
   componentId: "sc-168zlb1-1"
-})(["list-style-type:none;&:focus{", "}& > div[role='group']:first-of-type{border-top:none;}"], _mixins.focusRing);
+})(["list-style-type:none;&:focus{", "}& > div[role=\"group\"]:first-of-type{border-top:none;}"], _mixins.focusRing);

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

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MENU_ROLES = exports.MENU_ITEM_ROLES = void 0;
 var MENU_ROLES = exports.MENU_ROLES = Object.freeze({
-  MENU: 'menu',
-  LIST: 'list',
-  LISTBOX: 'listbox'
+  MENU: "menu",
+  LIST: "list",
+  LISTBOX: "listbox"
 });
 var MENU_ITEM_ROLES = exports.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/commonjs/Menu/utils/constants.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MENU_ROLES = exports.MENU_ITEM_ROLES = void 0;
 var MENU_ROLES = exports.MENU_ROLES = Object.freeze({
-  MENU: 'menu',
-  LIST: 'list',
-  LISTBOX: 'listbox'
+  MENU: "menu",
+  LIST: "list",
+  LISTBOX: "listbox"
 });
 var MENU_ITEM_ROLES = exports.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"
 });