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

package/dist/esm/elements/Autocomplete/Autocomplete.js

@@ -104,7 +104,7 @@ const Autocomplete = forwardRef((_ref, ref) => {
         mergeRefs([triggerRef, ref])(selectRef);
         popperReferenceElementRef.current = selectRef;
       }
-    }), start && React__default.createElement(StyledFauxInput.StartIcon, {
+    }), !!start && React__default.createElement(StyledFauxInput.StartIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled

package/dist/esm/elements/Menu/Items/Item.js

@@ -106,7 +106,7 @@ const Item = React__default.forwardRef((_ref, forwardRef) => {
       disabled: disabled,
       isDanger: isDanger,
       isCompact: isCompact
-    }, props), isSelected && !hasIcon && React__default.createElement(StyledItemIcon, {
+    }, props), !!isSelected && !hasIcon && React__default.createElement(StyledItemIcon, {
       isCompact: isCompact,
       isVisible: isSelected,
       isDisabled: disabled
@@ -126,7 +126,7 @@ const Item = React__default.forwardRef((_ref, forwardRef) => {
       'aria-selected': null
     }),
     ...props
-  }), isSelected && !hasIcon && React__default.createElement(StyledItemIcon, {
+  }), !!isSelected && !hasIcon && React__default.createElement(StyledItemIcon, {
     isCompact: isCompact,
     isVisible: isSelected
   }, React__default.createElement(SvgCheckLgStroke, null)), children));

package/dist/esm/elements/Menu/Menu.js

@@ -97,7 +97,7 @@ const Menu = forwardRef((props, menuRef) => {
       placement: popperPlacement,
       modifiers: popperModifiers
       ,
-      eventsEnabled: isOpen && eventsEnabled
+      eventsEnabled: !!(isOpen && eventsEnabled)
     }, _ref => {
       let {
         ref,
@@ -132,7 +132,7 @@ const Menu = forwardRef((props, menuRef) => {
         isCompact: isCompact,
         maxHeight: maxHeight,
         style: computedStyle
-      }, menuProps), (isOpen || isVisible) && children));
+      }, menuProps), !!(isOpen || isVisible) && children));
       return appendToNode ? createPortal(menu, appendToNode) : menu;
     }))
   );

package/dist/esm/elements/Multiselect/Multiselect.js

