@cniot/android-pda-components 0.1.2 → 0.1.6

package/es/index.es.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -30,9 +33,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import * as React from "react";
-import React__default, { useState, useEffect, useRef, cloneElement, useCallback, forwardRef, useContext, useMemo } from "react";
-import { unstable_batchedUpdates } from "react-dom";
+import React, { useState, useEffect, useRef, cloneElement, useCallback } from "react";
+import ReactDOM from "react-dom";
 var global = "";
 var _classnames_2_3_1_classnames = { exports: {} };
 /*!
@@ -82,7 +84,7 @@ var _classnames_2_3_1_classnames = { exports: {} };
   })();
 })(_classnames_2_3_1_classnames);
 var classNames = _classnames_2_3_1_classnames.exports;
-var index$m = "";
+var index$o = "";
 function getTypeClass$1(type) {
   return {
     "center": "op-overlay center",
@@ -93,25 +95,25 @@ function getTypeClass$1(type) {
 function Overlay(props) {
   const { verticalPosition = "center", visible = true, closable = false, onClosed = () => {
   } } = props;
-  const [hidden, setHidden2] = useState(!visible);
+  const [hidden, setHidden] = useState(!visible);
   const option = {};
   if (closable) {
     option.onClick = (e) => {
-      setHidden2(true);
+      setHidden(true);
       onClosed();
     };
   }
   useEffect(() => {
-    setHidden2(!visible);
+    setHidden(!visible);
   }, [visible]);
-  return !hidden ? /* @__PURE__ */ React__default.createElement("div", __spreadValues({
+  return !hidden ? /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: getTypeClass$1(verticalPosition)
   }, option), props.children) : null;
 }
-var index$l = "";
+var index$n = "";
 const blankFunc$5 = () => {
 };
-class PdaTitle extends React__default.Component {
+class PdaTitle extends React.Component {
   constructor(props) {
     super(props);
     __publicField(this, "state", {
@@ -121,147 +123,320 @@ class PdaTitle extends React__default.Component {
   render() {
     const { className, goBack = true, goBackHandle = blankFunc$5, icon = "scan", title = "\u4EFB\u52A1", menuList = null } = this.props;
     const { showMenu } = this.state;
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       className: classNames({ [className]: true, "pda-header": true })
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "header-click-area",
       onClick: goBack ? goBackHandle : blankFunc$5
-    }, goBack && /* @__PURE__ */ React__default.createElement("div", {
+    }, goBack && /* @__PURE__ */ React.createElement("div", {
       className: "pda-goback"
-    }), icon && /* @__PURE__ */ React__default.createElement("div", {
+    }), icon && /* @__PURE__ */ React.createElement("div", {
       className: classNames({ "pda-header-icon": true, ["pda-header-icon-" + icon]: true })
-    })), /* @__PURE__ */ React__default.createElement("p", {
+    })), /* @__PURE__ */ React.createElement("p", {
       className: classNames({ "pda-title-text": true })
-    }, title), menuList ? /* @__PURE__ */ React__default.createElement("div", {
+    }, title), menuList ? /* @__PURE__ */ React.createElement("div", {
       className: "pda-header-more",
       onClick: (e) => {
         this.setState({ showMenu: true });
       }
-    }) : null, /* @__PURE__ */ React__default.createElement(Overlay, {
+    }) : null, /* @__PURE__ */ React.createElement(Overlay, {
       visible: showMenu,
       verticalPosition: "bottom",
       closable: true,
       onClosed: (e) => this.setState({ showMenu: false })
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "pda-menus"
     }, menuList)));
   }
 }
-var index$k = "";
+var _keycode_2_2_1_keycode = { exports: {} };
+(function(module, exports) {
+  function keyCode(searchInput) {
+    if (searchInput && typeof searchInput === "object") {
+      var hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode;
+      if (hasKeyCode)
+        searchInput = hasKeyCode;
+    }
+    if (typeof searchInput === "number")
+      return names[searchInput];
+    var search = String(searchInput);
+    var foundNamedKey = codes[search.toLowerCase()];
+    if (foundNamedKey)
+      return foundNamedKey;
+    var foundNamedKey = aliases[search.toLowerCase()];
+    if (foundNamedKey)
+      return foundNamedKey;
+    if (search.length === 1)
+      return search.charCodeAt(0);
+    return void 0;
+  }
+  keyCode.isEventKey = function isEventKey(event, nameOrCode) {
+    if (event && typeof event === "object") {
+      var keyCode2 = event.which || event.keyCode || event.charCode;
+      if (keyCode2 === null || keyCode2 === void 0) {
+        return false;
+      }
+      if (typeof nameOrCode === "string") {
+        var foundNamedKey = codes[nameOrCode.toLowerCase()];
+        if (foundNamedKey) {
+          return foundNamedKey === keyCode2;
+        }
+        var foundNamedKey = aliases[nameOrCode.toLowerCase()];
+        if (foundNamedKey) {
+          return foundNamedKey === keyCode2;
+        }
+      } else if (typeof nameOrCode === "number") {
+        return nameOrCode === keyCode2;
+      }
+      return false;
+    }
+  };
+  exports = module.exports = keyCode;
+  var codes = exports.code = exports.codes = {
+    "backspace": 8,
+    "tab": 9,
+    "enter": 13,
+    "shift": 16,
+    "ctrl": 17,
+    "alt": 18,
+    "pause/break": 19,
+    "caps lock": 20,
+    "esc": 27,
+    "space": 32,
+    "page up": 33,
+    "page down": 34,
+    "end": 35,
+    "home": 36,
+    "left": 37,
+    "up": 38,
+    "right": 39,
+    "down": 40,
+    "insert": 45,
+    "delete": 46,
+    "command": 91,
+    "left command": 91,
+    "right command": 93,
+    "numpad *": 106,
+    "numpad +": 107,
+    "numpad -": 109,
+    "numpad .": 110,
+    "numpad /": 111,
+    "num lock": 144,
+    "scroll lock": 145,
+    "my computer": 182,
+    "my calculator": 183,
+    ";": 186,
+    "=": 187,
+    ",": 188,
+    "-": 189,
+    ".": 190,
+    "/": 191,
+    "`": 192,
+    "[": 219,
+    "\\": 220,
+    "]": 221,
+    "'": 222
+  };
+  var aliases = exports.aliases = {
+    "windows": 91,
+    "\u21E7": 16,
+    "\u2325": 18,
+    "\u2303": 17,
+    "\u2318": 91,
+    "ctl": 17,
+    "control": 17,
+    "option": 18,
+    "pause": 19,
+    "break": 19,
+    "caps": 20,
+    "return": 13,
+    "escape": 27,
+    "spc": 32,
+    "spacebar": 32,
+    "pgup": 33,
+    "pgdn": 34,
+    "ins": 45,
+    "del": 46,
+    "cmd": 91
+  };
+  /*!
+   * Programatically add the following
+   */
+  for (i = 97; i < 123; i++)
+    codes[String.fromCharCode(i)] = i - 32;
+  for (var i = 48; i < 58; i++)
+    codes[i - 48] = i;
+  for (i = 1; i < 13; i++)
+    codes["f" + i] = i + 111;
+  for (i = 0; i < 10; i++)
+    codes["numpad " + i] = i + 96;
+  var names = exports.names = exports.title = {};
+  for (i in codes)
+    names[codes[i]] = i;
+  for (var alias in aliases) {
+    codes[alias] = aliases[alias];
+  }
+})(_keycode_2_2_1_keycode, _keycode_2_2_1_keycode.exports);
+var keycode = _keycode_2_2_1_keycode.exports;
+var index$m = "";
 function Button(props) {
   const { type = "default", onClick, className = "" } = props;
-  return /* @__PURE__ */ React__default.createElement("button", {
+  return /* @__PURE__ */ React.createElement("button", {
     className: `pda-button pda-button-${type} ${className}`,
     onClick
   }, props.children);
 }
 function ButtonGroup(props) {
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: "button-group"
   }, props.children);
 }
 Button.Group = ButtonGroup;
-var index$j = "";
-const empty$2 = () => {
+var index$l = "";
+const empty$3 = () => {
 };
-function index$i(props) {
-  const { onBack, icon, title, menus = [], onClickMenuItem = empty$2, cancelMenuText } = props;
-  const [showMenus, setShowMenus] = React__default.useState(false);
-  return /* @__PURE__ */ React__default.createElement("div", {
+function index$k(props) {
+  const {
+    onBack,
+    icon,
+    title,
+    menus = [],
+    onClickMenuItem = empty$3,
+    cancelMenuText,
+    menuShortcutKey,
+    backShortcutKey
+  } = props;
+  const [showMenus, setShowMenus] = React.useState(false);
+  React.useEffect(function() {
+    if (menuShortcutKey) {
+      return bindShortcutKey(getShortcutKeyCodes(menuShortcutKey), function() {
+        setShowMenus(true);
+      });
+    }
+  }, [menuShortcutKey]);
+  React.useEffect(function() {
+    if (backShortcutKey && onBack) {
+      return bindShortcutKey(getShortcutKeyCodes(backShortcutKey), function() {
+        onBack("back");
+      });
+    }
+  }, [backShortcutKey, onBack]);
+  return /* @__PURE__ */ React.createElement("div", {
     className: "pda-header"
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "header-click-area"
-  }, onBack ? /* @__PURE__ */ React__default.createElement("div", {
+  }, onBack ? /* @__PURE__ */ React.createElement("div", {
     className: "pda-goback",
     onClick: () => onBack("back")
-  }) : null, icon && /* @__PURE__ */ React__default.createElement("div", {
+  }) : null, icon && /* @__PURE__ */ React.createElement("div", {
     className: `pda-header-icon pda-header-icon-${icon}`
-  })), /* @__PURE__ */ React__default.createElement("div", {
+  })), /* @__PURE__ */ React.createElement("div", {
     className: "pda-title-text"
-  }, title), menus && menus.length ? /* @__PURE__ */ React__default.createElement("div", {
+  }, title), menus && menus.length ? /* @__PURE__ */ React.createElement("div", {
     className: "pda-header-more",
     onClick: () => setShowMenus(true)
-  }) : null, /* @__PURE__ */ React__default.createElement(Overlay, {
+  }) : null, /* @__PURE__ */ React.createElement(Overlay, {
     visible: showMenus,
     verticalPosition: "bottom",
     closable: false,
     onClosed: () => setShowMenus(false)
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "pda-menus"
   }, menus.map((item, index2) => {
-    return /* @__PURE__ */ React__default.createElement(Button, {
+    return /* @__PURE__ */ React.createElement(Button, {
       onClick: () => {
         setShowMenus(false);
         onClickMenuItem(item);
       },
       key: item.key || index2
     }, item.label);
-  }), cancelMenuText ? /* @__PURE__ */ React__default.createElement("div", {
+  }), cancelMenuText ? /* @__PURE__ */ React.createElement("div", {
     style: { marginTop: 20 }
-  }, /* @__PURE__ */ React__default.createElement(Button, {
+  }, /* @__PURE__ */ React.createElement(Button, {
     onClick: () => setShowMenus(false)
   }, cancelMenuText)) : null)));
 }
-var index$h = "";
-class PdaInfoCard$2 extends React__default.Component {
+function getShortcutKeyCodes(shortcutKey) {
+  const shortcutKeys = shortcutKey.indexOf(",") > -1 ? shortcutKey.split(",") : [shortcutKey];
+  return shortcutKeys.map((k) => {
+    const kc = keycode(k);
+    if (kc === void 0) {
+      console.warn("OPButton.shortcutKey error key value by:", k);
+    }
+    return kc;
+  }).filter((k) => !!k);
+}
+function bindShortcutKey(keys, callback) {
+  function keyUpCallback(event) {
+    if (keys.indexOf(event.keyCode) > -1) {
+      callback && callback(event);
+    }
+  }
+  document.addEventListener("keyup", keyUpCallback);
+  return function() {
+    document.removeEventListener("keyup", keyUpCallback);
+  };
+}
+var index$j = "";
+class PdaInfoCard$2 extends React.Component {
   constructor(props) {
     super(props);
   }
   render() {
     const { className = "", title, highlightInfo, subTitle, subHighlightInfo, subHighlightSubInfo, infoImage, tagText, highlightInfoCN, highlightSubInfo, percentage, highlightSubInfoCN, boldInfo, infoList = [], style = {}, theme = "light" } = this.props;
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       className: classNames({ [className]: true, "pda-info-card": true, "pda-info-card-dark": theme === "dark" }),
       style
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-title-section"
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-title"
-    }, title), tagText ? /* @__PURE__ */ React__default.createElement("div", {
+    }, title), tagText ? /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-tag"
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-tag-text"
-    }, tagText)) : null), /* @__PURE__ */ React__default.createElement("div", {
+    }, tagText)) : null), /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-highlight-section"
-    }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-highlight"
-    }, /* @__PURE__ */ React__default.createElement("span", {
+    }, /* @__PURE__ */ React.createElement("span", {
       className: "pda-info-card-highlight1"
-    }, highlightInfo), /* @__PURE__ */ React__default.createElement("span", {
+    }, highlightInfo), /* @__PURE__ */ React.createElement("span", {
       className: "pda-info-card-highlight1CN"
-    }, highlightInfoCN), /* @__PURE__ */ React__default.createElement("span", {
+    }, highlightInfoCN), /* @__PURE__ */ React.createElement("span", {
       className: "pda-info-card-highlight2"
-    }, highlightSubInfo), /* @__PURE__ */ React__default.createElement("span", {
+    }, highlightSubInfo), /* @__PURE__ */ React.createElement("span", {
       className: "pda-info-card-highlight2CN"
-    }, highlightSubInfoCN)), subTitle ? /* @__PURE__ */ React__default.createElement("div", {
+    }, highlightSubInfoCN)), subTitle ? /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-title"
-    }, subTitle) : null, subHighlightInfo ? /* @__PURE__ */ React__default.createElement("div", {
+    }, subTitle) : null, subHighlightInfo ? /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-highlight"
-    }, /* @__PURE__ */ React__default.createElement("span", {
+    }, /* @__PURE__ */ React.createElement("span", {
       className: "pda-info-card-highlight1"
-    }, subHighlightInfo), /* @__PURE__ */ React__default.createElement("span", {
+    }, subHighlightInfo), /* @__PURE__ */ React.createElement("span", {
       className: "pda-info-card-highlight2"
-    }, subHighlightSubInfo)) : null), infoImage ? /* @__PURE__ */ React__default.createElement("img", {
+    }, subHighlightSubInfo)) : null), infoImage ? /* @__PURE__ */ React.createElement("img", {
       src: infoImage,
       width: 150,
       height: 150
-    }) : null), percentage !== void 0 ? /* @__PURE__ */ React__default.createElement("div", {
+    }) : null), percentage !== void 0 ? /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-progress"
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-progress-inside",
       style: { width: `${percentage * 100}%` }
-    })) : null, /* @__PURE__ */ React__default.createElement("div", {
+    })) : null, /* @__PURE__ */ React.createElement("div", {
       className: "pda-info-card-bold"
     }, boldInfo), infoList.map((item, index2) => {
-      return /* @__PURE__ */ React__default.createElement("div", {
+      return /* @__PURE__ */ React.createElement("div", {
         key: index2,
         className: "pda-info-card-list"
-      }, /* @__PURE__ */ React__default.createElement("span", null, item.label || ""), "\xA0\xA0", /* @__PURE__ */ React__default.createElement("span", null, item.content || ""));
+      }, /* @__PURE__ */ React.createElement("span", null, item.label || ""), "\xA0\xA0", /* @__PURE__ */ React.createElement("span", null, item.content || ""));
     }));
   }
 }
 PdaInfoCard$2.IMAGE_1 = "https://img.alicdn.com/imgextra/i2/O1CN01qYuxip1ME9zhdL9XG_!!6000000001402-2-tps-150-150.png";
-var index$g = "";
-class PdaListItem extends React__default.Component {
+var index$i = "";
+class PdaListItem extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -270,71 +445,88 @@ class PdaListItem extends React__default.Component {
     }, onHeightLightClick = () => {
     }, onIconClick = () => {
     }, highlightText, highlightSubText, stateTextList = [], stateList = [], subInfoList = [], style = {}, icon } = this.props;
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       className: classNames({ [className]: true, "pda-list-item": true }),
       style,
       onClick
-    }, /* @__PURE__ */ React__default.createElement("p", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "pda-listitem-header"
-    }, header), /* @__PURE__ */ React__default.createElement("div", {
+    }, header), /* @__PURE__ */ React.createElement("div", {
       onClick: onHeightLightClick,
       className: "pda-listitem-highlight"
-    }, /* @__PURE__ */ React__default.createElement("p", null, highlightText), /* @__PURE__ */ React__default.createElement("p", null, highlightSubText)), /* @__PURE__ */ React__default.createElement("p", {
+    }, /* @__PURE__ */ React.createElement("div", null, highlightText), /* @__PURE__ */ React.createElement("div", null, highlightSubText)), /* @__PURE__ */ React.createElement("div", {
       className: "pda-listitem-state-text"
     }, stateTextList.map((item, index2) => {
-      return /* @__PURE__ */ React__default.createElement("span", {
+      return /* @__PURE__ */ React.createElement("span", {
         key: index2
       }, item.label || "", "\uFF5C");
-    })), /* @__PURE__ */ React__default.createElement("div", {
+    })), /* @__PURE__ */ React.createElement("div", {
       className: "pda-listitem-state-block"
     }, stateList.map((item, index2) => {
       const type = item && item.type ? item.type : "default";
-      return /* @__PURE__ */ React__default.createElement("div", {
+      return /* @__PURE__ */ React.createElement("div", {
         key: index2,
         className: type
       }, item.label || "");
     })), subInfoList.map((item, index2) => {
-      return /* @__PURE__ */ React__default.createElement("p", {
+      return /* @__PURE__ */ React.createElement("div", {
         key: index2,
         className: "pda-listitem-subinfo"
-      }, /* @__PURE__ */ React__default.createElement("span", null, item.label || ""), "\xA0\xA0", /* @__PURE__ */ React__default.createElement("span", null, item.content || ""));
-    }), icon ? /* @__PURE__ */ React__default.createElement("div", {
+      }, /* @__PURE__ */ React.createElement("span", null, item.label || ""), "\xA0\xA0", /* @__PURE__ */ React.createElement("span", null, item.content || ""));
+    }), icon ? /* @__PURE__ */ React.createElement("div", {
       onClick: onIconClick,
       className: "pda-listitem-icon"
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: classNames({ "listitem-icon-container": true, ["listitem-icon-" + icon]: true })
     })) : null);
   }
 }
