@abtnode/ux 1.8.0 → 1.8.3

package/lib/lost-passport.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -49,11 +49,11 @@ var _wrapLocale = _interopRequireDefault(require("./wrap-locale"));
 
 var _usePassportId = _interopRequireDefault(require("./hooks/use-passport-id"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _jsxRuntime = require("react/jsx-runtime");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable react/no-unstable-nested-components */
 
 /* eslint-disable react/jsx-one-expression-per-line */
 // eslint-disable-next-line react/prop-types
@@ -64,13 +64,13 @@ function ColorStepIcon(_ref) {
     completed
   } = _ref;
   const icons = {
-    1: /*#__PURE__*/_react.default.createElement(_ViewList.default, {
+    1: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewList.default, {
       className: "step-icon"
     }),
-    2: /*#__PURE__*/_react.default.createElement(_GetApp.default, {
+    2: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GetApp.default, {
       className: "step-icon"
     }),
-    3: /*#__PURE__*/_react.default.createElement(_Done.default, {
+    3: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Done.default, {
       className: "step-icon"
     })
   };
@@ -84,9 +84,10 @@ function ColorStepIcon(_ref) {
     classNames.push('step-icon-w--completed');
   }
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: classNames.join(' ')
-  }, icons[String(icon)]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classNames.join(' '),
+    children: icons[String(icon)]
+  });
 } // eslint-disable-next-line react/prop-types
 
 
@@ -170,7 +171,7 @@ function LostPassport(_ref2) {
     label: t('lostPassport.selectPassport'),
     content: () => {
       if (!user) {
-        return /*#__PURE__*/_react.default.createElement(_Connect.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
           popup: true,
           open: true,
           hideCloseButton: true,
@@ -190,58 +191,70 @@ function LostPassport(_ref2) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_Box.default, {
-        className: "select-passport"
-      }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-        my: 1,
-        display: "flex",
-        alignItems: "center",
-        className: "user-info"
-      }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
-        src: user.avatar,
-        style: {
-          width: 48,
-          height: 48,
-          backgroundColor: 'transparent',
-          marginRight: 16
-        }
-      }), /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_Box.default, {
-        className: "name"
-      }, user.fullName), /*#__PURE__*/_react.default.createElement(_Box.default, {
-        className: "did",
-        mt: 1
-      }, /*#__PURE__*/_react.default.createElement(_Address.default, null, user.did)))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_cardSelector.default, {
-        width: 230,
-        height: 306,
-        cardSpace: 24,
-        list: user.passportTypes.map(x => {
-          return {
-            src: createPassportSvg({
-              title: x.title,
-              issuer: x.issuer.name,
-              issuerDid: x.issuer.id,
-              ownerName: user.fullName,
-              ownerAvatarUrl: user.avatar,
-              isDataUrl: true,
-              preferredColor: passportColor || 'auto'
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        className: "select-passport",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          my: 1,
+          display: "flex",
+          alignItems: "center",
+          className: "user-info",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+            src: user.avatar,
+            style: {
+              width: 48,
+              height: 48,
+              backgroundColor: 'transparent',
+              marginRight: 16
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "name",
+              children: user.fullName
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "did",
+              mt: 1,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                children: user.did
+              })
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cardSelector.default, {
+            width: 230,
+            height: 306,
+            cardSpace: 24,
+            list: user.passportTypes.map(x => {
+              return {
+                src: createPassportSvg({
+                  title: x.title,
+                  issuer: x.issuer.name,
+                  issuerDid: x.issuer.id,
+                  ownerName: user.fullName,
+                  ownerAvatarUrl: user.avatar,
+                  isDataUrl: true,
+                  preferredColor: passportColor || 'auto'
+                }),
+                name: x.title
+              };
             }),
-            name: x.title
-          };
-        }),
-        onSelect: index => handleChange({
-          target: {
-            value: user.passportTypes[index].name
-          }
-        }),
-        defaultIndex: 0
-      })), /*#__PURE__*/_react.default.createElement(_Box.default, {
-        textAlign: "center"
-      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-        variant: "contained",
-        color: "primary",
-        onClick: () => onSelectPassport(),
-        disabled: !passport
-      }, t('common.next'))));
+            onSelect: index => handleChange({
+              target: {
+                value: user.passportTypes[index].name
+              }
+            }),
+            defaultIndex: 0
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          textAlign: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+            variant: "contained",
+            color: "primary",
+            onClick: () => onSelectPassport(),
+            disabled: !passport,
+            children: t('common.next')
+          })
+        })]
+      });
     }
   }, {
     label: t('lostPassport.receivePassport'),
@@ -250,7 +263,7 @@ function LostPassport(_ref2) {
         receiverDid: user.did,
         passportName: passport
       };
-      return /*#__PURE__*/_react.default.createElement(_Connect.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
         popup: true,
         open: true,
         hideCloseButton: true,
@@ -272,54 +285,66 @@ function LostPassport(_ref2) {
     }
   }, {
     label: t('common.complete'),
-    content: () => /*#__PURE__*/_react.default.createElement(_Box.default, {
-      textAlign: "center"
-    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-      mb: 3,
-      color: "success.main"
-    }, /*#__PURE__*/_react.default.createElement(_CheckCircle.default, {
-      style: {
-        fontSize: 60
-      }
-    })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      component: "p",
-      variant: "body1",
-      className: "subheader"
-    }, t('issuePassport.dialog.success')), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      style: {
-        marginTop: 40
-      },
-      variant: "contained",
-      color: "primary",
-      onClick: onUsePassport
-    }, t('issuePassport.dialog.loginWithPassport')))
+    content: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      textAlign: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        mb: 3,
+        color: "success.main",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircle.default, {
+          style: {
+            fontSize: 60
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        component: "p",
+        variant: "body1",
+        className: "subheader",
+        children: t('issuePassport.dialog.success')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        style: {
+          marginTop: 40
+        },
+        variant: "contained",
+        color: "primary",
+        onClick: onUsePassport,
+        children: t('issuePassport.dialog.loginWithPassport')
+      })]
+    })
   }];
