@mahatisystems/mahati-ui-components 5.2.1 → 5.3.0

package/dist/index.js

@@ -382,60 +382,6 @@ var require_decrease = __commonJS({
         module2.exports = "./decrease-SMWSBU7A.png";
     }
 });
-// src/assets/icons/check-mark_1.png
-var require_check_mark_1 = __commonJS({
-    "src/assets/icons/check-mark_1.png": function(exports2, module2) {
-        module2.exports = "./check-mark_1-6GNY6HFY.png";
-    }
-});
-// src/assets/icons/danger_1.png
-var require_danger_1 = __commonJS({
-    "src/assets/icons/danger_1.png": function(exports2, module2) {
-        module2.exports = "./danger_1-LUIFNS2J.png";
-    }
-});
-// src/assets/icons/notification_1.png
-var require_notification_1 = __commonJS({
-    "src/assets/icons/notification_1.png": function(exports2, module2) {
-        module2.exports = "./notification_1-K2I7DVDH.png";
-    }
-});
-// src/assets/icons/close.png
-var require_close = __commonJS({
-    "src/assets/icons/close.png": function(exports2, module2) {
-        module2.exports = "./close-EEDOIEDC.png";
-    }
-});
-// src/assets/icons/check-mark_2.png
-var require_check_mark_2 = __commonJS({
-    "src/assets/icons/check-mark_2.png": function(exports2, module2) {
-        module2.exports = "./check-mark_2-YWM2KQA2.png";
-    }
-});
-// src/assets/icons/danger_2.png
-var require_danger_2 = __commonJS({
-    "src/assets/icons/danger_2.png": function(exports2, module2) {
-        module2.exports = "./danger_2-YTNTGWQA.png";
-    }
-});
-// src/assets/icons/danger_1_1.png
-var require_danger_1_1 = __commonJS({
-    "src/assets/icons/danger_1_1.png": function(exports2, module2) {
-        module2.exports = "./danger_1_1-PHLDGYEA.png";
-    }
-});
-// src/assets/icons/notification_2.png
-var require_notification_2 = __commonJS({
-    "src/assets/icons/notification_2.png": function(exports2, module2) {
-        module2.exports = "./notification_2-KFI6MN7T.png";
-    }
-});
-// src/assets/icons/close_copy_1.png
-var require_close_copy_1 = __commonJS({
-    "src/assets/icons/close_copy_1.png": function(exports2, module2) {
-        module2.exports = "./close_copy_1-PFFNUORV.png";
-    }
-});
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -575,41 +521,76 @@ var import_react = require("react");
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Accordion(param) {
-    var title = param.title, children = param.children, _param_defaultOpen = param.defaultOpen, defaultOpen = _param_defaultOpen === void 0 ? false : _param_defaultOpen, accordionTestId = param.accordionTestId, headerTestId = param.headerTestId, contentTestId = param.contentTestId;
-    var _ref = _sliced_to_array((0, import_react.useState)(defaultOpen), 2), open = _ref[0], setOpen = _ref[1];
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+    var title = param.title, children = param.children, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, _param_defaultOpenIndex = param.defaultOpenIndex, defaultOpenIndex = _param_defaultOpenIndex === void 0 ? null : _param_defaultOpenIndex, defaultOpen = param.defaultOpen, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_contentClassName = param.contentClassName, contentClassName = _param_contentClassName === void 0 ? "" : _param_contentClassName, icon = param.icon, _param_iconPosition = param.iconPosition, iconPosition = _param_iconPosition === void 0 ? "right" : _param_iconPosition, _param_multipleOpen = param.multipleOpen, multipleOpen = _param_multipleOpen === void 0 ? false : _param_multipleOpen, onToggle = param.onToggle, accordionTestId = param.accordionTestId, headerTestId = param.headerTestId, contentTestId = param.contentTestId;
+    var _ref = _sliced_to_array((0, import_react.useState)(defaultOpen ? [
+        0
+    ] : defaultOpenIndex !== null && defaultOpenIndex !== void 0 ? [
+        defaultOpenIndex
+    ] : []), 2), openIndexes = _ref[0], setOpenIndexes = _ref[1];
+    var normalizedItems = items && items.length > 0 ? items : title !== void 0 ? [
+        {
+            title: title,
+            content: children
+        }
+    ] : [];
+    var handleToggle = function handleToggle(index) {
+        var newIndexes;
+        if (multipleOpen) {
+            if (openIndexes.includes(index)) {
+                newIndexes = openIndexes.filter(function(i) {
+                    return i !== index;
+                });
+            } else {
+                newIndexes = _to_consumable_array(openIndexes).concat([
+                    index
+                ]);
+            }
+        } else {
+            newIndexes = openIndexes.includes(index) ? [] : [
+                index
+            ];
+        }
+        setOpenIndexes(newIndexes);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
         "data-testid": accordionTestId,
-        className: "\r\n        w-full\r\n        max-w-full\r\n        border border-slate-200\r\n        overflow-hidden\r\n        bg-white\r\n        rounded-xl\r\n        sm:max-w-[684px]\r\n      ",
-        children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
-                "data-testid": headerTestId,
-                onClick: function onClick() {
-                    return setOpen(!open);
-                },
-                className: "\n          w-full\n          flex items-center justify-between\n          font-medium\n          border-none\n          cursor-pointer\n          min-h-[52px]\n          px-4\n          transition\n          hover:opacity-95\n          focus:outline-none\n          sm:min-h-[60px]\n          sm:px-6\n          ".concat(open ? "text-white bg-gradient-to-r from-[#1761A3] to-[#4DAF83]" : "text-slate-800 bg-white", "\n        "),
+        className: "w-full max-w-[684px] border border-slate-200 rounded-xl overflow-hidden bg-white ".concat(className),
+        children: normalizedItems.map(function(item, index) {
+            var isOpen = openIndexes.includes(index);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
                 children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-                        children: title
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+                        "data-testid": headerTestId,
+                        disabled: item.disabled,
+                        onClick: function onClick() {
+                            return handleToggle(index);
+                        },
+                        className: "\n                w-full flex items-center justify-between\n                px-6 min-h-[60px]\n                font-medium transition\n                ".concat(item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", "\n                ").concat(isOpen ? "text-white bg-gradient-to-r from-[#1761A3] to-[#4DAF83]" : "text-slate-800 bg-white", "\n                ").concat(headerClassName, "\n              "),
+                        children: [
+                            iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                                className: "mr-2",
+                                children: icon || (isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, {}))
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                                className: "flex-1 text-left",
+                                children: item.title
+                            }),
+                            iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+                                children: icon || (isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, {}))
+                            })
+                        ]
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-                        className: "inline-flex items-center justify-center",
-                        children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronUp, {
-                            className: "w-5 h-5"
-                        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, {
-                            className: "w-5 h-5"
-                        })
+                    isOpen && !item.disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        "data-testid": contentTestId,
+                        className: "px-6 py-4 text-slate-600 border-t border-slate-200 ".concat(contentClassName),
+                        children: item.content
+                    }),
+                    index !== normalizedItems.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+                        className: "border-t border-slate-200"
                     })
                 ]
