naive-ui 2.21.4 → 2.23.1

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

@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --link-color
-// --link-font-size
-// --link-text-color
-// --link-text-color-hover
-// --link-text-color-active
-// --link-text-color-pressed
-// --bezier
-// --rail-color
-// --rail-color-active
-// --rail-width
-// --link-padding
-// --link-border-radius
+// --n-link-color
+// --n-link-font-size
+// --n-link-text-color
+// --n-link-text-color-hover
+// --n-link-text-color-active
+// --n-link-text-color-pressed
+// --n-bezier
+// --n-rail-color
+// --n-rail-color-active
+// --n-rail-width
+// --n-link-padding
+// --n-link-border-radius
 
 
 exports.default = (0, cssr_1.cB)('anchor', `
  position: relative;
 `, [(0, cssr_1.cNotM)('block', `
- padding-left: var(--rail-width);
+ padding-left: var(--n-rail-width);
  `, [(0, cssr_1.cB)('anchor-link', [(0, cssr_1.c)('+, >', [(0, cssr_1.cB)('anchor-link', `
  margin-top: .5em;
  `)])]), (0, cssr_1.cB)('anchor-link-background', `
@@ -32,56 +32,52 @@ exports.default = (0, cssr_1.cB)('anchor', `
  `), (0, cssr_1.cNotM)('show-rail', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('anchor-link', 'padding-left: 0;')])])]), (0, cssr_1.cM)('block', [(0, cssr_1.cB)('anchor-link', `
  margin-bottom: 4px;
  padding: 2px 8px;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  background-color: transparent;
- border-radius: var(--link-border-radius);
+ border-radius: var(--n-link-border-radius);
  `, [(0, cssr_1.cM)('active', `
- background-color: var(--link-color);
+ background-color: var(--n-link-color);
  `)])]), (0, cssr_1.cB)('anchor-link-background', `
  position: absolute;
- left: calc(var(--rail-width) / 2);
+ left: calc(var(--n-rail-width) / 2);
  width: 100%;
- background-color: var(--link-color);
+ background-color: var(--n-link-color);
  transition:
- top .15s var(--bezier),
- max-width .15s var(--bezier),
- background-color .3s var(--bezier);
+ top .15s var(--n-bezier),
+ max-width .15s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `), (0, cssr_1.cB)('anchor-rail', `
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
- width: var(--rail-width);
- border-radius: calc(var(--rail-width) / 2);
+ width: var(--n-rail-width);
+ border-radius: calc(var(--n-rail-width) / 2);
  overflow: hidden;
- transition: background-color .3s var(--bezier);
- background-color: var(--rail-color);
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-rail-color);
  `, [(0, cssr_1.cE)('bar', `
  position: absolute;
  left: 0;
- width: var(--rail-width);
+ width: var(--n-rail-width);
  height: 21px;
  background-color: #0000;
  transition: 
- top .15s var(--bezier),
- background-color .3s var(--bezier);
+ top .15s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('active', {
-  backgroundColor: 'var(--rail-color-active)'
+  backgroundColor: 'var(--n-rail-color-active)'
 })])]), (0, cssr_1.cB)('anchor-link', `
- padding: var(--link-padding);
+ padding: var(--n-link-padding);
  position: relative;
  line-height: 1.5;
- font-size: var(--link-font-size);
+ font-size: var(--n-link-font-size);
  min-height: 1.5em;
  display: flex;
  flex-direction: column;
- `, [(0, cssr_1.cM)('active', [(0, cssr_1.cE)('title', `
- color: var(--link-text-color-active);
- `)]), (0, cssr_1.c)('&:hover, &:focus', [(0, cssr_1.cE)('title', `
- color: var(--link-text-color-hover);
- `)]), (0, cssr_1.c)('&:active', [(0, cssr_1.cE)('title', `
- color: var(--link-text-color-pressed);
- `)]), (0, cssr_1.cE)('title', `
+ `, [(0, cssr_1.cM)('active', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('title', `
+ color: var(--n-link-text-color-active);
+ `)])]), (0, cssr_1.cE)('title', `
  outline: none;
  max-width: 100%;
  text-decoration: none;
@@ -91,6 +87,10 @@ exports.default = (0, cssr_1.cB)('anchor', `
  cursor: pointer;
  display: inline-block;
  padding-right: 16px;
- transition: color .3s var(--bezier);
- color: var(--link-text-color);
- `)])]);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-link-text-color);
+ `, [(0, cssr_1.c)('&:hover, &:focus', `
+ color: var(--n-link-text-color-hover);
+ `), (0, cssr_1.c)('&:active', `
+ color: var(--n-link-text-color-pressed);
+ `)])])]);

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -1072,8 +1072,8 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--menu-box-shadow': string;
-        '--bezier': string;
+        '--n-menu-box-shadow': string;
+        '--n-bezier': string;
     }>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     namespace: import("vue").ComputedRef<string | undefined>;