@@ -252,7 +252,7 @@ const Multiselect = React__default.forwardRef((_ref, ref) => {
         popperReference(selectRef);
         mergeRefs([triggerRef, popperReferenceElementRef, ref])(selectRef);
       }
-    }), start && React__default.createElement(StyledFauxInput.StartIcon, {
+    }), !!start && React__default.createElement(StyledFauxInput.StartIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled

package/dist/esm/elements/Select/Select.js

@@ -158,7 +158,7 @@ const Select = React__default.forwardRef((_ref, ref) => {
         popperReference(selectRef);
         mergeRefs([triggerRef, ref, popperReferenceElementRef])(selectRef);
       }
-    }), start && React__default.createElement(StyledFauxInput.StartIcon, {
+    }), !!start && React__default.createElement(StyledFauxInput.StartIcon, {
       isHovered: isHovered || isLabelHovered && !isOpen,
       isFocused: isContainerFocused,
       isDisabled: props.disabled

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/plus-stroke.svg.js

@@ -7,7 +7,7 @@
 import * as React from 'react';
 
 var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgPlusStroke = function SvgPlusStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",

package/dist/esm/styled/items/StyledAddItem.js

@@ -5,19 +5,19 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledItem } from './StyledItem.js';
 
 const COMPONENT_ID = 'dropdowns.add_item';
 const StyledAddItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledAddItem",
   componentId: "sc-mlto71-0"
-})(["color:", ";", ";"], props => !props.disabled && getColorV8('primaryHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledAddItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["color:", ";", ";"], props => !props.disabled && getColor({
+  theme: props.theme,
+  variable: 'foreground.primary'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledAddItem };

package/dist/esm/styled/items/StyledItem.js

@@ -5,8 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
-import { rgba } from 'polished';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.item';
 const getItemPaddingVertical = props => {
@@ -16,29 +15,37 @@ const getItemPaddingVertical = props => {
   return `${props.theme.space.base * 2}px`;
 };
 const getColorStyles = props => {
+  const backgroundColor = props.isFocused ? getColor({
+    theme: props.theme,
+    variable: 'background.primaryEmphasis',
+    transparency: props.theme.opacity[100]
+  }) : 'inherit';
   let foregroundColor;
-  let backgroundColor;
   if (props.disabled) {
-    foregroundColor = getColorV8('neutralHue', 400, props.theme);
+    foregroundColor = getColor({
+      theme: props.theme,
+      variable: 'foreground.disabled'
+    });
   } else if (props.isDanger) {
-    foregroundColor = getColorV8('dangerHue', 600, props.theme);
-    backgroundColor = props.isFocused ? rgba(foregroundColor, 0.08) : 'inherit';
+    foregroundColor = getColor({
+      theme: props.theme,
+      variable: 'foreground.danger'
+    });
   } else {
-    foregroundColor = getColorV8('foreground', 600 , props.theme);
-    backgroundColor = props.isFocused ? getColorV8('primaryHue', 600, props.theme, 0.08) : 'inherit';
+    foregroundColor = getColor({
+      theme: props.theme,
+      variable: 'foreground.default'
+    });
   }
   return css(["background-color:", ";color:", ";& a,& a:hover,& a:focus,& a:active{color:inherit;}"], backgroundColor, foregroundColor);
 };
 const StyledItem = styled.li.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   'aria-disabled': props.disabled
 })).withConfig({
   displayName: "StyledItem",
   componentId: "sc-x4h8aw-0"
 })(["display:block;position:relative;z-index:0;cursor:", ";padding:", " ", "px;text-decoration:none;line-height:", "px;word-wrap:break-word;user-select:none;&:first-child{margin-top:", "px;}&:last-child{margin-bottom:", "px;}&:focus{outline:none;}& a,& a:hover,& a:focus,& a:active{text-decoration:none;}", ";", ";"], props => props.disabled ? 'default' : 'pointer', props => getItemPaddingVertical(props), props => props.theme.space.base * 9, props => props.theme.space.base * 5, props => props.theme.space.base, props => props.theme.space.base, props => getColorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledItem, getItemPaddingVertical };

package/dist/esm/styled/items/StyledItemIcon.js

@@ -6,7 +6,7 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import { getItemPaddingVertical } from './StyledItem.js';
 
 const COMPONENT_ID = 'dropdowns.item_icon';
@@ -15,13 +15,13 @@ const getSizeStyles = props => {
 };
 const StyledItemIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledItemIcon",
   componentId: "sc-pspm80-0"
-})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.isVisible ? '1' : '0', props => props.isDisabled ? 'inherit' : getColorV8('primaryHue', 600, props.theme), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
-StyledItemIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:flex;position:absolute;top:0;", ":", "px;align-items:center;justify-content:center;transition:opacity 0.1s ease-in-out;opacity:", ";color:", ";", ";& > *{width:", ";height:", ";}"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => props.isVisible ? '1' : '0', props => props.isDisabled ? 'inherit' : getColor({
+  theme: props.theme,
+  variable: 'foreground.primary'
+}), props => getSizeStyles(props), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md);
 
 export { StyledItemIcon };

package/dist/esm/styled/items/StyledItemMeta.js

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.item_meta';
 const StyledItemMeta = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledItemMeta",
   componentId: "sc-1m3x8m1-0"
-})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme), props => props.theme.fontSizes.sm, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledItemMeta.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:block;line-height:", "px;color:", ";font-size:", ";", ";"], props => props.theme.space.base * (props.isCompact ? 3 : 4), props => getColor({
+  theme: props.theme,
+  variable: props.isDisabled ? 'foreground.disabled' : 'foreground.subtle'
+}), props => props.theme.fontSizes.sm, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledItemMeta };

package/dist/esm/styled/items/StyledNextIcon.js

