@admin-layout/gluestack-ui-mobile 12.0.16-alpha.93 → 12.2.1-alpha.3

package/src/components/ui/tooltip/index.web.tsx

@@ -1,155 +0,0 @@
-'use client';
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
-import { createTooltip } from '@gluestack-ui/tooltip';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { createPortal } from 'react-dom';
-
-const SCOPE = 'TOOLTIP';
-
-const tooltipStyle = tva({
-    base: 'absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-md shadow-sm max-w-xs',
-    variants: {
-        placement: {
-            top: 'bottom-full mb-2',
-            bottom: 'top-full mt-2',
-            left: 'right-full mr-2',
-            right: 'left-full ml-2',
-        },
-    },
-    defaultVariants: {
-        placement: 'top',
-    },
-});
-
-type ITooltipProps = {
-    label: string;
-    children: React.ReactElement;
-    placement?: VariantProps<typeof tooltipStyle>['placement'];
-    className?: string;
-    delay?: number;
-    isOpen?: boolean;
-    onOpen?: () => void;
-    onClose?: () => void;
-};
-
-const Tooltip = forwardRef<HTMLDivElement, ITooltipProps>(
-    (
-        { label, children, placement, className, delay = 0, isOpen: controlledIsOpen, onOpen, onClose, ...props },
-        ref,
-    ) => {
-        const [isOpen, setIsOpen] = useState(controlledIsOpen || false);
-        const [position, setPosition] = useState({ top: 0, left: 0 });
-        const triggerRef = useRef<HTMLDivElement>(null);
-        const tooltipRef = useRef<HTMLDivElement>(null);
-        const timeoutRef = useRef<NodeJS.Timeout>();
-
-        const updatePosition = () => {
-            if (triggerRef.current && tooltipRef.current) {
-                const triggerRect = triggerRef.current.getBoundingClientRect();
-                const tooltipRect = tooltipRef.current.getBoundingClientRect();
-                let top = 0;
-                let left = 0;
-
-                switch (placement) {
-                    case 'top':
-                        top = triggerRect.top - tooltipRect.height - 8;
-                        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
-                        break;
-                    case 'bottom':
-                        top = triggerRect.bottom + 8;
-                        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
-                        break;
-                    case 'left':
-                        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
-                        left = triggerRect.left - tooltipRect.width - 8;
-                        break;
-                    case 'right':
-                        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
-                        left = triggerRect.right + 8;
-                        break;
-                }
-
-                setPosition({ top, left });
-            }
-        };
-
-        const handleOpen = () => {
-            if (delay) {
-                timeoutRef.current = setTimeout(() => {
-                    setIsOpen(true);
-                    if (onOpen) onOpen();
-                }, delay);
-            } else {
-                setIsOpen(true);
-                if (onOpen) onOpen();
-            }
-        };
-
-        const handleClose = () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            setIsOpen(false);
-            if (onClose) onClose();
-        };
-
-        useEffect(() => {
-            if (controlledIsOpen !== undefined) {
-                setIsOpen(controlledIsOpen);
-            }
-        }, [controlledIsOpen]);
-
-        useEffect(() => {
-            if (isOpen) {
-                updatePosition();
-                window.addEventListener('scroll', updatePosition);
-                window.addEventListener('resize', updatePosition);
-            }
-
-            return () => {
-                window.removeEventListener('scroll', updatePosition);
-                window.removeEventListener('resize', updatePosition);
-            };
-        }, [isOpen]);
-
-        const trigger = React.cloneElement(children, {
-            ref: triggerRef,
-            onMouseEnter: handleOpen,
-            onMouseLeave: handleClose,
-            onFocus: handleOpen,
-            onBlur: handleClose,
-            'aria-describedby': isOpen ? 'tooltip' : undefined,
-        });
-
-        return (
-            <>
-                {trigger}
-                {isOpen &&
-                    createPortal(
-                        <div
-                            ref={tooltipRef}
-                            id="tooltip"
-                            role="tooltip"
-                            className={tooltipStyle({ placement, class: className })}
-                            style={{
-                                position: 'fixed',
-                                top: `${position.top}px`,
-                                left: `${position.left}px`,
-                            }}
-                            {...props}
-                        >
-                            {label}
-                        </div>,
-                        document.body,
-                    )}
-            </>
-        );
-    },
-);
-
-Tooltip.displayName = 'Tooltip';
-
-export { Tooltip };

