@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib/Position.js

@@ -3,13 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Absolute = Absolute;
-exports.Fixed = Fixed;
-exports.Relative = Relative;
-exports.Sticky = Sticky;
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.Sticky = exports.Relative = exports.Fixed = exports.Absolute = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,71 +11,77 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
-var _constants = require("./constants");
-
-var _sx = _interopRequireDefault(require("./sx"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
 
+/**
+ * @deprecated Use the Box component instead (i.e. <Position> → <Box>)
+ */
 const Position = (0, _styledComponents.default)(_Box.default).withConfig({
   displayName: "Position",
   componentId: "fla1y3-0"
-})(["", ";", ";"], _constants.POSITION, _sx.default);
-Position.defaultProps = {
-  theme: _theme.default
-};
-Position.propTypes = { ..._Box.default.propTypes,
-  ..._constants.POSITION.propTypes,
-  theme: _propTypes.default.object,
-  ..._sx.default.propTypes
-};
+})([""]);
+
+/**
+ * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
+ */
 var _default = Position; // Absolute
 
 exports.default = _default;
 
-function Absolute(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Absolute> → <Box position="absolute">)
+ */
+const Absolute = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "absolute"
+    position: "absolute",
+    ref: ref
   }));
-}
+});
 
-Absolute.displayName = "Absolute";
-Absolute.defaultProps = Position.defaultProps;
-Absolute.propTypes = Position.propTypes; // Fixed
+exports.Absolute = Absolute;
+Absolute.displayName = 'Absolute'; // Fixed
 
-function Fixed(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Fixed> → <Box position="fixed">)
+ */
+const Fixed = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "fixed"
+    position: "fixed",
+    ref: ref
   }));
-}
+});
 
-Fixed.displayName = "Fixed";
-Fixed.defaultProps = Position.defaultProps;
-Fixed.propTypes = Position.propTypes; // Relative
+exports.Fixed = Fixed;
+Fixed.displayName = 'Fixed'; // Relative
 
-function Relative(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Relative> → <Box position="relative">)
+ */
+const Relative = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "relative"
+    position: "relative",
+    ref: ref
   }));
-}
+});
 
-Relative.displayName = "Relative";
-Relative.defaultProps = Position.defaultProps;
-Relative.propTypes = Position.propTypes; // Sticky
+exports.Relative = Relative;
+Relative.displayName = 'Relative'; // Sticky
 
-function Sticky(props) {
+/**
+ * @deprecated Use the Box component instead (i.e. <Sticky> → <Box position="sticky">)
+ */
+const Sticky = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(Position, _extends({}, props, {
-    position: "sticky"
+    position: "sticky",
+    ref: ref
   }));
-}
+});
 
