@cloudscape-design/components 3.0.1345 → 3.0.1347

package/internal/base-theme/styles.selectors.js

@@ -0,0 +1,5 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {};
+  

package/internal/components/drag-handle/styles.css.js

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_sdha6_12mai_145",
-  "handle-size-normal": "awsui_handle-size-normal_sdha6_12mai_153",
-  "handle-size-small": "awsui_handle-size-small_sdha6_12mai_157",
-  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_12mai_160",
-  "handle-disabled": "awsui_handle-disabled_sdha6_12mai_160",
-  "active": "awsui_active_sdha6_12mai_163",
-  "handle-resize-area": "awsui_handle-resize-area_sdha6_12mai_166",
-  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_12mai_173",
-  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_12mai_176",
-  "hide-focus": "awsui_hide-focus_sdha6_12mai_186",
-  "resize-icon": "awsui_resize-icon_sdha6_12mai_209",
-  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_12mai_215",
-  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_12mai_219",
-  "prevent-pointer": "awsui_prevent-pointer_sdha6_12mai_223"
+  "handle": "awsui_handle_sdha6_1yyrd_145",
+  "handle-size-normal": "awsui_handle-size-normal_sdha6_1yyrd_153",
+  "handle-size-small": "awsui_handle-size-small_sdha6_1yyrd_157",
+  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_1yyrd_160",
+  "handle-disabled": "awsui_handle-disabled_sdha6_1yyrd_160",
+  "active": "awsui_active_sdha6_1yyrd_163",
+  "handle-resize-area": "awsui_handle-resize-area_sdha6_1yyrd_166",
+  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_1yyrd_182",
+  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_1yyrd_185",
+  "hide-focus": "awsui_hide-focus_sdha6_1yyrd_195",
+  "resize-icon": "awsui_resize-icon_sdha6_1yyrd_218",
+  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_1yyrd_224",
+  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_1yyrd_228",
+  "prevent-pointer": "awsui_prevent-pointer_sdha6_1yyrd_232"
 };
   