-            }),
-            open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                "data-testid": contentTestId,
-                className: "\r\n            w-full\r\n            overflow-hidden\r\n            px-6 py-4\r\n            text-slate-600\r\n            border-t border-slate-200\r\n          ",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                    className: "w-full box-border",
-                    children: children
-                })
-            })
-        ]
+            }, index);
+        })
     });
 }
 Accordion.displayName = "Accordion";
@@ -1567,11 +1548,7 @@ var Calendar = function Calendar(param) {
             onChange === null || onChange === void 0 ? void 0 : onChange(null, "");
         }
         if (enableTimeSelection) {
-            onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange({
-                hour: 12,
-                minute: 0,
-                period: "AM"
-            });
+            onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(null);
             setSelectedHour(12);
             setSelectedMinute(0);
             setSelectedPeriod("AM");
@@ -2169,10 +2146,11 @@ var Calendar = function Calendar(param) {
                             children: enableRangeSelection ? "Select Date Range" : "Select Date & Time"
                         }),
                         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
-                            className: "flex",
+                            className: "flex items-center ".concat(!enableTimeSelection ? "justify-center" : "justify-center"),
                             style: {
-                                gap: scale * 12,
-                                marginBottom: scale * 24
+                                gap: enableTimeSelection ? scale * 20 : 0,
+                                marginBottom: scale * 24,
+                                width: "100%"
                             },
                             children: enableRangeSelection ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
                                 children: [
@@ -2194,7 +2172,8 @@ var Calendar = function Calendar(param) {
                                                     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {
                                                         className: "text-gray-500",
                                                         style: {
-                                                            fontSize: scale * 12
+                                                            fontSize: scale * 12,
+                                                            gap: scale * 24
                                                         },
                                                         children: "From Date"
                                                     }),
@@ -2211,7 +2190,7 @@ var Calendar = function Calendar(param) {
                                     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", {
                                         type: "button",
                                         onClick: handleEndFieldClick,
-                                        className: "flex items-center rounded-md shadow-sm",
+                                        className: "flex  items-center rounded-md shadow-sm",
                                         style: {
                                             height: scale * 40,
                                             padding: "0 ".concat(scale * 16, "px"),
@@ -2222,6 +2201,9 @@ var Calendar = function Calendar(param) {
                                             defaultIcon,
                                             /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", {
                                                 className: "flex flex-col items-start",
+                                                style: {
+                                                    gap: scale * 4
+                                                },
                                                 children: [
                                                     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {
                                                         style: {
@@ -2245,10 +2227,11 @@ var Calendar = function Calendar(param) {
                                     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", {
                                         type: "button",
                                         onClick: handleChooseDateClick,
-                                        className: "flex items-center rounded-md shadow-sm",
+                                        className: "flex items-center justify-center rounded-md shadow-sm",
                                         style: {
                                             height: scale * 40,
                                             padding: "0 ".concat(scale * 16, "px"),
+                                            minWidth: enableTimeSelection ? scale * 140 : scale * 220,
                                             background: !showTimeSelector && enableTimeSelection ? "linear-gradient(to bottom,#1761A3,#4DAF83)" : "white",
                                             color: !showTimeSelector && enableTimeSelection ? "white" : "#111827"
                                         },
@@ -2269,6 +2252,7 @@ var Calendar = function Calendar(param) {
                                         style: {
                                             height: scale * 40,
                                             padding: "0 ".concat(scale * 16, "px"),
+                                            marginLeft: scale * 16,
                                             background: showTimeSelector ? "linear-gradient(to bottom,#1761A3,#4DAF83)" : "white",
                                             color: showTimeSelector ? "white" : "#111827"
                                         },
@@ -2295,7 +2279,7 @@ var Calendar = function Calendar(param) {
                                 marginBottom: scale * 22
                             },
                             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", {
-                                className: "flex items-center justify-between",
+                                className: "relative flex items-center justify-between",
                                 children: [
                                     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", {
                                         "aria-label": "Previous month",
@@ -2312,16 +2296,44 @@ var Calendar = function Calendar(param) {
                                             }
                                         })
                                     }),
-                                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", {
-                                        onClick: handleMonthYearClick,
-                                        className: "font-bold text-[#1761A3]",
-                                        style: {
-                                            fontSize: scale * 18
-                                        },
+                                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", {
+                                        className: "relative",
                                         children: [
-                                            monthName,
-                                            " ",
-                                            currentYear
+                                            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", {
+                                                onClick: handleMonthYearClick,
+                                                className: "font-bold text-[#1761A3]",
+                                                style: {
+                                                    fontSize: scale * 18
+                                                },
+                                                children: [
+                                                    monthName,
+                                                    " ",
+                                                    currentYear
+                                                ]
+                                            }),
+                                            showYearDropdown && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+                                                className: "absolute bg-white border rounded-md shadow-md z-[9999] max-h-40 overflow-y-auto",
+                                                style: {
+                                                    marginTop: scale * 8,
+                                                    width: scale * 120
+                                                },
+                                                children: Array.from({
+                                                    length: 100
+                                                }, function(_, i) {
+                                                    return currentYear - 50 + i;
+                                                }).map(function(year) {
+                                                    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+                                                        onClick: function onClick() {
+                                                            return handleYearSelect(year);
+                                                        },
+                                                        className: "px-3 py-2 cursor-pointer hover:bg-gray-100",
+                                                        style: {
+                                                            fontSize: scale * 12
+                                                        },
+                                                        children: year
+                                                    }, year);
+                                                })
+                                            })
                                         ]
                                     }),
                                     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", {