-  return /*#__PURE__*/_react.default.createElement(Div, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "stepper"
-  }, /*#__PURE__*/_react.default.createElement(_Stepper.default, {
-    className: "stepper-progress",
-    alternativeLabel: true,
-    activeStep: activeStep
-  }, steps.map(_ref3 => {
-    let {
-      label
-    } = _ref3;
-    return /*#__PURE__*/_react.default.createElement(_Step.default, {
-      key: label
-    }, /*#__PURE__*/_react.default.createElement(_StepLabel.default, {
-      StepIconComponent: ColorStepIcon
-    }, label));
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "stepper-content"
-  }, steps[activeStep].content()), !success && /*#__PURE__*/_react.default.createElement(_Box.default, {
-    textAlign: "center",
-    fontSize: 12
-  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
-    to: "/",
-    style: {
-      color: '#4598FA'
-    }
-  }, t('lostPassport.return')))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "stepper",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Stepper.default, {
+        className: "stepper-progress",
+        alternativeLabel: true,
+        activeStep: activeStep,
+        children: steps.map(_ref3 => {
+          let {
+            label
+          } = _ref3;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLabel.default, {
+              StepIconComponent: ColorStepIcon,
+              children: label
+            })
+          }, label);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "stepper-content",
+        children: steps[activeStep].content()
+      }), !success && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        textAlign: "center",
+        fontSize: 12,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+          to: "/",
+          style: {
+            color: '#4598FA'
+          },
+          children: t('lostPassport.return')
+        })
+      })]
+    })
+  });
 }
 
 const Div = (0, _styledComponents.default)(_Container.default).withConfig({

package/lib/nav-logo.js

@@ -5,17 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = LogoContainer;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["logo", "name", "subname", "previousData"],
       _excluded2 = ["logo"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 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; }
@@ -29,56 +35,72 @@ function LogoContainer(_ref) {
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  let logoEle = /*#__PURE__*/_react.default.createElement(LogoImg, {
+  let logoEle = /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImg, {
     logo: logo
   });
-
   let nameEle = name;
   let subnameEle = subname;
 
   if (previousData.logo) {
-    logoEle = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LogoImg, {
-      logo: logo,
-      className: "left-fade-in-ele"
-    }), /*#__PURE__*/_react.default.createElement(LogoImg, {
-      logo: previousData.logo,
-      className: "postion-abs left-fade-out-ele"
-    }));
+    logoEle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImg, {
+        logo: logo,
+        className: "left-fade-in-ele"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImg, {
+        logo: previousData.logo,
+        className: "postion-abs left-fade-out-ele"
+      })]
+    });
   }
 
   if (previousData.name && previousData.name !== name) {
-    nameEle = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      className: "right-fade-in-ele",
-      style: {
-        display: 'inline-block'
-      }
-    }, name), /*#__PURE__*/_react.default.createElement("span", {
-      className: "postion-abs right-fade-out-ele"
-    }, previousData.name));
+    nameEle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "right-fade-in-ele",
+        style: {
+          display: 'inline-block'
+        },
+        children: name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "postion-abs right-fade-out-ele",
+        children: previousData.name
+      })]
+    });
   }
 
   if (previousData.subname && previousData.subname !== subname) {
-    subnameEle = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      className: "right-fade-in-ele",
-      style: {
-        display: 'inline-block'
-      }
-    }, subname), /*#__PURE__*/_react.default.createElement("span", {
-      className: "postion-abs right-fade-out-ele"
-    }, previousData.subname));
+    subnameEle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "right-fade-in-ele",
+        style: {
+          display: 'inline-block'
+        },
+        children: subname
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "postion-abs right-fade-out-ele",
+        children: previousData.subname
+      })]
+    });
   }
 