package/src/components/ui/utils/use-break-point-value.ts

@@ -1,79 +0,0 @@
-import { Dimensions, useWindowDimensions } from 'react-native';
-import { useEffect, useState } from 'react';
-
-/** Define your breakpoints manually */
-const screenSize = {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    '2xl': 1536,
-};
-
-type Breakpoints = keyof typeof screenSize | 'default';
-
-type BreakPointValue = Partial<Record<Breakpoints, any>>;
-
-const resolveScreenWidth: Record<string, number> = {
-    default: 0,
-    ...screenSize,
-};
-
-/** Define the proper type including `value` */
-type MediaQueryBreakpoint = {
-    key: string;
-    breakpoint: number;
-    isValid: boolean;
-    value?: any; // Add this property to avoid TypeScript error
-};
-
-export const getBreakPointValue = (values: BreakPointValue, width: number) => {
-    if (typeof values !== 'object') return values;
-
-    let finalBreakPointResolvedValue: any;
-    const mediaQueriesBreakpoints: MediaQueryBreakpoint[] = Object.entries(resolveScreenWidth).map(
-        ([key, breakpoint]) => ({
-            key,
-            breakpoint,
-            isValid: width >= breakpoint,
-            value: undefined, // Initialize `value` property
-        }),
-    );
-
-    mediaQueriesBreakpoints.sort((a, b) => a.breakpoint - b.breakpoint);
-
-    mediaQueriesBreakpoints.forEach((breakpoint, index) => {
-        breakpoint.value = values.hasOwnProperty(breakpoint.key)
-            ? values[breakpoint.key]
-            : mediaQueriesBreakpoints[index - 1]?.value || values.default;
-    });
-
-    const lastValidObject = getLastValidObject(mediaQueriesBreakpoints);
-    finalBreakPointResolvedValue = lastValidObject ? lastValidObject.value : values;
-
-    return finalBreakPointResolvedValue;
-};
-
-export function useBreakpointValue(values: BreakPointValue): any {
-    const { width } = useWindowDimensions();
-    const [currentBreakPointValue, setCurrentBreakPointValue] = useState(getBreakPointValue(values, width));
-
-    useEffect(() => {
-        setCurrentBreakPointValue(getBreakPointValue(values, width));
-    }, [values, width]);
-
-    return typeof values !== 'object' ? values : currentBreakPointValue;
-}
-
-export function isValidBreakpoint(breakPointWidth: number, width: number = Dimensions.get('window').width) {
-    return width >= breakPointWidth;
-}
-
-function getLastValidObject(mediaQueries: MediaQueryBreakpoint[]) {
-    for (let i = mediaQueries.length - 1; i >= 0; i--) {
-        if (mediaQueries[i].isValid) {
-            return mediaQueries[i];
-        }
-    }
-    return null;
-}

package/src/components/ui/view/index.tsx

@@ -1,2 +0,0 @@
-'use client';
-export { View } from 'react-native';

package/src/components/ui/view/index.web.tsx

@@ -1,15 +0,0 @@
-'use client';
-
-import React from 'react';
-
-export const View = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ children, style, ...props }, ref) => {
-        return (
-            <div ref={ref} style={style} {...props}>
-                {children}
-            </div>
-        );
-    },
-);
-
-View.displayName = 'View';

package/src/components/ui/virtualized-list/index.tsx

@@ -1,2 +0,0 @@
-'use client';
-export { VirtualizedList } from 'react-native';

package/src/components/ui/virtualized-list/index.web.tsx

