@zendeskgarden/react-datepickers 9.0.0-next.2 → 9.0.0-next.21

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');
@@ -63,7 +62,7 @@ const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.2'
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -74,46 +73,57 @@ StyledMenu.defaultProps = {
 
 const COMPONENT_ID$a = 'datepickers.menu_wrapper';
 const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
-  className: props.isAnimated && 'is-animated'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.0.0-next.21',
+  className: props.$isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
   componentId: "sc-6fowoz-0"
-})(["top:0;left:0;", ";", ";"], props => reactTheming.menuStyles(reactTheming.getMenuPosition(props.placement), {
+})(["top:0;left:0;", ";", ";"], props => reactTheming.menuStyles(reactTheming.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
 StyledMenuWrapper.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$9 = 'datepickers.datepicker';
-const retrievePadding = _ref => {
+const sizeStyles$4 = _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 styled.css(["margin:", "px;"], margin);
+};
+const colorStyles$3 = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const foreground = reactTheming.getColor({
+    variable: 'foreground.default',
+    theme
+  });
+  return styled.css(["background-color:transparent;color:", ";"], foreground);
 };
 const StyledDatePicker = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$9
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledDatePicker",
   componentId: "sc-15hwqzh-0"
-})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => props.theme.colors.background, props => props.theme.colors.foreground, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["direction:", ";", " ", " ", ";"], p => p.theme.rtl && 'rtl', sizeStyles$4, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledDatePicker.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$8 = 'datepickers.range_calendar';
 const StyledRangeCalendar = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$8
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledRangeCalendar",
   componentId: "sc-1og46sy-0"
@@ -124,73 +134,109 @@ StyledRangeCalendar.defaultProps = {
 
 const COMPONENT_ID$7 = 'datepickers.header';
 const StyledHeader = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$7
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.0.0-next.21'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
+})(["display:flex;width:", "px;", ";"], props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 StyledHeader.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const retrieveSizing = _ref => {
+const sizeStyles$3 = _ref => {
   let {
-    isCompact,
+    $isCompact,
     theme
   } = _ref;
-  let size = theme.space.base * 10;
-  if (isCompact) {
-    size = theme.space.base * 8;
-  }
-  return styled.css(["width:", "px;height:", "px;"], size, size);
+  const iconSize = theme.iconSizes.md;
+  const size = theme.space.base * ($isCompact ? 8 : 10);
+  return styled.css(["width:", "px;height:", "px;svg{width:", ";height:", ";}"], size, size, iconSize, iconSize);
 };
-const retrieveColor$1 = _ref2 => {
+const colorStyles$2 = _ref2 => {
   let {
     theme
   } = _ref2;
-  return styled.css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], reactTheming.getColor('primaryHue', 600, theme, 0.08), theme.colors.foreground, reactTheming.getColor('primaryHue', 600, theme, 0.2), theme.colors.foreground, reactTheming.getColor('neutralHue', 600, theme));
+  const foreground = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const foregroundHover = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const backgroundHover = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[100]
+  });
+  const foregroundActive = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  const backgroundActive = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[200]
+  });
+  return styled.css(["color:", ";:hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}"], foreground, backgroundHover, foregroundHover, backgroundActive, foregroundActive);
 };
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$6
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.0.0-next.21'
 }).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$1, props => `${props.theme.iconSizes.md}`, props => `${props.theme.iconSizes.md}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, 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$3, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledHeaderPaddle.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$5 = 'datepickers.header_label';
 const StyledHeaderLabel = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$5
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.0.0-next.21'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, 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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 StyledHeaderLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$4 = 'datepickers.calendar';
 const StyledCalendar = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$4
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledCalendar",
   componentId: "sc-g5hoe8-0"
-})(["width:", "px;", ";"], props => props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["width:", "px;", ";"], props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledCalendar.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$3 = 'datepickers.calendar_item';
-const retrieveSize = _ref => {
+const sizeStyles$2 = _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`;
@@ -198,106 +244,155 @@ const retrieveSize = _ref => {
   return styled.css(["width:", ";height:", ";"], size, size);
 };
 const StyledCalendarItem = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$3
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledCalendarItem",
   componentId: "sc-143w8wb-0"
-})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], retrieveSize, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], sizeStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledCalendarItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$2 = 'datepickers.day_label';
 const StyledDayLabel = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$2
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.0.0-next.21'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, 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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 StyledDayLabel.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID$1 = 'datepickers.highlight';
-const retrieveBorderRadius = _ref => {
+const sizeStyles$1 = _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 styled.css(["border-radius:", ";width:100%;height:100%;"], borderRadius);
 };
