@nutui/nutui-react-taro 3.0.0-beta.1 → 3.0.0-beta.11

package/dist/cjs/packages/input/style/input.scss

@@ -5,23 +5,29 @@
   flex-wrap: nowrap;
   flex: 1;
   align-items: center;
-  padding: $input-padding;
-  line-height: 24px;
   font-size: $input-font-size;
   box-sizing: border-box;
-  border-radius: $input-border-radius;
-  background-color: $input-background-color;
-  border-bottom: $input-border-bottom-width solid $input-border-bottom;
 
   .nut-icon {
-    color: #c8c9cc;
+    color: $color-text-disabled;
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+  }
+  &-container {
+    height: 38px;
+    padding: $input-padding;
+    background-color: $input-background-color;
+    border-radius: $input-border-radius;
+    border-bottom: $input-border-bottom-width solid $input-border-bottom;
   }
 }
 
 .nut-input-native {
   flex: 1;
-  color: $input-color;
+  color: $color-title;
   font-size: $input-font-size;
+  line-height: $input-font-size;
   padding: 0;
   border: 0;
   outline: 0 none;
@@ -31,19 +37,28 @@
 
 /* #ifndef rn */
 .nut-input-native::placeholder {
-  color: #757575;
+  color: $color-text-help;
 }
-
 /* #endif */
 
+.nut-input-readonly {
+  .nut-input-native {
+    color: $color-text-help;
+  }
+}
+
 .nut-input-disabled {
-  color: $input-disabled-color !important;
+  color: $color-text-disabled !important;
 
   input:disabled {
-    color: $input-disabled-color;
+    color: $color-text-disabled;
     cursor: not-allowed;
     background: none;
     opacity: 1;
-    -webkit-text-fill-color: $input-disabled-color;
+    -webkit-text-fill-color: $color-text-disabled;
   }
 }
+
+.nut-input-clear {
+  // flex: 0;
+}

package/dist/cjs/packages/input/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-input {
   position: relative;
   display: flex;
@@ -5,22 +9,28 @@
   flex-wrap: nowrap;
   flex: 1;
   align-items: center;
-  padding: var(--nutui-input-padding, 10px 25px);
-  line-height: 24px;
   font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
-  border-radius: var(--nutui-input-border-radius, 0);
-  background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff));
-  border-bottom: var(--nutui-input-border-bottom-width, 0px) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-input .nut-icon {
-  color: #c8c9cc;
+  color: var(--nutui-gray-4);
+  width: 14px;
+  height: 14px;
+  font-size: 14px;
+}
+.nut-input-container {
+  height: 38px;
+  padding: var(--nutui-input-padding, 12px);
+  background-color: var(--nutui-input-background-color, var(--nutui-gray-1));
+  border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, 6px));
+  border-bottom: var(--nutui-input-border-bottom-width, 0px) solid var(--nutui-input-border-bottom, var(--nutui-black-3));
 }
 
 .nut-input-native {
   flex: 1;
-  color: var(--nutui-input-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-gray-7);
   font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
+  line-height: var(--nutui-input-font-size, var(--nutui-font-size-base, 14px));
   padding: 0;
   border: 0;
   outline: 0 none;
@@ -30,17 +40,21 @@
 
 /* #ifndef rn */
 .nut-input-native::placeholder {
-  color: #757575;
+  color: var(--nutui-gray-5);
 }
 
 /* #endif */
+.nut-input-readonly .nut-input-native {
+  color: var(--nutui-gray-5);
+}
+
 .nut-input-disabled {
-  color: var(--nutui-input-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)) !important;
+  color: var(--nutui-gray-4) !important;
 }
 .nut-input-disabled input:disabled {
-  color: var(--nutui-input-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-gray-4);
   cursor: not-allowed;
   background: none;
   opacity: 1;
-  -webkit-text-fill-color: var(--nutui-input-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  -webkit-text-fill-color: var(--nutui-gray-4);
 }

package/dist/cjs/packages/input/style/style.harmony.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-input {
   position: relative;
   display: flex;
@@ -5,22 +9,28 @@
   flex-wrap: nowrap;
   flex: 1;
   align-items: center;
-  padding: 10px 25px;
-  line-height: 24px;
   font-size: 14px;
   box-sizing: border-box;
-  border-radius: 0;
-  background-color: #ffffff;
-  border-bottom: 0px solid rgba(0, 0, 0, 0.06);
 }
 .nut-input .nut-icon {
-  color: #c8c9cc;
+  color: #c2c4cc;
+  width: 14px;
+  height: 14px;
+  font-size: 14px;
+}
+.nut-input-container {
+  height: 38px;
+  padding: 12px;
+  background-color: #ffffff;
+  border-radius: 6px;
+  border-bottom: 0px solid rgba(0, 0, 0, 0.06);
 }
 
 .nut-input-native {
   flex: 1;
   color: #1a1a1a;
   font-size: 14px;
+  line-height: 14px;
   padding: 0;
   border: 0;
   outline: 0 none;
@@ -30,10 +40,14 @@
 
 /* #ifndef rn */
 .nut-input-native::placeholder {
-  color: #757575;
+  color: #888b94;
 }
 
 /* #endif */
+.nut-input-readonly .nut-input-native {
+  color: #888b94;
+}
+
 .nut-input-disabled {
   color: #c2c4cc !important;
 }

package/dist/cjs/packages/inputnumber/inputnumber.js

@@ -62,7 +62,6 @@ var InputNumber = function InputNumber(props) {
     ]);
     var isRnAndHarmony = (0, _platformtaro.harmonyAndRn)();
     var isRn = (0, _platformtaro.rn)();
-    var isHarmony = (0, _platformtaro.harmony)();
     var classes = (0, _classnames.default)(classPrefix, className);
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), focused = _useState[0], setFocused = _useState[1];
     var inputRef = (0, _react.useRef)(null);

