@zendeskgarden/react-dropdowns.legacy 9.0.0-next.7 → 9.0.0-next.9

package/dist/esm/utils/useItemContext.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useContext } from 'react';
+
+const ItemContext = React__default.createContext(undefined);
+const useItemContext = () => {
+  const context = useContext(ItemContext);
+  if (!context) {
+    throw new Error('This component must be rendered within an `Item` component.');
+  }
+  return context;
+};
+
+export { ItemContext, useItemContext as default };

package/dist/esm/utils/useMenuContext.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default, { useContext } from 'react';
+
+const MenuContext = React__default.createContext(undefined);
+const useMenuContext = () => {
+  const menuContext = useContext(MenuContext);
+  if (!menuContext) {
+    throw new Error('This component must be rendered within a `Menu` component.');
+  }
+  return menuContext;
+};
+
+export { MenuContext, useMenuContext as default };

package/dist/index.cjs.js

@@ -1,10 +1,9 @@
 /**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
 'use strict';
 
 var React = require('react');
@@ -45,21 +44,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var Downshift__default = /*#__PURE__*/_interopDefault(Downshift);
 
-function _extends$5() {
-  _extends$5 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$5.apply(this, arguments);
-}
-
 const DropdownContext = React__namespace.default.createContext(undefined);
 const useDropdownContext = () => {
   const dropdownContext = React.useContext(DropdownContext);
@@ -142,7 +126,7 @@ const Dropdown = props => {
       ...downshift
     };
   };
