@cloudscape-design/components 3.0.22 → 3.0.25

package/internal/components/dark-ribbon/styles.scoped.css

@@ -7,7 +7,6 @@
  SPDX-License-Identifier: Apache-2.0
 */
 .awsui_background-fill_1fi2u_1fyw7_9:not(#\9) {
-  background-color: #ffffff;
   background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
   position: absolute;
 }

package/internal/components/dropdown/styles.scoped.css

@@ -91,7 +91,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  SPDX-License-Identifier: Apache-2.0
 */
 .awsui_dropdown-content-wrapper_qwoo0_1aum0_93:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-dropdown_qwoo0_1aum0_1 135ms ease-out;
   animation: awsui_awsui-motion-fade-in-dropdown_qwoo0_1aum0_1 var(--motion-duration-show-quick-tyaalm, 135ms) var(--motion-easing-show-quick-1fcgbv, ease-out);
 }
 @keyframes awsui_awsui-motion-fade-in-dropdown_qwoo0_1aum0_1 {
@@ -115,9 +114,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 .awsui_dropdown-content-wrapper_qwoo0_1aum0_93.awsui_refresh_qwoo0_1aum0_114:not(#\9) {
   transform-origin: top;
   animation-name: awsui_awsui-motion-fade-in-0_qwoo0_1aum0_1;
-  animation-duration: 135ms;
   animation-duration: var(--motion-duration-show-quick-tyaalm, 135ms);
-  animation-timing-function: ease-out;
   animation-timing-function: var(--motion-easing-show-quick-1fcgbv, ease-out);
 }
 @keyframes awsui_awsui-motion-fade-in-0_qwoo0_1aum0_1 {
@@ -173,14 +170,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   widows: 2;
   word-spacing: normal;
   box-sizing: border-box;
-  font-size: 14px;
   font-size: var(--font-body-m-size-sregvd, 14px);
-  line-height: 22px;
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
-  color: #000716;
   color: var(--color-text-body-default-ajf1h5, #000716);
   font-weight: 400;
-  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
   font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   position: relative;
   white-space: inherit;
@@ -202,7 +195,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 .awsui_dropdown_qwoo0_1aum0_93:not(#\9):not(.awsui_interior_qwoo0_1aum0_155) {
   transform: translateY(0px);
-  transition: transform 135ms;
   transition: transform var(--motion-duration-show-quick-tyaalm, 135ms);
 }
 @media (prefers-reduced-motion: reduce) {
@@ -217,14 +209,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 .awsui_dropdown-content-wrapper_qwoo0_1aum0_93:not(#\9) {
   position: relative;
-  background-color: #ffffff;
   background-color: var(--color-background-dropdown-item-default-fzdqsg, #ffffff);
   outline: none;
-  box-shadow: 0px 4px 20px 1px rgba(0, 7, 22, 0.1);
   box-shadow: var(--shadow-dropdown-99h0gz, 0px 4px 20px 1px rgba(0, 7, 22, 0.1));
-  border-radius: 8px;
   border-radius: var(--border-radius-dropdown-ujknaf, 8px);
-  border-top: 1px solid transparent;
   border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-container-top-srcvx4, transparent);
   box-sizing: border-box;
   border-bottom: none;
@@ -238,21 +226,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   bottom: 0px;
   right: 0px;
   background-color: transparent;
-  border: 2px solid #9ba7b6;
   border: var(--border-field-width-idlekx, 2px) solid var(--color-border-dropdown-container-tyn0js, #9ba7b6);
-  border-radius: 8px;
   border-radius: var(--border-radius-dropdown-ujknaf, 8px);
   pointer-events: none;
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .awsui_dropdown-content-wrapper_qwoo0_1aum0_93:not(#\9) {
-    border: 2px solid transparent;
     border: var(--border-field-width-idlekx, 2px) solid var(--color-border-container-top-srcvx4, transparent);
   }
 }
 .awsui_dropdown-drop-up_qwoo0_1aum0_211 > .awsui_dropdown-content-wrapper_qwoo0_1aum0_93:not(#\9) {
   transform-origin: bottom;
-  box-shadow: 0px 4px 20px 1px rgba(0, 7, 22, 0.1);
   box-shadow: var(--shadow-dropup-11esug, 0px 4px 20px 1px rgba(0, 7, 22, 0.1));
 }
 .awsui_dropdown-drop-up_qwoo0_1aum0_211.awsui_with-limited-width_qwoo0_1aum0_215 > .awsui_dropdown-content-wrapper_qwoo0_1aum0_93:not(#\9) {
@@ -272,7 +256,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 .awsui_dropdown_qwoo0_1aum0_93.awsui_interior_qwoo0_1aum0_155 > .awsui_dropdown-content-wrapper_qwoo0_1aum0_93:not(#\9) {
   margin-top: -1px;
-  border-top: 1px solid transparent;
   border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-container-top-srcvx4, transparent);
 }
 .awsui_dropdown_qwoo0_1aum0_93.awsui_open_qwoo0_1aum0_234:not(#\9) {

package/internal/components/dropdown-footer/styles.scoped.css

@@ -120,21 +120,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   widows: 2;
   word-spacing: normal;
   box-sizing: border-box;
-  font-size: 14px;
   font-size: var(--font-body-m-size-sregvd, 14px);
-  line-height: 22px;
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
-  color: #000716;
   color: var(--color-text-body-default-ajf1h5, #000716);
   font-weight: 400;
-  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
   font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
 }
 .awsui_root_1afi9_19bf4_93:not(#\9):not(.awsui_hidden_1afi9_19bf4_103) {
-  border-top: 1px solid #e9ebed;
   border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-dropdown-item-default-faosd8, #e9ebed);
 }
 .awsui_root_1afi9_19bf4_93:not(#\9):not(.awsui_hidden_1afi9_19bf4_103).awsui_no-items_1afi9_19bf4_106 {
-  border-top: 1px solid transparent;
   border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-dropdown-item-top-xnzq48, transparent);
 }

package/internal/components/dropdown-status/styles.scoped.css

@@ -120,18 +120,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   widows: 2;
   word-spacing: normal;
   box-sizing: border-box;
-  font-size: 14px;
   font-size: var(--font-body-m-size-sregvd, 14px);
-  line-height: 22px;
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
-  color: #000716;
   color: var(--color-text-body-default-ajf1h5, #000716);
   font-weight: 400;
-  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
   font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
-  padding: 4px 12px calc(4px + 2px);
   padding: var(--space-xxs-ynfts5, 4px) var(--space-field-horizontal-89h2yr, 12px) calc(var(--space-xxs-ynfts5, 4px) + var(--space-xxxs-k2w98v, 2px));
-  color: #5f6b7a;
   color: var(--color-text-dropdown-footer-rj6jvf, #5f6b7a);
 }
 .awsui_root_vrgzu_1obpu_93 > .awsui_recovery_vrgzu_1obpu_105:not(#\9) {

package/internal/components/filtering-token/styles.scoped.css

@@ -100,15 +100,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 .awsui_token_10m3l_anb0r_102:not(#\9) {
-  border: 2px solid #0972d3;
   border: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
   display: flex;
   align-items: stretch;
-  background: #f2f8fd;
   background: var(--color-background-item-selected-ebt4bi, #f2f8fd);
-  border-radius: 8px;
   border-radius: var(--border-radius-token-wohc9e, 8px);
-  color: #000716;
   color: var(--color-text-body-default-ajf1h5, #000716);
   height: 100%;
   box-sizing: border-box;
@@ -125,7 +121,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 .awsui_token-content_10m3l_anb0r_123:not(#\9) {
-  padding: 4px 12px;
   padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-field-horizontal-89h2yr, 12px);
 }
 
@@ -133,12 +128,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   width: 30px;
   margin: 0;
   border: none;
-  padding: 0 4px;
   padding: 0 var(--space-xxs-ynfts5, 4px);
-  color: #414d5c;
   color: var(--color-text-interactive-default-eg5fsa, #414d5c);
   background-color: transparent;
-  border-left: 2px solid #0972d3;
   border-left: var(--border-field-width-idlekx, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
 }
 .awsui_dismiss-button_10m3l_anb0r_127[data-awsui-focus-visible=true]:not(#\9):focus {
@@ -146,24 +138,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 .awsui_dismiss-button_10m3l_anb0r_127[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
-  outline-offset: calc(-5px - 1px);
   outline-offset: calc(var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px) - 1px);
 }
 .awsui_dismiss-button_10m3l_anb0r_127[data-awsui-focus-visible=true]:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
-  left: calc(-1 * -5px);
   left: calc(-1 * var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px));
-  top: calc(-1 * -5px);
   top: calc(-1 * var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px));
-  width: calc(100% + 2 * -5px);
   width: calc(100% + 2 * var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px));
-  height: calc(100% + 2 * -5px);
   height: calc(100% + 2 * var(--space-filtering-token-dismiss-button-focus-outline-gutter-itb5fd, -5px));
-  border-radius: 4px;
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
-  box-shadow: 0 0 0 2px #0972d3;
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 .awsui_dismiss-button_10m3l_anb0r_127:not(#\9):focus {
@@ -172,22 +157,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 .awsui_dismiss-button_10m3l_anb0r_127:not(#\9):hover {
   cursor: pointer;
-  color: #000716;
   color: var(--color-text-interactive-hover-v3lasm, #000716);
 }
 
 .awsui_token-disabled_10m3l_anb0r_163:not(#\9) {
-  border-color: #d1d5db;
   border-color: var(--color-border-control-disabled-vx8bco, #d1d5db);
-  background-color: #ffffff;
   background-color: var(--color-background-container-content-i8i4a0, #ffffff);
-  color: #9ba7b6;
   color: var(--color-text-disabled-a2nkh4, #9ba7b6);
   pointer-events: none;
 }
 .awsui_token-disabled_10m3l_anb0r_163 > .awsui_dismiss-button_10m3l_anb0r_127:not(#\9) {
-  color: #9ba7b6;
   color: var(--color-text-interactive-disabled-3pbb07, #9ba7b6);
-  border-color: #d1d5db;
   border-color: var(--color-border-control-disabled-vx8bco, #d1d5db);
 }

package/internal/components/menu-dropdown/styles.scoped.css

@@ -120,14 +120,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   widows: 2;
   word-spacing: normal;
   box-sizing: border-box;
-  font-size: 14px;
   font-size: var(--font-body-m-size-sregvd, 14px);
-  line-height: 22px;
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
-  color: #000716;
   color: var(--color-text-body-default-ajf1h5, #000716);
   font-weight: 400;
-  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
   font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   min-width: 0;
   -ms-word-break: break-all;
@@ -137,31 +133,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: center;
   white-space: nowrap;
   height: 100%;
-  padding-left: 8px;
   padding-left: var(--space-xs-rsr2qu, 8px);
-  padding-right: 8px;
   padding-right: var(--space-xs-rsr2qu, 8px);
   text-decoration: none;
   cursor: pointer;
   border: transparent;
   background: transparent;
-  font-weight: 800;
   font-weight: var(--font-button-weight-7rj5fx, 800);
-  color: #414d5c;
   color: var(--color-text-interactive-default-eg5fsa, #414d5c);
 }
 .awsui_button_m5h9f_vm2i5_93:not(#\9):hover {
-  color: #000716;
   color: var(--color-text-interactive-hover-v3lasm, #000716);
   text-decoration: none;
 }
 .awsui_button_m5h9f_vm2i5_93:not(#\9):active, .awsui_button_m5h9f_vm2i5_93.awsui_expanded_m5h9f_vm2i5_123:not(#\9) {
   background: transparent;
-  color: #000716;
   color: var(--color-text-interactive-active-vol84d, #000716);
 }
 .awsui_button_m5h9f_vm2i5_93.awsui_expanded_m5h9f_vm2i5_123:not(#\9) {
-  color: #0972d3;
   color: var(--color-text-accent-s1eqko, #0972d3);
 }
 .awsui_button_m5h9f_vm2i5_93:not(#\9):focus {
@@ -172,11 +161,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-right: 0;
 }
 .awsui_button_m5h9f_vm2i5_93.awsui_offset-right-l_m5h9f_vm2i5_137:not(#\9) {
-  margin-right: 12px;
   margin-right: var(--space-s-hv8c1d, 12px);
 }
 .awsui_button_m5h9f_vm2i5_93.awsui_offset-right-xxl_m5h9f_vm2i5_140:not(#\9) {
-  margin-right: 24px;
   margin-right: var(--space-xl-a39hup, 24px);
 }
 .awsui_button_m5h9f_vm2i5_93[data-awsui-focus-visible=true]:not(#\9):focus {
@@ -194,18 +181,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   top: calc(-1 * -1px);
   width: calc(100% + 2 * -1px);
   height: calc(100% + 2 * -1px);
-  border-radius: 4px;
   border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
-  box-shadow: 0 0 0 2px #0972d3;
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 
 .awsui_text_m5h9f_vm2i5_162:not(#\9) {
-  margin-right: 8px;
   margin-right: var(--space-xs-rsr2qu, 8px);
 }
 
 .awsui_icon_m5h9f_vm2i5_166 + .awsui_text_m5h9f_vm2i5_162:not(#\9) {
-  margin-left: 8px;
   margin-left: var(--space-xs-rsr2qu, 8px);
 }

package/internal/components/option/index.js

@@ -34,10 +34,10 @@ var Option = function (_a) {
     }
     var className = clsx(styles.option, disabled && styles.disabled, isGroupOption && styles.parent);
     var icon = option.__customIcon || (React.createElement(OptionIcon, { name: option.iconName, url: option.iconUrl, svg: option.iconSvg, alt: option.iconAlt, size: option.description || option.tags ? 'big' : 'normal' }));
-    return (React.createElement("div", __assign({ title: option.label || option.value, "data-value": option.value, className: className, "aria-disabled": disabled }, baseProps),
+    return (React.createElement("span", __assign({ title: option.label || option.value, "data-value": option.value, className: className, "aria-disabled": disabled }, baseProps),
         icon,
-        React.createElement("div", { className: clsx(styles.content) },
-            React.createElement("div", { className: clsx(styles['label-content']) },
+        React.createElement("span", { className: clsx(styles.content) },
+            React.createElement("span", { className: clsx(styles['label-content']) },
                 React.createElement(Label, { label: option.label || option.value, prefix: option.__labelPrefix, highlightText: highlightText, triggerVariant: triggerVariant }),
                 React.createElement(LabelTag, { labelTag: option.labelTag, highlightText: highlightText, triggerVariant: triggerVariant })),
             React.createElement(Description, { description: option.description, highlightText: highlightText, triggerVariant: triggerVariant }),

package/internal/components/option/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { OptionProps } from './interfaces';\nimport { Label, LabelTag, Description, Tags, FilteringTags, OptionIcon } from './option-parts';\nimport { getBaseProps } from '../../base-component';\nimport { warnOnce } from '../../logging';\nimport { isDevelopment } from '../../is-development';\n\nexport { OptionProps };\n\nfunction validateStringValue(value: string | undefined, propertyName: string) {\n  if (typeof value !== 'undefined' && typeof value !== 'string') {\n    warnOnce(\n      'DropdownOption',\n      `This component only supports string values, but \"option.${propertyName}\" has ${typeof value} type. The component may work incorrectly.`\n    );\n  }\n}\n\nconst Option = ({\n  option,\n  highlightText,\n  triggerVariant = false,\n  isGroupOption = false,\n  ...restProps\n}: OptionProps) => {\n  if (!option) {\n    return null;\n  }\n  const { disabled } = option;\n  const baseProps = getBaseProps(restProps);\n\n  if (isDevelopment) {\n    validateStringValue(option.label, 'label');\n    validateStringValue(option.description, 'description');\n    validateStringValue(option.labelTag, 'labelTag');\n    option.tags?.forEach((tag, index) => {\n      validateStringValue(tag, `tags[${index}]`);\n    });\n    option.filteringTags?.forEach((tag, index) => {\n      validateStringValue(tag, `filteringTags[${index}]`);\n    });\n  }\n\n  const className = clsx(styles.option, disabled && styles.disabled, isGroupOption && styles.parent);\n\n  const icon = option.__customIcon || (\n    <OptionIcon\n      name={option.iconName}\n      url={option.iconUrl}\n      svg={option.iconSvg}\n      alt={option.iconAlt}\n      size={option.description || option.tags ? 'big' : 'normal'}\n    />\n  );\n\n  return (\n    <div\n      title={option.label || option.value}\n      data-value={option.value}\n      className={className}\n      aria-disabled={disabled}\n      {...baseProps}\n    >\n      {icon}\n      <div className={clsx(styles.content)}>\n        <div className={clsx(styles['label-content'])}>\n          <Label\n            label={option.label || option.value}\n            prefix={option.__labelPrefix}\n            highlightText={highlightText}\n            triggerVariant={triggerVariant}\n          />\n          <LabelTag labelTag={option.labelTag} highlightText={highlightText} triggerVariant={triggerVariant} />\n        </div>\n        <Description description={option.description} highlightText={highlightText} triggerVariant={triggerVariant} />\n        <Tags tags={option.tags} highlightText={highlightText} triggerVariant={triggerVariant} />\n        <FilteringTags\n          filteringTags={option.filteringTags}\n          highlightText={highlightText}\n          triggerVariant={triggerVariant}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default Option;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { OptionProps } from './interfaces';\nimport { Label, LabelTag, Description, Tags, FilteringTags, OptionIcon } from './option-parts';\nimport { getBaseProps } from '../../base-component';\nimport { warnOnce } from '../../logging';\nimport { isDevelopment } from '../../is-development';\n\nexport { OptionProps };\n\nfunction validateStringValue(value: string | undefined, propertyName: string) {\n  if (typeof value !== 'undefined' && typeof value !== 'string') {\n    warnOnce(\n      'DropdownOption',\n      `This component only supports string values, but \"option.${propertyName}\" has ${typeof value} type. The component may work incorrectly.`\n    );\n  }\n}\n\nconst Option = ({\n  option,\n  highlightText,\n  triggerVariant = false,\n  isGroupOption = false,\n  ...restProps\n}: OptionProps) => {\n  if (!option) {\n    return null;\n  }\n  const { disabled } = option;\n  const baseProps = getBaseProps(restProps);\n\n  if (isDevelopment) {\n    validateStringValue(option.label, 'label');\n    validateStringValue(option.description, 'description');\n    validateStringValue(option.labelTag, 'labelTag');\n    option.tags?.forEach((tag, index) => {\n      validateStringValue(tag, `tags[${index}]`);\n    });\n    option.filteringTags?.forEach((tag, index) => {\n      validateStringValue(tag, `filteringTags[${index}]`);\n    });\n  }\n\n  const className = clsx(styles.option, disabled && styles.disabled, isGroupOption && styles.parent);\n\n  const icon = option.__customIcon || (\n    <OptionIcon\n      name={option.iconName}\n      url={option.iconUrl}\n      svg={option.iconSvg}\n      alt={option.iconAlt}\n      size={option.description || option.tags ? 'big' : 'normal'}\n    />\n  );\n\n  return (\n    <span\n      title={option.label || option.value}\n      data-value={option.value}\n      className={className}\n      aria-disabled={disabled}\n      {...baseProps}\n    >\n      {icon}\n      <span className={clsx(styles.content)}>\n        <span className={clsx(styles['label-content'])}>\n          <Label\n            label={option.label || option.value}\n            prefix={option.__labelPrefix}\n            highlightText={highlightText}\n            triggerVariant={triggerVariant}\n          />\n          <LabelTag labelTag={option.labelTag} highlightText={highlightText} triggerVariant={triggerVariant} />\n        </span>\n        <Description description={option.description} highlightText={highlightText} triggerVariant={triggerVariant} />\n        <Tags tags={option.tags} highlightText={highlightText} triggerVariant={triggerVariant} />\n        <FilteringTags\n          filteringTags={option.filteringTags}\n          highlightText={highlightText}\n          triggerVariant={triggerVariant}\n        />\n      </span>\n    </span>\n  );\n};\n\nexport default Option;\n"]}

package/internal/components/option/option-parts.js

@@ -24,12 +24,12 @@ export var Description = function (_a) {
     return description ? (
     // We do not reach AA compliance in Dark mode for highlighted state
     // TODO: Remove aria-disabled={true} when we fix AWSUI-10333
-    React.createElement("div", { className: clsx(styles.description, triggerVariant && styles['trigger-variant']), "aria-disabled": true },
+    React.createElement("span", { className: clsx(styles.description, triggerVariant && styles['trigger-variant']), "aria-disabled": true },
         React.createElement(HighlightMatch, { str: description, highlightText: highlightText }))) : null;
 };
 export var Tags = function (_a) {
     var tags = _a.tags, highlightText = _a.highlightText, triggerVariant = _a.triggerVariant;
-    return tags ? (React.createElement("div", { className: clsx(styles.tags) }, tags.map(function (tag, idx) { return (
+    return tags ? (React.createElement("span", { className: clsx(styles.tags) }, tags.map(function (tag, idx) { return (
     // We do not reach AA compliance in Dark mode for highlighted state
     // TODO: Remove aria-disabled={true} when we fix AWSUI-10333
     React.createElement("span", { key: idx, className: clsx(styles.tag, triggerVariant && styles['trigger-variant']), "aria-disabled": true },
@@ -41,7 +41,7 @@ export var FilteringTags = function (_a) {
         return null;
     }
     var searchElement = highlightText.toLowerCase();
-    return (React.createElement("div", { className: clsx(styles.tags) }, filteringTags.map(function (filteringTag, key) {
+    return (React.createElement("span", { className: clsx(styles.tags) }, filteringTags.map(function (filteringTag, key) {
         var match = filteringTag.toLowerCase().indexOf(searchElement) !== -1;
         if (match) {
             return (

package/internal/components/option/option-parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-parts.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/option-parts.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 styles from './styles.css.js';\nimport clsx from 'clsx';\nimport React from 'react';\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport HighlightMatch from './highlight-match';\n\ninterface LabelProps {\n  label?: string;\n  prefix?: string;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const Label = ({ label, prefix, highlightText, triggerVariant }: LabelProps) => (\n  <span className={clsx(styles.label, triggerVariant && styles['trigger-variant'])}>\n    {prefix && (\n      <span className={clsx(styles['label-prefix'], triggerVariant && styles['trigger-variant'])}>{prefix} </span>\n    )}\n    <HighlightMatch str={label} highlightText={highlightText} />\n  </span>\n);\n\ninterface LabelTagProps {\n  labelTag?: string;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const LabelTag = ({ labelTag, highlightText, triggerVariant }: LabelTagProps) =>\n  labelTag ? (\n    <span className={clsx(styles['label-tag'], triggerVariant && styles['trigger-variant'])}>\n      <HighlightMatch str={labelTag} highlightText={highlightText} />\n    </span>\n  ) : null;\n\ninterface DescriptionProps {\n  description?: string;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const Description = ({ description, highlightText, triggerVariant }: DescriptionProps) =>\n  description ? (\n    // We do not reach AA compliance in Dark mode for highlighted state\n    // TODO: Remove aria-disabled={true} when we fix AWSUI-10333\n    <div className={clsx(styles.description, triggerVariant && styles['trigger-variant'])} aria-disabled={true}>\n      <HighlightMatch str={description} highlightText={highlightText} />\n    </div>\n  ) : null;\n\ninterface TagsProps {\n  tags?: ReadonlyArray<string>;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const Tags = ({ tags, highlightText, triggerVariant }: TagsProps) =>\n  tags ? (\n    <div className={clsx(styles.tags)}>\n      {tags.map((tag, idx) => (\n        // We do not reach AA compliance in Dark mode for highlighted state\n        // TODO: Remove aria-disabled={true} when we fix AWSUI-10333\n        <span key={idx} className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])} aria-disabled={true}>\n          <HighlightMatch str={tag} highlightText={highlightText} />\n        </span>\n      ))}\n    </div>\n  ) : null;\n\ninterface FilteringTagProps {\n  filteringTags?: ReadonlyArray<string>;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const FilteringTags = ({ filteringTags, highlightText, triggerVariant }: FilteringTagProps) => {\n  if (!highlightText || !filteringTags) {\n    return null;\n  }\n\n  const searchElement = highlightText.toLowerCase();\n\n  return (\n    <div className={clsx(styles.tags)}>\n      {filteringTags.map((filteringTag, key) => {\n        const match = filteringTag.toLowerCase().indexOf(searchElement) !== -1;\n        if (match) {\n          return (\n            // We do not reach AA compliance in Dark mode for highlighted state\n            // TODO: Remove aria-disabled={true} when we fix AWSUI-10333\n            <span\n              className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])}\n              key={key}\n              aria-disabled={true}\n            >\n              <HighlightMatch str={filteringTag} highlightText={highlightText} />\n            </span>\n          );\n        }\n        return null;\n      })}\n    </div>\n  );\n};\n\nexport const OptionIcon = (props: IconProps) => {\n  if (!props.name && !props.url && !props.svg) {\n    return null;\n  }\n\n  return (\n    <span className={clsx(styles.icon, props.size === 'big' && [styles[`icon-size-big`]])}>\n      <InternalIcon {...props} />\n    </span>\n  );\n};\n"]}
+{"version":3,"file":"option-parts.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/option-parts.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 styles from './styles.css.js';\nimport clsx from 'clsx';\nimport React from 'react';\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport HighlightMatch from './highlight-match';\n\ninterface LabelProps {\n  label?: string;\n  prefix?: string;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const Label = ({ label, prefix, highlightText, triggerVariant }: LabelProps) => (\n  <span className={clsx(styles.label, triggerVariant && styles['trigger-variant'])}>\n    {prefix && (\n      <span className={clsx(styles['label-prefix'], triggerVariant && styles['trigger-variant'])}>{prefix} </span>\n    )}\n    <HighlightMatch str={label} highlightText={highlightText} />\n  </span>\n);\n\ninterface LabelTagProps {\n  labelTag?: string;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const LabelTag = ({ labelTag, highlightText, triggerVariant }: LabelTagProps) =>\n  labelTag ? (\n    <span className={clsx(styles['label-tag'], triggerVariant && styles['trigger-variant'])}>\n      <HighlightMatch str={labelTag} highlightText={highlightText} />\n    </span>\n  ) : null;\n\ninterface DescriptionProps {\n  description?: string;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const Description = ({ description, highlightText, triggerVariant }: DescriptionProps) =>\n  description ? (\n    // We do not reach AA compliance in Dark mode for highlighted state\n    // TODO: Remove aria-disabled={true} when we fix AWSUI-10333\n    <span className={clsx(styles.description, triggerVariant && styles['trigger-variant'])} aria-disabled={true}>\n      <HighlightMatch str={description} highlightText={highlightText} />\n    </span>\n  ) : null;\n\ninterface TagsProps {\n  tags?: ReadonlyArray<string>;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const Tags = ({ tags, highlightText, triggerVariant }: TagsProps) =>\n  tags ? (\n    <span className={clsx(styles.tags)}>\n      {tags.map((tag, idx) => (\n        // We do not reach AA compliance in Dark mode for highlighted state\n        // TODO: Remove aria-disabled={true} when we fix AWSUI-10333\n        <span key={idx} className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])} aria-disabled={true}>\n          <HighlightMatch str={tag} highlightText={highlightText} />\n        </span>\n      ))}\n    </span>\n  ) : null;\n\ninterface FilteringTagProps {\n  filteringTags?: ReadonlyArray<string>;\n  highlightText?: string;\n  triggerVariant: boolean;\n}\nexport const FilteringTags = ({ filteringTags, highlightText, triggerVariant }: FilteringTagProps) => {\n  if (!highlightText || !filteringTags) {\n    return null;\n  }\n\n  const searchElement = highlightText.toLowerCase();\n\n  return (\n    <span className={clsx(styles.tags)}>\n      {filteringTags.map((filteringTag, key) => {\n        const match = filteringTag.toLowerCase().indexOf(searchElement) !== -1;\n        if (match) {\n          return (\n            // We do not reach AA compliance in Dark mode for highlighted state\n            // TODO: Remove aria-disabled={true} when we fix AWSUI-10333\n            <span\n              className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])}\n              key={key}\n              aria-disabled={true}\n            >\n              <HighlightMatch str={filteringTag} highlightText={highlightText} />\n            </span>\n          );\n        }\n        return null;\n      })}\n    </span>\n  );\n};\n\nexport const OptionIcon = (props: IconProps) => {\n  if (!props.name && !props.url && !props.svg) {\n    return null;\n  }\n\n  return (\n    <span className={clsx(styles.icon, props.size === 'big' && [styles[`icon-size-big`]])}>\n      <InternalIcon {...props} />\n    </span>\n  );\n};\n"]}

package/internal/components/option/styles.scoped.css

@@ -124,14 +124,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   widows: 2;
   word-spacing: normal;
   box-sizing: border-box;
-  font-size: 14px;
   font-size: var(--font-body-m-size-sregvd, 14px);
-  line-height: 22px;
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
-  color: #000716;
   color: var(--color-text-body-default-ajf1h5, #000716);
   font-weight: 400;
-  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
   font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   display: flex;
   align-items: flex-start;
@@ -147,7 +143,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: bold;
 }
 .awsui_option_1p2cx_1tubf_97.awsui_parent_1p2cx_1tubf_116:not(#\9):not(.awsui_disabled_1p2cx_1tubf_113) {
-  color: #414d5c;
   color: var(--color-text-dropdown-group-label-eaqlcl, #414d5c);
 }
 
@@ -182,7 +177,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 .awsui_label-tag_1p2cx_1tubf_138:not(#\9) {
-  padding-left: 12px;
   padding-left: var(--space-s-hv8c1d, 12px);
   flex: auto;
   text-align: right;
@@ -193,13 +187,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 
 .awsui_tags_1p2cx_1tubf_162:not(#\9),
 .awsui_description_1p2cx_1tubf_163:not(#\9) {
-  font-size: 12px;
   font-size: var(--font-body-s-size-ukw2p9, 12px);
-  line-height: 16px;
   line-height: var(--font-body-s-line-height-kdsbrl, 16px);
-  letter-spacing: 0.005em;
   letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
-  color: #5f6b7a;
   color: var(--color-text-dropdown-item-secondary-0me7js, #5f6b7a);
   flex-wrap: wrap;
 }
@@ -210,12 +200,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 .awsui_tag_1p2cx_1tubf_137:not(#\9):not(:last-child) {
-  padding-right: 16px;
   padding-right: var(--space-m-17eucw, 16px);
 }
 
 .awsui_icon_1p2cx_1tubf_180:not(#\9) {
-  padding-right: 8px;
   padding-right: var(--space-xs-rsr2qu, 8px);
   align-content: center;
   display: flex;
@@ -223,20 +211,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 }
 
 .awsui_icon-size-big_1p2cx_1tubf_187:not(#\9) {
-  padding-top: 2px;
   padding-top: var(--space-xxxs-k2w98v, 2px);
 }
 
 .awsui_filtering-match-highlight_1p2cx_1tubf_191:not(#\9) {
-  background-color: #f2f8fd;
   background-color: var(--color-background-dropdown-item-filter-match-6ac2mw, #f2f8fd);
-  color: #0972d3;
   color: var(--color-text-dropdown-item-filter-match-x302if, #0972d3);
   font-weight: bold;
 }
 
 .awsui_disabled_1p2cx_1tubf_113:not(#\9) {
-  color: #9ba7b6;
   color: var(--color-text-dropdown-item-disabled-varol7, #9ba7b6);
   pointer-events: none;
 }

package/internal/components/options-list/styles.scoped.css

@@ -124,20 +124,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   widows: 2;
   word-spacing: normal;
   box-sizing: border-box;
-  font-size: 14px;
   font-size: var(--font-body-m-size-sregvd, 14px);
-  line-height: 22px;
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
-  color: #000716;
   color: var(--color-text-body-default-ajf1h5, #000716);
   font-weight: 400;
-  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
   font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   white-space: inherit;
   overflow-y: auto;
   flex: 1 1 auto;
   min-height: 0;
-  border-radius: 8px;
   border-radius: var(--border-radius-dropdown-ujknaf, 8px);
 }