-Sticky.displayName = "Sticky";
-Sticky.defaultProps = { ...Position.defaultProps,
+exports.Sticky = Sticky;
+Sticky.defaultProps = {
   top: 0,
   zIndex: 1
 };
-Sticky.propTypes = Position.propTypes;
+Sticky.displayName = 'Sticky';

package/lib/ProgressBar.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
-
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -19,16 +15,12 @@ var _constants = require("./constants");
 
 var _sx = _interopRequireDefault(require("./sx"));
 
-var _theme = _interopRequireDefault(require("./theme"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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); }
-
 const Bar = _styledComponents.default.span.withConfig({
   displayName: "ProgressBar__Bar",
   componentId: "sc-1tiva13-0"
-})(["width:", ";", ""], props => props.progress ? `${props.progress}%` : 0, _constants.COMMON);
+})(["width:", ";", ";"], props => props.progress ? `${props.progress}%` : 0, _sx.default);
 
 const sizeMap = {
   small: '5px',
@@ -39,36 +31,25 @@ const sizeMap = {
 const ProgressContainer = _styledComponents.default.span.withConfig({
   displayName: "ProgressBar__ProgressContainer",
   componentId: "sc-1tiva13-1"
-})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.gray.2'), (0, _constants.get)('radii.1'), props => sizeMap[props.barSize || 'default'], _constants.COMMON, _styledSystem.width, _sx.default);
+})(["display:", ";overflow:hidden;background-color:", ";border-radius:", ";height:", ";", " ", ";"], props => props.inline ? 'inline-flex' : 'flex', (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.1'), props => sizeMap[props.barSize || 'default'], _styledSystem.width, _sx.default);
 
 function ProgressBar({
   progress,
   bg,
-  theme,
   ...rest
 }) {
-  return /*#__PURE__*/_react.default.createElement(ProgressContainer, _extends({
-    theme: theme
-  }, rest), /*#__PURE__*/_react.default.createElement(Bar, {
+  return /*#__PURE__*/_react.default.createElement(ProgressContainer, rest, /*#__PURE__*/_react.default.createElement(Bar, {
     progress: progress,
-    bg: bg,
-    theme: theme
+    sx: {
+      bg
+    }
   }));
 }
 
 ProgressBar.displayName = "ProgressBar";
 ProgressBar.defaultProps = {
-  bg: 'green.5',
-  barSize: 'default',
-  theme: _theme.default
-};
-ProgressBar.propTypes = { ..._constants.COMMON.propTypes,
-  barSize: _propTypes2.default.oneOf(['small', 'default', 'large']),
-  inline: _propTypes2.default.bool,
-  progress: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-  ..._sx.default.propTypes,
-  theme: _propTypes2.default.object,
-  width: _propTypes.default.layout.width
+  bg: 'success.emphasis',
+  barSize: 'default'
 };
 var _default = ProgressBar;
 exports.default = _default;

package/lib/SelectMenu/SelectMenu.js

@@ -9,13 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _sx = _interopRequireDefault(require("../sx"));
 
-var _constants = require("../constants");
-
-var _theme = _interopRequireDefault(require("../theme"));
+var _useKeyboardNav = _interopRequireDefault(require("./hooks/useKeyboardNav"));
 
 var _SelectMenuContext = require("./SelectMenuContext");
 
@@ -25,29 +21,27 @@ var _SelectMenuFilter = _interopRequireDefault(require("./SelectMenuFilter"));
 
 var _SelectMenuFooter = _interopRequireDefault(require("./SelectMenuFooter"));
 
+var _SelectMenuHeader = _interopRequireDefault(require("./SelectMenuHeader"));
+
 var _SelectMenuItem = _interopRequireDefault(require("./SelectMenuItem"));
 
 var _SelectMenuList = _interopRequireDefault(require("./SelectMenuList"));
 
-var _SelectMenuModal = _interopRequireDefault(require("./SelectMenuModal"));
-
-var _SelectMenuTabs = _interopRequireDefault(require("./SelectMenuTabs"));
+var _SelectMenuLoadingAnimation = _interopRequireDefault(require("./SelectMenuLoadingAnimation"));
 
-var _SelectMenuHeader = _interopRequireDefault(require("./SelectMenuHeader"));
+var _SelectMenuModal = _interopRequireDefault(require("./SelectMenuModal"));
 
 var _SelectMenuTab = _interopRequireDefault(require("./SelectMenuTab"));
 
 var _SelectMenuTabPanel = _interopRequireDefault(require("./SelectMenuTabPanel"));
 
-var _SelectMenuLoadingAnimation = _interopRequireDefault(require("./SelectMenuLoadingAnimation"));
-
-var _useKeyboardNav = _interopRequireDefault(require("./hooks/useKeyboardNav"));
+var _SelectMenuTabs = _interopRequireDefault(require("./SelectMenuTabs"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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); }
 
@@ -68,17 +62,17 @@ const wrapperStyles = `
 
 const StyledSelectMenu = _styledComponents.default.details.withConfig({
   displayName: "SelectMenu__StyledSelectMenu",
-  componentId: "sc-12xd8o8-0"
-})(["", " ", " ", ";"], wrapperStyles, _constants.COMMON, _sx.default); // 'as' is spread out because we don't want users to be able to change the tag.
+  componentId: "i7h45b-0"
+})(["", " ", ";"], wrapperStyles, _sx.default);
 
-
-const SelectMenu = _react.default.forwardRef(({
+// 'as' is spread out because we don't want users to be able to change the tag.
+const SelectMenu = /*#__PURE__*/_react.default.forwardRef(({
   children,
-  initialTab,
-  as,
+  initialTab = '',
+  as: _ignoredAs,
   ...rest
 }, forwardedRef) => {
-  const backupRef = (0, _react.useRef)();
+  const backupRef = (0, _react.useRef)(null);
   const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
   const [selectedTab, setSelectedTab] = (0, _react.useState)(initialTab);
   const [open, setOpen] = (0, _react.useState)(false);
@@ -90,7 +84,7 @@ const SelectMenu = _react.default.forwardRef(({
     initialTab
   };
   const onClickOutside = (0, _react.useCallback)(event => {
-    if (ref.current && !ref.current.contains(event.target)) {
+    if ('current' in ref && ref.current && !ref.current.contains(event.target)) {
       if (!event.defaultPrevented) {
         setOpen(false);
       }
@@ -122,26 +116,20 @@ const SelectMenu = _react.default.forwardRef(({
 });
 
 SelectMenu.displayName = 'SelectMenu';
-SelectMenu.MenuContext = _SelectMenuContext.MenuContext;
-SelectMenu.List = _SelectMenuList.default;
-SelectMenu.Divider = _SelectMenuDivider.default;
-SelectMenu.Filter = _SelectMenuFilter.default;
-SelectMenu.Footer = _SelectMenuFooter.default;
-SelectMenu.Item = _SelectMenuItem.default;
-SelectMenu.List = _SelectMenuList.default;
-SelectMenu.Modal = _SelectMenuModal.default;
-SelectMenu.Tabs = _SelectMenuTabs.default;
-SelectMenu.Tab = _SelectMenuTab.default;
-SelectMenu.TabPanel = _SelectMenuTabPanel.default;
-SelectMenu.Header = _SelectMenuHeader.default;
-SelectMenu.LoadingAnimation = _SelectMenuLoadingAnimation.default;
-SelectMenu.defaultProps = {
-  theme: _theme.default
-};
-SelectMenu.propTypes = {
-  initialTab: _propTypes.default.string,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
-var _default = SelectMenu;
+
+var _default = Object.assign(SelectMenu, {
+  MenuContext: _SelectMenuContext.MenuContext,
+  List: _SelectMenuList.default,
+  Divider: _SelectMenuDivider.default,
+  Filter: _SelectMenuFilter.default,
+  Footer: _SelectMenuFooter.default,
+  Item: _SelectMenuItem.default,
+  Modal: _SelectMenuModal.default,
+  Tabs: _SelectMenuTabs.default,
+  Tab: _SelectMenuTab.default,
+  TabPanel: _SelectMenuTabPanel.default,
+  Header: _SelectMenuHeader.default,
+  LoadingAnimation: _SelectMenuLoadingAnimation.default
+});
+
 exports.default = _default;

package/lib/SelectMenu/SelectMenuContext.js

@@ -7,5 +7,5 @@ exports.MenuContext = void 0;
 
 var _react = require("react");
 
-const MenuContext = (0, _react.createContext)();
+const MenuContext = /*#__PURE__*/(0, _react.createContext)({});
 exports.MenuContext = MenuContext;

package/lib/SelectMenu/SelectMenuDivider.js

@@ -7,31 +7,23 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _theme = _interopRequireDefault(require("../theme"));
-
 var _constants = require("../constants");
 
 var _sx = _interopRequireDefault(require("../sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const dividerStyles = (0, _styledComponents.css)(["padding:", " ", ";margin:0;font-size:", ";font-weight:", ";color:", ";background-color:", ";border-bottom:", " solid ", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.text.grayLight'), (0, _constants.get)('colors.bg.gray'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.grayLight'));
+const dividerStyles = (0, _styledComponents.css)(["padding:", " ", ";margin:0;font-size:", ";font-weight:", ";color:", ";background-color:", ";border-bottom:", " solid ", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.muted'));
 
 const SelectMenuDivider = _styledComponents.default.div.withConfig({
   displayName: "SelectMenuDivider",
-  componentId: "hf146n-0"
-})(["", " ", " ", ";"], dividerStyles, _constants.COMMON, _sx.default);
-
-SelectMenuDivider.defaultProps = {
-  theme: _theme.default
-};
-SelectMenuDivider.propTypes = { ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
+  componentId: "sc-2p0bwt-0"
+})(["", " ", ";"], dividerStyles, _sx.default);
+
 SelectMenuDivider.displayName = 'SelectMenu.Divider';
 var _default = SelectMenuDivider;
 exports.default = _default;

package/lib/SelectMenu/SelectMenuFilter.js

@@ -9,35 +9,31 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
+var _sx = _interopRequireDefault(require("../sx"));
 
 var _TextInput = _interopRequireDefault(require("../TextInput"));
 
 var _SelectMenuContext = require("./SelectMenuContext");
 
-var _sx = _interopRequireDefault(require("../sx"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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); }
 
 const StyledForm = _styledComponents.default.form.withConfig({
   displayName: "SelectMenuFilter__StyledForm",
-  componentId: "k2jey9-0"
-})(["padding:", ";margin:0;border-top:", " solid ", ";background-color:", ";", ";@media (min-width:", "){padding:", ";}", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.gray'), (0, _constants.get)('colors.white'), _constants.COMMON, (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.2'), _sx.default);
+  componentId: "s7ktlh-0"
+})(["padding:", ";margin:0;border-bottom:", " solid ", ";background-color:", ";@media (min-width:", "){padding:", ";}", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.2'), _sx.default);
 
-const SelectMenuFilter = (0, _react.forwardRef)(({
+const SelectMenuFilter = /*#__PURE__*/(0, _react.forwardRef)(({
   theme,
   value,
-  sx,
+  sx: sxProp,
   ...rest
 }, forwardedRef) => {
   const inputRef = (0, _react.useRef)(null);
@@ -48,27 +44,23 @@ const SelectMenuFilter = (0, _react.forwardRef)(({
 
   (0, _react.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.default.createElement(StyledForm, {
     theme: theme,
-    sx: sx
+    sx: sxProp
   }, /*#__PURE__*/_react.default.createElement(_TextInput.default, _extends({
     theme: theme,
     ref: ref,
     width: "100%",
     block: true,
-    value: value
+    value: value,
+    contrast: true
   }, rest)));
 });
-SelectMenuFilter.defaultProps = {
-  theme: _theme.default
-};
-SelectMenuFilter.propTypes = { ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes,
-  value: _propTypes.default.string
-};
 SelectMenuFilter.displayName = 'SelectMenu.Filter';
 var _default = SelectMenuFilter;
 exports.default = _default;

package/lib/SelectMenu/SelectMenuFooter.js

@@ -9,29 +9,21 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
-
 var _sx = _interopRequireDefault(require("../sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const footerStyles = (0, _styledComponents.css)(["margin-top:-1px;padding:", " ", ";font-size:", ";color:", ";text-align:center;border-top:", " solid ", ";@media (min-width:", "){padding:", " ", ";}"], (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('colors.text.grayLight'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.gray'), (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.1'), (0, _constants.get)('space.2'));
+const footerStyles = (0, _styledComponents.css)(["margin-top:-1px;padding:", " ", ";font-size:", ";color:", ";text-align:center;border-top:", " solid ", ";@media (min-width:", "){padding:", " ", ";}"], (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.1'), (0, _constants.get)('space.2'));
 
 const SelectMenuFooter = _styledComponents.default.footer.withConfig({
   displayName: "SelectMenuFooter",
-  componentId: "sc-1uzxr7t-0"
-})(["", " ", " ", ";"], footerStyles, _constants.COMMON, _sx.default);
-
-SelectMenuFooter.defaultProps = {
-  theme: _theme.default
-};
-SelectMenuFooter.propTypes = { ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
+  componentId: "rkvco1-0"
+})(["", " ", ";"], footerStyles, _sx.default);
+
 SelectMenuFooter.displayName = 'SelectMenu.Footer';
 var _default = SelectMenuFooter;
 exports.default = _default;

package/lib/SelectMenu/SelectMenuHeader.js

@@ -9,12 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
-
 var _sx = _interopRequireDefault(require("../sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,13 +21,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 // SelectMenu.Modal
 const SelectMenuTitle = _styledComponents.default.h3.withConfig({
   displayName: "SelectMenuHeader__SelectMenuTitle",
-  componentId: "sc-1njvopm-0"
-})(["flex:auto;font-size:", ";font-weight:", ";margin:0;@media (min-width:", "){font-size:inherit;}"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('breakpoints.0'));
+  componentId: "sc-1pwppzc-0"
+})(["color:", ";flex:auto;font-size:", ";font-weight:", ";margin:0;@media (min-width:", "){font-size:inherit;}"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('fontSizes.1'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('breakpoints.0'));
 
 const StyledHeader = _styledComponents.default.header.withConfig({
   displayName: "SelectMenuHeader__StyledHeader",
-  componentId: "sc-1njvopm-1"
-})(["display:flex;flex:none;padding:", ";border-bottom:", " solid ", ";", " ", " @media (min-width:", "){padding-top:", ";padding-bottom:", ";}", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('borderWidths'), (0, _constants.get)('colors.border.gray'), _constants.COMMON, _constants.TYPOGRAPHY, (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), _sx.default);
+  componentId: "sc-1pwppzc-1"
+})(["display:flex;flex:none;padding:", ";border-bottom:", " solid ", ";@media (min-width:", "){padding-top:", ";padding-bottom:", ";}", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('borderWidths'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'), _sx.default);
 
 const SelectMenuHeader = ({
   children,
@@ -46,15 +42,6 @@ const SelectMenuHeader = ({
 };
 
 SelectMenuHeader.displayName = "SelectMenuHeader";
-SelectMenuHeader.defaultProps = {
-  theme: _theme.default
-};
-SelectMenuHeader.propTypes = {
-  theme: _propTypes.default.object,
-  ..._constants.COMMON.propTypes,
-  ..._constants.TYPOGRAPHY.propTypes,
-  ..._sx.default.propTypes
-};
 SelectMenuHeader.displayName = 'SelectMenu.Header';
 var _default = SelectMenuHeader;
 exports.default = _default;