naive-ui 2.21.5 → 2.23.2

package/es/drawer/src/Drawer.js

@@ -135,25 +135,25 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { color, textColor, boxShadow, lineHeight, headerPadding, footerPadding, bodyPadding, titleFontSize, titleTextColor, titleFontWeight, headerBorderBottom, footerBorderTop, closeColor, closeColorHover, closeColorPressed, closeSize } } = themeRef.value;
                 return {
-                    '--line-height': lineHeight,
-                    '--color': color,
-                    '--text-color': textColor,
-                    '--box-shadow': boxShadow,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--bezier-out': cubicBezierEaseOut,
-                    '--bezier-in': cubicBezierEaseIn,
-                    '--header-padding': headerPadding,
-                    '--body-padding': bodyPadding,
-                    '--footer-padding': footerPadding,
-                    '--title-text-color': titleTextColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--header-border-bottom': headerBorderBottom,
-                    '--footer-border-top': footerBorderTop,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--close-size': closeSize
+                    '--n-line-height': lineHeight,
+                    '--n-color': color,
+                    '--n-text-color': textColor,
+                    '--n-box-shadow': boxShadow,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-bezier-out': cubicBezierEaseOut,
+                    '--n-bezier-in': cubicBezierEaseIn,
+                    '--n-header-padding': headerPadding,
+                    '--n-body-padding': bodyPadding,
+                    '--n-footer-padding': footerPadding,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-header-border-bottom': headerBorderBottom,
+                    '--n-footer-border-top': footerBorderTop,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-close-size': closeSize
                 };
             }),
             isMounted: isMountedRef

package/es/drawer/src/styles/index.cssr.js

@@ -4,36 +4,36 @@ import slideInFromLeftTransition from '../../../_styles/transitions/slide-in-fro
 import slideInFromTopTransition from '../../../_styles/transitions/slide-in-from-top';
 import slideInFromBottomTransition from '../../../_styles/transitions/slide-in-from-bottom';
 import fadeInTransition from '../../../_styles/transitions/fade-in.cssr'; // vars:
