dirk-cfx-react 1.0.34 → 1.0.35

package/dist/index.js

@@ -1,19 +1,20 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Flex, Text, Image, createTheme, useMantineTheme, MantineProvider, BackgroundImage } from '@mantine/core';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
-import { createContext, useRef, useState, useEffect, useContext, useMemo } from 'react';
-import { create, useStore } from 'zustand';
-import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
-import hoverSoundUrl from './hover_sound-NBUA222C.mp3';
+import { createTheme, Flex, Text, Image, MantineProvider, BackgroundImage, useMantineTheme } from '@mantine/core';
+import { createContext, useRef, useEffect, useMemo, useState, useContext } from 'react';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import './styles/fonts.css';
 import './styles/scrollBar.css';
+import './styles/tornEdge.css';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
+import { create, useStore } from 'zustand';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
+import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
+import hoverSoundUrl from './hover_sound-NBUA222C.mp3';
 
 // src/components/BorderedIcon.tsx
 
@@ -184,15 +185,347 @@ function colorWithAlpha(color, alpha) {
   }
   return color;
 }
+
+// src/utils/misc.ts
+var isEnvBrowser = () => !window.invokeNative;
+var noop = () => {
+};
+var splitFAString = (faString) => {
+  const [prefix, newIcon] = faString.split("-");
+  if (!prefix || !newIcon) return { prefix: "fas", newIcon: "question" };
+  return { prefix, newIcon };
+};
+var numberToRoman = (num) => {
+  const romanNumerals = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI", "XVII", "XVIII", "XIX", "XX"];
+  return romanNumerals[num];
+};
+var copyToClipboard = (text) => {
+  const el = document.createElement("textarea");
+  el.value = text;
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand("copy");
+  document.body.removeChild(el);
+};
+var openLink = (url) => {
+  if (isEnvBrowser()) {
+    window.open(url, "_blank");
+  } else {
+    window.invokeNative("openLink", url);
+  }
+};
+
+// src/hooks/useNuiEvent.ts
+var useNuiEvent = (action, handler) => {
+  const savedHandler = useRef(noop);
+  useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect(() => {
+    const eventListener = (event) => {
+      const { action: eventAction, data } = event.data;
+      if (savedHandler.current) {
+        if (eventAction === action) {
+          savedHandler.current(data);
+        }
+      }
+    };
+    window.addEventListener("message", eventListener);
+    return () => window.removeEventListener("message", eventListener);
+  }, [action]);
+};
+
+// src/utils/fetchNui.ts
+async function fetchNui(eventName, data, mockData) {
+  const options = {
+    method: "post",
+    headers: {
+      "Content-Type": "application/json; charset=UTF-8"
+    },
+    body: JSON.stringify(data)
+  };
+  if (isEnvBrowser() && mockData !== void 0) return mockData;
+  if (isEnvBrowser()) {
+    console.warn(
+      `[fetchNui] Called fetchNui for event "${eventName}" in browser environment without mockData. Returning empty object.`
+    );
+    return {};
+  }
+  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app";
+  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+  const respFormatted = await resp.json();
+  return respFormatted;
+}
+function fetchOnLoad(eventName, data, mockData) {
+  return fetchNui(eventName, data, mockData).catch((err) => {
+    console.error(`[fetchOnLoad] Failed for ${eventName}:`, err);
+    throw err;
+  });
+}
+var fetchLuaTable = (tableName) => () => {
+  if (isEnvBrowser()) {
+    return Promise.resolve({});
+  }
+  return fetchNui("GET_LUA_TABLE", { tableName });
+};
+
+// src/utils/internalEvent.ts
+var internalEvent = (events, timer = 1e3) => {
+  if (isEnvBrowser()) {
+    for (const event of events) {
+      setTimeout(() => {
+        window.dispatchEvent(
+          new MessageEvent("message", {
+            data: {
+              action: event.action,
+              data: event.data
+            }
+          })
+        );
+      }, timer);
+    }
+  }
+};
+var localeStore = create((set, get) => {
+  return {
+    locales: {
+      "OccupantsDesc": "Here you can view and manage the occupants of your traphouse. These occupants can be used mainly for selling drugs to the NPCs surrounding your traphouse. However they have other uses to so be careful who you add as an occupant."
+    },
+    locale: (key, ...args) => {
+      const exists = get().locales[key];
+      let translation = exists || key;
+      if (args.length) {
+        translation = translation.replace(/%s/g, () => String(args.shift() || ""));
+      }
+      return translation;
+    }
+  };
+});
+var locale = localeStore.getState().locale;
+fetchOnLoad("GET_LOCALES").then((data) => {
+  localeStore.setState({ locales: data });
+});
+var theme = createTheme({
+  primaryColor: "dirk",
+  primaryShade: 9,
+  defaultRadius: "xxs",
+  fontFamily: "Akrobat Regular, sans-serif",
+  radius: {
+    xxs: "0.2vh",
+    xs: "0.4vh",
+    sm: "0.75vh",
+    md: "1vh",
+    lg: "1.5vh",
+    xl: "2vh",
+    xxl: "3vh"
+  },
+  fontSizes: {
+    xxs: "1.2vh",
+    xs: "1.5vh",
+    sm: "1.8vh",
+    md: "2.2vh",
+    lg: "2.8vh",
+    xl: "3.3vh",
+    xxl: "3.8vh"
+  },
+  spacing: {
+    xxs: "0.5vh",
+    xs: "0.75vh",
+    sm: "1.5vh",
+    md: "2vh",
+    lg: "3vh",
+    xl: "4vh",
+    xxl: "5vh"
+  },
+  components: {
+    Progress: {
+      styles: {
+        root: {
+          backgroundColor: "rgba(77, 77, 77, 0.4)"
+        }
+      }
+    },
+    Select: {
+      styles: {
+        dropdown: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        input: {
+          padding: "var(--mantine-spacing-sm)"
+        },
+        item: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        wrapper: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        option: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        }
+      }
+    },
+    MultiSelect: {
+      styles: {
+        dropdown: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        pill: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        item: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        wrapper: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        },
+        option: {
+          borderRadius: "var(--mantine-radius-xxs)"
+        }
+      }
+    },
+    TextInput: {
+      styles: {
+        section: {
+          marginRight: "0.2vh"
+        },
+        input: {
+          padding: "var(--mantine-spacing-sm)"
+        }
+      }
+    }
+  },
+  colors: {
+    dark: [
+      "#ffffff",
+      "#e2e2e2",
+      "#c6c6c6",
+      "#aaaaaa",
+      "#8d8d8d",
+      "#717171",
+      "#555555",
+      "#393939",
+      "#1c1c1c",
+      "#000000"
+    ],
+    dirk: [
+      "#ffffff",
+      "#f3fce9",
+      "#dbf5bd",
+      "#c3ee91",
+      "#ace765",
+      "#94e039",
+      "#7ac61f",
+      "#5f9a18",
+      "#29420a",
+      "#446e11"
+    ]
+  }
+});
+var theme_default = theme;
+library.add(fas, far, fab);
+var useSettings = create((set) => ({
+  game: "rdr3",
+  primaryColor: "teal",
+  primaryShade: 6,
+  customTheme: {}
+}));
+function DirkProvider(props) {
+  const primaryColor = useSettings((data) => data.primaryColor);
+  const primaryShade = useSettings((data) => data.primaryShade);
+  const customTheme = useSettings((data) => data.customTheme);
+  const game = useSettings((data) => data.game);
+  const mergedTheme = useMemo(() => ({
+    ...theme_default,
+    primaryColor,
+    primaryShade,
+    colors: {
+      ...theme_default.colors,
+      ...customTheme
+      // Custom theme colors will override/extend base colors
+    }
+  }), [primaryColor, primaryShade, customTheme]);
+  useEffect(() => {
+    document.fonts.ready.then(() => {
+      document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : game === "fivem" ? '"Akrobat Regular", sans-serif' : "sans-serif";
+      console.log(`Game set to ${game}, applied corresponding font family.: ${document.body.style.fontFamily}`);
+    });
+  }, [game]);
+  return /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsx(Wrapper, { children: props.children }) });
+}
+function Wrapper({ children }) {
+  const game = useSettings((data) => data.game);
+  return isEnvBrowser() ? /* @__PURE__ */ jsx(
+    BackgroundImage,
+    {
+      w: "100vw",
+      h: "100vh",
+      style: { overflow: "hidden" },
+      src: game === "fivem" ? "https://i.ytimg.com/vi/TOxuNbXrO28/maxresdefault.jpg" : "https://raw.githubusercontent.com/Jump-On-Studios/RedM-jo_libs/refs/heads/main/source-repositories/Menu/public/assets/images/background_dev.jpg",
+      children
+    }
+  ) : /* @__PURE__ */ jsx(Fragment, { children });
+}
+function useTornEdges() {
+  const game = useSettings((state) => state.game);
+  return game === "rdr3" ? "torn-edge-wrapper" : "";
+}
+function TornEdgeSVGFilter() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.018 0.022",
+            numOctaves: "5",
+            seed: "9",
+            result: "noise1"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.08 0.12",
+            numOctaves: "2",
+            seed: "3",
+            result: "noise2"
+          }
+        ),
+        /* @__PURE__ */ jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
+        /* @__PURE__ */ jsx(
+          "feDisplacementMap",
+          {
+            in: "SourceGraphic",
+            in2: "combinedNoise",
+            scale: "52",
+            xChannelSelector: "R",
+            yChannelSelector: "G",
+            result: "displaced"
+          }
+        ),
+        /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
+        /* @__PURE__ */ jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
+        /* @__PURE__ */ jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
+        /* @__PURE__ */ jsx("feMerge", { children: /* @__PURE__ */ jsx("feMergeNode", { in: "eroded" }) })
+      ] }) })
+    }
+  );
+}
 function BorderedIcon(props) {
   const theme2 = useMantineTheme();
+  const tornEdgeCSS = useTornEdges();
   return /* @__PURE__ */ jsx(
-    FontAwesomeIcon,
+    Flex,
     {
-      icon: props.icon,
-      color: colorWithAlpha(props.color ? props.color : theme2.colors[theme2.primaryColor][theme2.primaryShade], props.hovered ? 0.9 : 0.9),
+      className: tornEdgeCSS,
+      justify: "center",
+      align: "center",
       style: {
-        // backgroundColor: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][7 as number], (props.hoverable ? (props.hovered ? 0.3 : 0.2) : 0.2)),
         backgroundColor: "rgba(0, 0, 0, 0.5)",
         padding: props.p || theme2.spacing.xs,
         transition: "all 0.2s ease-in-out",
@@ -200,9 +533,19 @@ function BorderedIcon(props) {
         fontSize: props.fontSize ? props.fontSize : "2.5vh",
         borderRadius: theme2.radius.xs,
         // border: `2px solid var(--mantine-primary-color-9)`,
-        outline: `0.2vh solid ${colorWithAlpha(props.color ? props.color : theme2.colors[theme2.primaryColor][9], 0.8)}`,
+        // outline: `0.2vh solid ${colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][9], 0.8)}`,
         boxShadow: `inset 0 0 2vh ${colorWithAlpha(props.color ? props.color : theme2.colors[theme2.primaryColor][7], 0.5)}`
-      }
+      },
+      children: /* @__PURE__ */ jsx(
+        FontAwesomeIcon,
+        {
+          icon: props.icon,
+          color: colorWithAlpha(props.color ? props.color : theme2.colors[theme2.primaryColor][theme2.primaryShade], props.hovered ? 0.9 : 0.9),
+          style: {
+            // backgroundColor: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][7 as number], (props.hoverable ? (props.hovered ? 0.3 : 0.2) : 0.2)),
+          }
+        }
+      )
     }
   );
 }
