npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.537 → 3.0.538 - Mend

@cloudscape-design/components-themeable 3.0.537 → 3.0.538

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (211) hide show

package/lib/internal/template/button-dropdown/styles.scoped.css CHANGED Viewed

@@ -90,101 +90,104 @@ 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_button-dropdown_sne0l_jrij7_93:not(#\9) {
+.awsui_button-dropdown_sne0l_59w95_93:not(#\9) {
   display: inline-block;
 }
-.awsui_items-list-container_sne0l_jrij7_97:not(#\9) {
-  padding: 0;
-  margin: 0;
-  animation: awsui_awsui-motion-fade-in-0_sne0l_jrij7_1 500ms var(--motion-easing-show-quick-lvi5i8, ease-out);
+.awsui_items-list-container_sne0l_59w95_97:not(#\9) {
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  animation: awsui_awsui-motion-fade-in-0_sne0l_59w95_1 500ms var(--motion-easing-show-quick-lvi5i8, ease-out);
   animation-fill-mode: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_items-list-container_sne0l_jrij7_97:not(#\9) {
+  .awsui_items-list-container_sne0l_59w95_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_items-list-container_sne0l_jrij7_97:not(#\9), .awsui-mode-entering .awsui_items-list-container_sne0l_jrij7_97:not(#\9) {
+.awsui-motion-disabled .awsui_items-list-container_sne0l_59w95_97:not(#\9), .awsui-mode-entering .awsui_items-list-container_sne0l_59w95_97:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_rotate-up_sne0l_jrij7_114:not(#\9) {
+.awsui_rotate-up_sne0l_59w95_116:not(#\9) {
   transform: rotate(-180deg);
   transition: transform var(--motion-duration-rotate-180-6z1h8e, 135ms) var(--motion-easing-rotate-180-l3wboa, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_rotate-up_sne0l_jrij7_114:not(#\9) {
+  .awsui_rotate-up_sne0l_59w95_116:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_rotate-up_sne0l_jrij7_114:not(#\9), .awsui-mode-entering .awsui_rotate-up_sne0l_jrij7_114:not(#\9) {
+.awsui-motion-disabled .awsui_rotate-up_sne0l_59w95_116:not(#\9), .awsui-mode-entering .awsui_rotate-up_sne0l_59w95_116:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_rotate-down_sne0l_jrij7_129:not(#\9) {
+.awsui_rotate-down_sne0l_59w95_131:not(#\9) {
   transform: rotate(0deg);
   transition: transform var(--motion-duration-rotate-180-6z1h8e, 135ms) var(--motion-easing-rotate-180-l3wboa, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_rotate-down_sne0l_jrij7_129:not(#\9) {
+  .awsui_rotate-down_sne0l_59w95_131:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_rotate-down_sne0l_jrij7_129:not(#\9), .awsui-mode-entering .awsui_rotate-down_sne0l_jrij7_129:not(#\9) {
+.awsui-motion-disabled .awsui_rotate-down_sne0l_59w95_131:not(#\9), .awsui-mode-entering .awsui_rotate-down_sne0l_59w95_131:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_header_sne0l_jrij7_144:not(#\9) {
+.awsui_header_sne0l_59w95_146:not(#\9) {
   display: flex;
   flex-direction: column;
   list-style: none;
-  padding: var(--space-s-2025hl, 12px) var(--space-l-xu1x80, 20px);
-  border: var(--border-field-width-yoy972, 1px) solid transparent;
-  border-bottom: var(--border-field-width-yoy972, 1px) solid var(--color-border-dropdown-group-mkqzrv, #eaeded);
+  padding-block: var(--space-s-2025hl, 12px);
+  padding-inline: var(--space-l-xu1x80, 20px);
+  border-block-start: var(--border-field-width-yoy972, 1px) solid transparent;
+  border-block-end: var(--border-field-width-yoy972, 1px) solid var(--color-border-dropdown-group-mkqzrv, #eaeded);
+  border-inline: var(--border-field-width-yoy972, 1px) solid transparent;
 }
-.awsui_title_sne0l_jrij7_153:not(#\9),
-.awsui_description_sne0l_jrij7_154:not(#\9) {
+.awsui_title_sne0l_59w95_157:not(#\9),
+.awsui_description_sne0l_59w95_158:not(#\9) {
   color: var(--color-text-dropdown-header-z1le22, #16191f);
 }
-.awsui_split-trigger-wrapper_sne0l_jrij7_158:not(#\9) {
+.awsui_split-trigger-wrapper_sne0l_59w95_162:not(#\9) {
   display: flex;
 }
-.awsui_split-trigger-wrapper_sne0l_jrij7_158 > .awsui_trigger-item_sne0l_jrij7_161 > button:not(#\9):focus {
+.awsui_split-trigger-wrapper_sne0l_59w95_162 > .awsui_trigger-item_sne0l_59w95_165 > button:not(#\9):focus {
   z-index: 1;
 }
-.awsui_split-trigger-wrapper_sne0l_jrij7_158 > .awsui_trigger-item_sne0l_jrij7_161:not(#\9):not(:last-child) > .awsui_trigger-button_sne0l_jrij7_164 {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  padding-right: var(--space-m-kpg8id, 16px);
-  margin-right: var(--space-xxxs-z28114, 2px);
+.awsui_split-trigger-wrapper_sne0l_59w95_162 > .awsui_trigger-item_sne0l_59w95_165:not(#\9):not(:last-child) > .awsui_trigger-button_sne0l_59w95_168 {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  padding-inline-end: var(--space-m-kpg8id, 16px);
+  margin-inline-end: var(--space-xxxs-z28114, 2px);
 }
-.awsui_split-trigger-wrapper_sne0l_jrij7_158 > .awsui_trigger-item_sne0l_jrij7_161:not(#\9):not(:first-child) > .awsui_trigger-button_sne0l_jrij7_164 {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  padding-left: calc(var(--space-xs-xf5ch3, 8px) - 2px);
-  padding-right: calc(var(--space-xs-xf5ch3, 8px) - 2px);
+.awsui_split-trigger-wrapper_sne0l_59w95_162 > .awsui_trigger-item_sne0l_59w95_165:not(#\9):not(:first-child) > .awsui_trigger-button_sne0l_59w95_168 {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  padding-inline: calc(var(--space-xs-xf5ch3, 8px) - 2px);
 }
-.awsui_split-trigger-wrapper_sne0l_jrij7_158 > .awsui_trigger-item_sne0l_jrij7_161:not(#\9):not(:first-child).awsui_visual-refresh_sne0l_jrij7_176 > .awsui_trigger-button_sne0l_jrij7_164 {
-  padding-right: calc(var(--space-s-2025hl, 12px) - 2px);
+.awsui_split-trigger-wrapper_sne0l_59w95_162 > .awsui_trigger-item_sne0l_59w95_165:not(#\9):not(:first-child).awsui_visual-refresh_sne0l_59w95_179 > .awsui_trigger-button_sne0l_59w95_168 {
+  padding-inline-end: calc(var(--space-s-2025hl, 12px) - 2px);
 }
-.awsui_split-trigger_sne0l_jrij7_158:not(#\9) {
+.awsui_split-trigger_sne0l_59w95_162:not(#\9) {
   display: contents;
 }
-.awsui_dropdown-trigger_sne0l_jrij7_184:not(#\9) {
+.awsui_dropdown-trigger_sne0l_59w95_187:not(#\9) {
   display: contents;
 }
-.awsui_test-utils-button-trigger_sne0l_jrij7_188:not(#\9) {
+.awsui_test-utils-button-trigger_sne0l_59w95_191:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/button-dropdown/styles.selectors.js CHANGED Viewed

@@ -2,20 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-dropdown": "awsui_button-dropdown_sne0l_jrij7_93",
-  "items-list-container": "awsui_items-list-container_sne0l_jrij7_97",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_jrij7_1",
-  "rotate-up": "awsui_rotate-up_sne0l_jrij7_114",
-  "rotate-down": "awsui_rotate-down_sne0l_jrij7_129",
-  "header": "awsui_header_sne0l_jrij7_144",
-  "title": "awsui_title_sne0l_jrij7_153",
-  "description": "awsui_description_sne0l_jrij7_154",
-  "split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_jrij7_158",
-  "trigger-item": "awsui_trigger-item_sne0l_jrij7_161",
-  "trigger-button": "awsui_trigger-button_sne0l_jrij7_164",
-  "visual-refresh": "awsui_visual-refresh_sne0l_jrij7_176",
-  "split-trigger": "awsui_split-trigger_sne0l_jrij7_158",
-  "dropdown-trigger": "awsui_dropdown-trigger_sne0l_jrij7_184",
-  "test-utils-button-trigger": "awsui_test-utils-button-trigger_sne0l_jrij7_188"
+  "button-dropdown": "awsui_button-dropdown_sne0l_59w95_93",
+  "items-list-container": "awsui_items-list-container_sne0l_59w95_97",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_59w95_1",
+  "rotate-up": "awsui_rotate-up_sne0l_59w95_116",
+  "rotate-down": "awsui_rotate-down_sne0l_59w95_131",
+  "header": "awsui_header_sne0l_59w95_146",
+  "title": "awsui_title_sne0l_59w95_157",
+  "description": "awsui_description_sne0l_59w95_158",
+  "split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_59w95_162",
+  "trigger-item": "awsui_trigger-item_sne0l_59w95_165",
+  "trigger-button": "awsui_trigger-button_sne0l_59w95_168",
+  "visual-refresh": "awsui_visual-refresh_sne0l_59w95_179",
+  "split-trigger": "awsui_split-trigger_sne0l_59w95_162",
+  "dropdown-trigger": "awsui_dropdown-trigger_sne0l_59w95_187",
+  "test-utils-button-trigger": "awsui_test-utils-button-trigger_sne0l_59w95_191"
 };

package/lib/internal/template/calendar/grid/index.js CHANGED Viewed

@@ -81,7 +81,7 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
             }
             // Screen-reader announcement for the focused day.
             let dayAnnouncement = getDateLabel(locale, date, 'short');
-            if (isDateOnSameDay) {
+            if (isDateOnSameDay && todayAriaLabel) {
                 dayAnnouncement += '. ' + todayAriaLabel;
             }
             return (React.createElement("td", { key: `${weekIndex}:${dateIndex}`, ref: tabIndex === 0 ? focusedDateRef : undefined, tabIndex: tabIndex, "aria-current": isDateOnSameDay ? 'date' : undefined, "aria-selected": isEnabled ? isSelected : undefined, "aria-disabled": !isEnabled,

package/lib/internal/template/calendar/grid/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/grid/index.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, { useMemo, useRef } from 'react';\nimport styles from '../styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\nimport { DayIndex } from '../internal';\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport { getDateLabel, renderDayName } from '../utils/intl';\nimport clsx from 'clsx';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';\n\n/*\n Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n \n The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every day is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n locale: string;\n baseDate: Date;\n isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n focusedDate: Date \| null;\n focusableDate: Date \| null;\n onSelectDate: (date: Date) => void;\n onFocusDate: (date: null \| Date) => void;\n onChangeMonth: (date: Date) => void;\n startOfWeek: DayIndex;\n todayAriaLabel?: string;\n selectedDate: Date \| null;\n ariaLabelledby: string;\n}\n\nexport default function Grid({\n locale,\n baseDate,\n isDateEnabled,\n focusedDate,\n focusableDate,\n onSelectDate,\n onFocusDate,\n onChangeMonth,\n startOfWeek,\n todayAriaLabel,\n selectedDate,\n ariaLabelledby,\n}: GridProps) {\n const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n const onGridKeyDownHandler = (event: React.KeyboardEvent) => {\n let updatedFocusDate;\n\n if (focusableDate === null) {\n return;\n }\n\n switch (event.keyCode) {\n case KeyCode.space:\n case KeyCode.enter:\n event.preventDefault();\n if (focusableDate) {\n onFocusDate(null);\n onSelectDate(focusableDate);\n }\n return;\n case KeyCode.right:\n event.preventDefault();\n updatedFocusDate = moveNextDay(focusableDate, isDateEnabled);\n break;\n case KeyCode.left:\n event.preventDefault();\n updatedFocusDate = movePrevDay(focusableDate, isDateEnabled);\n break;\n case KeyCode.up:\n event.preventDefault();\n updatedFocusDate = movePrevWeek(focusableDate, isDateEnabled);\n break;\n case KeyCode.down:\n event.preventDefault();\n updatedFocusDate = moveNextWeek(focusableDate, isDateEnabled);\n break;\n default:\n return;\n }\n\n if (!isSameMonth(updatedFocusDate, baseDate)) {\n onChangeMonth(updatedFocusDate);\n }\n onFocusDate(updatedFocusDate);\n };\n\n // The focused date changes as a feedback to keyboard navigation in the grid.\n // Once changed, the corresponding day button needs to receive the actual focus.\n useEffectOnUpdate(() => {\n if (focusedDate && focusedDateRef.current) {\n (focusedDateRef.current as HTMLDivElement).focus();\n }\n }, [focusedDate]);\n\n const weeks = useMemo<Date[][]>(\n () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n [baseDate, startOfWeek]\n );\n const weekdays = weeks[0].map(date => date.getDay());\n\n return (\n <table role=\"grid\" className={styles['calendar-grid']} aria-labelledby={ariaLabelledby}>\n <thead>\n <tr>\n {weekdays.map(dayIndex => (\n <th\n key={dayIndex}\n scope=\"col\"\n className={clsx(styles['calendar-grid-cell'], styles['calendar-day-header'])}\n >\n <span aria-hidden=\"true\">{renderDayName(locale, dayIndex, 'short')}</span>\n <ScreenreaderOnly>{renderDayName(locale, dayIndex, 'long')}</ScreenreaderOnly>\n </th>\n ))}\n </tr>\n </thead>\n <tbody onKeyDown={onGridKeyDownHandler}>\n {weeks.map((week, weekIndex) => (\n <tr key={weekIndex} className={styles['calendar-week']}>\n {week.map((date, dateIndex) => {\n const isFocusable = !!focusableDate && isSameDay(date, focusableDate);\n const isSelected = !!selectedDate && isSameDay(date, selectedDate);\n const isEnabled = !isDateEnabled \|\| isDateEnabled(date);\n const isDateOnSameDay = isSameDay(date, new Date());\n\n // Can't be focused.\n let tabIndex = undefined;\n if (isFocusable && isEnabled) {\n // Next focus target.\n tabIndex = 0;\n } else if (isEnabled) {\n // Can be focused programmatically.\n tabIndex = -1;\n }\n\n // Screen-reader announcement for the focused day.\n let dayAnnouncement = getDateLabel(locale, date, 'short');\n if (isDateOnSameDay) {\n dayAnnouncement += '. ' + todayAriaLabel;\n }\n\n return (\n <td\n key={`${weekIndex}:${dateIndex}`}\n ref={tabIndex === 0 ? focusedDateRef : undefined}\n tabIndex={tabIndex}\n aria-current={isDateOnSameDay ? 'date' : undefined}\n aria-selected={isEnabled ? isSelected : undefined}\n aria-disabled={!isEnabled}\n // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n onClick={isEnabled ? () => onSelectDate(date) : undefined}\n className={clsx(styles['calendar-grid-cell'], styles['calendar-day'], {\n [styles['calendar-day-current-month']]: isSameMonth(date, baseDate),\n [styles['calendar-day-enabled']]: isEnabled,\n [styles['calendar-day-selected']]: isSelected,\n [styles['calendar-day-today']]: isDateOnSameDay,\n })}\n >\n <span className={styles['day-inner']} aria-hidden=\"true\">\n {date.getDate()}\n </span>\n <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/grid/index.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, { useMemo, useRef } from 'react';\nimport styles from '../styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\nimport { DayIndex } from '../internal';\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport { getDateLabel, renderDayName } from '../utils/intl';\nimport clsx from 'clsx';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';\n\n/*\n Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n \n The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every day is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n locale: string;\n baseDate: Date;\n isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n focusedDate: Date \| null;\n focusableDate: Date \| null;\n onSelectDate: (date: Date) => void;\n onFocusDate: (date: null \| Date) => void;\n onChangeMonth: (date: Date) => void;\n startOfWeek: DayIndex;\n todayAriaLabel?: string;\n selectedDate: Date \| null;\n ariaLabelledby: string;\n}\n\nexport default function Grid({\n locale,\n baseDate,\n isDateEnabled,\n focusedDate,\n focusableDate,\n onSelectDate,\n onFocusDate,\n onChangeMonth,\n startOfWeek,\n todayAriaLabel,\n selectedDate,\n ariaLabelledby,\n}: GridProps) {\n const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n const onGridKeyDownHandler = (event: React.KeyboardEvent) => {\n let updatedFocusDate;\n\n if (focusableDate === null) {\n return;\n }\n\n switch (event.keyCode) {\n case KeyCode.space:\n case KeyCode.enter:\n event.preventDefault();\n if (focusableDate) {\n onFocusDate(null);\n onSelectDate(focusableDate);\n }\n return;\n case KeyCode.right:\n event.preventDefault();\n updatedFocusDate = moveNextDay(focusableDate, isDateEnabled);\n break;\n case KeyCode.left:\n event.preventDefault();\n updatedFocusDate = movePrevDay(focusableDate, isDateEnabled);\n break;\n case KeyCode.up:\n event.preventDefault();\n updatedFocusDate = movePrevWeek(focusableDate, isDateEnabled);\n break;\n case KeyCode.down:\n event.preventDefault();\n updatedFocusDate = moveNextWeek(focusableDate, isDateEnabled);\n break;\n default:\n return;\n }\n\n if (!isSameMonth(updatedFocusDate, baseDate)) {\n onChangeMonth(updatedFocusDate);\n }\n onFocusDate(updatedFocusDate);\n };\n\n // The focused date changes as a feedback to keyboard navigation in the grid.\n // Once changed, the corresponding day button needs to receive the actual focus.\n useEffectOnUpdate(() => {\n if (focusedDate && focusedDateRef.current) {\n (focusedDateRef.current as HTMLDivElement).focus();\n }\n }, [focusedDate]);\n\n const weeks = useMemo<Date[][]>(\n () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n [baseDate, startOfWeek]\n );\n const weekdays = weeks[0].map(date => date.getDay());\n\n return (\n <table role=\"grid\" className={styles['calendar-grid']} aria-labelledby={ariaLabelledby}>\n <thead>\n <tr>\n {weekdays.map(dayIndex => (\n <th\n key={dayIndex}\n scope=\"col\"\n className={clsx(styles['calendar-grid-cell'], styles['calendar-day-header'])}\n >\n <span aria-hidden=\"true\">{renderDayName(locale, dayIndex, 'short')}</span>\n <ScreenreaderOnly>{renderDayName(locale, dayIndex, 'long')}</ScreenreaderOnly>\n </th>\n ))}\n </tr>\n </thead>\n <tbody onKeyDown={onGridKeyDownHandler}>\n {weeks.map((week, weekIndex) => (\n <tr key={weekIndex} className={styles['calendar-week']}>\n {week.map((date, dateIndex) => {\n const isFocusable = !!focusableDate && isSameDay(date, focusableDate);\n const isSelected = !!selectedDate && isSameDay(date, selectedDate);\n const isEnabled = !isDateEnabled \|\| isDateEnabled(date);\n const isDateOnSameDay = isSameDay(date, new Date());\n\n // Can't be focused.\n let tabIndex = undefined;\n if (isFocusable && isEnabled) {\n // Next focus target.\n tabIndex = 0;\n } else if (isEnabled) {\n // Can be focused programmatically.\n tabIndex = -1;\n }\n\n // Screen-reader announcement for the focused day.\n let dayAnnouncement = getDateLabel(locale, date, 'short');\n if (isDateOnSameDay && todayAriaLabel) {\n dayAnnouncement += '. ' + todayAriaLabel;\n }\n\n return (\n <td\n key={`${weekIndex}:${dateIndex}`}\n ref={tabIndex === 0 ? focusedDateRef : undefined}\n tabIndex={tabIndex}\n aria-current={isDateOnSameDay ? 'date' : undefined}\n aria-selected={isEnabled ? isSelected : undefined}\n aria-disabled={!isEnabled}\n // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n onClick={isEnabled ? () => onSelectDate(date) : undefined}\n className={clsx(styles['calendar-grid-cell'], styles['calendar-day'], {\n [styles['calendar-day-current-month']]: isSameMonth(date, baseDate),\n [styles['calendar-day-enabled']]: isEnabled,\n [styles['calendar-day-selected']]: isSelected,\n [styles['calendar-day-today']]: isDateOnSameDay,\n })}\n >\n <span className={styles['day-inner']} aria-hidden=\"true\">\n {date.getDate()}\n </span>\n <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}\n"]}

package/lib/internal/template/calendar/styles.css.js CHANGED Viewed

@@ -1,23 +1,23 @@
     import './styles.scoped.css';
     export default {
-  "calendar": "awsui_calendar_1ykar_uooqo_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_uooqo_1",
-  "root": "awsui_root_1ykar_uooqo_124",
-  "calendar-inner": "awsui_calendar-inner_1ykar_uooqo_165",
-  "calendar-header": "awsui_calendar-header_1ykar_uooqo_168",
-  "calendar-header-month": "awsui_calendar-header-month_1ykar_uooqo_173",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_uooqo_180",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_uooqo_183",
-  "calendar-grid": "awsui_calendar-grid_1ykar_uooqo_186",
-  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_uooqo_190",
-  "calendar-day-header": "awsui_calendar-day-header_1ykar_uooqo_196",
-  "calendar-day": "awsui_calendar-day_1ykar_uooqo_196",
-  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_uooqo_213",
-  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_uooqo_220",
-  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_uooqo_227",
-  "calendar-day-today": "awsui_calendar-day-today_1ykar_uooqo_230",
-  "day-inner": "awsui_day-inner_1ykar_uooqo_245",
-  "calendar-week": "awsui_calendar-week_1ykar_uooqo_316"
+  "calendar": "awsui_calendar_1ykar_1qb9f_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_1qb9f_1",
+  "root": "awsui_root_1ykar_1qb9f_124",
+  "calendar-inner": "awsui_calendar-inner_1ykar_1qb9f_165",
+  "calendar-header": "awsui_calendar-header_1ykar_1qb9f_169",
+  "calendar-header-month": "awsui_calendar-header-month_1ykar_1qb9f_174",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_1qb9f_182",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_1qb9f_185",
+  "calendar-grid": "awsui_calendar-grid_1ykar_1qb9f_188",
+  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_1qb9f_192",
+  "calendar-day-header": "awsui_calendar-day-header_1ykar_1qb9f_198",
+  "calendar-day": "awsui_calendar-day_1ykar_1qb9f_198",
+  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_1qb9f_218",
+  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_1qb9f_228",
+  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_1qb9f_235",
+  "calendar-day-today": "awsui_calendar-day-today_1ykar_1qb9f_239",
+  "day-inner": "awsui_day-inner_1ykar_1qb9f_257",
+  "calendar-week": "awsui_calendar-week_1ykar_1qb9f_332"
 };

package/lib/internal/template/calendar/styles.scoped.css CHANGED Viewed

@@ -90,11 +90,11 @@ 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_calendar_1ykar_uooqo_93:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_1ykar_uooqo_1 var(--motion-duration-show-quick-kypzaj, 135ms) var(--motion-easing-show-quick-lvi5i8, ease-out);
+.awsui_calendar_1ykar_1qb9f_93:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_1ykar_1qb9f_1 var(--motion-duration-show-quick-kypzaj, 135ms) var(--motion-easing-show-quick-lvi5i8, ease-out);
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_1ykar_uooqo_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1ykar_1qb9f_1 {
   from {
     opacity: 0;
   }
@@ -103,12 +103,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_calendar_1ykar_uooqo_93:not(#\9) {
+  .awsui_calendar_1ykar_1qb9f_93:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_calendar_1ykar_uooqo_93:not(#\9), .awsui-mode-entering .awsui_calendar_1ykar_uooqo_93:not(#\9) {
+.awsui-motion-disabled .awsui_calendar_1ykar_1qb9f_93:not(#\9), .awsui-mode-entering .awsui_calendar_1ykar_1qb9f_93:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -121,13 +121,13 @@ 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_root_1ykar_uooqo_124:not(#\9) {
+.awsui_root_1ykar_1qb9f_124:not(#\9) {
   /* used in test-utils */
 }
-.awsui_calendar_1ykar_uooqo_93:not(#\9) {
+.awsui_calendar_1ykar_1qb9f_93:not(#\9) {
   display: block;
-  width: var(--size-calendar-grid-width-m7rthz, 234px);
+  inline-size: var(--size-calendar-grid-width-m7rthz, 234px);
   overflow: auto;
   border-collapse: separate;
   border-spacing: 0;
@@ -163,101 +163,113 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_calendar-inner_1ykar_uooqo_165:not(#\9) {
-  margin: var(--space-xs-xf5ch3, 8px);
+.awsui_calendar-inner_1ykar_1qb9f_165:not(#\9) {
+  margin-block: var(--space-xs-xf5ch3, 8px);
+  margin-inline: var(--space-xs-xf5ch3, 8px);
 }
-.awsui_calendar-header_1ykar_uooqo_168:not(#\9) {
+.awsui_calendar-header_1ykar_1qb9f_169:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.awsui_calendar-header-month_1ykar_uooqo_173:not(#\9) {
+.awsui_calendar-header-month_1ykar_1qb9f_174:not(#\9) {
   font-size: var(--font-size-body-m-pa3mqb, 14px);
   line-height: var(--line-height-body-m-2zx78l, 22px);
   font-weight: 700;
   color: var(--color-text-dropdown-item-default-d4af6n, #16191f);
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
-.awsui_calendar-next-month-btn_1ykar_uooqo_180:not(#\9) {
+.awsui_calendar-next-month-btn_1ykar_1qb9f_182:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-prev-month-btn_1ykar_uooqo_183:not(#\9) {
+.awsui_calendar-prev-month-btn_1ykar_1qb9f_185:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-grid_1ykar_uooqo_186:not(#\9) {
-  width: 100%;
+.awsui_calendar-grid_1ykar_1qb9f_188:not(#\9) {
+  inline-size: 100%;
   border-spacing: 0;
 }
-.awsui_calendar-grid-cell_1ykar_uooqo_190:not(#\9) {
-  width: 14.2857142857%;
+.awsui_calendar-grid-cell_1ykar_1qb9f_192:not(#\9) {
+  inline-size: 14.2857142857%;
   word-break: break-word;
   text-align: center;
   font-weight: unset;
 }
-.awsui_calendar-day-header_1ykar_uooqo_196:not(#\9) {
-  padding: var(--space-s-2025hl, 12px) 0 var(--space-xxs-9rrxti, 4px);
+.awsui_calendar-day-header_1ykar_1qb9f_198:not(#\9) {
+  padding-block-start: var(--space-s-2025hl, 12px);
+  padding-block-end: var(--space-xxs-9rrxti, 4px);
+  padding-inline: 0;
   color: var(--color-text-calendar-month-u6kvu0, #545b64);
   font-size: var(--font-size-body-s-533prh, 12px);
   line-height: var(--line-height-body-s-n0pazd, 16px);
   letter-spacing: var(--letter-spacing-body-s-nkvets, normal);
 }
-.awsui_calendar-day_1ykar_uooqo_196:not(#\9) {
-  border-bottom: 1px solid var(--color-border-calendar-grid-2ab4m1, #eaeded);
-  border-right: 1px solid var(--color-border-calendar-grid-2ab4m1, #eaeded);
-  padding: var(--space-xxs-9rrxti, 4px) 0;
+.awsui_calendar-day_1ykar_1qb9f_198:not(#\9) {
+  border-block-end: 1px solid var(--color-border-calendar-grid-2ab4m1, #eaeded);
+  border-inline-end: 1px solid var(--color-border-calendar-grid-2ab4m1, #eaeded);
+  padding-block: var(--space-xxs-9rrxti, 4px);
+  padding-inline: 0;
   color: var(--color-text-dropdown-item-disabled-nf1b1j, #aab7b8);
   position: relative;
 }
-.awsui_calendar-day_1ykar_uooqo_196:not(#\9):first-child {
-  border-left: 1px solid var(--color-border-calendar-grid-2ab4m1, #eaeded);
+.awsui_calendar-day_1ykar_1qb9f_198:not(#\9):first-child {
+  border-inline-start: 1px solid var(--color-border-calendar-grid-2ab4m1, #eaeded);
 }
-.awsui_calendar-day-enabled_1ykar_uooqo_213:not(#\9) {
+.awsui_calendar-day-enabled_1ykar_1qb9f_218:not(#\9) {
   cursor: pointer;
   color: var(--color-text-dropdown-item-secondary-x5katv, #687078);
 }
-.awsui_calendar-day-enabled_1ykar_uooqo_213:not(#\9)::after {
-  border-radius: var(--border-radius-item-jsz3j8, 0px);
+.awsui_calendar-day-enabled_1ykar_1qb9f_218:not(#\9)::after {
+  border-start-start-radius: var(--border-radius-item-jsz3j8, 0px);
+  border-start-end-radius: var(--border-radius-item-jsz3j8, 0px);
+  border-end-start-radius: var(--border-radius-item-jsz3j8, 0px);
+  border-end-end-radius: var(--border-radius-item-jsz3j8, 0px);
 }
-.awsui_calendar-day-enabled_1ykar_uooqo_213.awsui_calendar-day-current-month_1ykar_uooqo_220:not(#\9) {
+.awsui_calendar-day-enabled_1ykar_1qb9f_218.awsui_calendar-day-current-month_1ykar_1qb9f_228:not(#\9) {
   color: var(--color-text-dropdown-item-default-d4af6n, #16191f);
 }
-.awsui_calendar-day-enabled_1ykar_uooqo_213.awsui_calendar-day-current-month_1ykar_uooqo_220:not(#\9):hover {
+.awsui_calendar-day-enabled_1ykar_1qb9f_218.awsui_calendar-day-current-month_1ykar_1qb9f_228:not(#\9):hover {
   color: var(--color-text-calendar-day-hover-vvw9ks, #16191f);
   background-color: var(--color-background-dropdown-item-hover-i8ac7r, #f2f3f3);
 }
-.awsui_calendar-day-enabled_1ykar_uooqo_213.awsui_calendar-day-current-month_1ykar_uooqo_220:not(#\9):hover:not(.awsui_calendar-day-selected_1ykar_uooqo_227)::after {
-  border: var(--border-item-width-0zxiwv, 1px) solid var(--color-border-dropdown-item-hover-gqjku2, #879596);
+.awsui_calendar-day-enabled_1ykar_1qb9f_218.awsui_calendar-day-current-month_1ykar_1qb9f_228:not(#\9):hover:not(.awsui_calendar-day-selected_1ykar_1qb9f_235)::after {
+  border-block: var(--border-item-width-0zxiwv, 1px) solid var(--color-border-dropdown-item-hover-gqjku2, #879596);
+  border-inline: var(--border-item-width-0zxiwv, 1px) solid var(--color-border-dropdown-item-hover-gqjku2, #879596);
 }
-.awsui_calendar-day-today_1ykar_uooqo_230:not(#\9) {
+.awsui_calendar-day-today_1ykar_1qb9f_239:not(#\9) {
   background-color: var(--color-background-calendar-today-a3tqxx, #f2f3f3);
-  border-radius: var(--border-radius-item-jsz3j8, 0px);
+  border-start-start-radius: var(--border-radius-item-jsz3j8, 0px);
+  border-start-end-radius: var(--border-radius-item-jsz3j8, 0px);
+  border-end-start-radius: var(--border-radius-item-jsz3j8, 0px);
+  border-end-end-radius: var(--border-radius-item-jsz3j8, 0px);
   font-weight: 700;
 }
-.awsui_calendar-day_1ykar_uooqo_196:not(#\9)::after {
+.awsui_calendar-day_1ykar_1qb9f_198:not(#\9)::after {
   content: "";
   position: absolute;
   z-index: 1;
-  top: calc(-1 * var(--border-item-width-0zxiwv, 1px));
-  left: -1px;
-  bottom: -1px;
-  right: calc(-1 * var(--border-item-width-0zxiwv, 1px));
+  inset-block-start: calc(-1 * var(--border-item-width-0zxiwv, 1px));
+  inset-block-end: -1px;
+  inset-inline-start: -1px;
+  inset-inline-end: calc(-1 * var(--border-item-width-0zxiwv, 1px));
   background-color: transparent;
 }
-.awsui_calendar-day_1ykar_uooqo_196 > .awsui_day-inner_1ykar_uooqo_245:not(#\9) {
+.awsui_calendar-day_1ykar_1qb9f_198 > .awsui_day-inner_1ykar_1qb9f_257:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_calendar-day_1ykar_uooqo_196:not(#\9):focus {
+.awsui_calendar-day_1ykar_1qb9f_198:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_uooqo_196:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1qb9f_198:not(#\9):focus:focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_uooqo_196:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1qb9f_198:not(#\9):focus:focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-pkb6ov, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_uooqo_196:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1qb9f_198:not(#\9):focus:focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -271,23 +283,23 @@ body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_uooqo_196:not(#\9)
   border-end-end-radius: var(--border-radius-calendar-day-focus-ring-6ckim2, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_uooqo_196:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1qb9f_198:not(#\9):focus:focus::before {
   z-index: 2;
 }
-.awsui_calendar-day-selected_1ykar_uooqo_227:not(#\9) {
+.awsui_calendar-day-selected_1ykar_1qb9f_235:not(#\9) {
   border-color: transparent;
   position: relative;
   z-index: 2;
   font-weight: 700;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_uooqo_227:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1qb9f_235:not(#\9):focus:focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_uooqo_227:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1qb9f_235:not(#\9):focus:focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-pkb6ov, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_uooqo_227:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1qb9f_235:not(#\9):focus:focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -301,19 +313,23 @@ body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_uooqo_227
   border-end-end-radius: var(--border-radius-calendar-day-focus-ring-6ckim2, 2px);
   box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-hhlvy8, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_uooqo_227:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1qb9f_235:not(#\9):focus:focus::before {
   z-index: 2;
 }
-.awsui_calendar-day-selected_1ykar_uooqo_227:not(#\9)::after {
+.awsui_calendar-day-selected_1ykar_1qb9f_235:not(#\9)::after {
   background-color: var(--color-background-control-checked-pvanxo, #0073bb);
-  border: var(--border-item-width-0zxiwv, 1px) solid var(--color-background-control-checked-pvanxo, #0073bb);
-  border-radius: var(--border-radius-item-jsz3j8, 0px);
-}
-.awsui_calendar-day-selected_1ykar_uooqo_227 > .awsui_day-inner_1ykar_uooqo_245:not(#\9) {
+  border-block: var(--border-item-width-0zxiwv, 1px) solid var(--color-background-control-checked-pvanxo, #0073bb);
+  border-inline: var(--border-item-width-0zxiwv, 1px) solid var(--color-background-control-checked-pvanxo, #0073bb);
+  border-start-start-radius: var(--border-radius-item-jsz3j8, 0px);
+  border-start-end-radius: var(--border-radius-item-jsz3j8, 0px);
+  border-end-start-radius: var(--border-radius-item-jsz3j8, 0px);
+  border-end-end-radius: var(--border-radius-item-jsz3j8, 0px);
+}
+.awsui_calendar-day-selected_1ykar_1qb9f_235 > .awsui_day-inner_1ykar_1qb9f_257:not(#\9) {
   z-index: 2;
   color: var(--color-background-control-default-n6yadr, #ffffff);
   position: relative;
 }
-.awsui_calendar-week_1ykar_uooqo_316:not(#\9):first-child > .awsui_calendar-day_1ykar_uooqo_196 {
-  border-top: 1px solid var(--color-border-calendar-grid-2ab4m1, #eaeded);
+.awsui_calendar-week_1ykar_1qb9f_332:not(#\9):first-child > .awsui_calendar-day_1ykar_1qb9f_198 {
+  border-block-start: 1px solid var(--color-border-calendar-grid-2ab4m1, #eaeded);
 }

package/lib/internal/template/calendar/styles.selectors.js CHANGED Viewed

@@ -2,23 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "calendar": "awsui_calendar_1ykar_uooqo_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_uooqo_1",
-  "root": "awsui_root_1ykar_uooqo_124",
-  "calendar-inner": "awsui_calendar-inner_1ykar_uooqo_165",
-  "calendar-header": "awsui_calendar-header_1ykar_uooqo_168",
-  "calendar-header-month": "awsui_calendar-header-month_1ykar_uooqo_173",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_uooqo_180",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_uooqo_183",
-  "calendar-grid": "awsui_calendar-grid_1ykar_uooqo_186",
-  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_uooqo_190",
-  "calendar-day-header": "awsui_calendar-day-header_1ykar_uooqo_196",
-  "calendar-day": "awsui_calendar-day_1ykar_uooqo_196",
-  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_uooqo_213",
-  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_uooqo_220",
-  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_uooqo_227",
-  "calendar-day-today": "awsui_calendar-day-today_1ykar_uooqo_230",
-  "day-inner": "awsui_day-inner_1ykar_uooqo_245",
-  "calendar-week": "awsui_calendar-week_1ykar_uooqo_316"
+  "calendar": "awsui_calendar_1ykar_1qb9f_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_1qb9f_1",
+  "root": "awsui_root_1ykar_1qb9f_124",
+  "calendar-inner": "awsui_calendar-inner_1ykar_1qb9f_165",
+  "calendar-header": "awsui_calendar-header_1ykar_1qb9f_169",
+  "calendar-header-month": "awsui_calendar-header-month_1ykar_1qb9f_174",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_1qb9f_182",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_1qb9f_185",
+  "calendar-grid": "awsui_calendar-grid_1ykar_1qb9f_188",
+  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_1qb9f_192",
+  "calendar-day-header": "awsui_calendar-day-header_1ykar_1qb9f_198",
+  "calendar-day": "awsui_calendar-day_1ykar_1qb9f_198",
+  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_1qb9f_218",
+  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_1qb9f_228",
+  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_1qb9f_235",
+  "calendar-day-today": "awsui_calendar-day-today_1ykar_1qb9f_239",
+  "day-inner": "awsui_day-inner_1ykar_1qb9f_257",
+  "calendar-week": "awsui_calendar-week_1ykar_1qb9f_332"
 };