@cashub/ui 0.5.0 → 0.6.1

package/iconbox/ApplicationIconBox.js

@@ -19,15 +19,15 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var ApplicationIconBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-bottom: var(--spacing);\n\n  ", ";\n"])), function (_ref) {
   var clickable = _ref.clickable;
-  return clickable && "cursor: pointer";
+  return clickable && 'cursor: pointer';
 });
 
 var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--spacing-xs);\n  border: var(--border-width) solid transparent;\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref2) {
   var horizontal = _ref2.horizontal;
-  return horizontal && "flex-direction: row;";
+  return horizontal && 'flex-direction: row;';
 }, function (_ref3) {
   var alignCenter = _ref3.alignCenter;
-  return alignCenter && "text-align: center;";
+  return alignCenter && 'text-align: center;';
 }, function (_ref4) {
   var selected = _ref4.selected;
   return selected && "\n      border-color: var(--border-color);\n      border-radius: var(--border-radius);\n      box-shadow: var(--box-shadow);\n    ";
@@ -35,17 +35,17 @@ var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 =
 
 var Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 0;\n"])));
 
-var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: var(--font-bold);\n  font-size: var(--font-body1);\n  margin-bottom: var(--spacing-xs);\n  color: var(--font-on-background);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  a {\n    color: var(--font-on-background);\n  }\n"])));
+var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: var(--font-bold);\n  font-size: var(--font-body1);\n  margin-bottom: var(--spacing-xs);\n  color: var(--font-on-background);\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n\n  a {\n    color: var(--font-on-background);\n  }\n"])));
 
-var Content = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: var(--font-body1);\n  color: var(--font-on-mute);\n  margin-bottom: var(--spacing-xs);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
+var Content = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: var(--font-body1);\n  color: var(--font-on-mute);\n  margin-bottom: var(--spacing-xs);\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n"])));
 
 var _default = Object.assign(ApplicationIconBox, {
   Body: Body,
-  Figure: _IconBoxFigure.default,
-  Image: _IconBoxImage.default,
   Description: Description,
   Title: Title,
-  Content: Content
+  Content: Content,
+  Figure: _IconBoxFigure.default,
+  Image: _IconBoxImage.default
 });
 
 exports.default = _default;

package/iconbox/IconBoxFigure.js

@@ -15,22 +15,22 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var IconBoxFigure = _styledComponents.default.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 120px;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n"])), function (_ref) {
   var marginRight = _ref.marginRight;
-  return marginRight && "margin-right: var(--spacing);";
+  return marginRight && 'margin-right: var(--spacing);';
 }, function (_ref2) {
   var paddingRight = _ref2.paddingRight;
-  return paddingRight && "padding-right: var(--spacing);";
+  return paddingRight && 'padding-right: var(--spacing);';
 }, function (_ref3) {
   var paddingRightS = _ref3.paddingRightS;
-  return paddingRightS && "padding-right: var(--spacing-s);";
+  return paddingRightS && 'padding-right: var(--spacing-s);';
 }, function (_ref4) {
   var paddingBottomS = _ref4.paddingBottomS;
-  return paddingBottomS && "padding-bottom: var(--spacing-s);";
+  return paddingBottomS && 'padding-bottom: var(--spacing-s);';
 }, function (_ref5) {
   var sizeS = _ref5.sizeS;
-  return sizeS && "flex-basis: 80px;";
+  return sizeS && 'flex-basis: 80px;';
 }, function (_ref6) {
   var sizeXS = _ref6.sizeXS;
-  return sizeXS && "flex-basis: 40px;";
+  return sizeXS && 'flex-basis: 40px;';
 });
 
 var _default = IconBoxFigure;

package/iconbox/IconBoxImage.js

@@ -15,11 +15,11 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var IconBoxImage = _styledComponents.default.img.attrs(function () {
   return {
-    crossOrigin: "anonymous"
+    crossOrigin: 'anonymous'
   };
 })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 120px;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var rounded = _ref.rounded;
-  return rounded && "border-radius: var(--border-radius);";
+  return rounded && 'border-radius: var(--border-radius);';
 }, function (_ref2) {
   var sizeS = _ref2.sizeS;
   return sizeS && "\n      width: 80px;\n      height: 80px;\n    ";

package/iconbox/IconBoxV2.js

@@ -19,7 +19,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var IconBoxV2 = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: var(--spacing);\n  margin-bottom: var(--spacing);\n  background: var(--color-background1);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n  color: var(--font-on-background);\n\n  ", "\n"])), function (_ref) {
   var fullHeight = _ref.fullHeight;
-  return fullHeight && "height: calc(100% - var(--spacing));";
+  return fullHeight && 'height: calc(100% - var(--spacing));';
 });
 
 var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
