npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.374 → 3.0.376 - Mend

@cloudscape-design/components-themeable 3.0.374 → 3.0.376

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 (392) hide show

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

@@ -2,52 +2,52 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "flash-with-motion": "awsui_flash-with-motion_1q84n_1dsyd_93",
-  "enter": "awsui_enter_1q84n_1dsyd_93",
-  "flash-body": "awsui_flash-body_1q84n_1dsyd_107",
-  "flash-message": "awsui_flash-message_1q84n_1dsyd_107",
-  "flash-header": "awsui_flash-header_1q84n_1dsyd_107",
-  "flash-content": "awsui_flash-content_1q84n_1dsyd_108",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_1dsyd_109",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_1dsyd_110",
-  "flash-icon": "awsui_flash-icon_1q84n_1dsyd_133",
-  "entering": "awsui_entering_1q84n_1dsyd_146",
-  "entered": "awsui_entered_1q84n_1dsyd_167",
-  "exiting": "awsui_exiting_1q84n_1dsyd_272",
-  "stack": "awsui_stack_1q84n_1dsyd_294",
-  "animation-running": "awsui_animation-running_1q84n_1dsyd_294",
-  "item": "awsui_item_1q84n_1dsyd_294",
-  "flash-list-item": "awsui_flash-list-item_1q84n_1dsyd_295",
-  "notification-bar": "awsui_notification-bar_1q84n_1dsyd_296",
-  "collapsed": "awsui_collapsed_1q84n_1dsyd_316",
-  "animation-ready": "awsui_animation-ready_1q84n_1dsyd_316",
-  "expanded-only": "awsui_expanded-only_1q84n_1dsyd_316",
-  "expanded": "awsui_expanded_1q84n_1dsyd_316",
-  "flash": "awsui_flash_1q84n_1dsyd_93",
-  "collapsible": "awsui_collapsible_1q84n_1dsyd_380",
-  "short-list": "awsui_short-list_1q84n_1dsyd_386",
-  "visual-refresh": "awsui_visual-refresh_1q84n_1dsyd_386",
-  "status": "awsui_status_1q84n_1dsyd_603",
-  "header": "awsui_header_1q84n_1dsyd_603",
-  "item-count": "awsui_item-count_1q84n_1dsyd_604",
-  "button": "awsui_button_1q84n_1dsyd_605",
-  "type-count": "awsui_type-count_1q84n_1dsyd_640",
-  "count-number": "awsui_count-number_1q84n_1dsyd_640",
-  "icon": "awsui_icon_1q84n_1dsyd_674",
-  "floating": "awsui_floating_1q84n_1dsyd_712",
-  "flashbar": "awsui_flashbar_1q84n_1dsyd_720",
-  "flash-refresh": "awsui_flash-refresh_1q84n_1dsyd_766",
-  "flash-list": "awsui_flash-list_1q84n_1dsyd_295",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_1dsyd_785",
-  "flash-text": "awsui_flash-text_1q84n_1dsyd_812",
-  "dismiss-button": "awsui_dismiss-button_1q84n_1dsyd_110",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_1dsyd_853",
-  "action-button": "awsui_action-button_1q84n_1dsyd_109",
-  "action-slot": "awsui_action-slot_1q84n_1dsyd_863",
-  "flash-type-success": "awsui_flash-type-success_1q84n_1dsyd_867",
-  "flash-type-error": "awsui_flash-type-error_1q84n_1dsyd_871",
-  "flash-type-info": "awsui_flash-type-info_1q84n_1dsyd_875",
-  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_1dsyd_876",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_1dsyd_880"
+  "flash-with-motion": "awsui_flash-with-motion_1q84n_1xr85_93",
+  "enter": "awsui_enter_1q84n_1xr85_93",
+  "flash-body": "awsui_flash-body_1q84n_1xr85_107",
+  "flash-message": "awsui_flash-message_1q84n_1xr85_107",
+  "flash-header": "awsui_flash-header_1q84n_1xr85_107",
+  "flash-content": "awsui_flash-content_1q84n_1xr85_108",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_1xr85_109",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_1xr85_110",
+  "flash-icon": "awsui_flash-icon_1q84n_1xr85_133",
+  "entering": "awsui_entering_1q84n_1xr85_146",
+  "entered": "awsui_entered_1q84n_1xr85_167",
+  "exiting": "awsui_exiting_1q84n_1xr85_272",
+  "stack": "awsui_stack_1q84n_1xr85_294",
+  "animation-running": "awsui_animation-running_1q84n_1xr85_294",
+  "item": "awsui_item_1q84n_1xr85_294",
+  "flash-list-item": "awsui_flash-list-item_1q84n_1xr85_295",
+  "notification-bar": "awsui_notification-bar_1q84n_1xr85_296",
+  "collapsed": "awsui_collapsed_1q84n_1xr85_316",
+  "animation-ready": "awsui_animation-ready_1q84n_1xr85_316",
+  "expanded-only": "awsui_expanded-only_1q84n_1xr85_316",
+  "expanded": "awsui_expanded_1q84n_1xr85_316",
+  "flash": "awsui_flash_1q84n_1xr85_93",
+  "collapsible": "awsui_collapsible_1q84n_1xr85_380",
+  "short-list": "awsui_short-list_1q84n_1xr85_386",
+  "visual-refresh": "awsui_visual-refresh_1q84n_1xr85_386",
+  "status": "awsui_status_1q84n_1xr85_603",
+  "header": "awsui_header_1q84n_1xr85_603",
+  "item-count": "awsui_item-count_1q84n_1xr85_604",
+  "button": "awsui_button_1q84n_1xr85_605",
+  "type-count": "awsui_type-count_1q84n_1xr85_640",
+  "count-number": "awsui_count-number_1q84n_1xr85_640",
+  "icon": "awsui_icon_1q84n_1xr85_674",
+  "floating": "awsui_floating_1q84n_1xr85_712",
+  "flashbar": "awsui_flashbar_1q84n_1xr85_720",
+  "flash-refresh": "awsui_flash-refresh_1q84n_1xr85_766",
+  "flash-list": "awsui_flash-list_1q84n_1xr85_295",
+  "flash-focus-container": "awsui_flash-focus-container_1q84n_1xr85_785",
+  "flash-text": "awsui_flash-text_1q84n_1xr85_812",
+  "dismiss-button": "awsui_dismiss-button_1q84n_1xr85_110",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_1xr85_853",
+  "action-button": "awsui_action-button_1q84n_1xr85_109",
+  "action-slot": "awsui_action-slot_1q84n_1xr85_863",
+  "flash-type-success": "awsui_flash-type-success_1q84n_1xr85_867",
+  "flash-type-error": "awsui_flash-type-error_1q84n_1xr85_871",
+  "flash-type-info": "awsui_flash-type-info_1q84n_1xr85_875",
+  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_1xr85_876",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_1xr85_880"
 };

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

