naive-ui 2.35.0 → 2.36.0

package/lib/split/src/Split.js

@@ -0,0 +1,151 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitProps = void 0;
+const vue_1 = require("vue");
+const _utils_1 = require("../../_utils");
+const use_config_1 = __importDefault(require("../../_mixins/use-config"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+const evtd_1 = require("evtd");
+exports.splitProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { direction: {
+        type: String,
+        default: 'horizontal'
+    }, resizeTriggerSize: {
+        type: Number,
+        default: 3
+    }, disabled: Boolean, defaultSize: {
+        type: Number,
+        default: 0.5
+    }, min: {
+        type: Number,
+        default: 0
+    }, max: {
+        type: Number,
+        default: 1
+    }, onDragStart: Function, onDragMove: Function, onDragEnd: Function });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Split',
+    props: exports.splitProps,
+    setup(props) {
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, use_config_1.default)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Split', '-split', index_cssr_1.default, styles_1.splitLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { resizableTriggerColorHover } } = themeRef.value;
+            return {
+                '--n-resize-trigger-color-hover': resizableTriggerColorHover
+            };
+        });
+        const resizeTriggerElRef = (0, vue_1.ref)(null);
+        const isDraggingRef = (0, vue_1.ref)(false);
+        const currentSize = (0, vue_1.ref)(props.defaultSize);
+        const firstPaneStyle = (0, vue_1.computed)(() => {
+            const size = currentSize.value * 100;
+            return {
+                flex: `0 0 calc(${size}% - ${(props.resizeTriggerSize * size) / 100}px)`
+            };
+        });
+        const resizeTriggerStyle = (0, vue_1.computed)(() => {
+            return props.direction === 'horizontal'
+                ? {
+                    width: `${props.resizeTriggerSize}px`,
+                    height: '100%'
+                }
+                : {
+                    width: '100%',
+                    height: `${props.resizeTriggerSize}px`
+                };
+        });
+        const resizeTriggerWrapperStyle = (0, vue_1.computed)(() => {
+            const horizontal = props.direction === 'horizontal';
+            return {
+                width: horizontal ? `${props.resizeTriggerSize}px` : '',
+                height: horizontal ? '' : `${props.resizeTriggerSize}px`,
+                cursor: props.direction === 'horizontal' ? 'col-resize' : 'row-resize'
+            };
+        });
+        let offset = 0;
+        const handleMouseDown = (e) => {
+            e.preventDefault();
+            isDraggingRef.value = true;
+            if (props.onDragStart)
+                props.onDragStart(e);
+            const mouseMoveEvent = 'mousemove';
+            const mouseUpEvent = 'mouseup';
+            const onMouseMove = (e) => {
+                updateSize(e);
+                if (props.onDragMove)
+                    props.onDragMove(e);
+            };
+            const onMouseUp = () => {
+                (0, evtd_1.off)(mouseMoveEvent, document, onMouseMove);
+                (0, evtd_1.off)(mouseUpEvent, document, onMouseUp);
+                isDraggingRef.value = false;
+                if (props.onDragEnd)
+                    props.onDragEnd(e);
+                document.body.style.cursor = '';
+            };
+            document.body.style.cursor = resizeTriggerWrapperStyle.value.cursor;
+            (0, evtd_1.on)(mouseMoveEvent, document, onMouseMove);
+            (0, evtd_1.on)(mouseUpEvent, document, onMouseUp);
+            const resizeTriggerEl = resizeTriggerElRef.value;
+            if (resizeTriggerEl) {
+                const elRect = resizeTriggerEl.getBoundingClientRect();
+                if (props.direction === 'horizontal') {
+                    offset = e.clientX - elRect.left;
+                }
+                else {
+                    offset = elRect.top - e.clientY;
+                }
+            }
+            updateSize(e);
+        };
+        const updateSize = (event) => {
+            var _a, _b;
+            const parentRect = (_b = (_a = resizeTriggerElRef.value) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (!parentRect)
+                return;
+            const newSize = props.direction === 'horizontal'
+                ? (event.clientX - parentRect.left - offset) /
+                    (parentRect.width - props.resizeTriggerSize)
+                : (event.clientY - parentRect.top + offset) /
+                    (parentRect.height - props.resizeTriggerSize);
+            currentSize.value = newSize;
+            if (props.min) {
+                currentSize.value = Math.max(newSize, props.min);
+            }
+            if (props.max) {
+                currentSize.value = Math.min(currentSize.value, props.max);
+            }
+        };
+        return {
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            resizeTriggerElRef,
+            isDragging: isDraggingRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            resizeTriggerWrapperStyle,
+            resizeTriggerStyle,
+            handleMouseDown,
+            firstPaneStyle
+        };
+    },
+    render() {
+        var _a, _b, _c, _d;
+        return ((0, vue_1.h)("div", { class: [
+                `${this.mergedClsPrefix}-split`,
+                `${this.mergedClsPrefix}-split--${this.direction}`
+            ], style: this.cssVars },
+            (0, vue_1.h)("div", { class: `${this.mergedClsPrefix}-split-pane-1`, style: this.firstPaneStyle }, (_b = (_a = this.$slots)[1]) === null || _b === void 0 ? void 0 : _b.call(_a)),
+            !this.disabled && ((0, vue_1.h)("div", { ref: "resizeTriggerElRef", class: `${this.mergedClsPrefix}-split__resize-trigger-wrapper`, style: this.resizeTriggerWrapperStyle, onMousedown: this.handleMouseDown }, (0, _utils_1.resolveSlot)(this.$slots['resize-trigger'], () => [
+                (0, vue_1.h)("div", { style: this.resizeTriggerStyle, class: [
+                        `${this.mergedClsPrefix}-split__resize-trigger`,
+                        this.isDragging &&
+                            `${this.mergedClsPrefix}-split__resize-trigger--hover`
+                    ] })
+            ]))),
+            (0, vue_1.h)("div", { class: `${this.mergedClsPrefix}-split-pane-2` }, (_d = (_c = this.$slots)[2]) === null || _d === void 0 ? void 0 : _d.call(_c))));
+    }
+});

