@sustaina/shared-ui 1.11.0 → 1.13.0

package/dist/index.js

@@ -4,7 +4,7 @@ var AccordionPrimitive = require('@radix-ui/react-accordion');
 var clsx2 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var React5 = require('react');
+var React4 = require('react');
 var dateFns = require('date-fns');
 var lucideReact = require('lucide-react');
 var reactDom = require('react-dom');
@@ -18,6 +18,9 @@ var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var reactTable = require('@tanstack/react-table');
 var SheetPrimitive = require('@radix-ui/react-dialog');
+var i18n = require('i18next');
+var reactI18next = require('react-i18next');
+var zustand = require('zustand');
 var zod$1 = require('@hookform/resolvers/zod');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
@@ -25,7 +28,6 @@ var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var core = require('@dnd-kit/core');
 var modifiers = require('@dnd-kit/modifiers');
 var zod = require('zod');
-var zustand = require('zustand');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var lexical = require('lexical');
 var LexicalComposer = require('@lexical/react/LexicalComposer');
@@ -73,13 +75,14 @@ function _interopNamespace(e) {
 
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
+var i18n__default = /*#__PURE__*/_interopDefault(i18n);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
@@ -583,7 +586,7 @@ function AccordionContent({
   );
 }
 var ExpandCollapse = ({ title, children, portalId }) => {
-  const [isOpen, setIsOpen] = React5.useState(false);
+  const [isOpen, setIsOpen] = React4.useState(false);
   const Panel = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -677,31 +680,31 @@ function makeNewRow(field) {
   };
 }
 function useAdvanceSearch({ fields, limitRows }) {
-  const [rows, setRows] = React5.useState([makeNewRow(fields[0])]);
-  const updateRows = React5.useCallback((next) => {
+  const [rows, setRows] = React4.useState([makeNewRow(fields[0])]);
+  const updateRows = React4.useCallback((next) => {
     setRows(next);
   }, []);
-  const operatorsForField = React5.useCallback(
+  const operatorsForField = React4.useCallback(
     (fieldName) => {
       const t = getFieldType(fields, fieldName);
       return OPERATOR_MAP[t];
     },
     [fields]
   );
-  const addRow = React5.useCallback(() => {
+  const addRow = React4.useCallback(() => {
     if (limitRows && rows.length >= limitRows) return;
     const lastRow = rows[rows.length - 1];
     const lastField = fields.find((f) => f.name === lastRow?.fieldName) ?? fields[0];
     updateRows([...rows, makeNewRow(lastField)]);
   }, [rows, fields, updateRows, limitRows]);
-  const removeRow = React5.useCallback(
+  const removeRow = React4.useCallback(
     (id) => {
       if (rows.length === 1) return;
       updateRows(rows.filter((r) => r.id !== id));
     },
     [rows, updateRows]
   );
-  const clearRow = React5.useCallback(
+  const clearRow = React4.useCallback(
     (id) => {
       updateRows(
         rows.map((r) => {
@@ -730,10 +733,10 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const clearAllRow = React5.useCallback(() => {
+  const clearAllRow = React4.useCallback(() => {
     updateRows([makeNewRow(fields[0])]);
   }, [fields, updateRows]);
-  const changeField = React5.useCallback(
+  const changeField = React4.useCallback(
     (id, fieldName) => {
       updateRows(
         rows.map((r) => {
@@ -745,7 +748,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const changeOperator = React5.useCallback(
+  const changeOperator = React4.useCallback(
     (id, operator) => {
       updateRows(
         rows.map((r) => {
@@ -776,7 +779,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const changeValue = React5.useCallback(
+  const changeValue = React4.useCallback(
     (id, which, val) => {
       updateRows(
         rows.map((r) => {
@@ -788,7 +791,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const fieldOptions = React5.useMemo(
+  const fieldOptions = React4.useMemo(
     () => fields.map((f) => ({
       value: f.name,
       label: f.label ?? f.name
@@ -976,7 +979,7 @@ var OPERATOR_LABEL = {
   containsAll: "Contains all of"
 };
 var OperatorSelect = ({ row, operators, onChangeOperator, error }) => {
-  React5__namespace.default.useEffect(() => {
+  React4__namespace.default.useEffect(() => {
     if (!operators.length) return;
     if (!operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
@@ -1011,15 +1014,15 @@ function Label2({ className, ...props }) {
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React5__namespace.createContext({});
+var FormFieldContext = React4__namespace.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React5__namespace.useContext(FormFieldContext);
-  const itemContext = React5__namespace.useContext(FormItemContext);
+  const fieldContext = React4__namespace.useContext(FormFieldContext);
+  const itemContext = React4__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1036,18 +1039,17 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React5__namespace.createContext({});
+var FormItemContext = React4__namespace.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React5__namespace.useId();
+  const id = React4__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
-  const { error, formItemId } = useFormField();
+  const { formItemId } = useFormField();
   return /* @__PURE__ */ jsxRuntime.jsx(
     Label2,
     {
       "data-slot": "form-label",
-      "data-error": !!error,
       className: cn("data-[error=true]:text-destructive", className),
       htmlFor: formItemId,
       ...props
@@ -1097,23 +1099,6 @@ function FormMessage({ className, ...props }) {
     }
   );
 }
-var InputPrimitive = React5__namespace.forwardRef(
-  ({ className, type = "text", ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ref,
-        type,
-        className: cn(
-          "placeholder:text-neutral-400 text-neutral-900 flex h-10 w-full min-w-0 items-center rounded-lg border bg-white px-4 text-sm transition-colors outline-none file:inline-flex file:h-7 file:rounded-md file:border-0 file:bg-transparent file:px-2 file:text-sm file:font-medium hover:border-neutral-500 focus-visible:border-neutral-900 focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-neutral-200 aria-invalid:border-destructive",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-InputPrimitive.displayName = "InputPrimitive";
 var spinnerVariants = classVarianceAuthority.cva("relative inline-block aspect-square transform-gpu", {
   variants: {
     variant: {
@@ -1160,6 +1145,23 @@ var Spinner = ({ className, variant, size = "default", ...props }) => /* @__PURE
     ]
   }
 );
+var InputPrimitive = React4__namespace.forwardRef(
+  ({ className, type = "text", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref,
+        type,
+        className: cn(
+          "placeholder:text-neutral-400 text-neutral-900 flex h-10 w-full min-w-0 items-center rounded-lg border bg-white px-4 text-sm transition-colors outline-none file:inline-flex file:h-7 file:rounded-md file:border-0 file:bg-transparent file:px-2 file:text-sm file:font-medium hover:border-neutral-500 focus-visible:border-neutral-900 focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-neutral-200 aria-invalid:border-destructive",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
 var inputVariants = classVarianceAuthority.cva("", {
   variants: {
     controlSize: {
@@ -1182,7 +1184,7 @@ var inputVariants = classVarianceAuthority.cva("", {
     appearance: "filled"
   }
 });
-var Input = React5__namespace.forwardRef(
+var Input = React4__namespace.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -1191,14 +1193,17 @@ var Input = React5__namespace.forwardRef(
     appearance,
     prefix,
     prefixProps,
+    prefixInteractive,
     suffix,
     suffixProps,
+    suffixInteractive,
     invalid,
     loading,
     loadingIcon,
     validationMessage,
     validationIcon,
     validationMessageProps,
+    onValueChange,
     type = "text",
     ...rest
   }, ref) => {
@@ -1208,10 +1213,18 @@ var Input = React5__namespace.forwardRef(
     const {
       "aria-invalid": ariaInvalidProp,
       "aria-describedby": ariaDescribedByProp,
+      onChange: onChangeProp,
       ...inputProps
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React5__namespace.useId();
+    const messageId = React4__namespace.useId();
+    const handleChange = React4__namespace.useCallback(
+      (event) => {
+        onChangeProp?.(event);
+        onValueChange?.(event.target.value);
+      },
+      [onChangeProp, onValueChange]
+    );
     const resolvedAriaInvalid = typeof ariaInvalid === "string" ? ariaInvalid : ariaInvalid ? true : void 0;
     const describedBy = validationMessage ? [ariaDescribedByProp, messageId].filter(Boolean).join(" ") : ariaDescribedByProp;
     const controlWrapperClassName = cn(
@@ -1233,6 +1246,7 @@ var Input = React5__namespace.forwardRef(
         ),
         "aria-invalid": resolvedAriaInvalid,
         "aria-describedby": describedBy || void 0,
+        onChange: handleChange,
         ...inputProps
       }
     );
@@ -1252,7 +1266,8 @@ var Input = React5__namespace.forwardRef(
         {
           ...prefixRest,
           className: cn(
-            "pointer-events-none absolute left-3 inline-flex items-center text-muted-foreground",
+            "absolute left-3 top-1/2 -translate-y-1/2 inline-flex items-center text-muted-foreground",
+            !prefixInteractive && "pointer-events-none",
             prefixClassName
           ),
           children: prefix
@@ -1264,7 +1279,8 @@ var Input = React5__namespace.forwardRef(
         {
           ...suffixRest,
           className: cn(
-            "pointer-events-none absolute right-3 inline-flex items-center gap-2 text-muted-foreground",
+            "absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center gap-2 text-muted-foreground",
+            !suffixInteractive && "pointer-events-none",
             suffixClassName
           ),
           children: suffixContent
@@ -1527,20 +1543,20 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React5__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React5__namespace.useState(
+  const today = React4__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React4__namespace.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React5__namespace.useMemo(() => {
+  const disabledSet = React4__namespace.useMemo(() => {
     const s = /* @__PURE__ */ new Set();
     disabledDates?.forEach((d) => s.add(startOfDay(d).toISOString()));
     return s;
   }, [disabledDates]);
   const displayYear = displayed.getFullYear();
   const displayMonth = displayed.getMonth();
-  const weekdays = React5__namespace.useMemo(() => {
+  const weekdays = React4__namespace.useMemo(() => {
     const labels = [];
     for (let i = 0; i < 7; i++) {
       const idx = i;
@@ -1549,7 +1565,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React5__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React4__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -1559,7 +1575,7 @@ function DatePicker({
   };
   const minYear = minDate?.getFullYear();
   const maxYear = maxDate?.getFullYear();
-  const getMonthLabel = React5__namespace.useCallback(
+  const getMonthLabel = React4__namespace.useCallback(
     (year, monthIndex) => {
       const label = callbacks?.monthLabel?.(year, monthIndex);
       if (label === null || label === void 0) {
@@ -1569,7 +1585,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const getYearLabel = React5__namespace.useCallback(
+  const getYearLabel = React4__namespace.useCallback(
     (year) => {
       const label = callbacks?.yearLabel?.(year);
       if (label === null || label === void 0) return String(year);
@@ -1577,7 +1593,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const clampMonthToBounds = React5__namespace.useCallback(
+  const clampMonthToBounds = React4__namespace.useCallback(
     (year, monthIndex) => {
       let output = monthIndex;
       if (typeof minYear === "number" && year === minYear && minDate) {
@@ -1592,7 +1608,7 @@ function DatePicker({
     },
     [maxDate, minDate, maxYear, minYear]
   );
-  const yearOptions = React5__namespace.useMemo(() => {
+  const yearOptions = React4__namespace.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : displayYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : displayYear + fallbackWindow;
@@ -1613,7 +1629,7 @@ function DatePicker({
     }
     return years;
   }, [displayYear, maxYear, minYear, selectedDate]);
-  const monthOptions = React5__namespace.useMemo(() => {
+  const monthOptions = React4__namespace.useMemo(() => {
     const months = Array.from({ length: 12 }, (_, monthIndex) => {
       const disabled = typeof minYear === "number" && displayYear === minYear && minDate && monthIndex < minDate.getMonth() || typeof maxYear === "number" && displayYear === maxYear && maxDate && monthIndex > maxDate.getMonth();
       return {
@@ -1632,7 +1648,7 @@ function DatePicker({
     }
     return months.sort((a, b) => a.value - b.value).filter((option, index, arr) => index === 0 || option.value !== arr[index - 1].value);
   }, [displayMonth, displayYear, getMonthLabel, maxDate, maxYear, minDate, minYear]);
-  const handleMonthSelect = React5__namespace.useCallback((nextValue) => {
+  const handleMonthSelect = React4__namespace.useCallback((nextValue) => {
     const nextMonth = Number.parseInt(nextValue, 10);
     if (Number.isNaN(nextMonth)) return;
     setDisplayed((prev) => {
@@ -1642,7 +1658,7 @@ function DatePicker({
       return next;
     });
   }, []);
-  const handleYearSelect = React5__namespace.useCallback(
+  const handleYearSelect = React4__namespace.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -1790,14 +1806,14 @@ var DatePicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React5__namespace.default.useState(false);
-  const parser = React5__namespace.default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
-  const outputFormatter = React5__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
-  const labelFormatter = React5__namespace.default.useMemo(
+  const [open, setOpen] = React4__namespace.default.useState(false);
+  const parser = React4__namespace.default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
+  const outputFormatter = React4__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
+  const labelFormatter = React4__namespace.default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter,
     [displayFormatter]
   );
-  const parsedValue = React5__namespace.default.useMemo(() => {
+  const parsedValue = React4__namespace.default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return value;
     const parsed = parser(value);
@@ -1806,26 +1822,26 @@ var DatePicker2 = ({
   const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder3;
   const buttonAriaLabel = ariaLabel ?? (parsedValue ? `Change date, current selection ${labelFormatter(parsedValue)}` : "Open date picker");
   const shouldShowClear = allowClear && !disabled && !!parsedValue;
-  const handleClose = React5__namespace.default.useCallback(() => setOpen(false), []);
-  const emitChange = React5__namespace.default.useCallback(
+  const handleClose = React4__namespace.default.useCallback(() => setOpen(false), []);
+  const emitChange = React4__namespace.default.useCallback(
     (next) => {
       onChange?.(next);
       onValueChange?.(next ? outputFormatter(next) : void 0);
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React5__namespace.default.useCallback(
+  const handleSelect = React4__namespace.default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React5__namespace.default.useCallback(() => {
+  const handleClear = React4__namespace.default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React5__namespace.default.useCallback(
+  const handleOpenChange = React4__namespace.default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -1997,15 +2013,15 @@ function MonthCal({
   onYearBackward,
   onYearForward
 }) {
-  const today = React5__namespace.useMemo(() => {
+  const today = React4__namespace.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     now.setDate(1);
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const selectedMonthDate = React5__namespace.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
-  const min = React5__namespace.useMemo(() => normalizeMonth(minDate), [minDate]);
-  const max = React5__namespace.useMemo(() => normalizeMonth(maxDate), [maxDate]);
+  const selectedMonthDate = React4__namespace.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
+  const min = React4__namespace.useMemo(() => normalizeMonth(minDate), [minDate]);
+  const max = React4__namespace.useMemo(() => normalizeMonth(maxDate), [maxDate]);
   let effectiveMin = min;
   if (min && max && min > max) {
     effectiveMin = max;
@@ -2014,10 +2030,10 @@ function MonthCal({
   const minMonth = effectiveMin?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
-  const [menuYear, setMenuYear] = React5__namespace.useState(
+  const [menuYear, setMenuYear] = React4__namespace.useState(
     () => selectedMonthDate?.getFullYear() ?? today.getFullYear()
   );
-  React5__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     if (selectedMonthDate) {
       const year = selectedMonthDate.getFullYear();
       if (year !== menuYear) {
@@ -2025,7 +2041,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React5__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -2036,7 +2052,7 @@ function MonthCal({
   }, [minYear, maxYear, menuYear]);
   const disablePrevYear = typeof minYear === "number" ? menuYear <= minYear : false;
   const disableNextYear = typeof maxYear === "number" ? menuYear >= maxYear : false;
-  const yearOptions = React5__namespace.useMemo(() => {
+  const yearOptions = React4__namespace.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : menuYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : menuYear + fallbackWindow;
@@ -2050,7 +2066,7 @@ function MonthCal({
     }
     return years;
   }, [maxYear, menuYear, minYear]);
-  const formatYearLabel = React5__namespace.useCallback(
+  const formatYearLabel = React4__namespace.useCallback(
     (year) => {
       const raw = callbacks?.yearLabel?.(year);
       if (raw === null || raw === void 0) return String(year);
@@ -2058,7 +2074,7 @@ function MonthCal({
     },
     [callbacks]
   );
-  const handleYearSelect = React5__namespace.useCallback(
+  const handleYearSelect = React4__namespace.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -2068,7 +2084,7 @@ function MonthCal({
     },
     [maxYear, minYear]
   );
-  const disabledPairs = React5__namespace.useMemo(() => {
+  const disabledPairs = React4__namespace.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -2213,14 +2229,14 @@ var MonthPicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React5__namespace.default.useState(false);
-  const parser = React5__namespace.default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
-  const outputFormatter = React5__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
-  const labelFormatter = React5__namespace.default.useMemo(
+  const [open, setOpen] = React4__namespace.default.useState(false);
+  const parser = React4__namespace.default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
+  const outputFormatter = React4__namespace.default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
+  const labelFormatter = React4__namespace.default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter2,
     [displayFormatter]
   );
-  const parsedValue = React5__namespace.default.useMemo(() => {
+  const parsedValue = React4__namespace.default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return normalizeMonth2(value);
     if (typeof value === "string") {
@@ -2232,8 +2248,8 @@ var MonthPicker2 = ({
   const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder3;
   const buttonAriaLabel = ariaLabel ?? (parsedValue ? `Change month, current selection ${labelFormatter(parsedValue)}` : "Open month picker");
   const shouldShowClear = allowClear && !disabled && !!parsedValue;
-  const handleClose = React5__namespace.default.useCallback(() => setOpen(false), []);
-  const emitChange = React5__namespace.default.useCallback(
+  const handleClose = React4__namespace.default.useCallback(() => setOpen(false), []);
+  const emitChange = React4__namespace.default.useCallback(
     (next) => {
       const normalized = next ? normalizeMonth2(next) : void 0;
       onChange?.(normalized);
@@ -2241,18 +2257,18 @@ var MonthPicker2 = ({
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React5__namespace.default.useCallback(
+  const handleSelect = React4__namespace.default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React5__namespace.default.useCallback(() => {
+  const handleClear = React4__namespace.default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React5__namespace.default.useCallback(
+  const handleOpenChange = React4__namespace.default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -2458,21 +2474,21 @@ var LookupSelect = ({
   loadingMessage = "Loading...",
   dropdownPortalId
 }) => {
-  const [inputValue, setInputValue] = React5.useState("");
-  const [suggestions, setSuggestions] = React5.useState([]);
-  const [optionLabels, setOptionLabels] = React5.useState({});
-  const [loading, setLoading] = React5.useState(false);
-  const [fetchError, setFetchError] = React5.useState(null);
-  const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
-  const containerRef = React5.useRef(null);
-  const fetchDelayRef = React5.useRef(null);
-  const requestIdRef = React5.useRef(0);
-  const [dropdownStyles, setDropdownStyles] = React5.useState();
-  const dropdownContentRef = React5.useRef(null);
-  const assignDropdownContentRef = React5.useCallback((node) => {
+  const [inputValue, setInputValue] = React4.useState("");
+  const [suggestions, setSuggestions] = React4.useState([]);
+  const [optionLabels, setOptionLabels] = React4.useState({});
+  const [loading, setLoading] = React4.useState(false);
+  const [fetchError, setFetchError] = React4.useState(null);
+  const [isDropdownOpen, setIsDropdownOpen] = React4.useState(false);
+  const containerRef = React4.useRef(null);
+  const fetchDelayRef = React4.useRef(null);
+  const requestIdRef = React4.useRef(0);
+  const [dropdownStyles, setDropdownStyles] = React4.useState();
+  const dropdownContentRef = React4.useRef(null);
+  const assignDropdownContentRef = React4.useCallback((node) => {
     dropdownContentRef.current = node;
   }, []);
-  const dropdownPortalElement = React5.useMemo(() => {
+  const dropdownPortalElement = React4.useMemo(() => {
     if (typeof document === "undefined") return null;
     if (dropdownPortalId) {
       const element = document.getElementById(dropdownPortalId);
@@ -2481,7 +2497,7 @@ var LookupSelect = ({
     return document.body;
   }, [dropdownPortalId]);
   const limitReached = value.length >= maxTags;
-  const upsertOptionLabels = React5.useCallback((options) => {
+  const upsertOptionLabels = React4.useCallback((options) => {
     setOptionLabels((prev) => {
       let next = null;
       options.forEach((opt) => {
@@ -2494,7 +2510,7 @@ var LookupSelect = ({
       return next ?? prev;
     });
   }, []);
-  const addTag = React5.useCallback(
+  const addTag = React4.useCallback(
     (val) => {
       const trimmed = val.trim();
       if (!trimmed) return;
@@ -2507,7 +2523,7 @@ var LookupSelect = ({
     },
     [value, onChange, maxTags]
   );
-  const removeTag = React5.useCallback(
+  const removeTag = React4.useCallback(
     (index) => {
       if (index < 0) return;
       const newTags = value.filter((_, i) => i !== index);
@@ -2515,7 +2531,7 @@ var LookupSelect = ({
     },
     [value, onChange]
   );
-  const handleKeyDown = React5.useCallback(
+  const handleKeyDown = React4.useCallback(
     (e) => {
       if (e.key === "Enter" || e.key === ",") {
         e.preventDefault();
@@ -2526,21 +2542,21 @@ var LookupSelect = ({
     },
     [inputValue, removeTag, value.length]
   );
-  const handleClear = React5.useCallback(() => {
+  const handleClear = React4.useCallback(() => {
     setInputValue("");
     setSuggestions([]);
     setIsDropdownOpen(false);
     setFetchError(null);
     if (onClear) onClear();
   }, [onClear]);
-  const handleSuggestionSelect = React5.useCallback(
+  const handleSuggestionSelect = React4.useCallback(
     (option) => {
       upsertOptionLabels([option]);
       addTag(option.value);
     },
     [addTag, upsertOptionLabels]
   );
-  const updateDropdownPosition = React5.useCallback(() => {
+  const updateDropdownPosition = React4.useCallback(() => {
     if (!dropdownPortalElement || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     setDropdownStyles({
@@ -2551,7 +2567,7 @@ var LookupSelect = ({
       zIndex: 50
     });
   }, [dropdownPortalElement]);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (!fetchSuggestions) return;
     if (fetchDelayRef.current) {
       clearTimeout(fetchDelayRef.current);
@@ -2591,7 +2607,7 @@ var LookupSelect = ({
       }
     };
   }, [inputValue, fetchSuggestions, suggestionDebounce, upsertOptionLabels]);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     const handleDocumentClick = (event) => {
       const target = event.target;
       if (containerRef.current?.contains(target)) return;
@@ -2603,11 +2619,11 @@ var LookupSelect = ({
       document.removeEventListener("mousedown", handleDocumentClick);
     };
   }, []);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (!limitReached) return;
     setIsDropdownOpen(false);
   }, [limitReached]);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (!dropdownPortalElement) return;
     if (!isDropdownOpen) return;
     updateDropdownPosition();
@@ -3292,7 +3308,7 @@ var AdvanceSearch = ({
   onSearch,
   onClear
 }) => {
-  const fieldsData = React5.useMemo(() => {
+  const fieldsData = React4.useMemo(() => {
     if (fields.length === 0) throw new Error("fields cannot be an empty array");
     return fields || [];
   }, [fields]);
@@ -3312,8 +3328,8 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
-  const [operatorErrors, setOperatorErrors] = React5__namespace.default.useState({});
-  const clearOperatorError = React5.useCallback(
+  const [operatorErrors, setOperatorErrors] = React4__namespace.default.useState({});
+  const clearOperatorError = React4.useCallback(
     (rowId) => {
       setOperatorErrors((prev) => {
         if (!(rowId in prev)) return prev;
@@ -3323,7 +3339,7 @@ var AdvanceSearch = ({
     },
     [setOperatorErrors]
   );
-  const clearValue = React5.useCallback(
+  const clearValue = React4.useCallback(
     (rowId, which) => {
       const fieldName = `${which}_${rowId}`;
       resetField(fieldName, { defaultValue: void 0 });
@@ -3333,13 +3349,13 @@ var AdvanceSearch = ({
     },
     [resetField, clearErrors]
   );
-  const parseRangeValue = React5.useCallback((raw, fieldType) => {
+  const parseRangeValue = React4.useCallback((raw, fieldType) => {
     if (!raw) return void 0;
     const normalized = fieldType === "datemonth" ? `${raw}-01` : raw;
     const parsed = dateFns.parseISO(normalized);
     return dateFns.isValid(parsed) ? parsed : void 0;
   }, []);
-  const onSubmit = React5.useCallback(() => {
+  const onSubmit = React4.useCallback(() => {
     const operatorValidation = {};
     rows.forEach((r) => {
       const availableOperators = operatorsForField(r.fieldName);
@@ -3557,11 +3573,11 @@ function selectValueToBoolean(value) {
   return void 0;
 }
 var useHover = () => {
-  const [hovering, setHovering] = React5.useState(false);
-  const prevRef = React5.useRef(null);
-  const onMouseEnter = React5.useCallback(() => setHovering(true), []);
-  const onMouseLeave = React5.useCallback(() => setHovering(false), []);
-  const nodeRefCallback = React5.useCallback(
+  const [hovering, setHovering] = React4.useState(false);
+  const prevRef = React4.useRef(null);
+  const onMouseEnter = React4.useCallback(() => setHovering(true), []);
+  const onMouseLeave = React4.useCallback(() => setHovering(false), []);
+  const nodeRefCallback = React4.useCallback(
     (node) => {
       if (prevRef.current) {
         prevRef.current.removeEventListener("mouseenter", onMouseEnter);
@@ -3589,15 +3605,15 @@ var useIntersectionObserver = ({
   initialIsIntersecting = false,
   onChange
 } = {}) => {
-  const [ref, setRef] = React5.useState(null);
-  const [state, setState] = React5.useState(() => ({
+  const [ref, setRef] = React4.useState(null);
+  const [state, setState] = React4.useState(() => ({
     isIntersecting: initialIsIntersecting,
     entry: void 0
   }));
-  const callbackRef = React5.useRef(null);
+  const callbackRef = React4.useRef(null);
   callbackRef.current = onChange;
   const frozen = state.entry?.isIntersecting && freezeOnceVisible;
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (!ref) return;
     if (!("IntersectionObserver" in window)) return;
     if (frozen) return;
@@ -3627,8 +3643,8 @@ var useIntersectionObserver = ({
     frozen,
     freezeOnceVisible
   ]);
-  const prevRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const prevRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
       prevRef.current = state.entry.target;
       setState({ isIntersecting: initialIsIntersecting, entry: void 0 });
@@ -3645,8 +3661,8 @@ var isValidMediaQueryString = (query) => {
   return query !== "not all";
 };
 var useMediaQuery = ({ query }) => {
-  const [matches, setMatches] = React5.useState(false);
-  React5.useEffect(() => {
+  const [matches, setMatches] = React4.useState(false);
+  React4.useEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -3682,8 +3698,8 @@ var useTruncated = ({
   onChange,
   resizeDetectDelay = 150
 }) => {
-  const [isTruncated, setIsTruncated] = React5.useState(false);
-  React5.useEffect(() => {
+  const [isTruncated, setIsTruncated] = React4.useState(false);
+  React4.useEffect(() => {
     const element = elementRef.current;
     if (!element) return;
     const checkTruncate = debounce(() => {
@@ -3903,7 +3919,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
     }
   );
 };
-var ColumnSeparator_default = React5__namespace.default.memo(ColumnSeparator);
+var ColumnSeparator_default = React4__namespace.default.memo(ColumnSeparator);
 var StatusContentSlot = ({
   content,
   icon,
@@ -3922,7 +3938,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React5__namespace.default.memo(StatusContentSlot);
+var StatusContentSlot_default = React4__namespace.default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -3975,9 +3991,9 @@ var modelOptions = [
   "getCenterVisibleLeafColumns"
 ];
 var DataTableDevTool = ({ table }) => {
-  const [open, setOpen] = React5.useState(false);
-  const [visibleStates, setVisibleStates] = React5.useState([]);
-  const [visibleModels, setVisibleModels] = React5.useState([]);
+  const [open, setOpen] = React4.useState(false);
+  const [visibleStates, setVisibleStates] = React4.useState([]);
+  const [visibleModels, setVisibleModels] = React4.useState([]);
   const tableState = table.getState();
   const toggleValue = (arr, value) => arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value];
   const getCircularReplacer = () => {
@@ -4237,14 +4253,14 @@ var DataTable = ({
   if (isDefined(tableRef) && !isDefined(tableRef?.current)) {
     tableRef.current = table;
   }
-  const tableContainerRef = React5.useRef(null);
+  const tableContainerRef = React4.useRef(null);
   const isTableEmpty = table.getCoreRowModel().rows.length === 0;
   const isTableEmptyAfterFiltering = table.getRowModel().rows.length === 0;
   const isFiltering = table.getState().columnFilters.length > 0 || !!table.getState().globalFilter;
   const leftVisibleLeftColumns = table.getLeftVisibleLeafColumns();
   const centerVisibleLeafColumns = table.getCenterVisibleLeafColumns();
   const rightVisibleLeafColumns = table.getRightVisibleLeafColumns();
-  const { isSomeColumnsFilterable, filterableColumns } = React5.useMemo(() => {
+  const { isSomeColumnsFilterable, filterableColumns } = React4.useMemo(() => {
     const mergedColumns = [
       ...leftVisibleLeftColumns,
       ...centerVisibleLeafColumns,
@@ -4255,7 +4271,7 @@ var DataTable = ({
     );
     return { isSomeColumnsFilterable: isSomeColumnsFilterable2, filterableColumns: mergedColumns };
   }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
-  const autoStatusKey = React5.useMemo(() => {
+  const autoStatusKey = React4.useMemo(() => {
     if (isInitialLoading) return "initialLoading";
     if (isTableEmpty) return "emptyData";
     if (isTableEmptyAfterFiltering) return "emptyFilteredData";
@@ -4273,14 +4289,14 @@ var DataTable = ({
     scrollFetch?.hasMore,
     scrollFetch?.isFetchingMore
   ]);
-  const activeStatusContentComputed = React5.useMemo(() => {
+  const activeStatusContentComputed = React4.useMemo(() => {
     if (!activeStatusContent) return autoStatusKey;
     if (typeof activeStatusContent === "function") {
       return activeStatusContent({ defaultComputedValue: autoStatusKey });
     }
     return activeStatusContent;
   }, [activeStatusContent, autoStatusKey]);
-  const fetchMoreOnScrollReached = React5.useCallback(
+  const fetchMoreOnScrollReached = React4.useCallback(
     (containerRefElement) => {
       if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
         return;
@@ -4314,7 +4330,7 @@ var DataTable = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollFetch?.enabled, scrollFetch?.isFetchingMore, scrollFetch?.hasMore, scrollFetch?.fetchMore]
   );
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     fetchMoreOnScrollReached(tableContainerRef.current);
   }, [fetchMoreOnScrollReached]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4444,7 +4460,7 @@ var DataTable = ({
             ),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { ...components?.tableBodyProps, children: table.getRowModel().rows.map((row) => {
               const tableDataRowProps = typeof components?.tableDataRowProps === "function" ? components.tableDataRowProps({ row, table }) || {} : components?.tableDataRowProps || {};
-              return /* @__PURE__ */ React5.createElement(
+              return /* @__PURE__ */ React4.createElement(
                 TableRow,
                 {
                   "data-testid": `table-data-row-${row.id}`,
@@ -4747,9 +4763,11 @@ var buttonVariants2 = classVarianceAuthority.cva(
       variant: {
         default: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground  dark:border-input dark:hover:bg-input/50",
         success: "bg-sus-primary-1 text-primary-foreground shadow-xs hover:bg-sus-primary/90",
-        error: "border border-[#BB0B0E] bg-[#BB0B0E] shadow-xs hover:bg-accent hover:text-accent-foreground text-white",
+        error: "border border-[#BB0B0E] text-[#BB0B0E] bg-white shadow-xs hover:bg-accent hover:text-accent-foreground",
         warning: "bg-yellow-500 text-black shadow-xs hover:bg-yellow-600 dark:hover:bg-yellow-400",
-        cancel: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:hover:bg-input/50"
+        cancel: "border bg-[#8B8B8B] text-white shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:hover:bg-input/50",
+        confirm: "border border-[#BB0B0E] text-[#BB0B0E] bg-white shadow-xs hover:bg-accent hover:text-accent-foreground",
+        "confirm-green": "border border-[#379A2A] text-[#379A2A] bg-white shadow-xs hover:bg-accent hover:text-accent-foreground"
       },
       size: {
         default: "h-9 px-4 has-[>svg]:px-3",
@@ -4791,6 +4809,154 @@ function Button2({
     }
   );
 }
+
+// src/components/dialog-alert/lib/constants.ts
+var DIALOG_ALERT_I18N_NAMESPACE = "dialog_alert";
+
+// src/components/dialog-alert/locale/default.ts
+var defaultResource = {
+  sharedui: {
+    [DIALOG_ALERT_I18N_NAMESPACE]: {
+      cancel: "Cancel",
+      close: "Close",
+      "success.saved": {
+        title: "Successfully",
+        description: "Data has been successfully saved"
+      },
+      "success.deleted": {
+        title: "Successfully",
+        description: "Data has been successfully deleted"
+      },
+      "success.removed": {
+        title: "Successfully",
+        description: "Data has been successfully removed"
+      },
+      "error.api_db_error": {
+        title: "API/Database Error",
+        description: "Failed to connect to the system. Please check API or database connection."
+      },
+      "error.permission_denied": {
+        title: "Permission Denied",
+        description: "You do not have permission to delete this data.",
+        confirm_text: "Discard"
+      },
+      "error.session_expired": {
+        title: "Session Expired",
+        description: "Your session has expired or you have been logged out. Please sign in again.",
+        confirm_text: "Logout"
+      },
+      "error.user_not_found": {
+        title: "User Not Found",
+        description: "The system could not locate the user account.",
+        confirm_text: "Logout"
+      },
+      "error.data_not_found": {
+        title: "Data Not Found",
+        description: "The data has already been deleted or does not exist in the system."
+      },
+      "error.data_restrict_editing": {
+        title: "Data Status Restricts Editing",
+        description: "Data status does not allow editing."
+      },
+      "error.network_timeout_error": {
+        title: "Network Error / Timeout",
+        description: "The system could not connect to the network or the request took too long to process."
+      },
+      "error.queue_full": {
+        title: "Queue Full",
+        description: "The notification queue has reached its limit. Please try again later."
+      },
+      "error.invalid_data_format": {
+        title: "Invalid Data Format",
+        description: "Data creation failed due to invalid or incorrectly formatted data."
+      },
+      "error.data_linked_to_system_data": {
+        title: "Data Linked to System Data",
+        description: "Cannot delete data because they are linked to existing system data."
+      },
+      "error.pending_workflow_conflict": {
+        title: "Pending Workflow Conflict ",
+        description: "The data is currently involved in a pending workflow or approval process and cannot be deactivated."
+      },
+      "error.invalid_incomplete_data": {
+        title: "Invalid or Incomplete Data",
+        description: "Data status cannot be changed due to incomplete or invalid information."
+      },
+      "error.client_side_error": {
+        title: "Client-Side Error",
+        description: "An error occurred on the client side. Please refresh the page or try again."
+      },
+      "error.system_limitation": {
+        title: "System Limitation",
+        description: "The search cannot be completed due to system limitations. Please simplify your query."
+      },
+      "error.timeout": {
+        title: "Timeout",
+        description: "Request failed due to a system error or timeout. Please try again."
+      },
+      "error.duplicate_data": {
+        title: "Duplicate Data",
+        description: "The data you entered already exists in the system."
+      },
+      "error.something_went_wrong": {
+        title: "Something Went Wrong",
+        description: "An unknown error occurred."
+      },
+      "confirm.delete": {
+        title: "Confirmation",
+        description: "Are you sure you want to delete this item?",
+        confirm_text: "Delete"
+      },
+      "confirm.inactive": {
+        title: "Confirmation",
+        description: "Are you sure you want to inactive this item?",
+        confirm_text: "Inactive"
+      },
+      "confirm.active": {
+        variant: "confirm-green",
+        title: "Confirmation",
+        description: "Are you sure you want to active this item?",
+        confirm_text: "Active"
+      },
+      "confirm.leave_page": {
+        title: "Confirmation",
+        description: "Unsaved changes. Do you want to leave this page?",
+        confirm_text: "Leave"
+      },
+      "confirm.remove": {
+        title: "Confirmation",
+        description: "Are you sure you want to remove this item?",
+        confirm_text: "Remove"
+      },
+      "confirm.logout": {
+        title: "Confirmation",
+        description: "Do you want to log out?",
+        confirm_text: "Logout"
+      }
+    }
+  }
+};
+
+// src/components/dialog-alert/locale/i18n.ts
+i18n__default.default.use(reactI18next.initReactI18next).init({
+  resources: defaultResource,
+  lng: "sharedui",
+  fallbackLng: "sharedui",
+  defaultNS: DIALOG_ALERT_I18N_NAMESPACE,
+  interpolation: {
+    escapeValue: false
+    // react already safes from xss
+  }
+});
+var i18n_default = i18n__default.default;
+var titleColorVariant = {
+  default: "",
+  success: "text-green-600",
+  error: "text-red-600",
+  warning: "text-yellow-600",
+  confirm: "text-red-600",
+  "confirm-green": "text-red-600"
+};
 function DialogAlert({
   open,
   onOpenChange,
@@ -4798,7 +4964,7 @@ function DialogAlert({
   description,
   variant = "default",
   confirmText,
-  cancelText = "Cancel",
+  cancelText = "cancel",
   onConfirm,
   onCancel,
   showCancel = true,
@@ -4807,38 +4973,272 @@ function DialogAlert({
   persistent = false
 }) {
   const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center";
-  const handleCancel = React5.useCallback(() => {
+  const { t } = reactI18next.useTranslation(DIALOG_ALERT_I18N_NAMESPACE);
+  const handleCancel = React4.useCallback(() => {
     onCancel?.();
     onOpenChange(false);
   }, [onCancel, onOpenChange]);
-  const handleConfirm = React5.useCallback(() => {
+  const handleConfirm = React4.useCallback(() => {
     onConfirm?.();
   }, [onConfirm]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog2, { open, onOpenChange: persistent ? () => {
   } : onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader2, { children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx(DialogTitle2, { className: variantClass(variant), children: title }),
-      description && /* @__PURE__ */ jsxRuntime.jsx(DialogDescription2, { children: description })
+      title && /* @__PURE__ */ jsxRuntime.jsx(DialogTitle2, { className: titleColorVariant[variant], children: t(title) }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(DialogDescription2, { children: t(description) })
     ] }),
     outlet && outlet,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex gap-3 mt-3 ${alignClass}`, children: [
-      showCancel && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "cancel", onClick: handleCancel, children: cancelText }),
-      confirmText && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant, onClick: handleConfirm, children: confirmText })
+      showCancel && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "cancel", onClick: handleCancel, children: t(cancelText) }),
+      confirmText && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant, onClick: handleConfirm, children: t(confirmText) })
     ] })
   ] }) });
 }
-function variantClass(variant) {
-  switch (variant) {
-    case "success":
-      return "text-green-600";
-    case "error":
-      return "text-red-600";
-    case "warning":
-      return "text-yellow-600";
-    default:
-      return "";
+
+// src/components/dialog-alert/templates/index.ts
+var getDialogTemplates = ({ setOpen = () => {
+} }) => ({
+  "success.saved": {
+    variant: "success",
+    title: "success.saved.title",
+    description: "success.saved.description",
+    cancelText: "close"
+  },
+  "success.deleted": {
+    variant: "success",
+    title: "success.deleted.title",
+    description: "success.deleted.description",
+    cancelText: "close"
+  },
+  "success.removed": {
+    variant: "success",
+    title: "success.removed.title",
+    description: "success.removed.description",
+    cancelText: "close"
+  },
+  "error.api_db_error": {
+    variant: "error",
+    title: "error.api_db_error.title",
+    description: "error.api_db_error.description",
+    cancelText: "close"
+  },
+  "error.permission_denied": {
+    variant: "error",
+    title: "error.permission_denied.title",
+    description: "error.permission_denied.description",
+    confirmText: "error.permission_denied.confirm_text",
+    showCancel: false,
+    onConfirm: () => setOpen(false)
+  },
+  "error.session_expired": {
+    variant: "error",
+    title: "error.session_expired.title",
+    description: "error.session_expired.description",
+    confirmText: "error.session_expired.confirm_text",
+    showCancel: false
+  },
+  "error.user_not_found": {
+    variant: "error",
+    title: "error.user_not_found.title",
+    description: "error.user_not_found.description",
+    confirmText: "error.user_not_found.confirm_text",
+    showCancel: false
+  },
+  "error.data_not_found": {
+    variant: "error",
+    title: "error.data_not_found.title",
+    description: "error.data_not_found.description",
+    cancelText: "close"
+  },
+  "error.data_restrict_editing": {
+    variant: "error",
+    title: "error.data_restrict_editing.title",
+    description: "error.data_restrict_editing.description",
+    cancelText: "close"
+  },
+  "error.network_timeout_error": {
+    variant: "error",
+    title: "error.network_timeout_error.title",
+    description: "error.network_timeout_error.description",
+    cancelText: "close"
+  },
+  "error.queue_full": {
+    variant: "error",
+    title: "error.queue_full.title",
+    description: "error.queue_full.description",
+    cancelText: "close"
+  },
+  "error.invalid_data_format": {
+    variant: "error",
+    title: "error.invalid_data_format.title",
+    description: "error.invalid_data_format.description",
+    cancelText: "close"
+  },
+  "error.data_linked_to_system_data": {
+    variant: "error",
+    title: "error.data_linked_to_system_data.title",
+    description: "error.data_linked_to_system_data.description",
+    cancelText: "close"
+  },
+  "error.pending_workflow_conflict": {
+    variant: "error",
+    title: "error.pending_workflow_conflict.title",
+    description: "error.pending_workflow_conflict.description",
+    cancelText: "close"
+  },
+  "error.invalid_incomplete_data": {
+    variant: "error",
+    title: "error.invalid_incomplete_data.title",
+    description: "error.invalid_incomplete_data.description",
+    cancelText: "close"
+  },
+  "error.client_side_error": {
+    variant: "error",
+    title: "error.client_side_error.title",
+    description: "error.client_side_error.description",
+    cancelText: "close"
+  },
+  "error.system_limitation": {
+    variant: "error",
+    title: "error.system_limitation.title",
+    description: "error.system_limitation.description",
+    cancelText: "close"
+  },
+  "error.timeout": {
+    variant: "error",
+    title: "error.timeout.title",
+    description: "error.timeout.description",
+    cancelText: "close"
+  },
+  "error.duplicate_data": {
+    variant: "error",
+    title: "error.duplicate_data.title",
+    description: "error.duplicate_data.description",
+    cancelText: "close"
+  },
+  "error.something_went_wrong": {
+    variant: "error",
+    title: "error.something_went_wrong.title",
+    description: "error.something_went_wrong.description",
+    cancelText: "close"
+  },
+  "confirm.delete": {
+    variant: "confirm",
+    title: "confirm.delete.title",
+    description: "confirm.delete.description",
+    confirmText: "confirm.delete.confirm_text"
+  },
+  "confirm.inactive": {
+    variant: "confirm",
+    title: "confirm.inactive.title",
+    description: "confirm.inactive.description",
+    confirmText: "confirm.inactive.confirm_text"
+  },
+  "confirm.active": {
+    variant: "confirm-green",
+    title: "confirm.active.title",
+    description: "confirm.active.description",
+    confirmText: "confirm.active.confirm_text"
+  },
+  "confirm.leave_page": {
+    variant: "confirm",
+    title: "confirm.leave_page.title",
+    description: "confirm.leave_page.description",
+    confirmText: "confirm.leave_page.confirm_text"
+  },
+  "confirm.remove": {
+    variant: "confirm",
+    title: "confirm.remove.title",
+    description: "confirm.remove.description",
+    confirmText: "confirm.remove.confirm_text"
+  },
+  "confirm.logout": {
+    variant: "confirm",
+    title: "confirm.logout.title",
+    description: "confirm.logout.description",
+    confirmText: "confirm.logout.confirm_text"
   }
-}
+});
+var useDialogAlertStore = zustand.create((set, get) => ({
+  open: false,
+  dialogProps: {},
+  setOpen: (data) => set({ open: data }),
+  setDialogProps: (data) => set({ dialogProps: data }),
+  openDialogAlert: (payload) => {
+    let templateVal;
+    if (payload?.template) {
+      templateVal = getDialogTemplates({ setOpen: get().setOpen })[payload.template];
+    }
+    get().setDialogProps({ ...templateVal, ...payload?.props });
+    get().setOpen(true);
+  },
+  closeDialogAlert: () => {
+    set({ open: false });
+  }
+}));
+var DialogAlertProvider = ({ children, i18nResource, i18nLang }) => {
+  const open = useDialogAlertStore((state) => state.open);
+  const setOpen = useDialogAlertStore((state) => state.setOpen);
+  const dialogProps = useDialogAlertStore((state) => state.dialogProps);
+  React4.useEffect(() => {
+    if (!i18nResource) {
+      i18n_default.changeLanguage("sharedui");
+      return;
+    }
+    const langs = Object.keys(i18nResource);
+    for (const lang of langs) {
+      i18n_default.addResourceBundle(
+        lang,
+        DIALOG_ALERT_I18N_NAMESPACE,
+        i18nResource[lang][DIALOG_ALERT_I18N_NAMESPACE],
+        false,
+        true
+      );
+    }
+    i18n_default.changeLanguage(i18nLang);
+  }, [i18nLang, i18nResource]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(DialogAlert, { open, onOpenChange: setOpen, ...dialogProps })
+  ] });
+};
+var openDialogAlert = useDialogAlertStore.getState().openDialogAlert;
+var closeDialogAlert = useDialogAlertStore.getState().closeDialogAlert;
+var openErrorDialogAlert = (error) => {
+  if (error instanceof Error) {
+    openDialogAlert({ template: "error.something_went_wrong", props: { description: error.message } });
+  } else if (error.isAxiosError) {
+    let template = "error.something_went_wrong";
+    switch (error.response?.status) {
+      case 400:
+        template = "error.invalid_incomplete_data";
+        break;
+      case 401:
+        template = "error.session_expired";
+        break;
+      case 403:
+        template = "error.permission_denied";
+        break;
+      case 404:
+        template = "error.data_not_found";
+        break;
+      case 409:
+        template = "error.duplicate_data";
+        break;
+      case 500:
+        template = "error.api_db_error";
+        break;
+    }
+    openDialogAlert({ template });
+  } else {
+    openDialogAlert({ template: "error.something_went_wrong" });
+  }
+};
+var getDialogAlertControls = () => ({
+  openDialogAlert,
+  closeDialogAlert,
+  openErrorDialogAlert
+});
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -4897,7 +5297,7 @@ function SortableRow({
     id: value,
     disabled: name === "columns.0.id"
   });
-  const style = React5__namespace.useMemo(
+  const style = React4__namespace.useMemo(
     () => ({
       transform: utilities.CSS.Transform.toString(transform),
       transition
@@ -5009,8 +5409,8 @@ var GridSettingsModal = ({
   onClose,
   onSaveColumns
 }) => {
-  const [isDragging, setIsDragging] = React5.useState(false);
-  const scrollRef = React5.useRef(null);
+  const [isDragging, setIsDragging] = React4.useState(false);
+  const scrollRef = React4.useRef(null);
   const form = reactHookForm.useForm({
     resolver: zod$1.zodResolver(GridSettingsSchema),
     defaultValues: { columns: currentColumns },
@@ -5022,7 +5422,7 @@ var GridSettingsModal = ({
     name: "columns",
     keyName: "fieldId"
   });
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (isOpen) {
       form.reset({ columns: currentColumns });
     }
@@ -5239,7 +5639,7 @@ var useGridSettingsStore = zustand.create(
 );
 var useGridSettingsStore_default = useGridSettingsStore;
 var ListTable = ({ onTableReady, children }) => {
-  React5__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     if (onTableReady) {
       onTableReady({ ready: true });
     }
@@ -5343,26 +5743,48 @@ var InfoIcon = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
-      width: "24",
-      height: "26",
-      viewBox: "0 0 14 13",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6.98438", cy: "6.63281", r: "6.25", fill: "white" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "path",
           {
-            d: "M5.98811 3.39501C5.98811 4.01786 6.44715 4.40642 6.99953 4.40642C7.5519 4.40642 7.98047 4.04833 7.98047 3.39501C7.98047 2.74168 7.5519 2.41406 6.99953 2.41406C6.44715 2.41406 5.98811 2.76073 5.98811 3.39501ZM6.13096 10.8521H7.86809V5.02928H6.13096V10.8521Z",
-            fill: "#231F20"
+            d: "M10.0013 18.3327C14.6037 18.3327 18.3346 14.6017 18.3346 9.99935C18.3346 5.39698 14.6037 1.66602 10.0013 1.66602C5.39893 1.66602 1.66797 5.39698 1.66797 9.99935C1.66797 14.6017 5.39893 18.3327 10.0013 18.3327Z",
+            stroke: "white",
+            "stroke-width": "1.5",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M10 13.3333V10",
+            stroke: "white",
+            "stroke-width": "1.5",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M10 6.66602H10.0083",
+            stroke: "white",
+            "stroke-width": "1.5",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
           }
         )
       ]
     }
   );
 };
-var InfoIcon_default = React5__namespace.default.memo(InfoIcon);
+var InfoIcon_default = React4__namespace.default.memo(InfoIcon);
 var Navbar = ({
   className,
   title,
@@ -5387,7 +5809,7 @@ var Navbar = ({
 }) => {
   const { isMobile, isTablet, isDesktop } = useScreenSize_default();
   const Icon2 = lucideReact.CircleHelp;
-  const shouldShowSeparator = !separatorDisable && React5.isValidElement(searchButton);
+  const shouldShowSeparator = !separatorDisable && React4.isValidElement(searchButton);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -5398,8 +5820,8 @@ var Navbar = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
           headImageURL !== "" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: headImageURL, alt: "", className: cn("w-full h-full", headImageURLClassName) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            React5.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
-            React5.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
+            React4.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: title }),
+            React4.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
           ] }),
           tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "text-white hover:opacity-80 ", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon_default, { className: "w-4" }) }) }),
@@ -5430,10 +5852,10 @@ var Navbar = ({
                       ),
                       children: [
                         tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                          React5.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 32, "aria-hidden": "true" }),
+                          React4.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 32, "aria-hidden": "true" }),
                           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: tooltipTitle })
                         ] }),
-                        React5.isValidElement(tooltipdescription) && tooltipdescription
+                        React4.isValidElement(tooltipdescription) && tooltipdescription
                       ]
                     }
                   ),
@@ -5487,13 +5909,13 @@ var Navbar = ({
             }
           ),
           shouldShowSeparator && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }),
-          React5.isValidElement(searchButton) ? searchButton : ""
+          React4.isValidElement(searchButton) ? searchButton : ""
         ] })
       ]
     }
   );
 };
-var navbar_default = React5__namespace.default.memo(Navbar);
+var navbar_default = React4__namespace.default.memo(Navbar);
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "sheet", ...props });
 }
@@ -5596,7 +6018,7 @@ var usePreventPageLeaveStore_default = usePreventPageLeaveStore;
 // src/components/prevent-page-leave/PreventPageLeave.tsx
 var PreventPageLeave = ({ children }) => {
   const { isPreventing } = usePreventPageLeaveStore();
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (!isPreventing || typeof window === "undefined") {
       return;
     }
@@ -5614,7 +6036,7 @@ var PreventPageLeave = ({ children }) => {
 var PreventPageLeave_default = PreventPageLeave;
 var usePreventPageLeave = ({ isPrevening }) => {
   const setPreventing = usePreventPageLeaveStore_default((state) => state.setPreventing);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     setPreventing(isPrevening);
   }, [isPrevening, setPreventing]);
 };
@@ -5893,21 +6315,21 @@ function ToolbarPlugin({
   acceptImageMimeTypes
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [state, setState] = React5.useState(initialToolbarState);
-  const fileInputRef = React5.useRef(null);
-  const [isLinkDialogOpen, setLinkDialogOpen] = React5.useState(false);
-  const [editingExistingLink, setEditingExistingLink] = React5.useState(false);
-  const [linkNodeKey, setLinkNodeKey] = React5.useState(null);
-  const [isImageDialogOpen, setImageDialogOpen] = React5.useState(false);
-  const [editingExistingImage, setEditingExistingImage] = React5.useState(false);
-  const [imageNodeKey, setImageNodeKey] = React5.useState(null);
+  const [state, setState] = React4.useState(initialToolbarState);
+  const fileInputRef = React4.useRef(null);
+  const [isLinkDialogOpen, setLinkDialogOpen] = React4.useState(false);
+  const [editingExistingLink, setEditingExistingLink] = React4.useState(false);
+  const [linkNodeKey, setLinkNodeKey] = React4.useState(null);
+  const [isImageDialogOpen, setImageDialogOpen] = React4.useState(false);
+  const [editingExistingImage, setEditingExistingImage] = React4.useState(false);
+  const [imageNodeKey, setImageNodeKey] = React4.useState(null);
   const linkForm = reactHookForm.useForm({
     defaultValues: { url: "", label: "" }
   });
   const imageForm = reactHookForm.useForm({
     defaultValues: { url: "", alt: "", width: "", height: "" }
   });
-  const openImageDialog = React5.useCallback(() => {
+  const openImageDialog = React4.useCallback(() => {
     if (disabled || !allowImageUrlInsert) {
       return;
     }
@@ -5941,7 +6363,7 @@ function ToolbarPlugin({
     setImageNodeKey(targetImage?.getKey() ?? null);
     setImageDialogOpen(true);
   }, [allowImageUrlInsert, disabled, editor, imageForm]);
-  const closeImageDialog = React5.useCallback(() => {
+  const closeImageDialog = React4.useCallback(() => {
     setImageDialogOpen(false);
     setEditingExistingImage(false);
     setImageNodeKey(null);
@@ -5950,7 +6372,7 @@ function ToolbarPlugin({
       editor.focus();
     }, 0);
   }, [editor, imageForm]);
-  const openLinkDialog = React5.useCallback(() => {
+  const openLinkDialog = React4.useCallback(() => {
     if (disabled) {
       return;
     }
@@ -5990,7 +6412,7 @@ function ToolbarPlugin({
     setLinkNodeKey(detectedLink?.getKey() ?? null);
     setLinkDialogOpen(true);
   }, [disabled, editor, linkForm]);
-  const closeLinkDialog = React5.useCallback(() => {
+  const closeLinkDialog = React4.useCallback(() => {
     setLinkDialogOpen(false);
     setEditingExistingLink(false);
     setLinkNodeKey(null);
@@ -6031,7 +6453,7 @@ function ToolbarPlugin({
     });
     closeLinkDialog();
   });
-  const handleRemoveLink = React5.useCallback(() => {
+  const handleRemoveLink = React4.useCallback(() => {
     editor.focus();
     editor.update(() => {
       if (linkNodeKey) {
@@ -6048,7 +6470,7 @@ function ToolbarPlugin({
     });
     closeLinkDialog();
   }, [closeLinkDialog, editor, linkNodeKey]);
-  const handleLinkDialogOpenChange = React5.useCallback(
+  const handleLinkDialogOpenChange = React4.useCallback(
     (open) => {
       if (open) {
         setLinkDialogOpen(true);
@@ -6058,7 +6480,7 @@ function ToolbarPlugin({
     },
     [closeLinkDialog]
   );
-  const updateToolbar = React5.useCallback(() => {
+  const updateToolbar = React4.useCallback(() => {
     const selection = lexical.$getSelection();
     if (!lexical.$isRangeSelection(selection)) {
       return;
@@ -6098,7 +6520,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React5__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.CAN_UNDO_COMMAND,
@@ -6129,7 +6551,7 @@ function ToolbarPlugin({
       })
     );
   }, [editor, updateToolbar]);
-  const applyBlock = React5.useCallback(
+  const applyBlock = React4.useCallback(
     (nextBlock) => {
       if (disabled) {
         return;
@@ -6191,7 +6613,7 @@ function ToolbarPlugin({
     },
     [disabled, editor, state.blockType]
   );
-  const toggleFormat = React5.useCallback(
+  const toggleFormat = React4.useCallback(
     (format5) => {
       if (disabled) {
         return;
@@ -6200,10 +6622,10 @@ function ToolbarPlugin({
     },
     [disabled, editor]
   );
-  const toggleLink = React5.useCallback(() => {
+  const toggleLink = React4.useCallback(() => {
     openLinkDialog();
   }, [openLinkDialog]);
-  const applyElementFormat = React5.useCallback(
+  const applyElementFormat = React4.useCallback(
     (format5) => {
       if (disabled) {
         return;
@@ -6214,7 +6636,7 @@ function ToolbarPlugin({
   );
   const canInsertImage = allowImageUrlInsert || Boolean(onImageUpload);
   const imageAccept = acceptImageMimeTypes ?? DEFAULT_IMAGE_ACCEPT;
-  const handleInsertImage = React5.useCallback(() => {
+  const handleInsertImage = React4.useCallback(() => {
     if (disabled || !canInsertImage) {
       return;
     }
@@ -6225,7 +6647,7 @@ function ToolbarPlugin({
     }
     openImageDialog();
   }, [canInsertImage, disabled, editor, onImageUpload, openImageDialog]);
-  const handleFileChange = React5.useCallback(
+  const handleFileChange = React4.useCallback(
     async (event) => {
       if (!onImageUpload) {
         return;
@@ -6315,7 +6737,7 @@ function ToolbarPlugin({
     });
     closeImageDialog();
   });
-  const handleImageDialogOpenChange = React5.useCallback(
+  const handleImageDialogOpenChange = React4.useCallback(
     (open) => {
       if (open) {
         setImageDialogOpen(true);
@@ -6325,7 +6747,7 @@ function ToolbarPlugin({
     },
     [closeImageDialog]
   );
-  const handleRemoveImage = React5.useCallback(() => {
+  const handleRemoveImage = React4.useCallback(() => {
     if (!imageNodeKey) {
       closeImageDialog();
       return;
@@ -6684,7 +7106,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React5__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -6708,14 +7130,14 @@ function ControlledValuePlugin({
 }
 function EditableStatePlugin({ editable }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React5__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   return null;
 }
 function ImagesPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React5__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (payload) => {
@@ -6734,7 +7156,7 @@ function ImagesPlugin() {
   }, [editor]);
   return null;
 }
-var RichText = React5.forwardRef(function RichText2({
+var RichText = React4.forwardRef(function RichText2({
   value,
   defaultValue,
   onChange,
@@ -6753,11 +7175,11 @@ var RichText = React5.forwardRef(function RichText2({
   id,
   ...rest
 }, ref) {
-  const initialSerializedStateRef = React5.useRef(void 0);
+  const initialSerializedStateRef = React4.useRef(void 0);
   if (initialSerializedStateRef.current === void 0) {
     initialSerializedStateRef.current = parseSerializedEditorState(value ?? defaultValue);
   }
-  const initialConfig = React5.useMemo(
+  const initialConfig = React4.useMemo(
     () => ({
       namespace: "RichTextEditor",
       editable: !(readOnly || disabled),
@@ -6770,8 +7192,8 @@ var RichText = React5.forwardRef(function RichText2({
     }),
     [disabled, readOnly]
   );
-  const appliedValueRef = React5.useRef(value ?? defaultValue);
-  const handleChange = React5.useCallback(
+  const appliedValueRef = React4.useRef(value ?? defaultValue);
+  const handleChange = React4.useCallback(
     (editorState, editor) => {
       const serialized = JSON.stringify(editorState.toJSON());
       appliedValueRef.current = serialized;
@@ -6867,13 +7289,13 @@ function Separator2({
   );
 }
 function useIsMobile(breakpoint = 768) {
-  const [isMobile, setIsMobile] = React5.useState(() => {
+  const [isMobile, setIsMobile] = React4.useState(() => {
     if (typeof window === "undefined") {
       return false;
     }
     return window.innerWidth < breakpoint;
   });
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     function onResize() {
       setIsMobile(window.innerWidth < breakpoint);
     }
@@ -6925,6 +7347,7 @@ __export(ui_exports, {
   FormItem: () => FormItem,
   FormLabel: () => FormLabel,
   FormMessage: () => FormMessage,
+  Input: () => Input,
   InputPrimitive: () => InputPrimitive,
   Label: () => Label2,
   MonthPicker: () => MonthPicker,
@@ -6998,6 +7421,7 @@ __export(ui_exports, {
   TooltipProvider: () => TooltipProvider2,
   TooltipTrigger: () => TooltipTrigger2,
   buttonVariants: () => buttonVariants,
+  inputVariants: () => inputVariants,
   spinnerVariants: () => spinnerVariants,
   useFormField: () => useFormField,
   useSidebar: () => useSidebar
@@ -7096,9 +7520,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React5__namespace.createContext(null);
+var SidebarContext = React4__namespace.createContext(null);
 function useSidebar() {
-  const context = React5__namespace.useContext(SidebarContext);
+  const context = React4__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -7114,10 +7538,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React5__namespace.useState(false);
-  const [_open, _setOpen] = React5__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React4__namespace.useState(false);
+  const [_open, _setOpen] = React4__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React5__namespace.useCallback(
+  const setOpen = React4__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -7129,10 +7553,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React5__namespace.useCallback(() => {
+  const toggleSidebar = React4__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React5__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -7143,7 +7567,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React5__namespace.useMemo(
+  const contextValue = React4__namespace.useMemo(
     () => ({
       state,
       open,
@@ -7585,7 +8009,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React5__namespace.useMemo(() => {
+  const width = React4__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7725,10 +8149,38 @@ async function getCroppedImg(imageSrc, pixelCrop, desiredDimension) {
     }, "image/png");
   });
 }
+async function getCroppedSVG(imageSrc, pixelCrop, desiredDimension) {
+  let svgString;
+  const parts = imageSrc.split(",");
+  const meta = parts[0];
+  const data = parts[1];
+  if (meta.includes("base64")) {
+    svgString = atob(data);
+  } else {
+    svgString = decodeURIComponent(data);
+  }
+  const parser = new DOMParser();
+  const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
+  const svgElement = svgDoc.documentElement;
+  if (svgElement.tagName.toLowerCase() !== "svg") {
+    throw new Error("The file is not a valid SVG document root.");
+  }
+  const newViewBox = `${pixelCrop.x} ${pixelCrop.y} ${pixelCrop.width} ${pixelCrop.height}`;
+  svgElement.setAttribute("viewBox", newViewBox);
+  const outputWidth = desiredDimension?.width ?? pixelCrop.width;
+  const outputHeight = desiredDimension?.height ?? pixelCrop.height;
+  svgElement.setAttribute("width", String(outputWidth));
+  svgElement.setAttribute("height", String(outputHeight));
+  const serializer = new XMLSerializer();
+  const croppedSvgString = serializer.serializeToString(svgElement);
+  const blob = new Blob([croppedSvgString], { type: "image/svg+xml" });
+  return URL.createObjectURL(blob);
+}
 var CropperModal = ({
   open,
   onOpenChange,
   imageSrc,
+  isSVG,
   onConfirm,
   onCancel,
   onError,
@@ -7738,20 +8190,20 @@ var CropperModal = ({
   title,
   props
 }) => {
-  const [isLoading, setIsLoading] = React5.useState(false);
-  const [crop, setCrop] = React5.useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = React5.useState();
-  const [croppedAreaPixels, setCroppedAreaPixels] = React5.useState(null);
-  const handleClose = React5.useCallback(() => {
+  const [isLoading, setIsLoading] = React4.useState(false);
+  const [crop, setCrop] = React4.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React4.useState();
+  const [croppedAreaPixels, setCroppedAreaPixels] = React4.useState(null);
+  const handleClose = React4.useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
-  const handleCancel = React5.useCallback(() => {
+  const handleCancel = React4.useCallback(() => {
     if (onCancel) {
       onCancel();
     }
     handleClose();
   }, [handleClose, onCancel]);
-  const handleCropComplete = React5.useCallback((_, croppedAreaPixels2) => {
+  const handleCropComplete = React4.useCallback((_, croppedAreaPixels2) => {
     setCroppedAreaPixels(croppedAreaPixels2);
   }, []);
   const handleConfirm = async () => {
@@ -7770,7 +8222,7 @@ var CropperModal = ({
     setIsLoading(true);
     try {
       const desiredDimension = outputExactCropSize ? cropSize : void 0;
-      const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels, desiredDimension);
+      const croppedImage = isSVG ? await getCroppedSVG(imageSrc, croppedAreaPixels, desiredDimension) : await getCroppedImg(imageSrc, croppedAreaPixels, desiredDimension);
       onConfirm({ crop, croppedAreaPixels, croppedImageBlobUrl: croppedImage });
     } catch (e) {
       if (onError) {
@@ -7835,7 +8287,7 @@ var CropperModal = ({
                 ...props?.cropper
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full py-4 px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full py-4 px-8 min-h-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "cancel", onClick: handleCancel, disabled: isLoading, children: "Cancel" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex gap-x-2", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "default", onClick: handleConfirm, disabled: isLoading, children: "Confirm" }) })
             ] }) })
@@ -7858,10 +8310,12 @@ exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent2;
 exports.CollapsibleTrigger = CollapsibleTrigger2;
 exports.CropperModal = CropperModal;
+exports.DIALOG_ALERT_I18N_NAMESPACE = DIALOG_ALERT_I18N_NAMESPACE;
 exports.DataTable = DataTable_default;
 exports.DatePicker = DatePicker2;
 exports.Dialog = Dialog;
 exports.DialogAlert = DialogAlert;
+exports.DialogAlertProvider = DialogAlertProvider;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
 exports.DialogFooter = DialogFooter;
@@ -7962,6 +8416,8 @@ exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.compareAlphanumeric = compareAlphanumeric;
 exports.debounce = debounce;
+exports.getDialogAlertControls = getDialogAlertControls;
+exports.getDialogTemplates = getDialogTemplates;
 exports.inputVariants = inputVariants;
 exports.isDefined = isDefined;
 exports.isEmptyObject = isEmptyObject;