@@ -1,14 +1,14 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1i0s3_gkyu7_93",
-  "header": "awsui_header_1i0s3_gkyu7_106",
-  "full-page": "awsui_full-page_1i0s3_gkyu7_106",
-  "content": "awsui_content_1i0s3_gkyu7_110",
-  "error": "awsui_error_1i0s3_gkyu7_114",
-  "footer": "awsui_footer_1i0s3_gkyu7_118",
-  "actions-section": "awsui_actions-section_1i0s3_gkyu7_122",
-  "secondary-actions": "awsui_secondary-actions_1i0s3_gkyu7_131",
-  "actions": "awsui_actions_1i0s3_gkyu7_122"
+  "root": "awsui_root_1i0s3_1qzv4_93",
+  "header": "awsui_header_1i0s3_1qzv4_106",
+  "full-page": "awsui_full-page_1i0s3_1qzv4_106",
+  "content": "awsui_content_1i0s3_1qzv4_110",
+  "error": "awsui_error_1i0s3_1qzv4_114",
+  "footer": "awsui_footer_1i0s3_1qzv4_118",
+  "actions-section": "awsui_actions-section_1i0s3_1qzv4_122",
+  "secondary-actions": "awsui_secondary-actions_1i0s3_1qzv4_131",
+  "actions": "awsui_actions_1i0s3_1qzv4_122"
 };

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

