@cashub/ui 0.26.0 → 0.26.2

package/package.json

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

package/select/Select.js

@@ -235,8 +235,10 @@ const Select = _ref => {
           }, value.id);
         });
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedSingle.default, {
-        children: selectedOptions[0].text
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectedSingle.default, {
+        children: [selectedOptions[0].icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          src: selectedOptions[0].icon
+        }), selectedOptions[0].text]
       });
     }
     return placeholder;
@@ -273,16 +275,8 @@ const Select = _ref => {
         focus: focusedOption && focusedOption.id === option.id.toString(),
         selected: option.selected,
         "aria-selected": option.selected,
-        children: [option.icon && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_figure.IconFigure, {
-            size: "medium",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.ImageFluid, {
-              crossOrigin: "anonymous",
-              src: option.icon,
-              alt: "",
-              roundedS: true
-            })
-          }), "\xA0"]
+        children: [option.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          src: option.icon
         }), option.text]
       }, option.id);
     });
@@ -560,45 +554,61 @@ const Select = _ref => {
     })]
   });
 };
-const Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  min-width: 160px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n  ", "\n  \n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref2 => {
+const Icon = _ref2 => {
   let {
-    disabled
+    src
   } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_figure.IconFigure, {
+      size: "medium",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.ImageFluid, {
+        crossOrigin: "anonymous",
+        src: src,
+        alt: "",
+        roundedS: true
+      })
+    }), "\xA0"]
+  });
+};
+const Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  min-width: 160px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n  ", "\n  \n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref3 => {
+  let {
+    disabled
+  } = _ref3;
   return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
-}, _ref3 => {
+}, _ref4 => {
   let {
     $display
-  } = _ref3;
+  } = _ref4;
   return $display && "\n      border-color: var(--color-primary);\n      outline: none;\n    ";
-}, _ref4 => {
+}, _ref5 => {
   let {
     disabled
-  } = _ref4;
+  } = _ref5;
   return disabled && 'cursor: not-allowed;opacity: 0.5;';
-}, _ref5 => {
+}, _ref6 => {
   let {
     placeholder
-  } = _ref5;
+  } = _ref6;
   return placeholder && 'color: var(--font-on-mute);';
-}, _ref6 => {
+}, _ref7 => {
   let {
     fullWidth
-  } = _ref6;
+  } = _ref7;
   return fullWidth ? 'width: 100%' : 'max-width: 320px';
-}, _ref7 => {
+}, _ref8 => {
   let {
     large
-  } = _ref7;
+  } = _ref8;
   return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
-}, _ref8 => {
+}, _ref9 => {
   let {
     $fill
-  } = _ref8;
+  } = _ref9;
   return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
-}, _ref9 => {
+}, _ref10 => {
   let {
     fillReverse
-  } = _ref9;
+  } = _ref10;
   return fillReverse && "\n      background: var(--color-background1);\n      border-color: transparent;\n    ";
 });
 Combobox.displayName = 'Combobox';

package/select/subComponent/SelectedSingle.js

@@ -8,6 +8,6 @@ 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 SelectedSingle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--font-on-background);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+const SelectedSingle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: var(--font-on-background);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 SelectedSingle.displayName = 'SelectedSingle';
 var _default = exports.default = SelectedSingle;

package/tooltip/Tooltip.js

@@ -91,11 +91,11 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     })
   });
 });
-const TooltipTooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  white-space: pre-line;\n  visibility: ", ";\n  border: 1px solid var(--border-color);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  box-shadow: var(--box-shadow);\n  border-radius: calc(var(--border-radius) / 2);\n  padding: var(--spacing-xs);\n  z-index: 80;\n  text-align: left;\n  font-size: var(--font-body1);\n  font-weight: var(--font-normal);\n  line-height: 1.5;\n  word-break: break-word;\n  max-width: 50vw;\n"])), _ref2 => {
+const TooltipTooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  white-space: pre-line;\n  display: ", ";\n  border: 1px solid var(--border-color);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  box-shadow: var(--box-shadow);\n  border-radius: calc(var(--border-radius) / 2);\n  padding: var(--spacing-xs);\n  z-index: 80;\n  text-align: left;\n  font-size: var(--font-body1);\n  font-weight: var(--font-normal);\n  line-height: 1.5;\n  word-break: break-word;\n  max-width: 50vw;\n"])), _ref2 => {
   let {
     $display
   } = _ref2;
-  return $display ? 'visible' : 'hidden';
+  return $display ? 'block' : 'none';
 });
 const TooltipArrow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: ", ";\n  top: -0.5rem;\n  left: 0;\n  width: 1rem;\n  height: 1rem;\n\n  &::before {\n    position: absolute;\n    display: block;\n    content: '';\n    border-color: transparent;\n    border-style: solid;\n    top: 0;\n    border-width: 0 0.5rem 0.5rem 0.5rem;\n    border-bottom-color: var(--border-color);\n  }\n"])), _ref3 => {
   let {