@cashub/ui 0.10.3 → 0.10.4

package/package.json

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

package/select/Select.js

@@ -267,7 +267,7 @@ var Select = function Select(_ref) {
     }
 
     return placeholder;
-  }, [placeholder, handleOnDeselect, multiple, selectedOptions]);
+  }, [placeholder, handleOnDeselect, multiple, selectedOptions, disabled]);
   var optionItem = (0, _react.useMemo)(function () {
     if (optionList.length <= 0) return null;
     return optionList.map(function (option) {
@@ -578,6 +578,7 @@ var Select = function Select(_ref) {
       $fill: fill,
       fillReverse: fillReverse,
       onFocus: handleFocus,
+      placeholder: placeholder,
       children: [selectedItem, selectedOptions.length > 0 && !multiple && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
         onClick: function onClick() {
           onSelect('');
@@ -614,7 +615,7 @@ var Select = function Select(_ref) {
   });
 };
 
-var 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(--color-white);\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"])), function (_ref2) {
+var 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(--color-white);\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"])), function (_ref2) {
   var disabled = _ref2.disabled;
   return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
 }, function (_ref3) {
@@ -624,16 +625,19 @@ var Combobox = _styledComponents.default.div(_templateObject || (_templateObject
   var disabled = _ref4.disabled;
   return disabled && 'cursor: not-allowed;opacity: 0.5;';
 }, function (_ref5) {
-  var fullWidth = _ref5.fullWidth;
-  return fullWidth ? 'width: 100%' : 'max-width: 320px';
+  var placeholder = _ref5.placeholder;
+  return placeholder && 'color: var(--font-on-mute);';
 }, function (_ref6) {
-  var large = _ref6.large;
-  return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
+  var fullWidth = _ref6.fullWidth;
+  return fullWidth ? 'width: 100%' : 'max-width: 320px';
 }, function (_ref7) {
-  var $fill = _ref7.$fill;
-  return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
+  var large = _ref7.large;
+  return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
 }, function (_ref8) {
-  var fillReverse = _ref8.fillReverse;
+  var $fill = _ref8.$fill;
+  return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
+}, function (_ref9) {
+  var fillReverse = _ref9.fillReverse;
   return fillReverse && "\n      background: var(--color-background1);\n      border-color: transparent;\n    ";
 });