@nexara/nativeflow 0.1.1

package/src/components/UserInput/UserInput.tsx

@@ -0,0 +1,124 @@
+import { forwardRef, useMemo } from 'react';
+import { TextInput, StyleSheet } from 'react-native';
+import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
+import { useTheme } from '../../hooks';
+import { StyledText, StyledView } from '../StyledComponents';
+import type { UserInputProps } from '../../types';
+import generateColors from './generateColors';
+
+const UserInput = forwardRef<TextInput, UserInputProps>(({
+    variant = 'standard',
+    label,
+    bg,
+    br = 10,
+    stroke = 1,
+    labelColor,
+    textVariant = {
+        label: 'h5',
+        helperText: 'h6',
+    },
+    inputTextColor,
+    strokeColor,
+    cursorColor,
+    placeholderColor,
+    inputFs = 13,
+    labelFs,
+    helperTextFS,
+    placeholder = 'Please enter...',
+    disabled = false,
+    isError = false,
+    helperText = '',
+    multiline = false,
+    renderLeftIcon,
+    renderRightIcon,
+    styles,
+    ...props
+}, ref) => {
+
+    const theme: any = useTheme();
+
+    const {
+        computedCursorColor,
+        computedPlaceholderColor,
+        computedLabelColor
+    } = useMemo(() => generateColors(theme, isError, cursorColor, placeholderColor, labelColor), [theme, isError, cursorColor, placeholderColor, labelColor]);
+
+    const STYLES = StyleSheet.create({
+        INPUT_CONT: {
+            flexDirection: 'row',
+            alignItems: multiline ? 'flex-start' : 'center',
+            backgroundColor: disabled ? theme.colors.disable : bg ?? theme.colors.inputBgColor,
+            borderColor: isError ? theme.colors.error : strokeColor ?? theme.colors.outline,
+            borderWidth: variant === 'standard' ? 0 : stroke,
+            borderBottomWidth: stroke,
+            paddingHorizontal: horizontalScale(14),
+            borderRadius: verticalScale(br),
+            gap: horizontalScale(10),
+            height: multiline ? 'auto' : verticalScale(48),
+            paddingVertical: multiline ? horizontalScale(10) : 'auto',
+        },
+        INPUT: {
+            color: disabled ? theme.colors.textDisable : isError ? theme.colors.error : inputTextColor ?? theme.colors.textPrimary,
+            fontSize: responsiveFontSize(inputFs),
+            textAlignVertical: multiline ? 'top' : 'center',
+            minHeight: multiline ? 100 : 'auto',
+            maxHeight: multiline ? 150 : 'auto',
+            padding: 0,
+            flex: 1,
+        },
+        ERROR_HELPER_TEXT: {
+            color: theme.colors.error,
+            paddingHorizontal: 5
+        }
+    });
+
+    return (<>
+        <StyledView gap={verticalScale(5)} style={styles?.mainContainer}>
+            {
+                label &&
+                <StyledText variant={textVariant?.label} fs={labelFs} color={computedLabelColor} style={styles?.label}>{label}</StyledText>
+            }
+            <StyledView
+                style={[STYLES.INPUT_CONT, styles?.inputContainer]}
+            >
+                {
+                    renderLeftIcon
+                }
+                <TextInput
+                    ref={ref}
+                    style={[STYLES.INPUT, styles?.input]}
+                    placeholder={placeholder}
+                    placeholderTextColor={computedPlaceholderColor}
+                    editable={!disabled}
+                    multiline={multiline}
+                    cursorColor={computedCursorColor}
+                    {...props}
+                />
+                {
+                    renderRightIcon
+                }
+            </StyledView>
+            {
+                (isError && helperText) &&
+                <StyledText variant={textVariant?.helperText} fs={helperTextFS} style={[STYLES.ERROR_HELPER_TEXT, styles?.helperText]}>{helperText}</StyledText>
+            }
+        </StyledView>
+    </>)
+});
+export default UserInput;
+export type { UserInputProps };
+
+// const STYLES = StyleSheet.create({
+//     INPUT_CONT: {
+//         flexDirection: 'row',
+//         paddingHorizontal: horizontalScale(14),
+//         gap: horizontalScale(10),
+//     },
+//     INPUT: {
+//         padding: 0,
+//         flex: 1,
+//     },
+//     ERROR_HELPER_TEXT: {
+//         paddingHorizontal: 5
+//     }
+// });

