@omnitron-dev/prism 0.2.0 → 0.3.1

package/dist/{chunk-KTCWPGON.js → chunk-GMIE6III.js}

@@ -1,10 +1,13 @@
-import { forwardRef, useState, useRef, useEffect, useId, useCallback, useMemo } from 'react';
+import { CloseIcon, SearchIcon, ChevronDownIcon, CopyIcon } from './chunk-PGHEP4JD.js';
+import { useState, useRef, useEffect, useId, useMemo, useCallback, Component } from 'react';
 import InputBase from '@mui/material/InputBase';
 import InputAdornment from '@mui/material/InputAdornment';
 import Tooltip from '@mui/material/Tooltip';
-import Box7 from '@mui/material/Box';
+import Box8 from '@mui/material/Box';
 import { useTheme, alpha } from '@mui/material/styles';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Stack from '@mui/material/Stack';
+import Typography3 from '@mui/material/Typography';
 import { useFormContext, Controller } from 'react-hook-form';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
@@ -20,59 +23,27 @@ import Autocomplete from '@mui/material/Autocomplete';
 import Chip from '@mui/material/Chip';
 import Rating from '@mui/material/Rating';
 import Slider from '@mui/material/Slider';
-import Typography2 from '@mui/material/Typography';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import dayjs from 'dayjs';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import FormGroup from '@mui/material/FormGroup';
 import { useDropzone } from 'react-dropzone';
-import Stack from '@mui/material/Stack';
-import IconButton from '@mui/material/IconButton';
+import IconButton3 from '@mui/material/IconButton';
 import Avatar from '@mui/material/Avatar';
 import Menu from '@mui/material/Menu';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
+import Button from '@mui/material/Button';
+import Collapse from '@mui/material/Collapse';
 
-function SearchIcon({ size = 18 }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
-      ]
-    }
-  );
+function SearchIcon2({ size = 18 }) {
+  return /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: size } });
 }
 function ClearIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: 16 } });
 }
