diff --git a/packages/devextreme-angular/src/ui/box/index.ts b/packages/devextreme-angular/src/ui/box/index.ts
index bd5ff813d026..620e14bcbbb4 100644
--- a/packages/devextreme-angular/src/ui/box/index.ts
+++ b/packages/devextreme-angular/src/ui/box/index.ts
@@ -25,7 +25,6 @@ import {
 export { ExplicitTypes } from 'devextreme/ui/box';
 
 import DevExpress from 'devextreme/bundles/dx.all';
-import { Mode } from 'devextreme/common';
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
 import { BoxDirection, ContentReadyEvent, CrosswiseDistribution, DisposingEvent, Distribution, dxBoxOptions, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent } from 'devextreme/ui/box';
@@ -189,10 +188,10 @@ export class DxBoxComponent<TItem = any, TKey = any> extends DxComponent impleme
     
      */
     @Input()
-    get items(): Array<string | any | { baseSize?: Mode | number, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }> {
+    get items(): Array<string | any | { baseSize?: number | string, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }> {
         return this._getOption('items');
     }
-    set items(value: Array<string | any | { baseSize?: Mode | number, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }>) {
+    set items(value: Array<string | any | { baseSize?: number | string, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }>) {
         this._setOption('items', value);
     }
 
@@ -380,7 +379,7 @@ export class DxBoxComponent<TItem = any, TKey = any> extends DxComponent impleme
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() itemsChange: EventEmitter<Array<string | any | { baseSize?: Mode | number, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }>>;
+    @Output() itemsChange: EventEmitter<Array<string | any | { baseSize?: number | string, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }>>;
 
     /**
     
diff --git a/packages/devextreme-angular/src/ui/nested/base/box-options.ts b/packages/devextreme-angular/src/ui/nested/base/box-options.ts
index 961bd902204e..317c4dd8ede8 100644
--- a/packages/devextreme-angular/src/ui/nested/base/box-options.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/box-options.ts
@@ -6,7 +6,6 @@ import {
 } from '@angular/core';
 
 import DevExpress from 'devextreme/bundles/dx.all';
-import { Mode } from 'devextreme/common';
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
 import { BoxDirection, ContentReadyEvent, CrosswiseDistribution, DisposingEvent, Distribution, dxBoxOptions, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent } from 'devextreme/ui/box';
@@ -78,10 +77,10 @@ export abstract class DxoBoxOptions extends NestedOption {
         this._setOption('itemHoldTimeout', value);
     }
 
-    get items(): Array<string | any | { baseSize?: Mode | number, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }> {
+    get items(): Array<string | any | { baseSize?: number | string, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }> {
         return this._getOption('items');
     }
-    set items(value: Array<string | any | { baseSize?: Mode | number, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }>) {
+    set items(value: Array<string | any | { baseSize?: number | string, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }>) {
         this._setOption('items', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts b/packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts
index 70307db264be..71e8dc499069 100644
--- a/packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts
@@ -6,7 +6,7 @@ import {
 } from '@angular/core';
 
 import DevExpress from 'devextreme/bundles/dx.all';
-import { ButtonStyle, ButtonType, HorizontalAlignment, Mode, ToolbarItemComponent, ToolbarItemLocation, VerticalAlignment } from 'devextreme/common';
+import { ButtonStyle, ButtonType, HorizontalAlignment, ToolbarItemComponent, ToolbarItemLocation, VerticalAlignment } from 'devextreme/common';
 import { dxBoxOptions } from 'devextreme/ui/box';
 import { dxButtonOptions } from 'devextreme/ui/button';
 import { DataGridPredefinedToolbarItem } from 'devextreme/ui/data_grid';
@@ -101,10 +101,10 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('type', value);
     }
 
-    get baseSize(): Mode | number {
+    get baseSize(): number | string {
         return this._getOption('baseSize');
     }
-    set baseSize(value: Mode | number) {
+    set baseSize(value: number | string) {
         this._setOption('baseSize', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/box.ts b/packages/devextreme-angular/src/ui/nested/box.ts
index b702547d1e14..a900c6fab0d8 100644
--- a/packages/devextreme-angular/src/ui/nested/box.ts
+++ b/packages/devextreme-angular/src/ui/nested/box.ts
@@ -19,7 +19,6 @@ import {
 
 
 
-import { Mode } from 'devextreme/common';
 import { dxBoxOptions } from 'devextreme/ui/box';
 
 import {
@@ -66,7 +65,7 @@ export class DxoBoxComponent extends DxoBoxOptions implements OnDestroy, OnInit
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() itemsChange: EventEmitter<Array<string | any | { baseSize?: Mode | number, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }>>;
+    @Output() itemsChange: EventEmitter<Array<string | any | { baseSize?: number | string, box?: dxBoxOptions | undefined, disabled?: boolean, html?: string, ratio?: number, shrink?: number, template?: any, text?: string, visible?: boolean }>>;
     protected get _optionPath() {
         return 'box';
     }
diff --git a/packages/devextreme-angular/src/ui/nested/col-dxi.ts b/packages/devextreme-angular/src/ui/nested/col-dxi.ts
index 40e216e69afd..315e09787b58 100644
--- a/packages/devextreme-angular/src/ui/nested/col-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/col-dxi.ts
@@ -12,7 +12,6 @@ import {
 
 
 
-import { Mode } from 'devextreme/common';
 
 import {
     NestedOptionHost,
@@ -28,10 +27,10 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
 })
 export class DxiColComponent extends CollectionNestedOption {
     @Input()
-    get baseSize(): Mode | number {
+    get baseSize(): number | string {
         return this._getOption('baseSize');
     }
-    set baseSize(value: Mode | number) {
+    set baseSize(value: number | string) {
         this._setOption('baseSize', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/nested/row-dxi.ts b/packages/devextreme-angular/src/ui/nested/row-dxi.ts
index bc614e05a957..9a9db24792ae 100644
--- a/packages/devextreme-angular/src/ui/nested/row-dxi.ts
+++ b/packages/devextreme-angular/src/ui/nested/row-dxi.ts
@@ -12,7 +12,6 @@ import {
 
 
 
-import { Mode } from 'devextreme/common';
 
 import {
     NestedOptionHost,
@@ -28,10 +27,10 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
 })
 export class DxiRowComponent extends CollectionNestedOption {
     @Input()
-    get baseSize(): Mode | number {
+    get baseSize(): number | string {
         return this._getOption('baseSize');
     }
-    set baseSize(value: Mode | number) {
+    set baseSize(value: number | string) {
         this._setOption('baseSize', value);
     }
 
diff --git a/packages/devextreme-angular/src/ui/responsive-box/index.ts b/packages/devextreme-angular/src/ui/responsive-box/index.ts
index b9b90b1d86ef..c8ea115fb906 100644
--- a/packages/devextreme-angular/src/ui/responsive-box/index.ts
+++ b/packages/devextreme-angular/src/ui/responsive-box/index.ts
@@ -25,7 +25,6 @@ import {
 export { ExplicitTypes } from 'devextreme/ui/responsive_box';
 
 import DevExpress from 'devextreme/bundles/dx.all';
-import { Mode } from 'devextreme/common';
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
 import { ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent } from 'devextreme/ui/responsive_box';
@@ -76,10 +75,10 @@ export class DxResponsiveBoxComponent<TItem = any, TKey = any> extends DxCompone
     
      */
     @Input()
-    get cols(): Array<any | { baseSize?: Mode | number, ratio?: number, screen?: string | undefined, shrink?: number }> {
+    get cols(): Array<any | { baseSize?: number | string, ratio?: number, screen?: string | undefined, shrink?: number }> {
         return this._getOption('cols');
     }
-    set cols(value: Array<any | { baseSize?: Mode | number, ratio?: number, screen?: string | undefined, shrink?: number }>) {
+    set cols(value: Array<any | { baseSize?: number | string, ratio?: number, screen?: string | undefined, shrink?: number }>) {
         this._setOption('cols', value);
     }
 
@@ -193,10 +192,10 @@ export class DxResponsiveBoxComponent<TItem = any, TKey = any> extends DxCompone
     
      */
     @Input()
-    get rows(): Array<any | { baseSize?: Mode | number, ratio?: number, screen?: string | undefined, shrink?: number }> {
+    get rows(): Array<any | { baseSize?: number | string, ratio?: number, screen?: string | undefined, shrink?: number }> {
         return this._getOption('rows');
     }
-    set rows(value: Array<any | { baseSize?: Mode | number, ratio?: number, screen?: string | undefined, shrink?: number }>) {
+    set rows(value: Array<any | { baseSize?: number | string, ratio?: number, screen?: string | undefined, shrink?: number }>) {
         this._setOption('rows', value);
     }
 
@@ -334,7 +333,7 @@ export class DxResponsiveBoxComponent<TItem = any, TKey = any> extends DxCompone
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() colsChange: EventEmitter<Array<any | { baseSize?: Mode | number, ratio?: number, screen?: string | undefined, shrink?: number }>>;
+    @Output() colsChange: EventEmitter<Array<any | { baseSize?: number | string, ratio?: number, screen?: string | undefined, shrink?: number }>>;
 
     /**
     
@@ -397,7 +396,7 @@ export class DxResponsiveBoxComponent<TItem = any, TKey = any> extends DxCompone
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() rowsChange: EventEmitter<Array<any | { baseSize?: Mode | number, ratio?: number, screen?: string | undefined, shrink?: number }>>;
+    @Output() rowsChange: EventEmitter<Array<any | { baseSize?: number | string, ratio?: number, screen?: string | undefined, shrink?: number }>>;
 
     /**
     
diff --git a/packages/devextreme-react/src/box.ts b/packages/devextreme-react/src/box.ts
index fdc253fef7a9..e96c0be10416 100644
--- a/packages/devextreme-react/src/box.ts
+++ b/packages/devextreme-react/src/box.ts
@@ -117,7 +117,7 @@ class Box<TItem = any, TKey = any> extends BaseComponent<React.PropsWithChildren
 // owners:
 // Box
 type IItemProps = React.PropsWithChildren<{
-  baseSize?: number | "auto";
+  baseSize?: number | string;
   box?: dxBoxOptions;
   disabled?: boolean;
   html?: string;
diff --git a/packages/devextreme-react/src/responsive-box.ts b/packages/devextreme-react/src/responsive-box.ts
index 185860d7ea86..2f148db5aca3 100644
--- a/packages/devextreme-react/src/responsive-box.ts
+++ b/packages/devextreme-react/src/responsive-box.ts
@@ -100,7 +100,7 @@ class ResponsiveBox<TItem = any, TKey = any> extends BaseComponent<React.PropsWi
 // owners:
 // ResponsiveBox
 type IColProps = React.PropsWithChildren<{
-  baseSize?: number | "auto";
+  baseSize?: number | string;
   ratio?: number;
   screen?: string;
   shrink?: number;
@@ -160,7 +160,7 @@ class Location extends NestedOption<ILocationProps> {
 // owners:
 // ResponsiveBox
 type IRowProps = React.PropsWithChildren<{
-  baseSize?: number | "auto";
+  baseSize?: number | string;
   ratio?: number;
   screen?: string;
   shrink?: number;
diff --git a/packages/devextreme/js/ui/box.d.ts b/packages/devextreme/js/ui/box.d.ts
index fba0a840f99e..ec4ba2fd3ca0 100644
--- a/packages/devextreme/js/ui/box.d.ts
+++ b/packages/devextreme/js/ui/box.d.ts
@@ -164,7 +164,7 @@ export interface dxBoxItem<TKey = any> extends CollectionWidgetItem {
      * @default 0
      * @public
      */
-    baseSize?: number | Mode;
+    baseSize?: number | string;
     /**
      * @docid
      * @default undefined
diff --git a/packages/devextreme/js/ui/responsive_box.d.ts b/packages/devextreme/js/ui/responsive_box.d.ts
index bfa323338bb0..97242b6cf4e2 100644
--- a/packages/devextreme/js/ui/responsive_box.d.ts
+++ b/packages/devextreme/js/ui/responsive_box.d.ts
@@ -106,7 +106,7 @@ export interface dxResponsiveBoxOptions<
        * @docid
        * @default 0
        */
-      baseSize?: number | Mode;
+      baseSize?: number | string;
       /**
        * @docid
        * @default 1
@@ -152,7 +152,7 @@ export interface dxResponsiveBoxOptions<
        * @docid
        * @default 0
        */
-      baseSize?: number | Mode;
+      baseSize?: number | string;
       /**
        * @docid
        * @default 1
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index 5b5d9bc7ec0f..ac7fd3904b44 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -8954,7 +8954,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxBoxItem.baseSize]
      */
-    baseSize?: number | DevExpress.common.Mode;
+    baseSize?: number | string;
     /**
      * [descr:dxBoxItem.box]
      */
@@ -23366,7 +23366,7 @@ declare module DevExpress.ui {
       /**
        * [descr:dxResponsiveBoxOptions.cols.baseSize]
        */
-      baseSize?: number | DevExpress.common.Mode;
+      baseSize?: number | string;
       /**
        * [descr:dxResponsiveBoxOptions.cols.ratio]
        */
@@ -23399,7 +23399,7 @@ declare module DevExpress.ui {
       /**
        * [descr:dxResponsiveBoxOptions.rows.baseSize]
        */
-      baseSize?: number | DevExpress.common.Mode;
+      baseSize?: number | string;
       /**
        * [descr:dxResponsiveBoxOptions.rows.ratio]
        */