-  return /*#__PURE__*/_react.default.createElement(Container, rest, /*#__PURE__*/_react.default.createElement("div", {
-    className: "logo-inner"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "logo-img-content"
-  }, logoEle), /*#__PURE__*/_react.default.createElement("div", {
-    className: "logo-info ".concat(!name && !subname ? 'zero-left' : '')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "logo-name"
-  }, nameEle), /*#__PURE__*/_react.default.createElement("div", {
-    className: "logo-subname"
-  }, subnameEle))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({}, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "logo-inner",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "logo-img-content",
+        children: logoEle
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "logo-info ".concat(!name && !subname ? 'zero-left' : ''),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "logo-name",
+          children: nameEle
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "logo-subname",
+          children: subnameEle
+        })]
+      })]
+    })
+  }));
 }
 
 LogoContainer.propTypes = {
@@ -103,7 +125,9 @@ function LogoImg(_ref2) {
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded2);
 
-  return /*#__PURE__*/_react.default.createElement(LogoImgDiv, rest, logo);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LogoImgDiv, _objectSpread(_objectSpread({}, rest), {}, {
+    children: logo
+  }));
 }
 
 const LogoImgDiv = _styledComponents.default.div.withConfig({

package/lib/schema-form/color-input.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = ColorInput;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 
@@ -13,15 +13,11 @@ var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
 
 var _reactColor = require("react-color");
 
-var _context = require("@arcblock/ux/lib/Locale/context");
-
 var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _jsxRuntime = require("react/jsx-runtime");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function ColorInput(_ref) {
   let {
@@ -29,9 +25,6 @@ function ColorInput(_ref) {
     value,
     onChange
   } = _ref;
-  const {
-    t
-  } = (0, _context.useLocaleContext)();
   const [open, setOpen] = (0, _react.useState)(false);
   const colorElm = (0, _react.useRef)();
   const colorValue = (0, _react.useRef)(value); // auto open color picker when editing, should wait the useRef to be ready
@@ -60,62 +53,65 @@ function ColorInput(_ref) {
     onChange(colorValue.current);
   };
 
-  const ReadView = /*#__PURE__*/_react.default.createElement(_Box.default, {
+  const ReadView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
     className: "form-item-input slot",
-    px: 1
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    display: "flex",
-    alignItems: "center"
-  }, value, value !== 'auto' && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      marginLeft: 4,
-      backgroundColor: value,
-      width: '1em',
-      height: '1em',
-      borderRadius: '0.2em'
-    }
-  })));
-
-  const EditView = /*#__PURE__*/_react.default.createElement(_Box.default, {
+    px: 1,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      display: "flex",
+      alignItems: "center",
+      children: [value, value !== 'auto' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginLeft: 4,
+          backgroundColor: value,
+          width: '1em',
+          height: '1em',
+          borderRadius: '0.2em'
+        }
+      })]
+    })
+  });
+  const EditView = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
     display: "flex",
     flexGrow: 1,
     alignItems: "center",
     height: "40px",
-    onKeyDown: handleEnterKeyDown
-  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
-    display: "flex",
-    alignItems: "center",
-    onClick: () => setOpen(true)
-  }, t('config.customColor'), /*#__PURE__*/_react.default.createElement("div", {
-    ref: colorElm,
-    style: {
-      flexShrink: 0,
-      marginLeft: '8px',
-      backgroundColor: value,
-      width: '32px',
-      height: '32px',
-      boxSizing: 'border-box',
-      borderRadius: '8px',
-      border: '1px solid #eee',
-      cursor: value === 'auto' ? 'default' : 'pointer'
-    }
-  })), /*#__PURE__*/_react.default.createElement(_Popover.default, {
-    open: open,
-    anchorEl: colorElm.current,
-    onClose: () => setOpen(false),
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'center'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'center'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
-    color: value,
-    onChange: c => onColorChange(c.hex)
-  })));
-
+    onKeyDown: handleEnterKeyDown,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      display: "flex",
+      alignItems: "center",
+      onClick: () => setOpen(true),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: colorElm,
+        style: {
+          flexShrink: 0,
+          marginLeft: '8px',
+          backgroundColor: value,
+          width: '32px',
+          height: '32px',
+          boxSizing: 'border-box',
+          borderRadius: '8px',
+          border: '1px solid #eee',
+          cursor: value === 'auto' ? 'default' : 'pointer'
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+      open: open,
+      anchorEl: colorElm.current,
+      onClose: () => setOpen(false),
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColor.ChromePicker, {
+        color: value,
+        onChange: c => onColorChange(c.hex)
+      })
+    })]
+  });
   return editing ? EditView : ReadView;
 }