@eztrak/shared 0.16.6 → 0.17.1

package/dist/components/index.mjs

@@ -28,8 +28,8 @@ import {
   TooltipText,
   dropdownStyles,
   resolveActions
-} from "../chunk-SS3J2WBE.mjs";
-import "../chunk-EIX5CUQF.mjs";
+} from "../chunk-4ASJWHN3.mjs";
+import "../chunk-QOYMQFOB.mjs";
 export {
   ActionMenuItem,
   Breadcrumbs,

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

@@ -1,3 +1,5 @@
+import { SweetAlertOptions } from 'sweetalert2';
+
 type RtkQueryError = {
     status?: number | string;
     originalStatus?: number;
@@ -27,15 +29,26 @@ 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;
+    /** Body HTML when `html` is not set. String only (not React nodes). */
+    children?: 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 +56,25 @@ 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;
+    /** Typed-input margin. Number = px. Bottom default `1.25rem`; other sides default `0`. */
+    inputMarginTop?: string | number;
+    inputMarginRight?: string | number;
+    inputMarginBottom?: string | number;
+    inputMarginLeft?: 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-BIAaN76q.d.ts}

@@ -1,3 +1,5 @@
+import { SweetAlertOptions } from 'sweetalert2';
+
 type RtkQueryError = {
     status?: number | string;
     originalStatus?: number;
@@ -27,15 +29,26 @@ 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;
+    /** Body HTML when `html` is not set. String only (not React nodes). */
+    children?: 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 +56,25 @@ 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;
+    /** Typed-input margin. Number = px. Bottom default `1.25rem`; other sides default `0`. */
+    inputMarginTop?: string | number;
+    inputMarginRight?: string | number;
+    inputMarginBottom?: string | number;
+    inputMarginLeft?: 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-BIAaN76q.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-BIAaN76q.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,144 @@ 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;
+    }
+    .ez-confirm-popup .swal2-input {
+      margin-top: var(--ez-confirm-input-mt, 0) !important;
+      margin-right: var(--ez-confirm-input-mr, 0) !important;
+      margin-bottom: var(--ez-confirm-input-mb, 1.25rem) !important;
+      margin-left: var(--ez-confirm-input-ml, 0) !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 +619,63 @@ 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 ?? options.children;
+  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 inputMarginTop = cssSize(options.inputMarginTop, "0");
+  const inputMarginRight = cssSize(options.inputMarginRight, "0");
+  const inputMarginBottom = cssSize(options.inputMarginBottom, "1.25rem");
+  const inputMarginLeft = cssSize(options.inputMarginLeft, "0");
+  const onCancel = options.onCancel;
   const useLoader = showLoaderOnConfirm || hasInput;
   const inputHtml = html ?? (hasInput ? `
       ${text ? `<p style="margin-bottom: 15px;">${text}</p>` : ""}
@@ -505,24 +683,60 @@ 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);
+        popup.style.setProperty("--ez-confirm-input-mt", inputMarginTop);
+        popup.style.setProperty("--ez-confirm-input-mr", inputMarginRight);
+        popup.style.setProperty("--ez-confirm-input-mb", inputMarginBottom);
+        popup.style.setProperty("--ez-confirm-input-ml", inputMarginLeft);
+        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 +771,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?.();
     }
   });
 }
@@ -2254,10 +2472,7 @@ function Sidebar({
                   "div",
                   {
                     "data-sidebar-item": item.name,
-                    className: cn(
-                      "has-sub-items max-w-full min-w-0 flex flex-col",
-                      collapsed ? "my-1" : "my-2"
-                    ),
+                    className: "has-sub-items max-w-full min-w-0 flex flex-col",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         ToolTip,
@@ -3257,6 +3472,7 @@ var TableErrorBoundary = ({
   CardSkeleton,
   CustomCellEditor,
   CustomPagination,
+  DEFAULT_CONFIRM_ICONS,
   DropdownFilter,
   EztrakTabs,
   Header,