naive-ui 2.23.1 → 2.23.2

package/es/cascader/src/Cascader.d.ts

@@ -82,6 +82,8 @@ declare const cascaderProps: {
     };
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
+    readonly 'onUpdate:show': PropType<MaybeArray<(show: Boolean) => void>>;
+    readonly onUpdateShow: PropType<MaybeArray<(show: Boolean) => void>>;
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
@@ -714,6 +716,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
+    readonly 'onUpdate:show': PropType<MaybeArray<(show: Boolean) => void>>;
+    readonly onUpdateShow: PropType<MaybeArray<(show: Boolean) => void>>;
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
@@ -1670,23 +1674,23 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--menu-border-radius': string;
-        '--menu-box-shadow': string;
-        '--menu-height': string;
-        '--column-width': string;
-        '--menu-color': string;
-        '--menu-divider-color': string;
-        '--option-height': string;
-        '--option-font-size': string;
-        '--option-text-color': string;
-        '--option-text-color-disabled': string;
-        '--option-text-color-active': string;
-        '--option-color-hover': string;
-        '--option-check-mark-color': string;
-        '--option-arrow-color': string;
-        '--menu-mask-color': string;
-        '--loading-color': string;
+        '--n-bezier': string;
+        '--n-menu-border-radius': string;
+        '--n-menu-box-shadow': string;
+        '--n-menu-height': string;
+        '--n-column-width': string;
+        '--n-menu-color': string;
+        '--n-menu-divider-color': string;
+        '--n-option-height': string;
+        '--n-option-font-size': string;
+        '--n-option-text-color': string;
+        '--n-option-text-color-disabled': string;
+        '--n-option-text-color-active': string;
+        '--n-option-color-hover': string;
+        '--n-option-check-mark-color': string;
+        '--n-option-arrow-color': string;
+        '--n-menu-mask-color': string;
+        '--n-loading-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly to?: unknown;
@@ -1718,6 +1722,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly childrenField?: unknown;
     readonly 'onUpdate:value'?: unknown;
     readonly onUpdateValue?: unknown;
+    readonly 'onUpdate:show'?: unknown;
+    readonly onUpdateShow?: unknown;
     readonly onBlur?: unknown;
     readonly onFocus?: unknown;
     readonly onChange?: unknown;
@@ -2304,6 +2310,8 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>> | undefined;
     bordered?: boolean | undefined;
+    "onUpdate:show"?: MaybeArray<(show: Boolean) => void> | undefined;
+    onUpdateShow?: MaybeArray<(show: Boolean) => void> | undefined;
     maxTagCount?: number | "responsive" | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;

package/es/cascader/src/Cascader.js

@@ -57,7 +57,7 @@ const cascaderProps = Object.assign(Object.assign({}, useTheme.props), { to: use
     }, childrenField: {
         type: String,
         default: 'children'
-    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onBlur: Function, onFocus: Function, 
+    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onBlur: Function, onFocus: Function, 
     // deprecated
     onChange: [Function, Array] });
 // TODO refactor cascader menu keyboard scroll (use virtual list)
@@ -161,6 +161,16 @@ export default defineComponent({
                 }
             });
         }