package/lib/split/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/split/src/styles/index.cssr.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
+// --n-border-color
+// --n-color
+exports.default = (0, cssr_1.cB)('split', `
+ display: flex;
+ width: 100%;
+ height: 100%;
+`, [(0, cssr_1.cM)('horizontal', `
+ flex-direction: row;
+ `), (0, cssr_1.cM)('vertical', `
+ flex-direction: column;
+ `), (0, cssr_1.cB)('split-pane-1', `
+ overflow: hidden;
+ `), (0, cssr_1.cB)('split-pane-2', `
+ overflow: hidden;
+ flex: 1;
+ `), (0, cssr_1.cE)('resize-trigger', `
+ background-color: var(--n-border-color);
+ transition: background-color .3s var(--n-bezier);
+ `, [(0, cssr_1.cM)('hover', `
+ background-color: var(--n-resize-trigger-color-hover);
+ `), (0, cssr_1.c)('&:hover', `
+ background-color: var(--n-resize-trigger-color-hover);
+ `)])]);

package/lib/split/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import { type SplitTheme } from './light';
+declare const splitDark: SplitTheme;
+export default splitDark;

package/lib/split/styles/dark.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const splitDark = {
+    name: 'Split',
+    common: common_1.commonDark
+};
+exports.default = splitDark;

package/lib/split/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as splitDark } from './dark';
+export { default as splitLight } from './light';
+export type { SplitTheme, SplitThemeVars } from './light';

package/lib/split/styles/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitLight = exports.splitDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "splitDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "splitLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });

package/lib/split/styles/light.d.ts

@@ -0,0 +1,9 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+import { type Theme } from '../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    resizableTriggerColorHover: string;
+};
+export type SplitThemeVars = ReturnType<typeof self>;
+declare const themeLight: Theme<'Split', SplitThemeVars>;
+export default themeLight;
+export type SplitTheme = typeof themeLight;

package/lib/split/styles/light.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const common_1 = require("../../_styles/common");
+const self = (vars) => {
+    const { primaryColorHover } = vars;
+    return {
+        resizableTriggerColorHover: primaryColorHover
+    };
+};
+exports.self = self;
+const themeLight = {
+    name: 'Split',
+    common: common_1.commonLight,
+    self: exports.self
+};
+exports.default = themeLight;

package/lib/steps/src/Steps.d.ts

