naive-ui 2.22.0 → 2.24.0

package/lib/breadcrumb/src/Breadcrumb.d.ts

@@ -74,14 +74,14 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--bezier': string;
-        '--item-text-color': string;
-        '--item-text-color-hover': string;
-        '--item-text-color-pressed': string;
-        '--item-text-color-active': string;
-        '--separator-color': string;
-        '--font-weight-active': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-item-text-color': string;
+        '--n-item-text-color-hover': string;
+        '--n-item-text-color-pressed': string;
+        '--n-item-text-color-active': string;
+        '--n-separator-color': string;
+        '--n-font-weight-active': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly separator?: unknown;

package/lib/breadcrumb/src/Breadcrumb.js

@@ -28,14 +28,14 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { separatorColor, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, fontSize, fontWeightActive } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--item-text-color': itemTextColor,
-                    '--item-text-color-hover': itemTextColorHover,
-                    '--item-text-color-pressed': itemTextColorPressed,
-                    '--item-text-color-active': itemTextColorActive,
-                    '--separator-color': separatorColor,
-                    '--font-weight-active': fontWeightActive
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-item-text-color': itemTextColor,
+                    '--n-item-text-color-hover': itemTextColorHover,
+                    '--n-item-text-color-pressed': itemTextColorPressed,
+                    '--n-item-text-color-active': itemTextColorActive,
+                    '--n-separator-color': separatorColor,
+                    '--n-font-weight-active': fontWeightActive
                 };
             })
         };

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

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --font-size
-// --bezier
-// --item-text-color
-// --item-text-color-hover
-// --item-text-color-pressed
-// --item-text-color-active
-// --separator-color
-// --font-weight-active
+// --n-font-size
+// --n-bezier
+// --n-item-text-color
+// --n-item-text-color-hover
+// --n-item-text-color-pressed
+// --n-item-text-color-active
+// --n-separator-color
+// --n-font-weight-active
 
 
 exports.default = (0, cssr_1.cB)('breadcrumb', `
@@ -25,36 +25,36 @@ exports.default = (0, cssr_1.cB)('breadcrumb', `
  color: inherit;
  text-decoration: inherit;
  `), (0, cssr_1.cB)('breadcrumb-item', {
-  fontSize: 'var(--font-size)',
-  transition: 'color .3s var(--bezier)',
+  fontSize: 'var(--n-font-size)',
+  transition: 'color .3s var(--n-bezier)',
   display: 'inline-block'
 }, [(0, cssr_1.cB)('icon', `
  font-size: 18px;
  vertical-align: -.2em;
- transition: color .3s var(--bezier);
- color: var(--item-text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-item-text-color);
  `), (0, cssr_1.cE)('link', {
   cursor: 'pointer',
-  transition: 'color .3s var(--bezier)',
-  color: 'var(--item-text-color)'
+  transition: 'color .3s var(--n-bezier)',
+  color: 'var(--n-item-text-color)'
 }), (0, cssr_1.cE)('separator', {
   margin: '0 8px',
-  color: 'var(--separator-color)',
-  transition: 'color .3s var(--bezier)'
+  color: 'var(--n-separator-color)',
+  transition: 'color .3s var(--n-bezier)'
 }), (0, cssr_1.c)('&:hover', [(0, cssr_1.cB)('icon', {
-  color: 'var(--item-text-color-hover)'
+  color: 'var(--n-item-text-color-hover)'
 }), (0, cssr_1.cE)('link', {
-  color: 'var(--item-text-color-hover)'
+  color: 'var(--n-item-text-color-hover)'
 })]), (0, cssr_1.c)('&:active', [(0, cssr_1.cB)('icon', {
-  color: 'var(--item-text-color-pressed)'
+  color: 'var(--n-item-text-color-pressed)'
 }), (0, cssr_1.cE)('link', {
-  color: 'var(--item-text-color-pressed)'
+  color: 'var(--n-item-text-color-pressed)'
 })]), (0, cssr_1.c)('&:last-child', [(0, cssr_1.cE)('link', `
- font-weight: var(--font-weight-active);
+ font-weight: var(--n-font-weight-active);
  cursor: unset;
- color: var(--item-text-color-active);
+ color: var(--n-item-text-color-active);
  `), (0, cssr_1.cB)('icon', {
-  color: 'var(--item-text-color-active)'
+  color: 'var(--n-item-text-color-active)'
 }), (0, cssr_1.cE)('separator', {
   display: 'none'
 })])])]);

package/lib/button/src/Button.d.ts

@@ -41,11 +41,12 @@ declare const buttonProps: {
         readonly type: PropType<"button" | "reset" | "submit">;
         readonly default: "button";
     };
-    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     readonly bordered: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly internalAutoFocus: BooleanConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -700,11 +701,12 @@ declare const Button: import("vue").DefineComponent<{
         readonly type: PropType<"button" | "reset" | "submit">;
         readonly default: "button";
     };
-    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     readonly bordered: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly internalAutoFocus: BooleanConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -1318,8 +1320,8 @@ declare const Button: import("vue").DefineComponent<{
         rippleDuration: string;
     }, any>>>;
 }, {
-    selfRef: import("vue").Ref<HTMLElement | null>;
-    waveRef: import("vue").Ref<{
+    selfElRef: import("vue").Ref<HTMLElement | null>;
+    waveElRef: import("vue").Ref<{
         play: () => void;
     } | null>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
@@ -1393,8 +1395,9 @@ declare const Button: import("vue").DefineComponent<{
     readonly dashed?: unknown;
     readonly iconPlacement?: unknown;
     readonly attrType?: unknown;
-    readonly onClick?: unknown;
     readonly bordered?: unknown;
+    readonly onClick?: unknown;
+    readonly internalAutoFocus?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -1418,6 +1421,7 @@ declare const Button: import("vue").DefineComponent<{
     quaternary: boolean;
     iconPlacement: "left" | "right";
     attrType: "button" | "reset" | "submit";
+    internalAutoFocus: boolean;
 } & {
     color?: string | undefined;
     size?: Size | undefined;
@@ -2055,6 +2059,7 @@ declare const Button: import("vue").DefineComponent<{
     quaternary: boolean;
     iconPlacement: "left" | "right";
     attrType: "button" | "reset" | "submit";
+    internalAutoFocus: boolean;
 }>;
 declare type NativeButtonProps = Omit<ButtonHTMLAttributes, keyof ButtonProps>;
 declare type MergedProps = Partial<ButtonProps & NativeButtonProps>;

package/lib/button/src/Button.js

@@ -33,10 +33,10 @@ const buttonProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, attrType: {
         type: String,
         default: 'button'
-    }, onClick: [Function, Array], bordered: {
+    }, bordered: {
         type: Boolean,
         default: true
-    } });
+    }, onClick: [Function, Array], internalAutoFocus: Boolean });
 const Button = (0, vue_1.defineComponent)({
     name: 'Button',
     props: buttonProps,
@@ -50,9 +50,18 @@ const Button = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const selfRef = (0, vue_1.ref)(null);
-        const waveRef = (0, vue_1.ref)(null);
+        const selfElRef = (0, vue_1.ref)(null);
+        const waveElRef = (0, vue_1.ref)(null);
         const enterPressedRef = (0, vue_1.ref)(false);
+        (0, vue_1.onMounted)(() => {
+            const { value: selfEl } = selfElRef;
+            if (selfEl &&
+                !props.disabled &&
+                props.focusable &&
+                props.internalAutoFocus) {
+                selfEl.focus({ preventScroll: true });
+            }
+        });
         const showBorderRef = (0, vooks_1.useMemo)(() => {
             return (!props.quaternary &&
                 !props.tertiary &&
@@ -88,19 +97,17 @@ const Button = (0, vue_1.defineComponent)({
                 return;
             }
             if (mergedFocusableRef.value) {
-                (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+                (_a = selfElRef.value) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
             }
         };
         const handleClick = (e) => {
+            var _a;
             if (!props.disabled && !props.loading) {
                 const { onClick } = props;
                 if (onClick)
                     (0, _utils_1.call)(onClick, e);
                 if (!props.text) {
-                    const { value } = waveRef;
-                    if (value) {
-                        value.play();
-                    }
+                    (_a = waveElRef.value) === null || _a === void 0 ? void 0 : _a.play();
                 }
             }
         };
@@ -132,8 +139,8 @@ const Button = (0, vue_1.defineComponent)({
         const themeRef = (0, _mixins_1.useTheme)('Button', 'Button', button_cssr_1.default, styles_1.buttonLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = (0, use_rtl_1.default)('Button', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
         return {
-            selfRef,
-            waveRef,
+            selfElRef,
+            waveElRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedFocusable: mergedFocusableRef,
             mergedSize: mergedSizeRef,
@@ -389,7 +396,7 @@ const Button = (0, vue_1.defineComponent)({
     },
     render() {
         const { $slots, mergedClsPrefix, tag: Component } = this;
-        return ((0, vue_1.h)(Component, { ref: "selfRef", class: [
+        return ((0, vue_1.h)(Component, { ref: "selfElRef", class: [
                 `${mergedClsPrefix}-button`,
                 `${mergedClsPrefix}-button--${this.type}-type`,
                 `${mergedClsPrefix}-button--${this.mergedSize}-type`,
@@ -413,7 +420,7 @@ const Button = (0, vue_1.defineComponent)({
                     }))) : null
             }),
             $slots.default && this.iconPlacement === 'left' ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
-            !this.text ? ((0, vue_1.h)(_internal_1.NBaseWave, { ref: "waveRef", clsPrefix: mergedClsPrefix })) : null,
+            !this.text ? ((0, vue_1.h)(_internal_1.NBaseWave, { ref: "waveElRef", clsPrefix: mergedClsPrefix })) : null,
             this.showBorder ? ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__border`, style: this.customColorCssVars })) : null,
             this.showBorder ? ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__state-border`, style: this.customColorCssVars })) : null));
     }

package/lib/calendar/src/Calendar.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import type { OnUpdateValue, DateItem } from './interface';
+import type { OnUpdateValue, DateItem, OnPanelChange } from './interface';
 declare const calendarProps: {
     readonly isDateDisabled: PropType<(date: number) => boolean | undefined>;
     readonly value: NumberConstructor;
@@ -8,6 +8,7 @@ declare const calendarProps: {
         readonly type: PropType<number | null>;
         readonly defualt: null;
     };
+    readonly onPanelChange: PropType<OnPanelChange>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Calendar", {
@@ -700,6 +701,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<number | null>;
         readonly defualt: null;
     };
+    readonly onPanelChange: PropType<OnPanelChange>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Calendar", {
@@ -1762,32 +1764,33 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--border-radius': string;
-        '--text-color': string;
-        '--title-font-weight': string;
-        '--title-font-size': string;
-        '--title-text-color': string;
-        '--day-text-color': string;
-        '--font-size': string;
-        '--line-height': string;
-        '--date-color-current': string;
-        '--date-text-color-current': string;
-        '--cell-color': string;
-        '--cell-color-modal': string;
-        '--cell-color-popover': string;
-        '--cell-color-hover': string;
-        '--cell-color-hover-modal': string;
-        '--cell-color-hover-popover': string;
-        '--bar-color': string;
+        '--n-bezier': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-border-radius': string;
+        '--n-text-color': string;
+        '--n-title-font-weight': string;
+        '--n-title-font-size': string;
+        '--n-title-text-color': string;
+        '--n-day-text-color': string;
+        '--n-font-size': string;
+        '--n-line-height': string;
+        '--n-date-color-current': string;
+        '--n-date-text-color-current': string;
+        '--n-cell-color': string;
+        '--n-cell-color-modal': string;
+        '--n-cell-color-popover': string;
+        '--n-cell-color-hover': string;
+        '--n-cell-color-hover-modal': string;
+        '--n-cell-color-hover-popover': string;
+        '--n-bar-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly isDateDisabled?: unknown;
     readonly value?: unknown;
     readonly defaultValue?: unknown;
+    readonly onPanelChange?: unknown;
     readonly 'onUpdate:value'?: unknown;
     readonly onUpdateValue?: unknown;
     readonly theme?: unknown;
@@ -2480,5 +2483,6 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     isDateDisabled?: ((date: number) => boolean | undefined) | undefined;
+    onPanelChange?: OnPanelChange | undefined;
 }>, {}>;
 export default _default;

package/lib/calendar/src/Calendar.js

@@ -17,7 +17,7 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const calendarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { isDateDisabled: Function, value: Number, defaultValue: {
         type: Number,
         defualt: null
-    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+    }, onPanelChange: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Calendar',
     props: calendarProps,
@@ -41,10 +41,22 @@ exports.default = (0, vue_1.defineComponent)({
             uncontrolledValueRef.value = value;
         }
         function handlePrevClick() {
-            monthTsRef.value = (0, date_fns_1.addMonths)(monthTsRef.value, -1).valueOf();
+            var _a;
+            const monthTs = (0, date_fns_1.addMonths)(monthTsRef.value, -1).valueOf();
+            monthTsRef.value = monthTs;
+            (_a = props.onPanelChange) === null || _a === void 0 ? void 0 : _a.call(props, {
+                year: (0, date_fns_1.getYear)(monthTs),
+                month: (0, date_fns_1.getMonth)(monthTs) + 1
+            });
         }
         function handleNextClick() {
-            monthTsRef.value = (0, date_fns_1.addMonths)(monthTsRef.value, 1).valueOf();
+            var _a;
+            const monthTs = (0, date_fns_1.addMonths)(monthTsRef.value, 1).valueOf();
+            monthTsRef.value = monthTs;
+            (_a = props.onPanelChange) === null || _a === void 0 ? void 0 : _a.call(props, {
+                year: (0, date_fns_1.getYear)(monthTs),
+                month: (0, date_fns_1.getMonth)(monthTs) + 1
+            });
         }
         function handleTodayClick() {
             monthTsRef.value = (0, date_fns_1.startOfMonth)(now).valueOf();
@@ -67,27 +79,27 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { borderColor, borderColorModal, borderColorPopover, borderRadius, titleFontSize, textColor, titleFontWeight, titleTextColor, dayTextColor, fontSize, lineHeight, dateColorCurrent, dateTextColorCurrent, cellColorHover, cellColor, cellColorModal, barColor, cellColorPopover, cellColorHoverModal, cellColorHoverPopover } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--border-radius': borderRadius,
-                    '--text-color': textColor,
-                    '--title-font-weight': titleFontWeight,
-                    '--title-font-size': titleFontSize,
-                    '--title-text-color': titleTextColor,
-                    '--day-text-color': dayTextColor,
-                    '--font-size': fontSize,
-                    '--line-height': lineHeight,
-                    '--date-color-current': dateColorCurrent,
-                    '--date-text-color-current': dateTextColorCurrent,
-                    '--cell-color': cellColor,
-                    '--cell-color-modal': cellColorModal,
-                    '--cell-color-popover': cellColorPopover,
-                    '--cell-color-hover': cellColorHover,
-                    '--cell-color-hover-modal': cellColorHoverModal,
-                    '--cell-color-hover-popover': cellColorHoverPopover,
-                    '--bar-color': barColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-border-radius': borderRadius,
+                    '--n-text-color': textColor,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-day-text-color': dayTextColor,
+                    '--n-font-size': fontSize,
+                    '--n-line-height': lineHeight,
+                    '--n-date-color-current': dateColorCurrent,
+                    '--n-date-text-color-current': dateTextColorCurrent,
+                    '--n-cell-color': cellColor,
+                    '--n-cell-color-modal': cellColorModal,
+                    '--n-cell-color-popover': cellColorPopover,
+                    '--n-cell-color-hover': cellColorHover,
+                    '--n-cell-color-hover-modal': cellColorHoverModal,
+                    '--n-cell-color-hover-popover': cellColorHoverPopover,
+                    '--n-bar-color': barColor
                 };
             })
         };

package/lib/calendar/src/interface.d.ts

@@ -4,3 +4,7 @@ export interface DateItem {
     month: number;
     date: number;
 }
+export declare type OnPanelChange = (info: {
+    year: number;
+    month: number;
+}) => void;

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

@@ -5,30 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --border-color
-// --border-color-modal
-// --border-color-popover
-// --border-radius
-// --text-color
-// --title-font-weight
-// --title-font-size
-// --title-text-color
-// --day-text-color
-// --font-size
-// --line-height
-// --date-color-current
-// --cell-color
-// --cell-color-hover
-// --cell-color-hover-modal
-// --cell-color-hover-popover
-// --bar-color
+// --n-bezier
+// --n-border-color
+// --n-border-color-modal
+// --n-border-color-popover
+// --n-border-radius
+// --n-text-color
+// --n-title-font-weight
+// --n-title-font-size
+// --n-title-text-color
+// --n-day-text-color
+// --n-font-size
+// --n-line-height
+// --n-date-color-current
+// --n-cell-color
+// --n-cell-color-hover
+// --n-cell-color-hover-modal
+// --n-cell-color-hover-popover
+// --n-bar-color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
- line-height: var(--line-height);
- font-size: var(--font-size);
- color: var(--text-color);
+ line-height: var(--n-line-height);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
  height: 720px;
  display: flex;
  flex-direction: column;
@@ -40,13 +40,13 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
  display: flex;
  align-items: center;
  line-height: 1;
- font-size: var(--title-font-size);
+ font-size: var(--n-title-font-size);
  padding: 0 0 18px 0;
  justify-content: space-between;
  `, [(0, cssr_1.cE)('title', `
- color: var(--title-text-color);
- font-weight: var(--title-font-weight);
- transition: color .3s var(--bezier);
+ color: var(--n-title-text-color);
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('extra', `
  display: flex;
  align-items: center;
@@ -54,32 +54,32 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
- border-radius: var(--border-radius);
+ border-radius: var(--n-border-radius);
  flex: 1;
  border-top: 1px solid;
  border-left: 1px solid;
- border-color: var(--border-color);
- transition: border-color .3s var(--bezier);
+ border-color: var(--n-border-color);
+ transition: border-color .3s var(--n-bezier);
  `), (0, cssr_1.cB)('calendar-cell', `
  box-sizing: border-box;
  padding: 10px;
  border-right: 1px solid;
  border-bottom: 1px solid;
- border-color: var(--border-color);
+ border-color: var(--n-border-color);
  cursor: pointer;
  position: relative;
  transition:
- color .3s var(--bezier),
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `, [(0, cssr_1.c)('&:nth-child(7)', `
- border-top-right-radius: var(--border-radius);
+ border-top-right-radius: var(--n-border-radius);
  `), (0, cssr_1.c)('&:nth-last-child(7)', `
- border-bottom-left-radius: var(--border-radius);
+ border-bottom-left-radius: var(--n-border-radius);
  `), (0, cssr_1.c)('&:last-child', `
- border-bottom-right-radius: var(--border-radius);
+ border-bottom-right-radius: var(--n-border-radius);
  `), (0, cssr_1.c)('&:hover', `
- background-color: var(--cell-color-hover);
+ background-color: var(--n-cell-color-hover);
  `), (0, cssr_1.cE)('bar', `
  position: absolute;
  left: 0;
@@ -87,22 +87,22 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
  bottom: -1px;
  height: 3px;
  background-color: #0000;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  `), (0, cssr_1.cM)('selected', [(0, cssr_1.cE)('bar', `
- background-color: var(--bar-color);
+ background-color: var(--n-bar-color);
  `)]), (0, cssr_1.cB)('calendar-date', `
  transition:
- color .3s var(--bezier),
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
- color: var(--text-color);
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `, [(0, cssr_1.cE)('date', `
- color: var(--text-color);
- `)]), (0, cssr_1.cM)('disabled', 'color: var(--day-text-color);', [(0, cssr_1.cB)('calendar-date', [(0, cssr_1.cE)('date', `
- color: var(--day-text-color);
+ color: var(--n-text-color);
+ `)]), (0, cssr_1.cM)('disabled', 'color: var(--n-day-text-color);', [(0, cssr_1.cB)('calendar-date', [(0, cssr_1.cE)('date', `
+ color: var(--n-day-text-color);
  `)])]), (0, cssr_1.cM)('current', [(0, cssr_1.cB)('calendar-date', [(0, cssr_1.cE)('date', `
- color: var(--date-text-color-current);
- background-color: var(--date-color-current);
+ color: var(--n-date-text-color-current);
+ background-color: var(--n-date-color-current);
  `)])]), (0, cssr_1.cB)('calendar-date', `
  position: relative;
  line-height: 1;
@@ -120,21 +120,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('calendar', `
  width: 1.8em;
  height: 1.8em;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('day', `
- color: var(--day-text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-day-text-color);
+ transition: color .3s var(--n-bezier);
  `)])])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('calendar', [(0, cssr_1.cB)('calendar-dates', `
- border-color: var(--border-color-modal);
+ border-color: var(--n-border-color-modal);
  `), (0, cssr_1.cB)('calendar-cell', `
- border-color: var(--border-color-modal);
+ border-color: var(--n-border-color-modal);
  `, [(0, cssr_1.c)('&:hover', `
- background-color: var(--cell-color-hover-modal);
+ background-color: var(--n-cell-color-hover-modal);
  `)])])), (0, cssr_1.insidePopover)((0, cssr_1.cB)('calendar', [(0, cssr_1.cB)('calendar-dates', `
- border-color: var(--border-color-popover);
+ border-color: var(--n-border-color-popover);
  `), (0, cssr_1.cB)('calendar-cell', `
- border-color: var(--border-color-popover);
+ border-color: var(--n-border-color-popover);
  `, [(0, cssr_1.c)('&:hover', `
- background-color: var(--cell-color-hover-popover);
+ background-color: var(--n-cell-color-hover-popover);
  `)])]))]);