package/dist/cjs/packages/inputnumber/style/inputnumber.scss

@@ -1,8 +1,13 @@
 .nut-inputnumber {
-  display: flex;
+  display: inline-flex;
+  width: calc(
+    2 * #{$inputnumber-input-margin} + 2 * #{$inputnumber-button-width} + #{$inputnumber-input-width}
+  );
   flex-direction: row;
   align-items: center;
-
+  background-color: $color-background;
+  border-radius: $inputnumber-input-border-radius;
+  overflow: hidden;
   &-minus,
   &-add {
     display: flex;
@@ -11,21 +16,18 @@
     width: $inputnumber-button-width;
     height: $inputnumber-button-height;
     background-color: $inputnumber-button-background-color;
-    border-radius: $inputnumber-button-border-radius;
+    .nut-icon {
+      --nut-icon-width: 10px;
+      --nut-icon-height: 10px;
+    }
   }
 
   &-icon {
-    color: $inputnumber-icon-color;
-    /*  #ifdef rn harmony  */
-    font-size: 14px;
-    /*  #endif  */
-    /*  #ifndef  rn harmony  */
-    font-size: $inputnumber-icon-size;
-    /*  #endif */
+    color: $color-text;
     cursor: pointer;
 
     &-disabled {
-      color: $inputnumber-disabled-color;
+      color: $color-text-disabled;
       cursor: not-allowed;
     }
   }
@@ -35,16 +37,17 @@
     justify-content: center;
     align-items: center;
     width: $inputnumber-input-width;
+    font-size: $inputnumber-input-font-size;
     height: $inputnumber-input-height;
     text-align: center;
     outline: none;
     border: $inputnumber-input-border;
-    border-radius: $inputnumber-input-border-radius;
-    margin: $inputnumber-input-margin;
-    color: $inputnumber-input-font-color;
+    margin-left: $inputnumber-input-margin;
+    margin-right: $inputnumber-input-margin;
+    color: $color-text;
     background-color: $inputnumber-input-background-color;
     &-disabled {
-      color: $inputnumber-disabled-color;
+      color: $color-text-disabled;
     }
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
@@ -53,7 +56,7 @@
   }
 
   &-input-disabled {
-    color: $inputnumber-disabled-color;
+    color: $color-text-disabled;
   }
 
   &-icon-minus {

package/dist/cjs/packages/inputnumber/style/style.css

@@ -1,53 +1,59 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-inputnumber {
-  display: flex;
+  display: inline-flex;
+  width: calc(2 * var(--nutui-inputnumber-input-margin, 0px) + 2 * var(--nutui-inputnumber-button-width, 20px) + var(--nutui-inputnumber-input-width, 26px));
   flex-direction: row;
   align-items: center;
+  background-color: var(--nutui-gray-3);
+  border-radius: var(--nutui-inputnumber-input-border-radius, 4px);
+  overflow: hidden;
 }
 .nut-inputnumber-minus, .nut-inputnumber-add {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-inputnumber-button-width, 14px);
-  height: var(--nutui-inputnumber-button-height, 24px);
+  width: var(--nutui-inputnumber-button-width, 20px);
+  height: var(--nutui-inputnumber-button-height, 20px);
   background-color: var(--nutui-inputnumber-button-background-color, transparent);
-  border-radius: var(--nutui-inputnumber-button-border-radius, 16px);
+}
+.nut-inputnumber-minus .nut-icon, .nut-inputnumber-add .nut-icon {
+  --nut-icon-width: 10px;
+  --nut-icon-height: 10px;
 }
 .nut-inputnumber-icon {
-  color: var(--nutui-inputnumber-icon-color, var(--nutui-color-text, #505259));
-  /*  #ifdef rn harmony  */
-  font-size: 14px;
-  /*  #endif  */
-  /*  #ifndef  rn harmony  */
-  font-size: var(--nutui-inputnumber-icon-size, 8px);
-  /*  #endif */
+  color: var(--nutui-gray-6);
   cursor: pointer;
 }
 .nut-inputnumber-icon-disabled {
-  color: var(--nutui-inputnumber-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-gray-4);
   cursor: not-allowed;
 }
 .nut-inputnumber-input {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--nutui-inputnumber-input-width, 60px);
-  height: var(--nutui-inputnumber-input-height, 24px);
+  width: var(--nutui-inputnumber-input-width, 26px);
+  font-size: var(--nutui-inputnumber-input-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-inputnumber-input-height, 20px);
   text-align: center;
   outline: none;
   border: var(--nutui-inputnumber-input-border, 0);
-  border-radius: var(--nutui-inputnumber-input-border-radius, 6px);
-  margin: var(--nutui-inputnumber-input-margin, 0);
-  color: var(--nutui-inputnumber-input-font-color, var(--nutui-color-title, #1a1a1a));
-  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background, #f5f6fa));
+  margin-left: var(--nutui-inputnumber-input-margin, 0px);
+  margin-right: var(--nutui-inputnumber-input-margin, 0px);
+  color: var(--nutui-gray-6);
+  background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-gray-3));
 }
 .nut-inputnumber-input-disabled {
-  color: var(--nutui-inputnumber-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-gray-4);
 }
 .nut-inputnumber-input::-webkit-outer-spin-button, .nut-inputnumber-input::-webkit-inner-spin-button {
   appearance: none;
 }
 .nut-inputnumber-input-disabled {
-  color: var(--nutui-inputnumber-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-gray-4);
 }
 .nut-inputnumber-icon-minus {
   --nut-icon-width: 16px;

package/dist/cjs/packages/inputnumber/style/style.harmony.css

@@ -1,34 +1,34 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-inputnumber {
-  display: flex;
+  display: inline-flex;
+  width: calc(2 * 0px + 2 * 20px + 26px);
   flex-direction: row;
   align-items: center;
+  background-color: #f2f3f5;
+  border-radius: 4px;
+  overflow: hidden;
 }
 .nut-inputnumber-minus {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 14px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   background-color: transparent;
-  border-radius: 16px;
 }
 .nut-inputnumber-add {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 14px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   background-color: transparent;
-  border-radius: 16px;
 }
 .nut-inputnumber-icon {
   color: #505259;
-  /*  #ifdef rn harmony  */
-  font-size: 14px;
-  /*  #endif  */
-  /*  #ifndef  rn harmony  */
-  font-size: 8px;
-  /*  #endif */
   cursor: pointer;
 }
 .nut-inputnumber-icon-disabled {
@@ -39,15 +39,16 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 60px;
-  height: 24px;
+  width: 26px;
+  font-size: 12px;
+  height: 20px;
   text-align: center;
   outline: none;
   border: 0;
-  border-radius: 6px;
-  margin: 0;
-  color: #1a1a1a;
-  background-color: #f5f6fa;
+  margin-left: 0px;
+  margin-right: 0px;
+  color: #505259;
+  background-color: #f2f3f5;
 }
 .nut-inputnumber-input-disabled {
   color: #c2c4cc;

package/dist/cjs/packages/layout/style/style.css

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */

package/dist/cjs/packages/layout/style/style.harmony.css

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */

package/dist/cjs/packages/loading/index.d.ts

@@ -1,3 +1,3 @@
 import { Loading } from "./loading";
-export type { LoadingProps, LoadingType, LoadingDirection, } from "./loading";
+export type { LoadingProps, LoadingType, LoadingDirection } from './types';
 export default Loading;

package/dist/cjs/packages/loading/loading.d.ts

@@ -1,10 +1,3 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export type LoadingType = 'spinner' | 'circular';
-export type LoadingDirection = 'horizontal' | 'vertical';
-export interface LoadingProps extends BasicComponent {
-    type: LoadingType;
-    direction: LoadingDirection;
-    icon?: ReactNode;
-}
-export declare const Loading: FunctionComponent<Partial<LoadingProps> & React.HTMLAttributes<HTMLDivElement>>;
+import React from 'react';
+import { LoadingProps } from './types';
+export declare const Loading: React.ForwardRefExoticComponent<Partial<LoadingProps> & React.RefAttributes<any>>;

package/dist/cjs/packages/loading/loading.js

@@ -9,14 +9,17 @@ Object.defineProperty(exports, "Loading", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _iconsreacttaro = require("@nutui/icons-react-taro");
 var _components = require("@tarojs/components");
+var _index = /*#__PURE__*/ _interop_require_default._(require("../lottie/index"));
 var _typings = require("../../utils/typings");
+var _mergeprops = require("../../utils/merge-props");
 // 方便以后扩展设置为键值对形式
 var loadingMap = {
     circular: _iconsreacttaro.Loading1,
@@ -25,27 +28,53 @@ var loadingMap = {
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     // 对比一下,个人感觉还是Loading1比较好看一些,所以用它作为了默认的loading图标
     type: 'circular',
-    direction: 'horizontal'
+    direction: 'horizontal',
+    lottieProps: {}
 });
-var Loading = function Loading(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, style = _ref.style, children = _ref.children, direction = _ref.direction, icon = _ref.icon, rest = (0, _object_without_properties._)(_ref, [
+var defaultLottieProps = {
+    loop: true,
+    autoplay: true
+};
+var Loading = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
+    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, style = _ref.style, children = _ref.children, direction = _ref.direction, icon = _ref.icon, lottieProps = _ref.lottieProps, rest = (0, _object_without_properties._)(_ref, [
         "className",
         "style",
         "children",
         "direction",
-        "icon"
+        "icon",
+        "lottieProps"
     ]);
+    // @ts-ignore
+    var loadingLottieRef = (0, _react.useRef)();
+    var mergedLottieProps = (0, _mergeprops.mergeProps)(defaultLottieProps, lottieProps);
+    _react.default.useImperativeHandle(ref, function() {
+        return loadingLottieRef;
+    });
     var classPrefix = 'nut-loading';
-    var CurLoadingIcon = loadingMap[rest.type] || _iconsreacttaro.Loading1;
+    var getLoadingIcon = function getLoadingIcon() {
+        if (rest.type === 'lottie' && rest.jsonData) {
+            return /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread_props._)((0, _object_spread._)({}, mergedLottieProps), {
+                // @ts-ignore
+                ref: loadingLottieRef,
+                source: rest.jsonData
+            }));
+        }
+        var LoadingIcon = loadingMap[rest.type] || _iconsreacttaro.Loading1;
+        return /*#__PURE__*/ _react.default.createElement(LoadingIcon, {
+            className: "".concat(classPrefix, "-icon")
+        });
+    };
+    var iconboxClassName = function iconboxClassName() {
+        if (rest.type === 'lottie') return "".concat(classPrefix, "-lottie-box");
+        return "".concat(classPrefix, "-icon-box");
+    };
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)(classPrefix, direction === 'vertical' ? "".concat(classPrefix, "-vertical") : '', className),
         style: style
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-icon-box")
-    }, icon || /*#__PURE__*/ _react.default.createElement(CurLoadingIcon, {
-        className: "".concat(classPrefix, "-icon")
-    })), children ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: iconboxClassName()
+    }, icon || getLoadingIcon()), children ? /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-text")
-    }, children) : '');
-};
+    }, children) : null);
+});
 Loading.displayName = 'NutLoading';

