@cashub/ui 0.46.1 → 0.48.0

package/image/UploadImage.js

@@ -15,11 +15,8 @@ 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,
@@ -166,37 +163,88 @@ const UploadImage = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       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, {
+    }), allowClear && src && ref && !ref.current?.files?.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 => {
+const Wrapper = (0, _styledComponents.default)(_ImageFigure.default)`
+  position: relative;
+  padding: var(--spacing-xs);
+`;
+const ButtonGroup = _styledComponents.default.div`
+  position: absolute;
+  top: -16px;
+  right: -12px;
+
+  ${_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 => {
+  return rounded && `
+      top: 0;
+      right: 0;
+    `;
+}}
+`;
+const ActionButton = _styledComponents.default.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  border: none;
+`;
+const CropButton = (0, _styledComponents.default)(ActionButton)`
+  color: var(--font-on-primary);
+  background: var(--color-primary);
+  border-radius: var(--border-radius);
+
+  ${_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 => {
+  return roundedCircle && `
+      position: relative;
+      top: -16px;
+    `;
+}}
+`;
+const ModifyButton = (0, _styledComponents.default)(ActionButton)`
+  color: var(--font-on-primary);
+  background: var(--color-primary);
+  border-radius: var(--border-radius);
+  margin-left: var(--spacing-xs);
+
+  ${_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 => {
+  return roundedCircle && `
+      position: relative;
+      top: 4px;
+    `;
+}}
+`;
+const RemoveIcon = (0, _styledComponents.default)(ActionButton)`
+  position: absolute;
+  color: var(--font-on-danger);
+  background: var(--color-danger);
+  border-radius: var(--border-radius);
+  bottom: -12px;
+  right: -12px;
+
+  ${_ref5 => {
   let {
     roundedCircle
   } = _ref5;
-  return roundedCircle && "\n      bottom: 0;\n      right: 4px;\n    ";
-});
+  return roundedCircle && `
+      bottom: 0;
+      right: 4px;
+    `;
+}}
+`;
 var _default = exports.default = UploadImage;

package/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   Dropdown: true,
   Tab: true,
+  TabV2: true,
   VerticalTab: true
 };
 Object.defineProperty(exports, "Dropdown", {
@@ -20,6 +21,12 @@ Object.defineProperty(exports, "Tab", {
     return _Tab.default;
   }
 });
+Object.defineProperty(exports, "TabV2", {
+  enumerable: true,
+  get: function () {
+    return _Tab.TabV2;
+  }
+});
 Object.defineProperty(exports, "VerticalTab", {
   enumerable: true,
   get: function () {
@@ -470,7 +477,7 @@ Object.keys(_table).forEach(function (key) {
     }
   });
 });
-var _Tab = _interopRequireDefault(require("./Tab"));
+var _Tab = _interopRequireWildcard(require("./Tab"));
 var _tagify = require("./tagify");
 Object.keys(_tagify).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/jsoneditor/JsonEditor.js

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

package/keyframe/Pulse.js

@@ -5,7 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"])));
+const Pulse = (0, _styledComponents.keyframes)`
+  0% {
+    transform: scale(0.1, 0.1);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.2, 1.2);
+    opacity: 0;
+  }
+`;
 var _default = exports.default = Pulse;

package/keyframe/Spin.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"])));
+const Spin = (0, _styledComponents.keyframes)`
+  to {
+    transform: rotate(360deg);
+  }
+`;
 var _default = exports.default = Spin;

package/layout/Aside.js

@@ -9,15 +9,40 @@ 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 => {
+const Aside = _styledComponents.default.aside`
+  width: ${_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)));
+  return $display ? `${_sidebar.default.open.width}` : `${_sidebar.default.close.width}`;
+}};
+
+  padding-top: var(--spacing-s);
+  height: calc(100vh - ${_header.default.height} - var(--spacing));
+  background: url(${_bgAside.default}), var(--color-background2);
+  background-size: 356px 436px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  border-top-right-radius: var(--border-radius);
+  position: fixed;
+  top: calc(${_header.default.height} + var(--spacing));
+  transition: width 0.2s;
+  z-index: 60;
+
+  ${_media.default.tablet`
+    height: 100%;
+    top: 0;
+    padding-top:0;
+    border-top-right-radius:0;
+    left: 0;
+    box-shadow: var(--box-shadow);
+    
+    ${props => props.$display === false && (0, _styledComponents.css)`
+        left: -${_sidebar.default.open.width};
+      `}
+  `};
+`;
 var _default = exports.default = Aside;

package/layout/Backdrop.js

@@ -7,13 +7,17 @@ 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 => {
+const Backdrop = (0, _styledComponents.default)(_backdrop.BaseBackdrop)`
+  visibility: hidden;
+
+  ${_media.default.tablet`
+    visibility: ${_ref => {
   let {
     $display
   } = _ref;
   return $display === true ? 'visible' : 'hidden';
-}));
+}};
+  `}
+`;
 var _default = exports.default = Backdrop;

package/layout/Container.js

@@ -8,16 +8,32 @@ 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 => {
+const Container = _styledComponents.default.div`
+  transition: 0.3s;
+  width: 100%;
+  padding: calc(${_header.default.height} + var(--spacing)) var(--spacing)
+    var(--spacing);
+
+  ${_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      "]))));
-});
+  return hasSidebar === true && (0, _styledComponents.css)`
+        width: calc(
+          100% -
+            ${$display === true ? _sidebar.default.open.width : _sidebar.default.close.width}
+        );
+        margin-left: ${$display === true ? _sidebar.default.open.width : _sidebar.default.close.width};
+
+        ${_media.default.tablet`
+        width: 100%;
+        margin-left: 0;
+      `}
+      `;
+}}
+`;
 var _default = exports.default = Container;

package/layout/Footer.js

@@ -7,20 +7,39 @@ 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 => {
+const Footer = _styledComponents.default.footer`
+  transition: 0.3s;
+  border-top: var(--border-width) solid var(--border-color);
+  color: var(--font-on-mute);
+  height: 64px;
+  line-height: 64px;
+  font-size: var(--font-body2);
+  padding: 0 var(--spacing);
+
+  ${_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 => {
+  return hasSidebar === true && (0, _styledComponents.css)`
+      margin: 0 var(--spacing) 0 calc(var(--spacing) + ${_sidebar.default.close.width});
+
+      ${_media.default.tablet`
+        margin:0 ;
+      `}
+    `;
+}}
+
+  ${_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);
-});
+  return $display && (0, _styledComponents.css)`
+      margin: 0 var(--spacing) 0
+        calc(var(--spacing) + ${_sidebar.default.open.width});
+    `;
+}}
+`;
 var _default = exports.default = Footer;

package/layout/Sidebar.jsx

@@ -70,6 +70,7 @@ const Sidebar = ({
                   key={key}
                   $display={$display}
                   hoverDisplay={hoverDisplay}
+                  level={0}
                 />
               );
             }
@@ -109,6 +110,7 @@ const MenuListWithSubMenu = ({
   currentPath,
   $display,
   hoverDisplay,
+  level,
 }) => {
   const { t: trans } = useTranslation();
   const [open, setOpen] = useState(active);
@@ -124,8 +126,12 @@ const MenuListWithSubMenu = ({
   return (
     <>
       <MenuItem onClick={toggleOpen}>
-        <MenuItemButton as='button' open={open}>
-          <img crossOrigin='anonymous' src={icon} alt={`${name} icon`} />
+        <MenuItemButton as='button' open={open} $level={level}>
+          {icon ? (
+            <img crossOrigin='anonymous' src={icon} alt={`${name} icon`} />
+          ) : (
+            <EmptyIcon />
+          )}
           <span>{trans(name)}</span>
           <span className='arrow' role='presentation' aria-hidden='true'>
             <FaCaretRight />
@@ -139,8 +145,23 @@ const MenuListWithSubMenu = ({
             const href = `${path}${prop.path}`;
             const active = currentPath.includes(prop.path);
 
+            if (prop.parent === true) {
+              return (
+                <MenuListWithSubMenu
+                  {...prop}
+                  key={key}
+                  path={href}
+                  active={active}
+                  currentPath={currentPath}
+                  $display={$display}
+                  hoverDisplay={hoverDisplay}
+                  level={level + 1}
+                />
+              );
+            }
+
             return (
-              <SubMenuItem key={key} active={active}>
+              <SubMenuItem key={key} active={active} $level={level}>
                 <Link to={href}>
                   <span>{trans(prop.name)}</span>
                 </Link>
@@ -228,6 +249,8 @@ const SubMenuItem = styled.li`
     display: flex;
     align-items: center;
     padding: 0 calc(var(--spacing) * 2 + 1.5rem);
