@cloudscape-design/components 3.0.1298 → 3.0.1300

package/drawer/styles.scoped.css

@@ -190,11 +190,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_root_1sxt8_1cneo_193:not(#\9) {
+.awsui_root_1sxt8_ygv0p_193:not(#\9) {
   display: contents;
 }
 
-.awsui_drawer_1sxt8_1cneo_197:not(#\9) {
+.awsui_drawer_1sxt8_ygv0p_197:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -227,33 +227,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   background-color: var(--color-background-drawer-5hs0eh, #ffffff);
 }
-.awsui_drawer_1sxt8_1cneo_197.awsui_has-close-action_1sxt8_1cneo_230:not(#\9) {
+.awsui_drawer_1sxt8_ygv0p_197.awsui_has-close-action_1sxt8_ygv0p_230:not(#\9) {
   position: relative;
 }
-.awsui_drawer_1sxt8_1cneo_197.awsui_position-absolute_1sxt8_1cneo_233:not(#\9), .awsui_drawer_1sxt8_1cneo_197.awsui_position-sticky_1sxt8_1cneo_233:not(#\9), .awsui_drawer_1sxt8_1cneo_197.awsui_position-fixed_1sxt8_1cneo_233:not(#\9) {
-  box-shadow: var(--shadow-panel-vk7iea, 0px 0px 0px 1px #b6bec9);
+.awsui_drawer_1sxt8_ygv0p_197.awsui_position-absolute_1sxt8_ygv0p_233.awsui_placement-end_1sxt8_ygv0p_233:not(#\9), .awsui_drawer_1sxt8_ygv0p_197.awsui_position-sticky_1sxt8_ygv0p_233.awsui_placement-end_1sxt8_ygv0p_233:not(#\9), .awsui_drawer_1sxt8_ygv0p_197.awsui_position-fixed_1sxt8_ygv0p_233.awsui_placement-end_1sxt8_ygv0p_233:not(#\9) {
+  border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
 }
-.awsui_drawer_1sxt8_1cneo_197.awsui_with-footer_1sxt8_1cneo_236:not(#\9) {
+.awsui_drawer_1sxt8_ygv0p_197.awsui_position-absolute_1sxt8_ygv0p_233.awsui_placement-start_1sxt8_ygv0p_236:not(#\9), .awsui_drawer_1sxt8_ygv0p_197.awsui_position-sticky_1sxt8_ygv0p_233.awsui_placement-start_1sxt8_ygv0p_236:not(#\9), .awsui_drawer_1sxt8_ygv0p_197.awsui_position-fixed_1sxt8_ygv0p_233.awsui_placement-start_1sxt8_ygv0p_236:not(#\9) {
+  border-inline-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
+}
+.awsui_drawer_1sxt8_ygv0p_197.awsui_position-absolute_1sxt8_ygv0p_233.awsui_placement-top_1sxt8_ygv0p_239:not(#\9), .awsui_drawer_1sxt8_ygv0p_197.awsui_position-sticky_1sxt8_ygv0p_233.awsui_placement-top_1sxt8_ygv0p_239:not(#\9), .awsui_drawer_1sxt8_ygv0p_197.awsui_position-fixed_1sxt8_ygv0p_233.awsui_placement-top_1sxt8_ygv0p_239:not(#\9) {
+  border-block-end: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
+}
+.awsui_drawer_1sxt8_ygv0p_197.awsui_position-absolute_1sxt8_ygv0p_233.awsui_placement-bottom_1sxt8_ygv0p_242:not(#\9), .awsui_drawer_1sxt8_ygv0p_197.awsui_position-sticky_1sxt8_ygv0p_233.awsui_placement-bottom_1sxt8_ygv0p_242:not(#\9), .awsui_drawer_1sxt8_ygv0p_197.awsui_position-fixed_1sxt8_ygv0p_233.awsui_placement-bottom_1sxt8_ygv0p_242:not(#\9) {
+  border-block-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
+}
+.awsui_drawer_1sxt8_ygv0p_197.awsui_with-footer_1sxt8_ygv0p_245:not(#\9) {
   display: flex;
   flex-direction: column;
 }
-.awsui_drawer_1sxt8_1cneo_197.awsui_with-footer_1sxt8_1cneo_236.awsui_position-static_1sxt8_1cneo_240:not(#\9) {
+.awsui_drawer_1sxt8_ygv0p_197.awsui_with-footer_1sxt8_ygv0p_245.awsui_position-static_1sxt8_ygv0p_249:not(#\9) {
   min-block-size: 100%;
 }
-.awsui_drawer_1sxt8_1cneo_197.awsui_with-footer_1sxt8_1cneo_236 > .awsui_content_1sxt8_1cneo_243:not(#\9) {
+.awsui_drawer_1sxt8_ygv0p_197.awsui_with-footer_1sxt8_ygv0p_245 > .awsui_content_1sxt8_ygv0p_252:not(#\9) {
   flex: 1;
 }
-.awsui_drawer_1sxt8_1cneo_197:not(#\9):focus {
+.awsui_drawer_1sxt8_ygv0p_197:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_1cneo_197:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_ygv0p_197:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_1cneo_197:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_ygv0p_197:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(-2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_1cneo_197:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_ygv0p_197:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -268,7 +277,7 @@ body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_1cneo_197:not(#\9):focus
   box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
 }
 
-.awsui_header_1sxt8_1cneo_271:not(#\9) {
+.awsui_header_1sxt8_ygv0p_280:not(#\9) {
   font-size: var(--font-panel-header-size-33h9j8, 18px);
   letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
   line-height: var(--font-panel-header-line-height-8xb2qj, 22px);
@@ -284,11 +293,11 @@ body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_1cneo_197:not(#\9):focus
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
-.awsui_header_1sxt8_1cneo_271.awsui_hide-close-action_1sxt8_1cneo_287:not(#\9) {
+.awsui_header_1sxt8_ygv0p_280.awsui_hide-close-action_1sxt8_ygv0p_296:not(#\9) {
   padding-inline: var(--space-panel-side-left-u1m3s9, 28px) var(--space-panel-side-right-8wwirc, 24px);
 }
 @media (min-width: 689px) {
-  .awsui_header_1sxt8_1cneo_271.awsui_with-additional-action_1sxt8_1cneo_291:not(#\9) {
+  .awsui_header_1sxt8_ygv0p_280.awsui_with-additional-action_1sxt8_ygv0p_300: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
@@ -296,18 +305,18 @@ body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_1cneo_197:not(#\9):focus
     padding-inline: var(--space-panel-side-left-u1m3s9, 28px) calc(var(--space-xxxl-aut1u7, 40px) + var(--space-scaled-xxl-6wgq96, 32px));
   }
 }
-.awsui_header_1sxt8_1cneo_271.awsui_with-runtime-context_1sxt8_1cneo_299:not(#\9) {
+.awsui_header_1sxt8_ygv0p_280.awsui_with-runtime-context_1sxt8_ygv0p_308:not(#\9) {
   padding-block: 14px;
 }
-.awsui_with-toolbar_1sxt8_1cneo_302 > .awsui_header_1sxt8_1cneo_271:not(#\9) {
+.awsui_with-toolbar_1sxt8_ygv0p_311 > .awsui_header_1sxt8_ygv0p_280:not(#\9) {
   border-color: transparent;
   margin-block-end: 0px;
 }
-.awsui_header_1sxt8_1cneo_271 h2:not(#\9),
-.awsui_header_1sxt8_1cneo_271 h3:not(#\9),
-.awsui_header_1sxt8_1cneo_271 h4:not(#\9),
-.awsui_header_1sxt8_1cneo_271 h5:not(#\9),
-.awsui_header_1sxt8_1cneo_271 h6:not(#\9) {
+.awsui_header_1sxt8_ygv0p_280 h2:not(#\9),
+.awsui_header_1sxt8_ygv0p_280 h3:not(#\9),
+.awsui_header_1sxt8_ygv0p_280 h4:not(#\9),
+.awsui_header_1sxt8_ygv0p_280 h5:not(#\9),
+.awsui_header_1sxt8_ygv0p_280 h6:not(#\9) {
   font-size: var(--font-panel-header-size-33h9j8, 18px);
   letter-spacing: var(--letter-spacing-heading-m-29ewnk, -0.01em);
   line-height: var(--font-panel-header-line-height-8xb2qj, 22px);
@@ -318,32 +327,32 @@ body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_1cneo_197:not(#\9):focus
   margin-block: 0;
 }
 
-.awsui_header-actions_1sxt8_1cneo_321:not(#\9) {
+.awsui_header-actions_1sxt8_ygv0p_330:not(#\9) {
   display: inline-flex;
   align-items: flex-start;
   z-index: 1;
 }
 
-.awsui_close-action_1sxt8_1cneo_327:not(#\9) {
+.awsui_close-action_1sxt8_ygv0p_336:not(#\9) {
   position: absolute;
-  inset-block-start: var(--space-panel-header-vertical-ckfgmy, 20px);
+  inset-block-start: var(--space-static-m-m6qboo, 16px);
   inset-inline-end: var(--space-scaled-l-sej05l, 20px);
 }
 
-.awsui_content-with-paddings_1sxt8_1cneo_333:not(#\9):not(:empty) {
+.awsui_content-with-paddings_1sxt8_ygv0p_342:not(#\9):not(:empty) {
   padding-block-start: var(--space-panel-content-top-qvd1dr, 20px);
   padding-inline-start: var(--space-panel-side-left-u1m3s9, 28px);
   padding-inline-end: var(--space-panel-side-right-8wwirc, 24px);
   padding-block-end: var(--space-panel-content-bottom-24c6lu, 40px);
 }
 
-.awsui_footer_1sxt8_1cneo_340:not(#\9) {
+.awsui_footer_1sxt8_ygv0p_349:not(#\9) {
   background-color: var(--color-background-container-content-6u8rvp, #ffffff);
   border-block-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-panel-header-ygztvl, #c6c6cd);
   padding-block: var(--space-panel-content-top-qvd1dr, 20px);
   padding-inline: var(--space-panel-side-left-u1m3s9, 28px) var(--space-panel-side-right-8wwirc, 24px);
 }
-.awsui_footer_1sxt8_1cneo_340.awsui_is-sticky_1sxt8_1cneo_346:not(#\9) {
+.awsui_footer_1sxt8_ygv0p_349.awsui_is-sticky_1sxt8_ygv0p_355:not(#\9) {
   position: sticky;
   inset-block-end: 0;
   inset-inline-start: 0;
@@ -351,25 +360,25 @@ body[data-awsui-focus-visible=true] .awsui_drawer_1sxt8_1cneo_197:not(#\9):focus
   z-index: 810;
 }
 
-.awsui_test-utils-drawer-content_1sxt8_1cneo_354:not(#\9) {
+.awsui_test-utils-drawer-content_1sxt8_ygv0p_363:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_hidden_1sxt8_1cneo_358:not(#\9) {
+.awsui_hidden_1sxt8_ygv0p_367:not(#\9) {
   display: none;
 }
 
-.awsui_focus-trap_1sxt8_1cneo_362:not(#\9) {
+.awsui_focus-trap_1sxt8_ygv0p_371:not(#\9) {
   display: contents;
 }
 
-.awsui_backdrop_1sxt8_1cneo_366:not(#\9) {
+.awsui_backdrop_1sxt8_ygv0p_375:not(#\9) {
   inset: 0;
   background-color: var(--color-background-drawer-backdrop-ducxi3, rgba(35, 43, 55, 0.7));
 }
-.awsui_backdrop_1sxt8_1cneo_366.awsui_backdrop-fixed_1sxt8_1cneo_370:not(#\9) {
+.awsui_backdrop_1sxt8_ygv0p_375.awsui_backdrop-fixed_1sxt8_ygv0p_379:not(#\9) {
   position: fixed;
 }
-.awsui_backdrop_1sxt8_1cneo_366.awsui_backdrop-absolute_1sxt8_1cneo_373:not(#\9) {
+.awsui_backdrop_1sxt8_ygv0p_375.awsui_backdrop-absolute_1sxt8_ygv0p_382:not(#\9) {
   position: absolute;
 }

package/drawer/styles.selectors.js

@@ -2,30 +2,34 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1sxt8_1cneo_193",
-  "drawer": "awsui_drawer_1sxt8_1cneo_197",
-  "has-close-action": "awsui_has-close-action_1sxt8_1cneo_230",
-  "position-absolute": "awsui_position-absolute_1sxt8_1cneo_233",
-  "position-sticky": "awsui_position-sticky_1sxt8_1cneo_233",
-  "position-fixed": "awsui_position-fixed_1sxt8_1cneo_233",
-  "with-footer": "awsui_with-footer_1sxt8_1cneo_236",
-  "position-static": "awsui_position-static_1sxt8_1cneo_240",
-  "content": "awsui_content_1sxt8_1cneo_243",
-  "header": "awsui_header_1sxt8_1cneo_271",
-  "hide-close-action": "awsui_hide-close-action_1sxt8_1cneo_287",
-  "with-additional-action": "awsui_with-additional-action_1sxt8_1cneo_291",
-  "with-runtime-context": "awsui_with-runtime-context_1sxt8_1cneo_299",
-  "with-toolbar": "awsui_with-toolbar_1sxt8_1cneo_302",
-  "header-actions": "awsui_header-actions_1sxt8_1cneo_321",
-  "close-action": "awsui_close-action_1sxt8_1cneo_327",
-  "content-with-paddings": "awsui_content-with-paddings_1sxt8_1cneo_333",
-  "footer": "awsui_footer_1sxt8_1cneo_340",
-  "is-sticky": "awsui_is-sticky_1sxt8_1cneo_346",
-  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_1cneo_354",
-  "hidden": "awsui_hidden_1sxt8_1cneo_358",
-  "focus-trap": "awsui_focus-trap_1sxt8_1cneo_362",
-  "backdrop": "awsui_backdrop_1sxt8_1cneo_366",
-  "backdrop-fixed": "awsui_backdrop-fixed_1sxt8_1cneo_370",
-  "backdrop-absolute": "awsui_backdrop-absolute_1sxt8_1cneo_373"
+  "root": "awsui_root_1sxt8_ygv0p_193",
+  "drawer": "awsui_drawer_1sxt8_ygv0p_197",
+  "has-close-action": "awsui_has-close-action_1sxt8_ygv0p_230",
+  "position-absolute": "awsui_position-absolute_1sxt8_ygv0p_233",
+  "placement-end": "awsui_placement-end_1sxt8_ygv0p_233",
+  "position-sticky": "awsui_position-sticky_1sxt8_ygv0p_233",
+  "position-fixed": "awsui_position-fixed_1sxt8_ygv0p_233",
+  "placement-start": "awsui_placement-start_1sxt8_ygv0p_236",
+  "placement-top": "awsui_placement-top_1sxt8_ygv0p_239",
+  "placement-bottom": "awsui_placement-bottom_1sxt8_ygv0p_242",
+  "with-footer": "awsui_with-footer_1sxt8_ygv0p_245",
+  "position-static": "awsui_position-static_1sxt8_ygv0p_249",
+  "content": "awsui_content_1sxt8_ygv0p_252",
+  "header": "awsui_header_1sxt8_ygv0p_280",
+  "hide-close-action": "awsui_hide-close-action_1sxt8_ygv0p_296",
+  "with-additional-action": "awsui_with-additional-action_1sxt8_ygv0p_300",
+  "with-runtime-context": "awsui_with-runtime-context_1sxt8_ygv0p_308",
+  "with-toolbar": "awsui_with-toolbar_1sxt8_ygv0p_311",
+  "header-actions": "awsui_header-actions_1sxt8_ygv0p_330",
+  "close-action": "awsui_close-action_1sxt8_ygv0p_336",
+  "content-with-paddings": "awsui_content-with-paddings_1sxt8_ygv0p_342",
+  "footer": "awsui_footer_1sxt8_ygv0p_349",
+  "is-sticky": "awsui_is-sticky_1sxt8_ygv0p_355",
+  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_ygv0p_363",
+  "hidden": "awsui_hidden_1sxt8_ygv0p_367",
+  "focus-trap": "awsui_focus-trap_1sxt8_ygv0p_371",
+  "backdrop": "awsui_backdrop_1sxt8_ygv0p_375",
+  "backdrop-fixed": "awsui_backdrop-fixed_1sxt8_ygv0p_379",
+  "backdrop-absolute": "awsui_backdrop-absolute_1sxt8_ygv0p_382"
 };
   

package/drawer/utils.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { NextDrawerProps } from './interfaces';
-type PositionProps = Pick<NextDrawerProps, 'position' | 'placement' | 'offset' | 'stickyOffset' | 'zIndex'>;
+import { DrawerProps } from './interfaces';
+type PositionProps = Pick<DrawerProps, 'position' | 'placement' | 'offset' | 'stickyOffset' | 'zIndex'>;
 export declare function getPositionStyles({
   position,
   zIndex,

package/drawer/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/drawer/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI/C,KAAK,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,QAAQ,CAAC,CAAC;AAE5G,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,GAAG;IAChF,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,CAmBA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/drawer/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,KAAK,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,QAAQ,CAAC,CAAC;AAExG,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,GAAG;IAChF,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,CAmBA"}

package/drawer/utils.js

@@ -1,5 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import styles from './styles.css.js';
 export function getPositionStyles({ position, zIndex, ...props }) {
@@ -9,18 +10,18 @@ export function getPositionStyles({ position, zIndex, ...props }) {
     }
     switch (position) {
         case 'absolute':
-            return getStyles(position, { position: 'absolute', zIndex, ...computeAbsoluteOffsets(props) });
+            return getStyles(position, { position: 'absolute', zIndex, ...computeAbsoluteOffsets(props) }, props.placement);
         case 'sticky':
-            return getStyles(position, { position: 'sticky', zIndex, ...computeStickyOffsets(props) });
+            return getStyles(position, { position: 'sticky', zIndex, ...computeStickyOffsets(props) }, props.placement);
         case 'fixed':
-            return getStyles(position, { position: 'fixed', zIndex, ...computeAbsoluteOffsets(props) });
+            return getStyles(position, { position: 'fixed', zIndex, ...computeAbsoluteOffsets(props) }, props.placement);
         case 'static':
         default:
             return getStyles(position);
     }
 }
-function getStyles(position = 'static', style = {}) {
-    return { className: styles[`position-${position}`], style };
+function getStyles(position = 'static', style = {}, placement) {
+    return { className: clsx(styles[`position-${position}`], placement && styles[`placement-${placement}`]), style };
 }
 function computeAbsoluteOffsets({ placement, offset: { top, bottom, start, end } = {}, }) {
     const style = {};

package/drawer/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/drawer/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { NextDrawerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype PositionProps = Pick<NextDrawerProps, 'position' | 'placement' | 'offset' | 'stickyOffset' | 'zIndex'>;\n\nexport function getPositionStyles({ position, zIndex, ...props }: PositionProps): {\n  className: string;\n  style: React.CSSProperties;\n} {\n  if (position === 'sticky' && (props.placement === 'start' || props.placement === 'end')) {\n    warnOnce(\n      'Drawer',\n      `position=\"sticky\" is not supported with placement=\"${props.placement}\" and falls back to position=\"static\".`\n    );\n    position = 'static';\n  }\n  switch (position) {\n    case 'absolute':\n      return getStyles(position, { position: 'absolute', zIndex, ...computeAbsoluteOffsets(props) });\n    case 'sticky':\n      return getStyles(position, { position: 'sticky', zIndex, ...computeStickyOffsets(props) });\n    case 'fixed':\n      return getStyles(position, { position: 'fixed', zIndex, ...computeAbsoluteOffsets(props) });\n    case 'static':\n    default:\n      return getStyles(position);\n  }\n}\n\nfunction getStyles(position: NextDrawerProps.Position = 'static', style: React.CSSProperties = {}) {\n  return { className: styles[`position-${position}`], style };\n}\n\nfunction computeAbsoluteOffsets({\n  placement,\n  offset: { top, bottom, start, end } = {},\n}: Pick<NextDrawerProps, 'placement' | 'offset'>) {\n  const style: React.CSSProperties = {};\n  const offset = { top: top ?? 0, bottom: bottom ?? 0, start: start ?? 0, end: end ?? 0 };\n  switch (placement) {\n    case 'top':\n      style.insetBlockStart = offset.top;\n      style.insetInlineStart = offset.start;\n      style.insetInlineEnd = offset.end;\n      break;\n    case 'bottom':\n      style.insetBlockEnd = offset.bottom;\n      style.insetInlineStart = offset.start;\n      style.insetInlineEnd = offset.end;\n      break;\n    case 'start':\n      style.insetInlineStart = offset.start;\n      style.insetBlockStart = offset.top;\n      style.insetBlockEnd = offset.bottom;\n      break;\n    case 'end':\n      style.insetInlineEnd = offset.end;\n      style.insetBlockStart = offset.top;\n      style.insetBlockEnd = offset.bottom;\n      break;\n  }\n  return style;\n}\n\nfunction computeStickyOffsets({\n  placement,\n  offset: { top, bottom, start, end } = {},\n  stickyOffset: { top: stickyTop, bottom: stickyBottom } = {},\n}: Pick<NextDrawerProps, 'placement' | 'offset' | 'stickyOffset'>) {\n  const style: React.CSSProperties = {};\n  const offset = { top: top ?? 0, bottom: bottom ?? 0, start: start ?? 0, end: end ?? 0 };\n  const stickyOffset = { top: stickyTop ?? 0, bottom: stickyBottom ?? 0 };\n  switch (placement) {\n    case 'top':\n      style.insetBlockStart = stickyOffset.top;\n      style.marginBlockStart = offset.top;\n      style.marginInlineStart = offset.start;\n      style.marginInlineEnd = offset.end;\n      style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;\n      break;\n    case 'bottom':\n      style.insetBlockEnd = stickyOffset.bottom;\n      style.marginBlockEnd = offset.bottom;\n      style.marginInlineStart = offset.start;\n      style.marginInlineEnd = offset.end;\n      style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;\n      break;\n  }\n  return style;\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/drawer/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { DrawerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype PositionProps = Pick<DrawerProps, 'position' | 'placement' | 'offset' | 'stickyOffset' | 'zIndex'>;\n\nexport function getPositionStyles({ position, zIndex, ...props }: PositionProps): {\n  className: string;\n  style: React.CSSProperties;\n} {\n  if (position === 'sticky' && (props.placement === 'start' || props.placement === 'end')) {\n    warnOnce(\n      'Drawer',\n      `position=\"sticky\" is not supported with placement=\"${props.placement}\" and falls back to position=\"static\".`\n    );\n    position = 'static';\n  }\n  switch (position) {\n    case 'absolute':\n      return getStyles(position, { position: 'absolute', zIndex, ...computeAbsoluteOffsets(props) }, props.placement);\n    case 'sticky':\n      return getStyles(position, { position: 'sticky', zIndex, ...computeStickyOffsets(props) }, props.placement);\n    case 'fixed':\n      return getStyles(position, { position: 'fixed', zIndex, ...computeAbsoluteOffsets(props) }, props.placement);\n    case 'static':\n    default:\n      return getStyles(position);\n  }\n}\n\nfunction getStyles(\n  position: DrawerProps.Position = 'static',\n  style: React.CSSProperties = {},\n  placement?: DrawerProps.Placement\n) {\n  return { className: clsx(styles[`position-${position}`], placement && styles[`placement-${placement}`]), style };\n}\n\nfunction computeAbsoluteOffsets({\n  placement,\n  offset: { top, bottom, start, end } = {},\n}: Pick<DrawerProps, 'placement' | 'offset'>) {\n  const style: React.CSSProperties = {};\n  const offset = { top: top ?? 0, bottom: bottom ?? 0, start: start ?? 0, end: end ?? 0 };\n  switch (placement) {\n    case 'top':\n      style.insetBlockStart = offset.top;\n      style.insetInlineStart = offset.start;\n      style.insetInlineEnd = offset.end;\n      break;\n    case 'bottom':\n      style.insetBlockEnd = offset.bottom;\n      style.insetInlineStart = offset.start;\n      style.insetInlineEnd = offset.end;\n      break;\n    case 'start':\n      style.insetInlineStart = offset.start;\n      style.insetBlockStart = offset.top;\n      style.insetBlockEnd = offset.bottom;\n      break;\n    case 'end':\n      style.insetInlineEnd = offset.end;\n      style.insetBlockStart = offset.top;\n      style.insetBlockEnd = offset.bottom;\n      break;\n  }\n  return style;\n}\n\nfunction computeStickyOffsets({\n  placement,\n  offset: { top, bottom, start, end } = {},\n  stickyOffset: { top: stickyTop, bottom: stickyBottom } = {},\n}: Pick<DrawerProps, 'placement' | 'offset' | 'stickyOffset'>) {\n  const style: React.CSSProperties = {};\n  const offset = { top: top ?? 0, bottom: bottom ?? 0, start: start ?? 0, end: end ?? 0 };\n  const stickyOffset = { top: stickyTop ?? 0, bottom: stickyBottom ?? 0 };\n  switch (placement) {\n    case 'top':\n      style.insetBlockStart = stickyOffset.top;\n      style.marginBlockStart = offset.top;\n      style.marginInlineStart = offset.start;\n      style.marginInlineEnd = offset.end;\n      style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;\n      break;\n    case 'bottom':\n      style.insetBlockEnd = stickyOffset.bottom;\n      style.marginBlockEnd = offset.bottom;\n      style.marginInlineStart = offset.start;\n      style.marginInlineEnd = offset.end;\n      style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;\n      break;\n  }\n  return style;\n}\n"]}

package/form-field/styles.css.js

@@ -1,29 +1,29 @@
 
     import './styles.scoped.css';
     export default {
-  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_1a5zf_153",
-  "warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_1a5zf_154",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_1a5zf_1",
-  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_1a5zf_184",
-  "warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_1a5zf_185",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_1a5zf_1",
-  "warning": "awsui_warning_14mhv_1a5zf_154",
-  "error": "awsui_error_14mhv_1a5zf_153",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_1a5zf_1",
-  "root": "awsui_root_14mhv_1a5zf_236",
-  "label": "awsui_label_14mhv_1a5zf_269",
-  "info": "awsui_info_14mhv_1a5zf_285",
-  "description": "awsui_description_14mhv_1a5zf_291",
-  "constraint": "awsui_constraint_14mhv_1a5zf_292",
-  "hints": "awsui_hints_14mhv_1a5zf_299",
-  "constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_1a5zf_300",
-  "secondary-control": "awsui_secondary-control_14mhv_1a5zf_304",
-  "controls": "awsui_controls_14mhv_1a5zf_308",
-  "label-hidden": "awsui_label-hidden_14mhv_1a5zf_308",
-  "label-wrapper": "awsui_label-wrapper_14mhv_1a5zf_311",
-  "control": "awsui_control_14mhv_1a5zf_308",
-  "error__message": "awsui_error__message_14mhv_1a5zf_338",
-  "warning__message": "awsui_warning__message_14mhv_1a5zf_339",
-  "visually-hidden": "awsui_visually-hidden_14mhv_1a5zf_343"
+  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_ilwf6_153",
+  "warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_ilwf6_154",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_ilwf6_1",
+  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_ilwf6_184",
+  "warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_ilwf6_185",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_ilwf6_1",
+  "warning": "awsui_warning_14mhv_ilwf6_154",
+  "error": "awsui_error_14mhv_ilwf6_153",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_ilwf6_1",
+  "root": "awsui_root_14mhv_ilwf6_236",
+  "label": "awsui_label_14mhv_ilwf6_269",
+  "info": "awsui_info_14mhv_ilwf6_285",
+  "description": "awsui_description_14mhv_ilwf6_291",
+  "constraint": "awsui_constraint_14mhv_ilwf6_292",
+  "hints": "awsui_hints_14mhv_ilwf6_299",
+  "constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_ilwf6_300",
+  "secondary-control": "awsui_secondary-control_14mhv_ilwf6_304",
+  "controls": "awsui_controls_14mhv_ilwf6_308",
+  "label-hidden": "awsui_label-hidden_14mhv_ilwf6_308",
+  "label-wrapper": "awsui_label-wrapper_14mhv_ilwf6_311",
+  "control": "awsui_control_14mhv_ilwf6_308",
+  "error__message": "awsui_error__message_14mhv_ilwf6_338",
+  "warning__message": "awsui_warning__message_14mhv_ilwf6_339",
+  "visually-hidden": "awsui_visually-hidden_14mhv_ilwf6_343"
 };
   

package/form-field/styles.scoped.css

@@ -150,11 +150,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_error-icon-shake-wrapper_14mhv_1a5zf_153:not(#\9),
-.awsui_warning-icon-shake-wrapper_14mhv_1a5zf_154:not(#\9) {
-  animation: awsui_awsui-motion-shake-horizontally_14mhv_1a5zf_1 var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
+.awsui_error-icon-shake-wrapper_14mhv_ilwf6_153:not(#\9),
+.awsui_warning-icon-shake-wrapper_14mhv_ilwf6_154:not(#\9) {
+  animation: awsui_awsui-motion-shake-horizontally_14mhv_ilwf6_1 var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
 }
-@keyframes awsui_awsui-motion-shake-horizontally_14mhv_1a5zf_1 {
+@keyframes awsui_awsui-motion-shake-horizontally_14mhv_ilwf6_1 {
   0% {
     transform: translateX(-5px);
     animation-timing-function: linear;
@@ -168,22 +168,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error-icon-shake-wrapper_14mhv_1a5zf_153:not(#\9),
-  .awsui_warning-icon-shake-wrapper_14mhv_1a5zf_154:not(#\9) {
+  .awsui_error-icon-shake-wrapper_14mhv_ilwf6_153:not(#\9),
+  .awsui_warning-icon-shake-wrapper_14mhv_ilwf6_154:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_1a5zf_153:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_1a5zf_153:not(#\9), .awsui-motion-disabled .awsui_warning-icon-shake-wrapper_14mhv_1a5zf_154:not(#\9), .awsui-mode-entering .awsui_warning-icon-shake-wrapper_14mhv_1a5zf_154:not(#\9) {
+.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_ilwf6_153:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_ilwf6_153:not(#\9), .awsui-motion-disabled .awsui_warning-icon-shake-wrapper_14mhv_ilwf6_154:not(#\9), .awsui-mode-entering .awsui_warning-icon-shake-wrapper_14mhv_ilwf6_154:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_error-icon-scale-wrapper_14mhv_1a5zf_184:not(#\9),
-.awsui_warning-icon-scale-wrapper_14mhv_1a5zf_185:not(#\9) {
-  animation: awsui_awsui-motion-scale-popup_14mhv_1a5zf_1 var(--motion-duration-refresh-only-medium-5rbn3k, 165ms) var(--motion-easing-refresh-only-a-ccyqaz, cubic-bezier(0, 0, 0, 1));
+.awsui_error-icon-scale-wrapper_14mhv_ilwf6_184:not(#\9),
+.awsui_warning-icon-scale-wrapper_14mhv_ilwf6_185:not(#\9) {
+  animation: awsui_awsui-motion-scale-popup_14mhv_ilwf6_1 var(--motion-duration-refresh-only-medium-5rbn3k, 165ms) var(--motion-easing-refresh-only-a-ccyqaz, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-scale-popup_14mhv_1a5zf_1 {
+@keyframes awsui_awsui-motion-scale-popup_14mhv_ilwf6_1 {
   0% {
     transform: scale(0.95);
   }
@@ -192,22 +192,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error-icon-scale-wrapper_14mhv_1a5zf_184:not(#\9),
-  .awsui_warning-icon-scale-wrapper_14mhv_1a5zf_185:not(#\9) {
+  .awsui_error-icon-scale-wrapper_14mhv_ilwf6_184:not(#\9),
+  .awsui_warning-icon-scale-wrapper_14mhv_ilwf6_185:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_1a5zf_184:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_1a5zf_184:not(#\9), .awsui-motion-disabled .awsui_warning-icon-scale-wrapper_14mhv_1a5zf_185:not(#\9), .awsui-mode-entering .awsui_warning-icon-scale-wrapper_14mhv_1a5zf_185:not(#\9) {
+.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_ilwf6_184:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_ilwf6_184:not(#\9), .awsui-motion-disabled .awsui_warning-icon-scale-wrapper_14mhv_ilwf6_185:not(#\9), .awsui-mode-entering .awsui_warning-icon-scale-wrapper_14mhv_ilwf6_185:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_warning_14mhv_1a5zf_154:not(#\9),
-.awsui_error_14mhv_1a5zf_153:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_14mhv_1a5zf_1 var(--motion-duration-refresh-only-medium-5rbn3k, 165ms) var(--motion-easing-refresh-only-a-ccyqaz, cubic-bezier(0, 0, 0, 1));
+.awsui_warning_14mhv_ilwf6_154:not(#\9),
+.awsui_error_14mhv_ilwf6_153:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_14mhv_ilwf6_1 var(--motion-duration-refresh-only-medium-5rbn3k, 165ms) var(--motion-easing-refresh-only-a-ccyqaz, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-fade-in-0_14mhv_1a5zf_1 {
+@keyframes awsui_awsui-motion-fade-in-0_14mhv_ilwf6_1 {
   from {
     opacity: 0;
   }
@@ -216,18 +216,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_warning_14mhv_1a5zf_154:not(#\9),
-  .awsui_error_14mhv_1a5zf_153:not(#\9) {
+  .awsui_warning_14mhv_ilwf6_154:not(#\9),
+  .awsui_error_14mhv_ilwf6_153:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_warning_14mhv_1a5zf_154:not(#\9), .awsui-mode-entering .awsui_warning_14mhv_1a5zf_154:not(#\9), .awsui-motion-disabled .awsui_error_14mhv_1a5zf_153:not(#\9), .awsui-mode-entering .awsui_error_14mhv_1a5zf_153:not(#\9) {
+.awsui-motion-disabled .awsui_warning_14mhv_ilwf6_154:not(#\9), .awsui-mode-entering .awsui_warning_14mhv_ilwf6_154:not(#\9), .awsui-motion-disabled .awsui_error_14mhv_ilwf6_153:not(#\9), .awsui-mode-entering .awsui_error_14mhv_ilwf6_153:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_14mhv_1a5zf_236:not(#\9) {
+.awsui_root_14mhv_ilwf6_236:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -260,58 +260,58 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
 }
 
-.awsui_label_14mhv_1a5zf_269:not(#\9) {
+.awsui_label_14mhv_ilwf6_269:not(#\9) {
   box-sizing: border-box;
   color: var(--color-text-form-label-6sbm75, #0f141a);
   display: inline;
   -webkit-font-smoothing: var(--font-smoothing-webkit-oemolo, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hbm0aq, grayscale);
-  font-size: var(--font-size-body-m-a7nh2n, 14px);
-  line-height: var(--line-height-body-m-2mh3ke, 20px);
-  font-weight: var(--font-display-label-weight-zavpeo, 700);
+  font-size: var(--font-size-form-label-mxiqd7, 14px);
+  line-height: var(--line-height-form-label-asu26u, 20px);
+  font-weight: var(--font-weight-form-label-mrg9ef, 700);
   margin-inline-end: var(--space-xs-ymlm0b, 8px);
 }
-.awsui_label_14mhv_1a5zf_269:not(#\9):only-child {
+.awsui_label_14mhv_ilwf6_269:not(#\9):only-child {
   margin-block: 0;
   margin-inline: 0;
 }
 
-.awsui_info_14mhv_1a5zf_285:not(#\9) {
+.awsui_info_14mhv_ilwf6_285:not(#\9) {
   display: inline-flex;
   padding-inline-start: var(--space-xs-ymlm0b, 8px);
   border-inline-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
 }
 
-.awsui_description_14mhv_1a5zf_291:not(#\9),
-.awsui_constraint_14mhv_1a5zf_292:not(#\9) {
+.awsui_description_14mhv_ilwf6_291:not(#\9),
+.awsui_constraint_14mhv_ilwf6_292:not(#\9) {
   color: var(--color-text-form-secondary-1nm780, #656871);
   font-size: var(--font-size-body-s-smc8cv, 12px);
   line-height: var(--line-height-body-s-nu5hx1, 16px);
   letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
 }
 
-.awsui_hints_14mhv_1a5zf_299:not(#\9),
-.awsui_constraint-has-validation-text_14mhv_1a5zf_300:not(#\9) {
+.awsui_hints_14mhv_ilwf6_299:not(#\9),
+.awsui_constraint-has-validation-text_14mhv_ilwf6_300:not(#\9) {
   padding-block-start: var(--space-xxs-hwfkai, 4px);
 }
 
-.awsui_secondary-control_14mhv_1a5zf_304:not(#\9) {
+.awsui_secondary-control_14mhv_ilwf6_304:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_controls_14mhv_1a5zf_308:not(#\9):not(.awsui_label-hidden_14mhv_1a5zf_308) {
+.awsui_controls_14mhv_ilwf6_308:not(#\9):not(.awsui_label-hidden_14mhv_ilwf6_308) {
   padding-block-start: var(--space-xxs-hwfkai, 4px);
 }
-.awsui_label-wrapper_14mhv_1a5zf_311:not(#\9):empty + .awsui_controls_14mhv_1a5zf_308 {
+.awsui_label-wrapper_14mhv_ilwf6_311:not(#\9):empty + .awsui_controls_14mhv_ilwf6_308 {
   padding-block-start: 0;
 }
 
-.awsui_control_14mhv_1a5zf_308:not(#\9) {
+.awsui_control_14mhv_ilwf6_308:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.awsui_error_14mhv_1a5zf_153:not(#\9) {
+.awsui_error_14mhv_ilwf6_153:not(#\9) {
   color: var(--color-text-status-error-ksqavh, #db0000);
   font-size: var(--font-size-body-s-smc8cv, 12px);
   line-height: var(--line-height-body-s-nu5hx1, 16px);
@@ -320,7 +320,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: flex-start;
 }
 
-.awsui_warning_14mhv_1a5zf_154:not(#\9) {
+.awsui_warning_14mhv_ilwf6_154:not(#\9) {
   color: var(--color-text-status-warning-6meo06, #855900);
   font-size: var(--font-size-body-s-smc8cv, 12px);
   line-height: var(--line-height-body-s-nu5hx1, 16px);
@@ -329,12 +329,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: flex-start;
 }
 
-.awsui_error__message_14mhv_1a5zf_338:not(#\9),
-.awsui_warning__message_14mhv_1a5zf_339:not(#\9) {
+.awsui_error__message_14mhv_ilwf6_338:not(#\9),
+.awsui_warning__message_14mhv_ilwf6_339:not(#\9) {
   margin-inline-start: var(--space-xxs-hwfkai, 4px);
 }
 
-.awsui_visually-hidden_14mhv_1a5zf_343:not(#\9) {
+.awsui_visually-hidden_14mhv_ilwf6_343:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;