@arbor-education/design-system.components 0.6.0 → 0.8.0

package/dist/index.css

@@ -576,6 +576,14 @@
   --avatar-small-size: 1.25rem;
   --avatar-medium-size: 2rem;
   --avatar-extra-large-size: 6rem;
+  --single-user-color-border: var(--color-grey-100);
+  --single-user-color-background: var(--color-grey-050);
+  --single-user-color-text: var(--color-grey-900);
+  --single-user-radius: var(--border-radius-round);
+  --single-user-font-size: var(--font-size-2-13);
+  --single-user-spacing-gap: var(--spacing-xsmall);
+  --single-user-spacing-padding-inline-end: var(--spacing-small);
+  --single-user-border-width: var(--border-weight);
   --avatar-group-overlap: -2px;
   --avatar-group-overflow-count-font-size: 0.8125rem;
   --border-weight: 1px;
@@ -642,6 +650,9 @@
   --tag-spacing-vertical: var(--spacing-xsmall);
   --tag-spacing-horizontal: var(--spacing-medium);
   --tag-spacing-gap-horizontal: var(--spacing-small);
+  --tag-selected-color-background: var(--color-grey-200);
+  --tag-selected-color-border: var(--color-grey-200);
+  --tag-height: var(--size-control-xsmall);
   --card-focus-color-icon: var(--color-grey-900);
   --card-focus-color-text: var(--color-grey-900);
   --card-focus-color-border: var(--color-grey-100);
@@ -660,7 +671,24 @@
   --card-spacing-gap-vertical: var(--spacing-medium);
   --card-spacing-gap-horizontal: var(--spacing-large);
   --page-color-background: var(--color-grey-050);
+  --badge-small-size: 1.125rem;
+  --badge-small-radius: var(--border-radius-round);
+  --badge-small-spacing-horizontal: var(--spacing-xsmall);
+  --badge-small-font-size: var(--font-size-1-11);
+  --badge-medium-size: 1.25rem;
+  --badge-medium-radius: var(--border-radius-round);
+  --badge-medium-spacing-horizontal: var(--spacing-xsmall);
+  --badge-medium-font-size: var(--font-size-2-13);
+  --badge-large-size: 1.5rem;
+  --badge-large-radius: var(--border-radius-round);
+  --badge-large-spacing-horizontal: var(--spacing-small);
+  --badge-large-font-size: var(--font-size-3-14);
+  --badge-font-weight: var(--font-weight-semi-bold);
   --pill-bg: var(--color-mono-white);
+  --pill-radius: var(--border-radius-round);
+  --pill-spacing-horizontal: var(--spacing-small);
+  --pill-spacing-vertical: var(--spacing-xsmall);
+  --pill-spacing-gap-horizontal: var(--spacing-small);
   --pill-checkbox-hover-color-icon: var(--color-grey-900);
   --pill-checkbox-hover-color-text: var(--color-grey-900);
   --pill-checkbox-hover-color-border: var(--color-grey-500);
@@ -1170,8 +1198,8 @@
   --toggle-on-disabled-color-dot: var(--color-grey-050);
   --toggle-on-disabled-color-border: var(--color-grey-300);
   --toggle-on-disabled-color-background: var(--color-grey-300);
-  --toggle-off-focus-color-dot: var(--color-grey-500);
-  --toggle-off-focus-color-border: var(--color-grey-500);
+  --toggle-off-focus-color-dot: var(--color-grey-600);
+  --toggle-off-focus-color-border: var(--color-grey-600);
   --toggle-off-focus-color-background: var(--color-mono-white);
   --toggle-off-hover-color-dot: var(--color-grey-600);
   --toggle-off-hover-color-border: var(--color-grey-600);
@@ -1179,8 +1207,8 @@
   --toggle-off-active-color-dot: var(--color-grey-900);
   --toggle-off-active-color-border: var(--color-grey-900);
   --toggle-off-active-color-background: var(--color-grey-100);