@@ -7,7 +7,7 @@
 import React__default from 'react';
 import styled from 'styled-components';
 import SvgChevronRightStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.next_item_icon';
 const NextIconComponent = _ref => {
@@ -16,16 +16,16 @@ const NextIconComponent = _ref => {
   } = _ref;
   return React__default.createElement(SvgChevronRightStroke, {
     "data-garden-id": COMPONENT_ID,
-    "data-garden-version": '9.0.0-next.9',
+    "data-garden-version": '9.0.0',
     className: className
   });
 };
 const StyledNextIcon = styled(NextIconComponent).withConfig({
   displayName: "StyledNextIcon",
   componentId: "sc-1nzkdnq-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledNextIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColor({
+  theme: props.theme,
+  variable: 'foreground.disabled'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledNextIcon };

package/dist/esm/styled/items/StyledNextItem.js

@@ -5,20 +5,17 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledItem } from './StyledItem.js';
 import { StyledItemIcon } from './StyledItemIcon.js';
 
 const COMPONENT_ID = 'dropdowns.next_item';
 const StyledNextItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledNextItem",
   componentId: "sc-1wrjlge-0"
 })(["", "{right:", ";left:", ";}", ";"], StyledItemIcon, props => props.theme.rtl ? 'auto' : `${props.theme.space.base * 3}px`, props => props.theme.rtl ? `${props.theme.space.base * 3}px` : 'auto', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledNextItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledNextItem };

package/dist/esm/styled/items/StyledPreviousIcon.js

@@ -7,7 +7,7 @@
 import React__default from 'react';
 import styled from 'styled-components';
 import SvgChevronLeftStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.previous_item_icon';
 const PreviousIconComponent = _ref => {
@@ -16,16 +16,16 @@ const PreviousIconComponent = _ref => {
   } = _ref;
   return React__default.createElement(SvgChevronLeftStroke, {
     "data-garden-id": COMPONENT_ID,
-    "data-garden-version": '9.0.0-next.9',
+    "data-garden-version": '9.0.0',
     className: className
   });
 };
 const StyledPreviousIcon = styled(PreviousIconComponent).withConfig({
   displayName: "StyledPreviousIcon",
   componentId: "sc-1n1t07s-0"
-})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledPreviousIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["transform:", ";color:", ";", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isDisabled ? 'inherit' : getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledPreviousIcon };

package/dist/esm/styled/items/StyledPreviousItem.js

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledItem } from './StyledItem.js';
 
 const COMPONENT_ID = 'dropdowns.previous_item';
 const StyledPreviousItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledPreviousItem",
   componentId: "sc-1qv9jwe-0"
 })(["font-weight:", ";", ";"], props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledPreviousItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledPreviousItem };

package/dist/esm/styled/items/header/StyledHeaderIcon.js

@@ -5,18 +5,18 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.header_icon';
 const StyledHeaderIcon = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledHeaderIcon",
   componentId: "sc-ow8s45-0"
-})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => getColorV8('neutralHue', 600, props.theme), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHeaderIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:flex;position:absolute;top:0;bottom:0;align-items:center;justify-content:center;", ":", "px;color:", ";& > *{width:", ";height:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 3, props => getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledHeaderIcon };

package/dist/esm/styled/items/header/StyledHeaderItem.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledItem } from '../StyledItem.js';
 
 const COMPONENT_ID = 'dropdowns.header_item';
@@ -17,13 +17,10 @@ const getHorizontalPadding = props => {
 };
 const StyledHeaderItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledHeaderItem",
   componentId: "sc-1xosinr-0"
 })(["cursor:default;padding-right:", ";padding-left:", ";font-weight:", ";", ";"], props => getHorizontalPadding(props), props => getHorizontalPadding(props), props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledHeaderItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledHeaderItem };

