@rufous/ui 0.1.82 → 0.1.84

package/dist/main.cjs

@@ -28650,6 +28650,7 @@ __export(main_exports, {
   BaseDialog: () => BaseDialog_default,
   Box: () => Box,
   Breadcrumbs: () => Breadcrumbs,
+  CameraIcon: () => cameraIcon_default,
   CancelButton: () => cancelButton_default,
   Card: () => Card,
   CardActions: () => CardActions,
@@ -28684,6 +28685,7 @@ __export(main_exports, {
   Grow: () => Grow,
   HelpOutlinedIcon: () => helpOutlinedIcon_default,
   HierarchyIcon: () => hierarchyIcon_default,
+  ImageField: () => ImageField,
   InactiveGroupIcon: () => inactiveGroupIcon_default,
   IndustryIcon: () => industryIcon_default,
   InvoiceIcon: () => invoiceIcon_default,
@@ -29829,8 +29831,23 @@ var React56 = __toESM(require("react"), 1);
 var QualificationsIcon = ({ color: color2 = "#3a3a3a", ...props }) => /* @__PURE__ */ React56.createElement("svg", { width: "24", height: "17", viewBox: "0 0 24 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React56.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.096 0.920005L1.422 5.25601C1.29964 5.31928 1.18771 5.40089 1.09003 5.49801C0.982986 5.61801 0.923828 5.7732 0.923828 5.934C0.923828 6.09481 0.982986 6.25 1.09003 6.37001C1.18134 6.47434 1.29472 6.55701 1.422 6.61201L5.35498 8.29801V12.829C5.35246 12.8915 5.36648 12.9535 5.39563 13.0088C5.42478 13.0641 5.46804 13.1108 5.521 13.144L11.909 16.23C11.9351 16.2419 11.9634 16.248 11.992 16.248C12.0206 16.248 12.049 16.2419 12.075 16.23L18.482 13.144C18.5377 13.1137 18.5831 13.0677 18.6127 13.0116C18.6422 12.9556 18.6545 12.892 18.648 12.829V8.29901L21.842 7.04001C21.6965 8.80938 21.6882 10.5874 21.817 12.358C21.817 12.843 22.217 12.843 22.217 12.358C22.4317 10.5206 22.4729 8.66711 22.34 6.82201C22.5425 6.68685 22.7337 6.5357 22.912 6.37001C23.019 6.25 23.0782 6.09481 23.0782 5.934C23.0782 5.7732 23.019 5.61801 22.912 5.49801C22.8142 5.40101 22.7023 5.31941 22.58 5.25601L12.905 0.919005C12.3228 0.692932 11.6771 0.692932 11.095 0.919005L11.096 0.920005ZM12.696 1.86701L21.785 5.94101C21.837 5.96401 21.837 5.98601 21.872 6.00901C21.838 6.03201 21.838 6.05501 21.785 6.07701L17.485 8.01201C17.451 8.01201 17.398 8.01201 17.385 8.05701L12.702 10.151C12.253 10.3102 11.763 10.3102 11.314 10.151L6.62201 8.03401C6.58701 8.03401 6.56998 8.01101 6.55298 8.01101L2.22198 6.07601C2.16898 6.05301 2.16901 6.03101 2.13501 6.00801C2.16901 5.98501 2.16898 5.962 2.22198 5.962L11.31 1.86201C11.5331 1.78448 11.7678 1.74624 12.004 1.74901C12.239 1.7475 12.4725 1.78709 12.694 1.866L12.696 1.86701ZM17.665 8.657V12.482L12.002 15.272L6.33899 12.728V8.90301L11.156 10.926C11.4239 11.0384 11.7115 11.0963 12.002 11.0963C12.2925 11.0963 12.5801 11.0384 12.848 10.926L17.248 8.95501L17.665 8.657Z", fill: color2, stroke: color2, strokeWidth: "0.2" }));
 var qualificationsIcon_default = QualificationsIcon;
 
-// lib/Buttons/addButton.tsx
+// lib/icons/cameraIcon.tsx
 var React57 = __toESM(require("react"), 1);
+var CameraIcon = ({ color: color2 = "#ffffff", ...props }) => /* @__PURE__ */ React57.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props }, /* @__PURE__ */ React57.createElement(
+  "path",
+  {
+    d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z",
+    stroke: color2,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none"
+  }
+), /* @__PURE__ */ React57.createElement("circle", { cx: "12", cy: "13", r: "4", stroke: color2, strokeWidth: "2", fill: "none" }));
+var cameraIcon_default = CameraIcon;
+
+// lib/Buttons/addButton.tsx
+var React58 = __toESM(require("react"), 1);
 
 // lib/utils/sx.ts
 var import_react13 = require("react");
@@ -29879,15 +29896,15 @@ function useSx(sx) {
 // lib/Buttons/addButton.tsx
 var AddButton = ({ children, sx, className, ...props }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React57.createElement("button", { className: ["btn add-btn", sxClass, className].filter(Boolean).join(" "), ...props }, "+ ", children);
+  return /* @__PURE__ */ React58.createElement("button", { className: ["btn add-btn", sxClass, className].filter(Boolean).join(" "), ...props }, "+ ", children);
 };
 var addButton_default = AddButton;
 
 // lib/Buttons/submitButton.tsx
-var React59 = __toESM(require("react"), 1);
+var React60 = __toESM(require("react"), 1);
 
 // lib/Progress/circularProgress.tsx
-var React58 = __toESM(require("react"), 1);
+var React59 = __toESM(require("react"), 1);
 var CircularProgress = ({
   size: size3 = 50,
   color: color2 = "#a81c08",
@@ -29896,14 +29913,14 @@ var CircularProgress = ({
   ...props
 }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     "div",
     {
       className: ["rufous-loader", sxClass, className].filter(Boolean).join(" "),
       style: { width: size3, height: size3 },
       ...props
     },
-    /* @__PURE__ */ React58.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React59.createElement(
       "circle",
       {
         className: "rufous-loader-circle",
@@ -29925,7 +29942,7 @@ var CircularProgressIcon = ({
   className
 }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React58.createElement("div", { className: ["rufous-loader rufous-loader--with-icon", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height: size3 } }, /* @__PURE__ */ React58.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement("div", { className: ["rufous-loader rufous-loader--with-icon", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height: size3 } }, /* @__PURE__ */ React59.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React59.createElement(
     "circle",
     {
       className: "rufous-loader-circle",
@@ -29934,7 +29951,7 @@ var CircularProgressIcon = ({
       r: "45",
       stroke: color2
     }
-  )), /* @__PURE__ */ React58.createElement("div", { className: "rufous-loader__icon-wrap" }, /* @__PURE__ */ React58.createElement("div", { className: spinIcon ? "rufous-loader__icon--spin-y" : void 0 }, icon)));
+  )), /* @__PURE__ */ React59.createElement("div", { className: "rufous-loader__icon-wrap" }, /* @__PURE__ */ React59.createElement("div", { className: spinIcon ? "rufous-loader__icon--spin-y" : void 0 }, icon)));
 };
 
 // lib/Buttons/submitButton.tsx
@@ -29950,8 +29967,8 @@ var SubmitButton = ({
   ...props
 }) => {
   const sxClass = useSx(sx);
-  const [loading, setLoading] = React59.useState(false);
-  const clickTimeout = React59.useRef(null);
+  const [loading, setLoading] = React60.useState(false);
+  const clickTimeout = React60.useRef(null);
   const handleClick = async (e) => {
     const currentTarget = e.currentTarget;
     if (loading) return;
@@ -29986,7 +30003,7 @@ var SubmitButton = ({
       }
     }
   };
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "button",
     {
       ...props,
@@ -29996,29 +30013,29 @@ var SubmitButton = ({
       onClick: handleClick,
       onDoubleClick: handleDoubleClick
     },
-    /* @__PURE__ */ React59.createElement("span", { className: "btn-content" }, children, (loading || isLoading) && /* @__PURE__ */ React59.createElement("span", { className: "btn-loader" }, /* @__PURE__ */ React59.createElement(circularProgress_default, { size: 18, color: props.disabled || loading || isLoading ? "#00000042" : void 0 })))
+    /* @__PURE__ */ React60.createElement("span", { className: "btn-content" }, children, (loading || isLoading) && /* @__PURE__ */ React60.createElement("span", { className: "btn-loader" }, /* @__PURE__ */ React60.createElement(circularProgress_default, { size: 18, color: props.disabled || loading || isLoading ? "#00000042" : void 0 })))
   );
 };
 var submitButton_default = SubmitButton;
 
 // lib/Buttons/cancelButton.tsx
-var React60 = __toESM(require("react"), 1);
+var React61 = __toESM(require("react"), 1);
 var CancelButton = ({ children, sx, className, ...props }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React60.createElement("button", { className: ["btn cancel-btn", sxClass, className].filter(Boolean).join(" "), ...props }, children);
+  return /* @__PURE__ */ React61.createElement("button", { className: ["btn cancel-btn", sxClass, className].filter(Boolean).join(" "), ...props }, children);
 };
 var cancelButton_default = CancelButton;
 
 // lib/Buttons/stdButton.tsx
-var React61 = __toESM(require("react"), 1);
+var React62 = __toESM(require("react"), 1);
 var StandardButton = ({ children, sx, className, ...props }) => {
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React61.createElement("button", { className: ["btn standard-btn", sxClass, className].filter(Boolean).join(" "), ...props }, children);
+  return /* @__PURE__ */ React62.createElement("button", { className: ["btn standard-btn", sxClass, className].filter(Boolean).join(" "), ...props }, children);
 };
 var stdButton_default = StandardButton;
 
 // lib/Dialogs/BaseDialog.tsx
-var React62 = __toESM(require("react"), 1);
+var React63 = __toESM(require("react"), 1);
 var import_react14 = require("react");
 var import_lucide_react = require("lucide-react");
 var BaseDialog = ({
@@ -30053,7 +30070,7 @@ var BaseDialog = ({
   const sxClass = useSx(sx);
   if (!open) return null;
   const isButtonLoading = isSubmitting || loading;
-  const renderButtons = () => /* @__PURE__ */ React62.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React62.createElement(
+  const renderButtons = () => /* @__PURE__ */ React63.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React63.createElement(
     "button",
     {
       className: "btn-cancel",
@@ -30061,7 +30078,7 @@ var BaseDialog = ({
       disabled: isLoading || isButtonLoading
     },
     cancelText
-  ), onConfirm && /* @__PURE__ */ React62.createElement(
+  ), onConfirm && /* @__PURE__ */ React63.createElement(
     "button",
     {
       className: "btn-confirm",
@@ -30073,10 +30090,10 @@ var BaseDialog = ({
         setIsSubmitting(false);
       }
     },
-    /* @__PURE__ */ React62.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
-    isButtonLoading && /* @__PURE__ */ React62.createElement("span", { className: "spinner", style: { position: "absolute" } })
+    /* @__PURE__ */ React63.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
+    isButtonLoading && /* @__PURE__ */ React63.createElement("span", { className: "spinner", style: { position: "absolute" } })
   ));
-  return /* @__PURE__ */ React62.createElement("div", { className: `dialog-overlay ${size3 === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement("div", { className: `dialog-overlay ${size3 === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React63.createElement(
     "div",
     {
       className: ["dialog-container", size3 ? `size-${size3}` : "", sxClass, className].filter(Boolean).join(" "),
@@ -30085,15 +30102,15 @@ var BaseDialog = ({
         minHeight
       }
     },
-    /* @__PURE__ */ React62.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React62.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React62.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React63.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React63.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React63.createElement(
       import_lucide_react.X,
       {
         size: 18,
         color: themeConfig?.icon || "#666666"
       }
     ))),
-    /* @__PURE__ */ React62.createElement("div", { className: "dialog-divider" }),
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React63.createElement(
       "div",
       {
         className: "dialog-body",
@@ -30104,7 +30121,7 @@ var BaseDialog = ({
       },
       children
     ),
-    /* @__PURE__ */ React62.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React63.createElement("div", { className: "dialog-divider" }),
     customButtons || renderButtons()
   ));
 };
@@ -32218,13 +32235,13 @@ var Autocomplete = import_react21.default.forwardRef(AutocompleteInner);
 Autocomplete.displayName = "Autocomplete";
 
 // lib/Progress/RufousLogoLoader.tsx
-var React70 = __toESM(require("react"), 1);
+var React71 = __toESM(require("react"), 1);
 var _uid = 0;
 var RufousLogoLoader = ({ size: size3 = 80, sx, className }) => {
-  const clipId = React70.useRef(`rll-${++_uid}`).current;
+  const clipId = React71.useRef(`rll-${++_uid}`).current;
   const height = size3 * (38.795 / 54.585);
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React70.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height } }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height } }, /* @__PURE__ */ React71.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -32233,14 +32250,14 @@ var RufousLogoLoader = ({ size: size3 = 80, sx, className }) => {
       height,
       className: "rufous-logo-loader__svg"
     },
-    /* @__PURE__ */ React70.createElement("defs", null, /* @__PURE__ */ React70.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React71.createElement("defs", null, /* @__PURE__ */ React71.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React71.createElement(
       "path",
       {
         transform: "translate(2208 18.205)",
         d: "M.7,38.8a3.783,3.783,0,0,1-.5-.045l-.031,0A.26.26,0,0,1,0,38.564a.279.279,0,0,1,.14-.2c.222-.126.45-.251.671-.371l.047-.026c.357-.194.8-.435,1.209-.685.783-.479,1.565-.993,2.32-1.489l.033-.022.218-.143.49-.32c.575-.374,1.226-.8,1.824-1.241.98-.726,1.834-1.407,2.611-2.081a22.444,22.444,0,0,0,1.783-1.774A14.2,14.2,0,0,0,12.5,28.749l.012-.016a15.8,15.8,0,0,0,1.151-1.8,10.351,10.351,0,0,0,.586-1.511l0-.011.092-.278a4.425,4.425,0,0,0,.14-.583l.007-.036c.024-.119.048-.243.079-.363a4.639,4.639,0,0,0-.034-2.566c-.064-.212-.126-.43-.184-.636l-.008-.028c-.111-.391-.225-.8-.369-1.181a8.71,8.71,0,0,0-2.279-3.24,14.363,14.363,0,0,0-3.239-2.326c-.75-.4-1.553-.727-2.329-1.046L6.1,13.114l-.157-.065c-.294-.122-.6-.221-.9-.318l-.025-.008c-.19-.061-.427-.136-.649-.218-.108-.04-.265-.172-.252-.229a.7.7,0,0,1,.235-.4.915.915,0,0,1,.449-.112c.383-.029.77-.063,1.165-.1.969-.085,1.971-.174,2.962-.181h.119a13.145,13.145,0,0,1,2.907.315,11.888,11.888,0,0,1,3.128,1.123,10.286,10.286,0,0,1,2.3,1.554.92.92,0,0,1,.273.4,12.722,12.722,0,0,1,.458,3.3c-.009,1.494-.014,2.867-.014,4.2,0,.309.013.588.039.852a1.013,1.013,0,0,0,.078.26l0,.01c.027.067.051.129.077.207.029-.064.054-.116.076-.161l.009-.017.006-.012a.823.823,0,0,0,.076-.189c.051-.247.1-.494.164-.767.136-.618.276-1.257.359-1.9a24.362,24.362,0,0,0,0-6.777,13.01,13.01,0,0,0-.559-2.1c-.061-.185-.125-.382-.187-.579a9.42,9.42,0,0,0-.583-1.469c-.367-.727-.786-1.449-1.184-2.126a9.376,9.376,0,0,0-.643-.918c-.076-.1-.151-.2-.224-.3L15.548,6.3a8.128,8.128,0,0,0-.865-1.057,32.021,32.021,0,0,0-2.466-2.183,12.673,12.673,0,0,0-1.905-1.188c-.48-.256-1-.485-1.462-.687-.221-.1-.457-.2-.683-.306a.663.663,0,0,1-.11-.071L8.039.795c-.027-.02-.058-.043-.1-.069L8.062.667,8.108.644a1.786,1.786,0,0,1,.27-.12A11.679,11.679,0,0,1,11.866,0a13.332,13.332,0,0,1,1.769.121A13.927,13.927,0,0,1,15.9.693l.471.147a10.775,10.775,0,0,1,1.656.658,9.622,9.622,0,0,1,1.768,1.041,32.024,32.024,0,0,1,3.092,2.717,25.62,25.62,0,0,1,2.245,2.829l.084.117c.617.86,1.171,1.777,1.678,2.641.255.435.484.9.687,1.3.14.281.285.572.436.854.262.491.534.977.835,1.516l.005.01q.169.3.337.6c.064.116.13.232.2.347l.027.047c.12.212.244.431.357.651a8.518,8.518,0,0,0,2.121,2.695c.065.024.137.054.212.086l.013.006a1.268,1.268,0,0,0,.376.123.087.087,0,0,0,.063-.02.209.209,0,0,0,.083-.151c0-.083-.08-.153-.157-.22a.694.694,0,0,1-.135-.142c-.134-.216-.273-.436-.407-.649l-.063-.1c-.373-.587-.8-1.251-1.157-1.923s-.666-1.373-.964-2.057l0-.008q-.123-.284-.247-.564a1.707,1.707,0,0,1,.239-1.554l.026-.046.005-.009A12.918,12.918,0,0,1,31.408,9.3,7.814,7.814,0,0,1,33.75,7.612a5.391,5.391,0,0,1,2.218-.444,11.369,11.369,0,0,1,1.882.186,9.211,9.211,0,0,1,2.845,1.022c.138.071.261.135.373.188a4.155,4.155,0,0,0,1.849.464h.093c1.993-.052,4-.14,5.95-.224l.846-.036c.9-.038,1.808-.066,2.682-.093L52.7,8.67l1.007-.031h.041a1.787,1.787,0,0,1,.73.163c.1.051.109.256.109.318,0,.081-.147.169-.257.175-.466.028-.994.043-1.485.043a37.855,37.855,0,0,0-6.3.577A9.221,9.221,0,0,0,42.7,11.3a7.884,7.884,0,0,0-1.565,1.5c-.593.743-1.116,1.545-1.621,2.321l-.121.185c-.228.35-.435.709-.662,1.109l-.041.071c-.136.236-.276.481-.42.717l-.007.012c-.349.572-.709,1.162-1.1,1.716l-.216.307-.01.014a21.585,21.585,0,0,1-1.451,1.907c-1.317,1.485-2.538,2.8-3.734,4.006a30.822,30.822,0,0,1-2.5,2.207c-.548.446-1.139.86-1.71,1.26l-.01.007q-.254.177-.5.355c-.536.379-1.109.78-1.7,1.157-.545.35-1.143.71-1.828,1.1-.842.483-1.586.9-2.275,1.26-.271.144-.553.272-.868.412-.13.058-.3.135-.467.213a6.838,6.838,0,0,1-1.18.3,5.079,5.079,0,0,1,.647-.771l.008-.008c.132-.136.251-.26.365-.393l.048-.056c.566-.667,1.151-1.357,1.7-2.059s1.126-1.439,1.649-2.2c.4-.579.749-1.2,1.134-1.888l.016-.028c.406-.734.826-1.493,1.181-2.266.274-.6.733-1.787.866-2.189l.023-.07c.13-.389.215-.646-.013-.916a.369.369,0,0,1-.041.031l0,0c-.028.021-.055.041-.058.065a2.307,2.307,0,0,1-.146.5,5.257,5.257,0,0,1-.374.709c-.281.468-.536.959-.782,1.434-.2.385-.379.731-.57,1.069a20.042,20.042,0,0,1-1.161,1.871,30.689,30.689,0,0,1-1.985,2.531c-.74.821-1.567,1.648-2.6,2.6a21.448,21.448,0,0,1-2.1,1.669c-.85.606-1.754,1.2-2.688,1.768a17.867,17.867,0,0,1-1.993,1.037c-.994.445-2.066.891-3.185,1.324a12.127,12.127,0,0,1-1.714.514c-.955.213-1.969.413-3.1.611-1.023.18-2.054.328-2.927.449A1.41,1.41,0,0,1,.7,38.8ZM37.945,10.58l-.007,0a.583.583,0,0,0-.223.048.677.677,0,0,0-.437.555.637.637,0,0,0,.426.527.621.621,0,0,0,.209.046h.016a.72.72,0,0,0,.464-.194.676.676,0,0,0,.194-.282l0-.011,0-.005,0-.006,0-.009a.415.415,0,0,0,.014-.109.734.734,0,0,0-.657-.56Z"
       }
     ))),
-    /* @__PURE__ */ React70.createElement("g", { transform: "translate(-123.275 -24)" }, /* @__PURE__ */ React70.createElement("g", { transform: "translate(-2084.725 5.795)", clipPath: `url(#${clipId})` }, /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-1", width: "40", height: "6", transform: "translate(2208 58) rotate(-90)", fill: "#d07f6f" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-2", width: "40", height: "6", transform: "translate(2214 58) rotate(-90)", fill: "#c66958" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-3", width: "40", height: "7", transform: "translate(2220 58) rotate(-90)", fill: "#bb5341" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-4", width: "40", height: "6", transform: "translate(2227 58) rotate(-90)", fill: "#b03a28" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-5", width: "40", height: "6", transform: "translate(2233 58) rotate(-90)", fill: "#a41b06" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-6", width: "40", height: "6", transform: "translate(2239 58) rotate(-90)", fill: "#8e1604" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-7", width: "40", height: "6", transform: "translate(2245 58) rotate(-90)", fill: "#791103" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-8", width: "40", height: "5", transform: "translate(2251 58) rotate(-90)", fill: "#640c02" }), /* @__PURE__ */ React70.createElement("rect", { className: "rufous-ls rufous-ls-9", width: "40", height: "7", transform: "translate(2256 58) rotate(-90)", fill: "#500801" })))
+    /* @__PURE__ */ React71.createElement("g", { transform: "translate(-123.275 -24)" }, /* @__PURE__ */ React71.createElement("g", { transform: "translate(-2084.725 5.795)", clipPath: `url(#${clipId})` }, /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-1", width: "40", height: "6", transform: "translate(2208 58) rotate(-90)", fill: "#d07f6f" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-2", width: "40", height: "6", transform: "translate(2214 58) rotate(-90)", fill: "#c66958" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-3", width: "40", height: "7", transform: "translate(2220 58) rotate(-90)", fill: "#bb5341" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-4", width: "40", height: "6", transform: "translate(2227 58) rotate(-90)", fill: "#b03a28" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-5", width: "40", height: "6", transform: "translate(2233 58) rotate(-90)", fill: "#a41b06" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-6", width: "40", height: "6", transform: "translate(2239 58) rotate(-90)", fill: "#8e1604" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-7", width: "40", height: "6", transform: "translate(2245 58) rotate(-90)", fill: "#791103" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-8", width: "40", height: "5", transform: "translate(2251 58) rotate(-90)", fill: "#640c02" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-9", width: "40", height: "7", transform: "translate(2256 58) rotate(-90)", fill: "#500801" })))
   ));
 };
 
@@ -34922,8 +34939,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // lib/Box/Box.tsx
-var React86 = __toESM(require("react"), 1);
-var Box = React86.forwardRef(
+var React87 = __toESM(require("react"), 1);
+var Box = React87.forwardRef(
   ({
     component: component2 = "div",
     children,
@@ -34956,14 +34973,14 @@ var Box = React86.forwardRef(
     };
     const classes = ["rf-box", sxClass, className].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React86.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React87.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
   }
 );
 Box.displayName = "Box";
 
 // lib/Stack/Stack.tsx
-var React87 = __toESM(require("react"), 1);
-var Stack2 = React87.forwardRef(
+var React88 = __toESM(require("react"), 1);
+var Stack2 = React88.forwardRef(
   ({
     direction = "column",
     spacing,
@@ -34992,14 +35009,14 @@ var Stack2 = React87.forwardRef(
     const classes = ["rf-stack", sxClass, className].filter(Boolean).join(" ");
     let content;
     if (divider) {
-      const childArray = React87.Children.toArray(children).filter(
+      const childArray = React88.Children.toArray(children).filter(
         (child) => child !== null && child !== void 0
       );
       content = childArray.reduce((acc, child, idx) => {
         acc.push(child);
         if (idx < childArray.length - 1) {
           acc.push(
-            /* @__PURE__ */ React87.createElement("div", { key: `divider-${idx}`, className: "rf-stack-divider" }, divider)
+            /* @__PURE__ */ React88.createElement("div", { key: `divider-${idx}`, className: "rf-stack-divider" }, divider)
           );
         }
         return acc;
@@ -35008,13 +35025,13 @@ var Stack2 = React87.forwardRef(
       content = children;
     }
     const Tag = component2;
-    return /* @__PURE__ */ React87.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
+    return /* @__PURE__ */ React88.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
   }
 );
 Stack2.displayName = "Stack";
 
 // lib/Grid/Grid.tsx
-var React88 = __toESM(require("react"), 1);
+var React89 = __toESM(require("react"), 1);
 function getBreakpointClass(bp, val2) {
   if (val2 === void 0) return "";
   if (val2 === true) return `rf-grid-${bp}-12`;
@@ -35027,7 +35044,7 @@ function getSpacingGap(spacing) {
   const base = spacing.xs ?? spacing.sm ?? spacing.md ?? 0;
   return `${base * 8}px`;
 }
-var Grid = React88.forwardRef(
+var Grid = React89.forwardRef(
   ({
     container = false,
     item = false,
@@ -35077,14 +35094,14 @@ var Grid = React88.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React88.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React89.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
   }
 );
 Grid.displayName = "Grid";
 
 // lib/Paper/Paper.tsx
-var React89 = __toESM(require("react"), 1);
-var Paper = React89.forwardRef(
+var React90 = __toESM(require("react"), 1);
+var Paper = React90.forwardRef(
   ({
     elevation = 1,
     square = false,
@@ -35106,14 +35123,14 @@ var Paper = React89.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React89.createElement(Tag, { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React90.createElement(Tag, { ref, className: classes, style, ...rest }, children);
   }
 );
 Paper.displayName = "Paper";
 
 // lib/Card/Card.tsx
-var React90 = __toESM(require("react"), 1);
-var Card = React90.forwardRef(
+var React91 = __toESM(require("react"), 1);
+var Card = React91.forwardRef(
   ({
     elevation = 1,
     variant = "elevation",
@@ -35132,33 +35149,33 @@ var Card = React90.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React90.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 Card.displayName = "Card";
-var CardContent = React90.forwardRef(
+var CardContent = React91.forwardRef(
   ({ children, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = ["rf-card-content", sxClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React90.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 CardContent.displayName = "CardContent";
-var CardHeader = React90.forwardRef(
+var CardHeader = React91.forwardRef(
   ({ title, subheader, avatar, action, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = ["rf-card-header", sxClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React90.createElement("div", { ref, className: classes, style, ...rest }, avatar && /* @__PURE__ */ React90.createElement("div", { className: "rf-card-header-avatar" }, avatar), /* @__PURE__ */ React90.createElement("div", { className: "rf-card-header-content" }, /* @__PURE__ */ React90.createElement("div", { className: "rf-card-header-title" }, title), subheader && /* @__PURE__ */ React90.createElement("div", { className: "rf-card-header-subheader" }, subheader)), action && /* @__PURE__ */ React90.createElement("div", { className: "rf-card-header-action" }, action));
+    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, avatar && /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-avatar" }, avatar), /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-content" }, /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-title" }, title), subheader && /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-subheader" }, subheader)), action && /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-action" }, action));
   }
 );
 CardHeader.displayName = "CardHeader";
-var CardMedia = React90.forwardRef(
+var CardMedia = React91.forwardRef(
   ({ component: component2 = "div", image: image2, src, height, alt, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = ["rf-card-media", sxClass, className].filter(Boolean).join(" ");
     const computedHeight = height !== void 0 ? typeof height === "number" ? `${height}px` : height : "200px";
     if (component2 === "img") {
-      return /* @__PURE__ */ React90.createElement(
+      return /* @__PURE__ */ React91.createElement(
         "img",
         {
           ref,
@@ -35171,7 +35188,7 @@ var CardMedia = React90.forwardRef(
       );
     }
     if (component2 === "video") {
-      return /* @__PURE__ */ React90.createElement(
+      return /* @__PURE__ */ React91.createElement(
         "video",
         {
           ref,
@@ -35187,7 +35204,7 @@ var CardMedia = React90.forwardRef(
       ...image2 ? { backgroundImage: `url(${image2})` } : {},
       ...style
     };
-    return /* @__PURE__ */ React90.createElement(
+    return /* @__PURE__ */ React91.createElement(
       "div",
       {
         ref,
@@ -35199,7 +35216,7 @@ var CardMedia = React90.forwardRef(
   }
 );
 CardMedia.displayName = "CardMedia";
-var CardActions = React90.forwardRef(
+var CardActions = React91.forwardRef(
   ({ disableSpacing = false, children, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = [
@@ -35208,13 +35225,13 @@ var CardActions = React90.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React90.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 CardActions.displayName = "CardActions";
 
 // lib/Accordion/Accordion.tsx
-var React91 = __toESM(require("react"), 1);
+var React92 = __toESM(require("react"), 1);
 var import_react37 = require("react");
 var AccordionContext = (0, import_react37.createContext)({
   expanded: false,
@@ -35222,7 +35239,7 @@ var AccordionContext = (0, import_react37.createContext)({
   toggle: () => {
   }
 });
-var Accordion = React91.forwardRef(
+var Accordion = React92.forwardRef(
   ({
     expanded: expandedProp,
     defaultExpanded = false,
@@ -35257,11 +35274,11 @@ var Accordion = React91.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement(AccordionContext.Provider, { value: { expanded, disabled, toggle } }, /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children));
+    return /* @__PURE__ */ React92.createElement(AccordionContext.Provider, { value: { expanded, disabled, toggle } }, /* @__PURE__ */ React92.createElement("div", { ref, className: classes, style, ...rest }, children));
   }
 );
 Accordion.displayName = "Accordion";
-var ChevronIcon = () => /* @__PURE__ */ React91.createElement(
+var ChevronIcon = () => /* @__PURE__ */ React92.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -35275,9 +35292,9 @@ var ChevronIcon = () => /* @__PURE__ */ React91.createElement(
     strokeLinejoin: "round",
     "aria-hidden": "true"
   },
-  /* @__PURE__ */ React91.createElement("polyline", { points: "6 9 12 15 18 9" })
+  /* @__PURE__ */ React92.createElement("polyline", { points: "6 9 12 15 18 9" })
 );
-var AccordionSummary = React91.forwardRef(
+var AccordionSummary = React92.forwardRef(
   ({ expandIcon, children, sx, className, style, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const { expanded, toggle, disabled } = (0, import_react37.useContext)(AccordionContext);
@@ -35291,7 +35308,7 @@ var AccordionSummary = React91.forwardRef(
       "rf-accordion-summary-icon",
       expanded ? "rf-accordion-icon-expanded" : ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement(
+    return /* @__PURE__ */ React92.createElement(
       "button",
       {
         ref,
@@ -35303,13 +35320,13 @@ var AccordionSummary = React91.forwardRef(
         "aria-expanded": expanded,
         ...rest
       },
-      /* @__PURE__ */ React91.createElement("span", { className: "rf-accordion-summary-content" }, children),
-      /* @__PURE__ */ React91.createElement("span", { className: iconClasses }, expandIcon !== void 0 ? expandIcon : /* @__PURE__ */ React91.createElement(ChevronIcon, null))
+      /* @__PURE__ */ React92.createElement("span", { className: "rf-accordion-summary-content" }, children),
+      /* @__PURE__ */ React92.createElement("span", { className: iconClasses }, expandIcon !== void 0 ? expandIcon : /* @__PURE__ */ React92.createElement(ChevronIcon, null))
     );
   }
 );
 AccordionSummary.displayName = "AccordionSummary";
-var AccordionDetails = React91.forwardRef(
+var AccordionDetails = React92.forwardRef(
   ({ children, sx, className, style, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const { expanded } = (0, import_react37.useContext)(AccordionContext);
@@ -35322,7 +35339,7 @@ var AccordionDetails = React91.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement("div", { className: wrapperClasses }, /* @__PURE__ */ React91.createElement("div", { className: "rf-accordion-details-inner" }, /* @__PURE__ */ React91.createElement("div", { ref, className: detailsClasses, style, ...rest }, children)));
+    return /* @__PURE__ */ React92.createElement("div", { className: wrapperClasses }, /* @__PURE__ */ React92.createElement("div", { className: "rf-accordion-details-inner" }, /* @__PURE__ */ React92.createElement("div", { ref, className: detailsClasses, style, ...rest }, children)));
   }
 );
 AccordionDetails.displayName = "AccordionDetails";
@@ -36654,6 +36671,116 @@ var Zoom = ({
   });
 };
 Zoom.displayName = "Zoom";
+
+// lib/ImageField/ImageField.tsx
+var import_react48 = __toESM(require("react"), 1);
+function getSizeStyle2(size3) {
+  if (size3 === "small") return { className: "rf-image-field--small" };
+  if (size3 === "large") return { className: "rf-image-field--large" };
+  if (typeof size3 === "number") {
+    return {
+      className: "",
+      style: { width: size3, height: size3 }
+    };
+  }
+  return { className: "rf-image-field--medium" };
+}
+var ImageField = import_react48.default.forwardRef(
+  ({
+    src,
+    alt = "",
+    variant = "circular",
+    size: size3 = "medium",
+    accept = "image/*",
+    onChange,
+    overlayText = "Upload",
+    disabled = false,
+    className = "",
+    style,
+    sx
+  }, ref) => {
+    const sxClass = useSx(sx);
+    const inputRef = (0, import_react48.useRef)(null);
+    const [preview, setPreview] = (0, import_react48.useState)(null);
+    const { className: sizeClass, style: sizeStyle } = getSizeStyle2(size3);
+    const displaySrc = preview || src;
+    const handleClick = (0, import_react48.useCallback)(() => {
+      if (!disabled) {
+        inputRef.current?.click();
+      }
+    }, [disabled]);
+    const handleKeyDown = (0, import_react48.useCallback)(
+      (e) => {
+        if ((e.key === "Enter" || e.key === " ") && !disabled) {
+          e.preventDefault();
+          inputRef.current?.click();
+        }
+      },
+      [disabled]
+    );
+    const handleFileChange = (0, import_react48.useCallback)(
+      (e) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        const objectUrl = URL.createObjectURL(file);
+        setPreview(objectUrl);
+        onChange?.(file);
+        e.target.value = "";
+      },
+      [onChange]
+    );
+    const classes = [
+      "rf-image-field",
+      `rf-image-field--${variant}`,
+      sizeClass,
+      disabled ? "rf-image-field--disabled" : "",
+      sxClass,
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = typeof size3 === "number" ? Math.max(size3 * 0.25, 16) : size3 === "small" ? 16 : size3 === "large" ? 28 : 22;
+    return /* @__PURE__ */ import_react48.default.createElement(
+      "div",
+      {
+        ref,
+        className: classes,
+        style: { ...sizeStyle, ...style },
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": alt || overlayText,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+      },
+      displaySrc ? /* @__PURE__ */ import_react48.default.createElement(
+        "img",
+        {
+          src: displaySrc,
+          alt,
+          className: "rf-image-field__img"
+        }
+      ) : /* @__PURE__ */ import_react48.default.createElement("div", { className: "rf-image-field__placeholder" }, /* @__PURE__ */ import_react48.default.createElement(
+        cameraIcon_default,
+        {
+          width: iconSize,
+          height: iconSize,
+          color: "var(--text-secondary)"
+        }
+      )),
+      /* @__PURE__ */ import_react48.default.createElement("div", { className: "rf-image-field__overlay" }, /* @__PURE__ */ import_react48.default.createElement(cameraIcon_default, { width: iconSize, height: iconSize, color: "#ffffff" }), overlayText && /* @__PURE__ */ import_react48.default.createElement("span", { className: "rf-image-field__overlay-text" }, overlayText)),
+      /* @__PURE__ */ import_react48.default.createElement(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept,
+          className: "rf-image-field__input",
+          onChange: handleFileChange,
+          disabled
+        }
+      )
+    );
+  }
+);
+ImageField.displayName = "ImageField";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   APP_THEMES,
@@ -36671,6 +36798,7 @@ Zoom.displayName = "Zoom";
   BaseDialog,
   Box,
   Breadcrumbs,
+  CameraIcon,
   CancelButton,
   Card,
   CardActions,
@@ -36705,6 +36833,7 @@ Zoom.displayName = "Zoom";
   Grow,
   HelpOutlinedIcon,
   HierarchyIcon,
+  ImageField,
   InactiveGroupIcon,
   IndustryIcon,
   InvoiceIcon,