@cashub/ui 0.32.2 → 0.34.0

package/alert/Alert.js

@@ -0,0 +1,17 @@
+"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 Alert = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  color: var(--font-on-background);\n  padding: var(--spacing);\n\n  ", "\n"])), _ref => {
+  let {
+    backgroundReverse
+  } = _ref;
+  return backgroundReverse && 'background: var(--color-background2);';
+});
+var _default = exports.default = Alert;

package/alert/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Alert", {
+  enumerable: true,
+  get: function () {
+    return _Alert.default;
+  }
+});
+var _Alert = _interopRequireDefault(require("./Alert"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/form/Fieldset.js

@@ -0,0 +1,12 @@
+"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 Fieldset = _styledComponents.default.fieldset(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-s);\n  padding: var(--spacing-s);\n\n  &[disabled] {\n    border-color: var(--border-color-transparent);\n  }\n"])));
+var _default = exports.default = Fieldset;

package/form/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Checkbox", {
     return _Checkbox.default;
   }
 });
+Object.defineProperty(exports, "Fieldset", {
+  enumerable: true,
+  get: function () {
+    return _Fieldset.default;
+  }
+});
 Object.defineProperty(exports, "FormItem", {
   enumerable: true,
   get: function () {
@@ -70,6 +76,7 @@ Object.defineProperty(exports, "TreeView", {
   }
 });
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _Fieldset = _interopRequireDefault(require("./Fieldset"));
 var _FormItem = _interopRequireDefault(require("./FormItem"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _Label = _interopRequireDefault(require("./Label"));

package/index.js

@@ -19,6 +19,18 @@ Object.defineProperty(exports, "Tab", {
     return _Tab.default;
   }
 });
+var _alert = require("./alert");
+Object.keys(_alert).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _alert[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _alert[key];
+    }
+  });
+});
 var _animate = require("./animate");
 Object.keys(_animate).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.32.2",
+  "version": "0.34.0",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",

package/styles/GlobalStyle.js

@@ -9,7 +9,7 @@ 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-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)(_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 => {
   let {
     theme
   } = _ref;
@@ -173,46 +173,51 @@ const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject ||
   let {
     theme
   } = _ref33;
-  return theme.borderWidth;
+  return theme.borderColorTransparent;
 }, _ref34 => {
   let {
     theme
   } = _ref34;
-  return theme.borderRadiusS;
+  return theme.borderWidth;
 }, _ref35 => {
   let {
     theme
   } = _ref35;
-  return theme.borderRadius;
+  return theme.borderRadiusS;
 }, _ref36 => {
   let {
     theme
   } = _ref36;
-  return theme.borderRadiusL;
+  return theme.borderRadius;
 }, _ref37 => {
   let {
     theme
   } = _ref37;
-  return theme.borderRadiusRound;
+  return theme.borderRadiusL;
 }, _ref38 => {
   let {
     theme
   } = _ref38;
-  return theme.spacerXS;
+  return theme.borderRadiusRound;
 }, _ref39 => {
   let {
     theme
   } = _ref39;
-  return theme.spacerS;
+  return theme.spacerXS;
 }, _ref40 => {
   let {
     theme
   } = _ref40;
-  return theme.spacer;
+  return theme.spacerS;
 }, _ref41 => {
   let {
     theme
   } = _ref41;
+  return theme.spacer;
+}, _ref42 => {
+  let {
+    theme
+  } = _ref42;
   return theme.spacerL;
 });
 var _default = exports.default = GlobalStyle;

package/styles/theme/dark.theme.js

@@ -53,6 +53,7 @@ const darkTheme = {
   desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
     borderColor: colorStyle.colorGrey,
+    borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',
@@ -66,6 +67,7 @@ const darkTheme = {
   tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
     borderColor: colorStyle.colorGrey,
+    borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',
@@ -79,6 +81,7 @@ const darkTheme = {
   mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
     borderColor: colorStyle.colorGrey,
+    borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',

package/styles/theme/light.theme.js

@@ -53,6 +53,7 @@ const lightTheme = {
   desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
     borderColor: colorStyle.colorGrey,
+    borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',
@@ -66,6 +67,7 @@ const lightTheme = {
   tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
     borderColor: colorStyle.colorGrey,
+    borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',
@@ -79,6 +81,7 @@ const lightTheme = {
   mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
     borderColor: colorStyle.colorGrey,
+    borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',

package/styles/theme/white.theme.js

@@ -53,6 +53,7 @@ const whiteTheme = {
   desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
     borderColor: colorStyle.colorGrey,
+    borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',
@@ -66,6 +67,7 @@ const whiteTheme = {
   tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
     borderColor: colorStyle.colorGrey,
+    borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',
@@ -79,6 +81,7 @@ const whiteTheme = {
   mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
     borderColor: colorStyle.colorGrey,
+    borderColorTransparent: "".concat(colorStyle.colorGrey, "80"),
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',