-  return React__namespace.default.createElement(reactPopper.Manager, null, React__namespace.default.createElement(Downshift__default.default, _extends$5({
+  return React__namespace.default.createElement(reactPopper.Manager, null, React__namespace.default.createElement(Downshift__default.default, Object.assign({
     suppressRefError: true
     ,
     isOpen: isOpen,
@@ -305,7 +289,7 @@ function getMenuPosition(popperPlacement) {
 const COMPONENT_ID$m = 'dropdowns.menu';
 const StyledMenu = styled__default.default.ul.attrs(props => ({
   'data-garden-id': COMPONENT_ID$m,
-  'data-garden-version': '9.0.0-next.7',
+  'data-garden-version': '9.0.0-next.9',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenu",
@@ -322,7 +306,7 @@ StyledMenu.defaultProps = {
 const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
 const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '9.0.0-next.7',
+  'data-garden-version': '9.0.0-next.9',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
@@ -341,7 +325,7 @@ StyledMenuWrapper.defaultProps = {
 const COMPONENT_ID$k = 'dropdowns.separator';
 const StyledSeparator = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '9.0.0-next.7',
+  'data-garden-version': '9.0.0-next.9',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
@@ -374,7 +358,7 @@ const getColorStyles = props => {
 };
 const StyledItem = styled__default.default.li.attrs(props => ({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '9.0.0-next.7',
+  'data-garden-version': '9.0.0-next.9',
   'aria-disabled': props.disabled
 })).withConfig({
   displayName: "StyledItem",
@@ -387,7 +371,7 @@ StyledItem.defaultProps = {
 const COMPONENT_ID$i = 'dropdowns.add_item';
 const StyledAddItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-mlto71-0"
@@ -399,7 +383,7 @@ StyledAddItem.defaultProps = {
 const COMPONENT_ID$h = 'dropdowns.item_meta';
 const StyledItemMeta = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1m3x8m1-0"
@@ -414,7 +398,7 @@ const getSizeStyles = props => {
 };
 const StyledItemIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-pspm80-0"
@@ -426,7 +410,7 @@ StyledItemIcon.defaultProps = {
 const COMPONENT_ID$f = 'dropdowns.next_item';
 const StyledNextItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1wrjlge-0"
@@ -458,7 +442,7 @@ const NextIconComponent = _ref => {
   } = _ref;
   return React__namespace.default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID$e,
-    "data-garden-version": '9.0.0-next.7',
+    "data-garden-version": '9.0.0-next.9',
     className: className
   });
 };
@@ -473,7 +457,7 @@ StyledNextIcon.defaultProps = {
 const COMPONENT_ID$d = 'dropdowns.previous_item';
 const StyledPreviousItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1qv9jwe-0"
@@ -505,7 +489,7 @@ const PreviousIconComponent = _ref => {
   } = _ref;
   return React__namespace.default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID$c,
-    "data-garden-version": '9.0.0-next.7',
+    "data-garden-version": '9.0.0-next.9',
     className: className
   });
 };
@@ -520,7 +504,7 @@ StyledPreviousIcon.defaultProps = {
 const COMPONENT_ID$b = 'dropdowns.header_icon';
 const StyledHeaderIcon = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-ow8s45-0"
@@ -538,7 +522,7 @@ const getHorizontalPadding = props => {
 };
 const StyledHeaderItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-1xosinr-0"
@@ -550,7 +534,7 @@ StyledHeaderItem.defaultProps = {
 const COMPONENT_ID$9 = 'dropdowns.media_body';
 const StyledMediaBody = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-133sssc-0"
@@ -573,7 +557,7 @@ _ref => {
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-16vz3xj-0"
@@ -585,7 +569,7 @@ StyledMediaFigure.defaultProps = {
 const COMPONENT_ID$7 = 'dropdowns.media_item';
 const StyledMediaItem = styled__default.default(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-af4509-0"
@@ -597,7 +581,7 @@ StyledMediaItem.defaultProps = {
 const COMPONENT_ID$6 = 'dropdowns.faux_input';
 const StyledFauxInput = styled__default.default(reactForms.FauxInput).attrs(props => ({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.7',
+  'data-garden-version': '9.0.0-next.9',
   mediaLayout: true,
   theme: props.theme
 })).withConfig({
@@ -612,7 +596,7 @@ const COMPONENT_ID$5 = 'dropdowns.input';
 const hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.7',
+  'data-garden-version': '9.0.0-next.9',
   isBare: true
 }).withConfig({
   displayName: "StyledInput",
@@ -625,7 +609,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$4 = 'dropdowns.select';
 const StyledSelect = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledSelect",
   componentId: "sc-xf4qjv-0"
@@ -646,7 +630,7 @@ const visibleStyling = props => {
 };
 const StyledMultiselectInput = styled__default.default(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.7',
+  'data-garden-version': '9.0.0-next.9',
   isBare: true
 }).withConfig({
   displayName: "StyledMultiselectInput",
@@ -671,7 +655,7 @@ const sizeStyles = props => {
 };
 const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMultiselectItemsContainer",
   componentId: "sc-1dxwjyz-0"
@@ -683,7 +667,7 @@ StyledMultiselectItemsContainer.defaultProps = {
 const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
 const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-vgr7nd-0"
@@ -695,7 +679,7 @@ StyledMultiselectItemWrapper.defaultProps = {
 const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
 const StyledMultiselectMoreAnchor = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.7'
+  'data-garden-version': '9.0.0-next.9'
 }).withConfig({
   displayName: "StyledMultiselectMoreAnchor",
   componentId: "sc-pkakky-0"
@@ -934,7 +918,7 @@ const Autocomplete = React.forwardRef((_ref, ref) => {
     let {
       ref: popperReference
     } = _ref2;
-    return React__namespace.default.createElement(StyledFauxInput, _extends$5({
+    return React__namespace.default.createElement(StyledFauxInput, Object.assign({
       isHovered: isContainerHovered,
       isFocused: isContainerFocused,
       tabIndex: null,
@@ -1056,7 +1040,7 @@ const Combobox = React.forwardRef((_ref, ref) => {
       reactMergeRefs.mergeRefs([wrapperRef, ref])(element);
       popperReferenceElementRef.current = element;
     };
-    return React__namespace.default.createElement(reactForms.MediaInput, _extends$5({}, inputProps, {
+    return React__namespace.default.createElement(reactForms.MediaInput, Object.assign({}, inputProps, {
       wrapperProps: wrapperProps,
       wrapperRef: wrapperRefProp,
       ref: reactMergeRefs.mergeRefs([inputRef, inputRefProp])
@@ -1458,7 +1442,7 @@ const Select = React__namespace.default.forwardRef((_ref, ref) => {
     let {
       ref: popperReference
     } = _ref2;
-    return React__namespace.default.createElement(StyledFauxInput, _extends$5({
+    return React__namespace.default.createElement(StyledFauxInput, Object.assign({
       isHovered: isContainerHovered,
       isFocused: isContainerFocused
     }, selectProps, {
@@ -1517,13 +1501,13 @@ const Field = React.forwardRef((props, fieldRef) => {
   }), [isLabelHovered, setIsLabelHovered]);
   return React__namespace.default.createElement(FieldContext.Provider, {
     value: value
-  }, React__namespace.default.createElement(reactForms.Field, _extends$5({
+  }, React__namespace.default.createElement(reactForms.Field, Object.assign({
     ref: reactMergeRefs.mergeRefs([ref, fieldRef])
   }, props)));
 });
 Field.displayName = 'Field';
 
-const Hint = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(reactForms.Hint, _extends$5({
+const Hint = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(reactForms.Hint, Object.assign({
   ref: ref
 }, props)));
 Hint.displayName = 'Hint';
@@ -1551,7 +1535,7 @@ const Label = React__namespace.default.forwardRef((_ref, ref) => {
     }),
     ...other
   });
-  return React__namespace.default.createElement(reactForms.Label, _extends$5({
+  return React__namespace.default.createElement(reactForms.Label, Object.assign({
     ref: ref
   }, labelProps));
 });
@@ -1560,7 +1544,7 @@ Label.propTypes = {
   isRegular: PropTypes__default.default.bool
 };
 
-const Message = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(reactForms.Message, _extends$5({
+const Message = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(reactForms.Message, Object.assign({
   ref: ref
 }, props)));
 Message.displayName = 'Message';
@@ -1670,7 +1654,7 @@ const Menu = React.forwardRef((props, menuRef) => {
         isHidden: !isOpen,
         isAnimated: menuProps.isAnimated,
         zIndex: zIndex
-      }, React__namespace.default.createElement(StyledMenu, _extends$5({
+      }, React__namespace.default.createElement(StyledMenu, Object.assign({
         ref: menuRef,
         isCompact: isCompact,
         maxHeight: maxHeight,
@@ -1700,7 +1684,7 @@ Menu.defaultProps = {
   zIndex: 1000
 };
 
-const Separator = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledSeparator, _extends$5({
+const Separator = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(StyledSeparator, Object.assign({
   ref: ref
 }, props)));
 Separator.displayName = 'Separator';
@@ -1816,7 +1800,7 @@ const Item = React__namespace.default.forwardRef((_ref, forwardRef) => {
   if (disabled) {
     return React__namespace.default.createElement(ItemContext.Provider, {
       value: contextValue
-    }, React__namespace.default.createElement(Component, _extends$5({
+    }, React__namespace.default.createElement(Component, Object.assign({
       ref: ref,
       disabled: disabled,
       isDanger: isDanger,
@@ -1861,7 +1845,7 @@ const AddItemComponent = React__namespace.default.forwardRef((_ref, ref) => {
   const {
     isCompact
   } = useMenuContext();
-  return React__namespace.default.createElement(StyledAddItem, _extends$5({
+  return React__namespace.default.createElement(StyledAddItem, Object.assign({
     ref: ref,
     disabled: disabled
   }, props), React__namespace.default.createElement(StyledItemIcon, {
@@ -1870,7 +1854,7 @@ const AddItemComponent = React__namespace.default.forwardRef((_ref, ref) => {
     isDisabled: disabled
   }, React__namespace.default.createElement(SvgPlusStroke, null)), children);
 });
-const AddItem = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(Item, _extends$5({
+const AddItem = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(Item, Object.assign({
   component: AddItemComponent,
   ref: ref
 }, props, {
@@ -1886,7 +1870,7 @@ const HeaderIcon = React__namespace.default.forwardRef((props, ref) => {
   const {
     isCompact
   } = useMenuContext();
-  return React__namespace.default.createElement(StyledHeaderIcon, _extends$5({
+  return React__namespace.default.createElement(StyledHeaderIcon, Object.assign({
     ref: ref,
     isCompact: isCompact
   }, props));
@@ -1897,7 +1881,7 @@ const HeaderItem = React__namespace.default.forwardRef((props, ref) => {
   const {
     isCompact
   } = useMenuContext();
-  return React__namespace.default.createElement(StyledHeaderItem, _extends$5({
+  return React__namespace.default.createElement(StyledHeaderItem, Object.assign({
     ref: ref,
     isCompact: isCompact
   }, props));
@@ -1911,7 +1895,7 @@ const ItemMeta = React__namespace.default.forwardRef((props, ref) => {
   const {
     isDisabled
   } = useItemContext();
-  return React__namespace.default.createElement(StyledItemMeta, _extends$5({
+  return React__namespace.default.createElement(StyledItemMeta, Object.assign({
     ref: ref,
     isCompact: isCompact,
     isDisabled: isDisabled
@@ -1923,7 +1907,7 @@ const MediaBody = React__namespace.default.forwardRef((props, ref) => {
   const {
     isCompact
   } = useMenuContext();
-  return React__namespace.default.createElement(StyledMediaBody, _extends$5({
+  return React__namespace.default.createElement(StyledMediaBody, Object.assign({
     ref: ref,
     isCompact: isCompact
   }, props));
@@ -1934,12 +1918,12 @@ const MediaFigure = props => {
   const {
     isCompact
   } = useMenuContext();
-  return React__namespace.default.createElement(StyledMediaFigure, _extends$5({
+  return React__namespace.default.createElement(StyledMediaFigure, Object.assign({
     isCompact: isCompact
   }, props));
 };
 
-const MediaItem = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(Item, _extends$5({
+const MediaItem = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(Item, Object.assign({
   component: StyledMediaItem,
   ref: ref
 }, props)));
@@ -1958,7 +1942,7 @@ const NextItemComponent = React__namespace.default.forwardRef((_ref, ref) => {
   const {
     isCompact
   } = useMenuContext();
-  return React__namespace.default.createElement(StyledNextItem, _extends$5({
+  return React__namespace.default.createElement(StyledNextItem, Object.assign({
     ref: ref,
     disabled: disabled
   }, props), React__namespace.default.createElement(StyledItemIcon, {
@@ -1987,7 +1971,7 @@ const NextItem = React__namespace.default.forwardRef((_ref2, ref) => {
   if (!disabled) {
     nextItemsHashRef.current[itemToString(value)] = itemIndexRef.current;
   }
-  return React__namespace.default.createElement(Item, _extends$5({
+  return React__namespace.default.createElement(Item, Object.assign({
     component: NextItemComponent,
     "aria-expanded": true,
     disabled: disabled,
@@ -2012,7 +1996,7 @@ const PreviousItemComponent = React__namespace.default.forwardRef((_ref, ref) =>
   const {
     isCompact
   } = useMenuContext();
-  return React__namespace.default.createElement(StyledPreviousItem, _extends$5({
+  return React__namespace.default.createElement(StyledPreviousItem, Object.assign({
     ref: ref,
     disabled: disabled
   }, props), React__namespace.default.createElement(StyledItemIcon, {
@@ -2038,7 +2022,7 @@ const PreviousItem = React__namespace.default.forwardRef((_ref2, ref) => {
   if (!disabled) {
     previousIndexRef.current = itemIndexRef.current;
   }
-  return React__namespace.default.createElement(Item, _extends$5({
+  return React__namespace.default.createElement(Item, Object.assign({
     component: PreviousItemComponent,
     "aria-expanded": true,
     value: value,

package/dist/typings/styled/select/StyledFauxInput.d.ts

@@ -7,11 +7,11 @@
 /// <reference types="react" />
 export declare const StyledFauxInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-forms").IFauxInputProps & import("react").RefAttributes<HTMLDivElement>> & {
     EndIcon: {
-        (props: import("@zendeskgarden/react-forms").IFauxInputStartIconProps): import("react").JSX.Element;
+        ({ isDisabled, isRotated, ...props }: import("@zendeskgarden/react-forms").IFauxInputStartIconProps): import("react").JSX.Element;
         displayName: string;
     };
     StartIcon: {
-        (props: import("@zendeskgarden/react-forms").IFauxInputStartIconProps): import("react").JSX.Element;
+        ({ isDisabled, isRotated, ...props }: import("@zendeskgarden/react-forms").IFauxInputStartIconProps): import("react").JSX.Element;
         displayName: string;
     };
 }, import("styled-components").DefaultTheme, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-dropdowns.legacy",
-  "version": "9.0.0-next.7",
+  "version": "9.0.0-next.9",
   "description": "Components relating to dropdowns in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
     "url": "https://github.com/zendeskgarden/react-components/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/esm/index.js",
   "files": [
     "dist"
   ],
@@ -23,7 +23,7 @@
   "dependencies": {
     "@zendeskgarden/container-selection": "^2.0.0",
     "@zendeskgarden/container-utilities": "^1.0.14",
-    "@zendeskgarden/react-forms": "^9.0.0-next.7",
+    "@zendeskgarden/react-forms": "^9.0.0-next.9",
     "downshift": "^7.0.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
@@ -31,14 +31,14 @@
     "react-popper": "^1.3.4"
   },
   "peerDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0",
+    "@zendeskgarden/react-theming": ">=9.0.0-next",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9",
-    "@zendeskgarden/react-theming": "^9.0.0-next.7",
+    "@zendeskgarden/react-theming": "^9.0.0-next.9",
     "@zendeskgarden/svg-icons": "7.0.0",
     "lodash.debounce": "4.0.8"
   },
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "50a2b45b2e237a490a6d460818d33498b92479ec"
+  "gitHead": "771281b562d376a6aee04b0cd71dd888b3ae4a1d"
 }