@sustaina/shared-ui 1.11.0 → 1.13.0

package/dist/index.mjs

@@ -2,8 +2,8 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import clsx2, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React5 from 'react';
-import React5__default, { forwardRef, useRef, useMemo, useCallback, isValidElement, useState, useEffect, createElement } from 'react';
+import * as React4 from 'react';
+import React4__default, { forwardRef, useRef, useMemo, useCallback, isValidElement, useState, useEffect, createElement } from 'react';
 import { format, isValid, parseISO, isAfter, compareAsc, parse } from 'date-fns';
 import { CircleX, CircleHelp, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image as Image$1, AlignLeft, AlignCenter, AlignRight, XIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, X, Search, ChevronUp, ChevronDown, Plus, ChevronLeft, CircleUserRound, PanelLeftIcon, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
 import { createPortal } from 'react-dom';
@@ -17,6 +17,9 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { reSplitAlphaNumeric, useReactTable, getCoreRowModel, getGroupedRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
+import i18n from 'i18next';
+import { initReactI18next, useTranslation } from 'react-i18next';
+import { create } from 'zustand';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -24,7 +27,6 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { z } from 'zod';
-import { create } from 'zustand';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { createCommand, DecoratorNode, $getSelection, $isRangeSelection, $getNodeByKey, $createTextNode, $insertNodes, CAN_UNDO_COMMAND, COMMAND_PRIORITY_NORMAL, CAN_REDO_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, $createParagraphNode, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, UNDO_COMMAND, REDO_COMMAND, COMMAND_PRIORITY_EDITOR } from 'lexical';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -940,7 +942,7 @@ var OPERATOR_LABEL = {
   containsAll: "Contains all of"
 };
 var OperatorSelect = ({ row, operators, onChangeOperator, error }) => {
-  React5__default.useEffect(() => {
+  React4__default.useEffect(() => {
     if (!operators.length) return;
     if (!operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
@@ -975,15 +977,15 @@ function Label2({ className, ...props }) {
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React5.createContext({});
+var FormFieldContext = React4.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React5.useContext(FormFieldContext);
-  const itemContext = React5.useContext(FormItemContext);
+  const fieldContext = React4.useContext(FormFieldContext);
+  const itemContext = React4.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1000,18 +1002,17 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React5.createContext({});
+var FormItemContext = React4.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React5.useId();
+  const id = React4.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ 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__ */ jsx(
     Label2,
     {
       "data-slot": "form-label",
-      "data-error": !!error,
       className: cn("data-[error=true]:text-destructive", className),
       htmlFor: formItemId,
       ...props
@@ -1061,23 +1062,6 @@ function FormMessage({ className, ...props }) {
     }
   );
 }
-var InputPrimitive = React5.forwardRef(
-  ({ className, type = "text", ...props }, ref) => {
-    return /* @__PURE__ */ 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 = cva("relative inline-block aspect-square transform-gpu", {
   variants: {
     variant: {
@@ -1124,6 +1108,23 @@ var Spinner = ({ className, variant, size = "default", ...props }) => /* @__PURE
     ]
   }
 );
+var InputPrimitive = React4.forwardRef(
+  ({ className, type = "text", ...props }, ref) => {
+    return /* @__PURE__ */ 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 = cva("", {
   variants: {
     controlSize: {
@@ -1146,7 +1147,7 @@ var inputVariants = cva("", {
     appearance: "filled"
   }
 });
-var Input = React5.forwardRef(
+var Input = React4.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -1155,14 +1156,17 @@ var Input = React5.forwardRef(
     appearance,
     prefix,
     prefixProps,
+    prefixInteractive,
     suffix,
     suffixProps,
+    suffixInteractive,
     invalid,
     loading,
     loadingIcon,
     validationMessage,
     validationIcon,
     validationMessageProps,
+    onValueChange,
     type = "text",
     ...rest
   }, ref) => {
@@ -1172,10 +1176,18 @@ var Input = React5.forwardRef(
     const {
       "aria-invalid": ariaInvalidProp,
       "aria-describedby": ariaDescribedByProp,
+      onChange: onChangeProp,
       ...inputProps
     } = rest;
     const ariaInvalid = invalid ?? ariaInvalidProp;
-    const messageId = React5.useId();
+    const messageId = React4.useId();
+    const handleChange = React4.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(
@@ -1197,6 +1209,7 @@ var Input = React5.forwardRef(
         ),
         "aria-invalid": resolvedAriaInvalid,
         "aria-describedby": describedBy || void 0,
+        onChange: handleChange,
         ...inputProps
       }
     );
@@ -1216,7 +1229,8 @@ var Input = React5.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
@@ -1228,7 +1242,8 @@ var Input = React5.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
@@ -1491,20 +1506,20 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React5.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React5.useState(
+  const today = React4.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React4.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React5.useMemo(() => {
+  const disabledSet = React4.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.useMemo(() => {
+  const weekdays = React4.useMemo(() => {
     const labels = [];
     for (let i = 0; i < 7; i++) {
       const idx = i;
@@ -1513,7 +1528,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React5.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React4.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -1523,7 +1538,7 @@ function DatePicker({
   };
   const minYear = minDate?.getFullYear();
   const maxYear = maxDate?.getFullYear();
-  const getMonthLabel = React5.useCallback(
+  const getMonthLabel = React4.useCallback(
     (year, monthIndex) => {
       const label = callbacks?.monthLabel?.(year, monthIndex);
       if (label === null || label === void 0) {
@@ -1533,7 +1548,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const getYearLabel = React5.useCallback(
+  const getYearLabel = React4.useCallback(
     (year) => {
       const label = callbacks?.yearLabel?.(year);
       if (label === null || label === void 0) return String(year);
@@ -1541,7 +1556,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const clampMonthToBounds = React5.useCallback(
+  const clampMonthToBounds = React4.useCallback(
     (year, monthIndex) => {
       let output = monthIndex;
       if (typeof minYear === "number" && year === minYear && minDate) {
@@ -1556,7 +1571,7 @@ function DatePicker({
     },
     [maxDate, minDate, maxYear, minYear]
   );
-  const yearOptions = React5.useMemo(() => {
+  const yearOptions = React4.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : displayYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : displayYear + fallbackWindow;
@@ -1577,7 +1592,7 @@ function DatePicker({
     }
     return years;
   }, [displayYear, maxYear, minYear, selectedDate]);
-  const monthOptions = React5.useMemo(() => {
+  const monthOptions = React4.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 {
@@ -1596,7 +1611,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.useCallback((nextValue) => {
+  const handleMonthSelect = React4.useCallback((nextValue) => {
     const nextMonth = Number.parseInt(nextValue, 10);
     if (Number.isNaN(nextMonth)) return;
     setDisplayed((prev) => {
@@ -1606,7 +1621,7 @@ function DatePicker({
       return next;
     });
   }, []);
-  const handleYearSelect = React5.useCallback(
+  const handleYearSelect = React4.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -1754,14 +1769,14 @@ var DatePicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React5__default.useState(false);
-  const parser = React5__default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
-  const outputFormatter = React5__default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
-  const labelFormatter = React5__default.useMemo(
+  const [open, setOpen] = React4__default.useState(false);
+  const parser = React4__default.useMemo(() => valueParser ?? defaultValueParser, [valueParser]);
+  const outputFormatter = React4__default.useMemo(() => valueFormatter ?? defaultValueFormatter, [valueFormatter]);
+  const labelFormatter = React4__default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter,
     [displayFormatter]
   );
-  const parsedValue = React5__default.useMemo(() => {
+  const parsedValue = React4__default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return value;
     const parsed = parser(value);
@@ -1770,26 +1785,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__default.useCallback(() => setOpen(false), []);
-  const emitChange = React5__default.useCallback(
+  const handleClose = React4__default.useCallback(() => setOpen(false), []);
+  const emitChange = React4__default.useCallback(
     (next) => {
       onChange?.(next);
       onValueChange?.(next ? outputFormatter(next) : void 0);
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React5__default.useCallback(
+  const handleSelect = React4__default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React5__default.useCallback(() => {
+  const handleClear = React4__default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React5__default.useCallback(
+  const handleOpenChange = React4__default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -1961,15 +1976,15 @@ function MonthCal({
   onYearBackward,
   onYearForward
 }) {
-  const today = React5.useMemo(() => {
+  const today = React4.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     now.setDate(1);
     now.setHours(0, 0, 0, 0);
     return now;
   }, []);
-  const selectedMonthDate = React5.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
-  const min = React5.useMemo(() => normalizeMonth(minDate), [minDate]);
-  const max = React5.useMemo(() => normalizeMonth(maxDate), [maxDate]);
+  const selectedMonthDate = React4.useMemo(() => normalizeMonth(selectedDate), [selectedDate]);
+  const min = React4.useMemo(() => normalizeMonth(minDate), [minDate]);
+  const max = React4.useMemo(() => normalizeMonth(maxDate), [maxDate]);
   let effectiveMin = min;
   if (min && max && min > max) {
     effectiveMin = max;
@@ -1978,10 +1993,10 @@ function MonthCal({
   const minMonth = effectiveMin?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
-  const [menuYear, setMenuYear] = React5.useState(
+  const [menuYear, setMenuYear] = React4.useState(
     () => selectedMonthDate?.getFullYear() ?? today.getFullYear()
   );
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (selectedMonthDate) {
       const year = selectedMonthDate.getFullYear();
       if (year !== menuYear) {
@@ -1989,7 +2004,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -2000,7 +2015,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.useMemo(() => {
+  const yearOptions = React4.useMemo(() => {
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : menuYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : menuYear + fallbackWindow;
@@ -2014,7 +2029,7 @@ function MonthCal({
     }
     return years;
   }, [maxYear, menuYear, minYear]);
-  const formatYearLabel = React5.useCallback(
+  const formatYearLabel = React4.useCallback(
     (year) => {
       const raw = callbacks?.yearLabel?.(year);
       if (raw === null || raw === void 0) return String(year);
@@ -2022,7 +2037,7 @@ function MonthCal({
     },
     [callbacks]
   );
-  const handleYearSelect = React5.useCallback(
+  const handleYearSelect = React4.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -2032,7 +2047,7 @@ function MonthCal({
     },
     [maxYear, minYear]
   );
-  const disabledPairs = React5.useMemo(() => {
+  const disabledPairs = React4.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -2177,14 +2192,14 @@ var MonthPicker2 = ({
   ariaLabel,
   ...calendarProps
 }) => {
-  const [open, setOpen] = React5__default.useState(false);
-  const parser = React5__default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
-  const outputFormatter = React5__default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
-  const labelFormatter = React5__default.useMemo(
+  const [open, setOpen] = React4__default.useState(false);
+  const parser = React4__default.useMemo(() => valueParser ?? defaultValueParser2, [valueParser]);
+  const outputFormatter = React4__default.useMemo(() => valueFormatter ?? defaultValueFormatter2, [valueFormatter]);
+  const labelFormatter = React4__default.useMemo(
     () => displayFormatter ?? defaultDisplayFormatter2,
     [displayFormatter]
   );
-  const parsedValue = React5__default.useMemo(() => {
+  const parsedValue = React4__default.useMemo(() => {
     if (value === null || value === void 0) return void 0;
     if (value instanceof Date) return normalizeMonth2(value);
     if (typeof value === "string") {
@@ -2196,8 +2211,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__default.useCallback(() => setOpen(false), []);
-  const emitChange = React5__default.useCallback(
+  const handleClose = React4__default.useCallback(() => setOpen(false), []);
+  const emitChange = React4__default.useCallback(
     (next) => {
       const normalized = next ? normalizeMonth2(next) : void 0;
       onChange?.(normalized);
@@ -2205,18 +2220,18 @@ var MonthPicker2 = ({
     },
     [onChange, onValueChange, outputFormatter]
   );
-  const handleSelect = React5__default.useCallback(
+  const handleSelect = React4__default.useCallback(
     (next) => {
       emitChange(next);
       if (closeOnSelect && next) handleClose();
     },
     [closeOnSelect, emitChange, handleClose]
   );
-  const handleClear = React5__default.useCallback(() => {
+  const handleClear = React4__default.useCallback(() => {
     emitChange(void 0);
     handleClose();
   }, [emitChange, handleClose]);
-  const handleOpenChange = React5__default.useCallback(
+  const handleOpenChange = React4__default.useCallback(
     (nextOpen) => {
       if (disabled && nextOpen) return;
       setOpen(nextOpen);
@@ -3276,7 +3291,7 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
-  const [operatorErrors, setOperatorErrors] = React5__default.useState({});
+  const [operatorErrors, setOperatorErrors] = React4__default.useState({});
   const clearOperatorError = useCallback(
     (rowId) => {
       setOperatorErrors((prev) => {
@@ -3867,7 +3882,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
     }
   );
 };
-var ColumnSeparator_default = React5__default.memo(ColumnSeparator);
+var ColumnSeparator_default = React4__default.memo(ColumnSeparator);
 var StatusContentSlot = ({
   content,
   icon,
@@ -3886,7 +3901,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React5__default.memo(StatusContentSlot);
+var StatusContentSlot_default = React4__default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -4711,9 +4726,11 @@ var buttonVariants2 = 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",
@@ -4755,6 +4772,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.use(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;
+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,
@@ -4762,7 +4927,7 @@ function DialogAlert({
   description,
   variant = "default",
   confirmText,
-  cancelText = "Cancel",
+  cancelText = "cancel",
   onConfirm,
   onCancel,
   showCancel = true,
@@ -4771,6 +4936,7 @@ function DialogAlert({
   persistent = false
 }) {
   const alignClass = align === "start" ? "justify-start" : align === "end" ? "justify-end" : "justify-center";
+  const { t } = useTranslation(DIALOG_ALERT_I18N_NAMESPACE);
   const handleCancel = useCallback(() => {
     onCancel?.();
     onOpenChange(false);
@@ -4781,28 +4947,261 @@ function DialogAlert({
   return /* @__PURE__ */ jsx(Dialog2, { open, onOpenChange: persistent ? () => {
   } : onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxs(DialogHeader2, { children: [
-      title && /* @__PURE__ */ jsx(DialogTitle2, { className: variantClass(variant), children: title }),
-      description && /* @__PURE__ */ jsx(DialogDescription2, { children: description })
+      title && /* @__PURE__ */ jsx(DialogTitle2, { className: titleColorVariant[variant], children: t(title) }),
+      description && /* @__PURE__ */ jsx(DialogDescription2, { children: t(description) })
     ] }),
     outlet && outlet,
     /* @__PURE__ */ jsxs("div", { className: `flex gap-3 mt-3 ${alignClass}`, children: [
-      showCancel && /* @__PURE__ */ jsx(Button2, { variant: "cancel", onClick: handleCancel, children: cancelText }),
-      confirmText && /* @__PURE__ */ jsx(Button2, { variant, onClick: handleConfirm, children: confirmText })
+      showCancel && /* @__PURE__ */ jsx(Button2, { variant: "cancel", onClick: handleCancel, children: t(cancelText) }),
+      confirmText && /* @__PURE__ */ 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 = 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);
+  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__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ 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
@@ -4861,7 +5260,7 @@ function SortableRow({
     id: value,
     disabled: name === "columns.0.id"
   });
-  const style = React5.useMemo(
+  const style = React4.useMemo(
     () => ({
       transform: CSS.Transform.toString(transform),
       transition
@@ -5203,7 +5602,7 @@ var useGridSettingsStore = create(
 );
 var useGridSettingsStore_default = useGridSettingsStore;
 var ListTable = ({ onTableReady, children }) => {
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (onTableReady) {
       onTableReady({ ready: true });
     }
@@ -5307,26 +5706,48 @@ var InfoIcon = (props) => {
   return /* @__PURE__ */ 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__ */ jsx("circle", { cx: "6.98438", cy: "6.63281", r: "6.25", fill: "white" }),
         /* @__PURE__ */ 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__ */ jsx(
+          "path",
+          {
+            d: "M10 13.3333V10",
+            stroke: "white",
+            "stroke-width": "1.5",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10 6.66602H10.0083",
+            stroke: "white",
+            "stroke-width": "1.5",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
           }
         )
       ]
     }
   );
 };
-var InfoIcon_default = React5__default.memo(InfoIcon);
+var InfoIcon_default = React4__default.memo(InfoIcon);
 var Navbar = ({
   className,
   title,
@@ -5457,7 +5878,7 @@ var Navbar = ({
     }
   );
 };
-var navbar_default = React5__default.memo(Navbar);
+var navbar_default = React4__default.memo(Navbar);
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -6062,7 +6483,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         CAN_UNDO_COMMAND,
@@ -6648,7 +7069,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = useLexicalComposerContext();
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -6672,14 +7093,14 @@ function ControlledValuePlugin({
 }
 function EditableStatePlugin({ editable }) {
   const [editor] = useLexicalComposerContext();
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
   return null;
 }
 function ImagesPlugin() {
   const [editor] = useLexicalComposerContext();
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (payload) => {
@@ -6889,6 +7310,7 @@ __export(ui_exports, {
   FormItem: () => FormItem,
   FormLabel: () => FormLabel,
   FormMessage: () => FormMessage,
+  Input: () => Input,
   InputPrimitive: () => InputPrimitive,
   Label: () => Label2,
   MonthPicker: () => MonthPicker,
@@ -6962,6 +7384,7 @@ __export(ui_exports, {
   TooltipProvider: () => TooltipProvider2,
   TooltipTrigger: () => TooltipTrigger2,
   buttonVariants: () => buttonVariants,
+  inputVariants: () => inputVariants,
   spinnerVariants: () => spinnerVariants,
   useFormField: () => useFormField,
   useSidebar: () => useSidebar
@@ -7060,9 +7483,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React5.createContext(null);
+var SidebarContext = React4.createContext(null);
 function useSidebar() {
-  const context = React5.useContext(SidebarContext);
+  const context = React4.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -7078,10 +7501,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React5.useState(false);
-  const [_open, _setOpen] = React5.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React4.useState(false);
+  const [_open, _setOpen] = React4.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React5.useCallback(
+  const setOpen = React4.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -7093,10 +7516,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React5.useCallback(() => {
+  const toggleSidebar = React4.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -7107,7 +7530,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React5.useMemo(
+  const contextValue = React4.useMemo(
     () => ({
       state,
       open,
@@ -7549,7 +7972,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React5.useMemo(() => {
+  const width = React4.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -7689,10 +8112,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,
@@ -7734,7 +8185,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) {
@@ -7799,7 +8250,7 @@ var CropperModal = ({
                 ...props?.cropper
               }
             ) }),
-            /* @__PURE__ */ jsx("div", { className: "w-full py-4 px-8", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-full py-4 px-8 min-h-10", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between", children: [
               /* @__PURE__ */ jsx(Button, { type: "button", variant: "cancel", onClick: handleCancel, disabled: isLoading, children: "Cancel" }),
               /* @__PURE__ */ jsx("div", { className: "ml-auto flex gap-x-2", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "default", onClick: handleConfirm, disabled: isLoading, children: "Confirm" }) })
             ] }) })
@@ -7810,6 +8261,6 @@ var CropperModal = ({
   );
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CropperModal, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Input, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, calendar_default as SuiCalendarIcon, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, ui_exports as UI, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, stripNullishObject, throttle, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CropperModal, DIALOG_ALERT_I18N_NAMESPACE, DataTable_default as DataTable, DatePicker2 as DatePicker, Dialog, DialogAlert, DialogAlertProvider, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, Input, Label2 as Label, List_default as List, container_default as ListContainer, header_default as ListHeader, table_default as ListTable, LookupSelect, MonthPicker2 as MonthPicker, navbar_default as Navbar, not_found_default as NotFoundIcon, Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger, PreventPageLeave_default as PreventPageLeave, RadioGroupItem, RadioGroupRoot, RadioLabel, RichText, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarLayout, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, calendar_default as SuiCalendarIcon, check_default as SuiCheckIcon, dots_vertical_default as SuiDotsVerticalIcon, empty_data_default as SuiEmptyDataIcon, expand_default as SuiExpandIcon, filter_default as SuiFilterIcon, setting_default as SuiSettingIcon, triangle_down_default as SuiTriangleDownIcon, warning_default as SuiWarningIcon, Switch, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, ui_exports as UI, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, getDialogAlertControls, getDialogTemplates, inputVariants, isDefined, isEmptyObject, selectValueToBoolean, stripNullishObject, throttle, useFormField, useGridSettingsStore_default as useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useSidebar, useTruncated_default as useTruncated };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map