@cloudscape-design/components-themeable 3.0.895 → 3.0.896

package/lib/internal/template/date-range-picker/calendar/grids/styles.css.js

@@ -1,29 +1,35 @@
 
     import './styles.scoped.css';
     export default {
-  "grid": "awsui_grid_1mfbn_1xshi_149",
-  "grid-cell": "awsui_grid-cell_1mfbn_1xshi_154",
-  "day-header": "awsui_day-header_1mfbn_1xshi_161",
-  "week": "awsui_week_1mfbn_1xshi_171",
-  "day": "awsui_day_1mfbn_1xshi_161",
-  "day-inner": "awsui_day-inner_1mfbn_1xshi_218",
-  "in-first-row": "awsui_in-first-row_1mfbn_1xshi_223",
-  "in-previous-month": "awsui_in-previous-month_1mfbn_1xshi_223",
-  "last-day-of-month": "awsui_last-day-of-month_1mfbn_1xshi_227",
-  "in-next-month": "awsui_in-next-month_1mfbn_1xshi_231",
-  "in-first-column": "awsui_in-first-column_1mfbn_1xshi_235",
-  "in-visible-calendar": "awsui_in-visible-calendar_1mfbn_1xshi_238",
-  "enabled": "awsui_enabled_1mfbn_1xshi_242",
-  "in-range": "awsui_in-range_1mfbn_1xshi_248",
-  "end-date": "awsui_end-date_1mfbn_1xshi_248",
-  "start-date": "awsui_start-date_1mfbn_1xshi_248",
-  "no-range": "awsui_no-range_1mfbn_1xshi_248",
-  "selected": "awsui_selected_1mfbn_1xshi_258",
-  "today": "awsui_today_1mfbn_1xshi_263",
-  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_1xshi_321",
-  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_1xshi_324",
-  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_1xshi_327",
-  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_1xshi_330",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_1mfbn_1xshi_346"
+  "grid": "awsui_grid_1mfbn_mzybe_149",
+  "grid-cell": "awsui_grid-cell_1mfbn_mzybe_154",
+  "day-header": "awsui_day-header_1mfbn_mzybe_161",
+  "day": "awsui_day_1mfbn_mzybe_161",
+  "month": "awsui_month_1mfbn_mzybe_172",
+  "day-inner": "awsui_day-inner_1mfbn_mzybe_220",
+  "month-inner": "awsui_month-inner_1mfbn_mzybe_221",
+  "in-first-row": "awsui_in-first-row_1mfbn_mzybe_228",
+  "in-previous-month": "awsui_in-previous-month_1mfbn_mzybe_228",
+  "in-previous-year": "awsui_in-previous-year_1mfbn_mzybe_229",
+  "last-day-of-month": "awsui_last-day-of-month_1mfbn_mzybe_233",
+  "last-month-of-year": "awsui_last-month-of-year_1mfbn_mzybe_234",
+  "in-next-month": "awsui_in-next-month_1mfbn_mzybe_238",
+  "in-next-year": "awsui_in-next-year_1mfbn_mzybe_239",
+  "in-first-column": "awsui_in-first-column_1mfbn_mzybe_243",
+  "in-visible-calendar": "awsui_in-visible-calendar_1mfbn_mzybe_246",
+  "in-current-month": "awsui_in-current-month_1mfbn_mzybe_246",
+  "in-current-year": "awsui_in-current-year_1mfbn_mzybe_246",
+  "enabled": "awsui_enabled_1mfbn_mzybe_250",
+  "in-range": "awsui_in-range_1mfbn_mzybe_256",
+  "end-date": "awsui_end-date_1mfbn_mzybe_256",
+  "start-date": "awsui_start-date_1mfbn_mzybe_256",
+  "no-range": "awsui_no-range_1mfbn_mzybe_256",
+  "selected": "awsui_selected_1mfbn_mzybe_266",
+  "today": "awsui_today_1mfbn_mzybe_271",
+  "this-month": "awsui_this-month_1mfbn_mzybe_272",
+  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_mzybe_328",
+  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_mzybe_331",
+  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_mzybe_334",
+  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_mzybe_337"
 };
   

package/lib/internal/template/date-range-picker/calendar/grids/styles.scoped.css

