@cashub/ui 0.48.28 → 0.49.0-beta.0

package/iconbox/IconBox.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
-var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
-var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const IconBox = _ref => {
-  let {
-    icon,
-    title,
-    children
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
-        sizeXS: true,
-        marginRight: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
-          sizeXS: true,
-          src: icon,
-          alt: "".concat(title, "'s icon")
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
-        children: title
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
-      children: children
-    })]
-  });
-};
-const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: var(--spacing-l);\n  margin-bottom: var(--spacing);\n  border-radius: var(--border-radius);\n  background: var(--color-background2);\n  color: var(--font-on-background);\n\n  background: var(--color-background2);\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-position: right bottom;\n  background-size: 30% 70%;\n"])), _bgChartTriangle.default);
-const IconBoxHead = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: var(--spacing);\n"])));
-const IconBoxTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: var(--font-h2);\n  font-weight: bold;\n  word-break: break-all;\n"])));
-const IconBoxBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: var(--font-h1);\n  font-weight: bold;\n  text-align: center;\n"])));
-var _default = exports.default = IconBox;

package/iconbox/IconBoxV2.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
-var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const 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  border: 2px solid transparent;\n\n  ", "\n\n  ", "\n"])), _ref => {
-  let {
-    fullHeight
-  } = _ref;
-  return fullHeight && 'height: calc(100% - var(--spacing));';
-}, _ref2 => {
-  let {
-    selected
-  } = _ref2;
-  return selected && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-color: var(--color-primary);\n      background: color-mix(\n        in srgb,\n        var(--color-primary) 10%,\n        var(--color-background1)\n      );\n    "])));
-});
-const Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-const Description = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  font-size: var(--font-body1);\n"])));
-const Info = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  word-break: break-all;\n\n  &:not(:last-child) {\n    margin-bottom: var(--spacing-s);\n  }\n"])));
-const Tool = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  flex: 0 0 calc(var(--spacing-s) + 36px);\n  padding-left: var(--spacing-s);\n\n  > *:not(:last-child) {\n    margin-bottom: var(--spacing-s);\n  }\n"])));
-var _default = exports.default = Object.assign(IconBoxV2, {
-  Body,
-  Description,
-  Info,
-  Tool,
-  Figure: _IconBoxFigure.default,
-  Image: _IconBoxImage.default
-});

package/iconbox/subComponent/IconBoxFigure.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const IconBoxFigure = _styledComponents.default.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 120px;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n"])), _ref => {
-  let {
-    marginRight
-  } = _ref;
-  return marginRight && 'margin-right: var(--spacing);';
-}, _ref2 => {
-  let {
-    paddingRight
-  } = _ref2;
-  return paddingRight && 'padding-right: var(--spacing);';
-}, _ref3 => {
-  let {
-    paddingRightS
-  } = _ref3;
-  return paddingRightS && 'padding-right: var(--spacing-s);';
-}, _ref4 => {
-  let {
-    paddingBottomS
-  } = _ref4;
-  return paddingBottomS && 'padding-bottom: var(--spacing-s);';
-}, _ref5 => {
-  let {
-    sizeS
-  } = _ref5;
-  return sizeS && 'flex-basis: 80px;';
-}, _ref6 => {
-  let {
-    sizeXS
-  } = _ref6;
-  return sizeXS && 'flex-basis: 40px;';
-});
-var _default = exports.default = IconBoxFigure;

package/iconbox/subComponent/IconBoxImage.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const IconBoxImage = _styledComponents.default.img.attrs(() => ({
-  crossOrigin: 'anonymous'
-}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 120px;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
-  let {
-    rounded
-  } = _ref;
-  return rounded && 'border-radius: var(--border-radius);';
-}, _ref2 => {
-  let {
-    sizeS
-  } = _ref2;
-  return sizeS && "\n      width: 80px;\n      height: 80px;\n    ";
-}, _ref3 => {
-  let {
-    sizeXS
-  } = _ref3;
-  return sizeXS && "\n      width: 40px;\n      height: 40px;\n    ";
-});
-var _default = exports.default = IconBoxImage;

package/image/ImageFluid.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _rounded = _interopRequireDefault(require("../styles/mixin/rounded"));
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const ImageFluid = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n\n  ", "\n"])), _rounded.default);
-var _default = exports.default = ImageFluid;

package/image/UploadImage.js

