@mseva/upyog-ui-module-ads 1.1.60 → 1.1.62

package/dist/index.modern.js

@@ -664,11 +664,7 @@ const ADSSearchApplication = ({
     columns: columns,
     getCellProps: cellInfo => {
       return {
-        style: {
-          minWidth: cellInfo.column.Header === t("ADS_INBOX_APPLICATION_NO") ? "240px" : "",
-          padding: "20px 18px",
-          fontSize: "16px"
-        }
+        className: cellInfo.column.Header === t("ADS_INBOX_APPLICATION_NO") ? "ads-inbox-cell" : "ads-default-cell"
       };
     },
     onPageSizeChange: onPageSizeChange,
@@ -18987,11 +18983,7 @@ const SearchApplication = ({
   return /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmitInput)
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "search-container",
-    style: {
-      width: "auto",
-      marginLeft: isInboxPage ? "24px" : "revert"
-    }
+    className: `search-container ads-search-container ${isInboxPage ? "ads-search-container--inbox" : "ads-search-container--revert"}`
   }, /*#__PURE__*/React.createElement("div", {
     className: "search-complaint-container"
   }, (type === "mobile" || mobileView) && /*#__PURE__*/React.createElement("div", {
@@ -19035,28 +19027,12 @@ const SearchApplication = ({
       control: control,
       defaultValue: ""
     })), formState !== null && formState !== void 0 && (_formState$dirtyField = formState.dirtyFields) !== null && _formState$dirtyField !== void 0 && _formState$dirtyField[input.name] ? /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontWeight: "700",
-        color: "rgba(212, 53, 28)",
-        paddingLeft: "8px",
-        marginTop: "-20px",
-        fontSize: "12px"
-      },
-      className: "inbox-search-form-error"
+      className: "inbox-search-form-error ads-search-error"
     }, formState === null || formState === void 0 ? void 0 : (_formState$errors = formState.errors) === null || _formState$errors === void 0 ? void 0 : (_formState$errors$inp = _formState$errors[input.name]) === null || _formState$errors$inp === void 0 ? void 0 : _formState$errors$inp.message) : null);
   }), isInboxPage && /*#__PURE__*/React.createElement("div", {
-    style: {
-      gridColumn: "2/3",
-      textAlign: "right",
-      paddingTop: "10px"
-    },
-    className: "input-fields"
+    className: "input-fields ads-search-inbox-clear"
   }, /*#__PURE__*/React.createElement("div", null, clearAll())), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxWidth: "unset",
-      marginLeft: "unset"
-    },
-    className: "search-submit-wrapper"
+    className: "search-submit-wrapper ads-search-submit-wrapper"
   }, /*#__PURE__*/React.createElement(SubmitBar, {
     className: "submit-bar-search",
     label: t("ES_COMMON_SEARCH"),
@@ -19654,15 +19630,7 @@ const EmployeeApp = ({
   return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "ground-container"
   }, !isRes ? /*#__PURE__*/React.createElement("div", {
-    style: isNewRegistration ? {
-      marginLeft: "12px",
-      display: "flex",
-      alignItems: "center"
-    } : {
-      marginLeft: "-4px",
-      display: "flex",
-      alignItems: "center"
-    }
+    className: `ads-registration-row ${isNewRegistration ? "ads-registration-row--new" : "ads-registration-row--existing"}`
   }, /*#__PURE__*/React.createElement(BackButton, {
     location: location
   })) : null, /*#__PURE__*/React.createElement(PrivateRoute, {
@@ -19733,11 +19701,7 @@ const ReservationTimer = ({
   if (!expiry) return null;
   if (remaining !== null && remaining <= 0) {
     return /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: "16px",
-        color: "red",
-        fontWeight: 800
-      }
+      className: "ads-timer-expired"
     }, t("ADS_SLOTS_EXPIRED"));
   }
   if (remaining === null) return null;
@@ -19745,19 +19709,9 @@ const ReservationTimer = ({
   const seconds = Math === null || Math === void 0 ? void 0 : Math.floor(remaining % 60000 / 1000).toString().padStart(2, "0");
   const isCritical = remaining <= 60 * 1000;
   return /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: isCritical ? "red" : "#2947a3",
-      fontWeight: 600,
-      fontSize: "14px",
-      marginLeft: "8px"
-    }
+    className: `ads-timer ${isCritical ? "ads-timer--critical" : ""}`
   }, t("ADS_PAYMENT_TIMER"), /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontSize: "16px",
-      fontWeight: 900,
-      color: "red",
-      marginLeft: "4px"
-    }
+    className: "ads-timer-countdown"
   }, minutes, ":", seconds));
 };
 