-var index$f = "";
-function empty$1() {
+var index$h = "";
+function empty$2() {
 }
-function Confirm$1(props) {
-  const { title = "title", message = null, subMessage = [], okText = "okText", cancelText = null, onClick = empty$1, type = "primary" } = props;
-  return /* @__PURE__ */ React__default.createElement("div", {
+function Confirm(props) {
+  const { title = "title", message = null, subMessage = [], okText = "okText", cancelText = null, onClick = empty$2, type = "primary" } = props;
+  return /* @__PURE__ */ React.createElement("div", {
     className: classNames({ "confirm-wrap": true, ["confirm-" + type]: true })
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "confirm-title"
-  }, title), message ? /* @__PURE__ */ React__default.createElement("div", {
+  }, title), message ? /* @__PURE__ */ React.createElement("div", {
     className: "confirm-message"
-  }, message) : null, subMessage.length ? /* @__PURE__ */ React__default.createElement("div", {
+  }, message) : null, subMessage.length ? /* @__PURE__ */ React.createElement("div", {
     className: "confirm-sub-message"
   }, subMessage.map((item, index2) => {
-    return /* @__PURE__ */ React__default.createElement("p", {
+    return /* @__PURE__ */ React.createElement("p", {
       key: index2,
       className: "pda-listitem-subinfo"
-    }, /* @__PURE__ */ React__default.createElement("span", null, item.label || ""), ":\xA0", /* @__PURE__ */ React__default.createElement("span", null, item.content || ""));
-  })) : null, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("span", null, item.label || ""), ":\xA0", /* @__PURE__ */ React.createElement("span", null, item.content || ""));
+  })) : null, /* @__PURE__ */ React.createElement("div", {
     className: "confirm-btns"
-  }, cancelText ? /* @__PURE__ */ React__default.createElement(Button, {
+  }, cancelText ? /* @__PURE__ */ React.createElement(Button, {
     className: "confirm-cancel-button",
     onClick: () => onClick(false)
-  }, cancelText) : null, /* @__PURE__ */ React__default.createElement(Button, {
+  }, cancelText) : null, /* @__PURE__ */ React.createElement(Button, {
     type: "primary",
     onClick: () => onClick(true)
   }, okText)));
 }
-var index$e = "";
+var index$g = "";
+function resolveContainer(getContainer) {
+  const container = typeof getContainer === "function" ? getContainer() : getContainer;
+  return container || document.body;
+}
+function isUndefined(v) {
+  return v === void 0;
+}
+function mergeProps(...items) {
+  function customizer(objValue, srcValue) {
+    return isUndefined(srcValue) ? objValue : srcValue;
+  }
+  let ret = Object.assign({}, items[0]);
+  for (let i = 1; i < items.length; i++) {
+    ret = Object.assign(ret, items[i], customizer);
+  }
+  return ret;
+}
 function getTypeClass(type) {
   return {
     "success": "toast-wrap success",
@@ -342,31 +534,105 @@ function getTypeClass(type) {
     "error": "toast-wrap error"
   }[type] || "toast-wrap";
 }
-function Confirm(props) {
+function Toast(props) {
   const { title = "title", message = "message", type = "success", duration = null } = props;
-  const [hidden, setHidden2] = useState(false);
+  const [hidden, setHidden] = useState(false);
   if (duration) {
     setTimeout(() => {
-      setHidden2(true);
+      setHidden(true);
     }, duration);
   }
-  return !hidden ? /* @__PURE__ */ React__default.createElement("div", {
+  return !hidden ? /* @__PURE__ */ React.createElement("div", {
     className: getTypeClass(type)
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "toast-title"
-  }, title), /* @__PURE__ */ React__default.createElement("div", {
+  }, title), /* @__PURE__ */ React.createElement("div", {
     className: "toast-message"
   }, message)) : null;
 }
+const defaultProps$1 = {
+  maskClickable: true,
+  stopPropagation: ["click"]
+};
+const InternalToast = (p) => {
+  mergeProps(defaultProps$1, p);
+  return /* @__PURE__ */ React.createElement(Overlay, {
+    verticalPosition: "bottom",
+    closable: true
+  }, /* @__PURE__ */ React.createElement(Toast, {
+    title: "111111",
+    message: "22222",
+    type: "success"
+  }));
+};
+const containers = [];
+function unmount(container) {
+  const unmountResult = ReactDOM.unmountComponentAtNode(container);
+  if (unmountResult && container.parentNode) {
+    container.parentNode.removeChild(container);
+  }
+}
+const defaultProps = {
+  duration: 2e3
+};
+function show(p) {
+  const props = mergeProps(defaultProps, p);
+  let timer = 0;
+  const { getContainer = () => document.body } = props;
+  const container = document.createElement("div");
+  const bodyContainer = resolveContainer(getContainer);
+  bodyContainer.appendChild(container);
+  console.log("container: ", container);
+  clear();
+  containers.push(container);
+  function TempToast() {
+    const [visible, setVisible] = useState(true);
+    useEffect(() => {
+      return () => {
+        var _a;
+        (_a = props.afterClose) == null ? void 0 : _a.call(props);
+      };
+    }, []);
+    useEffect(() => {
+      if (props.duration === 0) {
+        return;
+      }
+      timer = window.setTimeout(() => {
+        setVisible(false);
+      }, props.duration);
+      return () => {
+        window.clearTimeout(timer);
+      };
+    }, []);
+    return /* @__PURE__ */ React.createElement(InternalToast, __spreadProps(__spreadValues({}, props), {
+      getContainer: () => container,
+      visible,
+      afterClose: () => {
+        unmount(container);
+      }
+    }));
+  }
+  ReactDOM.render(/* @__PURE__ */ React.createElement(TempToast, null), container);
+}
+function clear() {
+  while (true) {
+    const container = containers.pop();
+    if (!container)
+      break;
+    unmount(container);
+  }
+}
+Toast.show = show;
+Toast.clear = clear;
 function Alert(props) {
   const { service, data = {} } = props;
   const { title = "title", message = "message", okText = "okText", cancelText = "" } = data;
-  const onClickCallback = React__default.useCallback(function() {
+  const onClickCallback = React.useCallback(function() {
     service.onNext(true);
   }, [service]);
-  return /* @__PURE__ */ React__default.createElement(Overlay, {
+  return /* @__PURE__ */ React.createElement(Overlay, {
     verticalPosition: "bottom"
-  }, /* @__PURE__ */ React__default.createElement(Confirm$1, {
+  }, /* @__PURE__ */ React.createElement(Confirm, {
     title,
     message,
     okText,
@@ -376,10 +642,10 @@ function Alert(props) {
 }
 function Start(props) {
   const { action, appManager, service } = props;
-  const onReStart = React__default.useCallback(function() {
+  const onReStart = React.useCallback(function() {
     service.onStart(appManager.config.appId);
   });
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -388,20 +654,20 @@ function Start(props) {
       width: "100vw",
       height: "100vh"
     }
-  }, /* @__PURE__ */ React__default.createElement(Button, {
+  }, /* @__PURE__ */ React.createElement(Button, {
     type: "primary",
     onClick: onReStart
-  }, "\u5F00\u59CB\u4F5C\u4E1A"), /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__default.createElement("div", null, appManager.config.appId), /* @__PURE__ */ React__default.createElement("div", null, appManager.config.groupId));
+  }, "\u5F00\u59CB\u4F5C\u4E1A"), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("div", null, appManager.config.appId), /* @__PURE__ */ React.createElement("div", null, appManager.config.groupId));
 }
 function confirm(props) {
   const { service, data = {} } = props;
   const { title = "title", message, subMessage = [], okText = "okText", cancelText = "" } = data;
-  const onClickCallback = React__default.useCallback(function(isConfirm) {
+  const onClickCallback = React.useCallback(function(isConfirm) {
     service.onNext(isConfirm);
   }, [service]);
-  return /* @__PURE__ */ React__default.createElement(Overlay, {
+  return /* @__PURE__ */ React.createElement(Overlay, {
     verticalPosition: "bottom"
-  }, /* @__PURE__ */ React__default.createElement(Confirm$1, {
+  }, /* @__PURE__ */ React.createElement(Confirm, {
     title,
     message,
     subMessage,
@@ -411,17 +677,17 @@ function confirm(props) {
   }));
 }
 function Prompt(props) {
-  return /* @__PURE__ */ React__default.createElement("div", null, "\u9875\u9762\u4E0D\u5B58\u5728");
+  return /* @__PURE__ */ React.createElement("div", null, "\u9875\u9762\u4E0D\u5B58\u5728");
 }
 function toast(props) {
   const { data = {}, service } = props;
   const { title, level, message, duration = null } = data;
-  const [hidden, setHidden2] = useState(false);
-  React__default.useEffect(() => {
+  const [hidden, setHidden] = useState(false);
+  React.useEffect(() => {
     let timeout = null;
     if (duration) {
       setTimeout(() => {
-        setHidden2(true);
+        setHidden(true);
         service.onNext("");
       }, duration);
     }
@@ -429,28 +695,30 @@ function toast(props) {
       clearTimeout(timeout);
     };
   }, []);
-  return !hidden ? /* @__PURE__ */ React__default.createElement(Overlay, {
+  return !hidden ? /* @__PURE__ */ React.createElement(Overlay, {
     verticalPosition: "bottom"
-  }, /* @__PURE__ */ React__default.createElement(Confirm, {
+  }, /* @__PURE__ */ React.createElement("div", {
+    style: { width: "90%" }
+  }, /* @__PURE__ */ React.createElement(Toast, {
     type: level,
     title,
     message: splitMessage(message)
-  })) : null;
+  }))) : null;
 }
 function splitMessage(message) {
   var msg = String(message).split("by Error:");
   return msg[1] || msg[0];
 }
-var index$d = "";
+var index$f = "";
 function NotFound(props) {
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     style: { padding: "20%" }
-  }, /* @__PURE__ */ React__default.createElement("h1", null, "404 ", /* @__PURE__ */ React__default.createElement("small", {
+  }, /* @__PURE__ */ React.createElement("h1", null, "404 ", /* @__PURE__ */ React.createElement("small", {
     style: { fontSize: "60%" }
-  }, "Not found")), /* @__PURE__ */ React__default.createElement("div", null, props.action.getPage()));
+  }, "Not found")), /* @__PURE__ */ React.createElement("div", null, props.action.getPage()));
 }
-function _extends$3() {
-  _extends$3 = Object.assign || function(target) {
+function _extends() {
+  _extends = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -461,7 +729,7 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends.apply(this, arguments);
 }
 var r, B = r || (r = {});
 B.Pop = "POP";
@@ -542,7 +810,7 @@ function createHashHistory(b) {
   }
   function z(a, e) {
     e === void 0 && (e = null);
-    return C(_extends$3({ pathname: d.pathname, hash: "", search: "" }, typeof a === "string" ? J(a) : a, { state: e, key: H() }));
+    return C(_extends({ pathname: d.pathname, hash: "", search: "" }, typeof a === "string" ? J(a) : a, { state: e, key: H() }));
   }
   function A(a) {
     v = a;
@@ -589,7 +857,7 @@ function createHashHistory(b) {
   var v = r.Pop;
   b = h();
   var q = b[0], d = b[1], f = F(), c = F();
-  q == null && (q = 0, u.replaceState(_extends$3({}, u.state, { idx: q }), ""));
+  q == null && (q = 0, u.replaceState(_extends({}, u.state, { idx: q }), ""));
   return {
     get action() {
       return v;
@@ -620,11 +888,11 @@ function createHashHistory(b) {
     }
   };
 }
-var index$c = "";
+var index$e = "";
 function Debug(props) {
   const { appManager } = props;
   const pages = Array.from(appManager.pageManager.keys()).reverse();
-  React__default.useEffect(function() {
+  React.useEffect(function() {
     const history = createHashHistory();
     const unListen = history.listen(({ action, location }) => {
       const pathname = location.pathname;
@@ -632,18 +900,18 @@ function Debug(props) {
     });
     return unListen;
   }, []);
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: "local-debug-side"
-  }, /* @__PURE__ */ React__default.createElement("ul", null, pages.map((pathname) => /* @__PURE__ */ React__default.createElement("li", {
+  }, /* @__PURE__ */ React.createElement("ul", null, pages.map((pathname) => /* @__PURE__ */ React.createElement("li", {
     key: pathname
-  }, /* @__PURE__ */ React__default.createElement("a", {
+  }, /* @__PURE__ */ React.createElement("a", {
     href: `#${pathname}`
   }, pathname)))));
 }
 function Loading$1(props) {
-  const [showLoading, setShowLoading] = React__default.useState(false);
+  const [showLoading, setShowLoading] = React.useState(false);
   const edgeService = props.edgeService;
-  React__default.useEffect(function() {
+  React.useEffect(function() {
     let currentLoading = false;
     const throttleSetShowLoading = function(loading) {
       currentLoading = loading;
@@ -666,11 +934,11 @@ function Loading$1(props) {
       edgeService.off("IO_STATUS", throttleSetShowLoading);
     };
   }, [edgeService]);
-  return showLoading ? /* @__PURE__ */ React__default.createElement("div", {
+  return showLoading ? /* @__PURE__ */ React.createElement("div", {
     style: { position: "absolute", left: 0, top: 0, zIndex: 100 }
   }, "LOADING...") : null;
 }
-var index$b = {
+var index$d = {
   Alert,
   Start,
   Toast: toast,
@@ -680,7 +948,7 @@ var index$b = {
   Prompt,
   Loading: Loading$1
 };
-var index$a = "";
+var index$c = "";
 function Presentation(props) {
   const {
     image = Presentation.IMAGE_1,
@@ -688,13 +956,13 @@ function Presentation(props) {
     subText = "",
     transparent
   } = props;
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: transparent ? "presentation-card transparent" : "presentation-card"
-  }, /* @__PURE__ */ React__default.createElement("img", {
+  }, /* @__PURE__ */ React.createElement("img", {
     src: image
-  }), text ? /* @__PURE__ */ React__default.createElement("div", {
+  }), text ? /* @__PURE__ */ React.createElement("div", {
     className: "text"
-  }, text) : null, subText ? /* @__PURE__ */ React__default.createElement("div", {
+  }, text) : null, subText ? /* @__PURE__ */ React.createElement("div", {
     className: "sub-text"
   }, subText) : null);
 }
@@ -702,15 +970,15 @@ Presentation.IMAGE_1 = "https://img.alicdn.com/imgextra/i3/O1CN019Ivkor1ksy3pMGD
 Presentation.IMAGE_2 = "https://img.alicdn.com/imgextra/i1/O1CN01lhSunu1X4VPw1Mlas_!!6000000002870-2-tps-352-158.png";
 Presentation.IMAGE_3 = "https://img.alicdn.com/imgextra/i1/O1CN01mreYXo1XfbUsQ7hip_!!6000000002951-2-tps-322-144.png";
 Presentation.IMAGE_4 = "https://img.alicdn.com/imgextra/i3/O1CN017gNM8F1Fmmcfti7Dg_!!6000000000530-1-tps-414-286.gif";
-var index$9 = "";
-function empty() {
+var index$b = "";
+function empty$1() {
 }
 function List(props) {
-  const { dataSource = [], onClickItem, onItemClick = empty } = props;
-  return /* @__PURE__ */ React__default.createElement("div", {
+  const { dataSource = [], onClickItem, onItemClick = empty$1 } = props;
+  return /* @__PURE__ */ React.createElement("div", {
     className: "android-pda-list"
   }, dataSource.map((item, index2) => {
-    return /* @__PURE__ */ React__default.createElement(DefaultItem, {
+    return /* @__PURE__ */ React.createElement(DefaultItem, {
       key: item.key || index2,
       dataSource: item,
       onClick: onClickItem || onItemClick
@@ -726,32 +994,32 @@ function DefaultItem(props) {
   };
   const { title, subTitle, extra, tags = [], tabIndex } = dataSource;
   const { onClick } = props;
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: "default-item",
     onClick: () => {
       onClick(props.dataSource);
     },
     tabIndex
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "text"
-  }, /* @__PURE__ */ React__default.createElement("div", null, title), /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", null, title), /* @__PURE__ */ React.createElement("div", {
     className: "sub-text"
-  }, subTitle), /* @__PURE__ */ React__default.createElement("div", {
+  }, subTitle), /* @__PURE__ */ React.createElement("div", {
     className: "sub-tags"
   }, tags.map((text) => {
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       className: "sub-tag-item",
       key: text
     }, text);
-  }))), /* @__PURE__ */ React__default.createElement("div", {
+  }))), /* @__PURE__ */ React.createElement("div", {
     className: "extra"
   }, extra));
 }
 List.Item = DefaultItem;
-var index$8 = "";
+var index$a = "";
 const blankFunc$4 = () => {
 };
-class BaseLayoutContainer extends React__default.Component {
+class BaseLayoutContainer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {};
@@ -801,21 +1069,21 @@ class BaseLayoutContainer extends React__default.Component {
   render() {
     const props = this.props;
     const { style = {}, header, footer } = this.props;
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       className: classNames({ "baselayout-wrapper": true }),
       style
-    }, header && /* @__PURE__ */ React__default.createElement("div", {
+    }, header && /* @__PURE__ */ React.createElement("div", {
       className: classNames({ "baselayout-header": true })
-    }, header), /* @__PURE__ */ React__default.createElement("div", {
+    }, header), /* @__PURE__ */ React.createElement("div", {
       className: classNames({ "baselayout-container": true })
-    }, props.children), footer && /* @__PURE__ */ React__default.createElement("div", {
+    }, props.children), footer && /* @__PURE__ */ React.createElement("div", {
       className: classNames({ "baselayout-footer": true })
     }, footer));
   }
 }
 const blankFunc$3 = () => {
 };
-class RfidOnce$1 extends React__default.Component {
+class RfidOnce$1 extends React.Component {
   constructor(props) {
     super(props);
     this._rfidBeginScan = false;
@@ -882,12 +1150,12 @@ class RfidOnce$1 extends React__default.Component {
   render() {
     const props = this.props;
     const _a = props, { onRfidOnce = blankFunc$3 } = _a, opts = __objRest(_a, ["onRfidOnce"]);
-    return /* @__PURE__ */ React__default.createElement(BaseLayoutContainer, __spreadValues({}, opts));
+    return /* @__PURE__ */ React.createElement(BaseLayoutContainer, __spreadValues({}, opts));
   }
 }
 const blankFunc$2 = () => {
 };
-class RfidOnce extends React__default.Component {
+class RfidOnce extends React.Component {
   constructor(props) {
     super(props);
     this._rfidBeginScan = false;
@@ -963,7 +1231,7 @@ class RfidOnce extends React__default.Component {
   render() {
     const props = this.props;
     const _a = props, { onRfidScan = blankFunc$2, autoRfidScan } = _a, opts = __objRest(_a, ["onRfidScan", "autoRfidScan"]);
-    return /* @__PURE__ */ React__default.createElement(BaseLayoutContainer, __spreadValues({}, opts));
+    return /* @__PURE__ */ React.createElement(BaseLayoutContainer, __spreadValues({}, opts));
   }
 }
 __publicField(RfidOnce, "defaultProps", {
@@ -971,7 +1239,7 @@ __publicField(RfidOnce, "defaultProps", {
 });
 const blankFunc$1 = () => {
 };
-class BarcodeScan extends React__default.Component {
+class BarcodeScan extends React.Component {
   constructor(props) {
     super(props);
     this._barcodeBeginScan = false;
@@ -1017,10 +1285,10 @@ class BarcodeScan extends React__default.Component {
   render() {
     const props = this.props;
     const _a = props, { onBarcodeScan = blankFunc$1 } = _a, opts = __objRest(_a, ["onBarcodeScan"]);
-    return /* @__PURE__ */ React__default.createElement(BaseLayoutContainer, __spreadValues({}, opts));
+    return /* @__PURE__ */ React.createElement(BaseLayoutContainer, __spreadValues({}, opts));
   }
 }
-class BaseLayout extends React__default.Component {
+class BaseLayout extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -1028,18 +1296,18 @@ class BaseLayout extends React__default.Component {
     const props = this.props;
     const { onBarcodeScan, onRfidOnce, onRfidBoxOnce, onRfidPalletOnce, onRfidScan, onRfidBoxScan, onRfidPalletScan } = props;
     if (onRfidOnce || onRfidBoxOnce || onRfidPalletOnce) {
-      return /* @__PURE__ */ React__default.createElement(RfidOnce$1, __spreadValues({}, props));
+      return /* @__PURE__ */ React.createElement(RfidOnce$1, __spreadValues({}, props));
     }
     if (onRfidScan || onRfidBoxScan || onRfidPalletScan) {
-      return /* @__PURE__ */ React__default.createElement(RfidOnce, __spreadValues({}, props));
+      return /* @__PURE__ */ React.createElement(RfidOnce, __spreadValues({}, props));
     }
     if (onBarcodeScan) {
-      return /* @__PURE__ */ React__default.createElement(BarcodeScan, __spreadValues({}, props));
+      return /* @__PURE__ */ React.createElement(BarcodeScan, __spreadValues({}, props));
     }
-    return /* @__PURE__ */ React__default.createElement(BaseLayoutContainer, __spreadValues({}, props));
+    return /* @__PURE__ */ React.createElement(BaseLayoutContainer, __spreadValues({}, props));
   }
 }
-var index$7 = "";
+var index$9 = "";
 const blankFunc = () => {
 };
 function WakeKeyborard(props) {
@@ -1061,22 +1329,22 @@ function WakeKeyborard(props) {
       document.removeEventListener("keyup", handleKeyUp);
     };
   }, []);
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: "wakekeyborard"
-  }, inputVisible ? /* @__PURE__ */ React__default.createElement("div", {
+  }, inputVisible ? /* @__PURE__ */ React.createElement("div", {
     className: "wakekeyborard-overlay"
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "wakekeyborard-inputbox"
-  }, /* @__PURE__ */ React__default.createElement("input", {
+  }, /* @__PURE__ */ React.createElement("input", {
     ref: inputRef,
     type: "tel"
-  }), /* @__PURE__ */ React__default.createElement(Button, {
+  }), /* @__PURE__ */ React.createElement(Button, {
     type: "primary",
     onClick: (e) => {
       onClick(inputRef.current.value);
       setInputVisible(!inputVisible);
     }
-  }, "\u67E5\u8BE2"))) : null, !inputVisible ? /* @__PURE__ */ React__default.createElement("div", {
+  }, "\u67E5\u8BE2"))) : null, !inputVisible ? /* @__PURE__ */ React.createElement("div", {
     className: "wakekeyborard-icon",
     onClick: (e) => {
       setInputVisible(!inputVisible);
@@ -1087,44 +1355,44 @@ function WakeKeyborard(props) {
     }
   }) : null);
 }
-var index$6 = "";
-var index$5 = "";
-class PdaInfoCard$1 extends React__default.Component {
+var index$8 = "";
+var index$7 = "";
+class PdaInfoCard$1 extends React.Component {
   constructor(props) {
     super(props);
   }
   render() {
     const { className, title, isActive, infoList = [], style = {}, index: index2, isLast } = this.props;
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       className: classNames({ [className]: true, "pda-step-card": true }),
       style
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "pda-step-indictor"
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: classNames({ "pda-step-indictor-top": true, "pda-step-indictor-top-hidden": index2 === 0 })
-    }), /* @__PURE__ */ React__default.createElement("div", {
+    }), /* @__PURE__ */ React.createElement("div", {
       className: classNames({ "pda-step-indictor-center": true, "pda-step-indictor-center-active": isActive })
-    }), /* @__PURE__ */ React__default.createElement("div", {
+    }), /* @__PURE__ */ React.createElement("div", {
       className: classNames({ "pda-step-indictor-bottom": true, "pda-step-indictor-bottom-hidden": isLast })
-    })), /* @__PURE__ */ React__default.createElement("div", {
+    })), /* @__PURE__ */ React.createElement("div", {
       className: classNames({ "pda-step": true, "pda-step-dark": !isActive })
-    }, /* @__PURE__ */ React__default.createElement("p", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "pda-step-title"
     }, title), infoList.map((item, index22) => {
-      return /* @__PURE__ */ React__default.createElement("p", {
+      return /* @__PURE__ */ React.createElement("div", {
         key: index22,
         className: "pda-step-list"
-      }, /* @__PURE__ */ React__default.createElement("span", null, item.label || ""), "\xA0\xA0", /* @__PURE__ */ React__default.createElement("span", null, item.content || ""));
+      }, /* @__PURE__ */ React.createElement("span", null, item.label || ""), "\xA0\xA0", /* @__PURE__ */ React.createElement("span", null, item.content || ""));
     })));
   }
 }
-class PdaInfoCard extends React__default.Component {
+class PdaInfoCard extends React.Component {
   constructor(props) {
     super(props);
   }
   render() {
     const { className, style = {}, theme = "light", current = 0, children } = this.props;
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       className: classNames({ [className]: true }),
       style
     }, (children || []).map((child, index2) => {
@@ -1142,44 +1410,44 @@ class PdaInfoCard extends React__default.Component {
   }
 }
 __publicField(PdaInfoCard, "Step", PdaInfoCard$1);
-var index$4 = "";
-class PdaFinishCard extends React__default.Component {
+var index$6 = "";
+class PdaFinishCard extends React.Component {
   constructor(props) {
     super(props);
   }
   render() {
     const { className, title, infoList = [], isError = false, buttonMultiLines = false, style = {}, onClick = () => {
     }, okText = "\u8FD4\u56DE\u9996\u9875", cancelText = null } = this.props;
-    const footer = /* @__PURE__ */ React__default.createElement(Button.Group, null, cancelText ? /* @__PURE__ */ React__default.createElement(Button, {
+    const footer = /* @__PURE__ */ React.createElement(Button.Group, null, cancelText ? /* @__PURE__ */ React.createElement(Button, {
       style: buttonMultiLines ? { height: "auto", lineHeight: "50px" } : {},
       type: "dark",
       onClick: () => onClick(false)
-    }, cancelText) : null, /* @__PURE__ */ React__default.createElement(Button, {
+    }, cancelText) : null, /* @__PURE__ */ React.createElement(Button, {
       type: "primary",
       style: buttonMultiLines ? { height: "auto", lineHeight: "normal" } : {},
       onClick: () => onClick(true)
     }, okText));
-    return /* @__PURE__ */ React__default.createElement(BaseLayout, {
+    return /* @__PURE__ */ React.createElement(BaseLayout, {
       footer
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "pda-finish-card-top"
-    }, /* @__PURE__ */ React__default.createElement("img", {
+    }, /* @__PURE__ */ React.createElement("img", {
       className: "pda-finish-card-img",
       src: isError ? PdaFinishCard.ERROR_SUCCESS : PdaFinishCard.SUCCESS
-    }), /* @__PURE__ */ React__default.createElement("p", {
+    }), /* @__PURE__ */ React.createElement("p", {
       className: "pda-finish-card-title"
     }, title), infoList.map((item, index2) => {
-      return /* @__PURE__ */ React__default.createElement("p", {
+      return /* @__PURE__ */ React.createElement("p", {
         key: index2,
         className: "pda-finish-card-list"
-      }, /* @__PURE__ */ React__default.createElement("span", null, item.label || ""), /* @__PURE__ */ React__default.createElement("span", null, item.content || ""));
+      }, /* @__PURE__ */ React.createElement("span", null, item.label || ""), /* @__PURE__ */ React.createElement("span", null, item.content || ""));
     })));
   }
 }
 PdaFinishCard.SUCCESS = "https://img.alicdn.com/imgextra/i2/O1CN01yYwwSx1uNV0M1gHlQ_!!6000000006025-1-tps-630-436.gif";
 PdaFinishCard.ERROR_SUCCESS = "https://img.alicdn.com/imgextra/i3/O1CN01p5Oc5t1VMFWtBomQc_!!6000000002638-1-tps-600-456.gif";
-var index$3 = "";
-class PdaDistanceCard extends React__default.Component {
+var index$5 = "";
+class PdaDistanceCard extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -1187,58 +1455,86 @@ class PdaDistanceCard extends React__default.Component {
     const { className, title, infoText, percentage = 0, style = {} } = this.props;
     const distanceImg = "https://img.alicdn.com/imgextra/i3/O1CN01EFksWL1DBZCu0H1JH_!!6000000000178-2-tps-21-30.png";
     const indictorImg = "https://img.alicdn.com/imgextra/i1/O1CN01YEhCSg1aObe8UZq7K_!!6000000003320-2-tps-379-17.png";
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       className: classNames({ [className]: true, "pda-distance-card": true }),
       style
-    }, /* @__PURE__ */ React__default.createElement("p", {
+    }, /* @__PURE__ */ React.createElement("p", {
       className: "pda-distance-card-highlight"
-    }, /* @__PURE__ */ React__default.createElement("span", {
+    }, /* @__PURE__ */ React.createElement("span", {
       className: "pda-distance-card-highlight1"
-    }, title)), /* @__PURE__ */ React__default.createElement("div", {
+    }, title)), /* @__PURE__ */ React.createElement("div", {
       className: "pda-distance-indictor"
-    }, /* @__PURE__ */ React__default.createElement("img", {
+    }, /* @__PURE__ */ React.createElement("img", {
       src: distanceImg,
       width: 20,
       height: 29
-    }), /* @__PURE__ */ React__default.createElement("p", null, infoText)), /* @__PURE__ */ React__default.createElement("div", {
+    }), /* @__PURE__ */ React.createElement("p", null, infoText)), /* @__PURE__ */ React.createElement("div", {
       className: "pda-distance-card-progress"
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       className: "pda-distance-card-progress-inside",
       style: { width: `${percentage * 100}%` }
-    }), /* @__PURE__ */ React__default.createElement("img", {
+    }), /* @__PURE__ */ React.createElement("img", {
       className: "pda-distance-card-progress-indictor",
       src: indictorImg
-    })), /* @__PURE__ */ React__default.createElement("div", {
+    })), /* @__PURE__ */ React.createElement("div", {
       className: "pda-distance-label"
-    }, /* @__PURE__ */ React__default.createElement("p", null, "\u8FDC"), /* @__PURE__ */ React__default.createElement("p", null, "\u8FD1")));
+    }, /* @__PURE__ */ React.createElement("p", null, "\u8FDC"), /* @__PURE__ */ React.createElement("p", null, "\u8FD1")));
   }
 }
-var index$2 = "";
+var index$4 = "";
 function SubCard(props) {
   const { title, context, name, tag, attrs = [], style } = props;
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: "android-sub-card",
     style
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "android-sub-card-title-section"
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     className: "android-sub-card-title"
-  }, title), tag ? /* @__PURE__ */ React__default.createElement("div", {
+  }, title), tag ? /* @__PURE__ */ React.createElement("div", {
     className: "android-sub-card-tag"
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("div", {
     className: tag.type
-  }, tag.label || "")) : null), /* @__PURE__ */ React__default.createElement("div", {
+  }, tag.label || "")) : null), /* @__PURE__ */ React.createElement("div", {
     className: "android-sub-card-context"
-  }, context), name ? /* @__PURE__ */ React__default.createElement("div", {
+  }, context), name ? /* @__PURE__ */ React.createElement("div", {
     className: "android-sub-card-name"
-  }, name) : null, /* @__PURE__ */ React__default.createElement("div", {
+  }, name) : null, /* @__PURE__ */ React.createElement("div", {
     className: "android-sub-card-attrs"
   }, attrs.map((text) => {
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       key: text
     }, text);
   })));
 }
+var index$3 = "";
+function empty() {
+}
+function index$2(props) {
+  const { dataSource = [], onClickItem = empty } = props;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "pda-app-list"
+  }, dataSource.map((item) => {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "pda-app-group",
+      key: item.groupName
+    }, /* @__PURE__ */ React.createElement("h2", {
+      className: "group-name"
+    }, item.groupName), /* @__PURE__ */ React.createElement("div", {
+      className: "group-apps"
+    }, item.list.map((it) => {
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "app-item",
+        key: it.name,
+        onClick: () => onClickItem(it)
+      }, /* @__PURE__ */ React.createElement("span", {
+        className: "app-name"
+      }, it.name), /* @__PURE__ */ React.createElement("span", {
+        className: "app-subname"
+      }, it.subname));
+    })));
+  }));
+}
 var index$1 = "";
 function usePersistFn(fn) {
   var fnRef = useRef(fn);
@@ -1466,26 +1762,26 @@ function getScrollParent(el, root) {
   return root;
 }
 function Loading(props) {
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     style: {
       color: props.color || "#999"
     }
-  }, /* @__PURE__ */ React__default.createElement("svg", {
+  }, /* @__PURE__ */ React.createElement("svg", {
     height: "1em",
     viewBox: "0 0 100 40",
     style: { verticalAlign: "-0.125em" }
-  }, /* @__PURE__ */ React__default.createElement("g", {
+  }, /* @__PURE__ */ React.createElement("g", {
     stroke: "none",
     strokeWidth: "1",
     fill: "none",
     fillRule: "evenodd"
-  }, /* @__PURE__ */ React__default.createElement("g", {
+  }, /* @__PURE__ */ React.createElement("g", {
     transform: "translate(-100.000000, -71.000000)"
-  }, /* @__PURE__ */ React__default.createElement("g", {
+  }, /* @__PURE__ */ React.createElement("g", {
     transform: "translate(95.000000, 71.000000)"
-  }, /* @__PURE__ */ React__default.createElement("g", {
+  }, /* @__PURE__ */ React.createElement("g", {
     transform: "translate(5.000000, 0.000000)"
-  }, [0, 1, 2].map((i) => /* @__PURE__ */ React__default.createElement("rect", {
+  }, [0, 1, 2].map((i) => /* @__PURE__ */ React.createElement("rect", {
     key: i,
     fill: "currentColor",
     x: 20 + i * 26,
@@ -1493,7 +1789,7 @@ function Loading(props) {
     width: "8",
     height: "8",
     rx: "2"
-  }, /* @__PURE__ */ React__default.createElement("animate", {
+  }, /* @__PURE__ */ React.createElement("animate", {
     attributeName: "y",
     from: "16",
     to: "16",
@@ -1547,3127 +1843,25 @@ function InfiniteScroll(props) {
       parent.removeEventListener("scroll", onScroll);
     };
   }, []);
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: classNames({ [className]: true, "pda-infinite-scroll": true }),
     style,
     ref: elementRef
-  }, hasMore ? /* @__PURE__ */ React__default.createElement("div", {
+  }, hasMore ? /* @__PURE__ */ React.createElement("div", {
     className: "pda-infinite-scroll-view"
-  }, /* @__PURE__ */ React__default.createElement("span", null, "\u52A0\u8F7D\u4E2D"), /* @__PURE__ */ React__default.createElement(Loading, null)) : /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("span", null, "\u52A0\u8F7D\u4E2D"), /* @__PURE__ */ React.createElement(Loading, null)) : /* @__PURE__ */ React.createElement("div", {
     className: "pda-infinite-scroll-view"
-  }, /* @__PURE__ */ React__default.createElement("span", null, "\u6CA1\u6709\u66F4\u591A\u4E86~")));
+  }, /* @__PURE__ */ React.createElement("span", null, "\u6CA1\u6709\u66F4\u591A\u4E86~")));
 }
 var index = "";
-let updateQueue = makeQueue();
-const raf = (fn) => schedule(fn, updateQueue);
-let writeQueue = makeQueue();
-raf.write = (fn) => schedule(fn, writeQueue);
-let onStartQueue = makeQueue();
-raf.onStart = (fn) => schedule(fn, onStartQueue);
-let onFrameQueue = makeQueue();
-raf.onFrame = (fn) => schedule(fn, onFrameQueue);
-let onFinishQueue = makeQueue();
-raf.onFinish = (fn) => schedule(fn, onFinishQueue);
-let timeouts = [];
-raf.setTimeout = (handler, ms) => {
-  let time = raf.now() + ms;
-  let cancel = () => {
-    let i = timeouts.findIndex((t) => t.cancel == cancel);
-    if (~i)
-      timeouts.splice(i, 1);
-    __raf.count -= ~i ? 1 : 0;
-  };
-  let timeout = {
-    time,
-    handler,
-    cancel
-  };
-  timeouts.splice(findTimeout(time), 0, timeout);
-  __raf.count += 1;
-  start();
-  return timeout;
-};
-let findTimeout = (time) => ~(~timeouts.findIndex((t) => t.time > time) || ~timeouts.length);
-raf.cancel = (fn) => {
-  updateQueue.delete(fn);
-  writeQueue.delete(fn);
-};
-raf.sync = (fn) => {
-  sync = true;
-  raf.batchedUpdates(fn);
-  sync = false;
-};
-raf.throttle = (fn) => {
-  let lastArgs;
-  function queuedFn() {
-    try {
-      fn(...lastArgs);
-    } finally {
-      lastArgs = null;
-    }
-  }
-  function throttled(...args) {
-    lastArgs = args;
-    raf.onStart(queuedFn);
-  }
-  throttled.handler = fn;
-  throttled.cancel = () => {
-    onStartQueue.delete(queuedFn);
-    lastArgs = null;
-  };
-  return throttled;
-};
-let nativeRaf = typeof window != "undefined" ? window.requestAnimationFrame : () => {
-};
-raf.use = (impl) => nativeRaf = impl;
-raf.now = typeof performance != "undefined" ? () => performance.now() : Date.now;
-raf.batchedUpdates = (fn) => fn();
-raf.catch = console.error;
-raf.frameLoop = "always";
-raf.advance = () => {
-  if (raf.frameLoop !== "demand") {
-    console.warn("Cannot call the manual advancement of rafz whilst frameLoop is not set as demand");
-  } else {
-    update();
-  }
-};
-let ts = -1;
-let sync = false;
-function schedule(fn, queue) {
-  if (sync) {
-    queue.delete(fn);
-    fn(0);
-  } else {
-    queue.add(fn);
-    start();
-  }
-}
-function start() {
-  if (ts < 0) {
-    ts = 0;
-    if (raf.frameLoop !== "demand") {
-      nativeRaf(loop);
-    }
-  }
-}
-function loop() {
-  if (~ts) {
-    nativeRaf(loop);
-    raf.batchedUpdates(update);
-  }
-}
-function update() {
-  let prevTs = ts;
-  ts = raf.now();
-  let count = findTimeout(ts);
-  if (count) {
-    eachSafely(timeouts.splice(0, count), (t) => t.handler());
-    __raf.count -= count;
-  }
-  onStartQueue.flush();
-  updateQueue.flush(prevTs ? Math.min(64, ts - prevTs) : 16.667);
-  onFrameQueue.flush();
-  writeQueue.flush();
-  onFinishQueue.flush();
-}
-function makeQueue() {
-  let next = new Set();
-  let current = next;
-  return {
-    add(fn) {
-      __raf.count += current == next && !next.has(fn) ? 1 : 0;
-      next.add(fn);
-    },
-    delete(fn) {
-      __raf.count -= current == next && next.has(fn) ? 1 : 0;
-      return next.delete(fn);
-    },
-    flush(arg) {
-      if (current.size) {
-        next = new Set();
-        __raf.count -= current.size;
-        eachSafely(current, (fn) => fn(arg) && next.add(fn));
-        __raf.count += next.size;
-        current = next;
-      }
-    }
-  };
-}
-function eachSafely(values, each2) {
-  values.forEach((value) => {
-    try {
-      each2(value);
-    } catch (e) {
-      raf.catch(e);
-    }
-  });
-}
-const __raf = {
-  count: 0,
-  clear() {
-    ts = -1;
-    timeouts = [];
-    onStartQueue = makeQueue();
-    updateQueue = makeQueue();
-    onFrameQueue = makeQueue();
-    writeQueue = makeQueue();
-    onFinishQueue = makeQueue();
-    __raf.count = 0;
-  }
-};
-function noop() {
-}
-const defineHidden = (obj, key, value) => Object.defineProperty(obj, key, {
-  value,
-  writable: true,
-  configurable: true
-});
-const is = {
-  arr: Array.isArray,
-  obj: (a) => !!a && a.constructor.name === "Object",
-  fun: (a) => typeof a === "function",
-  str: (a) => typeof a === "string",
-  num: (a) => typeof a === "number",
-  und: (a) => a === void 0
-};
-function isEqual(a, b) {
-  if (is.arr(a)) {
-    if (!is.arr(b) || a.length !== b.length)
-      return false;
-    for (let i = 0; i < a.length; i++) {
-      if (a[i] !== b[i])
-        return false;
-    }
-    return true;
-  }
-  return a === b;
-}
-const each = (obj, fn) => obj.forEach(fn);
-function eachProp(obj, fn, ctx2) {
-  if (is.arr(obj)) {
-    for (let i = 0; i < obj.length; i++) {
-      fn.call(ctx2, obj[i], `${i}`);
-    }
-    return;
-  }
-  for (const key in obj) {
-    if (obj.hasOwnProperty(key)) {
-      fn.call(ctx2, obj[key], key);
-    }
-  }
-}
-const toArray = (a) => is.und(a) ? [] : is.arr(a) ? a : [a];
-function flush(queue, iterator) {
-  if (queue.size) {
-    const items = Array.from(queue);
-    queue.clear();
-    each(items, iterator);
-  }
-}
-const flushCalls = (queue, ...args) => flush(queue, (fn) => fn(...args));
-let createStringInterpolator$1;
-let to;
-let colors$1 = null;
-let skipAnimation = false;
-let willAdvance = noop;
-const assign = (globals2) => {
-  if (globals2.to)
-    to = globals2.to;
-  if (globals2.now)
-    raf.now = globals2.now;
-  if (globals2.colors !== void 0)
-    colors$1 = globals2.colors;
-  if (globals2.skipAnimation != null)
-    skipAnimation = globals2.skipAnimation;
-  if (globals2.createStringInterpolator)
-    createStringInterpolator$1 = globals2.createStringInterpolator;
-  if (globals2.requestAnimationFrame)
-    raf.use(globals2.requestAnimationFrame);
-  if (globals2.batchedUpdates)
-    raf.batchedUpdates = globals2.batchedUpdates;
-  if (globals2.willAdvance)
-    willAdvance = globals2.willAdvance;
-  if (globals2.frameLoop)
-    raf.frameLoop = globals2.frameLoop;
-};
-var globals = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  get createStringInterpolator() {
-    return createStringInterpolator$1;
-  },
-  get to() {
-    return to;
-  },
-  get colors() {
-    return colors$1;
-  },
-  get skipAnimation() {
-    return skipAnimation;
-  },
-  get willAdvance() {
-    return willAdvance;
-  },
-  assign
-});
-const startQueue = new Set();
-let currentFrame = [];
-let prevFrame = [];
-let priority = 0;
-const frameLoop = {
-  get idle() {
-    return !startQueue.size && !currentFrame.length;
-  },
-  start(animation) {
-    if (priority > animation.priority) {
-      startQueue.add(animation);
-      raf.onStart(flushStartQueue);
-    } else {
-      startSafely(animation);
-      raf(advance);
-    }
-  },
-  advance,
-  sort(animation) {
-    if (priority) {
-      raf.onFrame(() => frameLoop.sort(animation));
-    } else {
-      const prevIndex = currentFrame.indexOf(animation);
-      if (~prevIndex) {
-        currentFrame.splice(prevIndex, 1);
-        startUnsafely(animation);
-      }
-    }
-  },
-  clear() {
-    currentFrame = [];
-    startQueue.clear();
-  }
-};
-function flushStartQueue() {
-  startQueue.forEach(startSafely);
-  startQueue.clear();
-  raf(advance);
-}
-function startSafely(animation) {
-  if (!currentFrame.includes(animation))
-    startUnsafely(animation);
-}
-function startUnsafely(animation) {
-  currentFrame.splice(findIndex(currentFrame, (other) => other.priority > animation.priority), 0, animation);
-}
-function advance(dt) {
-  const nextFrame = prevFrame;
-  for (let i = 0; i < currentFrame.length; i++) {
-    const animation = currentFrame[i];
-    priority = animation.priority;
-    if (!animation.idle) {
-      willAdvance(animation);
-      animation.advance(dt);
-      if (!animation.idle) {
-        nextFrame.push(animation);
-      }
-    }
-  }
-  priority = 0;
-  prevFrame = currentFrame;
-  prevFrame.length = 0;
-  currentFrame = nextFrame;
-  return currentFrame.length > 0;
-}
-function findIndex(arr, test) {
-  const index2 = arr.findIndex(test);
-  return index2 < 0 ? arr.length : index2;
-}
-const colors = {
-  transparent: 0,
-  aliceblue: 4042850303,
-  antiquewhite: 4209760255,
-  aqua: 16777215,
-  aquamarine: 2147472639,
-  azure: 4043309055,
-  beige: 4126530815,
-  bisque: 4293182719,
-  black: 255,
-  blanchedalmond: 4293643775,
-  blue: 65535,
-  blueviolet: 2318131967,
-  brown: 2771004159,
-  burlywood: 3736635391,
-  burntsienna: 3934150143,
-  cadetblue: 1604231423,
-  chartreuse: 2147418367,
-  chocolate: 3530104575,
-  coral: 4286533887,
-  cornflowerblue: 1687547391,
-  cornsilk: 4294499583,
-  crimson: 3692313855,
-  cyan: 16777215,
-  darkblue: 35839,
-  darkcyan: 9145343,
-  darkgoldenrod: 3095792639,
-  darkgray: 2846468607,
-  darkgreen: 6553855,
-  darkgrey: 2846468607,
-  darkkhaki: 3182914559,
-  darkmagenta: 2332068863,
-  darkolivegreen: 1433087999,
-  darkorange: 4287365375,
-  darkorchid: 2570243327,
-  darkred: 2332033279,
-  darksalmon: 3918953215,
-  darkseagreen: 2411499519,
-  darkslateblue: 1211993087,
-  darkslategray: 793726975,
-  darkslategrey: 793726975,
-  darkturquoise: 13554175,
-  darkviolet: 2483082239,
-  deeppink: 4279538687,
-  deepskyblue: 12582911,
-  dimgray: 1768516095,
-  dimgrey: 1768516095,
-  dodgerblue: 512819199,
-  firebrick: 2988581631,
-  floralwhite: 4294635775,
-  forestgreen: 579543807,
-  fuchsia: 4278255615,
-  gainsboro: 3705462015,
-  ghostwhite: 4177068031,
-  gold: 4292280575,
-  goldenrod: 3668254975,
-  gray: 2155905279,
-  green: 8388863,
-  greenyellow: 2919182335,
-  grey: 2155905279,
-  honeydew: 4043305215,
-  hotpink: 4285117695,
-  indianred: 3445382399,
-  indigo: 1258324735,
-  ivory: 4294963455,
-  khaki: 4041641215,
-  lavender: 3873897215,
-  lavenderblush: 4293981695,
-  lawngreen: 2096890111,
-  lemonchiffon: 4294626815,
-  lightblue: 2916673279,
-  lightcoral: 4034953471,
-  lightcyan: 3774873599,
-  lightgoldenrodyellow: 4210742015,
-  lightgray: 3553874943,
-  lightgreen: 2431553791,
-  lightgrey: 3553874943,
-  lightpink: 4290167295,
-  lightsalmon: 4288707327,
-  lightseagreen: 548580095,
-  lightskyblue: 2278488831,
-  lightslategray: 2005441023,
-  lightslategrey: 2005441023,
-  lightsteelblue: 2965692159,
-  lightyellow: 4294959359,
-  lime: 16711935,
-  limegreen: 852308735,
-  linen: 4210091775,
-  magenta: 4278255615,
-  maroon: 2147483903,
-  mediumaquamarine: 1724754687,
-  mediumblue: 52735,
-  mediumorchid: 3126187007,
-  mediumpurple: 2473647103,
-  mediumseagreen: 1018393087,
-  mediumslateblue: 2070474495,
-  mediumspringgreen: 16423679,
-  mediumturquoise: 1221709055,
-  mediumvioletred: 3340076543,
-  midnightblue: 421097727,
-  mintcream: 4127193855,
-  mistyrose: 4293190143,
-  moccasin: 4293178879,
-  navajowhite: 4292783615,
-  navy: 33023,
-  oldlace: 4260751103,
-  olive: 2155872511,
-  olivedrab: 1804477439,
-  orange: 4289003775,
-  orangered: 4282712319,
-  orchid: 3664828159,
-  palegoldenrod: 4008225535,
-  palegreen: 2566625535,
-  paleturquoise: 2951671551,
-  palevioletred: 3681588223,
-  papayawhip: 4293907967,
-  peachpuff: 4292524543,
-  peru: 3448061951,
-  pink: 4290825215,
-  plum: 3718307327,
-  powderblue: 2967529215,
-  purple: 2147516671,
-  rebeccapurple: 1714657791,
-  red: 4278190335,
-  rosybrown: 3163525119,
-  royalblue: 1097458175,
-  saddlebrown: 2336560127,
-  salmon: 4202722047,
-  sandybrown: 4104413439,
-  seagreen: 780883967,
-  seashell: 4294307583,
-  sienna: 2689740287,
-  silver: 3233857791,
-  skyblue: 2278484991,
-  slateblue: 1784335871,
-  slategray: 1887473919,
-  slategrey: 1887473919,
-  snow: 4294638335,
-  springgreen: 16744447,
-  steelblue: 1182971135,
-  tan: 3535047935,
-  teal: 8421631,
-  thistle: 3636451583,
-  tomato: 4284696575,
-  turquoise: 1088475391,
-  violet: 4001558271,
-  wheat: 4125012991,
-  white: 4294967295,
-  whitesmoke: 4126537215,
-  yellow: 4294902015,
-  yellowgreen: 2597139199
-};
-const NUMBER = "[-+]?\\d*\\.?\\d+";
-const PERCENTAGE = NUMBER + "%";
-function call(...parts) {
-  return "\\(\\s*(" + parts.join(")\\s*,\\s*(") + ")\\s*\\)";
-}
-const rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
-const rgba = new RegExp("rgba" + call(NUMBER, NUMBER, NUMBER, NUMBER));
-const hsl = new RegExp("hsl" + call(NUMBER, PERCENTAGE, PERCENTAGE));
-const hsla = new RegExp("hsla" + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
-const hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
-const hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
-const hex6 = /^#([0-9a-fA-F]{6})$/;
-const hex8 = /^#([0-9a-fA-F]{8})$/;
-function normalizeColor(color) {
-  let match;
-  if (typeof color === "number") {
-    return color >>> 0 === color && color >= 0 && color <= 4294967295 ? color : null;
-  }
-  if (match = hex6.exec(color))
-    return parseInt(match[1] + "ff", 16) >>> 0;
-  if (colors$1 && colors$1[color] !== void 0) {
-    return colors$1[color];
-  }
-  if (match = rgb.exec(color)) {
-    return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | 255) >>> 0;
-  }
-  if (match = rgba.exec(color)) {
-    return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | parse1(match[4])) >>> 0;
-  }
-  if (match = hex3.exec(color)) {
-    return parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + "ff", 16) >>> 0;
-  }
-  if (match = hex8.exec(color))
-    return parseInt(match[1], 16) >>> 0;
-  if (match = hex4.exec(color)) {
-    return parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + match[4] + match[4], 16) >>> 0;
-  }
-  if (match = hsl.exec(color)) {
-    return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | 255) >>> 0;
-  }
-  if (match = hsla.exec(color)) {
-    return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
-  }
-  return null;
-}
-function hue2rgb(p, q, t) {
-  if (t < 0)
-    t += 1;
-  if (t > 1)
-    t -= 1;
-  if (t < 1 / 6)
-    return p + (q - p) * 6 * t;
-  if (t < 1 / 2)
-    return q;
-  if (t < 2 / 3)
-    return p + (q - p) * (2 / 3 - t) * 6;
-  return p;
-}
-function hslToRgb(h, s, l) {
-  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-  const p = 2 * l - q;
-  const r2 = hue2rgb(p, q, h + 1 / 3);
-  const g = hue2rgb(p, q, h);
-  const b = hue2rgb(p, q, h - 1 / 3);
-  return Math.round(r2 * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
-}
-function parse255(str) {
-  const int = parseInt(str, 10);
-  if (int < 0)
-    return 0;
-  if (int > 255)
-    return 255;
-  return int;
-}
-function parse360(str) {
-  const int = parseFloat(str);
-  return (int % 360 + 360) % 360 / 360;
-}
-function parse1(str) {
-  const num = parseFloat(str);
-  if (num < 0)
-    return 0;
-  if (num > 1)
-    return 255;
-  return Math.round(num * 255);
-}
-function parsePercentage(str) {
-  const int = parseFloat(str);
-  if (int < 0)
-    return 0;
-  if (int > 100)
-    return 1;
-  return int / 100;
-}
-function colorToRgba(input) {
-  let int32Color = normalizeColor(input);
-  if (int32Color === null)
-    return input;
-  int32Color = int32Color || 0;
-  let r2 = (int32Color & 4278190080) >>> 24;
-  let g = (int32Color & 16711680) >>> 16;
-  let b = (int32Color & 65280) >>> 8;
-  let a = (int32Color & 255) / 255;
-  return `rgba(${r2}, ${g}, ${b}, ${a})`;
-}
-const createInterpolator = (range, output, extrapolate) => {
-  if (is.fun(range)) {
-    return range;
-  }
-  if (is.arr(range)) {
-    return createInterpolator({
-      range,
-      output,
-      extrapolate
-    });
-  }
-  if (is.str(range.output[0])) {
-    return createStringInterpolator$1(range);
-  }
-  const config2 = range;
-  const outputRange = config2.output;
-  const inputRange = config2.range || [0, 1];
-  const extrapolateLeft = config2.extrapolateLeft || config2.extrapolate || "extend";
-  const extrapolateRight = config2.extrapolateRight || config2.extrapolate || "extend";
-  const easing = config2.easing || ((t) => t);
-  return (input) => {
-    const range2 = findRange(input, inputRange);
-    return interpolate(input, inputRange[range2], inputRange[range2 + 1], outputRange[range2], outputRange[range2 + 1], easing, extrapolateLeft, extrapolateRight, config2.map);
-  };
-};
-function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight, map) {
-  let result = map ? map(input) : input;
-  if (result < inputMin) {
-    if (extrapolateLeft === "identity")
-      return result;
-    else if (extrapolateLeft === "clamp")
-      result = inputMin;
-  }
-  if (result > inputMax) {
-    if (extrapolateRight === "identity")
-      return result;
-    else if (extrapolateRight === "clamp")
-      result = inputMax;
-  }
-  if (outputMin === outputMax)
-    return outputMin;
-  if (inputMin === inputMax)
-    return input <= inputMin ? outputMin : outputMax;
-  if (inputMin === -Infinity)
-    result = -result;
-  else if (inputMax === Infinity)
-    result = result - inputMin;
-  else
-    result = (result - inputMin) / (inputMax - inputMin);
-  result = easing(result);
-  if (outputMin === -Infinity)
-    result = -result;
-  else if (outputMax === Infinity)
-    result = result + outputMin;
-  else
-    result = result * (outputMax - outputMin) + outputMin;
-  return result;
-}
-function findRange(input, inputRange) {
-  for (var i = 1; i < inputRange.length - 1; ++i)
-    if (inputRange[i] >= input)
-      break;
-  return i - 1;
-}
-function _extends$2() {
-  _extends$2 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$2.apply(this, arguments);
-}
-const $get = Symbol.for("FluidValue.get");
-const $observers = Symbol.for("FluidValue.observers");
-const hasFluidValue = (arg) => Boolean(arg && arg[$get]);
-const getFluidValue = (arg) => arg && arg[$get] ? arg[$get]() : arg;
-const getFluidObservers = (target) => target[$observers] || null;
-function callFluidObserver(observer, event) {
-  if (observer.eventObserved) {
-    observer.eventObserved(event);
-  } else {
-    observer(event);
-  }
-}
-function callFluidObservers(target, event) {
-  let observers = target[$observers];
-  if (observers) {
-    observers.forEach((observer) => {
-      callFluidObserver(observer, event);
-    });
-  }
-}
-class FluidValue {
-  constructor(get) {
-    this[$get] = void 0;
-    this[$observers] = void 0;
-    if (!get && !(get = this.get)) {
-      throw Error("Unknown getter");
-    }
-    setFluidGetter(this, get);
-  }
-}
-const setFluidGetter = (target, get) => setHidden(target, $get, get);
-function addFluidObserver(target, observer) {
-  if (target[$get]) {
-    let observers = target[$observers];
-    if (!observers) {
-      setHidden(target, $observers, observers = new Set());
-    }
-    if (!observers.has(observer)) {
-      observers.add(observer);
-      if (target.observerAdded) {
-        target.observerAdded(observers.size, observer);
-      }
-    }
-  }
-  return observer;
-}
-function removeFluidObserver(target, observer) {
-  let observers = target[$observers];
-  if (observers && observers.has(observer)) {
-    const count = observers.size - 1;
-    if (count) {
-      observers.delete(observer);
-    } else {
-      target[$observers] = null;
-    }
-    if (target.observerRemoved) {
-      target.observerRemoved(count, observer);
-    }
-  }
-}
-const setHidden = (target, key, value) => Object.defineProperty(target, key, {
-  value,
-  writable: true,
-  configurable: true
-});
-const numberRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
-const colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
-const unitRegex = new RegExp(`(${numberRegex.source})(%|[a-z]+)`, "i");
-let namedColorRegex;
-const rgbaRegex = /rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi;
-const rgbaRound = (_, p1, p2, p3, p4) => `rgba(${Math.round(p1)}, ${Math.round(p2)}, ${Math.round(p3)}, ${p4})`;
-const createStringInterpolator = (config2) => {
-  if (!namedColorRegex)
-    namedColorRegex = colors$1 ? new RegExp(`(${Object.keys(colors$1).join("|")})(?!\\w)`, "g") : /^\b$/;
-  const output = config2.output.map((value) => getFluidValue(value).replace(colorRegex, colorToRgba).replace(namedColorRegex, colorToRgba));
-  const keyframes = output.map((value) => value.match(numberRegex).map(Number));
-  const outputRanges = keyframes[0].map((_, i) => keyframes.map((values) => {
-    if (!(i in values)) {
-      throw Error('The arity of each "output" value must be equal');
-    }
-    return values[i];
-  }));
-  const interpolators = outputRanges.map((output2) => createInterpolator(_extends$2({}, config2, {
-    output: output2
-  })));
-  return (input) => {
-    var _output$find;
-    const missingUnit = !unitRegex.test(output[0]) && ((_output$find = output.find((value) => unitRegex.test(value))) == null ? void 0 : _output$find.replace(numberRegex, ""));
-    let i = 0;
-    return output[0].replace(numberRegex, () => `${interpolators[i++](input)}${missingUnit || ""}`).replace(rgbaRegex, rgbaRound);
-  };
-};
-const prefix = "react-spring: ";
-const once = (fn) => {
-  const func = fn;
-  let called = false;
-  if (typeof func != "function") {
-    throw new TypeError(`${prefix}once requires a function parameter`);
-  }
-  return (...args) => {
-    if (!called) {
-      func(...args);
-      called = true;
-    }
-  };
-};
-const warnInterpolate = once(console.warn);
-function deprecateInterpolate() {
-  warnInterpolate(`${prefix}The "interpolate" function is deprecated in v9 (use "to" instead)`);
-}
-const warnDirectCall = once(console.warn);
-function deprecateDirectCall() {
-  warnDirectCall(`${prefix}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead), this will be removed in later 0.X.0 versions`);
-}
-function isAnimatedString(value) {
-  return is.str(value) && (value[0] == "#" || /\d/.test(value) || value in (colors$1 || {}));
-}
-const useOnce = (effect) => useEffect(effect, emptyDeps);
-const emptyDeps = [];
-function useForceUpdate() {
-  const update2 = useState()[1];
-  const mounted = useState(makeMountedRef)[0];
-  useOnce(mounted.unmount);
-  return () => {
-    if (mounted.current) {
-      update2({});
-    }
-  };
-}
-function makeMountedRef() {
-  const mounted = {
-    current: true,
-    unmount: () => () => {
-      mounted.current = false;
-    }
-  };
-  return mounted;
-}
-function useMemoOne(getResult, inputs) {
-  const [initial] = useState(() => ({
-    inputs,
-    result: getResult()
-  }));
-  const committed = useRef();
-  const prevCache = committed.current;
-  let cache = prevCache;
-  if (cache) {
-    const useCache = Boolean(inputs && cache.inputs && areInputsEqual(inputs, cache.inputs));
-    if (!useCache) {
-      cache = {
-        inputs,
-        result: getResult()
-      };
-    }
-  } else {
-    cache = initial;
-  }
-  useEffect(() => {
-    committed.current = cache;
-    if (prevCache == initial) {
-      initial.inputs = initial.result = void 0;
-    }
-  }, [cache]);
-  return cache.result;
-}
-function areInputsEqual(next, prev) {
-  if (next.length !== prev.length) {
-    return false;
-  }
-  for (let i = 0; i < next.length; i++) {
-    if (next[i] !== prev[i]) {
-      return false;
-    }
-  }
-  return true;
-}
-function usePrev(value) {
-  const prevRef = useRef();
-  useEffect(() => {
-    prevRef.current = value;
-  });
-  return prevRef.current;
-}
-const useLayoutEffect = typeof window !== "undefined" && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
-const $node = Symbol.for("Animated:node");
-const isAnimated = (value) => !!value && value[$node] === value;
-const getAnimated = (owner) => owner && owner[$node];
-const setAnimated = (owner, node) => defineHidden(owner, $node, node);
-const getPayload = (owner) => owner && owner[$node] && owner[$node].getPayload();
-class Animated {
-  constructor() {
-    this.payload = void 0;
-    setAnimated(this, this);
-  }
-  getPayload() {
-    return this.payload || [];
-  }
-}
-class AnimatedValue extends Animated {
-  constructor(_value) {
-    super();
-    this.done = true;
-    this.elapsedTime = void 0;
-    this.lastPosition = void 0;
-    this.lastVelocity = void 0;
-    this.v0 = void 0;
-    this.durationProgress = 0;
-    this._value = _value;
-    if (is.num(this._value)) {
-      this.lastPosition = this._value;
-    }
-  }
-  static create(value) {
-    return new AnimatedValue(value);
-  }
-  getPayload() {
-    return [this];
-  }
-  getValue() {
-    return this._value;
-  }
-  setValue(value, step) {
-    if (is.num(value)) {
-      this.lastPosition = value;
-      if (step) {
-        value = Math.round(value / step) * step;
-        if (this.done) {
-          this.lastPosition = value;
-        }
-      }
-    }
-    if (this._value === value) {
-      return false;
-    }
-    this._value = value;
-    return true;
-  }
-  reset() {
-    const {
-      done
-    } = this;
-    this.done = false;
-    if (is.num(this._value)) {
-      this.elapsedTime = 0;
-      this.durationProgress = 0;
-      this.lastPosition = this._value;
-      if (done)
-        this.lastVelocity = null;
-      this.v0 = null;
-    }
-  }
-}
-class AnimatedString extends AnimatedValue {
-  constructor(value) {
-    super(0);
-    this._string = null;
-    this._toString = void 0;
-    this._toString = createInterpolator({
-      output: [value, value]
-    });
-  }
-  static create(value) {
-    return new AnimatedString(value);
-  }
-  getValue() {
-    let value = this._string;
-    return value == null ? this._string = this._toString(this._value) : value;
-  }
-  setValue(value) {
-    if (is.str(value)) {
-      if (value == this._string) {
-        return false;
-      }
-      this._string = value;
-      this._value = 1;
-    } else if (super.setValue(value)) {
-      this._string = null;
-    } else {
-      return false;
-    }
-    return true;
-  }
-  reset(goal) {
-    if (goal) {
-      this._toString = createInterpolator({
-        output: [this.getValue(), goal]
-      });
-    }
-    this._value = 0;
-    super.reset();
-  }
-}
-const TreeContext = {
-  dependencies: null
-};
-class AnimatedObject extends Animated {
-  constructor(source) {
-    super();
-    this.source = source;
-    this.setValue(source);
-  }
-  getValue(animated2) {
-    const values = {};
-    eachProp(this.source, (source, key) => {
-      if (isAnimated(source)) {
-        values[key] = source.getValue(animated2);
-      } else if (hasFluidValue(source)) {
-        values[key] = getFluidValue(source);
-      } else if (!animated2) {
-        values[key] = source;
-      }
-    });
-    return values;
-  }
-  setValue(source) {
-    this.source = source;
-    this.payload = this._makePayload(source);
-  }
-  reset() {
-    if (this.payload) {
-      each(this.payload, (node) => node.reset());
-    }
-  }
-  _makePayload(source) {
-    if (source) {
-      const payload = new Set();
-      eachProp(source, this._addToPayload, payload);
-      return Array.from(payload);
-    }
-  }
-  _addToPayload(source) {
-    if (TreeContext.dependencies && hasFluidValue(source)) {
-      TreeContext.dependencies.add(source);
-    }
-    const payload = getPayload(source);
-    if (payload) {
-      each(payload, (node) => this.add(node));
-    }
-  }
-}
-class AnimatedArray extends AnimatedObject {
-  constructor(source) {
-    super(source);
-  }
-  static create(source) {
-    return new AnimatedArray(source);
-  }
-  getValue() {
-    return this.source.map((node) => node.getValue());
-  }
-  setValue(source) {
-    const payload = this.getPayload();
-    if (source.length == payload.length) {
-      return payload.map((node, i) => node.setValue(source[i])).some(Boolean);
-    }
-    super.setValue(source.map(makeAnimated));
-    return true;
-  }
-}
-function makeAnimated(value) {
-  const nodeType = isAnimatedString(value) ? AnimatedString : AnimatedValue;
-  return nodeType.create(value);
-}
-function getAnimatedType(value) {
-  const parentNode = getAnimated(value);
-  return parentNode ? parentNode.constructor : is.arr(value) ? AnimatedArray : isAnimatedString(value) ? AnimatedString : AnimatedValue;
-}
-function _extends$1() {
-  _extends$1 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$1.apply(this, arguments);
-}
-const withAnimated = (Component, host2) => {
-  const hasInstance = !is.fun(Component) || Component.prototype && Component.prototype.isReactComponent;
-  return forwardRef((givenProps, givenRef) => {
-    const instanceRef = useRef(null);
-    const ref = hasInstance && useCallback((value) => {
-      instanceRef.current = updateRef(givenRef, value);
-    }, [givenRef]);
-    const [props, deps] = getAnimatedState(givenProps, host2);
-    const forceUpdate = useForceUpdate();
-    const callback = () => {
-      const instance = instanceRef.current;
-      if (hasInstance && !instance) {
-        return;
-      }
-      const didUpdate = instance ? host2.applyAnimatedValues(instance, props.getValue(true)) : false;
-      if (didUpdate === false) {
-        forceUpdate();
-      }
-    };
-    const observer = new PropsObserver(callback, deps);
-    const observerRef = useRef();
-    useLayoutEffect(() => {
-      const lastObserver = observerRef.current;
-      observerRef.current = observer;
-      each(deps, (dep) => addFluidObserver(dep, observer));
-      if (lastObserver) {
-        each(lastObserver.deps, (dep) => removeFluidObserver(dep, lastObserver));
-        raf.cancel(lastObserver.update);
-      }
-    });
-    useEffect(callback, []);
-    useOnce(() => () => {
-      const observer2 = observerRef.current;
-      each(observer2.deps, (dep) => removeFluidObserver(dep, observer2));
-    });
-    const usedProps = host2.getComponentProps(props.getValue());
-    return React.createElement(Component, _extends$1({}, usedProps, {
-      ref
-    }));
-  });
-};
-class PropsObserver {
-  constructor(update2, deps) {
-    this.update = update2;
-    this.deps = deps;
-  }
-  eventObserved(event) {
-    if (event.type == "change") {
-      raf.write(this.update);
-    }
-  }
-}
-function getAnimatedState(props, host2) {
-  const dependencies = new Set();
-  TreeContext.dependencies = dependencies;
-  if (props.style)
-    props = _extends$1({}, props, {
-      style: host2.createAnimatedStyle(props.style)
-    });
-  props = new AnimatedObject(props);
-  TreeContext.dependencies = null;
-  return [props, dependencies];
-}
-function updateRef(ref, value) {
-  if (ref) {
-    if (is.fun(ref))
-      ref(value);
-    else
-      ref.current = value;
-  }
-  return value;
-}
-const cacheKey = Symbol.for("AnimatedComponent");
-const createHost = (components, {
-  applyAnimatedValues: _applyAnimatedValues = () => false,
-  createAnimatedStyle: _createAnimatedStyle = (style) => new AnimatedObject(style),
-  getComponentProps: _getComponentProps = (props) => props
-} = {}) => {
-  const hostConfig = {
-    applyAnimatedValues: _applyAnimatedValues,
-    createAnimatedStyle: _createAnimatedStyle,
-    getComponentProps: _getComponentProps
-  };
-  const animated2 = (Component) => {
-    const displayName = getDisplayName(Component) || "Anonymous";
-    if (is.str(Component)) {
-      Component = animated2[Component] || (animated2[Component] = withAnimated(Component, hostConfig));
-    } else {
-      Component = Component[cacheKey] || (Component[cacheKey] = withAnimated(Component, hostConfig));
-    }
-    Component.displayName = `Animated(${displayName})`;
-    return Component;
-  };
-  eachProp(components, (Component, key) => {
-    if (is.arr(components)) {
-      key = getDisplayName(Component);
-    }
-    animated2[key] = animated2(Component);
-  });
-  return {
-    animated: animated2
-  };
-};
-const getDisplayName = (arg) => is.str(arg) ? arg : arg && is.str(arg.displayName) ? arg.displayName : is.fun(arg) && arg.name || null;
-function _extends() {
-  _extends = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function callProp(value, ...args) {
-  return is.fun(value) ? value(...args) : value;
-}
-const matchProp = (value, key) => value === true || !!(key && value && (is.fun(value) ? value(key) : toArray(value).includes(key)));
-const resolveProp = (prop, key) => is.obj(prop) ? key && prop[key] : prop;
-const getDefaultProp = (props, key) => props.default === true ? props[key] : props.default ? props.default[key] : void 0;
-const noopTransform = (value) => value;
-const getDefaultProps = (props, transform = noopTransform) => {
-  let keys = DEFAULT_PROPS;
-  if (props.default && props.default !== true) {
-    props = props.default;
-    keys = Object.keys(props);
-  }
-  const defaults2 = {};
-  for (const key of keys) {
-    const value = transform(props[key], key);
-    if (!is.und(value)) {
-      defaults2[key] = value;
-    }
-  }
-  return defaults2;
-};
-const DEFAULT_PROPS = ["config", "onProps", "onStart", "onChange", "onPause", "onResume", "onRest"];
-const RESERVED_PROPS = {
-  config: 1,
-  from: 1,
-  to: 1,
-  ref: 1,
-  loop: 1,
-  reset: 1,
-  pause: 1,
-  cancel: 1,
-  reverse: 1,
-  immediate: 1,
-  default: 1,
-  delay: 1,
-  onProps: 1,
-  onStart: 1,
-  onChange: 1,
-  onPause: 1,
-  onResume: 1,
-  onRest: 1,
-  onResolve: 1,
-  items: 1,
-  trail: 1,
-  sort: 1,
-  expires: 1,
-  initial: 1,
-  enter: 1,
-  update: 1,
-  leave: 1,
-  children: 1,
-  onDestroyed: 1,
-  keys: 1,
-  callId: 1,
-  parentId: 1
-};
-function getForwardProps(props) {
-  const forward = {};
-  let count = 0;
-  eachProp(props, (value, prop) => {
-    if (!RESERVED_PROPS[prop]) {
-      forward[prop] = value;
-      count++;
-    }
-  });
-  if (count) {
-    return forward;
-  }
-}
-function inferTo(props) {
-  const to2 = getForwardProps(props);
-  if (to2) {
-    const out = {
-      to: to2
-    };
-    eachProp(props, (val, key) => key in to2 || (out[key] = val));
-    return out;
-  }
-  return _extends({}, props);
-}
-function computeGoal(value) {
-  value = getFluidValue(value);
-  return is.arr(value) ? value.map(computeGoal) : isAnimatedString(value) ? globals.createStringInterpolator({
-    range: [0, 1],
-    output: [value, value]
-  })(1) : value;
-}
-function hasProps(props) {
-  for (const _ in props)
-    return true;
-  return false;
-}
-function isAsyncTo(to2) {
-  return is.fun(to2) || is.arr(to2) && is.obj(to2[0]);
-}
-function detachRefs(ctrl, ref) {
-  var _ctrl$ref;
-  (_ctrl$ref = ctrl.ref) == null ? void 0 : _ctrl$ref.delete(ctrl);
-  ref == null ? void 0 : ref.delete(ctrl);
-}
-function replaceRef(ctrl, ref) {
-  if (ref && ctrl.ref !== ref) {
-    var _ctrl$ref2;
-    (_ctrl$ref2 = ctrl.ref) == null ? void 0 : _ctrl$ref2.delete(ctrl);
-    ref.add(ctrl);
-    ctrl.ref = ref;
-  }
-}
-const config = {
-  default: {
-    tension: 170,
-    friction: 26
-  },
-  gentle: {
-    tension: 120,
-    friction: 14
-  },
-  wobbly: {
-    tension: 180,
-    friction: 12
-  },
-  stiff: {
-    tension: 210,
-    friction: 20
-  },
-  slow: {
-    tension: 280,
-    friction: 60
-  },
-  molasses: {
-    tension: 280,
-    friction: 120
-  }
-};
-const linear = (t) => t;
-const defaults = _extends({}, config.default, {
-  mass: 1,
-  damping: 1,
-  easing: linear,
-  clamp: false
-});
-class AnimationConfig {
-  constructor() {
-    this.tension = void 0;
-    this.friction = void 0;
-    this.frequency = void 0;
-    this.damping = void 0;
-    this.mass = void 0;
-    this.velocity = 0;
-    this.restVelocity = void 0;
-    this.precision = void 0;
-    this.progress = void 0;
-    this.duration = void 0;
-    this.easing = void 0;
-    this.clamp = void 0;
-    this.bounce = void 0;
-    this.decay = void 0;
-    this.round = void 0;
-    Object.assign(this, defaults);
-  }
-}
-function mergeConfig(config2, newConfig, defaultConfig) {
-  if (defaultConfig) {
-    defaultConfig = _extends({}, defaultConfig);
-    sanitizeConfig(defaultConfig, newConfig);
-    newConfig = _extends({}, defaultConfig, newConfig);
-  }
-  sanitizeConfig(config2, newConfig);
-  Object.assign(config2, newConfig);
-  for (const key in defaults) {
-    if (config2[key] == null) {
-      config2[key] = defaults[key];
-    }
-  }
-  let {
-    mass,
-    frequency,
-    damping
-  } = config2;
-  if (!is.und(frequency)) {
-    if (frequency < 0.01)
-      frequency = 0.01;
-    if (damping < 0)
-      damping = 0;
-    config2.tension = Math.pow(2 * Math.PI / frequency, 2) * mass;
-    config2.friction = 4 * Math.PI * damping * mass / frequency;
-  }
-  return config2;
-}
-function sanitizeConfig(config2, props) {
-  if (!is.und(props.decay)) {
-    config2.duration = void 0;
-  } else {
-    const isTensionConfig = !is.und(props.tension) || !is.und(props.friction);
-    if (isTensionConfig || !is.und(props.frequency) || !is.und(props.damping) || !is.und(props.mass)) {
-      config2.duration = void 0;
-      config2.decay = void 0;
-    }
-    if (isTensionConfig) {
-      config2.frequency = void 0;
-    }
-  }
-}
-const emptyArray = [];
-class Animation {
-  constructor() {
-    this.changed = false;
-    this.values = emptyArray;
-    this.toValues = null;
-    this.fromValues = emptyArray;
-    this.to = void 0;
-    this.from = void 0;
-    this.config = new AnimationConfig();
-    this.immediate = false;
-  }
-}
-function scheduleProps(callId, {
-  key,
-  props,
-  defaultProps,
-  state,
-  actions
-}) {
-  return new Promise((resolve, reject) => {
-    var _props$cancel;
-    let delay;
-    let timeout;
-    let cancel = matchProp((_props$cancel = props.cancel) != null ? _props$cancel : defaultProps == null ? void 0 : defaultProps.cancel, key);
-    if (cancel) {
-      onStart();
-    } else {
-      if (!is.und(props.pause)) {
-        state.paused = matchProp(props.pause, key);
-      }
-      let pause = defaultProps == null ? void 0 : defaultProps.pause;
-      if (pause !== true) {
-        pause = state.paused || matchProp(pause, key);
-      }
-      delay = callProp(props.delay || 0, key);
-      if (pause) {
-        state.resumeQueue.add(onResume);
-        actions.pause();
-      } else {
-        actions.resume();
-        onResume();
-      }
-    }
-    function onPause() {
-      state.resumeQueue.add(onResume);
-      state.timeouts.delete(timeout);
-      timeout.cancel();
-      delay = timeout.time - raf.now();
-    }
-    function onResume() {
-      if (delay > 0) {
-        timeout = raf.setTimeout(onStart, delay);
-        state.pauseQueue.add(onPause);
-        state.timeouts.add(timeout);
-      } else {
-        onStart();
-      }
-    }
-    function onStart() {
-      state.pauseQueue.delete(onPause);
-      state.timeouts.delete(timeout);
-      if (callId <= (state.cancelId || 0)) {
-        cancel = true;
-      }
-      try {
-        actions.start(_extends({}, props, {
-          callId,
-          cancel
-        }), resolve);
-      } catch (err) {
-        reject(err);
-      }
-    }
-  });
-}
-const getCombinedResult = (target, results) => results.length == 1 ? results[0] : results.some((result) => result.cancelled) ? getCancelledResult(target.get()) : results.every((result) => result.noop) ? getNoopResult(target.get()) : getFinishedResult(target.get(), results.every((result) => result.finished));
-const getNoopResult = (value) => ({
-  value,
-  noop: true,
-  finished: true,
-  cancelled: false
-});
-const getFinishedResult = (value, finished, cancelled = false) => ({
-  value,
-  finished,
-  cancelled
-});
-const getCancelledResult = (value) => ({
-  value,
-  cancelled: true,
-  finished: false
-});
-function runAsync(to2, props, state, target) {
-  const {
-    callId,
-    parentId,
-    onRest
-  } = props;
-  const {
-    asyncTo: prevTo,
-    promise: prevPromise
-  } = state;
-  if (!parentId && to2 === prevTo && !props.reset) {
-    return prevPromise;
-  }
-  return state.promise = (async () => {
-    state.asyncId = callId;
-    state.asyncTo = to2;
-    const defaultProps = getDefaultProps(props, (value, key) => key === "onRest" ? void 0 : value);
-    let preventBail;
-    let bail;
-    const bailPromise = new Promise((resolve, reject) => (preventBail = resolve, bail = reject));
-    const bailIfEnded = (bailSignal) => {
-      const bailResult = callId <= (state.cancelId || 0) && getCancelledResult(target) || callId !== state.asyncId && getFinishedResult(target, false);
-      if (bailResult) {
-        bailSignal.result = bailResult;
-        bail(bailSignal);
-        throw bailSignal;
-      }
-    };
-    const animate = (arg1, arg2) => {
-      const bailSignal = new BailSignal();
-      const skipAnimationSignal = new SkipAniamtionSignal();
-      return (async () => {
-        if (globals.skipAnimation) {
-          stopAsync(state);
-          skipAnimationSignal.result = getFinishedResult(target, false);
-          bail(skipAnimationSignal);
-          throw skipAnimationSignal;
-        }
-        bailIfEnded(bailSignal);
-        const props2 = is.obj(arg1) ? _extends({}, arg1) : _extends({}, arg2, {
-          to: arg1
-        });
-        props2.parentId = callId;
-        eachProp(defaultProps, (value, key) => {
-          if (is.und(props2[key])) {
-            props2[key] = value;
-          }
-        });
-        const result2 = await target.start(props2);
-        bailIfEnded(bailSignal);
-        if (state.paused) {
-          await new Promise((resume) => {
-            state.resumeQueue.add(resume);
-          });
-        }
-        return result2;
-      })();
-    };
-    let result;
-    if (globals.skipAnimation) {
-      stopAsync(state);
-      return getFinishedResult(target, false);
-    }
-    try {
-      let animating;
-      if (is.arr(to2)) {
-        animating = (async (queue) => {
-          for (const props2 of queue) {
-            await animate(props2);
-          }
-        })(to2);
-      } else {
-        animating = Promise.resolve(to2(animate, target.stop.bind(target)));
-      }
-      await Promise.all([animating.then(preventBail), bailPromise]);
-      result = getFinishedResult(target.get(), true, false);
-    } catch (err) {
-      if (err instanceof BailSignal) {
-        result = err.result;
-      } else if (err instanceof SkipAniamtionSignal) {
-        result = err.result;
-      } else {
-        throw err;
-      }
-    } finally {
-      if (callId == state.asyncId) {
-        state.asyncId = parentId;
-        state.asyncTo = parentId ? prevTo : void 0;
-        state.promise = parentId ? prevPromise : void 0;
-      }
-    }
-    if (is.fun(onRest)) {
-      raf.batchedUpdates(() => {
-        onRest(result, target, target.item);
-      });
-    }
-    return result;
-  })();
-}
-function stopAsync(state, cancelId) {
-  flush(state.timeouts, (t) => t.cancel());
-  state.pauseQueue.clear();
-  state.resumeQueue.clear();
-  state.asyncId = state.asyncTo = state.promise = void 0;
-  if (cancelId)
-    state.cancelId = cancelId;
-}
-class BailSignal extends Error {
-  constructor() {
-    super("An async animation has been interrupted. You see this error because you forgot to use `await` or `.catch(...)` on its returned promise.");
-    this.result = void 0;
-  }
-}
-class SkipAniamtionSignal extends Error {
-  constructor() {
-    super("SkipAnimationSignal");
-    this.result = void 0;
-  }
-}
-const isFrameValue = (value) => value instanceof FrameValue;
-let nextId$1 = 1;
-class FrameValue extends FluidValue {
-  constructor(...args) {
-    super(...args);
-    this.id = nextId$1++;
-    this.key = void 0;
-    this._priority = 0;
-  }
-  get priority() {
-    return this._priority;
-  }
-  set priority(priority2) {
-    if (this._priority != priority2) {
-      this._priority = priority2;
-      this._onPriorityChange(priority2);
-    }
-  }
-  get() {
-    const node = getAnimated(this);
-    return node && node.getValue();
-  }
-  to(...args) {
-    return globals.to(this, args);
-  }
-  interpolate(...args) {
-    deprecateInterpolate();
-    return globals.to(this, args);
-  }
-  toJSON() {
-    return this.get();
-  }
-  observerAdded(count) {
-    if (count == 1)
-      this._attach();
-  }
-  observerRemoved(count) {
-    if (count == 0)
-      this._detach();
-  }
-  _attach() {
-  }
-  _detach() {
-  }
-  _onChange(value, idle = false) {
-    callFluidObservers(this, {
-      type: "change",
-      parent: this,
-      value,
-      idle
-    });
-  }
-  _onPriorityChange(priority2) {
-    if (!this.idle) {
-      frameLoop.sort(this);
-    }
-    callFluidObservers(this, {
-      type: "priority",
-      parent: this,
-      priority: priority2
-    });
-  }
-}
-const $P = Symbol.for("SpringPhase");
-const HAS_ANIMATED = 1;
-const IS_ANIMATING = 2;
-const IS_PAUSED = 4;
-const hasAnimated = (target) => (target[$P] & HAS_ANIMATED) > 0;
-const isAnimating = (target) => (target[$P] & IS_ANIMATING) > 0;
-const isPaused = (target) => (target[$P] & IS_PAUSED) > 0;
-const setActiveBit = (target, active) => active ? target[$P] |= IS_ANIMATING | HAS_ANIMATED : target[$P] &= ~IS_ANIMATING;
-const setPausedBit = (target, paused) => paused ? target[$P] |= IS_PAUSED : target[$P] &= ~IS_PAUSED;
-class SpringValue extends FrameValue {
-  constructor(arg1, arg2) {
-    super();
-    this.key = void 0;
-    this.animation = new Animation();
-    this.queue = void 0;
-    this.defaultProps = {};
-    this._state = {
-      paused: false,
-      pauseQueue: new Set(),
-      resumeQueue: new Set(),
-      timeouts: new Set()
-    };
-    this._pendingCalls = new Set();
-    this._lastCallId = 0;
-    this._lastToId = 0;
-    this._memoizedDuration = 0;
-    if (!is.und(arg1) || !is.und(arg2)) {
-      const props = is.obj(arg1) ? _extends({}, arg1) : _extends({}, arg2, {
-        from: arg1
-      });
-      if (is.und(props.default)) {
-        props.default = true;
-      }
-      this.start(props);
-    }
-  }
-  get idle() {
-    return !(isAnimating(this) || this._state.asyncTo) || isPaused(this);
-  }
-  get goal() {
-    return getFluidValue(this.animation.to);
-  }
-  get velocity() {
-    const node = getAnimated(this);
-    return node instanceof AnimatedValue ? node.lastVelocity || 0 : node.getPayload().map((node2) => node2.lastVelocity || 0);
-  }
-  get hasAnimated() {
-    return hasAnimated(this);
-  }
-  get isAnimating() {
-    return isAnimating(this);
-  }
-  get isPaused() {
-    return isPaused(this);
-  }
-  advance(dt) {
-    let idle = true;
-    let changed = false;
-    const anim = this.animation;
-    let {
-      config: config2,
-      toValues
-    } = anim;
-    const payload = getPayload(anim.to);
-    if (!payload && hasFluidValue(anim.to)) {
-      toValues = toArray(getFluidValue(anim.to));
-    }
-    anim.values.forEach((node2, i) => {
-      if (node2.done)
-        return;
-      const to2 = node2.constructor == AnimatedString ? 1 : payload ? payload[i].lastPosition : toValues[i];
-      let finished = anim.immediate;
-      let position = to2;
-      if (!finished) {
-        position = node2.lastPosition;
-        if (config2.tension <= 0) {
-          node2.done = true;
-          return;
-        }
-        let elapsed = node2.elapsedTime += dt;
-        const from = anim.fromValues[i];
-        const v0 = node2.v0 != null ? node2.v0 : node2.v0 = is.arr(config2.velocity) ? config2.velocity[i] : config2.velocity;
-        let velocity;
-        if (!is.und(config2.duration)) {
-          let p = 1;
-          if (config2.duration > 0) {
-            if (this._memoizedDuration !== config2.duration) {
-              this._memoizedDuration = config2.duration;
-              if (node2.durationProgress > 0) {
-                node2.elapsedTime = config2.duration * node2.durationProgress;
-                elapsed = node2.elapsedTime += dt;
-              }
-            }
-            p = (config2.progress || 0) + elapsed / this._memoizedDuration;
-            p = p > 1 ? 1 : p < 0 ? 0 : p;
-            node2.durationProgress = p;
-          }
-          position = from + config2.easing(p) * (to2 - from);
-          velocity = (position - node2.lastPosition) / dt;
-          finished = p == 1;
-        } else if (config2.decay) {
-          const decay = config2.decay === true ? 0.998 : config2.decay;
-          const e = Math.exp(-(1 - decay) * elapsed);
-          position = from + v0 / (1 - decay) * (1 - e);
-          finished = Math.abs(node2.lastPosition - position) < 0.1;
-          velocity = v0 * e;
-        } else {
-          velocity = node2.lastVelocity == null ? v0 : node2.lastVelocity;
-          const precision = config2.precision || (from == to2 ? 5e-3 : Math.min(1, Math.abs(to2 - from) * 1e-3));
-          const restVelocity = config2.restVelocity || precision / 10;
-          const bounceFactor = config2.clamp ? 0 : config2.bounce;
-          const canBounce = !is.und(bounceFactor);
-          const isGrowing = from == to2 ? node2.v0 > 0 : from < to2;
-          let isMoving;
-          let isBouncing = false;
-          const step = 1;
-          const numSteps = Math.ceil(dt / step);
-          for (let n = 0; n < numSteps; ++n) {
-            isMoving = Math.abs(velocity) > restVelocity;
-            if (!isMoving) {
-              finished = Math.abs(to2 - position) <= precision;
-              if (finished) {
-                break;
-              }
-            }
-            if (canBounce) {
-              isBouncing = position == to2 || position > to2 == isGrowing;
-              if (isBouncing) {
-                velocity = -velocity * bounceFactor;
-                position = to2;
-              }
-            }
-            const springForce = -config2.tension * 1e-6 * (position - to2);
-            const dampingForce = -config2.friction * 1e-3 * velocity;
-            const acceleration = (springForce + dampingForce) / config2.mass;
-            velocity = velocity + acceleration * step;
-            position = position + velocity * step;
-          }
-        }
-        node2.lastVelocity = velocity;
-        if (Number.isNaN(position)) {
-          console.warn(`Got NaN while animating:`, this);
-          finished = true;
-        }
-      }
-      if (payload && !payload[i].done) {
-        finished = false;
-      }
-      if (finished) {
-        node2.done = true;
-      } else {
-        idle = false;
-      }
-      if (node2.setValue(position, config2.round)) {
-        changed = true;
-      }
-    });
-    const node = getAnimated(this);
-    const currVal = node.getValue();
-    if (idle) {
-      const finalVal = getFluidValue(anim.to);
-      if ((currVal !== finalVal || changed) && !config2.decay) {
-        node.setValue(finalVal);
-        this._onChange(finalVal);
-      } else if (changed && config2.decay) {
-        this._onChange(currVal);
-      }
-      this._stop();
-    } else if (changed) {
-      this._onChange(currVal);
-    }
-  }
-  set(value) {
-    raf.batchedUpdates(() => {
-      this._stop();
-      this._focus(value);
-      this._set(value);
-    });
-    return this;
-  }
-  pause() {
-    this._update({
-      pause: true
-    });
-  }
-  resume() {
-    this._update({
-      pause: false
-    });
-  }
-  finish() {
-    if (isAnimating(this)) {
-      const {
-        to: to2,
-        config: config2
-      } = this.animation;
-      raf.batchedUpdates(() => {
-        this._onStart();
-        if (!config2.decay) {
-          this._set(to2, false);
-        }
-        this._stop();
-      });
-    }
-    return this;
-  }
-  update(props) {
-    const queue = this.queue || (this.queue = []);
-    queue.push(props);
-    return this;
-  }
-  start(to2, arg2) {
-    let queue;
-    if (!is.und(to2)) {
-      queue = [is.obj(to2) ? to2 : _extends({}, arg2, {
-        to: to2
-      })];
-    } else {
-      queue = this.queue || [];
-      this.queue = [];
-    }
-    return Promise.all(queue.map((props) => this._update(props))).then((results) => getCombinedResult(this, results));
-  }
-  stop(cancel) {
-    const {
-      to: to2
-    } = this.animation;
-    this._focus(this.get());
-    stopAsync(this._state, cancel && this._lastCallId);
-    raf.batchedUpdates(() => this._stop(to2, cancel));
-    return this;
-  }
-  reset() {
-    this._update({
-      reset: true
-    });
-  }
-  eventObserved(event) {
-    if (event.type == "change") {
-      this._start();
-    } else if (event.type == "priority") {
-      this.priority = event.priority + 1;
-    }
-  }
-  _prepareNode(props) {
-    const key = this.key || "";
-    let {
-      to: to2,
-      from
-    } = props;
-    to2 = is.obj(to2) ? to2[key] : to2;
-    if (to2 == null || isAsyncTo(to2)) {
-      to2 = void 0;
-    }
-    from = is.obj(from) ? from[key] : from;
-    if (from == null) {
-      from = void 0;
-    }
-    const range = {
-      to: to2,
-      from
-    };
-    if (!hasAnimated(this)) {
-      if (props.reverse)
-        [to2, from] = [from, to2];
-      from = getFluidValue(from);
-      if (!is.und(from)) {
-        this._set(from);
-      } else if (!getAnimated(this)) {
-        this._set(to2);
-      }
-    }
-    return range;
-  }
-  _update(_ref, isLoop) {
-    let props = _extends({}, _ref);
-    const {
-      key,
-      defaultProps
-    } = this;
-    if (props.default)
-      Object.assign(defaultProps, getDefaultProps(props, (value, prop) => /^on/.test(prop) ? resolveProp(value, key) : value));
-    mergeActiveFn(this, props, "onProps");
-    sendEvent(this, "onProps", props, this);
-    const range = this._prepareNode(props);
-    if (Object.isFrozen(this)) {
-      throw Error("Cannot animate a `SpringValue` object that is frozen. Did you forget to pass your component to `animated(...)` before animating its props?");
-    }
-    const state = this._state;
-    return scheduleProps(++this._lastCallId, {
-      key,
-      props,
-      defaultProps,
-      state,
-      actions: {
-        pause: () => {
-          if (!isPaused(this)) {
-            setPausedBit(this, true);
-            flushCalls(state.pauseQueue);
-            sendEvent(this, "onPause", getFinishedResult(this, checkFinished(this, this.animation.to)), this);
-          }
-        },
-        resume: () => {
-          if (isPaused(this)) {
-            setPausedBit(this, false);
-            if (isAnimating(this)) {
-              this._resume();
-            }
-            flushCalls(state.resumeQueue);
-            sendEvent(this, "onResume", getFinishedResult(this, checkFinished(this, this.animation.to)), this);
-          }
-        },
-        start: this._merge.bind(this, range)
-      }
-    }).then((result) => {
-      if (props.loop && result.finished && !(isLoop && result.noop)) {
-        const nextProps = createLoopUpdate(props);
-        if (nextProps) {
-          return this._update(nextProps, true);
-        }
-      }
-      return result;
-    });
-  }
-  _merge(range, props, resolve) {
-    if (props.cancel) {
-      this.stop(true);
-      return resolve(getCancelledResult(this));
-    }
-    const hasToProp = !is.und(range.to);
-    const hasFromProp = !is.und(range.from);
-    if (hasToProp || hasFromProp) {
-      if (props.callId > this._lastToId) {
-        this._lastToId = props.callId;
-      } else {
-        return resolve(getCancelledResult(this));
-      }
-    }
-    const {
-      key,
-      defaultProps,
-      animation: anim
-    } = this;
-    const {
-      to: prevTo,
-      from: prevFrom
-    } = anim;
-    let {
-      to: to2 = prevTo,
-      from = prevFrom
-    } = range;
-    if (hasFromProp && !hasToProp && (!props.default || is.und(to2))) {
-      to2 = from;
-    }
-    if (props.reverse)
-      [to2, from] = [from, to2];
-    const hasFromChanged = !isEqual(from, prevFrom);
-    if (hasFromChanged) {
-      anim.from = from;
-    }
-    from = getFluidValue(from);
-    const hasToChanged = !isEqual(to2, prevTo);
-    if (hasToChanged) {
-      this._focus(to2);
-    }
-    const hasAsyncTo = isAsyncTo(props.to);
-    const {
-      config: config2
-    } = anim;
-    const {
-      decay,
-      velocity
-    } = config2;
-    if (hasToProp || hasFromProp) {
-      config2.velocity = 0;
-    }
-    if (props.config && !hasAsyncTo) {
-      mergeConfig(config2, callProp(props.config, key), props.config !== defaultProps.config ? callProp(defaultProps.config, key) : void 0);
-    }
-    let node = getAnimated(this);
-    if (!node || is.und(to2)) {
-      return resolve(getFinishedResult(this, true));
-    }
-    const reset = is.und(props.reset) ? hasFromProp && !props.default : !is.und(from) && matchProp(props.reset, key);
-    const value = reset ? from : this.get();
-    const goal = computeGoal(to2);
-    const isAnimatable = is.num(goal) || is.arr(goal) || isAnimatedString(goal);
-    const immediate = !hasAsyncTo && (!isAnimatable || matchProp(defaultProps.immediate || props.immediate, key));
-    if (hasToChanged) {
-      const nodeType = getAnimatedType(to2);
-      if (nodeType !== node.constructor) {
-        if (immediate) {
-          node = this._set(goal);
-        } else
-          throw Error(`Cannot animate between ${node.constructor.name} and ${nodeType.name}, as the "to" prop suggests`);
-      }
-    }
-    const goalType = node.constructor;
-    let started = hasFluidValue(to2);
-    let finished = false;
-    if (!started) {
-      const hasValueChanged = reset || !hasAnimated(this) && hasFromChanged;
-      if (hasToChanged || hasValueChanged) {
-        finished = isEqual(computeGoal(value), goal);
-        started = !finished;
-      }
-      if (!isEqual(anim.immediate, immediate) && !immediate || !isEqual(config2.decay, decay) || !isEqual(config2.velocity, velocity)) {
-        started = true;
-      }
-    }
-    if (finished && isAnimating(this)) {
-      if (anim.changed && !reset) {
-        started = true;
-      } else if (!started) {
-        this._stop(prevTo);
-      }
-    }
-    if (!hasAsyncTo) {
-      if (started || hasFluidValue(prevTo)) {
-        anim.values = node.getPayload();
-        anim.toValues = hasFluidValue(to2) ? null : goalType == AnimatedString ? [1] : toArray(goal);
-      }
-      if (anim.immediate != immediate) {
-        anim.immediate = immediate;
-        if (!immediate && !reset) {
-          this._set(prevTo);
-        }
-      }
-      if (started) {
-        const {
-          onRest
-        } = anim;
-        each(ACTIVE_EVENTS, (type) => mergeActiveFn(this, props, type));
-        const result = getFinishedResult(this, checkFinished(this, prevTo));
-        flushCalls(this._pendingCalls, result);
-        this._pendingCalls.add(resolve);
-        if (anim.changed)
-          raf.batchedUpdates(() => {
-            anim.changed = !reset;
-            onRest == null ? void 0 : onRest(result, this);
-            if (reset) {
-              callProp(defaultProps.onRest, result);
-            } else {
-              anim.onStart == null ? void 0 : anim.onStart(result, this);
-            }
-          });
-      }
-    }
-    if (reset) {
-      this._set(value);
-    }
-    if (hasAsyncTo) {
-      resolve(runAsync(props.to, props, this._state, this));
-    } else if (started) {
-      this._start();
-    } else if (isAnimating(this) && !hasToChanged) {
-      this._pendingCalls.add(resolve);
-    } else {
-      resolve(getNoopResult(value));
-    }
-  }
-  _focus(value) {
-    const anim = this.animation;
-    if (value !== anim.to) {
-      if (getFluidObservers(this)) {
-        this._detach();
-      }
-      anim.to = value;
-      if (getFluidObservers(this)) {
-        this._attach();
-      }
-    }
-  }
-  _attach() {
-    let priority2 = 0;
-    const {
-      to: to2
-    } = this.animation;
-    if (hasFluidValue(to2)) {
-      addFluidObserver(to2, this);
-      if (isFrameValue(to2)) {
-        priority2 = to2.priority + 1;
-      }
-    }
-    this.priority = priority2;
-  }
-  _detach() {
-    const {
-      to: to2
-    } = this.animation;
-    if (hasFluidValue(to2)) {
-      removeFluidObserver(to2, this);
-    }
-  }
-  _set(arg, idle = true) {
-    const value = getFluidValue(arg);
-    if (!is.und(value)) {
-      const oldNode = getAnimated(this);
-      if (!oldNode || !isEqual(value, oldNode.getValue())) {
-        const nodeType = getAnimatedType(value);
-        if (!oldNode || oldNode.constructor != nodeType) {
-          setAnimated(this, nodeType.create(value));
-        } else {
-          oldNode.setValue(value);
-        }
-        if (oldNode) {
-          raf.batchedUpdates(() => {
-            this._onChange(value, idle);
-          });
-        }
-      }
-    }
-    return getAnimated(this);
-  }
-  _onStart() {
-    const anim = this.animation;
-    if (!anim.changed) {
-      anim.changed = true;
-      sendEvent(this, "onStart", getFinishedResult(this, checkFinished(this, anim.to)), this);
-    }
-  }
-  _onChange(value, idle) {
-    if (!idle) {
-      this._onStart();
-      callProp(this.animation.onChange, value, this);
-    }
-    callProp(this.defaultProps.onChange, value, this);
-    super._onChange(value, idle);
-  }
-  _start() {
-    const anim = this.animation;
-    getAnimated(this).reset(getFluidValue(anim.to));
-    if (!anim.immediate) {
-      anim.fromValues = anim.values.map((node) => node.lastPosition);
-    }
-    if (!isAnimating(this)) {
-      setActiveBit(this, true);
-      if (!isPaused(this)) {
-        this._resume();
-      }
-    }
-  }
-  _resume() {
-    if (globals.skipAnimation) {
-      this.finish();
-    } else {
-      frameLoop.start(this);
-    }
-  }
-  _stop(goal, cancel) {
-    if (isAnimating(this)) {
-      setActiveBit(this, false);
-      const anim = this.animation;
-      each(anim.values, (node) => {
-        node.done = true;
-      });
-      if (anim.toValues) {
-        anim.onChange = anim.onPause = anim.onResume = void 0;
-      }
-      callFluidObservers(this, {
-        type: "idle",
-        parent: this
-      });
-      const result = cancel ? getCancelledResult(this.get()) : getFinishedResult(this.get(), checkFinished(this, goal != null ? goal : anim.to));
-      flushCalls(this._pendingCalls, result);
-      if (anim.changed) {
-        anim.changed = false;
-        sendEvent(this, "onRest", result, this);
-      }
-    }
-  }
-}
-function checkFinished(target, to2) {
-  const goal = computeGoal(to2);
-  const value = computeGoal(target.get());
-  return isEqual(value, goal);
-}
-function createLoopUpdate(props, loop2 = props.loop, to2 = props.to) {
-  let loopRet = callProp(loop2);
-  if (loopRet) {
-    const overrides = loopRet !== true && inferTo(loopRet);
-    const reverse = (overrides || props).reverse;
-    const reset = !overrides || overrides.reset;
-    return createUpdate(_extends({}, props, {
-      loop: loop2,
-      default: false,
-      pause: void 0,
-      to: !reverse || isAsyncTo(to2) ? to2 : void 0,
-      from: reset ? props.from : void 0,
-      reset
-    }, overrides));
-  }
-}
-function createUpdate(props) {
-  const {
-    to: to2,
-    from
-  } = props = inferTo(props);
-  const keys = new Set();
-  if (is.obj(to2))
-    findDefined(to2, keys);
-  if (is.obj(from))
-    findDefined(from, keys);
-  props.keys = keys.size ? Array.from(keys) : null;
-  return props;
-}
-function declareUpdate(props) {
-  const update2 = createUpdate(props);
-  if (is.und(update2.default)) {
-    update2.default = getDefaultProps(update2);
-  }
-  return update2;
-}
-function findDefined(values, keys) {
-  eachProp(values, (value, key) => value != null && keys.add(key));
-}
-const ACTIVE_EVENTS = ["onStart", "onRest", "onChange", "onPause", "onResume"];
-function mergeActiveFn(target, props, type) {
-  target.animation[type] = props[type] !== getDefaultProp(props, type) ? resolveProp(props[type], target.key) : void 0;
-}
-function sendEvent(target, type, ...args) {
-  var _target$animation$typ, _target$animation, _target$defaultProps$, _target$defaultProps;
-  (_target$animation$typ = (_target$animation = target.animation)[type]) == null ? void 0 : _target$animation$typ.call(_target$animation, ...args);
-  (_target$defaultProps$ = (_target$defaultProps = target.defaultProps)[type]) == null ? void 0 : _target$defaultProps$.call(_target$defaultProps, ...args);
-}
-const BATCHED_EVENTS = ["onStart", "onChange", "onRest"];
-let nextId = 1;
-class Controller {
-  constructor(props, flush2) {
-    this.id = nextId++;
-    this.springs = {};
-    this.queue = [];
-    this.ref = void 0;
-    this._flush = void 0;
-    this._initialProps = void 0;
-    this._lastAsyncId = 0;
-    this._active = new Set();
-    this._changed = new Set();
-    this._started = false;
-    this._item = void 0;
-    this._state = {
-      paused: false,
-      pauseQueue: new Set(),
-      resumeQueue: new Set(),
-      timeouts: new Set()
-    };
-    this._events = {
-      onStart: new Map(),
-      onChange: new Map(),
-      onRest: new Map()
-    };
-    this._onFrame = this._onFrame.bind(this);
-    if (flush2) {
-      this._flush = flush2;
-    }
-    if (props) {
-      this.start(_extends({
-        default: true
-      }, props));
-    }
-  }
-  get idle() {
-    return !this._state.asyncTo && Object.values(this.springs).every((spring) => spring.idle);
-  }
-  get item() {
-    return this._item;
-  }
-  set item(item) {
-    this._item = item;
-  }
-  get() {
-    const values = {};
-    this.each((spring, key) => values[key] = spring.get());
-    return values;
-  }
-  set(values) {
-    for (const key in values) {
-      const value = values[key];
-      if (!is.und(value)) {
-        this.springs[key].set(value);
-      }
-    }
-  }
-  update(props) {
-    if (props) {
-      this.queue.push(createUpdate(props));
-    }
-    return this;
-  }
-  start(props) {
-    let {
-      queue
-    } = this;
-    if (props) {
-      queue = toArray(props).map(createUpdate);
-    } else {
-      this.queue = [];
-    }
-    if (this._flush) {
-      return this._flush(this, queue);
-    }
-    prepareKeys(this, queue);
-    return flushUpdateQueue(this, queue);
-  }
-  stop(arg, keys) {
-    if (arg !== !!arg) {
-      keys = arg;
-    }
-    if (keys) {
-      const springs = this.springs;
-      each(toArray(keys), (key) => springs[key].stop(!!arg));
-    } else {
-      stopAsync(this._state, this._lastAsyncId);
-      this.each((spring) => spring.stop(!!arg));
-    }
-    return this;
-  }
-  pause(keys) {
-    if (is.und(keys)) {
-      this.start({
-        pause: true
-      });
-    } else {
-      const springs = this.springs;
-      each(toArray(keys), (key) => springs[key].pause());
-    }
-    return this;
-  }
-  resume(keys) {
-    if (is.und(keys)) {
-      this.start({
-        pause: false
-      });
-    } else {
-      const springs = this.springs;
-      each(toArray(keys), (key) => springs[key].resume());
-    }
-    return this;
-  }
-  each(iterator) {
-    eachProp(this.springs, iterator);
-  }
-  _onFrame() {
-    const {
-      onStart,
-      onChange,
-      onRest
-    } = this._events;
-    const active = this._active.size > 0;
-    const changed = this._changed.size > 0;
-    if (active && !this._started || changed && !this._started) {
-      this._started = true;
-      flush(onStart, ([onStart2, result]) => {
-        result.value = this.get();
-        onStart2(result, this, this._item);
-      });
-    }
-    const idle = !active && this._started;
-    const values = changed || idle && onRest.size ? this.get() : null;
-    if (changed && onChange.size) {
-      flush(onChange, ([onChange2, result]) => {
-        result.value = values;
-        onChange2(result, this, this._item);
-      });
-    }
-    if (idle) {
-      this._started = false;
-      flush(onRest, ([onRest2, result]) => {
-        result.value = values;
-        onRest2(result, this, this._item);
-      });
-    }
-  }
-  eventObserved(event) {
-    if (event.type == "change") {
-      this._changed.add(event.parent);
-      if (!event.idle) {
-        this._active.add(event.parent);
-      }
-    } else if (event.type == "idle") {
-      this._active.delete(event.parent);
-    } else
-      return;
-    raf.onFrame(this._onFrame);
-  }
-}
-function flushUpdateQueue(ctrl, queue) {
-  return Promise.all(queue.map((props) => flushUpdate(ctrl, props))).then((results) => getCombinedResult(ctrl, results));
-}
-async function flushUpdate(ctrl, props, isLoop) {
-  const {
-    keys,
-    to: to2,
-    from,
-    loop: loop2,
-    onRest,
-    onResolve
-  } = props;
-  const defaults2 = is.obj(props.default) && props.default;
-  if (loop2) {
-    props.loop = false;
-  }
-  if (to2 === false)
-    props.to = null;
-  if (from === false)
-    props.from = null;
-  const asyncTo = is.arr(to2) || is.fun(to2) ? to2 : void 0;
-  if (asyncTo) {
-    props.to = void 0;
-    props.onRest = void 0;
-    if (defaults2) {
-      defaults2.onRest = void 0;
-    }
-  } else {
-    each(BATCHED_EVENTS, (key) => {
-      const handler = props[key];
-      if (is.fun(handler)) {
-        const queue = ctrl["_events"][key];
-        props[key] = ({
-          finished,
-          cancelled
-        }) => {
-          const result2 = queue.get(handler);
-          if (result2) {
-            if (!finished)
-              result2.finished = false;
-            if (cancelled)
-              result2.cancelled = true;
-          } else {
-            queue.set(handler, {
-              value: null,
-              finished: finished || false,
-              cancelled: cancelled || false
-            });
-          }
-        };
-        if (defaults2) {
-          defaults2[key] = props[key];
-        }
-      }
-    });
-  }
-  const state = ctrl["_state"];
-  if (props.pause === !state.paused) {
-    state.paused = props.pause;
-    flushCalls(props.pause ? state.pauseQueue : state.resumeQueue);
-  } else if (state.paused) {
-    props.pause = true;
-  }
-  const promises = (keys || Object.keys(ctrl.springs)).map((key) => ctrl.springs[key].start(props));
-  const cancel = props.cancel === true || getDefaultProp(props, "cancel") === true;
-  if (asyncTo || cancel && state.asyncId) {
-    promises.push(scheduleProps(++ctrl["_lastAsyncId"], {
-      props,
-      state,
-      actions: {
-        pause: noop,
-        resume: noop,
-        start(props2, resolve) {
-          if (cancel) {
-            stopAsync(state, ctrl["_lastAsyncId"]);
-            resolve(getCancelledResult(ctrl));
-          } else {
-            props2.onRest = onRest;
-            resolve(runAsync(asyncTo, props2, state, ctrl));
-          }
-        }
-      }
-    }));
-  }
-  if (state.paused) {
-    await new Promise((resume) => {
-      state.resumeQueue.add(resume);
-    });
-  }
-  const result = getCombinedResult(ctrl, await Promise.all(promises));
-  if (loop2 && result.finished && !(isLoop && result.noop)) {
-    const nextProps = createLoopUpdate(props, loop2, to2);
-    if (nextProps) {
-      prepareKeys(ctrl, [nextProps]);
-      return flushUpdate(ctrl, nextProps, true);
-    }
-  }
-  if (onResolve) {
-    raf.batchedUpdates(() => onResolve(result, ctrl, ctrl.item));
-  }
-  return result;
-}
-function getSprings(ctrl, props) {
-  const springs = _extends({}, ctrl.springs);
-  if (props) {
-    each(toArray(props), (props2) => {
-      if (is.und(props2.keys)) {
-        props2 = createUpdate(props2);
-      }
-      if (!is.obj(props2.to)) {
-        props2 = _extends({}, props2, {
-          to: void 0
-        });
-      }
-      prepareSprings(springs, props2, (key) => {
-        return createSpring(key);
-      });
-    });
-  }
-  setSprings(ctrl, springs);
-  return springs;
-}
-function setSprings(ctrl, springs) {
-  eachProp(springs, (spring, key) => {
-    if (!ctrl.springs[key]) {
-      ctrl.springs[key] = spring;
-      addFluidObserver(spring, ctrl);
-    }
-  });
-}
-function createSpring(key, observer) {
-  const spring = new SpringValue();
-  spring.key = key;
-  if (observer) {
-    addFluidObserver(spring, observer);
-  }
-  return spring;
-}
-function prepareSprings(springs, props, create) {
-  if (props.keys) {
-    each(props.keys, (key) => {
-      const spring = springs[key] || (springs[key] = create(key));
-      spring["_prepareNode"](props);
-    });
-  }
-}
-function prepareKeys(ctrl, queue) {
-  each(queue, (props) => {
-    prepareSprings(ctrl.springs, props, (key) => {
-      return createSpring(key, ctrl);
-    });
-  });
-}
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null)
-    return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0)
-      continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-const _excluded$3 = ["children"];
-const SpringContext = (_ref) => {
-  let {
-    children
-  } = _ref, props = _objectWithoutPropertiesLoose$1(_ref, _excluded$3);
-  const inherited = useContext(ctx);
-  const pause = props.pause || !!inherited.pause, immediate = props.immediate || !!inherited.immediate;
-  props = useMemoOne(() => ({
-    pause,
-    immediate
-  }), [pause, immediate]);
-  const {
-    Provider
-  } = ctx;
-  return React.createElement(Provider, {
-    value: props
-  }, children);
-};
-const ctx = makeContext(SpringContext, {});
-SpringContext.Provider = ctx.Provider;
-SpringContext.Consumer = ctx.Consumer;
-function makeContext(target, init) {
-  Object.assign(target, React.createContext(init));
-  target.Provider._context = target;
-  target.Consumer._context = target;
-  return target;
-}
-const SpringRef = () => {
-  const current = [];
-  const SpringRef2 = function SpringRef3(props) {
-    deprecateDirectCall();
-    const results = [];
-    each(current, (ctrl, i) => {
-      if (is.und(props)) {
-        results.push(ctrl.start());
-      } else {
-        const update2 = _getProps(props, ctrl, i);
-        if (update2) {
-          results.push(ctrl.start(update2));
-        }
-      }
-    });
-    return results;
-  };
-  SpringRef2.current = current;
-  SpringRef2.add = function(ctrl) {
-    if (!current.includes(ctrl)) {
-      current.push(ctrl);
-    }
-  };
-  SpringRef2.delete = function(ctrl) {
-    const i = current.indexOf(ctrl);
-    if (~i)
-      current.splice(i, 1);
-  };
-  SpringRef2.pause = function() {
-    each(current, (ctrl) => ctrl.pause(...arguments));
-    return this;
-  };
-  SpringRef2.resume = function() {
-    each(current, (ctrl) => ctrl.resume(...arguments));
-    return this;
-  };
-  SpringRef2.set = function(values) {
-    each(current, (ctrl) => ctrl.set(values));
-  };
-  SpringRef2.start = function(props) {
-    const results = [];
-    each(current, (ctrl, i) => {
-      if (is.und(props)) {
-        results.push(ctrl.start());
-      } else {
-        const update2 = this._getProps(props, ctrl, i);
-        if (update2) {
-          results.push(ctrl.start(update2));
-        }
-      }
-    });
-    return results;
-  };
-  SpringRef2.stop = function() {
-    each(current, (ctrl) => ctrl.stop(...arguments));
-    return this;
-  };
-  SpringRef2.update = function(props) {
-    each(current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
-    return this;
-  };
-  const _getProps = function _getProps2(arg, ctrl, index2) {
-    return is.fun(arg) ? arg(index2, ctrl) : arg;
-  };
-  SpringRef2._getProps = _getProps;
-  return SpringRef2;
-};
-function useSprings(length, props, deps) {
-  const propsFn = is.fun(props) && props;
-  if (propsFn && !deps)
-    deps = [];
-  const ref = useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
-  const layoutId = useRef(0);
-  const forceUpdate = useForceUpdate();
-  const state = useMemo(() => ({
-    ctrls: [],
-    queue: [],
-    flush(ctrl, updates2) {
-      const springs2 = getSprings(ctrl, updates2);
-      const canFlushSync = layoutId.current > 0 && !state.queue.length && !Object.keys(springs2).some((key) => !ctrl.springs[key]);
-      return canFlushSync ? flushUpdateQueue(ctrl, updates2) : new Promise((resolve) => {
-        setSprings(ctrl, springs2);
-        state.queue.push(() => {
-          resolve(flushUpdateQueue(ctrl, updates2));
-        });
-        forceUpdate();
-      });
-    }
-  }), []);
-  const ctrls = useRef([...state.ctrls]);
-  const updates = [];
-  const prevLength = usePrev(length) || 0;
-  useMemo(() => {
-    each(ctrls.current.slice(length, prevLength), (ctrl) => {
-      detachRefs(ctrl, ref);
-      ctrl.stop(true);
-    });
-    ctrls.current.length = length;
-    declareUpdates(prevLength, length);
-  }, [length]);
-  useMemo(() => {
-    declareUpdates(0, Math.min(prevLength, length));
-  }, deps);
-  function declareUpdates(startIndex, endIndex) {
-    for (let i = startIndex; i < endIndex; i++) {
-      const ctrl = ctrls.current[i] || (ctrls.current[i] = new Controller(null, state.flush));
-      const update2 = propsFn ? propsFn(i, ctrl) : props[i];
-      if (update2) {
-        updates[i] = declareUpdate(update2);
-      }
-    }
-  }
-  const springs = ctrls.current.map((ctrl, i) => getSprings(ctrl, updates[i]));
-  const context = useContext(SpringContext);
-  const prevContext = usePrev(context);
-  const hasContext = context !== prevContext && hasProps(context);
-  useLayoutEffect(() => {
-    layoutId.current++;
-    state.ctrls = ctrls.current;
-    const {
-      queue
-    } = state;
-    if (queue.length) {
-      state.queue = [];
-      each(queue, (cb) => cb());
-    }
-    each(ctrls.current, (ctrl, i) => {
-      ref == null ? void 0 : ref.add(ctrl);
-      if (hasContext) {
-        ctrl.start({
-          default: context
-        });
-      }
-      const update2 = updates[i];
-      if (update2) {
-        replaceRef(ctrl, update2.ref);
-        if (ctrl.ref) {
-          ctrl.queue.push(update2);
-        } else {
-          ctrl.start(update2);
-        }
-      }
-    });
-  });
-  useOnce(() => () => {
-    each(state.ctrls, (ctrl) => ctrl.stop(true));
-  });
-  const values = springs.map((x) => _extends({}, x));
-  return ref ? [values, ref] : values;
-}
-function useSpring(props, deps) {
-  const isFn = is.fun(props);
-  const [[values], ref] = useSprings(1, isFn ? props : [props], isFn ? deps || [] : deps);
-  return isFn || arguments.length == 2 ? [values, ref] : values;
-}
-let TransitionPhase;
-(function(TransitionPhase2) {
-  TransitionPhase2["MOUNT"] = "mount";
-  TransitionPhase2["ENTER"] = "enter";
-  TransitionPhase2["UPDATE"] = "update";
-  TransitionPhase2["LEAVE"] = "leave";
-})(TransitionPhase || (TransitionPhase = {}));
-class Interpolation extends FrameValue {
-  constructor(source, args) {
-    super();
-    this.key = void 0;
-    this.idle = true;
-    this.calc = void 0;
-    this._active = new Set();
-    this.source = source;
-    this.calc = createInterpolator(...args);
-    const value = this._get();
-    const nodeType = getAnimatedType(value);
-    setAnimated(this, nodeType.create(value));
-  }
-  advance(_dt) {
-    const value = this._get();
-    const oldValue = this.get();
-    if (!isEqual(value, oldValue)) {
-      getAnimated(this).setValue(value);
-      this._onChange(value, this.idle);
-    }
-    if (!this.idle && checkIdle(this._active)) {
-      becomeIdle(this);
-    }
-  }
-  _get() {
-    const inputs = is.arr(this.source) ? this.source.map(getFluidValue) : toArray(getFluidValue(this.source));
-    return this.calc(...inputs);
-  }
-  _start() {
-    if (this.idle && !checkIdle(this._active)) {
-      this.idle = false;
-      each(getPayload(this), (node) => {
-        node.done = false;
-      });
-      if (globals.skipAnimation) {
-        raf.batchedUpdates(() => this.advance());
-        becomeIdle(this);
-      } else {
-        frameLoop.start(this);
-      }
-    }
-  }
-  _attach() {
-    let priority2 = 1;
-    each(toArray(this.source), (source) => {
-      if (hasFluidValue(source)) {
-        addFluidObserver(source, this);
-      }
-      if (isFrameValue(source)) {
-        if (!source.idle) {
-          this._active.add(source);
-        }
-        priority2 = Math.max(priority2, source.priority + 1);
-      }
-    });
-    this.priority = priority2;
-    this._start();
-  }
-  _detach() {
-    each(toArray(this.source), (source) => {
-      if (hasFluidValue(source)) {
-        removeFluidObserver(source, this);
-      }
-    });
-    this._active.clear();
-    becomeIdle(this);
-  }
-  eventObserved(event) {
-    if (event.type == "change") {
-      if (event.idle) {
-        this.advance();
-      } else {
-        this._active.add(event.parent);
-        this._start();
-      }
-    } else if (event.type == "idle") {
-      this._active.delete(event.parent);
-    } else if (event.type == "priority") {
-      this.priority = toArray(this.source).reduce((highest, parent) => Math.max(highest, (isFrameValue(parent) ? parent.priority : 0) + 1), 0);
-    }
-  }
-}
-function isIdle(source) {
-  return source.idle !== false;
-}
-function checkIdle(active) {
-  return !active.size || Array.from(active).every(isIdle);
-}
-function becomeIdle(self) {
-  if (!self.idle) {
-    self.idle = true;
-    each(getPayload(self), (node) => {
-      node.done = true;
-    });
-    callFluidObservers(self, {
-      type: "idle",
-      parent: self
-    });
-  }
-}
-globals.assign({
-  createStringInterpolator,
-  to: (source, args) => new Interpolation(source, args)
-});
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null)
-    return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0)
-      continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-const _excluded$2 = ["style", "children", "scrollTop", "scrollLeft"];
-const isCustomPropRE = /^--/;
-function dangerousStyleValue(name, value) {
-  if (value == null || typeof value === "boolean" || value === "")
-    return "";
-  if (typeof value === "number" && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name]))
-    return value + "px";
-  return ("" + value).trim();
-}
-const attributeCache = {};
-function applyAnimatedValues(instance, props) {
-  if (!instance.nodeType || !instance.setAttribute) {
-    return false;
-  }
-  const isFilterElement = instance.nodeName === "filter" || instance.parentNode && instance.parentNode.nodeName === "filter";
-  const _ref = props, {
-    style,
-    children,
-    scrollTop,
-    scrollLeft
-  } = _ref, attributes = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  const values = Object.values(attributes);
-  const names = Object.keys(attributes).map((name) => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, (n) => "-" + n.toLowerCase())));
-  if (children !== void 0) {
-    instance.textContent = children;
-  }
-  for (let name in style) {
-    if (style.hasOwnProperty(name)) {
-      const value = dangerousStyleValue(name, style[name]);
-      if (isCustomPropRE.test(name)) {
-        instance.style.setProperty(name, value);
-      } else {
-        instance.style[name] = value;
-      }
-    }
-  }
-  names.forEach((name, i) => {
-    instance.setAttribute(name, values[i]);
-  });
-  if (scrollTop !== void 0) {
-    instance.scrollTop = scrollTop;
-  }
-  if (scrollLeft !== void 0) {
-    instance.scrollLeft = scrollLeft;
-  }
-}
-let isUnitlessNumber = {
-  animationIterationCount: true,
-  borderImageOutset: true,
-  borderImageSlice: true,
-  borderImageWidth: true,
-  boxFlex: true,
-  boxFlexGroup: true,
-  boxOrdinalGroup: true,
-  columnCount: true,
-  columns: true,
-  flex: true,
-  flexGrow: true,
-  flexPositive: true,
-  flexShrink: true,
-  flexNegative: true,
-  flexOrder: true,
-  gridRow: true,
-  gridRowEnd: true,
-  gridRowSpan: true,
-  gridRowStart: true,
-  gridColumn: true,
-  gridColumnEnd: true,
-  gridColumnSpan: true,
-  gridColumnStart: true,
-  fontWeight: true,
-  lineClamp: true,
-  lineHeight: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  tabSize: true,
-  widows: true,
-  zIndex: true,
-  zoom: true,
-  fillOpacity: true,
-  floodOpacity: true,
-  stopOpacity: true,
-  strokeDasharray: true,
-  strokeDashoffset: true,
-  strokeMiterlimit: true,
-  strokeOpacity: true,
-  strokeWidth: true
-};
-const prefixKey = (prefix2, key) => prefix2 + key.charAt(0).toUpperCase() + key.substring(1);
-const prefixes = ["Webkit", "Ms", "Moz", "O"];
-isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
-  prefixes.forEach((prefix2) => acc[prefixKey(prefix2, prop)] = acc[prop]);
-  return acc;
-}, isUnitlessNumber);
-const _excluded$1 = ["x", "y", "z"];
-const domTransforms = /^(matrix|translate|scale|rotate|skew)/;
-const pxTransforms = /^(translate)/;
-const degTransforms = /^(rotate|skew)/;
-const addUnit = (value, unit) => is.num(value) && value !== 0 ? value + unit : value;
-const isValueIdentity = (value, id) => is.arr(value) ? value.every((v) => isValueIdentity(v, id)) : is.num(value) ? value === id : parseFloat(value) === id;
-class AnimatedStyle extends AnimatedObject {
-  constructor(_ref) {
-    let {
-      x,
-      y,
-      z
-    } = _ref, style = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-    const inputs = [];
-    const transforms = [];
-    if (x || y || z) {
-      inputs.push([x || 0, y || 0, z || 0]);
-      transforms.push((xyz) => [`translate3d(${xyz.map((v) => addUnit(v, "px")).join(",")})`, isValueIdentity(xyz, 0)]);
-    }
-    eachProp(style, (value, key) => {
-      if (key === "transform") {
-        inputs.push([value || ""]);
-        transforms.push((transform) => [transform, transform === ""]);
-      } else if (domTransforms.test(key)) {
-        delete style[key];
-        if (is.und(value))
-          return;
-        const unit = pxTransforms.test(key) ? "px" : degTransforms.test(key) ? "deg" : "";
-        inputs.push(toArray(value));
-        transforms.push(key === "rotate3d" ? ([x2, y2, z2, deg]) => [`rotate3d(${x2},${y2},${z2},${addUnit(deg, unit)})`, isValueIdentity(deg, 0)] : (input) => [`${key}(${input.map((v) => addUnit(v, unit)).join(",")})`, isValueIdentity(input, key.startsWith("scale") ? 1 : 0)]);
-      }
-    });
-    if (inputs.length) {
-      style.transform = new FluidTransform(inputs, transforms);
-    }
-    super(style);
-  }
-}
-class FluidTransform extends FluidValue {
-  constructor(inputs, transforms) {
-    super();
-    this._value = null;
-    this.inputs = inputs;
-    this.transforms = transforms;
-  }
-  get() {
-    return this._value || (this._value = this._get());
-  }
-  _get() {
-    let transform = "";
-    let identity = true;
-    each(this.inputs, (input, i) => {
-      const arg1 = getFluidValue(input[0]);
-      const [t, id] = this.transforms[i](is.arr(arg1) ? arg1 : input.map(getFluidValue));
-      transform += " " + t;
-      identity = identity && id;
-    });
-    return identity ? "none" : transform;
-  }
-  observerAdded(count) {
-    if (count == 1)
-      each(this.inputs, (input) => each(input, (value) => hasFluidValue(value) && addFluidObserver(value, this)));
-  }
-  observerRemoved(count) {
-    if (count == 0)
-      each(this.inputs, (input) => each(input, (value) => hasFluidValue(value) && removeFluidObserver(value, this)));
-  }
-  eventObserved(event) {
-    if (event.type == "change") {
-      this._value = null;
-    }
-    callFluidObservers(this, event);
-  }
-}
-const primitives = ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "foreignObject", "g", "image", "line", "linearGradient", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "text", "tspan"];
-const _excluded = ["scrollTop", "scrollLeft"];
-globals.assign({
-  batchedUpdates: unstable_batchedUpdates,
-  createStringInterpolator,
-  colors
-});
-const host = createHost(primitives, {
-  applyAnimatedValues,
-  createAnimatedStyle: (style) => new AnimatedStyle(style),
-  getComponentProps: (_ref) => {
-    let props = _objectWithoutPropertiesLoose(_ref, _excluded);
-    return props;
-  }
-});
-const animated = host.animated;
 function PdaActionSheet(props) {
-  const { className, visible, actions } = props;
-  const [active, setActive] = useState(visible);
-  const ref = useRef(null);
-  const { percent } = useSpring({
-    percent: visible ? 0 : 100,
-    config: {
-      precision: 0.1,
-      mass: 0.4,
-      tension: 300,
-      friction: 30
-    },
-    onStart: () => {
-      setActive(true);
-    },
-    onRest: () => {
-      setActive(props.visible);
-    }
-  });
-  return /* @__PURE__ */ React__default.createElement("div", {
-    className: classNames({ [className]: true, "pda-action-sheet": true }),
-    style: { display: active ? "unset" : "none" }
-  }, /* @__PURE__ */ React__default.createElement(animated.div, {
-    className: "pda-action-sheet-body",
-    style: {
-      transform: percent.to((v) => {
-        return `translate(0, ${v}%)`;
-      })
-    },
-    ref
+  const { className = "", visible, actions } = props;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classNames({ [className]: true, "pda-action-sheet": true, "show": visible })
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "pda-action-sheet-body"
   }, actions.map((item, index2) => {
-    return /* @__PURE__ */ React__default.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       onClick: () => {
         item.onClick(item.key);
       },
@@ -4676,4 +1870,5 @@ function PdaActionSheet(props) {
     }, item.title);
   })));
 }
-export { PdaActionSheet as ActionSheet, BaseLayout, Button, Confirm$1 as Confirm, PdaDistanceCard as DistanceCard, PdaFinishCard as FinishCard, index$i as Header, InfiniteScroll, PdaInfoCard$2 as InfoCard, List, PdaListItem as ListItem, Overlay, index$b as PageFlowSystemPages, Presentation, PdaInfoCard as Steps, SubCard, PdaTitle as Title, Confirm as Toast, WakeKeyborard };
+const ListItem = PdaListItem;
+export { PdaActionSheet as ActionSheet, index$2 as AppList, BaseLayout, Button, Confirm, PdaDistanceCard as DistanceCard, PdaFinishCard as FinishCard, index$k as Header, InfiniteScroll, PdaInfoCard$2 as InfoCard, List, ListItem, Overlay, index$d as PageFlowSystemPages, Presentation, PdaInfoCard as Steps, SubCard, PdaListItem as TaskCard, PdaTitle as Title, Toast, WakeKeyborard };