@zendeskgarden/react-datepickers 9.0.0-next.18 → 9.0.0-next.19

package/dist/esm/elements/DatePicker/DatePicker.js

@@ -128,10 +128,10 @@ const DatePicker = forwardRef((props, calendarRef) => {
     style: {
       transform
     },
-    isHidden: !state.isOpen,
-    isAnimated: isAnimated && (state.isOpen || isVisible),
-    placement: placement,
-    zIndex: zIndex
+    $isAnimated: isAnimated && (state.isOpen || isVisible),
+    $placement: placement,
+    $zIndex: zIndex,
+    "aria-hidden": !state.isOpen || undefined
   }, (state.isOpen || isVisible) && React__default.createElement(StyledMenu, menuProps, React__default.createElement(Calendar, {
     ref: calendarRef,
     isCompact: isCompact,

package/dist/esm/elements/DatePicker/components/Calendar.js

@@ -68,9 +68,9 @@ const Calendar = forwardRef((_ref, ref) => {
     const formattedDayLabel = dayLabelFormatter(date);
     return React__default.createElement(StyledCalendarItem, {
       key: `day-label-${formattedDayLabel}`,
-      isCompact: isCompact
+      $isCompact: isCompact
     }, React__default.createElement(StyledDayLabel, {
-      isCompact: isCompact
+      $isCompact: isCompact
     }, formattedDayLabel));
   });
   const items = eachDayOfInterval({
@@ -90,13 +90,13 @@ const Calendar = forwardRef((_ref, ref) => {
     }
     return React__default.createElement(StyledCalendarItem, {
       key: `day-${itemsIndex}`,
-      isCompact: isCompact
+      $isCompact: isCompact
     }, React__default.createElement(StyledDay, {
-      isToday: isCurrentDate,
-      isPreviousMonth: isPreviousMonth,
-      isSelected: isSelected,
-      isDisabled: isDisabled,
-      isCompact: isCompact,
+      $isToday: isCurrentDate,
+      $isPreviousMonth: isPreviousMonth,
+      $isCompact: isCompact,
+      "aria-selected": isSelected || undefined,
+      "aria-disabled": isDisabled || undefined,
       onClick: () => {
         if (!isDisabled) {
           dispatch({
@@ -109,7 +109,7 @@ const Calendar = forwardRef((_ref, ref) => {
   });
   return React__default.createElement(StyledDatePicker, {
     ref: ref,
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onMouseDown: e => {
       e.preventDefault();
     }
@@ -117,7 +117,7 @@ const Calendar = forwardRef((_ref, ref) => {
     locale: locale,
     isCompact: isCompact
   }), React__default.createElement(StyledCalendar, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, dayLabels, items));
 });
 Calendar.displayName = 'Calendar';

package/dist/esm/elements/DatePicker/components/MonthSelector.js

@@ -38,18 +38,18 @@ const MonthSelector = _ref => {
     return formatter.format(date);
   }, [locale]);
   return React__default.createElement(StyledHeader, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, React__default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_PREVIOUS_MONTH'
       });
     }
   }, React__default.createElement(SvgChevronLeftStroke, null)), React__default.createElement(StyledHeaderLabel, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, headerLabelFormatter(state.previewDate)), React__default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_NEXT_MONTH'

package/dist/esm/elements/DatePickerRange/components/Calendar.js

@@ -28,7 +28,7 @@ const Calendar = forwardRef((props, ref) => {
   return React__default.createElement(StyledRangeCalendar, Object.assign({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.0.0-next.18'
+    "data-garden-version": '9.0.0-next.19'
   }, props), React__default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true

package/dist/esm/elements/DatePickerRange/components/Month.js

@@ -88,9 +88,9 @@ const Month = forwardRef((_ref, ref) => {
     const formattedDayLabel = dayLabelFormatter(date);
     return React__default.createElement(StyledCalendarItem, {
       key: `day-label-${formattedDayLabel}`,
-      isCompact: isCompact
+      $isCompact: isCompact
     }, React__default.createElement(StyledDayLabel, {
-      isCompact: isCompact
+      $isCompact: isCompact
     }, formattedDayLabel));
   });
   const items = eachDayOfInterval({
@@ -103,11 +103,11 @@ const Month = forwardRef((_ref, ref) => {
     if (isPreviousMonth) {
       return React__default.createElement(StyledCalendarItem, {
         key: `day-${itemsIndex}`,
-        isCompact: isCompact
+        $isCompact: isCompact
       }, React__default.createElement(StyledDay, {
-        isCompact: isCompact,
-        isPreviousMonth: true,
-        isDisabled: true
+        $isCompact: isCompact,
+        $isPreviousMonth: true,
+        "aria-disabled": true
       }, "\xA0"));
     }
     let isSelected = false;
@@ -151,17 +151,17 @@ const Month = forwardRef((_ref, ref) => {
     }
     return React__default.createElement(StyledCalendarItem, {
       key: `day-${itemsIndex}`,
-      isCompact: isCompact
+      $isCompact: isCompact
     }, React__default.createElement(StyledHighlight, {
-      isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
-      isStart: !isInvalidDateRange && isHighlightStart,
-      isEnd: !isInvalidDateRange && isHighlightEnd
+      $isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
+      $isStart: !isInvalidDateRange && isHighlightStart,
+      $isEnd: !isInvalidDateRange && isHighlightEnd
     }), React__default.createElement(StyledDay, {
-      isToday: isCurrentDate,
-      isPreviousMonth: isPreviousMonth,
-      isSelected: !isInvalidDateRange && isSelected,
-      isDisabled: isDisabled,
-      isCompact: isCompact,
+      $isToday: isCurrentDate,
+      $isPreviousMonth: isPreviousMonth,
+      "aria-selected": !isInvalidDateRange && isSelected || undefined,
+      "aria-disabled": isDisabled || undefined,
+      $isCompact: isCompact,
       onClick: () => {
         if (!isDisabled) {
           dispatch({
@@ -231,32 +231,32 @@ const Month = forwardRef((_ref, ref) => {
   });
   return React__default.createElement(StyledDatePicker, {
     ref: ref,
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onMouseDown: e => {
       e.preventDefault();
     }
   }, React__default.createElement(StyledHeader, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, React__default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_PREVIOUS_MONTH'
       });
     },
-    isHidden: isPreviousHidden
+    "aria-hidden": isPreviousHidden || undefined
   }, React__default.createElement(SvgChevronLeftStroke, null)), React__default.createElement(StyledHeaderLabel, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, headerLabelFormatter(displayDate)), React__default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
-    isHidden: isNextHidden,
+    $isCompact: isCompact,
+    "aria-hidden": isNextHidden || undefined,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_NEXT_MONTH'
       });
     }
   }, React__default.createElement(SvgChevronRightStroke, null))), React__default.createElement(StyledCalendar, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onMouseLeave: () => {
       dispatch({
         type: 'HOVER_DATE',

package/dist/esm/styled/StyledCalendar.js

@@ -9,11 +9,12 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 
 const COMPONENT_ID = 'datepickers.calendar';
 const StyledCalendar = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledCalendar",
   componentId: "sc-g5hoe8-0"
-})(["width:", "px;", ";"], props => props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["width:", "px;", ";"], props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledCalendar.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledCalendarItem.js

@@ -8,13 +8,13 @@ import styled, { css } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'datepickers.calendar_item';
-const retrieveSize = _ref => {
+const sizeStyles = _ref => {
   let {
-    isCompact,
+    $isCompact,
     theme
   } = _ref;
   let size;
-  if (isCompact) {
+  if ($isCompact) {
     size = `${theme.space.base * 8}px`;
   } else {
     size = `${theme.space.base * 10}px`;
@@ -22,13 +22,14 @@ const retrieveSize = _ref => {
   return css(["width:", ";height:", ";"], size, size);
 };
 const StyledCalendarItem = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledCalendarItem",
   componentId: "sc-143w8wb-0"
-})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], retrieveSize, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledCalendarItem.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledCalendarItem, retrieveSize };
+export { StyledCalendarItem, sizeStyles };

package/dist/esm/styled/StyledDatePicker.js

@@ -4,27 +4,35 @@
 * 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 styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'datepickers.datepicker';
-const retrievePadding = _ref => {
+const sizeStyles = _ref => {
   let {
-    isCompact,
+    $isCompact,
     theme
   } = _ref;
-  let value = theme.space.base * 5;
-  if (isCompact) {
-    value = theme.space.base * 4;
-  }
-  return `margin: ${value}px;`;
+  const margin = theme.space.base * ($isCompact ? 4 : 5);
+  return css(["margin:", "px;"], margin);
+};
+const colorStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const foreground = getColor({
+    variable: 'foreground.default',
+    theme
+  });
+  return css(["background-color:transparent;color:", ";"], foreground);
 };
 const StyledDatePicker = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledDatePicker",
   componentId: "sc-15hwqzh-0"
-})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => getColorV8('background', 600 , props.theme), props => getColorV8('foreground', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["direction:", ";", " ", " ", ";"], p => p.theme.rtl && 'rtl', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledDatePicker.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledDay.js

@@ -5,48 +5,89 @@
 * 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 { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
-const retrieveStyledDayColors = _ref => {
+const sizeStyles = () => {
+  return css(["border-radius:50%;width:100%;height:100%;"]);
+};
+const colorStyles = _ref => {
   let {
-    isSelected,
-    isDisabled,
-    isToday,
-    isPreviousMonth,
-    theme
+    $isToday,
+    $isPreviousMonth,
+    theme,
+    ...props
   } = _ref;
+  const isSelected = props['aria-selected'];
+  const isDisabled = props['aria-disabled'];
   let backgroundColor = 'inherit';
-  let color = getColorV8('primaryHue', 600, theme);
+  let foreground;
+  const backgroundHover = getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[100]
+  });
+  const foregroundHover = !$isToday && getColor({
+    variable: 'foreground.primary',
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const backgroundActive = getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[200]
+  });
+  const foregroundActive = !$isToday && getColor({
+    variable: 'foreground.primary',
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
   if (isSelected && !isDisabled) {
-    backgroundColor = getColorV8('primaryHue', 600, theme);
-    color = getColorV8('background', 600 , theme);
+    backgroundColor = getColor({
+      variable: 'background.primaryEmphasis',
+      theme
+    });
+    foreground = getColor({
+      variable: 'foreground.onEmphasis',
+      theme
+    });
   } else if (isDisabled) {
-    color = getColorV8('neutralHue', 400, theme);
-  } else if (isToday) {
-    color = 'inherit';
-  } else if (isPreviousMonth) {
-    color = getColorV8('neutralHue', 600, theme);
+    foreground = getColor({
+      variable: 'foreground.disabled',
+      theme
+    });
+  } else if ($isToday) {
+    foreground = 'inherit';
+  } else if ($isPreviousMonth) {
+    foreground = getColor({
+      variable: 'foreground.subtle',
+      theme
+    });
+  } else {
+    foreground = getColor({
+      variable: 'foreground.primary',
+      theme
+    });
   }
-  return css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
-      :hover {
-        background-color: ${getColorV8('primaryHue', 600, theme, 0.08)};
-        color: ${getColorV8('primaryHue', 800, theme)};
-      }
-
-      :active {
-        background-color: ${getColorV8('primaryHue', 600, theme, 0.2)};
-        color: ${getColorV8('primaryHue', 800, theme)};
-      }
-  `);
+  return css(["background-color:", ";color:", ";&:not([aria-disabled]):not([aria-selected]):hover{background-color:", ";color:", ";}&:not([aria-disabled]):not([aria-selected]):active{background-color:", ";color:", ";}"], backgroundColor, foreground, backgroundHover, foregroundHover, backgroundActive, foregroundActive);
 };
 const COMPONENT_ID = 'datepickers.day';
-const StyledDay = styled.div.attrs(props => ({
+const StyledDay = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'aria-disabled': props.isDisabled ? 'true' : 'false'
-})).withConfig({
+  'data-garden-version': '9.0.0-next.19'
+}).withConfig({
   displayName: "StyledDay",
   componentId: "sc-v42uk5-0"
-})(["display:flex;position:absolute;align-items:center;justify-content:center;border-radius:50%;cursor:", ";width:100%;height:100%;font-size:", ";font-weight:", ";", " ", ";"], props => props.isDisabled ? 'inherit' : 'pointer', props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.isToday && !props.isDisabled ? props.theme.fontWeights.semibold : 'inherit', retrieveStyledDayColors, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;position:absolute;align-items:center;justify-content:center;cursor:", ";font-size:", ";font-weight:", ";", " ", " ", ";"], props => props['aria-disabled'] ? 'inherit' : 'pointer', props => props.$isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.$isToday && !props['aria-disabled'] ? props.theme.fontWeights.semibold : 'inherit', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledDay.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledDayLabel.js

@@ -9,11 +9,12 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 
 const COMPONENT_ID = 'datepickers.day_label';
 const StyledDayLabel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledDayLabel",
   componentId: "sc-9bh1p7-0"
-})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:", ";font-weight:", ";", ";"], props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:", ";font-weight:", ";", ";"], props => props.$isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledDayLabel.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledHeader.js

@@ -9,11 +9,12 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 
 const COMPONENT_ID = 'datepickers.header';
 const StyledHeader = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledHeader",
   componentId: "sc-upq318-0"
-})(["display:flex;width:", "px;", ";"], props => props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;width:", "px;", ";"], props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledHeader.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledHeaderLabel.js

@@ -9,11 +9,12 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 
 const COMPONENT_ID = 'datepickers.header_label';
 const StyledHeaderLabel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledHeaderLabel",
   componentId: "sc-1ryf5ub-0"
-})(["display:flex;flex-grow:1;align-items:center;justify-content:center;font-size:", ";font-weight:", ";", ";"], props => props.isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;flex-grow:1;align-items:center;justify-content:center;font-size:", ";font-weight:", ";", ";"], props => props.$isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.theme.fontWeights.semibold, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledHeaderLabel.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledHeaderPaddle.js

@@ -5,32 +5,65 @@
 * 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 { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
-const retrieveSizing = _ref => {
+const sizeStyles = _ref => {
   let {
-    isCompact,
+    $isCompact,
     theme
   } = _ref;
-  let size = theme.space.base * 10;
-  if (isCompact) {
-    size = theme.space.base * 8;
-  }
-  return css(["width:", "px;height:", "px;"], size, size);
+  const iconSize = theme.iconSizes.md;
+  const size = theme.space.base * ($isCompact ? 8 : 10);
+  return css(["width:", "px;height:", "px;svg{width:", ";height:", ";}"], size, size, iconSize, iconSize);
 };
-const retrieveColor = _ref2 => {
+const colorStyles = _ref2 => {
   let {
     theme
   } = _ref2;
-  return css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], getColorV8('primaryHue', 600, theme, 0.08), getColorV8('foreground', 600 , theme), getColorV8('primaryHue', 600, theme, 0.2), getColorV8('foreground', 600 , theme), getColorV8('neutralHue', 600, theme));
+  const foreground = getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const foregroundHover = getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const backgroundHover = getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[100]
+  });
+  const foregroundActive = getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  const backgroundActive = getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[200]
+  });
+  return css(["color:", ";:hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}"], foreground, backgroundHover, foregroundHover, backgroundActive, foregroundActive);
 };
 const COMPONENT_ID = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledHeaderPaddle",
   componentId: "sc-2oqh0g-0"
-})(["display:flex;align-items:center;justify-content:center;transform:", ";visibility:", ";border-radius:50%;cursor:pointer;", " ", " svg{width:", ";height:", ";}", ";"], props => props.theme.rtl && 'rotate(180deg)', props => props.isHidden && 'hidden', retrieveSizing, retrieveColor, props => `${props.theme.iconSizes.md}`, props => `${props.theme.iconSizes.md}`, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;align-items:center;justify-content:center;transform:", ";border-radius:50%;cursor:pointer;&[aria-hidden]{visibility:hidden;}", " ", " ", ";"], props => props.theme.rtl && 'rotate(180deg)', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledHeaderPaddle.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledHighlight.js

@@ -5,44 +5,50 @@
 * 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 { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'datepickers.highlight';
-const retrieveBorderRadius = _ref => {
+const sizeStyles = _ref => {
   let {
     theme,
-    isEnd,
-    isStart
+    $isEnd,
+    $isStart
   } = _ref;
-  const startValue = 'border-radius: 0 50% 50% 0;';
-  const endValue = 'border-radius: 50% 0 0 50%;';
+  let borderRadius;
+  const startValue = '0 50% 50% 0;';
+  const endValue = '50% 0 0 50%;';
   if (theme.rtl) {
-    if (isStart) {
-      return startValue;
-    } else if (isEnd) {
-      return endValue;
+    if ($isStart) {
+      borderRadius = startValue;
+    } else if ($isEnd) {
+      borderRadius = endValue;
     }
   }
-  if (isStart) {
-    return endValue;
-  } else if (isEnd) {
-    return startValue;
+  if ($isStart) {
+    borderRadius = endValue;
+  } else if ($isEnd) {
+    borderRadius = startValue;
   }
-  return '';
+  return css(["border-radius:", ";width:100%;height:100%;"], borderRadius);
 };
-const retrieveColor = _ref2 => {
+const colorStyles = _ref2 => {
   let {
-    isHighlighted,
+    $isHighlighted,
     theme
   } = _ref2;
-  return css(["background-color:", ";"], isHighlighted && getColorV8('primaryHue', 600, theme, 0.08));
+  return css(["background-color:", ";"], $isHighlighted && getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    theme
+  }));
 };
 const StyledHighlight = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledHighlight",
   componentId: "sc-16vr32x-0"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;", " ", " ", ";"], retrieveBorderRadius, retrieveColor, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;top:0;left:0;", " ", " ", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledHighlight.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledMenu.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'datepickers.menu';
 const StyledMenu = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"

package/dist/esm/styled/StyledMenuWrapper.js

@@ -9,16 +9,18 @@ import { menuStyles, getMenuPosition, retrieveComponentStyles, DEFAULT_THEME } f
 
 const COMPONENT_ID = 'datepickers.menu_wrapper';
 const StyledMenuWrapper = styled.div.attrs(props => ({
-  className: props.isAnimated && 'is-animated'
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.19',
+  className: props.$isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
   componentId: "sc-6fowoz-0"
-})(["top:0;left:0;", ";", ";"], props => menuStyles(getMenuPosition(props.placement), {
+})(["top:0;left:0;", ";", ";"], props => menuStyles(getMenuPosition(props.$placement), {
   theme: props.theme,
-  hidden: props.isHidden,
+  hidden: props['aria-hidden'],
   margin: `${props.theme.space.base}px`,
-  zIndex: props.zIndex,
-  animationModifier: props.isAnimated ? '.is-animated' : undefined
+  zIndex: props.$zIndex,
+  animationModifier: props.$isAnimated ? '.is-animated' : undefined
 }), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledMenuWrapper.defaultProps = {
   theme: DEFAULT_THEME