kupos-ui-components-lib 9.4.4 → 9.4.6

package/dist/components/ServiceItem/RatingHover.js

@@ -11,7 +11,7 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
         const val = parseFloat(details[key]);
         return isNaN(val) ? 0 : +val.toFixed(1);
     };
-    return (React.createElement("div", { className: "flex items-center relative cursor-pointer group" },
+    return (React.createElement("div", { className: "flex items-center relative cursor-pointer group hover:z-[500]" },
         React.createElement("div", { className: "w-[18px] h-auto mr-[4px]", style: { opacity: isSoldOut ? 0.5 : 1 } },
             React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}` })),
         React.createElement("span", { className: "text-[#464647] text-[13.33px]", style: { opacity: isSoldOut ? 0.5 : 1 } }, typeof serviceItem.operator_details[1] === "number"

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -115,7 +115,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             borderWidth: "3px 3px 0 3px",
             borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
             background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
-            zIndex: 2,
+            // zIndex: 1,
         }
         : {};
     const renderIcon = (iconKey, size = "14px") => {
@@ -292,7 +292,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px]  rounded-b-[14px] text-[14px]", style: {
                 background: offerGradient,
                 opacity: isSoldOut ? 0.5 : 1,
-                zIndex: isPeru ? undefined : -2,
+                zIndex: isPeru ? -1 : -2,
                 // zIndex: hasOfferText ? 2 : isPeru ? 1 : -2,
             } },
             React.createElement("div", { className: "flex  justify-between items-center w-full" },

package/dist/styles.css

@@ -135,6 +135,12 @@
 .z-\[1\] {
   z-index: 1;
 }
+.z-\[100\] {
+  z-index: 100;
+}
+.z-\[200\] {
+  z-index: 200;
+}
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -1027,6 +1033,13 @@
     }
   }
 }
+.hover\:z-\[500\] {
+  &:hover {
+    @media (hover: hover) {
+      z-index: 500;
+    }
+  }
+}
 .hover\:bg-\[\#FFE5E5\] {
   &:hover {
     @media (hover: hover) {

package/dist/ui/AmenitiesBlock.js

@@ -72,10 +72,10 @@ const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getA
                     React.createElement(TooltipArrow, { color: colors.tooltipColor }),
                     React.createElement("div", { className: "text-xs whitespace-nowrap" }, getAmenityName(baseName.split("_").join(" "))))));
         }),
-        shouldShowPlus && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
-            React.createElement("div", { className: "group" },
+        shouldShowPlus && (React.createElement("div", { className: "relative ml-1 cursor-pointer z-[200] hover:z-[500]" },
+            React.createElement("div", { className: "relative group cursor-pointer" },
                 React.createElement("img", { src: ((_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.plus) ||
-                        "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus", style: { opacity: isSoldOut ? 0.5 : 1 } }),
+                        "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px] z-[100]", alt: "plus", style: { opacity: isSoldOut ? 0.5 : 1 } }),
                 React.createElement("div", { style: { zIndex: 100 }, className: TOOLTIP_CLASS },
                     React.createElement(TooltipArrow, { color: colors.tooltipColor }),
                     React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md", style: { backgroundColor: colors.tooltipColor } }, plusAmenities.map((val, key) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.4.4",
+  "version": "9.4.6",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/ServiceItem/RatingHover.tsx

@@ -30,7 +30,7 @@ const RatingHover: React.FC<RatingHoverProps> = ({
   };
 
   return (
-    <div className="flex items-center relative cursor-pointer group">
+    <div className="flex items-center relative cursor-pointer group hover:z-[500]">
       <div
         className="w-[18px] h-auto mr-[4px]"
         style={{ opacity: isSoldOut ? 0.5 : 1 }}

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -195,7 +195,7 @@ function ServiceItemPB({
           borderWidth: "3px 3px 0 3px",
           borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
           background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
-          zIndex: 2,
+          // zIndex: 1,
         }
       : {};
 
@@ -616,7 +616,7 @@ function ServiceItemPB({
               style={{
                 background: offerGradient,
                 opacity: isSoldOut ? 0.5 : 1,
-                zIndex: isPeru ? undefined : -2,
+                zIndex: isPeru ? -1 : -2,
                 // zIndex: hasOfferText ? 2 : isPeru ? 1 : -2,
               }}
             >

package/src/ui/AmenitiesBlock.tsx

@@ -130,14 +130,14 @@ const AmenitiesBlock = ({
 
       {/* PLUS ICON */}
       {shouldShowPlus && (
-        <div className="relative ml-1 cursor-pointer">
-          <div className="group">
+        <div className="relative ml-1 cursor-pointer z-[200] hover:z-[500]">
+          <div className="relative group cursor-pointer">
             <img
               src={
                 serviceItem.icons?.plus ||
                 "/images/icons/amenities/icon_plus.svg"
               }
-              className="w-[16px] h-[16px]"
+              className="w-[16px] h-[16px] z-[100]"
               alt="plus"
               style={{ opacity: isSoldOut ? 0.5 : 1 }}
             />

package/tailwind.config.js

@@ -35,5 +35,8 @@ module.exports = {
     "flex",
     "justify-between",
     "items-center",
+    "hidden",
+    "group-hover:block",
+    "hover:z-[500]",
   ],
 };