package/internal/components/drag-handle/styles.scoped.css

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_handle_sdha6_12mai_145:not(#\9) {
+.awsui_handle_sdha6_1yyrd_145:not(#\9) {
   appearance: none;
   color: var(--color-text-interactive-default-1o1pl2, #424650);
   background: transparent;
@@ -151,47 +151,56 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   touch-action: none;
 }
-.awsui_handle-size-normal_sdha6_12mai_153:not(#\9) {
+.awsui_handle-size-normal_sdha6_1yyrd_153:not(#\9) {
   block-size: var(--line-height-body-m-2mh3ke, 20px);
   padding-inline: var(--space-scaled-xxxs-oo06c7, 2px);
 }
-.awsui_handle-size-small_sdha6_12mai_157:not(#\9) {
+.awsui_handle-size-small_sdha6_1yyrd_157:not(#\9) {
   block-size: var(--line-height-body-s-nu5hx1, 16px);
 }
-.awsui_handle-drag-indicator_sdha6_12mai_160:not(#\9):not(.awsui_handle-disabled_sdha6_12mai_160) {
+.awsui_handle-drag-indicator_sdha6_1yyrd_160:not(#\9):not(.awsui_handle-disabled_sdha6_1yyrd_160) {
   cursor: grab;
 }
-.awsui_handle-drag-indicator_sdha6_12mai_160:not(#\9):not(.awsui_handle-disabled_sdha6_12mai_160).awsui_active_sdha6_12mai_163 {
+.awsui_handle-drag-indicator_sdha6_1yyrd_160:not(#\9):not(.awsui_handle-disabled_sdha6_1yyrd_160).awsui_active_sdha6_1yyrd_163 {
   cursor: grabbing;
 }
-.awsui_handle-resize-area_sdha6_12mai_166:not(#\9) {
+.awsui_handle-resize-area_sdha6_1yyrd_166:not(#\9) {
   cursor: nwse-resize;
+  position: relative;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_handle-resize-area_sdha6_12mai_166:not(#\9):dir(rtl) {
+.awsui_handle-resize-area_sdha6_1yyrd_166:not(#\9)::after {
+  content: "";
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  inline-size: max(24px, 100%);
+  block-size: max(24px, 100%);
+}
+.awsui_handle-resize-area_sdha6_1yyrd_166:not(#\9):dir(rtl) {
   cursor: nesw-resize;
 }
-.awsui_handle-resize-horizontal_sdha6_12mai_173:not(#\9) {
+.awsui_handle-resize-horizontal_sdha6_1yyrd_182:not(#\9) {
   cursor: ew-resize;
 }
-.awsui_handle-resize-vertical_sdha6_12mai_176:not(#\9) {
+.awsui_handle-resize-vertical_sdha6_1yyrd_185:not(#\9) {
   cursor: ns-resize;
 }
-.awsui_handle_sdha6_12mai_145:not(#\9):hover {
+.awsui_handle_sdha6_1yyrd_145:not(#\9):hover {
   color: var(--color-text-interactive-hover-j5y3wx, #0f141a);
 }
-.awsui_handle_sdha6_12mai_145:not(#\9):focus {
+.awsui_handle_sdha6_1yyrd_145:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_12mai_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_12mai_186) {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_1yyrd_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_1yyrd_195) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_12mai_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_12mai_186) {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_1yyrd_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_1yyrd_195) {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_12mai_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_12mai_186)::before {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_1yyrd_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_1yyrd_195)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -207,20 +216,20 @@ body[data-awsui-focus-visible=true] .awsui_handle_sdha6_12mai_145:not(#\9):focus
   z-index: 2;
 }
 
-.awsui_resize-icon_sdha6_12mai_209:not(#\9) {
+.awsui_resize-icon_sdha6_1yyrd_218:not(#\9) {
   stroke: var(--color-text-interactive-default-1o1pl2, #424650);
 }
-.awsui_resize-icon_sdha6_12mai_209:not(#\9):hover {
+.awsui_resize-icon_sdha6_1yyrd_218:not(#\9):hover {
   stroke: var(--color-text-interactive-hover-j5y3wx, #0f141a);
 }
-.awsui_resize-icon-vertical_sdha6_12mai_215:not(#\9) {
+.awsui_resize-icon-vertical_sdha6_1yyrd_224:not(#\9) {
   margin-block: auto;
   margin-inline: auto;
 }
-.awsui_resize-icon-horizontal_sdha6_12mai_219:not(#\9) {
+.awsui_resize-icon-horizontal_sdha6_1yyrd_228:not(#\9) {
   transform: rotate(90deg);
 }
 
-.awsui_prevent-pointer_sdha6_12mai_223:not(#\9) {
+.awsui_prevent-pointer_sdha6_1yyrd_232:not(#\9) {
   pointer-events: none;
 }

package/internal/components/drag-handle/styles.selectors.js

@@ -2,19 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_sdha6_12mai_145",
-  "handle-size-normal": "awsui_handle-size-normal_sdha6_12mai_153",
-  "handle-size-small": "awsui_handle-size-small_sdha6_12mai_157",
-  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_12mai_160",
-  "handle-disabled": "awsui_handle-disabled_sdha6_12mai_160",
-  "active": "awsui_active_sdha6_12mai_163",
-  "handle-resize-area": "awsui_handle-resize-area_sdha6_12mai_166",
-  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_12mai_173",
-  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_12mai_176",
-  "hide-focus": "awsui_hide-focus_sdha6_12mai_186",
-  "resize-icon": "awsui_resize-icon_sdha6_12mai_209",
-  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_12mai_215",
-  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_12mai_219",
-  "prevent-pointer": "awsui_prevent-pointer_sdha6_12mai_223"
+  "handle": "awsui_handle_sdha6_1yyrd_145",
+  "handle-size-normal": "awsui_handle-size-normal_sdha6_1yyrd_153",
+  "handle-size-small": "awsui_handle-size-small_sdha6_1yyrd_157",
+  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_1yyrd_160",
+  "handle-disabled": "awsui_handle-disabled_sdha6_1yyrd_160",
+  "active": "awsui_active_sdha6_1yyrd_163",
+  "handle-resize-area": "awsui_handle-resize-area_sdha6_1yyrd_166",
+  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_1yyrd_182",
+  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_1yyrd_185",
+  "hide-focus": "awsui_hide-focus_sdha6_1yyrd_195",
+  "resize-icon": "awsui_resize-icon_sdha6_1yyrd_218",
+  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_1yyrd_224",
+  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_1yyrd_228",
+  "prevent-pointer": "awsui_prevent-pointer_sdha6_1yyrd_232"
 };
   

package/internal/components/token-list/styles.css.js

@@ -1,15 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_gfwv3_15eip_193",
-  "horizontal": "awsui_horizontal_gfwv3_15eip_196",
-  "vertical": "awsui_vertical_gfwv3_15eip_202",
-  "list": "awsui_list_gfwv3_15eip_207",
-  "grid": "awsui_grid_gfwv3_15eip_226",
-  "list-item": "awsui_list-item_gfwv3_15eip_238",
-  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_15eip_245",
-  "toggle": "awsui_toggle_gfwv3_15eip_245",
-  "description": "awsui_description_gfwv3_15eip_338",
-  "separator": "awsui_separator_gfwv3_15eip_342"
+  "root": "awsui_root_gfwv3_i6vxr_193",
+  "horizontal": "awsui_horizontal_gfwv3_i6vxr_196",
+  "vertical": "awsui_vertical_gfwv3_i6vxr_202",
+  "list": "awsui_list_gfwv3_i6vxr_207",
+  "grid": "awsui_grid_gfwv3_i6vxr_226",
+  "list-item": "awsui_list-item_gfwv3_i6vxr_238",
+  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_i6vxr_245",
+  "toggle": "awsui_toggle_gfwv3_i6vxr_245",
+  "description": "awsui_description_gfwv3_i6vxr_338",
+  "separator": "awsui_separator_gfwv3_i6vxr_342"
 };
   

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

@@ -190,21 +190,21 @@ 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_gfwv3_15eip_193:not(#\9) {
+.awsui_root_gfwv3_i6vxr_193:not(#\9) {
   gap: var(--space-scaled-xs-xwoogq, 8px);
 }
-.awsui_root_gfwv3_15eip_193.awsui_horizontal_gfwv3_15eip_196:not(#\9) {
+.awsui_root_gfwv3_i6vxr_193.awsui_horizontal_gfwv3_i6vxr_196:not(#\9) {
   display: flex;
   gap: var(--space-xs-ymlm0b, 8px);
   flex-direction: row;
   flex-wrap: wrap;
 }
-.awsui_root_gfwv3_15eip_193.awsui_vertical_gfwv3_15eip_202:not(#\9) {
+.awsui_root_gfwv3_i6vxr_193.awsui_vertical_gfwv3_i6vxr_202:not(#\9) {
   display: flex;
   flex-direction: column;
 }
 
-.awsui_list_gfwv3_15eip_207:not(#\9) {
+.awsui_list_gfwv3_i6vxr_207:not(#\9) {
   display: contents;
   list-style: none;
   padding-block: 0;
@@ -212,43 +212,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: 0;
   margin-inline: 0;
 }
-.awsui_list_gfwv3_15eip_207.awsui_horizontal_gfwv3_15eip_196:not(#\9), .awsui_list_gfwv3_15eip_207.awsui_vertical_gfwv3_15eip_202:not(#\9) {
+.awsui_list_gfwv3_i6vxr_207.awsui_horizontal_gfwv3_i6vxr_196:not(#\9), .awsui_list_gfwv3_i6vxr_207.awsui_vertical_gfwv3_i6vxr_202:not(#\9) {
   display: flex;
   gap: var(--space-xs-ymlm0b, 8px);
 }
-.awsui_list_gfwv3_15eip_207.awsui_horizontal_gfwv3_15eip_196:not(#\9) {
+.awsui_list_gfwv3_i6vxr_207.awsui_horizontal_gfwv3_i6vxr_196:not(#\9) {
   flex-direction: row;
   flex-wrap: wrap;
 }
-.awsui_list_gfwv3_15eip_207.awsui_vertical_gfwv3_15eip_202:not(#\9) {
+.awsui_list_gfwv3_i6vxr_207.awsui_vertical_gfwv3_i6vxr_202:not(#\9) {
   flex-direction: column;
 }
-.awsui_list_gfwv3_15eip_207.awsui_grid_gfwv3_15eip_226:not(#\9) {
+.awsui_list_gfwv3_i6vxr_207.awsui_grid_gfwv3_i6vxr_226:not(#\9) {
   display: grid;
   gap: var(--space-xs-ymlm0b, 8px);
   grid-template-columns: repeat(auto-fill, 230px);
 }
 @media (max-width: 688px) {
-  .awsui_list_gfwv3_15eip_207.awsui_grid_gfwv3_15eip_226:not(#\9) {
+  .awsui_list_gfwv3_i6vxr_207.awsui_grid_gfwv3_i6vxr_226:not(#\9) {
     display: flex;
     flex-direction: column;
   }
 }
 
-.awsui_list-item_gfwv3_15eip_238:not(#\9) {
+.awsui_list-item_gfwv3_i6vxr_238:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   margin-block: 0;
   margin-inline: 0;
 }
 
-.awsui_toggle-container-inline_gfwv3_15eip_245:not(#\9) {
+.awsui_toggle-container-inline_gfwv3_i6vxr_245:not(#\9) {
   padding-inline-start: var(--space-xs-ymlm0b, 8px);
   display: flex;
   align-items: center;
 }
 
-.awsui_toggle_gfwv3_15eip_245:not(#\9) {
+.awsui_toggle_gfwv3_i6vxr_245:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -292,42 +292,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--awsui-style-color-default-esndbs, var(--color-text-link-secondary-default-6ui3do, #006ce0));
   font-weight: var(--font-weight-link-secondary-2yfxrh, inherit);
   letter-spacing: normal;
-  text-decoration-line: none;
-  text-decoration-color: transparent;
+  text-decoration-line: var(--font-decoration-line-link-secondary-yegojw, none);
+  text-decoration-color: var(--color-text-link-secondary-decoration-default-icj4nn, transparent);
   transition-property: color, -webkit-text-decoration;
   transition-property: color, text-decoration;
   transition-property: color, text-decoration, -webkit-text-decoration;
   transition-duration: var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_toggle_gfwv3_15eip_245:not(#\9) {
+  .awsui_toggle_gfwv3_i6vxr_245:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_toggle_gfwv3_15eip_245:not(#\9), .awsui-mode-entering .awsui_toggle_gfwv3_15eip_245:not(#\9) {
+.awsui-motion-disabled .awsui_toggle_gfwv3_i6vxr_245:not(#\9), .awsui-mode-entering .awsui_toggle_gfwv3_i6vxr_245:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_toggle_gfwv3_15eip_245:not(#\9):hover {
+.awsui_toggle_gfwv3_i6vxr_245:not(#\9):hover {
   cursor: pointer;
   color: var(--awsui-style-color-hover-esndbs, var(--color-text-link-secondary-hover-oy8eob, #002b66));
 }
-.awsui_toggle_gfwv3_15eip_245:not(#\9):focus {
+.awsui_toggle_gfwv3_i6vxr_245:not(#\9):focus {
   outline: none;
 }
-.awsui_toggle_gfwv3_15eip_245:not(#\9):active {
+.awsui_toggle_gfwv3_i6vxr_245:not(#\9):active {
   color: var(--awsui-style-color-active-esndbs, var(--color-text-link-secondary-hover-oy8eob, #002b66));
 }
-.awsui_toggle_gfwv3_15eip_245:not(#\9):active, .awsui_toggle_gfwv3_15eip_245:not(#\9):focus, .awsui_toggle_gfwv3_15eip_245:not(#\9):hover {
+.awsui_toggle_gfwv3_i6vxr_245:not(#\9):active, .awsui_toggle_gfwv3_i6vxr_245:not(#\9):focus, .awsui_toggle_gfwv3_i6vxr_245:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: var(--color-text-link-decoration-hover-kui2t9, currentColor);
 }
-.awsui_toggle_gfwv3_15eip_245:not(#\9):active, .awsui_toggle_gfwv3_15eip_245:not(#\9):focus, .awsui_toggle_gfwv3_15eip_245:not(#\9):hover {
+.awsui_toggle_gfwv3_i6vxr_245:not(#\9):active, .awsui_toggle_gfwv3_i6vxr_245:not(#\9):focus, .awsui_toggle_gfwv3_i6vxr_245:not(#\9):hover {
   text-decoration: none;
   text-decoration-color: transparent;
 }
-body[data-awsui-focus-visible=true] .awsui_toggle_gfwv3_15eip_245:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_toggle_gfwv3_i6vxr_245:not(#\9):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-width-button-jm0qg7, 2px) solid var(--color-border-item-focused-ditkrb, #006ce0);
   border-inline: var(--border-width-button-jm0qg7, 2px) solid var(--color-border-item-focused-ditkrb, #006ce0);
@@ -337,11 +337,11 @@ body[data-awsui-focus-visible=true] .awsui_toggle_gfwv3_15eip_245:not(#\9):focus
   border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-9mjajk, 1px) var(--color-border-item-focused-ditkrb, #006ce0);
 }
-.awsui_toggle_gfwv3_15eip_245 > .awsui_description_gfwv3_15eip_338:not(#\9) {
+.awsui_toggle_gfwv3_i6vxr_245 > .awsui_description_gfwv3_i6vxr_338:not(#\9) {
   margin-inline-start: var(--space-xxs-hwfkai, 4px);
 }
 
-.awsui_separator_gfwv3_15eip_342:not(#\9) {
+.awsui_separator_gfwv3_i6vxr_342:not(#\9) {
   margin-block: 0;
   margin-inline: var(--space-scaled-m-m892r9, 16px);
   inline-size: var(--border-divider-section-width-uwo8my, 1px);

package/internal/components/token-list/styles.selectors.js

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_gfwv3_15eip_193",
-  "horizontal": "awsui_horizontal_gfwv3_15eip_196",
-  "vertical": "awsui_vertical_gfwv3_15eip_202",
-  "list": "awsui_list_gfwv3_15eip_207",
-  "grid": "awsui_grid_gfwv3_15eip_226",
-  "list-item": "awsui_list-item_gfwv3_15eip_238",
-  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_15eip_245",
-  "toggle": "awsui_toggle_gfwv3_15eip_245",
-  "description": "awsui_description_gfwv3_15eip_338",
-  "separator": "awsui_separator_gfwv3_15eip_342"
+  "root": "awsui_root_gfwv3_i6vxr_193",
+  "horizontal": "awsui_horizontal_gfwv3_i6vxr_196",
+  "vertical": "awsui_vertical_gfwv3_i6vxr_202",
+  "list": "awsui_list_gfwv3_i6vxr_207",
+  "grid": "awsui_grid_gfwv3_i6vxr_226",
+  "list-item": "awsui_list-item_gfwv3_i6vxr_238",
+  "toggle-container-inline": "awsui_toggle-container-inline_gfwv3_i6vxr_245",
+  "toggle": "awsui_toggle_gfwv3_i6vxr_245",
+  "description": "awsui_description_gfwv3_i6vxr_338",
+  "separator": "awsui_separator_gfwv3_i6vxr_342"
 };
   

package/internal/components/transition/index.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { MutableRefObject } from 'react';
 import { TransitionStatus as ReactTransitionGroupTransitionStatus } from 'react-transition-group';
 export type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';
-interface TransitionProps {
+interface TransitionProps<T extends HTMLElement> {
   in: boolean;
   exit?: boolean;
   disabled?: boolean;
-  children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;
+  children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<T | null>, motionDisabled: boolean) => React.ReactNode;
   onStatusChange?: (status: TransitionStatus) => void;
   transitionChangeDelay?: {
     entering?: number;
@@ -14,12 +14,12 @@ interface TransitionProps {
   exitTimeout?: number;
 }
 /**
- * This component is a wrapper around the CSSTransition component.
+ * This component wraps react-transition-group's Transition component.
  *
- * It provides a second parameter in its rendering function that must be
- * attached to the node that is transitioning.
+ * Its rendering function receives the transition state, a ref that must be attached to the transitioning node,
+ * and whether motion is disabled by either user preference or the disabled prop.
  */
-export declare function Transition({
+export declare function Transition<T extends HTMLElement = any>({
   in: isIn,
   children,
   exit,
@@ -28,5 +28,5 @@ export declare function Transition({
   transitionChangeDelay,
   exitTimeout,
   ...rest
-}: TransitionProps): JSX.Element;
+}: TransitionProps<T>): JSX.Element;
 export {};

package/internal/components/transition/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/transition/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAuB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAEL,gBAAgB,IAAI,oCAAoC,EACzD,MAAM,wBAAwB,CAAC;AAIhC,MAAM,MAAM,gBAAgB,GAAG,oCAAoC,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvF,UAAU,eAAe;IACvB,EAAE,EAAE,OAAO,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,gBAAgB,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvG,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACpD,qBAAqB,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EAAE,IAAI,EACR,QAAQ,EACR,IAAW,EACX,cAA6B,EAC7B,QAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,GAAG,IAAI,EACR,EAAE,eAAe,eA8EjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/transition/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAuB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAEL,gBAAgB,IAAI,oCAAoC,EACzD,MAAM,wBAAwB,CAAC;AAIhC,MAAM,MAAM,gBAAgB,GAAG,oCAAoC,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvF,UAAU,eAAe,CAAC,CAAC,SAAS,WAAW;IAC7C,EAAE,EAAE,OAAO,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,CACR,KAAK,EAAE,gBAAgB,EACvB,uBAAuB,EAAE,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,EACnD,cAAc,EAAE,OAAO,KACpB,KAAK,CAAC,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACpD,qBAAqB,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,EAAE,EACtD,EAAE,EAAE,IAAI,EACR,QAAQ,EACR,IAAW,EACX,cAA6B,EAC7B,QAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,GAAG,IAAI,EACR,EAAE,eAAe,CAAC,CAAC,CAAC,eA8EpB"}

package/internal/components/transition/index.js

@@ -5,10 +5,10 @@ import { useCallback, useRef } from 'react';
 import { Transition as ReactTransitionGroupTransition, } from 'react-transition-group';
 import { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';
 /**
- * This component is a wrapper around the CSSTransition component.
+ * This component wraps react-transition-group's Transition component.
  *
- * It provides a second parameter in its rendering function that must be
- * attached to the node that is transitioning.
+ * Its rendering function receives the transition state, a ref that must be attached to the transitioning node,
+ * and whether motion is disabled by either user preference or the disabled prop.
  */
 export function Transition({ in: isIn, children, exit = true, onStatusChange = () => void 0, disabled = false, transitionChangeDelay, exitTimeout, ...rest }) {
     const transitionRootElement = useRef(null);
@@ -68,6 +68,6 @@ export function Transition({ in: isIn, children, exit = true, onStatusChange = (
         }, onExited: () => {
             setTransitionState('exited');
             onStatusChange('exited');
-        }, ...rest }, () => children(transitionState, transitionRootElement)));
+        }, ...rest }, () => children(transitionState, transitionRootElement, motionDisabled)));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/transition/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, { useState } from 'react';\nimport { MutableRefObject, useCallback, useRef } from 'react';\nimport {\n  Transition as ReactTransitionGroupTransition,\n  TransitionStatus as ReactTransitionGroupTransitionStatus,\n} from 'react-transition-group';\n\nimport { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';\n\nexport type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';\n\ninterface TransitionProps {\n  in: boolean;\n  exit?: boolean;\n\n  disabled?: boolean;\n\n  children: (state: TransitionStatus, transitioningElementRef: MutableRefObject<any>) => React.ReactNode;\n  onStatusChange?: (status: TransitionStatus) => void;\n  transitionChangeDelay?: { entering?: number };\n  exitTimeout?: number;\n}\n\n/**\n * This component is a wrapper around the CSSTransition component.\n *\n * It provides a second parameter in its rendering function that must be\n * attached to the node that is transitioning.\n */\nexport function Transition({\n  in: isIn,\n  children,\n  exit = true,\n  onStatusChange = () => void 0,\n  disabled = false,\n  transitionChangeDelay,\n  exitTimeout,\n  ...rest\n}: TransitionProps) {\n  const transitionRootElement = useRef<HTMLElement>(null);\n  // the initial state of the transition should be either 'exited' or 'entered' depending\n  // on the `in` property, this mimicks how internally the Transition component works here:\n  // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121\n  const [transitionState, setTransitionState] = useState<TransitionStatus>(isIn ? 'entered' : 'exited');\n  const motionDisabled = useReducedMotion(transitionRootElement) || disabled;\n\n  const addTransitionEndListener = useCallback((done: () => void) => {\n    const node = transitionRootElement.current;\n\n    if (node === null) {\n      return;\n    }\n    const controller = new AbortController();\n    const listener = (e: TransitionEvent | AnimationEvent) => {\n      if (e.target === node) {\n        controller.abort();\n        done();\n      }\n    };\n    node.addEventListener('transitionend', listener, { signal: controller.signal });\n    node.addEventListener('animationend', listener, { signal: controller.signal });\n  }, []);\n\n  return (\n    <ReactTransitionGroupTransition\n      addEndListener={addTransitionEndListener}\n      timeout={motionDisabled ? 0 : exitTimeout}\n      in={isIn}\n      nodeRef={transitionRootElement}\n      exit={exit}\n      onEnter={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('enter');\n          onStatusChange('enter');\n        }\n      }}\n      onEntering={isAppearing => {\n        if (!isAppearing) {\n          // This line forces the browser to recalculate the layout because we want the starting state in the 'enter' style\n          // to be applied before the animation starts.\n          void transitionRootElement.current?.offsetHeight;\n\n          if (transitionChangeDelay?.entering) {\n            setTimeout(() => {\n              setTransitionState('entering');\n              onStatusChange('entering');\n            }, transitionChangeDelay?.entering);\n          } else {\n            setTransitionState('entering');\n            onStatusChange('entering');\n          }\n        }\n      }}\n      onEntered={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('entered');\n          onStatusChange('entered');\n        }\n      }}\n      onExit={() => {\n        setTransitionState('exit');\n        onStatusChange('exit');\n      }}\n      onExiting={() => {\n        setTransitionState('exiting');\n        onStatusChange('exiting');\n      }}\n      onExited={() => {\n        setTransitionState('exited');\n        onStatusChange('exited');\n      }}\n      {...rest}\n    >\n      {() => children(transitionState, transitionRootElement)}\n    </ReactTransitionGroupTransition>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/transition/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, { useState } from 'react';\nimport { MutableRefObject, useCallback, useRef } from 'react';\nimport {\n  Transition as ReactTransitionGroupTransition,\n  TransitionStatus as ReactTransitionGroupTransitionStatus,\n} from 'react-transition-group';\n\nimport { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';\n\nexport type TransitionStatus = ReactTransitionGroupTransitionStatus | 'enter' | 'exit';\n\ninterface TransitionProps<T extends HTMLElement> {\n  in: boolean;\n  exit?: boolean;\n\n  disabled?: boolean;\n\n  children: (\n    state: TransitionStatus,\n    transitioningElementRef: MutableRefObject<T | null>,\n    motionDisabled: boolean\n  ) => React.ReactNode;\n  onStatusChange?: (status: TransitionStatus) => void;\n  transitionChangeDelay?: { entering?: number };\n  exitTimeout?: number;\n}\n\n/**\n * This component wraps react-transition-group's Transition component.\n *\n * Its rendering function receives the transition state, a ref that must be attached to the transitioning node,\n * and whether motion is disabled by either user preference or the disabled prop.\n */\nexport function Transition<T extends HTMLElement = any>({\n  in: isIn,\n  children,\n  exit = true,\n  onStatusChange = () => void 0,\n  disabled = false,\n  transitionChangeDelay,\n  exitTimeout,\n  ...rest\n}: TransitionProps<T>) {\n  const transitionRootElement = useRef<T>(null);\n  // the initial state of the transition should be either 'exited' or 'entered' depending\n  // on the `in` property, this mimicks how internally the Transition component works here:\n  // https://github.com/reactjs/react-transition-group/blob/6cbd6aaedaf8e9472007640b429ddb48c6c24158/src/Transition.js#L121\n  const [transitionState, setTransitionState] = useState<TransitionStatus>(isIn ? 'entered' : 'exited');\n  const motionDisabled = useReducedMotion(transitionRootElement) || disabled;\n\n  const addTransitionEndListener = useCallback((done: () => void) => {\n    const node = transitionRootElement.current;\n\n    if (node === null) {\n      return;\n    }\n    const controller = new AbortController();\n    const listener = (e: TransitionEvent | AnimationEvent) => {\n      if (e.target === node) {\n        controller.abort();\n        done();\n      }\n    };\n    node.addEventListener('transitionend', listener, { signal: controller.signal });\n    node.addEventListener('animationend', listener, { signal: controller.signal });\n  }, []);\n\n  return (\n    <ReactTransitionGroupTransition\n      addEndListener={addTransitionEndListener}\n      timeout={motionDisabled ? 0 : exitTimeout}\n      in={isIn}\n      nodeRef={transitionRootElement}\n      exit={exit}\n      onEnter={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('enter');\n          onStatusChange('enter');\n        }\n      }}\n      onEntering={isAppearing => {\n        if (!isAppearing) {\n          // This line forces the browser to recalculate the layout because we want the starting state in the 'enter' style\n          // to be applied before the animation starts.\n          void transitionRootElement.current?.offsetHeight;\n\n          if (transitionChangeDelay?.entering) {\n            setTimeout(() => {\n              setTransitionState('entering');\n              onStatusChange('entering');\n            }, transitionChangeDelay?.entering);\n          } else {\n            setTransitionState('entering');\n            onStatusChange('entering');\n          }\n        }\n      }}\n      onEntered={isAppearing => {\n        if (!isAppearing) {\n          setTransitionState('entered');\n          onStatusChange('entered');\n        }\n      }}\n      onExit={() => {\n        setTransitionState('exit');\n        onStatusChange('exit');\n      }}\n      onExiting={() => {\n        setTransitionState('exiting');\n        onStatusChange('exiting');\n      }}\n      onExited={() => {\n        setTransitionState('exited');\n        onStatusChange('exited');\n      }}\n      {...rest}\n    >\n      {() => children(transitionState, transitionRootElement, motionDisabled)}\n    </ReactTransitionGroupTransition>\n  );\n}\n"]}

package/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (abe35802)";
-export var GIT_SHA = "abe35802";
+export var PACKAGE_VERSION = "3.0.0 (f066dd83)";
+export var GIT_SHA = "f066dd83";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (abe35802)",
-  "GIT_SHA": "abe35802",
+  "PACKAGE_VERSION": "3.0.0 (f066dd83)",
+  "GIT_SHA": "f066dd83",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": true,

package/internal/generated/styles/tokens.d.ts

@@ -577,6 +577,7 @@ export const colorBorderItemSelected: string;
 export const colorBorderLayout: string;
 export const colorBorderLayoutSideNavigation: string;
 export const colorBorderNotificationStackBar: string;
+export const colorBorderNotificationStackBarFocused: string;
 export const colorBorderPanelHeader: string;
 export const colorBorderPopover: string;
 export const colorBorderSegmentActive: string;
@@ -690,6 +691,7 @@ export const colorTextLinkDecorationDefault: string;
 export const colorTextLinkDecorationHover: string;
 export const colorTextLinkSecondaryDefault: string;
 export const colorTextLinkSecondaryHover: string;
+export const colorTextLinkSecondaryDecorationDefault: string;
 export const colorTextLinkInfoDefault: string;
 export const colorTextLinkInfoHover: string;
 export const colorTextLinkInvertedDefault: string;
@@ -798,6 +800,7 @@ export const fontBoxValueLargeWeight: string;
 export const fontButtonLetterSpacing: string;
 export const fontChartDetailSize: string;
 export const fontDecorationStyleLink: string;
+export const fontDecorationLineLinkSecondary: string;
 export const fontDecorationThicknessLink: string;
 export const fontDecorationThicknessLinkDisplayL: string;
 export const fontDisplayLabelWeight: string;
@@ -985,6 +988,12 @@ export const motionDurationExpressive: string;
 export const motionDurationComplex: string;
 export const motionDurationTooltipEnter: string;
 export const motionEasingTooltipEnter: string;
+export const motionDurationExpandableContentEnter: string;
+export const motionEasingExpandableContentEnter: string;
+export const motionDurationSideNavigationContentEnterFade: string;
+export const motionDurationSideNavigationContentExit: string;
+export const motionDurationSideNavigationContentExitFade: string;
+export const motionEasingSideNavigationContentExit: string;
 export const motionKeyframesFadeIn: string;
 export const motionKeyframesFadeOut: string;
 export const motionKeyframesStatusIconError: string;
@@ -999,6 +1008,8 @@ export const sizeTableSelectionHorizontal: string;
 export const sizeVerticalInput: string;
 export const sizeVerticalPanelIconOffset: string;
 export const sizeSideNavigationItemHeight: string;
+export const sizeSideNavigationItemCollapsed: string;
+export const sizeSideNavigationCollapsedWidth: string;
 export const spaceAlertActionLeft: string;
 export const spaceAlertHorizontal: string;
 export const spaceAlertMessageRight: string;

package/internal/generated/styles/tokens.js

@@ -437,7 +437,7 @@ export var colorBackgroundInputDisabled = "var(--color-background-input-disabled
 export var colorBackgroundItemSelected = "var(--color-background-item-selected-pyr5cw, #f0fbff)";
 export var colorBackgroundSideNavigationItemActive = "var(--color-background-side-navigation-item-active-adfprg, transparent)";
 export var colorBackgroundSideNavigationItemActiveCollapsed = "var(--color-background-side-navigation-item-active-collapsed-jczh49, #006ce0)";
-export var colorBackgroundSideNavigationItemIconHover = "var(--color-background-side-navigation-item-icon-hover-c8r9nb, #f0fbff)";
+export var colorBackgroundSideNavigationItemIconHover = "var(--color-background-side-navigation-item-icon-hover-e5eh06, #f0fbff)";
 export var colorBackgroundLayoutMain = "var(--color-background-layout-main-7z8vaj, #ffffff)";
 export var colorBackgroundLayoutAiDrawer = "var(--color-background-layout-ai-drawer-b4mvv3, #161d26)";
 export var colorBackgroundDrawer = "var(--color-background-drawer-715dba, #ffffff)";
@@ -577,6 +577,7 @@ export var colorBorderItemSelected = "var(--color-border-item-selected-63a3p8, #
 export var colorBorderLayout = "var(--color-border-layout-px1i24, #c6c6cd)";
 export var colorBorderLayoutSideNavigation = "var(--color-border-layout-side-navigation-mjh43q, #c6c6cd)";
 export var colorBorderNotificationStackBar = "var(--color-border-notification-stack-bar-aszsse, #232b37)";
+export var colorBorderNotificationStackBarFocused = "var(--color-border-notification-stack-bar-focused-mzvtw9, #f9f9fa)";
 export var colorBorderPanelHeader = "var(--color-border-panel-header-j4pvsn, #c6c6cd)";
 export var colorBorderPopover = "var(--color-border-popover-5yl4uc, #b4b4bb)";
 export var colorBorderSegmentActive = "var(--color-border-segment-active-trxbfe, #424650)";
@@ -690,6 +691,7 @@ export var colorTextLinkDecorationDefault = "var(--color-text-link-decoration-de
 export var colorTextLinkDecorationHover = "var(--color-text-link-decoration-hover-kui2t9, currentColor)";
 export var colorTextLinkSecondaryDefault = "var(--color-text-link-secondary-default-6ui3do, #006ce0)";
 export var colorTextLinkSecondaryHover = "var(--color-text-link-secondary-hover-oy8eob, #002b66)";
+export var colorTextLinkSecondaryDecorationDefault = "var(--color-text-link-secondary-decoration-default-icj4nn, transparent)";
 export var colorTextLinkInfoDefault = "var(--color-text-link-info-default-mgpk1w, #006ce0)";
 export var colorTextLinkInfoHover = "var(--color-text-link-info-hover-os951m, #002b66)";
 export var colorTextLinkInvertedDefault = "var(--color-text-link-inverted-default-n9ytl0, #f9f9fa)";
@@ -798,6 +800,7 @@ export var fontBoxValueLargeWeight = "var(--font-box-value-large-weight-wr00sw,
 export var fontButtonLetterSpacing = "var(--font-button-letter-spacing-ufowe3, 0.005em)";
 export var fontChartDetailSize = "var(--font-chart-detail-size-9qr25q, 12px)";
 export var fontDecorationStyleLink = "var(--font-decoration-style-link-pk2xmp, solid)";
+export var fontDecorationLineLinkSecondary = "var(--font-decoration-line-link-secondary-yegojw, none)";
 export var fontDecorationThicknessLink = "var(--font-decoration-thickness-link-uesuo7, 1px)";
 export var fontDecorationThicknessLinkDisplayL = "var(--font-decoration-thickness-link-display-l-6g5fyl, 2px)";
 export var fontDisplayLabelWeight = "var(--font-display-label-weight-zavpeo, 700)";
@@ -985,6 +988,12 @@ export var motionDurationExpressive = "var(--motion-duration-expressive-cbdcwy,
 export var motionDurationComplex = "var(--motion-duration-complex-tbdo30, 250ms)";
 export var motionDurationTooltipEnter = "var(--motion-duration-tooltip-enter-8e7aex, 115ms)";
 export var motionEasingTooltipEnter = "var(--motion-easing-tooltip-enter-i9exfu, cubic-bezier(0, 0, 0, 1))";
+export var motionDurationExpandableContentEnter = "var(--motion-duration-expandable-content-enter-kqyuuj, 180ms)";
+export var motionEasingExpandableContentEnter = "var(--motion-easing-expandable-content-enter-5fw5v8, ease-out)";
+export var motionDurationSideNavigationContentEnterFade = "var(--motion-duration-side-navigation-content-enter-fade-9is49e, 0ms)";
+export var motionDurationSideNavigationContentExit = "var(--motion-duration-side-navigation-content-exit-6sbfiy, 0ms)";
+export var motionDurationSideNavigationContentExitFade = "var(--motion-duration-side-navigation-content-exit-fade-ydl422, 0ms)";
+export var motionEasingSideNavigationContentExit = "var(--motion-easing-side-navigation-content-exit-v820ow, ease-out)";
 export var motionKeyframesFadeIn = "var(--motion-keyframes-fade-in-0r842q, awsui-fade-in-35003c)";
 export var motionKeyframesFadeOut = "var(--motion-keyframes-fade-out-g7fgdu, awsui-fade-out-35003c)";
 export var motionKeyframesStatusIconError = "var(--motion-keyframes-status-icon-error-wkou39, awsui-status-icon-error-35003c)";
@@ -999,6 +1008,8 @@ export var sizeTableSelectionHorizontal = "var(--size-table-selection-horizontal
 export var sizeVerticalInput = "var(--size-vertical-input-p1d7xx, 32px)";
 export var sizeVerticalPanelIconOffset = "var(--size-vertical-panel-icon-offset-z959cw, 15px)";
 export var sizeSideNavigationItemHeight = "var(--size-side-navigation-item-height-lokap3, 28px)";
+export var sizeSideNavigationItemCollapsed = "var(--size-side-navigation-item-collapsed-oesjea, 30px)";
+export var sizeSideNavigationCollapsedWidth = "var(--size-side-navigation-collapsed-width-3gq7nn, 52px)";
 export var spaceAlertActionLeft = "var(--space-alert-action-left-4s8zo5, 12px)";
 export var spaceAlertHorizontal = "var(--space-alert-horizontal-ul364s, 16px)";
 export var spaceAlertMessageRight = "var(--space-alert-message-right-mrjbnn, 4px)";