@uh-design-system/component-library 1.2.0-rc.3 → 1.2.0

package/dist/collection/components/01-base-components/ds-ribbon/ds-ribbon.css

@@ -13,7 +13,7 @@
   z-index: 1000;
 }
 
-.ds-ribbon__pYthVb__container {
+.ds-ribbon__DFAX9n__container {
   display: grid;
   grid-template-columns: 8rem auto;
   align-items: center;
@@ -24,36 +24,36 @@
   height: 3rem;
 }
 @media (min-width: 30rem) {
-  .ds-ribbon__pYthVb__container {
+  .ds-ribbon__DFAX9n__container {
     grid-template-columns: auto auto;
   }
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__container {
+  .ds-ribbon__DFAX9n__container {
     grid-template-columns: 145px auto;
     padding: 0 var(--ds-spacing-large, 32px);
   }
 }
 @media (min-width: 75rem) {
-  .ds-ribbon__pYthVb__container {
+  .ds-ribbon__DFAX9n__container {
     grid-template-columns: auto auto;
   }
 }
-.ds-ribbon__pYthVb__branding {
+.ds-ribbon__DFAX9n__branding {
   display: flex;
   align-items: center;
   flex-shrink: 0;
 }
-.ds-ribbon__pYthVb__mobile-toggle {
+.ds-ribbon__DFAX9n__mobile-toggle {
   display: block;
   grid-column-end: -1;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__mobile-toggle {
+  .ds-ribbon__DFAX9n__mobile-toggle {
     display: none;
   }
 }
-.ds-ribbon__pYthVb__drawer-backdrop {
+.ds-ribbon__DFAX9n__drawer-backdrop {
   position: fixed;
   inset: 0;
   background-color: var(--ds-overlay-black-00);
@@ -63,20 +63,20 @@
   pointer-events: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__drawer-backdrop {
+  .ds-ribbon__DFAX9n__drawer-backdrop {
     display: none;
   }
 }
-.ds-ribbon__pYthVb--drawer-open .ds-ribbon__pYthVb__drawer-backdrop {
+.ds-ribbon__DFAX9n--drawer-open .ds-ribbon__DFAX9n__drawer-backdrop {
   cursor: pointer;
   pointer-events: auto;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__drawer-backdrop {
+  .ds-ribbon__DFAX9n__drawer-backdrop {
     pointer-events: auto;
     z-index: 1;
   }
-  .ds-ribbon__pYthVb__drawer-backdrop, .ds-ribbon__pYthVb--drawer-open .ds-ribbon__pYthVb__container .ds-ribbon__pYthVb__drawer-backdrop {
+  .ds-ribbon__DFAX9n__drawer-backdrop, .ds-ribbon__DFAX9n--drawer-open .ds-ribbon__DFAX9n__container .ds-ribbon__DFAX9n__drawer-backdrop {
     position: static;
     background-color: unset;
     backdrop-filter: unset;
@@ -84,25 +84,25 @@
     transition: none;
   }
 }
-.ds-ribbon__pYthVb--drawer-clicked .ds-ribbon__pYthVb__drawer-backdrop {
+.ds-ribbon__DFAX9n--drawer-clicked .ds-ribbon__DFAX9n__drawer-backdrop {
   transition: background-color 0.3s, opacity 0s 0.3s;
 }
-.ds-ribbon__pYthVb--drawer-open .ds-ribbon__pYthVb__drawer-backdrop {
+.ds-ribbon__DFAX9n--drawer-open .ds-ribbon__DFAX9n__drawer-backdrop {
   background-color: var(--ds-overlay-black-50);
   opacity: 1;
   transition: background-color 0.1s 0.3s, opacity 0s 0s;
   z-index: 999;
 }
-.ds-ribbon__pYthVb__desktop-nav {
+.ds-ribbon__DFAX9n__desktop-nav {
   display: none;
   grid-column-end: -1;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__desktop-nav {
+  .ds-ribbon__DFAX9n__desktop-nav {
     display: block;
   }
 }
-.ds-ribbon__pYthVb__desktop-links {
+.ds-ribbon__DFAX9n__desktop-links {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -111,18 +111,18 @@
   gap: var(--ds-spacing-medium, 24px);
   align-items: center;
 }
-.ds-ribbon__pYthVb__desktop-link-item {
+.ds-ribbon__DFAX9n__desktop-link-item {
   display: flex;
   align-items: center;
   position: relative;
   text-transform: uppercase;
   height: var(--ds-spacing-2xLarge, 3rem);
 }
-.ds-ribbon__pYthVb__desktop-link {
+.ds-ribbon__DFAX9n__desktop-link {
   font-size: var(--ds-fontSize-12, 0.75rem);
   white-space: nowrap;
 }
-.ds-ribbon__pYthVb__desktop-badge {
+.ds-ribbon__DFAX9n__desktop-badge {
   font-size: var(--ds-font-size-small, 12px);
   letter-spacing: var(--ds-letterSpacing-wide, 0);
   margin-left: var(--ds-spacing-2xSmall, 8px);
@@ -131,7 +131,7 @@
   top: 0;
   right: 100%;
 }
-.ds-ribbon__pYthVb__desktop-badge > * {
+.ds-ribbon__DFAX9n__desktop-badge > * {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -140,12 +140,12 @@
   border-radius: 1.25rem;
   padding: 0 var(--ds-spacing-2xSmall, 0.5rem);
 }
-.ds-ribbon__pYthVb__desktop-badge > * span {
+.ds-ribbon__DFAX9n__desktop-badge > * span {
   line-height: 0;
   font-weight: 600;
   color: var(--ds-textColor-info, #005b80);
 }
-.ds-ribbon__pYthVb__drawer {
+.ds-ribbon__DFAX9n__drawer {
   position: absolute;
   top: 0;
   right: 0;
@@ -160,7 +160,7 @@
   cursor: default;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__drawer {
+  .ds-ribbon__DFAX9n__drawer {
     position: static;
     width: auto;
     max-width: none;
@@ -172,10 +172,10 @@
     overflow-y: visible;
   }
 }
-.ds-ribbon__pYthVb--drawer-open .ds-ribbon__pYthVb__drawer {
+.ds-ribbon__DFAX9n--drawer-open .ds-ribbon__DFAX9n__drawer {
   transform: translateX(0%);
 }
-.ds-ribbon__pYthVb__drawer-header {
+.ds-ribbon__DFAX9n__drawer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -188,36 +188,36 @@
   background-color: var(--ds-bgColor-white, #fff);
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__drawer-header {
+  .ds-ribbon__DFAX9n__drawer-header {
     display: none;
   }
 }
-.ds-ribbon__pYthVb__drawer-branding {
+.ds-ribbon__DFAX9n__drawer-branding {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   max-width: 8rem;
 }
 @media (min-width: 30rem) {
-  .ds-ribbon__pYthVb__drawer-branding {
+  .ds-ribbon__DFAX9n__drawer-branding {
     max-width: unset;
   }
 }
-.ds-ribbon__pYthVb__drawer-close {
+.ds-ribbon__DFAX9n__drawer-close {
   flex-shrink: 0;
   margin-left: var(--ds-spacing-small, 16px);
 }
-.ds-ribbon__pYthVb__drawer-nav {
+.ds-ribbon__DFAX9n__drawer-nav {
   display: block;
   padding: var(--ds-spacing-medium, 24px);
   position: relative;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__drawer-nav {
+  .ds-ribbon__DFAX9n__drawer-nav {
     padding: 0;
   }
 }
-.ds-ribbon__pYthVb__top-scrim, .ds-ribbon__pYthVb__bottom-scrim {
+.ds-ribbon__DFAX9n__top-scrim, .ds-ribbon__DFAX9n__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -228,21 +228,21 @@
   z-index: 1;
   display: none;
 }
-.ds-ribbon__pYthVb__top-scrim {
+.ds-ribbon__DFAX9n__top-scrim {
   top: 3rem;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-ribbon__pYthVb__bottom-scrim {
+.ds-ribbon__DFAX9n__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.has-top-scrim .ds-ribbon__pYthVb__top-scrim {
+.has-top-scrim .ds-ribbon__DFAX9n__top-scrim {
   display: block;
 }
-.has-bottom-scrim .ds-ribbon__pYthVb__bottom-scrim {
+.has-bottom-scrim .ds-ribbon__DFAX9n__bottom-scrim {
   display: block;
 }
-.ds-ribbon__pYthVb__drawer-links {
+.ds-ribbon__DFAX9n__drawer-links {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -250,7 +250,7 @@
   flex-direction: column;
   gap: var(--ds-spacing-4xSmall, 2px);
 }
-.ds-ribbon__pYthVb__drawer-link-item {
+.ds-ribbon__DFAX9n__drawer-link-item {
   display: flex;
   align-items: center;
   position: relative;
@@ -258,42 +258,42 @@
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-color-border-subtle);
   height: var(--ds-spacing-2xLarge, 3rem);
 }
-.ds-ribbon__pYthVb__drawer-link-item:last-child {
+.ds-ribbon__DFAX9n__drawer-link-item:last-child {
   border-bottom: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__drawer-link-item {
+  .ds-ribbon__DFAX9n__drawer-link-item {
     justify-content: flex-start;
     padding: 0;
     border-bottom: none;
   }
-  .ds-ribbon__pYthVb__drawer-link-item:last-child {
+  .ds-ribbon__DFAX9n__drawer-link-item:last-child {
     border-bottom: none;
   }
 }
-.ds-ribbon__pYthVb__drawer-link {
+.ds-ribbon__DFAX9n__drawer-link {
   font-size: var(--ds-fontSize-14, 0.875rem);
   white-space: nowrap;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__drawer-link {
+  .ds-ribbon__DFAX9n__drawer-link {
     font-size: var(--ds-fontSize-12, 0.75rem);
   }
 }
-.ds-ribbon__pYthVb__drawer-badge {
+.ds-ribbon__DFAX9n__drawer-badge {
   font-size: var(--ds-font-size-small, 12px);
   letter-spacing: var(--ds-letterSpacing-wide, 0);
   margin-left: var(--ds-spacing-2xSmall, 8px);
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__pYthVb__drawer-badge {
+  .ds-ribbon__DFAX9n__drawer-badge {
     position: absolute;
     top: 0;
     right: 100%;
   }
 }
-.ds-ribbon__pYthVb__drawer-badge > * {
+.ds-ribbon__DFAX9n__drawer-badge > * {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -302,25 +302,25 @@
   border-radius: 1.25rem;
   padding: 0 var(--ds-spacing-2xSmall, 0.5rem);
 }
-.ds-ribbon__pYthVb__drawer-badge > * span {
+.ds-ribbon__DFAX9n__drawer-badge > * span {
   line-height: 0;
   font-weight: 600;
   color: var(--ds-textColor-info, #005b80);
 }
 
-:host(.ds-ribbon__pYthVb--drawer-open) .ds-ribbon__pYthVb__drawer-backdrop {
+:host(.ds-ribbon__DFAX9n--drawer-open) .ds-ribbon__DFAX9n__drawer-backdrop {
   display: block;
 }
 @media (min-width: 60rem) {
-  :host(.ds-ribbon__pYthVb--drawer-open) .ds-ribbon__pYthVb__drawer-backdrop {
+  :host(.ds-ribbon__DFAX9n--drawer-open) .ds-ribbon__DFAX9n__drawer-backdrop {
     display: block;
   }
 }
-:host(.ds-ribbon__pYthVb--drawer-open) .ds-ribbon__pYthVb__drawer {
+:host(.ds-ribbon__DFAX9n--drawer-open) .ds-ribbon__DFAX9n__drawer {
   transform: translateX(0);
 }
 @media (min-width: 60rem) {
-  :host(.ds-ribbon__pYthVb--drawer-open) .ds-ribbon__pYthVb__drawer {
+  :host(.ds-ribbon__DFAX9n--drawer-open) .ds-ribbon__DFAX9n__drawer {
     transform: none;
   }
 }

package/dist/collection/components/01-base-components/ds-select/ds-select-native/ds-select-native.css

@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-select-native__pYthVb, .ds-select__pYthVb-custom {
+.ds-select-native__DFAX9n, .ds-select__DFAX9n-custom {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,11 +25,11 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-select-native__pYthVb:hover, .ds-select__pYthVb-custom:hover {
+.ds-select-native__DFAX9n:hover, .ds-select__DFAX9n-custom:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
 
-.ds-select-native__pYthVb__dropdown-icon, .ds-select__pYthVb-custom__dropdown-icon {
+.ds-select-native__DFAX9n__dropdown-icon, .ds-select__DFAX9n-custom__dropdown-icon {
   cursor: pointer;
   align-items: center;
   align-self: stretch;
@@ -40,60 +40,60 @@
   padding: 0 var(--ds-spacing-2xSmall);
 }
 
-.ds-select__pYthVb-custom-wrapper {
+.ds-select__DFAX9n-custom-wrapper {
   position: relative;
 }
 
-.ds-select__pYthVb-custom .ds-options__pYthVb {
+.ds-select__DFAX9n-custom .ds-options__DFAX9n {
   display: block;
 }
-.ds-select__pYthVb-custom-input-container {
+.ds-select__DFAX9n-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__pYthVb-custom-input-container:has(.ds-select__pYthVb-custom__clear-button:hover) .ds-select__pYthVb-custom {
+.ds-select__DFAX9n-custom-input-container:has(.ds-select__DFAX9n-custom__clear-button:hover) .ds-select__DFAX9n-custom {
   background-color: var(--ds-bgColor-white-hover) !important;
 }
-.ds-select__pYthVb-custom:not(.ds-select__pYthVb-custom--open, .ds-select__pYthVb-custom--invalid, .ds-select__pYthVb-custom--disabled):hover {
+.ds-select__DFAX9n-custom:not(.ds-select__DFAX9n-custom--open, .ds-select__DFAX9n-custom--invalid, .ds-select__DFAX9n-custom--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__pYthVb-custom:active:not(.ds-select__pYthVb-custom--open, .ds-select__pYthVb-custom--invalid, .ds-select__pYthVb-custom--disabled) {
+.ds-select__DFAX9n-custom:active:not(.ds-select__DFAX9n-custom--open, .ds-select__DFAX9n-custom--invalid, .ds-select__DFAX9n-custom--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__pYthVb-custom--open, .ds-select__pYthVb-custom:focus-visible {
+.ds-select__DFAX9n-custom--open, .ds-select__DFAX9n-custom:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-select__pYthVb-custom--open:not(.ds-select__pYthVb-custom--open--invalid, .ds-select__pYthVb-custom:focus-visible--invalid), .ds-select__pYthVb-custom:focus-visible:not(.ds-select__pYthVb-custom--open--invalid, .ds-select__pYthVb-custom:focus-visible--invalid) {
+.ds-select__DFAX9n-custom--open:not(.ds-select__DFAX9n-custom--open--invalid, .ds-select__DFAX9n-custom:focus-visible--invalid), .ds-select__DFAX9n-custom:focus-visible:not(.ds-select__DFAX9n-custom--open--invalid, .ds-select__DFAX9n-custom:focus-visible--invalid) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-select__pYthVb-custom--disabled {
+.ds-select__DFAX9n-custom--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__pYthVb-custom--disabled .ds-select__pYthVb-custom__dropdown-icon {
+.ds-select__DFAX9n-custom--disabled .ds-select__DFAX9n-custom__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__pYthVb-custom--invalid {
+.ds-select__DFAX9n-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__pYthVb-custom--invalid:not(.ds-select__pYthVb-custom--invalid--open, .ds-select__pYthVb-custom--invalid--disabled):active {
+.ds-select__DFAX9n-custom--invalid:not(.ds-select__DFAX9n-custom--invalid--open, .ds-select__DFAX9n-custom--invalid--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__pYthVb-custom--invalid:not(.ds-select__pYthVb-custom--invalid--disabled):hover {
+.ds-select__DFAX9n-custom--invalid:not(.ds-select__DFAX9n-custom--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__pYthVb-custom__dropdown-icon--has-clear-button {
+.ds-select__DFAX9n-custom__dropdown-icon--has-clear-button {
   margin-left: var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px));
 }
-.ds-select__pYthVb-custom__selected-option {
+.ds-select__DFAX9n-custom__selected-option {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -107,26 +107,26 @@
   padding-left: var(--ds-spacing-xSmall);
   padding-right: var(--ds-spacing-xSmall);
 }
-.ds-select__pYthVb-custom--has-icon .ds-select__pYthVb-custom__selected-option {
+.ds-select__DFAX9n-custom--has-icon .ds-select__DFAX9n-custom__selected-option {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-select__pYthVb-custom__selected-option__placeholder-icon {
+.ds-select__DFAX9n-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__pYthVb-custom__selected-option__text {
+.ds-select__DFAX9n-custom__selected-option__text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--ds-textColor-default);
 }
-.ds-select__pYthVb-custom__selected-option__text--none-selected {
+.ds-select__DFAX9n-custom__selected-option__text--none-selected {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__pYthVb-custom__selected-option__text--disabled {
+.ds-select__DFAX9n-custom__selected-option__text--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__pYthVb-custom input {
+.ds-select__DFAX9n-custom input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -140,32 +140,32 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-select__pYthVb-custom input::placeholder {
+.ds-select__DFAX9n-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__pYthVb-custom input:disabled {
+.ds-select__DFAX9n-custom input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__pYthVb-custom input:disabled::placeholder {
+.ds-select__DFAX9n-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__pYthVb-custom input:focus {
+.ds-select__DFAX9n-custom input:focus {
   outline: none;
 }
-.ds-select__pYthVb-custom__clear-button {
+.ds-select__DFAX9n-custom__clear-button {
   position: absolute;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);
   cursor: pointer;
 }
-.ds-select__pYthVb-custom__badge-container {
+.ds-select__DFAX9n-custom__badge-container {
   position: absolute;
   z-index: 2;
   pointer-events: none;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);
   padding: 10px 0;
 }
-.ds-select__pYthVb-custom__options-container {
+.ds-select__DFAX9n-custom__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -175,11 +175,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-select__pYthVb-custom__options-container--open {
+.ds-select__DFAX9n-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__pYthVb-custom__options-container__options {
+.ds-select__DFAX9n-custom__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -188,7 +188,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-select__pYthVb-custom__options-container__options__inner {
+.ds-select__DFAX9n-custom__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -199,7 +199,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-select__pYthVb-custom__options-container__options__inner__top-scrim, .ds-select__pYthVb-custom__options-container__options__inner__bottom-scrim {
+.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim, .ds-select__DFAX9n-custom__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -209,20 +209,20 @@
   z-index: 1;
   display: none;
 }
-.ds-select__pYthVb-custom__options-container__options__inner__top-scrim--visible, .ds-select__pYthVb-custom__options-container__options__inner__bottom-scrim--visible {
+.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim--visible, .ds-select__DFAX9n-custom__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-select__pYthVb-custom__options-container__options__inner__top-scrim {
+.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-select__pYthVb-custom__options-container__options__inner__top-scrim--dark {
+.ds-select__DFAX9n-custom__options-container__options__inner__top-scrim--dark {
   height: calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));
   background: none;
   margin-top: calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));
   box-shadow: 0 -2px 7px var(--ds-overlay-black-50);
 }
-.ds-select__pYthVb-custom__options-container__options__inner__bottom-scrim {
+.ds-select__DFAX9n-custom__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
@@ -242,25 +242,25 @@
   position: relative;
 }
 
-.ds-select-native__pYthVb:hover {
+.ds-select-native__DFAX9n:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select-native__pYthVb:focus-within {
+.ds-select-native__DFAX9n:focus-within {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-select-native__pYthVb--disabled {
+.ds-select-native__DFAX9n--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select-native__pYthVb--invalid {
+.ds-select-native__DFAX9n--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select-native__pYthVb__selected-text {
+.ds-select-native__DFAX9n__selected-text {
   flex: 1;
   padding: 0 var(--ds-spacing-xSmall);
   font-family: var(--ds-fontFamily-body);
@@ -270,7 +270,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.ds-select-native__pYthVb__select {
+.ds-select-native__DFAX9n__select {
   position: absolute;
   top: 0;
   left: 0;
@@ -289,10 +289,10 @@
   color: inherit;
   flex: 1;
 }
-.ds-select-native__pYthVb__select::placeholder {
+.ds-select-native__DFAX9n__select::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select-native__pYthVb__select:disabled {
+.ds-select-native__DFAX9n__select:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;