@cloudscape-design/components 3.0.624 → 3.0.626

package/form-field/styles.scoped.css

@@ -100,10 +100,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_av9zi_103:not(#\9) {
-  animation: awsui_awsui-motion-shake-horizontally_14mhv_av9zi_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms);
+.awsui_error-icon-shake-wrapper_14mhv_kp9ld_103:not(#\9),
+.awsui_warning-icon-shake-wrapper_14mhv_kp9ld_104:not(#\9) {
+  animation: awsui_awsui-motion-shake-horizontally_14mhv_kp9ld_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms);
 }
-@keyframes awsui_awsui-motion-shake-horizontally_14mhv_av9zi_1 {
+@keyframes awsui_awsui-motion-shake-horizontally_14mhv_kp9ld_1 {
   0% {
     transform: translateX(-5px);
     animation-timing-function: linear;
@@ -117,20 +118,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_av9zi_103:not(#\9) {
+  .awsui_error-icon-shake-wrapper_14mhv_kp9ld_103:not(#\9),
+  .awsui_warning-icon-shake-wrapper_14mhv_kp9ld_104:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_av9zi_103:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_av9zi_103:not(#\9) {
+.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_kp9ld_103:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_kp9ld_103:not(#\9), .awsui-motion-disabled .awsui_warning-icon-shake-wrapper_14mhv_kp9ld_104:not(#\9), .awsui-mode-entering .awsui_warning-icon-shake-wrapper_14mhv_kp9ld_104:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_error-icon-scale-wrapper_14mhv_av9zi_130:not(#\9) {
-  animation: awsui_awsui-motion-scale-popup_14mhv_av9zi_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-a-8flf9q, cubic-bezier(0, 0, 0, 1));
+.awsui_error-icon-scale-wrapper_14mhv_kp9ld_134:not(#\9),
+.awsui_warning-icon-scale-wrapper_14mhv_kp9ld_135:not(#\9) {
+  animation: awsui_awsui-motion-scale-popup_14mhv_kp9ld_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-a-8flf9q, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-scale-popup_14mhv_av9zi_1 {
+@keyframes awsui_awsui-motion-scale-popup_14mhv_kp9ld_1 {
   0% {
     transform: scale(0.95);
   }
@@ -139,20 +142,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_av9zi_130:not(#\9) {
+  .awsui_error-icon-scale-wrapper_14mhv_kp9ld_134:not(#\9),
+  .awsui_warning-icon-scale-wrapper_14mhv_kp9ld_135:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_av9zi_130:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_av9zi_130:not(#\9) {
+.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_kp9ld_134:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_kp9ld_134:not(#\9), .awsui-motion-disabled .awsui_warning-icon-scale-wrapper_14mhv_kp9ld_135:not(#\9), .awsui-mode-entering .awsui_warning-icon-scale-wrapper_14mhv_kp9ld_135:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_error_14mhv_av9zi_103:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_14mhv_av9zi_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-a-8flf9q, cubic-bezier(0, 0, 0, 1));
+.awsui_warning_14mhv_kp9ld_104:not(#\9),
+.awsui_error_14mhv_kp9ld_103:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_14mhv_kp9ld_1 var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-a-8flf9q, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-fade-in-0_14mhv_av9zi_1 {
+@keyframes awsui_awsui-motion-fade-in-0_14mhv_kp9ld_1 {
   from {
     opacity: 0;
   }
@@ -161,17 +166,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error_14mhv_av9zi_103:not(#\9) {
+  .awsui_warning_14mhv_kp9ld_104:not(#\9),
+  .awsui_error_14mhv_kp9ld_103:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error_14mhv_av9zi_103:not(#\9), .awsui-mode-entering .awsui_error_14mhv_av9zi_103:not(#\9) {
+.awsui-motion-disabled .awsui_warning_14mhv_kp9ld_104:not(#\9), .awsui-mode-entering .awsui_warning_14mhv_kp9ld_104:not(#\9), .awsui-motion-disabled .awsui_error_14mhv_kp9ld_103:not(#\9), .awsui-mode-entering .awsui_error_14mhv_kp9ld_103:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_14mhv_av9zi_174:not(#\9) {
+.awsui_root_14mhv_kp9ld_186:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -208,7 +214,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
 }
 
-.awsui_label_14mhv_av9zi_210:not(#\9) {
+.awsui_label_14mhv_kp9ld_222:not(#\9) {
   box-sizing: border-box;
   color: var(--color-text-form-label-ktbzsd, #000716);
   display: inline;
@@ -217,43 +223,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: var(--font-display-label-weight-815ja9, 700);
   margin-inline-end: var(--space-xs-zb16t3, 8px);
 }
-.awsui_label_14mhv_av9zi_210:not(#\9):only-child {
+.awsui_label_14mhv_kp9ld_222:not(#\9):only-child {
   margin-block: 0;
   margin-inline: 0;
 }
 
-.awsui_info_14mhv_av9zi_224:not(#\9) {
+.awsui_info_14mhv_kp9ld_236:not(#\9) {
   padding-inline-start: var(--space-xs-zb16t3, 8px);
   border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
 
-.awsui_description_14mhv_av9zi_229:not(#\9),
-.awsui_constraint_14mhv_av9zi_230:not(#\9) {
+.awsui_description_14mhv_kp9ld_241:not(#\9),
+.awsui_constraint_14mhv_kp9ld_242:not(#\9) {
   color: var(--color-text-form-secondary-dxc248, #5f6b7a);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
   letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
 }
 
-.awsui_hints_14mhv_av9zi_237:not(#\9),
-.awsui_constraint-has-error_14mhv_av9zi_238:not(#\9) {
+.awsui_hints_14mhv_kp9ld_249:not(#\9),
+.awsui_constraint-has-validation-text_14mhv_kp9ld_250:not(#\9) {
   padding-block-start: var(--space-xxs-p8yyaw, 4px);
 }
 
-.awsui_secondary-control_14mhv_av9zi_242:not(#\9) {
+.awsui_secondary-control_14mhv_kp9ld_254:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_controls_14mhv_av9zi_246:not(#\9):not(.awsui_label-hidden_14mhv_av9zi_246) {
+.awsui_controls_14mhv_kp9ld_258:not(#\9):not(.awsui_label-hidden_14mhv_kp9ld_258) {
   padding-block-start: var(--space-xxs-p8yyaw, 4px);
 }
 
-.awsui_control_14mhv_av9zi_246:not(#\9) {
+.awsui_control_14mhv_kp9ld_258:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.awsui_error_14mhv_av9zi_103:not(#\9) {
+.awsui_error_14mhv_kp9ld_103:not(#\9) {
   color: var(--color-text-status-error-wdvepn, #d91515);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
@@ -262,11 +268,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: flex-start;
 }
 
-.awsui_error__message_14mhv_av9zi_264:not(#\9) {
+.awsui_warning_14mhv_kp9ld_104:not(#\9) {
+  color: var(--color-text-status-warning-yik8vi, #8d6605);
+  font-size: var(--font-size-body-s-asqx2i, 12px);
+  line-height: var(--line-height-body-s-7zv1j5, 16px);
+  letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
+  display: flex;
+  align-items: flex-start;
+}
+
+.awsui_error__message_14mhv_kp9ld_285:not(#\9),
+.awsui_warning__message_14mhv_kp9ld_286:not(#\9) {
   margin-inline-start: var(--space-xxs-p8yyaw, 4px);
 }
 
-.awsui_visually-hidden_14mhv_av9zi_268:not(#\9) {
+.awsui_visually-hidden_14mhv_kp9ld_290:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;

package/form-field/styles.selectors.js

@@ -2,24 +2,28 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_av9zi_103",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_av9zi_1",
-  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_av9zi_130",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_av9zi_1",
-  "error": "awsui_error_14mhv_av9zi_103",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_av9zi_1",
-  "root": "awsui_root_14mhv_av9zi_174",
-  "label": "awsui_label_14mhv_av9zi_210",
-  "info": "awsui_info_14mhv_av9zi_224",
-  "description": "awsui_description_14mhv_av9zi_229",
-  "constraint": "awsui_constraint_14mhv_av9zi_230",
-  "hints": "awsui_hints_14mhv_av9zi_237",
-  "constraint-has-error": "awsui_constraint-has-error_14mhv_av9zi_238",
-  "secondary-control": "awsui_secondary-control_14mhv_av9zi_242",
-  "controls": "awsui_controls_14mhv_av9zi_246",
-  "label-hidden": "awsui_label-hidden_14mhv_av9zi_246",
-  "control": "awsui_control_14mhv_av9zi_246",
-  "error__message": "awsui_error__message_14mhv_av9zi_264",
-  "visually-hidden": "awsui_visually-hidden_14mhv_av9zi_268"
+  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_kp9ld_103",
+  "warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_kp9ld_104",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_kp9ld_1",
+  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_kp9ld_134",
+  "warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_kp9ld_135",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_kp9ld_1",
+  "warning": "awsui_warning_14mhv_kp9ld_104",
+  "error": "awsui_error_14mhv_kp9ld_103",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_kp9ld_1",
+  "root": "awsui_root_14mhv_kp9ld_186",
+  "label": "awsui_label_14mhv_kp9ld_222",
+  "info": "awsui_info_14mhv_kp9ld_236",
+  "description": "awsui_description_14mhv_kp9ld_241",
+  "constraint": "awsui_constraint_14mhv_kp9ld_242",
+  "hints": "awsui_hints_14mhv_kp9ld_249",
+  "constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_kp9ld_250",
+  "secondary-control": "awsui_secondary-control_14mhv_kp9ld_254",
+  "controls": "awsui_controls_14mhv_kp9ld_258",
+  "label-hidden": "awsui_label-hidden_14mhv_kp9ld_258",
+  "control": "awsui_control_14mhv_kp9ld_258",
+  "error__message": "awsui_error__message_14mhv_kp9ld_285",
+  "warning__message": "awsui_warning__message_14mhv_kp9ld_286",
+  "visually-hidden": "awsui_visually-hidden_14mhv_kp9ld_290"
 };
   

package/form-field/util.d.ts

@@ -5,9 +5,10 @@ interface FormFieldIds {
     description?: string;
     constraint?: string;
     error?: string;
+    warning?: string;
 }
-export declare function getSlotIds(formFieldId: string, label?: React.ReactNode, description?: React.ReactNode, constraintText?: React.ReactNode, errorText?: React.ReactNode): FormFieldIds;
-export declare function getAriaDescribedBy({ error, description, constraint }: FormFieldIds): string | undefined;
+export declare function getSlotIds(formFieldId: string, label?: React.ReactNode, description?: React.ReactNode, constraintText?: React.ReactNode, errorText?: React.ReactNode, warningText?: React.ReactNode): FormFieldIds;
+export declare function getAriaDescribedBy({ error, warning, description, constraint }: FormFieldIds): string | undefined;
 export declare function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean): {
     colspan: GridProps.BreakpointMapping | number;
 }[];

package/form-field/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAUD,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,EACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,EACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,EAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,gBAU5B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,YAAY,sBAIlF;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO;aACxE,UAAU,iBAAiB,GAAG,MAAM;IAenE"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAUD,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,EACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,EACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,EAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,EAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,gBAW9B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,YAAY,sBAI3F;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO;aACxE,UAAU,iBAAiB,GAAG,MAAM;IAenE"}

package/form-field/util.js

@@ -4,17 +4,18 @@ function makeSlotId(prop, formFieldId, propName) {
     }
     return `${formFieldId}-${propName}`;
 }
-export function getSlotIds(formFieldId, label, description, constraintText, errorText) {
+export function getSlotIds(formFieldId, label, description, constraintText, errorText, warningText) {
     const ids = {
         label: makeSlotId(label, formFieldId, 'label'),
         description: makeSlotId(description, formFieldId, 'description'),
         constraint: makeSlotId(constraintText, formFieldId, 'constraint'),
         error: makeSlotId(errorText, formFieldId, 'error'),
+        warning: makeSlotId(warningText, formFieldId, 'warning'),
     };
     return ids;
 }
-export function getAriaDescribedBy({ error, description, constraint }) {
-    const describedByAttributes = [error, description, constraint].filter(e => !!e);
+export function getAriaDescribedBy({ error, warning, description, constraint }) {
+    const describedByAttributes = [error, warning, description, constraint].filter(e => !!e);
     const describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;
     return describedBy;
 }

package/form-field/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":"AAWA,SAAS,UAAU,CAAC,IAAqB,EAAE,WAAmB,EAAE,QAAgB;IAC9E,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,GAAG,WAAW,IAAI,QAAQ,EAAE,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,WAAmB,EACnB,KAAuB,EACvB,WAA6B,EAC7B,cAAgC,EAChC,SAA2B;IAE3B,MAAM,GAAG,GAAiB;QACxB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,CAAC;QAC9C,WAAW,EAAE,UAAU,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC;QAChE,UAAU,EAAE,UAAU,CAAC,cAAc,EAAE,WAAW,EAAE,YAAY,CAAC;QACjE,KAAK,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC;KACnD,CAAC;IAEF,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAgB;IACjF,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChF,MAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAAgB,EAAE,uBAAgC,EAAE,SAAkB;IACtG,IAAI,OAAiE,CAAC;IAEtE,IAAI,OAAO,EAAE;QACX,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;KAC9C;SAAM,IAAI,SAAS,EAAE;QACpB,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;KACtF;SAAM;QACL,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;KACtF;IAED,IAAI,CAAC,uBAAuB,EAAE;QAC5B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;KACrB;IAED,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { GridProps } from '../grid/interfaces';\n\ninterface FormFieldIds {\n  label?: string;\n  description?: string;\n  constraint?: string;\n  error?: string;\n}\n\nfunction makeSlotId(prop: React.ReactNode, formFieldId: string, propName: string): string | undefined {\n  if (!prop) {\n    return undefined;\n  }\n\n  return `${formFieldId}-${propName}`;\n}\n\nexport function getSlotIds(\n  formFieldId: string,\n  label?: React.ReactNode,\n  description?: React.ReactNode,\n  constraintText?: React.ReactNode,\n  errorText?: React.ReactNode\n) {\n  const ids: FormFieldIds = {\n    label: makeSlotId(label, formFieldId, 'label'),\n    description: makeSlotId(description, formFieldId, 'description'),\n    constraint: makeSlotId(constraintText, formFieldId, 'constraint'),\n    error: makeSlotId(errorText, formFieldId, 'error'),\n  };\n\n  return ids;\n}\n\nexport function getAriaDescribedBy({ error, description, constraint }: FormFieldIds) {\n  const describedByAttributes = [error, description, constraint].filter(e => !!e);\n  const describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;\n  return describedBy;\n}\n\nexport function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean) {\n  let columns: Array<{ colspan: GridProps.BreakpointMapping | number }>;\n\n  if (stretch) {\n    columns = [{ colspan: 12 }, { colspan: 12 }];\n  } else if (isRefresh) {\n    columns = [{ colspan: { default: 12, xs: 8 } }, { colspan: { default: 12, xs: 4 } }];\n  } else {\n    columns = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\n  }\n\n  if (!secondaryControlPresent) {\n    return [columns[0]];\n  }\n\n  return columns;\n}\n"]}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":"AAYA,SAAS,UAAU,CAAC,IAAqB,EAAE,WAAmB,EAAE,QAAgB;IAC9E,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,GAAG,WAAW,IAAI,QAAQ,EAAE,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,WAAmB,EACnB,KAAuB,EACvB,WAA6B,EAC7B,cAAgC,EAChC,SAA2B,EAC3B,WAA6B;IAE7B,MAAM,GAAG,GAAiB;QACxB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,CAAC;QAC9C,WAAW,EAAE,UAAU,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC;QAChE,UAAU,EAAE,UAAU,CAAC,cAAc,EAAE,WAAW,EAAE,YAAY,CAAC;QACjE,KAAK,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC;QAClD,OAAO,EAAE,UAAU,CAAC,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC;KACzD,CAAC;IAEF,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAgB;IAC1F,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzF,MAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAAgB,EAAE,uBAAgC,EAAE,SAAkB;IACtG,IAAI,OAAiE,CAAC;IAEtE,IAAI,OAAO,EAAE;QACX,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;KAC9C;SAAM,IAAI,SAAS,EAAE;QACpB,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;KACtF;SAAM;QACL,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;KACtF;IAED,IAAI,CAAC,uBAAuB,EAAE;QAC5B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;KACrB;IAED,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { GridProps } from '../grid/interfaces';\n\ninterface FormFieldIds {\n  label?: string;\n  description?: string;\n  constraint?: string;\n  error?: string;\n  warning?: string;\n}\n\nfunction makeSlotId(prop: React.ReactNode, formFieldId: string, propName: string): string | undefined {\n  if (!prop) {\n    return undefined;\n  }\n\n  return `${formFieldId}-${propName}`;\n}\n\nexport function getSlotIds(\n  formFieldId: string,\n  label?: React.ReactNode,\n  description?: React.ReactNode,\n  constraintText?: React.ReactNode,\n  errorText?: React.ReactNode,\n  warningText?: React.ReactNode\n) {\n  const ids: FormFieldIds = {\n    label: makeSlotId(label, formFieldId, 'label'),\n    description: makeSlotId(description, formFieldId, 'description'),\n    constraint: makeSlotId(constraintText, formFieldId, 'constraint'),\n    error: makeSlotId(errorText, formFieldId, 'error'),\n    warning: makeSlotId(warningText, formFieldId, 'warning'),\n  };\n\n  return ids;\n}\n\nexport function getAriaDescribedBy({ error, warning, description, constraint }: FormFieldIds) {\n  const describedByAttributes = [error, warning, description, constraint].filter(e => !!e);\n  const describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;\n  return describedBy;\n}\n\nexport function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean) {\n  let columns: Array<{ colspan: GridProps.BreakpointMapping | number }>;\n\n  if (stretch) {\n    columns = [{ colspan: 12 }, { colspan: 12 }];\n  } else if (isRefresh) {\n    columns = [{ colspan: { default: 12, xs: 8 } }, { colspan: { default: 12, xs: 4 } }];\n  } else {\n    columns = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\n  }\n\n  if (!secondaryControlPresent) {\n    return [columns[0]];\n  }\n\n  return columns;\n}\n"]}

package/help-panel/styles.css.js

@@ -1,9 +1,9 @@
 
     import './styles.scoped.css';
     export default {
-  "help-panel": "awsui_help-panel_1d237_xb6zh_100",
-  "header": "awsui_header_1d237_xb6zh_269",
-  "content": "awsui_content_1d237_xb6zh_300",
-  "footer": "awsui_footer_1d237_xb6zh_346"
+  "help-panel": "awsui_help-panel_1d237_nqluc_100",
+  "header": "awsui_header_1d237_nqluc_269",
+  "content": "awsui_content_1d237_nqluc_300",
+  "footer": "awsui_footer_1d237_nqluc_346"
 };
   

package/help-panel/styles.scoped.css

@@ -97,7 +97,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  SPDX-License-Identifier: Apache-2.0
 */
 /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
-.awsui_help-panel_1d237_xb6zh_100:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -132,41 +132,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   word-wrap: break-word;
-  padding-block-start: var(--space-scaled-l-0hpmd7, 20px);
+  padding-block-start: var(--space-panel-header-vertical-gv9pti, 20px);
   padding-block-end: 0;
   padding-inline-end: var(--space-panel-side-right-xofg51, 24px);
   padding-inline-start: var(--space-panel-side-left-5t0who, 28px);
 }
-.awsui_help-panel_1d237_xb6zh_100 hr:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 hr:not(#\9) {
   border-block: none;
   border-inline: none;
   border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
   margin-block: var(--space-scaled-xl-kswcw7, 24px);
-  margin-inline: calc(-1 * var(--space-xs-zb16t3, 8px));
+  margin-inline: calc(-1 * var(--space-panel-divider-margin-horizontal-sbik1z, 8px));
 }
-.awsui_help-panel_1d237_xb6zh_100 ol:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 ul:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 ol:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 ul:not(#\9) {
   padding-inline-start: var(--space-l-t419sm, 20px);
   list-style-position: outside;
   margin-block: var(--space-s-34lx8l, 12px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_xb6zh_100 li:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 li:not(#\9) {
   margin-block: var(--space-scaled-xxs-7597g1, 4px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_xb6zh_100 a:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 h2:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 h3:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 h4:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 h5:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 pre:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 code:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 a:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 h2:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 h3:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 h4:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 h5:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 pre:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 code:not(#\9) {
   margin-block: var(--space-xs-zb16t3, 8px);
   margin-inline: 0;
   padding-block: 0;
 }
-.awsui_help-panel_1d237_xb6zh_100 code:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 code:not(#\9) {
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
   letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
@@ -177,7 +177,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   white-space: pre-wrap;
 }
-.awsui_help-panel_1d237_xb6zh_100 pre:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 pre:not(#\9) {
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
   letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
@@ -190,41 +190,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-xxs-p8yyaw, 4px);
   padding-inline: var(--space-xxs-p8yyaw, 4px);
 }
-.awsui_help-panel_1d237_xb6zh_100 dl:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 dl:not(#\9) {
   margin-block: var(--space-s-34lx8l, 12px);
   margin-inline: 0;
   /* stylelint-disable-next-line selector-max-universal */
 }
-.awsui_help-panel_1d237_xb6zh_100 dl *:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 dl *:not(#\9) {
   margin-block: 0;
 }
-.awsui_help-panel_1d237_xb6zh_100 dt:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 dt:not(#\9) {
   margin-block-start: var(--space-xs-zb16t3, 8px);
   font-weight: 700;
 }
-.awsui_help-panel_1d237_xb6zh_100 dd:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 dd:not(#\9) {
   margin-block-start: 0;
   margin-block-end: var(--space-xs-zb16t3, 8px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_xb6zh_100 h2:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 h3:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 h4:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 h5:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 h6:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 h2:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 h3:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 h4:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 h5:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 h6:not(#\9) {
   margin-block-start: var(--space-xl-lmui9r, 24px);
   color: var(--color-text-heading-default-lstrpn, #000716);
 }
-.awsui_help-panel_1d237_xb6zh_100 > :not(#\9):last-child {
-  margin-block-end: var(--space-scaled-xxxl-fdg8ai, 40px);
+.awsui_help-panel_1d237_nqluc_100 > :not(#\9):last-child {
+  margin-block-end: var(--space-panel-content-bottom-7k6er3, 40px);
 }
-.awsui_help-panel_1d237_xb6zh_100 p:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 p:not(#\9) {
   color: inherit;
   text-decoration: none;
   margin-block: var(--space-s-34lx8l, 12px);
   margin-inline: 0;
 }
-.awsui_help-panel_1d237_xb6zh_100 h1:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 h1:not(#\9) {
   font-size: var(--font-size-heading-xl-ypc05a, 24px);
   line-height: var(--line-height-heading-xl-avbttk, 30px);
   letter-spacing: var(--letter-spacing-heading-xl-sagq9c, -0.02em);
@@ -232,7 +232,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_xb6zh_100 h2:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 h2:not(#\9) {
   font-size: var(--font-size-heading-l-ou0d0l, 20px);
   line-height: var(--line-height-heading-l-mmm3my, 24px);
   letter-spacing: var(--letter-spacing-heading-l-qqjd4y, -0.015em);
@@ -240,7 +240,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_xb6zh_100 h3:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 h3:not(#\9) {
   font-size: var(--font-size-heading-m-sjd256, 18px);
   line-height: var(--line-height-heading-m-50evfk, 22px);
   letter-spacing: var(--letter-spacing-heading-m-0w575i, -0.01em);
@@ -248,7 +248,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_xb6zh_100 h4:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 h4:not(#\9) {
   font-size: var(--font-size-heading-s-yykzif, 16px);
   line-height: var(--line-height-heading-s-4i6ewn, 20px);
   letter-spacing: var(--letter-spacing-heading-s-jr3mor, -0.005em);
@@ -256,39 +256,39 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_xb6zh_100 h5:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 h5:not(#\9) {
   font-size: var(--font-size-heading-xs-wo4hpf, 14px);
   line-height: var(--line-height-heading-xs-aeleja, 18px);
   font-weight: var(--font-weight-heading-xs-l7rqme, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
 }
-.awsui_help-panel_1d237_xb6zh_100 b:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 strong:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 b:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 strong:not(#\9) {
   font-weight: 700;
 }
-.awsui_help-panel_1d237_xb6zh_100 .awsui_header_1d237_xb6zh_269:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 .awsui_header_1d237_nqluc_269:not(#\9) {
   font-size: var(--font-panel-header-size-edjz3l, 18px);
   line-height: var(--font-panel-header-line-height-kxi4u2, 22px);
   font-weight: var(--font-weight-heading-l-f8711v, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
   color: var(--color-text-heading-default-lstrpn, #000716);
-  padding-block-end: var(--space-scaled-l-0hpmd7, 20px);
+  padding-block-end: var(--space-panel-header-vertical-gv9pti, 20px);
   padding-inline: var(--space-panel-side-left-5t0who, 28px) calc(var(--space-xl-lmui9r, 24px) + var(--space-scaled-xxl-wbot5q, 32px));
   border-block: none;
   border-inline: none;
-  border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
+  border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-panel-header-lf0q4c, #b6bec9);
   margin-block-start: 0;
-  margin-block-end: var(--space-scaled-l-0hpmd7, 20px);
+  margin-block-end: var(--space-panel-content-top-wac3yp, 20px);
   margin-inline-end: calc(-1 * var(--space-panel-side-right-xofg51, 24px));
   margin-inline-start: calc(-1 * var(--space-panel-side-left-5t0who, 28px));
 }
-.awsui_help-panel_1d237_xb6zh_100 .awsui_header_1d237_xb6zh_269 h2:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 .awsui_header_1d237_xb6zh_269 h3:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 .awsui_header_1d237_xb6zh_269 h4:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 .awsui_header_1d237_xb6zh_269 h5:not(#\9),
-.awsui_help-panel_1d237_xb6zh_100 .awsui_header_1d237_xb6zh_269 h6:not(#\9) {
+.awsui_help-panel_1d237_nqluc_100 .awsui_header_1d237_nqluc_269 h2:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 .awsui_header_1d237_nqluc_269 h3:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 .awsui_header_1d237_nqluc_269 h4:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 .awsui_header_1d237_nqluc_269 h5:not(#\9),
+.awsui_help-panel_1d237_nqluc_100 .awsui_header_1d237_nqluc_269 h6:not(#\9) {
   font-size: var(--font-panel-header-size-edjz3l, 18px);
   line-height: var(--font-panel-header-line-height-kxi4u2, 22px);
   font-weight: var(--font-weight-heading-l-f8711v, 700);
@@ -298,17 +298,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: 0;
 }
 
-.awsui_content_1d237_xb6zh_300:not(#\9) {
+.awsui_content_1d237_nqluc_300:not(#\9) {
   color: var(--color-text-body-secondary-w9jvno, #414d5c);
 }
-.awsui_content_1d237_xb6zh_300 h2:not(#\9):first-child,
-.awsui_content_1d237_xb6zh_300 h3:not(#\9):first-child,
-.awsui_content_1d237_xb6zh_300 h4:not(#\9):first-child,
-.awsui_content_1d237_xb6zh_300 h5:not(#\9):first-child,
-.awsui_content_1d237_xb6zh_300 h6:not(#\9):first-child {
+.awsui_content_1d237_nqluc_300 h2:not(#\9):first-child,
+.awsui_content_1d237_nqluc_300 h3:not(#\9):first-child,
+.awsui_content_1d237_nqluc_300 h4:not(#\9):first-child,
+.awsui_content_1d237_nqluc_300 h5:not(#\9):first-child,
+.awsui_content_1d237_nqluc_300 h6:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_content_1d237_xb6zh_300 a:not(#\9) {
+.awsui_content_1d237_nqluc_300 a:not(#\9) {
   color: var(--color-text-link-default-latg1a, #0972d3);
   font-weight: inherit;
   letter-spacing: normal;
@@ -322,46 +322,46 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   text-decoration-thickness: 1px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content_1d237_xb6zh_300 a:not(#\9) {
+  .awsui_content_1d237_nqluc_300 a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content_1d237_xb6zh_300 a:not(#\9), .awsui-mode-entering .awsui_content_1d237_xb6zh_300 a:not(#\9) {
+.awsui-motion-disabled .awsui_content_1d237_nqluc_300 a:not(#\9), .awsui-mode-entering .awsui_content_1d237_nqluc_300 a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_content_1d237_xb6zh_300 a:not(#\9):hover {
+.awsui_content_1d237_nqluc_300 a:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_content_1d237_xb6zh_300 a:not(#\9):focus {
+.awsui_content_1d237_nqluc_300 a:not(#\9):focus {
   outline: none;
 }
-.awsui_content_1d237_xb6zh_300 a:not(#\9):active {
+.awsui_content_1d237_nqluc_300 a:not(#\9):active {
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_content_1d237_xb6zh_300 a:not(#\9):active, .awsui_content_1d237_xb6zh_300 a:not(#\9):focus, .awsui_content_1d237_xb6zh_300 a:not(#\9):hover {
+.awsui_content_1d237_nqluc_300 a:not(#\9):active, .awsui_content_1d237_nqluc_300 a:not(#\9):focus, .awsui_content_1d237_nqluc_300 a:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
 
-.awsui_footer_1d237_xb6zh_346:not(#\9) {
+.awsui_footer_1d237_nqluc_346:not(#\9) {
   color: var(--color-text-body-secondary-w9jvno, #414d5c);
   border-block-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-divider-default-j74lyz, #b6bec9);
   margin-block: var(--space-scaled-xl-kswcw7, 24px);
-  margin-inline: calc(-1 * var(--space-xs-zb16t3, 8px));
+  margin-inline: calc(-1 * var(--space-panel-divider-margin-horizontal-sbik1z, 8px));
   padding-block: 0;
-  padding-inline: var(--space-s-34lx8l, 12px);
+  padding-inline: var(--space-panel-divider-margin-horizontal-sbik1z, 8px);
 }
-.awsui_footer_1d237_xb6zh_346 > :not(#\9):first-child {
+.awsui_footer_1d237_nqluc_346 > :not(#\9):first-child {
   margin-block-start: var(--space-scaled-xl-kswcw7, 24px);
 }
-.awsui_footer_1d237_xb6zh_346 ul:not(#\9) {
+.awsui_footer_1d237_nqluc_346 ul:not(#\9) {
   list-style: none;
   padding-inline-start: 0;
 }
-.awsui_footer_1d237_xb6zh_346 a:not(#\9) {
+.awsui_footer_1d237_nqluc_346 a:not(#\9) {
   color: var(--color-text-link-default-latg1a, #0972d3);
   font-weight: inherit;
   letter-spacing: normal;
@@ -375,32 +375,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   text-decoration-thickness: 1px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_footer_1d237_xb6zh_346 a:not(#\9) {
+  .awsui_footer_1d237_nqluc_346 a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_footer_1d237_xb6zh_346 a:not(#\9), .awsui-mode-entering .awsui_footer_1d237_xb6zh_346 a:not(#\9) {
+.awsui-motion-disabled .awsui_footer_1d237_nqluc_346 a:not(#\9), .awsui-mode-entering .awsui_footer_1d237_nqluc_346 a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_footer_1d237_xb6zh_346 a:not(#\9):hover {
+.awsui_footer_1d237_nqluc_346 a:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_footer_1d237_xb6zh_346 a:not(#\9):focus {
+.awsui_footer_1d237_nqluc_346 a:not(#\9):focus {
   outline: none;
 }
-.awsui_footer_1d237_xb6zh_346 a:not(#\9):active {
+.awsui_footer_1d237_nqluc_346 a:not(#\9):active {
   color: var(--color-text-link-hover-8j6p14, #033160);
 }
-.awsui_footer_1d237_xb6zh_346 a:not(#\9):active, .awsui_footer_1d237_xb6zh_346 a:not(#\9):focus, .awsui_footer_1d237_xb6zh_346 a:not(#\9):hover {
+.awsui_footer_1d237_nqluc_346 a:not(#\9):active, .awsui_footer_1d237_nqluc_346 a:not(#\9):focus, .awsui_footer_1d237_nqluc_346 a:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
 
-.awsui_content_1d237_xb6zh_300 a:not(#\9):focus,
-.awsui_footer_1d237_xb6zh_346 a:not(#\9):focus {
+.awsui_content_1d237_nqluc_300 a:not(#\9):focus,
+.awsui_footer_1d237_nqluc_346 a:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-kkfop6, 0);
   outline-offset: 2px;