-  --toggle-off-default-color-dot: var(--color-grey-500);
-  --toggle-off-default-color-border: var(--color-grey-500);
+  --toggle-off-default-color-dot: var(--color-grey-600);
+  --toggle-off-default-color-border: var(--color-grey-600);
   --toggle-off-default-color-background: var(--color-mono-white);
   --toggle-off-disabled-color-dot: var(--color-grey-300);
   --toggle-off-disabled-color-border: var(--color-grey-300);
@@ -1503,6 +1531,7 @@
   --form-field-combobox-placeholder-color-text: var(--color-grey-600);
   --form-field-combobox-placeholder-color-border: var(--color-grey-200);
   --form-field-combobox-placeholder-color-background: var(--color-mono-white);
+  --form-field-combobox-listbox-max-height: 150px;
   --form-field-textarea-error-color-text: var(--color-grey-900);
   --form-field-textarea-error-color-border: var(--color-semantic-destructive-500);
   --form-field-textarea-error-color-background: var(--color-mono-white);
@@ -2295,11 +2324,13 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
 
 .ds-number-input__container {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: center;
-  align-items: center;
-  padding: var(--form-field-spacing-vertical) var(--form-field-spacing-padding-x);
-  gap: var(--form-field-spacing-horizontal) var(--form-field-spacing-vertical-gap);
+  align-items: stretch;
+  box-sizing: border-box;
+  height: var(--form-field-text-medium-height);
+  padding: 0 var(--form-field-spacing-horizontal);
+  gap: var(--form-field-spacing-horizontal);
   border-radius: var(--form-field-radius);
   border: var(--border-weight) solid var(--form-field-text-placeholder-color-border);
   background: var(--form-field-text-placeholder-color-background);
@@ -2330,6 +2361,9 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   text-align: center;
   border: none;
   flex: 1;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
   padding: 0;
   color: var(--form-field-text-default-color-text);
 }
@@ -2338,11 +2372,13 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
 }
 .ds-number-input__container .ds-number-input__spinner-button {
   display: flex;
+  flex-shrink: 0;
   border: none;
   cursor: pointer;
   background: none;
   justify-content: center;
   align-items: center;
+  align-self: center;
   width: var(--icon-size-medium);
   height: var(--icon-size-medium);
   color: var(--form-field-icon-default-color-icon);
@@ -2544,16 +2580,20 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
 }
 
 .ds-tag {
-  display: flex;
-  padding: var(--tag-spacing-vertical) var(--tag-spacing-horizontal);
+  display: inline-flex;
+  padding: 0 var(--tag-spacing-horizontal);
   align-items: center;
   gap: var(--tag-spacing-gap-horizontal);
   border-radius: var(--tag-radius);
+  border: var(--border-weight) solid transparent;
+  box-sizing: border-box;
   flex-grow: 0;
   width: fit-content;
-  /* typography/body/p1-reg */
+  white-space: nowrap;
+  max-width: 100%;
+  height: var(--tag-height);
   font-style: normal;
-  line-height: 150%; /* 19.5px */
+  line-height: 150%;
 }
 .ds-tag--neutral {
   color: var(--tag-neutral-color-text);
@@ -2587,47 +2627,165 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   color: var(--tag-category-yellow-color-text);
   background: var(--tag-category-yellow-color-background);
 }