@@ -2342,32 +2354,33 @@ var Calendar = function Calendar(param) {
                                 ]
                             })
                         }),
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
-                            className: "grid grid-cols-7",
-                            style: {
-                                gap: scale * 8
-                            },
-                            children: renderDays()
-                        }),
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", {
-                            className: "border-t border-gray-200",
-                            style: {
-                                padding: scale * 8
-                            },
+                        !showTimeSelector ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
                             children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+                                    className: "grid grid-cols-7",
+                                    style: {
+                                        gap: scale * 24
+                                    },
+                                    children: renderDays()
+                                }),
                                 /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", {
-                                    className: "flex",
+                                    className: "flex justify-between",
                                     style: {
-                                        gap: scale * 12
+                                        gap: scale * 12,
+                                        marginTop: scale * 8
                                     },
                                     children: [
                                         showTodayButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", {
                                             onClick: selectToday,
-                                            className: "flex items-center justify-center rounded-md font-semibold",
+                                            className: "flex items-center justify-center font-semibold",
                                             style: {
+                                                width: scale * 165,
                                                 height: scale * 38,
-                                                background: "rgba(23,97,163,0.15)",
-                                                color: "#1761A3"
+                                                borderRadius: scale * 6,
+                                                background: "rgba(23, 97, 163, 0.15)",
+                                                color: "#1761A3",
+                                                fontSize: scale * 12,
+                                                gap: scale * 8
                                             },
                                             children: [
                                                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_hi2.HiCalendarDays, {
@@ -2381,13 +2394,16 @@ var Calendar = function Calendar(param) {
                                         }),
                                         showClearButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", {
                                             onClick: clearDate,
-                                            className: "rounded-md font-semibold",
+                                            className: "flex items-center justify-center font-semibold",
                                             style: {
+                                                width: scale * 165,
                                                 height: scale * 38,
-                                                background: "rgba(239,68,68,0.15)",
-                                                color: "#EF4444"
+                                                borderRadius: scale * 6,
+                                                background: "rgba(239, 68, 68, 0.15)",
+                                                color: "#EF4444",
+                                                fontSize: scale * 12
                                             },
-                                            children: "Clear"
+                                            children: "\uD83D\uDDD1 Clear"
                                         })
                                     ]
                                 }),
