@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib-esm/SelectMenu/SelectMenuFilter.js

@@ -1,21 +1,19 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useRef, useContext, forwardRef, useEffect } from 'react';
+import React, { forwardRef, useContext, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { COMMON, get } from '../constants';
-import theme from '../theme';
+import { get } from '../constants';
+import sx from '../sx';
 import TextInput from '../TextInput';
 import { MenuContext } from './SelectMenuContext';
-import sx from '../sx';
 const StyledForm = styled.form.withConfig({
   displayName: "SelectMenuFilter__StyledForm",
-  componentId: "k2jey9-0"
-})(["padding:", ";margin:0;border-top:", " solid ", ";background-color:", ";", ";@media (min-width:", "){padding:", ";}", ";"], get('space.3'), get('borderWidths.1'), get('colors.border.gray'), get('colors.white'), COMMON, get('breakpoints.0'), get('space.2'), sx);
-const SelectMenuFilter = forwardRef(({
+  componentId: "s7ktlh-0"
+})(["padding:", ";margin:0;border-bottom:", " solid ", ";background-color:", ";@media (min-width:", "){padding:", ";}", ";"], get('space.3'), get('borderWidths.1'), get('colors.border.muted'), get('colors.canvas.overlay'), get('breakpoints.0'), get('space.2'), sx);
+const SelectMenuFilter = /*#__PURE__*/forwardRef(({
   theme,
   value,
-  sx,
+  sx: sxProp,
   ...rest
 }, forwardedRef) => {
   const inputRef = useRef(null);
@@ -26,26 +24,22 @@ const SelectMenuFilter = forwardRef(({
 
   useEffect(() => {
     if (open) {
-      inputRef.current.focus();
+      var _inputRef$current;
+
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
   }, [open]);
   return /*#__PURE__*/React.createElement(StyledForm, {
     theme: theme,
-    sx: sx
+    sx: sxProp
   }, /*#__PURE__*/React.createElement(TextInput, _extends({
     theme: theme,
     ref: ref,
     width: "100%",
     block: true,
-    value: value
+    value: value,
+    contrast: true
   }, rest)));
 });
-SelectMenuFilter.defaultProps = {
-  theme
-};
-SelectMenuFilter.propTypes = { ...COMMON.propTypes,
-  ...sx.propTypes,
-  value: PropTypes.string
-};
 SelectMenuFilter.displayName = 'SelectMenu.Filter';
 export default SelectMenuFilter;

package/lib-esm/SelectMenu/SelectMenuFooter.js

@@ -1,17 +1,10 @@
 import styled, { css } from 'styled-components';
-import { COMMON, get } from '../constants';
-import theme from '../theme';
+import { get } from '../constants';
 import sx from '../sx';
-const footerStyles = css(["margin-top:-1px;padding:", " ", ";font-size:", ";color:", ";text-align:center;border-top:", " solid ", ";@media (min-width:", "){padding:", " ", ";}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.text.grayLight'), get('borderWidths.1'), get('colors.border.gray'), get('breakpoints.0'), get('space.1'), get('space.2'));
+const footerStyles = css(["margin-top:-1px;padding:", " ", ";font-size:", ";color:", ";text-align:center;border-top:", " solid ", ";@media (min-width:", "){padding:", " ", ";}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.fg.muted'), get('borderWidths.1'), get('colors.border.muted'), get('breakpoints.0'), get('space.1'), get('space.2'));
 const SelectMenuFooter = styled.footer.withConfig({
   displayName: "SelectMenuFooter",
-  componentId: "sc-1uzxr7t-0"
-})(["", " ", " ", ";"], footerStyles, COMMON, sx);
-SelectMenuFooter.defaultProps = {
-  theme
-};
-SelectMenuFooter.propTypes = { ...COMMON.propTypes,
-  ...sx.propTypes
-};
+  componentId: "rkvco1-0"
+})(["", " ", ";"], footerStyles, sx);
 SelectMenuFooter.displayName = 'SelectMenu.Footer';
 export default SelectMenuFooter;

package/lib-esm/SelectMenu/SelectMenuHeader.js

@@ -2,20 +2,18 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { get, COMMON, TYPOGRAPHY } from '../constants';
-import theme from '../theme';
-import sx from '../sx'; // SelectMenu.Header is intentionally not exported, it's an internal component used in
+import { get } from '../constants';
+import sx from '../sx';
+// SelectMenu.Header is intentionally not exported, it's an internal component used in
 // SelectMenu.Modal
-
 const SelectMenuTitle = styled.h3.withConfig({
   displayName: "SelectMenuHeader__SelectMenuTitle",
-  componentId: "sc-1njvopm-0"
-})(["flex:auto;font-size:", ";font-weight:", ";margin:0;@media (min-width:", "){font-size:inherit;}"], get('fontSizes.1'), get('fontWeights.bold'), get('breakpoints.0'));
+  componentId: "sc-1pwppzc-0"
+})(["color:", ";flex:auto;font-size:", ";font-weight:", ";margin:0;@media (min-width:", "){font-size:inherit;}"], get('colors.fg.default'), get('fontSizes.1'), get('fontWeights.bold'), get('breakpoints.0'));
 const StyledHeader = styled.header.withConfig({
   displayName: "SelectMenuHeader__StyledHeader",
-  componentId: "sc-1njvopm-1"
-})(["display:flex;flex:none;padding:", ";border-bottom:", " solid ", ";", " ", " @media (min-width:", "){padding-top:", ";padding-bottom:", ";}", ";"], get('space.3'), get('borderWidths'), get('colors.border.gray'), COMMON, TYPOGRAPHY, get('breakpoints.0'), get('space.2'), get('space.2'), sx);
+  componentId: "sc-1pwppzc-1"
+})(["display:flex;flex:none;padding:", ";border-bottom:", " solid ", ";@media (min-width:", "){padding-top:", ";padding-bottom:", ";}", ";"], get('space.3'), get('borderWidths'), get('colors.border.muted'), get('breakpoints.0'), get('space.2'), get('space.2'), sx);
 
 const SelectMenuHeader = ({
   children,
@@ -30,14 +28,5 @@ const SelectMenuHeader = ({
 };
 
 SelectMenuHeader.displayName = "SelectMenuHeader";
-SelectMenuHeader.defaultProps = {
-  theme
-};
-SelectMenuHeader.propTypes = {
-  theme: PropTypes.object,
-  ...COMMON.propTypes,
-  ...TYPOGRAPHY.propTypes,
-  ...sx.propTypes
-};
 SelectMenuHeader.displayName = 'SelectMenu.Header';
 export default SelectMenuHeader;

package/lib-esm/SelectMenu/SelectMenuItem.js

@@ -1,22 +1,20 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useContext, useRef, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
 import { CheckIcon } from '@primer/octicons-react';
-import { MenuContext } from './SelectMenuContext';
-import { COMMON, get } from '../constants';
+import React, { forwardRef, useContext, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { get } from '../constants';
 import StyledOcticon from '../StyledOcticon';
-import theme from '../theme';
 import sx from '../sx';
-export const listItemStyles = css(["display:flex;align-items:center;padding:", ";overflow:hidden;text-align:left;cursor:pointer;background-color:", ";border:0;border-bottom:", " solid ", ";color:", ";text-decoration:none;font-size:", ";font-family:inherit;width:100%;&:hover{text-decoration:none;}&:focus{outline:none;}&[hidden]{display:none !important;}@media (min-width:", "){padding-top:", ";padding-bottom:", ";}.SelectMenu-icon{width:", ";margin-right:", ";flex-shrink:0;}.SelectMenu-selected-icon{visibility:hidden;transition:transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear;transform:scale(0);}&[aria-checked='true']{font-weight:500;color:", ";.SelectMenu-selected-icon{visibility:visible;transition:transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear;transform:scale(1);}}@media (hover:hover){body:not(.intent-mouse) .SelectMenu-item:focus,&:hover,&:active,&:focus{background-color:", ";}}@media (hover:none){&:focus,&:active{background-color:", ";}-webkit-tap-highlight-color:rgba(", ",0.5);}"], get('space.3'), get('colors.white'), get('borderWidths.1'), get('colors.border.grayLight'), get('colors.text.gray'), get('fontSizes.0'), get('breakpoints.0'), get('space.2'), get('space.2'), get('space.3'), get('space.2'), get('colors.gray.9'), get('colors.bg.gray'), get('colors.bg.grayLight'), get('colors.gray.3'));
+import { MenuContext } from './SelectMenuContext';
+export const listItemStyles = css(["display:flex;align-items:center;padding:", ";overflow:hidden;text-align:left;cursor:pointer;background-color:", ";border:0;border-bottom:", " solid ", ";color:", ";text-decoration:none;font-size:", ";font-family:inherit;width:100%;&:hover{text-decoration:none;}&:focus{outline:none;}&[hidden]{display:none !important;}@media (min-width:", "){padding-top:", ";padding-bottom:", ";}.SelectMenu-icon{width:", ";margin-right:", ";flex-shrink:0;}.SelectMenu-selected-icon{visibility:hidden;transition:transform 0.12s cubic-bezier(0.5,0.1,1,0.5),visibility 0s 0.12s linear;transform:scale(0);}&[aria-checked='true']{font-weight:500;color:", ";.SelectMenu-selected-icon{visibility:visible;transition:transform 0.12s cubic-bezier(0,0,0.2,1),visibility 0s linear;transform:scale(1);}}@media (hover:hover){&:hover,&:active,&:focus{background-color:", ";}}@media (hover:none){&:focus,&:active{background-color:", ";}-webkit-tap-highlight-color:", ";}"], get('space.3'), get('colors.canvas.overlay'), get('borderWidths.1'), get('colors.border.muted'), get('colors.fg.muted'), get('fontSizes.0'), get('breakpoints.0'), get('space.2'), get('space.2'), get('space.3'), get('space.2'), get('colors.fg.default'), get('colors.neutral.subtle'), get('colors.canvas.subtle'), get('colors.selectMenu.tapHighlight'));
 const StyledItem = styled.a.attrs(() => ({
   role: 'menuitemcheckbox'
 })).withConfig({
   displayName: "SelectMenuItem__StyledItem",
-  componentId: "sc-13zu9d-0"
-})(["", " ", " ", ";"], listItemStyles, COMMON, sx);
-const SelectMenuItem = forwardRef(({
+  componentId: "gjymba-0"
+})(["", " ", ";"], listItemStyles, sx);
+const SelectMenuItem = /*#__PURE__*/forwardRef(({
   children,
   selected,
   theme,
@@ -32,7 +30,9 @@ const SelectMenuItem = forwardRef(({
     onClick && onClick(e);
 
     if (!e.defaultPrevented) {
-      menuContext.setOpen(false);
+      var _menuContext$setOpen;
+
+      (_menuContext$setOpen = menuContext.setOpen) === null || _menuContext$setOpen === void 0 ? void 0 : _menuContext$setOpen.call(menuContext, false);
     }
   };
 
@@ -49,13 +49,7 @@ const SelectMenuItem = forwardRef(({
   }), children);
 });
 SelectMenuItem.defaultProps = {
-  theme,
   selected: false
 };
-SelectMenuItem.propTypes = {
-  selected: PropTypes.bool,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
 SelectMenuItem.displayName = 'SelectMenu.Item';
 export default SelectMenuItem;

package/lib-esm/SelectMenu/SelectMenuList.js

@@ -1,17 +1,10 @@
 import styled, { css } from 'styled-components';
-import theme from '../theme';
-import { COMMON, get } from '../constants';
+import { get } from '../constants';
 import sx from '../sx';
-const listStyles = css(["position:relative;padding:0;margin:0;flex:auto;overflow-x:hidden;overflow-y:auto;background-color:", ";-webkit-overflow-scrolling:touch;@media (hover:hover){.SelectMenuTab:focus{background-color:", ";}.SelectMenuTab:not([aria-checked='true']):hover{color:", ";background-color:", ";}.SelectMenuTab:not([aria-checked='true']):active{color:", ";background-color:", ";}}"], get('colors.white'), get('colors.blue.1'), get('colors.gray.9'), get('colors.gray.2'), get('colors.gray.9'), get('colors.gray.1'));
+const listStyles = css(["position:relative;padding:0;margin:0;flex:auto;overflow-x:hidden;overflow-y:auto;background-color:", ";-webkit-overflow-scrolling:touch;@media (hover:hover){.SelectMenuTab:focus{background-color:", ";}.SelectMenuTab:not([aria-checked='true']):hover{color:", ";background-color:", ";}.SelectMenuTab:not([aria-checked='true']):active{color:", ";background-color:", ";}}"], get('colors.canvas.overlay'), get('colors.selectMenu.tapFocusBg'), get('colors.fg.default'), get('colors.canvas.subtle'), get('colors.fg.default'), get('colors.canvas.subtle'));
 const SelectMenuList = styled.div.withConfig({
   displayName: "SelectMenuList",
-  componentId: "uflcju-0"
-})(["", " ", " ", ";"], listStyles, COMMON, sx);
-SelectMenuList.defaultProps = {
-  theme
-};
-SelectMenuList.propTypes = { ...COMMON.propTypes,
-  ...sx.propTypes
-};
+  componentId: "sc-1opbpf6-0"
+})(["", " ", ";"], listStyles, sx);
 SelectMenuList.displayName = 'SelectMenu.List';
 export default SelectMenuList;

package/lib-esm/SelectMenu/SelectMenuLoadingAnimation.js

@@ -1,22 +1,16 @@
 import React from 'react';
-import styled, { keyframes } from 'styled-components';
-import StyledOcticon from '../StyledOcticon';
-import { OctofaceIcon } from '@primer/octicons-react';
-import { get, COMMON } from '../constants';
-const pulseKeyframes = keyframes(["0%{opacity:0.3;}10%{opacity:1;}100%{opacity:0.3;}"]);
+import styled from 'styled-components';
+import { get } from '../constants';
+import Spinner from '../Spinner';
+import sx from '../sx';
 const Animation = styled.div.withConfig({
   displayName: "SelectMenuLoadingAnimation__Animation",
-  componentId: "c5vnsj-0"
-})(["padding:", " ", ";text-align:center;background-color:", ";animation-name:", ";animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite;", ""], get('space.6'), get('space.4'), get('colors.white'), pulseKeyframes, COMMON);
+  componentId: "sc-17k54td-0"
+})(["padding:", " ", ";text-align:center;background-color:", ";", ""], get('space.6'), get('space.4'), get('colors.canvas.overlay'), sx);
 
 const SelectMenuLoadingAnimation = props => {
-  return /*#__PURE__*/React.createElement(Animation, props, /*#__PURE__*/React.createElement(StyledOcticon, {
-    size: 32,
-    icon: OctofaceIcon
-  }));
+  return /*#__PURE__*/React.createElement(Animation, props, /*#__PURE__*/React.createElement(Spinner, null));
 };
 
 SelectMenuLoadingAnimation.displayName = "SelectMenuLoadingAnimation";
-SelectMenuLoadingAnimation.propTypes = { ...COMMON.propTypes
-};
 export default SelectMenuLoadingAnimation;

package/lib-esm/SelectMenu/SelectMenuModal.js

@@ -1,27 +1,25 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import styled, { keyframes, css } from 'styled-components';
-import { COMMON, get } from '../constants';
+import styled, { css, keyframes } from 'styled-components';
 import { width } from 'styled-system';
-import theme from '../theme';
+import { get } from '../constants';
 import sx from '../sx';
 const animateModal = keyframes(["0%{opacity:0;transform:scale(0.9);}"]);
-const modalStyles = css(["position:relative;z-index:99;display:flex;", ";max-height:", ";margin:auto 0;", ";overflow:hidden;pointer-events:auto;flex-direction:column;background-color:", ";border-radius:", ";box-shadow:0 1px 5px rgba(27,31,35,0.15);animation:", " 0.12s cubic-bezier(0,0.1,0.1,1) backwards;@media (min-width:", "){height:auto;max-height:350px;margin:", " 0 ", " 0;font-size:", ";border:", " solid ", ";border-radius:", ";box-shadow:0 1px 5px ", ";}"], props => props.filter ? 'height: 80%' : '', props => props.filter ? 'none' : '66%', props => props.filter ? 'margin-top: 0' : '', get('colors.white'), get('radii.2'), animateModal, get('breakpoints.0'), get('space.1'), get('space.3'), get('fontSizes.0'), get('borderWidths.1'), get('colors.border.grayDark'), get('radii.2'), get('colors.blackfade15'));
-const modalWrapperStyles = css(["position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;display:flex;padding:", ";pointer-events:none;flex-direction:column;&::before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:'';background-color:", ";@media (min-width:", "){display:none;}}@media (min-width:", "){position:absolute;top:auto;right:", ";bottom:auto;left:auto;padding:0;}"], get('space.3'), get('colors.blackfade50'), get('breakpoints.0'), get('breakpoints.0'), props => props.align === 'right' ? '0' : 'auto');
+const modalStyles = css(["position:relative;z-index:99;display:flex;", ";max-height:", ";margin:auto 0;", ";overflow:hidden;pointer-events:auto;flex-direction:column;background-color:", ";border-radius:", ";box-shadow:", ";animation:", " 0.12s cubic-bezier(0,0.1,0.1,1) backwards;@media (min-width:", "){height:auto;max-height:350px;margin:", " 0 ", " 0;font-size:", ";border:", " solid ", ";border-radius:", ";box-shadow:", ";}"], props => props.filter ? 'height: 80%' : '', props => props.filter ? 'none' : '66%', props => props.filter ? 'margin-top: 0' : '', get('colors.canvas.overlay'), get('radii.2'), get('shadows.shadow.small'), animateModal, get('breakpoints.0'), get('space.1'), get('space.3'), get('fontSizes.0'), get('borderWidths.1'), get('colors.border.default'), get('radii.2'), get('shadows.shadow.small'));
+const modalWrapperStyles = css(["position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;display:flex;padding:", ";pointer-events:none;flex-direction:column;&::before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:'';background-color:", ";@media (min-width:", "){display:none;}}@media (min-width:", "){position:absolute;top:auto;right:", ";bottom:auto;left:auto;padding:0;}"], get('space.3'), get('colors.primer.canvas.backdrop'), get('breakpoints.0'), get('breakpoints.0'), props => props.align === 'right' ? '0' : 'auto');
 const Modal = styled.div.withConfig({
   displayName: "SelectMenuModal__Modal",
-  componentId: "fv9zw3-0"
+  componentId: "sc-1m5qo55-0"
 })(["", " ", ""], modalStyles, width);
 const ModalWrapper = styled.div.withConfig({
   displayName: "SelectMenuModal__ModalWrapper",
-  componentId: "fv9zw3-1"
-})(["", " ", " ", ";"], modalWrapperStyles, COMMON, sx);
-const SelectMenuModal = React.forwardRef(({
+  componentId: "sc-1m5qo55-1"
+})(["", " ", ";"], modalWrapperStyles, sx);
+const SelectMenuModal = /*#__PURE__*/React.forwardRef(({
   children,
   theme,
-  width,
+  width: widthProp,
   ...rest
 }, forwardedRef) => {
   return /*#__PURE__*/React.createElement(ModalWrapper, _extends({
@@ -31,20 +29,12 @@ const SelectMenuModal = React.forwardRef(({
     ref: forwardedRef
   }), /*#__PURE__*/React.createElement(Modal, {
     theme: theme,
-    width: width
+    width: widthProp
   }, children));
 });
 SelectMenuModal.defaultProps = {
   align: 'left',
-  theme,
   width: '300px'
 };
-SelectMenuModal.propTypes = {
-  align: PropTypes.oneOf(['left', 'right']),
-  theme: PropTypes.object,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
 SelectMenuModal.displayName = 'SelectMenu.Modal';
 export default SelectMenuModal;

package/lib-esm/SelectMenu/SelectMenuTab.js

@@ -1,21 +1,19 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useContext, useEffect } from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
+import React, { useContext, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { MenuContext } from './SelectMenuContext';
-import { get, COMMON } from '../constants';
-import theme from '../theme';
+import { get } from '../constants';
 import sx from '../sx';
-const tabStyles = css(["flex:1;padding:", " ", ";font-size:", ";font-weight:500;color:", ";text-align:center;background-color:", ";border:0;box-shadow:inset 0 -1px 0 ", ";@media (min-width:", "){flex:none;padding:", " ", ";border:", " solid transparent;border-bottom-width:0;border-top-left-radius:", ";border-top-right-radius:", ";background-color:", ";}&[aria-selected='true']{z-index:1;color:", ";background-color:", ";box-shadow:0 0 0 1px ", ";@media (min-width:", "){border-color:", ";box-shadow:none;}}&:focus{background-color:#dbedff;}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.gray.5'), get('colors.gray.1'), get('colors.border.gray'), get('breakpoints.0'), get('space.1'), get('space.3'), get('borderWidths.1'), get('radii.2'), get('radii.2'), get('colors.white'), get('colors.gray.9'), get('colors.white'), get('colors.border.gray'), get('breakpoints.0'), get('colors.border.gray'));
+import { MenuContext } from './SelectMenuContext';
+const tabStyles = css(["flex:1;padding:", " ", ";font-size:", ";font-weight:500;color:", ";text-align:center;background-color:transparent;border:0;box-shadow:inset 0 -1px 0 ", ";@media (min-width:", "){flex:none;padding:", " ", ";border:", " solid transparent;border-bottom-width:0;border-top-left-radius:", ";border-top-right-radius:", ";}&[aria-selected='true']{z-index:1;color:", ";background-color:", ";box-shadow:0 0 0 1px ", ";@media (min-width:", "){border-color:", ";box-shadow:none;}}&:focus{background-color:", ";}"], get('space.2'), get('space.3'), get('fontSizes.0'), get('colors.fg.muted'), get('colors.border.muted'), get('breakpoints.0'), get('space.1'), get('space.3'), get('borderWidths.1'), get('radii.2'), get('radii.2'), get('colors.text-primary'), get('colors.canvas.overlay'), get('colors.border.muted'), get('breakpoints.0'), get('colors.border.muted'), get('colors.neutral.subtle'));
 const StyledTab = styled.button.withConfig({
   displayName: "SelectMenuTab__StyledTab",
-  componentId: "oezw3-0"
-})(["", " ", " ", ";"], tabStyles, COMMON, sx);
+  componentId: "ga32sz-0"
+})(["", " ", ";"], tabStyles, sx);
 
 const SelectMenuTab = ({
-  tabName,
+  tabName = '',
   index,
   className,
   onClick,
@@ -28,14 +26,18 @@ const SelectMenuTab = ({
     onClick && onClick(e);
 
     if (!e.defaultPrevented) {
-      menuContext.setSelectedTab(tabName);
+      var _menuContext$setSelec;
+
+      (_menuContext$setSelec = menuContext.setSelectedTab) === null || _menuContext$setSelec === void 0 ? void 0 : _menuContext$setSelec.call(menuContext, tabName);
     }
   }; // if no tab is selected when the component renders, show the first tab
 
 
   useEffect(() => {
     if (!menuContext.selectedTab && index === 0) {
-      menuContext.setSelectedTab(tabName);
+      var _menuContext$setSelec2;
+
+      (_menuContext$setSelec2 = menuContext.setSelectedTab) === null || _menuContext$setSelec2 === void 0 ? void 0 : _menuContext$setSelec2.call(menuContext, tabName);
     }
   }, [index, menuContext, tabName]);
   const isSelected = menuContext.selectedTab === tabName;
@@ -48,15 +50,5 @@ const SelectMenuTab = ({
 };
 
 SelectMenuTab.displayName = "SelectMenuTab";
-SelectMenuTab.defaultProps = {
-  theme
-};
-SelectMenuTab.propTypes = {
-  index: PropTypes.number,
-  onClick: PropTypes.func,
-  tabName: PropTypes.string,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
 SelectMenuTab.displayName = 'SelectMenu.Tab';
 export default SelectMenuTab;

package/lib-esm/SelectMenu/SelectMenuTabPanel.js

@@ -1,40 +1,30 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { get } from '../constants';
+import sx from '../sx';
 import { MenuContext } from './SelectMenuContext';
 import SelectMenuList from './SelectMenuList';
-import theme from '../theme';
-import { COMMON, get } from '../constants';
-import sx from '../sx';
+const TabPanelBase = styled.div.withConfig({
+  displayName: "SelectMenuTabPanel__TabPanelBase",
+  componentId: "ck0ipe-0"
+})(["border-top:", " solid ", ";", ";"], get('borderWidths.1'), get('colors.border.muted'), sx);
 
-const TabPanelBase = ({
+const TabPanel = ({
   tabName,
   className,
   children,
   ...rest
 }) => {
   const menuContext = useContext(MenuContext);
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement(TabPanelBase, _extends({
     role: "tabpanel",
     className: className,
     hidden: menuContext.selectedTab !== tabName
   }, rest), /*#__PURE__*/React.createElement(SelectMenuList, null, children));
 };
 
-TabPanelBase.displayName = "TabPanelBase";
-const TabPanel = styled(TabPanelBase).withConfig({
-  displayName: "SelectMenuTabPanel__TabPanel",
-  componentId: "hgx3vc-0"
-})(["border-top:", " solid ", ";", " ", ";"], get('borderWidths.1'), get('colors.border.gray'), COMMON, sx);
-TabPanel.defaultProps = {
-  theme
-};
-TabPanel.propTypes = {
-  tabName: PropTypes.string,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
+TabPanel.displayName = "TabPanel";
 TabPanel.displayName = 'SelectMenu.TabPanel';
 export default TabPanel;

package/lib-esm/SelectMenu/SelectMenuTabs.js

@@ -2,30 +2,23 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { COMMON, get } from '../constants';
-import theme from '../theme';
+import { get } from '../constants';
 import sx from '../sx';
 const tabWrapperStyles = css(["display:flex;flex-shrink:0;margin-bottom:-1px;-webkit-overflow-scrolling:touch;overflow-x:auto;overflow-y:hidden;&::-webkit-scrollbar{display:none;}@media (min-width:", "){padding:0 ", ";margin-top:", ";}"], get('breakpoints.0'), get('space.2'), get('space.3'));
+const SelectMenuTabsBase = styled.div.withConfig({
+  displayName: "SelectMenuTabs__SelectMenuTabsBase",
+  componentId: "kgg21o-0"
+})(["", " ", ";"], tabWrapperStyles, sx);
 
-const Tabs = ({
+const SelectMenuTabs = ({
   children,
   ...rest
 }) => {
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement(SelectMenuTabsBase, _extends({
     role: "tablist"
   }, rest), children);
 };
 
-Tabs.displayName = "Tabs";
-const SelectMenuTabs = styled(Tabs).withConfig({
-  displayName: "SelectMenuTabs",
-  componentId: "sc-17uzpv2-0"
-})(["", " ", " ", ";"], tabWrapperStyles, COMMON, sx);
-SelectMenuTabs.defaultProps = {
-  theme
-};
-SelectMenuTabs.propTypes = { ...COMMON.propTypes,
-  ...sx.propTypes
-};
+SelectMenuTabs.displayName = "SelectMenuTabs";
 SelectMenuTabs.displayName = 'SelectMenu.Tabs';
 export default SelectMenuTabs;

package/lib-esm/SelectMenu/hooks/useKeyboardNav.js

@@ -75,6 +75,8 @@ function useKeyboardNav(details, open, setOpen) {
           }
         }
         break;
+
+      default:
     }
   }, [details, open, setOpen]);
   useEffect(() => {

package/lib-esm/SelectMenu/index.js

@@ -1,2 +1 @@
-import SelectMenu from './SelectMenu';
-export default SelectMenu;
+export { default } from './SelectMenu';

package/lib-esm/SelectPanel/SelectPanel.js

@@ -0,0 +1,127 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback, useMemo } from 'react';
+import { FilteredActionList } from '../FilteredActionList';
+import { DropdownButton } from '../DropdownMenu';
+import { AnchoredOverlay } from '../AnchoredOverlay';
+import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate';
+import { useProvidedRefOrCreate } from '../hooks';
+
+function isMultiSelectVariant(selected) {
+  return Array.isArray(selected);
+}
+
+const focusZoneSettings = {
+  // Let FilteredActionList handle focus zone
+  disabled: true
+};
+export function SelectPanel({
+  open,
+  onOpenChange,
+  renderAnchor = props => /*#__PURE__*/React.createElement(DropdownButton, props),
+  anchorRef: externalAnchorRef,
+  placeholder,
+  selected,
+  onSelectedChange,
+  filterValue: externalFilterValue,
+  onFilterChange: externalOnFilterChange,
+  items,
+  textInputProps,
+  overlayProps,
+  sx,
+  ...listProps
+}) {
+  const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '');
+  const onFilterChange = useCallback((value, e) => {
+    externalOnFilterChange(value, e);
+    setInternalFilterValue(value);
+  }, [externalOnFilterChange, setInternalFilterValue]);
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
+  const onOpen = useCallback(gesture => onOpenChange(true, gesture), [onOpenChange]);
+  const onClose = useCallback(gesture => {
+    onOpenChange(false, gesture);
+  }, [onOpenChange]);
+  const renderMenuAnchor = useMemo(() => {
+    if (renderAnchor === null) {
+      return null;
+    }
+
+    const selectedItems = Array.isArray(selected) ? selected : [...(selected ? [selected] : [])];
+    return props => {
+      return renderAnchor({ ...props,
+        children: selectedItems.length ? selectedItems.map(item => item.text).join(', ') : placeholder
+      });
+    };
+  }, [placeholder, renderAnchor, selected]);
+  const itemsToRender = useMemo(() => {
+    return items.map(item => {
+      const isItemSelected = isMultiSelectVariant(selected) ? selected.includes(item) : selected === item;
+      return { ...item,
+        role: 'option',
+        selected: 'selected' in item && item.selected === undefined ? undefined : isItemSelected,
+        onAction: (itemFromAction, event) => {
+          var _item$onAction;
+
+          (_item$onAction = item.onAction) === null || _item$onAction === void 0 ? void 0 : _item$onAction.call(item, itemFromAction, event);
+
+          if (event.defaultPrevented) {
+            return;
+          }
+
+          if (isMultiSelectVariant(selected)) {
+            const otherSelectedItems = selected.filter(selectedItem => selectedItem !== item);
+            const newSelectedItems = selected.includes(item) ? otherSelectedItems : [...otherSelectedItems, item];
+            const multiSelectOnChange = onSelectedChange;
+            multiSelectOnChange(newSelectedItems);
+            return;
+          } // single select
+
+
+          const singleSelectOnChange = onSelectedChange;
+          singleSelectOnChange(item === selected ? undefined : item);
+          onClose('selection');
+        }
+      };
+    });
+  }, [onClose, onSelectedChange, items, selected]);
+  const inputRef = React.useRef(null);
+  const focusTrapSettings = {
+    initialFocusRef: inputRef
+  };
+  const extendedTextInputProps = useMemo(() => {
+    return {
+      sx: {
+        m: 2
+      },
+      contrast: true,
+      ...textInputProps
+    };
+  }, [textInputProps]);
+  return /*#__PURE__*/React.createElement(AnchoredOverlay, {
+    renderAnchor: renderMenuAnchor,
+    anchorRef: anchorRef,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps,
+    focusTrapSettings: focusTrapSettings,
+    focusZoneSettings: focusZoneSettings
+  }, /*#__PURE__*/React.createElement(FilteredActionList, _extends({
+    filterValue: filterValue,
+    onFilterChange: onFilterChange
+  }, listProps, {
+    role: "listbox",
+    items: itemsToRender,
+    selectionVariant: isMultiSelectVariant(selected) ? 'multiple' : 'single',
+    textInputProps: extendedTextInputProps,
+    inputRef: inputRef // inheriting height and maxHeight ensures that the FilteredActionList is never taller
+    // than the Overlay (which would break scrolling the items)
+    ,
+    sx: { ...sx,
+      height: 'inherit',
+      maxHeight: 'inherit'
+    }
+  })));
+}
+SelectPanel.displayName = "SelectPanel";
+SelectPanel.displayName = 'SelectPanel';

package/lib-esm/SelectPanel/index.js

@@ -0,0 +1 @@
+export { SelectPanel } from './SelectPanel';