react-native-mantine 0.14.0 → 0.15.0

package/lib/typescript/module/src/theme/utils/withTextWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withTextWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/utils/withTextWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,SAAS,EACnB,UAAU,GAAE,OAAc,EAC1B,SAAS,CAAC,EAAE,GAAG,EACf,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAC,GAChD,SAAS,CAUX;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}
+{"version":3,"file":"withTextWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/utils/withTextWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,SAAS,EACnB,UAAU,GAAE,OAAc,EAC1B,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GACtC,SAAS,CAUX;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-mantine",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Make Mantine Accessable on React Native",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/components/ActionIcon/ActionIcon.tsx

@@ -67,9 +67,9 @@ const useStyles = createStyles(
         backgroundColor:
           variant === 'transparent'
             ? 'transparent'
-            : theme.currentMode === 'dark'
-              ? theme.primaryBgColor
-              : theme.secondaryBgColor,
+            : theme.colorScheme === 'dark'
+              ? theme.fn.primaryColor()
+              : theme.fn.themeColor('gray', 1),
         borderRadius: sizeValue / 2,
         alignItems: 'center',
         justifyContent: 'center',

package/src/components/Anchor/index.tsx

@@ -65,24 +65,23 @@ const useStyles = createStyles(
     },
     { variant }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
     const fontSize = sizes[size as keyof typeof sizes] || sizes.md;
 
     const getVariantStyles = () => {
       switch (variant) {
         case 'link':
           return {
-            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            color: theme.fn.themeColor(color, 6),
             textDecorationLine: underline ? 'underline' : 'none',
           };
         case 'text':
           return {
-            color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] || theme.white : theme.black,
+            color: theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 0) : theme.black,
             textDecorationLine: 'none',
           };
         default:
           return {
-            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            color: theme.fn.themeColor(color, 6),
             textDecorationLine: underline ? 'underline' : 'none',
           };
       }

package/src/components/Avatar/index.tsx

@@ -59,7 +59,6 @@ const useStyles = createStyles(
       size: MantineSize | number;
     }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
     const sizeValue = typeof size === 'number' ? rem(size) : sizes[size as keyof typeof sizes] || sizes.md;
 
     return {
@@ -68,7 +67,7 @@ const useStyles = createStyles(
         height: sizeValue as any,
         borderRadius: theme.fn.radius(radius),
         overflow: 'hidden',
-        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        backgroundColor: theme.fn.themeColor(color, 6),
         justifyContent: 'center',
         alignItems: 'center',
       } as any,

package/src/components/Badge/index.tsx

@@ -71,40 +71,53 @@ const useStyles = createStyles(
     },
     { variant, size }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
     const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
 
     const getVariantStyles = () => {
       switch (variant) {
-        case 'filled':
+        case 'filled': {
+          const variantStyles = theme.fn.variant({ variant: 'filled', color });
           return {
-            backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
-            color: theme.white,
+            backgroundColor: variantStyles.background,
+            color: variantStyles.color,
           };
-        case 'light':
+        }
+        case 'light': {
+          const variantStyles = theme.fn.variant({ variant: 'light', color });
           return {
-            backgroundColor: colors?.[0] || colors?.[1] || (theme.colors.gray || [])[0],
-            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            backgroundColor: variantStyles.background,
+            color: variantStyles.color,
           };
-        case 'outline':
+        }
+        case 'outline': {
+          const variantStyles = theme.fn.variant({ variant: 'outline', color });
           return {
-            backgroundColor: 'transparent',
-            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            backgroundColor: variantStyles.background,
+            color: variantStyles.color,
             borderWidth: 1,
-            borderColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            borderColor: variantStyles.border,
           };
+        }
         case 'dot':
           return {
-            backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : theme.white,
-            color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+            backgroundColor: theme.colorScheme === 'dark'
+              ? theme.fn.themeColor('dark', 5)
+              : theme.white,
+            color: theme.colorScheme === 'dark'
+              ? theme.fn.themeColor('dark', 0)
+              : theme.black,
             borderWidth: 1,
-            borderColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[3],
+            borderColor: theme.colorScheme === 'dark'
+              ? theme.fn.themeColor('dark', 4)
+              : theme.fn.themeColor('gray', 3),
           };
-        default:
+        default: {
+          const variantStyles = theme.fn.variant({ variant: 'filled', color });
           return {
-            backgroundColor: colors?.[6] || theme.primaryBgColor,
-            color: theme.white,
+            backgroundColor: variantStyles.background,
+            color: variantStyles.color,
           };
+        }
       }
     };
 
@@ -137,7 +150,7 @@ const useStyles = createStyles(
         width: (dotSizes[size as keyof typeof dotSizes] || dotSizes.md) as any,
         height: (dotSizes[size as keyof typeof dotSizes] || dotSizes.md) as any,
         borderRadius: (dotSizes[size as keyof typeof dotSizes] || dotSizes.md) as any,
-        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        backgroundColor: theme.fn.themeColor(color || theme.primaryColor),
         marginRight: theme.spacing.xs,
       },
       label: {
@@ -180,12 +193,16 @@ export const Badge = forwardRef<any, BadgeProps>((props, ref) => {
     { name: 'Badge', variant, size }
   ) as any;
 
+  // Get the text color from the variant styles
+  // We need to cast to access the color property since TypeScript doesn't know the exact type
+  const textColor = (styles.root as any).color as string;
+
   return (
     <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
       <BoxView style={styles.inner}>
         {variant === 'dot' && <BoxView style={styles.dot} />}
         {leftSection && <BoxView style={styles.leftSection}>{leftSection}</BoxView>}
-        {withTextWrapper(children, shouldWrapInText, styles.label)}
+        {withTextWrapper(children, shouldWrapInText, { ...styles.label, color: textColor })}
         {rightSection && <BoxView style={styles.rightSection}>{rightSection}</BoxView>}
       </BoxView>
     </BoxView>

package/src/components/Blockquote/index.tsx

@@ -41,14 +41,12 @@ const useStyles = createStyles(
       radius: MantineNumberSize;
     }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
-
     return {
       root: {
         backgroundColor:
-          theme.colorScheme === 'dark' ? theme.colors.dark?.[6] || theme.colors.gray?.[8] : theme.colors.gray?.[0] || theme.colors.gray?.[1],
+          theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 6) : theme.fn.themeColor('gray', 0),
         borderLeftWidth: 4,
-        borderLeftColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        borderLeftColor: theme.fn.themeColor(color, 6),
         borderRadius: theme.fn.radius(radius),
         padding: theme.spacing.md,
       },
@@ -65,13 +63,13 @@ const useStyles = createStyles(
       content: {
         fontSize: rem(16),
         lineHeight: rem(24),
-        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[0] || theme.white : theme.black,
+        color: theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 0) : theme.black,
         marginBottom: 0,
       },
       cite: {
         fontSize: rem(14),
         marginTop: theme.spacing.xs,
-        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] || theme.colors.gray?.[5] : theme.colors.gray?.[6] || theme.colors.gray?.[7],
+        color: theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 2) : theme.fn.themeColor('gray', 6),
       },
     };
   }

package/src/components/Button/index.tsx

@@ -120,6 +120,10 @@ export const _Button = forwardRef<View, ButtonProps>((props, ref) => {
     }
   );
 
+  // Get the text color from the variant styles
+  // We need to cast to access the color property since TypeScript doesn't know the exact type
+  const textColor = (styles.root as any).color as string;
+
   const loader = <ActivityIndicator />;
 
   const buttonContent = (
@@ -134,7 +138,7 @@ export const _Button = forwardRef<View, ButtonProps>((props, ref) => {
         {loading && loaderPosition === 'center' && (
           <BoxView style={styles.centerLoader}>{loader}</BoxView>
         )}
-        {withTextWrapper(children, shouldWrapInText)}
+        {withTextWrapper(children, shouldWrapInText, { color: textColor })}
         {(rightIcon || (loading && loaderPosition === 'right')) && (
           <BoxView style={sx(styles.icon, styles.rightIcon)}>
             {loading && loaderPosition === 'right' ? loader : rightIcon}

package/src/components/Center/index.tsx

@@ -1,9 +1,8 @@
 import React, { forwardRef } from 'react';
 import { BoxView } from '../BoxView';
 import type { ViewProps } from '../BoxView';
-import type { DefaultProps } from '../../theme/types';
 
-export interface CenterProps extends DefaultProps, Omit<ViewProps, 'style'> {
+export interface CenterProps extends ViewProps {
   /** Content that should be centered */
   children?: React.ReactNode;
 

package/src/components/Checkbox/index.tsx

@@ -57,7 +57,6 @@ const useStyles = createStyles(
       disabled: boolean;
     }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
     const checkboxSize = sizes[size as keyof typeof sizes] || sizes.md;
 
     return {
@@ -71,14 +70,14 @@ const useStyles = createStyles(
         height: checkboxSize as any,
         borderRadius: theme.radius.sm,
         borderWidth: 2,
-        borderColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[4],
+        borderColor: theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 4) : theme.fn.themeColor('gray', 4),
         backgroundColor: 'transparent',
         justifyContent: 'center',
         alignItems: 'center',
       },
       checked: {
-        borderColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
-        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        borderColor: theme.fn.themeColor(color, 6),
+        backgroundColor: theme.fn.themeColor(color, 6),
       },
       checkmark: {
         color: theme.white,
@@ -87,7 +86,7 @@ const useStyles = createStyles(
       },
       label: {
         fontSize: theme.fontSizes.sm as number,
-        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        color: theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 0) : theme.black,
         marginLeft: theme.spacing.sm,
         flex: 1,
       },

package/src/components/Chip/index.tsx

@@ -84,45 +84,52 @@ const useStyles = createStyles(
       disabled: boolean;
     }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
     const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
 
     const getVariantStyles = () => {
       if (!checked) {
         return {
-          backgroundColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.colors.gray?.[1],
+          backgroundColor: theme.colorScheme === 'dark'
+            ? theme.fn.themeColor('dark', 6)
+            : theme.fn.themeColor('gray', 1),
           borderWidth: 1,
-          borderColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[4],
+          borderColor: theme.colorScheme === 'dark'
+            ? theme.fn.themeColor('dark', 4)
+            : theme.fn.themeColor('gray', 4),
         };
       }
 
       switch (variant) {
-        case 'filled':
+        case 'filled': {
+          const variantStyles = theme.fn.variant({ variant: 'filled', color });
           return {
-            backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            backgroundColor: variantStyles.background,
             borderWidth: 0,
           };
-        case 'outline':
+        }
+        case 'outline': {
+          const variantStyles = theme.fn.variant({ variant: 'outline', color });
           return {
-            backgroundColor: 'transparent',
+            backgroundColor: variantStyles.background,
             borderWidth: 1,
-            borderColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            borderColor: variantStyles.border,
           };
-        case 'light':
+        }
+        case 'light': {
           return {
-            backgroundColor:
-              theme.colorScheme === 'dark'
-                ? theme.fn.rgba(colors?.[9] || theme.primaryBgColor, 0.25)
-                : colors?.[0] || (theme.colors.gray || [])[1],
+            backgroundColor: theme.colorScheme === 'dark'
+              ? theme.fn.rgba(theme.fn.themeColor(color || theme.primaryColor, 9), 0.25)
+              : theme.fn.themeColor(color || theme.primaryColor, 0),
             borderWidth: 0,
           };
-        default:
+        }
+        default: {
+          const variantStyles = theme.fn.variant({ variant: 'filled', color });
           return {
-            backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            backgroundColor: variantStyles.background,
             borderWidth: 0,
           };
+        }
       }
     };
 
@@ -136,7 +143,7 @@ const useStyles = createStyles(
           return theme.white;
         case 'outline':
         case 'light':
-          return colors?.[6] || colors?.[5] || theme.primaryBgColor;
+          return theme.fn.themeColor(color || theme.primaryColor);
         default:
           return theme.white;
       }

package/src/components/Code/index.tsx

@@ -27,10 +27,10 @@ export const Code = forwardRef<any, CodeProps>((props, ref) => {
   const primaryShade = getPrimaryShade(theme);
 
   // Get background and text colors
-  const backgroundColor = theme.colors.gray?.[0] || '#F6F6F6';
+  const backgroundColor = theme.fn.themeColor('gray', 0);
   const textColor = color
-    ? theme.colors[color]?.[primaryShade] || color
-    : theme.light.text;
+    ? theme.fn.themeColor(color, primaryShade)
+    : (theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 0) : theme.fn.themeColor('gray', 9));
 
   // Monospace font - in React Native, we can use 'Courier' or 'Courier New'
   const codeStyles = {
@@ -61,8 +61,10 @@ export const Code = forwardRef<any, CodeProps>((props, ref) => {
           children,
           shouldWrapInText,
           {
-            fontFamily: 'Courier',
-            fontSize: theme.fontSizes.sm as number || 14,
+            style: {
+              fontFamily: 'Courier',
+              fontSize: theme.fontSizes.sm as number || 14,
+            },
             color: textColor,
           }
         )}

package/src/components/Container/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react';
 import { BoxView } from '../BoxView';
 import type { ViewProps } from '../BoxView';
-import type { DefaultProps, MantineNumberSize } from '../../theme/types';
+import type { MantineNumberSize } from '../../theme/types';
 import { useTheme } from '../../theme/theme-provider';
 import { Dimensions } from 'react-native';
 
-export interface ContainerProps extends DefaultProps, Omit<ViewProps, 'style'> {
+export interface ContainerProps extends ViewProps {
   /** Predefined container max-width or number for max-width in px */
   size?: MantineNumberSize | number;
 

package/src/components/Flex/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react';
 import { BoxView } from '../BoxView';
 import type { ViewProps } from '../BoxView';
-import type { DefaultProps, MantineNumberSize } from '../../theme/types';
+import type { MantineNumberSize } from '../../theme/types';
 import { useTheme } from '../../theme/theme-provider';
 import type { FlexStyle } from 'react-native';
 
-export interface FlexProps extends DefaultProps, Omit<ViewProps, 'style'> {
+export interface FlexProps extends ViewProps {
   /** Set flex-direction property */
   direction?: FlexStyle['flexDirection'];
 

package/src/components/Grid/index.tsx

@@ -56,15 +56,20 @@ const useGridStyles = createStyles(
       align: 'stretch' | 'center' | 'flex-start' | 'flex-end';
       justify: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
     }
-  ) => ({
-    root: {
-      flexDirection: 'row' as const,
-      flexWrap: 'wrap' as const,
-      alignItems: align,
-      justifyContent: justify,
-      margin: -theme.fn.size({ size: gutter, sizes: theme.spacing }) / 2,
-    },
-  })
+  ) => {
+    const gutterValue = theme.fn.size({ size: gutter, sizes: theme.spacing });
+    const gutterNumber = typeof gutterValue === 'number' ? gutterValue : parseFloat(gutterValue) || 0;
+
+    return {
+      root: {
+        flexDirection: 'row' as const,
+        flexWrap: 'wrap' as const,
+        alignItems: align,
+        justifyContent: justify,
+        margin: -gutterNumber / 2,
+      },
+    };
+  }
 );
 
 const useColStyles = createStyles(
@@ -86,7 +91,8 @@ const useColStyles = createStyles(
       grow: boolean;
     }
   ) => {
-    const gutterSize = theme.fn.size({ size: gutter, sizes: theme.spacing });
+    const gutterValue = theme.fn.size({ size: gutter, sizes: theme.spacing });
+    const gutterSize = typeof gutterValue === 'number' ? gutterValue : parseFloat(gutterValue) || 0;
     const colSpan = span || columns;
     const percentage = (colSpan / columns) * 100;
     const offsetPercentage = offset ? (offset / columns) * 100 : 0;

package/src/components/Highlight/index.tsx

@@ -39,8 +39,7 @@ export const Highlight = forwardRef<any, HighlightProps>((props, ref) => {
   const highlights = Array.isArray(highlight) ? highlight : [highlight];
 
   // Get default highlight background color
-  const defaultHighlightBg =
-    theme.colors[highlightColor]?.[2] || theme.colors.yellow?.[2] || '#ffec99';
+  const defaultHighlightBg = theme.fn.themeColor(highlightColor, 2);
 
   const defaultStyles = {
     backgroundColor: defaultHighlightBg,

package/src/components/Indicator/index.tsx

@@ -92,7 +92,6 @@ const useStyles = createStyles(
       inline: boolean;
     }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
     const indicatorSize =
       typeof size === 'number' ? rem(size) : sizes[size as keyof typeof sizes] || sizes.md;
 
@@ -160,11 +159,11 @@ const useStyles = createStyles(
         height: indicatorSize,
         borderRadius: theme.fn.radius(radius),
         backgroundColor: disabled
-          ? theme.colors.gray?.[5] || theme.colors.gray?.[6]
-          : colors?.[6] || colors?.[5] || theme.primaryBgColor,
+          ? theme.fn.themeColor('gray', 5)
+          : theme.fn.themeColor(color, 6),
         ...(withBorder && {
           borderWidth: 2,
-          borderColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[7] : theme.white,
+          borderColor: theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 7) : theme.white,
         }),
         alignItems: 'center',
         justifyContent: 'center',

package/src/components/Menu/index.tsx

@@ -116,8 +116,6 @@ const useItemStyles = createStyles(
     theme,
     { color, disabled }: { color: MantineColor; disabled: boolean }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
-
     return {
       item: {
         flexDirection: 'row',
@@ -129,24 +127,24 @@ const useItemStyles = createStyles(
       itemHovered: {
         backgroundColor:
           theme.colorScheme === 'dark'
-            ? (theme.colors.dark || [])[5]
-            : (theme.colors.gray || [])[0],
+            ? theme.fn.themeColor('dark', 5)
+            : theme.fn.themeColor('gray', 0),
       },
       icon: {
         marginRight: theme.spacing.sm,
         color: color
-          ? colors?.[6] || colors?.[5]
+          ? theme.fn.themeColor(color, 6)
           : theme.colorScheme === 'dark'
-          ? (theme.colors.dark || [])[0]
-          : (theme.colors.gray || [])[7],
+          ? theme.fn.themeColor('dark', 0)
+          : theme.fn.themeColor('gray', 7),
       },
       label: {
         flex: 1,
         fontSize: 14,
         color: color
-          ? colors?.[6] || colors?.[5]
+          ? theme.fn.themeColor(color, 6)
           : theme.colorScheme === 'dark'
-          ? (theme.colors.dark || [])[0]
+          ? theme.fn.themeColor('dark', 0)
           : theme.black,
       },
       rightSection: {
@@ -162,7 +160,7 @@ const useLabelStyles = createStyles((theme) => ({
     paddingHorizontal: theme.spacing.md,
     fontSize: 12,
     fontWeight: '600',
-    color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6],
+    color: theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 2) : theme.fn.themeColor('gray', 6),
     textTransform: 'uppercase',
   },
 }));

package/src/components/MultiSelect/index.tsx

@@ -94,8 +94,6 @@ const useStyles = createStyles(
     theme,
     { color }: { color: MantineColor; size: MantineSize }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
-
     return {
       valuesContainer: {
         flexDirection: 'row',
@@ -110,7 +108,7 @@ const useStyles = createStyles(
       },
       modalContent: {
         backgroundColor:
-          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[7] : theme.white,
+          theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 7) : theme.white,
         borderTopLeftRadius: theme.radius.lg,
         borderTopRightRadius: theme.radius.lg,
         maxHeight: '80%',
@@ -120,8 +118,8 @@ const useStyles = createStyles(
         borderBottomWidth: 1,
         borderBottomColor:
           theme.colorScheme === 'dark'
-            ? (theme.colors.dark || [])[4]
-            : (theme.colors.gray || [])[2],
+            ? theme.fn.themeColor('dark', 4)
+            : theme.fn.themeColor('gray', 2),
       },
       listContainer: {
         paddingVertical: rem(8) as any as any,
@@ -135,8 +133,8 @@ const useStyles = createStyles(
       itemSelected: {
         backgroundColor:
           theme.colorScheme === 'dark'
-            ? (theme.colors.dark || [])[5]
-            : colors?.[0] || (theme.colors.gray || [])[0],
+            ? theme.fn.themeColor('dark', 5)
+            : theme.fn.themeColor(color, 0),
       },
       itemDisabled: {
         opacity: 0.4,
@@ -145,11 +143,11 @@ const useStyles = createStyles(
         flex: 1,
         fontSize: rem(14),
         marginLeft: theme.spacing.sm,
-        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        color: theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 0) : theme.black,
       },
       itemTextSelected: {
         fontWeight: '600',
-        color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        color: theme.fn.themeColor(color, 6),
       },
       groupLabel: {
         paddingVertical: rem(8) as any,
@@ -158,8 +156,8 @@ const useStyles = createStyles(
         fontWeight: '600',
         color:
           theme.colorScheme === 'dark'
-            ? (theme.colors.dark || [])[2]
-            : (theme.colors.gray || [])[6],
+            ? theme.fn.themeColor('dark', 2)
+            : theme.fn.themeColor('gray', 6),
         textTransform: 'uppercase',
       },
       emptyState: {
@@ -169,16 +167,16 @@ const useStyles = createStyles(
       emptyText: {
         color:
           theme.colorScheme === 'dark'
-            ? (theme.colors.dark || [])[2]
-            : (theme.colors.gray || [])[6],
+            ? theme.fn.themeColor('dark', 2)
+            : theme.fn.themeColor('gray', 6),
       },
       footer: {
         padding: theme.spacing.md,
         borderTopWidth: 1,
         borderTopColor:
           theme.colorScheme === 'dark'
-            ? (theme.colors.dark || [])[4]
-            : (theme.colors.gray || [])[2],
+            ? theme.fn.themeColor('dark', 4)
+            : theme.fn.themeColor('gray', 2),
         flexDirection: 'row',
         justifyContent: 'space-between',
       },