@cloudscape-design/components-themeable 3.0.1163 → 3.0.1165

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

@@ -146,30 +146,30 @@ 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_16er5_149:not(#\9) {
+.awsui_grid_1mfbn_1bxfb_149:not(#\9) {
   inline-size: var(--size-calendar-grid-width-goqv80, 234px);
   border-spacing: 0;
 }
 
-.awsui_grid-cell_1mfbn_16er5_154:not(#\9) {
+.awsui_grid-cell_1mfbn_1bxfb_154:not(#\9) {
   inline-size: 14.2857142857%;
   word-break: break-word;
   text-align: center;
   font-weight: unset;
 }
 
-.awsui_day-header_1mfbn_16er5_161:not(#\9) {
+.awsui_day-header_1mfbn_1bxfb_161:not(#\9) {
   padding-block-start: var(--space-s-4a5hs8, 12px);
   padding-block-end: var(--space-xxs-jnczic, 4px);
   padding-inline: 0;
-  color: var(--color-text-calendar-month-ebd5bz, #545b64);
+  color: var(--color-text-calendar-month-vdrhy9, #545b64);
   font-size: var(--font-size-body-s-psgqn2, 12px);
   line-height: var(--line-height-body-s-otgtsr, 16px);
   letter-spacing: var(--letter-spacing-body-s-egrcsd, normal);
 }
 
-.awsui_day_1mfbn_16er5_161:not(#\9),
-.awsui_month_1mfbn_16er5_172:not(#\9) {
+.awsui_day_1mfbn_1bxfb_161:not(#\9),
+.awsui_month_1mfbn_1bxfb_172:not(#\9) {
   border-block-end: 1px solid var(--color-border-calendar-grid-zrkvhb, #eaeded);
   border-inline-end: 1px solid var(--color-border-calendar-grid-zrkvhb, #eaeded);
   padding-block: var(--space-xxs-jnczic, 4px);
@@ -177,12 +177,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-dropdown-item-disabled-oysy8n, #aab7b8);
   position: relative;
 }
-.awsui_day_1mfbn_16er5_161:not(#\9):focus,
-.awsui_month_1mfbn_16er5_172:not(#\9):focus {
+.awsui_day_1mfbn_1bxfb_161:not(#\9):focus,
+.awsui_month_1mfbn_1bxfb_172:not(#\9):focus {
   outline: none;
 }
-.awsui_day_1mfbn_16er5_161:not(#\9)::after,
-.awsui_month_1mfbn_16er5_172:not(#\9)::after {
+.awsui_day_1mfbn_1bxfb_161:not(#\9)::after,
+.awsui_month_1mfbn_1bxfb_172:not(#\9)::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -192,18 +192,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-end: calc(-1 * var(--border-item-width-acvlhx, 1px));
   background-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_day_1mfbn_16er5_161:not(#\9):focus,
-body[data-awsui-focus-visible=true] .awsui_month_1mfbn_16er5_172:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1bxfb_161:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_month_1mfbn_1bxfb_172:not(#\9):focus {
   z-index: 2;
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_day_1mfbn_16er5_161:not(#\9):focus,
-body[data-awsui-focus-visible=true] .awsui_month_1mfbn_16er5_172:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1bxfb_161:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_month_1mfbn_1bxfb_172:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-e14r1f, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_day_1mfbn_16er5_161:not(#\9):focus::before,
-body[data-awsui-focus-visible=true] .awsui_month_1mfbn_16er5_172:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_day_1mfbn_1bxfb_161:not(#\9):focus::before,
+body[data-awsui-focus-visible=true] .awsui_month_1mfbn_1bxfb_172:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -217,59 +217,59 @@ body[data-awsui-focus-visible=true] .awsui_month_1mfbn_16er5_172:not(#\9):focus:
   border-end-end-radius: var(--border-radius-calendar-day-focus-ring-1443fe, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_day_1mfbn_16er5_161 > .awsui_day-inner_1mfbn_16er5_220:not(#\9),
-.awsui_day_1mfbn_16er5_161 > .awsui_month-inner_1mfbn_16er5_221:not(#\9),
-.awsui_month_1mfbn_16er5_172 > .awsui_day-inner_1mfbn_16er5_220:not(#\9),
-.awsui_month_1mfbn_16er5_172 > .awsui_month-inner_1mfbn_16er5_221:not(#\9) {
+.awsui_day_1mfbn_1bxfb_161 > .awsui_day-inner_1mfbn_1bxfb_220:not(#\9),
+.awsui_day_1mfbn_1bxfb_161 > .awsui_month-inner_1mfbn_1bxfb_221:not(#\9),
+.awsui_month_1mfbn_1bxfb_172 > .awsui_day-inner_1mfbn_1bxfb_220:not(#\9),
+.awsui_month_1mfbn_1bxfb_172 > .awsui_month-inner_1mfbn_1bxfb_221:not(#\9) {
   position: relative;
   z-index: 1;
 }
 
-.awsui_in-first-row_1mfbn_16er5_228:not(#\9):not(.awsui_in-previous-month_1mfbn_16er5_228),
-.awsui_in-first-row_1mfbn_16er5_228:not(#\9):not(.awsui_in-previous-year_1mfbn_16er5_229) {
+.awsui_in-first-row_1mfbn_1bxfb_228:not(#\9):not(.awsui_in-previous-month_1mfbn_1bxfb_228),
+.awsui_in-first-row_1mfbn_1bxfb_228:not(#\9):not(.awsui_in-previous-year_1mfbn_1bxfb_229) {
   border-block-start: 1px solid var(--color-border-calendar-grid-zrkvhb, #eaeded);
 }
 
-.awsui_in-previous-month_1mfbn_16er5_228:not(#\9):not(.awsui_last-day-of-month_1mfbn_16er5_233),
-.awsui_in-previous-year_1mfbn_16er5_229:not(#\9):not(.awsui_last-month-of-year_1mfbn_16er5_234) {
+.awsui_in-previous-month_1mfbn_1bxfb_228:not(#\9):not(.awsui_last-day-of-month_1mfbn_1bxfb_233),
+.awsui_in-previous-year_1mfbn_1bxfb_229:not(#\9):not(.awsui_last-month-of-year_1mfbn_1bxfb_234) {
   border-inline-end-color: transparent;
 }
 
-.awsui_in-next-month_1mfbn_16er5_238:not(#\9),
-.awsui_in-next-year_1mfbn_16er5_239:not(#\9) {
+.awsui_in-next-month_1mfbn_1bxfb_238:not(#\9),
+.awsui_in-next-year_1mfbn_1bxfb_239:not(#\9) {
   border-color: transparent;
 }
 
-.awsui_in-first-column_1mfbn_16er5_243:not(#\9) {
+.awsui_in-first-column_1mfbn_1bxfb_243:not(#\9) {
   border-inline-start: 1px solid 1px solid var(--color-border-calendar-grid-zrkvhb, #eaeded);
 }
-.awsui_in-first-column_1mfbn_16er5_243.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-month_1mfbn_16er5_246:not(#\9), .awsui_in-first-column_1mfbn_16er5_243.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-year_1mfbn_16er5_246:not(#\9) {
+.awsui_in-first-column_1mfbn_1bxfb_243.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-month_1mfbn_1bxfb_246:not(#\9), .awsui_in-first-column_1mfbn_1bxfb_243.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-year_1mfbn_1bxfb_246:not(#\9) {
   border-inline-start: 1px solid var(--color-border-calendar-grid-zrkvhb, #eaeded);
 }
 
-.awsui_enabled_1mfbn_16er5_250:not(#\9) {
+.awsui_enabled_1mfbn_1bxfb_250:not(#\9) {
   cursor: pointer;
 }
-.awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-month_1mfbn_16er5_246:not(#\9), .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-year_1mfbn_16er5_246:not(#\9) {
+.awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-month_1mfbn_1bxfb_246:not(#\9), .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-year_1mfbn_1bxfb_246:not(#\9) {
   color: var(--color-text-dropdown-item-default-a6mvc9, #16191f);
 }
-.awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-month_1mfbn_16er5_246:not(#\9):not(.awsui_in-range_1mfbn_16er5_256), .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-month_1mfbn_16er5_246:not(#\9):not(.awsui_in-range_1mfbn_16er5_256)::after, .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-month_1mfbn_16er5_246.awsui_end-date_1mfbn_16er5_256.awsui_start-date_1mfbn_16er5_256:not(#\9), .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-month_1mfbn_16er5_246.awsui_end-date_1mfbn_16er5_256.awsui_start-date_1mfbn_16er5_256:not(#\9)::after, .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-month_1mfbn_16er5_246.awsui_no-range_1mfbn_16er5_256:not(#\9), .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-month_1mfbn_16er5_246.awsui_no-range_1mfbn_16er5_256:not(#\9)::after, .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-year_1mfbn_16er5_246:not(#\9):not(.awsui_in-range_1mfbn_16er5_256), .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-year_1mfbn_16er5_246:not(#\9):not(.awsui_in-range_1mfbn_16er5_256)::after, .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-year_1mfbn_16er5_246.awsui_end-date_1mfbn_16er5_256.awsui_start-date_1mfbn_16er5_256:not(#\9), .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-year_1mfbn_16er5_246.awsui_end-date_1mfbn_16er5_256.awsui_start-date_1mfbn_16er5_256:not(#\9)::after, .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-year_1mfbn_16er5_246.awsui_no-range_1mfbn_16er5_256:not(#\9), .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-year_1mfbn_16er5_246.awsui_no-range_1mfbn_16er5_256:not(#\9)::after {
+.awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-month_1mfbn_1bxfb_246:not(#\9):not(.awsui_in-range_1mfbn_1bxfb_256), .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-month_1mfbn_1bxfb_246:not(#\9):not(.awsui_in-range_1mfbn_1bxfb_256)::after, .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-month_1mfbn_1bxfb_246.awsui_end-date_1mfbn_1bxfb_256.awsui_start-date_1mfbn_1bxfb_256:not(#\9), .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-month_1mfbn_1bxfb_246.awsui_end-date_1mfbn_1bxfb_256.awsui_start-date_1mfbn_1bxfb_256:not(#\9)::after, .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-month_1mfbn_1bxfb_246.awsui_no-range_1mfbn_1bxfb_256:not(#\9), .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-month_1mfbn_1bxfb_246.awsui_no-range_1mfbn_1bxfb_256:not(#\9)::after, .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-year_1mfbn_1bxfb_246:not(#\9):not(.awsui_in-range_1mfbn_1bxfb_256), .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-year_1mfbn_1bxfb_246:not(#\9):not(.awsui_in-range_1mfbn_1bxfb_256)::after, .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-year_1mfbn_1bxfb_246.awsui_end-date_1mfbn_1bxfb_256.awsui_start-date_1mfbn_1bxfb_256:not(#\9), .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-year_1mfbn_1bxfb_246.awsui_end-date_1mfbn_1bxfb_256.awsui_start-date_1mfbn_1bxfb_256:not(#\9)::after, .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-year_1mfbn_1bxfb_246.awsui_no-range_1mfbn_1bxfb_256:not(#\9), .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-year_1mfbn_1bxfb_246.awsui_no-range_1mfbn_1bxfb_256:not(#\9)::after {
   border-start-start-radius: var(--border-radius-item-xggxkd, 0px);
   border-start-end-radius: var(--border-radius-item-xggxkd, 0px);
   border-end-start-radius: var(--border-radius-item-xggxkd, 0px);
   border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-month_1mfbn_16er5_246:not(#\9):hover, .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-year_1mfbn_16er5_246:not(#\9):hover {
+.awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-month_1mfbn_1bxfb_246:not(#\9):hover, .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-year_1mfbn_1bxfb_246:not(#\9):hover {
   color: var(--color-text-calendar-date-hover-79yvmk, #16191f);
   background-color: var(--color-background-dropdown-item-hover-353r6f, #f2f3f3);
 }
-.awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-month_1mfbn_16er5_246:not(#\9):hover:not(.awsui_selected_1mfbn_16er5_266)::after, .awsui_enabled_1mfbn_16er5_250.awsui_in-visible-calendar_1mfbn_16er5_246.awsui_in-current-year_1mfbn_16er5_246:not(#\9):hover:not(.awsui_selected_1mfbn_16er5_266)::after {
+.awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-month_1mfbn_1bxfb_246:not(#\9):hover:not(.awsui_selected_1mfbn_1bxfb_266)::after, .awsui_enabled_1mfbn_1bxfb_250.awsui_in-visible-calendar_1mfbn_1bxfb_246.awsui_in-current-year_1mfbn_1bxfb_246:not(#\9):hover:not(.awsui_selected_1mfbn_1bxfb_266)::after {
   border-block: var(--border-item-width-acvlhx, 1px) solid var(--color-border-dropdown-item-hover-vony6u, #879596);
   border-inline: var(--border-item-width-acvlhx, 1px) solid var(--color-border-dropdown-item-hover-vony6u, #879596);
 }
 
-.awsui_today_1mfbn_16er5_271:not(#\9):not(.awsui_in-range_1mfbn_16er5_256),
-.awsui_this-month_1mfbn_16er5_272:not(#\9):not(.awsui_in-range_1mfbn_16er5_256) {
+.awsui_today_1mfbn_1bxfb_271:not(#\9):not(.awsui_in-range_1mfbn_1bxfb_256),
+.awsui_this-month_1mfbn_1bxfb_272:not(#\9):not(.awsui_in-range_1mfbn_1bxfb_256) {
   background-color: var(--color-background-calendar-current-date-62569q, #f2f3f3);
   border-start-start-radius: var(--border-radius-item-xggxkd, 0px);
   border-start-end-radius: var(--border-radius-item-xggxkd, 0px);
@@ -278,20 +278,20 @@ body[data-awsui-focus-visible=true] .awsui_month_1mfbn_16er5_172:not(#\9):focus:
   font-weight: 700;
 }
 
-.awsui_selected_1mfbn_16er5_266:not(#\9) {
+.awsui_selected_1mfbn_1bxfb_266:not(#\9) {
   border-color: transparent;
   position: relative;
   z-index: 2;
   font-weight: 700;
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_16er5_266:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1bxfb_266:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_16er5_266:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1bxfb_266:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-selected-focus-outline-gutter-mo0w76, 2px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_16er5_266:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1bxfb_266:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -305,60 +305,60 @@ body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_16er5_266:not(#\9):foc
   border-end-end-radius: var(--border-radius-calendar-day-focus-ring-1443fe, 2px);
   box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-nzjlw6, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_16er5_266:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_selected_1mfbn_1bxfb_266:not(#\9):focus::before {
   z-index: 1;
 }
-.awsui_selected_1mfbn_16er5_266:not(#\9)::after {
+.awsui_selected_1mfbn_1bxfb_266:not(#\9)::after {
   background-color: var(--color-background-control-checked-se0x0e, #0073bb);
   border-block: var(--border-item-width-acvlhx, 1px) solid var(--color-background-control-checked-se0x0e, #0073bb);
   border-inline: var(--border-item-width-acvlhx, 1px) solid var(--color-background-control-checked-se0x0e, #0073bb);
   z-index: 0;
 }
-.awsui_selected_1mfbn_16er5_266 > .awsui_day-inner_1mfbn_16er5_220:not(#\9),
-.awsui_selected_1mfbn_16er5_266 > .awsui_month-inner_1mfbn_16er5_221:not(#\9) {
+.awsui_selected_1mfbn_1bxfb_266 > .awsui_day-inner_1mfbn_1bxfb_220:not(#\9),
+.awsui_selected_1mfbn_1bxfb_266 > .awsui_month-inner_1mfbn_1bxfb_221:not(#\9) {
   color: var(--color-background-control-default-wjdczs, #ffffff);
   position: relative;
   z-index: 2;
 }
 
-.awsui_in-range_1mfbn_16er5_256:not(#\9) {
+.awsui_in-range_1mfbn_1bxfb_256:not(#\9) {
   background-color: var(--color-background-dropdown-item-selected-1c9k0x, #f1faff);
   font-weight: 700;
 }
-.awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-block-start_1mfbn_16er5_328:not(#\9)::after {
+.awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-block-start_1mfbn_1bxfb_328:not(#\9)::after {
   border-block-start: var(--border-item-width-acvlhx, 1px) solid var(--color-background-control-checked-se0x0e, #0073bb);
 }
-.awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-inline-end_1mfbn_16er5_331:not(#\9)::after {
+.awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-inline-end_1mfbn_1bxfb_331:not(#\9)::after {
   border-inline-end: var(--border-item-width-acvlhx, 1px) solid var(--color-background-control-checked-se0x0e, #0073bb);
 }
-.awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-block-end_1mfbn_16er5_334:not(#\9)::after {
+.awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-block-end_1mfbn_1bxfb_334:not(#\9)::after {
   border-block-end: var(--border-item-width-acvlhx, 1px) solid var(--color-background-control-checked-se0x0e, #0073bb);
 }
-.awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-inline-start_1mfbn_16er5_337:not(#\9)::after {
+.awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-inline-start_1mfbn_1bxfb_337:not(#\9)::after {
   border-inline-start: var(--border-item-width-acvlhx, 1px) solid var(--color-background-control-checked-se0x0e, #0073bb);
 }
-.awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-block-start_1mfbn_16er5_328.awsui_in-range-border-inline-end_1mfbn_16er5_331:not(#\9), .awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-block-start_1mfbn_16er5_328.awsui_in-range-border-inline-end_1mfbn_16er5_331:not(#\9)::after {
+.awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-block-start_1mfbn_1bxfb_328.awsui_in-range-border-inline-end_1mfbn_1bxfb_331:not(#\9), .awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-block-start_1mfbn_1bxfb_328.awsui_in-range-border-inline-end_1mfbn_1bxfb_331:not(#\9)::after {
   border-start-end-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-block-end_1mfbn_16er5_334.awsui_in-range-border-inline-end_1mfbn_16er5_331:not(#\9), .awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-block-end_1mfbn_16er5_334.awsui_in-range-border-inline-end_1mfbn_16er5_331:not(#\9)::after {
+.awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-block-end_1mfbn_1bxfb_334.awsui_in-range-border-inline-end_1mfbn_1bxfb_331:not(#\9), .awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-block-end_1mfbn_1bxfb_334.awsui_in-range-border-inline-end_1mfbn_1bxfb_331:not(#\9)::after {
   border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-block-end_1mfbn_16er5_334.awsui_in-range-border-inline-start_1mfbn_16er5_337:not(#\9), .awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-block-end_1mfbn_16er5_334.awsui_in-range-border-inline-start_1mfbn_16er5_337:not(#\9)::after {
+.awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-block-end_1mfbn_1bxfb_334.awsui_in-range-border-inline-start_1mfbn_1bxfb_337:not(#\9), .awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-block-end_1mfbn_1bxfb_334.awsui_in-range-border-inline-start_1mfbn_1bxfb_337:not(#\9)::after {
   border-end-start-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-block-start_1mfbn_16er5_328.awsui_in-range-border-inline-start_1mfbn_16er5_337:not(#\9), .awsui_in-range_1mfbn_16er5_256.awsui_in-range-border-block-start_1mfbn_16er5_328.awsui_in-range-border-inline-start_1mfbn_16er5_337:not(#\9)::after {
+.awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-block-start_1mfbn_1bxfb_328.awsui_in-range-border-inline-start_1mfbn_1bxfb_337:not(#\9), .awsui_in-range_1mfbn_1bxfb_256.awsui_in-range-border-block-start_1mfbn_1bxfb_328.awsui_in-range-border-inline-start_1mfbn_1bxfb_337:not(#\9)::after {
   border-start-start-radius: var(--border-radius-item-xggxkd, 0px);
 }
 
-.awsui_no-range_1mfbn_16er5_256:not(#\9), .awsui_no-range_1mfbn_16er5_256:not(#\9)::after {
+.awsui_no-range_1mfbn_1bxfb_256:not(#\9), .awsui_no-range_1mfbn_1bxfb_256:not(#\9)::after {
   border-start-start-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_no-range_1mfbn_16er5_256:not(#\9), .awsui_no-range_1mfbn_16er5_256:not(#\9)::after {
+.awsui_no-range_1mfbn_1bxfb_256:not(#\9), .awsui_no-range_1mfbn_1bxfb_256:not(#\9)::after {
   border-start-end-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_no-range_1mfbn_16er5_256:not(#\9), .awsui_no-range_1mfbn_16er5_256:not(#\9)::after {
+.awsui_no-range_1mfbn_1bxfb_256:not(#\9), .awsui_no-range_1mfbn_1bxfb_256:not(#\9)::after {
   border-end-start-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_no-range_1mfbn_16er5_256:not(#\9), .awsui_no-range_1mfbn_16er5_256:not(#\9)::after {
+.awsui_no-range_1mfbn_1bxfb_256:not(#\9), .awsui_no-range_1mfbn_1bxfb_256:not(#\9)::after {
   border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
 }

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

@@ -2,35 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "grid": "awsui_grid_1mfbn_16er5_149",
-  "grid-cell": "awsui_grid-cell_1mfbn_16er5_154",
-  "day-header": "awsui_day-header_1mfbn_16er5_161",
-  "day": "awsui_day_1mfbn_16er5_161",
-  "month": "awsui_month_1mfbn_16er5_172",
-  "day-inner": "awsui_day-inner_1mfbn_16er5_220",
-  "month-inner": "awsui_month-inner_1mfbn_16er5_221",
-  "in-first-row": "awsui_in-first-row_1mfbn_16er5_228",
-  "in-previous-month": "awsui_in-previous-month_1mfbn_16er5_228",
-  "in-previous-year": "awsui_in-previous-year_1mfbn_16er5_229",
-  "last-day-of-month": "awsui_last-day-of-month_1mfbn_16er5_233",
-  "last-month-of-year": "awsui_last-month-of-year_1mfbn_16er5_234",
-  "in-next-month": "awsui_in-next-month_1mfbn_16er5_238",
-  "in-next-year": "awsui_in-next-year_1mfbn_16er5_239",
-  "in-first-column": "awsui_in-first-column_1mfbn_16er5_243",
-  "in-visible-calendar": "awsui_in-visible-calendar_1mfbn_16er5_246",
-  "in-current-month": "awsui_in-current-month_1mfbn_16er5_246",
-  "in-current-year": "awsui_in-current-year_1mfbn_16er5_246",
-  "enabled": "awsui_enabled_1mfbn_16er5_250",
-  "in-range": "awsui_in-range_1mfbn_16er5_256",
-  "end-date": "awsui_end-date_1mfbn_16er5_256",
-  "start-date": "awsui_start-date_1mfbn_16er5_256",
-  "no-range": "awsui_no-range_1mfbn_16er5_256",
-  "selected": "awsui_selected_1mfbn_16er5_266",
-  "today": "awsui_today_1mfbn_16er5_271",
-  "this-month": "awsui_this-month_1mfbn_16er5_272",
-  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_16er5_328",
-  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_16er5_331",
-  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_16er5_334",
-  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_16er5_337"
+  "grid": "awsui_grid_1mfbn_1bxfb_149",
+  "grid-cell": "awsui_grid-cell_1mfbn_1bxfb_154",
+  "day-header": "awsui_day-header_1mfbn_1bxfb_161",
+  "day": "awsui_day_1mfbn_1bxfb_161",
+  "month": "awsui_month_1mfbn_1bxfb_172",
+  "day-inner": "awsui_day-inner_1mfbn_1bxfb_220",
+  "month-inner": "awsui_month-inner_1mfbn_1bxfb_221",
+  "in-first-row": "awsui_in-first-row_1mfbn_1bxfb_228",
+  "in-previous-month": "awsui_in-previous-month_1mfbn_1bxfb_228",
+  "in-previous-year": "awsui_in-previous-year_1mfbn_1bxfb_229",
+  "last-day-of-month": "awsui_last-day-of-month_1mfbn_1bxfb_233",
+  "last-month-of-year": "awsui_last-month-of-year_1mfbn_1bxfb_234",
+  "in-next-month": "awsui_in-next-month_1mfbn_1bxfb_238",
+  "in-next-year": "awsui_in-next-year_1mfbn_1bxfb_239",
+  "in-first-column": "awsui_in-first-column_1mfbn_1bxfb_243",
+  "in-visible-calendar": "awsui_in-visible-calendar_1mfbn_1bxfb_246",
+  "in-current-month": "awsui_in-current-month_1mfbn_1bxfb_246",
+  "in-current-year": "awsui_in-current-year_1mfbn_1bxfb_246",
+  "enabled": "awsui_enabled_1mfbn_1bxfb_250",
+  "in-range": "awsui_in-range_1mfbn_1bxfb_256",
+  "end-date": "awsui_end-date_1mfbn_1bxfb_256",
+  "start-date": "awsui_start-date_1mfbn_1bxfb_256",
+  "no-range": "awsui_no-range_1mfbn_1bxfb_256",
+  "selected": "awsui_selected_1mfbn_1bxfb_266",
+  "today": "awsui_today_1mfbn_1bxfb_271",
+  "this-month": "awsui_this-month_1mfbn_1bxfb_272",
+  "in-range-border-block-start": "awsui_in-range-border-block-start_1mfbn_1bxfb_328",
+  "in-range-border-inline-end": "awsui_in-range-border-inline-end_1mfbn_1bxfb_331",
+  "in-range-border-block-end": "awsui_in-range-border-block-end_1mfbn_1bxfb_334",
+  "in-range-border-inline-start": "awsui_in-range-border-inline-start_1mfbn_1bxfb_337"
 };
   

package/lib/internal/template/drawer/implementation.d.ts

@@ -1,7 +1,7 @@
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { DrawerProps } from './interfaces';
 type DrawerInternalProps = DrawerProps & InternalBaseComponentProps;
-export declare function DrawerImplementation({ header, children, loading, i18nStrings, disableContentPaddings, __internalRootRef, headerActions, ...restProps }: DrawerInternalProps): JSX.Element;
+export declare function DrawerImplementation({ header, footer, children, loading, i18nStrings, disableContentPaddings, __internalRootRef, headerActions, ...restProps }: DrawerInternalProps): JSX.Element;
 export declare const createWidgetizedDrawer: (Loader?: typeof DrawerImplementation | undefined) => typeof DrawerImplementation;
 export {};
 //# sourceMappingURL=implementation.d.ts.map

package/lib/internal/template/drawer/implementation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,KAAK,mBAAmB,GAAG,WAAW,GAAG,0BAA0B,CAAC;AAEpE,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,mBAAmB,eAgDrB;AAED,eAAO,MAAM,sBAAsB,mFAAkD,CAAC"}
+{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,KAAK,mBAAmB,GAAG,WAAW,GAAG,0BAA0B,CAAC;AAEpE,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,mBAAmB,eAqErB;AAED,eAAO,MAAM,sBAAsB,mFAAkD,CAAC"}

package/lib/internal/template/drawer/implementation.js

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import { useRuntimeDrawerContext } from '../app-layout/runtime-drawer/use-runtime-drawer-context';
 import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
@@ -9,24 +9,33 @@ import { getBaseProps } from '../internal/base-component';
 import { createWidgetizedComponent } from '../internal/widgets';
 import InternalLiveRegion from '../live-region/internal';
 import InternalStatusIndicator from '../status-indicator/internal';
+import { useStickyFooter } from './use-sticky-footer';
 import styles from './styles.css.js';
-export function DrawerImplementation({ header, children, loading, i18nStrings, disableContentPaddings, __internalRootRef, headerActions, ...restProps }) {
+export function DrawerImplementation({ header, footer, children, loading, i18nStrings, disableContentPaddings, __internalRootRef, headerActions, ...restProps }) {
     const baseProps = getBaseProps(restProps);
     const isToolbar = useAppLayoutToolbarDesignEnabled();
     const i18n = useInternalI18n('drawer');
     const containerProps = {
         ...baseProps,
-        className: clsx(baseProps.className, styles.drawer, isToolbar && styles['with-toolbar']),
+        className: clsx(baseProps.className, styles.drawer, isToolbar && styles['with-toolbar'], !!footer && styles['with-footer']),
     };
+    const footerRef = useRef(null);
     const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: __internalRootRef });
     const hasAdditioalDrawerAction = !!(runtimeDrawerContext === null || runtimeDrawerContext === void 0 ? void 0 : runtimeDrawerContext.isExpandable);
+    const { isSticky: isFooterSticky } = useStickyFooter({
+        drawerRef: __internalRootRef,
+        footerRef,
+    });
     return loading ? (React.createElement("div", { ...containerProps, className: clsx(containerProps.className, styles['content-with-paddings']), ref: __internalRootRef },
         React.createElement(InternalStatusIndicator, { type: "loading" },
             React.createElement(InternalLiveRegion, { tagName: "span" }, i18n('i18nStrings.loadingText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.loadingText))))) : (React.createElement("div", { ...containerProps, ref: __internalRootRef },
         header && (React.createElement("div", { className: clsx(styles.header, runtimeDrawerContext && styles['with-runtime-context'], hasAdditioalDrawerAction && styles['with-additional-action']) },
             header,
             headerActions && React.createElement("div", { className: styles['header-actions'] }, headerActions))),
-        React.createElement("div", { className: clsx(styles['test-utils-drawer-content'], !disableContentPaddings && styles['content-with-paddings']) }, children)));
+        React.createElement("div", { className: clsx(styles['test-utils-drawer-content'], styles.content, !disableContentPaddings && styles['content-with-paddings']) }, children),
+        footer && (React.createElement("div", { ref: footerRef, className: clsx(styles.footer, {
+                [styles['is-sticky']]: isFooterSticky,
+            }) }, footer))));
 }
 export const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);
 //# sourceMappingURL=implementation.js.map

package/lib/internal/template/drawer/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,uBAAuB,EAAE,MAAM,yDAAyD,CAAC;AAClG,OAAO,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,oBAAoB,CAAC,EACnC,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,GAAG,SAAS,EACQ;IACpB,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,gCAAgC,EAAE,CAAC;IACrD,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvC,MAAM,cAAc,GAAG;QACrB,GAAG,SAAS;QACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC;KACzF,CAAC;IAEF,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,EAAE,OAAO,EAAE,iBAA2C,EAAE,CAAC,CAAC;IAC/G,MAAM,wBAAwB,GAAG,CAAC,CAAC,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,YAAY,CAAA,CAAC;IAEtE,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,gCACM,cAAc,EAClB,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAC1E,GAAG,EAAE,iBAAiB;QAEtB,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAC/B,IAAI,CAAC,yBAAyB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,CAAC,CACvC,CACG,CACtB,CACP,CAAC,CAAC,CAAC,CACF,gCAAS,cAAc,EAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,MAAM,EACb,oBAAoB,IAAI,MAAM,CAAC,sBAAsB,CAAC,EACtD,wBAAwB,IAAI,MAAM,CAAC,wBAAwB,CAAC,CAC7D;YAEA,MAAM;YACN,aAAa,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,aAAa,CAAO,CAC7E,CACP;QACD,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,2BAA2B,CAAC,EACnC,CAAC,sBAAsB,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAC3D,IAEA,QAAQ,CACL,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,yBAAyB,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { RefObject } from 'react';\nimport clsx from 'clsx';\n\nimport { useRuntimeDrawerContext } from '../app-layout/runtime-drawer/use-runtime-drawer-context';\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { DrawerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype DrawerInternalProps = DrawerProps & InternalBaseComponentProps;\n\nexport function DrawerImplementation({\n  header,\n  children,\n  loading,\n  i18nStrings,\n  disableContentPaddings,\n  __internalRootRef,\n  headerActions,\n  ...restProps\n}: DrawerInternalProps) {\n  const baseProps = getBaseProps(restProps);\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const i18n = useInternalI18n('drawer');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles.drawer, isToolbar && styles['with-toolbar']),\n  };\n\n  const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: __internalRootRef as RefObject<HTMLElement> });\n  const hasAdditioalDrawerAction = !!runtimeDrawerContext?.isExpandable;\n\n  return loading ? (\n    <div\n      {...containerProps}\n      className={clsx(containerProps.className, styles['content-with-paddings'])}\n      ref={__internalRootRef}\n    >\n      <InternalStatusIndicator type=\"loading\">\n        <InternalLiveRegion tagName=\"span\">\n          {i18n('i18nStrings.loadingText', i18nStrings?.loadingText)}\n        </InternalLiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && (\n        <div\n          className={clsx(\n            styles.header,\n            runtimeDrawerContext && styles['with-runtime-context'],\n            hasAdditioalDrawerAction && styles['with-additional-action']\n          )}\n        >\n          {header}\n          {headerActions && <div className={styles['header-actions']}>{headerActions}</div>}\n        </div>\n      )}\n      <div\n        className={clsx(\n          styles['test-utils-drawer-content'],\n          !disableContentPaddings && styles['content-with-paddings']\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { RefObject, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useRuntimeDrawerContext } from '../app-layout/runtime-drawer/use-runtime-drawer-context';\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { DrawerProps } from './interfaces';\nimport { useStickyFooter } from './use-sticky-footer';\n\nimport styles from './styles.css.js';\n\ntype DrawerInternalProps = DrawerProps & InternalBaseComponentProps;\n\nexport function DrawerImplementation({\n  header,\n  footer,\n  children,\n  loading,\n  i18nStrings,\n  disableContentPaddings,\n  __internalRootRef,\n  headerActions,\n  ...restProps\n}: DrawerInternalProps) {\n  const baseProps = getBaseProps(restProps);\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const i18n = useInternalI18n('drawer');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(\n      baseProps.className,\n      styles.drawer,\n      isToolbar && styles['with-toolbar'],\n      !!footer && styles['with-footer']\n    ),\n  };\n  const footerRef = useRef<HTMLDivElement>(null);\n\n  const runtimeDrawerContext = useRuntimeDrawerContext({ rootRef: __internalRootRef as RefObject<HTMLElement> });\n  const hasAdditioalDrawerAction = !!runtimeDrawerContext?.isExpandable;\n  const { isSticky: isFooterSticky } = useStickyFooter({\n    drawerRef: __internalRootRef as RefObject<HTMLElement>,\n    footerRef,\n  });\n\n  return loading ? (\n    <div\n      {...containerProps}\n      className={clsx(containerProps.className, styles['content-with-paddings'])}\n      ref={__internalRootRef}\n    >\n      <InternalStatusIndicator type=\"loading\">\n        <InternalLiveRegion tagName=\"span\">\n          {i18n('i18nStrings.loadingText', i18nStrings?.loadingText)}\n        </InternalLiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && (\n        <div\n          className={clsx(\n            styles.header,\n            runtimeDrawerContext && styles['with-runtime-context'],\n            hasAdditioalDrawerAction && styles['with-additional-action']\n          )}\n        >\n          {header}\n          {headerActions && <div className={styles['header-actions']}>{headerActions}</div>}\n        </div>\n      )}\n      <div\n        className={clsx(\n          styles['test-utils-drawer-content'],\n          styles.content,\n          !disableContentPaddings && styles['content-with-paddings']\n        )}\n      >\n        {children}\n      </div>\n      {footer && (\n        <div\n          ref={footerRef}\n          className={clsx(styles.footer, {\n            [styles['is-sticky']]: isFooterSticky,\n          })}\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);\n"]}

package/lib/internal/template/drawer/interfaces.d.ts

@@ -29,6 +29,13 @@ export interface DrawerProps extends BaseComponentProps {
      * Actions for the header. Available only if you specify the `header` property.
      */
     headerActions?: React.ReactNode;
+    /**
+     * Sticky footer content that remains visible at the bottom during scroll.
+     *
+     * Automatically becomes non-sticky when scrollable content area is too small
+     * to ensure content remains accessible (not covered by the footer).
+     */
+    footer?: React.ReactNode;
 }
 interface I18nStrings {
     /**

package/lib/internal/template/drawer/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,UAAU,WAAW;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,UAAU,WAAW;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/lib/internal/template/drawer/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface DrawerProps extends BaseComponentProps {\n  /**\n   * Header of the drawer.\n   *\n   * It should contain the only `h2` used in the drawer.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Main content of the drawer.\n   *\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Renders the drawer in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Determines whether the drawer content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: I18nStrings;\n\n  /**\n   * Actions for the header. Available only if you specify the `header` property.\n   */\n  headerActions?: React.ReactNode;\n}\n\ninterface I18nStrings {\n  /**\n    Specifies the text that's displayed when the panel is in a loading state.\n   */\n  loadingText?: string;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface DrawerProps extends BaseComponentProps {\n  /**\n   * Header of the drawer.\n   *\n   * It should contain the only `h2` used in the drawer.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Main content of the drawer.\n   *\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Renders the drawer in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Determines whether the drawer content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: I18nStrings;\n\n  /**\n   * Actions for the header. Available only if you specify the `header` property.\n   */\n  headerActions?: React.ReactNode;\n\n  /**\n   * Sticky footer content that remains visible at the bottom during scroll.\n   *\n   * Automatically becomes non-sticky when scrollable content area is too small\n   * to ensure content remains accessible (not covered by the footer).\n   */\n  footer?: React.ReactNode;\n}\n\ninterface I18nStrings {\n  /**\n    Specifies the text that's displayed when the panel is in a loading state.\n   */\n  loadingText?: string;\n}\n"]}

package/lib/internal/template/drawer/styles.css.js

@@ -1,13 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_1sxt8_18ek3_189",
-  "header": "awsui_header_1sxt8_18ek3_222",
-  "with-additional-action": "awsui_with-additional-action_1sxt8_18ek3_239",
-  "with-runtime-context": "awsui_with-runtime-context_1sxt8_18ek3_247",
-  "with-toolbar": "awsui_with-toolbar_1sxt8_18ek3_250",
-  "header-actions": "awsui_header-actions_1sxt8_18ek3_269",
-  "content-with-paddings": "awsui_content-with-paddings_1sxt8_18ek3_275",
-  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_18ek3_282"
+  "drawer": "awsui_drawer_1sxt8_t1bin_189",
+  "with-footer": "awsui_with-footer_1sxt8_t1bin_221",
+  "content": "awsui_content_1sxt8_t1bin_226",
+  "header": "awsui_header_1sxt8_t1bin_230",
+  "with-additional-action": "awsui_with-additional-action_1sxt8_t1bin_247",
+  "with-runtime-context": "awsui_with-runtime-context_1sxt8_t1bin_255",
+  "with-toolbar": "awsui_with-toolbar_1sxt8_t1bin_258",
+  "header-actions": "awsui_header-actions_1sxt8_t1bin_277",
+  "content-with-paddings": "awsui_content-with-paddings_1sxt8_t1bin_283",
+  "footer": "awsui_footer_1sxt8_t1bin_290",
+  "is-sticky": "awsui_is-sticky_1sxt8_t1bin_296",
+  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_t1bin_304"
 };
   

package/lib/internal/template/drawer/styles.scoped.css

@@ -186,7 +186,7 @@ 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_drawer_1sxt8_18ek3_189:not(#\9) {
+.awsui_drawer_1sxt8_t1bin_189:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -218,8 +218,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
   word-wrap: break-word;
 }
+.awsui_drawer_1sxt8_t1bin_189.awsui_with-footer_1sxt8_t1bin_221:not(#\9) {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100%;
+}
+.awsui_drawer_1sxt8_t1bin_189.awsui_with-footer_1sxt8_t1bin_221 > .awsui_content_1sxt8_t1bin_226:not(#\9) {
+  flex: 1;
+}
 
-.awsui_header_1sxt8_18ek3_222:not(#\9) {
+.awsui_header_1sxt8_t1bin_230:not(#\9) {
   font-size: var(--font-panel-header-size-i1j838, 18px);
   letter-spacing: var(--letter-spacing-heading-m-93y02s, normal);
   line-height: var(--font-panel-header-line-height-z3wpa5, 22px);
@@ -236,7 +244,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
 @media (min-width: 689px) {
-  .awsui_header_1sxt8_18ek3_222.awsui_with-additional-action_1sxt8_18ek3_239:not(#\9) {
+  .awsui_header_1sxt8_t1bin_230.awsui_with-additional-action_1sxt8_t1bin_247:not(#\9) {
     /*
       this padding is needed when the drawer renders inside a runtime drawer and the runtime drawer has an additional action
       on the right (or left in rtl). in this case this padding ensures that the drawer's content does not overlap with runtime actions
@@ -244,18 +252,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     padding-inline: var(--space-panel-side-left-07kpj4, 32px) calc(var(--space-xxxl-qhelse, 40px) + var(--space-scaled-xxl-9ur2is, 32px));
   }
 }
-.awsui_header_1sxt8_18ek3_222.awsui_with-runtime-context_1sxt8_18ek3_247:not(#\9) {
+.awsui_header_1sxt8_t1bin_230.awsui_with-runtime-context_1sxt8_t1bin_255:not(#\9) {
   padding-block: 14px;
 }
-.awsui_with-toolbar_1sxt8_18ek3_250 > .awsui_header_1sxt8_18ek3_222:not(#\9) {
+.awsui_with-toolbar_1sxt8_t1bin_258 > .awsui_header_1sxt8_t1bin_230:not(#\9) {
   border-color: transparent;
   margin-block-end: 0px;
 }
-.awsui_header_1sxt8_18ek3_222 h2:not(#\9),
-.awsui_header_1sxt8_18ek3_222 h3:not(#\9),
-.awsui_header_1sxt8_18ek3_222 h4:not(#\9),
-.awsui_header_1sxt8_18ek3_222 h5:not(#\9),
-.awsui_header_1sxt8_18ek3_222 h6:not(#\9) {
+.awsui_header_1sxt8_t1bin_230 h2:not(#\9),
+.awsui_header_1sxt8_t1bin_230 h3:not(#\9),
+.awsui_header_1sxt8_t1bin_230 h4:not(#\9),
+.awsui_header_1sxt8_t1bin_230 h5:not(#\9),
+.awsui_header_1sxt8_t1bin_230 h6:not(#\9) {
   font-size: var(--font-panel-header-size-i1j838, 18px);
   letter-spacing: var(--letter-spacing-heading-m-93y02s, normal);
   line-height: var(--font-panel-header-line-height-z3wpa5, 22px);
@@ -266,19 +274,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: 0;
 }
 
-.awsui_header-actions_1sxt8_18ek3_269:not(#\9) {
+.awsui_header-actions_1sxt8_t1bin_277:not(#\9) {
   display: inline-flex;
   align-items: flex-start;
   z-index: 1;
 }
 
-.awsui_content-with-paddings_1sxt8_18ek3_275:not(#\9):not(:empty) {
+.awsui_content-with-paddings_1sxt8_t1bin_283:not(#\9):not(:empty) {
   padding-block-start: var(--space-panel-content-top-s8rcdz, 20px);
   padding-inline-start: var(--space-panel-side-left-07kpj4, 32px);
   padding-inline-end: var(--space-panel-side-right-b77xx0, 32px);
   padding-block-end: var(--space-panel-content-bottom-igtxf0, 40px);
 }
 
-.awsui_test-utils-drawer-content_1sxt8_18ek3_282:not(#\9) {
+.awsui_footer_1sxt8_t1bin_290:not(#\9) {
+  background-color: var(--color-background-container-content-aemn43, #ffffff);
+  border-block-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-panel-header-iffljr, #eaeded);
+  padding-block: var(--space-panel-content-top-s8rcdz, 20px);
+  padding-inline: var(--space-panel-side-left-07kpj4, 32px) var(--space-panel-side-right-b77xx0, 32px);
+}
+.awsui_footer_1sxt8_t1bin_290.awsui_is-sticky_1sxt8_t1bin_296:not(#\9) {
+  position: sticky;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  z-index: 810;
+}
+
+.awsui_test-utils-drawer-content_1sxt8_t1bin_304:not(#\9) {
   /* used in test-utils */
 }