@@ -2396,12 +2412,13 @@ var Calendar = function Calendar(param) {
                                     className: "w-full rounded-md font-semibold text-white",
                                     style: {
                                         height: scale * 38,
+                                        marginTop: scale * 12,
                                         background: "linear-gradient(to right,#1761A3,#4DAF83)"
                                     },
                                     children: "Confirm Date"
                                 })
                             ]
-                        })
+                        }) : renderTimeSelector()
                     ]
                 })
             })
@@ -2942,7 +2959,7 @@ var TabbedInterface = function TabbedInterface(param) {
             var active = index === activeIndex;
             var isDragging = draggableTabs && draggingIndex === index;
             var showClose = showTabCloseIconInHeader && !!onCloseTab;
-            var closeIcon2 = showClose ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
+            var closeIcon = showClose ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
                 role: "button",
                 "aria-label": "Close tab",
                 onClick: function onClick(e) {
@@ -2974,7 +2991,7 @@ var TabbedInterface = function TabbedInterface(param) {
                             /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
                                 className: "flex min-w-0 items-center gap-2",
                                 children: [
-                                    tabCloseIconPosition === "left" && closeIcon2,
+                                    tabCloseIconPosition === "left" && closeIcon,
                                     tab.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
                                         children: tab.icon
                                     }),
@@ -2984,7 +3001,7 @@ var TabbedInterface = function TabbedInterface(param) {
                                     })
                                 ]
                             }),
-                            tabCloseIconPosition === "right" && closeIcon2
+                            tabCloseIconPosition === "right" && closeIcon
                         ]
                     }),
                     variant === "underline" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
@@ -10409,50 +10426,6 @@ Tooltip2.displayName = "Tooltip";
 var import_react19 = __toESM(require("react"));
 var import_react_dom2 = __toESM(require("react-dom"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var assetSrc4 = function assetSrc4(m) {
-    if (typeof m === "string") return m;
-    var anyM = m;
-    if (typeof (anyM === null || anyM === void 0 ? void 0 : anyM.src) === "string") return anyM.src;
-    var d = anyM === null || anyM === void 0 ? void 0 : anyM.default;
-    if (typeof d === "string") return d;
-    if (typeof (d === null || d === void 0 ? void 0 : d.src) === "string") return d.src;
-    return "";
-};
-var checkMarkIcon = "";
-var dangerIcon = "";
-var notificationIcon = "";
-var closeIcon = "";
-var checkMarkIcon2 = "";
-var dangerIcon2 = "";
-var dangerIcon1_1 = "";
-var notificationIcon2 = "";
-var closeIconCopy = "";
-try {
-    checkMarkIcon = require_check_mark_1();
-    dangerIcon = require_danger_1();
-    notificationIcon = require_notification_1();
-    closeIcon = require_close();
-    checkMarkIcon2 = require_check_mark_2();
-    dangerIcon2 = require_danger_2();
-    dangerIcon1_1 = require_danger_1_1();
-    notificationIcon2 = require_notification_2();
-    closeIconCopy = require_close_copy_1();
-} catch (e) {}
-var FALLBACK_ICONS2 = {
-    checkMarkIcon: "/toast-icons/check-mark_1.png",
-    dangerIcon: "/toast-icons/danger_1.png",
-    notificationIcon: "/toast-icons/notification_1.png",
-    closeIcon: "/toast-icons/close.png",
-    checkMarkIcon2: "/toast-icons/check-mark_2.png",
-    dangerIcon2: "/toast-icons/danger_2.png",
-    dangerIcon1_1: "/toast-icons/danger_1_1.png",
-    notificationIcon2: "/toast-icons/notification_2.png",
-    closeIconCopy: "/toast-icons/close_copy_1.png"
-};
-var getIconSrc2 = function getIconSrc2(imported, fallback) {
-    var src = assetSrc4(imported);
-    return src || fallback;
-};
 var getStripGradient = function getStripGradient(type) {
     switch(type){
         case "success":
@@ -10466,6 +10439,19 @@ var getStripGradient = function getStripGradient(type) {
             return "linear-gradient(90deg, rgba(23, 97, 163, 1) 22.5%, rgba(77, 175, 131, 1) 130%)";
     }
 };
+var getGradient = function getGradient(type) {
+    switch(type){
+        case "success":
+            return "linear-gradient(90deg, rgba(40, 167, 69, 1) 0%, rgba(58, 208, 125, 1) 100%)";
+        case "error":
+            return "linear-gradient(90deg, rgba(220, 53, 69, 1) 0%, rgba(183, 28, 28, 1) 100%)";
+        case "warning":
+            return "linear-gradient(90deg, rgba(245, 158, 11, 1) 0%, rgba(255, 191, 92, 1) 100%)";
+        case "notification":
+        default:
+            return "linear-gradient(90deg, rgba(23, 97, 163, 1) 0%, rgba(77, 175, 131, 1) 100%)";
+    }
+};
 var getTitleColor = function getTitleColor(type) {
     switch(type){
         case "success":
@@ -10485,31 +10471,31 @@ var getIcon = function getIcon(type, background) {
         height: "28px",
         objectFit: "contain"
     };
+    var altText = type.charAt(0).toUpperCase() + type.slice(1);
     if (background === "transparent") {
         switch(type){
             case "success":
                 return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", {
-                    src: getIconSrc2(checkMarkIcon2, FALLBACK_ICONS2.checkMarkIcon2),
-                    alt: "Success",
+                    src: "/icons/check-mark_2.png",
+                    alt: altText,
                     style: style
                 });
             case "error":
                 return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", {
-                    src: getIconSrc2(dangerIcon2, FALLBACK_ICONS2.dangerIcon2),
-                    alt: "Error",
+                    src: "/icons/danger_2.png",
+                    alt: altText,
                     style: style
                 });
             case "warning":
                 return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", {
-                    src: getIconSrc2(dangerIcon1_1, FALLBACK_ICONS2.dangerIcon1_1),
-                    alt: "Warning",
+                    src: "/icons/danger_1_1.png",
+                    alt: altText,
                     style: style
                 });
-            case "notification":
             default:
                 return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", {
-                    src: getIconSrc2(notificationIcon2, FALLBACK_ICONS2.notificationIcon2),
-                    alt: "Notification",
+                    src: "/icons/notification_2.png",
+                    alt: altText,
                     style: style
                 });
         }
