@cashub/ui 0.22.3 → 0.22.4

package/package.json

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

package/table/Table.js

@@ -180,6 +180,7 @@ const Table = _ref => {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableDataCell, {
           "data-label": title,
           backgroundReverse: backgroundReverse,
+          border: rowConfig.border,
           custom: isCustom,
           ...props,
           children: renderedData
@@ -261,54 +262,54 @@ const Table = _ref => {
 };
 const ResponsiveTable = _styledComponents.default.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-collapse: separate;\n  margin-top: calc(var(--spacing-s) * -1);\n  border-spacing: 0 var(--spacing-s);\n  color: var(--font-on-background);\n  table-layout: fixed;\n"])));
 const TableHead = _styledComponents.default.thead(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), _media.default.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
-const BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &:hover {\n    > td {\n      border-color: var(--color-primary);\n      border-width: var(--border-width);\n    }\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n    \n  ", "\n"])), _ref2 => {
+const BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &:hover {\n    > td {\n      border-color: var(--color-primary);\n      border-width: var(--border-width);\n    }\n  }\n\n  ", "\n\n  ", "\n    \n  ", "\n"])), _ref2 => {
   let {
     active,
     primary
   } = _ref2;
   return (active || primary) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      > td {\n        background: var(--color-background3);\n      }\n    "])));
 }, _ref3 => {
-  let {
-    border
-  } = _ref3;
-  return border && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      > td {\n        border-color: var(--color-white);\n        border-width: 3px;\n      }\n    "])));
-}, _ref4 => {
   let {
     clickable
-  } = _ref4;
+  } = _ref3;
   return clickable && 'pointer: cursor;';
-}, _media.default.mobile(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    overflow: hidden;\n    position: relative;\n    transition: .3s;\n    display: block;\n    margin-bottom: 0.75rem;\n    padding: var(--spacing-xs) var(--spacing-s);\n    background: var(\n      --color-background", "\n    );\n    border-radius: var(--border-radius);\n    transition: .3s;\n    border: 1px solid transparent;\n\n    &:hover {\n      border: var(--border-width) solid var(--color-primary);\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), _ref5 => {
+}, _media.default.mobile(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    overflow: hidden;\n    position: relative;\n    transition: .3s;\n    display: block;\n    margin-bottom: 0.75rem;\n    padding: var(--spacing-xs) var(--spacing-s);\n    background: var(\n      --color-background", "\n    );\n    border-radius: var(--border-radius);\n    transition: .3s;\n    border: 1px solid transparent;\n\n    &:hover {\n      border: var(--border-width) solid var(--color-primary);\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), _ref4 => {
   let {
     backgroundReverse
-  } = _ref5;
+  } = _ref4;
   return backgroundReverse ? 1 : 2;
-}, _ref6 => {
+}, _ref5 => {
   let {
     active,
     primary
-  } = _ref6;
-  return (active || primary) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        background: var(--color-background3);\n      "])));
-}, _ref7 => {
+  } = _ref5;
+  return (active || primary) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        background: var(--color-background3);\n      "])));
+}, _ref6 => {
   let {
     border
-  } = _ref7;
-  return border && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        border-color: var(--color-white);\n        border-width: 3px;\n      "])));
-}, _ref8 => {
+  } = _ref6;
+  return border && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        border-color: var(--color-white);\n        border-width: 3px;\n      "])));
+}, _ref7 => {
   let {
     noData
-  } = _ref8;
-  return noData && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        height: 168px;\n\n        > td {\n          &:first-child:before {\n            display: none;\n          }\n        }\n      "])));
+  } = _ref7;
+  return noData && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        height: 168px;\n\n        > td {\n          &:first-child:before {\n            display: none;\n          }\n        }\n      "])));
 }));
-const TableDataCell = _styledComponents.default.td(_templateObject11 || (_templateObject11 = _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    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n\n  ", "\n\n  ", "\n"])), _ref9 => {
+const TableDataCell = _styledComponents.default.td(_templateObject10 || (_templateObject10 = _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  ", "\n\n  > span {\n    display: inline-block;\n    width: 100%;\n    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n\n  ", "\n\n  ", "\n"])), _ref8 => {
   let {
     backgroundReverse
-  } = _ref9;
+  } = _ref8;
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
-}, _ref10 => {
+}, _ref9 => {
   let {
     center
-  } = _ref10;
+  } = _ref9;
   return center ? 'center' : 'left';
+}, _ref10 => {
+  let {
+    border
+  } = _ref10;
+  return border && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      border-top: 3px solid var(--color-white);\n      border-bottom: 3px solid var(--color-white);\n      &:first-child {\n        border-left: 3px solid var(--color-white);\n      }\n      &:last-child {\n        border-right: 3px solid var(--color-white);\n      }\n    "])));
 }, _ref11 => {
   let {
     noData