+.ds-tag--selected {
+  background: var(--tag-selected-color-background);
+  color: var(--tag-neutral-color-text);
+  border-color: var(--tag-selected-color-border);
+}
+
+.ds-tag__slot-start {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ds-tag__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-tag__slot-end {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ds-tag__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.ds-tag__remove:hover {
+  background-color: var(--color-grey-200);
+}
+.ds-tag__remove:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
 
-.ds-tag__dot {
+.ds-dot {
+  display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
+  flex-shrink: 0;
 }
-.ds-tag__dot--purple {
+.ds-dot--purple {
   background-color: var(--color-extended-colours-purple-500);
 }
-.ds-tag__dot--salmon {
+.ds-dot--salmon {
   background-color: var(--color-extended-colours-salmon-500);
 }
-.ds-tag__dot--teal {
+.ds-dot--teal {
   background-color: var(--color-extended-colours-teal-500);
 }
-.ds-tag__dot--yellow {
+.ds-dot--yellow {
   background-color: var(--color-extended-colours-yellow-500);
 }
-.ds-tag__dot--green {
+.ds-dot--green {
   background-color: var(--color-extended-colours-green-500);
 }
-.ds-tag__dot--orange {
+.ds-dot--orange {
   background-color: var(--color-extended-colours-orange-500);
 }
-.ds-tag__dot--blue {
+.ds-dot--blue {
   background-color: var(--color-extended-colours-blue-500);
 }
 
+.ds-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  --ds-badge-background: var(--color-grey-800);
+  --ds-badge-color: var(--color-mono-white);
+  --ds-badge-min-width: var(--badge-medium-size);
+  --ds-badge-height: var(--badge-medium-size);
+  --ds-badge-padding-inline: var(--badge-medium-spacing-horizontal);
+  --ds-badge-font-size: var(--badge-medium-font-size);
+  --ds-badge-font-weight: var(--badge-font-weight);
+  --ds-badge-line-height: 1;
+  --ds-badge-border-radius: var(--badge-medium-radius);
+  min-width: var(--ds-badge-min-width);
+  height: var(--ds-badge-height);
+  padding: 0 var(--ds-badge-padding-inline);
+  border-radius: var(--ds-badge-border-radius);
+  background: var(--ds-badge-background);
+  color: var(--ds-badge-color);
+  font-size: var(--ds-badge-font-size);
+  font-weight: var(--ds-badge-font-weight);
+  line-height: var(--ds-badge-line-height);
+}
+.ds-badge--size-sm {
+  --ds-badge-min-width: var(--badge-small-size);
+  --ds-badge-height: var(--badge-small-size);
+  --ds-badge-padding-inline: var(--badge-small-spacing-horizontal);
+  --ds-badge-font-size: var(--badge-small-font-size);
+  --ds-badge-border-radius: var(--badge-small-radius);
+}
+.ds-badge--size-md {
+  --ds-badge-min-width: var(--badge-medium-size);
+  --ds-badge-height: var(--badge-medium-size);
+  --ds-badge-padding-inline: var(--badge-medium-spacing-horizontal);
+  --ds-badge-font-size: var(--badge-medium-font-size);
+  --ds-badge-border-radius: var(--badge-medium-radius);
+}
+.ds-badge--size-lg {
+  --ds-badge-min-width: var(--badge-large-size);
+  --ds-badge-height: var(--badge-large-size);
+  --ds-badge-padding-inline: var(--badge-large-spacing-horizontal);
+  --ds-badge-font-size: var(--badge-large-font-size);
+  --ds-badge-border-radius: var(--badge-large-radius);
+}
+.ds-badge--purple {
+  --ds-badge-background: var(--color-extended-colours-purple-500);
+  --ds-badge-color: var(--color-extended-colours-purple-800);
+}
+.ds-badge--salmon {
+  --ds-badge-background: var(--color-extended-colours-salmon-500);
+  --ds-badge-color: var(--color-mono-white);
+}
+.ds-badge--teal {
+  --ds-badge-background: var(--color-extended-colours-teal-500);
+  --ds-badge-color: var(--color-extended-colours-teal-800);
+}
+.ds-badge--yellow {
+  --ds-badge-background: var(--color-extended-colours-yellow-500);
+  --ds-badge-color: var(--color-extended-colours-yellow-800);
+}
+.ds-badge--green {
+  --ds-badge-background: var(--color-extended-colours-green-500);
+  --ds-badge-color: var(--color-mono-white);
+}
+.ds-badge--orange {
+  --ds-badge-background: var(--color-extended-colours-orange-500);
+  --ds-badge-color: var(--color-extended-colours-orange-800);
+}
+.ds-badge--blue {
+  --ds-badge-background: var(--color-extended-colours-blue-500);
+  --ds-badge-color: var(--color-extended-colours-blue-800);
+}
+
 .ds-pill {
   display: flex;
-  padding: var(--tag-spacing-vertical) var(--tag-spacing-horizontal);
+  padding: var(--pill-spacing-vertical) var(--pill-spacing-horizontal);
   align-items: center;
-  gap: var(--tag-spacing-gap-horizontal);
-  border-radius: var(--tag-radius);
+  gap: var(--pill-spacing-gap-horizontal);
+  border-radius: var(--pill-radius);
   border: 1px solid var(--pill-single-filter-default-color-border);
   flex-grow: 0;
   width: fit-content;
   cursor: pointer;
-  /* typography/body/p1-reg */
   font-style: normal;
-  line-height: 150%; /* 19.5px */
+  line-height: 150%;
 }
 .ds-pill__inactive {
   background-color: var(--pill-single-filter-default-color-background);
@@ -3410,6 +3568,21 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   height: 60%;
 }
 
+.ds-single-user {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--single-user-spacing-gap);
+  padding-block: 0;
+  padding-inline: 0 var(--single-user-spacing-padding-inline-end);
+  border-radius: var(--single-user-radius);
+  border: var(--single-user-border-width) solid var(--single-user-color-border);
+  background-color: var(--single-user-color-background);
+  color: var(--single-user-color-text);
+  font-size: var(--single-user-font-size);
+  line-height: var(--line-height-tight);
+}
+
 .ds-avatar-group {
   display: flex;
   flex-direction: row;
@@ -3775,4 +3948,509 @@ h4.ds-heading, h4.ds-heading .ds-heading__inner-container, h4 .ds-editable-text_
   line-height: 1.5;
 }
 
+.ds-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--section-list-row-default-color-background);
+  padding: var(--section-list-row-spacing-vertical) var(--section-list-row-spacing-horizontal);
+  border-radius: var(--section-list-row-radius);
+}
+.ds-row .ds-row__icon-click {
+  flex-shrink: 0;
+  margin-left: var(--spacing-small);
+  stroke: var(--section-list-row-default-color-icon-arrow);
+}
+.ds-row .ds-row__icon-click.ds-icon-arrow-right {
+  display: none;
+}
+.ds-row--clickable {
+  cursor: pointer;
+}
+.ds-row--clickable:hover {
+  background-color: var(--section-list-row-hover-hover-bg);
+}
+.ds-row:focus {
+  box-shadow: 0 0 0 3px var(--color-brand-300);
+  outline: none;
+}
+.ds-row:hover .ds-row__icon-click {
+  stroke: var(--section-list-row-hover-color-icon-arrow);
+}
+.ds-row:hover .ds-row__icon-click.ds-icon-chevron-right {
+  display: none;
+}
+.ds-row:hover .ds-row__icon-click.ds-icon-arrow-right {
+  display: block;
+}
+.ds-row__label {
+  min-width: 190px;
+  font-weight: var(--font-weight-semi-bold);
+}
+.ds-row__value {
+  flex-grow: 1;
+}
+.ds-row__note {
+  font-style: italic;
+}
+
+.ds-combobox {
+  position: relative;
+  width: 100%;
+}
+
+.ds-combobox__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  min-height: var(--form-field-text-medium-height);
+  padding: var(--spacing-xsmall) var(--spacing-small);
+  border: var(--border-weight) solid var(--form-field-combobox-default-color-border);
+  border-radius: var(--form-field-radius);
+  background-color: var(--form-field-combobox-default-color-background);
+  color: var(--form-field-combobox-default-color-text);
+  cursor: text;
+  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
+  box-sizing: border-box;
+  font-style: normal;
+  line-height: 150%;
+}
+.ds-combobox__trigger:hover:not(.ds-combobox__trigger--disabled) {
+  border-color: var(--form-field-combobox-hover-color-border);
+  background-color: var(--form-field-combobox-hover-color-background);
+}
+.ds-combobox__trigger:focus-within:not(.ds-combobox__trigger--disabled) {
+  border-color: var(--form-field-combobox-focus-color-border);
+  background-color: var(--form-field-combobox-focus-color-background);
+  outline: var(--focus-border) solid var(--form-field-combobox-focus-color-border);
+}
+.ds-combobox__trigger--error {
+  border-color: var(--form-field-combobox-error-color-border);
+}
+.ds-combobox__trigger--error:focus-within {
+  border-color: var(--form-field-combobox-error-color-border);
+  box-shadow: 0 0 0 var(--focus-border) var(--form-field-combobox-error-color-border);
+}
+.ds-combobox__trigger--disabled {
+  background-color: var(--form-field-combobox-disabled-color-background);
+  border-color: var(--form-field-combobox-disabled-color-border);
+  color: var(--form-field-combobox-disabled-color-text);
+  cursor: not-allowed;
+}
+.ds-combobox__trigger--button {
+  cursor: pointer;
+}
+
+.ds-combobox__chips-and-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-combobox__button-content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-combobox__button-tags-viewport {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ds-combobox__button-tags-track {
+  display: inline-flex;
+  width: auto;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+}
+
+.ds-combobox__button-placeholder {
+  color: var(--form-field-combobox-placeholder-color-text);
+  white-space: nowrap;
+}
+
+.ds-combobox__button-ellipsis {
+  flex-shrink: 0;
+  font-size: var(--font-size-medium);
+  margin-left: var(--spacing-xsmall);
+}
+
+.ds-combobox__measure {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  left: -9999px;
+  top: -9999px;
+  white-space: nowrap;
+  width: max-content;
+  height: 0;
+  overflow: hidden;
+}
+
+.ds-combobox__input {
+  flex: 1;
+  min-width: 80px;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  padding: 0;
+  line-height: var(--line-height-default);
+}
+.ds-combobox__input::placeholder {
+  color: var(--form-field-combobox-placeholder-color-text);
+}
+.ds-combobox__trigger--disabled .ds-combobox__input {
+  cursor: not-allowed;
+}
+
+.ds-combobox__chevron {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+}
+.ds-combobox__trigger--disabled .ds-combobox__chevron {
+  cursor: not-allowed;
+}
+
+.ds-combobox__popover {
+  min-width: var(--radix-popper-anchor-width);
+}
+.ds-combobox__popover:focus {
+  outline: none;
+}
+
+.ds-combobox__listbox {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: min(var(--form-field-combobox-listbox-max-height), var(--radix-popper-available-height, 150px));
+  overflow-y: auto;
+}
+
+.ds-combobox__listbox-search-row {
+  list-style: none;
+  background: var(--form-dropdown-color-background);
+  margin-bottom: var(--spacing-small);
+}
+
+.ds-combobox__listbox-search-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  width: 100%;
+  border: var(--border-weight) solid var(--form-field-combobox-default-color-border);
+  border-radius: var(--border-radius-round);
+  padding: var(--spacing-xsmall) var(--spacing-small);
+  box-sizing: border-box;
+}
+
+.ds-combobox__input--in-listbox {
+  min-width: 0;
+  width: 100%;
+}
+
+.ds-combobox__loading-row {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(2 * var(--form-dropdown-form-drop-item-spacing-vertical) + 1.5em);
+  padding: var(--form-dropdown-form-drop-item-spacing-vertical) var(--form-dropdown-form-drop-item-spacing-horizontal);
+}
+
+.ds-combobox__loading-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--form-dropdown-form-drop-item-default-color-text);
+}
+
+.ds-combobox__loading-spinner {
+  display: inline-flex;
+  animation: ds-combobox-loader-spin 0.8s linear infinite;
+}
+
+@keyframes ds-combobox-loader-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.ds-combobox__option-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  list-style: none;
+}
+.ds-combobox__option-row > .ds-combobox__option {
+  display: flex;
+  align-items: center;
+  gap: var(--form-dropdown-form-drop-item-spacing-gap-horizontal);
+  padding: var(--form-dropdown-form-drop-item-spacing-vertical) var(--form-dropdown-form-drop-item-spacing-horizontal);
+  border-radius: var(--form-dropdown-form-drop-item-radius, 8px);
+  background: var(--form-dropdown-form-drop-item-default-color-background);
+  color: var(--form-dropdown-form-drop-item-default-color-text);
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+}
+.ds-combobox__option-row--highlighted > .ds-combobox__option {
+  background: var(--form-dropdown-form-drop-item-hover-color-background);
+  outline: none;
+}
+.ds-combobox__option-row--selected > .ds-combobox__option {
+  background: var(--form-dropdown-form-drop-item-active-color-background);
+  color: var(--form-dropdown-form-drop-item-active-color-text);
+}
+.ds-combobox__option-row--disabled > .ds-combobox__option {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.ds-combobox__option-row--selected.ds-combobox__option-row--highlighted > .ds-combobox__option {
+  background: var(--form-dropdown-form-drop-item-hover-color-background);
+  color: var(--form-dropdown-form-drop-item-default-color-text);
+}
+
+li.ds-combobox__option {
+  display: flex;
+  align-items: center;
+  gap: var(--form-dropdown-form-drop-item-spacing-gap-horizontal);
+  padding: var(--form-dropdown-form-drop-item-spacing-vertical) var(--form-dropdown-form-drop-item-spacing-horizontal);
+  border-radius: var(--form-dropdown-form-drop-item-radius, 8px);
+  background: var(--form-dropdown-form-drop-item-default-color-background);
+  color: var(--form-dropdown-form-drop-item-default-color-text);
+  cursor: pointer;
+  list-style: none;
+}
+li.ds-combobox__option--highlighted {
+  background: var(--form-dropdown-form-drop-item-hover-color-background);
+  outline: none;
+}
+li.ds-combobox__option--selected {
+  background: var(--form-dropdown-form-drop-item-active-color-background);
+  color: var(--form-dropdown-form-drop-item-active-color-text);
+}
+li.ds-combobox__option--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.ds-combobox__option--selected.ds-combobox__option--highlighted {
+  background: var(--form-dropdown-form-drop-item-hover-color-background);
+  color: var(--form-dropdown-form-drop-item-default-color-text);
+}
+
+.ds-combobox__option-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.ds-combobox__option-match {
+  background: var(--color-semantic-caution-100);
+  color: inherit;
+  font-weight: var(--font-weight-semi-bold);
+  padding: 0;
+}
+
+.ds-combobox__option-check {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+
+.ds-combobox__option-delete {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  padding: var(--spacing-xsmall);
+  cursor: pointer;
+  color: var(--form-dropdown-form-drop-item-default-color-text);
+  opacity: 0.75;
+  border-radius: var(--form-dropdown-form-drop-item-radius, 8px);
+  transition: opacity 0.15s;
+}
+
+.ds-combobox__option-delete:hover {
+  opacity: 1;
+  outline: none;
+}
+
+.ds-combobox__option-delete:focus-visible {
+  opacity: 1;
+  outline: var(--focus-border) solid var(--form-field-combobox-focus-color-border);
+}
+
+.ds-combobox__create-row {
+  font-style: italic;
+}
+
+.ds-combobox__group {
+  list-style: none;
+}
+
+.ds-combobox__group-header {
+  padding: var(--form-dropdown-form-drop-item-spacing-vertical) var(--form-dropdown-form-drop-item-spacing-horizontal);
+  font-weight: var(--font-weight-semi-bold);
+  font-size: var(--font-size-xs);
+  color: var(--search-list-color-header);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.ds-combobox__group-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ds-combobox__clear-all-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--spacing-xsmall);
+}
+
+.ds-combobox__clear-all {
+  border: none;
+  background: transparent;
+  color: var(--form-field-combobox-help-text-default-color-text);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  text-decoration: underline;
+  padding: 0;
+}
+.ds-combobox__clear-all:hover {
+  color: var(--form-field-combobox-help-text-hover-color-text);
+}
+.ds-combobox__clear-all:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.ds-toggle {
+  all: unset;
+  width: 40px;
+  height: 24px;
+  background-color: var(--toggle-off-default-color-background);
+  border-radius: var(--toggle-radius);
+  border: var(--toggle-weight-border) solid var(--toggle-off-default-color-border);
+  position: relative;
+  cursor: pointer;
+}
+.ds-toggle:focus {
+  background-color: var(--toggle-off-focus-color-background);
+  border-color: var(--toggle-off-focus-color-border);
+  outline: var(--focus-border) solid var(--color-brand-300);
+}
+.ds-toggle:hover {
+  background-color: var(--toggle-off-hover-color-background);
+  border-color: var(--toggle-off-hover-color-border);
+}
+.ds-toggle:active {
+  background-color: var(--toggle-off-active-color-background);
+  border-color: var(--toggle-off-active-color-border);
+}
+.ds-toggle:disabled {
+  background-color: var(--toggle-off-disabled-color-background);
+  border-color: var(--toggle-off-disabled-color-border);
+  cursor: default;
+}
+.ds-toggle:disabled:focus, .ds-toggle:disabled:hover, .ds-toggle:disabled:active {
+  background-color: var(--toggle-off-disabled-color-background);
+  border-color: var(--toggle-off-disabled-color-border);
+  outline: none;
+}
+.ds-toggle[data-state=checked] {
+  background-color: var(--toggle-on-default-color-background);
+  border-color: var(--toggle-on-default-color-border);
+}
+.ds-toggle[data-state=checked]:focus {
+  background-color: var(--toggle-on-focus-color-background);
+  border-color: var(--toggle-on-focus-color-border);
+}
+.ds-toggle[data-state=checked]:hover {
+  background-color: var(--toggle-on-hover-color-background);
+  border-color: var(--toggle-on-hover-color-border);
+}
+.ds-toggle[data-state=checked]:active {
+  background-color: var(--toggle-on-active-color-background);
+  border-color: var(--toggle-on-active-color-border);
+}
+.ds-toggle[data-state=checked]:disabled {
+  background-color: var(--toggle-on-disabled-color-background);
+  border-color: var(--toggle-on-disabled-color-border);
+  cursor: default;
+}
+.ds-toggle[data-state=checked]:disabled:focus, .ds-toggle[data-state=checked]:disabled:hover, .ds-toggle[data-state=checked]:disabled:active {
+  background-color: var(--toggle-on-disabled-color-background);
+  border-color: var(--toggle-on-disabled-color-border);
+  outline: none;
+}
+.ds-toggle__thumb {
+  display: block;
+  width: 18px;
+  height: 18px;
+  background-color: var(--toggle-off-default-color-dot);
+  border-radius: var(--border-radius-round);
+  transition: transform 0.1s;
+  transform: translateX(2px);
+  will-change: transform;
+}
+.ds-toggle__thumb:focus {
+  background-color: var(--toggle-off-focus-color-dot);
+}
+.ds-toggle__thumb:hover {
+  background-color: var(--toggle-off-hover-color-dot);
+}
+.ds-toggle__thumb:active {
+  background-color: var(--toggle-off-active-color-dot);
+}
+.ds-toggle__thumb[data-disabled] {
+  background-color: var(--toggle-off-disabled-color-dot);
+}
+.ds-toggle__thumb[data-disabled]:focus, .ds-toggle__thumb[data-disabled]:hover, .ds-toggle__thumb[data-disabled]:active {
+  background-color: var(--toggle-off-disabled-color-dot);
+}
+.ds-toggle__thumb[data-state=checked] {
+  transform: translateX(20px);
+  background-color: var(--toggle-on-default-color-dot);
+}
+.ds-toggle__thumb[data-state=checked]:focus {
+  background-color: var(--toggle-on-focus-color-dot);
+}
+.ds-toggle__thumb[data-state=checked]:hover {
+  background-color: var(--toggle-on-hover-color-dot);
+}
+.ds-toggle__thumb[data-state=checked]:active {
+  background-color: var(--toggle-on-active-color-dot);
+}
+.ds-toggle__thumb[data-state=checked][data-disabled] {
+  background-color: var(--toggle-on-disabled-color-dot);
+}
+.ds-toggle__thumb[data-state=checked][data-disabled]:focus, .ds-toggle__thumb[data-state=checked][data-disabled]:hover, .ds-toggle__thumb[data-state=checked][data-disabled]:active {
+  background-color: var(--toggle-on-disabled-color-dot);
+}
+
 /*# sourceMappingURL=index.css.map */