xmlui 0.8.6 → 0.9.1

package/dist/index.css

@@ -102,10 +102,6 @@
   :-moz-ui-invalid {
     box-shadow: none;
   }
-  *:focus-visible {
-    outline: var(--xmlui-outlineWidth--focus) var(--xmlui-outlineStyle--focus) var(--xmlui-outlineColor--focus);
-    outline-offset: var(--xmlui-outlineOffset--focus);
-  }
   progress {
     vertical-align: baseline;
   }
@@ -980,7 +976,7 @@
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._wrapper_szj14_13 {
+._wrapper_1larq_13 {
   --footer-height: 0px;
   --header-height: 0px;
   width: 100%;
@@ -990,137 +986,138 @@
   flex-direction: column;
   isolation: isolate;
 }
-._wrapper_szj14_13._vertical_szj14_23 {
+._wrapper_1larq_13._vertical_1larq_23 {
   flex-direction: row;
   overflow: initial;
 }
-._wrapper_szj14_13._vertical_szj14_23 ._contentWrapper_szj14_27 {
+._wrapper_1larq_13._vertical_1larq_23 ._contentWrapper_1larq_27 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   position: relative;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_szj14_13._vertical_szj14_23 ._navPanelWrapper_szj14_33 {
+._wrapper_1larq_13._vertical_1larq_23 ._navPanelWrapper_1larq_33 {
   width: var(--xmlui-width-navPanel-App);
   flex-shrink: 0;
 }
-._wrapper_szj14_13._vertical_szj14_23 ._PagesWrapper_szj14_37 {
+._wrapper_1larq_13._vertical_1larq_23 ._PagesWrapper_1larq_37 {
   min-height: initial;
   flex: 1;
 }
-._wrapper_szj14_13._vertical_szj14_23 ._footerWrapper_szj14_41 {
+._wrapper_1larq_13._vertical_1larq_23 ._footerWrapper_1larq_41 {
   position: static;
 }
-._wrapper_szj14_13._vertical_szj14_23._sticky_szj14_44 ._contentWrapper_szj14_27 {
+._wrapper_1larq_13._vertical_1larq_23._sticky_1larq_44 ._contentWrapper_1larq_27 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_szj14_13._vertical_szj14_23._sticky_szj14_44 ._footerWrapper_szj14_41 {
+._wrapper_1larq_13._vertical_1larq_23._sticky_1larq_44 ._footerWrapper_1larq_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_szj14_13._horizontal_szj14_51 {
+._wrapper_1larq_13._horizontal_1larq_51 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_szj14_13._horizontal_szj14_51 ._PagesWrapper_szj14_37 {
+._wrapper_1larq_13._horizontal_1larq_51 ._PagesWrapper_1larq_37 {
   min-height: initial;
 }
-._wrapper_szj14_13._horizontal_szj14_51 ._footerWrapper_szj14_41 {
+._wrapper_1larq_13._horizontal_1larq_51 ._footerWrapper_1larq_41 {
   position: static;
 }
-._wrapper_szj14_13._horizontal_szj14_51._sticky_szj14_44 {
+._wrapper_1larq_13._horizontal_1larq_51._sticky_1larq_44 {
   scroll-padding-top: var(--header-height);
   min-height: 100%;
 }
-._wrapper_szj14_13._horizontal_szj14_51._sticky_szj14_44 ._footerWrapper_szj14_41 {
+._wrapper_1larq_13._horizontal_1larq_51._sticky_1larq_44 ._footerWrapper_1larq_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_szj14_13._horizontal_szj14_51 ._navPanelWrapper_szj14_33 {
+._wrapper_1larq_13._horizontal_1larq_51 ._navPanelWrapper_1larq_33 {
   border-bottom: var(--xmlui-borderBottom-AppHeader);
   justify-content: end;
 }
-._wrapper_szj14_13._verticalFullHeader_szj14_73 {
+._wrapper_1larq_13._verticalFullHeader_1larq_73 {
   min-height: 100%;
   height: 100%;
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_szj14_13._verticalFullHeader_szj14_73 ._navPanelWrapper_szj14_33 {
+._wrapper_1larq_13._verticalFullHeader_1larq_73 ._navPanelWrapper_1larq_33 {
   width: var(--xmlui-width-navPanel-App);
   position: sticky;
   height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
   top: var(--header-height);
 }
-._wrapper_szj14_13._verticalFullHeader_szj14_73 ._PagesWrapper_szj14_37 {
+._wrapper_1larq_13._verticalFullHeader_1larq_73 ._PagesWrapper_1larq_37 {
   overflow: initial;
   min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
   height: 100%;
 }
-._wrapper_szj14_13._verticalFullHeader_szj14_73 ._PagesWrapperInner_szj14_90 {
+._wrapper_1larq_13._verticalFullHeader_1larq_73 ._PagesWrapperInner_1larq_90 {
   height: 100%;
 }
-._wrapper_szj14_13._verticalFullHeader_szj14_73 ._PagesWrapperInner_szj14_90 > .xmlui-page-root {
+._wrapper_1larq_13._verticalFullHeader_1larq_73 ._PagesWrapperInner_1larq_90 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_szj14_13._verticalFullHeader_szj14_73 ._footerWrapper_szj14_41 {
+._wrapper_1larq_13._verticalFullHeader_1larq_73 ._footerWrapper_1larq_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_szj14_13._scrollWholePage_szj14_102 {
+._wrapper_1larq_13._scrollWholePage_1larq_102 {
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_szj14_13._scrollWholePage_szj14_102 ._headerWrapper_szj14_105 {
+._wrapper_1larq_13._scrollWholePage_1larq_102 ._headerWrapper_1larq_105 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_szj14_13._scrollWholePage_szj14_102 ._headerWrapper_szj14_105 > div {
+._wrapper_1larq_13._scrollWholePage_1larq_102 ._headerWrapper_1larq_105 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_szj14_13._scrollWholePage_szj14_102 ._footerWrapper_szj14_41 {
+._wrapper_1larq_13._scrollWholePage_1larq_102 ._footerWrapper_1larq_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_szj14_13._scrollWholePage_szj14_102 ._footerWrapper_szj14_41 > div {
+._wrapper_1larq_13._scrollWholePage_1larq_102 ._footerWrapper_1larq_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_szj14_13._scrollWholePage_szj14_102._verticalFullHeader_szj14_73 {
+._wrapper_1larq_13._scrollWholePage_1larq_102._verticalFullHeader_1larq_73 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_szj14_13._scrollWholePage_szj14_102._verticalFullHeader_szj14_73 ._content_szj14_27 {
+._wrapper_1larq_13._scrollWholePage_1larq_102._verticalFullHeader_1larq_73 ._content_1larq_27 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_szj14_13._scrollWholePage_szj14_102._verticalFullHeader_szj14_73 ._contentWrapper_szj14_27 {
+._wrapper_1larq_13._scrollWholePage_1larq_102._verticalFullHeader_1larq_73 ._contentWrapper_1larq_27 {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_szj14_13:not(._scrollWholePage_szj14_102) {
+._wrapper_1larq_13:not(._scrollWholePage_1larq_102) {
   overflow: hidden;
 }
-._wrapper_szj14_13:not(._scrollWholePage_szj14_102) ._content_szj14_27 {
+._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._content_1larq_27 {
   min-height: 0;
   height: 100%;
 }
-._wrapper_szj14_13:not(._scrollWholePage_szj14_102) ._contentWrapper_szj14_27 {
+._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._contentWrapper_1larq_27 {
   overflow: initial;
 }
-._wrapper_szj14_13:not(._scrollWholePage_szj14_102) ._PagesWrapper_szj14_37 {
+._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._PagesWrapper_1larq_37 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   min-height: 0;
   height: 100%;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_szj14_13:not(._scrollWholePage_szj14_102) ._PagesWrapperInner_szj14_90 {
+._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._PagesWrapperInner_1larq_90 {
   min-height: 100%;
+  height: 0;
 }
-._wrapper_szj14_13._noScrollbarGutters_szj14_146 {
+._wrapper_1larq_13._noScrollbarGutters_1larq_147 {
   scrollbar-gutter: auto;
 }
-._wrapper_szj14_13._noScrollbarGutters_szj14_146 ._PagesWrapper_szj14_37 {
+._wrapper_1larq_13._noScrollbarGutters_1larq_147 ._PagesWrapper_1larq_37 {
   scrollbar-gutter: auto;
 }
 
-._headerWrapper_szj14_105 {
+._headerWrapper_1larq_105 {
   z-index: 1;
   min-height: 0;
   flex-shrink: 0;
@@ -1129,17 +1126,17 @@
   box-shadow: var(--xmlui-boxShadow-header-App);
   background-color: var(--xmlui-backgroundColor-AppHeader);
 }
-._headerWrapper_szj14_105._sticky_szj14_44 {
+._headerWrapper_1larq_105._sticky_1larq_44 {
   position: sticky;
 }
 
-._content_szj14_27 {
+._content_1larq_27 {
   display: flex;
   flex-direction: row;
   isolation: isolate;
 }
 
-._contentWrapper_szj14_27 {
+._contentWrapper_1larq_27 {
   position: relative;
   min-width: 0;
   flex: 1;
@@ -1148,21 +1145,21 @@
   box-shadow: var(--xmlui-boxShadow-navPanel-App);
 }
 
-._navPanelWrapper_szj14_33 {
+._navPanelWrapper_1larq_33 {
   display: flex;
   position: sticky;
   top: 0;
 }
-._navPanelWrapper_szj14_33:empty {
+._navPanelWrapper_1larq_33:empty {
   display: none;
 }
 
-._PagesWrapper_szj14_37 {
+._PagesWrapper_1larq_37 {
   flex: 1;
   isolation: isolate;
 }
 
-._PagesWrapperInner_szj14_90 {
+._PagesWrapperInner_1larq_90 {
   --page-padding-left: var(--xmlui-space-4);
   --page-padding-right: var(--xmlui-space-4);
   --page-padding-top: var(--xmlui-space-5);
@@ -1180,7 +1177,7 @@
   display: flex;
   flex-direction: column;
 }
-._PagesWrapperInner_szj14_90 > .xmlui-page-root {
+._PagesWrapperInner_1larq_90 > .xmlui-page-root {
   padding-top: var(--page-padding-top-override, var(--page-padding-top));
   padding-bottom: var(--page-padding-bottom-override, var(--page-padding-bottom));
   padding-right: var(--page-padding-right-override, var(--page-padding-right));
@@ -1192,7 +1189,7 @@
   margin-right: calc(-1 * var(--page-padding-right));
 }
 
-._footerWrapper_szj14_41 {
+._footerWrapper_1larq_41 {
   flex-shrink: 0;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -1326,7 +1323,7 @@
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._header_2nmv3_13 {
+._header_1m0kp_13 {
   position: relative;
   height: var(--xmlui-height-AppHeader);
   box-sizing: content-box;
@@ -1353,7 +1350,7 @@
   border-end-end-radius: var(--xmlui-borderEndEndRadius-AppHeader, var(--xmlui-borderRadius-AppHeader));
 }
 
-._headerInner_2nmv3_40 {
+._headerInner_1m0kp_40 {
   height: 100%;
   flex: 1;
   gap: var(--xmlui-space-4);
@@ -1371,11 +1368,11 @@
   width: 100%;
   margin: 0 auto;
 }
-._headerInner_2nmv3_40._full_2nmv3_58 {
+._headerInner_1m0kp_40._full_1m0kp_58 {
   max-width: 100%;
 }
 
-._childrenWrapper_2nmv3_62 {
+._childrenWrapper_1m0kp_62 {
   --stack-gap-default: var(--xmlui-space-2);
   display: flex;
   flex-direction: row;
@@ -1387,20 +1384,25 @@
   justify-content: var(--xmlui-align-content-AppHeader);
 }
 
-._logoAndTitle_2nmv3_74 {
+._subNavPanelSlot_1m0kp_74 {
+  display: flex;
+  flex-direction: row;
+}
+
+._logoAndTitle_1m0kp_79 {
   display: flex;
   align-items: center;
   gap: var(--xmlui-space-4);
   height: 100%;
 }
-._logoAndTitle_2nmv3_74:not(:empty) {
+._logoAndTitle_1m0kp_79:not(:empty) {
   padding-right: var(--xmlui-space-2);
 }
-._logoAndTitle_2nmv3_74:empty {
+._logoAndTitle_1m0kp_79:empty {
   display: none;
 }
 
-._logoContainer_2nmv3_87:not(:empty) {
+._logoContainer_1m0kp_92:not(:empty) {
   flex-shrink: 0;
   display: flex;
   width: var(--xmlui-width-logo-AppHeader);
@@ -1413,16 +1415,16 @@
   padding-bottom: var(--xmlui-paddingBottom-logo-AppHeader, var(--xmlui-paddingVertical-logo-AppHeader, var(--xmlui-padding-logo-AppHeader)));
 }
 
-._customLogoContainer_2nmv3_100 {
+._customLogoContainer_1m0kp_105 {
   display: flex;
   height: 100%;
   align-items: center;
 }
-._customLogoContainer_2nmv3_100 > img {
+._customLogoContainer_1m0kp_105 > img {
   height: 100%;
 }
 
-._rightItems_2nmv3_109 {
+._rightItems_1m0kp_114 {
   --stack-gap-default: var(--xmlui-space-2);
   gap: var(--stack-gap-default);
   height: 100%;
@@ -1430,11 +1432,11 @@
   flex-direction: row;
   align-items: center;
 }
-._rightItems_2nmv3_109:not(:empty) {
+._rightItems_1m0kp_114:not(:empty) {
   padding-left: var(--xmlui-space-4);
 }
 
-._appHub_2nmv3_121 {
+._appHub_1m0kp_126 {
   text-decoration: none;
   margin-right: var(--xmlui-space-4);
   width: 40px;
@@ -1442,10 +1444,10 @@
   color: var(--xmlui-textColor-subtitle);
   cursor: pointer;
 }
-._appHub_2nmv3_121:hover {
+._appHub_1m0kp_126:hover {
   color: var(--xmlui-textColor-secondary);
 }
-._appHub_2nmv3_121 svg {
+._appHub_1m0kp_126 svg {
   width: 100%;
   height: 100%;
 }/*
@@ -2274,21 +2276,21 @@ See this source for details: https://css-tricks.com/line-clampin/
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._text_umtqa_13 {
+._text_1x9lo_13 {
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0;
   padding: 0;
   min-height: fit-content;
 }
-._text_umtqa_13 ._text_umtqa_13 {
+._text_1x9lo_13 ._text_1x9lo_13 {
   display: inline;
 }
-._text_umtqa_13._abbr_umtqa_23 {
+._text_1x9lo_13._abbr_1x9lo_23 {
   font-family: var(--xmlui-fontFamily-Text-abbr);
   font-size: var(--xmlui-fontSize-Text-abbr);
   font-weight: var(--xmlui-fontWeight-Text-abbr);
-  font-style: var(--xmlui-font-style-Text-abbr);
+  font-style: var(--xmlui-fontStyle-Text-abbr);
   font-stretch: var(--xmlui-fontStretch-Text-abbr);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-abbr);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-abbr);
@@ -2313,11 +2315,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-abbr);
   letter-spacing: var(--xmlui-letterSpacing-Text-abbr);
 }
-._text_umtqa_13._cite_umtqa_52 {
+._text_1x9lo_13._cite_1x9lo_52 {
   font-family: var(--xmlui-fontFamily-Text-cite);
   font-size: var(--xmlui-fontSize-Text-cite);
   font-weight: var(--xmlui-fontWeight-Text-cite);
-  font-style: var(--xmlui-font-style-Text-cite);
+  font-style: var(--xmlui-fontStyle-Text-cite);
   font-stretch: var(--xmlui-fontStretch-Text-cite);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-cite);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-cite);
@@ -2342,14 +2344,14 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-cite);
   letter-spacing: var(--xmlui-letterSpacing-Text-cite);
 }
-._text_umtqa_13 ._text_umtqa_13._codefence_umtqa_81 {
+._text_1x9lo_13 ._text_1x9lo_13._codefence_1x9lo_81 {
   display: block;
 }
-:not(._text_umtqa_13._codefence_umtqa_81) > ._text_umtqa_13._code_umtqa_81 {
+:not(._text_1x9lo_13._codefence_1x9lo_81) > ._text_1x9lo_13._code_1x9lo_81 {
   font-family: var(--xmlui-fontFamily-Text-code);
   font-size: var(--xmlui-fontSize-Text-code);
   font-weight: var(--xmlui-fontWeight-Text-code);
-  font-style: var(--xmlui-font-style-Text-code);
+  font-style: var(--xmlui-fontStyle-Text-code);
   font-stretch: var(--xmlui-fontStretch-Text-code);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-code);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-code);
@@ -2374,11 +2376,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-code);
   letter-spacing: var(--xmlui-letterSpacing-Text-code);
 }
-._text_umtqa_13._codefence_umtqa_81:has(> ._text_umtqa_13._code_umtqa_81) {
+._text_1x9lo_13._codefence_1x9lo_81:has(> ._text_1x9lo_13._code_1x9lo_81) {
   font-family: var(--xmlui-fontFamily-Text-codefence);
   font-size: var(--xmlui-fontSize-Text-codefence);
   font-weight: var(--xmlui-fontWeight-Text-codefence);
-  font-style: var(--xmlui-font-style-Text-codefence);
+  font-style: var(--xmlui-fontStyle-Text-codefence);
   font-stretch: var(--xmlui-fontStretch-Text-codefence);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-codefence);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-codefence);
@@ -2405,11 +2407,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   overflow-x: auto;
   text-overflow: initial;
 }
-._text_umtqa_13._deleted_umtqa_144 {
+._text_1x9lo_13._deleted_1x9lo_144 {
   font-family: var(--xmlui-fontFamily-Text-deleted);
   font-size: var(--xmlui-fontSize-Text-deleted);
   font-weight: var(--xmlui-fontWeight-Text-deleted);
-  font-style: var(--xmlui-font-style-Text-deleted);
+  font-style: var(--xmlui-fontStyle-Text-deleted);
   font-stretch: var(--xmlui-fontStretch-Text-deleted);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-deleted);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-deleted);
@@ -2434,7 +2436,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-deleted);
   letter-spacing: var(--xmlui-letterSpacing-Text-deleted);
 }
-._text_umtqa_13._deleted_umtqa_144::before, ._text_umtqa_13._deleted_umtqa_144::after {
+._text_1x9lo_13._deleted_1x9lo_144::before, ._text_1x9lo_13._deleted_1x9lo_144::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -2443,17 +2445,17 @@ See this source for details: https://css-tricks.com/line-clampin/
   white-space: nowrap;
   width: 1px;
 }
-._text_umtqa_13._deleted_umtqa_144::before {
+._text_1x9lo_13._deleted_1x9lo_144::before {
   content: " [deletion start] ";
 }
-._text_umtqa_13._deleted_umtqa_144::after {
+._text_1x9lo_13._deleted_1x9lo_144::after {
   content: " [deletion end] ";
 }
-._text_umtqa_13._inserted_umtqa_188 {
+._text_1x9lo_13._inserted_1x9lo_188 {
   font-family: var(--xmlui-fontFamily-Text-inserted);
   font-size: var(--xmlui-fontSize-Text-inserted);
   font-weight: var(--xmlui-fontWeight-Text-inserted);
-  font-style: var(--xmlui-font-style-Text-inserted);
+  font-style: var(--xmlui-fontStyle-Text-inserted);
   font-stretch: var(--xmlui-fontStretch-Text-inserted);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-inserted);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-inserted);
@@ -2478,7 +2480,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-inserted);
   letter-spacing: var(--xmlui-letterSpacing-Text-inserted);
 }
-._text_umtqa_13._inserted_umtqa_188::before, ._text_umtqa_13._inserted_umtqa_188::after {
+._text_1x9lo_13._inserted_1x9lo_188::before, ._text_1x9lo_13._inserted_1x9lo_188::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -2487,17 +2489,17 @@ See this source for details: https://css-tricks.com/line-clampin/
   white-space: nowrap;
   width: 1px;
 }
-._text_umtqa_13._inserted_umtqa_188::before {
+._text_1x9lo_13._inserted_1x9lo_188::before {
   content: " [insertion start] ";
 }
-._text_umtqa_13._inserted_umtqa_188::after {
+._text_1x9lo_13._inserted_1x9lo_188::after {
   content: " [insertion end] ";
 }
-._text_umtqa_13._keyboard_umtqa_232 {
+._text_1x9lo_13._keyboard_1x9lo_232 {
   font-family: var(--xmlui-fontFamily-Text-keyboard);
   font-size: var(--xmlui-fontSize-Text-keyboard);
   font-weight: var(--xmlui-fontWeight-Text-keyboard);
-  font-style: var(--xmlui-font-style-Text-keyboard);
+  font-style: var(--xmlui-fontStyle-Text-keyboard);
   font-stretch: var(--xmlui-fontStretch-Text-keyboard);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-keyboard);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-keyboard);
@@ -2522,11 +2524,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-keyboard);
   letter-spacing: var(--xmlui-letterSpacing-Text-keyboard);
 }
-._text_umtqa_13._marked_umtqa_261 {
+._text_1x9lo_13._marked_1x9lo_261 {
   font-family: var(--xmlui-fontFamily-Text-marked);
   font-size: var(--xmlui-fontSize-Text-marked);
   font-weight: var(--xmlui-fontWeight-Text-marked);
-  font-style: var(--xmlui-font-style-Text-marked);
+  font-style: var(--xmlui-fontStyle-Text-marked);
   font-stretch: var(--xmlui-fontStretch-Text-marked);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-marked);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-marked);
@@ -2551,7 +2553,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-marked);
   letter-spacing: var(--xmlui-letterSpacing-Text-marked);
 }
-._text_umtqa_13._marked_umtqa_261::before, ._text_umtqa_13._marked_umtqa_261::after {
+._text_1x9lo_13._marked_1x9lo_261::before, ._text_1x9lo_13._marked_1x9lo_261::after {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
@@ -2560,17 +2562,17 @@ See this source for details: https://css-tricks.com/line-clampin/
   white-space: nowrap;
   width: 1px;
 }
-._text_umtqa_13._marked_umtqa_261::before {
+._text_1x9lo_13._marked_1x9lo_261::before {
   content: " [highlight start] ";
 }
-._text_umtqa_13._marked_umtqa_261::after {
+._text_1x9lo_13._marked_1x9lo_261::after {
   content: " [highlight end] ";
 }
-._text_umtqa_13._mono_umtqa_305 {
+._text_1x9lo_13._mono_1x9lo_305 {
   font-family: var(--xmlui-fontFamily-Text-mono);
   font-size: var(--xmlui-fontSize-Text-mono);
   font-weight: var(--xmlui-fontWeight-Text-mono);
-  font-style: var(--xmlui-font-style-Text-mono);
+  font-style: var(--xmlui-fontStyle-Text-mono);
   font-stretch: var(--xmlui-fontStretch-Text-mono);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-mono);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-mono);
@@ -2595,11 +2597,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-mono);
   letter-spacing: var(--xmlui-letterSpacing-Text-mono);
 }
-._text_umtqa_13._sample_umtqa_334 {
+._text_1x9lo_13._sample_1x9lo_334 {
   font-family: var(--xmlui-fontFamily-Text-sample);
   font-size: var(--xmlui-fontSize-Text-sample);
   font-weight: var(--xmlui-fontWeight-Text-sample);
-  font-style: var(--xmlui-font-style-Text-sample);
+  font-style: var(--xmlui-fontStyle-Text-sample);
   font-stretch: var(--xmlui-fontStretch-Text-sample);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-sample);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-sample);
@@ -2624,11 +2626,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-sample);
   letter-spacing: var(--xmlui-letterSpacing-Text-sample);
 }
-._text_umtqa_13._sup_umtqa_363 {
+._text_1x9lo_13._sup_1x9lo_363 {
   font-family: var(--xmlui-fontFamily-Text-sup);
   font-size: var(--xmlui-fontSize-Text-sup);
   font-weight: var(--xmlui-fontWeight-Text-sup);
-  font-style: var(--xmlui-font-style-Text-sup);
+  font-style: var(--xmlui-fontStyle-Text-sup);
   font-stretch: var(--xmlui-fontStretch-Text-sup);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-sup);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-sup);
@@ -2653,11 +2655,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-sup);
   letter-spacing: var(--xmlui-letterSpacing-Text-sup);
 }
-._text_umtqa_13._sub_umtqa_392 {
+._text_1x9lo_13._sub_1x9lo_392 {
   font-family: var(--xmlui-fontFamily-Text-sub);
   font-size: var(--xmlui-fontSize-Text-sub);
   font-weight: var(--xmlui-fontWeight-Text-sub);
-  font-style: var(--xmlui-font-style-Text-sub);
+  font-style: var(--xmlui-fontStyle-Text-sub);
   font-stretch: var(--xmlui-fontStretch-Text-sub);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-sub);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-sub);
@@ -2682,11 +2684,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-sub);
   letter-spacing: var(--xmlui-letterSpacing-Text-sub);
 }
-._text_umtqa_13._var_umtqa_421 {
+._text_1x9lo_13._var_1x9lo_421 {
   font-family: var(--xmlui-fontFamily-Text-var);
   font-size: var(--xmlui-fontSize-Text-var);
   font-weight: var(--xmlui-fontWeight-Text-var);
-  font-style: var(--xmlui-font-style-Text-var);
+  font-style: var(--xmlui-fontStyle-Text-var);
   font-stretch: var(--xmlui-fontStretch-Text-var);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-var);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-var);
@@ -2711,11 +2713,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-var);
   letter-spacing: var(--xmlui-letterSpacing-Text-var);
 }
-._text_umtqa_13._title_umtqa_450 {
+._text_1x9lo_13._title_1x9lo_450 {
   font-family: var(--xmlui-fontFamily-Text-title);
   font-size: var(--xmlui-fontSize-Text-title);
   font-weight: var(--xmlui-fontWeight-Text-title);
-  font-style: var(--xmlui-font-style-Text-title);
+  font-style: var(--xmlui-fontStyle-Text-title);
   font-stretch: var(--xmlui-fontStretch-Text-title);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-title);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-title);
@@ -2740,11 +2742,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-title);
   letter-spacing: var(--xmlui-letterSpacing-Text-title);
 }
-._text_umtqa_13._subtitle_umtqa_479 {
+._text_1x9lo_13._subtitle_1x9lo_479 {
   font-family: var(--xmlui-fontFamily-Text-subtitle);
   font-size: var(--xmlui-fontSize-Text-subtitle);
   font-weight: var(--xmlui-fontWeight-Text-subtitle);
-  font-style: var(--xmlui-font-style-Text-subtitle);
+  font-style: var(--xmlui-fontStyle-Text-subtitle);
   font-stretch: var(--xmlui-fontStretch-Text-subtitle);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-subtitle);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-subtitle);
@@ -2769,11 +2771,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-subtitle);
   letter-spacing: var(--xmlui-letterSpacing-Text-subtitle);
 }
-._text_umtqa_13._small_umtqa_508 {
+._text_1x9lo_13._small_1x9lo_508 {
   font-family: var(--xmlui-fontFamily-Text-small);
   font-size: var(--xmlui-fontSize-Text-small);
   font-weight: var(--xmlui-fontWeight-Text-small);
-  font-style: var(--xmlui-font-style-Text-small);
+  font-style: var(--xmlui-fontStyle-Text-small);
   font-stretch: var(--xmlui-fontStretch-Text-small);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-small);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-small);
@@ -2798,11 +2800,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-small);
   letter-spacing: var(--xmlui-letterSpacing-Text-small);
 }
-._text_umtqa_13._caption_umtqa_537 {
+._text_1x9lo_13._caption_1x9lo_537 {
   font-family: var(--xmlui-fontFamily-Text-caption);
   font-size: var(--xmlui-fontSize-Text-caption);
   font-weight: var(--xmlui-fontWeight-Text-caption);
-  font-style: var(--xmlui-font-style-Text-caption);
+  font-style: var(--xmlui-fontStyle-Text-caption);
   font-stretch: var(--xmlui-fontStretch-Text-caption);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-caption);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-caption);
@@ -2827,11 +2829,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-caption);
   letter-spacing: var(--xmlui-letterSpacing-Text-caption);
 }
-._text_umtqa_13._placeholder_umtqa_566 {
+._text_1x9lo_13._placeholder_1x9lo_566 {
   font-family: var(--xmlui-fontFamily-Text-placeholder);
   font-size: var(--xmlui-fontSize-Text-placeholder);
   font-weight: var(--xmlui-fontWeight-Text-placeholder);
-  font-style: var(--xmlui-font-style-Text-placeholder);
+  font-style: var(--xmlui-fontStyle-Text-placeholder);
   font-stretch: var(--xmlui-fontStretch-Text-placeholder);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-placeholder);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-placeholder);
@@ -2856,11 +2858,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-placeholder);
   letter-spacing: var(--xmlui-letterSpacing-Text-placeholder);
 }
-._text_umtqa_13._paragraph_umtqa_595 {
+._text_1x9lo_13._paragraph_1x9lo_595 {
   font-family: var(--xmlui-fontFamily-Text-paragraph);
   font-size: var(--xmlui-fontSize-Text-paragraph);
   font-weight: var(--xmlui-fontWeight-Text-paragraph);
-  font-style: var(--xmlui-font-style-Text-paragraph);
+  font-style: var(--xmlui-fontStyle-Text-paragraph);
   font-stretch: var(--xmlui-fontStretch-Text-paragraph);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-paragraph);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-paragraph);
@@ -2885,11 +2887,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-paragraph);
   letter-spacing: var(--xmlui-letterSpacing-Text-paragraph);
 }
-._text_umtqa_13._subheading_umtqa_624 {
+._text_1x9lo_13._subheading_1x9lo_624 {
   font-family: var(--xmlui-fontFamily-Text-subheading);
   font-size: var(--xmlui-fontSize-Text-subheading);
   font-weight: var(--xmlui-fontWeight-Text-subheading);
-  font-style: var(--xmlui-font-style-Text-subheading);
+  font-style: var(--xmlui-fontStyle-Text-subheading);
   font-stretch: var(--xmlui-fontStretch-Text-subheading);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-subheading);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-subheading);
@@ -2914,11 +2916,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-subheading);
   letter-spacing: var(--xmlui-letterSpacing-Text-subheading);
 }
-._text_umtqa_13._tableheading_umtqa_653 {
+._text_1x9lo_13._tableheading_1x9lo_653 {
   font-family: var(--xmlui-fontFamily-Text-tableheading);
   font-size: var(--xmlui-fontSize-Text-tableheading);
   font-weight: var(--xmlui-fontWeight-Text-tableheading);
-  font-style: var(--xmlui-font-style-Text-tableheading);
+  font-style: var(--xmlui-fontStyle-Text-tableheading);
   font-stretch: var(--xmlui-fontStretch-Text-tableheading);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-tableheading);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-tableheading);
@@ -2943,11 +2945,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-tableheading);
   letter-spacing: var(--xmlui-letterSpacing-Text-tableheading);
 }
-._text_umtqa_13._secondary_umtqa_682 {
+._text_1x9lo_13._secondary_1x9lo_682 {
   font-family: var(--xmlui-fontFamily-Text-secondary);
   font-size: var(--xmlui-fontSize-Text-secondary);
   font-weight: var(--xmlui-fontWeight-Text-secondary);
-  font-style: var(--xmlui-font-style-Text-secondary);
+  font-style: var(--xmlui-fontStyle-Text-secondary);
   font-stretch: var(--xmlui-fontStretch-Text-secondary);
   text-decoration-line: var(--xmlui-textDecorationLine-Text-secondary);
   text-decoration-color: var(--xmlui-textDecorationColor-Text-secondary);
@@ -2972,7 +2974,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   vertical-align: var(--xmlui-verticalAlign-Text-secondary);
   letter-spacing: var(--xmlui-letterSpacing-Text-secondary);
 }
-._text_umtqa_13._strong_umtqa_711 {
+._text_1x9lo_13._strong_1x9lo_711 {
   font-weight: var(--xmlui-fontWeight-bold);
 }
 
@@ -2980,18 +2982,18 @@ See this source for details: https://css-tricks.com/line-clampin/
 This is a Chromium based solution that is supported by most modern browsers.
 See this source for details: https://css-tricks.com/line-clampin/
 */
-._truncateOverflow_umtqa_719 {
+._truncateOverflow_1x9lo_719 {
   overflow: hidden;
   overflow-wrap: break-word;
   white-space: nowrap;
   max-width: 100%;
 }
 
-._preserveLinebreaks_umtqa_726 {
+._preserveLinebreaks_1x9lo_726 {
   white-space: pre-wrap;
 }
 
-._noEllipsis_umtqa_730 {
+._noEllipsis_1x9lo_730 {
   text-overflow: clip;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -4676,40 +4678,40 @@ See this source for details: https://css-tricks.com/line-clampin/
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._selectValue_1gnmc_13 > span {
+._selectValue_1o7b6_13 > span {
   font-size: var(--xmlui-fontSize-Select-default);
   color: var(--xmlui-textColor-placeholder-Select-default);
 }
-._selectValue_1gnmc_13 > span > div {
+._selectValue_1o7b6_13 > span > div {
   color: var(--xmlui-textColor-Select-default);
   font-size: var(--xmlui-fontSize-Select-default);
 }
-._selectValue_1gnmc_13._error_1gnmc_21 > span {
+._selectValue_1o7b6_13._error_1o7b6_21 > span {
   font-size: var(--xmlui-fontSize-Select-error);
   color: var(--xmlui-textColor-placeholder-Select-error);
 }
-._selectValue_1gnmc_13._error_1gnmc_21 > span > div {
+._selectValue_1o7b6_13._error_1o7b6_21 > span > div {
   color: var(--xmlui-textColor-Select-error);
   font-size: var(--xmlui-fontSize-Select-error);
 }
-._selectValue_1gnmc_13._warning_1gnmc_29 > span {
+._selectValue_1o7b6_13._warning_1o7b6_29 > span {
   font-size: var(--xmlui-fontSize-Select-warning);
   color: var(--xmlui-textColor-placeholder-Select-warning);
 }
-._selectValue_1gnmc_13._warning_1gnmc_29 > span > div {
+._selectValue_1o7b6_13._warning_1o7b6_29 > span > div {
   color: var(--xmlui-textColor-Select-warning);
   font-size: var(--xmlui-fontSize-Select-warning);
 }
-._selectValue_1gnmc_13._valid_1gnmc_37 > span {
+._selectValue_1o7b6_13._valid_1o7b6_37 > span {
   font-size: var(--xmlui-fontSize-Select-success);
   color: var(--xmlui-textColor-placeholder-Select-success);
 }
-._selectValue_1gnmc_13._valid_1gnmc_37 > span > div {
+._selectValue_1o7b6_13._valid_1o7b6_37 > span > div {
   color: var(--xmlui-textColor-Select-success);
   font-size: var(--xmlui-fontSize-Select-success);
 }
 
-._selectTrigger_1gnmc_46 {
+button._selectTrigger_1o7b6_46 {
   min-height: 2.6rem;
   display: flex;
   padding: var(--xmlui-space-1) var(--xmlui-space-2);
@@ -4727,22 +4729,22 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-Select-default);
   color: var(--xmlui-textColor-Select-default);
 }
-._selectTrigger_1gnmc_46:hover {
+button._selectTrigger_1o7b6_46:hover {
   border-color: var(--xmlui-borderColor-Select-default--hover);
   background-color: var(--xmlui-backgroundColor-Select-default--hover);
   box-shadow: var(--xmlui-boxShadow-Select-default--hover);
   color: var(--xmlui-textColor-Select-default--hover);
 }
-._selectTrigger_1gnmc_46:focus {
+button._selectTrigger_1o7b6_46:focus {
   outline-width: var(--xmlui-outlineWidth-Select-default--focus);
   outline-color: var(--xmlui-outlineColor-Select-default--focus);
   outline-style: var(--xmlui-outlineStyle-Select-default--focus);
   outline-offset: var(--xmlui-outlineOffset-Select-default--focus);
 }
-._selectTrigger_1gnmc_46::placeholder {
+button._selectTrigger_1o7b6_46::placeholder {
   color: var(--xmlui-textColor-placeholder-Select-default);
 }
-._selectTrigger_1gnmc_46._error_1gnmc_21 {
+button._selectTrigger_1o7b6_46._error_1o7b6_21 {
   border-radius: var(--xmlui-borderRadius-Select-error);
   border-color: var(--xmlui-borderColor-Select-error);
   border-width: var(--xmlui-borderWidth-Select-error);
@@ -4752,22 +4754,22 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-Select-error);
   color: var(--xmlui-textColor-Select-error);
 }
-._selectTrigger_1gnmc_46._error_1gnmc_21:hover {
+button._selectTrigger_1o7b6_46._error_1o7b6_21:hover {
   border-color: var(--xmlui-borderColor-Select-error--hover);
   background-color: var(--xmlui-backgroundColor-Select-error--hover);
   box-shadow: var(--xmlui-boxShadow-Select-error--hover);
   color: var(--xmlui-textColor-Select-error--hover);
 }
-._selectTrigger_1gnmc_46._error_1gnmc_21:focus {
+button._selectTrigger_1o7b6_46._error_1o7b6_21:focus {
   outline-width: var(--xmlui-outlineWidth-Select-error--focus);
   outline-color: var(--xmlui-outlineColor-Select-error--focus);
   outline-style: var(--xmlui-outlineStyle-Select-error--focus);
   outline-offset: var(--xmlui-outlineOffset-Select-error--focus);
 }
-._selectTrigger_1gnmc_46._error_1gnmc_21::placeholder {
+button._selectTrigger_1o7b6_46._error_1o7b6_21::placeholder {
   color: var(--xmlui-textColor-placeholder-Select-error);
 }
-._selectTrigger_1gnmc_46._warning_1gnmc_29 {
+button._selectTrigger_1o7b6_46._warning_1o7b6_29 {
   border-radius: var(--xmlui-borderRadius-Select-warning);
   border-color: var(--xmlui-borderColor-Select-warning);
   border-width: var(--xmlui-borderWidth-Select-warning);
@@ -4777,22 +4779,22 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-Select-warning);
   color: var(--xmlui-textColor-Select-warning);
 }
-._selectTrigger_1gnmc_46._warning_1gnmc_29:hover {
+button._selectTrigger_1o7b6_46._warning_1o7b6_29:hover {
   border-color: var(--xmlui-borderColor-Select-warning--hover);
   background-color: var(--xmlui-backgroundColor-Select-warning--hover);
   box-shadow: var(--xmlui-boxShadow-Select-warning--hover);
   color: var(--xmlui-textColor-Select-warning--hover);
 }
-._selectTrigger_1gnmc_46._warning_1gnmc_29:focus {
+button._selectTrigger_1o7b6_46._warning_1o7b6_29:focus {
   outline-width: var(--xmlui-outlineWidth-Select-warning--focus);
   outline-color: var(--xmlui-outlineColor-Select-warning--focus);
   outline-style: var(--xmlui-outlineStyle-Select-warning--focus);
   outline-offset: var(--xmlui-outlineOffset-Select-warning--focus);
 }
-._selectTrigger_1gnmc_46._warning_1gnmc_29::placeholder {
+button._selectTrigger_1o7b6_46._warning_1o7b6_29::placeholder {
   color: var(--xmlui-textColor-placeholder-Select-warning);
 }
-._selectTrigger_1gnmc_46._valid_1gnmc_37 {
+button._selectTrigger_1o7b6_46._valid_1o7b6_37 {
   border-radius: var(--xmlui-borderRadius-Select-success);
   border-color: var(--xmlui-borderColor-Select-success);
   border-width: var(--xmlui-borderWidth-Select-success);
@@ -4802,23 +4804,23 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-Select-success);
   color: var(--xmlui-textColor-Select-success);
 }
-._selectTrigger_1gnmc_46._valid_1gnmc_37:hover {
+button._selectTrigger_1o7b6_46._valid_1o7b6_37:hover {
   border-color: var(--xmlui-borderColor-Select-success--hover);
   background-color: var(--xmlui-backgroundColor-Select-success--hover);
   box-shadow: var(--xmlui-boxShadow-Select-success--hover);
   color: var(--xmlui-textColor-Select-success--hover);
 }
-._selectTrigger_1gnmc_46._valid_1gnmc_37:focus {
+button._selectTrigger_1o7b6_46._valid_1o7b6_37:focus {
   outline-width: var(--xmlui-outlineWidth-Select-success--focus);
   outline-color: var(--xmlui-outlineColor-Select-success--focus);
   outline-style: var(--xmlui-outlineStyle-Select-success--focus);
   outline-offset: var(--xmlui-outlineOffset-Select-success--focus);
 }
-._selectTrigger_1gnmc_46._valid_1gnmc_37::placeholder {
+button._selectTrigger_1o7b6_46._valid_1o7b6_37::placeholder {
   color: var(--xmlui-textColor-placeholder-Select-success);
 }
 
-._selectTrigger_1gnmc_46:disabled {
+._selectTrigger_1o7b6_46:disabled {
   cursor: not-allowed;
   opacity: var(--xmlui-opacity-Select--disabled);
   background-color: var(--xmlui-backgroundColor-Select--disabled);
@@ -4826,28 +4828,28 @@ See this source for details: https://css-tricks.com/line-clampin/
   border-color: var(--xmlui-borderColor-Select--disabled);
 }
 
-._selectTrigger_1gnmc_46 > span {
+._selectTrigger_1o7b6_46 > span {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   overflow: hidden;
 }
 
-._badgeListContainer_1gnmc_170 {
+._badgeListContainer_1o7b6_170 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }
 
-._badgeList_1gnmc_170 {
+._badgeList_1o7b6_170 {
   gap: 4px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
 
-._badge_1gnmc_170 {
+._badge_1o7b6_170 {
   width: fit-content;
   height: fit-content;
   min-width: 0;
@@ -4864,27 +4866,27 @@ See this source for details: https://css-tricks.com/line-clampin/
   background-color: var(--xmlui-backgroundColor-Select-badge);
   color: var(--xmlui-textColor-Select-badge);
 }
-._badge_1gnmc_170:hover {
+._badge_1o7b6_170:hover {
   background-color: var(--xmlui-backgroundColor-Select-badge--hover);
   color: var(--xmlui-textColor-Select-badge--hover);
 }
-._badge_1gnmc_170:active {
+._badge_1o7b6_170:active {
   background-color: var(--xmlui-backgroundColor-Select-badge--active);
   color: var(--xmlui-textColor-Select-badge--active);
 }
 
-._actions_1gnmc_210 {
+._actions_1o7b6_210 {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-._placeholder_1gnmc_216 {
+._placeholder_1o7b6_216 {
   display: block;
   color: var(--xmlui-textColor-placeholder-Select);
 }
 
-._emptyList_1gnmc_221 {
+._emptyList_1o7b6_221 {
   display: flex;
   gap: 0.2rem;
   padding: 10px 0;
@@ -4894,7 +4896,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   width: 100%;
 }
 
-._selectScrollUpButton_1gnmc_231 {
+._selectScrollUpButton_1o7b6_231 {
   display: flex;
   cursor: default;
   align-items: center;
@@ -4903,7 +4905,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   padding-bottom: 0.25rem;
 }
 
-._selectScrollDownButton_1gnmc_240 {
+._selectScrollDownButton_1o7b6_240 {
   display: flex;
   cursor: default;
   align-items: center;
@@ -4912,7 +4914,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   padding-bottom: 0.25rem;
 }
 
-._command_1gnmc_249 {
+._command_1o7b6_249 {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -4922,14 +4924,14 @@ See this source for details: https://css-tricks.com/line-clampin/
   background-color: var(--xmlui-backgroundColor-menu-Select);
 }
 
-._commandInputContainer_1gnmc_259 {
+._commandInputContainer_1o7b6_259 {
   display: flex;
   align-items: center;
   padding: 0 12px;
   border-bottom: 1px solid var(--xmlui-borderColor);
 }
 
-._commandInput_1gnmc_259 {
+._commandInput_1o7b6_259 {
   flex: 1;
   background-color: transparent;
   padding: 0.5rem;
@@ -4937,22 +4939,22 @@ See this source for details: https://css-tricks.com/line-clampin/
   outline: none;
   border: none;
 }
-._commandInput_1gnmc_259:focus {
+._commandInput_1o7b6_259:focus {
   outline: none;
   box-shadow: none;
   border: 0;
 }
-._commandInput_1gnmc_259:disabled {
+._commandInput_1o7b6_259:disabled {
   cursor: not-allowed;
   opacity: var(--xmlui-opacity-Select--disabled);
 }
 
-._commandList_1gnmc_284 {
+._commandList_1o7b6_284 {
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-._selectContent_1gnmc_289 {
+._selectContent_1o7b6_289 {
   position: relative;
   z-index: 50;
   overflow: auto;
@@ -4961,38 +4963,38 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-menu-Select);
   border: var(--xmlui-borderWidth-menu-Select) solid var(--xmlui-borderColor-menu-Select);
 }
-._selectContent_1gnmc_289[data-state=open] {
-  animation: _fadeIn_1gnmc_1 0.3s ease-in-out, _zoomIn_1gnmc_1 0.3s ease-in-out;
+._selectContent_1o7b6_289[data-state=open] {
+  animation: _fadeIn_1o7b6_1 0.3s ease-in-out, _zoomIn_1o7b6_1 0.3s ease-in-out;
 }
-._selectContent_1gnmc_289[data-state=closed] {
-  animation: _fadeOut_1gnmc_1 0.3s ease-in-out, _zoomOut_1gnmc_1 0.3s ease-in-out;
+._selectContent_1o7b6_289[data-state=closed] {
+  animation: _fadeOut_1o7b6_1 0.3s ease-in-out, _zoomOut_1o7b6_1 0.3s ease-in-out;
 }
-._selectContent_1gnmc_289[data-side=bottom] {
-  animation: _slideInFromTop_1gnmc_1 0.08s ease-in-out;
+._selectContent_1o7b6_289[data-side=bottom] {
+  animation: _slideInFromTop_1o7b6_1 0.08s ease-in-out;
 }
-._selectContent_1gnmc_289[data-side=left] {
-  animation: _slideInFromRight_1gnmc_1 0.3s ease-in-out;
+._selectContent_1o7b6_289[data-side=left] {
+  animation: _slideInFromRight_1o7b6_1 0.3s ease-in-out;
 }
-._selectContent_1gnmc_289[data-side=right] {
-  animation: _slideInFromLeft_1gnmc_1 0.3s ease-in-out;
+._selectContent_1o7b6_289[data-side=right] {
+  animation: _slideInFromLeft_1o7b6_1 0.3s ease-in-out;
 }
-._selectContent_1gnmc_289[data-side=top] {
-  animation: _slideInFromBottom_1gnmc_1 0.3s ease-in-out;
+._selectContent_1o7b6_289[data-side=top] {
+  animation: _slideInFromBottom_1o7b6_1 0.3s ease-in-out;
 }
-._selectContent_1gnmc_289[data-side=bottom] {
+._selectContent_1o7b6_289[data-side=bottom] {
   transform: translateY(0.25rem);
 }
-._selectContent_1gnmc_289[data-side=left] {
+._selectContent_1o7b6_289[data-side=left] {
   transform: translateX(-0.25rem);
 }
-._selectContent_1gnmc_289[data-side=right] {
+._selectContent_1o7b6_289[data-side=right] {
   transform: translateX(0.25rem);
 }
-._selectContent_1gnmc_289[data-side=top] {
+._selectContent_1o7b6_289[data-side=top] {
   transform: translateY(-0.25rem);
 }
 
-._multiComboboxOption_1gnmc_329 {
+._multiComboboxOption_1o7b6_329 {
   padding: 0.5rem 1rem;
   display: flex;
   gap: 1rem;
@@ -5002,17 +5004,17 @@ See this source for details: https://css-tricks.com/line-clampin/
   transition: background-color 0.2s ease;
   background-color: var(--xmlui-backgroundColor-item-Select);
 }
-._multiComboboxOption_1gnmc_329[data-selected=true] {
+._multiComboboxOption_1o7b6_329[data-selected=true] {
   background-color: var(--xmlui-backgroundColor-item-Select--hover);
 }
-._multiComboboxOption_1gnmc_329[data-disabled=true] {
+._multiComboboxOption_1o7b6_329[data-disabled=true] {
   pointer-events: none;
   opacity: var(--xmlui-opacity-text-item-Select--disabled);
   cursor: not-allowed;
   font-style: italic;
 }
 
-._selectItem_1gnmc_349 {
+._selectItem_1o7b6_349 {
   position: relative;
   display: flex;
   width: 100%;
@@ -5026,21 +5028,21 @@ See this source for details: https://css-tricks.com/line-clampin/
   outline: none;
   font-size: var(--xmlui-fontSize-Select);
 }
-._selectItem_1gnmc_349[data-highlighted] {
+._selectItem_1o7b6_349[data-highlighted] {
   background-color: var(--xmlui-backgroundColor-item-Select--hover);
 }
-._selectItem_1gnmc_349[data-state=checked] {
+._selectItem_1o7b6_349[data-state=checked] {
   background-color: var(--xmlui-backgroundColor-item-Select--active);
 }
 
-._selectItem_1gnmc_349[data-disabled] {
+._selectItem_1o7b6_349[data-disabled] {
   pointer-events: none;
   opacity: var(--xmlui-opacity-text-item-Select--disabled);
   cursor: not-allowed;
   font-style: italic;
 }
 
-._selectItemIndicator_1gnmc_377 {
+._selectItemIndicator_1o7b6_377 {
   position: absolute;
   right: 0.5rem;
   display: flex;
@@ -5051,13 +5053,13 @@ See this source for details: https://css-tricks.com/line-clampin/
   color: var(--xmlui-textColor-indicator-Select);
 }
 
-._selectViewport_1gnmc_388 {
+._selectViewport_1o7b6_388 {
   height: var(--radix-select-trigger-height);
   width: 100%;
   min-width: var(--radix-select-trigger-width);
 }
 
-._selectEmpty_1gnmc_394 {
+._selectEmpty_1o7b6_394 {
   display: flex;
   gap: 0.2rem;
   height: 100%;
@@ -5068,7 +5070,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   width: 100%;
 }
 
-._srOnly_1gnmc_405 {
+._srOnly_1o7b6_405 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -5080,7 +5082,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   border: 0;
 }
 
-@keyframes _fadeIn_1gnmc_1 {
+@keyframes _fadeIn_1o7b6_1 {
   from {
     opacity: 0;
   }
@@ -5088,7 +5090,7 @@ See this source for details: https://css-tricks.com/line-clampin/
     opacity: 1;
   }
 }
-@keyframes _fadeOut_1gnmc_1 {
+@keyframes _fadeOut_1o7b6_1 {
   from {
     opacity: 1;
   }
@@ -5096,7 +5098,7 @@ See this source for details: https://css-tricks.com/line-clampin/
     opacity: 0;
   }
 }
-@keyframes _zoomIn_1gnmc_1 {
+@keyframes _zoomIn_1o7b6_1 {
   from {
     transform: scale(0.95);
   }
@@ -5104,7 +5106,7 @@ See this source for details: https://css-tricks.com/line-clampin/
     transform: scale(1);
   }
 }
-@keyframes _zoomOut_1gnmc_1 {
+@keyframes _zoomOut_1o7b6_1 {
   from {
     transform: scale(1);
   }
@@ -5112,7 +5114,7 @@ See this source for details: https://css-tricks.com/line-clampin/
     transform: scale(0.95);
   }
 }
-@keyframes _slideInFromTop_1gnmc_1 {
+@keyframes _slideInFromTop_1o7b6_1 {
   from {
     transform: translateY(-0.75rem);
   }
@@ -5120,7 +5122,7 @@ See this source for details: https://css-tricks.com/line-clampin/
     transform: translateY(0);
   }
 }
-@keyframes _slideInFromBottom_1gnmc_1 {
+@keyframes _slideInFromBottom_1o7b6_1 {
   from {
     transform: translateY(0.75rem);
   }
@@ -5128,7 +5130,7 @@ See this source for details: https://css-tricks.com/line-clampin/
     transform: translateY(0);
   }
 }
-@keyframes _slideInFromLeft_1gnmc_1 {
+@keyframes _slideInFromLeft_1o7b6_1 {
   from {
     transform: translateX(-100%);
   }
@@ -5136,7 +5138,7 @@ See this source for details: https://css-tricks.com/line-clampin/
     transform: translateX(0);
   }
 }
-@keyframes _slideInFromRight_1gnmc_1 {
+@keyframes _slideInFromRight_1o7b6_1 {
   from {
     transform: translateX(100%);
   }
@@ -5969,14 +5971,14 @@ See this source for details: https://css-tricks.com/line-clampin/
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._command_1bkxa_13 {
+._command_17zx6_13 {
   width: 100%;
   height: auto;
   overflow: visible;
   background-color: transparent;
 }
 
-._badgeListWrapper_1bkxa_20 {
+._badgeListWrapper_17zx6_20 {
   outline: none;
   display: flex;
   padding: var(--xmlui-space-1) var(--xmlui-space-2);
@@ -5990,16 +5992,16 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-AutoComplete-default);
   color: var(--xmlui-textColor-AutoComplete-default);
 }
-._badgeListWrapper_1bkxa_20:hover {
+._badgeListWrapper_17zx6_20:hover {
   border-color: var(--xmlui-borderColor-AutoComplete-default--hover);
   background-color: var(--xmlui-backgroundColor-AutoComplete-default--hover);
   box-shadow: var(--xmlui-boxShadow-AutoComplete-default--hover);
   color: var(--xmlui-textColor-AutoComplete-default--hover);
 }
-._badgeListWrapper_1bkxa_20::placeholder {
+._badgeListWrapper_17zx6_20::placeholder {
   color: var(--xmlui-textColor-placeholder-AutoComplete-default);
 }
-._badgeListWrapper_1bkxa_20._error_1bkxa_43 {
+._badgeListWrapper_17zx6_20._error_17zx6_43 {
   border-radius: var(--xmlui-borderRadius-AutoComplete-error);
   border-color: var(--xmlui-borderColor-AutoComplete-error);
   border-width: var(--xmlui-borderWidth-AutoComplete-error);
@@ -6009,16 +6011,16 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-AutoComplete-error);
   color: var(--xmlui-textColor-AutoComplete-error);
 }
-._badgeListWrapper_1bkxa_20._error_1bkxa_43:hover {
+._badgeListWrapper_17zx6_20._error_17zx6_43:hover {
   border-color: var(--xmlui-borderColor-AutoComplete-error--hover);
   background-color: var(--xmlui-backgroundColor-AutoComplete-error--hover);
   box-shadow: var(--xmlui-boxShadow-AutoComplete-error--hover);
   color: var(--xmlui-textColor-AutoComplete-error--hover);
 }
-._badgeListWrapper_1bkxa_20._error_1bkxa_43::placeholder {
+._badgeListWrapper_17zx6_20._error_17zx6_43::placeholder {
   color: var(--xmlui-textColor-placeholder-AutoComplete-error);
 }
-._badgeListWrapper_1bkxa_20._warning_1bkxa_62 {
+._badgeListWrapper_17zx6_20._warning_17zx6_62 {
   border-radius: var(--xmlui-borderRadius-AutoComplete-warning);
   border-color: var(--xmlui-borderColor-AutoComplete-warning);
   border-width: var(--xmlui-borderWidth-AutoComplete-warning);
@@ -6028,16 +6030,16 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-AutoComplete-warning);
   color: var(--xmlui-textColor-AutoComplete-warning);
 }
-._badgeListWrapper_1bkxa_20._warning_1bkxa_62:hover {
+._badgeListWrapper_17zx6_20._warning_17zx6_62:hover {
   border-color: var(--xmlui-borderColor-AutoComplete-warning--hover);
   background-color: var(--xmlui-backgroundColor-AutoComplete-warning--hover);
   box-shadow: var(--xmlui-boxShadow-AutoComplete-warning--hover);
   color: var(--xmlui-textColor-AutoComplete-warning--hover);
 }
-._badgeListWrapper_1bkxa_20._warning_1bkxa_62::placeholder {
+._badgeListWrapper_17zx6_20._warning_17zx6_62::placeholder {
   color: var(--xmlui-textColor-placeholder-AutoComplete-warning);
 }
-._badgeListWrapper_1bkxa_20._valid_1bkxa_81 {
+._badgeListWrapper_17zx6_20._valid_17zx6_81 {
   border-radius: var(--xmlui-borderRadius-AutoComplete-success);
   border-color: var(--xmlui-borderColor-AutoComplete-success);
   border-width: var(--xmlui-borderWidth-AutoComplete-success);
@@ -6047,30 +6049,30 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-AutoComplete-success);
   color: var(--xmlui-textColor-AutoComplete-success);
 }
-._badgeListWrapper_1bkxa_20._valid_1bkxa_81:hover {
+._badgeListWrapper_17zx6_20._valid_17zx6_81:hover {
   border-color: var(--xmlui-borderColor-AutoComplete-success--hover);
   background-color: var(--xmlui-backgroundColor-AutoComplete-success--hover);
   box-shadow: var(--xmlui-boxShadow-AutoComplete-success--hover);
   color: var(--xmlui-textColor-AutoComplete-success--hover);
 }
-._badgeListWrapper_1bkxa_20._valid_1bkxa_81::placeholder {
+._badgeListWrapper_17zx6_20._valid_17zx6_81::placeholder {
   color: var(--xmlui-textColor-placeholder-AutoComplete-success);
 }
-._badgeListWrapper_1bkxa_20._disabled_1bkxa_100 {
+._badgeListWrapper_17zx6_20._disabled_17zx6_100 {
   cursor: not-allowed;
   opacity: 0.5;
   background-color: var(--xmlui-backgroundColor-AutoComplete--disabled);
   color: var(--xmlui-textColor-AutoComplete--disabled);
   border-color: var(--xmlui-borderColor-AutoComplete--disabled);
 }
-._badgeListWrapper_1bkxa_20._focused_1bkxa_107 {
+._badgeListWrapper_17zx6_20._focused_17zx6_107 {
   outline-width: var(--xmlui-outlineWidth-AutoComplete--focus);
   outline-color: var(--xmlui-outlineColor-AutoComplete--focus);
   outline-style: var(--xmlui-outlineStyle-AutoComplete--focus);
   outline-offset: var(--xmlui-outlineOffset-AutoComplete--focus);
 }
 
-._badgeList_1bkxa_20 {
+._badgeList_17zx6_20 {
   position: relative;
   flex-grow: 1;
   align-items: center;
@@ -6079,35 +6081,12 @@ See this source for details: https://css-tricks.com/line-clampin/
   gap: 0.25rem;
 }
 
-._badge_1bkxa_20 {
+._badge_17zx6_20 {
   width: fit-content;
   height: fit-content;
   min-width: 0;
-  padding: var(--xmlui-padding-badge-AutoComplete);
-  padding-left: var(--xmlui-paddingLeft-badge-AutoComplete, var(--xmlui-paddingHorizontal-badge-AutoComplete, var(--xmlui-padding-badge-AutoComplete)));
-  padding-right: var(--xmlui-paddingRight-badge-AutoComplete, var(--xmlui-paddingHorizontal-badge-AutoComplete, var(--xmlui-padding-badge-AutoComplete)));
-  padding-top: var(--xmlui-paddingTop-badge-AutoComplete, var(--xmlui-paddingVertical-badge-AutoComplete, var(--xmlui-padding-badge-AutoComplete)));
-  padding-bottom: var(--xmlui-paddingBottom-badge-AutoComplete, var(--xmlui-paddingVertical-badge-AutoComplete, var(--xmlui-padding-badge-AutoComplete)));
-  border-left: var(--xmlui-borderLeft-badge-AutoComplete, var(--xmlui-borderHorizontal-badge-AutoComplete, var(--xmlui-border-badge-AutoComplete)));
-  border-right: var(--xmlui-borderRight-badge-AutoComplete, var(--xmlui-borderHorizontal-badge-AutoComplete, var(--xmlui-border-badge-AutoComplete)));
-  border-top: var(--xmlui-borderTop-badge-AutoComplete, var(--xmlui-borderVertical-badge-AutoComplete, var(--xmlui-border-badge-AutoComplete)));
-  border-bottom: var(--xmlui-borderBottom-badge-AutoComplete, var(--xmlui-borderVertical-badge-AutoComplete, var(--xmlui-border-badge-AutoComplete)));
-  border-left-style: var(--xmlui-borderLeftStyle-badge-AutoComplete, var(--xmlui-borderHorizontalStyle-badge-AutoComplete, var(--xmlui-borderStyle-badge-AutoComplete)));
-  border-right-style: var(--xmlui-borderRightStyle-badge-AutoComplete, var(--xmlui-borderHorizontalStyle-badge-AutoComplete, var(--xmlui-borderStyle-badge-AutoComplete)));
-  border-top-style: var(--xmlui-borderTopStyle-badge-AutoComplete, var(--xmlui-borderVerticalStyle-badge-AutoComplete, var(--xmlui-borderStyle-badge-AutoComplete)));
-  border-bottom-style: var(--xmlui-borderBottomStyle-badge-AutoComplete, var(--xmlui-borderVerticalStyle-badge-AutoComplete, var(--xmlui-borderStyle-badge-AutoComplete)));
-  border-left-width: var(--xmlui-borderLeftWidth-badge-AutoComplete, var(--xmlui-borderHorizontalWidth-badge-AutoComplete, var(--xmlui-borderWidth-badge-AutoComplete)));
-  border-right-width: var(--xmlui-borderRightWidth-badge-AutoComplete, var(--xmlui-borderHorizontalWidth-badge-AutoComplete, var(--xmlui-borderWidth-badge-AutoComplete)));
-  border-top-width: var(--xmlui-borderTopWidth-badge-AutoComplete, var(--xmlui-borderVerticalWidth-badge-AutoComplete, var(--xmlui-borderWidth-badge-AutoComplete)));
-  border-bottom-width: var(--xmlui-borderBottomWidth-badge-AutoComplete, var(--xmlui-borderVerticalWidth-badge-AutoComplete, var(--xmlui-borderWidth-badge-AutoComplete)));
-  border-left-color: var(--xmlui-borderLeftColor-badge-AutoComplete, var(--xmlui-borderHorizontalColor-badge-AutoComplete, var(--xmlui-borderColor-badge-AutoComplete)));
-  border-right-color: var(--xmlui-borderRightColor-badge-AutoComplete, var(--xmlui-borderHorizontalColor-badge-AutoComplete, var(--xmlui-borderColor-badge-AutoComplete)));
-  border-top-color: var(--xmlui-borderTopColor-badge-AutoComplete, var(--xmlui-borderVerticalColor-badge-AutoComplete, var(--xmlui-borderColor-badge-AutoComplete)));
-  border-bottom-color: var(--xmlui-borderBottomColor-badge-AutoComplete, var(--xmlui-borderVerticalColor-badge-AutoComplete, var(--xmlui-borderColor-badge-AutoComplete)));
-  border-start-start-radius: var(--xmlui-borderStartStartRadius-badge-AutoComplete, var(--xmlui-borderRadius-badge-AutoComplete));
-  border-start-end-radius: var(--xmlui-borderStartEndRadius-badge-AutoComplete, var(--xmlui-borderRadius-badge-AutoComplete));
-  border-end-start-radius: var(--xmlui-borderEndStartRadius-badge-AutoComplete, var(--xmlui-borderRadius-badge-AutoComplete));
-  border-end-end-radius: var(--xmlui-borderEndEndRadius-badge-AutoComplete, var(--xmlui-borderRadius-badge-AutoComplete));
+  padding: var(--xmlui-paddingVertical-AutoComplete-badge) var(--xmlui-paddingHorizontal-AutoComplete-badge);
+  border-radius: var(--xmlui-radius);
   transition: color 0.2s, background-color 0.2s;
   user-select: none;
   cursor: pointer;
@@ -6115,42 +6094,42 @@ See this source for details: https://css-tricks.com/line-clampin/
   gap: var(--xmlui-space-1);
   justify-content: center;
   align-items: center;
-  font-size: var(--xmlui-fontSize-badge-AutoComplete);
-  background-color: var(--xmlui-backgroundColor-badge-AutoComplete);
-  color: var(--xmlui-textColor-badgeAutoComplete);
+  font-size: var(--xmlui-fontSize-AutoComplete-badge);
+  background-color: var(--xmlui-backgroundColor-AutoComplete-badge);
+  color: var(--xmlui-textColor-AutoComplete-badge);
 }
-._badge_1bkxa_20:hover {
-  background-color: var(--xmlui-backgroundColor-badge-AutoComplete--hover);
-  color: var(--xmlui-textColor-badgeAutoComplete--hover);
+._badge_17zx6_20:hover {
+  background-color: var(--xmlui-backgroundColor-AutoComplete-badge--hover);
+  color: var(--xmlui-textColor-AutoComplete-badge--hover);
 }
-._badge_1bkxa_20:active {
-  background-color: var(--xmlui-backgroundColor-badge-AutoComplete--active);
-  color: var(--xmlui-textColor-badgeAutoComplete--active);
+._badge_17zx6_20:active {
+  background-color: var(--xmlui-backgroundColor-AutoComplete-badge--active);
+  color: var(--xmlui-textColor-AutoComplete-badge--active);
 }
 
-._commandInput_1bkxa_172 {
+._commandInput_17zx6_149 {
   flex: 1;
   background-color: transparent;
   outline: none;
 }
-._commandInput_1bkxa_172:disabled {
+._commandInput_17zx6_149:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
-._commandInput_1bkxa_172::placeholder {
+._commandInput_17zx6_149::placeholder {
   color: var(--xmlui-textColor-placeholder-AutoComplete);
 }
-._commandInput_1bkxa_172:focus-within {
+._commandInput_17zx6_149:focus-within {
   outline: none;
 }
 
-._actions_1bkxa_188 {
+._actions_17zx6_165 {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-._autoCompleteEmpty_1bkxa_194 {
+._autoCompleteEmpty_17zx6_171 {
   display: flex;
   gap: 0.2rem;
   padding: 10px 0;
@@ -6160,7 +6139,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   width: 100%;
 }
 
-._commandList_1bkxa_204 {
+._commandList_17zx6_181 {
   position: absolute;
   overflow: hidden;
   top: 0.25rem;
@@ -6170,10 +6149,10 @@ See this source for details: https://css-tricks.com/line-clampin/
   background-color: var(--xmlui-backgroundColor-menu-AutoComplete);
   border-radius: var(--xmlui-borderRadius-menu-AutoComplete);
   box-shadow: var(--xmlui-boxShadow-menu-AutoComplete);
-  animation: _fade-in_1bkxa_1 0.3s ease-in-out; /* animate-in */
+  animation: _fade-in_17zx6_1 0.3s ease-in-out; /* animate-in */
 }
 
-._autoCompleteOption_1bkxa_217 {
+._autoCompleteOption_17zx6_194 {
   padding: 0.5rem 1rem;
   display: flex;
   gap: 1rem;
@@ -6183,10 +6162,10 @@ See this source for details: https://css-tricks.com/line-clampin/
   transition: background-color 0.2s ease;
   background-color: var(--xmlui-backgroundColor-item-AutoComplete);
 }
-._autoCompleteOption_1bkxa_217[data-selected=true] {
+._autoCompleteOption_17zx6_194[data-selected=true] {
   background-color: var(--xmlui-backgroundColor-item-AutoComplete--hover);
 }
-._autoCompleteOption_1bkxa_217[data-disabled=true] {
+._autoCompleteOption_17zx6_194[data-disabled=true] {
   pointer-events: none;
   opacity: 0.5;
   cursor: not-allowed;
@@ -6519,7 +6498,7 @@ See this source for details: https://css-tricks.com/line-clampin/
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._dropdownList_92nyg_13 {
+._dropdownList_qxju2_13 {
   padding: 0;
   margin: 0;
   left: 0;
@@ -6534,32 +6513,8 @@ See this source for details: https://css-tricks.com/line-clampin/
   min-width: 11rem;
   border-radius: var(--xmlui-borderRadius-dropdown-NavGroup);
 }
-._dropdownList_92nyg_13:focus, ._dropdownList_92nyg_13:focus-visible {
+._dropdownList_qxju2_13:focus, ._dropdownList_qxju2_13:focus-visible {
   outline: none;
-}
-
-._withNavGroupChevron_92nyg_32 {
-  display: inline-flex;
-  align-items: center;
-}
-._withNavGroupChevron_92nyg_32:after {
-  content: "";
-  display: inline-block;
-  vertical-align: 0.306em;
-  width: 0.36em;
-  height: 0.36em;
-  border-bottom: 1px solid currentColor;
-  border-left: 1px solid currentColor;
-  margin-right: 0.1em;
-  margin-left: 0.4em;
-  transform: rotate(-45deg);
-}
-._withNavGroupChevron_92nyg_32._pointRight_92nyg_48 {
-  flex: 1;
-}
-._withNavGroupChevron_92nyg_32._pointRight_92nyg_48:after {
-  margin-left: auto;
-  transform: rotate(-135deg);
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
  *
@@ -7128,7 +7083,7 @@ li ._htmlOl_1snis_205 {
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._wrapper_i851i_13 {
+._wrapper_1f03i_13 {
   z-index: 9999;
   overflow: hidden;
   box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.4);
@@ -7139,26 +7094,32 @@ li ._htmlOl_1snis_205 {
   border: 1px solid var(--xmlui-borderColor);
 }
 
-._actions_i851i_24 {
+._actions_1f03i_24 {
   display: inline-flex;
+  align-items: center;
   justify-content: flex-end;
 }
 
-._tabs_i851i_29 {
+._tabs_1f03i_30 {
   display: flex;
   flex-direction: column;
   background-color: var(--xmlui-backgroundColor);
 }
 
-._sideButtons_i851i_35 {
+._tabItems_1f03i_36 {
   display: flex;
+  flex-direction: row;
 }
 
-._sideButton_i851i_35 {
+._sideButtons_1f03i_41 {
+  display: flex;
+}
+
+._sideButton_1f03i_41 {
   padding: 2px;
 }
 
-._menuItem_i851i_43 {
+._menuItem_1f03i_49 {
   width: 240px;
   display: flex;
   justify-content: space-between;
@@ -7168,7 +7129,7 @@ li ._htmlOl_1snis_205 {
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
-._list_i851i_53 {
+._list_1f03i_59 {
   padding: 0.2rem;
   display: flex;
   flex: 0 0 auto;
@@ -7178,17 +7139,18 @@ li ._htmlOl_1snis_205 {
   border-bottom: 1px solid var(--xmlui-borderColor);
 }
 
-._menu_i851i_43 {
+._menu_1f03i_49 {
   position: relative;
   z-index: 9999;
+  padding: var(--xmlui-space-1_5);
 }
 
-._content_i851i_68 {
+._content_1f03i_75 {
   flex: 1;
   position: relative;
   overflow: auto;
 }
-._content_i851i_68 ._copyButton_i851i_73 {
+._content_1f03i_75 ._copyButton_1f03i_80 {
   position: absolute;
   top: 16px;
   right: 16px;
@@ -7201,7 +7163,7 @@ li ._htmlOl_1snis_205 {
   gap: 5px;
   transition: opacity 0.2s;
 }
-._content_i851i_68:hover ._copyButton_i851i_73 {
+._content_1f03i_75:hover ._copyButton_1f03i_80 {
   display: flex;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -7858,6 +7820,17 @@ li ._htmlOl_1snis_205 {
 /*
  * This function creates a CSS variable name by combining the prefix and the argument variable name
  */
+/*
+ * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
+ Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
+ *//*
+ * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
+ *
+ * We use a subset of these CSS variables in themes.
+ */
+/*
+ * This function creates a CSS variable name by combining the prefix and the argument variable name
+ */
 /*
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.