@@ -530,175 +873,75 @@ function InputContainer(props) {
                         style: {
                           lineHeight: "1.25vh",
                           fontFamily: "Akrobat Bold",
-                          letterSpacing: "0.05em",
-                          textTransform: "uppercase"
-                        },
-                        children: props.title
-                      }
-                    ),
-                    props.description && /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        size: "xs",
-                        c: "rgba(255, 255, 255, 0.8)",
-                        fw: 400,
-                        children: props.description
-                      }
-                    )
-                  ]
-                }
-              ),
-              props.error && /* @__PURE__ */ jsx(
-                Text,
-                {
-                  size: "xs",
-                  c: theme2.colors.red[9],
-                  fw: 600,
-                  mb: "auto",
-                  lh: "0.8",
-                  children: props.error
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  ml: "auto",
-                  children: props.rightSection
-                }
-              )
-            ]
-          }
-        ),
-        props.children
-      ]
-    }
-  );
-}
-var useAudio = create(() => {
-  const audioRefs = {};
-  const sounds = {
-    click: clickSoundUrl,
-    hover: hoverSoundUrl
-  };
-  for (const [key, src] of Object.entries(sounds)) {
-    audioRefs[key] = new Audio(src);
-  }
-  return {
-    play: (sound) => {
-      const audio = audioRefs[sound];
-      if (!audio) return console.warn(`Sound '${sound}' not found.`);
-      audio.currentTime = 0;
-      audio.volume = 0.1;
-      audio.play();
-    },
-    stop: (sound) => {
-      const audio = audioRefs[sound];
-      if (!audio) return console.warn(`Sound '${sound}' not found.`);
-      audio.pause();
-      audio.currentTime = 0;
-    }
-  };
-});
-
-// src/utils/misc.ts
-var isEnvBrowser = () => !window.invokeNative;
-var noop = () => {
-};
-var splitFAString = (faString) => {
-  const [prefix, newIcon] = faString.split("-");
-  if (!prefix || !newIcon) return { prefix: "fas", newIcon: "question" };
-  return { prefix, newIcon };
-};
-var numberToRoman = (num) => {
-  const romanNumerals = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI", "XVII", "XVIII", "XIX", "XX"];
-  return romanNumerals[num];
-};
-var copyToClipboard = (text) => {
-  const el = document.createElement("textarea");
-  el.value = text;
-  document.body.appendChild(el);
-  el.select();
-  document.execCommand("copy");
-  document.body.removeChild(el);
-};
-var openLink = (url) => {
-  if (isEnvBrowser()) {
-    window.open(url, "_blank");
-  } else {
-    window.invokeNative("openLink", url);
-  }
-};
-
-// src/utils/fetchNui.ts
-async function fetchNui(eventName, data, mockData) {
-  const options = {
-    method: "post",
-    headers: {
-      "Content-Type": "application/json; charset=UTF-8"
-    },
-    body: JSON.stringify(data)
-  };
-  if (isEnvBrowser() && mockData !== void 0) return mockData;
-  if (isEnvBrowser()) {
-    console.warn(
-      `[fetchNui] Called fetchNui for event "${eventName}" in browser environment without mockData. Returning empty object.`
-    );
-    return {};
-  }
-  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app";
-  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
-  const respFormatted = await resp.json();
-  return respFormatted;
-}
-function fetchOnLoad(eventName, data, mockData) {
-  return fetchNui(eventName, data, mockData).catch((err) => {
-    console.error(`[fetchOnLoad] Failed for ${eventName}:`, err);
-    throw err;
-  });
-}
-var fetchLuaTable = (tableName) => () => {
-  if (isEnvBrowser()) {
-    return Promise.resolve({});
-  }
-  return fetchNui("GET_LUA_TABLE", { tableName });
-};
-
-// src/utils/internalEvent.ts
-var internalEvent = (events, timer = 1e3) => {
-  if (isEnvBrowser()) {
-    for (const event of events) {
-      setTimeout(() => {
-        window.dispatchEvent(
-          new MessageEvent("message", {
-            data: {
-              action: event.action,
-              data: event.data
-            }
-          })
-        );
-      }, timer);
+                          letterSpacing: "0.05em",
+                          textTransform: "uppercase"
+                        },
+                        children: props.title
+                      }
+                    ),
+                    props.description && /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: "xs",
+                        c: "rgba(255, 255, 255, 0.8)",
+                        fw: 400,
+                        children: props.description
+                      }
+                    )
+                  ]
+                }
+              ),
+              props.error && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "xs",
+                  c: theme2.colors.red[9],
+                  fw: 600,
+                  mb: "auto",
+                  lh: "0.8",
+                  children: props.error
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Flex,
+                {
+                  ml: "auto",
+                  children: props.rightSection
+                }
+              )
+            ]
+          }
+        ),
+        props.children
+      ]
     }