@@ -369,8 +369,8 @@ declare const _default: import("vue").DefineComponent<{
         indicatorIconSizeMedium: string;
     }, any>>>;
 }>>, {
+    status: "wait" | "error" | "finish" | "process";
     size: "small" | "medium";
     vertical: boolean;
-    status: "wait" | "error" | "finish" | "process";
 }, {}>;
 export default _default;

package/lib/tabs/src/Tab.js

@@ -78,7 +78,9 @@ exports.default = (0, vue_1.defineComponent)({
                 onClick: trigger === 'click' ? this.activateTab : undefined,
                 onMouseenter: trigger === 'hover' ? this.activateTab : undefined,
                 style: internalAddable ? undefined : style
-            }, this.internalCreatedByPane
+            }, 
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            this.internalCreatedByPane
                 ? (this.tabProps || {})
                 : this.$attrs)),
                 (0, vue_1.h)("span", { class: `${clsPrefix}-tabs-tab__label` }, internalAddable ? ((0, vue_1.h)(vue_1.Fragment, null,

package/lib/tabs/src/Tabs.d.ts

@@ -21,7 +21,7 @@ export declare const tabsProps: {
         readonly default: "medium";
     };
     readonly placement: {
-        readonly type: PropType<"left" | "right" | "bottom" | "top">;
+        readonly type: PropType<"left" | "right" | "top" | "bottom">;
         readonly default: "top";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
@@ -337,7 +337,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "medium";
     };
     readonly placement: {
-        readonly type: PropType<"left" | "right" | "bottom" | "top">;
+        readonly type: PropType<"left" | "right" | "top" | "bottom">;
         readonly default: "top";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
@@ -680,7 +680,7 @@ declare const _default: import("vue").DefineComponent<{
         $forceUpdate: () => void;
         $nextTick: typeof nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {}) | null>;
+    } & Omit<{}, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {}) | null>;
     scrollWrapperElRef: import("vue").Ref<HTMLElement | null>;
     addTabFixed: import("vue").Ref<boolean>;
     tabWrapperStyle: import("vue").ComputedRef<{
@@ -726,7 +726,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-tab-color-segment': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
-    animationDirection: import("vue").Ref<"prev" | "next">;
+    animationDirection: import("vue").Ref<"next" | "prev">;
     renderNameListRef: {
         value: Array<string | number>;
     };
@@ -752,7 +752,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "medium";
     };
     readonly placement: {
-        readonly type: PropType<"left" | "right" | "bottom" | "top">;
+        readonly type: PropType<"left" | "right" | "top" | "bottom">;
         readonly default: "top";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
@@ -1052,7 +1052,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly type: TabsType;
     readonly size: "small" | "medium" | "large";
     readonly closable: boolean;
-    readonly placement: "left" | "right" | "bottom" | "top";
+    readonly placement: "left" | "right" | "top" | "bottom";
     readonly trigger: "click" | "hover";
     readonly animated: boolean;
     readonly tabsPadding: number;

package/lib/tabs/src/Tabs.js

@@ -301,7 +301,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
             if (type !== 'segment') {
-                deriveScrollShadow((_b = xScrollInstRef.value) === null || _b === void 0 ? void 0 : _b.$el);
+                deriveScrollShadow(((_b = xScrollInstRef.value) === null || _b === void 0 ? void 0 : _b.$el) || null);
             }
         }
         const handleNavResize = (0, lodash_1.throttle)(_handleNavResize, 64);
@@ -332,7 +332,7 @@ exports.default = (0, vue_1.defineComponent)({
                     addTabFixedRef.value = false;
                 }
             }
-            deriveScrollShadow((_a = xScrollInstRef.value) === null || _a === void 0 ? void 0 : _a.$el);
+            deriveScrollShadow(((_a = xScrollInstRef.value) === null || _a === void 0 ? void 0 : _a.$el) || null);
         }
         const handleTabsResize = (0, lodash_1.throttle)(_handleTabsResize, 64);
         function handleAdd() {

package/lib/tabs/src/styles/index.cssr.js

@@ -129,7 +129,9 @@ exports.default = (0, cssr_1.cB)('tabs', `
  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .12);
  `)]), (0, cssr_1.cM)('shadow-end', [(0, cssr_1.c)('&::after', `
  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .12);
- `)])])]), (0, cssr_1.cM)('left, right', [(0, cssr_1.cB)('tabs-nav-scroll-wrapper', [(0, cssr_1.c)('&::before', `
+ `)])])]), (0, cssr_1.cM)('left, right', [(0, cssr_1.cB)('tabs-nav-scroll-content', `
+ flex-direction: column;
+ `), (0, cssr_1.cB)('tabs-nav-scroll-wrapper', [(0, cssr_1.c)('&::before', `
  top: 0;
  left: 0;
  right: 0;
@@ -165,6 +167,7 @@ exports.default = (0, cssr_1.cB)('tabs', `
  display: flex;
  position: relative;
  min-width: 100%;
+ min-height: 100%;
  width: fit-content;
  box-sizing: border-box;
  `), (0, cssr_1.cB)('tabs-wrapper', `
@@ -298,7 +301,6 @@ exports.default = (0, cssr_1.cB)('tabs', `
  `), (0, cssr_1.cB)('tabs-pad', `
  flex-grow: 1;
  transition: border-color .3s var(--n-bezier);
- border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-tab-pad', `
  transition: border-color .3s var(--n-bezier);
  `), (0, cssr_1.cB)('tabs-tab', `
@@ -339,6 +341,8 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-bottom: 1px solid #0000;
  `)]), (0, cssr_1.cB)('tabs-tab-pad', `
  border-bottom: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-pad', `
+ border-bottom: 1px solid var(--n-tab-border-color);
  `)])]), (0, cssr_1.cM)('left', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-tab', `
  border-top-left-radius: var(--n-tab-border-radius);
  border-bottom-left-radius: var(--n-tab-border-radius);
@@ -346,6 +350,8 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-right: 1px solid #0000;
  `)]), (0, cssr_1.cB)('tabs-tab-pad', `
  border-right: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-pad', `
+ border-right: 1px solid var(--n-tab-border-color);
  `)])]), (0, cssr_1.cM)('right', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-tab', `
  border-top-right-radius: var(--n-tab-border-radius);
  border-bottom-right-radius: var(--n-tab-border-radius);
@@ -353,6 +359,8 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-left: 1px solid #0000;
  `)]), (0, cssr_1.cB)('tabs-tab-pad', `
  border-left: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-pad', `
+ border-left: 1px solid var(--n-tab-border-color);
  `)])]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-tab', `
  border-bottom-left-radius: var(--n-tab-border-radius);
  border-bottom-right-radius: var(--n-tab-border-radius);
@@ -360,4 +368,6 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-top: 1px solid #0000;
  `)]), (0, cssr_1.cB)('tabs-tab-pad', `
  border-top: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-pad', `
+ border-top: 1px solid var(--n-tab-border-color);
  `)])])])]);

package/lib/theme-editor/src/ThemeEditor.d.ts

@@ -117,8 +117,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     theme: import("vue").ComputedRef<GlobalThemeOverrides>;
     showPanel: import("vue").Ref<boolean>;
-    tempOverrides: any;
-    overrides: any;
+    tempOverrides: import("vue").Ref<any>;
+    overrides: import("vue").Ref<any>;
     compNamePattern: import("vue").Ref<string>;
     tempCompNamePattern: import("vue").Ref<string>;
     varNamePattern: import("vue").Ref<string>;

package/lib/themes/dark.js

@@ -57,32 +57,34 @@ const styles_52 = require("../popconfirm/styles");
 const styles_53 = require("../popover/styles");
 const styles_54 = require("../popselect/styles");
 const styles_55 = require("../progress/styles");
-const styles_56 = require("../radio/styles");
-const styles_57 = require("../rate/styles");
-const styles_58 = require("../result/styles");
-const styles_59 = require("../legacy-grid/styles");
-const styles_60 = require("../_internal/scrollbar/styles");
-const styles_61 = require("../select/styles");
-const styles_62 = require("../skeleton/styles");
-const styles_63 = require("../slider/styles");
-const styles_64 = require("../space/styles");
-const styles_65 = require("../spin/styles");
-const styles_66 = require("../statistic/styles");
-const styles_67 = require("../steps/styles");
-const styles_68 = require("../switch/styles");
-const styles_69 = require("../table/styles");
-const styles_70 = require("../tabs/styles");
-const styles_71 = require("../tag/styles");
-const styles_72 = require("../thing/styles");
-const styles_73 = require("../time-picker/styles");
-const styles_74 = require("../timeline/styles");
-const styles_75 = require("../tooltip/styles");
-const styles_76 = require("../transfer/styles");
-const styles_77 = require("../tree-select/styles");
-const styles_78 = require("../typography/styles");
-const styles_79 = require("../tree/styles");
-const styles_80 = require("../upload/styles");
-const styles_81 = require("../watermark/styles");
+const styles_56 = require("../qr-code/styles");
+const styles_57 = require("../radio/styles");
+const styles_58 = require("../rate/styles");
+const styles_59 = require("../result/styles");
+const styles_60 = require("../legacy-grid/styles");
+const styles_61 = require("../_internal/scrollbar/styles");
+const styles_62 = require("../select/styles");
+const styles_63 = require("../skeleton/styles");
+const styles_64 = require("../slider/styles");
+const styles_65 = require("../space/styles");
+const styles_66 = require("../spin/styles");
+const styles_67 = require("../statistic/styles");
+const styles_68 = require("../steps/styles");
+const styles_69 = require("../switch/styles");
+const styles_70 = require("../table/styles");
+const styles_71 = require("../tabs/styles");
+const styles_72 = require("../tag/styles");
+const styles_73 = require("../thing/styles");
+const styles_74 = require("../time-picker/styles");
+const styles_75 = require("../timeline/styles");
+const styles_76 = require("../tooltip/styles");
+const styles_77 = require("../transfer/styles");
+const styles_78 = require("../tree-select/styles");
+const styles_79 = require("../typography/styles");
+const styles_80 = require("../tree/styles");
+const styles_81 = require("../upload/styles");
+const styles_82 = require("../watermark/styles");
+const styles_83 = require("../split/styles");
 exports.darkTheme = {
     name: 'dark',
     common: common_1.commonDark,
@@ -141,30 +143,32 @@ exports.darkTheme = {
     Popover: styles_53.popoverDark,
     Popselect: styles_54.popselectDark,
     Progress: styles_55.progressDark,
-    Radio: styles_56.radioDark,
-    Rate: styles_57.rateDark,
-    Result: styles_58.resultDark,
-    Row: styles_59.rowDark,
-    Scrollbar: styles_60.scrollbarDark,
-    Select: styles_61.selectDark,
-    Skeleton: styles_62.skeletonDark,
-    Slider: styles_63.sliderDark,
-    Space: styles_64.spaceDark,
-    Spin: styles_65.spinDark,
-    Statistic: styles_66.statisticDark,
-    Steps: styles_67.stepsDark,
-    Switch: styles_68.switchDark,
-    Table: styles_69.tableDark,
-    Tabs: styles_70.tabsDark,
-    Tag: styles_71.tagDark,
-    Thing: styles_72.thingDark,
-    TimePicker: styles_73.timePickerDark,
-    Timeline: styles_74.timelineDark,
-    Tooltip: styles_75.tooltipDark,
-    Transfer: styles_76.transferDark,
-    Tree: styles_79.treeDark,
-    TreeSelect: styles_77.treeSelectDark,
-    Typography: styles_78.typographyDark,
-    Upload: styles_80.uploadDark,
-    Watermark: styles_81.watermarkDark
+    QrCode: styles_56.qrcodeDark,
+    Radio: styles_57.radioDark,
+    Rate: styles_58.rateDark,
+    Result: styles_59.resultDark,
+    Row: styles_60.rowDark,
+    Scrollbar: styles_61.scrollbarDark,
+    Select: styles_62.selectDark,
+    Skeleton: styles_63.skeletonDark,
+    Slider: styles_64.sliderDark,
+    Space: styles_65.spaceDark,
+    Spin: styles_66.spinDark,
+    Statistic: styles_67.statisticDark,
+    Steps: styles_68.stepsDark,
+    Switch: styles_69.switchDark,
+    Table: styles_70.tableDark,
+    Tabs: styles_71.tabsDark,
+    Tag: styles_72.tagDark,
+    Thing: styles_73.thingDark,
+    TimePicker: styles_74.timePickerDark,
+    Timeline: styles_75.timelineDark,
+    Tooltip: styles_76.tooltipDark,
+    Transfer: styles_77.transferDark,
+    Tree: styles_80.treeDark,
+    TreeSelect: styles_78.treeSelectDark,
+    Typography: styles_79.typographyDark,
+    Upload: styles_81.uploadDark,
+    Watermark: styles_82.watermarkDark,
+    Split: styles_83.splitDark
 };