@@ -19912,33 +19866,6 @@ const ADSMyApplications = () => {
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
   const currentItems = (applications === null || applications === void 0 ? void 0 : applications.slice(indexOfFirstItem, indexOfLastItem)) || [];
   const totalPages = Math.ceil(((applications === null || applications === void 0 ? void 0 : applications.length) || 0) / itemsPerPage);
-  const styles = {
-    paginationControls: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      gap: "12px",
-      margin: "20px 0"
-    },
-    paginationBtn: {
-      backgroundColor: "#2947a3",
-      color: "#fff",
-      border: "none",
-      padding: "8px 12px",
-      borderRadius: "50%",
-      fontSize: "18px",
-      cursor: "pointer",
-      transition: "background-color 0.2s ease"
-    },
-    disabledBtn: {
-      backgroundColor: "#ccc",
-      cursor: "not-allowed"
-    },
-    paginationInfo: {
-      fontWeight: 500,
-      color: "#333"
-    }
-  };
   if (isLoading) return /*#__PURE__*/React.createElement(Loader$2, null);
   return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, null, `${t("ADS_MY_BOOKINGS_HEADER")} ${applications ? `(${applications.length})` : ""}`), /*#__PURE__*/React.createElement("div", null, (currentItems === null || currentItems === void 0 ? void 0 : currentItems.length) > 0 && currentItems.map((application, index) => /*#__PURE__*/React.createElement("div", {
     key: index
@@ -19948,17 +19875,11 @@ const ADSMyApplications = () => {
     buttonLabel: t("ADS_SUMMARY"),
     refetchBookings: refetch
   }))), !(applications !== null && applications !== void 0 && applications.length) > 0 && /*#__PURE__*/React.createElement("p", {
-    style: {
-      marginLeft: "16px",
-      marginTop: "16px"
-    }
+    className: "ads-applications-empty"
   }, t("ADS_NO_APPLICATION_FOUND_MSG")), (applications === null || applications === void 0 ? void 0 : applications.length) > itemsPerPage && /*#__PURE__*/React.createElement("div", {
-    style: styles.paginationControls
+    className: "ads-pagination-controls"
   }, /*#__PURE__*/React.createElement("button", {
-    style: {
-      ...styles.paginationBtn,
-      ...(currentPage === 1 ? styles.disabledBtn : {})
-    },
+    className: `ads-pagination-btn ${currentPage === 1 ? "ads-pagination-btn--disabled" : ""}`,
     disabled: currentPage === 1,
     onClick: () => {
       setLoadingPage(true);
@@ -19968,12 +19889,9 @@ const ADSMyApplications = () => {
       }, 500);
     }
   }, "\u2190"), /*#__PURE__*/React.createElement("span", {
-    style: styles.paginationInfo
+    className: "ads-pagination-info"
   }, `${indexOfFirstItem + 1}-${Math.min(indexOfLastItem, applications.length)} of ${applications.length}`), /*#__PURE__*/React.createElement("button", {
-    style: {
-      ...styles.paginationBtn,
-      ...(currentPage === totalPages ? styles.disabledBtn : {})
-    },
+    className: `ads-pagination-btn ${currentPage === totalPages ? "ads-pagination-btn--disabled" : ""}`,
     disabled: currentPage === totalPages,
     onClick: () => {
       setLoadingPage(true);
@@ -19983,18 +19901,11 @@ const ADSMyApplications = () => {
       }, 500);
     }
   }, "\u2192"))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginLeft: "16px",
-      marginTop: "16px"
-    }
+    className: "ads-new-booking"
   }, t("PTR_TEXT_NOT_ABLE_TO_FIND_THE_APPLICATION"), " ", /*#__PURE__*/React.createElement(Link, {
     to: "/digit-ui/citizen/ads/bookad/searchads"
   }, /*#__PURE__*/React.createElement("button", {
-    style: {
-      padding: "8px opx",
-      fontWeight: "700",
-      display: "block"
-    }
+    className: "ads-new-booking-btn"
   }, t("ADS_NEW_BOOKING") + " +"))));
 };
 