@@ -10517,27 +10503,26 @@ var getIcon = function getIcon(type, background) {
         switch(type){
             case "success":
                 return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", {
-                    src: getIconSrc2(checkMarkIcon, FALLBACK_ICONS2.checkMarkIcon),
-                    alt: "Success",
+                    src: "/icons/check-mark_1.png",
+                    alt: altText,
                     style: style
                 });
             case "error":
                 return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", {
-                    src: getIconSrc2(dangerIcon, FALLBACK_ICONS2.dangerIcon),
-                    alt: "Error",
+                    src: "/icons/danger_1.png",
+                    alt: altText,
                     style: style
                 });
             case "warning":
                 return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", {
-                    src: getIconSrc2(dangerIcon, FALLBACK_ICONS2.dangerIcon),
-                    alt: "Warning",
+                    src: "/icons/danger_1.png",
+                    alt: altText,
                     style: style
                 });
-            case "notification":
             default:
                 return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", {
-                    src: getIconSrc2(notificationIcon, FALLBACK_ICONS2.notificationIcon),
-                    alt: "Notification",
+                    src: "/icons/notification_1.png",
+                    alt: altText,
                     style: style
                 });
         }
@@ -10560,6 +10545,7 @@ var ToastMessage = import_react19.default.forwardRef(function(_0, _1) {
         "className",
         "testId"
     ]), _rest1 = _sliced_to_array(_rest, 1), ref = _rest1[0];
