@pelcro/react-pelcro-js 4.0.0-alpha.94 → 4.0.0-alpha.95

package/dist/index.cjs.js

@@ -21729,6 +21729,8 @@ var StateManagedSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 var StateManagedSelect$1 = StateManagedSelect;
 
+// Custom option component to show images and labels
+
 const customSingleValue = ({
   data
 }) => /*#__PURE__*/React__default['default'].createElement("div", {
@@ -21752,11 +21754,7 @@ const customOption = props => {
   return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
     ref: innerRef
   }, innerProps, {
-    className: "custom-option",
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
+    className: "custom-option"
   }), /*#__PURE__*/React__default['default'].createElement("img", {
     src: data.image,
     alt: data.label,

package/dist/index.esm.js

@@ -21699,6 +21699,8 @@ var StateManagedSelect = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 var StateManagedSelect$1 = StateManagedSelect;
 
+// Custom option component to show images and labels
+
 const customSingleValue = ({
   data
 }) => /*#__PURE__*/React__default.createElement("div", {
@@ -21722,11 +21724,7 @@ const customOption = props => {
   return /*#__PURE__*/React__default.createElement("div", Object.assign({
     ref: innerRef
   }, innerProps, {
-    className: "custom-option",
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
+    className: "custom-option"
   }), /*#__PURE__*/React__default.createElement("img", {
     src: data.image,
     alt: data.label,

package/dist/pelcro.css

@@ -1943,6 +1943,22 @@ Add the correct display in Chrome and Safari.
   display: flex !important;
 }
 
+.custom-option {
+  display: flex;
+  align-items: center;
+  cursor: pointer; /* Show pointer cursor on hover */
+  padding: 10px; /* Add padding for better hover area */
+}
+
+.custom-option:hover {
+  background-color: #f0f0f0; /* Highlight background on hover */
+}
+
+.custom-single-value {
+  display: flex;
+  align-items: center;
+}
+
 /* 
 styling is copied from react-easy-crop/react-easy-crop.css 
 in order to scope selectors under pelcro-root
@@ -4087,6 +4103,45 @@ apple-pay-button {
 
 /* purgecss start ignore */
 
+.custom-single-value {
+  display: flex;
+  align-items: center;
+}
+
+.custom-option {
+  display: flex;
+  align-items: center;
+  padding: 5px;
+}
+
+.custom-option img {
+  margin-right: 10px;
+}
+
+.css-hlgwow {
+  display: flex !important;
+}
+
+.custom-option {
+  display: flex;
+  align-items: center;
+  cursor: pointer; /* Show pointer cursor on hover */
+  padding: 10px; /* Add padding for better hover area */
+}
+
+.custom-option:hover {
+  background-color: #f0f0f0; /* Highlight background on hover */
+}
+
+.custom-single-value {
+  display: flex;
+  align-items: center;
+}
+
+/* purgecss end ignore */
+
+/* purgecss start ignore */
+
 .toggle-switch {
   position: relative;
   display: inline-block;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "4.0.0-alpha.94",
+  "version": "4.0.0-alpha.95",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",