@kaizen/components 1.77.4 → 1.78.0

package/dist/cjs/src/Calendar/CalendarRange/CalendarRange.cjs

@@ -38,12 +38,11 @@ var CalendarRange = function (_a) {
   /* eslint-disable camelcase */
   var classNames = tslib.__assign(tslib.__assign({}, baseCalendarClassNames.baseCalendarClassNames), {
     month: hasDivider ? CalendarRange_module.monthWithDivider : CalendarRange_module.month,
-    caption_end: CalendarRange_module.captionEnd,
-    caption_start: CalendarRange_module.captionStart,
     nav: CalendarRange_module.nav,
-    day_range_start: CalendarRange_module.dayRangeStart,
-    day_range_end: CalendarRange_module.dayRangeEnd,
-    day_range_middle: CalendarRange_module.dayRangeMiddle
+    range_start: CalendarRange_module.dayRangeStart,
+    range_end: CalendarRange_module.dayRangeEnd,
+    range_middle: CalendarRange_module.dayRangeMiddle,
+    hidden: CalendarRange_module.hidden
   });
   /* eslint-enable camelcase */
   return React__default.default.createElement("div", {
@@ -56,19 +55,19 @@ var CalendarRange = function (_a) {
     defaultMonth: selectedMonth,
     classNames: classNames,
     components: {
-      IconRight: function () {
+      Chevron: function (props) {
+        if (props.orientation === 'left') {
+          return React__default.default.createElement(Icon.Icon, {
+            name: "arrow_back",
+            isPresentational: true,
+            shouldMirrorInRTL: true
+          });
+        }
         return React__default.default.createElement(Icon.Icon, {
           name: "arrow_forward",
           isPresentational: true,
           shouldMirrorInRTL: true
         });
-      },
-      IconLeft: function () {
-        return React__default.default.createElement(Icon.Icon, {
-          name: "arrow_back",
-          isPresentational: true,
-          shouldMirrorInRTL: true
-        });
       }
     },
     numberOfMonths: numberOfMonths,

package/dist/cjs/src/Calendar/CalendarRange/CalendarRange.module.scss.cjs

@@ -4,10 +4,9 @@ var styles = {
   "month": "CalendarRange-module_month__un61w",
   "monthWithDivider": "CalendarRange-module_monthWithDivider__JY-56",
   "nav": "CalendarRange-module_nav__OtaVb",
-  "captionEnd": "CalendarRange-module_captionEnd__GSLQO",
-  "captionStart": "CalendarRange-module_captionStart__K5hlF",
   "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
   "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
-  "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY"
+  "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY",
+  "hidden": "CalendarRange-module_hidden__D47kb"
 };
 module.exports = styles;

package/dist/cjs/src/Calendar/CalendarSingle/CalendarSingle.cjs

@@ -49,19 +49,19 @@ var CalendarSingle = function (_a) {
     weekStartsOn: isValidWeekStartsOn.isValidWeekStartsOn(weekStartsOn) ? weekStartsOn : undefined,
     classNames: classNames,
     components: {
-      IconRight: function () {
+      Chevron: function (props) {
+        if (props.orientation === 'left') {
+          return React__default.default.createElement(Icon.Icon, {
+            name: "arrow_back",
+            isPresentational: true,
+            shouldMirrorInRTL: true
+          });
+        }
         return React__default.default.createElement(Icon.Icon, {
           name: "arrow_forward",
           isPresentational: true,
           shouldMirrorInRTL: true
         });
-      },
-      IconLeft: function () {
-        return React__default.default.createElement(Icon.Icon, {
-          name: "arrow_back",
-          isPresentational: true,
-          shouldMirrorInRTL: true
-        });
       }
     },
     locale: locale$1

package/dist/cjs/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.cjs

@@ -31,10 +31,9 @@ var LegacyCalendarRange = function (_a) {
   /* eslint-disable camelcase */
   var classNames = tslib.__assign(tslib.__assign({}, baseCalendarClassNames.baseCalendarClassNames), {
     nav: LegacyCalendarRange_module.nav,
-    nav_button_next: LegacyCalendarRange_module.navButtonNext,
-    day_range_start: LegacyCalendarRange_module.dayRangeStart,
-    day_range_end: LegacyCalendarRange_module.dayRangeEnd,
-    day_range_middle: LegacyCalendarRange_module.dayRangeMiddle
+    range_start: LegacyCalendarRange_module.dayRangeStart,
+    range_end: LegacyCalendarRange_module.dayRangeEnd,
+    range_middle: LegacyCalendarRange_module.dayRangeMiddle
   });
   /* eslint-enable camelcase */
   return React__default.default.createElement("div", {
@@ -48,19 +47,19 @@ var LegacyCalendarRange = function (_a) {
     onDayClick: onDayChange,
     classNames: classNames,
     components: {
-      IconRight: function () {
+      Chevron: function (props) {
+        if (props.orientation === 'left') {
+          return React__default.default.createElement(Icon.Icon, {
+            name: "arrow_back",
+            isPresentational: true,
+            shouldMirrorInRTL: true
+          });
+        }
         return React__default.default.createElement(Icon.Icon, {
           name: "arrow_forward",
           isPresentational: true,
           shouldMirrorInRTL: true
         });
-      },
-      IconLeft: function () {
-        return React__default.default.createElement(Icon.Icon, {
-          name: "arrow_back",
-          isPresentational: true,
-          shouldMirrorInRTL: true
-        });
       }
     },
     locale: locale

package/dist/cjs/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss.cjs

@@ -2,7 +2,6 @@
 
 var styles = {
   "nav": "LegacyCalendarRange-module_nav__DsZpy",
-  "navButtonNext": "LegacyCalendarRange-module_navButtonNext__hwYN9",
   "dayRangeStart": "LegacyCalendarRange-module_dayRangeStart__vRr5P",
   "dayRangeEnd": "LegacyCalendarRange-module_dayRangeEnd__PfuWy",
   "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR"

package/dist/cjs/src/Calendar/baseCalendarClassNames.cjs

@@ -2,21 +2,19 @@
 
 var baseCalendarClassNames_module = require('./baseCalendarClassNames.module.scss.cjs');
 var baseCalendarClassNames = {
-  vhidden: baseCalendarClassNames_module.vHidden,
   root: baseCalendarClassNames_module.root,
   months: baseCalendarClassNames_module.months,
-  button_reset: baseCalendarClassNames_module.buttonReset,
-  button: baseCalendarClassNames_module.button,
-  caption: baseCalendarClassNames_module.caption,
+  day_button: "".concat(baseCalendarClassNames_module.buttonReset, " ").concat(baseCalendarClassNames_module.button, " ").concat(baseCalendarClassNames_module.day),
+  button_next: "".concat(baseCalendarClassNames_module.buttonReset, " ").concat(baseCalendarClassNames_module.button, " ").concat(baseCalendarClassNames_module.navButton),
+  button_previous: "".concat(baseCalendarClassNames_module.buttonReset, " ").concat(baseCalendarClassNames_module.button, " ").concat(baseCalendarClassNames_module.navButton),
+  day: baseCalendarClassNames_module.cell,
+  month_caption: baseCalendarClassNames_module.caption,
   caption_label: baseCalendarClassNames_module.captionLabel,
-  nav_button: baseCalendarClassNames_module.navButton,
-  table: baseCalendarClassNames_module.table,
-  head_cell: baseCalendarClassNames_module.weekday,
-  cell: baseCalendarClassNames_module.cell,
-  day: baseCalendarClassNames_module.day,
-  tbody: baseCalendarClassNames_module.tbody,
-  day_selected: baseCalendarClassNames_module.daySelected,
-  day_today: baseCalendarClassNames_module.dayToday,
-  day_disabled: baseCalendarClassNames_module.dayDisabled
+  month_grid: baseCalendarClassNames_module.table,
+  weekday: baseCalendarClassNames_module.weekday,
+  weeks: baseCalendarClassNames_module.tbody,
+  selected: baseCalendarClassNames_module.daySelected,
+  today: baseCalendarClassNames_module.dayToday,
+  disabled: baseCalendarClassNames_module.dayDisabled
 };
 exports.baseCalendarClassNames = baseCalendarClassNames;

package/dist/cjs/src/Calendar/baseCalendarClassNames.module.scss.cjs

@@ -15,7 +15,6 @@ var calendarStyles = {
   "cell": "baseCalendarClassNames-module_cell__FvWK0",
   "dayToday": "baseCalendarClassNames-module_dayToday__-TPUa",
   "daySelected": "baseCalendarClassNames-module_daySelected__R3ujV",
-  "dayDisabled": "baseCalendarClassNames-module_dayDisabled__uQzJ-",
-  "vHidden": "baseCalendarClassNames-module_vHidden__egm49"
+  "dayDisabled": "baseCalendarClassNames-module_dayDisabled__uQzJ-"
 };
 module.exports = calendarStyles;

package/dist/cjs/src/Calendar/utils/setFocusInCalendar.cjs

@@ -2,12 +2,13 @@
 
 var baseCalendarClassNames_module = require('../baseCalendarClassNames.module.scss.cjs');
 var isInvalidDate = require('./isInvalidDate.cjs');
-var isHTMLElement = function (element) {
-  return element instanceof HTMLElement;
-};
 var setFocusInCalendar = function (calendarElement, selectedDay) {
-  var daySelectedOrToday = calendarElement.getElementsByClassName(selectedDay && !isInvalidDate.isInvalidDate(selectedDay) ? baseCalendarClassNames_module.daySelected : baseCalendarClassNames_module.dayToday)[0];
-  var dayToFocus = daySelectedOrToday !== null && daySelectedOrToday !== void 0 ? daySelectedOrToday : calendarElement.getElementsByClassName(baseCalendarClassNames_module.day)[0];
-  if (isHTMLElement(dayToFocus)) dayToFocus.focus();
+  var dayClass = selectedDay && !isInvalidDate.isInvalidDate(selectedDay) ? ".".concat(baseCalendarClassNames_module.daySelected) : ".".concat(baseCalendarClassNames_module.dayToday);
+  var dayToFocus = calendarElement.querySelector("".concat(dayClass, " button"));
+  // RDP v9 puts the day class on the button inside the table cell whereas today and selected appear on the table cell
+  dayToFocus !== null && dayToFocus !== void 0 ? dayToFocus : dayToFocus = calendarElement.querySelector(".".concat(baseCalendarClassNames_module.day));
+  if (dayToFocus instanceof HTMLElement) {
+    dayToFocus.focus();
+  }
 };
 exports.setFocusInCalendar = setFocusInCalendar;

package/dist/esm/src/Calendar/CalendarRange/CalendarRange.mjs

@@ -31,12 +31,11 @@ const CalendarRange = /*#__PURE__*/function () {
     /* eslint-disable camelcase */
     var classNames = __assign(__assign({}, baseCalendarClassNames), {
       month: hasDivider ? styles.monthWithDivider : styles.month,
-      caption_end: styles.captionEnd,
-      caption_start: styles.captionStart,
       nav: styles.nav,
-      day_range_start: styles.dayRangeStart,
-      day_range_end: styles.dayRangeEnd,
-      day_range_middle: styles.dayRangeMiddle
+      range_start: styles.dayRangeStart,
+      range_end: styles.dayRangeEnd,
+      range_middle: styles.dayRangeMiddle,
+      hidden: styles.hidden
     });
     /* eslint-enable camelcase */
     return /*#__PURE__*/React.createElement("div", {
@@ -49,19 +48,19 @@ const CalendarRange = /*#__PURE__*/function () {
       defaultMonth: selectedMonth,
       classNames: classNames,
       components: {
-        IconRight: function () {
+        Chevron: function (props) {
+          if (props.orientation === 'left') {
+            return /*#__PURE__*/React.createElement(Icon, {
+              name: "arrow_back",
+              isPresentational: true,
+              shouldMirrorInRTL: true
+            });
+          }
           return /*#__PURE__*/React.createElement(Icon, {
             name: "arrow_forward",
             isPresentational: true,
             shouldMirrorInRTL: true
           });
-        },
-        IconLeft: function () {
-          return /*#__PURE__*/React.createElement(Icon, {
-            name: "arrow_back",
-            isPresentational: true,
-            shouldMirrorInRTL: true
-          });
         }
       },
       numberOfMonths: numberOfMonths,

package/dist/esm/src/Calendar/CalendarRange/CalendarRange.module.scss.mjs

@@ -2,10 +2,9 @@ var styles = {
   "month": "CalendarRange-module_month__un61w",
   "monthWithDivider": "CalendarRange-module_monthWithDivider__JY-56",
   "nav": "CalendarRange-module_nav__OtaVb",
-  "captionEnd": "CalendarRange-module_captionEnd__GSLQO",
-  "captionStart": "CalendarRange-module_captionStart__K5hlF",
   "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
   "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
-  "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY"
+  "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY",
+  "hidden": "CalendarRange-module_hidden__D47kb"
 };
 export { styles as default };

package/dist/esm/src/Calendar/CalendarSingle/CalendarSingle.mjs

@@ -42,19 +42,19 @@ const CalendarSingle = /*#__PURE__*/function () {
       weekStartsOn: isValidWeekStartsOn(weekStartsOn) ? weekStartsOn : undefined,
       classNames: classNames,
       components: {
-        IconRight: function () {
+        Chevron: function (props) {
+          if (props.orientation === 'left') {
+            return /*#__PURE__*/React.createElement(Icon, {
+              name: "arrow_back",
+              isPresentational: true,
+              shouldMirrorInRTL: true
+            });
+          }
           return /*#__PURE__*/React.createElement(Icon, {
             name: "arrow_forward",
             isPresentational: true,
             shouldMirrorInRTL: true
           });
-        },
-        IconLeft: function () {
-          return /*#__PURE__*/React.createElement(Icon, {
-            name: "arrow_back",
-            isPresentational: true,
-            shouldMirrorInRTL: true
-          });
         }
       },
       locale: locale

package/dist/esm/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.mjs

@@ -24,10 +24,9 @@ const LegacyCalendarRange = /*#__PURE__*/function () {
     /* eslint-disable camelcase */
     var classNames = __assign(__assign({}, baseCalendarClassNames), {
       nav: styles.nav,
-      nav_button_next: styles.navButtonNext,
-      day_range_start: styles.dayRangeStart,
-      day_range_end: styles.dayRangeEnd,
-      day_range_middle: styles.dayRangeMiddle
+      range_start: styles.dayRangeStart,
+      range_end: styles.dayRangeEnd,
+      range_middle: styles.dayRangeMiddle
     });
     /* eslint-enable camelcase */
     return /*#__PURE__*/React.createElement("div", {
@@ -41,19 +40,19 @@ const LegacyCalendarRange = /*#__PURE__*/function () {
       onDayClick: onDayChange,
       classNames: classNames,
       components: {
-        IconRight: function () {
+        Chevron: function (props) {
+          if (props.orientation === 'left') {
+            return /*#__PURE__*/React.createElement(Icon, {
+              name: "arrow_back",
+              isPresentational: true,
+              shouldMirrorInRTL: true
+            });
+          }
           return /*#__PURE__*/React.createElement(Icon, {
             name: "arrow_forward",
             isPresentational: true,
             shouldMirrorInRTL: true
           });
-        },
-        IconLeft: function () {
-          return /*#__PURE__*/React.createElement(Icon, {
-            name: "arrow_back",
-            isPresentational: true,
-            shouldMirrorInRTL: true
-          });
         }
       },
       locale: locale

package/dist/esm/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.module.scss.mjs

@@ -1,6 +1,5 @@
 var styles = {
   "nav": "LegacyCalendarRange-module_nav__DsZpy",
-  "navButtonNext": "LegacyCalendarRange-module_navButtonNext__hwYN9",
   "dayRangeStart": "LegacyCalendarRange-module_dayRangeStart__vRr5P",
   "dayRangeEnd": "LegacyCalendarRange-module_dayRangeEnd__PfuWy",
   "dayRangeMiddle": "LegacyCalendarRange-module_dayRangeMiddle__M27gR"

package/dist/esm/src/Calendar/baseCalendarClassNames.mjs

@@ -1,20 +1,18 @@
 import calendarStyles from './baseCalendarClassNames.module.scss.mjs';
 var baseCalendarClassNames = {
-  vhidden: calendarStyles.vHidden,
   root: calendarStyles.root,
   months: calendarStyles.months,
-  button_reset: calendarStyles.buttonReset,
-  button: calendarStyles.button,
-  caption: calendarStyles.caption,
+  day_button: "".concat(calendarStyles.buttonReset, " ").concat(calendarStyles.button, " ").concat(calendarStyles.day),
+  button_next: "".concat(calendarStyles.buttonReset, " ").concat(calendarStyles.button, " ").concat(calendarStyles.navButton),
+  button_previous: "".concat(calendarStyles.buttonReset, " ").concat(calendarStyles.button, " ").concat(calendarStyles.navButton),
+  day: calendarStyles.cell,
+  month_caption: calendarStyles.caption,
   caption_label: calendarStyles.captionLabel,
-  nav_button: calendarStyles.navButton,
-  table: calendarStyles.table,
-  head_cell: calendarStyles.weekday,
-  cell: calendarStyles.cell,
-  day: calendarStyles.day,
-  tbody: calendarStyles.tbody,
-  day_selected: calendarStyles.daySelected,
-  day_today: calendarStyles.dayToday,
-  day_disabled: calendarStyles.dayDisabled
+  month_grid: calendarStyles.table,
+  weekday: calendarStyles.weekday,
+  weeks: calendarStyles.tbody,
+  selected: calendarStyles.daySelected,
+  today: calendarStyles.dayToday,
+  disabled: calendarStyles.dayDisabled
 };
 export { baseCalendarClassNames };

package/dist/esm/src/Calendar/baseCalendarClassNames.module.scss.mjs

@@ -13,7 +13,6 @@ var calendarStyles = {
   "cell": "baseCalendarClassNames-module_cell__FvWK0",
   "dayToday": "baseCalendarClassNames-module_dayToday__-TPUa",
   "daySelected": "baseCalendarClassNames-module_daySelected__R3ujV",
-  "dayDisabled": "baseCalendarClassNames-module_dayDisabled__uQzJ-",
-  "vHidden": "baseCalendarClassNames-module_vHidden__egm49"
+  "dayDisabled": "baseCalendarClassNames-module_dayDisabled__uQzJ-"
 };
 export { calendarStyles as default };

package/dist/esm/src/Calendar/utils/setFocusInCalendar.mjs

@@ -1,11 +1,12 @@
 import calendarStyles from '../baseCalendarClassNames.module.scss.mjs';
 import { isInvalidDate } from './isInvalidDate.mjs';
-var isHTMLElement = function (element) {
-  return element instanceof HTMLElement;
-};
 var setFocusInCalendar = function (calendarElement, selectedDay) {
-  var daySelectedOrToday = calendarElement.getElementsByClassName(selectedDay && !isInvalidDate(selectedDay) ? calendarStyles.daySelected : calendarStyles.dayToday)[0];
-  var dayToFocus = daySelectedOrToday !== null && daySelectedOrToday !== void 0 ? daySelectedOrToday : calendarElement.getElementsByClassName(calendarStyles.day)[0];
-  if (isHTMLElement(dayToFocus)) dayToFocus.focus();
+  var dayClass = selectedDay && !isInvalidDate(selectedDay) ? ".".concat(calendarStyles.daySelected) : ".".concat(calendarStyles.dayToday);
+  var dayToFocus = calendarElement.querySelector("".concat(dayClass, " button"));
+  // RDP v9 puts the day class on the button inside the table cell whereas today and selected appear on the table cell
+  dayToFocus !== null && dayToFocus !== void 0 ? dayToFocus : dayToFocus = calendarElement.querySelector(".".concat(calendarStyles.day));
+  if (dayToFocus instanceof HTMLElement) {
+    dayToFocus.focus();
+  }
 };
 export { setFocusInCalendar };

package/dist/styles.css

@@ -1667,6 +1667,7 @@
 
 .baseCalendarClassNames-module_root__ZBdgM {
   display: inline-flex;
+  position: relative;
 }
 
 .baseCalendarClassNames-module_months__ofItC {
@@ -1689,7 +1690,6 @@
 }
 
 .baseCalendarClassNames-module_caption__tzko5 {
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1790,9 +1790,13 @@
 
 .baseCalendarClassNames-module_daySelected__R3ujV {
   background-color: var(--color-blue-500, #0168b3);
+  border-radius: 3px;
+  color: var(--color-white, #ffffff);
+}
+.baseCalendarClassNames-module_daySelected__R3ujV .baseCalendarClassNames-module_button__Jb8RM {
   color: var(--color-white, #ffffff);
 }
-.baseCalendarClassNames-module_daySelected__R3ujV:hover, .baseCalendarClassNames-module_daySelected__R3ujV:focus-visible {
+.baseCalendarClassNames-module_daySelected__R3ujV .baseCalendarClassNames-module_button__Jb8RM:hover, .baseCalendarClassNames-module_daySelected__R3ujV .baseCalendarClassNames-module_button__Jb8RM:focus-visible {
   background-color: var(--color-blue-400, #008bd6);
   color: var(--color-white, #ffffff);
 }
@@ -1800,17 +1804,9 @@
 .baseCalendarClassNames-module_dayDisabled__uQzJ- {
   background: none;
   pointer-events: none;
-  color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.3);
 }
-
-.baseCalendarClassNames-module_vHidden__egm49 {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
+.baseCalendarClassNames-module_dayDisabled__uQzJ- [class*=_button_] {
+  color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.3);
 }
 /** THIS IS AN AUTOGENERATED FILE **/
 .CalendarSingle-module_nav__wSVua {
@@ -1819,6 +1815,7 @@
   justify-content: space-between;
   width: 100%;
   color: var(--color-purple-800, #2f2438);
+  top: -0.25rem;
 }
 
 .CalendarSingle-module_navButtonNext__-GrZx {
@@ -1829,7 +1826,7 @@
 .CalendarRange-module_month__un61w {
   padding: 0 var(--spacing-sm, 0.75rem);
 }
-.CalendarRange-module_month__un61w:first-child {
+.CalendarRange-module_month__un61w:nth-of-type(1) {
   padding-inline-start: 0;
 }
 .CalendarRange-module_month__un61w:last-child {
@@ -1840,13 +1837,13 @@
   position: relative;
   padding: 0 var(--spacing-md, 1.5rem);
 }
-.CalendarRange-module_monthWithDivider__JY-56:not(:first-child)::before {
+.CalendarRange-module_monthWithDivider__JY-56:not(:nth-of-type(1))::before {
   position: absolute;
   content: "";
   inset: calc(-1 * var(--spacing-md, 1.5rem)) 0;
   border-inline-start: 1px solid var(--color-gray-300, #eaeaec);
 }
-.CalendarRange-module_monthWithDivider__JY-56:first-child {
+.CalendarRange-module_monthWithDivider__JY-56:nth-of-type(1) {
   padding-inline-start: 0;
 }
 .CalendarRange-module_monthWithDivider__JY-56:last-child {
@@ -1856,16 +1853,10 @@
 .CalendarRange-module_nav__OtaVb {
   position: absolute;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   width: 100%;
   color: var(--color-purple-800, #2f2438);
-}
-.CalendarRange-module_captionEnd__GSLQO .CalendarRange-module_nav__OtaVb {
-  flex-direction: row-reverse;
-}
-.CalendarRange-module_captionStart__K5hlF.CalendarRange-module_captionEnd__GSLQO .CalendarRange-module_nav__OtaVb {
-  justify-content: space-between;
-  flex-direction: row;
+  top: -0.25rem;
 }
 
 .CalendarRange-module_dayRangeStart__TwdDT,
@@ -1878,6 +1869,13 @@
   background-color: var(--color-blue-100, #e6f6ff);
   color: var(--color-blue-500, #0168b3);
 }
+.CalendarRange-module_dayRangeMiddle__SybKY [class*=_button_] {
+  color: var(--color-blue-500, #0168b3);
+}
+
+.CalendarRange-module_hidden__D47kb {
+  background-color: transparent;
+}
 @property --gradient-angle {
   syntax: '<angle>';
   initial-value: 310deg;
@@ -3323,10 +3321,7 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   justify-content: space-between;
   width: 100%;
   color: var(--color-purple-800, #2f2438);
-}
-
-.LegacyCalendarRange-module_navButtonNext__hwYN9 {
-  inset-inline-end: 0;
+  top: -0.25rem;
 }
 
 .LegacyCalendarRange-module_dayRangeStart__vRr5P,
@@ -3339,6 +3334,9 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   background-color: var(--color-blue-100, #e6f6ff);
   color: var(--color-blue-500, #0168b3);
 }
+.LegacyCalendarRange-module_dayRangeMiddle__M27gR [class*=_button_] {
+  color: var(--color-blue-500, #0168b3);
+}
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/
 /** THIS IS AN AUTOGENERATED FILE **/

package/dist/types/Calendar/CalendarRange/CalendarRange.d.ts

@@ -1,11 +1,11 @@
-import { type DayPickerRangeProps } from 'react-day-picker';
+import { type PropsBase, type PropsRange } from 'react-day-picker';
 import { type OverrideClassName } from "../../types/OverrideClassName";
 export type CalendarRangeElement = HTMLDivElement;
 export type CalendarRangeProps = {
     id?: string;
     onMount?: (calendarElement: CalendarRangeElement) => void;
     hasDivider?: boolean;
-} & OverrideClassName<Omit<DayPickerRangeProps, 'mode'>>;
+} & OverrideClassName<Omit<PropsRange & Omit<PropsBase, 'mode'>, 'mode'>>;
 export declare const CalendarRange: {
     ({ id, onMount, hasDivider, classNameOverride, selected, defaultMonth, numberOfMonths, locale, ...restProps }: CalendarRangeProps): JSX.Element;
     displayName: string;

package/dist/types/Calendar/CalendarSingle/CalendarSingle.d.ts

@@ -1,10 +1,10 @@
-import { type DayPickerSingleProps } from 'react-day-picker';
+import { type PropsBase, type PropsSingle } from 'react-day-picker';
 import { type OverrideClassName } from "../../types/OverrideClassName";
 export type CalendarSingleElement = HTMLDivElement;
 export type CalendarSingleProps = {
     id?: string;
     onMount?: (calendarElement: CalendarSingleElement) => void;
-} & OverrideClassName<Omit<DayPickerSingleProps, 'mode'>>;
+} & OverrideClassName<Omit<PropsSingle & Omit<PropsBase, 'mode'>, 'mode'>>;
 export declare const CalendarSingle: {
     ({ id, onMount, classNameOverride, selected, defaultMonth, weekStartsOn, locale, ...restProps }: CalendarSingleProps): JSX.Element;
     displayName: string;

package/dist/types/Calendar/LegacyCalendarRange/LegacyCalendarRange.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import type { Locale } from 'date-fns';
-import { type DateRange, type DayClickEventHandler, type Matcher } from 'react-day-picker';
+import { type DateRange, type DayEventHandler, type Matcher } from 'react-day-picker';
 import { DayOfWeek } from '../enums';
 export type LegacyCalendarRangeElement = HTMLDivElement;
 export type LegacyCalendarRangeProps = {
@@ -9,7 +10,7 @@ export type LegacyCalendarRangeProps = {
     disabledDays?: Matcher[];
     selectedRange?: DateRange;
     locale: Locale;
-    onDayChange: DayClickEventHandler;
+    onDayChange: DayEventHandler<React.MouseEvent>;
 };
 export declare const LegacyCalendarRange: {
     ({ classNameOverride, defaultMonth, weekStartsOn, disabledDays, selectedRange, locale, onDayChange, }: LegacyCalendarRangeProps): JSX.Element;

package/dist/types/Calendar/baseCalendarClassNames.d.ts

@@ -1,2 +1,2 @@
-import { type ClassNames } from 'react-day-picker';
-export declare const baseCalendarClassNames: ClassNames;
+import { type PropsBase } from 'react-day-picker';
+export declare const baseCalendarClassNames: PropsBase['classNames'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.77.4",
+  "version": "1.78.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -140,7 +140,7 @@
     "react-animate-height": "^3.2.3",
     "react-aria": "^3.39.0",
     "react-aria-components": "^1.8.0",
-    "react-day-picker": "8.10.1",
+    "react-day-picker": "9.6.7",
     "react-focus-lock": "^2.13.6",
     "react-focus-on": "^3.9.4",
     "react-popper": "^2.3.0",
@@ -175,8 +175,8 @@
     "postcss-preset-env": "^10.1.6",
     "postcss-scss": "^4.0.9",
     "query-string": "^9.1.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-highlight": "^0.15.0",
     "react-intl": "^7.1.11",
     "rollup": "^4.40.2",
@@ -186,7 +186,7 @@
     "tslib": "^2.8.1",
     "ts-patch": "^3.3.0",
     "tsx": "^4.19.4",
-    "@kaizen/design-tokens": "10.9.1"
+    "@kaizen/design-tokens": "10.10.0"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",
@@ -194,8 +194,8 @@
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0",
     "react-intl": "^6.6.8 || ^7.0.0",
     "typescript": "5.x"
   },