@@ -1,202 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _fa = require("react-icons/fa");
-var _md = require("react-icons/md");
-var _utils = require("@cashub/utils");
-var _toast = require("../toast");
-var _HiddenFileInput = _interopRequireDefault(require("../file/HiddenFileInput"));
-var _ImageFigure = _interopRequireDefault(require("../figure/ImageFigure"));
-var _ImageFluid = _interopRequireDefault(require("./ImageFluid"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const UploadImage = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  var _ref$current;
-  let {
-    id,
-    src,
-    alt = 'user avatar',
-    roundedCircle = false,
-    cropperHandler,
-    onBlur,
-    onClear,
-    allowClear = false
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const refWrapper = (0, _react.useRef)();
-  const [currentSrc, setCurrentSrc] = (0, _react.useState)(src);
-  const [currentFile, setCurrentFile] = (0, _react.useState)(null);
-  const [focusCount, setFocusCount] = (0, _react.useState)(0);
-  const handleAvatarRemove = () => {
-    setCurrentSrc(src);
-    ref.current.value = '';
-    setCurrentFile(null);
-  };
-  const restoreFile = (0, _react.useCallback)(() => {
-    if (!currentFile) return;
-    const dataTransfer = new DataTransfer();
-    dataTransfer.items.add(currentFile);
-    ref.current.files = dataTransfer.files;
-  }, [ref, currentFile]);
-  const handleImageFile = (0, _react.useCallback)((file, src) => {
-    const dataTransfer = new DataTransfer();
-    const changedImageFile = (0, _utils.dataURLtoFile)(src, file.name);
-    dataTransfer.items.add(changedImageFile);
-    setCurrentSrc(src);
-    setCurrentFile(changedImageFile);
-    ref.current.files = dataTransfer.files;
-  }, [ref]);
-  const handleOnChange = files => {
-    if (files.length === 0) {
-      // close file selector or cancel upload file need to restore to last uploaded file
-      restoreFile();
-    } else {
-      const fileType = files[0].name.slice(files[0].name.lastIndexOf('.')).toLowerCase();
-      if (['.jpeg', '.bmp', '.jpg', '.png'].includes(fileType)) {
-        if (files[0].size < 2097152) {
-          const srcUrl = URL.createObjectURL(files[0]);
-          handleCrop(srcUrl, files[0]);
-        } else {
-          ref.current.value = '';
-          restoreFile();
-          (0, _toast.showErrorMessage)({
-            title: t('error:Upload'),
-            message: t('error:UploadSize', {
-              size: '2MB'
-            })
-          });
-        }
-      } else {
-        ref.current.value = '';
-        restoreFile();
-        (0, _toast.showErrorMessage)({
-          title: t('error:Upload'),
-          message: t('error:LogoMerchantFileType')
-        });
-      }
-    }
-  };
-  const handleCrop = (0, _react.useCallback)((src, file) => {
-    cropperHandler({
-      src,
-      file,
-      width: 160,
-      height: 160,
-      onCrop: croppedSrc => {
-        handleImageFile(file, croppedSrc);
-      },
-      onClose: () => {
-        (0, _utils.getBase64DataUrlFromFile)(file, dataUrl => {
-          handleImageFile(file, dataUrl);
-        });
-      }
-    });
-  }, [cropperHandler, handleImageFile]);
-  const handleFocus = event => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (event.target.tagName === 'BUTTON') {
-      setFocusCount(focusCount + 1);
-    }
-  };
-  const handleBlur = event => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    // if click figure,after click button
-    if (refWrapper.current.contains(event.relatedTarget)) return;
-    if (event.target === refWrapper.current && onBlur) {
-      onBlur();
-    }
-  };
-  (0, _react.useEffect)(() => {
-    setCurrentSrc(src);
-  }, [src, ref]);
-
-  // if click button icon,can focus figure element
-  (0, _react.useEffect)(() => {
-    if (focusCount === 2) {
-      refWrapper.current.focus();
-      setFocusCount(0);
-    }
-  }, [ref, focusCount]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    ref: refWrapper,
-    roundedCircle: roundedCircle,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    tabIndex: "0",
-    children: [currentSrc && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageFluid.default, {
-      crossOrigin: "anonymous",
-      src: currentSrc,
-      alt: alt,
-      rounded: true,
-      roundedCircle: roundedCircle
-    }), ref && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonGroup, {
-      roundedCircle: roundedCircle,
-      children: [ref.current && ref.current.files && ref.current.files.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(CropButton, {
-        roundedCircle: roundedCircle,
-        onClick: () => {
-          handleCrop(currentSrc, ref.current.files[0]);
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdCrop, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ModifyButton, {
-        roundedCircle: roundedCircle,
-        onClick: () => {
-          ref.current.click();
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPen, {})
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenFileInput.default, {
-      ref: ref && ref,
-      id: id,
-      accept: ".jpeg, .bmp, .jpg, .png",
-      onChange: event => handleOnChange(event.target.files)
-    }), ref && ref.current && ref.current.files && ref.current.files.length !== 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(RemoveIcon, {
-      onClick: handleAvatarRemove,
-      roundedCircle: roundedCircle,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
-    }), allowClear && src && ref && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current = _ref$current.files) !== null && _ref$current !== void 0 && _ref$current.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(RemoveIcon, {
-      onClick: onClear,
-      roundedCircle: roundedCircle,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaTimes, {})
-    })]
-  });
-});
-const Wrapper = (0, _styledComponents.default)(_ImageFigure.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding: var(--spacing-xs);\n"])));
-const ButtonGroup = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: -16px;\n  right: -12px;\n\n  ", "\n"])), _ref2 => {
-  let {
-    rounded
-  } = _ref2;
-  return rounded && "\n      top: 0;\n      right: 0;\n    ";
-});
-const ActionButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border: none;\n"])));
-const CropButton = (0, _styledComponents.default)(ActionButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: var(--font-on-primary);\n  background: var(--color-primary);\n  border-radius: var(--border-radius);\n\n  ", "\n"])), _ref3 => {
-  let {
-    roundedCircle
-  } = _ref3;
-  return roundedCircle && "\n      position: relative;\n      top: -16px;\n    ";
-});
-const ModifyButton = (0, _styledComponents.default)(ActionButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: var(--font-on-primary);\n  background: var(--color-primary);\n  border-radius: var(--border-radius);\n  margin-left: var(--spacing-xs);\n\n  ", "\n"])), _ref4 => {
-  let {
-    roundedCircle
-  } = _ref4;
-  return roundedCircle && "\n      position: relative;\n      top: 4px;\n    ";
-});
-const RemoveIcon = (0, _styledComponents.default)(ActionButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  color: var(--font-on-danger);\n  background: var(--color-danger);\n  border-radius: var(--border-radius);\n  bottom: -12px;\n  right: -12px;\n\n  ", "\n"])), _ref5 => {
-  let {
-    roundedCircle
-  } = _ref5;
-  return roundedCircle && "\n      bottom: 0;\n      right: 4px;\n    ";
-});
-var _default = exports.default = UploadImage;

