@rufous/ui 0.1.83 → 0.1.85

package/dist/main.cjs

@@ -28650,6 +28650,7 @@ __export(main_exports, {
   BaseDialog: () => BaseDialog_default,
   Box: () => Box,
   Breadcrumbs: () => Breadcrumbs,
+  CameraIcon: () => cameraIcon_default,
   CancelButton: () => cancelButton_default,
   Card: () => Card,
   CardActions: () => CardActions,
@@ -28684,6 +28685,7 @@ __export(main_exports, {
   Grow: () => Grow,
   HelpOutlinedIcon: () => helpOutlinedIcon_default,
   HierarchyIcon: () => hierarchyIcon_default,
+  ImageField: () => ImageField,
   InactiveGroupIcon: () => inactiveGroupIcon_default,
   IndustryIcon: () => industryIcon_default,
   InvoiceIcon: () => invoiceIcon_default,
@@ -28747,6 +28749,7 @@ __export(main_exports, {
   SuspendUserIcon: () => suspendUserIcon_default,
   Switch: () => Switch,
   Tab: () => Tab,
+  TabPanel: () => TabPanel,
   Tabs: () => Tabs,
   TechnicalSkillsIcon: () => technicalSkillsIcon_default,
   TextField: () => TextField,
@@ -29829,8 +29832,23 @@ var React56 = __toESM(require("react"), 1);
 var QualificationsIcon = ({ color: color2 = "#3a3a3a", ...props }) => /* @__PURE__ */ React56.createElement("svg", { width: "24", height: "17", viewBox: "0 0 24 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React56.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.096 0.920005L1.422 5.25601C1.29964 5.31928 1.18771 5.40089 1.09003 5.49801C0.982986 5.61801 0.923828 5.7732 0.923828 5.934C0.923828 6.09481 0.982986 6.25 1.09003 6.37001C1.18134 6.47434 1.29472 6.55701 1.422 6.61201L5.35498 8.29801V12.829C5.35246 12.8915 5.36648 12.9535 5.39563 13.0088C5.42478 13.0641 5.46804 13.1108 5.521 13.144L11.909 16.23C11.9351 16.2419 11.9634 16.248 11.992 16.248C12.0206 16.248 12.049 16.2419 12.075 16.23L18.482 13.144C18.5377 13.1137 18.5831 13.0677 18.6127 13.0116C18.6422 12.9556 18.6545 12.892 18.648 12.829V8.29901L21.842 7.04001C21.6965 8.80938 21.6882 10.5874 21.817 12.358C21.817 12.843 22.217 12.843 22.217 12.358C22.4317 10.5206 22.4729 8.66711 22.34 6.82201C22.5425 6.68685 22.7337 6.5357 22.912 6.37001C23.019 6.25 23.0782 6.09481 23.0782 5.934C23.0782 5.7732 23.019 5.61801 22.912 5.49801C22.8142 5.40101 22.7023 5.31941 22.58 5.25601L12.905 0.919005C12.3228 0.692932 11.6771 0.692932 11.095 0.919005L11.096 0.920005ZM12.696 1.86701L21.785 5.94101C21.837 5.96401 21.837 5.98601 21.872 6.00901C21.838 6.03201 21.838 6.05501 21.785 6.07701L17.485 8.01201C17.451 8.01201 17.398 8.01201 17.385 8.05701L12.702 10.151C12.253 10.3102 11.763 10.3102 11.314 10.151L6.62201 8.03401C6.58701 8.03401 6.56998 8.01101 6.55298 8.01101L2.22198 6.07601C2.16898 6.05301 2.16901 6.03101 2.13501 6.00801C2.16901 5.98501 2.16898 5.962 2.22198 5.962L11.31 1.86201C11.5331 1.78448 11.7678 1.74624 12.004 1.74901C12.239 1.7475 12.4725 1.78709 12.694 1.866L12.696 1.86701ZM17.665 8.657V12.482L12.002 15.272L6.33899 12.728V8.90301L11.156 10.926C11.4239 11.0384 11.7115 11.0963 12.002 11.0963C12.2925 11.0963 12.5801 11.0384 12.848 10.926L17.248 8.95501L17.665 8.657Z", fill: color2, stroke: color2, strokeWidth: "0.2" }));
 var qualificationsIcon_default = QualificationsIcon;
 
-// lib/Buttons/addButton.tsx
+// lib/icons/cameraIcon.tsx
 var React57 = __toESM(require("react"), 1);
+var CameraIcon = ({ color: color2 = "#ffffff", ...props }) => /* @__PURE__ */ React57.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React57.createElement(
+  "path",
+  {
+    d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z",
+    stroke: color2,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none"
+  }
+), /* @__PURE__ */ React57.createElement("circle", { cx: "12", cy: "13", r: "4", stroke: color2, strokeWidth: "2", fill: "none" }));
+var cameraIcon_default = CameraIcon;
+
+// lib/Buttons/addButton.tsx
+var React58 = __toESM(require("react"), 1);
 
 // lib/utils/sx.ts
 var import_react13 = require("react");
@@ -29879,15 +29897,15 @@ function useSx(sx) {
 // lib/Buttons/addButton.tsx
 var AddButton = ({ children, sx, className, ...props }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React57.createElement("button", { className: ["btn add-btn", sxClass, className].filter(Boolean).join(" "), ...props }, "+ ", children);
+  return /* @__PURE__ */ React58.createElement("button", { className: ["btn add-btn", sxClass, className].filter(Boolean).join(" "), ...props }, "+ ", children);
 };
 var addButton_default = AddButton;
 
 // lib/Buttons/submitButton.tsx
-var React59 = __toESM(require("react"), 1);
+var React60 = __toESM(require("react"), 1);
 
 // lib/Progress/circularProgress.tsx
-var React58 = __toESM(require("react"), 1);
+var React59 = __toESM(require("react"), 1);
 var CircularProgress = ({
   size: size3 = 50,
   color: color2 = "#a81c08",
@@ -29896,14 +29914,14 @@ var CircularProgress = ({
   ...props
 }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     "div",
     {
       className: ["rufous-loader", sxClass, className].filter(Boolean).join(" "),
       style: { width: size3, height: size3 },
       ...props
     },
-    /* @__PURE__ */ React58.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React59.createElement(
       "circle",
       {
         className: "rufous-loader-circle",
@@ -29925,7 +29943,7 @@ var CircularProgressIcon = ({
   className
 }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React58.createElement("div", { className: ["rufous-loader rufous-loader--with-icon", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height: size3 } }, /* @__PURE__ */ React58.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement("div", { className: ["rufous-loader rufous-loader--with-icon", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height: size3 } }, /* @__PURE__ */ React59.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React59.createElement(
     "circle",
     {
       className: "rufous-loader-circle",
@@ -29934,7 +29952,7 @@ var CircularProgressIcon = ({
       r: "45",
       stroke: color2
     }
-  )), /* @__PURE__ */ React58.createElement("div", { className: "rufous-loader__icon-wrap" }, /* @__PURE__ */ React58.createElement("div", { className: spinIcon ? "rufous-loader__icon--spin-y" : void 0 }, icon)));
+  )), /* @__PURE__ */ React59.createElement("div", { className: "rufous-loader__icon-wrap" }, /* @__PURE__ */ React59.createElement("div", { className: spinIcon ? "rufous-loader__icon--spin-y" : void 0 }, icon)));
 };
 
 // lib/Buttons/submitButton.tsx
@@ -29950,8 +29968,8 @@ var SubmitButton = ({
   ...props
 }) => {
   const sxClass = useSx(sx);
-  const [loading, setLoading] = React59.useState(false);
-  const clickTimeout = React59.useRef(null);
+  const [loading, setLoading] = React60.useState(false);
+  const clickTimeout = React60.useRef(null);
   const handleClick = async (e) => {
     const currentTarget = e.currentTarget;
     if (loading) return;
@@ -29986,7 +30004,7 @@ var SubmitButton = ({
       }
     }
   };
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "button",
     {
       ...props,
@@ -29996,29 +30014,29 @@ var SubmitButton = ({
       onClick: handleClick,
       onDoubleClick: handleDoubleClick
     },
-    /* @__PURE__ */ React59.createElement("span", { className: "btn-content" }, children, (loading || isLoading) && /* @__PURE__ */ React59.createElement("span", { className: "btn-loader" }, /* @__PURE__ */ React59.createElement(circularProgress_default, { size: 18, color: props.disabled || loading || isLoading ? "#00000042" : void 0 })))
+    /* @__PURE__ */ React60.createElement("span", { className: "btn-content" }, children, (loading || isLoading) && /* @__PURE__ */ React60.createElement("span", { className: "btn-loader" }, /* @__PURE__ */ React60.createElement(circularProgress_default, { size: 18, color: props.disabled || loading || isLoading ? "#00000042" : void 0 })))
   );
 };
 var submitButton_default = SubmitButton;
 
 // lib/Buttons/cancelButton.tsx
-var React60 = __toESM(require("react"), 1);
+var React61 = __toESM(require("react"), 1);
 var CancelButton = ({ children, sx, className, ...props }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React60.createElement("button", { className: ["btn cancel-btn", sxClass, className].filter(Boolean).join(" "), ...props }, children);
+  return /* @__PURE__ */ React61.createElement("button", { className: ["btn cancel-btn", sxClass, className].filter(Boolean).join(" "), ...props }, children);
 };
 var cancelButton_default = CancelButton;
 
 // lib/Buttons/stdButton.tsx
-var React61 = __toESM(require("react"), 1);
+var React62 = __toESM(require("react"), 1);
 var StandardButton = ({ children, sx, className, ...props }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React61.createElement("button", { className: ["btn standard-btn", sxClass, className].filter(Boolean).join(" "), ...props }, children);
+  return /* @__PURE__ */ React62.createElement("button", { className: ["btn standard-btn", sxClass, className].filter(Boolean).join(" "), ...props }, children);
 };
 var stdButton_default = StandardButton;
 
 // lib/Dialogs/BaseDialog.tsx
-var React62 = __toESM(require("react"), 1);
+var React63 = __toESM(require("react"), 1);
 var import_react14 = require("react");
 var import_lucide_react = require("lucide-react");
 var BaseDialog = ({
@@ -30053,7 +30071,7 @@ var BaseDialog = ({
   const sxClass = useSx(sx);
   if (!open) return null;
   const isButtonLoading = isSubmitting || loading;
-  const renderButtons = () => /* @__PURE__ */ React62.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React62.createElement(
+  const renderButtons = () => /* @__PURE__ */ React63.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React63.createElement(
     "button",
     {
       className: "btn-cancel",
@@ -30061,7 +30079,7 @@ var BaseDialog = ({
       disabled: isLoading || isButtonLoading
     },
     cancelText
-  ), onConfirm && /* @__PURE__ */ React62.createElement(
+  ), onConfirm && /* @__PURE__ */ React63.createElement(
     "button",
     {
       className: "btn-confirm",
@@ -30073,10 +30091,10 @@ var BaseDialog = ({
         setIsSubmitting(false);
       }
     },
-    /* @__PURE__ */ React62.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
-    isButtonLoading && /* @__PURE__ */ React62.createElement("span", { className: "spinner", style: { position: "absolute" } })
+    /* @__PURE__ */ React63.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
+    isButtonLoading && /* @__PURE__ */ React63.createElement("span", { className: "spinner", style: { position: "absolute" } })
   ));
-  return /* @__PURE__ */ React62.createElement("div", { className: `dialog-overlay ${size3 === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement("div", { className: `dialog-overlay ${size3 === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React63.createElement(
     "div",
     {
       className: ["dialog-container", size3 ? `size-${size3}` : "", sxClass, className].filter(Boolean).join(" "),
@@ -30085,15 +30103,15 @@ var BaseDialog = ({
         minHeight
       }
     },
-    /* @__PURE__ */ React62.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React62.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React62.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React63.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React63.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React63.createElement(
       import_lucide_react.X,
       {
         size: 18,
         color: themeConfig?.icon || "#666666"
       }
     ))),
-    /* @__PURE__ */ React62.createElement("div", { className: "dialog-divider" }),
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React63.createElement(
       "div",
       {
         className: "dialog-body",
@@ -30104,7 +30122,7 @@ var BaseDialog = ({
       },
       children
     ),
-    /* @__PURE__ */ React62.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React63.createElement("div", { className: "dialog-divider" }),
     customButtons || renderButtons()
   ));
 };
@@ -30627,10 +30645,25 @@ var MONTHS = [
   "November",
   "December"
 ];
+var MONTHS_SHORT = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
 var formatDisplay = (d, fmt = "MM/DD/YYYY") => {
   const mm = String(d.getMonth() + 1).padStart(2, "0");
   const dd = String(d.getDate()).padStart(2, "0");
   const yyyy = String(d.getFullYear());
+  const day = d.getDate();
   switch (fmt) {
     case "DD/MM/YYYY":
       return `${dd}/${mm}/${yyyy}`;
@@ -30642,13 +30675,49 @@ var formatDisplay = (d, fmt = "MM/DD/YYYY") => {
       return `${mm}-${dd}-${yyyy}`;
     case "YYYY/MM/DD":
       return `${yyyy}/${mm}/${dd}`;
+    case "DD MMM YYYY":
+      return `${dd} ${MONTHS_SHORT[d.getMonth()]} ${yyyy}`;
+    case "MMM DD, YYYY":
+      return `${MONTHS_SHORT[d.getMonth()]} ${dd}, ${yyyy}`;
+    case "DD MMMM YYYY":
+      return `${dd} ${MONTHS[d.getMonth()]} ${yyyy}`;
+    case "MMMM DD, YYYY":
+      return `${MONTHS[d.getMonth()]} ${dd}, ${yyyy}`;
     case "MM/DD/YYYY":
     default:
       return `${mm}/${dd}/${yyyy}`;
   }
 };
 var formatTimeDisplay = (h, m, ampm) => `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")} ${ampm}`;
+var parseMonthName = (name) => {
+  const lower = name.toLowerCase();
+  let idx = MONTHS.findIndex((m) => m.toLowerCase() === lower);
+  if (idx >= 0) return idx;
+  idx = MONTHS_SHORT.findIndex((m) => m.toLowerCase() === lower);
+  return idx;
+};
 var parseDisplay = (str, fmt = "MM/DD/YYYY") => {
+  if (fmt === "DD MMM YYYY" || fmt === "DD MMMM YYYY") {
+    const parts2 = str.split(" ");
+    if (parts2.length !== 3) return null;
+    const dd2 = parseInt(parts2[0], 10);
+    const mm2 = parseMonthName(parts2[1]);
+    const yyyy2 = parseInt(parts2[2], 10);
+    if (isNaN(dd2) || mm2 < 0 || isNaN(yyyy2) || yyyy2 < 1e3) return null;
+    const d2 = new Date(yyyy2, mm2, dd2);
+    return isNaN(d2.getTime()) ? null : d2;
+  }
+  if (fmt === "MMM DD, YYYY" || fmt === "MMMM DD, YYYY") {
+    const cleaned = str.replace(",", "");
+    const parts2 = cleaned.split(" ").filter(Boolean);
+    if (parts2.length !== 3) return null;
+    const mm2 = parseMonthName(parts2[0]);
+    const dd2 = parseInt(parts2[1], 10);
+    const yyyy2 = parseInt(parts2[2], 10);
+    if (mm2 < 0 || isNaN(dd2) || isNaN(yyyy2) || yyyy2 < 1e3) return null;
+    const d2 = new Date(yyyy2, mm2, dd2);
+    return isNaN(d2.getTime()) ? null : d2;
+  }
   const sep = str.includes("/") ? "/" : "-";
   const parts = str.split(sep);
   if (parts.length !== 3) return null;
@@ -30833,27 +30902,89 @@ var CalendarBody = ({
   dayCells,
   onDayClick,
   onPrev,
-  onNext
-}) => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-date-picker__month-label" }, MONTHS[viewMonth], " ", viewYear), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__nav" }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A"))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react19.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
-  if (day === null) return /* @__PURE__ */ import_react19.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
-  const cellDate = new Date(viewYear, viewMonth, day);
-  const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
-  const isToday = isSameDay(cellDate, todayDate);
-  return /* @__PURE__ */ import_react19.default.createElement(
+  onNext,
+  onMonthSelect,
+  onYearSelect
+}) => {
+  const [pickerView, setPickerView] = (0, import_react19.useState)("calendar");
+  const handleMonthClick = () => {
+    setPickerView(pickerView === "month" ? "calendar" : "month");
+  };
+  const handleYearClick = () => {
+    setPickerView(pickerView === "year" ? "calendar" : "year");
+  };
+  const handleMonthPick = (month) => {
+    onMonthSelect(month);
+    setPickerView("calendar");
+  };
+  const handleYearPick = (year) => {
+    onYearSelect(year);
+    setPickerView("calendar");
+  };
+  const currentYear = todayDate.getFullYear();
+  const yearStart = viewYear - 6;
+  const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ import_react19.default.createElement(
+    "span",
+    {
+      className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
+      onClick: handleMonthClick
+    },
+    MONTHS[viewMonth]
+  ), /* @__PURE__ */ import_react19.default.createElement(
+    "span",
+    {
+      className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
+      onClick: handleYearClick
+    },
+    viewYear
+  )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
-      key: day,
+      key: m,
       type: "button",
       className: [
-        "rf-date-picker__day",
-        isSelected ? "rf-date-picker__day--selected" : "",
-        isToday && !isSelected ? "rf-date-picker__day--today" : ""
+        "rf-date-picker__month-cell",
+        idx === viewMonth ? "rf-date-picker__month-cell--selected" : "",
+        idx === todayDate.getMonth() && viewYear === currentYear ? "rf-date-picker__month-cell--current" : ""
       ].filter(Boolean).join(" "),
-      onClick: () => onDayClick(day)
+      onClick: () => handleMonthPick(idx)
     },
-    day
-  );
-})));
+    m
+  ))), pickerView === "year" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ import_react19.default.createElement(
+    "button",
+    {
+      key: y,
+      type: "button",
+      className: [
+        "rf-date-picker__year-cell",
+        y === viewYear ? "rf-date-picker__year-cell--selected" : "",
+        y === currentYear ? "rf-date-picker__year-cell--current" : ""
+      ].filter(Boolean).join(" "),
+      onClick: () => handleYearPick(y)
+    },
+    y
+  ))), pickerView === "calendar" && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react19.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
+    if (day === null) return /* @__PURE__ */ import_react19.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
+    const cellDate = new Date(viewYear, viewMonth, day);
+    const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
+    const isToday = isSameDay(cellDate, todayDate);
+    return /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        key: day,
+        type: "button",
+        className: [
+          "rf-date-picker__day",
+          isSelected ? "rf-date-picker__day--selected" : "",
+          isToday && !isSelected ? "rf-date-picker__day--today" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => onDayClick(day)
+      },
+      day
+    );
+  }))));
+};
 var DateField = ({
   label,
   value,
@@ -30911,7 +31042,9 @@ var DateField = ({
   const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
   const AMPMS = ["AM", "PM"];
   const containerRef = (0, import_react19.useRef)(null);
-  const inputId = (0, import_react19.useRef)(`rf-df-${Math.random().toString(36).substr(2, 9)}`).current;
+  const pickerRef = (0, import_react19.useRef)(null);
+  const [dropUp, setDropUp] = (0, import_react19.useState)(false);
+  const inputId = (0, import_react19.useRef)(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
   (0, import_react19.useEffect)(() => {
     if (value === void 0) return;
     if (!value) {
@@ -30943,6 +31076,13 @@ var DateField = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
+  (0, import_react19.useEffect)(() => {
+    if (!open || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const pickerHeight = 400;
+    setDropUp(spaceBelow < pickerHeight && rect.top > pickerHeight);
+  }, [open]);
   const commitDate = (0, import_react19.useCallback)((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
@@ -31135,9 +31275,11 @@ var DateField = ({
   ), open && !disabled && /* @__PURE__ */ import_react19.default.createElement(
     "div",
     {
+      ref: pickerRef,
       className: [
         "rf-date-picker",
-        isSideVariant ? "rf-date-picker--side" : ""
+        isSideVariant ? "rf-date-picker--side" : "",
+        dropUp ? "rf-date-picker--drop-up" : ""
       ].filter(Boolean).join(" "),
       onMouseDown: (e) => e.preventDefault()
     },
@@ -31151,7 +31293,9 @@ var DateField = ({
         dayCells,
         onDayClick: handleDayClick,
         onPrev: prevMonth,
-        onNext: nextMonth
+        onNext: nextMonth,
+        onMonthSelect: setViewMonth,
+        onYearSelect: setViewYear
       }
     ), type === "datetime" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement(
       SpinnerPanel,
@@ -31223,7 +31367,7 @@ var MONTHS2 = [
   "November",
   "December"
 ];
-var MONTHS_SHORT = [
+var MONTHS_SHORT2 = [
   "Jan",
   "Feb",
   "Mar",
@@ -31260,14 +31404,14 @@ var dateToISO = (d) => {
   const dd = String(d.getDate()).padStart(2, "0");
   return `${y}-${mo}-${dd}`;
 };
-var formatShort = (d) => `${String(d.getDate()).padStart(2, "0")} ${MONTHS_SHORT[d.getMonth()]} ${d.getFullYear()}`;
+var formatShort = (d) => `${String(d.getDate()).padStart(2, "0")} ${MONTHS_SHORT2[d.getMonth()]} ${d.getFullYear()}`;
 var parseInputDate = (str) => {
   const s = str.trim();
   if (!s) return null;
   const shortMatch = s.match(/^(\d{1,2})\s+([A-Za-z]+)\s+(\d{4})$/);
   if (shortMatch) {
     const day = parseInt(shortMatch[1], 10);
-    const monthIdx = MONTHS_SHORT.findIndex((m) => m.toLowerCase() === shortMatch[2].toLowerCase());
+    const monthIdx = MONTHS_SHORT2.findIndex((m) => m.toLowerCase() === shortMatch[2].toLowerCase());
     const year = parseInt(shortMatch[3], 10);
     if (monthIdx !== -1 && day >= 1 && day <= 31 && year >= 1e3) {
       const d = new Date(year, monthIdx, day);
@@ -32218,13 +32362,13 @@ var Autocomplete = import_react21.default.forwardRef(AutocompleteInner);
 Autocomplete.displayName = "Autocomplete";
 
 // lib/Progress/RufousLogoLoader.tsx
-var React70 = __toESM(require("react"), 1);
+var React71 = __toESM(require("react"), 1);
 var _uid = 0;
 var RufousLogoLoader = ({ size: size3 = 80, sx, className }) => {
-  const clipId = React70.useRef(`rll-${++_uid}`).current;
+  const clipId = React71.useRef(`rll-${++_uid}`).current;
   const height = size3 * (38.795 / 54.585);
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React70.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height } }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height } }, /* @__PURE__ */ React71.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -32233,14 +32377,14 @@ var RufousLogoLoader = ({ size: size3 = 80, sx, className }) => {
       height,
       className: "rufous-logo-loader__svg"
     },
-    /* @__PURE__ */ React70.createElement("defs", null, /* @__PURE__ */ React70.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React71.createElement("defs", null, /* @__PURE__ */ React71.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React71.createElement(
       "path",
       {
         transform: "translate(2208 18.205)",
         d: "M.7,38.8a3.783,3.783,0,0,1-.5-.045l-.031,0A.26.26,0,0,1,0,38.564a.279.279,0,0,1,.14-.2c.222-.126.45-.251.671-.371l.047-.026c.357-.194.8-.435,1.209-.685.783-.479,1.565-.993,2.32-1.489l.033-.022.218-.143.49-.32c.575-.374,1.226-.8,1.824-1.241.98-.726,1.834-1.407,2.611-2.081a22.444,22.444,0,0,0,1.783-1.774A14.2,14.2,0,0,0,12.5,28.749l.012-.016a15.8,15.8,0,0,0,1.151-1.8,10.351,10.351,0,0,0,.586-1.511l0-.011.092-.278a4.425,4.425,0,0,0,.14-.583l.007-.036c.024-.119.048-.243.079-.363a4.639,4.639,0,0,0-.034-2.566c-.064-.212-.126-.43-.184-.636l-.008-.028c-.111-.391-.225-.8-.369-1.181a8.71,8.71,0,0,0-2.279-3.24,14.363,14.363,0,0,0-3.239-2.326c-.75-.4-1.553-.727-2.329-1.046L6.1,13.114l-.157-.065c-.294-.122-.6-.221-.9-.318l-.025-.008c-.19-.061-.427-.136-.649-.218-.108-.04-.265-.172-.252-.229a.7.7,0,0,1,.235-.4.915.915,0,0,1,.449-.112c.383-.029.77-.063,1.165-.1.969-.085,1.971-.174,2.962-.181h.119a13.145,13.145,0,0,1,2.907.315,11.888,11.888,0,0,1,3.128,1.123,10.286,10.286,0,0,1,2.3,1.554.92.92,0,0,1,.273.4,12.722,12.722,0,0,1,.458,3.3c-.009,1.494-.014,2.867-.014,4.2,0,.309.013.588.039.852a1.013,1.013,0,0,0,.078.26l0,.01c.027.067.051.129.077.207.029-.064.054-.116.076-.161l.009-.017.006-.012a.823.823,0,0,0,.076-.189c.051-.247.1-.494.164-.767.136-.618.276-1.257.359-1.9a24.362,24.362,0,0,0,0-6.777,13.01,13.01,0,0,0-.559-2.1c-.061-.185-.125-.382-.187-.579a9.42,9.42,0,0,0-.583-1.469c-.367-.727-.786-1.449-1.184-2.126a9.376,9.376,0,0,0-.643-.918c-.076-.1-.151-.2-.224-.3L15.548,6.3a8.128,8.128,0,0,0-.865-1.057,32.021,32.021,0,0,0-2.466-2.183,12.673,12.673,0,0,0-1.905-1.188c-.48-.256-1-.485-1.462-.687-.221-.1-.457-.2-.683-.306a.663.663,0,0,1-.11-.071L8.039.795c-.027-.02-.058-.043-.1-.069L8.062.667,8.108.644a1.786,1.786,0,0,1,.27-.12A11.679,11.679,0,0,1,11.866,0a13.332,13.332,0,0,1,1.769.121A13.927,13.927,0,0,1,15.9.693l.471.147a10.775,10.775,0,0,1,1.656.658,9.622,9.622,0,0,1,1.768,1.041,32.024,32.024,0,0,1,3.092,2.717,25.62,25.62,0,0,1,2.245,2.829l.084.117c.617.86,1.171,1.777,1.678,2.641.255.435.484.9.687,1.3.14.281.285.572.436.854.262.491.534.977.835,1.516l.005.01q.169.3.337.6c.064.116.13.232.2.347l.027.047c.12.212.244.431.357.651a8.518,8.518,0,0,0,2.121,2.695c.065.024.137.054.212.086l.013.006a1.268,1.268,0,0,0,.376.123.087.087,0,0,0,.063-.02.209.209,0,0,0,.083-.151c0-.083-.08-.153-.157-.22a.694.694,0,0,1-.135-.142c-.134-.216-.273-.436-.407-.649l-.063-.1c-.373-.587-.8-1.251-1.157-1.923s-.666-1.373-.964-2.057l0-.008q-.123-.284-.247-.564a1.707,1.707,0,0,1,.239-1.554l.026-.046.005-.009A12.918,12.918,0,0,1,31.408,9.3,7.814,7.814,0,0,1,33.75,7.612a5.391,5.391,0,0,1,2.218-.444,11.369,11.369,0,0,1,1.882.186,9.211,9.211,0,0,1,2.845,1.022c.138.071.261.135.373.188a4.155,4.155,0,0,0,1.849.464h.093c1.993-.052,4-.14,5.95-.224l.846-.036c.9-.038,1.808-.066,2.682-.093L52.7,8.67l1.007-.031h.041a1.787,1.787,0,0,1,.73.163c.1.051.109.256.109.318,0,.081-.147.169-.257.175-.466.028-.994.043-1.485.043a37.855,37.855,0,0,0-6.3.577A9.221,9.221,0,0,0,42.7,11.3a7.884,7.884,0,0,0-1.565,1.5c-.593.743-1.116,1.545-1.621,2.321l-.121.185c-.228.35-.435.709-.662,1.109l-.041.071c-.136.236-.276.481-.42.717l-.007.012c-.349.572-.709,1.162-1.1,1.716l-.216.307-.01.014a21.585,21.585,0,0,1-1.451,1.907c-1.317,1.485-2.538,2.8-3.734,4.006a30.822,30.822,0,0,1-2.5,2.207c-.548.446-1.139.86-1.71,1.26l-.01.007q-.254.177-.5.355c-.536.379-1.109.78-1.7,1.157-.545.35-1.143.71-1.828,1.1-.842.483-1.586.9-2.275,1.26-.271.144-.553.272-.868.412-.13.058-.3.135-.467.213a6.838,6.838,0,0,1-1.18.3,5.079,5.079,0,0,1,.647-.771l.008-.008c.132-.136.251-.26.365-.393l.048-.056c.566-.667,1.151-1.357,1.7-2.059s1.126-1.439,1.649-2.2c.4-.579.749-1.2,1.134-1.888l.016-.028c.406-.734.826-1.493,1.181-2.266.274-.6.733-1.787.866-2.189l.023-.07c.13-.389.215-.646-.013-.916a.369.369,0,0,1-.041.031l0,0c-.028.021-.055.041-.058.065a2.307,2.307,0,0,1-.146.5,5.257,5.257,0,0,1-.374.709c-.281.468-.536.959-.782,1.434-.2.385-.379.731-.57,1.069a20.042,20.042,0,0,1-1.161,1.871,30.689,30.689,0,0,1-1.985,2.531c-.74.821-1.567,1.648-2.6,2.6a21.448,21.448,0,0,1-2.1,1.669c-.85.606-1.754,1.2-2.688,1.768a17.867,17.867,0,0,1-1.993,1.037c-.994.445-2.066.891-3.185,1.324a12.127,12.127,0,0,1-1.714.514c-.955.213-1.969.413-3.1.611-1.023.18-2.054.328-2.927.449A1.41,1.41,0,0,1,.7,38.8ZM37.945,10.58l-.007,0a.583.583,0,0,0-.223.048.677.677,0,0,0-.437.555.637.637,0,0,0,.426.527.621.621,0,0,0,.209.046h.016a.72.72,0,0,0,.464-.194.676.676,0,0,0,.194-.282l0-.011,0-.005,0-.006,0-.009a.415.415,0,0,0,.014-.109.734.734,0,0,0-.657-.56Z"
       }
     ))),
-    /* @__PURE__ */ React70.createElement("g", { transform: "translate(-123.275 -24)" }, /* @__PURE__ */ React70.createElement("g", { transform: "translate(-2084.725 5.795)", clipPath: `url(#${clipId})` }, /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-1", width: "40", height: "6", transform: "translate(2208 58) rotate(-90)", fill: "#d07f6f" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-2", width: "40", height: "6", transform: "translate(2214 58) rotate(-90)", fill: "#c66958" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-3", width: "40", height: "7", transform: "translate(2220 58) rotate(-90)", fill: "#bb5341" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-4", width: "40", height: "6", transform: "translate(2227 58) rotate(-90)", fill: "#b03a28" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-5", width: "40", height: "6", transform: "translate(2233 58) rotate(-90)", fill: "#a41b06" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-6", width: "40", height: "6", transform: "translate(2239 58) rotate(-90)", fill: "#8e1604" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-7", width: "40", height: "6", transform: "translate(2245 58) rotate(-90)", fill: "#791103" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-8", width: "40", height: "5", transform: "translate(2251 58) rotate(-90)", fill: "#640c02" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-9", width: "40", height: "7", transform: "translate(2256 58) rotate(-90)", fill: "#500801" })))
+    /* @__PURE__ */ React71.createElement("g", { transform: "translate(-123.275 -24)" }, /* @__PURE__ */ React71.createElement("g", { transform: "translate(-2084.725 5.795)", clipPath: `url(#${clipId})` }, /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-1", width: "40", height: "6", transform: "translate(2208 58) rotate(-90)", fill: "#d07f6f" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-2", width: "40", height: "6", transform: "translate(2214 58) rotate(-90)", fill: "#c66958" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-3", width: "40", height: "7", transform: "translate(2220 58) rotate(-90)", fill: "#bb5341" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-4", width: "40", height: "6", transform: "translate(2227 58) rotate(-90)", fill: "#b03a28" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-5", width: "40", height: "6", transform: "translate(2233 58) rotate(-90)", fill: "#a41b06" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-6", width: "40", height: "6", transform: "translate(2239 58) rotate(-90)", fill: "#8e1604" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-7", width: "40", height: "6", transform: "translate(2245 58) rotate(-90)", fill: "#791103" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-8", width: "40", height: "5", transform: "translate(2251 58) rotate(-90)", fill: "#640c02" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-9", width: "40", height: "7", transform: "translate(2256 58) rotate(-90)", fill: "#500801" })))
   ));
 };
 
@@ -32295,8 +32439,11 @@ function DataGrid({
   actions,
   pageSize: initialPageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
-  title
+  title,
+  className,
+  sx
 }) {
+  const sxClass = useSx(sx);
   const [columnOverrides, setColumnOverrides] = (0, import_react22.useState)({});
   const resolvedColumns = (0, import_react22.useMemo)(() => {
     return initialColumnsProp.map((col) => {
@@ -32597,7 +32744,7 @@ function DataGrid({
     return offset2;
   };
   const hasActiveFilters = advancedFilters.some((f) => f.value);
-  return /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-root" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react22.default.createElement("h2", null, title), /* @__PURE__ */ import_react22.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react22.default.createElement(import_lucide_react2.Search, { size: 15 }), /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react22.default.createElement("h2", null, title), /* @__PURE__ */ import_react22.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react22.default.createElement(import_lucide_react2.Search, { size: 15 }), /* @__PURE__ */ import_react22.default.createElement(
     "input",
     {
       className: "dg-search",
@@ -34922,8 +35069,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // lib/Box/Box.tsx
-var React86 = __toESM(require("react"), 1);
-var Box = React86.forwardRef(
+var React87 = __toESM(require("react"), 1);
+var Box = React87.forwardRef(
   ({
     component: component2 = "div",
     children,
@@ -34936,6 +35083,23 @@ var Box = React86.forwardRef(
     margin,
     width,
     height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    flex,
+    flexWrap,
+    flexGrow,
+    flexShrink,
+    overflow,
+    position: position2,
+    top,
+    right,
+    bottom,
+    left,
+    borderRadius,
+    bgcolor,
+    color: color2,
     className,
     style,
     sx,
@@ -34952,18 +35116,35 @@ var Box = React86.forwardRef(
       ...margin !== void 0 ? { margin: typeof margin === "number" ? `${margin}px` : margin } : {},
       ...width !== void 0 ? { width: typeof width === "number" ? `${width}px` : width } : {},
       ...height !== void 0 ? { height: typeof height === "number" ? `${height}px` : height } : {},
+      ...minWidth !== void 0 ? { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth } : {},
+      ...maxWidth !== void 0 ? { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth } : {},
+      ...minHeight !== void 0 ? { minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight } : {},
+      ...maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : {},
+      ...flex !== void 0 ? { flex } : {},
+      ...flexWrap !== void 0 ? { flexWrap } : {},
+      ...flexGrow !== void 0 ? { flexGrow } : {},
+      ...flexShrink !== void 0 ? { flexShrink } : {},
+      ...overflow !== void 0 ? { overflow } : {},
+      ...position2 !== void 0 ? { position: position2 } : {},
+      ...top !== void 0 ? { top: typeof top === "number" ? `${top}px` : top } : {},
+      ...right !== void 0 ? { right: typeof right === "number" ? `${right}px` : right } : {},
+      ...bottom !== void 0 ? { bottom: typeof bottom === "number" ? `${bottom}px` : bottom } : {},
+      ...left !== void 0 ? { left: typeof left === "number" ? `${left}px` : left } : {},
+      ...borderRadius !== void 0 ? { borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius } : {},
+      ...bgcolor !== void 0 ? { backgroundColor: bgcolor } : {},
+      ...color2 !== void 0 ? { color: color2 } : {},
       ...style
     };
     const classes = ["rf-box", sxClass, className].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React86.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React87.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
   }
 );
 Box.displayName = "Box";
 
 // lib/Stack/Stack.tsx
-var React87 = __toESM(require("react"), 1);
-var Stack2 = React87.forwardRef(
+var React88 = __toESM(require("react"), 1);
+var Stack2 = React88.forwardRef(
   ({
     direction = "column",
     spacing,
@@ -34972,6 +35153,8 @@ var Stack2 = React87.forwardRef(
     divider,
     flexWrap,
     useFlexGap = true,
+    flex,
+    overflow,
     component: component2 = "div",
     children,
     className,
@@ -34987,19 +35170,21 @@ var Stack2 = React87.forwardRef(
       ...justifyContent !== void 0 ? { justifyContent } : {},
       ...flexWrap !== void 0 ? { flexWrap } : {},
       ...gapValue !== void 0 && useFlexGap ? { gap: gapValue } : {},
+      ...flex !== void 0 ? { flex } : {},
+      ...overflow !== void 0 ? { overflow } : {},
       ...style
     };
     const classes = ["rf-stack", sxClass, className].filter(Boolean).join(" ");
     let content;
     if (divider) {
-      const childArray = React87.Children.toArray(children).filter(
+      const childArray = React88.Children.toArray(children).filter(
         (child) => child !== null && child !== void 0
       );
       content = childArray.reduce((acc, child, idx) => {
         acc.push(child);
         if (idx < childArray.length - 1) {
           acc.push(
-            /* @__PURE__ */ React87.createElement("div", { key: `divider-${idx}`, className: "rf-stack-divider" }, divider)
+            /* @__PURE__ */ React88.createElement("div", { key: `divider-${idx}`, className: "rf-stack-divider" }, divider)
           );
         }
         return acc;
@@ -35008,13 +35193,13 @@ var Stack2 = React87.forwardRef(
       content = children;
     }
     const Tag = component2;
-    return /* @__PURE__ */ React87.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
+    return /* @__PURE__ */ React88.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
   }
 );
 Stack2.displayName = "Stack";
 
 // lib/Grid/Grid.tsx
-var React88 = __toESM(require("react"), 1);
+var React89 = __toESM(require("react"), 1);
 function getBreakpointClass(bp, val2) {
   if (val2 === void 0) return "";
   if (val2 === true) return `rf-grid-${bp}-12`;
@@ -35027,7 +35212,7 @@ function getSpacingGap(spacing) {
   const base = spacing.xs ?? spacing.sm ?? spacing.md ?? 0;
   return `${base * 8}px`;
 }
-var Grid = React88.forwardRef(
+var Grid = React89.forwardRef(
   ({
     container = false,
     item = false,
@@ -35077,14 +35262,14 @@ var Grid = React88.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React88.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React89.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
   }
 );
 Grid.displayName = "Grid";
 
 // lib/Paper/Paper.tsx
-var React89 = __toESM(require("react"), 1);
-var Paper = React89.forwardRef(
+var React90 = __toESM(require("react"), 1);
+var Paper = React90.forwardRef(
   ({
     elevation = 1,
     square = false,
@@ -35106,14 +35291,14 @@ var Paper = React89.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React89.createElement(Tag, { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React90.createElement(Tag, { ref, className: classes, style, ...rest }, children);
   }
 );
 Paper.displayName = "Paper";
 
 // lib/Card/Card.tsx
-var React90 = __toESM(require("react"), 1);
-var Card = React90.forwardRef(
+var React91 = __toESM(require("react"), 1);
+var Card = React91.forwardRef(
   ({
     elevation = 1,
     variant = "elevation",
@@ -35132,33 +35317,33 @@ var Card = React90.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React90.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 Card.displayName = "Card";
-var CardContent = React90.forwardRef(
+var CardContent = React91.forwardRef(
   ({ children, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = ["rf-card-content", sxClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React90.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 CardContent.displayName = "CardContent";
-var CardHeader = React90.forwardRef(
+var CardHeader = React91.forwardRef(
   ({ title, subheader, avatar, action, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = ["rf-card-header", sxClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React90.createElement("div", { ref, className: classes, style, ...rest }, avatar && /* @__PURE__ */ React90.createElement("div", { className: "rf-card-header-avatar" }, avatar), /* @__PURE__ */ React90.createElement("div", { className: "rf-card-header-content" }, /* @__PURE__ */ React90.createElement("div", { className: "rf-card-header-title" }, title), subheader && /* @__PURE__ */ React90.createElement("div", { className: "rf-card-header-subheader" }, subheader)), action && /* @__PURE__ */ React90.createElement("div", { className: "rf-card-header-action" }, action));
+    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, avatar && /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-avatar" }, avatar), /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-content" }, /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-title" }, title), subheader && /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-subheader" }, subheader)), action && /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-action" }, action));
   }
 );
 CardHeader.displayName = "CardHeader";
-var CardMedia = React90.forwardRef(
+var CardMedia = React91.forwardRef(
   ({ component: component2 = "div", image: image2, src, height, alt, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = ["rf-card-media", sxClass, className].filter(Boolean).join(" ");
     const computedHeight = height !== void 0 ? typeof height === "number" ? `${height}px` : height : "200px";
     if (component2 === "img") {
-      return /* @__PURE__ */ React90.createElement(
+      return /* @__PURE__ */ React91.createElement(
         "img",
         {
           ref,
@@ -35171,7 +35356,7 @@ var CardMedia = React90.forwardRef(
       );
     }
     if (component2 === "video") {
-      return /* @__PURE__ */ React90.createElement(
+      return /* @__PURE__ */ React91.createElement(
         "video",
         {
           ref,
@@ -35187,7 +35372,7 @@ var CardMedia = React90.forwardRef(
       ...image2 ? { backgroundImage: `url(${image2})` } : {},
       ...style
     };
-    return /* @__PURE__ */ React90.createElement(
+    return /* @__PURE__ */ React91.createElement(
       "div",
       {
         ref,
@@ -35199,7 +35384,7 @@ var CardMedia = React90.forwardRef(
   }
 );
 CardMedia.displayName = "CardMedia";
-var CardActions = React90.forwardRef(
+var CardActions = React91.forwardRef(
   ({ disableSpacing = false, children, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = [
@@ -35208,13 +35393,13 @@ var CardActions = React90.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React90.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 CardActions.displayName = "CardActions";
 
 // lib/Accordion/Accordion.tsx
-var React91 = __toESM(require("react"), 1);
+var React92 = __toESM(require("react"), 1);
 var import_react37 = require("react");
 var AccordionContext = (0, import_react37.createContext)({
   expanded: false,
@@ -35222,7 +35407,7 @@ var AccordionContext = (0, import_react37.createContext)({
   toggle: () => {
   }
 });
-var Accordion = React91.forwardRef(
+var Accordion = React92.forwardRef(
   ({
     expanded: expandedProp,
     defaultExpanded = false,
@@ -35257,11 +35442,11 @@ var Accordion = React91.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement(AccordionContext.Provider, { value: { expanded, disabled, toggle } }, /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children));
+    return /* @__PURE__ */ React92.createElement(AccordionContext.Provider, { value: { expanded, disabled, toggle } }, /* @__PURE__ */ React92.createElement("div", { ref, className: classes, style, ...rest }, children));
   }
 );
 Accordion.displayName = "Accordion";
-var ChevronIcon = () => /* @__PURE__ */ React91.createElement(
+var ChevronIcon = () => /* @__PURE__ */ React92.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -35275,9 +35460,9 @@ var ChevronIcon = () => /* @__PURE__ */ React91.createElement(
     strokeLinejoin: "round",
     "aria-hidden": "true"
   },
-  /* @__PURE__ */ React91.createElement("polyline", { points: "6 9 12 15 18 9" })
+  /* @__PURE__ */ React92.createElement("polyline", { points: "6 9 12 15 18 9" })
 );
-var AccordionSummary = React91.forwardRef(
+var AccordionSummary = React92.forwardRef(
   ({ expandIcon, children, sx, className, style, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const { expanded, toggle, disabled } = (0, import_react37.useContext)(AccordionContext);
@@ -35291,7 +35476,7 @@ var AccordionSummary = React91.forwardRef(
       "rf-accordion-summary-icon",
       expanded ? "rf-accordion-icon-expanded" : ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement(
+    return /* @__PURE__ */ React92.createElement(
       "button",
       {
         ref,
@@ -35303,13 +35488,13 @@ var AccordionSummary = React91.forwardRef(
         "aria-expanded": expanded,
         ...rest
       },
-      /* @__PURE__ */ React91.createElement("span", { className: "rf-accordion-summary-content" }, children),
-      /* @__PURE__ */ React91.createElement("span", { className: iconClasses }, expandIcon !== void 0 ? expandIcon : /* @__PURE__ */ React91.createElement(ChevronIcon, null))
+      /* @__PURE__ */ React92.createElement("span", { className: "rf-accordion-summary-content" }, children),
+      /* @__PURE__ */ React92.createElement("span", { className: iconClasses }, expandIcon !== void 0 ? expandIcon : /* @__PURE__ */ React92.createElement(ChevronIcon, null))
     );
   }
 );
 AccordionSummary.displayName = "AccordionSummary";
-var AccordionDetails = React91.forwardRef(
+var AccordionDetails = React92.forwardRef(
   ({ children, sx, className, style, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const { expanded } = (0, import_react37.useContext)(AccordionContext);
@@ -35322,7 +35507,7 @@ var AccordionDetails = React91.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement("div", { className: wrapperClasses }, /* @__PURE__ */ React91.createElement("div", { className: "rf-accordion-details-inner" }, /* @__PURE__ */ React91.createElement("div", { ref, className: detailsClasses, style, ...rest }, children)));
+    return /* @__PURE__ */ React92.createElement("div", { className: wrapperClasses }, /* @__PURE__ */ React92.createElement("div", { className: "rf-accordion-details-inner" }, /* @__PURE__ */ React92.createElement("div", { ref, className: detailsClasses, style, ...rest }, children)));
   }
 );
 AccordionDetails.displayName = "AccordionDetails";
@@ -35475,6 +35660,30 @@ var Tabs = ({
   ));
 };
 Tabs.displayName = "Tabs";
+var TabPanel = ({
+  value,
+  activeValue,
+  children,
+  keepMounted = false,
+  className = "",
+  style,
+  sx
+}) => {
+  const sxClass = useSx(sx);
+  const isActive = value === activeValue;
+  if (!isActive && !keepMounted) return null;
+  return /* @__PURE__ */ import_react38.default.createElement(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: !isActive,
+      className: ["rf-tab-panel", sxClass, className].filter(Boolean).join(" "),
+      style
+    },
+    isActive && children
+  );
+};
+TabPanel.displayName = "TabPanel";
 
 // lib/Breadcrumbs/Breadcrumbs.tsx
 var import_react39 = __toESM(require("react"), 1);
@@ -36654,6 +36863,116 @@ var Zoom = ({
   });
 };
 Zoom.displayName = "Zoom";
+
+// lib/ImageField/ImageField.tsx
+var import_react48 = __toESM(require("react"), 1);
+function getSizeStyle2(size3) {
+  if (size3 === "small") return { className: "rf-image-field--small" };
+  if (size3 === "large") return { className: "rf-image-field--large" };
+  if (typeof size3 === "number") {
+    return {
+      className: "",
+      style: { width: size3, height: size3 }
+    };
+  }
+  return { className: "rf-image-field--medium" };
+}
+var ImageField = import_react48.default.forwardRef(
+  ({
+    src,
+    alt = "",
+    variant = "circular",
+    size: size3 = "medium",
+    accept = "image/*",
+    onChange,
+    overlayText = "Upload",
+    disabled = false,
+    className = "",
+    style,
+    sx
+  }, ref) => {
+    const sxClass = useSx(sx);
+    const inputRef = (0, import_react48.useRef)(null);
+    const [preview, setPreview] = (0, import_react48.useState)(null);
+    const { className: sizeClass, style: sizeStyle } = getSizeStyle2(size3);
+    const displaySrc = preview || src;
+    const handleClick = (0, import_react48.useCallback)(() => {
+      if (!disabled) {
+        inputRef.current?.click();
+      }
+    }, [disabled]);
+    const handleKeyDown = (0, import_react48.useCallback)(
+      (e) => {
+        if ((e.key === "Enter" || e.key === " ") && !disabled) {
+          e.preventDefault();
+          inputRef.current?.click();
+        }
+      },
+      [disabled]
+    );
+    const handleFileChange = (0, import_react48.useCallback)(
+      (e) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        const objectUrl = URL.createObjectURL(file);
+        setPreview(objectUrl);
+        onChange?.(file);
+        e.target.value = "";
+      },
+      [onChange]
+    );
+    const classes = [
+      "rf-image-field",
+      `rf-image-field--${variant}`,
+      sizeClass,
+      disabled ? "rf-image-field--disabled" : "",
+      sxClass,
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = typeof size3 === "number" ? Math.max(size3 * 0.25, 16) : size3 === "small" ? 16 : size3 === "large" ? 28 : 22;
+    return /* @__PURE__ */ import_react48.default.createElement(
+      "div",
+      {
+        ref,
+        className: classes,
+        style: { ...sizeStyle, ...style },
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": alt || overlayText,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+      },
+      displaySrc ? /* @__PURE__ */ import_react48.default.createElement(
+        "img",
+        {
+          src: displaySrc,
+          alt,
+          className: "rf-image-field__img"
+        }
+      ) : /* @__PURE__ */ import_react48.default.createElement("div", { className: "rf-image-field__placeholder" }, /* @__PURE__ */ import_react48.default.createElement(
+        cameraIcon_default,
+        {
+          width: iconSize,
+          height: iconSize,
+          color: "var(--text-secondary)"
+        }
+      )),
+      /* @__PURE__ */ import_react48.default.createElement("div", { className: "rf-image-field__overlay" }, /* @__PURE__ */ import_react48.default.createElement(cameraIcon_default, { width: iconSize, height: iconSize, color: "#ffffff" }), overlayText && /* @__PURE__ */ import_react48.default.createElement("span", { className: "rf-image-field__overlay-text" }, overlayText)),
+      /* @__PURE__ */ import_react48.default.createElement(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept,
+          className: "rf-image-field__input",
+          onChange: handleFileChange,
+          disabled
+        }
+      )
+    );
+  }
+);
+ImageField.displayName = "ImageField";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   APP_THEMES,
@@ -36671,6 +36990,7 @@ Zoom.displayName = "Zoom";
   BaseDialog,
   Box,
   Breadcrumbs,
+  CameraIcon,
   CancelButton,
   Card,
   CardActions,
@@ -36705,6 +37025,7 @@ Zoom.displayName = "Zoom";
   Grow,
   HelpOutlinedIcon,
   HierarchyIcon,
+  ImageField,
   InactiveGroupIcon,
   IndustryIcon,
   InvoiceIcon,
@@ -36768,6 +37089,7 @@ Zoom.displayName = "Zoom";
   SuspendUserIcon,
   Switch,
   Tab,
+  TabPanel,
   Tabs,
   TechnicalSkillsIcon,
   TextField,