dirk-cfx-react 1.1.7 → 1.1.8

package/dist/index.js

@@ -2,7 +2,7 @@ import React3, { createContext, useEffect, useRef, useState, useContext, useMemo
 import { create, useStore, createStore } from 'zustand';
 import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Flex, Text, Image as Image$1, createTheme, Box, Code, useMantineTheme, alpha, Progress, RingProgress, Button, MantineProvider, BackgroundImage } from '@mantine/core';
+import { Flex, Text, Image as Image$1, createTheme, Box, Code, useMantineTheme, Progress, RingProgress, Button, MantineProvider, BackgroundImage } from '@mantine/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
 import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
@@ -802,7 +802,6 @@ async function getImageShape(file) {
   });
 }
 var useSettings = create(() => ({
-  hydrated: false,
   game: "fivem",
   primaryColor: "dirk",
   primaryShade: 9,
@@ -822,11 +821,10 @@ var useSettings = create(() => ({
 }));
 registerInitialFetch("GET_SETTINGS").then((data) => {
   useSettings.setState({
-    ...data,
-    hydrated: true
+    ...data
   });
-}).catch(() => {
-  useSettings.setState({ hydrated: true });
+}).catch((err) => {
+  console.error("Failed to fetch initial settings within dirk-cfx-react:", err);
 });
 function BorderedIcon(props) {
   const theme2 = useMantineTheme();
@@ -1146,7 +1144,7 @@ function InputContainer(props) {
       direction: "column",
       h: props.h,
       gap: props.title ? "xs" : 0,
-      bg: props.bg || alpha("var(--mantine-color-dark-9)", 0.65),
+      bg: props.bg || colorWithAlpha("var(--mantine-color-dark-9)", 0.65),
       p: props.p || "sm",
       style: {
         borderRadius: theme2.radius.xs,
@@ -1314,7 +1312,7 @@ function Segment(props) {
       direction: "column",
       align: "center",
       h: "100%",
-      bg: props.selected ? props.color ? alpha(props.color, 0.2) : colorWithAlpha(theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.2) : "transparent",
+      bg: props.selected ? props.color ? colorWithAlpha(props.color, 0.2) : colorWithAlpha(theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.2) : "transparent",
       pos: "relative",
       style: {
         // position: "relative",
@@ -1708,7 +1706,7 @@ function LevelPanel(props) {
             size: 190,
             roundCaps: true,
             thickness: 10,
-            sections: [{ value: props.progressToLevel, color: alpha(props.color || theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.9) }],
+            sections: [{ value: props.progressToLevel, color: colorWithAlpha(props.color || theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.9) }],
             label: /* @__PURE__ */ jsx(
               Flex,
               {
@@ -1719,10 +1717,10 @@ function LevelPanel(props) {
                   Text,
                   {
                     size: "6vh",
-                    c: alpha(props.color || theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.9),
+                    c: colorWithAlpha(props.color || theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.9),
                     style: {
                       fontFamily: "Akrobat Black",
-                      textShadow: `0 0 10px ${alpha(props.color || theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.7)}`
+                      textShadow: `0 0 10px ${colorWithAlpha(props.color || theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.7)}`
                     },
                     children: props.level
                   }
@@ -2431,7 +2429,6 @@ var DirkErrorBoundary = class extends React3.Component {
 library.add(fas, far, fab);
 function DirkProvider({ children, themeOverride }) {
   const {
-    hydrated,
     primaryColor,
     primaryShade,
     customTheme,