@@ -22250,47 +22161,23 @@ const ADSCartDetails$1 = ({
     accessor: row => row.nightLight ? t("ADS_YES") : t("ADS_NO")
   }];
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "1rem"
-    }
+    className: "ads-cart-details"
   }, (cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.length) === 0 ? /*#__PURE__*/React.createElement("p", {
-    style: {
-      padding: "12px",
-      color: "#666"
-    }
+    className: "ads-cart-empty"
   }, t("ADS_NO_ADVERTISMENT_DETAILS")) : cartDetails === null || cartDetails === void 0 ? void 0 : cartDetails.map((item, idx) => {
     var _item$ad, _item$ad2, _item$ad3, _item$ad4, _item$slots;
     const key = getKey(item === null || item === void 0 ? void 0 : item.ad);
     const isOpen = expanded === null || expanded === void 0 ? void 0 : expanded.includes(key);
     return /*#__PURE__*/React.createElement("div", {
       key: idx,
-      style: {
-        marginBottom: "16px",
-        border: "1px solid #ddd",
-        borderRadius: "8px",
-        overflow: "hidden"
-      }
+      className: "ads-cart-item"
     }, /*#__PURE__*/React.createElement("div", {
       onClick: () => toggleExpand(key),
-      style: {
-        background: "#f9f9f9",
-        padding: "10px 14px",
-        fontWeight: 600,
-        fontSize: "14px",
-        borderBottom: "1px solid #ddd",
-        cursor: "pointer",
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center"
-      }
+      className: "ads-cart-item-header ads-cart-item-header--clickable"
     }, /*#__PURE__*/React.createElement("span", null, t((item === null || item === void 0 ? void 0 : (_item$ad = item.ad) === null || _item$ad === void 0 ? void 0 : _item$ad.name) ?? (item === null || item === void 0 ? void 0 : (_item$ad2 = item.ad) === null || _item$ad2 === void 0 ? void 0 : _item$ad2.location)), item !== null && item !== void 0 && (_item$ad3 = item.ad) !== null && _item$ad3 !== void 0 && _item$ad3.amount ? ` — ₹${((item === null || item === void 0 ? void 0 : (_item$ad4 = item.ad) === null || _item$ad4 === void 0 ? void 0 : _item$ad4.amount) * 1.18 * (item === null || item === void 0 ? void 0 : (_item$slots = item.slots) === null || _item$slots === void 0 ? void 0 : _item$slots.length)).toFixed(2)}` : ""), /*#__PURE__*/React.createElement("span", {
-      style: {
-        fontSize: "18px"
-      }
+      className: "ads-cart-item-toggle"
     }, isOpen ? "▾" : "▸")), isOpen && /*#__PURE__*/React.createElement("div", {
-      style: {
-        overflowX: "auto"
-      }
+      className: "ads-cart-table"
     }, /*#__PURE__*/React.createElement(Table, {
       t: t,
       data: item.slots,
@@ -22298,13 +22185,7 @@ const ADSCartDetails$1 = ({
       disableSort: true,
       isPaginationRequired: false,
       getCellProps: cell => ({
-        style: {
-          padding: "12px 14px",
-          fontSize: "14px",
-          borderBottom: "1px solid #f0f0f0",
-          textAlign: "left",
-          whiteSpace: "nowrap"
-        }
+        className: "ads-cart-table-cell"
       })
     })));
   }));
@@ -23482,60 +23363,59 @@ const StepWrapper = ({
   const {
     t
   } = useTranslation();
-  const stepStyle = isActive => ({
+  const stepStyle = (isActive, isLast) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end",
-    flex: 1,
-    color: isActive ? "#3f51b5" : "#ccc",
-    padding: "10px 10px",
-    width: "260px"
+    flex: "0 0 auto",
+    color: isActive ? "#0D43A7" : "#9CA3AF",
+    padding: "14px 12px",
+    width: "260px",
+    marginBottom: isLast ? "6px" : "18px"
   });
   const circleStyle = stepNumber => {
-    let backgroundColor;
-    if (stepNumber <= _currentStep) {
-      backgroundColor = "#0D43A7";
-    } else {
-      backgroundColor = "#FFFFFF";
-    }
+    const completed = stepNumber <= _currentStep;
     return {
-      width: "60px",
-      height: "60px",
+      width: "56px",
+      height: "56px",
       borderRadius: "50%",
-      backgroundColor,
-      color: stepNumber <= _currentStep ? "white" : "black",
+      background: completed ? "linear-gradient(135deg,#2563eb,#7c3aed)" : "#ffffff",
+      color: completed ? "#ffffff" : "#0f172a",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      marginBottom: "10px",
-      fontWeight: "normal",
+      marginBottom: "8px",
+      fontWeight: 600,
       fontSize: "18px",
-      border: stepNumber > _currentStep ? "1px solid black" : "",
+      border: completed ? "none" : "1px solid rgba(15,23,42,0.08)",
+      boxShadow: completed ? "0 6px 18px rgba(37,99,235,0.18)" : "0 2px 6px rgba(2,6,23,0.04)",
       position: "relative"
     };
   };
   const labelStyle = {
-    fontSize: "18px",
-    color: "#1E1E1E",
-    fontWeight: "500",
-    fontFamily: "Noto Sans,sans-serif",
-    marginRight: "6px"
+    fontSize: "16px",
+    color: "#0f172a",
+    fontWeight: 600,
+    fontFamily: "Noto Sans, sans-serif",
+    marginRight: "8px",
+    textAlign: "right"
   };
   const stepNumberStyle = {
-    fontSize: "18px",
-    color: "#263238",
-    fontWeight: "400",
-    fontFamily: "Noto Sans,sans-serif",
-    margin: "0px 6px 0px 0px"
+    fontSize: "14px",
+    color: "#6b7280",
+    fontWeight: 500,
+    fontFamily: "Noto Sans, sans-serif",
+    margin: "0 6px 0 0"
   };
   const lineStyle = {
     position: "absolute",
-    width: "2px",
-    height: "50px",
-    backgroundColor: "grey",
+    width: "3px",
+    height: "56px",
+    backgroundColor: "rgba(15,23,42,0.06)",
     left: "50%",
     top: "100%",
-    transform: "translateX(-50%)"
+    transform: "translateX(-50%)",
+    borderRadius: "2px"
   };
   const isMobile = window.Digit.Utils.browser.isMobile();
   const totalSteps = _stepsList.length;
@@ -23545,22 +23425,25 @@ const StepWrapper = ({
       width: "100%",
       display: "flex",
       flexDirection: "row",
-      alignItems: "top",
-      justifyContent: "flex-start"
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+      gap: "24px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "stepper-navigation-bar",
     style: {
       display: "flex",
       flexDirection: "column",
-      justifyContent: "space-between",
-      height: "50%",
+      alignItems: "center",
+      padding: "18px",
+      minWidth: "120px",
+      maxWidth: "320px",
       marginBottom: "20px"
     }
   }, [...Array(totalSteps)].map((_, index) => /*#__PURE__*/React.createElement("div", {
     className: "step-content",
     key: index,
-    style: stepStyle(index + 1 <= _currentStep)
+    style: stepStyle(index + 1 <= _currentStep, index === totalSteps - 1)
   }, /*#__PURE__*/React.createElement("div", {
     className: "step-sub-content",
     style: {
@@ -23584,7 +23467,8 @@ const StepWrapper = ({
     className: "stepper-body",
     style: {
       width: "100%",
-      marginBottom: "20px"
+      marginBottom: "20px",
+      background: "transparent"
     }
   }, children));
 };
@@ -23893,11 +23777,7 @@ const NewADSStepperForm = ({
   return /*#__PURE__*/React.createElement("div", {
     className: "pageCard"
   }, /*#__PURE__*/React.createElement(CardHeader$1, {
-    styles: {
-      fontSize: "28px",
-      fontWeight: "500",
-      color: "#1C1D1F"
-    },
+    className: "ads-heading-large",
     divider: true
   }, t("ADS_REGISTRATION_APPLICATION"), createTime && /*#__PURE__*/React.createElement(ReservationTimer, {
     t: t,
@@ -24299,12 +24179,7 @@ const ADSCitizenDetailsNew = ({
   })), errors.pincode && /*#__PURE__*/React.createElement(CardLabelError$1, {
     style: errorStyle
   }, errors === null || errors === void 0 ? void 0 : (_errors$pincode = errors.pincode) === null || _errors$pincode === void 0 ? void 0 : _errors$pincode.message)), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
-    style: {
-      background: " white",
-      color: "#2947a3",
-      border: "1px solid",
-      marginRight: "10px"
-    },
+    className: "submit-bar-back",
     label: "Back",
     onSubmit: onGoBack
   }), /*#__PURE__*/React.createElement(SubmitBar, {
@@ -24458,12 +24333,7 @@ const AvailabilityModal = ({
       checked: selectAll,
       disabled: allBooked,
       onChange: e => handleSelectAll(e.target.checked),
-      style: {
-        cursor: allBooked ? "not-allowed" : "pointer",
-        width: "18px",
-        height: "18px",
-        accentColor: "#0b74de"
-      }
+      className: `ads-checkbox ${allBooked ? "ads-checkbox--disabled" : "ads-checkbox--active"}`
     }),
     accessor: "select",
     Cell: ({
@@ -24475,12 +24345,7 @@ const AvailabilityModal = ({
         type: "checkbox",
         checked: isChecked,
         disabled: true,
-        style: {
-          cursor: "not-allowed",
-          width: "18px",
-          height: "18px",
-          accentColor: "#0b74de"
-        }
+        className: "ads-checkbox ads-checkbox--disabled"
       });
     }
   }, {
@@ -24514,54 +24379,16 @@ const AvailabilityModal = ({
       const status = row === null || row === void 0 ? void 0 : (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slotStaus;
       const isAvailable = status === "AVAILABLE";
       return /*#__PURE__*/React.createElement("span", {
-        style: {
-          display: "inline-block",
-          padding: "5px 14px",
-          borderRadius: "20px",
-          fontSize: "12px",
-          fontWeight: 600,
-          color: isAvailable ? "#155724" : "#721c24",
-          backgroundColor: isAvailable ? "#d4edda" : "#f8d7da",
-          border: `1px solid ${isAvailable ? "#c3e6cb" : "#f5c6cb"}`,
-          textTransform: "capitalize"
-        }
+        className: `ads-status ${isAvailable ? "ads-status--available" : "ads-status--unavailable"}`
       }, status);
     }
   }];
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "fixed",
-      top: "70px",
-      left: 0,
-      width: "100vw",
-      height: "calc(100vh - 70px)",
-      background: "rgba(0,0,0,0.5)",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      zIndex: 2000
-    }
+    className: "ads-cart-overlay"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "90%",
-      maxWidth: "1100px",
-      height: "70vh",
-      background: "#fff",
-      borderRadius: "12px",
-      padding: "20px",
-      display: "flex",
-      flexDirection: "column",
-      boxShadow: "0 8px 24px rgba(0,0,0,0.25)"
-    }
+    className: "ads-cart-modal"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: "16px",
-      borderBottom: "1px solid #eee",
-      paddingBottom: "8px"
-    }
+    className: "ads-cart-header"
   }, /*#__PURE__*/React.createElement("h2", {
     style: {
       margin: 0,
@@ -24570,39 +24397,16 @@ const AvailabilityModal = ({
       color: "#333"
     }
   }, t("ADS_AVAILIBILITY_FOR"), " ", ad === null || ad === void 0 ? void 0 : ad.name, " ", allBooked && /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "#c62828",
-      fontSize: "14px",
-      marginLeft: "8px"
-    }
+    className: "ads-header-note"
   }, t("ADS_ALL_SLOTS_BOOKED"))), /*#__PURE__*/React.createElement("button", {
     onClick: onClose,
-    style: {
-      border: "none",
-      background: "transparent",
-      fontSize: "22px",
-      cursor: "pointer",
-      color: "#666"
-    }
+    className: "ads-cart-close"
   }, "\u2716")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      overflowY: "auto",
-      border: "1px solid #ddd",
-      borderRadius: "8px"
-    }
+    className: "ads-cart-table-wrapper"
   }, isLoading ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "24px",
-      color: "#555",
-      textAlign: "center"
-    }
+    className: "ads-cart-table-message "
   }, t("ADS_LOADING_SLOTS")) : (slots === null || slots === void 0 ? void 0 : slots.length) === 0 ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "24px",
-      color: "#555",
-      textAlign: "center"
-    }
+    className: "ads-cart-table-message "
   }, t("ADS_NO_SLOTS_AVAILABLE")) : /*#__PURE__*/React.createElement(Table, {
     t: t,
     data: slots,
@@ -24610,43 +24414,20 @@ const AvailabilityModal = ({
     disableSort: true,
     isPaginationRequired: false,
     getCellProps: cell => ({
-      style: {
-        padding: "12px 14px",
-        fontSize: "14px",
-        borderBottom: "1px solid #f0f0f0",
-        textAlign: "left",
-        backgroundColor: cell.row.index % 2 === 0 ? "#fafafa" : "#fff"
-      }
+      className: "ads-cart-table-cell"
+    }),
+    getRowProps: row => ({
+      className: row.index % 2 === 0 ? "ads-table-row--even" : "ads-table-row--odd"
     })
   })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "12px",
-      display: "flex",
-      justifyContent: "flex-end",
-      gap: "10px"
-    }
+    className: "ads-modal-footer"
   }, /*#__PURE__*/React.createElement("button", {
     onClick: onClose,
-    style: {
-      padding: "10px 18px",
-      borderRadius: "6px",
-      border: "1px solid #ccc",
-      background: "#f5f5f5",
-      cursor: "pointer"
-    }
+    className: "ads-btn-cancel"
   }, t ? t("Cancel") : "Cancel"), /*#__PURE__*/React.createElement("button", {
     onClick: handleAddToCart,
     disabled: !hasChanges,
-    style: {
-      padding: "10px 18px",
-      borderRadius: "6px",
-      border: "none",
-      background: hasChanges ? "#2947a3" : "#ccc",
-      color: "#fff",
-      fontWeight: 600,
-      cursor: hasChanges ? "pointer" : "not-allowed",
-      transition: "background 0.2s"
-    }
+    className: `ads-btn-cart ${!hasChanges ? "ads-btn-cart--disabled" : ""}`
   }, "\uD83D\uDED2 ", (existingForAd === null || existingForAd === void 0 ? void 0 : existingForAd.length) > 0 ? t("COMMON_REMOVE_LABEL") : t("ADS_ADD_TO_CART")))));
 };
 