package/lib/auto-complete/src/AutoComplete.js

@@ -211,8 +211,8 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow } } = themeRef.value;
                 return {
-                    '--menu-box-shadow': menuBoxShadow,
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-menu-box-shadow': menuBoxShadow,
+                    '--n-bezier': cubicBezierEaseInOut
                 };
             }),
             mergedBordered: mergedBorderedRef,

package/lib/auto-complete/src/styles/index.cssr.js

@@ -13,8 +13,8 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
-// --bezier
-// --menu-box-shadow
+// --n-bezier
+// --n-menu-box-shadow
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('auto-complete', `
@@ -24,7 +24,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('auto-complete', `
  width: 100%;
  `), (0, cssr_1.cB)('auto-complete-menu', `
  margin: 4px 0;
- box-shadow: var(--menu-box-shadow);
+ box-shadow: var(--n-menu-box-shadow);
  `, [(0, fade_in_scale_up_cssr_1.default)({
-  originalTransition: 'background-color .3s var(--bezier)'
+  originalTransition: 'background-color .3s var(--n-bezier)'
 })])]);

package/lib/avatar/src/Avatar.d.ts

@@ -7,7 +7,6 @@ declare const avatarProps: {
     };
     readonly src: StringConstructor;
     readonly circle: BooleanConstructor;
-    readonly color: StringConstructor;
     readonly objectFit: {
         readonly type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         readonly default: "fill";
@@ -15,6 +14,8 @@ declare const avatarProps: {
     readonly round: BooleanConstructor;
     readonly onError: PropType<(e: Event) => void>;
     readonly fallbackSrc: StringConstructor;
+    /** @deprecated */
+    readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
@@ -54,7 +55,6 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly src: StringConstructor;
     readonly circle: BooleanConstructor;
-    readonly color: StringConstructor;
     readonly objectFit: {
         readonly type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         readonly default: "fill";
@@ -62,6 +62,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly round: BooleanConstructor;
     readonly onError: PropType<(e: Event) => void>;
     readonly fallbackSrc: StringConstructor;
+    /** @deprecated */
+    readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
@@ -99,11 +101,11 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     fitTextTransform: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--border-radius': string;
-        '--color': string;
-        '--bezier': string;
-        '--merged-size': string;
+        '--n-font-size': string;
+        '--n-border-radius': string;
+        '--n-color': string;
+        '--n-bezier': string;
+        '--n-merged-size': string;
     }>;
     hasLoadError: import("vue").Ref<boolean>;
     handleError: (e: Event) => void;
@@ -111,11 +113,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly size?: unknown;
     readonly src?: unknown;
     readonly circle?: unknown;
-    readonly color?: unknown;
     readonly objectFit?: unknown;
     readonly round?: unknown;
     readonly onError?: unknown;
     readonly fallbackSrc?: unknown;
+    readonly color?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;

package/lib/avatar/src/Avatar.js

@@ -13,10 +13,12 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: {
         type: [String, Number],
         default: 'medium'
-    }, src: String, circle: Boolean, color: String, objectFit: {
+    }, src: String, circle: Boolean, objectFit: {
         type: String,
         default: 'fill'
-    }, round: Boolean, onError: Function, fallbackSrc: String });
+    }, round: Boolean, onError: Function, fallbackSrc: String, 
+    /** @deprecated */
+    color: String });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Avatar',
     props: avatarProps,
@@ -67,7 +69,7 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefix: mergedClsPrefixRef,
             fitTextTransform,
             cssVars: (0, vue_1.computed)(() => {
-                const { size } = props;
+                const { size, color: propColor } = props;
                 const { self: { borderRadius, fontSize, color }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 let height;
                 if (typeof size === 'number') {
@@ -77,11 +79,11 @@ exports.default = (0, vue_1.defineComponent)({
                     height = themeRef.value.self[(0, _utils_1.createKey)('height', size)];
                 }
                 return {
-                    '--font-size': fontSize,
-                    '--border-radius': mergedRoundRef.value ? '50%' : borderRadius,
-                    '--color': color,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--merged-size': `var(--avatar-size-override, ${height})`
+                    '--n-font-size': fontSize,
+                    '--n-border-radius': mergedRoundRef.value ? '50%' : borderRadius,
+                    '--n-color': propColor || color,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-merged-size': `var(--n-avatar-size-override, ${height})`
                 };
             }),
             hasLoadError: hasLoadErrorRef,
@@ -96,7 +98,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         else if (!(!$slots.default && src)) {
             img = ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.fitTextTransform }, {
-                default: () => ((0, vue_1.h)("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text`, style: { background: this.color } }, $slots))
+                default: () => ((0, vue_1.h)("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text` }, $slots))
             }));
         }
         else {

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

@@ -5,27 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --font-size
-// --border-radius
-// --color
-// --bezier
-// --size
+// --n-font-size
+// --n-border-radius
+// --n-color
+// --n-bezier
+// --n-merged-size
 
 
 exports.default = (0, cssr_1.cB)('avatar', `
- width: var(--merged-size);
- height: var(--merged-size);
+ width: var(--n-merged-size);
+ height: var(--n-merged-size);
  color: #FFF;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  display: inline-flex;
  position: relative;
  overflow: hidden;
  text-align: center;
- border-radius: var(--border-radius);
- background-color: var(--color);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-color);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
 `, [(0, cssr_1.c)('img', `
  width: 100%;
  height: 100%;
@@ -37,7 +37,5 @@ exports.default = (0, cssr_1.cB)('avatar', `
  top: 50%;
  `), (0, cssr_1.cB)('icon', `
  vertical-align: bottom;
- font-size: var(--size);
- `), (0, cssr_1.cE)('text', {
-  lineHeight: 1.25
-})]);
+ font-size: calc(var(--n-merged-size) - 6px);
+ `), (0, cssr_1.cE)('text', 'line-height: 1.25')]);

package/lib/back-top/src/BackTop.d.ts

@@ -185,19 +185,19 @@ declare const _default: import("vue").DefineComponent<{
     handleScroll: () => void;
     handleClick: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border-radius': string;
-        '--height': string;
-        '--width': string;
-        '--box-shadow': string;
-        '--box-shadow-hover': string;
-        '--box-shadow-pressed': string;
-        '--color': string;
-        '--icon-size': string;
-        '--icon-color': string;
-        '--icon-color-hover': string;
-        '--icon-color-pressed': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-height': string;
+        '--n-width': string;
+        '--n-box-shadow': string;
+        '--n-box-shadow-hover': string;
+        '--n-box-shadow-pressed': string;
+        '--n-color': string;
+        '--n-icon-size': string;
+        '--n-icon-color': string;
+        '--n-icon-color-hover': string;
+        '--n-icon-color-pressed': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly show?: unknown;

package/lib/back-top/src/BackTop.js

@@ -178,19 +178,19 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { color, boxShadow, boxShadowHover, boxShadowPressed, iconColor, iconColorHover, iconColorPressed, width, height, iconSize, borderRadius, textColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--height': height,
-                    '--width': width,
-                    '--box-shadow': boxShadow,
-                    '--box-shadow-hover': boxShadowHover,
-                    '--box-shadow-pressed': boxShadowPressed,
-                    '--color': color,
-                    '--icon-size': iconSize,
-                    '--icon-color': iconColor,
-                    '--icon-color-hover': iconColorHover,
-                    '--icon-color-pressed': iconColorPressed,
-                    '--text-color': textColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-height': height,
+                    '--n-width': width,
+                    '--n-box-shadow': boxShadow,
+                    '--n-box-shadow-hover': boxShadowHover,
+                    '--n-box-shadow-pressed': boxShadowPressed,
+                    '--n-color': color,
+                    '--n-icon-size': iconSize,
+                    '--n-icon-color': iconColor,
+                    '--n-icon-color-hover': iconColorHover,
+                    '--n-icon-color-pressed': iconColorPressed,
+                    '--n-text-color': textColor
                 };
             })
         };