@@ -146,19 +146,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_grid_1mfbn_1xshi_149:not(#\9) {
+.awsui_grid_1mfbn_mzybe_149:not(#\9) {
   inline-size: var(--size-calendar-grid-width-arud77, 234px);
   border-spacing: 0;
 }
 
-.awsui_grid-cell_1mfbn_1xshi_154:not(#\9) {
+.awsui_grid-cell_1mfbn_mzybe_154:not(#\9) {
   inline-size: 14.2857142857%;
   word-break: break-word;
   text-align: center;
   font-weight: unset;
 }
 
-.awsui_day-header_1mfbn_1xshi_161:not(#\9) {
+.awsui_day-header_1mfbn_mzybe_161:not(#\9) {
   padding-block-start: var(--space-s-vmutj3, 12px);
   padding-block-end: var(--space-xxs-y2432o, 4px);
   padding-inline: 0;
@@ -168,11 +168,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: var(--letter-spacing-body-s-cbaxyl, normal);
 }
 
-.awsui_week_1mfbn_1xshi_171:not(#\9) {
-  /* used for identifying element */
-}
-
-.awsui_day_1mfbn_1xshi_161:not(#\9) {
+.awsui_day_1mfbn_mzybe_161:not(#\9),
+.awsui_month_1mfbn_mzybe_172:not(#\9) {
   border-block-end: 1px solid var(--color-border-calendar-grid-3f7bvh, #eaeded);
   border-inline-end: 1px solid var(--color-border-calendar-grid-3f7bvh, #eaeded);
   padding-block: var(--space-xxs-y2432o, 4px);
@@ -180,10 +177,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-dropdown-item-disabled-gk1x2u, #aab7b8);
   position: relative;
 }
-.awsui_day_1mfbn_1xshi_161:not(#\9):focus {
+.awsui_day_1mfbn_mzybe_161:not(#\9):focus,
+.awsui_month_1mfbn_mzybe_172:not(#\9):focus {
   outline: none;
 }
-.awsui_day_1mfbn_1xshi_161:not(#\9)::after {
+.awsui_day_1mfbn_mzybe_161:not(#\9)::after,
+.awsui_month_1mfbn_mzybe_172:not(#\9)::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -193,15 +192,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-end: calc(-1 * var(--border-item-width-bjacxs, 1px));
   background-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1xshi_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_day_1mfbn_mzybe_161:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_month_1mfbn_mzybe_172:not(#\9):focus {
   z-index: 2;
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1xshi_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_day_1mfbn_mzybe_161:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_month_1mfbn_mzybe_172:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-xwymmd, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1xshi_161:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_day_1mfbn_mzybe_161:not(#\9):focus::before,
+body[data-awsui-focus-visible=true] .awsui_month_1mfbn_mzybe_172:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -215,52 +217,59 @@ body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1xshi_161:not(#\9):focus::b
   border-end-end-radius: var(--border-radius-calendar-day-focus-ring-wmrhyj, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-q68bgg, #0073bb);
 }
-.awsui_day_1mfbn_1xshi_161 > .awsui_day-inner_1mfbn_1xshi_218:not(#\9) {
+.awsui_day_1mfbn_mzybe_161 > .awsui_day-inner_1mfbn_mzybe_220:not(#\9),
+.awsui_day_1mfbn_mzybe_161 > .awsui_month-inner_1mfbn_mzybe_221:not(#\9),
+.awsui_month_1mfbn_mzybe_172 > .awsui_day-inner_1mfbn_mzybe_220:not(#\9),
+.awsui_month_1mfbn_mzybe_172 > .awsui_month-inner_1mfbn_mzybe_221:not(#\9) {
   position: relative;
   z-index: 1;
 }
 
-.awsui_in-first-row_1mfbn_1xshi_223:not(#\9):not(.awsui_in-previous-month_1mfbn_1xshi_223) {
+.awsui_in-first-row_1mfbn_mzybe_228:not(#\9):not(.awsui_in-previous-month_1mfbn_mzybe_228),
+.awsui_in-first-row_1mfbn_mzybe_228:not(#\9):not(.awsui_in-previous-year_1mfbn_mzybe_229) {
   border-block-start: 1px solid var(--color-border-calendar-grid-3f7bvh, #eaeded);
 }
 
-.awsui_in-previous-month_1mfbn_1xshi_223:not(#\9):not(.awsui_last-day-of-month_1mfbn_1xshi_227) {
+.awsui_in-previous-month_1mfbn_mzybe_228:not(#\9):not(.awsui_last-day-of-month_1mfbn_mzybe_233),
+.awsui_in-previous-year_1mfbn_mzybe_229:not(#\9):not(.awsui_last-month-of-year_1mfbn_mzybe_234) {
   border-inline-end-color: transparent;
 }
 
-.awsui_in-next-month_1mfbn_1xshi_231:not(#\9) {
+.awsui_in-next-month_1mfbn_mzybe_238:not(#\9),
+.awsui_in-next-year_1mfbn_mzybe_239:not(#\9) {
   border-color: transparent;
 }
 
-.awsui_in-first-column_1mfbn_1xshi_235:not(#\9) {
+.awsui_in-first-column_1mfbn_mzybe_243:not(#\9) {
   border-inline-start: 1px solid 1px solid var(--color-border-calendar-grid-3f7bvh, #eaeded);
 }
-.awsui_in-first-column_1mfbn_1xshi_235.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9) {
+.awsui_in-first-column_1mfbn_mzybe_243.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-month_1mfbn_mzybe_246:not(#\9), .awsui_in-first-column_1mfbn_mzybe_243.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-year_1mfbn_mzybe_246:not(#\9) {
   border-inline-start: 1px solid var(--color-border-calendar-grid-3f7bvh, #eaeded);
 }
 
-.awsui_enabled_1mfbn_1xshi_242:not(#\9) {
+.awsui_enabled_1mfbn_mzybe_250:not(#\9) {
   cursor: pointer;
 }
-.awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9) {
+.awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-month_1mfbn_mzybe_246:not(#\9), .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-year_1mfbn_mzybe_246:not(#\9) {
   color: var(--color-text-dropdown-item-default-o6jy8o, #16191f);
 }
-.awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9):not(.awsui_in-range_1mfbn_1xshi_248), .awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9):not(.awsui_in-range_1mfbn_1xshi_248)::after, .awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238.awsui_end-date_1mfbn_1xshi_248.awsui_start-date_1mfbn_1xshi_248:not(#\9), .awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238.awsui_end-date_1mfbn_1xshi_248.awsui_start-date_1mfbn_1xshi_248:not(#\9)::after, .awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238.awsui_no-range_1mfbn_1xshi_248:not(#\9), .awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238.awsui_no-range_1mfbn_1xshi_248:not(#\9)::after {
+.awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-month_1mfbn_mzybe_246:not(#\9):not(.awsui_in-range_1mfbn_mzybe_256), .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-month_1mfbn_mzybe_246:not(#\9):not(.awsui_in-range_1mfbn_mzybe_256)::after, .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-month_1mfbn_mzybe_246.awsui_end-date_1mfbn_mzybe_256.awsui_start-date_1mfbn_mzybe_256:not(#\9), .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-month_1mfbn_mzybe_246.awsui_end-date_1mfbn_mzybe_256.awsui_start-date_1mfbn_mzybe_256:not(#\9)::after, .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-month_1mfbn_mzybe_246.awsui_no-range_1mfbn_mzybe_256:not(#\9), .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-month_1mfbn_mzybe_246.awsui_no-range_1mfbn_mzybe_256:not(#\9)::after, .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-year_1mfbn_mzybe_246:not(#\9):not(.awsui_in-range_1mfbn_mzybe_256), .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-year_1mfbn_mzybe_246:not(#\9):not(.awsui_in-range_1mfbn_mzybe_256)::after, .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-year_1mfbn_mzybe_246.awsui_end-date_1mfbn_mzybe_256.awsui_start-date_1mfbn_mzybe_256:not(#\9), .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-year_1mfbn_mzybe_246.awsui_end-date_1mfbn_mzybe_256.awsui_start-date_1mfbn_mzybe_256:not(#\9)::after, .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-year_1mfbn_mzybe_246.awsui_no-range_1mfbn_mzybe_256:not(#\9), .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-year_1mfbn_mzybe_246.awsui_no-range_1mfbn_mzybe_256:not(#\9)::after {
   border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
   border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
   border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
   border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9):hover {
+.awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-month_1mfbn_mzybe_246:not(#\9):hover, .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-year_1mfbn_mzybe_246:not(#\9):hover {
   color: var(--color-text-calendar-date-hover-tw9220, #16191f);
   background-color: var(--color-background-dropdown-item-hover-r5jqv1, #f2f3f3);
 }
-.awsui_enabled_1mfbn_1xshi_242.awsui_in-visible-calendar_1mfbn_1xshi_238:not(#\9):hover:not(.awsui_selected_1mfbn_1xshi_258)::after {
+.awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-month_1mfbn_mzybe_246:not(#\9):hover:not(.awsui_selected_1mfbn_mzybe_266)::after, .awsui_enabled_1mfbn_mzybe_250.awsui_in-visible-calendar_1mfbn_mzybe_246.awsui_in-current-year_1mfbn_mzybe_246:not(#\9):hover:not(.awsui_selected_1mfbn_mzybe_266)::after {
   border-block: var(--border-item-width-bjacxs, 1px) solid var(--color-border-dropdown-item-hover-69t7jr, #879596);
   border-inline: var(--border-item-width-bjacxs, 1px) solid var(--color-border-dropdown-item-hover-69t7jr, #879596);
 }
 
-.awsui_today_1mfbn_1xshi_263:not(#\9):not(.awsui_in-range_1mfbn_1xshi_248) {
+.awsui_today_1mfbn_mzybe_271:not(#\9):not(.awsui_in-range_1mfbn_mzybe_256),
+.awsui_this-month_1mfbn_mzybe_272:not(#\9):not(.awsui_in-range_1mfbn_mzybe_256) {
   background-color: var(--color-background-calendar-current-date-du8mmf, #f2f3f3);
   border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
   border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
@@ -269,20 +278,20 @@ body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1xshi_161:not(#\9):focus::b
   font-weight: 700;
 }
 
-.awsui_selected_1mfbn_1xshi_258:not(#\9) {
+.awsui_selected_1mfbn_mzybe_266:not(#\9) {
   border-color: transparent;
   position: relative;
   z-index: 2;
   font-weight: 700;
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1xshi_258:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_mzybe_266:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1xshi_258:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_mzybe_266:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-selected-focus-outline-gutter-alnmsa, 2px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1xshi_258:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_mzybe_266:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -296,53 +305,60 @@ body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1xshi_258:not(#\9):foc
   border-end-end-radius: var(--border-radius-calendar-day-focus-ring-wmrhyj, 2px);
   box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-faye0i, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1xshi_258:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_mzybe_266:not(#\9):focus::before {
   z-index: 1;
 }
-.awsui_selected_1mfbn_1xshi_258:not(#\9)::after {
+.awsui_selected_1mfbn_mzybe_266:not(#\9)::after {
   background-color: var(--color-background-control-checked-aeun6h, #0073bb);
   border-block: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
   border-inline: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
   z-index: 0;
 }
-.awsui_selected_1mfbn_1xshi_258.awsui_start-date_1mfbn_1xshi_248:not(#\9), .awsui_selected_1mfbn_1xshi_258.awsui_end-date_1mfbn_1xshi_248:not(#\9) {
-  /* used in test utils */
-}
-.awsui_selected_1mfbn_1xshi_258 > .awsui_day-inner_1mfbn_1xshi_218:not(#\9) {
+.awsui_selected_1mfbn_mzybe_266 > .awsui_day-inner_1mfbn_mzybe_220:not(#\9),
+.awsui_selected_1mfbn_mzybe_266 > .awsui_month-inner_1mfbn_mzybe_221:not(#\9) {
   color: var(--color-background-control-default-mfefru, #ffffff);
   position: relative;
   z-index: 2;
 }
 
-.awsui_in-range_1mfbn_1xshi_248:not(#\9) {
+.awsui_in-range_1mfbn_mzybe_256:not(#\9) {
   background-color: var(--color-background-dropdown-item-selected-i187hy, #f1faff);
   font-weight: 700;
 }
-.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-start_1mfbn_1xshi_321:not(#\9)::after {
+.awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-block-start_1mfbn_mzybe_328:not(#\9)::after {
   border-block-start: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
 }
-.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-inline-end_1mfbn_1xshi_324:not(#\9)::after {
+.awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-inline-end_1mfbn_mzybe_331:not(#\9)::after {
   border-inline-end: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
 }
-.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-end_1mfbn_1xshi_327:not(#\9)::after {
+.awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-block-end_1mfbn_mzybe_334:not(#\9)::after {
   border-block-end: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
 }
-.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-inline-start_1mfbn_1xshi_330:not(#\9)::after {
+.awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-inline-start_1mfbn_mzybe_337:not(#\9)::after {
   border-inline-start: var(--border-item-width-bjacxs, 1px) solid var(--color-background-control-checked-aeun6h, #0073bb);
 }
-.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-start_1mfbn_1xshi_321.awsui_in-range-border-inline-end_1mfbn_1xshi_324:not(#\9), .awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-start_1mfbn_1xshi_321.awsui_in-range-border-inline-end_1mfbn_1xshi_324:not(#\9)::after {
+.awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-block-start_1mfbn_mzybe_328.awsui_in-range-border-inline-end_1mfbn_mzybe_331:not(#\9), .awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-block-start_1mfbn_mzybe_328.awsui_in-range-border-inline-end_1mfbn_mzybe_331:not(#\9)::after {
   border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-end_1mfbn_1xshi_327.awsui_in-range-border-inline-end_1mfbn_1xshi_324:not(#\9), .awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-end_1mfbn_1xshi_327.awsui_in-range-border-inline-end_1mfbn_1xshi_324:not(#\9)::after {
+.awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-block-end_1mfbn_mzybe_334.awsui_in-range-border-inline-end_1mfbn_mzybe_331:not(#\9), .awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-block-end_1mfbn_mzybe_334.awsui_in-range-border-inline-end_1mfbn_mzybe_331:not(#\9)::after {
   border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-end_1mfbn_1xshi_327.awsui_in-range-border-inline-start_1mfbn_1xshi_330:not(#\9), .awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-end_1mfbn_1xshi_327.awsui_in-range-border-inline-start_1mfbn_1xshi_330:not(#\9)::after {
+.awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-block-end_1mfbn_mzybe_334.awsui_in-range-border-inline-start_1mfbn_mzybe_337:not(#\9), .awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-block-end_1mfbn_mzybe_334.awsui_in-range-border-inline-start_1mfbn_mzybe_337:not(#\9)::after {
   border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-start_1mfbn_1xshi_321.awsui_in-range-border-inline-start_1mfbn_1xshi_330:not(#\9), .awsui_in-range_1mfbn_1xshi_248.awsui_in-range-border-block-start_1mfbn_1xshi_321.awsui_in-range-border-inline-start_1mfbn_1xshi_330:not(#\9)::after {
+.awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-block-start_1mfbn_mzybe_328.awsui_in-range-border-inline-start_1mfbn_mzybe_337:not(#\9), .awsui_in-range_1mfbn_mzybe_256.awsui_in-range-border-block-start_1mfbn_mzybe_328.awsui_in-range-border-inline-start_1mfbn_mzybe_337:not(#\9)::after {
   border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
 }
 
-.awsui_disabled-reason-tooltip_1mfbn_1xshi_346:not(#\9) {
-  /* used in test-utils or tests */
+.awsui_no-range_1mfbn_mzybe_256:not(#\9), .awsui_no-range_1mfbn_mzybe_256:not(#\9)::after {
+  border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
+}
+.awsui_no-range_1mfbn_mzybe_256:not(#\9), .awsui_no-range_1mfbn_mzybe_256:not(#\9)::after {
+  border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
+}
+.awsui_no-range_1mfbn_mzybe_256:not(#\9), .awsui_no-range_1mfbn_mzybe_256:not(#\9)::after {
+  border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
+}
+.awsui_no-range_1mfbn_mzybe_256:not(#\9), .awsui_no-range_1mfbn_mzybe_256:not(#\9)::after {
+  border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
 }

package/lib/internal/template/date-range-picker/calendar/grids/styles.selectors.js

@@ -2,29 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "grid": "awsui_grid_1mfbn_1xshi_149",
-  "grid-cell": "awsui_grid-cell_1mfbn_1xshi_154",
-  "day-header": "awsui_day-header_1mfbn_1xshi_161",
-  "week": "awsui_week_1mfbn_1xshi_171",
-  "day": "awsui_day_1mfbn_1xshi_161",
-  "day-inner": "awsui_day-inner_1mfbn_1xshi_218",
-  "in-first-row": "awsui_in-first-row_1mfbn_1xshi_223",
-  "in-previous-month": "awsui_in-previous-month_1mfbn_1xshi_223",
-  "last-day-of-month": "awsui_last-day-of-month_1mfbn_1xshi_227",
-  "in-next-month": "awsui_in-next-month_1mfbn_1xshi_231",
-  "in-first-column": "awsui_in-first-column_1mfbn_1xshi_235",
-  "in-visible-calendar": "awsui_in-visible-calendar_1mfbn_1xshi_238",
-  "enabled": "awsui_enabled_1mfbn_1xshi_242",
-  "in-range": "awsui_in-range_1mfbn_1xshi_248",
-  "end-date": "awsui_end-date_1mfbn_1xshi_248",
-  "start-date": "awsui_start-date_1mfbn_1xshi_248",
-  "no-range": "awsui_no-range_1mfbn_1xshi_248",
-  "selected": "awsui_selected_1mfbn_1xshi_258",
-  "today": "awsui_today_1mfbn_1xshi_263",
-  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_1xshi_321",
-  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_1xshi_324",
-  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_1xshi_327",
-  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_1xshi_330",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_1mfbn_1xshi_346"
+  "grid": "awsui_grid_1mfbn_mzybe_149",
+  "grid-cell": "awsui_grid-cell_1mfbn_mzybe_154",
+  "day-header": "awsui_day-header_1mfbn_mzybe_161",
+  "day": "awsui_day_1mfbn_mzybe_161",
+  "month": "awsui_month_1mfbn_mzybe_172",
+  "day-inner": "awsui_day-inner_1mfbn_mzybe_220",
+  "month-inner": "awsui_month-inner_1mfbn_mzybe_221",
+  "in-first-row": "awsui_in-first-row_1mfbn_mzybe_228",
+  "in-previous-month": "awsui_in-previous-month_1mfbn_mzybe_228",
+  "in-previous-year": "awsui_in-previous-year_1mfbn_mzybe_229",
+  "last-day-of-month": "awsui_last-day-of-month_1mfbn_mzybe_233",
+  "last-month-of-year": "awsui_last-month-of-year_1mfbn_mzybe_234",
+  "in-next-month": "awsui_in-next-month_1mfbn_mzybe_238",
+  "in-next-year": "awsui_in-next-year_1mfbn_mzybe_239",
+  "in-first-column": "awsui_in-first-column_1mfbn_mzybe_243",
+  "in-visible-calendar": "awsui_in-visible-calendar_1mfbn_mzybe_246",
+  "in-current-month": "awsui_in-current-month_1mfbn_mzybe_246",
+  "in-current-year": "awsui_in-current-year_1mfbn_mzybe_246",
+  "enabled": "awsui_enabled_1mfbn_mzybe_250",
+  "in-range": "awsui_in-range_1mfbn_mzybe_256",
+  "end-date": "awsui_end-date_1mfbn_mzybe_256",
+  "start-date": "awsui_start-date_1mfbn_mzybe_256",
+  "no-range": "awsui_no-range_1mfbn_mzybe_256",
+  "selected": "awsui_selected_1mfbn_mzybe_266",
+  "today": "awsui_today_1mfbn_mzybe_271",
+  "this-month": "awsui_this-month_1mfbn_mzybe_272",
+  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_mzybe_328",
+  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_mzybe_331",
+  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_mzybe_334",
+  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_mzybe_337"
 };
   

package/lib/internal/template/date-range-picker/calendar/header/header-button.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { DateRangePickerProps } from '../../interfaces';
 interface HeaderButtonProps {
     ariaLabel?: string;
-    baseDate: Date;
-    onChangeMonth: (date: Date) => void;
+    onChangePage: (n: number) => void;
+    granularity?: DateRangePickerProps.Granularity;
 }
-export declare function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps): JSX.Element;
-export declare function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps): JSX.Element;
+export declare function PrevPageButton({ ariaLabel, onChangePage }: HeaderButtonProps): JSX.Element;
+export declare function NextPageButton({ ariaLabel, onChangePage }: HeaderButtonProps): JSX.Element;
 export {};
 //# sourceMappingURL=header-button.d.ts.map

package/lib/internal/template/date-range-picker/calendar/header/header-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/header-button.tsx"],"names":[],"mappings":";AASA,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,IAAI,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,iBAAiB,eAWxF;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,iBAAiB,eAWxF"}
+{"version":3,"file":"header-button.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/header-button.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAIxD,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAChD;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,iBAAiB,eAW5E;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,iBAAiB,eAW5E"}

package/lib/internal/template/date-range-picker/calendar/header/header-button.js

@@ -1,13 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { addMonths } from 'date-fns';
+import clsx from 'clsx';
 import { InternalButton } from '../../../button/internal';
-import styles from '../../styles.css.js';
-export function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }) {
-    return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: 'icon', onClick: () => onChangeMonth(addMonths(baseDate, -1)), formAction: "none", className: styles['calendar-prev-month-btn'] }));
+import testutilStyles from '../../test-classes/styles.css.js';
+export function PrevPageButton({ ariaLabel, onChangePage }) {
+    return (React.createElement(InternalButton, { iconName: "angle-left", ariaLabel: ariaLabel, variant: 'icon', onClick: () => onChangePage(-1), formAction: "none", className: clsx(testutilStyles[`calendar-prev-page-btn`], testutilStyles[`calendar-prev-month-btn`]) }));
 }
-export function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }) {
-    return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: 'icon', onClick: () => onChangeMonth(addMonths(baseDate, 1)), formAction: "none", className: styles['calendar-next-month-btn'] }));
+export function NextPageButton({ ariaLabel, onChangePage }) {
+    return (React.createElement(InternalButton, { iconName: "angle-right", ariaLabel: ariaLabel, variant: 'icon', onClick: () => onChangePage(1), formAction: "none", className: clsx(testutilStyles[`calendar-next-page-btn`], testutilStyles[`calendar-next-month-btn`]) }));
 }
 //# sourceMappingURL=header-button.js.map

package/lib/internal/template/date-range-picker/calendar/header/header-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-button.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/header-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAQzC,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAqB;IACvF,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EACrD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,GAC5C,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAqB;IACvF,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,aAAa,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EACpD,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,GAC5C,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { addMonths } from 'date-fns';\n\nimport { InternalButton } from '../../../button/internal';\n\nimport styles from '../../styles.css.js';\n\ninterface HeaderButtonProps {\n  ariaLabel?: string;\n  baseDate: Date;\n  onChangeMonth: (date: Date) => void;\n}\n\nexport function PrevMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-left\"\n      ariaLabel={ariaLabel}\n      variant={'icon'}\n      onClick={() => onChangeMonth(addMonths(baseDate, -1))}\n      formAction=\"none\"\n      className={styles['calendar-prev-month-btn']}\n    />\n  );\n}\n\nexport function NextMonthButton({ ariaLabel, baseDate, onChangeMonth }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-right\"\n      ariaLabel={ariaLabel}\n      variant={'icon'}\n      onClick={() => onChangeMonth(addMonths(baseDate, 1))}\n      formAction=\"none\"\n      className={styles['calendar-next-month-btn']}\n    />\n  );\n}\n"]}
+{"version":3,"file":"header-button.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/header-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG1D,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAQ9D,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,YAAY,EAAqB;IAC3E,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAC/B,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,wBAAwB,CAAC,EAAE,cAAc,CAAC,yBAAyB,CAAC,CAAC,GACpG,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,YAAY,EAAqB;IAC3E,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAC,aAAa,EACtB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAC9B,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,wBAAwB,CAAC,EAAE,cAAc,CAAC,yBAAyB,CAAC,CAAC,GACpG,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../../../button/internal';\nimport { DateRangePickerProps } from '../../interfaces';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\n\ninterface HeaderButtonProps {\n  ariaLabel?: string;\n  onChangePage: (n: number) => void;\n  granularity?: DateRangePickerProps.Granularity;\n}\n\nexport function PrevPageButton({ ariaLabel, onChangePage }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-left\"\n      ariaLabel={ariaLabel}\n      variant={'icon'}\n      onClick={() => onChangePage(-1)}\n      formAction=\"none\"\n      className={clsx(testutilStyles[`calendar-prev-page-btn`], testutilStyles[`calendar-prev-month-btn`])}\n    />\n  );\n}\n\nexport function NextPageButton({ ariaLabel, onChangePage }: HeaderButtonProps) {\n  return (\n    <InternalButton\n      iconName=\"angle-right\"\n      ariaLabel={ariaLabel}\n      variant={'icon'}\n      onClick={() => onChangePage(1)}\n      formAction=\"none\"\n      className={clsx(testutilStyles[`calendar-next-page-btn`], testutilStyles[`calendar-next-month-btn`])}\n    />\n  );\n}\n"]}

package/lib/internal/template/date-range-picker/calendar/header/index.d.ts

@@ -1,13 +1,15 @@
 /// <reference types="react" />
+import { DateRangePickerProps } from '../../interfaces';
 interface CalendarHeaderProps {
     baseDate: Date;
     locale: string;
-    onChangeMonth: (date: Date) => void;
-    previousMonthLabel?: string;
-    nextMonthLabel?: string;
+    onChangePage: (n: number) => void;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
     isSingleGrid: boolean;
     headingIdPrefix: string;
+    granularity?: DateRangePickerProps.Granularity;
 }
-export default function CalendarHeader({ baseDate, locale, onChangeMonth, previousMonthLabel, nextMonthLabel, isSingleGrid, headingIdPrefix, }: CalendarHeaderProps): JSX.Element;
+export default function CalendarHeader({ baseDate, locale, onChangePage, previousPageLabel, nextPageLabel, isSingleGrid, headingIdPrefix, granularity, }: CalendarHeaderProps): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/date-range-picker/calendar/header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":";AAYA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,eAAe,GAChB,EAAE,mBAAmB,eAkCrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAMxD,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,WAAmB,GACpB,EAAE,mBAAmB,eA4CrB"}

package/lib/internal/template/date-range-picker/calendar/header/index.js

@@ -1,23 +1,28 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import clsx from 'clsx';
 import { add } from 'date-fns';
-import { renderMonthAndYear } from '../../../calendar/utils/intl';
+import { renderMonthAndYear, renderYear } from '../../../calendar/utils/intl';
 import { useInternalI18n } from '../../../i18n/context.js';
 import InternalLiveRegion from '../../../live-region/internal';
-import { NextMonthButton, PrevMonthButton } from './header-button';
+import { NextPageButton, PrevPageButton } from './header-button';
 import styles from '../../styles.css.js';
-export default function CalendarHeader({ baseDate, locale, onChangeMonth, previousMonthLabel, nextMonthLabel, isSingleGrid, headingIdPrefix, }) {
-    const i18n = useInternalI18n('calendar');
-    const prevMonthLabel = renderMonthAndYear(locale, add(baseDate, { months: -1 }));
-    const currentMonthLabel = renderMonthAndYear(locale, baseDate);
+import testutilStyles from '../../test-classes/styles.css.js';
+export default function CalendarHeader({ baseDate, locale, onChangePage, previousPageLabel, nextPageLabel, isSingleGrid, headingIdPrefix, granularity = 'day', }) {
+    const i18n = useInternalI18n('date-range-picker');
+    const isMonthPicker = granularity === 'month';
+    const renderLabel = isMonthPicker ? renderYear : renderMonthAndYear;
+    const prevPageHeaderLabel = renderLabel(locale, add(baseDate, granularity === 'month' ? { years: -1 } : { months: -1 }));
+    const currentPageHeaderLabel = renderLabel(locale, baseDate);
+    const pageUnit = isMonthPicker ? 'year' : 'month';
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: styles['calendar-header'] },
-            React.createElement(PrevMonthButton, { ariaLabel: i18n('previousMonthAriaLabel', previousMonthLabel), baseDate: baseDate, onChangeMonth: onChangeMonth }),
-            React.createElement("h2", { className: styles['calendar-header-months-wrapper'] },
-                !isSingleGrid && (React.createElement("span", { className: styles['calendar-header-month'], id: `${headingIdPrefix}-prevmonth` }, prevMonthLabel)),
-                React.createElement("span", { className: styles['calendar-header-month'], id: `${headingIdPrefix}-currentmonth` }, currentMonthLabel)),
-            React.createElement(NextMonthButton, { ariaLabel: i18n('nextMonthAriaLabel', nextMonthLabel), baseDate: baseDate, onChangeMonth: onChangeMonth })),
-        React.createElement(InternalLiveRegion, { hidden: true }, isSingleGrid ? currentMonthLabel : `${prevMonthLabel}, ${currentMonthLabel}`)));
+        React.createElement("div", { className: clsx(testutilStyles['calendar-header'], styles['calendar-header']) },
+            React.createElement(PrevPageButton, { ariaLabel: i18n(isMonthPicker ? 'i18nStrings.previousYearAriaLabel' : 'i18nStrings.previousMonthAriaLabel', previousPageLabel), onChangePage: onChangePage }),
+            React.createElement("h2", { className: styles['calendar-header-pages-wrapper'] },
+                !isSingleGrid && (React.createElement("span", { className: styles['calendar-header-page'], id: `${headingIdPrefix}-prev${pageUnit}` }, prevPageHeaderLabel)),
+                React.createElement("span", { className: styles['calendar-header-page'], id: `${headingIdPrefix}-current${pageUnit}` }, currentPageHeaderLabel)),
+            React.createElement(NextPageButton, { ariaLabel: i18n(isMonthPicker ? 'i18nStrings.nextYearAriaLabel' : 'i18nStrings.nextMonthAriaLabel', nextPageLabel), onChangePage: onChangePage })),
+        React.createElement(InternalLiveRegion, { hidden: true }, isSingleGrid ? currentPageHeaderLabel : `${prevPageHeaderLabel}, ${currentPageHeaderLabel}`)));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/date-range-picker/calendar/header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEnE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAYzC,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,eAAe,GACK;IACpB,MAAM,IAAI,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;IACzC,MAAM,cAAc,GAAG,kBAAkB,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjF,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAE/D,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;YACvC,oBAAC,eAAe,IACd,SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,kBAAkB,CAAC,EAC7D,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC5B;YACF,4BAAI,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC;gBACpD,CAAC,YAAY,IAAI,CAChB,8BAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,GAAG,eAAe,YAAY,IACjF,cAAc,CACV,CACR;gBACD,8BAAM,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,EAAE,GAAG,eAAe,eAAe,IACpF,iBAAiB,CACb,CACJ;YACL,oBAAC,eAAe,IACd,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,cAAc,CAAC,EACrD,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC5B,CACE;QACN,oBAAC,kBAAkB,IAAC,MAAM,EAAE,IAAI,IAC7B,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,cAAc,KAAK,iBAAiB,EAAE,CAC1D,CACpB,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { add } from 'date-fns';\n\nimport { renderMonthAndYear } from '../../../calendar/utils/intl';\nimport { useInternalI18n } from '../../../i18n/context.js';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport { NextMonthButton, PrevMonthButton } from './header-button';\n\nimport styles from '../../styles.css.js';\n\ninterface CalendarHeaderProps {\n  baseDate: Date;\n  locale: string;\n  onChangeMonth: (date: Date) => void;\n  previousMonthLabel?: string;\n  nextMonthLabel?: string;\n  isSingleGrid: boolean;\n  headingIdPrefix: string;\n}\n\nexport default function CalendarHeader({\n  baseDate,\n  locale,\n  onChangeMonth,\n  previousMonthLabel,\n  nextMonthLabel,\n  isSingleGrid,\n  headingIdPrefix,\n}: CalendarHeaderProps) {\n  const i18n = useInternalI18n('calendar');\n  const prevMonthLabel = renderMonthAndYear(locale, add(baseDate, { months: -1 }));\n  const currentMonthLabel = renderMonthAndYear(locale, baseDate);\n\n  return (\n    <>\n      <div className={styles['calendar-header']}>\n        <PrevMonthButton\n          ariaLabel={i18n('previousMonthAriaLabel', previousMonthLabel)}\n          baseDate={baseDate}\n          onChangeMonth={onChangeMonth}\n        />\n        <h2 className={styles['calendar-header-months-wrapper']}>\n          {!isSingleGrid && (\n            <span className={styles['calendar-header-month']} id={`${headingIdPrefix}-prevmonth`}>\n              {prevMonthLabel}\n            </span>\n          )}\n          <span className={styles['calendar-header-month']} id={`${headingIdPrefix}-currentmonth`}>\n            {currentMonthLabel}\n          </span>\n        </h2>\n        <NextMonthButton\n          ariaLabel={i18n('nextMonthAriaLabel', nextMonthLabel)}\n          baseDate={baseDate}\n          onChangeMonth={onChangeMonth}\n        />\n      </div>\n      <InternalLiveRegion hidden={true}>\n        {isSingleGrid ? currentMonthLabel : `${prevMonthLabel}, ${currentMonthLabel}`}\n      </InternalLiveRegion>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/date-range-picker/calendar/header/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,kBAAkB,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAa9D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,WAAW,GAAG,KAAK,GACC;IACpB,MAAM,IAAI,GAAG,eAAe,CAAC,mBAAmB,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,WAAW,KAAK,OAAO,CAAC;IAC9C,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC;IACpE,MAAM,mBAAmB,GAAG,WAAW,CACrC,MAAM,EACN,GAAG,CAAC,QAAQ,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CACxE,CAAC;IACF,MAAM,sBAAsB,GAAG,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7D,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAElD,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC;YAChF,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CACb,aAAa,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,oCAAoC,EAC1F,iBAAiB,CAClB,EACD,YAAY,EAAE,YAAY,GAC1B;YACF,4BAAI,SAAS,EAAE,MAAM,CAAC,+BAA+B,CAAC;gBACnD,CAAC,YAAY,IAAI,CAChB,8BAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,EAAE,EAAE,GAAG,eAAe,QAAQ,QAAQ,EAAE,IACtF,mBAAmB,CACf,CACR;gBACD,8BAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,EAAE,EAAE,GAAG,eAAe,WAAW,QAAQ,EAAE,IACzF,sBAAsB,CAClB,CACJ;YACL,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CACb,aAAa,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gCAAgC,EAClF,aAAa,CACd,EACD,YAAY,EAAE,YAAY,GAC1B,CACE;QACN,oBAAC,kBAAkB,IAAC,MAAM,EAAE,IAAI,IAC7B,YAAY,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,GAAG,mBAAmB,KAAK,sBAAsB,EAAE,CACzE,CACpB,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { add } from 'date-fns';\n\nimport { renderMonthAndYear, renderYear } from '../../../calendar/utils/intl';\nimport { useInternalI18n } from '../../../i18n/context.js';\nimport InternalLiveRegion from '../../../live-region/internal';\nimport { DateRangePickerProps } from '../../interfaces';\nimport { NextPageButton, PrevPageButton } from './header-button';\n\nimport styles from '../../styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\n\ninterface CalendarHeaderProps {\n  baseDate: Date;\n  locale: string;\n  onChangePage: (n: number) => void;\n  previousPageLabel?: string;\n  nextPageLabel?: string;\n  isSingleGrid: boolean;\n  headingIdPrefix: string;\n  granularity?: DateRangePickerProps.Granularity;\n}\n\nexport default function CalendarHeader({\n  baseDate,\n  locale,\n  onChangePage,\n  previousPageLabel,\n  nextPageLabel,\n  isSingleGrid,\n  headingIdPrefix,\n  granularity = 'day',\n}: CalendarHeaderProps) {\n  const i18n = useInternalI18n('date-range-picker');\n  const isMonthPicker = granularity === 'month';\n  const renderLabel = isMonthPicker ? renderYear : renderMonthAndYear;\n  const prevPageHeaderLabel = renderLabel(\n    locale,\n    add(baseDate, granularity === 'month' ? { years: -1 } : { months: -1 })\n  );\n  const currentPageHeaderLabel = renderLabel(locale, baseDate);\n  const pageUnit = isMonthPicker ? 'year' : 'month';\n\n  return (\n    <>\n      <div className={clsx(testutilStyles['calendar-header'], styles['calendar-header'])}>\n        <PrevPageButton\n          ariaLabel={i18n(\n            isMonthPicker ? 'i18nStrings.previousYearAriaLabel' : 'i18nStrings.previousMonthAriaLabel',\n            previousPageLabel\n          )}\n          onChangePage={onChangePage}\n        />\n        <h2 className={styles['calendar-header-pages-wrapper']}>\n          {!isSingleGrid && (\n            <span className={styles['calendar-header-page']} id={`${headingIdPrefix}-prev${pageUnit}`}>\n              {prevPageHeaderLabel}\n            </span>\n          )}\n          <span className={styles['calendar-header-page']} id={`${headingIdPrefix}-current${pageUnit}`}>\n            {currentPageHeaderLabel}\n          </span>\n        </h2>\n        <NextPageButton\n          ariaLabel={i18n(\n            isMonthPicker ? 'i18nStrings.nextYearAriaLabel' : 'i18nStrings.nextMonthAriaLabel',\n            nextPageLabel\n          )}\n          onChangePage={onChangePage}\n        />\n      </div>\n      <InternalLiveRegion hidden={true}>\n        {isSingleGrid ? currentPageHeaderLabel : `${prevPageHeaderLabel}, ${currentPageHeaderLabel}`}\n      </InternalLiveRegion>\n    </>\n  );\n}\n"]}

package/lib/internal/template/date-range-picker/calendar/index.d.ts

@@ -13,6 +13,7 @@ export interface DateRangePickerCalendarProps extends BaseComponentProps {
     dateOnly?: boolean;
     timeInputFormat?: TimeInputProps.Format;
     customAbsoluteRangeControl: DateRangePickerProps.AbsoluteRangeControl | undefined;
+    granularity?: DateRangePickerProps.Granularity;
 }
-export default function DateRangePickerCalendar({ value, setValue, locale, startOfWeek, isDateEnabled, dateDisabledReason, i18nStrings, dateOnly, timeInputFormat, customAbsoluteRangeControl, }: DateRangePickerCalendarProps): JSX.Element;
+export default function DateRangePickerCalendar({ value, setValue, locale, startOfWeek, isDateEnabled, dateDisabledReason, i18nStrings, dateOnly, timeInputFormat, customAbsoluteRangeControl, granularity, }: DateRangePickerCalendarProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/date-range-picker/calendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAOnE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAQ/E,MAAM,WAAW,4BAA6B,SAAQ,kBAAkB;IACtE,KAAK,EAAE,oBAAoB,CAAC,oBAAoB,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAC5C,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACxC,0BAA0B,EAAE,oBAAoB,CAAC,oBAAoB,GAAG,SAAS,CAAC;CACnF;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,KAAK,EACL,QAAQ,EACR,MAAW,EACX,WAAW,EACX,aAA0B,EAC1B,kBAA6B,EAC7B,WAAW,EACX,QAAgB,EAChB,eAA4B,EAC5B,0BAA0B,GAC3B,EAAE,4BAA4B,eAqO9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/date-range-picker/calendar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAmBxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAOnE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAS/E,MAAM,WAAW,4BAA6B,SAAQ,kBAAkB;IACtE,KAAK,EAAE,oBAAoB,CAAC,oBAAoB,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAC5C,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACxC,0BAA0B,EAAE,oBAAoB,CAAC,oBAAoB,GAAG,SAAS,CAAC;IAClF,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,KAAK,EACL,QAAQ,EACR,MAAW,EACX,WAAW,EACX,aAA0B,EAC1B,kBAA6B,EAC7B,WAAW,EACX,QAAgB,EAChB,eAA4B,EAC5B,0BAA0B,EAC1B,WAAmB,GACpB,EAAE,4BAA4B,eAyP9B"}