@@ -24692,54 +24473,16 @@ const CartModal = ({
       const status = row === null || row === void 0 ? void 0 : (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original.slotStaus;
       const isAvailable = status === "AVAILABLE";
       return /*#__PURE__*/React.createElement("span", {
-        style: {
-          display: "inline-block",
-          padding: "5px 14px",
-          borderRadius: "20px",
-          fontSize: "12px",
-          fontWeight: 600,
-          color: isAvailable ? "#155724" : "#721c24",
-          backgroundColor: isAvailable ? "#d4edda" : "#f8d7da",
-          border: `1px solid ${isAvailable ? "#c3e6cb" : "#f5c6cb"}`,
-          textTransform: "capitalize"
-        }
+        className: `ads-status ${isAvailable ? "ads-status--available" : "ads-status--unavailable"}`
       }, status);
     }
   }];
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "fixed",
-      top: "70px",
-      left: 0,
-      width: "100vw",
-      height: "calc(100vh - 70px)",
-      background: "rgba(0,0,0,0.5)",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      zIndex: 2000
-    }
+    className: "ads-cart-overlay"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "90%",
-      maxWidth: "1100px",
-      height: "70vh",
-      background: "#fff",
-      borderRadius: "12px",
-      padding: "20px",
-      display: "flex",
-      flexDirection: "column",
-      boxShadow: "0 8px 24px rgba(0,0,0,0.25)"
-    }
+    className: "ads-cart-modal"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: "16px",
-      borderBottom: "1px solid #eee",
-      paddingBottom: "8px"
-    }
+    className: "ads-cart-header"
   }, /*#__PURE__*/React.createElement("h2", {
     style: {
       margin: 0,
@@ -24749,13 +24492,7 @@ const CartModal = ({
     }
   }, t("ADS_YOUR_CART")), /*#__PURE__*/React.createElement("button", {
     onClick: onClose,
-    style: {
-      border: "none",
-      background: "transparent",
-      fontSize: "22px",
-      cursor: "pointer",
-      color: "#666"
-    }
+    className: "ads-cart-close"
   }, "\u2716")), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
@@ -24772,23 +24509,9 @@ const CartModal = ({
     const isOpen = expanded === null || expanded === void 0 ? void 0 : expanded.includes(key);
     return /*#__PURE__*/React.createElement("div", {
       key: key,
-      style: {
-        marginBottom: "16px",
-        border: "1px solid #ddd",
-        borderRadius: "8px",
-        overflow: "hidden"
-      }
+      className: "ads-cart-item"
     }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        background: "#f9f9f9",
-        padding: "10px 14px",
-        fontWeight: 600,
-        fontSize: "14px",
-        borderBottom: "1px solid #ddd",
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center"
-      }
+      className: "ads-cart-item-header"
     }, /*#__PURE__*/React.createElement("div", {
       onClick: () => toggleExpand(key),
       style: {
@@ -24808,20 +24531,9 @@ const CartModal = ({
           endDate: item === null || item === void 0 ? void 0 : (_item$ad5 = item.ad) === null || _item$ad5 === void 0 ? void 0 : _item$ad5.bookingEndDate
         });
       },
-      style: {
-        padding: "6px 12px",
-        borderRadius: "6px",
-        border: "none",
-        background: "#dc3545",
-        color: "#fff",
-        cursor: "pointer",
-        fontSize: "12px",
-        marginLeft: "10px"
-      }
+      className: "ads-cart-remove"
     }, t("ADS_REMOVE"))), isOpen && /*#__PURE__*/React.createElement("div", {
-      style: {
-        overflowX: "auto"
-      }
+      className: "ads-cart-table"
     }, /*#__PURE__*/React.createElement(Table, {
       t: t,
       data: item === null || item === void 0 ? void 0 : item.slots,
@@ -24829,13 +24541,7 @@ const CartModal = ({
       disableSort: true,
       isPaginationRequired: false,
       getCellProps: cell => ({
-        style: {
-          padding: "12px 14px",
-          fontSize: "14px",
-          borderBottom: "1px solid #f0f0f0",
-          textAlign: "left",
-          whiteSpace: "nowrap"
-        }
+        className: "ads-cart-table-cell"
       })
     })));
   }))));