package/jsoneditor/JsonEditor.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _jsoneditorReact = require("jsoneditor-react");
-var _brace = _interopRequireDefault(require("brace"));
-require("jsoneditor-react/es/editor.min.css");
-require("brace/mode/json");
-require("brace/theme/github");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const JsonEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsoneditorReact.JsonEditor, _objectSpread(_objectSpread({
-      ref: ref
-    }, props), {}, {
-      ace: _brace.default
-    }))
-  });
-});
-const 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 th,\n  div.jsoneditor td,\n  div.jsoneditor textarea,\n  div.jsoneditor select,\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.jsoneditor select {\n    background: var(--color-background1);\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 = exports.default = JsonEditor;

package/keyframe/Pulse.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = require("styled-components");
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Pulse = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0.1, 0.1);\n    opacity: 0;\n  }\n  10% {\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1.2, 1.2);\n    opacity: 0;\n  }\n"])));
-var _default = exports.default = Pulse;

package/keyframe/Spin.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = require("styled-components");
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Spin = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var _default = exports.default = Spin;

package/layout/Aside.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _header = _interopRequireDefault(require("../styles/config/header.style"));
-var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
-var _media = _interopRequireDefault(require("../styles/mixin/media"));
-var _bgAside = _interopRequireDefault(require("../assets/images/bg-aside.png"));
-var _templateObject, _templateObject2, _templateObject3;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Aside = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n\n  padding-top: var(--spacing-s);\n  height: calc(100vh - ", " - var(--spacing));\n  background: url(", "), var(--color-background2);\n  background-size: 356px 436px;\n  background-repeat: no-repeat;\n  background-position: bottom;\n  border-top-right-radius: var(--border-radius);\n  position: fixed;\n  top: calc(", " + var(--spacing));\n  transition: width 0.2s;\n  z-index: 60;\n\n  ", ";\n"])), _ref => {
-  let {
-    $display
-  } = _ref;
-  return $display ? "".concat(_sidebar.default.open.width) : "".concat(_sidebar.default.close.width);
-}, _header.default.height, _bgAside.default, _header.default.height, _media.default.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 100%;\n    top: 0;\n    padding-top:0;\n    border-top-right-radius:0;\n    left: 0;\n    box-shadow: var(--box-shadow);\n    \n    ", "\n  "])), props => props.$display === false && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        left: -", ";\n      "])), _sidebar.default.open.width)));
-var _default = exports.default = Aside;