package/lib/back-top/src/styles/index.cssr.js

@@ -13,19 +13,19 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
-// --bezier
-// --border-radius
-// --height
-// --width
-// --box-shadow
-// --box-shadow-hover
-// --box-shadow-pressed
-// --color
-// --icon-size
-// --icon-color
-// --icon-color-hover
-// --icon-color-pressed
-// --text-color
+// --n-bezier
+// --n-border-radius
+// --n-height
+// --n-width
+// --n-box-shadow
+// --n-box-shadow-hover
+// --n-box-shadow-pressed
+// --n-color
+// --n-icon-size
+// --n-icon-color
+// --n-icon-color-hover
+// --n-icon-color-pressed
+// --n-text-color
 
 
 exports.default = (0, cssr_1.cB)('back-top', `
@@ -36,30 +36,30 @@ exports.default = (0, cssr_1.cB)('back-top', `
  display: flex;
  align-items: center;
  justify-content: center;
- color: var(--text-color);
+ color: var(--n-text-color);
  transition:
- color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier);
- border-radius: var(--border-radius);
- height: var(--height);
- min-width: var(--width);
- box-shadow: var(--box-shadow);
- background-color: var(--color);
+ color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ border-radius: var(--n-border-radius);
+ height: var(--n-height);
+ min-width: var(--n-width);
+ box-shadow: var(--n-box-shadow);
+ background-color: var(--n-color);
 `, [(0, fade_in_scale_up_cssr_1.default)(), (0, cssr_1.cM)('transition-disabled', {
   transition: 'none !important'
 }), (0, cssr_1.cB)('base-icon', `