+    var backgroundClass = background === "transparent" ? "bg-white" : "";
     var displayTitle = customTitle !== null && customTitle !== void 0 ? customTitle : type.charAt(0).toUpperCase() + type.slice(1);
     var hasActions = action && action.length > 0;
     (0, import_react19.useEffect)(function() {
@@ -10573,7 +10559,7 @@ var ToastMessage = import_react19.default.forwardRef(function(_0, _1) {
         duration,
         onClose
     ]);
-    var closeIconSrc = (custom === null || custom === void 0 ? void 0 : custom.closeIconSrc) || (background === "transparent" ? getIconSrc2(closeIconCopy, FALLBACK_ICONS2.closeIconCopy) : getIconSrc2(closeIcon, FALLBACK_ICONS2.closeIcon));
+    var closeIconSrc = (custom === null || custom === void 0 ? void 0 : custom.closeIconSrc) || (background === "transparent" ? "icons/close_copy_1.png" : "/icons/close.png");
     var iconElement = (custom === null || custom === void 0 ? void 0 : custom.iconSrc) ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", {
         src: custom.iconSrc,
         alt: type,
@@ -10586,7 +10572,10 @@ var ToastMessage = import_react19.default.forwardRef(function(_0, _1) {
     var content = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", _object_spread_props(_object_spread({
         ref: ref,
         "data-testid": testId,
-        className: "fixed top-[20px] right-[20px] w-[325px] rounded-[12px] shadow-md z-[9999] overflow-hidden flex \n  ".concat(hasActions ? "flex-col p-[10px]" : "flex-row items-center pl-[10px]", " \n   ").concat(background === "transparent" ? "bg-white text-[#555]" : "text-white", "\n  ").concat(className || ""),
+        style: {
+            background: background === "transparent" ? "#ffffff" : getGradient(type)
+        },
+        className: "fixed top-[20px] right-[20px] w-[325px] rounded-[12px] shadow-md z-[9999] overflow-hidden flex \n".concat(hasActions ? "flex-col p-[10px]" : "flex-row items-center pl-[10px]", " \n").concat(backgroundClass, "\n").concat(className || ""),
         role: "alert",
         "aria-live": "assertive"
     }, rest), {
@@ -10647,11 +10636,6 @@ var ToastMessage = import_react19.default.forwardRef(function(_0, _1) {
                     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("button", {
                         onClick: btn.onClick,
                         className: "text-[12px] font-semibold px-[16px] py-[6px] rounded-[6px] transition-all active:scale-95",
-                        style: {
-                            background: btn.backgroundColor || (btn.variant === "secondary" ? "transparent" : "rgba(255,255,255,0.9)"),
-                            color: btn.textColor || (btn.variant === "secondary" ? "white" : "black"),
-                            border: btn.borderColor ? "1px solid ".concat(btn.borderColor) : "none"
-                        },
                         children: btn.label
                     }, index);
                 })
@@ -12127,6 +12111,7 @@ var TexttoAudio = function TexttoAudio(param) {
         return text;
     };
     var speakFromTime = function speakFromTime1(time) {
+        window.speechSynthesis.cancel();
         var source = text;
         if (!source.trim()) return;
         var words = source.split(/\s+/);
@@ -12175,6 +12160,7 @@ var TexttoAudio = function TexttoAudio(param) {
     };
     var togglePlay = function togglePlay() {
         if (!utteranceRef.current) {
+            window.speechSynthesis.cancel();
             loopCountRef.current = 0;
             speakFromTime(currentTime);
             return;
@@ -12225,7 +12211,14 @@ var TexttoAudio = function TexttoAudio(param) {
         setPlaying(false);
         setCurrentTime(0);
         (_textAreaRef_current = textAreaRef.current) === null || _textAreaRef_current === void 0 ? void 0 : _textAreaRef_current.setSelectionRange(0, 0);
+        utteranceRef.current = null;
     };
+    (0, import_react23.useEffect)(function() {
+        return function() {
+            window.speechSynthesis.cancel();
+            stopTimer();
+        };
+    }, []);
     (0, import_react23.useEffect)(function() {
         volumeRef.current = volume;
     }, [
@@ -12281,6 +12274,9 @@ var TexttoAudio = function TexttoAudio(param) {
     }, [
         text
     ]);
+    var getVolumeIcon = function getVolumeIcon() {
+        return volume === 0 ? "/icons/mute-icon.png" : "/icons/sound-icon.png";
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
         "data-testid": "text-to-audio-container",
         className: "grid grid-cols-[4fr_1fr] gap-[10px] max-[900px]:grid-cols-1",
@@ -12332,7 +12328,7 @@ var TexttoAudio = function TexttoAudio(param) {
                                         })
                                     }),
                                     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", {
-                                        className: "border border-[4daf83] bg-[#d4e4eb] rounded-[6px] p-[6px] cursor-pointer",
+                                        className: "border border-[#4daf83] bg-[#d4e4eb] rounded-[6px] p-[6px] cursor-pointer",
                                         "data-testid": "play-pause-btn",
                                         onClick: togglePlay,
                                         children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ControlIcon, {
@@ -12340,7 +12336,7 @@ var TexttoAudio = function TexttoAudio(param) {
                                         })
                                     }),
                                     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", {
-                                        className: "border border-[4daf83] bg-[#d4e4eb] rounded-[6px] p-[6px] cursor-pointer",
+                                        className: "border border-[#4daf83] bg-[#d4e4eb] rounded-[6px] p-[6px] cursor-pointer",
                                         "data-testid": "10-sec-forward-skip",
                                         onClick: function onClick() {
                                             return skip(10);
@@ -12350,7 +12346,7 @@ var TexttoAudio = function TexttoAudio(param) {
                                         })
                                     }),
                                     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", {
-                                        className: "border border-[4daf83] bg-[#d4e4eb] rounded-[6px] p-[6px] cursor-pointer",
+                                        className: "border border-[#4daf83] bg-[#d4e4eb] rounded-[6px] p-[6px] cursor-pointer",
                                         "data-testid": "5-sec-forward-skip",
                                         onClick: function onClick() {
                                             return skip(5);
@@ -12368,7 +12364,7 @@ var TexttoAudio = function TexttoAudio(param) {
                                         })
                                     }),
                                     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", {