@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1i0s3_gkyu7_93:not(#\9) {
+.awsui_root_1i0s3_1qzv4_93:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -120,48 +120,48 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   widows: 2;
   word-spacing: normal;
   box-sizing: border-box;
-  font-size: var(--font-body-m-size-q2y4dq, 14px);
-  line-height: var(--font-body-m-line-height-7pedlt, 22px);
-  color: var(--color-text-body-default-rcjsde, #16191f);
+  font-size: var(--font-body-m-size-bf8hby, 14px);
+  line-height: var(--font-body-m-line-height-wmg6vk, 22px);
+  color: var(--color-text-body-default-ki9w9u, #16191f);
   font-weight: 400;
-  font-family: var(--font-family-base-8fp8i6, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-family: var(--font-family-base-0nmw8v, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_header_1i0s3_gkyu7_106:not(#\9):not(.awsui_full-page_1i0s3_gkyu7_106) {
-  margin-bottom: var(--space-scaled-m-wu03sm, 16px);
+.awsui_header_1i0s3_1qzv4_106:not(#\9):not(.awsui_full-page_1i0s3_1qzv4_106) {
+  margin-bottom: var(--space-scaled-m-er48cl, 16px);
 }
-.awsui_content_1i0s3_gkyu7_110:not(#\9) {
+.awsui_content_1i0s3_1qzv4_110:not(#\9) {
   /* used in test-utils */
 }
-.awsui_error_1i0s3_gkyu7_114:not(#\9) {
+.awsui_error_1i0s3_1qzv4_114:not(#\9) {
   /* used in test-utils */
 }
-.awsui_footer_1i0s3_gkyu7_118:not(#\9) {
-  margin-top: var(--space-scaled-l-udxpzh, 20px);
+.awsui_footer_1i0s3_1qzv4_118:not(#\9) {
+  margin-top: var(--space-scaled-l-08jb88, 20px);
 }
-.awsui_actions-section_1i0s3_gkyu7_122:not(#\9) {
+.awsui_actions-section_1i0s3_1qzv4_122:not(#\9) {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   flex-wrap: wrap;
-  margin-left: calc(-1 * var(--space-scaled-m-wu03sm, 16px));
-  margin-bottom: calc(-1 * var(--space-scaled-m-wu03sm, 16px));
+  margin-left: calc(-1 * var(--space-scaled-m-er48cl, 16px));
+  margin-bottom: calc(-1 * var(--space-scaled-m-er48cl, 16px));
 }
-.awsui_secondary-actions_1i0s3_gkyu7_131:not(#\9) {
+.awsui_secondary-actions_1i0s3_1qzv4_131:not(#\9) {
   min-width: 1px;
-  margin-left: var(--space-scaled-m-wu03sm, 16px);
-  margin-bottom: var(--space-scaled-m-wu03sm, 16px);
+  margin-left: var(--space-scaled-m-er48cl, 16px);
+  margin-bottom: var(--space-scaled-m-er48cl, 16px);
 }
-.awsui_actions_1i0s3_gkyu7_122:not(#\9) {
+.awsui_actions_1i0s3_1qzv4_122:not(#\9) {
   min-width: 1px;
-  margin-left: var(--space-scaled-m-wu03sm, 16px);
-  margin-bottom: var(--space-scaled-m-wu03sm, 16px);
+  margin-left: var(--space-scaled-m-er48cl, 16px);
+  margin-bottom: var(--space-scaled-m-er48cl, 16px);
 }

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

@@ -2,14 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1i0s3_gkyu7_93",
-  "header": "awsui_header_1i0s3_gkyu7_106",
-  "full-page": "awsui_full-page_1i0s3_gkyu7_106",
-  "content": "awsui_content_1i0s3_gkyu7_110",
-  "error": "awsui_error_1i0s3_gkyu7_114",
-  "footer": "awsui_footer_1i0s3_gkyu7_118",
-  "actions-section": "awsui_actions-section_1i0s3_gkyu7_122",
-  "secondary-actions": "awsui_secondary-actions_1i0s3_gkyu7_131",
-  "actions": "awsui_actions_1i0s3_gkyu7_122"
+  "root": "awsui_root_1i0s3_1qzv4_93",
+  "header": "awsui_header_1i0s3_1qzv4_106",
+  "full-page": "awsui_full-page_1i0s3_1qzv4_106",
+  "content": "awsui_content_1i0s3_1qzv4_110",
+  "error": "awsui_error_1i0s3_1qzv4_114",
+  "footer": "awsui_footer_1i0s3_1qzv4_118",
+  "actions-section": "awsui_actions-section_1i0s3_1qzv4_122",
+  "secondary-actions": "awsui_secondary-actions_1i0s3_1qzv4_131",
+  "actions": "awsui_actions_1i0s3_1qzv4_122"
 };

package/lib/internal/template/form-field/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAetD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,~~eA2HxB~~"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAetD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eAgIxB"}

package/lib/internal/template/form-field/internal.js CHANGED Viewed

@@ -52,22 +52,27 @@ export default function InternalFormField(_a) {
         [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,
     };
     useEffect(() => {
+        var _a, _b, _c;
         if (funnelInteractionId && errorText && funnelState.current !== 'complete') {
             const stepName = getNameFromSelector(stepNameSelector);
             const subStepName = getNameFromSelector(subStepNameSelector);
             errorCount.current++;
-            FunnelMetrics.funnelSubStepError({
-                funnelInteractionId,
-                subStepSelector,
-                subStepName,
-                subStepNameSelector,
-                stepNumber,
-                stepName,
-                stepNameSelector,
-                fieldErrorSelector: getFieldSlotSeletor(slotIds.error),
-                fieldLabelSelector: getFieldSlotSeletor(slotIds.label),
-                subStepAllSelector: getSubStepAllSelector(),
-            });
+            // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.
+            const errorIsVisible = ((_c = (_b = (_a = __internalRootRef === null || __internalRootRef === void 0 ? void 0 : __internalRootRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0) > 0;
+            if (errorIsVisible) {
+                FunnelMetrics.funnelSubStepError({
+                    funnelInteractionId,
+                    subStepSelector,
+                    subStepName,
+                    subStepNameSelector,
+                    stepNumber,
+                    stepName,
+                    stepNameSelector,
+                    fieldErrorSelector: getFieldSlotSeletor(slotIds.error),
+                    fieldLabelSelector: getFieldSlotSeletor(slotIds.label),
+                    subStepAllSelector: getSubStepAllSelector(),
+                });
+            }
             return () => {
                 // eslint-disable-next-line react-hooks/exhaustive-deps
                 errorCount.current--;

package/lib/internal/template/form-field/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form-field/internal.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, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n\n return (\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div\n role=\"img\"\n aria-label={i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel)}\n className={styles['error-icon-scale-wrapper']}\n >\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message}>{children}</span>\n </div>\n );\n}\n\nexport function ConstraintText({\n id,\n hasError,\n children,\n}: {\n id?: string;\n hasError: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId \|\| instanceUniqueId;\n const formFieldId = controlId \|\| generatedControlId;\n\n const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) \|\| undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) \|\| undefined,\n invalid: !!errorText \|\| !!parentInvalid,\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n stepNumber,\n stepName,\n stepNameSelector,\n fieldErrorSelector: getFieldSlotSeletor(slotIds.error),\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n });\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n >\n <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText \|\| errorText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form-field/internal.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, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n\n return (\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div\n role=\"img\"\n aria-label={i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel)}\n className={styles['error-icon-scale-wrapper']}\n >\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message}>{children}</span>\n </div>\n );\n}\n\nexport function ConstraintText({\n id,\n hasError,\n children,\n}: {\n id?: string;\n hasError: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId \|\| instanceUniqueId;\n const formFieldId = controlId \|\| generatedControlId;\n\n const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) \|\| undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) \|\| undefined,\n invalid: !!errorText \|\| !!parentInvalid,\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n stepNumber,\n stepName,\n stepNameSelector,\n fieldErrorSelector: getFieldSlotSeletor(slotIds.error),\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n >\n <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText \|\| errorText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}

package/lib/internal/template/form-field/styles.css.js CHANGED Viewed

@@ -1,24 +1,24 @@
     import './styles.scoped.css';
     export default {
-  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_8wyo8_97",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_8wyo8_1",
-  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_8wyo8_124",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_8wyo8_1",
-  "error": "awsui_error_14mhv_8wyo8_97",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_8wyo8_1",
-  "root": "awsui_root_14mhv_8wyo8_168",
-  "label": "awsui_label_14mhv_8wyo8_182",
-  "info": "awsui_info_14mhv_8wyo8_195",
-  "description": "awsui_description_14mhv_8wyo8_200",
-  "constraint": "awsui_constraint_14mhv_8wyo8_201",
-  "hints": "awsui_hints_14mhv_8wyo8_208",
-  "constraint-has-error": "awsui_constraint-has-error_14mhv_8wyo8_209",
-  "secondary-control": "awsui_secondary-control_14mhv_8wyo8_213",
-  "controls": "awsui_controls_14mhv_8wyo8_217",
-  "label-hidden": "awsui_label-hidden_14mhv_8wyo8_217",
-  "control": "awsui_control_14mhv_8wyo8_217",
-  "error__message": "awsui_error__message_14mhv_8wyo8_236",
-  "visually-hidden": "awsui_visually-hidden_14mhv_8wyo8_240"
+  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_luq97_97",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_luq97_1",
+  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_luq97_124",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_luq97_1",
+  "error": "awsui_error_14mhv_luq97_97",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_luq97_1",
+  "root": "awsui_root_14mhv_luq97_168",
+  "label": "awsui_label_14mhv_luq97_182",
+  "info": "awsui_info_14mhv_luq97_195",
+  "description": "awsui_description_14mhv_luq97_200",
+  "constraint": "awsui_constraint_14mhv_luq97_201",
+  "hints": "awsui_hints_14mhv_luq97_208",
+  "constraint-has-error": "awsui_constraint-has-error_14mhv_luq97_209",
+  "secondary-control": "awsui_secondary-control_14mhv_luq97_213",
+  "controls": "awsui_controls_14mhv_luq97_217",
+  "label-hidden": "awsui_label-hidden_14mhv_luq97_217",
+  "control": "awsui_control_14mhv_luq97_217",
+  "error__message": "awsui_error__message_14mhv_luq97_236",
+  "visually-hidden": "awsui_visually-hidden_14mhv_luq97_240"
 };

package/lib/internal/template/form-field/styles.scoped.css CHANGED Viewed

@@ -94,37 +94,37 @@ 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_8wyo8_97:not(#\9) {
-  animation: awsui_awsui-motion-shake-horizontally_14mhv_8wyo8_1 var(--motion-duration-refresh-only-medium-1aoout, 165ms);
+.awsui_error-icon-shake-wrapper_14mhv_luq97_97:not(#\9) {
+  animation: awsui_awsui-motion-shake-horizontally_14mhv_luq97_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms);
 }
-@keyframes awsui_awsui-motion-shake-horizontally_14mhv_8wyo8_1 {
+@keyframes awsui_awsui-motion-shake-horizontally_14mhv_luq97_1 {
   0% {
     transform: translateX(-5px);
     animation-timing-function: linear;
   }
   50% {
     transform: translateX(5px);
-    animation-timing-function: var(--motion-easing-refresh-only-a-mwff9u, cubic-bezier(0, 0, 0, 1));
+    animation-timing-function: var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
   }
   100% {
     transform: translateX(0px);
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error-icon-shake-wrapper_14mhv_8wyo8_97:not(#\9) {
+  .awsui_error-icon-shake-wrapper_14mhv_luq97_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_8wyo8_97:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_8wyo8_97:not(#\9) {
+.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_luq97_97:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_luq97_97:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_error-icon-scale-wrapper_14mhv_8wyo8_124:not(#\9) {
-  animation: awsui_awsui-motion-scale-popup_14mhv_8wyo8_1 var(--motion-duration-refresh-only-medium-1aoout, 165ms) var(--motion-easing-refresh-only-a-mwff9u, cubic-bezier(0, 0, 0, 1));
+.awsui_error-icon-scale-wrapper_14mhv_luq97_124:not(#\9) {
+  animation: awsui_awsui-motion-scale-popup_14mhv_luq97_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms) var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-scale-popup_14mhv_8wyo8_1 {
+@keyframes awsui_awsui-motion-scale-popup_14mhv_luq97_1 {
   0% {
     transform: scale(0.95);
   }
@@ -133,20 +133,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error-icon-scale-wrapper_14mhv_8wyo8_124:not(#\9) {
+  .awsui_error-icon-scale-wrapper_14mhv_luq97_124:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_8wyo8_124:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_8wyo8_124:not(#\9) {
+.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_luq97_124:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_luq97_124:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_error_14mhv_8wyo8_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_14mhv_8wyo8_1 var(--motion-duration-refresh-only-medium-1aoout, 165ms) var(--motion-easing-refresh-only-a-mwff9u, cubic-bezier(0, 0, 0, 1));
+.awsui_error_14mhv_luq97_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_14mhv_luq97_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms) var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-fade-in-0_14mhv_8wyo8_1 {
+@keyframes awsui_awsui-motion-fade-in-0_14mhv_luq97_1 {
   from {
     opacity: 0;
   }
@@ -155,17 +155,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error_14mhv_8wyo8_97:not(#\9) {
+  .awsui_error_14mhv_luq97_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error_14mhv_8wyo8_97:not(#\9), .awsui-mode-entering .awsui_error_14mhv_8wyo8_97:not(#\9) {
+.awsui-motion-disabled .awsui_error_14mhv_luq97_97:not(#\9), .awsui-mode-entering .awsui_error_14mhv_luq97_97:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_14mhv_8wyo8_168:not(#\9) {
+.awsui_root_14mhv_luq97_168:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -195,75 +195,75 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   widows: 2;
   word-spacing: normal;
   box-sizing: border-box;
-  font-size: var(--font-body-m-size-q2y4dq, 14px);
-  line-height: var(--font-body-m-line-height-7pedlt, 22px);
-  color: var(--color-text-body-default-rcjsde, #16191f);
+  font-size: var(--font-body-m-size-bf8hby, 14px);
+  line-height: var(--font-body-m-line-height-wmg6vk, 22px);
+  color: var(--color-text-body-default-ki9w9u, #16191f);
   font-weight: 400;
-  font-family: var(--font-family-base-8fp8i6, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-family: var(--font-family-base-0nmw8v, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   box-sizing: border-box;
 }
-.awsui_label_14mhv_8wyo8_182:not(#\9) {
+.awsui_label_14mhv_luq97_182:not(#\9) {
   box-sizing: border-box;
-  color: var(--color-text-form-label-7t5oii, #16191f);
+  color: var(--color-text-form-label-3ubxwt, #16191f);
   display: inline;
-  font-size: var(--font-body-m-size-q2y4dq, 14px);
-  line-height: var(--font-body-m-line-height-7pedlt, 22px);
-  font-weight: var(--font-display-label-weight-hvrmv6, 400);
-  margin-right: var(--space-xs-e7dyai, 8px);
+  font-size: var(--font-body-m-size-bf8hby, 14px);
+  line-height: var(--font-body-m-line-height-wmg6vk, 22px);
+  font-weight: var(--font-display-label-weight-2njs7q, 400);
+  margin-right: var(--space-xs-xf5ch3, 8px);
 }
-.awsui_label_14mhv_8wyo8_182:not(#\9):only-child {
+.awsui_label_14mhv_luq97_182:not(#\9):only-child {
   margin: 0;
 }
-.awsui_info_14mhv_8wyo8_195:not(#\9) {
-  padding-left: var(--space-xs-e7dyai, 8px);
-  border-left: var(--border-divider-section-width-uu4597, 1px) solid var(--color-border-divider-default-z9h069, #eaeded);
+.awsui_info_14mhv_luq97_195:not(#\9) {
+  padding-left: var(--space-xs-xf5ch3, 8px);
+  border-left: var(--border-divider-section-width-4ozgf3, 1px) solid var(--color-border-divider-default-cr3oi6, #eaeded);
 }
-.awsui_description_14mhv_8wyo8_200:not(#\9),
-.awsui_constraint_14mhv_8wyo8_201:not(#\9) {
-  color: var(--color-text-form-secondary-44s9zq, #687078);
-  font-size: var(--font-body-s-size-wofdyf, 12px);
-  line-height: var(--font-body-s-line-height-hkht1z, 16px);
-  letter-spacing: var(--font-body-s-letter-spacing-bkw1uw, normal);
+.awsui_description_14mhv_luq97_200:not(#\9),
+.awsui_constraint_14mhv_luq97_201:not(#\9) {
+  color: var(--color-text-form-secondary-rh78tu, #687078);
+  font-size: var(--font-body-s-size-uzxiqw, 12px);
+  line-height: var(--font-body-s-line-height-4nqsqf, 16px);
+  letter-spacing: var(--font-body-s-letter-spacing-nop1yq, normal);
 }
-.awsui_hints_14mhv_8wyo8_208:not(#\9),
-.awsui_constraint-has-error_14mhv_8wyo8_209:not(#\9) {
-  padding-top: var(--space-xxs-1wmjb0, 4px);
+.awsui_hints_14mhv_luq97_208:not(#\9),
+.awsui_constraint-has-error_14mhv_luq97_209:not(#\9) {
+  padding-top: var(--space-xxs-9rrxti, 4px);
 }
-.awsui_secondary-control_14mhv_8wyo8_213:not(#\9) {
+.awsui_secondary-control_14mhv_luq97_213:not(#\9) {
   /* used in test-utils */
 }
-.awsui_controls_14mhv_8wyo8_217:not(#\9):not(.awsui_label-hidden_14mhv_8wyo8_217) {
-  padding-top: var(--space-xxs-1wmjb0, 4px);
+.awsui_controls_14mhv_luq97_217:not(#\9):not(.awsui_label-hidden_14mhv_luq97_217) {
+  padding-top: var(--space-xxs-9rrxti, 4px);
 }
-.awsui_control_14mhv_8wyo8_217:not(#\9) {
+.awsui_control_14mhv_luq97_217:not(#\9) {
   min-width: 0;
   -ms-word-break: break-all;
   word-break: break-word;
 }
-.awsui_error_14mhv_8wyo8_97:not(#\9) {
-  color: var(--color-text-status-error-6k1sfe, #d13212);
-  font-size: var(--font-body-s-size-wofdyf, 12px);
-  line-height: var(--font-body-s-line-height-hkht1z, 16px);
-  letter-spacing: var(--font-body-s-letter-spacing-bkw1uw, normal);
+.awsui_error_14mhv_luq97_97:not(#\9) {
+  color: var(--color-text-status-error-ofc4yr, #d13212);
+  font-size: var(--font-body-s-size-uzxiqw, 12px);
+  line-height: var(--font-body-s-line-height-4nqsqf, 16px);
+  letter-spacing: var(--font-body-s-letter-spacing-nop1yq, normal);
   display: flex;
   align-items: flex-start;
 }
-.awsui_error__message_14mhv_8wyo8_236:not(#\9) {
-  margin-left: var(--space-xxs-1wmjb0, 4px);
+.awsui_error__message_14mhv_luq97_236:not(#\9) {
+  margin-left: var(--space-xxs-9rrxti, 4px);
 }
-.awsui_visually-hidden_14mhv_8wyo8_240:not(#\9) {
+.awsui_visually-hidden_14mhv_luq97_240:not(#\9) {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;