package/layout/Backdrop.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _backdrop = require("../backdrop");
-var _media = _interopRequireDefault(require("../styles/mixin/media"));
-var _templateObject, _templateObject2;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Backdrop = (0, _styledComponents.default)(_backdrop.BaseBackdrop)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: hidden;\n\n  ", "\n"])), _media.default.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    visibility: ", ";\n  "])), _ref => {
-  let {
-    $display
-  } = _ref;
-  return $display === true ? 'visible' : 'hidden';
-}));
-var _default = exports.default = Backdrop;

package/layout/Container.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _header = _interopRequireDefault(require("../styles/config/header.style"));
-var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
-var _media = _interopRequireDefault(require("../styles/mixin/media"));
-var _templateObject, _templateObject2, _templateObject3;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: 0.3s;\n  width: 100%;\n  padding: calc(", " + var(--spacing)) var(--spacing)\n    var(--spacing);\n\n  ", "\n"])), _header.default.height, _ref => {
-  let {
-    hasSidebar,
-    $display
-  } = _ref;
-  return hasSidebar === true && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        width: calc(\n          100% -\n            ", "\n        );\n        margin-left: ", ";\n\n        ", "\n      "])), $display === true ? _sidebar.default.open.width : _sidebar.default.close.width, $display === true ? _sidebar.default.open.width : _sidebar.default.close.width, _media.default.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        width: 100%;\n        margin-left: 0;\n      "]))));
-});
-var _default = exports.default = Container;

package/layout/Footer.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
-var _media = _interopRequireDefault(require("../styles/mixin/media"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Footer = _styledComponents.default.footer(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: 0.3s;\n  border-top: var(--border-width) solid var(--border-color);\n  color: var(--font-on-mute);\n  height: 64px;\n  line-height: 64px;\n  font-size: var(--font-body2);\n  padding: 0 var(--spacing);\n\n  ", "\n\n  ", "\n"])), _ref => {
-  let {
-    hasSidebar
-  } = _ref;
-  return hasSidebar === true && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin: 0 var(--spacing) 0 calc(var(--spacing) + ", ");\n\n      ", "\n    "])), _sidebar.default.close.width, _media.default.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin:0 ;\n      "]))));
-}, _ref2 => {
-  let {
-    $display
-  } = _ref2;
-  return $display && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      margin: 0 var(--spacing) 0\n        calc(var(--spacing) + ", ");\n    "])), _sidebar.default.open.width);
-});
-var _default = exports.default = Footer;

package/layout/Header.jsx

@@ -1,55 +0,0 @@
-import styled from 'styled-components';
-import headerStyle from '../styles/config/header.style';
-import media from '../styles/mixin/media';
-import MenuIcon from './MenuIcon';
-import Logo from './Logo';
-
-const Header = ({ theme, logo, hasSidebar, toggleSidebar, children }) => {
-  return (
-    <>
-      <Wrapper>
-        <Brand>
-          {hasSidebar && (
-            <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />
-          )}
-          {logo && <Logo src={logo} />}
-        </Brand>
-        <Topbar>{children}</Topbar>
-      </Wrapper>
-    </>
-  );
-};
-
-const Wrapper = styled.header`
-  background: var(--color-background2);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: fixed;
-  z-index: 40;
-  width: 100%;
-  height: ${headerStyle.height};
-  padding: 0 calc(var(--spacing-s) + 0.25rem) 0 var(--spacing-s);
-
-  ${media.tablet`
-    padding: 0 var(--spacing-s) 0 calc(var(--spacing-s) - 0.25rem);
-  `}
-`;
-
-const Brand = styled.div`
-  display: flex;
-
-  > * {
-    flex: none;
-  }
-`;
-
-const Topbar = styled.div`
-  display: flex;
-
-  > *:not(:last-child) {
-    margin-right: calc(var(--spacing) - 0.5rem);
-  }
-`;
-
-export default Header;