@@ -24859,24 +24565,9 @@ const AdCard = ({
     return (item === null || item === void 0 ? void 0 : (_item$ad = item.ad) === null || _item$ad === void 0 ? void 0 : _item$ad.id) === (ad === null || ad === void 0 ? void 0 : ad.id) && (item === null || item === void 0 ? void 0 : (_item$slots = item.slots) === null || _item$slots === void 0 ? void 0 : _item$slots.length) > 0;
   });
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: 280,
-      borderRadius: 8,
-      padding: 9,
-      background: "#fff",
-      boxShadow: "0 4px 10px rgba(0,0,0,0.08)",
-      display: "flex",
-      flexDirection: "column",
-      gap: 8
-    }
+    className: "ads-card"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "100%",
-      height: 120,
-      borderRadius: 8,
-      overflow: "hidden",
-      background: "#f5f5f5"
-    }
+    className: "ads-card-image"
   }, ad.imageSrc || ad.photoURL ? /*#__PURE__*/React.createElement("img", {
     src: (ad === null || ad === void 0 ? void 0 : ad.imageSrc) || (ad === null || ad === void 0 ? void 0 : ad.photoURL),
     alt: (ad === null || ad === void 0 ? void 0 : ad.name) || `Ad ${ad === null || ad === void 0 ? void 0 : ad.id}`,
@@ -24887,14 +24578,7 @@ const AdCard = ({
       objectFit: "cover"
     }
   }) : /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: "#aaa"
-    }
+    className: "ads-card-noimage"
   }, t("ADS_NO_IMAGE"))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