@@ -1,84 +0,0 @@
-'use client';
-import React, { forwardRef } from 'react';
-import { FixedSizeList, ListChildComponentProps } from 'react-window';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
-import { cssInterop } from 'nativewind';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-const virtualizedListStyle = tva({
-    base: 'overflow-auto',
-    variants: {
-        horizontal: {
-            true: 'flex-row',
-            false: 'flex-col',
-        },
-    },
-    defaultVariants: {
-        horizontal: false,
-    },
-});
-
-interface VirtualizedListProps<T> {
-    data: ReadonlyArray<T>;
-    renderItem: ({ item, index }: { item: T; index: number }) => React.ReactElement;
-    itemSize: number;
-    horizontal?: boolean;
-    className?: string;
-    height: number;
-    width: number;
-    overscanCount?: number;
-}
-
-interface ItemData<T> {
-    data: ReadonlyArray<T>;
-    renderItem: ({ item, index }: { item: T; index: number }) => React.ReactElement;
-}
-
-function VirtualizedListComponent<T>(
-    {
-        data,
-        renderItem,
-        itemSize,
-        horizontal = false,
-        className,
-        height,
-        width,
-        overscanCount = 2,
-        ...props
-    }: VirtualizedListProps<T>,
-    ref: React.Ref<FixedSizeList>,
-) {
-    const itemData: ItemData<T> = {
-        data,
-        renderItem,
-    };
-
-    const Row = ({ index, style }: ListChildComponentProps) => {
-        const item = data[index];
-        return <div style={style}>{renderItem({ item, index })}</div>;
-    };
-
-    return (
-        <FixedSizeList
-            outerRef={ref}
-            className={virtualizedListStyle({ horizontal, class: className })}
-            height={height}
-            width={width}
-            itemCount={data.length}
-            itemSize={itemSize}
-            layout={horizontal ? 'horizontal' : 'vertical'}
-            overscanCount={overscanCount}
-            itemData={itemData}
-            {...props}
-        >
-            {Row}
-        </FixedSizeList>
-    );
-}
-
-const VirtualizedList = React.forwardRef(VirtualizedListComponent) as <T>(
-    props: VirtualizedListProps<T> & { ref?: React.Ref<FixedSizeList> },
-) => React.ReactElement;
-
-export { VirtualizedList };

package/src/components/ui/vstack/index.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { View } from 'react-native';
-
-import { vstackStyle } from './styles';
-
-type IVStackProps = React.ComponentProps<typeof View> & VariantProps<typeof vstackStyle>;
-
-const VStack = React.forwardRef<React.ElementRef<typeof View>, IVStackProps>(
-    ({ className, space, reversed, ...props }, ref) => {
-        return <View className={vstackStyle({ space, reversed, class: className })} {...props} ref={ref} />;
-    },
-);
-
-VStack.displayName = 'VStack';
-
-export { VStack };

package/src/components/ui/vstack/index.web.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-import { vstackStyle } from './styles';
-
-type IVStackProps = React.ComponentProps<'div'> & VariantProps<typeof vstackStyle>;
-
-const VStack = React.forwardRef<React.ElementRef<'div'>, IVStackProps>(
-    ({ className, space, reversed, ...props }, ref) => {
-        return <div className={vstackStyle({ space, reversed, class: className })} {...props} ref={ref} />;
-    },
-);
-
-VStack.displayName = 'VStack';
-
-export { VStack };

package/src/components/ui/vstack/styles.tsx

@@ -1,25 +0,0 @@
-import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-
-const baseStyle = isWeb
-    ? 'flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none'
-    : '';
-
-export const vstackStyle = tva({
-    base: `flex-col ${baseStyle}`,
-    variants: {
-        space: {
-            xs: 'gap-1',
-            sm: 'gap-2',
-            md: 'gap-3',
-            lg: 'gap-4',
-            xl: 'gap-5',
-            '2xl': 'gap-6',
-            '3xl': 'gap-7',
-            '4xl': 'gap-8',
-        },
-        reversed: {
-            true: 'flex-col-reverse',
-        },
-    },
-});

package/src/global.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/gluestack-ui-base-config.js

@@ -1,12 +0,0 @@
-// gluestack-ui-base.config.js
-
-module.exports = {
-    tailwind: {
-        config: 'tailwind-base-config.js',
-        css: './global.css',
-    },
-    app: {
-        entry: 'index.js',
-        components: './components/ui',
-    },
-};

