amis 1.9.1-beta.18 → 1.9.1-beta.22

package/lib/store/table.d.ts

@@ -459,7 +459,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -866,7 +868,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -1282,7 +1286,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -1689,7 +1695,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -2100,7 +2108,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -2507,7 +2517,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -2918,7 +2930,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -3325,7 +3339,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -3646,7 +3662,12 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
             trimValues: () => void;
             submit: (fn?: ((values: object) => Promise<any>) | undefined, hooks?: (() => Promise<any>)[] | undefined, failedMessage?: string | undefined, validateErrCb?: (() => void) | undefined) => Promise<any>;
             validate: (hooks?: (() => Promise<any>)[] | undefined, forceValidate?: boolean | undefined) => Promise<boolean>;
-            validateFields: (fields: string[]) => Promise<boolean>;
+            validateFields: (fields: (string | {
+                name: string;
+                rules: {
+                    [propName: string]: any;
+                };
+            })[]) => Promise<boolean>;
             clearErrors: () => void;
             saveRemote: (api: import("../types").Api, data?: object | undefined, options?: import("../types").fetchOptions | undefined) => Promise<any>;
             reset: (cb?: ((data: any) => void) | undefined, resetData?: boolean) => void;
@@ -3847,7 +3868,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -4254,7 +4277,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -4670,7 +4695,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -5077,7 +5104,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -5488,7 +5517,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -5895,7 +5926,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -6306,7 +6339,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -6713,7 +6748,9 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
                     validateOnChange?: boolean | undefined;
                     label?: string | undefined;
                 }) => void;
