nntc-ui 0.1.1 → 0.1.4

package/index.css

@@ -414,204 +414,581 @@
   background-color: var(--theme-selection-selected-pressed);
 }
 
-.popover-module__trigger__hYNqD {
-  display: inline-flex;
-  align-items: center;
-  height: 100%;
-}
-
-.popover-module__content__cXVJ_ {
-  z-index: 999;
-  min-width: 200px;
-  max-width: 380px;
-  padding: 0;
-  font-size: var(--text-caption-size);
-  font-weight: var(--text-caption-weight);
-  line-height: var(--text-caption-height);
-  color: var(--theme-alert-default-color);
-  letter-spacing: var(--text-caption-letter);
-  background-color: var(--theme-surface-dropdown);
-  border-radius: 4px;
-  box-shadow:
-    0px 2px 4px 0px #00000033,
-    0px 1px 10px 0px #0000001f,
-    0px 4px 5px 0px #00000024;
-}
-
-.select-module__root__OCHpB {
+/*
+ * Общая геометрия и состояния полей ввода (Input, Select, MultiSelect,
+ * DateTime, ColorPicker) по макету «Input and selector Dark Theme».
+ *
+ * Размеры (small/medium/large): высота 24/28/32, иконки 20/20/24.
+ * Компоненты ссылаются на размеры/состояния через data-атрибуты
+ * ([data-size], [data-variant], [data-chips]), т.к. классы CSS-модулей
+ * не видны между файлами. Структурные части селекторов обёрнуты в
+ * :where(), чтобы компоненты могли переопределять правила селекторами
+ * с обычной специфичностью.
+ */
+
+.fieldShell-module__root__vQ9PI {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 320px;
 }
 
-.select-module__medium__thAU2 {
-  gap: 8px;
+.fieldShell-module__full-width__bYt_Z {
+  max-width: 100%;
+}
+
+.fieldShell-module__root__vQ9PI[data-size='small'] {
+  gap: 2px;
 }
 
-.select-module__small__Fc860 {
+.fieldShell-module__root__vQ9PI[data-size='medium'] {
   gap: 4px;
 }
 
-.select-module__label__b95oB {
+.fieldShell-module__root__vQ9PI[data-size='large'] {
+  gap: 8px;
+}
+
+/* Label small из макета: 12/12, без letter-spacing */
+.fieldShell-module__root__vQ9PI > .fieldShell-module__label__fdgQq {
+  font-size: 12px;
+  line-height: 12px;
   color: var(--theme-text-secondary);
+  letter-spacing: normal;
 }
 
-.select-module__wrapper__wHn5r {
+.fieldShell-module__wrapper__OLPGQ {
   position: relative;
   width: 100%;
 }
 
-.select-module__medium__thAU2 > .select-module__wrapper__wHn5r {
-  height: 40px;
+:where(.fieldShell-module__root__vQ9PI[data-size='small']) > .fieldShell-module__wrapper__OLPGQ {
+  height: 24px;
 }
 
-.select-module__small__Fc860 > .select-module__wrapper__wHn5r {
+:where(.fieldShell-module__root__vQ9PI[data-size='medium']) > .fieldShell-module__wrapper__OLPGQ {
+  height: 28px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='large']) > .fieldShell-module__wrapper__OLPGQ {
   height: 32px;
 }
 
-.select-module__input__ajhdt {
+.fieldShell-module__input__mpHQB {
   position: relative;
   z-index: 1;
   width: 100%;
-  font-size: var(--text-subtitle2-size);
-  font-weight: var(--text-subtitle2-weight);
-  line-height: var(--text-subtitle2-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
   color: var(--theme-text-primary);
-  letter-spacing: var(--text-subtitle2-letter);
-  cursor: pointer;
+  letter-spacing: normal;
+  white-space: nowrap;
   outline: none;
+  background-color: transparent;
   border: none;
   border-radius: 4px;
 }
 
-.select-module__input__ajhdt:disabled {
-  color: var(--theme-text-inactive);
+:where(.fieldShell-module__root__vQ9PI[data-size='small'] .fieldShell-module__wrapper__OLPGQ) > .fieldShell-module__input__mpHQB {
+  height: 24px;
+  padding: 0 6px;
 }
 
-.select-module__medium__thAU2 > .select-module__wrapper__wHn5r > .select-module__input__ajhdt {
-  height: 40px;
-  padding: 8px 48px 8px 16px;
+:where(.fieldShell-module__root__vQ9PI[data-size='medium'] .fieldShell-module__wrapper__OLPGQ) > .fieldShell-module__input__mpHQB {
+  height: 28px;
+  padding: 0 8px;
 }
 
-.select-module__small__Fc860 > .select-module__wrapper__wHn5r > .select-module__input__ajhdt {
+:where(.fieldShell-module__root__vQ9PI[data-size='large'] .fieldShell-module__wrapper__OLPGQ) > .fieldShell-module__input__mpHQB {
   height: 32px;
-  padding: 4px 48px 4px 16px;
+  padding: 0 4px;
+  font-weight: 300;
+  line-height: 20px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='small'] .fieldShell-module__wrapper__OLPGQ[data-start-icon]) > .fieldShell-module__input__mpHQB {
+  padding-left: 30px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='medium'] .fieldShell-module__wrapper__OLPGQ[data-start-icon]) > .fieldShell-module__input__mpHQB {
+  padding-left: 32px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='large'] .fieldShell-module__wrapper__OLPGQ[data-start-icon]) > .fieldShell-module__input__mpHQB {
+  padding-left: 36px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='small'] .fieldShell-module__wrapper__OLPGQ[data-end-icon]) > .fieldShell-module__input__mpHQB {
+  padding-right: 30px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='medium'] .fieldShell-module__wrapper__OLPGQ[data-end-icon]) > .fieldShell-module__input__mpHQB {
+  padding-right: 32px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='large'] .fieldShell-module__wrapper__OLPGQ[data-end-icon]) > .fieldShell-module__input__mpHQB {
+  padding-right: 36px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='small'] .fieldShell-module__wrapper__OLPGQ[data-arrow]) > .fieldShell-module__input__mpHQB {
+  padding-right: 26px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='medium'] .fieldShell-module__wrapper__OLPGQ[data-arrow]) > .fieldShell-module__input__mpHQB {
+  padding-right: 32px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='large'] .fieldShell-module__wrapper__OLPGQ[data-arrow]) > .fieldShell-module__input__mpHQB {
+  padding-right: 36px;
+}
+
+:where(.fieldShell-module__wrapper__OLPGQ[data-variant='filled']) > .fieldShell-module__input__mpHQB {
+  background-color: var(--theme-input-filled);
 }
 
-.select-module__with-icon__sdr2r > .select-module__wrapper__wHn5r > .select-module__input__ajhdt {
-  padding-left: 48px;
+:where(.fieldShell-module__wrapper__OLPGQ[data-variant='filled']:hover) > .fieldShell-module__input__mpHQB:not(:disabled):not(:focus) {
+  background-color: var(--theme-input-filled-hover);
+}
+
+:where(.fieldShell-module__wrapper__OLPGQ[data-variant='filled']) > .fieldShell-module__input__mpHQB:focus {
+  outline: 2px solid var(--theme-focus);
+  outline-offset: -2px;
+  background-color: var(--theme-input-filled-hover);
+}
+
+:where(.fieldShell-module__wrapper__OLPGQ[data-variant='outlined']) > .fieldShell-module__input__mpHQB {
+  outline: 1px solid var(--theme-input-border);
+  outline-offset: -1px;
+}
+
+:where(.fieldShell-module__wrapper__OLPGQ[data-variant='outlined']:hover) > .fieldShell-module__input__mpHQB:not(:disabled):not(:focus) {
+  outline-color: var(--theme-input-border-hover);
 }
 
-.select-module__with-item-icon__j4VL9 > .select-module__wrapper__wHn5r > .select-module__input__ajhdt {
-  padding-left: 48px;
+:where(.fieldShell-module__wrapper__OLPGQ[data-variant='outlined']) > .fieldShell-module__input__mpHQB:focus {
+  outline: 2px solid var(--theme-focus);
+  outline-offset: -2px;
 }
 
-.select-module__with-icon__sdr2r.select-module__with-item-icon__j4VL9 > .select-module__wrapper__wHn5r > .select-module__input__ajhdt {
-  padding-left: 80px;
+.fieldShell-module__wrapper__OLPGQ:has(> .fieldShell-module__input__mpHQB:disabled) {
+  opacity: 0.4;
 }
 
-.select-module__icon__eKwKi {
+.fieldShell-module__start-icon__FNrDk,
+.fieldShell-module__end-icon__ajeP3,
+.fieldShell-module__arrow__dXtPp {
   position: absolute;
-  left: 16px;
+  top: 50%;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--theme-icon-primary);
+  transform: translateY(-50%);
+}
+
+.fieldShell-module__arrow__dXtPp {
+  cursor: pointer;
+}
+
+.fieldShell-module__start-icon__FNrDk > svg,
+.fieldShell-module__end-icon__ajeP3 > svg,
+.fieldShell-module__arrow__dXtPp > svg {
+  width: 100%;
+  height: 100%;
+  fill: var(--theme-icon-primary);
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='small']) .fieldShell-module__start-icon__FNrDk {
+  left: 6px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='medium']) .fieldShell-module__start-icon__FNrDk {
+  left: 8px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='large']) .fieldShell-module__start-icon__FNrDk {
+  left: 4px;
   width: 24px;
   height: 24px;
-  cursor: pointer;
 }
 
-.select-module__medium__thAU2 > .select-module__wrapper__wHn5r > .select-module__icon__eKwKi {
-  top: 8px;
+:where(.fieldShell-module__root__vQ9PI[data-size='small']) .fieldShell-module__end-icon__ajeP3 {
+  right: 6px;
 }
 
-.select-module__small__Fc860 > .select-module__wrapper__wHn5r > .select-module__icon__eKwKi {
-  top: 4px;
+:where(.fieldShell-module__root__vQ9PI[data-size='medium']) .fieldShell-module__end-icon__ajeP3 {
+  right: 8px;
 }
 
-.select-module__icon__eKwKi > svg {
-  fill: var(--theme-icon-primary);
+:where(.fieldShell-module__root__vQ9PI[data-size='large']) .fieldShell-module__end-icon__ajeP3 {
+  right: 4px;
+  width: 24px;
+  height: 24px;
 }
 
-.select-module__item-icon__qWzAS {
+:where(.fieldShell-module__root__vQ9PI[data-size='small']) .fieldShell-module__arrow__dXtPp {
+  right: 2px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='medium']) .fieldShell-module__arrow__dXtPp {
+  right: 8px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='large']) .fieldShell-module__arrow__dXtPp {
+  right: 4px;
+  width: 24px;
+  height: 24px;
+}
+
+.fieldShell-module__wrapper__OLPGQ[data-chips] {
+  display: flex;
+  height: auto;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='small']) > .fieldShell-module__wrapper__OLPGQ[data-chips] {
+  height: auto;
+  min-height: 24px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='medium']) > .fieldShell-module__wrapper__OLPGQ[data-chips] {
+  height: auto;
+  min-height: 28px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size='large']) > .fieldShell-module__wrapper__OLPGQ[data-chips] {
+  height: auto;
+  min-height: 32px;
+}
+
+:where(.fieldShell-module__root__vQ9PI[data-size] .fieldShell-module__wrapper__OLPGQ[data-chips]) > .fieldShell-module__input__mpHQB {
   position: absolute;
-  left: 16px;
+  inset: 0;
+  height: 100%;
+}
+
+.fieldShell-module__chips__Eyi_K {
+  position: relative;
   z-index: 2;
   display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 4px;
   align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
+  min-width: 0;
+  pointer-events: none;
 }
 
-.select-module__icon__eKwKi + .select-module__item-icon__qWzAS {
-  left: 48px;
+.fieldShell-module__chips__Eyi_K > * {
+  pointer-events: auto;
 }
 
-.select-module__medium__thAU2 > .select-module__wrapper__wHn5r > .select-module__item-icon__qWzAS {
-  top: 8px;
+:where(.fieldShell-module__root__vQ9PI[data-size='small']) .fieldShell-module__chips__Eyi_K {
+  padding: 4px 26px 4px 6px;
 }
 
-.select-module__small__Fc860 > .select-module__wrapper__wHn5r > .select-module__item-icon__qWzAS {
-  top: 4px;
+:where(.fieldShell-module__root__vQ9PI[data-size='medium']) .fieldShell-module__chips__Eyi_K {
+  padding: 4px 32px 4px 8px;
 }
 
-.select-module__item-icon__qWzAS > svg {
-  fill: var(--theme-icon-primary);
+:where(.fieldShell-module__root__vQ9PI[data-size='large']) .fieldShell-module__chips__Eyi_K {
+  padding: 4px 36px 4px 4px;
 }
 
-.select-module__filled__HCXVQ > .select-module__input__ajhdt {
-  background-color: var(--theme-input-filled);
+:where(.fieldShell-module__root__vQ9PI[data-size='small'] .fieldShell-module__wrapper__OLPGQ[data-start-icon]) > .fieldShell-module__chips__Eyi_K {
+  padding-left: 30px;
 }
 
-.select-module__filled__HCXVQ:hover > .select-module__input__ajhdt {
-  background-color: var(--theme-input-filled-hover);
+:where(.fieldShell-module__root__vQ9PI[data-size='medium'] .fieldShell-module__wrapper__OLPGQ[data-start-icon]) > .fieldShell-module__chips__Eyi_K {
+  padding-left: 32px;
 }
 
-.select-module__filled__HCXVQ > .select-module__input__ajhdt:focus {
-  background-color: var(--theme-input-filled-hover);
+:where(.fieldShell-module__root__vQ9PI[data-size='large'] .fieldShell-module__wrapper__OLPGQ[data-start-icon]) > .fieldShell-module__chips__Eyi_K {
+  padding-left: 36px;
 }
 
-.select-module__outlined__rTvhS > .select-module__input__ajhdt {
+.inputChip-module__root__DWnVf {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 20px;
+  color: var(--theme-text-primary);
+  letter-spacing: normal;
+  -webkit-user-select: none;
+  user-select: none;
+  border-radius: 16px;
+}
+
+.inputChip-module__filled__mSiU7 {
+  background-color: var(--theme-input-chip-bg);
+}
+
+.inputChip-module__outlined__j4EHe {
   outline: 1px solid var(--theme-input-border);
+  outline-offset: -1px;
   background-color: transparent;
 }
 
-.select-module__outlined__rTvhS:hover > .select-module__input__ajhdt:not(:disabled):not(:focus) {
+.inputChip-module__small__XrLEF {
+  height: 20px;
+}
+
+.inputChip-module__small__XrLEF.inputChip-module__with-icon__DZMe4 {
+  padding-left: 0;
+}
+
+.inputChip-module__small__XrLEF:not(.inputChip-module__with-icon__DZMe4) {
+  padding-left: 8px;
+}
+
+.inputChip-module__small__XrLEF:has(.inputChip-module__remove__Z6QBd) {
+  padding-right: 1px;
+}
+
+.inputChip-module__small__XrLEF:not(:has(.inputChip-module__remove__Z6QBd)) {
+  padding-right: 8px;
+}
+
+.inputChip-module__small__XrLEF.inputChip-module__with-icon__DZMe4:not(:has(.inputChip-module__remove__Z6QBd)) {
+  padding-right: 6px;
+}
+
+.inputChip-module__medium__VruGz,
+.inputChip-module__large__PPvr0 {
+  height: 28px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.inputChip-module__medium__VruGz.inputChip-module__with-icon__DZMe4,
+.inputChip-module__large__PPvr0.inputChip-module__with-icon__DZMe4 {
+  padding-left: 4px;
+}
+
+.inputChip-module__medium__VruGz:not(.inputChip-module__with-icon__DZMe4),
+.inputChip-module__large__PPvr0:not(.inputChip-module__with-icon__DZMe4) {
+  padding-left: 12px;
+}
+
+.inputChip-module__medium__VruGz:has(.inputChip-module__remove__Z6QBd),
+.inputChip-module__large__PPvr0:has(.inputChip-module__remove__Z6QBd) {
+  padding-right: 6px;
+}
+
+.inputChip-module__medium__VruGz:not(:has(.inputChip-module__remove__Z6QBd)),
+.inputChip-module__large__PPvr0:not(:has(.inputChip-module__remove__Z6QBd)) {
+  padding-right: 12px;
+}
+
+.inputChip-module__medium__VruGz.inputChip-module__with-icon__DZMe4:not(:has(.inputChip-module__remove__Z6QBd)),
+.inputChip-module__large__PPvr0.inputChip-module__with-icon__DZMe4:not(:has(.inputChip-module__remove__Z6QBd)) {
+  padding-right: 6px;
+}
+
+.inputChip-module__clickable__XZjD7 {
+  cursor: pointer;
+}
+
+.inputChip-module__clickable__XZjD7.inputChip-module__filled__mSiU7:hover:not(.inputChip-module__disabled__Zk_O4) {
+  background-color: var(--theme-input-chip-hover);
+}
+
+.inputChip-module__clickable__XZjD7.inputChip-module__filled__mSiU7:focus-visible:not(.inputChip-module__disabled__Zk_O4) {
+  outline: none;
+  background-color: var(--theme-input-chip-focus);
+}
+
+.inputChip-module__clickable__XZjD7.inputChip-module__outlined__j4EHe:hover:not(.inputChip-module__disabled__Zk_O4) {
   outline-color: var(--theme-input-border-hover);
+  background-color: var(--theme-selection-hover);
 }
 
-.select-module__outlined__rTvhS > .select-module__input__ajhdt:focus {
-  outline-color: var(--theme-focus);
+.inputChip-module__clickable__XZjD7.inputChip-module__outlined__j4EHe:focus-visible:not(.inputChip-module__disabled__Zk_O4) {
+  outline: 2px solid var(--theme-focus);
+  outline-offset: -2px;
 }
 
-.select-module__arrow__hlIMs {
+.inputChip-module__disabled__Zk_O4.inputChip-module__filled__mSiU7 {
+  background-color: var(--theme-input-chip-disabled-bg);
+}
+
+.inputChip-module__disabled__Zk_O4 {
+  color: var(--theme-text-inactive);
+  pointer-events: none;
+}
+
+.inputChip-module__text__dhqTV {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.inputChip-module__icon__phvLA {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--theme-icon-primary);
+}
+
+.inputChip-module__icon__phvLA > svg {
+  width: 100%;
+  height: 100%;
+  fill: var(--theme-icon-primary);
+}
+
+.inputChip-module__disabled__Zk_O4 .inputChip-module__icon__phvLA > svg {
+  fill: var(--theme-text-inactive);
+}
+
+.inputChip-module__remove__Z6QBd {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  margin: 0 0 0 auto;
+  color: var(--theme-icon-primary);
+  cursor: pointer;
+  outline: none;
+  background: none;
+  border: none;
+  border-radius: 50%;
+}
+
+.inputChip-module__remove__Z6QBd > svg {
+  width: 100%;
+  height: 100%;
+  fill: var(--theme-icon-primary);
+}
+
+.inputChip-module__remove__Z6QBd:hover:not(:disabled) {
+  background-color: var(--theme-icon-hover);
+}
+
+.inputChip-module__remove__Z6QBd:hover:not(:disabled) > svg {
+  fill: var(--theme-text-primary);
+}
+
+.inputChip-module__remove__Z6QBd:disabled {
+  cursor: default;
+}
+
+.inputChip-module__disabled__Zk_O4 .inputChip-module__remove__Z6QBd > svg {
+  fill: var(--theme-text-inactive);
+}
+
+.popover-module__trigger__hYNqD {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+}
+
+.popover-module__content__cXVJ_ {
+  z-index: 999;
+  min-width: 200px;
+  max-width: 380px;
+  padding: 0;
+  font-size: var(--text-caption-size);
+  font-weight: var(--text-caption-weight);
+  line-height: var(--text-caption-height);
+  color: var(--theme-alert-default-color);
+  letter-spacing: var(--text-caption-letter);
+  background-color: var(--theme-surface-dropdown);
+  border-radius: 4px;
+  box-shadow:
+    0px 2px 4px 0px #00000033,
+    0px 1px 10px 0px #0000001f,
+    0px 4px 5px 0px #00000024;
+}
+
+.select-module__input__ajhdt {
+  cursor: pointer;
+}
+
+.select-module__input__ajhdt:disabled {
+  cursor: default;
+}
+
+.select-module__icon__eKwKi,
+.select-module__item-icon__qWzAS {
   position: absolute;
-  right: 16px;
+  top: 50%;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+[data-size='small'] .select-module__icon__eKwKi,
+[data-size='small'] .select-module__item-icon__qWzAS {
+  left: 6px;
+}
+
+[data-size='medium'] .select-module__icon__eKwKi,
+[data-size='medium'] .select-module__item-icon__qWzAS {
+  left: 8px;
+}
+
+[data-size='large'] .select-module__icon__eKwKi,
+[data-size='large'] .select-module__item-icon__qWzAS {
+  left: 4px;
   width: 24px;
   height: 24px;
-  cursor: pointer;
 }
 
-.select-module__medium__thAU2 > .select-module__wrapper__wHn5r > .select-module__arrow__hlIMs {
-  top: 8px;
+[data-size='small'] .select-module__icon__eKwKi + .select-module__item-icon__qWzAS {
+  left: 30px;
 }
 
-.select-module__small__Fc860 > .select-module__wrapper__wHn5r > .select-module__arrow__hlIMs {
-  top: 4px;
+[data-size='medium'] .select-module__icon__eKwKi + .select-module__item-icon__qWzAS {
+  left: 32px;
 }
 
-.select-module__arrow__hlIMs > svg {
+[data-size='large'] .select-module__icon__eKwKi + .select-module__item-icon__qWzAS {
+  left: 36px;
+}
+
+.select-module__icon__eKwKi > svg,
+.select-module__item-icon__qWzAS > svg {
+  width: 100%;
+  height: 100%;
   fill: var(--theme-icon-primary);
 }
 
+[data-size='small'] .select-module__with-icon__sdr2r.select-module__with-item-icon__j4VL9 > .select-module__input__ajhdt {
+  padding-left: 54px;
+}
+
+[data-size='medium'] .select-module__with-icon__sdr2r.select-module__with-item-icon__j4VL9 > .select-module__input__ajhdt {
+  padding-left: 56px;
+}
+
+[data-size='large'] .select-module__with-icon__sdr2r.select-module__with-item-icon__j4VL9 > .select-module__input__ajhdt {
+  padding-left: 64px;
+}
+
 .select-module__popover-target__utEyc {
   position: absolute;
   bottom: 0;
@@ -773,131 +1150,29 @@
   white-space: nowrap;
 }
 
-.menu-module__item-actions__ecU8y {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-}
-
-.menu-module__divider__kik9c {
-  margin: 8px 12px;
-  font-size: var(--text-overline-size);
-  font-weight: var(--text-overline-weight);
-  line-height: var(--text-overline-height);
-  color: var(--theme-text-inactive);
-  text-transform: uppercase;
-  letter-spacing: var(--text-overline-letter);
-  border-bottom: 1px solid var(--theme-divider);
-}
-
-.dateTime-module__root___CULh {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 320px;
-}
-
-.dateTime-module__full-width__x5Snf {
-  max-width: 100%;
-}
-
-.dateTime-module__medium__btb_E {
-  gap: 8px;
-}
-
-.dateTime-module__small__bywih {
-  gap: 4px;
-}
-
-.dateTime-module__label__FnrxJ {
-  color: var(--theme-text-secondary);
-}
-
-.dateTime-module__wrapper__zlOEC {
-  position: relative;
-  width: 100%;
-}
-
-.dateTime-module__medium__btb_E > .dateTime-module__wrapper__zlOEC {
-  height: 40px;
-}
-
-.dateTime-module__small__bywih > .dateTime-module__wrapper__zlOEC {
-  height: 32px;
-}
-
-.dateTime-module__input__p1lxx {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  font-size: var(--text-subtitle2-size);
-  font-weight: var(--text-subtitle2-weight);
-  line-height: var(--text-subtitle2-height);
-  color: var(--theme-text-primary);
-  letter-spacing: var(--text-subtitle2-letter);
-  cursor: pointer;
-  outline: none;
-  border: none;
-  border-radius: 4px;
-}
-
-.dateTime-module__medium__btb_E > .dateTime-module__wrapper__zlOEC > .dateTime-module__input__p1lxx {
-  height: 40px;
-  padding: 8px 48px 8px 16px;
-}
-
-.dateTime-module__small__bywih > .dateTime-module__wrapper__zlOEC > .dateTime-module__input__p1lxx {
-  height: 32px;
-  padding: 4px 48px 4px 16px;
-}
-
-.dateTime-module__filled__nA6CU > .dateTime-module__input__p1lxx {
-  background-color: var(--theme-input-filled);
-}
-
-.dateTime-module__filled__nA6CU:hover > .dateTime-module__input__p1lxx {
-  background-color: var(--theme-input-filled-hover);
-}
-
-.dateTime-module__filled__nA6CU > .dateTime-module__input__p1lxx:focus {
-  background-color: var(--theme-input-filled-hover);
-}
-
-.dateTime-module__outlined__MCqbp > .dateTime-module__input__p1lxx {
-  outline: 1px solid var(--theme-input-border);
-  background-color: transparent;
-}
-
-.dateTime-module__outlined__MCqbp:hover > .dateTime-module__input__p1lxx {
-  outline-color: var(--theme-input-border-hover);
-}
-
-.dateTime-module__outlined__MCqbp > .dateTime-module__input__p1lxx:focus {
-  outline-color: var(--theme-focus);
-}
-
-.dateTime-module__icon__H9gzS {
-  position: absolute;
-  right: 16px;
-  z-index: 2;
+.menu-module__item-actions__ecU8y {
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
 }
 
-.dateTime-module__medium__btb_E > .dateTime-module__wrapper__zlOEC > .dateTime-module__icon__H9gzS {
-  top: 8px;
+.menu-module__divider__kik9c {
+  margin: 8px 12px;
+  font-size: var(--text-overline-size);
+  font-weight: var(--text-overline-weight);
+  line-height: var(--text-overline-height);
+  color: var(--theme-text-inactive);
+  text-transform: uppercase;
+  letter-spacing: var(--text-overline-letter);
+  border-bottom: 1px solid var(--theme-divider);
 }
 
-.dateTime-module__small__bywih > .dateTime-module__wrapper__zlOEC > .dateTime-module__icon__H9gzS {
-  top: 4px;
+.dateTime-module__input__p1lxx {
+  cursor: pointer;
 }
 
-.dateTime-module__icon__H9gzS > svg {
-  fill: var(--theme-icon-primary);
+.dateTime-module__input__p1lxx:disabled {
+  cursor: default;
 }
 
 .dateTime-module__popover-target__PS8vx {
@@ -1178,122 +1453,54 @@
 }
 
 .colorPicker-module__root__yWPxF {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
   min-width: 162px;
-  max-width: 320px;
-}
-
-.colorPicker-module__medium__zOCNs {
-  gap: 8px;
-}
-
-.colorPicker-module__small___yzV2 {
-  gap: 4px;
-}
-
-.colorPicker-module__label__PknU4 {
-  color: var(--theme-text-secondary);
-}
-
-.colorPicker-module__wrapper__xpXkA {
-  position: relative;
-  width: 100%;
-}
-
-.colorPicker-module__medium__zOCNs > .colorPicker-module__wrapper__xpXkA {
-  height: 40px;
-}
-
-.colorPicker-module__small___yzV2 > .colorPicker-module__wrapper__xpXkA {
-  height: 32px;
 }
 
 .colorPicker-module__input__gaesN {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  font-size: var(--text-subtitle2-size);
-  font-weight: var(--text-subtitle2-weight);
-  line-height: var(--text-subtitle2-height);
-  color: var(--theme-text-primary);
-  letter-spacing: var(--text-subtitle2-letter);
   cursor: pointer;
-  outline: none;
-  border: none;
-  border-radius: 4px;
-}
-
-.colorPicker-module__medium__zOCNs > .colorPicker-module__wrapper__xpXkA > .colorPicker-module__input__gaesN {
-  height: 40px;
-  padding: 8px 48px 8px 48px;
 }
 
-.colorPicker-module__small___yzV2 > .colorPicker-module__wrapper__xpXkA > .colorPicker-module__input__gaesN {
-  height: 32px;
-  padding: 4px 48px 4px 48px;
+.colorPicker-module__input__gaesN:disabled {
+  cursor: default;
 }
 
-.colorPicker-module__icon__IIYmw {
+.colorPicker-module__swatch__MvnQ3 {
   position: absolute;
-  left: 16px;
+  top: 50%;
   z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 14px;
+  height: 14px;
   cursor: pointer;
+  border-radius: 2px;
+  transform: translateY(-50%);
 }
 
-.colorPicker-module__medium__zOCNs > .colorPicker-module__wrapper__xpXkA > .colorPicker-module__icon__IIYmw {
-  top: 8px;
-}
-
-.colorPicker-module__small___yzV2 > .colorPicker-module__wrapper__xpXkA > .colorPicker-module__icon__IIYmw {
-  top: 4px;
-}
-
-.colorPicker-module__icon__IIYmw > svg {
-  fill: var(--theme-icon-primary);
-}
-
-.colorPicker-module__outlined__Itbqh > .colorPicker-module__input__gaesN {
-  outline: 1px solid var(--theme-input-border);
-  background-color: transparent;
-}
-
-.colorPicker-module__outlined__Itbqh:hover > .colorPicker-module__input__gaesN {
-  outline-color: var(--theme-input-border-hover);
+[data-size='small'] .colorPicker-module__swatch__MvnQ3 {
+  left: 6px;
 }
 
-.colorPicker-module__outlined__Itbqh > .colorPicker-module__input__gaesN:focus {
-  outline-color: var(--theme-focus);
+[data-size='medium'] .colorPicker-module__swatch__MvnQ3 {
+  left: 8px;
+  width: 16px;
+  height: 16px;
 }
 
-.colorPicker-module__arrow__iVl5d {
-  position: absolute;
-  right: 16px;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
+[data-size='large'] .colorPicker-module__swatch__MvnQ3 {
+  left: 6px;
+  width: 20px;
+  height: 20px;
 }
 
-.colorPicker-module__medium__zOCNs > .colorPicker-module__wrapper__xpXkA > .colorPicker-module__arrow__iVl5d {
-  top: 8px;
+[data-size='small'] .colorPicker-module__input__gaesN {
+  padding-left: 24px;
 }
 
-.colorPicker-module__small___yzV2 > .colorPicker-module__wrapper__xpXkA > .colorPicker-module__arrow__iVl5d {
-  top: 4px;
+[data-size='medium'] .colorPicker-module__input__gaesN {
+  padding-left: 28px;
 }
 
-.colorPicker-module__arrow__iVl5d > svg {
-  fill: var(--theme-icon-primary);
+[data-size='large'] .colorPicker-module__input__gaesN {
+  padding-left: 34px;
 }
 
 .colorPicker-module__popover-target__M5buG {
@@ -1307,233 +1514,56 @@
 
 .colorPicker-module__popover-content__lql7r {
   max-height: 250px;
-  overflow: auto scroll;
-}
-
-.input-module__root__QfKhR {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 320px;
-}
-
-.input-module__full-width__qXDHU {
-  max-width: 100%;
-}
-
-.input-module__medium__TdcNA {
-  gap: 8px;
-}
-
-.input-module__small__kXkJz {
-  gap: 4px;
-}
-
-.input-module__label__RV8d4 {
-  color: var(--theme-text-secondary);
-}
-
-.input-module__wrapper__acqQv {
-  position: relative;
-  width: 100%;
-}
-
-.input-module__medium__TdcNA > .input-module__wrapper__acqQv {
-  height: 40px;
-}
-
-.input-module__small__kXkJz > .input-module__wrapper__acqQv {
-  height: 32px;
-}
-
-.input-module__input__Xce3x {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  font-size: var(--text-subtitle2-size);
-  font-weight: var(--text-subtitle2-weight);
-  line-height: var(--text-subtitle2-height);
-  color: var(--theme-text-primary);
-  letter-spacing: var(--text-subtitle2-letter);
-  outline: none;
-  border: none;
-  border-radius: 4px;
-}
-
-.input-module__input__Xce3x:disabled {
-  color: var(--theme-text-inactive);
-}
-
-.input-module__input__Xce3x[type='number'] {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-.input-module__input__Xce3x[type='number']::-webkit-inner-spin-button,
-.input-module__input__Xce3x[type='number']::-webkit-outer-spin-button {
-  margin: 0;
-  -webkit-appearance: none;
-}
-
-.input-module__medium__TdcNA > .input-module__wrapper__acqQv > .input-module__input__Xce3x {
-  height: 40px;
-  padding: 8px 16px 8px 16px;
-}
-
-.input-module__small__kXkJz > .input-module__wrapper__acqQv > .input-module__input__Xce3x {
-  height: 32px;
-  padding: 4px 16px 4px 16px;
-}
-
-.input-module__filled___69P0 > .input-module__input__Xce3x {
-  background-color: var(--theme-input-filled);
-}
-
-.input-module__filled___69P0:hover > .input-module__input__Xce3x:not(:disabled):not(:focus) {
-  background-color: var(--theme-input-filled-hover);
-}
-
-.input-module__filled___69P0 > .input-module__input__Xce3x:focus {
-  background-color: var(--theme-input-filled-hover);
-}
-
-.input-module__outlined___LdLU > .input-module__input__Xce3x {
-  outline: 1px solid var(--theme-input-border);
-  background-color: transparent;
-}
-
-.input-module__outlined___LdLU:hover > .input-module__input__Xce3x:not(:disabled):not(:focus) {
-  outline-color: var(--theme-input-border-hover);
-}
-
-.input-module__outlined___LdLU > .input-module__input__Xce3x:focus {
-  outline-color: var(--theme-focus);
-}
-
-.input-module__file-input__Hj1fC {
-  position: absolute;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  opacity: 0;
-}
-
-.input-module__file-display__GKw0F {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.input-module__file-name__AVwRH {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--theme-text-primary);
-  white-space: nowrap;
-}
-
-.input-module__file-name__AVwRH.input-module__placeholder__QpTXt {
-  color: var(--theme-text-inactive);
-}
-
-.input-module__file-display__GKw0F > .input-module__attach-icon__W3URr {
-  flex-shrink: 0;
-  margin-left: 8px;
-  color: var(--theme-text-secondary);
-}
-
-.searchInput-module__root__WAhkl {
-  position: relative;
-  width: 100%;
-  max-width: 320px;
-}
-
-.searchInput-module__medium__ypAHh {
-  height: 40px;
-}
-
-.searchInput-module__small__JmU0u {
-  height: 32px;
-}
-
-.searchInput-module__input__gX5Td {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  font-size: var(--text-subtitle2-size);
-  font-weight: var(--text-subtitle2-weight);
-  line-height: var(--text-subtitle2-height);
-  color: var(--theme-text-primary);
-  letter-spacing: var(--text-subtitle2-letter);
-  outline: none;
-  border: none;
-  border-radius: 4px;
-}
-
-.searchInput-module__medium__ypAHh > .searchInput-module__input__gX5Td {
-  height: 40px;
-  padding: 8px 16px;
-}
-
-.searchInput-module__small__JmU0u > .searchInput-module__input__gX5Td {
-  height: 32px;
-  padding: 4px 16px;
-}
-
-.searchInput-module__with-icon__fx4_g > .searchInput-module__input__gX5Td {
-  padding-left: 48px;
-}
-
-.searchInput-module__icon__zHTol {
-  position: absolute;
-  left: 16px;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  cursor: text;
-}
-
-.searchInput-module__medium__ypAHh > .searchInput-module__icon__zHTol {
-  top: 8px;
 }
 
-.searchInput-module__small__JmU0u > .searchInput-module__icon__zHTol {
-  top: 4px;
+.input-module__input__Xce3x[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
 }
 
-.searchInput-module__icon__zHTol > svg {
-  fill: var(--theme-icon-primary);
+.input-module__input__Xce3x[type='number']::-webkit-inner-spin-button,
+.input-module__input__Xce3x[type='number']::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
 }
 
-.searchInput-module__filled__bFEEy > .searchInput-module__input__gX5Td {
-  background-color: var(--theme-input-filled);
+.input-module__field-icon__OVtdo {
+  cursor: text;
 }
 
-.searchInput-module__filled__bFEEy:hover > .searchInput-module__input__gX5Td {
-  background-color: var(--theme-input-filled-hover);
+.input-module__file-input__Hj1fC {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  opacity: 0;
 }
 
-.searchInput-module__filled__bFEEy > .searchInput-module__input__gX5Td:focus {
-  background-color: var(--theme-input-filled-hover);
+.input-module__file-display__GKw0F {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
-.searchInput-module__outlined__x5bUA > .searchInput-module__input__gX5Td {
-  outline: 1px solid var(--theme-input-border);
-  background-color: transparent;
+.input-module__file-name__AVwRH {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--theme-text-primary);
+  white-space: nowrap;
 }
 
-.searchInput-module__outlined__x5bUA:hover > .searchInput-module__input__gX5Td {
-  outline-color: var(--theme-input-border-hover);
+.input-module__file-name__AVwRH.input-module__placeholder__QpTXt {
+  color: var(--theme-text-inactive);
 }
 
-.searchInput-module__outlined__x5bUA > .searchInput-module__input__gX5Td:focus {
-  outline-color: var(--theme-focus);
+.input-module__file-display__GKw0F > .input-module__attach-icon__W3URr {
+  flex-shrink: 0;
+  margin-left: 8px;
+  color: var(--theme-text-secondary);
 }
 
 .wrapForLabel-module__root__qo0J8 {
@@ -1551,242 +1581,132 @@
   margin-top: 20px;
 }
 
-.multiSelect-module__root__J3jt6 {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 320px;
-}
-
-.multiSelect-module__full-width__LexBp {
-  max-width: 100%;
-}
-
-.multiSelect-module__medium__BTgaQ {
-  gap: 8px;
-}
-
-.multiSelect-module__small__l60qu {
-  gap: 4px;
-}
-
-.multiSelect-module__label__hATiI {
-  color: var(--theme-text-secondary);
-}
+/* Специфика MultiSelect: кнопка очистки, кастомная иконка слева, попап с чеклистом.
+   Общая геометрия и состояния — в FieldShell. */
 
 .multiSelect-module__label-selected-count__gCPqL {
   color: var(--theme-text-secondary);
 }
 
-.multiSelect-module__wrapper__lHCC4 {
-  position: relative;
-  width: 100%;
-}
-
-.multiSelect-module__medium__BTgaQ > .multiSelect-module__wrapper__lHCC4 {
-  height: 40px;
+.multiSelect-module__input__Hk3TU {
+  cursor: pointer;
 }
 
-.multiSelect-module__small__l60qu > .multiSelect-module__wrapper__lHCC4 {
-  height: 32px;
+.multiSelect-module__input__Hk3TU:disabled {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
-.multiSelect-module__input__Hk3TU {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: var(--text-subtitle2-size);
-  font-weight: var(--text-subtitle2-weight);
-  line-height: var(--text-subtitle2-height);
-  color: var(--theme-text-primary);
-  letter-spacing: var(--text-subtitle2-letter);
-  white-space: nowrap;
-  cursor: pointer;
-  outline: none;
-  border: none;
-  border-radius: 4px;
+/* Справа два элемента (очистка + стрелка) — расширяем отступ поля и чипсов */
+[data-size='small'] .multiSelect-module__input__Hk3TU {
+  padding-right: 50px;
 }
 
-.multiSelect-module__medium__BTgaQ > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__input__Hk3TU {
-  height: 40px;
-  padding: 8px 70px 8px 16px;
+[data-size='medium'] .multiSelect-module__input__Hk3TU {
+  padding-right: 56px;
 }
 
-.multiSelect-module__small__l60qu > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__input__Hk3TU {
-  height: 32px;
-  padding: 4px 70px 4px 16px;
+[data-size='large'] .multiSelect-module__input__Hk3TU {
+  padding-right: 64px;
 }
 
-.multiSelect-module__with-icon__eaSrD > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__input__Hk3TU {
-  padding-left: 48px;
+[data-size='small'] .multiSelect-module__chips__CUViE {
+  padding-right: 50px;
 }
 
-.multiSelect-module__with-item-icon__LfhcF > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__input__Hk3TU {
-  padding-left: 48px;
+[data-size='medium'] .multiSelect-module__chips__CUViE {
+  padding-right: 56px;
 }
 
-.multiSelect-module__with-icon__eaSrD.multiSelect-module__with-item-icon__LfhcF > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__input__Hk3TU {
-  padding-left: 80px;
+[data-size='large'] .multiSelect-module__chips__CUViE {
+  padding-right: 64px;
 }
 
+/* Кастомная иконка в левом слоте */
 .multiSelect-module__icon__TnLPX {
   position: absolute;
-  left: 16px;
+  top: 50%;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   cursor: pointer;
+  transform: translateY(-50%);
 }
 
-.multiSelect-module__medium__BTgaQ > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__icon__TnLPX {
-  top: 8px;
-}
-
-.multiSelect-module__small__l60qu > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__icon__TnLPX {
-  top: 4px;
+[data-size='small'] .multiSelect-module__icon__TnLPX {
+  left: 6px;
 }
 
-.multiSelect-module__icon__TnLPX > svg {
-  fill: var(--theme-icon-primary);
+[data-size='medium'] .multiSelect-module__icon__TnLPX {
+  left: 8px;
 }
 
-.multiSelect-module__item-icon__TRHVT {
-  position: absolute;
-  left: 16px;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+[data-size='large'] .multiSelect-module__icon__TnLPX {
+  left: 4px;
   width: 24px;
   height: 24px;
-  cursor: pointer;
-}
-
-.multiSelect-module__icon__TnLPX + .multiSelect-module__item-icon__TRHVT {
-  left: 48px;
-}
-
-.multiSelect-module__medium__BTgaQ > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__item-icon__TRHVT {
-  top: 8px;
-}
-
-.multiSelect-module__small__l60qu > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__item-icon__TRHVT {
-  top: 4px;
 }
 
-.multiSelect-module__item-icon__TRHVT > svg {
+.multiSelect-module__icon__TnLPX > svg {
+  width: 100%;
+  height: 100%;
   fill: var(--theme-icon-primary);
 }
 
-.multiSelect-module__filled__Hz9me > .multiSelect-module__input__Hk3TU {
-  background-color: var(--theme-input-filled);
-}
-
-.multiSelect-module__filled__Hz9me:hover > .multiSelect-module__input__Hk3TU {
-  background-color: var(--theme-input-filled-hover);
-}
-
-.multiSelect-module__filled__Hz9me > .multiSelect-module__input__Hk3TU:focus {
-  background-color: var(--theme-input-filled-hover);
-}
-
-.multiSelect-module__outlined__PSPU8 > .multiSelect-module__input__Hk3TU {
-  outline: 1px solid var(--theme-input-border);
-  background-color: transparent;
-}
-
-.multiSelect-module__outlined__PSPU8:hover > .multiSelect-module__input__Hk3TU {
-  outline-color: var(--theme-input-border-hover);
-}
-
-.multiSelect-module__outlined__PSPU8 > .multiSelect-module__input__Hk3TU:focus {
-  outline-color: var(--theme-focus);
-}
-
+/* Кнопка очистки выбранного */
 .multiSelect-module__clear__CwQiH {
   position: absolute;
-  right: 40px;
+  top: 50%;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
-  height: 26px;
+  width: 20px;
+  height: 20px;
   cursor: pointer;
-  border-radius: 12px;
+  border-radius: 50%;
+  transform: translateY(-50%);
 }
+
 .multiSelect-module__clear__CwQiH:hover {
   background-color: var(--theme-icon-hover);
 }
 
 .multiSelect-module__clear__CwQiH > svg {
+  width: 16px;
+  height: 16px;
   fill: var(--theme-icon-primary);
 }
 
-.multiSelect-module__medium__BTgaQ > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__clear__CwQiH {
-  top: 6px;
+[data-size='small'] .multiSelect-module__clear__CwQiH {
+  right: 26px;
 }
 
-.multiSelect-module__small__l60qu > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__clear__CwQiH {
-  top: 2px;
+[data-size='medium'] .multiSelect-module__clear__CwQiH {
+  right: 32px;
 }
 
-.multiSelect-module__arrow__jafPv {
-  position: absolute;
-  right: 16px;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+[data-size='large'] .multiSelect-module__clear__CwQiH {
+  right: 32px;
   width: 24px;
   height: 24px;
-  cursor: pointer;
-}
-
-.multiSelect-module__medium__BTgaQ > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__arrow__jafPv {
-  top: 8px;
 }
 
-.multiSelect-module__small__l60qu > .multiSelect-module__wrapper__lHCC4 > .multiSelect-module__arrow__jafPv {
-  top: 4px;
-}
-
-.multiSelect-module__arrow__jafPv > svg {
-  fill: var(--theme-icon-primary);
+[data-size='large'] .multiSelect-module__clear__CwQiH > svg {
+  width: 20px;
+  height: 20px;
 }
 
 .multiSelect-module__popover-target__x51qe {
   position: absolute;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   z-index: 1;
-  width: 100%;
-  height: 0;
-}
-
-.multiSelect-module__input__Hk3TU:disabled,
-.multiSelect-module__input__Hk3TU[disabled],
-.multiSelect-module__input__Hk3TU:disabled + .multiSelect-module__arrow__jafPv,
-.multiSelect-module__input__Hk3TU[disabled] + .multiSelect-module__arrow__jafPv {
-  color: var(--theme-text-inactive);
   pointer-events: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-.multiSelect-module__outlined__PSPU8:hover > .multiSelect-module__input__Hk3TU:disabled,
-.multiSelect-module__outlined__PSPU8:hover > .multiSelect-module__input__Hk3TU.multiSelect-module__input__Hk3TU[disabled] {
-  outline-color: var(--theme-input-border);
-}
-
-.multiSelect-module__filled__Hz9me .multiSelect-module__input__Hk3TU:disabled,
-.multiSelect-module__filled__Hz9me .multiSelect-module__input__Hk3TU[disabled] {
-  background-color: var(--theme-grey-700);
 }
 
 .multiSelect-module__popover-content__p_jyb {
@@ -2731,9 +2651,9 @@
 .card-module__root__uGlLT {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 0;
   height: 100%;
-  padding: 16px;
+  padding: 0;
   border-radius: 4px;
 }
 
@@ -2742,6 +2662,12 @@
   gap: 16px;
   align-items: center;
   justify-content: space-between;
+  padding: 16px;
+  background-color: var(--theme-overlay-4);
+}
+
+.card-module__root__uGlLT.card-module__small__liJkd .card-module__header__NdV6G {
+  padding: 8px 8px 4px 8px;
 }
 
 .card-module__actions__ctfFt {
@@ -2750,102 +2676,116 @@
   align-items: center;
 }
 
-.chip-module__root__QN7P0 {
+.card-module__body__P4SYk {
   padding: 0;
+}
+
+.chip-module__root__QN7P0 {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
   overflow: hidden;
-  font-size: var(--text-button-size);
-  font-weight: var(--text-button-weight);
-  line-height: var(--text-button-height);
-  letter-spacing: var(--text-button-letter);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--theme-text-primary);
+  letter-spacing: 0.25px;
   -webkit-user-select: none;
   user-select: none;
-  outline: none;
-  border-radius: 9999px;
+  border-radius: 16px;
 }
 
-.chip-module__state-layer__AGbiC {
-  display: inline-flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  background-color: transparent;
+.chip-module__medium__RRnyf {
+  height: 32px;
+  padding: 4px 12px;
 }
 
-.chip-module__root__QN7P0:hover > .chip-module__state-layer__AGbiC {
-  background-color: var(--theme-overlay-8);
+.chip-module__medium__RRnyf.chip-module__with-icon__ORESD.chip-module__icon-left__LhniG {
+  padding: 4px 12px 4px 4px;
 }
 
-.chip-module__root__QN7P0:focus > .chip-module__state-layer__AGbiC {
-  background-color: var(--theme-overlay-12);
+.chip-module__medium__RRnyf.chip-module__with-icon__ORESD.chip-module__icon-right__CnqJ6 {
+  padding: 4px 4px 4px 12px;
 }
 
-.chip-module__root__QN7P0:active > .chip-module__state-layer__AGbiC,
-.chip-module__root__QN7P0.chip-module__active__wQcQS > .chip-module__state-layer__AGbiC {
-  background-color: var(--theme-overlay-12);
+.chip-module__small__UbquU {
+  height: 24px;
+  padding: 2px 8px;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: normal;
 }
 
-.chip-module__filled__LKP4O {
-  color: var(--theme-text-button-invert);
-  background-color: var(--theme-focus);
+.chip-module__small__UbquU.chip-module__with-icon__ORESD.chip-module__icon-left__LhniG {
+  padding: 2px 8px 2px 2px;
 }
 
-.chip-module__outlined__HHje4 {
-  color: var(--theme-focus);
-  outline: 1px solid var(--theme-grey-500);
-  background-color: transparent;
+.chip-module__small__UbquU.chip-module__with-icon__ORESD.chip-module__icon-right__CnqJ6 {
+  padding: 2px 2px 2px 8px;
 }
 
-.chip-module__outlined__HHje4:focus {
-  outline-color: var(--theme-focus);
+.chip-module__filled__LKP4O {
+  background-color: var(--theme-chip-accent-bg);
 }
 
-.chip-module__filled__LKP4O.chip-module__secondary__yquCM {
-  color: var(--theme-text-button-primary);
-  background-color: var(--theme-overlay-12);
+.chip-module__filled__LKP4O.chip-module__clickable__dOcCr:hover {
+  background-color: var(--theme-chip-accent-hover);
 }
 
-.chip-module__outlined__HHje4.chip-module__secondary__yquCM {
-  color: var(--theme-text-secondary);
+.chip-module__filled__LKP4O.chip-module__clickable__dOcCr:focus-visible {
+  outline: none;
+  background-color: var(--theme-chip-accent-focus);
 }
 
-.chip-module__clickable__dOcCr {
-  cursor: pointer;
+.chip-module__filled__LKP4O.chip-module__clickable__dOcCr:active {
+  background-color: var(--theme-chip-accent-active);
 }
 
-.chip-module__medium__RRnyf,
-.chip-module__medium__RRnyf > .chip-module__state-layer__AGbiC {
-  height: 32px;
+.chip-module__filled__LKP4O.chip-module__secondary__yquCM {
+  background-color: var(--theme-chip-subtle-bg);
 }
 
-.chip-module__small__UbquU,
-.chip-module__small__UbquU > .chip-module__state-layer__AGbiC {
-  height: 24px;
+.chip-module__filled__LKP4O.chip-module__secondary__yquCM.chip-module__clickable__dOcCr:hover {
+  background-color: var(--theme-chip-subtle-hover);
 }
 
-.chip-module__medium__RRnyf > .chip-module__state-layer__AGbiC {
-  padding: 0 16px;
+.chip-module__filled__LKP4O.chip-module__secondary__yquCM.chip-module__clickable__dOcCr:focus-visible {
+  background-color: var(--theme-chip-subtle-focus);
 }
 
-.chip-module__small__UbquU > .chip-module__state-layer__AGbiC {
-  padding: 0 12px;
+.chip-module__outlined__HHje4 {
+  outline: 1px solid var(--theme-input-border);
+  outline-offset: -1px;
+  background-color: transparent;
+}
+
+.chip-module__outlined__HHje4.chip-module__clickable__dOcCr:hover {
+  outline-color: var(--theme-input-border-hover);
+  background-color: var(--theme-selection-hover);
 }
 
-.chip-module__medium__RRnyf.chip-module__with-icon__ORESD > .chip-module__state-layer__AGbiC {
-  padding: 0 4px 0 16px;
+.chip-module__outlined__HHje4.chip-module__clickable__dOcCr:focus-visible {
+  outline: 2px solid var(--theme-focus);
+  outline-offset: -2px;
 }
 
-.chip-module__small__UbquU.chip-module__with-icon__ORESD > .chip-module__state-layer__AGbiC {
-  padding: 0 4px 0 12px;
+.chip-module__outlined__HHje4.chip-module__secondary__yquCM {
+  color: var(--theme-text-secondary);
 }
 
-.chip-module__medium__RRnyf.chip-module__with-icon__ORESD.chip-module__icon-left__LhniG > .chip-module__state-layer__AGbiC {
-  padding: 0 16px 0 4px;
+.chip-module__clickable__dOcCr {
+  cursor: pointer;
 }
 
-.chip-module__small__UbquU.chip-module__with-icon__ORESD.chip-module__icon-left__LhniG > .chip-module__state-layer__AGbiC {
-  padding: 0 12px 0 4px;
+.chip-module__label__RySGy {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .chip-module__icon__yybCP {
@@ -2860,11 +2800,10 @@
   background: none;
   border: none;
   border-radius: 50%;
-  transition: background-color 0.2s;
 }
 
-.chip-module__icon__yybCP.chip-module__icon-clickable__BPoAa {
-  cursor: pointer;
+.chip-module__icon-right-slot__p8bmk {
+  margin-left: auto;
 }
 
 .chip-module__medium__RRnyf .chip-module__icon__yybCP {
@@ -2877,30 +2816,26 @@
   height: 18px;
 }
 
-.chip-module__icon__yybCP.chip-module__icon-clickable__BPoAa:hover {
-  background-color: var(--theme-overlay-8);
-}
-
-.chip-module__icon__yybCP.chip-module__icon-clickable__BPoAa:focus {
-  background-color: var(--theme-overlay-12);
+.chip-module__icon__yybCP > svg {
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
 }
 
-.chip-module__icon__yybCP.chip-module__icon-clickable__BPoAa:active {
-  background-color: var(--theme-overlay-12);
+.chip-module__icon-clickable__BPoAa {
+  cursor: pointer;
 }
 
-.chip-module__label__RySGy {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
+.chip-module__icon-clickable__BPoAa:hover {
+  background-color: var(--theme-icon-hover);
 }
 
-.chip-module__icon-left__LhniG .chip-module__icon__yybCP {
-  order: -1;
+.chip-module__icon-clickable__BPoAa:focus-visible {
+  background-color: var(--theme-icon-hover-on-selected);
 }
 
-.chip-module__icon-right__CnqJ6 .chip-module__icon__yybCP {
-  order: 1;
+.chip-module__icon-clickable__BPoAa:active {
+  background-color: var(--theme-icon-hover-on-selected);
 }