-// --line-height
-// --color
-// --text-color
-// --box-shadow
-// --bezier
-// --bezier-out
-// --bezier-in
-// --body-padding
-// --header-padding
-// --footer-padding
-// --title-font-size
-// --title-text-color
-// --title-font-weight
-// --header-border-bottom
-// --footer-border-top
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --close-size
+// --n-line-height
+// --n-color
+// --n-text-color
+// --n-box-shadow
+// --n-bezier
+// --n-bezier-out
+// --n-bezier-in
+// --n-body-padding
+// --n-header-padding
+// --n-footer-padding
+// --n-title-font-size
+// --n-title-text-color
+// --n-title-font-weight
+// --n-header-border-bottom
+// --n-footer-border-top
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-close-size
 
 export default c([cB('drawer', `
- line-height: var(--line-height);
+ line-height: var(--n-line-height);
  position: absolute;
  pointer-events: all;
- box-shadow: var(--box-shadow);
+ box-shadow: var(--n-box-shadow);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
- background-color: var(--color);
- color: var(--text-color);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ background-color: var(--n-color);
+ color: var(--n-text-color);
  box-sizing: border-box;
  `, [slideInFromRightTransition(), slideInFromLeftTransition(), slideInFromTopTransition(), slideInFromBottomTransition(), cM('native-scrollbar', [cB('drawer-content-wrapper', `
  overflow: auto;
@@ -49,30 +49,31 @@ export default c([cB('drawer', `
  overflow: auto;
  `)]), cB('drawer-body', `
  flex: 1 0 0;
+ overflow: hidden;
  `), cB('drawer-body-content-wrapper', `
  box-sizing: border-box;
- padding: var(--body-padding);
+ padding: var(--n-body-padding);
  `), cB('drawer-header', `
- font-weight: var(--title-font-weight);
+ font-weight: var(--n-title-font-weight);
  line-height: 1;
- font-size: var(--title-font-size);
- color: var(--title-text-color);
- padding: var(--header-padding);
- transition: border .3s var(--bezier);
- border-bottom: 1px solid var(--divider-color);
- border-bottom: var(--header-border-bottom);
+ font-size: var(--n-title-font-size);
+ color: var(--n-title-text-color);
+ padding: var(--n-header-padding);
+ transition: border .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-divider-color);
+ border-bottom: var(--n-header-border-bottom);
  display: flex;
  justify-content: space-between;
  align-items: center;
  `, [cE('close', `
- transition: color .3s var(--bezier);
- font-size: var(--close-size);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-close-size);
  `)]), cB('drawer-footer', `
  display: flex;
  justify-content: flex-end;
- border-top: var(--footer-border-top);
- transition: border .3s var(--bezier);
- padding: var(--footer-padding);
+ border-top: var(--n-footer-border-top);
+ transition: border .3s var(--n-bezier);
+ padding: var(--n-footer-padding);
  `)]), cM('right-placement', `
  top: 0;
  bottom: 0;
@@ -111,6 +112,6 @@ export default c([cB('drawer', `
  `, [fadeInTransition({
   enterDuration: '0.2s',
   leaveDuration: '0.2s',
-  enterCubicBezier: 'var(--bezier-in)',
-  leaveCubicBezier: 'var(--bezier-out)'
+  enterCubicBezier: 'var(--n-bezier-in)',
+  leaveCubicBezier: 'var(--n-bezier-out)'
 })])]);

package/es/dropdown/src/Dropdown.js

@@ -235,46 +235,48 @@ export default defineComponent({
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const { padding, dividerColor, borderRadius, optionOpacityDisabled, [createKey('optionIconSuffixWidth', size)]: optionIconSuffixWidth, [createKey('optionSuffixWidth', size)]: optionSuffixWidth, [createKey('optionIconPrefixWidth', size)]: optionIconPrefixWidth, [createKey('optionPrefixWidth', size)]: optionPrefixWidth, [createKey('fontSize', size)]: fontSize, [createKey('optionHeight', size)]: optionHeight, [createKey('optionIconSize', size)]: optionIconSize } = self;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--padding': padding,
-                    '--border-radius': borderRadius,
-                    '--option-height': optionHeight,
-                    '--option-prefix-width': optionPrefixWidth,
-                    '--option-icon-prefix-width': optionIconPrefixWidth,
-                    '--option-suffix-width': optionSuffixWidth,
-                    '--option-icon-suffix-width': optionIconSuffixWidth,
-                    '--option-icon-size': optionIconSize,
-                    '--divider-color': dividerColor,
-                    '--option-opacity-disabled': optionOpacityDisabled
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-padding': padding,
+                    '--n-border-radius': borderRadius,
+                    '--n-option-height': optionHeight,
+                    '--n-option-prefix-width': optionPrefixWidth,
+                    '--n-option-icon-prefix-width': optionIconPrefixWidth,
+                    '--n-option-suffix-width': optionSuffixWidth,
+                    '--n-option-icon-suffix-width': optionIconSuffixWidth,
+                    '--n-option-icon-size': optionIconSize,
+                    '--n-divider-color': dividerColor,
+                    '--n-option-opacity-disabled': optionOpacityDisabled
                 };
                 // writing like this is the fastest method
                 if (inverted) {
-                    vars['--color'] = self.colorInverted;
-                    vars['--option-color-hover'] = self.optionColorHoverInverted;
-                    vars['--option-color-active'] = self.optionColorActiveInverted;
-                    vars['--option-text-color'] = self.optionTextColorInverted;
-                    vars['--option-text-color-hover'] = self.optionTextColorHoverInverted;
-                    vars['--option-text-color-active'] =
+                    vars['--n-color'] = self.colorInverted;
+                    vars['--n-option-color-hover'] = self.optionColorHoverInverted;
+                    vars['--n-option-color-active'] = self.optionColorActiveInverted;
+                    vars['--n-option-text-color'] = self.optionTextColorInverted;
+                    vars['--n-option-text-color-hover'] =
+                        self.optionTextColorHoverInverted;
+                    vars['--n-option-text-color-active'] =
                         self.optionTextColorActiveInverted;
-                    vars['--option-text-color-child-active'] =
+                    vars['--n-option-text-color-child-active'] =
                         self.optionTextColorChildActiveInverted;
-                    vars['--prefix-color'] = self.prefixColorInverted;
-                    vars['--suffix-color'] = self.suffixColorInverted;
-                    vars['--group-header-text-color'] = self.groupHeaderTextColorInverted;
+                    vars['--n-prefix-color'] = self.prefixColorInverted;
+                    vars['--n-suffix-color'] = self.suffixColorInverted;
+                    vars['--n-group-header-text-color'] =
+                        self.groupHeaderTextColorInverted;
                 }
                 else {
-                    vars['--color'] = self.color;
-                    vars['--option-color-hover'] = self.optionColorHover;
-                    vars['--option-color-active'] = self.optionColorActive;
-                    vars['--option-text-color'] = self.optionTextColor;
-                    vars['--option-text-color-hover'] = self.optionTextColorHover;
-                    vars['--option-text-color-active'] = self.optionTextColorActive;
-                    vars['--option-text-color-child-active'] =
+                    vars['--n-color'] = self.color;
+                    vars['--n-option-color-hover'] = self.optionColorHover;
+                    vars['--n-option-color-active'] = self.optionColorActive;
+                    vars['--n-option-text-color'] = self.optionTextColor;
+                    vars['--n-option-text-color-hover'] = self.optionTextColorHover;
+                    vars['--n-option-text-color-active'] = self.optionTextColorActive;
+                    vars['--n-option-text-color-child-active'] =
                         self.optionTextColorChildActive;
-                    vars['--prefix-color'] = self.prefixColor;
-                    vars['--suffix-color'] = self.suffixColor;
-                    vars['--group-header-text-color'] = self.groupHeaderTextColor;
+                    vars['--n-prefix-color'] = self.prefixColor;
+                    vars['--n-suffix-color'] = self.suffixColor;
+                    vars['--n-group-header-text-color'] = self.groupHeaderTextColor;
                 }
                 return vars;
             })

package/es/dropdown/src/styles/index.cssr.js

@@ -1,38 +1,38 @@
 import { c, cB, cM, cE, cNotM } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --bezier
-// --font-size
-// --padding
-// --border-radius
-// --option-height
-// --option-prefix-width
-// --option-icon-prefix-width
-// --option-suffix-width
-// --option-icon-suffix-width
-// --color
-// --option-color-hover
-// --option-color-active
-// --divider-color
-// --option-text-color
-// --option-text-color-hover
-// --option-text-color-active
-// --option-text-color-child-active
-// --prefix-color
-// --suffix-color
-// --option-icon-size
-// --option-opacity-disabled
+// --n-bezier
+// --n-font-size
+// --n-padding
+// --n-border-radius
+// --n-option-height
+// --n-option-prefix-width
+// --n-option-icon-prefix-width
+// --n-option-suffix-width
+// --n-option-icon-suffix-width
+// --n-color
+// --n-option-color-hover
+// --n-option-color-active
+// --n-divider-color
+// --n-option-text-color
+// --n-option-text-color-hover
+// --n-option-text-color-active
+// --n-option-text-color-child-active
+// --n-prefix-color
+// --n-suffix-color
+// --n-option-icon-size
+// --n-option-opacity-disabled
 // shared with popover
-// --box-shadow
+// --n-box-shadow
 
 export default cB('dropdown-menu', `
  transform-origin: inherit;
- padding: var(--padding);
- background-color: var(--color);
- border-radius: var(--border-radius);
- box-shadow: var(--box-shadow);
+ padding: var(--n-padding);
+ background-color: var(--n-color);
+ border-radius: var(--n-border-radius);
+ box-shadow: var(--n-box-shadow);
  transition:
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
 `, [fadeInScaleUpTransition(), cB('dropdown-option', `
  position: relative;
  `, [c('a', `
@@ -48,48 +48,48 @@ export default cB('dropdown-menu', `
  `)]), cB('dropdown-option-body', `
  display: flex;
  cursor: pointer;
- height: var(--option-height);
- line-height: var(--option-height);
- font-size: var(--font-size);
- color: var(--option-text-color);
+ height: var(--n-option-height);
+ line-height: var(--n-option-height);
+ font-size: var(--n-font-size);
+ color: var(--n-option-text-color);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  `, [cM('pending', [cNotM('disabled', {
-  color: 'var(--option-text-color-hover)',
-  backgroundColor: 'var(--option-color-hover)'
+  color: 'var(--n-option-text-color-hover)',
+  backgroundColor: 'var(--n-option-color-hover)'
 }), cE('prefix, suffix', {
-  color: 'var(--option-text-color-hover)'
+  color: 'var(--n-option-text-color-hover)'
 })]), cM('active', [cNotM('disabled', {
-  color: 'var(--option-text-color-active)',
-  backgroundColor: 'var(--option-color-active)'
+  color: 'var(--n-option-text-color-active)',
+  backgroundColor: 'var(--n-option-color-active)'
 }), cE('prefix, suffix', {
-  color: 'var(--option-text-color-active)'
+  color: 'var(--n-option-text-color-active)'
 })]), cM('disabled', {
   cursor: 'not-allowed',
-  opacity: 'var(--option-opacity-disabled)'
+  opacity: 'var(--n-option-opacity-disabled)'
 }), cM('child-active', {
-  color: 'var(--option-text-color-child-active)'
+  color: 'var(--n-option-text-color-child-active)'
 }, [cE('prefix, suffix', {
-  color: 'var(--option-text-color-child-active)'
+  color: 'var(--n-option-text-color-child-active)'
 })]), cM('group', {
-  fontSize: 'calc(var(--font-size) - 1px)',
-  color: 'var(--group-header-text-color)'
+  fontSize: 'calc(var(--n-font-size) - 1px)',
+  color: 'var(--n-group-header-text-color)'
 }, [cE('prefix', {
-  width: 'calc(var(--option-prefix-width) / 2)'
+  width: 'calc(var(--n-option-prefix-width) / 2)'
 }, [cM('show-icon', {
-  width: 'calc(var(--option-icon-prefix-width) / 2)'
+  width: 'calc(var(--n-option-icon-prefix-width) / 2)'
 })])]), cE('prefix', `
- width: var(--option-prefix-width);
+ width: var(--n-option-prefix-width);
  display: flex;
  justify-content: center;
  align-items: center;
- color: var(--prefix-color);
- transition: color .3s var(--bezier);
+ color: var(--n-prefix-color);
+ transition: color .3s var(--n-bezier);
  `, [cM('show-icon', {
-  width: 'var(--option-icon-prefix-width)'
+  width: 'var(--n-option-icon-prefix-width)'
 }), cB('icon', {
-  fontSize: 'var(--option-icon-size)'
+  fontSize: 'var(--n-option-icon-size)'
 })]), cE('label', {
   whiteSpace: 'nowrap',
   flex: 1
@@ -100,14 +100,14 @@ export default cB('dropdown-menu', `
  display: flex;
  justify-content: flex-end;
  align-items: center;
- min-width: var(--option-suffix-width);
+ min-width: var(--n-option-suffix-width);
  padding: 0 8px;
- transition: color .3s var(--bezier);
- color: var(--suffix-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-suffix-color);
  `, [cM('has-submenu', {
-  width: 'var(--option-icon-suffix-width)'
+  width: 'var(--n-option-icon-suffix-width)'
 }), cB('icon', {
-  fontSize: 'var(--option-icon-size)'
+  fontSize: 'var(--n-option-icon-size)'
 })]), cB('dropdown-menu', {
   pointerEvents: 'all'
 })]), cB('dropdown-offset-container', `
@@ -118,8 +118,8 @@ export default cB('dropdown-menu', `
  top: -4px;
  bottom: -4px;
  `)]), cB('dropdown-divider', `
- transition: background-color .3s var(--bezier);
- background-color: var(--divider-color);
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-divider-color);
  height: 1px;
  margin: 4px 0;
  `), cB('dropdown-menu-wrapper', `

package/es/dynamic-tags/src/DynamicTags.d.ts

@@ -2571,7 +2571,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--input-width': string;
+        '--n-input-width': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     closable?: unknown;

package/es/dynamic-tags/src/DynamicTags.js

@@ -122,7 +122,7 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { self: { inputWidth } } = themeRef.value;
                 return {
-                    '--input-width': inputWidth
+                    '--n-input-width': inputWidth
                 };
             })
         };

package/es/dynamic-tags/src/styles/index.cssr.js

@@ -2,5 +2,5 @@ import { cB } from '../../../_utils/cssr'; // vars:
 // --input-width
 
 export default cB('dynamic-tags', [cB('input', {
-  minWidth: 'var(--input-width)'
+  minWidth: 'var(--n-input-width)'
 })]);

package/es/empty/src/Empty.d.ts

@@ -1,14 +1,15 @@
 import { PropType, VNodeChild } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
 declare const emptyProps: {
-    description: {
-        type: StringConstructor;
-        default: undefined;
-    };
+    description: StringConstructor;
     showDescription: {
         type: BooleanConstructor;
         default: boolean;
     };
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<"small" | "medium" | "large" | "huge">;
         default: string;
@@ -56,14 +57,15 @@ declare const emptyProps: {
 };
 export declare type EmptyProps = ExtractPublicPropTypes<typeof emptyProps>;
 declare const _default: import("vue").DefineComponent<{
-    description: {
-        type: StringConstructor;
-        default: undefined;
-    };
+    description: StringConstructor;
     showDescription: {
         type: BooleanConstructor;
         default: boolean;
     };
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<"small" | "medium" | "large" | "huge">;
         default: string;
@@ -113,16 +115,17 @@ declare const _default: import("vue").DefineComponent<{
     mergedRenderIcon: import("vue").ComputedRef<() => VNodeChild>;
     localizedDescription: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--icon-size': string;
-        '--font-size': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--icon-color': string;
-        '--extra-text-color': string;
+        '--n-icon-size': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-icon-color': string;
+        '--n-extra-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     description?: unknown;
     showDescription?: unknown;
+    showIcon?: unknown;
     size?: unknown;
     renderIcon?: unknown;
     theme?: unknown;
@@ -131,6 +134,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     size: "small" | "medium" | "large" | "huge";
     showDescription: boolean;
+    showIcon: boolean;
 } & {
     description?: string | undefined;
     theme?: import("../../_mixins").Theme<"Empty", {
@@ -174,8 +178,8 @@ declare const _default: import("vue").DefineComponent<{
     }, any>> | undefined;
     renderIcon?: (() => VNodeChild) | undefined;
 }>, {
-    description: string;
     size: "small" | "medium" | "large" | "huge";
     showDescription: boolean;
+    showIcon: boolean;
 }>;
 export default _default;

package/es/empty/src/Empty.js

@@ -6,10 +6,10 @@ import { NBaseIcon } from '../../_internal';
 import { emptyLight } from '../styles';
 import style from './styles/index.cssr';
 import { configProviderInjectionKey } from '../../config-provider/src/ConfigProvider';
-const emptyProps = Object.assign(Object.assign({}, useTheme.props), { description: {
-        type: String,
-        default: undefined
-    }, showDescription: {
+const emptyProps = Object.assign(Object.assign({}, useTheme.props), { description: String, showDescription: {
+        type: Boolean,
+        default: true
+    }, showIcon: {
         type: Boolean,
         default: true
     }, size: {
@@ -43,12 +43,12 @@ export default defineComponent({
                 const { size } = props;
                 const { common: { cubicBezierEaseInOut }, self: { [createKey('iconSize', size)]: iconSize, [createKey('fontSize', size)]: fontSize, textColor, iconColor, extraTextColor } } = themeRef.value;
                 return {
-                    '--icon-size': iconSize,
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--icon-color': iconColor,
-                    '--extra-text-color': extraTextColor
+                    '--n-icon-size': iconSize,
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-icon-color': iconColor,
+                    '--n-extra-text-color': extraTextColor
                 };
             })
         };
@@ -56,9 +56,9 @@ export default defineComponent({
     render() {
         const { $slots, mergedClsPrefix } = this;
         return (h("div", { class: `${mergedClsPrefix}-empty`, style: this.cssVars },
-            h("div", { class: `${mergedClsPrefix}-empty__icon` }, renderSlot($slots, 'icon', undefined, () => [
+            this.showIcon ? (h("div", { class: `${mergedClsPrefix}-empty__icon` }, renderSlot($slots, 'icon', undefined, () => [
                 h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })
-            ])),
+            ]))) : null,
             this.showDescription ? (h("div", { class: `${mergedClsPrefix}-empty__description` }, renderSlot($slots, 'default', undefined, () => [
                 this.localizedDescription
             ]))) : null,

package/es/empty/src/styles/index.cssr.js

@@ -1,31 +1,32 @@
-import { cB, cE } from '../../../_utils/cssr'; // vars:
-// --font-size
-// --icon-size
-// --icon-color
-// --bezier
-// --text-color
-// --extra-text-color
+import { c, cB, cE } from '../../../_utils/cssr'; // vars:
+// --n-font-size
+// --n-icon-size
+// --n-icon-color
+// --n-bezier
+// --n-text-color
+// --n-extra-text-color
 
 export default cB('empty', `
  display: flex;
  flex-direction: column;
  align-items: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
 `, [cE('icon', `
- width: var(--icon-size);
- height: var(--icon-size);
- font-size: var(--icon-size);
- line-height: var(--icon-size);
- color: var(--icon-color);
+ width: var(--n-icon-size);
+ height: var(--n-icon-size);
+ font-size: var(--n-icon-size);
+ line-height: var(--n-icon-size);
+ color: var(--n-icon-color);
  transition:
- color .3s var(--bezier);
- `), cE('description', `
+ color .3s var(--n-bezier);
+ `, [c('+', [cE('description', `
  margin-top: 8px;
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ `)])]), cE('description', `
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `), cE('extra', `
  text-align: center;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  margin-top: 12px;
- color: var(--extra-text-color);
+ color: var(--n-extra-text-color);
  `)]);