package/dist/cjs/packages/loading/style/loading.scss

@@ -21,9 +21,15 @@
       font-size: $loading-icon-size;
     }
   }
+  .nut-loading-lottie-box {
+    width: 56px;
+    height: 56px;
+    border-radius: $radius-base;
+    background: $loading-lottie-background;
+  }
 
   .nut-loading-text {
-    padding: 8px;
+    padding-top: $spacing-base;
     color: $loading-color;
     font-size: $loading-font-size;
   }

package/dist/cjs/packages/loading/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-loading {
   display: inline-flex;
   flex-direction: row;
@@ -14,14 +18,20 @@
   animation: nut-loading-rotation 1s infinite linear;
 }
 .nut-loading .nut-loading-icon-box .nut-loading-icon {
-  color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94));
+  color: var(--nutui-loading-icon-color, var(--nutui-gray-5));
   width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
   height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
   font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12px));
 }
+.nut-loading .nut-loading-lottie-box {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--nutui-radius-base, 8px);
+  background: var(--nutui-loading-lottie-background, rgba(0, 0, 0, 0.06));
+}
 .nut-loading .nut-loading-text {
-  padding: 8px;
-  color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94));
+  padding-top: var(--nutui-spacing-base, 8px);
+  color: var(--nutui-loading-color, var(--nutui-gray-5));
   font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12px));
 }
 