-                                        className: "border border-[4daf83] bg-[#d4e4eb] rounded-[6px] p-[6px] cursor-pointer",
+                                        className: "border border-[#4daf83] bg-[#d4e4eb] rounded-[6px] p-[6px] cursor-pointer",
                                         "data-testid": "force-stop",
                                         onClick: stop,
                                         children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ControlIcon, {
@@ -12376,7 +12372,7 @@ var TexttoAudio = function TexttoAudio(param) {
                                         })
                                     }),
                                     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", {
-                                        className: "border border-[4daf83] bg-[#d4e4eb] rounded-[6px] p-[6px] cursor-pointer",
+                                        className: "border border-[#4daf83] bg-[#d4e4eb] rounded-[6px] p-[6px] cursor-pointer",
                                         "data-testid": "on-loop-btn",
                                         onClick: function onClick() {
                                             setLoopMode(function(prev) {
@@ -12423,22 +12419,23 @@ var TexttoAudio = function TexttoAudio(param) {
                                 className: "flex items-center gap-[6px] w-[180px]",
                                 children: [
                                     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", {
-                                        className: "flex-1 appearance-none h-[6px] rounded-full cursor-pointer",
+                                        className: "flex-1 appearance-none h-[6px] rounded-[5px] cursor-pointer",
                                         "data-testid": "seek-bar",
                                         type: "range",
                                         min: 0,
                                         max: duration,
                                         step: 0.01,
                                         value: currentTime,
-                                        style: {
-                                            "--progress": "".concat(currentTime / duration * 100, "%")
-                                        },
                                         onChange: function onChange(e) {
                                             var t = Number(e.target.value);
                                             setCurrentTime(t);
                                             window.speechSynthesis.cancel();
                                             stopTimer();
                                             speakFromTime(t);
+                                        },
+                                        style: {
+                                            accentColor: "#4daf83",
+                                            background: "linear-gradient(90deg,\n      rgba(23,97,163,1) 0%,\n      rgba(77,175,131,1) ".concat(currentTime / duration * 100, "%,\n      #e5e7eb ").concat(currentTime / duration * 100, "%,\n      #e5e7eb 100%)")
                                         }
                                     }),
                                     /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", {
@@ -12470,7 +12467,7 @@ var TexttoAudio = function TexttoAudio(param) {
                                 children: "Reads Entire page"
                             }),
                             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", {
-                                className: "bg-gradient-to-r from-[#1761a3] to-[#4daf83] text white border-none px-[12px] py-[6px] ronded-[6px] cursor-pointer",
+                                className: "bg-gradient-to-r from-[#1761a3] to-[#4daf83] text-white border-none px-[12px] py-[6px] rounded-[6px] cursor-pointer",
                                 "data-testid": "reads-given-input",
                                 onClick: function onClick() {
                                     loopCountRef.current = 0;
@@ -12485,115 +12482,123 @@ var TexttoAudio = function TexttoAudio(param) {
                     })
                 ]
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", {
-                className: "flex flex-col gap-[16px]",
-                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
-                    className: "bg-[#f7fbfb] border border-[#cfe5da] rounded-[14px] p-[16px] mb-[16px]",
-                    children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
-                            className: "flex justify-between items-center text-[13px] font-semibold text-[#243a36] mb-[10px]",
-                            children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {
-                                    children: "Volume"
-                                }),
-                                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", {
-                                    children: [
-                                        Math.round(volume * 100),
-                                        "%"
-                                    ]
-                                })
-                            ]
-                        }),
-                        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", {
-                            "data-testid": "text-to-audio-volume",
-                            type: "range",
-                            min: 0,
-                            max: 1,
-                            step: 0.01,
-                            value: volume,
-                            style: {
-                                "--value": "".concat(volume * 100, "%")
-                            },
-                            onChange: function onChange(e) {
-                                return setVolume(Number(e.target.value));
-                            }
-                        })
-                    ]
-                })
-            }),
             /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
-                className: "bg-[#f7fbfb] border border-[#cfe5da] rounded-[14px] p-[16px]",
+                className: "flex flex-col gap-[16px]",
                 children: [
                     /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
-                        className: "text-[13px] font-semibold text-[#243a36] flex justify-between mb-[12px]",
+                        className: "bg-[#f7fbfb] border border-[#cfe5da] rounded-[14px] p-[16px]",
                         children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {
-                                children: "Playback Speed"
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
+                                className: "flex justify-between items-center text-[13px] font-semibold text-[#243a36] mb-[10px]",
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {
+                                        children: "Volume"
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", {
+                                        children: [
+                                            Math.round(volume * 100),
+                                            "%"
+                                        ]
+                                    })
+                                ]
                             }),
