@cashub/ui 0.46.1 → 0.48.0

package/styles/GlobalStyle.js

@@ -7,217 +7,328 @@ exports.default = void 0;
 var _styledComponents = require("styled-components");
 require("normalize.css");
 require("../assets/css/global.css");
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    --color-white: ", ";\n    --color-dark: ", ";\n    --color-grey: ", ";\n    --color-primary: ", ";\n    --color-success: ", ";\n    --color-warning: ", ";\n    --color-danger: ", ";\n    --color-hover: ", ";\n    --color-active: ", ";\n    --color-scroll-bar: ", ";\n    --color-background1: ", ";\n    --color-background2: ", ";\n    --color-background3: ", ";\n    --color-backdrop: ", ";\n\n    --font-h1: ", ";\n    --font-h2: ", ";\n    --font-h3: ", ";\n    --font-body1: ", ";\n    --font-body2: ", ";\n    --font-button: ", ";\n    --font-caption: ", ";\n    --font-family: ", ";\n    --font-normal: ", ";\n    --font-bold: ", ";\n    --font-on-primary: ", ";\n    --font-on-success: ", ";\n    --font-on-warning: ", ";\n    --font-on-danger: ", ";\n    --font-on-background: ", ";\n    --font-on-mute: ", ";\n\n    --box-shadow: ", ";\n    --border-color: ", ";\n    --border-color-transparent: ", ";\n    --border-width: ", ";\n    --border-radius-s: ", ";\n    --border-radius: ", ";\n    --border-radius-l: ", ";\n    --border-radius-round: ", ";\n\n    --spacing-xs: ", ";\n    --spacing-s: ", ";\n    --spacing: ", ";\n    --spacing-l: ", ";\n\n    /* Global style */\n    font-size: 16px;\n    font-family: Helvetica;\n    overflow-x: hidden;\n    background: var(--color-background1);\n  }\n\n  /* Custom normalize */\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  html {\n    line-height: 1;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n  }\n  \n  a {\n    text-decoration: none;\n  }\n\n  button,\n  input,\n  optgroup,\n  select,\n  textarea {\n    line-height: 1;\n  }\n\n  ul {\n    padding: 0;\n    margin: 0;\n  }\n\n  li {\n    list-style: none;\n  }\n\n  figure {\n    margin: 0;\n  }\n\n  p {\n    margin: 0;\n  }\n\n  dl,\n  dt,\n  dd {\n    margin: 0;\n  }\n\n  .margin-bottom-s {\n    margin-bottom: var(--spacing-s);\n  }\n"])), _ref => {
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  body {
+    --color-white: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.colorWhite;
-}, _ref2 => {
+}};
+    --color-dark: ${_ref2 => {
   let {
     theme
   } = _ref2;
   return theme.colorDark;
-}, _ref3 => {
+}};
+    --color-grey: ${_ref3 => {
   let {
     theme
   } = _ref3;
   return theme.colorGrey;
-}, _ref4 => {
+}};
+    --color-primary: ${_ref4 => {
   let {
     theme
   } = _ref4;
   return theme.colorPrimary;
-}, _ref5 => {
+}};
+    --color-success: ${_ref5 => {
   let {
     theme
   } = _ref5;
   return theme.colorSuccess;
-}, _ref6 => {
+}};
+    --color-warning: ${_ref6 => {
   let {
     theme
   } = _ref6;
   return theme.colorWarning;
-}, _ref7 => {
+}};
+    --color-danger: ${_ref7 => {
   let {
     theme
   } = _ref7;
   return theme.colorDanger;
-}, _ref8 => {
+}};
+    --color-hover: ${_ref8 => {
   let {
     theme
   } = _ref8;
   return theme.colorHover;
-}, _ref9 => {
+}};
+    --color-active: ${_ref9 => {
   let {
     theme
   } = _ref9;
   return theme.colorActive;
-}, _ref10 => {
+}};
+    --color-scroll-bar: ${_ref10 => {
   let {
     theme
   } = _ref10;
   return theme.scrollBarColor;
-}, _ref11 => {
+}};
+    --color-background1: ${_ref11 => {
   let {
     theme
   } = _ref11;
   return theme.bgColor1;
-}, _ref12 => {
+}};
+    --color-background2: ${_ref12 => {
   let {
     theme
   } = _ref12;
   return theme.bgColor2;
-}, _ref13 => {
+}};
+    --color-background3: ${_ref13 => {
   let {
     theme
   } = _ref13;
   return theme.bgColor3;
-}, _ref14 => {
+}};
+    --color-backdrop: ${_ref14 => {
   let {
     theme
   } = _ref14;
   return theme.backdropBg;
-}, _ref15 => {
+}};
+
+    --font-h1: ${_ref15 => {
   let {
     theme
   } = _ref15;
   return theme.fontH1;
-}, _ref16 => {
+}};
+    --font-h2: ${_ref16 => {
   let {
     theme
   } = _ref16;
   return theme.fontH2;
-}, _ref17 => {
+}};
+    --font-h3: ${_ref17 => {
   let {
     theme
   } = _ref17;
   return theme.fontH3;
-}, _ref18 => {
+}};
+    --font-body1: ${_ref18 => {
   let {
     theme
   } = _ref18;
   return theme.fontBody1;
-}, _ref19 => {
+}};
+    --font-body2: ${_ref19 => {
   let {
     theme
   } = _ref19;
   return theme.fontBody2;
-}, _ref20 => {
+}};
+    --font-button: ${_ref20 => {
   let {
     theme
   } = _ref20;
   return theme.fontButton;
-}, _ref21 => {
+}};
+    --font-caption: ${_ref21 => {
   let {
     theme
   } = _ref21;
   return theme.fontCaption;
-}, _ref22 => {
+}};
+    --font-family: ${_ref22 => {
   let {
     theme
   } = _ref22;
   return theme.fontFamily;
-}, _ref23 => {
+}};
+    --font-normal: ${_ref23 => {
   let {
     theme
   } = _ref23;
   return theme.fontWeightNormal;
-}, _ref24 => {
+}};
+    --font-bold: ${_ref24 => {
   let {
     theme
   } = _ref24;
   return theme.fontWeightBold;
-}, _ref25 => {
+}};
+    --font-on-primary: ${_ref25 => {
   let {
     theme
   } = _ref25;
   return theme.fontOnPrimary;
-}, _ref26 => {
+}};
+    --font-on-success: ${_ref26 => {
   let {
     theme
   } = _ref26;
   return theme.fontOnSuccess;
-}, _ref27 => {
+}};
+    --font-on-warning: ${_ref27 => {
   let {
     theme
   } = _ref27;
   return theme.fontOnWarning;
-}, _ref28 => {
+}};
+    --font-on-danger: ${_ref28 => {
   let {
     theme
   } = _ref28;
   return theme.fontOnDanger;
-}, _ref29 => {
+}};
+    --font-on-background: ${_ref29 => {
   let {
     theme
   } = _ref29;
   return theme.fontOnBg;
-}, _ref30 => {
+}};
+    --font-on-mute: ${_ref30 => {
   let {
     theme
   } = _ref30;
   return theme.fontMutedColor;
-}, _ref31 => {
+}};
+
+    --box-shadow: ${_ref31 => {
   let {
     theme
   } = _ref31;
   return theme.boxShadow;
-}, _ref32 => {
+}};
+    --border-color: ${_ref32 => {
   let {
     theme
   } = _ref32;
   return theme.borderColor;
-}, _ref33 => {
+}};
+    --border-color-transparent: ${_ref33 => {
   let {
     theme
   } = _ref33;
   return theme.borderColorTransparent;
-}, _ref34 => {
+}};
+    --border-width: ${_ref34 => {
   let {
     theme
   } = _ref34;
   return theme.borderWidth;
-}, _ref35 => {
+}};
+    --border-radius-s: ${_ref35 => {
   let {
     theme
   } = _ref35;
   return theme.borderRadiusS;
-}, _ref36 => {
+}};
+    --border-radius: ${_ref36 => {
   let {
     theme
   } = _ref36;
   return theme.borderRadius;
-}, _ref37 => {
+}};
+    --border-radius-l: ${_ref37 => {
   let {
     theme
   } = _ref37;
   return theme.borderRadiusL;
-}, _ref38 => {
+}};
+    --border-radius-round: ${_ref38 => {
   let {
     theme
   } = _ref38;
   return theme.borderRadiusRound;
-}, _ref39 => {
+}};
+
+    --spacing-xs: ${_ref39 => {
   let {
     theme
   } = _ref39;
   return theme.spacerXS;
-}, _ref40 => {
+}};
+    --spacing-s: ${_ref40 => {
   let {
     theme
   } = _ref40;
   return theme.spacerS;
-}, _ref41 => {
+}};
+    --spacing: ${_ref41 => {
   let {
     theme
   } = _ref41;
   return theme.spacer;
-}, _ref42 => {
+}};
+    --spacing-l: ${_ref42 => {
   let {
     theme
   } = _ref42;
   return theme.spacerL;
-});
+}};
+
+    /* Global style */
+    font-size: 16px;
+    font-family: Helvetica;
+    overflow-x: hidden;
+    background: var(--color-background1);
+  }
+
+  /* Custom normalize */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    line-height: 1;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+  
+  a {
+    text-decoration: none;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    line-height: 1;
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  figure {
+    margin: 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  dl,
+  dt,
+  dd {
+    margin: 0;
+  }
+
+  .margin-bottom-s {
+    margin-bottom: var(--spacing-s);
+  }
+`;
 var _default = exports.default = GlobalStyle;

package/styles/mixin/backgroundColor.js

@@ -5,32 +5,40 @@ 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 backgroundColor = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+const backgroundColor = (0, _styledComponents.css)`
+  ${_ref => {
   let {
     primary
   } = _ref;
   return primary && 'background-color: var(--color-primary);';
-}, _ref2 => {
+}}
+
+  ${_ref2 => {
   let {
     success
   } = _ref2;
   return success && 'background-color: var(--color-success);';
-}, _ref3 => {
+}}
+
+  ${_ref3 => {
   let {
     warning
   } = _ref3;
   return warning && 'background-color: var(--color-warning);';
-}, _ref4 => {
+}}
+
+  ${_ref4 => {
   let {
     danger
   } = _ref4;
   return danger && 'background-color: var(--color-danger);';
-}, _ref5 => {
+}}
+
+  ${_ref5 => {
   let {
     grey
   } = _ref5;
   return grey && 'background-color: var(--color-grey);';
-});
+}}
+`;
 var _default = exports.default = backgroundColor;

package/styles/mixin/borderColor.js

@@ -5,27 +5,33 @@ 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 borderColor = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+const borderColor = (0, _styledComponents.css)`
+  ${_ref => {
   let {
     primary
   } = _ref;
   return primary && 'border-color: var(--color-primary);';
-}, _ref2 => {
+}}
+
+  ${_ref2 => {
   let {
     success
   } = _ref2;
   return success && 'border-color: var(--color-success);';
-}, _ref3 => {
+}}
+
+  ${_ref3 => {
   let {
     warning
   } = _ref3;
   return warning && 'border-color: var(--color-warning);';
-}, _ref4 => {
+}}
+
+  ${_ref4 => {
   let {
     danger
   } = _ref4;
   return danger && 'border-color: var(--color-danger);';
-});
+}}
+`;
 var _default = exports.default = borderColor;

package/styles/mixin/color.js

@@ -5,27 +5,33 @@ 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 color = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+const color = (0, _styledComponents.css)`
+  ${_ref => {
   let {
     primary
   } = _ref;
   return primary && 'color: var(--color-primary);';
-}, _ref2 => {
+}}
+
+  ${_ref2 => {
   let {
     success
   } = _ref2;
   return success && 'color: var(--color-success);';
-}, _ref3 => {
+}}
+
+  ${_ref3 => {
   let {
     warning
   } = _ref3;
   return warning && 'color: var(--color-warning);';
-}, _ref4 => {
+}}
+
+  ${_ref4 => {
   let {
     danger
   } = _ref4;
   return danger && 'color: var(--color-danger);';
-});
+}}
+`;
 var _default = exports.default = color;

package/styles/mixin/colorOnBackground.js

@@ -5,27 +5,33 @@ 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 colorOnBackground = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+const colorOnBackground = (0, _styledComponents.css)`
+  ${_ref => {
   let {
     primary
   } = _ref;
   return primary && 'color: var(--font-on-primary);';
-}, _ref2 => {
+}}
+
+  ${_ref2 => {
   let {
     success
   } = _ref2;
   return success && 'color: var(--font-on-success);';
-}, _ref3 => {
+}}
+
+  ${_ref3 => {
   let {
     warning
   } = _ref3;
   return warning && 'color: var(--font-on-warning);';
-}, _ref4 => {
+}}
+
+  ${_ref4 => {
   let {
     danger
   } = _ref4;
   return danger && 'color: var(--font-on-danger);';
-});
+}}
+`;
 var _default = exports.default = colorOnBackground;

package/styles/mixin/inputPlaceholder.js

@@ -5,9 +5,26 @@ 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 inputPlaceholder = function () {
-  return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ::placeholder {\n      ", "\n    }\n\n    ::-moz-placeholder {\n      ", "\n      opacity: 1;\n    }\n\n    // Internet Explorer 10+\n    :-ms-input-placeholder {\n      ", "\n    }\n\n    // Safari and Chrome\n    ::-webkit-input-placeholder {\n      ", "\n    }\n  "])), (0, _styledComponents.css)(...arguments), (0, _styledComponents.css)(...arguments), (0, _styledComponents.css)(...arguments), (0, _styledComponents.css)(...arguments));
+  return (0, _styledComponents.css)`
+    ::placeholder {
+      ${(0, _styledComponents.css)(...arguments)}
+    }
+
+    ::-moz-placeholder {
+      ${(0, _styledComponents.css)(...arguments)}
+      opacity: 1;
+    }
+
+    // Internet Explorer 10+
+    :-ms-input-placeholder {
+      ${(0, _styledComponents.css)(...arguments)}
+    }
+
+    // Safari and Chrome
+    ::-webkit-input-placeholder {
+      ${(0, _styledComponents.css)(...arguments)}
+    }
+  `;
 };
 var _default = exports.default = inputPlaceholder;

package/styles/mixin/media.js

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = require("styled-components");
 var _breakpoint = _interopRequireDefault(require("../config/breakpoint.style"));
-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) } })); }
 // Iterate through the breakpoint and create a media template
 const media = Object.keys(_breakpoint.default).reduce((func, label) => {
   func[label] = function () {
-    return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    @media (max-width: ", "px) {\n      ", "\n    }\n  "])), _breakpoint.default[label], (0, _styledComponents.css)(...arguments));
+    return (0, _styledComponents.css)`
+    @media (max-width: ${_breakpoint.default[label]}px) {
+      ${(0, _styledComponents.css)(...arguments)}
+    }
+  `;
   };
   return func;
 }, {});

package/styles/mixin/rounded.js

@@ -5,22 +5,26 @@ 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 rounded = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+const rounded = (0, _styledComponents.css)`
+  ${_ref => {
   let {
     roundedS
   } = _ref;
   return roundedS && 'border-radius: var(--border-radius-s);';
-}, _ref2 => {
+}}
+
+  ${_ref2 => {
   let {
     rounded
   } = _ref2;
   return rounded && 'border-radius: var(--border-radius);';
-}, _ref3 => {
+}}
+
+  ${_ref3 => {
   let {
     roundedCircle
   } = _ref3;
   return roundedCircle && 'border-radius: var(--border-radius-round);';
-});
+}}
+`;
 var _default = exports.default = rounded;

package/styles/mixin/scrollbar.js

@@ -5,8 +5,6 @@ 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 scrollbar = _ref => {
   let {
     size
@@ -17,6 +15,18 @@ const scrollbar = _ref => {
     scrollbarWidth = '24px';
     thumbWidth = '8px';
   }
-  return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &::-webkit-scrollbar {\n      width: ", ";\n      height: ", ";\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: var(--color-scroll-bar);\n      background-clip: padding-box;\n      border: ", " solid transparent;\n      border-radius: var(--border-radius);\n    }\n  "])), scrollbarWidth, scrollbarWidth, thumbWidth);
+  return (0, _styledComponents.css)`
+    &::-webkit-scrollbar {
+      width: ${scrollbarWidth};
+      height: ${scrollbarWidth};
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--color-scroll-bar);
+      background-clip: padding-box;
+      border: ${thumbWidth} solid transparent;
+      border-radius: var(--border-radius);
+    }
+  `;
 };
 var _default = exports.default = scrollbar;