@@ -32,11 +32,11 @@ var Tool = _styledComponents.default.div(_templateObject5 || (_templateObject5 =
 
 var _default = Object.assign(IconBoxV2, {
   Body: Body,
-  Figure: _IconBoxFigure.default,
-  Image: _IconBoxImage.default,
   Description: Description,
   Info: Info,
-  Tool: Tool
+  Tool: Tool,
+  Figure: _IconBoxFigure.default,
+  Image: _IconBoxImage.default
 });
 
 exports.default = _default;

package/image/UploadImage.js

@@ -71,7 +71,7 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _useTranslation = (0, _reactI18next.useTranslation)(),
       t = _useTranslation.t;
 
-  var handleAvatarRemove = function handleAvatarRemove(e) {
+  var handleAvatarRemove = function handleAvatarRemove() {
     setCurrentSrc(src);
     ref.current.value = '';
     setCurrentFile(null);
@@ -94,7 +94,7 @@ var UploadImage = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var handleOnChange = function handleOnChange(files) {
     if (files.length === 0) {
-      //沒有傳檔案(叉叉或取消)
+      // close file selector or cancel upload file need to restore to last uploaded file
       restoreFile();
     } else {
       var fileType = files[0].name.slice(files[0].name.lastIndexOf('.')).toLowerCase();

package/index.js

@@ -17,6 +17,19 @@ Object.keys(_animate).forEach(function (key) {
   });
 });
 
+var _backdrop = require("./backdrop");
+
+Object.keys(_backdrop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _backdrop[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _backdrop[key];
+    }
+  });
+});
+
 var _badge = require("./badge");
 
 Object.keys(_badge).forEach(function (key) {

package/jsoneditor/JsonEditor.js

@@ -47,7 +47,7 @@ var JsonEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   });
 });
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .jsoneditor {\n    border: 0;\n\n    div.jsoneditor-tree {\n      background: transparent;\n    }\n  }\n\n  div.jsoneditor td.jsoneditor-tree {\n    vertical-align: middle;\n  }\n\n  .jsoneditor-popover,\n  .jsoneditor-schema-error,\n  div.jsoneditor td,\n  div.jsoneditor textarea,\n  div.jsoneditor th,\n  div.jsoneditor-field,\n  div.jsoneditor-value,\n  pre.jsoneditor-preview {\n    font-size: var(--font-body1);\n    color: var(--font-on-background);\n  }\n\n  div {\n    &.jsoneditor-readonly {\n      color: var(--font-on-background);\n    }\n\n    &.jsoneditor-value.jsoneditor-number {\n      color: var(--color-danger);\n    }\n\n    &.jsoneditor-field.jsoneditor-empty::after,\n    &.jsoneditor-value.jsoneditor-empty::after {\n      font-size: var(--font-body1);\n      color: var(--font-on-background);\n    }\n\n    &.jsoneditor-field[contenteditable=\"true\"]:focus,\n    &.jsoneditor-field[contenteditable=\"true\"]:hover,\n    &.jsoneditor-value[contenteditable=\"true\"]:focus,\n    &.jsoneditor-value[contenteditable=\"true\"]:hover,\n    &.jsoneditor-field.jsoneditor-highlight,\n    &.jsoneditor-value.jsoneditor-highlight {\n      background-color: transparent;\n      border: var(--border-width) solid var(--border-color);\n    }\n\n    &.jsoneditor-empty {\n      border-color: transparent;\n      border-style: none;\n    }\n\n    &.jsoneditor-tree button.jsoneditor-button {\n      filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(78deg)\n        brightness(104%) contrast(101%);\n    }\n\n    &.jsoneditor-tree button.jsoneditor-button:focus {\n      background-color: transparent;\n    }\n  }\n\n  // ace editor\n  .ace_editor.ace-jsoneditor {\n    border-radius: 8px;\n  }\n\n  .ace_gutter {\n    background: rgb(59, 57, 87) !important;\n    color: #ffffff !important;\n    z-index: 0;\n  }\n\n  .ace-jsoneditor .ace_gutter-active-line {\n    background: #00001d;\n  }\n\n  .ace_content {\n    background: rgb(76, 72, 110);\n    z-index: 0;\n  }\n\n  .ace-jsoneditor .ace_marker-layer .ace_active-line {\n    background: #00001d;\n  }\n\n  .ace-jsoneditor .ace_text-layer {\n    color: #fff;\n  }\n\n  .ace-jsoneditor .ace_variable {\n    color: #fff;\n  }\n\n  .ace-jsoneditor .ace_string {\n    color: #11d8cd;\n  }\n\n  .ace-jsoneditor .ace_cursor {\n    border-left: 2px solid #fff;\n  }\n\n  .ace_hidden-cursors .ace_cursor {\n    opacity: 0.5;\n  }\n"])));
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .jsoneditor {\n    border: 0;\n\n    div.jsoneditor-tree {\n      background: transparent;\n    }\n  }\n\n  div.jsoneditor td.jsoneditor-tree {\n    vertical-align: middle;\n  }\n\n  .jsoneditor-popover,\n  .jsoneditor-schema-error,\n  div.jsoneditor td,\n  div.jsoneditor textarea,\n  div.jsoneditor th,\n  div.jsoneditor-field,\n  div.jsoneditor-value,\n  pre.jsoneditor-preview {\n    font-size: var(--font-body1);\n    color: var(--font-on-background);\n  }\n\n  div {\n    &.jsoneditor-readonly {\n      color: var(--font-on-background);\n    }\n\n    &.jsoneditor-value.jsoneditor-number {\n      color: var(--color-danger);\n    }\n\n    &.jsoneditor-field.jsoneditor-empty::after,\n    &.jsoneditor-value.jsoneditor-empty::after {\n      font-size: var(--font-body1);\n      color: var(--font-on-background);\n    }\n\n    &.jsoneditor-field[contenteditable='true']:focus,\n    &.jsoneditor-field[contenteditable='true']:hover,\n    &.jsoneditor-value[contenteditable='true']:focus,\n    &.jsoneditor-value[contenteditable='true']:hover,\n    &.jsoneditor-field.jsoneditor-highlight,\n    &.jsoneditor-value.jsoneditor-highlight {\n      background-color: transparent;\n      border: var(--border-width) solid var(--border-color);\n    }\n\n    &.jsoneditor-empty {\n      border-color: transparent;\n      border-style: none;\n    }\n\n    &.jsoneditor-tree button.jsoneditor-button {\n      filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(78deg)\n        brightness(104%) contrast(101%);\n    }\n\n    &.jsoneditor-tree button.jsoneditor-button:focus {\n      background-color: transparent;\n    }\n  }\n\n  // ace editor\n  .ace_editor.ace-jsoneditor {\n    border-radius: 8px;\n  }\n\n  .ace_gutter {\n    background: rgb(59, 57, 87) !important;\n    color: #ffffff !important;\n    z-index: 0;\n  }\n\n  .ace-jsoneditor .ace_gutter-active-line {\n    background: #00001d;\n  }\n\n  .ace_content {\n    background: rgb(76, 72, 110);\n    z-index: 0;\n  }\n\n  .ace-jsoneditor .ace_marker-layer .ace_active-line {\n    background: #00001d;\n  }\n\n  .ace-jsoneditor .ace_text-layer {\n    color: #fff;\n  }\n\n  .ace-jsoneditor .ace_variable {\n    color: #fff;\n  }\n\n  .ace-jsoneditor .ace_string {\n    color: #11d8cd;\n  }\n\n  .ace-jsoneditor .ace_cursor {\n    border-left: 2px solid #fff;\n  }\n\n  .ace_hidden-cursors .ace_cursor {\n    opacity: 0.5;\n  }\n"])));
 
 var _default = JsonEditor;
 exports.default = _default;