-                            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", {
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
+                                className: "flex items-center gap-[10px]",
                                 children: [
-                                    speed.toFixed(2),
-                                    "x"
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", {
+                                        onClick: function onClick() {
+                                            return setVolume(volume === 0 ? 1 : 0);
+                                        },
+                                        style: {
+                                            width: 18,
+                                            height: 18,
+                                            backgroundImage: "url(".concat(getVolumeIcon(), ")"),
+                                            backgroundSize: "contain",
+                                            backgroundRepeat: "no-repeat",
+                                            cursor: "pointer"
+                                        }
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", {
+                                        "data-testid": "text-to-audio-volume",
+                                        type: "range",
+                                        min: 0,
+                                        max: 1,
+                                        step: 0.01,
+                                        value: volume,
+                                        onChange: function onChange(e) {
+                                            return setVolume(Number(e.target.value));
+                                        },
+                                        className: "w-full appearance-none h-[6px] rounded-[5px]",
+                                        style: {
+                                            accentColor: "#4daf83",
+                                            background: "linear-gradient(90deg, \n      rgba(23,97,163,1) 0%, \n      rgba(77,175,131,1) ".concat(volume * 100, "%, \n      #e5e7eb ").concat(volume * 100, "%, \n      #e5e7eb 100%)")
+                                        }
+                                    })
                                 ]
                             })
                         ]
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", {
-                        className: "bg-[#eef5f2] rounded-[12px] p-[12px]",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", {
-                            className: "w-full appearance-none h-[6px] rounded-full",
-                            "data-testid": "test-to-audio-playbackspeed",
-                            type: "range",
-                            min: 0.5,
-                            max: 2,
-                            step: 0.25,
-                            value: speed,
-                            style: {
-                                "--value": "".concat((speed - 0.5) / 1.5 * 100, "%")
-                            },
-                            onChange: function onChange(e) {
-                                return setSpeed(Number(e.target.value));
-                            }
-                        })
-                    }),
                     /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
-                        style: {
-                            fontSize: 12,
-                            color: "#7a8b86",
-                            marginTop: 6,
-                            display: "flex",
-                            justifyContent: "space-between"
-                        },
+                        className: "bg-[#f7fbfb] border border-[#cfe5da] rounded-[14px] p-[16px]",
                         children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {
-                                children: "Slower"
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
+                                className: "flex justify-between text-[13px] font-semibold mb-[10px]",
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {
+                                        children: "Playback Speed"
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", {
+                                        children: [
+                                            speed.toFixed(2),
+                                            "x"
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", {
+                                "data-testid": "test-to-audio-playbackspeed",
+                                type: "range",
+                                min: 0.5,
+                                max: 2,
+                                step: 0.25,
+                                value: speed,
+                                className: "w-full appearance-none h-[6px] rounded-[5px]",
+                                onChange: function onChange(e) {
+                                    return setSpeed(Number(e.target.value));
+                                },
+                                style: {
+                                    accentColor: "#4daf83",
+                                    background: "linear-gradient(90deg,\n        rgba(23,97,163,1) 0%,\n        rgba(77,175,131,1) ".concat((speed - 0.5) / 1.5 * 100, "%,\n        #e5e7eb ").concat((speed - 0.5) / 1.5 * 100, "%,\n        #e5e7eb 100%)")
+                                }
                             }),
-                            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {
-                                children: "Faster"
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
+                                className: "flex justify-between text-xs text-gray-500 mt-1",
+                                children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {
+                                        children: "Slower"
+                                    }),
+                                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {
+                                        children: "Faster"
+                                    })
+                                ]
                             })
                         ]
-                    })
-                ]
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
-                className: "bg-[#f7fbfb] border border-[#cfe5da] rounded-[14px] p-[16px]",
-                children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", {
-                        className: "text-[13px] font-semibold text-[#243a36] flex justify-between mb-[12px]"
                     }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {
-                        "data-testid": "quick-summary",
-                        children: "Quick Summary"
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", {
+                        className: "bg-[#f7fbfb] border border-[#cfe5da] rounded-[14px] p-[16px]",
+                        children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", {
+                                "data-testid": "quick-summary",
+                                className: "font-semibold mb-[8px]",
+                                children: "Quick Summary"
+                            }),
+                            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", {
+                                className: "text-sm text-[#4a5c57] leading-[1.5]",
+                                children: mode === "textarea" ? categorizeText(text) : getQuickSummary()
+                            })
+                        ]
                     })
                 ]
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", {
-                style: {
-                    fontSize: 13,
-                    color: "#4a5c57",
-                    lineHeight: 1.5
-                },
-                children: mode === "textarea" ? categorizeText(text) : getQuickSummary()
             })
         ]
     });