package/src/components/UserInput/UserInputV2.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { TextInputProps, ViewStyle, TextStyle } from "react-native";
+import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
+import { useTheme } from '../../hooks';
+import { StyledText } from '../StyledComponents';
+
+
+type UserInputV2Props = TextInputProps & {
+    variant?: 'outlined' | 'standard' | 'filled';
+    label?: string;
+    bg?: string;
+    br?: number;
+    stroke?: number;
+    labelColor?: string;
+    textColor?: string;
+    strokeColor?: string;
+    cursorColor?: string;
+    placeholderTextColor?: string;
+    fs?: number;
+    labelFs?: number;
+    placeholder?: string;
+    isError?: boolean;
+    isDisabled?: boolean;
+    multiline?: boolean;
+    renderLeftIcon?: () => JSX.Element;
+    renderRightIcon?: () => JSX.Element;
+    inputContStyle?: ViewStyle | ViewStyle[];
+    inputStyle?: TextStyle | TextStyle[];
+    containerStyle?: ViewStyle | ViewStyle[];
+    labelStyle?: TextStyle | TextStyle[];
+}
+
+
+const UserInputV2: React.FC<UserInputV2Props> = ({
+    variant = 'outlined',
+    // label,
+    bg = 'transparent',
+    br = 5,
+    stroke = 1,
+    labelColor,
+    textColor,
+    strokeColor,
+    // cursorColor,
+    // placeholderTextColor,
+    fs = 12,
+    labelFs = 12,
+    // placeholder = 'Enter Your...',
+    isDisabled = false,
+    isError,
+    multiline = false,
+    renderLeftIcon,
+    renderRightIcon,
+    inputContStyle,
+    // inputStyle,
+    containerStyle,
+    // labelStyle,/
+}) => {
+
+    const theme: any = useTheme();
+
+    // const cursor = isError ? theme.colors.error : cursorColor ?? theme.colors.cursorColor;
+    // const placeholderColor = placeholderTextColor ?? theme.colors.placeholderColor
+
+    const STYLES = StyleSheet.create({
+        INPUT: {
+            color: isDisabled ? theme.colors.textDisable : isError ? theme.colors.error : textColor ?? theme.colors.textPrimary,
+            fontSize: responsiveFontSize(fs),
+            textAlignVertical: multiline ? 'top' : 'center',
+            padding: 0
+        },
+        LABEL: {
+            color: isError ? theme.colors.error : labelColor ?? theme.colors.textPrimary,
+            fontSize: responsiveFontSize(labelFs),
+            fontWeight: 'bold'
+        },
+        INPUT_CONT: {
+            flexDirection: 'row',
+            alignItems: multiline ? 'flex-start' : 'center',
+            borderColor: isError ? theme.colors.error : strokeColor ?? theme.colors.outline,
+            height: multiline ? 'auto' : verticalScale(45),
+            backgroundColor: isDisabled ? theme.colors.disable : bg ?? 'transparent',
+            borderWidth: variant === 'standard' ? 0 : stroke,
+            borderBottomWidth: stroke,
+            paddingHorizontal: horizontalScale(15),
+            paddingVertical: multiline ? verticalScale(10) : 0,
+            borderRadius: verticalScale(br),
+            gap: horizontalScale(15),
+        },
+    });
+    const viewProps = {
+        gap: verticalScale(4),
+        ...containerStyle
+    };
+    return (<>
+        <View {...viewProps}>
+            {/* {
+                label &&
+                <View>
+                    <Text style={{ ...STYLES.LABEL, ...labelStyle }}>{label}</Text>
+                </View>
+            } */}
+            <View
+                style={{ ...STYLES.INPUT_CONT, ...inputContStyle }}
+            >
+                {
+                    renderLeftIcon && renderLeftIcon()
+                }
+                <View
+                    style={{ flex: 1, alignSelf: 'center' }}
+                >
+                    {/* <TextInput
+                        style={{ ...STYLES.INPUT, ...inputStyle }}
+                        placeholder={placeholder}
+                        placeholderTextColor={placeholderColor}
+                        editable={!isDisabled}
+                        multiline={multiline}
+                        cursorColor={cursor}
+                        {...props}
+                    /> */}
+                    <StyledText>Email</StyledText>
+                </View>
+                {
+                    renderRightIcon && renderRightIcon()
+                }
+            </View>
+        </View>
+    </>)
+}
+export default UserInputV2;
+export type { UserInputV2Props };
+

