@eztrak/shared 0.16.5 → 0.17.0

package/dist/components/index.mjs

@@ -28,8 +28,8 @@ import {
   TooltipText,
   dropdownStyles,
   resolveActions
-} from "../chunk-S7ZLXOPF.mjs";
-import "../chunk-EIX5CUQF.mjs";
+} from "../chunk-KJWCRX6F.mjs";
+import "../chunk-A5BBQ7X5.mjs";
 export {
   ActionMenuItem,
   Breadcrumbs,

package/dist/{handleApiError-CwVIJOqO.d.mts → handleApiError-SHMjCJHj.d.mts}

@@ -1,3 +1,5 @@
+import { SweetAlertOptions } from 'sweetalert2';
+
 type RtkQueryError = {
     status?: number | string;
     originalStatus?: number;
@@ -27,15 +29,24 @@ declare function classifyError(error: RtkQueryError | null | undefined): ErrorCl
 declare function formatValidationErrorsHtml(errors: Record<string, string[]>): string;
 /** Handles RTK Query errors with built-in toast.error or SweetAlert (when showAlert is true). */
 declare function handleApiError(error: RtkQueryError | null | undefined, { showAlert, fallbackMessage }?: HandleApiErrorOptions): void;
+type ConfirmationAlertVariant = "brand" | "danger";
 interface ConfirmationAlertOptions {
     title?: string;
     text?: string;
     html?: string;
     icon?: "warning" | "info" | "question" | "error" | "success";
+    /** Custom icon markup. When set, replaces SweetAlert's default icon content. */
+    iconHtml?: string;
+    iconColor?: string;
+    iconBgColor?: string;
+    showIcon?: boolean;
     confirmButtonText?: string;
     cancelButtonText?: string;
     confirmButtonColor?: string;
     cancelButtonColor?: string;
+    confirmButtonTextColor?: string;
+    cancelButtonTextColor?: string;
+    showCancelButton?: boolean;
     showLoaderOnConfirm?: boolean;
     /** Type exactly — trimmed, case-sensitive. */
     inputExpectedValue?: string;
@@ -43,7 +54,20 @@ interface ConfirmationAlertOptions {
     reverseButtons?: boolean;
     focusCancel?: boolean;
     zIndex?: number;
+    width?: string | number;
+    /** Card corner radius. Default `1rem`. Number = px. */
+    borderRadius?: string | number;
+    /** Confirm/cancel button corner radius. Default `0.5rem`. Number = px. */
+    buttonBorderRadius?: string | number;
+    /** `danger` = delete look; `brand` = orange confirm. Explicit options win. */
+    variant?: ConfirmationAlertVariant;
+    customClass?: SweetAlertOptions["customClass"];
+    onCancel?: () => void;
 }
+/** Reusable icon markup — override via `iconHtml`. */
+declare const DEFAULT_CONFIRM_ICONS: {
+    readonly warning: string;
+};
 declare function confirmationAlert(onConfirm: () => void | Promise<void>, options?: ConfirmationAlertOptions): void;
 
-export { type ConfirmationAlertOptions as C, type ErrorClassification as E, type HandleApiErrorOptions as H, type RtkQueryError as R, type ErrorSuggestedAction as a, confirmationAlert as b, classifyError as c, formatValidationErrorsHtml as f, handleApiError as h, isRetryableError as i };
+export { type ConfirmationAlertOptions as C, DEFAULT_CONFIRM_ICONS as D, type ErrorClassification as E, type HandleApiErrorOptions as H, type RtkQueryError as R, type ConfirmationAlertVariant as a, type ErrorSuggestedAction as b, classifyError as c, confirmationAlert as d, formatValidationErrorsHtml as f, handleApiError as h, isRetryableError as i };

package/dist/{handleApiError-CwVIJOqO.d.ts → handleApiError-SHMjCJHj.d.ts}

@@ -1,3 +1,5 @@
+import { SweetAlertOptions } from 'sweetalert2';
+
 type RtkQueryError = {
     status?: number | string;
     originalStatus?: number;
@@ -27,15 +29,24 @@ declare function classifyError(error: RtkQueryError | null | undefined): ErrorCl
 declare function formatValidationErrorsHtml(errors: Record<string, string[]>): string;
 /** Handles RTK Query errors with built-in toast.error or SweetAlert (when showAlert is true). */
 declare function handleApiError(error: RtkQueryError | null | undefined, { showAlert, fallbackMessage }?: HandleApiErrorOptions): void;
+type ConfirmationAlertVariant = "brand" | "danger";
 interface ConfirmationAlertOptions {
     title?: string;
     text?: string;
     html?: string;
     icon?: "warning" | "info" | "question" | "error" | "success";
+    /** Custom icon markup. When set, replaces SweetAlert's default icon content. */
+    iconHtml?: string;
+    iconColor?: string;
+    iconBgColor?: string;
+    showIcon?: boolean;
     confirmButtonText?: string;
     cancelButtonText?: string;
     confirmButtonColor?: string;
     cancelButtonColor?: string;
+    confirmButtonTextColor?: string;
+    cancelButtonTextColor?: string;
+    showCancelButton?: boolean;
     showLoaderOnConfirm?: boolean;
     /** Type exactly — trimmed, case-sensitive. */
     inputExpectedValue?: string;
@@ -43,7 +54,20 @@ interface ConfirmationAlertOptions {
     reverseButtons?: boolean;
     focusCancel?: boolean;
     zIndex?: number;
+    width?: string | number;
+    /** Card corner radius. Default `1rem`. Number = px. */
+    borderRadius?: string | number;
+    /** Confirm/cancel button corner radius. Default `0.5rem`. Number = px. */
+    buttonBorderRadius?: string | number;
+    /** `danger` = delete look; `brand` = orange confirm. Explicit options win. */
+    variant?: ConfirmationAlertVariant;
+    customClass?: SweetAlertOptions["customClass"];
+    onCancel?: () => void;
 }
+/** Reusable icon markup — override via `iconHtml`. */
+declare const DEFAULT_CONFIRM_ICONS: {
+    readonly warning: string;
+};
 declare function confirmationAlert(onConfirm: () => void | Promise<void>, options?: ConfirmationAlertOptions): void;
 
-export { type ConfirmationAlertOptions as C, type ErrorClassification as E, type HandleApiErrorOptions as H, type RtkQueryError as R, type ErrorSuggestedAction as a, confirmationAlert as b, classifyError as c, formatValidationErrorsHtml as f, handleApiError as h, isRetryableError as i };
+export { type ConfirmationAlertOptions as C, DEFAULT_CONFIRM_ICONS as D, type ErrorClassification as E, type HandleApiErrorOptions as H, type RtkQueryError as R, type ConfirmationAlertVariant as a, type ErrorSuggestedAction as b, classifyError as c, confirmationAlert as d, formatValidationErrorsHtml as f, handleApiError as h, isRetryableError as i };

package/dist/index.d.mts

@@ -1,9 +1,10 @@
 export { CreateBaseQueryWithRetryOptions, PermissionRecord, TransformedPermissions, USER_STATE_STORAGE_KEY, capitalizeText, checkIfExistsInArray, cn, convertCommaDataToArray, createBaseQueryWithRetry, currencyFormatter, deserializeJson, flattenTableData, formatDate, formatDateTime, formatNumber, get, getApiError, getErrorMessages, getFieldsByCategory, getFieldsByInputType, getFieldsByName, getItem, getItemFromLocalStorage, isEmpty, loadUserState, normalizeApiListItems, parseCurrencyValueToNumber, removeByPropertyValues, removeItem, resetPageParam, saveItemLocalStorage, saveUserState, set, setItem, storeItemInLocalStorage, toDateInputValue, toLowerCaseText, transformPermissions, truncateFileName, truncateText } from './utils/index.mjs';
-export { C as ConfirmationAlertOptions, E as ErrorClassification, a as ErrorSuggestedAction, H as HandleApiErrorOptions, R as RtkQueryError, c as classifyError, b as confirmationAlert, f as formatValidationErrorsHtml, h as handleApiError, i as isRetryableError } from './handleApiError-CwVIJOqO.mjs';
+export { C as ConfirmationAlertOptions, a as ConfirmationAlertVariant, D as DEFAULT_CONFIRM_ICONS, E as ErrorClassification, b as ErrorSuggestedAction, H as HandleApiErrorOptions, R as RtkQueryError, c as classifyError, d as confirmationAlert, f as formatValidationErrorsHtml, h as handleApiError, i as isRetryableError } from './handleApiError-SHMjCJHj.mjs';
 export { UseGridHeightOptions, useGridHeight, usePaginationUrlSync } from './hooks/index.mjs';
 export { ActionMenuItem, ActionMenuItemProps, BreadcrumbRoute, Breadcrumbs, BreadcrumbsProps, Button, ButtonProps, Card, CardProps, CardSkeleton, CardSkeletonProps, CardSkeletonVariant, CellEditPayload, CellEditorInputType, CustomCellEditor, CustomCellEditorProps, CustomCellEditorRef, CustomPagination, CustomPaginationClassNames, CustomPaginationProps, DropdownFilter, DropdownFilterProps, DropdownOption, EztrakTab, EztrakTabs, EztrakTabsClassNames, EztrakTabsProps, Header, HeaderProps, LayoutStatus, Loader, LoaderProps, Modal, ModalProps, PaginationData, PopupActionHandler, PopupCellRenderer, PopupCellRendererParams, PopupCellRendererProps, PopupDropDownContent, ROW_ACTION_DEFAULT_ICON_SIZE, ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE, ROW_ACTION_ITEM_HOVER_CLASS, ROW_ACTION_ITEM_TEXT_CLASS, ROW_ACTION_PRESETS, ResetColumnsButton, ResetColumnsButtonProps, ResetFiltersButton, ResetFiltersButtonProps, ResetFiltersButtonVariant, ResolvedRowAction, RowAction, RowActionConfirmFn, RowActionFlag, RowActionItemRenderContext, RowActionItemType, RowActionPreset, RowActionPresetName, RowActions, RowActionsList, RowActionsMode, RowActionsProps, RowActionsRenderContext, SearchInput, SearchInputProps, Sidebar, SidebarItem, SidebarProps, TableErrorBoundary, TableErrorBoundaryProps, TableLayoutToolbarControls, TableLayoutToolbarControlsProps, ToolTip, ToolTipProps, TooltipText, TooltipTextProps, dropdownStyles, resolveActions } from './components/index.mjs';
 import 'clsx';
 import '@reduxjs/toolkit/query';
+import 'sweetalert2';
 import 'react-router-dom';
 import 'react';
 import 'react-select';

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 export { CreateBaseQueryWithRetryOptions, PermissionRecord, TransformedPermissions, USER_STATE_STORAGE_KEY, capitalizeText, checkIfExistsInArray, cn, convertCommaDataToArray, createBaseQueryWithRetry, currencyFormatter, deserializeJson, flattenTableData, formatDate, formatDateTime, formatNumber, get, getApiError, getErrorMessages, getFieldsByCategory, getFieldsByInputType, getFieldsByName, getItem, getItemFromLocalStorage, isEmpty, loadUserState, normalizeApiListItems, parseCurrencyValueToNumber, removeByPropertyValues, removeItem, resetPageParam, saveItemLocalStorage, saveUserState, set, setItem, storeItemInLocalStorage, toDateInputValue, toLowerCaseText, transformPermissions, truncateFileName, truncateText } from './utils/index.js';
-export { C as ConfirmationAlertOptions, E as ErrorClassification, a as ErrorSuggestedAction, H as HandleApiErrorOptions, R as RtkQueryError, c as classifyError, b as confirmationAlert, f as formatValidationErrorsHtml, h as handleApiError, i as isRetryableError } from './handleApiError-CwVIJOqO.js';
+export { C as ConfirmationAlertOptions, a as ConfirmationAlertVariant, D as DEFAULT_CONFIRM_ICONS, E as ErrorClassification, b as ErrorSuggestedAction, H as HandleApiErrorOptions, R as RtkQueryError, c as classifyError, d as confirmationAlert, f as formatValidationErrorsHtml, h as handleApiError, i as isRetryableError } from './handleApiError-SHMjCJHj.js';
 export { UseGridHeightOptions, useGridHeight, usePaginationUrlSync } from './hooks/index.js';
 export { ActionMenuItem, ActionMenuItemProps, BreadcrumbRoute, Breadcrumbs, BreadcrumbsProps, Button, ButtonProps, Card, CardProps, CardSkeleton, CardSkeletonProps, CardSkeletonVariant, CellEditPayload, CellEditorInputType, CustomCellEditor, CustomCellEditorProps, CustomCellEditorRef, CustomPagination, CustomPaginationClassNames, CustomPaginationProps, DropdownFilter, DropdownFilterProps, DropdownOption, EztrakTab, EztrakTabs, EztrakTabsClassNames, EztrakTabsProps, Header, HeaderProps, LayoutStatus, Loader, LoaderProps, Modal, ModalProps, PaginationData, PopupActionHandler, PopupCellRenderer, PopupCellRendererParams, PopupCellRendererProps, PopupDropDownContent, ROW_ACTION_DEFAULT_ICON_SIZE, ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE, ROW_ACTION_ITEM_HOVER_CLASS, ROW_ACTION_ITEM_TEXT_CLASS, ROW_ACTION_PRESETS, ResetColumnsButton, ResetColumnsButtonProps, ResetFiltersButton, ResetFiltersButtonProps, ResetFiltersButtonVariant, ResolvedRowAction, RowAction, RowActionConfirmFn, RowActionFlag, RowActionItemRenderContext, RowActionItemType, RowActionPreset, RowActionPresetName, RowActions, RowActionsList, RowActionsMode, RowActionsProps, RowActionsRenderContext, SearchInput, SearchInputProps, Sidebar, SidebarItem, SidebarProps, TableErrorBoundary, TableErrorBoundaryProps, TableLayoutToolbarControls, TableLayoutToolbarControlsProps, ToolTip, ToolTipProps, TooltipText, TooltipTextProps, dropdownStyles, resolveActions } from './components/index.js';
 import 'clsx';
 import '@reduxjs/toolkit/query';
+import 'sweetalert2';
 import 'react-router-dom';
 import 'react';
 import 'react-select';

package/dist/index.js

@@ -37,6 +37,7 @@ __export(src_exports, {
   CardSkeleton: () => CardSkeleton,
   CustomCellEditor: () => CustomCellEditor,
   CustomPagination: () => CustomPagination,
+  DEFAULT_CONFIRM_ICONS: () => DEFAULT_CONFIRM_ICONS,
   DropdownFilter: () => DropdownFilter,
   EztrakTabs: () => EztrakTabs,
   Header: () => Header,
@@ -472,7 +473,138 @@ function handleApiError(error, { showAlert = false, fallbackMessage } = {}) {
   import_react_hot_toast.default.error(message);
 }
 var BRAND_ORANGE = "#FF7335";
-var CANCEL_RED = "#ff0000";
+var DANGER_RED = "#DC2626";
+var DANGER_ICON_BG = "#FEE2E2";
+var CANCEL_BG = "#ffffff";
+var CANCEL_TEXT = "#374151";
+var CONFIRM_STYLE_ID = "eztrak-confirm-alert-styles";
+function cssSize(value, fallback) {
+  if (value === void 0) return fallback;
+  return typeof value === "number" ? `${value}px` : value;
+}
+var DEFAULT_CONFIRM_ICONS = {
+  warning: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+    </svg>
+  `.trim()
+};
+var VARIANT_DEFAULTS = {
+  brand: {
+    confirmButtonText: "Yes",
+    confirmButtonColor: BRAND_ORANGE,
+    confirmButtonTextColor: "#ffffff",
+    cancelButtonColor: CANCEL_BG,
+    cancelButtonTextColor: CANCEL_TEXT,
+    iconColor: BRAND_ORANGE,
+    iconBgColor: "#FFEDD5",
+    iconHtml: DEFAULT_CONFIRM_ICONS.warning,
+    icon: "warning"
+  },
+  danger: {
+    title: "Delete this item",
+    confirmButtonText: "Yes, delete it!",
+    confirmButtonColor: DANGER_RED,
+    confirmButtonTextColor: "#ffffff",
+    cancelButtonColor: CANCEL_BG,
+    cancelButtonTextColor: CANCEL_TEXT,
+    iconColor: DANGER_RED,
+    iconBgColor: DANGER_ICON_BG,
+    iconHtml: DEFAULT_CONFIRM_ICONS.warning,
+    icon: "warning",
+    showLoaderOnConfirm: true
+  }
+};
+function ensureConfirmAlertStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(CONFIRM_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = CONFIRM_STYLE_ID;
+  style.textContent = `
+    .ez-confirm-popup {
+      border-radius: var(--ez-confirm-radius, 1rem) !important;
+      padding: 1.5rem !important;
+      max-width: 24rem !important;
+      width: var(--ez-confirm-width, 100%) !important;
+      box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
+    }
+    .ez-confirm-title {
+      font-size: 1.125rem !important;
+      font-weight: 600 !important;
+      color: #111827 !important;
+      margin: 0 0 0.25rem !important;
+      padding: 0 !important;
+    }
+    .ez-confirm-html {
+      font-size: 0.875rem !important;
+      color: #6b7280 !important;
+      margin: 0 0 1.5rem !important;
+    }
+    .ez-confirm-icon {
+      border: none !important;
+      background: var(--ez-confirm-icon-bg, #fee2e2) !important;
+      color: var(--ez-confirm-icon-color, #dc2626) !important;
+      width: 3rem !important;
+      height: 3rem !important;
+      margin: 0 auto 1rem !important;
+      border-radius: 9999px !important;
+    }
+    .ez-confirm-icon .swal2-icon-content {
+      font-size: inherit !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      color: inherit !important;
+    }
+    .ez-confirm-actions {
+      width: 100% !important;
+      margin: 0 !important;
+      gap: 0.75rem !important;
+    }
+    .ez-confirm-confirm,
+    .ez-confirm-cancel {
+      flex: 1 1 0 !important;
+      margin: 0 !important;
+      border-radius: var(--ez-confirm-btn-radius, 0.5rem) !important;
+      font-size: 0.875rem !important;
+      font-weight: 500 !important;
+      padding: 0.625rem 1rem !important;
+      box-shadow: none !important;
+    }
+    .ez-confirm-confirm {
+      background: var(--ez-confirm-confirm-bg, #ff7335) !important;
+      color: var(--ez-confirm-confirm-fg, #fff) !important;
+      border: none !important;
+    }
+    .ez-confirm-confirm:hover {
+      filter: brightness(0.95);
+    }
+    .ez-confirm-cancel {
+      background: var(--ez-confirm-cancel-bg, #fff) !important;
+      color: var(--ez-confirm-cancel-fg, #374151) !important;
+      border: 1px solid #d1d5db !important;
+    }
+    .ez-confirm-cancel:hover {
+      background: #f9fafb !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function pick(explicit, fromVariant, fallback) {
+  if (explicit !== void 0) return explicit;
+  if (fromVariant !== void 0) return fromVariant;
+  return fallback;
+}
+function mergeCustomClass(base, extra) {
+  if (!extra || typeof extra !== "object") return base;
+  const merged = { ...base };
+  for (const [key, value] of Object.entries(extra)) {
+    if (typeof value === "string" && value) {
+      merged[key] = merged[key] ? `${merged[key]} ${value}` : value;
+    }
+  }
+  return merged;
+}
 function getConfirmErrorMessage(error) {
   if (error && typeof error === "object") {
     const err = error;
@@ -481,23 +613,59 @@ function getConfirmErrorMessage(error) {
   return "Something went wrong. Please try again.";
 }
 function confirmationAlert(onConfirm, options = {}) {
-  const {
-    title = options.inputExpectedValue ? "Confirmation Required" : "Are you sure?",
-    text,
-    html,
-    icon = "warning",
-    confirmButtonText = "Yes",
-    cancelButtonText = "Cancel",
-    confirmButtonColor = BRAND_ORANGE,
-    cancelButtonColor = CANCEL_RED,
-    showLoaderOnConfirm = false,
-    inputExpectedValue,
-    inputPlaceholder = "Type confirmation text to proceed",
-    reverseButtons,
-    focusCancel,
-    zIndex
-  } = options;
+  ensureConfirmAlertStyles();
+  const variant = options.variant ?? "brand";
+  const vd = VARIANT_DEFAULTS[variant];
+  const inputExpectedValue = options.inputExpectedValue;
   const hasInput = Boolean(inputExpectedValue);
+  const title = pick(
+    options.title,
+    vd.title,
+    hasInput ? "Confirmation Required" : "Delete this item"
+  );
+  const text = options.text;
+  const html = options.html;
+  const icon = pick(options.icon, vd.icon, "warning");
+  const iconHtml = pick(options.iconHtml, vd.iconHtml, void 0);
+  const iconColor = pick(options.iconColor, vd.iconColor, BRAND_ORANGE);
+  const iconBgColor = pick(options.iconBgColor, vd.iconBgColor, "#FFEDD5");
+  const showIcon = options.showIcon !== false;
+  const confirmButtonText = pick(options.confirmButtonText, vd.confirmButtonText, "Yes");
+  const cancelButtonText = options.cancelButtonText ?? "Cancel";
+  const confirmButtonColor = pick(
+    options.confirmButtonColor,
+    vd.confirmButtonColor,
+    BRAND_ORANGE
+  );
+  const cancelButtonColor = pick(
+    options.cancelButtonColor,
+    vd.cancelButtonColor,
+    CANCEL_BG
+  );
+  const confirmButtonTextColor = pick(
+    options.confirmButtonTextColor,
+    vd.confirmButtonTextColor,
+    "#ffffff"
+  );
+  const cancelButtonTextColor = pick(
+    options.cancelButtonTextColor,
+    vd.cancelButtonTextColor,
+    CANCEL_TEXT
+  );
+  const showCancelButton = options.showCancelButton !== false;
+  const showLoaderOnConfirm = pick(
+    options.showLoaderOnConfirm,
+    vd.showLoaderOnConfirm,
+    false
+  );
+  const inputPlaceholder = options.inputPlaceholder ?? "Type confirmation text to proceed";
+  const reverseButtons = options.reverseButtons ?? false;
+  const focusCancel = options.focusCancel;
+  const zIndex = options.zIndex;
+  const width = options.width;
+  const borderRadius = cssSize(options.borderRadius, "1rem");
+  const buttonBorderRadius = cssSize(options.buttonBorderRadius, "0.5rem");
+  const onCancel = options.onCancel;
   const useLoader = showLoaderOnConfirm || hasInput;
   const inputHtml = html ?? (hasInput ? `
       ${text ? `<p style="margin-bottom: 15px;">${text}</p>` : ""}
@@ -505,24 +673,56 @@ function confirmationAlert(onConfirm, options = {}) {
         Please type "<span style="color: ${BRAND_ORANGE}; font-weight: bold;">${inputExpectedValue}</span>" to confirm:
       </p>
     ` : void 0);
+  const baseCustomClass = {
+    popup: "ez-confirm-popup",
+    title: "ez-confirm-title",
+    htmlContainer: "ez-confirm-html",
+    actions: "ez-confirm-actions",
+    confirmButton: "ez-confirm-confirm",
+    cancelButton: "ez-confirm-cancel",
+    icon: "ez-confirm-icon"
+  };
   const swalOptions = {
     title,
-    icon,
-    showCancelButton: true,
+    showCancelButton,
     confirmButtonText,
     cancelButtonText,
     confirmButtonColor,
     cancelButtonColor,
     reverseButtons,
     focusCancel,
+    customClass: mergeCustomClass(baseCustomClass, options.customClass),
     allowOutsideClick: () => !import_sweetalert2.default.isLoading(),
     allowEscapeKey: () => !import_sweetalert2.default.isLoading(),
     didOpen: () => {
+      const popup = import_sweetalert2.default.getPopup();
+      if (popup) {
+        popup.style.setProperty("--ez-confirm-confirm-bg", confirmButtonColor);
+        popup.style.setProperty("--ez-confirm-confirm-fg", confirmButtonTextColor);
+        popup.style.setProperty("--ez-confirm-cancel-bg", cancelButtonColor);
+        popup.style.setProperty("--ez-confirm-cancel-fg", cancelButtonTextColor);
+        popup.style.setProperty("--ez-confirm-icon-color", iconColor);
+        popup.style.setProperty("--ez-confirm-icon-bg", iconBgColor);
+        popup.style.setProperty("--ez-confirm-radius", borderRadius);
+        popup.style.setProperty("--ez-confirm-btn-radius", buttonBorderRadius);
+        if (width != null) {
+          popup.style.setProperty(
+            "--ez-confirm-width",
+            typeof width === "number" ? `${width}px` : String(width)
+          );
+        }
+      }
       if (zIndex == null) return;
       const container = import_sweetalert2.default.getContainer();
       if (container) container.style.zIndex = String(zIndex);
     }
   };
+  if (showIcon) {
+    swalOptions.icon = icon;
+    if (iconHtml) {
+      swalOptions.iconHtml = iconHtml;
+    }
+  }
   if (hasInput) {
     swalOptions.html = inputHtml;
     swalOptions.input = "text";
@@ -557,6 +757,10 @@ function confirmationAlert(onConfirm, options = {}) {
   void import_sweetalert2.default.fire(swalOptions).then((result) => {
     if (result.isConfirmed && !useLoader) {
       void Promise.resolve(onConfirm());
+      return;
+    }
+    if (result.isDismissed) {
+      onCancel?.();
     }
   });
 }
@@ -1839,7 +2043,35 @@ function Header({
 var import_react8 = require("react");
 var import_react_router_dom5 = require("react-router-dom");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var INACTIVE_LINK_CLASS = "inline-flex items-center justify-center text-[#5D6D7F] bg-white px-4 py-2 rounded-lg transition-colors duration-300 hover:text-[#516378]";
+var DEFAULT_BACKGROUND = "#F7F7F5";
+var DEFAULT_INACTIVE = "#6B7280";
+var DEFAULT_ACTIVE = "#111111";
+var DEFAULT_SEPARATOR = "#9CA3AF";
+var CRUMB_LAYOUT = "inline-flex items-center gap-1.5 whitespace-nowrap leading-5 rounded-sm";
+var LINK_INTERACTION = "font-normal transition-colors duration-200 motion-reduce:transition-none hover:!text-[color-mix(in_srgb,var(--bc-inactive)_65%,#111111)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#111111]";
+function BreadcrumbChevron() {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      "aria-hidden": "true",
+      className: "shrink-0",
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "path",
+        {
+          d: "M4.5 2.5L8 6L4.5 9.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
 function asTitleMap(customTitles) {
   if (Object.prototype.toString.call(customTitles) !== "[object Object]") {
     return {};
@@ -1869,73 +2101,141 @@ function Breadcrumbs({
   containerClassName,
   linkClassName = "",
   separatorClassName = "",
-  separator = "/",
-  activeClassName = "font-bold whitespace-pre",
+  separator,
+  activeClassName = "font-semibold",
   customTitles = {},
   customIcons = {},
   prefix,
   suffix,
-  nonClickablePaths = []
+  nonClickablePaths = [],
+  backgroundColor = DEFAULT_BACKGROUND,
+  inactiveColor = DEFAULT_INACTIVE,
+  activeColor = DEFAULT_ACTIVE,
+  separatorColor = DEFAULT_SEPARATOR,
+  iconColor,
+  iconClassName,
+  showHome = false
 }) {
   const location = (0, import_react_router_dom5.useLocation)();
   const pathnames = location.pathname.split("/").filter((segment) => segment);
   const titles = asTitleMap(customTitles);
-  const inactiveLinkClassName = cn(INACTIVE_LINK_CLASS, linkClassName);
   const getTitle = (pathname) => {
     const match = findRoute(pathname, routes);
     if (match && match.title) {
       return match.title;
     }
-    const titleKeys = Object.keys(titles);
-    const paramMatch = pathname.split("/").find((segment) => titleKeys.includes(segment)) || "";
-    if (paramMatch && titles[paramMatch]) {
-      return titles[paramMatch];
-    }
     const lastParamPath = getLastParam(pathname);
+    if (lastParamPath && titles[lastParamPath]) {
+      return titles[lastParamPath];
+    }
     if (lastParamPath) {
       return lastParamPath;
     }
     return pathname;
   };
   const getIcon = (pathname) => {
-    const iconKeys = Object.keys(customIcons);
-    const matchedSegment = pathname.split("/").find((segment) => iconKeys.includes(segment));
-    if (matchedSegment && customIcons[matchedSegment]) {
-      return customIcons[matchedSegment];
+    const segment = getLastParam(pathname);
+    if (segment && customIcons[segment]) {
+      return customIcons[segment];
     }
     return null;
   };
+  const crumbs = [];
+  if (showHome) {
+    crumbs.push({
+      key: "home",
+      to: "/",
+      title: titles.home || "Home",
+      icon: customIcons.home ?? null,
+      isCurrent: pathnames.length === 0,
+      isLink: pathnames.length > 0
+    });
+  }
+  pathnames.forEach((segment, index) => {
+    const to = `/${pathnames.slice(0, index + 1).join("/")}`;
+    const isCurrent = index === pathnames.length - 1;
+    const isNonClickable = nonClickablePaths.some(
+      (token) => to.includes(token) || segment === token
+    );
+    crumbs.push({
+      key: to,
+      to,
+      title: getTitle(to),
+      icon: getIcon(to),
+      isCurrent,
+      isLink: !isCurrent && !isNonClickable
+    });
+  });
+  const navStyle = {
+    backgroundColor,
+    "--bc-inactive": inactiveColor
+  };
+  const inactiveClassName = cn(CRUMB_LAYOUT, LINK_INTERACTION, linkClassName);
+  const staticInactiveClassName = cn(CRUMB_LAYOUT, "font-normal", linkClassName);
+  const currentClassName = cn(CRUMB_LAYOUT, activeClassName);
+  const renderCrumb = (crumb) => {
+    const content = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      crumb.icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "span",
+        {
+          className: cn("inline-flex shrink-0 items-center", iconClassName),
+          style: iconColor ? { color: iconColor } : void 0,
+          children: crumb.icon
+        }
+      ) : null,
+      crumb.title
+    ] });
+    if (crumb.isCurrent) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "span",
+        {
+          className: currentClassName,
+          style: { color: activeColor },
+          "aria-current": "page",
+          children: content
+        }
+      );
+    }
+    if (crumb.isLink) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_react_router_dom5.Link,
+        {
+          to: crumb.to,
+          className: inactiveClassName,
+          style: { color: inactiveColor },
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: staticInactiveClassName, style: { color: inactiveColor }, children: content });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    "div",
+    "nav",
     {
+      "aria-label": "Breadcrumb",
       className: cn(
-        "flex flex-row gap-2 items-center text-sm text-secondary",
+        "flex w-full flex-row items-center gap-2 overflow-x-auto px-4 py-3 text-sm leading-5",
         containerClassName
       ),
+      style: navStyle,
       children: [
-        prefix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-prefix", children: prefix }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_router_dom5.Link, { to: "/", className: inactiveLinkClassName, children: [
-          customIcons.home && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mr-1", children: customIcons.home }),
-          titles.home || "Home"
-        ] }),
-        pathnames.map((segment, index) => {
-          const to = `/${pathnames.slice(0, index + 1).join("/")}`;
-          const isLast = index === pathnames.length - 1;
-          const title = getTitle(to);
-          const icon = getIcon(to);
-          const isNonClickable = nonClickablePaths.some(
-            (token) => to.includes(token) || segment === token
-          );
-          const crumb = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mr-1", children: icon }),
-            title
-          ] });
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react8.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: separatorClassName, children: separator }),
-            isLast || isNonClickable ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: isLast ? activeClassName : linkClassName, children: crumb }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_router_dom5.Link, { to, className: inactiveLinkClassName, children: crumb })
-          ] }, to);
-        }),
-        suffix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-suffix", children: suffix })
+        prefix ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-prefix", children: prefix }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ol", { className: "flex min-w-0 flex-row flex-nowrap items-center gap-2", children: crumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "inline-flex items-center gap-2", children: [
+          index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "inline-flex shrink-0 items-center",
+                separatorClassName
+              ),
+              style: { color: separatorColor },
+              children: separator === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbChevron, {}) : (0, import_react8.isValidElement)(separator) ? (0, import_react8.cloneElement)(separator) : separator
+            }
+          ) : null,
+          renderCrumb(crumb)
+        ] }, crumb.key)) }),
+        suffix ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-suffix", children: suffix }) : null
       ]
     }
   );
@@ -3161,6 +3461,7 @@ var TableErrorBoundary = ({
   CardSkeleton,
   CustomCellEditor,
   CustomPagination,
+  DEFAULT_CONFIRM_ICONS,
   DropdownFilter,
   EztrakTabs,
   Header,