package/src/gluestack-ui.config.json

@@ -1,10 +0,0 @@
-{
-    "tailwind": {
-        "config": "tailwind.config.js",
-        "css": "./global.css"
-    },
-    "app": {
-        "entry": "index.js",
-        "components": "./components/ui"
-    }
-}

package/src/nativewind-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="nativewind/types" />

package/src/tailwind-base-config.js

@@ -1,197 +0,0 @@
-// import gluestackPlugin from '@gluestack-ui/nativewind-utils/tailwind-plugin';
-const gluestackPlugin = require('@gluestack-ui/nativewind-utils/tailwind-plugin');
-module.exports = {
-    darkMode: 'media',
-    content: ['./index.js', './components/**/*.{tsx,jsx,ts,js}'],
-    presets: [require('nativewind/preset')],
-    safelist: [
-        {
-            pattern:
-                /(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/,
-        },
-    ],
-    theme: {
-        extend: {
-            colors: {
-                primary: {
-                    0: 'rgb(var(--color-primary-0)/<alpha-value>)',
-                    50: 'rgb(var(--color-primary-50)/<alpha-value>)',
-                    100: 'rgb(var(--color-primary-100)/<alpha-value>)',
-                    200: 'rgb(var(--color-primary-200)/<alpha-value>)',
-                    300: 'rgb(var(--color-primary-300)/<alpha-value>)',
-                    400: 'rgb(var(--color-primary-400)/<alpha-value>)',
-                    500: 'rgb(var(--color-primary-500)/<alpha-value>)',
-                    600: 'rgb(var(--color-primary-600)/<alpha-value>)',
-                    700: 'rgb(var(--color-primary-700)/<alpha-value>)',
-                    800: 'rgb(var(--color-primary-800)/<alpha-value>)',
-                    900: 'rgb(var(--color-primary-900)/<alpha-value>)',
-                    950: 'rgb(var(--color-primary-950)/<alpha-value>)',
-                },
-                secondary: {
-                    0: 'rgb(var(--color-secondary-0)/<alpha-value>)',
-                    50: 'rgb(var(--color-secondary-50)/<alpha-value>)',
-                    100: 'rgb(var(--color-secondary-100)/<alpha-value>)',
-                    200: 'rgb(var(--color-secondary-200)/<alpha-value>)',
-                    300: 'rgb(var(--color-secondary-300)/<alpha-value>)',
-                    400: 'rgb(var(--color-secondary-400)/<alpha-value>)',
-                    500: 'rgb(var(--color-secondary-500)/<alpha-value>)',
-                    600: 'rgb(var(--color-secondary-600)/<alpha-value>)',
-                    700: 'rgb(var(--color-secondary-700)/<alpha-value>)',
-                    800: 'rgb(var(--color-secondary-800)/<alpha-value>)',
-                    900: 'rgb(var(--color-secondary-900)/<alpha-value>)',
-                    950: 'rgb(var(--color-secondary-950)/<alpha-value>)',
-                },
-                tertiary: {
-                    50: 'rgb(var(--color-tertiary-50)/<alpha-value>)',
-                    100: 'rgb(var(--color-tertiary-100)/<alpha-value>)',
-                    200: 'rgb(var(--color-tertiary-200)/<alpha-value>)',
-                    300: 'rgb(var(--color-tertiary-300)/<alpha-value>)',
-                    400: 'rgb(var(--color-tertiary-400)/<alpha-value>)',
-                    500: 'rgb(var(--color-tertiary-500)/<alpha-value>)',
-                    600: 'rgb(var(--color-tertiary-600)/<alpha-value>)',
-                    700: 'rgb(var(--color-tertiary-700)/<alpha-value>)',
-                    800: 'rgb(var(--color-tertiary-800)/<alpha-value>)',
-                    900: 'rgb(var(--color-tertiary-900)/<alpha-value>)',
-                    950: 'rgb(var(--color-tertiary-950)/<alpha-value>)',
-                },
-                error: {
-                    0: 'rgb(var(--color-error-0)/<alpha-value>)',
-                    50: 'rgb(var(--color-error-50)/<alpha-value>)',
-                    100: 'rgb(var(--color-error-100)/<alpha-value>)',
-                    200: 'rgb(var(--color-error-200)/<alpha-value>)',
-                    300: 'rgb(var(--color-error-300)/<alpha-value>)',
-                    400: 'rgb(var(--color-error-400)/<alpha-value>)',
-                    500: 'rgb(var(--color-error-500)/<alpha-value>)',
-                    600: 'rgb(var(--color-error-600)/<alpha-value>)',
-                    700: 'rgb(var(--color-error-700)/<alpha-value>)',
-                    800: 'rgb(var(--color-error-800)/<alpha-value>)',
-                    900: 'rgb(var(--color-error-900)/<alpha-value>)',
-                    950: 'rgb(var(--color-error-950)/<alpha-value>)',
-                },
-                success: {
-                    0: 'rgb(var(--color-success-0)/<alpha-value>)',
-                    50: 'rgb(var(--color-success-50)/<alpha-value>)',
-                    100: 'rgb(var(--color-success-100)/<alpha-value>)',
-                    200: 'rgb(var(--color-success-200)/<alpha-value>)',
-                    300: 'rgb(var(--color-success-300)/<alpha-value>)',
-                    400: 'rgb(var(--color-success-400)/<alpha-value>)',
-                    500: 'rgb(var(--color-success-500)/<alpha-value>)',
-                    600: 'rgb(var(--color-success-600)/<alpha-value>)',
-                    700: 'rgb(var(--color-success-700)/<alpha-value>)',
-                    800: 'rgb(var(--color-success-800)/<alpha-value>)',
-                    900: 'rgb(var(--color-success-900)/<alpha-value>)',
-                    950: 'rgb(var(--color-success-950)/<alpha-value>)',
-                },
-                warning: {
-                    0: 'rgb(var(--color-warning-0)/<alpha-value>)',
-                    50: 'rgb(var(--color-warning-50)/<alpha-value>)',
-                    100: 'rgb(var(--color-warning-100)/<alpha-value>)',
-                    200: 'rgb(var(--color-warning-200)/<alpha-value>)',
-                    300: 'rgb(var(--color-warning-300)/<alpha-value>)',
-                    400: 'rgb(var(--color-warning-400)/<alpha-value>)',
-                    500: 'rgb(var(--color-warning-500)/<alpha-value>)',
-                    600: 'rgb(var(--color-warning-600)/<alpha-value>)',
-                    700: 'rgb(var(--color-warning-700)/<alpha-value>)',
-                    800: 'rgb(var(--color-warning-800)/<alpha-value>)',
-                    900: 'rgb(var(--color-warning-900)/<alpha-value>)',
-                    950: 'rgb(var(--color-warning-950)/<alpha-value>)',
-                },
-                info: {
-                    0: 'rgb(var(--color-info-0)/<alpha-value>)',
-                    50: 'rgb(var(--color-info-50)/<alpha-value>)',
-                    100: 'rgb(var(--color-info-100)/<alpha-value>)',
-                    200: 'rgb(var(--color-info-200)/<alpha-value>)',
-                    300: 'rgb(var(--color-info-300)/<alpha-value>)',
-                    400: 'rgb(var(--color-info-400)/<alpha-value>)',
-                    500: 'rgb(var(--color-info-500)/<alpha-value>)',
-                    600: 'rgb(var(--color-info-600)/<alpha-value>)',
-                    700: 'rgb(var(--color-info-700)/<alpha-value>)',
-                    800: 'rgb(var(--color-info-800)/<alpha-value>)',
-                    900: 'rgb(var(--color-info-900)/<alpha-value>)',
-                    950: 'rgb(var(--color-info-950)/<alpha-value>)',
-                },
-                typography: {
-                    0: 'rgb(var(--color-typography-0)/<alpha-value>)',
-                    50: 'rgb(var(--color-typography-50)/<alpha-value>)',
-                    100: 'rgb(var(--color-typography-100)/<alpha-value>)',
-                    200: 'rgb(var(--color-typography-200)/<alpha-value>)',
-                    300: 'rgb(var(--color-typography-300)/<alpha-value>)',
-                    400: 'rgb(var(--color-typography-400)/<alpha-value>)',
-                    500: 'rgb(var(--color-typography-500)/<alpha-value>)',
-                    600: 'rgb(var(--color-typography-600)/<alpha-value>)',
-                    700: 'rgb(var(--color-typography-700)/<alpha-value>)',
-                    800: 'rgb(var(--color-typography-800)/<alpha-value>)',
-                    900: 'rgb(var(--color-typography-900)/<alpha-value>)',
-                    950: 'rgb(var(--color-typography-950)/<alpha-value>)',
-                    white: '#FFFFFF',
-                    gray: '#D4D4D4',
-                    black: '#181718',
-                },
-                outline: {
-                    0: 'rgb(var(--color-outline-0)/<alpha-value>)',
-                    50: 'rgb(var(--color-outline-50)/<alpha-value>)',
-                    100: 'rgb(var(--color-outline-100)/<alpha-value>)',
-                    200: 'rgb(var(--color-outline-200)/<alpha-value>)',
-                    300: 'rgb(var(--color-outline-300)/<alpha-value>)',
-                    400: 'rgb(var(--color-outline-400)/<alpha-value>)',
-                    500: 'rgb(var(--color-outline-500)/<alpha-value>)',
-                    600: 'rgb(var(--color-outline-600)/<alpha-value>)',
-                    700: 'rgb(var(--color-outline-700)/<alpha-value>)',
-                    800: 'rgb(var(--color-outline-800)/<alpha-value>)',
-                    900: 'rgb(var(--color-outline-900)/<alpha-value>)',
-                    950: 'rgb(var(--color-outline-950)/<alpha-value>)',
-                },
-                background: {
-                    0: 'rgb(var(--color-background-0)/<alpha-value>)',
-                    50: 'rgb(var(--color-background-50)/<alpha-value>)',
-                    100: 'rgb(var(--color-background-100)/<alpha-value>)',
-                    200: 'rgb(var(--color-background-200)/<alpha-value>)',
-                    300: 'rgb(var(--color-background-300)/<alpha-value>)',
-                    400: 'rgb(var(--color-background-400)/<alpha-value>)',
-                    500: 'rgb(var(--color-background-500)/<alpha-value>)',
-                    600: 'rgb(var(--color-background-600)/<alpha-value>)',
-                    700: 'rgb(var(--color-background-700)/<alpha-value>)',
-                    800: 'rgb(var(--color-background-800)/<alpha-value>)',
-                    900: 'rgb(var(--color-background-900)/<alpha-value>)',
-                    950: 'rgb(var(--color-background-950)/<alpha-value>)',
-                    error: 'rgb(var(--color-background-error)/<alpha-value>)',
-                    warning: 'rgb(var(--color-background-warning)/<alpha-value>)',
-                    muted: 'rgb(var(--color-background-muted)/<alpha-value>)',
-                    success: 'rgb(var(--color-background-success)/<alpha-value>)',
-                    info: 'rgb(var(--color-background-info)/<alpha-value>)',
-                    light: '#FBFBFB',
-                    dark: '#181719',
-                },
-                indicator: {
-                    primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)',
-                    info: 'rgb(var(--color-indicator-info)/<alpha-value>)',
-                    error: 'rgb(var(--color-indicator-error)/<alpha-value>)',
-                },
-            },
-            fontFamily: {
-                heading: undefined,
-                body: undefined,
-                mono: undefined,
-                roboto: ['Roboto', 'sans-serif'],
-            },
-            fontWeight: {
-                extrablack: '950',
-            },
-            fontSize: {
-                '2xs': '10px',
-            },
-            boxShadow: {
-                'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
-                'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
-                'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
-                'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
-                'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
-                'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
-                'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
-                'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
-                'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
-            },
-        },
-    },
-    plugins: [gluestackPlugin],
-};