package/src/components/UserInput/generateColors.ts

@@ -0,0 +1,14 @@
+import type { ThemeTypes } from "../../types";
+
+
+const generateColors = (theme: ThemeTypes, isError: boolean, cursorColor?: string, placeholderColor?: string, labelColor?: string) => {
+    const computedCursorColor = isError ? theme.colors.error : (cursorColor ?? theme.colors.cursorColor);
+    const computedPlaceholderColor = placeholderColor ?? theme.colors.placeholderColor;
+    const computedLabelColor = isError ? theme.colors.error : labelColor ?? theme.colors.textTertiary;
+    return {
+        computedCursorColor,
+        computedPlaceholderColor,
+        computedLabelColor
+    }
+}
+export default generateColors;

package/src/constants/breakPoints.ts

@@ -0,0 +1,18 @@
+type BreakPointsType = {
+    xs: number,
+    sm: number,
+    md: number,
+    lg: number,
+    xl: number,
+}
+
+const BreakPoints: BreakPointsType = {
+    xs: 0,
+    sm: 360,
+    md: 600,
+    lg: 768,
+    xl: 960
+}
+
+export default BreakPoints;
+export type { BreakPointsType };

package/src/constants/dialogSizes.ts

@@ -0,0 +1,12 @@
+import type { dialogSizesTypes } from "../types/common.type";
+
+
+const dialogSizes: dialogSizesTypes = {
+    xs: 60,
+    sm: 70,
+    md: 80,
+    lg: 90,
+    full: 100
+};
+
+export default dialogSizes;

package/src/constants/index.ts

@@ -0,0 +1,3 @@
+export { default as dialogSizes } from './dialogSizes';
+export { default as typographySizes } from './typographySizes';
+export { default as BreakPoints } from './breakPoints';

package/src/constants/theme.ts

@@ -0,0 +1,33 @@
+type DefaultThemeType = {
+    THEME_PRIMARY_COLOR: string;
+    THEME_SECONDARY_COLOR: string;
+    TEXT_PRIMARY_COLOR: string;
+    TEXT_SECONDARY_COLOR: string;
+    TEXT_TARTARY_COLOR: string;
+    INPUT_BACKGROUND_COLOR: string;
+    INPUT_STROKE_COLOR: string;
+    INPUT_PLACEHOLDER_COLOR: string;
+    DISABLE: string;
+    DANGER: string;
+    SUCCESS: string;
+    WARNING: string;
+}
+
+export const DefaultTheme: DefaultThemeType = {
+    THEME_PRIMARY_COLOR: '#fff',
+    THEME_SECONDARY_COLOR: '#000',
+    TEXT_PRIMARY_COLOR: '#000',
+    TEXT_SECONDARY_COLOR: '#64748B',
+    TEXT_TARTARY_COLOR: '#fff',
+    INPUT_BACKGROUND_COLOR: '#fff',
+    INPUT_STROKE_COLOR: '#cbd5e1',
+    INPUT_PLACEHOLDER_COLOR: '#D3D3D3',
+    DISABLE: '#8080805e',
+    DANGER: '#ED2939',
+    SUCCESS: '#32CD32',
+    WARNING: '#ffbf00',
+
+
+
+
+}

package/src/constants/typographySizes.ts