package/layout/Backdrop.js

@@ -19,7 +19,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var Backdrop = (0, _styledComponents.default)(_BaseBackdrop.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: hidden;\n\n  ", "\n"])), _media.default.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    visibility: ", ";\n  "])), function (_ref) {
   var $display = _ref.$display;
-  return $display === true ? "visible" : "hidden";
+  return $display === true ? 'visible' : 'hidden';
 }));
 var _default = Backdrop;
 exports.default = _default;

package/layout/MenuIcon.js

@@ -25,7 +25,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var MenuIcon = function MenuIcon(_ref) {
   var toggleSidebar = _ref.toggleSidebar;
-  console.log("toggleSidebar", toggleSidebar);
+  console.log('toggleSidebar', toggleSidebar);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
     onClick: toggleSidebar,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconFigure.default, {

package/link/LinkSpan.js

@@ -38,11 +38,11 @@ var LinkSpan = function LinkSpan(_ref) {
 
 var Link = _styledComponents.default.span.attrs(function (props) {
   return {
-    fontSize: props.fontSmall ? "1rem" : "9rem",
-    color: props.light ? "#fff" : "rgba(255, 255, 255, 0.5)",
-    borderColor: props.light ? "#e6e6e6" : "#3e5fff"
+    fontSize: props.fontSmall ? '1rem' : '9rem',
+    color: props.light ? '#fff' : 'rgba(255, 255, 255, 0.5)',
+    borderColor: props.light ? '#e6e6e6' : '#3e5fff'
   };
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: 500;\n  color: ", ";\n  cursor: pointer;\n  position: relative;\n  display: inline-block;\n\n  &:after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    bottom: 0;\n    top: 1rem;\n    left: 0;\n    width: 0%;\n    transition: width 0.3s ease;\n  }\n\n  &:hover {\n    &:after {\n      width: 100%;\n      border-bottom: 1px solid ", ";\n      opacity: 0.5;\n    }\n  }\n"])), function (_ref2) {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: 500;\n  color: ", ";\n  cursor: pointer;\n  position: relative;\n  display: inline-block;\n\n  &:after {\n    display: block;\n    content: '';\n    position: absolute;\n    bottom: 0;\n    top: 1rem;\n    left: 0;\n    width: 0%;\n    transition: width 0.3s ease;\n  }\n\n  &:hover {\n    &:after {\n      width: 100%;\n      border-bottom: 1px solid ", ";\n      opacity: 0.5;\n    }\n  }\n"])), function (_ref2) {
   var fontSize = _ref2.fontSize;
   return fontSize;
 }, function (_ref3) {

package/map/LeafletMap.js

@@ -88,7 +88,7 @@ var LeafletMap = function LeafletMap(_ref) {
     var markers = [];
 
     if (!position && !defaultPosition) {
-      handleError("NO_COORDINATES");
+      handleError('NO_COORDINATES');
       setHasError(true);
       return;
     }
@@ -167,16 +167,16 @@ var LeafletMap = function LeafletMap(_ref) {
         iconCreateFunction: function iconCreateFunction(cluster) {
           return _leaflet.default.divIcon({
             html: "<div><span>".concat(cluster.getChildCount(), "</span></div>"),
-            className: "marker-cluster",
+            className: 'marker-cluster',
             iconSize: _leaflet.default.point(40, 40)
           });
         },
         children: markers
       })]
     });
