@rufous/ui 0.1.84 → 0.1.86

package/dist/main.cjs

@@ -6424,7 +6424,7 @@ var init_element = __esm({
 });
 
 // node_modules/jodit/esm/core/ui/button/button/button.js
-function Button(jodit, stateOrText, text, variant) {
+function Button2(jodit, stateOrText, text, variant) {
   const button = new UIButton(jodit);
   button.state.tabIndex = jodit.o.allowTabNavigation ? 0 : -1;
   if (isString(stateOrText)) {
@@ -10303,7 +10303,7 @@ function Alert(msg, title, callback, className = "jodit-dialog_alert") {
     callback = title;
     title = void 0;
   }
-  const dialog = this instanceof Dialog ? this : new Dialog({ closeOnClickOverlay: true }), container = dialog.c.div(className), okButton = Button(dialog, "ok", "Ok");
+  const dialog = this instanceof Dialog ? this : new Dialog({ closeOnClickOverlay: true }), container = dialog.c.div(className), okButton = Button2(dialog, "ok", "Ok");
   asArray(msg).forEach((oneMessage) => {
     container.appendChild(Dom.isNode(oneMessage) ? oneMessage : dialog.c.fromHTML(oneMessage));
   });
@@ -10341,8 +10341,8 @@ function Confirm(msg, title, callback) {
       dialog.close();
     }
   };
-  const $cancel = Button(dialog, "cancel", "Cancel");
-  const $ok = Button(dialog, "ok", "Yes");
+  const $cancel = Button2(dialog, "cancel", "Cancel");
+  const $ok = Button2(dialog, "ok", "Yes");
   $cancel.onAction(action(false));
   $ok.onAction(action(true));
   dialog.e.on($div, "submit", () => {
@@ -10364,7 +10364,7 @@ var init_confirm = __esm({
 
 // node_modules/jodit/esm/modules/dialog/prompt.js
 function Prompt(msg, title, callback, placeholder2, defaultValue) {
-  const dialog = this instanceof Dialog ? this : new Dialog({ closeOnClickOverlay: true }), cancelButton = Button(dialog, "cancel", "Cancel"), okButton = Button(dialog, "ok", "Ok"), form2 = dialog.c.element("form", {
+  const dialog = this instanceof Dialog ? this : new Dialog({ closeOnClickOverlay: true }), cancelButton = Button2(dialog, "cancel", "Cancel"), okButton = Button2(dialog, "ok", "Ok"), form2 = dialog.c.element("form", {
     class: "jodit-dialog_prompt"
   }), inputElement = dialog.c.element("input", {
     autofocus: true,
@@ -10515,7 +10515,7 @@ var init_context_menu = __esm({
           if (!item) {
             return;
           }
-          const action = Button(this.jodit, item.icon || "empty", item.title);
+          const action = Button2(this.jodit, item.icon || "empty", item.title);
           this.jodit && action.setParentView(this.jodit);
           action.setMod("context", "menu");
           action.onAction((e) => {
@@ -12018,9 +12018,9 @@ var init_image_editor = __esm({
         this.resizeUseRatio = o.resizeUseRatio;
         this.cropUseRatio = o.cropUseRatio;
         this.buttons = {
-          reset: Button(this.j, "update", "Reset"),
-          save: Button(this.j, "save", "Save"),
-          saveas: Button(this.j, {
+          reset: Button2(this.j, "update", "Reset"),
+          save: Button2(this.j, "save", "Save"),
+          saveas: Button2(this.j, {
             icon: {
               name: "save"
             },
@@ -12508,7 +12508,7 @@ function stateListeners() {
           return;
         }
         if (options2.renameFolder && this.dataProvider.canI("FolderRename")) {
-          const btn = Button(this, {
+          const btn = Button2(this, {
             icon: { name: "pencil" },
             name: "rename",
             tooltip: "Rename",
@@ -12518,7 +12518,7 @@ function stateListeners() {
           folderElm.appendChild(btn.container);
         }
         if (options2.deleteFolder && this.dataProvider.canI("FolderRemove")) {
-          const btn = Button(this, {
+          const btn = Button2(this, {
             icon: { name: "cancel" },
             name: "remove",
             tooltip: "Delete",
@@ -12529,7 +12529,7 @@ function stateListeners() {
         }
       });
       if (options2.createNewFolder && this.dataProvider.canI("FolderCreate")) {
-        const button = Button(this, "plus", "Add folder", "secondary");
+        const button = Button2(this, "plus", "Add folder", "secondary");
         button.onAction(() => {
           this.e.fire("addFolder", {
             path: normalizePath(source.path + "/"),
@@ -17623,7 +17623,7 @@ __export(modules_exports, {
   Alert: () => Alert,
   Async: () => Async,
   AsyncStorage: () => AsyncStorage,
-  Button: () => Button,
+  Button: () => Button2,
   CommitStyle: () => CommitStyle,
   Component: () => Component,
   Confirm: () => Confirm,
@@ -25100,7 +25100,7 @@ var init_tabs = __esm({
         attr(tab2, {
           role: "tabpanel"
         });
-        const button = Button(jodit, icon || name, name);
+        const button = Button2(jodit, icon || name, name);
         button.state.role = "tab";
         jodit.e.on(button.container, "pointerdown", (e) => e.preventDefault());
         if (!firstTab) {
@@ -28650,6 +28650,7 @@ __export(main_exports, {
   BaseDialog: () => BaseDialog_default,
   Box: () => Box,
   Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
   CameraIcon: () => cameraIcon_default,
   CancelButton: () => cancelButton_default,
   Card: () => Card,
@@ -28685,6 +28686,7 @@ __export(main_exports, {
   Grow: () => Grow,
   HelpOutlinedIcon: () => helpOutlinedIcon_default,
   HierarchyIcon: () => hierarchyIcon_default,
+  IconButton: () => IconButton,
   ImageField: () => ImageField,
   InactiveGroupIcon: () => inactiveGroupIcon_default,
   IndustryIcon: () => industryIcon_default,
@@ -28749,6 +28751,7 @@ __export(main_exports, {
   SuspendUserIcon: () => suspendUserIcon_default,
   Switch: () => Switch,
   Tab: () => Tab,
+  TabPanel: () => TabPanel,
   Tabs: () => Tabs,
   TechnicalSkillsIcon: () => technicalSkillsIcon_default,
   TextField: () => TextField,
@@ -30034,8 +30037,97 @@ var StandardButton = ({ children, sx, className, ...props }) => {
 };
 var stdButton_default = StandardButton;
 
-// lib/Dialogs/BaseDialog.tsx
+// lib/Buttons/Button.tsx
 var React63 = __toESM(require("react"), 1);
+var Button = React63.forwardRef(
+  ({
+    variant = "text",
+    color: color2 = "primary",
+    size: size3 = "medium",
+    startIcon,
+    endIcon,
+    fullWidth = false,
+    disabled = false,
+    disableElevation = false,
+    loading = false,
+    loadingPosition = "center",
+    component: component2,
+    children,
+    className,
+    style,
+    sx,
+    href,
+    type = "button",
+    ...rest
+  }, ref) => {
+    const sxClass = useSx(sx);
+    const classes = [
+      "rf-btn",
+      `rf-btn--${variant}`,
+      `rf-btn--${color2}`,
+      `rf-btn--${size3}`,
+      fullWidth && "rf-btn--full-width",
+      disableElevation && "rf-btn--no-elevation",
+      disabled && "rf-btn--disabled",
+      loading && "rf-btn--loading",
+      sxClass,
+      className
+    ].filter(Boolean).join(" ");
+    const Tag = component2 || (href ? "a" : "button");
+    const tagProps = { ...rest };
+    if (Tag === "a") {
+      tagProps.href = disabled ? void 0 : href;
+    } else {
+      tagProps.type = type;
+      tagProps.disabled = disabled || loading;
+    }
+    return /* @__PURE__ */ React63.createElement(Tag, { ref, className: classes, style, ...tagProps }, loading && loadingPosition === "start" && /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__loading-indicator rf-btn__loading--start" }, /* @__PURE__ */ React63.createElement(circularProgress_default, { size: size3 === "small" ? 14 : size3 === "large" ? 22 : 18 })), startIcon && !loading && /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__start-icon" }, startIcon), loading && loadingPosition === "center" ? /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__loading-indicator" }, /* @__PURE__ */ React63.createElement(circularProgress_default, { size: size3 === "small" ? 14 : size3 === "large" ? 22 : 18 })) : /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__label" }, children), endIcon && !loading && /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__end-icon" }, endIcon), loading && loadingPosition === "end" && /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__loading-indicator rf-btn__loading--end" }, /* @__PURE__ */ React63.createElement(circularProgress_default, { size: size3 === "small" ? 14 : size3 === "large" ? 22 : 18 })));
+  }
+);
+Button.displayName = "Button";
+
+// lib/Buttons/IconButton.tsx
+var React64 = __toESM(require("react"), 1);
+var IconButton = React64.forwardRef(
+  ({
+    color: color2 = "default",
+    size: size3 = "medium",
+    edge = false,
+    disabled = false,
+    component: component2,
+    children,
+    className,
+    style,
+    sx,
+    href,
+    type = "button",
+    ...rest
+  }, ref) => {
+    const sxClass = useSx(sx);
+    const classes = [
+      "rf-icon-btn",
+      `rf-icon-btn--${color2}`,
+      `rf-icon-btn--${size3}`,
+      edge && `rf-icon-btn--edge-${edge}`,
+      disabled && "rf-icon-btn--disabled",
+      sxClass,
+      className
+    ].filter(Boolean).join(" ");
+    const Tag = component2 || (href ? "a" : "button");
+    const tagProps = { ...rest };
+    if (Tag === "a") {
+      tagProps.href = disabled ? void 0 : href;
+    } else {
+      tagProps.type = type;
+      tagProps.disabled = disabled;
+    }
+    return /* @__PURE__ */ React64.createElement(Tag, { ref, className: classes, style, ...tagProps }, children);
+  }
+);
+IconButton.displayName = "IconButton";
+
+// lib/Dialogs/BaseDialog.tsx
+var React65 = __toESM(require("react"), 1);
 var import_react14 = require("react");
 var import_lucide_react = require("lucide-react");
 var BaseDialog = ({
@@ -30070,7 +30162,7 @@ var BaseDialog = ({
   const sxClass = useSx(sx);
   if (!open) return null;
   const isButtonLoading = isSubmitting || loading;
-  const renderButtons = () => /* @__PURE__ */ React63.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React63.createElement(
+  const renderButtons = () => /* @__PURE__ */ React65.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React65.createElement(
     "button",
     {
       className: "btn-cancel",
@@ -30078,7 +30170,7 @@ var BaseDialog = ({
       disabled: isLoading || isButtonLoading
     },
     cancelText
-  ), onConfirm && /* @__PURE__ */ React63.createElement(
+  ), onConfirm && /* @__PURE__ */ React65.createElement(
     "button",
     {
       className: "btn-confirm",
@@ -30090,10 +30182,10 @@ var BaseDialog = ({
         setIsSubmitting(false);
       }
     },
-    /* @__PURE__ */ React63.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
-    isButtonLoading && /* @__PURE__ */ React63.createElement("span", { className: "spinner", style: { position: "absolute" } })
+    /* @__PURE__ */ React65.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
+    isButtonLoading && /* @__PURE__ */ React65.createElement("span", { className: "spinner", style: { position: "absolute" } })
   ));
-  return /* @__PURE__ */ React63.createElement("div", { className: `dialog-overlay ${size3 === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size3 === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React65.createElement(
     "div",
     {
       className: ["dialog-container", size3 ? `size-${size3}` : "", sxClass, className].filter(Boolean).join(" "),
@@ -30102,15 +30194,15 @@ var BaseDialog = ({
         minHeight
       }
     },
-    /* @__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(
+    /* @__PURE__ */ React65.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React65.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React65.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React65.createElement(
       import_lucide_react.X,
       {
         size: 18,
         color: themeConfig?.icon || "#666666"
       }
     ))),
-    /* @__PURE__ */ React63.createElement("div", { className: "dialog-divider" }),
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React65.createElement(
       "div",
       {
         className: "dialog-body",
@@ -30121,7 +30213,7 @@ var BaseDialog = ({
       },
       children
     ),
-    /* @__PURE__ */ React63.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
     customButtons || renderButtons()
   ));
 };
@@ -30644,10 +30736,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}`;
@@ -30659,13 +30766,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;
@@ -30850,27 +30993,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,
@@ -30928,7 +31133,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) {
@@ -30960,6 +31167,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) {
@@ -31152,9 +31366,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()
     },
@@ -31168,7 +31384,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,
@@ -31240,7 +31458,7 @@ var MONTHS2 = [
   "November",
   "December"
 ];
-var MONTHS_SHORT = [
+var MONTHS_SHORT2 = [
   "Jan",
   "Feb",
   "Mar",
@@ -31277,14 +31495,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);
@@ -32235,13 +32453,13 @@ var Autocomplete = import_react21.default.forwardRef(AutocompleteInner);
 Autocomplete.displayName = "Autocomplete";
 
 // lib/Progress/RufousLogoLoader.tsx
-var React71 = __toESM(require("react"), 1);
+var React73 = __toESM(require("react"), 1);
 var _uid = 0;
 var RufousLogoLoader = ({ size: size3 = 80, sx, className }) => {
-  const clipId = React71.useRef(`rll-${++_uid}`).current;
+  const clipId = React73.useRef(`rll-${++_uid}`).current;
   const height = size3 * (38.795 / 54.585);
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React71.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height } }, /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React73.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height } }, /* @__PURE__ */ React73.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -32250,14 +32468,14 @@ var RufousLogoLoader = ({ size: size3 = 80, sx, className }) => {
       height,
       className: "rufous-logo-loader__svg"
     },
-    /* @__PURE__ */ React71.createElement("defs", null, /* @__PURE__ */ React71.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React73.createElement("defs", null, /* @__PURE__ */ React73.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React73.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__ */ 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" })))
+    /* @__PURE__ */ React73.createElement("g", { transform: "translate(-123.275 -24)" }, /* @__PURE__ */ React73.createElement("g", { transform: "translate(-2084.725 5.795)", clipPath: `url(#${clipId})` }, /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-1", width: "40", height: "6", transform: "translate(2208 58) rotate(-90)", fill: "#d07f6f" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-2", width: "40", height: "6", transform: "translate(2214 58) rotate(-90)", fill: "#c66958" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-3", width: "40", height: "7", transform: "translate(2220 58) rotate(-90)", fill: "#bb5341" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-4", width: "40", height: "6", transform: "translate(2227 58) rotate(-90)", fill: "#b03a28" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-5", width: "40", height: "6", transform: "translate(2233 58) rotate(-90)", fill: "#a41b06" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-6", width: "40", height: "6", transform: "translate(2239 58) rotate(-90)", fill: "#8e1604" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-7", width: "40", height: "6", transform: "translate(2245 58) rotate(-90)", fill: "#791103" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-8", width: "40", height: "5", transform: "translate(2251 58) rotate(-90)", fill: "#640c02" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-9", width: "40", height: "7", transform: "translate(2256 58) rotate(-90)", fill: "#500801" })))
   ));
 };
 
@@ -32312,8 +32530,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) => {
@@ -32614,7 +32835,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",
@@ -34939,8 +35160,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // lib/Box/Box.tsx
-var React87 = __toESM(require("react"), 1);
-var Box = React87.forwardRef(
+var React89 = __toESM(require("react"), 1);
+var Box = React89.forwardRef(
   ({
     component: component2 = "div",
     children,
@@ -34953,6 +35174,23 @@ var Box = React87.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,
@@ -34969,18 +35207,35 @@ var Box = React87.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__ */ React87.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React89.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
   }
 );
 Box.displayName = "Box";
 
 // lib/Stack/Stack.tsx
-var React88 = __toESM(require("react"), 1);
-var Stack2 = React88.forwardRef(
+var React90 = __toESM(require("react"), 1);
+var Stack2 = React90.forwardRef(
   ({
     direction = "column",
     spacing,
@@ -34989,6 +35244,8 @@ var Stack2 = React88.forwardRef(
     divider,
     flexWrap,
     useFlexGap = true,
+    flex,
+    overflow,
     component: component2 = "div",
     children,
     className,
@@ -35004,19 +35261,21 @@ var Stack2 = React88.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 = React88.Children.toArray(children).filter(
+      const childArray = React90.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__ */ React88.createElement("div", { key: `divider-${idx}`, className: "rf-stack-divider" }, divider)
+            /* @__PURE__ */ React90.createElement("div", { key: `divider-${idx}`, className: "rf-stack-divider" }, divider)
           );
         }
         return acc;
@@ -35025,13 +35284,13 @@ var Stack2 = React88.forwardRef(
       content = children;
     }
     const Tag = component2;
-    return /* @__PURE__ */ React88.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
+    return /* @__PURE__ */ React90.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
   }
 );
 Stack2.displayName = "Stack";
 
 // lib/Grid/Grid.tsx
-var React89 = __toESM(require("react"), 1);
+var React91 = __toESM(require("react"), 1);
 function getBreakpointClass(bp, val2) {
   if (val2 === void 0) return "";
   if (val2 === true) return `rf-grid-${bp}-12`;
@@ -35044,7 +35303,7 @@ function getSpacingGap(spacing) {
   const base = spacing.xs ?? spacing.sm ?? spacing.md ?? 0;
   return `${base * 8}px`;
 }
-var Grid = React89.forwardRef(
+var Grid = React91.forwardRef(
   ({
     container = false,
     item = false,
@@ -35094,14 +35353,14 @@ var Grid = React89.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React89.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React91.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
   }
 );
 Grid.displayName = "Grid";
 
 // lib/Paper/Paper.tsx
-var React90 = __toESM(require("react"), 1);
-var Paper = React90.forwardRef(
+var React92 = __toESM(require("react"), 1);
+var Paper = React92.forwardRef(
   ({
     elevation = 1,
     square = false,
@@ -35123,14 +35382,14 @@ var Paper = React90.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React90.createElement(Tag, { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React92.createElement(Tag, { ref, className: classes, style, ...rest }, children);
   }
 );
 Paper.displayName = "Paper";
 
 // lib/Card/Card.tsx
-var React91 = __toESM(require("react"), 1);
-var Card = React91.forwardRef(
+var React93 = __toESM(require("react"), 1);
+var Card = React93.forwardRef(
   ({
     elevation = 1,
     variant = "elevation",
@@ -35149,33 +35408,33 @@ var Card = React91.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React93.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 Card.displayName = "Card";
-var CardContent = React91.forwardRef(
+var CardContent = React93.forwardRef(
   ({ children, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = ["rf-card-content", sxClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React93.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 CardContent.displayName = "CardContent";
-var CardHeader = React91.forwardRef(
+var CardHeader = React93.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__ */ 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));
+    return /* @__PURE__ */ React93.createElement("div", { ref, className: classes, style, ...rest }, avatar && /* @__PURE__ */ React93.createElement("div", { className: "rf-card-header-avatar" }, avatar), /* @__PURE__ */ React93.createElement("div", { className: "rf-card-header-content" }, /* @__PURE__ */ React93.createElement("div", { className: "rf-card-header-title" }, title), subheader && /* @__PURE__ */ React93.createElement("div", { className: "rf-card-header-subheader" }, subheader)), action && /* @__PURE__ */ React93.createElement("div", { className: "rf-card-header-action" }, action));
   }
 );
 CardHeader.displayName = "CardHeader";
-var CardMedia = React91.forwardRef(
+var CardMedia = React93.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__ */ React91.createElement(
+      return /* @__PURE__ */ React93.createElement(
         "img",
         {
           ref,
@@ -35188,7 +35447,7 @@ var CardMedia = React91.forwardRef(
       );
     }
     if (component2 === "video") {
-      return /* @__PURE__ */ React91.createElement(
+      return /* @__PURE__ */ React93.createElement(
         "video",
         {
           ref,
@@ -35204,7 +35463,7 @@ var CardMedia = React91.forwardRef(
       ...image2 ? { backgroundImage: `url(${image2})` } : {},
       ...style
     };
-    return /* @__PURE__ */ React91.createElement(
+    return /* @__PURE__ */ React93.createElement(
       "div",
       {
         ref,
@@ -35216,7 +35475,7 @@ var CardMedia = React91.forwardRef(
   }
 );
 CardMedia.displayName = "CardMedia";
-var CardActions = React91.forwardRef(
+var CardActions = React93.forwardRef(
   ({ disableSpacing = false, children, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = [
@@ -35225,13 +35484,13 @@ var CardActions = React91.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React93.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 CardActions.displayName = "CardActions";
 
 // lib/Accordion/Accordion.tsx
-var React92 = __toESM(require("react"), 1);
+var React94 = __toESM(require("react"), 1);
 var import_react37 = require("react");
 var AccordionContext = (0, import_react37.createContext)({
   expanded: false,
@@ -35239,7 +35498,7 @@ var AccordionContext = (0, import_react37.createContext)({
   toggle: () => {
   }
 });
-var Accordion = React92.forwardRef(
+var Accordion = React94.forwardRef(
   ({
     expanded: expandedProp,
     defaultExpanded = false,
@@ -35274,11 +35533,11 @@ var Accordion = React92.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React92.createElement(AccordionContext.Provider, { value: { expanded, disabled, toggle } }, /* @__PURE__ */ React92.createElement("div", { ref, className: classes, style, ...rest }, children));
+    return /* @__PURE__ */ React94.createElement(AccordionContext.Provider, { value: { expanded, disabled, toggle } }, /* @__PURE__ */ React94.createElement("div", { ref, className: classes, style, ...rest }, children));
   }
 );
 Accordion.displayName = "Accordion";
-var ChevronIcon = () => /* @__PURE__ */ React92.createElement(
+var ChevronIcon = () => /* @__PURE__ */ React94.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -35292,9 +35551,9 @@ var ChevronIcon = () => /* @__PURE__ */ React92.createElement(
     strokeLinejoin: "round",
     "aria-hidden": "true"
   },
-  /* @__PURE__ */ React92.createElement("polyline", { points: "6 9 12 15 18 9" })
+  /* @__PURE__ */ React94.createElement("polyline", { points: "6 9 12 15 18 9" })
 );
-var AccordionSummary = React92.forwardRef(
+var AccordionSummary = React94.forwardRef(
   ({ expandIcon, children, sx, className, style, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const { expanded, toggle, disabled } = (0, import_react37.useContext)(AccordionContext);
@@ -35308,7 +35567,7 @@ var AccordionSummary = React92.forwardRef(
       "rf-accordion-summary-icon",
       expanded ? "rf-accordion-icon-expanded" : ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React92.createElement(
+    return /* @__PURE__ */ React94.createElement(
       "button",
       {
         ref,
@@ -35320,13 +35579,13 @@ var AccordionSummary = React92.forwardRef(
         "aria-expanded": expanded,
         ...rest
       },
-      /* @__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))
+      /* @__PURE__ */ React94.createElement("span", { className: "rf-accordion-summary-content" }, children),
+      /* @__PURE__ */ React94.createElement("span", { className: iconClasses }, expandIcon !== void 0 ? expandIcon : /* @__PURE__ */ React94.createElement(ChevronIcon, null))
     );
   }
 );
 AccordionSummary.displayName = "AccordionSummary";
-var AccordionDetails = React92.forwardRef(
+var AccordionDetails = React94.forwardRef(
   ({ children, sx, className, style, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const { expanded } = (0, import_react37.useContext)(AccordionContext);
@@ -35339,7 +35598,7 @@ var AccordionDetails = React92.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    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)));
+    return /* @__PURE__ */ React94.createElement("div", { className: wrapperClasses }, /* @__PURE__ */ React94.createElement("div", { className: "rf-accordion-details-inner" }, /* @__PURE__ */ React94.createElement("div", { ref, className: detailsClasses, style, ...rest }, children)));
   }
 );
 AccordionDetails.displayName = "AccordionDetails";
@@ -35492,6 +35751,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);
@@ -36798,6 +37081,7 @@ ImageField.displayName = "ImageField";
   BaseDialog,
   Box,
   Breadcrumbs,
+  Button,
   CameraIcon,
   CancelButton,
   Card,
@@ -36833,6 +37117,7 @@ ImageField.displayName = "ImageField";
   Grow,
   HelpOutlinedIcon,
   HierarchyIcon,
+  IconButton,
   ImageField,
   InactiveGroupIcon,
   IndustryIcon,
@@ -36897,6 +37182,7 @@ ImageField.displayName = "ImageField";
   SuspendUserIcon,
   Switch,
   Tab,
+  TabPanel,
   Tabs,
   TechnicalSkillsIcon,
   TextField,