dirk-cfx-react 1.0.63 → 1.1.0

package/dist/index.js

@@ -164,11 +164,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha3) {
+function colorWithAlpha(color, alpha4) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha3})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha4})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -176,12 +176,12 @@ function colorWithAlpha(color, alpha3) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha3})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha4})`;
   }
   if (/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/.test(color)) {
     const result = color.match(/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/);
     if (result) {
-      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha3})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha4})`;
     }
   }
   return color;
@@ -1115,13 +1115,13 @@ function InputContainer(props) {
       direction: "column",
       h: props.h,
       gap: props.title ? "xs" : 0,
-      bg: props.bg || "linear-gradient(180deg, rgba(30, 30, 30, 0.82) 0%, rgba(30, 30, 30, 0.3) 50%, rgba(30, 30, 30, 0.6) 100%)",
+      bg: props.bg || alpha("var(--mantine-color-dark-9)", 0.65),
       p: props.p || "sm",
       style: {
         borderRadius: theme2.radius.xs,
         boxShadow: theme2.shadows.sm,
         overflow: "hidden",
-        outline: props.error ? `1px solid rgba(255, 100, 100, 0.8)` : "0.2vh solid rgba(255,255,255,0.1)",
+        border: props.error ? `1px solid rgba(255, 100, 100, 0.8)` : "1px solid var(--mantine-color-dark-7)",
         ...props.style
       },
       variants: props.variants,
@@ -2151,8 +2151,8 @@ var theme = createTheme({
   defaultRadius: "xs",
   fontFamily: "Akrobat Regular, sans-serif",
   radius: {
-    xxs: "0.2vh",
-    xs: "0.4vh",
+    xxs: "0.3vh",
+    xs: "0.5vh",
     sm: "0.75vh",
     md: "1vh",
     lg: "1.5vh",
@@ -2213,6 +2213,7 @@ var theme = createTheme({
     },
     Select: {
       styles: {
+        label,
         input: {
           padding: "var(--mantine-spacing-sm)"
         }
@@ -2331,6 +2332,7 @@ function DirkProvider(props) {
     ...props.themeOverride
     // Props theme will override/extend the entire theme
   }), [primaryColor, primaryShade, customTheme, props.themeOverride]);
+  console.log(mergedTheme);
   useEffect(() => {
     document.fonts.ready.then(() => {
       document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : game === "fivem" ? '"Akrobat Regular", sans-serif' : "sans-serif";