naive-ui 2.24.7 → 2.25.0

package/lib/form/src/FormItemGridItem.d.ts

@@ -21,7 +21,7 @@ export declare const formItemGiProps: {
     readonly rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     readonly size: import("vue").PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    readonly validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -138,7 +138,7 @@ export declare const formItemGiProps: {
         readonly default: true;
     };
 };
-export declare const formItemGiPropKeys: ("label" | "size" | "first" | "offset" | "span" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "suffix" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps" | "privateSpan" | "privateColStart" | "privateShow" | "privateOffset")[];
+export declare const formItemGiPropKeys: ("label" | "size" | "first" | "offset" | "span" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelWidth" | "labelAlign" | "labelPlacement" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "suffix" | "labelStyle" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps" | "privateSpan" | "privateColStart" | "privateShow" | "privateOffset")[];
 export declare type FormItemGiProps = ExtractPublicPropTypes<typeof formItemGiProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly label: StringConstructor;
@@ -162,7 +162,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     readonly size: import("vue").PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    readonly validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -309,7 +309,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     readonly size: import("vue").PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    readonly validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -430,10 +430,10 @@ declare const _default: import("vue").DefineComponent<{
     offset: string | number;
     span: string | number;
     required: boolean;
-    suffix: boolean;
     showRequireMark: boolean | undefined;
     showFeedback: boolean | undefined;
     showLabel: boolean | undefined;
+    suffix: boolean;
     ignorePathChange: boolean;
     privateShow: boolean;
 }>;

package/lib/form/src/FormItemRow.d.ts

@@ -21,7 +21,7 @@ declare const formItemRowProps: {
     rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     size: import("vue").PropType<"small" | "medium" | "large">;
     ignorePathChange: BooleanConstructor;
-    validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     feedback: StringConstructor;
     showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -167,7 +167,7 @@ declare const _default: import("vue").DefineComponent<{
     rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     size: import("vue").PropType<"small" | "medium" | "large">;
     ignorePathChange: BooleanConstructor;
-    validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     feedback: StringConstructor;
     showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -320,7 +320,7 @@ declare const _default: import("vue").DefineComponent<{
     rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     size: import("vue").PropType<"small" | "medium" | "large">;
     ignorePathChange: BooleanConstructor;
-    validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     feedback: StringConstructor;
     showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;

package/lib/form/src/context.d.ts

@@ -0,0 +1,3 @@
+import type { FormInjection } from './interface';
+export declare const formInjectionKey: import("vue").InjectionKey<FormInjection>;
+export declare const formItemInstsInjectionKey: import("vue").InjectionKey<unknown>;

package/lib/form/src/context.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formItemInstsInjectionKey = exports.formInjectionKey = void 0;
+const _utils_1 = require("../../_utils");
+exports.formInjectionKey = (0, _utils_1.createInjectionKey)('n-form');
+exports.formItemInstsInjectionKey = (0, _utils_1.createInjectionKey)('n-form-item-insts');

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

@@ -4,7 +4,8 @@ import { FormSetupProps } from './Form';
 export interface FormRules {
     [path: string]: FormRules | FormItemRule | FormItemRule[];
 }
-export declare type FormItemRuleValidatorParams = Parameters<NonNullable<RuleItem['validator']>>;
+declare type SetRule<T, R> = T extends (rule: any, ...args: infer K) => infer P ? (rule: R, ...args: K) => P : never;
+export declare type FormItemRuleValidatorParams = Parameters<SetRule<NonNullable<RuleItem['validator']>, FormItemRule>>;
 export declare type FormItemRuleValidator = (...args: FormItemRuleValidatorParams) => boolean | Error | Error[] | Promise<void> | undefined;
 export declare type FormItemRuleAsyncValidator = (...args: FormItemRuleValidatorParams) => Promise<void> | undefined;
 export declare type FormItemRule = Omit<RuleItem, 'validator' | 'asyncValidator'> & {
@@ -37,8 +38,6 @@ export interface FormInjection {
     maxChildLabelWidthRef: Ref<number | undefined>;
     deriveMaxChildLabelWidth: (currentWidth: number) => void;
 }
-export declare const formInjectionKey: import("vue").InjectionKey<FormInjection>;
-export declare const formItemInstsInjectionKey: import("vue").InjectionKey<unknown>;
 export declare type LabelAlign = 'left' | 'center' | 'right';
 export declare type LabelPlacement = 'left' | 'top';
 export declare type Size = 'small' | 'medium' | 'large';
@@ -52,3 +51,5 @@ export interface FormInst {
     validate: FormValidate;
     restoreValidation: () => void;
 }
+export declare type FormValidationStatus = 'success' | 'error' | 'warning';
+export {};

package/lib/form/src/interface.js

@@ -1,6 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formItemInstsInjectionKey = exports.formInjectionKey = void 0;
-const _utils_1 = require("../../_utils");
-exports.formInjectionKey = (0, _utils_1.createInjectionKey)('n-form');
-exports.formItemInstsInjectionKey = (0, _utils_1.createInjectionKey)('n-form-item-insts');

package/lib/form/src/styles/form-item.cssr.js

@@ -91,10 +91,11 @@ exports.default = (0, cssr_1.cB)('form-item', {
  box-sizing: border-box;
  min-height: var(--n-feedback-height);
  font-size: var(--n-feedback-font-size);
- padding: var(--n-feedback-padding);
  line-height: 1.25;
  transform-origin: top left;
- `, [(0, cssr_1.cB)('form-item-feedback', {
+ `, [(0, cssr_1.c)('&:not(:empty)', `
+ padding: var(--n-feedback-padding);
+ `), (0, cssr_1.cB)('form-item-feedback', {
   transition: 'color .3s var(--n-bezier)',
   color: 'var(--n-feedback-text-color)'
 }, [(0, cssr_1.cM)('warning', {

package/lib/form/src/utils.d.ts

@@ -11,7 +11,7 @@ export declare function formItemMisc(props: FormItemSetupProps): {
     mergedLabelAlign: ComputedRef<import("./interface").LabelAlign | undefined>;
     mergedShowRequireMark: ComputedRef<boolean | undefined>;
     mergedRequireMarkPlacement: ComputedRef<"left" | "right" | "right-hanging">;
-    mergedValidationStatus: ComputedRef<"error" | "success" | "warning" | undefined>;
+    mergedValidationStatus: ComputedRef<"success" | "error" | "warning" | undefined>;
     mergedShowFeedback: ComputedRef<boolean>;
     mergedShowLabel: ComputedRef<boolean>;
 };

package/lib/form/src/utils.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.formItemRule = exports.formItemMisc = exports.formItemSize = void 0;
 const vue_1 = require("vue");
 const lodash_1 = require("lodash");
-const interface_1 = require("./interface");
+const context_1 = require("./context");
 const _utils_1 = require("../../_utils");
 function formItemSize(props) {
-    const NForm = (0, vue_1.inject)(interface_1.formInjectionKey, null);
+    const NForm = (0, vue_1.inject)(context_1.formInjectionKey, null);
     return {
         mergedSize: (0, vue_1.computed)(() => {
             if (props.size !== undefined)
@@ -20,7 +20,7 @@ function formItemSize(props) {
 exports.formItemSize = formItemSize;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function formItemMisc(props) {
-    const NForm = (0, vue_1.inject)(interface_1.formInjectionKey, null);
+    const NForm = (0, vue_1.inject)(context_1.formInjectionKey, null);
     const mergedLabelWidthRef = (0, vue_1.computed)(() => {
         if (mergedLabelPlacementRef.value === 'top')
             return;
@@ -120,7 +120,7 @@ function formItemMisc(props) {
 exports.formItemMisc = formItemMisc;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function formItemRule(props) {
-    const NForm = (0, vue_1.inject)(interface_1.formInjectionKey, null);
+    const NForm = (0, vue_1.inject)(context_1.formInjectionKey, null);
     const compatibleRulePathRef = (0, vue_1.computed)(() => {
         const { rulePath } = props;
         if (rulePath !== undefined)

package/lib/global-style/src/GlobalStyle.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const common_1 = require("../../_styles/common");
-const ConfigProvider_1 = require("../../config-provider/src/ConfigProvider");
+const context_1 = require("../../config-provider/src/context");
 const lodash_1 = require("lodash");
 exports.default = (0, vue_1.defineComponent)({
     name: 'GlobalStyle',
     setup() {
         if (typeof document === 'undefined')
             return; // TODO: inject style for SSR
-        const NConfigProvider = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null);
+        const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const { body } = document;
         const { style } = body;
         let styleApplied = false;

package/lib/gradient-text/src/GradientText.d.ts

@@ -9,7 +9,7 @@ declare const gradientTextProps: {
     readonly size: PropType<string | number>;
     readonly fontSize: PropType<string | number>;
     readonly type: {
-        readonly type: PropType<"error" | "info" | "success" | "warning" | "primary" | "danger">;
+        readonly type: PropType<"success" | "error" | "warning" | "info" | "primary" | "danger">;
         readonly default: "primary";
     };
     readonly color: PropType<Gradient>;
@@ -62,7 +62,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly size: PropType<string | number>;
     readonly fontSize: PropType<string | number>;
     readonly type: {
-        readonly type: PropType<"error" | "info" | "success" | "warning" | "primary" | "danger">;
+        readonly type: PropType<"success" | "error" | "warning" | "info" | "primary" | "danger">;
         readonly default: "primary";
     };
     readonly color: PropType<Gradient>;
@@ -111,7 +111,7 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    compatibleType: import("vue").ComputedRef<"error" | "info" | "success" | "warning" | "primary">;
+    compatibleType: import("vue").ComputedRef<"success" | "error" | "warning" | "info" | "primary">;
     styleFontSize: import("vue").ComputedRef<string | number | undefined>;
     styleBgImage: import("vue").ComputedRef<string | undefined>;
     cssVars: import("vue").ComputedRef<{
@@ -125,7 +125,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly size: PropType<string | number>;
     readonly fontSize: PropType<string | number>;
     readonly type: {
-        readonly type: PropType<"error" | "info" | "success" | "warning" | "primary" | "danger">;
+        readonly type: PropType<"success" | "error" | "warning" | "info" | "primary" | "danger">;
         readonly default: "primary";
     };
     readonly color: PropType<Gradient>;
@@ -173,6 +173,6 @@ declare const _default: import("vue").DefineComponent<{
         colorEndSuccess: string;
     }, any>>>;
 }>>, {
-    type: "error" | "info" | "success" | "warning" | "primary" | "danger";
+    type: "success" | "error" | "warning" | "info" | "primary" | "danger";
 }>;
 export default _default;

package/lib/gradient-text/src/GradientText.js

@@ -43,7 +43,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return undefined;
         });
-        const themeRef = (0, _mixins_1.useTheme)('GradientText', 'GradientText', index_cssr_1.default, styles_1.gradientTextLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('GradientText', '-gradient-text', index_cssr_1.default, styles_1.gradientTextLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             compatibleType: compatibleTypeRef,

package/lib/grid/src/Grid.d.ts

@@ -31,7 +31,6 @@ export interface NGridInjection {
     xGapRef: Ref<string | undefined>;
     overflowRef: Ref<boolean>;
 }
-export declare const gridInjectionKey: import("vue").InjectionKey<NGridInjection>;
 export declare type GridProps = ExtractPublicPropTypes<typeof gridProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly responsive: {

package/lib/grid/src/Grid.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.gridInjectionKey = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const vueuc_1 = require("vueuc");
@@ -8,7 +7,7 @@ const seemly_1 = require("seemly");
 const config_1 = require("../../config-provider/src/config");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
-const GridItem_1 = require("./GridItem");
+const config_2 = require("./config");
 const defaultCols = 24;
 const gridProps = {
     responsive: {
@@ -36,7 +35,6 @@ const gridProps = {
         default: 0
     }
 };
-exports.gridInjectionKey = (0, _utils_1.createInjectionKey)('n-grid');
 exports.default = (0, vue_1.defineComponent)({
     name: 'Grid',
     inheritAttrs: false,
@@ -81,7 +79,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return undefined;
         });
-        (0, vue_1.provide)(exports.gridInjectionKey, {
+        (0, vue_1.provide)(config_2.gridInjectionKey, {
             itemStyleRef: (0, vue_1.toRef)(props, 'itemStyle'),
             xGapRef: responsiveXGapRef,
             overflowRef
@@ -118,7 +116,7 @@ exports.default = (0, vue_1.defineComponent)({
                 if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.__GRID_ITEM__) !== true)
                     return;
                 const clonedChild = (0, vue_1.cloneVNode)(child);
-                const rawChildSpan = Number((_c = (0, seemly_1.parseResponsivePropValue)((_b = clonedChild.props) === null || _b === void 0 ? void 0 : _b.span, responsiveQuery)) !== null && _c !== void 0 ? _c : GridItem_1.defaultSpan);
+                const rawChildSpan = Number((_c = (0, seemly_1.parseResponsivePropValue)((_b = clonedChild.props) === null || _b === void 0 ? void 0 : _b.span, responsiveQuery)) !== null && _c !== void 0 ? _c : config_2.defaultSpan);
                 if (rawChildSpan === 0)
                     return;
                 childrenAndRawSpan.push({
@@ -131,7 +129,7 @@ exports.default = (0, vue_1.defineComponent)({
             if (maybeSuffixNode === null || maybeSuffixNode === void 0 ? void 0 : maybeSuffixNode.props) {
                 const suffixPropValue = (_b = maybeSuffixNode.props) === null || _b === void 0 ? void 0 : _b.suffix;
                 if (suffixPropValue !== undefined && suffixPropValue !== false) {
-                    suffixSpan = (_d = (_c = maybeSuffixNode.props) === null || _c === void 0 ? void 0 : _c.span) !== null && _d !== void 0 ? _d : GridItem_1.defaultSpan;
+                    suffixSpan = (_d = (_c = maybeSuffixNode.props) === null || _c === void 0 ? void 0 : _c.span) !== null && _d !== void 0 ? _d : config_2.defaultSpan;
                     maybeSuffixNode.props.privateSpan = suffixSpan;
                     maybeSuffixNode.props.privateColStart =
                         responsiveCols + 1 - suffixSpan;

package/lib/grid/src/GridItem.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.gridItemPropKeys = exports.gridItemProps = exports.defaultSpan = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
-const Grid_1 = require("./Grid");
 const _utils_1 = require("../../_utils");
+const config_1 = require("./config");
 exports.defaultSpan = 1;
 exports.gridItemProps = {
     span: {
@@ -34,7 +34,7 @@ exports.default = (0, vue_1.defineComponent)({
     setup() {
         const { xGapRef, itemStyleRef, overflowRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-         } = (0, vue_1.inject)(Grid_1.gridInjectionKey);
+         } = (0, vue_1.inject)(config_1.gridInjectionKey);
         const self = (0, vue_1.getCurrentInstance)();
         return {
             overflow: overflowRef,

package/lib/grid/src/config.d.ts

@@ -0,0 +1,3 @@
+import type { NGridInjection } from './Grid';
+export declare const defaultSpan = 1;
+export declare const gridInjectionKey: import("vue").InjectionKey<NGridInjection>;

package/lib/grid/src/config.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridInjectionKey = exports.defaultSpan = void 0;
+const _utils_1 = require("../../_utils");
+exports.defaultSpan = 1;
+exports.gridInjectionKey = (0, _utils_1.createInjectionKey)('n-grid');

package/lib/icon/index.d.ts

@@ -1 +1 @@
-export { default as NIcon } from './src/Icon';
+export { NIcon } from './src/Icon';

package/lib/icon/index.js

@@ -1,9 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NIcon = void 0;
 /* istanbul ignore file */
 var Icon_1 = require("./src/Icon");
-Object.defineProperty(exports, "NIcon", { enumerable: true, get: function () { return __importDefault(Icon_1).default; } });
+Object.defineProperty(exports, "NIcon", { enumerable: true, get: function () { return Icon_1.NIcon; } });

package/lib/icon/src/Icon.d.ts

@@ -1,6 +1,6 @@
 import { Component, PropType } from 'vue';
 export declare type Depth = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | undefined;
-declare const _default: import("vue").DefineComponent<{
+export declare const NIcon: import("vue").DefineComponent<{
     depth: PropType<Depth>;
     size: (StringConstructor | NumberConstructor)[];
     color: StringConstructor;
@@ -74,4 +74,3 @@ declare const _default: import("vue").DefineComponent<{
         opacity5Depth: string;
     }, any>>>;
 }>>, {}>;
-export default _default;

package/lib/icon/src/Icon.js

@@ -3,19 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NIcon = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.default = (0, vue_1.defineComponent)({
+exports.NIcon = (0, vue_1.defineComponent)({
     _n_icon__: true,
     name: 'Icon',
     inheritAttrs: false,
     props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object }),
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Icon', 'Icon', index_cssr_1.default, styles_1.iconLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Icon', '-icon', index_cssr_1.default, styles_1.iconLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedStyle: (0, vue_1.computed)(() => {

package/lib/icon-wrapper/index.d.ts

@@ -0,0 +1 @@
+export { NIconWrapper } from './src/IconWrapper';

package/lib/icon-wrapper/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NIconWrapper = void 0;
+var IconWrapper_1 = require("./src/IconWrapper");
+Object.defineProperty(exports, "NIconWrapper", { enumerable: true, get: function () { return IconWrapper_1.NIconWrapper; } });

package/lib/icon-wrapper/src/IconWrapper.d.ts

@@ -0,0 +1,50 @@
+export declare const NIconWrapper: import("vue").DefineComponent<{
+    readonly size: {
+        readonly type: NumberConstructor;
+        readonly default: 24;
+    };
+    readonly borderRadius: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly color: StringConstructor;
+    readonly iconColor: StringConstructor;
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>;
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly size: {
+        readonly type: NumberConstructor;
+        readonly default: 24;
+    };
+    readonly borderRadius: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly color: StringConstructor;
+    readonly iconColor: StringConstructor;
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>;
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>>;
+}>>, {
+    size: number;
+    borderRadius: number;
+}>;

package/lib/icon-wrapper/src/IconWrapper.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NIconWrapper = void 0;
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const styles_1 = require("../styles");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const iconWrapperProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: {
+        type: Number,
+        default: 24
+    }, borderRadius: {
+        type: Number,
+        default: 6
+    }, color: String, iconColor: String });
+exports.NIconWrapper = (0, vue_1.defineComponent)({
+    name: 'IconWrapper',
+    props: iconWrapperProps,
+    setup(props, { slots }) {
+        const themeRef = (0, _mixins_1.useTheme)('IconWrapper', '-icon-wrapper', index_cssr_1.default, styles_1.iconWrapperLight, props);
+        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
+        const { disableInlineTheme } = NConfigProvider || {};
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { color, iconColor } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-color': color,
+                '--n-icon-color': iconColor
+            };
+        });
+        const cssVarsClassRef = disableInlineTheme
+            ? (0, _mixins_1.useCssVarsClass)('icon-wrapper', undefined, cssVarsRef, props)
+            : undefined;
+        return () => {
+            const size = (0, _utils_1.formatLength)(props.size);
+            return ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefixRef.value}-icon-wrapper`,
+                    cssVarsClassRef === null || cssVarsClassRef === void 0 ? void 0 : cssVarsClassRef.value
+                ], style: [
+                    cssVarsRef === null || cssVarsRef === void 0 ? void 0 : cssVarsRef.value,
+                    {
+                        height: size,
+                        width: size,
+                        borderRadius: (0, _utils_1.formatLength)(props.borderRadius),
+                        backgroundColor: props.color,
+                        color: props.iconColor
+                    }
+                ] }, slots));
+        };
+    }
+});

package/lib/icon-wrapper/src/styles/index.cssr.d.ts

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

package/lib/icon-wrapper/src/styles/index.cssr.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr"); // vars:
+// --n-bezier
+// --n-border-radius
+// --n-color
+// --n-icon-color
+
+
+exports.default = (0, cssr_1.cB)('icon-wrapper', `
+ transition:
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ background-color: var(--n-color);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--n-icon-color);
+`);

package/lib/icon-wrapper/styles/dark.d.ts

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

package/lib/icon-wrapper/styles/dark.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
+const iconDark = {
+    name: 'IconWrapper',
+    common: common_1.commonDark,
+    self: light_1.self
+};
+exports.default = iconDark;

package/lib/icon-wrapper/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as iconWrapperDark } from './dark';
+export { default as iconWrapperLight } from './light';
+export type { IconWrapperTheme, IconWrapperThemeVars } from './light';

package/lib/icon-wrapper/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.iconWrapperLight = exports.iconWrapperDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "iconWrapperDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "iconWrapperLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });

package/lib/icon-wrapper/styles/light.d.ts

@@ -0,0 +1,10 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+import type { Theme } from '../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    color: string;
+    iconColor: string;
+};
+export declare type IconWrapperThemeVars = ReturnType<typeof self>;
+declare const iconWrapperLight: Theme<'IconWrapper', IconWrapperThemeVars>;
+export default iconWrapperLight;
+export declare type IconWrapperTheme = typeof iconWrapperLight;

package/lib/icon-wrapper/styles/light.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const common_1 = require("../../_styles/common");
+const self = (vars) => {
+    const { primaryColor, baseColor } = vars;
+    return {
+        color: primaryColor,
+        iconColor: baseColor
+    };
+};
+exports.self = self;
+const iconWrapperLight = {
+    name: 'IconWrapper',
+    common: common_1.commonLight,
+    self: exports.self
+};
+exports.default = iconWrapperLight;

package/lib/image/src/ImagePreview.js

@@ -24,7 +24,7 @@ exports.default = (0, vue_1.defineComponent)({
             required: true
         } }),
     setup(props) {
-        const themeRef = (0, _mixins_1.useTheme)('Image', 'Image', index_cssr_1.default, styles_1.imageLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
+        const themeRef = (0, _mixins_1.useTheme)('Image', '-image', index_cssr_1.default, styles_1.imageLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
         let thumbnailEl = null;
         const previewRef = (0, vue_1.ref)(null);
         const previewWrapperRef = (0, vue_1.ref)(null);