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

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

@@ -3,7 +3,7 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  :host:not(:has(.ds-combobox__DFAX9n--full-width)) {
+  :host:not(:has(.ds-combobox__rbEY9j--full-width)) {
     width: 20rem;
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-combobox__DFAX9n__input-container {
+.ds-combobox__rbEY9j__input-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,37 +25,37 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-combobox__DFAX9n__input-container--disabled {
+.ds-combobox__rbEY9j__input-container--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-combobox__DFAX9n__input-container--disabled .ds-combobox__DFAX9n__input-container__toggle-button {
+.ds-combobox__rbEY9j__input-container--disabled .ds-combobox__rbEY9j__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__DFAX9n__input-container--invalid {
+.ds-combobox__rbEY9j__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__DFAX9n__input-container--invalid:not(.ds-combobox__DFAX9n__input-container--open):not(.ds-combobox__DFAX9n__input-container--disabled):hover {
+.ds-combobox__rbEY9j__input-container--invalid:not(.ds-combobox__rbEY9j__input-container--open):not(.ds-combobox__rbEY9j__input-container--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-combobox__DFAX9n__input-container--invalid:not(.ds-combobox__DFAX9n__input-container--open):not(.ds-combobox__DFAX9n__input-container--disabled):active {
+.ds-combobox__rbEY9j__input-container--invalid:not(.ds-combobox__rbEY9j__input-container--open):not(.ds-combobox__rbEY9j__input-container--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-combobox__DFAX9n__input-container:active:not(.ds-combobox__DFAX9n__input-container--invalid, .ds-combobox__DFAX9n__input-container--disabled, .ds-combobox__DFAX9n__input-container--open) {
+.ds-combobox__rbEY9j__input-container:active:not(.ds-combobox__rbEY9j__input-container--invalid, .ds-combobox__rbEY9j__input-container--disabled, .ds-combobox__rbEY9j__input-container--open) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-combobox__DFAX9n__input-container:not(.ds-combobox__DFAX9n__input-container--open, .ds-combobox__DFAX9n__input-container:has(> .ds-combobox__DFAX9n__input-container__clear-button > button:focus), .ds-combobox__DFAX9n__input-container--invalid, .ds-combobox__DFAX9n__input-container--disabled):hover {
+.ds-combobox__rbEY9j__input-container:not(.ds-combobox__rbEY9j__input-container--open, .ds-combobox__rbEY9j__input-container:has(> .ds-combobox__rbEY9j__input-container__clear-button > button:focus), .ds-combobox__rbEY9j__input-container--invalid, .ds-combobox__rbEY9j__input-container--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-combobox__DFAX9n__input-container:has(> .ds-combobox__DFAX9n__input-container__input:focus), .ds-combobox__DFAX9n__input-container:has(> .ds-combobox__DFAX9n__input-container__clear-button > button:focus) {
+.ds-combobox__rbEY9j__input-container:has(> .ds-combobox__rbEY9j__input-container__input:focus), .ds-combobox__rbEY9j__input-container:has(> .ds-combobox__rbEY9j__input-container__clear-button > button:focus) {
   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-combobox__DFAX9n__input-container__input {
+.ds-combobox__rbEY9j__input-container__input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -69,47 +69,47 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-combobox__DFAX9n__input-container__input::placeholder {
+.ds-combobox__rbEY9j__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__DFAX9n__input-container__input:disabled {
+.ds-combobox__rbEY9j__input-container__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__DFAX9n__input-container__input:disabled::placeholder {
+.ds-combobox__rbEY9j__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__DFAX9n__input-container__input:focus {
+.ds-combobox__rbEY9j__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__DFAX9n__input-container__icon {
+.ds-combobox__rbEY9j__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__DFAX9n__input-container__icon + .ds-combobox__DFAX9n__input-container__input {
+.ds-combobox__rbEY9j__input-container__icon + .ds-combobox__rbEY9j__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__DFAX9n__input-container__badge-container {
+.ds-combobox__rbEY9j__input-container__badge-container {
   pointer-events: none;
   user-select: none;
 }
-.ds-combobox__DFAX9n__input-container__badge-container--padded {
+.ds-combobox__rbEY9j__input-container__badge-container--padded {
   padding-right: calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-combobox__DFAX9n__input-container__clear-button, .ds-combobox__DFAX9n__input-container__toggle-button {
+.ds-combobox__rbEY9j__input-container__clear-button, .ds-combobox__rbEY9j__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__DFAX9n__input-container__toggle-button {
+.ds-combobox__rbEY9j__input-container__toggle-button {
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.ds-combobox__DFAX9n__input-container__toggle-button:focus {
+.ds-combobox__rbEY9j__input-container__toggle-button:focus {
   outline: none;
 }
-.ds-combobox__DFAX9n__input-container__toggle-button__icon {
+.ds-combobox__rbEY9j__input-container__toggle-button__icon {
   align-items: center;
   align-self: stretch;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);
@@ -118,7 +118,7 @@
   pointer-events: none;
   padding: 0 var(--ds-spacing-2xSmall);
 }
-.ds-combobox__DFAX9n__options-container {
+.ds-combobox__rbEY9j__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -128,11 +128,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-combobox__DFAX9n__options-container--open {
+.ds-combobox__rbEY9j__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__DFAX9n__options-container__options {
+.ds-combobox__rbEY9j__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -141,7 +141,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-combobox__DFAX9n__options-container__options__inner {
+.ds-combobox__rbEY9j__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -152,7 +152,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-combobox__DFAX9n__options-container__options__inner__top-scrim, .ds-combobox__DFAX9n__options-container__options__inner__bottom-scrim {
+.ds-combobox__rbEY9j__options-container__options__inner__top-scrim, .ds-combobox__rbEY9j__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -162,20 +162,20 @@
   z-index: 1;
   display: none;
 }
-.ds-combobox__DFAX9n__options-container__options__inner__top-scrim--visible, .ds-combobox__DFAX9n__options-container__options__inner__bottom-scrim--visible {
+.ds-combobox__rbEY9j__options-container__options__inner__top-scrim--visible, .ds-combobox__rbEY9j__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__DFAX9n__options-container__options__inner__top-scrim {
+.ds-combobox__rbEY9j__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-combobox__DFAX9n__options-container__options__inner__top-scrim--dark {
+.ds-combobox__rbEY9j__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: var(--ds-shadow-overflow);
 }
-.ds-combobox__DFAX9n__options-container__options__inner__bottom-scrim {
+.ds-combobox__rbEY9j__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }

package/dist/collection/components/01-base-components/ds-combobox/stories/ds-combobox.examples.stories.js

@@ -89,6 +89,7 @@ const renderCombobox = () => {
         ? html `<div style="display: flex; align-items: flex-start; flex-direction: column; gap: var(--ds-spacing-md);">
           <ds-chip-group
             ${ref(chipGroupRef)}
+            ds-aria-label="Selected options"
             @dsChipClick=${(event) => {
             const value = event.detail;
             const newValue = dsValue.filter(v => v !== value);

package/dist/collection/components/01-base-components/ds-control-label/ds-control-label.css

@@ -1,4 +1,4 @@
-.ds-control-label__DFAX9n__label {
+.ds-control-label__rbEY9j__label {
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -8,12 +8,12 @@
   color: var(--ds-textColor-default);
 }
 
-.ds-control-label__DFAX9n {
+.ds-control-label__rbEY9j {
   font-family: var(--ds-fontFamily-body);
   display: flex;
   flex-direction: column;
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-control-label__DFAX9n:empty {
+.ds-control-label__rbEY9j:empty {
   display: none;
 }

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

@@ -1,18 +1,18 @@
-.ds-grid__DFAX9n.ds-grid__DFAX9n--container {
+.ds-grid__rbEY9j.ds-grid__rbEY9j--container {
   max-width: calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));
   margin: 0 var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n--container {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j--container {
     margin: 0 var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 90rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n--container {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j--container {
     margin: 0 auto;
   }
 }
-.ds-grid__DFAX9n.ds-grid__DFAX9n__flex {
+.ds-grid__rbEY9j.ds-grid__rbEY9j__flex {
   display: flex;
   flex-flow: wrap;
   min-width: 0;
@@ -20,86 +20,86 @@
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__flex {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__flex {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__flex {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__flex {
     gap: var(--ds-spacing-layout-small);
   }
 }
-.ds-grid__DFAX9n.ds-grid__DFAX9n__flex:not(.ds-grid__DFAX9n.ds-grid__DFAX9n__flex--container) {
+.ds-grid__rbEY9j.ds-grid__rbEY9j__flex:not(.ds-grid__rbEY9j.ds-grid__rbEY9j__flex--container) {
   width: calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile));
 }
 @media (min-width: 30rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__flex:not(.ds-grid__DFAX9n.ds-grid__DFAX9n__flex--container) {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__flex:not(.ds-grid__rbEY9j.ds-grid__rbEY9j__flex--container) {
     width: calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet));
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__flex:not(.ds-grid__DFAX9n.ds-grid__DFAX9n__flex--container) {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__flex:not(.ds-grid__rbEY9j.ds-grid__rbEY9j__flex--container) {
     width: calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop));
   }
 }
-.ds-grid__DFAX9n.ds-grid__DFAX9n__grid.ds-grid__DFAX9n--container {
+.ds-grid__rbEY9j.ds-grid__rbEY9j__grid.ds-grid__rbEY9j--container {
   display: grid;
   grid-template-columns: repeat(var(--ds-columns-mobile), 1fr);
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 30rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__grid.ds-grid__DFAX9n--container {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__grid.ds-grid__rbEY9j--container {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__grid.ds-grid__DFAX9n--container {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__grid.ds-grid__rbEY9j--container {
     gap: var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__grid.ds-grid__DFAX9n--container {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__grid.ds-grid__rbEY9j--container {
     grid-template-columns: repeat(var(--ds-columns-tablet), 1fr);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__grid.ds-grid__DFAX9n--container {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__grid.ds-grid__rbEY9j--container {
     grid-template-columns: repeat(var(--ds-columns-desktop), 1fr);
   }
 }
-.ds-grid__DFAX9n.ds-grid__DFAX9n__grid {
+.ds-grid__rbEY9j.ds-grid__rbEY9j__grid {
   grid-column: span var(--ds-size-mobile);
   grid-row: span var(--ds-row-span-mobile, 1);
 }
 @supports (grid-column: span var(--ds-size-mobile)) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__grid[style*="--ds-size-mobile: -1"] {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__grid[style*="--ds-size-mobile: -1"] {
     grid-column: 1/-1;
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__grid {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__grid {
     grid-column: span var(--ds-size-tablet);
     grid-row: span var(--ds-row-span-tablet, 1);
   }
   @supports (grid-column: span var(--ds-size-tablet)) {
-    .ds-grid__DFAX9n.ds-grid__DFAX9n__grid[style*="--ds-size-tablet: -1"] {
+    .ds-grid__rbEY9j.ds-grid__rbEY9j__grid[style*="--ds-size-tablet: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__DFAX9n.ds-grid__DFAX9n__grid:not([style*="--ds-size-tablet: -1"]) {
+    .ds-grid__rbEY9j.ds-grid__rbEY9j__grid:not([style*="--ds-size-tablet: -1"]) {
       grid-column: span var(--ds-size-tablet);
     }
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__DFAX9n.ds-grid__DFAX9n__grid {
+  .ds-grid__rbEY9j.ds-grid__rbEY9j__grid {
     grid-column: span var(--ds-size-desktop);
     grid-row: span var(--ds-row-span-desktop, 1);
   }
   @supports (grid-column: span var(--ds-size-desktop)) {
-    .ds-grid__DFAX9n.ds-grid__DFAX9n__grid[style*="--ds-size-desktop: -1"] {
+    .ds-grid__rbEY9j.ds-grid__rbEY9j__grid[style*="--ds-size-desktop: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__DFAX9n.ds-grid__DFAX9n__grid:not([style*="--ds-size-desktop: -1"]) {
+    .ds-grid__rbEY9j.ds-grid__rbEY9j__grid:not([style*="--ds-size-desktop: -1"]) {
       grid-column: span var(--ds-size-desktop);
     }
   }

package/dist/collection/components/01-base-components/ds-group-label/ds-group-label.css

@@ -1,4 +1,4 @@
-.ds-group-label__DFAX9n__label {
+.ds-group-label__rbEY9j__label {
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -8,10 +8,10 @@
   color: var(--ds-textColor-default);
 }
 
-.ds-group-label__DFAX9n {
+.ds-group-label__rbEY9j {
   display: flex;
   flex-direction: column;
 }
-.ds-group-label__DFAX9n:empty {
+.ds-group-label__rbEY9j:empty {
   display: none;
 }

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

@@ -2,9 +2,9 @@
   display: flex;
 }
 
-.ds-icon__DFAX9n--container {
+.ds-icon__rbEY9j--container {
   display: flex;
 }
-.ds-icon__DFAX9n--hidden {
+.ds-icon__rbEY9j--hidden {
   display: none;
 }

package/dist/collection/components/01-base-components/ds-icon/stories/ds-icon.stories.js

@@ -6,7 +6,7 @@ const meta = {
     component: 'ds-icon',
     argTypes: {
         dsName: {
-            options: icons.map(icon => icon.name),
+            options: icons.map(icon => icon.name).sort(),
             control: {
                 type: 'select',
             },

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.css

@@ -1,20 +1,20 @@
-.ds-input-validity__DFAX9n {
+.ds-input-validity__rbEY9j {
   display: flex;
   align-items: center;
   margin-top: var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-input-validity__DFAX9n--error {
+.ds-input-validity__rbEY9j--error {
   color: var(--ds-textColor-danger);
 }
-.ds-input-validity__DFAX9n--success {
+.ds-input-validity__rbEY9j--success {
   color: var(--ds-textColor-success);
 }
-.ds-input-validity__DFAX9n__icon {
+.ds-input-validity__rbEY9j__icon {
   display: block;
   height: 1.5rem;
 }
-.ds-input-validity__DFAX9n small {
+.ds-input-validity__rbEY9j small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);

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

@@ -1,16 +1,16 @@
 :host {
   display: inline;
 }
-:host:has(.ds-link__DFAX9n--standalone) {
+:host:has(.ds-link__rbEY9j--standalone) {
   display: inline-block;
 }
 
-.ds-link__DFAX9n:focus-visible {
+.ds-link__rbEY9j: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-link__DFAX9n {
+.ds-link__rbEY9j {
   box-sizing: border-box;
   display: inline;
   color: var(--ds-textColor-link);
@@ -25,87 +25,87 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link__DFAX9n--semibold {
+.ds-link__rbEY9j--semibold {
   font-weight: var(--ds-fontWeight-semibold);
 }
-.ds-link__DFAX9n--bold {
+.ds-link__rbEY9j--bold {
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-link__DFAX9n--2xLarge {
+.ds-link__rbEY9j--2xLarge {
   font-size: var(--ds-fontSize-22);
 }
-.ds-link__DFAX9n--xLarge {
+.ds-link__rbEY9j--xLarge {
   font-size: var(--ds-fontSize-20);
 }
-.ds-link__DFAX9n--large {
+.ds-link__rbEY9j--large {
   font-size: var(--ds-fontSize-18);
 }
-.ds-link__DFAX9n--medium {
+.ds-link__rbEY9j--medium {
   font-size: var(--ds-fontSize-16);
 }
-.ds-link__DFAX9n--small {
+.ds-link__rbEY9j--small {
   font-size: var(--ds-fontSize-14);
 }
-.ds-link__DFAX9n--xSmall {
+.ds-link__rbEY9j--xSmall {
   font-size: var(--ds-fontSize-12);
 }
-.ds-link__DFAX9n__icon {
+.ds-link__rbEY9j__icon {
   display: inline-block;
   vertical-align: -0.125em;
 }
-.ds-link__DFAX9n__icon--start-inline {
+.ds-link__rbEY9j__icon--start-inline {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-link__DFAX9n__icon--start-standalone {
+.ds-link__rbEY9j__icon--start-standalone {
   margin-right: var(--ds-spacing-2xSmall);
 }
-.ds-link__DFAX9n__icon--end-inline {
+.ds-link__rbEY9j__icon--end-inline {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link__DFAX9n__icon--end-standalone {
+.ds-link__rbEY9j__icon--end-standalone {
   margin-left: var(--ds-spacing-2xSmall);
 }
-.ds-link__DFAX9n:hover, .ds-link__DFAX9n:active {
+.ds-link__rbEY9j:hover, .ds-link__rbEY9j:active {
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-link__DFAX9n:hover {
+.ds-link__rbEY9j:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link__DFAX9n:active {
+.ds-link__rbEY9j:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__DFAX9n:visited {
+.ds-link__rbEY9j:visited {
   color: var(--ds-textColor-link-visited);
 }
-.ds-link__DFAX9n--standalone {
+.ds-link__rbEY9j--standalone {
   color: var(--ds-textColor-link);
   text-decoration-line: none;
 }
-.ds-link__DFAX9n--standalone:hover, .ds-link__DFAX9n--standalone:active {
+.ds-link__rbEY9j--standalone:hover, .ds-link__rbEY9j--standalone:active {
   text-decoration-line: underline;
 }
-.ds-link__DFAX9n--standalone:hover {
+.ds-link__rbEY9j--standalone:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link__DFAX9n--standalone:active {
+.ds-link__rbEY9j--standalone:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__DFAX9n--standalone:focus-visible {
+.ds-link__rbEY9j--standalone:focus-visible {
   color: var(--ds-textColor-link);
 }
-.ds-link__DFAX9n--standalone:visited {
+.ds-link__rbEY9j--standalone:visited {
   color: var(--ds-textColor-link);
 }
-.ds-link__DFAX9n--colour-white {
+.ds-link__rbEY9j--colour-white {
   color: var(--ds-textColor-white);
 }
-.ds-link__DFAX9n--colour-white:hover, .ds-link__DFAX9n--colour-white:active, .ds-link__DFAX9n--colour-white:visited, .ds-link__DFAX9n--colour-white:focus-visible {
+.ds-link__rbEY9j--colour-white:hover, .ds-link__rbEY9j--colour-white:active, .ds-link__rbEY9j--colour-white:visited, .ds-link__rbEY9j--colour-white:focus-visible {
   color: var(--ds-textColor-white);
 }
-.ds-link__DFAX9n--colour-black {
+.ds-link__rbEY9j--colour-black {
   color: var(--ds-textColor-default);
 }
-.ds-link__DFAX9n--colour-black:hover, .ds-link__DFAX9n--colour-black:active, .ds-link__DFAX9n--colour-black:visited, .ds-link__DFAX9n--colour-black:focus-visible {
+.ds-link__rbEY9j--colour-black:hover, .ds-link__rbEY9j--colour-black:active, .ds-link__rbEY9j--colour-black:visited, .ds-link__rbEY9j--colour-black:focus-visible {
   color: var(--ds-textColor-default);
 }