-const retrieveColor = _ref2 => {
+const colorStyles$1 = _ref2 => {
   let {
-    isHighlighted,
+    $isHighlighted,
     theme
   } = _ref2;
-  return styled.css(["background-color:", ";"], isHighlighted && reactTheming.getColor('primaryHue', 600, theme, 0.08));
+  return styled.css(["background-color:", ";"], $isHighlighted && reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    theme
+  }));
 };
 const StyledHighlight = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$1
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.0.0-next.21'
 }).withConfig({
   displayName: "StyledHighlight",
   componentId: "sc-16vr32x-0"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;", " ", " ", ";"], retrieveBorderRadius, retrieveColor, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
+})(["position:absolute;top:0;left:0;", " ", " ", ";"], sizeStyles$1, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 StyledHighlight.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const retrieveStyledDayColors = _ref => {
+const sizeStyles = () => {
+  return styled.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 = reactTheming.getColor('primaryHue', 600, theme);
+  let foreground;
+  const backgroundHover = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[100]
+  });
+  const foregroundHover = !$isToday && reactTheming.getColor({
+    variable: 'foreground.primary',
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const backgroundActive = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[200]
+  });
+  const foregroundActive = !$isToday && reactTheming.getColor({
+    variable: 'foreground.primary',
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
   if (isSelected && !isDisabled) {
-    backgroundColor = reactTheming.getColor('primaryHue', 600, theme);
-    color = theme.colors.background;
+    backgroundColor = reactTheming.getColor({
+      variable: 'background.primaryEmphasis',
+      theme
+    });
+    foreground = reactTheming.getColor({
+      variable: 'foreground.onEmphasis',
+      theme
+    });
   } else if (isDisabled) {
-    color = reactTheming.getColor('neutralHue', 400, theme);
-  } else if (isToday) {
-    color = 'inherit';
-  } else if (isPreviousMonth) {
-    color = reactTheming.getColor('neutralHue', 600, theme);
+    foreground = reactTheming.getColor({
+      variable: 'foreground.disabled',
+      theme
+    });
+  } else if ($isToday) {
+    foreground = 'inherit';
+  } else if ($isPreviousMonth) {
+    foreground = reactTheming.getColor({
+      variable: 'foreground.subtle',
+      theme
+    });
+  } else {
+    foreground = reactTheming.getColor({
+      variable: 'foreground.primary',
+      theme
+    });
   }
-  return styled.css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
-      :hover {
-        background-color: ${reactTheming.getColor('primaryHue', 600, theme, 0.08)};
-        color: ${reactTheming.getColor('primaryHue', 800, theme)};
-      }
-
-      :active {
-        background-color: ${reactTheming.getColor('primaryHue', 600, theme, 0.2)};
-        color: ${reactTheming.getColor('primaryHue', 800, theme)};
-      }
-  `);
+  return styled.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__default.default.div.attrs(props => ({
+const StyledDay = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'aria-disabled': props.isDisabled ? 'true' : 'false'
-})).withConfig({
+  'data-garden-version': '9.0.0-next.21'
+}).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 => reactTheming.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 => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledDay.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -389,9 +484,9 @@ function getStartOfWeek(locale) {
 }
 
 var _path$1;
-function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
+function _extends$1() { return _extends$1 = 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$1.apply(null, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -405,9 +500,9 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
 };
 
 var _path;
-function _extends$1() { _extends$1 = 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$1.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__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -437,18 +532,18 @@ const MonthSelector = _ref => {
     return formatter.format(date);
   }, [locale]);
   return React__namespace.default.createElement(StyledHeader, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, React__namespace.default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_PREVIOUS_MONTH'
       });
     }
   }, React__namespace.default.createElement(SvgChevronLeftStroke, null)), React__namespace.default.createElement(StyledHeaderLabel, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, headerLabelFormatter(state.previewDate)), React__namespace.default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_NEXT_MONTH'
@@ -492,9 +587,9 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
     const formattedDayLabel = dayLabelFormatter(date);
     return React__namespace.default.createElement(StyledCalendarItem, {
       key: `day-label-${formattedDayLabel}`,
-      isCompact: isCompact
+      $isCompact: isCompact
     }, React__namespace.default.createElement(StyledDayLabel, {
-      isCompact: isCompact
+      $isCompact: isCompact
     }, formattedDayLabel));
   });
   const items = eachDayOfInterval.eachDayOfInterval({
@@ -514,13 +609,13 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
     }
     return React__namespace.default.createElement(StyledCalendarItem, {
       key: `day-${itemsIndex}`,
-      isCompact: isCompact
+      $isCompact: isCompact
     }, React__namespace.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({
@@ -533,7 +628,7 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
   });
   return React__namespace.default.createElement(StyledDatePicker, {
     ref: ref,
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onMouseDown: e => {
       e.preventDefault();
     }
@@ -541,7 +636,7 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
     locale: locale,
     isCompact: isCompact
   }), React__namespace.default.createElement(StyledCalendar, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, dayLabels, items));
 });
 Calendar$1.displayName = 'Calendar';
@@ -828,6 +923,10 @@ const DatePicker = React.forwardRef((props, calendarRef) => {
       transform
     }
   } = reactDom.useFloating({
+    platform: {
+      ...reactDom.platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: triggerRef?.current,
       floating: floatingRef?.current
@@ -880,10 +979,10 @@ const DatePicker = React.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__namespace.default.createElement(StyledMenu, menuProps, React__namespace.default.createElement(Calendar$1, {
     ref: calendarRef,
     isCompact: isCompact,
@@ -1354,21 +1453,6 @@ const End = props => {
 };
 End.displayName = 'DatePickerRange.End';
 
-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);
-}
-
 const Month = React.forwardRef((_ref, ref) => {
   let {
     displayDate,
@@ -1422,9 +1506,9 @@ const Month = React.forwardRef((_ref, ref) => {
     const formattedDayLabel = dayLabelFormatter(date);
     return React__namespace.default.createElement(StyledCalendarItem, {
       key: `day-label-${formattedDayLabel}`,
-      isCompact: isCompact
+      $isCompact: isCompact
     }, React__namespace.default.createElement(StyledDayLabel, {
-      isCompact: isCompact
+      $isCompact: isCompact
     }, formattedDayLabel));
   });
   const items = eachDayOfInterval.eachDayOfInterval({
@@ -1437,11 +1521,11 @@ const Month = React.forwardRef((_ref, ref) => {
     if (isPreviousMonth) {
       return React__namespace.default.createElement(StyledCalendarItem, {
         key: `day-${itemsIndex}`,
-        isCompact: isCompact
+        $isCompact: isCompact
       }, React__namespace.default.createElement(StyledDay, {
-        isCompact: isCompact,
-        isPreviousMonth: true,
-        isDisabled: true
+        $isCompact: isCompact,
+        $isPreviousMonth: true,
+        "aria-disabled": true
       }, "\xA0"));
     }
     let isSelected = false;
@@ -1485,17 +1569,17 @@ const Month = React.forwardRef((_ref, ref) => {
     }
     return React__namespace.default.createElement(StyledCalendarItem, {
       key: `day-${itemsIndex}`,
-      isCompact: isCompact
+      $isCompact: isCompact
     }, React__namespace.default.createElement(StyledHighlight, {
-      isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
-      isStart: !isInvalidDateRange && isHighlightStart,
-      isEnd: !isInvalidDateRange && isHighlightEnd
+      $isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
+      $isStart: !isInvalidDateRange && isHighlightStart,
+      $isEnd: !isInvalidDateRange && isHighlightEnd
     }), React__namespace.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({
@@ -1565,32 +1649,32 @@ const Month = React.forwardRef((_ref, ref) => {
   });
   return React__namespace.default.createElement(StyledDatePicker, {
     ref: ref,
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onMouseDown: e => {
       e.preventDefault();
     }
   }, React__namespace.default.createElement(StyledHeader, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, React__namespace.default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_PREVIOUS_MONTH'
       });
     },
-    isHidden: isPreviousHidden
+    "aria-hidden": isPreviousHidden || undefined
   }, React__namespace.default.createElement(SvgChevronLeftStroke, null)), React__namespace.default.createElement(StyledHeaderLabel, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, headerLabelFormatter(displayDate)), React__namespace.default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
-    isHidden: isNextHidden,
+    $isCompact: isCompact,
+    "aria-hidden": isNextHidden || undefined,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_NEXT_MONTH'
       });
     }
   }, React__namespace.default.createElement(SvgChevronRightStroke, null))), React__namespace.default.createElement(StyledCalendar, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onMouseLeave: () => {
       dispatch({
         type: 'HOVER_DATE',
@@ -1605,10 +1689,10 @@ const Calendar = React.forwardRef((props, ref) => {
   const {
     state
   } = useDatePickerContext();
-  return React__namespace.default.createElement(StyledRangeCalendar, _extends({
+  return React__namespace.default.createElement(StyledRangeCalendar, Object.assign({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.0.0-next.2'
+    "data-garden-version": '9.0.0-next.21'
   }, props), React__namespace.default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true