+        function doUpdateShow(value) {
+            const { onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
+            if (onUpdateShow) {
+                call(onUpdateShow, value);
+            }
+            if (_onUpdateShow) {
+                call(_onUpdateShow, value);
+            }
+            uncontrolledShowRef.value = value;
+        }
         function doUpdateValue(value, option, optionPath) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
@@ -334,7 +344,7 @@ export default defineComponent({
         function openMenu() {
             if (!mergedDisabledRef.value) {
                 patternRef.value = '';
-                uncontrolledShowRef.value = true;
+                doUpdateShow(true);
                 if (props.filterable) {
                     focusSelectionInput();
                 }
@@ -344,7 +354,7 @@ export default defineComponent({
             if (returnFocus) {
                 focusSelection();
             }
-            uncontrolledShowRef.value = false;
+            doUpdateShow(false);
             patternRef.value = '';
         }
         function handleCascaderMenuClickOutside(e) {
@@ -695,23 +705,23 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { self: { optionArrowColor, optionTextColor, optionTextColorActive, optionTextColorDisabled, optionCheckMarkColor, menuColor, menuBoxShadow, menuDividerColor, menuBorderRadius, menuHeight, optionColorHover, optionHeight, optionFontSize, loadingColor, columnWidth }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--menu-border-radius': menuBorderRadius,
-                    '--menu-box-shadow': menuBoxShadow,
-                    '--menu-height': menuHeight,
-                    '--column-width': columnWidth,
-                    '--menu-color': menuColor,
-                    '--menu-divider-color': menuDividerColor,
-                    '--option-height': optionHeight,
-                    '--option-font-size': optionFontSize,
-                    '--option-text-color': optionTextColor,
-                    '--option-text-color-disabled': optionTextColorDisabled,
-                    '--option-text-color-active': optionTextColorActive,
-                    '--option-color-hover': optionColorHover,
-                    '--option-check-mark-color': optionCheckMarkColor,
-                    '--option-arrow-color': optionArrowColor,
-                    '--menu-mask-color': changeColor(menuColor, { alpha: 0.75 }),
-                    '--loading-color': loadingColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-menu-border-radius': menuBorderRadius,
+                    '--n-menu-box-shadow': menuBoxShadow,
+                    '--n-menu-height': menuHeight,
+                    '--n-column-width': columnWidth,
+                    '--n-menu-color': menuColor,
+                    '--n-menu-divider-color': menuDividerColor,
+                    '--n-option-height': optionHeight,
+                    '--n-option-font-size': optionFontSize,
+                    '--n-option-text-color': optionTextColor,
+                    '--n-option-text-color-disabled': optionTextColorDisabled,
+                    '--n-option-text-color-active': optionTextColorActive,
+                    '--n-option-color-hover': optionColorHover,
+                    '--n-option-check-mark-color': optionCheckMarkColor,
+                    '--n-option-arrow-color': optionArrowColor,
+                    '--n-menu-mask-color': changeColor(menuColor, { alpha: 0.75 }),
+                    '--n-loading-color': loadingColor
                 };
             })
         };

package/es/cascader/src/CascaderMenu.js

@@ -103,7 +103,7 @@ export default defineComponent({
                 if (!this.show)
                     return null;
                 return withDirectives(h("div", { tabindex: "0", ref: "selfElRef", class: `${mergedClsPrefix}-cascader-menu`, onMousedown: this.onMousedown, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onKeyup: this.onKeyup, style: {
-                        '--col-count': this.menuModel.length
+                        '--n-col-count': this.menuModel.length
                     } },
                     this.menuModel[0].length ? (h("div", { class: `${mergedClsPrefix}-cascader-submenu-wrapper` },
                         this.menuModel.map((submenuOptions, index) => (h(NCascaderSubmenu, { ref: ((instance) => {

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

@@ -1,20 +1,20 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --menu-border-radius
-// --menu-box-shadow
-// --menu-height
-// --menu-color
-// --menu-divider-color
-// --option-height
-// --option-font-size
-// --option-text-color
-// --option-text-color-disabled
-// --option-text-color-active
-// --option-color-hover
-// --option-check-mark-color
-// --option-arrow-color
-// --menu-mask-color
-// --loading-color
+// --n-menu-border-radius
+// --n-menu-box-shadow
+// --n-menu-height
+// --n-menu-color
+// --n-menu-divider-color
+// --n-option-height
+// --n-option-font-size
+// --n-option-text-color
+// --n-option-text-color-disabled
+// --n-option-text-color-active
+// --n-option-color-hover
+// --n-option-check-mark-color
+// --n-option-arrow-color
+// --n-menu-mask-color
+// --n-loading-color
 
 export default c([cB('cascader-menu', `
  outline: none;
@@ -22,11 +22,11 @@ export default c([cB('cascader-menu', `
  margin: 4px 0;
  display: flex;
  flex-flow: column nowrap;
- border-radius: var(--menu-border-radius);
+ border-radius: var(--n-menu-border-radius);
  overflow: hidden;
- box-shadow: var(--menu-box-shadow);
- color: var(--option-text-color);
- background-color: var(--menu-color);
+ box-shadow: var(--n-menu-box-shadow);
+ color: var(--n-option-text-color);
+ background-color: var(--n-menu-color);
  `, [fadeInScaleUpTransition({
   transformOrigin: 'inherit',
   duration: '0.2s'
@@ -40,37 +40,37 @@ export default c([cB('cascader-menu', `
   // not correct, which won't change after select menu width is set
   width: '100%'
 }), cB('base-menu-mask', {
-  backgroundColor: 'var(--menu-mask-color)'
+  backgroundColor: 'var(--n-menu-mask-color)'
 }), cB('base-loading', {
-  color: 'var(--loading-color)'
+  color: 'var(--n-loading-color)'
 }), cB('cascader-submenu-wrapper', `
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  `), cB('cascader-submenu', `
- height: var(--menu-height);
- min-width: var(--column-width);
+ height: var(--n-menu-height);
+ min-width: var(--n-column-width);
  position: relative;
  `, [cM('virtual', `
- width: var(--column-width);
+ width: var(--n-column-width);
  `), cB('scrollbar-content', {
   position: 'relative'
 }), c('&:first-child', `
- border-top-left-radius: var(--menu-border-radius);
- border-bottom-left-radius: var(--menu-border-radius);
+ border-top-left-radius: var(--n-menu-border-radius);
+ border-bottom-left-radius: var(--n-menu-border-radius);
  `), c('&:last-child', `
- border-top-right-radius: var(--menu-border-radius);
- border-bottom-right-radius: var(--menu-border-radius);
+ border-top-right-radius: var(--n-menu-border-radius);
+ border-bottom-right-radius: var(--n-menu-border-radius);
  `), c('&:not(:first-child)', `
- border-left: 1px solid var(--menu-divider-color);
+ border-left: 1px solid var(--n-menu-divider-color);
  `)]), cB('cascader-menu-action', `
  box-sizing: border-box;
  padding: 8px;
- border-top: 1px solid var(--menu-divider-color);
+ border-top: 1px solid var(--n-menu-divider-color);
  `), cB('cascader-option', `
- height: var(--option-height);
- line-height: var(--option-height);
- font-size: var(--option-font-size);
+ height: var(--n-option-height);
+ line-height: var(--n-option-height);
+ font-size: var(--n-option-font-size);
  padding: 0 0 0 18px;
  box-sizing: border-box;
  min-width: 182px;
@@ -81,8 +81,8 @@ export default c([cB('cascader-menu', `
  position: relative;
  cursor: pointer;
  transition:
- background-color .2s var(--bezier),
- color 0.2s var(--bezier);
+ background-color .2s var(--n-bezier),
+ color 0.2s var(--n-bezier);
  `, [cM('show-prefix', {
   paddingLeft: 0
 }), cE('label', `
@@ -106,24 +106,24 @@ export default c([cB('cascader-menu', `
   height: '16px',
   fontSize: '16px'
 }, [cB('cascader-option-icon', [cM('checkmark', {
-  color: 'var(--option-check-mark-color)'
+  color: 'var(--n-option-check-mark-color)'
 }, [fadeInScaleUpTransition()]), cM('arrow', {
-  color: 'var(--option-arrow-color)'
+  color: 'var(--n-option-arrow-color)'
 })])]), cM('selected', {
-  color: 'var(--option-text-color-active)'
+  color: 'var(--n-option-text-color-active)'
 }), cM('active', {
-  color: 'var(--option-text-color-active)',
-  backgroundColor: 'var(--option-color-hover)'
+  color: 'var(--n-option-text-color-active)',
+  backgroundColor: 'var(--n-option-color-hover)'
 }), cM('pending', {
-  backgroundColor: 'var(--option-color-hover)'
+  backgroundColor: 'var(--n-option-color-hover)'
 }), c('&:hover', {
-  backgroundColor: 'var(--option-color-hover)'
+  backgroundColor: 'var(--n-option-color-hover)'
 }), cM('disabled', `
- color: var(--option-text-color-disabled);
+ color: var(--n-option-text-color-disabled);
  background-color: #0000;
  cursor: not-allowed;
  `, [cB('cascader-option-icon', [cM('arrow', {
-  color: 'var(--option-text-color-disabled)'
+  color: 'var(--n-option-text-color-disabled)'
 })])])])]), cB('cascader', `
  z-index: auto;
  position: relative;

package/es/cascader/styles/light.js

@@ -12,7 +12,7 @@ export const self = (vars) => {
         menuColor: popoverColor,
         menuBoxShadow: boxShadow2,
         menuDividerColor: dividerColor,
-        menuHeight: 'calc(var(--option-height) * 6.6)',
+        menuHeight: 'calc(var(--n-option-height) * 6.6)',
         optionArrowColor: textColor3,
         optionHeight: heightMedium,
         optionFontSize: fontSizeMedium,

package/es/checkbox/src/Checkbox.d.ts

@@ -383,29 +383,29 @@ declare const _default: import("vue").DefineComponent<{
     handleKeyUp: (e: KeyboardEvent) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--size': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--border': string;
-        '--border-checked': string;
-        '--border-focus': string;
-        '--border-disabled': string;
-        '--border-disabled-checked': string;
-        '--box-shadow-focus': string;
-        '--color': string;
-        '--color-checked': string;
-        '--color-table-header': string;
-        '--color-table-header-modal': string;
-        '--color-table-header-popover': string;
-        '--color-disabled': string;
-        '--color-disabled-checked': string;
-        '--text-color': string;
-        '--text-color-disabled': string;
-        '--check-mark-color': string;
-        '--check-mark-color-disabled': string;
-        '--check-mark-color-disabled-checked': string;
-        '--font-size': string;
-        '--label-padding': string;
+        '--n-size': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-border': string;
+        '--n-border-checked': string;
+        '--n-border-focus': string;
+        '--n-border-disabled': string;
+        '--n-border-disabled-checked': string;
+        '--n-box-shadow-focus': string;
+        '--n-color': string;
+        '--n-color-checked': string;
+        '--n-color-table-header': string;
+        '--n-color-table-header-modal': string;
+        '--n-color-table-header-popover': string;
+        '--n-color-disabled': string;
+        '--n-color-disabled-checked': string;
+        '--n-text-color': string;
+        '--n-text-color-disabled': string;
+        '--n-check-mark-color': string;
+        '--n-check-mark-color-disabled': string;
+        '--n-check-mark-color-disabled-checked': string;
+        '--n-font-size': string;
+        '--n-label-padding': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     size?: unknown;

package/es/checkbox/src/Checkbox.js

@@ -164,29 +164,29 @@ export default defineComponent({
                 const { value: mergedSize } = mergedSizeRef;
                 const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, [createKey('fontSize', mergedSize)]: fontSize, [createKey('size', mergedSize)]: size } } = themeRef.value;
                 return {
-                    '--size': size,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--border': border,
-                    '--border-checked': borderChecked,
-                    '--border-focus': borderFocus,
-                    '--border-disabled': borderDisabled,
-                    '--border-disabled-checked': borderDisabledChecked,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--color': color,
-                    '--color-checked': colorChecked,
-                    '--color-table-header': colorTableHeader,
-                    '--color-table-header-modal': colorTableHeaderModal,
-                    '--color-table-header-popover': colorTableHeaderPopover,
-                    '--color-disabled': colorDisabled,
-                    '--color-disabled-checked': colorDisabledChecked,
-                    '--text-color': textColor,
-                    '--text-color-disabled': textColorDisabled,
-                    '--check-mark-color': checkMarkColor,
-                    '--check-mark-color-disabled': checkMarkColorDisabled,
-                    '--check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
-                    '--font-size': fontSize,
-                    '--label-padding': labelPadding
+                    '--n-size': size,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-border': border,
+                    '--n-border-checked': borderChecked,
+                    '--n-border-focus': borderFocus,
+                    '--n-border-disabled': borderDisabled,
+                    '--n-border-disabled-checked': borderDisabledChecked,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-color': color,
+                    '--n-color-checked': colorChecked,
+                    '--n-color-table-header': colorTableHeader,
+                    '--n-color-table-header-modal': colorTableHeaderModal,
+                    '--n-color-table-header-popover': colorTableHeaderPopover,
+                    '--n-color-disabled': colorDisabled,
+                    '--n-color-disabled-checked': colorDisabledChecked,
+                    '--n-text-color': textColor,
+                    '--n-text-color-disabled': textColorDisabled,
+                    '--n-check-mark-color': checkMarkColor,
+                    '--n-check-mark-color-disabled': checkMarkColorDisabled,
+                    '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
+                    '--n-font-size': fontSize,
+                    '--n-label-padding': labelPadding
                 };
             })
         });

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

@@ -1,47 +1,47 @@
 import { c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr';
 import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr'; // vars:
-// --bezier
-// --size
-// --border
-// --border-focus
-// --border-checked
-// --border-disabled
-// --border-disabled-checked
-// --box-shadow-focus
-// --color
-// --color-checked
-// --color-table-header
-// --color-table-header-modal
-// --color-disabled
-// --color-disabled-checked
-// --text-color
-// --text-color-disabled
-// --check-mark-color
-// --check-mark-color-disabled
-// --check-mark-color-disabled-checked
-// --border-radius
-// --font-size
-// --label-padding
+// --n-bezier
+// --n-size
+// --n-border
+// --n-border-focus
+// --n-border-checked
+// --n-border-disabled
+// --n-border-disabled-checked
+// --n-box-shadow-focus
+// --n-color
+// --n-color-checked
+// --n-color-table-header
+// --n-color-table-header-modal
+// --n-color-disabled
+// --n-color-disabled-checked
+// --n-text-color
+// --n-text-color-disabled
+// --n-check-mark-color
+// --n-check-mark-color-disabled
+// --n-check-mark-color-disabled-checked
+// --n-border-radius
+// --n-font-size
+// --n-label-padding
 
 export default c([cB('checkbox', `
  line-height: 1;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;
- --merged-color-table-header: var(--color-table-header);
+ --n-merged-color-table-header: var(--n-color-table-header);
  `, [c('&:hover', [cB('checkbox-box', [cE('border', {
-  border: 'var(--border-checked)'
+  border: 'var(--n-border-checked)'
 })])]), c('&:focus:not(:active)', [cB('checkbox-box', [cE('border', {
-  border: 'var(--border-focus)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-focus)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])]), cM('table-header', [cB('checkbox-box', {
-  backgroundColor: 'var(--merged-color-table-header)'
+  backgroundColor: 'var(--n-merged-color-table-header)'
 })]), cM('checked', [cB('checkbox-box', {
-  backgroundColor: 'var(--color-checked)'
+  backgroundColor: 'var(--n-color-checked)'
 }, [cB('checkbox-icon', [// if not set width to 100%, safari & old chrome won't display the icon
 c('.check-icon', `
  width: 100%;
@@ -54,51 +54,51 @@ c('.check-icon', `
  opacity: 1;
  transform: scale(1);
  `)])])]), cM('checked, indeterminate', [c('&:focus:not(:active)', [cB('checkbox-box', [cE('border', {
-  border: 'var(--border-checked)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-checked)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])]), cB('checkbox-box', `
- background-color: var(--color-checked);
+ background-color: var(--n-color-checked);
  border-left: 0;
  border-top: 0;
  `, [cE('border', {
-  border: 'var(--border-checked)'
+  border: 'var(--n-border-checked)'
 })])]), cM('disabled', {
   cursor: 'not-allowed'
 }, [cM('checked', [cB('checkbox-box', `
- background-color: var(--color-disabled-checked);
+ background-color: var(--n-color-disabled-checked);
  `, [cE('border', {
-  border: 'var(--border-disabled-checked)'
+  border: 'var(--n-border-disabled-checked)'
 }), cB('checkbox-icon', [c('.check-icon, .line-icon', {
-  fill: 'var(--check-mark-color-disabled-checked)'
+  fill: 'var(--n-check-mark-color-disabled-checked)'
 })])])]), cB('checkbox-box', `
- background-color: var(--color-disabled);
+ background-color: var(--n-color-disabled);
  `, [cE('border', {
-  border: 'var(--border-disabled)'
+  border: 'var(--n-border-disabled)'
 }), cB('checkbox-icon', [c('.check-icon, .line-icon', {
-  fill: 'var(--check-mark-color-disabled)'
+  fill: 'var(--n-check-mark-color-disabled)'
 })])]), cE('label', {
-  color: 'var(--text-color-disabled)'
+  color: 'var(--n-text-color-disabled)'
 })]), cB('checkbox-box', `
- height: var(--size);
- width: var(--size);
+ height: var(--n-size);
+ width: var(--n-size);
  display: inline-block;
  box-sizing: border-box;
- border-radius: var(--border-radius);
- background-color: var(--color);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-color);
  position: relative;
  transition:
- background-color 0.3s var(--bezier);
+ background-color 0.3s var(--n-bezier);
  `, [cE('border', `
  transition:
- border-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  border-radius: inherit;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
- border: var(--border);
+ border: var(--n-border);
  `), cB('checkbox-icon', `
  display: flex;
  align-items: center;
@@ -109,29 +109,29 @@ c('.check-icon', `
  top: 1px;
  bottom: 1px;
  `, [c('.check-icon, .line-icon', `
- fill: var(--check-mark-color);
+ fill: var(--n-check-mark-color);
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  transition:
- fill 0.3s var(--bezier),
- transform 0.3s var(--bezier),
- opacity 0.3s var(--bezier),
- border-color 0.3s var(--bezier);
+ fill 0.3s var(--n-bezier),
+ transform 0.3s var(--n-bezier),
+ opacity 0.3s var(--n-bezier),
+ border-color 0.3s var(--n-bezier);
  `), iconSwitchTransition({
   left: '1px',
   top: '1px'
 })])]), cE('label', `
- color: var(--text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-text-color);
+ transition: color .3s var(--n-bezier);
  user-select: none;
- padding: var(--label-padding);
+ padding: var(--n-label-padding);
  `, [c('&:empty', {
   display: 'none'
 })])]), // modal table header checkbox
 insideModal(cB('checkbox', `
- --merged-color-table-header: var(--color-table-header-modal);
+ --n-merged-color-table-header: var(--n-color-table-header-modal);
  `)), // popover table header checkbox
 insidePopover(cB('checkbox', `
- --merged-color-table-header: var(--color-table-header-popover);
+ --n-merged-color-table-header: var(--n-color-table-header-popover);
  `))]);