-var SearchInput = forwardRef(function SearchInput2({
+function SearchInput({
   value: controlledValue,
   onChange,
   placeholder = "Search...",
@@ -86,8 +57,9 @@ var SearchInput = forwardRef(function SearchInput2({
   onFocus,
   onBlur,
   onKeyDown,
-  sx
-}, ref) {
+  sx,
+  ref
+}) {
   const theme = useTheme();
   const [localValue, setLocalValue] = useState(controlledValue ?? "");
   const timerRef = useRef(void 0);
@@ -128,9 +100,9 @@ var SearchInput = forwardRef(function SearchInput2({
       onFocus,
       onBlur,
       onKeyDown,
-      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { color: "text.disabled", mr: compact ? 0.75 : 1 }, children: /* @__PURE__ */ jsx(SearchIcon, { size: compact ? 16 : 18 }) }),
+      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { color: "text.disabled", mr: compact ? 0.75 : 1 }, children: /* @__PURE__ */ jsx(SearchIcon2, { size: compact ? 16 : 18 }) }),
       endAdornment: displayValue ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, children: /* @__PURE__ */ jsx(
-        Box7,
+        Box8,
         {
           component: "button",
           type: "button",
@@ -179,7 +151,181 @@ var SearchInput = forwardRef(function SearchInput2({
       }
     }
   );
-});
+}
+function IconWrapper({ icon, color = "primary.main", size = 64 }) {
+  return /* @__PURE__ */ jsx(
+    Box8,
+    {
+      sx: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: (theme) => {
+          const parts = color.split(".");
+          let resolved = theme.palette;
+          for (const part of parts) {
+            resolved = resolved?.[part];
+          }
+          return typeof resolved === "string" ? alpha(resolved, 0.08) : alpha(theme.palette.primary.main, 0.08);
+        }
+      },
+      children: icon
+    }
+  );
+}
+function EmptyContent({
+  illustration,
+  icon,
+  iconColor = "primary.main",
+  iconSize = 64,
+  title = "No data",
+  description,
+  action,
+  actions,
+  maxWidth = 400,
+  filled = false,
+  sx,
+  illustrationSx,
+  slotProps,
+  compact = false
+}) {
+  const visual = icon ? /* @__PURE__ */ jsx(IconWrapper, { icon, color: iconColor, size: iconSize }) : illustration ? /* @__PURE__ */ jsx(Box8, { sx: illustrationSx, children: illustration }) : null;
+  const allActions = [...actions ?? [], ...action ? [action] : []];
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      sx: {
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        py: compact ? 4 : 8,
+        px: 2,
+        // Default non-compact behavior: vertically center inside the
+        // available "main content" area. Two complementary anchors:
+        //   * `flex: 1, alignSelf: 'stretch'` — when the parent IS a
+        //     flex column with explicit height (DashboardLayout main,
+        //     full-height page wrappers), EmptyContent grows to fill
+        //     the column and the inner `justifyContent: center` puts
+        //     the message in the middle of that column.
+        //   * `minHeight: calc(100vh - 240px)` — fallback for the
+        //     common case where the page wrapper is just a content-
+        //     sized `<Stack>` or `<Box>`. 240px is the typical
+        //     vertical chrome (header ~64 + breadcrumbs ~60 + page
+        //     padding ~80 + a small margin), so this leaves enough
+        //     space below the breadcrumbs for the message to sit at
+        //     the optical center of the visible viewport.
+        //
+        // `compact` keeps the inline-sized behavior for callers that
+        // drop EmptyContent inside a card cell or sidebar.
+        // `filled` is the explicit "fill my parent" mode and shares
+        // the same fallback so the visual is consistent.
+        ...!compact && {
+          flex: 1,
+          alignSelf: "stretch",
+          minHeight: "calc(100vh - 240px)"
+        },
+        ...filled && { height: "100%" },
+        ...sx
+      },
+      children: /* @__PURE__ */ jsxs(
+        Box8,
+        {
+          sx: {
+            maxWidth,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: compact ? 1.5 : 2.5
+          },
+          children: [
+            visual,
+            /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, sx: {
+              alignItems: "center"
+            }, children: [
+              title && /* @__PURE__ */ jsx(
+                Typography3,
+                {
+                  variant: compact ? "subtitle1" : "h6",
+                  sx: {
+                    color: "text.secondary",
+                    fontWeight: 600,
+                    ...slotProps?.title
+                  },
+                  children: title
+                }
+              ),
+              description && /* @__PURE__ */ jsx(
+                Typography3,
+                {
+                  variant: "body2",
+                  sx: {
+                    color: "text.disabled",
+                    lineHeight: 1.6,
+                    ...slotProps?.description
+                  },
+                  children: description
+                }
+              )
+            ] }),
+            allActions.length > 0 && /* @__PURE__ */ jsx(
+              Stack,
+              {
+                direction: "row",
+                spacing: 1,
+                sx: { mt: compact ? 0.5 : 1, flexWrap: "wrap", justifyContent: "center", ...slotProps?.actions },
+                children: allActions.map((a, i) => /* @__PURE__ */ jsx(Box8, { children: a }, i))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function SearchEmptyContent({
+  query,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    EmptyContent,
+    {
+      title: "No results found",
+      description: query ? `Your search for "${query}" did not match any results.` : "Try adjusting your search criteria.",
+      ...props
+    }
+  );
+}
+function LoadingEmptyContent({ ...props }) {
+  return /* @__PURE__ */ jsx(
+    EmptyContent,
+    {
+      title: "Loading...",
+      illustration: /* @__PURE__ */ jsx(
+        Box8,
+        {
+          sx: {
+            width: 64,
+            height: 64,
+            borderRadius: "50%",
+            border: "3px solid",
+            borderColor: "divider",
+            borderTopColor: "primary.main",
+            animation: "spin 1s linear infinite",
+            "@keyframes spin": {
+              from: { transform: "rotate(0deg)" },
+              to: { transform: "rotate(360deg)" }
+            }
+          }
+        }
+      ),
+      compact: true,
+      ...props
+    }
+  );
+}
 function FieldText({
   name,
   helperText,
@@ -211,17 +357,22 @@ function FieldText({
           helperText: error?.message ?? helperText,
           required,
           slotProps: {
+            // Shrink label for multiline fields to prevent overlap with textarea content
+            ...multiline ? { inputLabel: { shrink: true } } : {},
+            ...slotProps,
             formHelperText: {
-              id: helperId
+              id: helperId,
+              ...slotProps?.formHelperText
             },
+            // Merged, not overwritten: spreading the caller's `slotProps` last
+            // replaced `htmlInput` wholesale, so passing any input prop
+            // silently stripped every aria attribute below.
             htmlInput: {
               "aria-describedby": error?.message || helperText ? helperId : void 0,
               "aria-invalid": !!error,
-              "aria-required": required
-            },
-            // Shrink label for multiline fields to prevent overlap with textarea content
-            ...multiline ? { inputLabel: { shrink: true } } : {},
-            ...slotProps
+              "aria-required": required,
+              ...slotProps?.htmlInput
+            }
           },
           ...other
         }
@@ -261,15 +412,18 @@ function FieldSelect({
           helperText: error?.message ?? helperText,
           required,
           slotProps: {
+            ...slotProps,
             formHelperText: {
-              id: helperId
+              id: helperId,
+              ...slotProps?.formHelperText
             },
+            // Merged, not overwritten — see field-text for the same fix.
             select: {
               "aria-describedby": error?.message || helperText ? helperId : void 0,
               "aria-invalid": !!error,
-              "aria-required": required
-            },
-            ...slotProps
+              "aria-required": required,
+              ...slotProps?.select
+            }
           },
           ...other,
           children: [
@@ -497,9 +651,11 @@ function NumberInput({
   const [displayValue, setDisplayValue] = useState(
     () => transformForDisplay(field.value ?? options.defaultValue ?? 0, options)
   );
+  const committedRef = useRef(field.value);
   useEffect(() => {
-    const formatted = transformForDisplay(field.value ?? options.defaultValue ?? 0, options);
-    setDisplayValue(formatted);
+    if (Object.is(field.value, committedRef.current)) return;
+    committedRef.current = field.value;
+    setDisplayValue(transformForDisplay(field.value ?? options.defaultValue ?? 0, options));
   }, [field.value, options]);
   const handleChange = useCallback(
     (e) => {
@@ -507,15 +663,18 @@ function NumberInput({
       setDisplayValue(transformed);
       const num = parseFloat(transformed);
       if (!isNaN(num)) {
+        committedRef.current = num;
         field.onChange(num);
       } else if (transformed === "" || transformed === "-") {
-        field.onChange(options.defaultValue ?? 0);
+        committedRef.current = void 0;
+        field.onChange(void 0);
       }
     },
     [field, options]
   );
   const handleBlur = useCallback(() => {
     const finalValue = transformOnBlur(displayValue || String(field.value ?? options.defaultValue ?? 0), options);
+    committedRef.current = finalValue;
     field.onChange(finalValue);
     setDisplayValue(transformForDisplay(finalValue, options));
     field.onBlur();
@@ -533,9 +692,14 @@ function NumberInput({
       helperText: error?.message ?? helperText,
       required,
       slotProps: {
+        ...slotProps,
         formHelperText: {
-          id: helperId
+          id: helperId,
+          ...slotProps?.formHelperText
         },
+        // Merged, not overwritten: spreading the caller's `slotProps` last
+        // replaced `htmlInput` wholesale, so passing any input prop silently
+        // stripped every aria attribute below.
         htmlInput: {
           inputMode: options.decimals === 0 ? "numeric" : "decimal",
           "aria-describedby": error?.message || helperText ? helperId : void 0,
@@ -543,9 +707,9 @@ function NumberInput({
           "aria-required": required,
           "aria-valuemin": options.min,
           "aria-valuemax": options.max,
-          "aria-valuenow": field.value ?? options.defaultValue ?? 0
-        },
-        ...slotProps
+          "aria-valuenow": field.value ?? options.defaultValue ?? 0,
+          ...slotProps?.htmlInput
+        }
       }
     }
   );
@@ -565,13 +729,10 @@ function FieldNumber({
   const id = useId();
   const inputId = `field-number-${id}`;
   const helperId = `field-number-helper-${id}`;
-  const options = {
-    min,
-    max,
-    decimals,
-    allowNegative,
-    defaultValue
-  };
+  const options = useMemo(
+    () => ({ min, max, decimals, allowNegative, defaultValue }),
+    [min, max, decimals, allowNegative, defaultValue]
+  );
   return /* @__PURE__ */ jsx(
     Controller,
     {
@@ -823,7 +984,7 @@ function FieldRating({
         const hasHelper = !!(error?.message || helperText);
         return /* @__PURE__ */ jsxs(FormControl8, { error: !!error, ...formControlProps, children: [
           label && /* @__PURE__ */ jsx(FormLabel6, { id: labelId, sx: { mb: 1 }, children: label }),
-          /* @__PURE__ */ jsxs(Box7, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsxs(Box8, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
             /* @__PURE__ */ jsx(
               Rating,
               {
@@ -842,7 +1003,7 @@ function FieldRating({
               }
             ),
             showValue && /* @__PURE__ */ jsxs(
-              Box7,
+              Box8,
               {
                 component: "span",
                 sx: {
@@ -895,9 +1056,9 @@ function FieldSlider({
       render: ({ field, fieldState: { error } }) => {
         const hasHelper = !!(error?.message || helperText);
         return /* @__PURE__ */ jsxs(FormControl8, { error: !!error, fullWidth: true, ...formControlProps, children: [
-          (label || showValue) && /* @__PURE__ */ jsxs(Box7, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+          (label || showValue) && /* @__PURE__ */ jsxs(Box8, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
             label && /* @__PURE__ */ jsx(FormLabel6, { id: labelId, children: label }),
-            showValue && /* @__PURE__ */ jsx(Typography2, { variant: "body2", sx: {
+            showValue && /* @__PURE__ */ jsx(Typography3, { variant: "body2", sx: {
               color: "text.secondary"
             }, children: displayValue(field.value ?? (Array.isArray(other.defaultValue) ? [min, max] : min)) })
           ] }),
@@ -1183,7 +1344,7 @@ function FieldMultiCheckbox({
                   children: label
                 }
               ),
-              /* @__PURE__ */ jsx(Box7, { ...slotProps?.container, children: /* @__PURE__ */ jsx(FormGroup, { row, ...other, children: options.map((option) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box8, { ...slotProps?.container, children: /* @__PURE__ */ jsx(FormGroup, { row, ...other, children: options.map((option) => /* @__PURE__ */ jsx(
                 FormControlLabel,
                 {
                   label: option.label,
@@ -1252,7 +1413,7 @@ function FieldMultiSwitch({
                   children: label
                 }
               ),
-              /* @__PURE__ */ jsx(Box7, { ...slotProps?.container, children: /* @__PURE__ */ jsx(FormGroup, { row, ...other, children: options.map((option) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box8, { ...slotProps?.container, children: /* @__PURE__ */ jsx(FormGroup, { row, ...other, children: options.map((option) => /* @__PURE__ */ jsx(
                 FormControlLabel,
                 {
                   label: option.label,
@@ -1363,9 +1524,9 @@ function FieldCode({
           }
         };
         const hasHelper = !!(error?.message || helperText);
-        return /* @__PURE__ */ jsxs(Box7, { role: "group", "aria-label": `${name} code input`, ...slotProps?.wrapper, children: [
+        return /* @__PURE__ */ jsxs(Box8, { role: "group", "aria-label": `${name} code input`, ...slotProps?.wrapper, children: [
           /* @__PURE__ */ jsx(
-            Box7,
+            Box8,
             {
               sx: {
                 display: "flex",
@@ -1466,7 +1627,7 @@ function UploadPlaceholder({ isDragActive, disabled }) {
       },
       children: [
         /* @__PURE__ */ jsx(
-          Box7,
+          Box8,
           {
             component: "span",
             sx: {
@@ -1483,10 +1644,10 @@ function UploadPlaceholder({ isDragActive, disabled }) {
             children: "\u{1F4C1}"
           }
         ),
-        /* @__PURE__ */ jsx(Typography2, { variant: "body2", component: "span", children: isDragActive ? "Drop files here" : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography3, { variant: "body2", component: "span", children: isDragActive ? "Drop files here" : /* @__PURE__ */ jsxs(Fragment, { children: [
           "Drag & drop files here, or",
           " ",
-          /* @__PURE__ */ jsx(Typography2, { component: "span", variant: "body2", sx: { color: "primary.main", textDecoration: "underline" }, children: "browse" })
+          /* @__PURE__ */ jsx(Typography3, { component: "span", variant: "body2", sx: { color: "primary.main", textDecoration: "underline" }, children: "browse" })
         ] }) })
       ]
     }
@@ -1499,7 +1660,7 @@ function FilePreview({ files, thumbnail, onRemove }) {
     const fileName = getFileName(file);
     const fileSize = file instanceof File ? formatFileSize(file.size) : "";
     return /* @__PURE__ */ jsxs(
-      Box7,
+      Box8,
       {
         sx: {
           p: 1,
@@ -1513,7 +1674,7 @@ function FilePreview({ files, thumbnail, onRemove }) {
         },
         children: [
           previewUrl && /* @__PURE__ */ jsx(
-            Box7,
+            Box8,
             {
               component: "img",
               src: previewUrl,
@@ -1527,13 +1688,22 @@ function FilePreview({ files, thumbnail, onRemove }) {
               }
             }
           ),
-          /* @__PURE__ */ jsxs(Box7, { sx: { flexGrow: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx(Typography2, { variant: "body2", noWrap: true, children: fileName }),
-            fileSize && /* @__PURE__ */ jsx(Typography2, { variant: "caption", sx: {
+          /* @__PURE__ */ jsxs(Box8, { sx: { flexGrow: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(Typography3, { variant: "body2", noWrap: true, children: fileName }),
+            fileSize && /* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: {
               color: "text.secondary"
             }, children: fileSize })
           ] }),
-          onRemove && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onRemove(file), sx: { flexShrink: 0 }, children: "\u2715" })
+          onRemove && /* @__PURE__ */ jsx(
+            IconButton3,
+            {
+              size: "small",
+              onClick: () => onRemove(file),
+              "aria-label": `Remove ${fileName}`,
+              sx: { flexShrink: 0 },
+              children: "\u2715"
+            }
+          )
         ]
       },
       `${fileName}-${index}`
@@ -1542,8 +1712,8 @@ function FilePreview({ files, thumbnail, onRemove }) {
 }
 function RejectionFiles({ rejections }) {
   if (rejections.length === 0) return null;
-  return /* @__PURE__ */ jsx(Box7, { sx: { mt: 2 }, children: rejections.map(({ file, errors }) => /* @__PURE__ */ jsxs(
-    Box7,
+  return /* @__PURE__ */ jsx(Box8, { sx: { mt: 2 }, children: rejections.map(({ file, errors }) => /* @__PURE__ */ jsxs(
+    Box8,
     {
       sx: {
         p: 1,
@@ -1554,8 +1724,8 @@ function RejectionFiles({ rejections }) {
         borderColor: "error.light"
       },
       children: [
-        /* @__PURE__ */ jsx(Typography2, { variant: "body2", color: "error", children: file.name }),
-        errors.map((error) => /* @__PURE__ */ jsx(Typography2, { variant: "caption", color: "error", children: error.message }, error.code))
+        /* @__PURE__ */ jsx(Typography3, { variant: "body2", color: "error", children: file.name }),
+        errors.map((error) => /* @__PURE__ */ jsx(Typography3, { variant: "caption", color: "error", children: error.message }, error.code))
       ]
     },
     file.name
@@ -1615,9 +1785,9 @@ function FieldUploadInner({
   });
   const hasError = !!error;
   const hasFiles = files.length > 0;
-  return /* @__PURE__ */ jsxs(Box7, { ...slotProps?.wrapper, children: [
+  return /* @__PURE__ */ jsxs(Box8, { ...slotProps?.wrapper, children: [
     /* @__PURE__ */ jsxs(
-      Box7,
+      Box8,
       {
         ...getRootProps(),
         sx: {
@@ -1644,8 +1814,8 @@ function FieldUploadInner({
     ),
     /* @__PURE__ */ jsx(RejectionFiles, { rejections }),
     /* @__PURE__ */ jsx(FilePreview, { files, thumbnail, onRemove: handleRemove }),
-    hasFiles && multiple && onRemoveAll && /* @__PURE__ */ jsx(Box7, { sx: { mt: 1, textAlign: "right" }, children: /* @__PURE__ */ jsx(
-      Typography2,
+    hasFiles && multiple && onRemoveAll && /* @__PURE__ */ jsx(Box8, { sx: { mt: 1, textAlign: "right" }, children: /* @__PURE__ */ jsx(
+      Typography3,
       {
         component: "button",
         variant: "caption",
@@ -1732,9 +1902,9 @@ function FieldUploadBoxInner({
   });
   const previewUrl = value ? getPreviewUrl(value) : null;
   const hasError = !!error;
-  return /* @__PURE__ */ jsxs(Box7, { children: [
+  return /* @__PURE__ */ jsxs(Box8, { children: [
     /* @__PURE__ */ jsxs(
-      Box7,
+      Box8,
       {
         ...getRootProps(),
         sx: {
@@ -1760,7 +1930,7 @@ function FieldUploadBoxInner({
         children: [
           /* @__PURE__ */ jsx("input", { ...getInputProps() }),
           !previewUrl && /* @__PURE__ */ jsx(
-            Typography2,
+            Typography3,
             {
               sx: {
                 fontSize: size / 3,
@@ -1835,9 +2005,9 @@ function FieldUploadAvatarInner({
   });
   const previewUrl = value ? getPreviewUrl(value) : null;
   const hasError = !!error;
-  return /* @__PURE__ */ jsxs(Box7, { sx: { display: "inline-flex", flexDirection: "column", alignItems: "center" }, children: [
+  return /* @__PURE__ */ jsxs(Box8, { sx: { display: "inline-flex", flexDirection: "column", alignItems: "center" }, children: [
     /* @__PURE__ */ jsxs(
-      Box7,
+      Box8,
       {
         ...getRootProps(),
         sx: {
@@ -1866,11 +2036,11 @@ function FieldUploadAvatarInner({
                 height: "100%",
                 bgcolor: "background.neutral"
               },
-              children: !previewUrl && /* @__PURE__ */ jsx(Typography2, { sx: { fontSize: size / 4, color: "text.disabled" }, children: "\u{1F4F7}" })
+              children: !previewUrl && /* @__PURE__ */ jsx(Typography3, { sx: { fontSize: size / 4, color: "text.disabled" }, children: "\u{1F4F7}" })
             }
           ),
           /* @__PURE__ */ jsxs(
-            Box7,
+            Box8,
             {
               className: "upload-overlay",
               sx: {
@@ -1886,8 +2056,8 @@ function FieldUploadAvatarInner({
                 transition: theme.transitions.create("opacity")
               },
               children: [
-                /* @__PURE__ */ jsx(Typography2, { sx: { fontSize: size / 6 }, children: "\u{1F4F7}" }),
-                /* @__PURE__ */ jsx(Typography2, { variant: "caption", children: previewUrl ? "Update" : "Upload" })
+                /* @__PURE__ */ jsx(Typography3, { sx: { fontSize: size / 6 }, children: "\u{1F4F7}" }),
+                /* @__PURE__ */ jsx(Typography3, { variant: "caption", children: previewUrl ? "Update" : "Upload" })
               ]
             }
           )
@@ -2070,7 +2240,7 @@ function FieldPhone({
                 input: {
                   startAdornment: !hideCountrySelect && /* @__PURE__ */ jsxs(InputAdornment, { position: "start", children: [
                     /* @__PURE__ */ jsx(
-                      IconButton,
+                      IconButton3,
                       {
                         ref: anchorRef,
                         onClick: handleOpenMenu,
@@ -2082,7 +2252,7 @@ function FieldPhone({
                         "aria-expanded": menuOpen,
                         sx: { mr: -0.5 },
                         children: /* @__PURE__ */ jsx(
-                          Box7,
+                          Box8,
                           {
                             component: "span",
                             sx: {
@@ -2097,7 +2267,7 @@ function FieldPhone({
                       }
                     ),
                     /* @__PURE__ */ jsx(
-                      Typography2,
+                      Typography3,
                       {
                         variant: "body2",
                         sx: {
@@ -2393,7 +2563,7 @@ function FieldCountrySelect({
             isOptionEqualToValue: (option, value) => option.code === value.code,
             renderOption: (props, option) => {
               const { key, ...optionProps } = props;
-              return /* @__PURE__ */ jsxs(Box7, { component: "li", sx: { "& > span": { mr: 1.5, flexShrink: 0 } }, ...optionProps, children: [
+              return /* @__PURE__ */ jsxs(Box8, { component: "li", sx: { "& > span": { mr: 1.5, flexShrink: 0 } }, ...optionProps, children: [
                 /* @__PURE__ */ jsx("span", { style: { fontSize: "1.25rem" }, children: option.flag }),
                 option.label,
                 " (",
@@ -2645,7 +2815,287 @@ var Field = {
   /** Headless editor field with render prop */
   CustomEditor: FieldCustomEditor
 };
+function parseStackFrame(line) {
+  const patterns = [
+    // Named function with file: at functionName (file:line:col)
+    // Also covers the bundler-rewritten form `(file?v=hash:line:col)`: the
+    // lazy `(.+?)` swallows the query string, which `cleanFilePath` strips.
+    /at\s+(?:async\s+)?([^\s(]+)\s+\((.+?):(\d+):(\d+)\)/,
+    // Anonymous at file: at file:line:col
+    /at\s+(.+?):(\d+):(\d+)/
+  ];
+  for (const pattern of patterns) {
+    const match = line.match(pattern);
+    if (match) {
+      const [, funcOrFile, file, lineStr, colStr] = match;
+      const hasFile = colStr !== void 0;
+      const functionName = hasFile ? funcOrFile : null;
+      const filePath = hasFile ? file : funcOrFile;
+      const lineNumber = parseInt(hasFile ? lineStr : file, 10);
+      const columnNumber = parseInt(hasFile ? colStr : lineStr, 10);
+      const isAppCode = !filePath.includes("node_modules") && filePath.includes("src/");
+      return {
+        functionName: functionName || null,
+        filePath: cleanFilePath(filePath),
+        lineNumber: isNaN(lineNumber) ? null : lineNumber,
+        columnNumber: isNaN(columnNumber) ? null : columnNumber,
+        isAppCode
+      };
+    }
+  }
+  return null;
+}
+function cleanFilePath(path) {
+  const cleaned = path.replace(/\?.*$/, "");
+  const srcIndex = cleaned.indexOf("/src/");
+  if (srcIndex !== -1) {
+    return cleaned.slice(srcIndex + 1);
+  }
+  const parts = cleaned.split("/");
+  if (parts.length > 3) {
+    return parts.slice(-3).join("/");
+  }
+  return cleaned;
+}
+function parseStackTrace(stack) {
+  if (!stack) {
+    return { primary: null, frames: [], raw: "" };
+  }
+  const lines = stack.split("\n");
+  const frames = [];
+  for (const line of lines) {
+    const frame = parseStackFrame(line.trim());
+    if (frame) {
+      frames.push(frame);
+    }
+  }
+  const primary = frames.find((f) => f.isAppCode) ?? frames[0] ?? null;
+  return { primary, frames, raw: stack };
+}
+function getErrorLocation(error) {
+  const parsed = parseStackTrace(error.stack);
+  const { primary } = parsed;
+  if (!primary) {
+    return "Unknown location";
+  }
+  const parts = [];
+  if (primary.functionName) {
+    parts.push(`in ${primary.functionName}`);
+  }
+  if (primary.filePath) {
+    const location = primary.lineNumber ? `${primary.filePath}:${primary.lineNumber}` : primary.filePath;
+    parts.push(`(${location})`);
+  }
+  return parts.join(" ") || "Unknown location";
+}
+function DefaultErrorFallback({
+  error,
+  parsedStack,
+  resetErrorBoundary,
+  sx,
+  showDetails
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const shouldShowDetails = showDetails ?? (typeof process !== "undefined" && process.env.NODE_ENV === "development");
+  const handleCopyStack = async () => {
+    try {
+      const text = [
+        `Error: ${error.message}`,
+        `Location: ${getErrorLocation(error)}`,
+        "",
+        "Stack Trace:",
+        parsedStack.raw
+      ].join("\n");
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Box8,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: 200,
+        p: 3,
+        textAlign: "center",
+        ...sx
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography3, { variant: "h6", color: "error", gutterBottom: true, children: "Something went wrong" }),
+        /* @__PURE__ */ jsx(
+          Typography3,
+          {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              mb: 1,
+              maxWidth: 400
+            },
+            children: error.message || "An unexpected error occurred"
+          }
+        ),
+        shouldShowDetails && parsedStack.primary && /* @__PURE__ */ jsxs(
+          Typography3,
+          {
+            variant: "caption",
+            sx: {
+              color: "text.secondary",
+              mb: 2,
+              fontFamily: "monospace"
+            },
+            children: [
+              parsedStack.primary.filePath,
+              parsedStack.primary.lineNumber && `:${parsedStack.primary.lineNumber}`,
+              parsedStack.primary.functionName && ` (${parsedStack.primary.functionName})`
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box8, { sx: { display: "flex", gap: 1, mb: 2 }, children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: resetErrorBoundary, children: "Try Again" }),
+          shouldShowDetails && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              IconButton3,
+              {
+                size: "small",
+                onClick: () => setExpanded(!expanded),
+                "aria-label": expanded ? "Hide stack trace" : "Show stack trace",
+                "aria-expanded": expanded,
+                sx: {
+                  transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                  transition: "transform 0.2s"
+                },
+                children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(IconButton3, { size: "small", onClick: handleCopyStack, title: "Copy error details", children: /* @__PURE__ */ jsx(CopyIcon, { fontSize: "small" }) }),
+            copied && /* @__PURE__ */ jsx(
+              Typography3,
+              {
+                variant: "caption",
+                sx: {
+                  color: "success.main",
+                  alignSelf: "center"
+                },
+                children: "Copied!"
+              }
+            )
+          ] })
+        ] }),
+        shouldShowDetails && /* @__PURE__ */ jsx(Collapse, { in: expanded, children: /* @__PURE__ */ jsx(
+          Box8,
+          {
+            sx: {
+              mt: 1,
+              p: 2,
+              // Theme-aware: `grey.100` is a light value in both modes,
+              // which put dark text on a near-white block in dark mode.
+              bgcolor: "action.hover",
+              borderRadius: 1,
+              maxWidth: 600,
+              maxHeight: 300,
+              overflow: "auto",
+              textAlign: "left"
+            },
+            children: /* @__PURE__ */ jsx(Typography3, { variant: "caption", component: "pre", sx: { fontFamily: "monospace", m: 0 }, children: parsedStack.frames.map((frame, i) => /* @__PURE__ */ jsxs(
+              Box8,
+              {
+                component: "span",
+                sx: {
+                  display: "block",
+                  color: frame.isAppCode ? "error.main" : "text.secondary",
+                  fontWeight: frame.isAppCode ? 600 : 400
+                },
+                children: [
+                  frame.functionName || "(anonymous)",
+                  " at ",
+                  frame.filePath || "unknown",
+                  frame.lineNumber && `:${frame.lineNumber}`
+                ]
+              },
+              i
+            )) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    const parsedStack = parseStackTrace(error.stack);
+    this.setState({ errorInfo });
+    this.props.onError?.(error, errorInfo, parsedStack);
+  }
+  componentDidUpdate(prevProps) {
+    const { resetKeys } = this.props;
+    const { hasError } = this.state;
+    if (hasError && resetKeys) {
+      const previous = prevProps.resetKeys;
+      const hasKeyChanged = previous === void 0 || previous.length !== resetKeys.length || resetKeys.some((key, index) => key !== previous[index]);
+      if (hasKeyChanged) {
+        this.resetErrorBoundary();
+      }
+    }
+  }
+  resetErrorBoundary = () => {
+    this.props.onReset?.();
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null
+    });
+  };
+  render() {
+    const { hasError, error, errorInfo } = this.state;
+    const { children, fallback, sx, showDetails } = this.props;
+    if (hasError && error) {
+      const parsedStack = parseStackTrace(error.stack);
+      const fallbackProps = {
+        error,
+        errorInfo,
+        parsedStack,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (typeof fallback === "function") {
+        return fallback(fallbackProps);
+      }
+      if (fallback) {
+        return fallback;
+      }
+      return /* @__PURE__ */ jsx(DefaultErrorFallback, { ...fallbackProps, sx, showDetails });
+    }
+    return children;
+  }
+};
+function useErrorBoundary() {
+  const [, setError] = useState(null);
+  return (error) => {
+    setError(() => {
+      throw error;
+    });
+  };
+}
 
-export { Field, FieldAutocomplete, FieldCheckbox, FieldCode, FieldCountrySelect, FieldCustomEditor, FieldDatePicker, FieldDateTimePicker, FieldEditor, FieldMultiCheckbox, FieldMultiSelect, FieldMultiSwitch, FieldNumber, FieldPhone, FieldRadio, FieldRating, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTimePicker, FieldUpload, FieldUploadAvatar, FieldUploadBox, SearchInput, clampNumber, createNumberInputHandlers, parseNumber, roundToDecimals, transformForDisplay, transformOnBlur, transformOnChange };
-//# sourceMappingURL=chunk-KTCWPGON.js.map
-//# sourceMappingURL=chunk-KTCWPGON.js.map
+export { EmptyContent, ErrorBoundary, Field, FieldAutocomplete, FieldCheckbox, FieldCode, FieldCountrySelect, FieldCustomEditor, FieldDatePicker, FieldDateTimePicker, FieldEditor, FieldMultiCheckbox, FieldMultiSelect, FieldMultiSwitch, FieldNumber, FieldPhone, FieldRadio, FieldRating, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTimePicker, FieldUpload, FieldUploadAvatar, FieldUploadBox, LoadingEmptyContent, SearchEmptyContent, SearchInput, clampNumber, createNumberInputHandlers, getErrorLocation, parseNumber, parseStackTrace, roundToDecimals, transformForDisplay, transformOnBlur, transformOnChange, useErrorBoundary };
+//# sourceMappingURL=chunk-GMIE6III.js.map
+//# sourceMappingURL=chunk-GMIE6III.js.map