kupos-ui-components-lib 9.6.5 → 9.6.6

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -262,7 +262,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         ? "14px"
                         : "",
                 } },
-                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
+                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:20%_30%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
                     React.createElement("div", { className: "flex flex-col gap-[5px]" },
                         React.createElement("div", null,
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto]  ${isSoldOut ? "grayscale" : ""}` }),

package/dist/styles.css

@@ -479,8 +479,8 @@
 .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
   grid-template-columns: 14% 40% 0.5% 24% 13.5%;
 }
-.\[grid-template-columns\:22\%_28\%_2\.5\%_24\%_15\.5\%\] {
-  grid-template-columns: 22% 28% 2.5% 24% 15.5%;
+.\[grid-template-columns\:20\%_30\%_2\.5\%_24\%_15\.5\%\] {
+  grid-template-columns: 20% 30% 2.5% 24% 15.5%;
 }
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1061,6 +1061,11 @@
     }
   }
 }
+.max-\[399px\]\:left-\[53\%\] {
+  @media (width < 399px) {
+    left: 53%;
+  }
+}
 .min-\[420\]\:text-\[12px\] {
   @media (width >= 420) {
     font-size: 12px;

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -21,16 +21,20 @@ const getCleanedDepTime = (raw) => {
     }
     return { cleaned, hasAM, hasPM };
 };
-const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
-    React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
-        React.createElement("div", null,
-            " ",
-            label ? (React.createElement("div", { className: "w-[60px]" }, label)) : (React.createElement("div", { className: "w-[12px] h-auto mr-[5px]" },
-                React.createElement("img", { src: icon, alt: alt, className: `w-[12px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
-        React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1 } },
-            React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(date)),
-            React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
-            React.createElement("div", { className: "font-[900] relative black-text" }, timeContent)))));
+const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
+    const formattedDate = DateService.getServiceItemDate(date);
+    const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
+    return React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+        React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
+            React.createElement("div", null,
+                " ",
+                label ? (React.createElement("div", { className: "w-[60px]" }, label)) : (React.createElement("div", { className: "w-[12px] h-auto mr-[5px]" },
+                    React.createElement("img", { src: icon, alt: alt, className: `w-[12px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
+            React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1 } },
+                React.createElement("span", { className: "cursor-pointer black-text" }, formattedDate),
+                React.createElement("div", { className: `absolute left-[50%] ${dotPositionClass}` }, "\u2022"),
+                React.createElement("div", { className: "font-[900] relative black-text" }, timeContent))));
+};
 function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -463,7 +463,7 @@ function ServiceItemPB({
                     : "",
               }}
             >
-              <div className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center">
+              <div className="grid text-[#464647] w-full [grid-template-columns:20%_30%_2.5%_24%_15.5%] gap-x-[2%] items-center">
                 {/* OPERATOR LOGO */}
                 <div className="flex flex-col gap-[5px]">
                   <div>

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -65,8 +65,10 @@ const TimeRow: React.FC<TimeRowProps> = ({
   date,
   timeContent,
   isSoldOut,
-}) => (
-  <div
+}) => {
+  const formattedDate = DateService.getServiceItemDate(date);
+  const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
+  return <div
     className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
       isSoldOut ? "text-[#c0c0c0]" : ""
     }`}
@@ -93,14 +95,14 @@ const TimeRow: React.FC<TimeRowProps> = ({
         style={{ flex: 1 }}
       >
         <span className="cursor-pointer black-text">
-          {DateService.getServiceItemDate(date)}
+          {formattedDate}
         </span>
-        <div className="absolute left-[50%]">•</div>
+        <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
         <div className="font-[900] relative black-text">{timeContent}</div>
       </div>
     </div>
-  </div>
-);
+  </div>;
+};
 
 function DateTimeSectionMobile({
   onBookButtonPress,