@evance/evance-ui 1.0.2 → 1.0.3

package/dist/cjs/style.css

@@ -1,69 +1,28 @@
 
 .ev-icon {
-    --icon-color: var(--0fbd818c);
-}
-.ev-button-group {
-  display: inline-flex;
-  flex-wrap: nowrap;
-  max-width: 100%;
-  min-width: 0;
-  vertical-align: middle;
-  border-radius: var(--input-radius);
+    --icon-color: var(--1c3649dc);
 }
 
-.ev-button-group--container {
-  border-radius: inherit;
-  display: inline-flex;
+.ev-heading {
+    --max-lines: var(--4ed597d1);
 }
-
 /**
-    ## Rounded modifier
-*/
-.ev-button-group.is-rounded {
-  border-radius: 999px;
-}
-
-.ev-button-group .ev-button:first-child {
-  border-start-start-radius: inherit;
-  border-end-start-radius: inherit;
-}
-.ev-button-group .ev-button:last-child {
-  border-start-end-radius: inherit;
-  border-end-end-radius: inherit;
-}
-
-.ev-button-group.is-appearance-default.is-variant-outlined {
-  border: 1px solid var(--border-input);
-}
-.ev-button-group.is-appearance-default.is-variant-outlined .ev-button:not(.is-active) {
-  border-color: transparent;
-}
-
-.ev-button-group.is-variant-tonal .ev-button:has(+ .ev-button), .ev-button-group.is-variant-bold .ev-button:has(+ .ev-button), .ev-button-group.is-variant-default .ev-button:has(+ .ev-button) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+    ## Clickable
+ */
+.ev-label {
+  display: block;
 }
-.ev-button-group.is-variant-tonal .ev-button + .ev-button, .ev-button-group.is-variant-bold .ev-button + .ev-button, .ev-button-group.is-variant-default .ev-button + .ev-button {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
+.ev-label.is-clickable {
+  cursor: pointer;
 }
 
-.ev-button-group.is-variant-outlined .ev-button-group--container {
-  margin: -1px;
+.ev-label--title {
+  font-weight: var(--font-weight-semibold);
 }
 
-.ev-button-group .ev-button.is-active {
-  border-radius: inherit;
-}
-.ev-button-group .ev-button.is-active:has(+ .is-active) {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  border-inline-end-color: transparent;
-}
-.ev-button-group .ev-button.is-active + .is-active {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  border-inline-start-color: transparent;
+.ev-label--hint {
+  font-size: var(--text-size-small);
+  color: var(--text-subtle);
 }.ev-errors {
   color: var(--text-danger);
   overflow: hidden;
@@ -83,11 +42,6 @@
 }
 .ev-errors .list-leave-active {
   position: absolute;
-}/**
-    ## Clickable
- */
-.ev-label.is-clickable {
-  cursor: pointer;
 }/* Default */
 .ev-checkbox {
   display: inline-flex;
@@ -311,148 +265,6 @@ hr.ev-divider.is-vertical, .ev-divider.is-vertical .ev-divider--line {
 }
 .ev-icon.is-size-large {
   width: var(--icon-size-large);
-}.ev-quickfind {
-  align-items: center;
-  background-color: var(--background-notice);
-  border-radius: 999px;
-  color: var(--text-notice);
-  display: inline-flex;
-  font-weight: var(--font-weight-medium);
-  height: var(--icon-size-medium);
-  letter-spacing: 0.025em;
-  line-height: 1;
-  padding: 0 0.7em 0 0.3em;
-  gap: 0.1em;
-}
-
-.ev-quickfind.is-variant-bold {
-  background-color: var(--color-primary);
-  color: var(--surface-default);
-  font-weight: var(--font-weight-bold);
-}
-
-.ev-quickfind.is-size-small {
-  font-size: var(--text-size-small);
-  font-weight: var(--font-weight-bold);
-  height: 22px;
-}
-.ev-quickfind.is-size-large {
-  font-size: var(--text-size-large);
-  height: var(--icon-size-large);
-}/**
-    # EvProgress
- */
-.ev-progress {
-  background: transparent;
-  border-radius: 999px;
-  height: 8px;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.ev-progress--track,
-.ev-progress--bar {
-  background: currentColor;
-  bottom: 0;
-  height: inherit;
-  left: 0;
-  position: absolute;
-  top: 0;
-  transition: inherit;
-  border-radius: 999px;
-  width: 100%;
-}
-
-.ev-progress--track {
-  opacity: 0.1;
-}
-
-.ev-progress--bar {
-  will-change: transform, left, width;
-  transition-property: transform, left, width;
-}
-
-/**
-    ## Appearance
- */
-.ev-progress {
-  /* danger */
-  /* information */
-  /* notice */
-  /* success */
-  /* warning */
-}
-.ev-progress.is-appearance-danger {
-  color: var(--background-danger-bold);
-}
-.ev-progress.is-appearance-information {
-  color: var(--background-information-bold);
-}
-.ev-progress.is-appearance-notice {
-  color: var(--background-notice-bold);
-}
-.ev-progress.is-appearance-success {
-  color: var(--background-success-bold);
-}
-.ev-progress.is-appearance-warning {
-  color: var(--background-warning-bold);
-}
-
-/**
-    ## Indeterminate
- */
-.ev-progress--indeterminate--primary {
-  animation: ev-progress-indeterminate-primary 2s infinite linear;
-}
-
-.ev-progress--indeterminate--secondary {
-  animation: ev-progress-indeterminate-secondary 2s infinite linear;
-}
-
-@keyframes ev-progress-indeterminate-primary {
-  0% {
-    animation-timing-function: cubic-bezier(0.15, 0, 0.5, 0.4);
-    left: -25%;
-    width: 10%;
-  }
-  40% {
-    animation-timing-function: cubic-bezier(0.4, 0.6, 0.6, 0.9);
-    left: 40%;
-    width: 80%;
-  }
-  100% {
-    left: 160%;
-    width: 60%;
-  }
-}
-@keyframes ev-progress-indeterminate-secondary {
-  0% {
-    left: -100%;
-    width: 100%;
-  }
-  60% {
-    animation-timing-function: cubic-bezier(0.3, 0.4, 0.5, 0.9);
-    left: -100%;
-    width: 100%;
-  }
-  100% {
-    left: 100%;
-    width: 10%;
-  }
-}
-/**
-    ## Size
- */
-.ev-progress.is-size-small {
-  height: 4px;
-}
-.ev-progress.is-size-medium {
-  height: 8px;
-}
-.ev-progress.is-size-large {
-  height: 16px;
 }.ev-progress-circular {
   align-items: center;
   display: inline-flex;
@@ -547,16 +359,6 @@ hr.ev-divider.is-vertical, .ev-divider.is-vertical .ev-divider--line {
   100% {
     transform: rotate(270deg);
   }
-}.ev-radio-group--label {
-  margin-bottom: var(--spacer-100);
-}
-
-.ev-radio-group.is-inline .ev-radio-group--control {
-  display: flex;
-  gap: var(--spacer-100);
-}
-.ev-radio-group.is-inline .ev-radio {
-  display: inline-flex;
 }/* Default */
 /**
     # EvButton
@@ -935,6 +737,254 @@ hr.ev-divider.is-vertical, .ev-divider.is-vertical .ev-divider--line {
 .ev-button.is-icon {
   padding: 0 !important;
   aspect-ratio: 1;
+}.ev-button-group {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  vertical-align: middle;
+  border-radius: var(--input-radius);
+  --gap: var(--spacer-0, 0);
+}
+
+.ev-button-group--container {
+  border-radius: inherit;
+  display: inline-flex;
+  gap: var(--gap);
+}
+
+/**
+    ## Rounded modifier
+*/
+.ev-button-group.is-rounded {
+  border-radius: 999px;
+}
+
+.ev-button-group.is-gap-none .ev-button:first-child {
+  border-start-start-radius: inherit;
+  border-end-start-radius: inherit;
+}
+.ev-button-group.is-gap-none .ev-button:last-child {
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+}
+
+.ev-button-group.is-variant-outlined.is-appearance-default {
+  border: 1px solid var(--border-input);
+}
+.ev-button-group.is-variant-outlined.is-appearance-danger {
+  border: 1px solid var(--background-danger-bold);
+}
+.ev-button-group.is-variant-outlined.is-appearance-information {
+  border: 1px solid var(--background-information-bold);
+}
+.ev-button-group.is-variant-outlined.is-appearance-notice {
+  border: 1px solid var(--background-notice-bold);
+}
+.ev-button-group.is-variant-outlined.is-appearance-primary {
+  border: 1px solid var(--background-brand-bold);
+}
+.ev-button-group.is-variant-outlined.is-appearance-success {
+  border: 1px solid var(--background-success-bold);
+}
+.ev-button-group.is-variant-outlined.is-appearance-warning {
+  border: 1px solid var(--background-warning-bold);
+}
+.ev-button-group.is-variant-outlined .ev-button-group--container {
+  margin: -1px;
+}
+.ev-button-group.is-variant-outlined .ev-button:not(.is-active) {
+  border-color: transparent;
+}
+
+.ev-button-group.is-gap-none.is-variant-tonal .ev-button:has(+ .ev-button), .ev-button-group.is-gap-none.is-variant-bold .ev-button:has(+ .ev-button), .ev-button-group.is-gap-none.is-variant-default .ev-button:has(+ .ev-button) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.ev-button-group.is-gap-none.is-variant-tonal .ev-button + .ev-button, .ev-button-group.is-gap-none.is-variant-bold .ev-button + .ev-button, .ev-button-group.is-gap-none.is-variant-default .ev-button + .ev-button {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.ev-button-group.is-gap-none .ev-button.is-active {
+  border-radius: inherit;
+}
+.ev-button-group.is-gap-none .ev-button.is-active:has(+ .is-active) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-inline-end-color: transparent;
+}
+.ev-button-group.is-gap-none .ev-button.is-active + .is-active {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-inline-start-color: transparent;
+}
+
+.ev-button-group.is-gap-x-small {
+  --gap: var(--spacer-25);
+}
+.ev-button-group.is-gap-small {
+  --gap: var(--spacer-50);
+}
+.ev-button-group.is-gap-medium {
+  --gap: var(--spacer-100);
+}
+.ev-button-group.is-gap-large {
+  --gap: var(--spacer-150);
+}
+.ev-button-group.is-gap-x-large {
+  --gap: var(--spacer-300);
+}/**
+    # EvProgress
+ */
+.ev-progress {
+  background: transparent;
+  border-radius: 999px;
+  height: 8px;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ev-progress--track,
+.ev-progress--bar {
+  background: currentColor;
+  bottom: 0;
+  height: inherit;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transition: inherit;
+  border-radius: 999px;
+  width: 100%;
+}
+
+.ev-progress--track {
+  opacity: 0.1;
+}
+
+.ev-progress--bar {
+  will-change: transform, left, width;
+  transition-property: transform, left, width;
+}
+
+/**
+    ## Appearance
+ */
+.ev-progress {
+  /* danger */
+  /* information */
+  /* notice */
+  /* success */
+  /* warning */
+}
+.ev-progress.is-appearance-danger {
+  color: var(--background-danger-bold);
+}
+.ev-progress.is-appearance-information {
+  color: var(--background-information-bold);
+}
+.ev-progress.is-appearance-notice {
+  color: var(--background-notice-bold);
+}
+.ev-progress.is-appearance-success {
+  color: var(--background-success-bold);
+}
+.ev-progress.is-appearance-warning {
+  color: var(--background-warning-bold);
+}
+
+/**
+    ## Indeterminate
+ */
+.ev-progress--indeterminate--primary {
+  animation: ev-progress-indeterminate-primary 2s infinite linear;
+}
+
+.ev-progress--indeterminate--secondary {
+  animation: ev-progress-indeterminate-secondary 2s infinite linear;
+}
+
+@keyframes ev-progress-indeterminate-primary {
+  0% {
+    animation-timing-function: cubic-bezier(0.15, 0, 0.5, 0.4);
+    left: -25%;
+    width: 10%;
+  }
+  40% {
+    animation-timing-function: cubic-bezier(0.4, 0.6, 0.6, 0.9);
+    left: 40%;
+    width: 80%;
+  }
+  100% {
+    left: 160%;
+    width: 60%;
+  }
+}
+@keyframes ev-progress-indeterminate-secondary {
+  0% {
+    left: -100%;
+    width: 100%;
+  }
+  60% {
+    animation-timing-function: cubic-bezier(0.3, 0.4, 0.5, 0.9);
+    left: -100%;
+    width: 100%;
+  }
+  100% {
+    left: 100%;
+    width: 10%;
+  }
+}
+/**
+    ## Size
+ */
+.ev-progress.is-size-small {
+  height: 4px;
+}
+.ev-progress.is-size-medium {
+  height: 8px;
+}
+.ev-progress.is-size-large {
+  height: 16px;
+}.ev-quickfind {
+  align-items: center;
+  background-color: var(--background-notice);
+  border-radius: 999px;
+  color: var(--text-notice);
+  display: inline-flex;
+  font-weight: var(--font-weight-medium);
+  height: var(--icon-size-medium);
+  letter-spacing: 0.025em;
+  line-height: 1;
+  padding: 0 0.7em 0 0.3em;
+  gap: 0.1em;
+}
+
+.ev-quickfind.is-variant-bold {
+  background-color: var(--color-primary);
+  color: var(--surface-default);
+  font-weight: var(--font-weight-bold);
+}
+
+.ev-quickfind.is-size-small {
+  font-size: var(--text-size-small);
+  font-weight: var(--font-weight-bold);
+  height: 22px;
+}
+.ev-quickfind.is-size-large {
+  font-size: var(--text-size-large);
+  height: var(--icon-size-large);
+}.ev-radio-group--label {
+  margin-bottom: var(--spacer-100);
+}
+
+.ev-radio-group.is-inline .ev-radio-group--control {
+  display: flex;
+  gap: var(--spacer-100);
+}
+.ev-radio-group.is-inline .ev-radio {
+  display: inline-flex;
 }.ev-slide-group {
   display: flex;
   overflow: hidden;
@@ -1481,6 +1531,65 @@ html.ev-overlay-scroll-blocked {
 }.ev-surface.ev-date-field--surface {
   margin: 0;
   width: fit-content;
+}.ev-field-help {
+  display: flex;
+  align-items: flex-start;
+}
+
+.ev-field-help--field {
+  flex: 1;
+}
+
+.ev-field-help--content {
+  --pointer-distance: 48px;
+  position: relative;
+  padding-left: var(--pointer-distance);
+  max-width: var(--form-help-width, 388px);
+}
+
+.ev-field-help--pointer {
+  position: absolute;
+  width: var(--pointer-distance);
+  left: 0;
+  top: 26px;
+}
+
+.ev-field-help--pointer-circle {
+  width: 5px;
+  height: 5px;
+  background: var(--background-brand-bold);
+  border-radius: 50%;
+  position: absolute;
+  top: -2px;
+  left: -2px;
+}
+.ev-field-help--pointer-circle:after {
+  content: "";
+  position: absolute;
+  width: 11px;
+  height: 11px;
+  background: var(--background-brand);
+  border-radius: 50%;
+  top: -3px;
+  left: -3px;
+}
+
+.ev-field-help--pointer-line {
+  height: 1px;
+  width: 100%;
+  border-top: 1px solid var(--background-brand-bold);
+}.ev-form-help {
+  --form-help-width: 388px;
+  position: relative;
+}
+
+.ev-form-help .ev-field-help--content {
+  position: absolute;
+  right: calc(0px - var(--form-help-width));
+}
+
+.ev-form-help.is-visible {
+  margin-right: var(--form-help-width);
 }.ev-kbd {
   background: var(--background-neutral);
   border: 1px solid var(--border-muted);
@@ -1491,11 +1600,27 @@ html.ev-overlay-scroll-blocked {
   padding: 0.125em 0.425em;
 }
 
-.ev-kbd.is-size-small {
-  font-size: 0.85em;
-}
-.ev-kbd.is-size-large {
-  font-size: 1.15em;
+.ev-kbd.is-size-small {
+  font-size: 0.85em;
+}
+.ev-kbd.is-size-large {
+  font-size: 1.15em;
+}/* Default */
+.ev-link {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacer-50);
+}
+
+.ev-link[disabled], .ev-link.is-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  filter: grayscale(0.5);
+  user-select: none;
+}
+
+.ev-link.is-appearance-subtle {
+  color: inherit;
 }/* Default */
 .ev-lozenge {
   align-items: center;
@@ -1650,6 +1775,17 @@ html.ev-overlay-scroll-blocked {
 }
 .ev-lozenge.is-appearance-warning.is-variant-subtle {
   background-color: transparent;
+}.ev-heading.is-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ev-heading.is-truncate-lines {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--max-lines, 2);
+  line-clamp: var(--max-lines, 2);
+  -webkit-box-orient: vertical;
 }.ev-message {
   align-items: flex-start;
   border-radius: var(--sheet-radius, 4px);
@@ -1665,7 +1801,6 @@ html.ev-overlay-scroll-blocked {
 }
 
 .ev-message--title {
-  font-size: var(--heading-size-5);
   margin-bottom: 0;
   color: var(--message-title, var(--heading-default));
 }
@@ -1680,6 +1815,12 @@ html.ev-overlay-scroll-blocked {
   --message-background: var(--background-neutral);
   --message-title: var(--heading-on-muted);
 }
+.ev-message.is-variant-tonal.is-appearance-primary {
+  --message-icon: var(--text-brand);
+  --message-background: var(--background-brand);
+  --message-text: var(--text-on-brand);
+  --message-title: var(--heading-on-brand);
+}
 .ev-message.is-variant-tonal.is-appearance-danger {
   --message-icon: var(--text-danger);
   --message-background: var(--background-danger);
@@ -1718,6 +1859,12 @@ html.ev-overlay-scroll-blocked {
   --message-title: var(--heading-on-muted-bold);
   --message-icon: var(--heading-on-muted-bold);
 }
+.ev-message.is-variant-bold.is-appearance-primary {
+  --message-background: var(--background-brand-bold);
+  --message-text: var(--text-on-brand-bold);
+  --message-title: var(--heading-on-brand-bold);
+  --message-icon: var(--heading-on-brand-bold);
+}
 .ev-message.is-variant-bold.is-appearance-danger {
   --message-background: var(--background-danger-bold);
   --message-text: var(--text-on-danger-bold);
@@ -1756,6 +1903,9 @@ html.ev-overlay-scroll-blocked {
 .ev-message.is-variant-subtle.is-appearance-default {
   --message-icon: var(--icon-color);
 }
+.ev-message.is-variant-subtle.is-appearance-primary {
+  --message-icon: var(--text-brand);
+}
 .ev-message.is-variant-subtle.is-appearance-danger {
   --message-icon: var(--text-danger);
 }
@@ -1846,135 +1996,6 @@ html.ev-overlay-scroll-blocked {
   display: flex;
   align-items: center;
   font-size: var(--input-font-size);
-}/* Default */
-/**
-    # EvRadio
- */
-.ev-radio {
-  display: inline-flex;
-}
-.ev-radio.is-labelled {
-  display: flex;
-  align-items: start;
-}
-
-/** EvRadio control */
-.ev-radio--control {
-  align-items: center;
-  aspect-ratio: 1;
-  display: inline-flex;
-  justify-content: center;
-  position: relative;
-  width: 40px;
-}
-
-/* EvRadio input */
-.ev-radio--control input {
-  aspect-ratio: 1;
-  cursor: pointer;
-  left: 50%;
-  opacity: 0;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 40px;
-}
-
-/* Radio circles */
-.ev-radio--circles {
-  align-items: center;
-  aspect-ratio: 1;
-  display: inline-flex;
-  justify-content: center;
-  position: relative;
-  width: var(--icon-size-medium);
-}
-.ev-radio--circles:before {
-  aspect-ratio: 1;
-  background: var(--input-focus-background);
-  border-radius: 50%;
-  content: "";
-  opacity: 0;
-  position: absolute;
-  transition: width 0.25s ease-in-out, opacity 0.25s ease-in-out;
-  width: 100%;
-  will-change: width, opacity;
-}
-
-.ev-radio--outer-circle,
-.ev-radio--inner-circle {
-  aspect-ratio: 1;
-  border-radius: 50%;
-  display: inline-flex;
-  left: 50%;
-  margin: auto;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  align-items: center;
-  justify-content: center;
-}
-
-.ev-radio--outer-circle {
-  border: 2px solid var(--input-border-color);
-  transition: transform 0.25s cubic-bezier(0.5, 0.32, 0.38, 1.22), border-color 0.25s ease-in-out;
-  width: 22px;
-  will-change: border-color, transform;
-  transform: translate(-50%, -50%) scale(0.75);
-}
-
-.ev-radio--inner-circle {
-  background-color: var(--color-primary);
-  opacity: 0;
-  transition: transform 0.25s cubic-bezier(0.5, 0.32, 0.38, 1.22), background-color 0.25s ease-in-out, opacity 0.25s ease-in-out;
-  width: 12px;
-  will-change: transform, background-color, opacity;
-  transform: translate(-50%, -50%) scale(0.5);
-}
-
-/** Hover state */
-.ev-radio.is-focused-visible .ev-radio--circles:before, .ev-radio:hover .ev-radio--circles:before {
-  opacity: 1;
-  width: 42px;
-}
-.ev-radio.is-focused-visible .ev-radio--outer-circle, .ev-radio:hover .ev-radio--outer-circle {
-  border-color: var(--color-primary);
-  transform: translate(-50%, -50%) scale(0.9);
-}
-
-/** Checked state */
-.ev-radio.is-checked .ev-radio--outer-circle {
-  border-color: var(--color-primary);
-  transform: translate(-50%, -50%) scale(1);
-}
-.ev-radio.is-checked .ev-radio--inner-circle {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
-}
-
-/** Disabled modifier */
-.ev-radio.is-disabled {
-  pointer-events: none;
-  opacity: 0.5;
-  filter: grayscale(0.5);
-  user-select: none;
-}
-
-/** Error modifier */
-.ev-radio.is-error .ev-radio--outer-circle {
-  border-color: var(--input-border-color-error);
-}
-.ev-radio.is-error .ev-radio--inner-circle {
-  background-color: var(--input-border-color-error);
-}
-
-/** Labelling */
-.ev-radio--label {
-  flex: 1;
-}
-.ev-radio--label label {
-  display: block;
-  padding: 0.5rem;
 }/**
     # Breakpoint Min
  */
@@ -3943,19 +3964,148 @@ html.ev-overlay-scroll-blocked {
   height: 100%;
 }
 
-.ev-img--preload {
-  filter: blur(4px);
+.ev-img--preload {
+  filter: blur(4px);
+}
+
+.ev-img--img.is-object-cover {
+  object-fit: cover;
+}
+.ev-img--img.is-object-contain {
+  object-fit: contain;
+}
+
+.ev-img--gradient {
+  background-repeat: no-repeat;
+}/* Default */
+/**
+    # EvRadio
+ */
+.ev-radio {
+  display: inline-flex;
+}
+.ev-radio.is-labelled {
+  display: flex;
+  align-items: start;
+}
+
+/** EvRadio control */
+.ev-radio--control {
+  align-items: center;
+  aspect-ratio: 1;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+  width: 40px;
+}
+
+/* EvRadio input */
+.ev-radio--control input {
+  aspect-ratio: 1;
+  cursor: pointer;
+  left: 50%;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+}
+
+/* Radio circles */
+.ev-radio--circles {
+  align-items: center;
+  aspect-ratio: 1;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+  width: var(--icon-size-medium);
+}
+.ev-radio--circles:before {
+  aspect-ratio: 1;
+  background: var(--input-focus-background);
+  border-radius: 50%;
+  content: "";
+  opacity: 0;
+  position: absolute;
+  transition: width 0.25s ease-in-out, opacity 0.25s ease-in-out;
+  width: 100%;
+  will-change: width, opacity;
+}
+
+.ev-radio--outer-circle,
+.ev-radio--inner-circle {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  display: inline-flex;
+  left: 50%;
+  margin: auto;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  align-items: center;
+  justify-content: center;
+}
+
+.ev-radio--outer-circle {
+  border: 2px solid var(--input-border-color);
+  transition: transform 0.25s cubic-bezier(0.5, 0.32, 0.38, 1.22), border-color 0.25s ease-in-out;
+  width: 22px;
+  will-change: border-color, transform;
+  transform: translate(-50%, -50%) scale(0.75);
+}
+
+.ev-radio--inner-circle {
+  background-color: var(--color-primary);
+  opacity: 0;
+  transition: transform 0.25s cubic-bezier(0.5, 0.32, 0.38, 1.22), background-color 0.25s ease-in-out, opacity 0.25s ease-in-out;
+  width: 12px;
+  will-change: transform, background-color, opacity;
+  transform: translate(-50%, -50%) scale(0.5);
+}
+
+/** Hover state */
+.ev-radio.is-focused-visible .ev-radio--circles:before, .ev-radio:hover .ev-radio--circles:before {
+  opacity: 1;
+  width: 42px;
+}
+.ev-radio.is-focused-visible .ev-radio--outer-circle, .ev-radio:hover .ev-radio--outer-circle {
+  border-color: var(--color-primary);
+  transform: translate(-50%, -50%) scale(0.9);
+}
+
+/** Checked state */
+.ev-radio.is-checked .ev-radio--outer-circle {
+  border-color: var(--color-primary);
+  transform: translate(-50%, -50%) scale(1);
+}
+.ev-radio.is-checked .ev-radio--inner-circle {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
 }
 
-.ev-img--img.is-object-cover {
-  object-fit: cover;
+/** Disabled modifier */
+.ev-radio.is-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  filter: grayscale(0.5);
+  user-select: none;
 }
-.ev-img--img.is-object-contain {
-  object-fit: contain;
+
+/** Error modifier */
+.ev-radio.is-error .ev-radio--outer-circle {
+  border-color: var(--input-border-color-error);
+}
+.ev-radio.is-error .ev-radio--inner-circle {
+  background-color: var(--input-border-color-error);
 }
 
-.ev-img--gradient {
-  background-repeat: no-repeat;
+/** Labelling */
+.ev-radio--label {
+  flex: 1;
+}
+.ev-radio--label label {
+  display: block;
+  padding: 0.5rem;
 }/* Default */
 /**
     EvSwitch
@@ -4568,6 +4718,17 @@ html.ev-overlay-scroll-blocked {
 */
 .ev-tag.is-rounded {
   border-radius: 999px;
+}.ev-text.is-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ev-text.is-truncate-lines {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--max-lines, 2);
+  line-clamp: var(--max-lines, 2);
+  -webkit-box-orient: vertical;
 }/* Default */
 /**
     # EvTextarea
@@ -4714,6 +4875,132 @@ html.ev-overlay-scroll-blocked {
 /** Errors */
 .ev-textarea--errors {
   margin-top: 0.5rem;
+}.ev-tab:focus-visible {
+  outline-offset: -2px;
+}
+
+.ev-tab--slider {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  height: var(--tab-slider-size, 2px);
+  width: 100%;
+  background: currentColor;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.ev-tab.is-active .ev-tab--slider {
+  opacity: 1;
+}
+
+.ev-tabs.is-vertical .ev-tab {
+  justify-content: start;
+}
+.ev-tabs.is-vertical .ev-tab--slider {
+  top: 0;
+  height: 100%;
+  width: var(--tab-slider-size, 2px);
+}
+
+.ev-tabs.is-grow {
+  flex-grow: 1;
+}
+.ev-tabs.is-grow .ev-tab {
+  flex: 1 0 auto;
+  max-width: none;
+}
+
+.ev-tabs:not(.is-vertical).is-align-tabs-end .ev-tab:first-child {
+  margin-inline-start: auto;
+}
+.ev-tabs:not(.is-vertical).is-align-tabs-center .ev-tab:first-child {
+  margin-inline-start: auto;
+}
+.ev-tabs:not(.is-vertical).is-align-tabs-center .ev-tab:last-child {
+  margin-inline-end: auto;
+}.ev-toolbar {
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+.ev-toolbar--section-start,
+.ev-toolbar--section-end,
+.ev-toolbar--prefix,
+.ev-toolbar--start,
+.ev-toolbar--end {
+  display: flex;
+  align-items: center;
+}
+
+.ev-toolbar--section-start {
+  min-width: 0;
+  gap: 2rem;
+}
+
+.ev-toolbar--section-end {
+  gap: 0.5rem;
+}
+
+.ev-toolbar--start {
+  min-width: 0;
+}
+
+.ev-toolbar--title {
+  font-size: var(--text-size-large);
+  font-weight: var(--text-weight-bold);
+  padding-inline: var(--spacer-100);
+  white-space: nowrap;
+  max-width: 300px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ev-toolbar .ev-tabs {
+  margin-bottom: -1px;
+}
+
+.ev-toolbar--icon {
+  display: inline-flex;
+  width: var(--input-height-small);
+  height: var(--input-height-small);
+  align-items: center;
+  justify-content: center;
+}
+
+.ev-toolbar--close {
+  min-width: 0;
+}
+
+.ev-toolbar--actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacer-100);
+}
+
+.ev-toolbar.is-size-large {
+  min-height: 56px;
+  padding-inline: 10px;
+}
+.ev-toolbar.is-size-medium {
+  min-height: 52px;
+  padding-inline: 8px;
+}
+.ev-toolbar.is-size-medium .ev-tabs {
+  padding-top: 4px;
+}
+.ev-toolbar.is-size-small {
+  min-height: 48px;
+  padding-inline: 6px;
+}
+.ev-toolbar.is-size-small .ev-tabs {
+  padding-top: 6px;
+}
+.ev-toolbar.is-size-small .ev-toolbar--title {
+  font-size: var(--text-size-medium);
 }.ev-tooltip > .ev-overlay--content {
   background-color: var(--tooltip-background);
   border-radius: var(--rounded-small);
@@ -5184,51 +5471,126 @@ html.ev-overlay-scroll-blocked {
 .transition-notification-leave-active {
   position: absolute;
   width: 400px;
-}.ev-tab:focus-visible {
-  outline-offset: -2px;
+}/**
+    # Breakpoint Min
+ */
+/*
+    # Breakpoint Infix
+ */
+/**
+    # Map Deep Get
+ */
+/**
+    # Map Deep Merge
+
+    Adapted from https://gist.github.com/pentzzsolt/4949bbd7691d43d00616dc4f1451cae9#file-non-destructive-map-merge-4-scss
+ */
+/**
+    # Map Deep Set
+ */
+/**
+    # Round Even
+ */
+/**
+    # Scalable
+
+    Calculate a clamp() function to offer scaling between
+    the smallest size ($min) from the smallest screen size ($minAt)
+    and the largest size ($max) at the largest screen size ($maxAt).
+
+    The calculation should look like this:
+
+    clamp(min, calc(min + (max - min) * ((100vw - minAt) / divider)), max);
+ */
+/*
+    # Strip Unit
+
+    Remove units from a string like '10px', converting to a number (10).
+ */
+/**
+    # Colors
+
+    Note, HEXA values are quoted to prevent SASS outputting values as RGBA.
+ */
+/**
+    # token
+ */
+/*
+  # Variables
+
+  Includes the following sections:
+  - Breakpoints
+  - Spacers
+  - Text
+ */
+/*
+    ## Breakpoints
+
+    Breakpoints should always be defined in `px` units.
+
+    By default we have five breakpoints for:
+    - `xs` - Extra Small: phones in portrait
+    - `sm` - Small: Phones in landscape
+    - `md` - Medium: Tablets in portrait or small notebooks
+    - `lg` - Large: Desktops & tablets in landscape. More than accommodates scroll bars.
+    - `xl` - Extra Large - Large Desktops, including 1080p
+    - `xxl` - Extra Large - 4k and ultra-wide screens
+
+    Scaling, such as font-size scaling, is done between `sm-min` and `xl-min`.
+ */
+/**
+    ## Display Breakpoints
+
+    Avoid using '*-and-down' where possible
+ */
+/*
+    ## Spacers
+
+    Spacers in Evance are based on a percentage of `1rem` (based on `16px`).
+ */
+/**
+    ## Text
+ */
+.ev-card-content {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--spacer-150);
 }
 
-.ev-tab--slider {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: var(--tab-slider-size, 2px);
-  width: 100%;
-  background: currentColor;
-  pointer-events: none;
-  opacity: 0;
+.ev-card-content--icon {
+  flex: 0;
 }
 
-.ev-tab.is-active .ev-tab--slider {
-  opacity: 1;
+.ev-card-content--detail {
+  flex: 1;
+  min-width: 0;
 }
 
-.ev-tabs.is-vertical .ev-tab {
-  justify-content: start;
+.ev-card-content.is-size-small {
+  padding: var(--padding-small);
 }
-.ev-tabs.is-vertical .ev-tab--slider {
-  top: 0;
-  height: 100%;
-  width: var(--tab-slider-size, 2px);
+.ev-card-content.is-size-medium {
+  padding: var(--padding-medium);
 }
-
-.ev-tabs.is-grow {
-  flex-grow: 1;
+.ev-card-content.is-size-medium .ev-card-content--icon {
+  padding-top: clamp(0rem, calc(0rem + 0.125 * ((100vw - 600px) / 62.5)), 0.125rem);
 }
-.ev-tabs.is-grow .ev-tab {
-  flex: 1 0 auto;
-  max-width: none;
+.ev-card-content.is-size-large {
+  padding: var(--padding-large);
 }
-
-.ev-tabs:not(.is-vertical).is-align-tabs-end .ev-tab:first-child {
-  margin-inline-start: auto;
+.ev-card-content.is-size-large .ev-card-content--icon {
+  padding-top: clamp(0rem, calc(0rem + 0.25 * ((100vw - 600px) / 62.5)), 0.25rem);
 }
-.ev-tabs:not(.is-vertical).is-align-tabs-center .ev-tab:first-child {
-  margin-inline-start: auto;
+.ev-card-content.is-size-x-large {
+  padding: var(--padding-x-large);
 }
-.ev-tabs:not(.is-vertical).is-align-tabs-center .ev-tab:last-child {
-  margin-inline-end: auto;
-}.ev-select .ev-textfield--input {
+.ev-card-content.is-size-x-large .ev-card-content--icon {
+  padding-top: clamp(0.125rem, calc(0.125rem + 0.375 * ((100vw - 600px) / 62.5)), 0.5rem);
+}
+.ev-text {
+    --max-lines: var(--1306c720);
+}
+.ev-select .ev-textfield--input {
   padding-block: 6px;
 }
 .ev-select .ev-textfield--input > input {
@@ -8067,6 +8429,9 @@ table {
 .font-weight-medium {
   font-weight: 500 !important;
 }
+.font-weight-semibold {
+  font-weight: 600 !important;
+}
 .font-weight-bold {
   font-weight: 700 !important;
 }
@@ -16957,7 +17322,7 @@ table {
   --spacer-n1200: -6rem;
   --spacer-n1600: -8rem;
   /* Text */
-  --heading-lineheight: 1.2em;
+  --heading-lineheight: 1.25em;
   --heading-style: normal;
   --heading-typeface: var(--system-font);
   --heading-weight: 700;
@@ -16982,6 +17347,10 @@ table {
   --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
   --easing-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
+  --padding-x-large: clamp(1.5rem, calc(1.5rem + 1.5 * ((100vw - 600px) / 62.5)), 3rem);
+  --padding-large: clamp(1.5rem, calc(1.5rem + 0.5 * ((100vw - 600px) / 62.5)), 2rem);
+  --padding-medium: clamp(1rem, calc(1rem + 0.5 * ((100vw - 600px) / 62.5)), 1.5rem);
+  --padding-small: 1rem;
 }
 /**
     # Breakpoint Min
@@ -17170,6 +17539,8 @@ table {
     /* Text */
     --eyebrow-default: #A4ABC1;
     --heading-default: #212945;
+    --heading-on-brand: #212945;
+    --heading-on-brand-bold: #FFFFFF;
     --heading-on-danger: #212945;
     --heading-on-danger-bold: #FFFFFF;
     --heading-on-information: #212945;
@@ -17184,6 +17555,8 @@ table {
     --heading-on-warning-bold: #FFFFFF;
     --text-default: #535A74;
     --text-brand: #7647E4;
+    --text-on-brand: #5D6788;
+    --text-on-brand-bold: #F3F5F9;
     --text-subtle: #8B8DA7;
     --text-danger: #F04141;
     --text-on-danger: #5D6788;
@@ -17303,6 +17676,8 @@ table {
     /* Text */
     --eyebrow-default: #7B829A;
     --heading-default: #C4CBE3;
+    --heading-on-brand: #d2cce5;
+    --heading-on-brand-bold: #181724;
     --heading-on-danger: #ead7df;
     --heading-on-danger-bold: #181724;
     --heading-on-information: #c8d3e9;
@@ -17317,6 +17692,8 @@ table {
     --heading-on-warning-bold: #181724;
     --text-default: #A0A6BC;
     --text-brand: #AF93FD;
+    --text-on-brand: #a59dc3;
+    --text-on-brand-bold: #181724;
     --text-subtle: #61647E;
     --text-danger: #FF6161;
     --text-on-danger: #cda2b4;
@@ -17438,6 +17815,8 @@ table {
   /* Text */
   --eyebrow-default: #A4ABC1;
   --heading-default: #212945;
+  --heading-on-brand: #212945;
+  --heading-on-brand-bold: #FFFFFF;
   --heading-on-danger: #212945;
   --heading-on-danger-bold: #FFFFFF;
   --heading-on-information: #212945;
@@ -17452,6 +17831,8 @@ table {
   --heading-on-warning-bold: #FFFFFF;
   --text-default: #535A74;
   --text-brand: #7647E4;
+  --text-on-brand: #5D6788;
+  --text-on-brand-bold: #F3F5F9;
   --text-subtle: #8B8DA7;
   --text-danger: #F04141;
   --text-on-danger: #5D6788;
@@ -17569,6 +17950,8 @@ table {
   /* Text */
   --eyebrow-default: #7B829A;
   --heading-default: #C4CBE3;
+  --heading-on-brand: #d2cce5;
+  --heading-on-brand-bold: #181724;
   --heading-on-danger: #ead7df;
   --heading-on-danger-bold: #181724;
   --heading-on-information: #c8d3e9;
@@ -17583,6 +17966,8 @@ table {
   --heading-on-warning-bold: #181724;
   --text-default: #A0A6BC;
   --text-brand: #AF93FD;
+  --text-on-brand: #a59dc3;
+  --text-on-brand-bold: #181724;
   --text-subtle: #61647E;
   --text-danger: #FF6161;
   --text-on-danger: #cda2b4;
@@ -17781,7 +18166,7 @@ select {
     when editing content and applying text size variants to paragraphs.
 */
 p {
-  margin: 0 0 1.5rem 0;
+  margin: 0 0 1rem 0;
 }
 p:last-child {
   margin-bottom: 0;
@@ -17886,6 +18271,18 @@ h6, .heading-6 {
 .text-small {
   font-size: var(--text-size-small);
 }
+.text-weight-regular {
+  font-weight: 400;
+}
+.text-weight-medium {
+  font-weight: 500;
+}
+.text-weight-semibold {
+  font-weight: 600;
+}
+.text-weight-bold {
+  font-weight: 700;
+}
 /**
     # Links
     1. Defaults