package/dist/esm/styled/items/media/StyledMediaBody.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.media_body';
 const StyledMediaBody = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledMediaBody",
   componentId: "sc-133sssc-0"
 })(["display:block;overflow:hidden;padding-", ":", "px;", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMediaBody.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMediaBody };

package/dist/esm/styled/items/media/StyledMediaFigure.js

@@ -6,7 +6,7 @@
 */
 import React__default, { Children } from 'react';
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.media_figure';
 const StyledMediaFigure = styled(
@@ -22,13 +22,10 @@ _ref => {
   );
 }).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledMediaFigure",
   componentId: "sc-16vz3xj-0"
 })(["float:", ";margin-top:", "px !important;width:", ";height:", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 0.5, props => props.theme.iconSizes.md, props => props.theme.iconSizes.md, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMediaFigure.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMediaFigure };

package/dist/esm/styled/items/media/StyledMediaItem.js

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledItem } from '../StyledItem.js';
 
 const COMPONENT_ID = 'dropdowns.media_item';
 const StyledMediaItem = styled(StyledItem).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledMediaItem",
   componentId: "sc-af4509-0"
 })(["", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMediaItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMediaItem };

package/dist/esm/styled/menu/StyledMenu.js

@@ -5,24 +5,21 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { arrowStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { arrowStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { getArrowPosition } from '../../utils/garden-placements.js';
 
 const COMPONENT_ID = 'dropdowns.menu';
 const StyledMenu = styled.ul.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-lzt5u6-0"
 })(["position:static !important;max-height:", ";overflow-y:auto;", ";", ";"], props => props.maxHeight, props => props.hasArrow && arrowStyles(getArrowPosition(props.placement), {
-  size: `${props.theme.space.base * 2}px`,
-  inset: '2px',
+  size: `${props.theme.space.base * 1.5}px`,
+  inset: '1px',
   animationModifier: props.isAnimated ? '.is-animated' : undefined
 }), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMenu.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMenu };

package/dist/esm/styled/menu/StyledMenuWrapper.js

@@ -5,13 +5,13 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { menuStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { menuStyles, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { getMenuPosition } from '../../utils/garden-placements.js';
 
 const COMPONENT_ID = 'dropdowns.menu_wrapper';
 const StyledMenuWrapper = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   className: props.isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
@@ -23,8 +23,5 @@ const StyledMenuWrapper = styled.div.attrs(props => ({
   zIndex: props.zIndex,
   animationModifier: props.isAnimated ? '.is-animated' : undefined
 }), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMenuWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMenuWrapper };

package/dist/esm/styled/menu/StyledSeparator.js

@@ -5,19 +5,19 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.separator';
 const StyledSeparator = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   role: 'separator'
 }).withConfig({
   displayName: "StyledSeparator",
   componentId: "sc-oncsf0-0"
-})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSeparator.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:block;margin:", "px 0;border-bottom:", ";", ";"], props => props.theme.space.base, props => `${props.theme.borders.sm} ${getColor({
+  theme: props.theme,
+  variable: 'border.subtle'
+})}`, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSeparator };

package/dist/esm/styled/multiselect/StyledMultiselectInput.js

@@ -5,7 +5,7 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 import { StyledInput } from '../select/StyledInput.js';
 
 const COMPONENT_ID = 'dropdowns.multiselect_input';
@@ -20,14 +20,11 @@ const visibleStyling = props => {
 };
 const StyledMultiselectInput = styled(StyledInput).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.0.0',
   isBare: true
 }).withConfig({
   displayName: "StyledMultiselectInput",
   componentId: "sc-iiow29-0"
 })(["flex-basis:", "px;flex-grow:1;align-self:center;min-height:0;", ";", ";"], props => props.theme.space.base * 15, props => visibleStyling(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMultiselectInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMultiselectInput };

package/dist/esm/styled/multiselect/StyledMultiselectItemWrapper.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'dropdowns.multiselect_item_wrapper';
 const StyledMultiselectItemWrapper = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.0.0'
 }).withConfig({
   displayName: "StyledMultiselectItemWrapper",
   componentId: "sc-vgr7nd-0"
 })(["display:inline-flex;align-items:center;margin:", "px;max-width:100%;", ";"], props => props.theme.space.base / 2, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledMultiselectItemWrapper.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledMultiselectItemWrapper };