@dialpad/dialtone 9.71.0 → 9.72.1

package/dist/css/dialtone.css

@@ -1248,11 +1248,9 @@ template {
   --button-color-background: var(--dt-action-color-background-base-default);
   --button-color-border: transparent;
   --button-gap: calc(var(--button-padding-x) / 2);
-  --button-border-radius: var(--dt-size-400);
-  --button-border-width: var(--dt-size-100);
-  --button-font-size: var(--dt-font-size-200);
-  --button-font-weight: var(--dt-font-weight-medium);
-  --button-line-height: var(--dt-font-line-height-200);
+  --button-border-radius: var(--dt-button-size-radius-md);
+  --button-border-width: var(--dt-size-border-100);
+  --button-typography: var(--dt-typography-button-md);
   --button-padding-y-xs: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--button-border-width));
   --button-padding-x-xs: calc(var(--dt-space-400) - var(--button-border-width));
   --button-padding-y-sm: calc(var(--dt-space-400) - var(--button-border-width));
@@ -1273,10 +1271,7 @@ template {
   box-sizing: border-box;
   padding: var(--button-padding-y) var(--button-padding-x);
   color: var(--button-color-text);
-  font-weight: var(--button-font-weight);
-  font-size: var(--button-font-size);
-  font-family: inherit;
-  line-height: var(--button-line-height);
+  font: var(--button-typography);
   text-transform: inherit;
   text-decoration: none;
   vertical-align: middle;
@@ -1285,10 +1280,9 @@ template {
   border-style: solid;
   border-width: var(--button-border-width);
   border-radius: var(--button-border-radius);
-  box-shadow: var(--button--bs);
   cursor: pointer;
   transition-timing-function: var(--ttf-out-quint);
-  transition-duration: var(--td200);
+  transition-duration: var(--td100);
   transition-property: background-color, border, box-shadow;
   -webkit-user-select: none;
       -ms-user-select: none;
@@ -1323,28 +1317,28 @@ template {
   transition: none;
 }
 .d-btn--xs {
+  --button-typography: var(--dt-typography-button-xs);
   --button-padding-y: var(--button-padding-y-xs);
   --button-padding-x: var(--button-padding-x-xs);
-  --button-font-size: var(--dt-font-size-100);
-  --button-border-radius: var(--dt-size-300);
+  --button-border-radius: var(--dt-button-size-radius-xs);
 }
 .d-btn--sm {
+  --button-typography: var(--dt-typography-button-sm);
   --button-padding-y: var(--button-padding-y-sm);
   --button-padding-x: var(--button-padding-x-sm);
-  --button-font-size: var(--dt-font-size-100);
+  --button-border-radius: var(--dt-button-size-radius-sm);
 }
 .d-btn--lg {
+  --button-typography: var(--dt-typography-button-lg);
   --button-padding-y: var(--button-padding-y-lg);
   --button-padding-x: var(--button-padding-x-lg);
-  --button-font-size: var(--dt-font-size-300);
-  --button-border-radius: var(--dt-size-450);
+  --button-border-radius: var(--dt-button-size-radius-lg);
 }
 .d-btn--xl {
+  --button-typography: var(--dt-typography-button-xl);
   --button-padding-y: var(--button-padding-y-xl);
   --button-padding-x: var(--button-padding-x-xl);
-  --button-font-size: var(--dt-font-size-400);
-  --button-font-weight: var(--dt-font-weight-normal);
-  --button-border-radius: var(--dt-size-500);
+  --button-border-radius: var(--dt-button-size-radius-xl);
 }
 .d-btn__label {
   display: inline-flex;
@@ -1795,11 +1789,9 @@ template {
   --button-color-background: var(--dt-action-color-background-base-default);
   --button-color-border: transparent;
   --button-gap: calc(var(--button-padding-x) / 2);
-  --button-border-radius: var(--dt-size-400);
-  --button-border-width: var(--dt-size-100);
-  --button-font-size: var(--dt-font-size-200);
-  --button-font-weight: var(--dt-font-weight-medium);
-  --button-line-height: var(--dt-font-line-height-200);
+  --button-border-radius: var(--dt-button-size-radius-md);
+  --button-border-width: var(--dt-size-border-100);
+  --button-typography: var(--dt-typography-button-md);
   --button-padding-y-xs: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--button-border-width));
   --button-padding-x-xs: calc(var(--dt-space-400) - var(--button-border-width));
   --button-padding-y-sm: calc(var(--dt-space-400) - var(--button-border-width));
@@ -1819,10 +1811,7 @@ template {
   box-sizing: border-box;
   padding: var(--button-padding-y) var(--button-padding-x);
   color: var(--button-color-text);
-  font-weight: var(--button-font-weight);
-  font-size: var(--button-font-size);
-  font-family: inherit;
-  line-height: var(--button-line-height);
+  font: var(--button-typography);
   text-transform: inherit;
   text-decoration: none;
   vertical-align: middle;
@@ -1831,10 +1820,9 @@ template {
   border-style: solid;
   border-width: var(--button-border-width);
   border-radius: var(--button-border-radius);
-  box-shadow: var(--button--bs);
   cursor: pointer;
   transition-timing-function: var(--ttf-out-quint);
-  transition-duration: var(--td200);
+  transition-duration: var(--td100);
   transition-property: background-color, border, box-shadow;
   -webkit-user-select: none;
       -ms-user-select: none;
@@ -2075,199 +2063,6 @@ template {
   color: var(--dt-color-foreground-muted);
   background-color: var(--dt-color-neutral-transparent);
 }
-.d-emoji {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-}
-.d-emoji .d-icon {
-  position: absolute;
-  top: 50%;
-  display: block;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-}
-.d-emoji-text-wrapper .d-emoji {
-  height: 1em;
-}
-.d-emoji-text-wrapper .d-emoji .d-icon {
-  top: calc(50% - 1px);
-}
-.d-emoji-picker {
-  flex-direction: column;
-  width: calc(var(--dt-size-925) + var(--dt-size-600) + var(--dt-size-400));
-  height: 100%;
-  background-color: var(--dt-color-surface-primary);
-  border-radius: var(--dt-size-300);
-}
-.d-emoji-picker--header {
-  position: relative;
-  padding: var(--dt-space-300) var(--dt-space-300) 0 var(--dt-space-400);
-}
-.d-emoji-picker--header::after {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: var(--dt-size-100);
-  background-color: var(--dt-color-surface-moderate) !important;
-  content: '';
-}
-.d-emoji-picker__alignment {
-  box-sizing: content-box !important;
-  width: auto;
-  max-width: calc(var(--dt-size-925) + var(--dt-size-400));
-  margin: 0 var(--dt-space-500);
-}
-.d-emoji-picker--footer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: calc(var(--dt-size-650) + var(--dt-size-400) + var(--dt-size-200));
-  padding: 0 var(--dt-space-500);
-  background: var(--dt-color-surface-secondary);
-  border-top: var(--dt-size-100) solid var(--dt-color-border-subtle);
-}
-.d-emoji-picker__tabset-list {
-  gap: var(--dt-space-300);
-}
-.d-emoji-picker__tabset-list::after {
-  background-color: var(--dt-color-surface-moderate) !important;
-}
-.d-emoji-picker__tabset-list button {
-  padding: var(--dt-space-400);
-}
-.d-emoji-picker__tabset-list button.d-tab--selected::after {
-  height: var(--dt-size-200);
-}
-.d-emoji-picker__skin-list {
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--dt-space-300);
-  align-items: flex-start;
-  padding: var(--dt-space-300);
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: calc(var(--dt-size-600) + var(--dt-size-400));
-}
-.d-emoji-picker__skin-list button {
-  width: var(--dt-size-600);
-  height: var(--dt-size-600);
-  margin: 0;
-  padding: 0;
-  background: none;
-  border: none;
-  border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
-  outline: none;
-  cursor: pointer;
-}
-.d-emoji-picker__skin-list button:hover {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
-}
-.d-emoji-picker__skin-list button.selected {
-  border: var(--dt-size-100) solid rgba(0, 0, 0, 0.25);
-  border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
-}
-.d-emoji-picker__skin-selected button {
-  display: inline-block;
-  width: var(--dt-size-625);
-  height: var(--dt-size-625);
-  margin: 0;
-  padding: calc(var(--dt-space-350) + var(--dt-space-100));
-  background: rgba(0, 0, 0, 0.1);
-  border: none;
-  border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
-  outline: none;
-  cursor: pointer;
-}
-.d-emoji-picker__skin-selected button:hover {
-  background: var(--dt-color-surface-bold);
-}
-.d-emoji-picker__selector {
-  min-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
-}
-.d-emoji-picker__selector p {
-  margin-bottom: var(--dt-space-300);
-  font-weight: 700;
-  font-size: var(--dt-size-450);
-  letter-spacing: -0.01em;
-}
-.d-emoji-picker__category {
-  position: sticky;
-  top: 0;
-  width: 100%;
-  margin: 0;
-  padding: var(--dt-space-525) var(--dt-space-500) 0 var(--dt-space-500);
-  background: var(--dt-color-surface-primary);
-}
-.d-emoji-picker__list {
-  position: relative;
-  height: 100%;
-  max-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
-  padding-bottom: calc(var(--dt-space-300) + var(--dt-space-100));
-  overflow: hidden auto;
-}
-.d-emoji-picker__list div:not(:first-child) p {
-  margin-top: calc(var(--dt-space-525) + var(--dt-space-200));
-}
-.d-emoji-picker__search-label {
-  margin-top: calc(var(--dt-space-525));
-}
-.d-emoji-picker__tab {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--dt-space-200);
-  width: calc(100% + calc(var(--dt-size-500) - var(--dt-size-100)));
-  max-width: calc(var(--dt-size-925) + var(--dt-size-400));
-  margin-left: var(--dt-space-350-negative);
-}
-.d-emoji-picker__tab button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(var(--dt-size-600) + var(--dt-size-300));
-  height: calc(var(--dt-size-600) + var(--dt-size-300));
-  margin: 0;
-  padding: 0;
-  background: none;
-  border: none;
-  border-radius: 50%;
-  outline: none;
-  cursor: pointer;
-}
-.d-emoji-picker__tab button:hover,
-.d-emoji-picker__tab button:active {
-  background: rgba(0, 0, 0, 0.1);
-}
-.d-emoji-picker__tab button.hover-emoji {
-  background: rgba(0, 0, 0, 0.1);
-}
-.d-emoji-picker__tab button:focus {
-  box-shadow: var(--dt-shadow-focus);
-}
-.d-emoji-picker__search {
-  position: relative;
-  z-index: 1;
-  margin: var(--dt-space-500) var(--dt-space-550) 0 var(--dt-space-500);
-  background-color: var(--dt-color-surface-primary);
-}
-.d-emoji-picker__search-button {
-  margin: 0;
-  padding: 0;
-  line-height: 0;
-  background: none;
-  border: none;
-  outline: none;
-  cursor: pointer;
-}
-.d-emoji-picker__data {
-  display: flex;
-  gap: var(--dt-space-400);
-  align-items: center;
-  width: 100%;
-  max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
-}
 .d-empty-state {
   display: flex;
   flex-direction: column;
@@ -2311,7 +2106,8 @@ fieldset {
   padding: 0;
   border: none;
 }
-.d-label {
+.d-label,
+.d-label--md {
   display: flex;
   flex: 1 0%;
   align-items: baseline;
@@ -2319,14 +2115,12 @@ fieldset {
   box-sizing: border-box;
   margin-bottom: var(--dt-space-300);
   color: var(--dt-color-foreground-secondary);
-  font-weight: var(--dt-font-weight-semi-bold);
-  font-size: var(--dt-font-size-200);
-  font-family: inherit;
-  line-height: var(--dt-font-line-height-300);
+  font: var(--dt-typography-label-md);
   word-break: break-word;
   overflow-wrap: break-word;
 }
-legend .d-label {
+legend .d-label,
+legend .d-label--md {
   cursor: default;
 }
 .d-label--xs {
@@ -2434,12 +2228,11 @@ legend .d-label {
   --input-color-background: var(--dt-inputs-color-background-default);
   --input-color-background-disabled: var(--dt-inputs-color-background-disabled);
   --input-color-text: var(--dt-inputs-color-foreground-default);
-  --input-border-width: calc(var(--dt-size-100) + var(--dt-size-50));
-  --input-border-radius: var(--dt-size-400);
+  --input-border-width: var(--dt-size-border-150);
+  --input-border-radius: var(--dt-inputs-size-radius-md);
   --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
   --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-200);
-  --input-line-height: var(--dt-font-line-height-200);
+  --input-typography: var(--dt-typography-inputs-md);
   position: relative;
   display: inline-flex;
   flex: 1 0%;
@@ -2448,21 +2241,93 @@ legend .d-label {
   min-width: 0;
   padding: var(--input-padding-y) var(--input-padding-x);
   color: var(--input-color-text);
-  font-weight: inherit;
-  font-size: var(--input-font-size);
-  font-family: inherit;
-  line-height: var(--input-line-height);
+  font: var(--input-typography);
   background-color: var(--input-color-background);
   border: var(--input-border-width) solid var(--input-color-border);
   border-radius: var(--input-border-radius);
   outline: none;
   box-shadow: none;
-  transition-timing-function: var(--ttf-in-out);
-  transition-duration: var(--td100);
-  transition-property: box-shadow, background-color;
   -webkit-appearance: none;
           appearance: none;
-  caret-color: var(--input-color-text);
+  caret-color: fieldtext;
+}
+.d-input:has(.d-textarea),
+.d-input--md:has(.d-textarea),
+.d-textarea:has(.d-textarea),
+.d-textarea--md:has(.d-textarea),
+.d-input__wrapper--md:has(.d-textarea),
+.d-input__wrapper:has(.d-textarea) {
+  border-end-end-radius: var(--dt-inputs-size-radius-xs);
+}
+.d-input:has(.d-input--xs),
+.d-input--md:has(.d-input--xs),
+.d-textarea:has(.d-input--xs),
+.d-textarea--md:has(.d-input--xs),
+.d-input__wrapper--md:has(.d-input--xs),
+.d-input__wrapper:has(.d-input--xs),
+.d-input:has(.d-textarea--xs),
+.d-input--md:has(.d-textarea--xs),
+.d-textarea:has(.d-textarea--xs),
+.d-textarea--md:has(.d-textarea--xs),
+.d-input__wrapper--md:has(.d-textarea--xs),
+.d-input__wrapper:has(.d-textarea--xs) {
+  --input-border-radius: var(--dt-inputs-size-radius-xs);
+}
+.d-input:has(.d-input--sm),
+.d-input--md:has(.d-input--sm),
+.d-textarea:has(.d-input--sm),
+.d-textarea--md:has(.d-input--sm),
+.d-input__wrapper--md:has(.d-input--sm),
+.d-input__wrapper:has(.d-input--sm),
+.d-input:has(.d-textarea--sm),
+.d-input--md:has(.d-textarea--sm),
+.d-textarea:has(.d-textarea--sm),
+.d-textarea--md:has(.d-textarea--sm),
+.d-input__wrapper--md:has(.d-textarea--sm),
+.d-input__wrapper:has(.d-textarea--sm) {
+  --input-border-radius: var(--dt-inputs-size-radius-sm);
+}
+.d-input:has(.d-input--md),
+.d-input--md:has(.d-input--md),
+.d-textarea:has(.d-input--md),
+.d-textarea--md:has(.d-input--md),
+.d-input__wrapper--md:has(.d-input--md),
+.d-input__wrapper:has(.d-input--md),
+.d-input:has(.d-textarea--md),
+.d-input--md:has(.d-textarea--md),
+.d-textarea:has(.d-textarea--md),
+.d-textarea--md:has(.d-textarea--md),
+.d-input__wrapper--md:has(.d-textarea--md),
+.d-input__wrapper:has(.d-textarea--md) {
+  --input-border-radius: var(--dt-inputs-size-radius-md);
+}
+.d-input:has(.d-input--lg),
+.d-input--md:has(.d-input--lg),
+.d-textarea:has(.d-input--lg),
+.d-textarea--md:has(.d-input--lg),
+.d-input__wrapper--md:has(.d-input--lg),
+.d-input__wrapper:has(.d-input--lg),
+.d-input:has(.d-textarea--lg),
+.d-input--md:has(.d-textarea--lg),
+.d-textarea:has(.d-textarea--lg),
+.d-textarea--md:has(.d-textarea--lg),
+.d-input__wrapper--md:has(.d-textarea--lg),
+.d-input__wrapper:has(.d-textarea--lg) {
+  --input-border-radius: var(--dt-inputs-size-radius-lg);
+}
+.d-input:has(.d-input--xl),
+.d-input--md:has(.d-input--xl),
+.d-textarea:has(.d-input--xl),
+.d-textarea--md:has(.d-input--xl),
+.d-input__wrapper--md:has(.d-input--xl),
+.d-input__wrapper:has(.d-input--xl),
+.d-input:has(.d-textarea--xl),
+.d-input--md:has(.d-textarea--xl),
+.d-textarea:has(.d-textarea--xl),
+.d-textarea--md:has(.d-textarea--xl),
+.d-input__wrapper--md:has(.d-textarea--xl),
+.d-input__wrapper:has(.d-textarea--xl) {
+  --input-border-radius: var(--dt-inputs-size-radius-xl);
 }
 .d-input::-webkit-input-placeholder, .d-input--md::-webkit-input-placeholder, .d-textarea::-webkit-input-placeholder, .d-textarea--md::-webkit-input-placeholder, .d-input__wrapper--md::-webkit-input-placeholder, .d-input__wrapper::-webkit-input-placeholder {
   color: var(--dt-inputs-color-foreground-placeholder);
@@ -2503,7 +2368,7 @@ legend .d-label {
 .d-input__wrapper:focus-within {
   --input-color-background: var(--dt-inputs-color-background-focus);
   --input-color-border: var(--dt-inputs-color-border-focus) !important;
-  box-shadow: 0 0 0 var(--dt-size-100) var(--dt-inputs-color-border-focus) inset;
+  box-shadow: 0 0 0 var(--dt-size-border-100) var(--dt-inputs-color-border-focus) inset;
 }
 .d-input[disabled],
 .d-input--md[disabled],
@@ -2628,52 +2493,53 @@ legend .d-label {
 .d-input__wrapper .d-textarea--xs + .d-input-icon {
   --input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-100);
-  --input-border-radius: var(--dt-size-300);
+  --input-border-radius: var(--dt-inputs-size-radius-xs);
+  --input-typography: var(--dt-typography-inputs-xs);
   padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
 }
 .d-input__wrapper .d-input-icon:has(+ .d-textarea--xs) .d-btn__icon,
 .d-input__wrapper .d-textarea--xs + .d-input-icon .d-btn__icon {
-  width: calc(var(--dt-size-500) - var(--dt-size-200));
-  height: calc(var(--dt-size-500) - var(--dt-size-200));
+  width: var(--dt-icon-size-100);
+  height: var(--dt-icon-size-100);
 }
 .d-input__wrapper .d-input-icon:has(+ .d-textarea--sm),
 .d-input__wrapper .d-textarea--sm + .d-input-icon {
   --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
   --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-100);
+  --input-typography: var(--dt-typography-inputs-sm);
+  --input-border-radius: var(--dt-inputs-size-radius-sm);
   padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
 }
 .d-input__wrapper .d-input-icon:has(+ .d-textarea--sm) .d-btn__icon,
 .d-input__wrapper .d-textarea--sm + .d-input-icon .d-btn__icon {
-  width: var(--dt-size-500);
-  height: var(--dt-size-500);
+  width: var(--dt-icon-size-200);
+  height: var(--dt-icon-size-200);
 }
 .d-input__wrapper .d-input-icon:has(+ .d-textarea--lg),
 .d-input__wrapper .d-textarea--lg + .d-input-icon {
   --input-padding-y: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-300);
-  --input-border-radius: var(--dt-size-450);
+  --input-border-radius: var(--dt-inputs-size-radius-lg);
+  --input-typography: var(--dt-typography-inputs-lg);
   padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
 }
 .d-input__wrapper .d-input-icon:has(+ .d-textarea--lg) .d-btn__icon,
 .d-input__wrapper .d-textarea--lg + .d-input-icon .d-btn__icon {
-  width: calc(var(--dt-size-300) * 5);
-  height: calc(var(--dt-size-300) * 5);
+  width: var(--dt-icon-size-400);
+  height: var(--dt-icon-size-400);
 }
 .d-input__wrapper .d-input-icon:has(+ .d-textarea--xl),
 .d-input__wrapper .d-textarea--xl + .d-input-icon {
   --input-padding-y: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-400);
-  --input-border-radius: var(--dt-size-500);
+  --input-border-radius: var(--dt-inputs-size-radius-xl);
+  --input-typography: var(--dt-typography-inputs-xl);
   padding-top: calc(var(--input-padding-y) + (var(--dt-space-350) - var(--dt-space-100)));
 }
 .d-input__wrapper .d-input-icon:has(+ .d-textarea--xl) .d-btn__icon,
 .d-input__wrapper .d-textarea--xl + .d-input-icon .d-btn__icon {
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
+  width: var(--dt-icon-size-500);
+  height: var(--dt-icon-size-500);
 }
 .d-input__wrapper .d-input,
 .d-input__wrapper .d-textarea {
@@ -2692,91 +2558,92 @@ legend .d-label {
 .d-input.d-input--xs {
   --input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-100);
-  --input-border-radius: var(--dt-size-300);
+  --input-border-radius: var(--dt-inputs-size-radius-xs);
+  --input-typography: var(--dt-typography-inputs-xs);
 }
 .d-input.d-input--xs .d-btn__icon {
-  width: calc(var(--dt-size-500) - var(--dt-size-200));
-  height: calc(var(--dt-size-500) - var(--dt-size-200));
+  width: var(--dt-icon-size-100);
+  height: var(--dt-icon-size-100);
 }
 .d-input.d-input--sm {
   --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
   --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-100);
+  --input-typography: var(--dt-typography-inputs-sm);
+  --input-border-radius: var(--dt-inputs-size-radius-sm);
 }
 .d-input.d-input--sm .d-btn__icon {
-  width: var(--dt-size-500);
-  height: var(--dt-size-500);
+  width: var(--dt-icon-size-200);
+  height: var(--dt-icon-size-200);
 }
 .d-input.d-input--lg {
   --input-padding-y: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-300);
-  --input-border-radius: var(--dt-size-450);
+  --input-border-radius: var(--dt-inputs-size-radius-lg);
+  --input-typography: var(--dt-typography-inputs-lg);
 }
 .d-input.d-input--lg .d-btn__icon {
-  width: calc(var(--dt-size-300) * 5);
-  height: calc(var(--dt-size-300) * 5);
+  width: var(--dt-icon-size-400);
+  height: var(--dt-icon-size-400);
 }
 .d-input.d-input--xl {
   --input-padding-y: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-400);
-  --input-border-radius: var(--dt-size-500);
+  --input-border-radius: var(--dt-inputs-size-radius-xl);
+  --input-typography: var(--dt-typography-inputs-xl);
 }
 .d-input.d-input--xl .d-btn__icon {
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
+  width: var(--dt-icon-size-500);
+  height: var(--dt-icon-size-500);
 }
 .d-textarea {
   min-height: calc(var(--dt-size-300) * 20);
   vertical-align: top;
-  border-bottom-right-radius: var(--dt-size-300);
   resize: vertical;
   scroll-padding-block: var(--input-padding-y);
 }
 .d-textarea--xs {
   --input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-100);
-  --input-border-radius: var(--dt-size-300);
+  --input-border-radius: var(--dt-inputs-size-radius-xs);
+  --input-typography: var(--dt-typography-inputs-xs);
   min-height: calc(var(--dt-size-300) * 10);
 }
 .d-textarea--xs .d-btn__icon {
-  width: calc(var(--dt-size-500) - var(--dt-size-200));
-  height: calc(var(--dt-size-500) - var(--dt-size-200));
+  width: var(--dt-icon-size-100);
+  height: var(--dt-icon-size-100);
 }
 .d-textarea--sm {
   --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
   --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-100);
+  --input-typography: var(--dt-typography-inputs-sm);
+  --input-border-radius: var(--dt-inputs-size-radius-sm);
   min-height: var(--dt-size-650);
 }
 .d-textarea--sm .d-btn__icon {
-  width: var(--dt-size-500);
-  height: var(--dt-size-500);
+  width: var(--dt-icon-size-200);
+  height: var(--dt-icon-size-200);
 }
 .d-textarea--lg {
   --input-padding-y: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-300);