-  } else {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
   }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
 };
 
 var MapInteractor = function MapInteractor(_ref2) {

package/modal/StateModal.js

@@ -105,8 +105,8 @@ var ModalContent = function ModalContent(_ref2) {
   if (type === 'error') Icon = _fa.FaRegTimesCircle;
   if (type === 'warning') Icon = _bs.BsExclamationCircle;
 
-  var handleDismiss = function handleDismiss(e) {
-    if (e.target === refWrapper.current && allowDismiss === true) {
+  var handleDismiss = function handleDismiss(event) {
+    if (event.target === refWrapper.current && allowDismiss === true) {
       onClose();
     }
   };

package/modal/TitleModal.js

@@ -161,13 +161,13 @@ var ModalContent = function ModalContent(_ref2) {
     onClick: function onClick() {
       handleDismiss(true);
     },
-    onMouseDown: function onMouseDown(e) {
-      setClickTarget(e.target);
+    onMouseDown: function onMouseDown(event) {
+      setClickTarget(event.target);
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
       size: size,
-      onMouseDown: function onMouseDown(e) {
-        setClickTarget(e.target);
+      onMouseDown: function onMouseDown(event) {
+        setClickTarget(event.target);
       },
       children: child
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/paginate/Paginate.js

@@ -88,7 +88,7 @@ var Paginate = function Paginate(props) {
 
 var Container = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  text-align: center;\n\n  ", ";\n"])), function (_ref) {
   var alignRight = _ref.alignRight;
-  return alignRight && "justify-content: flex-end";
+  return alignRight && 'justify-content: flex-end';
 });
 
 var Link = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  line-height: 37px;\n  font-size: var(--font-body1);\n  color: var(--font-on-primary);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n  transition: 0.3s;\n\n  &:not(:last-child) {\n    margin-right: var(--spacing-xs);\n  }\n\n  ", ";\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n  &.paginationDots {\n    cursor: default;\n  }\n"])), function (_ref2) {

package/popover/Popover.js

@@ -59,7 +59,7 @@ var Popover = function Popover(_ref) {
   var id = _ref.id,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var rootElement = (0, _appendToBody.default)("PopoverContainer");
+  var rootElement = (0, _appendToBody.default)('PopoverContainer');
 
   var handleClose = function handleClose() {
     // unmount component and clear event handler and state before remove container
@@ -100,8 +100,8 @@ var Box = function Box(_ref2) {
       state = _useCustomPopper.state;
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
-    onOutsideClick: function onOutsideClick(e) {
-      if ("popover".concat(e.target.id) !== id) {
+    onOutsideClick: function onOutsideClick(event) {
+      if ("popover".concat(event.target.id) !== id) {
         handleClose();
       }
     },

package/ribbon/Ribbon.js

@@ -19,7 +19,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var Ribbon = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 120px;\n  position: absolute;\n  overflow: hidden;\n  top: -3px;\n  left: -3px;\n"])));
 
-var RibbonContent = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  text-transform: uppercase;\n  text-align: center;\n  display: block;\n  width: 200px;\n  transform: rotate(-45deg);\n  top: 25px;\n  right: -25px;\n  padding: 5px 0;\n\n  &::before,\n  &::after {\n    display: block;\n    content: \"\";\n    border: 1px solid rgba(255, 255, 255, 0.4);\n  }\n\n  ", "\n  ", "\n"])), _backgroundColor.default, _colorOnBackground.default);
+var RibbonContent = _styledComponents.default.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  text-transform: uppercase;\n  text-align: center;\n  display: block;\n  width: 200px;\n  transform: rotate(-45deg);\n  top: 25px;\n  right: -25px;\n  padding: 5px 0;\n\n  &::before,\n  &::after {\n    display: block;\n    content: '';\n    border: 1px solid rgba(255, 255, 255, 0.4);\n  }\n\n  ", "\n  ", "\n"])), _backgroundColor.default, _colorOnBackground.default);
 
 var _default = Object.assign(Ribbon, {
   Content: RibbonContent

package/section/Section.js

@@ -19,44 +19,47 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Section = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  color: var(--color-white);\n  padding: var(--spacing);\n  margin-bottom: var(--spacing);\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  \n  ", "\n"])), function (_ref) {
+var Section = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  color: var(--color-white);\n  padding: var(--spacing);\n  margin-bottom: var(--spacing);\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  \n  ", "\n"])), function (_ref) {
   var backgroundReverse = _ref.backgroundReverse;
-  return backgroundReverse && "background: var(--color-background2);";
+  return backgroundReverse && 'background: var(--color-background2);';
 }, function (_ref2) {
   var paddingS = _ref2.paddingS;
-  return paddingS && "padding: var(--spacing-s);";
+  return paddingS && 'padding: var(--spacing-s);';
 }, function (_ref3) {
-  var noPadding = _ref3.noPadding;
-  return noPadding && "padding: 0;";
+  var paddingXS = _ref3.paddingXS;
+  return paddingXS && 'padding: var(--spacing-xs);';
 }, function (_ref4) {
-  var noPaddingX = _ref4.noPaddingX;
-  return noPaddingX && "padding-left: 0; padding-right: 0;";
+  var noPadding = _ref4.noPadding;
+  return noPadding && 'padding: 0;';
 }, function (_ref5) {
-  var noPaddingTop = _ref5.noPaddingTop;
-  return noPaddingTop && "padding-top: 0;";
+  var noPaddingX = _ref5.noPaddingX;
+  return noPaddingX && 'padding-left: 0; padding-right: 0;';
 }, function (_ref6) {
-  var noPaddingBottom = _ref6.noPaddingBottom;
-  return noPaddingBottom && "padding-bottom: 0;";
+  var noPaddingTop = _ref6.noPaddingTop;
+  return noPaddingTop && 'padding-top: 0;';
 }, function (_ref7) {
-  var marginBottomS = _ref7.marginBottomS;
-  return marginBottomS && "margin-bottom: var(--spacing-s);";
+  var noPaddingBottom = _ref7.noPaddingBottom;
+  return noPaddingBottom && 'padding-bottom: 0;';
 }, function (_ref8) {
-  var noMarginBottom = _ref8.noMarginBottom;
-  return noMarginBottom && "margin-bottom: 0;";
+  var marginBottomS = _ref8.marginBottomS;
+  return marginBottomS && 'margin-bottom: var(--spacing-s);';
 }, function (_ref9) {
-  var fullHeight = _ref9.fullHeight;
-  return fullHeight && "height: calc(100% - var(--spacing));";
+  var noMarginBottom = _ref9.noMarginBottom;
+  return noMarginBottom && 'margin-bottom: 0;';
 }, function (_ref10) {
-  var backgroundMarker = _ref10.backgroundMarker;
-  return backgroundMarker && "\n      background-color: #222143;\n      background-image: url(".concat(_bgChartCircle.default, "), url(").concat(_bgChartTriangle.default, ");\n      background-repeat: no-repeat;\n      background-position: left top, right bottom;\n      background-size: 337px 312px, 166px 225px;\n    ");
+  var fullHeight = _ref10.fullHeight;
+  return fullHeight && 'height: calc(100% - var(--spacing));';
 }, function (_ref11) {
-  var backgroundMap = _ref11.backgroundMap;
-  return backgroundMap && "\n      background-color: #222143;\n      background-image: url(".concat(_map.default, ");\n      background-repeat: no-repeat;\n      background-size: cover;\n    ");
+  var backgroundMarker = _ref11.backgroundMarker;
+  return backgroundMarker && "\n      background-color: #222143;\n      background-image: url(".concat(_bgChartCircle.default, "), url(").concat(_bgChartTriangle.default, ");\n      background-repeat: no-repeat;\n      background-position: left top, right bottom;\n      background-size: 337px 312px, 166px 225px;\n    ");
 }, function (_ref12) {
-  var border = _ref12.border;
-  return border && "border: var(--border-width) solid var(--border-color);";
+  var backgroundMap = _ref12.backgroundMap;
+  return backgroundMap && "\n      background-color: #222143;\n      background-image: url(".concat(_map.default, ");\n      background-repeat: no-repeat;\n      background-size: cover;\n    ");
 }, function (_ref13) {
-  var checkboxGroup = _ref13.checkboxGroup;
+  var border = _ref13.border;
+  return border && 'border: var(--border-width) solid var(--border-color);';
+}, function (_ref14) {
+  var checkboxGroup = _ref14.checkboxGroup;
   return checkboxGroup && "\n      background: transparent;\n      width: 50%;\n      margin-left: auto;\n      margin-right: auto;\n    ";
 });
 

package/section/SectionBody.js

@@ -25,7 +25,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var SectionBody = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // fix: overflow element(relate to z-index problem)\n  // position: relative;\n  background: transparent;\n  padding: var(--spacing) 0 0 0;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var noPadding = _ref.noPadding;
-  return noPadding && "padding: 0;";
+  return noPadding && 'padding: 0;';
 }, function (_ref2) {
   var maxHeight = _ref2.maxHeight;
   return maxHeight && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      max-height: ", "px;\n      overflow-y: auto;\n      overflow-x: hidden;\n      ", "\n    "])), maxHeight, _scrollbar.default);

package/section/SectionHeader.js

@@ -26,13 +26,13 @@ var SectionHeader = _styledComponents.default.div(_templateObject || (_templateO
   return inline && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    "])));
 }, function (_ref2) {
   var flexStart = _ref2.flexStart;
-  return flexStart && "justify-content: flex-start;";
+  return flexStart && 'justify-content: flex-start;';
 }, function (_ref3) {
   var border = _ref3.border;
-  return border && "border-bottom: var(--border-width) solid var(--border-color);";
+  return border && 'border-bottom: var(--border-width) solid var(--border-color);';
 }, function (_ref4) {
   var backgroundFill = _ref4.backgroundFill;
-  return backgroundFill && "background: var(--color-background1);";
+  return backgroundFill && 'background: var(--color-background1);';
 }, function (_ref5) {
   var sticky = _ref5.sticky;
   return sticky && "position: sticky;\n    z-index:30;\n    top: ".concat(_header.default.height, ";\n  ");

package/select/SearchBox.js

@@ -28,8 +28,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; }
 
 var SearchBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var handleClick = function handleClick(e) {
-    e.stopPropagation();
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {