@cashub/ui 0.47.0 → 0.48.1

package/treeView/TreeflexStyle.js

@@ -6,9 +6,44 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = require("styled-components");
 var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
-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) } })); }
 // integrate treeflex component
-const TreeflexStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .tf-tree {\n    text-align: center;\n    color: var(--font-on-background);\n\n    .tf-nc {\n      border: var(--border-width) solid var(--border-color);\n      border-radius: 8px;\n      min-width: 120px;\n\n      &.primary {\n        border-color: var(--color-primary);\n        font-weight: var(--font-bold);\n      }\n    }\n\n    ", "\n  }\n\n  .tf-tree ul {\n    margin-bottom: 2em;\n  }\n\n  .tf-tree li ul {\n    margin-bottom: 0;\n  }\n\n  .tf-tree li li:before {\n    border: var(--border-width) solid var(--border-color);\n  }\n\n  .tf-tree .tf-nc:after,\n  .tf-tree .tf-nc:before,\n  .tf-tree .tf-node-content:after,\n  .tf-tree .tf-node-content:before {\n    border: var(--border-width) solid var(--border-color);\n  }\n"])), _scrollbar.default);
+const TreeflexStyle = (0, _styledComponents.createGlobalStyle)`
+  .tf-tree {
+    text-align: center;
+    color: var(--font-on-background);
+
+    .tf-nc {
+      border: var(--border-width) solid var(--border-color);
+      border-radius: 8px;
+      min-width: 120px;
+
+      &.primary {
+        border-color: var(--color-primary);
+        font-weight: var(--font-bold);
+      }
+    }
+
+    ${_scrollbar.default}
+  }
+
+  .tf-tree ul {
+    margin-bottom: 2em;
+  }
+
+  .tf-tree li ul {
+    margin-bottom: 0;
+  }
+
+  .tf-tree li li:before {
+    border: var(--border-width) solid var(--border-color);
+  }
+
+  .tf-tree .tf-nc:after,
+  .tf-tree .tf-nc:before,
+  .tf-tree .tf-node-content:after,
+  .tf-tree .tf-node-content:before {
+    border: var(--border-width) solid var(--border-color);
+  }
+`;
 var _default = exports.default = TreeflexStyle;

package/wizard/Wizard.js

@@ -10,9 +10,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("@cashub/utils");
 var _media = _interopRequireDefault(require("../styles/mixin/media"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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 Wizard = props => {
   const {
     navNames = [],
@@ -135,8 +133,119 @@ const Wizard = props => {
     })]
   });
 };
-const Nav = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  background: var(--color-background2);\n  border-radius: var(--border-radius-l);\n  margin-bottom: var(--spacing);\n\n  ", "\n"])), _media.default.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: block;\n    "]))));
-const NavItem = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: var(--font-on-mute);\n  font-size: var(--font-body1);\n  font-weight: var(--font-bold);\n  padding: 0 var(--spacing-xs);\n  width: 100%;\n  height: 36px;\n  line-height: 36px;\n  transition: 0.3s;\n  overflow: hidden;\n  flex: 1;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--font-on-background);\n\n    > div > span:first-of-type {\n      color: var(--font-on-primary);\n      background: var(--font-on-background);\n    }\n  }\n\n  &.current,\n  &.done {\n    background: var(--color-primary);\n    color: var(--font-on-primary);\n\n    > div > span:first-of-type {\n      color: var(--color-primary);\n      background: var(--font-on-primary);\n    }\n  }\n\n  &.current {\n    background: var(--color-primary);\n    color: var(--font-on-primary);\n    border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;\n\n    &:first-child {\n      border-radius: var(--border-radius-l);\n    }\n\n    ", "\n  }\n\n  &.done {\n    background: var(--color-primary);\n    color: var(--font-on-primary);\n\n    &:first-child {\n      border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);\n\n      ", "\n    }\n  }\n"])), _media.default.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        border-radius: 0 0 var(--border-radius) var(--border-radius);\n      "]))), _media.default.mobile(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          border-radius: var(--border-radius) var(--border-radius) 0 0;\n        "]))));
-const NavTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > span:first-of-type {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: var(--spacing-xs);\n    color: var(--font-on-mute);\n    flex: 0 0;\n    flex-basis: 24px;\n    width: 24px;\n    height: 24px;\n    border-radius: var(--border-radius-l);\n    background: var(--font-on-mute);\n  }\n\n  > p {\n    margin-right: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  > span:last-of-type {\n    display: none;\n\n    &.arrow {\n      display: flex;\n      align-self: center;\n    }\n\n    ", "\n  }\n"])), _media.default.mobile(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        transform: rotate(90deg);\n      "]))));
-const Step = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: none;\n\n  &.active {\n    display: block;\n  }\n"])));
+const Nav = _styledComponents.default.ul`
+  display: flex;
+  background: var(--color-background2);
+  border-radius: var(--border-radius-l);
+  margin-bottom: var(--spacing);
+
+  ${_media.default.mobile`
+      display: block;
+    `}
+`;
+const NavItem = _styledComponents.default.li`
+  color: var(--font-on-mute);
+  font-size: var(--font-body1);
+  font-weight: var(--font-bold);
+  padding: 0 var(--spacing-xs);
+  width: 100%;
+  height: 36px;
+  line-height: 36px;
+  transition: 0.3s;
+  overflow: hidden;
+  flex: 1;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--font-on-background);
+
+    > div > span:first-of-type {
+      color: var(--font-on-primary);
+      background: var(--font-on-background);
+    }
+  }
+
+  &.current,
+  &.done {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+
+    > div > span:first-of-type {
+      color: var(--color-primary);
+      background: var(--font-on-primary);
+    }
+  }
+
+  &.current {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+    border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;
+
+    &:first-child {
+      border-radius: var(--border-radius-l);
+    }
+
+    ${_media.default.mobile`
+        border-radius: 0 0 var(--border-radius) var(--border-radius);
+      `}
+  }
+
+  &.done {
+    background: var(--color-primary);
+    color: var(--font-on-primary);
+
+    &:first-child {
+      border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);
+
+      ${_media.default.mobile`
+          border-radius: var(--border-radius) var(--border-radius) 0 0;
+        `}
+    }
+  }
+`;
+const NavTitle = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+
+  > span:first-of-type {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--spacing-xs);
+    color: var(--font-on-mute);
+    flex: 0 0;
+    flex-basis: 24px;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--border-radius-l);
+    background: var(--font-on-mute);
+  }
+
+  > p {
+    margin-right: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  > span:last-of-type {
+    display: none;
+
+    &.arrow {
+      display: flex;
+      align-self: center;
+    }
+
+    ${_media.default.mobile`
+        transform: rotate(90deg);
+      `}
+  }
+`;
+const Step = _styledComponents.default.div`
+  display: none;
+
+  &.active {
+    display: block;
+  }
+`;
 var _default = exports.default = Wizard;