@@ -0,0 +1,22 @@
+type typographySizeTypes = {
+    h1: number,
+    h2: number,
+    h3: number,
+    h4: number,
+    h6: number,
+    h5: number,
+    h7: number,
+}
+
+const typographySizes: typographySizeTypes = {
+    h1: 32,
+    h2: 24,
+    h3: 18,
+    h4: 16,
+    h5: 14,
+    h6: 12,
+    h7: 10,
+}
+
+export default typographySizes;
+export type { typographySizeTypes };

package/src/helpers/CalculateGridSize.ts

@@ -0,0 +1,26 @@
+import deviceScreenSizeCategory from './DeviceSizeCategory';
+
+interface DeviceCategory {
+    size: string;
+    value: number;
+}
+
+const getGridValue = (propsSizeObj: Record<string, number>, windowWidth: number | undefined) => {
+    const propsSizeArray: [string, number][] = Object.entries(propsSizeObj);
+    let screenSizeCategory: DeviceCategory = deviceScreenSizeCategory(windowWidth);
+    let gridValue: number = 0;
+    if (!propsSizeObj[screenSizeCategory.size]) {
+        const arrIndex = propsSizeArray.findIndex(([size]) => size === screenSizeCategory.size);
+        for (let index = arrIndex - 1; index >= 0; index--) {
+            if (propsSizeArray[index]?.[1]) {
+                gridValue = propsSizeArray[index]?.[1] as number;
+                break;
+            }
+        }
+    } else {
+        gridValue = propsSizeObj[screenSizeCategory.size] as number;
+    }
+    return gridValue;
+}
+
+export default getGridValue;

package/src/helpers/DeviceSizeCategory.ts

@@ -0,0 +1,22 @@
+import { Dimensions } from "react-native";
+import { BreakPoints } from "../constants";
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+interface DeviceCategory {
+    size: string;
+    value: number;
+}
+
+const deviceScreenSizeCategory = (windowWidth: number = SCREEN_WIDTH): DeviceCategory => {
+    if (windowWidth >= BreakPoints.xl) {
+        return { size: 'xl', value: BreakPoints.xl };
+    } else if (windowWidth >= BreakPoints.lg) {
+        return { size: 'lg', value: BreakPoints.xl };
+    } else if (windowWidth >= BreakPoints.md) {
+        return { size: 'md', value: BreakPoints.md };
+    } else if (windowWidth >= BreakPoints.sm) {
+        return { size: 'sm', value: BreakPoints.sm };
+    }
+    return { size: 'xs', value: BreakPoints.xs };
+}
+export default deviceScreenSizeCategory;

package/src/helpers/LightenColorShades.ts

@@ -0,0 +1,7 @@
+const LightenColorShades = (hex:string, amount: number)=> {
+    let r = Math.min(255, parseInt(hex.slice(1, 3), 16) + amount);
+    let g = Math.min(255, parseInt(hex.slice(3, 5), 16) + amount);
+    let b = Math.min(255, parseInt(hex.slice(5, 7), 16) + amount);
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+}
+export default LightenColorShades;

package/src/helpers/ResponsiveCalculations.ts