- font-size: var(--icon-size);
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ font-size: var(--n-icon-size);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  `), (0, cssr_1.c)('svg', {
   pointerEvents: 'none'
 }), (0, cssr_1.c)('&:hover', {
-  boxShadow: 'var(--box-shadow-hover)'
+  boxShadow: 'var(--n-box-shadow-hover)'
 }, [(0, cssr_1.cB)('base-icon', {
-  color: 'var(--icon-color-hover)'
+  color: 'var(--n-icon-color-hover)'
 })]), (0, cssr_1.c)('&:active', {
-  boxShadow: 'var(--box-shadow-pressed)'
+  boxShadow: 'var(--n-box-shadow-pressed)'
 }, [(0, cssr_1.cB)('base-icon', {
-  color: 'var(--icon-color-pressed)'
+  color: 'var(--n-icon-color-pressed)'
 })])]);

package/lib/badge/src/Badge.d.ts

@@ -111,12 +111,12 @@ declare const _default: import("vue").DefineComponent<{
     handleAfterEnter: () => void;
     handleAfterLeave: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--font-family': string;
-        '--color': string;
-        '--ripple-color': string;
-        '--bezier': string;
-        '--ripple-bezier': string;
+        '--n-font-size': string;
+        '--n-font-family': string;
+        '--n-color': string;
+        '--n-ripple-color': string;
+        '--n-bezier': string;
+        '--n-ripple-bezier': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly value?: unknown;

package/lib/badge/src/Badge.js

@@ -57,12 +57,12 @@ exports.default = (0, vue_1.defineComponent)({
                 const { type, color: propColor } = props;
                 const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [(0, _utils_1.createKey)('color', type)]: color, fontFamily, fontSize } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--font-family': fontFamily,
-                    '--color': propColor || color,
-                    '--ripple-color': propColor || color,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--ripple-bezier': cubicBezierEaseOut
+                    '--n-font-size': fontSize,
+                    '--n-font-family': fontFamily,
+                    '--n-color': propColor || color,
+                    '--n-ripple-color': propColor || color,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-ripple-bezier': cubicBezierEaseOut
                 };
             })
         };

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

@@ -13,30 +13,30 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
-// --color
-// --ripple-color
-// --bezier
-// --ripple-bezier
-// --font-size
-// --font-family
+// --n-color
+// --n-ripple-color
+// --n-bezier
+// --n-ripple-bezier
+// --n-font-size
+// --n-font-family
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes badge-wave-spread', {
   from: {
-    boxShadow: '0 0 0.5px 0px var(--ripple-color)',
+    boxShadow: '0 0 0.5px 0px var(--n-ripple-color)',
     opacity: 0.6
   },
   to: {
     // don't use exact 5px since chrome will display the animation with glitches
-    boxShadow: '0 0 0.5px 4.5px var(--ripple-color)',
+    boxShadow: '0 0 0.5px 4.5px var(--n-ripple-color)',
     opacity: 0
   }
 }), (0, cssr_1.cB)('badge', `
  display: inline-flex;
  position: relative;
  vertical-align: middle;
- color: var(--color);
- font-family: var(--font-family);
+ color: var(--n-color);
+ font-family: var(--n-font-family);
  `, [(0, cssr_1.cM)('as-is', [(0, cssr_1.cB)('badge-sup', {
   position: 'static',
   transform: 'translateX(0)'
@@ -53,10 +53,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes badge-wave-spread', {
 }, [(0, cssr_1.c)('::before', {
   borderRadius: '4px'
 })])]), (0, cssr_1.cB)('badge-sup', `
- background: var(--color);
+ background: var(--n-color);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  color: #FFF;
  position: absolute;
  height: 18px;
@@ -64,7 +64,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes badge-wave-spread', {
  border-radius: 9px;
  padding: 0 6px;
  text-align: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  transform: translateX(-50%);
  left: 100%;
  bottom: calc(100% - 9px);
@@ -78,7 +78,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes badge-wave-spread', {
   animationDuration: '2s',
   animationIterationCount: 'infinite',
   animationDelay: '1s',
-  animationTimingFunction: 'var(--ripple-bezier)',
+  animationTimingFunction: 'var(--n-ripple-bezier)',
   animationName: 'badge-wave-spread'
 }), (0, cssr_1.c)('&::before', `
  opacity: 0;