+    padding-left: ${({ $level }) =>
+      `calc(var(--spacing) * 2 + 1.5rem + ${$level} * var(--spacing))`};
     height: 48px;
 
     ${({ active }) =>
@@ -238,4 +261,11 @@ const SubMenuItem = styled.li`
   }
 `;
 
+const EmptyIcon = styled.span`
+  width: 24px;
+  height: 24px;
+  margin-right: var(--spacing);
+  flex: 0 0 24px;
+`;
+
 export default Sidebar;

package/link/LinkSpan.js

@@ -6,25 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["children"];
 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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const LinkSpan = _ref => {
   let {
-      children
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, _objectSpread(_objectSpread({}, props), {}, {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Link, {
+    ...props,
     children: children
-  }));
+  });
 };
 const Link = _styledComponents.default.span.attrs(props => {
   return {
@@ -32,20 +23,47 @@ const Link = _styledComponents.default.span.attrs(props => {
     color: props.light ? 'var(--font-on-background)' : 'rgba(255, 255, 255, 0.5)',
     borderColor: props.light ? 'var(--border-color)' : '#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.75;\n    }\n  }\n"])), _ref2 => {
+})`
+  font-size: ${_ref2 => {
   let {
     fontSize
   } = _ref2;
   return fontSize;
-}, _ref3 => {
+}};
+  line-height: 1.5;
+  font-weight: 500;
+  color: ${_ref3 => {
   let {
     color
   } = _ref3;
   return color;
-}, _ref4 => {
+}};
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+
+  &:after {
+    display: block;
+    content: '';
+    position: absolute;
+    bottom: 0;
+    top: 1rem;
+    left: 0;
+    width: 0%;
+    transition: width 0.3s ease;
+  }
+
+  &:hover {
+    &:after {
+      width: 100%;
+      border-bottom: 1px solid ${_ref4 => {
   let {
     borderColor
   } = _ref4;
   return borderColor;
-});
+}};
+      opacity: 0.75;
+    }
+  }
+`;
 var _default = exports.default = LinkSpan;