@rufous/ui 0.1.85 → 0.1.86

package/dist/main.cjs

@@ -6424,7 +6424,7 @@ var init_element = __esm({
 });
 
 // node_modules/jodit/esm/core/ui/button/button/button.js
-function Button(jodit, stateOrText, text, variant) {
+function Button2(jodit, stateOrText, text, variant) {
   const button = new UIButton(jodit);
   button.state.tabIndex = jodit.o.allowTabNavigation ? 0 : -1;
   if (isString(stateOrText)) {
@@ -10303,7 +10303,7 @@ function Alert(msg, title, callback, className = "jodit-dialog_alert") {
     callback = title;
     title = void 0;
   }
-  const dialog = this instanceof Dialog ? this : new Dialog({ closeOnClickOverlay: true }), container = dialog.c.div(className), okButton = Button(dialog, "ok", "Ok");
+  const dialog = this instanceof Dialog ? this : new Dialog({ closeOnClickOverlay: true }), container = dialog.c.div(className), okButton = Button2(dialog, "ok", "Ok");
   asArray(msg).forEach((oneMessage) => {
     container.appendChild(Dom.isNode(oneMessage) ? oneMessage : dialog.c.fromHTML(oneMessage));
   });
@@ -10341,8 +10341,8 @@ function Confirm(msg, title, callback) {
       dialog.close();
     }
   };
-  const $cancel = Button(dialog, "cancel", "Cancel");
-  const $ok = Button(dialog, "ok", "Yes");
+  const $cancel = Button2(dialog, "cancel", "Cancel");
+  const $ok = Button2(dialog, "ok", "Yes");
   $cancel.onAction(action(false));
   $ok.onAction(action(true));
   dialog.e.on($div, "submit", () => {
@@ -10364,7 +10364,7 @@ var init_confirm = __esm({
 
 // node_modules/jodit/esm/modules/dialog/prompt.js
 function Prompt(msg, title, callback, placeholder2, defaultValue) {
-  const dialog = this instanceof Dialog ? this : new Dialog({ closeOnClickOverlay: true }), cancelButton = Button(dialog, "cancel", "Cancel"), okButton = Button(dialog, "ok", "Ok"), form2 = dialog.c.element("form", {
+  const dialog = this instanceof Dialog ? this : new Dialog({ closeOnClickOverlay: true }), cancelButton = Button2(dialog, "cancel", "Cancel"), okButton = Button2(dialog, "ok", "Ok"), form2 = dialog.c.element("form", {
     class: "jodit-dialog_prompt"
   }), inputElement = dialog.c.element("input", {
     autofocus: true,
@@ -10515,7 +10515,7 @@ var init_context_menu = __esm({
           if (!item) {
             return;
           }
-          const action = Button(this.jodit, item.icon || "empty", item.title);
+          const action = Button2(this.jodit, item.icon || "empty", item.title);
           this.jodit && action.setParentView(this.jodit);
           action.setMod("context", "menu");
           action.onAction((e) => {
@@ -12018,9 +12018,9 @@ var init_image_editor = __esm({
         this.resizeUseRatio = o.resizeUseRatio;
         this.cropUseRatio = o.cropUseRatio;
         this.buttons = {
-          reset: Button(this.j, "update", "Reset"),
-          save: Button(this.j, "save", "Save"),
-          saveas: Button(this.j, {
+          reset: Button2(this.j, "update", "Reset"),
+          save: Button2(this.j, "save", "Save"),
+          saveas: Button2(this.j, {
             icon: {
               name: "save"
             },
@@ -12508,7 +12508,7 @@ function stateListeners() {
           return;
         }
         if (options2.renameFolder && this.dataProvider.canI("FolderRename")) {
-          const btn = Button(this, {
+          const btn = Button2(this, {
             icon: { name: "pencil" },
             name: "rename",
             tooltip: "Rename",
@@ -12518,7 +12518,7 @@ function stateListeners() {
           folderElm.appendChild(btn.container);
         }
         if (options2.deleteFolder && this.dataProvider.canI("FolderRemove")) {
-          const btn = Button(this, {
+          const btn = Button2(this, {
             icon: { name: "cancel" },
             name: "remove",
             tooltip: "Delete",
@@ -12529,7 +12529,7 @@ function stateListeners() {
         }
       });
       if (options2.createNewFolder && this.dataProvider.canI("FolderCreate")) {
-        const button = Button(this, "plus", "Add folder", "secondary");
+        const button = Button2(this, "plus", "Add folder", "secondary");
         button.onAction(() => {
           this.e.fire("addFolder", {
             path: normalizePath(source.path + "/"),
@@ -17623,7 +17623,7 @@ __export(modules_exports, {
   Alert: () => Alert,
   Async: () => Async,
   AsyncStorage: () => AsyncStorage,
-  Button: () => Button,
+  Button: () => Button2,
   CommitStyle: () => CommitStyle,
   Component: () => Component,
   Confirm: () => Confirm,
@@ -25100,7 +25100,7 @@ var init_tabs = __esm({
         attr(tab2, {
           role: "tabpanel"
         });
-        const button = Button(jodit, icon || name, name);
+        const button = Button2(jodit, icon || name, name);
         button.state.role = "tab";
         jodit.e.on(button.container, "pointerdown", (e) => e.preventDefault());
         if (!firstTab) {
@@ -28650,6 +28650,7 @@ __export(main_exports, {
   BaseDialog: () => BaseDialog_default,
   Box: () => Box,
   Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
   CameraIcon: () => cameraIcon_default,
   CancelButton: () => cancelButton_default,
   Card: () => Card,
@@ -28685,6 +28686,7 @@ __export(main_exports, {
   Grow: () => Grow,
   HelpOutlinedIcon: () => helpOutlinedIcon_default,
   HierarchyIcon: () => hierarchyIcon_default,
+  IconButton: () => IconButton,
   ImageField: () => ImageField,
   InactiveGroupIcon: () => inactiveGroupIcon_default,
   IndustryIcon: () => industryIcon_default,
@@ -30035,8 +30037,97 @@ var StandardButton = ({ children, sx, className, ...props }) => {
 };
 var stdButton_default = StandardButton;
 
-// lib/Dialogs/BaseDialog.tsx
+// lib/Buttons/Button.tsx
 var React63 = __toESM(require("react"), 1);
+var Button = React63.forwardRef(
+  ({
+    variant = "text",
+    color: color2 = "primary",
+    size: size3 = "medium",
+    startIcon,
+    endIcon,
+    fullWidth = false,
+    disabled = false,
+    disableElevation = false,
+    loading = false,
+    loadingPosition = "center",
+    component: component2,
+    children,
+    className,
+    style,
+    sx,
+    href,
+    type = "button",
+    ...rest
+  }, ref) => {
+    const sxClass = useSx(sx);
+    const classes = [
+      "rf-btn",
+      `rf-btn--${variant}`,
+      `rf-btn--${color2}`,
+      `rf-btn--${size3}`,
+      fullWidth && "rf-btn--full-width",
+      disableElevation && "rf-btn--no-elevation",
+      disabled && "rf-btn--disabled",
+      loading && "rf-btn--loading",
+      sxClass,
+      className
+    ].filter(Boolean).join(" ");
+    const Tag = component2 || (href ? "a" : "button");
+    const tagProps = { ...rest };
+    if (Tag === "a") {
+      tagProps.href = disabled ? void 0 : href;
+    } else {
+      tagProps.type = type;
+      tagProps.disabled = disabled || loading;
+    }
+    return /* @__PURE__ */ React63.createElement(Tag, { ref, className: classes, style, ...tagProps }, loading && loadingPosition === "start" && /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__loading-indicator rf-btn__loading--start" }, /* @__PURE__ */ React63.createElement(circularProgress_default, { size: size3 === "small" ? 14 : size3 === "large" ? 22 : 18 })), startIcon && !loading && /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__start-icon" }, startIcon), loading && loadingPosition === "center" ? /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__loading-indicator" }, /* @__PURE__ */ React63.createElement(circularProgress_default, { size: size3 === "small" ? 14 : size3 === "large" ? 22 : 18 })) : /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__label" }, children), endIcon && !loading && /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__end-icon" }, endIcon), loading && loadingPosition === "end" && /* @__PURE__ */ React63.createElement("span", { className: "rf-btn__loading-indicator rf-btn__loading--end" }, /* @__PURE__ */ React63.createElement(circularProgress_default, { size: size3 === "small" ? 14 : size3 === "large" ? 22 : 18 })));
+  }
+);
+Button.displayName = "Button";
+
+// lib/Buttons/IconButton.tsx
+var React64 = __toESM(require("react"), 1);
+var IconButton = React64.forwardRef(
+  ({
+    color: color2 = "default",
+    size: size3 = "medium",
+    edge = false,
+    disabled = false,
+    component: component2,
+    children,
+    className,
+    style,
+    sx,
+    href,
+    type = "button",
+    ...rest
+  }, ref) => {
+    const sxClass = useSx(sx);
+    const classes = [
+      "rf-icon-btn",
+      `rf-icon-btn--${color2}`,
+      `rf-icon-btn--${size3}`,
+      edge && `rf-icon-btn--edge-${edge}`,
+      disabled && "rf-icon-btn--disabled",
+      sxClass,
+      className
+    ].filter(Boolean).join(" ");
+    const Tag = component2 || (href ? "a" : "button");
+    const tagProps = { ...rest };
+    if (Tag === "a") {
+      tagProps.href = disabled ? void 0 : href;
+    } else {
+      tagProps.type = type;
+      tagProps.disabled = disabled;
+    }
+    return /* @__PURE__ */ React64.createElement(Tag, { ref, className: classes, style, ...tagProps }, children);
+  }
+);
+IconButton.displayName = "IconButton";
+
+// lib/Dialogs/BaseDialog.tsx
+var React65 = __toESM(require("react"), 1);
 var import_react14 = require("react");
 var import_lucide_react = require("lucide-react");
 var BaseDialog = ({
@@ -30071,7 +30162,7 @@ var BaseDialog = ({
   const sxClass = useSx(sx);
   if (!open) return null;
   const isButtonLoading = isSubmitting || loading;
-  const renderButtons = () => /* @__PURE__ */ React63.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React63.createElement(
+  const renderButtons = () => /* @__PURE__ */ React65.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React65.createElement(
     "button",
     {
       className: "btn-cancel",
@@ -30079,7 +30170,7 @@ var BaseDialog = ({
       disabled: isLoading || isButtonLoading
     },
     cancelText
-  ), onConfirm && /* @__PURE__ */ React63.createElement(
+  ), onConfirm && /* @__PURE__ */ React65.createElement(
     "button",
     {
       className: "btn-confirm",
@@ -30091,10 +30182,10 @@ var BaseDialog = ({
         setIsSubmitting(false);
       }
     },
-    /* @__PURE__ */ React63.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
-    isButtonLoading && /* @__PURE__ */ React63.createElement("span", { className: "spinner", style: { position: "absolute" } })
+    /* @__PURE__ */ React65.createElement("span", { style: { visibility: isButtonLoading ? "hidden" : "visible" } }, confirmText),
+    isButtonLoading && /* @__PURE__ */ React65.createElement("span", { className: "spinner", style: { position: "absolute" } })
   ));
-  return /* @__PURE__ */ React63.createElement("div", { className: `dialog-overlay ${size3 === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size3 === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React65.createElement(
     "div",
     {
       className: ["dialog-container", size3 ? `size-${size3}` : "", sxClass, className].filter(Boolean).join(" "),
@@ -30103,15 +30194,15 @@ var BaseDialog = ({
         minHeight
       }
     },
-    /* @__PURE__ */ React63.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React63.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React63.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React65.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React65.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React65.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React65.createElement(
       import_lucide_react.X,
       {
         size: 18,
         color: themeConfig?.icon || "#666666"
       }
     ))),
-    /* @__PURE__ */ React63.createElement("div", { className: "dialog-divider" }),
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React65.createElement(
       "div",
       {
         className: "dialog-body",
@@ -30122,7 +30213,7 @@ var BaseDialog = ({
       },
       children
     ),
-    /* @__PURE__ */ React63.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React65.createElement("div", { className: "dialog-divider" }),
     customButtons || renderButtons()
   ));
 };
@@ -32362,13 +32453,13 @@ var Autocomplete = import_react21.default.forwardRef(AutocompleteInner);
 Autocomplete.displayName = "Autocomplete";
 
 // lib/Progress/RufousLogoLoader.tsx
-var React71 = __toESM(require("react"), 1);
+var React73 = __toESM(require("react"), 1);
 var _uid = 0;
 var RufousLogoLoader = ({ size: size3 = 80, sx, className }) => {
-  const clipId = React71.useRef(`rll-${++_uid}`).current;
+  const clipId = React73.useRef(`rll-${++_uid}`).current;
   const height = size3 * (38.795 / 54.585);
   const sxClass = useSx(sx);
-  return /* @__PURE__ */ React71.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height } }, /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React73.createElement("div", { className: ["rufous-logo-loader", sxClass, className].filter(Boolean).join(" "), style: { width: size3, height } }, /* @__PURE__ */ React73.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -32377,14 +32468,14 @@ var RufousLogoLoader = ({ size: size3 = 80, sx, className }) => {
       height,
       className: "rufous-logo-loader__svg"
     },
-    /* @__PURE__ */ React71.createElement("defs", null, /* @__PURE__ */ React71.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React73.createElement("defs", null, /* @__PURE__ */ React73.createElement("clipPath", { id: clipId }, /* @__PURE__ */ React73.createElement(
       "path",
       {
         transform: "translate(2208 18.205)",
         d: "M.7,38.8a3.783,3.783,0,0,1-.5-.045l-.031,0A.26.26,0,0,1,0,38.564a.279.279,0,0,1,.14-.2c.222-.126.45-.251.671-.371l.047-.026c.357-.194.8-.435,1.209-.685.783-.479,1.565-.993,2.32-1.489l.033-.022.218-.143.49-.32c.575-.374,1.226-.8,1.824-1.241.98-.726,1.834-1.407,2.611-2.081a22.444,22.444,0,0,0,1.783-1.774A14.2,14.2,0,0,0,12.5,28.749l.012-.016a15.8,15.8,0,0,0,1.151-1.8,10.351,10.351,0,0,0,.586-1.511l0-.011.092-.278a4.425,4.425,0,0,0,.14-.583l.007-.036c.024-.119.048-.243.079-.363a4.639,4.639,0,0,0-.034-2.566c-.064-.212-.126-.43-.184-.636l-.008-.028c-.111-.391-.225-.8-.369-1.181a8.71,8.71,0,0,0-2.279-3.24,14.363,14.363,0,0,0-3.239-2.326c-.75-.4-1.553-.727-2.329-1.046L6.1,13.114l-.157-.065c-.294-.122-.6-.221-.9-.318l-.025-.008c-.19-.061-.427-.136-.649-.218-.108-.04-.265-.172-.252-.229a.7.7,0,0,1,.235-.4.915.915,0,0,1,.449-.112c.383-.029.77-.063,1.165-.1.969-.085,1.971-.174,2.962-.181h.119a13.145,13.145,0,0,1,2.907.315,11.888,11.888,0,0,1,3.128,1.123,10.286,10.286,0,0,1,2.3,1.554.92.92,0,0,1,.273.4,12.722,12.722,0,0,1,.458,3.3c-.009,1.494-.014,2.867-.014,4.2,0,.309.013.588.039.852a1.013,1.013,0,0,0,.078.26l0,.01c.027.067.051.129.077.207.029-.064.054-.116.076-.161l.009-.017.006-.012a.823.823,0,0,0,.076-.189c.051-.247.1-.494.164-.767.136-.618.276-1.257.359-1.9a24.362,24.362,0,0,0,0-6.777,13.01,13.01,0,0,0-.559-2.1c-.061-.185-.125-.382-.187-.579a9.42,9.42,0,0,0-.583-1.469c-.367-.727-.786-1.449-1.184-2.126a9.376,9.376,0,0,0-.643-.918c-.076-.1-.151-.2-.224-.3L15.548,6.3a8.128,8.128,0,0,0-.865-1.057,32.021,32.021,0,0,0-2.466-2.183,12.673,12.673,0,0,0-1.905-1.188c-.48-.256-1-.485-1.462-.687-.221-.1-.457-.2-.683-.306a.663.663,0,0,1-.11-.071L8.039.795c-.027-.02-.058-.043-.1-.069L8.062.667,8.108.644a1.786,1.786,0,0,1,.27-.12A11.679,11.679,0,0,1,11.866,0a13.332,13.332,0,0,1,1.769.121A13.927,13.927,0,0,1,15.9.693l.471.147a10.775,10.775,0,0,1,1.656.658,9.622,9.622,0,0,1,1.768,1.041,32.024,32.024,0,0,1,3.092,2.717,25.62,25.62,0,0,1,2.245,2.829l.084.117c.617.86,1.171,1.777,1.678,2.641.255.435.484.9.687,1.3.14.281.285.572.436.854.262.491.534.977.835,1.516l.005.01q.169.3.337.6c.064.116.13.232.2.347l.027.047c.12.212.244.431.357.651a8.518,8.518,0,0,0,2.121,2.695c.065.024.137.054.212.086l.013.006a1.268,1.268,0,0,0,.376.123.087.087,0,0,0,.063-.02.209.209,0,0,0,.083-.151c0-.083-.08-.153-.157-.22a.694.694,0,0,1-.135-.142c-.134-.216-.273-.436-.407-.649l-.063-.1c-.373-.587-.8-1.251-1.157-1.923s-.666-1.373-.964-2.057l0-.008q-.123-.284-.247-.564a1.707,1.707,0,0,1,.239-1.554l.026-.046.005-.009A12.918,12.918,0,0,1,31.408,9.3,7.814,7.814,0,0,1,33.75,7.612a5.391,5.391,0,0,1,2.218-.444,11.369,11.369,0,0,1,1.882.186,9.211,9.211,0,0,1,2.845,1.022c.138.071.261.135.373.188a4.155,4.155,0,0,0,1.849.464h.093c1.993-.052,4-.14,5.95-.224l.846-.036c.9-.038,1.808-.066,2.682-.093L52.7,8.67l1.007-.031h.041a1.787,1.787,0,0,1,.73.163c.1.051.109.256.109.318,0,.081-.147.169-.257.175-.466.028-.994.043-1.485.043a37.855,37.855,0,0,0-6.3.577A9.221,9.221,0,0,0,42.7,11.3a7.884,7.884,0,0,0-1.565,1.5c-.593.743-1.116,1.545-1.621,2.321l-.121.185c-.228.35-.435.709-.662,1.109l-.041.071c-.136.236-.276.481-.42.717l-.007.012c-.349.572-.709,1.162-1.1,1.716l-.216.307-.01.014a21.585,21.585,0,0,1-1.451,1.907c-1.317,1.485-2.538,2.8-3.734,4.006a30.822,30.822,0,0,1-2.5,2.207c-.548.446-1.139.86-1.71,1.26l-.01.007q-.254.177-.5.355c-.536.379-1.109.78-1.7,1.157-.545.35-1.143.71-1.828,1.1-.842.483-1.586.9-2.275,1.26-.271.144-.553.272-.868.412-.13.058-.3.135-.467.213a6.838,6.838,0,0,1-1.18.3,5.079,5.079,0,0,1,.647-.771l.008-.008c.132-.136.251-.26.365-.393l.048-.056c.566-.667,1.151-1.357,1.7-2.059s1.126-1.439,1.649-2.2c.4-.579.749-1.2,1.134-1.888l.016-.028c.406-.734.826-1.493,1.181-2.266.274-.6.733-1.787.866-2.189l.023-.07c.13-.389.215-.646-.013-.916a.369.369,0,0,1-.041.031l0,0c-.028.021-.055.041-.058.065a2.307,2.307,0,0,1-.146.5,5.257,5.257,0,0,1-.374.709c-.281.468-.536.959-.782,1.434-.2.385-.379.731-.57,1.069a20.042,20.042,0,0,1-1.161,1.871,30.689,30.689,0,0,1-1.985,2.531c-.74.821-1.567,1.648-2.6,2.6a21.448,21.448,0,0,1-2.1,1.669c-.85.606-1.754,1.2-2.688,1.768a17.867,17.867,0,0,1-1.993,1.037c-.994.445-2.066.891-3.185,1.324a12.127,12.127,0,0,1-1.714.514c-.955.213-1.969.413-3.1.611-1.023.18-2.054.328-2.927.449A1.41,1.41,0,0,1,.7,38.8ZM37.945,10.58l-.007,0a.583.583,0,0,0-.223.048.677.677,0,0,0-.437.555.637.637,0,0,0,.426.527.621.621,0,0,0,.209.046h.016a.72.72,0,0,0,.464-.194.676.676,0,0,0,.194-.282l0-.011,0-.005,0-.006,0-.009a.415.415,0,0,0,.014-.109.734.734,0,0,0-.657-.56Z"
       }
     ))),
-    /* @__PURE__ */ React71.createElement("g", { transform: "translate(-123.275 -24)" }, /* @__PURE__ */ React71.createElement("g", { transform: "translate(-2084.725 5.795)", clipPath: `url(#${clipId})` }, /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-1", width: "40", height: "6", transform: "translate(2208 58) rotate(-90)", fill: "#d07f6f" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-2", width: "40", height: "6", transform: "translate(2214 58) rotate(-90)", fill: "#c66958" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-3", width: "40", height: "7", transform: "translate(2220 58) rotate(-90)", fill: "#bb5341" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-4", width: "40", height: "6", transform: "translate(2227 58) rotate(-90)", fill: "#b03a28" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-5", width: "40", height: "6", transform: "translate(2233 58) rotate(-90)", fill: "#a41b06" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-6", width: "40", height: "6", transform: "translate(2239 58) rotate(-90)", fill: "#8e1604" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-7", width: "40", height: "6", transform: "translate(2245 58) rotate(-90)", fill: "#791103" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-8", width: "40", height: "5", transform: "translate(2251 58) rotate(-90)", fill: "#640c02" }), /* @__PURE__ */ React71.createElement("rect", { className: "rufous-ls rufous-ls-9", width: "40", height: "7", transform: "translate(2256 58) rotate(-90)", fill: "#500801" })))
+    /* @__PURE__ */ React73.createElement("g", { transform: "translate(-123.275 -24)" }, /* @__PURE__ */ React73.createElement("g", { transform: "translate(-2084.725 5.795)", clipPath: `url(#${clipId})` }, /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-1", width: "40", height: "6", transform: "translate(2208 58) rotate(-90)", fill: "#d07f6f" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-2", width: "40", height: "6", transform: "translate(2214 58) rotate(-90)", fill: "#c66958" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-3", width: "40", height: "7", transform: "translate(2220 58) rotate(-90)", fill: "#bb5341" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-4", width: "40", height: "6", transform: "translate(2227 58) rotate(-90)", fill: "#b03a28" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-5", width: "40", height: "6", transform: "translate(2233 58) rotate(-90)", fill: "#a41b06" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-6", width: "40", height: "6", transform: "translate(2239 58) rotate(-90)", fill: "#8e1604" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-7", width: "40", height: "6", transform: "translate(2245 58) rotate(-90)", fill: "#791103" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-8", width: "40", height: "5", transform: "translate(2251 58) rotate(-90)", fill: "#640c02" }), /* @__PURE__ */ React73.createElement("rect", { className: "rufous-ls rufous-ls-9", width: "40", height: "7", transform: "translate(2256 58) rotate(-90)", fill: "#500801" })))
   ));
 };
 
@@ -35069,8 +35160,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // lib/Box/Box.tsx
-var React87 = __toESM(require("react"), 1);
-var Box = React87.forwardRef(
+var React89 = __toESM(require("react"), 1);
+var Box = React89.forwardRef(
   ({
     component: component2 = "div",
     children,
@@ -35137,14 +35228,14 @@ var Box = React87.forwardRef(
     };
     const classes = ["rf-box", sxClass, className].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React87.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React89.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
   }
 );
 Box.displayName = "Box";
 
 // lib/Stack/Stack.tsx
-var React88 = __toESM(require("react"), 1);
-var Stack2 = React88.forwardRef(
+var React90 = __toESM(require("react"), 1);
+var Stack2 = React90.forwardRef(
   ({
     direction = "column",
     spacing,
@@ -35177,14 +35268,14 @@ var Stack2 = React88.forwardRef(
     const classes = ["rf-stack", sxClass, className].filter(Boolean).join(" ");
     let content;
     if (divider) {
-      const childArray = React88.Children.toArray(children).filter(
+      const childArray = React90.Children.toArray(children).filter(
         (child) => child !== null && child !== void 0
       );
       content = childArray.reduce((acc, child, idx) => {
         acc.push(child);
         if (idx < childArray.length - 1) {
           acc.push(
-            /* @__PURE__ */ React88.createElement("div", { key: `divider-${idx}`, className: "rf-stack-divider" }, divider)
+            /* @__PURE__ */ React90.createElement("div", { key: `divider-${idx}`, className: "rf-stack-divider" }, divider)
           );
         }
         return acc;
@@ -35193,13 +35284,13 @@ var Stack2 = React88.forwardRef(
       content = children;
     }
     const Tag = component2;
-    return /* @__PURE__ */ React88.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
+    return /* @__PURE__ */ React90.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
   }
 );
 Stack2.displayName = "Stack";
 
 // lib/Grid/Grid.tsx
-var React89 = __toESM(require("react"), 1);
+var React91 = __toESM(require("react"), 1);
 function getBreakpointClass(bp, val2) {
   if (val2 === void 0) return "";
   if (val2 === true) return `rf-grid-${bp}-12`;
@@ -35212,7 +35303,7 @@ function getSpacingGap(spacing) {
   const base = spacing.xs ?? spacing.sm ?? spacing.md ?? 0;
   return `${base * 8}px`;
 }
-var Grid = React89.forwardRef(
+var Grid = React91.forwardRef(
   ({
     container = false,
     item = false,
@@ -35262,14 +35353,14 @@ var Grid = React89.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React89.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React91.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
   }
 );
 Grid.displayName = "Grid";
 
 // lib/Paper/Paper.tsx
-var React90 = __toESM(require("react"), 1);
-var Paper = React90.forwardRef(
+var React92 = __toESM(require("react"), 1);
+var Paper = React92.forwardRef(
   ({
     elevation = 1,
     square = false,
@@ -35291,14 +35382,14 @@ var Paper = React90.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component2;
-    return /* @__PURE__ */ React90.createElement(Tag, { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React92.createElement(Tag, { ref, className: classes, style, ...rest }, children);
   }
 );
 Paper.displayName = "Paper";
 
 // lib/Card/Card.tsx
-var React91 = __toESM(require("react"), 1);
-var Card = React91.forwardRef(
+var React93 = __toESM(require("react"), 1);
+var Card = React93.forwardRef(
   ({
     elevation = 1,
     variant = "elevation",
@@ -35317,33 +35408,33 @@ var Card = React91.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React93.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 Card.displayName = "Card";
-var CardContent = React91.forwardRef(
+var CardContent = React93.forwardRef(
   ({ children, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = ["rf-card-content", sxClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React93.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 CardContent.displayName = "CardContent";
-var CardHeader = React91.forwardRef(
+var CardHeader = React93.forwardRef(
   ({ title, subheader, avatar, action, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = ["rf-card-header", sxClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, avatar && /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-avatar" }, avatar), /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-content" }, /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-title" }, title), subheader && /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-subheader" }, subheader)), action && /* @__PURE__ */ React91.createElement("div", { className: "rf-card-header-action" }, action));
+    return /* @__PURE__ */ React93.createElement("div", { ref, className: classes, style, ...rest }, avatar && /* @__PURE__ */ React93.createElement("div", { className: "rf-card-header-avatar" }, avatar), /* @__PURE__ */ React93.createElement("div", { className: "rf-card-header-content" }, /* @__PURE__ */ React93.createElement("div", { className: "rf-card-header-title" }, title), subheader && /* @__PURE__ */ React93.createElement("div", { className: "rf-card-header-subheader" }, subheader)), action && /* @__PURE__ */ React93.createElement("div", { className: "rf-card-header-action" }, action));
   }
 );
 CardHeader.displayName = "CardHeader";
-var CardMedia = React91.forwardRef(
+var CardMedia = React93.forwardRef(
   ({ component: component2 = "div", image: image2, src, height, alt, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = ["rf-card-media", sxClass, className].filter(Boolean).join(" ");
     const computedHeight = height !== void 0 ? typeof height === "number" ? `${height}px` : height : "200px";
     if (component2 === "img") {
-      return /* @__PURE__ */ React91.createElement(
+      return /* @__PURE__ */ React93.createElement(
         "img",
         {
           ref,
@@ -35356,7 +35447,7 @@ var CardMedia = React91.forwardRef(
       );
     }
     if (component2 === "video") {
-      return /* @__PURE__ */ React91.createElement(
+      return /* @__PURE__ */ React93.createElement(
         "video",
         {
           ref,
@@ -35372,7 +35463,7 @@ var CardMedia = React91.forwardRef(
       ...image2 ? { backgroundImage: `url(${image2})` } : {},
       ...style
     };
-    return /* @__PURE__ */ React91.createElement(
+    return /* @__PURE__ */ React93.createElement(
       "div",
       {
         ref,
@@ -35384,7 +35475,7 @@ var CardMedia = React91.forwardRef(
   }
 );
 CardMedia.displayName = "CardMedia";
-var CardActions = React91.forwardRef(
+var CardActions = React93.forwardRef(
   ({ disableSpacing = false, children, className, style, sx, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const classes = [
@@ -35393,13 +35484,13 @@ var CardActions = React91.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, style, ...rest }, children);
+    return /* @__PURE__ */ React93.createElement("div", { ref, className: classes, style, ...rest }, children);
   }
 );
 CardActions.displayName = "CardActions";
 
 // lib/Accordion/Accordion.tsx
-var React92 = __toESM(require("react"), 1);
+var React94 = __toESM(require("react"), 1);
 var import_react37 = require("react");
 var AccordionContext = (0, import_react37.createContext)({
   expanded: false,
@@ -35407,7 +35498,7 @@ var AccordionContext = (0, import_react37.createContext)({
   toggle: () => {
   }
 });
-var Accordion = React92.forwardRef(
+var Accordion = React94.forwardRef(
   ({
     expanded: expandedProp,
     defaultExpanded = false,
@@ -35442,11 +35533,11 @@ var Accordion = React92.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React92.createElement(AccordionContext.Provider, { value: { expanded, disabled, toggle } }, /* @__PURE__ */ React92.createElement("div", { ref, className: classes, style, ...rest }, children));
+    return /* @__PURE__ */ React94.createElement(AccordionContext.Provider, { value: { expanded, disabled, toggle } }, /* @__PURE__ */ React94.createElement("div", { ref, className: classes, style, ...rest }, children));
   }
 );
 Accordion.displayName = "Accordion";
-var ChevronIcon = () => /* @__PURE__ */ React92.createElement(
+var ChevronIcon = () => /* @__PURE__ */ React94.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -35460,9 +35551,9 @@ var ChevronIcon = () => /* @__PURE__ */ React92.createElement(
     strokeLinejoin: "round",
     "aria-hidden": "true"
   },
-  /* @__PURE__ */ React92.createElement("polyline", { points: "6 9 12 15 18 9" })
+  /* @__PURE__ */ React94.createElement("polyline", { points: "6 9 12 15 18 9" })
 );
-var AccordionSummary = React92.forwardRef(
+var AccordionSummary = React94.forwardRef(
   ({ expandIcon, children, sx, className, style, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const { expanded, toggle, disabled } = (0, import_react37.useContext)(AccordionContext);
@@ -35476,7 +35567,7 @@ var AccordionSummary = React92.forwardRef(
       "rf-accordion-summary-icon",
       expanded ? "rf-accordion-icon-expanded" : ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React92.createElement(
+    return /* @__PURE__ */ React94.createElement(
       "button",
       {
         ref,
@@ -35488,13 +35579,13 @@ var AccordionSummary = React92.forwardRef(
         "aria-expanded": expanded,
         ...rest
       },
-      /* @__PURE__ */ React92.createElement("span", { className: "rf-accordion-summary-content" }, children),
-      /* @__PURE__ */ React92.createElement("span", { className: iconClasses }, expandIcon !== void 0 ? expandIcon : /* @__PURE__ */ React92.createElement(ChevronIcon, null))
+      /* @__PURE__ */ React94.createElement("span", { className: "rf-accordion-summary-content" }, children),
+      /* @__PURE__ */ React94.createElement("span", { className: iconClasses }, expandIcon !== void 0 ? expandIcon : /* @__PURE__ */ React94.createElement(ChevronIcon, null))
     );
   }
 );
 AccordionSummary.displayName = "AccordionSummary";
-var AccordionDetails = React92.forwardRef(
+var AccordionDetails = React94.forwardRef(
   ({ children, sx, className, style, ...rest }, ref) => {
     const sxClass = useSx(sx);
     const { expanded } = (0, import_react37.useContext)(AccordionContext);
@@ -35507,7 +35598,7 @@ var AccordionDetails = React92.forwardRef(
       sxClass,
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ React92.createElement("div", { className: wrapperClasses }, /* @__PURE__ */ React92.createElement("div", { className: "rf-accordion-details-inner" }, /* @__PURE__ */ React92.createElement("div", { ref, className: detailsClasses, style, ...rest }, children)));
+    return /* @__PURE__ */ React94.createElement("div", { className: wrapperClasses }, /* @__PURE__ */ React94.createElement("div", { className: "rf-accordion-details-inner" }, /* @__PURE__ */ React94.createElement("div", { ref, className: detailsClasses, style, ...rest }, children)));
   }
 );
 AccordionDetails.displayName = "AccordionDetails";
@@ -36990,6 +37081,7 @@ ImageField.displayName = "ImageField";
   BaseDialog,
   Box,
   Breadcrumbs,
+  Button,
   CameraIcon,
   CancelButton,
   Card,
@@ -37025,6 +37117,7 @@ ImageField.displayName = "ImageField";
   Grow,
   HelpOutlinedIcon,
   HierarchyIcon,
+  IconButton,
   ImageField,
   InactiveGroupIcon,
   IndustryIcon,