@rufous/ui 0.1.83 → 0.1.85

package/dist/main.js

@@ -1061,8 +1061,23 @@ import * as React56 from "react";
 var QualificationsIcon = ({ color = "#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: color, stroke: color, strokeWidth: "0.2" }));
 var qualificationsIcon_default = QualificationsIcon;
 
-// lib/Buttons/addButton.tsx
+// lib/icons/cameraIcon.tsx
 import * as React57 from "react";
+var CameraIcon = ({ color = "#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: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none"
+  }
+), /* @__PURE__ */ React57.createElement("circle", { cx: "12", cy: "13", r: "4", stroke: color, strokeWidth: "2", fill: "none" }));
+var cameraIcon_default = CameraIcon;
+
+// lib/Buttons/addButton.tsx
+import * as React58 from "react";
 
 // lib/utils/sx.ts
 import { useRef, useEffect } from "react";
@@ -1111,15 +1126,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
-import * as React59 from "react";
+import * as React60 from "react";
 
 // lib/Progress/circularProgress.tsx
-import * as React58 from "react";
+import * as React59 from "react";
 var CircularProgress = ({
   size = 50,
   color = "#a81c08",
@@ -1128,14 +1143,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: size, height: size },
       ...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",
@@ -1157,7 +1172,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: size, height: size } }, /* @__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: size, height: size } }, /* @__PURE__ */ React59.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React59.createElement(
     "circle",
     {
       className: "rufous-loader-circle",
@@ -1166,7 +1181,7 @@ var CircularProgressIcon = ({
       r: "45",
       stroke: color
     }
-  )), /* @__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
@@ -1182,8 +1197,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;
@@ -1218,7 +1233,7 @@ var SubmitButton = ({
       }
     }
   };
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "button",
     {
       ...props,
@@ -1228,29 +1243,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
-import * as React60 from "react";
+import * as React61 from "react";
 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
-import * as React61 from "react";
+import * as React62 from "react";
 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
-import * as React62 from "react";
+import * as React63 from "react";
 import { useState as useState2 } from "react";
 import { X } from "lucide-react";
 var BaseDialog = ({
@@ -1285,7 +1300,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",
@@ -1293,7 +1308,7 @@ var BaseDialog = ({
       disabled: isLoading || isButtonLoading
     },
     cancelText
-  ), onConfirm && /* @__PURE__ */ React62.createElement(
+  ), onConfirm && /* @__PURE__ */ React63.createElement(
     "button",
     {
       className: "btn-confirm",
@@ -1305,10 +1320,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 ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React63.createElement(
     "div",
     {
       className: ["dialog-container", size ? `size-${size}` : "", sxClass, className].filter(Boolean).join(" "),
@@ -1317,15 +1332,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(
       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",
@@ -1336,14 +1351,14 @@ var BaseDialog = ({
       },
       children
     ),
-    /* @__PURE__ */ React62.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React63.createElement("div", { className: "dialog-divider" }),
     customButtons || renderButtons()
   ));
 };
 var BaseDialog_default = BaseDialog;
 
 // lib/Contexts/rufousThemeProvider.tsx
-import React63, {
+import React64, {
   createContext,
   useContext,
   useEffect as useEffect2,
@@ -1380,7 +1395,7 @@ var RufousThemeProvider = ({ children }) => {
     setCommittedThemeKey(key);
   };
   const cancelTheme = () => setPreviewThemeKey(committedThemeKey);
-  return /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React64.createElement(
     RufousThemeContext.Provider,
     {
       value: {
@@ -1394,7 +1409,7 @@ var RufousThemeProvider = ({ children }) => {
         updateSettings: (v) => setSettings(v)
       }
     },
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React64.createElement(
       "div",
       {
         className: `theme-${previewThemeKey || committedThemeKey || "default"}`
@@ -1406,7 +1421,7 @@ var RufousThemeProvider = ({ children }) => {
 var useRufousTheme = () => useContext(RufousThemeContext);
 
 // lib/CheckBoxes/CheckBox.jsx
-import React64 from "react";
+import React65 from "react";
 var Checkbox = ({
   id,
   label,
@@ -1421,7 +1436,7 @@ var Checkbox = ({
   const handleChange = (e) => {
     if (onChange) onChange(e.target.checked);
   };
-  return /* @__PURE__ */ React64.createElement("div", { className: ["checkbox-wrapper-13", sxClass].filter(Boolean).join(" ") }, /* @__PURE__ */ React64.createElement("label", { className: `${className}`, style }, /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement("div", { className: ["checkbox-wrapper-13", sxClass].filter(Boolean).join(" ") }, /* @__PURE__ */ React65.createElement("label", { className: `${className}`, style }, /* @__PURE__ */ React65.createElement(
     "input",
     {
       id,
@@ -1430,11 +1445,11 @@ var Checkbox = ({
       onChange: handleChange,
       disabled
     }
-  ), label && /* @__PURE__ */ React64.createElement("span", { className: "checkbox-label" }, label)));
+  ), label && /* @__PURE__ */ React65.createElement("span", { className: "checkbox-label" }, label)));
 };
 
 // lib/TextFields/TextField.tsx
-import React65, { forwardRef } from "react";
+import React66, { forwardRef } from "react";
 var TextField = forwardRef(({
   label,
   name,
@@ -1481,7 +1496,7 @@ var TextField = forwardRef(({
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  const internalRef = React65.useRef(null);
+  const internalRef = React66.useRef(null);
   const triggerChange = () => {
     if (internalRef.current) {
       const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
@@ -1529,7 +1544,7 @@ var TextField = forwardRef(({
       props.onKeyDown(e);
     }
   };
-  return /* @__PURE__ */ React65.createElement("div", { ref, className: rootClasses, style }, /* @__PURE__ */ React65.createElement("div", { className: `rf-text-field__wrapper ${InputProps?.className || ""}`, style: InputProps?.style }, InputProps?.startAdornment && /* @__PURE__ */ React65.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--start" }, InputProps.startAdornment), /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement("div", { ref, className: rootClasses, style }, /* @__PURE__ */ React66.createElement("div", { className: `rf-text-field__wrapper ${InputProps?.className || ""}`, style: InputProps?.style }, InputProps?.startAdornment && /* @__PURE__ */ React66.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--start" }, InputProps.startAdornment), /* @__PURE__ */ React66.createElement(
     "input",
     {
       ref: internalRef,
@@ -1547,12 +1562,12 @@ var TextField = forwardRef(({
       ...slotProps?.input,
       ...props
     }
-  ), InputProps?.endAdornment && /* @__PURE__ */ React65.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), type === "number" && !disabled && !readOnly && /* @__PURE__ */ React65.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ React65.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ React65.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React65.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ React65.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ React65.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React65.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ React65.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React65.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ React65.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ React65.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React65.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ React65.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ React65.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+  ), InputProps?.endAdornment && /* @__PURE__ */ React66.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, InputProps.endAdornment), type === "number" && !disabled && !readOnly && /* @__PURE__ */ React66.createElement("div", { className: "rf-text-field__number-controls" }, /* @__PURE__ */ React66.createElement("button", { type: "button", tabIndex: -1, onClick: handleIncrement, className: "rf-text-field__number-btn" }, /* @__PURE__ */ React66.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React66.createElement("path", { d: "M4 0L8 5H0L4 0Z" }))), /* @__PURE__ */ React66.createElement("button", { type: "button", tabIndex: -1, onClick: handleDecrement, className: "rf-text-field__number-btn", style: { marginTop: 2 } }, /* @__PURE__ */ React66.createElement("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "currentColor" }, /* @__PURE__ */ React66.createElement("path", { d: "M4 5L0 0H8L4 5Z" })))), hasLabel && /* @__PURE__ */ React66.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React66.createElement("span", { className: "rf-text-field__asterisk" }, "*")), variant === "outlined" && /* @__PURE__ */ React66.createElement("fieldset", { className: "rf-text-field__notch" }, hasLabel ? /* @__PURE__ */ React66.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React66.createElement("span", null, label, " ", required ? "*" : "")) : /* @__PURE__ */ React66.createElement("legend", { className: "rf-text-field__legend--empty" }))), helperText && /* @__PURE__ */ React66.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 });
 TextField.displayName = "TextField";
 
 // lib/TextFields/AddressLookup.tsx
-import React66, { useState as useState4, useRef as useRef3, useEffect as useEffect3 } from "react";
+import React67, { useState as useState4, useRef as useRef3, useEffect as useEffect3 } from "react";
 import Axios from "axios";
 import { Country, State, City } from "country-state-city";
 var AddressLookup = ({
@@ -1727,7 +1742,7 @@ var AddressLookup = ({
       city: ""
     });
   };
-  return /* @__PURE__ */ React66.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ React66.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ React66.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React67.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ React67.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ React67.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ React67.createElement(
     TextField,
     {
       label,
@@ -1760,7 +1775,7 @@ var AddressLookup = ({
       },
       onFocus: () => suggestions.length > 0 && setShowSuggestions(true)
     }
-  ), loading && /* @__PURE__ */ React66.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ React66.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ React66.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ React66.createElement(
+  ), loading && /* @__PURE__ */ React67.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ React67.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ React67.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ React67.createElement(
     "div",
     {
       key: idx,
@@ -1771,9 +1786,9 @@ var AddressLookup = ({
         fetchPlaceDetails(option.placePrediction.placeId, mainText);
       }
     },
-    /* @__PURE__ */ React66.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
-    /* @__PURE__ */ React66.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
-  ))), error.addressLine1 && /* @__PURE__ */ React66.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ React66.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React67.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
+    /* @__PURE__ */ React67.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
+  ))), error.addressLine1 && /* @__PURE__ */ React67.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ React67.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React67.createElement(
     TextField,
     {
       label: "Address Line 2",
@@ -1782,7 +1797,7 @@ var AddressLookup = ({
       value: value.addressLine2 || "",
       onChange: (e) => handleChange("addressLine2", e.target.value)
     }
-  )), layout !== "compact" && /* @__PURE__ */ React66.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React66.createElement(
+  )), layout !== "compact" && /* @__PURE__ */ React67.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React67.createElement(
     TextField,
     {
       label: "Address Line 2",
@@ -1791,7 +1806,7 @@ var AddressLookup = ({
       value: value.addressLine2 || "",
       onChange: (e) => handleChange("addressLine2", e.target.value)
     }
-  )), /* @__PURE__ */ React66.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ React66.createElement(
+  )), /* @__PURE__ */ React67.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ React67.createElement(
     TextField,
     {
       label: "Country",
@@ -1804,7 +1819,7 @@ var AddressLookup = ({
       onChange: (e) => handleCountryChange(e.target.value),
       list: "countries-list"
     }
-  ), /* @__PURE__ */ React66.createElement("datalist", { id: "countries-list" }, countries.map((c) => /* @__PURE__ */ React66.createElement("option", { key: c.isoCode, value: c.name }))), error.country && /* @__PURE__ */ React66.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ React66.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ React66.createElement(
+  ), /* @__PURE__ */ React67.createElement("datalist", { id: "countries-list" }, countries.map((c) => /* @__PURE__ */ React67.createElement("option", { key: c.isoCode, value: c.name }))), error.country && /* @__PURE__ */ React67.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ React67.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ React67.createElement(
     TextField,
     {
       label: "State",
@@ -1818,7 +1833,7 @@ var AddressLookup = ({
       onChange: (e) => handleStateChange(e.target.value),
       list: "states-list"
     }
-  ), /* @__PURE__ */ React66.createElement("datalist", { id: "states-list" }, states.map((s) => /* @__PURE__ */ React66.createElement("option", { key: s.isoCode, value: s.name }))), error.state && /* @__PURE__ */ React66.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ React66.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ React66.createElement(
+  ), /* @__PURE__ */ React67.createElement("datalist", { id: "states-list" }, states.map((s) => /* @__PURE__ */ React67.createElement("option", { key: s.isoCode, value: s.name }))), error.state && /* @__PURE__ */ React67.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ React67.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ React67.createElement(
     TextField,
     {
       label: "City",
@@ -1832,7 +1847,7 @@ var AddressLookup = ({
       onChange: (e) => handleChange("city", e.target.value),
       list: "cities-list"
     }
-  ), /* @__PURE__ */ React66.createElement("datalist", { id: "cities-list" }, cities.map((c, i) => /* @__PURE__ */ React66.createElement("option", { key: i, value: c.name }))), error.city && /* @__PURE__ */ React66.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ React66.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ React66.createElement(
+  ), /* @__PURE__ */ React67.createElement("datalist", { id: "cities-list" }, cities.map((c, i) => /* @__PURE__ */ React67.createElement("option", { key: i, value: c.name }))), error.city && /* @__PURE__ */ React67.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ React67.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ React67.createElement(
     TextField,
     {
       label: "Pincode",
@@ -1844,12 +1859,12 @@ var AddressLookup = ({
       readOnly: googleFields.pincode && !!value.pincode,
       onChange: (e) => handleChange("pincode", e.target.value)
     }
-  ), error.pincode && /* @__PURE__ */ React66.createElement("div", { className: "field-error-text" }, error.pincode))));
+  ), error.pincode && /* @__PURE__ */ React67.createElement("div", { className: "field-error-text" }, error.pincode))));
 };
 var AddressLookup_default = AddressLookup;
 
 // lib/TextFields/DateField.tsx
-import React67, {
+import React68, {
   useState as useState5,
   useRef as useRef4,
   useEffect as useEffect4,
@@ -1870,10 +1885,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}`;
@@ -1885,13 +1915,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;
@@ -1949,9 +2015,9 @@ var parseTimeFromISO = (iso) => {
   if (h === 0) h = 12;
   return { h, m, ampm };
 };
-var CalendarIcon = () => /* @__PURE__ */ React67.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React67.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ React67.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ React67.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ React67.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
-var ChevUp = () => /* @__PURE__ */ React67.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React67.createElement("path", { d: "M5 0L10 7H0L5 0Z" }));
-var ChevDown = () => /* @__PURE__ */ React67.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React67.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
+var CalendarIcon = () => /* @__PURE__ */ React68.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React68.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ React68.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ React68.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ React68.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
+var ChevUp = () => /* @__PURE__ */ React68.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M5 0L10 7H0L5 0Z" }));
+var ChevDown = () => /* @__PURE__ */ React68.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React68.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
 var ITEM_H = 36;
 var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
   const listRef = useRef4(null);
@@ -1999,15 +2065,15 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
       }
     }, 100);
   };
-  return /* @__PURE__ */ React67.createElement("div", { className: "rf-timescroll__col-wrapper" }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement("div", { className: "rf-timescroll__col-wrapper" }, /* @__PURE__ */ React68.createElement(
     "div",
     {
       className: "rf-timescroll__col",
       ref: listRef,
       onScroll: handleScroll
     },
-    !infinite && /* @__PURE__ */ React67.createElement("div", { className: "rf-timescroll__spacer" }),
-    virtualItems.map((label, idx) => /* @__PURE__ */ React67.createElement(
+    !infinite && /* @__PURE__ */ React68.createElement("div", { className: "rf-timescroll__spacer" }),
+    virtualItems.map((label, idx) => /* @__PURE__ */ React68.createElement(
       "div",
       {
         key: `${label}-${idx}`,
@@ -2015,8 +2081,8 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
       },
       label
     )),
-    !infinite && /* @__PURE__ */ React67.createElement("div", { className: "rf-timescroll__spacer" })
-  ), /* @__PURE__ */ React67.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--top" }), /* @__PURE__ */ React67.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--bottom" }));
+    !infinite && /* @__PURE__ */ React68.createElement("div", { className: "rf-timescroll__spacer" })
+  ), /* @__PURE__ */ React68.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--top" }), /* @__PURE__ */ React68.createElement("div", { className: "rf-timescroll__mask rf-timescroll__mask--bottom" }));
 };
 var SpinnerPanel = ({
   hour,
@@ -2027,7 +2093,7 @@ var SpinnerPanel = ({
   onHourInput,
   onMinuteInput,
   onAmpmToggle
-}) => /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__time-row" }, /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ React67.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(1) }, /* @__PURE__ */ React67.createElement(ChevUp, null)), /* @__PURE__ */ React67.createElement(
+}) => /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__time-row" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(1) }, /* @__PURE__ */ React68.createElement(ChevUp, null)), /* @__PURE__ */ React68.createElement(
   "input",
   {
     type: "number",
@@ -2038,7 +2104,7 @@ var SpinnerPanel = ({
     onChange: onHourInput,
     onMouseDown: (e) => e.stopPropagation()
   }
-), /* @__PURE__ */ React67.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(-1) }, /* @__PURE__ */ React67.createElement(ChevDown, null))), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__time-colon" }, ":"), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ React67.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(1) }, /* @__PURE__ */ React67.createElement(ChevUp, null)), /* @__PURE__ */ React67.createElement(
+), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onHourChange(-1) }, /* @__PURE__ */ React68.createElement(ChevDown, null))), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__time-colon" }, ":"), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__time-input-wrap" }, /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(1) }, /* @__PURE__ */ React68.createElement(ChevUp, null)), /* @__PURE__ */ React68.createElement(
   "input",
   {
     type: "number",
@@ -2049,7 +2115,7 @@ var SpinnerPanel = ({
     onChange: onMinuteInput,
     onMouseDown: (e) => e.stopPropagation()
   }
-), /* @__PURE__ */ React67.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(-1) }, /* @__PURE__ */ React67.createElement(ChevDown, null))), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__ampm" }, /* @__PURE__ */ React67.createElement(
+), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__time-spin-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => onMinuteChange(-1) }, /* @__PURE__ */ React68.createElement(ChevDown, null))), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__ampm" }, /* @__PURE__ */ React68.createElement(
   "button",
   {
     type: "button",
@@ -2058,7 +2124,7 @@ var SpinnerPanel = ({
     onClick: () => onAmpmToggle("AM")
   },
   "AM"
-), /* @__PURE__ */ React67.createElement(
+), /* @__PURE__ */ React68.createElement(
   "button",
   {
     type: "button",
@@ -2076,27 +2142,89 @@ var CalendarBody = ({
   dayCells,
   onDayClick,
   onPrev,
-  onNext
-}) => /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ React67.createElement("span", { className: "rf-date-picker__month-label" }, MONTHS[viewMonth], " ", viewYear), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__nav" }, /* @__PURE__ */ React67.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React67.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A"))), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React67.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
-  if (day === null) return /* @__PURE__ */ React67.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__ */ React67.createElement(
+  onNext,
+  onMonthSelect,
+  onYearSelect
+}) => {
+  const [pickerView, setPickerView] = useState5("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__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ React68.createElement(
+    "span",
+    {
+      className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
+      onClick: handleMonthClick
+    },
+    MONTHS[viewMonth]
+  ), /* @__PURE__ */ React68.createElement(
+    "span",
+    {
+      className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
+      onClick: handleYearClick
+    },
+    viewYear
+  )), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ React68.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__ */ React68.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ React68.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__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React68.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
+    if (day === null) return /* @__PURE__ */ React68.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__ */ React68.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,
@@ -2154,7 +2282,9 @@ var DateField = ({
   const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
   const AMPMS = ["AM", "PM"];
   const containerRef = useRef4(null);
-  const inputId = useRef4(`rf-df-${Math.random().toString(36).substr(2, 9)}`).current;
+  const pickerRef = useRef4(null);
+  const [dropUp, setDropUp] = useState5(false);
+  const inputId = useRef4(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
   useEffect4(() => {
     if (value === void 0) return;
     if (!value) {
@@ -2186,6 +2316,13 @@ var DateField = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
+  useEffect4(() => {
+    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 = useCallback((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
@@ -2333,7 +2470,7 @@ var DateField = ({
   const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
   const todayDate = today();
   const isSideVariant = type === "datetime-side" || type === "datetime-scroll";
-  return /* @__PURE__ */ React67.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React67.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ React68.createElement(
     "div",
     {
       className: "rf-text-field__wrapper",
@@ -2342,7 +2479,7 @@ var DateField = ({
       },
       style: { cursor: disabled ? "default" : "pointer" }
     },
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.createElement(
       "input",
       {
         id: inputId,
@@ -2358,7 +2495,7 @@ var DateField = ({
         }
       }
     ),
-    /* @__PURE__ */ React67.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React68.createElement(
       "button",
       {
         type: "button",
@@ -2371,20 +2508,22 @@ var DateField = ({
         },
         "aria-label": "Pick date"
       },
-      /* @__PURE__ */ React67.createElement(CalendarIcon, null)
+      /* @__PURE__ */ React68.createElement(CalendarIcon, null)
     )),
-    label && /* @__PURE__ */ React67.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React67.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
-    variant === "outlined" && /* @__PURE__ */ React67.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ React67.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React67.createElement("span", null, label, required ? " *" : "")))
-  ), open && !disabled && /* @__PURE__ */ React67.createElement(
+    label && /* @__PURE__ */ React68.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React68.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
+    variant === "outlined" && /* @__PURE__ */ React68.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React68.createElement("span", null, label, required ? " *" : "")))
+  ), open && !disabled && /* @__PURE__ */ React68.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()
     },
-    /* @__PURE__ */ React67.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.createElement("div", { className: isSideVariant ? "rf-date-picker__cal-col" : void 0 }, /* @__PURE__ */ React68.createElement(
       CalendarBody,
       {
         viewMonth,
@@ -2394,9 +2533,11 @@ var DateField = ({
         dayCells,
         onDayClick: handleDayClick,
         onPrev: prevMonth,
-        onNext: nextMonth
+        onNext: nextMonth,
+        onMonthSelect: setViewMonth,
+        onYearSelect: setViewYear
       }
-    ), type === "datetime" && /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ React67.createElement(
+    ), type === "datetime" && /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ React68.createElement(
       SpinnerPanel,
       {
         hour,
@@ -2408,8 +2549,8 @@ var DateField = ({
         onMinuteInput: handleMinuteInput,
         onAmpmToggle: handleAmpmToggle
       }
-    )), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ React67.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ React67.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
-    type === "datetime-side" && /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ React67.createElement(
+    )), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__divider" }), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__footer" }, /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__footer-btn", onClick: handleToday }, "Today"), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__footer-btn rf-date-picker__footer-btn--clear", onClick: handleClear }, "Clear"))),
+    type === "datetime-side" && /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__side-spinner" }, /* @__PURE__ */ React68.createElement(
       SpinnerPanel,
       {
         hour,
@@ -2421,22 +2562,22 @@ var DateField = ({
         onMinuteInput: handleMinuteInput,
         onAmpmToggle: handleAmpmToggle
       }
-    )), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
-    type === "datetime-scroll" && /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React67.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ React67.createElement(
+    )), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm)),
+    type === "datetime-scroll" && /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__side-panel" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__side-label" }, "Time"), /* @__PURE__ */ React68.createElement("div", { className: "rf-timescroll" }, /* @__PURE__ */ React68.createElement(
       ScrollColumn,
       {
         items: HOURS,
         selected: hour - 1,
         onSelect: handleScrollHour
       }
-    ), /* @__PURE__ */ React67.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ React67.createElement(
+    ), /* @__PURE__ */ React68.createElement("div", { className: "rf-timescroll__colon" }, ":"), /* @__PURE__ */ React68.createElement(
       ScrollColumn,
       {
         items: MINUTES,
         selected: minute,
         onSelect: handleScrollMinute
       }
-    ), /* @__PURE__ */ React67.createElement(
+    ), /* @__PURE__ */ React68.createElement(
       ScrollColumn,
       {
         items: AMPMS,
@@ -2444,13 +2585,13 @@ var DateField = ({
         onSelect: handleScrollAmpm,
         infinite: false
       }
-    )), /* @__PURE__ */ React67.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
-  )), helperText && /* @__PURE__ */ React67.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+    )), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__side-time-display" }, String(hour).padStart(2, "0"), ":", String(minute).padStart(2, "0"), " ", ampm))
+  )), helperText && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 };
 DateField.displayName = "DateField";
 
 // lib/TextFields/DateRangeField.tsx
-import React68, {
+import React69, {
   useState as useState6,
   useRef as useRef5,
   useEffect as useEffect5
@@ -2470,7 +2611,7 @@ var MONTHS2 = [
   "November",
   "December"
 ];
-var MONTHS_SHORT = [
+var MONTHS_SHORT2 = [
   "Jan",
   "Feb",
   "Mar",
@@ -2507,14 +2648,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);
@@ -2579,7 +2720,7 @@ var detectPreset = (start, end) => {
   if (isSameDay2(start, new Date(2e3, 0, 1)) && isSameDay2(end, today2)) return "all";
   return null;
 };
-var CalendarIcon2 = () => /* @__PURE__ */ React68.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React68.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ React68.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ React68.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ React68.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
+var CalendarIcon2 = () => /* @__PURE__ */ React69.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React69.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), /* @__PURE__ */ React69.createElement("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), /* @__PURE__ */ React69.createElement("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), /* @__PURE__ */ React69.createElement("line", { x1: "3", y1: "10", x2: "21", y2: "10" }));
 var RangeCalendarBody = ({
   viewYear,
   viewMonth,
@@ -2604,7 +2745,7 @@ var RangeCalendarBody = ({
   const hasRange = startDate != null && effectiveEnd != null && !isSameDay2(startDate, effectiveEnd);
   const lo = startDate && effectiveEnd ? startDate <= effectiveEnd ? startDate : effectiveEnd : null;
   const hi = startDate && effectiveEnd ? startDate <= effectiveEnd ? effectiveEnd : startDate : null;
-  return /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-calendar" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-calendar__header" }, /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-calendar" }, /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-calendar__header" }, /* @__PURE__ */ React69.createElement(
     "button",
     {
       type: "button",
@@ -2614,7 +2755,7 @@ var RangeCalendarBody = ({
       "aria-label": "Previous month"
     },
     "\u2039"
-  ), /* @__PURE__ */ React68.createElement("span", { className: "rf-dr-calendar__month-label" }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ React68.createElement(
+  ), /* @__PURE__ */ React69.createElement("span", { className: "rf-dr-calendar__month-label" }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ React69.createElement(
     "button",
     {
       type: "button",
@@ -2624,9 +2765,9 @@ var RangeCalendarBody = ({
       "aria-label": "Next month"
     },
     "\u203A"
-  )), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ React68.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
+  )), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ React69.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
     if (day === null) {
-      return /* @__PURE__ */ React68.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
+      return /* @__PURE__ */ React69.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
     }
     const cellDate = new Date(viewYear, viewMonth, day);
     const isStart = startDate ? isSameDay2(cellDate, startDate) : false;
@@ -2646,7 +2787,7 @@ var RangeCalendarBody = ({
       isStart || isEnd ? "rf-dr-calendar__day--selected" : "",
       isToday && !isStart && !isEnd ? "rf-dr-calendar__day--today" : ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React68.createElement(
+    return /* @__PURE__ */ React69.createElement(
       "div",
       {
         key: day,
@@ -2654,7 +2795,7 @@ var RangeCalendarBody = ({
         onMouseEnter: () => onDayHover(cellDate),
         onMouseLeave: () => onDayHover(null)
       },
-      /* @__PURE__ */ React68.createElement(
+      /* @__PURE__ */ React69.createElement(
         "button",
         {
           type: "button",
@@ -2688,14 +2829,14 @@ var MiniCalendar = ({ selectedDate, todayDate, onSelect, onClose }) => {
       setViewYear((y) => y + 1);
     } else setViewMonth((m) => m + 1);
   };
-  return /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-mini-cal" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-mini-cal__header" }, /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: prevMonth }, "\u2039"), /* @__PURE__ */ React68.createElement("span", { className: "rf-dr-calendar__month-label", style: { fontSize: "0.88rem" } }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: nextMonth }, "\u203A")), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ React68.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
+  return /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-mini-cal" }, /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-mini-cal__header" }, /* @__PURE__ */ React69.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: prevMonth }, "\u2039"), /* @__PURE__ */ React69.createElement("span", { className: "rf-dr-calendar__month-label", style: { fontSize: "0.88rem" } }, MONTHS2[viewMonth], " ", viewYear), /* @__PURE__ */ React69.createElement("button", { type: "button", className: "rf-dr-calendar__nav-btn", onClick: nextMonth }, "\u203A")), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-calendar__weekdays" }, WEEKDAYS2.map((w) => /* @__PURE__ */ React69.createElement("div", { key: w, className: "rf-dr-calendar__weekday" }, w))), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-calendar__grid" }, dayCells.map((day, idx) => {
     if (day === null) {
-      return /* @__PURE__ */ React68.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
+      return /* @__PURE__ */ React69.createElement("div", { key: `e-${idx}`, className: "rf-dr-calendar__cell rf-dr-calendar__cell--empty" });
     }
     const cellDate = new Date(viewYear, viewMonth, day);
     const isSel = selectedDate ? isSameDay2(cellDate, selectedDate) : false;
     const isToday = isSameDay2(cellDate, todayDate);
-    return /* @__PURE__ */ React68.createElement("div", { key: day, className: "rf-dr-calendar__cell" }, /* @__PURE__ */ React68.createElement(
+    return /* @__PURE__ */ React69.createElement("div", { key: day, className: "rf-dr-calendar__cell" }, /* @__PURE__ */ React69.createElement(
       "button",
       {
         type: "button",
@@ -2903,7 +3044,7 @@ var DateRangeField = ({
     className
   ].filter(Boolean).join(" ");
   const inputPlaceholder = variant === "outlined" ? " " : void 0;
-  return /* @__PURE__ */ React68.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React69.createElement("div", { className: "rf-date-field__anchor" }, /* @__PURE__ */ React69.createElement(
     "div",
     {
       className: "rf-text-field__wrapper",
@@ -2912,7 +3053,7 @@ var DateRangeField = ({
       },
       style: { cursor: disabled ? "default" : "pointer" }
     },
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       "input",
       {
         id: inputId,
@@ -2928,7 +3069,7 @@ var DateRangeField = ({
         }
       }
     ),
-    /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement("div", { className: "rf-text-field__adornment rf-text-field__adornment--end" }, /* @__PURE__ */ React69.createElement(
       "button",
       {
         type: "button",
@@ -2941,13 +3082,13 @@ var DateRangeField = ({
         },
         "aria-label": "Pick date range"
       },
-      /* @__PURE__ */ React68.createElement(CalendarIcon2, null)
+      /* @__PURE__ */ React69.createElement(CalendarIcon2, null)
     )),
-    label && /* @__PURE__ */ React68.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React68.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
-    variant === "outlined" && /* @__PURE__ */ React68.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React68.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React68.createElement("legend", { className: "rf-text-field__legend--empty" }))
+    label && /* @__PURE__ */ React69.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React69.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
+    variant === "outlined" && /* @__PURE__ */ React69.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React69.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React69.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React69.createElement("legend", { className: "rf-text-field__legend--empty" }))
   ), open && !disabled && (pickerType === "panel" ? (
     /* ── Panel Mode ── */
-    /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ React68.createElement(React68.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker rf-dr-picker--panel", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__presets" }, PRESETS.map((p, i) => /* @__PURE__ */ React69.createElement(React69.Fragment, { key: p.id }, i > 0 && /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__preset-sep" }), /* @__PURE__ */ React69.createElement(
       "button",
       {
         type: "button",
@@ -2958,7 +3099,7 @@ var DateRangeField = ({
         onClick: () => handlePreset(p.id)
       },
       p.label
-    )))), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__manual" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ React68.createElement(
+    )))), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__manual" }, /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ React69.createElement(
       "div",
       {
         className: [
@@ -2966,8 +3107,8 @@ var DateRangeField = ({
           inlineCal === "start" ? "rf-dr-picker__date-field--active" : ""
         ].filter(Boolean).join(" ")
       },
-      /* @__PURE__ */ React68.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "Start Date"),
-      /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ React68.createElement(
+      /* @__PURE__ */ React69.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "Start Date"),
+      /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ React69.createElement(
         "input",
         {
           type: "text",
@@ -2978,7 +3119,7 @@ var DateRangeField = ({
           onBlur: handleStartInputBlur,
           onMouseDown: (e) => e.stopPropagation()
         }
-      ), /* @__PURE__ */ React68.createElement(
+      ), /* @__PURE__ */ React69.createElement(
         "button",
         {
           type: "button",
@@ -2987,9 +3128,9 @@ var DateRangeField = ({
           onClick: () => setInlineCal((v) => v === "start" ? null : "start"),
           "aria-label": "Pick start date"
         },
-        /* @__PURE__ */ React68.createElement(CalendarIcon2, null)
+        /* @__PURE__ */ React69.createElement(CalendarIcon2, null)
       ))
-    ), inlineCal === "start" && /* @__PURE__ */ React68.createElement(
+    ), inlineCal === "start" && /* @__PURE__ */ React69.createElement(
       MiniCalendar,
       {
         selectedDate: draftStart,
@@ -3000,7 +3141,7 @@ var DateRangeField = ({
         },
         onClose: () => setInlineCal(null)
       }
-    )), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ React68.createElement(
+    )), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__date-field-wrap" }, /* @__PURE__ */ React69.createElement(
       "div",
       {
         className: [
@@ -3008,8 +3149,8 @@ var DateRangeField = ({
           inlineCal === "end" ? "rf-dr-picker__date-field--active" : ""
         ].filter(Boolean).join(" ")
       },
-      /* @__PURE__ */ React68.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "End Date"),
-      /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ React68.createElement(
+      /* @__PURE__ */ React69.createElement("span", { className: "rf-dr-picker__date-floating-label" }, "End Date"),
+      /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__date-display" }, /* @__PURE__ */ React69.createElement(
         "input",
         {
           type: "text",
@@ -3020,7 +3161,7 @@ var DateRangeField = ({
           onBlur: handleEndInputBlur,
           onMouseDown: (e) => e.stopPropagation()
         }
-      ), /* @__PURE__ */ React68.createElement(
+      ), /* @__PURE__ */ React69.createElement(
         "button",
         {
           type: "button",
@@ -3029,9 +3170,9 @@ var DateRangeField = ({
           onClick: () => setInlineCal((v) => v === "end" ? null : "end"),
           "aria-label": "Pick end date"
         },
-        /* @__PURE__ */ React68.createElement(CalendarIcon2, null)
+        /* @__PURE__ */ React69.createElement(CalendarIcon2, null)
       ))
-    ), inlineCal === "end" && /* @__PURE__ */ React68.createElement(
+    ), inlineCal === "end" && /* @__PURE__ */ React69.createElement(
       MiniCalendar,
       {
         selectedDate: draftEnd,
@@ -3042,7 +3183,7 @@ var DateRangeField = ({
         },
         onClose: () => setInlineCal(null)
       }
-    )), !inlineCal && /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__days-section" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ React68.createElement("span", { className: "rf-dr-picker__days-label" }, "Days until today"), /* @__PURE__ */ React68.createElement(
+    )), !inlineCal && /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__days-section" }, /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ React69.createElement("span", { className: "rf-dr-picker__days-label" }, "Days until today"), /* @__PURE__ */ React69.createElement(
       "input",
       {
         type: "number",
@@ -3053,7 +3194,7 @@ var DateRangeField = ({
         onMouseDown: (e) => e.stopPropagation(),
         placeholder: "\u2014"
       }
-    )), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ React68.createElement("span", { className: "rf-dr-picker__days-label" }, "Days from today"), /* @__PURE__ */ React68.createElement(
+    )), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__days-row" }, /* @__PURE__ */ React69.createElement("span", { className: "rf-dr-picker__days-label" }, "Days from today"), /* @__PURE__ */ React69.createElement(
       "input",
       {
         type: "number",
@@ -3064,10 +3205,10 @@ var DateRangeField = ({
         onMouseDown: (e) => e.stopPropagation(),
         placeholder: "\u2014"
       }
-    ))), /* @__PURE__ */ React68.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
+    ))), /* @__PURE__ */ React69.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__footer" }, /* @__PURE__ */ React69.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React69.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY"))))
   ) : (
     /* ── Calendar Mode ── */
-    /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker rf-dr-picker--calendar", onMouseDown: (e) => e.preventDefault() }, /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__calendars" }, /* @__PURE__ */ React69.createElement(
       RangeCalendarBody,
       {
         viewYear: leftViewYear,
@@ -3082,7 +3223,7 @@ var DateRangeField = ({
         onNext: nextMonth,
         showNext: false
       }
-    ), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__cal-col-divider" }), /* @__PURE__ */ React68.createElement(
+    ), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__cal-col-divider" }), /* @__PURE__ */ React69.createElement(
       RangeCalendarBody,
       {
         viewYear: rightViewYear,
@@ -3097,21 +3238,21 @@ var DateRangeField = ({
         onNext: nextMonth,
         showPrev: false
       }
-    )), selecting === "end" && draftStart && /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__cal-hint" }, /* @__PURE__ */ React68.createElement("span", { className: "rf-dr-picker__cal-hint-dot" }), /* @__PURE__ */ React68.createElement("span", null, "Select end date \xB7 started from ", /* @__PURE__ */ React68.createElement("strong", null, formatShort(draftStart)))), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__divider" }), /* @__PURE__ */ React68.createElement("div", { className: "rf-dr-picker__cal-footer" }, draftStart && draftEnd && /* @__PURE__ */ React68.createElement("span", { className: "rf-dr-picker__cal-range-label" }, formatShort(draftStart <= draftEnd ? draftStart : draftEnd), " \u2013 ", formatShort(draftStart <= draftEnd ? draftEnd : draftStart), /* @__PURE__ */ React68.createElement("span", { className: "rf-dr-picker__cal-range-days" }, " ", "(", Math.abs(daysBetween(draftStart, draftEnd)) + 1, " days)")), /* @__PURE__ */ React68.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY")))
-  ))), helperText && /* @__PURE__ */ React68.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
+    )), selecting === "end" && draftStart && /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__cal-hint" }, /* @__PURE__ */ React69.createElement("span", { className: "rf-dr-picker__cal-hint-dot" }), /* @__PURE__ */ React69.createElement("span", null, "Select end date \xB7 started from ", /* @__PURE__ */ React69.createElement("strong", null, formatShort(draftStart)))), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__divider" }), /* @__PURE__ */ React69.createElement("div", { className: "rf-dr-picker__cal-footer" }, draftStart && draftEnd && /* @__PURE__ */ React69.createElement("span", { className: "rf-dr-picker__cal-range-label" }, formatShort(draftStart <= draftEnd ? draftStart : draftEnd), " \u2013 ", formatShort(draftStart <= draftEnd ? draftEnd : draftStart), /* @__PURE__ */ React69.createElement("span", { className: "rf-dr-picker__cal-range-days" }, " ", "(", Math.abs(daysBetween(draftStart, draftEnd)) + 1, " days)")), /* @__PURE__ */ React69.createElement("div", { style: { flex: 1 } }), /* @__PURE__ */ React69.createElement("button", { type: "button", className: "rf-dr-picker__close-btn", onClick: handleClose }, "CLOSE"), /* @__PURE__ */ React69.createElement("button", { type: "button", className: "rf-dr-picker__apply-btn", onClick: handleApply }, "APPLY")))
+  ))), helperText && /* @__PURE__ */ React69.createElement("div", { className: "rf-text-field__helper-text" }, helperText));
 };
 DateRangeField.displayName = "DateRangeField";
 
 // lib/TextFields/Autocomplete.tsx
-import React69, {
+import React70, {
   useState as useState7,
   useRef as useRef6,
   useEffect as useEffect6,
   useCallback as useCallback2
 } from "react";
-var ChevronDownIcon = () => /* @__PURE__ */ React69.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React69.createElement("polyline", { points: "6 9 12 15 18 9" }));
-var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ React69.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ React69.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React69.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
-var CheckIcon = () => /* @__PURE__ */ React69.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React69.createElement("polyline", { points: "20 6 9 17 4 12" }));
+var ChevronDownIcon = () => /* @__PURE__ */ React70.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React70.createElement("polyline", { points: "6 9 12 15 18 9" }));
+var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ React70.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ React70.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React70.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
+var CheckIcon = () => /* @__PURE__ */ React70.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React70.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function defaultGetLabel(option) {
   if (option === null || option === void 0) return "";
   if (typeof option === "string") return option;
@@ -3337,7 +3478,7 @@ function AutocompleteInner(props, _ref) {
     className
   ].filter(Boolean).join(" ");
   const inputPlaceholder = placeholder || (variant === "outlined" ? " " : void 0);
-  return /* @__PURE__ */ React69.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement("div", { ref: containerRef, className: rootClasses, style }, /* @__PURE__ */ React70.createElement(
     "div",
     {
       className: "rf-text-field__wrapper",
@@ -3348,7 +3489,7 @@ function AutocompleteInner(props, _ref) {
         }
       }
     },
-    multiple && visibleTags.map((opt, i) => /* @__PURE__ */ React69.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ React69.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ React69.createElement(
+    multiple && visibleTags.map((opt, i) => /* @__PURE__ */ React70.createElement("span", { key: i, className: "rf-autocomplete__tag" }, /* @__PURE__ */ React70.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis" } }, getOptionLabel(opt)), /* @__PURE__ */ React70.createElement(
       "button",
       {
         type: "button",
@@ -3357,10 +3498,10 @@ function AutocompleteInner(props, _ref) {
         onClick: (e) => removeTag(opt, e),
         tabIndex: -1
       },
-      /* @__PURE__ */ React69.createElement(CloseSmIcon, { size: 12 })
+      /* @__PURE__ */ React70.createElement(CloseSmIcon, { size: 12 })
     ))),
-    hiddenCount > 0 && /* @__PURE__ */ React69.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more"),
-    /* @__PURE__ */ React69.createElement(
+    hiddenCount > 0 && /* @__PURE__ */ React70.createElement("span", { className: "rf-autocomplete__tag-more" }, "+", hiddenCount, " more"),
+    /* @__PURE__ */ React70.createElement(
       "input",
       {
         ref: inputRef,
@@ -3382,9 +3523,9 @@ function AutocompleteInner(props, _ref) {
         "aria-autocomplete": "list"
       }
     ),
-    label && /* @__PURE__ */ React69.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React69.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
-    variant === "outlined" && /* @__PURE__ */ React69.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React69.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React69.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React69.createElement("legend", { className: "rf-text-field__legend--empty" })),
-    /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__endgroup" }, hasClearable && /* @__PURE__ */ React69.createElement(
+    label && /* @__PURE__ */ React70.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React70.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
+    variant === "outlined" && /* @__PURE__ */ React70.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React70.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React70.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React70.createElement("legend", { className: "rf-text-field__legend--empty" })),
+    /* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__endgroup" }, hasClearable && /* @__PURE__ */ React70.createElement(
       "button",
       {
         type: "button",
@@ -3394,8 +3535,8 @@ function AutocompleteInner(props, _ref) {
         tabIndex: -1,
         "aria-label": "Clear"
       },
-      /* @__PURE__ */ React69.createElement(CloseSmIcon, { size: 16 })
-    ), !freeSolo && /* @__PURE__ */ React69.createElement(
+      /* @__PURE__ */ React70.createElement(CloseSmIcon, { size: 16 })
+    ), !freeSolo && /* @__PURE__ */ React70.createElement(
       "button",
       {
         type: "button",
@@ -3407,9 +3548,9 @@ function AutocompleteInner(props, _ref) {
         tabIndex: -1,
         "aria-label": open ? "Close" : "Open"
       },
-      /* @__PURE__ */ React69.createElement(ChevronDownIcon, null)
+      /* @__PURE__ */ React70.createElement(ChevronDownIcon, null)
     ))
-  ), helperText && /* @__PURE__ */ React69.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__popup", role: "presentation" }, loading ? /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ React69.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ React69.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
+  ), helperText && /* @__PURE__ */ React70.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && /* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__popup", role: "presentation" }, loading ? /* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ React70.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ React70.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
     // Grouped render
     (() => {
       const rendered = [];
@@ -3419,7 +3560,7 @@ function AutocompleteInner(props, _ref) {
         if (entry.kind === "group") {
           if (groupItems.length > 0) {
             rendered.push(
-              /* @__PURE__ */ React69.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React69.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
+              /* @__PURE__ */ React70.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React70.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
             );
             groupItems = [];
           }
@@ -3430,7 +3571,7 @@ function AutocompleteInner(props, _ref) {
         }
         if (ei === flatEntries.length - 1 && groupItems.length > 0) {
           rendered.push(
-            /* @__PURE__ */ React69.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React69.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React69.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
+            /* @__PURE__ */ React70.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React70.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React70.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
           );
         }
       });
@@ -3442,7 +3583,7 @@ function AutocompleteInner(props, _ref) {
     const focused = focusedIdx === flatIdx;
     const optDisabled = getOptionDisabled?.(option) ?? false;
     const label2 = getOptionLabel(option);
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React70.createElement(
       "li",
       {
         key: label2 + flatIdx,
@@ -3461,22 +3602,22 @@ function AutocompleteInner(props, _ref) {
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => selectOption(option)
       },
-      renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ React69.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
-      !renderOption && /* @__PURE__ */ React69.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ React69.createElement(CheckIcon, null))
+      renderOption ? renderOption(option, { selected, focused, index: flatIdx }) : /* @__PURE__ */ React70.createElement("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label2),
+      !renderOption && /* @__PURE__ */ React70.createElement("span", { className: "rf-autocomplete__option-check" }, /* @__PURE__ */ React70.createElement(CheckIcon, null))
     );
   }
 }
-var Autocomplete = React69.forwardRef(AutocompleteInner);
+var Autocomplete = React70.forwardRef(AutocompleteInner);
 Autocomplete.displayName = "Autocomplete";
 
 // lib/Progress/RufousLogoLoader.tsx
-import * as React70 from "react";
+import * as React71 from "react";
 var _uid = 0;
 var RufousLogoLoader = ({ size = 80, sx, className }) => {
-  const clipId = React70.useRef(`rll-${++_uid}`).current;
+  const clipId = React71.useRef(`rll-${++_uid}`).current;
   const height = size * (38.795 / 54.585);
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React70.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size, height } }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size, height } }, /* @__PURE__ */ React71.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3485,19 +3626,19 @@ var RufousLogoLoader = ({ size = 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" })))
   ));
 };
 
 // lib/DataGrid/DataGrid.tsx
-import React71, { useState as useState8, useMemo as useMemo2, useRef as useRef8, useEffect as useEffect7 } from "react";
+import React72, { useState as useState8, useMemo as useMemo2, useRef as useRef8, useEffect as useEffect7 } from "react";
 import {
   ChevronUp,
   ChevronDown,
@@ -3564,8 +3705,11 @@ function DataGrid({
   actions,
   pageSize: initialPageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
-  title
+  title,
+  className,
+  sx
 }) {
+  const sxClass = useSx(sx);
   const [columnOverrides, setColumnOverrides] = useState8({});
   const resolvedColumns = useMemo2(() => {
     return initialColumnsProp.map((col) => {
@@ -3866,7 +4010,7 @@ function DataGrid({
     return offset;
   };
   const hasActiveFilters = advancedFilters.some((f) => f.value);
-  return /* @__PURE__ */ React71.createElement("div", { className: "dg-root" }, /* @__PURE__ */ React71.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React71.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React71.createElement("h2", null, title), /* @__PURE__ */ React71.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React71.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React71.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React71.createElement(Search, { size: 15 }), /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React72.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React72.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React72.createElement("h2", null, title), /* @__PURE__ */ React72.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React72.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React72.createElement(Search, { size: 15 }), /* @__PURE__ */ React72.createElement(
     "input",
     {
       className: "dg-search",
@@ -3877,52 +4021,52 @@ function DataGrid({
         setCurrentPage(1);
       }
     }
-  )), /* @__PURE__ */ React71.createElement(
+  )), /* @__PURE__ */ React72.createElement(
     "button",
     {
       className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
       onClick: () => setShowAdvancedFilter(true),
       title: "Filters"
     },
-    /* @__PURE__ */ React71.createElement(Filter, { size: 16 })
-  ), /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React72.createElement(Filter, { size: 16 })
+  ), /* @__PURE__ */ React72.createElement(
     "button",
     {
       className: "dg-icon-btn",
       onClick: () => setShowManageColumns(true),
       title: "Manage Columns"
     },
-    /* @__PURE__ */ React71.createElement(Columns, { size: 16 })
-  ), /* @__PURE__ */ React71.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React71.createElement(Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ React71.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ React71.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React71.createElement("thead", null, /* @__PURE__ */ React71.createElement("tr", null, visibleColumns.map((col, idx) => {
+    /* @__PURE__ */ React72.createElement(Columns, { size: 16 })
+  ), /* @__PURE__ */ React72.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React72.createElement(Download, { size: 14 }), " Export CSV"))), /* @__PURE__ */ React72.createElement("div", { className: "dg-table-wrap" }, /* @__PURE__ */ React72.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React72.createElement("thead", null, /* @__PURE__ */ React72.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
     const rightOffset = getRightOffset(col, idx);
     const isSorted = sortField === col.field;
-    return /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React72.createElement(
       "th",
       {
         key: colField,
         className: `dg-thead-cell${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""} ${col.headerClassName || ""}`,
         style: { width, minWidth: width, left: leftOffset, right: rightOffset, flex: col.flex }
       },
-      /* @__PURE__ */ React71.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ React71.createElement(
+      /* @__PURE__ */ React72.createElement("div", { className: "dg-th-inner" }, /* @__PURE__ */ React72.createElement(
         "div",
         {
           className: `dg-th-label${col.sortable === false ? " no-sort" : ""}`,
           onClick: () => col.sortable !== false && handleSort(col.field || "")
         },
         col.headerName,
-        isSorted && sortDirection === "asc" && /* @__PURE__ */ React71.createElement(ChevronUp, { size: 12 }),
-        isSorted && sortDirection === "desc" && /* @__PURE__ */ React71.createElement(ChevronDown, { size: 12 })
-      ), /* @__PURE__ */ React71.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ React71.createElement(
+        isSorted && sortDirection === "asc" && /* @__PURE__ */ React72.createElement(ChevronUp, { size: 12 }),
+        isSorted && sortDirection === "desc" && /* @__PURE__ */ React72.createElement(ChevronDown, { size: 12 })
+      ), /* @__PURE__ */ React72.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ React72.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
           onClick: (e) => handleMenuOpen(e, colField)
         },
-        /* @__PURE__ */ React71.createElement(MoreVertical, { size: 13 })
-      ), /* @__PURE__ */ React71.createElement(
+        /* @__PURE__ */ React72.createElement(MoreVertical, { size: 13 })
+      ), /* @__PURE__ */ React72.createElement(
         "div",
         {
           className: `dg-resizer${resizingColumn === colField ? " resizing" : ""}`,
@@ -3935,12 +4079,12 @@ function DataGrid({
         }
       )))
     );
-  }), actions && /* @__PURE__ */ React71.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ React71.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ React71.createElement("tr", null, /* @__PURE__ */ React71.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ React71.createElement("tr", { key: item.id, className: "dg-tbody-row" }, visibleColumns.map((col, idx) => {
+  }), actions && /* @__PURE__ */ React72.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ React72.createElement("tbody", null, paginatedData.length === 0 ? /* @__PURE__ */ React72.createElement("tr", null, /* @__PURE__ */ React72.createElement("td", { colSpan: visibleColumns.length + (actions ? 1 : 0), className: "dg-empty" }, "No records found")) : paginatedData.map((item) => /* @__PURE__ */ React72.createElement("tr", { key: item.id, className: "dg-tbody-row" }, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
     const rightOffset = getRightOffset(col, idx);
-    return /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React72.createElement(
       "td",
       {
         key: `${item.id}-${colField}`,
@@ -3961,11 +4105,11 @@ function DataGrid({
         return String(formattedValue ?? "");
       })()
     );
-  }), actions && /* @__PURE__ */ React71.createElement("td", { className: "dg-row-actions-cell" }, (() => {
+  }), actions && /* @__PURE__ */ React72.createElement("td", { className: "dg-row-actions-cell" }, (() => {
     const resolvedActions = typeof actions === "function" ? actions(item) : actions;
     const visibleActions = resolvedActions.filter((a) => !a.show || a.show(item));
     if (visibleActions.length === 0) return null;
-    return /* @__PURE__ */ React71.createElement("div", { className: "dg-row-actions" }, /* @__PURE__ */ React71.createElement("div", { className: "dg-action-group" }, visibleActions.map((action, i) => /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React72.createElement("div", { className: "dg-row-actions" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-action-group" }, visibleActions.map((action, i) => /* @__PURE__ */ React72.createElement(
       "button",
       {
         key: i,
@@ -3976,7 +4120,7 @@ function DataGrid({
       },
       action.icon
     ))));
-  })())))))), /* @__PURE__ */ React71.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React71.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React71.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React71.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React71.createElement(
+  })())))))), /* @__PURE__ */ React72.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React72.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React72.createElement(
     "select",
     {
       value: pageSize,
@@ -3985,8 +4129,8 @@ function DataGrid({
         setCurrentPage(1);
       }
     },
-    pageSizeOptions.map((o) => /* @__PURE__ */ React71.createElement("option", { key: o, value: o }, o))
-  )), /* @__PURE__ */ React71.createElement("span", null, (currentPage - 1) * pageSize + 1, "\u2013", Math.min(currentPage * pageSize, filteredData.length), " of ", filteredData.length)), /* @__PURE__ */ React71.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ React71.createElement("button", { className: "dg-page-btn", disabled: currentPage === 1, onClick: () => setCurrentPage((p) => p - 1) }, /* @__PURE__ */ React71.createElement(ChevronLeft, { size: 15 })), /* @__PURE__ */ React71.createElement("span", { className: "dg-page-fraction" }, currentPage, " / ", totalPages), /* @__PURE__ */ React71.createElement("button", { className: "dg-page-btn", disabled: currentPage === totalPages, onClick: () => setCurrentPage((p) => p + 1) }, /* @__PURE__ */ React71.createElement(ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ React71.createElement(
+    pageSizeOptions.map((o) => /* @__PURE__ */ React72.createElement("option", { key: o, value: o }, o))
+  )), /* @__PURE__ */ React72.createElement("span", null, (currentPage - 1) * pageSize + 1, "\u2013", Math.min(currentPage * pageSize, filteredData.length), " of ", filteredData.length)), /* @__PURE__ */ React72.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ React72.createElement("button", { className: "dg-page-btn", disabled: currentPage === 1, onClick: () => setCurrentPage((p) => p - 1) }, /* @__PURE__ */ React72.createElement(ChevronLeft, { size: 15 })), /* @__PURE__ */ React72.createElement("span", { className: "dg-page-fraction" }, currentPage, " / ", totalPages), /* @__PURE__ */ React72.createElement("button", { className: "dg-page-btn", disabled: currentPage === totalPages, onClick: () => setCurrentPage((p) => p + 1) }, /* @__PURE__ */ React72.createElement(ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ React72.createElement(
     "div",
     {
       ref: menuRef,
@@ -3997,25 +4141,25 @@ function DataGrid({
         ...menuPosition.right !== void 0 ? { right: menuPosition.right } : {}
       }
     },
-    /* @__PURE__ */ React71.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ React71.createElement(ArrowUp, { size: 14 }), " Sort ascending"),
-    /* @__PURE__ */ React71.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ React71.createElement(ArrowDown, { size: 14 }), " Sort descending"),
-    /* @__PURE__ */ React71.createElement("div", { className: "dg-menu-divider" }),
+    /* @__PURE__ */ React72.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "asc") }, /* @__PURE__ */ React72.createElement(ArrowUp, { size: 14 }), " Sort ascending"),
+    /* @__PURE__ */ React72.createElement("button", { className: "dg-menu-item", onClick: () => handleSort(activeMenu, "desc") }, /* @__PURE__ */ React72.createElement(ArrowDown, { size: 14 }), " Sort descending"),
+    /* @__PURE__ */ React72.createElement("div", { className: "dg-menu-divider" }),
     (() => {
       const col = resolvedColumns.find((c) => c.field === activeMenu);
       if (!col) return null;
-      return /* @__PURE__ */ React71.createElement(React71.Fragment, null, col.pinned === "left" ? /* @__PURE__ */ React71.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React71.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React71.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React71.createElement(Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"), col.pinned === "right" ? /* @__PURE__ */ React71.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React71.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React71.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React71.createElement(Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"));
+      return /* @__PURE__ */ React72.createElement(React72.Fragment, null, col.pinned === "left" ? /* @__PURE__ */ React72.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React72.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React72.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "left") }, /* @__PURE__ */ React72.createElement(Pin, { size: 14, style: { transform: "rotate(45deg)" } }), " Pin left"), col.pinned === "right" ? /* @__PURE__ */ React72.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React72.createElement(Pin, { size: 14, style: { transform: "rotate(0deg)", opacity: 0.5 } }), " Unpin") : /* @__PURE__ */ React72.createElement("button", { className: "dg-menu-item", onClick: () => togglePin(activeMenu, "right") }, /* @__PURE__ */ React72.createElement(Pin, { size: 14, style: { transform: "rotate(-45deg)" } }), " Pin right"));
     })(),
-    /* @__PURE__ */ React71.createElement("div", { className: "dg-menu-divider" }),
-    /* @__PURE__ */ React71.createElement("button", { className: "dg-menu-item", onClick: () => {
+    /* @__PURE__ */ React72.createElement("div", { className: "dg-menu-divider" }),
+    /* @__PURE__ */ React72.createElement("button", { className: "dg-menu-item", onClick: () => {
       setShowAdvancedFilter(true);
       setActiveMenu(null);
-    } }, /* @__PURE__ */ React71.createElement(Filter, { size: 14 }), " Filter\u2026"),
-    /* @__PURE__ */ React71.createElement("button", { className: "dg-menu-item", onClick: () => toggleHide(activeMenu) }, /* @__PURE__ */ React71.createElement(EyeOff, { size: 14 }), " Hide column"),
-    /* @__PURE__ */ React71.createElement("button", { className: "dg-menu-item", onClick: () => {
+    } }, /* @__PURE__ */ React72.createElement(Filter, { size: 14 }), " Filter\u2026"),
+    /* @__PURE__ */ React72.createElement("button", { className: "dg-menu-item", onClick: () => toggleHide(activeMenu) }, /* @__PURE__ */ React72.createElement(EyeOff, { size: 14 }), " Hide column"),
+    /* @__PURE__ */ React72.createElement("button", { className: "dg-menu-item", onClick: () => {
       setShowManageColumns(true);
       setActiveMenu(null);
-    } }, /* @__PURE__ */ React71.createElement(Columns, { size: 14 }), " Manage columns")
-  ), showManageColumns && /* @__PURE__ */ React71.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowManageColumns(false) }, /* @__PURE__ */ React71.createElement("div", { className: "dg-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React71.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React71.createElement("h3", null, "Manage Columns"), /* @__PURE__ */ React71.createElement("button", { className: "dg-icon-btn", onClick: () => setShowManageColumns(false) }, /* @__PURE__ */ React71.createElement(X2, { size: 18 }))), /* @__PURE__ */ React71.createElement("div", { className: "dg-modal-body" }, /* @__PURE__ */ React71.createElement("div", { className: "dg-search-wrap", style: { marginBottom: 8 } }, /* @__PURE__ */ React71.createElement(Search, { size: 14 }), /* @__PURE__ */ React71.createElement(
+    } }, /* @__PURE__ */ React72.createElement(Columns, { size: 14 }), " Manage columns")
+  ), showManageColumns && /* @__PURE__ */ React72.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowManageColumns(false) }, /* @__PURE__ */ React72.createElement("div", { className: "dg-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React72.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React72.createElement("h3", null, "Manage Columns"), /* @__PURE__ */ React72.createElement("button", { className: "dg-icon-btn", onClick: () => setShowManageColumns(false) }, /* @__PURE__ */ React72.createElement(X2, { size: 18 }))), /* @__PURE__ */ React72.createElement("div", { className: "dg-modal-body" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-search-wrap", style: { marginBottom: 8 } }, /* @__PURE__ */ React72.createElement(Search, { size: 14 }), /* @__PURE__ */ React72.createElement(
     "input",
     {
       className: "dg-search",
@@ -4027,15 +4171,15 @@ function DataGrid({
   )), resolvedColumns.filter((c) => c.header.toLowerCase().includes(colSearch.toLowerCase())).map((col) => {
     const key = String(col.key);
     const isUnhideable = col.hideable === false;
-    return /* @__PURE__ */ React71.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ React71.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ React71.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ React71.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ React71.createElement(EyeOff, { size: 14 }) : /* @__PURE__ */ React71.createElement(EyeOff, { size: 14, style: { opacity: 0.4 } })));
-  })), /* @__PURE__ */ React71.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React71.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
+    return /* @__PURE__ */ React72.createElement("div", { key, className: `dg-col-row${isUnhideable ? " disabled" : ""}` }, /* @__PURE__ */ React72.createElement("div", { className: "dg-col-label" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-col-dot", style: { background: col.hidden ? "var(--border-color)" : "var(--primary-color)" } }), col.header), !isUnhideable && /* @__PURE__ */ React72.createElement("button", { className: "dg-icon-btn", onClick: () => toggleHide(key) }, col.hidden ? /* @__PURE__ */ React72.createElement(EyeOff, { size: 14 }) : /* @__PURE__ */ React72.createElement(EyeOff, { size: 14, style: { opacity: 0.4 } })));
+  })), /* @__PURE__ */ React72.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React72.createElement("button", { className: "dg-action-btn", onClick: () => setColumnOverrides((prev) => {
     const next = { ...prev };
     resolvedColumns.forEach((c) => {
       const k = String(c.key);
       next[k] = { ...next[k], hidden: false };
     });
     return next;
-  }) }, "Show All"), /* @__PURE__ */ React71.createElement("button", { className: "dg-action-btn", onClick: () => {
+  }) }, "Show All"), /* @__PURE__ */ React72.createElement("button", { className: "dg-action-btn", onClick: () => {
     const newOverrides = { ...columnOverrides };
     resolvedColumns.forEach((c) => {
       if (c.hideable !== false) {
@@ -4044,21 +4188,21 @@ function DataGrid({
       }
     });
     setColumnOverrides(newOverrides);
-  } }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ React71.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React71.createElement("div", { className: "dg-modal dg-modal-wide dg-filter-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React71.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React71.createElement("h3", null, "Filters"), /* @__PURE__ */ React71.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React71.createElement(X2, { size: 18 }))), /* @__PURE__ */ React71.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ React71.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ React71.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ React71.createElement(
+  } }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ React72.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React72.createElement("div", { className: "dg-modal dg-modal-wide dg-filter-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React72.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React72.createElement("h3", null, "Filters"), /* @__PURE__ */ React72.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React72.createElement(X2, { size: 18 }))), /* @__PURE__ */ React72.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ React72.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ React72.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ React72.createElement(
     "button",
     {
       className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
       onClick: () => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, logic: "AND" } : fi))
     },
     "AND"
-  ), /* @__PURE__ */ React71.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     "button",
     {
       className: `dg-logic-btn${f.logic === "OR" ? " active" : ""}`,
       onClick: () => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, logic: "OR" } : fi))
     },
     "OR"
-  )), /* @__PURE__ */ React71.createElement("div", { className: "dg-filter-row" }, advancedFilters.length > 1 && /* @__PURE__ */ React71.createElement("button", { className: "dg-icon-btn", onClick: () => setAdvancedFilters((p) => p.filter((_, i) => i !== idx)) }, /* @__PURE__ */ React71.createElement(X2, { size: 14 })), /* @__PURE__ */ React71.createElement(
+  )), /* @__PURE__ */ React72.createElement("div", { className: "dg-filter-row" }, advancedFilters.length > 1 && /* @__PURE__ */ React72.createElement("button", { className: "dg-icon-btn", onClick: () => setAdvancedFilters((p) => p.filter((_, i) => i !== idx)) }, /* @__PURE__ */ React72.createElement(X2, { size: 14 })), /* @__PURE__ */ React72.createElement(
     "select",
     {
       className: "dg-filter-select",
@@ -4070,20 +4214,20 @@ function DataGrid({
         setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: newColKey, operator: defaultOp, value: "" } : fi));
       }
     },
-    resolvedColumns.map((c) => /* @__PURE__ */ React71.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
+    resolvedColumns.map((c) => /* @__PURE__ */ React72.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
   ), (() => {
     const col = resolvedColumns.find((c) => String(c.key) === f.column);
     const operators = getOperatorsForType(col?.type);
     const hideValue = f.operator === "is empty" || f.operator === "is not empty";
-    return /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
       "select",
       {
         className: "dg-filter-select dg-filter-select-sm",
         value: f.operator,
         onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, operator: e.target.value, value: "" } : fi))
       },
-      operators.map((op) => /* @__PURE__ */ React71.createElement("option", { key: op.value, value: op.value }, op.label))
-    ), !hideValue && col?.type === "date" && /* @__PURE__ */ React71.createElement("div", { className: "dg-filter-datefield" }, /* @__PURE__ */ React71.createElement(
+      operators.map((op) => /* @__PURE__ */ React72.createElement("option", { key: op.value, value: op.value }, op.label))
+    ), !hideValue && col?.type === "date" && /* @__PURE__ */ React72.createElement("div", { className: "dg-filter-datefield" }, /* @__PURE__ */ React72.createElement(
       DateField,
       {
         value: f.value,
@@ -4092,17 +4236,17 @@ function DataGrid({
       }
     )), !hideValue && col?.type === "status" && (() => {
       const options = col.statusOptions || [...new Set(data.map((item) => String(item[col.field || col.key || ""])))].filter((v) => v && v !== "undefined" && v !== "null").sort();
-      return /* @__PURE__ */ React71.createElement(
+      return /* @__PURE__ */ React72.createElement(
         "select",
         {
           className: "dg-filter-select",
           value: f.value,
           onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
         },
-        /* @__PURE__ */ React71.createElement("option", { value: "" }, "Select\u2026"),
-        options.map((opt) => /* @__PURE__ */ React71.createElement("option", { key: opt, value: opt }, opt))
+        /* @__PURE__ */ React72.createElement("option", { value: "" }, "Select\u2026"),
+        options.map((opt) => /* @__PURE__ */ React72.createElement("option", { key: opt, value: opt }, opt))
       );
-    })(), !hideValue && col?.type !== "date" && col?.type !== "status" && /* @__PURE__ */ React71.createElement(
+    })(), !hideValue && col?.type !== "date" && col?.type !== "status" && /* @__PURE__ */ React72.createElement(
       "input",
       {
         type: col?.type === "number" ? "number" : "text",
@@ -4112,7 +4256,7 @@ function DataGrid({
         onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
       }
     ));
-  })()))), /* @__PURE__ */ React71.createElement(
+  })()))), /* @__PURE__ */ React72.createElement(
     "button",
     {
       className: "dg-action-btn",
@@ -4123,9 +4267,9 @@ function DataGrid({
         setAdvancedFilters((p) => [...p, { column: String(firstCol.key), operator: defaultOp, value: "", logic: "AND" }]);
       }
     },
-    /* @__PURE__ */ React71.createElement(Plus, { size: 14 }),
+    /* @__PURE__ */ React72.createElement(Plus, { size: 14 }),
     " Add Filter"
-  )), /* @__PURE__ */ React71.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React71.createElement(
+  )), /* @__PURE__ */ React72.createElement("div", { className: "dg-modal-footer" }, /* @__PURE__ */ React72.createElement(
     "button",
     {
       className: "dg-action-btn",
@@ -4134,13 +4278,13 @@ function DataGrid({
         setAdvancedFilters([{ column: String(firstCol.key), operator: getDefaultOperator(firstCol?.type), value: "", logic: "AND" }]);
       }
     },
-    /* @__PURE__ */ React71.createElement(Trash2, { size: 14 }),
+    /* @__PURE__ */ React72.createElement(Trash2, { size: 14 }),
     " Reset"
-  ), /* @__PURE__ */ React71.createElement("button", { className: "submit-btn", onClick: () => setShowAdvancedFilter(false) }, "Apply")))));
+  ), /* @__PURE__ */ React72.createElement("button", { className: "submit-btn", onClick: () => setShowAdvancedFilter(false) }, "Apply")))));
 }
 
 // lib/Editors/RichTextEditor.tsx
-import React72, { useEffect as useEffect8, useRef as useRef9, useState as useState9 } from "react";
+import React73, { useEffect as useEffect8, useRef as useRef9, useState as useState9 } from "react";
 import JoditReact from "jodit-react";
 var MOBILE_BREAKPOINT = 768;
 var TODO_STATES = [
@@ -4449,7 +4593,7 @@ function RichTextEditor({
     iconURL: showAll ? "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIi8+PHBvbHlsaW5lIHBvaW50cz0iOCAxNCAxMiAxMCAxNiAxNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=" : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIi8+PHBvbHlsaW5lIHBvaW50cz0iOCAxMCAxMiAxNCAxNiAxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=",
     exec: () => setShowAll((prev) => !prev)
   };
-  const config = React72.useMemo(() => {
+  const config = React73.useMemo(() => {
     let uploadConfig = {};
     if (uploadUrl) {
       const uploadData = {};
@@ -4565,14 +4709,14 @@ function RichTextEditor({
       safePluginList: ["changecase", "rteKeyLogger"]
     };
   }, [isMobile, showAll, isListening, disabled, aiSupport, licenseKey, translationKey, token, uploadUrl, mentions?.arr?.length, height, width, allowResizeY, fullSize, placeholder]);
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(
     "div",
     {
       ref: containerRef,
       className: `rte-wrapper ${isListening ? "rte-listening" : ""} ${className}`,
       style
     },
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React73.createElement(
       JoditReact,
       {
         ref: editorRef,
@@ -4583,7 +4727,7 @@ function RichTextEditor({
         onBlur: (v) => onBlur?.(v)
       }
     ),
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React73.createElement(
       "div",
       {
         className: "rte-speech-popup",
@@ -4595,26 +4739,26 @@ function RichTextEditor({
           pointerEvents: "none"
         }
       },
-      /* @__PURE__ */ React72.createElement("span", { className: "rte-speech-dot" }),
-      /* @__PURE__ */ React72.createElement("span", null, speechText || "\u2026")
+      /* @__PURE__ */ React73.createElement("span", { className: "rte-speech-dot" }),
+      /* @__PURE__ */ React73.createElement("span", null, speechText || "\u2026")
     ),
-    error && /* @__PURE__ */ React72.createElement("p", { className: "rte-error" }, error)
+    error && /* @__PURE__ */ React73.createElement("p", { className: "rte-error" }, error)
   );
 }
 
 // lib/Select/Select.tsx
-import React73, {
+import React74, {
   useState as useState10,
   useRef as useRef10,
   useEffect as useEffect9,
   useCallback as useCallback3
 } from "react";
-var ChevronDownIcon2 = () => /* @__PURE__ */ React73.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React73.createElement("polyline", { points: "6 9 12 15 18 9" }));
-var CheckIcon2 = () => /* @__PURE__ */ React73.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React73.createElement("polyline", { points: "20 6 9 17 4 12" }));
+var ChevronDownIcon2 = () => /* @__PURE__ */ React74.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React74.createElement("polyline", { points: "6 9 12 15 18 9" }));
+var CheckIcon2 = () => /* @__PURE__ */ React74.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React74.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function normaliseOptions(options) {
   return options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
 }
-var Select = React73.forwardRef(function Select2(props, ref) {
+var Select = React74.forwardRef(function Select2(props, ref) {
   const {
     options: rawOptions,
     value,
@@ -4746,20 +4890,20 @@ var Select = React73.forwardRef(function Select2(props, ref) {
     if (multiple) {
       const labels = getSelectedLabels();
       if (labels.length === 0) {
-        return /* @__PURE__ */ React73.createElement("div", { className: "rf-select__chips" }, placeholder && /* @__PURE__ */ React73.createElement("span", { className: "rf-select__display rf-select__display--placeholder" }, placeholder));
+        return /* @__PURE__ */ React74.createElement("div", { className: "rf-select__chips" }, placeholder && /* @__PURE__ */ React74.createElement("span", { className: "rf-select__display rf-select__display--placeholder" }, placeholder));
       }
       if (labels.length <= 2) {
-        return /* @__PURE__ */ React73.createElement("div", { className: "rf-select__chips" }, labels.map((l, i) => /* @__PURE__ */ React73.createElement("span", { key: i, className: "rf-select__chip" }, l)));
+        return /* @__PURE__ */ React74.createElement("div", { className: "rf-select__chips" }, labels.map((l, i) => /* @__PURE__ */ React74.createElement("span", { key: i, className: "rf-select__chip" }, l)));
       }
-      return /* @__PURE__ */ React73.createElement("div", { className: "rf-select__chips" }, labels.slice(0, 2).map((l, i) => /* @__PURE__ */ React73.createElement("span", { key: i, className: "rf-select__chip" }, l)), /* @__PURE__ */ React73.createElement("span", { className: "rf-select__count" }, "+", labels.length - 2));
+      return /* @__PURE__ */ React74.createElement("div", { className: "rf-select__chips" }, labels.slice(0, 2).map((l, i) => /* @__PURE__ */ React74.createElement("span", { key: i, className: "rf-select__chip" }, l)), /* @__PURE__ */ React74.createElement("span", { className: "rf-select__count" }, "+", labels.length - 2));
     }
     const selectedOpt = options.find((o) => o.value === value);
     if (selectedOpt) {
-      return /* @__PURE__ */ React73.createElement("div", { className: "rf-select__display" }, selectedOpt.label);
+      return /* @__PURE__ */ React74.createElement("div", { className: "rf-select__display" }, selectedOpt.label);
     }
-    return /* @__PURE__ */ React73.createElement("div", { className: `rf-select__display${placeholder ? " rf-select__display--placeholder" : ""}` }, placeholder || "\xA0");
+    return /* @__PURE__ */ React74.createElement("div", { className: `rf-select__display${placeholder ? " rf-select__display--placeholder" : ""}` }, placeholder || "\xA0");
   };
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement(
     "div",
     {
       ref: (node) => {
@@ -4770,7 +4914,7 @@ var Select = React73.forwardRef(function Select2(props, ref) {
       className: rootClasses,
       style
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React74.createElement(
       "div",
       {
         className: "rf-text-field__wrapper",
@@ -4784,15 +4928,15 @@ var Select = React73.forwardRef(function Select2(props, ref) {
         onKeyDown: handleKeyDown
       },
       renderDisplay(),
-      label && /* @__PURE__ */ React73.createElement("label", { id: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React73.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
-      variant === "outlined" && /* @__PURE__ */ React73.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React73.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React73.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React73.createElement("legend", { className: "rf-text-field__legend--empty" })),
-      /* @__PURE__ */ React73.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React73.createElement(ChevronDownIcon2, null))
+      label && /* @__PURE__ */ React74.createElement("label", { id: inputId, className: "rf-text-field__label" }, label, required && /* @__PURE__ */ React74.createElement("span", { className: "rf-text-field__asterisk" }, " *")),
+      variant === "outlined" && /* @__PURE__ */ React74.createElement("fieldset", { className: "rf-text-field__notch" }, label ? /* @__PURE__ */ React74.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ React74.createElement("span", null, label, required ? " *" : "")) : /* @__PURE__ */ React74.createElement("legend", { className: "rf-text-field__legend--empty" })),
+      /* @__PURE__ */ React74.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React74.createElement(ChevronDownIcon2, null))
     ),
-    helperText && /* @__PURE__ */ React73.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
-    open && !disabled && /* @__PURE__ */ React73.createElement("div", { className: "rf-select__popup", role: "presentation" }, /* @__PURE__ */ React73.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
+    helperText && /* @__PURE__ */ React74.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
+    open && !disabled && /* @__PURE__ */ React74.createElement("div", { className: "rf-select__popup", role: "presentation" }, /* @__PURE__ */ React74.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
       const selected = isSelected(opt.value);
       const focused = focusedIdx === idx;
-      return /* @__PURE__ */ React73.createElement(
+      return /* @__PURE__ */ React74.createElement(
         "li",
         {
           key: opt.value,
@@ -4811,8 +4955,8 @@ var Select = React73.forwardRef(function Select2(props, ref) {
           onMouseDown: (e) => e.preventDefault(),
           onClick: () => selectOption(opt)
         },
-        /* @__PURE__ */ React73.createElement("span", { className: "rf-select__option-label" }, opt.label),
-        /* @__PURE__ */ React73.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React73.createElement(CheckIcon2, null))
+        /* @__PURE__ */ React74.createElement("span", { className: "rf-select__option-label" }, opt.label),
+        /* @__PURE__ */ React74.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React74.createElement(CheckIcon2, null))
       );
     })))
   );
@@ -4820,7 +4964,7 @@ var Select = React73.forwardRef(function Select2(props, ref) {
 Select.displayName = "Select";
 
 // lib/Slider/Slider.tsx
-import React74, {
+import React75, {
   useState as useState11,
   useRef as useRef11,
   useEffect as useEffect10,
@@ -4835,7 +4979,7 @@ function snapToStep(val, min, step) {
 function pct(val, min, max) {
   return (val - min) / (max - min) * 100;
 }
-var Slider = React74.forwardRef(function Slider2(props, ref) {
+var Slider = React75.forwardRef(function Slider2(props, ref) {
   const {
     value,
     onChange,
@@ -4975,7 +5119,7 @@ var Slider = React74.forwardRef(function Slider2(props, ref) {
     const val = vals[thumb];
     const p = pct(val, min, max);
     const thumbStyle = orientation === "vertical" ? { bottom: `${p}%`, transform: "translate(-50%, 50%)" } : { left: `${p}%` };
-    return /* @__PURE__ */ React74.createElement(
+    return /* @__PURE__ */ React75.createElement(
       "div",
       {
         key: thumb,
@@ -4991,30 +5135,30 @@ var Slider = React74.forwardRef(function Slider2(props, ref) {
         onPointerDown: (e) => handleThumbPointerDown(e, thumb),
         onKeyDown: (e) => handleThumbKeyDown(e, thumb)
       },
-      valueLabelDisplay !== "off" && /* @__PURE__ */ React74.createElement("div", { className: "rf-slider__value-label", "aria-hidden": "true" }, val)
+      valueLabelDisplay !== "off" && /* @__PURE__ */ React75.createElement("div", { className: "rf-slider__value-label", "aria-hidden": "true" }, val)
     );
   };
-  return /* @__PURE__ */ React74.createElement("div", { ref, className: rootClasses, style }, label && /* @__PURE__ */ React74.createElement("div", { className: "rf-slider__label" }, label), /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React75.createElement("div", { ref, className: rootClasses, style }, label && /* @__PURE__ */ React75.createElement("div", { className: "rf-slider__label" }, label), /* @__PURE__ */ React75.createElement(
     "div",
     {
       ref: trackRef,
       className: "rf-slider__track-container",
       onPointerDown: handleTrackPointerDown
     },
-    /* @__PURE__ */ React74.createElement("div", { className: "rf-slider__rail", "aria-hidden": "true" }),
-    /* @__PURE__ */ React74.createElement("div", { className: "rf-slider__track", style: trackStyle, "aria-hidden": "true" }),
+    /* @__PURE__ */ React75.createElement("div", { className: "rf-slider__rail", "aria-hidden": "true" }),
+    /* @__PURE__ */ React75.createElement("div", { className: "rf-slider__track", style: trackStyle, "aria-hidden": "true" }),
     computedMarks.map((mark) => {
       const p = pct(mark.value, min, max);
       const isActive = isRange ? mark.value >= vals[0] && mark.value <= vals[1] : mark.value <= vals[0];
       const markStyle = orientation === "vertical" ? { bottom: `${p}%`, transform: "translate(-50%, 50%)" } : { left: `${p}%` };
-      return /* @__PURE__ */ React74.createElement(React74.Fragment, { key: mark.value }, /* @__PURE__ */ React74.createElement(
+      return /* @__PURE__ */ React75.createElement(React75.Fragment, { key: mark.value }, /* @__PURE__ */ React75.createElement(
         "div",
         {
           className: `rf-slider__mark${isActive ? " rf-slider__mark--active" : ""}`,
           style: markStyle,
           "aria-hidden": "true"
         }
-      ), mark.label && orientation === "horizontal" && /* @__PURE__ */ React74.createElement(
+      ), mark.label && orientation === "horizontal" && /* @__PURE__ */ React75.createElement(
         "div",
         {
           className: "rf-slider__mark-label",
@@ -5026,13 +5170,13 @@ var Slider = React74.forwardRef(function Slider2(props, ref) {
     }),
     renderThumb(0),
     isRange && renderThumb(1)
-  ), hasLabelledMarks && orientation === "horizontal" && /* @__PURE__ */ React74.createElement("div", { className: "rf-slider__marks-labels", "aria-hidden": "true" }));
+  ), hasLabelledMarks && orientation === "horizontal" && /* @__PURE__ */ React75.createElement("div", { className: "rf-slider__marks-labels", "aria-hidden": "true" }));
 });
 Slider.displayName = "Slider";
 
 // lib/Switch/Switch.tsx
-import React75, { useRef as useRef12 } from "react";
-var Switch = React75.forwardRef(function Switch2(props, ref) {
+import React76, { useRef as useRef12 } from "react";
+var Switch = React76.forwardRef(function Switch2(props, ref) {
   const {
     checked = false,
     onChange,
@@ -5062,7 +5206,7 @@ var Switch = React75.forwardRef(function Switch2(props, ref) {
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React76.createElement(
     "label",
     {
       ref,
@@ -5070,7 +5214,7 @@ var Switch = React75.forwardRef(function Switch2(props, ref) {
       style,
       htmlFor: inputId
     },
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement(
       "input",
       {
         ref: inputRef,
@@ -5085,16 +5229,16 @@ var Switch = React75.forwardRef(function Switch2(props, ref) {
         "aria-checked": checked
       }
     ),
-    /* @__PURE__ */ React75.createElement("div", { className: "rf-switch__track", "aria-hidden": "true" }, /* @__PURE__ */ React75.createElement("div", { className: "rf-switch__thumb" })),
-    label && /* @__PURE__ */ React75.createElement("span", { className: "rf-switch__label" }, label, required && /* @__PURE__ */ React75.createElement("span", { style: { color: "var(--tf-error-color, #d32f2f)" } }, " *"))
+    /* @__PURE__ */ React76.createElement("div", { className: "rf-switch__track", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement("div", { className: "rf-switch__thumb" })),
+    label && /* @__PURE__ */ React76.createElement("span", { className: "rf-switch__label" }, label, required && /* @__PURE__ */ React76.createElement("span", { style: { color: "var(--tf-error-color, #d32f2f)" } }, " *"))
   );
 });
 Switch.displayName = "Switch";
 
 // lib/RadioGroup/RadioGroup.tsx
-import React76, { useRef as useRef13, createContext as createContext2, useContext as useContext2 } from "react";
+import React77, { useRef as useRef13, createContext as createContext2, useContext as useContext2 } from "react";
 var RadioGroupContext = createContext2({});
-var Radio = React76.forwardRef(function Radio2(props, ref) {
+var Radio = React77.forwardRef(function Radio2(props, ref) {
   const ctx = useContext2(RadioGroupContext);
   const {
     value,
@@ -5125,7 +5269,7 @@ var Radio = React76.forwardRef(function Radio2(props, ref) {
     isDisabled ? "rf-radio--disabled" : "",
     sxClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React76.createElement("label", { ref, className: rootClasses, htmlFor: inputId }, /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement("label", { ref, className: rootClasses, htmlFor: inputId }, /* @__PURE__ */ React77.createElement(
     "input",
     {
       id: inputId,
@@ -5138,10 +5282,10 @@ var Radio = React76.forwardRef(function Radio2(props, ref) {
       name,
       "aria-checked": isChecked
     }
-  ), /* @__PURE__ */ React76.createElement("div", { className: "rf-radio__control", "aria-hidden": "true" }, /* @__PURE__ */ React76.createElement("div", { className: "rf-radio__ripple" }), /* @__PURE__ */ React76.createElement("div", { className: "rf-radio__outer" }, /* @__PURE__ */ React76.createElement("div", { className: "rf-radio__inner" }))), label && /* @__PURE__ */ React76.createElement("span", { className: "rf-radio__label" }, label));
+  ), /* @__PURE__ */ React77.createElement("div", { className: "rf-radio__control", "aria-hidden": "true" }, /* @__PURE__ */ React77.createElement("div", { className: "rf-radio__ripple" }), /* @__PURE__ */ React77.createElement("div", { className: "rf-radio__outer" }, /* @__PURE__ */ React77.createElement("div", { className: "rf-radio__inner" }))), label && /* @__PURE__ */ React77.createElement("span", { className: "rf-radio__label" }, label));
 });
 Radio.displayName = "Radio";
-var RadioGroup = React76.forwardRef(function RadioGroup2(props, ref) {
+var RadioGroup = React77.forwardRef(function RadioGroup2(props, ref) {
   const {
     value,
     onChange,
@@ -5165,7 +5309,7 @@ var RadioGroup = React76.forwardRef(function RadioGroup2(props, ref) {
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React76.createElement(RadioGroupContext.Provider, { value: { value, onChange, name: groupName, disabled, size } }, /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(RadioGroupContext.Provider, { value: { value, onChange, name: groupName, disabled, size } }, /* @__PURE__ */ React77.createElement(
     "div",
     {
       ref,
@@ -5174,8 +5318,8 @@ var RadioGroup = React76.forwardRef(function RadioGroup2(props, ref) {
       role: "radiogroup",
       "aria-label": label
     },
-    label && /* @__PURE__ */ React76.createElement("div", { className: "rf-radio-group__label" }, label),
-    options ? options.map((opt) => /* @__PURE__ */ React76.createElement(
+    label && /* @__PURE__ */ React77.createElement("div", { className: "rf-radio-group__label" }, label),
+    options ? options.map((opt) => /* @__PURE__ */ React77.createElement(
       Radio,
       {
         key: opt.value,
@@ -5189,12 +5333,12 @@ var RadioGroup = React76.forwardRef(function RadioGroup2(props, ref) {
 RadioGroup.displayName = "RadioGroup";
 
 // lib/Rating/Rating.tsx
-import React77, {
+import React78, {
   useState as useState12,
   useRef as useRef14
 } from "react";
 var starSize = { small: 18, medium: 24, large: 32 };
-var FilledStarIcon = ({ size }) => /* @__PURE__ */ React77.createElement(
+var FilledStarIcon = ({ size }) => /* @__PURE__ */ React78.createElement(
   "svg",
   {
     width: size,
@@ -5203,9 +5347,9 @@ var FilledStarIcon = ({ size }) => /* @__PURE__ */ React77.createElement(
     fill: "currentColor",
     "aria-hidden": "true"
   },
-  /* @__PURE__ */ React77.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
+  /* @__PURE__ */ React78.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
 );
-var EmptyStarIcon = ({ size }) => /* @__PURE__ */ React77.createElement(
+var EmptyStarIcon = ({ size }) => /* @__PURE__ */ React78.createElement(
   "svg",
   {
     width: size,
@@ -5216,9 +5360,9 @@ var EmptyStarIcon = ({ size }) => /* @__PURE__ */ React77.createElement(
     strokeWidth: "1.6",
     "aria-hidden": "true"
   },
-  /* @__PURE__ */ React77.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
+  /* @__PURE__ */ React78.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
 );
-var Rating = React77.forwardRef(function Rating2(props, ref) {
+var Rating = React78.forwardRef(function Rating2(props, ref) {
   const {
     value,
     onChange,
@@ -5241,8 +5385,8 @@ var Rating = React77.forwardRef(function Rating2(props, ref) {
   const currentValue = value ?? 0;
   const displayValue = hoverValue !== null ? hoverValue : currentValue;
   const iconSize = starSize[size] ?? 24;
-  const renderedFilledIcon = icon ?? /* @__PURE__ */ React77.createElement(FilledStarIcon, { size: iconSize });
-  const renderedEmptyIcon = emptyIcon ?? /* @__PURE__ */ React77.createElement(EmptyStarIcon, { size: iconSize });
+  const renderedFilledIcon = icon ?? /* @__PURE__ */ React78.createElement(FilledStarIcon, { size: iconSize });
+  const renderedEmptyIcon = emptyIcon ?? /* @__PURE__ */ React78.createElement(EmptyStarIcon, { size: iconSize });
   const isFilled = (pos) => {
     if (highlightSelectedOnly) return displayValue === pos;
     return displayValue >= pos - (precision < 1 ? 0.25 : 0);
@@ -5303,7 +5447,7 @@ var Rating = React77.forwardRef(function Rating2(props, ref) {
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React77.createElement("div", { ref, className: rootClasses, style }, label && /* @__PURE__ */ React77.createElement("div", { className: "rf-rating__label" }, label), /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement("div", { ref, className: rootClasses, style }, label && /* @__PURE__ */ React78.createElement("div", { className: "rf-rating__label" }, label), /* @__PURE__ */ React78.createElement(
     "div",
     {
       ref: starsRef,
@@ -5320,7 +5464,7 @@ var Rating = React77.forwardRef(function Rating2(props, ref) {
         "rf-rating__item",
         isHovered ? "rf-rating__item--hovered" : ""
       ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ React77.createElement(
+      return /* @__PURE__ */ React78.createElement(
         "button",
         {
           key: pos,
@@ -5335,15 +5479,15 @@ var Rating = React77.forwardRef(function Rating2(props, ref) {
         },
         halfFilled ? (
           // Half-star: show half filled + half empty
-          /* @__PURE__ */ React77.createElement("div", { className: "rf-rating__icon-container", style: { position: "relative" } }, /* @__PURE__ */ React77.createElement("span", { className: "rf-rating__icon--empty" }, renderedEmptyIcon), /* @__PURE__ */ React77.createElement(
+          /* @__PURE__ */ React78.createElement("div", { className: "rf-rating__icon-container", style: { position: "relative" } }, /* @__PURE__ */ React78.createElement("span", { className: "rf-rating__icon--empty" }, renderedEmptyIcon), /* @__PURE__ */ React78.createElement(
             "span",
             {
               className: "rf-rating__half-left",
               style: { position: "absolute", inset: 0, width: "50%", overflow: "hidden" }
             },
-            /* @__PURE__ */ React77.createElement("span", { className: "rf-rating__icon--filled" }, renderedFilledIcon)
+            /* @__PURE__ */ React78.createElement("span", { className: "rf-rating__icon--filled" }, renderedFilledIcon)
           ))
-        ) : /* @__PURE__ */ React77.createElement("div", { className: "rf-rating__icon-container" }, /* @__PURE__ */ React77.createElement("span", { className: filled ? "rf-rating__icon--filled" : "rf-rating__icon--empty" }, filled ? renderedFilledIcon : renderedEmptyIcon))
+        ) : /* @__PURE__ */ React78.createElement("div", { className: "rf-rating__icon-container" }, /* @__PURE__ */ React78.createElement("span", { className: filled ? "rf-rating__icon--filled" : "rf-rating__icon--empty" }, filled ? renderedFilledIcon : renderedEmptyIcon))
       );
     })
   ));
@@ -5351,12 +5495,12 @@ var Rating = React77.forwardRef(function Rating2(props, ref) {
 Rating.displayName = "Rating";
 
 // lib/ToggleButton/ToggleButton.tsx
-import React78, {
+import React79, {
   createContext as createContext3,
   useContext as useContext3
 } from "react";
 var ToggleGroupContext = createContext3({});
-var ToggleButton = React78.forwardRef(
+var ToggleButton = React79.forwardRef(
   function ToggleButton2(props, ref) {
     const ctx = useContext3(ToggleGroupContext);
     const { value, children, disabled: disabledProp, selected: selectedProp, sx } = props;
@@ -5389,7 +5533,7 @@ var ToggleButton = React78.forwardRef(
         }
       }
     };
-    const isIconOnly = React78.Children.count(children) === 1 && React78.isValidElement(children) && children.type === "svg";
+    const isIconOnly = React79.Children.count(children) === 1 && React79.isValidElement(children) && children.type === "svg";
     const btnClasses = [
       "rf-toggle-btn",
       isSelected ? "rf-toggle-btn--selected" : "",
@@ -5397,7 +5541,7 @@ var ToggleButton = React78.forwardRef(
       isIconOnly ? "rf-toggle-btn--icon-only" : "",
       sxClass
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React78.createElement(
+    return /* @__PURE__ */ React79.createElement(
       "button",
       {
         ref,
@@ -5412,7 +5556,7 @@ var ToggleButton = React78.forwardRef(
   }
 );
 ToggleButton.displayName = "ToggleButton";
-var ToggleButtonGroup = React78.forwardRef(
+var ToggleButtonGroup = React79.forwardRef(
   function ToggleButtonGroup2(props, ref) {
     const {
       value,
@@ -5439,7 +5583,7 @@ var ToggleButtonGroup = React78.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React78.createElement(ToggleGroupContext.Provider, { value: { value, onChange, exclusive, size, disabled, color } }, /* @__PURE__ */ React78.createElement(
+    return /* @__PURE__ */ React79.createElement(ToggleGroupContext.Provider, { value: { value, onChange, exclusive, size, disabled, color } }, /* @__PURE__ */ React79.createElement(
       "div",
       {
         ref,
@@ -5455,7 +5599,7 @@ var ToggleButtonGroup = React78.forwardRef(
 ToggleButtonGroup.displayName = "ToggleButtonGroup";
 
 // lib/Avatar/Avatar.tsx
-import React79, { useState as useState13 } from "react";
+import React80, { useState as useState13 } from "react";
 var DEFAULT_PALETTE = [
   "#a41b06",
   "#8b1605",
@@ -5490,7 +5634,7 @@ function getInitials(alt) {
   }
   return words[0][0].toUpperCase();
 }
-var Avatar = React79.forwardRef(
+var Avatar = React80.forwardRef(
   ({
     src,
     alt,
@@ -5525,7 +5669,7 @@ var Avatar = React79.forwardRef(
       inlineStyle.backgroundColor = bgColor;
       inlineStyle.color = "#ffffff";
     }
-    return /* @__PURE__ */ React79.createElement("div", { ref, className: classes, style: inlineStyle, "aria-label": alt, role: alt ? "img" : void 0, onClick, tabIndex: onClick ? 0 : void 0 }, showImage ? /* @__PURE__ */ React79.createElement(
+    return /* @__PURE__ */ React80.createElement("div", { ref, className: classes, style: inlineStyle, "aria-label": alt, role: alt ? "img" : void 0, onClick, tabIndex: onClick ? 0 : void 0 }, showImage ? /* @__PURE__ */ React80.createElement(
       "img",
       {
         src,
@@ -5534,7 +5678,7 @@ var Avatar = React79.forwardRef(
         onError: () => setImgError(true),
         ...imgProps
       }
-    ) : /* @__PURE__ */ React79.createElement("span", { className: "rf-avatar__initials" }, content));
+    ) : /* @__PURE__ */ React80.createElement("span", { className: "rf-avatar__initials" }, content));
   }
 );
 Avatar.displayName = "Avatar";
@@ -5547,7 +5691,7 @@ var AvatarGroup = ({
   sx
 }) => {
   const sxClass = useSx(sx);
-  const childArray = React79.Children.toArray(children);
+  const childArray = React80.Children.toArray(children);
   const totalCount = childArray.length;
   const overflowCount = totalCount > max ? totalCount - (max - 1) : 0;
   const visibleChildren = overflowCount > 0 ? childArray.slice(0, max - 1) : childArray;
@@ -5561,7 +5705,7 @@ var AvatarGroup = ({
   }
   const classes = ["rf-avatar-group", spacingClass, sxClass, className].filter(Boolean).join(" ");
   const avatarsToRender = [...visibleChildren].reverse();
-  return /* @__PURE__ */ React79.createElement("div", { className: classes, style, role: "group" }, overflowCount > 0 && /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React80.createElement("div", { className: classes, style, role: "group" }, overflowCount > 0 && /* @__PURE__ */ React80.createElement(
     Avatar,
     {
       className: "rf-avatar-group__overflow",
@@ -5573,7 +5717,7 @@ var AvatarGroup = ({
   ), avatarsToRender.map((child, i) => {
     if (typeof spacing === "number") {
       const typedChild = child;
-      return React79.cloneElement(typedChild, {
+      return React80.cloneElement(typedChild, {
         key: i,
         style: {
           marginLeft: i < avatarsToRender.length - 1 ? -spacing : 0,
@@ -5587,7 +5731,7 @@ var AvatarGroup = ({
 AvatarGroup.displayName = "AvatarGroup";
 
 // lib/Chip/Chip.tsx
-import React80 from "react";
+import React81 from "react";
 var Chip = ({
   label,
   onDelete,
@@ -5625,7 +5769,7 @@ var Chip = ({
       onDelete();
     }
   };
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React81.createElement(
     "div",
     {
       className: classes,
@@ -5636,10 +5780,10 @@ var Chip = ({
       onKeyDown: !disabled ? handleKeyDown : void 0,
       "aria-disabled": disabled || void 0
     },
-    avatar && /* @__PURE__ */ React80.createElement("span", { className: "rf-chip__avatar" }, avatar),
-    !avatar && icon && /* @__PURE__ */ React80.createElement("span", { className: "rf-chip__icon", "aria-hidden": "true" }, icon),
-    /* @__PURE__ */ React80.createElement("span", { className: "rf-chip__label" }, label),
-    onDelete && /* @__PURE__ */ React80.createElement(
+    avatar && /* @__PURE__ */ React81.createElement("span", { className: "rf-chip__avatar" }, avatar),
+    !avatar && icon && /* @__PURE__ */ React81.createElement("span", { className: "rf-chip__icon", "aria-hidden": "true" }, icon),
+    /* @__PURE__ */ React81.createElement("span", { className: "rf-chip__label" }, label),
+    onDelete && /* @__PURE__ */ React81.createElement(
       "button",
       {
         className: "rf-chip__delete",
@@ -5660,7 +5804,7 @@ var Chip = ({
 Chip.displayName = "Chip";
 
 // lib/Divider/Divider.tsx
-import React81 from "react";
+import React82 from "react";
 var Divider = ({
   orientation = "horizontal",
   variant = "fullWidth",
@@ -5674,7 +5818,7 @@ var Divider = ({
   sx
 }) => {
   const sxClass = useSx(sx);
-  const hasChildren = React81.Children.count(children) > 0;
+  const hasChildren = React82.Children.count(children) > 0;
   const variantClass = variant === "inset" ? "rf-divider--inset" : variant === "middle" ? "rf-divider--middle" : "";
   const classes = [
     "rf-divider",
@@ -5690,7 +5834,7 @@ var Divider = ({
   ].filter(Boolean).join(" ");
   const Tag = component || (hasChildren ? "div" : "hr");
   if (!hasChildren) {
-    return /* @__PURE__ */ React81.createElement(
+    return /* @__PURE__ */ React82.createElement(
       Tag,
       {
         className: classes,
@@ -5699,7 +5843,7 @@ var Divider = ({
       }
     );
   }
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     Tag,
     {
       className: classes,
@@ -5707,13 +5851,13 @@ var Divider = ({
       role: "separator",
       "aria-orientation": orientation
     },
-    /* @__PURE__ */ React81.createElement("span", { className: "rf-divider__text" }, children)
+    /* @__PURE__ */ React82.createElement("span", { className: "rf-divider__text" }, children)
   );
 };
 Divider.displayName = "Divider";
 
 // lib/List/List.tsx
-import React82 from "react";
+import React83 from "react";
 var List = ({
   dense = false,
   disablePadding = false,
@@ -5731,7 +5875,7 @@ var List = ({
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React82.createElement("ul", { className: classes, style }, subheader, children);
+  return /* @__PURE__ */ React83.createElement("ul", { className: classes, style }, subheader, children);
 };
 List.displayName = "List";
 var ListItem = ({
@@ -5755,7 +5899,7 @@ var ListItem = ({
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React82.createElement("li", { className: classes, style }, /* @__PURE__ */ React82.createElement("div", { className: "rf-list-item__content" }, children), secondaryAction && /* @__PURE__ */ React82.createElement("div", { className: "rf-list-item__secondary-action" }, secondaryAction));
+  return /* @__PURE__ */ React83.createElement("li", { className: classes, style }, /* @__PURE__ */ React83.createElement("div", { className: "rf-list-item__content" }, children), secondaryAction && /* @__PURE__ */ React83.createElement("div", { className: "rf-list-item__secondary-action" }, secondaryAction));
 };
 ListItem.displayName = "ListItem";
 var ListItemText = ({
@@ -5772,12 +5916,12 @@ var ListItemText = ({
     inset ? "rf-list-item-text--inset" : "",
     sxClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React82.createElement("div", { className: classes }, /* @__PURE__ */ React82.createElement("p", { className: "rf-list-item-text__primary", ...primaryTypographyProps }, primary), secondary && /* @__PURE__ */ React82.createElement("p", { className: "rf-list-item-text__secondary", ...secondaryTypographyProps }, secondary));
+  return /* @__PURE__ */ React83.createElement("div", { className: classes }, /* @__PURE__ */ React83.createElement("p", { className: "rf-list-item-text__primary", ...primaryTypographyProps }, primary), secondary && /* @__PURE__ */ React83.createElement("p", { className: "rf-list-item-text__secondary", ...secondaryTypographyProps }, secondary));
 };
 ListItemText.displayName = "ListItemText";
 var ListItemIcon = ({ children, sx }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React82.createElement("div", { className: ["rf-list-item-icon", sxClass].filter(Boolean).join(" "), "aria-hidden": "true" }, children);
+  return /* @__PURE__ */ React83.createElement("div", { className: ["rf-list-item-icon", sxClass].filter(Boolean).join(" "), "aria-hidden": "true" }, children);
 };
 ListItemIcon.displayName = "ListItemIcon";
 var ListItemButton = ({
@@ -5809,7 +5953,7 @@ var ListItemButton = ({
     "aria-disabled": disabled || void 0
   };
   if (href) {
-    return /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React83.createElement(
       "a",
       {
         href,
@@ -5820,7 +5964,7 @@ var ListItemButton = ({
       children
     );
   }
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React83.createElement(
     "button",
     {
       type: "button",
@@ -5849,12 +5993,12 @@ var ListSubheader = ({
     color !== "default" ? `rf-list-subheader--color-${color}` : "",
     sxClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React82.createElement("li", { className: classes, role: "presentation", "aria-label": typeof children === "string" ? children : void 0 }, children);
+  return /* @__PURE__ */ React83.createElement("li", { className: classes, role: "presentation", "aria-label": typeof children === "string" ? children : void 0 }, children);
 };
 ListSubheader.displayName = "ListSubheader";
 
 // lib/Typography/Typography.tsx
-import React83 from "react";
+import React84 from "react";
 var VARIANT_ELEMENT_MAP = {
   h1: "h1",
   h2: "h2",
@@ -5928,12 +6072,12 @@ var Typography = ({
     ...weightStyle,
     ...style
   };
-  return /* @__PURE__ */ React83.createElement(Tag, { className: classes, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0 }, children);
+  return /* @__PURE__ */ React84.createElement(Tag, { className: classes, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0 }, children);
 };
 Typography.displayName = "Typography";
 
 // lib/Skeleton/Skeleton.tsx
-import React84 from "react";
+import React85 from "react";
 var Skeleton = ({
   variant = "text",
   width,
@@ -5969,7 +6113,7 @@ var Skeleton = ({
   if (variant === "rounded" && !height) {
     inlineStyle.height = 140;
   }
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(
     "span",
     {
       className: classes,
@@ -5982,7 +6126,7 @@ var Skeleton = ({
 Skeleton.displayName = "Skeleton";
 
 // lib/Tooltip/Tooltip.tsx
-import React85, {
+import React86, {
   useCallback as useCallback5,
   useEffect as useEffect11,
   useRef as useRef15,
@@ -6173,7 +6317,7 @@ var Tooltip = ({
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  const tooltipElement = /* @__PURE__ */ React85.createElement(
+  const tooltipElement = /* @__PURE__ */ React86.createElement(
     "div",
     {
       ref: tooltipRef,
@@ -6187,7 +6331,7 @@ var Tooltip = ({
       "aria-hidden": !isOpen
     },
     title,
-    arrow && /* @__PURE__ */ React85.createElement(
+    arrow && /* @__PURE__ */ React86.createElement(
       "span",
       {
         className: "rf-tooltip__arrow",
@@ -6198,7 +6342,7 @@ var Tooltip = ({
       }
     )
   );
-  return /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(
     "span",
     {
       ref: anchorRef,
@@ -6206,14 +6350,14 @@ var Tooltip = ({
       "aria-describedby": isOpen ? "rf-tooltip" : void 0,
       ...childProps
     },
-    React85.cloneElement(children)
+    React86.cloneElement(children)
   ), ReactDOM.createPortal(tooltipElement, document.body));
 };
 Tooltip.displayName = "Tooltip";
 
 // lib/Box/Box.tsx
-import * as React86 from "react";
-var Box = React86.forwardRef(
+import * as React87 from "react";
+var Box = React87.forwardRef(
   ({
     component = "div",
     children,
@@ -6226,6 +6370,23 @@ var Box = React86.forwardRef(
     margin,
     width,
     height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    flex,
+    flexWrap,
+    flexGrow,
+    flexShrink,
+    overflow,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    borderRadius,
+    bgcolor,
+    color,
     className,
     style,
     sx,
@@ -6242,18 +6403,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 } : {},
+      ...position !== void 0 ? { position } : {},
+      ...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 } : {},
+      ...color !== void 0 ? { color } : {},
       ...style
     };
     const classes = ["rf-box", sxClass, className].filter(Boolean).join(" ");
     const Tag = component;
-    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
-import * as React87 from "react";
-var Stack = React87.forwardRef(
+import * as React88 from "react";
+var Stack = React88.forwardRef(
   ({
     direction = "column",
     spacing,
@@ -6262,6 +6440,8 @@ var Stack = React87.forwardRef(
     divider,
     flexWrap,
     useFlexGap = true,
+    flex,
+    overflow,
     component = "div",
     children,
     className,
@@ -6277,19 +6457,21 @@ var Stack = 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;
@@ -6298,13 +6480,13 @@ var Stack = React87.forwardRef(
       content = children;
     }
     const Tag = component;
-    return /* @__PURE__ */ React87.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
+    return /* @__PURE__ */ React88.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
   }
 );
 Stack.displayName = "Stack";
 
 // lib/Grid/Grid.tsx
-import * as React88 from "react";
+import * as React89 from "react";
 function getBreakpointClass(bp, val) {
   if (val === void 0) return "";
   if (val === true) return `rf-grid-${bp}-12`;
@@ -6317,7 +6499,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,
@@ -6367,14 +6549,14 @@ var Grid = React88.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component;
-    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
-import * as React89 from "react";
-var Paper = React89.forwardRef(
+import * as React90 from "react";
+var Paper = React90.forwardRef(
   ({
     elevation = 1,
     square = false,
@@ -6396,14 +6578,14 @@ var Paper = React89.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component;
-    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
-import * as React90 from "react";
-var Card = React90.forwardRef(
+import * as React91 from "react";
+var Card = React91.forwardRef(
   ({
     elevation = 1,
     variant = "elevation",
@@ -6422,33 +6604,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 = "div", image, 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 (component === "img") {
-      return /* @__PURE__ */ React90.createElement(
+      return /* @__PURE__ */ React91.createElement(
         "img",
         {
           ref,
@@ -6461,7 +6643,7 @@ var CardMedia = React90.forwardRef(
       );
     }
     if (component === "video") {
-      return /* @__PURE__ */ React90.createElement(
+      return /* @__PURE__ */ React91.createElement(
         "video",
         {
           ref,
@@ -6477,7 +6659,7 @@ var CardMedia = React90.forwardRef(
       ...image ? { backgroundImage: `url(${image})` } : {},
       ...style
     };
-    return /* @__PURE__ */ React90.createElement(
+    return /* @__PURE__ */ React91.createElement(
       "div",
       {
         ref,
@@ -6489,7 +6671,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 = [
@@ -6498,13 +6680,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
-import * as React91 from "react";
+import * as React92 from "react";
 import { useState as useState15, useContext as useContext4, createContext as createContext4 } from "react";
 var AccordionContext = createContext4({
   expanded: false,
@@ -6512,7 +6694,7 @@ var AccordionContext = createContext4({
   toggle: () => {
   }
 });
-var Accordion = React91.forwardRef(
+var Accordion = React92.forwardRef(
   ({
     expanded: expandedProp,
     defaultExpanded = false,
@@ -6547,11 +6729,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",
@@ -6565,9 +6747,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 } = useContext4(AccordionContext);
@@ -6581,7 +6763,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,
@@ -6593,13 +6775,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 } = useContext4(AccordionContext);
@@ -6612,13 +6794,13 @@ 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";
 
 // lib/Tabs/Tabs.tsx
-import React92, {
+import React93, {
   useEffect as useEffect12,
   useLayoutEffect,
   useRef as useRef16,
@@ -6653,7 +6835,7 @@ var Tab = ({
       _onClick(value);
     }
   };
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React93.createElement(
     "button",
     {
       ref: _tabRef,
@@ -6665,9 +6847,9 @@ var Tab = ({
       "aria-disabled": disabled,
       type: "button"
     },
-    icon && (iconPosition === "top" || iconPosition === "start") && /* @__PURE__ */ React92.createElement("span", { className: "rf-tab__icon" }, icon),
+    icon && (iconPosition === "top" || iconPosition === "start") && /* @__PURE__ */ React93.createElement("span", { className: "rf-tab__icon" }, icon),
     label,
-    icon && (iconPosition === "bottom" || iconPosition === "end") && /* @__PURE__ */ React92.createElement("span", { className: "rf-tab__icon" }, icon)
+    icon && (iconPosition === "bottom" || iconPosition === "end") && /* @__PURE__ */ React93.createElement("span", { className: "rf-tab__icon" }, icon)
   );
 };
 Tab.displayName = "Tab";
@@ -6754,7 +6936,7 @@ var Tabs = ({
       }
     });
   });
-  return /* @__PURE__ */ React92.createElement("div", { className: rootClasses, style, role: "tablist" }, /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React93.createElement("div", { className: rootClasses, style, role: "tablist" }, /* @__PURE__ */ React93.createElement(
     "div",
     {
       ref: tabsListRef,
@@ -6762,7 +6944,7 @@ var Tabs = ({
       style: centered ? { justifyContent: "center" } : void 0
     },
     enrichedChildren,
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "span",
       {
         className: "rf-tabs__indicator",
@@ -6773,9 +6955,33 @@ 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__ */ React93.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
-import React93, {
+import React94, {
   Children as Children3,
   useState as useState17
 } from "react";
@@ -6801,7 +7007,7 @@ var Breadcrumbs = ({
     const after = childArray.slice(totalItems - itemsAfterCollapse);
     itemsToRender = [
       ...before,
-      /* @__PURE__ */ React93.createElement(
+      /* @__PURE__ */ React94.createElement(
         "button",
         {
           key: "collapse-btn",
@@ -6818,15 +7024,15 @@ var Breadcrumbs = ({
     itemsToRender = childArray;
   }
   const classes = ["rf-breadcrumbs", sxClass, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React93.createElement("nav", { "aria-label": ariaLabel }, /* @__PURE__ */ React93.createElement("ol", { className: classes, style }, itemsToRender.map((item, index) => {
+  return /* @__PURE__ */ React94.createElement("nav", { "aria-label": ariaLabel }, /* @__PURE__ */ React94.createElement("ol", { className: classes, style }, itemsToRender.map((item, index) => {
     const isLast = index === itemsToRender.length - 1;
-    return /* @__PURE__ */ React93.createElement(React93.Fragment, { key: index }, /* @__PURE__ */ React93.createElement(
+    return /* @__PURE__ */ React94.createElement(React94.Fragment, { key: index }, /* @__PURE__ */ React94.createElement(
       "li",
       {
         className: `rf-breadcrumbs__item${isLast ? " rf-breadcrumbs__current" : ""}`
       },
       item
-    ), !isLast && /* @__PURE__ */ React93.createElement(
+    ), !isLast && /* @__PURE__ */ React94.createElement(
       "li",
       {
         className: "rf-breadcrumbs__separator",
@@ -6839,7 +7045,7 @@ var Breadcrumbs = ({
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // lib/Stepper/Stepper.tsx
-import React94, {
+import React95, {
   Children as Children4,
   cloneElement as cloneElement2,
   isValidElement as isValidElement2
@@ -6856,7 +7062,7 @@ var DefaultStepIcon = ({
     completed ? "rf-step-icon--completed" : "",
     error ? "rf-step-icon--error" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React94.createElement("div", { className: classes }, completed ? "\u2713" : error ? "!" : icon);
+  return /* @__PURE__ */ React95.createElement("div", { className: classes }, completed ? "\u2713" : error ? "!" : icon);
 };
 var StepLabel = ({
   icon,
@@ -6878,7 +7084,7 @@ var StepLabel = ({
     _completed ? "rf-step-label__title--completed" : "",
     error ? "rf-step-label__title--error" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React94.createElement("div", { className: `rf-step-label${sxClass ? ` ${sxClass}` : ""}` }, /* @__PURE__ */ React94.createElement("div", { className: "rf-step-label__icon-container" }, icon ? icon : /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement("div", { className: `rf-step-label${sxClass ? ` ${sxClass}` : ""}` }, /* @__PURE__ */ React95.createElement("div", { className: "rf-step-label__icon-container" }, icon ? icon : /* @__PURE__ */ React95.createElement(
     IconComp,
     {
       active: _active,
@@ -6886,7 +7092,7 @@ var StepLabel = ({
       error,
       icon: _stepIndex + 1
     }
-  )), /* @__PURE__ */ React94.createElement("div", { className: "rf-step-label__text" }, /* @__PURE__ */ React94.createElement("span", { className: titleClasses }, children), optional && /* @__PURE__ */ React94.createElement("span", { className: "rf-step-label__optional" }, optional)));
+  )), /* @__PURE__ */ React95.createElement("div", { className: "rf-step-label__text" }, /* @__PURE__ */ React95.createElement("span", { className: titleClasses }, children), optional && /* @__PURE__ */ React95.createElement("span", { className: "rf-step-label__optional" }, optional)));
 };
 StepLabel.displayName = "StepLabel";
 var StepContent = ({
@@ -6895,7 +7101,7 @@ var StepContent = ({
   _isLast = false
 }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(
     "div",
     {
       className: [
@@ -6915,7 +7121,7 @@ var StepButton = ({
   _disabled = false
 }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(
     "button",
     {
       className: `rf-step-button${sxClass ? ` ${sxClass}` : ""}`,
@@ -6963,7 +7169,7 @@ var Step = ({
     }
     return child;
   });
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(
     "div",
     {
       className: `rf-step${sxClass ? ` ${sxClass}` : ""}`,
@@ -6978,7 +7184,7 @@ Step.displayName = "Step";
 var DefaultConnector = ({
   completed,
   active
-}) => /* @__PURE__ */ React94.createElement(
+}) => /* @__PURE__ */ React95.createElement(
   "div",
   {
     className: [
@@ -6987,7 +7193,7 @@ var DefaultConnector = ({
       active ? "rf-step-connector--active" : ""
     ].filter(Boolean).join(" ")
   },
-  /* @__PURE__ */ React94.createElement("span", { className: "rf-step-connector__line" })
+  /* @__PURE__ */ React95.createElement("span", { className: "rf-step-connector__line" })
 );
 var Stepper = ({
   activeStep = 0,
@@ -7010,7 +7216,7 @@ var Stepper = ({
     sxClass,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React94.createElement("div", { className: classes, style }, childArray.map((child, index) => {
+  return /* @__PURE__ */ React95.createElement("div", { className: classes, style }, childArray.map((child, index) => {
     const isActive = index === activeStep;
     const isCompleted = nonLinear ? child.props.completed ?? false : index < activeStep;
     const isLast = index === totalSteps - 1;
@@ -7023,7 +7229,7 @@ var Stepper = ({
         last: isLast
       }
     );
-    const connectorEl = index > 0 ? connector ? connector : /* @__PURE__ */ React94.createElement(
+    const connectorEl = index > 0 ? connector ? connector : /* @__PURE__ */ React95.createElement(
       DefaultConnector,
       {
         key: `connector-${index}`,
@@ -7032,9 +7238,9 @@ var Stepper = ({
       }
     ) : null;
     if (orientation === "horizontal") {
-      return /* @__PURE__ */ React94.createElement(React94.Fragment, { key: index }, connectorEl, enrichedStep);
+      return /* @__PURE__ */ React95.createElement(React95.Fragment, { key: index }, connectorEl, enrichedStep);
     }
-    return /* @__PURE__ */ React94.createElement(React94.Fragment, { key: index }, /* @__PURE__ */ React94.createElement("div", { className: "rf-step__header" }, enrichedStep), !isLast && /* @__PURE__ */ React94.createElement(
+    return /* @__PURE__ */ React95.createElement(React95.Fragment, { key: index }, /* @__PURE__ */ React95.createElement("div", { className: "rf-step__header" }, enrichedStep), !isLast && /* @__PURE__ */ React95.createElement(
       DefaultConnector,
       {
         completed: index < activeStep,
@@ -7046,13 +7252,13 @@ var Stepper = ({
 Stepper.displayName = "Stepper";
 
 // lib/Menu/Menu.tsx
-import React95, {
+import React96, {
   useEffect as useEffect13,
   useRef as useRef17,
   useState as useState18
 } from "react";
 import ReactDOM2 from "react-dom";
-var MenuDivider = () => /* @__PURE__ */ React95.createElement("hr", { className: "rf-menu-divider", "aria-hidden": "true" });
+var MenuDivider = () => /* @__PURE__ */ React96.createElement("hr", { className: "rf-menu-divider", "aria-hidden": "true" });
 MenuDivider.displayName = "MenuDivider";
 var MenuItem = ({
   onClick,
@@ -7073,7 +7279,7 @@ var MenuItem = ({
     divider ? "rf-menu-item--divider" : "",
     sxClass
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(
     "li",
     {
       className: classes,
@@ -7088,7 +7294,7 @@ var MenuItem = ({
         }
       }
     },
-    icon && /* @__PURE__ */ React95.createElement("span", { className: "rf-menu-item__icon" }, icon),
+    icon && /* @__PURE__ */ React96.createElement("span", { className: "rf-menu-item__icon" }, icon),
     children
   );
 };
@@ -7100,17 +7306,17 @@ var MenuList = ({
   sx
 }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(
     "ul",
     {
       className: `rf-menu-list${sxClass ? ` ${sxClass}` : ""}`,
       role: "menu"
     },
-    subheader && /* @__PURE__ */ React95.createElement("li", { className: "rf-menu-list__subheader", role: "presentation" }, subheader),
-    React95.Children.map(children, (child) => {
-      if (!React95.isValidElement(child)) return child;
+    subheader && /* @__PURE__ */ React96.createElement("li", { className: "rf-menu-list__subheader", role: "presentation" }, subheader),
+    React96.Children.map(children, (child) => {
+      if (!React96.isValidElement(child)) return child;
       if (dense) {
-        return React95.cloneElement(child, {
+        return React96.cloneElement(child, {
           dense: true
         });
       }
@@ -7187,14 +7393,14 @@ var Menu = ({
   }, [open, onClose]);
   if (!mounted) return null;
   const classes = ["rf-menu-paper", sxClass, className].filter(Boolean).join(" ");
-  const portal = /* @__PURE__ */ React95.createElement("div", { className: "rf-menu-portal", style: { display: open ? void 0 : "none" } }, /* @__PURE__ */ React95.createElement(
+  const portal = /* @__PURE__ */ React96.createElement("div", { className: "rf-menu-portal", style: { display: open ? void 0 : "none" } }, /* @__PURE__ */ React96.createElement(
     "div",
     {
       className: "rf-menu-backdrop",
       onClick: onClose,
       "aria-hidden": "true"
     }
-  ), /* @__PURE__ */ React95.createElement(
+  ), /* @__PURE__ */ React96.createElement(
     "div",
     {
       ref: paperRef,
@@ -7209,7 +7415,7 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // lib/Drawer/Drawer.tsx
-import React96, {
+import React97, {
   useEffect as useEffect14,
   useState as useState19
 } from "react";
@@ -7277,7 +7483,7 @@ var Drawer = ({
     className
   ].filter(Boolean).join(" ");
   if (variant === "permanent") {
-    return /* @__PURE__ */ React96.createElement("div", { className: rootClasses, style }, /* @__PURE__ */ React96.createElement(
+    return /* @__PURE__ */ React97.createElement("div", { className: rootClasses, style }, /* @__PURE__ */ React97.createElement(
       "div",
       {
         className: paperClasses,
@@ -7287,7 +7493,7 @@ var Drawer = ({
     ));
   }
   if (variant === "persistent") {
-    return /* @__PURE__ */ React96.createElement("div", { className: rootClasses, style }, /* @__PURE__ */ React96.createElement(
+    return /* @__PURE__ */ React97.createElement("div", { className: rootClasses, style }, /* @__PURE__ */ React97.createElement(
       "div",
       {
         className: paperClasses,
@@ -7296,14 +7502,14 @@ var Drawer = ({
       children
     ));
   }
-  const drawerContent = /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(
+  const drawerContent = /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
     "div",
     {
       className: `rf-drawer-backdrop${!open ? " rf-drawer-backdrop--hidden" : ""}`,
       onClick: onClose,
       "aria-hidden": "true"
     }
-  ), /* @__PURE__ */ React96.createElement(
+  ), /* @__PURE__ */ React97.createElement(
     "div",
     {
       className: paperClasses,
@@ -7314,14 +7520,14 @@ var Drawer = ({
     children
   ));
   return ReactDOM3.createPortal(
-    /* @__PURE__ */ React96.createElement("div", { className: rootClasses, style }, drawerContent),
+    /* @__PURE__ */ React97.createElement("div", { className: rootClasses, style }, drawerContent),
     document.body
   );
 };
 Drawer.displayName = "Drawer";
 
 // lib/Snackbar/Snackbar.tsx
-import React97, {
+import React98, {
   useCallback as useCallback6,
   useEffect as useEffect15,
   useRef as useRef18,
@@ -7407,7 +7613,7 @@ var Snackbar = ({
   ].filter(Boolean).join(" ");
   const rootClasses = ["rf-snackbar-root", anchorClass].filter(Boolean).join(" ");
   const icon = severity !== "default" ? SEVERITY_ICONS[severity] : null;
-  const snackbarEl = /* @__PURE__ */ React97.createElement("div", { className: rootClasses }, /* @__PURE__ */ React97.createElement(
+  const snackbarEl = /* @__PURE__ */ React98.createElement("div", { className: rootClasses }, /* @__PURE__ */ React98.createElement(
     "div",
     {
       className: snackbarClasses,
@@ -7418,10 +7624,10 @@ var Snackbar = ({
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave
     },
-    icon && severity !== "default" && /* @__PURE__ */ React97.createElement("span", { className: "rf-snackbar__icon", "aria-hidden": "true" }, icon),
-    /* @__PURE__ */ React97.createElement("span", { className: "rf-snackbar__message" }, message),
-    action && /* @__PURE__ */ React97.createElement("span", { className: "rf-snackbar__action" }, action),
-    !action && onClose && /* @__PURE__ */ React97.createElement(
+    icon && severity !== "default" && /* @__PURE__ */ React98.createElement("span", { className: "rf-snackbar__icon", "aria-hidden": "true" }, icon),
+    /* @__PURE__ */ React98.createElement("span", { className: "rf-snackbar__message" }, message),
+    action && /* @__PURE__ */ React98.createElement("span", { className: "rf-snackbar__action" }, action),
+    !action && onClose && /* @__PURE__ */ React98.createElement(
       "button",
       {
         className: "rf-snackbar__close-btn",
@@ -7437,7 +7643,7 @@ var Snackbar = ({
 Snackbar.displayName = "Snackbar";
 
 // lib/Link/Link.tsx
-import React98 from "react";
+import React99 from "react";
 var KNOWN_COLORS = ["primary", "secondary", "textPrimary", "textSecondary", "inherit"];
 var Link = ({
   href,
@@ -7468,7 +7674,7 @@ var Link = ({
   };
   const Tag = component || "a";
   const computedRel = rel ?? (target === "_blank" ? "noopener noreferrer" : void 0);
-  return /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React99.createElement(
     Tag,
     {
       href,
@@ -7485,7 +7691,7 @@ var Link = ({
 Link.displayName = "Link";
 
 // lib/Popper/Popper.tsx
-import React99, {
+import React100, {
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef19,
@@ -7621,7 +7827,7 @@ var Popper = ({
   const content = typeof children === "function" ? children(
     { placement, TransitionProps: transitionProps }
   ) : children;
-  const popper = /* @__PURE__ */ React99.createElement(
+  const popper = /* @__PURE__ */ React100.createElement(
     "div",
     {
       ref: popperRef,
@@ -7632,14 +7838,14 @@ var Popper = ({
     content
   );
   if (disablePortal) {
-    return /* @__PURE__ */ React99.createElement(React99.Fragment, null, popper);
+    return /* @__PURE__ */ React100.createElement(React100.Fragment, null, popper);
   }
   return ReactDOM5.createPortal(popper, document.body);
 };
 Popper.displayName = "Popper";
 
 // lib/Popover/Popover.tsx
-import React100, {
+import React101, {
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef20,
@@ -7723,14 +7929,14 @@ var Popover = ({
     paperSxClass
   ].filter(Boolean).join(" ");
   const rootClasses = ["rf-popover-root", sxClass, className].filter(Boolean).join(" ");
-  const content = /* @__PURE__ */ React100.createElement(React100.Fragment, null, /* @__PURE__ */ React100.createElement(
+  const content = /* @__PURE__ */ React101.createElement(React101.Fragment, null, /* @__PURE__ */ React101.createElement(
     "div",
     {
       className: "rf-popover-backdrop",
       onClick: onClose,
       "aria-hidden": "true"
     }
-  ), /* @__PURE__ */ React100.createElement(
+  ), /* @__PURE__ */ React101.createElement(
     "div",
     {
       ref: paperRef,
@@ -7746,17 +7952,17 @@ var Popover = ({
     children
   ));
   if (disablePortal) {
-    return /* @__PURE__ */ React100.createElement("div", { className: `${rootClasses} rf-popover-inline`, style }, content);
+    return /* @__PURE__ */ React101.createElement("div", { className: `${rootClasses} rf-popover-inline`, style }, content);
   }
   return ReactDOM6.createPortal(
-    /* @__PURE__ */ React100.createElement("div", { className: rootClasses, style }, content),
+    /* @__PURE__ */ React101.createElement("div", { className: rootClasses, style }, content),
     document.body
   );
 };
 Popover.displayName = "Popover";
 
 // lib/Transitions/Transitions.tsx
-import React101, {
+import React102, {
   cloneElement as cloneElement3,
   useEffect as useEffect18,
   useRef as useRef21,
@@ -7934,7 +8140,7 @@ var Collapse = ({
   const exitMs = getTimeout(timeout, "exit");
   const dur = state === "entering" || state === "entered" ? enterMs : exitMs;
   const containerStyle = orientation === "vertical" ? { height: size === "auto" ? "auto" : typeof size === "number" ? `${size}px` : size } : { width: size === "auto" ? "auto" : typeof size === "number" ? `${size}px` : size };
-  return /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React102.createElement(
     "div",
     {
       className: [
@@ -7947,7 +8153,7 @@ var Collapse = ({
         ...containerStyle
       }
     },
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement(
       "div",
       {
         ref: innerRef,
@@ -7986,6 +8192,116 @@ var Zoom = ({
   });
 };
 Zoom.displayName = "Zoom";
+
+// lib/ImageField/ImageField.tsx
+import React103, { useRef as useRef22, useState as useState24, useCallback as useCallback7 } from "react";
+function getSizeStyle2(size) {
+  if (size === "small") return { className: "rf-image-field--small" };
+  if (size === "large") return { className: "rf-image-field--large" };
+  if (typeof size === "number") {
+    return {
+      className: "",
+      style: { width: size, height: size }
+    };
+  }
+  return { className: "rf-image-field--medium" };
+}
+var ImageField = React103.forwardRef(
+  ({
+    src,
+    alt = "",
+    variant = "circular",
+    size = "medium",
+    accept = "image/*",
+    onChange,
+    overlayText = "Upload",
+    disabled = false,
+    className = "",
+    style,
+    sx
+  }, ref) => {
+    const sxClass = useSx(sx);
+    const inputRef = useRef22(null);
+    const [preview, setPreview] = useState24(null);
+    const { className: sizeClass, style: sizeStyle } = getSizeStyle2(size);
+    const displaySrc = preview || src;
+    const handleClick = useCallback7(() => {
+      if (!disabled) {
+        inputRef.current?.click();
+      }
+    }, [disabled]);
+    const handleKeyDown = useCallback7(
+      (e) => {
+        if ((e.key === "Enter" || e.key === " ") && !disabled) {
+          e.preventDefault();
+          inputRef.current?.click();
+        }
+      },
+      [disabled]
+    );
+    const handleFileChange = useCallback7(
+      (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 size === "number" ? Math.max(size * 0.25, 16) : size === "small" ? 16 : size === "large" ? 28 : 22;
+    return /* @__PURE__ */ React103.createElement(
+      "div",
+      {
+        ref,
+        className: classes,
+        style: { ...sizeStyle, ...style },
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": alt || overlayText,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+      },
+      displaySrc ? /* @__PURE__ */ React103.createElement(
+        "img",
+        {
+          src: displaySrc,
+          alt,
+          className: "rf-image-field__img"
+        }
+      ) : /* @__PURE__ */ React103.createElement("div", { className: "rf-image-field__placeholder" }, /* @__PURE__ */ React103.createElement(
+        cameraIcon_default,
+        {
+          width: iconSize,
+          height: iconSize,
+          color: "var(--text-secondary)"
+        }
+      )),
+      /* @__PURE__ */ React103.createElement("div", { className: "rf-image-field__overlay" }, /* @__PURE__ */ React103.createElement(cameraIcon_default, { width: iconSize, height: iconSize, color: "#ffffff" }), overlayText && /* @__PURE__ */ React103.createElement("span", { className: "rf-image-field__overlay-text" }, overlayText)),
+      /* @__PURE__ */ React103.createElement(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept,
+          className: "rf-image-field__input",
+          onChange: handleFileChange,
+          disabled
+        }
+      )
+    );
+  }
+);
+ImageField.displayName = "ImageField";
 export {
   APP_THEMES,
   Accordion,
@@ -8002,6 +8318,7 @@ export {
   BaseDialog_default as BaseDialog,
   Box,
   Breadcrumbs,
+  cameraIcon_default as CameraIcon,
   cancelButton_default as CancelButton,
   Card,
   CardActions,
@@ -8036,6 +8353,7 @@ export {
   Grow,
   helpOutlinedIcon_default as HelpOutlinedIcon,
   hierarchyIcon_default as HierarchyIcon,
+  ImageField,
   inactiveGroupIcon_default as InactiveGroupIcon,
   industryIcon_default as IndustryIcon,
   invoiceIcon_default as InvoiceIcon,
@@ -8099,6 +8417,7 @@ export {
   suspendUserIcon_default as SuspendUserIcon,
   Switch,
   Tab,
+  TabPanel,
   Tabs,
   technicalSkillsIcon_default as TechnicalSkillsIcon,
   TextField,