@react95/core 8.1.3 → 9.0.0

package/README.md

@@ -42,27 +42,6 @@ export const MyApp = () => {
 
 You can find a list of all available components on our [Storybook page](https://react95.github.io/React95/).
 
-### About `Modal`
-
-The `Modal` component is managed with `ModalContext`.
-To ensure they are managed correctly, surround one or a group of Modals with a `<ModalProvider>`. Example:
-
-```js
-import { ModalProvider, Modal } from '@react95/core';
-
-export const ModalExample = () => {
-  return (
-    <>
-      <ModalProvider>
-        <Modal title="Modal 1" />
-        <Modal title="Modal 2" />
-        ...
-      </ModalProvider>
-    </>
-  );
-};
-```
-
 ### Next.JS
 
 If you want to use React95 on a NextJS project, check the [NextJS template](https://github.com/React95/nextjs-template)

package/cjs/Alert/Alert.cjs

@@ -19,25 +19,33 @@ const RenderImage = ({ option }) => {
   }
 };
 const Alert = React.forwardRef(
-  ({ type = "error", message, hasSound, ...rest }, ref) => {
+  ({ type = "error", message, hasSound = false, dragOptions, ...rest }, ref) => {
     if (hasSound) {
       React.useEffect(() => {
         const audio = new Audio(chord);
         audio.play();
       }, []);
     }
-    return /* @__PURE__ */ React.createElement(Modal.Modal, { height: "120", hasWindowButton: false, ...rest, ref }, /* @__PURE__ */ React.createElement("div", { className: Alert_css.dialog }, /* @__PURE__ */ React.createElement("div", { className: Alert_css.icon }, /* @__PURE__ */ React.createElement(RenderImage, { option: type })), /* @__PURE__ */ React.createElement("div", { className: Alert_css.message }, message)));
+    return /* @__PURE__ */ React.createElement(
+      Modal.Modal,
+      {
+        height: "120",
+        dragOptions: {
+          defaultPosition: {
+            x: typeof window == "undefined" ? 0 : Math.floor(window.innerWidth / 2) - 150,
+            y: typeof window == "undefined" ? 0 : Math.floor(window.innerHeight / 2) - 100
+          },
+          ...dragOptions
+        },
+        buttons: [{ value: "OK", onClick: () => {
+        } }],
+        hasWindowButton: false,
+        buttonsAlignment: "center",
+        ...rest,
+        ref
+      },
+      /* @__PURE__ */ React.createElement(Modal.Modal.Content, { className: Alert_css.dialog }, /* @__PURE__ */ React.createElement("div", { className: Alert_css.icon }, /* @__PURE__ */ React.createElement(RenderImage, { option: type })), /* @__PURE__ */ React.createElement("div", { className: Alert_css.message }, message))
+    );
   }
 );
-Alert.defaultProps = {
-  type: "error",
-  buttons: [{ value: "OK", onClick: () => {
-  } }],
-  buttonsAlignment: "center",
-  positionOffset: {
-    x: typeof window == "undefined" ? 0 : Math.floor(window.innerWidth / 2) - 150,
-    y: typeof window == "undefined" ? 0 : Math.floor(window.innerHeight / 2) - 100
-  },
-  hasSound: false
-};
 exports.Alert = Alert;

package/cjs/Modal/Modal.cjs

@@ -1,132 +1,117 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const nanoid = require("nanoid");
 const React = require("react");
-const Draggable = require("react-draggable");
+const react = require("@neodrag/react");
 const Button = require("../Button/Button.cjs");
+const Frame = require("../Frame/Frame.cjs");
 const TitleBar = require("../TitleBar/TitleBar.cjs");
-const ModalContext = require("./ModalContext.cjs");
 const Modal_css = require("./Modal.css.cjs");
-const Frame = require("../Frame/Frame.cjs");
-const close = require("./close.svg.cjs");
-const help = require("./help.svg.cjs");
+const cn = require("classnames");
+const usehooksTs = require("usehooks-ts");
+const events = require("../shared/events.cjs");
+const ModalContent = Frame.fixedForwardRef(
+  (rest, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, ref, className: cn(Modal_css.content, rest.className) })
+);
 const ModalRenderer = ({
   hasWindowButton: hasButton = true,
   buttons = [],
   buttonsAlignment = "flex-end",
   children,
-  onClose = () => {
-  },
-  onHelp,
-  defaultPosition = { x: 0, y: 0 },
-  positionOffset,
-  height,
   icon,
   menu = [],
   title,
-  width,
+  dragOptions,
+  titleBarOptions,
+  className,
   ...rest
 }, ref) => {
-  const {
-    addWindows,
-    removeWindow,
-    updateWindow,
-    setActiveWindow,
-    activeWindow
-  } = React.useContext(ModalContext.ModalContext);
-  const [id, setId] = React.useState(null);
+  const [id] = React.useState(nanoid.nanoid());
   const [menuOpened, setMenuOpened] = React.useState("");
   const [isActive, setIsActive] = React.useState(false);
+  const draggableRef = React.useRef(null);
+  react.useDraggable(draggableRef, {
+    ...dragOptions,
+    handle: ".draggable"
+  });
+  const menuRef = React.useRef(null);
+  usehooksTs.useOnClickOutside(menuRef, () => {
+    setMenuOpened("");
+  });
   React.useEffect(() => {
-    if (!id) {
-      const newId = addWindows({ icon, title, hasButton });
-      if (newId) {
-        setId(newId);
-        setActiveWindow(newId);
-      }
-    } else {
-      updateWindow(id, { icon, title, hasButton });
-    }
-  }, [id, icon, title, hasButton]);
-  React.useEffect(() => {
+    events.modals.emit(events.ModalEvents.AddModal, {
+      icon,
+      title,
+      id,
+      hasButton
+    });
+    events.modals.on(events.ModalEvents.ModalVisibilityChanged, ({ id: activeId }) => {
+      setIsActive(activeId === id);
+    });
+    events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
     return () => {
-      if (id) {
-        removeWindow(id);
-      }
+      events.modals.emit(events.ModalEvents.RemoveModal, { id });
     };
-  }, [id]);
-  React.useEffect(() => setIsActive(id === activeWindow), [id, activeWindow]);
+  }, []);
+  React.useImperativeHandle(ref, () => {
+    return draggableRef.current;
+  });
   return /* @__PURE__ */ React.createElement(
-    Draggable,
+    Frame.Frame,
     {
-      handle: ".draggable",
-      defaultPosition,
-      positionOffset,
-      onMouseDown: id ? () => setActiveWindow(id) : void 0
+      ...rest,
+      className: cn(Modal_css.modalWrapper({ active: isActive }), className),
+      ref: draggableRef,
+      onMouseDown: () => {
+        events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
+      }
     },
     /* @__PURE__ */ React.createElement(
-      Frame.Frame,
+      TitleBar.TitleBar,
       {
-        ...rest,
-        width,
-        height,
-        className: Modal_css.modalWrapper({ active: isActive }),
-        ref
+        active: isActive,
+        icon,
+        title,
+        className: "draggable"
       },
-      /* @__PURE__ */ React.createElement(
-        TitleBar.TitleBar,
+      titleBarOptions && /* @__PURE__ */ React.createElement(TitleBar.TitleBar.OptionsBox, null, titleBarOptions)
+    ),
+    menu && menu.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: Modal_css.menuWrapper, ref: menuRef }, menu.map(({ name, list }) => {
+      const active = menuOpened === name;
+      return /* @__PURE__ */ React.createElement(
+        "li",
         {
-          active: isActive,
-          icon,
-          title,
-          className: "draggable"
+          key: name,
+          onMouseDown: () => setMenuOpened(name),
+          className: Modal_css.menuItem({ active })
         },
-        /* @__PURE__ */ React.createElement(TitleBar.TitleBar.OptionsBox, null, onHelp && /* @__PURE__ */ React.createElement(TitleBar.TitleBar.Option, null, /* @__PURE__ */ React.createElement("img", { src: help, alt: "help", onClick: onHelp })), /* @__PURE__ */ React.createElement(TitleBar.TitleBar.Option, { onClick: onClose }, /* @__PURE__ */ React.createElement("img", { src: close, alt: "close" })))
-      ),
-      menu && menu.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: Modal_css.menuWrapper }, menu.map(({ name, list }) => {
-        const active = menuOpened === name;
-        return /* @__PURE__ */ React.createElement(
-          "li",
-          {
-            key: name,
-            onMouseDown: () => setMenuOpened(name),
-            className: Modal_css.menuItem({ active })
-          },
-          name,
-          active && list
-        );
-      })),
-      /* @__PURE__ */ React.createElement("div", { className: Modal_css.content, onClick: () => setMenuOpened("") }, children),
-      buttons && buttons.length > 0 && /* @__PURE__ */ React.createElement(
-        Frame.Frame,
+        name,
+        active && list
+      );
+    })),
+    children,
+    buttons && buttons.length > 0 && /* @__PURE__ */ React.createElement(
+      Frame.Frame,
+      {
+        className: Modal_css.buttonWrapper,
+        justifyContent: buttonsAlignment
+      },
+      buttons.map((button) => /* @__PURE__ */ React.createElement(
+        Button.Button,
         {
-          className: Modal_css.buttonWrapper,
-          justifyContent: buttonsAlignment
+          key: button.value,
+          onClick: button.onClick,
+          value: button.value
         },
-        buttons.map((button) => /* @__PURE__ */ React.createElement(
-          Button.Button,
-          {
-            key: button.value,
-            onClick: button.onClick,
-            value: button.value
-          },
-          button.value
-        ))
-      )
+        button.value
+      ))
     )
   );
 };