package/dist/cjs/packages/loading/style/style.harmony.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-loading {
   display: inline-flex;
   flex-direction: row;
@@ -14,14 +18,20 @@
   animation: nut-loading-rotation 1s infinite linear;
 }
 .nut-loading .nut-loading-icon-box .nut-loading-icon {
-  color: #888B94;
+  color: #888b94;
   width: 12px;
   height: 12px;
   font-size: 12px;
 }
+.nut-loading .nut-loading-lottie-box {
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.06);
+}
 .nut-loading .nut-loading-text {
-  padding: 8px;
-  color: #888B94;
+  padding-top: 8px;
+  color: #888b94;
   font-size: 12px;
 }
 

package/dist/cjs/packages/loading/types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { LottieProps } from '../lottie/types';
+import { BasicComponent } from "../../utils/typings";
+export type LoadingRef = any;
+export type LoadingType = 'spinner' | 'circular' | 'lottie';
+export type LoadingDirection = 'horizontal' | 'vertical';
+export interface LoadingProps extends BasicComponent {
+    type: LoadingType;
+    jsonData: any;
+    lottieProps: Partial<LottieProps>;
+    direction: LoadingDirection;
+    icon?: ReactNode;
+}

package/dist/cjs/packages/loading/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/packages/lottie/index.d.ts

@@ -0,0 +1,4 @@
+import { ComponentType } from 'react';
+import { LottieProps } from './types';
+declare const Lottie: ComponentType<Partial<LottieProps>>;
+export default Lottie;