@arbor-education/design-system.components 0.3.6 → 0.4.1

package/dist/index.css

@@ -1380,7 +1380,13 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+}
+
+body *[class^=ds-], body *[class*=" ds-"] {
   font-family: var(--font-family-standard);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--font-weight-regular);
+  box-sizing: border-box;
 }
 
 .ds-button {
@@ -1390,7 +1396,6 @@
   justify-content: center;
   gap: var(--button-medium-spacing-gap-vertical);
   border-radius: var(--button-medium-radius);
-  font-family: var(--font-family-standard);
   font-weight: var(--font-weight-semi-bold);
   padding: var(--button-medium-spacing-vertical) var(--button-medium-spacing-horizontal);
   border: none;
@@ -1398,7 +1403,6 @@
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   position: relative;
   text-decoration: none;
-  font-size: var(--font-size-2-13);
 }
 .ds-button--no-horizontal-padding {
   padding: var(--button-medium-spacing-vertical) 0;
@@ -1469,10 +1473,7 @@
 .ds-button--dropdown {
   color: var(--color-grey-900, #2F2F2F);
   /* typography/body/p1-regular */
-  font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size, 13px);
   font-style: normal;
-  font-weight: var(--type-body-p-weight, 400);
   line-height: 150%; /* 19.5px */
   display: flex;
   padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-medium);
@@ -1697,9 +1698,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 .ds-card__content .ds-card__text .ds-card__paragraph {
   margin: 0;
-  font-family: var(--type-body-p-family);
-  font-size: var(--type-body-p-size);
-  font-weight: var(--type-body-p-weight);
 }
 
 .ds-dropdown__content {
@@ -1709,11 +1707,11 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   background-color: var(--form-dropdown-color-background);
   min-width: 200px;
   border: 1px solid var(--color-grey-200);
-  font-family: var(--type-body-p-family);
-  font-size: var(--type-body-p-size);
   font-style: normal;
-  font-weight: var(--type-body-p-weight);
   line-height: 150%;
+  max-height: 300px;
+  max-height: var(--radix-popper-available-height);
+  overflow-y: auto;
 }
 
 .ds-dropdown__item {
@@ -1747,8 +1745,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 
 .ds-form-field {
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
   line-height: 150%;
   width: 100%;
   box-sizing: border-box;
@@ -1801,8 +1797,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 
 .ds-fieldset__legend {
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
   font-weight: var(--type-body-bold-weight);
   color: var(--form-field-label-color-text);
   line-height: 150%;
@@ -1812,9 +1806,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 
 .ds-input {
   width: 100%;
-  font-size: var(--type-body-p-size);
-  font-family: var(--font-family-standard);
-  font-weight: var(--font-weight-regular);
   border: var(--border-weight) solid var(--form-field-text-default-color-border);
   border-radius: var(--form-field-radius);
   color: var(--form-field-text-default-color-text);
@@ -1870,8 +1861,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 
 .ds-label {
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
   font-weight: var(--type-body-bold-weight);
   color: var(--form-field-label-color-text);
   line-height: 150%;
@@ -1960,8 +1949,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 .ds-radio-button-input__container .ds-radio-button-input__text {
   flex: 1 0 0;
-  font-size: var(--type-body-p-size);
-  font-weight: var(--type-body-p-weight);
   color: var(--checkbox-default-color-text);
   line-height: var(--line-height-default);
   user-select: none;
@@ -2063,8 +2050,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 .ds-checkbox-input__container .ds-checkbox-label__text {
   flex: 1 0 0;
-  font-size: var(--type-body-p-size);
-  font-weight: var(--type-body-p-weight);
   color: var(--checkbox-default-color-text);
   line-height: var(--line-height-default);
 }
@@ -2122,7 +2107,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 .ds-select-dropdown__items--header {
   margin: 0;
   color: var(--form-dropdown-form-drop-item-title-color-text);
-  font-size: var(--font-size-2-13);
   padding: var(--spacing-xsmall) var(--spacing-small) var(--spacing-medium) var(--spacing-small);
   border-bottom: var(--border-weight) solid var(--page-base-color-border);
 }
@@ -2146,10 +2130,7 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   flex-grow: 0;
   width: fit-content;
   /* typography/body/p1-reg */
-  font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size);
   font-style: normal;
-  font-weight: var(--type-body-p-weight);
   line-height: 150%; /* 19.5px */
 }
 .ds-tag--neutral {
@@ -2223,10 +2204,7 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   width: fit-content;
   cursor: pointer;
   /* typography/body/p1-reg */
-  font-family: var(--type-body-p-family, Inter);
-  font-size: var(--type-body-p-size);
   font-style: normal;
-  font-weight: var(--type-body-p-weight);
   line-height: 150%; /* 19.5px */
 }
 .ds-pill__inactive {
@@ -2302,7 +2280,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   list-style: none;
   padding: 0;
   margin: 0;
-  font-family: var(--type-body-p-family);
   align-items: center;
   justify-content: flex-start;
   gap: var(--tabs-spacing-horizontal-gap);
@@ -2319,7 +2296,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 .ds-tabs-item__tab {
   min-width: var(--size-control-xlarge);
   position: relative;
-  font-family: var(--type-body-p-family);
   padding: var(--tabs-tab-item-spacing-vertical) var(--tabs-tab-item-spacing-horizontal);
   cursor: pointer;
   display: flex;
@@ -2536,9 +2512,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
 }
 .ds-search-bar--inactive__placeholder {
   color: var(--search-global-default-color-text);
-  font-family: var(--type-body-p-family);
-  font-size: var(--type-body-p-size);
-  font-weight: var(--type-body-p-weight);
 }
 .ds-search-bar--inactive-icon-only {
   padding: var(--search-global-spacing-vertical);
@@ -2571,18 +2544,11 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   width: 39px;
 }
 
-.ds-table__pagination-controls, .ds-table__row-count-info {
-  font-size: var(--font-size-2-13);
-}
-
 .ds-tooltip__content {
   color: var(--tooltip-color-text);
   background: var(--tooltip-color-background);
   padding: var(--tooltip-spacing-vertical) var(--tooltip-spacing-horizontal);
   border-radius: var(--border-radius-small);
-  font-size: var(--type-body-p-size);
-  font-family: var(--type-body-p-family);
-  font-weight: var(--type-body-p-weight);
 }
 .ds-tooltip__content-arrow {
   fill: var(--tooltip-color-background);
@@ -2618,9 +2584,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   max-width: calc(100vw - var(--spacing-medium));
   max-height: calc(100vh - var(--spacing-medium));
   min-width: var(--modal-min-width);
-  font-family: var(--type-body-p-family);
-  font-size: var(--type-body-p-size);
-  font-weight: var(--type-body-p-weight);
   line-height: var(--type-body-line-height);
   color: var(--type-body-p-color);
 }
@@ -2708,9 +2671,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   border: var(--border-weight) solid var(--color-grey-200);
   border-radius: var(--border-radius-small);
   color: var(--color-grey-900);
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
-  font-weight: var(--font-weight-regular);
   padding: 0 var(--spacing-small);
   justify-content: space-between;
 }
@@ -2724,9 +2684,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   border: var(--border-weight) solid var(--color-grey-200);
   border-radius: var(--border-radius-small);
   color: var(--color-grey-900);
-  font-family: var(--font-family-standard);
-  font-size: var(--font-size-2-13);
-  font-weight: var(--font-weight-regular);
   box-sizing: border-box;
 }
 .ds-column-filter-time__input::-webkit-calendar-picker-indicator {
@@ -2734,6 +2691,63 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   cursor: pointer;
 }
 
+.ds-banner {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: var(--banner-spacing-gap);
+  padding: var(--banner-spacing-vertical) var(--banner-spacing-horizontal);
+  border-radius: var(--banner-radius);
+  border-width: 1px;
+  border-style: solid;
+}
+.ds-banner__central-container {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-small);
+}
+.ds-banner__title {
+  margin: 0;
+}
+.ds-banner__button {
+  color: inherit;
+  align-self: flex-end;
+  text-wrap: nowrap;
+}
+.ds-banner--info {
+  border-color: var(--banner-info-color-border);
+  background-color: var(--banner-info-color-background);
+  color: var(--banner-info-color-text);
+}
+.ds-banner--info svg {
+  stroke: var(--banner-info-color-icon);
+}
+.ds-banner--neutral {
+  border-color: var(--banner-neutral-color-border);
+  background-color: var(--banner-neutral-color-background);
+  color: var(--banner-neutral-color-text);
+}
+.ds-banner--neutral svg {
+  stroke: var(--banner-neutral-color-icon);
+}
+.ds-banner--warning {
+  border-color: var(--banner-warning-color-border);
+  background-color: var(--banner-warning-color-background);
+  color: var(--banner-warning-color-text);
+}
+.ds-banner--warning svg {
+  stroke: var(--banner-warning-color-icon);
+}
+.ds-banner--destructive {
+  border-color: var(--banner-destructive-color-border);
+  background-color: var(--banner-destructive-color-background);
+  color: var(--banner-destructive-color-text);
+}
+.ds-banner--destructive svg {
+  stroke: var(--banner-destructive-color-icon);
+}
+
 .ds-editable-text {
   width: 100%;
   box-sizing: border-box;
@@ -2816,7 +2830,6 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   border-radius: var(--toast-radius);
   box-shadow: var(--shadow-small);
   font-family: var(--type-body-bold-family);
-  font-size: var(--type-body-p-size);
   font-style: normal;
   font-weight: var(--type-body-bold-weight);
   line-height: var(--line-height-default);
@@ -2867,4 +2880,401 @@ h4.ds-heading, h4 .ds-editable-text__button, h4 .ds-editable-text__input {
   background: var(--toast-warning-icon-hover-color-background);
 }
 
+.ds-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+}
+.ds-avatar--small {
+  width: var(--avatar-small-size);
+  height: var(--avatar-small-size);
+  border-radius: var(--avatar-small-radius);
+  border: 1px solid var(--avatar-small-color-border);
+  background-color: var(--avatar-small-color-background);
+}
+.ds-avatar--medium {
+  width: var(--avatar-medium-size);
+  height: var(--avatar-medium-size);
+  border-radius: var(--avatar-medium-radius);
+  border: 1px solid var(--avatar-medium-color-border);
+  background-color: var(--avatar-medium-color-background);
+}
+.ds-avatar--large {
+  width: var(--avatar-large-size);
+  height: var(--avatar-large-size);
+  border-radius: var(--avatar-large-radius);
+  border: 1px solid var(--avatar-large-color-border);
+  background-color: var(--avatar-large-color-background);
+}
+.ds-avatar--extra-large {
+  width: var(--avatar-extra-large-size);
+  height: var(--avatar-extra-large-size);
+  border-radius: var(--avatar-extra-large-radius);
+  border: 1px solid var(--avatar-extra-large-color-border);
+  background-color: var(--avatar-extra-large-color-background);
+}
+.ds-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+.ds-avatar__initials {
+  font-family: var(--type-body-bold-family);
+  font-weight: var(--type-body-bold-weight);
+  font-size: var(--type-body-bold-size);
+  color: var(--avatar-medium-color-text);
+  line-height: 1;
+  text-align: center;
+}
+.ds-avatar__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--color-grey-400);
+}
+.ds-avatar__placeholder-icon {
+  width: 60%;
+  height: 60%;
+}
+
+.ds-user-dropdown__trigger-divider {
+  width: 1px;
+  height: 24px;
+}
+
+.ds-user-dropdown__trigger-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xsmall);
+  padding: var(--spacing-xsmall);
+  border: 1px solid;
+  border-radius: var(--border-radius-round);
+}
+.ds-user-dropdown__trigger-container--with-logo {
+  padding-right: var(--spacing-medium);
+}
+.ds-user-dropdown__trigger-container--dark {
+  background-color: var(--color-grey-900);
+  border-color: var(--color-grey-700);
+}
+.ds-user-dropdown__trigger-container--dark .ds-avatar {
+  border-color: var(--color-grey-700);
+}
+.ds-user-dropdown__trigger-container--dark .ds-user-dropdown__trigger-divider {
+  background-color: var(--color-grey-700);
+}
+.ds-user-dropdown__trigger-container--dark .ds-user-dropdown__trigger:hover,
+.ds-user-dropdown__trigger-container--dark .ds-user-dropdown__trigger:focus-visible,
+.ds-user-dropdown__trigger-container--dark .ds-user-dropdown__trigger[data-state=open] {
+  background-color: var(--color-grey-800);
+}
+.ds-user-dropdown__trigger-container--dark .ds-icon {
+  color: var(--color-mono-white);
+}
+.ds-user-dropdown__trigger-container--light {
+  background-color: var(--color-mono-white);
+  border-color: var(--color-grey-100);
+}
+.ds-user-dropdown__trigger-container--light .ds-avatar {
+  border-color: var(--color-grey-100);
+}
+.ds-user-dropdown__trigger-container--light .ds-user-dropdown__trigger-divider {
+  background-color: var(--color-grey-100);
+}
+.ds-user-dropdown__trigger-container--light .ds-user-dropdown__trigger:hover,
+.ds-user-dropdown__trigger-container--light .ds-user-dropdown__trigger:focus-visible,
+.ds-user-dropdown__trigger-container--light .ds-user-dropdown__trigger[data-state=open] {
+  background-color: var(--color-grey-050);
+}
+.ds-user-dropdown__trigger-container--light .ds-icon {
+  color: var(--color-grey-700);
+}
+
+.ds-user-dropdown__trigger-container .ds-button.ds-user-dropdown__trigger {
+  background-color: transparent;
+  border-radius: var(--border-radius-round);
+  padding-right: var(--spacing-xsmall);
+  padding-left: 0;
+  border: none;
+}
+.ds-user-dropdown__trigger-container .ds-button.ds-user-dropdown__trigger:focus-visible, .ds-user-dropdown__trigger-container .ds-button.ds-user-dropdown__trigger[data-state=open] {
+  outline: var(--focus-border) solid var(--color-brand-500);
+  outline-offset: 0;
+  border: none;
+}
+
+.ds-user-dropdown__trigger-logo {
+  max-height: 32px;
+  max-width: 54px;
+  height: auto;
+  width: auto;
+  border-radius: var(--border-radius-small);
+}
+
+.ds-user-dropdown__content {
+  width: 304px;
+  padding: var(--spacing-large);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-small);
+}
+
+.ds-user-dropdown__user-info {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.ds-user-dropdown__user-info:hover, .ds-user-dropdown__user-info[data-highlighted] {
+  background-color: var(--color-grey-050);
+  outline: none;
+}
+.ds-user-dropdown__user-info:focus-visible:not(:hover) {
+  outline: var(--focus-border) solid var(--color-brand-500);
+  outline-offset: -2px;
+}
+
+.ds-user-dropdown__user-info-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ds-user-dropdown__user-info-name {
+  font-family: var(--type-body-bold-family);
+  font-size: var(--type-body-bold-size);
+  font-weight: var(--type-body-bold-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-dropdown__user-info-role {
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-dropdown__user-info-chevron {
+  color: var(--color-grey-700);
+  flex-shrink: 0;
+}
+
+.ds-user-dropdown__sub-content {
+  min-width: 180px;
+  padding: var(--spacing-small);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background-color: var(--color-mono-white);
+  border: 1px solid var(--color-grey-200);
+  border-radius: var(--border-radius-small);
+  box-shadow: 0 4px 12px 0 rgba(32, 32, 32, 0.08);
+}
+
+.ds-user-dropdown__sub-item {
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+  cursor: pointer;
+}
+.ds-user-dropdown__sub-item:hover, .ds-user-dropdown__sub-item[data-highlighted] {
+  background-color: var(--color-grey-050);
+  outline: none;
+}
+.ds-user-dropdown__sub-item:focus-visible:not(:hover) {
+  outline: var(--focus-border) solid var(--color-brand-500);
+  outline-offset: -2px;
+}
+
+.ds-user-dropdown__divider {
+  height: 1px;
+  flex-shrink: 0;
+  background-color: var(--color-grey-200);
+}
+
+.ds-user-dropdown__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.ds-user-dropdown__section-label {
+  padding: var(--spacing-small);
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+}
+
+.ds-user-dropdown__app-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.ds-user-dropdown__app-item:hover, .ds-user-dropdown__app-item[data-highlighted] {
+  background-color: var(--color-grey-050);
+}
+.ds-user-dropdown__app-item:focus-visible:not(:hover) {
+  outline: var(--focus-border) solid var(--color-brand-500);
+  outline-offset: -2px;
+}
+
+.ds-user-dropdown__app-item-logo {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--border-radius-xsmall);
+}
+.ds-user-dropdown__app-item-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.ds-user-dropdown__app-item-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ds-user-dropdown__app-item-arrow {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--spacing-xsmall);
+  border-radius: 99px;
+  background-color: var(--color-brand-050);
+  color: var(--color-brand-500);
+}
+.ds-user-dropdown__collapsible-section-content .ds-user-dropdown__app-item:hover .ds-user-dropdown__app-item-arrow, .ds-user-dropdown__collapsible-section-content .ds-user-dropdown__app-item[data-highlighted] .ds-user-dropdown__app-item-arrow {
+  display: flex;
+}
+
+.ds-user-dropdown__app-item-name {
+  font-family: var(--type-body-bold-family);
+  font-size: var(--type-body-bold-size);
+  font-weight: var(--type-body-bold-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-dropdown__app-item-description {
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-user-dropdown__collapsible-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.ds-user-dropdown__collapsible-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.ds-user-dropdown__collapsible-section-header:hover {
+  background-color: var(--color-grey-050);
+}
+.ds-user-dropdown__collapsible-section-header:focus-visible:not(:hover) {
+  outline: var(--focus-border) solid var(--color-brand-500);
+  outline-offset: -2px;
+}
+
+.ds-user-dropdown__collapsible-section-label {
+  flex: 1;
+  font-family: var(--type-body-p-family);
+  font-size: var(--type-body-p-size);
+  font-weight: var(--type-body-p-weight);
+  color: var(--color-grey-700);
+  line-height: 1.5;
+}
+
+.ds-user-dropdown__collapsible-section-icon {
+  color: var(--color-grey-700);
+  flex-shrink: 0;
+}
+
+.ds-user-dropdown__collapsible-section-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.ds-user-dropdown__sign-out {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.ds-user-dropdown__sign-out:hover, .ds-user-dropdown__sign-out[data-highlighted] {
+  background-color: var(--color-grey-050);
+}
+.ds-user-dropdown__sign-out:focus-visible:not(:hover) {
+  outline: var(--focus-border) solid var(--color-brand-500);
+  outline-offset: -2px;
+}
+
+.ds-user-dropdown__sign-out-label {
+  font-family: var(--type-body-bold-family);
+  font-size: var(--type-body-bold-size);
+  font-weight: var(--type-body-bold-weight);
+  color: var(--color-grey-900);
+  line-height: 1.5;
+}
+
 /*# sourceMappingURL=index.css.map */