@nutui/nutui-react 3.0.0-beta.11 → 3.0.0-beta.13

package/dist/es/packages/fixednav/style/style.css

@@ -3,19 +3,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -85,7 +80,7 @@
   z-index: var(--nutui-fixednav-index, 900);
   width: 70px;
   height: 100%;
-  background: var(--nutui-fixednav-button-background, var(--nutui-brand-6));
+  background: var(--nutui-fixednav-button-background, var(--nutui-color-primary, #ff0f23));
   border-radius: 45px 0px 0px 45px;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
   display: flex;
@@ -150,7 +145,7 @@
   font-size: 10px;
   padding: 0 3px;
   color: white;
-  background: var(--nutui-brand-6);
+  background: var(--nutui-color-primary, #ff0f23);
   border-radius: 7px;
   text-align: center;
   min-width: 12px;

package/dist/es/packages/fixednav/types.d.ts

@@ -1,4 +1,5 @@
 import { Key, ReactNode } from 'react';
+import { OverlayProps } from "../../../../src/packages/overlay/types";
 export type FixedNavType = 'right' | 'left';
 export type FixedNavPosition = {
     top?: string;
@@ -10,3 +11,14 @@ export interface FixedNavItem {
     text: ReactNode;
     icon: ReactNode;
 }
+export interface FixedNavProps extends Omit<OverlayProps, 'onClick'> {
+    overlay: boolean;
+    activeText: string;
+    inactiveText: string;
+    position: FixedNavPosition;
+    type: FixedNavType;
+    content?: React.ReactNode;
+    list: Array<FixedNavItem>;
+    onChange: (value: boolean) => void;
+    onSelect: (item: FixedNavItem, event: React.MouseEvent<Element, MouseEvent>) => void;
+}

package/dist/es/packages/form/form.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
-import { FormInstance } from "./types";
+import { BasicComponent } from "../../../../src/utils/typings";
+import { FormInstance } from "../../../../src/packages/form/types";
 export interface FormProps extends BasicComponent {
     /**
     * 表单底部区域，一般放置确认和重置按钮

package/dist/es/packages/form/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormProps } from './form';
 import { FormItem } from '../formitem/formitem';
 import { FormInstance } from './types';
-import { useForm } from "./useform";
+import { useForm } from "../../../../src/packages/form/useform";
 export type { FormItemRuleWithoutValidator, FormInstance, FormFieldEntity, } from './types';
 type CompoundedComponent = React.ForwardRefExoticComponent<Partial<FormProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & React.RefAttributes<FormInstance>> & {
     Item: typeof FormItem;

package/dist/es/packages/form/style/style.css

@@ -8,7 +8,7 @@
 .nut-cell-group-title {
   display: inherit;
   padding: var(--nutui-cell-group-title-padding, 0 10px);
-  color: var(--nutui-cell-group-title-color, var(--nutui-gray-7));
+  color: var(--nutui-cell-group-title-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-cell-group-title-font-size, var(--nutui-font-size-base, 14px));
   line-height: var(--nutui-cell-group-title-line-height, 20px);
   margin-top: 30px;
@@ -17,7 +17,7 @@
 .nut-cell-group-description {
   display: inherit;
   padding: var(--nutui-cell-group-description-padding, 0 10px);
-  color: var(--nutui-cell-group-description-color, var(--nutui-gray-6));
+  color: var(--nutui-cell-group-description-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-cell-group-description-font-size, var(--nutui-font-size-s, 12px));
   line-height: var(--nutui-cell-group-description-line-height, 16px);
   margin-top: 10px;
@@ -26,7 +26,7 @@
 .nut-cell-group-wrap {
   border-radius: var(--nutui-cell-border-radius, 6px);
   overflow: hidden;
-  background-color: var(--nutui-cell-group-background-color, var(--nutui-gray-1));
+  background-color: var(--nutui-cell-group-background-color, var(--nutui-color-background-overlay, #ffffff));
   margin-bottom: var(--nutui-cell-group-wrap-margin, 10px);
 }
 
@@ -36,7 +36,7 @@
 .nut-cell-group-title {
   display: inherit;
   padding: var(--nutui-cell-group-title-padding, 0 10px);
-  color: var(--nutui-cell-group-title-color, var(--nutui-gray-7));
+  color: var(--nutui-cell-group-title-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-cell-group-title-font-size, var(--nutui-font-size-base, 14px));
   line-height: var(--nutui-cell-group-title-line-height, 20px);
   margin-top: 30px;
@@ -45,7 +45,7 @@
 .nut-cell-group-description {
   display: inherit;
   padding: var(--nutui-cell-group-description-padding, 0 10px);
-  color: var(--nutui-cell-group-description-color, var(--nutui-gray-6));
+  color: var(--nutui-cell-group-description-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-cell-group-description-font-size, var(--nutui-font-size-s, 12px));
   line-height: var(--nutui-cell-group-description-line-height, 16px);
   margin-top: 10px;
@@ -54,7 +54,7 @@
 .nut-cell-group-wrap {
   border-radius: var(--nutui-cell-border-radius, 6px);
   overflow: hidden;
-  background-color: var(--nutui-cell-group-background-color, var(--nutui-gray-1));
+  background-color: var(--nutui-cell-group-background-color, var(--nutui-color-background-overlay, #ffffff));
   margin-bottom: var(--nutui-cell-group-wrap-margin, 10px);
 }
 
@@ -65,11 +65,11 @@
   width: 100%;
   line-height: var(--nutui-cell-line-height, 20px);
   padding: var(--nutui-cell-padding, 13px 16px);
-  background-color: var(--nutui-cell-background-color, var(--nutui-gray-1));
+  background-color: var(--nutui-cell-background-color, var(--nutui-color-background-overlay, #ffffff));
   border-radius: var(--nutui-cell-border-radius, 6px);
   box-shadow: var(--nutui-cell-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241));
   font-size: var(--nutui-cell-title-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-cell-title-color, var(--nutui-gray-7));
+  color: var(--nutui-cell-title-color, var(--nutui-color-title, #1a1a1a));
   margin-bottom: 10px;
   box-sizing: border-box;
 }
@@ -89,7 +89,7 @@
 }
 .nut-cell-description {
   font-size: var(--nutui-cell-description-font-size, var(--nutui-font-size-s, 12px));
-  color: var(--nutui-cell-description-color, var(--nutui-gray-6));
+  color: var(--nutui-cell-description-color, var(--nutui-color-text, #505259));
 }
 .nut-cell-extra {
   display: flex;
@@ -101,7 +101,7 @@
   min-width: 0;
   word-break: break-all;
   font-size: var(--nutui-cell-extra-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-cell-extra-color, var(--nutui-gray-6));
+  color: var(--nutui-cell-extra-color, var(--nutui-color-text, #505259));
 }
 .nut-cell:active::before {
   opacity: 0.1;
@@ -133,7 +133,7 @@
   display: flex;
   height: 1px;
   width: 100%;
-  border-top: var(--nutui-cell-divider-border-bottom, 1px solid var(--nutui-black-3));
+  border-top: var(--nutui-cell-divider-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-cell-divider-rtl {
   padding-left: var(--nutui-cell-divider-right, 16px);
@@ -146,7 +146,7 @@
   padding: 4px 12px;
 }
 .nut-form-item.error.line::before {
-  border-bottom: 1px solid var(--nutui-form-item-error-line-color, var(--nutui-brand-6));
+  border-bottom: 1px solid var(--nutui-form-item-error-line-color, var(--nutui-color-primary, #ff0f23));
   transform: scaleX(1);
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 }
@@ -162,7 +162,7 @@
 }
 .nut-form-item-label .required::before {
   content: "*";
-  color: var(--nutui-form-item-required-color, var(--nutui-brand-6));
+  color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
   margin-right: var(--nutui-form-item-required-margin-right, 4px);
 }
 .nut-form-item-body {
@@ -180,7 +180,7 @@
 .nut-form-item-body-slots .nut-input-text {
   font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14px));
   text-align: var(--nutui-form-item-body-input-text-align, left);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   width: 100%;
   outline: 0 none;
   border: 0;
@@ -200,7 +200,7 @@
 .nut-form-item-body-tips {
   text-align: var(--nutui-form-item-tip-text-align, left);
   font-size: var(--nutui-form-item-tip-font-size, var(--nutui-font-size-xs, 11px));
-  color: var(--nutui-form-item-error-message-color, var(--nutui-brand-6));
+  color: var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #ff0f23));
 }
 
 [dir=rtl] .nut-form-item-label,

package/dist/es/packages/formitem/formitem.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { BaseFormField } from './types';
 import { Context } from '../form/context';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 type TextAlign = 'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent';
 export interface FormItemProps extends Omit<BasicComponent, 'children'>, BaseFormField {
     /**

package/dist/es/packages/formitem/style/style.css

@@ -8,7 +8,7 @@
   padding: 4px 12px;
 }
 .nut-form-item.error.line::before {
-  border-bottom: 1px solid var(--nutui-form-item-error-line-color, var(--nutui-brand-6));
+  border-bottom: 1px solid var(--nutui-form-item-error-line-color, var(--nutui-color-primary, #ff0f23));
   transform: scaleX(1);
   transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 }
@@ -24,7 +24,7 @@
 }
 .nut-form-item-label .required::before {
   content: "*";
-  color: var(--nutui-form-item-required-color, var(--nutui-brand-6));
+  color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
   margin-right: var(--nutui-form-item-required-margin-right, 4px);
 }
 .nut-form-item-body {
@@ -42,7 +42,7 @@
 .nut-form-item-body-slots .nut-input-text {
   font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14px));
   text-align: var(--nutui-form-item-body-input-text-align, left);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   width: 100%;
   outline: 0 none;
   border: 0;
@@ -62,7 +62,7 @@
 .nut-form-item-body-tips {
   text-align: var(--nutui-form-item-tip-text-align, left);
   font-size: var(--nutui-form-item-tip-font-size, var(--nutui-font-size-xs, 11px));
-  color: var(--nutui-form-item-error-message-color, var(--nutui-brand-6));
+  color: var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #ff0f23));
 }
 
 [dir=rtl] .nut-form-item-label,

package/dist/es/packages/grid/style/style.css

@@ -7,11 +7,11 @@
   flex-direction: column;
   position: relative;
   box-sizing: border-box;
-  color: var(--nutui-grid-item-text-color, var(--nutui-gray-7));
+  color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a));
   overflow: hidden;
 }
 .nut-grid-item-text {
-  color: var(--nutui-grid-item-text-color, var(--nutui-gray-7));
+  color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-grid-item-text-font-size, var(--nutui-font-size-s, 12px));
   word-break: break-all;
   margin: var(--nutui-grid-item-text-margin, 8px) 0 0 0;
@@ -33,7 +33,7 @@
   width: 100%;
   padding: var(--nutui-grid-item-content-padding, 16px 8px);
   background: var(--nutui-grid-item-content-bg-color, var(--nutui-gray-1));
-  border: 0 solid var(--nutui-grid-border-color, var(--nutui-black-3));
+  border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-grid-item-content-border {
   border-right-width: var(--nutui-grid-border-width, 0px);
@@ -69,9 +69,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-black-10);
+  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border: inherit;
-  border-color: var(--nutui-black-10);
+  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -111,7 +111,7 @@
   flex-direction: row;
   align-items: stretch;
   flex-wrap: wrap;
-  border: 0 solid var(--nutui-grid-border-color, var(--nutui-black-3));
+  border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-grid-border {
   border-top-width: var(--nutui-grid-border-width, 0px);

package/dist/es/packages/griditem/griditem.d.ts

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 type GridDirection = 'horizontal' | 'vertical';
 export interface GridItemProps extends BasicComponent {
     text: string | ReactNode;

package/dist/es/packages/griditem/style/style.css

@@ -7,11 +7,11 @@
   flex-direction: column;
   position: relative;
   box-sizing: border-box;
-  color: var(--nutui-grid-item-text-color, var(--nutui-gray-7));
+  color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a));
   overflow: hidden;
 }
 .nut-grid-item-text {
-  color: var(--nutui-grid-item-text-color, var(--nutui-gray-7));
+  color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-grid-item-text-font-size, var(--nutui-font-size-s, 12px));
   word-break: break-all;
   margin: var(--nutui-grid-item-text-margin, 8px) 0 0 0;
@@ -33,7 +33,7 @@
   width: 100%;
   padding: var(--nutui-grid-item-content-padding, 16px 8px);
   background: var(--nutui-grid-item-content-bg-color, var(--nutui-gray-1));
-  border: 0 solid var(--nutui-grid-border-color, var(--nutui-black-3));
+  border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-grid-item-content-border {
   border-right-width: var(--nutui-grid-border-width, 0px);
@@ -69,9 +69,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-black-10);
+  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border: inherit;
-  border-color: var(--nutui-black-10);
+  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;

package/dist/es/packages/hoverbutton/hoverbutton.d.ts

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-import HoverButtonItem, { HoverButtonItemProps } from "../hoverbuttonitem/index";
+import { BasicComponent } from "../../../../src/utils/typings";
+import HoverButtonItem, { HoverButtonItemProps } from "../../../../src/packages/hoverbuttonitem/index";
 export interface HoverButtonProps extends BasicComponent, HoverButtonItemProps {
     zIndex: number;
     tabbarHeight?: number;

package/dist/es/packages/hoverbutton/style/hoverbutton.scss

@@ -9,10 +9,6 @@
     bottom: $hoverbutton-position-bottom;
     z-index: 10;
   }
-
-  &-container-rn {
-    position: absolute;
-  }
 }
 
 [dir='rtl'] .nut-hoverbutton-container,

package/dist/es/packages/hoverbutton/style/style.css

@@ -33,8 +33,8 @@
   width: 20px;
   height: 20px;
   margin: 9px;
-  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
@@ -43,8 +43,8 @@
   font-size: 20px;
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
-  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-text-icon {
   width: 14px;
@@ -67,9 +67,6 @@
   bottom: var(--nutui-hoverbutton-position-bottom, 60px);
   z-index: 10;
 }
-.nut-hoverbutton-container-rn {
-  position: absolute;
-}
 
 [dir=rtl] .nut-hoverbutton-container,
 .nut-hoverbutton-container-rtl {

package/dist/es/packages/hoverbuttonitem/hoverbuttonitem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 export interface HoverButtonItemProps extends BasicComponent {
     className?: string;
     style?: React.CSSProperties;

package/dist/es/packages/hoverbuttonitem/style/style.css

@@ -33,8 +33,8 @@
   width: 20px;
   height: 20px;
   margin: 9px;
-  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-icon .nut-icon {
   display: block;
@@ -43,8 +43,8 @@
   font-size: 20px;
 }
 .nut-hoverbutton-item-container:active .nut-hoverbutton-item-icon {
-  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
-  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-gray-7));
+  color: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
+  fill: var(--nutui-hoverbutton-item-icon-color-active, var(--nutui-color-title, #1a1a1a));
 }
 .nut-hoverbutton-item-text-icon {
   width: 14px;

package/dist/es/packages/image/image.d.ts

@@ -1,5 +1,6 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
+import { FixAutoComplete } from "../../../../src/types/fix-string-literal-union";
 export interface ImageProps extends BasicComponent {
     src: string;
     fit: ImageFit;
@@ -15,6 +16,6 @@ export interface ImageProps extends BasicComponent {
     onLoad: () => void;
     onError: () => void;
 }
-export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | string;
-export type ImagePosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | string;
+export type ImageFit = FixAutoComplete<'contain' | 'cover' | 'fill' | 'none' | 'scale-down'>;
+export type ImagePosition = FixAutoComplete<'center' | 'top' | 'right' | 'bottom' | 'left'>;
 export declare const Image: FunctionComponent<Partial<ImageProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onLoad' | 'onError'>>;

package/dist/es/packages/image/style/style.css

@@ -25,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 

package/dist/es/packages/imagepreview/imagepreview.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 export type ImagePreviewCloseIconPosition = 'top-right' | 'top-left' | 'bottom';
 export interface ImageOption {
     src: string;

package/dist/es/packages/imagepreview/imagepreview.js

@@ -10,7 +10,7 @@ import Video from "../video";
 import Swiper from "../swiper";
 import SwiperItem from "../swiperitem";
 import { ComponentDefaults } from "../../utils/typings";
-import { usePropsValue } from "../../utils/use-props-value";
+import { usePropsValue } from "../../hooks/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     images: [],
     videos: [],

package/dist/es/packages/imagepreview/style/style.css

@@ -4,19 +4,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -67,7 +62,7 @@
   position: fixed;
   min-height: 46%;
   max-height: 100%;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
   font-size: var(--nutui-font-size-base, 14px);
 }
@@ -87,13 +82,13 @@
   align-items: center;
 }
 .nut-popup-title-title {
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
@@ -112,7 +107,7 @@
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   cursor: pointer;
 }
 .nut-popup-title-right:active {
@@ -392,7 +387,7 @@
   width: var(--nutui-indicator-dot-size, 3px);
   height: var(--nutui-indicator-dot-size, 3px);
   border-radius: 50%;
-  background-color: var(--nutui-gray-4);
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
   margin: 0 var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
   opacity: 0.4;
 }
@@ -405,7 +400,7 @@
 .nut-indicator-dot-active, .nut-indicator-line-active {
   width: var(--nutui-indicator-dot-active-size, 6px);
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
-  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
@@ -436,7 +431,7 @@
 }
 .nut-indicator-line-active {
   transition: transform 0.3s ease-in-out;
-  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-indicator-track {
@@ -450,7 +445,7 @@
   height: 100%;
   box-sizing: border-box;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
-  background-color: var(--nutui-gray-4);
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
   opacity: 0.4;
 }
 
@@ -545,15 +540,7 @@
   display: flex;
   position: relative;
 }
-.nut-swiper-inner-horizontal {
-  /* #ifndef rn */
-  transform: translateX(var(--swiper-offset));
-  /* #ifndef rn */
-}
 .nut-swiper-inner-vertical {
-  /* #ifndef rn */
-  transform: translateY(var(--swiper-offset));
-  /* #ifndef rn */
   flex-direction: column;
 }
 
@@ -573,9 +560,6 @@
 .nut-rtl .nut-swiper-indicator {
   left: auto;
   right: 50%;
-  /* #ifndef rn */
-  transform: translateX(50%);
-  /* #endif */
 }
 [dir=rtl] .nut-swiper-indicator-vertical,
 .nut-rtl .nut-swiper-indicator-vertical {
@@ -625,7 +609,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -638,7 +622,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-gray-3);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 

package/dist/es/packages/indicator/style/style.css

@@ -18,7 +18,7 @@
   width: var(--nutui-indicator-dot-size, 3px);
   height: var(--nutui-indicator-dot-size, 3px);
   border-radius: 50%;
-  background-color: var(--nutui-gray-4);
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
   margin: 0 var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxxs, 2px));
   opacity: 0.4;
 }
@@ -31,7 +31,7 @@
 .nut-indicator-dot-active, .nut-indicator-line-active {
   width: var(--nutui-indicator-dot-active-size, 6px);
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
-  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
   opacity: 1;
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
@@ -62,7 +62,7 @@
 }
 .nut-indicator-line-active {
   transition: transform 0.3s ease-in-out;
-  background: var(--nutui-indicator-color, var(--nutui-brand-6));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-indicator-track {
@@ -76,7 +76,7 @@
   height: 100%;
   box-sizing: border-box;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
-  background-color: var(--nutui-gray-4);
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
   opacity: 0.4;
 }
 

package/dist/es/packages/infiniteloading/infiniteloading.d.ts

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 import { InfiniteLoadingType } from './types';
 export interface InfiniteLoadingProps extends BasicComponent {
     type: InfiniteLoadingType;