@sustaina/shared-ui 1.10.1 → 1.12.0

package/dist/index.mjs

@@ -2,10 +2,10 @@ 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, 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 { 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';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { useForm, FormProvider, Controller, useFormContext, useFormState, useFieldArray, useWatch } from 'react-hook-form';
@@ -48,6 +48,7 @@ import { mergeRegister } from '@lexical/utils';
 import { $setBlocksType } from '@lexical/selection';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
+import Cropper from 'react-easy-crop';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -939,7 +940,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]);
@@ -974,15 +975,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);
@@ -999,18 +1000,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
@@ -1060,23 +1060,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: {
@@ -1123,6 +1106,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: {
@@ -1145,7 +1145,7 @@ var inputVariants = cva("", {
     appearance: "filled"
   }
 });
-var Input = React5.forwardRef(
+var Input = React4.forwardRef(
   ({
     className,
     wrapperClassName,
@@ -1154,14 +1154,17 @@ var Input = React5.forwardRef(
     appearance,
     prefix,
     prefixProps,
+    prefixInteractive,
     suffix,
     suffixProps,
+    suffixInteractive,
     invalid,
     loading,
     loadingIcon,
     validationMessage,
     validationIcon,
     validationMessageProps,
+    onValueChange,
     type = "text",
     ...rest
   }, ref) => {
@@ -1171,10 +1174,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(
@@ -1196,6 +1207,7 @@ var Input = React5.forwardRef(
         ),
         "aria-invalid": resolvedAriaInvalid,
         "aria-describedby": describedBy || void 0,
+        onChange: handleChange,
         ...inputProps
       }
     );
@@ -1215,7 +1227,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
@@ -1227,7 +1240,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
@@ -1490,20 +1504,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;
@@ -1512,7 +1526,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;
@@ -1522,7 +1536,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) {
@@ -1532,7 +1546,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);
@@ -1540,7 +1554,7 @@ function DatePicker({
     },
     [callbacks]
   );
-  const clampMonthToBounds = React5.useCallback(
+  const clampMonthToBounds = React4.useCallback(
     (year, monthIndex) => {
       let output = monthIndex;
       if (typeof minYear === "number" && year === minYear && minDate) {
@@ -1555,7 +1569,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;
@@ -1576,7 +1590,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 {
@@ -1595,7 +1609,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) => {
@@ -1605,7 +1619,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;
@@ -1753,14 +1767,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);
@@ -1769,26 +1783,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);
@@ -1960,15 +1974,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;
@@ -1977,10 +1991,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) {
@@ -1988,7 +2002,7 @@ function MonthCal({
       }
     }
   }, [selectedMonthDate, menuYear]);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -1999,7 +2013,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;
@@ -2013,7 +2027,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);
@@ -2021,7 +2035,7 @@ function MonthCal({
     },
     [callbacks]
   );
-  const handleYearSelect = React5.useCallback(
+  const handleYearSelect = React4.useCallback(
     (nextValue) => {
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
@@ -2031,7 +2045,7 @@ function MonthCal({
     },
     [maxYear, minYear]
   );
-  const disabledPairs = React5.useMemo(() => {
+  const disabledPairs = React4.useMemo(() => {
     if (!disabledDates?.length) return [];
     const pairs = [];
     disabledDates.forEach((date) => {
@@ -2176,14 +2190,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") {
@@ -2195,8 +2209,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);
@@ -2204,18 +2218,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);
@@ -3275,7 +3289,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) => {
@@ -3866,7 +3880,7 @@ var ColumnSeparator = ({ show, className, ...props }) => {
     }
   );
 };
-var ColumnSeparator_default = React5__default.memo(ColumnSeparator);
+var ColumnSeparator_default = React4__default.memo(ColumnSeparator);
 var StatusContentSlot = ({
   content,
   icon,
@@ -3885,7 +3899,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = React5__default.memo(StatusContentSlot);
+var StatusContentSlot_default = React4__default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -4860,7 +4874,7 @@ function SortableRow({
     id: value,
     disabled: name === "columns.0.id"
   });
-  const style = React5.useMemo(
+  const style = React4.useMemo(
     () => ({
       transform: CSS.Transform.toString(transform),
       transition
@@ -5202,7 +5216,7 @@ var useGridSettingsStore = create(
 );
 var useGridSettingsStore_default = useGridSettingsStore;
 var ListTable = ({ onTableReady, children }) => {
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (onTableReady) {
       onTableReady({ ready: true });
     }
@@ -5306,26 +5320,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,
@@ -5456,7 +5492,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 });
 }
@@ -6061,7 +6097,7 @@ function ToolbarPlugin({
       isLink: hasLink
     }));
   }, []);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         CAN_UNDO_COMMAND,
@@ -6478,7 +6514,7 @@ function ToolbarPlugin({
         ToolbarButton,
         {
           label: "Insert image",
-          icon: Image,
+          icon: Image$1,
           onClick: handleInsertImage,
           disabled: disabled || !canInsertImage
         }
@@ -6647,7 +6683,7 @@ function ControlledValuePlugin({
   trackAppliedValue
 }) {
   const [editor] = useLexicalComposerContext();
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (value == null || trackAppliedValue.current === value) {
       return;
     }
@@ -6671,14 +6707,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) => {
@@ -6888,6 +6924,7 @@ __export(ui_exports, {
   FormItem: () => FormItem,
   FormLabel: () => FormLabel,
   FormMessage: () => FormMessage,
+  Input: () => Input,
   InputPrimitive: () => InputPrimitive,
   Label: () => Label2,
   MonthPicker: () => MonthPicker,
@@ -6961,6 +6998,7 @@ __export(ui_exports, {
   TooltipProvider: () => TooltipProvider2,
   TooltipTrigger: () => TooltipTrigger2,
   buttonVariants: () => buttonVariants,
+  inputVariants: () => inputVariants,
   spinnerVariants: () => spinnerVariants,
   useFormField: () => useFormField,
   useSidebar: () => useSidebar
@@ -7059,9 +7097,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.");
   }
@@ -7077,10 +7115,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) {
@@ -7092,10 +7130,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();
@@ -7106,7 +7144,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React5.useMemo(
+  const contextValue = React4.useMemo(
     () => ({
       state,
       open,
@@ -7548,7 +7586,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React5.useMemo(() => {
+  const width = React4.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -7642,6 +7680,173 @@ function SidebarLayout({
   ] }) });
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvanceSearch_default as AdvanceSearch, arrow_default as ArrowIcon, Button, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, 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 };
+// src/components/cropperModal/helper.ts
+var createImage = (url) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.addEventListener("load", () => resolve(image));
+  image.addEventListener("error", (error) => reject(error));
+  image.setAttribute("crossOrigin", "anonymous");
+  image.src = url;
+});
+async function getCroppedImg(imageSrc, pixelCrop, desiredDimension) {
+  const image = await createImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("can not create canvas");
+  }
+  canvas.width = image.width;
+  canvas.height = image.height;
+  ctx.drawImage(image, 0, 0);
+  const croppedCanvas = document.createElement("canvas");
+  const croppedCtx = croppedCanvas.getContext("2d");
+  if (!croppedCtx) {
+    throw new Error("can not create canvas");
+  }
+  croppedCanvas.width = desiredDimension?.width ?? pixelCrop.width;
+  croppedCanvas.height = desiredDimension?.height ?? pixelCrop.height;
+  croppedCtx.drawImage(
+    canvas,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    desiredDimension?.width ?? pixelCrop.width,
+    desiredDimension?.height ?? pixelCrop.height
+  );
+  return new Promise((resolve, reject) => {
+    croppedCanvas.toBlob((file) => {
+      if (file) {
+        resolve(URL.createObjectURL(file));
+      } else {
+        reject("croppedCanvas gave null object");
+      }
+    }, "image/png");
+  });
+}
+var CropperModal = ({
+  open,
+  onOpenChange,
+  imageSrc,
+  onConfirm,
+  onCancel,
+  onError,
+  cropSize,
+  outputExactCropSize,
+  generateBlobUrlOutput,
+  title,
+  props
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState();
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const handleCancel = useCallback(() => {
+    if (onCancel) {
+      onCancel();
+    }
+    handleClose();
+  }, [handleClose, onCancel]);
+  const handleCropComplete = useCallback((_, croppedAreaPixels2) => {
+    setCroppedAreaPixels(croppedAreaPixels2);
+  }, []);
+  const handleConfirm = async () => {
+    if (!imageSrc || !onConfirm) {
+      handleClose();
+      return;
+    }
+    if (!generateBlobUrlOutput) {
+      onConfirm({ crop, croppedAreaPixels });
+      return;
+    }
+    if (!croppedAreaPixels) {
+      onConfirm({ crop, croppedAreaPixels, croppedImageBlobUrl: imageSrc });
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const desiredDimension = outputExactCropSize ? cropSize : void 0;
+      const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels, desiredDimension);
+      onConfirm({ crop, croppedAreaPixels, croppedImageBlobUrl: croppedImage });
+    } catch (e) {
+      if (onError) {
+        onError(e);
+      }
+    } finally {
+      setIsLoading(false);
+      handleClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          handleClose();
+        } else {
+          onOpenChange(true);
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          className: "flex flex-col w-fit !max-w-6xl p-0 overflow-clip gap-0 border-0",
+          ...props?.dialogContent,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex w-full bg-[#82B495] text-white justify-between items-center p-4",
+                ...props?.dialogTitleContainer,
+                children: [
+                  /* @__PURE__ */ jsx(DialogTitle, { className: "text-2xl font-semibold", ...props?.dialogTitle, children: title ?? "Crop Image" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "text-white hover:text-gray-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
+                      onClick: handleCancel,
+                      disabled: isLoading,
+                      children: /* @__PURE__ */ jsx(XIcon, { className: "w-4 h-4" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-120 md:w-[50vw] h-[70vh] mx-auto", ...props?.cropperContainer, children: /* @__PURE__ */ jsx(
+              Cropper,
+              {
+                image: imageSrc ?? void 0,
+                crop,
+                onCropChange: setCrop,
+                zoom,
+                onZoomChange: setZoom,
+                style: { containerStyle: { position: "relative", width: "100%", height: "100%" } },
+                onCropComplete: handleCropComplete,
+                aspect: cropSize ? cropSize.width / cropSize.height : void 0,
+                zoomWithScroll: true,
+                showGrid: true,
+                restrictPosition: true,
+                ...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(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" }) })
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map