@@ -24947,13 +24631,7 @@ const AdCard = ({
       min: minDate,
       value: props.value || "",
       onChange: e => props.onChange(e.target.value),
-      style: {
-        flex: 1,
-        padding: "6px 8px",
-        fontSize: 13,
-        borderRadius: 6,
-        border: "1px solid #ccc"
-      }
+      className: "ads-card-input"
     })
   }), /*#__PURE__*/React.createElement(Controller, {
     control: control,
@@ -24962,13 +24640,7 @@ const AdCard = ({
       type: "time",
       value: props.value || "",
       onChange: e => props.onChange(e.target.value),
-      style: {
-        width: 110,
-        padding: "6px 8px",
-        fontSize: 13,
-        borderRadius: 6,
-        border: "1px solid #ccc"
-      }
+      className: "ads-input-time"
     })
   })), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -24989,13 +24661,7 @@ const AdCard = ({
       min: startDateVal || minDate,
       value: props.value || "",
       onChange: e => props.onChange(e.target.value),
-      style: {
-        flex: 1,
-        padding: "6px 8px",
-        fontSize: 13,
-        borderRadius: 6,
-        border: "1px solid #ccc"
-      }
+      className: "ads-card-input"
     })
   }), /*#__PURE__*/React.createElement(Controller, {
     control: control,
@@ -25004,13 +24670,7 @@ const AdCard = ({
       type: "time",
       value: props.value || "",
       onChange: e => props.onChange(e.target.value),
-      style: {
-        width: 110,
-        padding: "6px 8px",
-        fontSize: 13,
-        borderRadius: 6,
-        border: "1px solid #ccc"
-      }
+      className: "ads-input-time"
     })
   })), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -25026,32 +24686,11 @@ const AdCard = ({
       startTime: watch(`ads.${idx}.startTime`),
       endTime: watch(`ads.${idx}.endTime`)
     }),
-    style: {
-      flex: 1,
-      padding: "6px 12px",
-      borderRadius: 6,
-      background: "#2947a3",
-      color: "#fff",
-      border: "none",
-      cursor: "pointer",
-      fontSize: 14
-    }
+    className: "ads-btn-primary"
   }, t("ADS_VIEW_AVAILABILITY"), "\uD83D\uDC41\uFE0F"), isAdded && /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: openCart,