-                validate: (data: Object, hook?: any) => Promise<boolean>;
+                validate: (data: Object, hook?: any, customRules?: {
+                    [propName: string]: any;
+                } | undefined) => Promise<boolean>;
                 setError: (msg: string | string[], tag?: string) => void;
                 addError: (msg: string | (string | {
                     msg: string;
@@ -7034,7 +7071,12 @@ export declare const TableStore: import("mobx-state-tree").IModelType<{
             trimValues: () => void;
             submit: (fn?: ((values: object) => Promise<any>) | undefined, hooks?: (() => Promise<any>)[] | undefined, failedMessage?: string | undefined, validateErrCb?: (() => void) | undefined) => Promise<any>;
             validate: (hooks?: (() => Promise<any>)[] | undefined, forceValidate?: boolean | undefined) => Promise<boolean>;
-            validateFields: (fields: string[]) => Promise<boolean>;
+            validateFields: (fields: (string | {
+                name: string;
+                rules: {
+                    [propName: string]: any;
+                };
+            })[]) => Promise<boolean>;
             clearErrors: () => void;
             saveRemote: (api: import("../types").Api, data?: object | undefined, options?: import("../types").fetchOptions | undefined) => Promise<any>;
             reset: (cb?: ((data: any) => void) | undefined, resetData?: boolean) => void;

package/lib/themes/ang-ie11.css

@@ -16586,7 +16586,7 @@ input[type=button].a-Button--block {
   background: transparent !important;
 }
 .a-ScheduleCalendar .rdt .rdtPicker td.rdtActive:hover {
-  background: #F7F7F9;
+  background: #f7f7f9;
 }
 
 .a-ScheduleCalendar-large {
@@ -22815,6 +22815,7 @@ input[type=button].a-Button--block {
   margin-right: 0.25rem;
   margin-bottom: 0.125rem;
   user-select: none;
+  border-radius: 0.125rem;
 }
 .a-ResultBox-value > a {
   cursor: pointer;
@@ -22867,6 +22868,25 @@ input[type=button].a-Button--block {
 .a-ResultBox.a-TransferDropDown > .a-ResultBox-value:hover {
   background: #d1d5db;
 }
+.a-ResultBox-overflow-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc( (1.5rem + 0.125rem) * 5 );
+}
+.a-ResultBox-overflow.a-Tooltip--dark .a-ResultBox-overflow-wrapper .a-ResultBox-value {
+  color: #fff;
+  background-color: #46474f;
+}
+.a-ResultBox-overflow.a-Tooltip--dark .a-ResultBox-overflow-wrapper .a-ResultBox-value:hover {
+  background-color: #b8babf;
+}
+.a-ResultBox-overflow.a-Tooltip--dark .a-ResultBox-overflow-wrapper .a-ResultBox-value > a {
+  color: #e9e9e9;
+}
 .a-ResultBox.is-mobile {
   min-height: calc(1.4285714286 * 1rem);
   border: none;
@@ -25040,6 +25060,9 @@ input.a-TextControl-input-password {
 .a-TableSelection .a-Table-content {
   border-top: 0.0625rem solid #d1d5db;
 }
+.a-TableSelection .a-Table-table > tbody > tr {
+  cursor: pointer;
+}
 .a-TableSelection .a-Table-table > thead > tr > th,
 .a-TableSelection .a-Table-table > tbody > tr > td {
   font-size: 0.75rem;
@@ -25652,6 +25675,7 @@ input.a-TextControl-input-password {
 
 .a-Select {
   display: inline-flex;
+  /* select 标签样式 */
   vertical-align: middle;
   text-align: left;
   align-items: center;
@@ -25684,6 +25708,9 @@ input.a-TextControl-input-password {
 .a-Select:focus {
   box-shadow: none;
 }
+.a-Select .a-PopOver.a-Select-popover .a-Select-menu {
+  overflow-x: hidden;
+}
 .a-Select .a-PopOver.a-Select-popover .a-Select-menu .a-Select-option {
   height: 2rem;
   line-height: 1.375rem;
@@ -25903,6 +25930,15 @@ input.a-TextControl-input-password {
 .a-Select-option.is-highlight > a {
   display: block;
 }
+.a-Select-option .a-Select-option-content,
+.a-Select-option .a-Select-option-content > span > div {
+  flex: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  max-width: 100%;
+}
 .a-Select-noResult {
   color: #99a6ad;
   line-height: 1.4285714286;
@@ -25954,6 +25990,51 @@ input.a-TextControl-input-password {
 .a-Select-popup {
   height: 20rem;
 }
+.a-Select-overflow-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc( ( 1.4285714286 * 0.875rem - 0.125rem + 0.25rem ) * 5 );
+}
+.a-Select-overflow-wrapper .a-Select-value {
+  position: static;
+  white-space: normal;
+  user-select: none;
+  line-height: calc( 1.4285714286 * 0.875rem - 0.125rem );
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0.75rem;
+  background: #e5e7eb;
+  border: 0.0625rem solid var(--Form-select-value-borderColor);
+  border-radius: 0.125rem;
+  margin-right: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.a-Select-overflow-wrapper .a-Select-value:hover {
+  background-color: #d1d5db;
+}
+.a-Select-overflow-wrapper .a-Select-valueLabel {
+  display: inline-block;
+  max-width: 7.5rem;
+  padding: 0 0.25rem;
+  overflow: hidden;
+  vertical-align: top;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.a-Select-overflow.a-Tooltip--dark .a-Select-overflow-wrapper .a-Select-value {
+  background-color: #46474f;
+  border: none;
+}
+.a-Select-overflow.a-Tooltip--dark .a-Select-overflow-wrapper .a-Select-value:hover {
+  background-color: #b8babf;
+}
+.a-Select-overflow.a-Tooltip--dark .a-Select-overflow-wrapper .a-Select-value .a-Select-valueIcon {
+  color: #e9e9e9;
+}
 
 .a-Select-popover {
   margin-top: calc(0.0625rem * -1);
@@ -26588,7 +26669,7 @@ input.a-TextControl-input-password {
 .a-DatePicker-shortcut a {
   font-size: 0.75rem;
   cursor: pointer;
-  color: #151B26;
+  color: #151b26;
   text-decoration: none;
 }
 .a-DatePicker-shortcut a:hover {
@@ -26703,7 +26784,7 @@ input.a-TextControl-input-password {
 .rdt .rdtPicker td.rdtMinute:hover,
 .rdt .rdtPicker td.rdtSecond:hover,
 .rdt .rdtPicker .rdtTimeToggle:hover {
-  background: #F7F7F9;
+  background: #f7f7f9;
 }
 .rdt .rdtPicker td.rdtBetween {
   background: rgba(35, 183, 229, 0.1);
@@ -26732,7 +26813,7 @@ input.a-TextControl-input-password {
 }
 .rdt .rdtPicker td.rdtDisabled > span,
 .rdt .rdtPicker td.rdtDisabled:hover > span {
-  background: #F7F7F9;
+  background: #f7f7f9;
 }
 .rdt thead tr:first-child th {
   cursor: default;
@@ -26967,7 +27048,7 @@ input.a-TextControl-input-password {
   cursor: pointer !important;
   width: 1rem;
   padding: 0;
-  color: #84868C;
+  color: #84868c;
   font-size: 1.25rem;
   text-decoration: none;
   font-family: auto;
@@ -27046,7 +27127,7 @@ td.rdtYear.rdtDisabled,
 td.rdtYear.rdtDisabled:hover,
 td.rdtQuarter.rdtDisabled,
 td.rdtQuarter.rdtDisabled:hover {
-  background: #F7F7F9;
+  background: #f7f7f9;
   color: #B8BABF;
 }
 

package/lib/themes/ang.css

@@ -369,8 +369,8 @@
   --Calendar-cell-bg: var(--white);
   --Calendar-cell-onActive-bg: var(--info);
   --Calendar-cell-onBetween-bg: rgba(35, 183, 229, 0.1);
-  --Calendar-cell-onDisabled-bg: #F7F7F9;
-  --Calendar-cell-onHover-bg: #F7F7F9;
+  --Calendar-cell-onDisabled-bg: #f7f7f9;
+  --Calendar-cell-onHover-bg: #f7f7f9;
   --Calendar-color: #151b26;
   --Calendar-fontSize: var(--fontSizeSm);
   --Calendar-input-borderColor: var(--borderColor);
@@ -387,7 +387,7 @@
           var(--Calendar-input-fontSize)
       ) / 2
   );
-  --Calendar-shortcut-color: #151B26;
+  --Calendar-shortcut-color: #151b26;
   --Calendar-shortcut-decoration: none;
   --Calendar-shortcut-onHover-color: #1485a8;
   --Calendar-shortcut-onHover-decoration: none;
@@ -553,7 +553,7 @@
   --DatePicker-borderWidth: var(--Form-input-borderWidth);
   --DatePicker-color: #151b26;
   --DatePicker-header-onHover-color: #1485a8;
-  --DatePicker-arrow-color: #84868C;
+  --DatePicker-arrow-color: #84868c;
   --DatePicker-fontSize: var(--fontSizeSm);
   --DatePicker-header-select-borderColor: #fff;
   --DatePicker-height: var(--Form-input-height);
@@ -732,8 +732,10 @@
   --Form-select-popoverGap: 0;
   --Form-select-search-height: var(--Form-select-menu-height);
   --Form-select-value-bgColor: var(--Form-input-onDisabled-bg);
+  --Form-select-value-bgColor--dark: #46474f;
   --Form-select-value-borderColor: var(--Form-select-value-borderColor);
   --Form-select-valueIcon-color: var(--Form-select-valueIcon-color);
+  --Form-select-valueIcon-color--dark: #e9e9e9;
   --Form-select-valueIcon-onHover-color: var(--Form-select-color);
   --Form-selectOption-height: var(--Form-input-height);
   --Form-selectValue-bg: #d9f3fb;
@@ -1131,11 +1133,14 @@
   --Remark-onHover-borderColor: var(--primary);
   --Remark-onHover-iconColor: #fff;
   --Remark-width: 1rem;
+  --ResultBox-tag-height: 1.5rem;
+  --ResultBox-tag-marginBottom: 0.125rem;
   --ResultBox-icon--onDisabled-color: #ebebeb;
   --ResultBox-icon--onHover-color: #666666;
   --ResultBox-icon-color: #999;
   --ResultBox-value--onDisabled-color: #cccccc;
   --ResultBox-value--onHover-bg: rgba(0, 145, 255, 0.1);
+  --ResultBox-value--onHover-bg--dark: #b8babf;
   --ResultBox-value-bg: #f5f5f5;
   --ResultBox-value-color: #000;
   --ResultBox-value-clear-bg: #d4d6d9;
@@ -24205,13 +24210,14 @@ input[type=button].a-Button--block {
   color: var(--ResultBox-value-color);
   font-size: var(--Form-input-fontSize);
   padding: 0 var(--gap-xs);
-  min-height: 1.5rem;
+  min-height: var(--ResultBox-tag-height);
   flex-wrap: nowrap;
   display: inline-flex;
   align-items: center;
   margin-right: var(--gap-xs);
-  margin-bottom: 0.125rem;
+  margin-bottom: var(--ResultBox-tag-marginBottom);
   user-select: none;
+  border-radius: 0.125rem;
 }
 .a-ResultBox-value > a {
   cursor: pointer;
@@ -24264,6 +24270,25 @@ input[type=button].a-Button--block {
 .a-ResultBox.a-TransferDropDown > .a-ResultBox-value:hover {
   background: var(--Form-selectValue-onHover-bgColor);
 }
+.a-ResultBox-overflow-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc( (var(--ResultBox-tag-height) + var(--ResultBox-tag-marginBottom)) * 5 );
+}
+.a-ResultBox-overflow.a-Tooltip--dark .a-ResultBox-overflow-wrapper .a-ResultBox-value {
+  color: var(--white);
+  background-color: var(--Form-select-value-bgColor--dark);
+}
+.a-ResultBox-overflow.a-Tooltip--dark .a-ResultBox-overflow-wrapper .a-ResultBox-value:hover {
+  background-color: var(--ResultBox-value--onHover-bg--dark);
+}
+.a-ResultBox-overflow.a-Tooltip--dark .a-ResultBox-overflow-wrapper .a-ResultBox-value > a {
+  color: var(--Form-select-valueIcon-color--dark);
+}
 .a-ResultBox.is-mobile {
   min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
   border: none;
@@ -26386,6 +26411,9 @@ input.a-TextControl-input-password {
 .a-TableSelection .a-Table-content {
   border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
 }
+.a-TableSelection .a-Table-table > tbody > tr {
+  cursor: pointer;
+}
 .a-TableSelection .a-Table-table > thead > tr > th,
 .a-TableSelection .a-Table-table > tbody > tr > td {
   font-size: var(--fontSizeSm);
@@ -26988,6 +27016,7 @@ input.a-TextControl-input-password {
 
 .a-Select {
   display: inline-flex;
+  /* select 标签样式 */
   vertical-align: middle;
   text-align: left;
   align-items: center;
@@ -27020,6 +27049,9 @@ input.a-TextControl-input-password {
 .a-Select:focus {
   box-shadow: var(--Form-select-onFocus-boxShadow);
 }
+.a-Select .a-PopOver.a-Select-popover .a-Select-menu {
+  overflow-x: hidden;
+}
 .a-Select .a-PopOver.a-Select-popover .a-Select-menu .a-Select-option {
   height: 2rem;
   line-height: 1.375rem;
@@ -27239,6 +27271,15 @@ input.a-TextControl-input-password {
 .a-Select-option.is-highlight > a {
   display: block;
 }
+.a-Select-option .a-Select-option-content,
+.a-Select-option .a-Select-option-content > span > div {
+  flex: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  max-width: 100%;
+}
 .a-Select-noResult {
   color: var(--Form-select-placeholderColor);
   line-height: var(--Form-input-lineHeight);
@@ -27290,6 +27331,51 @@ input.a-TextControl-input-password {
 .a-Select-popup {
   height: 20rem;
 }
+.a-Select-overflow-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc( ( var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem + var(--gap-xs) ) * 5 );
+}
+.a-Select-overflow-wrapper .a-Select-value {
+  position: static;
+  white-space: normal;
+  user-select: none;
+  line-height: calc( var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem );
+  display: inline-block;
+  vertical-align: middle;
+  font-size: var(--Form-selectValue-fontSize);
+  background: var(--Form-select-value-bgColor);
+  border: 0.0625rem solid var(--Form-select-value-borderColor);
+  border-radius: 0.125rem;
+  margin-right: var(--gap-xs);
+  margin-bottom: var(--gap-xs);
+}
+.a-Select-overflow-wrapper .a-Select-value:hover {
+  background-color: var(--Form-selectValue-onHover-bgColor);
+}
+.a-Select-overflow-wrapper .a-Select-valueLabel {
+  display: inline-block;
+  max-width: var(--Form-valueLabel-maxWidth);
+  padding: 0 var(--gap-xs);
+  overflow: hidden;
+  vertical-align: top;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.a-Select-overflow.a-Tooltip--dark .a-Select-overflow-wrapper .a-Select-value {
+  background-color: var(--Form-select-value-bgColor--dark);
+  border: none;
+}
+.a-Select-overflow.a-Tooltip--dark .a-Select-overflow-wrapper .a-Select-value:hover {
+  background-color: var(--ResultBox-value--onHover-bg--dark);
+}
+.a-Select-overflow.a-Tooltip--dark .a-Select-overflow-wrapper .a-Select-value .a-Select-valueIcon {
+  color: var(--Form-select-valueIcon-color--dark);
+}
 
 .a-Select-popover {
   margin-top: calc(var(--Form-select-outer-borderWidth) * -1);