-  --input-border-radius: var(--dt-size-450);
+  --input-border-radius: var(--dt-inputs-size-radius-lg);
+  --input-typography: var(--dt-typography-inputs-lg);
   min-height: calc(var(--dt-size-300) * 23);
 }
 .d-textarea--lg .d-btn__icon {
-  width: calc(var(--dt-size-300) * 5);
-  height: calc(var(--dt-size-300) * 5);
+  width: var(--dt-icon-size-400);
+  height: var(--dt-icon-size-400);
 }
 .d-textarea--xl {
   --input-padding-y: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-400);
-  --input-border-radius: var(--dt-size-500);
+  --input-border-radius: var(--dt-inputs-size-radius-xl);
+  --input-typography: var(--dt-typography-inputs-xl);
   min-height: calc(var(--dt-size-300) * 25);
 }
 .d-textarea--xl .d-btn__icon {
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
+  width: var(--dt-icon-size-500);
+  height: var(--dt-icon-size-500);
 }
 .d-input--warning {
   --input-color-border: var(--dt-inputs-color-border-warning) !important;
@@ -3580,7 +3447,7 @@ legend .d-label {
   --check-radio-color-background: var(--dt-inputs-color-background-default);
   --check-radio-color-background-checked: var(--dt-checkbox-color-background-checked);
   --check-radio-color-background-disabled: var(--dt-inputs-color-background-disabled);
-  --check-radio-border-width: calc(var(--dt-size-100) + var(--dt-size-50));
+  --check-radio-border-width: var(--dt-size-border-150);
   flex: 0 auto;
   align-self: flex-start;
   transition-timing-function: var(--ttf-out-quint);
@@ -3681,9 +3548,7 @@ legend .d-label {
   flex-direction: column;
   align-items: flex-start;
   color: var(--dt-color-foreground-primary);
-  font-weight: var(--dt-font-weight-normal);
-  font-size: var(--dt-font-size-200);
-  line-height: var(--dt-font-line-height-400);
+  font: var(--dt-typography-label-md-plain);
   cursor: pointer;
 }
 .d-checkbox__description {
@@ -3700,7 +3565,7 @@ legend .d-label {
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
-    border-radius: var(--dt-size-300);
+    border-radius: var(--dt-size-radius-300);
   }
   .d-checkbox:focus-visible,
   .d-checkbox:checked:focus-visible {
@@ -3804,12 +3669,11 @@ legend .d-label {
   --input-color-background: var(--dt-inputs-color-background-default);
   --input-color-background-disabled: var(--dt-inputs-color-background-disabled);
   --input-color-text: var(--dt-inputs-color-foreground-default);
-  --input-border-width: calc(var(--dt-size-100) + var(--dt-size-50));
-  --input-border-radius: var(--dt-size-400);
+  --input-border-width: var(--dt-size-border-150);
+  --input-border-radius: var(--dt-inputs-size-radius-md);
   --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
   --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-200);
-  --input-line-height: var(--dt-font-line-height-200);
+  --input-typography: var(--dt-typography-inputs-md);
   position: relative;
   display: inline-flex;
   flex: 1 0%;
@@ -3818,23 +3682,40 @@ legend .d-label {
   min-width: 0;
   padding: var(--input-padding-y) var(--input-padding-x);
   color: var(--input-color-text);
-  font-weight: inherit;
-  font-size: var(--input-font-size);
-  font-family: inherit;
-  line-height: var(--input-line-height);
+  font: var(--input-typography);
   background-color: var(--input-color-background);
   border: var(--input-border-width) solid var(--input-color-border);
   border-radius: var(--input-border-radius);
   outline: none;
   box-shadow: none;
-  transition-timing-function: var(--ttf-in-out);
-  transition-duration: var(--td100);
-  transition-property: box-shadow, background-color;
   -webkit-appearance: none;
           appearance: none;
-  caret-color: var(--input-color-text);
+  caret-color: fieldtext;
   padding-right: var(--select-notch-padding-right);
 }
+.d-select__input:has(.d-textarea) {
+  border-end-end-radius: var(--dt-inputs-size-radius-xs);
+}
+.d-select__input:has(.d-input--xs),
+.d-select__input:has(.d-textarea--xs) {
+  --input-border-radius: var(--dt-inputs-size-radius-xs);
+}
+.d-select__input:has(.d-input--sm),
+.d-select__input:has(.d-textarea--sm) {
+  --input-border-radius: var(--dt-inputs-size-radius-sm);
+}
+.d-select__input:has(.d-input--md),
+.d-select__input:has(.d-textarea--md) {
+  --input-border-radius: var(--dt-inputs-size-radius-md);
+}
+.d-select__input:has(.d-input--lg),
+.d-select__input:has(.d-textarea--lg) {
+  --input-border-radius: var(--dt-inputs-size-radius-lg);
+}
+.d-select__input:has(.d-input--xl),
+.d-select__input:has(.d-textarea--xl) {
+  --input-border-radius: var(--dt-inputs-size-radius-xl);
+}
 .d-select__input::-webkit-input-placeholder {
   color: var(--dt-inputs-color-foreground-placeholder);
 }
@@ -3854,7 +3735,7 @@ legend .d-label {
 .d-select__input:focus-within {
   --input-color-background: var(--dt-inputs-color-background-focus);
   --input-color-border: var(--dt-inputs-color-border-focus) !important;
-  box-shadow: 0 0 0 var(--dt-size-100) var(--dt-inputs-color-border-focus) inset;
+  box-shadow: 0 0 0 var(--dt-size-border-100) var(--dt-inputs-color-border-focus) inset;
 }
 .d-select__input[disabled],
 .d-select__input[read-only] {
@@ -3922,32 +3803,33 @@ legend .d-label {
 .d-select--xs .d-select__input {
   --input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-100);
-  --input-border-radius: var(--dt-size-300);
+  --input-border-radius: var(--dt-inputs-size-radius-xs);
+  --input-typography: var(--dt-typography-inputs-xs);
 }
 .d-select--xs .d-select__input .d-btn__icon {
-  width: calc(var(--dt-size-500) - var(--dt-size-200));
-  height: calc(var(--dt-size-500) - var(--dt-size-200));
+  width: var(--dt-icon-size-100);
+  height: var(--dt-icon-size-100);
 }
 .d-select--sm .d-select__input {
   --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
   --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-100);
+  --input-typography: var(--dt-typography-inputs-sm);
+  --input-border-radius: var(--dt-inputs-size-radius-sm);
 }
 .d-select--sm .d-select__input .d-btn__icon {
-  width: var(--dt-size-500);
-  height: var(--dt-size-500);
+  width: var(--dt-icon-size-200);
+  height: var(--dt-icon-size-200);
 }
 .d-select--lg .d-select__input {
   --input-padding-y: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-300);
-  --input-border-radius: var(--dt-size-450);
+  --input-border-radius: var(--dt-inputs-size-radius-lg);
+  --input-typography: var(--dt-typography-inputs-lg);
   --select-notch-padding-right: calc(var(--dt-space-300) * 9);
 }
 .d-select--lg .d-select__input .d-btn__icon {
-  width: calc(var(--dt-size-300) * 5);
-  height: calc(var(--dt-size-300) * 5);
+  width: var(--dt-icon-size-400);
+  height: var(--dt-icon-size-400);
 }
 .d-select--lg::after {
   --select-arrow-size: calc(var(--dt-size-300) * 4.5);
@@ -3956,13 +3838,13 @@ legend .d-label {
 .d-select--xl .d-select__input {
   --input-padding-y: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
   --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
-  --input-font-size: var(--dt-font-size-400);
-  --input-border-radius: var(--dt-size-500);
+  --input-border-radius: var(--dt-inputs-size-radius-xl);
+  --input-typography: var(--dt-typography-inputs-xl);
   --select-notch-padding-right: calc(var(--dt-space-300) * 9);
 }
 .d-select--xl .d-select__input .d-btn__icon {
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
+  width: var(--dt-icon-size-500);
+  height: var(--dt-icon-size-500);
 }
 .d-select--xl::after {
   --select-arrow-size: calc(var(--dt-size-300) * 4.5);
@@ -4124,47 +4006,31 @@ legend .d-label {
   display: none;
 }
 .d-tablist {
+  --tab-color-background: var(--dt-action-color-background-base-default);
+  --tab-color-text: var(--dt-action-color-foreground-muted-default);
+  --tab-font-style: var(--dt-typography-button-md);
+  --tab-border-radius: var(--dt-button-size-radius-md);
+  --tab-padding-x: calc(var(--dt-space-450) - var(--dt-size-border-100));
+  --tab-padding-y: calc(var(--dt-space-400) - var(--dt-size-border-100));
   position: relative;
   display: flex;
   flex-wrap: wrap;
   gap: var(--dt-space-300);
-  color: var(--dt-color-foreground-muted-default);
-  font-size: var(--dt-font-size-200);
+  align-items: baseline;
 }
 .d-tablist:focus {
   outline: 0;
 }
 .d-tablist:not(.d-tablist--no-border)::after {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-inline: 0;
+  inset-block-end: 0;
   z-index: var(--zi-base1);
-  height: var(--dt-size-100);
+  block-size: var(--dt-size-border-100);
   background-color: var(--dt-color-border-default);
   content: '';
 }
-.d-tablist--sm {
-  font-size: var(--dt-font-size-100);
-}
-.d-tablist--sm .d-tab {
-  --tab-padding-x: var(--dt-space-400);
-  --tab-padding-y: var(--dt-space-400);
-  --tab-padding-bottom: calc(var(--tab-padding-y) + var(--dt-space-100));
-  --tab-border-radius-top: var(--dt-size-radius-300);
-}
-.d-tablist--no-border .d-tablist--sm .d-tab:not(.d-tab--selected) {
-  border-radius: var(--tab-border-radius-top);
-}
 .d-tab {
-  --tab-color-background: var(--dt-action-color-background-base-default);
-  --tab-color-text: var(--dt-action-color-foreground-muted-default);
-  --tab-line-height: var(--dt-font-line-height-200);
-  --tab-font-weight: var(--dt-font-weight-medium);
-  --tab-border-radius-top: var(--dt-size-radius-400);
-  --tab-padding-x: var(--dt-space-450);
-  --tab-padding-y: var(--dt-space-400);
-  --tab-padding-bottom: calc(var(--tab-padding-y) + var(--dt-space-100));
   position: relative;
   display: inline-flex;
   gap: var(--dt-space-400);
@@ -4172,37 +4038,35 @@ legend .d-label {
   justify-content: center;
   box-sizing: border-box;
   padding: var(--tab-padding-y) var(--tab-padding-x);
-  padding-bottom: var(--tab-padding-bottom);
   color: var(--tab-color-text);
-  font: inherit;
-  font-weight: var(--tab-font-weight);
-  line-height: var(--tab-line-height);
+  font: var(--tab-font-style);
   background-color: var(--tab-color-background);
-  border: 0;
-  border-radius: var(--tab-border-radius-top) var(--tab-border-radius-top) 0 0;
+  border: var(--dt-size-border-100) solid transparent;
+  border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;
   cursor: pointer;
   transition-timing-function: var(--ttf-out-quint);
-  transition-duration: var(--td200);
+  transition-duration: var(--td100);
   transition-property: background-color, border, color, box-shadow;
   fill: currentColor;
 }
 .d-tablist--no-border .d-tab:not(.d-tab--selected) {
-  border-radius: var(--tab-border-radius-top);
+  border-radius: var(--tab-border-radius);
 }
 .d-tab:first-of-type {
-  margin-left: 0;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
 }
 .d-tab:last-of-type {
-  margin-right: 0;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
 }
 .d-tab::after {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: var(--dt-size-200);
+  block-size: var(--dt-size-border-200);
   background-color: var(--tab-color-background);
   content: '';
+  inset-inline: var(--dt-size-100-negative) var(--dt-size-100-negative);
+  inset-block-end: var(--dt-size-100-negative);
 }
 .d-tablist--no-border .d-tab::after {
   background-color: transparent;
@@ -4228,6 +4092,14 @@ legend .d-label {
     transition: none;
   }
 }
+.d-tablist--sm .d-tab {
+  --tab-padding-x: calc(var(--dt-space-400) - var(--dt-size-border-100));
+  --tab-border-radius: var(--dt-button-size-radius-xs);
+  --tab-font-style: var(--dt-typography-button-xs);
+}
+.d-tablist--no-border .d-tablist--sm .d-tab:not(.d-tab--selected) {
+  border-radius: var(--tab-border-radius);
+}
 .d-tab--selected {
   --tab-color-text: var(--dt-action-color-foreground-base-default);
   z-index: var(--zi-selected);
@@ -4704,6 +4576,203 @@ legend .d-label {
 :root.d-scrollbar-disabled .os-scrollbar {
   display: none;
 }
+.d-emoji {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+.d-emoji .d-icon {
+  position: absolute;
+  top: 50%;
+  display: block;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.d-emoji-text-wrapper .d-emoji {
+  height: 1em;
+}
+.d-emoji-text-wrapper .d-emoji .d-icon {
+  top: calc(50% - 1px);
+}
+.d-emoji-picker {
+  flex-direction: column;
+  width: calc(var(--dt-size-925) + var(--dt-size-600) + var(--dt-size-400));
+  height: 100%;
+  background-color: var(--dt-color-surface-primary);
+  border-radius: var(--dt-size-radius-300);
+}
+.d-emoji-picker--header {
+  position: relative;
+  padding: var(--dt-space-300) var(--dt-space-300) 0;
+}
+.d-emoji-picker--header::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--dt-size-border-200);
+  background-color: var(--dt-color-surface-moderate) !important;
+  content: '';
+}
+.d-emoji-picker__alignment {
+  box-sizing: content-box !important;
+  width: auto;
+  max-width: calc(var(--dt-size-925) + var(--dt-size-400));
+  margin: 0 var(--dt-space-500);
+}
+.d-emoji-picker--footer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: calc(var(--dt-size-650) + var(--dt-size-400) + var(--dt-size-200));
+  padding: 0 var(--dt-space-500);
+  background: var(--dt-color-surface-secondary);
+  border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
+}
+.d-emoji-picker__tabset-list {
+  gap: var(--dt-space-0);
+  justify-content: space-between;
+}
+.d-emoji-picker__tabset-list::after {
+  background-color: var(--dt-color-surface-moderate) !important;
+}
+.d-emoji-picker__tabset-list .d-tab {
+  --tab-padding-y: var(--dt-space-400);
+  --tab-padding-x: var(--dt-space-300);
+  flex-grow: 1;
+}
+.d-emoji-picker__tabset-list .d-tab.d-tab--selected::after {
+  height: var(--dt-size-border-200);
+}
+.d-emoji-picker__skin-list {
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--dt-space-300);
+  align-items: flex-start;
+  padding: var(--dt-space-300);
+  background: var(--dt-color-surface-moderate-opaque);
+  border-radius: var(--dt-size-radius-pill);
+}
+.d-emoji-picker__skin-list button {
+  width: var(--dt-size-600);
+  height: var(--dt-size-600);
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: var(--dt-size-border-100) solid transparent;
+  border-radius: calc(var(--dt-size-550) + var(--dt-size-300));
+  outline: none;
+  cursor: pointer;
+}
+.d-emoji-picker__skin-list button:hover {
+  background: var(--dt-color-surface-moderate-opaque);
+}
+.d-emoji-picker__skin-list button:active,
+.d-emoji-picker__skin-list button.selected {
+  border-color: var(--dt-color-border-bold);
+}
+.d-emoji-picker__skin-selected button {
+  display: inline-block;
+  width: var(--dt-size-625);
+  height: var(--dt-size-625);
+  margin: 0;
+  padding: calc(var(--dt-space-350) + var(--dt-space-100));
+  background: var(--dt-color-surface-moderate-opaque);
+  border: none;
+  border-radius: var(--dt-size-radius-circle);
+  outline: none;
+  cursor: pointer;
+}
+.d-emoji-picker__skin-selected button:hover {
+  background: var(--dt-color-surface-bold);
+}
+.d-emoji-picker__selector {
+  min-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
+}
+.d-emoji-picker__selector p {
+  padding-bottom: var(--dt-space-300);
+  color: var(--dt-color-foreground-secondary);
+  font: var(--dt-typography-headline-eyebrow);
+  text-transform: var(--dt-typography-headline-eyebrow-text-case);
+}
+.d-emoji-picker__category {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  margin: 0;
+  padding: var(--dt-space-500) var(--dt-space-500) 0 var(--dt-space-500);
+  background: var(--dt-color-surface-primary);
+}
+.d-emoji-picker__list {
+  position: relative;
+  height: 100%;
+  max-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
+  padding-bottom: calc(var(--dt-space-300) + var(--dt-space-100));
+  overflow: hidden auto;
+}
+.d-emoji-picker__list div:not(:first-child) p {
+  margin-top: var(--dt-space-500);
+}
+.d-emoji-picker__search-label {
+  padding-top: var(--dt-space-500);
+}
+.d-emoji-picker__tab {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dt-space-200);
+  width: calc(100% + calc(var(--dt-size-500) - var(--dt-size-100)));
+  max-width: calc(var(--dt-size-925) + var(--dt-size-400));
+  margin-left: var(--dt-space-350-negative);
+  padding-top: var(--dt-space-300);
+}
+.d-emoji-picker__tab button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--dt-size-600) + var(--dt-size-300));
+  height: calc(var(--dt-size-600) + var(--dt-size-300));
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--dt-size-radius-circle);
+  outline: none;
+  cursor: pointer;
+}
+.d-emoji-picker__tab button:hover,
+.d-emoji-picker__tab button:active {
+  background: var(--dt-color-surface-moderate-opaque);
+}
+.d-emoji-picker__tab button.hover-emoji {
+  background: var(--dt-color-surface-moderate-opaque);
+}
+.d-emoji-picker__tab button:focus {
+  box-shadow: var(--dt-shadow-focus);
+}
+.d-emoji-picker__search {
+  position: relative;
+  z-index: 1;
+  padding: var(--dt-space-500) 0 0 0;
+}
+.d-emoji-picker__search-button {
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+.d-emoji-picker__data {
+  display: flex;
+  gap: var(--dt-space-400);
+  align-items: center;
+  width: 100%;
+  max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
+  color: var(--dt-color-foreground-tertiary);
+  font: var(--dt-typography-body-md);
+}
 .d-bga-scroll {
   background-attachment: scroll !important;
 }