-const Modal = React.forwardRef(ModalRenderer);
-Modal.displayName = "Modal";
-Modal.defaultProps = {
-  icon: void 0,
-  title: "Modal",
-  children: null,
-  defaultPosition: { x: 0, y: 0 },
-  buttons: [],
-  menu: [],
-  width: void 0,
-  height: void 0,
-  onClose: () => {
+const Modal = Object.assign(
+  Frame.fixedForwardRef(ModalRenderer),
+  {
+    Content: ModalContent
   }
-};
+);
 exports.Modal = Modal;

package/cjs/Modal/Modal.css.ts.vanilla.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   position: fixed;
-  padding: 2px 2px 8px;
+  padding: var(--r95-space-2);
   top: 50px;
   background-color: var(--r95-color-material);
   box-shadow: var(--r95-shadow-out);
@@ -12,9 +12,9 @@
 }
 .r95_1txblt62 {
   display: flex;
-  gap: 6px;
+  gap: var(--r95-space-6);
   flex-direction: row;
-  padding: 0 6px 6px 6px;
+  padding: var(--r95-space-6);
 }
 .r95_1txblt62 button {
   min-width: 70px;
@@ -23,7 +23,9 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  padding: 6px;
+  padding: var(--r95-space-6);
+  margin-block-start: var(--r95-space-4);
+  margin-inline-end: var(--r95-space-1);
 }
 .r95_1txblt64 {
   display: flex;

package/cjs/TaskBar/TaskBar.cjs

@@ -1,17 +1,48 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const ModalContext = require("../Modal/ModalContext.cjs");
 const Frame = require("../Frame/Frame.cjs");
 const Clock = require("./Clock.cjs");
 const WindowButton = require("./WindowButton.cjs");
 const icons = require("@react95/icons");
 const TaskBar_css = require("./TaskBar.css.cjs");
+const events = require("../shared/events.cjs");
 const TaskBar = React.forwardRef(
   ({ list }, ref) => {
     const [showList, toggleShowList] = React.useState(false);
     const [activeStart, toggleActiveStart] = React.useState(false);
-    const { windows, activeWindow, setActiveWindow } = React.useContext(ModalContext.ModalContext);
+    const [modalWindows, setModalWindows] = React.useState([]);
+    const [activeWindow, setActiveWindow] = React.useState();
+    React.useEffect(() => {
+      const addModal = (window) => {
+        setModalWindows((prevModals) => [...prevModals, window]);
+      };
+      const removeModal = (data) => {
+        setModalWindows((prevModals) => {
+          const filteredModals = prevModals.filter(
+            (modal) => modal.id !== data.id
+          );
+          const lastModal = filteredModals.at(-1);
+          if (!activeWindow && lastModal) {
+            events.modals.emit(events.ModalEvents.ModalVisibilityChanged, {
+              id: lastModal == null ? void 0 : lastModal.id
+            });
+          }
+          return filteredModals;
+        });
+      };
+      const updateVisibleModal = ({ id }) => {
+        setActiveWindow(id);
+      };
+      events.modals.on(events.ModalEvents.AddModal, addModal);
+      events.modals.on(events.ModalEvents.RemoveModal, removeModal);
+      events.modals.on(events.ModalEvents.ModalVisibilityChanged, updateVisibleModal);
+      return () => {
+        events.modals.off(events.ModalEvents.AddModal, addModal);
+        events.modals.off(events.ModalEvents.RemoveModal, removeModal);
+        events.modals.off(events.ModalEvents.ModalVisibilityChanged, updateVisibleModal);
+      };
+    }, []);
     return /* @__PURE__ */ React.createElement(
       Frame.Frame,
       {
@@ -54,14 +85,16 @@ const TaskBar = React.forwardRef(
         },
         "Start"
       ),
-      /* @__PURE__ */ React.createElement(Frame.Frame, { w: "100%", paddingLeft: "$0", ml: "$2", display: "flex" }, Object.entries(windows).map(
-        ([windowId, { icon, title, hasButton }]) => hasButton && /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(Frame.Frame, { w: "100%", paddingLeft: "$0", ml: "$2", display: "flex" }, modalWindows.map(
+        ({ icon, title, hasButton, id }) => hasButton && /* @__PURE__ */ React.createElement(
           WindowButton.WindowButton,
           {
-            key: windowId,
+            key: id,
             icon,
-            active: windowId === activeWindow,
-            onClick: () => setActiveWindow(windowId),
+            active: id === activeWindow,
+            onClick: () => {
+              events.modals.emit(events.ModalEvents.ModalVisibilityChanged, { id });
+            },
             small: false
           },
           /* @__PURE__ */ React.createElement("div", { className: TaskBar_css.truncate }, title)

package/cjs/TitleBar/TitleBar.cjs

@@ -1,11 +1,38 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const cn = require("classnames");
 const React = require("react");
+const close = require("./close.svg.cjs");
+const help = require("./help.svg.cjs");
+const maximize = require("./maximize.svg.cjs");
+const minimize = require("./minimize.svg.cjs");
+const restore = require("./restore.svg.cjs");
 const Frame = require("../Frame/Frame.cjs");
-const TitleBar_css = require("./TitleBar.css.cjs");
 const Button_css = require("../Button/Button.css.cjs");
-const cn = require("classnames");
-const OptionsBox = React.forwardRef(
+const TitleBar_css = require("./TitleBar.css.cjs");
+const defaultOptions = {
+  help: {
+    alt: "help",
+    src: help
+  },
+  close: {
+    alt: "close",
+    src: close
+  },
+  maximize: {
+    alt: "maximize",
+    src: maximize
+  },
+  minimize: {
+    alt: "minimize",
+    src: minimize
+  },
+  restore: {
+    alt: "restore",
+    src: restore
+  }
+};
+const OptionsBox = Frame.fixedForwardRef(
   (rest, ref) => /* @__PURE__ */ React.createElement(
     Frame.Frame,
     {
@@ -15,17 +42,49 @@ const OptionsBox = React.forwardRef(
     }
   )
 );
-const Option = React.forwardRef(
+const Option = Frame.fixedForwardRef(
   (rest, ref) => /* @__PURE__ */ React.createElement(
     Frame.Frame,
     {
+      as: "button",
       ...rest,
       ref,
-      as: "button",
       className: cn(Button_css.button, TitleBar_css.option, rest.className)
     }
   )
 );
+const DefaultOption = Frame.fixedForwardRef(
+  (props, ref) => {
+    const { kind, ...rest } = props;
+    const optionType = defaultOptions[kind] || defaultOptions.help;
+    return /* @__PURE__ */ React.createElement(Option, { ...rest, ref }, /* @__PURE__ */ React.createElement("img", { src: optionType.src, alt: optionType.alt }));
+  }
+);
+const Help = Frame.fixedForwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "help", ref });
+  }
+);
+const Close = Frame.fixedForwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "close", ref });
+  }
+);
+const Maximize = Frame.fixedForwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "maximize", ref });
+  }
+);
+const Minimize = Frame.fixedForwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "minimize", ref });
+  }
+);
+const Restore = Frame.fixedForwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React.createElement(DefaultOption, { ...props, kind: "restore", ref });
+  }
+);
 const TitleBarRenderer = ({ children, title = "UNKNOWN.EXE", icon, active = true, ...rest }, ref) => /* @__PURE__ */ React.createElement(
   Frame.Frame,
   {
@@ -38,10 +97,15 @@ const TitleBarRenderer = ({ children, title = "UNKNOWN.EXE", icon, active = true
   children
 );
 const TitleBar = Object.assign(
-  React.forwardRef(TitleBarRenderer),
+  Frame.fixedForwardRef(TitleBarRenderer),
   {
     Option,
-    OptionsBox
+    OptionsBox,
+    Help,
+    Close,
+    Maximize,
+    Minimize,
+    Restore
   }
 );
 exports.TitleBar = TitleBar;

package/cjs/TitleBar/TitleBar.css.ts.vanilla.css

@@ -49,10 +49,17 @@
 .r95_1kpzw682 svg {
   width: var(--r95-space-16);
   height: var(--r95-space-16);
-  margin-right: var(--r95-space-4);
+  margin-inline-end: var(--r95-space-4);
+  flex-shrink: 0;
+}
+.r95_1kpzw681 svg {
+  width: var(--r95-space-14);
+  height: var(--r95-space-14);
+  margin-inline-end: unset;
 }
 .r95_1kpzw685 {
   flex-grow: 1;
+  flex-shrink: 0;
   line-height: 1.4em;
   margin: 0;
   font-size: 1em;

package/cjs/TitleBar/maximize.svg.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const maximize = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nOScgaGVpZ2h0PSc5JyBmaWxsPSdjdXJyZW50Q29sb3InIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J005IDBIMHY5aDlWMHpNOCAySDF2Nmg3VjJ6JyAvPjwvc3ZnPg==";
+module.exports = maximize;

package/cjs/TitleBar/minimize.svg.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const minimize = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiPjxnIGNsYXNzPSJsYXllciI+PHBhdGggZD0iTTAgNi45NWg5djIuMDRIMFY2Ljk1eiIvPjwvZz48L3N2Zz4=";
+module.exports = minimize;

package/cjs/TitleBar/restore.svg.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const restore = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nOCcgaGVpZ2h0PSc5JyBmaWxsPSdjdXJyZW50Q29sb3InIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTIgMGg2djJIMnpNNyAyaDF2NEg3ek0yIDJoMXYxSDJ6TTYgNWgxdjFINnpNMCAzaDZ2Mkgwek01IDVoMXY0SDV6TTAgNWgxdjRIMHpNMSA4aDR2MUgxeicvPjwvc3ZnPg==";
+module.exports = restore;

package/cjs/index.cjs

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Modal = require("./Modal/Modal.cjs");
-const ModalContext = require("./Modal/ModalContext.cjs");
-const ModalProvider = require("./Modal/ModalProvider.cjs");
 const Tabs = require("./Tabs/Tabs.cjs");
 const Tab = require("./Tabs/Tab.cjs");
 const Alert = require("./Alert/Alert.cjs");
@@ -25,8 +23,6 @@ const Tooltip = require("./Tooltip/Tooltip.cjs");
 const TitleBar = require("./TitleBar/TitleBar.cjs");
 const Video = require("./Video/Video.cjs");
 exports.Modal = Modal.Modal;
-exports.ModalContext = ModalContext.ModalContext;
-exports.ModalProvider = ModalProvider.ModalProvider;
 exports.Tabs = Tabs.Tabs;
 exports.Tab = Tab.Tab;
 exports.Alert = Alert.Alert;

package/cjs/shared/events.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class Emitter {
+  constructor() {
+    this.listeners = {};
+  }
+  on(eventName, callback) {
+    if (!this.listeners[eventName]) {
+      this.listeners[eventName] = [];
+    }
+    this.listeners[eventName].push(callback);
+  }
+  off(eventName, callback) {
+    if (this.listeners[eventName]) {
+      this.listeners[eventName] = this.listeners[eventName].filter(
+        (cb) => cb !== callback
+      );
+    }
+  }
+  emit(eventName, data) {
+    if (this.listeners[eventName]) {
+      this.listeners[eventName].forEach((callback) => callback(data));
+    }
+  }
+}
+var ModalEvents = /* @__PURE__ */ ((ModalEvents2) => {
+  ModalEvents2["AddModal"] = "add-modal";
+  ModalEvents2["RemoveModal"] = "remove-modal";
+  ModalEvents2["ModalVisibilityChanged"] = "modal-visibility-changed";
+  return ModalEvents2;
+})(ModalEvents || {});
+const modals = new Emitter();
+exports.Emitter = Emitter;
+exports.ModalEvents = ModalEvents;
+exports.modals = modals;

package/esm/Alert/Alert.mjs

@@ -17,27 +17,35 @@ const RenderImage = ({ option }) => {
   }
 };
 const Alert = forwardRef(
-  ({ type = "error", message: message$1, hasSound, ...rest }, ref) => {
+  ({ type = "error", message: message$1, hasSound = false, dragOptions, ...rest }, ref) => {
     if (hasSound) {
       useEffect(() => {
         const audio = new Audio(sound);
         audio.play();
       }, []);
     }
-    return /* @__PURE__ */ React.createElement(Modal, { height: "120", hasWindowButton: false, ...rest, ref }, /* @__PURE__ */ React.createElement("div", { className: dialog }, /* @__PURE__ */ React.createElement("div", { className: icon }, /* @__PURE__ */ React.createElement(RenderImage, { option: type })), /* @__PURE__ */ React.createElement("div", { className: message }, message$1)));
+    return /* @__PURE__ */ React.createElement(
+      Modal,
+      {
+        height: "120",
+        dragOptions: {
+          defaultPosition: {
+            x: typeof window == "undefined" ? 0 : Math.floor(window.innerWidth / 2) - 150,
+            y: typeof window == "undefined" ? 0 : Math.floor(window.innerHeight / 2) - 100
+          },
+          ...dragOptions
+        },
+        buttons: [{ value: "OK", onClick: () => {
+        } }],
+        hasWindowButton: false,
+        buttonsAlignment: "center",
+        ...rest,
+        ref
+      },
+      /* @__PURE__ */ React.createElement(Modal.Content, { className: dialog }, /* @__PURE__ */ React.createElement("div", { className: icon }, /* @__PURE__ */ React.createElement(RenderImage, { option: type })), /* @__PURE__ */ React.createElement("div", { className: message }, message$1))
+    );
   }
 );
-Alert.defaultProps = {
-  type: "error",
-  buttons: [{ value: "OK", onClick: () => {
-  } }],
-  buttonsAlignment: "center",
-  positionOffset: {
-    x: typeof window == "undefined" ? 0 : Math.floor(window.innerWidth / 2) - 150,
-    y: typeof window == "undefined" ? 0 : Math.floor(window.innerHeight / 2) - 100
-  },
-  hasSound: false
-};
 export {
   Alert
 };

package/esm/Modal/Modal.css.ts.vanilla.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   position: fixed;
-  padding: 2px 2px 8px;
+  padding: var(--r95-space-2);
   top: 50px;
   background-color: var(--r95-color-material);
   box-shadow: var(--r95-shadow-out);
@@ -12,9 +12,9 @@
 }
 .r95_1txblt62 {
   display: flex;
-  gap: 6px;
+  gap: var(--r95-space-6);
   flex-direction: row;
-  padding: 0 6px 6px 6px;
+  padding: var(--r95-space-6);
 }
 .r95_1txblt62 button {
   min-width: 70px;
@@ -23,7 +23,9 @@
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  padding: 6px;
+  padding: var(--r95-space-6);
+  margin-block-start: var(--r95-space-4);
+  margin-inline-end: var(--r95-space-1);
 }
 .r95_1txblt64 {
   display: flex;