naive-ui 2.21.5 → 2.23.2

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --color
-// --opacity
+// --n-bezier
+// --n-color
+// --n-opacity
 
 
 exports.default = (0, cssr_1.cB)('icon', `
@@ -20,12 +20,12 @@ exports.default = (0, cssr_1.cB)('icon', `
  fill: currentColor;
  transform: translateZ(0);
 `, [(0, cssr_1.cM)('color-transition', {
-  transition: 'color .3s var(--bezier)'
+  transition: 'color .3s var(--n-bezier)'
 }), (0, cssr_1.cM)('depth', {
-  color: 'var(--color)'
+  color: 'var(--n-color)'
 }, [(0, cssr_1.c)('svg', {
-  opacity: 'var(--opacity)',
-  transition: 'opacity .3s var(--bezier)'
+  opacity: 'var(--n-opacity)',
+  transition: 'opacity .3s var(--n-bezier)'
 })]), (0, cssr_1.c)('svg', {
   height: '1em',
   width: '1em'

package/lib/image/src/Image.js

@@ -74,19 +74,15 @@ exports.default = (0, vue_1.defineComponent)({
             } }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, imgProps = {} } = this;
-        const imgWrapperNode = (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
-            role: 'none',
-            class: [
+        const { mergedClsPrefix, imgProps = {}, $attrs } = this;
+        const imgNode = ((0, vue_1.h)("img", Object.assign({}, imgProps, { class: [this.groupId, imgProps.class], ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.showError ? this.fallbackSrc : this.src || imgProps.src, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.mergedOnError, onLoad: this.mergedOnLoad, style: [imgProps.style || '', { objectFit: this.objectFit }], "data-error": this.showError, "data-preview-src": this.previewSrc || this.src })));
+        return ((0, vue_1.h)("div", Object.assign({}, $attrs, { role: "none", class: [
+                $attrs.class,
                 `${mergedClsPrefix}-image`,
                 (this.previewDisabled || this.showError) &&
                     `${mergedClsPrefix}-image--preview-disabled`
-            ]
-        }), [
-            (0, vue_1.h)("img", Object.assign({}, imgProps, { class: [this.groupId, imgProps.class], ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.showError ? this.fallbackSrc : this.src || imgProps.src, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.mergedOnError, onLoad: this.mergedOnLoad, style: [imgProps.style || '', { objectFit: this.objectFit }], "data-error": this.showError, "data-preview-src": this.previewSrc || this.src }))
-        ]);
-        return this.groupId ? (imgWrapperNode) : ((0, vue_1.h)(ImagePreview_1.default, { clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar }, {
-            default: () => imgWrapperNode
-        }));
+            ] }), this.groupId ? (imgNode) : ((0, vue_1.h)(ImagePreview_1.default, { clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar }, {
+            default: () => imgNode
+        }))));
     }
 });

package/lib/image/src/ImagePreview.d.ts

@@ -14,8 +14,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--icon-color': string;
+        '--n-bezier': string;
+        '--n-icon-color': string;
     }>;
     setThumbnailEl: (e: HTMLImageElement | null) => void;
     setPreviewSrc: (src?: string | undefined) => void;

package/lib/image/src/ImagePreview.js

@@ -44,7 +44,7 @@ exports.default = (0, vue_1.defineComponent)({
             const ty = tbox.top + tbox.height / 2;
             style.transformOrigin = `${tx}px ${ty}px`;
         }
-        function handleKeyup(e) {
+        function handleKeydown(e) {
             var _a, _b;
             switch (e.code) {
                 case 'ArrowLeft':
@@ -58,14 +58,15 @@ exports.default = (0, vue_1.defineComponent)({
                     break;
             }
         }
-        if (props.onPrev) {
-            (0, vue_1.watch)(showRef, (value) => {
-                if (value)
-                    (0, evtd_1.on)('keyup', document, handleKeyup);
-                else
-                    (0, evtd_1.off)('keyup', document, handleKeyup);
-            });
-        }
+        (0, vue_1.watch)(showRef, (value) => {
+            if (value)
+                (0, evtd_1.on)('keydown', document, handleKeydown);
+            else
+                (0, evtd_1.off)('keydown', document, handleKeydown);
+        });
+        (0, vue_1.onBeforeUnmount)(() => {
+            (0, evtd_1.off)('keydown', document, handleKeydown);
+        });
         let startX = 0;
         let startY = 0;
         let offsetX = 0;
@@ -265,8 +266,8 @@ exports.default = (0, vue_1.defineComponent)({
             handleSwitchNext }, exposedMethods), { cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { iconColor } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--icon-color': iconColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-icon-color': iconColor
                 };
             }) });
     },

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

@@ -15,8 +15,8 @@ const cssr_1 = require("../../../_utils/cssr");
 const fade_in_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in.cssr"));
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
-// --icon-color
-// --bezier
+// --n-icon-color
+// --n-bezier
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.c)('body >', [(0, cssr_1.cB)('image-container', 'position: fixed;')]), (0, cssr_1.cB)('image-preview-container', `
@@ -44,8 +44,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('body >', [(0, cssr_1.cB)('image-
  bottom: 40px;
  padding: 0 12px;
  background: rgba(0, 0, 0, .35);
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  display: flex;
  align-items: center;
  `, [(0, cssr_1.cB)('base-icon', `
@@ -66,7 +66,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('body >', [(0, cssr_1.cB)('image-
  margin: auto;
  max-height: 100vh;
  max-width: 100vw;
- transition: transform .3s var(--bezier);
+ transition: transform .3s var(--n-bezier);
  `), (0, cssr_1.cB)('image', `
  display: inline-flex;
  max-height: 100%;

package/lib/input/src/Input.d.ts

@@ -85,6 +85,7 @@ declare const inputProps: {
     onWrapperBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     internalDeactivateOnEnter: BooleanConstructor;
     internalForceFocus: BooleanConstructor;
+    internalLoadingBeforeSuffix: BooleanConstructor;
     /** deprecated */
     showPasswordToggle: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Input", {
@@ -352,6 +353,7 @@ declare const _default: import("vue").DefineComponent<{
     onWrapperBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     internalDeactivateOnEnter: BooleanConstructor;
     internalForceFocus: BooleanConstructor;
+    internalLoadingBeforeSuffix: BooleanConstructor;
     /** deprecated */
     showPasswordToggle: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Input", {
@@ -746,53 +748,53 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--count-text-color': string;
-        '--color': string;
-        '--font-size': string;
-        '--border-radius': string;
-        '--height': string;
-        '--padding-left': string;
-        '--padding-right': string;
-        '--text-color': string;
-        '--caret-color': string;
-        '--text-decoration-color': string;
-        '--border': string;
-        '--border-disabled': string;
-        '--border-hover': string;
-        '--border-focus': string;
-        '--placeholder-color': string;
-        '--placeholder-color-disabled': string;
-        '--icon-size': string;
-        '--line-height-textarea': string;
-        '--color-disabled': string;
-        '--color-focus': string;
-        '--text-color-disabled': string;
-        '--box-shadow-focus': string;
-        '--loading-color': string;
-        '--caret-color-warning': string;
-        '--color-focus-warning': string;
-        '--box-shadow-focus-warning': string;
-        '--border-warning': string;
-        '--border-focus-warning': string;
-        '--border-hover-warning': string;
-        '--loading-color-warning': string;
-        '--caret-color-error': string;
-        '--color-focus-error': string;
-        '--box-shadow-focus-error': string;
-        '--border-error': string;
-        '--border-focus-error': string;
-        '--border-hover-error': string;
-        '--loading-color-error': string;
-        '--clear-color': string;
-        '--clear-size': string;
-        '--clear-color-hover': string;
-        '--clear-color-pressed': string;
-        '--icon-color': string;
-        '--icon-color-hover': string;
-        '--icon-color-pressed': string;
-        '--icon-color-disabled': string;
-        '--suffix-text-color': string;
+        '--n-bezier': string;
+        '--n-count-text-color': string;
+        '--n-color': string;
+        '--n-font-size': string;
+        '--n-border-radius': string;
+        '--n-height': string;
+        '--n-padding-left': string;
+        '--n-padding-right': string;
+        '--n-text-color': string;
+        '--n-caret-color': string;
+        '--n-text-decoration-color': string;
+        '--n-border': string;
+        '--n-border-disabled': string;
+        '--n-border-hover': string;
+        '--n-border-focus': string;
+        '--n-placeholder-color': string;
+        '--n-placeholder-color-disabled': string;
+        '--n-icon-size': string;
+        '--n-line-height-textarea': string;
+        '--n-color-disabled': string;
+        '--n-color-focus': string;
+        '--n-text-color-disabled': string;
+        '--n-box-shadow-focus': string;
+        '--n-loading-color': string;
+        '--n-caret-color-warning': string;
+        '--n-color-focus-warning': string;
+        '--n-box-shadow-focus-warning': string;
+        '--n-border-warning': string;
+        '--n-border-focus-warning': string;
+        '--n-border-hover-warning': string;
+        '--n-loading-color-warning': string;
+        '--n-caret-color-error': string;
+        '--n-color-focus-error': string;
+        '--n-box-shadow-focus-error': string;
+        '--n-border-error': string;
+        '--n-border-focus-error': string;
+        '--n-border-hover-error': string;
+        '--n-loading-color-error': string;
+        '--n-clear-color': string;
+        '--n-clear-size': string;
+        '--n-clear-color-hover': string;
+        '--n-clear-color-pressed': string;
+        '--n-icon-color': string;
+        '--n-icon-color-hover': string;
+        '--n-icon-color-pressed': string;
+        '--n-icon-color-disabled': string;
+        '--n-suffix-text-color': string;
     }>;
     isCompositing: import("vue").Ref<boolean>;
     blur: () => void;
@@ -846,6 +848,7 @@ declare const _default: import("vue").DefineComponent<{
     onWrapperBlur?: unknown;
     internalDeactivateOnEnter?: unknown;
     internalForceFocus?: unknown;
+    internalLoadingBeforeSuffix?: unknown;
     showPasswordToggle?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
@@ -870,6 +873,7 @@ declare const _default: import("vue").DefineComponent<{
     attrSize: number;
     internalDeactivateOnEnter: boolean;
     internalForceFocus: boolean;
+    internalLoadingBeforeSuffix: boolean;
     showPasswordToggle: boolean;
 } & {
     value?: string | [string, string] | null | undefined;
@@ -1104,6 +1108,7 @@ declare const _default: import("vue").DefineComponent<{
     attrSize: number;
     internalDeactivateOnEnter: boolean;
     internalForceFocus: boolean;
+    internalLoadingBeforeSuffix: boolean;
     showPasswordToggle: boolean;
 }>;
 export default _default;

package/lib/input/src/Input.js

@@ -52,7 +52,7 @@ const inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     textDecoration: [String, Array], attrSize: {
         type: Number,
         default: 20
-    }, onInputBlur: [Function, Array], onInputFocus: [Function, Array], onDeactivate: [Function, Array], onActivate: [Function, Array], onWrapperFocus: [Function, Array], onWrapperBlur: [Function, Array], internalDeactivateOnEnter: Boolean, internalForceFocus: Boolean, 
+    }, onInputBlur: [Function, Array], onInputFocus: [Function, Array], onDeactivate: [Function, Array], onActivate: [Function, Array], onWrapperFocus: [Function, Array], onWrapperBlur: [Function, Array], internalDeactivateOnEnter: Boolean, internalForceFocus: Boolean, internalLoadingBeforeSuffix: Boolean, 
     /** deprecated */
     showPasswordToggle: Boolean });
 exports.default = (0, vue_1.defineComponent)({
@@ -628,56 +628,56 @@ exports.default = (0, vue_1.defineComponent)({
                 const { common: { cubicBezierEaseInOut }, self: { color, borderRadius, textColor, caretColor, caretColorError, caretColorWarning, textDecorationColor, border, borderDisabled, borderHover, borderFocus, placeholderColor, placeholderColorDisabled, lineHeightTextarea, colorDisabled, colorFocus, textColorDisabled, boxShadowFocus, iconSize, colorFocusWarning, boxShadowFocusWarning, borderWarning, borderFocusWarning, borderHoverWarning, colorFocusError, boxShadowFocusError, borderError, borderFocusError, borderHoverError, clearSize, clearColor, clearColorHover, clearColorPressed, iconColor, iconColorDisabled, suffixTextColor, countTextColor, iconColorHover, iconColorPressed, loadingColor, loadingColorError, loadingColorWarning, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height } } = themeRef.value;
                 const { left: paddingLeft, right: paddingRight } = (0, seemly_1.getPadding)(padding);
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--count-text-color': countTextColor,
-                    '--color': color,
-                    '--font-size': fontSize,
-                    '--border-radius': borderRadius,
-                    '--height': height,
-                    '--padding-left': paddingLeft,
-                    '--padding-right': paddingRight,
-                    '--text-color': textColor,
-                    '--caret-color': caretColor,
-                    '--text-decoration-color': textDecorationColor,
-                    '--border': border,
-                    '--border-disabled': borderDisabled,
-                    '--border-hover': borderHover,
-                    '--border-focus': borderFocus,
-                    '--placeholder-color': placeholderColor,
-                    '--placeholder-color-disabled': placeholderColorDisabled,
-                    '--icon-size': iconSize,
-                    '--line-height-textarea': lineHeightTextarea,
-                    '--color-disabled': colorDisabled,
-                    '--color-focus': colorFocus,
-                    '--text-color-disabled': textColorDisabled,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--loading-color': loadingColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-count-text-color': countTextColor,
+                    '--n-color': color,
+                    '--n-font-size': fontSize,
+                    '--n-border-radius': borderRadius,
+                    '--n-height': height,
+                    '--n-padding-left': paddingLeft,
+                    '--n-padding-right': paddingRight,
+                    '--n-text-color': textColor,
+                    '--n-caret-color': caretColor,
+                    '--n-text-decoration-color': textDecorationColor,
+                    '--n-border': border,
+                    '--n-border-disabled': borderDisabled,
+                    '--n-border-hover': borderHover,
+                    '--n-border-focus': borderFocus,
+                    '--n-placeholder-color': placeholderColor,
+                    '--n-placeholder-color-disabled': placeholderColorDisabled,
+                    '--n-icon-size': iconSize,
+                    '--n-line-height-textarea': lineHeightTextarea,
+                    '--n-color-disabled': colorDisabled,
+                    '--n-color-focus': colorFocus,
+                    '--n-text-color-disabled': textColorDisabled,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-loading-color': loadingColor,
                     // form warning
-                    '--caret-color-warning': caretColorWarning,
-                    '--color-focus-warning': colorFocusWarning,
-                    '--box-shadow-focus-warning': boxShadowFocusWarning,
-                    '--border-warning': borderWarning,
-                    '--border-focus-warning': borderFocusWarning,
-                    '--border-hover-warning': borderHoverWarning,
-                    '--loading-color-warning': loadingColorWarning,
+                    '--n-caret-color-warning': caretColorWarning,
+                    '--n-color-focus-warning': colorFocusWarning,
+                    '--n-box-shadow-focus-warning': boxShadowFocusWarning,
+                    '--n-border-warning': borderWarning,
+                    '--n-border-focus-warning': borderFocusWarning,
+                    '--n-border-hover-warning': borderHoverWarning,
+                    '--n-loading-color-warning': loadingColorWarning,
                     // form error
-                    '--caret-color-error': caretColorError,
-                    '--color-focus-error': colorFocusError,
-                    '--box-shadow-focus-error': boxShadowFocusError,
-                    '--border-error': borderError,
-                    '--border-focus-error': borderFocusError,
-                    '--border-hover-error': borderHoverError,
-                    '--loading-color-error': loadingColorError,
+                    '--n-caret-color-error': caretColorError,
+                    '--n-color-focus-error': colorFocusError,
+                    '--n-box-shadow-focus-error': boxShadowFocusError,
+                    '--n-border-error': borderError,
+                    '--n-border-focus-error': borderFocusError,
+                    '--n-border-hover-error': borderHoverError,
+                    '--n-loading-color-error': loadingColorError,
                     // clear-button
-                    '--clear-color': clearColor,
-                    '--clear-size': clearSize,
-                    '--clear-color-hover': clearColorHover,
-                    '--clear-color-pressed': clearColorPressed,
-                    '--icon-color': iconColor,
-                    '--icon-color-hover': iconColorHover,
-                    '--icon-color-pressed': iconColorPressed,
-                    '--icon-color-disabled': iconColorDisabled,
-                    '--suffix-text-color': suffixTextColor
+                    '--n-clear-color': clearColor,
+                    '--n-clear-size': clearSize,
+                    '--n-clear-color-hover': clearColorHover,
+                    '--n-clear-color-pressed': clearColorPressed,
+                    '--n-icon-color': iconColor,
+                    '--n-icon-color-hover': iconColorHover,
+                    '--n-icon-color-pressed': iconColorPressed,
+                    '--n-icon-color-disabled': iconColorDisabled,
+                    '--n-suffix-text-color': suffixTextColor
                 };
             }) });
     },
@@ -725,8 +725,13 @@ exports.default = (0, vue_1.defineComponent)({
                         this.mergedShowPasswordOn ||
                         this.loading !== undefined) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
                     this.clearable || this.$slots.clear ? ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => (0, vue_1.renderSlot)(this.$slots, 'clear') })) : null,
-                    (0, vue_1.renderSlot)(this.$slots, 'suffix'),
+                    !this.internalLoadingBeforeSuffix
+                        ? (0, vue_1.renderSlot)(this.$slots, 'suffix')
+                        : null,
                     this.loading !== undefined ? ((0, vue_1.h)(_internal_1.NBaseSuffix, { clsPrefix: mergedClsPrefix, loading: this.loading, showArrow: false, showClear: false, style: this.cssVars })) : null,
+                    this.internalLoadingBeforeSuffix
+                        ? (0, vue_1.renderSlot)(this.$slots, 'suffix')
+                        : null,
                     this.showCount && this.type !== 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, { default: this.$slots.count })) : null,
                     this.mergedShowPasswordOn && this.type === 'password' ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, {
                         default: () => this.passwordVisible ? (0, vue_1.h)(icons_1.EyeIcon, null) : (0, vue_1.h)(icons_1.EyeOffIcon, null)

package/lib/input/src/InputGroupLabel.d.ts

@@ -385,14 +385,14 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--group-label-color': string;
-        '--group-label-border': string;
-        '--border-radius': string;
-        '--group-label-text-color': string;
-        '--font-size': string;
-        '--line-height': string;
-        '--height': string;
+        '--n-bezier': string;
+        '--n-group-label-color': string;
+        '--n-group-label-border': string;
+        '--n-border-radius': string;
+        '--n-group-label-text-color': string;
+        '--n-font-size': string;
+        '--n-line-height': string;
+        '--n-height': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly size?: unknown;

package/lib/input/src/InputGroupLabel.js

@@ -28,14 +28,14 @@ exports.default = (0, vue_1.defineComponent)({
                 const { size } = props;
                 const { common: { cubicBezierEaseInOut }, self: { groupLabelColor, borderRadius, groupLabelTextColor, lineHeight, groupLabelBorder, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--group-label-color': groupLabelColor,
-                    '--group-label-border': groupLabelBorder,
-                    '--border-radius': borderRadius,
-                    '--group-label-text-color': groupLabelTextColor,
-                    '--font-size': fontSize,
-                    '--line-height': lineHeight,
-                    '--height': height
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-group-label-color': groupLabelColor,
+                    '--n-group-label-border': groupLabelBorder,
+                    '--n-border-radius': borderRadius,
+                    '--n-group-label-text-color': groupLabelTextColor,
+                    '--n-font-size': fontSize,
+                    '--n-line-height': lineHeight,
+                    '--n-height': height
                 };
             })
         };

package/lib/input/src/styles/input-group-label.cssr.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --group-label-color
-// --border-radius
-// --group-label-text-color
-// --font-size
-// --height
-// --group-label-border
+// --n-bezier
+// --n-group-label-color
+// --n-border-radius
+// --n-group-label-text-color
+// --n-font-size
+// --n-height
+// --n-group-label-border
 
 
 exports.default = (0, cssr_1.cB)('input-group-label', `
@@ -20,16 +20,16 @@ exports.default = (0, cssr_1.cB)('input-group-label', `
  box-sizing: border-box;
  padding: 0 12px;
  display: inline-block;
- border-radius: var(--border-radius);
- background-color: var(--group-label-color);
- color: var(--group-label-text-color);
- font-size: var(--font-size);
- line-height: var(--height);
- height: var(--height);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-group-label-color);
+ color: var(--n-group-label-text-color);
+ font-size: var(--n-font-size);
+ line-height: var(--n-height);
+ height: var(--n-height);
  transition: 
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
 `, [(0, cssr_1.cE)('border', `
  position: absolute;
  left: 0;
@@ -37,6 +37,6 @@ exports.default = (0, cssr_1.cB)('input-group-label', `
  top: 0;
  bottom: 0;
  border-radius: inherit;
- border: var(--group-label-border);
- transition: border-color .3s var(--bezier);
+ border: var(--n-group-label-border);
+ transition: border-color .3s var(--n-bezier);
  `)]);