@@ -0,0 +1,78 @@
+import { Dimensions, PixelRatio } from 'react-native';
+// import { useResponsive } from '../hooks';
+
+
+const {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+} = Dimensions.get('window');
+
+// const isResponsive = useResponsive();
+const isResponsive = true;
+const guidelineBaseWidth = 350;
+const guidelineBaseHeight = 680;
+const [shortDimension, longDimension] = SCREEN_WIDTH < SCREEN_HEIGHT ? [SCREEN_WIDTH, SCREEN_HEIGHT] : [SCREEN_HEIGHT, SCREEN_WIDTH];
+
+
+const checkIsPhone = (size: number): number => {
+    if (SCREEN_WIDTH <= 430 && SCREEN_WIDTH >= 375) {
+        return size;
+    }
+    return 0;
+}
+export const horizontalScale = (size: number): number => {
+    if (checkIsPhone(size)) {
+        return size;
+    }
+    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
+    let scale = (shortDimension / guidelineBaseHeight);
+    scale = 1 + (scale - 1) * slowDownRate;
+    let adjustedSize = size * Math.max(scale, 0.80);
+    return Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+}
+
+
+export const verticalScale = (size: number): number => {
+    if (checkIsPhone(size)) {
+        return size;
+    }
+    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
+    let scale = (longDimension / guidelineBaseHeight);
+    scale = 1 + (scale - 1) * slowDownRate;
+    let adjustedSize = size * Math.max(scale, 0.80);
+    return Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+}
+
+
+export const moderateScale = (size: number, factor = 0.5): number => {
+    if (isResponsive) {
+        return size + ((shortDimension / guidelineBaseWidth * size) - size) * factor;
+    } else {
+        return size + factor + 1;
+    }
+}
+export const moderateVerticalScale = (size: number, factor = 0.5): number => {
+    if (isResponsive) {
+        return size + (longDimension / guidelineBaseHeight * size) * factor;
+    } else {
+        return size + factor + 5;
+    }
+}
+
+export const responsiveFontSize = (fontSize: number): number => {
+    if (checkIsPhone(fontSize)) {
+        return fontSize;
+    }
+    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20
+    const screenDiagonal = Math.sqrt(SCREEN_WIDTH ** 2 + SCREEN_HEIGHT ** 2);
+    const baseScreenDiagonal = Math.sqrt(360 ** 2 + 640 ** 2);
+    let scale = screenDiagonal / baseScreenDiagonal;
+    scale = 1 + (scale - 1) * slowDownRate;
+    let adjustedFontSize = fontSize * Math.max(scale, 0.85);
+    return Math.floor(PixelRatio.roundToNearestPixel(adjustedFontSize))
+};
+
+
+
+
+

package/src/helpers/index.ts

@@ -0,0 +1,2 @@
+export { default as getGridValue } from './CalculateGridSize';
+export { default as deviceScreenSizeCategory } from './DeviceSizeCategory';

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { default as useTheme } from './useTheme';
+export { default as useResponsive } from './useResponsive';
+export { default as useColorScheme } from './useColorScheme';
+export { default as useConditionalWindowDimension } from './useConditionalWindowDimension';

package/src/hooks/useColorScheme.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { Context } from '../components/Provider/NativeProvider';
+
+const useColorScheme = () => {
+    const context = useContext(Context)?.mode;
+    if (!context) {
+        throw new Error('useColorScheme must be used within a NativeProvider');
+    }
+    return context;
+};
+
+export default useColorScheme;

package/src/hooks/useConditionalWindowDimension.tsx

@@ -0,0 +1,7 @@
+import { useWindowDimensions } from "react-native";
+
+const useConditionalWindowDimension = (isTrackDimension: boolean): { width: number | undefined; height: number | undefined } => {
+    return isTrackDimension ? useWindowDimensions() : { width: undefined, height: undefined }
+}
+
+export default useConditionalWindowDimension;

package/src/hooks/useResponsive.tsx

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { Context } from '../components/Provider/NativeProvider';
+
+const useResponsive = () => useContext(Context)?.isResponsive;
+
+export default useResponsive;

package/src/hooks/useTheme.tsx

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { Context } from '../components/Provider/NativeProvider';
+
+
+const useTheme = (isTrackTheme: boolean = true) => {
+    const context = isTrackTheme ? useContext(Context)?.theme : undefined;
+    if (isTrackTheme && !context) {
+        throw new Error('Ensure that your code is wrapped with NativeProvider in App.js, and make sure you are not using the useTheme hook outside of the NativeProvider.');
+    }
+    return context;
+};
+
+export default useTheme;

package/src/index.ts