-    style: {
-      width: 110,
-      padding: "6px 12px",
-      borderRadius: 6,
-      background: "#28a745",
-      color: "#fff",
-      fontSize: 14,
-      fontWeight: 600,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      cursor: "pointer"
-    }
+    className: "ads-btn-success"
   }, /*#__PURE__*/React.createElement("span", {
     style: {
       color: "black"
@@ -25288,15 +24927,7 @@ const ADSCitizenSecond = ({
       justifyContent: "end"
     }
   }, /*#__PURE__*/React.createElement("button", {
-    style: {
-      marginLeft: "12px",
-      padding: "8px 16px",
-      background: "#2947a3",
-      color: "#fff",
-      border: "none",
-      borderRadius: "6px",
-      cursor: "pointer"
-    },
+    className: "ads-view-cart",
     onClick: () => setShowCart(true)
   }, /*#__PURE__*/React.createElement("span", {
     style: {
@@ -25307,33 +24938,15 @@ const ADSCitizenSecond = ({
   }, /*#__PURE__*/React.createElement(CardLabel, null, t("ADS_SITE_NAME_LABEL"), " ", /*#__PURE__*/React.createElement("span", {
     style: mandatoryStyle
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: "100%"
-    }
-  }, isCitizen && /*#__PURE__*/React.createElement("style", null, `
-      .form-field {
-        width: 100% !important;
-      }
-      .select-wrap {
-        width: 100% !important;
-      }
-      .select {
-        border: 1px solid #b4b4b4 !important;
-        border-radius: 8px !important;
-        height: 2.9rem !important;
-      }
-      .select-active {
-        border: 1px solid #2947a3 !important;
-        border-radius: 8px !important;
-      }
-    `), /*#__PURE__*/React.createElement(Controller, {
+    className: "ads-form-field"
+  }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
     name: "siteId",
     rules: {
       required: t("ADS_SITE_NAME_REQUIRED")
     },
     render: props => /*#__PURE__*/React.createElement(Dropdown, {
-      className: "form-field",
+      className: "ads-form-field",
       option: locationOptions,
       optionKey: "name",
       selected: props.value,
@@ -25345,17 +24958,7 @@ const ADSCitizenSecond = ({
   })), errors.siteId && /*#__PURE__*/React.createElement(CardLabelError$1, {
     style: errorStyle
   }, errors.siteId.message), guidance && (adsForLocation === null || adsForLocation === void 0 ? void 0 : adsForLocation.length) > 0 && /*#__PURE__*/React.createElement("div", {
-    style: {
-      background: "#fff3cd",
-      border: "1px solid #ffeeba",
-      color: "#856404",
-      padding: "6px 10px",
-      borderRadius: "6px",
-      fontSize: "14px",
-      marginBottom: "8px",
-      width: "100%",
-      maxWidth: "545px"
-    }
+    className: "ads-guidance-box"
   }, "\u26A0\uFE0F ", guidance), (adsForLocation === null || adsForLocation === void 0 ? void 0 : adsForLocation.length) > 0 && /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
@@ -25380,23 +24983,11 @@ const ADSCitizenSecond = ({
     }
   }, visibleCount < adsForLocation.length ? /*#__PURE__*/React.createElement("button", {
     type: "button",
-    style: {
-      padding: "8px 12px",
-      borderRadius: 6,
-      border: "1px solid #ccc",
-      background: "#fff",
-      cursor: "pointer"
-    },
+    className: "ads-btn",
     onClick: () => setVisibleCount(v => v + 6)
   }, t("ADS_SHOW_MORE")) : /*#__PURE__*/React.createElement("button", {
     type: "button",
-    style: {
-      padding: "8px 12px",
-      borderRadius: 6,
-      border: "1px solid #ccc",
-      background: "#fff",
-      cursor: "pointer"
-    },
+    className: "ads-btn",
     onClick: () => setVisibleCount(6)
   }, t("SHOW_LESS"))), /*#__PURE__*/React.createElement(CardLabel, null, t("CS_COMPLAINT_DETAILS_GEO_LOCATION")), /*#__PURE__*/React.createElement(Controller, {
     control: control,
@@ -25989,11 +25580,7 @@ const NewADSStepFormFive = ({
   }), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("CS_COMMON_BACK"),
     onSubmit: onGoBack,
-    style: {
-      background: " white",
-      color: "#2947a3",
-      border: "1px solid"
-    }
+    className: "ads-btn-back"
   }), displayMenu && /*#__PURE__*/React.createElement(Menu, {
     localeKeyPrefix: "",
     options: filteredActions,
@@ -26990,11 +26577,7 @@ const ADSSiteInspection = ({
       handleSubmit: handleSubmit
     });
   }), error && /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "8px"
-    }
+    className: "ads-error-container"
   }, /*#__PURE__*/React.createElement(Toast, {
     label: error,
     onClose: () => setError(null),
@@ -27003,13 +26586,7 @@ const ADSSiteInspection = ({
     type: "button",
     "aria-label": "Dismiss",
     onClick: () => setError(null),
-    style: {
-      background: "transparent",
-      border: "none",
-      fontSize: "18px",
-      cursor: "pointer",
-      lineHeight: 1
-    },
+    className: "ads-error-dismiss",
     title: t("CS_ACTION_CLOSE") || "Close"
   }, "\xD7"))) : /*#__PURE__*/React.createElement(Loader$2, null));
 };
@@ -27403,12 +26980,6 @@ function ADSSelectDocument$1({
       setFormErrors(errors);
     }
   };
-  const errorStyle = {
-    color: "#d4351c",
-    fontSize: "12px",
-    marginTop: "4px",
-    marginBottom: "10px"
-  };
   return /*#__PURE__*/React.createElement("div", {
     style: {
       marginBottom: "24px"
@@ -27442,7 +27013,7 @@ function ADSSelectDocument$1({
     buttonType: "button",
     error: Boolean(fieldError)
   }), fieldError && /*#__PURE__*/React.createElement("div", {
-    style: errorStyle
+    className: "ads-error-message"
   }, fieldError))));
 }
 
@@ -27460,104 +27031,39 @@ function ADSSummary({
   const applicant = (formData === null || formData === void 0 ? void 0 : (_formData$CreatedResp = formData.CreatedResponse) === null || _formData$CreatedResp === void 0 ? void 0 : _formData$CreatedResp.applicantDetail) || {};
   const address = (formData === null || formData === void 0 ? void 0 : (_formData$ownerDetail = formData.ownerDetails) === null || _formData$ownerDetail === void 0 ? void 0 : _formData$ownerDetail.address) || (formData === null || formData === void 0 ? void 0 : (_formData$CreatedResp2 = formData.CreatedResponse) === null || _formData$CreatedResp2 === void 0 ? void 0 : _formData$CreatedResp2.address) || {};
   const docs = Array.isArray(formData === null || formData === void 0 ? void 0 : (_formData$documents = formData.documents) === null || _formData$documents === void 0 ? void 0 : (_formData$documents$d = _formData$documents.documents) === null || _formData$documents$d === void 0 ? void 0 : _formData$documents$d.documents) ? formData === null || formData === void 0 ? void 0 : (_formData$documents2 = formData.documents) === null || _formData$documents2 === void 0 ? void 0 : (_formData$documents2$ = _formData$documents2.documents) === null || _formData$documents2$ === void 0 ? void 0 : _formData$documents2$.documents : Array.isArray((_formData$documents3 = formData.documents) === null || _formData$documents3 === void 0 ? void 0 : _formData$documents3.documents) ? formData.documents.documents : Array.isArray(formData.documents) ? formData.documents : [];
-  const sectionStyle = {
-    backgroundColor: "#ffffff",
-    padding: "1rem 0",
-    borderRadius: "8px",
-    marginBottom: "1.5rem",
-    boxShadow: "0 2px 6px rgba(18,38,63,0.04)"
-  };
-  const headerRow = {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: "0.75rem",
-    padding: "0 1.5rem"
-  };
-  const headerRow1 = {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: "0.75rem"
-  };
-  const headingStyle = {
-    fontSize: "1.25rem",
-    color: "#0d43a7",
-    fontWeight: "600",
-    margin: 0
-  };
-  const editLabelStyle = {
-    cursor: "pointer",
-    color: "#2e86de",
-    fontWeight: 600,
-    fontSize: "0.9rem"
-  };
-  const labelFieldPairStyle = {
-    display: "flex",
-    justifyContent: "space-between",
-    borderBottom: "1px dashed #e9eef2",
-    padding: "0.6rem 1.5rem",
-    alignItems: "center"
-  };
-  const documentsContainerStyle = {
-    display: "flex",
-    flexWrap: "wrap",
-    gap: "1rem",
-    marginTop: "0.5rem"
-  };
-  const documentCardStyle = {
-    flex: "1 1 220px",
-    minWidth: "180px",
-    maxWidth: "260px",
-    backgroundColor: "#fbfcfe",
-    padding: "0.6rem",
-    border: "1px solid #eef3f7",
-    borderRadius: "6px"
-  };
-  const boldLabelStyle = {
-    fontWeight: "500",
-    color: "#333"
-  };
   const cartDetails = formData === null || formData === void 0 ? void 0 : formData.ads;
   const renderRow = (label, value) => /*#__PURE__*/React.createElement("div", {
-    style: labelFieldPairStyle
+    className: "ads-summary-row"
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      gap: "0.5rem",
-      alignItems: "center"
-    }
+    className: "ads-summary-row-label"
   }, /*#__PURE__*/React.createElement(CardLabel, {
-    style: boldLabelStyle
+    className: "ads-summary-bold"
   }, label)), /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: "right",
-      minWidth: "120px"
-    }
+    className: "ads-summary-row-value"
   }, value || "NA"));
   return /*#__PURE__*/React.createElement("div", {
     className: "application-summary"
   }, /*#__PURE__*/React.createElement(Card$1, {
     className: "summary-section"
   }, /*#__PURE__*/React.createElement("div", {
-    style: sectionStyle
+    className: "ads-summary-section"
   }, /*#__PURE__*/React.createElement("div", {
-    style: headerRow
+    className: "ads-summary-header"
   }, /*#__PURE__*/React.createElement("h3", {
-    style: headingStyle
+    className: "ads-summary-heading"
   }, TT("ADS_APPLICANT_DETAILS")), /*#__PURE__*/React.createElement("span", {
-    style: editLabelStyle,
+    className: "ads-summary-edit",
     onClick: () => dispatch(SET_ADSNewApplication_STEP(2))
   }, TT("TL_SUMMARY_EDIT"))), renderRow(TT("NOC_APPLICANT_NAME_LABEL"), applicant === null || applicant === void 0 ? void 0 : applicant.applicantName), renderRow(TT("CORE_Mobile_Number"), applicant === null || applicant === void 0 ? void 0 : applicant.applicantMobileNo), renderRow(TT("CORE_EMAIL_ID"), applicant === null || applicant === void 0 ? void 0 : applicant.applicantEmailId), renderRow(TT("CORE_COMMON_PINCODE"), address === null || address === void 0 ? void 0 : address.pincode), renderRow(TT("ES_CREATECOMPLAINT_ADDRESS"), address === null || address === void 0 ? void 0 : address.addressLine1))), /*#__PURE__*/React.createElement(Card$1, {
     className: "summary-section"
   }, /*#__PURE__*/React.createElement("div", {
-    style: sectionStyle
+    className: "ads-summary-section"
   }, /*#__PURE__*/React.createElement("div", {
-    style: headerRow1
+    className: "ads-summary-header--compact"
   }, /*#__PURE__*/React.createElement("h3", {
-    style: headingStyle
+    className: "ads-summary-heading"
   }, TT("ADS_DETAILS")), /*#__PURE__*/React.createElement("span", {
-    style: editLabelStyle,
+    className: "ads-summary-edit",
     onClick: () => dispatch(SET_ADSNewApplication_STEP(1))
   }, TT("TL_SUMMARY_EDIT"))), /*#__PURE__*/React.createElement(ADSCartDetails$1, {
     cartDetails: cartDetails,
@@ -27565,27 +27071,25 @@ function ADSSummary({
   }))), /*#__PURE__*/React.createElement(Card$1, {
     className: "summary-section"
   }, /*#__PURE__*/React.createElement("div", {
-    style: sectionStyle
+    className: "ads-summary-section"
   }, /*#__PURE__*/React.createElement("div", {
-    style: headerRow
+    className: "ads-summary-header"
   }, /*#__PURE__*/React.createElement("h3", {
-    style: headingStyle
+    className: "ads-summary-heading"
   }, TT("ADS_DOCUMENTS_DETAILS")), /*#__PURE__*/React.createElement("span", {
-    style: editLabelStyle,
+    className: "ads-summary-edit",
     onClick: () => dispatch(SET_ADSNewApplication_STEP(3))
   }, TT("TL_SUMMARY_EDIT"))), (docs === null || docs === void 0 ? void 0 : docs.length) > 0 ? /*#__PURE__*/React.createElement("div", {
-    style: documentsContainerStyle
+    className: "ads-summary-docs"
   }, docs.map((doc, idx) => /*#__PURE__*/React.createElement("div", {
     key: idx,
-    style: documentCardStyle
+    className: "ads-summary-doc-card"
   }, /*#__PURE__*/React.createElement(ADSDocument, {
     value: docs,
     Code: doc === null || doc === void 0 ? void 0 : doc.documentType,
     index: idx
   }), TT(doc === null || doc === void 0 ? void 0 : doc.documentType)))) : /*#__PURE__*/React.createElement("div", {
-    style: {
-      padding: "0 1.5rem"
-    }
+    className: "ads-summary-no-docs"
   }, t("TL_NO_DOCUMENTS_MSG")))));
 }