@cashub/ui 0.13.7 → 0.13.8

package/package.json

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

package/paginate/Paginate.js

@@ -15,7 +15,7 @@ var _hooks = require("@cashub/hooks");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -91,19 +91,19 @@ var Container = _styledComponents.default.ul(_templateObject || (_templateObject
   return alignRight && 'justify-content: flex-end';
 });
 
-var Link = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  line-height: 37px;\n  font-size: var(--font-body1);\n  color: var(--font-on-primary);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n  transition: 0.3s;\n\n  &:not(:last-child) {\n    margin-right: var(--spacing-xs);\n  }\n\n  ", ";\n\n  ", ";\n\n  &:hover {\n    ", "\n  }\n\n  &.paginationDots {\n    cursor: default;\n  }\n"])), function (_ref2) {
+var Link = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  line-height: 37px;\n  font-size: var(--font-body1);\n  color: var(--font-on-background);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n  transition: 0.3s;\n\n  &:not(:last-child) {\n    margin-right: var(--spacing-xs);\n  }\n\n  ", ";\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n  &.paginationDots {\n    cursor: default;\n  }\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
   return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: no-drop;\n    "])));
 }, function (_ref3) {
   var active = _ref3.active;
-  return active && 'background-color: var(--color-primary)';
+  return active && "\n      background-color: var(--color-primary);\n      color: var(--font-on-primary);\n    ";
 }, function (_ref4) {
   var disabled = _ref4.disabled,
       className = _ref4.className;
-  return !disabled && !className && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background-color: var(--color-primary);\n      "])));
+  return !disabled && !className && "\n        background-color: var(--color-primary);\n        color: var(--font-on-primary);\n      ";
 });
 
-var Icon = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: var(--font-body1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"])));
+var Icon = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: var(--font-body1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"])));
 
 var _default = Paginate;
 exports.default = _default;

package/styles/theme/light.theme.js

@@ -17,13 +17,13 @@ var colorStyle = {
   colorWhite: '#ffffff',
   colorDark: '#353351',
   colorGrey: '#5b5f6f',
-  colorPrimary: '#91A2F8',
+  colorPrimary: '#3661ec',
   colorSuccess: '#93E7E2',
   colorWarning: '#FFDFAF',
   colorDanger: '#F495A1',
-  colorHover: 'rgba(89, 126, 247, 0.2)',
-  colorActive: 'rgba(89, 126, 247, 0.2)',
-  scrollBarColor: 'rgba(89, 126, 247, 0.3)',
+  colorHover: 'rgba(54, 97, 236, 0.2)',
+  colorActive: 'rgba(54, 97, 236, 0.2)',
+  scrollBarColor: 'rgba(54, 97, 236, 0.3)',
   bgColor1: '#F0ECFF',
   bgColor2: '#F8F4FF',
   bgColor3: '#E6E1FF',
@@ -41,12 +41,12 @@ var fontStyle = {
   fontFamily: 'Helvetica',
   fontWeightNormal: '400',
   fontWeightBold: 'bold',
-  fontOnPrimary: colorStyle.colorDark,
+  fontOnPrimary: colorStyle.bgColor2,
   fontOnSuccess: colorStyle.colorDark,
   fontOnWarning: colorStyle.colorDark,
   fontOnDanger: colorStyle.colorDark,
   fontOnBg: colorStyle.colorDark,
-  fontMutedColor: 'rgba(53, 51, 81, 0.5)'
+  fontMutedColor: 'rgba(53, 51, 81, 0.6)'
 }; // Theme stylesheet
 
 var lightTheme = {

package/styles/theme/white.theme.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// Currently, some style is all same for all viewport size
+// Common color style
+var colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#353351',
+  colorGrey: '#5b5f6f',
+  colorPrimary: '#345FEB',
+  colorSuccess: '#11D8CD',
+  colorWarning: '#FFCA7A',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(52, 95, 235, 0.2)',
+  colorActive: 'rgba(52, 95, 235, 0.2)',
+  scrollBarColor: 'rgba(52, 95, 235, 0.3)',
+  bgColor1: '#EEEEEE',
+  bgColor2: '#F7F7F7',
+  bgColor3: '#FFFFFF',
+  backdropBg: 'rgba(0, 0, 0, 0.5)'
+}; // Common font style
+
+var fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.bgColor2,
+  fontOnSuccess: colorStyle.colorDark,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorDark,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(53, 51, 81, 0.6)'
+}; // Theme stylesheet
+
+var whiteTheme = {
+  desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  }),
+  tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }),
+  mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  })
+};
+var _default = whiteTheme;
+exports.default = _default;

package/table/Table.js

@@ -302,7 +302,7 @@ var BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4
   return noData && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        height: 168px;\n\n        > td {\n          &:first-child:before {\n            display: none;\n          }\n        }\n      "])));
 }));
 
-var TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  height: 48px;\n  background: ", ";\n  padding: 0 var(--spacing-xs);\n  max-width: 0px;\n  text-align: ", ";\n  vertical-align: middle;\n  border-top: var(--border-width) solid transparent;\n  border-bottom: var(--border-width) solid transparent;\n  transition: 0.3s;\n\n  &:first-child {\n    border-left: var(--border-width) solid transparent;\n    border-top-left-radius: var(--border-radius-l);\n    border-bottom-left-radius: var(--border-radius-l);\n    padding-left: var(--spacing);\n  }\n\n  &:last-child {\n    border-right: var(--border-width) solid transparent;\n    border-top-right-radius: var(--border-radius-l);\n    border-bottom-right-radius: var(--border-radius-l);\n    padding-right: var(--spacing);\n  }\n\n  > span {\n    display: inline-block;\n    width: 100%;\n    padding: 0 2px;\n    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref8) {
+var TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  height: 48px;\n  background: ", ";\n  padding: 0 var(--spacing-xs);\n  max-width: 0px;\n  text-align: ", ";\n  vertical-align: middle;\n  border-top: var(--border-width) solid transparent;\n  border-bottom: var(--border-width) solid transparent;\n  transition: border-color 0.3s;\n\n  &:first-child {\n    border-left: var(--border-width) solid transparent;\n    border-top-left-radius: var(--border-radius-l);\n    border-bottom-left-radius: var(--border-radius-l);\n    padding-left: var(--spacing);\n  }\n\n  &:last-child {\n    border-right: var(--border-width) solid transparent;\n    border-top-right-radius: var(--border-radius-l);\n    border-bottom-right-radius: var(--border-radius-l);\n    padding-right: var(--spacing);\n  }\n\n  > span {\n    display: inline-block;\n    width: 100%;\n    padding: 0 2px;\n    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref8) {
   var backgroundReverse = _ref8.backgroundReverse;
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
 }, function (_ref9) {

package/wizard/Wizard.js

@@ -201,7 +201,7 @@ var Wizard = function Wizard(props) {
 
 var 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    "]))));
 
-var 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  &.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\n  &:hover {\n    > div > p {\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"])), _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        "]))));
+var 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        "]))));
 
 var 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      "]))));