+  );
+}
+var useAudio = create(() => {
+  const audioRefs = {};
+  const sounds = {
+    click: clickSoundUrl,
+    hover: hoverSoundUrl
+  };
+  for (const [key, src] of Object.entries(sounds)) {
+    audioRefs[key] = new Audio(src);
   }
-};
-var localeStore = create((set, get) => {
   return {
-    locales: {
-      "OccupantsDesc": "Here you can view and manage the occupants of your traphouse. These occupants can be used mainly for selling drugs to the NPCs surrounding your traphouse. However they have other uses to so be careful who you add as an occupant."
+    play: (sound) => {
+      const audio = audioRefs[sound];
+      if (!audio) return console.warn(`Sound '${sound}' not found.`);
+      audio.currentTime = 0;
+      audio.volume = 0.1;
+      audio.play();
     },
-    locale: (key, ...args) => {
-      const exists = get().locales[key];
-      let translation = exists || key;
-      if (args.length) {
-        translation = translation.replace(/%s/g, () => String(args.shift() || ""));
-      }
-      return translation;
+    stop: (sound) => {
+      const audio = audioRefs[sound];
+      if (!audio) return console.warn(`Sound '${sound}' not found.`);
+      audio.pause();
+      audio.currentTime = 0;
     }
   };
 });
-var locale = localeStore.getState().locale;
-fetchOnLoad("GET_LOCALES").then((data) => {
-  localeStore.setState({ locales: data });
-});
 function SegmentedControl(props) {
   const theme2 = useMantineTheme();
   const play = useAudio((state) => state.play);
@@ -971,6 +1214,7 @@ function SegmentedProgress(props) {
   );
 }
 function Title(props) {
+  const game = useSettings((state) => state.game);
   const theme2 = useMantineTheme();
   return /* @__PURE__ */ jsx(
     Flex,
@@ -1014,7 +1258,7 @@ function Title(props) {
                       children: [
                         /* @__PURE__ */ jsx(Text, { p: "0", size: "sm", style: {
                           lineHeight: theme2.fontSizes.md,
-                          fontFamily: "Akrobat Bold",
+                          fontFamily: game == "fivem" ? "Akrobat Bold" : "Red Dead",
                           letterSpacing: "0.05em",
                           textTransform: "uppercase"
                         }, children: props.title }),
@@ -1048,185 +1292,7 @@ function Title(props) {
     }
   );
 }
-var useNuiEvent = (action, handler) => {
-  const savedHandler = useRef(noop);
-  useEffect(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-  useEffect(() => {
-    const eventListener = (event) => {
-      const { action: eventAction, data } = event.data;
-      if (savedHandler.current) {
-        if (eventAction === action) {
-          savedHandler.current(data);
-        }
-      }
-    };
-    window.addEventListener("message", eventListener);
-    return () => window.removeEventListener("message", eventListener);
-  }, [action]);
-};
-var theme = createTheme({
-  primaryColor: "dirk",
-  primaryShade: 9,
-  defaultRadius: "xxs",
-  fontFamily: "Akrobat Regular, sans-serif",
-  radius: {
-    xxs: "0.2vh",
-    xs: "0.4vh",
-    sm: "0.75vh",
-    md: "1vh",
-    lg: "1.5vh",
-    xl: "2vh",
-    xxl: "3vh"
-  },
-  fontSizes: {
-    xxs: "1.2vh",
-    xs: "1.5vh",
-    sm: "1.8vh",
-    md: "2.2vh",
-    lg: "2.8vh",
-    xl: "3.3vh",
-    xxl: "3.8vh"
-  },
-  spacing: {
-    xxs: "0.5vh",
-    xs: "0.75vh",
-    sm: "1.5vh",
-    md: "2vh",
-    lg: "3vh",
-    xl: "4vh",
-    xxl: "5vh"
-  },
-  components: {
-    Progress: {
-      styles: {
-        root: {
-          backgroundColor: "rgba(77, 77, 77, 0.4)"
-        }
-      }
-    },
-    Select: {
-      styles: {
-        dropdown: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        },
-        item: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        wrapper: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        option: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        }
-      }
-    },
-    MultiSelect: {
-      styles: {
-        dropdown: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        pill: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        item: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        wrapper: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        option: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        }
-      }
-    },
-    TextInput: {
-      styles: {
-        section: {
-          marginRight: "0.2vh"
-        },
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        }
-      }
-    }
-  },
-  colors: {
-    dark: [
-      "#ffffff",
-      "#e2e2e2",
-      "#c6c6c6",
-      "#aaaaaa",
-      "#8d8d8d",
-      "#717171",
-      "#555555",
-      "#393939",
-      "#1c1c1c",
-      "#000000"
-    ],
-    dirk: [
-      "#ffffff",
-      "#f3fce9",
-      "#dbf5bd",
-      "#c3ee91",
-      "#ace765",
-      "#94e039",
-      "#7ac61f",
-      "#5f9a18",
-      "#29420a",
-      "#446e11"
-    ]
-  }
-});
-var theme_default = theme;
-library.add(fas, far, fab);
-var useSettings = create((set) => ({
-  game: "rdr3",
-  primaryColor: "teal",
-  primaryShade: 6,
-  customTheme: {}
-}));
-function DirkProvider(props) {
-  const primaryColor = useSettings((data) => data.primaryColor);
-  const primaryShade = useSettings((data) => data.primaryShade);
-  const customTheme = useSettings((data) => data.customTheme);
-  const game = useSettings((data) => data.game);
-  const mergedTheme = useMemo(() => ({
-    ...theme_default,
-    primaryColor,
-    primaryShade,
-    colors: {
-      ...theme_default.colors,
-      ...customTheme
-      // Custom theme colors will override/extend base colors
-    }
-  }), [primaryColor, primaryShade, customTheme]);
-  useEffect(() => {
-    document.fonts.ready.then(() => {
-      document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : game === "fivem" ? '"Akrobat Regular", sans-serif' : "sans-serif";
-      console.log(`Game set to ${game}, applied corresponding font family.: ${document.body.style.fontFamily}`);
-    });
-  }, [game]);
-  return /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsx(Wrapper, { children: props.children }) });
-}
-function Wrapper({ children }) {
-  const game = useSettings((data) => data.game);
-  return isEnvBrowser() ? /* @__PURE__ */ jsx(
-    BackgroundImage,
-    {
-      w: "100vw",
-      h: "100vh",
-      style: { overflow: "hidden" },
-      src: game === "fivem" ? "https://i.ytimg.com/vi/TOxuNbXrO28/maxresdefault.jpg" : "https://raw.githubusercontent.com/Jump-On-Studios/RedM-jo_libs/refs/heads/main/source-repositories/Menu/public/assets/images/background_dev.jpg",
-      children
-    }
-  ) : /* @__PURE__ */ jsx(Fragment, { children });
-}
 
-export { BorderedIcon, Counter, DirkProvider, FloatingParticles, InfoBox, InputContainer, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, Segment, SegmentedControl, SegmentedProgress, Title, colorWithAlpha, copyToClipboard, fetchLuaTable, fetchNui, fetchOnLoad, internalEvent, isEnvBrowser, locale, localeStore, noop, numberToRoman, openLink, splitFAString, useNavigation, useNavigationStore, useNuiEvent, useSettings };
+export { BorderedIcon, Counter, DirkProvider, FloatingParticles, InfoBox, InputContainer, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, Segment, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, fetchLuaTable, fetchNui, fetchOnLoad, internalEvent, isEnvBrowser, locale, localeStore, noop, numberToRoman, openLink, splitFAString, useNavigation, useNavigationStore, useNuiEvent, useSettings, useTornEdges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map