@@ -0,0 +1,52 @@
+export { default as Header } from './components/Header/Header';
+export { default as Chip } from './components/Chip/Chip';
+export { default as Button } from './components/Button/Button';
+export { default as Stack } from './components/Stack';
+export { StyledText, StyledView } from './components/StyledComponents';
+export { default as UserInput } from './components/UserInput/UserInput';
+export { default as NativeProvider } from './components/Provider/NativeProvider';
+export { horizontalScale, moderateScale, moderateVerticalScale, verticalScale } from './helpers/ResponsiveCalculations';
+export { default as Grid } from './components/Grid/Grid';
+export { default as Progress } from './components/Progress/Progress';
+export { default as Slider } from './components/Slider/Slider';
+export { default as Surface } from './components/Surface/Surface';
+export { default as Switch } from './components/Switch/Switch';
+export { default as TouchableRipple } from './components/TouchableRipple/TouchableRipple';
+export { Dialog, DialogHead, DialogBody, DialogFoot, DialogDescription } from './components/Dialog';
+export { default as CheckBox } from './components/CheckBox/CheckBox';
+export { default as Avatar } from './components/Avatar';
+export { default as Divider } from './components/Divider/Divider';
+export { Menu, MenuItem, MenuItemLabel } from './components/Menu';
+export { default as IconButton } from './components/IconButton/IconButton';
+export { default as Icon } from './components/Icon/Icon';
+export { default as PortalProvider } from './components/Portal/PortalProvider';
+export { default as Link } from './components/Link/Link';
+
+export { default as LightTheme } from './themes/LightTheme';
+export { default as DarkTheme } from './themes/DarkTheme';
+// export { default as createTheme } from './themes/createTheme';
+export { useColorScheme, useTheme } from './hooks';
+
+
+export type { HeaderProps } from './components/Header/Header';
+export type { ChipProps } from './components/Chip/Chip';
+export type { ButtonProps } from './components/Button/Button';
+export type { HStackProps } from './components/Stack';
+export type { VStackProps } from './components/Stack';
+export type { StyledTextProps, StyledViewProps } from './components/StyledComponents';
+export type { UserInputProps } from './components/UserInput/UserInput';
+export type { ProviderProps } from './components/Provider/NativeProvider';
+export type { GridProps } from './components/Grid/Grid';
+export type { ProgressProps } from './components/Progress/Progress';
+export type { SliderProps } from './components/Slider/Slider';
+export type { SurfaceProps } from './components/Surface/Surface';
+export type { SwitchProps } from './components/Switch/Switch';
+export type { TouchableRippleProps } from './components/TouchableRipple/TouchableRipple';
+export type { DialogProps, DialogHeadProps, DialogBodyProps, DialogFootProps, DialogDescriptionProps } from './components/Dialog';
+export type { CheckBoxProps } from './components/CheckBox/CheckBox';
+export type { AvatarTextProps, AvatarImageProps } from './components/Avatar';
+export type { DividerProps } from './components/Divider/Divider';
+export type { MenuProps, MenuItemProps, MenuItemLabelProps } from './components/Menu';
+export type { IconButtonProps } from './components/IconButton/IconButton';
+export type { IconProps } from './components/Icon/Icon';
+// export type { PortalProviderProps } from './components/Portal/PortalProvider';

package/src/index.tsx

@@ -0,0 +1,3 @@
+export function multiply(a: number, b: number): number {
+  return a * b;
+}

package/src/themes/DarkTheme.ts

@@ -0,0 +1,39 @@
+import { dialogSizes, typographySizes } from "../constants";
+import type { ThemeTypes } from "../types";
+
+
+const DarkTheme: ThemeTypes = {
+    isDark: true,
+    colors: {
+        primary: '#ffffff',
+        secondary: '#000000',
+        disable: 'rgba(180, 180, 180, 0.20)',
+        // outline: '#8080805e',
+        outline: '#9090905e',
+        textPrimary: '#ffffff',
+        textSecondary: '#000000',
+        // textTertiary: 'gray',
+        textTertiary: '#A0A0A0',
+        textDisable: '#808080',
+        cursorColor: '#ffffff',
+        placeholderColor: '#808080',
+
+
+        iconPrimary: '#E0E0E0',
+        iconSecondary: '#000000',
+        iconDisable: '#808080',
+
+        dividerColor: "#3A3A3A",
+        inputBgColor: 'transparent',
+        chipBgColor: 'transparent',
+
+        switchColor: '#ffffff',
+        error: '#ED2939'
+    },
+    typography: {
+        variantSizes: typographySizes
+    },
+    dialogSizes,
+}
+
+export default DarkTheme;