@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

package/dist/styles/components.css

@@ -0,0 +1,1652 @@
+:root {
+  --dodo-ui-Card-default-bg: var(--dodo-color-white);
+  --dodo-ui-Card-outline-neutral: var(--dodo-color-neutral-400);
+  --dodo-ui-Card-text-neutral-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Card-text-neutral-hover-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Card-text-neutral-active-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-Card-solid-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-Card-solid-neutral-hover-bg: var(--dodo-color-neutral-600);
+  --dodo-ui-Card-solid-neutral-active-bg: var(--dodo-color-neutral-700);
+  --dodo-ui-Card-outline-primary: var(--dodo-color-primary-400);
+  --dodo-ui-Card-text-primary-bg: var(--dodo-color-primary-100);
+  --dodo-ui-Card-text-primary-hover-bg: var(--dodo-color-primary-200);
+  --dodo-ui-Card-text-primary-active-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Card-solid-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-Card-solid-primary-hover-bg: var(--dodo-color-primary-600);
+  --dodo-ui-Card-solid-primary-active-bg: var(--dodo-color-primary-700);
+  --dodo-ui-Card-outline-secondary: var(--dodo-color-secondary-400);
+  --dodo-ui-Card-text-secondary-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-Card-text-secondary-hover-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Card-text-secondary-active-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Card-solid-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-Card-solid-secondary-hover-bg: var(--dodo-color-secondary-600);
+  --dodo-ui-Card-solid-secondary-active-bg: var(--dodo-color-secondary-700);
+  --dodo-ui-Card-outline-safe: var(--dodo-color-safe-400);
+  --dodo-ui-Card-text-safe-bg: var(--dodo-color-safe-100);
+  --dodo-ui-Card-text-safe-hover-bg: var(--dodo-color-safe-200);
+  --dodo-ui-Card-text-safe-active-bg: var(--dodo-color-safe-300);
+  --dodo-ui-Card-solid-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-Card-solid-safe-hover-bg: var(--dodo-color-safe-600);
+  --dodo-ui-Card-solid-safe-active-bg: var(--dodo-color-safe-700);
+  --dodo-ui-Card-outline-warning: var(--dodo-color-warning-400);
+  --dodo-ui-Card-text-warning-bg: var(--dodo-color-warning-100);
+  --dodo-ui-Card-text-warning-hover-bg: var(--dodo-color-warning-200);
+  --dodo-ui-Card-text-warning-active-bg: var(--dodo-color-warning-300);
+  --dodo-ui-Card-solid-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-Card-solid-warning-hover-bg: var(--dodo-color-warning-600);
+  --dodo-ui-Card-solid-warning-active-bg: var(--dodo-color-warning-700);
+  --dodo-ui-Card-outline-danger: var(--dodo-color-danger-400);
+  --dodo-ui-Card-text-danger-bg: var(--dodo-color-danger-100);
+  --dodo-ui-Card-text-danger-hover-bg: var(--dodo-color-danger-200);
+  --dodo-ui-Card-text-danger-active-bg: var(--dodo-color-danger-300);
+  --dodo-ui-Card-solid-danger-bg: var(--dodo-color-danger-500);
+  --dodo-ui-Card-solid-danger-hover-bg: var(--dodo-color-danger-600);
+  --dodo-ui-Card-solid-danger-active-bg: var(--dodo-color-danger-700);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-Card-default-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Card-outline-neutral: color-mix(in oklab, var(--dodo-color-neutral-300) 90%, #fff);
+  --dodo-ui-Card-text-neutral-bg: color-mix(in oklab, var(--dodo-color-neutral-50) 90%, #fff);
+  --dodo-ui-Card-text-neutral-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-100) 90%, #fff);
+  --dodo-ui-Card-text-neutral-active-bg: color-mix(in oklab, var(--dodo-color-neutral-200) 90%, #fff);
+  --dodo-ui-Card-solid-neutral-bg: var(--dodo-color-neutral-400);
+  --dodo-ui-Card-solid-neutral-hover-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-Card-solid-neutral-active-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Card-outline-primary: color-mix(in oklab, var(--dodo-color-primary-300) 90%, #fff);
+  --dodo-ui-Card-text-primary-bg: color-mix(in oklab, var(--dodo-color-primary-50) 90%, #fff);
+  --dodo-ui-Card-text-primary-hover-bg: color-mix(in oklab, var(--dodo-color-primary-100) 90%, #fff);
+  --dodo-ui-Card-text-primary-active-bg: color-mix(in oklab, var(--dodo-color-primary-200) 90%, #fff);
+  --dodo-ui-Card-solid-primary-bg: var(--dodo-color-primary-400);
+  --dodo-ui-Card-solid-primary-hover-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Card-solid-primary-active-bg: var(--dodo-color-primary-200);
+  --dodo-ui-Card-outline-secondary: color-mix(in oklab, var(--dodo-color-secondary-300) 90%, #fff);
+  --dodo-ui-Card-text-secondary-bg: color-mix(in oklab, var(--dodo-color-secondary-50) 90%, #fff);
+  --dodo-ui-Card-text-secondary-hover-bg: color-mix(in oklab, var(--dodo-color-secondary-100) 90%, #fff);
+  --dodo-ui-Card-text-secondary-active-bg: color-mix(in oklab, var(--dodo-color-secondary-200) 90%, #fff);
+  --dodo-ui-Card-solid-secondary-bg: var(--dodo-color-secondary-400);
+  --dodo-ui-Card-solid-secondary-hover-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Card-solid-secondary-active-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Card-outline-safe: color-mix(in oklab, var(--dodo-color-safe-300) 90%, #fff);
+  --dodo-ui-Card-text-safe-bg: color-mix(in oklab, var(--dodo-color-safe-50) 90%, #fff);
+  --dodo-ui-Card-text-safe-hover-bg: color-mix(in oklab, var(--dodo-color-safe-100) 90%, #fff);
+  --dodo-ui-Card-text-safe-active-bg: color-mix(in oklab, var(--dodo-color-safe-200) 90%, #fff);
+  --dodo-ui-Card-solid-safe-bg: var(--dodo-color-safe-400);
+  --dodo-ui-Card-solid-safe-hover-bg: var(--dodo-color-safe-300);
+  --dodo-ui-Card-solid-safe-active-bg: var(--dodo-color-safe-200);
+  --dodo-ui-Card-outline-warning: color-mix(in oklab, var(--dodo-color-warning-300) 90%, #fff);
+  --dodo-ui-Card-text-warning-bg: color-mix(in oklab, var(--dodo-color-warning-50) 90%, #fff);
+  --dodo-ui-Card-text-warning-hover-bg: color-mix(in oklab, var(--dodo-color-warning-100) 90%, #fff);
+  --dodo-ui-Card-text-warning-active-bg: color-mix(in oklab, var(--dodo-color-warning-200) 90%, #fff);
+  --dodo-ui-Card-solid-warning-bg: var(--dodo-color-warning-400);
+  --dodo-ui-Card-solid-warning-hover-bg: var(--dodo-color-warning-300);
+  --dodo-ui-Card-solid-warning-active-bg: var(--dodo-color-warning-200);
+  --dodo-ui-Card-outline-danger: color-mix(in oklab, var(--dodo-color-danger-300) 90%, #fff);
+  --dodo-ui-Card-text-danger-bg: color-mix(in oklab, var(--dodo-color-danger-50) 90%, #fff);
+  --dodo-ui-Card-text-danger-hover-bg: color-mix(in oklab, var(--dodo-color-danger-100) 90%, #fff);
+  --dodo-ui-Card-text-danger-active-bg: color-mix(in oklab, var(--dodo-color-danger-200) 90%, #fff);
+  --dodo-ui-Card-solid-danger-bg: var(--dodo-color-danger-400);
+  --dodo-ui-Card-solid-danger-hover-bg: var(--dodo-color-danger-300);
+  --dodo-ui-Card-solid-danger-active-bg: var(--dodo-color-danger-200);
+}
+
+.dodo-ui-Card {
+  transition: background-color 70ms, color 70ms, border-color 70ms;
+  background-color: transparent;
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  width: var(--Card-width, initial);
+  height: var(--Card-height, initial);
+  min-width: var(--Card-min-width, initial);
+  min-height: var(--Card-min-height, initial);
+  max-width: var(--Card-max-width, initial);
+  max-height: var(--Card-max-height, initial);
+  overflow: hidden;
+}
+.dodo-ui-Card.outline {
+  border-color: var(--dodo-color-neutral-400);
+}
+.dodo-ui-Card.active {
+  cursor: pointer;
+}
+.dodo-ui-Card.roundness--1 {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-Card.roundness--2 {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-Card.roundness--3 {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-Card.roundness--pill {
+  border-radius: 999px;
+}
+.dodo-ui-Card.roundness--full {
+  border-radius: 50%;
+}
+.dodo-ui-Card.color--default.variant--text, .dodo-ui-Card.color--default.variant--solid {
+  background-color: var(--dodo-ui-Card-default-bg);
+}
+.dodo-ui-Card.color--neutral.variant--text {
+  background-color: var(--dodo-ui-Card-text-neutral-bg);
+}
+.dodo-ui-Card.color--neutral.variant--text.outline {
+  border-color: var(--dodo-ui-Card-outline-neutral);
+}
+.dodo-ui-Card.color--neutral.variant--solid {
+  background-color: var(--dodo-ui-Card-solid-neutral-bg);
+}
+.dodo-ui-Card.color--neutral.active.variant--text:hover {
+  background-color: var(--dodo-ui-Card-text-neutral-hover-bg);
+}
+.dodo-ui-Card.color--neutral.active.variant--text:active {
+  background-color: var(--dodo-ui-Card-text-neutral-active-bg);
+}
+.dodo-ui-Card.color--neutral.active.variant--solid:hover {
+  background-color: var(--dodo-ui-Card-solid-neutral-hover-bg);
+}
+.dodo-ui-Card.color--neutral.active.variant--solid:active {
+  background-color: var(--dodo-ui-Card-solid-neutral-active-bg);
+}
+.dodo-ui-Card.color--primary.variant--text {
+  background-color: var(--dodo-ui-Card-text-primary-bg);
+}
+.dodo-ui-Card.color--primary.variant--text.outline {
+  border-color: var(--dodo-ui-Card-outline-primary);
+}
+.dodo-ui-Card.color--primary.variant--solid {
+  background-color: var(--dodo-ui-Card-solid-primary-bg);
+}
+.dodo-ui-Card.color--primary.active.variant--text:hover {
+  background-color: var(--dodo-ui-Card-text-primary-hover-bg);
+}
+.dodo-ui-Card.color--primary.active.variant--text:active {
+  background-color: var(--dodo-ui-Card-text-primary-active-bg);
+}
+.dodo-ui-Card.color--primary.active.variant--solid:hover {
+  background-color: var(--dodo-ui-Card-solid-primary-hover-bg);
+}
+.dodo-ui-Card.color--primary.active.variant--solid:active {
+  background-color: var(--dodo-ui-Card-solid-primary-active-bg);
+}
+.dodo-ui-Card.color--secondary.variant--text {
+  background-color: var(--dodo-ui-Card-text-secondary-bg);
+}
+.dodo-ui-Card.color--secondary.variant--text.outline {
+  border-color: var(--dodo-ui-Card-outline-secondary);
+}
+.dodo-ui-Card.color--secondary.variant--solid {
+  background-color: var(--dodo-ui-Card-solid-secondary-bg);
+}
+.dodo-ui-Card.color--secondary.active.variant--text:hover {
+  background-color: var(--dodo-ui-Card-text-secondary-hover-bg);
+}
+.dodo-ui-Card.color--secondary.active.variant--text:active {
+  background-color: var(--dodo-ui-Card-text-secondary-active-bg);
+}
+.dodo-ui-Card.color--secondary.active.variant--solid:hover {
+  background-color: var(--dodo-ui-Card-solid-secondary-hover-bg);
+}
+.dodo-ui-Card.color--secondary.active.variant--solid:active {
+  background-color: var(--dodo-ui-Card-solid-secondary-active-bg);
+}
+.dodo-ui-Card.color--safe.variant--text {
+  background-color: var(--dodo-ui-Card-text-safe-bg);
+}
+.dodo-ui-Card.color--safe.variant--text.outline {
+  border-color: var(--dodo-ui-Card-outline-safe);
+}
+.dodo-ui-Card.color--safe.variant--solid {
+  background-color: var(--dodo-ui-Card-solid-safe-bg);
+}
+.dodo-ui-Card.color--safe.active.variant--text:hover {
+  background-color: var(--dodo-ui-Card-text-safe-hover-bg);
+}
+.dodo-ui-Card.color--safe.active.variant--text:active {
+  background-color: var(--dodo-ui-Card-text-safe-active-bg);
+}
+.dodo-ui-Card.color--safe.active.variant--solid:hover {
+  background-color: var(--dodo-ui-Card-solid-safe-hover-bg);
+}
+.dodo-ui-Card.color--safe.active.variant--solid:active {
+  background-color: var(--dodo-ui-Card-solid-safe-active-bg);
+}
+.dodo-ui-Card.color--warning.variant--text {
+  background-color: var(--dodo-ui-Card-text-warning-bg);
+}
+.dodo-ui-Card.color--warning.variant--text.outline {
+  border-color: var(--dodo-ui-Card-outline-warning);
+}
+.dodo-ui-Card.color--warning.variant--solid {
+  background-color: var(--dodo-ui-Card-solid-warning-bg);
+}
+.dodo-ui-Card.color--warning.active.variant--text:hover {
+  background-color: var(--dodo-ui-Card-text-warning-hover-bg);
+}
+.dodo-ui-Card.color--warning.active.variant--text:active {
+  background-color: var(--dodo-ui-Card-text-warning-active-bg);
+}
+.dodo-ui-Card.color--warning.active.variant--solid:hover {
+  background-color: var(--dodo-ui-Card-solid-warning-hover-bg);
+}
+.dodo-ui-Card.color--warning.active.variant--solid:active {
+  background-color: var(--dodo-ui-Card-solid-warning-active-bg);
+}
+.dodo-ui-Card.color--danger.variant--text {
+  background-color: var(--dodo-ui-Card-text-danger-bg);
+}
+.dodo-ui-Card.color--danger.variant--text.outline {
+  border-color: var(--dodo-ui-Card-outline-danger);
+}
+.dodo-ui-Card.color--danger.variant--solid {
+  background-color: var(--dodo-ui-Card-solid-danger-bg);
+}
+.dodo-ui-Card.color--danger.active.variant--text:hover {
+  background-color: var(--dodo-ui-Card-text-danger-hover-bg);
+}
+.dodo-ui-Card.color--danger.active.variant--text:active {
+  background-color: var(--dodo-ui-Card-text-danger-active-bg);
+}
+.dodo-ui-Card.color--danger.active.variant--solid:hover {
+  background-color: var(--dodo-ui-Card-solid-danger-hover-bg);
+}
+.dodo-ui-Card.color--danger.active.variant--solid:active {
+  background-color: var(--dodo-ui-Card-solid-danger-active-bg);
+}
+
+:root {
+  --dodo-ui-Calendar-date-selected-bg: var(--dodo-color-primary-500);
+  --dodo-ui-Calendar-date-selected-hover-bg: var(--dodo-color-primary-600);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-Calendar-date-selected-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Calendar-date-selected-hover-bg: var(--dodo-color-primary-400);
+}
+
+.dodo-ui-Calendar {
+  font-size: 1rem;
+  padding: var(--dodo-ui-space);
+  color: var(--dodo-color-neutral-900);
+  display: inline-flex;
+  flex-direction: column;
+}
+.dodo-ui-Calendar [data-calendar-header] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 calc(var(--dodo-ui-space) / 2);
+  margin-bottom: calc(var(--dodo-ui-space) * 2);
+  margin-top: var(--dodo-ui-space);
+}
+.dodo-ui-Calendar [data-calendar-heading] {
+  margin: 0 calc(var(--dodo-ui-space) / 2);
+  font-weight: 500;
+}
+.dodo-ui-Calendar [data-calendar-next-button],
+.dodo-ui-Calendar [data-calendar-prev-button] {
+  font-size: 1.45rem;
+}
+.dodo-ui-Calendar [data-calendar-grid] {
+  width: 100%;
+  user-select: none;
+}
+.dodo-ui-Calendar [data-calendar-grid-row] {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+}
+.dodo-ui-Calendar [data-calendar-grid-head] {
+  margin-bottom: var(--dodo-ui-space);
+  display: block;
+}
+.dodo-ui-Calendar [data-calendar-head-cell] {
+  display: inline-flex;
+  width: var(--dodo-ui-element-height-normal);
+  justify-content: center;
+  font-weight: 600;
+  color: var(--dodo-color-neutral-600);
+  font-size: 0.9rem;
+}
+.dodo-ui-Calendar [data-calendar-cell] {
+  display: inline-flex;
+}
+.dodo-ui-Calendar [data-calendar-day] {
+  transition: background-color 70ms, color 70ms, border-color 70ms;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--dodo-ui-element-height-normal);
+  height: var(--dodo-ui-element-height-normal);
+  border-radius: var(--dodo-ui-element-roundness-1);
+  border: var(--dodo-ui-element-border-width) solid transparent;
+  position: relative;
+}
+.dodo-ui-Calendar [data-calendar-day]:hover {
+  background-color: var(--dodo-color-neutral-100);
+  border-color: var(--dodo-color-neutral-400);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected] {
+  background-color: var(--dodo-ui-Calendar-date-selected-bg);
+  color: var(--dodo-color-constant-white);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected]:hover {
+  background-color: var(--dodo-ui-Calendar-date-selected-hover-bg);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected][data-today] {
+  background-color: var(--dodo-ui-Calendar-date-selected-bg);
+  color: var(--dodo-color-constant-white);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected][data-today]:hover {
+  background-color: var(--dodo-ui-Calendar-date-selected-hover-bg);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected][data-today]::after {
+  background-color: var(--dodo-color-constant-white);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected][data-today]::after:hover {
+  background-color: var(--dodo-color-constant-white);
+}
+.dodo-ui-Calendar [data-calendar-day][data-today] {
+  background-color: var(--dodo-color-primary-50);
+}
+.dodo-ui-Calendar [data-calendar-day][data-today]::after {
+  content: "";
+  width: var(--dodo-ui-track-element-height-small);
+  height: var(--dodo-ui-track-element-height-small);
+  border-radius: 50%;
+  display: inline-flex;
+  background-color: var(--dodo-color-primary-600);
+  position: absolute;
+  bottom: 0.2em;
+}
+.dodo-ui-Calendar [data-outside-month] {
+  color: var(--dodo-color-neutral-400);
+}
+.dodo-ui-Calendar [data-outside-month]:hover {
+  background-color: initial;
+  border-color: transparent;
+}
+
+:root {
+  --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-UtilityButton-disabled-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-UtilityButton-outline-neutral: var(--dodo-color-neutral-400);
+  --dodo-ui-UtilityButton-text-neutral-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-UtilityButton-text-neutral-hover-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-UtilityButton-text-neutral-active-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-UtilityButton-outline-primary: var(--dodo-color-primary-400);
+  --dodo-ui-UtilityButton-text-primary-bg: var(--dodo-color-primary-100);
+  --dodo-ui-UtilityButton-text-primary-hover-bg: var(--dodo-color-primary-200);
+  --dodo-ui-UtilityButton-text-primary-active-bg: var(--dodo-color-primary-300);
+  --dodo-ui-UtilityButton-outline-secondary: var(--dodo-color-secondary-400);
+  --dodo-ui-UtilityButton-text-secondary-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-UtilityButton-text-secondary-hover-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-UtilityButton-text-secondary-active-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-UtilityButton-outline-safe: var(--dodo-color-safe-400);
+  --dodo-ui-UtilityButton-text-safe-bg: var(--dodo-color-safe-100);
+  --dodo-ui-UtilityButton-text-safe-hover-bg: var(--dodo-color-safe-200);
+  --dodo-ui-UtilityButton-text-safe-active-bg: var(--dodo-color-safe-300);
+  --dodo-ui-UtilityButton-outline-warning: var(--dodo-color-warning-400);
+  --dodo-ui-UtilityButton-text-warning-bg: var(--dodo-color-warning-100);
+  --dodo-ui-UtilityButton-text-warning-hover-bg: var(--dodo-color-warning-200);
+  --dodo-ui-UtilityButton-text-warning-active-bg: var(--dodo-color-warning-300);
+  --dodo-ui-UtilityButton-outline-danger: var(--dodo-color-danger-400);
+  --dodo-ui-UtilityButton-text-danger-bg: var(--dodo-color-danger-100);
+  --dodo-ui-UtilityButton-text-danger-hover-bg: var(--dodo-color-danger-200);
+  --dodo-ui-UtilityButton-text-danger-active-bg: var(--dodo-color-danger-300);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-UtilityButton-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-neutral-500);
+  --dodo-ui-UtilityButton-outline-neutral: color-mix(in oklab, var(--dodo-color-neutral-300) 90%, #fff);
+  --dodo-ui-UtilityButton-text-neutral-bg: color-mix(in oklab, var(--dodo-color-neutral-50) 90%, #fff);
+  --dodo-ui-UtilityButton-text-neutral-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-100) 90%, #fff);
+  --dodo-ui-UtilityButton-text-neutral-active-bg: color-mix(in oklab, var(--dodo-color-neutral-200) 90%, #fff);
+  --dodo-ui-UtilityButton-outline-primary: color-mix(in oklab, var(--dodo-color-primary-300) 90%, #fff);
+  --dodo-ui-UtilityButton-text-primary-bg: color-mix(in oklab, var(--dodo-color-primary-50) 90%, #fff);
+  --dodo-ui-UtilityButton-text-primary-hover-bg: color-mix(in oklab, var(--dodo-color-primary-100) 90%, #fff);
+  --dodo-ui-UtilityButton-text-primary-active-bg: color-mix(in oklab, var(--dodo-color-primary-200) 90%, #fff);
+  --dodo-ui-UtilityButton-outline-secondary: color-mix(in oklab, var(--dodo-color-secondary-300) 90%, #fff);
+  --dodo-ui-UtilityButton-text-secondary-bg: color-mix(in oklab, var(--dodo-color-secondary-50) 90%, #fff);
+  --dodo-ui-UtilityButton-text-secondary-hover-bg: color-mix(in oklab, var(--dodo-color-secondary-100) 90%, #fff);
+  --dodo-ui-UtilityButton-text-secondary-active-bg: color-mix(in oklab, var(--dodo-color-secondary-200) 90%, #fff);
+  --dodo-ui-UtilityButton-outline-safe: color-mix(in oklab, var(--dodo-color-safe-300) 90%, #fff);
+  --dodo-ui-UtilityButton-text-safe-bg: color-mix(in oklab, var(--dodo-color-safe-50) 90%, #fff);
+  --dodo-ui-UtilityButton-text-safe-hover-bg: color-mix(in oklab, var(--dodo-color-safe-100) 90%, #fff);
+  --dodo-ui-UtilityButton-text-safe-active-bg: color-mix(in oklab, var(--dodo-color-safe-200) 90%, #fff);
+  --dodo-ui-UtilityButton-outline-warning: color-mix(in oklab, var(--dodo-color-warning-300) 90%, #fff);
+  --dodo-ui-UtilityButton-text-warning-bg: color-mix(in oklab, var(--dodo-color-warning-50) 90%, #fff);
+  --dodo-ui-UtilityButton-text-warning-hover-bg: color-mix(in oklab, var(--dodo-color-warning-100) 90%, #fff);
+  --dodo-ui-UtilityButton-text-warning-active-bg: color-mix(in oklab, var(--dodo-color-warning-200) 90%, #fff);
+  --dodo-ui-UtilityButton-outline-danger: color-mix(in oklab, var(--dodo-color-danger-300) 90%, #fff);
+  --dodo-ui-UtilityButton-text-danger-bg: color-mix(in oklab, var(--dodo-color-danger-50) 90%, #fff);
+  --dodo-ui-UtilityButton-text-danger-hover-bg: color-mix(in oklab, var(--dodo-color-danger-100) 90%, #fff);
+  --dodo-ui-UtilityButton-text-danger-active-bg: color-mix(in oklab, var(--dodo-color-danger-200) 90%, #fff);
+}
+
+.dodo-ui-UtilityButton {
+  cursor: pointer;
+  transition: background-color 70ms, color 70ms, border-color 70ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: transparent;
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  letter-spacing: 0.3px;
+}
+.dodo-ui-UtilityButton.size--normal {
+  height: calc(var(--dodo-ui-element-height-normal) / 1.2);
+  font-size: 0.9rem;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
+  min-width: 35px;
+}
+.dodo-ui-UtilityButton.size--small {
+  height: calc(var(--dodo-ui-element-height-small) / 1.2);
+  padding: 0 var(--dodo-ui-space);
+  font-size: 0.8rem;
+  min-width: 25px;
+}
+.dodo-ui-UtilityButton.size--large {
+  height: calc(var(--dodo-ui-element-height-large) / 1.2);
+  font-size: 1rem;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
+  min-width: 55px;
+}
+.dodo-ui-UtilityButton.roundness--1 {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-UtilityButton.roundness--2 {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-UtilityButton.roundness--3 {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-UtilityButton.roundness--pill {
+  border-radius: 999px;
+}
+.dodo-ui-UtilityButton.roundness--full {
+  border-radius: 50%;
+}
+.dodo-ui-UtilityButton.color--neutral {
+  color: var(--dodo-color-neutral-800);
+  background-color: transparent;
+}
+.dodo-ui-UtilityButton.color--neutral:hover {
+  color: var(--dodo-color-neutral-800);
+  background-color: var(--dodo-ui-UtilityButton-text-neutral-hover-bg);
+}
+.dodo-ui-UtilityButton.color--neutral:active {
+  color: var(--dodo-color-neutral-800);
+  background-color: var(--dodo-ui-UtilityButton-text-neutral-active-bg);
+}
+.dodo-ui-UtilityButton.color--neutral.outline {
+  border-color: var(--dodo-ui-UtilityButton-outline-neutral);
+}
+.dodo-ui-UtilityButton.color--primary {
+  color: var(--dodo-color-neutral-800);
+  background-color: transparent;
+}
+.dodo-ui-UtilityButton.color--primary:hover {
+  color: var(--dodo-color-primary-800);
+  background-color: var(--dodo-ui-UtilityButton-text-primary-hover-bg);
+}
+.dodo-ui-UtilityButton.color--primary:active {
+  color: var(--dodo-color-primary-800);
+  background-color: var(--dodo-ui-UtilityButton-text-primary-active-bg);
+}
+.dodo-ui-UtilityButton.color--primary.outline {
+  border-color: var(--dodo-ui-UtilityButton-outline-primary);
+}
+.dodo-ui-UtilityButton.color--secondary {
+  color: var(--dodo-color-neutral-800);
+  background-color: transparent;
+}
+.dodo-ui-UtilityButton.color--secondary:hover {
+  color: var(--dodo-color-secondary-800);
+  background-color: var(--dodo-ui-UtilityButton-text-secondary-hover-bg);
+}
+.dodo-ui-UtilityButton.color--secondary:active {
+  color: var(--dodo-color-secondary-800);
+  background-color: var(--dodo-ui-UtilityButton-text-secondary-active-bg);
+}
+.dodo-ui-UtilityButton.color--secondary.outline {
+  border-color: var(--dodo-ui-UtilityButton-outline-secondary);
+}
+.dodo-ui-UtilityButton.color--safe {
+  color: var(--dodo-color-neutral-800);
+  background-color: transparent;
+}
+.dodo-ui-UtilityButton.color--safe:hover {
+  color: var(--dodo-color-safe-800);
+  background-color: var(--dodo-ui-UtilityButton-text-safe-hover-bg);
+}
+.dodo-ui-UtilityButton.color--safe:active {
+  color: var(--dodo-color-safe-800);
+  background-color: var(--dodo-ui-UtilityButton-text-safe-active-bg);
+}
+.dodo-ui-UtilityButton.color--safe.outline {
+  border-color: var(--dodo-ui-UtilityButton-outline-safe);
+}
+.dodo-ui-UtilityButton.color--warning {
+  color: var(--dodo-color-neutral-800);
+  background-color: transparent;
+}
+.dodo-ui-UtilityButton.color--warning:hover {
+  color: var(--dodo-color-warning-800);
+  background-color: var(--dodo-ui-UtilityButton-text-warning-hover-bg);
+}
+.dodo-ui-UtilityButton.color--warning:active {
+  color: var(--dodo-color-warning-800);
+  background-color: var(--dodo-ui-UtilityButton-text-warning-active-bg);
+}
+.dodo-ui-UtilityButton.color--warning.outline {
+  border-color: var(--dodo-ui-UtilityButton-outline-warning);
+}
+.dodo-ui-UtilityButton.color--danger {
+  color: var(--dodo-color-neutral-800);
+  background-color: transparent;
+}
+.dodo-ui-UtilityButton.color--danger:hover {
+  color: var(--dodo-color-danger-800);
+  background-color: var(--dodo-ui-UtilityButton-text-danger-hover-bg);
+}
+.dodo-ui-UtilityButton.color--danger:active {
+  color: var(--dodo-color-danger-800);
+  background-color: var(--dodo-ui-UtilityButton-text-danger-active-bg);
+}
+.dodo-ui-UtilityButton.color--danger.outline {
+  border-color: var(--dodo-ui-UtilityButton-outline-danger);
+}
+.dodo-ui-UtilityButton[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: var(--dodo-ui-UtilityButton-disabled-bg);
+  color: var(--dodo-ui-UtilityButton-disabled-color);
+}
+.dodo-ui-UtilityButton[disabled].outline {
+  border-color: transparent;
+}
+.dodo-ui-UtilityButton.compact.size--normal, .dodo-ui-UtilityButton.compact.size--small, .dodo-ui-UtilityButton.compact.size--large {
+  min-width: initial;
+  padding: 0;
+}
+.dodo-ui-UtilityButton.compact.size--normal {
+  width: calc(var(--dodo-ui-element-height-normal) / 1.2);
+}
+.dodo-ui-UtilityButton.compact.size--small {
+  width: calc(var(--dodo-ui-element-height-small) / 1.2);
+}
+.dodo-ui-UtilityButton.compact.size--large {
+  width: calc(var(--dodo-ui-element-height-large) / 1.2);
+}
+
+:root {
+  --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-outline-neutral: var(--dodo-color-neutral-400);
+  --dodo-ui-Button-text-neutral-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Button-text-neutral-hover-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-text-neutral-active-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-Button-solid-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-Button-solid-neutral-hover-bg: var(--dodo-color-neutral-600);
+  --dodo-ui-Button-solid-neutral-active-bg: var(--dodo-color-neutral-700);
+  --dodo-ui-Button-outline-primary: var(--dodo-color-primary-400);
+  --dodo-ui-Button-text-primary-bg: var(--dodo-color-primary-100);
+  --dodo-ui-Button-text-primary-hover-bg: var(--dodo-color-primary-200);
+  --dodo-ui-Button-text-primary-active-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-600);
+  --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-700);
+  --dodo-ui-Button-outline-secondary: var(--dodo-color-secondary-400);
+  --dodo-ui-Button-text-secondary-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-Button-text-secondary-hover-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-text-secondary-active-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-600);
+  --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-700);
+  --dodo-ui-Button-outline-safe: var(--dodo-color-safe-400);
+  --dodo-ui-Button-text-safe-bg: var(--dodo-color-safe-100);
+  --dodo-ui-Button-text-safe-hover-bg: var(--dodo-color-safe-200);
+  --dodo-ui-Button-text-safe-active-bg: var(--dodo-color-safe-300);
+  --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-600);
+  --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-700);
+  --dodo-ui-Button-outline-warning: var(--dodo-color-warning-400);
+  --dodo-ui-Button-text-warning-bg: var(--dodo-color-warning-100);
+  --dodo-ui-Button-text-warning-hover-bg: var(--dodo-color-warning-200);
+  --dodo-ui-Button-text-warning-active-bg: var(--dodo-color-warning-300);
+  --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-600);
+  --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-700);
+  --dodo-ui-Button-outline-danger: var(--dodo-color-danger-400);
+  --dodo-ui-Button-text-danger-bg: var(--dodo-color-danger-100);
+  --dodo-ui-Button-text-danger-hover-bg: var(--dodo-color-danger-200);
+  --dodo-ui-Button-text-danger-active-bg: var(--dodo-color-danger-300);
+  --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-500);
+  --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-600);
+  --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-700);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-500);
+  --dodo-ui-Button-outline-neutral: color-mix(in oklab, var(--dodo-color-neutral-300) 90%, #fff);
+  --dodo-ui-Button-text-neutral-bg: color-mix(in oklab, var(--dodo-color-neutral-50) 90%, #fff);
+  --dodo-ui-Button-text-neutral-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-100) 90%, #fff);
+  --dodo-ui-Button-text-neutral-active-bg: color-mix(in oklab, var(--dodo-color-neutral-200) 90%, #fff);
+  --dodo-ui-Button-solid-neutral-bg: var(--dodo-color-neutral-400);
+  --dodo-ui-Button-solid-neutral-hover-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-Button-solid-neutral-active-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-Button-outline-primary: color-mix(in oklab, var(--dodo-color-primary-300) 90%, #fff);
+  --dodo-ui-Button-text-primary-bg: color-mix(in oklab, var(--dodo-color-primary-50) 90%, #fff);
+  --dodo-ui-Button-text-primary-hover-bg: color-mix(in oklab, var(--dodo-color-primary-100) 90%, #fff);
+  --dodo-ui-Button-text-primary-active-bg: color-mix(in oklab, var(--dodo-color-primary-200) 90%, #fff);
+  --dodo-ui-Button-solid-primary-bg: var(--dodo-color-primary-400);
+  --dodo-ui-Button-solid-primary-hover-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Button-solid-primary-active-bg: var(--dodo-color-primary-200);
+  --dodo-ui-Button-outline-secondary: color-mix(in oklab, var(--dodo-color-secondary-300) 90%, #fff);
+  --dodo-ui-Button-text-secondary-bg: color-mix(in oklab, var(--dodo-color-secondary-50) 90%, #fff);
+  --dodo-ui-Button-text-secondary-hover-bg: color-mix(in oklab, var(--dodo-color-secondary-100) 90%, #fff);
+  --dodo-ui-Button-text-secondary-active-bg: color-mix(in oklab, var(--dodo-color-secondary-200) 90%, #fff);
+  --dodo-ui-Button-solid-secondary-bg: var(--dodo-color-secondary-400);
+  --dodo-ui-Button-solid-secondary-hover-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-Button-solid-secondary-active-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-Button-outline-safe: color-mix(in oklab, var(--dodo-color-safe-300) 90%, #fff);
+  --dodo-ui-Button-text-safe-bg: color-mix(in oklab, var(--dodo-color-safe-50) 90%, #fff);
+  --dodo-ui-Button-text-safe-hover-bg: color-mix(in oklab, var(--dodo-color-safe-100) 90%, #fff);
+  --dodo-ui-Button-text-safe-active-bg: color-mix(in oklab, var(--dodo-color-safe-200) 90%, #fff);
+  --dodo-ui-Button-solid-safe-bg: var(--dodo-color-safe-400);
+  --dodo-ui-Button-solid-safe-hover-bg: var(--dodo-color-safe-300);
+  --dodo-ui-Button-solid-safe-active-bg: var(--dodo-color-safe-200);
+  --dodo-ui-Button-outline-warning: color-mix(in oklab, var(--dodo-color-warning-300) 90%, #fff);
+  --dodo-ui-Button-text-warning-bg: color-mix(in oklab, var(--dodo-color-warning-50) 90%, #fff);
+  --dodo-ui-Button-text-warning-hover-bg: color-mix(in oklab, var(--dodo-color-warning-100) 90%, #fff);
+  --dodo-ui-Button-text-warning-active-bg: color-mix(in oklab, var(--dodo-color-warning-200) 90%, #fff);
+  --dodo-ui-Button-solid-warning-bg: var(--dodo-color-warning-400);
+  --dodo-ui-Button-solid-warning-hover-bg: var(--dodo-color-warning-300);
+  --dodo-ui-Button-solid-warning-active-bg: var(--dodo-color-warning-200);
+  --dodo-ui-Button-outline-danger: color-mix(in oklab, var(--dodo-color-danger-300) 90%, #fff);
+  --dodo-ui-Button-text-danger-bg: color-mix(in oklab, var(--dodo-color-danger-50) 90%, #fff);
+  --dodo-ui-Button-text-danger-hover-bg: color-mix(in oklab, var(--dodo-color-danger-100) 90%, #fff);
+  --dodo-ui-Button-text-danger-active-bg: color-mix(in oklab, var(--dodo-color-danger-200) 90%, #fff);
+  --dodo-ui-Button-solid-danger-bg: var(--dodo-color-danger-400);
+  --dodo-ui-Button-solid-danger-hover-bg: var(--dodo-color-danger-300);
+  --dodo-ui-Button-solid-danger-active-bg: var(--dodo-color-danger-200);
+}
+
+.dodo-ui-Button {
+  cursor: pointer;
+  transition: background-color 70ms, color 70ms, border-color 70ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: transparent;
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  letter-spacing: 0.3px;
+}
+.dodo-ui-Button.size--normal {
+  height: var(--dodo-ui-element-height-normal);
+  font-size: 1rem;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
+  min-width: 45px;
+}
+.dodo-ui-Button.size--small {
+  height: var(--dodo-ui-element-height-small);
+  padding: 0 var(--dodo-ui-space);
+  font-size: 0.9rem;
+  min-width: 35px;
+}
+.dodo-ui-Button.size--large {
+  height: var(--dodo-ui-element-height-large);
+  font-size: 1.1rem;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
+  min-width: 85px;
+}
+.dodo-ui-Button.roundness--1 {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-Button.roundness--2 {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-Button.roundness--3 {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-Button.roundness--pill {
+  border-radius: 999px;
+}
+.dodo-ui-Button.roundness--full {
+  border-radius: 50%;
+}
+.dodo-ui-Button.color--neutral.variant--text {
+  color: var(--dodo-color-neutral-800);
+  background-color: var(--dodo-ui-Button-text-neutral-bg);
+}
+.dodo-ui-Button.color--neutral.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-neutral-hover-bg);
+}
+.dodo-ui-Button.color--neutral.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-neutral-active-bg);
+}
+.dodo-ui-Button.color--neutral.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-neutral);
+}
+.dodo-ui-Button.color--neutral.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-neutral-bg);
+}
+.dodo-ui-Button.color--neutral.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-neutral-hover-bg);
+}
+.dodo-ui-Button.color--neutral.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-neutral-active-bg);
+}
+.dodo-ui-Button.color--primary.variant--text {
+  color: var(--dodo-color-primary-800);
+  background-color: var(--dodo-ui-Button-text-primary-bg);
+}
+.dodo-ui-Button.color--primary.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-primary-hover-bg);
+}
+.dodo-ui-Button.color--primary.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-primary-active-bg);
+}
+.dodo-ui-Button.color--primary.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-primary);
+}
+.dodo-ui-Button.color--primary.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-primary-bg);
+}
+.dodo-ui-Button.color--primary.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-primary-hover-bg);
+}
+.dodo-ui-Button.color--primary.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-primary-active-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text {
+  color: var(--dodo-color-secondary-800);
+  background-color: var(--dodo-ui-Button-text-secondary-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-secondary-hover-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-secondary-active-bg);
+}
+.dodo-ui-Button.color--secondary.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-secondary);
+}
+.dodo-ui-Button.color--secondary.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-secondary-bg);
+}
+.dodo-ui-Button.color--secondary.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-secondary-hover-bg);
+}
+.dodo-ui-Button.color--secondary.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-secondary-active-bg);
+}
+.dodo-ui-Button.color--safe.variant--text {
+  color: var(--dodo-color-safe-800);
+  background-color: var(--dodo-ui-Button-text-safe-bg);
+}
+.dodo-ui-Button.color--safe.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-safe-hover-bg);
+}
+.dodo-ui-Button.color--safe.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-safe-active-bg);
+}
+.dodo-ui-Button.color--safe.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-safe);
+}
+.dodo-ui-Button.color--safe.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-safe-bg);
+}
+.dodo-ui-Button.color--safe.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-safe-hover-bg);
+}
+.dodo-ui-Button.color--safe.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-safe-active-bg);
+}
+.dodo-ui-Button.color--warning.variant--text {
+  color: var(--dodo-color-warning-800);
+  background-color: var(--dodo-ui-Button-text-warning-bg);
+}
+.dodo-ui-Button.color--warning.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-warning-hover-bg);
+}
+.dodo-ui-Button.color--warning.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-warning-active-bg);
+}
+.dodo-ui-Button.color--warning.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-warning);
+}
+.dodo-ui-Button.color--warning.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-warning-bg);
+}
+.dodo-ui-Button.color--warning.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-warning-hover-bg);
+}
+.dodo-ui-Button.color--warning.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-warning-active-bg);
+}
+.dodo-ui-Button.color--danger.variant--text {
+  color: var(--dodo-color-danger-800);
+  background-color: var(--dodo-ui-Button-text-danger-bg);
+}
+.dodo-ui-Button.color--danger.variant--text:hover {
+  background-color: var(--dodo-ui-Button-text-danger-hover-bg);
+}
+.dodo-ui-Button.color--danger.variant--text:active {
+  background-color: var(--dodo-ui-Button-text-danger-active-bg);
+}
+.dodo-ui-Button.color--danger.variant--text.outline {
+  border-color: var(--dodo-ui-Button-outline-danger);
+}
+.dodo-ui-Button.color--danger.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-Button-solid-danger-bg);
+}
+.dodo-ui-Button.color--danger.variant--solid:hover {
+  background-color: var(--dodo-ui-Button-solid-danger-hover-bg);
+}
+.dodo-ui-Button.color--danger.variant--solid:active {
+  background-color: var(--dodo-ui-Button-solid-danger-active-bg);
+}
+.dodo-ui-Button[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.dodo-ui-Button[disabled].variant--text, .dodo-ui-Button[disabled].variant--solid {
+  background-color: var(--dodo-ui-Button-disabled-bg);
+  color: var(--dodo-ui-Button-disabled-color);
+}
+.dodo-ui-Button[disabled].variant--text.outline, .dodo-ui-Button[disabled].variant--solid.outline {
+  border-color: transparent;
+}
+.dodo-ui-Button.compact.size--normal, .dodo-ui-Button.compact.size--small, .dodo-ui-Button.compact.size--large {
+  min-width: initial;
+  padding: 0;
+}
+.dodo-ui-Button.compact.size--normal {
+  width: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-Button.compact.size--small {
+  width: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-Button.compact.size--large {
+  width: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-Button.fullWidth {
+  width: 100%;
+}
+
+:root {
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-500);
+  --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
+  --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
+  --dodo-ui-InputEnclosure-safe-border-color: var(--dodo-color-safe-500);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-200);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-600);
+  --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
+  --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
+  --dodo-ui-InputEnclosure-safe-border-color: var(--dodo-color-safe-600);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-500);
+}
+
+.dodo-ui-InputEnclosure {
+  display: flex;
+  overflow: hidden;
+  color: var(--dodo-color-neutral-800);
+  transition: border-color 150ms, background-color 150ms, color 150ms;
+  border: 0;
+}
+.dodo-ui-InputEnclosure.outline {
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: var(--dodo-ui-InputEnclosure-border-color);
+}
+.dodo-ui-InputEnclosure .InputBox {
+  flex: 1;
+  border: 0;
+  outline: 0;
+  height: 100%;
+  background-color: transparent;
+  font-family: inherit;
+  color: inherit;
+  letter-spacing: 0.3px;
+  margin: 0;
+}
+.dodo-ui-InputEnclosure.focused {
+  border-color: var(--dodo-ui-InputEnclosure-focus-border-color);
+}
+.dodo-ui-InputEnclosure.error {
+  border-color: var(--dodo-ui-InputEnclosure-error-border-color);
+}
+.dodo-ui-InputEnclosure.disabled {
+  cursor: not-allowed;
+  background-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+  color: var(--dodo-ui-InputEnclosure-disabled-color);
+  border-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+}
+.dodo-ui-InputEnclosure.size--small {
+  height: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-InputEnclosure.size--normal {
+  height: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-InputEnclosure.size--large {
+  height: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-InputEnclosure.size--normal .InputBox {
+  font-size: 1rem;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-InputEnclosure.size--small .InputBox {
+  padding: 0 var(--dodo-ui-space);
+  font-size: 0.9rem;
+}
+.dodo-ui-InputEnclosure.size--large .InputBox {
+  font-size: 1.1rem;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-InputEnclosure.roundness--1 {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-InputEnclosure.roundness--2 {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-InputEnclosure.roundness--3 {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-InputEnclosure.roundness--pill {
+  border-radius: 999px;
+}
+
+.dodo-ui-Label {
+  font-size: inherit;
+  color: inherit;
+  font-weight: inherit;
+}
+
+.dodo-ui-FormField {
+  display: block;
+}
+.dodo-ui-FormField .FormField__Label {
+  margin-bottom: 6px;
+  display: block;
+}
+
+:root {
+  --dodo-ui-CheckEnclosure-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-CheckEnclosure-disabled-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-CheckEnclosure-outline-neutral: var(--dodo-color-neutral-300);
+  --dodo-ui-CheckEnclosure-outline-neutral-checked: var(--dodo-color-neutral-500);
+  --dodo-ui-CheckEnclosure-text-neutral-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-CheckEnclosure-text-neutral-active-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-CheckEnclosure-solid-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-CheckEnclosure-outline-primary: var(--dodo-color-primary-300);
+  --dodo-ui-CheckEnclosure-outline-primary-checked: var(--dodo-color-primary-500);
+  --dodo-ui-CheckEnclosure-text-primary-bg: var(--dodo-color-primary-100);
+  --dodo-ui-CheckEnclosure-text-primary-active-bg: var(--dodo-color-primary-200);
+  --dodo-ui-CheckEnclosure-solid-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-CheckEnclosure-outline-secondary: var(--dodo-color-secondary-300);
+  --dodo-ui-CheckEnclosure-outline-secondary-checked: var(--dodo-color-secondary-500);
+  --dodo-ui-CheckEnclosure-text-secondary-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-CheckEnclosure-text-secondary-active-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-CheckEnclosure-solid-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-CheckEnclosure-outline-safe: var(--dodo-color-safe-300);
+  --dodo-ui-CheckEnclosure-outline-safe-checked: var(--dodo-color-safe-500);
+  --dodo-ui-CheckEnclosure-text-safe-bg: var(--dodo-color-safe-100);
+  --dodo-ui-CheckEnclosure-text-safe-active-bg: var(--dodo-color-safe-200);
+  --dodo-ui-CheckEnclosure-solid-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-CheckEnclosure-outline-warning: var(--dodo-color-warning-300);
+  --dodo-ui-CheckEnclosure-outline-warning-checked: var(--dodo-color-warning-500);
+  --dodo-ui-CheckEnclosure-text-warning-bg: var(--dodo-color-warning-100);
+  --dodo-ui-CheckEnclosure-text-warning-active-bg: var(--dodo-color-warning-200);
+  --dodo-ui-CheckEnclosure-solid-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-CheckEnclosure-outline-danger: var(--dodo-color-danger-300);
+  --dodo-ui-CheckEnclosure-outline-danger-checked: var(--dodo-color-danger-500);
+  --dodo-ui-CheckEnclosure-text-danger-bg: var(--dodo-color-danger-100);
+  --dodo-ui-CheckEnclosure-text-danger-active-bg: var(--dodo-color-danger-200);
+  --dodo-ui-CheckEnclosure-solid-danger-bg: var(--dodo-color-danger-500);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-CheckEnclosure-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-CheckEnclosure-disabled-color: var(--dodo-color-neutral-500);
+  --dodo-ui-CheckEnclosure-outline-neutral: color-mix(in oklab, var(--dodo-color-neutral-300) 90%, #fff);
+  --dodo-ui-CheckEnclosure-outline-neutral-checked: color-mix(in oklab, var(--dodo-color-neutral-500) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-neutral-bg: color-mix(in oklab, var(--dodo-color-neutral-50) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-neutral-active-bg: color-mix(in oklab, var(--dodo-color-neutral-100) 90%, #fff);
+  --dodo-ui-CheckEnclosure-solid-neutral-bg: var(--dodo-color-neutral-400);
+  --dodo-ui-CheckEnclosure-outline-primary: color-mix(in oklab, var(--dodo-color-primary-300) 90%, #fff);
+  --dodo-ui-CheckEnclosure-outline-primary-checked: color-mix(in oklab, var(--dodo-color-primary-500) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-primary-bg: color-mix(in oklab, var(--dodo-color-primary-50) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-primary-active-bg: color-mix(in oklab, var(--dodo-color-primary-100) 90%, #fff);
+  --dodo-ui-CheckEnclosure-solid-primary-bg: var(--dodo-color-primary-400);
+  --dodo-ui-CheckEnclosure-outline-secondary: color-mix(in oklab, var(--dodo-color-secondary-300) 90%, #fff);
+  --dodo-ui-CheckEnclosure-outline-secondary-checked: color-mix(in oklab, var(--dodo-color-secondary-500) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-secondary-bg: color-mix(in oklab, var(--dodo-color-secondary-50) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-secondary-active-bg: color-mix(in oklab, var(--dodo-color-secondary-100) 90%, #fff);
+  --dodo-ui-CheckEnclosure-solid-secondary-bg: var(--dodo-color-secondary-400);
+  --dodo-ui-CheckEnclosure-outline-safe: color-mix(in oklab, var(--dodo-color-safe-300) 90%, #fff);
+  --dodo-ui-CheckEnclosure-outline-safe-checked: color-mix(in oklab, var(--dodo-color-safe-500) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-safe-bg: color-mix(in oklab, var(--dodo-color-safe-50) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-safe-active-bg: color-mix(in oklab, var(--dodo-color-safe-100) 90%, #fff);
+  --dodo-ui-CheckEnclosure-solid-safe-bg: var(--dodo-color-safe-400);
+  --dodo-ui-CheckEnclosure-outline-warning: color-mix(in oklab, var(--dodo-color-warning-300) 90%, #fff);
+  --dodo-ui-CheckEnclosure-outline-warning-checked: color-mix(in oklab, var(--dodo-color-warning-500) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-warning-bg: color-mix(in oklab, var(--dodo-color-warning-50) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-warning-active-bg: color-mix(in oklab, var(--dodo-color-warning-100) 90%, #fff);
+  --dodo-ui-CheckEnclosure-solid-warning-bg: var(--dodo-color-warning-400);
+  --dodo-ui-CheckEnclosure-outline-danger: color-mix(in oklab, var(--dodo-color-danger-300) 90%, #fff);
+  --dodo-ui-CheckEnclosure-outline-danger-checked: color-mix(in oklab, var(--dodo-color-danger-500) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-danger-bg: color-mix(in oklab, var(--dodo-color-danger-50) 90%, #fff);
+  --dodo-ui-CheckEnclosure-text-danger-active-bg: color-mix(in oklab, var(--dodo-color-danger-100) 90%, #fff);
+  --dodo-ui-CheckEnclosure-solid-danger-bg: var(--dodo-color-danger-400);
+}
+
+.CheckEnclosure.color--neutral.outline {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-neutral);
+}
+.CheckEnclosure.color--neutral.variant--text {
+  color: var(--dodo-color-neutral-800);
+  background-color: var(--dodo-ui-CheckEnclosure-text-neutral-bg);
+}
+.CheckEnclosure.color--neutral.variant--text .CheckThumbInternal {
+  background-color: var(--dodo-color-neutral-600);
+}
+.CheckEnclosure.color--neutral.variant--text[data-state=checked] {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-neutral-checked);
+}
+.CheckEnclosure.color--neutral.variant--text[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-neutral-700);
+}
+.CheckEnclosure.color--neutral.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CheckEnclosure-text-neutral-bg);
+}
+.CheckEnclosure.color--neutral.variant--solid .CheckThumbInternal {
+  background-color: var(--dodo-color-neutral-600);
+}
+.CheckEnclosure.color--neutral.variant--solid[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-solid-neutral-bg);
+  border-color: transparent;
+}
+.CheckEnclosure.color--neutral.variant--solid[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-constant-white);
+}
+.CheckEnclosure.color--neutral.CheckEnclosureBackdrop.variant--text[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-text-neutral-active-bg);
+}
+.CheckEnclosure.color--primary.outline {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-primary);
+}
+.CheckEnclosure.color--primary.variant--text {
+  color: var(--dodo-color-primary-800);
+  background-color: var(--dodo-ui-CheckEnclosure-text-primary-bg);
+}
+.CheckEnclosure.color--primary.variant--text .CheckThumbInternal {
+  background-color: var(--dodo-color-primary-600);
+}
+.CheckEnclosure.color--primary.variant--text[data-state=checked] {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-primary-checked);
+}
+.CheckEnclosure.color--primary.variant--text[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-primary-700);
+}
+.CheckEnclosure.color--primary.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CheckEnclosure-text-primary-bg);
+}
+.CheckEnclosure.color--primary.variant--solid .CheckThumbInternal {
+  background-color: var(--dodo-color-primary-600);
+}
+.CheckEnclosure.color--primary.variant--solid[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-solid-primary-bg);
+  border-color: transparent;
+}
+.CheckEnclosure.color--primary.variant--solid[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-constant-white);
+}
+.CheckEnclosure.color--primary.CheckEnclosureBackdrop.variant--text[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-text-primary-active-bg);
+}
+.CheckEnclosure.color--secondary.outline {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-secondary);
+}
+.CheckEnclosure.color--secondary.variant--text {
+  color: var(--dodo-color-secondary-800);
+  background-color: var(--dodo-ui-CheckEnclosure-text-secondary-bg);
+}
+.CheckEnclosure.color--secondary.variant--text .CheckThumbInternal {
+  background-color: var(--dodo-color-secondary-600);
+}
+.CheckEnclosure.color--secondary.variant--text[data-state=checked] {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-secondary-checked);
+}
+.CheckEnclosure.color--secondary.variant--text[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-secondary-700);
+}
+.CheckEnclosure.color--secondary.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CheckEnclosure-text-secondary-bg);
+}
+.CheckEnclosure.color--secondary.variant--solid .CheckThumbInternal {
+  background-color: var(--dodo-color-secondary-600);
+}
+.CheckEnclosure.color--secondary.variant--solid[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-solid-secondary-bg);
+  border-color: transparent;
+}
+.CheckEnclosure.color--secondary.variant--solid[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-constant-white);
+}
+.CheckEnclosure.color--secondary.CheckEnclosureBackdrop.variant--text[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-text-secondary-active-bg);
+}
+.CheckEnclosure.color--safe.outline {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-safe);
+}
+.CheckEnclosure.color--safe.variant--text {
+  color: var(--dodo-color-safe-800);
+  background-color: var(--dodo-ui-CheckEnclosure-text-safe-bg);
+}
+.CheckEnclosure.color--safe.variant--text .CheckThumbInternal {
+  background-color: var(--dodo-color-safe-600);
+}
+.CheckEnclosure.color--safe.variant--text[data-state=checked] {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-safe-checked);
+}
+.CheckEnclosure.color--safe.variant--text[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-safe-700);
+}
+.CheckEnclosure.color--safe.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CheckEnclosure-text-safe-bg);
+}
+.CheckEnclosure.color--safe.variant--solid .CheckThumbInternal {
+  background-color: var(--dodo-color-safe-600);
+}
+.CheckEnclosure.color--safe.variant--solid[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-solid-safe-bg);
+  border-color: transparent;
+}
+.CheckEnclosure.color--safe.variant--solid[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-constant-white);
+}
+.CheckEnclosure.color--safe.CheckEnclosureBackdrop.variant--text[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-text-safe-active-bg);
+}
+.CheckEnclosure.color--warning.outline {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-warning);
+}
+.CheckEnclosure.color--warning.variant--text {
+  color: var(--dodo-color-warning-800);
+  background-color: var(--dodo-ui-CheckEnclosure-text-warning-bg);
+}
+.CheckEnclosure.color--warning.variant--text .CheckThumbInternal {
+  background-color: var(--dodo-color-warning-600);
+}
+.CheckEnclosure.color--warning.variant--text[data-state=checked] {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-warning-checked);
+}
+.CheckEnclosure.color--warning.variant--text[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-warning-700);
+}
+.CheckEnclosure.color--warning.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CheckEnclosure-text-warning-bg);
+}
+.CheckEnclosure.color--warning.variant--solid .CheckThumbInternal {
+  background-color: var(--dodo-color-warning-600);
+}
+.CheckEnclosure.color--warning.variant--solid[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-solid-warning-bg);
+  border-color: transparent;
+}
+.CheckEnclosure.color--warning.variant--solid[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-constant-white);
+}
+.CheckEnclosure.color--warning.CheckEnclosureBackdrop.variant--text[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-text-warning-active-bg);
+}
+.CheckEnclosure.color--danger.outline {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-danger);
+}
+.CheckEnclosure.color--danger.variant--text {
+  color: var(--dodo-color-danger-800);
+  background-color: var(--dodo-ui-CheckEnclosure-text-danger-bg);
+}
+.CheckEnclosure.color--danger.variant--text .CheckThumbInternal {
+  background-color: var(--dodo-color-danger-600);
+}
+.CheckEnclosure.color--danger.variant--text[data-state=checked] {
+  border-color: var(--dodo-ui-CheckEnclosure-outline-danger-checked);
+}
+.CheckEnclosure.color--danger.variant--text[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-danger-700);
+}
+.CheckEnclosure.color--danger.variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CheckEnclosure-text-danger-bg);
+}
+.CheckEnclosure.color--danger.variant--solid .CheckThumbInternal {
+  background-color: var(--dodo-color-danger-600);
+}
+.CheckEnclosure.color--danger.variant--solid[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-solid-danger-bg);
+  border-color: transparent;
+}
+.CheckEnclosure.color--danger.variant--solid[data-state=checked] .CheckThumbInternal {
+  background-color: var(--dodo-color-constant-white);
+}
+.CheckEnclosure.color--danger.CheckEnclosureBackdrop.variant--text[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-text-danger-active-bg);
+}
+.CheckEnclosure[disabled] {
+  cursor: not-allowed;
+  pointer-events: none;
+  border-color: transparent;
+}
+.CheckEnclosure[disabled].variant--text {
+  background-color: var(--dodo-ui-CheckEnclosure-disabled-bg);
+  color: var(--dodo-ui-CheckEnclosure-disabled-color);
+}
+.CheckEnclosure[disabled].variant--text .CheckThumbInternal {
+  background-color: var(--dodo-ui-CheckEnclosure-disabled-color);
+}
+.CheckEnclosure[disabled].variant--text[data-state=checked] {
+  border-color: var(--dodo-color-neutral-400);
+}
+.CheckEnclosure[disabled].variant--solid {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CheckEnclosure-disabled-bg);
+}
+.CheckEnclosure[disabled].variant--solid .CheckThumbInternal {
+  background-color: var(--dodo-color-constant-white);
+}
+.CheckEnclosure[disabled].variant--solid[data-state=checked] {
+  background-color: var(--dodo-color-neutral-400);
+  border-color: transparent;
+}
+.CheckEnclosure[disabled].CheckEnclosureBackdrop.variant--text[data-state=checked] {
+  background-color: var(--dodo-ui-CheckEnclosure-disabled-bg);
+}
+
+.dodo-ui-Checkbox {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--dodo-color-neutral-800);
+}
+.dodo-ui-Checkbox .CheckEnclosure {
+  cursor: pointer;
+  transition: background-color 70ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: var(--dodo-color-neutral-100);
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  letter-spacing: 0.3px;
+  padding: 0;
+}
+.dodo-ui-Checkbox .CheckComponentLabel {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-left: var(--dodo-ui-space);
+}
+.dodo-ui-Checkbox .CheckComponentCheckContainer {
+  display: flex;
+  align-items: center;
+}
+.dodo-ui-Checkbox.size--normal {
+  font-size: 1rem;
+}
+.dodo-ui-Checkbox.size--normal .CheckEnclosure {
+  height: calc(var(--dodo-ui-element-height-normal) / 1.6);
+  width: calc(var(--dodo-ui-element-height-normal) / 1.6);
+}
+.dodo-ui-Checkbox.size--normal .CheckComponentCheckContainer {
+  font-size: 1.7rem;
+}
+.dodo-ui-Checkbox.size--small {
+  font-size: 0.9rem;
+}
+.dodo-ui-Checkbox.size--small .CheckEnclosure {
+  height: calc(var(--dodo-ui-element-height-small) / 1.6);
+  width: calc(var(--dodo-ui-element-height-small) / 1.6);
+}
+.dodo-ui-Checkbox.size--small .CheckComponentCheckContainer {
+  font-size: 1.5rem;
+}
+.dodo-ui-Checkbox.size--large {
+  font-size: 1.1rem;
+}
+.dodo-ui-Checkbox.size--large .CheckEnclosure {
+  height: calc(var(--dodo-ui-element-height-large) / 1.6);
+  width: calc(var(--dodo-ui-element-height-large) / 1.6);
+}
+.dodo-ui-Checkbox.size--large .CheckComponentCheckContainer {
+  font-size: 2.2rem;
+}
+.dodo-ui-Checkbox.roundness--1 .CheckEnclosure {
+  border-radius: calc(var(--dodo-ui-element-roundness-1) / 2);
+}
+.dodo-ui-Checkbox.roundness--2 .CheckEnclosure {
+  border-radius: calc(var(--dodo-ui-element-roundness-2) / 2);
+}
+.dodo-ui-Checkbox.roundness--3 .CheckEnclosure {
+  border-radius: calc(var(--dodo-ui-element-roundness-3) / 2);
+}
+.dodo-ui-Checkbox.roundness--pill .CheckEnclosure {
+  border-radius: 999px;
+}
+
+.dodo-ui-RadioGroup[data-orientation=horizontal] {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.dodo-ui-Radio {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--dodo-color-neutral-800);
+}
+.dodo-ui-Radio .CheckEnclosure {
+  cursor: pointer;
+  transition: background-color 70ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: var(--dodo-color-neutral-100);
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  letter-spacing: 0.3px;
+  padding: 0;
+}
+.dodo-ui-Radio .CheckComponentLabel {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-left: var(--dodo-ui-space);
+}
+.dodo-ui-Radio .CheckComponentCheckContainer {
+  display: flex;
+  align-items: center;
+}
+.dodo-ui-Radio.size--normal {
+  font-size: 1rem;
+}
+.dodo-ui-Radio.size--normal .CheckEnclosure {
+  height: calc(var(--dodo-ui-element-height-normal) / 1.55);
+  width: calc(var(--dodo-ui-element-height-normal) / 1.55);
+}
+.dodo-ui-Radio.size--normal .CheckComponentCheckContainer {
+  font-size: 0.9rem;
+}
+.dodo-ui-Radio.size--small {
+  font-size: 0.9rem;
+}
+.dodo-ui-Radio.size--small .CheckEnclosure {
+  height: calc(var(--dodo-ui-element-height-small) / 1.55);
+  width: calc(var(--dodo-ui-element-height-small) / 1.55);
+}
+.dodo-ui-Radio.size--small .CheckComponentCheckContainer {
+  font-size: 0.7rem;
+}
+.dodo-ui-Radio.size--large {
+  font-size: 1.1rem;
+}
+.dodo-ui-Radio.size--large .CheckEnclosure {
+  height: calc(var(--dodo-ui-element-height-large) / 1.55);
+  width: calc(var(--dodo-ui-element-height-large) / 1.55);
+}
+.dodo-ui-Radio.size--large .CheckComponentCheckContainer {
+  font-size: 1.145rem;
+}
+.dodo-ui-Radio.roundness--1 .CheckEnclosure {
+  border-radius: calc(var(--dodo-ui-element-roundness-1) / 2);
+}
+.dodo-ui-Radio.roundness--2 .CheckEnclosure {
+  border-radius: calc(var(--dodo-ui-element-roundness-2) / 2);
+}
+.dodo-ui-Radio.roundness--3 .CheckEnclosure {
+  border-radius: calc(var(--dodo-ui-element-roundness-3) / 2);
+}
+.dodo-ui-Radio.roundness--pill .CheckEnclosure {
+  border-radius: 999px;
+}
+.dodo-ui-Radio.roundness--full .CheckEnclosure {
+  border-radius: 50%;
+}
+
+.dodo-ui-Switch {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--dodo-color-neutral-800);
+}
+.dodo-ui-Switch .CheckEnclosure {
+  cursor: pointer;
+  transition: background-color 70ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  font-family: inherit;
+  background-color: var(--dodo-color-neutral-100);
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: transparent;
+  color: inherit;
+  letter-spacing: 0.3px;
+  padding: 0;
+  position: relative;
+}
+.dodo-ui-Switch .CheckEnclosure[data-state=checked] .CheckThumb {
+  transform: translateX(100%);
+}
+.dodo-ui-Switch .CheckComponentLabel {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-left: var(--dodo-ui-space);
+}
+.dodo-ui-Switch .CheckComponentCheckContainer {
+  display: flex;
+  align-items: center;
+}
+.dodo-ui-Switch .CheckThumb {
+  margin-left: 0;
+  transition: margin 150ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 70ms ease;
+}
+.dodo-ui-Switch .CheckThumb .CheckThumbInternal {
+  border-radius: 50%;
+  width: 60%;
+  height: 60%;
+  display: inline-flex;
+  background-color: #000;
+}
+.dodo-ui-Switch.size--normal {
+  font-size: 1rem;
+}
+.dodo-ui-Switch.size--normal .CheckEnclosure {
+  height: calc(var(--dodo-ui-element-height-normal) / 1.2);
+  width: calc(var(--dodo-ui-element-height-normal) * 1.4);
+}
+.dodo-ui-Switch.size--normal .CheckEnclosure .CheckThumb {
+  height: calc(var(--dodo-ui-element-height-normal) / 1.3);
+  width: calc(var(--dodo-ui-element-height-normal) / 1.3);
+}
+.dodo-ui-Switch.size--normal .CheckEnclosure[data-state=checked] .CheckThumb {
+  transform: translateX(calc(var(--dodo-ui-element-height-normal) * 1.4 - var(--dodo-ui-element-height-normal) / 1.3 - 2px));
+}
+.dodo-ui-Switch.size--small {
+  font-size: 0.9rem;
+}
+.dodo-ui-Switch.size--small .CheckEnclosure {
+  height: calc(var(--dodo-ui-element-height-small) / 1.2);
+  width: calc(var(--dodo-ui-element-height-small) * 1.4);
+}
+.dodo-ui-Switch.size--small .CheckEnclosure .CheckThumb {
+  height: calc(var(--dodo-ui-element-height-small) / 1.3);
+  width: calc(var(--dodo-ui-element-height-small) / 1.3);
+}
+.dodo-ui-Switch.size--small .CheckEnclosure[data-state=checked] .CheckThumb {
+  transform: translateX(calc(var(--dodo-ui-element-height-small) * 1.4 - var(--dodo-ui-element-height-small) / 1.3 - 2px));
+}
+.dodo-ui-Switch.size--large {
+  font-size: 1.1rem;
+}
+.dodo-ui-Switch.size--large .CheckEnclosure {
+  height: calc(var(--dodo-ui-element-height-large) / 1.2);
+  width: calc(var(--dodo-ui-element-height-large) * 1.4);
+}
+.dodo-ui-Switch.size--large .CheckEnclosure .CheckThumb {
+  height: calc(var(--dodo-ui-element-height-large) / 1.3);
+  width: calc(var(--dodo-ui-element-height-large) / 1.3);
+}
+.dodo-ui-Switch.size--large .CheckEnclosure[data-state=checked] .CheckThumb {
+  transform: translateX(calc(var(--dodo-ui-element-height-large) * 1.4 - var(--dodo-ui-element-height-large) / 1.3 - 2px));
+}
+.dodo-ui-Switch.roundness--1 .CheckEnclosure {
+  border-radius: calc(var(--dodo-ui-element-roundness-1) / 2);
+}
+.dodo-ui-Switch.roundness--2 .CheckEnclosure {
+  border-radius: calc(var(--dodo-ui-element-roundness-2) / 2);
+}
+.dodo-ui-Switch.roundness--3 .CheckEnclosure {
+  border-radius: calc(var(--dodo-ui-element-roundness-3) / 2);
+}
+.dodo-ui-Switch.roundness--pill .CheckEnclosure {
+  border-radius: 999px;
+}
+
+:root {
+  --dodo-ui-SelectPopup-color: var(--dodo-color-black);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-SelectPopup-color: var(--dodo-color-neutral-800);
+}
+
+.dodo-ui-Select button[data-combobox-trigger] {
+  font-size: 1.5em;
+}
+.dodo-ui-Select.size--normal button[data-combobox-trigger] {
+  margin: 0 calc(var(--dodo-ui-space) / 2.5);
+}
+.dodo-ui-Select.size--small button[data-combobox-trigger] {
+  margin: 0 calc(var(--dodo-ui-space--small) / 2.5);
+}
+.dodo-ui-Select.size--large button[data-combobox-trigger] {
+  margin: 0 calc(var(--dodo-ui-space--large) / 2.5);
+}
+
+.SelectPopup {
+  --SelectPopup-width-default: calc(
+    var(--dodo-ui-element-height-normal) / 1.2 + var(--bits-combobox-anchor-width) +
+      var(--dodo-ui-space)
+  );
+  width: var(--SelectPopup-width, var(--SelectPopup-width-default));
+  height: var(--SelectPopup-height, initial);
+  min-width: var(--SelectPopup-min-width, var(--SelectPopup-width-default));
+  min-height: var(--SelectPopup-min-height, initial);
+  max-width: var(--SelectPopup-max-width, initial);
+  max-height: var(--SelectPopup-max-height, 400px);
+  color: var(--dodo-ui-SelectPopup-color);
+}
+.SelectPopup [data-combobox-item] {
+  padding: var(--dodo-ui-space);
+}
+.SelectPopup [data-combobox-item][data-selected] {
+  background-color: var(--dodo-color-primary-100);
+}
+.SelectPopup [data-combobox-item][data-highlighted] {
+  background-color: var(--dodo-color-primary-200);
+}
+.SelectPopup [data-combobox-scroll-down-button],
+.SelectPopup [data-combobox-scroll-up-button] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+}
+
+.dodo-ui-DatePicker button[data-popover-trigger] {
+  font-size: 1.4em;
+}
+.dodo-ui-DatePicker [data-date-field-input] {
+  display: flex;
+  align-items: center;
+}
+.dodo-ui-DatePicker [data-date-field-segment] {
+  height: 80%;
+  display: inline-flex;
+  align-items: center;
+}
+.dodo-ui-DatePicker [data-segment=literal] {
+  color: var(--dodo-color-neutral-500);
+}
+.dodo-ui-DatePicker.size--normal button[data-popover-trigger] {
+  margin: 0 calc(var(--dodo-ui-space) / 2.5);
+}
+.dodo-ui-DatePicker.size--normal [data-date-field-segment] {
+  padding: 0 calc(var(--dodo-ui-space) / 3);
+}
+.dodo-ui-DatePicker.size--small button[data-popover-trigger] {
+  margin: 0 calc(var(--dodo-ui-space--small) / 2.5);
+}
+.dodo-ui-DatePicker.size--small [data-date-field-segment] {
+  padding: 0 calc(var(--dodo-ui-space-small) / 3);
+}
+.dodo-ui-DatePicker.size--large button[data-popover-trigger] {
+  margin: 0 calc(var(--dodo-ui-space--large) / 2.5);
+}
+.dodo-ui-DatePicker.size--large [data-date-field-segment] {
+  padding: 0 calc(var(--dodo-ui-space-large) / 3);
+}
+
+/*# sourceMappingURL=components.css.map */