@zendeskgarden/react-datepickers 9.0.0-next.9 → 9.0.0

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

@@ -128,11 +128,11 @@ const DatePicker = forwardRef((props, calendarRef) => {
     style: {
       transform
     },
-    isHidden: !state.isOpen,
-    isAnimated: isAnimated && (state.isOpen || isVisible),
-    placement: placement,
-    zIndex: zIndex
-  }, (state.isOpen || isVisible) && React__default.createElement(StyledMenu, menuProps, React__default.createElement(Calendar, {
+    $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,
     value: value,

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

@@ -68,15 +68,15 @@ 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({
     start: startDate,
     end: endDate
-  }).map((date, itemsIndex) => {
+  }).map(date => {
     const formattedDayLabel = getDate(date);
     const isCurrentDate = isToday(date);
     const isPreviousMonth = !isSameMonth(date, state.previewDate);
@@ -89,14 +89,14 @@ const Calendar = forwardRef((_ref, ref) => {
       isDisabled = isDisabled || isAfter(date, maxValue) && !isSameDay(date, maxValue);
     }
     return React__default.createElement(StyledCalendarItem, {
-      key: `day-${itemsIndex}`,
-      isCompact: isCompact
+      key: date.toISOString(),
+      $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.9'
+    "data-garden-version": '9.0.0'
   }, props), React__default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true

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

@@ -88,26 +88,26 @@ 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({
     start: startDate,
     end: endDate
-  }).map((date, itemsIndex) => {
+  }).map(date => {
     const formattedDayLabel = dayFormatter(date);
     const isCurrentDate = isToday(date);
     const isPreviousMonth = !isSameMonth(date, displayDate);
     if (isPreviousMonth) {
       return React__default.createElement(StyledCalendarItem, {
-        key: `day-${itemsIndex}`,
-        isCompact: isCompact
+        key: date.toISOString(),
+        $isCompact: isCompact
       }, React__default.createElement(StyledDay, {
-        isCompact: isCompact,
-        isPreviousMonth: true,
-        isDisabled: true
+        $isCompact: isCompact,
+        $isPreviousMonth: true,
+        "aria-disabled": true
       }, "\xA0"));
     }
     let isSelected = false;
@@ -150,18 +150,18 @@ const Month = forwardRef((_ref, ref) => {
       }
     }
     return React__default.createElement(StyledCalendarItem, {
-      key: `day-${itemsIndex}`,
-      isCompact: isCompact
+      key: date.toISOString(),
+      $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/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/styled/StyledCalendar.js

@@ -5,17 +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 = 'datepickers.calendar';
 const StyledCalendar = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0'
 }).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));
-StyledCalendar.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["width:", "px;", ";"], props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledCalendar };

package/dist/esm/styled/StyledCalendarItem.js

@@ -5,16 +5,16 @@
 * 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';
 
 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,11 @@ 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'
 }).withConfig({
   displayName: "StyledCalendarItem",
   componentId: "sc-143w8wb-0"
-})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], retrieveSize, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCalendarItem.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
-export { StyledCalendarItem, retrieveSize };
+export { StyledCalendarItem, sizeStyles };

package/dist/esm/styled/StyledDatePicker.js

@@ -4,29 +4,34 @@
 * 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, 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'
 }).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));
-StyledDatePicker.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["direction:", ";", " ", " ", ";"], p => p.theme.rtl && 'rtl', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledDatePicker };

package/dist/esm/styled/StyledDay.js

@@ -5,50 +5,88 @@
 * 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, 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'
+}).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));
-StyledDay.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledDay };

package/dist/esm/styled/StyledDayLabel.js

@@ -5,17 +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 = 'datepickers.day_label';
 const StyledDayLabel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0'
 }).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));
-StyledDayLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledDayLabel };

package/dist/esm/styled/StyledHeader.js

@@ -5,17 +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 = 'datepickers.header';
 const StyledHeader = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0'
 }).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));
-StyledHeader.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["display:flex;width:", "px;", ";"], props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledHeader };

package/dist/esm/styled/StyledHeaderLabel.js

@@ -5,17 +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 = 'datepickers.header_label';
 const StyledHeaderLabel = styled.div.attrs({
-  'data-garden-id': COMPONENT_ID
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0'
 }).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));
-StyledHeaderLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledHeaderLabel };

package/dist/esm/styled/StyledHeaderPaddle.js

@@ -5,34 +5,64 @@
 * 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, 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'
 }).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));
-StyledHeaderPaddle.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["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));
 
 export { StyledHeaderPaddle };